Data tables: do not show "Assistants" column in "secondary" when narrow (#29120 )

fix a column for "narrow"
Media player fixes (#29075 )
2026-05-24 10:07:11 +00:00 · 2026-01-22 09:37:03 +02:00 · 2026-01-21 20:28:32 +01:00 · 2026-01-21 17:11:23 +01:00 · 2026-01-21 16:13:03 +02:00 · 2026-01-21 15:12:15 +02:00
773 changed files with 28280 additions and 13642 deletions
@@ -22,11 +22,13 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 ```bash
 yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler
+yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
 yarn test          # Vitest
 script/develop     # Development server
 ```

+> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
+
 ### Component Prefixes

 - `ha-` - Home Assistant components
@@ -154,7 +156,7 @@ try {

 - **Use CSS custom properties**: Leverage the theme system
 - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
+  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
  - Defined in `src/resources/theme/core.globals.ts`
  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
@@ -619,7 +621,6 @@ this.hass.localize("ui.panel.config.updates.update_available", {

 #### Key Terminology

- **"add-on"** (hyphenated, not "addon")
 - **"integration"** (preferred over "component")
 - **Technical terms**: Use lowercase (automation, entity, device, service)

@@ -711,7 +712,7 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - [ ] American English spelling
 - [ ] Friendly, informational tone
 - [ ] Avoids abbreviations and jargon
- [ ] Correct terminology (add-on not addon, integration not component)
+- [ ] Correct terminology (integration not component)

 ### Component-Specific Checks

@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -61,7 +61,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,7 +37,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
        with:
          path: |
            node_modules/.cache/prettier
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,11 +89,18 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
          if-no-files-found: error
+      - name: Upload frontend build
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        with:
+          name: frontend-build
+          path: hass_frontend/
+          if-no-files-found: error
+          retention-days: 7
  supervisor:
    name: Build supervisor
    needs: [lint, test]
@@ -102,7 +109,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +120,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -36,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/init@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
        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@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/autobuild@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/analyze@cdefb33c0f6224e58673d9004f47f7cb3e328b89 # v4.31.10
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -9,7 +9,7 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
+      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
        with:
          name: translations
          path: translations.tar.gz
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@c45aaa919ef85620af54242a241ac17a8fa35983 # v3.2.1
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
@@ -19,8 +19,11 @@ jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
+    environment: pypi
    permissions:
      contents: write # Required to upload release assets
+      id-token: write # For "Trusted Publisher" to PyPi
+    if: github.repository_owner == 'home-assistant'
    steps:
      - name: Checkout the repository
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -34,7 +37,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -46,14 +49,18 @@ jobs:
        run: ./script/translations_download
        env:
          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+
      - name: Build and release package
        run: |
-          python3 -m pip install twine build
-          export TWINE_USERNAME="__token__"
-          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+          python3 -m pip install build
          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
          script/release

+      - name: Publish to PyPI
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        with:
+          skip-existing: true
+
      - name: Upload release assets
        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
        with:
@@ -93,7 +100,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -122,7 +129,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-/node_modules/
+node_modules/
 yarn-error.log
 npm-debug.log

@@ -56,4 +56,5 @@ test/coverage/

 # AI tooling
 .claude
+.cursor

@@ -1 +1 @@
-22.21.1
+24.13.0
@@ -1,5 +1,7 @@
 compressionLevel: mixed

+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""

 enableGlobalCache: false
@@ -20,8 +20,6 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
  [
-    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
    // Icons in supervisor conflict with icons in HA so we don't load.
    (isHassioBuild || isLandingPageBuild) &&
      require.resolve(
@@ -168,12 +168,16 @@ const createRspackConfig = ({
          );
        },
      }),
-      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
-        path.resolve(paths.root_dir, "src/util/empty.js")
-      ),
+      bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).length
+        ? new rspack.NormalModuleReplacementPlugin(
+            new RegExp(
+              bundle
+                .emptyPackages({ isHassioBuild, isLandingPageBuild })
+                .join("|")
+            ),
+            path.resolve(paths.root_dir, "src/util/empty.js")
+          )
+        : false,
      !isProdBuild && new LogStartCompilePlugin(),
      isProdBuild &&
        new StatsWriterPlugin({
@@ -201,6 +205,7 @@ const createRspackConfig = ({
        "lit/decorators$": "lit/decorators.js",
        "lit/directive$": "lit/directive.js",
        "lit/directives/until$": "lit/directives/until.js",
+        "lit/directives/ref$": "lit/directives/ref.js",
        "lit/directives/class-map$": "lit/directives/class-map.js",
        "lit/directives/style-map$": "lit/directives/style-map.js",
        "lit/directives/if-defined$": "lit/directives/if-defined.js",
@@ -209,7 +214,9 @@ const createRspackConfig = ({
        "lit/directives/join$": "lit/directives/join.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
        "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": "lit/directives/keyed.js",
+        "lit/directives/keyed$": latestBuild
+          ? "lit/directives/keyed.js"
+          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
        "lit/polyfill-support$": "lit/polyfill-support.js",
        "@lit-labs/virtualizer/layouts/grid":
          "@lit-labs/virtualizer/layouts/grid.js",
@@ -217,6 +224,42 @@ const createRspackConfig = ({
          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
        "@lit-labs/observers/resize-controller":
          "@lit-labs/observers/resize-controller.js",
+        "@formatjs/intl-durationformat/should-polyfill$":
+          "@formatjs/intl-durationformat/should-polyfill.js",
+        "@formatjs/intl-durationformat/polyfill-force$":
+          "@formatjs/intl-durationformat/polyfill-force.js",
+        "@formatjs/intl-datetimeformat/should-polyfill":
+          "@formatjs/intl-datetimeformat/should-polyfill.js",
+        "@formatjs/intl-datetimeformat/polyfill-force":
+          "@formatjs/intl-datetimeformat/polyfill-force.js",
+        "@formatjs/intl-displaynames/should-polyfill":
+          "@formatjs/intl-displaynames/should-polyfill.js",
+        "@formatjs/intl-displaynames/polyfill-force":
+          "@formatjs/intl-displaynames/polyfill-force.js",
+        "@formatjs/intl-getcanonicallocales/should-polyfill":
+          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
+        "@formatjs/intl-getcanonicallocales/polyfill-force":
+          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
+        "@formatjs/intl-listformat/should-polyfill":
+          "@formatjs/intl-listformat/should-polyfill.js",
+        "@formatjs/intl-listformat/polyfill-force":
+          "@formatjs/intl-listformat/polyfill-force.js",
+        "@formatjs/intl-locale/should-polyfill":
+          "@formatjs/intl-locale/should-polyfill.js",
+        "@formatjs/intl-locale/polyfill-force":
+          "@formatjs/intl-locale/polyfill-force.js",
+        "@formatjs/intl-numberformat/should-polyfill":
+          "@formatjs/intl-numberformat/should-polyfill.js",
+        "@formatjs/intl-numberformat/polyfill-force":
+          "@formatjs/intl-numberformat/polyfill-force.js",
+        "@formatjs/intl-pluralrules/should-polyfill":
+          "@formatjs/intl-pluralrules/should-polyfill.js",
+        "@formatjs/intl-pluralrules/polyfill-force":
+          "@formatjs/intl-pluralrules/polyfill-force.js",
+        "@formatjs/intl-relativetimeformat/should-polyfill":
+          "@formatjs/intl-relativetimeformat/should-polyfill.js",
+        "@formatjs/intl-relativetimeformat/polyfill-force":
+          "@formatjs/intl-relativetimeformat/polyfill-force.js",
      },
    },
    output: {
@@ -5,17 +5,19 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    const media = loadRequestData.media;
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
+      // type definition is wrong, should be "FMP4" instead of "fmp4"
+      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -1,10 +1,9 @@
-import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
 import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
+import { framework } from "./cast_framework";
 import { HcMain } from "./layout/hc-main";
-import type { ReceivedMessage } from "./types";

 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
@@ -40,7 +39,8 @@ const playDummyMedia = (viewTitle?: string) => {
  loadRequestData.media.contentId =
    "https://cast.home-assistant.io/images/google-nest-hub.png";
  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -89,31 +89,30 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  // type definition is wrong, should be "JSON" instead of "json"
+  // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.system#.MessageType
+  [CAST_NS]: "JSON" as framework.system.MessageType.JSON,
 };

-castContext.addCustomMessageListener(
-  CAST_NS,
-  // @ts-ignore
-  (ev: ReceivedMessage<HassMessage>) => {
-    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
-      playerManager.stop();
-    } else {
-      showLovelaceController();
-    }
-    const msg = ev.data;
-    msg.senderId = ev.senderId;
-    lovelaceController.processIncomingMessage(msg);
+castContext.addCustomMessageListener(CAST_NS, (ev) => {
+  // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+  if (
+    playerManager.getPlayerState() !==
+    ("IDLE" as framework.messages.PlayerState.IDLE)
+  ) {
+    playerManager.stop();
+  } else {
+    showLovelaceController();
  }
-);
+  const msg = ev.data as HassMessage;
+  msg.senderId = ev.senderId;
+  lovelaceController.processIncomingMessage(msg);
+});

 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    if (
      loadRequestData.media.contentId ===
@@ -127,24 +126,26 @@ playerManager.setMessageInterceptor(
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
+      // type definition is wrong, should be "FMP4" instead of "fmp4"
+      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
 );

 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState ===
+        ("IDLE" as framework.messages.PlayerState.IDLE) &&
      event.mediaStatus?.idleReason &&
      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
@@ -1,6 +0,0 @@
-export interface ReceivedMessage<T> {
-  gj: boolean;
-  data: T;
-  senderId: string;
-  type: "message";
-}
@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockAreaRegistry = (
@@ -1,4 +1,4 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockDeviceRegistry = (
@@ -1,4 +1,4 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockEntityRegistry = (
@@ -1,4 +1,4 @@
-import type { LabelRegistryEntry } from "../../../src/data/label_registry";
+import type { LabelRegistryEntry } from "../../../src/data/label/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockLabelRegistry = (
@@ -187,5 +187,11 @@ export default tseslint.config(
      ],
      "no-use-before-define": "off",
    },
+  },
+  {
+    files: ["src/util/recorder-worklet.js"],
+    languageOptions: {
+      globals: globals.audioWorklet,
+    },
  }
 );
@@ -142,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
        <div class="action">
          <span>
            ${this._action
-              ? describeAction(this.hass, [], [], {}, this._action)
+              ? describeAction(this.hass, [], this._action)
              : "<invalid YAML>"}
          </span>
          <ha-yaml-editor
@@ -155,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
        ${ACTIONS.map(
          (conf) => html`
            <div class="action">
-              <span>${describeAction(this.hass, [], [], {}, conf as any)}</span>
+              <span>${describeAction(this.hass, [], conf as any)}</span>
              <pre>${dump(conf)}</pre>
            </div>
          `
@@ -10,12 +10,12 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";

 const ENTITIES = [
  getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -169,7 +169,7 @@ const SCHEMAS: {
  {
    title: "Selectors",
    translations: {
-      addon: "Addon",
+      addon: "App",
      entity: "Entity",
      device: "Device",
      area: "Area",
@@ -11,11 +11,11 @@ import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -40,6 +40,9 @@ const ENTITIES = [
  getEntity("switch", "coffee", "off", {
    friendly_name: "Coffee",
  }),
+  getEntity("number", "number", 5, {
+    friendly_name: "Number",
+  }),
 ];

 const DEVICES: DeviceRegistryEntry[] = [
@@ -236,7 +239,7 @@ const SCHEMAS: {
        selector: { config_entry: {} },
      },
      duration: { name: "Duration", selector: { duration: {} } },
-      addon: { name: "Addon", selector: { addon: {} } },
+      addon: { name: "App", selector: { addon: {} } },
      number_box: {
        name: "Number Box",
        selector: {
@@ -377,6 +380,33 @@ const SCHEMAS: {
        name: "Constant",
        selector: { constant: { value: true, label: "Yes!" } },
      },
+      choose: {
+        name: "Choose",
+        selector: {
+          choose: {
+            choices: {
+              number: {
+                selector: {
+                  number: {
+                    min: 0,
+                    max: 100,
+                    step: 0.1,
+                  },
+                },
+              },
+              entity: {
+                selector: {
+                  entity: {
+                    filter: {
+                      domain: "number",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
    },
  },
  {
@@ -6,8 +6,8 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { IntegrationManifest } from "../../../../src/data/integration";

-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
-import type { EntityRegistryEntry } from "../../../../src/data/entity_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { EntityRegistryEntry } from "../../../../src/data/entity/entity_registry";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/integrations/ha-config-flow-card";
 import type {
@@ -83,10 +83,10 @@ export class HassioAddonRepositoryEl extends LitElement {
                        ? this.supervisor.localize(
                            "common.new_version_available"
                          )
-                        : this.supervisor.localize("addon.state.installed")
+                        : this.supervisor.localize("app.state.installed")
                      : addon.available
-                        ? this.supervisor.localize("addon.state.not_installed")
-                        : this.supervisor.localize("addon.state.not_available")}
+                        ? this.supervisor.localize("app.state.not_installed")
+                        : this.supervisor.localize("app.state.not_available")}
                    .iconClass=${addon.installed
                      ? addon.update_available
                        ? "update"
@@ -120,7 +120,7 @@ export class HassioAddonStore extends LitElement {
          ? html`
              <div class="advanced">
                <a href="/profile" target="_top">
-                  ${this.supervisor.localize("store.missing_addons")}
+                  ${this.supervisor.localize("store.missing_apps")}
                </a>
              </div>
            `
@@ -44,7 +44,7 @@ class HassioAddonAudio extends LitElement {
    return html`
      <ha-card
        outlined
-        .header=${this.supervisor.localize("addon.configuration.audio.header")}
+        .header=${this.supervisor.localize("app.configuration.audio.header")}
      >
        <div class="card-content">
          ${this._error
@@ -52,9 +52,7 @@ class HassioAddonAudio extends LitElement {
            : nothing}
          ${this._inputDevices &&
          html`<ha-select
-            .label=${this.supervisor.localize(
-              "addon.configuration.audio.input"
-            )}
+            .label=${this.supervisor.localize("app.configuration.audio.input")}
            @selected=${this._setInputDevice}
            @closed=${stopPropagation}
            fixedMenuPosition
@@ -72,9 +70,7 @@ class HassioAddonAudio extends LitElement {
          </ha-select>`}
          ${this._outputDevices &&
          html`<ha-select
-            .label=${this.supervisor.localize(
-              "addon.configuration.audio.output"
-            )}
+            .label=${this.supervisor.localize("app.configuration.audio.output")}
            @selected=${this._setOutputDevice}
            @closed=${stopPropagation}
            fixedMenuPosition
@@ -153,7 +149,7 @@ class HassioAddonAudio extends LitElement {

    const noDevice: HassioHardwareAudioDevice = {
      device: "default",
-      name: this.supervisor.localize("addon.configuration.audio.default"),
+      name: this.supervisor.localize("app.configuration.audio.default"),
    };

    try {
@@ -81,7 +81,7 @@ class HassioAddonConfigDashboard extends LitElement {
                  `
                : nothing}
            `
-          : this.supervisor.localize("addon.configuration.no_configuration")}
+          : this.supervisor.localize("app.configuration.no_configuration")}
      </div>
    `;
  }
@@ -219,7 +219,7 @@ class HassioAddonConfig extends LitElement {
      <ha-card outlined>
        <div class="header">
          <h2>
-            ${this.supervisor.localize("addon.configuration.options.header")}
+            ${this.supervisor.localize("app.configuration.options.header")}
          </h2>
          <div class="card-menu">
            <ha-button-menu @action=${this._handleAction}>
@@ -231,10 +231,10 @@ class HassioAddonConfig extends LitElement {
              <ha-list-item .disabled=${!this._canShowSchema || this.disabled}>
                ${this._yamlMode
                  ? this.supervisor.localize(
-                      "addon.configuration.options.edit_in_ui"
+                      "app.configuration.options.edit_in_ui"
                    )
                  : this.supervisor.localize(
-                      "addon.configuration.options.edit_in_yaml"
+                      "app.configuration.options.edit_in_yaml"
                    )}
              </ha-list-item>
              <ha-list-item
@@ -279,7 +279,7 @@ class HassioAddonConfig extends LitElement {
            : html`
                <ha-alert alert-type="error">
                  ${this.supervisor.localize(
-                    "addon.configuration.options.invalid_yaml"
+                    "app.configuration.options.invalid_yaml"
                  )}
                </ha-alert>
              `}
@@ -288,7 +288,7 @@ class HassioAddonConfig extends LitElement {
          ? html`<ha-formfield
              class="show-additional"
              .label=${this.supervisor.localize(
-                "addon.configuration.options.show_unused_optional"
+                "app.configuration.options.show_unused_optional"
              )}
            >
              <ha-switch
@@ -397,7 +397,7 @@ class HassioAddonConfig extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_reset", {
+      this._error = this.supervisor.localize("app.failed_to_reset", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -440,7 +440,7 @@ class HassioAddonConfig extends LitElement {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
      }
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
      eventdata.success = false;
@@ -56,14 +56,12 @@ class HassioAddonNetwork extends LitElement {
    return html`
      <ha-card
        outlined
-        .header=${this.supervisor.localize(
-          "addon.configuration.network.header"
-        )}
+        .header=${this.supervisor.localize("app.configuration.network.header")}
      >
        <div class="card-content">
          <p>
            ${this.supervisor.localize(
-              "addon.configuration.network.introduction"
+              "app.configuration.network.introduction"
            )}
          </p>
          ${this._error
@@ -87,7 +85,7 @@ class HassioAddonNetwork extends LitElement {
          ? html`<ha-formfield
              class="show-optional"
              .label=${this.supervisor.localize(
-                "addon.configuration.network.show_disabled"
+                "app.configuration.network.show_disabled"
              )}
            >
              <ha-switch
@@ -187,7 +185,7 @@ class HassioAddonNetwork extends LitElement {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
      }
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_reset", {
+      this._error = this.supervisor.localize("app.failed_to_reset", {
        error: extractApiErrorMessage(err),
      });
      button.actionError();
@@ -229,7 +227,7 @@ class HassioAddonNetwork extends LitElement {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
      }
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
      button.actionError();
@@ -83,7 +83,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
      );
    } catch (err: any) {
      this._error = this.supervisor.localize(
-        "addon.documentation.get_documentation",
+        "app.documentation.get_documentation",
        { error: extractApiErrorMessage(err) }
      );
    }
@@ -2,7 +2,7 @@ import {
  mdiCogs,
  mdiFileDocument,
  mdiInformationVariant,
-  mdiMathLog,
+  mdiTextBoxOutline,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -89,7 +89,7 @@ class HassioAddonDashboard extends LitElement {

    const addonTabs: PageNavigation[] = [
      {
-        translationKey: "addon.panel.info",
+        translationKey: "app.panel.info",
        path: `/hassio/addon/${this.addon.slug}/info`,
        iconPath: mdiInformationVariant,
      },
@@ -97,7 +97,7 @@ class HassioAddonDashboard extends LitElement {

    if (this.addon.documentation) {
      addonTabs.push({
-        translationKey: "addon.panel.documentation",
+        translationKey: "app.panel.documentation",
        path: `/hassio/addon/${this.addon.slug}/documentation`,
        iconPath: mdiFileDocument,
      });
@@ -106,14 +106,14 @@ class HassioAddonDashboard extends LitElement {
    if (this.addon.version) {
      addonTabs.push(
        {
-          translationKey: "addon.panel.configuration",
+          translationKey: "app.panel.configuration",
          path: `/hassio/addon/${this.addon.slug}/config`,
          iconPath: mdiCogs,
        },
        {
-          translationKey: "addon.panel.log",
+          translationKey: "app.panel.log",
          path: `/hassio/addon/${this.addon.slug}/logs`,
-          iconPath: mdiMathLog,
+          iconPath: mdiTextBoxOutline,
        }
      );
    }
@@ -195,10 +195,10 @@ class HassioAddonDashboard extends LitElement {
        ) {
          if (
            !(await showConfirmationDialog(this, {
-              title: this.supervisor.localize("my.add_addon_repository_title"),
+              title: this.supervisor.localize("my.add_app_repository_title"),
              text: this.supervisor.localize(
-                "my.add_addon_repository_description",
-                { addon: requestedAddon, repository: requestedAddonRepository }
+                "my.add_app_repository_description",
+                { app: requestedAddon, repository: requestedAddonRepository }
              ),
              confirmText: this.supervisor.localize("common.add"),
              dismissText: this.supervisor.localize("common.cancel"),
@@ -224,7 +224,7 @@ class HassioAddonDashboard extends LitElement {
          (addon) => addon.slug === requestedAddon
        );
        if (!validAddon) {
-          this._error = this.supervisor.localize("my.error_addon_not_found");
+          this._error = this.supervisor.localize("my.error_app_not_found");
        } else {
          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
        }
@@ -150,11 +150,11 @@ class HassioAddonInfo extends LitElement {
        : undefined;
    const metrics = [
      {
-        description: this.supervisor.localize("addon.dashboard.cpu_usage"),
+        description: this.supervisor.localize("app.dashboard.cpu_usage"),
        value: this._metrics?.cpu_percent,
      },
      {
-        description: this.supervisor.localize("addon.dashboard.ram_usage"),
+        description: this.supervisor.localize("app.dashboard.ram_usage"),
        value: this._metrics?.memory_percent,
        tooltip: `${bytesToString(this._metrics?.memory_usage)}/${bytesToString(
          this._metrics?.memory_limit
@@ -181,11 +181,11 @@ class HassioAddonInfo extends LitElement {
            <ha-alert
              alert-type="error"
              .title=${this.supervisor.localize(
-                "addon.dashboard.protection_mode.title"
+                "app.dashboard.protection_mode.title"
              )}
            >
              ${this.supervisor.localize(
-                "addon.dashboard.protection_mode.content"
+                "app.dashboard.protection_mode.content"
              )}
              <ha-button
                variant="danger"
@@ -193,7 +193,7 @@ class HassioAddonInfo extends LitElement {
                @click=${this._protectionToggled}
              >
                ${this.supervisor.localize(
-                  "addon.dashboard.protection_mode.enable"
+                  "app.dashboard.protection_mode.enable"
                )}
              </ha-button>
            </ha-alert>
@@ -220,7 +220,7 @@ class HassioAddonInfo extends LitElement {
                      ? html`
                          <ha-svg-icon
                            .title=${this.supervisor.localize(
-                              "dashboard.addon_running"
+                              "dashboard.app_running"
                            )}
                            class="running"
                            .path=${mdiPlayCircle}
@@ -229,7 +229,7 @@ class HassioAddonInfo extends LitElement {
                      : html`
                          <ha-svg-icon
                            .title=${this.supervisor.localize(
-                              "dashboard.addon_stopped"
+                              "dashboard.app_stopped"
                            )}
                            class="stopped"
                            .path=${mdiCircleOffOutline}
@@ -242,22 +242,19 @@ class HassioAddonInfo extends LitElement {
          <div class="description light-color">
            ${this.addon.version
              ? html`
-                  ${this.supervisor.localize(
-                    "addon.dashboard.current_version",
-                    { version: this.addon.version }
-                  )}
+                  ${this.supervisor.localize("app.dashboard.current_version", {
+                    version: this.addon.version,
+                  })}
                  <div class="changelog" @click=${this._openChangelog}>
                    (<span class="changelog-link"
                      >${this.supervisor.localize(
-                        "addon.dashboard.changelog"
+                        "app.dashboard.changelog"
                      )}</span
                    >)
                  </div>
                `
              : html`<span class="changelog-link" @click=${this._openChangelog}
-                  >${this.supervisor.localize(
-                    "addon.dashboard.changelog"
-                  )}</span
+                  >${this.supervisor.localize("app.dashboard.changelog")}</span
                >`}
          </div>

@@ -274,7 +271,7 @@ class HassioAddonInfo extends LitElement {
                    id="stage"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        `addon.dashboard.capability.stages.${this.addon.stage}`
+                        `app.dashboard.capability.stages.${this.addon.stage}`
                      )
                    )}
                  >
@@ -298,7 +295,7 @@ class HassioAddonInfo extends LitElement {
              id="rating"
              .label=${capitalizeFirstLetter(
                this.supervisor.localize(
-                  "addon.dashboard.capability.label.rating"
+                  "app.dashboard.capability.label.rating"
                )
              )}
            >
@@ -313,7 +310,7 @@ class HassioAddonInfo extends LitElement {
                    id="host_network"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.host"
+                        "app.dashboard.capability.label.host"
                      )
                    )}
                  >
@@ -329,7 +326,7 @@ class HassioAddonInfo extends LitElement {
                    id="full_access"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.hardware"
+                        "app.dashboard.capability.label.hardware"
                      )
                    )}
                  >
@@ -345,7 +342,7 @@ class HassioAddonInfo extends LitElement {
                    id="homeassistant_api"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.core"
+                        "app.dashboard.capability.label.core"
                      )
                    )}
                  >
@@ -364,7 +361,7 @@ class HassioAddonInfo extends LitElement {
                    id="hassio_api"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                        `app.dashboard.capability.role.${this.addon.hassio_role}`
                      ) || this.addon.hassio_role
                    )}
                  >
@@ -383,7 +380,7 @@ class HassioAddonInfo extends LitElement {
                    id="docker_api"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.docker"
+                        "app.dashboard.capability.label.docker"
                      )
                    )}
                  >
@@ -399,7 +396,7 @@ class HassioAddonInfo extends LitElement {
                    id="host_pid"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.host_pid"
+                        "app.dashboard.capability.label.host_pid"
                      )
                    )}
                  >
@@ -416,7 +413,7 @@ class HassioAddonInfo extends LitElement {
                    id="apparmor"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.apparmor"
+                        "app.dashboard.capability.label.apparmor"
                      )
                    )}
                  >
@@ -432,7 +429,7 @@ class HassioAddonInfo extends LitElement {
                    id="auth_api"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.auth"
+                        "app.dashboard.capability.label.auth"
                      )
                    )}
                  >
@@ -448,7 +445,7 @@ class HassioAddonInfo extends LitElement {
                    id="ingress"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.ingress"
+                        "app.dashboard.capability.label.ingress"
                      )
                    )}
                  >
@@ -467,7 +464,7 @@ class HassioAddonInfo extends LitElement {
                    id="signed"
                    .label=${capitalizeFirstLetter(
                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.signed"
+                        "app.dashboard.capability.label.signed"
                      )
                    )}
                  >
@@ -482,7 +479,7 @@ class HassioAddonInfo extends LitElement {
                    @click=${this._showSystemManagedDialog}
                    id="system_managed"
                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize("addon.system_managed.badge")
+                      this.supervisor.localize("app.system_managed.badge")
                    )}
                  >
                    <ha-svg-icon
@@ -496,7 +493,7 @@ class HassioAddonInfo extends LitElement {

          <div class="description light-color">
            ${this.addon.description}.<br />
-            ${this.supervisor.localize("addon.dashboard.visit_addon_page", {
+            ${this.supervisor.localize("app.dashboard.visit_app_page", {
              name: html`<a
                href=${this.addon.url!}
                target="_blank"
@@ -527,12 +524,12 @@ class HassioAddonInfo extends LitElement {
                      <ha-settings-row ?three-line=${this.narrow}>
                        <span slot="heading">
                          ${this.supervisor.localize(
-                            "addon.dashboard.option.boot.title"
+                            "app.dashboard.option.boot.title"
                          )}
                        </span>
                        <span slot="description">
                          ${this.supervisor.localize(
-                            "addon.dashboard.option.boot.description"
+                            "app.dashboard.option.boot.description"
                          )}
                        </span>
                        <ha-switch
@@ -548,12 +545,12 @@ class HassioAddonInfo extends LitElement {
                            <ha-settings-row ?three-line=${this.narrow}>
                              <span slot="heading">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.watchdog.title"
+                                  "app.dashboard.option.watchdog.title"
                                )}
                              </span>
                              <span slot="description">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.watchdog.description"
+                                  "app.dashboard.option.watchdog.description"
                                )}
                              </span>
                              <ha-switch
@@ -572,12 +569,12 @@ class HassioAddonInfo extends LitElement {
                            <ha-settings-row ?three-line=${this.narrow}>
                              <span slot="heading">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.auto_update.title"
+                                  "app.dashboard.option.auto_update.title"
                                )}
                              </span>
                              <span slot="description">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.auto_update.description"
+                                  "app.dashboard.option.auto_update.description"
                                )}
                              </span>
                              <ha-switch
@@ -595,12 +592,12 @@ class HassioAddonInfo extends LitElement {
                            <ha-settings-row ?three-line=${this.narrow}>
                              <span slot="heading">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.ingress_panel.title"
+                                  "app.dashboard.option.ingress_panel.title"
                                )}
                              </span>
                              <span slot="description">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.ingress_panel.description"
+                                  "app.dashboard.option.ingress_panel.description"
                                )}
                              </span>
                              <ha-switch
@@ -618,12 +615,12 @@ class HassioAddonInfo extends LitElement {
                            <ha-settings-row ?three-line=${this.narrow}>
                              <span slot="heading">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.protected.title"
+                                  "app.dashboard.option.protected.title"
                                )}
                              </span>
                              <span slot="description">
                                ${this.supervisor.localize(
-                                  "addon.dashboard.option.protected.description"
+                                  "app.dashboard.option.protected.description"
                                )}
                              </span>
                              <ha-switch
@@ -644,7 +641,7 @@ class HassioAddonInfo extends LitElement {
              ${this.addon.version && this.addon.state === "started"
                ? html`<ha-settings-row ?three-line=${this.narrow}>
                      <span slot="heading">
-                        ${this.supervisor.localize("addon.dashboard.hostname")}
+                        ${this.supervisor.localize("app.dashboard.hostname")}
                      </span>
                      <code slot="description"> ${this.addon.hostname} </code>
                    </ha-settings-row>
@@ -671,14 +668,14 @@ class HassioAddonInfo extends LitElement {
              ? html`
                  <ha-alert alert-type="warning">
                    ${this.supervisor.localize(
-                      "addon.dashboard.not_available_arch"
+                      "app.dashboard.not_available_arch"
                    )}
                  </ha-alert>
                `
              : html`
                  <ha-alert alert-type="warning">
                    ${this.supervisor.localize(
-                      "addon.dashboard.not_available_version",
+                      "app.dashboard.not_available_version",
                      {
                        core_version_installed: this.supervisor.core.version,
                        core_version_needed: addonStoreInfo!.homeassistant,
@@ -699,14 +696,14 @@ class HassioAddonInfo extends LitElement {
                      @click=${this._stopClicked}
                      .disabled=${systemManaged && !this.controlEnabled}
                    >
-                      ${this.supervisor.localize("addon.dashboard.stop")}
+                      ${this.supervisor.localize("app.dashboard.stop")}
                    </ha-progress-button>
                    <ha-progress-button
                      variant="danger"
                      appearance="plain"
                      @click=${this._restartClicked}
                    >
-                      ${this.supervisor.localize("addon.dashboard.restart")}
+                      ${this.supervisor.localize("app.dashboard.restart")}
                    </ha-progress-button>
                  `
                : html`
@@ -715,7 +712,7 @@ class HassioAddonInfo extends LitElement {
                      .progress=${this.addon.state === "startup"}
                      appearance="plain"
                    >
-                      ${this.supervisor.localize("addon.dashboard.start")}
+                      ${this.supervisor.localize("app.dashboard.start")}
                    </ha-progress-button>
                  `
              : nothing}
@@ -729,7 +726,7 @@ class HassioAddonInfo extends LitElement {
                    @click=${this._uninstallClicked}
                    .disabled=${systemManaged && !this.controlEnabled}
                  >
-                    ${this.supervisor.localize("addon.dashboard.uninstall")}
+                    ${this.supervisor.localize("app.dashboard.uninstall")}
                  </ha-progress-button>
                  ${this.addon.build
                    ? html`
@@ -738,7 +735,7 @@ class HassioAddonInfo extends LitElement {
                          appearance="plain"
                          @click=${this._rebuildClicked}
                        >
-                          ${this.supervisor.localize("addon.dashboard.rebuild")}
+                          ${this.supervisor.localize("app.dashboard.rebuild")}
                        </ha-progress-button>
                      `
                    : nothing}
@@ -761,7 +758,7 @@ class HassioAddonInfo extends LitElement {
                            : undefined}
                        >
                          ${this.supervisor.localize(
-                            "addon.dashboard.open_web_ui"
+                            "app.dashboard.open_web_ui"
                          )}
                        </ha-button>
                      `
@@ -772,7 +769,7 @@ class HassioAddonInfo extends LitElement {
                    .disabled=${!this.addon.available}
                    @click=${this._installClicked}
                  >
-                    ${this.supervisor.localize("addon.dashboard.install")}
+                    ${this.supervisor.localize("app.dashboard.install")}
                  </ha-progress-button>
                `}
          </div>
@@ -804,7 +801,7 @@ class HassioAddonInfo extends LitElement {
        "state" in this.addon &&
        this.addon.state === "startup"
      ) {
-        // Addon is starting up, wait for it to start
+        // App is starting up, wait for it to start
        this._scheduleDataUpdate();
      }
    }
@@ -858,11 +855,11 @@ class HassioAddonInfo extends LitElement {
  private _showMoreInfo(ev): void {
    const id = ev.currentTarget.id as AddonCapability;
    showHassioMarkdownDialog(this, {
-      title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
+      title: this.supervisor.localize(`app.dashboard.capability.${id}.title`),
      content:
        id === "stage"
          ? this.supervisor.localize(
-              `addon.dashboard.capability.${id}.description`,
+              `app.dashboard.capability.${id}.description`,
              {
                icon_stable: `<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon>`,
                icon_experimental: `<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon>`,
@@ -870,7 +867,7 @@ class HassioAddonInfo extends LitElement {
              }
            )
          : this.supervisor.localize(
-              `addon.dashboard.capability.${id}.description`
+              `app.dashboard.capability.${id}.description`
            ),
    });
  }
@@ -936,7 +933,7 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -956,7 +953,7 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -976,7 +973,7 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -996,7 +993,7 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -1016,7 +1013,7 @@ class HassioAddonInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      this._error = this.supervisor.localize("addon.failed_to_save", {
+      this._error = this.supervisor.localize("app.failed_to_save", {
        error: extractApiErrorMessage(err),
      });
    }
@@ -1030,13 +1027,13 @@ class HassioAddonInfo extends LitElement {
      );

      showHassioMarkdownDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.changelog"),
+        title: this.supervisor.localize("app.dashboard.changelog"),
        content: extractChangelog(this.addon as HassioAddonDetails, content),
      });
    } catch (err: any) {
      showAlertDialog(this, {
        title: this.supervisor.localize(
-          "addon.dashboard.action_error.get_changelog"
+          "app.dashboard.action_error.get_changelog"
        ),
        text: extractApiErrorMessage(err),
      });
@@ -1066,7 +1063,7 @@ class HassioAddonInfo extends LitElement {
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
      showAlertDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.action_error.install"),
+        title: this.supervisor.localize("app.dashboard.action_error.install"),
        text: extractApiErrorMessage(err),
      });
    }
@@ -1091,7 +1088,7 @@ class HassioAddonInfo extends LitElement {
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
      showAlertDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.action_error.stop"),
+        title: this.supervisor.localize("app.dashboard.action_error.stop"),
        text: extractApiErrorMessage(err),
      });
    }
@@ -1112,7 +1109,7 @@ class HassioAddonInfo extends LitElement {
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
      showAlertDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.action_error.restart"),
+        title: this.supervisor.localize("app.dashboard.action_error.restart"),
        text: extractApiErrorMessage(err),
      });
    }
@@ -1127,7 +1124,7 @@ class HassioAddonInfo extends LitElement {
      await rebuildLocalAddon(this.hass, this.addon.slug);
    } catch (err: any) {
      showAlertDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.action_error.rebuild"),
+        title: this.supervisor.localize("app.dashboard.action_error.rebuild"),
        text: extractApiErrorMessage(err),
      });
    }
@@ -1145,12 +1142,12 @@ class HassioAddonInfo extends LitElement {
      if (!validate.valid) {
        await showConfirmationDialog(this, {
          title: this.supervisor.localize(
-            "addon.dashboard.action_error.start_invalid_config"
+            "app.dashboard.action_error.start_invalid_config"
          ),
          text: validate.message.split(" Got ")[0],
          confirm: () => this._openConfiguration(),
          confirmText: this.supervisor.localize(
-            "addon.dashboard.action_error.go_to_config"
+            "app.dashboard.action_error.go_to_config"
          ),
          dismissText: this.supervisor.localize("common.cancel"),
        });
@@ -1162,7 +1159,7 @@ class HassioAddonInfo extends LitElement {
      button.actionError();
      button.progress = false;
      showAlertDialog(this, {
-        title: "Failed to validate addon configuration",
+        title: "Failed to validate app configuration",
        text: extractApiErrorMessage(err),
      });
      return;
@@ -1181,7 +1178,7 @@ class HassioAddonInfo extends LitElement {
      button.actionError();
      button.progress = false;
      showAlertDialog(this, {
-        title: this.supervisor.localize("addon.dashboard.action_error.start"),
+        title: this.supervisor.localize("app.dashboard.action_error.start"),
        text: extractApiErrorMessage(err),
      });
      return;
@@ -1207,13 +1204,13 @@ class HassioAddonInfo extends LitElement {
    };

    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("dialog.uninstall_addon.title", {
+      title: this.supervisor.localize("dialog.uninstall_app.title", {
        name: this.addon.name,
      }),
      text: html`
        <ha-formfield
          .label=${html`<p>
-            ${this.supervisor.localize("dialog.uninstall_addon.remove_data")}
+            ${this.supervisor.localize("dialog.uninstall_app.remove_data")}
          </p>`}
        >
          <ha-switch
@@ -1223,7 +1220,7 @@ class HassioAddonInfo extends LitElement {
          ></ha-switch>
        </ha-formfield>
      `,
-      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
+      confirmText: this.supervisor.localize("dialog.uninstall_app.uninstall"),
      dismissText: this.supervisor.localize("common.cancel"),
      destructive: true,
    });
@@ -1245,9 +1242,7 @@ class HassioAddonInfo extends LitElement {
      button.actionSuccess();
    } catch (err: any) {
      showAlertDialog(this, {
-        title: this.supervisor.localize(
-          "addon.dashboard.action_error.uninstall"
-        ),
+        title: this.supervisor.localize("app.dashboard.action_error.uninstall"),
        text: extractApiErrorMessage(err),
      });
      button.actionError();
@@ -19,14 +19,14 @@ class HassioAddonSystemManaged extends LitElement {
    return html`
      <ha-alert
        alert-type="warning"
-        .title=${this.supervisor.localize("addon.system_managed.title")}
+        .title=${this.supervisor.localize("app.system_managed.title")}
        .narrow=${this.narrow}
      >
-        ${this.supervisor.localize("addon.system_managed.description")}
+        ${this.supervisor.localize("app.system_managed.description")}
        ${!this.hideButton
          ? html`
              <ha-button slot="action" @click=${this._takeControl}>
-                ${this.supervisor.localize("addon.system_managed.take_control")}
+                ${this.supervisor.localize("app.system_managed.take_control")}
              </ha-button>
            `
          : nothing}
@@ -216,7 +216,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor?.localize("backup.addons")}
+                      .label=${this.supervisor?.localize("backup.apps")}
                      .iconPath=${mdiPuzzle}
                    >
                    </supervisor-formfield-label>`}
@@ -33,13 +33,13 @@ class HassioAddons extends LitElement {
          suffix
          .filter=${this._filter}
          @value-changed=${this._handleSearchChange}
-          .label=${this.supervisor.localize("dashboard.search_addons")}
+          .label=${this.supervisor.localize("dashboard.search_apps")}
        >
        </search-input>
      </div>
      <div class="content">
        ${!atLeastVersion(this.hass.config.version, 2021, 12)
-          ? html`<h1>${this.supervisor.localize("dashboard.addons")}</h1>`
+          ? html`<h1>${this.supervisor.localize("dashboard.apps")}</h1>`
          : ""}
        <div class="card-group">
          ${!this.supervisor.addon.addons.length
@@ -47,7 +47,7 @@ class HassioAddons extends LitElement {
                <ha-card outlined>
                  <div class="card-content">
                    <button class="link" @click=${this._openStore}>
-                      ${this.supervisor.localize("dashboard.no_addons")}
+                      ${this.supervisor.localize("dashboard.no_apps")}
                    </button>
                  </div>
                </ha-card>
@@ -67,14 +67,12 @@ class HassioAddons extends LitElement {
                          ? mdiArrowUpBoldCircle
                          : mdiPuzzle}
                        .iconTitle=${addon.state !== "started"
-                          ? this.supervisor.localize("dashboard.addon_stopped")
+                          ? this.supervisor.localize("dashboard.app_stopped")
                          : addon.update_available!
                            ? this.supervisor.localize(
-                                "dashboard.addon_new_version"
+                                "dashboard.app_new_version"
                              )
-                            : this.supervisor.localize(
-                                "dashboard.addon_running"
-                              )}
+                            : this.supervisor.localize("dashboard.app_running")}
                        .iconClass=${addon.update_available
                          ? addon.state === "started"
                            ? "update"
@@ -39,7 +39,7 @@ class HassioDashboard extends LitElement {
        .narrow=${this.narrow}
        .route=${this.route}
        back-path="/config"
-        .header=${this.supervisor.localize("panel.addons")}
+        .header=${this.supervisor.localize("panel.apps")}
      >
        <ha-icon-button
          slot="toolbar-icon"
@@ -81,7 +81,7 @@ class HassioDashboard extends LitElement {
        <span slot="header">
          ${this.supervisor.localize(
            atLeastVersion(this.hass.config.version, 2021, 12)
-              ? "panel.addons"
+              ? "panel.apps"
              : "panel.dashboard"
          )}
        </span>
@@ -64,9 +64,9 @@ class HassioRepositoriesDialog extends LitElement {
    repos
      .filter(
        (repo) =>
-          repo.slug !== "core" && // The core add-ons repository
-          repo.slug !== "local" && // Locally managed add-ons
-          repo.slug !== "a0d7b954" && // Home Assistant Community Add-ons
+          repo.slug !== "core" && // The core apps repository
+          repo.slug !== "local" && // Locally managed apps
+          repo.slug !== "a0d7b954" && // Home Assistant Community Apps
          repo.slug !== "5c53de3b" && // The ESPHome repository
          repo.slug !== "d5369777" // Music Assistant repository
      )
@@ -16,11 +16,11 @@ export const suggestAddonRestart = async (
  addon: HassioAddonDetails
 ): Promise<void> => {
  const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("dialog.restart_addon.title", {
+    title: supervisor.localize("dialog.restart_app.title", {
      name: addon.name,
    }),
-    text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.restart"),
+    text: supervisor.localize("dialog.restart_app.text"),
+    confirmText: supervisor.localize("dialog.restart_app.restart"),
    dismissText: supervisor.localize("common.cancel"),
  });
  if (confirmed) {
@@ -89,14 +89,12 @@ class HassioSystemManagedDialog extends LitElement {
              ? html`<img src=${addonImage} alt=${this._addon.name} />`
              : html`<ha-svg-icon .path=${mdiPuzzle}></ha-svg-icon>`}
          </div>
-          ${this._supervisor.localize("addon.system_managed.title")}.<br />
-          ${this._supervisor.localize("addon.system_managed.description")}
+          ${this._supervisor.localize("app.system_managed.title")}.<br />
+          ${this._supervisor.localize("app.system_managed.description")}
          ${this._configEntry
            ? html`
                <h3>
-                  ${this._supervisor.localize(
-                    "addon.system_managed.managed_by"
-                  )}:
+                  ${this._supervisor.localize("app.system_managed.managed_by")}:
                </h3>
                <ha-md-list>
                  <ha-md-list-item
@@ -14,7 +14,7 @@ export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
    : [
        {
          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
+            ? "panel.apps"
            : "panel.dashboard",
          path: `/hassio/dashboard`,
          iconPath: atLeastVersion(hass.config.version, 2021, 12)
@@ -114,14 +114,14 @@ class HassioIngressView extends LitElement {
        }
        if (!addonInfo.version) {
          await showAlertDialog(this, {
-            text: this.supervisor.localize("my.error_addon_not_installed"),
+            text: this.supervisor.localize("my.error_app_not_installed"),
            title: addonInfo.name,
          });
          await nextRender();
          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
        } else if (!addonInfo.ingress) {
          await showAlertDialog(this, {
-            text: this.supervisor.localize("my.error_addon_no_ingress"),
+            text: this.supervisor.localize("my.error_app_no_ingress"),
            title: addonInfo.name,
          });
          await nextRender();
@@ -162,8 +162,8 @@ class HassioIngressView extends LitElement {
      await this.updateComplete;
      await showAlertDialog(this, {
        text:
-          this.supervisor.localize("ingress.error_addon_info") ||
-          "Unable to fetch add-on info to start Ingress",
+          this.supervisor.localize("ingress.error_app_info") ||
+          "Unable to fetch app info to start Ingress",
        title: "Supervisor",
      });
      await nextRender();
@@ -175,8 +175,8 @@ class HassioIngressView extends LitElement {
      await this.updateComplete;
      await showAlertDialog(this, {
        text:
-          this.supervisor.localize("ingress.error_addon_not_installed") ||
-          "The add-on is not installed. Please install it first",
+          this.supervisor.localize("ingress.error_app_not_installed") ||
+          "The app is not installed. Please install it first",
        title: addon.name,
      });
      await nextRender();
@@ -188,8 +188,8 @@ class HassioIngressView extends LitElement {
      await this.updateComplete;
      await showAlertDialog(this, {
        text:
-          this.supervisor.localize("ingress.error_addon_not_supported") ||
-          "This add-on does not support Ingress",
+          this.supervisor.localize("ingress.error_app_not_supported") ||
+          "This app does not support Ingress",
        title: addon.name,
      });
      await nextRender();
@@ -201,18 +201,18 @@ class HassioIngressView extends LitElement {
      await this.updateComplete;
      const confirm = await showConfirmationDialog(this, {
        text:
-          this.supervisor.localize("ingress.error_addon_not_running") ||
-          "The add-on is not running. Do you want to start it now?",
+          this.supervisor.localize("ingress.error_app_not_running") ||
+          "The app is not running. Do you want to start it now?",
        title: addon.name,
        confirmText:
-          this.supervisor.localize("ingress.start_addon") || "Start add-on",
+          this.supervisor.localize("ingress.start_app") || "Start app",
        dismissText: this.supervisor.localize("common.no") || "No",
      });
      if (confirm) {
        try {
          this._loadingMessage =
-            this.supervisor.localize("ingress.addon_starting") ||
-            "The add-on is starting, this can take some time...";
+            this.supervisor.localize("ingress.app_starting") ||
+            "The app is starting, this can take some time...";
          await startHassioAddon(this.hass, addonSlug);
          fireEvent(this, "supervisor-collection-refresh", {
            collection: "addon",
@@ -222,8 +222,8 @@ class HassioIngressView extends LitElement {
        } catch (_err) {
          await showAlertDialog(this, {
            text:
-              this.supervisor.localize("ingress.error_starting_addon") ||
-              "Error starting the add-on",
+              this.supervisor.localize("ingress.error_starting_app") ||
+              "Error starting the app",
            title: addon.name,
          });
          await nextRender();
@@ -238,10 +238,10 @@ class HassioIngressView extends LitElement {
    }

    if (addon.state === "startup") {
-      // Addon is starting up, wait for it to start
+      // App is starting up, wait for it to start
      this._loadingMessage =
-        this.supervisor.localize("ingress.addon_starting") ||
-        "The add-on is starting, this can take some time...";
+        this.supervisor.localize("ingress.app_starting") ||
+        "The app is starting, this can take some time...";

      this._fetchDataTimeout = window.setTimeout(() => {
        this._fetchData(addonSlug);
@@ -301,8 +301,8 @@ class HassioIngressView extends LitElement {
      await this.updateComplete;
      showConfirmationDialog(this, {
        text:
-          this.supervisor.localize("ingress.error_addon_not_ready") ||
-          "The add-on seems to not be ready, it might still be starting. Do you want to try again?",
+          this.supervisor.localize("ingress.error_app_not_ready") ||
+          "The app seems to not be ready, it might still be starting. Do you want to try again?",
        title: this._addon.name,
        confirmText: this.supervisor.localize("ingress.retry") || "Retry",
        dismissText: this.supervisor.localize("common.no") || "No",
@@ -261,16 +261,16 @@ class UpdateAvailableCard extends LitElement {
  private _computeCreateBackupTexts():
    | { title: string; description?: string }
    | undefined {
-    // Addon backup
+    // App backup
    if (
      this._updateType === "addon" &&
      atLeastVersion(this.hass.config.version, 2025, 2, 0)
    ) {
      const version = this._version;
      return {
-        title: this.supervisor.localize("update_available.create_backup.addon"),
+        title: this.supervisor.localize("update_available.create_backup.app"),
        description: this.supervisor.localize(
-          "update_available.create_backup.addon_description",
+          "update_available.create_backup.app_description",
          { version: version }
        ),
      };
@@ -363,11 +363,11 @@ class UpdateAvailableCard extends LitElement {
        )
      ) {
        this._error = this.supervisor.localize(
-          "addon.dashboard.not_available_arch"
+          "app.dashboard.not_available_arch"
        );
      } else {
        this._error = this.supervisor.localize(
-          "addon.dashboard.not_available_version",
+          "app.dashboard.not_available_version",
          {
            core_version_installed: this.supervisor.core.version,
            core_version_needed: addonStoreInfo.homeassistant,
@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import memoizeOne from "memoize-one";
 import { type CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -26,39 +26,39 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.28.4",
+    "@babel/runtime": "7.28.6",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.0",
-    "@codemirror/language": "6.11.3",
+    "@codemirror/commands": "6.10.1",
+    "@codemirror/language": "6.12.1",
    "@codemirror/legacy-modes": "6.5.2",
-    "@codemirror/search": "6.5.11",
-    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.8",
+    "@codemirror/search": "6.6.0",
+    "@codemirror/state": "6.5.4",
+    "@codemirror/view": "6.39.11",
    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.2",
-    "@formatjs/intl-displaynames": "6.8.13",
-    "@formatjs/intl-durationformat": "0.7.6",
-    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.13",
-    "@formatjs/intl-locale": "4.2.13",
-    "@formatjs/intl-numberformat": "8.15.6",
-    "@formatjs/intl-pluralrules": "5.4.6",
-    "@formatjs/intl-relativetimeformat": "11.4.13",
-    "@fullcalendar/core": "6.1.19",
-    "@fullcalendar/daygrid": "6.1.19",
-    "@fullcalendar/interaction": "6.1.19",
-    "@fullcalendar/list": "6.1.19",
-    "@fullcalendar/luxon3": "6.1.19",
-    "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-ha.1",
+    "@formatjs/intl-datetimeformat": "7.2.0",
+    "@formatjs/intl-displaynames": "7.2.0",
+    "@formatjs/intl-durationformat": "0.10.0",
+    "@formatjs/intl-getcanonicallocales": "3.2.0",
+    "@formatjs/intl-listformat": "8.2.0",
+    "@formatjs/intl-locale": "5.2.0",
+    "@formatjs/intl-numberformat": "9.2.0",
+    "@formatjs/intl-pluralrules": "6.2.0",
+    "@formatjs/intl-relativetimeformat": "12.2.0",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/luxon3": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
+    "@home-assistant/webawesome": "3.0.0-ha.2",
    "@lezer/highlight": "1.2.3",
-    "@lit-labs/motion": "1.0.9",
-    "@lit-labs/observers": "2.0.6",
+    "@lit-labs/motion": "1.1.0",
+    "@lit-labs/observers": "2.1.0",
    "@lit-labs/virtualizer": "2.1.1",
    "@lit/context": "1.1.6",
-    "@lit/reactive-element": "2.1.1",
+    "@lit/reactive-element": "2.1.2",
    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
    "@material/mwc-base": "0.27.0",
@@ -85,12 +85,10 @@
    "@mdi/js": "7.4.47",
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.17",
+    "@swc/helpers": "0.5.18",
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.6",
-    "@vaadin/vaadin-themable-mixin": "24.9.6",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -114,13 +112,13 @@
    "hls.js": "1.6.15",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
+    "intl-messageformat": "11.1.0",
    "js-yaml": "4.1.1",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
    "leaflet.markercluster": "1.5.3",
-    "lit": "3.3.1",
-    "lit-html": "3.3.1",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
    "luxon": "3.7.2",
    "marked": "17.0.1",
    "memoize-one": "6.0.0",
@@ -135,7 +133,7 @@
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.6",
+    "ua-parser-js": "2.0.8",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -148,20 +146,20 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.28.5",
+    "@babel/core": "7.28.6",
    "@babel/helper-define-polyfill-provider": "0.6.5",
    "@babel/plugin-transform-runtime": "7.28.5",
-    "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.7",
-    "@lokalise/node-api": "15.4.0",
+    "@babel/preset-env": "7.28.6",
+    "@bundle-stats/plugin-webpack-filter": "4.21.8",
+    "@lokalise/node-api": "15.6.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.0.3",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.12",
-    "@rspack/core": "1.6.6",
-    "@rspack/dev-server": "1.1.4",
+    "@rsdoctor/rspack-plugin": "1.5.0",
+    "@rspack/core": "1.7.2",
+    "@rspack/dev-server": "1.1.5",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.25",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/culori": "4.0.1",
@@ -178,12 +176,12 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.15",
+    "@vitest/coverage-v8": "4.0.17",
    "babel-loader": "10.0.0",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.1",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.10",
@@ -193,7 +191,7 @@
    "eslint-plugin-unused-imports": "4.3.0",
    "eslint-plugin-wc": "3.0.2",
    "fancy-log": "2.0.0",
-    "fs-extra": "11.3.2",
+    "fs-extra": "11.3.3",
    "glob": "13.0.0",
    "gulp": "5.0.1",
    "gulp-brotli": "3.0.0",
@@ -201,7 +199,7 @@
    "gulp-rename": "2.1.0",
    "html-minifier-terser": "7.2.0",
    "husky": "9.1.7",
-    "jsdom": "27.2.0",
+    "jsdom": "27.4.0",
    "jszip": "3.10.1",
    "lint-staged": "16.2.7",
    "lit-analyzer": "2.0.3",
@@ -209,35 +207,35 @@
    "lodash.template": "4.5.0",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
-    "prettier": "3.7.4",
-    "rspack-manifest-plugin": "5.2.0",
+    "prettier": "3.8.0",
+    "rspack-manifest-plugin": "5.2.1",
    "serve": "14.2.5",
-    "sinon": "21.0.0",
-    "tar": "7.5.2",
-    "terser-webpack-plugin": "5.3.15",
+    "sinon": "21.0.1",
+    "tar": "7.5.3",
+    "terser-webpack-plugin": "5.3.16",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.48.1",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.15",
+    "typescript-eslint": "8.53.0",
+    "vite-tsconfig-paths": "6.0.4",
+    "vitest": "4.0.17",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
  },
  "resolutions": {
    "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "3.3.1",
-    "lit-html": "3.3.1",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
    "clean-css": "5.3.3",
-    "@lit/reactive-element": "2.1.1",
-    "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.5.0",
+    "@lit/reactive-element": "2.1.2",
+    "@fullcalendar/daygrid": "6.1.20",
+    "globals": "17.0.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
    "glob@^10.2.2": "^10.5.0"
  },
  "packageManager": "yarn@4.12.0",
  "volta": {
-    "node": "22.21.1"
+    "node": "24.13.0"
  }
 }
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20251203.0"
+version      = "20251229.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -1,5 +1,4 @@
 #!/bin/sh
-# Pushes a new version to PyPi.

 # Stop on errors
 set -e
@@ -12,5 +11,4 @@ yarn install
 script/build_frontend

 rm -rf dist home_assistant_frontend.egg-info
-python3 -m build
-python3 -m twine upload dist/*.whl --skip-existing
+python3 -m build -q
@@ -38,13 +38,11 @@ export class HaAuthFormString extends HaFormString {
        }
      </style>
      <ha-auth-textfield
-      .type=${
-        !this.isPassword
+        .type=${!this.isPassword
          ? this.stringType
          : this.unmaskedPassword
            ? "text"
-            : "password"
-      }
+            : "password"}
        .label=${this.label}
        .value=${this.data || ""}
        .helper=${this.helper}
@@ -55,18 +53,17 @@ export class HaAuthFormString extends HaFormString {
        .name=${this.schema.name}
        .autocomplete=${this.schema.autocomplete}
        ?autofocus=${this.schema.autofocus}
-        .suffix=${
-          this.isPassword
-            ? // reserve some space for the icon.
-              html`<div style="width: 24px"></div>`
-            : this.schema.description?.suffix
-        }
-        .validationMessage=${this.schema.required ? this.localize?.("ui.panel.page-authorize.form.error_required") : undefined}
+        .suffix=${this.isPassword
+          ? // reserve some space for the icon.
+            html`<div style="width: 24px"></div>`
+          : this.schema.description?.suffix}
+        .validationMessage=${this.schema.required
+          ? this.localize?.("ui.panel.page-authorize.form.error_required")
+          : undefined}
        @input=${this._valueChanged}
        @change=${this._valueChanged}
-        ></ha-auth-textfield>
-        ${this.renderIcon()}
-      </ha-auth-textfield>
+      ></ha-auth-textfield>
+      ${this.renderIcon()}
    `;
  }
 }
@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
+import type { AreaRegistryEntry } from "../../data/area/area_registry";
 import type { FloorRegistryEntry } from "../../data/floor_registry";

 export interface AreasFloorHierarchy {
@@ -1,7 +1,6 @@
 export const THEME_COLORS = new Set([
  "primary",
  "accent",
-  "disabled",
  "red",
  "pink",
  "purple",
@@ -25,6 +24,9 @@ export const THEME_COLORS = new Set([
  "blue-grey",
  "black",
  "white",
+  "primary-text",
+  "secondary-text",
+  "disabled",
 ]);

 export function computeCssColor(color: string): string {
@@ -79,7 +79,7 @@ export const generateColorPalette = (
  }

  return steps.map((step) => {
-    const name = `color-${label}-${step}`;
+    const name = `ha-color-${label}-${step}`;

    // Base color at 50%
    if (step === 50) {
@@ -93,8 +93,8 @@ export const calcDateRange = (
      ];
    case "now-12m":
      return [
-        calcDate(subMonths(today, 12), startOfMonth, hass.locale, hass.config),
-        calcDate(subMonths(today, 1), endOfMonth, hass.locale, hass.config),
+        calcDate(today, subMonths, hass.locale, hass.config, 12),
+        calcDate(today, subMonths, hass.locale, hass.config, 0),
      ];
    case "now-1h":
      return [
@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
+import type { AreaRegistryEntry } from "../../data/area/area_registry";

 export const computeAreaName = (area: AreaRegistryEntry): string | undefined =>
  area.name?.trim();
@@ -3,8 +3,8 @@ import {
  DOMAIN_ATTRIBUTES_FORMATERS,
  DOMAIN_ATTRIBUTES_UNITS,
  TEMPERATURE_ATTRIBUTES,
-} from "../../data/entity_attributes";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+} from "../../data/entity/entity_attributes";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import type { WeatherEntity } from "../../data/weather";
 import { getWeatherUnit } from "../../data/weather";
@@ -1,12 +1,12 @@
 import memoizeOne from "memoize-one";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type {
  EntityRegistryDisplayEntry,
  EntityRegistryEntry,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import { computeStateName } from "./compute_state_name";
 import { getDuplicates } from "../string/get_duplicates";
+import { computeStateName } from "./compute_state_name";

 export const computeDeviceName = (
  device: DeviceRegistryEntry
@@ -2,7 +2,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type {
  EntityRegistryDisplayEntry,
  EntityRegistryEntry,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
 import { computeDeviceName } from "./compute_device_name";
 import { computeStateName } from "./compute_state_name";
@@ -1,12 +1,12 @@
 import type { HassConfig, HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
 import type { HomeAssistant } from "../../types";
-import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
+import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatTime } from "../datetime/format_time";
 import {
  formatNumber,
@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../data/area_registry";
+import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";

@@ -1,5 +1,5 @@
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
+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";

@@ -1,11 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
+import type { AreaRegistryEntry } from "../../../data/area/area_registry";
+import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import type {
  EntityRegistryDisplayEntry,
  EntityRegistryEntry,
  ExtEntityRegistryEntry,
-} from "../../../data/entity_registry";
+} from "../../../data/entity/entity_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";

@@ -1,14 +1,14 @@
-import type { HomeAssistant } from "../../types";
-import type { IntegrationManifest } from "../../data/integration";
-import { computeDomain } from "./compute_domain";
-import { HELPERS_CRUD } from "../../data/helpers_crud";
-import type { Helper } from "../../panels/config/helpers/const";
-import { isHelperDomain } from "../../panels/config/helpers/const";
-import { isComponentLoaded } from "../config/is_component_loaded";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
-import { removeEntityRegistryEntry } from "../../data/entity_registry";
 import type { ConfigEntry } from "../../data/config_entries";
 import { deleteConfigEntry } from "../../data/config_entries";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+import { removeEntityRegistryEntry } from "../../data/entity/entity_registry";
+import { HELPERS_CRUD } from "../../data/helpers_crud";
+import type { IntegrationManifest } from "../../data/integration";
+import type { Helper } from "../../panels/config/helpers/const";
+import { isHelperDomain } from "../../panels/config/helpers/const";
+import type { HomeAssistant } from "../../types";
+import { isComponentLoaded } from "../config/is_component_loaded";
+import { computeDomain } from "./compute_domain";

 export const isDeletableEntity = (
  hass: HomeAssistant,
@@ -15,6 +15,7 @@ export interface EntityFilter {
  label?: string | string[];
  entity_category?: EntityCategory | EntityCategory[];
  hidden_platform?: string | string[];
+  hidden_domains?: string | string[];
 }

 export type EntityFilterFunc = (entityId: string) => boolean;
@@ -38,6 +39,9 @@ export const generateEntityFilter = (
  const domains = filter.domain
    ? new Set(ensureArray(filter.domain))
    : undefined;
+  const hiddenDomains = filter.hidden_domains
+    ? new Set(ensureArray(filter.hidden_domains))
+    : undefined;
  const deviceClasses = filter.device_class
    ? new Set(ensureArray(filter.device_class))
    : undefined;
@@ -57,12 +61,16 @@ export const generateEntityFilter = (
    if (!stateObj) {
      return false;
    }
-    if (domains) {
+    if (domains || hiddenDomains) {
      const domain = computeDomain(entityId);
-      if (!domains.has(domain)) {
+      if (domains && !domains.has(domain)) {
+        return false;
+      }
+      if (hiddenDomains && hiddenDomains.has(domain)) {
        return false;
      }
    }
+
    if (deviceClasses) {
      const dc = stateObj.attributes.device_class || "none";
      if (!deviceClasses.has(dc)) {
@@ -1,9 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { computeStateDomain } from "./compute_state_domain";
-import { UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE_STATES } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
-import { computeDomain } from "./compute_domain";
 import { stringCompare } from "../string/compare";
+import { computeDomain } from "./compute_domain";
+import { computeStateDomain } from "./compute_state_domain";

 export const FIXED_DOMAIN_STATES = {
  alarm_control_panel: [
@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { computeStateDomain } from "./compute_state_domain";
-import { isUnavailableState, UNAVAILABLE } from "../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
+import { computeStateDomain } from "./compute_state_domain";

 export const computeGroupEntitiesState = (states: HassEntity[]): string => {
  if (!states.length) {
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState, OFF, UNAVAILABLE } from "../../data/entity";
+import { isUnavailableState, OFF, UNAVAILABLE } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";

 export function stateActive(stateObj: HassEntity, state?: string): boolean {
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
+import { UNAVAILABLE } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { DOMAINS_WITH_CARD } from "../const";
 import { canToggleState } from "./can_toggle_state";
@@ -1,6 +1,6 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
+import { UNAVAILABLE } from "../../data/entity/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
 import { computeCssVariable } from "../../resources/css-variables";
@@ -0,0 +1,53 @@
+/**
+ * ES5-compatible implementation of the keyed directive.
+ * Based on lit-html's keyed directive but written to avoid ES5 minification issues.
+ *
+ * This implementation avoids parameter destructuring in the update() method,
+ * which causes Terser with ecma: 5 to generate invalid references like `_k`.
+ *
+ * Used only for ES5 builds (legacy browsers). Modern builds use the original
+ * lit-html keyed directive.
+ *
+ * @see https://github.com/home-assistant/frontend/issues/28732
+ */
+// eslint-disable-next-line import/extensions
+import { directive, Directive } from "lit-html/directive.js";
+// eslint-disable-next-line import/extensions
+import { setCommittedValue } from "lit-html/directive-helpers.js";
+// eslint-disable-next-line lit/no-legacy-imports
+import { nothing } from "lit-html";
+// eslint-disable-next-line import/extensions
+import type { Part } from "lit-html/directive.js";
+
+class KeyedES5 extends Directive {
+  private _key: unknown = nothing;
+
+  render(k: unknown, v: unknown) {
+    this._key = k;
+    return v;
+  }
+
+  update(part: unknown, args: [unknown, unknown]) {
+    const k = args[0];
+    const v = args[1];
+    if (k !== this._key) {
+      // Clear the part before returning a value. The one-arg form of
+      // setCommittedValue sets the value to a sentinel which forces a
+      // commit the next render.
+      setCommittedValue(part as Part);
+      this._key = k;
+    }
+    return v;
+  }
+}
+
+/**
+ * Associates a renderable value with a unique key. When the key changes, the
+ * previous DOM is removed and disposed before rendering the next value, even
+ * if the value - such as a template - is the same.
+ *
+ * This is useful for forcing re-renders of stateful components, or working
+ * with code that expects new data to generate new HTML elements, such as some
+ * animation techniques.
+ */
+export const keyed = directive(KeyedES5);
@@ -17,32 +17,45 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;

-export const navigate = async (
-  path: string,
-  options?: NavigateOptions,
-  timestamp = Date.now()
-) => {
+/**
+ * Ensures all dialogs are closed before navigation.
+ * Returns true if navigation can proceed, false if a dialog refused to close.
+ */
+const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
  const { history } = mainWindow;
-  if (history.state?.dialog && Date.now() - timestamp < DIALOG_WAIT_TIMEOUT) {
-    const closed = await closeAllDialogs();
-    if (!closed) {
-      // eslint-disable-next-line no-console
-      console.warn("Navigation blocked, because dialog refused to close");
-      return false;
-    }
-    return new Promise<boolean>((resolve) => {
-      // need to wait for history state to be updated in case a dialog was closed
-      setTimeout(() => {
-        navigate(path, options, timestamp).then(resolve);
-      });
-    });
+
+  if (!history.state?.dialog || Date.now() - timestamp >= DIALOG_WAIT_TIMEOUT) {
+    return true;
+  }
+
+  const closed = await closeAllDialogs();
+  if (!closed) {
+    // eslint-disable-next-line no-console
+    console.warn("Navigation blocked, because dialog refused to close");
+    return false;
+  }
+
+  // wait for history state to be updated after dialog closed
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve);
+  });
+
+  return ensureDialogsClosed(timestamp);
+};
+
+export const navigate = async (path: string, options?: NavigateOptions) => {
+  const canProceed = await ensureDialogsClosed(Date.now());
+  if (!canProceed) {
+    return false;
  }
  const replace = options?.replace || false;

  if (__DEMO__) {
    if (replace) {
-      history.replaceState(
-        history.state?.root ? { root: true } : (options?.data ?? null),
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root
+          ? { root: true }
+          : (options?.data ?? null),
        "",
        `${mainWindow.location.pathname}#${path}`
      );
@@ -50,13 +63,13 @@ export const navigate = async (
      mainWindow.location.hash = path;
    }
  } else if (replace) {
-    history.replaceState(
-      history.state?.root ? { root: true } : (options?.data ?? null),
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : (options?.data ?? null),
      "",
      path
    );
  } else {
-    history.pushState(options?.data ?? null, "", path);
+    mainWindow.history.pushState(options?.data ?? null, "", path);
  }
  fireEvent(mainWindow, "location-changed", {
    replace,
@@ -68,10 +81,14 @@ export const navigate = async (
 * Navigate back in history, with fallback to a default path if no history exists.
 * This prevents a user from getting stuck when they navigate directly to a page with no history.
 */
-export const goBack = (fallbackPath?: string) => {
-  const { history } = mainWindow;
+export const goBack = async (fallbackPath?: string): Promise<void> => {
+  const canProceed = await ensureDialogsClosed(Date.now());
+  if (!canProceed) {
+    return;
+  }

  // Check if we have history to go back to
+  const { history } = mainWindow;
  if (history.length > 1) {
    history.back();
    return;
@@ -2,7 +2,7 @@ import type {
  HassEntity,
  HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { NumberFormat } from "../../data/translation";
 import { round } from "./round";
@@ -0,0 +1,14 @@
+import type { Route } from "../../types";
+
+export const computeRouteTail = (route: Route) => {
+  const dividerPos = route.path.indexOf("/", 1);
+  return dividerPos === -1
+    ? {
+        prefix: route.prefix + route.path,
+        path: "",
+      }
+    : {
+        prefix: route.prefix + route.path.substring(0, dividerPos),
+        path: route.path.substring(dividerPos),
+      };
+};
@@ -1,6 +1,16 @@
 // From https://github.com/epoberezkin/fast-deep-equal
 // MIT License - Copyright (c) 2017 Evgeny Poberezkin
-export const deepEqual = (a: any, b: any): boolean => {
+
+interface DeepEqualOptions {
+  /** Compare Symbol properties in addition to string keys */
+  compareSymbols?: boolean;
+}
+
+export const deepEqual = (
+  a: any,
+  b: any,
+  options?: DeepEqualOptions
+): boolean => {
  if (a === b) {
    return true;
  }
@@ -18,7 +28,7 @@ export const deepEqual = (a: any, b: any): boolean => {
        return false;
      }
      for (i = length; i-- !== 0; ) {
-        if (!deepEqual(a[i], b[i])) {
+        if (!deepEqual(a[i], b[i], options)) {
          return false;
        }
      }
@@ -35,7 +45,7 @@ export const deepEqual = (a: any, b: any): boolean => {
        }
      }
      for (i of a.entries()) {
-        if (!deepEqual(i[1], b.get(i[0]))) {
+        if (!deepEqual(i[1], b.get(i[0]), options)) {
          return false;
        }
      }
@@ -93,11 +103,28 @@ export const deepEqual = (a: any, b: any): boolean => {
    for (i = length; i-- !== 0; ) {
      const key = keys[i];

-      if (!deepEqual(a[key], b[key])) {
+      if (!deepEqual(a[key], b[key], options)) {
        return false;
      }
    }

+    // Compare Symbol properties if requested
+    if (options?.compareSymbols) {
+      const symbolsA = Object.getOwnPropertySymbols(a);
+      const symbolsB = Object.getOwnPropertySymbols(b);
+      if (symbolsA.length !== symbolsB.length) {
+        return false;
+      }
+      for (const sym of symbolsA) {
+        if (!Object.prototype.hasOwnProperty.call(b, sym)) {
+          return false;
+        }
+        if (!deepEqual(a[sym], b[sym], options)) {
+          return false;
+        }
+      }
+    }
+
    return true;
  }

@@ -0,0 +1,19 @@
+export const startMediaProgressInterval = (
+  interval: number | undefined,
+  callback: () => void,
+  intervalMs = 1000
+): number => {
+  if (interval) {
+    return interval;
+  }
+  return window.setInterval(callback, intervalMs);
+};
+
+export const stopMediaProgressInterval = (
+  interval: number | undefined
+): number | undefined => {
+  if (interval) {
+    clearInterval(interval);
+  }
+  return undefined;
+};
@@ -1,30 +1,45 @@
 /**
- * Executes a callback within a View Transition if supported, otherwise runs it directly.
+ * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
 *
- * @param callback - Function to execute. Can be synchronous or return a Promise. The callback will be passed a boolean indicating whether the view transition is available.
+ * @param callback - Synchronous function to execute. The callback will be passed a boolean indicating whether the view transition is available.
 * @returns Promise that resolves when the transition completes (or immediately if not supported)
 *
 * @example
 * ```typescript
- * // Synchronous callback
 * withViewTransition(() => {
 *   this.large = !this.large;
 * });
- *
- * // Async callback
- * await withViewTransition(async () => {
- *   await this.updateData();
- * });
 * ```
 */
 export const withViewTransition = (
-  callback: (viewTransitionAvailable: boolean) => void | Promise<void>
+  callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (document.startViewTransition) {
-    return document.startViewTransition(() => callback(true)).finished;
+  if (!document.startViewTransition) {
+    callback(false);
+    return Promise.resolve();
  }

-  // Fallback: Execute callback directly without transition
-  const result = callback(false);
-  return result instanceof Promise ? result : Promise.resolve();
+  let callbackInvoked = false;
+
+  try {
+    // View Transitions require DOM updates to happen synchronously within
+    // the callback. Execute the callback immediately (synchronously).
+    const transition = document.startViewTransition(() => {
+      callbackInvoked = true;
+      callback(true);
+    });
+    return transition.finished;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "View transition failed, falling back to direct execution.",
+      err
+    );
+    // Make sure the callback is invoked exactly once.
+    if (!callbackInvoked) {
+      callback(false);
+      return Promise.resolve();
+    }
+    return Promise.reject(err);
+  }
 };
@@ -0,0 +1,186 @@
+import type { HaSlider } from "../../components/ha-slider";
+
+interface VolumeSliderControllerOptions {
+  getSlider: () => HaSlider | undefined;
+  step: number;
+  onSetVolume: (value: number) => void;
+  onSetVolumeDebounced?: (value: number) => void;
+  onValueUpdated?: (value: number) => void;
+}
+
+export class VolumeSliderController {
+  private _touchStartX = 0;
+
+  private _touchStartY = 0;
+
+  private _touchStartValue = 0;
+
+  private _touchDragging = false;
+
+  private _touchScrolling = false;
+
+  private _dragging = false;
+
+  private _lastValue = 0;
+
+  private _options: VolumeSliderControllerOptions;
+
+  constructor(options: VolumeSliderControllerOptions) {
+    this._options = options;
+  }
+
+  public get isInteracting(): boolean {
+    return this._touchDragging || this._dragging;
+  }
+
+  public setStep(step: number): void {
+    this._options.step = step;
+  }
+
+  public handleInput = (ev: Event): void => {
+    ev.stopPropagation();
+    const value = Number((ev.target as HaSlider).value);
+    this._dragging = true;
+    this._updateValue(value);
+    this._options.onSetVolumeDebounced?.(value);
+  };
+
+  public handleChange = (ev: Event): void => {
+    ev.stopPropagation();
+    const value = Number((ev.target as HaSlider).value);
+    this._dragging = false;
+    this._updateValue(value);
+    this._options.onSetVolume(value);
+  };
+
+  public handleTouchStart = (ev: TouchEvent): void => {
+    ev.stopPropagation();
+    const touch = ev.touches[0];
+    this._touchStartX = touch.clientX;
+    this._touchStartY = touch.clientY;
+    this._touchStartValue = this._getSliderValue();
+    this._touchDragging = false;
+    this._touchScrolling = false;
+    this._showTooltip();
+  };
+
+  public handleTouchMove = (ev: TouchEvent): void => {
+    if (this._touchScrolling) {
+      return;
+    }
+    const touch = ev.touches[0];
+    const deltaX = touch.clientX - this._touchStartX;
+    const deltaY = touch.clientY - this._touchStartY;
+    const absDeltaX = Math.abs(deltaX);
+    const absDeltaY = Math.abs(deltaY);
+
+    if (!this._touchDragging) {
+      if (absDeltaY > 10 && absDeltaY > absDeltaX * 2) {
+        this._touchScrolling = true;
+        return;
+      }
+      if (absDeltaX > 8) {
+        this._touchDragging = true;
+      }
+    }
+
+    if (this._touchDragging) {
+      ev.preventDefault();
+      const newValue = this._getVolumeFromTouch(touch.clientX);
+      this._updateValue(newValue);
+    }
+  };
+
+  public handleTouchEnd = (ev: TouchEvent): void => {
+    if (this._touchScrolling) {
+      this._touchScrolling = false;
+      this._hideTooltip();
+      return;
+    }
+
+    const touch = ev.changedTouches[0];
+    if (!this._touchDragging) {
+      const tapValue = this._getVolumeFromTouch(touch.clientX);
+      const delta =
+        tapValue > this._touchStartValue
+          ? this._options.step
+          : -this._options.step;
+      const newValue = this._roundVolumeValue(this._touchStartValue + delta);
+      this._updateValue(newValue);
+      this._options.onSetVolume(newValue);
+    } else {
+      const finalValue = this._getVolumeFromTouch(touch.clientX);
+      this._updateValue(finalValue);
+      this._options.onSetVolume(finalValue);
+    }
+
+    this._touchDragging = false;
+    this._dragging = false;
+    this._hideTooltip();
+  };
+
+  public handleTouchCancel = (): void => {
+    this._touchDragging = false;
+    this._touchScrolling = false;
+    this._dragging = false;
+    this._updateValue(this._touchStartValue);
+    this._hideTooltip();
+  };
+
+  public handleWheel = (ev: WheelEvent): void => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const direction = ev.deltaY > 0 ? -1 : 1;
+    const currentValue = this._getSliderValue();
+    const newValue = this._roundVolumeValue(
+      currentValue + direction * this._options.step
+    );
+    this._updateValue(newValue);
+    this._options.onSetVolume(newValue);
+  };
+
+  private _getVolumeFromTouch(clientX: number): number {
+    const slider = this._options.getSlider();
+    if (!slider) {
+      return 0;
+    }
+    const rect = slider.getBoundingClientRect();
+    const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+    const percentage = (x / rect.width) * 100;
+    return this._roundVolumeValue(percentage);
+  }
+
+  private _roundVolumeValue(value: number): number {
+    return Math.min(
+      Math.max(Math.round(value / this._options.step) * this._options.step, 0),
+      100
+    );
+  }
+
+  private _getSliderValue(): number {
+    const slider = this._options.getSlider();
+    if (slider) {
+      return Number(slider.value);
+    }
+    return this._lastValue;
+  }
+
+  private _updateValue(value: number): void {
+    this._lastValue = value;
+    this._options.onValueUpdated?.(value);
+    const slider = this._options.getSlider();
+    if (slider) {
+      slider.value = value;
+    }
+  }
+
+  private _showTooltip(): void {
+    const slider = this._options.getSlider() as any;
+    slider?.showTooltip?.();
+  }
+
+  private _hideTooltip(): void {
+    const slider = this._options.getSlider() as any;
+    slider?.hideTooltip?.();
+  }
+}
@@ -2,9 +2,13 @@ import { customElement, property, state } from "lit/decorators";
 import { LitElement, html, css } from "lit";
 import type { EChartsType } from "echarts/core";
 import type { SankeySeriesOption } from "echarts/types/dist/echarts";
-import type { CallbackDataParams } from "echarts/types/src/util/types";
+import type {
+  CallbackDataParams,
+  ECElementEvent,
+} from "echarts/types/src/util/types";
 import memoizeOne from "memoize-one";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
+import { fireEvent } from "../../common/dom/fire_event";
 import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
 import type { ECOption } from "../../resources/echarts/echarts";
@@ -21,6 +25,7 @@ export interface Node {
  label?: string;
  color?: string;
  passThrough?: boolean;
+  entityId?: string;
 }
 export interface Link {
  source: string;
@@ -83,6 +88,7 @@ export class HaSankeyChart extends LitElement {
      .options=${options}
      height="100%"
      .extraComponents=${[SankeyChart]}
+      @chart-click=${this._handleChartClick}
    ></ha-chart-base>`;
  }

@@ -103,6 +109,22 @@ export class HaSankeyChart extends LitElement {
    return null;
  };

+  private _handleChartClick = (ev: CustomEvent<ECElementEvent>) => {
+    const detail = ev.detail;
+    // Only handle node clicks (not links)
+    if (detail.dataType !== "node") {
+      return;
+    }
+    const nodeId = (detail.data as Record<string, any>)?.id;
+    if (!nodeId) {
+      return;
+    }
+    const node = this.data.nodes.find((n) => n.id === nodeId);
+    if (node?.entityId) {
+      fireEvent(this, "node-click", { node });
+    }
+  };
+
  private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
    const filteredNodes = data.nodes.filter((n) => n.value > 0);
    const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
@@ -294,4 +316,7 @@ declare global {
  interface HTMLElementTagNameMap {
    "ha-sankey-chart": HaSankeyChart;
  }
+  interface HASSDomEvents {
+    "node-click": { node: Node };
+  }
 }
@@ -0,0 +1,207 @@
+import type { EChartsType } from "echarts/core";
+import type { SunburstSeriesOption } from "echarts/types/dist/echarts";
+import type { CallbackDataParams } from "echarts/types/src/util/types";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { getGraphColorByIndex } from "../../common/color/colors";
+import { filterXSS } from "../../common/util/xss";
+import type { ECOption } from "../../resources/echarts/echarts";
+import type { HomeAssistant } from "../../types";
+import "./ha-chart-base";
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
+let SunburstChart: typeof import("echarts/lib/chart/sunburst/install");
+
+export interface SunburstNode {
+  id: string;
+  name?: string;
+  value: number;
+  itemStyle?: {
+    color?: string;
+  };
+  children?: SunburstNode[];
+}
+
+@customElement("ha-sunburst-chart")
+export class HaSunburstChart extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data?: SunburstNode;
+
+  @property({ type: String, attribute: false }) public valueFormatter?: (
+    value: number
+  ) => string;
+
+  public chart?: EChartsType;
+
+  constructor() {
+    super();
+    if (!SunburstChart) {
+      import("echarts/lib/chart/sunburst/install").then((module) => {
+        SunburstChart = module;
+        this.requestUpdate();
+      });
+    }
+  }
+
+  render() {
+    if (!SunburstChart || !this.data) {
+      return nothing;
+    }
+
+    const options = {
+      tooltip: {
+        trigger: "item",
+        formatter: this._renderTooltip,
+        appendTo: document.body,
+      },
+    } as ECOption;
+
+    return html`<ha-chart-base
+      .data=${this._createData(this.data)}
+      .options=${options}
+      height="100%"
+      .extraComponents=${[SunburstChart]}
+    ></ha-chart-base>`;
+  }
+
+  private _renderTooltip = (params: CallbackDataParams) => {
+    const data = params.data as { name: string; value: number };
+    const value = this.valueFormatter
+      ? this.valueFormatter(data.value)
+      : data.value;
+    return `${params.marker} ${filterXSS(data.name)}<br>${value}`;
+  };
+
+  private _createData = memoizeOne(
+    (data: SunburstNode): SunburstSeriesOption => {
+      const computedStyles = getComputedStyle(this);
+
+      // Transform to echarts format (uses 'name' instead of 'id')
+      const transformNode = (
+        node: SunburstNode,
+        index: number,
+        depth: number,
+        parentColor?: string
+      ) => {
+        const result = {
+          ...node,
+          name: node.name || node.id,
+        };
+
+        if (depth > 0 && !node.itemStyle?.color) {
+          // Don't assign color to root node
+          result.itemStyle = {
+            color: parentColor ?? getGraphColorByIndex(index, computedStyles),
+          };
+        }
+
+        if (node.children && node.children.length > 0) {
+          result.children = node.children.map((child, i) =>
+            transformNode(child, i, depth + 1, result.itemStyle?.color)
+          );
+        }
+
+        return result;
+      };
+
+      const transformedData = transformNode(data, 0, 0);
+
+      return {
+        type: "sunburst",
+        data: transformedData.children || [transformedData],
+        radius: [0, "90%"],
+        sort: undefined, // Keep original order
+        label: {
+          show: false,
+          align: "center",
+          rotate: "radial",
+          minAngle: 15,
+          hideOverlap: true,
+        },
+        emphasis: {
+          focus: "ancestor",
+          label: {
+            show: false,
+          },
+        },
+        itemStyle: {
+          borderRadius: 2,
+        },
+        levels: this._generateLevels(this._getMaxDepth(data)),
+      } as SunburstSeriesOption;
+    }
+  );
+
+  private _getMaxDepth(node: SunburstNode, currentDepth = 0): number {
+    if (!node.children || node.children.length === 0) {
+      return currentDepth;
+    }
+    return Math.max(
+      ...node.children.map((child) =>
+        this._getMaxDepth(child, currentDepth + 1)
+      )
+    );
+  }
+
+  private _generateLevels(depth: number): SunburstSeriesOption["levels"] {
+    const levels: SunburstSeriesOption["levels"] = [];
+
+    // Root level (center) - transparent, small fixed size
+    const rootRadius = 15;
+    const outerRadius = 95;
+    const availableRadius = outerRadius - rootRadius;
+
+    levels.push({
+      r0: "0%",
+      r: `${rootRadius}%`,
+      itemStyle: {
+        color: "transparent",
+      },
+    });
+
+    if (depth === 0) {
+      return levels;
+    }
+
+    // Distribute remaining radius among data levels using weighted distribution
+    // First level gets most space, each subsequent level gets progressively smaller
+    const weights = Array.from({ length: depth }, (_, i) => depth - i);
+    const totalWeight = weights.reduce((sum, w) => sum + w, 0);
+
+    let currentRadius = rootRadius;
+    for (let i = 0; i < depth; i++) {
+      const levelRadius = (weights[i] / totalWeight) * availableRadius;
+      const r0 = currentRadius;
+      const r = currentRadius + levelRadius;
+      currentRadius = r;
+
+      levels.push({
+        r0: `${r0}%`,
+        r: `${r}%`,
+        // Show labels only on first level
+        ...(i === 0 ? { label: { show: true } } : {}),
+      });
+    }
+
+    return levels;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      flex: 1;
+    }
+    ha-chart-base {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sunburst-chart": HaSunburstChart;
+  }
+}
@@ -21,6 +21,7 @@ import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
+import { filterXSS } from "../../common/util/xss";

 const safeParseFloat = (value) => {
  const parsed = parseFloat(value);
@@ -184,7 +185,7 @@ export class StateHistoryChartLine extends LitElement {
          }

          if (param.seriesName) {
-            return `${param.marker} ${param.seriesName}: ${value}`;
+            return `${param.marker} ${filterXSS(param.seriesName)}: ${value}`;
          }
          return `${param.marker} ${value}`;
        })
@@ -184,17 +184,11 @@ export class StatisticsChart extends LitElement {
  }

  private _datasetHidden(ev: CustomEvent) {
-    if (!this._legendData) {
-      return;
-    }
    this._hiddenStats.add(ev.detail.id);
    this.requestUpdate("_hiddenStats");
  }

  private _datasetUnhidden(ev: CustomEvent) {
-    if (!this._legendData) {
-      return;
-    }
    this._hiddenStats.delete(ev.detail.id);
    this.requestUpdate("_hiddenStats");
  }
@@ -521,7 +515,9 @@ export class StatisticsChart extends LitElement {
                  `ui.components.statistics_charts.statistic_types.${type}`
                ),
            symbol: "none",
-            sampling: "minmax",
+            // minmax sampling operates independently per series, breaking stacking alignment
+            // https://github.com/apache/echarts/issues/11879
+            sampling: band && drawBands ? "lttb" : "minmax",
            animationDurationUpdate: 0,
            lineStyle: {
              width: 1.5,
@@ -539,10 +535,17 @@ export class StatisticsChart extends LitElement {
          if (band && this.chartType === "line") {
            series.stack = `band-${statistic_id}`;
            series.stackStrategy = "all";
-            if (drawBands && type === bandTop) {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
+            if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
+              // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
+              series.stackOrder = "seriesDesc";
+              (series as LineSeriesOption).areaStyle = undefined;
+            } else {
+              series.stackOrder = "seriesAsc";
+              if (drawBands && type === bandTop) {
+                (series as LineSeriesOption).areaStyle = {
+                  color: color + "3F",
+                };
+              }
            }
          }
          if (!this.hideLegend) {
@@ -586,7 +589,8 @@ export class StatisticsChart extends LitElement {
          } else if (
            type === bandTop &&
            this.chartType === "line" &&
-            drawBands
+            drawBands &&
+            !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
          ) {
            const top = stat[bandTop] || 0;
            val.push(Math.abs(top - (stat[bandBottom] || 0)));
@@ -3,11 +3,11 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { computeCssValue } from "../../resources/css-variables";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
+import { stateColorProperties } from "../../common/entity/state_color";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import { computeCssValue } from "../../resources/css-variables";

 const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
  media_player: {
@@ -6,7 +6,7 @@ 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";
-import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import "../chips/ha-chip-set";
 import "../ha-dropdown";
 import "../ha-dropdown-item";
@@ -16,8 +16,10 @@ import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
+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 { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -26,8 +28,6 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
-import type { LocalizeFunc } from "../../common/translations/localize";
-import { nextRender } from "../../common/util/render-status";

 export interface RowClickedEvent {
  id: string;
@@ -1364,6 +1364,9 @@ export class HaDataTable extends LitElement {
        .mdc-data-table__header-cell > * {
          transition: var(--float-start) 0.2s ease;
        }
+        .mdc-data-table__header-cell--numeric > span {
+          transition: none;
+        }
        .mdc-data-table__header-cell ha-svg-icon {
          top: -3px;
          position: absolute;
@@ -1402,6 +1405,9 @@ export class HaDataTable extends LitElement {
        }
        .secondary {
          color: var(--secondary-text-color);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
        }
        .scroller {
          height: calc(100% - 57px);
@@ -1,9 +1,9 @@
 import { expose } from "comlink";
+import type { FuseOptionKey, IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
 import memoizeOne from "memoize-one";
 import { ipCompare, stringCompare } from "../../common/string/compare";
 import { stripDiacritics } from "../../common/string/strip-diacritics";
-import { HaFuse } from "../../resources/fuse";
 import type {
  ClonedDataTableColumnData,
  DataTableRowData,
@@ -11,48 +11,159 @@ import type {
  SortingDirection,
 } from "./ha-data-table";

-const fuseIndex = memoizeOne(
-  (data: DataTableRowData[], columns: SortableColumnContainer) => {
-    const searchKeys = new Set<string>();
-    Object.entries(columns).forEach(([key, column]) => {
-      if (column.filterable) {
-        searchKeys.add(
-          column.filterKey
-            ? `${column.valueColumn || key}.${column.filterKey}`
-            : key
-        );
-      }
-    });
-    return Fuse.createIndex([...searchKeys], data);
-  }
+interface FilterKeyConfig {
+  key: string;
+  filterKey?: string;
+}
+
+const getFilterKeys = memoizeOne(
+  (columns: SortableColumnContainer): FilterKeyConfig[] =>
+    Object.entries(columns)
+      .filter(([, column]) => column.filterable)
+      .map(([key, column]) => ({
+        key: column.valueColumn || key,
+        filterKey: column.filterKey,
+      }))
 );

+const getSearchableValue = (
+  row: DataTableRowData,
+  { key, filterKey }: FilterKeyConfig
+): string => {
+  let value = row[key];
+
+  if (value == null) {
+    return "";
+  }
+
+  if (filterKey && typeof value === "object" && !Array.isArray(value)) {
+    value = value[filterKey];
+    if (value == null) {
+      return "";
+    }
+  }
+
+  if (Array.isArray(value)) {
+    const stringValues = value
+      .filter((item) => item != null && typeof item !== "object")
+      .map(String);
+    return stripDiacritics(stringValues.join(" ").toLowerCase());
+  }
+
+  return stripDiacritics(String(value).toLowerCase());
+};
+
+/** Filters data using exact substring matching (all terms must match). */
+const filterDataExact = (
+  data: DataTableRowData[],
+  filterKeys: FilterKeyConfig[],
+  terms: string[]
+): DataTableRowData[] => {
+  if (terms.length === 1) {
+    const term = terms[0];
+    return data.filter((row) =>
+      filterKeys.some((config) =>
+        getSearchableValue(row, config).includes(term)
+      )
+    );
+  }
+
+  return data.filter((row) => {
+    const searchString = filterKeys
+      .map((config) => getSearchableValue(row, config))
+      .join(" ");
+    return terms.every((term) => searchString.includes(term));
+  });
+};
+
+const FUZZY_OPTIONS: IFuseOptions<DataTableRowData> = {
+  ignoreDiacritics: true,
+  isCaseSensitive: false,
+  threshold: 0.2, // Stricter than default 0.3
+  minMatchCharLength: 2,
+  ignoreLocation: true,
+  shouldSort: false,
+};
+
+interface FuseKeyConfig {
+  name: string | string[];
+  getFn: (row: DataTableRowData) => string;
+}
+
+/** Filters data using fuzzy matching with Fuse.js (all terms must match). */
+const filterDataFuzzy = (
+  data: DataTableRowData[],
+  filterKeys: FilterKeyConfig[],
+  terms: string[]
+): DataTableRowData[] => {
+  // Build Fuse.js search keys from filter keys
+  const fuseKeys: FuseKeyConfig[] = filterKeys.map((config) => ({
+    name: config.filterKey ? [config.key, config.filterKey] : config.key,
+    getFn: (row: DataTableRowData) => getSearchableValue(row, config),
+  }));
+
+  // Find minimum term length to adjust minMatchCharLength
+  const minTermLength = Math.min(...terms.map((t) => t.length));
+  const minMatchCharLength = Math.min(minTermLength, 2);
+
+  const fuse = new Fuse<DataTableRowData>(data, {
+    ...FUZZY_OPTIONS,
+    keys: fuseKeys as FuseOptionKey<DataTableRowData>[],
+    minMatchCharLength,
+  });
+
+  // For single term, simple search
+  if (terms.length === 1) {
+    return fuse.search(terms[0]).map((r) => r.item);
+  }
+
+  // For multiple terms, all must match (AND logic)
+  const expression = {
+    $and: terms.map((term) => ({
+      $or: fuseKeys.map((key) => ({
+        $path: Array.isArray(key.name) ? key.name : [key.name],
+        $val: term,
+      })),
+    })),
+  };
+
+  return fuse.search(expression).map((r) => r.item);
+};
+
+/**
+ * Filters data with exact match priority and fuzzy fallback.
+ * - First tries exact substring matching
+ * - If exact matches found, returns only those
+ * - If no exact matches, falls back to fuzzy search with strict scoring
+ */
 const filterData = (
  data: DataTableRowData[],
  columns: SortableColumnContainer,
  filter: string
-) => {
-  filter = stripDiacritics(filter.toLowerCase());
+): DataTableRowData[] => {
+  const normalizedFilter = stripDiacritics(filter.toLowerCase().trim());

-  if (filter === "") {
+  if (!normalizedFilter) {
    return data;
  }

-  const index = fuseIndex(data, columns);
+  const filterKeys = getFilterKeys(columns);

-  const fuse = new HaFuse(
-    data,
-    { shouldSort: false, minMatchCharLength: 1 },
-    index
-  );
-
-  const searchResults = fuse.multiTermsSearch(filter);
-
-  if (searchResults) {
-    return searchResults.map((result) => result.item);
+  if (!filterKeys.length) {
+    return data;
  }

-  return data;
+  const terms = normalizedFilter.split(/\s+/);
+
+  // First, try exact substring matching
+  const exactMatches = filterDataExact(data, filterKeys, terms);
+
+  if (exactMatches.length > 0) {
+    return exactMatches;
+  }
+
+  // No exact matches, fall back to fuzzy search
+  return filterDataFuzzy(data, filterKeys, terms);
 };

 const sortData = (
@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceAction } from "../../data/device_automation";
+import type { DeviceAction } from "../../data/device/device_automation";
 import {
  fetchDeviceActions,
  localizeDeviceAutomationAction,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";

@customElement("ha-device-action-picker")
@@ -1,21 +1,23 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { fullEntitiesContext } from "../../data/context";
-import type { DeviceAutomation } from "../../data/device_automation";
+import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
  deviceAutomationsEqual,
  sortDeviceAutomations,
-} from "../../data/device_automation";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
+} from "../../data/device/device_automation";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import "../ha-md-select-option";
+import "../ha-generic-picker";
 import "../ha-md-select";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../ha-md-select-option";
+import type { PickerValueRenderer } from "../ha-picker-field";

 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
-const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";

 export abstract class HaDeviceAutomationPicker<
  T extends DeviceAutomation,
@@ -28,7 +30,7 @@ export abstract class HaDeviceAutomationPicker<

  @property({ type: Object }) public value?: T;

-  @state() private _automations: T[] = [];
+  @state() private _automations?: T[];

  // Trigger an empty render so we start with a clean DOM.
  // paper-listbox does not like changing things around.
@@ -44,12 +46,6 @@ export abstract class HaDeviceAutomationPicker<
    );
  }

-  protected get UNKNOWN_AUTOMATION_TEXT() {
-    return this.hass.localize(
-      "ui.panel.config.devices.automation.actions.unknown_action"
-    );
-  }
-
  private _localizeDeviceAutomation: (
    hass: HomeAssistant,
    entityRegistry: EntityRegistryEntry[],
@@ -75,7 +71,7 @@ export abstract class HaDeviceAutomationPicker<
  }

  private get _value() {
-    if (!this.value) {
+    if (!this.value || !this._automations) {
      return "";
    }

@@ -88,7 +84,7 @@ export abstract class HaDeviceAutomationPicker<
    );

    if (idx === -1) {
-      return UNKNOWN_AUTOMATION_KEY;
+      return this.value.alias || this.value.type || "unknown";
    }

    return `${this._automations[idx].device_id}_${idx}`;
@@ -99,37 +95,21 @@ export abstract class HaDeviceAutomationPicker<
      return nothing;
    }
    const value = this._value;
-    return html`
-      <ha-md-select
-        .label=${this.label}
-        .value=${value}
-        @change=${this._automationChanged}
-        @closed=${stopPropagation}
-        .disabled=${this._automations.length === 0}
-      >
-        ${value === NO_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${NO_AUTOMATION_KEY}>
-              ${this.NO_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${UNKNOWN_AUTOMATION_KEY}>
-              ${this.UNKNOWN_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${this._automations.map(
-          (automation, idx) => html`
-            <ha-md-select-option .value=${`${automation.device_id}_${idx}`}>
-              ${this._localizeDeviceAutomation(
-                this.hass,
-                this._entityReg,
-                automation
-              )}
-            </ha-md-select-option>
-          `
-        )}
-      </ha-md-select>
-    `;
+
+    return html`<ha-generic-picker
+      .hass=${this.hass}
+      .label=${this.label}
+      .value=${value}
+      .disabled=${!this._automations || this._automations.length === 0}
+      .getItems=${this._getItems(value, this._automations)}
+      @value-changed=${this._automationChanged}
+      .valueRenderer=${this._valueRenderer}
+      .unknownItemText=${this.hass.localize(
+        "ui.panel.config.devices.automation.actions.unknown_action"
+      )}
+      hide-clear-icon
+    >
+    </ha-generic-picker>`;
  }

  protected updated(changedProps) {
@@ -140,6 +120,57 @@ export abstract class HaDeviceAutomationPicker<
    }
  }

+  private _getItems = memoizeOne(
+    (value: string, automations: T[] | undefined) => {
+      if (!automations) {
+        return () => undefined;
+      }
+
+      const automationListItems = automations.map((automation, idx) => {
+        const primary = this._localizeDeviceAutomation(
+          this.hass,
+          this._entityReg,
+          automation
+        );
+        return {
+          id: `${automation.device_id}_${idx}`,
+          primary,
+        };
+      });
+
+      automationListItems.sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.primary,
+          b.primary,
+          this.hass.locale.language
+        )
+      );
+
+      if (value === NO_AUTOMATION_KEY) {
+        automationListItems.unshift({
+          id: NO_AUTOMATION_KEY,
+          primary: this.NO_AUTOMATION_TEXT,
+        });
+      }
+
+      return () => automationListItems;
+    }
+  );
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const automation = this._automations?.find(
+      (a, idx) => value === `${a.device_id}_${idx}`
+    );
+
+    const text = automation
+      ? this._localizeDeviceAutomation(this.hass, this._entityReg, automation)
+      : value === NO_AUTOMATION_KEY
+        ? this.NO_AUTOMATION_TEXT
+        : value;
+
+    return html`<span slot="headline">${text}</span>`;
+  };
+
  private async _updateDeviceInfo() {
    this._automations = this.deviceId
      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
@@ -161,13 +192,14 @@ export abstract class HaDeviceAutomationPicker<
    this._renderEmpty = false;
  }

-  private _automationChanged(ev) {
-    const value = ev.target.value;
-    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+  private _automationChanged(ev: CustomEvent<{ value: string }>) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+    if (!value || NO_AUTOMATION_KEY === value) {
      return;
    }
    const [deviceId, idx] = value.split("_");
-    const automation = this._automations[idx];
+    const automation = this._automations![idx];
    if (automation.device_id !== deviceId) {
      return;
    }
@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceCondition } from "../../data/device_automation";
+import type { DeviceCondition } from "../../data/device/device_automation";
 import {
  fetchDeviceConditions,
  localizeDeviceAutomationCondition,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";

@customElement("ha-device-condition-picker")
@@ -1,4 +1,4 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -9,14 +9,16 @@ import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
+  deviceComboBoxKeys,
  getDevices,
  type DevicePickerItem,
-  type DeviceRegistryEntry,
-} from "../../data/device_registry";
+} from "../../data/device/device_picker";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 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
@@ -93,7 +95,30 @@ export class HaDevicePicker extends LitElement {

  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};

-  private _getDevicesMemoized = memoizeOne(getDevices);
+  private _getDevicesMemoized = memoizeOne(
+    (
+      _devices: HomeAssistant["devices"],
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains?: string[],
+      excludeDomains?: string[],
+      includeDeviceClasses?: string[],
+      deviceFilter?: HaDevicePickerDeviceFilterFunc,
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      excludeDevices?: string[],
+      value?: string
+    ) =>
+      getDevices(
+        this.hass,
+        configEntryLookup,
+        includeDomains,
+        excludeDomains,
+        includeDeviceClasses,
+        deviceFilter,
+        entityFilter,
+        excludeDevices,
+        value
+      )
+  );

  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
@@ -109,7 +134,7 @@ export class HaDevicePicker extends LitElement {

  private _getItems = () =>
    this._getDevicesMemoized(
-      this.hass,
+      this.hass.devices,
      this._configEntryLookup,
      this.includeDomains,
      this.excludeDomains,
@@ -161,7 +186,7 @@ export class HaDevicePicker extends LitElement {
    }
  );

-  private _rowRenderer: ComboBoxLitRenderer<DevicePickerItem> = (item) => html`
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
    <ha-combo-box-item type="button">
      ${item.domain
        ? html`
@@ -204,6 +229,8 @@ export class HaDevicePicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
        .label=${this.label}
        .searchLabel=${this.searchLabel}
        .notFoundLabel=${this._notFoundLabel}
@@ -216,6 +243,10 @@ export class HaDevicePicker extends LitElement {
        .getItems=${this._getItems}
        .hideClearIcon=${this.hideClearIcon}
        .valueRenderer=${valueRenderer}
+        .searchKeys=${deviceComboBoxKeys}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceTrigger } from "../../data/device_automation";
+import type { DeviceTrigger } from "../../data/device/device_automation";
 import {
  fetchDeviceTriggers,
  localizeDeviceAutomationTrigger,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";

@customElement("ha-device-trigger-picker")
@@ -61,7 +61,6 @@ class HaDevicesPicker extends LitElement {
        (entityId) => html`
          <div>
            <ha-device-picker
-              allow-custom-entity
              .curValue=${entityId}
              .hass=${this.hass}
              .deviceFilter=${this.deviceFilter}
@@ -79,7 +78,6 @@ class HaDevicesPicker extends LitElement {
      )}
      <div>
        <ha-device-picker
-          allow-custom-entity
          .hass=${this.hass}
          .helper=${this.helper}
          .deviceFilter=${this.deviceFilter}
@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
@@ -99,7 +99,6 @@ class HaEntitiesPicker extends LitElement {
            (entityId) => html`
              <div class="entity">
                <ha-entity-picker
-                  allow-custom-entity
                  .curValue=${entityId}
                  .hass=${this.hass}
                  .includeDomains=${this.includeDomains}
@@ -129,7 +128,6 @@ class HaEntitiesPicker extends LitElement {
      </ha-sortable>
      <div>
        <ha-entity-picker
-          allow-custom-entity
          .hass=${this.hass}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
@@ -1,16 +1,11 @@
-import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-
-interface AttributeOption {
-  value: string;
-  label: string;
-}
+import "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";

@customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -42,51 +37,44 @@ class HaEntityAttributePicker extends LitElement {

  @property() public helper?: string;

-  @state() private _opened = false;
+  private _getItemsMemoized = memoizeOne(
+    (
+      entityId: string | string[] | undefined,
+      hideAttributes: string[] | undefined,
+      hass: HomeAssistant
+    ): PickerComboBoxItem[] => {
+      const entityIds = entityId ? ensureArray(entityId) : [];
+      const options: PickerComboBoxItem[] = [];
+      const optionsSet = new Set<string>();

-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !(!changedProps.has("_opened") && this._opened);
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (changedProps.has("_opened") && this._opened) ||
-      changedProps.has("entityId") ||
-      changedProps.has("attribute")
-    ) {
-      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
-      const entitiesOptions = entityIds.map<AttributeOption[]>((entityId) => {
-        const stateObj = this.hass.states[entityId];
+      for (const id of entityIds) {
+        const stateObj = hass.states[id];
        if (!stateObj) {
-          return [];
+          continue;
        }

        const attributes = Object.keys(stateObj.attributes).filter(
-          (a) => !this.hideAttributes?.includes(a)
+          (a) => !hideAttributes?.includes(a)
        );

-        return attributes.map((a) => ({
-          value: a,
-          label: this.hass.formatEntityAttributeName(stateObj, a),
-        }));
-      });
-
-      const options: AttributeOption[] = [];
-      const optionsSet = new Set<string>();
-      for (const entityOptions of entitiesOptions) {
-        for (const option of entityOptions) {
-          if (!optionsSet.has(option.value)) {
-            optionsSet.add(option.value);
-            options.push(option);
+        for (const attribute of attributes) {
+          if (!optionsSet.has(attribute)) {
+            optionsSet.add(attribute);
+            options.push({
+              id: attribute,
+              primary: hass.formatEntityAttributeName(stateObj, attribute),
+              sorting_label: attribute,
+            });
          }
        }
      }

-      (this._comboBox as any).filteredItems = options;
+      return options;
    }
-  }
+  );
+
+  private _getItems = () =>
+    this._getItemsMemoized(this.entityId, this.hideAttributes, this.hass);

  protected render() {
    if (!this.hass) {
@@ -94,10 +82,9 @@ class HaEntityAttributePicker extends LitElement {
    }

    return html`
-      <ha-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
        .value=${this.value}
-        .autofocus=${this.autofocus}
        .label=${this.label ??
        this.hass.localize(
          "ui.components.entity.entity-attribute-picker.attribute"
@@ -106,38 +93,21 @@ class HaEntityAttributePicker extends LitElement {
        .required=${this.required}
        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
-        item-id-path="value"
-        item-value-path="value"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
+        .getItems=${this._getItems}
        @value-changed=${this._valueChanged}
      >
-      </ha-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
+    if (newValue !== this.value) {
+      this.value = newValue;
+      fireEvent(this, "value-changed", { value: newValue });
      fireEvent(this, "change");
-    }, 0);
+    }
  }
 }

@@ -1,15 +1,11 @@
-import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { IFuseOptions } from "fuse.js";
-import Fuse from "fuse.js";
+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 { stopPropagation } from "../../common/dom/stop_propagation";
 import 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";
@@ -18,20 +14,15 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+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";

-interface EntityNameOption {
-  primary: string;
-  secondary?: string;
-  field_label: string;
-  value: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<EntityNameOption> = (item) => html`
-  <ha-combo-box-item type="button">
+const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
+  <ha-combo-box-item type="button" compact>
    <span slot="headline">${item.primary}</span>
    ${item.secondary
      ? html`<span slot="supporting-text">${item.secondary}</span>`
@@ -79,11 +70,7 @@ export class HaEntityNamePicker extends LitElement {

  @property({ type: Boolean, reflect: true }) public disabled = false;

-  @query(".container", true) private _container?: HTMLDivElement;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  @state() private _opened = false;
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;

  private _editIndex?: number;

@@ -115,7 +102,7 @@ export class HaEntityNamePicker extends LitElement {
    return options;
  });

-  private _getOptions = memoizeOne((entityId?: string) => {
+  private _getItems = memoizeOne((entityId?: string) => {
    if (!entityId) {
      return [];
    }
@@ -124,7 +111,7 @@ export class HaEntityNamePicker extends LitElement {

    const items = (
      ["entity", "device", "area", "floor"] as const
-    ).map<EntityNameOption>((name) => {
+    ).map<PickerComboBoxItem>((name) => {
      const stateObj = this.hass.states[entityId];
      const isValid = types.has(name);
      const primary = this.hass.localize(
@@ -137,25 +124,39 @@ export class HaEntityNamePicker extends LitElement {
              `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
            )) || "-";

+      const id = formatOptionValue({ type: name });
+
      return {
+        id,
        primary,
        secondary,
-        field_label: primary,
-        value: formatOptionValue({ type: name }),
+        search_labels: {
+          primary,
+          secondary: secondary || null,
+          id,
+        },
+        sorting_label: primary,
      };
    });

    return items;
  });

-  private _customNameOption = memoizeOne((text: string) => ({
-    primary: this.hass.localize(
-      "ui.components.entity.entity-name-picker.custom_name"
-    ),
-    secondary: `"${text}"`,
-    field_label: text,
-    value: formatOptionValue({ type: "text", text }),
-  }));
+  private _customNameOption = memoizeOne(
+    (text: string): PickerComboBoxItem => ({
+      id: formatOptionValue({ type: "text", text }),
+      primary: this.hass.localize(
+        "ui.components.entity.entity-name-picker.custom_name"
+      ),
+      secondary: `"${text}"`,
+      search_labels: {
+        primary: text,
+        secondary: `"${text}"`,
+        id: formatOptionValue({ type: "text", text }),
+      },
+      sorting_label: text,
+    })
+  );

  private _formatItem = (item: EntityNameItem) => {
    if (item.type === "text") {
@@ -171,88 +172,79 @@ export class HaEntityNamePicker extends LitElement {

  protected render() {
    const value = this._items;
-    const options = this._getOptions(this.entityId);
    const validTypes = this._validTypes(this.entityId);

    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <div 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>
-
-        <mwc-menu-surface
-          .open=${this._opened}
-          @closed=${this._onClosed}
-          @opened=${this._onOpened}
-          @input=${stopPropagation}
-          .anchor=${this._container}
-        >
-          <ha-combo-box
-            .hass=${this.hass}
-            .value=${""}
-            .autofocus=${this.autofocus}
+      <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}
-            .required=${this.required && !value.length}
-            .items=${options}
-            allow-custom-value
-            item-id-path="value"
-            item-value-path="value"
-            item-label-path="field_label"
-            .renderer=${rowRenderer}
-            @opened-changed=${this._openedChanged}
-            @value-changed=${this._comboBoxValueChanged}
-            @filter-changed=${this._filterChanged}
+            handle-selector="button.primary.action"
+            filter=".add"
          >
-          </ha-combo-box>
-        </mwc-menu-surface>
-      </div>
+            <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()}
    `;
  }
@@ -267,32 +259,27 @@ export class HaEntityNamePicker extends LitElement {
      : nothing;
  }

-  private _onClosed(ev) {
+  private async _addItem(ev: Event) {
    ev.stopPropagation();
-    this._opened = false;
    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
  }

-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
+  private async _editItem(ev: Event) {
    ev.stopPropagation();
-    this._opened = true;
-    await this._comboBox?.focus();
-    await this._comboBox?.open();
-  }
-
-  private async _addItem(ev) {
-    ev.stopPropagation();
-    this._opened = true;
-  }
-
-  private async _editItem(ev) {
-    ev.stopPropagation();
-    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
    this._editIndex = idx;
-    this._opened = true;
+    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[] {
@@ -322,78 +309,55 @@ export class HaEntityNamePicker extends LitElement {
    }
  );

-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    const open = ev.detail.value;
-    if (open) {
-      const options = this._comboBox.items || [];
-
-      const initialItem =
-        this._editIndex != null ? this._items[this._editIndex] : undefined;
-
-      const initialValue = initialItem ? formatOptionValue(initialItem) : "";
-
-      const filteredItems = this._filterSelectedOptions(options, initialValue);
-
-      if (initialItem?.type === "text" && initialItem.text) {
-        filteredItems.push(this._customNameOption(initialItem.text));
-      }
-
-      this._comboBox.filteredItems = filteredItems;
-      this._comboBox.setInputValue(initialValue);
-    } else {
-      this._opened = false;
-      this._comboBox.setInputValue("");
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      const item = this._items[this._editIndex];
+      return item ? formatOptionValue(item) : undefined;
    }
+    return undefined;
  }

-  private _filterSelectedOptions = (
-    options: EntityNameOption[],
-    current?: string
-  ) => {
-    const items = this._items;
+  private _getFilteredItems = (): PickerComboBoxItem[] => {
+    const items = this._getItems(this.entityId);
+    const currentItem =
+      this._editIndex != null ? this._items[this._editIndex] : undefined;
+    const currentValue = currentItem ? formatOptionValue(currentItem) : "";

    const excludedValues = new Set(
-      items
+      this._items
        .filter((item) => UNIQUE_TYPES.has(item.type))
        .map((item) => formatOptionValue(item))
    );

-    const filteredOptions = options.filter(
-      (option) => !excludedValues.has(option.value) || option.value === current
+    const filteredItems = items.filter(
+      (item) => !excludedValues.has(item.id) || item.id === currentValue
    );
-    return filteredOptions;
-  };

-  private _filterChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.detail.value;
-    const filter = input?.toLowerCase() || "";
-    const options = this._comboBox.items || [];
-
-    const currentItem =
-      this._editIndex != null ? this._items[this._editIndex] : undefined;
-
-    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
-
-    let filteredItems = this._filterSelectedOptions(options, currentValue);
-
-    if (!filter) {
-      this._comboBox.filteredItems = filteredItems;
-      return;
+    // When editing an existing text item, include it in the base items
+    if (currentItem?.type === "text" && currentItem.text) {
+      filteredItems.push(this._customNameOption(currentItem.text));
    }

-    const fuseOptions: IFuseOptions<EntityNameOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
+    return filteredItems;
+  };

-    const fuse = new Fuse(filteredItems, fuseOptions);
-    filteredItems = fuse.search(filter).map((result) => result.item);
-    filteredItems.push(this._customNameOption(input));
-    this._comboBox.filteredItems = filteredItems;
-  }
+  private _searchFn = (
+    searchString: string,
+    filteredItems: PickerComboBoxItem[]
+  ): PickerComboBoxItem[] => {
+    const currentItem =
+      this._editIndex != null ? this._items[this._editIndex] : undefined;
+    const currentId =
+      currentItem?.type === "text" && currentItem.text
+        ? this._customNameOption(currentItem.text).id
+        : undefined;
+
+    // Remove custom name option if search string is present to avoid duplicates
+    if (searchString && currentId) {
+      return filteredItems.filter((item) => item.id !== currentId);
+    }
+    return filteredItems;
+  };

  private async _moveItem(ev: CustomEvent) {
    ev.stopPropagation();
@@ -403,25 +367,21 @@ export class HaEntityNamePicker extends LitElement {
    const element = newValue.splice(oldIndex, 1)[0];
    newValue.splice(newIndex, 0, element);
    this._setValue(newValue);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private async _removeItem(ev) {
+  private async _removeItem(ev: Event) {
    ev.stopPropagation();
    const value = [...this._items];
-    const idx = parseInt(ev.target.dataset.idx, 10);
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
    value.splice(idx, 1);
    this._setValue(value);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
    ev.stopPropagation();
    const value = ev.detail.value;

-    if (this.disabled || value === "") {
+    if (this.disabled || !value) {
      return;
    }

@@ -431,11 +391,16 @@ export class HaEntityNamePicker extends LitElement {

    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[]) {
@@ -497,10 +462,6 @@ export class HaEntityNamePicker extends LitElement {
      order: 1;
    }

-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
-    }
-
    ha-chip-set {
      padding: var(--ha-space-2) var(--ha-space-2);
    }
@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -7,11 +7,12 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import {
+  entityComboBoxKeys,
  getEntities,
  type EntityComboBoxItem,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_picker";
 import { domainToName } from "../../data/integration";
 import {
  isHelperDomain,
@@ -171,9 +172,9 @@ export class HaEntityPicker extends LitElement {
    return this.showEntityId || this.hass.userData?.showEntityIdPicker;
  }

-  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<EntityComboBoxItem> = (
    item,
-    { index }
+    index
  ) => {
    const showEntityId = this._showEntityId;

@@ -227,7 +228,7 @@ export class HaEntityPicker extends LitElement {
      if (!createDomains?.length) {
        return [];
      }
-
+      this.hass.loadFragmentTranslation("config");
      return createDomains.map((domain) => {
        const primary = localize(
          "ui.components.entity.entity-picker.create_helper",
@@ -235,7 +236,7 @@ export class HaEntityPicker extends LitElement {
            domain: isHelperDomain(domain)
              ? localize(
                  `ui.panel.config.helpers.types.${domain as HelperDomain}`
-                )
+                ) || domain
              : domainToName(localize, domain),
          }
        );
@@ -276,22 +277,28 @@ export class HaEntityPicker extends LitElement {
        .disabled=${this.disabled}
        .autofocus=${this.autofocus}
        .allowCustomValue=${this.allowCustomEntity}
+        .required=${this.required}
        .label=${this.label}
+        .placeholder=${placeholder}
        .helper=${this.helper}
+        .value=${this.addButton ? undefined : this.value}
        .searchLabel=${this.searchLabel}
        .notFoundLabel=${this._notFoundLabel}
-        .placeholder=${placeholder}
-        .value=${this.addButton ? undefined : this.value}
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
        .hideClearIcon=${this.hideClearIcon}
        .searchFn=${this._searchFn}
        .valueRenderer=${this._valueRenderer}
-        @value-changed=${this._valueChanged}
+        .searchKeys=${entityComboBoxKeys}
+        use-top-label
        .addButtonLabel=${this.addButton
          ? this.hass.localize("ui.components.entity.entity-picker.add")
          : undefined}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.entity.entity-picker.unknown"
+        )}
+        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
    `;
@@ -1,17 +1,13 @@
-import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { IFuseOptions } from "fuse.js";
-import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
 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 { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import {
  STATE_DISPLAY_SPECIAL_CONTENT,
  STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS,
@@ -20,21 +16,16 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+import "../ha-combo-box-item";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-input-helper-text";
+import {
+  NO_ITEMS_AVAILABLE_ID,
+  type PickerComboBoxItem,
+} from "../ha-picker-combo-box";
 import "../ha-sortable";

-interface StateContentOption {
-  primary: string;
-  value: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<StateContentOption> = (item) => html`
-  <ha-combo-box-item type="button">
-    <span slot="headline">${item.primary}</span>
-  </ha-combo-box-item>
-`;
-
 const HIDDEN_ATTRIBUTES = [
  "access_token",
  "available_modes",
@@ -105,69 +96,148 @@ export class HaStateContentPicker extends LitElement {
  @property({ type: Boolean, attribute: "allow-name" }) public allowName =
    false;

+  @property({ type: Boolean, attribute: "allow-context" }) public allowContext =
+    false;
+
  @property() public label?: string;

  @property() public value?: string[] | string;

  @property() public helper?: string;

-  @query(".container", true) private _container?: HTMLDivElement;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  @state() private _opened = false;
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;

  private _editIndex?: number;

-  private _options = memoizeOne(
-    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
+  private _getItems = memoizeOne(
+    (
+      entityId?: string,
+      stateObj?: HassEntity,
+      allowName?: boolean,
+      allowContext?: boolean
+    ) => {
      const domain = entityId ? computeDomain(entityId) : undefined;
-      return [
+      const items: PickerComboBoxItem[] = [
        {
+          id: "state",
          primary: this.hass.localize(
            "ui.components.state-content-picker.state"
          ),
-          value: "state",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.state"
+          ),
        },
        ...(allowName
          ? [
              {
+                id: "name",
                primary: this.hass.localize(
                  "ui.components.state-content-picker.name"
                ),
-                value: "name",
-              },
+                sorting_label: this.hass.localize(
+                  "ui.components.state-content-picker.name"
+                ),
+              } satisfies PickerComboBoxItem,
            ]
          : []),
        {
+          id: "last_changed",
          primary: this.hass.localize(
            "ui.components.state-content-picker.last_changed"
          ),
-          value: "last_changed",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.last_changed"
+          ),
        },
        {
+          id: "last_updated",
          primary: this.hass.localize(
            "ui.components.state-content-picker.last_updated"
          ),
-          value: "last_updated",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.last_updated"
+          ),
        },
+        ...(allowContext && stateObj
+          ? (() => {
+              const context = getEntityContext(
+                stateObj,
+                this.hass.entities,
+                this.hass.devices,
+                this.hass.areas,
+                this.hass.floors
+              );
+              const contextItems: PickerComboBoxItem[] = [];
+              if (context.device) {
+                contextItems.push({
+                  id: "device_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.device_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.device_name"
+                  ),
+                });
+              }
+              if (context.area) {
+                contextItems.push({
+                  id: "area_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.area_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.area_name"
+                  ),
+                });
+              }
+              if (context.floor) {
+                contextItems.push({
+                  id: "floor_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.floor_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.floor_name"
+                  ),
+                });
+              }
+              return contextItems;
+            })()
+          : []),
        ...(domain
          ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
              STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
-            ).map((content) => ({
-              primary: this.hass.localize(
-                `ui.components.state-content-picker.${content}`
-              ),
-              value: content,
-            }))
+            ).map(
+              (content) =>
+                ({
+                  id: content,
+                  primary: this.hass.localize(
+                    `ui.components.state-content-picker.${content}`
+                  ),
+                  sorting_label: this.hass.localize(
+                    `ui.components.state-content-picker.${content}`
+                  ),
+                }) satisfies PickerComboBoxItem
+            )
          : []),
        ...Object.keys(stateObj?.attributes ?? {})
          .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
-          .map((attribute) => ({
-            primary: this.hass.formatEntityAttributeName(stateObj!, attribute),
-            value: attribute,
-          })),
-      ] satisfies StateContentOption[];
+          .map(
+            (attribute) =>
+              ({
+                id: attribute,
+                primary: this.hass.formatEntityAttributeName(
+                  stateObj!,
+                  attribute
+                ),
+                sorting_label: this.hass.formatEntityAttributeName(
+                  stateObj!,
+                  attribute
+                ),
+              }) satisfies PickerComboBoxItem
+          ),
+      ];
+      return items;
    }
  );

@@ -178,122 +248,120 @@ export class HaStateContentPicker extends LitElement {
      ? this.hass.states[this.entityId]
      : undefined;

-    const options = this._options(this.entityId, stateObj, this.allowName);
-
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <div class="container ${this.disabled ? "disabled" : ""}">
-        <ha-sortable
-          no-style
-          @item-moved=${this._moveItem}
-          .disabled=${this.disabled}
-          handle-selector="button.primary.action"
-          filter=".add"
-        >
-          <ha-chip-set>
-            ${repeat(
-              this._value,
-              (item) => item,
-              (item: string, idx) => {
-                const label = options.find((o) => o.value === item)?.primary;
-                const isValid = !!label;
-                return html`
-                  <ha-input-chip
-                    data-idx=${idx}
-                    @remove=${this._removeItem}
-                    @click=${this._editItem}
-                    .label=${label || item}
-                    .selected=${!this.disabled}
-                    .disabled=${this.disabled}
-                    class=${!isValid ? "invalid" : ""}
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
-                  </ha-input-chip>
-                `;
-              }
-            )}
-            ${this.disabled
-              ? nothing
-              : html`
-                  <ha-assist-chip
-                    @click=${this._addItem}
-                    .disabled=${this.disabled}
-                    label=${this.hass.localize(
-                      "ui.components.entity.entity-state-content-picker.add"
-                    )}
-                    class="add"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                  </ha-assist-chip>
-                `}
-          </ha-chip-set>
-        </ha-sortable>
-
-        <mwc-menu-surface
-          .open=${this._opened}
-          @closed=${this._onClosed}
-          @opened=${this._onOpened}
-          @input=${stopPropagation}
-          .anchor=${this._container}
-        >
-          <ha-combo-box
-            .hass=${this.hass}
-            .value=${""}
-            .autofocus=${this.autofocus}
-            .disabled=${this.disabled || !this.entityId}
-            .required=${this.required && !value.length}
-            .helper=${this.helper}
-            .items=${options}
-            allow-custom-value
-            item-id-path="value"
-            item-value-path="value"
-            item-label-path="primary"
-            .renderer=${rowRenderer}
-            @opened-changed=${this._openedChanged}
-            @value-changed=${this._comboBoxValueChanged}
-            @filter-changed=${this._filterChanged}
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${this._getPickerValue()}
+        .getItems=${this._getFilteredItems}
+        .getAdditionalItems=${this._getAdditionalItems}
+        .searchFn=${this._searchFn}
+        @value-changed=${this._pickerValueChanged}
+      >
+        <div slot="field" class="container">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
+            .disabled=${this.disabled}
+            handle-selector="button.primary.action"
+            filter=".add"
          >
-          </ha-combo-box>
-        </mwc-menu-surface>
-      </div>
+            <ha-chip-set>
+              ${repeat(
+                this._value,
+                (item) => item,
+                (item: string, idx) => {
+                  const label = this._getItemLabel(item, stateObj);
+                  const isValid = !!label;
+                  return html`
+                    <ha-input-chip
+                      data-idx=${idx}
+                      @remove=${this._removeItem}
+                      @click=${this._editItem}
+                      .label=${label || item}
+                      .selected=${!this.disabled}
+                      .disabled=${this.disabled}
+                      class=${!isValid ? "invalid" : ""}
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                    </ha-input-chip>
+                  `;
+                }
+              )}
+              ${this.disabled
+                ? nothing
+                : html`
+                    <ha-assist-chip
+                      @click=${this._addItem}
+                      .disabled=${this.disabled}
+                      label=${this.hass.localize(
+                        "ui.components.entity.entity-state-content-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 _onClosed(ev) {
+  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._opened = false;
    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
  }

-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
+  private async _editItem(ev: Event) {
    ev.stopPropagation();
-    this._opened = true;
-    await this._comboBox?.focus();
-    await this._comboBox?.open();
-  }
-
-  private async _addItem(ev) {
-    ev.stopPropagation();
-    this._opened = true;
-  }
-
-  private async _editItem(ev) {
-    ev.stopPropagation();
-    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
    this._editIndex = idx;
-    this._opened = true;
+    await this.updateComplete;
+    await this._picker?.open();
  }

  private get _value() {
    return !this.value ? [] : ensureArray(this.value);
  }

+  private _getItemLabel = memoizeOne(
+    (value: string, stateObj?: HassEntity): string | undefined => {
+      const stateObjForItems = this.entityId
+        ? this.hass.states[this.entityId]
+        : stateObj;
+      const items = this._getItems(
+        this.entityId,
+        stateObjForItems,
+        this.allowName,
+        this.allowContext
+      );
+      return items.find((item) => item.id === value)?.primary;
+    }
+  );
+
  private _toValue = memoizeOne((value: string[]): typeof this.value => {
    if (value.length === 0) {
      return undefined;
@@ -304,63 +372,91 @@ export class HaStateContentPicker extends LitElement {
    return value;
  });

-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    const open = ev.detail.value;
-    if (open) {
-      const options = this._comboBox.items || [];
-
-      const initialValue =
-        this._editIndex != null ? this._value[this._editIndex] : "";
-      const filteredItems = this._filterSelectedOptions(options, initialValue);
-
-      this._comboBox.filteredItems = filteredItems;
-      this._comboBox.setInputValue(initialValue);
-    } else {
-      this._opened = false;
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      return this._value[this._editIndex];
    }
+    return undefined;
  }

-  private _filterSelectedOptions = (
-    options: StateContentOption[],
-    current?: string
-  ) => {
+  private _customValueOption = memoizeOne(
+    (text: string): PickerComboBoxItem => ({
+      id: text,
+      primary: this.hass.localize(
+        "ui.components.entity.entity-state-content-picker.custom_attribute"
+      ),
+      secondary: `"${text}"`,
+      search_labels: {
+        primary: text,
+        secondary: `"${text}"`,
+        id: text,
+      },
+      sorting_label: text,
+    })
+  );
+
+  private _getFilteredItems = (): PickerComboBoxItem[] => {
+    const stateObj = this.entityId
+      ? this.hass.states[this.entityId]
+      : undefined;
+    const items = this._getItems(
+      this.entityId,
+      stateObj,
+      this.allowName,
+      this.allowContext
+    );
+    const currentValue =
+      this._editIndex != null ? this._value[this._editIndex] : undefined;
+
    const value = this._value;

-    return options.filter(
-      (option) => !value.includes(option.value) || option.value === current
-    );
-  };
-
-  private _filterChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.detail.value;
-    const filter = input?.toLowerCase() || "";
-    const options = this._comboBox.items || [];
-
-    const currentValue =
-      this._editIndex != null ? this._value[this._editIndex] : "";
-
-    this._comboBox.filteredItems = this._filterSelectedOptions(
-      options,
-      currentValue
+    const filteredItems = items.filter(
+      (item) => !value.includes(item.id) || item.id === currentValue
    );

-    if (!filter) {
-      return;
+    // When editing an existing custom value, include it in the base items
+    if (currentValue && !items.find((item) => item.id === currentValue)) {
+      filteredItems.push(this._customValueOption(currentValue));
    }

-    const fuseOptions: IFuseOptions<StateContentOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
+    return filteredItems;
+  };

-    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
-    const filteredItems = fuse.search(filter).map((result) => result.item);
+  private _getAdditionalItems = (
+    searchString?: string
+  ): PickerComboBoxItem[] => {
+    const stateObj = this.entityId
+      ? this.hass.states[this.entityId]
+      : undefined;
+    const items = this._getItems(
+      this.entityId,
+      stateObj,
+      this.allowName,
+      this.allowContext
+    );

-    this._comboBox.filteredItems = filteredItems;
-  }
+    // If the search string does not match with the id of any of the items,
+    // offer to add it as a custom attribute
+    const existingItem = items.find((item) => item.id === searchString);
+    if (searchString && !existingItem) {
+      return [this._customValueOption(searchString)];
+    }
+
+    return [];
+  };
+
+  private _searchFn = (
+    search: string,
+    filteredItems: PickerComboBoxItem[],
+    _allItems: PickerComboBoxItem[]
+  ): PickerComboBoxItem[] => {
+    if (!search) {
+      return filteredItems;
+    }
+
+    // Always exclude NO_ITEMS_AVAILABLE_ID (since custom values are allowed) and currentValue (the custom value being edited)
+    return filteredItems.filter((item) => item.id !== NO_ITEMS_AVAILABLE_ID);
+  };

  private async _moveItem(ev: CustomEvent) {
    ev.stopPropagation();
@@ -370,25 +466,21 @@ export class HaStateContentPicker extends LitElement {
    const element = newValue.splice(oldIndex, 1)[0];
    newValue.splice(newIndex, 0, element);
    this._setValue(newValue);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private async _removeItem(ev) {
+  private async _removeItem(ev: Event) {
    ev.stopPropagation();
    const value = [...this._value];
-    const idx = parseInt(ev.target.dataset.idx, 10);
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
    value.splice(idx, 1);
    this._setValue(value);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
    ev.stopPropagation();
    const value = ev.detail.value;

-    if (this.disabled || value === "") {
+    if (this.disabled || !value) {
      return;
    }

@@ -396,11 +488,16 @@ export class HaStateContentPicker extends LitElement {

    if (this._editIndex != null) {
      newValue[this._editIndex] = value;
+      this._editIndex = undefined;
    } else {
      newValue.push(value);
    }

    this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
  }

  private _setValue(value: string[]) {
@@ -442,7 +539,7 @@ export class HaStateContentPicker extends LitElement {
        height 180ms ease-in-out,
        background-color 180ms ease-in-out;
    }
-    .container.disabled:after {
+    :host([disabled]) .container:after {
      background-color: var(
        --mdc-text-field-disabled-line-color,
        rgba(0, 0, 0, 0.42)
@@ -462,10 +559,6 @@ export class HaStateContentPicker extends LitElement {
      order: 1;
    }

-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
-    }
-
    ha-chip-set {
      padding: var(--ha-space-2) var(--ha-space-2);
    }
@@ -486,6 +579,11 @@ export class HaStateContentPicker extends LitElement {
    .sortable-drag {
      cursor: grabbing;
    }
+
+    ha-input-helper-text {
+      display: block;
+      margin: var(--ha-space-2) 0 0;
+    }
  `;
 }

@@ -1,27 +1,23 @@
-import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-
-interface StateOption {
-  value: string;
-  label: string;
-}
+import "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";

@customElement("ha-entity-state-picker")
-class HaEntityStatePicker extends LitElement {
+export class HaEntityStatePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public entityId?: string | string[];

  @property() public attribute?: string;

-  @property({ attribute: false }) public extraOptions?: any[];
+  @property({ attribute: false }) public extraOptions?: PickerComboBoxItem[];

  // eslint-disable-next-line lit/no-native-attributes
  @property({ type: Boolean }) public autofocus = false;
@@ -42,59 +38,82 @@ class HaEntityStatePicker extends LitElement {

  @property() public helper?: string;

-  @state() private _opened = false;
+  private _getItems = memoizeOne(
+    (
+      hass: HomeAssistant,
+      entityId: string | string[] | undefined,
+      attribute: string | undefined,
+      hideStates: string[] | undefined,
+      extraOptions: PickerComboBoxItem[] | undefined
+    ): PickerComboBoxItem[] => {
+      const entityIds = entityId ? ensureArray(entityId) : [];

-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+      const entitiesOptions = entityIds.map<PickerComboBoxItem[]>(
+        (entityIdItem) => {
+          const stateObj = hass.states[entityIdItem] || {
+            entity_id: entityIdItem,
+            attributes: {},
+          };

-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !(!changedProps.has("_opened") && this._opened);
-  }
+          const states = getStates(hass, stateObj, attribute).filter(
+            (s) => !hideStates?.includes(s)
+          );

-  protected updated(changedProps: PropertyValues) {
-    if (
-      (changedProps.has("_opened") && this._opened) ||
-      changedProps.has("entityId") ||
-      changedProps.has("attribute") ||
-      changedProps.has("extraOptions")
-    ) {
-      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+          return states
+            .map((s) => {
+              const primary = attribute
+                ? hass.formatEntityAttributeValue(stateObj, attribute, s)
+                : hass.formatEntityState(stateObj, s);
+              return {
+                id: s,
+                primary,
+                sorting_label: primary,
+              };
+            })
+            .filter((option) => option.id && option.primary);
+        }
+      );

-      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
-        const stateObj = this.hass.states[entityId] || {
-          entity_id: entityId,
-          attributes: {},
-        };
-
-        const states = getStates(this.hass, stateObj, this.attribute).filter(
-          (s) => !this.hideStates?.includes(s)
-        );
-
-        return states.map((s) => ({
-          value: s,
-          label: this.attribute
-            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
-            : this.hass.formatEntityState(stateObj, s),
-        }));
-      });
-
-      const options: StateOption[] = [];
+      const options: PickerComboBoxItem[] = [];
      const optionsSet = new Set<string>();
      for (const entityOptions of entitiesOptions) {
        for (const option of entityOptions) {
-          if (!optionsSet.has(option.value)) {
-            optionsSet.add(option.value);
+          if (!optionsSet.has(option.id)) {
+            optionsSet.add(option.id);
            options.push(option);
          }
        }
      }

-      if (this.extraOptions) {
-        options.unshift(...this.extraOptions);
+      if (extraOptions) {
+        // Filter out any extraOptions with empty primary or id fields
+        const validExtraOptions = extraOptions.filter(
+          (option) => option.id && option.primary
+        );
+        options.unshift(...validExtraOptions);
      }

-      (this._comboBox as any).filteredItems = options;
+      return options;
    }
-  }
+  );
+
+  private _getFilteredItems = (
+    _searchString?: string,
+    _section?: string
+  ): PickerComboBoxItem[] =>
+    this._getItems(
+      this.hass,
+      this.entityId,
+      this.attribute,
+      this.hideStates,
+      this.extraOptions
+    );
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const items = this._getFilteredItems();
+    const item = items.find((option) => option.id === value);
+    return html`<span slot="headline">${item?.primary ?? value}</span>`;
+  };

  protected render() {
    if (!this.hass) {
@@ -102,48 +121,40 @@ class HaEntityStatePicker extends LitElement {
    }

    return html`
-      <ha-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
-        .value=${this._value}
+        .allowCustomValue=${this.allowCustomValue}
+        .disabled=${this.disabled || !this.entityId}
        .autofocus=${this.autofocus}
+        .required=${this.required}
        .label=${this.label ??
        this.hass.localize("ui.components.entity.entity-state-picker.state")}
-        .disabled=${this.disabled || !this.entityId}
-        .required=${this.required}
        .helper=${this.helper}
-        .allowCustomValue=${this.allowCustomValue}
-        item-id-path="value"
-        item-value-path="value"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
+        .value=${this.value}
+        .getItems=${this._getFilteredItems}
+        .valueRenderer=${this._valueRenderer}
+        .notFoundLabel=${this.hass.localize("ui.components.combo-box.no_match")}
+        .customValueLabel=${this.hass.localize(
+          "ui.components.entity.entity-state-picker.add_custom_state"
+        )}
        @value-changed=${this._valueChanged}
      >
-      </ha-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (newValue !== this._value) {
+    if (newValue !== this.value) {
      this._setValue(newValue);
    }
  }

-  private _setValue(value: string) {
+  private _setValue(value: string | undefined) {
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
  }
 }

@@ -6,7 +6,11 @@ import { customElement, property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNKNOWN, isUnavailableState } from "../../data/entity";
+import {
+  UNAVAILABLE,
+  UNKNOWN,
+  isUnavailableState,
+} from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -139,17 +143,19 @@ export class HaEntityToggle extends LitElement {
    // Optimistic update.
    this._isOn = turnOn;

-    await this.hass.callService(serviceDomain, service, {
-      entity_id: this.stateObj.entity_id,
-    });
-
-    setTimeout(async () => {
-      // If after 2 seconds we have not received a state update
-      // reset the switch to it's original state.
-      if (this.stateObj === currentState) {
-        this._isOn = isOn(this.stateObj);
-      }
-    }, 2000);
+    try {
+      await this.hass.callService(serviceDomain, service, {
+        entity_id: this.stateObj.entity_id,
+      });
+    } finally {
+      setTimeout(async () => {
+        // If after 2 seconds we have not received a state update
+        // reset the switch to it's original state.
+        if (this.stateObj === currentState) {
+          this._isOn = isOn(this.stateObj);
+        }
+      }, 2000);
+    }
  }

  static styles = css`
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .21.1
 .13.0