Fix search input outlined background color and margin (#20407)

build-scripts/webpack.cjs

@@ -161,6 +161,7 @@ const createWebpackConfig = ({
     resolve: {
       extensions: [".ts", ".js", ".json"],
       alias: {
+        "lit/static-html$": "lit/static-html.js",
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
         "lit/directives/until$": "lit/directives/until.js",

src/components/ha-outlined-field.ts

@@ -0,0 +1,40 @@
+import { MdOutlinedField } from "@material/web/field/outlined-field";
+import "element-internals-polyfill";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { literal } from "lit/static-html";
+
+@customElement("ha-outlined-field")
+export class HaOutlinedField extends MdOutlinedField {
+  protected readonly fieldTag = literal`ha-outlined-field`;
+
+  static override styles = [
+    ...super.styles,
+    css`
+      .container::before {
+        display: block;
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--ha-outlined-field-container-color, transparent);
+        opacity: var(--ha-outlined-field-container-opacity, 1);
+        border-start-start-radius: var(--_container-shape-start-start);
+        border-start-end-radius: var(--_container-shape-start-end);
+        border-end-start-radius: var(--_container-shape-end-start);
+        border-end-end-radius: var(--_container-shape-end-end);
+      }
+      .with-start .start {
+        margin-inline-end: var(--ha-outlined-field-start-margin, 4px);
+      }
+      .with-end .end {
+        margin-inline-start: var(--ha-outlined-field-end-margin, 4px);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-field": HaOutlinedField;
+  }
+}

src/components/ha-outlined-text-field.ts

@@ -2,9 +2,13 @@ import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field
 import "element-internals-polyfill";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
+import { literal } from "lit/static-html";
+import "./ha-outlined-field";
 
 @customElement("ha-outlined-text-field")
 export class HaOutlinedTextField extends MdOutlinedTextField {
+  protected readonly fieldTag = literal`ha-outlined-field`;
+
   static override styles = [
     ...super.styles,
     css`
@@ -25,12 +29,10 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
         --md-outlined-field-container-shape-end-end: 10px;
         --md-outlined-field-container-shape-end-start: 10px;
         --md-outlined-field-focus-outline-width: 1px;
+        --ha-outlined-field-start-margin: -4px;
+        --ha-outlined-field-end-margin: -4px;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
-      md-outlined-field {
-        background: var(--ha-outlined-text-field-container-color, transparent);
-        opacity: var(--ha-outlined-text-field-container-opacity, 1);
-      }
       .input {
         font-family: Roboto, sans-serif;
       }

src/components/search-input-outlined.ts

@@ -97,7 +97,7 @@ class SearchInputOutlined extends LitElement {
       ha-outlined-text-field {
         display: block;
         width: 100%;
-        --ha-outlined-text-field-container-color: var(--card-background-color);
+        --ha-outlined-field-container-color: var(--card-background-color);
       }
       ha-svg-icon,
       ha-icon-button {