Edit security favorites, alerts and visibility inline on the page

Give the security page a hidden_entities list like the other pages and replace its edit dialog with the inline edit mode. In edit mode every tile, favorites included, carries an eye, a star and, for alert-capable domains, a bell that cycles through none, warning and alert. Each tap saves at once. The Home dashboard summary badge, overview check and area views take the same hidden list.

Hidden, favorite and alert flags stay independent, so a hidden entity can still be a favorite or raise alerts, and the Home security summary stays while alerts are configured.

In edit mode the sidebar lists every configured alert, active or not, in its configured color, so a saved alert can always be changed or cleared there, including one whose entity no longer matches the page or was deleted. These entries pick the level with a three-way control instead of the cycling bell, so clearing is an explicit choice and an entry does not vanish on the way from alert back to warning. Changing a level keeps the alert in its place in the list. Favorites and alert entries show regardless of the hidden list, so they carry the star and the alert control but no eye. A deleted entity shows its ID in place of its card, so two stale entries stay distinguishable.

Toggling the eye only flips the wrapper's own flag and saves, like on the other pages. A star or bell tap moves the entity between the grid and the sidebar lists, so those regenerate the view, and the wrapper card's focus restoration covers the star and the alert controls and tells the grid tile and the sidebar entry of one entity apart, so the recreated wrapper focuses the control that fired. When a tap removes the entry itself, focus moves to the same control on the next entry in that list. When the list runs out, the last favorite hands focus to the first tile of the section that takes its place at the top of the page, and the last alert entry to the entity's own page tile if it has one; the strategy puts that fallback on the wrapper. When there is no fallback, or the recreated tile cannot take focus because the narrow layout shows the Activity tab, the card tells the panel and the panel focuses its exit-edit-mode button instead, so keyboard focus never drops to the page. Entering edit mode drops any request left over from an entry without either. ha-control-select gains a focus() that lands on its selected option for this. A failed save reloads the configuration and forces a rebuild so the wrappers show the stored state again.

The dialog, its alerts editor, the entity filter helper and the dialog test go away. Strategy tests pin down that a hidden entity keeps its favorite and alert entries, that stale favorites and alerts only show in edit mode, and the shape of the edit-mode wrappers.

.agents/skills/ha-frontend-components/SKILL.md

@@ -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.

.agents/skills/ha-frontend-styling/SKILL.md

@@ -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.

.gitattributes

@@ -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

.github/PULL_REQUEST_TEMPLATE.md

@@ -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

.github/actionlint.yaml

@@ -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'

.github/actions/netlify-deploy/action.yml

@@ -35,11 +35,12 @@ runs:
         NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
         NETLIFY_SITE_ID: ${{ inputs.site-id }}
       run: |
-        # Execute the deployment
+        # Execute the deployment (--filter picks the root workspace project,
+        # --no-build because we deploy an already built directory)
         if [ -n "$ALIAS" ]; then
-          npx -y netlify-cli deploy --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
+          npx -y netlify-cli deploy --filter home-assistant-frontend --no-build --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
         else
-          npx -y netlify-cli deploy --dir="$DIR" --prod --json > deploy_output.json
+          npx -y netlify-cli deploy --filter home-assistant-frontend --no-build --dir="$DIR" --prod --json > deploy_output.json
         fi
 
         # Collect the urls from the deployment output

.github/actions/prepare-dependencies/action.yml

@@ -16,6 +16,7 @@ runs:
       with:
         path: |
           node_modules
+          packages/*/node_modules
           ~/.local/share/pnpm/store
         key: >-
           ${{ inputs.node-modules-cache-key }}-${{ runner.os }}-${{ runner.arch }}-${{
@@ -24,7 +25,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
 
@@ -35,6 +36,7 @@ runs:
       with:
         path: |
           node_modules
+          packages/*/node_modules
           ~/.local/share/pnpm/store
         key: >-
           ${{ inputs.node-modules-cache-key }}-${{ runner.os }}-${{ runner.arch }}-${{

.github/actions/setup/action.yml

@@ -28,6 +28,7 @@ runs:
       with:
         path: |
           node_modules
+          packages/*/node_modules
           ~/.local/share/pnpm/store
         key: >-
           ${{ inputs.node-modules-cache-key }}-${{ runner.os }}-${{ runner.arch }}-${{

.github/workflows/actions-lock.yaml

@@ -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

.github/workflows/actions.lock

@@ -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

.github/workflows/cast_deployment.yaml

@@ -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 }}

.github/workflows/ci.yaml

@@ -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 }}

.github/workflows/codeql-analysis.yaml

@@ -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"

.github/workflows/copilot-setup-steps.yml

@@ -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"

.github/workflows/demo_deployment.yaml

@@ -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 }}

.github/workflows/design_deployment.yaml

@@ -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 }}

.github/workflows/design_preview.yaml

@@ -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 }}

.github/workflows/e2e.yaml

@@ -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.65.0-noble@sha256:6e3fb709361521eb27161606e6da6d2674e5e89fa16516cb37d6fdd91372273d
       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.65.0-noble@sha256:6e3fb709361521eb27161606e6da6d2674e5e89fa16516cb37d6fdd91372273d
       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.65.0-noble@sha256:6e3fb709361521eb27161606e6da6d2674e5e89fa16516cb37d6fdd91372273d
       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.65.0-noble@sha256:6e3fb709361521eb27161606e6da6d2674e5e89fa16516cb37d6fdd91372273d
       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
 

.github/workflows/nightly.yaml

@@ -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
 

.github/workflows/release.yaml

@@ -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

.github/workflows/sync-device-classes.yaml

@@ -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

.github/workflows/sync-sensor-entity-constants.yaml

@@ -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

.nvmrc

@@ -1 +1 @@
-24.22.1
+24.22.2

AGENTS.md

@@ -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.

build-scripts/rspack.cjs

@@ -68,8 +68,42 @@ const CONFIG_FILES = [
   path.join(__dirname, "lit-disable-dev-mode-loader.cjs"),
   path.join(__dirname, "babel-plugins", "custom-polyfill-plugin.js"),
   path.join(__dirname, "babel-plugins", "inline-constants-plugin.cjs"),
+  // Its exports define the components source aliases below
+  path.join(__dirname, "..", "packages", "components", "package.json"),
 ];
 
+// Resolve @home-assistant/components entry points to their sources, so the package
+// needs no build step during development. The entry points are read from the
+// "ha-source" export condition of the package; subpath patterns are expanded
+// for every element, i.e. every directory with a global.ts, like "card".
+const COMPONENTS_PACKAGE_DIR = path.join(
+  paths.root_dir,
+  "packages",
+  "components"
+);
+const COMPONENTS_SRC_DIR = path.join(
+  COMPONENTS_PACKAGE_DIR,
+  "src",
+  "components"
+);
+const componentElements = fs
+  .readdirSync(COMPONENTS_SRC_DIR, { recursive: true })
+  .filter((file) => path.basename(file) === "global.ts")
+  .map((file) => path.dirname(file).split(path.sep).join("/"));
+const componentsSourceAliases = Object.fromEntries(
+  Object.entries(require("../packages/components/package.json").exports)
+    .filter(([, target]) => target["ha-source"])
+    .flatMap(([subpath, target]) =>
+      (subpath.includes("*") ? componentElements : [undefined]).map((name) => [
+        `${path.posix.join("@home-assistant/components", name ? subpath.replaceAll("*", name) : subpath)}$`,
+        path.join(
+          COMPONENTS_PACKAGE_DIR,
+          name ? target["ha-source"].replaceAll("*", name) : target["ha-source"]
+        ),
+      ])
+    )
+);
+
 // Patches change a package's files but not its version, which is all the
 // node_modules snapshot checks, so their contents go into the version too.
 const PATCHES_DIR = path.join(paths.root_dir, "patches");
@@ -431,6 +465,7 @@ const createRspackConfig = ({
             "src/resources/polyfills/bigdecimal.ts"
           ),
         }),
+        ...componentsSourceAliases,
         "lit/static-html$": "lit/static-html.js",
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",

cast/public/manifest.json

@@ -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": [

cast/src/html/_social_meta.html.template

@@ -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"

cast/src/html/faq.html.template

@@ -3,6 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate("../../../src/html/_meta_viewport.html.template") %>
     <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       body {
@@ -52,7 +53,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>
 

cast/src/html/index.html.template

@@ -4,6 +4,7 @@
     <title>Home Assistant Cast</title>
     <link rel="manifest" href="/manifest.json" />
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate("../../../src/html/_meta_viewport.html.template") %>
     <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       body {

cast/src/html/receiver.html.template

@@ -4,6 +4,7 @@
   <% for (const entry of latestEntryJS) { %>
     <script type="module" src="<%= entry %>"></script>
   <% } %>
+  <%= renderTemplate("../../../src/html/_meta_viewport.html.template") %>
   <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {

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

@@ -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;
     }

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

@@ -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

cast/src/media/entrypoint.ts

@@ -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";

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -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."

cast/src/receiver/entrypoint.ts

@@ -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";

demo/src/html/index.html.template

@@ -35,13 +35,12 @@
     />
     <meta name="theme-color" content="#03a9f4" />
     <%= renderTemplate("_social_meta.html.template") %>
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
-        /* Prevent iOS Safari from inflating text when rotating to landscape */
-        -webkit-text-size-adjust: 100%;
-        text-size-adjust: 100%;
+        height: 100vh;
       }
       @media (prefers-color-scheme: dark) {
         html {
@@ -49,15 +48,6 @@
           color: var(--primary-text-color, #e1e1e1);
         }
       }
-      body {
-        font-family: Roboto, Noto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-weight: 400;
-        height: 100vh;
-        margin: 0;
-        padding: 0;
-      }
     </style>
     <%= renderTemplate("../../../src/html/_style_launch_screen.html.template") %>
   </head>

demo/src/stubs/connectivity/infrared/fixtures.ts

@@ -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",

demo/src/stubs/connectivity/radio_frequency/fixtures.ts

@@ -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") },
   ],

demo/src/stubs/energy.ts

@@ -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",

demo/src/stubs/entities.ts

@@ -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",

demo/src/stubs/recorder.ts

@@ -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,

eslint.config.mjs

@@ -301,6 +301,14 @@ export default tseslint.config(
       globals: globals.node,
     },
   },
+  {
+    // Published as native ESM, where package subpath imports such as
+    // "lit/decorators.js" need their extension.
+    files: ["packages/*/src/**/*.ts"],
+    rules: {
+      "import-x/extensions": ["error", "ignorePackages", { ts: "never" }],
+    },
+  },
   {
     plugins: {
       html,

gallery/sidebar.js

@@ -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"],

gallery/src/data/media_players.ts

@@ -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",

gallery/src/pages/brand/our-story.markdown

@@ -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.

gallery/src/pages/components/ha-picker-combo-box.markdown

@@ -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.                                                                                    |

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

@@ -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,

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

@@ -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",

gallery/src/pages/components/state-history-charts.markdown

@@ -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.

gallery/src/pages/components/state-history-charts.ts

@@ -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;
+  }
+}

gallery/src/pages/components/statistics-chart.markdown

@@ -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.

gallery/src/pages/components/statistics-chart.ts

@@ -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;
+  }
+}

gallery/src/pages/lovelace/media-control-card.ts

@@ -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: {

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

@@ -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: {

gallery/src/pages/misc/integration-card.ts

@@ -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]) =>

landing-page/src/html/index.html.template

@@ -3,6 +3,7 @@
   <head>
     <title>Home Assistant</title>
     <%= renderTemplate("../../../src/html/_header.html.template") %>
+    <%= renderTemplate("../../../src/html/_meta_viewport.html.template") %>
     <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       html {

package.json

@@ -13,7 +13,7 @@
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "node ./node_modules/@typescript/native/bin/tsc && node ./node_modules/@typescript/native/bin/tsc -p .github/scripts",
-    "lint:lit": "lit-analyzer \"{.,*}/src/**/*.ts\"",
+    "lint:lit": "lit-analyzer \"{.,*,packages/*}/src/**/*.ts\"",
     "lint:element-imports": "eslint \"**/src/**/*.{js,ts,html}\" --ignore-pattern=.gitignore --rule '{\"ha/no-unused-element-import\": \"warn\"}'",
     "lint:licenses": "node --no-deprecation script/check-licenses",
     "lint": "pnpm run lint:eslint && pnpm run lint:prettier && pnpm run lint:types && pnpm run lint:lit",
@@ -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",
@@ -73,16 +73,15 @@
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
-    "@material/mwc-list": "0.27.0",
     "@mdi/js": "7.4.47",
     "@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",
+    "@swc/helpers": "0.5.24",
+    "@tsparticles/engine": "4.5.2",
+    "@tsparticles/preset-links": "4.5.2",
+    "@versatiles/style": "8.1.1",
     "@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",
@@ -98,10 +97,10 @@
     "echarts": "6.1.0",
     "echarts-extension-chart2music": "0.1.1",
     "element-internals-polyfill": "3.0.2",
-    "fullcalendar": "7.1.3",
+    "fullcalendar": "7.1.4",
     "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 +109,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",
@@ -123,7 +122,7 @@
     "sortablejs": "1.15.7",
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
-    "temporal-polyfill": "1.0.6",
+    "temporal-polyfill": "1.0.8",
     "tinykeys": "4.0.1",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.4.1",
@@ -137,24 +136,25 @@
   },
   "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",
+    "@home-assistant/components": "workspace:*",
     "@html-eslint/eslint-plugin": "0.67.0",
     "@lokalise/node-api": "17.0.1",
     "@octokit/auth-oauth-device": "8.0.5",
     "@octokit/rest": "22.0.1",
-    "@playwright/test": "1.64.1",
+    "@playwright/test": "1.65.0",
     "@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,14 +188,14 @@
     "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.4",
+    "globals": "17.14.0",
     "gulp": "5.0.1",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "30.1.3",
+    "jsdom": "31.0.0",
     "jszip": "3.10.2",
     "license-checker-rseidelsohn": "5.0.1",
     "lightningcss": "1.33.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",
-    "vite": "8.3.5",
+    "typescript-eslint": "8.72.1",
+    "vite": "8.3.6",
     "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]8.0",
   "volta": {
-    "node": "24.22.1"
+    "node": "24.22.2"
   }
 }

packages/components/README.md

@@ -0,0 +1,156 @@
+# @home-assistant/components
+
+Home Assistant Components (`hac-*`): framework-agnostic web components built
+with [Lit](https://lit.dev).
+
+> Work in progress, not published yet.
+
+## Registration
+
+Every element is imported on its own, in one of two ways:
+
+| Import                                        | Registers in         | For                                                         |
+| --------------------------------------------- | -------------------- | ----------------------------------------------------------- |
+| `@home-assistant/components/<element>`        | Global registry      | Home Assistant itself                                       |
+| `@home-assistant/components/<element>/scoped` | Your scoped registry | Custom cards and other code that runs inside Home Assistant |
+
+`<element>` is the tag name without the `hac-` prefix, like `card` for
+`hac-card`.
+
+Both use the copy bundled with your code. A scoped copy is isolated from the
+one Home Assistant registers globally, so a custom card keeps the version it
+was built with.
+
+Global registration skips tag names that are already registered, so the first
+registration wins and nothing throws.
+
+### Global
+
+```ts
+import "@home-assistant/components/card";
+```
+
+### Scoped
+
+Pass the component's elements to `ScopedElementsMixin` for Lit, or to
+`createScopedElementRegistry` for plain custom elements. Forgetting the
+elements is a TypeScript error, and a runtime error in plain JavaScript.
+
+Lit:
+
+```ts
+import { LitElement, html } from "lit";
+import { ScopedElementsMixin } from "@home-assistant/components/scoped";
+import { hacCard } from "@home-assistant/components/card/scoped";
+
+class MyCard extends ScopedElementsMixin(LitElement, [hacCard]) {
+  render() {
+    return html`<hac-card>…</hac-card>`;
+  }
+}
+```
+
+Plain custom elements:
+
+```js
+import {
+  attachScopedShadow,
+  createScopedElement,
+  createScopedElementRegistry,
+} from "@home-assistant/components/scoped";
+import { hacCard } from "@home-assistant/components/card/scoped";
+
+// Create the registry once, outside the class: all instances of the card share it
+const registry = createScopedElementRegistry([hacCard]);
+
+class MyCard extends HTMLElement {
+  constructor() {
+    super();
+    const root = attachScopedShadow(this, { mode: "open" }, registry);
+    root.innerHTML = "<hac-card>…</hac-card>";
+    // or: root.append(createScopedElement(root, "hac-card"));
+  }
+}
+```
+
+`innerHTML`, `insertAdjacentHTML` and `createScopedElement` use the scoped
+registry. `document.createElement` uses the global one, so avoid it for
+scoped elements.
+
+Scoped registries need native support (Chrome 146+, Safari 26) or
+`@webcomponents/scoped-custom-element-registry`, which Home Assistant loads.
+Without either, elements are registered globally instead, and an already
+registered tag name keeps its existing class.
+
+Only elements rendered inside the shadow root use the scoped registry. Light
+DOM content, such as slotted elements, uses the registry of the tree it is
+written in.
+
+`lit` is a peer dependency.
+
+### TypeScript
+
+Each element's entry points declare its tag in `HTMLElementTagNameMap`, so
+`document.querySelector("hac-card")` and templates are typed once the element
+is imported. For the class itself, import its type from the `scoped` entry
+point; `import type` loads nothing at runtime:
+
+```ts
+import type { HacCard } from "@home-assistant/components/card/scoped";
+```
+
+The package has no root entry point: each element and the scoped helpers
+(`@home-assistant/components/scoped`) have their own.
+
+## Theming
+
+Each component exposes its own `--hac-*` custom properties, documented in its
+source, which take precedence. Next come the theme variables of the existing
+Home Assistant element it replaces, so current themes keep working: `hac-card`
+reads the variables of `ha-card` (`--ha-card-background`,
+`--card-background-color`, `--ha-card-border-radius`, …). Last come the
+semantic color tokens (`--ha-color-*`, like `--ha-color-surface-default`) and
+their light values, so the components also render outside Home Assistant.
+
+The legacy theme variables are a temporary bridge for this experiment, not the
+target design. Home Assistant always defines some of them, like
+`--card-background-color`, so inside Home Assistant they currently win over
+the semantic tokens. Once themes move to the semantic tokens, the legacy
+variables will be removed from the fallbacks.
+
+## Structure
+
+Each element has its own directory, named like its import path:
+
+```
+src/components/card/   <hac-card>  -> @home-assistant/components/card
+  hac-card.ts          class, does not register itself
+  info.ts              tag name and version
+  global.ts            registers globally
+  scoped.ts            element for a scoped registry  -> …/card/scoped
+```
+
+Shared code lives in `src/utils/`: `registration/` for defining elements
+(global and scoped) and `element/` for helpers that components use
+themselves, like slot checks.
+
+Every element has its own version in `info.ts`.
+
+Entry points are mapped with subpath patterns in `package.json`, so a new
+element directory needs no `package.json` change. Only `global.ts` files have
+side effects, which `sideEffects` relies on for tree shaking.
+
+## Development
+
+```bash
+pnpm --filter @home-assistant/components build   # ESM, type declarations and custom-elements.json to dist/
+pnpm --filter @home-assistant/components dev     # rebuild on change
+```
+
+Inside this repository the app uses the sources directly through
+the `ha-source` export condition, so no build is needed during development.
+The package is built with [Rslib](https://rslib.rs) in bundleless mode: every
+source file becomes its own ES module. The build then generates a
+[custom elements manifest](https://custom-elements-manifest.open-wc.org) from
+the JSDoc of each element, so document new slots, parts, CSS properties and
+events there.

packages/components/custom-elements-manifest.config.mjs

@@ -0,0 +1,84 @@
+// Generates dist/custom-elements.json from the JSDoc of the hac elements, for
+// editors and documentation tools. Only hac-*.ts files declare elements; the
+// entry points just re-export them.
+
+const forEachDeclaration = (customElementsManifest, callback) => {
+  for (const module of customElementsManifest.modules) {
+    for (const declaration of module.declarations ?? []) {
+      callback(declaration);
+    }
+  }
+};
+
+// The analyzer leaves the readme empty. Paths in the manifest are relative to
+// the package root, like the module paths.
+const packageReadme = () => ({
+  name: "package-readme",
+  packageLinkPhase({ customElementsManifest }) {
+    customElementsManifest.readme = "README.md";
+  },
+});
+
+// Elements are documented with @summary, which the analyzer only puts into
+// `summary`. Most tools show `description`, so fall back to the summary.
+const summaryAsDescription = () => ({
+  name: "summary-as-description",
+  packageLinkPhase({ customElementsManifest }) {
+    forEachDeclaration(customElementsManifest, (declaration) => {
+      if (!declaration.description && declaration.summary) {
+        declaration.description = declaration.summary;
+      }
+    });
+  },
+});
+
+// Private and protected members are internal, so keep them out of the
+// documented API.
+const publicApiOnly = () => ({
+  name: "public-api-only",
+  packageLinkPhase({ customElementsManifest }) {
+    forEachDeclaration(customElementsManifest, (declaration) => {
+      declaration.members = declaration.members?.filter(
+        (member) => !member.privacy || member.privacy === "public"
+      );
+    });
+  },
+});
+
+const distPaths = () => {
+  const toDist = (value) => value.replace(/^src\/(.+)\.ts$/, "dist/$1.js");
+  const rewrite = (node) => {
+    if (Array.isArray(node)) {
+      node.forEach(rewrite);
+      return;
+    }
+    if (!node || typeof node !== "object") {
+      return;
+    }
+    for (const [key, value] of Object.entries(node)) {
+      if ((key === "path" || key === "module") && typeof value === "string") {
+        node[key] = toDist(value);
+      } else {
+        rewrite(value);
+      }
+    }
+  };
+  return {
+    name: "dist-paths",
+    packageLinkPhase({ customElementsManifest }) {
+      rewrite(customElementsManifest.modules);
+    },
+  };
+};
+
+export default {
+  globs: ["src/components/**/hac-*.ts"],
+  outdir: "dist",
+  litelement: true,
+  plugins: [
+    packageReadme(),
+    summaryAsDescription(),
+    publicApiOnly(),
+    distPaths(),
+  ],
+};

packages/components/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@home-assistant/components",
+  "version": "0.0.0",
+  "description": "Home Assistant web components (hac-* elements) built with Lit",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/home-assistant/frontend.git",
+    "directory": "packages/components"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/components/**/global.js",
+    "./src/components/**/global.ts"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "exports": {
+    "./scoped": {
+      "ha-source": "./src/scoped.ts",
+      "types": "./dist/scoped.d.ts",
+      "import": "./dist/scoped.js"
+    },
+    "./package.json": "./package.json",
+    "./*/scoped": {
+      "ha-source": "./src/components/*/scoped.ts",
+      "types": "./dist/components/*/scoped.d.ts",
+      "import": "./dist/components/*/scoped.js"
+    },
+    "./*/info": {
+      "ha-source": "./src/components/*/info.ts",
+      "types": "./dist/components/*/info.d.ts",
+      "import": "./dist/components/*/info.js"
+    },
+    "./*": {
+      "ha-source": "./src/components/*/global.ts",
+      "types": "./dist/components/*/global.d.ts",
+      "import": "./dist/components/*/global.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rslib build && cem analyze",
+    "dev": "rslib build --watch",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@rslib/core": "1.0.6",
+    "lit": "3.3.3",
+    "typescript": "6.0.3"
+  }
+}

packages/components/rslib.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "@rslib/core";
+
+// Bundleless build: every source file becomes its own ESM file, so consumers'
+// bundlers only include the entry points they import. Only global.ts files
+// register elements; everything else is free of side effects.
+export default defineConfig({
+  source: {
+    entry: { index: ["./src/**/*.ts"] },
+    decorators: { version: "legacy" },
+    tsconfigPath: "./tsconfig.json",
+  },
+  tools: {
+    swc: { jsc: { transform: { decoratorMetadata: false } } },
+  },
+  lib: [
+    {
+      format: "esm",
+      bundle: false,
+      syntax: "es2021",
+      dts: true,
+      output: { target: "web", distPath: { root: "./dist" } },
+    },
+  ],
+});

packages/components/src/components/card/global.ts

@@ -0,0 +1,8 @@
+import { define } from "../../utils/registration/define";
+import { HacCard } from "./hac-card";
+import { TAG_NAME } from "./info";
+
+// Registers <hac-card> in the global registry, as used by Home Assistant
+define(TAG_NAME, HacCard);
+
+export { HacCard };

packages/components/src/components/card/hac-card.ts

@@ -0,0 +1,165 @@
+import { css, html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import {
+  hasAssignedContent,
+  hasAssignedElements,
+} from "../../utils/element/slot";
+
+/**
+ * @element hac-card
+ *
+ * @summary
+ * Card that groups related content, with an optional header and footer.
+ *
+ * @slot header - Header of the card. Its spacing replaces the top padding of
+ * the content.
+ * @slot - Content of the card. Its padding is omitted when empty.
+ * @slot footer - Footer of the card. Hidden when empty.
+ *
+ * @csspart header - Wrapper of the header slot.
+ * @csspart content - Wrapper of the default slot.
+ * @csspart footer - Wrapper of the footer slot.
+ *
+ * @cssprop --hac-card-background - Background of the card.
+ * @cssprop --hac-card-color - Text color of the card.
+ * @cssprop --hac-card-border-color - Border color of the card and the footer divider.
+ * @cssprop --hac-card-border-width - Border width of the card.
+ * @cssprop --hac-card-border-radius - Border radius of the card.
+ * @cssprop --hac-card-box-shadow - Box shadow of the card.
+ * @cssprop --hac-card-content-padding - Padding of the content.
+ * @cssprop --hac-card-footer-padding - Padding of the footer.
+ */
+export class HacCard extends LitElement {
+  /**
+   * Visual style of the card. `outlined` draws a border without a shadow.
+   * `raised` hides the border and lifts the card with a shadow instead.
+   */
+  @property({ reflect: true }) public appearance: "outlined" | "raised" =
+    "outlined";
+
+  @state() private _hasHeader = false;
+
+  @state() private _hasFooter = false;
+
+  @state() private _hasContent = false;
+
+  protected render() {
+    return html`
+      <div class="header" part="header" ?hidden=${!this._hasHeader}>
+        <slot name="header" @slotchange=${this._headerChanged}></slot>
+      </div>
+      <div
+        class="content ${this._hasHeader ? "below-header" : ""}"
+        part="content"
+        ?hidden=${!this._hasContent}
+      >
+        <slot @slotchange=${this._contentChanged}></slot>
+      </div>
+      <div class="footer" part="footer" ?hidden=${!this._hasFooter}>
+        <slot name="footer" @slotchange=${this._footerChanged}></slot>
+      </div>
+    `;
+  }
+
+  private _headerChanged(ev: Event) {
+    this._hasHeader = hasAssignedElements(ev);
+  }
+
+  private _contentChanged(ev: Event) {
+    this._hasContent = hasAssignedContent(ev);
+  }
+
+  private _footerChanged(ev: Event) {
+    this._hasFooter = hasAssignedElements(ev);
+  }
+
+  /*
+   * Fallback order: --hac-card-*, then the theme variables of ha-card
+   * (--ha-card-*, --card-background-color, --divider-color,
+   * --primary-text-color) so existing themes keep working, then the semantic
+   * tokens and their light values for use outside Home Assistant.
+   * The ha-card variables are temporary, see "Theming" in the README.
+   */
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      background: var(
+        --hac-card-background,
+        var(
+          --ha-card-background,
+          var(--card-background-color, var(--ha-color-surface-default, #fff))
+        )
+      );
+      backdrop-filter: var(--ha-card-backdrop-filter, none);
+      color: var(
+        --hac-card-color,
+        var(--primary-text-color, var(--ha-color-on-surface-default, #141414))
+      );
+      border: var(--hac-card-border-width, var(--ha-card-border-width, 1px))
+        solid
+        var(
+          --hac-card-border-color,
+          var(
+            --ha-card-border-color,
+            var(--divider-color, var(--ha-color-border-neutral-quiet, #e6e6e6))
+          )
+        );
+      border-radius: var(
+        --hac-card-border-radius,
+        var(--ha-card-border-radius, var(--ha-border-radius-lg, 12px))
+      );
+      box-shadow: var(--hac-card-box-shadow, var(--ha-card-box-shadow, none));
+    }
+
+    :host([appearance="raised"]) {
+      border-color: transparent;
+      box-shadow: var(
+        --hac-card-box-shadow,
+        var(
+          --ha-card-box-shadow,
+          var(
+            --ha-box-shadow-s,
+            0 1px 2px 0 rgba(0, 0, 0, 0.08),
+            0 1px 3px 0 rgba(0, 0, 0, 0.12)
+          )
+        )
+      );
+    }
+
+    .content {
+      padding: var(--hac-card-content-padding, var(--ha-space-4, 16px));
+    }
+
+    /* The header already provides the spacing above the content */
+    .content.below-header {
+      padding-block-start: 0;
+    }
+
+    .footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ha-space-2, 8px);
+      padding: var(--hac-card-footer-padding, var(--ha-space-2, 8px));
+      border-block-start: 1px solid
+        var(
+          --hac-card-border-color,
+          var(--divider-color, var(--ha-color-border-neutral-quiet, #e6e6e6))
+        );
+    }
+
+    .header[hidden],
+    .content[hidden],
+    .footer[hidden] {
+      display: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hac-card": HacCard;
+  }
+}

packages/components/src/components/card/info.ts

@@ -0,0 +1,5 @@
+/** Tag name of the element. */
+export const TAG_NAME = "hac-card";
+
+/** Version of <hac-card>. */
+export const VERSION = "0.1.0";

packages/components/src/components/card/scoped.ts

@@ -0,0 +1,15 @@
+import type { ElementDefinition } from "../../utils/registration/definition";
+import { HacCard } from "./hac-card";
+import { TAG_NAME } from "./info";
+
+export { HacCard };
+
+/**
+ * The bundled <hac-card> for a scoped registry:
+ * `ScopedElementsMixin(LitElement, [hacCard])` or
+ * `createScopedElementRegistry([hacCard])`.
+ */
+export const hacCard: ElementDefinition<typeof HacCard> = {
+  tagName: TAG_NAME,
+  element: HacCard,
+};

packages/components/src/scoped.ts

@@ -0,0 +1,132 @@
+import type { LitElement } from "lit";
+import { define } from "./utils/registration/define";
+import type { ElementDefinition } from "./utils/registration/definition";
+import {
+  createScopedRegistry,
+  scopedCreationScope,
+  scopedRegistrySupport,
+  scopedShadowRootInit,
+} from "./utils/registration/scoped-registry";
+
+export type { ElementDefinition } from "./utils/registration/definition";
+
+/**
+ * Creates a registry with the given elements, for `attachScopedShadow`:
+ * definitions from `scoped` entry points, e.g. `[hacCard]`.
+ * Create it once, outside the class, so all instances of a card share it.
+ *
+ * Without scoped registry support (native or polyfill), the elements are
+ * registered in the global registry instead, unless their tag name is already
+ * taken there, and the global registry is returned.
+ */
+export const createScopedElementRegistry = (
+  elements: readonly ElementDefinition[]
+): CustomElementRegistry => {
+  // Checked as unknown: Array.isArray would narrow the list to any[]
+  if (!Array.isArray(elements as unknown)) {
+    throw new TypeError(
+      "@home-assistant/components: pass the elements to register, e.g. [hacCard]"
+    );
+  }
+  const registry = createScopedRegistry() ?? customElements;
+  for (const { tagName, element } of elements) {
+    define(tagName, element, registry);
+  }
+  return registry;
+};
+
+const shadowRootInit = (
+  init: ShadowRootInit,
+  registry: CustomElementRegistry
+): ShadowRootInit =>
+  registry === customElements ? init : scopedShadowRootInit(init, registry);
+
+const registries = new WeakMap<ShadowRoot, CustomElementRegistry>();
+
+/**
+ * Attaches a shadow root that uses `registry` for custom elements in it.
+ *
+ * Content added with `innerHTML` or `insertAdjacentHTML` uses the registry.
+ * Create single elements with `createScopedElement`; `document.createElement`
+ * would use the global registry.
+ *
+ * Light DOM content, like slotted elements, keeps using the registry of the
+ * tree it is written in.
+ */
+export const attachScopedShadow = (
+  host: HTMLElement,
+  init: ShadowRootInit,
+  registry: CustomElementRegistry
+): ShadowRoot => {
+  const root = host.attachShadow(shadowRootInit(init, registry));
+  registries.set(root, registry);
+  return root;
+};
+
+/** Creates an element from the registry of a shadow root. */
+export const createScopedElement = <K extends keyof HTMLElementTagNameMap>(
+  root: ShadowRoot,
+  tagName: K
+): HTMLElementTagNameMap[K] => {
+  const registry = registries.get(root);
+  if (!registry || registry === customElements) {
+    return document.createElement(tagName);
+  }
+  if (scopedRegistrySupport() === "polyfill") {
+    // The polyfill adds createElement to shadow roots
+    return (
+      root as unknown as {
+        createElement(tagName: K): HTMLElementTagNameMap[K];
+      }
+    ).createElement(tagName);
+  }
+  return (
+    document.createElement as (
+      tagName: K,
+      options: { customElementRegistry: CustomElementRegistry }
+    ) => HTMLElementTagNameMap[K]
+  )(tagName, { customElementRegistry: registry });
+};
+
+type LitElementConstructor = abstract new (...args: any[]) => LitElement;
+
+/**
+ * Renders a Lit element into a shadow root with its own custom element
+ * registry, containing `elements`:
+ *
+ * ```ts
+ * class MyCard extends ScopedElementsMixin(LitElement, [hacCard]) {}
+ * ```
+ *
+ * See `createScopedElementRegistry` and `attachScopedShadow` for the details.
+ */
+export const ScopedElementsMixin = <T extends LitElementConstructor>(
+  superClass: T,
+  elements: readonly ElementDefinition[]
+) => {
+  // Created on first use, so defining the class has no side effects
+  let registry: CustomElementRegistry | undefined;
+  const getRegistry = () => {
+    registry ??= createScopedElementRegistry(elements);
+    return registry;
+  };
+
+  abstract class ScopedElementsHost extends superClass {
+    public attachShadow(init: ShadowRootInit): ShadowRoot {
+      const root = super.attachShadow(shadowRootInit(init, getRegistry()));
+      registries.set(root, getRegistry());
+      return root;
+    }
+
+    protected createRenderRoot() {
+      const root = super.createRenderRoot();
+      const scoped = getRegistry();
+      if (scoped !== customElements && root instanceof ShadowRoot) {
+        this.renderOptions.creationScope = scopedCreationScope(root, scoped);
+      }
+      return root;
+    }
+  }
+  // Typed as the base class: the overrides add no public API
+  return ScopedElementsHost as unknown as T;
+};

packages/components/src/utils/element/slot.ts

@@ -0,0 +1,15 @@
+/** Whether the slot of a `slotchange` event has elements assigned. */
+export const hasAssignedElements = (ev: Event): boolean =>
+  (ev.target as HTMLSlotElement).assignedElements().length > 0;
+
+/**
+ * Whether the slot of a `slotchange` event has content assigned: elements or
+ * text. Whitespace between tags is not content.
+ */
+export const hasAssignedContent = (ev: Event): boolean =>
+  (ev.target as HTMLSlotElement)
+    .assignedNodes()
+    .some(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim())
+    );

packages/components/src/utils/registration/define.ts

@@ -0,0 +1,17 @@
+/**
+ * Registers a custom element unless the tag name is already taken in the
+ * registry.
+ *
+ * Home Assistant and custom cards can each ship a copy of this library, so
+ * registering the same tag name twice must not throw. The first registration
+ * wins.
+ */
+export const define = (
+  tagName: string,
+  elementClass: CustomElementConstructor,
+  registry: CustomElementRegistry = customElements
+): void => {
+  if (!registry.get(tagName)) {
+    registry.define(tagName, elementClass);
+  }
+};

packages/components/src/utils/registration/definition.ts

@@ -0,0 +1,10 @@
+/**
+ * An element to register: its tag name and its class. The `scoped` entry
+ * point of an element exports one, e.g. `hacCard`.
+ */
+export interface ElementDefinition<
+  E extends CustomElementConstructor = CustomElementConstructor,
+> {
+  readonly tagName: string;
+  readonly element: E;
+}

packages/components/src/utils/registration/scoped-registry.ts

@@ -0,0 +1,67 @@
+/**
+ * Scoped custom element registries come in two flavors: the standard API
+ * (Chrome 146+, Safari 26) and the older API of
+ * `@webcomponents/scoped-custom-element-registry`, which Home Assistant loads
+ * and which replaces the native implementation when present.
+ */
+export type ScopedRegistrySupport = "polyfill" | "native" | "none";
+
+let support: ScopedRegistrySupport | undefined;
+
+export const scopedRegistrySupport = (): ScopedRegistrySupport => {
+  if (support) {
+    return support;
+  }
+  if ("CustomElementRegistryPolyfill" in globalThis) {
+    support = "polyfill";
+  } else {
+    try {
+      new CustomElementRegistry();
+      support = "native";
+    } catch (_err) {
+      support = "none";
+    }
+  }
+  return support;
+};
+
+/** A new scoped registry, or `undefined` if the browser has no support. */
+export const createScopedRegistry = (): CustomElementRegistry | undefined =>
+  scopedRegistrySupport() === "none" ? undefined : new CustomElementRegistry();
+
+/** Shadow root options that make the shadow root use `registry`. */
+export const scopedShadowRootInit = (
+  init: ShadowRootInit,
+  registry: CustomElementRegistry
+): ShadowRootInit =>
+  scopedRegistrySupport() === "polyfill"
+    ? ({ ...init, registry } as ShadowRootInit)
+    : ({ ...init, customElementRegistry: registry } as ShadowRootInit);
+
+interface CreationScope {
+  importNode(node: Node, deep?: boolean): Node;
+}
+
+/**
+ * The object Lit should create template content with, so custom elements in
+ * it are created from the scoped registry (Lit's `creationScope`).
+ */
+export const scopedCreationScope = (
+  root: ShadowRoot,
+  registry: CustomElementRegistry
+): CreationScope => {
+  if (scopedRegistrySupport() === "polyfill") {
+    // The polyfill adds importNode to shadow roots
+    return root as unknown as CreationScope;
+  }
+  // Standard API: the registry is passed to importNode
+  return {
+    importNode: (node, deep) =>
+      (
+        document.importNode as (
+          node: Node,
+          options: { selfOnly: boolean; customElementRegistry: unknown }
+        ) => Node
+      )(node, { selfOnly: !deep, customElementRegistry: registry }),
+  };
+};

packages/components/test/define.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { define } from "../src/utils/registration/define";
+
+// Home Assistant and custom cards can each ship a copy of the library, so a
+// second registration of the same tag must be ignored instead of throwing.
+describe("define", () => {
+  it("registers an element that is not registered yet", () => {
+    class First extends HTMLElement {}
+    define("hac-test-first", First);
+    expect(customElements.get("hac-test-first")).toBe(First);
+  });
+
+  it("keeps the first registration of a tag name", () => {
+    class Original extends HTMLElement {}
+    class Duplicate extends HTMLElement {}
+    define("hac-test-duplicate", Original);
+    expect(() => define("hac-test-duplicate", Duplicate)).not.toThrow();
+    expect(customElements.get("hac-test-duplicate")).toBe(Original);
+  });
+});

packages/components/test/slot.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import {
+  hasAssignedContent,
+  hasAssignedElements,
+} from "../src/utils/element/slot";
+
+// Components hide wrappers of empty slots, e.g. the padding of an empty card.
+// Whitespace between tags must not count as content.
+const slotEvent = (light: string, name?: string) => {
+  const host = document.createElement("div");
+  host.innerHTML = light;
+  const slot = document.createElement("slot");
+  if (name) {
+    slot.name = name;
+  }
+  host.attachShadow({ mode: "open" }).append(slot);
+  return { target: slot } as unknown as Event;
+};
+
+describe("hasAssignedContent", () => {
+  it("ignores whitespace", () => {
+    expect(hasAssignedContent(slotEvent("\n   \n"))).toBe(false);
+  });
+
+  it("counts text", () => {
+    expect(hasAssignedContent(slotEvent(" Hello "))).toBe(true);
+  });
+
+  it("counts elements", () => {
+    expect(hasAssignedContent(slotEvent("\n <p></p>\n"))).toBe(true);
+  });
+});
+
+describe("hasAssignedElements", () => {
+  it("only counts elements assigned to the slot", () => {
+    const light = '<span slot="icon"></span> text';
+    expect(hasAssignedElements(slotEvent(light, "icon"))).toBe(true);
+    expect(hasAssignedElements(slotEvent(light, "actions"))).toBe(false);
+  });
+});

packages/components/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

patches/@material__mwc-list@0.27.0.patch

@@ -1,26 +0,0 @@
-diff --git a/mwc-list-base.js b/mwc-list-base.js
-index 1ba95b6a01dcecea4d85b5cbbbcc3dfb04c40d5f..dced13fdb7929c490d6661b1bbe7e9f96dcd2285 100644
---- a/mwc-list-base.js
-+++ b/mwc-list-base.js
-@@ -11,7 +11,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
- import { observer } from '@material/mwc-base/observer.js';
- import { deepActiveElementPath, doesElementContainFocus, isNodeElement } from '@material/mwc-base/utils.js';
- import { html } from 'lit';
--import { property, query, queryAssignedNodes } from 'lit/decorators.js';
-+import { property, query, queryAssignedElements } from 'lit/decorators.js';
- import { ifDefined } from 'lit/directives/if-defined.js';
- import MDCListFoundation, { isIndexSet } from './mwc-list-foundation.js';
- export { createSetFromIndex, isEventMulti, isIndexSet } from './mwc-list-foundation.js';
-@@ -425,10 +425,10 @@ __decorate([
-     query('.mdc-deprecated-list')
- ], ListBase.prototype, "mdcRoot", void 0);
- __decorate([
--    queryAssignedNodes('', true, '*')
-+    queryAssignedElements({ flatten: true, selector: "*" })
- ], ListBase.prototype, "assignedElements", void 0);
- __decorate([
--    queryAssignedNodes('', true, '[tabindex="0"]')
-+    queryAssignedElements({ flatten: true, selector: '[tabindex="0"]' })
- ], ListBase.prototype, "tabbableElements", void 0);
- __decorate([
-     property({ type: Boolean }),

patches/sortablejs@1.15.7.patch

@@ -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,

pnpm-workspace.yaml

@@ -1,3 +1,7 @@
+packages:
+  - "."
+  - "packages/*"
+
 savePrefix: ""
 autoInstallPeers: false
 
@@ -19,6 +23,7 @@ trustPolicyExclude:
 allowBuilds:
   "@tsparticles/engine": false
   core-js: false
+  rs-module-lexer: false
   unrs-resolver: false
 
 overrides:
@@ -26,10 +31,9 @@ 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]
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]

public/static/images/form/feature_style_segments.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="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>

public/static/images/form/feature_style_segments_dark.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>

pyproject.toml

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

renovate.json

@@ -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",
@@ -72,6 +89,11 @@
     }
   ],
   "packageRules": [
+    {
+      "description": "Keep semver ranges for peer dependencies of published packages, pinning them would force consumers onto one exact version",
+      "matchDepTypes": ["peerDependencies"],
+      "rangeStrategy": "widen"
+    },
     {
       "description": "Group all Python version updates from home-assistant/core",
       "matchDepNames": ["python"],

src/auth/ha-pick-auth-provider.ts

@@ -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;
     }
   `;
 }

src/common/array/array-with.ts

@@ -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);

src/common/controllers/legend-fit-controller.ts

@@ -89,19 +89,10 @@ export class LegendFitController {
 
   private _fit() {
     const list = this._element;
-    if (!list) {
+    const rowWidth = list?.getBoundingClientRect().width;
+    if (!list || !rowWidth) {
       return;
     }
-    const style = getComputedStyle(list);
-    const rowWidth = parseFloat(style.width);
-    // Bounding rects include transforms, such as a dialog scaling in, which
-    // never resize the list, so measure in layout pixels
-    const scale = list.getBoundingClientRect().width / rowWidth;
-    if (!rowWidth || !scale) {
-      return;
-    }
-    const layoutWidth = (element: Element) =>
-      element.getBoundingClientRect().width / scale;
     const children = Array.from(list.children);
     const more = children.find((child) =>
       child.classList.contains("legend-more")
@@ -116,7 +107,9 @@ export class LegendFitController {
       }
       this._more = more;
     }
-    const widths = children.filter((child) => child !== more).map(layoutWidth);
+    const widths = children
+      .filter((child) => child !== more)
+      .map((child) => child.getBoundingClientRect().width);
     // Values resize the items on every state update. Fitting each item at its
     // widest since the last resize keeps the more button from flickering.
     if (rowWidth !== this._rowWidth || widths.length !== this._widths.length) {
@@ -129,9 +122,9 @@ export class LegendFitController {
     }
     const fit = fitInRows(
       this._widths,
-      more ? layoutWidth(more) : 0,
+      more?.getBoundingClientRect().width ?? 0,
       rowWidth,
-      parseFloat(style.columnGap) || 0,
+      parseFloat(getComputedStyle(list).columnGap) || 0,
       rowWidth < NARROW_WIDTH ? NARROW_MAX_ROWS : MAX_ROWS
     );
     if (fit !== this.fit) {

src/common/controllers/query-params-controller.ts

@@ -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);
     }
   };
 

src/common/entity/entity_filter.ts

@@ -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,35 @@ export const findEntities = (
 
   return results;
 };
+
+export const excludeEntities = (
+  entityIds: string[],
+  excludedEntityIds?: string[]
+): string[] => {
+  if (!excludedEntityIds?.length) {
+    return entityIds;
+  }
+  const excluded = new Set(excludedEntityIds);
+  return entityIds.filter((entityId) => !excluded.has(entityId));
+};
+
+export const findFilteredEntities = (
+  sources: EntityFilterSources,
+  filters: EntityFilter[],
+  excludedEntityIds?: string[]
+): string[] => {
+  const filterFuncs = filters.map((filter) =>
+    generateEntityFilter(
+      sources.states,
+      sources.entities,
+      sources.devices,
+      sources.areas,
+      sources.floors,
+      filter
+    )
+  );
+  return excludeEntities(
+    findEntities(Object.keys(sources.states), filterFuncs),
+    excludedEntityIds
+  );
+};

src/common/map/base-layer.ts

@@ -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") {

src/common/map/build-map-style.ts

@@ -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 {

src/common/map/map-styles.ts

@@ -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 };
 };

src/common/map/navigation-url.ts

@@ -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}`;
+};

src/common/map/neon-map-palette.ts

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

src/common/mwc/handle-request-selected-event.ts

@@ -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;
-};

src/common/navigate.ts

@@ -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;

src/common/url/automations-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFilter,
   DataTableFilters,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -25,6 +26,7 @@ export const automationsFilterQueryParamConfig = {
     "assistants",
     "blueprint",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type AutomationsFilterQueryParams = QueryParamValues<
@@ -36,7 +38,7 @@ const list = (filter: DataTableFilter | undefined): string[] | undefined =>
 
 const floorAreas = (
   filter: DataTableFilter | undefined
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   filter?.value && !Array.isArray(filter.value) ? filter.value : undefined;
 
 export const automationsFilterQueryParams = (
@@ -44,6 +46,7 @@ export const automationsFilterQueryParams = (
 ): AutomationsFilterQueryParams => ({
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   device: list(filters["ha-filter-devices"]),
   entity: list(filters["ha-filter-entities"]),
   label: list(filters["ha-filter-labels"]),
@@ -59,7 +62,7 @@ export const automationsFilterQueryString = (
   filters: DataTableFilters
 ): string => {
   const params = automationsFilterQueryParams(filters);
-  const sorted: AutomationsFilterQueryParams = {};
+  const sorted: AutomationsFilterQueryParams = { ...params };
 
   for (const key of automationsFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -94,8 +97,9 @@ export const automationsLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof AutomationsFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof automationsFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const filter = (value: DataTableFilter["value"]): DataTableFilter => ({
     value,
@@ -109,7 +113,9 @@ export const automationsLinkFromUrl = (
     search: search ?? "",
     filters: {
       "ha-filter-floor-areas": filter(
-        floors.length || areas.length ? { floors, areas } : undefined
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : undefined
       ),
       "ha-filter-devices": filter(values("device")),
       "ha-filter-entities": filter(values("entity")),

src/common/url/devices-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFilter,
   DataTableFilters,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -24,6 +25,7 @@ export const devicesFilterQueryParamConfig = {
     "config_entry",
     "sub_entry",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type DevicesFilterQueryParams = QueryParamValues<
@@ -35,7 +37,7 @@ const list = (filter: DataTableFilter | undefined): string[] | undefined =>
 
 const floorAreas = (
   filter: DataTableFilter | undefined
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   filter?.value && !Array.isArray(filter.value) ? filter.value : undefined;
 
 export const devicesFilterQueryParams = (
@@ -44,6 +46,7 @@ export const devicesFilterQueryParams = (
   status: list(filters["ha-filter-states"]),
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   domain: list(filters["ha-filter-integrations"]),
   label: list(filters["ha-filter-labels"]),
   config_entry: list(filters.config_entry),
@@ -55,7 +58,7 @@ export const devicesFilterQueryParams = (
 // filter list sends back what it was given in its own order.
 export const devicesFilterQueryString = (filters: DataTableFilters): string => {
   const params = devicesFilterQueryParams(filters);
-  const sorted: DevicesFilterQueryParams = {};
+  const sorted: DevicesFilterQueryParams = { ...params };
 
   for (const key of devicesFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -87,8 +90,9 @@ export const devicesLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof DevicesFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof devicesFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const filter = (value: DataTableFilter["value"]): DataTableFilter => ({
     value,
@@ -103,7 +107,9 @@ export const devicesLinkFromUrl = (
     filters: {
       "ha-filter-states": filter(values("status")),
       "ha-filter-floor-areas": filter(
-        floors.length || areas.length ? { floors, areas } : undefined
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : undefined
       ),
       "ha-filter-integrations": filter(values("domain")),
       "ha-filter-labels": filter(values("label")),

src/common/url/entities-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFiltersValue,
   DataTableFiltersValues,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -20,6 +21,7 @@ export const entitiesFilterQueryParamConfig = {
     "floor",
     "area",
     "device",
+    "device_class",
     "domain",
     "entity_domain",
     "label",
@@ -29,6 +31,7 @@ export const entitiesFilterQueryParamConfig = {
     // Read until 2027.5, replaced with `assistants` on the next write
     "voice_assistant",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type EntitiesFilterQueryParams = QueryParamValues<
@@ -40,7 +43,7 @@ const list = (value: DataTableFiltersValue): string[] | undefined =>
 
 const floorAreas = (
   value: DataTableFiltersValue
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   value && !Array.isArray(value) ? value : undefined;
 
 export const entitiesFilterQueryParams = (
@@ -49,7 +52,9 @@ export const entitiesFilterQueryParams = (
   status: list(filters["ha-filter-states"]),
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   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"]),
@@ -65,7 +70,7 @@ export const entitiesFilterQueryString = (
   filters: DataTableFiltersValues
 ): string => {
   const params = entitiesFilterQueryParams(filters);
-  const sorted: EntitiesFilterQueryParams = {};
+  const sorted: EntitiesFilterQueryParams = { ...params };
 
   for (const key of entitiesFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -100,8 +105,9 @@ export const entitiesLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof EntitiesFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof entitiesFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const floors = values("floor");
   const areas = values("area");
@@ -112,8 +118,11 @@ export const entitiesLinkFromUrl = (
     filters: {
       "ha-filter-states": values("status"),
       "ha-filter-floor-areas":
-        floors.length || areas.length ? { floors, areas } : undefined,
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : 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"),

src/common/url/helpers-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFiltersValue,
   DataTableFiltersValues,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -25,6 +26,7 @@ export const helpersFilterQueryParamConfig = {
     // Read until 2027.5, replaced with `assistants` on the next write
     "voice_assistant",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type HelpersFilterQueryParams = QueryParamValues<
@@ -36,7 +38,7 @@ const list = (value: DataTableFiltersValue): string[] | undefined =>
 
 const floorAreas = (
   value: DataTableFiltersValue
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   value && !Array.isArray(value) ? value : undefined;
 
 export const helpersFilterQueryParams = (
@@ -44,6 +46,7 @@ export const helpersFilterQueryParams = (
 ): HelpersFilterQueryParams => ({
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   device: list(filters["ha-filter-devices"]),
   label: list(filters["ha-filter-labels"]),
   category: list(filters["ha-filter-categories"]),
@@ -57,7 +60,7 @@ export const helpersFilterQueryString = (
   filters: DataTableFiltersValues
 ): string => {
   const params = helpersFilterQueryParams(filters);
-  const sorted: HelpersFilterQueryParams = {};
+  const sorted: HelpersFilterQueryParams = { ...params };
 
   for (const key of helpersFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -89,8 +92,9 @@ export const helpersLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof HelpersFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof helpersFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const floors = values("floor");
   const areas = values("area");
@@ -100,7 +104,9 @@ export const helpersLinkFromUrl = (
     search: search ?? "",
     filters: {
       "ha-filter-floor-areas":
-        floors.length || areas.length ? { floors, areas } : undefined,
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : undefined,
       "ha-filter-devices": values("device"),
       "ha-filter-labels": values("label"),
       "ha-filter-categories": values("category"),

src/common/url/logs-query-params.ts

@@ -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,
   };
 };

src/common/url/scenes-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFilter,
   DataTableFilters,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -24,6 +25,7 @@ export const scenesFilterQueryParamConfig = {
     "category",
     "assistants",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type ScenesFilterQueryParams = QueryParamValues<
@@ -35,7 +37,7 @@ const list = (filter: DataTableFilter | undefined): string[] | undefined =>
 
 const floorAreas = (
   filter: DataTableFilter | undefined
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   filter?.value && !Array.isArray(filter.value) ? filter.value : undefined;
 
 export const scenesFilterQueryParams = (
@@ -43,6 +45,7 @@ export const scenesFilterQueryParams = (
 ): ScenesFilterQueryParams => ({
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   device: list(filters["ha-filter-devices"]),
   entity: list(filters["ha-filter-entities"]),
   label: list(filters["ha-filter-labels"]),
@@ -55,7 +58,7 @@ export const scenesFilterQueryParams = (
 // filter list sends back what it was given in its own order.
 export const scenesFilterQueryString = (filters: DataTableFilters): string => {
   const params = scenesFilterQueryParams(filters);
-  const sorted: ScenesFilterQueryParams = {};
+  const sorted: ScenesFilterQueryParams = { ...params };
 
   for (const key of scenesFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -87,8 +90,9 @@ export const scenesLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof ScenesFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof scenesFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const filter = (value: DataTableFilter["value"]): DataTableFilter => ({
     value,
@@ -102,7 +106,9 @@ export const scenesLinkFromUrl = (
     search: search ?? "",
     filters: {
       "ha-filter-floor-areas": filter(
-        floors.length || areas.length ? { floors, areas } : undefined
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : undefined
       ),
       "ha-filter-devices": filter(values("device")),
       "ha-filter-entities": filter(values("entity")),

src/common/url/scripts-query-params.ts

@@ -1,6 +1,7 @@
 import type {
   DataTableFilter,
   DataTableFilters,
+  FloorAreasFilterValue,
 } from "../../data/data_table_filters";
 import { dataTableQueryParamConfig } from "./data-table-query-params";
 import {
@@ -25,6 +26,7 @@ export const scriptsFilterQueryParamConfig = {
     "assistants",
     "blueprint",
   ],
+  boolean: [{ key: "no_area", trueValue: "1" }],
 } as const satisfies QueryParamConfig;
 
 export type ScriptsFilterQueryParams = QueryParamValues<
@@ -36,7 +38,7 @@ const list = (filter: DataTableFilter | undefined): string[] | undefined =>
 
 const floorAreas = (
   filter: DataTableFilter | undefined
-): Record<string, string[]> | undefined =>
+): FloorAreasFilterValue | undefined =>
   filter?.value && !Array.isArray(filter.value) ? filter.value : undefined;
 
 export const scriptsFilterQueryParams = (
@@ -44,6 +46,7 @@ export const scriptsFilterQueryParams = (
 ): ScriptsFilterQueryParams => ({
   floor: floorAreas(filters["ha-filter-floor-areas"])?.floors,
   area: floorAreas(filters["ha-filter-floor-areas"])?.areas,
+  no_area: floorAreas(filters["ha-filter-floor-areas"])?.no_area,
   device: list(filters["ha-filter-devices"]),
   entity: list(filters["ha-filter-entities"]),
   label: list(filters["ha-filter-labels"]),
@@ -57,7 +60,7 @@ export const scriptsFilterQueryParams = (
 // filter list sends back what it was given in its own order.
 export const scriptsFilterQueryString = (filters: DataTableFilters): string => {
   const params = scriptsFilterQueryParams(filters);
-  const sorted: ScriptsFilterQueryParams = {};
+  const sorted: ScriptsFilterQueryParams = { ...params };
 
   for (const key of scriptsFilterQueryParamConfig.list) {
     sorted[key] = params[key] && [...params[key]].sort();
@@ -89,8 +92,9 @@ export const scriptsLinkFromUrl = (
 
   const { search } = decodeQueryParams(searchParams, dataTableQueryParamConfig);
 
-  const values = (key: keyof ScriptsFilterQueryParams): string[] =>
-    params[key]?.filter(Boolean) ?? [];
+  const values = (
+    key: (typeof scriptsFilterQueryParamConfig.list)[number]
+  ): string[] => params[key]?.filter(Boolean) ?? [];
 
   const filter = (value: DataTableFilter["value"]): DataTableFilter => ({
     value,
@@ -104,7 +108,9 @@ export const scriptsLinkFromUrl = (
     search: search ?? "",
     filters: {
       "ha-filter-floor-areas": filter(
-        floors.length || areas.length ? { floors, areas } : undefined
+        floors.length || areas.length || params.no_area
+          ? { floors, areas, no_area: params.no_area }
+          : undefined
       ),
       "ha-filter-devices": filter(values("device")),
       "ha-filter-entities": filter(values("entity")),