Merge branch 'dev' of github.com:home-assistant/frontend into automation-editor-path-undo

# Conflicts: # src/panels/config/automation/trigger/ha-automation-trigger-row.ts
Update dependency @rspack/core to v2.3.1 (#55703 )
2026-11-07 21:45:16 +00:00 · 2026-11-06 11:23:28 +01:00 · 2026-11-06 10:02:58 +00:00 · 2026-11-06 12:00:52 +02:00 · 2026-11-06 10:52:25 +01:00 · 2026-11-06 09:24:58 +00:00
411 changed files with 15290 additions and 4605 deletions
@@ -1,6 +1,6 @@
 ---
 name: ha-frontend-components
-description: Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
+description: Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, loading states, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
 ---

 # HA Frontend Components
@@ -91,6 +91,36 @@ html`
 `;
 ```

+## Loading States
+
+Pick the indicator by what is loading, following the [Loading pattern](https://contributors.home-assistant.io/design/patterns/loading/):
+
+- Use a skeleton from `src/components/skeleton/` (`ha-skeleton`, `ha-skeleton-text`, `ha-skeleton-icon`) when content loads into a layout you already know, such as table rows, tile text, or a log. It holds the layout, so nothing jumps when the content arrives.
+- Use `ha-spinner` only when a whole area loads and its shape is unknown.
+- Use `ha-button` with `loading`, or `ha-progress-button`, for an action started from a button. Don't put a separate spinner next to it.
+
+Wrap the indicator in `ha-fade-in` from `src/components/animation/ha-fade-in.ts`:
+
+- Fade a skeleton in straight away over about 300ms (`.duration=${300}`), as the data table does. It stands in for the content, so a delay would leave an empty gap.
+- Delay a spinner or progress bar, usually by `.delay=${500}`, so a load that finishes within that time never flashes it. Some slower areas, such as backups and updates, use `${1000}`.
+- Don't fade in the loaded content itself.
+
+Give a skeleton group the `progressbar` role and a translated label, as `ha-spinner` has, rather than visible "Loading" text. A loading state always ends in the content, an empty state, or an error.
+
+```ts
+html`
+  <ha-fade-in .duration=${300} easing="ease-in">
+    <div
+      role="progressbar"
+      aria-label=${this._i18n.localize("ui.common.loading")}
+    >
+      <ha-skeleton-text></ha-skeleton-text>
+    </div>
+  </ha-fade-in>
+  <ha-fade-in .delay=${500}><ha-spinner></ha-spinner></ha-fade-in>
+`;
+```
+
 ## Shortcuts And Tooltips

 Use `ShortcutManager` from `src/common/keyboard/shortcuts.ts` for keyboard shortcuts. It blocks shortcuts in input fields, can prevent shortcuts during text selection, and supports character and KeyCode shortcuts for non-latin keyboards. See `src/state/quick-bar-mixin.ts` for global shortcut examples.
@@ -10,6 +10,7 @@ Use this skill when editing CSS, layout, visual hierarchy, theme integration, re
 ## Theme And Layout Basics

 - Use Home Assistant CSS custom properties instead of hardcoded colors.
+- CSS in the static HTML templates under `src/html/` must give custom properties a fallback value (for example `var(--ha-space-4, 16px)`), because the global tokens only exist once the JS-appended global stylesheet from `append-ha-style` has loaded.
 - Use `--ha-space-*` spacing tokens instead of hardcoded spacing where possible.
 - Keep components mobile-first and enhance for desktop.
 - Keep layouts RTL-safe. Prefer logical properties when they fit.
@@ -12,3 +12,7 @@

 demo/public/api/camera_proxy_stream/* binary
 demo/public/api/media_player_proxy/* binary
+
+# Generated by `gh actions-lock`. Highlight it as YAML and don't auto-merge it:
+# on a conflict, restore it from the base branch and run `gh actions-lock`.
+.github/workflows/actions.lock linguist-language=YAML -merge
@@ -51,8 +51,8 @@

 - This PR fixes or closes issue: fixes #
 - This PR is related to issue or discussion:
- Link to documentation pull request:
- Link to developer documentation pull request:
+- Link to [documentation][docs-repository] pull request:
+- Link to [contributors documentation][contributors-repository] pull request:
 - Link to backend pull request:

 ## Checklist
@@ -63,7 +63,8 @@
  for before merging your code.

  AI tools are welcome, but contributors are responsible for *fully*
-  understanding the code before submitting a PR.
+  understanding the code before submitting a PR. Please follow our AI policy:
+  https://contributors.home-assistant.io/start/ai-policy/
 -->

 - [ ] I understand the code I am submitting and can explain how it works.
@@ -105,4 +106,5 @@ To help with the load of incoming pull requests:
  Below, some useful links you could explore:
 -->
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
+[contributors-repository]: https://github.com/home-assistant/contributors.home-assistant.io
 [perfect-pr]: https://contributors.home-assistant.io/start/pull-requests/#before-you-open-it
@@ -0,0 +1,6 @@
+paths:
+  .github/workflows/**/*.{yml,yaml}:
+    ignore:
+      # actionlint doesn't support `$/` self-repository actions yet, remove once it does:
+      # https://github.com/rhysd/actionlint/issues/711
+      - 'specifying action "\$/[^"]+" in invalid format because ref is missing'
@@ -24,7 +24,7 @@ runs:

    - name: Setup Node and install
      if: steps.dependencies.outputs.cache-hit != 'true'
-      uses: ./.github/actions/setup
+      uses: $/.github/actions/setup
      with:
        cache: false

@@ -0,0 +1,41 @@
+name: Verify actions lockfile
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+    paths:
+      - ".github/actions/**"
+      - ".github/workflows/**"
+  pull_request:
+    branches:
+      - dev
+      - master
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    name: Verify actions lockfile
+    runs-on: ubuntu-latest
+    env:
+      GH_ACTIONS_LOCK_VERSION: v0.4.1
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - name: Install gh-actions-lock
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh extension install github/gh-actions-lock --pin "${GH_ACTIONS_LOCK_VERSION}"
+      - name: Verify lockfile
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh actions-lock --verify
@@ -0,0 +1,190 @@
+# This file is machine-generated by `gh actions-lock`.
+# Do not edit by hand; run `gh actions-lock` to update.
+# Docs: https://gh.io/actions-lockfile
+version: 'v0.0.3'
+workflows:
+    '.github/workflows/actionlint.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+    '.github/workflows/actions-lock.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+    '.github/workflows/cast_deployment.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+    '.github/workflows/ci.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9'
+    '.github/workflows/codeql-analysis.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'github/codeql-action@9b3254085494b55a0f7c4c2b3d2d52cc712ce370'
+    '.github/workflows/copilot-setup-steps.yml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+    '.github/workflows/demo_deployment.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+    '.github/workflows/dependency-review.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294'
+        - 'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3'
+    '.github/workflows/design_deployment.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+    '.github/workflows/design_preview.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+    '.github/workflows/e2e.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333'
+        - 'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9'
+    '.github/workflows/labeler.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3'
+        - 'actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13'
+    '.github/workflows/lock.yaml':
+        - 'dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c'
+    '.github/workflows/nightly.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'actions/setup-python@6d4fd22b20465ccc0f7354476588e8df7c9ca0e0'
+        - 'actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9'
+    '.github/workflows/pull-request-standards.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3'
+    '.github/workflows/relative-ci.yaml':
+        - 'relative-ci/agent-action@711f3a8fa1b928e6afde280011110c9b0a224a60'
+    '.github/workflows/release-drafter.yaml':
+        - 'release-drafter/release-drafter@978bb0b30c5ee8cdd332ced253758157150d43f0'
+    '.github/workflows/release.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'actions/setup-python@6d4fd22b20465ccc0f7354476588e8df7c9ca0e0'
+        - 'home-assistant/actions@86d4564712fa02543c808e3a693dd04f9d3f8361'
+        - 'home-assistant/wheels@9e17ab1ed5c4c79d8b61e29fa63de25ca2710716'
+        - 'pypa/gh-action-pypi-publish@7245906fb61fa33a13554f9d5fb856fe61758086'
+    '.github/workflows/restrict-task-creation.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3'
+    '.github/workflows/stale.yaml':
+        - 'actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93'
+    '.github/workflows/sync-device-classes.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1'
+    '.github/workflows/sync-sensor-entity-constants.yaml':
+        - 'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+        - 'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1'
+        - 'peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1'
+    '.github/workflows/translations.yaml':
+        - 'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1'
+dependencies:
+    'actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9':
+        ref: 'v6.1.0'
+        commit: 'sha1-55cc8345863c7cc4c66a329aec7e433d2d1c52a9'
+        owner_id: 44036562
+        repo_id: 215566462
+    'actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1':
+        ref: 'v7.0.1'
+        commit: 'sha1-3d3c42e5aac5ba805825da76410c181273ba90b1'
+        owner_id: 44036562
+        repo_id: 197814629
+    'actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294':
+        ref: 'v5.0.0'
+        commit: 'sha1-a1d282b36b6f3519aa1f3fc636f609c47dddb294'
+        owner_id: 44036562
+        repo_id: 476372928
+    'actions/download-artifact@9000827ccba6bdab643e8b6fd33ac0654aef8333':
+        ref: 'v8.0.2'
+        commit: 'sha1-9000827ccba6bdab643e8b6fd33ac0654aef8333'
+        owner_id: 44036562
+        repo_id: 192626254
+    'actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3':
+        ref: 'v9.0.0'
+        commit: 'sha1-3a2844b7e9c422d3c10d287c895573f7108da1b3'
+        owner_id: 44036562
+        repo_id: 205262760
+    'actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13':
+        ref: 'v7.0.0'
+        commit: 'sha1-bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13'
+        owner_id: 44036562
+        repo_id: 177139928
+    'actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1':
+        ref: 'v7.1.0'
+        commit: 'sha1-949feb2413d6458794dcd2491c4babbbce0c15c1'
+        owner_id: 44036562
+        repo_id: 189476904
+    'actions/setup-python@6d4fd22b20465ccc0f7354476588e8df7c9ca0e0':
+        ref: 'v7.1.0'
+        commit: 'sha1-6d4fd22b20465ccc0f7354476588e8df7c9ca0e0'
+        owner_id: 44036562
+        repo_id: 192625525
+    'actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405':
+        ref: 'v6.2.0'
+        commit: 'sha1-a309ff8b426b58ec0e2a45f0f869d46889d02405'
+        owner_id: 44036562
+        repo_id: 192625525
+    'actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93':
+        ref: 'v11.0.0'
+        commit: 'sha1-4391f3da665fdf50b6810c1a66712fb9ba21aa93'
+        owner_id: 44036562
+        repo_id: 200437066
+    'actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9':
+        ref: 'v7.0.2'
+        commit: 'sha1-cf430e030ddbb5b0abf93d22962f4752f3646cd9'
+        owner_id: 44036562
+        repo_id: 192625955
+    'dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c':
+        ref: 'v6.0.2'
+        commit: 'sha1-89ae32b08ed1a541efecbab17912962a5e38981c'
+        owner_id: 7513068
+        repo_id: 113918130
+    'github/codeql-action@9b3254085494b55a0f7c4c2b3d2d52cc712ce370':
+        ref: 'v4.39.1'
+        commit: 'sha1-9b3254085494b55a0f7c4c2b3d2d52cc712ce370'
+        owner_id: 9919
+        repo_id: 259445878
+    'home-assistant/actions@86d4564712fa02543c808e3a693dd04f9d3f8361':
+        ref: 'master'
+        commit: 'sha1-86d4564712fa02543c808e3a693dd04f9d3f8361'
+        owner_id: 13844975
+        repo_id: 173703505
+    'home-assistant/wheels@9e17ab1ed5c4c79d8b61e29fa63de25ca2710716':
+        ref: '2026.07.0'
+        commit: 'sha1-9e17ab1ed5c4c79d8b61e29fa63de25ca2710716'
+        owner_id: 13844975
+        repo_id: 184234812
+    'peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1':
+        ref: 'v8.1.1'
+        commit: 'sha1-5f6978faf089d4d20b00c7766989d076bb2fc7f1'
+        owner_id: 18365890
+        repo_id: 197176365
+    'pypa/gh-action-pypi-publish@7245906fb61fa33a13554f9d5fb856fe61758086':
+        ref: 'v1.14.3'
+        commit: 'sha1-7245906fb61fa33a13554f9d5fb856fe61758086'
+        owner_id: 647025
+        repo_id: 178055147
+        uses:
+            - 'actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405'
+    'relative-ci/agent-action@711f3a8fa1b928e6afde280011110c9b0a224a60':
+        ref: 'v3.2.4'
+        commit: 'sha1-711f3a8fa1b928e6afde280011110c9b0a224a60'
+        owner_id: 43522883
+        repo_id: 398376354
+    'release-drafter/release-drafter@978bb0b30c5ee8cdd332ced253758157150d43f0':
+        ref: 'v7.10.0'
+        commit: 'sha1-978bb0b30c5ee8cdd332ced253758157150d43f0'
+        owner_id: 58292376
+        repo_id: 139022359
@@ -18,7 +18,7 @@ jobs:
  deploy_dev:
    runs-on: ubuntu-latest
    name: Deploy Development
-    if: github.repository == 'home-assistant/frontend' && github.event_name != 'push'
+    if: github.repository == 'home-assistant/frontend' && github.ref_name != 'master'
    environment:
      name: Cast Development
      url: ${{ steps.deploy.outputs.netlify_url }}
@@ -30,17 +30,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Cast
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-cast
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: cast/dist
          alias: dev
@@ -50,7 +50,7 @@ jobs:
  deploy_master:
    runs-on: ubuntu-latest
    name: Deploy Production
-    if: github.repository == 'home-assistant/frontend' && github.event_name == 'push'
+    if: github.repository == 'home-assistant/frontend' && github.ref_name == 'master'
    environment:
      name: Cast Production
      url: ${{ steps.deploy.outputs.netlify_url }}
@@ -62,17 +62,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Cast
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-cast
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: cast/dist
          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -31,7 +31,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Prepare dependencies
-        uses: ./.github/actions/prepare-dependencies
+        uses: $/.github/actions/prepare-dependencies

  lint:
    name: Lint and check format
@@ -43,7 +43,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
      - name: Check for duplicate dependencies
@@ -89,7 +89,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
      - name: Build resources
@@ -110,7 +110,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
      # Read-only reuse of the rspack cache written by the nightly (see
@@ -127,7 +127,7 @@ jobs:
          restore-keys: |
            rspack-cache-${{ runner.os }}-
      - name: Build Application
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-app
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -32,12 +32,12 @@ jobs:
          persist-credentials: false

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@6f2ac81f5cd81fe351a197ba0b00d91d03cd2aee # v4.39.0
+        uses: github/codeql-action/init@9b3254085494b55a0f7c4c2b3d2d52cc712ce370 # v4.39.1
        with:
          languages: javascript-typescript
          build-mode: none

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@6f2ac81f5cd81fe351a197ba0b00d91d03cd2aee # v4.39.0
+        uses: github/codeql-action/analyze@9b3254085494b55a0f7c4c2b3d2d52cc712ce370 # v4.39.1
        with:
          category: "/language:javascript-typescript"
@@ -22,10 +22,45 @@ jobs:
        with:
          persist-credentials: false

-      - name: Setup Node and install
-        uses: ./.github/actions/setup
+      # These steps mirror .github/actions/setup with node-modules-cache enabled.
+      # Copilot runs this workflow in a context that can't resolve `$/`
+      # self-repository actions, so the steps are inlined here.
+      - name: Restore complete dependency tree
+        id: dependency-cache
+        continue-on-error: true
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
        with:
-          node-modules-cache: true
+          path: |
+            node_modules
+            ~/.local/share/pnpm/store
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'pnpm-lock.yaml', 'pnpm-workspace.yaml', 'patches/**') }}
+
+      - name: Setup Node
+        uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        id: pnpm-store
+        if: steps.dependency-cache.outputs.cache-hit != 'true'
+        run: echo "path=$(pnpm store path --silent)" >> "$GITHUB_OUTPUT"
+
+      - name: Cache pnpm store
+        if: steps.pnpm-store.outputs.path
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: ${{ steps.pnpm-store.outputs.path }}
+          key: pnpm-store-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: pnpm-store-${{ runner.os }}-${{ runner.arch }}-
+
+      - name: Install dependencies
+        if: steps.dependency-cache.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile

      - name: Skip fetching nightly translations
        run: echo "SKIP_FETCH_NIGHTLY_TRANSLATIONS=1" >> "$GITHUB_ENV"
@@ -19,7 +19,7 @@ jobs:
  deploy_dev:
    runs-on: ubuntu-latest
    name: Demo Development
-    if: github.repository == 'home-assistant/frontend' && (github.event_name != 'push' || github.ref_name != 'master')
+    if: github.repository == 'home-assistant/frontend' && github.ref_name != 'master'
    environment:
      name: Demo Development
      url: ${{ steps.deploy.outputs.unique_deploy_url }}
@@ -31,17 +31,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Demo
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-demo
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: demo/dist
          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -50,7 +50,7 @@ jobs:
  deploy_master:
    runs-on: ubuntu-latest
    name: Demo Production
-    if: github.repository == 'home-assistant/frontend' && github.event_name == 'push' && github.ref_name == 'master'
+    if: github.repository == 'home-assistant/frontend' && github.ref_name == 'master'
    environment:
      name: Demo Production
      url: ${{ steps.deploy.outputs.netlify_url }}
@@ -62,17 +62,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Demo
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-demo
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: demo/dist
          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -25,17 +25,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Gallery
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-gallery
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: gallery/dist
          auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -29,17 +29,17 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Build Gallery
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-gallery
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Deploy preview to Netlify
        id: deploy
-        uses: ./.github/actions/netlify-deploy
+        uses: $/.github/actions/netlify-deploy
        with:
          dir: gallery/dist
          alias: deploy-preview-${{ github.event.number }}
@@ -32,13 +32,13 @@ jobs:
          persist-credentials: false

      - name: Prepare dependencies
-        uses: ./.github/actions/prepare-dependencies
+        uses: $/.github/actions/prepare-dependencies

  prepare-container-dependencies:
    name: Prepare container dependencies
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.64.1-noble
+      image: mcr.microsoft.com/playwright:v1.64.1-noble@sha256:47b510dd9230bf0b9bfc9b20102241e577ea7a99334ab4c3ca19f19770e9b8ea
      options: --user 1001
    defaults:
      run:
@@ -50,7 +50,7 @@ jobs:
          persist-credentials: false

      - name: Prepare dependencies
-        uses: ./.github/actions/prepare-dependencies
+        uses: $/.github/actions/prepare-dependencies
        with:
          node-modules-cache-key: node-modules-container-v1

@@ -66,12 +66,12 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true

      - name: Build demo
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-demo-e2e
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -97,12 +97,12 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true

      - name: Build e2e test app
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-e2e-test-app-e2e
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -128,12 +128,12 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true

      - name: Build gallery
-        uses: ./.github/actions/build
+        uses: $/.github/actions/build
        with:
          target: build-gallery
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -155,7 +155,7 @@ jobs:
      - prepare-container-dependencies
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.64.1-noble
+      image: mcr.microsoft.com/playwright:v1.64.1-noble@sha256:47b510dd9230bf0b9bfc9b20102241e577ea7a99334ab4c3ca19f19770e9b8ea
      options: --user 1001 --ipc=host
    defaults:
      run:
@@ -176,7 +176,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
          node-modules-cache-key: node-modules-container-v1
@@ -207,7 +207,7 @@ jobs:
      - prepare-container-dependencies
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.64.1-noble
+      image: mcr.microsoft.com/playwright:v1.64.1-noble@sha256:47b510dd9230bf0b9bfc9b20102241e577ea7a99334ab4c3ca19f19770e9b8ea
      options: --user 1001 --ipc=host
    defaults:
      run:
@@ -230,7 +230,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
          node-modules-cache-key: node-modules-container-v1
@@ -261,7 +261,7 @@ jobs:
      - prepare-container-dependencies
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.64.1-noble
+      image: mcr.microsoft.com/playwright:v1.64.1-noble@sha256:47b510dd9230bf0b9bfc9b20102241e577ea7a99334ab4c3ca19f19770e9b8ea
      options: --user 1001 --ipc=host
    defaults:
      run:
@@ -284,7 +284,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true
          node-modules-cache-key: node-modules-container-v1
@@ -326,7 +326,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node with shared dependencies
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          node-modules-cache: true

@@ -26,12 +26,12 @@ jobs:
          persist-credentials: false

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.0.0
+        uses: actions/setup-python@6d4fd22b20465ccc0f7354476588e8df7c9ca0e0 # v7.1.0
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          immutable: false

@@ -124,7 +124,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          immutable: false

@@ -31,15 +31,15 @@ jobs:
          persist-credentials: false

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.0.0
+        uses: actions/setup-python@6d4fd22b20465ccc0f7354476588e8df7c9ca0e0 # v7.1.0
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@cd6f3635a740c84d8a14f6121a90068b8ece6bf6 # master
+        uses: home-assistant/actions/helpers/verify-version@86d4564712fa02543c808e3a693dd04f9d3f8361 # master

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          immutable: false
          cache: false
@@ -85,7 +85,7 @@ jobs:
          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}

      - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@dc37677b2e1c63e2034f94d8a5b11f265b73ba33 # v1.14.2
+        uses: pypa/gh-action-pypi-publish@7245906fb61fa33a13554f9d5fb856fe61758086 # v1.14.3
        with:
          skip-existing: true

@@ -146,7 +146,7 @@ jobs:
        with:
          persist-credentials: false
      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup
        with:
          immutable: false
          cache: false
@@ -27,7 +27,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Regenerate device class constants
        run: ./script/gen_device_classes
@@ -28,7 +28,7 @@ jobs:
          persist-credentials: false

      - name: Setup Node and install
-        uses: ./.github/actions/setup
+        uses: $/.github/actions/setup

      - name: Regenerate sensor entity constants
        run: ./script/gen_sensor_entity_constants
@@ -1 +1 @@
-24.22.1
+24.22.2
@@ -40,7 +40,7 @@ Never run `tsc` or `pnpm lint:types` with file arguments. When `tsc` receives fi
 Detailed guidance lives in `.agents/skills/<name>/SKILL.md`. Load every matching skill before detailed implementation or review. For reviews, load `ha-frontend-review` alongside all companions that apply to the changed code or behavior:

 - `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
- `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.
+- `ha-frontend-components`: dialogs, forms, alerts, loading states, shortcuts, tooltips, panels, and Lovelace cards.
 - `ha-frontend-events`: event handler typing, custom event dispatch, and event-map declarations.
 - `ha-frontend-types`: backend data contracts, optional schemas, shared types, assertions, and lifecycle types.
 - `ha-frontend-lit`: reactive fields, DOM queries, lifecycle behavior, and render-derived state.
@@ -1,3 +1,4 @@
+/* global module, require */
 // rspack/webpack loader that minifies the HTML, SVG, and CSS inside lit
 // tagged template literals using `minify-literals` (html-minifier-next +
 // lightningcss). Replaces the unmaintained babel-plugin-template-html-minifier.
@@ -35,14 +36,6 @@ const initLoader = (browserslistEnv) => {
        return {
          minifyHTMLLiterals: minifyModule.minifyHTMLLiterals,
          lightningcssTargets,
-          // With the legacy floor at Chrome 67, lightningcss rewrites rgba()
-          // to 8-digit hex (#rrggbbaa). Some kiosk webviews served the legacy
-          // build (e.g. Shelly Wall Display) can't parse that, so any
-          // var(--divider-color) border falls back to currentColor. Always
-          // compile hex alpha colors to rgba() in legacy builds.
-          lightningcssInclude: browserslistEnv.startsWith("legacy")
-            ? lightningcssModule.Features.HexAlphaColors
-            : 0,
        };
      })
    );
@@ -74,13 +67,12 @@ module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
  const { browserslistEnv } = this.getOptions();

  initLoader(browserslistEnv)
-    .then(({ minifyHTMLLiterals, lightningcssTargets, lightningcssInclude }) =>
+    .then(({ minifyHTMLLiterals, lightningcssTargets }) =>
      minifyHTMLLiterals(source, {
        fileName: this.resourcePath,
        html: htmlOptions,
        css: {
          targets: lightningcssTargets,
-          include: lightningcssInclude,
        },
      })
    )
@@ -244,9 +244,6 @@ const createRspackConfig = ({
                      path: paths.root_dir,
                      env: "legacy",
                    }),
-                    // Keep rgba() instead of #rrggbbaa, see
-                    // minify-template-literals-loader.cjs
-                    include: { hexAlphaColors: true },
                  },
                },
              ],
@@ -1,6 +1,6 @@
 {
  "background_color": "#FFFFFF",
-  "description": "Show Home Assistant on your Chromecast or Google Assistant devices with a screen.",
+  "description": "Show Home Assistant on your Chromecast or Google Home devices with a screen.",
  "dir": "ltr",
  "display": "standalone",
  "icons": [
@@ -5,7 +5,7 @@
 <meta property="og:type" content="website" />
 <meta
  property="og:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+  content="Show Home Assistant on your Chromecast or Google Home devices with a screen."
 />
 <meta
  property="og:image"
@@ -16,7 +16,7 @@
 <meta name="twitter:title" content="Home Assistant Cast" />
 <meta
  name="twitter:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+  content="Show Home Assistant on your Chromecast or Google Home devices with a screen."
 />
 <meta
  name="twitter:image"
@@ -52,7 +52,7 @@
        <p>
          Home Assistant Cast allows you to show your Home Assistant data on a
          Chromecast device and allows you to interact with Home Assistant on
-          Google Assistant devices with a screen.
+          Google Home devices with a screen.
        </p>
      </div>

@@ -1,8 +1,7 @@
-import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
 import type { TemplateResult, PropertyValues } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
 import {
@@ -14,12 +13,14 @@ import {
  enableWrite,
  saveTokens,
 } from "../../../../src/common/auth/token_storage";
+import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
-import "../../../../src/components/ha-list";
-import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/item/ha-list-item-option";
+import type { HaListItemOption } from "../../../../src/components/item/ha-list-item-option";
+import "../../../../src/components/list/ha-list-selectable";
 import {
  getLegacyLovelaceCollection,
  getLovelaceCollection,
@@ -53,6 +54,9 @@ class HcCast extends LitElement {
          `
        : undefined;

+    const views = this.lovelaceViews ?? [{ title: "Home" }];
+    const hasIcons = views.some((view) => view.icon);
+
    return html`
      <hc-layout .auth=${this.auth} .connection=${this.connection}>
        ${
@@ -93,45 +97,41 @@ class HcCast extends LitElement {
                  </p>
                `
              : html`
-                  <div class="section-header">PICK A VIEW</div>
-                  <ha-list @action=${this._handlePickView} activatable>
-                    ${(
-                      this.lovelaceViews ?? [
-                        {
-                          title: "Home",
-                        },
-                      ]
-                    ).map(
+                  <div class="section-header" id="pick-view-header">
+                    PICK A VIEW
+                  </div>
+                  <ha-list-selectable
+                    controlled
+                    aria-labelledby="pick-view-header"
+                  >
+                    ${views.map(
                      (view, idx) => html`
-                        <ha-list-item
-                          graphic="avatar"
-                          .activated=${
-                            this.castManager.status?.lovelacePath ===
-                            (view.path ?? idx)
-                          }
+                        <ha-list-item-option
+                          data-index=${idx}
+                          @click=${this._handlePickView}
+                          .headline=${view.title || view.path || "Unnamed view"}
                          .selected=${
                            this.castManager.status?.lovelacePath ===
                            (view.path ?? idx)
                          }
                        >
-                          ${view.title || view.path || "Unnamed view"}
                          ${
-                            view.icon
-                              ? html`
-                                  <ha-icon
+                            !hasIcons
+                              ? nothing
+                              : view.icon
+                                ? html`<ha-icon
+                                    slot="start"
                                    .icon=${view.icon}
-                                    slot="graphic"
-                                  ></ha-icon>
-                                `
-                              : html`<ha-svg-icon
-                                  slot="item-icon"
-                                  .path=${mdiViewDashboard}
-                                ></ha-svg-icon>`
+                                  ></ha-icon>`
+                                : html`<ha-svg-icon
+                                    slot="start"
+                                    .path=${mdiViewDashboard}
+                                  ></ha-svg-icon>`
                          }
-                        </ha-list-item>
+                        </ha-list-item-option>
                      `
-                    )}</ha-list
-                  >
+                    )}
+                  </ha-list-selectable>
                `
        }

@@ -194,14 +194,6 @@ class HcCast extends LitElement {
    });
  }

-  protected updated(changedProps: PropertyValues<this>) {
-    super.updated(changedProps);
-    this.toggleAttribute(
-      "hide-icons",
-      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
-    );
-  }
-
  private async _handleSkipSaveTokens() {
    this.askWrite = false;
  }
@@ -215,8 +207,13 @@ class HcCast extends LitElement {
    this.castManager.requestSession();
  }

-  private async _handlePickView(ev: CustomEvent<ActionDetail>) {
-    const path = this.lovelaceViews?.[ev.detail.index]?.path ?? ev.detail.index;
+  // Listens to clicks instead of `ha-list-item-selected`, which does not fire
+  // for the selected view, so the current view can still be cast again.
+  private async _handlePickView(
+    ev: HASSDomCurrentTargetEvent<HaListItemOption>
+  ) {
+    const index = Number(ev.currentTarget.dataset.index);
+    const path = this.lovelaceViews?.[index]?.path ?? index;
    await ensureConnectedCastSession(this.castManager!, this.auth!);
    castSendShowLovelaceView(this.castManager, this.auth.data.hassUrl, path);
  }
@@ -271,16 +268,11 @@ class HcCast extends LitElement {
      color: var(--secondary-text-color);
    }

-    ha-list-item ha-icon,
-    ha-list-item ha-svg-icon {
-      padding: 12px;
+    ha-list-item-option ha-icon,
+    ha-list-item-option ha-svg-icon {
      color: var(--secondary-text-color);
    }

-    :host([hide-icons]) ha-icon {
-      display: none;
-    }
-
    .spacer {
      flex: 1;
    }
@@ -48,7 +48,7 @@ const translateErr = (err) =>
 const INTRO = html`
  <p>
    Home Assistant Cast allows you to cast your Home Assistant installation to
-    Chromecast video devices and to Google Assistant devices with a screen.
+    Chromecast video devices and to Google Home devices with a screen.
  </p>
  <p>
    For more information, see the
@@ -6,7 +6,7 @@ const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor("LOAD", (loadRequestData) => {
  const media = loadRequestData.media;
-  // Special handling if it came from Google Assistant
+  // Special handling if it came from Google Home
  if (media.entity) {
    media.contentId = media.entity;
    media.streamType = "LIVE";
@@ -13,7 +13,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
          {
            type: "markdown",
            title: "Home Assistant Cast",
-            content: `With Home Assistant you can easily create interfaces (just like this one) which can be shown on Chromecast devices connected to TVs or Google Assistant devices with a screen.${
+            content: `With Home Assistant you can easily create interfaces (just like this one) which can be shown on Chromecast devices connected to TVs or Google Home devices with a screen.${
              touchSupported
                ? "\n\nYou are able to interact with this demo using the touch screen."
                : "\n\nOn a Google Nest Hub you are able to interact with Home Assistant Cast via the touch screen."
@@ -117,7 +117,7 @@ playerManager.setMessageInterceptor("LOAD", (loadRequestData) => {
  // We received a play media command, hide Lovelace and show media player
  showMediaPlayer();
  const media = loadRequestData.media;
-  // Special handling if it came from Google Assistant
+  // Special handling if it came from Google Home
  if (media.entity) {
    media.contentId = media.entity;
    media.streamType = "LIVE";
@@ -59,6 +59,10 @@ const REGISTRY_ENTRIES = [
 export const infraredFixtures: ConnectivityFixtures = {
  components: ["infrared"],
  manifests: [
+    manifest("infrared", "Infrared", {
+      config_flow: false,
+      integration_type: "entity",
+    }),
    manifest("broadlink", "Broadlink", {
      integration_type: "hub",
      iot_class: "local_polling",
@@ -42,7 +42,13 @@ const REGISTRY_ENTRIES = [
 export const radioFrequencyFixtures: ConnectivityFixtures = {
  components: ["radio_frequency"],
  commands: ["radio_frequency/"],
-  manifests: [manifest("esphome", "ESPHome", { integration_type: "device" })],
+  manifests: [
+    manifest("radio_frequency", "Radio frequency", {
+      config_flow: false,
+      integration_type: "entity",
+    }),
+    manifest("esphome", "ESPHome", { integration_type: "device" }),
+  ],
  configEntries: [
    { type: "device", entry: configEntry(ENTRY_ID, "esphome", "RF Bridge") },
  ],
@@ -97,6 +97,14 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
        stat_consumption: "sensor.water_garden",
      },
    ],
+    device_consumption_gas: [
+      {
+        stat_consumption: "sensor.gas_kitchen",
+      },
+      {
+        stat_consumption: "sensor.gas_heat_pump",
+      },
+    ],
  }));
  hass.mockWS("energy/info", (): EnergyInfo => ({
    cost_sensors: {},
@@ -106,6 +114,7 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
    energy_sources: Array.from({ length: 6 }, () => []),
    device_consumption: Array.from({ length: 6 }, () => []),
    device_consumption_water: Array.from({ length: 2 }, () => []),
+    device_consumption_gas: Array.from({ length: 2 }, () => []),
  }));
  hass.mockWS(
    "energy/fossil_energy_consumption",
@@ -160,6 +160,26 @@ export const energyEntities = () =>
        unit_of_measurement: "L",
      },
    },
+    "sensor.gas_kitchen": {
+      entity_id: "sensor.gas_kitchen",
+      state: "100",
+      attributes: {
+        friendly_name: "Gas kitchen",
+        unit_of_measurement: "m³",
+        device_class: "gas",
+        state_class: "total_increasing",
+      },
+    },
+    "sensor.gas_heat_pump": {
+      entity_id: "sensor.gas_heat_pump",
+      state: "500",
+      attributes: {
+        friendly_name: "Gas heat pump",
+        unit_of_measurement: "m³",
+        device_class: "gas",
+        state_class: "total_increasing",
+      },
+    },
    "sensor.energy_car": {
      entity_id: "sensor.energy_car",
      state: "4",
@@ -158,6 +158,24 @@ const statisticsFunctions: Record<
      (bucketStart, bucketEnd) =>
        (20 * (bucketEnd.getTime() - bucketStart.getTime())) / 3600000
    ),
+  "sensor.gas_kitchen": (_id, start, end, period = "hour") =>
+    generateSumStatistics(
+      start,
+      end,
+      period,
+      100,
+      (bucketStart, bucketEnd) =>
+        (0.1 * (bucketEnd.getTime() - bucketStart.getTime())) / 3600000
+    ),
+  "sensor.gas_heat_pump": (_id, start, end, period = "hour") =>
+    generateSumStatistics(
+      start,
+      end,
+      period,
+      500,
+      (bucketStart, bucketEnd) =>
+        (0.6 * (bucketEnd.getTime() - bucketStart.getTime())) / 3600000
+    ),
  "sensor.energy_consumption_tarif_1": (
    _id: string,
    start: Date,
@@ -81,6 +81,10 @@ export default [
        header: "Feedback and status",
        pages: ["ha-alert", "ha-spinner", "ha-tip", "ha-bar", "ha-gauge"],
      },
+      {
+        header: "Charts",
+        pages: ["state-history-charts", "statistics-chart"],
+      },
      {
        header: "Labels and text",
        pages: ["ha-badge", "ha-label-badge", "ha-chips", "ha-marquee-text"],
@@ -48,6 +48,36 @@ export const createMediaPlayerEntities = () => [
      group_members: ["media_player.playing", "media_player.stream_playing"],
    },
  },
+  {
+    entity_id: "media_player.music_all_features",
+    state: "playing",
+    attributes: {
+      friendly_name: "Playing The Music (all features)",
+      media_content_type: "music",
+      media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+      media_artist: "Technohead",
+      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + On + Off +
+      // Play Media + Volume Step + Select Source + Stop + Clear + Play + Shuffle Set +
+      // Sound Mode + Browse Media + Repeat Set + Grouping
+      supported_features: 1048511,
+      entity_picture: "/images/album_cover.jpg",
+      media_duration: 300,
+      media_position: 0,
+      media_position_updated_at: new Date(
+        // 23 seconds in
+        new Date().getTime() - 23000
+      ).toISOString(),
+      volume_level: 0.5,
+      is_volume_muted: false,
+      shuffle: false,
+      repeat: "off",
+      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+      source: "AirPlay",
+      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
+      sound_mode: "Music",
+      group_members: ["media_player.playing", "media_player.stream_playing"],
+    },
+  },
  {
    entity_id: "media_player.stream_playing",
    state: "playing",
@@ -4,7 +4,7 @@ title: "Our story"

 ## Open source home automation that puts local control and privacy first

-Home Assistant is a free and open-source software for home automation that is designed to be the central control system for smart home devices with a focus on local control and privacy. It can be accessed via a web-based user interface, via apps for Android and iOS, or using voice commands via a supported virtual assistant like Google Assistant and Amazon Alexa.
+Home Assistant is a free and open-source software for home automation that is designed to be the central control system for smart home devices with a focus on local control and privacy. It can be accessed via a web-based user interface, via apps for Android and iOS, or using voice commands via a supported virtual assistant like Google Home and Amazon Alexa.

 IoT devices and services are supported by modular support for controlling proprietary ecosystems if they provide public access via an Open API for third-party integrations and protocols like Bluetooth, MQTT, Zigbee, and Z-Wave, After the Home Assistant software application is installed as a computer appliance it will act as a central control system for home automation. Information from all entities it sees can be used and controlled from within scripts trigger automations using scheduling and "blueprint" subroutines, e.g. for controlling lighting, climate, entertainment systems, and appliances.

@@ -36,6 +36,6 @@ Durability for the Open Home means that devices are designed and built to keep w

 The project was started as a Python application by Paulus Schoutsen in September 2013 and first published publicly on GitHub in November 2013. In July 2017, a managed operating system called Hass.io was initially introduced to make it easier use to use Home Assistant on single-board computers like the Raspberry Pi series. Its bundled "supervisor" management system allowed users to manage, backup, and update the local installation and introduced the option to extend the functionality of the software with add-ons.

-An optional subscription service was introduced in December 2017 for $5/month to solve the complexities associated with secured remote access, as well as linking to Amazon Alexa and Google Assistant. Nabu Casa, Inc. was formed in September 2018 to take over the subscription service. The company's funding is based solely on revenue from the subscription service. It is used to finance the project's infrastructure and to pay for full-time employees contributing to the project.
+An optional subscription service was introduced in December 2017 for $5/month to solve the complexities associated with secured remote access, as well as linking to Amazon Alexa and Google Home. Nabu Casa, Inc. was formed in September 2018 to take over the subscription service. The company's funding is based solely on revenue from the subscription service. It is used to finance the project's infrastructure and to pay for full-time employees contributing to the project.

 In January 2020, branding was adjusted to make it easier to refer to different parts of the project. The main piece of software was renamed to Home Assistant Core, while the full suite of software with the embedded operating system and bundled "supervisor" management system was renamed to Home Assistant.
@@ -50,6 +50,18 @@ With no cursor yet, <kbd>↓</kbd> and <kbd>Enter</kbd> start from the `value`
 row, or from the top match while searching. With one item in the list,
 <kbd>Enter</kbd> picks it whether or not the cursor has moved.

+## Screen readers
+
+DOM focus stays in the search field, so screen readers do not hear the list
+change. While searching, a visually hidden `role="status"` message says how
+many items match the search and names it, so a new search with the same count
+is still read out. It is cleared as soon as the list changes and filled in once
+typing pauses for half a second, so it doesn't talk over each typed character
+or describe the previous search. When nothing matches, it reads a not
+found label that takes the search, or says there are no results for it. Section
+titles, placeholder rows, "Add custom item", the additional items and rows that
+`isSearchResult` rejects are not counted.
+
 ## Implementation

 Without `sections`, the component filters the items from `getItems` itself as the
@@ -79,6 +91,7 @@ means supplying one.
 | allowCustomValue   | Boolean            | false     | Offers the typed string as an item.                                                                                                     |
 | customValueLabel   | String             | -         | Label for that custom item.                                                                                                             |
 | notFoundLabel      | String/Function    | -         | Shown when a search matches nothing.                                                                                                    |
+| isSearchResult     | Function           | -         | Whether a row from `getItems` counts as a match for screen readers. The quick bar leaves out its "Ask Assist" row.                      |
 | emptyLabel         | String             | -         | Shown when there are no items at all.                                                                                                   |
 | noSort             | Boolean            | false     | Keeps the order `getItems` returned.                                                                                                    |
 | clearable          | Boolean            | false     | Adjusts search field padding for a clear affordance.                                                                                    |
@@ -1,7 +1,9 @@
 import { ContextProvider } from "@lit/context";
+import { IntlMessageFormat } from "intl-messageformat";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
+import type { LocalizeFunc } from "../../../../src/common/translations/localize";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-picker-combo-box";
 import type { PickerComboBoxItem } from "../../../../src/components/ha-picker-combo-box";
@@ -19,13 +21,26 @@ import type {
 } from "../../../../src/types";
 import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

+// The English strings, plurals included, so searching a demo announces the
+// same count and search as the real picker.
 const LOCALIZE_KEYS: Record<string, string> = {
  "ui.common.search": "Search",
  "ui.components.combo-box.no_match": "No matching items found",
  "ui.components.combo-box.no_items": "No items available",
+  "ui.components.combo-box.result_count":
+    "{count} {count, plural,\n one {result}\n other {results}\n} for {term}",
+  "ui.components.combo-box.no_results": "No results for {term}",
 };

-const localize = (key: string) => LOCALIZE_KEYS[key] ?? key;
+const localize: LocalizeFunc = (key, values) => {
+  const message = LOCALIZE_KEYS[key];
+  if (message === undefined) {
+    return key;
+  }
+  return new IntlMessageFormat(message, "en").format<string>(
+    values as Record<string, string | number>
+  ) as string;
+};

 const DEMO_I18N: HomeAssistantInternationalization = {
  localize,
@@ -683,8 +683,13 @@ const SCHEMAS: {
    name: "Unit of measurement",
    input: {
      sensor_device_class: {
-        name: "Device class",
-        selector: { device_class: { domain: "sensor" } },
+        name: "Device class of the unit below",
+        selector: {
+          device_class: {
+            domain: "sensor",
+            context: { filter_unit_of_measurement: "unit_linked" },
+          },
+        },
      },
      sensor_state_class: {
        name: "State class",
@@ -0,0 +1,6 @@
+---
+title: History charts
+subtitle: State history as timelines and line charts.
+---
+
+`<state-history-charts>` renders the state history of entities: a timeline for entities with text states, and a line chart per unit for numeric ones. It is used by the history panel, the history graph card and the more-info history. The data below is generated, so the charts work without a backend.
@@ -0,0 +1,211 @@
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/chart/state-history-charts";
+import "../../../../src/components/ha-card";
+import type {
+  HistoryResult,
+  LineChartState,
+  TimelineState,
+} from "../../../../src/data/history";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+
+const HOUR = 60 * 60 * 1000;
+const HOURS = 48;
+
+const END = new Date();
+END.setMinutes(0, 0, 0);
+const START = new Date(END.getTime() - HOURS * HOUR);
+
+const ENTITIES = [
+  {
+    entity_id: "sensor.outdoor_temperature",
+    state: "12.4",
+    attributes: {
+      friendly_name: "Outdoor temperature",
+      device_class: "temperature",
+      state_class: "measurement",
+      unit_of_measurement: "°C",
+    },
+  },
+  {
+    entity_id: "light.living_room",
+    state: "on",
+    attributes: { friendly_name: "Living room light" },
+  },
+  {
+    entity_id: "binary_sensor.front_door",
+    state: "off",
+    attributes: { friendly_name: "Front door", device_class: "door" },
+  },
+];
+
+const temperatureStates = (): LineChartState[] =>
+  Array.from({ length: HOURS * 2 }, (_, index) => {
+    const time = START.getTime() + (index * HOUR) / 2;
+    const hourOfDay = new Date(time).getHours();
+    const value =
+      10 +
+      4 * Math.sin(((hourOfDay - 9) / 24) * 2 * Math.PI) +
+      0.5 * Math.sin(time / HOUR);
+    return {
+      state: value.toFixed(1),
+      last_changed: time,
+    };
+  });
+
+const toggleStates = (
+  onHours: [number, number][],
+  onLabel: string,
+  offLabel: string
+): TimelineState[] => {
+  const on = { state: "on", state_localize: onLabel };
+  const off = { state: "off", state_localize: offLabel };
+  const states: TimelineState[] = [{ ...off, last_changed: START.getTime() }];
+  onHours.forEach(([from, to]) => {
+    states.push(
+      { ...on, last_changed: START.getTime() + from * HOUR },
+      { ...off, last_changed: START.getTime() + to * HOUR }
+    );
+  });
+  return states;
+};
+
+const HISTORY: HistoryResult = {
+  line: [
+    {
+      unit: "°C",
+      device_class: "temperature",
+      identifier: "temperature",
+      data: [
+        {
+          domain: "sensor",
+          name: "Outdoor temperature",
+          entity_id: "sensor.outdoor_temperature",
+          states: temperatureStates(),
+        },
+      ],
+    },
+  ],
+  timeline: [
+    {
+      name: "Living room light",
+      entity_id: "light.living_room",
+      data: toggleStates(
+        [
+          [6, 8],
+          [18, 23],
+          [30, 32],
+          [42, 47],
+        ],
+        "On",
+        "Off"
+      ),
+    },
+    {
+      name: "Front door",
+      entity_id: "binary_sensor.front_door",
+      data: toggleStates(
+        [
+          [7.5, 7.6],
+          [17, 17.2],
+          [31.5, 31.6],
+          [41, 41.1],
+        ],
+        "Open",
+        "Closed"
+      ),
+    },
+  ],
+};
+
+const LIGHT_ONLY: HistoryResult = {
+  line: [],
+  timeline: [HISTORY.timeline[0]],
+};
+
+interface Example {
+  title: string;
+  description: string;
+  history: HistoryResult;
+  showNames?: boolean;
+  insideLabels?: boolean;
+  syncCharts?: boolean;
+}
+
+const EXAMPLES: Example[] = [
+  {
+    title: "Names in a column",
+    description:
+      "The default layout, like the history graph card: timeline names on the left and a line chart for each unit.",
+    history: HISTORY,
+  },
+  {
+    title: "Names inside the timeline, synced zoom",
+    description:
+      "Like the history panel: names sit under each timeline bar, and zooming one chart zooms all of them.",
+    history: HISTORY,
+    insideLabels: true,
+    syncCharts: true,
+  },
+  {
+    title: "Single entity without names",
+    description:
+      "Like the more-info dialog, where the entity is already known.",
+    history: LIGHT_ONLY,
+    showNames: false,
+  },
+];
+
+@customElement("demo-components-state-history-charts")
+export class DemoStateHistoryCharts extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+    return EXAMPLES.map(
+      (example) => html`
+        <ha-card header=${example.title}>
+          <div class="card-content">
+            <p>${example.description}</p>
+            <state-history-charts
+              .historyData=${example.history}
+              .startTime=${START}
+              .endTime=${END}
+              .showNames=${example.showNames ?? true}
+              .insideLabels=${example.insideLabels ?? false}
+              .syncCharts=${example.syncCharts ?? false}
+              .clickForMoreInfo=${false}
+            ></state-history-charts>
+          </div>
+        </ha-card>
+      `
+    );
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 800px;
+      margin: 24px auto;
+    }
+    p {
+      margin-top: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-state-history-charts": DemoStateHistoryCharts;
+  }
+}
@@ -0,0 +1,6 @@
+---
+title: Statistics chart
+subtitle: Long-term statistics as a bar or line chart.
+---
+
+`<statistics-chart>` renders long-term statistics from the recorder. It is used by the statistics graph card, the more-info history and the statistics developer tools. The data below is generated, so the charts work without a backend.
@@ -0,0 +1,212 @@
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/chart/statistics-chart";
+import "../../../../src/components/ha-card";
+import type {
+  Statistics,
+  StatisticsMetaData,
+  StatisticType,
+  StatisticValue,
+} from "../../../../src/data/recorder";
+import { StatisticMeanType } from "../../../../src/data/recorder";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+
+const HOUR = 60 * 60 * 1000;
+const HOURS = 48;
+
+const END = new Date();
+END.setMinutes(0, 0, 0);
+const START = new Date(END.getTime() - HOURS * HOUR);
+
+const round = (value: number, digits: number) =>
+  Math.round(value * 10 ** digits) / 10 ** digits;
+
+const hourlyValues = (
+  compute: (start: number) => Partial<StatisticValue>
+): StatisticValue[] =>
+  Array.from({ length: HOURS }, (_, hour) => {
+    const start = START.getTime() + hour * HOUR;
+    return { start, end: start + HOUR, ...compute(start) };
+  });
+
+const energyValues = (dayUse: number, eveningUse: number) => {
+  let sum = 0;
+  return hourlyValues((start) => {
+    const hourOfDay = new Date(start).getHours();
+    const base = hourOfDay < 7 ? 0.1 : hourOfDay < 18 ? dayUse : eveningUse;
+    const change = round(base + 0.2 * Math.abs(Math.sin(start / HOUR)), 2);
+    sum += change;
+    return { change, sum: round(sum, 2) };
+  });
+};
+
+const temperatureValues = (average: number, swing: number) =>
+  hourlyValues((start) => {
+    const hourOfDay = new Date(start).getHours();
+    const mean =
+      average +
+      swing * Math.sin(((hourOfDay - 9) / 24) * 2 * Math.PI) +
+      0.3 * Math.sin(start / HOUR);
+    return {
+      mean: round(mean, 1),
+      min: round(mean - 0.4, 1),
+      max: round(mean + 0.4, 1),
+    };
+  });
+
+const HEAT_PUMP_ID = "sensor.heat_pump_energy";
+const LIGHTING_ID = "sensor.lighting_energy";
+const LIVING_ROOM_ID = "sensor.living_room_temperature";
+const BEDROOM_ID = "sensor.bedroom_temperature";
+
+const HEAT_PUMP = energyValues(0.4, 1.2);
+const LIGHTING = energyValues(0.05, 0.3);
+const LIVING_ROOM = temperatureValues(21, 1.5);
+const BEDROOM = temperatureValues(18.5, 1);
+
+const energyMetadata = (id: string, name: string): StatisticsMetaData => ({
+  statistic_id: id,
+  statistics_unit_of_measurement: "kWh",
+  source: "recorder",
+  name,
+  has_sum: true,
+  mean_type: StatisticMeanType.NONE,
+  unit_class: "energy",
+});
+
+const temperatureMetadata = (id: string, name: string): StatisticsMetaData => ({
+  statistic_id: id,
+  statistics_unit_of_measurement: "°C",
+  source: "recorder",
+  name,
+  has_sum: false,
+  mean_type: StatisticMeanType.ARITHMETIC,
+  unit_class: "temperature",
+});
+
+const METADATA: Record<string, StatisticsMetaData> = {
+  [HEAT_PUMP_ID]: energyMetadata(HEAT_PUMP_ID, "Heat pump"),
+  [LIGHTING_ID]: energyMetadata(LIGHTING_ID, "Lighting"),
+  [LIVING_ROOM_ID]: temperatureMetadata(LIVING_ROOM_ID, "Living room"),
+  [BEDROOM_ID]: temperatureMetadata(BEDROOM_ID, "Bedroom"),
+};
+
+const NAMES = Object.fromEntries(
+  Object.values(METADATA).map((meta) => [meta.statistic_id, meta.name!])
+);
+
+interface Example {
+  title: string;
+  description: string;
+  statistics: Statistics;
+  statTypes: StatisticType[];
+  chartType: "line" | "line-stack" | "bar" | "bar-stack";
+  unit: string;
+  hideLegend?: boolean;
+  height?: string;
+}
+
+const EXAMPLES: Example[] = [
+  {
+    title: "Sum as bars",
+    description:
+      "The change of a sum for each hour, like an energy statistics graph card.",
+    statistics: { [HEAT_PUMP_ID]: HEAT_PUMP },
+    statTypes: ["change"],
+    chartType: "bar",
+    unit: "kWh",
+  },
+  {
+    title: "Stacked bars",
+    description: "Several sums stacked, to compare what each one adds.",
+    statistics: { [HEAT_PUMP_ID]: HEAT_PUMP, [LIGHTING_ID]: LIGHTING },
+    statTypes: ["change"],
+    chartType: "bar-stack",
+    unit: "kWh",
+  },
+  {
+    title: "Mean, min and max",
+    description: "A measurement with its hourly mean, min and max.",
+    statistics: { [LIVING_ROOM_ID]: LIVING_ROOM },
+    statTypes: ["mean", "min", "max"],
+    chartType: "line",
+    unit: "°C",
+  },
+  {
+    title: "Several statistics",
+    description: "The mean of several measurements with the same unit.",
+    statistics: { [LIVING_ROOM_ID]: LIVING_ROOM, [BEDROOM_ID]: BEDROOM },
+    statTypes: ["mean"],
+    chartType: "line",
+    unit: "°C",
+  },
+  {
+    title: "Without legend",
+    description:
+      "A single statistic with a fixed height, like in the more-info dialog.",
+    statistics: { [LIVING_ROOM_ID]: LIVING_ROOM },
+    statTypes: ["mean", "min", "max"],
+    chartType: "line",
+    unit: "°C",
+    hideLegend: true,
+    height: "240px",
+  },
+];
+
+@customElement("demo-components-statistics-chart")
+export class DemoStatisticsChart extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+    return EXAMPLES.map(
+      (example) => html`
+        <ha-card header=${example.title}>
+          <div class="card-content">
+            <p>${example.description}</p>
+            <statistics-chart
+              .statisticsData=${example.statistics}
+              .metadata=${METADATA}
+              .names=${NAMES}
+              .statTypes=${example.statTypes}
+              .chartType=${example.chartType}
+              period="hour"
+              .unit=${example.unit}
+              .startTime=${START}
+              .endTime=${END}
+              .hideLegend=${example.hideLegend ?? false}
+              .height=${example.height}
+              .clickForMoreInfo=${false}
+            ></statistics-chart>
+          </div>
+        </ha-card>
+      `
+    );
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 800px;
+      margin: 24px auto;
+    }
+    p {
+      margin-top: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-statistics-chart": DemoStatisticsChart;
+  }
+}
@@ -25,6 +25,13 @@ const CONFIGS = [
      entity: "media_player.music_playing",
    },
  },
+  {
+    heading: "Playing Music (all features)",
+    config: {
+      type: "media-control",
+      entity: "media_player.music_all_features",
+    },
+  },
  {
    heading: "Playing Stream",
    config: {
@@ -201,6 +201,50 @@ const ENTITIES = [
      supported_features: FanEntityFeature.SET_SPEED,
    },
  },
+  {
+    entity_id: "fan.on_off_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Bathroom fan",
+      device_class: "fan",
+      percentage: 100,
+      percentage_step: 100,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.six_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen fan",
+      device_class: "fan",
+      percentage: 50,
+      percentage_step: 100 / 6,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.ten_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Living room fan",
+      device_class: "fan",
+      percentage: 70,
+      percentage_step: 10,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.eleven_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Office fan",
+      device_class: "fan",
+      percentage: 45,
+      percentage_step: 100 / 11,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
 ];

 const CONFIGS = [
@@ -410,6 +454,55 @@ const CONFIGS = [
      features: [{ type: "fan-speed" }],
    },
  },
+  {
+    heading: "Fan speed feature (5 speeds, slider style)",
+    config: {
+      type: "tile",
+      entity: "fan.five_speed_fan",
+      features: [{ type: "fan-speed", style: "slider" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (off/on, slider style falls back to buttons)",
+    config: {
+      type: "tile",
+      entity: "fan.on_off_fan",
+      features: [{ type: "fan-speed", style: "slider" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (6 speeds, slider by default)",
+    config: {
+      type: "tile",
+      entity: "fan.six_speed_fan",
+      features: [{ type: "fan-speed" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (6 speeds, buttons style)",
+    config: {
+      type: "tile",
+      entity: "fan.six_speed_fan",
+      features: [{ type: "fan-speed", style: "buttons" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (10 speeds, buttons style)",
+    config: {
+      type: "tile",
+      entity: "fan.ten_speed_fan",
+      features: [{ type: "fan-speed", style: "buttons" }],
+    },
+  },
+  {
+    heading:
+      "Fan speed feature (11 speeds, buttons style falls back to slider)",
+    config: {
+      type: "tile",
+      entity: "fan.eleven_speed_fan",
+      features: [{ type: "fan-speed", style: "buttons" }],
+    },
+  },
  {
    heading: "Fan speed feature (half width)",
    config: {
@@ -430,6 +523,27 @@ const CONFIGS = [
      ],
    },
  },
+  {
+    heading:
+      "Fan speed feature (half width, buttons fall back to a slider when they do not fit)",
+    config: {
+      type: "grid",
+      columns: 2,
+      square: false,
+      cards: [
+        {
+          type: "tile",
+          entity: "fan.six_speed_fan",
+          features: [{ type: "fan-speed", style: "buttons" }],
+        },
+        {
+          type: "tile",
+          entity: "fan.ten_speed_fan",
+          features: [{ type: "fan-speed", style: "buttons" }],
+        },
+      ],
+    },
+  },
  {
    heading: "Fan oscillate feature",
    config: {
@@ -121,7 +121,7 @@ const brandEntries: ConfigEntryExtended[] = (
    ["tuya", "Tuya", "setup_error"],
    ["unifi", "UniFi Network", "not_loaded"],
    ["met", "Meteorologisk institutt (Met.no)", "setup_error"],
-    ["google_assistant", "Google Assistant", "not_loaded"],
+    ["google_assistant", "Google Home", "not_loaded"],
    ["homekit_controller", "HomeKit Device", "setup_retry"],
  ] as [string, string, ConfigEntryExtended["state"]][]
 ).map(([domain, name, entryState]) =>
@@ -40,7 +40,7 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "8.0.8",
+    "@babel/runtime": "8.1.0",
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.4",
    "@codemirror/commands": "6.11.1",
@@ -54,17 +54,17 @@
    "@codemirror/view": "6.43.15",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.8.2",
-    "@formatjs/intl-displaynames": "7.3.15",
-    "@formatjs/intl-durationformat": "0.11.1",
-    "@formatjs/intl-getcanonicallocales": "3.2.12",
-    "@formatjs/intl-listformat": "8.3.15",
-    "@formatjs/intl-locale": "5.3.12",
-    "@formatjs/intl-numberformat": "9.4.3",
-    "@formatjs/intl-pluralrules": "6.3.16",
-    "@formatjs/intl-relativetimeformat": "12.3.16",
+    "@formatjs/intl-datetimeformat": "8.0.2",
+    "@formatjs/intl-displaynames": "8.0.1",
+    "@formatjs/intl-durationformat": "0.12.3",
+    "@formatjs/intl-getcanonicallocales": "3.3.0",
+    "@formatjs/intl-listformat": "9.0.1",
+    "@formatjs/intl-locale": "5.4.2",
+    "@formatjs/intl-numberformat": "10.0.2",
+    "@formatjs/intl-pluralrules": "7.0.2",
+    "@formatjs/intl-relativetimeformat": "13.0.1",
    "@home-assistant/webawesome": "3.14.0-ha.2",
-    "@lezer/common": "1.5.4",
+    "@lezer/common": "1.5.5",
    "@lezer/highlight": "1.2.5",
    "@lit-labs/motion": "1.1.0",
    "@lit-labs/observers": "2.1.0",
@@ -78,11 +78,11 @@
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@swc/helpers": "0.5.23",
-    "@tsparticles/engine": "4.4.0",
-    "@tsparticles/preset-links": "4.4.0",
-    "@versatiles/style": "7.0.1",
+    "@tsparticles/engine": "4.5.1",
+    "@tsparticles/preset-links": "4.5.1",
+    "@versatiles/style": "8.0.0",
    "@vibrant/color": "4.0.4",
-    "@vvo/tzdb": "6.201.1",
+    "@vvo/tzdb": "6.202.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "barcode-detector": "3.2.3",
    "cally": "0.9.2",
@@ -100,8 +100,8 @@
    "element-internals-polyfill": "3.0.2",
    "fullcalendar": "7.1.3",
    "fuse.js": "7.5.0",
-    "hls.js": "1.7.3",
-    "home-assistant-js-websocket": "9.8.0",
+    "hls.js": "1.7.4",
+    "home-assistant-js-websocket": "9.8.1",
    "idb-keyval": "6.3.0",
    "intl-messageformat": "12.1.4",
    "js-yaml": "5.5.0",
@@ -110,7 +110,7 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "maplibre-gl": "6.16.0",
-    "marked": "18.1.1",
+    "marked": "18.1.3",
    "memoize-one": "6.0.0",
    "nanoid": "6.0.2",
    "node-vibrant": "4.0.4",
@@ -137,14 +137,14 @@
  },
  "devDependencies": {
    "@ampproject/remapping": "2.3.0",
-    "@babel/core": "8.0.9",
+    "@babel/core": "8.1.0",
    "@babel/helper-compilation-targets": "8.0.7",
    "@babel/helper-define-polyfill-provider": "1.0.0",
    "@babel/plugin-transform-class-properties": "8.0.1",
    "@babel/plugin-transform-private-methods": "8.0.1",
    "@babel/plugin-transform-runtime": "8.0.6",
    "@babel/preset-env": "8.0.7",
-    "@bundle-stats/plugin-webpack-filter": "4.22.3",
+    "@bundle-stats/plugin-webpack-filter": "4.23.1",
    "@eslint/js": "10.0.1",
    "@gfx/zopfli": "1.0.15",
    "@html-eslint/eslint-plugin": "0.67.0",
@@ -153,8 +153,8 @@
    "@octokit/rest": "22.0.1",
    "@playwright/test": "1.64.1",
    "@rsdoctor/rspack-plugin": "1.6.5",
-    "@rspack/core": "2.2.9",
-    "@rspack/dev-server": "2.2.1",
+    "@rspack/core": "2.3.1",
+    "@rspack/dev-server": "2.2.2",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "7.0.1",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -170,14 +170,14 @@
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@typescript/native": "npm:[email protected]",
-    "@vitest/coverage-v8": "5.0.5",
+    "@vitest/coverage-v8": "5.1.0",
    "babel-loader": "10.1.1",
    "babel-plugin-polyfill-corejs3": "1.0.0",
-    "browserslist": "4.29.4",
+    "browserslist": "4.29.5",
    "browserslist-useragent-regexp": "4.1.4",
    "core-js-compat": "3.51.0",
    "del": "9.0.1",
-    "eslint": "10.13.0",
+    "eslint": "10.14.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.17.1",
@@ -188,8 +188,8 @@
    "fancy-log": "2.0.0",
    "fs-extra": "11.4.1",
    "generate-license-file": "4.2.5",
-    "glob": "13.0.6",
-    "globals": "17.13.0",
+    "glob": "14.0.3",
+    "globals": "17.14.0",
    "gulp": "5.0.1",
    "gulp-json-transform": "0.5.0",
    "gulp-rename": "2.1.0",
@@ -214,16 +214,16 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.72.0",
+    "typescript-eslint": "8.72.1",
    "vite": "8.3.5",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "5.0.5",
+    "vitest": "5.1.0",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "7.4.1"
  },
-  "packageManager": "[email protected]5.0",
+  "packageManager": "[email protected]7.0",
  "volta": {
-    "node": "24.22.1"
+    "node": "24.22.2"
  }
 }
@@ -1,8 +1,8 @@
 diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa526090a00 100644
+index cb433ff25353f4836d2ffc813356f945f42acc6b..0a86ad22d05390a5b9ef002905fcd5926852b956 100644
 --- a/modular/sortable.core.esm.js
 +++ b/modular/sortable.core.esm.js
-@@ -1781,11 +1781,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+@@ -1777,11 +1777,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         }
         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
           capture();
@@ -24,7 +24,7 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
           }
           parentEl = el; // actualization
 
-@@ -1802,7 +1807,12 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+@@ -1798,7 +1803,12 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         targetRect = getRect(target);
         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
           capture();
@@ -38,7 +38,16 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
           parentEl = el; // actualization
 
           changed();
-@@ -1849,10 +1859,15 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+@@ -1818,7 +1828,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           pastFirstInvertThresh = false;
+           isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel;
+         }
+-        direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);
+        direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target, _isRtl(el, vertical));
+         var sibling;
+         if (direction !== 0) {
+           // Check if target is beside dragEl in respective direction (ignoring hidden elements)
+@@ -1845,10 +1855,15 @@ Sortable.prototype = /** @lends Sortable.prototype */{
           _silent = true;
           setTimeout(_unsilent, 30);
           capture();
@@ -58,3 +67,53 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
           }
 
           // Undo chrome's scroll adjustment (has no effect on other browsers)
+@@ -2242,19 +2257,48 @@ function _disableDraggable(el) {
+ function _unsilent() {
+   _silent = false;
+ }
+// Horizontal RTL lists run from right to left. Mirroring the x axis lets the
+// checks below keep assuming that the list runs from left to right.
+function _isRtl(el, vertical) {
+  return !vertical && css(el, 'direction') === 'rtl';
+}
+function _mirrorX(rect) {
+  return {
+    left: -rect.right,
+    right: -rect.left,
+    top: rect.top,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height
+  };
+}
+ function _ghostIsFirst(evt, vertical, sortable) {
+   var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true));
+   var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
+  if (_isRtl(sortable.el, vertical)) {
+    evt = { clientX: -evt.clientX, clientY: evt.clientY };
+    firstElRect = _mirrorX(firstElRect);
+    childContainingRect = _mirrorX(childContainingRect);
+  }
+   var spacer = 10;
+   return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left;
+ }
+ function _ghostIsLast(evt, vertical, sortable) {
+   var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable));
+   var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
+  if (_isRtl(sortable.el, vertical)) {
+    evt = { clientX: -evt.clientX, clientY: evt.clientY };
+    lastElRect = _mirrorX(lastElRect);
+    childContainingRect = _mirrorX(childContainingRect);
+  }
+   var spacer = 10;
+   return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top;
+ }
+-function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) {
+function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget, rtl) {
+  if (rtl) {
+    evt = { clientX: -evt.clientX, clientY: evt.clientY };
+    targetRect = _mirrorX(targetRect);
+  }
+   var mouseOnAxis = vertical ? evt.clientY : evt.clientX,
+     targetLength = vertical ? targetRect.height : targetRect.width,
+     targetS1 = vertical ? targetRect.top : targetRect.left,
@@ -26,7 +26,7 @@ overrides:
  lit-html: 3.3.3
  clean-css: 5.3.3
  "@lit/reactive-element": 2.1.2
-  tslib: 2.8.1
+  tslib: 2.9.1

 patchedDependencies:
  "@material/[email protected]": patches/@[email protected]
@@ -0,0 +1,8 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="18" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="28" y="8" width="18" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="48" y="8" width="18" height="12" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="68" y="8" width="18" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="#1C1C1C"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="18" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="28" y="8" width="18" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="48" y="8" width="18" height="12" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="68" y="8" width="18" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20261028.5"
+version      = "20261028.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -13,6 +13,9 @@
  "enabledManagers": ["npm", "nvm", "custom.regex", "github-actions"],
  "minimumReleaseAge": "3 days",
  "postUpdateOptions": ["pnpmDedupe"],
+  "constraints": {
+    "ghActionsLock": "v0.4.1"
+  },
  "lockFileMaintenance": {
    "description": ["Run after patch releases but before next beta"],
    "enabled": true,
@@ -59,12 +62,26 @@
      "datasourceTemplate": "github-releases",
      "extractVersionTemplate": "^v(?<version>.+)$"
    },
+    {
+      "description": "Keep gh-actions-lock in CI and Renovate's lockfile generator on the same version",
+      "customType": "regex",
+      "managerFilePatterns": [
+        "/^\\.github/workflows/actions-lock\\.yaml$/",
+        "/^renovate\\.json$/"
+      ],
+      "matchStrings": [
+        "GH_ACTIONS_LOCK_VERSION: (?<currentValue>v\\d+\\.\\d+\\.\\d+)",
+        "\"ghActionsLock\": \"(?<currentValue>v\\d+\\.\\d+\\.\\d+)\""
+      ],
+      "depNameTemplate": "github/gh-actions-lock",
+      "datasourceTemplate": "github-releases"
+    },
    {
      "description": "Keep Playwright CI container image up to date",
      "customType": "regex",
      "managerFilePatterns": ["/^\\.github/workflows/e2e\\.yaml$/"],
      "matchStrings": [
-        "mcr\\.microsoft\\.com/playwright:(?<currentValue>v\\d+\\.\\d+\\.\\d+-noble)"
+        "mcr\\.microsoft\\.com/playwright:(?<currentValue>v\\d+\\.\\d+\\.\\d+-noble)(?:@(?<currentDigest>sha256:[a-f0-9]{64}))?"
      ],
      "depNameTemplate": "mcr.microsoft.com/playwright",
      "datasourceTemplate": "docker",
@@ -4,8 +4,8 @@ import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-next";
-import "../components/ha-list";
-import "../components/ha-list-item";
+import "../components/item/ha-list-item-button";
+import "../components/list/ha-list-base";
 import type { AuthProvider } from "../data/auth";

 declare global {
@@ -32,21 +32,19 @@ export class HaPickAuthProvider extends LitElement {
          >${this._localize("ui.panel.page-authorize.pick_auth_provider")}</span
        >
      </h3>
-      <ha-list>
+      <ha-list-base>
        ${this.authProviders.map(
          (provider) => html`
-            <ha-list-item
-              hasMeta
-              role="button"
+            <ha-list-item-button
              .auth_provider=${provider}
              @click=${this._handlePick}
            >
-              ${provider.name}
-              <ha-icon-next slot="meta"></ha-icon-next>
-            </ha-list-item>
+              <span slot="headline">${provider.name}</span>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-list-item-button>
          `
        )}
-      </ha-list>
+      </ha-list-base>
    `;
  }

@@ -80,9 +78,9 @@ export class HaPickAuthProvider extends LitElement {
      background: var(--card-background-color);
      padding: 0 15px;
    }
-    ha-list {
+    ha-list-base {
      margin: 16px -16px 0;
-      --mdc-list-side-padding: 24px;
+      --ha-row-item-padding-inline: 24px;
    }
  `;
 }
@@ -0,0 +1,19 @@
+/**
+ * Return a copy of the list with the value in it, without adding duplicates
+ * @param values - The current list
+ * @param value - The value to add
+ */
+export const arrayWith = <T>(
+  values: readonly T[] | undefined,
+  value: T
+): T[] => (values?.includes(value) ? [...values] : [...(values ?? []), value]);
+
+/**
+ * Return a copy of the list without the value
+ * @param values - The current list
+ * @param value - The value to remove
+ */
+export const arrayWithout = <T>(
+  values: readonly T[] | undefined,
+  value: T
+): T[] => (values ?? []).filter((v) => v !== value);
@@ -0,0 +1,312 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import {
+  applyConfigChanges,
+  diffConfigs,
+  invertConfigChanges,
+  type ConfigChange,
+} from "../util/config-change";
+import { pathStartsWith, type ConfigPath } from "../util/config-path";
+import { afterNextRender } from "../util/render-status";
+
+const UNDO_REDO_STACK_LIMIT = 75;
+
+/**
+ * One undo step. `meta` is what the commit described the changes with, and
+ * is missing for changes made without a commit.
+ */
+export interface ConfigChangeStep<Meta = unknown> {
+  changes: ConfigChange[];
+  meta?: Meta;
+}
+
+const changedPaths = (changes: ConfigChange[]): ConfigPath[] =>
+  changes.flatMap((change) =>
+    change.op === "move" ? [change.from, change.path] : [change.path]
+  );
+
+// Whether `changes` only touch values at, in or around the paths of `of`
+const onlyTouches = (changes: ConfigChange[], of: ConfigChange[]) => {
+  const paths = changedPaths(of);
+  return changedPaths(changes).every((changed) =>
+    paths.some(
+      (path) => pathStartsWith(changed, path) || pathStartsWith(path, changed)
+    )
+  );
+};
+
+export interface ConfigChangeUndoRedoControllerConfig<ConfigType, Meta> {
+  stackLimit?: number;
+  currentConfig: () => ConfigType | undefined;
+  /**
+   * Applies the config after undo or redo, with the changes that led to it.
+   * On undo these are the inverted changes of the step, in reverse order.
+   */
+  apply: (
+    config: ConfigType,
+    step: ConfigChangeStep<Meta>,
+    undo: boolean
+  ) => void;
+  /** Called for every container copied while applying a change. */
+  onCopy?: (original: object, copy: object) => void;
+}
+
+/**
+ * Undo and redo for immutably updated configs. Instead of whole snapshots, each
+ * step stores the changes that were made, with their paths, so the host can
+ * point the user at what undo or redo touched.
+ *
+ * @template ConfigType The type of configuration to manage.
+ * @template Meta Extra state stored with each step, e.g. UI state to restore.
+ */
+export class ConfigChangeUndoRedoController<
+  ConfigType,
+  Meta = undefined,
+> implements ReactiveController {
+  private _host: ReactiveControllerHost;
+
+  private _undoStack: ConfigChangeStep<Meta>[] = [];
+
+  private _redoStack: ConfigChangeStep<Meta>[] = [];
+
+  private readonly _stackLimit: number = UNDO_REDO_STACK_LIMIT;
+
+  private readonly _options: ConfigChangeUndoRedoControllerConfig<
+    ConfigType,
+    Meta
+  >;
+
+  // The config after the last commit, undo or redo
+  private _lastConfig?: ConfigType;
+
+  private _grouping = false;
+
+  // The step commits add to until endGroup()
+  private _groupStep?: ConfigChangeStep<Meta>;
+
+  // Whether the last undo may still be answered by an editor putting back
+  // what it removed
+  private _undoPending = false;
+
+  private _undoWithPreviousScheduled = false;
+
+  constructor(
+    host: ReactiveControllerHost,
+    options: ConfigChangeUndoRedoControllerConfig<ConfigType, Meta>
+  ) {
+    if (options.stackLimit !== undefined) {
+      this._stackLimit = options.stackLimit;
+    }
+    this._options = options;
+    this._host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    window.addEventListener("undo-change", this._onUndoChange);
+  }
+
+  hostDisconnected() {
+    window.removeEventListener("undo-change", this._onUndoChange);
+    this._forgetUndo();
+  }
+
+  private _onUndoChange = (ev: Event) => {
+    ev.stopPropagation();
+    this.undo();
+  };
+
+  public get canUndo(): boolean {
+    return this._undoStack.length > 0;
+  }
+
+  public get canRedo(): boolean {
+    return this._redoStack.length > 0;
+  }
+
+  /**
+   * Records the difference between two configs and clears the redo stack.
+   * Configs without a difference are not recorded. `describe` is called with
+   * all changes of the step, to store state about them with it.
+   */
+  public commit(
+    before: ConfigType,
+    after: ConfigType,
+    describe?: (changes: ConfigChange[]) => Meta
+  ) {
+    // An editor put back what the last undo removed, e.g. defaults it fills
+    // in, maybe in several commits. That step can't be undone on its own, so
+    // it is undone together with the one before it.
+    const undone = this._redoStack[this._redoStack.length - 1];
+    if (
+      this._undoPending &&
+      undone &&
+      before === this._lastConfig &&
+      onlyTouches(diffConfigs(before, after), undone.changes)
+    ) {
+      this._lastConfig = after;
+      this._scheduleUndoWithPrevious(undone);
+      return;
+    }
+    this._forgetUndo();
+    this._syncExternalChanges(before);
+    this._lastConfig = after;
+    this._record(before, after, describe);
+  }
+
+  public undo() {
+    const current = this._options.currentConfig();
+    this._syncExternalChanges(current);
+    const step = this._undoStack.pop();
+    if (!step || current === undefined) {
+      return;
+    }
+    this._redoStack.push(step);
+    this._rememberUndo();
+    this._applyStep(
+      current,
+      { changes: invertConfigChanges(step.changes), meta: step.meta },
+      true
+    );
+  }
+
+  public redo() {
+    this._forgetUndo();
+    const current = this._options.currentConfig();
+    this._syncExternalChanges(current);
+    const step = this._redoStack.pop();
+    if (!step || current === undefined) {
+      return;
+    }
+    this._undoStack.push(step);
+    this._applyStep(current, step, false);
+  }
+
+  /**
+   * Records the commits until `endGroup()` as one step, e.g. for a drag
+   * between two lists, which report their changes one after the other.
+   */
+  public startGroup() {
+    this._grouping = true;
+    this._groupStep = undefined;
+  }
+
+  public endGroup() {
+    this._grouping = false;
+    this._groupStep = undefined;
+  }
+
+  public reset() {
+    this._undoStack = [];
+    this._redoStack = [];
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Records a change made without a commit, e.g. in the YAML editor or a
+   * dialog, as its own step. Without it, later undo steps would replay on a
+   * config they weren't recorded on and could hit another row.
+   */
+  private _syncExternalChanges(config: ConfigType | undefined) {
+    const last = this._lastConfig;
+    this._lastConfig = config;
+    if (config === last || config === undefined || last === undefined) {
+      return;
+    }
+    this._record(last, config);
+  }
+
+  private _record(
+    before: ConfigType,
+    after: ConfigType,
+    describe?: (changes: ConfigChange[]) => Meta
+  ) {
+    const changes = diffConfigs(before, after);
+    if (!changes.length) {
+      return;
+    }
+    const group = this._groupStep;
+    if (group && group === this._undoStack[this._undoStack.length - 1]) {
+      group.changes = [...group.changes, ...changes];
+      if (describe) {
+        group.meta = describe(group.changes);
+      }
+    } else {
+      if (this._undoStack.length >= this._stackLimit) {
+        this._undoStack.shift();
+      }
+      const step = { changes, meta: describe?.(changes) };
+      this._undoStack.push(step);
+      if (this._grouping) {
+        this._groupStep = step;
+      }
+    }
+    this._redoStack = [];
+    this._host.requestUpdate();
+  }
+
+  // Editors put defaults back on their own. Anything after the user's next
+  // input is a change of their own, even if it puts the same value back.
+  private _rememberUndo() {
+    this._forgetUndo();
+    this._undoPending = true;
+    window.addEventListener("pointerdown", this._forgetUndo, true);
+    window.addEventListener("keydown", this._forgetUndo, true);
+  }
+
+  private _forgetUndo = () => {
+    this._undoPending = false;
+    window.removeEventListener("pointerdown", this._forgetUndo, true);
+    window.removeEventListener("keydown", this._forgetUndo, true);
+  };
+
+  // Waits until the editors rendered the undo. One still updating could
+  // otherwise write an old value back while the next undo runs.
+  private _scheduleUndoWithPrevious(step: ConfigChangeStep<Meta>) {
+    if (this._undoWithPreviousScheduled) {
+      return;
+    }
+    this._undoWithPreviousScheduled = true;
+    afterNextRender(() => {
+      this._undoWithPreviousScheduled = false;
+      // Another undo or redo came first
+      if (this._redoStack[this._redoStack.length - 1] !== step) {
+        return;
+      }
+      this._redoStack.pop();
+      const previous = this._undoStack.pop();
+      if (!previous) {
+        this._host.requestUpdate();
+        return;
+      }
+      this._undoStack.push({
+        changes: [...previous.changes, ...step.changes],
+        meta: previous.meta,
+      });
+      this.undo();
+    });
+  }
+
+  private _applyStep(
+    current: ConfigType,
+    step: ConfigChangeStep<Meta>,
+    undo: boolean
+  ) {
+    const config = applyConfigChanges(
+      current,
+      step.changes,
+      this._options.onCopy
+    );
+    this._lastConfig = config;
+    this._options.apply(config, step, undo);
+    this._host.requestUpdate();
+  }
+}
+
+declare global {
+  interface HASSDomEvents {
+    "undo-change": undefined;
+  }
+}
@@ -26,8 +26,10 @@ export interface QueryParamsControllerOptions {
   * Called when the page of the host is navigated to while the host is
   * connected, like a second link to an open page or coming back to it. Read
   * the URL with `searchParams()` and apply it, then `write()` the state back.
+   * Gets the `popstate` or `location-changed` event, or nothing when the host
+   * is connected again.
   */
-  navigated: () => void;
+  navigated: (ev?: Event) => void;
  /**
   * The path of the host's page, for a page that can first be connected on
   * a sub-path it sends on to itself, like an add link. Defaults to the path
@@ -159,7 +161,7 @@ export class QueryParamsController<
    }
    // Leaving the page gets here too, before the router swaps the page
    if (this._isActive()) {
-      this._options.navigated();
+      this._options.navigated(ev);
    }
  };

@@ -20,6 +20,11 @@ export interface EntityFilter {

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

+export type EntityFilterSources = Pick<
+  HomeAssistant,
+  "states" | "entities" | "devices" | "areas" | "floors"
+>;
+
 const normalizeFilterArray = <T>(
  value: T | null | T[] | (T | null)[] | undefined
 ): Set<T | null> | undefined => {
@@ -157,3 +162,20 @@ export const findEntities = (

  return results;
 };
+
+export const findFilteredEntities = (
+  sources: EntityFilterSources,
+  filters: EntityFilter[]
+): string[] => {
+  const filterFuncs = filters.map((filter) =>
+    generateEntityFilter(
+      sources.states,
+      sources.entities,
+      sources.devices,
+      sources.areas,
+      sources.floors,
+      filter
+    )
+  );
+  return findEntities(Object.keys(sources.states), filterFuncs);
+};
@@ -28,7 +28,7 @@ const RASTER_TILE_URL = `${MAP_TILES_PATH}/raster/{z}/{x}/{y}.png?token={token}`
 // policy strips again unless the tiles ask for it back.
 const DEMO_RASTER_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
 const OSM_ATTRIBUTION =
-  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+  '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';

 // Browsers keep about 16 live WebGL contexts and drop the oldest, which a
 // dashboard full of map cards hits. A transient loss is restored, hence a grace.
@@ -129,7 +129,7 @@ export const loadStyle = async (
      ).buildMapStyle(
        mapStyle.palette,
        mapStyle.options ?? {},
-        mapStyle.baseColors
+        mapStyle.styleOptions
      );

  if (typeof style.sprite === "string") {
@@ -35,7 +35,7 @@ const styleUrls = () => {
 export const buildMapStyle = async (
  palette: MapPalette,
  options: Record<string, unknown>,
-  baseColors?: Record<string, string>
+  styleOptions?: Record<string, unknown>
 ): Promise<StyleSpecification> => {
  const [{ osm }, resolvedUrls] = await Promise.all([
    import("@versatiles/style"),
@@ -50,13 +50,9 @@ export const buildMapStyle = async (
  // The builder throws on an option it does not know and on a color it cannot
  // parse. Those come from a card config or a theme, so one typo would
  // otherwise drop the whole card to raster tiles. Step back to the style as it
-  // ships - colors included, or the default would come out as the builder's
-  // unpainted cartography - and only then to the bare palette.
-  const attempts = [
-    options,
-    ...(baseColors ? [{ colors: baseColors }] : []),
-    {},
-  ];
+  // comes - colors and adjustments included, or the default would come out as
+  // the builder's unpainted cartography - and only then to the bare palette.
+  const attempts = [options, ...(styleOptions ? [styleOptions] : []), {}];
  let style: StyleSpecification | undefined;
  for (const attempt of attempts) {
    try {
@@ -1,11 +1,12 @@
 // The vector cartographies the map can draw. Each is a light and a dark
-// palette; the theme mode picks the half.
+// palette; the theme mode picks the half, unless the style only has one.
 //
 // Only the default pair is generated at build time (build-scripts/gulp/
 // map-assets.js); everything else is built in the browser from the same
 // builder, against the tiles and glyphs core's proxy already serves.

 import { HA_MAP_COLORS, HA_MAP_COLORS_DARK } from "./ha-map-palette";
+import { NEON_MAP_COLORS_DARK, NEON_MAP_OPTIONS } from "./neon-map-palette";

 /** Style ids, in the order the card editor offers them */
 export const MAP_STYLES = [
@@ -15,6 +16,7 @@ export const MAP_STYLES = [
  "muted",
  "gray",
  "toner",
+  "neon",
 ] as const;

 export type MapStyle = (typeof MAP_STYLES)[number];
@@ -26,13 +28,19 @@ type VersatilesPalette = "colorful" | "natural" | "muted" | "gray" | "toner";

 export type MapPalette = VersatilesPalette | `${VersatilesPalette}-dark`;

-/** A cartography plus the colors painted over it; only the default has any */
+/**
+ * A cartography plus what is painted over it; the VersaTiles palettes have
+ * nothing. The color sets say which halves a style has: both, or neither, and
+ * the theme mode picks; only one, and that is the half the map draws.
+ */
 const STYLE_PALETTES: Record<
  MapStyle,
  {
    palette: VersatilesPalette;
    colors?: Record<string, string>;
    colorsDark?: Record<string, string>;
+    /** Builder options the style comes with, by option group */
+    options?: Record<string, Record<string, unknown>>;
  }
 > = {
  default: {
@@ -40,6 +48,11 @@ const STYLE_PALETTES: Record<
    colors: HA_MAP_COLORS,
    colorsDark: HA_MAP_COLORS_DARK,
  },
+  neon: {
+    palette: "colorful",
+    colorsDark: NEON_MAP_COLORS_DARK,
+    options: NEON_MAP_OPTIONS,
+  },
  colorful: { palette: "colorful" },
  natural: { palette: "natural" },
  muted: { palette: "muted" },
@@ -96,11 +109,12 @@ export interface ResolvedMapStyle {
  /** Fetched rather than built: the default, while nothing was added to it */
  shipped?: "light" | "dark";
  /**
-   * The style's own colors, without what the theme or the card painted over
-   * them. What to fall back on when the builder rejects an adjustment, so a
-   * bad value costs the adjustments rather than the cartography.
+   * The style as it comes: its colors and its own adjustments, without what
+   * the theme or the card painted over them. What to fall back on when the
+   * builder rejects an adjustment, so a bad value costs the card's adjustments
+   * rather than the style.
   */
-  baseColors?: Record<string, string>;
+  styleOptions?: Record<string, unknown>;
 }

 const isStyle = (value: unknown): value is MapStyle =>
@@ -110,9 +124,31 @@ export const isCustomMapStyle = (
  style: MapStyleConfig | undefined
 ): style is CustomMapStyleConfig => typeof style === "object" && style !== null;

-export const paletteFor = (style: MapStyle, darkMode: boolean): MapPalette => {
+const toStyle = (style: MapStyleConfig | undefined): MapStyle => {
+  const named = isCustomMapStyle(style) ? style.base : style;
+  return isStyle(named) ? named : DEFAULT_MAP_STYLE;
+};
+
+/**
+ * Whether the map comes out dark: the theme mode's answer, unless the style
+ * only has the one half. What the map's own chrome and the theme tokens have
+ * to follow, rather than the theme mode.
+ */
+export const isDarkMapStyle = (
+  style: MapStyleConfig | undefined,
+  darkMode: boolean
+): boolean => {
+  const { colors, colorsDark } = STYLE_PALETTES[toStyle(style)];
+  if (Boolean(colors) !== Boolean(colorsDark)) {
+    return Boolean(colorsDark);
+  }
+  return darkMode;
+};
+
+/** The half to draw; `dark` is the map's, from isDarkMapStyle */
+export const paletteFor = (style: MapStyle, dark: boolean): MapPalette => {
  const { palette } = STYLE_PALETTES[style];
-  return darkMode ? `${palette}-dark` : palette;
+  return dark ? `${palette}-dark` : palette;
 };

 // An allowlist, not a passthrough: the builder also takes the tile, glyph and
@@ -198,19 +234,33 @@ export const resolveMapStyle = (
  themeColors?: Record<string, string>
 ): ResolvedMapStyle => {
  const custom = isCustomMapStyle(style) ? style : undefined;
-  const named = custom ? custom.base : style;
-  const mapStyle = isStyle(named) ? named : DEFAULT_MAP_STYLE;
+  const mapStyle = toStyle(style);
+  // A dark-only style picks the dark half of everything, not just the palette.
+  const dark = isDarkMapStyle(style, darkMode);

-  const palette = paletteFor(mapStyle, darkMode);
-  const options = custom ? builderOptions(custom, darkMode) : {};
+  const palette = paletteFor(mapStyle, dark);
+  const options = custom ? builderOptions(custom, dark) : {};
  // Before the colors below are merged in, so it answers whether the card
  // asked for anything of its own.
  const cardAdjusted = Object.keys(options).length > 0;

+  // The style's own adjustments go under the card's, group by group, so a
+  // card that sets one recolor value keeps the style's others.
+  const {
+    colors,
+    colorsDark,
+    options: styleOptions,
+  } = STYLE_PALETTES[mapStyle];
+  for (const [group, values] of Object.entries(styleOptions ?? {})) {
+    options[group] = {
+      ...values,
+      ...(options[group] as Record<string, unknown> | undefined),
+    };
+  }
+
  // Bottom up: the style's colors, what the theme repaints, then what the card
  // names - so a card that sets one color keeps the rest of the look.
-  const { colors, colorsDark } = STYLE_PALETTES[mapStyle];
-  const styleColors = (darkMode ? colorsDark : colors) ?? colors;
+  const styleColors = dark ? colorsDark : colors;
  if (styleColors || themeColors) {
    options.colors = {
      ...styleColors,
@@ -223,11 +273,19 @@ export const resolveMapStyle = (
    return { palette };
  }

-  const base = styleColors ? { baseColors: styleColors } : {};
+  const own = styleColors || styleOptions;
+  const base = own
+    ? {
+        styleOptions: {
+          ...styleOptions,
+          ...(styleColors && { colors: styleColors }),
+        },
+      }
+    : {};

  // Anything added on top of the shipped default has to be built here.
  const untouched = !themeColors && !cardAdjusted;
  return mapStyle === DEFAULT_MAP_STYLE && untouched
-    ? { palette, options, ...base, shipped: darkMode ? "dark" : "light" }
+    ? { palette, options, ...base, shipped: dark ? "dark" : "light" }
    : { palette, options, ...base };
 };
@@ -0,0 +1,13 @@
+import { isAndroidDevice } from "../../util/is_android";
+import { isIosDevice } from "../../util/is_ios";
+
+export const navigationUrl = (latitude: number, longitude: number): string => {
+  const point = `${latitude},${longitude}`;
+  if (isIosDevice()) {
+    return `https://maps.apple.com/?daddr=${point}`;
+  }
+  if (isAndroidDevice()) {
+    return `geo:${point}?q=${point}`;
+  }
+  return `https://www.openstreetmap.org/directions?to=${encodeURIComponent(point)}#map=15/${latitude}/${longitude}`;
+};
@@ -0,0 +1,64 @@
+// The "neon" style: the VersaTiles "colorful" cartography repainted as a night
+// map, glowing roads on near-black ground. A dark set and no light one, which
+// is what makes the style dark whatever the theme mode.
+
+export const NEON_MAP_COLORS_DARK = {
+  background: "#07021a",
+  land: "#07021a",
+  water: "#13215e",
+  labelWater: "#00e5ff",
+  glacier: "#1b2a6b",
+  natureWood: "#0d1f2e",
+  natureGrass: "#101a33",
+  naturePark: "#12203a",
+  natureLeisure: "#111a30",
+  natureAgriculture: "#0d1528",
+  natureWetland: "#0e2440",
+  natureSand: "#1a1230",
+  natureRock: "#140c28",
+  areaResidential: "#0c0524",
+  areaCommercial: "#140430",
+  areaIndustrial: "#10062a",
+  areaWaste: "#160a2e",
+  areaBurial: "#0d0a26",
+  siteParking: "#0f0728",
+  siteSports: "#0a1c2c",
+  siteEducation: "#160a34",
+  siteHospital: "#2a0a2a",
+  siteDanger: "#ff1744",
+  sitePrison: "#1c0a28",
+  siteConstruction: "#3a1d5c",
+  building: "#160a33",
+  buildingBg: "#8a2be2",
+  roadStreet: "#00e5ff",
+  roadStreetBg: "#062b52",
+  roadSecondary: "#8f7bff",
+  roadSecondaryBg: "#241058",
+  roadTrunk: "#ff6ec7",
+  roadTrunkBg: "#4a0f38",
+  roadMotorway: "#ff2d95",
+  roadMotorwayBg: "#5c0033",
+  transitRail: "#7b2cff",
+  transitSubway: "#b14cff",
+  transitCycle: "#00ffa3",
+  transitFoot: "#2e2a55",
+  boundary: "#39ff14",
+  boundaryDisputed: "#1f7a0d",
+  label: "#ff9ad5",
+  labelHalo: "rgba(7,2,26,0.9)",
+  labelSymbol: "#ff9ad5",
+  labelPoi: "#00e5ff",
+  labelShield: "#12002a",
+  labelHousenumber: "rgba(0,229,255,0.35)",
+};
+
+/** Builder options the style comes with, under whatever a card adds */
+export const NEON_MAP_OPTIONS = {
+  recolor: { saturate: 0.35, contrast: 1.15 },
+  text: {
+    transform: "uppercase",
+    letterSpacing: 0.12,
+    haloWidth: 2,
+    haloBlur: 0,
+  },
+};
@@ -1,14 +0,0 @@
-import type {
-  ListItem,
-  RequestSelectedDetail,
-} from "@material/mwc-list/mwc-list-item";
-
-export const shouldHandleRequestSelectedEvent = (
-  ev: CustomEvent<RequestSelectedDetail>
-): boolean => {
-  if (!ev.detail.selected || ev.detail.source !== "property") {
-    return false;
-  }
-  (ev.currentTarget as ListItem).selected = false;
-  return true;
-};
@@ -16,6 +16,13 @@ declare global {
 export interface NavigateOptions {
  replace?: boolean;
  data?: Record<string, unknown>;
+  /**
+   * Leave open dialogs open. For a replace that only canonicalizes the current
+   * URL, like a router filling in its default page: a dialog restored from the
+   * URL, such as a more-info deep link, may already be open at that point, and
+   * the entry keeps its state so back still closes it.
+   */
+  keepDialogs?: boolean;
 }

 // max time to wait for dialogs to close before navigating
@@ -196,7 +203,8 @@ const buildHistoryState = (
 };

 const performNavigation = async (path: string, options?: NavigateOptions) => {
-  const canProceed = await ensureDialogsClosed(Date.now());
+  const keepDialogs = options?.keepDialogs || false;
+  const canProceed = await (keepDialogs || ensureDialogsClosed(Date.now()));
  if (!canProceed) {
    return false;
  }
@@ -215,7 +223,10 @@ const performNavigation = async (path: string, options?: NavigateOptions) => {

  const { history } = mainWindow;

-  if (replace) {
+  if (replace && keepDialogs) {
+    // Same entry under its canonical URL: its state, dialog included, stays.
+    history.replaceState(history.state, "", path);
+  } else if (replace) {
    // A replaced entry keeps its predecessor, so it keeps `from`.
    const { root, from } = history.state ?? {};
    const data = root ? { root: true } : options?.data;
@@ -20,6 +20,7 @@ export const entitiesFilterQueryParamConfig = {
    "floor",
    "area",
    "device",
+    "device_class",
    "domain",
    "entity_domain",
    "label",
@@ -50,6 +51,7 @@ export const entitiesFilterQueryParams = (
  floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
  area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
  device: list(filters["ha-filter-devices"]),
+  device_class: list(filters["ha-filter-device-classes"]),
  domain: list(filters["ha-filter-integrations"]),
  entity_domain: list(filters["ha-filter-domains"]),
  label: list(filters["ha-filter-labels"]),
@@ -114,6 +116,7 @@ export const entitiesLinkFromUrl = (
      "ha-filter-floor-areas":
        floors.length || areas.length ? { floors, areas } : undefined,
      "ha-filter-devices": values("device"),
+      "ha-filter-device-classes": values("device_class"),
      "ha-filter-integrations": values("domain"),
      "ha-filter-domains": values("entity_domain"),
      "ha-filter-labels": values("label"),
@@ -1,3 +1,4 @@
+import { SYSTEM_LOG_LEVELS, type SystemLogLevel } from "../../data/system_log";
 import {
  decodeQueryParams,
  hasQueryParams,
@@ -17,7 +18,7 @@ export const logSearchQueryParamConfig = {
 // `raw` shows the full Home Assistant Core log instead of the errors.
 export const logsQueryParamConfig = {
  string: ["provider", "search", "filter"],
-  list: ["integration"],
+  list: ["integration", "level"],
  boolean: [{ key: "raw", trueValue: "1" }],
 } as const satisfies QueryParamConfig;

@@ -28,13 +29,19 @@ export interface LogsState {
  search: string;
  // Only apply to the Home Assistant Core log
  integrations: string[];
+  // Only apply to the Home Assistant Core errors, not the raw log
+  levels: SystemLogLevel[];
  raw: boolean;
 }

+const isLevel = (level: string): level is SystemLogLevel =>
+  (SYSTEM_LOG_LEVELS as readonly string[]).includes(level);
+
 export const DEFAULT_LOGS_STATE: LogsState = {
  provider: DEFAULT_LOG_PROVIDER,
  search: "",
  integrations: [],
+  levels: [],
  raw: false,
 };

@@ -53,6 +60,7 @@ export const logsQueryParams = (state: LogsState): LogsQueryParams => ({
  search: state.search,
  integration:
    state.provider === DEFAULT_LOG_PROVIDER ? state.integrations : undefined,
+  level: state.provider === DEFAULT_LOG_PROVIDER ? state.levels : undefined,
  raw: state.provider === DEFAULT_LOG_PROVIDER && state.raw,
 });

@@ -71,6 +79,7 @@ export const logsLinkFromUrl = (
    provider,
    search: params.search ?? params.filter ?? "",
    integrations: core ? (params.integration?.filter(Boolean) ?? []) : [],
+    levels: core ? (params.level?.filter(isLevel) ?? []) : [],
    raw: core && !!params.raw,
  };
 };
@@ -0,0 +1,408 @@
+import { deepEqual } from "./deep-equal";
+import {
+  getAtPath,
+  pathStartsWith,
+  setAtPath,
+  type ConfigPath,
+} from "./config-path";
+
+/**
+ * One edit of a config as plain JSON, so it can be stored for undo, shown as
+ * a diff or proposed by someone else and applied later.
+ *
+ * Like JSON Patch, `add` and `remove` work on object keys and list items: in a
+ * list, `add` inserts at the index that ends `path` and later items shift.
+ * `remove` and `replace` keep the old value, so they can be inverted and
+ * checked against the config they are applied to. `move` removes the item at
+ * `from`, then adds it at `path`.
+ *
+ * Changes apply in order, each to the config the previous ones left.
+ */
+export type ConfigChange =
+  | { op: "add"; path: ConfigPath; value: unknown }
+  | { op: "remove"; path: ConfigPath; value: unknown }
+  | { op: "replace"; path: ConfigPath; before: unknown; after: unknown }
+  | { op: "move"; from: ConfigPath; path: ConfigPath };
+
+// Key order counts, as the editors compare configs with it
+const equal = (a: unknown, b: unknown) =>
+  deepEqual(a, b, { compareKeyOrder: true });
+
+const isContainer = (value: unknown): value is object =>
+  typeof value === "object" && value !== null;
+
+/** Whether removing and appending keys turns `from` into `to`. */
+const keepsKeyOrder = (from: string[], to: string[]) => {
+  const kept = from.filter((key) => to.includes(key));
+  return [...kept, ...to.filter((key) => !from.includes(key))].every(
+    (key, index) => key === to[index]
+  );
+};
+
+const itemsEqual = (
+  a: unknown[],
+  aStart: number,
+  b: unknown[],
+  bStart: number,
+  count: number
+) => {
+  for (let i = 0; i < count; i++) {
+    if (!equal(a[aStart + i], b[bStart + i])) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const diffLists = (
+  before: unknown[],
+  after: unknown[],
+  path: ConfigPath,
+  changes: ConfigChange[]
+) => {
+  const length = Math.min(before.length, after.length);
+  let first = 0;
+  while (first < length && equal(before[first], after[first])) {
+    first++;
+  }
+  if (first === length && before.length === after.length) {
+    return;
+  }
+  if (
+    after.length === before.length + 1 &&
+    itemsEqual(before, first, after, first + 1, before.length - first)
+  ) {
+    changes.push({ op: "add", path: [...path, first], value: after[first] });
+    return;
+  }
+  if (
+    before.length === after.length + 1 &&
+    itemsEqual(before, first + 1, after, first, after.length - first)
+  ) {
+    changes.push({
+      op: "remove",
+      path: [...path, first],
+      value: before[first],
+    });
+    return;
+  }
+  if (Math.abs(before.length - after.length) === 1) {
+    diffListsWithOneMore(before, after, path, changes);
+    return;
+  }
+  if (before.length !== after.length) {
+    changes.push({ op: "replace", path, before, after });
+    return;
+  }
+  let last = before.length - 1;
+  while (equal(before[last], after[last])) {
+    last--;
+  }
+  const count = last - first;
+  // A move shifts the items between its old and new index by one
+  if (
+    count > 0 &&
+    equal(after[last], before[first]) &&
+    itemsEqual(before, first + 1, after, first, count)
+  ) {
+    changes.push({ op: "move", from: [...path, first], path: [...path, last] });
+    return;
+  }
+  if (
+    count > 0 &&
+    equal(after[first], before[last]) &&
+    itemsEqual(before, first, after, first + 1, count)
+  ) {
+    changes.push({ op: "move", from: [...path, last], path: [...path, first] });
+    return;
+  }
+  for (let index = first; index <= last; index++) {
+    diffValues(before[index], after[index], [...path, index], changes);
+  }
+};
+
+const sameKind = (a: unknown, b: unknown) =>
+  isContainer(a) &&
+  isContainer(b) &&
+  Object.keys(a).sort().join() === Object.keys(b).sort().join();
+
+/**
+ * One item was added or removed and others changed, as when a row is dragged
+ * into a block in the same list. The added or removed item is the one that
+ * leaves the fewest other items changed, and of those the fewest changed
+ * into another kind of item.
+ */
+const diffListsWithOneMore = (
+  before: unknown[],
+  after: unknown[],
+  path: ConfigPath,
+  changes: ConfigChange[]
+) => {
+  const added = after.length > before.length;
+  const longer = added ? after : before;
+  const shorter = added ? before : after;
+  let index = 0;
+  let fewest = Infinity;
+  for (let candidate = 0; candidate < longer.length; candidate++) {
+    let score = 0;
+    shorter.forEach((item, i) => {
+      const counterpart = longer[i < candidate ? i : i + 1];
+      if (!equal(counterpart, item)) {
+        score += sameKind(counterpart, item) ? 2 : 3;
+      }
+    });
+    if (score < fewest) {
+      index = candidate;
+      fewest = score;
+    }
+  }
+  changes.push(
+    added
+      ? { op: "add", path: [...path, index], value: after[index] }
+      : { op: "remove", path: [...path, index], value: before[index] }
+  );
+  // Compared at the indices of `after`, where they are after the first change
+  after.forEach((item, i) => {
+    if (added && i === index) {
+      return;
+    }
+    const counterpart = added
+      ? before[i < index ? i : i - 1]
+      : before[i < index ? i : i + 1];
+    diffValues(counterpart, item, [...path, i], changes);
+  });
+};
+
+const diffValues = (
+  before: unknown,
+  after: unknown,
+  path: ConfigPath,
+  changes: ConfigChange[]
+) => {
+  if (before === after) {
+    return;
+  }
+  if (Array.isArray(before) && Array.isArray(after)) {
+    diffLists(before, after, path, changes);
+    return;
+  }
+  if (
+    isContainer(before) &&
+    isContainer(after) &&
+    !Array.isArray(before) &&
+    !Array.isArray(after)
+  ) {
+    const beforeKeys = Object.keys(before);
+    const afterKeys = Object.keys(after);
+    // Applying a change adds a key at the end, and undo adds removed keys
+    // back in reverse order. Where that would change the key order, the whole
+    // object is replaced instead.
+    const keysChanged =
+      afterKeys.filter((key) => !beforeKeys.includes(key)).length +
+      beforeKeys.filter((key) => !afterKeys.includes(key)).length;
+    // A key holding undefined is no change as a value, but the dirty check
+    // compares keys
+    const undefinedKeyChanged = [...beforeKeys, ...afterKeys].some(
+      (key) =>
+        key in before !== key in after &&
+        (before as Record<string, unknown>)[key] === undefined &&
+        (after as Record<string, unknown>)[key] === undefined
+    );
+    if (
+      keysChanged > 1 ||
+      undefinedKeyChanged ||
+      !keepsKeyOrder(beforeKeys, afterKeys) ||
+      !keepsKeyOrder(afterKeys, beforeKeys)
+    ) {
+      changes.push({ op: "replace", path, before, after });
+      return;
+    }
+    for (const key of new Set([...beforeKeys, ...afterKeys])) {
+      diffValues(
+        (before as Record<string, unknown>)[key],
+        (after as Record<string, unknown>)[key],
+        [...path, key],
+        changes
+      );
+    }
+    return;
+  }
+  if (before === undefined) {
+    changes.push({ op: "add", path, value: after });
+  } else if (after === undefined) {
+    changes.push({ op: "remove", path, value: before });
+  } else if (!equal(before, after)) {
+    changes.push({ op: "replace", path, before, after });
+  }
+};
+
+/**
+ * The changes that turn `before` into `after`, each as small as possible.
+ * An insertion, removal or move of a single list item is found as such; other
+ * list changes are compared item by item, or replace the list.
+ */
+export const diffConfigs = (
+  before: unknown,
+  after: unknown
+): ConfigChange[] => {
+  const changes: ConfigChange[] = [];
+  diffValues(before, after, [], changes);
+  return changes;
+};
+
+const isListItem = (root: unknown, path: ConfigPath) =>
+  Array.isArray(getAtPath(root, path.slice(0, -1)));
+
+const updateList = <T>(
+  root: T,
+  path: ConfigPath,
+  update: (list: unknown[], index: number) => unknown[],
+  onCopy?: (original: object, copy: object) => void
+): T => {
+  const listPath = path.slice(0, -1);
+  const list = getAtPath(root, listPath) as unknown[];
+  const updated = update(list, path[path.length - 1] as number);
+  onCopy?.(list, updated);
+  return setAtPath(root, listPath, updated, onCopy);
+};
+
+const add = <T>(
+  root: T,
+  path: ConfigPath,
+  value: unknown,
+  onCopy?: (original: object, copy: object) => void
+) =>
+  isListItem(root, path)
+    ? updateList(
+        root,
+        path,
+        (list, index) => [...list.slice(0, index), value, ...list.slice(index)],
+        onCopy
+      )
+    : setAtPath(root, path, value, onCopy);
+
+const remove = <T>(
+  root: T,
+  path: ConfigPath,
+  onCopy?: (original: object, copy: object) => void
+) =>
+  isListItem(root, path)
+    ? updateList(
+        root,
+        path,
+        (list, index) => list.filter((_item, i) => i !== index),
+        onCopy
+      )
+    : setAtPath(root, path, undefined, onCopy);
+
+/**
+ * Applies changes immutably. `onCopy` sees every copied container next to its
+ * original.
+ */
+export const applyConfigChanges = <T>(
+  root: T,
+  changes: ConfigChange[],
+  onCopy?: (original: object, copy: object) => void
+): T =>
+  changes.reduce((config, change) => {
+    switch (change.op) {
+      case "add":
+        return add(config, change.path, change.value, onCopy);
+      case "remove":
+        return remove(config, change.path, onCopy);
+      case "replace":
+        return setAtPath(config, change.path, change.after, onCopy);
+      case "move":
+        return add(
+          remove(config, change.from, onCopy),
+          change.path,
+          getAtPath(config, change.from),
+          onCopy
+        );
+    }
+    return config;
+  }, root);
+
+/** The changes that undo `changes`. */
+export const invertConfigChanges = (changes: ConfigChange[]): ConfigChange[] =>
+  changes
+    .map((change): ConfigChange => {
+      switch (change.op) {
+        case "add":
+          return { op: "remove", path: change.path, value: change.value };
+        case "remove":
+          return { op: "add", path: change.path, value: change.value };
+        case "replace":
+          return {
+            op: "replace",
+            path: change.path,
+            before: change.after,
+            after: change.before,
+          };
+        case "move":
+          return { op: "move", from: change.path, path: change.from };
+      }
+      return change;
+    })
+    .reverse();
+
+// Moves `path` along when an item is added to or removed from a list above it
+const shift = (
+  path: ConfigPath,
+  itemPath: ConfigPath,
+  by: 1 | -1
+): ConfigPath => {
+  const listPath = itemPath.slice(0, -1);
+  const index = itemPath[itemPath.length - 1];
+  const segment = path[listPath.length];
+  if (
+    typeof index !== "number" ||
+    typeof segment !== "number" ||
+    path.length <= listPath.length ||
+    !pathStartsWith(path, listPath) ||
+    (by === 1 ? segment < index : segment <= index)
+  ) {
+    return path;
+  }
+  return [...listPath, segment + by, ...path.slice(listPath.length + 1)];
+};
+
+/**
+ * Where the value at `path` is after `changes`, or `undefined` when it was
+ * removed or is part of a replaced value.
+ */
+export const mapConfigPath = (
+  path: ConfigPath,
+  changes: ConfigChange[]
+): ConfigPath | undefined => {
+  let mapped: ConfigPath | undefined = path;
+  for (const change of changes) {
+    if (!mapped) {
+      return undefined;
+    }
+    switch (change.op) {
+      case "add":
+        mapped = shift(mapped, change.path, 1);
+        break;
+      case "remove":
+        mapped = pathStartsWith(mapped, change.path)
+          ? undefined
+          : shift(mapped, change.path, -1);
+        break;
+      case "replace":
+        if (
+          pathStartsWith(mapped, change.path) &&
+          mapped.length > change.path.length
+        ) {
+          mapped = undefined;
+        }
+        break;
+      case "move":
+        mapped = pathStartsWith(mapped, change.from)
+          ? [...change.path, ...mapped.slice(change.from.length)]
+          : shift(shift(mapped, change.from, -1), change.path, 1);
+        break;
+    }
+  }
+  return mapped;
+};
@@ -0,0 +1,56 @@
+export type ConfigPath = (string | number)[];
+
+const isContainer = (value: unknown): value is object =>
+  typeof value === "object" && value !== null;
+
+export const pathEquals = (a: ConfigPath, b: ConfigPath): boolean =>
+  a.length === b.length && a.every((segment, index) => segment === b[index]);
+
+export const pathStartsWith = (path: ConfigPath, prefix: ConfigPath) =>
+  prefix.length <= path.length &&
+  prefix.every((segment, index) => path[index] === segment);
+
+export const getAtPath = (root: unknown, path: ConfigPath): unknown =>
+  path.reduce<unknown>(
+    (node, segment) =>
+      isContainer(node)
+        ? (node as Record<string, unknown>)[segment]
+        : undefined,
+    root
+  );
+
+/**
+ * Immutably replaces the value at `path`, copying only the containers along it.
+ * An `undefined` value removes an object key instead of storing `undefined`.
+ * `onCopy` sees every copied container next to its original.
+ */
+export const setAtPath = <T>(
+  root: T,
+  path: ConfigPath,
+  value: unknown,
+  onCopy?: (original: object, copy: object) => void
+): T => {
+  if (path.length === 0) {
+    return value as T;
+  }
+  const [segment, ...rest] = path;
+  const node: unknown = root;
+  const copy = (
+    Array.isArray(node) ? node.slice() : { ...(isContainer(node) ? node : {}) }
+  ) as Record<string | number, unknown>;
+  const child = setAtPath(
+    isContainer(node) ? (node as Record<string, unknown>)[segment] : undefined,
+    rest,
+    value,
+    onCopy
+  );
+  if (child === undefined && !Array.isArray(node)) {
+    delete copy[segment];
+  } else {
+    copy[segment] = child;
+  }
+  if (isContainer(node)) {
+    onCopy?.(node, copy);
+  }
+  return copy as T;
+};
@@ -67,3 +67,88 @@ export const itemTooltipPosition: TooltipPositionCallback = (

  return [x, y];
 };
+
+const ECHARTS_TOOLTIP_GAP_PX = 20;
+export const WINDOW_MARGIN_PX = 8;
+
+const fitInto = (
+  pos: number,
+  size: number,
+  alternatives: number[],
+  min: number,
+  max: number
+) =>
+  size > max - min
+    ? min
+    : ([pos, ...alternatives].find((p) => p >= min && p + size <= max) ??
+      Math.max(min, Math.min(pos, max - size)));
+
+/**
+ * ECharts' default placement (or the chart-confined one), moved into the
+ * window when it would leave it. The other side of the cursor is tried before
+ * clamping, below first vertically. A tooltip taller than the window starts at
+ * its top. A confined tooltip stays in the chart, leaving it only as far as the
+ * window needs.
+ */
+export const windowTooltipPosition =
+  (
+    getChartRect: () => DOMRect | undefined,
+    confine: boolean
+  ): TooltipPositionCallback =>
+  (point, _params, _dom, _rect, size) => {
+    const [cursorX, cursorY] = point;
+    const [viewW, viewH] = size.viewSize;
+    const [tipW, tipH] = size.contentSize;
+
+    const right = cursorX + ECHARTS_TOOLTIP_GAP_PX;
+    const left = cursorX - ECHARTS_TOOLTIP_GAP_PX - tipW;
+    const below = cursorY + ECHARTS_TOOLTIP_GAP_PX;
+    const above = cursorY - ECHARTS_TOOLTIP_GAP_PX - tipH;
+    let x = right + tipW + 2 > viewW ? left : right;
+    let y = below + tipH > viewH ? above : below;
+    if (confine) {
+      x = Math.max(0, Math.min(x, viewW - tipW));
+      y = Math.max(0, Math.min(y, viewH - tipH));
+    }
+
+    const rect = getChartRect();
+    if (!rect?.height) {
+      return [x, y];
+    }
+    const fit = (
+      pos: number,
+      tipSize: number,
+      alternatives: number[],
+      windowMin: number,
+      windowMax: number,
+      viewSize: number
+    ) => {
+      if (!confine) {
+        return fitInto(pos, tipSize, alternatives, windowMin, windowMax);
+      }
+      const min = Math.max(0, windowMin);
+      const max = Math.min(viewSize, windowMax);
+      return tipSize > max - min
+        ? fitInto(pos, tipSize, [], windowMin, windowMax)
+        : fitInto(pos, tipSize, alternatives, min, max);
+    };
+    const { clientWidth, clientHeight } = document.documentElement;
+    return [
+      fit(
+        x,
+        tipW,
+        [right, left],
+        WINDOW_MARGIN_PX - rect.left,
+        clientWidth - WINDOW_MARGIN_PX - rect.left,
+        viewW
+      ),
+      fit(
+        y,
+        tipH,
+        [below, above],
+        WINDOW_MARGIN_PX - rect.top,
+        clientHeight - WINDOW_MARGIN_PX - rect.top,
+        viewH
+      ),
+    ];
+  };
@@ -68,6 +68,7 @@ import { ZOOM_SLIDER_HEIGHT } from "./ha-chart-zoom-slider";
 import { formatTimeLabel } from "./axis-label";
 import type { ChartSonification } from "./chart-sonification";
 import { canSonifyChart, sonifyChart } from "./chart-sonification";
+import { windowTooltipPosition } from "./chart-tooltip-position";
 import { downSampleLineData } from "./down-sample";
 import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";

@@ -1252,9 +1253,19 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
      const processTooltip = (tooltip: HaTooltipOption): TooltipOption => {
        const next = convertHaTooltipFormatter(tooltip);
        if (isMobile) {
+          next.appendTo = undefined;
+        }
+        if (next.position === undefined) {
+          // ECharts confines after the position callback, which would undo the
+          // window fit, so the callback confines itself
+          next.position = windowTooltipPosition(
+            () => this._chartContainer?.getBoundingClientRect(),
+            isMobile || next.confine === true
+          );
+          next.confine = false;
+        } else if (isMobile) {
          // mobile charts are full width so we need to confine the tooltip to the chart
          next.confine = true;
-          next.appendTo = undefined;
        }
        if (isMobile || this._touchInput) {
          next.triggerOn = "click";
@@ -31,8 +31,14 @@ export interface NetworkNode {
    color?: string;
    borderColor?: string;
    borderWidth?: number;
+    opacity?: number;
+  };
+  label?: {
+    position?: "left" | "right" | "top" | "bottom";
+    show?: boolean;
+    fontWeight?: "normal" | "bold";
+    fontSize?: number;
  };
-  label?: { position: "left" | "right" | "top" | "bottom" };
  fixed?: boolean;
  /**
   * Distance from the center, where 0 is the center and 1 is the edge
@@ -51,6 +57,7 @@ export interface NetworkLink {
    width?: number;
    color?: string;
    type?: "solid" | "dashed" | "dotted";
+    opacity?: number;
  };
  symbolSize?: number | number[];
  symbol?: string;
@@ -286,9 +293,8 @@ export class HaNetworkGraph extends LitElement {
          return node.name ?? "";
        },
        rich: {
-          primary: {
-            fontSize: 12,
-          },
+          // inherits the node label font, so a node can override it
+          primary: {},
          secondary: {
            fontSize: 12,
            color: getComputedStyle(document.body).getPropertyValue(
@@ -22,6 +22,8 @@ export interface Node {
  color?: string;
  passThrough?: boolean;
  entityId?: string;
+  // Nodes of one group take a single position when ordering their children
+  group?: string;
 }
 export interface Link {
  source: string;
@@ -46,6 +48,46 @@ const NODE_SIZE = 30;
 const LABEL_MIN_MARGIN = 5;
 const BIDI_MARKS = /[\u200E\u200F\u202A-\u202E\u2066-\u2069]/g;

+// Links without a value take the remaining capacity of their nodes, in order.
+export const fillSankeyLinkValues = (
+  nodes: Node[],
+  rawLinks: Link[]
+): ProcessedLink[] => {
+  const accountedIn = new Map<string, number>();
+  const accountedOut = new Map<string, number>();
+  const links: ProcessedLink[] = [];
+  rawLinks.forEach((link) => {
+    const sourceNode = nodes.find((n) => n.id === link.source);
+    const targetNode = nodes.find((n) => n.id === link.target);
+    if (!sourceNode || !targetNode) {
+      return;
+    }
+    const sourceAccounted = accountedOut.get(sourceNode.id) || 0;
+    const targetAccounted = accountedIn.get(targetNode.id) || 0;
+
+    // if no value is provided, we infer it from the remaining capacity of the source and target nodes
+    const sourceRemaining = sourceNode.value - sourceAccounted;
+    const targetRemaining = targetNode.value - targetAccounted;
+    // ensure the value is not greater than the remaining capacity of the nodes
+    const value = Math.min(
+      link.value ?? sourceRemaining,
+      sourceRemaining,
+      targetRemaining
+    );
+
+    accountedIn.set(targetNode.id, targetAccounted + value);
+    accountedOut.set(sourceNode.id, sourceAccounted + value);
+
+    if (value > 0) {
+      links.push({
+        ...link,
+        value,
+      });
+    }
+  });
+  return links;
+};
+
@customElement("ha-sankey-chart")
 export class HaSankeyChart extends LitElement {
  @property({ attribute: false }) public data: SankeyChartData = {
@@ -190,7 +232,7 @@ export class HaSankeyChart extends LitElement {
        );
      }
    });
-    const links = this._processLinks(filteredNodes, data.links);
+    const links = fillSankeyLinkValues(filteredNodes, data.links);
    const sectionWidth = width / indexes.length;
    const labelSpace = sectionWidth - NODE_SIZE - LABEL_DISTANCE;
    // Two-line values can wrap the unit onto a third line; keep that text inside the chart.
@@ -304,60 +346,31 @@ export class HaSankeyChart extends LitElement {

  private _createData = memoizeOne(this._computeData);

-  private _processLinks(nodes: Node[], rawLinks: Link[]) {
-    const accountedIn = new Map<string, number>();
-    const accountedOut = new Map<string, number>();
-    const links: ProcessedLink[] = [];
-    rawLinks.forEach((link) => {
-      const sourceNode = nodes.find((n) => n.id === link.source);
-      const targetNode = nodes.find((n) => n.id === link.target);
-      if (!sourceNode || !targetNode) {
-        return;
-      }
-      const sourceAccounted = accountedOut.get(sourceNode.id) || 0;
-      const targetAccounted = accountedIn.get(targetNode.id) || 0;
-
-      // if no value is provided, we infer it from the remaining capacity of the source and target nodes
-      const sourceRemaining = sourceNode.value - sourceAccounted;
-      const targetRemaining = targetNode.value - targetAccounted;
-      // ensure the value is not greater than the remaining capacity of the nodes
-      const value = Math.min(
-        link.value ?? sourceRemaining,
-        sourceRemaining,
-        targetRemaining
-      );
-
-      accountedIn.set(targetNode.id, targetAccounted + value);
-      accountedOut.set(sourceNode.id, sourceAccounted + value);
-
-      if (value > 0) {
-        links.push({
-          ...link,
-          value,
-        });
-      }
-    });
-    return links;
-  }
-
  private _findParentIndex(id: string, links: Link[], sections: Node[][]) {
    const parents = links.filter((l) => l.target === id).map((l) => l.source);
    if (parents.length === 0) {
      return -1;
    }
+    const countedGroups = new Set<string>();
    let sum = 0;
    let count = 0;
    for (const parent of parents) {
      let offset = 0;
      for (let i = sections.length - 1; i >= 0; i--) {
-        const section = sections[i];
-        const index = section.findIndex((n) => n.id === parent);
-        if (index !== -1) {
-          sum += offset + index;
+        const positions = [...new Set(sections[i].map((n) => n.group ?? n.id))];
+        const node = sections[i].find((n) => n.id === parent);
+        if (node) {
+          if (node.group !== undefined) {
+            if (countedGroups.has(node.group)) {
+              break;
+            }
+            countedGroups.add(node.group);
+          }
+          sum += offset + positions.indexOf(node.group ?? node.id);
          count++;
          break;
        }
-        offset += section.length;
+        offset += positions.length;
      }
    }
    return count > 0 ? sum / count : -1;
@@ -12,11 +12,11 @@ import { haStyleDialog } from "../../resources/styles";
 import "../ha-button";
 import "../ha-dialog-footer";
 import "../ha-icon-button";
-import "../ha-list";
-import "../ha-list-item";
 import "../ha-sortable";
 import "../ha-svg-icon";
 import "../ha-dialog";
+import "../item/ha-list-item-base";
+import "../list/ha-list-base";
 import type {
  DataTableColumnContainer,
  DataTableColumnData,
@@ -139,7 +139,7 @@ export class DialogDataTableSettings extends LitElement {
          draggable-selector=".draggable"
          handle-selector=".handle"
        >
-          <ha-list>
+          <ha-list-base>
            ${repeat(
              columns,
              (col) => col.key,
@@ -152,23 +152,23 @@ export class DialogDataTableSettings extends LitElement {
                    col.defaultHidden)
                  : col.defaultHidden);

-                return html`<ha-list-item
-                  hasMeta
+                return html`<ha-list-item-base
                  class=${classMap({
                    hidden: !isVisible,
                    draggable: canMove && isVisible,
                  })}
-                  graphic="icon"
-                  noninteractive
-                  >${col.title || col.label || col.key}
+                >
+                  <span slot="headline"
+                    >${col.title || col.label || col.key}</span
+                  >
                  ${
                    canMove && isVisible
                      ? html`<ha-svg-icon
                          class="handle"
                          .path=${mdiDragHorizontalVariant}
-                          slot="graphic"
+                          slot="start"
                        ></ha-svg-icon>`
-                      : nothing
+                      : html`<span class="handle-spacer" slot="start"></span>`
                  }
                  <ha-icon-button
                    tabindex="0"
@@ -176,7 +176,7 @@ export class DialogDataTableSettings extends LitElement {
                    .disabled=${!canHide}
                    .hidden=${!isVisible}
                    .path=${isVisible ? mdiEye : mdiEyeOff}
-                    slot="meta"
+                    slot="end"
                    .label=${localize(
                      `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
                      { title: typeof col.title === "string" ? col.title : "" }
@@ -184,10 +184,10 @@ export class DialogDataTableSettings extends LitElement {
                    .column=${col.key}
                    @click=${this._toggle}
                  ></ha-icon-button>
-                </ha-list-item>`;
+                </ha-list-item-base>`;
              }
            )}
-          </ha-list>
+          </ha-list-base>
        </ha-sortable>
        <ha-dialog-footer slot="footer">
          <ha-button
@@ -326,8 +326,8 @@ export class DialogDataTableSettings extends LitElement {
          --dialog-z-index: 10;
          --dialog-content-padding: 0 8px;
        }
-        ha-list-item {
-          --mdc-list-side-padding: 12px;
+        ha-list-item-base {
+          --ha-row-item-padding-inline: 12px;
          overflow: visible;
        }
        .hidden {
@@ -345,6 +345,11 @@ export class DialogDataTableSettings extends LitElement {
          display: block;
          margin: -12px;
        }
+        .handle-spacer {
+          display: block;
+          width: 24px;
+          height: 24px;
+        }
      `,
    ];
  }
@@ -1,6 +1,5 @@
 import { TZDate } from "@date-fns/tz";
 import type { ContextType } from "@lit/context";
-import type { ActionDetail } from "@material/mwc-list";
 import { mdiCalendarToday } from "@mdi/js";
 import "cally";
 import type { HassConfig } from "home-assistant-js-websocket/dist/types";
@@ -17,6 +16,7 @@ import {
 import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
+  HASSDomCurrentTargetEvent,
  HASSDomEvent,
  HASSDomTargetEvent,
 } from "../../common/dom/fire_event";
@@ -32,8 +32,8 @@ import type { HaBaseTimeInput } from "../ha-base-time-input";
 import "../ha-icon-button";
 import "../ha-icon-button-next";
 import "../ha-icon-button-prev";
-import "../ha-list";
-import "../ha-list-item";
+import "../item/ha-list-item-button";
+import "../list/ha-list-base";
 import "../ha-time-input";
 import type { HaTimeInput } from "../ha-time-input";
 import type { DateRangePickerRanges } from "./ha-date-range-picker";
@@ -166,11 +166,19 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
    }

    return html`
-      <ha-list @action=${this._setDateRange} activatable>
-        ${Object.keys(this.ranges!).map(
-          (name) => html`<ha-list-item>${name}</ha-list-item>`
+      <ha-list-base>
+        ${Object.entries(this.ranges!).map(
+          ([name, range], index) => html`
+            <ha-list-item-button
+              .range=${range}
+              .index=${index}
+              @click=${this._setDateRange}
+            >
+              <span slot="headline">${name}</span>
+            </ha-list-item-button>
+          `
        )}
-      </ha-list>
+      </ha-list-base>
    `;
  }

@@ -343,11 +351,12 @@ export class DateRangePicker extends MobileAwareMixin(LitElement) {
    this._saveDateRangePreset(chip.range, chip.index);
  }

-  private _setDateRange(ev: HASSDomEvent<ActionDetail>) {
-    const dateRange: [Date, Date] = Object.values(this.ranges!)[
-      ev.detail.index
-    ];
-    this._saveDateRangePreset(dateRange, ev.detail.index);
+  private _setDateRange(
+    ev: HASSDomCurrentTargetEvent<
+      HTMLElement & { range: [Date, Date]; index: number }
+    >
+  ) {
+    this._saveDateRangePreset(ev.currentTarget.range, ev.currentTarget.index);
  }

  private _saveDateRangePreset(range: [Date, Date], index: number) {
@@ -161,7 +161,8 @@ export abstract class HaDeviceAutomationPicker<
    return html`<ha-generic-picker
      .label=${this.label}
      .value=${value}
-      .disabled=${!this._automations || this._automations.length === 0}
+      .disabled=${this._automations?.length === 0}
+      .loading=${this._automations === undefined}
      .getItems=${this._getItems(
        value,
        this._automations,
@@ -189,6 +189,10 @@ export class HaStatisticPicker extends LitElement {

  @query("ha-generic-picker") private _picker?: HaGenericPicker;

+  @state() private _loadFailed = false;
+
+  private _statisticIdsRequest = 0;
+
  @property({ attribute: "can-edit", type: Boolean }) public canEdit?: boolean;

  public willUpdate(changedProps: PropertyValues<this>) {
@@ -201,11 +205,36 @@ export class HaStatisticPicker extends LitElement {
  }

  private async _getStatisticIds() {
-    this.statisticIds = await getStatisticIds(this._api, this.statisticTypes);
+    // Changing the statistic types starts a new request, and only the latest
+    // one may update the picker
+    const request = ++this._statisticIdsRequest;
+    this._loadFailed = false;
+
+    let statisticIds: StatisticsMetaData[];
+    try {
+      statisticIds = await getStatisticIds(this._api, this.statisticTypes);
+    } catch {
+      if (request === this._statisticIdsRequest) {
+        this._loadFailed = true;
+      }
+
+      return;
+    }
+
+    if (request !== this._statisticIdsRequest) {
+      return;
+    }
+
+    this.statisticIds = statisticIds;
    this._picker?.requestUpdate();
    this._valueRenderer = this._makeValueRenderer();
  }

+  private _retryGetStatisticIds(ev: Event) {
+    ev.stopPropagation();
+    this._getStatisticIds();
+  }
+
  private _getItems = () =>
    this._getStatisticsItems(
      this._states,
@@ -589,6 +618,12 @@ export class HaStatisticPicker extends LitElement {
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
        .getAdditionalItems=${this._getAdditionalItems}
+        .loading=${!this._loadFailed && this.statisticIds === undefined}
+        .loadError=${
+          this._loadFailed
+            ? this._i18n.localize("ui.components.statistic-picker.load_failed")
+            : undefined
+        }
        .hideClearIcon=${this.hideClearIcon}
        .searchFn=${this._searchFn}
        .valueRenderer=${this._valueRenderer}
@@ -598,6 +633,7 @@ export class HaStatisticPicker extends LitElement {
          "ui.components.statistic-picker.unknown"
        )}
        @value-changed=${this._valueChanged}
+        @picker-retry=${this._retryGetStatisticIds}
      >
      </ha-generic-picker>
    `;
@@ -7,6 +7,7 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { consume } from "../../common/decorators/consume";
+import { transform } from "../../common/decorators/transform";
 import { computeCssColor } from "../../common/color/compute-color";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -21,8 +22,10 @@ import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import {
  brandsAccessTokenContext,
  connectionContext,
+  uiContext,
 } from "../../data/context";
-import { isBrandUrl } from "../../util/brands-url";
+import type { HomeAssistantUI } from "../../types";
+import { darkBrandUrl, isBrandUrl } from "../../util/brands-url";
 import "../ha-state-icon";

@customElement("state-badge")
@@ -56,6 +59,13 @@ export class StateBadge extends LitElement {
  // @ts-ignore read in willUpdate through changedProps only
  private _brandsAccessToken?: string;

+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  @transform<HomeAssistantUI, boolean | undefined>({
+    transformer: (ui) => ui?.themes?.darkMode,
+  })
+  private _darkMode?: boolean;
+
  @state() private _iconStyle: Record<string, string | undefined> = {};

  connectedCallback(): void {
@@ -141,7 +151,9 @@ export class StateBadge extends LitElement {
      !changedProps.has("stateColor") &&
      !changedProps.has("color") &&
      !changedProps.has("_connection") &&
-      !changedProps.has("_brandsAccessToken")
+      !changedProps.has("_brandsAccessToken") &&
+      // Brand images have a dark variant, so the picture changes with the theme
+      !changedProps.has("_darkMode")
    ) {
      return;
    }
@@ -217,15 +229,17 @@ export class StateBadge extends LitElement {
  // Sign the image URL via the connection context so brand images
  // (/api/brands/...) get their access token. Without a way to sign, a brands
  // request would be rejected (and logged/blocked by core), so skip it until
-  // we can sign.
+  // we can sign. In dark mode, brand images (e.g. the integration icon of an
+  // update entity) use their dark-optimized variant.
  private _resolveImageUrl(url: string | undefined): string {
    if (!url) {
      return "";
    }
+    const themedUrl = this._darkMode ? darkBrandUrl(url) : url;
    if (this._connection) {
-      return this._connection.hassUrl(url);
+      return this._connection.hassUrl(themedUrl);
    }
-    return isBrandUrl(url) ? "" : url;
+    return isBrandUrl(themedUrl) ? "" : themedUrl;
  }

  protected getClass() {
@@ -1,93 +0,0 @@
-import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
-import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { preventDefault } from "../common/dom/prevent_default";
-import { stopPropagation } from "../common/dom/stop_propagation";
-import "./ha-checkbox";
-
-@customElement("ha-check-list-item")
-export class HaCheckListItem extends CheckListItemBase {
-  @property({ type: Boolean, attribute: "checkbox-disabled" })
-  checkboxDisabled = false;
-
-  @property({ type: Boolean })
-  indeterminate = false;
-
-  @property({ type: Boolean, attribute: "separate-checkbox-click" })
-  separateCheckboxClick = false;
-
-  async onChange(event) {
-    event.stopPropagation();
-    super.onChange(event);
-    fireEvent(this, event.type);
-  }
-
-  override render() {
-    const text = this.renderText();
-    const graphic =
-      this.graphic && this.graphic !== "control" && !this.left
-        ? this.renderGraphic()
-        : nothing;
-    const meta = this.hasMeta && this.left ? this.renderMeta() : nothing;
-    const ripple = this.renderRipple();
-
-    return html` ${ripple} ${graphic} ${this.left ? "" : text}
-      <ha-checkbox
-        tabindex=${this.separateCheckboxClick ? this.tabindex : -1}
-        .checked=${this.selected}
-        .indeterminate=${this.indeterminate}
-        ?disabled=${this.disabled || this.checkboxDisabled}
-        @change=${this.onChange}
-        @click=${this.separateCheckboxClick ? stopPropagation : preventDefault}
-        class=${this.left ? "left" : ""}
-      >
-      </ha-checkbox>
-      ${this.left ? text : ""} ${meta}`;
-  }
-
-  static override styles = [
-    styles,
-    controlStyles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-
-      :host([graphic="avatar"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="medium"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="large"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="control"]) .mdc-deprecated-list-item__graphic {
-        margin-inline-end: var(--mdc-list-item-graphic-margin, 16px);
-        margin-inline-start: 0px;
-        direction: var(--direction);
-      }
-      ha-checkbox {
-        flex-shrink: 0;
-        direction: var(--direction);
-        margin-inline-start: auto;
-        margin-inline-end: 0;
-        height: 100%;
-        justify-content: center;
-      }
-      ha-checkbox.left {
-        margin-inline-start: 0;
-      }
-      .mdc-deprecated-list-item__graphic {
-        margin-top: var(--check-list-item-graphic-margin-top);
-      }
-      :host([graphic="icon"]) .mdc-deprecated-list-item__graphic {
-        margin-inline-start: 0;
-        margin-inline-end: var(--mdc-list-item-graphic-margin, 32px);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-check-list-item": HaCheckListItem;
-  }
-}
@@ -26,10 +26,7 @@ import "./ha-sortable";

 type ClockDatePartSection = "weekday" | "day" | "month" | "year" | "separator";

-type ClockDateSeparatorPart = Extract<
-  ClockCardDatePart,
-  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
->;
+type ClockDateSeparatorPart = Extract<ClockCardDatePart, `separator-${string}`>;

 const CLOCK_DATE_PART_SECTION_ORDER: readonly ClockDatePartSection[] = [
  "day",
@@ -43,6 +40,7 @@ const CLOCK_DATE_SEPARATOR_VALUES: Record<ClockDateSeparatorPart, string> = {
  "separator-dash": "-",
  "separator-slash": "/",
  "separator-dot": ".",
+  "separator-comma": ",",
  "separator-new-line": "",
 };

@@ -5,10 +5,12 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
 import { formatNumber } from "../common/number/format_number";
 import { blankBeforeUnit } from "../common/translations/blank_before_unit";
+import type { LocalizeFunc } from "../common/translations/localize";
 import type { FrontendLocaleData } from "../data/translation";

 declare global {
@@ -43,6 +45,8 @@ export class HaControlSlider extends LitElement {

  @property({ attribute: false }) public locale?: FrontendLocaleData;

+  @state() @consumeLocalize() private _localize?: LocalizeFunc;
+
  @property({ type: Boolean, reflect: true })
  public disabled = false;

@@ -139,12 +143,28 @@ export class HaControlSlider extends LitElement {
    this.setupListeners();
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);
-    if (changedProps.has("value") || changedProps.has("roundValue")) {
-      const valuenow = this._displayedValue(this.value ?? 0);
-      this.setAttribute("aria-valuenow", valuenow.toString());
-      this.setAttribute("aria-valuetext", this._formatValue(valuenow));
+    if (
+      changedProps.has("value") ||
+      changedProps.has("roundValue") ||
+      changedProps.has("_localize")
+    ) {
+      // An unknown value must not be announced as the minimum.
+      if (this.value == null) {
+        this.removeAttribute("aria-valuenow");
+      } else {
+        this.setAttribute(
+          "aria-valuenow",
+          this._displayedValue(this.value).toString()
+        );
+      }
+      const valuetext = this._ariaValueText();
+      if (valuetext) {
+        this.setAttribute("aria-valuetext", valuetext);
+      } else {
+        this.removeAttribute("aria-valuetext");
+      }
    }
    if (changedProps.has("min")) {
      this.setAttribute("aria-valuemin", this.min.toString());
@@ -312,6 +332,13 @@ export class HaControlSlider extends LitElement {
    return Math.max(Math.min(1, (x - offset) / total), 0);
  };

+  private _ariaValueText() {
+    if (this.value == null) {
+      return this._localize?.("state.default.unknown");
+    }
+    return this._formatValue(this._displayedValue(this.value));
+  }
+
  private _formatValue(value: number) {
    const formattedValue = formatNumber(value, this.locale);

@@ -349,7 +376,8 @@ export class HaControlSlider extends LitElement {
  }

  protected render(): TemplateResult {
-    const valuenow = this._displayedValue(this.value ?? 0);
+    const valuenow =
+      this.value != null ? this._displayedValue(this.value) : undefined;
    return html`
      <div
        class="container${classMap({
@@ -365,8 +393,8 @@ export class HaControlSlider extends LitElement {
          role="slider"
          tabindex="0"
          aria-label=${ifDefined(this.label)}
-          aria-valuenow=${valuenow.toString()}
-          aria-valuetext=${this._formatValue(valuenow)}
+          aria-valuenow=${ifDefined(valuenow?.toString())}
+          aria-valuetext=${ifDefined(this._ariaValueText() || undefined)}
          aria-valuemin=${ifDefined(
            this.min != null ? this.min.toString() : undefined
          )}
@@ -395,7 +423,7 @@ export class HaControlSlider extends LitElement {
                    class=${classMap({
                      "slider-track-bar": true,
                      [this.mode ?? "start"]: true,
-                      "show-handle": this.showHandle,
+                      "show-handle": this.showHandle && this.value != null,
                    })}
                  ></div>
                `
@@ -5,10 +5,13 @@ import memoizeOne from "memoize-one";
 import { consume } from "../common/decorators/consume";
 import { ensureArray } from "../common/array/ensure-array";
 import { fireEvent } from "../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { internationalizationContext } from "../data/context";
 import { DOMAIN_DEVICE_CLASSES } from "../data/device_classes";
 import { computeDeviceClassName } from "../data/entity/device_class";
+import { computeUnitDeviceClasses } from "../data/sensor/unit_of_measurement";
+import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type {
  HomeAssistantInternationalization,
  ValueChangedEvent,
@@ -27,6 +30,13 @@ export const getDeviceClassOptions = (
    return { id: deviceClass, primary, sorting_label: primary };
  });

+// The reason line of a device class that does not support the unit names the
+// unit, so searching it would match every unsupported device class
+const UNIT_FILTER_SEARCH_KEYS: FuseWeightedKey[] = [
+  { name: "primary", weight: 10 },
+  { name: "id", weight: 3 },
+];
+
@customElement("ha-device-class-picker")
 export class HaDeviceClassPicker extends LitElement {
  @property() public domain?: string;
@@ -43,6 +53,9 @@ export class HaDeviceClassPicker extends LitElement {

  @property({ type: Boolean }) public required = false;

+  /** Unit of measurement: device classes that do not support it are listed last */
+  @property() public unit?: string;
+
  @state()
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n?: HomeAssistantInternationalization;
@@ -70,18 +83,60 @@ export class HaDeviceClassPicker extends LitElement {
  private _options = memoizeOne(
    (
      domain: string | undefined,
-      localize: LocalizeFunc | undefined
-    ): PickerComboBoxItem[] =>
-      domain && localize ? getDeviceClassOptions(domain, localize) : []
+      localize: LocalizeFunc | undefined,
+      unit: string | undefined,
+      language: string | undefined
+    ): PickerComboBoxItem[] => {
+      if (!domain || !localize) {
+        return [];
+      }
+      const options = getDeviceClassOptions(domain, localize);
+      const fitting = computeUnitDeviceClasses(domain, unit);
+      if (!fitting) {
+        return options;
+      }
+      // Device classes of the unit first, then those that accept any unit
+      const rank = (deviceClass: string) =>
+        fitting.matching.includes(deviceClass)
+          ? 0
+          : fitting.unrestricted.includes(deviceClass)
+            ? 1
+            : 2;
+      const notSupported = localize(
+        "ui.components.device-class-picker.unit_not_supported",
+        { unit }
+      );
+      return options
+        .map((option) =>
+          rank(option.id) === 2
+            ? { ...option, secondary: notSupported }
+            : option
+        )
+        .sort(
+          (a, b) =>
+            rank(a.id) - rank(b.id) ||
+            caseInsensitiveStringCompare(a.primary, b.primary, language)
+        );
+    }
  );

+  // The options are sorted here when the unit filters them
+  private get _filtered(): boolean {
+    return computeUnitDeviceClasses(this.domain, this.unit) !== undefined;
+  }
+
  private _availableOptions = memoizeOne(
    (options: PickerComboBoxItem[], selected: string[]) =>
      options.filter((option) => !selected.includes(option.id))
  );

  private _getItems = () => {
-    const options = this._options(this.domain, this._i18n?.localize);
+    const options = this._options(
+      this.domain,
+      this._i18n?.localize,
+      this.unit,
+      this._i18n?.language
+    );
    return this.multiple
      ? this._availableOptions(options, this._value)
      : options;
@@ -104,6 +159,8 @@ export class HaDeviceClassPicker extends LitElement {
    const emptyLabel = localize?.(
      "ui.components.device-class-picker.no_device_classes"
    );
+    const filtered = this._filtered;
+    const searchKeys = filtered ? UNIT_FILTER_SEARCH_KEYS : undefined;

    if (this.multiple) {
      const value = this._value;
@@ -145,6 +202,8 @@ export class HaDeviceClassPicker extends LitElement {
          .getItems=${this._getItems}
          .notFoundLabel=${this._notFoundLabel}
          .emptyLabel=${emptyLabel}
+          .noSort=${filtered}
+          .searchKeys=${searchKeys}
          @value-changed=${this._itemAdded}
        ></ha-generic-picker>
      `;
@@ -164,6 +223,8 @@ export class HaDeviceClassPicker extends LitElement {
        .valueRenderer=${this._valueRenderer}
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${emptyLabel}
+        .noSort=${filtered}
+        .searchKeys=${searchKeys}
        @value-changed=${this._valueChanged}
      ></ha-generic-picker>
    `;
@@ -1,5 +1,4 @@
 import type { ContextType } from "@lit/context";
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -12,6 +11,11 @@ import {
 import { consume } from "../common/decorators/consume";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
@@ -19,11 +23,12 @@ import { fetchBlueprints } from "../data/blueprint";
 import { apiContext } from "../data/context";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon-button";
-import "./ha-list";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";

@customElement("ha-filter-blueprints")
 export class HaFilterBlueprints extends LitElement {
@@ -88,23 +93,30 @@ export class HaFilterBlueprints extends LitElement {
                ${
                  this._blueprints
                    ? html`
-                        <ha-list
-                          @selected=${this._blueprintsSelected}
+                        <ha-list-selectable
                          multi
-                          class="ha-scrollbar"
+                          aria-label=${this._localize(
+                            "ui.panel.config.blueprint.caption"
+                          )}
+                          @ha-list-item-selected=${this._handleItemToggled}
+                          @ha-list-item-deselected=${this._handleItemToggled}
                        >
                          ${Object.entries(this._blueprints).map(
                            ([id, blueprint]) =>
                              "error" in blueprint
                                ? nothing
-                                : html`<ha-check-list-item
+                                : html`<ha-list-item-option
+                                    appearance="checkbox"
+                                    selection-position="end"
                                    .value=${id}
-                                    .selected=${(this.value || []).includes(id)}
+                                    .selected=${this.value?.includes(id) ?? false}
                                  >
-                                    ${blueprint.metadata.name || id}
-                                  </ha-check-list-item>`
+                                    <span slot="headline"
+                                      >${blueprint.metadata.name || id}</span
+                                    >
+                                  </ha-list-item-option>`
                          )}
-                        </ha-list>
+                        </ha-list-selectable>
                      `
                    : nothing
                }
@@ -126,28 +138,20 @@ export class HaFilterBlueprints extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  private async _blueprintsSelected(
-    ev: CustomEvent<SelectedDetail<Set<number>>>
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
  ) {
-    const blueprints = this._blueprints!;
-
-    if (!ev.detail.index.size) {
-      fireEvent(this, "data-table-filter-changed", {
-        value: [],
-        items: undefined,
-      });
-      this.value = [];
+    const blueprintId = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!blueprintId) {
      return;
    }

-    const value: string[] = [];
-
-    for (const index of ev.detail.index) {
-      const blueprintId = Object.keys(blueprints)[index];
-      value.push(blueprintId);
-    }
-
-    this.value = value;
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, blueprintId)
+        : arrayWithout(this.value, blueprintId);
  }

  private async _findRelated() {
@@ -202,10 +206,14 @@ export class HaFilterBlueprints extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -35,12 +35,12 @@ import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
 import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistantConnection } from "../types";
+import "./ha-button";
 import "./ha-dropdown";
 import type { HaDropdownSelectEvent } from "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
-import "./ha-list-item";
 import "./item/ha-list-item-option";
 import "./list/ha-list-selectable";

@@ -226,10 +226,14 @@ export class HaFilterCategories extends LitElement {
                      </ha-list-item-option>`
                  )}
                </ha-list-selectable>
-                <ha-list-item graphic="icon" @click=${this._addCategory}>
-                  <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
+                <ha-button
+                  appearance="filled"
+                  size="s"
+                  @click=${this._addCategory}
+                >
+                  <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                  ${this._localize("ui.panel.config.category.editor.add")}
-                </ha-list-item>
+                </ha-button>
              </div>
            `
          : nothing
@@ -386,12 +390,12 @@ export class HaFilterCategories extends LitElement {
        ha-list-item-option {
          --ha-row-item-padding-block: var(--ha-space-2);
        }
+        ha-button {
+          margin: var(--ha-space-2) var(--ha-space-4);
+        }
        ha-list-item-option ha-icon-button {
          --ha-icon-button-size: 32px;
        }
-        ha-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
        ha-dropdown-item {
          font-size: var(--ha-font-size-m);
        }
@@ -0,0 +1,78 @@
+import type { ContextType } from "@lit/context";
+import { customElement, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { consume } from "../common/decorators/consume";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { computeDomain } from "../common/entity/compute_domain";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { stringCompare } from "../common/string/compare";
+import { internationalizationContext, statesContext } from "../data/context";
+import { computeDeviceClassName } from "../data/entity/device_class";
+import { HaFilterStates } from "./ha-filter-states";
+
+@customElement("ha-filter-device-classes")
+export class HaFilterDeviceClasses extends HaFilterStates {
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _entityStates?: ContextType<typeof statesContext>;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consumeLocalize()
+  private _localize?: LocalizeFunc;
+
+  private _deviceClasses = memoizeOne(
+    (
+      states: ContextType<typeof statesContext>,
+      localize: LocalizeFunc,
+      language: string
+    ) => {
+      const classes = new Map<string, string>();
+
+      for (const [entityId, stateObj] of Object.entries(states)) {
+        const deviceClass = stateObj.attributes.device_class;
+
+        if (typeof deviceClass !== "string" || classes.has(deviceClass)) {
+          continue;
+        }
+
+        classes.set(
+          deviceClass,
+          computeDeviceClassName(localize, computeDomain(entityId), deviceClass)
+        );
+      }
+
+      return [...classes]
+        .map(([value, label]) => ({ value, label }))
+        .sort((a, b) => stringCompare(a.label, b.label, language));
+    }
+  );
+
+  protected firstUpdated() {
+    this._i18n?.loadBackendTranslation("entity_component");
+  }
+
+  protected willUpdate() {
+    if (
+      this._entityStates &&
+      this._localize &&
+      this._i18n &&
+      (this.expanded || !this.states)
+    ) {
+      this.states = this._deviceClasses(
+        this._entityStates,
+        this._localize,
+        this._i18n.locale.language
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-device-classes": HaFilterDeviceClasses;
+  }
+}
@@ -85,6 +85,15 @@ export class HaFilterDevices extends LitElement {
    }
  }

+  protected updated(properties: PropertyValues<this>) {
+    super.updated(properties);
+
+    // The rows don't change with the value, so render the selection again
+    if (properties.has("value")) {
+      this._listElement?.requestRowsUpdate();
+    }
+  }
+
  protected render() {
    return html`
      <ha-expansion-panel
@@ -269,7 +278,6 @@ export class HaFilterDevices extends LitElement {
      value: undefined,
      items: undefined,
    });
-    this._listElement?.clearSelection();
  }

  static styles = [
@@ -1,5 +1,4 @@
 import type { ContextType } from "@lit/context";
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -13,17 +12,23 @@ import {
  filterPanelStyles,
 } from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { internationalizationContext, statesContext } from "../data/context";
 import { domainToName } from "../data/integration";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
-import "./ha-list";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";

@@ -82,35 +87,38 @@ export class HaFilterDomains extends LitElement {
                @input=${this._handleSearchChange}
              >
              </ha-input-search>
-              <ha-list
-                class="ha-scrollbar"
-                @selected=${this._handleItemSelected}
+              <ha-list-selectable
                multi
+                aria-label=${this._localize("ui.panel.config.domains.caption")}
+                @ha-list-item-selected=${this._handleItemToggled}
+                @ha-list-item-deselected=${this._handleItemToggled}
              >
                ${repeat(
                  this._domains(
                    this._states,
                    this._localize,
                    this._i18n.locale.language,
-                    this._filter,
-                    this.value
+                    this._filter
                  ),
                  (i) => i,
                  (domain) =>
-                    html`<ha-check-list-item
+                    html`<ha-list-item-option
+                      appearance="checkbox"
+                      selection-position="end"
                      .value=${domain}
-                      .selected=${(this.value || []).includes(domain)}
-                      graphic="icon"
+                      .selected=${this.value?.includes(domain) ?? false}
                    >
                      <ha-domain-icon
-                        slot="graphic"
+                        slot="start"
                        .domain=${domain}
                        brand-fallback
                      ></ha-domain-icon>
-                      ${domainToName(this._localize, domain)}
-                    </ha-check-list-item>`
+                      <span slot="headline"
+                        >${domainToName(this._localize, domain)}</span
+                      >
+                    </ha-list-item-option>`
                )}
-              </ha-list>
+              </ha-list-selectable>
            </div>`
          : nothing
      }
@@ -122,8 +130,7 @@ export class HaFilterDomains extends LitElement {
      states: ContextType<typeof statesContext>,
      localize: LocalizeFunc,
      language: string | undefined,
-      filter: string | undefined,
-      _value
+      filter: string | undefined
    ) => {
      const domains = new Set<string>();
      Object.keys(states).forEach((entityId) => {
@@ -150,22 +157,20 @@ export class HaFilterDomains extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const domains = this._domains(
-      this._states,
-      this._localize,
-      this._i18n.locale.language,
-      this._filter,
-      this.value
-    );
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
+  ) {
+    const domain = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!domain) {
+      return;
+    }

-    const visibleDomains = new Set(domains);
-    const preserved = (this.value || []).filter((d) => !visibleDomains.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => domains[i])
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, domain)
+        : arrayWithout(this.value, domain);

    fireEvent(this, "data-table-filter-changed", {
      value: this.value.length ? this.value : undefined,
@@ -189,10 +194,14 @@ export class HaFilterDomains extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -204,9 +213,6 @@ export class HaFilterDomains extends LitElement {
          margin-inline-start: auto;
          margin-inline-end: 8px;
        }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
        .badge {
          display: inline-block;
          margin-left: 8px;
@@ -3,7 +3,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
 import { consume } from "../common/decorators/consume";
@@ -12,6 +12,7 @@ import {
  filterPanelStyles,
 } from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { stringCompare } from "../common/string/compare";
@@ -25,16 +26,16 @@ import {
 } from "../data/context";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
-import { haStyleScrollbar } from "../resources/styles";
-import { loadVirtualizer } from "../resources/virtualizer";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
-import "./ha-list";
 import "./ha-state-icon";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";
+import "./item/ha-list-item-option";
+import "./list/ha-list-selectable-virtualized";
+import type { HaListSelectableVirtualized } from "./list/ha-list-selectable-virtualized";
+import type { HaListVirtualizedItem } from "./list/ha-list-virtualized";

-interface EntityItem {
+interface EntityItem extends HaListVirtualizedItem {
  stateObj: HassEntity;
  name: string;
 }
@@ -74,15 +75,14 @@ export class HaFilterEntities extends LitElement {

  private _panel = new FilterPanelController(this, this._content);

+  @query("ha-list-selectable-virtualized")
+  private _list?: HaListSelectableVirtualized;
+
  private _relatedRequestId = 0;

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

-    if (!this.hasUpdated) {
-      loadVirtualizer();
-    }
-
    if (
      properties.has("value") &&
      !deepEqual(this.value, properties.get("value"))
@@ -91,6 +91,15 @@ export class HaFilterEntities extends LitElement {
    }
  }

+  protected updated(properties: PropertyValues<this>) {
+    super.updated(properties);
+
+    // The rows don't change with the value, so render the selection again
+    if (properties.has("value")) {
+      this._list?.requestRowsUpdate();
+    }
+  }
+
  protected render() {
    return html`
      <ha-expansion-panel
@@ -121,23 +130,14 @@ export class HaFilterEntities extends LitElement {
                  @input=${this._handleSearchChange}
                >
                </ha-input-search>
-                <ha-list class="ha-scrollbar" multi>
-                  <lit-virtualizer
-                    .items=${this._entities(
-                      this._states,
-                      this._formatters,
-                      this.type,
-                      this._filter || "",
-                      this._i18n.locale.language,
-                      this.value
-                    )}
-                    .keyFunction=${this._keyFunction}
-                    .renderItem=${this._renderItem}
-                    @click=${this._handleItemClick}
-                    @keydown=${this._handleItemKeydown}
-                  >
-                  </lit-virtualizer>
-                </ha-list>
+                <ha-list-selectable-virtualized
+                  multi
+                  aria-label=${this._localize("ui.panel.config.entities.caption")}
+                  .rows=${this._currentEntities()}
+                  .rowRenderer=${this._renderItem}
+                  @ha-list-item-selected=${this._handleItemToggled}
+                  @ha-list-item-deselected=${this._handleItemToggled}
+                ></ha-list-selectable-virtualized>
              </div>
            `
          : nothing
@@ -145,43 +145,43 @@ export class HaFilterEntities extends LitElement {
    `;
  }

-  private _keyFunction = (item?: EntityItem) => item?.stateObj.entity_id;
-
  private _renderItem = (item?: EntityItem) =>
    !item
      ? nothing
-      : html`<ha-check-list-item
-          tabindex="0"
-          .value=${item.stateObj.entity_id}
-          .selected=${this.value?.includes(item.stateObj.entity_id) ?? false}
-          graphic="icon"
+      : html`<ha-list-item-option
+          style="width: 100%;"
+          appearance="checkbox"
+          selection-position="end"
+          .value=${item.id}
+          .selected=${this.value?.includes(item.id) ?? false}
        >
          <ha-state-icon
-            slot="graphic"
+            slot="start"
            .stateObj=${item.stateObj}
          ></ha-state-icon>
-          ${item.name}
-        </ha-check-list-item>`;
+          <span slot="headline">${item.name}</span>
+        </ha-list-item-option>`;

-  private _handleItemKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.preventDefault();
-      this._handleItemClick(ev);
-    }
-  }
-
-  private _handleItemClick(ev) {
-    const listItem = ev.target.closest("ha-check-list-item");
-    const value = listItem?.value;
-    if (!value) {
+  private _handleItemToggled(ev: CustomEvent<number>) {
+    const entityId = this._currentEntities()[ev.detail]?.id;
+    if (!entityId) {
      return;
    }
-    if (this.value?.includes(value)) {
-      this.value = this.value?.filter((val) => val !== value);
-    } else {
-      this.value = [...(this.value || []), value];
-    }
-    listItem.selected = this.value?.includes(value);
+
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, entityId)
+        : arrayWithout(this.value, entityId);
+  }
+
+  private _currentEntities() {
+    return this._entities(
+      this._states,
+      this._formatters,
+      this.type,
+      this._filter || "",
+      this._i18n.locale.language
+    );
  }

  private _expandedChanged(ev) {
@@ -199,12 +199,13 @@ export class HaFilterEntities extends LitElement {
      formatters: ContextType<typeof formattersContext>,
      type: this["type"],
      filter: string,
-      language: string | undefined,
-      _value
+      language: string | undefined
    ): EntityItem[] =>
      Object.values(states)
        .filter((stateObj) => !type || computeStateDomain(stateObj) !== type)
        .map((stateObj) => ({
+          id: stateObj.entity_id,
+          interactive: true,
          stateObj,
          name: formatters.formatEntityName(stateObj),
        }))
@@ -267,10 +268,9 @@ export class HaFilterEntities extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable-virtualized {
          flex: 1;
          min-height: 0;
        }
@@ -298,10 +298,6 @@ export class HaFilterEntities extends LitElement {
          padding: 0px 2px;
          color: var(--text-primary-color);
        }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: 16px;
-          width: 100%;
-        }
        ha-input-search {
          display: block;
          padding: var(--ha-space-1) var(--ha-space-2) 0;
@@ -1,11 +1,11 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import type { ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { consume } from "../common/decorators/consume";
 import {
@@ -13,20 +13,37 @@ import {
  filterPanelStyles,
 } from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { internationalizationContext, manifestsContext } from "../data/context";
 import type { IntegrationManifest } from "../data/integration";
 import { domainToName } from "../data/integration";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
-import "./ha-list";
+import "./ha-badge";
+import "./ha-svg-icon";
+import "./ha-tooltip";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";

+export interface IntegrationFilterCount {
+  key: string;
+  path: string;
+  count: number;
+  label: string;
+  color?: string;
+}
+
@customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
  @property({ attribute: false }) public value?: string[];
@@ -35,6 +52,12 @@ export class HaFilterIntegrations extends LitElement {

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

+  /** Counts to show beside each integration, by domain. */
+  @property({ attribute: false }) public counts?: Record<
+    string,
+    IntegrationFilterCount[]
+  >;
+
  @state()
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n!: ContextType<typeof internationalizationContext>;
@@ -92,37 +115,42 @@ export class HaFilterIntegrations extends LitElement {
                        @input=${this._handleSearchChange}
                      >
                      </ha-input-search>
-                      <ha-list
-                        class="ha-scrollbar"
-                        @selected=${this._itemSelected}
+                      <ha-list-selectable
                        multi
+                        aria-label=${this._localize(
+                          "ui.panel.config.integrations.caption"
+                        )}
+                        @ha-list-item-selected=${this._handleItemToggled}
+                        @ha-list-item-deselected=${this._handleItemToggled}
                      >
                        ${repeat(
                          this._integrations(
                            this._localize,
                            manifests,
                            this._filter,
-                            this.value,
                            this._i18n.locale.language
                          ),
                          (i) => i.domain,
                          (integration) =>
-                            html`<ha-check-list-item
+                            html`<ha-list-item-option
+                              appearance="checkbox"
+                              selection-position="end"
                              .value=${integration.domain}
-                              .selected=${(this.value || []).includes(
-                                integration.domain
-                              )}
-                              graphic="icon"
+                              .selected=${
+                                this.value?.includes(integration.domain) ??
+                                false
+                              }
                            >
                              <ha-domain-icon
-                                slot="graphic"
+                                slot="start"
                                .domain=${integration.domain}
                                brand-fallback
                              ></ha-domain-icon>
-                              ${integration.name}
-                            </ha-check-list-item>`
+                              <span slot="headline">${integration.name}</span>
+                              ${this._renderCounts(integration.domain)}
+                            </ha-list-item-option>`
                        )}
-                      </ha-list>`
+                      </ha-list-selectable>`
                  : nothing
              }
            </div>`
@@ -131,6 +159,32 @@ export class HaFilterIntegrations extends LitElement {
    `;
  }

+  private _renderCounts(domain: string): TemplateResult | typeof nothing {
+    const counts = this.counts?.[domain];
+
+    if (!counts?.length) {
+      return nothing;
+    }
+
+    return html`<span slot="supporting-text" class="counts">
+      ${counts.map(
+        (item) =>
+          html`<ha-badge
+              id="count-${domain}-${item.key}"
+              role="img"
+              aria-label=${item.label}
+              style=${styleMap({ "--badge-color": item.color })}
+            >
+              <ha-svg-icon slot="icon" .path=${item.path}></ha-svg-icon>
+              ${item.count}
+            </ha-badge>
+            <ha-tooltip for="count-${domain}-${item.key}">
+              ${item.label}
+            </ha-tooltip>`
+      )}
+    </span>`;
+  }
+
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -144,7 +198,6 @@ export class HaFilterIntegrations extends LitElement {
      localize: LocalizeFunc,
      manifest: IntegrationManifest[],
      filter: string | undefined,
-      _value: string[] | undefined,
      language: string
    ) =>
      manifest
@@ -165,26 +218,20 @@ export class HaFilterIntegrations extends LitElement {
        .sort((a, b) => stringCompare(a.name, b.name, language))
  );

-  private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    if (!this._manifests) {
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
+  ) {
+    const domain = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!domain) {
      return;
    }

-    const integrations = this._integrations(
-      this._localize,
-      this._manifestList(this._manifests),
-      this._filter,
-      this.value,
-      this._i18n.locale.language
-    );
-
-    const visibleDomains = new Set(integrations.map((i) => i.domain));
-    const preserved = (this.value || []).filter((d) => !visibleDomains.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => integrations[i]?.domain)
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, domain)
+        : arrayWithout(this.value, domain);

    fireEvent(this, "data-table-filter-changed", {
      value: this.value.length ? this.value : undefined,
@@ -208,10 +255,14 @@ export class HaFilterIntegrations extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -223,9 +274,6 @@ export class HaFilterIntegrations extends LitElement {
          margin-inline-start: auto;
          margin-inline-end: 8px;
        }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
        .badge {
          display: inline-block;
          margin-left: 8px;
@@ -246,6 +294,15 @@ export class HaFilterIntegrations extends LitElement {
          display: block;
          padding: var(--ha-space-1) var(--ha-space-2) 0;
        }
+        .counts {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--ha-space-1);
+          margin-top: var(--ha-space-1);
+          --ha-badge-size: 22px;
+          --ha-badge-icon-size: 14px;
+          --ha-badge-font-size: var(--ha-font-size-xs);
+        }
      `,
    ];
  }
@@ -1,5 +1,4 @@
 import type { ContextType } from "@lit/context";
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -13,22 +12,29 @@ import {
  filterPanelStyles,
 } from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { internationalizationContext, labelsContext } from "../data/context";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-label";
-import "./ha-list";
-import "./ha-list-item";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";
+import "./item/ha-list-item-button";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-base";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";

@customElement("ha-filter-labels")
 export class HaFilterLabels extends LitElement {
@@ -57,12 +63,10 @@ export class HaFilterLabels extends LitElement {
  private _panel = new FilterPanelController(this, this._content);

  private _filteredLabels = memoizeOne(
-    // `_value` used to recalculate the memoization when the selection changes
    (
      labels: LabelRegistryEntry[],
      filter: string | undefined,
-      language: string | undefined,
-      _value
+      language: string | undefined
    ) =>
      labels
        .filter(
@@ -105,26 +109,28 @@ export class HaFilterLabels extends LitElement {
                @input=${this._handleSearchChange}
              >
              </ha-input-search>
-              <ha-list
-                @selected=${this._labelSelected}
-                class="ha-scrollbar"
+              <ha-list-selectable
                multi
+                aria-label=${this._localize("ui.panel.config.labels.caption")}
+                @ha-list-item-selected=${this._handleItemToggled}
+                @ha-list-item-deselected=${this._handleItemToggled}
              >
                ${repeat(
                  this._filteredLabels(
                    this._labels || [],
                    this._filter,
-                    this._i18n.locale.language,
-                    this.value
+                    this._i18n.locale.language
                  ),
                  (label) => label.label_id,
                  (label) =>
-                    html`<ha-check-list-item
+                    html`<ha-list-item-option
+                      appearance="checkbox"
+                      selection-position="end"
                      .value=${label.label_id}
-                      .selected=${(this.value || []).includes(label.label_id)}
-                      hasMeta
+                      .selected=${this.value?.includes(label.label_id) ?? false}
                    >
                      <ha-label
+                        slot="headline"
                        .color=${label.color}
                        .description=${label.description}
                      >
@@ -138,13 +144,17 @@ export class HaFilterLabels extends LitElement {
                        }
                        ${label.name}
                      </ha-label>
-                    </ha-check-list-item>`
+                    </ha-list-item-option>`
                )}
-              </ha-list>
-              <ha-list-item graphic="icon" @click=${this._manageLabels}>
-                <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-                ${this._localize("ui.panel.config.labels.manage_labels")}
-              </ha-list-item>
+              </ha-list-selectable>
+              <ha-list-base>
+                <ha-list-item-button @click=${this._manageLabels}>
+                  <ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
+                  <span slot="headline"
+                    >${this._localize("ui.panel.config.labels.manage_labels")}</span
+                  >
+                </ha-list-item-button>
+              </ha-list-base>
            </div>`
          : nothing
      }
@@ -164,35 +174,23 @@ export class HaFilterLabels extends LitElement {
    this._filter = value.toLowerCase();
  }

-  private async _labelSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const filteredLabels = this._filteredLabels(
-      this._labels || [],
-      this._filter,
-      this._i18n.locale.language,
-      this.value
-    );
-
-    const filteredLabelIds = new Set(filteredLabels.map((l) => l.label_id));
-
-    // Keep previously selected labels that are not in the current filtered view
-    const preservedLabels = (this.value || []).filter(
-      (id) => !filteredLabelIds.has(id)
-    );
-
-    // Build the new selection from the filtered labels based on selected indices
-    const newlySelectedLabels: string[] = [];
-    for (const index of ev.detail.index) {
-      const labelId = filteredLabels[index]?.label_id;
-      if (labelId) {
-        newlySelectedLabels.push(labelId);
-      }
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
+  ) {
+    const labelId = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!labelId) {
+      return;
    }

-    const value = [...preservedLabels, ...newlySelectedLabels];
-    this.value = value.length ? value : [];
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, labelId)
+        : arrayWithout(this.value, labelId);

    fireEvent(this, "data-table-filter-changed", {
-      value: value.length ? value : undefined,
+      value: this.value.length ? this.value : undefined,
      items: undefined,
    });
  }
@@ -208,10 +206,14 @@ export class HaFilterLabels extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -1,20 +1,26 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { createRef, ref } from "lit/directives/ref";
 import {
  FilterPanelController,
  filterPanelStyles,
 } from "../common/controllers/filter-panel-controller";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-list";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";

@customElement("ha-filter-states")
 export class HaFilterStates extends LitElement {
@@ -40,7 +46,6 @@ export class HaFilterStates extends LitElement {
    if (!this.states) {
      return nothing;
    }
-    const hasIcon = this.states.find((item) => item.icon);
    return html`
      <ha-expansion-panel
        left-chevron
@@ -64,30 +69,32 @@ export class HaFilterStates extends LitElement {
        this._panel.showContent
          ? html`
              <div class="content" ${ref(this._content)}>
-                <ha-list
-                  @selected=${this._statesSelected}
+                <ha-list-selectable
                  multi
-                  class="ha-scrollbar"
+                  aria-label=${ifDefined(this.label)}
+                  @ha-list-item-selected=${this._handleItemToggled}
+                  @ha-list-item-deselected=${this._handleItemToggled}
                >
                  ${this.states.map(
                    (item) =>
-                      html`<ha-check-list-item
+                      html`<ha-list-item-option
+                        appearance="checkbox"
+                        selection-position="end"
                        .value=${item.value}
                        .selected=${this.value?.includes(item.value) ?? false}
-                        .graphic=${hasIcon ? "icon" : null}
                      >
                        ${
                          item.icon
                            ? html`<ha-icon
-                                slot="graphic"
+                                slot="start"
                                .icon=${item.icon}
                              ></ha-icon>`
                            : nothing
                        }
-                        ${item.label}
-                      </ha-check-list-item>`
+                        <span slot="headline">${item.label}</span>
+                      </ha-list-item-option>`
                  )}
-                </ha-list>
+                </ha-list-selectable>
              </div>
            `
          : nothing
@@ -99,26 +106,23 @@ export class HaFilterStates extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  private async _statesSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    if (!ev.detail.index.size) {
-      fireEvent(this, "data-table-filter-changed", {
-        value: [],
-        items: undefined,
-      });
-      this.value = [];
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
+  ) {
+    const state = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!state) {
      return;
    }

-    const value: string[] = [];
-
-    for (const index of ev.detail.index) {
-      const val = this.states![index].value;
-      value.push(val);
-    }
-    this.value = value;
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, state)
+        : arrayWithout(this.value, state);

    fireEvent(this, "data-table-filter-changed", {
-      value,
+      value: this.value,
      items: undefined,
    });
  }
@@ -134,10 +138,14 @@ export class HaFilterStates extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -1,4 +1,3 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -11,14 +10,19 @@ import {
 } from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { arrayWith, arrayWithout } from "../common/array/array-with";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-label";
-import "./ha-list";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";
 import "./voice-assistant-brand-icon";
 import { voiceAssistants } from "../data/expose";

@@ -64,30 +68,35 @@ export class HaFilterVoiceAssistants extends LitElement {
      ${
        this._panel.showContent
          ? html`<div class="content" ${ref(this._content)}>
-              <ha-list
-                @selected=${this._assistantsSelected}
-                class="ha-scrollbar"
+              <ha-list-selectable
                multi
+                aria-label=${this._localize(
+                  "ui.panel.config.dashboard.voice_assistants.main"
+                )}
+                @ha-list-item-selected=${this._handleItemToggled}
+                @ha-list-item-deselected=${this._handleItemToggled}
              >
                ${repeat(
                  this._voiceAssistantOptions,
                  (voiceAssistantId) => voiceAssistantId,
                  (voiceAssistantId) =>
-                    html`<ha-check-list-item
+                    html`<ha-list-item-option
+                      appearance="checkbox"
+                      selection-position="end"
                      .value=${voiceAssistantId}
-                      .selected=${(this.value || []).includes(voiceAssistantId)}
-                      hasMeta
-                      graphic="icon"
+                      .selected=${this.value?.includes(voiceAssistantId) ?? false}
                    >
                      <voice-assistant-brand-icon
-                        slot="graphic"
+                        slot="start"
                        .voiceAssistantId=${voiceAssistantId}
                      >
                      </voice-assistant-brand-icon>
-                      ${voiceAssistants[voiceAssistantId].name}
-                    </ha-check-list-item>`
+                      <span slot="headline"
+                        >${voiceAssistants[voiceAssistantId].name}</span
+                      >
+                    </ha-list-item-option>`
                )}
-              </ha-list>
+              </ha-list-selectable>
            </div>`
          : nothing
      }
@@ -103,23 +112,20 @@ export class HaFilterVoiceAssistants extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  private async _assistantsSelected(
-    ev: CustomEvent<SelectedDetail<Set<number>>>
+  private _handleItemToggled(
+    ev: HASSDomEvent<number> & HASSDomCurrentTargetEvent<HaListSelectable>
  ) {
-    if (!ev.detail.index) {
-      fireEvent(this, "data-table-filter-changed", {
-        value: [],
-        items: undefined,
-      });
-      this.value = [];
+    const voiceAssistantId = (
+      ev.currentTarget.items[ev.detail] as HaListItemOption | undefined
+    )?.value;
+    if (!voiceAssistantId) {
      return;
    }

-    const newvalue: string[] = [];
-    for (const index of ev.detail.index) {
-      newvalue.push(this._voiceAssistantOptions![index]);
-    }
-    this.value = newvalue;
+    this.value =
+      ev.type === "ha-list-item-selected"
+        ? arrayWith(this.value, voiceAssistantId)
+        : arrayWithout(this.value, voiceAssistantId);

    fireEvent(this, "data-table-filter-changed", {
      value: this.value,
@@ -138,10 +144,14 @@ export class HaFilterVoiceAssistants extends LitElement {

  static get styles(): CSSResultGroup {
    return [
-      haStyleScrollbar,
      filterPanelStyles,
      css`
-        ha-list {
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
          flex: 1;
          min-height: 0;
        }
@@ -153,9 +163,6 @@ export class HaFilterVoiceAssistants extends LitElement {
          margin-inline-start: auto;
          margin-inline-end: 8px;
        }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
        .badge {
          display: inline-block;
          margin-left: 8px;
@@ -1,3 +1,4 @@
+import { ensureArray } from "../../common/array/ensure-array";
 import type {
  HaFormCondition,
  HaFormDataContainer,
@@ -87,26 +88,38 @@ export const combineVisible = (
  return conditions;
 };

+const getConditionFields = (visible: HaFormVisible | undefined): string[] =>
+  visible === undefined || typeof visible === "boolean"
+    ? []
+    : ensureArray(visible).flatMap((condition) =>
+        "condition" in condition
+          ? condition.conditions.flatMap((sub) => getConditionFields(sub))
+          : [condition.field]
+      );
+
 // Hiding a field drops its value, which can flip another field's condition, so
-// resolve the set to a fixpoint. Fields are given in order as name and visible.
+// a field is evaluated after the fields its condition depends on.
 export const getHiddenFields = (
  fields: readonly (readonly [string, HaFormVisible | undefined])[],
  data: HaFormDataContainer | undefined
 ): Set<string> => {
-  const hidden = new Set<string>();
+  const conditions = new Map(fields);
  const evalData: HaFormDataContainer = { ...(data ?? {}) };
-  let changed = true;
-  while (changed) {
-    changed = false;
-    for (const [name, visible] of fields) {
-      if (hidden.has(name) || isVisible(visible, evalData)) {
-        continue;
-      }
+  const hidden = new Set<string>();
+  const resolved = new Set<string>();
+  const resolve = (name: string) => {
+    if (resolved.has(name) || !conditions.has(name)) {
+      return;
+    }
+    resolved.add(name);
+    const visible = conditions.get(name);
+    getConditionFields(visible).forEach(resolve);
+    if (!isVisible(visible, evalData)) {
      hidden.add(name);
      delete evalData[name];
-      changed = true;
    }
-  }
+  };
+  fields.forEach(([name]) => resolve(name));
  return hidden;
 };

@@ -2,7 +2,7 @@ import "@home-assistant/webawesome/dist/components/popover/popover";
 import type WaPopover from "@home-assistant/webawesome/dist/components/popover/popover";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { ContextType } from "@lit/context";
-import { mdiPlaylistPlus } from "@mdi/js";
+import { mdiPlaylistPlus, mdiRefresh } from "@mdi/js";
 import {
  css,
  html,
@@ -17,13 +17,15 @@ import { styleMap } from "lit/directives/style-map";
 import { tinykeys } from "tinykeys";
 import { consume } from "../common/decorators/consume";
 import { fireEvent } from "../common/dom/fire_event";
-import { configContext } from "../data/context";
+import { configContext, internationalizationContext } from "../data/context";
 import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import { isIosApp } from "../util/is_ios";
+import "./ha-alert";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
+import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-picker-combo-box";
 import type {
@@ -33,6 +35,7 @@ import type {
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
 import "./ha-svg-icon";
+import "./skeleton/ha-skeleton";

@customElement("ha-generic-picker")
 export class HaGenericPicker extends PickerMixin(LitElement) {
@@ -114,6 +117,15 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  @property({ type: Boolean, attribute: "no-unknown-state" })
  public noUnknownState = false;

+  /** Shows a skeleton in place of the field while its items load. */
+  @property({ type: Boolean, reflect: true }) public loading = false;
+
+  /**
+   * Shows this error with a retry button in place of the field when its items
+   * failed to load. The retry button fires `picker-retry`.
+   */
+  @property({ attribute: false }) public loadError?: string;
+
  @query(".container") private _containerElement?: HTMLDivElement;

  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -124,6 +136,14 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  @consume({ context: configContext, subscribe: true })
  private _hassConfig?: ContextType<typeof configContext>;

+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
+
+  // Set once loading starts, then hidden with CSS once it ends, so the
+  // skeleton fades out over the field
+  @state() private _skeletonShown = false;
+
  @state() private _opened = false;

  @state() private _pickerWrapperOpen = false;
@@ -155,9 +175,14 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  private _unsubscribeTinyKeys?: () => void;

  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("loading") && this.loading) {
+      this._skeletonShown = true;
+    }
    if (
      changedProperties.has("value") ||
-      changedProperties.has("noUnknownState")
+      changedProperties.has("noUnknownState") ||
+      changedProperties.has("loading") ||
+      changedProperties.has("loadError")
    ) {
      this._setUnknownValue();
    }
@@ -183,45 +208,73 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
            : nothing
        }
        <div id="picker">
-          <slot name="field">
-            ${
-              this.addButtonLabel && !this.value
-                ? html`<ha-button
-                    size="s"
-                    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
-                    .unknown=${this._unknownValue}
-                    .unknownItemText=${this.unknownItemText}
-                    aria-label=${ifDefined(this.ariaLabel || this.label)}
-                    @click=${this.open}
-                    @clear=${this._clear}
-                    .icon=${this.icon}
-                    .image=${this.image}
-                    .label=${label}
-                    .placeholder=${this.placeholder}
-                    .value=${this.value}
-                    .valueRenderer=${this.valueRenderer}
-                    .required=${this.required}
-                    .disabled=${this.disabled}
-                    .invalid=${this.invalid}
-                    .hideClearIcon=${this.hideClearIcon}
-                  >
-                    <slot name="start"></slot>
-                  </ha-picker-field>`
-            }
-          </slot>
+          <div class="field" ?inert=${this.loading || !!this.loadError}>
+            <slot name="field">
+              ${
+                this.addButtonLabel && !this.value
+                  ? html`<ha-button
+                      size="s"
+                      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
+                      .unknown=${this._unknownValue}
+                      .unknownItemText=${this.unknownItemText}
+                      aria-label=${ifDefined(this.ariaLabel || this.label)}
+                      @click=${this.open}
+                      @clear=${this._clear}
+                      .icon=${this.icon}
+                      .image=${this.image}
+                      .label=${label}
+                      .placeholder=${this.placeholder}
+                      .value=${this.value}
+                      .valueRenderer=${this.valueRenderer}
+                      .required=${this.required}
+                      .disabled=${this.disabled}
+                      .invalid=${this.invalid}
+                      .hideClearIcon=${this.hideClearIcon}
+                    >
+                      <slot name="start"></slot>
+                    </ha-picker-field>`
+              }
+            </slot>
+          </div>
+          ${
+            this._skeletonShown
+              ? html`<ha-skeleton
+                  class="loading-skeleton"
+                  role=${ifDefined(this.loading ? "progressbar" : undefined)}
+                  aria-label=${ifDefined(
+                    this.loading ? this._loadingLabel() : undefined
+                  )}
+                ></ha-skeleton>`
+              : nothing
+          }
+          ${
+            this.loadError
+              ? html`<div class="load-error">
+                  <ha-alert alert-type="error">
+                    ${this.loadError}
+                    <ha-icon-button
+                      slot="action"
+                      .path=${mdiRefresh}
+                      .label=${this._i18n?.localize("ui.common.retry")}
+                      @click=${this._retry}
+                    ></ha-icon-button>
+                  </ha-alert>
+                </div>`
+              : nothing
+          }
        </div>
        ${
          this._pickerWrapperOpen || this._opened
@@ -298,9 +351,25 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
    `;
  }

+  private _loadingLabel() {
+    const label = this.ariaLabel || this.label || this.placeholder;
+    return label
+      ? this._i18n?.localize("ui.components.generic-picker.loading", {
+          label,
+        })
+      : this._i18n?.localize("ui.common.loading");
+  }
+
+  private _retry(ev: Event) {
+    ev.stopPropagation();
+    fireEvent(this, "picker-retry");
+  }
+
  private _setUnknownValue = () => {
    const items = this.getItems();
    if (
+      this.loading ||
+      this.loadError ||
      this.noUnknownState ||
      this.allowCustomValue ||
      this.value === undefined ||
@@ -413,7 +482,8 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
    }
  ) {
    ev?.stopPropagation();
-    if (this.disabled) {
+
+    if (this.disabled || this.loading || this.loadError) {
      return;
    }
    this._selectedValue = options?.selectedValue;
@@ -459,6 +529,53 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
          display: block;
          max-width: 100%;
        }
+        /* The error shares the field's cell, so a wrapping error grows the
+           picker instead of covering what follows */
+        #picker {
+          position: relative;
+          display: grid;
+        }
+        #picker > .field,
+        #picker > .load-error {
+          grid-area: 1 / 1;
+          min-width: 0;
+        }
+        /* The field keeps its place under the skeleton, so nothing moves and
+           the two cross fade once loading ends */
+        .field {
+          transition: opacity var(--ha-animation-duration-fast, 150ms) ease-out;
+        }
+        :host([loading]) .field,
+        .field[inert] {
+          opacity: 0;
+        }
+        .loading-skeleton {
+          position: absolute;
+          inset: 0;
+          --ha-skeleton-border-radius: var(--ha-border-radius-sm);
+          transition: opacity var(--ha-animation-duration-fast, 150ms) ease-out;
+        }
+        @starting-style {
+          .loading-skeleton {
+            opacity: 0;
+          }
+        }
+        /* Hidden once faded out, and at once when no fade runs */
+        :host(:not([loading])) .loading-skeleton {
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+          transition:
+            opacity var(--ha-animation-duration-fast, 150ms) ease-out,
+            visibility 0s linear var(--ha-animation-duration-fast, 150ms);
+        }
+        .load-error {
+          display: flex;
+          align-items: center;
+        }
+        .load-error ha-alert {
+          flex: 1;
+        }
        label[disabled] {
          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
        }
@@ -540,5 +657,6 @@ declare global {
  interface HASSDomEvents {
    "picker-closed": undefined;
    "picker-opened": undefined;
+    "picker-retry": undefined;
  }
 }
@@ -178,7 +178,8 @@ export class HaNavigationPicker extends LitElement {
        allow-custom-value
        .placeholder=${this.label}
        .helper=${this.helper}
-        .disabled=${this._loading || this.disabled}
+        .disabled=${this.disabled}
+        .loading=${this._loading}
        .required=${this.required}
        .getItems=${this._getItems}
        .valueRenderer=${this._valueRenderer}
@@ -1 +1 @@
 .22.1
 .22.2