Add responsive column layout to device and area config pages

Use numeric timestamps instead of Date objects in history line chart data (#52631 )
Index tooltip points by series in history line chart (#52630 )
2026-06-16 05:12:19 +00:00 · 2026-06-15 12:05:32 +02:00 · 2026-06-15 11:22:57 +03:00 · 2026-06-15 11:16:11 +03:00 · 2026-06-15 11:03:36 +03:00 · 2026-06-15 11:00:31 +03:00
251 changed files with 8782 additions and 5114 deletions
@@ -2,7 +2,7 @@

 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.

-**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
+**Note**: This file contains high-level guidelines and references to implementation patterns. For gallery-specific documentation, demos, page structure, and usage examples, see [`gallery/AGENTS.md`](gallery/AGENTS.md).

 ## Table of Contents

@@ -338,11 +338,6 @@ Common patterns:
 - **Destructive actions**: `variant="danger"` for delete/remove operations (the generic confirmation dialog uses `variant="danger"` for its confirm button — see `src/dialogs/generic/dialog-box.ts`)
 - Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`

-**Gallery Documentation:**
-
- `gallery/src/pages/components/ha-dialog.markdown`
- `gallery/src/pages/components/ha-dialogs.markdown`
-
 ### Form Component (ha-form)

 - Schema-driven using `HaFormSchema[]`
@@ -361,10 +356,6 @@ Common patterns:
 ></ha-form>
 ```

-**Gallery Documentation:**
-
- `gallery/src/pages/components/ha-form.markdown`
-
 ### Alert Component (ha-alert)

 - Types: `error`, `warning`, `info`, `success`
@@ -378,10 +369,6 @@ Common patterns:
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```

-**Gallery Documentation:**
-
- `gallery/src/pages/components/ha-alert.markdown`
-
 ### Keyboard Shortcuts (ShortcutManager)

 The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
@@ -405,7 +392,6 @@ The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming

 - **Component definition**: `src/components/ha-tooltip.ts`
 - **Usage example**: `src/components/ha-label.ts`
- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`

 ## Common Patterns

@@ -435,7 +421,7 @@ export class HaPanelMyFeature extends SubscribeMixin(LitElement) {

 #### Creating a Lovelace Card

-**Purpose**: Cards allow users to tell different stories about their house (based on gallery)
+**Purpose**: Cards allow users to tell different stories about their house.

 ```typescript
@customElement("hui-my-card")
@@ -508,6 +494,10 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 4. **Test**: `yarn test` - Add and run tests
 5. **Build**: `script/build_frontend` - Test production build

+### Gallery
+
+For Gallery-specific structure, page/demo naming, sidebar behavior, content standards, and commands, see [`gallery/AGENTS.md`](gallery/AGENTS.md).
+
 ### Common Pitfalls to Avoid

 - Don't manually query the DOM with `querySelector` - use the `@query`/`@queryAll` decorators or component properties
@@ -538,7 +528,7 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Terminology Standards

-**Delete vs Remove** (Based on gallery/src/pages/Text/remove-delete-add-create.markdown)
+**Delete vs Remove**

 - **Use "Remove"** for actions that can be restored or reapplied:
  - Removing a user's permission
@@ -0,0 +1,50 @@
+name: Blocking labels
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
+    branches:
+      - dev
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  check:
+    name: Check for labels which block the Pull Request from being merged
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for blocking labels
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const blockingLabels = [
+              "wait for backend",
+              "Needs UX",
+              "Do Not Review",
+              "Blocked",
+              "has-parent",
+            ];
+            const prLabels = context.payload.pull_request.labels.map(
+              (l) => l.name
+            );
+            const found = blockingLabels.filter((bl) => prLabels.includes(bl));
+            if (found.length > 0) {
+              const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
+              await core.summary
+                .addHeading(":no_entry_sign: Pull Request is blocked", 2)
+                .addRaw(message)
+                .write();
+              core.setFailed(message);
+            } else {
+              await core.summary
+                .addHeading(":white_check_mark: Pull Request is clear to merge after review", 2)
+                .addRaw("This Pull Request is not blocked by any labels which prevent it from being merged.")
+                .write();
+            }
@@ -24,7 +24,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: dev
          persist-credentials: false
@@ -60,7 +60,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: master
          persist-credentials: false
@@ -27,7 +27,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -65,7 +65,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -85,7 +85,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -27,7 +27,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -41,14 +41,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2

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

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
@@ -25,7 +25,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: dev
          persist-credentials: false
@@ -61,7 +61,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: master
          persist-credentials: false
@@ -19,7 +19,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -24,7 +24,7 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
+      - uses: release-drafter/release-drafter@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -26,7 +26,7 @@ jobs:
    if: github.repository_owner == 'home-assistant'
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -36,7 +36,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@868e6cb4607727d764341a158d98872cd63fa658 # master
+        uses: home-assistant/actions/helpers/verify-version@e91ad1948e57189485b9c1ad608af0c303946f89 # master

      - name: Setup Node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -97,7 +97,7 @@ jobs:

      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
        with:
          abi: cp314
          tag: musllinux_1_2
@@ -113,7 +113,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -33,7 +33,9 @@ const isWsl =
 *   compiler: import("@rspack/core").Compiler,
 *   contentBase: string,
 *   port: number,
- *   listenHost?: string
+ *   listenHost?: string,
+ *   open?: boolean,
+ *   logUrlAfterFirstBuild?: boolean,
 * }}
 */
 const runDevServer = async ({
@@ -41,16 +43,31 @@ const runDevServer = async ({
  contentBase,
  port,
  listenHost = undefined,
+  open = true,
+  logUrlAfterFirstBuild = false,
  proxy = undefined,
 }) => {
  if (listenHost === undefined) {
    // For dev container, we need to listen on all hosts
    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
  }
+  const url = `http://localhost:${port}`;
+  let loggedUrl = false;
+  if (logUrlAfterFirstBuild) {
+    compiler.hooks.done.tap("log-dev-server-url", () => {
+      if (loggedUrl) {
+        return;
+      }
+      loggedUrl = true;
+      setTimeout(() => {
+        log("[rspack-dev-server]", `Project is running at ${url}`);
+      }, 0);
+    });
+  }
  const server = new RspackDevServer(
    {
      hot: false,
-      open: true,
+      open,
      host: listenHost,
      port,
      static: {
@@ -70,7 +87,9 @@ const runDevServer = async ({

  await server.start();
  // Server listening
-  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
+  if (!logUrlAfterFirstBuild) {
+    log("[rspack-dev-server]", `Project is running at ${url}`);
+  }
 };

 const doneHandler = (done) => (err, stats) => {
@@ -172,6 +191,8 @@ gulp.task("rspack-dev-server-gallery", () =>
    contentBase: paths.gallery_output_root,
    port: 8100,
    listenHost: "0.0.0.0",
+    open: false,
+    logUrlAfterFirstBuild: true,
  })
 );

@@ -1,5 +1,7 @@
 // @ts-check

+import { fileURLToPath } from "node:url";
+
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
 import js from "@eslint/js";
@@ -11,6 +13,10 @@ import { configs as a11yConfigs } from "eslint-plugin-lit-a11y";
 import html from "@html-eslint/eslint-plugin";
 import importX from "eslint-plugin-import-x";

+const rspackConfigPath = fileURLToPath(
+  new URL("./rspack.config.cjs", import.meta.url)
+);
+
 export default tseslint.config(
  js.configs.recommended,
  eslintConfigPrettier,
@@ -50,7 +56,7 @@ export default tseslint.config(
    settings: {
      "import-x/resolver": {
        webpack: {
-          config: "./rspack.config.cjs",
+          config: rspackConfigPath,
        },
      },
    },
@@ -0,0 +1,112 @@
+# Gallery Agent Instructions
+
+This file applies to all files under `gallery/`. Follow the root `AGENTS.md` for repository-wide Home Assistant frontend, TypeScript, Lit, accessibility, and copy standards. This file adds gallery-specific structure, page, demo, and verification guidance.
+
+## Quick Reference
+
+Run commands from the repository root unless noted otherwise:
+
+```bash
+gallery/script/develop_gallery  # Start the gallery development server
+gallery/script/build_gallery    # Build the static gallery
+yarn lint                       # ESLint, Prettier, TypeScript, and Lit checks
+yarn lint:types                 # TypeScript compiler, without file arguments
+```
+
+Never run `yarn lint:types` or `tsc` with file arguments. See the root `AGENTS.md` for the generated `.js` file risk.
+
+## Purpose
+
+The gallery is a developer and designer reference for Home Assistant frontend UI patterns. It documents component APIs, shows realistic Lovelace and more-info states, captures brand and copy guidance, and provides reproducible demos that are safe to inspect outside a running Home Assistant instance.
+
+- Prefer demonstrating real production components from `src/` instead of creating gallery-only replacements.
+- Keep fake state, sample data, and demo-only helpers inside `gallery/`.
+- Do not move gallery stubs or demo data into production code unless a production feature explicitly needs them.
+- Do not hand-edit generated output under `gallery/build/` or `gallery/dist/`.
+
+## Structure
+
+- `sidebar.js`: Defines gallery sections, headers, and explicit page ordering.
+- `script/develop_gallery`: Wrapper for the `develop-gallery` gulp task.
+- `script/build_gallery`: Wrapper for the `build-gallery` gulp task.
+- `src/entrypoint.js`: Creates the `<ha-gallery>` shell.
+- `src/ha-gallery.ts`: Renders the drawer, page routing, markdown descriptions, demos, edit links, and RTL toggle.
+- `src/html/index.html.template`: HTML template used by the gallery build.
+- `src/pages/<category>/<page>.markdown`: Optional page description and frontmatter.
+- `src/pages/<category>/<page>.ts`: Optional live demo module for the same page id.
+- `src/components/`: Gallery-only demo wrappers like `demo-card`, `demo-cards`, `demo-more-info`, and `page-description`.
+- `src/data/`: Fake `hass`, demo states, mock traces, and reusable sample data.
+- `public/`: Static assets copied into the gallery output.
+
+## Page Model
+
+Gallery pages are generated by `gather-gallery-pages` in `build-scripts/gulp/gallery.js`.
+
+- A page id is the path under `src/pages/` without the extension, like `components/ha-button`.
+- A `.markdown` file and a `.ts` file with the same page id become one gallery page.
+- A page may have only markdown, only a TypeScript demo, or both.
+- Markdown can contain YAML frontmatter with `title` and optional `subtitle`.
+- Markdown that contains only frontmatter contributes metadata without rendering a description block.
+- TypeScript demo modules are dynamically imported for side effects when the page is opened.
+- A demo module must define a custom element named `demo-${category}-${page}` with slashes replaced by hyphens, like `demo-components-ha-button` for `components/ha-button`.
+- `ha-gallery.ts` renders that element with `dynamicElement()` based on the current page id.
+
+## Sidebar
+
+Use `sidebar.js` when a page needs a visible section, section header, or deterministic ordering.
+
+- `category` must match the first directory name under `src/pages/`.
+- `header` is the section label shown in the drawer.
+- `pages` is optional. When present, listed pages keep that exact order.
+- Pages in a category that are not listed are appended alphabetically after the listed pages.
+- New categories without a sidebar entry are appended by the generator with their category name as the header.
+- If a listed page does not exist, the generator logs an error during `gather-gallery-pages`.
+
+## Markdown Pages
+
+Use markdown pages for explanations, design guidance, API notes, and copy standards.
+
+- Start with frontmatter when the page needs a title or subtitle.
+- Use sentence case for titles, headings, labels, and UI copy.
+- Put the live example before the reference API when that makes the page easier to scan.
+- Use fenced code blocks with a language tag for copyable examples.
+- Keep examples short and focused on the behavior being documented.
+- Prefer real component names and attributes over prose-only descriptions.
+- Use Home Assistant terminology from the root `AGENTS.md`.
+- For remove/delete and add/create wording, follow `src/pages/misc/remove-delete-add-create.markdown`.
+
+Gallery markdown is documentation content and is not localized with `localize`. If demo code creates production UI strings, keep those strings aligned with the root localization and copy guidance.
+
+## Demo Components
+
+Use TypeScript demo pages for interactive or stateful examples.
+
+- Import production components from `../../../src/...` or the correct relative path from the demo file.
+- Import reusable gallery helpers from `gallery/src/components/` when they already model the pattern.
+- Use `demo-card` and `demo-cards` for Lovelace card examples that render YAML card configs.
+- Use `demo-more-info` and `demo-more-infos` for more-info dialog examples.
+- Use shared mock data from `src/data/` instead of repeating large fake state objects inline.
+- Show meaningful states, such as loading, unavailable, empty, error, active, inactive, and disabled when relevant.
+- Check responsive behavior and the gallery RTL toggle when layout or direction-sensitive UI changes.
+- Keep unavoidable casts or loose demo parsing local to the demo helper or demo page.
+
+The gallery ESLint config allows `console` for gallery diagnostics. Do not copy that exception into production frontend code.
+
+## Content Standards
+
+The root copy standards still apply: use American English, sentence case, active voice, inclusive language, direct user-focused wording, and consistent Home Assistant terminology.
+
+- Use `Home Assistant` in full, not `HA` or `HASS`.
+- Use `integration` instead of `component` for product concepts.
+- Use `Remove` for reversible disassociation and `Delete` for permanent deletion.
+- Use `Add` for existing items and `Create` for something made from scratch.
+- Avoid Latin abbreviations like `e.g.` and `i.e.` in prose.
+- Avoid stitching sentence fragments together in production UI examples.
+
+## Verification
+
+- For markdown, sidebar, and page-generation changes, run `gallery/script/build_gallery`.
+- For TypeScript demo or gallery shell changes, run the smallest relevant check plus `yarn lint` when practical.
+- For type checking, run `yarn lint:types` without file arguments.
+- For visual changes, run `gallery/script/develop_gallery` and check the affected page on desktop, narrow viewport, and RTL when relevant.
+- If verification is skipped, state which command was skipped and why.
@@ -1,20 +1,50 @@
+import {
+  mdiAccountGroup,
+  mdiCalendarClock,
+  mdiDotsHorizontal,
+  mdiHome,
+  mdiInformationOutline,
+  mdiPalette,
+  mdiPuzzle,
+  mdiRobot,
+  mdiViewDashboard,
+} from "@mdi/js";
+
 export default [
  {
    // This section has no header and so all page links are shown directly in the sidebar
    category: "concepts",
+    icon: mdiHome,
    pages: ["home"],
  },

+  {
+    category: "brand",
+    icon: mdiPalette,
+    header: "Brand",
+  },
+  {
+    category: "components",
+    icon: mdiPuzzle,
+    header: "Components",
+  },
  {
    category: "lovelace",
+    icon: mdiViewDashboard,
    // Label for in the sidebar
    header: "Dashboards",
    // Specify order of pages. Any pages in the category folder but not listed here will
    // automatically be added after the pages listed here.
    pages: ["introduction"],
  },
+  {
+    category: "more-info",
+    icon: mdiInformationOutline,
+    header: "More Info dialogs",
+  },
  {
    category: "automation",
+    icon: mdiRobot,
    header: "Automation",
    pages: [
      "editor-trigger",
@@ -24,33 +54,29 @@ export default [
      "trace-timeline",
    ],
  },
-  {
-    category: "components",
-    header: "Components",
-  },
-  {
-    category: "more-info",
-    header: "More Info dialogs",
-  },
-  {
-    category: "misc",
-    header: "Miscellaneous",
-  },
-  {
-    category: "brand",
-    header: "Brand",
-  },
  {
    category: "user-test",
+    icon: mdiAccountGroup,
    header: "Users",
    pages: ["user-types", "configuration-menu"],
  },
  {
    category: "date-time",
+    icon: mdiCalendarClock,
    header: "Date and Time",
  },
  {
-    category: "design.home-assistant.io",
-    header: "About",
+    category: "misc",
+    icon: mdiDotsHorizontal,
+    header: "Miscellaneous",
+    pages: [
+      "entity-state",
+      "ha-markdown",
+      "integration-card",
+      "box-shadow",
+      "util-long-press",
+      "remove-delete-add-create",
+      "editing",
+    ],
  },
 ];
@@ -0,0 +1,121 @@
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { extractVars } from "../../../src/common/style/derived-css-vars";
+import { animationStyles } from "../../../src/resources/theme/animations.globals";
+import { coreStyles } from "../../../src/resources/theme/core.globals";
+import { colorStyles } from "../../../src/resources/theme/color/color.globals";
+import { coreColorStyles } from "../../../src/resources/theme/color/core.globals";
+import { semanticColorStyles } from "../../../src/resources/theme/color/semantic.globals";
+import { waColorStyles } from "../../../src/resources/theme/color/wa.globals";
+import { mainStyles } from "../../../src/resources/theme/main.globals";
+import { semanticStyles } from "../../../src/resources/theme/semantic.globals";
+import { typographyStyles } from "../../../src/resources/theme/typography.globals";
+import { waMainStyles } from "../../../src/resources/theme/wa.globals";
+import type { HomeAssistant, ThemeSettings } from "../../../src/types";
+
+export const GALLERY_THEME_STORAGE_KEY = "gallery-theme";
+
+export const loadGalleryThemeSettings = (): ThemeSettings => {
+  const stored = localStorage.getItem(GALLERY_THEME_STORAGE_KEY);
+  if (!stored) {
+    return { theme: "default" };
+  }
+
+  try {
+    const parsed = JSON.parse(stored) as unknown;
+    const value =
+      parsed && typeof parsed === "object"
+        ? (parsed as Partial<ThemeSettings>)
+        : {};
+    return {
+      theme: "default",
+      dark: typeof value.dark === "boolean" ? value.dark : undefined,
+      primaryColor:
+        typeof value.primaryColor === "string" ? value.primaryColor : undefined,
+      accentColor:
+        typeof value.accentColor === "string" ? value.accentColor : undefined,
+    };
+  } catch (_err) {
+    return { theme: "default" };
+  }
+};
+
+const LIGHT_THEME_STYLES = [
+  coreStyles,
+  mainStyles,
+  typographyStyles,
+  semanticStyles,
+  coreColorStyles,
+  semanticColorStyles,
+  colorStyles,
+  waColorStyles,
+  waMainStyles,
+  animationStyles,
+];
+
+const LIGHT_THEME_VARIABLES = LIGHT_THEME_STYLES.reduce<Record<string, string>>(
+  (variables, style) => {
+    for (const [key, value] of Object.entries(extractVars(style))) {
+      variables[`--${key}`] = value;
+    }
+    return variables;
+  },
+  {}
+);
+
+const LIGHT_THEME_VARIABLE_KEYS = Object.keys(LIGHT_THEME_VARIABLES);
+const LIGHT_THEME_DEFAULTS_APPLIED = new WeakSet<HTMLElement>();
+
+export const effectiveGalleryDarkMode = (
+  themeSettings: ThemeSettings,
+  systemDark: boolean
+): boolean => themeSettings.dark ?? systemDark;
+
+const galleryThemes = (darkMode: boolean): HomeAssistant["themes"] => ({
+  default_theme: "default",
+  default_dark_theme: null,
+  themes: {},
+  darkMode,
+  theme: "default",
+});
+
+const applyLightThemeDefaults = (element: HTMLElement, lightMode: boolean) => {
+  if (lightMode) {
+    for (const [key, value] of Object.entries(LIGHT_THEME_VARIABLES)) {
+      element.style.setProperty(key, value);
+    }
+    LIGHT_THEME_DEFAULTS_APPLIED.add(element);
+    return;
+  }
+
+  if (!LIGHT_THEME_DEFAULTS_APPLIED.has(element)) {
+    return;
+  }
+
+  for (const key of LIGHT_THEME_VARIABLE_KEYS) {
+    element.style.removeProperty(key);
+  }
+  LIGHT_THEME_DEFAULTS_APPLIED.delete(element);
+};
+
+export const applyFlippedGalleryTheme = (
+  element: HTMLElement,
+  themeSettings: ThemeSettings,
+  systemDark: boolean
+) => {
+  const darkMode = !effectiveGalleryDarkMode(themeSettings, systemDark);
+
+  if (!darkMode) {
+    applyThemesOnElement(element, galleryThemes(false), undefined, {
+      dark: false,
+    });
+    applyLightThemeDefaults(element, true);
+  } else {
+    applyLightThemeDefaults(element, false);
+  }
+
+  applyThemesOnElement(element, galleryThemes(darkMode), "default", {
+    ...themeSettings,
+    dark: darkMode,
+  });
+  element.style.colorScheme = darkMode ? "dark" : "light";
+};
@@ -1,25 +1,83 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
 import type { HaButton } from "../../../src/components/ha-button";
+import type { ThemeSettings } from "../../../src/types";
+import {
+  applyFlippedGalleryTheme,
+  effectiveGalleryDarkMode,
+  loadGalleryThemeSettings,
+} from "../common/theme";
+
+const mql = matchMedia("(prefers-color-scheme: dark)");

@customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
  // eslint-disable-next-line lit/no-native-attributes
  @property() title!: string;

-  @property() value?: any;
+  @property({ attribute: false }) value?: unknown;

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

+  @state() private _themeSettings = loadGalleryThemeSettings();
+
+  @state() private _systemDark = mql.matches;
+
+  @query(".flipped") private _flipped?: HTMLElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    mql.addEventListener("change", this._systemDarkChanged);
+    window.addEventListener(
+      "theme-settings-changed",
+      this._themeSettingsChanged as EventListener
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    mql.removeEventListener("change", this._systemDarkChanged);
+    window.removeEventListener(
+      "theme-settings-changed",
+      this._themeSettingsChanged as EventListener
+    );
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._applyFlippedTheme();
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("_themeSettings") ||
+      changedProperties.has("_systemDark")
+    ) {
+      this._applyFlippedTheme();
+    }
+  }
+
  protected render(): TemplateResult {
+    const currentLabel = effectiveGalleryDarkMode(
+      this._themeSettings,
+      this._systemDark
+    )
+      ? "Dark mode"
+      : "Light mode";
+    const flippedLabel =
+      currentLabel === "Dark mode" ? "Light mode" : "Dark mode";
+
    return html`
      <div class="row">
-        <div class="content light">
+        <section class="content current" aria-label=${currentLabel}>
+          <h2>${currentLabel}</h2>
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="light"></slot>
@@ -30,8 +88,9 @@ class DemoBlackWhiteRow extends LitElement {
              </ha-button>
            </div>
          </ha-card>
-        </div>
-        <div class="content dark">
+        </section>
+        <section class="content flipped" aria-label=${flippedLabel}>
+          <h2>${flippedLabel}</h2>
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="dark"></slot>
@@ -45,65 +104,84 @@ class DemoBlackWhiteRow extends LitElement {
          ${this.value
            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
            : nothing}
-        </div>
+        </section>
      </div>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
+  handleSubmit(ev: Event) {
+    const content = (ev.target as HaButton).closest(".content");
+    if (!content) {
+      return;
+    }

-  handleSubmit(ev) {
-    const content = (ev.target as HaButton).closest(".content")!;
    fireEvent(this, "submitted" as any, {
-      slot: content.classList.contains("light") ? "light" : "dark",
+      slot: content.classList.contains("current") ? "light" : "dark",
    });
  }

+  private _themeSettingsChanged = (
+    ev: HASSDomEvent<Partial<ThemeSettings>>
+  ) => {
+    this._themeSettings = {
+      ...this._themeSettings,
+      ...ev.detail,
+      theme: "default",
+    };
+  };
+
+  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
+    this._systemDark = ev.matches;
+  };
+
+  private _applyFlippedTheme() {
+    if (!this._flipped) {
+      return;
+    }
+
+    applyFlippedGalleryTheme(
+      this._flipped,
+      this._themeSettings,
+      this._systemDark
+    );
+  }
+
  static styles = css`
+    :host {
+      display: block;
+      flex: 1;
+      min-block-size: 100%;
+    }
    .row {
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      inline-size: 100%;
+      min-block-size: 100%;
    }
    .content {
-      padding: 50px 0;
+      box-sizing: border-box;
+      min-inline-size: 0;
+      padding: var(--ha-space-8);
      background-color: var(--primary-background-color);
-    }
-    .light {
-      flex: 1;
-      padding-left: 50px;
-      padding-right: 50px;
-      box-sizing: border-box;
-    }
-    .light ha-card {
-      margin-left: auto;
-    }
-    .dark {
+      color: var(--primary-text-color);
      display: flex;
-      flex: 1;
-      padding-left: 50px;
-      box-sizing: border-box;
-      flex-wrap: wrap;
+      flex-direction: column;
+      gap: var(--ha-space-4);
    }
    ha-card {
-      width: 400px;
+      width: 100%;
+    }
+    h2 {
+      margin: 0;
+      color: var(--primary-text-color);
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-normal);
    }
    pre {
-      width: 300px;
-      margin: 0 16px 0;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
      overflow: auto;
      color: var(--primary-text-color);
    }
@@ -112,27 +190,18 @@ class DemoBlackWhiteRow extends LitElement {
      flex-direction: row-reverse;
      border-top: none;
    }
-    @media only screen and (max-width: 1500px) {
-      .light {
-        flex: initial;
-      }
-    }
    @media only screen and (max-width: 1000px) {
-      .light,
-      .dark {
+      .row {
+        grid-template-columns: 1fr;
+      }
+      .content {
        padding: 16px;
      }
-      .row,
-      .dark {
-        flex-direction: column;
-      }
      ha-card {
-        margin: 0 auto;
        width: 100%;
-        max-width: 400px;
      }
      pre {
-        margin: 16px auto;
+        margin: 0;
      }
    }
  `;
@@ -1,6 +1,5 @@
 import { html, css, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -16,17 +15,12 @@ class DemoCards extends LitElement {

  @state() private _showConfig = false;

-  @query("#container") private _container!: HTMLElement;
-
  render() {
    return html`
      <ha-demo-options>
        <ha-formfield label="Show config">
          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
        </ha-formfield>
-        <ha-formfield label="Dark theme">
-          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-        </ha-formfield>
      </ha-demo-options>
      <div id="container">
        <div class="cards">
@@ -48,12 +42,6 @@ class DemoCards extends LitElement {
    this._showConfig = ev.target.checked;
  }

-  private _darkThemeToggled(ev) {
-    applyThemesOnElement(this._container, { themes: {} } as any, "default", {
-      dark: ev.target.checked,
-    });
-  }
-
  static styles = css`
    .cards {
      display: flex;
@@ -1,6 +1,5 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -21,9 +20,6 @@ class DemoMoreInfos extends LitElement {
        <ha-formfield label="Show config">
          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
        </ha-formfield>
-        <ha-formfield label="Dark theme">
-          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-        </ha-formfield>
      </ha-demo-options>
      <div id="container">
        <div class="cards">
@@ -51,33 +47,16 @@ class DemoMoreInfos extends LitElement {
      justify-content: center;
    }
    demo-more-info {
-      margin: 16px 16px 32px;
+      margin: var(--ha-space-4) var(--ha-space-4) var(--ha-space-8);
    }
    ha-formfield {
-      margin-right: 16px;
+      margin-right: var(--ha-space-4);
    }
  `;

  private _showConfigToggled(ev) {
    this._showConfig = ev.target.checked;
  }
-
-  private _darkThemeToggled(ev) {
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector("#container"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: false,
-        theme: "default",
-      },
-      "default",
-      {
-        dark: ev.target.checked,
-      }
-    );
-  }
 }

 declare global {
@@ -0,0 +1,153 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, query, state } from "lit/decorators";
+import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
+import type { ThemeSettings } from "../../../src/types";
+import {
+  applyFlippedGalleryTheme,
+  effectiveGalleryDarkMode,
+  loadGalleryThemeSettings,
+} from "../common/theme";
+
+const mql = matchMedia("(prefers-color-scheme: dark)");
+
+export const THEME_COMPARISON_PANELS = [
+  { slot: "current" },
+  { slot: "flipped" },
+] as const;
+
+@customElement("demo-theme-comparison")
+export class DemoThemeComparison extends LitElement {
+  @state() private _themeSettings = loadGalleryThemeSettings();
+
+  @state() private _systemDark = mql.matches;
+
+  @query(".flipped") private _flipped?: HTMLElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    mql.addEventListener("change", this._systemDarkChanged);
+    window.addEventListener(
+      "theme-settings-changed",
+      this._themeSettingsChanged as EventListener
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    mql.removeEventListener("change", this._systemDarkChanged);
+    window.removeEventListener(
+      "theme-settings-changed",
+      this._themeSettingsChanged as EventListener
+    );
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._applyFlippedTheme();
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("_themeSettings") ||
+      changedProperties.has("_systemDark")
+    ) {
+      this._applyFlippedTheme();
+    }
+  }
+
+  protected render(): TemplateResult {
+    const currentLabel = effectiveGalleryDarkMode(
+      this._themeSettings,
+      this._systemDark
+    )
+      ? "Dark mode"
+      : "Light mode";
+    const flippedLabel =
+      currentLabel === "Dark mode" ? "Light mode" : "Dark mode";
+
+    return html`
+      <section class="panel" aria-label=${currentLabel}>
+        <h2>${currentLabel}</h2>
+        <slot name="current"></slot>
+      </section>
+      <section class="panel flipped" aria-label=${flippedLabel}>
+        <h2>${flippedLabel}</h2>
+        <slot name="flipped"></slot>
+      </section>
+    `;
+  }
+
+  private _themeSettingsChanged = (
+    ev: HASSDomEvent<Partial<ThemeSettings>>
+  ) => {
+    this._themeSettings = {
+      ...this._themeSettings,
+      ...ev.detail,
+      theme: "default",
+    };
+  };
+
+  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
+    this._systemDark = ev.matches;
+  };
+
+  private _applyFlippedTheme() {
+    if (!this._flipped) {
+      return;
+    }
+
+    applyFlippedGalleryTheme(
+      this._flipped,
+      this._themeSettings,
+      this._systemDark
+    );
+  }
+
+  static styles = css`
+    :host {
+      box-sizing: border-box;
+      display: grid;
+      flex: 1;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      inline-size: 100%;
+      min-block-size: 100%;
+    }
+
+    .panel {
+      box-sizing: border-box;
+      min-block-size: 100%;
+      min-inline-size: 0;
+      padding: var(--ha-space-6);
+      background-color: var(--primary-background-color);
+      color: var(--primary-text-color);
+    }
+
+    h2 {
+      margin: 0 0 var(--ha-space-4);
+      color: var(--primary-text-color);
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-normal);
+    }
+
+    ::slotted(*) {
+      box-sizing: border-box;
+      inline-size: 100%;
+    }
+
+    @media only screen and (max-width: 1000px) {
+      :host {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-theme-comparison": DemoThemeComparison;
+  }
+}
@@ -0,0 +1,87 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-settings-row";
+import "../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../src/components/ha-switch";
+import "../../../src/components/ha-theme-settings";
+import type { HomeAssistant, ThemeSettings } from "../../../src/types";
+
+@customElement("gallery-settings")
+class GallerySettings extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public themeSettings!: ThemeSettings;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean }) public rtl = false;
+
+  protected render() {
+    return html`
+      <div class="content">
+        <ha-card .header=${"Appearance"}>
+          <div class="card-content">
+            Configure how the gallery renders component previews and examples.
+          </div>
+          <ha-theme-settings
+            .hass=${this.hass}
+            .selectedTheme=${this.themeSettings}
+            .narrow=${this.narrow}
+            .heading=${"Theme"}
+            .description=${"Choose the mode and colors used throughout the gallery."}
+            .labels=${{
+              mode: "Theme mode",
+              autoMode: "Auto",
+              lightMode: "Light",
+              darkMode: "Dark",
+              primaryColor: "Primary color",
+              accentColor: "Accent color",
+              reset: "Reset",
+            }}
+            .showThemePicker=${false}
+          ></ha-theme-settings>
+          <ha-settings-row .narrow=${this.narrow}>
+            <span slot="heading">Right-to-left layout</span>
+            <span slot="description">
+              Preview the gallery with right-to-left text direction.
+            </span>
+            <ha-switch
+              .checked=${this.rtl}
+              @change=${this._rtlChanged}
+            ></ha-switch>
+          </ha-settings-row>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  private _rtlChanged(ev: Event) {
+    fireEvent(this, "gallery-rtl-changed", {
+      rtl: (ev.currentTarget as HaSwitch).checked,
+    });
+  }
+
+  static styles = css`
+    .content {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--ha-space-4);
+    }
+
+    ha-card {
+      overflow: hidden;
+    }
+  `;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "gallery-rtl-changed": { rtl: boolean };
+  }
+
+  interface HTMLElementTagNameMap {
+    "gallery-settings": GallerySettings;
+  }
+}
@@ -13,13 +13,10 @@ class PageDescription extends HaMarkdown {
      return nothing;
    }

+    const subtitle = PAGES[this.page].metadata.subtitle;
+
    return html`
-      <div class="heading">
-        <div class="title">
-          ${PAGES[this.page].metadata.title || this.page.split("/")[1]}
-        </div>
-        <div class="subtitle">${PAGES[this.page].metadata.subtitle}</div>
-      </div>
+      ${subtitle ? html`<div class="subtitle">${subtitle}</div>` : nothing}
      ${until(
        PAGES[this.page]
          .description()
@@ -32,16 +29,9 @@ class PageDescription extends HaMarkdown {
  static styles = [
    HaMarkdown.styles,
    css`
-      .heading {
+      .subtitle {
        padding: 16px;
        border-bottom: 1px solid var(--secondary-background-color);
-      }
-      .title {
-        font-size: 42px;
-        line-height: var(--ha-line-height-condensed);
-        padding-bottom: 8px;
-      }
-      .subtitle {
        font-size: var(--ha-font-size-l);
        line-height: var(--ha-line-height-normal);
      }
@@ -16,22 +16,9 @@ class HaDemoOptions extends LitElement {
    css`
      :host {
        display: block;
-        background-color: var(--light-primary-color);
-        margin-left: 60px
-        margin-right: 60px;
-        display: var(--layout-horizontal_-_display);
-        -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-        -webkit-flex-direction: var(
-          --layout-horizontal_-_-webkit-flex-direction
-        );
-        flex-direction: var(--layout-horizontal_-_flex-direction);
-        -ms-flex-align: var(--layout-center_-_-ms-flex-align);
-        -webkit-align-items: var(--layout-center_-_-webkit-align-items);
-        align-items: var(--layout-center_-_align-items);
+        background-color: var(--primary-background-color);
        position: relative;
-        height: 64px;
-        padding: 0 16px;
-        pointer-events: none;
+        padding: var(--ha-space-2) var(--ha-space-16) var(--ha-space-1);
        font-size: var(--ha-font-size-xl);
      }
    `,
@@ -1,161 +1,183 @@
-import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
+import { mdiCog, mdiMenu } from "@mdi/js";
+import type { Connection } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
+import type { HASSDomEvent } from "../../src/common/dom/fire_event";
 import { setDirectionStyles } from "../../src/common/util/compute_rtl";
 import "../../src/components/ha-button";
 import "../../src/components/ha-drawer";
-import type { HaDrawer } from "../../src/components/ha-drawer";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
+import "../../src/components/ha-sidebar";
+import "../../src/components/item/ha-list-item-button";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/ha-top-app-bar-fixed";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
+import type { HomeAssistant, ThemeSettings } from "../../src/types";
 import { PAGES, SIDEBAR } from "../build/import-pages";
+import {
+  GALLERY_THEME_STORAGE_KEY,
+  loadGalleryThemeSettings,
+} from "./common/theme";
+import "./components/gallery-settings";
 import "./components/page-description";

 const RTL_STORAGE_KEY = "gallery-rtl";
+const SETTINGS_PAGE = "settings";

 const GITHUB_DEMO_URL =
  "https://github.com/home-assistant/frontend/blob/dev/gallery/src/pages/";

-const FAKE_HASS = {
-  // Just enough for computeRTL for notification-manager
-  language: "en",
-  translationMetadata: {
-    translations: {},
+interface GalleryPage {
+  metadata: Record<string, unknown>;
+  description?: unknown;
+  demo?: unknown;
+}
+
+interface GallerySidebarGroup {
+  category: string;
+  header?: string;
+  icon?: string;
+  pages: string[];
+}
+
+const GALLERY_SIDEBAR = SIDEBAR as GallerySidebarGroup[];
+const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${GALLERY_SIDEBAR[0].pages[0]}`;
+
+const mql = matchMedia("(prefers-color-scheme: dark)");
+
+const galleryLocalize = (key: string) =>
+  (
+    ({
+      "ui.sidebar.sidebar_toggle": "Toggle sidebar",
+      "ui.notification_drawer.title": "Notifications",
+      "ui.sidebar.external_app_configuration": "App configuration",
+      "panel.config": "Settings",
+    }) as Record<string, string>
+  )[key] ?? key;
+
+const galleryConnection = {
+  subscribeMessage(
+    callback: (message: unknown) => void,
+    message: { type?: string }
+  ) {
+    if (message.type === "frontend/subscribe_user_data") {
+      callback({ value: { panelOrder: [], hiddenPanels: [] } });
+    } else if (message.type === "persistent_notification/subscribe") {
+      callback({ type: "current", notifications: {} });
+    }
+    return Promise.resolve(() => undefined);
  },
-};
+  sendMessagePromise() {
+    return Promise.resolve({ value: null });
+  },
+} as unknown as Connection;

@customElement("ha-gallery")
 class HaGallery extends LitElement {
-  @state() private _page =
-    document.location.hash.substring(1) ||
-    `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
+  @state() private _page = this._pageFromLocation();

  @state() private _rtl = localStorage.getItem(RTL_STORAGE_KEY) === "true";

+  @state() private _themeSettings = loadGalleryThemeSettings();
+
+  @state() private _systemDark = mql.matches;
+
  @query("notification-manager")
  private _notifications!: HTMLElementTagNameMap["notification-manager"];

-  @query("ha-drawer")
-  private _drawer!: HaDrawer;
+  @query("ha-sidebar")
+  private _sidebar?: HTMLElementTagNameMap["ha-sidebar"];
+
+  @query(".gallery-nav-item[selected]")
+  private _selectedNavigationItem?: HTMLElementTagNameMap["ha-list-item-button"];

  private _narrow = window.matchMedia("(max-width: 600px)").matches;

+  @state() private _drawerOpen = !this._narrow;
+
  render() {
-    const sidebar: unknown[] = [];
-
-    for (const group of SIDEBAR) {
-      const links: unknown[] = [];
-
-      for (const page of group.pages!) {
-        const key = `${group.category}/${page}`;
-        const active = this._page === key;
-        if (!(key in PAGES)) {
-          console.error("Undefined page referenced in sidebar.js:", key);
-          continue;
-        }
-        const title = PAGES[key].metadata.title || page;
-        links.push(html`
-          <a ?active=${active} href=${`#${group.category}/${page}`}>${title}</a>
-        `);
-      }
-
-      sidebar.push(
-        group.header
-          ? html`
-              <ha-expansion-panel .header=${group.header}>
-                ${links}
-              </ha-expansion-panel>
-            `
-          : links
-      );
-    }
+    const isSettingsPage = this._page === SETTINGS_PAGE;
+    const page = isSettingsPage ? undefined : PAGES[this._page];

    return html`
      <ha-drawer
        .direction=${this._rtl ? "rtl" : "ltr"}
-        .open=${!this._narrow}
+        .open=${this._drawerOpen}
        .type=${this._narrow ? "modal" : "dismissible"}
      >
-        <div class="drawer-title">Home Assistant Design</div>
-        <div class="sidebar">${sidebar}</div>
+        <ha-sidebar
+          .hass=${this._galleryHass}
+          .narrow=${this._narrow}
+          .route=${{ prefix: "", path: this._page }}
+          .alwaysExpand=${true}
+          sidebar-title="Home Assistant Design"
+          @hass-toggle-menu=${this._toggleDrawer}
+        >
+          ${this._renderSidebarNavigation()} ${this._renderSettingsItem()}
+        </ha-sidebar>
        <div slot="appContent" class="app-content">
-          <ha-top-app-bar-fixed>
-            <ha-icon-button
-              slot="navigationIcon"
-              @click=${this._menuTapped}
-              .path=${mdiMenu}
-            ></ha-icon-button>
+          <ha-top-app-bar-fixed .narrow=${this._narrow}>
+            ${this._narrow || !this._drawerOpen
+              ? html`<ha-icon-button
+                  slot="navigationIcon"
+                  @click=${this._toggleDrawer}
+                  .path=${mdiMenu}
+                ></ha-icon-button>`
+              : nothing}

            <div slot="title">
-              ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
+              ${isSettingsPage
+                ? "Settings"
+                : page?.metadata.title || this._page.split("/")[1]}
            </div>
            <div class="content">
-              ${PAGES[this._page].description
-                ? html`
-                    <page-description .page=${this._page}></page-description>
-                  `
-                : ""}
-              ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
-            </div>
-            <div class="page-footer">
-              <div class="edit-docs">
-                <div class="header">Help us to improve our documentation</div>
-                <div class="secondary">
-                  Suggest an edit to this page, or provide/view feedback for
-                  this page.
-                </div>
-                <div>
-                  ${PAGES[this._page].description ||
-                  Object.keys(PAGES[this._page].metadata).length > 0
-                    ? html`
-                        <a
-                          href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                          target="_blank"
-                        >
-                          Edit text
-                        </a>
-                      `
-                    : ""}
-                  ${PAGES[this._page].demo
-                    ? html`
-                        <a
-                          href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                          target="_blank"
-                        >
-                          Edit demo
-                        </a>
-                      `
-                    : ""}
-                </div>
-              </div>
-              <div class="rtl-toggle">
-                <ha-icon-button
-                  @click=${this._toggleRtl}
-                  .label=${this._rtl ? "Switch to LTR" : "Switch to RTL"}
-                >
-                  <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
-                </ha-icon-button>
-              </div>
+              ${isSettingsPage
+                ? html`<gallery-settings
+                    .hass=${this._galleryHass}
+                    .themeSettings=${this._themeSettings}
+                    .narrow=${this._narrow}
+                    .rtl=${this._rtl}
+                    @theme-settings-changed=${this._themeSettingsChanged}
+                    @gallery-rtl-changed=${this._rtlChanged}
+                  ></gallery-settings>`
+                : html`
+                    ${page?.description
+                      ? html`
+                          <page-description .page=${this._page}>
+                          </page-description>
+                        `
+                      : nothing}
+                    ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
+                  `}
            </div>
+            ${isSettingsPage || !page ? nothing : this._renderPageFooter(page)}
          </ha-top-app-bar-fixed>
        </div>
      </ha-drawer>
      <notification-manager
-        .hass=${FAKE_HASS}
+        .hass=${this._galleryHass}
        id="notifications"
      ></notification-manager>
    `;
  }

+  connectedCallback() {
+    super.connectedCallback();
+    mql.addEventListener("change", this._systemDarkChanged);
+  }
+
  firstUpdated(changedProps: PropertyValues<this>) {
    super.firstUpdated(changedProps);

    this._applyDirection();
+    this._applyTheme();

    this.addEventListener("show-notification", (ev) =>
      this._notifications.showDialog({ message: ev.detail.message })
@@ -171,16 +193,26 @@ class HaGallery extends LitElement {
      }
    });

-    document.location.hash = this._page;
+    if (document.location.hash.substring(1) !== this._page) {
+      document.location.hash = this._page;
+    }

-    window.addEventListener("hashchange", () => {
-      this._page = document.location.hash.substring(1);
-      if (this._narrow) {
-        this._drawer.open = false;
-      }
-    });
+    window.addEventListener("hashchange", this._hashChanged);
  }

+  disconnectedCallback() {
+    super.disconnectedCallback();
+    mql.removeEventListener("change", this._systemDarkChanged);
+    window.removeEventListener("hashchange", this._hashChanged);
+  }
+
+  private _hashChanged = () => {
+    this._page = this._pageFromLocation();
+    if (this._narrow) {
+      this._drawerOpen = false;
+    }
+  };
+
  updated(changedProps: PropertyValues) {
    super.updated(changedProps);

@@ -188,37 +220,335 @@ class HaGallery extends LitElement {
      this._applyDirection();
    }

+    if (changedProps.has("_themeSettings") || changedProps.has("_systemDark")) {
+      this._applyTheme();
+    }
+
    if (!changedProps.has("_page")) {
      return;
    }

+    if (this._page === SETTINGS_PAGE) {
+      return;
+    }
+
    if (PAGES[this._page].demo) {
      PAGES[this._page].demo();
    }

-    const menuItem = this.shadowRoot!.querySelector(
-      `a[href="#${this._page}"]`
-    )!;
+    void this._scrollSelectedNavigationItemIntoView();
+  }

-    // Make sure section is expanded
+  private async _scrollSelectedNavigationItemIntoView() {
+    const menuItem = this._selectedNavigationItem;
+
+    if (!menuItem) {
+      return;
+    }
+
+    // Make sure section is expanded before measuring the selected item.
    if (menuItem.parentElement instanceof HaExpansionPanel) {
      menuItem.parentElement.expanded = true;
+      await menuItem.parentElement.updateComplete;
    }
+
+    const scrollable = this._sidebar?.shadowRoot?.querySelector<HTMLElement>(
+      "ha-list-nav.before-spacer"
+    );
+
+    if (!scrollable) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      const itemRect = menuItem.getBoundingClientRect();
+      const scrollableRect = scrollable.getBoundingClientRect();
+      const targetScrollTop =
+        scrollable.scrollTop +
+        itemRect.top -
+        scrollableRect.top -
+        (scrollableRect.height - itemRect.height) / 2;
+
+      scrollable.scrollTo({
+        top: Math.min(
+          Math.max(0, targetScrollTop),
+          scrollable.scrollHeight - scrollable.clientHeight
+        ),
+        left: 0,
+      });
+      scrollable.scrollLeft = 0;
+    });
  }

-  private _menuTapped() {
-    this._drawer.open = !this._drawer.open;
+  private _renderSidebarNavigation() {
+    const sidebar: unknown[] = [];
+
+    for (const group of GALLERY_SIDEBAR) {
+      const links: unknown[] = [];
+      const expanded = group.pages.some(
+        (page) => this._page === `${group.category}/${page}`
+      );
+
+      for (const page of group.pages) {
+        const key = `${group.category}/${page}`;
+        if (!(key in PAGES)) {
+          console.error("Undefined page referenced in sidebar.js:", key);
+          continue;
+        }
+        links.push(
+          this._renderPageLink(
+            key,
+            PAGES[key].metadata.title || page,
+            group.header ? undefined : "main-navigation",
+            group.header ? undefined : group.icon
+          )
+        );
+      }
+
+      sidebar.push(
+        group.header
+          ? html`
+              <ha-expansion-panel
+                slot="main-navigation"
+                class="gallery-sidebar-section"
+                .header=${group.header}
+                ?expanded=${expanded}
+              >
+                ${group.icon
+                  ? html`<ha-svg-icon
+                      slot="leading-icon"
+                      class="gallery-sidebar-icon"
+                      .path=${group.icon}
+                    ></ha-svg-icon>`
+                  : nothing}
+                ${links}
+              </ha-expansion-panel>
+            `
+          : links
+      );
+    }
+
+    return sidebar;
  }

-  private _toggleRtl() {
-    this._rtl = !this._rtl;
-    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
+  private _renderPageLink(
+    page: string,
+    title: string,
+    slot?: string,
+    iconPath?: string
+  ) {
+    return html`
+      <ha-list-item-button
+        slot=${ifDefined(slot)}
+        class=${classMap({
+          "gallery-nav-item": true,
+          "has-icon": Boolean(iconPath),
+          selected: this._page === page,
+        })}
+        ?selected=${this._page === page}
+        href=${`#${page}`}
+      >
+        ${iconPath
+          ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
+          : nothing}
+        <span slot="headline">${title}</span>
+      </ha-list-item-button>
+    `;
+  }
+
+  private _renderSettingsItem() {
+    return html`
+      <ha-list-item-button
+        slot="fixed-navigation"
+        class=${classMap({
+          "gallery-settings-item": true,
+          selected: this._page === SETTINGS_PAGE,
+        })}
+        ?selected=${this._page === SETTINGS_PAGE}
+        href="#settings"
+      >
+        <ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
+        <span slot="headline">Settings</span>
+      </ha-list-item-button>
+    `;
+  }
+
+  private _renderPageFooter(page: GalleryPage) {
+    return html`<div class="page-footer">
+      <div class="edit-docs">
+        <div class="header">Help us to improve our documentation</div>
+        <div class="secondary">
+          Suggest an edit to this page, or provide/view feedback for this page.
+        </div>
+        <div>
+          ${page.description || Object.keys(page.metadata).length > 0
+            ? html`
+                <a
+                  href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                  target="_blank"
+                >
+                  Edit text
+                </a>
+              `
+            : nothing}
+          ${page.demo
+            ? html`
+                <a href=${`${GITHUB_DEMO_URL}${this._page}.ts`} target="_blank">
+                  Edit demo
+                </a>
+              `
+            : nothing}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  private _toggleDrawer(ev?: Event) {
+    ev?.stopPropagation();
+    this._drawerOpen = !this._drawerOpen;
  }

  private _applyDirection() {
    setDirectionStyles(this._rtl ? "rtl" : "ltr", this);
  }

+  private _themeSettingsChanged(ev: HASSDomEvent<Partial<ThemeSettings>>) {
+    this._themeSettings = {
+      ...this._themeSettings,
+      ...ev.detail,
+      theme: "default",
+    };
+    localStorage.setItem(
+      GALLERY_THEME_STORAGE_KEY,
+      JSON.stringify(this._themeSettings)
+    );
+  }
+
+  private _rtlChanged(ev: HASSDomEvent<{ rtl: boolean }>) {
+    this._rtl = ev.detail.rtl;
+    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
+  }
+
+  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
+    this._systemDark = ev.matches;
+  };
+
+  private _applyTheme() {
+    applyThemesOnElement(
+      document.documentElement,
+      this._themes,
+      "default",
+      this._themeSettings,
+      true
+    );
+
+    let schemeMeta = document.querySelector("meta[name=color-scheme]");
+    if (!schemeMeta) {
+      schemeMeta = document.createElement("meta");
+      schemeMeta.setAttribute("name", "color-scheme");
+      document.head.appendChild(schemeMeta);
+    }
+    schemeMeta.setAttribute(
+      "content",
+      this._effectiveDarkMode ? "dark" : "light"
+    );
+    document.documentElement.style.colorScheme = this._effectiveDarkMode
+      ? "dark"
+      : "light";
+
+    const themeMeta = document.querySelector("meta[name=theme-color]");
+    if (themeMeta) {
+      if (!themeMeta.hasAttribute("default-content")) {
+        themeMeta.setAttribute(
+          "default-content",
+          themeMeta.getAttribute("content") ?? ""
+        );
+      }
+      const styles = getComputedStyle(document.documentElement);
+      const themeColor =
+        styles.getPropertyValue("--app-theme-color").trim() ||
+        styles.getPropertyValue("--primary-background-color").trim() ||
+        themeMeta.getAttribute("default-content") ||
+        "";
+      themeMeta.setAttribute("content", themeColor);
+    }
+  }
+
+  private _pageFromLocation() {
+    const page = document.location.hash.substring(1);
+    return page === SETTINGS_PAGE || page in PAGES ? page : DEFAULT_PAGE;
+  }
+
+  private get _effectiveDarkMode() {
+    return this._themeSettings.dark ?? this._systemDark;
+  }
+
+  private get _themes(): HomeAssistant["themes"] {
+    return {
+      default_theme: "default",
+      default_dark_theme: null,
+      themes: {},
+      darkMode: this._effectiveDarkMode,
+      theme: "default",
+    };
+  }
+
+  private get _galleryHass(): HomeAssistant {
+    return {
+      auth: {},
+      areas: {},
+      config: {},
+      connected: true,
+      connection: galleryConnection,
+      debugConnection: false,
+      devices: {},
+      dockedSidebar: "docked",
+      enableShortcuts: true,
+      entities: {},
+      floors: {},
+      hassUrl: (path) => path,
+      kioskMode: false,
+      language: "en",
+      loadBackendTranslation: async () => galleryLocalize,
+      loadFragmentTranslation: async () => undefined,
+      locale: {
+        language: "en",
+        number_format: "language",
+        time_format: "language",
+        date_format: "language",
+        first_weekday: "language",
+        time_zone: "local",
+      },
+      localize: galleryLocalize,
+      panelUrl: this._page,
+      panels: {},
+      selectedLanguage: null,
+      selectedTheme: this._themeSettings,
+      services: {},
+      states: {},
+      suspendWhenHidden: false,
+      systemData: {},
+      themes: this._themes,
+      translationMetadata: { fragments: [], translations: {} },
+      user: {
+        id: "gallery",
+        is_admin: false,
+        is_owner: false,
+        name: "Settings",
+        credentials: [],
+        mfa_modules: [],
+      },
+      userData: {},
+      vibrate: false,
+      callApi: async () => undefined,
+      callApiRaw: async () => new Response(),
+      callService: async () => ({ context: { id: "gallery" } }),
+      callWS: async () => undefined,
+      fetchWithAuth: async () => new Response(),
+      sendWS: () => undefined,
+    } as unknown as HomeAssistant;
+  }
+
  static styles = [
    haStyle,
    css`
@@ -226,49 +556,103 @@ class HaGallery extends LitElement {
        -ms-user-select: initial;
        -webkit-user-select: initial;
        -moz-user-select: initial;
-        --ha-sidebar-width: 256px;
-        --header-height: 64px;
+        --ha-sidebar-width: 300px;
+        --ha-sidebar-expanded-width: 300px;
+        --ha-sidebar-expanded-item-width: 292px;
+        --ha-sidebar-expanded-section-item-width: 256px;
+        --app-header-background-color: var(--sidebar-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+        --app-header-border-bottom: 1px solid var(--divider-color);
      }

-      .sidebar {
+      .gallery-sidebar-section {
+        color: var(--sidebar-text-color);
        box-sizing: border-box;
-        max-height: calc(100vh - var(--header-height));
-        overflow-y: auto;
-        padding: 4px;
+        margin: 0 var(--ha-space-1) var(--ha-space-1);
+        overflow-x: hidden;
+        border-radius: var(--ha-border-radius-sm);
+        --expansion-panel-summary-padding: 0 var(--ha-space-2);
      }

-      .drawer-title {
-        align-items: center;
+      .gallery-sidebar-section::part(summary) {
+        min-height: var(--ha-space-10);
+        border-radius: var(--ha-border-radius-sm);
        box-sizing: border-box;
-        color: var(--primary-text-color);
-        display: flex;
-        font-size: var(--ha-font-size-l);
-        font-weight: var(--ha-font-weight-medium);
-        min-height: var(--header-height);
-        padding: 0 16px;
      }

-      .sidebar a {
-        color: var(--primary-text-color);
-        display: block;
-        padding: 12px;
-        text-decoration: none;
+      .gallery-sidebar-section .gallery-nav-item {
+        margin-inline-start: var(--ha-space-4);
+        width: var(--ha-sidebar-expanded-section-item-width, 248px);
+      }
+
+      .gallery-sidebar-icon,
+      .gallery-nav-item ha-svg-icon[slot="start"] {
+        color: var(--sidebar-icon-color);
+        flex-shrink: 0;
+        height: var(--ha-space-6);
+        width: var(--ha-space-6);
+      }
+
+      .gallery-sidebar-icon {
+        margin-inline-end: var(--ha-space-3);
+      }
+
+      .gallery-nav-item,
+      .gallery-settings-item {
+        flex-shrink: 0;
+        margin: 0 var(--ha-space-1) var(--ha-space-1);
+        border-radius: var(--ha-border-radius-sm);
+        --ha-row-item-min-height: var(--ha-space-10);
+        --ha-row-item-padding-block: 0;
+        --ha-row-item-padding-inline: var(--ha-space-3);
        position: relative;
+        width: var(--ha-sidebar-expanded-item-width, 248px);
+        color: var(--sidebar-text-color);
      }

-      .sidebar a[active]::before {
-        border-radius: var(--ha-border-radius-lg);
+      .gallery-nav-item.has-icon,
+      .gallery-settings-item {
+        --ha-row-item-gap: var(--ha-space-3);
+        --ha-row-item-padding-inline: var(--ha-space-2) var(--ha-space-3);
+      }
+
+      .gallery-nav-item::part(headline),
+      .gallery-settings-item::part(headline) {
+        color: inherit;
+      }
+
+      .gallery-nav-item[selected],
+      .gallery-settings-item[selected] {
+        color: var(--sidebar-selected-icon-color);
+      }
+
+      .gallery-nav-item[selected]::before,
+      .gallery-settings-item[selected]::before {
+        border-radius: var(--ha-border-radius-sm);
        position: absolute;
        top: 0;
-        right: 2px;
+        right: 0;
        bottom: 0;
-        left: 2px;
+        left: 0;
        pointer-events: none;
        content: "";
-        transition: opacity 15ms linear;
-        will-change: opacity;
        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
+        opacity: var(--dark-divider-opacity);
+      }
+
+      .gallery-settings-item ha-svg-icon[slot="start"] {
+        color: var(--sidebar-icon-color);
+        flex-shrink: 0;
+        height: var(--ha-space-6);
+        width: var(--ha-space-6);
+      }
+
+      .gallery-settings-item[selected] ha-svg-icon[slot="start"] {
+        color: var(--sidebar-selected-icon-color);
+      }
+
+      .gallery-nav-item[selected] ha-svg-icon[slot="start"] {
+        color: var(--sidebar-selected-icon-color);
      }

      .app-content {
@@ -283,11 +667,16 @@ class HaGallery extends LitElement {
      }

      .content {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
        flex: 1;
+        padding-top: var(--ha-space-4);
      }

      page-description {
-        margin: 16px;
+        display: block;
+        margin: 0 var(--ha-space-4) var(--ha-space-4);
      }

      .page-footer {
@@ -324,18 +713,6 @@ class HaGallery extends LitElement {
        margin: 0 8px;
        text-decoration: none;
      }
-
-      .rtl-toggle {
-        padding: var(--ha-space-4);
-        display: inline-flex;
-        align-items: flex-end;
-        margin-top: 12px !important;
-      }
-
-      .rtl-toggle ha-icon-button {
-        border: 1px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-pill);
-      }
    `,
  ];
 }
@@ -1,11 +1,11 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const alerts: {
  title?: string;
@@ -135,10 +135,10 @@ const alerts: {
 export class DemoHaAlert extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-alert ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                ${alerts.map(
                  (alert) => html`
@@ -154,43 +154,19 @@ export class DemoHaAlert extends LitElement {
                )}
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    ha-alert {
      display: block;
@@ -1,12 +1,12 @@
 import { mdiButtonCursor, mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-badge";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const badges: {
  type?: "badge" | "button";
@@ -60,10 +60,10 @@ const badges: {
 export class DemoHaBadge extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-badge ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                ${badges.map(
                  (badge) => html`
@@ -78,45 +78,23 @@ export class DemoHaBadge extends LitElement {
                )}
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
+      flex-wrap: wrap;
      gap: var(--ha-space-6);
    }
  `;
@@ -1,13 +1,13 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import { titleCase } from "../../../../src/common/string/title-case";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const appearances = ["accent", "filled", "plain"];
 const variants = ["brand", "danger", "neutral", "warning", "success"];
@@ -16,10 +16,10 @@ const variants = ["brand", "danger", "neutral", "warning", "success"];
 export class DemoHaButton extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                ${variants.map(
                  (variant) => html`
@@ -112,45 +112,22 @@ export class DemoHaButton extends LitElement {
                )}
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    .button {
      padding: unset;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -159,6 +136,7 @@ export class DemoHaButton extends LitElement {
    }
    .card-content div {
      display: flex;
+      flex-wrap: wrap;
      gap: var(--ha-space-2);
    }
  `;
@@ -26,7 +26,7 @@ const chips: {
 export class DemoHaChips extends LitElement {
  protected render(): TemplateResult {
    return html`
-      <ha-card header="ha-chip demo">
+      <ha-card>
        <div class="card-content">
          <p>Action chip</p>
          <ha-chip-set>
@@ -82,7 +82,7 @@ export class DemoHaChips extends LitElement {
                  ${chip.icon
                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
                      </ha-svg-icon>`
-                    : ""}
+                    : nothing}
                  ${chip.content}
                </ha-input-chip>
              `
@@ -9,9 +9,11 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-switch";
+import type { HaControlSwitch } from "../../../../src/components/ha-control-switch";
+import type { HASSDomTargetEvent } from "../../../../src/common/dom/fire_event";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const switches: {
  id: string;
@@ -45,106 +47,72 @@ const switches: {
 export class DemoHaControlSwitch extends LitElement {
  @state() private checked = false;

-  handleValueChanged(e: any) {
-    this.checked = e.target.checked as boolean;
+  handleValueChanged(e: HASSDomTargetEvent<HaControlSwitch>) {
+    this.checked = e.target.checked;
  }

  protected render(): TemplateResult {
    return html`
-      <div class="themes">
-        ${["light", "dark"].map(
-          (mode) => html`
-            <div class=${mode}>
-              <ha-card header="ha-control-switch ${mode}">
-                ${repeat(switches, (sw) => {
-                  const { id, label, ...config } = sw;
-                  return html`
-                    <div class="card-content">
-                      <label id="${mode}-${id}">${label}</label>
-                      <pre>Config: ${JSON.stringify(config)}</pre>
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
+              ${repeat(switches, (sw) => {
+                const { id, label, ...config } = sw;
+                return html`
+                  <div class="card-content">
+                    <label id="${slot}-${id}">${label}</label>
+                    <pre>Config: ${JSON.stringify(config)}</pre>
+                    <ha-control-switch
+                      .checked=${this.checked}
+                      class=${ifDefined(config.class)}
+                      @change=${this.handleValueChanged}
+                      .pathOn=${mdiLightbulb}
+                      .pathOff=${mdiLightbulbOff}
+                      .label=${label}
+                      ?disabled=${config.disabled}
+                      ?reversed=${config.reversed}
+                    >
+                    </ha-control-switch>
+                  </div>
+                `;
+              })}
+              <div class="card-content">
+                <p class="title"><b>Vertical</b></p>
+                <div class="vertical-switches">
+                  ${repeat(switches, (sw) => {
+                    const { label, ...config } = sw;
+                    return html`
                      <ha-control-switch
                        .checked=${this.checked}
+                        vertical
                        class=${ifDefined(config.class)}
                        @change=${this.handleValueChanged}
-                        .pathOn=${mdiLightbulb}
-                        .pathOff=${mdiLightbulbOff}
                        .label=${label}
+                        .pathOn=${mdiGarageOpen}
+                        .pathOff=${mdiGarage}
                        ?disabled=${config.disabled}
                        ?reversed=${config.reversed}
                      >
                      </ha-control-switch>
-                    </div>
-                  `;
-                })}
-                <div class="card-content">
-                  <p class="title"><b>Vertical</b></p>
-                  <div class="vertical-switches">
-                    ${repeat(switches, (sw) => {
-                      const { label, ...config } = sw;
-                      return html`
-                        <ha-control-switch
-                          .checked=${this.checked}
-                          vertical
-                          class=${ifDefined(config.class)}
-                          @change=${this.handleValueChanged}
-                          .label=${label}
-                          .pathOn=${mdiGarageOpen}
-                          .pathOff=${mdiGarage}
-                          ?disabled=${config.disabled}
-                          ?reversed=${config.reversed}
-                        >
-                        </ha-control-switch>
-                      `;
-                    })}
-                  </div>
+                    `;
+                  })}
                </div>
-              </ha-card>
-            </div>
+              </div>
+            </ha-card>
          `
        )}
-      </div>
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
      display: block;
    }
-    .themes {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      flex-wrap: wrap;
-      gap: 16px;
-      padding: 16px;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 16px;
-      border-radius: var(--ha-border-radius-md);
-    }
    ha-card {
-      max-width: 600px;
-      margin: 0 auto;
+      margin: 0;
+      width: 100%;
    }
    pre {
      margin-top: 0;
@@ -8,25 +8,25 @@ import {
  mdiContentPaste,
  mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-dropdown";
 import "../../../../src/components/ha-dropdown-item";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-svg-icon";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

@customElement("demo-components-ha-dropdown")
 export class DemoHaDropdown extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <ha-dropdown>
                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
@@ -74,45 +74,22 @@ export class DemoHaDropdown extends LitElement {
                </ha-dropdown>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    .button {
      padding: unset;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -12,7 +12,7 @@ const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 export class DemoHaFaded extends LitElement {
  protected render(): TemplateResult {
    return html`
-      <ha-card header="ha-faded demo">
+      <ha-card>
        <div class="card-content">
          <h3>Long text directly as slotted content</h3>
          <ha-faded>${LONG_TEXT}</ha-faded>
@@ -1,9 +1,8 @@
 import { ContextProvider } from "@lit/context";
 import { mdiMagnify } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/input/ha-input";
@@ -11,6 +10,15 @@ import "../../../../src/components/input/ha-input-copy";
 import "../../../../src/components/input/ha-input-multi";
 import "../../../../src/components/input/ha-input-search";
 import { internationalizationContext } from "../../../../src/data/context";
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../../../src/data/translation";
+import type { HomeAssistantInternationalization } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const LOCALIZE_KEYS: Record<string, string> = {
  "ui.common.copy": "Copy",
@@ -22,6 +30,25 @@ const LOCALIZE_KEYS: Record<string, string> = {
  "ui.common.copied_clipboard": "Copied to clipboard",
 };

+const localize = (key: string) => LOCALIZE_KEYS[key] ?? key;
+
+const DEMO_I18N: HomeAssistantInternationalization = {
+  localize,
+  language: "en",
+  selectedLanguage: null,
+  locale: {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.language,
+    date_format: DateFormat.language,
+    first_weekday: FirstWeekday.language,
+    time_zone: TimeZone.local,
+  },
+  translationMetadata: { fragments: [], translations: {} },
+  loadBackendTranslation: async () => localize,
+  loadFragmentTranslation: async () => localize,
+};
+
@customElement("demo-components-ha-input")
 export class DemoHaInput extends LitElement {
  constructor() {
@@ -29,185 +56,171 @@ export class DemoHaInput extends LitElement {
    // Provides internationalizationContext for ha-input-copy, ha-input-multi and ha-input-search
    new ContextProvider(this, {
      context: internationalizationContext,
-      initialValue: {
-        localize: ((key: string) => LOCALIZE_KEYS[key] ?? key) as any,
-        language: "en",
-        selectedLanguage: null,
-        locale: {} as any,
-        translationMetadata: {} as any,
-        loadBackendTranslation: (async () => (key: string) => key) as any,
-        loadFragmentTranslation: (async () => (key: string) => key) as any,
-      },
+      initialValue: DEMO_I18N,
    });
  }

  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-input in ${mode}">
-              <div class="card-content">
-                <h3>Basic</h3>
-                <div class="row">
-                  <ha-input label="Default"></ha-input>
-                  <ha-input label="With value" value="Hello"></ha-input>
-                  <ha-input
-                    label="With placeholder"
-                    placeholder="Type here..."
-                  ></ha-input>
-                </div>
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <div slot=${slot} class="panel-content">
+              <ha-card>
+                <div class="card-content">
+                  <h3>Basic</h3>
+                  <div class="row">
+                    <ha-input label="Default"></ha-input>
+                    <ha-input label="With value" value="Hello"></ha-input>
+                    <ha-input
+                      label="With placeholder"
+                      placeholder="Type here..."
+                    ></ha-input>
+                  </div>

-                <h3>Input types</h3>
-                <div class="row">
-                  <ha-input label="Text" type="text" value="Text"></ha-input>
-                  <ha-input label="Number" type="number" value="42"></ha-input>
-                  <ha-input
-                    label="Email"
-                    type="email"
-                    placeholder="you@example.com"
-                  ></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Password"
-                    type="password"
-                    value="secret"
-                    password-toggle
-                  ></ha-input>
-                  <ha-input label="URL" type="url" placeholder="https://...">
-                  </ha-input>
-                  <ha-input label="Date" type="date"></ha-input>
-                </div>
+                  <h3>Input types</h3>
+                  <div class="row">
+                    <ha-input label="Text" type="text" value="Text"></ha-input>
+                    <ha-input
+                      label="Number"
+                      type="number"
+                      value="42"
+                    ></ha-input>
+                    <ha-input
+                      label="Email"
+                      type="email"
+                      placeholder="you@example.com"
+                    ></ha-input>
+                  </div>
+                  <div class="row">
+                    <ha-input
+                      label="Password"
+                      type="password"
+                      value="secret"
+                      password-toggle
+                    ></ha-input>
+                    <ha-input label="URL" type="url" placeholder="https://...">
+                    </ha-input>
+                    <ha-input label="Date" type="date"></ha-input>
+                  </div>

-                <h3>States</h3>
-                <div class="row">
-                  <ha-input
-                    label="Disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    label="Readonly"
-                    readonly
-                    value="Readonly"
-                  ></ha-input>
-                  <ha-input label="Required" required></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Invalid"
-                    invalid
-                    validation-message="This field is required"
-                    value=""
-                  ></ha-input>
-                  <ha-input label="With hint" hint="This is a hint"></ha-input>
-                  <ha-input
-                    label="With clear"
-                    with-clear
-                    value="Clear me"
-                  ></ha-input>
-                </div>
+                  <h3>States</h3>
+                  <div class="row">
+                    <ha-input
+                      label="Disabled"
+                      disabled
+                      value="Disabled"
+                    ></ha-input>
+                    <ha-input
+                      label="Readonly"
+                      readonly
+                      value="Readonly"
+                    ></ha-input>
+                    <ha-input label="Required" required></ha-input>
+                  </div>
+                  <div class="row">
+                    <ha-input
+                      label="Invalid"
+                      invalid
+                      validation-message="This field is required"
+                      value=""
+                    ></ha-input>
+                    <ha-input
+                      label="With hint"
+                      hint="This is a hint"
+                    ></ha-input>
+                    <ha-input
+                      label="With clear"
+                      with-clear
+                      value="Clear me"
+                    ></ha-input>
+                  </div>

-                <h3>With slots</h3>
-                <div class="row">
-                  <ha-input label="With prefix">
-                    <span slot="start">$</span>
-                  </ha-input>
-                  <ha-input label="With suffix">
-                    <span slot="end">kg</span>
-                  </ha-input>
-                  <ha-input label="With icon">
-                    <ha-svg-icon .path=${mdiMagnify} slot="start"></ha-svg-icon>
-                  </ha-input>
+                  <h3>With slots</h3>
+                  <div class="row">
+                    <ha-input label="With prefix">
+                      <span slot="start">$</span>
+                    </ha-input>
+                    <ha-input label="With suffix">
+                      <span slot="end">kg</span>
+                    </ha-input>
+                    <ha-input label="With icon">
+                      <ha-svg-icon
+                        .path=${mdiMagnify}
+                        slot="start"
+                      ></ha-svg-icon>
+                    </ha-input>
+                  </div>
+
+                  <h3>Appearance: outlined</h3>
+                  <div class="row">
+                    <ha-input
+                      appearance="outlined"
+                      label="Outlined"
+                      value="Hello"
+                    ></ha-input>
+                    <ha-input
+                      appearance="outlined"
+                      label="Outlined disabled"
+                      disabled
+                      value="Disabled"
+                    ></ha-input>
+                    <ha-input
+                      appearance="outlined"
+                      label="Outlined invalid"
+                      invalid
+                      validation-message="Required"
+                    ></ha-input>
+                  </div>
+                  <div class="row">
+                    <ha-input
+                      appearance="outlined"
+                      placeholder="Placeholder only"
+                    ></ha-input>
+                  </div>
                </div>
+              </ha-card>

-                <h3>Appearance: outlined</h3>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined"
-                    value="Hello"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined invalid"
-                    invalid
-                    validation-message="Required"
-                  ></ha-input>
+              <ha-card header="Derivatives">
+                <div class="card-content">
+                  <h3>ha-input-search</h3>
+                  <ha-input-search label="Search label"></ha-input-search>
+                  <ha-input-search appearance="outlined"></ha-input-search>
+
+                  <h3>ha-input-copy</h3>
+                  <ha-input-copy
+                    value="my-api-token-123"
+                    masked-value="••••••••••••••••••"
+                    masked-toggle
+                  ></ha-input-copy>
+
+                  <h3>ha-input-multi</h3>
+                  <ha-input-multi
+                    label="URL"
+                    add-label="Add URL"
+                    .value=${["https://example.com"]}
+                  ></ha-input-multi>
                </div>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    placeholder="Placeholder only"
-                  ></ha-input>
-                </div>
-              </div>
-            </ha-card>
-
-            <ha-card header="Derivatives in ${mode}">
-              <div class="card-content">
-                <h3>ha-input-search</h3>
-                <ha-input-search label="Search label"></ha-input-search>
-                <ha-input-search appearance="outlined"></ha-input-search>
-
-                <h3>ha-input-copy</h3>
-                <ha-input-copy
-                  value="my-api-token-123"
-                  masked-value="••••••••••••••••••"
-                  masked-toggle
-                ></ha-input-copy>
-
-                <h3>ha-input-multi</h3>
-                <ha-input-multi
-                  label="URL"
-                  add-label="Add URL"
-                  .value=${["https://example.com"]}
-                ></ha-input-multi>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
+              </ha-card>
+            </div>
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
+    }
+    .panel-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-6);
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -224,10 +237,11 @@ export class DemoHaInput extends LitElement {
    }
    .row {
      display: flex;
+      flex-wrap: wrap;
      gap: var(--ha-space-4);
    }
    .row > * {
-      flex: 1;
+      flex: 1 1 180px;
    }
  `;
 }
@@ -1,20 +1,21 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

@customElement("demo-components-ha-progress-button")
 export class DemoHaProgressButton extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-progress-button in ${mode}">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <ha-progress-button @click=${this._clickedSuccess}>
                  Success
@@ -59,32 +60,17 @@ export class DemoHaProgressButton extends LitElement {
                </ha-progress-button>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  private async _clickedSuccess(ev: CustomEvent): Promise<void> {
+  private _clickedSuccess(
+    ev: HASSDomCurrentTargetEvent<HTMLElementTagNameMap["ha-progress-button"]>
+  ) {
    console.log("Clicked success");
-    const button = ev.currentTarget as any;
+    const button = ev.currentTarget;
    button.progress = true;

    setTimeout(() => {
@@ -93,8 +79,10 @@ export class DemoHaProgressButton extends LitElement {
    }, 1000);
  }

-  private async _clickedFail(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
+  private _clickedFail(
+    ev: HASSDomCurrentTargetEvent<HTMLElementTagNameMap["ha-progress-button"]>
+  ) {
+    const button = ev.currentTarget;
    button.progress = true;

    setTimeout(() => {
@@ -105,20 +93,14 @@ export class DemoHaProgressButton extends LitElement {

  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    .button {
      padding: unset;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -1,12 +1,12 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-bar";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-slider";
 import type { HomeAssistant } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

@customElement("demo-components-ha-slider")
 export class DemoHaSlider extends LitElement {
@@ -14,10 +14,10 @@ export class DemoHaSlider extends LitElement {

  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <span>Default (disabled)</span>
                <ha-slider
@@ -45,44 +45,19 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -1,11 +1,11 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-bar";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-spinner";
 import type { HomeAssistant } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

@customElement("demo-components-ha-spinner")
 export class DemoHaSpinner extends LitElement {
@@ -13,10 +13,10 @@ export class DemoHaSpinner extends LitElement {

  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-badge ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <ha-spinner></ha-spinner>
                <ha-spinner size="tiny"></ha-spinner>
@@ -27,44 +27,19 @@ export class DemoHaSpinner extends LitElement {
                <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -1,10 +1,10 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

@customElement("demo-components-ha-switch")
 export class DemoHaSwitch extends LitElement {
@@ -12,10 +12,10 @@ export class DemoHaSwitch extends LitElement {

  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-switch ${mode}">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <div class="row">
                  <span>Unchecked</span>
@@ -35,44 +35,19 @@ export class DemoHaSwitch extends LitElement {
                </div>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -1,18 +1,23 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-textarea";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
+
+const LONG_VALUE = Array.from(
+  { length: 30 },
+  (_, i) => `Line ${i + 1}: this content overflows the max-height and scrolls.`
+).join("\n");

@customElement("demo-components-ha-textarea")
 export class DemoHaTextarea extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-textarea in ${mode}">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <h3>Basic</h3>
                <div class="row">
@@ -38,6 +43,11 @@ export class DemoHaTextarea extends LitElement {
                    resize="auto"
                    value="This textarea will grow as you type more content into it. Try adding more lines to see the effect."
                  ></ha-textarea>
+                  <ha-textarea
+                    label="Autogrow capped (scrolls past max-height)"
+                    resize="auto"
+                    .value=${LONG_VALUE}
+                  ></ha-textarea>
                </div>

                <h3>States</h3>
@@ -84,42 +94,19 @@ export class DemoHaTextarea extends LitElement {
                </div>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -1,12 +1,19 @@
 import { provide } from "@lit/context";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-tip";
 import { internationalizationContext } from "../../../../src/data/context";
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../../../src/data/translation";
 import type { HomeAssistantInternationalization } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const tips: (string | TemplateResult)[] = [
  "Test tip",
@@ -14,68 +21,57 @@ const tips: (string | TemplateResult)[] = [
  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
 ];

+const localize = (key: string) => key;
+
+const DEMO_I18N: HomeAssistantInternationalization = {
+  localize,
+  language: "en",
+  selectedLanguage: null,
+  locale: {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.language,
+    date_format: DateFormat.language,
+    first_weekday: FirstWeekday.language,
+    time_zone: TimeZone.local,
+  },
+  translationMetadata: { fragments: [], translations: {} },
+  loadBackendTranslation: async () => localize,
+  loadFragmentTranslation: async () => localize,
+};
+
@customElement("demo-components-ha-tip")
 export class DemoHaTip extends LitElement {
  @provide({ context: internationalizationContext })
  @state()
-  protected _i18n: HomeAssistantInternationalization = {
-    localize: ((key: string) => key) as any,
-    language: "en",
-    selectedLanguage: null,
-    locale: {} as any,
-    translationMetadata: {} as any,
-    loadBackendTranslation: (async () => (key: string) => key) as any,
-    loadFragmentTranslation: (async () => (key: string) => key) as any,
-  };
+  protected _i18n = DEMO_I18N;

  protected render(): TemplateResult {
-    return html` ${["light", "dark"].map(
-      (mode) => html`
-        <div class=${mode}>
-          <ha-card header="ha-tip ${mode} demo">
-            <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
-            </div>
-          </ha-card>
-        </div>
-      `
-    )}`;
-  }
-
-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    return html`
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
+              <div class="card-content">
+                ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
+              </div>
+            </ha-card>
+          `
+        )}
+      </demo-theme-comparison>
+    `;
  }

  static styles = css`
    :host {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-tip {
      margin-bottom: 14px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
  `;
 }
@@ -1,7 +1,6 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const SHADOWS = ["s", "m", "l"] as const;

@@ -9,67 +8,32 @@ const SHADOWS = ["s", "m", "l"] as const;
 export class DemoMiscBoxShadow extends LitElement {
  protected render() {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <h2>${mode}</h2>
-            <div class="grid">
-              ${SHADOWS.map(
-                (size) => html`
-                  <div
-                    class="box"
-                    style="box-shadow: var(--ha-box-shadow-${size})"
-                  >
-                    ${size}
-                  </div>
-                `
-              )}
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <div slot=${slot} class="panel-content">
+              <div class="grid">
+                ${SHADOWS.map(
+                  (size) => html`
+                    <div
+                      class="box"
+                      style="box-shadow: var(--ha-box-shadow-${size})"
+                    >
+                      ${size}
+                    </div>
+                  `
+                )}
+              </div>
            </div>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      flex-direction: row;
-      gap: 48px;
-      padding: 48px;
-    }
-
-    .light,
-    .dark {
-      flex: 1;
-      background-color: var(--primary-background-color);
-      border-radius: 16px;
-      padding: 32px;
-    }
-
-    h2 {
-      margin: 0 0 24px;
-      font-size: 18px;
-      font-weight: 500;
-      color: var(--primary-text-color);
-      text-transform: capitalize;
+      display: block;
    }

    .grid {
@@ -10,7 +10,7 @@ All pages are stored in [the pages folder][pages-folder] on GitHub. Pages are gr

 ## Development

-You can develop design.home-assistant.io locally by checking out [the Home Assistant frontend repository](https://github.com/home-assistant/frontend). The command to run the gallery is `gallery/script/develop_gallery`. It will automatically open a browser window and load the development version of the website.
+You can develop design.home-assistant.io locally by checking out [the Home Assistant frontend repository](https://github.com/home-assistant/frontend). The command to run the gallery is `gallery/script/develop_gallery`. After the first build finishes, the command prints the local URL for the development version of the website.

 ## Creating a page

@@ -29,26 +29,26 @@
  "dependencies": {
    "@babel/runtime": "7.29.7",
    "@braintree/sanitize-url": "7.1.2",
-    "@codemirror/autocomplete": "6.20.2",
+    "@codemirror/autocomplete": "6.20.3",
    "@codemirror/commands": "6.10.3",
    "@codemirror/lang-jinja": "6.0.1",
    "@codemirror/lang-yaml": "6.1.3",
    "@codemirror/language": "6.12.3",
-    "@codemirror/lint": "6.9.6",
+    "@codemirror/lint": "6.9.7",
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.43.0",
+    "@codemirror/view": "6.43.1",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.7",
-    "@formatjs/intl-displaynames": "7.3.9",
-    "@formatjs/intl-durationformat": "0.10.13",
-    "@formatjs/intl-getcanonicallocales": "3.2.9",
-    "@formatjs/intl-listformat": "8.3.9",
-    "@formatjs/intl-locale": "5.3.8",
-    "@formatjs/intl-numberformat": "9.3.10",
-    "@formatjs/intl-pluralrules": "6.3.9",
-    "@formatjs/intl-relativetimeformat": "12.3.9",
+    "@formatjs/intl-datetimeformat": "7.4.9",
+    "@formatjs/intl-displaynames": "7.3.10",
+    "@formatjs/intl-durationformat": "0.10.14",
+    "@formatjs/intl-getcanonicallocales": "3.2.10",
+    "@formatjs/intl-listformat": "8.3.10",
+    "@formatjs/intl-locale": "5.3.9",
+    "@formatjs/intl-numberformat": "9.3.11",
+    "@formatjs/intl-pluralrules": "6.3.10",
+    "@formatjs/intl-relativetimeformat": "12.3.10",
    "@fullcalendar/core": "6.1.20",
    "@fullcalendar/daygrid": "6.1.20",
    "@fullcalendar/interaction": "6.1.20",
@@ -70,8 +70,8 @@
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@swc/helpers": "0.5.23",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.1.2",
-    "@tsparticles/preset-links": "4.1.2",
+    "@tsparticles/engine": "4.1.3",
+    "@tsparticles/preset-links": "4.1.3",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -88,13 +88,13 @@
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.4.1",
+    "fuse.js": "7.4.2",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "7.0.0",
    "hls.js": "1.6.16",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.2.5",
-    "intl-messageformat": "11.2.7",
+    "intl-messageformat": "11.2.8",
    "js-yaml": "4.2.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -102,7 +102,7 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.4",
+    "marked": "18.0.5",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -131,13 +131,13 @@
    "@babel/preset-env": "7.29.7",
    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.61.0",
+    "@html-eslint/eslint-plugin": "0.62.0",
    "@lokalise/node-api": "16.0.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.12",
-    "@rspack/core": "2.0.6",
+    "@rsdoctor/rspack-plugin": "1.5.13",
+    "@rspack/core": "2.0.8",
    "@rspack/dev-server": "2.0.3",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -186,15 +186,15 @@
    "lodash.template": "4.18.1",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
-    "prettier": "3.8.3",
-    "rspack-manifest-plugin": "5.2.1",
+    "prettier": "3.8.4",
+    "rspack-manifest-plugin": "5.2.2",
    "serve": "14.2.6",
    "sinon": "22.0.0",
    "tar": "7.5.16",
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.60.1",
+    "typescript-eslint": "8.61.0",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.8",
    "webpack-stats-plugin": "1.1.3",
@@ -4,8 +4,7 @@ import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";

 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
-  (isCore(page) || isLoadedIntegration(hass, page)) &&
-  (!page.filter || page.filter(hass));
+  isCore(page) || isLoadedIntegration(hass, page);

 export const isLoadedIntegration = (
  hass: HomeAssistant,
@@ -1,7 +1,7 @@
 // Load a resource and get a promise when loading done.
 // From: https://davidwalsh.name/javascript-loader

-const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
+const _load = (tag: "link" | "script", url: string, type?: "module") =>
  // This promise will be used by Promise.all to determine success or failure
  new Promise((resolve, reject) => {
    const element = document.createElement(tag);
@@ -33,5 +33,4 @@ const _load = (tag: "link" | "script" | "img", url: string, type?: "module") =>
  });
 export const loadCSS = (url: string) => _load("link", url);
 export const loadJS = (url: string) => _load("script", url);
-export const loadImg = (url: string) => _load("img", url);
 export const loadModule = (url: string) => _load("script", url, "module");
@@ -1,41 +0,0 @@
-/**
- * Scroll to a specific y coordinate.
- *
- * Copied from paper-scroll-header-panel.
- *
- * @method scroll
- * @param {number} top The coordinate to scroll to, along the y-axis.
- * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
- */
-export default function scrollToTarget(element, target) {
-  // the scroll event will trigger _updateScrollState directly,
-  // However, _updateScrollState relies on the previous `scrollTop` to update the states.
-  // Calling _updateScrollState will ensure that the states are synced correctly.
-  const top = 0;
-  const scroller = target;
-  const easingFn = function easeOutQuad(t, b, c, d) {
-    t /= d;
-    return -c * t * (t - 2) + b;
-  };
-  const animationId = Math.random();
-  const duration = 200;
-  const startTime = Date.now();
-  const currentScrollTop = scroller.scrollTop;
-  const deltaScrollTop = top - currentScrollTop;
-  element._currentAnimationId = animationId;
-  (function updateFrame() {
-    const now = Date.now();
-    const elapsedTime = now - startTime;
-    if (elapsedTime > duration) {
-      scroller.scrollTop = top;
-    } else if (element._currentAnimationId === animationId) {
-      scroller.scrollTop = easingFn(
-        elapsedTime,
-        currentScrollTop,
-        deltaScrollTop,
-        duration
-      );
-      requestAnimationFrame(updateFrame.bind(element));
-    }
-  }).call(element);
-}
@@ -3,8 +3,6 @@ import type { Map, TileLayer } from "leaflet";
 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-export type LeafletDrawModuleType = typeof import("leaflet-draw");

 export const setupLeafletMap = async (
  mapElement: HTMLElement,
@@ -45,17 +43,6 @@ export const setupLeafletMap = async (
  return [map, Leaflet, tileLayer];
 };

-export const replaceTileLayer = (
-  leaflet: LeafletModuleType,
-  map: Map,
-  tileLayer: TileLayer
-): TileLayer => {
-  map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet);
-  tileLayer.addTo(map);
-  return tileLayer;
-};
-
 const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
  leaflet.tileLayer(
    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
@@ -1,3 +0,0 @@
-/** An empty image which can be set as src of an img element. */
-export const emptyImageBase64 =
-  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -19,6 +19,40 @@ import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";

+// Domains whose state is a timezone-agnostic date and/or time string.
+const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
+
+// Domains whose state is a timestamp.
+const TIMESTAMP_DOMAINS = new Set([
+  "ai_task",
+  "button",
+  "conversation",
+  "event",
+  "image",
+  "infrared",
+  "input_button",
+  "notify",
+  "radio_frequency",
+  "scene",
+  "stt",
+  "tag",
+  "tts",
+  "wake_word",
+  "datetime",
+]);
+
+// Maps Intl.NumberFormat part types to ValuePart types for monetary states.
+const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
+  integer: "value",
+  group: "value",
+  decimal: "value",
+  fraction: "value",
+  minusSign: "value",
+  plusSign: "value",
+  literal: "literal",
+  currency: "unit",
+};
+
 export const computeStateDisplay = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
@@ -138,21 +172,10 @@ const computeStateToPartsFromEntityAttributes = (
      }

      if (parts.length) {
-        const TYPE_MAP: Record<string, ValuePart["type"]> = {
-          integer: "value",
-          group: "value",
-          decimal: "value",
-          fraction: "value",
-          minusSign: "value",
-          plusSign: "value",
-          literal: "literal",
-          currency: "unit",
-        };
-
        const valueParts: ValuePart[] = [];

        for (const part of parts) {
-          const type = TYPE_MAP[part.type];
+          const type = MONETARY_TYPE_MAP[part.type];
          if (!type) continue;
          const last = valueParts[valueParts.length - 1];
          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
@@ -191,7 +214,7 @@ const computeStateToPartsFromEntityAttributes = (
    return [{ type: "value", value: value }];
  }

-  if (["date", "input_datetime", "time"].includes(domain)) {
+  if (DATE_TIME_DOMAINS.has(domain)) {
    // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
    // Attributes aren't available, we have to use `state`.

@@ -250,23 +273,7 @@ const computeStateToPartsFromEntityAttributes = (

  // state is a timestamp
  if (
-    [
-      "ai_task",
-      "button",
-      "conversation",
-      "event",
-      "image",
-      "infrared",
-      "input_button",
-      "notify",
-      "radio_frequency",
-      "scene",
-      "stt",
-      "tag",
-      "tts",
-      "wake_word",
-      "datetime",
-    ].includes(domain) ||
+    TIMESTAMP_DOMAINS.has(domain) ||
    (domain === "sensor" &&
      SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
  ) {
@@ -4,9 +4,10 @@ import { updateIsInstalling } from "../../data/update";

 export const updateIcon = (stateObj: HassEntity, state?: string) => {
  const compareState = state ?? stateObj.state;
-  return compareState === "on"
-    ? updateIsInstalling(stateObj as UpdateEntity)
-      ? "mdi:package-down"
-      : "mdi:package-up"
-    : "mdi:package";
+  // An install can be in progress even when the state is "off", e.g. when
+  // downgrading firmware. Show the installing icon regardless of state.
+  if (updateIsInstalling(stateObj as UpdateEntity)) {
+    return "mdi:package-down";
+  }
+  return compareState === "on" ? "mdi:package-up" : "mdi:package";
 };
@@ -40,6 +40,25 @@ export const numberFormatToLocale = (
  }
 };

+// Constructing an Intl.NumberFormat is comparatively expensive, and these
+// formatters are created on every numeric state render. The number of distinct
+// (locale, options) combinations is small and bounded in practice, so cache the
+// instances instead of rebuilding them on every call.
+const numberFormatCache = new Map<string, Intl.NumberFormat>();
+
+const getNumberFormatter = (
+  locale: string | string[] | undefined,
+  options: Intl.NumberFormatOptions
+): Intl.NumberFormat => {
+  const key = JSON.stringify([locale, options]);
+  let formatter = numberFormatCache.get(key);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(locale, options);
+    numberFormatCache.set(key, formatter);
+  }
+  return formatter;
+};
+
 /**
 * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
 *
@@ -75,7 +94,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format !== NumberFormat.none &&
    !Number.isNaN(Number(num))
  ) {
-    return new Intl.NumberFormat(
+    return getNumberFormatter(
      locale,
      getDefaultFormatOptions(num, options)
    ).formatToParts(Number(num));
@@ -87,7 +106,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format === NumberFormat.none
  ) {
    // If NumberFormat is none, use en-US format without grouping.
-    return new Intl.NumberFormat(
+    return getNumberFormatter(
      "en-US",
      getDefaultFormatOptions(num, {
        ...options,
@@ -0,0 +1,58 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import {
+  createQueryString,
+  decodeQueryParams,
+  queryParamsFromServiceTarget,
+  serviceTargetFromQueryParams,
+  type QueryParamConfig,
+  type QueryParamValues,
+  type SearchParamsSource,
+} from "./query-params";
+
+export type HistoryLogbookTargetParamKey =
+  | "entity_id"
+  | "label_id"
+  | "floor_id"
+  | "area_id"
+  | "device_id";
+
+export const historyLogbookTargetParamKeys: readonly HistoryLogbookTargetParamKey[] =
+  ["entity_id", "label_id", "floor_id", "area_id", "device_id"];
+
+export const historyLogbookQueryParamConfig = {
+  list: historyLogbookTargetParamKeys,
+  date: ["start_date", "end_date"],
+  boolean: [{ key: "back", trueValue: "1" }],
+} as const satisfies QueryParamConfig;
+
+export type HistoryLogbookQueryParams = QueryParamValues<
+  typeof historyLogbookQueryParamConfig
+>;
+
+export const decodeHistoryLogbookQueryParams = (
+  searchParams: SearchParamsSource
+): HistoryLogbookQueryParams =>
+  decodeQueryParams(searchParams, historyLogbookQueryParamConfig);
+
+export const historyLogbookTargetFromQueryParams = (
+  params: HistoryLogbookQueryParams
+): HassServiceTarget | undefined =>
+  serviceTargetFromQueryParams(params, historyLogbookTargetParamKeys);
+
+export const createHistoryLogbookUrl = (
+  path: string,
+  target: HassServiceTarget,
+  startDate: Date,
+  endDate: Date
+): string => {
+  const queryString = createQueryString(
+    {
+      ...queryParamsFromServiceTarget(target, historyLogbookTargetParamKeys),
+      start_date: startDate,
+      end_date: endDate,
+    },
+    historyLogbookQueryParamConfig
+  );
+
+  return queryString ? `${path}?${queryString}` : path;
+};
@@ -0,0 +1,172 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { ensureArray } from "../array/ensure-array";
+
+export type SearchParamsSource =
+  | URLSearchParams
+  | Record<string, string>
+  | string;
+
+export interface QueryParamConfig {
+  list?: readonly string[];
+  date?: readonly string[];
+  boolean?: readonly {
+    key: string;
+    trueValue: string;
+  }[];
+  string?: readonly string[];
+}
+
+type ListKeyOf<C extends QueryParamConfig> = C extends {
+  list: readonly (infer K extends string)[];
+}
+  ? K
+  : never;
+
+type DateKeyOf<C extends QueryParamConfig> = C extends {
+  date: readonly (infer K extends string)[];
+}
+  ? K
+  : never;
+
+type BooleanKeyOf<C extends QueryParamConfig> = C extends {
+  boolean: readonly { key: infer K extends string }[];
+}
+  ? K
+  : never;
+
+type StringKeyOf<C extends QueryParamConfig> = C extends {
+  string: readonly (infer K extends string)[];
+}
+  ? K
+  : never;
+
+export type QueryParamValues<C extends QueryParamConfig> = Partial<
+  Record<ListKeyOf<C>, string[]> &
+    Record<DateKeyOf<C>, Date> &
+    Record<BooleanKeyOf<C>, boolean> &
+    Record<StringKeyOf<C>, string>
+>;
+
+type QueryParamValue = string[] | Date | boolean | string;
+
+export type ServiceTargetQueryParams<
+  Key extends keyof HassServiceTarget & string,
+> = Partial<Record<Key, string[]>>;
+
+const getSearchParam = (
+  searchParams: SearchParamsSource,
+  key: string
+): string | null => {
+  if (typeof searchParams === "string") {
+    return new URLSearchParams(searchParams).get(key);
+  }
+  if (searchParams instanceof URLSearchParams) {
+    return searchParams.get(key);
+  }
+  return searchParams[key] ?? null;
+};
+
+export function decodeQueryParams<C extends QueryParamConfig>(
+  searchParams: SearchParamsSource,
+  config: C
+): QueryParamValues<C>;
+export function decodeQueryParams(
+  searchParams: SearchParamsSource,
+  config: QueryParamConfig
+): Record<string, QueryParamValue | undefined> {
+  const params: Record<string, QueryParamValue> = {};
+  for (const key of config.list ?? []) {
+    const value = getSearchParam(searchParams, key);
+    if (value) {
+      params[key] = value.split(",");
+    }
+  }
+  for (const key of config.date ?? []) {
+    const value = getSearchParam(searchParams, key);
+    if (value) {
+      params[key] = new Date(value);
+    }
+  }
+  for (const { key, trueValue } of config.boolean ?? []) {
+    if (getSearchParam(searchParams, key) === trueValue) {
+      params[key] = true;
+    }
+  }
+  for (const key of config.string ?? []) {
+    const value = getSearchParam(searchParams, key);
+    if (value) {
+      params[key] = value;
+    }
+  }
+  return params;
+}
+
+export function createQueryString<C extends QueryParamConfig>(
+  values: QueryParamValues<NoInfer<C>>,
+  config: C
+): string;
+export function createQueryString(
+  values: Record<string, QueryParamValue | undefined>,
+  config: QueryParamConfig
+): string {
+  const searchParams = new URLSearchParams();
+  for (const key of config.list ?? []) {
+    const value = values[key];
+    if (Array.isArray(value) && value.length) {
+      searchParams.append(key, value.join(","));
+    }
+  }
+  for (const key of config.date ?? []) {
+    const value = values[key];
+    if (value instanceof Date) {
+      searchParams.append(key, value.toISOString());
+    }
+  }
+  for (const { key, trueValue } of config.boolean ?? []) {
+    if (values[key]) {
+      searchParams.append(key, trueValue);
+    }
+  }
+  for (const key of config.string ?? []) {
+    const value = values[key];
+    if (typeof value === "string" && value) {
+      searchParams.append(key, value);
+    }
+  }
+  return searchParams.toString();
+}
+
+export const serviceTargetFromQueryParams = <
+  Key extends keyof HassServiceTarget & string,
+>(
+  params: ServiceTargetQueryParams<Key>,
+  keys: readonly Key[]
+): HassServiceTarget | undefined => {
+  if (!keys.some((key) => params[key])) {
+    return undefined;
+  }
+  const target: HassServiceTarget = {};
+  for (const key of keys) {
+    const value = params[key];
+    if (value) {
+      target[key] = value;
+    }
+  }
+  return target;
+};
+
+export const queryParamsFromServiceTarget = <
+  Key extends keyof HassServiceTarget & string,
+>(
+  target: HassServiceTarget,
+  keys: readonly Key[]
+): ServiceTargetQueryParams<Key> => {
+  const params: ServiceTargetQueryParams<Key> = {};
+  for (const key of keys) {
+    const value = target[key];
+    if (value) {
+      params[key] = ensureArray(value);
+    }
+  }
+  return params;
+};
@@ -0,0 +1,21 @@
+import {
+  createQueryString,
+  decodeQueryParams,
+  type QueryParamConfig,
+  type QueryParamValues,
+  type SearchParamsSource,
+} from "./query-params";
+
+export const todoQueryParamConfig = {
+  string: ["entity_id"],
+  boolean: [{ key: "add_item", trueValue: "true" }],
+} as const satisfies QueryParamConfig;
+
+export type TodoQueryParams = QueryParamValues<typeof todoQueryParamConfig>;
+
+export const decodeTodoQueryParams = (
+  searchParams: SearchParamsSource
+): TodoQueryParams => decodeQueryParams(searchParams, todoQueryParamConfig);
+
+export const createTodoQueryString = (values: TodoQueryParams): string =>
+  createQueryString(values, todoQueryParamConfig);
@@ -11,6 +11,12 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
  }

  const root = rootEl || deepActiveElement()?.getRootNode() || document.body;
+  // A document node cannot have a textarea appended directly (only the single
+  // documentElement is allowed), so fall back to its body. Shadow roots and
+  // elements can hold the textarea directly, which keeps execCommand working
+  // inside dialogs that trap focus.
+  const container: Node =
+    root.nodeType === Node.DOCUMENT_NODE ? document.body : root;

  const el = document.createElement("textarea");
  el.value = str;
@@ -19,8 +25,8 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
  el.style.top = "0";
  el.style.left = "0";
  el.style.opacity = "0";
-  root.appendChild(el);
+  container.appendChild(el);
  el.select();
  document.execCommand("copy");
-  root.removeChild(el);
+  container.removeChild(el);
 };
@@ -0,0 +1,30 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
+import type { ReactiveControllerHost } from "lit";
+import { clamp } from "../number/clamp";
+
+// Count columns from the container's real width (not the viewport) so a
+// docked sidebar is accounted for, like the dashboard sections view.
+const MIN_COLUMN_WIDTH = 320;
+const DEFAULT_COLUMN_GAP = 16;
+
+const parsePx = (value: string) => parseInt(value, 10) || 0;
+
+export const createColumnsController = (
+  host: ReactiveControllerHost & Element,
+  maxColumns: number
+) =>
+  new ResizeController<number>(host, {
+    target: null,
+    skipInitial: true,
+    callback: (entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return maxColumns;
+      }
+      const width = entry.contentRect.width;
+      const gap =
+        parsePx(getComputedStyle(entry.target).columnGap) || DEFAULT_COLUMN_GAP;
+      const columns = Math.floor((width + gap) / (MIN_COLUMN_WIDTH + gap));
+      return clamp(columns, 1, maxColumns);
+    },
+  });
@@ -0,0 +1,144 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { debounce } from "../../common/util/debounce";
+import type { Condition } from "../../data/automation";
+import { subscribeCondition } from "../../data/automation";
+import type { HomeAssistant } from "../../types";
+import "../ha-tooltip";
+import "./ha-automation-row-live-test";
+import type { LiveTestState } from "./ha-automation-row-live-test";
+
+@customElement("ha-automation-condition-live-test")
+export class HaAutomationConditionLiveTest extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public condition!: Condition;
+
+  @state() private _liveTestResult: {
+    state: LiveTestState;
+    message?: string;
+  } = { state: "unknown" };
+
+  private _conditionUnsub?: Promise<UnsubscribeFunc>;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._subscribeCondition();
+  }
+
+  protected override updated(changedProps: PropertyValues<this>): void {
+    super.updated(changedProps);
+    if (
+      changedProps.has("condition") &&
+      changedProps.get("condition") !== undefined
+    ) {
+      this._resetSubscription();
+      this._debounceSubscribeCondition();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._debounceSubscribeCondition.cancel();
+    this._resetSubscription();
+  }
+
+  protected render() {
+    return html`
+      <div id="indicator">
+        <slot></slot>
+        <ha-automation-row-live-test
+          .state=${this._liveTestResult.state}
+          .label=${this.hass.localize(
+            `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
+          )}
+        ></ha-automation-row-live-test>
+      </div>
+      ${this._liveTestResult.message
+        ? html`<ha-tooltip for="indicator"
+            >${this._liveTestResult.message}</ha-tooltip
+          >`
+        : nothing}
+    `;
+  }
+
+  private _resetSubscription() {
+    this._liveTestResult = {
+      state: "unknown",
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
+      ),
+    };
+    if (this._conditionUnsub) {
+      this._conditionUnsub.then((unsub) => unsub());
+      this._conditionUnsub = undefined;
+    }
+  }
+
+  private _debounceSubscribeCondition = debounce(
+    () => this._subscribeCondition(),
+    500
+  );
+
+  private async _subscribeCondition() {
+    this._resetSubscription();
+
+    if (!this.condition) {
+      return;
+    }
+
+    const conditionUnsub = subscribeCondition(
+      this.hass.connection,
+      (result) => {
+        if (result.error) {
+          this._handleLiveTestError(result.error);
+        } else {
+          this._liveTestResult = {
+            state: result.result ? "pass" : "fail",
+            message: this.hass.localize(
+              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
+            ),
+          };
+        }
+      },
+      this.condition
+    );
+    conditionUnsub.catch((err: any) => {
+      this._handleLiveTestError(err);
+      if (this._conditionUnsub === conditionUnsub) {
+        this._conditionUnsub = undefined;
+      }
+    });
+    this._conditionUnsub = conditionUnsub;
+  }
+
+  private _handleLiveTestError(error: any) {
+    const invalid =
+      typeof error !== "string" && error.code === "invalid_format";
+    this._liveTestResult = {
+      state: invalid ? "invalid" : "unknown",
+      message: this.hass.localize(
+        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
+      ),
+    };
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+    #indicator {
+      display: inline-flex;
+      position: relative;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-live-test": HaAutomationConditionLiveTest;
+  }
+}
@@ -161,6 +161,8 @@ export class HaAutomationRow extends LitElement {
    }
    .leading-icon-wrapper {
      padding-top: var(--ha-space-3);
+      position: relative;
+      z-index: 1;
    }
    ::slotted([slot="leading-icon"]) {
      color: var(--ha-color-on-neutral-quiet);
@@ -1,5 +1,23 @@
 import type { LineSeriesOption } from "echarts";

+type Point = NonNullable<LineSeriesOption["data"]>[number];
+
+interface MeanFrame {
+  sumX: number;
+  sumY: number;
+  count: number;
+  isArray: boolean;
+}
+
+interface MinMaxFrame {
+  minPoint: Point;
+  minX: number;
+  minY: number;
+  maxPoint: Point;
+  maxX: number;
+  maxY: number;
+}
+
 export function downSampleLineData<
  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -19,11 +37,47 @@ export function downSampleLineData<
  const max = maxX ?? getPointData(data[data.length - 1]!)[0];
  const step = Math.ceil((max - min) / Math.floor(maxDetails));

-  // Group points into frames
-  const frames = new Map<
-    number,
-    { point: (typeof data)[number]; x: number; y: number }[]
-  >();
+  if (useMean) {
+    // Group points into frames, accumulating sums in insertion order.
+    const frames = new Map<number, MeanFrame>();
+
+    for (const point of data) {
+      const pointData = getPointData(point);
+      if (!Array.isArray(pointData)) continue;
+      const x = Number(pointData[0]);
+      const y = Number(pointData[1]);
+      if (isNaN(x) || isNaN(y)) continue;
+
+      const frameIndex = Math.floor((x - min) / step);
+      const frame = frames.get(frameIndex);
+      if (!frame) {
+        frames.set(frameIndex, {
+          sumX: x,
+          sumY: y,
+          count: 1,
+          isArray: Array.isArray(pointData),
+        });
+      } else {
+        frame.sumX += x;
+        frame.sumY += y;
+        frame.count += 1;
+      }
+    }
+
+    const result: T[] = [];
+    for (const frame of frames.values()) {
+      const meanX = frame.sumX / frame.count;
+      const meanY = frame.sumY / frame.count;
+      const meanPoint = (
+        frame.isArray ? [meanX, meanY] : { value: [meanX, meanY] }
+      ) as T;
+      result.push(meanPoint);
+    }
+    return result;
+  }
+
+  // Min/max mode: track the min and max point per frame in insertion order.
+  const frames = new Map<number, MinMaxFrame>();

  for (const point of data) {
    const pointData = getPointData(point);
@@ -35,53 +89,39 @@ export function downSampleLineData<
    const frameIndex = Math.floor((x - min) / step);
    const frame = frames.get(frameIndex);
    if (!frame) {
-      frames.set(frameIndex, [{ point, x, y }]);
+      frames.set(frameIndex, {
+        minPoint: point,
+        minX: x,
+        minY: y,
+        maxPoint: point,
+        maxX: x,
+        maxY: y,
+      });
    } else {
-      frame.push({ point, x, y });
+      // Match the original strict-less / strict-greater comparisons so the
+      // first occurrence wins on ties.
+      if (y < frame.minY) {
+        frame.minPoint = point;
+        frame.minX = x;
+        frame.minY = y;
+      }
+      if (y > frame.maxY) {
+        frame.maxPoint = point;
+        frame.maxX = x;
+        frame.maxY = y;
+      }
    }
  }

-  // Convert frames back to points
  const result: T[] = [];
-
-  if (useMean) {
-    // Use mean values for each frame
-    for (const [_i, framePoints] of frames) {
-      const sumY = framePoints.reduce((acc, p) => acc + p.y, 0);
-      const meanY = sumY / framePoints.length;
-      const sumX = framePoints.reduce((acc, p) => acc + p.x, 0);
-      const meanX = sumX / framePoints.length;
-
-      const firstPoint = framePoints[0].point;
-      const pointData = getPointData(firstPoint);
-      const meanPoint = (
-        Array.isArray(pointData) ? [meanX, meanY] : { value: [meanX, meanY] }
-      ) as T;
-      result.push(meanPoint);
+  for (const frame of frames.values()) {
+    // The order of the data must be preserved so max may be before min
+    if (frame.minX > frame.maxX) {
+      result.push(frame.maxPoint as T);
    }
-  } else {
-    // Use min/max values for each frame
-    for (const [_i, framePoints] of frames) {
-      let minPoint = framePoints[0];
-      let maxPoint = framePoints[0];
-
-      for (const p of framePoints) {
-        if (p.y < minPoint.y) {
-          minPoint = p;
-        }
-        if (p.y > maxPoint.y) {
-          maxPoint = p;
-        }
-      }
-
-      // The order of the data must be preserved so max may be before min
-      if (minPoint.x > maxPoint.x) {
-        result.push(maxPoint.point);
-      }
-      result.push(minPoint.point);
-      if (minPoint.x < maxPoint.x) {
-        result.push(maxPoint.point);
-      }
+    result.push(frame.minPoint as T);
+    if (frame.minX < frame.maxX) {
+      result.push(frame.maxPoint as T);
    }
  }

@@ -394,6 +394,18 @@ export class HaChartBase extends LitElement {
      return nothing;
    }
    const datasets = ensureArray(this.data!);
+    // Index datasets by id and name so each legend item is an O(1) lookup
+    // instead of scanning every dataset twice. Charts can have many series.
+    const datasetById = new Map<unknown, (typeof datasets)[number]>();
+    const datasetByName = new Map<unknown, (typeof datasets)[number]>();
+    for (const dataset of datasets) {
+      if (dataset.id !== undefined && !datasetById.has(dataset.id)) {
+        datasetById.set(dataset.id, dataset);
+      }
+      if (dataset.name !== undefined && !datasetByName.has(dataset.name)) {
+        datasetByName.set(dataset.name, dataset);
+      }
+    }

    const isMobile = window.matchMedia(
      "all and (max-width: 450px), all and (max-height: 500px)"
@@ -413,10 +425,10 @@ export class HaChartBase extends LitElement {
            return nothing;
          }
          let itemStyle: Record<string, any> = {};
-          let id = "";
          let value = "";
          let noLabelClick = false;
          const name = typeof item === "string" ? item : (item.name ?? "");
+          let id: string;
          if (typeof item === "string") {
            id = item;
          } else {
@@ -426,9 +438,7 @@ export class HaChartBase extends LitElement {
            noLabelClick = item.noLabelClick ?? false;
          }
          const labelClickable = this.clickLabelForMoreInfo && !noLabelClick;
-          const dataset =
-            datasets.find((d) => d.id === id) ??
-            datasets.find((d) => d.name === id);
+          const dataset = datasetById.get(id) ?? datasetByName.get(id);
          itemStyle = {
            color: dataset?.color as string,
            ...(dataset?.itemStyle as { borderColor?: string }),
@@ -1520,7 +1530,9 @@ export class HaChartBase extends LitElement {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
-      line-height: 1;
+      /* overflow: hidden clips descenders (e.g. "g", parentheses) with a tight
+         line-height, so give the line box room to contain them */
+      line-height: var(--ha-line-height-condensed);
    }
    @media (hover: hover) {
      .chart-legend .label.clickable:hover {
@@ -1558,6 +1570,25 @@ export class HaChartBase extends LitElement {
    .chart-legend .legend-toggle ha-svg-icon {
      --mdc-icon-size: 18px;
    }
+    /* On touch devices, enlarge the toggle tap target via taller rows and
+       leading padding (which also separates it from the previous item), while
+       keeping the icon tight to its own label so the pairing stays clear.
+       Drop the now-pointless row gap and li padding. */
+    @media (pointer: coarse) {
+      .chart-legend ul {
+        row-gap: 0;
+      }
+      /* Only grow the toggle rows, not the expand/collapse chip's row. */
+      .chart-legend li:has(.legend-toggle) {
+        height: 40px;
+        padding: 0;
+      }
+      .chart-legend .legend-toggle {
+        padding: 11px;
+        padding-inline-end: 4px;
+        margin: 0;
+      }
+    }
    ha-assist-chip {
      height: 100%;
      --_label-text-weight: 500;
@@ -147,6 +147,14 @@ export class StateHistoryChartLine extends LitElement {
      this.hass.config
    );
    const datapoints: Record<string, any>[] = [];
+    // Index the hovered points by series so the per-dataset lookup below is
+    // O(1) instead of scanning `params` for every dataset on each mouse move.
+    const paramsBySeriesIndex = new Map<number, Record<string, any>>();
+    for (const p of params) {
+      if (!paramsBySeriesIndex.has(p.seriesIndex)) {
+        paramsBySeriesIndex.set(p.seriesIndex, p);
+      }
+    }
    this._chartData.forEach((dataset, index) => {
      if (
        dataset.tooltip?.show === false ||
@@ -154,9 +162,7 @@ export class StateHistoryChartLine extends LitElement {
      ) {
        return;
      }
-      const param = params.find(
-        (p: Record<string, any>) => p.seriesIndex === index
-      );
+      const param = paramsBySeriesIndex.get(index);
      if (param) {
        datapoints.push(param);
        return;
@@ -440,6 +446,10 @@ export class StateHistoryChartLine extends LitElement {

    this._chartTime = new Date();
    const endTime = this.endTime;
+    // Work with numeric epoch timestamps (ms) instead of Date objects below.
+    // Charts can hold a huge number of points, and allocating a Date per point
+    // is needless GC pressure; the "time" axis consumes numbers natively.
+    const endTimeMs = endTime.getTime();
    const names = this.names || {};
    const colors = this.colors || {};
    entityStates.forEach((states, dataIdx) => {
@@ -451,9 +461,9 @@ export class StateHistoryChartLine extends LitElement {

      const data: LineSeriesOption[] = [];

-      const pushData = (timestamp: Date, datavalues: any[] | null) => {
+      const pushData = (timestamp: number, datavalues: any[] | null) => {
        if (!datavalues) return;
-        if (timestamp > endTime) {
+        if (timestamp > endTimeMs) {
          // Drop data points that are after the requested endTime. This could happen if
          // endTime is "now" and client time is not in sync with server time.
          return;
@@ -624,11 +634,11 @@ export class StateHistoryChartLine extends LitElement {
              entityState.attributes.target_temp_low
            );
            series.push(targetHigh, targetLow);
-            pushData(new Date(entityState.last_changed), series);
+            pushData(entityState.last_changed, series);
          } else {
            const target = safeParseFloat(entityState.attributes.temperature);
            series.push(target);
-            pushData(new Date(entityState.last_changed), series);
+            pushData(entityState.last_changed, series);
          }
        });
      } else if (domain === "humidifier") {
@@ -746,31 +756,27 @@ export class StateHistoryChartLine extends LitElement {
          } else {
            series.push(entityState.state === "on" ? current : null);
          }
-          pushData(new Date(entityState.last_changed), series);
+          pushData(entityState.last_changed, series);
        });
      } else {
        addDataSet(states.entity_id, name, color);

        let lastValue: number;
-        let lastDate: Date;
-        let lastNullDate: Date | null = null;
+        let lastDate: number;
+        let lastNullDate: number | null = null;

        // Process chart data.
        // When state is `unknown`, calculate the value and break the line.
        const processData = (entityState: LineChartState) => {
          const value = safeParseFloat(entityState.state);
-          const date = new Date(entityState.last_changed);
+          const date = entityState.last_changed;
          if (value !== null && lastNullDate) {
-            const dateTime = date.getTime();
-            const lastNullDateTime = lastNullDate.getTime();
-            const lastDateTime = lastDate?.getTime();
            const tmpValue =
              (value - lastValue) *
-                ((lastNullDateTime - lastDateTime) /
-                  (dateTime - lastDateTime)) +
+                ((lastNullDate - lastDate) / (date - lastDate)) +
              lastValue;
            pushData(lastNullDate, [tmpValue]);
-            pushData(new Date(lastNullDateTime + 1), [null]);
+            pushData(lastNullDate + 1, [null]);
            pushData(date, [value]);
            lastDate = date;
            lastValue = value;
@@ -809,17 +815,17 @@ export class StateHistoryChartLine extends LitElement {
      }

      // Add an entry for final values
-      pushData(endTime, prevValues);
+      pushData(endTimeMs, prevValues);

      // For sensors, append current state if viewing recent data
-      const now = new Date();
+      const nowMs = Date.now();
      // allow 1s of leeway for "now"
-      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      const isUpToNow = nowMs - endTimeMs <= 1000;
      if (domain === "sensor" && isUpToNow && data.length === 1) {
        const stateObj = this.hass.states[states.entity_id];
        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
        if (currentValue !== null) {
-          data[0].data!.push([now, currentValue]);
+          data[0].data!.push([nowMs, currentValue]);
          trackY(currentValue);
        }
      }
@@ -162,7 +162,7 @@ export class HaDataTable extends LitElement {

  @state() private _filter = "";

-  @state() private _filteredData: DataTableRowData[] = [];
+  @state() private _filteredData?: DataTableRowData[];

  @state() private _headerHeight = 0;

@@ -204,7 +204,7 @@ export class HaDataTable extends LitElement {
  }

  public selectAll(): void {
-    this._checkedRows = this._filteredData
+    this._checkedRows = (this._filteredData || [])
      .filter((data) => data.selectable !== false)
      .map((data) => data[this.id]);
    this._lastSelectedRowId = null;
@@ -215,10 +215,16 @@ export class HaDataTable extends LitElement {
    if (clear) {
      this._checkedRows = [];
    }
+    // Map + Set keep a large selection O(rows + ids) instead of O(rows × ids).
+    const rowLookup = new Map(
+      (this._filteredData || []).map((data) => [data[this.id], data])
+    );
+    const checkedRows = new Set(this._checkedRows);
    ids.forEach((id) => {
-      const row = this._filteredData.find((data) => data[this.id] === id);
-      if (row?.selectable !== false && !this._checkedRows.includes(id)) {
+      const row = rowLookup.get(id);
+      if (row?.selectable !== false && !checkedRows.has(id)) {
        this._checkedRows.push(id);
+        checkedRows.add(id);
      }
    });
    this._lastSelectedRowId = null;
@@ -238,7 +244,7 @@ export class HaDataTable extends LitElement {

  public connectedCallback() {
    super.connectedCallback();
-    if (this._filteredData.length) {
+    if (this._filteredData?.length) {
      // Force update of location of rows
      this._filteredData = [...this._filteredData];
    }
@@ -366,7 +372,10 @@ export class HaDataTable extends LitElement {
      this._lastSelectedRowId = null;
    }

-    if (properties.has("selectable") || properties.has("hiddenColumns")) {
+    if (
+      this._filteredData &&
+      (properties.has("selectable") || properties.has("hiddenColumns"))
+    ) {
      this._filteredData = [...this._filteredData];
    }
  }
@@ -409,6 +418,8 @@ export class HaDataTable extends LitElement {
    const renderRow = (row: DataTableRowData, index: number) =>
      this._renderRow(columns, this.narrow, row, index);

+    const filteredDataLength = this._filteredData?.length || 0;
+
    return html`
      <div class="mdc-data-table">
        <slot name="header" @slotchange=${this._calcTableHeight}>
@@ -429,10 +440,10 @@ export class HaDataTable extends LitElement {
            "auto-height": this.autoHeight,
          })}"
          role="table"
-          aria-rowcount=${this._filteredData.length + 1}
+          aria-rowcount=${filteredDataLength + 1}
          style=${styleMap({
            height: this.autoHeight
-              ? `${(this._filteredData.length || 1) * 53 + 53}px`
+              ? `${(filteredDataLength || 1) * 53 + 53}px`
              : `calc(100% - ${this._headerHeight}px)`,
          })}
        >
@@ -521,16 +532,23 @@ export class HaDataTable extends LitElement {
              })}
            </slot>
          </div>
-          ${!this._filteredData.length
+          ${!this._filteredData?.length
            ? html`
                <div class="mdc-data-table__content">
                  <div class="mdc-data-table__row" role="row">
                    <div class="mdc-data-table__cell grows center" role="cell">
-                      ${this.noDataText ||
-                      this._i18n?.localize?.(
-                        "ui.components.data-table.no-data"
-                      ) ||
-                      "No data"}
+                      ${!this._filteredData
+                        ? this._i18n?.localize?.("ui.common.loading") ||
+                          "Loading"
+                        : this.data.length
+                          ? this._i18n?.localize?.(
+                              "ui.components.data-table.no_match_filter"
+                            ) || "No rows matching current filters"
+                          : this.noDataText ||
+                            this._i18n?.localize?.(
+                              "ui.components.data-table.no-data"
+                            ) ||
+                            "No data"}
                    </div>
                  </div>
                </div>
@@ -903,7 +921,7 @@ export class HaDataTable extends LitElement {
    const rowId = checkboxElement.rowId;

    const groupedData = this._groupData(
-      this._filteredData,
+      this._filteredData || [],
      this._i18n?.localize,
      this._i18n?.locale,
      this.appendRow,
@@ -1005,7 +1023,7 @@ export class HaDataTable extends LitElement {

  private _checkedRowsChanged() {
    // force scroller to update, change it's items
-    if (this._filteredData.length) {
+    if (this._filteredData?.length) {
      this._filteredData = [...this._filteredData];
    }
    fireEvent(this, "selection-changed", {
@@ -1465,6 +1483,11 @@ export class HaDataTable extends LitElement {
        .mdc-data-table__table.auto-height .scroller {
          overflow-y: hidden !important;
        }
+
+        .mdc-data-table__table.auto-height lit-virtualizer {
+          overscroll-behavior-y: auto;
+        }
+
        .grows {
          flex-grow: 1;
          flex-shrink: 1;
@@ -115,6 +115,20 @@ export class HaEntityStatePicker extends LitElement {
    return html`<span slot="headline">${item?.primary ?? value}</span>`;
  };

+  private _computeDefaultLabel(): string {
+    // When an attribute is configured, default to the attribute's friendly
+    // name (e.g. "Source") instead of the generic "State". Requires a concrete
+    // entity to resolve the translated name; otherwise fall back to "State".
+    if (this.attribute && this.entityId) {
+      const entityId = ensureArray(this.entityId)[0];
+      const stateObj = entityId ? this.hass.states[entityId] : undefined;
+      if (stateObj) {
+        return this.hass.formatEntityAttributeName(stateObj, this.attribute);
+      }
+    }
+    return this.hass.localize("ui.components.entity.entity-state-picker.state");
+  }
+
  protected render() {
    if (!this.hass) {
      return nothing;
@@ -129,8 +143,7 @@ export class HaEntityStatePicker extends LitElement {
        .disabled=${this.disabled || noEntity}
        .autofocus=${this.autofocus}
        .required=${this.required}
-        .label=${this.label ??
-        this.hass.localize("ui.components.entity.entity-state-picker.state")}
+        .label=${this.label ?? this._computeDefaultLabel()}
        .helper=${this.helper}
        .value=${this.value}
        .getItems=${this._getFilteredItems}
@@ -112,12 +112,16 @@ export class HaCameraStream extends LitElement {
      return nothing;
    }
    if (stream.type === MJPEG_STREAM) {
+      const streamUrl = __DEMO__
+        ? this.stateObj.attributes.entity_picture
+        : this._connected
+          ? computeMJPEGStreamUrl(this.stateObj)
+          : this._posterUrl;
+      if (!streamUrl) {
+        return nothing;
+      }
      return html`<img
-        .src=${__DEMO__
-          ? this.stateObj.attributes.entity_picture!
-          : this._connected
-            ? computeMJPEGStreamUrl(this.stateObj)
-            : this._posterUrl || ""}
+        .src=${streamUrl}
        style=${styleMap({
          aspectRatio: this.aspectRatio,
          objectFit: this.fitMode,
@@ -1600,8 +1600,8 @@ export class HaCodeEditor extends ReactiveElement {
          // Filter states based on what's typed
          const filteredStates = typedText
            ? states.filter((entityState) =>
-                entityState.label
-                  .toLowerCase()
+                entityState.displayLabel
+                  ?.toLowerCase()
                  .startsWith(typedText.toLowerCase())
              )
            : states;
@@ -1658,8 +1658,8 @@ export class HaCodeEditor extends ReactiveElement {
              // Filter states based on what's typed
              const filteredStates = typedText
                ? states.filter((entityState) =>
-                    entityState.label
-                      .toLowerCase()
+                    entityState.displayLabel
+                      ?.toLowerCase()
                      .startsWith(typedText.toLowerCase())
                  )
                : states;
@@ -183,6 +183,7 @@ export class HaControlSelectMenu extends LitElement {
        gap: 10px;
        width: 100%;
        user-select: none;
+        font-family: var(--ha-font-family-body, inherit);
        font-style: normal;
        font-weight: var(--ha-font-weight-normal);
        letter-spacing: 0.25px;
@@ -12,6 +12,20 @@ import type {
  HaFormSelectSchema,
 } from "./types";

+/**
+ * The underlying select returns option values as strings. Map a selected value
+ * back to its original option value so the source type is retained (for example
+ * a number coming from a backend `vol.In` schema), falling back to the value
+ * itself when no option matches.
+ */
+export const matchSelectOptionValue = (
+  options: HaFormSelectSchema["options"],
+  value: string
+): HaFormSelectData => {
+  const option = options.find((opt) => String(opt[0]) === String(value));
+  return option ? option[0] : value;
+};
+
@customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -66,14 +80,16 @@ export class HaFormSelect extends LitElement implements HaFormElement {

  private _valueChanged(ev: CustomEvent) {
    ev.stopPropagation();
-    let value: string | undefined = ev.detail.value;
-
-    if (value === this.data) {
-      return;
-    }
+    let value: HaFormSelectData | undefined = ev.detail.value;

    if (value === "") {
      value = undefined;
+    } else if (value != null) {
+      value = matchSelectOptionValue(this.schema.options, value);
+    }
+
+    if (value === this.data) {
+      return;
    }

    fireEvent(this, "value-changed", {
@@ -41,6 +41,8 @@ const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
    ),
  esphome: () =>
    import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
+  matter: () =>
+    import("../resources/matter-logo-svg").then((mod) => mod.mdiMatterLogo),
 };

@customElement("ha-icon")
@@ -354,7 +354,9 @@ export class HaSerialPortSelector extends LitElement {
  }

  private get _selectorDomain(): string | undefined {
-    return this.context?.handler;
+    // `domain` is the integration domain even in options flows, where the flow
+    // handler is the config entry id instead.
+    return this.context?.domain;
  }

  private _memoRecommendedDomains = memoizeOne(
@@ -170,6 +170,9 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
  @property({ attribute: "always-expand", type: Boolean })
  public alwaysExpand = false;

+  @property({ attribute: "sidebar-title" }) public sidebarTitle =
+    "Home Assistant";
+
  @state() private _notifications?: PersistentNotification[];

  @state() private _updatesCount = 0;
@@ -346,8 +349,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
              @action=${this._toggleSidebar}
            ></ha-icon-button>
          `
-        : ""}
-      <div class="title">Home Assistant</div>
+        : nothing}
+      <div class="title">${this.sidebarTitle}</div>
    </div>`;
  }

@@ -362,16 +365,28 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
      >`;

    if (!this._panelOrder || !this._hiddenPanels) {
-      return html`
-        <ha-fade-in .delay=${500}>
-          <ha-spinner size="small"></ha-spinner>
-        </ha-fade-in>
+      return html`<div class="panels-list">
+        <div class="wrapper">
+          ${renderList(
+            html`<slot name="main-navigation">
+              <ha-fade-in .delay=${500}>
+                <ha-spinner size="small"></ha-spinner>
+              </ha-fade-in>
+            </slot>`,
+            "before-spacer",
+            true
+          )}
+          ${this.renderScrollableFades()}
+        </div>
+        ${this._renderSpacer()}
        ${renderList(
-          html`${this._renderFixedPanels(selectedPanel)}`,
+          html`<slot name="fixed-navigation">
+            ${this._renderFixedPanels(selectedPanel)}
+          </slot>`,
          "after-spacer",
          false
        )}
-      `;
+      </div>`;
    }

    const defaultPanel = getDefaultPanelUrlPath(this.hass);
@@ -388,7 +403,9 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
    return html`<div class="panels-list">
      <div class="wrapper">
        ${renderList(
-      this._renderPanels(beforeSpacer, selectedPanel),
+      html`<slot name="main-navigation">
+        ${this._renderPanels(beforeSpacer, selectedPanel)}
+      </slot>`,
      "before-spacer",
      true
    )}
@@ -396,10 +413,10 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
      </div>
      ${this._renderSpacer()}
      ${renderList(
-      html`
+      html`<slot name="fixed-navigation">
          ${this._renderPanels(afterSpacer, selectedPanel)}
          ${this._renderFixedPanels(selectedPanel)}
-        `,
+        </slot>`,
      "after-spacer",
      false
    )}
@@ -541,7 +558,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
      >
        <ha-user-badge slot="start" .user=${this.hass.user}></ha-user-badge>
        <span class="item-text" slot="headline"
-          >${this.hass.user ? this.hass.user.name : ""}</span
+          >${this.hass.user ? this.hass.user.name : nothing}</span
        >
      </ha-list-item-button>
      ${!this.alwaysExpand && this.hass.user
@@ -665,7 +682,10 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
          transition: width var(--ha-animation-duration-normal) ease;
        }
        :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left, 0px));
+          width: calc(
+            var(--ha-sidebar-expanded-width, 256px) +
+              var(--safe-area-inset-left, 0px)
+          );
        }
        :host([narrow][expanded]) .menu {
          width: 100%;
@@ -748,7 +768,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
          color: var(--sidebar-text-color);
        }
        :host([expanded]) ha-list-item-button {
-          width: 248px;
+          width: var(--ha-sidebar-expanded-item-width, 248px);
        }
        :host([narrow][expanded]) ha-list-item-button {
          width: calc(240px - var(--safe-area-inset-left, 0px));
@@ -258,6 +258,14 @@ export class HaTextArea extends WaInputMixin(LitElement) {
        overflow-y: auto;
      }

+      /* The size-adjuster shares a grid cell with the textarea and is given an
+         inline height matching the content's scrollHeight. Without capping it
+         too, it inflates the grid row past the max-height and pushes the
+         textarea down instead of scrolling. */
+      :host([resize="auto"]) wa-textarea::part(textarea-adjuster) {
+        max-height: var(--ha-textarea-max-height, 200px);
+      }
+
      wa-textarea:hover::part(base),
      wa-textarea:hover::part(label) {
        background-color: var(--ha-color-form-background-hover);
@@ -0,0 +1,255 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { normalizeLuminance } from "../common/color/palette";
+import { fireEvent } from "../common/dom/fire_event";
+import {
+  DefaultAccentColor,
+  DefaultPrimaryColor,
+} from "../resources/theme/color/color.globals";
+import type { HomeAssistant, ThemeSettings, ValueChangedEvent } from "../types";
+import "./ha-button";
+import "./ha-settings-row";
+import "./ha-theme-picker";
+import "./input/ha-input";
+import "./radio/ha-radio-group";
+import type { HaRadioGroup } from "./radio/ha-radio-group";
+import "./radio/ha-radio-option";
+
+const HOME_ASSISTANT_THEME = "default";
+
+export interface ThemeSettingsLabels {
+  theme?: string;
+  noTheme?: string;
+  mode?: string;
+  autoMode?: string;
+  lightMode?: string;
+  darkMode?: string;
+  primaryColor?: string;
+  accentColor?: string;
+  reset?: string;
+}
+
+@customElement("ha-theme-settings")
+export class HaThemeSettings extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selectedTheme?: ThemeSettings | null;
+
+  @property({ attribute: false }) public labels?: ThemeSettingsLabels;
+
+  @property({ attribute: false }) public description?: TemplateResult | string;
+
+  @property() public heading?: string;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ attribute: "include-default", type: Boolean })
+  public includeDefault = false;
+
+  @property({ attribute: "show-theme-picker", type: Boolean })
+  public showThemePicker = true;
+
+  @property({ attribute: "theme-picker-disabled", type: Boolean })
+  public themePickerDisabled = false;
+
+  protected render(): TemplateResult {
+    const themeSettings = this.selectedTheme ?? this.hass.selectedTheme;
+    const curThemeIsUseDefault = themeSettings?.theme === "";
+    const curTheme = themeSettings?.theme
+      ? themeSettings.theme
+      : this.hass.themes.darkMode
+        ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
+        : this.hass.themes.default_theme;
+
+    return html`
+      <ha-settings-row .narrow=${this.narrow} ?empty=${!this.showThemePicker}>
+        ${this.heading
+          ? html`<span slot="heading">${this.heading}</span>`
+          : nothing}
+        ${this.description
+          ? html`<span slot="description">${this.description}</span>`
+          : nothing}
+        ${this.showThemePicker
+          ? html`
+              <ha-theme-picker
+                .hass=${this.hass}
+                .label=${this.labels?.theme}
+                .noThemeLabel=${this.labels?.noTheme}
+                .value=${themeSettings?.theme || undefined}
+                .disabled=${this.themePickerDisabled}
+                ?include-default=${this.includeDefault}
+                @value-changed=${this._handleThemeSelection}
+              ></ha-theme-picker>
+            `
+          : nothing}
+      </ha-settings-row>
+      ${curTheme === HOME_ASSISTANT_THEME ||
+      (curThemeIsUseDefault &&
+        this.hass.themes.default_dark_theme &&
+        this.hass.themes.default_theme) ||
+      this._supportsModeSelection(curTheme)
+        ? html`<div class="inputs">
+            <ha-radio-group
+              @change=${this._handleDarkMode}
+              name="dark_mode"
+              .ariaLabel=${this.labels?.mode ?? "Theme mode"}
+              .value=${themeSettings?.dark === undefined
+                ? "auto"
+                : themeSettings.dark
+                  ? "dark"
+                  : "light"}
+              orientation="horizontal"
+            >
+              <ha-radio-option value="auto">
+                ${this.labels?.autoMode ?? "Auto"}
+              </ha-radio-option>
+              <ha-radio-option value="light">
+                ${this.labels?.lightMode ?? "Light"}
+              </ha-radio-option>
+              <ha-radio-option value="dark">
+                ${this.labels?.darkMode ?? "Dark"}
+              </ha-radio-option>
+            </ha-radio-group>
+            ${curTheme === HOME_ASSISTANT_THEME
+              ? html`<div class="color-pickers">
+                  <ha-input
+                    .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
+                    type="color"
+                    .label=${this.labels?.primaryColor ?? "Primary color"}
+                    .name=${"primaryColor"}
+                    @change=${this._handleColorChange}
+                  ></ha-input>
+                  <ha-input
+                    .value=${themeSettings?.accentColor || DefaultAccentColor}
+                    type="color"
+                    .label=${this.labels?.accentColor ?? "Accent color"}
+                    .name=${"accentColor"}
+                    @change=${this._handleColorChange}
+                  ></ha-input>
+                  ${themeSettings?.primaryColor || themeSettings?.accentColor
+                    ? html` <ha-button
+                        appearance="plain"
+                        size="s"
+                        @click=${this._resetColors}
+                      >
+                        ${this.labels?.reset ?? "Reset"}
+                      </ha-button>`
+                    : nothing}
+                </div>`
+              : nothing}
+          </div>`
+        : nothing}
+    `;
+  }
+
+  private _handleColorChange(ev: Event) {
+    const target = ev.currentTarget as HTMLInputElement;
+    const value =
+      target.name === "primaryColor"
+        ? normalizeLuminance(target.value)
+        : target.value;
+
+    target.value = value;
+    fireEvent(this, "theme-settings-changed", {
+      [target.name]: value,
+    } as Partial<ThemeSettings>);
+  }
+
+  private _resetColors() {
+    fireEvent(this, "theme-settings-changed", {
+      primaryColor: undefined,
+      accentColor: undefined,
+    });
+  }
+
+  private _supportsModeSelection(themeName: string): boolean {
+    const theme = this.hass.themes.themes[themeName];
+    if (!theme) {
+      return false;
+    }
+
+    return !!(theme.modes && "light" in theme.modes && "dark" in theme.modes);
+  }
+
+  private _handleDarkMode(ev: Event) {
+    let dark: boolean | undefined;
+    switch ((ev.currentTarget as HaRadioGroup).value) {
+      case "light":
+        dark = false;
+        break;
+      case "dark":
+        dark = true;
+        break;
+    }
+    fireEvent(this, "theme-settings-changed", { dark });
+  }
+
+  private _handleThemeSelection(
+    ev: ValueChangedEvent<string | undefined>
+  ): void {
+    ev.stopPropagation();
+    const theme = ev.detail.value;
+
+    if (theme === undefined) {
+      if (this.selectedTheme?.theme || this.hass.selectedTheme?.theme) {
+        fireEvent(this, "theme-settings-changed", {
+          theme: "",
+          primaryColor: undefined,
+          accentColor: undefined,
+        });
+      }
+      return;
+    }
+
+    if (theme === (this.selectedTheme ?? this.hass.selectedTheme)?.theme) {
+      return;
+    }
+
+    fireEvent(this, "theme-settings-changed", {
+      theme,
+      primaryColor: undefined,
+      accentColor: undefined,
+    });
+  }
+
+  static styles = css`
+    .inputs {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin: 0 var(--ha-space-3);
+    }
+    ha-radio-group {
+      display: flex;
+      justify-content: center;
+      margin-inline-end: var(--ha-space-3);
+    }
+    .color-pickers {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-grow: 1;
+    }
+    ha-input {
+      min-width: 75px;
+      flex-grow: 1;
+      margin: 0 var(--ha-space-1);
+    }
+
+    ha-theme-picker {
+      display: block;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "theme-settings-changed": Partial<ThemeSettings>;
+  }
+
+  interface HTMLElementTagNameMap {
+    "ha-theme-settings": HaThemeSettings;
+  }
+}
@@ -2,12 +2,19 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { goBack } from "../common/navigate";
+import { haStyleScrollbar } from "../resources/styles";
+import "./ha-icon-button-arrow-prev";
+import "./ha-menu-button";

 const PASSIVE_EVENT_OPTIONS = { passive: true } as const;

 export const haTopAppBarFixedStyles = css`
  :host {
    display: block;
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
    --total-top-app-bar-height: calc(
      var(--header-height, 0px) + var(--sub-row-height, 0px)
    );
@@ -18,10 +25,11 @@ export const haTopAppBarFixedStyles = css`
    box-sizing: border-box;
    color: var(--app-header-text-color, #fff);
    background-color: var(--app-header-background-color, var(--primary-color));
-    position: fixed;
+    position: absolute;
    top: 0;
+    inset-inline-start: 0;
    inset-inline-end: 0;
-    width: var(--ha-top-app-bar-width, 100%);
+    width: 100%;
    z-index: 4;
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
@@ -113,17 +121,17 @@ export const haTopAppBarFixedStyles = css`
  }

  .top-app-bar-fixed-adjust {
-    height: calc(
-      100vh - var(--total-top-app-bar-height, 0px) - var(
-          --safe-area-inset-top,
-          0px
-        ) - var(--safe-area-inset-bottom, 0px)
-    );
-    padding-top: calc(
+    box-sizing: border-box;
+    position: absolute;
+    top: calc(
      var(--total-top-app-bar-height, 0px) + var(--safe-area-inset-top, 0px)
    );
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
    padding-bottom: var(--safe-area-inset-bottom);
    padding-right: var(--safe-area-inset-right);
+    overflow: auto;
  }

  :host([narrow]) .top-app-bar-fixed-adjust {
@@ -135,12 +143,16 @@ export const haTopAppBarFixedStyles = css`
 export class HaTopAppBarFixed extends LitElement {
  @property({ type: Boolean, reflect: true }) public narrow = false;

+  @property({ attribute: "back-button", type: Boolean }) backButton = false;
+
  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;

  @query(".top-app-bar") protected _barElement!: HTMLElement;

  @query(".sub-row") protected _subRowElement?: HTMLElement;

+  @query(".top-app-bar-fixed-adjust") protected _scrollElement?: HTMLElement;
+
  @state() private _hasSubRow = false;

  private _scrollTarget?: HTMLElement | Window;
@@ -149,14 +161,13 @@ export class HaTopAppBarFixed extends LitElement {

  @property({ attribute: false })
  public get scrollTarget(): HTMLElement | Window {
-    return this._scrollTarget || window;
+    return this._scrollTarget || this._scrollElement || window;
  }

  public set scrollTarget(value: HTMLElement | Window) {
    const old = this.scrollTarget;
    this._unregisterListeners();
    this._scrollTarget = value;
-    this._updateBarPosition();
    this.requestUpdate("scrollTarget", old);
    if (this.isConnected) {
      this._registerListeners();
@@ -178,7 +189,6 @@ export class HaTopAppBarFixed extends LitElement {
    if (this.hasUpdated) {
      this._observeSubRowHeight();
      this._updateSubRowHeight();
-      this._updateBarPosition();
      this._registerListeners();
      this._syncScrollState();
    }
@@ -200,16 +210,14 @@ export class HaTopAppBarFixed extends LitElement {
        <div class="row">
          ${paneHeader
            ? html`<section class="section" id="title">
-                <slot name="navigationIcon"></slot>
-                ${title}
+                ${this._renderNavigationIcon()} ${title}
              </section>`
            : nothing}
          <section class="section" id="navigation">
            ${paneHeader
              ? nothing
-              : html`<slot name="navigationIcon"></slot> ${this.centerTitle
-                    ? nothing
-                    : title}`}
+              : html`${this._renderNavigationIcon()}
+                ${this.centerTitle ? nothing : title}`}
          </section>
          ${!paneHeader && this.centerTitle
            ? html`<section class="section center">${title}</section>`
@@ -225,8 +233,22 @@ export class HaTopAppBarFixed extends LitElement {
    `;
  }

+  private _renderNavigationIcon() {
+    return html`
+      <slot name="navigationIcon">
+        ${this.backButton
+          ? html`
+              <ha-icon-button-arrow-prev
+                @click=${this._handleBackClick}
+              ></ha-icon-button-arrow-prev>
+            `
+          : html`<ha-menu-button></ha-menu-button>`}
+      </slot>
+    `;
+  }
+
  protected _renderContent() {
-    return html`<div class="top-app-bar-fixed-adjust">
+    return html`<div class="top-app-bar-fixed-adjust ha-scrollbar">
      <slot></slot>
    </div>`;
  }
@@ -235,7 +257,6 @@ export class HaTopAppBarFixed extends LitElement {
    super.firstUpdated(changedProperties);
    this._observeSubRowHeight();
    this._updateSubRowHeight();
-    this._updateBarPosition();
    this._registerListeners();
    this._syncScrollState();
  }
@@ -253,13 +274,6 @@ export class HaTopAppBarFixed extends LitElement {
    this._unregisterListeners();
  }

-  protected _updateBarPosition() {
-    if (this._barElement) {
-      this._barElement.style.position =
-        this.scrollTarget === window ? "" : "absolute";
-    }
-  }
-
  protected _syncScrollState = () => {
    const scrollTop =
      this.scrollTarget instanceof Window
@@ -268,6 +282,11 @@ export class HaTopAppBarFixed extends LitElement {
    this._barElement?.classList.toggle("scrolled", scrollTop > 0);
  };

+  private _handleBackClick(ev: Event) {
+    ev.stopPropagation();
+    goBack();
+  }
+
  protected _registerListeners() {
    this.scrollTarget.addEventListener(
      "scroll",
@@ -314,7 +333,10 @@ export class HaTopAppBarFixed extends LitElement {
    this.style.setProperty("--sub-row-height", `${subRowHeight}px`);
  };

-  static override styles: CSSResultGroup = haTopAppBarFixedStyles;
+  static override styles: CSSResultGroup = [
+    haStyleScrollbar,
+    haTopAppBarFixedStyles,
+  ];
 }

 declare global {
@@ -85,15 +85,25 @@ export class HaTTSVoicePicker extends LitElement {
      await listTTSVoices(this.hass, this.engineId, this.language)
    ).voices;

-    if (!this.value) {
+    const valueIsValid =
+      this.value &&
+      this._voices?.some((voice) => voice.voice_id === this.value);
+
+    if (valueIsValid) {
      return;
    }

-    if (
-      !this._voices ||
-      !this._voices.find((voice) => voice.voice_id === this.value)
-    ) {
-      this.value = undefined;
+    // The current value is missing or no longer valid for the loaded voices.
+    // When a voice is required, auto-select the first one (the <ha-select>
+    // already displays it) so the value is propagated to the parent;
+    // otherwise clear it.
+    const newValue =
+      this.required && this._voices?.length
+        ? this._voices[0].voice_id
+        : undefined;
+
+    if (newValue !== this.value) {
+      this.value = newValue;
      fireEvent(this, "value-changed", { value: this.value });
    }
  }
@@ -29,6 +29,7 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
      <div
        class=${classMap({
          "top-app-bar-fixed-adjust": true,
+          "ha-scrollbar": true,
          "top-app-bar-fixed-adjust--pane": this.pane,
        })}
      >
@@ -130,12 +131,7 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {

      .top-app-bar-fixed-adjust--pane {
        display: flex;
-        height: calc(
-          100vh - var(--total-top-app-bar-height, 0px) - var(
-              --safe-area-inset-top,
-              0px
-            ) - var(--safe-area-inset-bottom, 0px)
-        );
+        overflow: hidden;
      }

      .pane {
@@ -167,6 +163,7 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
        position: relative;
        flex: 1;
        height: 100%;
+        min-width: 0;
      }

      .top-app-bar-fixed-adjust--pane .content {
@@ -156,7 +156,7 @@ export class HaListVirtualized extends HaListBase {
      this._activeItemFocus = focusItem;
      this._scrollToActiveItem = true;
      this.virtualizerElement
-        ?.element(index)
+        ?.element(this.activeItemIndex)
        ?.scrollIntoView({ block: "nearest" });
    }
  }
@@ -1,13 +0,0 @@
-import timezones from "google-timezones-json";
-
-export const createTimezoneListEl = () => {
-  const list = document.createElement("datalist");
-  list.id = "timezones";
-  Object.keys(timezones).forEach((key) => {
-    const option = document.createElement("option");
-    option.value = key;
-    option.innerText = timezones[key];
-    list.appendChild(option);
-  });
-  return list;
-};
@@ -87,7 +87,7 @@ export const redirectWithAuthCode = (
  // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
  if (!url.includes("?")) {
    url += "?";
-  } else if (!url.endsWith("&")) {
+  } else if (!url.endsWith("?") && !url.endsWith("&")) {
    url += "&";
  }

@@ -17,7 +17,7 @@ export type StreamType = typeof STREAM_TYPE_HLS | typeof STREAM_TYPE_WEB_RTC;

 interface CameraEntityAttributes extends HassEntityAttributeBase {
  model_name: string;
-  access_token: string;
+  access_token?: string;
  brand: string;
  motion_detection: boolean;
  frontend_stream_type: string;
@@ -78,8 +78,12 @@ export const cameraUrlWithWidthHeight = (
  height: number
 ) => `${base_url}&width=${width}&height=${height}`;

-export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
-  `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
+export const computeMJPEGStreamUrl = (
+  entity: CameraEntity
+): string | undefined =>
+  entity.attributes.access_token
+    ? `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`
+    : undefined;

 export const fetchThumbnailUrlWithCache = async (
  hass: HomeAssistant,
@@ -0,0 +1,31 @@
+import { createContext } from "@lit/context";
+
+export const DEFAULT_DIRTY_STATE_KEY = "__default__";
+
+export type DefaultDirtyStateKey = typeof DEFAULT_DIRTY_STATE_KEY;
+
+export interface DirtyStateContext<
+  State = unknown,
+  Key extends string = DefaultDirtyStateKey,
+> {
+  /** Whether any contributor's current slice differs from its initial snapshot */
+  isDirty: boolean;
+  /**
+   * Push a state slice. The first push for a slice sets its baseline.
+   * Subsequent pushes are compared against that baseline using the provider's
+   * compare strategy.
+   */
+  setState: (state: State, key: Key) => void;
+  /** Reset every slice baseline to its current value (marks clean). */
+  markClean: () => void;
+}
+
+/**
+ * Singleton context key for dirty-state tracking.
+ *
+ * Because Lit context keys are singletons, the value type is
+ * `DirtyStateContext<unknown, DefaultDirtyStateKey>`. Providers and consumers
+ * can use narrower `DirtyStateContext<State, Key>` annotations at the type
+ * boundary.
+ */
+export const dirtyStateContext = createContext<DirtyStateContext>("dirtyState");
@@ -73,30 +73,44 @@ export const getEntities = (

  let entityIds = Object.keys(hass.states);

+  // These run over every entity, so use Sets for O(1) membership instead of
+  // repeated Array.includes scans.
  if (includeEntities) {
+    const includeEntitiesSet = new Set(includeEntities);
    entityIds = entityIds.filter((entityId) =>
-      includeEntities.includes(entityId)
+      includeEntitiesSet.has(entityId)
    );
  }

  if (excludeEntities) {
+    const excludeEntitiesSet = new Set(excludeEntities);
    entityIds = entityIds.filter(
-      (entityId) => !excludeEntities.includes(entityId)
+      (entityId) => !excludeEntitiesSet.has(entityId)
    );
  }

  if (includeDomains) {
+    const includeDomainsSet = new Set(includeDomains);
    entityIds = entityIds.filter((eid) =>
-      includeDomains.includes(computeDomain(eid))
+      includeDomainsSet.has(computeDomain(eid))
    );
  }

  if (excludeDomains) {
+    const excludeDomainsSet = new Set(excludeDomains);
    entityIds = entityIds.filter(
-      (eid) => !excludeDomains.includes(computeDomain(eid))
+      (eid) => !excludeDomainsSet.has(computeDomain(eid))
    );
  }

+  // These values are the same for every entity, so compute them once instead
+  // of inside the map over (potentially thousands of) entities.
+  const isRTL = computeRTL(
+    hass.language,
+    hass.translationMetadata.translations
+  );
+  const domainNames = new Map<string, string>();
+
  items = entityIds.map<EntityComboBoxItem>((entityId) => {
    const stateObj = hass.states[entityId];

@@ -110,12 +124,12 @@ export const getEntities = (
      hass.floors
    );

-    const domainName = domainToName(hass.localize, computeDomain(entityId));
-
-    const isRTL = computeRTL(
-      hass.language,
-      hass.translationMetadata.translations
-    );
+    const domain = computeDomain(entityId);
+    let domainName = domainNames.get(domain);
+    if (domainName === undefined) {
+      domainName = domainToName(hass.localize, domain);
+      domainNames.set(domain, domainName);
+    }

    const primary = entityName || deviceName || entityId;
    const secondary = [areaName, entityName ? deviceName : undefined]
@@ -725,16 +725,18 @@ export const mergeHistoryResults = (
    }

    const newLineItem: LineChartUnit = { ...historyItem, data: [] };
+    const historyDataByEntity = new Map(
+      historyItem.data.map((d) => [d.entity_id, d])
+    );
+    const ltsDataByEntity = new Map(ltsItem.data.map((d) => [d.entity_id, d]));
    const entities = new Set([
-      ...historyItem.data.map((d) => d.entity_id),
-      ...ltsItem.data.map((d) => d.entity_id),
+      ...historyDataByEntity.keys(),
+      ...ltsDataByEntity.keys(),
    ]);

    for (const entity of entities) {
-      const historyDataItem = historyItem.data.find(
-        (d) => d.entity_id === entity
-      );
-      const ltsDataItem = ltsItem.data.find((d) => d.entity_id === entity);
+      const historyDataItem = historyDataByEntity.get(entity);
+      const ltsDataItem = ltsDataByEntity.get(entity);

      if (!historyDataItem || !ltsDataItem) {
        newLineItem.data.push(historyDataItem || ltsDataItem!);
@@ -39,7 +39,6 @@ import {
  mdiMicrophoneMessage,
  mdiMotionSensor,
  mdiPalette,
-  mdiRadioTower,
  mdiRayVertex,
  mdiRemote,
  mdiRobot,
@@ -53,6 +52,7 @@ import {
  mdiThermostat,
  mdiTimerOutline,
  mdiToggleSwitch,
+  mdiVideoInputAntenna,
  mdiWater,
  mdiWaterPercent,
  mdiWeatherPartlyCloudy,
@@ -129,7 +129,7 @@ export const FALLBACK_DOMAIN_ICONS = {
  plant: mdiFlower,
  power: mdiFlash,
  proximity: mdiAppleSafari,
-  radio_frequency: mdiRadioTower,
+  radio_frequency: mdiVideoInputAntenna,
  remote: mdiRemote,
  scene: mdiPalette,
  schedule: mdiCalendarClock,
@@ -4,12 +4,14 @@ import type {
 } from "home-assistant-js-websocket";

 interface ImageEntityAttributes extends HassEntityAttributeBase {
-  access_token: string;
+  access_token?: string;
 }

 export interface ImageEntity extends HassEntityBase {
  attributes: ImageEntityAttributes;
 }

-export const computeImageUrl = (entity: ImageEntity): string =>
-  `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`;
+export const computeImageUrl = (entity: ImageEntity): string | undefined =>
+  entity.attributes.access_token
+    ? `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`
+    : undefined;
@@ -43,11 +43,6 @@ export const lightSupportsColorMode = (
  mode: LightColorMode
 ) => entity.attributes.supported_color_modes?.includes(mode) || false;

-export const lightIsInColorMode = (entity: LightEntity) =>
-  (entity.attributes.color_mode &&
-    modesSupportingColor.includes(entity.attributes.color_mode)) ||
-  false;
-
 export const lightSupportsColor = (entity: LightEntity) =>
  entity.attributes.supported_color_modes?.some((mode) =>
    modesSupportingColor.includes(mode)
@@ -159,5 +154,3 @@ export const computeDefaultFavoriteColors = (

  return colors;
 };
-
-export const formatTempColor = (value: number) => `${value} K`;
@@ -128,11 +128,13 @@ export const addMatterDevice = (hass: HomeAssistant) => {

 export const commissionMatterDevice = (
  hass: HomeAssistant,
-  code: string
+  code: string,
+  networkOnly: boolean
 ): Promise<void> =>
  hass.callWS({
    type: "matter/commission",
    code,
+    network_only: networkOnly,
  });

 export const acceptSharedMatterDevice = (
@@ -1,22 +0,0 @@
-import type { HomeAssistant } from "../types";
-
-export const DOMAIN = "radio_frequency";
-
-export interface RadioFrequencyTransmitter {
-  entity_id: string;
-  device_id: string | null;
-  config_entry_id: string | null;
-  supported_frequency_ranges: [number, number][];
-  supported_modulations: string[];
-}
-
-interface RadioFrequencyTransmitterList {
-  transmitters: RadioFrequencyTransmitter[];
-}
-
-export const fetchRadioFrequencyTransmitters = (
-  hass: HomeAssistant
-): Promise<RadioFrequencyTransmitterList> =>
-  hass.callWS({
-    type: "radio_frequency/list",
-  });
@@ -146,10 +146,20 @@ export const filterUpdateEntitiesParameterized = (
    return updateCanInstall(entity, showSkipped);
  });

-export const installUpdates = (hass: HomeAssistant, entityIds: string[]) =>
-  hass.callService("update", "install", {
-    entity_id: entityIds,
-  });
+export const installUpdates = (
+  hass: HomeAssistant,
+  entityIds: string[],
+  notifyOnError = true
+) =>
+  hass.callService(
+    "update",
+    "install",
+    {
+      entity_id: entityIds,
+    },
+    undefined,
+    notifyOnError
+  );

 export const checkForEntityUpdates = async (
  element: HTMLElement,
@@ -221,6 +231,24 @@ export const computeUpdateStateDisplay = (
  const state = stateObj.state;
  const attributes = stateObj.attributes;

+  // An install can be in progress even when the state is "off", e.g. when
+  // downgrading firmware (installed_version is newer than latest_version).
+  // Show the installing status regardless of state in that case.
+  if (updateIsInstalling(stateObj)) {
+    const supportsProgress =
+      supportsFeature(stateObj, UpdateEntityFeature.PROGRESS) &&
+      attributes.update_percentage !== null;
+    if (supportsProgress) {
+      return hass.localize("ui.card.update.installing_with_progress", {
+        progress: formatNumber(attributes.update_percentage!, hass.locale, {
+          maximumFractionDigits: attributes.display_precision,
+          minimumFractionDigits: attributes.display_precision,
+        }),
+      });
+    }
+    return hass.localize("ui.card.update.installing");
+  }
+
  if (state === "off") {
    const isSkipped =
      attributes.latest_version &&
@@ -231,23 +259,6 @@ export const computeUpdateStateDisplay = (
    return hass.formatEntityState(stateObj);
  }

-  if (state === "on") {
-    if (updateIsInstalling(stateObj)) {
-      const supportsProgress =
-        supportsFeature(stateObj, UpdateEntityFeature.PROGRESS) &&
-        attributes.update_percentage !== null;
-      if (supportsProgress) {
-        return hass.localize("ui.card.update.installing_with_progress", {
-          progress: formatNumber(attributes.update_percentage!, hass.locale, {
-            maximumFractionDigits: attributes.display_precision,
-            minimumFractionDigits: attributes.display_precision,
-          }),
-        });
-      }
-      return hass.localize("ui.card.update.installing");
-    }
-  }
-
  return hass.formatEntityState(stateObj);
 };

@@ -10,13 +10,21 @@ import "../../components/ha-button";
 import type { HaSwitch } from "../../components/ha-switch";
 import type { ConfigEntryMutableParams } from "../../data/config_entries";
 import { updateConfigEntry } from "../../data/config_entries";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";

+interface SystemOptionsState {
+  disableNewEntities: boolean;
+  disablePolling: boolean;
+}
+
@customElement("dialog-config-entry-system-options")
-class DialogConfigEntrySystemOptions extends LitElement {
+class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptionsState>()(
+  LitElement
+) {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _disableNewEntities!: boolean;
@@ -38,6 +46,13 @@ class DialogConfigEntrySystemOptions extends LitElement {
    this._error = undefined;
    this._disableNewEntities = params.entry.pref_disable_new_entities;
    this._disablePolling = params.entry.pref_disable_polling;
+    this._initDirtyTracking(
+      { type: "shallow" },
+      {
+        disableNewEntities: this._disableNewEntities,
+        disablePolling: this._disablePolling,
+      }
+    );
    this._open = true;
  }

@@ -68,7 +83,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
              ) || this._params.entry.domain,
          }
        )}
-        prevent-scrim-close
+        .preventScrimClose=${this.isDirtyState}
        @closed=${this._dialogClosed}
      >
        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
@@ -135,7 +150,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
          <ha-button
            slot="primaryAction"
            @click=${this._updateEntry}
-            .disabled=${this._submitting}
+            .disabled=${this._submitting || !this.isDirtyState}
          >
            ${this.hass.localize(
              "ui.dialogs.config_entry_system_options.update"
@@ -149,11 +164,19 @@ class DialogConfigEntrySystemOptions extends LitElement {
  private _disableNewEntitiesChanged(ev: Event): void {
    this._error = undefined;
    this._disableNewEntities = !(ev.target as HaSwitch).checked;
+    this._updateDirtyState({
+      disableNewEntities: this._disableNewEntities,
+      disablePolling: this._disablePolling,
+    });
  }

  private _disablePollingChanged(ev: Event): void {
    this._error = undefined;
    this._disablePolling = !(ev.target as HaSwitch).checked;
+    this._updateDirtyState({
+      disableNewEntities: this._disableNewEntities,
+      disablePolling: this._disablePolling,
+    });
  }

  private async _updateEntry(): Promise<void> {
@@ -403,6 +403,7 @@ class DataEntryFlowDialog extends LitElement {
                          .flowConfig=${this._params.flowConfig}
                          .step=${this._step}
                          .hass=${this.hass}
+                          .domain=${this._params.domain ?? this._step.handler}
                          @flow-step-footer-state-changed=${this
                            ._handleFooterStateChanged}
                        ></step-flow-form>
@@ -106,7 +106,9 @@ class EntityPreviewRow extends LitElement {
    }
  `;

-  private _renderEntityState(stateObj: HassEntity): TemplateResult | string {
+  private _renderEntityState(
+    stateObj: HassEntity
+  ): TemplateResult | string | typeof nothing {
    const domain = stateObj.entity_id.split(".", 1)[0];
    const disabled = stateObj.state === UNAVAILABLE;
    const noValue =
@@ -216,7 +218,10 @@ class EntityPreviewRow extends LitElement {
    }

    if (domain === "image") {
-      const image: string = computeImageUrl(stateObj as ImageEntity);
+      const image = computeImageUrl(stateObj as ImageEntity);
+      if (!image) {
+        return nothing;
+      }
      return html`
        <img
          alt=${ifDefined(stateObj?.attributes.friendly_name)}
@@ -35,6 +35,10 @@ class StepFlowForm extends LitElement {

  @property({ attribute: false }) public hass!: HomeAssistant;

+  // The integration domain this flow belongs to. Unlike `step.handler`, this is
+  // the domain even for options flows (where the handler is the config entry id).
+  @property({ attribute: false }) public domain?: string;
+
  @state() private _loading = false;

  @state() private _stepData?: Record<string, any>;
@@ -108,7 +112,7 @@ class StepFlowForm extends LitElement {
              .computeHelper=${this._helperCallback}
              .computeError=${this._errorCallback}
              .localizeValue=${this._localizeValueCallback}
-              .context=${{ handler: step.handler }}
+              .context=${{ handler: step.handler, domain: this.domain }}
            ></ha-form>`
          : nothing}
      </div>
@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +7,10 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-vacuum-segment-area-mapper";
 import type { HaVacuumSegmentAreaMapper } from "../../../../components/ha-vacuum-segment-area-mapper";
+import {
+  dirtyStateContext,
+  type DirtyStateContext,
+} from "../../../../data/context/dirty-state";
 import type {
  ExtEntityRegistryEntry,
  VacuumEntityOptions,
@@ -14,7 +19,7 @@ import {
  getExtendedEntityRegistryEntry,
  updateEntityRegistryEntry,
 } from "../../../../data/entity/entity_registry";
-import type { HomeAssistant } from "../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";

@customElement("ha-more-info-view-vacuum-segment-mapping")
 export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
@@ -22,12 +27,17 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {

  @property({ attribute: false }) public params!: { entityId: string };

+  @consume({ context: dirtyStateContext, subscribe: true })
+  @state()
+  private _dirtyState?: DirtyStateContext<
+    Record<string, string[]>,
+    "vacuum-segment-mapping"
+  >;
+
  @state() private _areaMapping?: Record<string, string[]>;

  @state() private _submitting = false;

-  @state() private _dirty = false;
-
  @state() private _error?: string;

  private _entry?: ExtEntityRegistryEntry;
@@ -44,16 +54,15 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
      this.params.entityId
    );

-    if (this._entry?.options?.vacuum) {
-      this._areaMapping = this._entry.options.vacuum.area_mapping || {};
-    } else {
-      this._areaMapping = {};
-    }
+    const mapping: Record<string, string[]> =
+      this._entry?.options?.vacuum?.area_mapping || {};
+    this._areaMapping = mapping;
+    this._dirtyState?.setState(mapping, "vacuum-segment-mapping");
  }

-  private _valueChanged(ev: CustomEvent) {
+  private _valueChanged(ev: ValueChangedEvent<Record<string, string[]>>) {
    this._areaMapping = ev.detail.value;
-    this._dirty = true;
+    this._dirtyState?.setState(ev.detail.value, "vacuum-segment-mapping");
  }

  private async _save() {
@@ -77,7 +86,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
        options_domain: "vacuum",
        options: options,
      });
-      this._dirty = false;
+      this._dirtyState?.markClean();
      fireEvent(this, "close-child-view");
    } catch (err: any) {
      this._error = err.message;
@@ -107,7 +116,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
        <div class="footer">
          <ha-button
            @click=${this._save}
-            .disabled=${!this._dirty || this._submitting}
+            .disabled=${!this._dirtyState?.isDirty || this._submitting}
          >
            ${this.hass.localize("ui.common.save")}
          </ha-button>
@@ -15,9 +15,13 @@ class MoreInfoImage extends LitElement {
    if (!this.hass || !this.stateObj) {
      return nothing;
    }
+    const imageUrl = computeImageUrl(this.stateObj);
+    if (!imageUrl) {
+      return nothing;
+    }
    return html`<img
      alt=${this.stateObj.attributes.friendly_name || this.stateObj.entity_id}
-      src=${this.hass.hassUrl(computeImageUrl(this.stateObj))}
+      src=${this.hass.hassUrl(imageUrl)}
    /> `;
  }

@@ -116,12 +116,14 @@ class MoreInfoMediaPlayer extends LitElement {
      MediaPlayerEntityFeature.VOLUME_SET
    );

+    const assumedState = this.stateObj.attributes.assumed_state === true;
+
    return html`${(supportsFeature(
      this.stateObj!,
      MediaPlayerEntityFeature.VOLUME_SET
    ) ||
      supportsFeature(this.stateObj!, MediaPlayerEntityFeature.VOLUME_STEP)) &&
-    stateActive(this.stateObj!)
+    (stateActive(this.stateObj!) || assumedState)
      ? html`
          <div class="volume">
            ${supportsMute
@@ -40,7 +40,9 @@ export class HaMoreInfoAddTo extends LitElement {
  @state() private _loading = true;

  private async _loadActions() {
-    this._defaultActions = getDefaultAddToActions();
+    this._defaultActions = this._config?.user?.is_admin
+      ? getDefaultAddToActions()
+      : [];
    this._externalActions = [];

    if (this._config?.auth.external?.config.hasEntityAddTo) {
@@ -63,6 +63,9 @@ import { subscribeLabFeature } from "../../data/labs";
 import type { ItemType } from "../../data/search";
 import { SearchableDomains } from "../../data/search";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
+import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
+import type { EntitySettingsState } from "../../panels/config/entities/entity-registry-settings-editor";
+import type { Helper } from "../../panels/config/helpers/const";
 import { ScrollableFadeMixin } from "../../mixins/scrollable-fade-mixin";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import {
@@ -121,9 +124,10 @@ declare global {
 const DEFAULT_VIEW: MoreInfoView = "info";

@customElement("ha-more-info-dialog")
-export class MoreInfoDialog extends SubscribeMixin(
-  ScrollableFadeMixin(LitElement)
-) {
+export class MoreInfoDialog extends DirtyStateProviderMixin<
+  EntitySettingsState | Helper | Record<string, string[]> | null,
+  "entity-registry" | "helper" | "vacuum-segment-mapping"
+>()(SubscribeMixin(ScrollableFadeMixin(LitElement))) {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ type: Boolean, reflect: true }) public large = false;
@@ -262,9 +266,8 @@ export class MoreInfoDialog extends SubscribeMixin(
  }

  private _shouldShowAddEntityTo(): boolean {
-    // When new_triggers_conditions labs feature is promoted, this whole check can be removed.
    return (
-      this._newTriggersAndConditions ||
+      (this._newTriggersAndConditions && !!this.hass.user?.is_admin) ||
      !!this.hass.auth.external?.config.hasEntityAddTo
    );
  }
@@ -633,6 +636,18 @@ export class MoreInfoDialog extends SubscribeMixin(
      this.hass.translationMetadata.translations
    );

+    const childViewContent = this._childView
+      ? html`
+          <div class="child-view">
+            ${dynamicElement(this._childView.viewTag, {
+              hass: this.hass,
+              entry: this._entry,
+              params: this._childView.viewParams,
+            })}
+          </div>
+        `
+      : nothing;
+
    return html`
      <ha-adaptive-dialog
        .open=${this._open}
@@ -640,7 +655,9 @@ export class MoreInfoDialog extends SubscribeMixin(
        @closed=${this._dialogClosed}
        @opened=${this._handleOpened}
        @show-child-view=${this._showChildView}
-        .preventScrimClose=${this._currView === "settings" ||
+        .preventScrimClose=${((this._currView === "settings" ||
+          this._childView) &&
+          this.isDirtyState) ||
        !this._isEscapeEnabled}
        flexcontent
      >
@@ -863,70 +880,65 @@ export class MoreInfoDialog extends SubscribeMixin(
                @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
                @hass-more-info=${this._handleMoreInfoEvent}
              >
-                ${cache(
-                  this._childView
-                    ? html`
-                        <div class="child-view">
-                          ${dynamicElement(this._childView.viewTag, {
-                            hass: this.hass,
-                            entry: this._entry,
-                            params: this._childView.viewParams,
-                          })}
-                        </div>
-                      `
-                    : this._currView === "info"
-                      ? html`
-                          <ha-more-info-info
-                            .hass=${this.hass}
-                            .entityId=${this._entityId}
-                            .entry=${this._entry}
-                            .editMode=${this._infoEditMode}
-                            .data=${this._data}
-                          ></ha-more-info-info>
-                        `
-                      : this._currView === "history"
-                        ? html`
-                            <ha-more-info-history-and-logbook
-                              .hass=${this.hass}
-                              .entityId=${this._entityId}
-                            ></ha-more-info-history-and-logbook>
-                          `
-                        : this._currView === "settings"
+                ${this._currView === "settings"
+                  ? html`
+                      <div ?hidden=${!!this._childView}>
+                        <ha-more-info-settings
+                          .hass=${this.hass}
+                          .entityId=${this._entityId}
+                          .entry=${this._entry}
+                        ></ha-more-info-settings>
+                      </div>
+                      ${childViewContent}
+                    `
+                  : cache(
+                      this._childView
+                        ? childViewContent
+                        : this._currView === "info"
                          ? html`
-                              <ha-more-info-settings
+                              <ha-more-info-info
                                .hass=${this.hass}
                                .entityId=${this._entityId}
                                .entry=${this._entry}
-                              ></ha-more-info-settings>
+                                .editMode=${this._infoEditMode}
+                                .data=${this._data}
+                              ></ha-more-info-info>
                            `
-                          : this._currView === "related"
+                          : this._currView === "history"
                            ? html`
-                                <ha-related-items
+                                <ha-more-info-history-and-logbook
                                  .hass=${this.hass}
-                                  .itemId=${entityId}
-                                  .itemType=${SearchableDomains.has(domain)
-                                    ? (domain as ItemType)
-                                    : "entity"}
-                                ></ha-related-items>
+                                  .entityId=${this._entityId}
+                                ></ha-more-info-history-and-logbook>
                              `
-                            : this._currView === "add_to"
+                            : this._currView === "related"
                              ? html`
-                                  <ha-more-info-add-to
-                                    .entityId=${entityId}
-                                    @add-to-action-selected=${this._goBack}
-                                  ></ha-more-info-add-to>
+                                  <ha-related-items
+                                    .hass=${this.hass}
+                                    .itemId=${entityId}
+                                    .itemType=${SearchableDomains.has(domain)
+                                      ? (domain as ItemType)
+                                      : "entity"}
+                                  ></ha-related-items>
                                `
-                              : this._currView === "details"
+                              : this._currView === "add_to"
                                ? html`
-                                    <ha-more-info-details
-                                      .hass=${this.hass}
-                                      .entry=${this._entry}
-                                      .params=${{ entityId }}
-                                      .yamlMode=${this._detailsYamlMode}
-                                    ></ha-more-info-details>
+                                    <ha-more-info-add-to
+                                      .entityId=${entityId}
+                                      @add-to-action-selected=${this._goBack}
+                                    ></ha-more-info-add-to>
                                  `
-                                : nothing
-                )}
+                                : this._currView === "details"
+                                  ? html`
+                                      <ha-more-info-details
+                                        .hass=${this.hass}
+                                        .entry=${this._entry}
+                                        .params=${{ entityId }}
+                                        .yamlMode=${this._detailsYamlMode}
+                                      ></ha-more-info-details>
+                                    `
+                                  : nothing
+                    )}
              </div>
            `
          )}
@@ -949,6 +961,10 @@ export class MoreInfoDialog extends SubscribeMixin(
      | MoreInfoView
      | undefined;

+    if (previousView === "settings" && this._currView !== "settings") {
+      this._discardDirtyStateChanges();
+    }
+
    if (previousView === "details" && this._currView !== "details") {
      const dialog =
        this._dialogElement?.shadowRoot?.querySelector("ha-dialog");
@@ -957,6 +973,12 @@ export class MoreInfoDialog extends SubscribeMixin(
      }
    }

+    if (changedProps.has("_currView") || changedProps.has("_entry")) {
+      if (this._currView === "settings" && this._entry) {
+        this._initDirtyTracking({ type: "deep" });
+      }
+    }
+
    if (changedProps.has("_currView")) {
      this._infoEditMode = false;
      this._detailsYamlMode = false;
@@ -1081,6 +1103,7 @@ export class MoreInfoDialog extends SubscribeMixin(
        .title .breadcrumb {
          color: var(--secondary-text-color);
          font-size: var(--ha-font-size-m);
+          font-family: var(--ha-font-family-heading, inherit);
          line-height: 16px;
          --mdc-icon-size: 16px;
          padding: var(--ha-space-1);
@@ -22,6 +22,7 @@ interface EntityInfo {
  entityId: string;
  entityName: string | undefined;
  areaId: string | undefined;
+  deviceId: string | undefined;
 }

@customElement("more-info-content")
@@ -120,7 +121,7 @@ class MoreInfoContent extends LitElement {
          hass.entities,
          hass.devices
        );
-        const { area } = getEntityContext(
+        const { area, device } = getEntityContext(
          stateObj,
          hass.entities,
          hass.devices,
@@ -128,7 +129,8 @@ class MoreInfoContent extends LitElement {
          hass.floors
        );
        const areaId = area?.area_id;
-        return { entityId, entityName, areaId };
+        const deviceId = device?.id;
+        return { entityId, entityName, areaId, deviceId };
      })
      .filter(Boolean) as EntityInfo[];

@@ -140,10 +142,20 @@ class MoreInfoContent extends LitElement {
    const areaIds = new Set(entityInfos.map((info) => info.areaId));
    const allSameArea = areaIds.size === 1;

-    // Build name and state content config based on conditions
-    const name: EntityNameItem[] = [{ type: "device" }];
+    // Check if all entities belong to the same device
+    const deviceIds = new Set(entityInfos.map((info) => info.deviceId));
+    const allSameDevice = deviceIds.size === 1;

-    if (!allSameEntityName) {
+    // Build name and state content config based on conditions. The device name
+    // is redundant when every member belongs to the same device, so omit it
+    // (and fall back to the entity name so the tile still has a label).
+    const name: EntityNameItem[] = [];
+
+    if (!allSameDevice) {
+      name.push({ type: "device" });
+    }
+
+    if (!allSameEntityName || allSameDevice) {
      name.push({ type: "entity" });
    }

@@ -19,6 +19,64 @@ declare const __WB_MANIFEST__: Parameters<typeof precacheAndRoute>[0];
 const noFallBackRegEx =
  /\/(api|static|auth|frontend_latest|frontend_es5|local)\/.*/;

+// Camera / image proxy endpoints that carry credentials in the URL.
+// We pre-validate the credential in the service worker so obviously invalid
+// requests (signature expired, token missing) never reach the server and
+// don't trigger spurious "Login attempt" warnings from http.ban after BFCache
+// restore, tab resume, network change, or any other browser-initiated replay
+// of a stale `<img>` URL.
+const proxyPathRegEx =
+  /^\/api\/(camera_proxy_stream|camera_proxy|image_proxy)\//;
+
+// Reject signatures this many ms before their nominal expiry to absorb small
+// client/server clock differences. Erring this direction only ever turns a
+// would-be valid request into a local 401; we cannot err the other way without
+// re-introducing the warnings this filter exists to prevent.
+const JWT_EXPIRY_SKEW_MS = 5000;
+
+const base64UrlDecode = (input: string): string => {
+  const normalized = input.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = normalized + "=".repeat((4 - (normalized.length % 4)) % 4);
+  return atob(padded);
+};
+
+const isJwtExpired = (jwt: string): boolean => {
+  try {
+    const parts = jwt.split(".");
+    if (parts.length !== 3) {
+      return false;
+    }
+    const payload = JSON.parse(base64UrlDecode(parts[1]));
+    if (typeof payload.exp !== "number") {
+      return false;
+    }
+    return payload.exp * 1000 < Date.now() + JWT_EXPIRY_SKEW_MS;
+  } catch (_err) {
+    // If we can't parse the JWT for any reason, defer to the server.
+    return false;
+  }
+};
+
+const handleProxyRequest: RouteHandler = async ({ request }) => {
+  const req = request as Request;
+  const url = new URL(req.url);
+
+  const token = url.searchParams.get("token");
+  if (token === "undefined" || token === "null" || token === "") {
+    return new Response(null, { status: 401, statusText: "Invalid token" });
+  }
+
+  const authSig = url.searchParams.get("authSig");
+  if (authSig && isJwtExpired(authSig)) {
+    return new Response(null, {
+      status: 401,
+      statusText: "Signature expired",
+    });
+  }
+
+  return fetch(req);
+};
+
 const initRouting = () => {
  precacheAndRoute(__WB_MANIFEST__, {
    // Ignore all URL parameters.
@@ -59,6 +117,15 @@ const initRouting = () => {
    })
  );

+  // Short-circuit camera/image proxy requests with an expired signature or a
+  // missing/undefined token so they don't hit core and get logged as invalid
+  // login attempts. Registered before the generic /api route below so it wins.
+  registerRoute(
+    ({ url, request }) =>
+      proxyPathRegEx.test(url.pathname) && request.method === "GET",
+    handleProxyRequest
+  );
+
  // Get api from network.
  registerRoute(/\/(api|auth)\/.*/, new NetworkOnly());

@@ -5,6 +5,7 @@ in core bundle slows things down and causes duplicate registration.
 This is the entry point for providing external app stuff from app entrypoint.
 */

+import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
 import { navigate } from "../common/navigate";
@@ -15,6 +16,7 @@ import type {
  EMIncomingMessageBarCodeScanResult,
  EMIncomingMessageCommands,
  ImprovDiscoveredDevice,
+  MatterCommissionFinish,
 } from "./external_messaging";

 const barCodeListeners = new Set<
@@ -91,6 +93,8 @@ export const handleExternalMessage = (
    fireEvent(window, "improv-discovered-device", msg.payload);
  } else if (msg.command === "improv/device_setup_done") {
    fireEvent(window, "improv-device-setup-done");
+  } else if (msg.command === "matter/commission/finish") {
+    fireEvent(window, "matter-commission-finish", msg.payload);
  } else if (msg.command === "bar_code/scan_result") {
    barCodeListeners.forEach((listener) => listener(msg));
  } else if (msg.command === "bar_code/aborted") {
@@ -115,5 +119,10 @@ declare global {
  interface HASSDomEvents {
    "improv-discovered-device": ImprovDiscoveredDevice;
    "improv-device-setup-done": undefined;
+    "matter-commission-finish": MatterCommissionFinish;
+  }
+
+  interface GlobalEventHandlersEventMap {
+    "matter-commission-finish": HASSDomEvent<MatterCommissionFinish>;
  }
 }
--- a/Show More
+++ b/Show More