Update dependency @rsdoctor/rspack-plugin to v1.5.6 (#51375)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/dependabot.yml

@@ -5,6 +5,9 @@ updates:
     schedule:
       interval: weekly
       time: "06:00"
+    cooldown:
+      default-days-before-reopen: 30
+      default-days: 7
     open-pull-requests-limit: 10
     labels:
       - Dependencies

.github/workflows/cast_deployment.yaml

@@ -8,6 +8,9 @@ on:
     branches:
       - master
 
+permissions:
+  contents: read
+
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -24,6 +27,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -59,6 +63,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/ci.yaml

@@ -18,6 +18,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   lint:
     name: Lint and check format
@@ -25,6 +28,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -37,7 +42,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
+        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
         with:
           path: |
             node_modules/.cache/prettier
@@ -59,6 +64,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -77,6 +84,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:

.github/workflows/codeql-analysis.yml

@@ -7,6 +7,10 @@ on:
     # The branches below must be a subset of the branches above
     branches: [dev]
 
+permissions:
+  contents: read
+  security-events: write
+
 jobs:
   analyze:
     name: Analyze
@@ -28,6 +32,7 @@ jobs:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
           fetch-depth: 2
+          persist-credentials: false
 
       # If this run was triggered by a pull request event, then checkout
       # the head of the pull request instead of the merge commit.
@@ -36,14 +41,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/autobuild@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1

.github/workflows/demo_deployment.yaml

@@ -9,6 +9,9 @@ on:
       - dev
       - master
 
+permissions:
+  contents: read
+
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -25,6 +28,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -60,6 +64,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/design_deployment.yaml

@@ -5,6 +5,9 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
+permissions:
+  contents: read
+
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -17,6 +20,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/design_preview.yaml

@@ -10,6 +10,9 @@ on:
     branches:
       - dev
 
+permissions:
+  contents: read
+
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -22,6 +25,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/labeler.yaml

@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 
-on: pull_request_target
+on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
 
 jobs:
   triage:

.github/workflows/lock.yml

@@ -5,6 +5,10 @@ on:
   schedule:
     - cron: "0 * * * *"
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
   lock:
     runs-on: ubuntu-latest

.github/workflows/nightly.yaml

@@ -21,6 +21,8 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6

.github/workflows/relative-ci.yaml

@@ -1,25 +1,39 @@
 name: RelativeCI
 
 on:
+  # zizmor: ignore[dangerous-triggers] -- safe: only downloads artifacts, no PR code checkout
   workflow_run:
     workflows: [CI]
     types:
       - completed
 
+permissions:
+  contents: read
+  actions: read
+
 jobs:
-  upload:
-    name: Upload stats
+  upload-frontend-modern:
+    name: Upload stats (frontend/modern)
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    strategy:
-      matrix:
-        bundle: [frontend]
-        build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
         uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
-          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
+          key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
           token: ${{ github.token }}
-          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
-          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}
+          artifactName: frontend-bundle-stats
+          webpackStatsFile: frontend-modern.json
+
+  upload-frontend-legacy:
+    name: Upload stats (frontend/legacy)
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        with:
+          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
+          token: ${{ github.token }}
+          artifactName: frontend-bundle-stats
+          webpackStatsFile: frontend-legacy.json

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@3a7fb5c85b80b1dda66e1ccb94009adbbd32fce3 # v7.0.0
+      - uses: release-drafter/release-drafter@139054aeaa9adc52ab36ddf67437541f039b88e2 # v7.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -27,6 +27,8 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
@@ -34,13 +36,12 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@master
+        uses: home-assistant/actions/helpers/verify-version@d56d093b9ab8d2105bc0cb6ee9bcc0ef4ec8b96d # master
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
-          cache: yarn
 
       - name: Install dependencies
         run: yarn install
@@ -62,11 +63,10 @@ jobs:
           skip-existing: true
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
-        with:
-          files: |
-            dist/*.whl
-            dist/*.tar.gz
+        env:
+          GH_TOKEN: ${{ github.token }}
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
 
   wheels-init:
     name: Init wheels build
@@ -74,15 +74,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Generate requirements.txt
+        env:
+          GITHUB_REF: ${{ github.ref }}
         run: |
           # Sleep to give pypi time to populate the new version across mirrors
           sleep 240
-          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
+          version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.12.0
+        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -99,11 +101,12 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
-          cache: yarn
       - name: Install dependencies
         run: yarn install
       - name: Download Translations
@@ -113,8 +116,11 @@ jobs:
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder
-        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
+        env:
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: tar -czf "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
-        with:
-          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+        env:
+          GH_TOKEN: ${{ github.token }}
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: gh release upload "$TAG_NAME" "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" --clobber

.github/workflows/stale.yml

@@ -5,6 +5,10 @@ on:
   schedule:
     - cron: "0 * * * *"
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
   stale:
     runs-on: ubuntu-latest

.github/workflows/translations.yaml

@@ -8,6 +8,9 @@ on:
     paths:
       - src/translations/en.json
 
+permissions:
+  contents: read
+
 jobs:
   upload:
     name: Upload
@@ -15,6 +18,8 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
 
       - name: Upload Translations
         run: |

.nvmrc

@@ -1 +1 @@
-24.14.0
+24.14.1

.yarn/patches/workbox-build-npm-7.4.0-c84561662c.patch

@@ -31,7 +31,7 @@ index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f
 @@ -129,7 +129,10 @@ export async function injectManifest(
        searchString: options.injectionPoint!,
      });
- 
+
 -    filesToWrite[options.swDest] = source;
 +    filesToWrite[options.swDest] = source.replace(
 +      url!,

.yarnrc.yml

@@ -8,4 +8,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.12.0.cjs
+yarnPath: .yarn/releases/yarn-4.13.0.cjs

build-scripts/gulp/download-translations.js

@@ -99,6 +99,44 @@ const lokaliseProjects = {
   frontend: "3420425759f6d6d241f598.13594006",
 };
 
+const POLL_INTERVAL_MS = 1000;
+
+/* eslint-disable no-await-in-loop */
+async function pollProcess(lokaliseApi, projectId, processId) {
+  while (true) {
+    const process = await lokaliseApi
+      .queuedProcesses()
+      .get(processId, { project_id: projectId });
+
+    const project =
+      projectId === lokaliseProjects.backend ? "backend" : "frontend";
+
+    if (process.status === "finished") {
+      console.log(`Lokalise export process for ${project} finished`);
+      return process;
+    }
+
+    if (process.status === "failed" || process.status === "cancelled") {
+      throw new Error(
+        `Lokalise export process for ${project} ${process.status}: ${process.message}`
+      );
+    }
+
+    console.log(
+      `Lokalise export process for ${project} in progress...`,
+      process.status,
+      process.details?.items_to_process
+        ? `${Math.round(((process.details.items_processed || 0) / process.details.items_to_process) * 100)}% (${process.details.items_processed}/${process.details.items_to_process})`
+        : ""
+    );
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, POLL_INTERVAL_MS);
+    });
+  }
+}
+/* eslint-enable no-await-in-loop */
+
 gulp.task("fetch-lokalise", async function () {
   let apiKey;
   try {
@@ -118,55 +156,60 @@ gulp.task("fetch-lokalise", async function () {
   ]);
 
   await Promise.all(
-    Object.entries(lokaliseProjects).map(([project, projectId]) =>
-      lokaliseApi
-        .files()
-        .download(projectId, {
-          format: "json",
-          original_filenames: false,
-          replace_breaks: false,
-          json_unescaped_slashes: true,
-          export_empty_as: "skip",
-          filter_data: ["verified"],
-        })
-        .then((download) => fetch(download.bundle_url))
-        .then((response) => {
-          if (response.status === 200 || response.status === 0) {
-            return response.arrayBuffer();
-          }
+    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
+      try {
+        const exportProcess = await lokaliseApi
+          .files()
+          .async_download(projectId, {
+            format: "json",
+            original_filenames: false,
+            replace_breaks: false,
+            json_unescaped_slashes: true,
+            export_empty_as: "skip",
+            filter_data: ["verified"],
+          });
+
+        const finishedProcess = await pollProcess(
+          lokaliseApi,
+          projectId,
+          exportProcess.process_id
+        );
+
+        const bundleUrl = finishedProcess.details.download_url;
+
+        console.log(`Downloading translations from: ${bundleUrl}`);
+
+        const response = await fetch(bundleUrl);
+
+        if (response.status !== 200 && response.status !== 0) {
           throw new Error(response.statusText);
-        })
-        .then(JSZip.loadAsync)
-        .then(async (contents) => {
-          await mkdirPromise;
-          return Promise.all(
-            Object.keys(contents.files).map(async (filename) => {
-              const file = contents.file(filename);
-              if (!file) {
-                // no file, probably a directory
-                return Promise.resolve();
-              }
-              return file
-                .async("nodebuffer")
-                .then((content) =>
-                  fs.writeFile(
-                    path.join(
-                      inDir,
-                      project,
-                      filename.split("/").splice(-1)[0]
-                    ),
-                    content,
-                    { flag: "w", encoding }
-                  )
-                );
-            })
-          );
-        })
-        .catch((err) => {
-          console.error(err);
-          throw err;
-        })
-    )
+        }
+
+        console.log(`Extracting translations...`);
+
+        const contents = await JSZip.loadAsync(await response.arrayBuffer());
+
+        await mkdirPromise;
+        await Promise.all(
+          Object.keys(contents.files).map(async (filename) => {
+            const file = contents.file(filename);
+            if (!file) {
+              // no file, probably a directory
+              return;
+            }
+            const content = await file.async("nodebuffer");
+            await fs.writeFile(
+              path.join(inDir, project, filename.split("/").splice(-1)[0]),
+              content,
+              { flag: "w", encoding }
+            );
+          })
+        );
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
+    })
   );
 });
 

build-scripts/gulp/locale-data.js

@@ -40,18 +40,24 @@ const convertToJSON = async (
     throw e;
   }
   // Convert to JSON
+  const parts = localeData.split("} else {");
+  const firstBlock = parts[0];
   const obj = INTL_POLYFILLS[pkg];
   const dataRegex = new RegExp(
     `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
     "s"
   );
-  localeData = localeData.match(dataRegex)?.groups?.data;
+  localeData = firstBlock.match(dataRegex)?.groups?.data;
   if (!localeData) {
     throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
   }
   // Parse to validate JSON, then stringify to minify
-  localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
+  try {
+    localeData = JSON.stringify(JSON.parse(localeData));
+    await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
+  } catch (e) {
+    throw Error(`Failed to parse JSON for language ${lang} from ${pkg}: ${e}`);
+  }
 };
 
 gulp.task("clean-locale-data", async () => deleteSync([outDir]));

cast/src/launcher/layout/hc-connect.ts

@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
-import "../../../../src/components/ha-textfield";
+import "../../../../src/components/input/ha-input";
 import "../../../../src/components/ha-button";
 
 const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
               To get started, enter your Home Assistant URL and click authorize.
               If you want a preview instead, click the show demo button.
             </p>
-            <ha-textfield
+            <ha-input
               label="Home Assistant URL"
               placeholder="https://abcdefghijklmnop.ui.nabu.casa"
               @keydown=${this._handleInputKeyDown}
-            ></ha-textfield>
+            ></ha-input>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-input")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
       flex: 1;
     }
 
-    ha-textfield {
+    ha-input {
       width: 100%;
     }
   `;

demo/src/custom-cards/cast-demo-row.ts

@@ -1,3 +1,4 @@
+/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";

gallery/src/pages/components/ha-form.ts

@@ -480,6 +480,12 @@ const SCHEMAS: {
       },
       { type: "string", name: "path", default: "/" },
       { type: "boolean", name: "ssl", default: false },
+      {
+        type: "string",
+        name: "comments",
+        default: "disabled field",
+        disabled: true,
+      },
     ],
   },
 ];

gallery/src/pages/components/ha-input.markdown

@@ -0,0 +1,82 @@
+---
+title: Input
+---
+
+# Input `<ha-input>`
+
+A text input component supporting Home Assistant theming and validation, based on webawesome input.
+Supports multiple input types including text, number, password, email, search, and more.
+
+## Implementation
+
+### Example usage
+
+```html
+<ha-input label="Name" value="Hello"></ha-input>
+
+<ha-input label="Email" type="email" placeholder="you@example.com"></ha-input>
+
+<ha-input label="Password" type="password" password-toggle></ha-input>
+
+<ha-input label="Required" required></ha-input>
+
+<ha-input label="Disabled" disabled value="Can't touch this"></ha-input>
+```
+
+### API
+
+This component is based on the webawesome input component.
+
+**Slots**
+
+- `start`: Content placed before the input (usually for icons or prefixes).
+- `end`: Content placed after the input (usually for icons or suffixes).
+- `label`: Custom label content. Overrides the `label` property.
+- `hint`: Custom hint content. Overrides the `hint` property.
+- `clear-icon`: Custom clear icon.
+- `show-password-icon`: Custom show password icon.
+- `hide-password-icon`: Custom hide password icon.
+
+**Properties/Attributes**
+
+| Name                 | Type                                                                                           | Default    | Description                                                                                                |
+| -------------------- | ---------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- |
+| appearance           | "material"/"outlined"                                                                          | "material" | Sets the input appearance style. "material" is the default filled style, "outlined" uses a bordered style. |
+| type                 | "text"/"number"/"password"/"email"/"search"/"tel"/"url"/"date"/"datetime-local"/"time"/"color" | "text"     | Sets the input type.                                                                                       |
+| value                | String                                                                                         | -          | The current value of the input.                                                                            |
+| label                | String                                                                                         | ""         | The input's label text.                                                                                    |
+| hint                 | String                                                                                         | ""         | The input's hint/helper text.                                                                              |
+| placeholder          | String                                                                                         | ""         | Placeholder text shown when the input is empty.                                                            |
+| with-clear           | Boolean                                                                                        | false      | Adds a clear button when the input is not empty.                                                           |
+| readonly             | Boolean                                                                                        | false      | Makes the input readonly.                                                                                  |
+| disabled             | Boolean                                                                                        | false      | Disables the input and prevents user interaction.                                                          |
+| required             | Boolean                                                                                        | false      | Makes the input a required field.                                                                          |
+| password-toggle      | Boolean                                                                                        | false      | Adds a button to toggle the password visibility.                                                           |
+| without-spin-buttons | Boolean                                                                                        | false      | Hides the browser's built-in spin buttons for number inputs.                                               |
+| auto-validate        | Boolean                                                                                        | false      | Validates the input on blur instead of on form submit.                                                     |
+| invalid              | Boolean                                                                                        | false      | Marks the input as invalid.                                                                                |
+| inset-label          | Boolean                                                                                        | false      | Uses an inset label style where the label stays inside the input.                                          |
+| validation-message   | String                                                                                         | ""         | Custom validation message shown when the input is invalid.                                                 |
+| pattern              | String                                                                                         | -          | A regular expression pattern to validate input against.                                                    |
+| minlength            | Number                                                                                         | -          | The minimum length of input that will be considered valid.                                                 |
+| maxlength            | Number                                                                                         | -          | The maximum length of input that will be considered valid.                                                 |
+| min                  | Number/String                                                                                  | -          | The input's minimum value. Only applies to date and number input types.                                    |
+| max                  | Number/String                                                                                  | -          | The input's maximum value. Only applies to date and number input types.                                    |
+| step                 | Number/"any"                                                                                   | -          | Specifies the granularity that the value must adhere to.                                                   |
+
+**CSS Custom Properties**
+
+- `--ha-input-padding-top` - Padding above the input.
+- `--ha-input-padding-bottom` - Padding below the input. Defaults to `var(--ha-space-2)`.
+- `--ha-input-text-align` - Text alignment of the input. Defaults to `start`.
+- `--ha-input-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
+
+---
+
+## Derivatives
+
+The following components extend or wrap `ha-input` for specific use cases:
+
+- **`<ha-input-search>`** — A pre-configured search input with a magnify icon, clear button, and localized "Search" placeholder. Extends `ha-input`.
+- **`<ha-input-copy>`** — A read-only input with a copy-to-clipboard button. Supports optional value masking with a reveal toggle.
+- **`<ha-input-multi>`** — A dynamic list of text inputs for managing arrays of strings. Supports adding, removing, and drag-and-drop reordering.

gallery/src/pages/components/ha-input.ts

@@ -0,0 +1,232 @@
+import { ContextProvider } from "@lit/context";
+import { mdiMagnify } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/input/ha-input";
+import "../../../../src/components/input/ha-input-copy";
+import "../../../../src/components/input/ha-input-multi";
+import "../../../../src/components/input/ha-input-search";
+import { localizeContext } from "../../../../src/data/context";
+
+const LOCALIZE_KEYS: Record<string, string> = {
+  "ui.common.copy": "Copy",
+  "ui.common.show": "Show",
+  "ui.common.hide": "Hide",
+  "ui.common.add": "Add",
+  "ui.common.remove": "Remove",
+  "ui.common.search": "Search",
+  "ui.common.copied_clipboard": "Copied to clipboard",
+};
+
+@customElement("demo-components-ha-input")
+export class DemoHaInput extends LitElement {
+  constructor() {
+    super();
+    // Provides localizeContext for ha-input-copy, ha-input-multi and ha-input-search
+    // eslint-disable-next-line no-new
+    new ContextProvider(this, {
+      context: localizeContext,
+      initialValue: ((key: string) => LOCALIZE_KEYS[key] ?? key) as any,
+    });
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-input in ${mode}">
+              <div class="card-content">
+                <h3>Basic</h3>
+                <div class="row">
+                  <ha-input label="Default"></ha-input>
+                  <ha-input label="With value" value="Hello"></ha-input>
+                  <ha-input
+                    label="With placeholder"
+                    placeholder="Type here..."
+                  ></ha-input>
+                </div>
+
+                <h3>Input types</h3>
+                <div class="row">
+                  <ha-input label="Text" type="text" value="Text"></ha-input>
+                  <ha-input label="Number" type="number" value="42"></ha-input>
+                  <ha-input
+                    label="Email"
+                    type="email"
+                    placeholder="you@example.com"
+                  ></ha-input>
+                </div>
+                <div class="row">
+                  <ha-input
+                    label="Password"
+                    type="password"
+                    value="secret"
+                    password-toggle
+                  ></ha-input>
+                  <ha-input label="URL" type="url" placeholder="https://...">
+                  </ha-input>
+                  <ha-input label="Date" type="date"></ha-input>
+                </div>
+
+                <h3>States</h3>
+                <div class="row">
+                  <ha-input
+                    label="Disabled"
+                    disabled
+                    value="Disabled"
+                  ></ha-input>
+                  <ha-input
+                    label="Readonly"
+                    readonly
+                    value="Readonly"
+                  ></ha-input>
+                  <ha-input label="Required" required></ha-input>
+                </div>
+                <div class="row">
+                  <ha-input
+                    label="Invalid"
+                    invalid
+                    validation-message="This field is required"
+                    value=""
+                  ></ha-input>
+                  <ha-input label="With hint" hint="This is a hint"></ha-input>
+                  <ha-input
+                    label="With clear"
+                    with-clear
+                    value="Clear me"
+                  ></ha-input>
+                </div>
+
+                <h3>With slots</h3>
+                <div class="row">
+                  <ha-input label="With prefix">
+                    <span slot="start">$</span>
+                  </ha-input>
+                  <ha-input label="With suffix">
+                    <span slot="end">kg</span>
+                  </ha-input>
+                  <ha-input label="With icon">
+                    <ha-svg-icon .path=${mdiMagnify} slot="start"></ha-svg-icon>
+                  </ha-input>
+                </div>
+
+                <h3>Appearance: outlined</h3>
+                <div class="row">
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined"
+                    value="Hello"
+                  ></ha-input>
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined disabled"
+                    disabled
+                    value="Disabled"
+                  ></ha-input>
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined invalid"
+                    invalid
+                    validation-message="Required"
+                  ></ha-input>
+                </div>
+                <div class="row">
+                  <ha-input
+                    appearance="outlined"
+                    placeholder="Placeholder only"
+                  ></ha-input>
+                </div>
+              </div>
+            </ha-card>
+
+            <ha-card header="Derivatives in ${mode}">
+              <div class="card-content">
+                <h3>ha-input-search</h3>
+                <ha-input-search label="Search label"></ha-input-search>
+                <ha-input-search appearance="outlined"></ha-input-search>
+
+                <h3>ha-input-copy</h3>
+                <ha-input-copy
+                  value="my-api-token-123"
+                  masked-value="••••••••••••••••••"
+                  masked-toggle
+                ></ha-input-copy>
+
+                <h3>ha-input-multi</h3>
+                <ha-input-multi
+                  label="URL"
+                  add-label="Add URL"
+                  .value=${["https://example.com"]}
+                ></ha-input-multi>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-2);
+    }
+    h3 {
+      margin: var(--ha-space-4) 0 var(--ha-space-1) 0;
+      font-size: var(--ha-font-size-l);
+      font-weight: var(--ha-font-weight-medium);
+    }
+    h3:first-child {
+      margin-top: 0;
+    }
+    .row {
+      display: flex;
+      gap: var(--ha-space-4);
+    }
+    .row > * {
+      flex: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-input": DemoHaInput;
+  }
+}

gallery/src/pages/components/ha-selector.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
@@ -692,7 +692,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    <span slot="description">${value?.description}</span>
+                    ${value?.description
+                      ? html`<span slot="description"
+                          >${value?.description}</span
+                        >`
+                      : nothing}
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}

gallery/src/pages/concepts/home.markdown

@@ -19,7 +19,7 @@ The Home Assistant interface is based on Material Design. It's a design system c
 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:
 
 - Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
-- Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
+- Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 
 ## Developers

gallery/src/pages/lovelace/gauge-card.ts

@@ -134,6 +134,21 @@ const CONFIGS = [
   entity: sensor.not_working
     `,
   },
+  {
+    heading: "Lower minimum",
+    config: `
+- type: gauge
+  entity: sensor.brightness_high
+  needle: true
+  severity:
+    green: 0
+    yellow: 0.45
+    red: 0.9
+  min: -0.05
+  name: " "
+  max: 1.9
+  unit: GBP/h`,
+  },
 ];
 
 @customElement("demo-lovelace-gauge-card")

gallery/src/pages/misc/entity-state.ts

@@ -422,7 +422,6 @@ export class DemoEntityState extends LitElement {
 
     return html`
       <ha-data-table
-        .hass=${this.hass}
         .columns=${this._columns(this.hass)}
         .data=${this._rows()}
         auto-height

package.json

@@ -26,33 +26,33 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.28.6",
+    "@babel/runtime": "7.29.2",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
-    "@codemirror/language": "6.12.2",
+    "@codemirror/language": "6.12.3",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.40.0",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.2.5",
-    "@formatjs/intl-displaynames": "7.2.2",
-    "@formatjs/intl-durationformat": "0.10.1",
-    "@formatjs/intl-getcanonicallocales": "3.2.1",
-    "@formatjs/intl-listformat": "8.2.2",
-    "@formatjs/intl-locale": "5.2.1",
-    "@formatjs/intl-numberformat": "9.2.3",
-    "@formatjs/intl-pluralrules": "6.2.3",
-    "@formatjs/intl-relativetimeformat": "12.2.3",
+    "@formatjs/intl-datetimeformat": "7.3.1",
+    "@formatjs/intl-displaynames": "7.3.1",
+    "@formatjs/intl-durationformat": "0.10.3",
+    "@formatjs/intl-getcanonicallocales": "3.2.2",
+    "@formatjs/intl-listformat": "8.3.1",
+    "@formatjs/intl-locale": "5.3.1",
+    "@formatjs/intl-numberformat": "9.3.1",
+    "@formatjs/intl-pluralrules": "6.3.1",
+    "@formatjs/intl-relativetimeformat": "12.3.1",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.3.1",
+    "@home-assistant/webawesome": "3.3.1-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -82,19 +82,18 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.19",
+    "@swc/helpers": "0.5.20",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
     "@vibrant/color": "4.0.4",
-    "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "app-datepicker": "5.1.1",
     "barcode-detector": "3.1.1",
+    "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
-    "core-js": "3.48.0",
+    "core-js": "3.49.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
@@ -109,7 +108,7 @@
     "hls.js": "1.6.15",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.1.2",
+    "intl-messageformat": "11.2.0",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -117,7 +116,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "17.0.4",
+    "marked": "17.0.5",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -130,9 +129,6 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.9",
-    "vue": "2.7.16",
-    "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.4.0",
     "workbox-core": "7.4.0",
@@ -144,17 +140,17 @@
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
-    "@babel/helper-define-polyfill-provider": "0.6.7",
+    "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.0",
-    "@bundle-stats/plugin-webpack-filter": "4.21.10",
+    "@babel/preset-env": "7.29.2",
+    "@bundle-stats/plugin-webpack-filter": "4.22.0",
     "@html-eslint/eslint-plugin": "0.58.1",
     "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.2",
-    "@rspack/core": "1.7.8",
+    "@rsdoctor/rspack-plugin": "1.5.6",
+    "@rspack/core": "1.7.10",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -172,9 +168,8 @@
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/coverage-v8": "4.1.2",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -197,9 +192,9 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "28.1.0",
+    "jsdom": "29.0.1",
     "jszip": "3.10.1",
-    "lint-staged": "16.3.3",
+    "lint-staged": "16.4.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -208,20 +203,19 @@
     "prettier": "3.8.1",
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
-    "sinon": "21.0.2",
-    "tar": "7.5.11",
+    "sinon": "21.0.3",
+    "tar": "7.5.13",
     "terser-webpack-plugin": "5.4.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.57.0",
+    "typescript": "6.0.2",
+    "typescript-eslint": "8.57.2",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.0",
+    "vitest": "4.1.2",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
-    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
+    "workbox-build": "patch:workbox-build@npm%3A7.4.0#~/.yarn/patches/workbox-build-npm-7.4.0-c84561662c.patch"
   },
   "resolutions": {
-    "@material/mwc-button@^0.25.3": "^0.27.0",
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "clean-css": "5.3.3",
@@ -232,8 +226,8 @@
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.12.0",
+  "packageManager": "yarn@4.13.0",
   "volta": {
-    "node": "24.14.0"
+    "node": "24.14.1"
   }
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260128.0"
+version      = "20260325.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

renovate.json

@@ -24,11 +24,6 @@
       "extends": ["monorepo:material-components-web"],
       "enabled": false
     },
-    {
-      "description": "Vue is only used by date range which is only v2",
-      "matchPackageNames": ["vue"],
-      "allowedVersions": "< 3"
-    },
     {
       "description": "Group MDI packages",
       "groupName": "Material Design Icons",

src/auth/ha-auth-form-string.ts

@@ -1,10 +1,7 @@
-/* eslint-disable lit/prefer-static-styles */
-import type { TemplateResult } from "lit";
-import { html } from "lit";
 import { customElement } from "lit/decorators";
 import { HaFormString } from "../components/ha-form/ha-form-string";
 import "../components/ha-icon-button";
-import "./ha-auth-textfield";
+import "../components/input/ha-input";
 
 @customElement("ha-auth-form-string")
 export class HaAuthFormString extends HaFormString {
@@ -12,63 +9,9 @@ export class HaAuthFormString extends HaFormString {
     return this;
   }
 
-  public reportValidity(): boolean {
-    return this.querySelector("ha-auth-textfield")?.reportValidity() ?? true;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <style>
-        ha-auth-form-string {
-          display: block;
-          position: relative;
-        }
-        ha-auth-form-string[own-margin] {
-          margin-bottom: 5px;
-        }
-        ha-auth-form-string ha-auth-textfield {
-          display: block !important;
-        }
-        ha-auth-form-string ha-icon-button {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          inset-inline-start: initial;
-          inset-inline-end: 8px;
-          --ha-icon-button-size: 40px;
-          --mdc-icon-size: 20px;
-          color: var(--secondary-text-color);
-          direction: var(--direction);
-        }
-      </style>
-      <ha-auth-textfield
-        .type=${!this.isPassword
-          ? this.stringType
-          : this.unmaskedPassword
-            ? "text"
-            : "password"}
-        .label=${this.label}
-        .value=${this.data || ""}
-        .helper=${this.helper}
-        helperPersistent
-        .disabled=${this.disabled}
-        .required=${this.schema.required}
-        .autoValidate=${this.schema.required}
-        .name=${this.schema.name}
-        .autocomplete=${this.schema.autocomplete}
-        ?autofocus=${this.schema.autofocus}
-        .suffix=${this.isPassword
-          ? // reserve some space for the icon.
-            html`<div style="width: 24px"></div>`
-          : this.schema.description?.suffix}
-        .validationMessage=${this.schema.required
-          ? this.localize?.("ui.panel.page-authorize.form.error_required")
-          : undefined}
-        @input=${this._valueChanged}
-        @change=${this._valueChanged}
-      ></ha-auth-textfield>
-      ${this.renderIcon()}
-    `;
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.style.position = "relative";
   }
 }
 

src/auth/ha-auth-form.ts

@@ -1,9 +1,9 @@
 /* eslint-disable lit/prefer-static-styles */
 import { html } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { HaForm } from "../components/ha-form/ha-form";
 import "./ha-auth-form-string";
-import type { LocalizeFunc } from "../common/translations/localize";
 
 const localizeBaseKey = "ui.panel.page-authorize.form";
 
@@ -34,6 +34,9 @@ export class HaAuthForm extends HaForm {
   protected render() {
     return html`
       <style>
+        ha-auth-form {
+          --ha-input-required-marker: "";
+        }
         ha-auth-form .root > * {
           display: block;
         }

src/auth/ha-auth-textfield.ts

@@ -1,264 +0,0 @@
-/* eslint-disable lit/value-after-constraints */
-/* eslint-disable lit/prefer-static-styles */
-import { floatingLabel } from "@material/mwc-floating-label/mwc-floating-label-directive";
-import type { TemplateResult } from "lit";
-import { html } from "lit";
-import { customElement } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { live } from "lit/directives/live";
-import { HaTextField } from "../components/ha-textfield";
-
-@customElement("ha-auth-textfield")
-export class HaAuthTextField extends HaTextField {
-  protected renderLabel(): TemplateResult | string {
-    return !this.label
-      ? ""
-      : html`
-          <span
-            .floatingLabelFoundation=${floatingLabel(
-              this.label
-            ) as unknown as any}
-            .id=${this.name}
-            >${this.label}</span
-          >
-        `;
-  }
-
-  protected renderInput(shouldRenderHelperText: boolean): TemplateResult {
-    const minOrUndef = this.minLength === -1 ? undefined : this.minLength;
-    const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
-    const autocapitalizeOrUndef = this.autocapitalize
-      ? (this.autocapitalize as
-          | "off"
-          | "none"
-          | "on"
-          | "sentences"
-          | "words"
-          | "characters")
-      : undefined;
-    const showValidationMessage = this.validationMessage && !this.isUiValid;
-    const ariaLabelledbyOrUndef = this.label ? this.name : undefined;
-    const ariaControlsOrUndef = shouldRenderHelperText
-      ? "helper-text"
-      : undefined;
-    const ariaDescribedbyOrUndef =
-      this.focused || this.helperPersistent || showValidationMessage
-        ? "helper-text"
-        : undefined;
-    // TODO: live() directive needs casting for lit-analyzer
-    // https://github.com/runem/lit-analyzer/pull/91/files
-    // TODO: lit-analyzer labels min/max as (number|string) instead of string
-    return html`<input
-      aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
-      aria-controls=${ifDefined(ariaControlsOrUndef)}
-      aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
-      class="mdc-text-field__input"
-      type=${this.type}
-      .value=${live(this.value) as unknown as string}
-      ?disabled=${this.disabled}
-      placeholder=${this.placeholder}
-      ?required=${this.required}
-      ?readonly=${this.readOnly}
-      minlength=${ifDefined(minOrUndef)}
-      maxlength=${ifDefined(maxOrUndef)}
-      pattern=${ifDefined(this.pattern ? this.pattern : undefined)}
-      min=${ifDefined(this.min === "" ? undefined : (this.min as number))}
-      max=${ifDefined(this.max === "" ? undefined : (this.max as number))}
-      step=${ifDefined(this.step === null ? undefined : (this.step as number))}
-      size=${ifDefined(this.size === null ? undefined : this.size)}
-      name=${ifDefined(this.name === "" ? undefined : this.name)}
-      inputmode=${ifDefined(this.inputMode)}
-      autocapitalize=${ifDefined(autocapitalizeOrUndef)}
-      ?autofocus=${this.autofocus}
-      @input=${this.handleInputChange}
-      @focus=${this.onInputFocus}
-      @blur=${this.onInputBlur}
-    />`;
-  }
-
-  public render() {
-    return html`
-      <style>
-        ha-auth-textfield {
-          display: inline-flex;
-          flex-direction: column;
-          outline: none;
-        }
-        ha-auth-textfield:not([disabled]):hover
-          :not(.mdc-text-field--invalid):not(.mdc-text-field--focused)
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-outlined-hover-border-color,
-            rgba(0, 0, 0, 0.87)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--outlined) {
-          background-color: var(--mdc-text-field-fill-color, whitesmoke);
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-error-color,
-            var(--mdc-theme-error, #b00020)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          + .mdc-text-field-helper-line
-          .mdc-text-field-character-counter,
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--invalid
-          .mdc-text-field__icon {
-          color: var(
-            --mdc-text-field-error-color,
-            var(--mdc-theme-error, #b00020)
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label,
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label::after {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused
-          mwc-notched-outline {
-          --mdc-notched-outline-stroke-width: 2px;
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-focused-label-color,
-            var(--mdc-theme-primary, rgba(98, 0, 238, 0.87))
-          );
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          .mdc-floating-label {
-          color: #6200ee;
-          color: var(--mdc-theme-primary, #6200ee);
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field
-          .mdc-text-field__input {
-          color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, 0.87));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field
-          .mdc-text-field__input::placeholder {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field-helper-line
-          .mdc-text-field-helper-text:not(
-            .mdc-text-field-helper-text--validation-msg
-          ),
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field-helper-line:not(.mdc-text-field--invalid)
-          .mdc-text-field-character-counter {
-          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--outlined) {
-          background-color: var(--mdc-text-field-disabled-fill-color, #fafafa);
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field.mdc-text-field--outlined
-          mwc-notched-outline {
-          --mdc-notched-outline-border-color: var(
-            --mdc-text-field-outlined-disabled-border-color,
-            rgba(0, 0, 0, 0.06)
-          );
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label,
-        ha-auth-textfield[disabled]
-          .mdc-text-field:not(.mdc-text-field--invalid):not(
-            .mdc-text-field--focused
-          )
-          .mdc-floating-label::after {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-
-        ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
-        ha-auth-textfield[disabled]
-          .mdc-text-field
-          .mdc-text-field__input::placeholder {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-
-        ha-auth-textfield[disabled]
-          .mdc-text-field-helper-line
-          .mdc-text-field-helper-text,
-        ha-auth-textfield[disabled]
-          .mdc-text-field-helper-line
-          .mdc-text-field-character-counter {
-          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
-        }
-        ha-auth-textfield:not([disabled])
-          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
-          .mdc-floating-label {
-          color: var(--mdc-theme-primary, #6200ee);
-        }
-        ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button,
-        ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        /* Firefox */
-        ha-auth-textfield[no-spinner] input[type="number"] {
-          -moz-appearance: textfield;
-        }
-      </style>
-      ${super.render()}
-    `;
-  }
-
-  protected createRenderRoot() {
-    // add parent style to light dom
-    const style = document.createElement("style");
-    style.textContent = HaTextField.elementStyles as unknown as string;
-    this.append(style);
-    return this;
-  }
-
-  public firstUpdated() {
-    super.firstUpdated();
-
-    if (this.autofocus) {
-      this.focus();
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-auth-textfield": HaAuthTextField;
-  }
-}

src/cast/cast_manager.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/// <reference types="chromecast-caf-sender" />
 
 import type { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";
@@ -58,9 +59,11 @@ export class CastManager {
     this._eventListeners[event].push(listener);
 
     return () => {
-      this._eventListeners[event].splice(
-        this._eventListeners[event].indexOf(listener)
-      );
+      const listeners = this._eventListeners[event];
+      const index = listeners.indexOf(listener);
+      if (index !== -1) {
+        listeners.splice(index, 1);
+      }
     };
   }
 

src/common/color/compute-color.ts

@@ -32,6 +32,12 @@ const YAML_ONLY_THEMES_COLORS = new Set([
   "disabled",
 ]);
 
+/**
+ * Compose a CSS variable out of a theme color
+ * @param color - Theme color (examples: `red`, `primary-text`)
+ * @returns CSS variable in `--xxx-color` format;
+ * initial color if not found in theme colors
+ */
 export function computeCssVariableName(color: string): string {
   if (THEME_COLORS.has(color) || YAML_ONLY_THEMES_COLORS.has(color)) {
     return `--${color}-color`;
@@ -39,6 +45,12 @@ export function computeCssVariableName(color: string): string {
   return color;
 }
 
+/**
+ * Compose a CSS variable out of a theme color & then resolve it
+ * @param color - Theme color (examples: `red`, `primary-text`)
+ * @returns Resolved CSS variable in `var(--xxx-color)` format;
+ * initial color if not found in theme colors
+ */
 export function computeCssColor(color: string): string {
   const cssVarName = computeCssVariableName(color);
   if (cssVarName !== color) {
@@ -47,6 +59,22 @@ export function computeCssColor(color: string): string {
   return color;
 }
 
+/**
+ * Get a color from document's styles
+ * @param color - Named theme color (examples: `red`, `primary-text`)
+ * @returns Resolved color; initial color if not found in document's styles
+ */
+export function resolveThemeColor(color: string): string {
+  const cssColor = computeCssVariableName(color);
+  if (cssColor.startsWith("--")) {
+    const resolved = getComputedStyle(document.body)
+      .getPropertyValue(cssColor)
+      .trim();
+    return resolved || color;
+  }
+  return cssColor;
+}
+
 /**
  * Validates if a string is a valid color.
  * Accepts: hex colors (#xxx, #xxxxxx), theme colors, and valid CSS color names.

src/common/color/convert-color.ts

@@ -1,5 +1,6 @@
 import colors from "color-name";
 import { expandHex } from "./hex";
+import { resolveThemeColor } from "./compute-color";
 
 const rgb_hex = (component: number): string => {
   const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -130,26 +131,43 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
   hsv2rgb([hs[0], hs[1], 255]);
 
-export function theme2hex(themeColor: string): string {
-  if (themeColor.startsWith("#")) {
-    if (themeColor.length === 4 || themeColor.length === 5) {
-      const c = themeColor;
+/**
+ * Attempt to get a HEX color from a color defined in different formats:
+ * HEX, rgb/rgba, named color
+ * @param color - Color (HEX, rgb/rgba, named color) to be converted to HEX
+ * @returns HEX color
+ */
+export function theme2hex(color: string): string {
+  // Attempting to find a HEX pattern in the input string
+  if (color.startsWith("#")) {
+    if (color.length === 4 || color.length === 5) {
+      const c = color;
       // Convert short-form hex (#abc) to 6 digit (#aabbcc). Ignore alpha channel.
       return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
     }
-    if (themeColor.length === 9) {
+    if (color.length === 9) {
       // Ignore alpha channel.
-      return themeColor.substring(0, 7);
+      return color.substring(0, 7);
     }
-    return themeColor;
+    return color;
   }
 
-  const rgbFromColorName = colors[themeColor.toLowerCase()];
-  if (rgbFromColorName) {
-    return rgb2hex(rgbFromColorName);
+  // Attempting to find a match in a HA Frontend theme colors
+  const themeColor = resolveThemeColor(color.toLowerCase());
+  if (themeColor !== color.toLowerCase()) {
+    // theme color is recognized, now re-attempt
+    return theme2hex(themeColor);
   }
 
-  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  // Attempting to find a match in a web colors array
+  const rgbFromWebColor = colors[color.toLowerCase()];
+  if (rgbFromWebColor) {
+    // HEX color is recognized for the input named color
+    return rgb2hex(rgbFromWebColor);
+  }
+
+  // Attempting to find an RGB pattern in the input string
+  const rgbMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
   if (rgbMatch) {
     const [, r, g, b] = rgbMatch.map(Number);
     return rgb2hex([r, g, b]);
@@ -158,5 +176,5 @@ export function theme2hex(themeColor: string): string {
   // We have a named color, and there's nothing in the table,
   // so nothing further we can do with it.
   // Compare/border/background color will all be the same.
-  return themeColor;
+  return color;
 }

src/common/color/rgb.ts

@@ -1,4 +1,5 @@
 import { wcagLuminance, wcagContrast } from "culori";
+import { theme2hex } from "./convert-color";
 
 /**
  * Calculates the luminosity of an RGB color.
@@ -48,3 +49,13 @@ export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]
 ) => Math.round((rgbContrast(rgb1, rgb2) + Number.EPSILON) * 100) / 100;
+
+/**
+ * Returns a contrasted color (black or white) based on the luminance of another color
+ * @param color - Color (HEX, rgb/rgba, named color) to calculate a contrasted color
+ * @returns HEX color ("#000000" for dark backgrounds, "#ffffff" for light backgrounds)
+ */
+export const getContrastedColorHex = (color: string): string => {
+  const lum = wcagLuminance(theme2hex(color));
+  return lum > 0.5 ? "#000000" : "#ffffff";
+};

src/common/condition/listeners.ts

@@ -1,6 +1,9 @@
 import { listenMediaQuery } from "../dom/media_query";
 import type { HomeAssistant } from "../../types";
-import type { Condition } from "../../panels/lovelace/common/validate-condition";
+import type {
+  Condition,
+  ConditionContext,
+} from "../../panels/lovelace/common/validate-condition";
 import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
 import { extractMediaQueries, extractTimeConditions } from "./extract";
 import { calculateNextTimeUpdate } from "./time-calculator";
@@ -19,7 +22,8 @@ export function setupMediaQueryListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
 ): void {
   const mediaQueries = extractMediaQueries(conditions);
 
@@ -36,7 +40,8 @@ export function setupMediaQueryListeners(
       if (hasOnlyMediaQuery) {
         onUpdate(matches);
       } else {
-        const conditionsMet = checkConditionsMet(conditions, hass);
+        const context = getContext?.() ?? {};
+        const conditionsMet = checkConditionsMet(conditions, hass, context);
         onUpdate(conditionsMet);
       }
     });
@@ -51,7 +56,8 @@ export function setupTimeListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
 ): void {
   const timeConditions = extractTimeConditions(conditions);
 
@@ -70,7 +76,8 @@ export function setupTimeListeners(
 
       timeoutId = setTimeout(() => {
         if (delay <= MAX_TIMEOUT_DELAY) {
-          const conditionsMet = checkConditionsMet(conditions, hass);
+          const context = getContext?.() ?? {};
+          const conditionsMet = checkConditionsMet(conditions, hass, context);
           onUpdate(conditionsMet);
         }
         scheduleUpdate();
@@ -87,3 +94,17 @@ export function setupTimeListeners(
     scheduleUpdate();
   });
 }
+
+/**
+ * Sets up all condition listeners (media query, time) for conditional visibility.
+ */
+export function setupConditionListeners(
+  conditions: Condition[],
+  hass: HomeAssistant,
+  addListener: (unsub: () => void) => void,
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
+): void {
+  setupMediaQueryListeners(conditions, hass, addListener, onUpdate, getContext);
+  setupTimeListeners(conditions, hass, addListener, onUpdate, getContext);
+}

src/common/config/can_show_page.ts

@@ -14,7 +14,7 @@ export const isLoadedIntegration = (
 ) =>
   !page.component ||
   ensureArray(page.component).some((integration) =>
-    isComponentLoaded(hass, integration)
+    isComponentLoaded(hass.config, integration)
   );
 
 export const isNotLoadedIntegration = (
@@ -23,7 +23,7 @@ export const isNotLoadedIntegration = (
 ) =>
   !page.not_component ||
   !ensureArray(page.not_component).some((integration) =>
-    isComponentLoaded(hass, integration)
+    isComponentLoaded(hass.config, integration)
   );
 
 export const isCore = (page: PageNavigation) => page.core;

src/common/config/is_component_loaded.ts

@@ -2,6 +2,6 @@ import type { HomeAssistant } from "../../types";
 
 /** Return if a component is loaded. */
 export const isComponentLoaded = (
-  hass: HomeAssistant,
+  hassConfig: HomeAssistant["config"],
   component: string
-): boolean => hass && hass.config.components.includes(component);
+): boolean => hassConfig && hassConfig.components.includes(component);

src/common/datetime/calc_date_range.ts

@@ -1,17 +1,17 @@
 import {
   addDays,
-  subHours,
   endOfDay,
   endOfMonth,
+  endOfQuarter,
   endOfWeek,
   endOfYear,
   startOfDay,
   startOfMonth,
+  startOfQuarter,
   startOfWeek,
   startOfYear,
-  startOfQuarter,
-  endOfQuarter,
   subDays,
+  subHours,
   subMonths,
 } from "date-fns";
 import type { HomeAssistant } from "../../types";
@@ -33,88 +33,89 @@ export type DateRange =
   | "now-24h";
 
 export const calcDateRange = (
-  hass: HomeAssistant,
+  locale: HomeAssistant["locale"],
+  hassConfig: HomeAssistant["config"],
   range: DateRange
 ): [Date, Date] => {
   const today = new Date();
-  const weekStartsOn = firstWeekdayIndex(hass.locale);
+  const weekStartsOn = firstWeekdayIndex(locale);
   switch (range) {
     case "today":
       return [
-        calcDate(today, startOfDay, hass.locale, hass.config, {
+        calcDate(today, startOfDay, locale, hassConfig, {
           weekStartsOn,
         }),
-        calcDate(today, endOfDay, hass.locale, hass.config, {
+        calcDate(today, endOfDay, locale, hassConfig, {
           weekStartsOn,
         }),
       ];
     case "yesterday":
       return [
-        calcDate(addDays(today, -1), startOfDay, hass.locale, hass.config, {
+        calcDate(addDays(today, -1), startOfDay, locale, hassConfig, {
           weekStartsOn,
         }),
-        calcDate(addDays(today, -1), endOfDay, hass.locale, hass.config, {
+        calcDate(addDays(today, -1), endOfDay, locale, hassConfig, {
           weekStartsOn,
         }),
       ];
     case "this_week":
       return [
-        calcDate(today, startOfWeek, hass.locale, hass.config, {
+        calcDate(today, startOfWeek, locale, hassConfig, {
           weekStartsOn,
         }),
-        calcDate(today, endOfWeek, hass.locale, hass.config, {
+        calcDate(today, endOfWeek, locale, hassConfig, {
           weekStartsOn,
         }),
       ];
     case "this_month":
       return [
-        calcDate(today, startOfMonth, hass.locale, hass.config),
-        calcDate(today, endOfMonth, hass.locale, hass.config),
+        calcDate(today, startOfMonth, locale, hassConfig),
+        calcDate(today, endOfMonth, locale, hassConfig),
       ];
     case "this_quarter":
       return [
-        calcDate(today, startOfQuarter, hass.locale, hass.config),
-        calcDate(today, endOfQuarter, hass.locale, hass.config),
+        calcDate(today, startOfQuarter, locale, hassConfig),
+        calcDate(today, endOfQuarter, locale, hassConfig),
       ];
     case "this_year":
       return [
-        calcDate(today, startOfYear, hass.locale, hass.config),
-        calcDate(today, endOfYear, hass.locale, hass.config),
+        calcDate(today, startOfYear, locale, hassConfig),
+        calcDate(today, endOfYear, locale, hassConfig),
       ];
     case "now-7d":
       return [
-        calcDate(today, subDays, hass.locale, hass.config, 7),
-        calcDate(today, subDays, hass.locale, hass.config, 0),
+        calcDate(today, subDays, locale, hassConfig, 7),
+        calcDate(today, subDays, locale, hassConfig, 0),
       ];
     case "now-30d":
       return [
-        calcDate(today, subDays, hass.locale, hass.config, 30),
-        calcDate(today, subDays, hass.locale, hass.config, 0),
+        calcDate(today, subDays, locale, hassConfig, 30),
+        calcDate(today, subDays, locale, hassConfig, 0),
       ];
     case "now-12m":
       return [
         calcDate(
           today,
           (date) => subMonths(startOfMonth(date), 11),
-          hass.locale,
-          hass.config
+          locale,
+          hassConfig
         ),
-        calcDate(today, endOfMonth, hass.locale, hass.config),
+        calcDate(today, endOfMonth, locale, hassConfig),
       ];
     case "now-1h":
       return [
-        calcDate(today, subHours, hass.locale, hass.config, 1),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 1),
+        calcDate(today, subHours, locale, hassConfig, 0),
       ];
     case "now-12h":
       return [
-        calcDate(today, subHours, hass.locale, hass.config, 12),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 12),
+        calcDate(today, subHours, locale, hassConfig, 0),
       ];
     case "now-24h":
       return [
-        calcDate(today, subHours, hass.locale, hass.config, 24),
-        calcDate(today, subHours, hass.locale, hass.config, 0),
+        calcDate(today, subHours, locale, hassConfig, 24),
+        calcDate(today, subHours, locale, hassConfig, 0),
       ];
   }
   return [today, today];

src/common/datetime/format_date.ts

@@ -261,3 +261,36 @@ const formatDateWeekdayShortDateMem = memoizeOne(
       timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
     })
 );
+
+/**
+ * Format a date as YYYY-MM-DD. Uses "en-CA" because it's the only
+ * Intl locale that natively outputs ISO 8601 date format.
+ * Locale/config are only used to resolve the time zone.
+ */
+export const formatISODateOnly = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const timeZone = resolveTimeZone(locale.time_zone, config.time_zone);
+  const formatter = new Intl.DateTimeFormat("en-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  });
+  return formatter.format(dateObj);
+};
+
+// 2026-08-10/2026-08-15
+export const formatCallyDateRange = (
+  start: Date,
+  end: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const startDate = formatISODateOnly(start, locale, config);
+  const endDate = formatISODateOnly(end, locale, config);
+
+  return `${startDate}/${endDate}`;
+};

src/common/entity/compute_device_name.ts

@@ -14,24 +14,25 @@ export const computeDeviceName = (
 
 export const computeDeviceNameDisplay = (
   device: DeviceRegistryEntry,
-  hass: HomeAssistant,
+  localize: HomeAssistant["localize"],
+  hassStates: HomeAssistant["states"],
   entities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) =>
   computeDeviceName(device) ||
-  (entities && fallbackDeviceName(hass, entities)) ||
-  hass.localize("ui.panel.config.devices.unnamed_device", {
-    type: hass.localize(
+  (entities && fallbackDeviceName(hassStates, entities)) ||
+  localize("ui.panel.config.devices.unnamed_device", {
+    type: localize(
       `ui.panel.config.devices.type.${device.entry_type || "device"}`
     ),
   });
 
 export const fallbackDeviceName = (
-  hass: HomeAssistant,
+  hassStates: HomeAssistant["states"],
   entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) => {
   for (const entity of entities || []) {
     const entityId = typeof entity === "string" ? entity : entity.entity_id;
-    const stateObj = hass.states[entityId];
+    const stateObj = hassStates[entityId];
     if (stateObj) {
       return computeStateName(stateObj);
     }

src/common/entity/compute_entity_name_display.ts

@@ -5,6 +5,7 @@ import { computeAreaName } from "./compute_area_name";
 import { computeDeviceName } from "./compute_device_name";
 import { computeEntityName, entityUseDeviceName } from "./compute_entity_name";
 import { computeFloorName } from "./compute_floor_name";
+import { computeStateName } from "./compute_state_name";
 import { getEntityContext } from "./context/get_entity_context";
 
 const DEFAULT_SEPARATOR = " ";
@@ -29,14 +30,23 @@ export interface EntityNameOptions {
 
 export const computeEntityNameDisplay = (
   stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[] | undefined,
+  name: string | EntityNameItem | EntityNameItem[] | undefined,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],
   floors: HomeAssistant["floors"],
   options?: EntityNameOptions
 ) => {
-  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
+  if (typeof name === "string") {
+    return name;
+  }
+
+  // If no name config is provided, fall back to the friendly name
+  if (!name) {
+    return computeStateName(stateObj);
+  }
+
+  let items = ensureArray(name);
 
   const separator = options?.separator ?? DEFAULT_SEPARATOR;
 

src/common/entity/compute_state_display.ts

@@ -142,6 +142,8 @@ const computeStateToPartsFromEntityAttributes = (
           group: "value",
           decimal: "value",
           fraction: "value",
+          minusSign: "value",
+          plusSign: "value",
           literal: "literal",
           currency: "unit",
         };
@@ -152,7 +154,7 @@ const computeStateToPartsFromEntityAttributes = (
           const type = TYPE_MAP[part.type];
           if (!type) continue;
           const last = valueParts[valueParts.length - 1];
-          // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
+          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
           if (type === "value" && last?.type === "value") {
             last.value += part.value;
           } else {
@@ -253,6 +255,7 @@ const computeStateToPartsFromEntityAttributes = (
       "conversation",
       "event",
       "image",
+      "infrared",
       "input_button",
       "notify",
       "scene",

src/common/entity/context/get_device_context.ts

@@ -1,26 +1,11 @@
 import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
-import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
 
-interface DeviceContext {
-  device: DeviceRegistryEntry;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getDeviceContext = (
+export const getDeviceArea = (
   device: DeviceRegistryEntry,
-  hass: HomeAssistant
-): DeviceContext => {
+  areas: HomeAssistant["areas"]
+): AreaRegistryEntry | undefined => {
   const areaId = device.area_id;
-  const area = areaId ? hass.areas[areaId] : undefined;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : undefined;
-
-  return {
-    device: device,
-    area: area || null,
-    floor: floor || null,
-  };
+  return areaId ? areas[areaId] : undefined;
 };

src/common/entity/delete_entity.ts

@@ -27,7 +27,7 @@ export const isDeletableEntity = (
   const entityRegEntry = entityRegistry.find((e) => e.entity_id === entity_id);
   if (isHelperDomain(domain)) {
     return !!(
-      isComponentLoaded(hass, domain) &&
+      isComponentLoaded(hass.config, domain) &&
       entityRegEntry &&
       fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)
     );
@@ -56,7 +56,7 @@ export const deleteEntity = (
   const domain = computeDomain(entity_id);
   const entityRegEntry = entityRegistry.find((e) => e.entity_id === entity_id);
   if (isHelperDomain(domain)) {
-    if (isComponentLoaded(hass, domain)) {
+    if (isComponentLoaded(hass.config, domain)) {
       if (
         entityRegEntry &&
         fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)

src/common/entity/get_states.ts

@@ -29,6 +29,7 @@ export const FIXED_DOMAIN_STATES = {
   device_tracker: ["home", "not_home"],
   fan: ["on", "off"],
   humidifier: ["on", "off"],
+  infrared: [],
   input_boolean: ["on", "off"],
   input_button: [],
   lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
@@ -270,6 +271,8 @@ export const getStates = (
         result.push(...state.attributes.preset_modes);
       } else if (attribute === "swing_mode") {
         result.push(...state.attributes.swing_modes);
+      } else if (attribute === "swing_horizontal_mode") {
+        result.push(...state.attributes.swing_horizontal_modes);
       }
       break;
     case "device_tracker":

src/common/entity/state_active.ts

@@ -6,7 +6,9 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
 
-  if (["button", "event", "input_button", "scene"].includes(domain)) {
+  if (
+    ["button", "event", "infrared", "input_button", "scene"].includes(domain)
+  ) {
     return compareState !== UNAVAILABLE;
   }
 

src/common/feature-detect/support-native-element-internals.ts

@@ -0,0 +1,8 @@
+/**
+ * Indicates whether the current browser has native ElementInternals support.
+ */
+export const nativeElementInternalsSupported =
+  Boolean(globalThis.ElementInternals) &&
+  globalThis.HTMLElement?.prototype.attachInternals
+    ?.toString()
+    .includes("[native code]");

src/common/feature-detect/support-popover.ts

@@ -0,0 +1,11 @@
+/**
+ * Indicates whether the current browser supports the Popover API.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+ */
+export const popoverSupported = globalThis?.HTMLElement?.prototype
+  ? Object.prototype.hasOwnProperty.call(
+      globalThis.HTMLElement.prototype,
+      "popover"
+    )
+  : false;

src/common/integrations/protocolIntegrationPicked.ts

@@ -41,7 +41,7 @@ export const protocolIntegrationPicked = async (
         ).filter((e) => !e.disabled_by);
 
     if (
-      !isComponentLoaded(hass, "zwave_js") ||
+      !isComponentLoaded(hass.config, "zwave_js") ||
       (!options?.config_entry && !entries?.length)
     ) {
       // If the component isn't loaded, ask them to load the integration first
@@ -90,7 +90,7 @@ export const protocolIntegrationPicked = async (
         ).filter((e) => !e.disabled_by);
 
     if (
-      !isComponentLoaded(hass, "zha") ||
+      !isComponentLoaded(hass.config, "zha") ||
       (!options?.config_entry && !entries?.length)
     ) {
       // If the component isn't loaded, ask them to load the integration first
@@ -139,7 +139,7 @@ export const protocolIntegrationPicked = async (
           })
         ).filter((e) => !e.disabled_by);
     if (
-      !isComponentLoaded(hass, domain) ||
+      !isComponentLoaded(hass.config, domain) ||
       (!options?.config_entry && !entries?.length)
     ) {
       // If the component isn't loaded, ask them to load the integration first

src/common/number/format_number.ts

@@ -71,13 +71,6 @@ export const formatNumberToParts = (
     ? numberFormatToLocale(localeOptions)
     : undefined;
 
-  // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
-  Number.isNaN =
-    Number.isNaN ||
-    function isNaN(input) {
-      return typeof input === "number" && isNaN(input);
-    };
-
   if (
     localeOptions?.number_format !== NumberFormat.none &&
     !Number.isNaN(Number(num))

src/common/util/copy-clipboard.ts

@@ -1,24 +1,5 @@
 import { deepActiveElement } from "../dom/deep-active-element";
 
-const getClipboardFallbackRoot = (): HTMLElement => {
-  const activeElement = deepActiveElement();
-  if (activeElement instanceof HTMLElement) {
-    let root: Node = activeElement.getRootNode();
-    let host: HTMLElement | null = null;
-
-    while (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
-      host = root.host;
-      root = root.host.getRootNode();
-    }
-
-    if (host) {
-      return host;
-    }
-  }
-
-  return document.body;
-};
-
 export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
   if (navigator.clipboard) {
     try {
@@ -29,7 +10,7 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
     }
   }
 
-  const root = rootEl || getClipboardFallbackRoot();
+  const root = rootEl || deepActiveElement()?.getRootNode() || document.body;
 
   const el = document.createElement("textarea");
   el.value = str;

src/components/chart/axis-label.ts

@@ -5,12 +5,41 @@ import {
   formatDateMonthYear,
   formatDateVeryShort,
   formatDateWeekdayShort,
+  formatDateYear,
 } from "../../common/datetime/format_date";
 import {
   formatTime,
   formatTimeWithSeconds,
 } from "../../common/datetime/format_time";
 
+export function getPeriodicAxisLabelConfig(
+  period: string,
+  locale: FrontendLocaleData,
+  config: HassConfig
+):
+  | {
+      formatter: (value: number) => string;
+    }
+  | undefined {
+  if (period === "month") {
+    return {
+      formatter: (value: number) => {
+        const date = new Date(value);
+        return date.getMonth() === 0
+          ? `{bold|${formatDateMonthYear(date, locale, config)}}`
+          : formatDateMonth(date, locale, config);
+      },
+    };
+  }
+  if (period === "year") {
+    return {
+      formatter: (value: number) =>
+        formatDateYear(new Date(value), locale, config),
+    };
+  }
+  return undefined;
+}
+
 export function formatTimeLabel(
   value: number | Date,
   locale: FrontendLocaleData,

src/components/chart/ha-chart-base.ts

@@ -44,6 +44,7 @@ export type CustomLegendOption = ECOption["legend"] & {
     id?: string;
     secondaryIds?: string[]; // Other dataset IDs that should be controlled by this legend item.
     name: string;
+    value?: string; // Current value to display next to the name in the legend.
     itemStyle?: Record<string, any>;
   }[];
 };
@@ -90,6 +91,10 @@ export class HaChartBase extends LitElement {
 
   private _lastTapTime?: number;
 
+  private _longPressTimer?: ReturnType<typeof setTimeout>;
+
+  private _longPressTriggered = false;
+
   private _shouldResizeChart = false;
 
   private _resizeAnimationDuration?: number;
@@ -127,6 +132,7 @@ export class HaChartBase extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._legendPointerCancel();
     this._pendingSetup = false;
     while (this._listeners.length) {
       this._listeners.pop()!();
@@ -279,39 +285,53 @@ export class HaChartBase extends LitElement {
           <div class="chart"></div>
         </div>
         ${this._renderLegend()}
-        <div class="chart-controls ${classMap({ small: this.smallControls })}">
-          ${this._isZoomed && !this.hideResetButton
-            ? html`<ha-icon-button
-                class="zoom-reset"
-                .path=${mdiRestart}
-                @click=${this._handleZoomReset}
-                title=${this.hass.localize(
-                  "ui.components.history_charts.zoom_reset"
-                )}
-              ></ha-icon-button>`
-            : nothing}
-          <slot name="button"></slot>
+        <div class="top-controls ${classMap({ small: this.smallControls })}">
+          <slot name="search"></slot>
+          <div
+            class="chart-controls ${classMap({ small: this.smallControls })}"
+          >
+            ${this._isZoomed && !this.hideResetButton
+              ? html`<ha-icon-button
+                  class="zoom-reset"
+                  .path=${mdiRestart}
+                  @click=${this._handleZoomReset}
+                  title=${this.hass.localize(
+                    "ui.components.history_charts.zoom_reset"
+                  )}
+                ></ha-icon-button>`
+              : nothing}
+            <slot name="button"></slot>
+          </div>
         </div>
       </div>
     `;
   }
 
-  private _renderLegend() {
+  private _getLegendItems() {
     if (!this.options?.legend || !this.data) {
-      return nothing;
+      return undefined;
     }
     const legend = ensureArray(this.options.legend).find(
       (l) => l.show && l.type === "custom"
     ) as CustomLegendOption | undefined;
     if (!legend) {
-      return nothing;
+      return undefined;
     }
     const datasets = ensureArray(this.data);
-    const items =
+    return (
       legend.data ||
       datasets
         .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => ({ id: d.id, name: d.name }));
+        .map((d) => ({ id: d.id, name: d.name }))
+    );
+  }
+
+  private _renderLegend() {
+    const items = this._getLegendItems();
+    if (!items) {
+      return nothing;
+    }
+    const datasets = ensureArray(this.data!);
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -333,12 +353,14 @@ export class HaChartBase extends LitElement {
           let itemStyle: Record<string, any> = {};
           let name = "";
           let id = "";
+          let value = "";
           if (typeof item === "string") {
             name = item;
             id = item;
           } else {
             name = item.name ?? "";
             id = item.id ?? name;
+            value = item.value ?? "";
             itemStyle = item.itemStyle ?? {};
           }
           const dataset =
@@ -354,6 +376,11 @@ export class HaChartBase extends LitElement {
           return html`<li
             .id=${id}
             @click=${this._legendClick}
+            @pointerdown=${this._legendPointerDown}
+            @pointerup=${this._legendPointerCancel}
+            @pointerleave=${this._legendPointerCancel}
+            @pointercancel=${this._legendPointerCancel}
+            @contextmenu=${this._legendContextMenu}
             class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
             .title=${name}
           >
@@ -365,6 +392,7 @@ export class HaChartBase extends LitElement {
               })}
             ></div>
             <div class="label">${name}</div>
+            ${value ? html`<div class="value">${value}</div>` : nothing}
           </li>`;
         })}
         ${items.length > overflowLimit
@@ -578,7 +606,7 @@ export class HaChartBase extends LitElement {
       id: "dataZoom",
       type: "inside",
       orient: "horizontal",
-      filterMode: "none",
+      filterMode: this._getDataZoomFilterMode() as any,
       xAxisIndex: 0,
       moveOnMouseMove: !this._isTouchDevice || this._isZoomed,
       preventDefaultMouseMove: !this._isTouchDevice || this._isZoomed,
@@ -586,6 +614,23 @@ export class HaChartBase extends LitElement {
     };
   }
 
+  // "boundaryFilter" is a custom mode added via axis-proxy-patch.ts.
+  // It rescales the Y-axis to the visible data while keeping one point
+  // just outside each boundary to avoid line gaps at the zoom edges.
+  // Use "filter" for bar charts since boundaryFilter causes rendering issues.
+  // Use "weakFilter" for other types (e.g. custom/timeline) so bars
+  // spanning the visible range boundary are kept.
+  private _getDataZoomFilterMode(): string {
+    const series = ensureArray(this.data);
+    if (series.every((s) => s.type === "line")) {
+      return "boundaryFilter";
+    }
+    if (series.some((s) => s.type === "bar")) {
+      return "filter";
+    }
+    return "weakFilter";
+  }
+
   private _createOptions(): ECOption {
     let xAxis = this.options?.xAxis;
     if (xAxis) {
@@ -620,7 +665,7 @@ export class HaChartBase extends LitElement {
             hideOverlap: true,
             ...axis.axisLabel,
           },
-          minInterval,
+          minInterval: axis.minInterval ?? minInterval,
         } as XAXisOption;
       });
     }
@@ -1010,11 +1055,52 @@ export class HaChartBase extends LitElement {
     fireEvent(this, "chart-zoom", { start, end });
   }
 
-  private _legendClick(ev: any) {
+  // Long-press to solo on touch/pen devices (500ms, consistent with action-handler-directive)
+  private _legendPointerDown(ev: PointerEvent) {
+    // Mouse uses Ctrl/Cmd+click instead
+    if (ev.pointerType === "mouse") {
+      return;
+    }
+    const id = (ev.currentTarget as HTMLElement)?.id;
+    if (!id) {
+      return;
+    }
+    this._longPressTriggered = false;
+    this._longPressTimer = setTimeout(() => {
+      this._longPressTriggered = true;
+      this._longPressTimer = undefined;
+      this._soloLegend(id);
+    }, 500);
+  }
+
+  private _legendPointerCancel() {
+    if (this._longPressTimer) {
+      clearTimeout(this._longPressTimer);
+      this._longPressTimer = undefined;
+    }
+  }
+
+  private _legendContextMenu(ev: Event) {
+    if (this._longPressTimer || this._longPressTriggered) {
+      ev.preventDefault();
+    }
+  }
+
+  private _legendClick(ev: MouseEvent) {
     if (!this.chart) {
       return;
     }
-    const id = ev.currentTarget?.id;
+    if (this._longPressTriggered) {
+      this._longPressTriggered = false;
+      return;
+    }
+    const id = (ev.currentTarget as HTMLElement)?.id;
+    // Cmd+click on Mac (Ctrl+click is right-click there), Ctrl+click elsewhere
+    const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
+    if (soloModifier) {
+      this._soloLegend(id);
+      return;
+    }
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1029,6 +1115,60 @@ export class HaChartBase extends LitElement {
     this.requestUpdate("_hiddenDatasets");
   }
 
+  private _soloLegend(id: string) {
+    const allIds = this._getAllLegendIds();
+    const clickedIds = this._getAllIdsFromLegend(this.options, id);
+    const otherIds = allIds.filter((i) => !clickedIds.includes(i));
+
+    const clickedIsOnlyVisible =
+      clickedIds.every((i) => !this._hiddenDatasets.has(i)) &&
+      otherIds.every((i) => this._hiddenDatasets.has(i));
+
+    if (clickedIsOnlyVisible) {
+      // Already solo'd on this item — restore all series to visible
+      for (const hiddenId of [...this._hiddenDatasets]) {
+        this._hiddenDatasets.delete(hiddenId);
+        fireEvent(this, "dataset-unhidden", { id: hiddenId });
+      }
+    } else {
+      // Solo: hide every other series, unhide clicked if it was hidden
+      for (const otherId of otherIds) {
+        if (!this._hiddenDatasets.has(otherId)) {
+          this._hiddenDatasets.add(otherId);
+          fireEvent(this, "dataset-hidden", { id: otherId });
+        }
+      }
+      for (const clickedId of clickedIds) {
+        if (this._hiddenDatasets.has(clickedId)) {
+          this._hiddenDatasets.delete(clickedId);
+          fireEvent(this, "dataset-unhidden", { id: clickedId });
+        }
+      }
+    }
+    this.requestUpdate("_hiddenDatasets");
+  }
+
+  private _getAllLegendIds(): string[] {
+    const items = this._getLegendItems();
+    if (!items) {
+      return [];
+    }
+    const allIds = new Set<string>();
+    for (const item of items) {
+      const primaryId =
+        typeof item === "string"
+          ? item
+          : ((item.id as string) ?? (item.name as string) ?? "");
+      for (const expandedId of this._getAllIdsFromLegend(
+        this.options,
+        primaryId
+      )) {
+        allIds.add(expandedId);
+      }
+    }
+    return [...allIds];
+  }
+
   private _toggleExpandedLegend() {
     this.expandLegend = !this.expandLegend;
     setTimeout(() => {
@@ -1109,16 +1249,35 @@ export class HaChartBase extends LitElement {
       height: 100%;
       width: 100%;
     }
-    .chart-controls {
+    .top-controls {
       position: absolute;
-      top: 16px;
-      right: 4px;
+      top: var(--ha-space-4);
+      inset-inline-start: var(--ha-space-4);
+      inset-inline-end: var(--ha-space-1);
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ha-space-2);
+      z-index: 1;
+      pointer-events: none;
+    }
+    ::slotted([slot="search"]) {
+      flex: 1 1 250px;
+      min-width: 0;
+      max-width: 250px;
+      pointer-events: auto;
+    }
+    .chart-controls {
       display: flex;
       flex-direction: column;
       gap: var(--ha-space-1);
+      margin-inline-start: auto;
+      flex-shrink: 0;
+      pointer-events: auto;
+    }
+    .top-controls.small {
+      top: 0;
     }
     .chart-controls.small {
-      top: 0;
       flex-direction: row;
     }
     .chart-controls ha-icon-button,
@@ -1166,6 +1325,9 @@ export class HaChartBase extends LitElement {
     .chart-legend.multiple-items li {
       max-width: 220px;
     }
+    .chart-legend.multiple-items li:has(.value) {
+      max-width: 300px;
+    }
     .chart-legend .hidden {
       color: var(--secondary-text-color);
     }
@@ -1174,6 +1336,12 @@ export class HaChartBase extends LitElement {
       white-space: nowrap;
       overflow: hidden;
     }
+    .chart-legend .value {
+      color: var(--secondary-text-color);
+      margin-inline-start: var(--ha-space-1);
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
     .chart-legend .bullet {
       border-width: 1px;
       border-style: solid;

src/components/chart/ha-network-graph.ts

@@ -1,7 +1,9 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
+
 import type {
   CallbackDataParams,
   TopLevelFormatterParams,
@@ -63,6 +65,8 @@ export interface NetworkData {
   categories?: { name: string; symbol: string }[];
 }
 
+const PHYSICS_DISABLE_THRESHOLD = 512;
+
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
 let GraphChart: typeof import("echarts/lib/chart/graph/install");
 
@@ -76,11 +80,23 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     params: TopLevelFormatterParams
   ) => string;
 
+  /**
+   * Optional callback that returns additional searchable strings for a node.
+   * These are matched against the search filter in addition to the node's name and context.
+   */
+  @property({ attribute: false }) public searchableAttributes?: (
+    nodeId: string
+  ) => string[];
+
+  @property({ attribute: false }) public searchFilter = "";
+
   public hass!: HomeAssistant;
 
+  @state() private _highlightedNodes?: Set<string>;
+
   @state() private _reducedMotion = false;
 
-  @state() private _physicsEnabled = true;
+  @state() private _physicsEnabled?: boolean;
 
   @state() private _showLabels = true;
 
@@ -108,6 +124,14 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     ];
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+    if (this._physicsEnabled === undefined && this.data?.nodes?.length > 1) {
+      this._physicsEnabled =
+        this.data.nodes.length <= PHYSICS_DISABLE_THRESHOLD;
+    }
+  }
+
   protected render() {
     if (!GraphChart || !this.data.nodes?.length) {
       return nothing;
@@ -117,19 +141,24 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
 
+    const hasHighlightedNodes =
+      this._highlightedNodes && this._highlightedNodes.size > 0;
+
     return html`<ha-chart-base
       .hass=${this.hass}
       .data=${this._getSeries(
         this.data,
-        this._physicsEnabled,
+        this._physicsEnabled ?? false,
         this._reducedMotion,
         this._showLabels,
-        isMobile
+        isMobile,
+        hasHighlightedNodes
       )}
       .options=${this._createOptions(this.data?.categories)}
       height="100%"
       .extraComponents=${[GraphChart]}
     >
+      <slot name="search" slot="search"></slot>
       <slot name="button" slot="button"></slot>
       <ha-icon-button
         slot="button"
@@ -165,7 +194,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
           ...category,
           icon: category.symbol,
         })),
-        top: 8,
+        bottom: 8,
       },
       dataZoom: {
         type: "inside",
@@ -175,13 +204,56 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     deepEqual
   );
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("searchFilter")) {
+      const filter = this.searchFilter;
+      if (!filter) {
+        this._highlightedNodes = undefined;
+      } else {
+        const lowerFilter = filter.toLowerCase();
+        const matchingIds = new Set<string>();
+        for (const node of this.data.nodes) {
+          if (this._nodeMatchesFilter(node, lowerFilter)) {
+            matchingIds.add(node.id);
+          }
+        }
+        this._highlightedNodes = matchingIds;
+      }
+      this._applyHighlighting();
+      this._updateMouseoverHandler();
+    }
+  }
+
+  private _nodeMatchesFilter(node: NetworkNode, lowerFilter: string): boolean {
+    if (node.name?.toLowerCase().includes(lowerFilter)) {
+      return true;
+    }
+    if (node.context?.toLowerCase().includes(lowerFilter)) {
+      return true;
+    }
+    if (node.id?.toLowerCase().includes(lowerFilter)) {
+      return true;
+    }
+    if (this.searchableAttributes) {
+      const extraValues = this.searchableAttributes(node.id);
+      for (const value of extraValues) {
+        if (value?.toLowerCase().includes(lowerFilter)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   private _getSeries = memoizeOne(
     (
       data: NetworkData,
       physicsEnabled: boolean,
       reducedMotion: boolean,
       showLabels: boolean,
-      isMobile: boolean
+      isMobile: boolean,
+      hasHighlightedNodes?: boolean
     ) => ({
       id: "network",
       type: "graph",
@@ -214,7 +286,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
         },
       },
       emphasis: {
-        focus: isMobile ? "none" : "adjacency",
+        focus: hasHighlightedNodes ? "self" : isMobile ? "none" : "adjacency",
       },
       force: {
         repulsion: [400, 600],
@@ -362,6 +434,68 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _applyHighlighting() {
+    const chart = this._baseChart?.chart;
+    if (!chart) {
+      return;
+    }
+    // Reset all nodes to normal opacity first
+    chart.dispatchAction({ type: "downplay" });
+
+    const highlighted = this._highlightedNodes;
+    if (!highlighted || highlighted.size === 0) {
+      return;
+    }
+    const dataIndices: number[] = [];
+    this.data.nodes.forEach((node, index) => {
+      if (highlighted.has(node.id)) {
+        dataIndices.push(index);
+      }
+    });
+    if (dataIndices.length > 0) {
+      chart.dispatchAction({ type: "highlight", dataIndex: dataIndices });
+    }
+  }
+
+  private _emphasisGuardHandler?: () => void;
+
+  private _updateMouseoverHandler() {
+    const chart = this._baseChart?.chart;
+    if (!chart) {
+      return;
+    }
+
+    // When there are highlighted nodes, re-apply highlighting on hover
+    // and mouseout to prevent hover from overriding the search state
+    if (this._highlightedNodes && this._highlightedNodes.size > 0) {
+      if (this._emphasisGuardHandler) {
+        // Guard already set
+        return;
+      }
+      this._emphasisGuardHandler = () => {
+        this._applyHighlighting();
+      };
+      chart.on("mouseover", this._emphasisGuardHandler);
+      chart.on("mouseout", this._emphasisGuardHandler);
+    } else {
+      if (!this._emphasisGuardHandler) {
+        return;
+      }
+      chart.off("mouseover", this._emphasisGuardHandler);
+      chart.off("mouseout", this._emphasisGuardHandler);
+      this._emphasisGuardHandler = undefined;
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._emphasisGuardHandler) {
+      this._baseChart?.chart?.off("mouseover", this._emphasisGuardHandler);
+      this._baseChart?.chart?.off("mouseout", this._emphasisGuardHandler);
+      this._emphasisGuardHandler = undefined;
+    }
+  }
+
   private _togglePhysics() {
     this._saveNodePositions();
     this._physicsEnabled = !this._physicsEnabled;

src/components/chart/state-history-chart-line.ts

@@ -28,6 +28,13 @@ const safeParseFloat = (value) => {
   return isFinite(parsed) ? parsed : null;
 };
 
+const CLIMATE_MODE_CONFIGS = [
+  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
+  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
+  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
+  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
+] as const;
+
 @customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -239,7 +246,9 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("fitYData") ||
       changedProps.has("paddingYAxis") ||
       changedProps.has("_visualMap") ||
-      changedProps.has("_yWidth")
+      changedProps.has("_yWidth") ||
+      (changedProps.has("hass") &&
+        this._hasEntityStatesChanged(changedProps.get("hass")))
     ) {
       const rtl = computeRTL(this.hass);
       let minYAxis: number | ((values: { min: number }) => number) | undefined =
@@ -296,6 +305,19 @@ export class StateHistoryChartLine extends LitElement {
         legend: {
           type: "custom",
           show: this.showNames,
+          data: this._chartData
+            .map((d, i) => ({ dataset: d, entityId: this._entityIds[i] }))
+            .filter((item) => !(item.dataset as LineSeriesOption).areaStyle)
+            .map((item) => {
+              const stateObj = this.hass.states[item.entityId];
+              return {
+                id: item.dataset.id as string,
+                name: item.dataset.name as string,
+                value: stateObj
+                  ? this.hass.formatEntityState(stateObj)
+                  : undefined,
+              };
+            }),
         },
         grid: {
           top: 15,
@@ -316,6 +338,13 @@ export class StateHistoryChartLine extends LitElement {
     }
   }
 
+  private _hasEntityStatesChanged(oldHass: HomeAssistant): boolean {
+    return this._entityIds.some(
+      (entityId) =>
+        this.hass.states[entityId]?.state !== oldHass.states[entityId]?.state
+    );
+  }
+
   private _generateData() {
     let colorIndex = 0;
     const computedStyles = getComputedStyle(this);
@@ -407,23 +436,18 @@ export class StateHistoryChartLine extends LitElement {
           (entityState) => entityState.attributes?.hvac_action
         );
 
-        const isHeating =
-          domain === "climate" && hasHvacAction
-            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "heat"
-            : (entityState: LineChartState) => entityState.state === "heat";
-        const isCooling =
-          domain === "climate" && hasHvacAction
-            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "cool"
-            : (entityState: LineChartState) => entityState.state === "cool";
-
-        const hasHeat = states.states.some(isHeating);
-        const hasCool = states.states.some(isCooling);
+        const activeModes = CLIMATE_MODE_CONFIGS.map(
+          ({ mode, action, cssVar }) => {
+            const isActive =
+              domain === "climate" && hasHvacAction
+                ? (entityState: LineChartState) =>
+                    CLIMATE_HVAC_ACTION_TO_MODE[
+                      entityState.attributes?.hvac_action
+                    ] === mode
+                : (entityState: LineChartState) => entityState.state === mode;
+            return { action, cssVar, isActive };
+          }
+        ).filter(({ isActive }) => states.states.some(isActive));
         // We differentiate between thermostats that have a target temperature
         // range versus ones that have just a target temperature
 
@@ -444,33 +468,19 @@ export class StateHistoryChartLine extends LitElement {
                 "component.climate.entity_component._.state_attributes.current_temperature.name"
               )
         );
-        if (hasHeat) {
+        for (const { action, cssVar } of activeModes) {
           addDataSet(
-            states.entity_id + "-heating",
+            `${states.entity_id}-${action}`,
             this.showNames
-              ? this.hass.localize("ui.card.climate.heating", { name: name })
+              ? this.hass.localize(`ui.card.climate.${action}`, {
+                  name: name,
+                })
               : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
+                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
                 ),
-            computedStyles.getPropertyValue("--state-climate-heat-color"),
+            computedStyles.getPropertyValue(cssVar),
             true
           );
-          // The "heating" series uses steppedArea to shade the area below the current
-          // temperature when the thermostat is calling for heat.
-        }
-        if (hasCool) {
-          addDataSet(
-            states.entity_id + "-cooling",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.cooling", { name: name })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.cooling"
-                ),
-            computedStyles.getPropertyValue("--state-climate-cool-color"),
-            true
-          );
-          // The "cooling" series uses steppedArea to shade the area below the current
-          // temperature when the thermostat is calling for heat.
         }
 
         if (hasTargetRange) {
@@ -518,11 +528,8 @@ export class StateHistoryChartLine extends LitElement {
             entityState.attributes.current_temperature
           );
           const series = [curTemp];
-          if (hasHeat) {
-            series.push(isHeating(entityState) ? curTemp : null);
-          }
-          if (hasCool) {
-            series.push(isCooling(entityState) ? curTemp : null);
+          for (const { isActive } of activeModes) {
+            series.push(isActive(entityState) ? curTemp : null);
           }
           if (hasTargetRange) {
             const targetHigh = safeParseFloat(

src/components/chart/state-history-charts.ts

@@ -105,7 +105,7 @@ export class StateHistoryCharts extends LitElement {
   @restoreScroll(".container") private _savedScrollPos?: number;
 
   protected render() {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;

src/components/chart/statistics-chart.ts

@@ -27,10 +27,12 @@ import {
   getDisplayUnit,
   getStatisticLabel,
   getStatisticMetadata,
+  isExternalStatistic,
   statisticsHaveType,
 } from "../../data/recorder";
 import type { ECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
+import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 
@@ -147,7 +149,7 @@ export class StatisticsChart extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -292,6 +294,22 @@ export class StatisticsChart extends LitElement {
           type: "time",
           min: startTime,
           max: this.endTime,
+          ...(this.period === "month" && {
+            minInterval: 28 * 24 * 3600 * 1000,
+            axisLabel: getPeriodicAxisLabelConfig(
+              "month",
+              this.hass.locale,
+              this.hass.config
+            ),
+          }),
+          ...(this.period === "year" && {
+            minInterval: 365 * 24 * 3600 * 1000,
+            axisLabel: getPeriodicAxisLabelConfig(
+              "year",
+              this.hass.locale,
+              this.hass.config
+            ),
+          }),
         },
         {
           id: "hiddenAxis",
@@ -398,7 +416,31 @@ export class StatisticsChart extends LitElement {
       endTime = new Date();
     }
 
-    let unit: string | undefined | null;
+    // Check if we need to display most recent data. Allow 10m of leeway for "now",
+    // because stats are 5 minute aggregated.
+    // Use same now point for all statistics even if processing time means the
+    // state value is actually from a slightly later time. Otherwise the points
+    // end up separated slightly and disappear from the tooltips.
+    const now = new Date();
+    const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
+
+    // Try to determine chart unit if it has not already been set explicitly
+    if (!this.unit) {
+      let unit: string | undefined | null;
+      statisticsData.forEach(([statistic_id, _stats]) => {
+        const meta = statisticsMetaData?.[statistic_id];
+        const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+        if (unit === undefined) {
+          unit = statisticUnit;
+        } else if (unit !== null && unit !== statisticUnit) {
+          // Clear unit if not all statistics have same unit
+          unit = null;
+        }
+      });
+      if (unit) {
+        this.unit = unit;
+      }
+    }
 
     const names = this.names || {};
     statisticsData.forEach(([statistic_id, stats]) => {
@@ -408,18 +450,6 @@ export class StatisticsChart extends LitElement {
         name = getStatisticLabel(this.hass, statistic_id, meta);
       }
 
-      if (!this.unit) {
-        if (unit === undefined) {
-          unit = getDisplayUnit(this.hass, statistic_id, meta);
-        } else if (
-          unit !== null &&
-          unit !== getDisplayUnit(this.hass, statistic_id, meta)
-        ) {
-          // Clear unit if not all statistics have same unit
-          unit = null;
-        }
-      }
-
       // array containing [value1, value2, etc]
       let prevValues: (number | null)[][] | null = null;
       let prevEndTime: Date | undefined;
@@ -543,7 +573,7 @@ export class StatisticsChart extends LitElement {
               (series as LineSeriesOption).areaStyle = undefined;
             } else {
               series.stackOrder = "seriesAsc";
-              if (drawBands && type === bandTop) {
+              if (type === bandTop) {
                 (series as LineSeriesOption).areaStyle = {
                   color: color + "3F",
                 };
@@ -612,10 +642,10 @@ export class StatisticsChart extends LitElement {
         }
       });
 
-      // Close out the last stat segment at prevEndTime
+      // For line charts, close out the last stat segment at prevEndTime
       const lastEndTime = prevEndTime;
       const lastValues = prevValues;
-      if (lastEndTime && lastValues) {
+      if (this.chartType === "line" && lastEndTime && lastValues) {
         statDataSets.forEach((d, i) => {
           d.data!.push(
             this._transformDataValue([lastEndTime, ...lastValues[i]!])
@@ -623,13 +653,14 @@ export class StatisticsChart extends LitElement {
         });
       }
 
-      // Append current state if viewing recent data
-      const now = new Date();
-      // allow 10m of leeway for "now", because stats are 5 minute aggregated
-      const isUpToNow = now.getTime() - endTime.getTime() <= 600000;
-      if (isUpToNow) {
-        // Skip external statistics (they have ":" in the ID)
-        if (!statistic_id.includes(":")) {
+      // Show current state if required, and units match (or are unknown)
+      const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+      if (
+        displayCurrentState &&
+        (!this.unit || !statisticUnit || this.unit === statisticUnit)
+      ) {
+        // Skip external statistics
+        if (!isExternalStatistic(statistic_id)) {
           const stateObj = this.hass.states[statistic_id];
           if (stateObj) {
             const currentValue = parseFloat(stateObj.state);
@@ -670,10 +701,6 @@ export class StatisticsChart extends LitElement {
       Array.prototype.push.apply(legendData, statLegendData);
     });
 
-    if (unit) {
-      this.unit = unit;
-    }
-
     legendData.forEach(({ id, name, color, borderColor }) => {
       // Add an empty series for the legend
       totalDataSets.push({

src/components/data-table/ha-data-table-labels.ts

@@ -2,7 +2,6 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { stringCompare } from "../../common/string/compare";
@@ -53,16 +52,15 @@ class HaDataTableLabels extends LitElement {
   }
 
   private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
-    const color = label?.color ? computeCssColor(label.color) : undefined;
     return html`
       <ha-label
         dense
         role="button"
         tabindex="0"
+        .color=${label.color}
         .item=${label}
         @click=${clickAction ? this._labelClicked : undefined}
         @keydown=${clickAction ? this._labelClicked : undefined}
-        style=${color ? `--color: ${color}` : ""}
         .description=${label.description}
       >
         ${label?.icon
@@ -102,10 +100,6 @@ class HaDataTableLabels extends LitElement {
       position: fixed;
       flex-wrap: nowrap;
     }
-    ha-label {
-      --ha-label-background-color: var(--color, var(--grey-color));
-      --ha-label-background-opacity: 0.5;
-    }
     .plus {
       --ha-label-background-color: transparent;
       border: 1px solid var(--divider-color);

src/components/data-table/ha-data-table.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -21,13 +22,14 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
+import { localeContext, localizeContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
-import type { HomeAssistant } from "../../types";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
-import "../search-input";
+import "../input/ha-input-search";
 import { filterData, sortData } from "./sort-filter";
 
 export interface RowClickedEvent {
@@ -104,9 +106,13 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private _localize?: ContextType<typeof localizeContext>;
 
-  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private _locale?: ContextType<typeof localeContext>;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -378,8 +384,6 @@ export class HaDataTable extends LitElement {
   );
 
   protected render() {
-    const localize = this.localizeFunc || this.hass.localize;
-
     const columns = this._sortedColumns(this.columns, this.columnOrder);
 
     const renderRow = (row: DataTableRowData, index: number) =>
@@ -391,11 +395,11 @@ export class HaDataTable extends LitElement {
           ${this._filterable
             ? html`
                 <div class="table-header">
-                  <search-input
-                    .hass=${this.hass}
-                    @value-changed=${this._handleSearchChange}
-                    .label=${this.searchLabel}
-                  ></search-input>
+                  <ha-input-search
+                    appearance="outlined"
+                    @input=${this._handleSearchChange}
+                    .placeholder=${this.searchLabel}
+                  ></ha-input-search>
                 </div>
               `
             : ""}
@@ -503,7 +507,8 @@ export class HaDataTable extends LitElement {
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText ||
-                      localize("ui.components.data-table.no-data")}
+                      this._localize?.("ui.components.data-table.no-data") ||
+                      "No data"}
                     </div>
                   </div>
                 </div>
@@ -515,7 +520,8 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                   .items=${this._groupData(
                     this._filteredData,
-                    localize,
+                    this._localize,
+                    this._locale,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -685,7 +691,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this.hass.locale.language
+            this._locale?.language
           )
         : filteredData;
 
@@ -711,7 +717,8 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc,
+      localize: LocalizeFunc | undefined,
+      locale: FrontendLocaleData | undefined,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -735,11 +742,7 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(
-                  a,
-                  b,
-                  this.hass.locale.language
-                );
+                const comparison = stringCompare(a, b, locale?.language);
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -760,7 +763,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                this.hass.locale.language
+                locale?.language
               );
             })
             .reduce(
@@ -787,14 +790,15 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${this.hass.localize(
+                  .label=${localize?.(
                     `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  )}
+                  ) || (collapsed ? "Expand" : "Collapse")}
                   class=${collapsed ? "collapsed" : ""}
                 >
                 </ha-icon-button>
                 ${groupName === UNDEFINED_GROUP_KEY
-                  ? localize("ui.components.data-table.ungrouped")
+                  ? localize?.("ui.components.data-table.ungrouped") ||
+                    "Ungrouped"
                   : groupName || ""}
               </div>`,
             });
@@ -863,7 +867,8 @@ export class HaDataTable extends LitElement {
 
     const groupedData = this._groupData(
       this._filteredData,
-      this.localizeFunc || this.hass.localize,
+      this._localize,
+      this._locale,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,
@@ -970,12 +975,12 @@ export class HaDataTable extends LitElement {
     });
   }
 
-  private _handleSearchChange(ev: CustomEvent): void {
+  private _handleSearchChange(ev: InputEvent): void {
     if (this.filter) {
       return;
     }
     this._lastSelectedRowId = null;
-    this._debounceSearch(ev.detail.value);
+    this._debounceSearch((ev.target as HTMLInputElement).value);
   }
 
   private async _calcTableHeight() {
@@ -1388,11 +1393,9 @@ export class HaDataTable extends LitElement {
         .table-header {
           border-bottom: 1px solid var(--divider-color);
         }
-        search-input {
-          display: block;
+        ha-input-search {
           flex: 1;
-          --mdc-text-field-fill-color: var(--sidebar-background-color);
-          --mdc-text-field-idle-line-color: transparent;
+          padding: var(--ha-space-3);
         }
         slot[name="header"] {
           display: block;

src/components/date-picker/date-range-picker.ts

@@ -0,0 +1,417 @@
+import { TZDate } from "@date-fns/tz";
+import { consume, type ContextType } from "@lit/context";
+import type { ActionDetail } from "@material/mwc-list";
+import { mdiCalendarToday } from "@mdi/js";
+import "cally";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, queryAll, state } from "lit/decorators";
+import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
+import {
+  formatCallyDateRange,
+  formatDateMonth,
+  formatDateYear,
+  formatISODateOnly,
+} from "../../common/datetime/format_date";
+import { fireEvent } from "../../common/dom/fire_event";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import { TimeZone } from "../../data/translation";
+import { MobileAwareMixin } from "../../mixins/mobile-aware-mixin";
+import { haStyleScrollbar } from "../../resources/styles";
+import type { ValueChangedEvent } from "../../types";
+import "../chips/ha-chip-set";
+import "../chips/ha-filter-chip";
+import type { HaFilterChip } from "../chips/ha-filter-chip";
+import type { HaBaseTimeInput } from "../ha-base-time-input";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import "../ha-list";
+import "../ha-list-item";
+import "../ha-time-input";
+import type { HaTimeInput } from "../ha-time-input";
+import type { DateRangePickerRanges } from "./ha-date-range-picker";
+import { datePickerStyles, dateRangePickerStyles } from "./styles";
+
+@customElement("date-range-picker")
+export class DateRangePicker extends MobileAwareMixin(LitElement) {
+  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
+
+  @property({ attribute: false }) public startDate?: Date;
+
+  @property({ attribute: false }) public endDate?: Date;
+
+  @property({ attribute: "time-picker", type: Boolean })
+  public timePicker = false;
+
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private locale!: ContextType<typeof localeContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private hassConfig!: ContextType<typeof configContext>;
+
+  /** used to show month in calendar-range header */
+  @state() private _pickerMonth?: string;
+
+  /** used to show year in calendar-date header */
+  @state() private _pickerYear?: string;
+
+  /** used for today to navigate focus in calendar-range  */
+  @state() private _focusDate?: string;
+
+  @state() private _dateValue?: string;
+
+  @state() private _timeValue = {
+    from: { hours: 0, minutes: 0 },
+    to: { hours: 23, minutes: 59 },
+  };
+
+  @queryAll("ha-time-input") private _timeInputs?: NodeListOf<HaTimeInput>;
+
+  public connectedCallback() {
+    super.connectedCallback();
+
+    const date = this.startDate || new Date();
+
+    this._dateValue =
+      this.startDate && this.endDate
+        ? formatCallyDateRange(
+            this.startDate,
+            this.endDate,
+            this.locale,
+            this.hassConfig
+          )
+        : undefined;
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+
+    if (this.timePicker && this.startDate && this.endDate) {
+      this._timeValue = {
+        from: {
+          hours: this.startDate.getHours(),
+          minutes: this.startDate.getMinutes(),
+        },
+        to: {
+          hours: this.endDate.getHours(),
+          minutes: this.endDate.getMinutes(),
+        },
+      };
+    }
+  }
+
+  private _renderRanges() {
+    if (this._isMobileSize) {
+      return html`
+        <ha-chip-set class="ha-scrollbar">
+          ${Object.entries(this.ranges!).map(
+            ([name, range], index) => html`
+              <ha-filter-chip
+                .index=${index}
+                .range=${range}
+                @click=${this._clickDateRangeChip}
+              >
+                ${name}
+              </ha-filter-chip>
+            `
+          )}
+        </ha-chip-set>
+      `;
+    }
+
+    return html`
+      <ha-list @action=${this._setDateRange} activatable>
+        ${Object.keys(this.ranges!).map(
+          (name) => html`<ha-list-item>${name}</ha-list-item>`
+        )}
+      </ha-list>
+    `;
+  }
+
+  render() {
+    return html`<div class="picker">
+        ${this.ranges !== false && this.ranges
+          ? html`<div class="date-range-ranges">${this._renderRanges()}</div>`
+          : nothing}
+        <div class="range">
+          <calendar-range
+            .value=${this._dateValue}
+            .locale=${this.locale.language}
+            .focusedDate=${this._focusDate}
+            @focusday=${this._focusChanged}
+            @change=${this._handleChange}
+            show-outside-days
+            .firstDayOfWeek=${firstWeekdayIndex(this.locale)}
+          >
+            <ha-icon-button-prev
+              tabindex="-1"
+              slot="previous"
+            ></ha-icon-button-prev>
+            <div class="heading" slot="heading">
+              <span class="month-year"
+                >${this._pickerMonth} ${this._pickerYear}</span
+              >
+              <ha-icon-button
+                @click=${this._focusToday}
+                .path=${mdiCalendarToday}
+                .label=${this.localize("ui.dialogs.date-picker.today")}
+              ></ha-icon-button>
+            </div>
+            <ha-icon-button-next
+              tabindex="-1"
+              slot="next"
+            ></ha-icon-button-next>
+            <calendar-month></calendar-month>
+          </calendar-range>
+          ${this.timePicker
+            ? html`
+                <div class="times">
+                  <ha-time-input
+                    .value=${`${this._timeValue.from.hours}:${this._timeValue.from.minutes}`}
+                    .locale=${this.locale}
+                    @value-changed=${this._handleChangeTime}
+                    .label=${this.localize(
+                      "ui.components.date-range-picker.time_from"
+                    )}
+                    id="from"
+                    placeholder-labels
+                    auto-validate
+                  ></ha-time-input>
+                  <ha-time-input
+                    .value=${`${this._timeValue.to.hours}:${this._timeValue.to.minutes}`}
+                    .locale=${this.locale}
+                    @value-changed=${this._handleChangeTime}
+                    .label=${this.localize(
+                      "ui.components.date-range-picker.time_to"
+                    )}
+                    id="to"
+                    placeholder-labels
+                    auto-validate
+                  ></ha-time-input>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+      <div class="footer">
+        <ha-button appearance="plain" @click=${this._cancel}
+          >${this.localize("ui.common.cancel")}</ha-button
+        >
+        <ha-button .disabled=${!this._dateValue} @click=${this._save}
+          >${this.localize("ui.components.date-range-picker.select")}</ha-button
+        >
+      </div>`;
+  }
+
+  private _focusToday() {
+    const date = new Date();
+    this._focusDate = formatISODateOnly(date, this.locale, this.hassConfig);
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+  }
+
+  private _cancel() {
+    fireEvent(this, "cancel-date-picker");
+  }
+
+  private _save() {
+    if (!this._dateValue) {
+      return;
+    }
+
+    const dates = this._dateValue.split("/");
+    let startDate = new Date(`${dates[0]}T00:00:00`);
+    let endDate = new Date(`${dates[1]}T23:59:00`);
+
+    if (this.timePicker) {
+      const timeInputs = this._timeInputs;
+      if (
+        timeInputs &&
+        ![...timeInputs].every((input) => input.reportValidity())
+      ) {
+        // If we have time inputs, and they don't all report valid, don't save
+        return;
+      }
+      startDate.setHours(this._timeValue.from.hours);
+      startDate.setMinutes(this._timeValue.from.minutes);
+      endDate.setHours(this._timeValue.to.hours);
+      endDate.setMinutes(this._timeValue.to.minutes);
+
+      startDate.setSeconds(0);
+      startDate.setMilliseconds(0);
+      endDate.setSeconds(0);
+      endDate.setMilliseconds(0);
+
+      if (endDate <= startDate) {
+        endDate.setDate(startDate.getDate() + 1);
+      }
+    }
+
+    if (this.locale.time_zone === TimeZone.server) {
+      startDate = new Date(
+        new TZDate(startDate, this.hassConfig.time_zone).getTime()
+      );
+      endDate = new Date(
+        new TZDate(endDate, this.hassConfig.time_zone).getTime()
+      );
+    }
+
+    if (
+      startDate.getHours() !== this._timeValue.from.hours ||
+      startDate.getMinutes() !== this._timeValue.from.minutes ||
+      endDate.getHours() !== this._timeValue.to.hours ||
+      endDate.getMinutes() !== this._timeValue.to.minutes
+    ) {
+      this._timeValue.from.hours = startDate.getHours();
+      this._timeValue.from.minutes = startDate.getMinutes();
+      this._timeValue.to.hours = endDate.getHours();
+      this._timeValue.to.minutes = endDate.getMinutes();
+    }
+
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate,
+        endDate,
+      },
+    });
+  }
+
+  private _focusChanged(ev: CustomEvent<Date>) {
+    const date = ev.detail;
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._focusDate = undefined;
+  }
+
+  private _handleChange(ev: CustomEvent) {
+    const dateElement = ev.target as HTMLElementTagNameMap["calendar-range"];
+    this._dateValue = dateElement.value;
+    this._focusDate = undefined;
+  }
+
+  private _clickDateRangeChip(ev: Event) {
+    const chip = ev.target as HaFilterChip & {
+      index: number;
+      range: [Date, Date];
+    };
+    this._saveDateRangePreset(chip.range, chip.index);
+  }
+
+  private _setDateRange(ev: CustomEvent<ActionDetail>) {
+    const dateRange: [Date, Date] = Object.values(this.ranges!)[
+      ev.detail.index
+    ];
+    this._saveDateRangePreset(dateRange, ev.detail.index);
+  }
+
+  private _saveDateRangePreset(range: [Date, Date], index: number) {
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate: range[0],
+        endDate: range[1],
+      },
+    });
+    fireEvent(this, "preset-selected", {
+      index,
+    });
+  }
+
+  private _handleChangeTime(ev: ValueChangedEvent<string>) {
+    ev.stopPropagation();
+    const time = ev.detail.value;
+    const target = ev.target as HaBaseTimeInput;
+    const type = target.id;
+    if (time) {
+      if (!this._timeValue) {
+        this._timeValue = {
+          from: { hours: 0, minutes: 0 },
+          to: { hours: 23, minutes: 59 },
+        };
+      }
+      const [hours, minutes] = time.split(":").map(Number);
+      this._timeValue[type].hours = hours;
+      this._timeValue[type].minutes = minutes;
+    }
+  }
+
+  static styles = [
+    datePickerStyles,
+    dateRangePickerStyles,
+    haStyleScrollbar,
+    css`
+      .picker {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .date-range-ranges {
+        border-right: var(--ha-border-width-sm) solid var(--divider-color);
+        min-width: 140px;
+        flex: 0 1 30%;
+      }
+
+      .range {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        padding: var(--ha-space-3);
+        overflow-x: hidden;
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        .picker {
+          flex-direction: column;
+        }
+
+        .date-range-ranges {
+          border-bottom: 1px solid var(--divider-color);
+          margin-top: var(--ha-space-5);
+          overflow: visible;
+        }
+
+        ha-chip-set {
+          padding: var(--ha-space-3);
+          flex-wrap: nowrap;
+          overflow-x: auto;
+        }
+
+        .range {
+          flex-basis: fit-content;
+        }
+      }
+
+      .times {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ha-space-2);
+      }
+
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: var(--ha-space-2);
+        border-top: 1px solid var(--divider-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "date-range-picker": DateRangePicker;
+  }
+
+  interface HASSDomEvents {
+    "cancel-date-picker": undefined;
+    "preset-selected": { index: number };
+  }
+}

src/components/date-picker/ha-date-range-picker.ts

@@ -0,0 +1,406 @@
+import "@home-assistant/webawesome/dist/components/popover/popover";
+import { consume, type ContextType } from "@lit/context";
+import { mdiCalendar } from "@mdi/js";
+import "cally";
+import { isThisYear } from "date-fns";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { tinykeys } from "tinykeys";
+import { shiftDateRange } from "../../common/datetime/calc_date";
+import type { DateRange } from "../../common/datetime/calc_date_range";
+import { calcDateRange } from "../../common/datetime/calc_date_range";
+import {
+  formatShortDateTime,
+  formatShortDateTimeWithYear,
+} from "../../common/datetime/format_date_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import "../ha-bottom-sheet";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import "../ha-textarea";
+import "./date-range-picker";
+
+export type DateRangePickerRanges = Record<string, [Date, Date]>;
+
+const RANGE_KEYS: DateRange[] = ["today", "yesterday", "this_week"];
+const EXTENDED_RANGE_KEYS: DateRange[] = [
+  "this_month",
+  "this_year",
+  "now-1h",
+  "now-12h",
+  "now-24h",
+  "now-7d",
+  "now-30d",
+];
+
+@customElement("ha-date-range-picker")
+export class HaDateRangePicker extends LitElement {
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private locale!: ContextType<typeof localeContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private hassConfig!: ContextType<typeof configContext>;
+
+  @property({ attribute: false }) public startDate!: Date;
+
+  @property({ attribute: false }) public endDate!: Date;
+
+  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
+
+  @state() private _ranges?: DateRangePickerRanges;
+
+  @property({ attribute: "time-picker", type: Boolean })
+  public timePicker = false;
+
+  @property({ type: Boolean, reflect: true })
+  public backdrop = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public minimal = false;
+
+  @property({ attribute: "extended-presets", type: Boolean })
+  public extendedPresets = false;
+
+  @property({ attribute: "popover-placement" })
+  public popoverPlacement:
+    | "bottom"
+    | "top"
+    | "left"
+    | "right"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end" = "bottom-start";
+
+  @state() private _opened = false;
+
+  @state() private _pickerWrapperOpen = false;
+
+  @state() private _openedNarrow = false;
+
+  @state() private _popoverWidth = 0;
+
+  @query(".container") private _containerElement?: HTMLDivElement;
+
+  private _narrow = false;
+
+  private _unsubscribeTinyKeys?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+
+    this._handleResize();
+    window.addEventListener("resize", this._handleResize);
+
+    const rangeKeys = this.extendedPresets
+      ? [...RANGE_KEYS, ...EXTENDED_RANGE_KEYS]
+      : RANGE_KEYS;
+
+    this._ranges = {};
+    rangeKeys.forEach((key) => {
+      this._ranges![
+        this.localize(`ui.components.date-range-picker.ranges.${key}`)
+      ] = calcDateRange(this.locale, this.hassConfig, key);
+    });
+  }
+
+  public open(): void {
+    this._openPicker();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="container">
+        <div class="date-range-inputs">
+          ${!this.minimal
+            ? html`<ha-textarea
+                  id="field"
+                  mobile-multiline
+                  @click=${this._openPicker}
+                  @keydown=${this._handleKeydown}
+                  .value=${(isThisYear(this.startDate)
+                    ? formatShortDateTime(
+                        this.startDate,
+                        this.locale,
+                        this.hassConfig
+                      )
+                    : formatShortDateTimeWithYear(
+                        this.startDate,
+                        this.locale,
+                        this.hassConfig
+                      )) +
+                  (window.innerWidth >= 459 ? " - " : " - \n") +
+                  (isThisYear(this.endDate)
+                    ? formatShortDateTime(
+                        this.endDate,
+                        this.locale,
+                        this.hassConfig
+                      )
+                    : formatShortDateTimeWithYear(
+                        this.endDate,
+                        this.locale,
+                        this.hassConfig
+                      ))}
+                  .label=${this.localize(
+                    "ui.components.date-range-picker.start_date"
+                  ) +
+                  " - " +
+                  this.localize("ui.components.date-range-picker.end_date")}
+                  .disabled=${this.disabled}
+                  readonly
+                ></ha-textarea>
+                <ha-icon-button-prev
+                  .label=${this.localize("ui.common.previous")}
+                  @click=${this._handlePrev}
+                >
+                </ha-icon-button-prev>
+                <ha-icon-button-next
+                  .label=${this.localize("ui.common.next")}
+                  @click=${this._handleNext}
+                >
+                </ha-icon-button-next>`
+            : html`<ha-icon-button
+                @click=${this._openPicker}
+                .disabled=${this.disabled}
+                id="field"
+                .label=${this.localize(
+                  "ui.components.date-range-picker.select_date_range"
+                )}
+                .path=${mdiCalendar}
+              ></ha-icon-button>`}
+        </div>
+        ${this._pickerWrapperOpen || this._opened
+          ? this._openedNarrow
+            ? html`
+                <ha-bottom-sheet
+                  flexcontent
+                  .open=${this._pickerWrapperOpen}
+                  @wa-after-show=${this._dialogOpened}
+                  @closed=${this._hidePicker}
+                >
+                  ${this._renderPicker()}
+                </ha-bottom-sheet>
+              `
+            : html`
+                <wa-popover
+                  .open=${this._pickerWrapperOpen}
+                  style="--body-width: ${this._popoverWidth}px;"
+                  class=${this._opened ? "open" : ""}
+                  without-arrow
+                  distance="0"
+                  .placement=${this.popoverPlacement}
+                  for="field"
+                  auto-size="vertical"
+                  auto-size-padding="16"
+                  @wa-after-show=${this._dialogOpened}
+                  @wa-hide=${this._handlePopoverHide}
+                  @wa-after-hide=${this._hidePicker}
+                  trap-focus
+                >
+                  ${this._renderPicker()}
+                </wa-popover>
+              `
+          : nothing}
+      </div>
+    `;
+  }
+
+  private _renderPicker() {
+    if (!this._opened) {
+      return nothing;
+    }
+    return html`
+      <date-range-picker
+        .ranges=${this.ranges === false ? false : this.ranges || this._ranges}
+        .startDate=${this.startDate}
+        .endDate=${this.endDate}
+        .timePicker=${this.timePicker}
+        @cancel-date-picker=${this._closePicker}
+        @value-changed=${this._closePicker}
+      >
+      </date-range-picker>
+    `;
+  }
+
+  private _hidePicker(ev: Event) {
+    ev.stopPropagation();
+    this._opened = false;
+    this._pickerWrapperOpen = false;
+    this._unsubscribeTinyKeys?.();
+    fireEvent(this, "picker-closed");
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("resize", this._handleResize);
+    this._unsubscribeTinyKeys?.();
+  }
+
+  private _handleResize = () => {
+    this._narrow =
+      window.matchMedia("(max-width: 870px)").matches ||
+      window.matchMedia("(max-height: 500px)").matches;
+
+    if (!this._openedNarrow && this._pickerWrapperOpen) {
+      this._popoverWidth = this._containerElement?.offsetWidth || 250;
+    }
+  };
+
+  private _dialogOpened = () => {
+    this._opened = true;
+    this._setTextareaFocusStyle(true);
+  };
+
+  private _handlePopoverHide = () => {
+    this._opened = false;
+  };
+
+  private _handleNext(ev: MouseEvent): void {
+    if (ev && ev.stopPropagation) ev.stopPropagation();
+    this._shift(true);
+  }
+
+  private _handlePrev(ev: MouseEvent): void {
+    if (ev && ev.stopPropagation) ev.stopPropagation();
+    this._shift(false);
+  }
+
+  private _shift(forward: boolean) {
+    if (!this.startDate) return;
+    const { start, end } = shiftDateRange(
+      this.startDate,
+      this.endDate,
+      forward,
+      this.locale,
+      this.hassConfig
+    );
+    this.startDate = start;
+    this.endDate = end;
+    fireEvent(this, "value-changed", {
+      value: {
+        startDate: this.startDate,
+        endDate: this.endDate,
+      },
+    });
+  }
+
+  private _closePicker() {
+    this._pickerWrapperOpen = false;
+  }
+
+  private _openPicker(ev?: Event) {
+    if (this.disabled) {
+      return;
+    }
+    if (this._pickerWrapperOpen) {
+      ev?.stopImmediatePropagation();
+      return;
+    }
+    this._openedNarrow = this._narrow;
+    this._popoverWidth = this._containerElement?.offsetWidth || 250;
+    this._pickerWrapperOpen = true;
+    this._unsubscribeTinyKeys = tinykeys(this, {
+      Escape: this._handleEscClose,
+    });
+  }
+
+  private _handleKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._openPicker(ev);
+    }
+  }
+
+  private _handleEscClose = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+  };
+
+  private _setTextareaFocusStyle(focused: boolean) {
+    const textarea = this.renderRoot.querySelector("ha-textarea");
+    if (textarea) {
+      const foundation = (textarea as any).mdcFoundation;
+      if (foundation) {
+        if (focused) {
+          foundation.activateFocus();
+        } else {
+          foundation.deactivateFocus();
+        }
+      }
+    }
+  }
+
+  static styles = [
+    css`
+      ha-icon-button {
+        direction: var(--direction);
+      }
+
+      .date-range-inputs {
+        display: flex;
+        align-items: center;
+        gap: var(--ha-space-2);
+      }
+
+      ha-textarea {
+        display: inline-block;
+        width: 340px;
+      }
+      @media only screen and (max-width: 460px) {
+        ha-textarea {
+          width: 100%;
+        }
+      }
+
+      wa-popover {
+        --wa-space-l: 0;
+      }
+
+      wa-popover::part(dialog)::backdrop {
+        opacity: 0;
+        transition: opacity var(--ha-animation-duration-normal) ease-out;
+      }
+
+      wa-popover.open::part(dialog)::backdrop {
+        opacity: 1;
+      }
+
+      :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
+        background: none;
+      }
+
+      wa-popover::part(body) {
+        min-width: max(var(--body-width), 250px);
+        max-width: calc(
+          100vw - var(--safe-area-inset-left) - var(
+              --safe-area-inset-right
+            ) - var(--ha-space-8)
+        );
+        overflow: hidden;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-date-range-picker": HaDateRangePicker;
+  }
+}

src/components/date-picker/ha-dialog-date-picker.ts

@@ -0,0 +1,220 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
+import { consume, type ContextType } from "@lit/context";
+import { mdiBackspace, mdiCalendarToday } from "@mdi/js";
+import "cally";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import {
+  formatDateMonth,
+  formatDateShort,
+  formatDateYear,
+  formatISODateOnly,
+} from "../../common/datetime/format_date";
+import {
+  configContext,
+  localeContext,
+  localizeContext,
+} from "../../data/context";
+import { DialogMixin } from "../../dialogs/dialog-mixin";
+import "../ha-button";
+import type { DatePickerDialogParams } from "../ha-date-input";
+import "../ha-dialog";
+import "../ha-dialog-footer";
+import "../ha-icon-button";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import { datePickerStyles } from "./styles";
+
+type CalendarDate = HTMLElementTagNameMap["calendar-date"];
+
+/**
+ * A date picker dialog component that displays a calendar for selecting dates.
+ * Uses the `cally` library for calendar rendering and supports localization,
+ * min/max date constraints, and optional clearing of the selected date.
+ *
+ * @element ha-dialog-date-picker
+ * Uses {@link DialogMixin} with {@link DatePickerDialogParams} to manage dialog state and parameters.
+ */
+@customElement("ha-dialog-date-picker")
+export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
+  LitElement
+) {
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private locale!: ContextType<typeof localeContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private hassConfig!: ContextType<typeof configContext>;
+
+  @state() private _value?: {
+    year: string;
+    title: string;
+    dateString: string;
+  };
+
+  /** used to show month in calendar-date header */
+  @state() private _pickerMonth?: string;
+
+  /** used to show year in calendar-date header */
+  @state() private _pickerYear?: string;
+
+  /** used for today to navigate focus in cally-calendar-date  */
+  @state() private _focusDate?: string;
+
+  public connectedCallback() {
+    super.connectedCallback();
+
+    if (this.params) {
+      const date = this.params.value
+        ? new Date(`${this.params.value.split("T")[0]}T00:00:00`)
+        : new Date();
+
+      this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+      this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+
+      this._value = this.params.value
+        ? {
+            year: this._pickerYear,
+            title: formatDateShort(date, this.locale, this.hassConfig),
+            dateString: formatISODateOnly(date, this.locale, this.hassConfig),
+          }
+        : undefined;
+    }
+  }
+
+  render() {
+    if (!this.params) {
+      return nothing;
+    }
+    return html`<ha-dialog
+      open
+      width="small"
+      .headerTitle=${this._value?.title ||
+      this.localize("ui.dialogs.date-picker.title")}
+      .headerSubtitle=${this._value?.year}
+      header-subtitle-position="above"
+    >
+      ${this.params.canClear
+        ? html`
+            <ha-icon-button
+              .path=${mdiBackspace}
+              .label=${this.localize("ui.dialogs.date-picker.clear")}
+              slot="headerActionItems"
+              @click=${this._clear}
+            ></ha-icon-button>
+          `
+        : nothing}
+      <wa-divider></wa-divider>
+      <calendar-date
+        .value=${this._value?.dateString}
+        .min=${this.params.min}
+        .max=${this.params.max}
+        .locale=${this.params.locale}
+        .firstDayOfWeek=${this.params.firstWeekday}
+        .focusedDate=${this._focusDate}
+        @change=${this._valueChanged}
+        @focusday=${this._focusChanged}
+      >
+        <ha-icon-button-prev
+          tabindex="-1"
+          slot="previous"
+        ></ha-icon-button-prev>
+        <div class="heading" slot="heading">
+          <span class="month-year"
+            >${this._pickerMonth} ${this._pickerYear}</span
+          >
+          <ha-icon-button
+            @click=${this._setToday}
+            .path=${mdiCalendarToday}
+            .label=${this.localize("ui.dialogs.date-picker.today")}
+          ></ha-icon-button>
+        </div>
+        <ha-icon-button-next tabindex="-1" slot="next"></ha-icon-button-next>
+        <calendar-month></calendar-month>
+      </calendar-date>
+      <ha-dialog-footer slot="footer">
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
+          ${this.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button slot="primaryAction" @click=${this._setValue}>
+          ${this.localize("ui.common.ok")}
+        </ha-button>
+      </ha-dialog-footer>
+    </ha-dialog>`;
+  }
+
+  private _valueChanged(ev: Event) {
+    const dateElement = ev.target as CalendarDate;
+    if (dateElement.value) {
+      this._updateValue(dateElement.value);
+    }
+  }
+
+  private _updateValue(value?: string, setFocusDay = false) {
+    const date = value
+      ? new Date(`${value.split("T")[0]}T00:00:00`)
+      : new Date();
+    this._value = {
+      year: formatDateYear(date, this.locale, this.hassConfig),
+      title: formatDateShort(date, this.locale, this.hassConfig),
+      dateString:
+        value || formatISODateOnly(date, this.locale, this.hassConfig),
+    };
+
+    if (setFocusDay) {
+      this._focusDate = this._value.dateString;
+      this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+      this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    }
+  }
+
+  private _focusChanged(ev: CustomEvent<Date>) {
+    const date = ev.detail;
+    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._focusDate = undefined;
+  }
+
+  private _clear() {
+    this.params?.onChange(undefined);
+    this.closeDialog();
+  }
+
+  private _setToday() {
+    this._updateValue(undefined, true);
+  }
+
+  private _setValue() {
+    if (!this._value) {
+      // Date picker opens to today if value is undefined. If user click OK
+      // without changing the date, should return todays date, not undefined.
+      this._setToday();
+    }
+    this.params?.onChange(this._value?.dateString);
+    this.closeDialog();
+  }
+
+  static styles = [
+    datePickerStyles,
+    css`
+      ha-dialog {
+        --dialog-content-padding: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-date-picker": HaDialogDatePicker;
+  }
+}

src/components/date-picker/styles.ts

@@ -0,0 +1,117 @@
+import { css } from "lit";
+
+export const datePickerStyles = css`
+  calendar-range,
+  calendar-date {
+    width: 100%;
+    min-width: 300px;
+  }
+  calendar-date::part(button),
+  calendar-range::part(button) {
+    border: none;
+    background-color: unset;
+    border-radius: var(--ha-border-radius-circle);
+    outline-offset: -2px;
+    outline-color: var(--ha-color-neutral-60);
+  }
+
+  calendar-month {
+    width: calc(40px * 7);
+    margin: 0 auto;
+    min-height: calc(42px * 7);
+  }
+
+  calendar-month::part(heading) {
+    display: none;
+  }
+  calendar-month::part(day) {
+    color: var(--disabled-text-color);
+    font-size: var(--ha-font-size-m);
+    font-family: var(--ha-font-body);
+  }
+  calendar-month::part(button) {
+    color: var(--primary-text-color);
+    height: 32px;
+    width: 32px;
+    margin: var(--ha-space-1);
+    border-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(button):focus-visible {
+    background-color: inherit;
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+  calendar-month::part(button):hover {
+    background-color: var(--ha-color-fill-primary-quiet-hover);
+  }
+  calendar-month::part(today) {
+    color: var(--primary-color);
+  }
+  calendar-month::part(range-inner),
+  calendar-month::part(range-start),
+  calendar-month::part(range-end),
+  calendar-month::part(selected),
+  calendar-month::part(selected):hover {
+    color: var(--text-primary-color);
+    background-color: var(--primary-color);
+    height: 40px;
+    width: 40px;
+    margin: 0;
+  }
+  calendar-month::part(selected):focus-visible {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+  }
+
+  calendar-month::part(outside) {
+    cursor: pointer;
+  }
+
+  .heading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    font-size: var(--ha-font-size-m);
+    font-weight: var(--ha-font-weight-medium);
+  }
+  .month-year {
+    flex: 1;
+    text-align: center;
+    margin-left: 48px;
+  }
+`;
+
+export const dateRangePickerStyles = css`
+  calendar-month::part(selected):focus-visible {
+    background-color: var(--primary-color);
+    color: var(--text-primary-color);
+  }
+  calendar-month::part(range-inner),
+  calendar-month::part(range-start),
+  calendar-month::part(range-end),
+  calendar-month::part(range-inner):hover,
+  calendar-month::part(range-start):hover,
+  calendar-month::part(range-end):hover {
+    color: var(--text-primary-color);
+    background-color: var(--primary-color);
+    border-radius: var(--ha-border-radius-square);
+    display: block;
+    margin: 0;
+  }
+  calendar-month::part(range-start),
+  calendar-month::part(range-start):hover {
+    border-top-left-radius: var(--ha-border-radius-circle);
+    border-bottom-left-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(range-end),
+  calendar-month::part(range-end):hover {
+    border-top-right-radius: var(--ha-border-radius-circle);
+    border-bottom-right-radius: var(--ha-border-radius-circle);
+  }
+  calendar-month::part(range-start):hover,
+  calendar-month::part(range-end):hover,
+  calendar-month::part(range-inner):hover {
+    color: var(--primary-text-color);
+  }
+`;

src/components/date-range-picker.ts

@@ -1,359 +0,0 @@
-import wrap from "@vue/web-component-wrapper";
-import { customElement } from "lit/decorators";
-import Vue from "vue";
-import DateRangePicker from "vue2-daterange-picker";
-// @ts-ignore
-import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
-import {
-  localizeMonths,
-  localizeWeekdays,
-} from "../common/datetime/localize_date";
-import { fireEvent } from "../common/dom/fire_event";
-import { mainWindow } from "../common/dom/get_main_window";
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const CustomDateRangePicker = Vue.extend({
-  mixins: [DateRangePicker],
-  methods: {
-    // Set the current date to the left picker instead of the right picker because the right is hidden
-    selectMonthDate() {
-      const dt: Date = this.end || new Date();
-      // @ts-ignore
-      this.changeLeftMonth({
-        year: dt.getFullYear(),
-        month: dt.getMonth() + 1,
-      });
-    },
-    // Fix the start/end date calculation when selecting a date range. The
-    // original code keeps track of the first clicked date (in_selection) but it
-    // never sets it to either the start or end date variables, so if the
-    // in_selection date is between the start and end date that were set by the
-    // hover the selection will enter a broken state that's counter-intuitive
-    // when hovering between weeks and leads to a random date when selecting a
-    // range across months. This bug doesn't seem to be present on v0.6.7 of the
-    // lib
-    hoverDate(value: Date) {
-      if (this.readonly) return;
-
-      if (this.in_selection) {
-        const pickA = this.in_selection as Date;
-        const pickB = value;
-
-        this.start = this.normalizeDatetime(
-          Math.min(pickA.valueOf(), pickB.valueOf()),
-          this.start
-        );
-        this.end = this.normalizeDatetime(
-          Math.max(pickA.valueOf(), pickB.valueOf()),
-          this.end
-        );
-      }
-
-      this.$emit("hover-date", value);
-    },
-  },
-});
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const Component = Vue.extend({
-  props: {
-    timePicker: {
-      type: Boolean,
-      default: true,
-    },
-    twentyfourHours: {
-      type: Boolean,
-      default: true,
-    },
-    openingDirection: {
-      type: String,
-      default: "right",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    ranges: {
-      type: Boolean,
-      default: true,
-    },
-    startDate: {
-      type: [String, Date],
-      default() {
-        return new Date();
-      },
-    },
-    endDate: {
-      type: [String, Date],
-      default() {
-        return new Date();
-      },
-    },
-    firstDay: {
-      type: Number,
-      default: 1,
-    },
-    autoApply: {
-      type: Boolean,
-      default: false,
-    },
-    language: {
-      type: String,
-      default: "en",
-    },
-    opensVertical: {
-      type: String,
-      default: undefined,
-    },
-  },
-  render(createElement) {
-    // @ts-expect-error
-    return createElement(CustomDateRangePicker, {
-      props: {
-        "time-picker": this.timePicker,
-        "auto-apply": this.autoApply,
-        opens: this.openingDirection,
-        "show-dropdowns": false,
-        "time-picker24-hour": this.twentyfourHours,
-        disabled: this.disabled,
-        ranges: this.ranges ? {} : false,
-        "locale-data": {
-          firstDay: this.firstDay,
-          daysOfWeek: localizeWeekdays(this.language, true),
-          monthNames: localizeMonths(this.language, false),
-        },
-      },
-      model: {
-        value: {
-          startDate: this.startDate,
-          endDate: this.endDate,
-        },
-        callback: (value) => {
-          fireEvent(this.$el as HTMLElement, "change", value);
-        },
-        expression: "dateRange",
-      },
-      on: {
-        toggle: (open: boolean) => {
-          fireEvent(this.$el as HTMLElement, "toggle", { open });
-        },
-      },
-      scopedSlots: {
-        input() {
-          return createElement("slot", {
-            domProps: { name: "input" },
-          });
-        },
-        header() {
-          return createElement("slot", {
-            domProps: { name: "header" },
-          });
-        },
-        ranges() {
-          return createElement("slot", {
-            domProps: { name: "ranges" },
-          });
-        },
-        footer() {
-          return createElement("slot", {
-            domProps: { name: "footer" },
-          });
-        },
-      },
-    });
-  },
-});
-
-// Assertion corrects HTMLElement type from package
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WrappedElement = wrap(
-  Vue,
-  Component
-) as unknown as CustomElementConstructor;
-
-@customElement("date-range-picker")
-class DateRangePickerElement extends WrappedElement {
-  constructor() {
-    super();
-    const style = document.createElement("style");
-    style.innerHTML = `
-          ${dateRangePickerStyles}
-          .calendars {
-            display: flex;
-            flex-wrap: nowrap !important;
-          }
-          .daterangepicker {
-            top: auto;
-            box-shadow: var(--ha-card-box-shadow, none);
-            background-color: var(--card-background-color);
-            border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-            border-width: var(--ha-card-border-width, 1px);
-            border-style: solid;
-            border-color: var(
-              --ha-card-border-color,
-              var(--divider-color, #e0e0e0)
-            );
-            color: var(--primary-text-color);
-            min-width: initial !important;
-            max-height: var(--date-range-picker-max-height);
-            overflow-y: auto;
-                      }
-          .daterangepicker:before {
-            display: none;
-          }
-          .daterangepicker:after {
-            border-bottom: 6px solid var(--card-background-color);
-          }
-          .daterangepicker .calendar-table {
-            background-color: var(--card-background-color);
-            border: none;
-          }
-          .daterangepicker .calendar-table td,
-          .daterangepicker .calendar-table th {
-            background-color: transparent;
-            color: var(--secondary-text-color);
-            border-radius: var(--ha-border-radius-square);
-            outline: none;
-            min-width: 32px;
-            height: 32px;
-          }
-          .daterangepicker td.off,
-          .daterangepicker td.off.end-date,
-          .daterangepicker td.off.in-range,
-          .daterangepicker td.off.start-date {
-            background-color: var(--secondary-background-color);
-            color: var(--disabled-text-color);
-          }
-          .daterangepicker td.in-range {
-            background-color: var(--light-primary-color);
-            color: var(--text-light-primary-color, var(--primary-text-color));
-          }
-          .daterangepicker td.active,
-          .daterangepicker td.active:hover {
-            background-color: var(--primary-color);
-            color: var(--text-primary-color);
-          }
-          .daterangepicker td.start-date.end-date {
-            border-radius: var(--ha-border-radius-circle);
-          }
-          .daterangepicker td.start-date {
-            border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
-          }
-          .daterangepicker td.end-date {
-            border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
-          }
-          .reportrange-text {
-            background: none !important;
-            padding: 0 !important;
-            border: none !important;
-          }
-          .daterangepicker .calendar-table .next span,
-          .daterangepicker .calendar-table .prev span {
-            border: solid var(--primary-text-color);
-            border-width: 0 2px 2px 0;
-          }
-          .daterangepicker .ranges li {
-            outline: none;
-          }
-          .daterangepicker .ranges li:hover {
-            background-color: var(--secondary-background-color);
-          }
-          .daterangepicker .ranges li.active {
-            background-color: var(--primary-color);
-            color: var(--text-primary-color);
-          }
-          .daterangepicker select.ampmselect,
-          .daterangepicker select.hourselect,
-          .daterangepicker select.minuteselect,
-          .daterangepicker select.secondselect {
-            background: var(--card-background-color);
-            border: 1px solid var(--divider-color);
-            color: var(--primary-color);
-          }
-          .daterangepicker .drp-buttons .btn {
-            border: 1px solid var(--primary-color);
-            background-color: transparent;
-            color: var(--primary-color);
-            border-radius: var(--ha-border-radius-sm);
-            padding: 8px;
-            cursor: pointer;
-          }
-          .calendars-container {
-            flex-direction: column;
-            align-items: center;
-          }
-          .drp-calendar.col.right .calendar-table {
-            display: none;
-          }
-          .daterangepicker.show-ranges .drp-calendar.left {
-            border-left: 0px;
-          }
-          .daterangepicker .drp-calendar.left {
-            padding: 8px;
-            width: unset;
-            max-width: unset;
-            min-width: 270px;
-          }
-          .daterangepicker.show-calendar .ranges {
-            margin-top: 0;
-            padding-top: 8px;
-            border-right: 1px solid var(--divider-color);
-          }
-          @media only screen and (max-width: 800px) {
-            .calendars {
-              flex-direction: column;
-            }
-          }
-          .calendar-table {
-            padding: 0 !important;
-          }
-          .calendar-time {
-            direction: ltr;
-          }
-          .daterangepicker.ltr {
-            direction: var(--direction);
-            text-align: var(--float-start);
-          }
-          .vue-daterange-picker{
-            min-width: unset !important;
-            display: block !important;
-          }
-          :host([opens-vertical="up"]) .daterangepicker {
-            bottom: 100%;
-            top: auto !important;
-          }
-        `;
-    if (mainWindow.document.dir === "rtl") {
-      style.innerHTML += `
-            .daterangepicker .calendar-table .next span {
-              transform: rotate(135deg);
-              -webkit-transform: rotate(135deg);
-            }
-            .daterangepicker .calendar-table .prev span {
-              transform: rotate(-45deg);
-              -webkit-transform: rotate(-45deg);
-            }
-            .daterangepicker td.start-date {
-              border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
-            }
-            .daterangepicker td.end-date {
-              border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
-            }
-            `;
-    }
-
-    const shadowRoot = this.shadowRoot!;
-    shadowRoot.appendChild(style);
-    // Stop click events from reaching the document, otherwise it will close the picker immediately.
-    shadowRoot.addEventListener("click", (ev) => ev.stopPropagation());
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "date-range-picker": DateRangePickerElement;
-  }
-  interface HASSDomEvents {
-    toggle: { open: boolean };
-  }
-}

src/components/device/ha-device-picker.ts

@@ -6,7 +6,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
-import { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
   deviceComboBoxKeys,
@@ -14,11 +14,11 @@ import {
   type DevicePickerItem,
 } from "../../data/device/device_picker";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -154,7 +154,7 @@ export class HaDevicePicker extends LitElement {
         return html`<span slot="headline">${deviceId}</span>`;
       }
 
-      const { area } = getDeviceContext(device, this.hass);
+      const area = getDeviceArea(device, this.hass.areas);
 
       const deviceName = device ? computeDeviceName(device) : undefined;
       const areaName = area ? computeAreaName(area) : undefined;

src/components/entity/ha-entity-name-picker.ts

@@ -1,7 +1,8 @@
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
@@ -14,12 +15,14 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
+import "../ha-button-toggle-group";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-input-helper-text";
 import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 import "../ha-sortable";
+import "../input/ha-input";
 
 const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
   <ha-combo-box-item type="button" compact>
@@ -70,10 +73,291 @@ export class HaEntityNamePicker extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
+  @state() private _mode?: "composed" | "custom";
+
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   private _editIndex?: number;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      const items = this._toItems(this.value);
+      this._mode =
+        items.length === 1 && items[0].type === "text" ? "custom" : "composed";
+    }
+  }
+
+  protected willUpdate(_changedProperties: PropertyValues): void {
+    if (this._mode === undefined) {
+      const items = this._toItems(this.value);
+      this._mode =
+        items.length === 1 && items[0].type === "text" ? "custom" : "composed";
+    }
+  }
+
+  protected render() {
+    const modeButtons = [
+      {
+        label: this.hass.localize(
+          "ui.components.entity.entity-name-picker.mode_composed"
+        ),
+        value: "composed",
+      },
+      {
+        label: this.hass.localize(
+          "ui.components.entity.entity-name-picker.mode_custom"
+        ),
+        value: "custom",
+      },
+    ];
+
+    return html`
+      <div class="container">
+        <div class="header">
+          ${this.label ? html`<label>${this.label}</label>` : nothing}
+          <ha-button-toggle-group
+            size="small"
+            .buttons=${modeButtons}
+            .active=${this._mode}
+            .disabled=${this.disabled}
+            @value-changed=${this._modeChanged}
+          ></ha-button-toggle-group>
+        </div>
+        <div class="content">
+          ${this._mode === "custom"
+            ? this._renderTextInput()
+            : this._renderPicker()}
+        </div>
+      </div>
+      ${this.helper
+        ? html`
+            <ha-input-helper-text .disabled=${this.disabled}>
+              ${this.helper}
+            </ha-input-helper-text>
+          `
+        : nothing}
+    `;
+  }
+
+  private _renderTextInput() {
+    const items = this._items;
+    const value =
+      items.length === 1 && items[0].type === "text" ? items[0].text || "" : "";
+    return html`
+      <ha-input
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .value=${value}
+        @input=${this._textInputChanged}
+      ></ha-input>
+    `;
+  }
+
+  private _renderPicker() {
+    const value = this._items;
+    const validTypes = this._validTypes(this.entityId);
+
+    return html`
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .getItems=${this._getFilteredItems}
+        .rowRenderer=${rowRenderer}
+        .value=${this._getPickerValue()}
+        allow-custom-value
+        .customValueLabel=${this.hass.localize(
+          "ui.components.entity.entity-name-picker.custom_name"
+        )}
+        @value-changed=${this._pickerValueChanged}
+        .searchFn=${this._searchFn}
+        .searchLabel=${this.hass.localize(
+          "ui.components.entity.entity-name-picker.search"
+        )}
+      >
+        <div slot="field" class="field">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
+            .disabled=${this.disabled}
+            handle-selector="button.primary.action"
+            filter=".add"
+          >
+            <ha-chip-set>
+              ${repeat(
+                this._items,
+                (item) => item,
+                (item: EntityNameItem, idx) => {
+                  const label = this._formatItem(item);
+                  const isValid = validTypes.has(item.type);
+                  return html`
+                    <ha-input-chip
+                      data-idx=${idx}
+                      @remove=${this._removeItem}
+                      @click=${this._editItem}
+                      .label=${label}
+                      .selected=${!this.disabled}
+                      .disabled=${this.disabled}
+                      class=${!isValid ? "invalid" : ""}
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                      <span>${label}</span>
+                    </ha-input-chip>
+                  `;
+                }
+              )}
+              ${this.disabled
+                ? nothing
+                : html`
+                    <ha-assist-chip
+                      @click=${this._addItem}
+                      .disabled=${this.disabled}
+                      label=${this.hass.localize(
+                        "ui.components.entity.entity-name-picker.add"
+                      )}
+                      class="add"
+                    >
+                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                    </ha-assist-chip>
+                  `}
+            </ha-chip-set>
+          </ha-sortable>
+        </div>
+      </ha-generic-picker>
+    `;
+  }
+
+  private _modeChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    this._mode = ev.detail.value as "composed" | "custom";
+  }
+
+  private _textInputChanged(ev: Event) {
+    const value = (ev.target as HTMLInputElement).value;
+    const newValue: EntityNameItem[] = value
+      ? [{ type: "text", text: value }]
+      : [];
+    this._setValue(newValue);
+  }
+
+  private async _addItem(ev: Event) {
+    ev.stopPropagation();
+    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private async _editItem(ev: Event) {
+    ev.stopPropagation();
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
+    this._editIndex = idx;
+    await this.updateComplete;
+    await this._picker?.open();
+    const value = this._items[idx];
+    // Pre-fill the field value when editing a text item
+    if (value.type === "text" && value.text) {
+      this._picker?.setFieldValue(value.text);
+    }
+  }
+
+  private async _moveItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const value = this._items;
+    const newValue = value.concat();
+    const element = newValue.splice(oldIndex, 1)[0];
+    newValue.splice(newIndex, 0, element);
+    this._setValue(newValue);
+  }
+
+  private async _removeItem(ev: Event) {
+    ev.stopPropagation();
+    const value = [...this._items];
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
+    value.splice(idx, 1);
+    this._setValue(value);
+  }
+
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    if (this.disabled || !value) {
+      return;
+    }
+
+    const item: EntityNameItem = parseOptionValue(value);
+
+    const newValue = [...this._items];
+
+    if (this._editIndex != null) {
+      newValue[this._editIndex] = item;
+      this._editIndex = undefined;
+    } else {
+      newValue.push(item);
+    }
+
+    this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
+  }
+
+  private _setValue(value: EntityNameItem[]) {
+    const newValue = this._toValue(value);
+    this.value = newValue;
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  private get _items(): EntityNameItem[] {
+    return this._toItems(this.value);
+  }
+
+  private _toItems = memoizeOne((value?: typeof this.value) => {
+    if (typeof value === "string") {
+      if (value === "") {
+        return [];
+      }
+      return [{ type: "text", text: value } satisfies EntityNameItem];
+    }
+    return value ? ensureArray(value) : [];
+  });
+
+  private _toValue = memoizeOne(
+    (items: EntityNameItem[]): typeof this.value => {
+      if (items.length === 0) {
+        return undefined;
+      }
+      if (items.length === 1) {
+        const item = items[0];
+        return item.type === "text" ? item.text : item;
+      }
+      return items;
+    }
+  );
+
+  private _formatItem = (item: EntityNameItem) => {
+    if (item.type === "text") {
+      return `"${item.text}"`;
+    }
+    if (KNOWN_TYPES.has(item.type)) {
+      return this.hass.localize(
+        `ui.components.entity.entity-name-picker.types.${item.type as EntityNameType}`
+      );
+    }
+    return item.type;
+  };
+
   private _validTypes = memoizeOne((entityId?: string) => {
     const options = new Set<string>(["text"]);
     if (!entityId) {
@@ -158,157 +442,6 @@ export class HaEntityNamePicker extends LitElement {
     })
   );
 
-  private _formatItem = (item: EntityNameItem) => {
-    if (item.type === "text") {
-      return `"${item.text}"`;
-    }
-    if (KNOWN_TYPES.has(item.type)) {
-      return this.hass.localize(
-        `ui.components.entity.entity-name-picker.types.${item.type as EntityNameType}`
-      );
-    }
-    return item.type;
-  };
-
-  protected render() {
-    const value = this._items;
-    const validTypes = this._validTypes(this.entityId);
-
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required && !value.length}
-        .getItems=${this._getFilteredItems}
-        .rowRenderer=${rowRenderer}
-        .value=${this._getPickerValue()}
-        allow-custom-value
-        .customValueLabel=${this.hass.localize(
-          "ui.components.entity.entity-name-picker.custom_name"
-        )}
-        @value-changed=${this._pickerValueChanged}
-        .searchFn=${this._searchFn}
-        .searchLabel=${this.hass.localize(
-          "ui.components.entity.entity-name-picker.search"
-        )}
-      >
-        <div slot="field" class="container">
-          <ha-sortable
-            no-style
-            @item-moved=${this._moveItem}
-            .disabled=${this.disabled}
-            handle-selector="button.primary.action"
-            filter=".add"
-          >
-            <ha-chip-set>
-              ${repeat(
-                this._items,
-                (item) => item,
-                (item: EntityNameItem, idx) => {
-                  const label = this._formatItem(item);
-                  const isValid = validTypes.has(item.type);
-                  return html`
-                    <ha-input-chip
-                      data-idx=${idx}
-                      @remove=${this._removeItem}
-                      @click=${this._editItem}
-                      .label=${label}
-                      .selected=${!this.disabled}
-                      .disabled=${this.disabled}
-                      class=${!isValid ? "invalid" : ""}
-                    >
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
-                      <span>${label}</span>
-                    </ha-input-chip>
-                  `;
-                }
-              )}
-              ${this.disabled
-                ? nothing
-                : html`
-                    <ha-assist-chip
-                      @click=${this._addItem}
-                      .disabled=${this.disabled}
-                      label=${this.hass.localize(
-                        "ui.components.entity.entity-name-picker.add"
-                      )}
-                      class="add"
-                    >
-                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                    </ha-assist-chip>
-                  `}
-            </ha-chip-set>
-          </ha-sortable>
-        </div>
-      </ha-generic-picker>
-      ${this._renderHelper()}
-    `;
-  }
-
-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-    const value = this._items[idx];
-    // Pre-fill the field value when editing a text item
-    if (value.type === "text" && value.text) {
-      this._picker?.setFieldValue(value.text);
-    }
-  }
-
-  private get _items(): EntityNameItem[] {
-    return this._toItems(this.value);
-  }
-
-  private _toItems = memoizeOne((value?: typeof this.value) => {
-    if (typeof value === "string") {
-      if (value === "") {
-        return [];
-      }
-      return [{ type: "text", text: value } satisfies EntityNameItem];
-    }
-    return value ? ensureArray(value) : [];
-  });
-
-  private _toValue = memoizeOne(
-    (items: EntityNameItem[]): typeof this.value => {
-      if (items.length === 0) {
-        return undefined;
-      }
-      if (items.length === 1) {
-        const item = items[0];
-        return item.type === "text" ? item.text : item;
-      }
-      return items;
-    }
-  );
-
   private _getPickerValue(): string | undefined {
     if (this._editIndex != null) {
       const item = this._items[this._editIndex];
@@ -359,58 +492,6 @@ export class HaEntityNamePicker extends LitElement {
     return filteredItems;
   };
 
-  private async _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const value = this._items;
-    const newValue = value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-    this._setValue(newValue);
-  }
-
-  private async _removeItem(ev: Event) {
-    ev.stopPropagation();
-    const value = [...this._items];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
-    value.splice(idx, 1);
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const item: EntityNameItem = parseOptionValue(value);
-
-    const newValue = [...this._items];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = item;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(item);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: EntityNameItem[]) {
-    const newValue = this._toValue(value);
-    this.value = newValue;
-    fireEvent(this, "value-changed", {
-      value: newValue,
-    });
-  }
-
   static styles = css`
     :host {
       position: relative;
@@ -418,13 +499,42 @@ export class HaEntityNamePicker extends LitElement {
     }
 
     .container {
+      --ha-input-padding-bottom: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-2);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    label {
+      display: block;
+      font-weight: 500;
+    }
+
+    .content {
+      display: flex;
+      gap: var(--ha-space-2);
+      align-items: flex-end;
+    }
+
+    ha-generic-picker,
+    ha-input {
+      width: 100%;
+    }
+
+    .field {
       position: relative;
       background-color: var(--mdc-text-field-fill-color, whitesmoke);
       border-radius: var(--ha-border-radius-sm);
       border-end-end-radius: var(--ha-border-radius-square);
       border-end-start-radius: var(--ha-border-radius-square);
     }
-    .container:after {
+    .field:after {
       display: block;
       content: "";
       position: absolute;
@@ -442,30 +552,25 @@ export class HaEntityNamePicker extends LitElement {
         height 180ms ease-in-out,
         background-color 180ms ease-in-out;
     }
-    :host([disabled]) .container:after {
+    :host([disabled]) .field:after {
       background-color: var(
         --mdc-text-field-disabled-line-color,
         rgba(0, 0, 0, 0.42)
       );
     }
-    .container:focus-within:after {
+    .field:focus-within:after {
       height: 2px;
       background-color: var(--mdc-theme-primary);
     }
 
-    label {
-      display: block;
-      margin: 0 0 var(--ha-space-2);
+    ha-chip-set {
+      padding: var(--ha-space-3);
     }
 
     .add {
       order: 1;
     }
 
-    ha-chip-set {
-      padding: var(--ha-space-2) var(--ha-space-2);
-    }
-
     .invalid {
       text-decoration: line-through;
     }

src/components/entity/state-info.ts

@@ -1,11 +1,10 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeStateName } from "../../common/entity/compute_state_name";
 import type { HomeAssistant } from "../../types";
 import "../ha-relative-time";
-import "./state-badge";
 import "../ha-tooltip";
+import "./state-badge";
 
 @customElement("state-info")
 class StateInfo extends LitElement {
@@ -22,7 +21,7 @@ class StateInfo extends LitElement {
       return nothing;
     }
 
-    const name = computeStateName(this.stateObj);
+    const name = this.hass.formatEntityName(this.stateObj, { type: "entity" });
 
     return html`<state-badge
         .hass=${this.hass}

src/components/ha-addon-picker.ts

@@ -94,7 +94,7 @@ class HaAddonPicker extends LitElement {
 
   private async _getApps() {
     try {
-      if (isComponentLoaded(this.hass, "hassio")) {
+      if (isComponentLoaded(this.hass.config, "hassio")) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)

src/components/ha-alert.ts

@@ -8,6 +8,7 @@ import {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
 import "./ha-svg-icon";
@@ -38,6 +39,8 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
   @property({ type: Boolean }) public narrow = false;
 
   public render() {
@@ -65,7 +68,7 @@ class HaAlert extends LitElement {
               ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismissClicked}
-                    label="Dismiss alert"
+                    .label=${this.localize!("ui.common.dismiss_alert")}
                     .path=${mdiClose}
                   ></ha-icon-button>`
                 : nothing}

src/components/ha-aliases-editor.ts

@@ -2,7 +2,7 @@ import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
-import "./ha-multi-textfield";
+import "./input/ha-input-multi";
 
 @customElement("ha-aliases-editor")
 class AliasesEditor extends LitElement {
@@ -12,28 +12,32 @@ class AliasesEditor extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public sortable = false;
+
   protected render() {
     if (!this.aliases) {
       return nothing;
     }
 
     return html`
-      <ha-multi-textfield
-        .hass=${this.hass}
+      <ha-input-multi
         .value=${this.aliases}
         .disabled=${this.disabled}
+        .sortable=${this.sortable}
+        update-on-blur
         .label=${this.hass!.localize("ui.dialogs.aliases.label")}
         .removeLabel=${this.hass!.localize("ui.dialogs.aliases.remove")}
         .addLabel=${this.hass!.localize("ui.dialogs.aliases.add")}
         item-index
         @value-changed=${this._aliasesChanged}
       >
-      </ha-multi-textfield>
+      </ha-input-multi>
     `;
   }
 
-  private _aliasesChanged(value) {
-    fireEvent(this, "value-changed", { value });
+  private _aliasesChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 }
 

src/components/ha-area-controls-picker.ts

@@ -267,7 +267,6 @@ export class HaAreaControlsPicker extends LitElement {
         : item.domain
           ? html`<ha-domain-icon
               slot="start"
-              .hass=${this.hass}
               .domain=${item.domain}
               .deviceClass=${item.deviceClass}
             ></ha-domain-icon>`

src/components/ha-areas-display-editor.ts

@@ -9,7 +9,6 @@ import "./ha-expansion-panel";
 import "./ha-items-display-editor";
 import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
 import "./ha-svg-icon";
-import "./ha-textfield";
 
 export interface AreasDisplayValue {
   hidden?: string[];

src/components/ha-areas-floors-display-editor.ts

@@ -15,7 +15,6 @@ import "./ha-floor-icon";
 import "./ha-items-display-editor";
 import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
 import "./ha-svg-icon";
-import "./ha-textfield";
 
 export interface AreasFloorsDisplayValue {
   areas_display?: {

src/components/ha-assist-chat.ts

@@ -1,9 +1,15 @@
-import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
+import {
+  mdiAlertCircle,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiCommentProcessingOutline,
+  mdiMicrophone,
+  mdiSend,
+} from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { haStyleScrollbar } from "../resources/styles";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
   runAssistPipeline,
@@ -14,17 +20,28 @@ import {
 } from "../data/assist_pipeline";
 import { ConversationEntityFeature } from "../data/conversation";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
 import "./ha-markdown";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
+import "./input/ha-input";
+import type { HaInput } from "./input/ha-input";
 
 interface AssistMessage {
   who: string;
-  text?: string | TemplateResult;
+  text: string | TemplateResult;
+  thinking: string;
+  thinking_expanded?: boolean;
+  tool_calls: Record<
+    string,
+    {
+      tool_name: string;
+      tool_args: Record<string, unknown>;
+      result?: any;
+    }
+  >;
   error?: boolean;
 }
 
@@ -40,7 +57,7 @@ export class HaAssistChat extends LitElement {
   @property({ attribute: false })
   public startListening?: boolean;
 
-  @query("#message-input") private _messageInput!: HaTextField;
+  @query("#message-input") private _messageInput!: HaInput;
 
   @query(".message:last-child")
   private _lastChatMessage!: LitElement;
@@ -70,6 +87,8 @@ export class HaAssistChat extends LitElement {
         {
           who: "hass",
           text: this.hass.localize("ui.dialogs.voice_command.how_can_i_help"),
+          thinking: "",
+          tool_calls: {},
         },
       ];
     }
@@ -127,29 +146,114 @@ export class HaAssistChat extends LitElement {
             `}
         <div class="spacer"></div>
         ${this._conversation!.map(
-          (message) => html`
-            <ha-markdown
-              class="message ${classMap({
-                error: !!message.error,
-                [message.who]: true,
-              })}"
-              breaks
-              cache
-              .content=${message.text}
-            >
-            </ha-markdown>
+          (message, index) => html`
+            <div class="message-container ${classMap({ [message.who]: true })}">
+              ${message.text ||
+              message.error ||
+              message.thinking ||
+              (message.tool_calls && Object.keys(message.tool_calls).length > 0)
+                ? html`
+                    <div
+                      class="message ${classMap({
+                        error: !!message.error,
+                        [message.who]: true,
+                      })}"
+                    >
+                      ${message.thinking ||
+                      (message.tool_calls &&
+                        Object.keys(message.tool_calls).length > 0)
+                        ? html`
+                            <div
+                              class="thinking-wrapper ${classMap({
+                                expanded: !!message.thinking_expanded,
+                              })}"
+                            >
+                              <button
+                                class="thinking-header"
+                                .index=${index}
+                                @click=${this._handleToggleThinking}
+                                aria-expanded=${message.thinking_expanded
+                                  ? "true"
+                                  : "false"}
+                              >
+                                <ha-svg-icon
+                                  .path=${mdiCommentProcessingOutline}
+                                ></ha-svg-icon>
+                                <span class="thinking-label">
+                                  ${this.hass.localize(
+                                    "ui.dialogs.voice_command.show_details"
+                                  )}
+                                </span>
+                                <ha-svg-icon
+                                  .path=${message.thinking_expanded
+                                    ? mdiChevronUp
+                                    : mdiChevronDown}
+                                ></ha-svg-icon>
+                              </button>
+                              <div class="thinking-content">
+                                ${message.thinking
+                                  ? html`<ha-markdown
+                                      .content=${message.thinking}
+                                    ></ha-markdown>`
+                                  : nothing}
+                                ${message.tool_calls &&
+                                Object.keys(message.tool_calls).length > 0
+                                  ? html`
+                                      <div class="tool-calls">
+                                        ${Object.values(message.tool_calls).map(
+                                          (toolCall) => html`
+                                            <div class="tool-call">
+                                              <div class="tool-name">
+                                                ${toolCall.tool_name}
+                                              </div>
+                                              <div class="tool-data">
+                                                <pre>
+${JSON.stringify(toolCall.tool_args, null, 2)}</pre
+                                                >
+                                              </div>
+                                              ${toolCall.result
+                                                ? html`
+                                                    <div class="tool-data">
+                                                      <pre>
+${JSON.stringify(toolCall.result, null, 2)}</pre
+                                                      >
+                                                    </div>
+                                                  `
+                                                : nothing}
+                                            </div>
+                                          `
+                                        )}
+                                      </div>
+                                    `
+                                  : nothing}
+                              </div>
+                            </div>
+                          `
+                        : nothing}
+                      ${message.text
+                        ? html`
+                            <ha-markdown
+                              breaks
+                              cache
+                              .content=${message.text}
+                            ></ha-markdown>
+                          `
+                        : nothing}
+                    </div>
+                  `
+                : nothing}
+            </div>
           `
         )}
       </div>
       <div class="input" slot="primaryAction">
-        <ha-textfield
+        <ha-input
           id="message-input"
           @keyup=${this._handleKeyUp}
           @input=${this._handleInput}
           .label=${this.hass.localize(`ui.dialogs.voice_command.input_label`)}
-          .iconTrailing=${true}
         >
-          <div slot="trailingIcon">
+          <div slot="end">
             ${this._showSendButton || !supportsSTT
               ? html`
                   <ha-icon-button
@@ -194,7 +298,7 @@ export class HaAssistChat extends LitElement {
                   </div>
                 `}
           </div>
-        </ha-textfield>
+        </ha-input>
       </div>
     `;
   }
@@ -224,7 +328,7 @@ export class HaAssistChat extends LitElement {
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
-    const input = ev.target as HaTextField;
+    const input = ev.target as HaInput;
     if (!this._processing && ev.key === "Enter" && input.value) {
       this._processText(input.value);
       input.value = "";
@@ -233,7 +337,7 @@ export class HaAssistChat extends LitElement {
   }
 
   private _handleInput(ev: InputEvent) {
-    const value = (ev.target as HaTextField).value;
+    const value = (ev.target as HaInput).value;
     if (value && !this._showSendButton) {
       this._showSendButton = true;
     } else if (!value && this._showSendButton) {
@@ -268,6 +372,15 @@ export class HaAssistChat extends LitElement {
     }
   }
 
+  private _handleToggleThinking(ev: Event) {
+    const index = (ev.currentTarget as any).index;
+    this._conversation[index] = {
+      ...this._conversation[index],
+      thinking_expanded: !this._conversation[index].thinking_expanded,
+    };
+    this.requestUpdate("_conversation");
+  }
+
   private _addMessage(message: AssistMessage) {
     this._conversation = [...this._conversation!, message];
   }
@@ -296,7 +409,9 @@ export class HaAssistChat extends LitElement {
                   "ui.dialogs.voice_command.not_supported_microphone_documentation_link"
                 )}</a>`,
           }
-        )}`,
+          )}`,
+      thinking: "",
+      tool_calls: {},
     });
   }
 
@@ -317,6 +432,8 @@ export class HaAssistChat extends LitElement {
     const userMessage: AssistMessage = {
       who: "user",
       text: "…",
+      thinking: "",
+      tool_calls: {},
     };
     await this._audioRecorder.start();
 
@@ -448,7 +565,7 @@ export class HaAssistChat extends LitElement {
   private async _processText(text: string) {
     this._unloadAudio();
     this._processing = true;
-    this._addMessage({ who: "user", text });
+    this._addMessage({ who: "user", text, thinking: "", tool_calls: {} });
     const hassMessageProcesser = this._createAddHassMessageProcessor();
     hassMessageProcesser.addMessage();
     try {
@@ -487,17 +604,23 @@ export class HaAssistChat extends LitElement {
     let currentDeltaRole = "";
 
     const progressToNextMessage = () => {
-      if (progress.hassMessage.text === "…") {
+      if (
+        progress.hassMessage.text === "…" &&
+        !progress.hassMessage.thinking &&
+        (!progress.hassMessage.tool_calls ||
+          Object.keys(progress.hassMessage.tool_calls).length === 0)
+      ) {
         return;
       }
-      progress.hassMessage.text = progress.hassMessage.text.substring(
-        0,
-        progress.hassMessage.text.length - 1
-      );
+      if (progress.hassMessage.text?.endsWith("…")) {
+        progress.hassMessage.text = progress.hassMessage.text.slice(0, -1);
+      }
 
       progress.hassMessage = {
         who: "hass",
         text: "…",
+        thinking: "",
+        tool_calls: {},
         error: false,
       };
       this._addMessage(progress.hassMessage);
@@ -513,16 +636,13 @@ export class HaAssistChat extends LitElement {
     ): _delta is ConversationChatLogToolResultDelta =>
       currentDeltaRole === "tool_result";
 
-    const tools: Record<
-      string,
-      ConversationChatLogAssistantDelta["tool_calls"][0]
-    > = {};
-
     const progress = {
       continueConversation: false,
       hassMessage: {
         who: "hass",
         text: "…",
+        thinking: "",
+        tool_calls: {},
         error: false,
       },
       addMessage: () => {
@@ -540,29 +660,37 @@ export class HaAssistChat extends LitElement {
 
           // new message
           if (delta.role) {
-            progressToNextMessage();
             currentDeltaRole = delta.role;
           }
 
           if (isAssistantDelta(delta)) {
             if (delta.content) {
-              progress.hassMessage.text =
-                progress.hassMessage.text.substring(
-                  0,
-                  progress.hassMessage.text.length - 1
-                ) +
-                delta.content +
-                "…";
-              this.requestUpdate("_conversation");
+              if (progress.hassMessage.text.endsWith("…")) {
+                progress.hassMessage.text =
+                  progress.hassMessage.text.substring(
+                    0,
+                    progress.hassMessage.text.length - 1
+                  ) +
+                  delta.content +
+                  "…";
+              } else {
+                progress.hassMessage.text += delta.content + "…";
+              }
+            }
+            if (delta.thinking_content) {
+              progress.hassMessage.thinking += delta.thinking_content;
             }
             if (delta.tool_calls) {
               for (const toolCall of delta.tool_calls) {
-                tools[toolCall.id] = toolCall;
+                progress.hassMessage.tool_calls[toolCall.id] = toolCall;
               }
             }
+            this.requestUpdate("_conversation");
           } else if (isToolResult(delta)) {
-            if (tools[delta.tool_call_id]) {
-              delete tools[delta.tool_call_id];
+            if (progress.hassMessage.tool_calls[delta.tool_call_id]) {
+              progress.hassMessage.tool_calls[delta.tool_call_id].result =
+                delta.tool_result;
+              this.requestUpdate("_conversation");
             }
           }
         } else if (event.type === "intent-end") {
@@ -599,9 +727,10 @@ export class HaAssistChat extends LitElement {
         ha-alert {
           margin-bottom: var(--ha-space-2);
         }
-        ha-textfield {
-          display: block;
+        #message-input::part(wa-base) {
+          padding-right: var(--ha-space-1);
         }
+
         .messages {
           flex: 1 1 400px;
           display: block;
@@ -619,6 +748,17 @@ export class HaAssistChat extends LitElement {
         .spacer {
           flex: 1;
         }
+        .message-container {
+          display: flex;
+          flex-direction: column;
+          margin: var(--ha-space-2) 0;
+        }
+        .message-container.user {
+          align-self: flex-end;
+        }
+        .message-container.hass {
+          align-self: flex-start;
+        }
         .message {
           font-size: var(--ha-font-size-l);
           clear: both;
@@ -666,6 +806,89 @@ export class HaAssistChat extends LitElement {
           background-color: var(--error-color);
           color: var(--text-primary-color);
         }
+        .thinking-wrapper {
+          margin: calc(var(--ha-space-2) * -1) calc(var(--ha-space-2) * -1) 0
+            calc(var(--ha-space-2) * -1);
+          overflow: hidden;
+        }
+        .thinking-wrapper:last-child {
+          margin-bottom: calc(var(--ha-space-2) * -1);
+        }
+        .thinking-header {
+          display: flex;
+          align-items: center;
+          gap: var(--ha-space-2);
+          width: 100%;
+          background: none;
+          border: none;
+          padding: var(--ha-space-2);
+          cursor: pointer;
+          text-align: left;
+          color: var(--secondary-text-color);
+          transition: color 0.2s;
+        }
+        .thinking-header:hover,
+        .thinking-header:focus {
+          outline: none;
+          color: var(--primary-text-color);
+        }
+        .thinking-label {
+          font-size: var(--ha-font-size-m);
+          display: flex;
+          align-items: center;
+          gap: var(--ha-space-2);
+        }
+        .thinking-header ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+        .thinking-content {
+          max-height: 0;
+          overflow: hidden;
+          transition:
+            max-height 0.3s ease-in-out,
+            padding 0.3s;
+          padding: 0 var(--ha-space-2);
+          font-size: var(--ha-font-size-m);
+          color: var(--secondary-text-color);
+        }
+        .thinking-wrapper.expanded .thinking-content {
+          max-height: 500px;
+          padding: var(--ha-space-2);
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-2);
+        }
+        .tool-calls {
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-1);
+        }
+        .tool-call {
+          padding: var(--ha-space-1) var(--ha-space-2);
+          border-left: 2px solid var(--divider-color);
+          margin-bottom: var(--ha-space-1);
+        }
+        .tool-name {
+          font-weight: bold;
+          display: flex;
+          align-items: center;
+          gap: var(--ha-space-1);
+        }
+        .tool-data {
+          font-family: var(--code-font-family, monospace);
+          font-size: 0.9em;
+          background: var(--markdown-code-background-color);
+          padding: var(--ha-space-1);
+          border-radius: var(--ha-border-radius-s);
+          margin-top: var(--ha-space-1);
+          overflow-x: auto;
+        }
+        .tool-data pre {
+          margin: 0;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
         ha-markdown {
           --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2);
           --markdown-table-border-color: var(--divider-color);
@@ -721,20 +944,6 @@ export class HaAssistChat extends LitElement {
           }
         }
 
-        .listening-icon {
-          position: relative;
-          color: var(--secondary-text-color);
-          margin-right: -24px;
-          margin-inline-end: -24px;
-          margin-inline-start: initial;
-          direction: var(--direction);
-          transform: scaleX(var(--scale-direction));
-        }
-
-        .listening-icon[active] {
-          color: var(--primary-color);
-        }
-
         .unsupported {
           color: var(--error-color);
           position: absolute;

src/components/ha-attribute-value.ts

@@ -56,7 +56,10 @@ class HaAttributeValue extends LitElement {
         this.stateObj!,
         this.attribute
       );
-      return parts.find((part) => part.type === "value")?.value;
+      return parts
+        .filter((part) => part.type === "value")
+        .map((part) => part.value)
+        .join("");
     }
 
     return this.hass.formatEntityAttributeValue(this.stateObj!, this.attribute);

src/components/ha-base-time-input.ts

@@ -4,12 +4,13 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-select";
 import type { HaSelectSelectEvent } from "./ha-select";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
+import "./input/ha-input";
+import type { HaInput } from "./input/ha-input";
 
 export interface TimeChangedEvent {
   days?: number;
@@ -133,7 +134,10 @@ export class HaBaseTimeInput extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public clearable?: boolean;
 
-  @queryAll("ha-textfield") private _inputs?: HaTextField[];
+  @property({ attribute: "placeholder-labels", type: Boolean })
+  public placeholderLabels = false;
+
+  @queryAll("ha-input") private _inputs?: NodeListOf<HaInput>;
 
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
@@ -141,7 +145,9 @@ export class HaBaseTimeInput extends LitElement {
   };
 
   public reportValidity(): boolean {
-    return this._inputs?.every((input) => input.reportValidity()) ?? true;
+    const inputs = this._inputs;
+    if (!inputs) return true;
+    return [...inputs].every((input) => input.reportValidity());
   }
 
   protected render(): TemplateResult {
@@ -153,99 +159,104 @@ export class HaBaseTimeInput extends LitElement {
         <div class="time-input-wrap">
           ${this.enableDay
             ? html`
-                <ha-textfield
+                <ha-input
                   id="day"
                   type="number"
                   inputmode="numeric"
                   .value=${this.days.toFixed()}
-                  .label=${this.dayLabel}
+                  .label=${!this.placeholderLabels ? this.dayLabel : ""}
+                  .placeholder=${this.placeholderLabels ? this.dayLabel : ""}
                   name="days"
                   @change=${this._valueChanged}
                   @focusin=${this._onFocus}
-                  no-spinner
+                  without-spin-buttons
                   .required=${this.required}
                   .autoValidate=${this.autoValidate}
                   min="0"
                   .disabled=${this.disabled}
-                  suffix=":"
-                  class="hasSuffix"
                 >
-                </ha-textfield>
+                </ha-input>
+                <div class="time-separator">:</div>
               `
             : nothing}
 
-          <ha-textfield
+          <ha-input
             id="hour"
             type="number"
             inputmode="numeric"
             .value=${this.hours.toFixed()}
-            .label=${this.hourLabel}
+            .label=${!this.placeholderLabels ? this.hourLabel : ""}
+            .placeholder=${this.placeholderLabels ? this.hourLabel : ""}
             name="hours"
             @change=${this._valueChanged}
             @focusin=${this._onFocus}
-            no-spinner
+            without-spin-buttons
             .required=${this.required}
             .autoValidate=${this.autoValidate}
             maxlength="2"
             max=${ifDefined(this._hourMax)}
             min="0"
             .disabled=${this.disabled}
-            suffix=":"
-            class="hasSuffix"
           >
-          </ha-textfield>
-          <ha-textfield
+          </ha-input>
+          <div class="time-separator">:</div>
+          <ha-input
             id="min"
             type="number"
             inputmode="numeric"
             .value=${this._formatValue(this.minutes)}
-            .label=${this.minLabel}
+            .label=${!this.placeholderLabels ? this.minLabel : ""}
+            .placeholder=${this.placeholderLabels ? this.minLabel : ""}
             @change=${this._valueChanged}
             @focusin=${this._onFocus}
             name="minutes"
-            no-spinner
+            without-spin-buttons
             .required=${this.required}
             .autoValidate=${this.autoValidate}
             maxlength="2"
             max="59"
             min="0"
             .disabled=${this.disabled}
-            .suffix=${this.enableSecond ? ":" : ""}
-            class=${this.enableSecond ? "has-suffix" : ""}
           >
-          </ha-textfield>
+          </ha-input>
           ${this.enableSecond
-            ? html`<ha-textfield
-                id="sec"
-                type="number"
-                inputmode="decimal"
-                step="any"
-                .value=${this._formatValue(this.seconds)}
-                .label=${this.secLabel}
-                @change=${this._valueChanged}
-                @focusin=${this._onFocus}
-                name="seconds"
-                no-spinner
-                .required=${this.required}
-                .autoValidate=${this.autoValidate}
-                max="59"
-                min="0"
-                .disabled=${this.disabled}
-                .suffix=${this.enableMillisecond ? ":" : ""}
-                class=${this.enableMillisecond ? "has-suffix" : ""}
-              >
-              </ha-textfield>`
+            ? html`<div class="time-separator">:</div>`
+            : nothing}
+          ${this.enableSecond
+            ? html`<ha-input
+                  id="sec"
+                  type="number"
+                  inputmode="decimal"
+                  step="any"
+                  .value=${this._formatValue(this.seconds)}
+                  .label=${!this.placeholderLabels ? this.secLabel : ""}
+                  .placeholder=${this.placeholderLabels ? this.secLabel : ""}
+                  @change=${this._valueChanged}
+                  @focusin=${this._onFocus}
+                  name="seconds"
+                  without-spin-buttons
+                  .required=${this.required}
+                  .autoValidate=${this.autoValidate}
+                  max="59"
+                  min="0"
+                  .disabled=${this.disabled}
+                >
+                </ha-input>
+                ${this.enableMillisecond
+                  ? html`<div class="time-separator">:</div>`
+                  : nothing}`
             : nothing}
           ${this.enableMillisecond
-            ? html`<ha-textfield
+            ? html`<ha-input
                 id="millisec"
                 type="number"
                 .value=${this._formatValue(this.milliseconds, 3)}
-                .label=${this.millisecLabel}
+                .label=${!this.placeholderLabels ? this.millisecLabel : ""}
+                .placeholder=${this.placeholderLabels ? this.millisecLabel : ""}
                 @change=${this._valueChanged}
                 @focusin=${this._onFocus}
                 name="milliseconds"
-                no-spinner
+                without-spin-buttons
                 .required=${this.required}
                 .autoValidate=${this.autoValidate}
                 maxlength="3"
@@ -253,8 +264,21 @@ export class HaBaseTimeInput extends LitElement {
                 min="0"
                 .disabled=${this.disabled}
               >
-              </ha-textfield>`
+              </ha-input>`
             : nothing}
+          ${this.format === 24
+            ? nothing
+            : html`<ha-select
+                .required=${this.required}
+                .value=${this.amPm}
+                .disabled=${this.disabled}
+                .name=${"amPm"}
+                @selected=${this._valueChanged}
+                @wa-after-hide=${stopPropagation}
+                @wa-hide=${stopPropagation}
+                .options=${["AM", "PM"]}
+              >
+              </ha-select>`}
           ${this.clearable && !this.required && !this.disabled
             ? html`<ha-icon-button
                 label="clear"
@@ -263,18 +287,6 @@ export class HaBaseTimeInput extends LitElement {
               ></ha-icon-button>`
             : nothing}
         </div>
-
-        ${this.format === 24
-          ? nothing
-          : html`<ha-select
-              .required=${this.required}
-              .value=${this.amPm}
-              .disabled=${this.disabled}
-              .name=${"amPm"}
-              @selected=${this._valueChanged}
-              .options=${["AM", "PM"]}
-            >
-            </ha-select>`}
       </div>
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -289,8 +301,8 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   private _valueChanged(ev: InputEvent | HaSelectSelectEvent): void {
-    const textField = ev.currentTarget as HaTextField;
-    this[textField.name] =
+    const textField = ev.currentTarget as HaInput;
+    this[textField.name || ""] =
       textField.name === "amPm"
         ? (ev as HaSelectSelectEvent).detail.value
         : Number(textField.value);
@@ -312,7 +324,7 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   private _onFocus(ev: FocusEvent) {
-    (ev.currentTarget as HaTextField).select();
+    (ev.currentTarget as HaInput).select();
   }
 
   /**
@@ -354,45 +366,74 @@ export class HaBaseTimeInput extends LitElement {
       direction: ltr;
       padding-right: 3px;
     }
-    ha-textfield {
+    ha-input {
+      height: 56px;
+      padding: 0;
       width: 60px;
       flex-grow: 1;
-      text-align: center;
-      --mdc-shape-small: 0;
-      --text-field-appearance: none;
-      --text-field-padding-top: 0;
-      --text-field-padding-bottom: 0;
-      --text-field-padding-start: 4px;
-      --text-field-padding-end: 4px;
-
-      --text-field-suffix-padding-left: 2px;
-      --text-field-suffix-padding-right: 0;
-      --text-field-text-align: center;
     }
-    ha-textfield.hasSuffix {
-      --text-field-padding: 0 0 0 4px;
-    }
-    ha-textfield:first-child {
+    ha-input:first-child {
       --text-field-border-top-left-radius: var(--mdc-shape-medium);
     }
-    ha-textfield:last-child {
+    ha-input:last-child {
       --text-field-border-top-right-radius: var(--mdc-shape-medium);
     }
+
+    ha-input::part(wa-base) {
+      padding: var(--ha-space-1);
+    }
+
+    ha-input:first-child::part(wa-base) {
+      padding-inline-start: var(--ha-space-4);
+    }
+
+    ha-input:last-child::part(wa-base) {
+      padding-inline-end: var(--ha-space-4);
+    }
+
+    ha-input::part(wa-hint) {
+      height: 0;
+    }
+
+    ha-input::part(wa-input) {
+      text-align: center;
+    }
+
+    .time-separator,
+    ha-icon-button {
+      background-color: var(--ha-color-form-background);
+      color: var(--ha-color-text-secondary);
+      border-bottom: 1px solid var(--ha-color-border-neutral-loud);
+      box-sizing: border-box;
+      height: 56px;
+      margin-inline-start: calc(var(--ha-space-1) * -1);
+    }
+
+    .time-separator {
+      width: 12px;
+      margin-inline-end: calc(var(--ha-space-1) * -1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     :host([clearable]) .mdc-select__anchor {
       padding-inline-end: var(--select-selected-text-padding-end, 12px);
     }
     ha-icon-button {
       position: relative;
       --ha-icon-button-size: 36px;
+      border-start-end-radius: var(--ha-border-radius-sm);
       --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
       direction: var(--direction);
       display: flex;
       align-items: center;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
     }
+
+    ha-select {
+      margin-inline: calc(var(--ha-space-1) * -1);
+    }
+
     label {
       -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       -webkit-font-smoothing: var(--ha-font-smoothing);

src/components/ha-bottom-sheet.ts

@@ -8,7 +8,6 @@ import { SwipeGestureRecognizer } from "../common/util/swipe-gesture-recognizer"
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import { isIosApp } from "../util/is_ios";
 
 export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 
@@ -90,21 +89,22 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (this.hass && isIosApp(this.hass.auth.external)) {
-        const element = this.renderRoot.querySelector("[autofocus]");
-        if (element !== null) {
-          if (!element.id) {
-            element.id = "ha-bottom-sheet-autofocus";
-          }
-          this.hass.auth.external?.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
+      // disabled till iOS app fix the "focus_element" implementation
+      // if (this.hass && isIosApp(this.hass.auth.external)) {
+      //   const element = this.renderRoot.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-bottom-sheet-autofocus";
+      //     }
+      //     this.hass.auth.external?.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
       (
         this.renderRoot.querySelector("[autofocus]") as HTMLElement | null
       )?.focus();

src/components/ha-button.ts

@@ -57,6 +57,7 @@ export class HaButton extends Button {
         .button {
           font-size: var(--ha-font-size-m);
           line-height: 1;
+          -webkit-tap-highlight-color: transparent;
 
           transition: background-color var(--ha-animation-duration-fast)
             ease-out;
@@ -68,7 +69,7 @@ export class HaButton extends Button {
             --ha-button-height,
             var(--button-height, 32px)
           );
-          font-size: var(--wa-font-size-s, var(--ha-font-size-m));
+          font-size: var(--ha-font-size-m);
           --wa-form-control-padding-inline: var(--ha-space-3);
         }
 

src/components/ha-color-picker.ts

@@ -8,10 +8,14 @@ import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeKeys } from "../common/translations/localize";
 import { localizeContext } from "../data/context";
+import type { UiColorExtraOption } from "../data/selector";
 import type { ValueChangedEvent } from "../types";
+import "./ha-combo-box-item";
 import "./ha-generic-picker";
+import "./ha-icon";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
+import "./ha-svg-icon";
 
 @customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
@@ -30,8 +34,24 @@ export class HaColorPicker extends LitElement {
   @property({ type: Boolean, attribute: "include_none" })
   public includeNone = false;
 
+  @property({ attribute: false })
+  public extraOptions?: UiColorExtraOption[];
+
   @property({ type: Boolean }) public disabled = false;
 
+  private _extraOptionsColorMap = memoizeOne(
+    (extraOptions?: UiColorExtraOption[]) => {
+      if (!extraOptions) return undefined;
+      const map = new Map<string, string>();
+      for (const option of extraOptions) {
+        if (option.display_color) {
+          map.set(option.value, option.display_color);
+        }
+      }
+      return map.size > 0 ? map : undefined;
+    }
+  );
+
   @property({ type: Boolean }) public required = false;
 
   @state()
@@ -71,6 +91,7 @@ export class HaColorPicker extends LitElement {
     const colors = this._getColors(
       this.includeNone,
       this.includeState,
+      this.extraOptions,
       this.defaultColor,
       this.value
     );
@@ -93,6 +114,7 @@ export class HaColorPicker extends LitElement {
     this._getColors(
       this.includeNone,
       this.includeState,
+      this.extraOptions,
       this.defaultColor,
       this.value
     );
@@ -101,6 +123,7 @@ export class HaColorPicker extends LitElement {
     (
       includeNone: boolean,
       includeState: boolean,
+      extraOptions: UiColorExtraOption[] | undefined,
       defaultColor: string | undefined,
       currentValue: string | undefined
     ): PickerComboBoxItem[] => {
@@ -132,6 +155,19 @@ export class HaColorPicker extends LitElement {
         });
       }
 
+      if (extraOptions) {
+        extraOptions.forEach((option) => {
+          items.push({
+            id: option.value,
+            primary: addDefaultSuffix(
+              option.label,
+              defaultColor === option.value
+            ),
+            ...(option.icon ? { icon: option.icon } : {}),
+          });
+        });
+      }
+
       Array.from(THEME_COLORS).forEach((color) => {
         const themeLabel =
           this.localize?.(
@@ -143,14 +179,11 @@ export class HaColorPicker extends LitElement {
         });
       });
 
-      const isSpecial =
-        currentValue === "none" ||
-        currentValue === "state" ||
-        THEME_COLORS.has(currentValue || "");
+      const knownIds = new Set(items.map((item) => item.id));
 
       const hasValue = currentValue && currentValue.length > 0;
 
-      if (hasValue && !isSpecial) {
+      if (hasValue && !knownIds.has(currentValue!)) {
         items.push({
           id: currentValue!,
           primary: currentValue!,
@@ -161,21 +194,27 @@ export class HaColorPicker extends LitElement {
     }
   );
 
+  private _renderItemIcon(item: PickerComboBoxItem) {
+    if (item.icon_path) {
+      return html`<ha-svg-icon
+        slot="start"
+        .path=${item.icon_path}
+      ></ha-svg-icon>`;
+    }
+    if (item.icon) {
+      return html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`;
+    }
+    const color =
+      this._extraOptionsColorMap(this.extraOptions)?.get(item.id) ?? item.id;
+    return html`<span slot="start">${this._renderColorCircle(color)}</span>`;
+  }
+
   private _rowRenderer: (
     item: PickerComboBoxItem,
     index?: number
   ) => ReturnType<typeof html> = (item) => html`
     <ha-combo-box-item type="button" compact>
-      ${item.id === "none"
-        ? html`<ha-svg-icon
-            slot="start"
-            .path=${mdiInvertColorsOff}
-          ></ha-svg-icon>`
-        : item.id === "state"
-          ? html`<ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>`
-          : html`<span slot="start">
-              ${this._renderColorCircle(item.id)}
-            </span>`}
+      ${this._renderItemIcon(item)}
       <span slot="headline">${item.primary}</span>
       ${item.secondary
         ? html`<span slot="supporting-text">${item.secondary}</span>`
@@ -201,13 +240,23 @@ export class HaColorPicker extends LitElement {
       `;
     }
 
+    const extraOption = this.extraOptions?.find((o) => o.value === value);
+    const label =
+      extraOption?.label ||
+      this.localize?.(
+        `ui.components.color-picker.colors.${value}` as LocalizeKeys
+      ) ||
+      value;
+
+    const color =
+      this._extraOptionsColorMap(this.extraOptions)?.get(value) ?? value;
+    const startSlot = extraOption?.icon
+      ? html`<ha-icon slot="start" .icon=${extraOption.icon}></ha-icon>`
+      : html`<span slot="start">${this._renderColorCircle(color)}</span>`;
+
     return html`
-      <span slot="start">${this._renderColorCircle(value)}</span>
-      <span slot="headline">
-        ${this.localize?.(
-          `ui.components.color-picker.colors.${value}` as LocalizeKeys
-        ) || value}
-      </span>
+      ${startSlot}
+      <span slot="headline">${label}</span>
     `;
   };
 

src/components/ha-config-entry-picker.ts

@@ -79,7 +79,6 @@ class HaConfigEntryPicker extends LitElement {
       <span slot="supporting-text">${item.secondary}</span>
       <ha-domain-icon
         slot="start"
-        .hass=${this.hass}
         .domain=${item.icon!}
         brand-fallback
       ></ha-domain-icon>
@@ -115,7 +114,6 @@ class HaConfigEntryPicker extends LitElement {
       slot="headline"
       >${item?.icon
         ? html`<ha-domain-icon
-            .hass=${this.hass}
             .domain=${item.icon!}
             brand-fallback
           ></ha-domain-icon>`

src/components/ha-control-select.ts

@@ -11,6 +11,7 @@ import "./ha-svg-icon";
 export interface ControlSelectOption {
   value: string;
   label?: string;
+  ariaLabel?: string;
   icon?: TemplateResult;
   path?: string;
 }
@@ -161,8 +162,8 @@ export class HaControlSelect extends LitElement {
         tabindex=${isSelected ? "0" : "-1"}
         .value=${option.value}
         aria-checked=${isSelected ? "true" : "false"}
-        aria-label=${ifDefined(option.label)}
-        title=${ifDefined(option.label)}
+        aria-label=${ifDefined(option.ariaLabel ?? option.label)}
+        title=${ifDefined(option.ariaLabel ?? option.label)}
         @click=${this._handleOptionClick}
         @focus=${this._handleOptionFocus}
         @mousedown=${this._handleOptionMouseDown}

src/components/ha-conversation-agent-picker.ts

@@ -43,30 +43,6 @@ export class HaConversationAgentPicker extends LitElement {
       return nothing;
     }
     let value = this.value;
-    if (!value && this.required) {
-      // Select Home Assistant conversation agent if it supports the language
-      for (const agent of this._agents) {
-        if (
-          agent.id === "conversation.home_assistant" &&
-          agent.supported_languages.includes(this.language!)
-        ) {
-          value = agent.id;
-          break;
-        }
-      }
-      if (!value) {
-        // Select the first agent that supports the language
-        for (const agent of this._agents) {
-          if (
-            agent.supported_languages === "*" &&
-            agent.supported_languages.includes(this.language!)
-          ) {
-            value = agent.id;
-            break;
-          }
-        }
-      }
-    }
     if (!value) {
       value = NONE;
     }
@@ -170,6 +146,39 @@ export class HaConversationAgentPicker extends LitElement {
 
     this._agents = agents;
 
+    if (!this.value && this.required) {
+      let defaultValue: string | undefined;
+      // Select Home Assistant conversation agent if it supports the language
+      for (const agent of this._agents) {
+        if (
+          agent.id === "conversation.home_assistant" &&
+          (!this.language ||
+            agent.supported_languages === "*" ||
+            agent.supported_languages.includes(this.language))
+        ) {
+          defaultValue = agent.id;
+          break;
+        }
+      }
+      if (!defaultValue) {
+        // Select the first agent that supports the language
+        for (const agent of this._agents) {
+          if (
+            agent.supported_languages === "*" ||
+            !this.language ||
+            agent.supported_languages.includes(this.language)
+          ) {
+            defaultValue = agent.id;
+            break;
+          }
+        }
+      }
+      if (defaultValue) {
+        this.value = defaultValue;
+        fireEvent(this, "value-changed", { value: this.value });
+      }
+    }
+
     if (!this.value) {
       return;
     }

src/components/ha-copy-textfield.ts

@@ -1,110 +0,0 @@
-import { mdiContentCopy, mdiEye, mdiEyeOff } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-
-import { copyToClipboard } from "../common/util/copy-clipboard";
-import type { HomeAssistant } from "../types";
-import { showToast } from "../util/toast";
-import "./ha-button";
-import "./ha-icon-button";
-import "./ha-svg-icon";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
-
-@customElement("ha-copy-textfield")
-export class HaCopyTextfield extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: "value" }) public value!: string;
-
-  @property({ attribute: "masked-value" }) public maskedValue?: string;
-
-  @property({ attribute: "label" }) public label?: string;
-
-  @state() private _showMasked = true;
-
-  public render() {
-    return html`
-      <div class="container">
-        <div class="textfield-container">
-          <ha-textfield
-            .value=${this._showMasked && this.maskedValue
-              ? this.maskedValue
-              : this.value}
-            readonly
-            .suffix=${this.maskedValue
-              ? html`<div style="width: 24px"></div>`
-              : nothing}
-            @click=${this._focusInput}
-          ></ha-textfield>
-          ${this.maskedValue
-            ? html`<ha-icon-button
-                class="toggle-unmasked"
-                .label=${this.hass.localize(
-                  `ui.common.${this._showMasked ? "show" : "hide"}`
-                )}
-                @click=${this._toggleMasked}
-                .path=${this._showMasked ? mdiEye : mdiEyeOff}
-              ></ha-icon-button>`
-            : nothing}
-        </div>
-        <ha-button @click=${this._copy} appearance="plain" size="small">
-          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-          ${this.label || this.hass.localize("ui.common.copy")}
-        </ha-button>
-      </div>
-    `;
-  }
-
-  private _focusInput(ev) {
-    const inputElement = ev.currentTarget as HaTextField;
-    inputElement.select();
-  }
-
-  private _toggleMasked(): void {
-    this._showMasked = !this._showMasked;
-  }
-
-  private async _copy(): Promise<void> {
-    await copyToClipboard(this.value);
-    showToast(this, {
-      message: this.hass.localize("ui.common.copied_clipboard"),
-    });
-  }
-
-  static styles = css`
-    .container {
-      display: flex;
-      align-items: center;
-      gap: var(--ha-space-2);
-      margin-top: 8px;
-    }
-
-    .textfield-container {
-      position: relative;
-      flex: 1;
-    }
-
-    .textfield-container ha-textfield {
-      display: block;
-    }
-
-    .toggle-unmasked {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      inset-inline-start: initial;
-      inset-inline-end: 8px;
-      --ha-icon-button-size: 40px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-      direction: var(--direction);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-copy-textfield": HaCopyTextfield;
-  }
-}

src/components/ha-date-input.ts

@@ -8,10 +8,11 @@ import { fireEvent } from "../common/dom/fire_event";
 import { TimeZone } from "../data/translation";
 import type { HomeAssistant } from "../types";
 import "./ha-svg-icon";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
+import "./input/ha-input";
+import type { HaInput } from "./input/ha-input";
 
-const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
+const loadDatePickerDialog = () =>
+  import("./date-picker/ha-dialog-date-picker");
 
 export interface DatePickerDialogParams {
   value?: string;
@@ -53,19 +54,17 @@ export class HaDateInput extends LitElement {
 
   @property({ attribute: "can-clear", type: Boolean }) public canClear = false;
 
-  @query("ha-textfield", true) private _input?: HaTextField;
+  @query("ha-input", true) private _input?: HaInput;
 
   public reportValidity(): boolean {
     return this._input?.reportValidity() ?? true;
   }
 
   render() {
-    return html`<ha-textfield
-      .label=${this.label}
-      .helper=${this.helper}
+    return html`<ha-input
+      .label=${this.label ?? ""}
+      .hint=${this.helper ?? ""}
       .disabled=${this.disabled}
-      iconTrailing
-      helperPersistent
       readonly
       @click=${this._openDialog}
       @keydown=${this._keyDown}
@@ -81,8 +80,8 @@ export class HaDateInput extends LitElement {
         : ""}
       .required=${this.required}
     >
-      <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
-    </ha-textfield>`;
+      <ha-svg-icon slot="end" .path=${mdiCalendar}></ha-svg-icon>
+    </ha-input>`;
   }
 
   private _openDialog() {
@@ -124,12 +123,12 @@ export class HaDateInput extends LitElement {
   }
 
   static styles = css`
+    :host {
+      min-width: 0px;
+    }
     ha-svg-icon {
       color: var(--secondary-text-color);
     }
-    ha-textfield {
-      display: block;
-    }
   `;
 }
 declare global {

src/components/ha-date-range-picker.ts

@@ -1,422 +0,0 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-
-import { mdiCalendar } from "@mdi/js";
-import { isThisYear } from "date-fns";
-import { TZDate } from "@date-fns/tz";
-import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { shiftDateRange } from "../common/datetime/calc_date";
-import type { DateRange } from "../common/datetime/calc_date_range";
-import { calcDateRange } from "../common/datetime/calc_date_range";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
-import {
-  formatShortDateTime,
-  formatShortDateTimeWithYear,
-} from "../common/datetime/format_date_time";
-import { useAmPm } from "../common/datetime/use_am_pm";
-import { fireEvent } from "../common/dom/fire_event";
-import { TimeZone } from "../data/translation";
-import type { HomeAssistant } from "../types";
-import "./date-range-picker";
-import "./ha-button";
-import "./ha-icon-button";
-import "./ha-icon-button-next";
-import "./ha-icon-button-prev";
-import "./ha-list";
-import "./ha-list-item";
-import "./ha-textarea";
-
-export type DateRangePickerRanges = Record<string, [Date, Date]>;
-
-declare global {
-  interface HASSDomEvents {
-    "preset-selected": { index: number };
-  }
-}
-
-const RANGE_KEYS: DateRange[] = ["today", "yesterday", "this_week"];
-const EXTENDED_RANGE_KEYS: DateRange[] = [
-  "this_month",
-  "this_year",
-  "now-1h",
-  "now-12h",
-  "now-24h",
-  "now-7d",
-  "now-30d",
-];
-
-@customElement("ha-date-range-picker")
-export class HaDateRangePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public startDate!: Date;
-
-  @property({ attribute: false }) public endDate!: Date;
-
-  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
-
-  @state() private _ranges?: DateRangePickerRanges;
-
-  @property({ attribute: "auto-apply", type: Boolean })
-  public autoApply = false;
-
-  @property({ attribute: "time-picker", type: Boolean })
-  public timePicker = false;
-
-  public open(): void {
-    this._openPicker();
-  }
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public minimal = false;
-
-  @state() private _hour24format = false;
-
-  @property({ attribute: "extended-presets", type: Boolean })
-  public extendedPresets = false;
-
-  @property({ attribute: "vertical-opening-direction" })
-  public verticalOpeningDirection?: "up" | "down";
-
-  @property({ attribute: false }) public openingDirection?:
-    | "right"
-    | "left"
-    | "center"
-    | "inline";
-
-  @state() private _calcedOpeningDirection?:
-    | "right"
-    | "left"
-    | "center"
-    | "inline";
-
-  @state() private _calcedVerticalOpeningDirection?: "up" | "down";
-
-  protected willUpdate(changedProps: PropertyValues) {
-    if (
-      (!this.hasUpdated && this.ranges === undefined) ||
-      (changedProps.has("hass") &&
-        this.hass?.localize !== changedProps.get("hass")?.localize)
-    ) {
-      const rangeKeys = this.extendedPresets
-        ? [...RANGE_KEYS, ...EXTENDED_RANGE_KEYS]
-        : RANGE_KEYS;
-
-      this._ranges = {};
-      rangeKeys.forEach((key) => {
-        this._ranges![
-          this.hass.localize(`ui.components.date-range-picker.ranges.${key}`)
-        ] = calcDateRange(this.hass, key);
-      });
-    }
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass.locale) {
-        this._hour24format = !useAmPm(this.hass.locale);
-      }
-    }
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <date-range-picker
-        ?disabled=${this.disabled}
-        ?auto-apply=${this.autoApply}
-        time-picker=${this.timePicker}
-        twentyfour-hours=${this._hour24format}
-        start-date=${this._formatDate(this.startDate)}
-        end-date=${this._formatDate(this.endDate)}
-        ?ranges=${this.ranges !== false}
-        opening-direction=${ifDefined(
-          this.openingDirection || this._calcedOpeningDirection
-        )}
-        opens-vertical=${ifDefined(
-          this.verticalOpeningDirection || this._calcedVerticalOpeningDirection
-        )}
-        first-day=${firstWeekdayIndex(this.hass.locale)}
-        language=${this.hass.locale.language}
-        @change=${this._handleChange}
-      >
-        <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
-          ${!this.minimal
-            ? html`<ha-textarea
-                  mobile-multiline
-                  .value=${(isThisYear(this.startDate)
-                    ? formatShortDateTime(
-                        this.startDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.startDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )) +
-                  (window.innerWidth >= 459 ? " - " : " - \n") +
-                  (isThisYear(this.endDate)
-                    ? formatShortDateTime(
-                        this.endDate,
-                        this.hass.locale,
-                        this.hass.config
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.endDate,
-                        this.hass.locale,
-                        this.hass.config
-                      ))}
-                  .label=${this.hass.localize(
-                    "ui.components.date-range-picker.start_date"
-                  ) +
-                  " - " +
-                  this.hass.localize(
-                    "ui.components.date-range-picker.end_date"
-                  )}
-                  .disabled=${this.disabled}
-                  @click=${this._handleInputClick}
-                  readonly
-                ></ha-textarea>
-                <ha-icon-button-prev
-                  .label=${this.hass.localize("ui.common.previous")}
-                  @click=${this._handlePrev}
-                >
-                </ha-icon-button-prev>
-                <ha-icon-button-next
-                  .label=${this.hass.localize("ui.common.next")}
-                  @click=${this._handleNext}
-                >
-                </ha-icon-button-next>`
-            : html`<ha-icon-button
-                .label=${this.hass.localize(
-                  "ui.components.date-range-picker.select_date_range"
-                )}
-                .path=${mdiCalendar}
-              ></ha-icon-button>`}
-        </div>
-        ${this.ranges !== false && (this.ranges || this._ranges)
-          ? html`<div slot="ranges" class="date-range-ranges">
-              <ha-list @action=${this._setDateRange} activatable>
-                ${Object.keys(this.ranges || this._ranges!).map(
-                  (name) => html`<ha-list-item>${name}</ha-list-item>`
-                )}
-              </ha-list>
-            </div>`
-          : nothing}
-        <div slot="footer" class="date-range-footer">
-          <ha-button appearance="plain" @click=${this._cancelDateRange}
-            >${this.hass.localize("ui.common.cancel")}</ha-button
-          >
-          <ha-button @click=${this._applyDateRange}
-            >${this.hass.localize(
-              "ui.components.date-range-picker.select"
-            )}</ha-button
-          >
-        </div>
-      </date-range-picker>
-    `;
-  }
-
-  private _handleNext(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(true);
-  }
-
-  private _handlePrev(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(false);
-  }
-
-  private _shift(forward: boolean) {
-    if (!this.startDate) return;
-    const { start, end } = shiftDateRange(
-      this.startDate,
-      this.endDate,
-      forward,
-      this.hass.locale,
-      this.hass.config
-    );
-    this.startDate = start;
-    this.endDate = end;
-    const dateRange = [start, end];
-    const dateRangePicker = this._dateRangePicker;
-    dateRangePicker.clickRange(dateRange);
-    dateRangePicker.clickedApply();
-  }
-
-  private _setDateRange(ev: CustomEvent<ActionDetail>) {
-    const dateRange = Object.values(this.ranges || this._ranges!)[
-      ev.detail.index
-    ];
-
-    fireEvent(this, "preset-selected", {
-      index: ev.detail.index,
-    });
-    const dateRangePicker = this._dateRangePicker;
-    dateRangePicker.clickRange(dateRange);
-    dateRangePicker.clickedApply();
-  }
-
-  private _cancelDateRange() {
-    this._dateRangePicker.clickCancel();
-  }
-
-  private _applyDateRange() {
-    let start = new Date(this._dateRangePicker.start);
-    let end = new Date(this._dateRangePicker.end);
-
-    if (this.timePicker) {
-      start.setSeconds(0);
-      start.setMilliseconds(0);
-      end.setSeconds(0);
-      end.setMilliseconds(0);
-
-      if (
-        end.getHours() === 0 &&
-        end.getMinutes() === 0 &&
-        start.getFullYear() === end.getFullYear() &&
-        start.getMonth() === end.getMonth() &&
-        start.getDate() === end.getDate()
-      ) {
-        end.setDate(end.getDate() + 1);
-      }
-    }
-
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      start = new Date(new TZDate(start, this.hass.config.time_zone).getTime());
-      end = new Date(new TZDate(end, this.hass.config.time_zone).getTime());
-    }
-
-    if (
-      start.getTime() !== this._dateRangePicker.start.getTime() ||
-      end.getTime() !== this._dateRangePicker.end.getTime()
-    ) {
-      this._dateRangePicker.clickRange([start, end]);
-    }
-    this._dateRangePicker.clickedApply();
-  }
-
-  private _formatDate(date: Date): string {
-    if (this.hass.locale.time_zone === TimeZone.server) {
-      return new TZDate(date, this.hass.config.time_zone).toISOString();
-    }
-    return date.toISOString();
-  }
-
-  private get _dateRangePicker() {
-    const dateRangePicker = this.shadowRoot!.querySelector(
-      "date-range-picker"
-    ) as any;
-    return dateRangePicker.vueComponent.$children[0];
-  }
-
-  private _openPicker() {
-    if (!this._dateRangePicker.open) {
-      const datePicker = this.shadowRoot!.querySelector(
-        "date-range-picker div.date-range-inputs"
-      ) as any;
-      datePicker?.click();
-    }
-  }
-
-  private _handleInputClick() {
-    // close the date picker, so it will open again on the click event
-    if (this._dateRangePicker.open) {
-      this._dateRangePicker.open = false;
-    }
-  }
-
-  private _handleClick() {
-    // calculate opening direction if not set
-    if (!this._dateRangePicker.open) {
-      if (!this.openingDirection) {
-        const datePickerPosition = this.getBoundingClientRect().x;
-        let opens: "right" | "left" | "center" | "inline";
-        if (datePickerPosition > (2 * window.innerWidth) / 3) {
-          opens = "left";
-        } else if (datePickerPosition < window.innerWidth / 3) {
-          opens = "right";
-        } else {
-          opens = "center";
-        }
-        this._calcedOpeningDirection = opens;
-      }
-      if (!this.verticalOpeningDirection) {
-        const rect = this.getBoundingClientRect();
-        this._calcedVerticalOpeningDirection =
-          rect.top > window.innerHeight / 2 ? "up" : "down";
-      }
-    }
-  }
-
-  private _handleChange(ev: CustomEvent) {
-    ev.stopPropagation();
-    const startDate = ev.detail.startDate;
-    const endDate = ev.detail.endDate;
-
-    fireEvent(this, "value-changed", {
-      value: { startDate, endDate },
-    });
-  }
-
-  static styles = css`
-    ha-icon-button {
-      direction: var(--direction);
-    }
-
-    .date-range-inputs {
-      display: flex;
-      align-items: center;
-      gap: var(--ha-space-2);
-    }
-
-    .date-range-ranges {
-      border-right: 1px solid var(--divider-color);
-    }
-
-    .date-range-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 8px;
-      border-top: 1px solid var(--divider-color);
-    }
-
-    ha-textarea {
-      display: inline-block;
-      width: 340px;
-    }
-    @media only screen and (max-width: 460px) {
-      ha-textarea {
-        width: 100%;
-      }
-    }
-    @media only screen and (max-width: 800px) {
-      .date-range-ranges {
-        border-right: none;
-        border-bottom: 1px solid var(--divider-color);
-      }
-    }
-
-    @media only screen and (max-height: 940px) and (max-width: 800px) {
-      .date-range-ranges {
-        overflow: auto;
-        max-height: calc(70vh - 330px);
-        min-height: 160px;
-      }
-
-      :host([header-position]) .date-range-ranges {
-        max-height: calc(90vh - 430px);
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-date-range-picker": HaDateRangePicker;
-  }
-}

src/components/ha-dialog-date-picker.ts

@@ -1,173 +0,0 @@
-import "app-datepicker";
-import { format } from "date-fns";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { nextRender } from "../common/util/render-status";
-import { haStyleDialog } from "../resources/styles";
-import type { HomeAssistant } from "../types";
-import type { DatePickerDialogParams } from "./ha-date-input";
-import "./ha-button";
-import "./ha-dialog-footer";
-import "./ha-dialog";
-
-@customElement("ha-dialog-date-picker")
-export class HaDialogDatePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public value?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property() public label?: string;
-
-  @state() private _params?: DatePickerDialogParams;
-
-  @state() private _open = false;
-
-  @state() private _value?: string;
-
-  public async showDialog(params: DatePickerDialogParams): Promise<void> {
-    // app-datepicker has a bug, that it removes its handlers when disconnected, but doesn't add them back when reconnected.
-    // So we need to wait for the next render to make sure the element is removed and re-created so the handlers are added.
-    await nextRender();
-    this._params = params;
-    this._value = params.value;
-    this._open = true;
-  }
-
-  public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  render() {
-    if (!this._params) {
-      return nothing;
-    }
-    return html`<ha-dialog
-      .hass=${this.hass}
-      .open=${this._open}
-      width="small"
-      without-header
-      @closed=${this._dialogClosed}
-    >
-      <app-datepicker
-        .value=${this._value}
-        .min=${this._params.min}
-        .max=${this._params.max}
-        .locale=${this._params.locale}
-        @datepicker-value-updated=${this._valueChanged}
-        .firstDayOfWeek=${this._params.firstWeekday}
-      ></app-datepicker>
-
-      <div class="bottom-actions">
-        ${this._params.canClear
-          ? html`<ha-button
-              slot="secondaryAction"
-              @click=${this._clear}
-              variant="danger"
-              appearance="plain"
-            >
-              ${this.hass.localize("ui.dialogs.date-picker.clear")}
-            </ha-button>`
-          : nothing}
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this._setToday}
-        >
-          ${this.hass.localize("ui.dialogs.date-picker.today")}
-        </ha-button>
-      </div>
-
-      <ha-dialog-footer slot="footer">
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button slot="primaryAction" @click=${this._setValue}>
-          ${this.hass.localize("ui.common.ok")}
-        </ha-button>
-      </ha-dialog-footer>
-    </ha-dialog>`;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    this._value = ev.detail.value;
-  }
-
-  private _clear() {
-    this._params?.onChange(undefined);
-    this.closeDialog();
-  }
-
-  private _setToday() {
-    const today = new Date();
-    this._value = format(today, "yyyy-MM-dd");
-  }
-
-  private _setValue() {
-    if (!this._value) {
-      // Date picker opens to today if value is undefined. If user click OK
-      // without changing the date, should return todays date, not undefined.
-      this._setToday();
-    }
-    this._params?.onChange(this._value!);
-    this.closeDialog();
-  }
-
-  static styles = [
-    haStyleDialog,
-    css`
-      ha-dialog {
-        --dialog-content-padding: 0;
-      }
-      .bottom-actions {
-        display: flex;
-        gap: var(--ha-space-4);
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        margin-bottom: var(--ha-space-1);
-      }
-      app-datepicker {
-        display: block;
-        margin-inline: auto;
-        --app-datepicker-accent-color: var(--primary-color);
-        --app-datepicker-bg-color: transparent;
-        --app-datepicker-color: var(--primary-text-color);
-        --app-datepicker-disabled-day-color: var(--disabled-text-color);
-        --app-datepicker-focused-day-color: var(--text-primary-color);
-        --app-datepicker-focused-year-bg-color: var(--primary-color);
-        --app-datepicker-selector-color: var(--secondary-text-color);
-        --app-datepicker-separator-color: var(--divider-color);
-        --app-datepicker-weekday-color: var(--secondary-text-color);
-      }
-      app-datepicker::part(calendar-day):focus {
-        outline: none;
-      }
-      app-datepicker::part(body) {
-        direction: ltr;
-      }
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        app-datepicker {
-          width: 100%;
-        }
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-date-picker": HaDialogDatePicker;
-  }
-}

src/components/ha-dialog.ts

@@ -14,10 +14,9 @@ import { ifDefined } from "lit/directives/if-defined";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { withViewTransition } from "../common/util/view-transition";
-import { authContext, localizeContext } from "../data/context";
+import { localizeContext } from "../data/context";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
-import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";
 
@@ -127,9 +126,10 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
   @consume({ context: localizeContext, subscribe: true })
   private localize!: ContextType<typeof localizeContext>;
 
-  @state()
-  @consume({ context: authContext, subscribe: true })
-  private auth?: ContextType<typeof authContext>;
+  // disabled till iOS app fix the "focus_element" implementation
+  // @state()
+  // @consume({ context: authContext, subscribe: true })
+  // private auth?: ContextType<typeof authContext>;
 
   @state()
   private _bodyScrolled = false;
@@ -221,21 +221,22 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (this.auth?.external && isIosApp(this.auth.external)) {
-        const element = this.querySelector("[autofocus]");
-        if (element !== null) {
-          if (!element.id) {
-            element.id = "ha-dialog-autofocus";
-          }
-          this.auth.external.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
+      // disabled till iOS app fix the "focus_element" implementation
+      // if (this.auth?.external && isIosApp(this.auth.external)) {
+      //   const element = this.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-dialog-autofocus";
+      //     }
+      //     this.auth.external.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
       (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
     });
   };

src/components/ha-domain-icon.ts

@@ -1,19 +1,23 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import {
+  authContext,
+  configContext,
+  connectionContext,
+  themesContext,
+} from "../data/context";
 import {
   DEFAULT_DOMAIN_ICON,
   domainIcon,
   FALLBACK_DOMAIN_ICONS,
 } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import "./ha-icon";
 
 @customElement("ha-domain-icon")
 export class HaDomainIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public domain?: string;
 
   @property({ attribute: false }) public deviceClass?: string;
@@ -25,6 +29,22 @@ export class HaDomainIcon extends LitElement {
   @property({ attribute: "brand-fallback", type: Boolean })
   public brandFallback?: boolean;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _hassConfig?: ContextType<typeof configContext>;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
+
+  @state()
+  @consume({ context: themesContext, subscribe: true })
+  private _themes?: ContextType<typeof themesContext>;
+
+  @state()
+  @consume({ context: authContext, subscribe: true })
+  private _auth?: ContextType<typeof authContext>;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -34,12 +54,13 @@ export class HaDomainIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._hassConfig) {
       return this._renderFallback();
     }
 
     const icon = domainIcon(
-      this.hass,
+      this._connection,
+      this._hassConfig,
       this.domain,
       this.deviceClass,
       this.state
@@ -65,9 +86,9 @@ export class HaDomainIcon extends LitElement {
         {
           domain: this.domain!,
           type: "icon",
-          darkOptimized: this.hass.themes?.darkMode,
+          darkOptimized: this._themes?.darkMode,
         },
-        this.hass.auth.data.hassUrl
+        this._auth?.data.hassUrl
       );
       return html`
         <img

src/components/ha-dropdown.ts

@@ -100,6 +100,9 @@ export class HaDropdown extends Dropdown {
         #menu {
           padding: var(--ha-space-1);
         }
+        wa-popup::part(popup) {
+          z-index: 200;
+        }
       `,
     ];
   }

src/components/ha-filter-devices.ts

@@ -15,7 +15,8 @@ import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-list";
-import "./search-input-outlined";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
@@ -67,12 +68,12 @@ export class HaFilterDevices extends LitElement {
             : nothing}
         </div>
         ${this._shouldRender
-          ? html`<search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
+          ? html`<ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
               >
-              </search-input-outlined>
+              </ha-input-search>
               <ha-list class="ha-scrollbar" multi>
                 <lit-virtualizer
                   .items=${this._devices(
@@ -100,7 +101,11 @@ export class HaFilterDevices extends LitElement {
           .value=${device.id}
           .selected=${this.value?.includes(device.id) ?? false}
         >
-          ${computeDeviceNameDisplay(device, this.hass)}
+          ${computeDeviceNameDisplay(
+            device,
+            this.hass.localize,
+            this.hass.states
+          )}
         </ha-check-list-item>`;
 
   private _handleItemClick(ev) {
@@ -138,8 +143,9 @@ export class HaFilterDevices extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
   }
 
   private _devices = memoizeOne(
@@ -149,14 +155,18 @@ export class HaFilterDevices extends LitElement {
         .filter(
           (device) =>
             !filter ||
-            computeDeviceNameDisplay(device, this.hass)
+            computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
               .toLowerCase()
               .includes(filter)
         )
         .sort((a, b) =>
           stringCompare(
-            computeDeviceNameDisplay(a, this.hass),
-            computeDeviceNameDisplay(b, this.hass),
+            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
             this.hass.locale.language
           )
         );
@@ -249,7 +259,7 @@ export class HaFilterDevices extends LitElement {
         ha-check-list-item {
           width: 100%;
         }
-        search-input-outlined {
+        ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;
         }

src/components/ha-filter-domains.ts

@@ -14,7 +14,8 @@ import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
 import "./ha-list";
-import "./search-input-outlined";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-domains")
 export class HaFilterDomains extends LitElement {
@@ -49,12 +50,12 @@ export class HaFilterDomains extends LitElement {
             : nothing}
         </div>
         ${this._shouldRender
-          ? html`<search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
+          ? html`<ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
               >
-              </search-input-outlined>
+              </ha-input-search>
               <ha-list
                 class="ha-scrollbar"
                 @click=${this._handleItemClick}
@@ -71,7 +72,6 @@ export class HaFilterDomains extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
-                        .hass=${this.hass}
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>
@@ -155,8 +155,9 @@ export class HaFilterDomains extends LitElement {
     });
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
   }
 
   static get styles(): CSSResultGroup {
@@ -201,7 +202,7 @@ export class HaFilterDomains extends LitElement {
           padding: 0px 2px;
           color: var(--text-primary-color);
         }
-        search-input-outlined {
+        ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;
         }

src/components/ha-filter-entities.ts

@@ -17,7 +17,8 @@ import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-list";
 import "./ha-state-icon";
-import "./search-input-outlined";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-entities")
 export class HaFilterEntities extends LitElement {
@@ -70,12 +71,12 @@ export class HaFilterEntities extends LitElement {
         </div>
         ${this._shouldRender
           ? html`
-              <search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
               >
-              </search-input-outlined>
+              </ha-input-search>
               <ha-list class="ha-scrollbar" multi>
                 <lit-virtualizer
                   .items=${this._entities(
@@ -149,8 +150,9 @@ export class HaFilterEntities extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
   }
 
   private _entities = memoizeOne(
@@ -265,7 +267,7 @@ export class HaFilterEntities extends LitElement {
           --mdc-list-item-graphic-margin: 16px;
           width: 100%;
         }
-        search-input-outlined {
+        ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;
         }

src/components/ha-filter-integrations.ts

@@ -15,7 +15,8 @@ import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
 import "./ha-list";
-import "./search-input-outlined";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
@@ -52,12 +53,12 @@ export class HaFilterIntegrations extends LitElement {
             : nothing}
         </div>
         ${this._manifests && this._shouldRender
-          ? html`<search-input-outlined
-                .hass=${this.hass}
-                .filter=${this._filter}
-                @value-changed=${this._handleSearchChange}
+          ? html`<ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
               >
-              </search-input-outlined>
+              </ha-input-search>
               <ha-list
                 class="ha-scrollbar"
                 @click=${this._handleItemClick}
@@ -81,7 +82,6 @@ export class HaFilterIntegrations extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
-                        .hass=${this.hass}
                         .domain=${integration.domain}
                         brand-fallback
                       ></ha-domain-icon>
@@ -175,8 +175,9 @@ export class HaFilterIntegrations extends LitElement {
     });
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value.toLowerCase();
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
   }
 
   static get styles(): CSSResultGroup {
@@ -221,7 +222,7 @@ export class HaFilterIntegrations extends LitElement {
           padding: 0px 2px;
           color: var(--text-primary-color);
         }
-        search-input-outlined {
+        ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;
         }