feat: Add support for multiple media selections

This change allows the media selector to handle multiple media selections. It also includes improvements to thumbnail handling and UI updates for multiple selections. Co-authored-by: paulus.schoutsen <paulus.schoutsen@nabucasa.com>
2025-11-05 00:49:53 +00:00 · 2025-10-13 01:29:03 +00:00
319 changed files with 5653 additions and 12922 deletions
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -61,7 +61,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -36,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
        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@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6

      # ℹ️ 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@4e94bd11f71e507f7f87df81788dff88d1dacbfb # v4.31.0
+        uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_deployment.yaml
+++ b/.github/workflows/design_deployment.yaml
@@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_preview.yaml
+++ b/.github/workflows/design_preview.yaml
@@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/nightly.yaml
+++ b/.github/workflows/nightly.yaml
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: translations
          path: translations.tar.gz
--- a/.github/workflows/relative-ci.yaml
+++ b/.github/workflows/relative-ci.yaml
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@8504826a02078b05756e4c07e380023cc2c4274a # v3.1.0
+        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -55,7 +55,7 @@ jobs:
          script/release

      - name: Upload release assets
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: |
            dist/*.whl
@@ -75,7 +75,7 @@ jobs:

      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@2025.10.0
+        uses: home-assistant/wheels@2025.09.1
        with:
          abi: cp313
          tag: musllinux_1_2
@@ -93,7 +93,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -108,7 +108,7 @@ jobs:
      - name: Tar folder
        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

@@ -122,7 +122,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -137,6 +137,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-22.21.1
+22.20.0
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/cast/src/launcher/layout/hc-cast.ts
@@ -16,9 +16,9 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -28,6 +28,7 @@ import {
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";

@customElement("hc-cast")
@@ -95,9 +96,7 @@ class HcCast extends LitElement {
                <ha-list @action=${this._handlePickView} activatable>
                  ${(
                    this.lovelaceViews ?? [
-                      {
-                        title: "Home",
-                      },
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                    ]
                  ).map(
                    (view, idx) => html`
--- a/gallery/src/pages/components/ha-dialogs.markdown
+++ b/gallery/src/pages/components/ha-dialogs.markdown
@@ -5,14 +5,14 @@ subtitle: Dialogs provide important prompts in a user flow.

 # Material Design 3

-Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guidelines. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).

 # Guidelines

 ## Design

- Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
+- Dialogs have a max width of 560px. Alert and confirmation dialogs got a fixed width of 320px. If you need more width, consider a dedicated page instead.
+- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guideliness.
 - Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
@@ -26,7 +26,7 @@ Our dialogs are based on the latest version of Material Design. Please note that

 - A best practice is to always use a title, even if it is optional by Material guidelines.
 - People mainly read the title and a button. Put the most important information in those two.
- Try to avoid user generated content in the title, this could make the title unreadably long.
+- Try to avoid user generated content in the title, this could make the title unreadable long.
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.

--- a/gallery/src/pages/misc/entity-state.ts
+++ b/gallery/src/pages/misc/entity-state.ts
@@ -39,7 +39,6 @@ const SENSOR_DEVICE_CLASSES = [
  "pm1",
  "pm10",
  "pm25",
-  "pm4",
  "power_factor",
  "power",
  "precipitation",
--- a/package.json
+++ b/package.json
@@ -28,32 +28,32 @@
  "dependencies": {
    "@babel/runtime": "7.28.4",
    "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.19.1",
-    "@codemirror/commands": "6.10.0",
+    "@codemirror/autocomplete": "6.19.0",
+    "@codemirror/commands": "6.9.0",
    "@codemirror/language": "6.11.3",
    "@codemirror/legacy-modes": "6.5.2",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.6",
+    "@codemirror/view": "6.38.5",
    "@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-datetimeformat": "6.18.1",
+    "@formatjs/intl-displaynames": "6.8.12",
+    "@formatjs/intl-durationformat": "0.7.5",
    "@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",
+    "@formatjs/intl-listformat": "7.7.12",
+    "@formatjs/intl-locale": "4.2.12",
+    "@formatjs/intl-numberformat": "8.15.5",
+    "@formatjs/intl-pluralrules": "5.4.5",
+    "@formatjs/intl-relativetimeformat": "11.4.12",
    "@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-beta.6.ha.6",
-    "@lezer/highlight": "1.2.3",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.4",
+    "@lezer/highlight": "1.2.1",
    "@lit-labs/motion": "1.0.9",
    "@lit-labs/observers": "2.0.6",
    "@lit-labs/virtualizer": "2.1.1",
@@ -99,7 +99,7 @@
    "barcode-detector": "3.0.6",
    "color-name": "2.0.2",
    "comlink": "4.4.2",
-    "core-js": "3.46.0",
+    "core-js": "3.45.1",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
    "date-fns": "4.1.0",
@@ -114,7 +114,7 @@
    "hls.js": "1.6.13",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
+    "intl-messageformat": "10.7.17",
    "js-yaml": "4.1.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -122,7 +122,7 @@
    "lit": "3.3.1",
    "lit-html": "3.3.1",
    "luxon": "3.7.2",
-    "marked": "16.4.1",
+    "marked": "16.4.0",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -135,7 +135,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.5",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -148,16 +148,16 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.28.5",
+    "@babel/core": "7.28.4",
    "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.5",
-    "@babel/preset-env": "7.28.5",
+    "@babel/plugin-transform-runtime": "7.28.3",
+    "@babel/preset-env": "7.28.3",
    "@bundle-stats/plugin-webpack-filter": "4.21.5",
-    "@lokalise/node-api": "15.3.1",
+    "@lokalise/node-api": "15.3.0",
    "@octokit/auth-oauth-device": "8.0.2",
    "@octokit/plugin-retry": "8.0.2",
    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.4",
+    "@rsdoctor/rspack-plugin": "1.3.1",
    "@rspack/core": "1.5.8",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -167,30 +167,30 @@
    "@types/culori": "4.0.1",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.21",
+    "@types/leaflet": "1.9.20",
    "@types/leaflet-draw": "1.0.13",
    "@types/leaflet.markercluster": "1.5.6",
    "@types/lodash.merge": "4.6.9",
    "@types/luxon": "3.7.1",
    "@types/mocha": "10.0.10",
-    "@types/qrcode": "1.5.6",
-    "@types/sortablejs": "1.15.9",
+    "@types/qrcode": "1.5.5",
+    "@types/sortablejs": "1.15.8",
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.3",
+    "@vitest/coverage-v8": "3.2.4",
    "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.38.0",
+    "eslint": "9.37.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.32.0",
    "eslint-plugin-lit": "2.1.1",
    "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.3.0",
+    "eslint-plugin-unused-imports": "4.2.0",
    "eslint-plugin-wc": "3.0.2",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.2",
@@ -201,9 +201,9 @@
    "gulp-rename": "2.1.0",
    "html-minifier-terser": "7.2.0",
    "husky": "9.1.7",
-    "jsdom": "27.0.1",
+    "jsdom": "27.0.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.2.6",
+    "lint-staged": "16.2.3",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -217,9 +217,9 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.2",
+    "typescript-eslint": "8.46.0",
    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.3",
+    "vitest": "3.2.4",
    "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"
@@ -235,8 +235,5 @@
    "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"
  },
-  "packageManager": "yarn@4.10.3",
-  "volta": {
-    "node": "22.21.1"
-  }
+  "packageManager": "yarn@4.10.3"
 }
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20251104.0"
+version      = "20250924.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
--- a/src/common/entity/compute_entity_name_display.ts
+++ b/src/common/entity/compute_entity_name_display.ts
@@ -9,11 +9,6 @@ import { getEntityContext } from "./context/get_entity_context";

 const DEFAULT_SEPARATOR = " ";

-export const DEFAULT_ENTITY_NAME = [
-  { type: "device" },
-  { type: "entity" },
-] satisfies EntityNameItem[];
-
 export type EntityNameItem =
  | {
      type: "entity" | "device" | "area" | "floor";
@@ -29,14 +24,14 @@ export interface EntityNameOptions {

 export const computeEntityNameDisplay = (
  stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[] | undefined,
+  name: EntityNameItem | EntityNameItem[],
  entities: HomeAssistant["entities"],
  devices: HomeAssistant["devices"],
  areas: HomeAssistant["areas"],
  floors: HomeAssistant["floors"],
  options?: EntityNameOptions
 ) => {
-  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
+  let items = ensureArray(name);

  const separator = options?.separator ?? DEFAULT_SEPARATOR;

--- a/src/common/entity/context/get_area_context.ts
+++ b/src/common/entity/context/get_area_context.ts
@@ -8,10 +8,10 @@ interface AreaContext {
 }
 export const getAreaContext = (
  area: AreaRegistryEntry,
-  hassFloors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): AreaContext => {
  const floorId = area.floor_id;
-  const floor = floorId ? hassFloors[floorId] : undefined;
+  const floor = floorId ? hass.floors[floorId] : undefined;

  return {
    area: area,
--- a/src/common/entity/entity_filter.ts
+++ b/src/common/entity/entity_filter.ts
@@ -9,9 +9,9 @@ type EntityCategory = "none" | "config" | "diagnostic";
 export interface EntityFilter {
  domain?: string | string[];
  device_class?: string | string[];
-  device?: string | null | (string | null)[];
-  area?: string | null | (string | null)[];
-  floor?: string | null | (string | null)[];
+  device?: string | string[];
+  area?: string | string[];
+  floor?: string | string[];
  label?: string | string[];
  entity_category?: EntityCategory | EntityCategory[];
  hidden_platform?: string | string[];
@@ -19,18 +19,6 @@ export interface EntityFilter {

 export type EntityFilterFunc = (entityId: string) => boolean;

-const normalizeFilterArray = <T>(
-  value: T | null | T[] | (T | null)[] | undefined
-): Set<T | null> | undefined => {
-  if (value === undefined) {
-    return undefined;
-  }
-  if (value === null) {
-    return new Set([null]);
-  }
-  return new Set(ensureArray(value));
-};
-
 export const generateEntityFilter = (
  hass: HomeAssistant,
  filter: EntityFilter
@@ -41,9 +29,11 @@ export const generateEntityFilter = (
  const deviceClasses = filter.device_class
    ? new Set(ensureArray(filter.device_class))
    : undefined;
-  const floors = normalizeFilterArray(filter.floor);
-  const areas = normalizeFilterArray(filter.area);
-  const devices = normalizeFilterArray(filter.device);
+  const floors = filter.floor ? new Set(ensureArray(filter.floor)) : undefined;
+  const areas = filter.area ? new Set(ensureArray(filter.area)) : undefined;
+  const devices = filter.device
+    ? new Set(ensureArray(filter.device))
+    : undefined;
  const entityCategories = filter.entity_category
    ? new Set(ensureArray(filter.entity_category))
    : undefined;
@@ -83,20 +73,23 @@ export const generateEntityFilter = (
    }

    if (floors) {
-      const floorId = floor?.floor_id ?? null;
-      if (!floors.has(floorId)) {
+      if (!floor || !floors.has(floor.floor_id)) {
        return false;
      }
    }
    if (areas) {
-      const areaId = area?.area_id ?? null;
-      if (!areas.has(areaId)) {
+      if (!area) {
+        return false;
+      }
+      if (!areas.has(area.area_id)) {
        return false;
      }
    }
    if (devices) {
-      const deviceId = device?.id ?? null;
-      if (!devices.has(deviceId)) {
+      if (!device) {
+        return false;
+      }
+      if (!devices.has(device.id)) {
        return false;
      }
    }
--- a/src/common/entity/get_states.ts
+++ b/src/common/entity/get_states.ts
@@ -214,7 +214,6 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
      "pm1",
      "pm10",
      "pm25",
-      "pm4",
      "power_factor",
      "power",
      "pressure",
--- a/src/common/util/swipe-gesture-recognizer.ts
+++ b/src/common/util/swipe-gesture-recognizer.ts
@@ -1,116 +0,0 @@
-export interface SwipeGestureResult {
-  velocity: number;
-  delta: number;
-  isSwipe: boolean;
-  isDownwardSwipe: boolean;
-}
-
-export interface SwipeGestureConfig {
-  velocitySwipeThreshold?: number;
-  movementTimeThreshold?: number;
-}
-
-const VELOCITY_SWIPE_THRESHOLD = 0.5; // px/ms
-const MOVEMENT_TIME_THRESHOLD = 100; // ms
-
-/**
- * Recognizes swipe gestures and calculates velocity for touch interactions.
- * Tracks touch movement and provides velocity-based and position-based gesture detection.
- */
-export class SwipeGestureRecognizer {
-  private _startY = 0;
-
-  private _delta = 0;
-
-  private _startTime = 0;
-
-  private _lastY = 0;
-
-  private _lastTime = 0;
-
-  private _velocityThreshold: number;
-
-  private _movementTimeThreshold: number;
-
-  constructor(config: SwipeGestureConfig = {}) {
-    this._velocityThreshold =
-      config.velocitySwipeThreshold ?? VELOCITY_SWIPE_THRESHOLD; // px/ms
-    this._movementTimeThreshold =
-      config.movementTimeThreshold ?? MOVEMENT_TIME_THRESHOLD; // ms
-  }
-
-  /**
-   * Initialize gesture tracking with starting touch position
-   */
-  public start(clientY: number): void {
-    const now = Date.now();
-    this._startY = clientY;
-    this._startTime = now;
-    this._lastY = clientY;
-    this._lastTime = now;
-    this._delta = 0;
-  }
-
-  /**
-   * Update gesture state during movement
-   * Returns the current delta (negative when dragging down)
-   */
-  public move(clientY: number): number {
-    const now = Date.now();
-    this._delta = this._startY - clientY;
-    this._lastY = clientY;
-    this._lastTime = now;
-    return this._delta;
-  }
-
-  /**
-   * Calculate final gesture result when touch ends
-   */
-  public end(): SwipeGestureResult {
-    const velocity = this.getVelocity();
-    const hasSignificantVelocity = Math.abs(velocity) > this._velocityThreshold;
-
-    return {
-      velocity,
-      delta: this._delta,
-      isSwipe: hasSignificantVelocity,
-      isDownwardSwipe: velocity > 0,
-    };
-  }
-
-  /**
-   * Get current drag delta (negative when dragging down)
-   */
-  public getDelta(): number {
-    return this._delta;
-  }
-
-  /**
-   * Calculate velocity based on recent movement
-   * Returns 0 if no recent movement detected
-   * Positive velocity means downward swipe
-   */
-  public getVelocity(): number {
-    const now = Date.now();
-    const timeSinceLastMove = now - this._lastTime;
-
-    // Only consider velocity if the last movement was recent
-    if (timeSinceLastMove >= this._movementTimeThreshold) {
-      return 0;
-    }
-
-    const timeDelta = this._lastTime - this._startTime;
-    return timeDelta > 0 ? (this._lastY - this._startY) / timeDelta : 0;
-  }
-
-  /**
-   * Reset all tracking state
-   */
-  public reset(): void {
-    this._startY = 0;
-    this._delta = 0;
-    this._startTime = 0;
-    this._lastY = 0;
-    this._lastTime = 0;
-  }
-}
--- a/src/components/buttons/ha-call-service-button.ts
+++ b/src/components/buttons/ha-call-service-button.ts
@@ -6,7 +6,6 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { Appearance } from "../ha-button";

@customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
@@ -26,14 +25,12 @@ class HaCallServiceButton extends LitElement {

  @property() public confirmation?;

-  @property() public appearance: Appearance = "plain";
-
  public render(): TemplateResult {
    return html`
      <ha-progress-button
        .progress=${this.progress}
        .disabled=${this.disabled}
-        .appearance=${this.appearance}
+        appearance="plain"
        @click=${this._buttonTapped}
        tabindex="0"
      >
--- a/src/components/chart/down-sample.ts
+++ b/src/components/chart/down-sample.ts
@@ -1,22 +1,21 @@
 import type { LineSeriesOption } from "echarts";

-export function downSampleLineData<
-  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
->(
-  data: T[] | undefined,
-  maxDetails: number,
+export function downSampleLineData(
+  data: LineSeriesOption["data"],
+  chartWidth: number,
  minX?: number,
  maxX?: number
-): T[] {
-  if (!data) {
-    return [];
+) {
+  if (!data || data.length < 10) {
+    return data;
  }
-  if (data.length <= maxDetails) {
+  const width = chartWidth * window.devicePixelRatio;
+  if (data.length <= width) {
    return data;
  }
  const min = minX ?? getPointData(data[0]!)[0];
  const max = maxX ?? getPointData(data[data.length - 1]!)[0];
-  const step = Math.ceil((max - min) / Math.floor(maxDetails));
+  const step = Math.floor((max - min) / width);
  const frames = new Map<
    number,
    {
@@ -48,7 +47,7 @@ export function downSampleLineData<
  }

  // Convert frames back to points
-  const result: T[] = [];
+  const result: typeof data = [];
  for (const [_i, frame] of frames) {
    // Use min/max points to preserve visual accuracy
    // The order of the data must be preserved so max may be before min
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -22,7 +22,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { themesContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
@@ -35,7 +35,6 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
-const RESIZE_ANIMATION_DURATION = 250;

 export type CustomLegendOption = ECOption["legend"] & {
  type: "custom";
@@ -89,19 +88,9 @@ export class HaChartBase extends LitElement {

  private _lastTapTime?: number;

-  private _shouldResizeChart = false;
-
  // @ts-ignore
  private _resizeController = new ResizeController(this, {
-    callback: () => {
-      if (this.chart) {
-        if (!this.chart.getZr().animation.isFinished()) {
-          this._shouldResizeChart = true;
-        } else {
-          this.chart.resize();
-        }
-      }
-    },
+    callback: () => this.chart?.resize(),
  });

  private _loading = false;
@@ -206,15 +195,6 @@ export class HaChartBase extends LitElement {
    }
    if (changedProps.has("options")) {
      chartOptions = { ...chartOptions, ...this._createOptions() };
-      if (
-        this._compareCustomLegendOptions(
-          changedProps.get("options"),
-          this.options
-        )
-      ) {
-        // custom legend changes may require a resize to layout properly
-        this._shouldResizeChart = true;
-      }
    } else if (this._isTouchDevice && changedProps.has("_isZoomed")) {
      chartOptions.dataZoom = this._getDataZoomConfig();
    }
@@ -306,7 +286,7 @@ export class HaChartBase extends LitElement {
          itemStyle = {
            color: dataset?.color as string,
            ...(dataset?.itemStyle as { borderColor?: string }),
-            ...itemStyle,
+            itemStyle,
          };
          const color = itemStyle?.color as string;
          const borderColor = itemStyle?.borderColor as string;
@@ -366,7 +346,7 @@ export class HaChartBase extends LitElement {
      if (this.chart) {
        this.chart.dispose();
      }
-      const echarts = (await import("../../resources/echarts/echarts")).default;
+      const echarts = (await import("../../resources/echarts")).default;

      if (this.extraComponents?.length) {
        echarts.use(this.extraComponents);
@@ -386,7 +366,6 @@ export class HaChartBase extends LitElement {
      if (!this.options?.dataZoom) {
        this.chart.getZr().on("dblclick", this._handleClickZoom);
      }
-      this.chart.on("finished", this._handleChartRenderFinished);
      if (this._isTouchDevice) {
        this.chart.getZr().on("click", (e: ECElementEvent) => {
          if (!e.zrByTouch) {
@@ -518,7 +497,6 @@ export class HaChartBase extends LitElement {
        );
      }
    });
-    this.requestUpdate("_hiddenDatasets");
  }

  private _getDataZoomConfig(): DataZoomComponentOption | undefined {
@@ -652,13 +630,6 @@ export class HaChartBase extends LitElement {
          textBorderWidth: 2,
        },
      },
-      pie: {
-        label: {
-          color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor: style.getPropertyValue("--primary-background-color"),
-          textBorderWidth: 2,
-        },
-      },
      sankey: {
        label: {
          color: style.getPropertyValue("--primary-text-color"),
@@ -834,7 +805,7 @@ export class HaChartBase extends LitElement {
            sampling: undefined,
            data: downSampleLineData(
              data as LineSeriesOption["data"],
-              this.clientWidth * window.devicePixelRatio,
+              this.clientWidth,
              minX,
              maxX
            ),
@@ -974,33 +945,6 @@ export class HaChartBase extends LitElement {
    });
  }

-  private _handleChartRenderFinished = () => {
-    if (this._shouldResizeChart) {
-      this.chart?.resize({
-        animation: this._reducedMotion
-          ? undefined
-          : { duration: RESIZE_ANIMATION_DURATION },
-      });
-      this._shouldResizeChart = false;
-    }
-  };
-
-  private _compareCustomLegendOptions(
-    oldOptions: ECOption | undefined,
-    newOptions: ECOption | undefined
-  ): boolean {
-    const oldLegends = ensureArray(
-      oldOptions?.legend || []
-    ) as LegendComponentOption[];
-    const newLegends = ensureArray(
-      newOptions?.legend || []
-    ) as LegendComponentOption[];
-    return (
-      oldLegends.some((l) => l.show && l.type === "custom") !==
-      newLegends.some((l) => l.show && l.type === "custom")
-    );
-  }
-
  static styles = css`
    :host {
      display: block;
--- a/src/components/chart/ha-network-graph.ts
+++ b/src/components/chart/ha-network-graph.ts
@@ -6,7 +6,7 @@ import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
--- a/src/components/chart/ha-sankey-chart.ts
+++ b/src/components/chart/ha-sankey-chart.ts
@@ -1,13 +1,13 @@
 import { customElement, property, state } from "lit/decorators";
 import { LitElement, html, css } from "lit";
 import type { EChartsType } from "echarts/core";
+import type { CallbackDataParams } from "echarts/types/dist/shared";
 import type { SankeySeriesOption } from "echarts/types/dist/echarts";
-import type { CallbackDataParams } from "echarts/types/src/util/types";
+import { SankeyChart } from "echarts/charts";
 import memoizeOne from "memoize-one";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
 import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
@@ -39,7 +39,7 @@ type ProcessedLink = Link & {

 const OVERFLOW_MARGIN = 5;
 const FONT_SIZE = 12;
-const NODE_GAP = 6;
+const NODE_GAP = 8;
 const LABEL_DISTANCE = 5;

@customElement("ha-sankey-chart")
@@ -164,7 +164,6 @@ export class HaSankeyChart extends LitElement {
      lineStyle: {
        color: "gradient",
        opacity: 0.4,
-        curveness: 0.5,
      },
      layoutIterations: 0,
      label: {
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -11,7 +11,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
  getNumberFormatOptions,
@@ -87,8 +87,6 @@ export class StateHistoryChartLine extends LitElement {

  private _previousYAxisLabelValue = 0;

-  private _yAxisMaximumFractionDigits = 0;
-
  protected render() {
    return html`
      <ha-chart-base
@@ -759,12 +757,8 @@ export class StateHistoryChartLine extends LitElement {
        Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
      )
    );
-    this._yAxisMaximumFractionDigits = Math.max(
-      this._yAxisMaximumFractionDigits,
-      maximumFractionDigits
-    );
    const label = formatNumber(value, this.hass.locale, {
-      maximumFractionDigits: this._yAxisMaximumFractionDigits,
+      maximumFractionDigits,
    });
    const width = measureTextWidth(label, 12) + 5;
    if (width > this._yWidth) {
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -15,8 +15,8 @@ import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { computeTimelineColor } from "./timeline-color";
-import type { ECOption } from "../../resources/echarts/echarts";
-import echarts from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
+import echarts from "../../resources/echarts";
 import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -29,7 +29,7 @@ import {
  getStatisticMetadata,
  statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
--- a/src/components/chips/ha-filter-chip.ts
+++ b/src/components/chips/ha-filter-chip.ts
@@ -1,9 +1,9 @@
-import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
 import { FilterChip } from "@material/web/chips/internal/filter-chip";
 import { styles } from "@material/web/chips/internal/filter-styles";
 import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles";
 import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles";
 import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles";
+import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";

@@ -30,7 +30,6 @@ export class HaFilterChip extends FilterChip {
          var(--rgb-primary-text-color),
          0.15
        );
-        border-radius: var(--ha-border-radius-md);
      }
    `,
  ];
--- a/src/components/data-table/dialog-data-table-settings.ts
+++ b/src/components/data-table/dialog-data-table-settings.ts
@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -129,7 +129,7 @@ export class DialogDataTableSettings extends LitElement {
                  ${canMove && isVisible
                    ? html`<ha-svg-icon
                        class="handle"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                        slot="graphic"
                      ></ha-svg-icon>`
                    : nothing}
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -5,18 +5,24 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceName } from "../../common/entity/compute_device_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
-  getDevices,
-  type DevicePickerItem,
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
  type DeviceRegistryEntry,
 } from "../../data/device_registry";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";

 export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
@@ -24,6 +30,11 @@ export type HaDevicePickerDeviceFilterFunc = (

 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;

+interface DevicePickerItem extends PickerComboBoxItem {
+  domain?: string;
+  domain_name?: string;
+}
+
@customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -93,8 +104,6 @@ export class HaDevicePicker extends LitElement {

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

-  private _getDevicesMemoized = memoizeOne(getDevices);
-
  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
    this._loadConfigEntries();
@@ -108,18 +117,162 @@ export class HaDevicePicker extends LitElement {
  }

  private _getItems = () =>
-    this._getDevicesMemoized(
-      this.hass,
+    this._getDevices(
+      this.hass.devices,
+      this.hass.entities,
      this._configEntryLookup,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
      this.deviceFilter,
      this.entityFilter,
-      this.excludeDevices,
-      this.value
+      this.excludeDevices
    );

+  private _getDevices = memoizeOne(
+    (
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeDevices: this["excludeDevices"]
+    ): DevicePickerItem[] => {
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+      }
+
+      let inputDevices = devices.filter(
+        (device) => device.id === this.value || !device.disabled_by
+      );
+
+      if (includeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return true;
+          }
+          return entities.every(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDevices) {
+        inputDevices = inputDevices.filter(
+          (device) => !excludeDevices!.includes(device.id)
+        );
+      }
+
+      if (includeDeviceClasses) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        });
+      }
+
+      if (entityFilter) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return devEntities.some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter(stateObj);
+          });
+        });
+      }
+
+      if (deviceFilter) {
+        inputDevices = inputDevices.filter(
+          (device) =>
+            // We always want to include the device of the current value
+            device.id === this.value || deviceFilter!(device)
+        );
+      }
+
+      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
+        const deviceName = computeDeviceNameDisplay(
+          device,
+          this.hass,
+          deviceEntityLookup[device.id]
+        );
+
+        const { area } = getDeviceContext(device, this.hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const configEntry = device.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
+
+        const domain = configEntry?.domain;
+        const domainName = domain
+          ? domainToName(this.hass.localize, domain)
+          : undefined;
+
+        return {
+          id: device.id,
+          label: "",
+          primary:
+            deviceName ||
+            this.hass.localize("ui.components.device-picker.unnamed_device"),
+          secondary: areaName,
+          domain: configEntry?.domain,
+          domain_name: domainName,
+          search_labels: [deviceName, areaName, domain, domainName].filter(
+            Boolean
+          ) as string[],
+          sorting_label: deviceName || "zzz",
+        };
+      });
+
+      return outputDevices;
+    }
+  );
+
  private _valueRenderer = memoizeOne(
    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
      const deviceId = value;
--- a/src/components/entity/const.ts
+++ b/src/components/entity/const.ts
@@ -1 +0,0 @@
-export const ANY_STATE_VALUE = "__ANY_STATE_IGNORE_ATTRIBUTES__";
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -1,13 +1,13 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDrag } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 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 { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
+import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";

@customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -118,7 +118,7 @@ class HaEntitiesPicker extends LitElement {
                  ? html`
                      <ha-svg-icon
                        class="entity-handle"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                      ></ha-svg-icon>
                    `
                  : nothing}
@@ -147,7 +147,6 @@ class HaEntitiesPicker extends LitElement {
          .createDomains=${this.createDomains}
          .required=${this.required && !currentEntities.length}
          @value-changed=${this._addEntity}
-          .addButton=${currentEntities.length > 0}
        ></ha-entity-picker>
      </div>
    `;
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,3 +1,4 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,6 +8,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";

+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
 interface AttributeOption {
  value: string;
  label: string;
--- a/src/components/entity/ha-entity-name-picker.ts
+++ b/src/components/entity/ha-entity-name-picker.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
@@ -20,13 +20,11 @@ import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import "../ha-input-helper-text";
 import "../ha-sortable";

 interface EntityNameOption {
  primary: string;
  secondary?: string;
-  field_label: string;
  value: string;
 }

@@ -43,23 +41,6 @@ const KNOWN_TYPES = new Set(["entity", "device", "area", "floor"]);

 const UNIQUE_TYPES = new Set(["entity", "device", "area", "floor"]);

-const formatOptionValue = (item: EntityNameItem) => {
-  if (item.type === "text" && item.text) {
-    return item.text;
-  }
-  return `___${item.type}___`;
-};
-
-const parseOptionValue = (value: string): EntityNameItem => {
-  if (value.startsWith("___") && value.endsWith("___")) {
-    const type = value.slice(3, -3);
-    if (KNOWN_TYPES.has(type)) {
-      return { type: type as EntityNameType };
-    }
-  }
-  return { type: "text", text: value };
-};
-
@customElement("ha-entity-name-picker")
 export class HaEntityNamePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -87,8 +68,8 @@ export class HaEntityNamePicker extends LitElement {

  private _editIndex?: number;

-  private _validTypes = memoizeOne((entityId?: string) => {
-    const options = new Set<string>(["text"]);
+  private _validOptions = memoizeOne((entityId?: string) => {
+    const options = new Set<string>();
    if (!entityId) {
      return options;
    }
@@ -120,43 +101,33 @@ export class HaEntityNamePicker extends LitElement {
      return [];
    }

-    const types = this._validTypes(entityId);
+    const options = this._validOptions(entityId);

    const items = (
      ["entity", "device", "area", "floor"] as const
    ).map<EntityNameOption>((name) => {
      const stateObj = this.hass.states[entityId];
-      const isValid = types.has(name);
+      const isValid = options.has(name);
      const primary = this.hass.localize(
        `ui.components.entity.entity-name-picker.types.${name}`
      );
      const secondary =
-        (stateObj && isValid
+        stateObj && isValid
          ? this.hass.formatEntityName(stateObj, { type: name })
          : this.hass.localize(
              `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
-            )) || "-";
+            ) || "-";

      return {
        primary,
        secondary,
-        field_label: primary,
-        value: formatOptionValue({ type: name }),
+        value: name,
      };
    });

    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 _formatItem = (item: EntityNameItem) => {
    if (item.type === "text") {
      return `"${item.text}"`;
@@ -170,9 +141,9 @@ export class HaEntityNamePicker extends LitElement {
  };

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

    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -186,11 +157,12 @@ export class HaEntityNamePicker extends LitElement {
        >
          <ha-chip-set>
            ${repeat(
-              this._items,
+              this._value,
              (item) => item,
              (item: EntityNameItem, idx) => {
                const label = this._formatItem(item);
-                const isValid = validTypes.has(item.type);
+                const isValid =
+                  item.type === "text" || validOptions.has(item.type);
                return html`
                  <ha-input-chip
                    data-idx=${idx}
@@ -201,10 +173,7 @@ export class HaEntityNamePicker extends LitElement {
                    .disabled=${this.disabled}
                    class=${!isValid ? "invalid" : ""}
                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
+                    <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
                    <span>${label}</span>
                  </ha-input-chip>
                `;
@@ -238,13 +207,14 @@ export class HaEntityNamePicker extends LitElement {
            .hass=${this.hass}
            .value=${""}
            .autofocus=${this.autofocus}
-            .disabled=${this.disabled}
+            .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="field_label"
+            item-label-path="primary"
            .renderer=${rowRenderer}
            @opened-changed=${this._openedChanged}
            @value-changed=${this._comboBoxValueChanged}
@@ -253,20 +223,9 @@ export class HaEntityNamePicker extends LitElement {
          </ha-combo-box>
        </mwc-menu-surface>
      </div>
-      ${this._renderHelper()}
    `;
  }

-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
  private _onClosed(ev) {
    ev.stopPropagation();
    this._opened = false;
@@ -295,16 +254,13 @@ export class HaEntityNamePicker extends LitElement {
    this._opened = true;
  }

-  private get _items(): EntityNameItem[] {
+  private get _value(): EntityNameItem[] {
    return this._toItems(this.value);
  }

  private _toItems = memoizeOne((value?: typeof this.value) => {
    if (typeof value === "string") {
-      if (value === "") {
-        return [];
-      }
-      return [{ type: "text", text: value } satisfies EntityNameItem];
+      return [{ type: "text", text: value } as const];
    }
    return value ? ensureArray(value) : [];
  });
@@ -312,7 +268,7 @@ export class HaEntityNamePicker extends LitElement {
  private _toValue = memoizeOne(
    (items: EntityNameItem[]): typeof this.value => {
      if (items.length === 0) {
-        return undefined;
+        return [];
      }
      if (items.length === 1) {
        const item = items[0];
@@ -328,21 +284,20 @@ export class HaEntityNamePicker extends LitElement {
      const options = this._comboBox.items || [];

      const initialItem =
-        this._editIndex != null ? this._items[this._editIndex] : undefined;
+        this._editIndex != null ? this._value[this._editIndex] : undefined;

-      const initialValue = initialItem ? formatOptionValue(initialItem) : "";
+      const initialValue = initialItem
+        ? initialItem.type === "text"
+          ? initialItem.text
+          : initialItem.type
+        : "";

      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("");
    }
  }

@@ -350,16 +305,15 @@ export class HaEntityNamePicker extends LitElement {
    options: EntityNameOption[],
    current?: string
  ) => {
-    const items = this._items;
+    const value = this._value;

-    const excludedValues = new Set(
-      items
-        .filter((item) => UNIQUE_TYPES.has(item.type))
-        .map((item) => formatOptionValue(item))
-    );
+    const types = value.map((item) => item.type) as string[];

    const filteredOptions = options.filter(
-      (option) => !excludedValues.has(option.value) || option.value === current
+      (option) =>
+        !UNIQUE_TYPES.has(option.value) ||
+        !types.includes(option.value) ||
+        option.value === current
    );
    return filteredOptions;
  };
@@ -370,14 +324,20 @@ export class HaEntityNamePicker extends LitElement {
    const options = this._comboBox.items || [];

    const currentItem =
-      this._editIndex != null ? this._items[this._editIndex] : undefined;
+      this._editIndex != null ? this._value[this._editIndex] : undefined;

-    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
+    const currentValue = currentItem
+      ? currentItem.type === "text"
+        ? currentItem.text
+        : currentItem.type
+      : "";

-    let filteredItems = this._filterSelectedOptions(options, currentValue);
+    this._comboBox.filteredItems = this._filterSelectedOptions(
+      options,
+      currentValue
+    );

    if (!filter) {
-      this._comboBox.filteredItems = filteredItems;
      return;
    }

@@ -389,16 +349,16 @@ export class HaEntityNamePicker extends LitElement {
      ignoreDiacritics: true,
    };

-    const fuse = new Fuse(filteredItems, fuseOptions);
-    filteredItems = fuse.search(filter).map((result) => result.item);
-    filteredItems.push(this._customNameOption(input));
+    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
+    const filteredItems = fuse.search(filter).map((result) => result.item);
+
    this._comboBox.filteredItems = filteredItems;
  }

  private async _moveItem(ev: CustomEvent) {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;
-    const value = this._items;
+    const value = this._value;
    const newValue = value.concat();
    const element = newValue.splice(oldIndex, 1)[0];
    newValue.splice(newIndex, 0, element);
@@ -409,7 +369,7 @@ export class HaEntityNamePicker extends LitElement {

  private async _removeItem(ev) {
    ev.stopPropagation();
-    const value = [...this._items];
+    const value = [...this._value];
    const idx = parseInt(ev.target.dataset.idx, 10);
    value.splice(idx, 1);
    this._setValue(value);
@@ -425,9 +385,11 @@ export class HaEntityNamePicker extends LitElement {
      return;
    }

-    const item: EntityNameItem = parseOptionValue(value);
+    const item: EntityNameItem = KNOWN_TYPES.has(value as any)
+      ? { type: value as EntityNameType }
+      : { type: "text", text: value };

-    const newValue = [...this._items];
+    const newValue = [...this._value];

    if (this._editIndex != null) {
      newValue[this._editIndex] = item;
@@ -521,11 +483,6 @@ export class HaEntityNamePicker extends LitElement {
    .sortable-drag {
      cursor: grabbing;
    }
-
-    ha-input-helper-text {
-      display: block;
-      margin: var(--ha-space-2) 0 0;
-    }
  `;
 }

--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,17 +1,15 @@
 import { mdiPlus, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
+import { computeStateName } from "../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import {
-  getEntities,
-  type EntityComboBoxItem,
-} from "../../data/entity_registry";
 import { domainToName } from "../../data/integration";
 import {
  isHelperDomain,
@@ -22,11 +20,21 @@ import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
+import type {
+  PickerComboBoxItem,
+  PickerComboBoxSearchFn,
+} from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";

+interface EntityComboBoxItem extends PickerComboBoxItem {
+  domain_name?: string;
+  stateObj?: HassEntity;
+}
+
+export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+
 const CREATE_ID = "___create-new-entity___";

@customElement("ha-entity-picker")
@@ -113,9 +121,6 @@ export class HaEntityPicker extends LitElement {
  @property({ attribute: "hide-clear-icon", type: Boolean })
  public hideClearIcon = false;

-  @property({ attribute: "add-button", type: Boolean })
-  public addButton = false;
-
  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  protected firstUpdated(changedProperties: PropertyValues): void {
@@ -250,10 +255,8 @@ export class HaEntityPicker extends LitElement {
    }
  );

-  private _getEntitiesMemoized = memoizeOne(getEntities);
-
  private _getItems = () =>
-    this._getEntitiesMemoized(
+    this._getEntities(
      this.hass,
      this.includeDomains,
      this.excludeDomains,
@@ -261,10 +264,128 @@ export class HaEntityPicker extends LitElement {
      this.includeDeviceClasses,
      this.includeUnitOfMeasurement,
      this.includeEntities,
-      this.excludeEntities,
-      this.value
+      this.excludeEntities
    );

+  private _getEntities = memoizeOne(
+    (
+      hass: this["hass"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      entityFilter: this["entityFilter"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
+      includeEntities: this["includeEntities"],
+      excludeEntities: this["excludeEntities"]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];
+
+      let entityIds = Object.keys(hass.states);
+
+      if (includeEntities) {
+        entityIds = entityIds.filter((entityId) =>
+          includeEntities.includes(entityId)
+        );
+      }
+
+      if (excludeEntities) {
+        entityIds = entityIds.filter(
+          (entityId) => !excludeEntities.includes(entityId)
+        );
+      }
+
+      if (includeDomains) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      if (excludeDomains) {
+        entityIds = entityIds.filter(
+          (eid) => !excludeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      const isRTL = computeRTL(hass);
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass.states[entityId];
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+
+        const [entityName, deviceName, areaName] = computeEntityNameList(
+          stateObj,
+          [{ type: "entity" }, { type: "device" }, { type: "area" }],
+          hass.entities,
+          hass.devices,
+          hass.areas,
+          hass.floors
+        );
+
+        const domainName = domainToName(hass.localize, computeDomain(entityId));
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClasses) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  );
+
  protected render() {
    const placeholder =
      this.placeholder ??
@@ -284,7 +405,7 @@ export class HaEntityPicker extends LitElement {
        .searchLabel=${this.searchLabel}
        .notFoundLabel=${notFoundLabel}
        .placeholder=${placeholder}
-        .value=${this.addButton ? undefined : this.value}
+        .value=${this.value}
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
@@ -292,9 +413,6 @@ export class HaEntityPicker extends LitElement {
        .searchFn=${this._searchFn}
        .valueRenderer=${this._valueRenderer}
        @value-changed=${this._valueChanged}
-        .addButtonLabel=${this.addButton
-          ? this.hass.localize("ui.components.entity.entity-picker.add")
-          : undefined}
      >
      </ha-generic-picker>
    `;
--- a/src/components/entity/ha-entity-state-content-picker.ts
+++ b/src/components/entity/ha-entity-state-content-picker.ts
@@ -1,39 +1,23 @@
-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 { mdiDrag } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import type { PropertyValues } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { 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 {
  STATE_DISPLAY_SPECIAL_CONTENT,
  STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS,
 } from "../../state-display/state-display";
 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-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>
-`;
+import "../chips/ha-input-chip";
+import "../chips/ha-chip-set";
+import type { HaComboBox } from "../ha-combo-box";

 const HIDDEN_ATTRIBUTES = [
  "access_token",
@@ -90,7 +74,7 @@ const HIDDEN_ATTRIBUTES = [
 ];

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

  @property({ attribute: false }) public entityId?: string;
@@ -111,28 +95,26 @@ export class HaStateContentPicker extends LitElement {

  @property() public helper?: string;

-  @query(".container", true) private _container?: HTMLDivElement;
+  @state() private _opened = false;

  @query("ha-combo-box", true) private _comboBox!: HaComboBox;

-  @state() private _opened = false;
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }

-  private _editIndex?: number;
-
-  private _options = memoizeOne(
+  private options = memoizeOne(
    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
      const domain = entityId ? computeDomain(entityId) : undefined;
      return [
        {
-          primary: this.hass.localize(
-            "ui.components.state-content-picker.state"
-          ),
+          label: this.hass.localize("ui.components.state-content-picker.state"),
          value: "state",
        },
        ...(allowName
          ? [
              {
-                primary: this.hass.localize(
+                label: this.hass.localize(
                  "ui.components.state-content-picker.name"
                ),
                value: "name",
@@ -140,13 +122,13 @@ export class HaStateContentPicker extends LitElement {
            ]
          : []),
        {
-          primary: this.hass.localize(
+          label: this.hass.localize(
            "ui.components.state-content-picker.last_changed"
          ),
          value: "last_changed",
        },
        {
-          primary: this.hass.localize(
+          label: this.hass.localize(
            "ui.components.state-content-picker.last_updated"
          ),
          value: "last_updated",
@@ -155,7 +137,7 @@ export class HaStateContentPicker extends LitElement {
          ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
              STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
            ).map((content) => ({
-              primary: this.hass.localize(
+              label: this.hass.localize(
                `ui.components.state-content-picker.${content}`
              ),
              value: content,
@@ -164,201 +146,105 @@ export class HaStateContentPicker extends LitElement {
        ...Object.keys(stateObj?.attributes ?? {})
          .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
          .map((attribute) => ({
-            primary: this.hass.formatEntityAttributeName(stateObj!, attribute),
            value: attribute,
+            label: this.hass.formatEntityAttributeName(stateObj!, attribute),
          })),
-      ] satisfies StateContentOption[];
+      ];
    }
  );

+  private _filter = "";
+
  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
    const value = this._value;

    const stateObj = this.entityId
      ? this.hass.states[this.entityId]
      : undefined;

-    const options = this._options(this.entityId, stateObj, this.allowName);
+    const options = this.options(this.entityId, stateObj, this.allowName);
+    const optionItems = options.filter(
+      (option) => !this._value.includes(option.value)
+    );

    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>
+      ${value?.length
+        ? html`
+            <ha-sortable
+              no-style
+              @item-moved=${this._moveItem}
+              .disabled=${this.disabled}
+              handle-selector="button.primary.action"
+            >
+              <ha-chip-set>
+                ${repeat(
+                  this._value,
+                  (item) => item,
+                  (item, idx) => {
+                    const label =
+                      options.find((option) => option.value === item)?.label ||
+                      item;
+                    return html`
+                      <ha-input-chip
+                        .idx=${idx}
+                        @remove=${this._removeItem}
+                        .label=${label}
+                        selected
+                      >
+                        <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                        ${label}
+                      </ha-input-chip>
+                    `;
+                  }
+                )}
+              </ha-chip-set>
+            </ha-sortable>
+          `
+        : nothing}

-        <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-combo-box>
-        </mwc-menu-surface>
-      </div>
+      <ha-combo-box
+        item-value-path="value"
+        item-label-path="label"
+        .hass=${this.hass}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${""}
+        .items=${optionItems}
+        allow-custom-value
+        @filter-changed=${this._filterChanged}
+        @value-changed=${this._comboBoxValueChanged}
+        @opened-changed=${this._openedChanged}
+      ></ha-combo-box>
    `;
  }

-  private _onClosed(ev) {
-    ev.stopPropagation();
-    this._opened = false;
-    this._editIndex = undefined;
-  }
-
-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
-    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);
-    this._editIndex = idx;
-    this._opened = true;
-  }
-
  private get _value() {
    return !this.value ? [] : ensureArray(this.value);
  }

-  private _toValue = memoizeOne((value: string[]): typeof this.value => {
-    if (value.length === 0) {
-      return undefined;
-    }
-    if (value.length === 1) {
-      return value[0];
-    }
-    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;
-    }
+    this._opened = ev.detail.value;
+    this._comboBox.filteredItems = this._comboBox.items;
  }

-  private _filterSelectedOptions = (
-    options: StateContentOption[],
-    current?: string
-  ) => {
-    const value = this._value;
+  private _filterChanged(ev?: CustomEvent): void {
+    this._filter = ev?.detail.value || "";

-    return options.filter(
-      (option) => !value.includes(option.value) || option.value === current
-    );
-  };
+    const filteredItems = this._comboBox.items?.filter((item) => {
+      const label = item.label || item.value;
+      return label.toLowerCase().includes(this._filter?.toLowerCase());
+    });

-  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
-    );
-
-    if (!filter) {
-      return;
+    if (this._filter) {
+      filteredItems?.unshift({ label: this._filter, value: this._filter });
    }

-    const fuseOptions: IFuseOptions<StateContentOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
-
-    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
-    const filteredItems = fuse.search(filter).map((result) => result.item);
-
    this._comboBox.filteredItems = filteredItems;
  }

@@ -371,40 +257,43 @@ export class HaStateContentPicker extends LitElement {
    newValue.splice(newIndex, 0, element);
    this._setValue(newValue);
    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
+    this._filterChanged();
  }

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

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

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

-    const newValue = [...this._value];
+    const currentValue = this._value;

-    if (this._editIndex != null) {
-      newValue[this._editIndex] = value;
-    } else {
-      newValue.push(value);
+    if (currentValue.includes(newValue)) {
+      return;
    }

-    this._setValue(newValue);
+    setTimeout(() => {
+      this._filterChanged();
+      this._comboBox.setInputValue("");
+    }, 0);
+
+    this._setValue([...currentValue, newValue]);
  }

  private _setValue(value: string[]) {
-    const newValue = this._toValue(value);
+    const newValue =
+      value.length === 0 ? undefined : value.length === 1 ? value[0] : value;
    this.value = newValue;
    fireEvent(this, "value-changed", {
      value: newValue,
@@ -414,64 +303,10 @@ export class HaStateContentPicker extends LitElement {
  static styles = css`
    :host {
      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-    .container:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-      transform:
-        height 180ms ease-in-out,
-        background-color 180ms ease-in-out;
-    }
-    .container.disabled:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-    .container:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    label {
-      display: block;
-      margin: 0 0 var(--ha-space-2);
-    }
-
-    .add {
-      order: 1;
-    }
-
-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
    }

    ha-chip-set {
-      padding: var(--ha-space-2) var(--ha-space-2);
-    }
-
-    .invalid {
-      text-decoration: line-through;
+      padding: 8px 0;
    }

    .sortable-fallback {
@@ -491,6 +326,6 @@ export class HaStateContentPicker extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-entity-state-content-picker": HaStateContentPicker;
+    "ha-entity-state-content-picker": HaEntityStatePicker;
  }
 }
--- a/src/components/entity/ha-entity-state-picker.ts
+++ b/src/components/entity/ha-entity-state-picker.ts
@@ -1,3 +1,4 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -8,6 +9,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";

+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
 interface StateOption {
  value: string;
  label: string;
--- a/src/components/entity/ha-entity-states-picker.ts
+++ b/src/components/entity/ha-entity-states-picker.ts
@@ -4,7 +4,6 @@ import { customElement, property } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../common/dom/fire_event";
-import { ANY_STATE_VALUE } from "./const";
 import { ensureArray } from "../../common/array/ensure-array";
 import type { HomeAssistant } from "../../types";
 import "./ha-entity-state-picker";
@@ -58,7 +57,6 @@ export class HaEntityStatesPicker extends LitElement {

    const value = this.value || [];
    const hide = [...(this.hideStates || []), ...value];
-    const hideValue = value.includes(ANY_STATE_VALUE);

    return html`
      ${repeat(
@@ -86,7 +84,7 @@ export class HaEntityStatesPicker extends LitElement {
        `
      )}
      <div>
-        ${(this.disabled && value.length) || hideValue
+        ${this.disabled && value.length
          ? nothing
          : keyed(
              value.length,
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@@ -46,7 +46,7 @@ export class HaAnalytics extends LitElement {
        </span>
        <ha-switch
          @change=${this._handleRowClick}
-          .checked=${!!baseEnabled}
+          .checked=${baseEnabled}
          .preference=${"base"}
          .disabled=${loading}
          name="base"
@@ -70,7 +70,7 @@ export class HaAnalytics extends LitElement {
              <ha-switch
                .id="switch-${preference}"
                @change=${this._handleRowClick}
-                .checked=${!!this.analytics?.preferences[preference]}
+                .checked=${this.analytics?.preferences[preference]}
                .preference=${preference}
                name=${preference}
              >
@@ -102,7 +102,7 @@ export class HaAnalytics extends LitElement {
        </span>
        <ha-switch
          @change=${this._handleRowClick}
-          .checked=${!!this.analytics?.preferences.diagnostics}
+          .checked=${this.analytics?.preferences.diagnostics}
          .preference=${"diagnostics"}
          .disabled=${loading}
          name="diagnostics"
--- a/src/components/ha-area-floor-picker.ts
+++ b/src/components/ha-area-floor-picker.ts
@@ -8,13 +8,21 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeAreaName } from "../common/entity/compute_area_name";
+import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
+import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
+import type { AreaRegistryEntry } from "../data/area_registry";
+import type {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+} from "../data/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import {
-  getAreasAndFloors,
-  type AreaFloorValue,
-  type FloorComboBoxItem,
-} from "../data/area_floor";
+  getFloorAreaLookup,
+  type FloorRegistryEntry,
+} from "../data/floor_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
@@ -22,12 +30,24 @@ import "./ha-floor-icon";
 import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import "./ha-icon-button";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";

 const SEPARATOR = "________";

+interface FloorComboBoxItem extends PickerComboBoxItem {
+  type: "floor" | "area";
+  floor?: FloorRegistryEntry;
+  area?: AreaRegistryEntry;
+}
+
+interface AreaFloorValue {
+  id: string;
+  type: "floor" | "area";
+}
+
@customElement("ha-area-floor-picker")
 export class HaAreaFloorPicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -134,6 +154,243 @@ export class HaAreaFloorPicker extends LitElement {
    `;
  };

+  private _getAreasAndFloors = memoizeOne(
+    (
+      haFloors: HomeAssistant["floors"],
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeAreas: this["excludeAreas"],
+      excludeFloors: this["excludeFloors"]
+    ): FloorComboBoxItem[] => {
+      const floors = Object.values(haFloors);
+      const areas = Object.values(haAreas);
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputAreas = areas;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        outputAreas = outputAreas.filter((area) =>
+          areaIds!.includes(area.area_id)
+        );
+      }
+
+      if (excludeAreas) {
+        outputAreas = outputAreas.filter(
+          (area) => !excludeAreas!.includes(area.area_id)
+        );
+      }
+
+      if (excludeFloors) {
+        outputAreas = outputAreas.filter(
+          (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
+        );
+      }
+
+      const floorAreaLookup = getFloorAreaLookup(outputAreas);
+      const unassisgnedAreas = Object.values(outputAreas).filter(
+        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
+      );
+
+      // @ts-ignore
+      const floorAreaEntries: [
+        FloorRegistryEntry | undefined,
+        AreaRegistryEntry[],
+      ][] = Object.entries(floorAreaLookup)
+        .map(([floorId, floorAreas]) => {
+          const floor = floors.find((fl) => fl.floor_id === floorId)!;
+          return [floor, floorAreas] as const;
+        })
+        .sort(([floorA], [floorB]) => {
+          if (floorA.level !== floorB.level) {
+            return (floorA.level ?? 0) - (floorB.level ?? 0);
+          }
+          return stringCompare(floorA.name, floorB.name);
+        });
+
+      const items: FloorComboBoxItem[] = [];
+
+      floorAreaEntries.forEach(([floor, floorAreas]) => {
+        if (floor) {
+          const floorName = computeFloorName(floor);
+
+          const areaSearchLabels = floorAreas
+            .map((area) => {
+              const areaName = computeAreaName(area) || area.area_id;
+              return [area.area_id, areaName, ...area.aliases];
+            })
+            .flat();
+
+          items.push({
+            id: this._formatValue({ id: floor.floor_id, type: "floor" }),
+            type: "floor",
+            primary: floorName,
+            floor: floor,
+            search_labels: [
+              floor.floor_id,
+              floorName,
+              ...floor.aliases,
+              ...areaSearchLabels,
+            ],
+          });
+        }
+        items.push(
+          ...floorAreas.map((area) => {
+            const areaName = computeAreaName(area) || area.area_id;
+            return {
+              id: this._formatValue({ id: area.area_id, type: "area" }),
+              type: "area" as const,
+              primary: areaName,
+              area: area,
+              icon: area.icon || undefined,
+              search_labels: [area.area_id, areaName, ...area.aliases],
+            };
+          })
+        );
+      });
+
+      items.push(
+        ...unassisgnedAreas.map((area) => {
+          const areaName = computeAreaName(area) || area.area_id;
+          return {
+            id: this._formatValue({ id: area.area_id, type: "area" }),
+            type: "area" as const,
+            primary: areaName,
+            icon: area.icon || undefined,
+            search_labels: [area.area_id, areaName, ...area.aliases],
+          };
+        })
+      );
+
+      return items;
+    }
+  );
+
  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (
    item,
    { index },
@@ -188,16 +445,12 @@ export class HaAreaFloorPicker extends LitElement {
    `;
  };

-  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
-
  private _getItems = () =>
-    this._getAreasAndFloorsMemoized(
-      this.hass.states,
+    this._getAreasAndFloors(
      this.hass.floors,
      this.hass.areas,
      this.hass.devices,
      this.hass.entities,
-      this._formatValue,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -107,7 +107,7 @@ export class HaAreaPicker extends LitElement {
          `;
        }

-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, this.hass);

        const areaName = area ? computeAreaName(area) : undefined;
        const floorName = floor ? computeFloorName(floor) : undefined;
@@ -279,7 +279,7 @@ export class HaAreaPicker extends LitElement {
      }

      const items = outputAreas.map<PickerComboBoxItem>((area) => {
-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, this.hass);
        const floorName = floor ? computeFloorName(floor) : undefined;
        const areaName = computeAreaName(area);
        return {
--- a/src/components/ha-areas-display-editor.ts
+++ b/src/components/ha-areas-display-editor.ts
@@ -44,7 +44,7 @@ export class HaAreasDisplayEditor extends LitElement {
    );

    const items: DisplayItem[] = areas.map((area) => {
-      const { floor } = getAreaContext(area, this.hass.floors);
+      const { floor } = getAreaContext(area, this.hass!);
      return {
        value: area.area_id,
        label: area.name,
--- a/src/components/ha-areas-floors-display-editor.ts
+++ b/src/components/ha-areas-floors-display-editor.ts
@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
+import { mdiDrag, mdiTextureBox } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -105,7 +105,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                      <ha-svg-icon
                        class="handle"
                        slot="icons"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                      ></ha-svg-icon>
                    `}
                <ha-items-display-editor
@@ -138,7 +138,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
      );
      const groupedItems: Record<string, DisplayItem[]> = areas.reduce(
        (acc, area) => {
-          const { floor } = getAreaContext(area, this.hass.floors);
+          const { floor } = getAreaContext(area, this.hass!);
          const floorId = floor?.floor_id ?? UNASSIGNED_FLOOR;

          if (!acc[floorId]) {
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -118,7 +118,7 @@ export class HaAutomationRow extends LitElement {
    }
    .row {
      display: flex;
-      padding: var(--ha-space-0) var(--ha-space-2);
+      padding: 0 8px;
      min-height: 48px;
      align-items: center;
      cursor: pointer;
@@ -134,12 +134,12 @@ export class HaAutomationRow extends LitElement {
    .expand-button {
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--ha-color-on-neutral-quiet);
-      margin-left: calc(var(--ha-space-2) * -1);
+      margin-left: -8px;
    }
    :host([building-block]) .leading-icon-wrapper {
      background-color: var(--ha-color-fill-neutral-loud-resting);
      border-radius: var(--ha-border-radius-md);
-      padding: var(--ha-space-1);
+      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -149,7 +149,7 @@ export class HaAutomationRow extends LitElement {
      color: var(--ha-color-on-neutral-quiet);
    }
    :host([building-block]) ::slotted([slot="leading-icon"]) {
-      --mdc-icon-size: var(--ha-space-5);
+      --mdc-icon-size: 20px;
      color: var(--white-color);
      transform: rotate(-45deg);
    }
@@ -170,7 +170,7 @@ export class HaAutomationRow extends LitElement {
    ::slotted([slot="header"]) {
      flex: 1;
      overflow-wrap: anywhere;
-      margin: var(--ha-space-0) var(--ha-space-3);
+      margin: 0 12px;
    }
    :host([sort-selected]) .row {
      outline: solid;
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -1,8 +1,6 @@
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import { css, html, LitElement, type PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { SwipeGestureRecognizer } from "../common/util/swipe-gesture-recognizer";
-import { haStyleScrollbar } from "../resources/styles";
+import "@home-assistant/webawesome/dist/components/drawer/drawer";
+import { customElement, property, state } from "lit/decorators";

 export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;

@@ -10,17 +8,8 @@ export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 export class HaBottomSheet extends LitElement {
  @property({ type: Boolean }) public open = false;

-  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
-  public flexContent = false;
-
  @state() private _drawerOpen = false;

-  @query("#drawer") private _drawer!: HTMLElement;
-
-  private _gestureRecognizer = new SwipeGestureRecognizer();
-
-  private _isDragging = false;
-
  private _handleAfterHide() {
    this.open = false;
    const ev = new Event("closed", {
@@ -40,186 +29,42 @@ export class HaBottomSheet extends LitElement {
  render() {
    return html`
      <wa-drawer
-        id="drawer"
        placement="bottom"
        .open=${this._drawerOpen}
        @wa-after-hide=${this._handleAfterHide}
        without-header
-        @touchstart=${this._handleTouchStart}
      >
-        <slot name="header"></slot>
-        <div id="body" class="body ha-scrollbar">
-          <slot></slot>
-        </div>
+        <slot></slot>
      </wa-drawer>
    `;
  }

-  private _handleTouchStart = (ev: TouchEvent) => {
-    // Check if any element inside drawer in the composed path has scrollTop > 0
-    for (const path of ev.composedPath()) {
-      const el = path as HTMLElement;
-      if (el === this._drawer) {
-        break;
-      }
-      if (el.scrollTop > 0) {
-        return;
-      }
+  static styles = css`
+    wa-drawer {
+      --wa-color-surface-raised: var(
+        --ha-bottom-sheet-surface-background,
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+      );
+      --spacing: 0;
+      --size: auto;
+      --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
+      --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
    }
-
-    this._startResizing(ev.touches[0].clientY);
-  };
-
-  private _startResizing(clientY: number) {
-    // register event listeners for drag handling
-    document.addEventListener("touchmove", this._handleTouchMove, {
-      passive: false,
-    });
-    document.addEventListener("touchend", this._handleTouchEnd);
-    document.addEventListener("touchcancel", this._handleTouchEnd);
-
-    this._gestureRecognizer.start(clientY);
-  }
-
-  private _handleTouchMove = (ev: TouchEvent) => {
-    const currentY = ev.touches[0].clientY;
-    const delta = this._gestureRecognizer.move(currentY);
-
-    if (delta < 0) {
-      ev.preventDefault();
-      this._isDragging = true;
-      requestAnimationFrame(() => {
-        if (this._isDragging) {
-          this.style.setProperty(
-            "--dialog-transform",
-            `translateY(${delta * -1}px)`
-          );
-        }
-      });
+    wa-drawer::part(dialog) {
+      border-top-left-radius: var(
+        --ha-bottom-sheet-border-radius,
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
+      );
+      border-top-right-radius: var(
+        --ha-bottom-sheet-border-radius,
+        var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
+      );
+      max-height: 90vh;
+      padding-bottom: var(--safe-area-inset-bottom);
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
    }
-  };
-
-  private _animateSnapBack() {
-    // Add transition for smooth animation
-    this.style.setProperty(
-      "--dialog-transition",
-      `transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease-out`
-    );
-
-    // Reset transform to snap back
-    this.style.removeProperty("--dialog-transform");
-
-    // Remove transition after animation completes
-    setTimeout(() => {
-      this.style.removeProperty("--dialog-transition");
-    }, BOTTOM_SHEET_ANIMATION_DURATION_MS);
-  }
-
-  private _handleTouchEnd = () => {
-    this._unregisterResizeHandlers();
-
-    this._isDragging = false;
-
-    const result = this._gestureRecognizer.end();
-
-    // If velocity exceeds threshold, use velocity direction to determine action
-    if (result.isSwipe) {
-      if (result.isDownwardSwipe) {
-        // Downward swipe - close the bottom sheet
-        this._drawerOpen = false;
-      } else {
-        // Upward swipe - keep open and animate back
-        this._animateSnapBack();
-      }
-      return;
-    }
-
-    // If velocity is below threshold, use position-based logic
-    // Get the drawer height to calculate 50% threshold
-    const drawerBody = this._drawer.shadowRoot?.querySelector(
-      '[part="body"]'
-    ) as HTMLElement;
-    const drawerHeight = drawerBody?.offsetHeight || 0;
-
-    // delta is negative when dragging down
-    // Close if dragged down past 50% of the drawer height
-    if (
-      drawerHeight > 0 &&
-      result.delta < 0 &&
-      Math.abs(result.delta) > drawerHeight * 0.5
-    ) {
-      this._drawerOpen = false;
-    } else {
-      this._animateSnapBack();
-    }
-  };
-
-  private _unregisterResizeHandlers = () => {
-    document.removeEventListener("touchmove", this._handleTouchMove);
-    document.removeEventListener("touchend", this._handleTouchEnd);
-    document.removeEventListener("touchcancel", this._handleTouchEnd);
-  };
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unregisterResizeHandlers();
-    this._isDragging = false;
-  }
-
-  static styles = [
-    haStyleScrollbar,
-    css`
-      wa-drawer {
-        --wa-color-surface-raised: transparent;
-        --spacing: 0;
-        --size: var(--ha-bottom-sheet-height, auto);
-        --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-        --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-      }
-      wa-drawer::part(dialog) {
-        max-height: var(--ha-bottom-sheet-max-height, 90vh);
-        align-items: center;
-        transform: var(--dialog-transform);
-        transition: var(--dialog-transition);
-      }
-      wa-drawer::part(body) {
-        max-width: var(--ha-bottom-sheet-max-width);
-        width: 100%;
-        border-top-left-radius: var(
-          --ha-bottom-sheet-border-radius,
-          var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
-        );
-        border-top-right-radius: var(
-          --ha-bottom-sheet-border-radius,
-          var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
-        );
-        background-color: var(
-          --ha-bottom-sheet-surface-background,
-          var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
-        );
-        padding: var(
-          --ha-bottom-sheet-padding,
-          0 var(--safe-area-inset-right) var(--safe-area-inset-bottom)
-            var(--safe-area-inset-left)
-        );
-      }
-      :host([flexcontent]) wa-drawer::part(body) {
-        display: flex;
-        flex-direction: column;
-      }
-      :host([flexcontent]) .body {
-        flex: 1;
-        max-width: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: var(
-          --ha-bottom-sheet-padding,
-          0 var(--safe-area-inset-right) var(--safe-area-inset-bottom)
-            var(--safe-area-inset-left)
-        );
-      }
-    `,
-  ];
+  `;
 }

 declare global {
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -31,9 +31,6 @@ export class HaButtonToggleGroup extends LitElement {
  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
  public nowrap = false;

-  @property({ type: Boolean, reflect: true, attribute: "full-width" })
-  public fullWidth = false;
-
  @property() public variant:
    | "brand"
    | "neutral"
@@ -41,13 +38,6 @@ export class HaButtonToggleGroup extends LitElement {
    | "warning"
    | "danger" = "brand";

-  @property({ attribute: "active-variant" }) public activeVariant?:
-    | "brand"
-    | "neutral"
-    | "success"
-    | "warning"
-    | "danger";
-
  protected render(): TemplateResult {
    return html`
      <wa-button-group childSelector="ha-button">
@@ -56,9 +46,7 @@ export class HaButtonToggleGroup extends LitElement {
            html`<ha-button
              iconTag="ha-svg-icon"
              class="icon"
-              .variant=${this.active !== button.value || !this.activeVariant
-                ? this.variant
-                : this.activeVariant}
+              .variant=${this.variant}
              .size=${this.size}
              .value=${button.value}
              @click=${this._handleClick}
@@ -90,19 +78,6 @@ export class HaButtonToggleGroup extends LitElement {
    :host([no-wrap]) wa-button-group::part(base) {
      flex-wrap: nowrap;
    }
-
-    wa-button-group {
-      padding: var(--ha-button-toggle-group-padding);
-    }
-
-    :host([full-width]) wa-button-group,
-    :host([full-width]) wa-button-group::part(base) {
-      width: 100%;
-    }
-
-    :host([full-width]) ha-button {
-      flex: 1;
-    }
  `;
 }

--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -59,7 +59,6 @@ export class HaButton extends Button {
          line-height: 1;

          transition: background-color 0.15s ease-in-out;
-          text-wrap: wrap;
        }

        :host([size="small"]) .button {
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -86,8 +86,7 @@ export class HaCameraStream extends LitElement {
    const streams = this._streams(
      this._capabilities?.frontend_stream_types,
      this._hlsStreams,
-      this._webRtcStreams,
-      this.muted
+      this._webRtcStreams
    );
    return html`${repeat(
      streams,
@@ -191,8 +190,7 @@ export class HaCameraStream extends LitElement {
    (
      supportedTypes?: StreamType[],
      hlsStreams?: { hasAudio: boolean; hasVideo: boolean },
-      webRtcStreams?: { hasAudio: boolean; hasVideo: boolean },
-      muted?: boolean
+      webRtcStreams?: { hasAudio: boolean; hasVideo: boolean }
    ): Stream[] => {
      if (__DEMO__) {
        return [{ type: MJPEG_STREAM, visible: true }];
@@ -222,10 +220,9 @@ export class HaCameraStream extends LitElement {
        if (
          hlsStreams.hasVideo &&
          hlsStreams.hasAudio &&
-          !webRtcStreams.hasAudio &&
-          !muted
+          !webRtcStreams.hasAudio
        ) {
-          // webRTC stream is missing audio and audio is not muted, use HLS
+          // webRTC stream is missing audio, use HLS
          return [{ type: STREAM_TYPE_HLS, visible: true }];
        }
        if (webRtcStreams.hasVideo) {
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -44,26 +44,26 @@ export class HaCard extends LitElement {
      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
      line-height: var(--ha-line-height-expanded);
-      padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
+      padding: 12px 16px 16px;
      display: block;
-      margin-block-start: var(--ha-space-0);
-      margin-block-end: var(--ha-space-0);
+      margin-block-start: 0px;
+      margin-block-end: 0px;
      font-weight: var(--ha-font-weight-normal);
    }

    :host ::slotted(.card-content:not(:first-child)),
    slot:not(:first-child)::slotted(.card-content) {
-      padding-top: var(--ha-space-0);
-      margin-top: calc(var(--ha-space-2) * -1);
+      padding-top: 0px;
+      margin-top: -8px;
    }

    :host ::slotted(.card-content) {
-      padding: var(--ha-space-4);
+      padding: 16px;
    }

    :host ::slotted(.card-actions) {
      border-top: 1px solid var(--divider-color, #e8e8e8);
-      padding: var(--ha-space-2);
+      padding: 8px;
    }
  `;

--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -239,7 +239,6 @@ export class HaCodeEditor extends ReactiveElement {
      this._loadedCodeMirror.crosshairCursor(),
      this._loadedCodeMirror.highlightSelectionMatches(),
      this._loadedCodeMirror.highlightActiveLine(),
-      this._loadedCodeMirror.dropCursor(),
      this._loadedCodeMirror.indentationMarkers({
        thickness: 0,
        activeThickness: 1,
--- a/src/components/ha-dialog-header.ts
+++ b/src/components/ha-dialog-header.ts
@@ -6,9 +6,6 @@ export class HaDialogHeader extends LitElement {
  @property({ type: String, attribute: "subtitle-position" })
  public subtitlePosition: "above" | "below" = "below";

-  @property({ type: Boolean, reflect: true, attribute: "show-border" })
-  public showBorder = false;
-
  protected render() {
    const titleSlot = html`<div class="header-title">
      <slot name="title"></slot>
@@ -52,16 +49,12 @@ export class HaDialogHeader extends LitElement {
          display: flex;
          flex-direction: row;
          align-items: center;
-          padding: 0 var(--ha-space-1);
+          padding: 4px;
          box-sizing: border-box;
        }
        .header-content {
          flex: 1;
-          padding: 10px var(--ha-space-1);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          min-height: var(--ha-space-12);
+          padding: 10px 4px;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
@@ -70,7 +63,7 @@ export class HaDialogHeader extends LitElement {
        .header-title {
          height: var(
            --ha-dialog-header-title-height,
-            calc(var(--ha-font-size-xl) + var(--ha-space-1))
+            calc(var(--ha-font-size-xl) + 4px)
          );
          font-size: var(--ha-font-size-xl);
          line-height: var(--ha-line-height-condensed);
@@ -83,19 +76,19 @@ export class HaDialogHeader extends LitElement {
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
          .header-bar {
-            padding: 0 var(--ha-space-2);
+            padding: 16px;
          }
        }
        .header-navigation-icon {
          flex: none;
-          min-width: var(--ha-space-2);
+          min-width: 8px;
          height: 100%;
          display: flex;
          flex-direction: row;
        }
        .header-action-items {
          flex: none;
-          min-width: var(--ha-space-2);
+          min-width: 8px;
          height: 100%;
          display: flex;
          flex-direction: row;
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -49,7 +49,6 @@ export class HaExpansionPanel extends LitElement {
          tabindex=${this.noCollapse ? -1 : 0}
          aria-expanded=${this.expanded}
          aria-controls="sect1"
-          part="summary"
        >
          ${this.leftChevron ? chevronIcon : nothing}
          <slot name="leading-icon"></slot>
@@ -171,11 +170,6 @@ export class HaExpansionPanel extends LitElement {
      margin-left: 8px;
      margin-inline-start: 8px;
      margin-inline-end: initial;
-      border-radius: var(--ha-border-radius-circle);
-    }
-
-    #summary:focus-visible ha-svg-icon.summary-icon {
-      background-color: var(--ha-color-fill-neutral-normal-active);
    }

    :host([left-chevron]) .summary-icon,
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -248,7 +248,7 @@ export class HaFilterDevices extends LitElement {
        }
        search-input-outlined {
          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
+          padding: 0 8px;
        }
      `,
    ];
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@@ -199,7 +199,7 @@ export class HaFilterDomains extends LitElement {
        }
        search-input-outlined {
          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
+          padding: 0 8px;
        }
      `,
    ];
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -264,7 +264,7 @@ export class HaFilterEntities extends LitElement {
        }
        search-input-outlined {
          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
+          padding: 0 8px;
        }
      `,
    ];
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -217,7 +217,7 @@ export class HaFilterIntegrations extends LitElement {
        }
        search-input-outlined {
          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
+          padding: 0 8px;
        }
      `,
    ];
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -256,7 +256,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
        }
        search-input-outlined {
          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
+          padding: 0 8px;
        }
      `,
    ];
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -148,7 +148,7 @@ export class HaForm extends LitElement implements HaFormElement {
                  .value=${getValue(this.data, item)}
                  .label=${this._computeLabel(item, this.data)}
                  .disabled=${item.disabled || this.disabled || false}
-                  .placeholder=${item.required ? undefined : item.default}
+                  .placeholder=${item.required ? "" : item.default}
                  .helper=${this._computeHelper(item)}
                  .localizeValue=${this.localizeValue}
                  .required=${item.required || false}
--- a/src/components/ha-generic-picker.ts
+++ b/src/components/ha-generic-picker.ts
@@ -1,14 +1,10 @@
-import "@home-assistant/webawesome/dist/components/popover/popover";
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiPlaylistPlus } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
-import "./ha-bottom-sheet";
-import "./ha-button";
 import "./ha-combo-box-item";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
@@ -19,12 +15,12 @@ import type {
  PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
-import type { PickerValueRenderer } from "./ha-picker-field";
+import type { HaPickerField, PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";

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

  // eslint-disable-next-line lit/no-native-attributes
  @property({ type: Boolean }) public autofocus = false;
@@ -57,7 +53,7 @@ export class HaGenericPicker extends LitElement {
  public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];

  @property({ attribute: false })
-  public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
+  public rowRenderer?: ComboBoxLitRenderer<PickerComboBoxItem>;

  @property({ attribute: false })
  public valueRenderer?: PickerValueRenderer;
@@ -68,142 +64,58 @@ export class HaGenericPicker extends LitElement {
  @property({ attribute: "not-found-label", type: String })
  public notFoundLabel?: string;

-  @property({ attribute: "popover-placement" })
-  public popoverPlacement:
-    | "bottom"
-    | "top"
-    | "left"
-    | "right"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end" = "bottom-start";
-
-  /** If set picker shows an add button instead of textbox when value isn't set */
-  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
-
-  @query(".container") private _containerElement?: HTMLDivElement;
+  @query("ha-picker-field") private _field?: HaPickerField;

  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;

  @state() private _opened = false;

-  @state() private _pickerWrapperOpen = false;
-
-  @state() private _popoverWidth = 0;
-
-  @state() private _openedNarrow = false;
-
-  private _narrow = false;
-
-  // helper to set new value after closing picker, to avoid flicker
-  private _newValue?: string;
-
-  private _unsubscribeTinyKeys?: () => void;
-
  protected render() {
    return html`
      ${this.label
        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
        : nothing}
      <div class="container">
-        <div id="picker">
-          <slot name="field">
-            ${this.addButtonLabel && !this.value
-              ? html`<ha-button
-                  size="small"
-                  appearance="filled"
-                  @click=${this.open}
-                  .disabled=${this.disabled}
-                >
-                  <ha-svg-icon
-                    .path=${mdiPlaylistPlus}
-                    slot="start"
-                  ></ha-svg-icon>
-                  ${this.addButtonLabel}
-                </ha-button>`
-              : html`<ha-picker-field
-                  type="button"
-                  class=${this._opened ? "opened" : ""}
-                  compact
-                  aria-label=${ifDefined(this.label)}
-                  @click=${this.open}
-                  @clear=${this._clear}
-                  .placeholder=${this.placeholder}
-                  .value=${this.value}
-                  .required=${this.required}
-                  .disabled=${this.disabled}
-                  .hideClearIcon=${this.hideClearIcon}
-                  .valueRenderer=${this.valueRenderer}
-                >
-                </ha-picker-field>`}
-          </slot>
-        </div>
-        ${!this._openedNarrow && (this._pickerWrapperOpen || this._opened)
+        ${!this._opened
          ? html`
-              <wa-popover
-                .open=${this._pickerWrapperOpen}
-                style="--body-width: ${this._popoverWidth}px;"
-                without-arrow
-                distance="-4"
-                .placement=${this.popoverPlacement}
-                for="picker"
-                auto-size="vertical"
-                auto-size-padding="16"
-                @wa-after-show=${this._dialogOpened}
-                @wa-after-hide=${this._hidePicker}
-                trap-focus
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.label || "Select option"}
+              <ha-picker-field
+                type="button"
+                compact
+                aria-label=${ifDefined(this.label)}
+                @click=${this.open}
+                @clear=${this._clear}
+                .placeholder=${this.placeholder}
+                .value=${this.value}
+                .required=${this.required}
+                .disabled=${this.disabled}
+                .hideClearIcon=${this.hideClearIcon}
+                .valueRenderer=${this.valueRenderer}
              >
-                ${this._renderComboBox()}
-              </wa-popover>
+              </ha-picker-field>
            `
-          : this._pickerWrapperOpen || this._opened
-            ? html`<ha-bottom-sheet
-                flexcontent
-                .open=${this._pickerWrapperOpen}
-                @wa-after-show=${this._dialogOpened}
-                @closed=${this._hidePicker}
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.label || "Select option"}
-              >
-                ${this._renderComboBox(true)}
-              </ha-bottom-sheet>`
-            : nothing}
+          : html`
+              <ha-picker-combo-box
+                .hass=${this.hass}
+                .autofocus=${this.autofocus}
+                .allowCustomValue=${this.allowCustomValue}
+                .label=${this.searchLabel ??
+                this.hass.localize("ui.common.search")}
+                .value=${this.value}
+                hide-clear-icon
+                @opened-changed=${this._openedChanged}
+                @value-changed=${this._valueChanged}
+                .rowRenderer=${this.rowRenderer}
+                .notFoundLabel=${this.notFoundLabel}
+                .getItems=${this.getItems}
+                .getAdditionalItems=${this.getAdditionalItems}
+                .searchFn=${this.searchFn}
+              ></ha-picker-combo-box>
+            `}
      </div>
      ${this._renderHelper()}
    `;
  }

-  private _renderComboBox(dialogMode = false) {
-    if (!this._opened) {
-      return nothing;
-    }
-    return html`
-      <ha-picker-combo-box
-        .hass=${this.hass}
-        .allowCustomValue=${this.allowCustomValue}
-        .label=${this.searchLabel ??
-        (this.hass?.localize("ui.common.search") || "Search")}
-        .value=${this.value}
-        @value-changed=${this._valueChanged}
-        .rowRenderer=${this.rowRenderer}
-        .notFoundLabel=${this.notFoundLabel}
-        .getItems=${this.getItems}
-        .getAdditionalItems=${this.getAdditionalItems}
-        .searchFn=${this.searchFn}
-        .mode=${dialogMode ? "dialog" : "popover"}
-      ></ha-picker-combo-box>
-    `;
-  }
-
  private _renderHelper() {
    return this.helper
      ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -212,33 +124,13 @@ export class HaGenericPicker extends LitElement {
      : nothing;
  }

-  private _dialogOpened = () => {
-    this._opened = true;
-    requestAnimationFrame(() => {
-      this._comboBox?.focus();
-    });
-  };
-
-  private _hidePicker(ev) {
-    ev.stopPropagation();
-    if (this._newValue) {
-      fireEvent(this, "value-changed", { value: this._newValue });
-      this._newValue = undefined;
-    }
-
-    this._opened = false;
-    this._pickerWrapperOpen = false;
-    this._unsubscribeTinyKeys?.();
-  }
-
  private _valueChanged(ev: CustomEvent) {
    ev.stopPropagation();
    const value = ev.detail.value;
    if (!value) {
      return;
    }
-    this._pickerWrapperOpen = false;
-    this._newValue = value;
+    fireEvent(this, "value-changed", { value });
  }

  private _clear(e) {
@@ -251,44 +143,24 @@ export class HaGenericPicker extends LitElement {
    fireEvent(this, "value-changed", { value });
  }

-  public async open(ev?: Event) {
-    ev?.stopPropagation();
+  public async open() {
    if (this.disabled) {
      return;
    }
-    this._openedNarrow = this._narrow;
-    this._popoverWidth = this._containerElement?.offsetWidth || 250;
-    this._pickerWrapperOpen = true;
-    this._unsubscribeTinyKeys = tinykeys(this, {
-      Escape: this._handleEscClose,
-    });
+    this._opened = true;
+    await this.updateComplete;
+    this._comboBox?.focus();
+    this._comboBox?.open();
  }

-  connectedCallback() {
-    super.connectedCallback();
-    this._handleResize();
-    window.addEventListener("resize", this._handleResize);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("resize", this._handleResize);
-    this._unsubscribeTinyKeys?.();
-  }
-
-  private _handleResize = () => {
-    this._narrow =
-      window.matchMedia("(max-width: 870px)").matches ||
-      window.matchMedia("(max-height: 500px)").matches;
-
-    if (!this._openedNarrow && this._pickerWrapperOpen) {
-      this._popoverWidth = this._containerElement?.offsetWidth || 250;
+  private async _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
+    const opened = ev.detail.value;
+    if (this._opened && !opened) {
+      this._opened = false;
+      await this.updateComplete;
+      this._field?.focus();
    }
-  };
-
-  private _handleEscClose = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-  };
+  }

  static get styles(): CSSResultGroup {
    return [
@@ -306,45 +178,7 @@ export class HaGenericPicker extends LitElement {
        }
        ha-input-helper-text {
          display: block;
-          margin: var(--ha-space-2) 0 0;
-        }
-
-        wa-popover {
-          --wa-space-l: var(--ha-space-0);
-        }
-
-        wa-popover::part(body) {
-          width: max(var(--body-width), 250px);
-          max-width: max(var(--body-width), 250px);
-          max-height: 500px;
-          height: 70vh;
-          overflow: hidden;
-        }
-
-        @media (max-height: 1000px) {
-          wa-popover::part(body) {
-            max-height: 400px;
-          }
-        }
-
-        @media (max-height: 1000px) {
-          wa-popover::part(body) {
-            max-height: 400px;
-          }
-        }
-
-        ha-bottom-sheet {
-          --ha-bottom-sheet-height: 90vh;
-          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
-          --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
-          --ha-bottom-sheet-max-width: 600px;
-          --ha-bottom-sheet-padding: var(--ha-space-0);
-          --ha-bottom-sheet-surface-background: var(--card-background-color);
-          --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
-        }
-
-        ha-picker-field.opened {
-          --mdc-text-field-idle-line-color: var(--primary-color);
+          margin: 8px 0 0;
        }
      `,
    ];
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -1,5 +1,5 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -178,7 +178,7 @@ export class HaItemDisplayEditor extends LitElement {
                            ? this._dragHandleKeydown
                            : undefined}
                          class="handle"
-                          .path=${mdiDragHorizontalVariant}
+                          .path=${mdiDrag}
                          slot="end"
                        ></ha-svg-icon>
                      `
--- a/src/components/ha-label-picker.ts
+++ b/src/components/ha-label-picker.ts
@@ -2,19 +2,19 @@ import { mdiLabel, mdiPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
+import type {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+} from "../data/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import type { LabelRegistryEntry } from "../data/label_registry";
 import {
  createLabelRegistryEntry,
-  getLabels,
  subscribeLabelRegistry,
 } from "../data/label_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -90,9 +90,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {

  @state() private _labels?: LabelRegistryEntry[];

-  @queryAssignedElements({ flatten: true })
-  private _slotNodes?: NodeListOf<HTMLElement>;
-
  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  public async open() {
@@ -140,22 +137,201 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
      }
  );

-  private _getLabelsMemoized = memoizeOne(getLabels);
+  private _getLabels = memoizeOne(
+    (
+      labels: LabelRegistryEntry[] | undefined,
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeLabels: this["excludeLabels"]
+    ): PickerComboBoxItem[] => {
+      if (!labels || labels.length === 0) {
+        return [
+          {
+            id: NO_LABELS,
+            primary: this.hass.localize("ui.components.label-picker.no_labels"),
+            icon_path: mdiLabel,
+          },
+        ];
+      }

-  private _getItems = () => {
-    if (!this._labels || this._labels.length === 0) {
-      return [
-        {
-          id: NO_LABELS,
-          primary: this.hass.localize("ui.components.label-picker.no_labels"),
-          icon_path: mdiLabel,
-        },
-      ];
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.labels.length > 0);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputLabels = labels;
+      const usedLabels = new Set<string>();
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+
+        inputDevices.forEach((device) => {
+          device.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+        inputEntities.forEach((entity) => {
+          entity.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (areaIds) {
+        areaIds.forEach((areaId) => {
+          const area = haAreas[areaId];
+          area.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (excludeLabels) {
+        outputLabels = outputLabels.filter(
+          (label) => !excludeLabels!.includes(label.label_id)
+        );
+      }
+
+      if (inputDevices || inputEntities) {
+        outputLabels = outputLabels.filter((label) =>
+          usedLabels.has(label.label_id)
+        );
+      }
+
+      const items = outputLabels.map<PickerComboBoxItem>((label) => ({
+        id: label.label_id,
+        primary: label.name,
+        icon: label.icon || undefined,
+        icon_path: label.icon ? undefined : mdiLabel,
+        sorting_label: label.name,
+        search_labels: [label.name, label.label_id, label.description].filter(
+          (v): v is string => Boolean(v)
+        ),
+      }));
+
+      return items;
    }
+  );

-    return this._getLabelsMemoized(
-      this.hass,
+  private _getItems = () =>
+    this._getLabels(
      this._labels,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
@@ -163,7 +339,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
      this.entityFilter,
      this.excludeLabels
    );
-  };

  private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
    if (!labels) {
@@ -220,14 +395,12 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {

    return html`
      <ha-generic-picker
-        .disabled=${this.disabled}
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .label=${this.label}
        .notFoundLabel=${this.hass.localize(
          "ui.components.label-picker.no_match"
        )}
-        .addButtonLabel=${this.hass.localize("ui.components.label-picker.add")}
        .placeholder=${placeholder}
        .value=${this.value}
        .getItems=${this._getItems}
@@ -235,7 +408,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
        .valueRenderer=${valueRenderer}
        @value-changed=${this._valueChanged}
      >
-        <slot .slot=${this._slotNodes?.length ? "field" : undefined}></slot>
      </ha-generic-picker>
    `;
  }
--- a/src/components/ha-labels-picker.ts
+++ b/src/components/ha-labels-picker.ts
@@ -1,4 +1,3 @@
-import { mdiPlaylistPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -124,6 +123,36 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
    );
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      ${labels?.length
+        ? html`<ha-chip-set>
+            ${repeat(
+              labels,
+              (label) => label?.label_id,
+              (label) => {
+                const color = label?.color
+                  ? computeCssColor(label.color)
+                  : undefined;
+                return html`
+                  <ha-input-chip
+                    .item=${label}
+                    @remove=${this._removeItem}
+                    @click=${this._openDetail}
+                    .label=${label?.name}
+                    selected
+                    style=${color ? `--color: ${color}` : ""}
+                  >
+                    ${label?.icon
+                      ? html`<ha-icon
+                          slot="icon"
+                          .icon=${label.icon}
+                        ></ha-icon>`
+                      : nothing}
+                  </ha-input-chip>
+                `;
+              }
+            )}
+          </ha-chip-set>`
+        : nothing}
      <ha-label-picker
        .hass=${this.hass}
        .helper=${this.helper}
@@ -133,47 +162,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
        .excludeLabels=${this.value}
        @value-changed=${this._labelChanged}
      >
-        <ha-chip-set>
-          ${labels?.length
-            ? repeat(
-                labels,
-                (label) => label?.label_id,
-                (label) => {
-                  const color = label?.color
-                    ? computeCssColor(label.color)
-                    : undefined;
-                  return html`
-                    <ha-input-chip
-                      .item=${label}
-                      @remove=${this._removeItem}
-                      @click=${this._openDetail}
-                      .disabled=${this.disabled}
-                      .label=${label?.name}
-                      selected
-                      style=${color ? `--color: ${color}` : ""}
-                    >
-                      ${label?.icon
-                        ? html`<ha-icon
-                            slot="icon"
-                            .icon=${label.icon}
-                          ></ha-icon>`
-                        : nothing}
-                    </ha-input-chip>
-                  `;
-                }
-              )
-            : nothing}
-          <ha-button
-            id="picker"
-            size="small"
-            appearance="filled"
-            @click=${this._openPicker}
-            .disabled=${this.disabled}
-          >
-            <ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
-            ${this.hass.localize("ui.components.label-picker.add")}
-          </ha-button>
-        </ha-chip-set>
      </ha-label-picker>
    `;
  }
@@ -215,25 +203,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
    }, 0);
  }

-  private _openPicker(ev: Event) {
-    ev.stopPropagation();
-    this.labelPicker.open();
-  }
-
  static styles = css`
    ha-chip-set {
      margin-bottom: 8px;
-      background-color: var(--mdc-text-field-fill-color);
-      border-bottom: 1px solid var(--ha-color-border-neutral-normal);
-      border-top-right-radius: var(--ha-border-radius-sm);
-      border-top-left-radius: var(--ha-border-radius-sm);
-      padding: var(--ha-space-3);
-    }
-    .placeholder {
-      color: var(--mdc-text-field-label-ink-color);
-      display: flex;
-      align-items: center;
-      height: var(--ha-space-8);
    }
    ha-input-chip {
      --md-input-chip-selected-container-color: var(--color, var(--grey-color));
--- a/src/components/ha-language-picker.ts
+++ b/src/components/ha-language-picker.ts
@@ -1,58 +1,56 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { formatLanguageCode } from "../common/language/format_language";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { FrontendLocaleData } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
-import "./ha-generic-picker";
+import type { HomeAssistant } from "../types";
 import "./ha-list-item";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-select";
+import type { HaSelect } from "./ha-select";

 export const getLanguageOptions = (
  languages: string[],
  nativeName: boolean,
  noSort: boolean,
  locale?: FrontendLocaleData
-): PickerComboBoxItem[] => {
-  let options: PickerComboBoxItem[] = [];
+) => {
+  let options: { label: string; value: string }[] = [];

  if (nativeName) {
    const translations = translationMetadata.translations;
    options = languages.map((lang) => {
-      let primary = translations[lang]?.nativeName;
-      if (!primary) {
+      let label = translations[lang]?.nativeName;
+      if (!label) {
        try {
          // this will not work if Intl.DisplayNames is polyfilled, it will return in the language of the user
-          primary = new Intl.DisplayNames(lang, {
+          label = new Intl.DisplayNames(lang, {
            type: "language",
            fallback: "code",
          }).of(lang)!;
        } catch (_err) {
-          primary = lang;
+          label = lang;
        }
      }
      return {
-        id: lang,
-        primary,
-        search_labels: [primary],
+        value: lang,
+        label,
      };
    });
  } else if (locale) {
    options = languages.map((lang) => ({
-      id: lang,
-      primary: formatLanguageCode(lang, locale),
-      search_labels: [formatLanguageCode(lang, locale)],
+      value: lang,
+      label: formatLanguageCode(lang, locale),
    }));
  }

  if (!noSort && locale) {
    options.sort((a, b) =>
-      caseInsensitiveStringCompare(a.primary, b.primary, locale.language)
+      caseInsensitiveStringCompare(a.label, b.label, locale.language)
    );
  }
  return options;
@@ -82,69 +80,115 @@ export class HaLanguagePicker extends LitElement {

  @state() _defaultLanguages: string[] = [];

+  @query("ha-select") private _select!: HaSelect;
+
  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);
    this._computeDefaultLanguageOptions();
  }

+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    const localeChanged =
+      changedProperties.has("hass") &&
+      this.hass &&
+      changedProperties.get("hass") &&
+      changedProperties.get("hass").locale.language !==
+        this.hass.locale.language;
+    if (
+      changedProperties.has("languages") ||
+      changedProperties.has("value") ||
+      localeChanged
+    ) {
+      this._select.layoutOptions();
+      if (!this.disabled && this._select.value !== this.value) {
+        fireEvent(this, "value-changed", { value: this._select.value });
+      }
+      if (!this.value) {
+        return;
+      }
+      const languageOptions = this._getLanguagesOptions(
+        this.languages ?? this._defaultLanguages,
+        this.nativeName,
+        this.noSort,
+        this.hass?.locale
+      );
+      const selectedItemIndex = languageOptions.findIndex(
+        (option) => option.value === this.value
+      );
+      if (selectedItemIndex === -1) {
+        this.value = undefined;
+      }
+      if (localeChanged) {
+        this._select.select(selectedItemIndex);
+      }
+    }
+  }
+
  private _getLanguagesOptions = memoizeOne(getLanguageOptions);

  private _computeDefaultLanguageOptions() {
    this._defaultLanguages = Object.keys(translationMetadata.translations);
  }

-  private _getItems = () =>
-    this._getLanguagesOptions(
+  protected render() {
+    const languageOptions = this._getLanguagesOptions(
      this.languages ?? this._defaultLanguages,
      this.nativeName,
      this.noSort,
      this.hass?.locale
    );

-  private _valueRenderer = (value) => {
-    const language = this._getItems().find(
-      (lang) => lang.id === value
-    )?.primary;
-    return html`<span slot="headline">${language ?? value}</span> `;
-  };
-
-  protected render() {
    const value =
      this.value ??
-      (this.required && !this.disabled ? this._getItems()[0].id : this.value);
+      (this.required && !this.disabled
+        ? languageOptions[0]?.value
+        : this.value);

    return html`
-      <ha-generic-picker
-        .hass=${this.hass}
-        .autofocus=${this.autofocus}
-        popover-placement="bottom-end"
-        .notFoundLabel=${this.hass?.localize(
-          "ui.components.language-picker.no_match"
-        )}
-        .placeholder=${this.label ??
+      <ha-select
+        .label=${this.label ??
        (this.hass?.localize("ui.components.language-picker.language") ||
          "Language")}
-        .value=${value}
-        .valueRenderer=${this._valueRenderer}
+        .value=${value || ""}
+        .required=${this.required}
        .disabled=${this.disabled}
-        .getItems=${this._getItems}
-        @value-changed=${this._changed}
-        hide-clear-icon
-      ></ha-generic-picker>
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+        .inlineArrow=${this.inlineArrow}
+      >
+        ${languageOptions.length === 0
+          ? html`<ha-list-item value=""
+              >${this.hass?.localize(
+                "ui.components.language-picker.no_languages"
+              ) || "No languages"}</ha-list-item
+            >`
+          : languageOptions.map(
+              (option) => html`
+                <ha-list-item .value=${option.value}
+                  >${option.label}</ha-list-item
+                >
+              `
+            )}
+      </ha-select>
    `;
  }

  static styles = css`
-    ha-generic-picker {
+    ha-select {
      width: 100%;
-      min-width: 200px;
-      display: block;
    }
  `;

-  private _changed(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    this.value = ev.detail.value;
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (this.disabled || target.value === "" || target.value === this.value) {
+      return;
+    }
+    this.value = target.value;
    fireEvent(this, "value-changed", { value: this.value });
  }
 }
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -50,7 +50,7 @@ export class HaMarkdown extends LitElement {
    }
    ha-alert {
      display: block;
-      margin: var(--ha-space-1) 0;
+      margin: 4px 0;
    }
    a {
      color: var(--primary-color);
@@ -75,7 +75,7 @@ export class HaMarkdown extends LitElement {
      padding: 0;
    }
    pre {
-      padding: var(--ha-space-4);
+      padding: 16px;
      overflow: auto;
      line-height: var(--ha-line-height-condensed);
      font-family: var(--ha-font-family-code);
@@ -95,7 +95,7 @@ export class HaMarkdown extends LitElement {
    hr {
      border-color: var(--divider-color);
      border-bottom: none;
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
    }
  ` as CSSResultGroup;
 }
--- a/src/components/ha-picker-combo-box.ts
+++ b/src/components/ha-picker-combo-box.ts
@@ -1,28 +1,19 @@
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiMagnify } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import Fuse from "fuse.js";
-import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  query,
-  state,
-} from "lit/decorators";
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { HaFuse } from "../resources/fuse";
-import { haStyleScrollbar } from "../resources/styles";
-import { loadVirtualizer } from "../resources/virtualizer";
-import type { HomeAssistant } from "../types";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
 import "./ha-icon";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";

 export interface PickerComboBoxItem {
  id: string;
@@ -42,13 +33,10 @@ export interface PickerComboBoxItemWithLabel extends PickerComboBoxItem {

 const NO_MATCHING_ITEMS_FOUND_ID = "___no_matching_items_found___";

-const DEFAULT_ROW_RENDERER: RenderItemFunction<PickerComboBoxItem> = (
+const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
  item
 ) => html`
-  <ha-combo-box-item
-    .type=${item.id === NO_MATCHING_ITEMS_FOUND_ID ? "text" : "button"}
-    compact
-  >
+  <ha-combo-box-item type="button" compact>
    ${item.icon
      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
      : item.icon_path
@@ -69,7 +57,7 @@ export type PickerComboBoxSearchFn<T extends PickerComboBoxItem> = (

@customElement("ha-picker-combo-box")
 export class HaPickerComboBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  // eslint-disable-next-line lit/no-native-attributes
  @property({ type: Boolean }) public autofocus = false;
@@ -85,7 +73,7 @@ export class HaPickerComboBox extends LitElement {

  @property() public value?: string;

-  @state() private _listScrolled = false;
+  @property() public helper?: string;

  @property({ attribute: false, type: Array })
  public getItems?: () => PickerComboBoxItem[];
@@ -94,7 +82,10 @@ export class HaPickerComboBox extends LitElement {
  public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];

  @property({ attribute: false })
-  public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
+  public rowRenderer?: ComboBoxLitRenderer<PickerComboBoxItem>;
+
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;

  @property({ attribute: "not-found-label", type: String })
  public notFoundLabel?: string;
@@ -102,77 +93,33 @@ export class HaPickerComboBox extends LitElement {
  @property({ attribute: false })
  public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;

-  @property({ reflect: true }) public mode: "popover" | "dialog" = "popover";
+  @state() private _opened = false;

-  @query("lit-virtualizer") private _virtualizerElement?: LitVirtualizer;
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;

-  @query("ha-textfield") private _searchFieldElement?: HaTextField;
-
-  @state() private _items: PickerComboBoxItemWithLabel[] = [];
-
-  private _allItems: PickerComboBoxItemWithLabel[] = [];
-
-  private _selectedItemIndex = -1;
-
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
-  private _removeKeyboardShortcuts?: () => void;
-
-  protected firstUpdated() {
-    this._registerKeyboardShortcuts();
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
  }

-  public willUpdate() {
-    if (!this.hasUpdated) {
-      loadVirtualizer();
-      this._allItems = this._getItems();
-      this._items = this._allItems;
-    }
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
  }

-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._removeKeyboardShortcuts?.();
-  }
+  private _initialItems = false;

-  protected render() {
-    return html`<ha-textfield
-        .label=${this.label ??
-        this.hass?.localize("ui.common.search") ??
-        "Search"}
-        @input=${this._filterChanged}
-      ></ha-textfield>
-      <lit-virtualizer
-        @scroll=${this._onScrollList}
-        tabindex="0"
-        scroller
-        .items=${this._items}
-        .renderItem=${this._renderItem}
-        style="min-height: 36px;"
-        class=${this._listScrolled ? "scrolled" : ""}
-        @focus=${this._focusList}
-      >
-      </lit-virtualizer> `;
-  }
+  private _items: PickerComboBoxItemWithLabel[] = [];

  private _defaultNotFoundItem = memoizeOne(
    (
      label: this["notFoundLabel"],
-      localize?: LocalizeFunc
+      localize: LocalizeFunc
    ): PickerComboBoxItemWithLabel => ({
      id: NO_MATCHING_ITEMS_FOUND_ID,
-      primary:
-        label ||
-        (localize && localize("ui.components.combo-box.no_match")) ||
-        "No matching items found",
+      primary: label || localize("ui.components.combo-box.no_match"),
      icon_path: mdiMagnify,
-      a11y_label:
-        label ||
-        (localize && localize("ui.components.combo-box.no_match")) ||
-        "No matching items found",
+      a11y_label: label || localize("ui.components.combo-box.no_match"),
    })
  );

@@ -197,13 +144,13 @@ export class HaPickerComboBox extends LitElement {
        caseInsensitiveStringCompare(
          entityA.sorting_label!,
          entityB.sorting_label!,
-          this.hass?.locale.language ?? navigator.language
+          this.hass.locale.language
        )
      );

    if (!sortedItems.length) {
      sortedItems.push(
-        this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+        this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
      );
    }

@@ -212,73 +159,99 @@ export class HaPickerComboBox extends LitElement {
    return sortedItems;
  };

-  private _renderItem = (item: PickerComboBoxItem, index: number) => {
-    const renderer = this.rowRenderer || DEFAULT_ROW_RENDERER;
-    return html`<div
-      id=${`list-item-${index}`}
-      class="combo-box-row ${this._value === item.id ? "current-value" : ""}"
-      .value=${item.id}
-      .index=${index}
-      @click=${this._valueSelected}
-    >
-      ${item.id === NO_MATCHING_ITEMS_FOUND_ID
-        ? DEFAULT_ROW_RENDERER(item, index)
-        : renderer(item, index)}
-    </div>`;
-  };
+  protected shouldUpdate(changedProps: PropertyValues) {
+    if (
+      changedProps.has("value") ||
+      changedProps.has("label") ||
+      changedProps.has("disabled")
+    ) {
+      return true;
+    }
+    return !(!changedProps.has("_opened") && this._opened);
+  }

-  @eventOptions({ passive: true })
-  private _onScrollList(ev) {
-    const top = ev.target.scrollTop ?? 0;
-    this._listScrolled = top > 0;
+  public willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("_opened") && this._opened) {
+      this._items = this._getItems();
+      if (this._initialItems) {
+        this.comboBox.filteredItems = this._items;
+      }
+      this._initialItems = true;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-combo-box
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="a11y_label"
+        clear-initial-value
+        .hass=${this.hass}
+        .value=${this._value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .allowCustomValue=${this.allowCustomValue}
+        .filteredItems=${this._items}
+        .renderer=${this.rowRenderer || DEFAULT_ROW_RENDERER}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .hideClearIcon=${this.hideClearIcon}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+      </ha-combo-box>
+    `;
  }

  private get _value() {
    return this.value || "";
  }

-  private _valueSelected = (ev: Event) => {
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
    ev.stopPropagation();
-    const value = (ev.currentTarget as any).value as string;
-    const newValue = value?.trim();
+    if (ev.detail.value !== this._opened) {
+      this._opened = ev.detail.value;
+      fireEvent(this, "opened-changed", { value: this._opened });
+    }
+  }
+
+  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+    ev.stopPropagation();
+    // Clear the input field to prevent showing the old value next time
+    this.comboBox.setTextFieldValue("");
+    const newValue = ev.detail.value?.trim();

    if (newValue === NO_MATCHING_ITEMS_FOUND_ID) {
      return;
    }

-    fireEvent(this, "value-changed", { value: newValue });
-  };
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }

  private _fuseIndex = memoizeOne((states: PickerComboBoxItem[]) =>
    Fuse.createIndex(["search_labels"], states)
  );

-  private _filterChanged = (ev: Event) => {
-    const textfield = ev.target as HaTextField;
-    const searchString = textfield.value.trim();
+  private _filterChanged(ev: CustomEvent): void {
+    if (!this._opened) return;

-    if (!searchString) {
-      this._items = this._allItems;
-      return;
-    }
+    const target = ev.target as HaComboBox;
+    const searchString = ev.detail.value.trim() as string;

-    const index = this._fuseIndex(this._allItems);
-    const fuse = new HaFuse(
-      this._allItems,
-      {
-        shouldSort: false,
-        minMatchCharLength: Math.min(searchString.length, 2),
-      },
-      index
-    );
+    const index = this._fuseIndex(this._items);
+    const fuse = new HaFuse(this._items, { shouldSort: false }, index);

    const results = fuse.multiTermsSearch(searchString);
-    let filteredItems = this._allItems as PickerComboBoxItem[];
+    let filteredItems = this._items as PickerComboBoxItem[];
    if (results) {
      const items = results.map((result) => result.item);
      if (items.length === 0) {
        items.push(
-          this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+          this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
        );
      }
      const additionalItems = this._getAdditionalItems(searchString);
@@ -287,279 +260,17 @@ export class HaPickerComboBox extends LitElement {
    }

    if (this.searchFn) {
-      filteredItems = this.searchFn(
-        searchString,
-        filteredItems,
-        this._allItems
-      );
+      filteredItems = this.searchFn(searchString, filteredItems, this._items);
    }

-    this._items = filteredItems as PickerComboBoxItemWithLabel[];
-    this._selectedItemIndex = -1;
-    if (this._virtualizerElement) {
-      this._virtualizerElement.scrollTo(0, 0);
-    }
-  };
-
-  private _registerKeyboardShortcuts() {
-    this._removeKeyboardShortcuts = tinykeys(this, {
-      ArrowUp: this._selectPreviousItem,
-      ArrowDown: this._selectNextItem,
-      Home: this._selectFirstItem,
-      End: this._selectLastItem,
-      Enter: this._pickSelectedItem,
-    });
+    target.filteredItems = filteredItems;
  }

-  private _focusList() {
-    if (this._selectedItemIndex === -1) {
-      this._selectNextItem();
-    }
+  private _setValue(value: string | undefined) {
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+    }, 0);
  }
-
-  private _selectNextItem = (ev?: KeyboardEvent) => {
-    ev?.stopPropagation();
-    ev?.preventDefault();
-    if (!this._virtualizerElement) {
-      return;
-    }
-
-    this._searchFieldElement?.focus();
-
-    const items = this._virtualizerElement.items as PickerComboBoxItem[];
-
-    const maxItems = items.length - 1;
-
-    if (maxItems === -1) {
-      this._resetSelectedItem();
-      return;
-    }
-
-    const nextIndex =
-      maxItems === this._selectedItemIndex
-        ? this._selectedItemIndex
-        : this._selectedItemIndex + 1;
-
-    if (!items[nextIndex]) {
-      return;
-    }
-
-    if (items[nextIndex].id === NO_MATCHING_ITEMS_FOUND_ID) {
-      // Skip titles, padding and empty search
-      if (nextIndex === maxItems) {
-        return;
-      }
-      this._selectedItemIndex = nextIndex + 1;
-    } else {
-      this._selectedItemIndex = nextIndex;
-    }
-
-    this._scrollToSelectedItem();
-  };
-
-  private _selectPreviousItem = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    ev.preventDefault();
-    if (!this._virtualizerElement) {
-      return;
-    }
-
-    if (this._selectedItemIndex > 0) {
-      const nextIndex = this._selectedItemIndex - 1;
-
-      const items = this._virtualizerElement.items as PickerComboBoxItem[];
-
-      if (!items[nextIndex]) {
-        return;
-      }
-
-      if (items[nextIndex]?.id === NO_MATCHING_ITEMS_FOUND_ID) {
-        // Skip titles, padding and empty search
-        if (nextIndex === 0) {
-          return;
-        }
-        this._selectedItemIndex = nextIndex - 1;
-      } else {
-        this._selectedItemIndex = nextIndex;
-      }
-
-      this._scrollToSelectedItem();
-    }
-  };
-
-  private _selectFirstItem = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    if (!this._virtualizerElement || !this._virtualizerElement.items.length) {
-      return;
-    }
-
-    const nextIndex = 0;
-
-    if (
-      (this._virtualizerElement.items[nextIndex] as PickerComboBoxItem)?.id ===
-      NO_MATCHING_ITEMS_FOUND_ID
-    ) {
-      return;
-    }
-
-    if (typeof this._virtualizerElement.items[nextIndex] === "string") {
-      this._selectedItemIndex = nextIndex + 1;
-    } else {
-      this._selectedItemIndex = nextIndex;
-    }
-
-    this._scrollToSelectedItem();
-  };
-
-  private _selectLastItem = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    if (!this._virtualizerElement || !this._virtualizerElement.items.length) {
-      return;
-    }
-
-    const nextIndex = this._virtualizerElement.items.length - 1;
-
-    if (
-      (this._virtualizerElement.items[nextIndex] as PickerComboBoxItem)?.id ===
-      NO_MATCHING_ITEMS_FOUND_ID
-    ) {
-      return;
-    }
-
-    if (typeof this._virtualizerElement.items[nextIndex] === "string") {
-      this._selectedItemIndex = nextIndex - 1;
-    } else {
-      this._selectedItemIndex = nextIndex;
-    }
-
-    this._scrollToSelectedItem();
-  };
-
-  private _scrollToSelectedItem = () => {
-    this._virtualizerElement
-      ?.querySelector(".selected")
-      ?.classList.remove("selected");
-
-    this._virtualizerElement?.scrollToIndex(this._selectedItemIndex, "end");
-
-    requestAnimationFrame(() => {
-      this._virtualizerElement
-        ?.querySelector(`#list-item-${this._selectedItemIndex}`)
-        ?.classList.add("selected");
-    });
-  };
-
-  private _pickSelectedItem = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-    const firstItem = this._virtualizerElement?.items[0] as PickerComboBoxItem;
-
-    if (
-      this._virtualizerElement?.items.length === 1 &&
-      firstItem.id !== NO_MATCHING_ITEMS_FOUND_ID
-    ) {
-      fireEvent(this, "value-changed", {
-        value: firstItem.id,
-      });
-    }
-
-    if (this._selectedItemIndex === -1) {
-      return;
-    }
-
-    // if filter button is focused
-    ev.preventDefault();
-
-    const item = this._virtualizerElement?.items[
-      this._selectedItemIndex
-    ] as PickerComboBoxItem;
-    if (item && item.id !== NO_MATCHING_ITEMS_FOUND_ID) {
-      fireEvent(this, "value-changed", { value: item.id });
-    }
-  };
-
-  private _resetSelectedItem() {
-    this._virtualizerElement
-      ?.querySelector(".selected")
-      ?.classList.remove("selected");
-    this._selectedItemIndex = -1;
-  }
-
-  static styles = [
-    haStyleScrollbar,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        padding-top: var(--ha-space-3);
-        flex: 1;
-      }
-
-      ha-textfield {
-        padding: 0 var(--ha-space-3);
-        margin-bottom: var(--ha-space-3);
-      }
-
-      :host([mode="dialog"]) ha-textfield {
-        padding: 0 var(--ha-space-4);
-      }
-
-      ha-combo-box-item {
-        width: 100%;
-      }
-
-      ha-combo-box-item.selected {
-        background-color: var(--ha-color-fill-neutral-quiet-hover);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        ha-combo-box-item.selected {
-          background-color: var(--ha-color-fill-neutral-normal-hover);
-        }
-      }
-
-      lit-virtualizer {
-        flex: 1;
-      }
-
-      lit-virtualizer:focus-visible {
-        outline: none;
-      }
-
-      lit-virtualizer.scrolled {
-        border-top: 1px solid var(--ha-color-border-neutral-quiet);
-      }
-
-      .bottom-padding {
-        height: max(var(--safe-area-inset-bottom, 0px), var(--ha-space-8));
-        width: 100%;
-      }
-
-      .empty {
-        text-align: center;
-      }
-
-      .combo-box-row {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        box-sizing: border-box;
-        min-height: 36px;
-      }
-      .combo-box-row.current-value {
-        background-color: var(--ha-color-fill-primary-quiet-resting);
-      }
-
-      .combo-box-row.selected {
-        background-color: var(--ha-color-fill-neutral-quiet-hover);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .combo-box-row.selected {
-          background-color: var(--ha-color-fill-neutral-normal-hover);
-        }
-      }
-    `,
-  ];
 }

 declare global {
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@@ -137,7 +137,7 @@ export class HaSelect extends SelectBase {
        height: var(--ha-select-height, 56px);
      }
      .mdc-select--filled .mdc-floating-label {
-        inset-inline-start: var(--ha-space-4);
+        inset-inline-start: 12px;
        inset-inline-end: initial;
        direction: var(--direction);
      }
@@ -147,7 +147,7 @@ export class HaSelect extends SelectBase {
        direction: var(--direction);
      }
      .mdc-select .mdc-select__anchor {
-        padding-inline-start: var(--ha-space-4);
+        padding-inline-start: 12px;
        padding-inline-end: 0px;
        direction: var(--direction);
      }
@@ -158,10 +158,7 @@ export class HaSelect extends SelectBase {
        padding-inline-end: var(--select-selected-text-padding-end, 0px);
      }
      :host([clearable]) .mdc-select__selected-text-container {
-        padding-inline-end: var(
-          --select-selected-text-padding-end,
-          var(--ha-space-4)
-        );
+        padding-inline-end: var(--select-selected-text-padding-end, 12px);
      }
      ha-icon-button {
        position: absolute;
--- a/src/components/ha-selector/ha-selector-background.ts
+++ b/src/components/ha-selector/ha-selector-background.ts
@@ -0,0 +1,122 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { BackgroundSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-picture-upload";
+import "../ha-alert";
+import type { HaPictureUpload } from "../ha-picture-upload";
+import { URL_PREFIX } from "../../data/image_upload";
+
+@customElement("ha-selector-background")
+export class HaBackgroundSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property({ attribute: false }) public selector!: BackgroundSelector;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private yamlBackground = false;
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("value")) {
+      this.yamlBackground = !!this.value && !this.value.startsWith(URL_PREFIX);
+    }
+  }
+
+  protected render() {
+    return html`
+      <div>
+        ${this.yamlBackground
+          ? html`
+              <div class="value">
+                <img
+                  src=${this.value}
+                  alt=${this.hass.localize(
+                    "ui.components.picture-upload.current_image_alt"
+                  )}
+                />
+              </div>
+              <ha-alert alert-type="info">
+                ${this.hass.localize(
+                  `ui.components.selectors.background.yaml_info`
+                )}
+                <ha-button slot="action" @click=${this._clearValue}>
+                  ${this.hass.localize(
+                    `ui.components.picture-upload.clear_picture`
+                  )}
+                </ha-button>
+              </ha-alert>
+            `
+          : html`
+              <ha-picture-upload
+                .hass=${this.hass}
+                .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
+                .original=${!!this.selector.background?.original}
+                .cropOptions=${this.selector.background?.crop}
+                select-media
+                @change=${this._pictureChanged}
+              ></ha-picture-upload>
+            `}
+      </div>
+    `;
+  }
+
+  private _pictureChanged(ev) {
+    const value = (ev.target as HaPictureUpload).value;
+
+    fireEvent(this, "value-changed", { value: value ?? undefined });
+  }
+
+  private _clearValue() {
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    ha-picture-upload {
+      background-color: var(--primary-background-color);
+      border-radius: var(--file-upload-image-border-radius);
+    }
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+    ha-button {
+      white-space: nowrap;
+      --mdc-theme-primary: var(--primary-color);
+    }
+    .value {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    img {
+      max-width: 100%;
+      max-height: 200px;
+      margin-bottom: 4px;
+      border-radius: var(--file-upload-image-border-radius);
+      transition: opacity 0.3s;
+      opacity: var(--picture-opacity, 1);
+    }
+    img:hover {
+      opacity: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-background": HaBackgroundSelector;
+  }
+}
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -36,8 +36,6 @@ export class HaDeviceSelector extends LitElement {

  @property() public helper?: string;

-  @property() public placeholder?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -104,7 +102,6 @@ export class HaDeviceSelector extends LitElement {
          .entityFilter=${this.selector.device?.entity
            ? this._filterEntities
            : undefined}
-          .placeholder=${this.placeholder}
          .disabled=${this.disabled}
          .required=${this.required}
          allow-custom-entity
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@@ -29,8 +29,6 @@ export class HaEntitySelector extends LitElement {

  @property() public helper?: string;

-  @property() public placeholder?: any;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -71,7 +69,6 @@ export class HaEntitySelector extends LitElement {
        .excludeEntities=${this.selector.entity?.exclude_entities}
        .entityFilter=${this._filterEntities}
        .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
        .disabled=${this.disabled}
        .required=${this.required}
        allow-custom-entity
@@ -89,7 +86,6 @@ export class HaEntitySelector extends LitElement {
        .reorder=${this.selector.entity.reorder ?? false}
        .entityFilter=${this._filterEntities}
        .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
        .disabled=${this.disabled}
        .required=${this.required}
      ></ha-entities-picker>
--- a/src/components/ha-selector/ha-selector-image.ts
+++ b/src/components/ha-selector/ha-selector-image.ts
@@ -0,0 +1,152 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { ImageSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-icon-button";
+import "../ha-textarea";
+import "../ha-textfield";
+import "../ha-picture-upload";
+import "../ha-radio";
+import "../ha-formfield";
+import type { HaPictureUpload } from "../ha-picture-upload";
+import { URL_PREFIX } from "../../data/image_upload";
+
+@customElement("ha-selector-image")
+export class HaImageSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property() public name?: string;
+
+  @property() public label?: string;
+
+  @property() public placeholder?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false }) public selector!: ImageSelector;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private showUpload = false;
+
+  protected firstUpdated(changedProps): void {
+    super.firstUpdated(changedProps);
+
+    if (!this.value || this.value.startsWith(URL_PREFIX)) {
+      this.showUpload = true;
+    }
+  }
+
+  protected render() {
+    return html`
+      <div>
+        <label>
+          ${this.hass.localize(
+            "ui.components.selectors.image.select_image_with_label",
+            {
+              label:
+                this.label ||
+                this.hass.localize("ui.components.selectors.image.image"),
+            }
+          )}
+          <ha-formfield
+            .label=${this.hass.localize("ui.components.selectors.image.upload")}
+          >
+            <ha-radio
+              name="mode"
+              value="upload"
+              .checked=${this.showUpload}
+              @change=${this._radioGroupPicked}
+            ></ha-radio>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize("ui.components.selectors.image.url")}
+          >
+            <ha-radio
+              name="mode"
+              value="url"
+              .checked=${!this.showUpload}
+              @change=${this._radioGroupPicked}
+            ></ha-radio>
+          </ha-formfield>
+        </label>
+        ${!this.showUpload
+          ? html`
+              <ha-textfield
+                .name=${this.name}
+                .value=${this.value || ""}
+                .placeholder=${this.placeholder || ""}
+                .helper=${this.helper}
+                helperPersistent
+                .disabled=${this.disabled}
+                @input=${this._handleChange}
+                .label=${this.label || ""}
+                .required=${this.required}
+              ></ha-textfield>
+            `
+          : html`
+              <ha-picture-upload
+                .hass=${this.hass}
+                .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
+                .original=${this.selector.image?.original}
+                .cropOptions=${this.selector.image?.crop}
+                select-media
+                @change=${this._pictureChanged}
+              ></ha-picture-upload>
+            `}
+      </div>
+    `;
+  }
+
+  private _radioGroupPicked(ev): void {
+    this.showUpload = ev.target.value === "upload";
+  }
+
+  private _pictureChanged(ev) {
+    const value = (ev.target as HaPictureUpload).value;
+
+    fireEvent(this, "value-changed", { value: value ?? undefined });
+  }
+
+  private _handleChange(ev) {
+    let value = ev.target.value;
+    if (this.value === value) {
+      return;
+    }
+    if (value === "" && !this.required) {
+      value = undefined;
+    }
+
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+    }
+    ha-textarea,
+    ha-textfield {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-image": HaImageSelector;
+  }
+}
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -1,4 +1,4 @@
-import { mdiPlayBox, mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,10 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { getSignedPath } from "../../data/auth";
 import type { MediaPickedEvent } from "../../data/media-player";
-import {
-  MediaClassBrowserSettings,
-  MediaPlayerEntityFeature,
-} from "../../data/media-player";
+import { MediaPlayerEntityFeature } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
@@ -20,6 +17,8 @@ import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../ha-picture-upload";
+import "../chips/ha-chip-set";
+import "../chips/ha-input-chip";

 const MANUAL_SCHEMA = [
  { name: "media_content_id", required: false, selector: { text: {} } },
@@ -36,7 +35,8 @@ export class HaMediaSelector extends LitElement {

  @property({ attribute: false }) public selector!: MediaSelector;

-  @property({ attribute: false }) public value?: MediaSelectorValue;
+  @property({ attribute: false })
+  public value?: MediaSelectorValue | MediaSelectorValue[];

  @property() public label?: string;

@@ -52,6 +52,9 @@ export class HaMediaSelector extends LitElement {

  @state() private _thumbnailUrl?: string | null;

+  // For multiple selection mode, cache signed/rewritten URLs per thumbnail string
+  @state() private _thumbnailUrlMap: Record<string, string | null> = {};
+
  private _contextEntities: string[] | undefined;

  private get _hasAccept(): boolean {
@@ -59,6 +62,15 @@ export class HaMediaSelector extends LitElement {
  }

  willUpdate(changedProps: PropertyValues<this>) {
+    if (changedProps.has("selector") && this.value !== undefined) {
+      if (this.selector.media?.multiple && !Array.isArray(this.value)) {
+        this.value = [this.value];
+        fireEvent(this, "value-changed", { value: this.value });
+      } else if (!this.selector.media?.multiple && Array.isArray(this.value)) {
+        this.value = this.value[0];
+        fireEvent(this, "value-changed", { value: this.value });
+      }
+    }
    if (changedProps.has("context")) {
      if (!this._hasAccept) {
        this._contextEntities = ensureArray(this.context?.filter_entity);
@@ -66,32 +78,91 @@ export class HaMediaSelector extends LitElement {
    }

    if (changedProps.has("value")) {
-      const thumbnail = this.value?.metadata?.thumbnail;
-      const oldThumbnail = (changedProps.get("value") as this["value"])
-        ?.metadata?.thumbnail;
-      if (thumbnail === oldThumbnail) {
-        return;
-      }
-      if (thumbnail && thumbnail.startsWith("/")) {
-        this._thumbnailUrl = undefined;
-        // Thumbnails served by local API require authentication
-        getSignedPath(this.hass, thumbnail).then((signedPath) => {
-          this._thumbnailUrl = signedPath.path;
+      if (this.selector.media?.multiple) {
+        const values = Array.isArray(this.value)
+          ? this.value
+          : this.value
+            ? [this.value]
+            : [];
+        const seenThumbs = new Set<string>();
+        values.forEach((val) => {
+          const thumbnail = val.metadata?.thumbnail;
+          if (!thumbnail) {
+            return;
+          }
+          seenThumbs.add(thumbnail);
+          // Only (re)compute if not cached yet
+          if (this._thumbnailUrlMap[thumbnail] !== undefined) {
+            return;
+          }
+          if (thumbnail.startsWith("/")) {
+            this._thumbnailUrlMap = {
+              ...this._thumbnailUrlMap,
+              [thumbnail]: null,
+            };
+            getSignedPath(this.hass, thumbnail).then((signedPath) => {
+              // Avoid losing other keys
+              this._thumbnailUrlMap = {
+                ...this._thumbnailUrlMap,
+                [thumbnail]: signedPath.path,
+              };
+            });
+          } else if (thumbnail.startsWith("https://brands.home-assistant.io")) {
+            this._thumbnailUrlMap = {
+              ...this._thumbnailUrlMap,
+              [thumbnail]: brandsUrl({
+                domain: extractDomainFromBrandUrl(thumbnail),
+                type: "icon",
+                useFallback: true,
+                darkOptimized: this.hass.themes?.darkMode,
+              }),
+            };
+          } else {
+            this._thumbnailUrlMap = {
+              ...this._thumbnailUrlMap,
+              [thumbnail]: thumbnail,
+            };
+          }
        });
-      } else if (
-        thumbnail &&
-        thumbnail.startsWith("https://brands.home-assistant.io")
-      ) {
-        // The backend is not aware of the theme used by the users,
-        // so we rewrite the URL to show a proper icon
-        this._thumbnailUrl = brandsUrl({
-          domain: extractDomainFromBrandUrl(thumbnail),
-          type: "icon",
-          useFallback: true,
-          darkOptimized: this.hass.themes?.darkMode,
+        // Clean up thumbnails no longer present
+        const newMap: Record<string, string | null> = {};
+        Object.keys(this._thumbnailUrlMap).forEach((key) => {
+          if (seenThumbs.has(key)) {
+            newMap[key] = this._thumbnailUrlMap[key];
+          }
        });
+        this._thumbnailUrlMap = newMap;
      } else {
-        this._thumbnailUrl = thumbnail;
+        const currVal = Array.isArray(this.value) ? this.value[0] : this.value;
+        const prevVal = Array.isArray(changedProps.get("value") as any)
+          ? (changedProps.get("value") as MediaSelectorValue[])[0]
+          : (changedProps.get("value") as MediaSelectorValue);
+        const thumbnail = currVal?.metadata?.thumbnail;
+        const oldThumbnail = prevVal?.metadata?.thumbnail;
+        if (thumbnail === oldThumbnail) {
+          return;
+        }
+        if (thumbnail && thumbnail.startsWith("/")) {
+          this._thumbnailUrl = undefined;
+          // Thumbnails served by local API require authentication
+          getSignedPath(this.hass, thumbnail).then((signedPath) => {
+            this._thumbnailUrl = signedPath.path;
+          });
+        } else if (
+          thumbnail &&
+          thumbnail.startsWith("https://brands.home-assistant.io")
+        ) {
+          // The backend is not aware of the theme used by the users,
+          // so we rewrite the URL to show a proper icon
+          this._thumbnailUrl = brandsUrl({
+            domain: extractDomainFromBrandUrl(thumbnail),
+            type: "icon",
+            useFallback: true,
+            darkOptimized: this.hass.themes?.darkMode,
+          });
+        } else {
+          this._thumbnailUrl = thumbnail ?? undefined;
+        }
      }
    }
  }
@@ -106,16 +177,20 @@ export class HaMediaSelector extends LitElement {
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

-    if (this.selector.media?.image_upload && !this.value) {
-      return html`${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-picture-upload
-          .hass=${this.hass}
-          .value=${null}
-          .contentIdHelper=${this.selector.media?.content_id_helper}
-          select-media
-          full-media
-          @media-picked=${this._pictureUploadMediaPicked}
-        ></ha-picture-upload>`;
+    const isMultiple = this.selector.media?.multiple === true;
+
+    if (
+      this.selector.media?.image_upload &&
+      (!this.value || (Array.isArray(this.value) && this.value.length === 0))
+    ) {
+      return html`<ha-picture-upload
+        .hass=${this.hass}
+        .value=${null}
+        .contentIdHelper=${this.selector.media?.content_id_helper}
+        select-media
+        full-media
+        @media-picked=${this._pictureUploadMediaPicked}
+      ></ha-picture-upload>`;
    }

    return html`
@@ -142,7 +217,6 @@ export class HaMediaSelector extends LitElement {
          `}
      ${!supportsBrowse
        ? html`
-            ${this.label ? html`<label>${this.label}</label>` : nothing}
            <ha-alert>
              ${this.hass.localize(
                "ui.components.selectors.media.browse_not_supported"
@@ -150,20 +224,47 @@ export class HaMediaSelector extends LitElement {
            </ha-alert>
            <ha-form
              .hass=${this.hass}
-              .data=${this.value || EMPTY_FORM}
+              .data=${Array.isArray(this.value)
+                ? this.value[0]
+                : this.value || EMPTY_FORM}
              .schema=${MANUAL_SCHEMA}
              .computeLabel=${this._computeLabelCallback}
              .computeHelper=${this._computeHelperCallback}
            ></ha-form>
          `
-        : html`${this.label ? html`<label>${this.label}</label>` : nothing}
+        : html`
+            ${isMultiple && Array.isArray(this.value) && this.value.length
+              ? html`
+                  <ha-chip-set>
+                    ${this.value.map(
+                      (item, idx) => html`
+                        <ha-input-chip
+                          selected
+                          .idx=${idx}
+                          @remove=${this._removeItem}
+                          >${item.metadata?.title ||
+                          item.media_content_id}</ha-input-chip
+                        >
+                      `
+                    )}
+                  </ha-chip-set>
+                `
+              : nothing}
+
            <ha-card
              outlined
              tabindex="0"
              role="button"
-              aria-label=${!this.value?.media_content_id
-                ? this.hass.localize("ui.components.selectors.media.pick_media")
-                : this.value.metadata?.title || this.value.media_content_id}
+              aria-label=${(() => {
+                const currVal = Array.isArray(this.value)
+                  ? this.value[this.value.length - 1]
+                  : this.value;
+                return !currVal?.media_content_id
+                  ? this.hass.localize(
+                      "ui.components.selectors.media.pick_media"
+                    )
+                  : currVal.metadata?.title || currVal.media_content_id;
+              })()}
              @click=${this._pickMedia}
              @keydown=${this._handleKeyDown}
              class=${this.disabled || (!entityId && !this._hasAccept)
@@ -172,14 +273,22 @@ export class HaMediaSelector extends LitElement {
            >
              <div class="content-container">
                <div class="thumbnail">
-                  ${this.value?.metadata?.thumbnail
+                  ${!isMultiple &&
+                  (Array.isArray(this.value) ? this.value[0] : this.value)
+                    ?.metadata?.thumbnail
                    ? html`
                        <div
                          class="${classMap({
                            "centered-image":
-                              !!this.value.metadata.media_class &&
+                              !!(
+                                Array.isArray(this.value)
+                                  ? this.value[0]
+                                  : this.value
+                              )!.metadata!.media_class &&
                              ["app", "directory"].includes(
-                                this.value.metadata.media_class
+                                (Array.isArray(this.value)
+                                  ? this.value[0]
+                                  : this.value)!.metadata!.media_class!
                              ),
                          })}
                          image"
@@ -192,32 +301,27 @@ export class HaMediaSelector extends LitElement {
                        <div class="icon-holder image">
                          <ha-svg-icon
                            class="folder"
-                            .path=${!this.value?.media_content_id
-                              ? mdiPlus
-                              : this.value?.metadata?.media_class
-                                ? MediaClassBrowserSettings[
-                                    this.value.metadata.media_class ===
-                                    "directory"
-                                      ? this.value.metadata
-                                          .children_media_class ||
-                                        this.value.metadata.media_class
-                                      : this.value.metadata.media_class
-                                  ].icon
-                                : mdiPlayBox}
+                            .path=${mdiPlus}
                          ></ha-svg-icon>
                        </div>
                      `}
                </div>
                <div class="title">
-                  ${!this.value?.media_content_id
-                    ? this.hass.localize(
-                        "ui.components.selectors.media.pick_media"
-                      )
-                    : this.value.metadata?.title || this.value.media_content_id}
+                  ${(() => {
+                    const currVal = Array.isArray(this.value)
+                      ? this.value[this.value.length - 1]
+                      : this.value;
+                    return !currVal?.media_content_id
+                      ? this.hass.localize(
+                          "ui.components.selectors.media.pick_media"
+                        )
+                      : currVal.metadata?.title || currVal.media_content_id;
+                  })()}
                </div>
              </div>
            </ha-card>
-            ${this.selector.media?.clearable
+            ${this.selector.media?.clearable &&
+            (Array.isArray(this.value) ? this.value.length : this.value)
              ? html`<div>
                  <ha-button
                    appearance="plain"
@@ -230,7 +334,8 @@ export class HaMediaSelector extends LitElement {
                    )}
                  </ha-button>
                </div>`
-              : nothing}`}
+              : nothing}
+          `}
    `;
  }

@@ -271,41 +376,61 @@ export class HaMediaSelector extends LitElement {
    showMediaBrowserDialog(this, {
      action: "pick",
      entityId: this._getActiveEntityId(),
-      navigateIds: this.value?.metadata?.navigateIds,
+      navigateIds: (Array.isArray(this.value)
+        ? this.value[this.value.length - 1]
+        : this.value
+      )?.metadata?.navigateIds,
      accept: this.selector.media?.accept,
-      defaultId: this.value?.media_content_id,
-      defaultType: this.value?.media_content_type,
+      defaultId: Array.isArray(this.value)
+        ? this.value[this.value.length - 1]?.media_content_id
+        : this.value?.media_content_id,
+      defaultType: Array.isArray(this.value)
+        ? this.value[this.value.length - 1]?.media_content_type
+        : this.value?.media_content_type,
      hideContentType: this.selector.media?.hide_content_type,
      contentIdHelper: this.selector.media?.content_id_helper,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
-        fireEvent(this, "value-changed", {
-          value: {
-            ...this.value,
-            media_content_id: pickedMedia.item.media_content_id,
-            media_content_type: pickedMedia.item.media_content_type,
-            metadata: {
-              title: pickedMedia.item.title,
-              thumbnail: pickedMedia.item.thumbnail,
-              media_class: pickedMedia.item.media_class,
-              children_media_class: pickedMedia.item.children_media_class,
-              navigateIds: pickedMedia.navigateIds?.map((id) => ({
-                media_content_type: id.media_content_type,
-                media_content_id: id.media_content_id,
-              })),
-              ...(!this._hasAccept && this.context?.filter_entity
-                ? { browse_entity_id: this._getActiveEntityId() }
-                : {}),
-            },
+        const newItem: MediaSelectorValue = {
+          ...(Array.isArray(this.value) ? {} : (this.value as any)),
+          media_content_id: pickedMedia.item.media_content_id,
+          media_content_type: pickedMedia.item.media_content_type,
+          metadata: {
+            title: pickedMedia.item.title,
+            thumbnail: pickedMedia.item.thumbnail,
+            media_class: pickedMedia.item.media_class,
+            children_media_class: pickedMedia.item.children_media_class,
+            navigateIds: pickedMedia.navigateIds?.map((id) => ({
+              media_content_type: id.media_content_type,
+              media_content_id: id.media_content_id,
+            })),
+            ...(!this._hasAccept && this.context?.filter_entity
+              ? { browse_entity_id: this._getActiveEntityId() }
+              : {}),
          },
-        });
+        };
+        if (this.selector.media?.multiple) {
+          const current = Array.isArray(this.value)
+            ? this.value
+            : this.value
+              ? [this.value]
+              : [];
+          fireEvent(this, "value-changed", {
+            value: [...current, newItem],
+          });
+          return;
+        }
+        fireEvent(this, "value-changed", { value: newItem });
      },
    });
  }

  private _getActiveEntityId(): string | undefined {
-    const metaId = this.value?.metadata?.browse_entity_id;
+    const val = Array.isArray(this.value)
+      ? this.value[this.value.length - 1]
+      : this.value;
+    const metaId = val?.metadata?.browse_entity_id;
    return (
-      this.value?.entity_id ||
+      val?.entity_id ||
      (metaId && this._contextEntities?.includes(metaId) && metaId) ||
      this._contextEntities?.[0]
    );
@@ -320,27 +445,47 @@ export class HaMediaSelector extends LitElement {

  private _pictureUploadMediaPicked(ev) {
    const pickedMedia = ev.detail as MediaPickedEvent;
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        media_content_id: pickedMedia.item.media_content_id,
-        media_content_type: pickedMedia.item.media_content_type,
-        metadata: {
-          title: pickedMedia.item.title,
-          thumbnail: pickedMedia.item.thumbnail,
-          media_class: pickedMedia.item.media_class,
-          children_media_class: pickedMedia.item.children_media_class,
-          navigateIds: pickedMedia.navigateIds?.map((id) => ({
-            media_content_type: id.media_content_type,
-            media_content_id: id.media_content_id,
-          })),
-        },
+    const newItem: MediaSelectorValue = {
+      ...(Array.isArray(this.value) ? {} : (this.value as any)),
+      media_content_id: pickedMedia.item.media_content_id,
+      media_content_type: pickedMedia.item.media_content_type,
+      metadata: {
+        title: pickedMedia.item.title,
+        thumbnail: pickedMedia.item.thumbnail,
+        media_class: pickedMedia.item.media_class,
+        children_media_class: pickedMedia.item.children_media_class,
+        navigateIds: pickedMedia.navigateIds?.map((id) => ({
+          media_content_type: id.media_content_type,
+          media_content_id: id.media_content_id,
+        })),
      },
-    });
+    };
+    if (this.selector.media?.multiple) {
+      const current = Array.isArray(this.value)
+        ? this.value
+        : this.value
+          ? [this.value]
+          : [];
+      fireEvent(this, "value-changed", { value: [...current, newItem] });
+      return;
+    }
+    fireEvent(this, "value-changed", { value: newItem });
  }

  private _clearValue() {
-    fireEvent(this, "value-changed", { value: undefined });
+    fireEvent(this, "value-changed", {
+      value: this.selector.media?.multiple ? [] : undefined,
+    });
+  }
+
+  private _removeItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!Array.isArray(this.value)) return;
+    const idx = (ev.currentTarget as any).idx as number;
+    if (idx === undefined) return;
+    const newValue = this.value.slice();
+    newValue.splice(idx, 1);
+    fireEvent(this, "value-changed", { value: newValue });
  }

  static styles = css`
@@ -352,6 +497,9 @@ export class HaMediaSelector extends LitElement {
      display: block;
      margin-bottom: 16px;
    }
+    ha-chip-set {
+      padding-bottom: 8px;
+    }
    ha-card {
      position: relative;
      width: 100%;
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -1,9 +1,4 @@
-import {
-  mdiClose,
-  mdiDelete,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-} from "@mdi/js";
+import { mdiClose, mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -52,10 +47,9 @@ export class HaObjectSelector extends LitElement {
    const translationKey = this.selector.object?.translation_key;

    if (this.localizeValue && translationKey) {
-      const label =
-        this.localizeValue(`${translationKey}.fields.${schema.name}.name`) ||
-        // Fallback for backward compatibility
-        this.localizeValue(`${translationKey}.fields.${schema.name}`);
+      const label = this.localizeValue(
+        `${translationKey}.fields.${schema.name}`
+      );
      if (label) {
        return label;
      }
@@ -63,20 +57,6 @@ export class HaObjectSelector extends LitElement {
    return this.selector.object?.fields?.[schema.name]?.label || schema.name;
  };

-  private _computeHelper = (schema: HaFormSchema): string => {
-    const translationKey = this.selector.object?.translation_key;
-
-    if (this.localizeValue && translationKey) {
-      const helper = this.localizeValue(
-        `${translationKey}.fields.${schema.name}.description`
-      );
-      if (helper) {
-        return helper;
-      }
-    }
-    return this.selector.object?.fields?.[schema.name]?.description || "";
-  };
-
  private _renderItem(item: any, index: number) {
    const labelField =
      this.selector.object!.label_field ||
@@ -112,7 +92,7 @@ export class HaObjectSelector extends LitElement {
          ? html`
              <ha-svg-icon
                class="handle"
-                .path=${mdiDragHorizontalVariant}
+                .path=${mdiDrag}
                slot="start"
              ></ha-svg-icon>
            `
@@ -229,7 +209,6 @@ export class HaObjectSelector extends LitElement {
      schema: this._schema(this.selector),
      data: {},
      computeLabel: this._computeLabel,
-      computeHelper: this._computeHelper,
      submitText: this.hass.localize("ui.common.add"),
    });

--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDrag } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -197,7 +197,7 @@ export class HaSelectSelector extends LitElement {
                            ? html`
                                <ha-svg-icon
                                  slot="icon"
-                                  .path=${mdiDragHorizontalVariant}
+                                  .path=${mdiDrag}
                                ></ha-svg-icon>
                              `
                            : nothing}
--- a/src/components/ha-selector/ha-selector-ui-state-content.ts
+++ b/src/components/ha-selector/ha-selector-ui-state-content.ts
@@ -36,7 +36,7 @@ export class HaSelectorUiStateContent extends SubscribeMixin(LitElement) {
        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
-        .allowName=${this.selector.ui_state_content?.allow_name || false}
+        .allowName=${this.selector.ui_state_content?.allow_name}
      ></ha-entity-state-content-picker>
    `;
  }
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -34,6 +34,8 @@ const LOAD_ELEMENTS = {
  file: () => import("./ha-selector-file"),
  floor: () => import("./ha-selector-floor"),
  label: () => import("./ha-selector-label"),
+  image: () => import("./ha-selector-image"),
+  background: () => import("./ha-selector-background"),
  language: () => import("./ha-selector-language"),
  navigation: () => import("./ha-selector-navigation"),
  number: () => import("./ha-selector-number"),
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -53,7 +53,7 @@ class HaServicePicker extends LitElement {
    item,
    { index }
  ) => html`
-    <ha-combo-box-item type="button" .borderTop=${index !== 0}>
+    <ha-combo-box-item type="button" border-top .borderTop=${index !== 0}>
      <ha-service-icon
        slot="start"
        .hass=${this.hass}
@@ -76,42 +76,34 @@ class HaServicePicker extends LitElement {
    </ha-combo-box-item>
  `;

-  private _valueRenderer = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"]
-    ): PickerValueRenderer =>
-      (value) => {
-        const serviceId = value;
-        const [domain, service] = serviceId.split(".");
+  private _valueRenderer: PickerValueRenderer = (value) => {
+    const serviceId = value;
+    const [domain, service] = serviceId.split(".");

-        if (!services[domain]?.[service]) {
-          return html`
-            <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
-            <span slot="headline">${value}</span>
-          `;
-        }
+    if (!this.hass.services[domain]?.[service]) {
+      return html`
+        <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
+        <span slot="headline">${value}</span>
+      `;
+    }

-        const serviceName =
-          localize(`component.${domain}.services.${service}.name`) ||
-          services[domain][service].name ||
-          service;
+    const serviceName =
+      this.hass.localize(`component.${domain}.services.${service}.name`) ||
+      this.hass.services[domain][service].name ||
+      service;

-        return html`
-          <ha-service-icon
-            slot="start"
-            .hass=${this.hass}
-            .service=${serviceId}
-          ></ha-service-icon>
-          <span slot="headline">${serviceName}</span>
-          ${this.showServiceId
-            ? html`<span slot="supporting-text" class="code"
-                >${serviceId}</span
-              >`
-            : nothing}
-        `;
-      }
-  );
+    return html`
+      <ha-service-icon
+        slot="start"
+        .hass=${this.hass}
+        .service=${serviceId}
+      ></ha-service-icon>
+      <span slot="headline">${serviceName}</span>
+      ${this.showServiceId
+        ? html`<span slot="supporting-text" class="code">${serviceId}</span>`
+        : nothing}
+    `;
+  };

  protected render(): TemplateResult {
    const placeholder =
@@ -131,10 +123,7 @@ class HaServicePicker extends LitElement {
        .value=${this.value}
        .getItems=${this._getItems}
        .rowRenderer=${this._rowRenderer}
-        .valueRenderer=${this._valueRenderer(
-          this.hass.localize,
-          this.hass.services
-        )}
+        .valueRenderer=${this._valueRenderer}
        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
@@ -173,9 +162,7 @@ class HaServicePicker extends LitElement {
            const description =
              this.hass.localize(
                `component.${domain}.services.${service}.description`
-              ) ||
-              services[domain][service].description ||
-              "";
+              ) || services[domain][service].description;

            items.push({
              id: serviceId,
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -29,7 +29,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { stringCompare } from "../common/string/compare";
-import { computeRTL } from "../common/util/compute_rtl";
 import { throttle } from "../common/util/throttle";
 import { subscribeFrontendUserData } from "../data/frontend";
 import type { ActionHandlerDetail } from "../data/lovelace/action_handler";
@@ -537,17 +536,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
  }

  private _renderUserItem(selectedPanel: string) {
-    const isRTL = computeRTL(this.hass);
-
    return html`
      <ha-md-list-item
        href="/profile"
        type="link"
-        class=${classMap({
-          user: true,
-          selected: selectedPanel === "profile",
-          rtl: isRTL,
-        })}
+        class="user ${selectedPanel === "profile" ? " selected" : ""}"
        @mouseenter=${this._itemMouseEnter}
        @mouseleave=${this._itemMouseLeave}
      >
@@ -673,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
    tooltip.style.display = "block";
    tooltip.style.position = "fixed";
    tooltip.style.top = `${top}px`;
-    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
  }

  private _hideTooltip() {
@@ -712,17 +705,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          background-color: var(--sidebar-background-color);
          width: 100%;
          box-sizing: border-box;
-          padding-bottom: calc(
-            14px + var(--safe-area-inset-bottom, var(--ha-space-0))
-          );
+          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
        }
        .menu {
-          height: calc(
-            var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
-          );
+          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
          box-sizing: border-box;
          display: flex;
-          padding: 0 var(--ha-space-1);
+          padding: 0 4px;
          border-bottom: 1px solid transparent;
          white-space: nowrap;
          font-weight: var(--ha-font-weight-normal);
@@ -737,17 +726,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          );
          font-size: var(--ha-font-size-xl);
          align-items: center;
-          padding-left: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
-          );
-          padding-inline-start: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
-          );
+          padding-left: calc(4px + var(--safe-area-inset-left, 0px));
+          padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
          padding-inline-end: initial;
-          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
+          padding-top: var(--safe-area-inset-top, 0px);
        }
        :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(256px + var(--safe-area-inset-left, 0px));
        }
        :host([narrow][expanded]) .menu {
          width: 100%;
@@ -763,8 +748,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          display: none;
        }
        :host([narrow]) .title {
-          margin: var(--ha-space-0);
-          padding: var(--ha-space-0) var(--ha-space-4);
+          margin: 0;
+          padding: 0 16px;
        }
        :host([expanded]) .title {
          display: initial;
@@ -776,16 +761,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-fade-in,
        ha-md-list {
          height: calc(
-            100% - var(--header-height) - var(
-                --safe-area-inset-top,
-                var(--ha-space-0)
-              ) -
+            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
              132px
          );
        }

        ha-fade-in {
-          padding: var(--ha-space-1) var(--ha-space-0);
+          padding: 4px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
@@ -795,29 +777,29 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-md-list {
          overflow-x: hidden;
          background: none;
-          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, 0px);
        }

        ha-md-list-item {
          flex-shrink: 0;
          box-sizing: border-box;
-          margin: var(--ha-space-1);
+          margin: 4px;
          border-radius: var(--ha-border-radius-sm);
-          --md-list-item-one-line-container-height: var(--ha-space-10);
+          --md-list-item-one-line-container-height: 40px;
          --md-list-item-top-space: 0;
          --md-list-item-bottom-space: 0;
-          width: var(--ha-space-12);
+          width: 48px;
          position: relative;
          --md-list-item-label-text-color: var(--sidebar-text-color);
-          --md-list-item-leading-space: var(--ha-space-3);
-          --md-list-item-trailing-space: var(--ha-space-3);
-          --md-list-item-leading-icon-size: var(--ha-space-6);
+          --md-list-item-leading-space: 12px;
+          --md-list-item-trailing-space: 12px;
+          --md-list-item-leading-icon-size: 24px;
        }
        :host([expanded]) ha-md-list-item {
          width: 248px;
        }
        :host([narrow][expanded]) ha-md-list-item {
-          width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(240px - var(--safe-area-inset-left, 0px));
        }

        ha-md-list-item.selected {
@@ -841,7 +823,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {

        ha-icon[slot="start"],
        ha-svg-icon[slot="start"] {
-          width: var(--ha-space-6);
+          width: 24px;
          flex-shrink: 0;
          color: var(--sidebar-icon-color);
        }
@@ -874,7 +856,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          display: flex;
          justify-content: center;
          align-items: center;
-          min-width: var(--ha-space-2);
+          min-width: 8px;
          border-radius: var(--ha-border-radius-xl);
          font-weight: var(--ha-font-weight-normal);
          line-height: normal;
@@ -885,26 +867,22 @@ class HaSidebar extends SubscribeMixin(LitElement) {

        ha-svg-icon + .badge {
          position: absolute;
-          top: var(--ha-space-1);
+          top: 4px;
          left: 26px;
          border-radius: var(--ha-border-radius-md);
          font-size: 0.65em;
          line-height: var(--ha-line-height-expanded);
-          padding: var(--ha-space-0) var(--ha-space-1);
+          padding: 0 4px;
        }

        ha-md-list-item.user {
-          --md-list-item-leading-icon-size: var(--ha-space-10);
-          --md-list-item-leading-space: var(--ha-space-1);
-        }
-
-        ha-md-list-item.user.rtl {
-          --md-list-item-leading-space: var(--ha-space-3);
+          --md-list-item-leading-icon-size: 40px;
+          --md-list-item-leading-space: 4px;
        }

        ha-user-badge {
          flex-shrink: 0;
-          margin-right: calc(var(--ha-space-2) * -1);
+          margin-right: -8px;
        }

        .spacer {
@@ -916,7 +894,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          color: var(--sidebar-text-color);
          font-size: var(--ha-font-size-m);
          font-weight: var(--ha-font-weight-medium);
-          padding: var(--ha-space-4);
+          padding: 16px;
          white-space: nowrap;
        }

@@ -928,7 +906,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          white-space: nowrap;
          color: var(--sidebar-background-color);
          background-color: var(--sidebar-text-color);
-          padding: var(--ha-space-1);
+          padding: 4px;
          font-weight: var(--ha-font-weight-medium);
        }

--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -59,33 +59,12 @@ export class HaSlider extends Slider {
          background-color: var(--ha-slider-thumb-color, var(--primary-color));
        }

-        #thumb:after {
-          content: "";
-          border-radius: 50%;
-          position: absolute;
-          width: calc(var(--thumb-width) * 2 + 8px);
-          height: calc(var(--thumb-height) * 2 + 8px);
-          left: calc(-50% - 4px);
-          top: calc(-50% - 4px);
-          cursor: pointer;
-        }
-
        #slider:focus-visible:not(.disabled) #thumb,
        #slider:focus-visible:not(.disabled) #thumb-min,
        #slider:focus-visible:not(.disabled) #thumb-max {
          outline: var(--wa-focus-ring);
        }

-        #track:after {
-          content: "";
-          position: absolute;
-          top: calc(-50% - 4px);
-          left: 0;
-          width: 100%;
-          height: calc(var(--track-size) * 2 + 8px);
-          cursor: pointer;
-        }
-
        #indicator {
          background-color: var(
            --ha-slider-indicator-color,
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
--- a/src/components/ha-tooltip.ts
+++ b/src/components/ha-tooltip.ts
@@ -9,7 +9,7 @@ export class HaTooltip extends Tooltip {
  @property({ attribute: "show-delay", type: Number }) showDelay = 150;

  /** The amount of time to wait before hiding the tooltip when the user mouses out.. */
-  @property({ attribute: "hide-delay", type: Number }) hideDelay = 150;
+  @property({ attribute: "hide-delay", type: Number }) hideDelay = 400;

  static get styles(): CSSResultGroup {
    return [
--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -1,18 +1,12 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { mdiClose } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  query,
-  state,
-} from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-dialog-header";
 import "./ha-icon-button";
+import type { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyleScrollbar } from "../resources/styles";

 export type DialogWidth = "small" | "medium" | "large" | "full";

@@ -96,11 +90,6 @@ export class HaWaDialog extends LitElement {
  @state()
  private _open = false;

-  @query(".body") public bodyContainer!: HTMLDivElement;
-
-  @state()
-  private _bodyScrolled = false;
-
  protected updated(
    changedProperties: Map<string | number | symbol, unknown>
  ): void {
@@ -118,14 +107,10 @@ export class HaWaDialog extends LitElement {
        .lightDismiss=${!this.preventScrimClose}
        without-header
        @wa-show=${this._handleShow}
-        @wa-after-show=${this._handleAfterShow}
        @wa-after-hide=${this._handleAfterHide}
      >
        <slot name="header">
-          <ha-dialog-header
-            .subtitlePosition=${this.headerSubtitlePosition}
-            .showBorder=${this._bodyScrolled}
-          >
+          <ha-dialog-header .subtitlePosition=${this.headerSubtitlePosition}>
            <slot name="headerNavigationIcon" slot="navigationIcon">
              <ha-icon-button
                data-dialog="close"
@@ -144,7 +129,7 @@ export class HaWaDialog extends LitElement {
            <slot name="headerActionItems" slot="actionItems"></slot>
          </ha-dialog-header>
        </slot>
-        <div class="body ha-scrollbar" @scroll=${this._handleBodyScroll}>
+        <div class="body ha-scrollbar">
          <slot></slot>
        </div>
        <slot name="footer" slot="footer"></slot>
@@ -161,10 +146,6 @@ export class HaWaDialog extends LitElement {
    (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
  };

-  private _handleAfterShow = () => {
-    fireEvent(this, "after-show");
-  };
-
  private _handleAfterHide = () => {
    this._open = false;
    fireEvent(this, "closed");
@@ -175,11 +156,6 @@ export class HaWaDialog extends LitElement {
    this._open = false;
  }

-  @eventOptions({ passive: true })
-  private _handleBodyScroll(ev: Event) {
-    this._bodyScrolled = (ev.target as HTMLDivElement).scrollTop > 0;
-  }
-
  static styles = [
    haStyleScrollbar,
    css`
@@ -196,7 +172,7 @@ export class HaWaDialog extends LitElement {
            )
          )
        );
-        --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
+        --width: var(--ha-dialog-width-md, min(580px, var(--full-width)));
        --spacing: var(--dialog-content-padding, var(--ha-space-6));
        --show-duration: var(--ha-dialog-show-duration, 200ms);
        --hide-duration: var(--ha-dialog-hide-duration, 200ms);
@@ -217,11 +193,11 @@ export class HaWaDialog extends LitElement {
      }

      :host([width="small"]) wa-dialog {
-        --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
+        --width: var(--ha-dialog-width-sm, min(320px, var(--full-width)));
      }

      :host([width="large"]) wa-dialog {
-        --width: min(var(--ha-dialog-width-lg, 720px), var(--full-width));
+        --width: var(--ha-dialog-width-lg, min(720px, var(--full-width)));
      }

      :host([width="full"]) wa-dialog {
@@ -235,7 +211,6 @@ export class HaWaDialog extends LitElement {
          --ha-dialog-max-height,
          calc(100% - var(--ha-space-20))
        );
-        min-height: var(--ha-dialog-min-height);
        position: var(--dialog-surface-position, relative);
        margin-top: var(--dialog-surface-margin-top, auto);
        display: flex;
@@ -272,7 +247,10 @@ export class HaWaDialog extends LitElement {
      .header-title {
        margin: 0;
        margin-bottom: 0;
-        color: var(--ha-dialog-header-title-color, var(--primary-text-color));
+        color: var(
+          --ha-dialog-header-title-color,
+          var(--ha-color-on-surface-default, var(--primary-text-color))
+        );
        font-size: var(
          --ha-dialog-header-title-font-size,
          var(--ha-font-size-2xl)
@@ -309,7 +287,6 @@ export class HaWaDialog extends LitElement {
      }
      :host([flexcontent]) .body {
        max-width: 100%;
-        flex: 1;
        display: flex;
        flex-direction: column;
      }
@@ -338,7 +315,6 @@ declare global {

  interface HASSDomEvents {
    opened: undefined;
-    "after-show": undefined;
    closed: undefined;
  }
 }
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -321,10 +321,6 @@ class HaWebRtcPlayer extends LitElement {
    if (!this._remoteStream) {
      return;
    }
-    // If the track is audio and the player is muted, we do not add it to the stream.
-    if (event.track.kind === "audio" && this.muted) {
-      return;
-    }
    this._remoteStream.addTrack(event.track);
    if (!this.hasUpdated) {
      await this.updateComplete;
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -15,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
-import { slugify } from "../../common/string/slugify";
 import { debounce } from "../../common/util/debounce";
 import { isUnavailableState } from "../../data/entity";
 import type {
@@ -694,12 +693,10 @@ export class HaMediaPlayerBrowse extends LitElement {
                `
              : ""}
          </div>
-          <ha-tooltip .for="grid-${slugify(child.title)}" distance="-4">
+          <ha-tooltip .for="grid-${child.title}" distance="-4">
            ${child.title}
          </ha-tooltip>
-          <div .id="grid-${slugify(child.title)}" class="title">
-            ${child.title}
-          </div>
+          <div .id="grid-${child.title}" class="title">${child.title}</div>
        </ha-card>
      </div>
    `;
--- a/src/components/target-picker/dialog/dialog-target-details.ts
+++ b/src/components/target-picker/dialog/dialog-target-details.ts
@@ -1,76 +0,0 @@
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-import type { HomeAssistant } from "../../../types";
-import "../../ha-dialog-header";
-import "../../ha-icon-button";
-import "../../ha-icon-next";
-import "../../ha-md-list";
-import "../../ha-md-list-item";
-import "../../ha-svg-icon";
-import "../../ha-wa-dialog";
-import "../ha-target-picker-item-row";
-import type { TargetDetailsDialogParams } from "./show-dialog-target-details";
-
-@customElement("ha-dialog-target-details")
-class DialogTargetDetails extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: TargetDetailsDialogParams;
-
-  @state() private _opened = false;
-
-  public showDialog(params: TargetDetailsDialogParams): void {
-    this._params = params;
-    this._opened = true;
-  }
-
-  public closeDialog() {
-    this._opened = false;
-    return true;
-  }
-
-  private _dialogClosed() {
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    this._params = undefined;
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._opened}
-        header-title=${this.hass.localize(
-          "ui.components.target-picker.target_details"
-        )}
-        header-subtitle=${`${this.hass.localize(
-          `ui.components.target-picker.type.${this._params.type}`
-        )}:
-            ${this._params.title}`}
-        @closed=${this._dialogClosed}
-      >
-        <ha-target-picker-item-row
-          .hass=${this.hass}
-          .type=${this._params.type}
-          .itemId=${this._params.itemId}
-          .deviceFilter=${this._params.deviceFilter}
-          .entityFilter=${this._params.entityFilter}
-          .includeDomains=${this._params.includeDomains}
-          .includeDeviceClasses=${this._params.includeDeviceClasses}
-          expand
-        ></ha-target-picker-item-row>
-      </ha-wa-dialog>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-target-details": DialogTargetDetails;
-  }
-}
--- a/src/components/target-picker/dialog/show-dialog-target-details.ts
+++ b/src/components/target-picker/dialog/show-dialog-target-details.ts
@@ -1,28 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
-import type { TargetType } from "../../../data/target";
-import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
-
-export type NewBackupType = "automatic" | "manual";
-
-export interface TargetDetailsDialogParams {
-  title: string;
-  type: TargetType;
-  itemId: string;
-  deviceFilter?: HaDevicePickerDeviceFilterFunc;
-  entityFilter?: HaEntityPickerEntityFilterFunc;
-  includeDomains?: string[];
-  includeDeviceClasses?: string[];
-}
-
-export const loadTargetDetailsDialog = () => import("./dialog-target-details");
-
-export const showTargetDetailsDialog = (
-  element: HTMLElement,
-  params: TargetDetailsDialogParams
-) =>
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-target-details",
-    dialogImport: loadTargetDetailsDialog,
-    dialogParams: params,
-  });
--- a/src/components/target-picker/ha-target-picker-item-group.ts
+++ b/src/components/target-picker/ha-target-picker-item-group.ts
@@ -1,113 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import type { TargetType, TargetTypeFloorless } from "../../data/target";
-import type { HomeAssistant } from "../../types";
-import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
-import "../ha-expansion-panel";
-import "../ha-md-list";
-import "./ha-target-picker-item-row";
-
-@customElement("ha-target-picker-item-group")
-export class HaTargetPickerItemGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetTypeFloorless;
-
-  @property({ attribute: false }) public items!: Partial<
-    Record<TargetType, string[]>
-  >;
-
-  @property({ type: Boolean, reflect: true }) public collapsed = false;
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /**
-   * Show only targets with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show only targets with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  protected render() {
-    let count = 0;
-    Object.values(this.items).forEach((items) => {
-      if (items) {
-        count += items.length;
-      }
-    });
-
-    return html`<ha-expansion-panel
-      .expanded=${!this.collapsed}
-      left-chevron
-      @expanded-changed=${this._expandedChanged}
-    >
-      <div slot="header" class="heading">
-        ${this.hass.localize(
-          `ui.components.target-picker.selected.${this.type}`,
-          {
-            count,
-          }
-        )}
-      </div>
-      ${Object.entries(this.items).map(([type, items]) =>
-        items
-          ? items.map(
-              (item) =>
-                html`<ha-target-picker-item-row
-                  .hass=${this.hass}
-                  .type=${type as TargetTypeFloorless}
-                  .itemId=${item}
-                  .deviceFilter=${this.deviceFilter}
-                  .entityFilter=${this.entityFilter}
-                  .includeDomains=${this.includeDomains}
-                  .includeDeviceClasses=${this.includeDeviceClasses}
-                ></ha-target-picker-item-row>`
-            )
-          : nothing
-      )}
-    </ha-expansion-panel>`;
-  }
-
-  private _expandedChanged(ev: CustomEvent) {
-    this.collapsed = !ev.detail.expanded;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      --expansion-panel-content-padding: var(--ha-space-0);
-    }
-    ha-expansion-panel::part(summary) {
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      font-weight: var(--ha-font-weight-bold);
-      color: var(--secondary-text-color);
-      display: flex;
-      justify-content: space-between;
-      min-height: unset;
-    }
-    ha-md-list {
-      padding: var(--ha-space-0);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-group": HaTargetPickerItemGroup;
-  }
-}
--- a/src/components/target-picker/ha-target-picker-item-row.ts
+++ b/src/components/target-picker/ha-target-picker-item-row.ts
@@ -1,724 +0,0 @@
-import { consume } from "@lit/context";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiLabel,
-  mdiTextureBox,
-} from "@mdi/js";
-import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import {
-  computeDeviceName,
-  computeDeviceNameDisplay,
-} from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityName } from "../../common/entity/compute_entity_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import { computeRTL } from "../../common/util/compute_rtl";
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import { getConfigEntry } from "../../data/config_entries";
-import { labelsContext } from "../../data/context";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import {
-  areaMeetsFilter,
-  deviceMeetsFilter,
-  entityRegMeetsFilter,
-  extractFromTarget,
-  type ExtractFromTargetResult,
-  type ExtractFromTargetResultReferenced,
-  type TargetType,
-} from "../../data/target";
-import { buttonLinkStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
-import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-icon-button";
-import "../ha-md-list";
-import type { HaMdList } from "../ha-md-list";
-import "../ha-md-list-item";
-import type { HaMdListItem } from "../ha-md-list-item";
-import "../ha-state-icon";
-import "../ha-svg-icon";
-import { showTargetDetailsDialog } from "./dialog/show-dialog-target-details";
-
-@customElement("ha-target-picker-item-row")
-export class HaTargetPickerItemRow extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ reflect: true }) public type!: TargetType;
-
-  @property({ attribute: "item-id" }) public itemId!: string;
-
-  @property({ type: Boolean }) public expand = false;
-
-  @property({ type: Boolean, attribute: "sub-entry", reflect: true })
-  public subEntry = false;
-
-  @property({ type: Boolean, attribute: "hide-context" })
-  public hideContext = false;
-
-  @property({ attribute: false })
-  public parentEntries?: ExtractFromTargetResultReferenced;
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /**
-   * Show only targets with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show only targets with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @state() private _iconImg?: string;
-
-  @state() private _domainName?: string;
-
-  @state() private _entries?: ExtractFromTargetResult;
-
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  _labelRegistry!: LabelRegistryEntry[];
-
-  @query("ha-md-list-item") public item?: HaMdListItem;
-
-  @query("ha-md-list") public list?: HaMdList;
-
-  @query("ha-target-picker-item-row") public itemRow?: HaTargetPickerItemRow;
-
-  protected willUpdate(changedProps: PropertyValues) {
-    if (!this.subEntry && changedProps.has("itemId")) {
-      this._updateItemData();
-    }
-  }
-
-  protected render() {
-    const { name, context, iconPath, fallbackIconPath, stateObject, notFound } =
-      this._itemData(this.type, this.itemId);
-
-    const showEntities = this.type !== "entity" && !notFound;
-
-    const entries = this.parentEntries || this._entries;
-
-    // Don't show sub entries that have no entities
-    if (
-      this.subEntry &&
-      this.type !== "entity" &&
-      (!entries || entries.referenced_entities.length === 0)
-    ) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-list-item type="text" class=${notFound ? "error" : ""}>
-        <div class="icon" slot="start">
-          ${this.subEntry
-            ? html`
-                <div class="horizontal-line-wrapper">
-                  <div class="horizontal-line"></div>
-                </div>
-              `
-            : nothing}
-          ${iconPath
-            ? html`<ha-icon .icon=${iconPath}></ha-icon>`
-            : this._iconImg
-              ? html`<img
-                  alt=${this._domainName || ""}
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${this._iconImg}
-                />`
-              : fallbackIconPath
-                ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
-                : this.type === "entity"
-                  ? html`
-                      <ha-state-icon
-                        .hass=${this.hass}
-                        .stateObj=${stateObject ||
-                        ({
-                          entity_id: this.itemId,
-                          attributes: {},
-                        } as HassEntity)}
-                      >
-                      </ha-state-icon>
-                    `
-                  : nothing}
-        </div>
-
-        <div slot="headline">${name}</div>
-        ${notFound || (context && !this.hideContext)
-          ? html`<span slot="supporting-text"
-              >${notFound
-                ? this.hass.localize(
-                    `ui.components.target-picker.${this.type}_not_found`
-                  )
-                : context}</span
-            >`
-          : nothing}
-        ${this._domainName && this.subEntry
-          ? html`<span slot="supporting-text" class="domain"
-              >${this._domainName}</span
-            >`
-          : nothing}
-        ${!this.subEntry && entries && showEntities
-          ? html`
-              <div slot="end" class="summary">
-                ${showEntities &&
-                !this.expand &&
-                entries?.referenced_entities.length
-                  ? html`<button class="main link" @click=${this._openDetails}>
-                      ${this.hass.localize(
-                        "ui.components.target-picker.entities_count",
-                        {
-                          count: entries?.referenced_entities.length,
-                        }
-                      )}
-                    </button>`
-                  : showEntities
-                    ? html`<span class="main">
-                        ${this.hass.localize(
-                          "ui.components.target-picker.entities_count",
-                          {
-                            count: entries?.referenced_entities.length,
-                          }
-                        )}
-                      </span>`
-                    : nothing}
-              </div>
-            `
-          : nothing}
-        ${!this.expand && !this.subEntry
-          ? html`
-              <ha-icon-button
-                .path=${mdiClose}
-                slot="end"
-                @click=${this._removeItem}
-              ></ha-icon-button>
-            `
-          : nothing}
-      </ha-md-list-item>
-      ${this.expand && entries && entries.referenced_entities
-        ? this._renderEntries()
-        : nothing}
-    `;
-  }
-
-  private _renderEntries() {
-    const entries = this.parentEntries || this._entries;
-
-    let nextType: TargetType =
-      this.type === "floor"
-        ? "area"
-        : this.type === "area"
-          ? "device"
-          : "entity";
-
-    if (this.type === "label") {
-      if (entries?.referenced_areas.length) {
-        nextType = "area";
-      } else if (entries?.referenced_devices.length) {
-        nextType = "device";
-      }
-    }
-
-    const rows1 =
-      (nextType === "area"
-        ? entries?.referenced_areas
-        : nextType === "device" && this.type !== "label"
-          ? entries?.referenced_devices
-          : this.type !== "label"
-            ? entries?.referenced_entities
-            : []) || [];
-
-    const devicesInAreas = [] as string[];
-
-    const rows1Entries =
-      nextType === "entity"
-        ? undefined
-        : rows1.map((rowItem) => {
-            const nextEntries = {
-              referenced_areas: [] as string[],
-              referenced_devices: [] as string[],
-              referenced_entities: [] as string[],
-            };
-
-            if (nextType === "area") {
-              nextEntries.referenced_devices =
-                entries?.referenced_devices.filter(
-                  (device_id) =>
-                    this.hass.devices?.[device_id]?.area_id === rowItem &&
-                    entries?.referenced_entities.some(
-                      (entity_id) =>
-                        this.hass.entities?.[entity_id]?.device_id === device_id
-                    )
-                ) || ([] as string[]);
-
-              devicesInAreas.push(...nextEntries.referenced_devices);
-
-              nextEntries.referenced_entities =
-                entries?.referenced_entities.filter((entity_id) => {
-                  const entity = this.hass.entities[entity_id];
-                  return (
-                    entity.area_id === rowItem ||
-                    !entity.device_id ||
-                    nextEntries.referenced_devices.includes(entity.device_id)
-                  );
-                }) || ([] as string[]);
-
-              return nextEntries;
-            }
-
-            nextEntries.referenced_entities =
-              entries?.referenced_entities.filter(
-                (entity_id) =>
-                  this.hass.entities?.[entity_id]?.device_id === rowItem
-              ) || ([] as string[]);
-
-            return nextEntries;
-          });
-
-    const entityRows =
-      this.type === "label" && entries
-        ? entries.referenced_entities.filter((entity_id) => {
-            const entity = this.hass.entities[entity_id];
-            return (
-              entity.labels.includes(this.itemId) &&
-              !entries.referenced_devices.includes(entity.device_id || "")
-            );
-          })
-        : nextType === "device" && entries
-          ? entries.referenced_entities.filter(
-              (entity_id) =>
-                this.hass.entities[entity_id].area_id === this.itemId
-            )
-          : [];
-
-    const deviceRows =
-      this.type === "label" && entries
-        ? entries.referenced_devices.filter(
-            (device_id) =>
-              !devicesInAreas.includes(device_id) &&
-              this.hass.devices[device_id].labels.includes(this.itemId)
-          )
-        : [];
-
-    const deviceRowsEntries =
-      deviceRows.length === 0
-        ? undefined
-        : deviceRows.map((device_id) => ({
-            referenced_areas: [] as string[],
-            referenced_devices: [] as string[],
-            referenced_entities:
-              entries?.referenced_entities.filter(
-                (entity_id) =>
-                  this.hass.entities?.[entity_id]?.device_id === device_id
-              ) || ([] as string[]),
-          }));
-
-    return html`
-      <div class="entries-tree">
-        <div class="line-wrapper">
-          <div class="line"></div>
-        </div>
-        <ha-md-list class="entries">
-          ${rows1.map(
-            (itemId, index) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                .type=${nextType}
-                .itemId=${itemId}
-                .parentEntries=${rows1Entries?.[index]}
-                .hideContext=${this.hideContext || this.type !== "label"}
-                expand
-              ></ha-target-picker-item-row>
-            `
-          )}
-          ${deviceRows.map(
-            (itemId, index) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="device"
-                .itemId=${itemId}
-                .parentEntries=${deviceRowsEntries?.[index]}
-                .hideContext=${this.hideContext || this.type !== "label"}
-                expand
-              ></ha-target-picker-item-row>
-            `
-          )}
-          ${entityRows.map(
-            (itemId) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="entity"
-                .itemId=${itemId}
-                .hideContext=${this.hideContext || this.type !== "label"}
-              ></ha-target-picker-item-row>
-            `
-          )}
-        </ha-md-list>
-      </div>
-    `;
-  }
-
-  private async _updateItemData() {
-    if (this.type === "entity") {
-      this._entries = undefined;
-      return;
-    }
-    try {
-      const entries = await extractFromTarget(this.hass, {
-        [`${this.type}_id`]: [this.itemId],
-      });
-
-      const hiddenAreaIds: string[] = [];
-      if (this.type === "floor" || this.type === "label") {
-        entries.referenced_areas = entries.referenced_areas.filter(
-          (area_id) => {
-            const area = this.hass.areas[area_id];
-            if (
-              (this.type === "floor" || area.labels.includes(this.itemId)) &&
-              areaMeetsFilter(
-                area,
-                this.hass.devices,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter
-              )
-            ) {
-              return true;
-            }
-
-            hiddenAreaIds.push(area_id);
-            return false;
-          }
-        );
-      }
-
-      const hiddenDeviceIds: string[] = [];
-      if (
-        this.type === "floor" ||
-        this.type === "area" ||
-        this.type === "label"
-      ) {
-        entries.referenced_devices = entries.referenced_devices.filter(
-          (device_id) => {
-            const device = this.hass.devices[device_id];
-            if (
-              !hiddenAreaIds.includes(device.area_id || "") &&
-              deviceMeetsFilter(
-                device,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter
-              )
-            ) {
-              return true;
-            }
-
-            hiddenDeviceIds.push(device_id);
-            return false;
-          }
-        );
-      }
-
-      entries.referenced_entities = entries.referenced_entities.filter(
-        (entity_id) => {
-          const entity = this.hass.entities[entity_id];
-          if (hiddenDeviceIds.includes(entity.device_id || "")) {
-            return false;
-          }
-          if (
-            (this.type === "area" && entity.area_id === this.itemId) ||
-            (this.type === "floor" &&
-              entity.area_id &&
-              entries.referenced_areas.includes(entity.area_id)) ||
-            (this.type === "label" && entity.labels.includes(this.itemId)) ||
-            entries.referenced_devices.includes(entity.device_id || "")
-          ) {
-            return entityRegMeetsFilter(
-              entity,
-              this.type === "label",
-              this.includeDomains,
-              this.includeDeviceClasses,
-              this.hass.states,
-              this.entityFilter
-            );
-          }
-          return false;
-        }
-      );
-
-      this._entries = entries;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to extract target", e);
-    }
-  }
-
-  private _itemData = memoizeOne((type: TargetType, item: string) => {
-    if (type === "floor") {
-      const floor: FloorRegistryEntry | undefined = this.hass.floors?.[item];
-      return {
-        name: floor?.name || item,
-        iconPath: floor?.icon,
-        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
-        notFound: !floor,
-      };
-    }
-    if (type === "area") {
-      const area: AreaRegistryEntry | undefined = this.hass.areas?.[item];
-      return {
-        name: area?.name || item,
-        context: area?.floor_id && this.hass.floors?.[area.floor_id]?.name,
-        iconPath: area?.icon,
-        fallbackIconPath: mdiTextureBox,
-        notFound: !area,
-      };
-    }
-    if (type === "device") {
-      const device: DeviceRegistryEntry | undefined = this.hass.devices?.[item];
-
-      if (device?.primary_config_entry) {
-        this._getDeviceDomain(device.primary_config_entry);
-      }
-
-      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
-        context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
-        fallbackIconPath: mdiDevices,
-        notFound: !device,
-      };
-    }
-    if (type === "entity") {
-      this._setDomainName(computeDomain(item));
-
-      const stateObject: HassEntity | undefined = this.hass.states[item];
-      const entityName = stateObject
-        ? computeEntityName(stateObject, this.hass.entities, this.hass.devices)
-        : item;
-      const { area, device } = stateObject
-        ? getEntityContext(
-            stateObject,
-            this.hass.entities,
-            this.hass.devices,
-            this.hass.areas,
-            this.hass.floors
-          )
-        : { area: undefined, device: undefined };
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
-      const context = [areaName, entityName ? deviceName : undefined]
-        .filter(Boolean)
-        .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
-      return {
-        name: entityName || deviceName || item,
-        context,
-        stateObject,
-        notFound: !stateObject,
-      };
-    }
-
-    // type label
-    const label: LabelRegistryEntry | undefined = this._labelRegistry.find(
-      (lab) => lab.label_id === item
-    );
-    return {
-      name: label?.name || item,
-      iconPath: label?.icon,
-      fallbackIconPath: mdiLabel,
-      notFound: !label,
-    };
-  });
-
-  private _setDomainName(domain: string) {
-    this._domainName = domainToName(this.hass.localize, domain);
-  }
-
-  private _removeItem(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "remove-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  private async _getDeviceDomain(configEntryId: string) {
-    try {
-      const data = await getConfigEntry(this.hass, configEntryId);
-      const domain = data.config_entry.domain;
-      this._iconImg = brandsUrl({
-        domain: domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-
-      this._setDomainName(domain);
-    } catch {
-      // failed to load config entry -> ignore
-    }
-  }
-
-  private _openDetails() {
-    showTargetDetailsDialog(this, {
-      title: this._itemData(this.type, this.itemId).name,
-      type: this.type,
-      itemId: this.itemId,
-      deviceFilter: this.deviceFilter,
-      entityFilter: this.entityFilter,
-      includeDomains: this.includeDomains,
-      includeDeviceClasses: this.includeDeviceClasses,
-    });
-  }
-
-  static styles = [
-    buttonLinkStyle,
-    css`
-      :host {
-        --md-list-item-top-space: var(--ha-space-0);
-        --md-list-item-bottom-space: var(--ha-space-0);
-        --md-list-item-leading-space: var(--ha-space-2);
-        --md-list-item-trailing-space: var(--ha-space-2);
-        --md-list-item-two-line-container-height: 56px;
-      }
-
-      :host([expand]:not([sub-entry])) ha-md-list-item {
-        border: 2px solid var(--ha-color-border-neutral-loud);
-        background-color: var(--ha-color-fill-neutral-quiet-resting);
-        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-      }
-
-      .error {
-        background: var(--ha-color-fill-warning-quiet-resting);
-      }
-
-      .error [slot="supporting-text"] {
-        color: var(--ha-color-on-warning-normal);
-      }
-
-      state-badge {
-        color: var(--ha-color-on-neutral-quiet);
-      }
-
-      .icon {
-        width: 24px;
-        display: flex;
-      }
-
-      img {
-        width: 24px;
-        height: 24px;
-      }
-      ha-icon-button {
-        --mdc-icon-button-size: 32px;
-      }
-      .summary {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        line-height: var(--ha-line-height-condensed);
-      }
-      :host([sub-entry]) .summary {
-        margin-right: var(--ha-space-12);
-      }
-      .summary .main {
-        font-weight: var(--ha-font-weight-medium);
-      }
-      .summary .secondary {
-        font-size: var(--ha-font-size-s);
-        color: var(--secondary-text-color);
-      }
-
-      .entries-tree {
-        display: flex;
-        position: relative;
-      }
-
-      .entries-tree .line-wrapper {
-        padding: var(--ha-space-5);
-      }
-
-      .entries-tree .line-wrapper .line {
-        border-left: 2px dashed var(--divider-color);
-        height: calc(100% - 28px);
-        position: absolute;
-        top: 0;
-      }
-
-      :host([sub-entry]) .entries-tree .line-wrapper .line {
-        height: calc(100% - 12px);
-        top: -18px;
-      }
-
-      .entries {
-        padding: 0;
-        --md-item-overflow: visible;
-      }
-
-      .horizontal-line-wrapper {
-        position: relative;
-      }
-      .horizontal-line-wrapper .horizontal-line {
-        position: absolute;
-        top: 11px;
-        margin-inline-start: -28px;
-        width: 29px;
-        border-top: 2px dashed var(--divider-color);
-      }
-
-      button.link {
-        text-decoration: none;
-        color: var(--primary-color);
-      }
-
-      button.link:hover,
-      button.link:focus {
-        text-decoration: underline;
-      }
-
-      .domain {
-        width: fit-content;
-        border-radius: var(--ha-border-radius-md);
-        background-color: var(--ha-color-fill-neutral-quiet-resting);
-        padding: var(--ha-space-1);
-        font-family: var(--ha-font-family-code);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-row": HaTargetPickerItemRow;
-  }
-}
--- a/src/components/target-picker/ha-target-picker-selector.ts
+++ b/src/components/target-picker/ha-target-picker-selector.ts
--- a/src/components/target-picker/ha-target-picker-value-chip.ts
+++ b/src/components/target-picker/ha-target-picker-value-chip.ts
@@ -1,338 +0,0 @@
-import { consume } from "@lit/context";
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiLabel,
-  mdiTextureBox,
-  mdiUnfoldMoreVertical,
-} from "@mdi/js";
-import { css, html, LitElement, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import { computeCssColor } from "../../common/color/compute-color";
-import { hex2rgb } from "../../common/color/convert-color";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { slugify } from "../../common/string/slugify";
-import { getConfigEntry } from "../../data/config_entries";
-import { labelsContext } from "../../data/context";
-import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import type { TargetType } from "../../data/target";
-import type { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-icon";
-import "../ha-icon-button";
-import "../ha-md-list";
-import "../ha-md-list-item";
-import "../ha-state-icon";
-import "../ha-tooltip";
-
-@customElement("ha-target-picker-value-chip")
-export class HaTargetPickerValueChip extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetType;
-
-  @property({ attribute: "item-id" }) public itemId!: string;
-
-  @state() private _domainName?: string;
-
-  @state() private _iconImg?: string;
-
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  _labelRegistry!: LabelRegistryEntry[];
-
-  protected render() {
-    const { name, iconPath, fallbackIconPath, stateObject, color } =
-      this._itemData(this.type, this.itemId);
-
-    return html`
-      <div
-        class="mdc-chip ${classMap({
-          [this.type]: true,
-        })}"
-        style=${color
-          ? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
-          : ""}
-      >
-        ${iconPath
-          ? html`<ha-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .icon=${iconPath}
-            ></ha-icon>`
-          : this._iconImg
-            ? html`<img
-                class="mdc-chip__icon mdc-chip__icon--leading"
-                alt=${this._domainName || ""}
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${this._iconImg}
-              />`
-            : fallbackIconPath
-              ? html`<ha-svg-icon
-                  class="mdc-chip__icon mdc-chip__icon--leading"
-                  .path=${fallbackIconPath}
-                ></ha-svg-icon>`
-              : stateObject
-                ? html`<ha-state-icon
-                    class="mdc-chip__icon mdc-chip__icon--leading"
-                    .hass=${this.hass}
-                    .stateObj=${stateObject}
-                  ></ha-state-icon>`
-                : nothing}
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span id="title-${this.itemId}" class="mdc-chip__text"
-              >${name}</span
-            >
-          </span>
-        </span>
-        ${this.type === "entity"
-          ? nothing
-          : html`<span role="gridcell">
-              <ha-tooltip .for="expand-${slugify(this.itemId)}"
-                >${this.hass.localize(
-                  `ui.components.target-picker.expand_${this.type}_id`
-                )}
-              </ha-tooltip>
-              <ha-icon-button
-                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                .label=${this.hass.localize(
-                  "ui.components.target-picker.expand"
-                )}
-                .path=${mdiUnfoldMoreVertical}
-                hide-title
-                .id="expand-${slugify(this.itemId)}"
-                .type=${this.type}
-                @click=${this._handleExpand}
-              ></ha-icon-button>
-            </span>`}
-        <span role="gridcell">
-          <ha-tooltip .for="remove-${slugify(this.itemId)}">
-            ${this.hass.localize(
-              `ui.components.target-picker.remove_${this.type}_id`
-            )}
-          </ha-tooltip>
-          <ha-icon-button
-            class="mdc-chip__icon mdc-chip__icon--trailing"
-            .label=${this.hass.localize("ui.components.target-picker.remove")}
-            .path=${mdiClose}
-            hide-title
-            .id="remove-${slugify(this.itemId)}"
-            .type=${this.type}
-            @click=${this._removeItem}
-          ></ha-icon-button>
-        </span>
-      </div>
-    `;
-  }
-
-  private _itemData = memoizeOne((type: TargetType, itemId: string) => {
-    if (type === "floor") {
-      const floor = this.hass.floors?.[itemId];
-      return {
-        name: floor?.name || itemId,
-        iconPath: floor?.icon,
-        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
-      };
-    }
-    if (type === "area") {
-      const area = this.hass.areas?.[itemId];
-      return {
-        name: area?.name || itemId,
-        iconPath: area?.icon,
-        fallbackIconPath: mdiTextureBox,
-      };
-    }
-    if (type === "device") {
-      const device = this.hass.devices?.[itemId];
-
-      if (device.primary_config_entry) {
-        this._getDeviceDomain(device.primary_config_entry);
-      }
-
-      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
-        fallbackIconPath: mdiDevices,
-      };
-    }
-    if (type === "entity") {
-      this._setDomainName(computeDomain(itemId));
-
-      const stateObj = this.hass.states[itemId];
-      return {
-        name: computeStateName(stateObj) || itemId,
-        stateObject: stateObj,
-      };
-    }
-
-    // type label
-    const label = this._labelRegistry.find((lab) => lab.label_id === itemId);
-    let color = label?.color ? computeCssColor(label.color) : undefined;
-    if (color?.startsWith("var(")) {
-      const computedStyles = getComputedStyle(this);
-      color = computedStyles.getPropertyValue(
-        color.substring(4, color.length - 1)
-      );
-    }
-    if (color?.startsWith("#")) {
-      color = hex2rgb(color).join(",");
-    }
-    return {
-      name: label?.name || itemId,
-      iconPath: label?.icon,
-      fallbackIconPath: mdiLabel,
-      color,
-    };
-  });
-
-  private _setDomainName(domain: string) {
-    this._domainName = domainToName(this.hass.localize, domain);
-  }
-
-  private async _getDeviceDomain(configEntryId: string) {
-    try {
-      const data = await getConfigEntry(this.hass, configEntryId);
-      const domain = data.config_entry.domain;
-      this._iconImg = brandsUrl({
-        domain: domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-
-      this._setDomainName(domain);
-    } catch {
-      // failed to load config entry -> ignore
-    }
-  }
-
-  private _removeItem(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "remove-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  private _handleExpand(ev) {
-    ev.stopPropagation();
-    fireEvent(this, "expand-target-item", {
-      type: this.type,
-      id: this.itemId,
-    });
-  }
-
-  static styles = css`
-    ${unsafeCSS(chipStyles)}
-    .mdc-chip {
-      color: var(--primary-text-color);
-    }
-    .mdc-chip.add {
-      color: rgba(0, 0, 0, 0.87);
-    }
-    .add-container {
-      position: relative;
-      display: inline-flex;
-    }
-    .mdc-chip:not(.add) {
-      cursor: default;
-    }
-    .mdc-chip ha-icon-button {
-      --mdc-icon-button-size: 24px;
-      display: flex;
-      align-items: center;
-      outline: none;
-    }
-    .mdc-chip ha-icon-button ha-svg-icon {
-      border-radius: 50%;
-      background: var(--secondary-text-color);
-    }
-    .mdc-chip__icon.mdc-chip__icon--trailing {
-      width: var(--ha-space-4);
-      height: var(--ha-space-4);
-      --mdc-icon-size: 14px;
-      color: var(--secondary-text-color);
-      margin-inline-start: var(--ha-space-1) !important;
-      margin-inline-end: calc(-1 * var(--ha-space-1)) !important;
-      direction: var(--direction);
-    }
-    .mdc-chip__icon--leading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --mdc-icon-size: 20px;
-      border-radius: var(--ha-border-radius-circle);
-      padding: 6px;
-      margin-left: -13px !important;
-      margin-inline-start: -13px !important;
-      margin-inline-end: var(--ha-space-1) !important;
-      direction: var(--direction);
-    }
-    .expand-btn {
-      margin-right: var(--ha-space-0);
-      margin-inline-end: var(--ha-space-0);
-      margin-inline-start: initial;
-    }
-    .mdc-chip.area:not(.add),
-    .mdc-chip.floor:not(.add) {
-      border: 1px solid #fed6a4;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.area:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.area.add,
-    .mdc-chip.floor:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.floor.add {
-      background: #fed6a4;
-    }
-    .mdc-chip.device:not(.add) {
-      border: 1px solid #a8e1fb;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.device:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.device.add {
-      background: #a8e1fb;
-    }
-    .mdc-chip.entity:not(.add) {
-      border: 1px solid #d2e7b9;
-      background: var(--card-background-color);
-    }
-    .mdc-chip.entity:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.entity.add {
-      background: #d2e7b9;
-    }
-    .mdc-chip.label:not(.add) {
-      border: 1px solid var(--color, #e0e0e0);
-      background: var(--card-background-color);
-    }
-    .mdc-chip.label:not(.add) .mdc-chip__icon--leading,
-    .mdc-chip.label.add {
-      background: var(--background-color, #e0e0e0);
-    }
-    .mdc-chip:hover {
-      z-index: 5;
-    }
-    :host([disabled]) .mdc-chip {
-      opacity: var(--light-disabled-opacity);
-      pointer-events: none;
-    }
-    .tooltip-icon-img {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-value-chip": HaTargetPickerValueChip;
-  }
-}
--- a/src/data/action.ts
+++ b/src/data/action.ts
@@ -6,6 +6,8 @@ import {
  mdiCallSplit,
  mdiCodeBraces,
  mdiDevices,
+  mdiDotsHorizontal,
+  mdiExcavator,
  mdiFormatListNumbered,
  mdiGestureDoubleTap,
  mdiHandBackRight,
@@ -14,10 +16,10 @@ import {
  mdiRoomService,
  mdiShuffleDisabled,
  mdiTimerOutline,
+  mdiTools,
  mdiTrafficLight,
 } from "@mdi/js";
-import type { AutomationElementGroupCollection } from "./automation";
-import type { Action } from "./script";
+import type { AutomationElementGroup } from "./automation";

 export const ACTION_ICONS = {
  condition: mdiAbTesting,
@@ -46,73 +48,37 @@ export const YAML_ONLY_ACTION_TYPES = new Set<keyof typeof ACTION_ICONS>([
  "variables",
 ]);

-export const ACTION_COLLECTIONS: AutomationElementGroupCollection[] = [
-  {
-    groups: {
-      device_id: {},
-      serviceGroups: {},
+export const ACTION_GROUPS: AutomationElementGroup = {
+  device_id: {},
+  helpers: {
+    icon: mdiTools,
+    members: {},
+  },
+  building_blocks: {
+    icon: mdiExcavator,
+    members: {
+      condition: {},
+      delay: {},
+      wait_template: {},
+      wait_for_trigger: {},
+      repeat_count: {},
+      repeat_while: {},
+      repeat_until: {},
+      repeat_for_each: {},
+      choose: {},
+      if: {},
+      stop: {},
+      sequence: {},
+      parallel: {},
+      variables: {},
    },
  },
-  {
-    titleKey: "ui.panel.config.automation.editor.actions.groups.helpers.label",
-    groups: {
-      helpers: {},
-    },
-  },
-  {
-    titleKey: "ui.panel.config.automation.editor.actions.groups.other.label",
-    groups: {
+  other: {
+    icon: mdiDotsHorizontal,
+    members: {
      event: {},
      service: {},
      set_conversation_response: {},
-      other: {},
-    },
-  },
-] as const;
-
-export const ACTION_BUILDING_BLOCKS_GROUP = {
-  condition: {},
-  delay: {},
-  wait_template: {},
-  wait_for_trigger: {},
-  repeat_count: {},
-  repeat_while: {},
-  repeat_until: {},
-  repeat_for_each: {},
-  choose: {},
-  if: {},
-  stop: {},
-  sequence: {},
-  parallel: {},
-  variables: {},
-};
-
-// These will be replaced with the correct action
-export const VIRTUAL_ACTIONS: Partial<
-  Record<keyof typeof ACTION_BUILDING_BLOCKS_GROUP, Action>
-> = {
-  repeat_count: {
-    repeat: {
-      count: 2,
-      sequence: [],
-    },
-  },
-  repeat_while: {
-    repeat: {
-      while: [],
-      sequence: [],
-    },
-  },
-  repeat_until: {
-    repeat: {
-      until: [],
-      sequence: [],
-    },
-  },
-  repeat_for_each: {
-    repeat: {
-      for_each: {},
-      sequence: [],
    },
  },
 } as const;
--- a/src/data/area_floor.ts
+++ b/src/data/area_floor.ts
@@ -1,260 +0,0 @@
-import { computeAreaName } from "../common/entity/compute_area_name";
-import { computeDomain } from "../common/entity/compute_domain";
-import { computeFloorName } from "../common/entity/compute_floor_name";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
-import type { HomeAssistant } from "../types";
-import type { AreaRegistryEntry } from "./area_registry";
-import {
-  getDeviceEntityDisplayLookup,
-  type DeviceEntityDisplayLookup,
-  type DeviceRegistryEntry,
-} from "./device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import {
-  floorCompare,
-  getFloorAreaLookup,
-  type FloorRegistryEntry,
-} from "./floor_registry";
-
-export interface FloorComboBoxItem extends PickerComboBoxItem {
-  type: "floor" | "area";
-  floor?: FloorRegistryEntry;
-  area?: AreaRegistryEntry;
-}
-
-export interface AreaFloorValue {
-  id: string;
-  type: "floor" | "area";
-}
-
-export const getAreasAndFloors = (
-  states: HomeAssistant["states"],
-  haFloors: HomeAssistant["floors"],
-  haAreas: HomeAssistant["areas"],
-  haDevices: HomeAssistant["devices"],
-  haEntities: HomeAssistant["entities"],
-  formatId: (value: AreaFloorValue) => string,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeAreas?: string[],
-  excludeFloors?: string[]
-): FloorComboBoxItem[] => {
-  const floors = Object.values(haFloors);
-  const areas = Object.values(haAreas);
-  const devices = Object.values(haDevices);
-  const entities = Object.values(haEntities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-  let inputDevices: DeviceRegistryEntry[] | undefined;
-  let inputEntities: EntityRegistryDisplayEntry[] | undefined;
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    deviceFilter ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-    inputDevices = devices;
-    inputEntities = entities.filter((entity) => entity.area_id);
-
-    if (includeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) =>
-          includeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter((entity) =>
-        includeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (excludeDomains) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return true;
-        }
-        return entities.every(
-          (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-        );
-      });
-      inputEntities = inputEntities!.filter(
-        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-      );
-    }
-
-    if (includeDeviceClasses) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return (
-            stateObj.attributes.device_class &&
-            includeDeviceClasses.includes(stateObj.attributes.device_class)
-          );
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = states[entity.entity_id];
-        return (
-          stateObj.attributes.device_class &&
-          includeDeviceClasses.includes(stateObj.attributes.device_class)
-        );
-      });
-    }
-
-    if (deviceFilter) {
-      inputDevices = inputDevices!.filter((device) => deviceFilter!(device));
-    }
-
-    if (entityFilter) {
-      inputDevices = inputDevices!.filter((device) => {
-        const devEntities = deviceEntityLookup[device.id];
-        if (!devEntities || !devEntities.length) {
-          return false;
-        }
-        return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return entityFilter(stateObj);
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return entityFilter!(stateObj);
-      });
-    }
-  }
-
-  let outputAreas = areas;
-
-  let areaIds: string[] | undefined;
-
-  if (inputDevices) {
-    areaIds = inputDevices
-      .filter((device) => device.area_id)
-      .map((device) => device.area_id!);
-  }
-
-  if (inputEntities) {
-    areaIds = (areaIds ?? []).concat(
-      inputEntities
-        .filter((entity) => entity.area_id)
-        .map((entity) => entity.area_id!)
-    );
-  }
-
-  if (areaIds) {
-    outputAreas = outputAreas.filter((area) => areaIds!.includes(area.area_id));
-  }
-
-  if (excludeAreas) {
-    outputAreas = outputAreas.filter(
-      (area) => !excludeAreas!.includes(area.area_id)
-    );
-  }
-
-  if (excludeFloors) {
-    outputAreas = outputAreas.filter(
-      (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
-    );
-  }
-
-  const floorAreaLookup = getFloorAreaLookup(outputAreas);
-  const unassignedAreas = Object.values(outputAreas).filter(
-    (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-  );
-
-  const compare = floorCompare(haFloors);
-
-  // @ts-ignore
-  const floorAreaEntries: [
-    FloorRegistryEntry | undefined,
-    AreaRegistryEntry[],
-  ][] = Object.entries(floorAreaLookup)
-    .map(([floorId, floorAreas]) => {
-      const floor = floors.find((fl) => fl.floor_id === floorId)!;
-      return [floor, floorAreas] as const;
-    })
-    .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
-
-  const items: FloorComboBoxItem[] = [];
-
-  floorAreaEntries.forEach(([floor, floorAreas]) => {
-    if (floor) {
-      const floorName = computeFloorName(floor);
-
-      const areaSearchLabels = floorAreas
-        .map((area) => {
-          const areaName = computeAreaName(area) || area.area_id;
-          return [area.area_id, areaName, ...area.aliases];
-        })
-        .flat();
-
-      items.push({
-        id: formatId({ id: floor.floor_id, type: "floor" }),
-        type: "floor",
-        primary: floorName,
-        floor: floor,
-        icon: floor.icon || undefined,
-        search_labels: [
-          floor.floor_id,
-          floorName,
-          ...floor.aliases,
-          ...areaSearchLabels,
-        ],
-      });
-    }
-    items.push(
-      ...floorAreas.map((area) => {
-        const areaName = computeAreaName(area) || area.area_id;
-        return {
-          id: formatId({ id: area.area_id, type: "area" }),
-          type: "area" as const,
-          primary: areaName,
-          area: area,
-          icon: area.icon || undefined,
-          search_labels: [area.area_id, areaName, ...area.aliases],
-        };
-      })
-    );
-  });
-
-  items.push(
-    ...unassignedAreas.map((area) => {
-      const areaName = computeAreaName(area) || area.area_id;
-      return {
-        id: formatId({ id: area.area_id, type: "area" }),
-        type: "area" as const,
-        primary: areaName,
-        area: area,
-        icon: area.icon || undefined,
-        search_labels: [area.area_id, areaName, ...area.aliases],
-      };
-    })
-  );
-
-  return items;
-};
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -4,7 +4,6 @@ import type {
 } from "home-assistant-js-websocket";
 import { ensureArray } from "../common/array/ensure-array";
 import { navigate } from "../common/navigate";
-import type { LocalizeKeys } from "../common/translations/localize";
 import { createSearchParam } from "../common/url/search-params";
 import type { Context, HomeAssistant } from "../types";
 import type { BlueprintInput } from "./blueprint";
@@ -294,11 +293,6 @@ export interface ShorthandNotCondition extends ShorthandBaseCondition {
  not: Condition[];
 }

-export interface AutomationElementGroupCollection {
-  titleKey?: LocalizeKeys;
-  groups: AutomationElementGroup;
-}
-
 export type AutomationElementGroup = Record<
  string,
  { icon?: string; members?: AutomationElementGroup }
--- a/src/data/condition.ts
+++ b/src/data/condition.ts
@@ -3,6 +3,8 @@ import {
  mdiClockOutline,
  mdiCodeBraces,
  mdiDevices,
+  mdiDotsHorizontal,
+  mdiExcavator,
  mdiGateOr,
  mdiIdentifier,
  mdiMapClock,
@@ -13,7 +15,7 @@ import {
  mdiStateMachine,
  mdiWeatherSunny,
 } from "@mdi/js";
-import type { AutomationElementGroupCollection } from "./automation";
+import type { AutomationElementGroup } from "./automation";

 export const CONDITION_ICONS = {
  device: mdiDevices,
@@ -29,31 +31,25 @@ export const CONDITION_ICONS = {
  zone: mdiMapMarkerRadius,
 };

-export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
-  {
-    groups: {
-      device: {},
-      entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
-      time_location: {
-        icon: mdiMapClock,
-        members: { sun: {}, time: {}, zone: {} },
-      },
-    },
+export const CONDITION_GROUPS: AutomationElementGroup = {
+  device: {},
+  entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
+  time_location: {
+    icon: mdiMapClock,
+    members: { sun: {}, time: {}, zone: {} },
  },
-  {
-    titleKey: "ui.panel.config.automation.editor.conditions.groups.other.label",
-    groups: {
+  building_blocks: {
+    icon: mdiExcavator,
+    members: { and: {}, or: {}, not: {} },
+  },
+  other: {
+    icon: mdiDotsHorizontal,
+    members: {
      template: {},
      trigger: {},
    },
  },
-] as const;
-
-export const CONDITION_BUILDING_BLOCKS_GROUP = {
-  and: {},
-  or: {},
-  not: {},
-};
+} as const;

 export const CONDITION_BUILDING_BLOCKS = ["and", "or", "not"];

--- a/src/data/data_entry_flow.ts
+++ b/src/data/data_entry_flow.ts
@@ -79,7 +79,6 @@ export interface DataEntryFlowStepAbort {
  reason: string;
  description_placeholders?: Record<string, string>;
  translation_domain?: string;
-  next_flow?: [FlowType, string]; // [flow_type, flow_id]
 }

 export interface DataEntryFlowStepProgress {
--- a/src/data/device_registry.ts
+++ b/src/data/device_registry.ts
@@ -1,20 +1,12 @@
-import { computeAreaName } from "../common/entity/compute_area_name";
-import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
-import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
-import { getDeviceContext } from "../common/entity/context/get_device_context";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
 import type { ConfigEntry } from "./config_entries";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type {
  EntityRegistryDisplayEntry,
  EntityRegistryEntry,
 } from "./entity_registry";
 import type { EntitySources } from "./entity_sources";
-import { domainToName } from "./integration";
 import type { RegistryEntry } from "./registry";

 export {
@@ -171,147 +163,3 @@ export const getDeviceIntegrationLookup = (
  }
  return deviceIntegrations;
 };
-
-export interface DevicePickerItem extends PickerComboBoxItem {
-  domain?: string;
-  domain_name?: string;
-}
-
-export const getDevices = (
-  hass: HomeAssistant,
-  configEntryLookup: Record<string, ConfigEntry>,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeDevices?: string[],
-  value?: string
-): DevicePickerItem[] => {
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-  }
-
-  let inputDevices = devices.filter(
-    (device) => device.id === value || !device.disabled_by
-  );
-
-  if (includeDomains) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return deviceEntityLookup[device.id].some((entity) =>
-        includeDomains.includes(computeDomain(entity.entity_id))
-      );
-    });
-  }
-
-  if (excludeDomains) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return true;
-      }
-      return entities.every(
-        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-      );
-    });
-  }
-
-  if (excludeDevices) {
-    inputDevices = inputDevices.filter(
-      (device) => !excludeDevices!.includes(device.id)
-    );
-  }
-
-  if (includeDeviceClasses) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return deviceEntityLookup[device.id].some((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return (
-          stateObj.attributes.device_class &&
-          includeDeviceClasses.includes(stateObj.attributes.device_class)
-        );
-      });
-    });
-  }
-
-  if (entityFilter) {
-    inputDevices = inputDevices.filter((device) => {
-      const devEntities = deviceEntityLookup[device.id];
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      return devEntities.some((entity) => {
-        const stateObj = hass.states[entity.entity_id];
-        if (!stateObj) {
-          return false;
-        }
-        return entityFilter(stateObj);
-      });
-    });
-  }
-
-  if (deviceFilter) {
-    inputDevices = inputDevices.filter(
-      (device) =>
-        // We always want to include the device of the current value
-        device.id === value || deviceFilter!(device)
-    );
-  }
-
-  const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
-    const deviceName = computeDeviceNameDisplay(
-      device,
-      hass,
-      deviceEntityLookup[device.id]
-    );
-
-    const { area } = getDeviceContext(device, hass);
-
-    const areaName = area ? computeAreaName(area) : undefined;
-
-    const configEntry = device.primary_config_entry
-      ? configEntryLookup?.[device.primary_config_entry]
-      : undefined;
-
-    const domain = configEntry?.domain;
-    const domainName = domain ? domainToName(hass.localize, domain) : undefined;
-
-    return {
-      id: device.id,
-      label: "",
-      primary:
-        deviceName ||
-        hass.localize("ui.components.device-picker.unnamed_device"),
-      secondary: areaName,
-      domain: configEntry?.domain,
-      domain_name: domainName,
-      search_labels: [deviceName, areaName, domain, domainName].filter(
-        Boolean
-      ) as string[],
-      sorting_label: deviceName || "zzz",
-    };
-  });
-
-  return outputDevices;
-};
--- a/src/data/entity.ts
+++ b/src/data/entity.ts
@@ -1,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { arrayLiteralIncludes } from "../common/array/literal-includes";

 export const UNAVAILABLE = "unavailable";
@@ -11,5 +10,3 @@ export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;

 export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
 export const isOffState = arrayLiteralIncludes(OFF_STATES);
-
-export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -1,17 +1,12 @@
-import type { Connection, HassEntity } from "home-assistant-js-websocket";
+import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeEntityNameList } from "../common/entity/compute_entity_name_display";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import { computeRTL } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import { domainToName } from "./integration";
 import type { LightColor } from "./light";
 import type { RegistryEntry } from "./registry";

@@ -329,122 +324,3 @@ export const getAutomaticEntityIds = (
    type: "config/entity_registry/get_automatic_entity_ids",
    entity_ids,
  });
-
-export interface EntityComboBoxItem extends PickerComboBoxItem {
-  domain_name?: string;
-  stateObj?: HassEntity;
-}
-
-export const getEntities = (
-  hass: HomeAssistant,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  includeDeviceClasses?: string[],
-  includeUnitOfMeasurement?: string[],
-  includeEntities?: string[],
-  excludeEntities?: string[],
-  value?: string
-): EntityComboBoxItem[] => {
-  let items: EntityComboBoxItem[] = [];
-
-  let entityIds = Object.keys(hass.states);
-
-  if (includeEntities) {
-    entityIds = entityIds.filter((entityId) =>
-      includeEntities.includes(entityId)
-    );
-  }
-
-  if (excludeEntities) {
-    entityIds = entityIds.filter(
-      (entityId) => !excludeEntities.includes(entityId)
-    );
-  }
-
-  if (includeDomains) {
-    entityIds = entityIds.filter((eid) =>
-      includeDomains.includes(computeDomain(eid))
-    );
-  }
-
-  if (excludeDomains) {
-    entityIds = entityIds.filter(
-      (eid) => !excludeDomains.includes(computeDomain(eid))
-    );
-  }
-
-  items = entityIds.map<EntityComboBoxItem>((entityId) => {
-    const stateObj = hass.states[entityId];
-
-    const friendlyName = computeStateName(stateObj); // Keep this for search
-    const [entityName, deviceName, areaName] = computeEntityNameList(
-      stateObj,
-      [{ type: "entity" }, { type: "device" }, { type: "area" }],
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
-
-    const domainName = domainToName(hass.localize, computeDomain(entityId));
-
-    const isRTL = computeRTL(hass);
-
-    const primary = entityName || deviceName || entityId;
-    const secondary = [areaName, entityName ? deviceName : undefined]
-      .filter(Boolean)
-      .join(isRTL ? " ◂ " : " ▸ ");
-    const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
-
-    return {
-      id: entityId,
-      primary: primary,
-      secondary: secondary,
-      domain_name: domainName,
-      sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
-      search_labels: [
-        entityName,
-        deviceName,
-        areaName,
-        domainName,
-        friendlyName,
-        entityId,
-      ].filter(Boolean) as string[],
-      a11y_label: a11yLabel,
-      stateObj: stateObj,
-    };
-  });
-
-  if (includeDeviceClasses) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value ||
-        (item.stateObj?.attributes.device_class &&
-          includeDeviceClasses.includes(item.stateObj.attributes.device_class))
-    );
-  }
-
-  if (includeUnitOfMeasurement) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value ||
-        (item.stateObj?.attributes.unit_of_measurement &&
-          includeUnitOfMeasurement.includes(
-            item.stateObj.attributes.unit_of_measurement
-          ))
-    );
-  }
-
-  if (entityFilter) {
-    items = items.filter(
-      (item) =>
-        // We always want to include the entity of the current value
-        item.id === value || (item.stateObj && entityFilter!(item.stateObj))
-    );
-  }
-
-  return items;
-};
--- a/src/data/error_log.ts
+++ b/src/data/error_log.ts
@@ -1,5 +1,3 @@
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { atLeastVersion } from "../common/config/version";
 import type { HomeAssistant } from "../types";

 export interface LogProvider {
@@ -10,8 +8,4 @@ export interface LogProvider {
 export const fetchErrorLog = (hass: HomeAssistant) =>
  hass.callApi<string>("GET", "error_log");

-export const getErrorLogDownloadUrl = (hass: HomeAssistant) =>
-  isComponentLoaded(hass, "hassio") &&
-  atLeastVersion(hass.config.version, 2025, 10)
-    ? "/api/hassio/core/logs/latest"
-    : "/api/error_log";
+export const getErrorLogDownloadUrl = "/api/error_log";
--- a/src/data/floor_registry.ts
+++ b/src/data/floor_registry.ts
@@ -68,18 +68,13 @@ export const getFloorAreaLookup = (
 };

 export const floorCompare =
-  (entries?: HomeAssistant["floors"], order?: string[]) =>
+  (entries?: FloorRegistryEntry[], order?: string[]) =>
  (a: string, b: string) => {
    const indexA = order ? order.indexOf(a) : -1;
    const indexB = order ? order.indexOf(b) : -1;
    if (indexA === -1 && indexB === -1) {
-      const floorA = entries?.[a];
-      const floorB = entries?.[b];
-      if (floorA && floorB && floorA.level !== floorB.level) {
-        return (floorB.level ?? -9999) - (floorA.level ?? -9999);
-      }
-      const nameA = floorA?.name ?? a;
-      const nameB = floorB?.name ?? b;
+      const nameA = entries?.[a]?.name ?? a;
+      const nameB = entries?.[b]?.name ?? b;
      return stringCompare(nameA, nameB);
    }
    if (indexA === -1) {
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .21.1
 .20.0
				`@@ -1 +0,0 @@`
				`export const ANY_STATE_VALUE = "__ANY_STATE_IGNORE_ATTRIBUTES__";`