Replace search-input-outlined with ha-input-search in network visualization pages

.github/dependabot.yml

@@ -5,9 +5,6 @@ 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,9 +8,6 @@ on:
     branches:
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -27,7 +24,6 @@ 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
@@ -63,7 +59,6 @@ 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,9 +18,6 @@ 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
@@ -28,8 +25,6 @@ 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:
@@ -64,8 +59,6 @@ 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:
@@ -84,8 +77,6 @@ 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,10 +7,6 @@ on:
     # The branches below must be a subset of the branches above
     branches: [dev]
 
-permissions:
-  contents: read
-  security-events: write
-
 jobs:
   analyze:
     name: Analyze
@@ -32,7 +28,6 @@ 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.
@@ -41,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/init@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.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@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/autobuild@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/analyze@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1

.github/workflows/demo_deployment.yaml

@@ -9,9 +9,6 @@ on:
       - dev
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -28,7 +25,6 @@ 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
@@ -64,7 +60,6 @@ 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,9 +5,6 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -20,8 +17,6 @@ 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,9 +10,6 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -25,8 +22,6 @@ 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 # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
+on: pull_request_target
 
 jobs:
   triage:

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

@@ -21,8 +21,6 @@ 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,39 +1,25 @@
 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-frontend-modern:
-    name: Upload stats (frontend/modern)
+  upload:
+    name: Upload stats
     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.RELATIVE_CI_KEY_frontend_modern }}
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}
-          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
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}

.github/workflows/release.yaml

@@ -27,8 +27,6 @@ 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
@@ -36,12 +34,13 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@d56d093b9ab8d2105bc0cb6ee9bcc0ef4ec8b96d # master
+        uses: home-assistant/actions/helpers/verify-version@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
@@ -63,10 +62,11 @@ jobs:
           skip-existing: true
 
       - name: Upload release assets
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
+        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
 
   wheels-init:
     name: Init wheels build
@@ -74,17 +74,15 @@ 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@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@2025.12.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -101,12 +99,11 @@ 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
@@ -116,11 +113,8 @@ jobs:
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder
-        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 .
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        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
+        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

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

.github/workflows/translations.yaml

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

build-scripts/gulp/download-translations.js

@@ -99,44 +99,6 @@ 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 {
@@ -156,60 +118,55 @@ gulp.task("fetch-lokalise", async function () {
   ]);
 
   await Promise.all(
-    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) {
+    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();
+          }
           throw new Error(response.statusText);
-        }
-
-        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;
-      }
-    })
+        })
+        .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;
+        })
+    )
   );
 });
 

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/input/ha-input";
+import "../../../../src/components/ha-textfield";
 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-input
+            <ha-textfield
               label="Home Assistant URL"
               placeholder="https://abcdefghijklmnop.ui.nabu.casa"
               @keydown=${this._handleInputKeyDown}
-            ></ha-input>
+            ></ha-textfield>
             ${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-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
       flex: 1;
     }
 
-    ha-input {
+    ha-textfield {
       width: 100%;
     }
   `;

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

@@ -1,4 +1,3 @@
-/// <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-input.markdown

@@ -1,82 +0,0 @@
----
-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

@@ -1,232 +0,0 @@
-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, nothing } from "lit";
+import { css, html, LitElement } 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,11 +692,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    ${value?.description
-                      ? html`<span slot="description"
-                          >${value?.description}</span
-                        >`
-                      : nothing}
+                    <span slot="description">${value?.description}</span>
                     <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/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
+- Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" 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,21 +134,6 @@ 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,6 +422,7 @@ 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

@@ -30,7 +30,7 @@
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
-    "@codemirror/language": "6.12.3",
+    "@codemirror/language": "6.12.2",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
@@ -82,7 +82,7 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.20",
+    "@swc/helpers": "0.5.19",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
@@ -129,6 +129,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
+    "ua-parser-js": "2.0.9",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.4.0",
     "workbox-core": "7.4.0",
@@ -149,8 +150,8 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.6",
-    "@rspack/core": "1.7.10",
+    "@rsdoctor/rspack-plugin": "1.5.5",
+    "@rspack/core": "1.7.9",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -168,8 +169,9 @@
     "@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.2",
+    "@vitest/coverage-v8": "4.1.0",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -204,13 +206,13 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
     "sinon": "21.0.3",
-    "tar": "7.5.13",
+    "tar": "7.5.12",
     "terser-webpack-plugin": "5.4.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "6.0.2",
-    "typescript-eslint": "8.57.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.2",
+    "vitest": "4.1.0",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.4.0#~/.yarn/patches/workbox-build-npm-7.4.0-c84561662c.patch"

pyproject.toml

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

src/cast/cast_manager.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-/// <reference types="chromecast-caf-sender" />
 
 import type { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";

src/common/color/compute-color.ts

@@ -32,12 +32,6 @@ 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`;
@@ -45,12 +39,6 @@ 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) {
@@ -59,22 +47,6 @@ 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,6 +1,5 @@
 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);
@@ -131,43 +130,26 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
   hsv2rgb([hs[0], hs[1], 255]);
 
-/**
- * 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;
+export function theme2hex(themeColor: string): string {
+  if (themeColor.startsWith("#")) {
+    if (themeColor.length === 4 || themeColor.length === 5) {
+      const c = themeColor;
       // 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 (color.length === 9) {
+    if (themeColor.length === 9) {
       // Ignore alpha channel.
-      return color.substring(0, 7);
+      return themeColor.substring(0, 7);
     }
-    return color;
+    return themeColor;
   }
 
-  // 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 rgbFromColorName = colors[themeColor.toLowerCase()];
+  if (rgbFromColorName) {
+    return rgb2hex(rgbFromColorName);
   }
 
-  // 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+)/);
+  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
   if (rgbMatch) {
     const [, r, g, b] = rgbMatch.map(Number);
     return rgb2hex([r, g, b]);
@@ -176,5 +158,5 @@ export function theme2hex(color: 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 color;
+  return themeColor;
 }

src/common/color/rgb.ts

@@ -1,5 +1,4 @@
 import { wcagLuminance, wcagContrast } from "culori";
-import { theme2hex } from "./convert-color";
 
 /**
  * Calculates the luminosity of an RGB color.
@@ -49,13 +48,3 @@ 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,9 +1,6 @@
 import { listenMediaQuery } from "../dom/media_query";
 import type { HomeAssistant } from "../../types";
-import type {
-  Condition,
-  ConditionContext,
-} from "../../panels/lovelace/common/validate-condition";
+import type { Condition } from "../../panels/lovelace/common/validate-condition";
 import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
 import { extractMediaQueries, extractTimeConditions } from "./extract";
 import { calculateNextTimeUpdate } from "./time-calculator";
@@ -22,8 +19,7 @@ export function setupMediaQueryListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void,
-  getContext?: () => ConditionContext
+  onUpdate: (conditionsMet: boolean) => void
 ): void {
   const mediaQueries = extractMediaQueries(conditions);
 
@@ -40,8 +36,7 @@ export function setupMediaQueryListeners(
       if (hasOnlyMediaQuery) {
         onUpdate(matches);
       } else {
-        const context = getContext?.() ?? {};
-        const conditionsMet = checkConditionsMet(conditions, hass, context);
+        const conditionsMet = checkConditionsMet(conditions, hass);
         onUpdate(conditionsMet);
       }
     });
@@ -56,8 +51,7 @@ export function setupTimeListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void,
-  getContext?: () => ConditionContext
+  onUpdate: (conditionsMet: boolean) => void
 ): void {
   const timeConditions = extractTimeConditions(conditions);
 
@@ -76,8 +70,7 @@ export function setupTimeListeners(
 
       timeoutId = setTimeout(() => {
         if (delay <= MAX_TIMEOUT_DELAY) {
-          const context = getContext?.() ?? {};
-          const conditionsMet = checkConditionsMet(conditions, hass, context);
+          const conditionsMet = checkConditionsMet(conditions, hass);
           onUpdate(conditionsMet);
         }
         scheduleUpdate();
@@ -94,17 +87,3 @@ 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.config, integration)
+    isComponentLoaded(hass, integration)
   );
 
 export const isNotLoadedIntegration = (
@@ -23,7 +23,7 @@ export const isNotLoadedIntegration = (
 ) =>
   !page.not_component ||
   !ensureArray(page.not_component).some((integration) =>
-    isComponentLoaded(hass.config, integration)
+    isComponentLoaded(hass, 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 = (
-  hassConfig: HomeAssistant["config"],
+  hass: HomeAssistant,
   component: string
-): boolean => hassConfig && hassConfig.components.includes(component);
+): boolean => hass && hass.config.components.includes(component);

src/common/entity/compute_device_name.ts

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

src/common/entity/compute_entity_name.ts

@@ -4,14 +4,11 @@ import type {
   EntityRegistryEntry,
 } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import { computeDeviceName } from "./compute_device_name";
 import { computeStateName } from "./compute_state_name";
-import { stripPrefixFromEntityName } from "./strip_prefix_from_entity_name";
 
 export const computeEntityName = (
   stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"]
+  entities: HomeAssistant["entities"]
 ): string | undefined => {
   const entry = entities[stateObj.entity_id] as
     | EntityRegistryDisplayEntry
@@ -21,49 +18,22 @@ export const computeEntityName = (
     // Fall back to state name if not in the entity registry (friendly name)
     return computeStateName(stateObj);
   }
-  return computeEntityEntryName(entry, devices);
+  return computeEntityEntryName(entry);
 };
 
 export const computeEntityEntryName = (
-  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
-  devices: HomeAssistant["devices"],
-  fallbackStateObj?: HassEntity
+  entry: EntityRegistryDisplayEntry | EntityRegistryEntry
 ): string | undefined => {
-  const name =
-    entry.name ||
-    ("original_name" in entry && entry.original_name != null
-      ? String(entry.original_name)
-      : undefined);
-
-  const device = entry.device_id ? devices[entry.device_id] : undefined;
-
-  if (!device) {
-    if (name) {
-      return name;
-    }
-    if (fallbackStateObj) {
-      return computeStateName(fallbackStateObj);
-    }
-    return undefined;
+  if (entry.name != null) {
+    return entry.name;
   }
-
-  const deviceName = computeDeviceName(device);
-
-  // If the device name is the same as the entity name, consider empty entity name
-  if (deviceName === name) {
-    return undefined;
+  if ("original_name" in entry && entry.original_name != null) {
+    return String(entry.original_name);
   }
-
-  // Remove the device name from the entity name if it starts with it
-  if (deviceName && name) {
-    return stripPrefixFromEntityName(name, deviceName) || name;
-  }
-
-  return name;
+  return undefined;
 };
 
 export const entityUseDeviceName = (
   stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"]
-): boolean => !computeEntityName(stateObj, entities, devices);
+  entities: HomeAssistant["entities"]
+): boolean => !computeEntityName(stateObj, entities);

src/common/entity/compute_entity_name_display.ts

@@ -5,7 +5,6 @@ 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 = " ";
@@ -30,23 +29,14 @@ export interface EntityNameOptions {
 
 export const computeEntityNameDisplay = (
   stateObj: HassEntity,
-  name: string | EntityNameItem | EntityNameItem[] | undefined,
+  name: EntityNameItem | EntityNameItem[] | undefined,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],
   floors: HomeAssistant["floors"],
   options?: EntityNameOptions
 ) => {
-  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);
+  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
 
   const separator = options?.separator ?? DEFAULT_SEPARATOR;
 
@@ -55,7 +45,7 @@ export const computeEntityNameDisplay = (
     return items.map((item) => item.text).join(separator);
   }
 
-  const useDeviceName = entityUseDeviceName(stateObj, entities, devices);
+  const useDeviceName = entityUseDeviceName(stateObj, entities);
 
   // If entity uses device name, and device is not already included, replace it with device name
   if (useDeviceName) {
@@ -101,7 +91,7 @@ export const computeEntityNameList = (
   const names = name.map((item) => {
     switch (item.type) {
       case "entity":
-        return computeEntityName(stateObj, entities, devices);
+        return computeEntityName(stateObj, entities);
       case "device":
         return device ? computeDeviceName(device) : undefined;
       case "area":

src/common/entity/compute_state_display.ts

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

src/common/entity/context/get_device_context.ts

@@ -1,11 +1,26 @@
 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";
 
-export const getDeviceArea = (
+interface DeviceContext {
+  device: DeviceRegistryEntry;
+  area: AreaRegistryEntry | null;
+  floor: FloorRegistryEntry | null;
+}
+
+export const getDeviceContext = (
   device: DeviceRegistryEntry,
-  areas: HomeAssistant["areas"]
-): AreaRegistryEntry | undefined => {
+  hass: HomeAssistant
+): DeviceContext => {
   const areaId = device.area_id;
-  return areaId ? areas[areaId] : undefined;
+  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,
+  };
 };

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.config, domain) &&
+      isComponentLoaded(hass, 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.config, domain)) {
+    if (isComponentLoaded(hass, domain)) {
       if (
         entityRegEntry &&
         fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)

src/common/entity/get_states.ts

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

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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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.config, "zwave_js") ||
+      !isComponentLoaded(hass, "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.config, "zha") ||
+      !isComponentLoaded(hass, "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.config, domain) ||
+      !isComponentLoaded(hass, 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,6 +71,13 @@ 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/components/chart/axis-label.ts

@@ -5,41 +5,12 @@ 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

@@ -91,10 +91,6 @@ export class HaChartBase extends LitElement {
 
   private _lastTapTime?: number;
 
-  private _longPressTimer?: ReturnType<typeof setTimeout>;
-
-  private _longPressTriggered = false;
-
   private _shouldResizeChart = false;
 
   private _resizeAnimationDuration?: number;
@@ -132,7 +128,6 @@ export class HaChartBase extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._legendPointerCancel();
     this._pendingSetup = false;
     while (this._listeners.length) {
       this._listeners.pop()!();
@@ -307,31 +302,22 @@ export class HaChartBase extends LitElement {
     `;
   }
 
-  private _getLegendItems() {
+  private _renderLegend() {
     if (!this.options?.legend || !this.data) {
-      return undefined;
+      return nothing;
     }
     const legend = ensureArray(this.options.legend).find(
       (l) => l.show && l.type === "custom"
     ) as CustomLegendOption | undefined;
     if (!legend) {
-      return undefined;
+      return nothing;
     }
     const datasets = ensureArray(this.data);
-    return (
+    const items =
       legend.data ||
       datasets
         .filter((d) => (d.data as any[])?.length && (d.id || 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!);
+        .map((d) => ({ id: d.id, name: d.name }));
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -376,11 +362,6 @@ 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}
           >
@@ -606,7 +587,10 @@ export class HaChartBase extends LitElement {
       id: "dataZoom",
       type: "inside",
       orient: "horizontal",
-      filterMode: this._getDataZoomFilterMode() as any,
+      // "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.
+      filterMode: "boundaryFilter" as any,
       xAxisIndex: 0,
       moveOnMouseMove: !this._isTouchDevice || this._isZoomed,
       preventDefaultMouseMove: !this._isTouchDevice || this._isZoomed,
@@ -614,23 +598,6 @@ 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) {
@@ -665,7 +632,7 @@ export class HaChartBase extends LitElement {
             hideOverlap: true,
             ...axis.axisLabel,
           },
-          minInterval: axis.minInterval ?? minInterval,
+          minInterval,
         } as XAXisOption;
       });
     }
@@ -1055,52 +1022,11 @@ export class HaChartBase extends LitElement {
     fireEvent(this, "chart-zoom", { start, end });
   }
 
-  // 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) {
+  private _legendClick(ev: any) {
     if (!this.chart) {
       return;
     }
-    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;
-    }
+    const id = ev.currentTarget?.id;
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1115,60 +1041,6 @@ 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(() => {

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

@@ -65,8 +65,6 @@ 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");
 
@@ -96,7 +94,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
 
   @state() private _reducedMotion = false;
 
-  @state() private _physicsEnabled?: boolean;
+  @state() private _physicsEnabled = true;
 
   @state() private _showLabels = true;
 
@@ -124,14 +122,6 @@ 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;
@@ -148,7 +138,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
       .hass=${this.hass}
       .data=${this._getSeries(
         this.data,
-        this._physicsEnabled ?? false,
+        this._physicsEnabled,
         this._reducedMotion,
         this._showLabels,
         isMobile,

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

@@ -28,13 +28,6 @@ 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;
@@ -436,18 +429,23 @@ export class StateHistoryChartLine extends LitElement {
           (entityState) => entityState.attributes?.hvac_action
         );
 
-        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));
+        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);
         // We differentiate between thermostats that have a target temperature
         // range versus ones that have just a target temperature
 
@@ -468,19 +466,33 @@ export class StateHistoryChartLine extends LitElement {
                 "component.climate.entity_component._.state_attributes.current_temperature.name"
               )
         );
-        for (const { action, cssVar } of activeModes) {
+        if (hasHeat) {
           addDataSet(
-            `${states.entity_id}-${action}`,
+            states.entity_id + "-heating",
             this.showNames
-              ? this.hass.localize(`ui.card.climate.${action}`, {
-                  name: name,
-                })
+              ? this.hass.localize("ui.card.climate.heating", { name: name })
               : this.hass.localize(
-                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
                 ),
-            computedStyles.getPropertyValue(cssVar),
+            computedStyles.getPropertyValue("--state-climate-heat-color"),
             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) {
@@ -528,8 +540,11 @@ export class StateHistoryChartLine extends LitElement {
             entityState.attributes.current_temperature
           );
           const series = [curTemp];
-          for (const { isActive } of activeModes) {
-            series.push(isActive(entityState) ? curTemp : null);
+          if (hasHeat) {
+            series.push(isHeating(entityState) ? curTemp : null);
+          }
+          if (hasCool) {
+            series.push(isCooling(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.config, "history")) {
+    if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;

src/components/chart/statistics-chart.ts

@@ -32,7 +32,6 @@ import {
 } 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";
 
@@ -149,7 +148,7 @@ export class StatisticsChart extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!isComponentLoaded(this.hass.config, "history")) {
+    if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -294,22 +293,6 @@ 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",

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

@@ -2,6 +2,7 @@ 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";
@@ -52,15 +53,16 @@ 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
@@ -100,6 +102,10 @@ 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,4 +1,3 @@
-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";
@@ -22,10 +21,9 @@ 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";
@@ -106,13 +104,9 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private _localize?: ContextType<typeof localizeContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state()
-  @consume({ context: localeContext, subscribe: true })
-  private _locale?: ContextType<typeof localeContext>;
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -384,6 +378,8 @@ 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) =>
@@ -507,8 +503,7 @@ 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 ||
-                      this._localize?.("ui.components.data-table.no-data") ||
-                      "No data"}
+                      localize("ui.components.data-table.no-data")}
                     </div>
                   </div>
                 </div>
@@ -520,8 +515,7 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                   .items=${this._groupData(
                     this._filteredData,
-                    this._localize,
-                    this._locale,
+                    localize,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -691,7 +685,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this._locale?.language
+            this.hass.locale.language
           )
         : filteredData;
 
@@ -717,8 +711,7 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc | undefined,
-      locale: FrontendLocaleData | undefined,
+      localize: LocalizeFunc,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -742,7 +735,11 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(a, b, locale?.language);
+                const comparison = stringCompare(
+                  a,
+                  b,
+                  this.hass.locale.language
+                );
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -763,7 +760,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                locale?.language
+                this.hass.locale.language
               );
             })
             .reduce(
@@ -790,15 +787,14 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${localize?.(
+                  .label=${this.hass.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") ||
-                    "Ungrouped"
+                  ? localize("ui.components.data-table.ungrouped")
                   : groupName || ""}
               </div>`,
             });
@@ -867,8 +863,7 @@ export class HaDataTable extends LitElement {
 
     const groupedData = this._groupData(
       this._filteredData,
-      this._localize,
-      this._locale,
+      this.localizeFunc || this.hass.localize,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,

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

@@ -4,7 +4,7 @@ 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 { customElement, property, state } from "lit/decorators";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import {
   formatCallyDateRange,
@@ -19,12 +19,7 @@ import {
   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";
@@ -32,12 +27,11 @@ 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) {
+export class DateRangePicker extends LitElement {
   @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
 
   @property({ attribute: false }) public startDate?: Date;
@@ -75,8 +69,6 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
     to: { hours: 23, minutes: 59 },
   };
 
-  @queryAll("ha-time-input") private _timeInputs?: NodeListOf<HaTimeInput>;
-
   public connectedCallback() {
     super.connectedCallback();
 
@@ -108,38 +100,16 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
     }
   }
 
-  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>`
+          ? html`<div class="date-range-ranges">
+              <ha-list @action=${this._setDateRange} activatable>
+                ${Object.keys(this.ranges).map(
+                  (name) => html`<ha-list-item>${name}</ha-list-item>`
+                )}
+              </ha-list>
+            </div>`
           : nothing}
         <div class="range">
           <calendar-range
@@ -183,7 +153,6 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
                     )}
                     id="from"
                     placeholder-labels
-                    auto-validate
                   ></ha-time-input>
                   <ha-time-input
                     .value=${`${this._timeValue.to.hours}:${this._timeValue.to.minutes}`}
@@ -194,7 +163,6 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
                     )}
                     id="to"
                     placeholder-labels
-                    auto-validate
                   ></ha-time-input>
                 </div>
               `
@@ -232,14 +200,6 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
     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);
@@ -297,38 +257,31 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
     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) {
+    this._dateValue = formatCallyDateRange(
+      dateRange[0],
+      dateRange[1],
+      this.locale,
+      this.hassConfig
+    );
     fireEvent(this, "value-changed", {
       value: {
-        startDate: range[0],
-        endDate: range[1],
+        startDate: dateRange[0],
+        endDate: dateRange[1],
       },
     });
     fireEvent(this, "preset-selected", {
-      index,
+      index: ev.detail.index,
     });
   }
 
   private _handleChangeTime(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const time = ev.detail.value;
-    const target = ev.target as HaBaseTimeInput;
-    const type = target.id;
+    const type = (ev.target as HaBaseTimeInput).id;
     if (time) {
       if (!this._timeValue) {
         this._timeValue = {
@@ -345,48 +298,20 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
   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%;
+        border-right: 1px solid var(--divider-color);
       }
-
       .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 {
@@ -401,6 +326,12 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
         padding: var(--ha-space-2);
         border-top: 1px solid var(--divider-color);
       }
+
+      @media only screen and (max-width: 500px) {
+        .date-range-ranges {
+          max-width: 30%;
+        }
+      }
     `,
   ];
 }

src/components/date-picker/styles.ts

@@ -80,6 +80,33 @@ export const datePickerStyles = css`
     text-align: center;
     margin-left: 48px;
   }
+
+  @media only screen and (max-width: 500px) {
+    calendar-month {
+      min-height: calc(34px * 7);
+    }
+    calendar-month::part(day) {
+      font-size: var(--ha-font-size-s);
+    }
+    calendar-month::part(button) {
+      height: 26px;
+      width: 26px;
+    }
+    calendar-month::part(range-inner),
+    calendar-month::part(range-start),
+    calendar-month::part(range-end),
+    calendar-month::part(selected),
+    calendar-month::part(selected):hover {
+      height: 34px;
+      width: 34px;
+    }
+    .heading {
+      font-size: var(--ha-font-size-s);
+    }
+    .month-year {
+      margin-left: 40px;
+    }
+  }
 `;
 
 export const dateRangePickerStyles = css`

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 { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { getDeviceContext } 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 = getDeviceArea(device, this.hass.areas);
+      const { area } = getDeviceContext(device, this.hass);
 
       const deviceName = device ? computeDeviceName(device) : undefined;
       const areaName = area ? computeAreaName(area) : undefined;

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

@@ -1,13 +1,15 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { PropertyValues } from "lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
+import {
+  DEFAULT_ENTITY_NAME,
+  type EntityNameItem,
+} from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import type { EntityNameType } from "../../common/translations/entity-state";
 import type { LocalizeKeys } from "../../common/translations/localize";
@@ -15,14 +17,12 @@ 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>
@@ -73,291 +73,10 @@ export class HaEntityNamePicker extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @state() private _mode?: "composed" | "custom";
-
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
+  @query("ha-generic-picker", true) 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) {
@@ -442,6 +161,157 @@ 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) : [...DEFAULT_ENTITY_NAME];
+  });
+
+  private _toValue = memoizeOne(
+    (items: EntityNameItem[]): typeof this.value => {
+      if (items.length === 0) {
+        return "";
+      }
+      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];
@@ -492,6 +362,58 @@ 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;
@@ -499,42 +421,13 @@ 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);
     }
-    .field:after {
+    .container:after {
       display: block;
       content: "";
       position: absolute;
@@ -552,25 +445,30 @@ export class HaEntityNamePicker extends LitElement {
         height 180ms ease-in-out,
         background-color 180ms ease-in-out;
     }
-    :host([disabled]) .field:after {
+    :host([disabled]) .container:after {
       background-color: var(
         --mdc-text-field-disabled-line-color,
         rgba(0, 0, 0, 0.42)
       );
     }
-    .field:focus-within:after {
+    .container:focus-within:after {
       height: 2px;
       background-color: var(--mdc-theme-primary);
     }
 
-    ha-chip-set {
-      padding: var(--ha-space-3);
+    label {
+      display: block;
+      margin: 0 0 var(--ha-space-2);
     }
 
     .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,10 +1,11 @@
 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 "../ha-tooltip";
 import "./state-badge";
+import "../ha-tooltip";
 
 @customElement("state-info")
 class StateInfo extends LitElement {
@@ -21,7 +22,7 @@ class StateInfo extends LitElement {
       return nothing;
     }
 
-    const name = this.hass.formatEntityName(this.stateObj, { type: "entity" });
+    const name = computeStateName(this.stateObj);
 
     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.config, "hassio")) {
+      if (isComponentLoaded(this.hass, "hassio")) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)

src/components/ha-alert.ts

@@ -8,7 +8,6 @@ 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";
@@ -39,8 +38,6 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
   @property({ type: Boolean }) public narrow = false;
 
   public render() {
@@ -68,7 +65,7 @@ class HaAlert extends LitElement {
               ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismissClicked}
-                    .label=${this.localize!("ui.common.dismiss_alert")}
+                    label="Dismiss alert"
                     .path=${mdiClose}
                   ></ha-icon-button>`
                 : nothing}

src/components/ha-aliases-editor.ts

@@ -21,6 +21,7 @@ class AliasesEditor extends LitElement {
 
     return html`
       <ha-input-multi
+        .hass=${this.hass}
         .value=${this.aliases}
         .disabled=${this.disabled}
         .sortable=${this.sortable}

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

@@ -267,6 +267,7 @@ 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-attribute-value.ts

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

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

@@ -137,7 +137,7 @@ export class HaBaseTimeInput extends LitElement {
   @property({ attribute: "placeholder-labels", type: Boolean })
   public placeholderLabels = false;
 
-  @queryAll("ha-input") private _inputs?: NodeListOf<HaInput>;
+  @queryAll("ha-input") private _inputs?: HaInput[];
 
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
@@ -145,9 +145,7 @@ export class HaBaseTimeInput extends LitElement {
   };
 
   public reportValidity(): boolean {
-    const inputs = this._inputs;
-    if (!inputs) return true;
-    return [...inputs].every((input) => input.reportValidity());
+    return this._inputs?.every((input) => input.reportValidity()) ?? true;
   }
 
   protected render(): TemplateResult {
@@ -401,7 +399,7 @@ export class HaBaseTimeInput extends LitElement {
 
     .time-separator,
     ha-icon-button {
-      background-color: var(--ha-color-form-background);
+      background-color: var(--ha-color-fill-neutral-quiet-resting);
       color: var(--ha-color-text-secondary);
       border-bottom: 1px solid var(--ha-color-border-neutral-loud);
       box-sizing: border-box;

src/components/ha-button.ts

@@ -57,7 +57,6 @@ 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;

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

@@ -79,6 +79,7 @@ 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>
@@ -114,6 +115,7 @@ 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-date-input.ts

@@ -123,9 +123,6 @@ export class HaDateInput extends LitElement {
   }
 
   static styles = css`
-    :host {
-      min-width: 0px;
-    }
     ha-svg-icon {
       color: var(--secondary-text-color);
     }

src/components/ha-domain-icon.ts

@@ -1,23 +1,19 @@
-import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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;
@@ -29,22 +25,6 @@ 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>`;
@@ -54,13 +34,12 @@ export class HaDomainIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._hassConfig) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
     const icon = domainIcon(
-      this._connection,
-      this._hassConfig,
+      this.hass,
       this.domain,
       this.deviceClass,
       this.state
@@ -86,9 +65,9 @@ export class HaDomainIcon extends LitElement {
         {
           domain: this.domain!,
           type: "icon",
-          darkOptimized: this._themes?.darkMode,
+          darkOptimized: this.hass.themes?.darkMode,
         },
-        this._auth?.data.hassUrl
+        this.hass.auth.data.hassUrl
       );
       return html`
         <img

src/components/ha-dropdown.ts

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

src/components/ha-filter-devices.ts

@@ -101,11 +101,7 @@ export class HaFilterDevices extends LitElement {
           .value=${device.id}
           .selected=${this.value?.includes(device.id) ?? false}
         >
-          ${computeDeviceNameDisplay(
-            device,
-            this.hass.localize,
-            this.hass.states
-          )}
+          ${computeDeviceNameDisplay(device, this.hass)}
         </ha-check-list-item>`;
 
   private _handleItemClick(ev) {
@@ -155,18 +151,14 @@ export class HaFilterDevices extends LitElement {
         .filter(
           (device) =>
             !filter ||
-            computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
+            computeDeviceNameDisplay(device, this.hass)
               .toLowerCase()
               .includes(filter)
         )
         .sort((a, b) =>
           stringCompare(
-            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
-            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(a, this.hass),
+            computeDeviceNameDisplay(b, this.hass),
             this.hass.locale.language
           )
         );

src/components/ha-filter-domains.ts

@@ -72,6 +72,7 @@ export class HaFilterDomains extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
+                        .hass=${this.hass}
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>

src/components/ha-filter-integrations.ts

@@ -82,6 +82,7 @@ export class HaFilterIntegrations extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
+                        .hass=${this.hass}
                         .domain=${integration.domain}
                         brand-fallback
                       ></ha-domain-icon>

src/components/ha-filter-labels.ts

@@ -6,6 +6,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
@@ -97,14 +98,17 @@ export class HaFilterLabels extends LitElement {
                     this.value
                   ),
                   (label) => label.label_id,
-                  (label) =>
-                    html`<ha-check-list-item
+                  (label) => {
+                    const color = label.color
+                      ? computeCssColor(label.color)
+                      : undefined;
+                    return html`<ha-check-list-item
                       .value=${label.label_id}
                       .selected=${(this.value || []).includes(label.label_id)}
                       hasMeta
                     >
                       <ha-label
-                        .color=${label.color}
+                        style=${color ? `--color: ${color}` : ""}
                         .description=${label.description}
                       >
                         ${label.icon
@@ -115,7 +119,8 @@ export class HaFilterLabels extends LitElement {
                           : nothing}
                         ${label.name}
                       </ha-label>
-                    </ha-check-list-item>`
+                    </ha-check-list-item>`;
+                  }
                 )}
               </ha-list> `
           : nothing}
@@ -248,6 +253,10 @@ export class HaFilterLabels extends LitElement {
         .warning {
           color: var(--error-color);
         }
+        ha-label {
+          --ha-label-background-color: var(--color, var(--grey-color));
+          --ha-label-background-opacity: 0.5;
+        }
         .add {
           position: absolute;
           bottom: 0;

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -142,19 +142,6 @@ export const computeInitialHaFormData = (
             ])[firstChoice],
           };
         }
-      } else if ("numeric_threshold" in selector) {
-        const mode = selector.numeric_threshold?.mode ?? "crossed";
-        const type = mode === "changed" ? "any" : "above";
-        data[field.name] =
-          type === "any"
-            ? { type }
-            : {
-                type,
-                value: {
-                  number: selector.numeric_threshold?.number?.min ?? 0,
-                  active_choice: "number",
-                },
-              };
       } else {
         throw new Error(
           `Selector ${Object.keys(selector)[0]} not supported in initial form data`

src/components/ha-form/ha-form-integer.ts

@@ -100,9 +100,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         inputMode="numeric"
         .label=${this.label}
         .hint=${this.helper}
-        .value=${this.data !== undefined && this.data !== null
-          ? this.data.toString()
-          : ""}
+        .value=${this.data !== undefined ? this.data.toString() : ""}
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}

src/components/ha-gauge.ts

@@ -1,4 +1,4 @@
-import type { PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, LitElement, svg } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -54,7 +54,6 @@ export class HaGauge extends LitElement {
         this._angle = getAngle(this.value, this.min, this.max);
       }
       this._segment_label = this._getSegmentLabel();
-      this._rescaleSvg();
     });
   }
 
@@ -71,7 +70,6 @@ export class HaGauge extends LitElement {
     }
     this._angle = getAngle(this.value, this.min, this.max);
     this._segment_label = this._getSegmentLabel();
-    this._rescaleSvg();
   }
 
   protected render() {
@@ -90,91 +88,87 @@ export class HaGauge extends LitElement {
         />
 
 
-        ${
-          this.levels
-            ? (() => {
-                const sortedLevels = [...this.levels].sort(
-                  (a, b) => a.level - b.level
-                );
+  ${
+    this.levels
+      ? [...this.levels]
+          .sort((a, b) => a.level - b.level)
+          .map((level, i, arr) => {
+            const startLevel = i === 0 ? this.min : arr[i].level;
+            const endLevel = i + 1 < arr.length ? arr[i + 1].level : this.max;
 
-                if (
-                  sortedLevels.length > 0 &&
-                  sortedLevels[0].level !== this.min
-                ) {
-                  sortedLevels.unshift({
-                    level: this.min,
-                    stroke: "var(--info-color)",
-                  });
-                }
+            const startAngle = getAngle(startLevel, this.min, this.max);
+            const endAngle = getAngle(endLevel, this.min, this.max);
+            const largeArc = endAngle - startAngle > 180 ? 1 : 0;
 
-                return sortedLevels.map((level, i, arr) => {
-                  const startLevel = level.level;
-                  const endLevel =
-                    i + 1 < arr.length ? arr[i + 1].level : this.max;
+            const x1 = -arcRadius * Math.cos((startAngle * Math.PI) / 180);
+            const y1 = -arcRadius * Math.sin((startAngle * Math.PI) / 180);
+            const x2 = -arcRadius * Math.cos((endAngle * Math.PI) / 180);
+            const y2 = -arcRadius * Math.sin((endAngle * Math.PI) / 180);
 
-                  const startAngle = getAngle(startLevel, this.min, this.max);
-                  const endAngle = getAngle(endLevel, this.min, this.max);
-                  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+            const firstSegment = i === 0;
+            const lastSegment = i === arr.length - 1;
 
-                  const x1 =
-                    -arcRadius * Math.cos((startAngle * Math.PI) / 180);
-                  const y1 =
-                    -arcRadius * Math.sin((startAngle * Math.PI) / 180);
-                  const x2 = -arcRadius * Math.cos((endAngle * Math.PI) / 180);
-                  const y2 = -arcRadius * Math.sin((endAngle * Math.PI) / 180);
+            const paths: TemplateResult[] = [];
 
-                  const isFirst = i === 0;
-                  const isLast = i === arr.length - 1;
+            if (firstSegment) {
+              paths.push(svg`
+              <path
+                class="level"
+                stroke="${level.stroke}"
+                style="stroke-linecap: round"
+                d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
+              />
+            `);
+            } else if (lastSegment) {
+              const offsetAngle = 0.5;
+              const midAngle = endAngle - offsetAngle;
+              const xm = -arcRadius * Math.cos((midAngle * Math.PI) / 180);
+              const ym = -arcRadius * Math.sin((midAngle * Math.PI) / 180);
 
-                  if (isFirst) {
-                    return svg`
-                      <path
-                        class="level"
-                        stroke="${level.stroke}"
-                        style="stroke-linecap: butt"
-                        d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
-                      />
-                    `;
-                  }
+              paths.push(svg`
+                <path
+                  class="level"
+                  stroke="${level.stroke}"
+                  style="stroke-linecap: butt"
+                  d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${xm} ${ym}"
+                />
+              `);
 
-                  if (isLast) {
-                    const offsetAngle = 0.5;
-                    const midAngle = endAngle - offsetAngle;
-                    const xm =
-                      -arcRadius * Math.cos((midAngle * Math.PI) / 180);
-                    const ym =
-                      -arcRadius * Math.sin((midAngle * Math.PI) / 180);
+              paths.push(svg`
+                <path
+                  class="level"
+                  stroke="${level.stroke}"
+                  style="stroke-linecap: round"
+                  d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}"
+                />
+              `);
+            } else {
+              paths.push(svg`
+                <path
+                  class="level"
+                  stroke="${level.stroke}"
+                  style="stroke-linecap: butt"
+                  d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
+                />
+              `);
+            }
 
-                    return svg`
-                        <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
-                              d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${xm} ${ym}" />
-                        <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
-                              d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}" />
-                    `;
-                  }
-
-                  return svg`
-                    <path
-                      class="level"
-                      stroke="${level.stroke}"
-                      style="stroke-linecap: butt"
-                      d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
-                    ></path>
-                  `;
-                });
-              })()
-            : ""
-        }
+            return paths;
+          })
+      : ""
+  }
 
         ${
           this.needle
             ? svg`
-                <path
-                class="needle"
-                d="M -36,-2 L -44,-1 A 1,1,0,0,0,-44,1 L -36,2 A 2,2,0,0,0,-36,-2 Z"
-
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
-              />
+                <line
+                  class="needle"
+                  x1="-35.0"
+                  y1="0"
+                  x2="-45.0"
+                  y2="0"
+                  style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                />
               `
             : svg`
                 <path
@@ -185,8 +179,7 @@ export class HaGauge extends LitElement {
                 />
               `
         }
-      </svg>
-      <svg class="text">
+
         <text
           class="value-text"
           x="0"
@@ -211,18 +204,6 @@ export class HaGauge extends LitElement {
     `;
   }
 
-  private _rescaleSvg() {
-    // Set the viewbox of the SVG containing the value to perfectly
-    // fit the text
-    // That way it will auto-scale correctly
-    const svgRoot = this.shadowRoot!.querySelector(".text")!;
-    const box = svgRoot.querySelector("text")!.getBBox()!;
-    svgRoot.setAttribute(
-      "viewBox",
-      `${box.x} ${box.y} ${box.width} ${box.height}`
-    );
-  }
-
   private _getSegmentLabel() {
     if (this.levels) {
       [...this.levels].sort((a, b) => a.level - b.level);
@@ -243,43 +224,32 @@ export class HaGauge extends LitElement {
     .levels-base {
       fill: none;
       stroke: var(--primary-background-color);
-      stroke-width: 6;
-      stroke-linecap: butt;
+      stroke-width: 8;
+      stroke-linecap: round;
     }
 
     .level {
       fill: none;
-      stroke-width: 6;
+      stroke-width: 8;
       stroke-linecap: butt;
     }
 
     .value {
       fill: none;
-      stroke-width: 6;
+      stroke-width: 8;
       stroke: var(--gauge-color);
-      stroke-linecap: butt;
+      stroke-linecap: round;
       transition: stroke-dashoffset 1s ease 0s;
     }
 
     .needle {
-      fill: var(--primary-text-color);
-      stroke: var(--card-background-color);
-      color: var(--primary-text-color);
-      stroke-width: 1;
+      stroke: var(--primary-text-color);
+      stroke-width: 2;
       stroke-linecap: round;
       transform-origin: 0 0;
       transition: all 1s ease 0s;
     }
 
-    .text {
-      position: absolute;
-      max-height: 40%;
-      max-width: 55%;
-      left: 50%;
-      bottom: 10%;
-      transform: translate(-50%, 0%);
-    }
-
     .value-text {
       font-size: var(--ha-font-size-l);
       fill: var(--primary-text-color);

src/components/ha-hls-player.ts

@@ -140,7 +140,7 @@ class HaHLSPlayer extends LitElement {
     this._cleanUp();
     this._resetError();
 
-    if (!isComponentLoaded(this.hass.config, "stream")) {
+    if (!isComponentLoaded(this.hass!, "stream")) {
       this._setFatalError("Streaming component is not loaded.");
       return;
     }

src/components/ha-label.ts

@@ -1,44 +1,18 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { computeCssColor } from "../common/color/compute-color";
-import { getContrastedColorHex } from "../common/color/rgb";
 import { uid } from "../common/util/uid";
 import "./ha-tooltip";
 
-/**
- * Returns CSS styles for a label's background & icon/text
- * @param color Label color defined in HEX format
- * @returns CSS styles
- */
-export const getLabelColorStyle = (labelColor: string | undefined | null) => {
-  const color = labelColor ? computeCssColor(labelColor) : undefined;
-  return color
-    ? `--ha-label-background-color: ${color};
-       --primary-text-color: ${getContrastedColorHex(labelColor!)};`
-    : `--ha-label-background-color: rgba(var(--rgb-primary-text-color), 0.15);`;
-};
-
 @customElement("ha-label")
 class HaLabel extends LitElement {
   @property({ type: Boolean, reflect: true }) dense = false;
 
-  @property()
-  public color?: string;
-
   @property({ attribute: "description" })
   public description?: string;
 
   private _elementId = "label-" + uid();
 
-  public willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-    if (!changedProps.has("color")) {
-      return;
-    }
-    this.style.cssText = getLabelColorStyle(this.color);
-  }
-
   protected render(): TemplateResult {
     return html`
       <ha-tooltip
@@ -62,6 +36,10 @@ class HaLabel extends LitElement {
         :host {
           --ha-label-text-color: var(--primary-text-color);
           --ha-label-icon-color: var(--primary-text-color);
+          --ha-label-background-color: rgba(
+            var(--rgb-primary-text-color),
+            0.15
+          );
           --ha-label-background-opacity: 1;
           border: 1px solid var(--outline-color);
           position: relative;

src/components/ha-labels-picker.ts

@@ -6,6 +6,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import { labelsContext } from "../data/context";
@@ -16,7 +17,6 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./chips/ha-chip-set";
 import "./chips/ha-input-chip";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import { getLabelColorStyle } from "./ha-label";
 import "./ha-label-picker";
 import type { HaLabelPicker } from "./ha-label-picker";
 import "./ha-tooltip";
@@ -106,14 +106,9 @@ export class HaLabelsPicker extends LitElement {
             labels?.find((label) => label.label_id === id) || {
               label_id: id,
               name: id,
-              color: "rgba(var(--rgb-primary-text-color), 0.15)",
             }
         )
         .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
-        .map((label) => ({
-          ...label,
-          style: getLabelColorStyle(label.color),
-        }))
   );
 
   protected render(): TemplateResult {
@@ -140,6 +135,9 @@ export class HaLabelsPicker extends LitElement {
                 (label) => label?.label_id,
                 (label) => {
                   if (!label) return nothing;
+                  const color = label.color
+                    ? computeCssColor(label.color)
+                    : undefined;
                   const elementId = "label-" + label.label_id;
                   return html`
                     <ha-tooltip
@@ -156,7 +154,7 @@ export class HaLabelsPicker extends LitElement {
                       .disabled=${this.disabled}
                       .label=${label.name}
                       selected
-                      style=${label.style}
+                      style=${color ? `--color: ${color}` : ""}
                     >
                       ${label.icon
                         ? html`<ha-icon
@@ -241,10 +239,8 @@ export class HaLabelsPicker extends LitElement {
       height: var(--ha-space-8);
     }
     ha-input-chip {
-      --md-input-chip-selected-container-color: var(
-        --ha-label-background-color,
-        var(--grey-color)
-      );
+      --md-input-chip-selected-container-color: var(--color, var(--grey-color));
+      --ha-input-chip-selected-container-opacity: 0.5;
       --md-input-chip-selected-outline-width: 1px;
     }
     label {

src/components/ha-mount-picker.ts

@@ -14,9 +14,9 @@ import {
 } from "../data/supervisor/mounts";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
+import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-list-item";
 import "./ha-select";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 
 const _BACKUP_DATA_DISK_ = "/backup";
 
@@ -129,7 +129,7 @@ class HaMountPicker extends LitElement {
 
   private async _getMounts() {
     try {
-      if (isComponentLoaded(this.hass.config, "hassio")) {
+      if (isComponentLoaded(this.hass, "hassio")) {
         this._mounts = await fetchSupervisorMounts(this.hass);
         if (this.usage === SupervisorMountUsage.BACKUP && !this.value) {
           this.value = this._mounts.default_backup_mount || _BACKUP_DATA_DISK_;

src/components/ha-navigation-picker.ts

@@ -132,6 +132,7 @@ export class HaNavigationPicker extends LitElement {
         ? html`
             <ha-domain-icon
               slot="start"
+              .hass=${this.hass}
               .domain=${item.domain}
               brand-fallback
             ></ha-domain-icon>
@@ -157,6 +158,7 @@ export class HaNavigationPicker extends LitElement {
         ? html`
             <ha-domain-icon
               slot="start"
+              .hass=${this.hass}
               .domain=${item.domain}
               brand-fallback
             ></ha-domain-icon>

src/components/ha-picker-combo-box.ts

@@ -798,11 +798,11 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         }
 
         ha-input-search {
-          padding: 0 var(--ha-space-3) var(--ha-space-3);
+          padding: 0 var(--ha-space-3);
         }
 
         :host([mode="dialog"]) ha-input-search {
-          padding: 0 var(--ha-space-4) var(--ha-space-3);
+          padding: 0 var(--ha-space-4);
         }
 
         ha-combo-box-item {
@@ -873,12 +873,12 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           display: flex;
           flex-wrap: nowrap;
           gap: var(--ha-space-2);
-          padding: 0 var(--ha-space-3) var(--ha-space-3);
+          padding: var(--ha-space-3) var(--ha-space-3);
           overflow: auto;
         }
 
         :host([mode="dialog"]) .sections {
-          padding: 0 var(--ha-space-4) var(--ha-space-3);
+          padding: var(--ha-space-3) var(--ha-space-4);
         }
 
         .sections ha-filter-chip {
@@ -915,6 +915,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           padding: var(--ha-space-1) var(--ha-space-4);
         }
 
+        :host([mode="dialog"]) ha-input-search {
+          padding: 0 var(--ha-space-4);
+        }
+
         .section-title-wrapper {
           height: 0;
           position: relative;

src/components/ha-picker-field.ts

@@ -121,8 +121,6 @@ export class HaPickerField extends PickerMixin(LitElement) {
       css`
         ha-combo-box-item[disabled] {
           background-color: var(--ha-color-form-background-disabled);
-          --md-list-item-disabled-opacity: 0.5;
-          opacity: 0.5;
           cursor: not-allowed;
         }
         ha-combo-box-item {
@@ -143,6 +141,13 @@ export class HaPickerField extends PickerMixin(LitElement) {
           --md-focus-ring-duration: 0s;
         }
 
+        /* Add Similar focus style as the text field */
+        ha-combo-box-item[disabled]:after {
+          background-color: var(
+            --mdc-text-field-disabled-line-color,
+            rgba(0, 0, 0, 0.42)
+          );
+        }
         ha-combo-box-item:after {
           display: block;
           content: "";
@@ -153,7 +158,10 @@ export class HaPickerField extends PickerMixin(LitElement) {
           right: 0;
           height: 1px;
           width: 100%;
-          background-color: var(--ha-color-border-neutral-loud);
+          background-color: var(
+            --mdc-text-field-idle-line-color,
+            rgba(0, 0, 0, 0.42)
+          );
           transform:
             height 180ms ease-in-out,
             background-color 180ms ease-in-out;

src/components/ha-selector/ha-selector-numeric-threshold.ts

@@ -2,7 +2,6 @@ import memoizeOne from "memoize-one";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiChartBellCurveCumulative } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   NumericThresholdSelector,
@@ -77,18 +76,6 @@ export class HaNumericThresholdSelector extends LitElement {
     }
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    if (
-      (changedProperties.has("value") || changedProperties.has("selector")) &&
-      !this.value
-    ) {
-      const mode = this._getMode();
-      const type = DEFAULT_TYPE[mode];
-      fireEvent(this, "value-changed", { value: { type } });
-    }
-  }
-
   private _getUnitOptions() {
     return this.selector.numeric_threshold?.unit_of_measurement;
   }
@@ -233,7 +220,6 @@ export class HaNumericThresholdSelector extends LitElement {
       return [
         {
           value: "any",
-          iconPath: mdiChartBellCurveCumulative,
           label: localize(
             "ui.components.selectors.numeric_threshold.changed.any"
           ),
@@ -287,9 +273,7 @@ export class HaNumericThresholdSelector extends LitElement {
     const numberSelector = {
       number: {
         ...this.selector.numeric_threshold?.number,
-        ...(!showUnit && effectiveUnit
-          ? { unit_of_measurement: effectiveUnit }
-          : {}),
+        ...(effectiveUnit ? { unit_of_measurement: effectiveUnit } : {}),
       },
     };
     const entitySelector = {
@@ -497,7 +481,7 @@ export class HaNumericThresholdSelector extends LitElement {
     .value-inputs {
       display: flex;
       gap: var(--ha-space-2);
-      align-items: flex-start;
+      align-items: flex-end;
     }
 
     .value-selector {

src/components/ha-selector/ha-selector-period.ts

@@ -1,144 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { PeriodKey, PeriodSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import { deepEqual } from "../../common/util/deep-equal";
-import type { LocalizeFunc } from "../../common/translations/localize";
-import "../ha-form/ha-form";
-
-const PERIODS = {
-  none: undefined,
-  today: { calendar: { period: "day" } },
-  yesterday: { calendar: { period: "day", offset: -1 } },
-  tomorrow: { calendar: { period: "day", offset: 1 } },
-  this_week: { calendar: { period: "week" } },
-  last_week: { calendar: { period: "week", offset: -1 } },
-  next_week: { calendar: { period: "week", offset: 1 } },
-  this_month: { calendar: { period: "month" } },
-  last_month: { calendar: { period: "month", offset: -1 } },
-  next_month: { calendar: { period: "month", offset: 1 } },
-  this_year: { calendar: { period: "year" } },
-  last_year: { calendar: { period: "year", offset: -1 } },
-  next_7d: { calendar: { period: "day", offset: 7 } },
-  next_30d: { calendar: { period: "day", offset: 30 } },
-} as const;
-
-@customElement("ha-selector-period")
-export class HaPeriodSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: PeriodSelector;
-
-  @property({ attribute: false }) public value?: unknown;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  private _schema = memoizeOne(
-    (
-      selectedPeriodKey: PeriodKey | undefined,
-      selector: PeriodSelector,
-      localize: LocalizeFunc
-    ) =>
-      [
-        {
-          name: "period",
-          required: this.required,
-          selector:
-            selectedPeriodKey && selectedPeriodKey in this._periods(selector)
-              ? {
-                  select: {
-                    multiple: false,
-                    options: Object.keys(this._periods(selector)).map(
-                      (periodKey) => ({
-                        value: periodKey,
-                        label:
-                          localize(
-                            `ui.components.selectors.period.periods.${periodKey as PeriodKey}`
-                          ) || periodKey,
-                      })
-                    ),
-                  },
-                }
-              : { object: {} },
-        },
-      ] as const
-  );
-
-  protected render() {
-    const data = this._data(this.value, this.selector);
-
-    const schema = this._schema(
-      typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
-      this.selector,
-      this.hass.localize
-    );
-
-    return html`
-      <ha-form
-        .hass=${this.hass}
-        .data=${data}
-        .schema=${schema}
-        .computeHelper=${this._computeHelperCallback}
-        .computeLabel=${this._computeLabelCallback}
-        .disabled=${this.disabled}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
-    `;
-  }
-
-  private _periods = memoizeOne((selector: PeriodSelector) =>
-    Object.fromEntries(
-      Object.entries(PERIODS).filter(([key]) =>
-        selector.period?.options?.includes(key as any)
-      )
-    )
-  );
-
-  private _data = memoizeOne((value: unknown, selector: PeriodSelector) => {
-    for (const [periodKey, period] of Object.entries(this._periods(selector))) {
-      if (deepEqual(period, value)) {
-        return { period: periodKey };
-      }
-    }
-    return { period: value };
-  });
-
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const newValue = ev.detail.value;
-
-    if (typeof newValue.period === "string") {
-      const periods = this._periods(this.selector);
-      if (newValue.period in periods) {
-        const period = this._periods(this.selector)[newValue.period];
-        fireEvent(this, "value-changed", { value: period });
-      }
-    } else {
-      fireEvent(this, "value-changed", { value: newValue.period });
-    }
-  }
-
-  private _computeHelperCallback = () => this.helper;
-
-  private _computeLabelCallback = () => this.label;
-
-  static styles = css`
-    :host {
-      position: relative;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-period": HaPeriodSelector;
-  }
-}

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

@@ -41,7 +41,6 @@ const LOAD_ELEMENTS = {
   number: () => import("./ha-selector-number"),
   numeric_threshold: () => import("./ha-selector-numeric-threshold"),
   object: () => import("./ha-selector-object"),
-  period: () => import("./ha-selector-period"),
   qr_code: () => import("./ha-selector-qr-code"),
   select: () => import("./ha-selector-select"),
   selector: () => import("./ha-selector-selector"),

src/components/ha-service-control.ts

@@ -516,10 +516,17 @@ export class HaServiceControl extends LitElement {
         `}
     ${serviceData && "target" in serviceData
       ? html`<ha-settings-row .narrow=${this.narrow}>
+          ${hasOptional
+            ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+            : ""}
           <span slot="heading"
             >${this.hass.localize("ui.components.service-control.target")}</span
           >
-          <ha-selector
+          <span slot="description"
+            >${this.hass.localize(
+              "ui.components.service-control.target_secondary"
+            )}</span
+          ><ha-selector
             .hass=${this.hass}
             .selector=${this._targetSelector(
               serviceData.target as TargetSelector,

src/components/ha-settings-row.ts

@@ -1,6 +1,5 @@
-import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-settings-row")
@@ -17,28 +16,17 @@ export class HaSettingsRow extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public empty = false;
 
-  private readonly _hasSlotController = new HasSlotController(
-    this,
-    "description"
-  );
-
   protected render(): TemplateResult {
-    const hasDescription = this._hasSlotController.test("description");
-
     return html`
       <div class="prefix-wrap">
         <slot name="prefix"></slot>
         <div
           class="body"
-          ?two-line=${!this.threeLine && hasDescription}
+          ?two-line=${!this.threeLine}
           ?three-line=${this.threeLine}
         >
           <slot name="heading"></slot>
-          ${hasDescription
-            ? html`<span class="secondary"
-                ><slot name="description"></slot
-              ></span>`
-            : nothing}
+          <div class="secondary"><slot name="description"></slot></div>
         </div>
       </div>
       <div class="content">

src/components/ha-suggest-with-ai-button.ts

@@ -1,19 +1,19 @@
-import { mdiStarFourPoints } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, css, LitElement, nothing } from "lit";
+import { mdiStarFourPoints } from "@mdi/js";
 
-import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
+import { customElement, state, property } from "lit/decorators";
 import type {
   AITaskPreferences,
   GenDataTask,
   GenDataTaskResult,
 } from "../data/ai_task";
 import { fetchAITaskPreferences, generateDataAITask } from "../data/ai_task";
-import type { HomeAssistant } from "../types";
 import "./chips/ha-assist-chip";
 import "./ha-svg-icon";
+import type { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
 
 declare global {
   interface HASSDomEvents {
@@ -56,7 +56,7 @@ export class HaSuggestWithAIButton extends LitElement {
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
-    if (!this.hass || !isComponentLoaded(this.hass.config, "ai_task")) {
+    if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
       return;
     }
     fetchAITaskPreferences(this.hass).then((prefs) => {

src/components/ha-textfield.ts

@@ -0,0 +1,294 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "./input/ha-input";
+import type { HaInput } from "./input/ha-input";
+
+/**
+ * Legacy wrapper around ha-input that preserves the mwc-textfield API.
+ * New code should use ha-input directly.
+ * @deprecated Use ha-input instead.
+ */
+@customElement("ha-textfield")
+export class HaTextField extends LitElement {
+  @property({ type: String })
+  public value = "";
+
+  @property({ type: String })
+  public type:
+    | "text"
+    | "search"
+    | "tel"
+    | "url"
+    | "email"
+    | "password"
+    | "date"
+    | "month"
+    | "week"
+    | "time"
+    | "datetime-local"
+    | "number"
+    | "color" = "text";
+
+  @property({ type: String })
+  public label = "";
+
+  @property({ type: String })
+  public placeholder = "";
+
+  @property({ type: String })
+  public prefix = "";
+
+  @property({ type: String })
+  public suffix = "";
+
+  @property({ type: Boolean })
+  // @ts-ignore
+  public icon = false;
+
+  @property({ type: Boolean })
+  // @ts-ignore
+  // eslint-disable-next-line lit/attribute-names
+  public iconTrailing = false;
+
+  @property({ type: Boolean })
+  public disabled = false;
+
+  @property({ type: Boolean })
+  public required = false;
+
+  @property({ type: Number, attribute: "minlength" })
+  public minLength = -1;
+
+  @property({ type: Number, attribute: "maxlength" })
+  public maxLength = -1;
+
+  @property({ type: Boolean, reflect: true })
+  public outlined = false;
+
+  @property({ type: String })
+  public helper = "";
+
+  @property({ type: Boolean, attribute: "validateoninitialrender" })
+  public validateOnInitialRender = false;
+
+  @property({ type: String, attribute: "validationmessage" })
+  public validationMessage = "";
+
+  @property({ type: Boolean, attribute: "autovalidate" })
+  public autoValidate = false;
+
+  @property({ type: String })
+  public pattern = "";
+
+  @property()
+  public min: number | string = "";
+
+  @property()
+  public max: number | string = "";
+
+  @property()
+  public step: number | "any" | null = null;
+
+  @property({ type: Number })
+  public size: number | null = null;
+
+  @property({ type: Boolean, attribute: "helperpersistent" })
+  public helperPersistent = false;
+
+  @property({ attribute: "charcounter" })
+  public charCounter: boolean | "external" | "internal" = false;
+
+  @property({ type: Boolean, attribute: "endaligned" })
+  public endAligned = false;
+
+  @property({ type: String, attribute: "inputmode" })
+  public inputMode = "";
+
+  @property({ type: Boolean, reflect: true, attribute: "readonly" })
+  public readOnly = false;
+
+  @property({ type: String })
+  public name = "";
+
+  @property({ type: String })
+  // eslint-disable-next-line lit/no-native-attributes
+  public autocapitalize = "";
+
+  // --- ha-textfield-specific properties ---
+
+  @property({ type: Boolean })
+  public invalid = false;
+
+  @property({ attribute: "error-message" })
+  public errorMessage?: string;
+
+  @property()
+  public autocomplete?: string;
+
+  @property({ type: Boolean })
+  public autocorrect = true;
+
+  @property({ attribute: "input-spellcheck" })
+  public inputSpellcheck?: string;
+
+  @query("ha-input")
+  private _haInput?: HaInput;
+
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  public get formElement(): HTMLInputElement | undefined {
+    return (this._haInput as any)?._input?.input;
+  }
+
+  public select(): void {
+    this._haInput?.select();
+  }
+
+  public setSelectionRange(
+    selectionStart: number,
+    selectionEnd: number,
+    selectionDirection?: "forward" | "backward" | "none"
+  ): void {
+    this._haInput?.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+
+  public setRangeText(
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectMode?: "select" | "start" | "end" | "preserve"
+  ): void {
+    this._haInput?.setRangeText(replacement, start, end, selectMode);
+  }
+
+  public checkValidity(): boolean {
+    return this._haInput?.checkValidity() ?? true;
+  }
+
+  public reportValidity(): boolean {
+    return this._haInput?.reportValidity() ?? true;
+  }
+
+  public setCustomValidity(message: string): void {
+    this.validationMessage = message;
+    this.invalid = !!message;
+  }
+
+  /** No-op. Preserved for backward compatibility. */
+  public layout(): void {
+    // no-op — mwc-textfield needed this for notched outline recalculation
+  }
+
+  protected override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.validateOnInitialRender) {
+      this.reportValidity();
+    }
+  }
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("invalid") && this._haInput) {
+      if (
+        this.invalid ||
+        (changedProperties.get("invalid") !== undefined && !this.invalid)
+      ) {
+        this.reportValidity();
+      }
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const errorMsg = this.errorMessage || this.validationMessage;
+    return html`
+      <ha-input
+        .type=${this.type}
+        .value=${this.value || undefined}
+        .label=${this.label}
+        .placeholder=${this.placeholder}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .readonly=${this.readOnly}
+        .pattern=${this.pattern || undefined}
+        .minlength=${this.minLength > 0 ? this.minLength : undefined}
+        .maxlength=${this.maxLength > 0 ? this.maxLength : undefined}
+        .min=${this.min !== "" ? this.min : undefined}
+        .max=${this.max !== "" ? this.max : undefined}
+        .step=${this.step ?? undefined}
+        .name=${this.name || undefined}
+        .autocomplete=${this.autocomplete}
+        .autocorrect=${this.autocorrect}
+        .spellcheck=${this.inputSpellcheck === "true"}
+        .inputmode=${this.inputMode}
+        .autocapitalize=${this.autocapitalize || ""}
+        .invalid=${this.invalid}
+        .validationMessage=${errorMsg || ""}
+        .autoValidate=${this.autoValidate}
+        .hint=${this.helper}
+        .withoutSpinButtons=${this.type === "number"}
+        .insetLabel=${this.prefix}
+        @input=${this._onInput}
+        @change=${this._onChange}
+      >
+        ${this.icon
+          ? html`<slot name="leadingIcon" slot="start"></slot>`
+          : nothing}
+        ${this.prefix
+          ? html`<span class="prefix" slot="start">${this.prefix}</span>`
+          : nothing}
+        ${this.suffix
+          ? html`<span class="suffix" slot="end">${this.suffix}</span>`
+          : nothing}
+        ${this.iconTrailing
+          ? html`<slot name="trailingIcon" slot="end"></slot>`
+          : nothing}
+      </ha-input>
+    `;
+  }
+
+  private _onInput(): void {
+    this.value = this._haInput?.value ?? "";
+  }
+
+  private _onChange(): void {
+    this.value = this._haInput?.value ?? "";
+  }
+
+  static override styles = css`
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      outline: none;
+    }
+
+    ha-input {
+      --ha-input-padding-bottom: 0;
+      width: 100%;
+    }
+
+    .prefix,
+    .suffix {
+      color: var(--secondary-text-color);
+    }
+
+    .prefix {
+      padding-top: var(--ha-space-3);
+      margin-inline-end: var(--text-field-prefix-padding-right);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-textfield": HaTextField;
+  }
+}

src/components/ha-time-input.ts

@@ -21,8 +21,6 @@ export class HaTimeInput extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ attribute: "auto-validate", type: Boolean }) autoValidate = false;
-
   @property({ type: Boolean, attribute: "enable-second" })
   public enableSecond = false;
 
@@ -73,7 +71,6 @@ export class HaTimeInput extends LitElement {
         .clearable=${this.clearable && this.value !== undefined}
         .helper=${this.helper}
         .placeholderLabels=${this.placeholderLabels}
-        .autoValidate=${this.autoValidate}
         day-label="dd"
         hour-label="hh"
         min-label="mm"
@@ -89,7 +86,6 @@ export class HaTimeInput extends LitElement {
 
     const useAMPM = useAmPm(this.locale);
     let value: string | undefined;
-    let updateHours = 0;
 
     // An undefined eventValue means the time selector is being cleared,
     // the `value` variable will (intentionally) be left undefined.
@@ -101,8 +97,6 @@ export class HaTimeInput extends LitElement {
     ) {
       let hours = eventValue.hours || 0;
       if (eventValue && useAMPM) {
-        updateHours =
-          hours >= 12 && hours < 24 ? hours - 12 : hours === 0 ? 12 : 0;
         if (eventValue.amPm === "PM" && hours < 12) {
           hours += 12;
         }
@@ -121,17 +115,6 @@ export class HaTimeInput extends LitElement {
       }`;
     }
 
-    if (updateHours) {
-      // If the user entered a 24hr time in a 12hr input, we need to refresh the
-      // input to ensure it resets back to the 12hr equivalent.
-      this.updateComplete.then(() => {
-        const input = this._input;
-        if (input) {
-          input.hours = updateHours;
-        }
-      });
-    }
-
     if (value === this.value) {
       return;
     }

src/components/ha-toast.ts

@@ -1,16 +1,7 @@
+import "@home-assistant/webawesome/dist/components/popover/popover";
+import type WaPopover from "@home-assistant/webawesome/dist/components/popover/popover";
 import { css, html, LitElement } from "lit";
-import { classMap } from "lit/directives/class-map";
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { fireEvent } from "../common/dom/fire_event";
-import { popoverSupported } from "../common/feature-detect/support-popover";
-import { nextRender } from "../common/util/render-status";
+import { customElement, property, query } from "lit/decorators";
 
 export type ToastCloseReason =
   | "dismiss"
@@ -28,103 +19,23 @@ export class HaToast extends LitElement {
 
   @property({ type: Number, attribute: "timeout-ms" }) public timeoutMs = 4000;
 
-  @query(".toast")
-  private _toast?: HTMLDivElement;
-
-  @queryAssignedElements({ slot: "action", flatten: true })
-  private _actionElements?: Element[];
-
-  @queryAssignedElements({ slot: "dismiss", flatten: true })
-  private _dismissElements?: Element[];
-
-  @state() private _active = false;
-
-  @state() private _visible = false;
+  @query("wa-popover")
+  private _popover?: WaPopover;
 
   private _dismissTimer?: ReturnType<typeof setTimeout>;
 
   private _closeReason: ToastCloseReason = "programmatic";
 
-  private _transitionId = 0;
-
   public disconnectedCallback(): void {
     clearTimeout(this._dismissTimer);
-    this._transitionId += 1;
     super.disconnectedCallback();
   }
 
   public async show(): Promise<void> {
+    await this.updateComplete;
+    await this._popover?.show();
+
     clearTimeout(this._dismissTimer);
-
-    if (this._active && this._visible) {
-      this._setDismissTimer();
-      return;
-    }
-
-    const transitionId = ++this._transitionId;
-
-    this._active = true;
-    await this.updateComplete;
-
-    if (transitionId !== this._transitionId) {
-      return;
-    }
-
-    this._showToastPopover();
-    await nextRender();
-
-    if (transitionId !== this._transitionId) {
-      return;
-    }
-
-    this._visible = true;
-    await this.updateComplete;
-    await this._waitForTransitionEnd();
-
-    if (transitionId !== this._transitionId) {
-      return;
-    }
-
-    this._setDismissTimer();
-  }
-
-  public async hide(reason: ToastCloseReason = "programmatic"): Promise<void> {
-    clearTimeout(this._dismissTimer);
-    this._closeReason = reason;
-
-    if (!this._active) {
-      return;
-    }
-
-    const transitionId = ++this._transitionId;
-    const wasVisible = this._visible;
-
-    this._visible = false;
-    await this.updateComplete;
-
-    if (wasVisible) {
-      await this._waitForTransitionEnd();
-    }
-
-    if (transitionId !== this._transitionId) {
-      return;
-    }
-
-    this._hideToastPopover();
-    this._active = false;
-    await this.updateComplete;
-
-    fireEvent(this, "toast-closed", {
-      reason: this._closeReason,
-    });
-    this._closeReason = "programmatic";
-  }
-
-  public close(reason: ToastCloseReason = "programmatic"): void {
-    this.hide(reason);
-  }
-
-  private _setDismissTimer() {
     if (this.timeoutMs > 0) {
       this._dismissTimer = setTimeout(() => {
         this.hide("timeout");
@@ -132,113 +43,96 @@ export class HaToast extends LitElement {
     }
   }
 
-  private _isPopoverOpen(): boolean {
-    if (!this._toast || !popoverSupported) {
-      return false;
-    }
-
-    try {
-      return this._toast.matches(":popover-open");
-    } catch {
-      return false;
-    }
+  public async hide(reason: ToastCloseReason = "programmatic"): Promise<void> {
+    clearTimeout(this._dismissTimer);
+    this._closeReason = reason;
+    await this._popover?.hide();
   }
 
-  private _showToastPopover(): void {
-    if (!this._toast || !popoverSupported || this._isPopoverOpen()) {
-      return;
-    }
-
-    this._toast.showPopover?.();
+  public close(reason: ToastCloseReason = "programmatic"): void {
+    this.hide(reason);
   }
 
-  private _hideToastPopover(): void {
-    if (!this._toast || !popoverSupported || !this._isPopoverOpen()) {
-      return;
-    }
-
-    this._toast.hidePopover?.();
-  }
-
-  private async _waitForTransitionEnd(): Promise<void> {
-    const toastEl = this._toast;
-    if (!toastEl) {
-      return;
-    }
-
-    const animations = toastEl.getAnimations({ subtree: true });
-    if (animations.length === 0) {
-      return;
-    }
-
-    await Promise.allSettled(animations.map((animation) => animation.finished));
+  private _handleAfterHide() {
+    this.dispatchEvent(
+      new CustomEvent<ToastClosedEventDetail>("toast-closed", {
+        detail: { reason: this._closeReason },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this._closeReason = "programmatic";
   }
 
   protected render() {
-    const hasAction =
-      (this._actionElements?.length ?? 0) > 0 ||
-      (this._dismissElements?.length ?? 0) > 0;
-
     return html`
-      <div
-        class=${classMap({
-          toast: true,
-          active: this._active,
-          visible: this._visible,
-        })}
-        role="status"
-        aria-live="polite"
-        popover=${ifDefined(popoverSupported ? "manual" : undefined)}
+      <div id="toast-anchor" aria-hidden="true"></div>
+      <wa-popover
+        for="toast-anchor"
+        placement="top"
+        distance="16"
+        skidding="0"
+        without-arrow
+        @wa-after-hide=${this._handleAfterHide}
       >
-        <span class="message">${this.labelText}</span>
-        <div class=${classMap({ actions: true, "has-action": hasAction })}>
-          <slot name="action"></slot>
-          <slot name="dismiss"></slot>
+        <div class="toast" role="status" aria-live="polite">
+          <span class="message">${this.labelText}</span>
+          <div class="actions">
+            <slot name="action"></slot>
+            <slot name="dismiss"></slot>
+          </div>
         </div>
-      </div>
+      </wa-popover>
     `;
   }
 
   static override styles = css`
-    .toast {
+    #toast-anchor {
       position: fixed;
-      inset-block-start: auto;
-      inset-inline-end: auto;
-      inset-block-end: calc(
-        var(--safe-area-inset-bottom, 0px) + var(--ha-space-4)
-      );
+      bottom: calc(8px + var(--safe-area-inset-bottom));
       inset-inline-start: 50%;
-      margin: 0;
-      width: max-content;
-      height: auto;
-      border: none;
-      overflow: hidden;
+      transform: translateX(-50%);
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    wa-popover {
+      --arrow-size: 0;
+      --max-width: min(
+        650px,
+        calc(
+          100vw -
+            16px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+        )
+      );
+      --show-duration: var(--ha-animation-duration-fast, 150ms);
+      --hide-duration: var(--ha-animation-duration-fast, 150ms);
+    }
+
+    wa-popover::part(body) {
+      padding: 0;
+      border-radius: 4px;
+    }
+
+    .toast {
       box-sizing: border-box;
-      min-width: min(350px, calc(var(--safe-width) - var(--ha-space-4)));
-      max-width: min(650px, var(--safe-width));
+      min-width: min(
+        350px,
+        calc(
+          100vw -
+            16px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+        )
+      );
+      max-width: 650px;
       min-height: 48px;
       display: flex;
       align-items: center;
       gap: var(--ha-space-2);
-      padding: var(--ha-space-3) var(--ha-space-4);
-      color: var(--ha-color-on-neutral-loud);
-      background-color: var(--ha-color-neutral-10);
-      border-radius: var(--ha-border-radius-sm);
-      box-shadow: var(--wa-shadow-l);
-      opacity: 0;
-      transform: translate(-50%, var(--ha-space-2));
-      transition:
-        opacity var(--ha-animation-duration-fast, 150ms) ease,
-        transform var(--ha-animation-duration-fast, 150ms) ease;
-    }
-
-    .toast:not(.active) {
-      display: none;
-    }
-
-    .toast.visible {
-      opacity: 1;
-      transform: translate(-50%, 0);
+      padding: var(--ha-space-2) var(--ha-space-3);
+      color: var(--inverse-primary-text-color);
+      background-color: var(--inverse-surface-color);
     }
 
     .message {
@@ -250,26 +144,23 @@ export class HaToast extends LitElement {
       display: flex;
       align-items: center;
       gap: var(--ha-space-2);
-      color: var(--ha-color-on-neutral-loud);
-    }
-
-    .actions:not(.has-action) {
-      display: none;
+      color: rgba(255, 255, 255, 0.87);
     }
 
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .toast {
-        min-width: var(--safe-width);
-        max-width: var(--safe-width);
-        border-radius: var(--ha-border-radius-square);
+        min-width: calc(
+          100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+        );
+        border-radius: 0;
       }
     }
   `;
 }
 
 declare global {
-  interface HASSDomEvents {
-    "toast-closed": ToastClosedEventDetail;
+  interface HTMLElementEventMap {
+    "toast-closed": CustomEvent<ToastClosedEventDetail>;
   }
 
   interface HTMLElementTagNameMap {

src/components/input/ha-input-copy.ts

@@ -11,27 +11,6 @@ import "../ha-svg-icon";
 import "./ha-input";
 import type { HaInput, InputType } from "./ha-input";
 
-/**
- * Home Assistant input with copy button
- *
- * @element ha-input-copy
- * @extends {LitElement}
- *
- * @summary
- * A read-only input component with a copy-to-clipboard button.
- * Supports optional value masking with a toggle to reveal the hidden value.
- *
- * @attr {string} value - The value to display and copy.
- * @attr {string} masked-value - An alternative masked display value (for example, "••••••").
- * @attr {string} label - Label for the copy button. Defaults to the localized "Copy" text.
- * @attr {boolean} readonly - Makes the inner input readonly.
- * @attr {boolean} disabled - Disables the inner input.
- * @attr {boolean} masked-toggle - Shows a toggle button to reveal/hide the masked value.
- * @attr {("text"|"password"|"email"|"number"|"tel"|"url"|"search"|"date"|"datetime-local"|"time"|"color")} type - Sets the input type.
- * @attr {string} placeholder - Placeholder text for the input.
- * @attr {string} validation-message - Custom validation message.
- * @attr {boolean} auto-validate - Validates the input on blur.
- */
 @customElement("ha-input-copy")
 export class HaInputCopy extends LitElement {
   @property({ attribute: "value" }) public value!: string;

src/components/input/ha-input-multi.ts

@@ -14,23 +14,6 @@ import "../ha-sortable";
 import "./ha-input";
 import type { HaInput, InputType } from "./ha-input";
 
-/**
- * Home Assistant multi-value input component
- *
- * @element ha-input-multi
- * @extends {LitElement}
- *
- * @summary
- * A dynamic list of text inputs that allows adding, removing, and optionally reordering values.
- * Useful for managing arrays of strings such as URLs, tags, or other repeated text values.
- *
- * @attr {boolean} disabled - Disables all inputs and buttons.
- * @attr {boolean} sortable - Enables drag-and-drop reordering of items.
- * @attr {boolean} item-index - Appends a 1-based index number to each item's label.
- * @attr {boolean} update-on-blur - Fires value-changed on blur instead of on input.
- *
- * @fires value-changed - Fired when the list of values changes. `event.detail.value` contains the new string array.
- */
 @customElement("ha-input-multi")
 class HaInputMulti extends LitElement {
   @property({ attribute: false }) public value?: string[];
@@ -39,19 +22,19 @@ class HaInputMulti extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
+  @property({ attribute: false }) public helper?: string;
 
-  @property({ attribute: "input-type" }) public inputType?: InputType;
+  @property({ attribute: false }) public inputType?: InputType;
 
-  @property({ attribute: "input-suffix" }) public inputSuffix?: string;
+  @property({ attribute: false }) public inputSuffix?: string;
 
-  @property({ attribute: "input-prefix" }) public inputPrefix?: string;
+  @property({ attribute: false }) public inputPrefix?: string;
 
-  @property() public autocomplete?: string;
+  @property({ attribute: false }) public autocomplete?: string;
 
-  @property({ attribute: "add-label" }) public addLabel?: string;
+  @property({ attribute: false }) public addLabel?: string;
 
-  @property({ attribute: "remove-label" }) public removeLabel?: string;
+  @property({ attribute: false }) public removeLabel?: string;
 
   @property({ attribute: "item-index", type: Boolean })
   public itemIndex = false;

src/components/input/ha-input-search.ts

@@ -5,16 +5,6 @@ import { customElement, state } from "lit/decorators";
 import { localizeContext } from "../../data/context";
 import { HaInput } from "./ha-input";
 
-/**
- * Home Assistant search input component
- *
- * @element ha-input-search
- * @extends {HaInput}
- *
- * @summary
- * A pre-configured search input that extends `ha-input` with a magnify icon, clear button,
- * and a localized "Search" placeholder. Autocomplete is disabled by default.
- */
 @customElement("ha-input-search")
 export class HaInputSearch extends HaInput {
   @state()

src/components/input/ha-input.ts

@@ -19,7 +19,6 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "../ha-tooltip";
-import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
 
 export type InputType =
   | "date"
@@ -34,49 +33,6 @@ export type InputType =
   | "color"
   | "url";
 
-/**
- * Home Assistant input component
- *
- * @element ha-input
- * @extends {LitElement}
- *
- * @summary
- * 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.
- *
- * @slot start - Content placed before the input (usually for icons or prefixes).
- * @slot end - Content placed after the input (usually for icons or suffixes).
- * @slot label - Custom label content. Overrides the `label` property.
- * @slot hint - Custom hint content. Overrides the `hint` property.
- * @slot clear-icon - Custom clear icon. Defaults to a close icon button.
- * @slot show-password-icon - Custom show password icon. Defaults to an eye icon button.
- * @slot hide-password-icon - Custom hide password icon. Defaults to an eye-off icon button.
- *
- * @csspart wa-base - The underlying wa-input base wrapper.
- * @csspart wa-hint - The underlying wa-input hint container.
- * @csspart wa-input - The underlying wa-input input element.
- *
- * @cssprop --ha-input-padding-top - Padding above the input.
- * @cssprop --ha-input-padding-bottom - Padding below the input. Defaults to `var(--ha-space-2)`.
- * @cssprop --ha-input-text-align - Text alignment of the input. Defaults to `start`.
- * @cssprop --ha-input-required-marker - The marker shown after the label for required fields. Defaults to `"*"`.
- *
- * @attr {("material"|"outlined")} appearance - Sets the input appearance style. "material" is the default filled style, "outlined" uses a bordered style.
- * @attr {("date"|"datetime-local"|"email"|"number"|"password"|"search"|"tel"|"text"|"time"|"color"|"url")} type - Sets the input type.
- * @attr {string} label - The input's label text.
- * @attr {string} hint - The input's hint/helper text.
- * @attr {string} placeholder - Placeholder text shown when the input is empty.
- * @attr {boolean} with-clear - Adds a clear button when the input is not empty.
- * @attr {boolean} readonly - Makes the input readonly.
- * @attr {boolean} disabled - Disables the input and prevents user interaction.
- * @attr {boolean} required - Makes the input a required field.
- * @attr {boolean} password-toggle - Adds a button to toggle the password visibility.
- * @attr {boolean} without-spin-buttons - Hides the browser's built-in spin buttons for number inputs.
- * @attr {boolean} auto-validate - Validates the input on blur instead of on form submit.
- * @attr {boolean} invalid - Marks the input as invalid.
- * @attr {boolean} inset-label - Uses an inset label style where the label stays inside the input.
- * @attr {string} validation-message - Custom validation message shown when the input is invalid.
- */
 @customElement("ha-input")
 export class HaInput extends LitElement {
   @property({ reflect: true }) appearance: "material" | "outlined" = "material";
@@ -87,6 +43,10 @@ export class HaInput extends LitElement {
   @property()
   public value?: string;
 
+  /** Draws a pill-style input with rounded edges. */
+  @property({ type: Boolean })
+  public pill = false;
+
   /** The input's label. */
   @property()
   public label = "";
@@ -236,8 +196,7 @@ export class HaInput extends LitElement {
     this,
     "label",
     "hint",
-    "input",
-    "start"
+    "input"
   );
 
   static shadowRootOptions: ShadowRootInit = {
@@ -289,9 +248,7 @@ export class HaInput extends LitElement {
   }
 
   public checkValidity(): boolean {
-    return nativeElementInternalsSupported
-      ? (this._input?.checkValidity() ?? true)
-      : true;
+    return this._input?.checkValidity() ?? true;
   }
 
   public reportValidity(): boolean {
@@ -322,8 +279,6 @@ export class HaInput extends LitElement {
       ? false
       : this._hasSlotController.test("hint");
 
-    const hasStartSlot = this._hasSlotController.test("start");
-
     return html`
       <wa-input
         .type=${this.type}
@@ -354,8 +309,7 @@ export class HaInput extends LitElement {
           invalid: this.invalid || this._invalid,
           "label-raised":
             (this.value !== undefined && this.value !== "") ||
-            (this.label && this.placeholder) ||
-            (hasStartSlot && this.insetLabel),
+            (this.label && this.placeholder),
           "no-label": !this.label,
           "hint-hidden":
             !this.hint &&
@@ -530,8 +484,7 @@ export class HaInput extends LitElement {
     }
 
     wa-input.label-raised::part(label),
-    :host(:focus-within) wa-input::part(label),
-    :host([type="date"]) wa-input::part(label) {
+    :host(:focus-within) wa-input::part(label) {
       padding-top: var(--ha-space-3);
       font-size: var(--ha-font-size-xs);
     }
@@ -596,7 +549,6 @@ export class HaInput extends LitElement {
     }
     :host([type="color"]) wa-input::part(input) {
       padding-top: var(--ha-space-6);
-      padding-bottom: 2px;
       cursor: pointer;
     }
     :host([type="color"]) wa-input.no-label::part(input) {
@@ -628,12 +580,8 @@ export class HaInput extends LitElement {
       background-color: var(--ha-color-form-background-disabled);
     }
 
-    wa-input:disabled::part(label) {
-      opacity: 0.5;
-    }
-
     wa-input::part(hint) {
-      min-height: var(--ha-space-5);
+      height: var(--ha-space-5);
       margin-block-start: 0;
       margin-inline-start: var(--ha-space-3);
       font-size: var(--ha-font-size-xs);
@@ -644,7 +592,6 @@ export class HaInput extends LitElement {
 
     wa-input.hint-hidden::part(hint) {
       height: 0;
-      min-height: 0;
     }
 
     .error {

src/components/media-player/dialog-media-manage.ts

@@ -1,10 +1,10 @@
 import { animate } from "@lit-labs/motion";
 
 import {
-  mdiCheckboxBlankOutline,
-  mdiCheckboxMarkedOutline,
   mdiClose,
   mdiDelete,
+  mdiCheckboxBlankOutline,
+  mdiCheckboxMarkedOutline,
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -26,8 +26,8 @@ import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-check-list-item";
 import "../ha-dialog";
-import "../ha-dialog-footer";
 import "../ha-dialog-header";
+import "../ha-dialog-footer";
 import "../ha-icon-button";
 import "../ha-list";
 import "../ha-spinner";
@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                   )}
                 </ha-list>
               `}
-        ${isComponentLoaded(this.hass.config, "hassio")
+        ${isComponentLoaded(this.hass, "hassio")
           ? html`<ha-tip .hass=${this.hass}>
               ${this.hass.localize(
                 "ui.components.media-browser.file_management.tip_media_storage",

src/components/target-picker/ha-target-picker-item-row.ts

@@ -524,13 +524,7 @@ export class HaTargetPickerItemRow extends LitElement {
       }
 
       return {
-        name: device
-          ? computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
-          : item,
+        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
         context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
         fallbackIconPath: mdiDevices,
         notFound: !device,
@@ -541,7 +535,7 @@ export class HaTargetPickerItemRow extends LitElement {
 
       const stateObject: HassEntity | undefined = this.hass.states[item];
       const entityName = stateObject
-        ? computeEntityName(stateObject, this.hass.entities, this.hass.devices)
+        ? computeEntityName(stateObject, this.hass.entities)
         : item;
       const { area, device } = stateObject
         ? getEntityContext(

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -161,13 +161,7 @@ export class HaTargetPickerValueChip extends LitElement {
       }
 
       return {
-        name: device
-          ? computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
-          : itemId,
+        name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
         fallbackIconPath: mdiDevices,
       };
     }

src/components/tile/ha-tile-info.ts

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -13,8 +12,6 @@ import { customElement, property } from "lit/decorators";
  * @slot primary - The primary text container.
  * @slot secondary - The secondary text container.
  *
- * @property {boolean} secondaryLoading - Whether the secondary text is loading. Shows a skeleton placeholder.
- *
  * @cssprop --ha-tile-info-primary-font-size - The font size of the primary text. defaults to `var(--ha-font-size-m)`.
  * @cssprop --ha-tile-info-primary-font-weight - The font weight of the primary text. defaults to `var(--ha-font-weight-medium)`.
  * @cssprop --ha-tile-info-primary-line-height - The line height of the primary text. defaults to `var(--ha-line-height-normal)`.
@@ -32,31 +29,21 @@ export class HaTileInfo extends LitElement {
 
   @property() public secondary?: string;
 
-  @property({ type: Boolean, attribute: "secondary-loading" })
-  public secondaryLoading = false;
-
   protected render() {
     return html`
       <div class="info">
         <slot name="primary" class="primary">
           <span>${this.primary}</span>
         </slot>
-        ${this.secondaryLoading
-          ? html`<div class="secondary">
-              <wa-skeleton class="placeholder" effect="pulse"></wa-skeleton>
-            </div>`
-          : html`<slot name="secondary" class="secondary">
-              <span>${this.secondary}</span>
-            </slot>`}
+        <slot name="secondary" class="secondary">
+          <span>${this.secondary}</span>
+        </slot>
       </div>
     `;
   }
 
   static styles = css`
     :host {
-      display: block;
-      width: 100%;
-      min-width: 0;
       --tile-info-primary-font-size: var(
         --ha-tile-info-primary-font-size,
         var(--ha-font-size-m)
@@ -125,15 +112,6 @@ export class HaTileInfo extends LitElement {
       line-height: var(--tile-info-secondary-line-height);
       letter-spacing: var(--tile-info-secondary-letter-spacing);
       color: var(--tile-info-secondary-color);
-      width: 100%;
-    }
-    .placeholder {
-      width: 140px;
-      max-width: 100%;
-      height: var(--tile-info-secondary-font-size);
-      --wa-border-radius-pill: var(--ha-border-radius-sm);
-      --color: var(--ha-color-fill-neutral-normal-resting);
-      --sheen-color: var(--ha-color-fill-neutral-loud-resting);
     }
   `;
 }

src/components/trace/ha-trace-logbook.ts

@@ -32,9 +32,7 @@ export class HaTraceLogbook extends LitElement {
           ></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this.hass.localize(
-            "ui.panel.config.automation.trace.path.no_logbook_entries"
-          )}
+          No Logbook entries found for this step.
         </div>`;
   }