Move live condition test inline

2026-06-20 23:31:35 +00:00 · 2026-06-05 20:53:18 +00:00
558 changed files with 10085 additions and 72517 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 gallery-specific documentation, demos, page structure, and usage examples, see [`gallery/AGENTS.md`](gallery/AGENTS.md).
+**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.

 ## Table of Contents

@@ -289,7 +289,6 @@ For browser support, API details, and current specifications, refer to these aut
 - **Test with Vitest**: Use the established test framework
 - **Mock appropriately**: Mock WebSocket connections and API calls
 - **Test accessibility**: Ensure components are accessible
- **Optimizing chart data processing**: When optimizing chart data transforms (history, statistics, energy, downsampling), follow the playbook in [`test/benchmarks/README.md`](test/benchmarks/README.md) — it has seeded fixtures, characterization (snapshot) tests that pin current output, and `vitest bench` benchmarks (`yarn test:bench`) for before/after comparison. Optimizations must keep output bit-identical.

 ## Component Library

@@ -339,6 +338,11 @@ 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[]`
@@ -357,6 +361,10 @@ Common patterns:
 ></ha-form>
 ```

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

 - Types: `error`, `warning`, `info`, `success`
@@ -370,6 +378,10 @@ 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.
@@ -393,6 +405,7 @@ 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

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

 #### Creating a Lovelace Card

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

 ```typescript
@customElement("hui-my-card")
@@ -495,10 +508,6 @@ 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
@@ -529,7 +538,7 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Terminology Standards

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

 - **Use "Remove"** for actions that can be restored or reapplied:
  - Removing a user's permission
@@ -1,50 +0,0 @@
-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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -27,7 +27,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/init@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
        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@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/autobuild@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0

      # ℹ️ 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@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
@@ -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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

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

@@ -1,190 +0,0 @@
-name: Pull request standards
-
-on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, no PR code checkout
-    types:
-      - opened
-      - edited
-      - reopened
-      - ready_for_review
-    branches:
-      - dev
-
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  check:
-    name: Check pull request follows contribution standards
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write # To label and comment on pull requests
-    steps:
-      - name: Check pull request standards
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const pr = context.payload.pull_request;
-
-            // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
-            if (pr.user.type === "Bot") {
-              core.info(`Skipping bot author: ${pr.user.login}`);
-              return;
-            }
-            if (pr.draft) {
-              core.info("Skipping draft pull request");
-              return;
-            }
-            try {
-              await github.rest.orgs.checkMembershipForUser({
-                org: "home-assistant",
-                username: pr.user.login,
-              });
-              core.info(`Skipping organization member: ${pr.user.login}`);
-              return;
-            } catch (error) {
-              core.info(`${pr.user.login} is not an organization member, checking standards`);
-            }
-
-            const label = "Needs Template";
-            const marker = "<!-- pr-standards-check -->";
-            const { owner, repo } = context.repo;
-            const issue_number = pr.number;
-
-            const body = (pr.body || "").replace(/<!--[\s\S]*?-->/g, "");
-            const normalized = body.toLowerCase();
-
-            // Ignore 404s from mutations that race manual edits or cancelled runs.
-            const ignoreMissing = async (fn) => {
-              try {
-                await fn();
-              } catch (error) {
-                if (error.status === 404) {
-                  core.info("Target already removed, nothing to do");
-                  return;
-                }
-                throw error;
-              }
-            };
-
-            // Hide/restore our comment via GraphQL (REST cannot minimize).
-            const setMinimized = async (subjectId, minimized) => {
-              const mutation = minimized
-                ? `mutation($id: ID!) {
-                     minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
-                       clientMutationId
-                     }
-                   }`
-                : `mutation($id: ID!) {
-                     unminimizeComment(input: { subjectId: $id }) {
-                       clientMutationId
-                     }
-                   }`;
-              try {
-                await github.graphql(mutation, { id: subjectId });
-              } catch (error) {
-                core.info(
-                  `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
-                );
-              }
-            };
-
-            // Content of a "## <name>" section, or null when the heading is absent.
-            const section = (name) => {
-              const match = body.match(
-                new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
-              );
-              return match ? match[1] : null;
-            };
-
-            const problems = [];
-
-            const requiredHeadings = [
-              "## proposed change",
-              "## type of change",
-              "## checklist",
-            ];
-            if (requiredHeadings.some((h) => !normalized.includes(h))) {
-              problems.push(
-                "Use the pull request template without removing its sections."
-              );
-            }
-
-            const typeOfChange = section("type of change");
-            if (typeOfChange !== null) {
-              const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
-              if (ticked !== 1) {
-                problems.push(
-                  'Select exactly one option under "Type of change".'
-                );
-              }
-            }
-
-            const proposedChange = section("proposed change");
-            if (proposedChange !== null && proposedChange.trim().length === 0) {
-              problems.push('Describe your changes under "Proposed change".');
-            }
-
-            const isValid = problems.length === 0;
-
-            const comments = await github.paginate(
-              github.rest.issues.listComments,
-              { owner, repo, issue_number, per_page: 100 }
-            );
-            const existing = comments.find((c) => c.body.includes(marker));
-            const hasLabel = pr.labels.some((l) => l.name === label);
-
-            if (isValid) {
-              core.info("Pull request standards met");
-
-              if (hasLabel) {
-                await ignoreMissing(() =>
-                  github.rest.issues.removeLabel({
-                    owner, repo, issue_number, name: label,
-                  })
-                );
-              }
-              if (existing) {
-                await setMinimized(existing.node_id, true);
-              }
-              return;
-            }
-
-            core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
-
-            if (!hasLabel) {
-              await github.rest.issues.addLabels({
-                owner, repo, issue_number, labels: [label],
-              });
-            }
-
-            const message =
-              `${marker}\n` +
-              `Hey @${pr.user.login}!\n\n` +
-              `Thank you for your contribution! To help reviewers, please update ` +
-              `this pull request to follow our pull request standards:\n\n` +
-              problems.map((p) => `- ${p}`).join("\n") +
-              `\n\n` +
-              `Please complete the ` +
-              `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
-              `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
-              `for more on creating a great pull request (see point 6).`;
-
-            if (existing) {
-              await github.rest.issues.updateComment({
-                owner, repo, comment_id: existing.id, body: message,
-              });
-              await setMinimized(existing.node_id, false);
-            } else {
-              await github.rest.issues.createComment({
-                owner, repo, issue_number, body: message,
-              });
-            }
-
-            // Fail this check so it can block the PR from being merged
-            core.setFailed(
-              `Pull request standards not met:\n- ${problems.join("\n- ")}`
-            );
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
        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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

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

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@e91ad1948e57189485b9c1ad608af0c303946f89 # master
+        uses: home-assistant/actions/helpers/verify-version@868e6cb4607727d764341a158d98872cd63fa658 # 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@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
+        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
@@ -1,51 +0,0 @@
-name: Sync numeric device classes
-
-# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
-# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
-# when it drifts. Reads homeassistant/generated/sensor.json from core.
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 4 * * *" # Daily, 04:00 UTC
-
-permissions:
-  contents: read
-
-jobs:
-  sync:
-    name: Sync
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
-
-      - name: Set up Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: ".nvmrc"
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Regenerate numeric device classes
-        run: ./script/gen_numeric_device_classes
-
-      - name: Format
-        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
-
-      - name: Create pull request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
-        with:
-          branch: chore/sync-numeric-device-classes
-          commit-message: Update numeric sensor device classes
-          title: Update numeric sensor device classes
-          body: |
-            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
-            `SensorDeviceClass`.
-
-            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

@@ -58,4 +58,3 @@ test/coverage/
 .claude
 .cursor
 .opencode
-test/benchmarks/results/
@@ -1 +1 @@
-24.17.0
+24.16.0
@@ -13,4 +13,4 @@ nodeLinker: node-modules

 npmMinimalAgeGate: 3d

-yarnPath: .yarn/releases/yarn-4.17.0.cjs
+yarnPath: .yarn/releases/yarn-4.16.0.cjs
@@ -103,29 +103,12 @@ gulp.task("gather-gallery-pages", async function gatherPages() {

    if (!toProcess) {
      console.error("Unknown category", group.category);
-      if (!group.subsections && !group.pages) {
+      if (!group.pages) {
        group.pages = [];
      }
      continue;
    }

-    if (group.subsections) {
-      // Listed pages keep their per-subsection order.
-      for (const subsection of group.subsections) {
-        for (const page of subsection.pages) {
-          if (!toProcess.delete(page)) {
-            console.error("Found unreferenced demo", page);
-          }
-        }
-      }
-      // Any remaining pages land in a trailing "Other" subsection.
-      const leftover = Array.from(toProcess).sort();
-      if (leftover.length) {
-        group.subsections.push({ header: "Other", pages: leftover });
-      }
-      continue;
-    }
-
    // Any pre-defined groups will not be sorted.
    if (group.pages) {
      for (const page of group.pages) {
@@ -1,40 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
-
-const TARGET = join(
-  paths.root_dir,
-  "src",
-  "data",
-  "sensor_numeric_device_classes.ts"
-);
-
-gulp.task("gen-numeric-device-classes", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const classes = [...(data.numeric_device_classes ?? [])].sort();
-  if (!classes.length) {
-    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
-// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
-// Regenerate with \`script/gen_numeric_device_classes\`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
-];
-`;
-
-  await writeFile(TARGET, content);
-});
@@ -9,7 +9,6 @@ import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";
@@ -33,9 +33,7 @@ const isWsl =
 *   compiler: import("@rspack/core").Compiler,
 *   contentBase: string,
 *   port: number,
- *   listenHost?: string,
- *   open?: boolean,
- *   logUrlAfterFirstBuild?: boolean,
+ *   listenHost?: string
 * }}
 */
 const runDevServer = async ({
@@ -43,31 +41,16 @@ 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,
+      open: true,
      host: listenHost,
      port,
      static: {
@@ -87,9 +70,7 @@ const runDevServer = async ({

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

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

@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { demoDevices } from "./stubs/devices";
+import { mockConfigEntries } from "./stubs/config_entries";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,7 +16,6 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -30,31 +29,6 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";

-// WS command / REST path prefixes whose mocks live in the lazily imported
-// config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
-const CONFIG_PANEL_COMMANDS = [
-  "cloud/",
-  "validate_config",
-  "config_entries/",
-  "device_automation/",
-  "entity/source",
-  "blueprint/",
-  "homeassistant/expose",
-  "zone/list",
-  "person/list",
-  "network/url",
-  "application_credentials/",
-  "system_health/",
-  "backup/",
-  "automation/config",
-  "script/config",
-  "config/automation/config",
-  "config/script/config",
-  "config/scene/config",
-  "search/related",
-  "tag/list",
-];
-
@customElement("ha-demo")
 export class HaDemo extends HomeAssistantAppEl {
  protected async _initializeHass() {
@@ -87,18 +61,9 @@ export class HaDemo extends HomeAssistantAppEl {
    mockIcons(hass);
    mockEnergy(hass);
    mockPersistentNotification(hass);
-    // Consumed app-wide via the lazy manifests context, so register eagerly.
-    mockIntegration(hass);
-    // Config panel mocks are code-split: the loader runs (and the chunk is
-    // dynamically imported) the first time one of these config-only WS/REST
-    // commands is requested, i.e. when the config panel is opened.
-    hass.mockLazyLoad(
-      (command) => CONFIG_PANEL_COMMANDS.some((p) => command.startsWith(p)),
-      () =>
-        import("./stubs/config-panel").then((mod) => mod.mockConfigPanel(hass))
-    );
+    mockConfigEntries(hass);
    mockAreaRegistry(hass);
-    mockDeviceRegistry(hass, demoDevices);
+    mockDeviceRegistry(hass);
    mockFloorRegistry(hass);
    mockLabelRegistry(hass);
    mockEntityRegistry(hass, [
@@ -1,19 +0,0 @@
-import type { ApplicationCredential } from "../../../src/data/application_credential";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const credentials: ApplicationCredential[] = [
-  {
-    id: "mock-credential",
-    domain: "spotify",
-    client_id: "demo-client-id",
-    client_secret: "demo-client-secret",
-    name: "Spotify",
-  },
-];
-
-export const mockApplicationCredentials = (hass: MockHomeAssistant) => {
-  hass.mockWS("application_credentials/list", () => credentials);
-  hass.mockWS("application_credentials/config", () => ({
-    integrations: { spotify: { description_placeholders: {} } },
-  }));
-};
@@ -3,7 +3,4 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockAuth = (hass: MockHomeAssistant) => {
  hass.mockWS("config/auth/list", () => []);
  hass.mockWS("auth/refresh_tokens", () => []);
-  hass.mockWS("auth/sign_path", (msg: { path: string }) => ({
-    path: msg.path,
-  }));
 };
@@ -1,69 +0,0 @@
-import type { AutomationConfig } from "../../../src/data/automation";
-import type { ScriptConfig } from "../../../src/data/script";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const demoAutomationConfig = (entityId: string): AutomationConfig => ({
-  id: entityId.split(".")[1],
-  alias: "Demo automation",
-  description: "An example automation shown in the demo.",
-  triggers: [
-    { trigger: "state", entity_id: "binary_sensor.basement_floor_wet" },
-  ],
-  conditions: [],
-  actions: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
-
-const demoScriptConfig = (): ScriptConfig => ({
-  alias: "Demo script",
-  description: "An example script shown in the demo.",
-  sequence: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
-
-export const mockAutomation = (hass: MockHomeAssistant) => {
-  hass.mockWS("automation/config", (msg: { entity_id: string }) => ({
-    config: demoAutomationConfig(msg.entity_id),
-  }));
-  hass.mockWS("script/config", () => ({ config: demoScriptConfig() }));
-
-  hass.mockAPI(/config\/automation\/config\/.+/, () =>
-    demoAutomationConfig("automation.demo")
-  );
-  hass.mockAPI(/config\/script\/config\/.+/, () => demoScriptConfig());
-
-  // Trigger/condition type pickers subscribe for integration-provided
-  // platforms. The demo only uses the built-in ones, so emit empty records.
-  hass.mockWS(
-    "trigger_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
-    }
-  );
-  hass.mockWS(
-    "condition_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
-    }
-  );
-};
@@ -1,83 +0,0 @@
-import type {
-  BackupAgentsInfo,
-  BackupConfig,
-  BackupContent,
-  BackupInfo,
-} from "../../../src/data/backup";
-import { BackupScheduleRecurrence } from "../../../src/data/backup";
-import type { ManagerStateEvent } from "../../../src/data/backup_manager";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const lastBackupDate = new Date(Date.now() - 86400000).toISOString();
-const nextBackupDate = new Date(Date.now() + 86400000).toISOString();
-
-const backups: BackupContent[] = [
-  {
-    backup_id: "demo-backup-1",
-    name: "Automatic backup DEMO",
-    date: lastBackupDate,
-    with_automatic_settings: true,
-    agents: {
-      "backup.local": { size: 1024 * 1024 * 512, protected: true },
-      "cloud.cloud": { size: 1024 * 1024 * 512, protected: true },
-    },
-  },
-];
-
-const backupInfo: BackupInfo = {
-  backups,
-  agent_errors: {},
-  last_attempted_automatic_backup: lastBackupDate,
-  last_completed_automatic_backup: lastBackupDate,
-  last_action_event: { manager_state: "idle" },
-  next_automatic_backup: nextBackupDate,
-  next_automatic_backup_additional: false,
-  state: "idle",
-};
-
-const backupConfig: BackupConfig = {
-  automatic_backups_configured: true,
-  last_attempted_automatic_backup: lastBackupDate,
-  last_completed_automatic_backup: lastBackupDate,
-  next_automatic_backup: nextBackupDate,
-  next_automatic_backup_additional: false,
-  create_backup: {
-    agent_ids: ["backup.local", "cloud.cloud"],
-    include_addons: [],
-    include_all_addons: true,
-    include_database: true,
-    include_folders: [],
-    name: null,
-    password: null,
-  },
-  retention: { copies: 3, days: null },
-  schedule: {
-    recurrence: BackupScheduleRecurrence.DAILY,
-    time: null,
-    days: [],
-  },
-  agents: {
-    "backup.local": { protected: true, retention: null },
-    "cloud.cloud": { protected: true, retention: null },
-  },
-};
-
-const agentsInfo: BackupAgentsInfo = {
-  agents: [
-    { agent_id: "backup.local", name: "This device" },
-    { agent_id: "cloud.cloud", name: "Home Assistant Cloud" },
-  ],
-};
-
-export const mockBackup = (hass: MockHomeAssistant) => {
-  hass.mockWS("backup/info", () => backupInfo);
-  hass.mockWS("backup/config/info", () => ({ config: backupConfig }));
-  hass.mockWS("backup/agents/info", () => agentsInfo);
-  hass.mockWS(
-    "backup/subscribe_events",
-    (_msg, _hass, onChange?: (event: ManagerStateEvent) => void) => {
-      onChange?.({ manager_state: "idle" });
-      return () => undefined;
-    }
-  );
-};
@@ -1,45 +0,0 @@
-import type { BlueprintDomain, Blueprints } from "../../../src/data/blueprint";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const automationBlueprints: Blueprints = {
-  "homeassistant/motion_light.yaml": {
-    metadata: {
-      domain: "automation",
-      name: "Motion-activated Light",
-      description: "Turn on a light when motion is detected.",
-      author: "Home Assistant",
-      source_url:
-        "https://github.com/home-assistant/core/blob/dev/homeassistant/components/automation/blueprints/motion_light.yaml",
-      input: {
-        motion_entity: { name: "Motion Sensor" },
-        light_target: { name: "Light" },
-      },
-    },
-  },
-  "homeassistant/notify_leaving_zone.yaml": {
-    metadata: {
-      domain: "automation",
-      name: "Send notification when leaving a zone",
-      description: "Get a notification when a person leaves a zone.",
-      author: "Home Assistant",
-    },
-  },
-};
-
-const scriptBlueprints: Blueprints = {
-  "homeassistant/confirmable_notification.yaml": {
-    metadata: {
-      domain: "script",
-      name: "Confirmable Notification",
-      description:
-        "A script that sends an actionable notification with a confirmation.",
-      author: "Home Assistant",
-    },
-  },
-};
-
-export const mockBlueprint = (hass: MockHomeAssistant) => {
-  hass.mockWS("blueprint/list", (msg: { domain: BlueprintDomain }) =>
-    msg.domain === "script" ? scriptBlueprints : automationBlueprints
-  );
-};
@@ -1,118 +0,0 @@
-import type {
-  CloudStatusLoggedIn,
-  SubscriptionInfo,
-} from "../../../src/data/cloud";
-import type { CloudTTSInfo } from "../../../src/data/cloud/tts";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const emptyFilter = () => ({
-  include_domains: [],
-  include_entities: [],
-  exclude_domains: [],
-  exclude_entities: [],
-});
-
-// A single mutable status object so that preference changes made in the demo
-// are reflected back in the UI.
-const cloudStatus: CloudStatusLoggedIn = {
-  logged_in: true,
-  cloud: "connected",
-  cloud_last_disconnect_reason: null,
-  email: "demo@home-assistant.io",
-  google_registered: true,
-  google_entities: emptyFilter(),
-  google_domains: ["light", "switch", "climate", "cover"],
-  alexa_registered: true,
-  alexa_entities: emptyFilter(),
-  remote_domain: "demo-instance.ui.nabu.casa",
-  remote_connected: true,
-  remote_certificate: {
-    common_name: "demo-instance.ui.nabu.casa",
-    expire_date: "2099-01-01T00:00:00+00:00",
-    fingerprint: "demodemodemodemodemodemodemodemodemodemodemodemodemo",
-    alternative_names: ["demo-instance.ui.nabu.casa"],
-  },
-  remote_certificate_status: "ready",
-  http_use_ssl: false,
-  active_subscription: true,
-  prefs: {
-    google_enabled: true,
-    alexa_enabled: true,
-    remote_enabled: true,
-    remote_allow_remote_enable: true,
-    strict_connection: "disabled",
-    google_secure_devices_pin: undefined,
-    cloudhooks: {},
-    alexa_report_state: true,
-    google_report_state: true,
-    tts_default_voice: ["en-US", "JennyNeural"],
-    cloud_ice_servers_enabled: true,
-  },
-};
-
-const subscription: SubscriptionInfo = {
-  human_description: "Demo subscription, renews automatically",
-  provider: "Nabu Casa, Inc.",
-  plan_renewal_date: 4102444800,
-};
-
-const ttsInfo: CloudTTSInfo = {
-  languages: [
-    ["en-US", "JennyNeural", "Jenny"],
-    ["en-US", "GuyNeural", "Guy"],
-    ["en-GB", "LibbyNeural", "Libby"],
-    ["nl-NL", "ColetteNeural", "Colette"],
-    ["de-DE", "KatjaNeural", "Katja"],
-  ],
-};
-
-export const mockCloud = (hass: MockHomeAssistant) => {
-  hass.mockWS("cloud/status", () => cloudStatus);
-  hass.mockWS("cloud/subscription", () => subscription);
-  hass.mockWS("cloud/tts/info", () => ttsInfo);
-
-  hass.mockWS("cloud/update_prefs", (msg) => {
-    const { type, ...prefs } = msg;
-    cloudStatus.prefs = { ...cloudStatus.prefs, ...prefs };
-    return { success: true };
-  });
-
-  hass.mockWS("cloud/cloudhook/create", (msg) => {
-    const webhook = {
-      webhook_id: msg.webhook_id,
-      cloudhook_id: "demo-cloudhook-id",
-      cloudhook_url: `https://hooks.nabu.casa/demo-${msg.webhook_id}`,
-      managed: false,
-    };
-    cloudStatus.prefs.cloudhooks = {
-      ...cloudStatus.prefs.cloudhooks,
-      [msg.webhook_id]: webhook,
-    };
-    return webhook;
-  });
-
-  hass.mockWS("cloud/cloudhook/delete", (msg) => {
-    const cloudhooks = { ...cloudStatus.prefs.cloudhooks };
-    delete cloudhooks[msg.webhook_id];
-    cloudStatus.prefs.cloudhooks = cloudhooks;
-    return null;
-  });
-
-  hass.mockWS("cloud/remote/connect", () => {
-    cloudStatus.remote_connected = true;
-    return null;
-  });
-  hass.mockWS("cloud/remote/disconnect", () => {
-    cloudStatus.remote_connected = false;
-    return null;
-  });
-
-  hass.mockWS("cloud/remove_data", () => null);
-  hass.mockWS("cloud/google_assistant/entities/update", () => null);
-  hass.mockWS("cloud/alexa/entities", () => []);
-  hass.mockWS("cloud/google_assistant/entities", () => []);
-
-  hass.mockAPI("cloud/logout", () => ({}));
-  hass.mockAPI("cloud/google_actions/sync", () => ({}));
-  hass.mockAPI("cloud/support_package", () => "Demo support package");
-};
@@ -1,40 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import { mockApplicationCredentials } from "./application_credentials";
-import { mockAutomation } from "./automation";
-import { mockBackup } from "./backup";
-import { mockBlueprint } from "./blueprint";
-import { mockCloud } from "./cloud";
-import { mockConfig } from "./config";
-import { mockConfigEntries } from "./config_entries";
-import { mockDeviceAutomation } from "./device_automation";
-import { mockEntitySources } from "./entity_sources";
-import { mockExpose } from "./expose";
-import { mockNetwork } from "./network";
-import { mockPerson } from "./person";
-import { mockScene } from "./scene";
-import { mockSearch } from "./search";
-import { mockSystemHealth } from "./system_health";
-import { mockTags } from "./tags";
-import { mockZone } from "./zone";
-
-// Registers every mock that is only needed once the config panel is opened.
-// This module is dynamically imported so its data stays out of the main bundle.
-export const mockConfigPanel = (hass: MockHomeAssistant) => {
-  mockCloud(hass);
-  mockConfig(hass);
-  mockConfigEntries(hass);
-  mockDeviceAutomation(hass);
-  mockEntitySources(hass);
-  mockBlueprint(hass);
-  mockExpose(hass);
-  mockZone(hass);
-  mockPerson(hass);
-  mockNetwork(hass);
-  mockApplicationCredentials(hass);
-  mockSystemHealth(hass);
-  mockBackup(hass);
-  mockAutomation(hass);
-  mockScene(hass);
-  mockSearch(hass);
-  mockTags(hass);
-};
@@ -1,126 +1,26 @@
-import type {
-  ConfigEntry,
-  ConfigEntryUpdate,
-} from "../../../src/data/config_entries";
-import type { ConfigFlowInProgressMessage } from "../../../src/data/config_flow";
-import type { IntegrationType } from "../../../src/data/integration";
+import type { getConfigEntries } from "../../../src/data/config_entries";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-const baseEntry = {
-  source: "user",
-  state: "loaded" as const,
-  supports_options: false,
-  supports_remove_device: false,
-  supports_unload: true,
-  supports_reconfigure: true,
-  supported_subentry_types: {},
-  num_subentries: 0,
-  pref_disable_new_entities: false,
-  pref_disable_polling: false,
-  disabled_by: null,
-  reason: null,
-  error_reason_translation_key: null,
-  error_reason_translation_placeholders: null,
-};
-
-// Each entry is tagged with its integration type so we can honor the
-// `type_filter` that the integrations and helpers panels subscribe with.
-export const demoConfigEntries: {
-  entry: ConfigEntry;
-  type: IntegrationType;
-}[] = [
-  {
-    type: "service",
-    entry: {
-      ...baseEntry,
-      entry_id: "co2signal",
+export const mockConfigEntries = (hass: MockHomeAssistant) => {
+  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
+    {
+      entry_id: "mock-entry-co2signal",
      domain: "co2signal",
      title: "Electricity Maps",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_remove_device: false,
+      supports_unload: true,
+      supports_reconfigure: true,
+      supported_subentry_types: {},
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+      num_subentries: 0,
+      error_reason_translation_key: null,
+      error_reason_translation_placeholders: null,
    },
-  },
-  {
-    type: "hub",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-hue",
-      domain: "hue",
-      title: "Philips Hue",
-      source: "zeroconf",
-      supports_options: true,
-      supports_remove_device: true,
-    },
-  },
-  {
-    type: "hub",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-sonos",
-      domain: "sonos",
-      title: "Sonos",
-      source: "zeroconf",
-      supports_options: true,
-    },
-  },
-  {
-    type: "service",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-met",
-      domain: "met",
-      title: "Forecast.Home",
-    },
-  },
-  {
-    type: "helper",
-    entry: {
-      ...baseEntry,
-      entry_id: "mock-template-helper",
-      domain: "template",
-      title: "Comfort level",
-    },
-  },
-];
-
-const filterEntries = (filters?: {
-  type_filter?: IntegrationType[];
-  domain?: string;
-}): ConfigEntry[] =>
-  demoConfigEntries
-    .filter(
-      (e) =>
-        (!filters?.type_filter || filters.type_filter.includes(e.type)) &&
-        (!filters?.domain || filters.domain === e.entry.domain)
-    )
-    .map((e) => e.entry);
-
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "config_entries/get",
-    (msg: { type_filter?: IntegrationType[]; domain?: string }) =>
-      filterEntries(msg)
-  );
-
-  hass.mockWS(
-    "config_entries/subscribe",
-    (
-      msg: { type_filter?: IntegrationType[]; domain?: string },
-      _hass,
-      onChange?: (updates: ConfigEntryUpdate[]) => void
-    ) => {
-      onChange?.(filterEntries(msg).map((entry) => ({ type: null, entry })));
-      return () => undefined;
-    }
-  );
-
-  hass.mockWS(
-    "config_entries/flow/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (updates: ConfigFlowInProgressMessage[]) => void
-    ) => {
-      onChange?.([]);
-      return () => undefined;
-    }
-  );
+  ]);
 };
@@ -1,18 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-// The demo's devices don't expose device-specific automations, so report empty
-// lists and no extra capability fields for the device automation pickers.
-export const mockDeviceAutomation = (hass: MockHomeAssistant) => {
-  hass.mockWS("device_automation/trigger/list", () => []);
-  hass.mockWS("device_automation/condition/list", () => []);
-  hass.mockWS("device_automation/action/list", () => []);
-  hass.mockWS("device_automation/trigger/capabilities", () => ({
-    extra_fields: [],
-  }));
-  hass.mockWS("device_automation/condition/capabilities", () => ({
-    extra_fields: [],
-  }));
-  hass.mockWS("device_automation/action/capabilities", () => ({
-    extra_fields: [],
-  }));
-};
@@ -1,53 +0,0 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
-
-const baseDevice = {
-  config_entries_subentries: {},
-  connections: [] as [string, string][],
-  identifiers: [] as [string, string][],
-  model_id: null,
-  labels: [] as string[],
-  sw_version: null,
-  hw_version: null,
-  serial_number: null,
-  via_device_id: null,
-  area_id: null,
-  name_by_user: null,
-  disabled_by: null,
-  configuration_url: null,
-  created_at: 0,
-  modified_at: 0,
-};
-
-export const demoDevices: DeviceRegistryEntry[] = [
-  {
-    ...baseDevice,
-    id: "co2signal",
-    name: "Electricity Maps",
-    manufacturer: "Electricity Maps",
-    model: "CO2 Signal",
-    config_entries: ["co2signal"],
-    primary_config_entry: "co2signal",
-    entry_type: "service",
-  },
-  {
-    ...baseDevice,
-    id: "hue-bridge",
-    name: "Philips Hue Bridge",
-    manufacturer: "Signify",
-    model: "Hue Bridge (BSB002)",
-    sw_version: "1.50.0",
-    config_entries: ["mock-hue"],
-    primary_config_entry: "mock-hue",
-    entry_type: null,
-  },
-  {
-    ...baseDevice,
-    id: "sonos-living",
-    name: "Living Room",
-    manufacturer: "Sonos",
-    model: "One",
-    config_entries: ["mock-sonos"],
-    primary_config_entry: "mock-sonos",
-    entry_type: null,
-  },
-];
@@ -1,7 +1,4 @@
-import type {
-  EntityRegistryEntry,
-  ExtEntityRegistryEntry,
-} from "../../../src/data/entity/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockEntityRegistry = (
@@ -9,17 +6,4 @@ export const mockEntityRegistry = (
  data: EntityRegistryEntry[] = []
 ) => {
  hass.mockWS("config/entity_registry/list", () => data);
-  hass.mockWS(
-    "config/entity_registry/get_entries",
-    (msg: { entity_ids: string[] }) => {
-      const result: Record<string, ExtEntityRegistryEntry> = {};
-      for (const entityId of msg.entity_ids) {
-        const entry = data.find((e) => e.entity_id === entityId);
-        if (entry) {
-          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
-        }
-      }
-      return result;
-    }
-  );
 };
@@ -1,12 +0,0 @@
-import type { EntitySources } from "../../../src/data/entity/entity_sources";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockEntitySources = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "entity/source",
-    (): EntitySources => ({
-      "sensor.co2_intensity": { domain: "co2signal" },
-      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
-    })
-  );
-};
@@ -1,39 +0,0 @@
-import type { ExposeEntitySettings } from "../../../src/data/expose";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const exposedEntities: Record<string, ExposeEntitySettings> = {
-  "light.bed_light": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-  "light.ceiling_lights": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": false,
-  },
-  "switch.decorative_lights": {
-    conversation: true,
-    "cloud.alexa": false,
-    "cloud.google_assistant": true,
-  },
-  "climate.ecobee": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-};
-
-export const mockExpose = (hass: MockHomeAssistant) => {
-  hass.mockWS("homeassistant/expose_entity/list", () => ({
-    exposed_entities: exposedEntities,
-  }));
-  hass.mockWS(
-    "homeassistant/expose_new_entities/get",
-    (msg: { assistant: string }) => ({
-      expose_new: msg.assistant !== "cloud.google_assistant",
-    })
-  );
-  hass.mockWS("homeassistant/expose_entity", () => null);
-  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
-};
@@ -42,7 +42,6 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
-  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };
@@ -1,72 +0,0 @@
-import type { IntegrationManifest } from "../../../src/data/integration";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const manifest = (
-  domain: string,
-  name: string,
-  overrides: Partial<IntegrationManifest> = {}
-): IntegrationManifest => ({
-  is_built_in: true,
-  domain,
-  name,
-  config_flow: true,
-  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
-  iot_class: "local_push",
-  ...overrides,
-});
-
-const manifests: IntegrationManifest[] = [
-  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
-  manifest("hue", "Philips Hue"),
-  manifest("sonos", "Sonos"),
-  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
-  // Helpers
-  manifest("template", "Template", { integration_type: "helper" }),
-  manifest("input_boolean", "Toggle", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_number", "Number", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_select", "Dropdown", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_text", "Text", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_datetime", "Date and/or time", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("counter", "Counter", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("timer", "Timer", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("schedule", "Schedule", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-];
-
-export const mockIntegration = (hass: MockHomeAssistant) => {
-  hass.mockWS("manifest/list", () => manifests);
-  hass.mockWS("manifest/get", (msg: { integration: string }) =>
-    manifests.find((m) => m.domain === msg.integration)
-  );
-};
@@ -1,13 +0,0 @@
-import type { NetworkUrls } from "../../../src/data/network";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockNetwork = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "network/url",
-    (): NetworkUrls => ({
-      internal: "http://homeassistant.local:8123",
-      external: "https://demo-instance.ui.nabu.casa",
-      cloud: "https://demo-instance.ui.nabu.casa",
-    })
-  );
-};
@@ -1,20 +0,0 @@
-import type { Person } from "../../../src/data/person";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const storage: Person[] = [
-  {
-    id: "demo_user",
-    name: "Demo User",
-    user_id: "abcd",
-    device_trackers: [],
-  },
-  {
-    id: "anne_therese",
-    name: "Anne Therese",
-    device_trackers: [],
-  },
-];
-
-export const mockPerson = (hass: MockHomeAssistant) => {
-  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
-};
@@ -1,18 +0,0 @@
-import type { SceneConfig } from "../../../src/data/scene";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const demoSceneConfig = (id: string): SceneConfig => ({
-  id,
-  name: "Demo scene",
-  entities: {
-    "light.bed_light": { state: "on" },
-  },
-});
-
-export const mockScene = (hass: MockHomeAssistant) => {
-  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
-    const id = path.split("/").pop()!;
-    // GET returns the config; POST/DELETE just acknowledge.
-    return method === "GET" ? demoSceneConfig(id) : {};
-  });
-};
@@ -1,7 +0,0 @@
-import type { RelatedResult } from "../../../src/data/search";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSearch = (hass: MockHomeAssistant) => {
-  // The demo has no relationship graph, so report no related items.
-  hass.mockWS("search/related", (): RelatedResult => ({}));
-};
@@ -1,37 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSystemHealth = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "system_health/info",
-    (_msg, _hass, onChange?: (event: any) => void) => {
-      // Defer so the consumer's unsubscribe handle is initialized first
-      // (real WS events arrive asynchronously).
-      setTimeout(() => {
-        onChange?.({
-          type: "initial",
-          data: {
-            homeassistant: {
-              info: {
-                version: "DEMO",
-                installation_type: "Home Assistant OS",
-                dev: false,
-                hassio: true,
-                docker: true,
-                container_arch: "aarch64",
-                user: "root",
-                virtualenv: false,
-                python_version: "3.13.0",
-                os_name: "Linux",
-                os_version: "6.6.0",
-                arch: "aarch64",
-                timezone: "America/Los_Angeles",
-                config_dir: "/config",
-              },
-            },
-          },
-        });
-      });
-      return () => undefined;
-    }
-  );
-};
@@ -1,33 +1,5 @@
-import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

-const now = Date.now() / 1000;
-
-const logs: LoggedError[] = [
-  {
-    name: "homeassistant.components.demo",
-    message: ["Demo integration failed to update sensor data"],
-    level: "warning",
-    source: ["components/demo/sensor.py", 142],
-    exception: "",
-    count: 2,
-    timestamp: now - 120,
-    first_occurred: now - 3600,
-  },
-  {
-    name: "homeassistant.config_entries",
-    message: ["Config entry for met.no could not be set up"],
-    level: "error",
-    source: ["config_entries.py", 512],
-    exception:
-      'Traceback (most recent call last):\n  File "config_entries.py", line 512',
-    count: 1,
-    timestamp: now - 600,
-    first_occurred: now - 600,
-  },
-];
-
 export const mockSystemLog = (hass: MockHomeAssistant) => {
  hass.mockAPI("error/all", () => []);
-  hass.mockWS("system_log/list", () => logs);
 };
@@ -1,27 +0,0 @@
-import type { Zone } from "../../../src/data/zone";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const zones: Zone[] = [
-  {
-    id: "home",
-    name: "Home",
-    icon: "mdi:home",
-    latitude: 52.3731339,
-    longitude: 4.8903147,
-    radius: 100,
-    passive: false,
-  },
-  {
-    id: "work",
-    name: "Work",
-    icon: "mdi:briefcase",
-    latitude: 52.3909184,
-    longitude: 4.8530821,
-    radius: 200,
-    passive: false,
-  },
-];
-
-export const mockZone = (hass: MockHomeAssistant) => {
-  hass.mockWS("zone/list", () => zones);
-};
@@ -1,7 +1,5 @@
 // @ts-check

-import { fileURLToPath } from "node:url";
-
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
 import js from "@eslint/js";
@@ -13,10 +11,6 @@ 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,
@@ -56,7 +50,7 @@ export default tseslint.config(
    settings: {
      "import-x/resolver": {
        webpack: {
-          config: rspackConfigPath,
+          config: "./rspack.config.cjs",
        },
      },
    },
@@ -1,123 +0,0 @@
-# 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`.
-
-### Subsections
-
-A section can group its pages under named subsections instead of one flat list. Use this for large categories where related pages should sit together.
-
- `subsections` is an array of `{ header, pages }`. It is mutually exclusive with a flat `pages` array on the same group.
- Each subsection `header` is a non-collapsible label rendered inside the section's expansion panel; the section stays the only collapsible level.
- Listed pages keep their per-subsection order.
- Any pages found in the category but not listed in a subsection are collected into a generated `Other` subsection, appended alphabetically. The `Other` subsection is omitted when there are no leftovers.
- A listed page that does not exist still logs an error during `gather-gallery-pages`.
- Use sentence case for subsection headers and follow the content standards below.
-
-## 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,237 +1,56 @@
-import {
-  mdiAccountGroup,
-  mdiCalendarClock,
-  mdiDotsHorizontal,
-  mdiHome,
-  mdiInformationOutline,
-  mdiPalette,
-  mdiPuzzle,
-  mdiRobot,
-  mdiViewDashboard,
-} from "@mdi/js";
-
-// A group may list its pages flat in `pages`, or group them under named
-// `subsections`. The two are mutually exclusive. Listed pages keep their order;
-// any pages found in the category but not listed are appended alphabetically
-// (to a generated "Other" subsection when the group uses subsections).
 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",
-    subsections: [
-      {
-        header: "Form and selectors",
-        pages: [
-          "ha-form",
-          "ha-selector",
-          "ha-select-box",
-          "ha-input",
-          "ha-textarea",
-        ],
-      },
-      {
-        header: "Controls and sliders",
-        pages: [
-          "ha-button",
-          "ha-control-button",
-          "ha-progress-button",
-          "ha-switch",
-          "ha-control-switch",
-          "ha-slider",
-          "ha-control-slider",
-          "ha-control-circular-slider",
-          "ha-control-number-buttons",
-          "ha-control-select",
-          "ha-control-select-menu",
-          "ha-hs-color-picker",
-        ],
-      },
-      {
-        header: "Overlays",
-        pages: [
-          "ha-dialog",
-          "ha-dialogs",
-          "ha-adaptive-dialog",
-          "ha-adaptive-popover",
-          "ha-dropdown",
-          "ha-tooltip",
-        ],
-      },
-      {
-        header: "Lists and disclosure",
-        pages: ["ha-list", "ha-expansion-panel", "ha-faded"],
-      },
-      {
-        header: "Feedback and status",
-        pages: ["ha-alert", "ha-spinner", "ha-tip", "ha-bar", "ha-gauge"],
-      },
-      {
-        header: "Labels and text",
-        pages: ["ha-badge", "ha-label-badge", "ha-chips", "ha-marquee-text"],
-      },
-    ],
-  },
  {
    category: "lovelace",
-    icon: mdiViewDashboard,
    // Label for in the sidebar
    header: "Dashboards",
-    subsections: [
-      {
-        header: "Introduction",
-        pages: ["introduction"],
-      },
-      {
-        header: "Entity cards",
-        pages: [
-          "entities-card",
-          "entity-button-card",
-          "entity-filter-card",
-          "glance-card",
-          "tile-card",
-          "area-card",
-        ],
-      },
-      {
-        header: "Picture cards",
-        pages: [
-          "picture-card",
-          "picture-elements-card",
-          "picture-entity-card",
-          "picture-glance-card",
-        ],
-      },
-      {
-        header: "Domain cards",
-        pages: [
-          "light-card",
-          "thermostat-card",
-          "alarm-panel-card",
-          "gauge-card",
-          "plant-card",
-          "map-card",
-          "media-control-card",
-          "media-player-row",
-        ],
-      },
-      {
-        header: "Layout and utility",
-        pages: [
-          "grid-and-stack-card",
-          "conditional-card",
-          "iframe-card",
-          "markdown-card",
-          "todo-list-card",
-        ],
-      },
-    ],
-  },
-  {
-    category: "more-info",
-    icon: mdiInformationOutline,
-    header: "More Info dialogs",
-    subsections: [
-      {
-        header: "Climate and water",
-        pages: ["climate", "humidifier", "water-heater", "fan"],
-      },
-      {
-        header: "Covers and access",
-        pages: ["cover", "lock", "lawn-mower", "vacuum"],
-      },
-      {
-        header: "Lighting",
-        pages: ["light", "scene"],
-      },
-      {
-        header: "Media",
-        pages: ["media-player"],
-      },
-      {
-        header: "Inputs and values",
-        pages: ["input-number", "input-text", "number", "timer"],
-      },
-      {
-        header: "System",
-        pages: ["update"],
-      },
-    ],
+    // 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: "automation",
-    icon: mdiRobot,
    header: "Automation",
-    subsections: [
-      {
-        header: "Editors",
-        pages: ["editor-trigger", "editor-condition", "editor-action"],
-      },
-      {
-        header: "Descriptions",
-        pages: ["describe-trigger", "describe-condition", "describe-action"],
-      },
-      {
-        header: "Traces",
-        pages: ["trace", "trace-timeline"],
-      },
+    pages: [
+      "editor-trigger",
+      "editor-condition",
+      "editor-action",
+      "trace",
+      "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",
-    subsections: [
-      {
-        header: "Date",
-        pages: ["date"],
-      },
-      {
-        header: "Time",
-        pages: ["time", "time-seconds", "time-weekday"],
-      },
-      {
-        header: "Combined",
-        pages: [
-          "date-time",
-          "date-time-numeric",
-          "date-time-seconds",
-          "date-time-short",
-          "date-time-short-year",
-        ],
-      },
-    ],
  },
  {
-    category: "misc",
-    icon: mdiDotsHorizontal,
-    header: "Miscellaneous",
-    pages: [
-      "entity-state",
-      "ha-markdown",
-      "integration-card",
-      "box-shadow",
-      "util-long-press",
-      "remove-delete-add-create",
-      "editing",
-    ],
+    category: "design.home-assistant.io",
+    header: "About",
  },
 ];
@@ -1,121 +0,0 @@
-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,83 +1,25 @@
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } from "lit";
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 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({ attribute: false }) value?: unknown;
+  @property() value?: any;

  @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">
-        <section class="content current" aria-label=${currentLabel}>
-          <h2>${currentLabel}</h2>
+        <div class="content light">
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="light"></slot>
@@ -88,9 +30,8 @@ class DemoBlackWhiteRow extends LitElement {
              </ha-button>
            </div>
          </ha-card>
-        </section>
-        <section class="content flipped" aria-label=${flippedLabel}>
-          <h2>${flippedLabel}</h2>
+        </div>
+        <div class="content dark">
          <ha-card .header=${this.title}>
            <div class="card-content">
              <slot name="dark"></slot>
@@ -104,84 +45,65 @@ class DemoBlackWhiteRow extends LitElement {
          ${this.value
            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
            : nothing}
-        </section>
+        </div>
      </div>
    `;
  }

-  handleSubmit(ev: Event) {
-    const content = (ev.target as HaButton).closest(".content");
-    if (!content) {
-      return;
-    }
-
-    fireEvent(this, "submitted" as any, {
-      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
+  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) {
+    const content = (ev.target as HaButton).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
  static styles = css`
-    :host {
-      display: block;
-      flex: 1;
-      min-block-size: 100%;
-    }
    .row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      inline-size: 100%;
-      min-block-size: 100%;
+      display: flex;
    }
    .content {
-      box-sizing: border-box;
-      min-inline-size: 0;
-      padding: var(--ha-space-8);
+      padding: 50px 0;
      background-color: var(--primary-background-color);
-      color: var(--primary-text-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
    }
    ha-card {
-      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);
+      width: 400px;
    }
    pre {
-      box-sizing: border-box;
-      width: 100%;
-      margin: 0;
+      width: 300px;
+      margin: 0 16px 0;
      overflow: auto;
      color: var(--primary-text-color);
    }
@@ -190,18 +112,27 @@ class DemoBlackWhiteRow extends LitElement {
      flex-direction: row-reverse;
      border-top: none;
    }
-    @media only screen and (max-width: 1000px) {
-      .row {
-        grid-template-columns: 1fr;
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
      }
-      .content {
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
        padding: 16px;
      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
      ha-card {
+        margin: 0 auto;
        width: 100%;
+        max-width: 400px;
      }
      pre {
-        margin: 0;
+        margin: 16px auto;
      }
    }
  `;
@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, 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";
@@ -15,12 +16,17 @@ 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">
@@ -42,6 +48,12 @@ 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,5 +1,6 @@
 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";
@@ -20,6 +21,9 @@ 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">
@@ -47,16 +51,33 @@ class DemoMoreInfos extends LitElement {
      justify-content: center;
    }
    demo-more-info {
-      margin: var(--ha-space-4) var(--ha-space-4) var(--ha-space-8);
+      margin: 16px 16px 32px;
    }
    ha-formfield {
-      margin-right: var(--ha-space-4);
+      margin-right: 16px;
    }
  `;

  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 {
@@ -1,153 +0,0 @@
-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;
-  }
-}
@@ -1,87 +0,0 @@
-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,10 +13,13 @@ class PageDescription extends HaMarkdown {
      return nothing;
    }

-    const subtitle = PAGES[this.page].metadata.subtitle;
-
    return html`
-      ${subtitle ? html`<div class="subtitle">${subtitle}</div>` : nothing}
+      <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>
      ${until(
        PAGES[this.page]
          .description()
@@ -29,9 +32,16 @@ class PageDescription extends HaMarkdown {
  static styles = [
    HaMarkdown.styles,
    css`
-      .subtitle {
+      .heading {
        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,9 +16,22 @@ class HaDemoOptions extends LitElement {
    css`
      :host {
        display: block;
-        background-color: var(--primary-background-color);
+        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);
        position: relative;
-        padding: var(--ha-space-2) var(--ha-space-16) var(--ha-space-1);
+        height: 64px;
+        padding: 0 16px;
+        pointer-events: none;
        font-size: var(--ha-font-size-xl);
      }
    `,
@@ -1,194 +1,161 @@
-import { mdiCog, mdiMenu } from "@mdi/js";
-import type { Connection } from "home-assistant-js-websocket";
+import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } 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/";

-interface GalleryPage {
-  metadata: Record<string, unknown>;
-  description?: unknown;
-  demo?: unknown;
-}
-
-interface GallerySidebarSubsection {
-  header: string;
-  pages: string[];
-}
-
-interface GallerySidebarGroup {
-  category: string;
-  header?: string;
-  icon?: string;
-  pages?: string[];
-  subsections?: GallerySidebarSubsection[];
-}
-
-const groupPages = (group: GallerySidebarGroup): string[] =>
-  group.subsections
-    ? group.subsections.flatMap((subsection) => subsection.pages)
-    : (group.pages ?? []);
-
-const GALLERY_SIDEBAR = SIDEBAR as GallerySidebarGroup[];
-const DEFAULT_PAGE = `${GALLERY_SIDEBAR[0].category}/${groupPages(GALLERY_SIDEBAR[0])[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);
+const FAKE_HASS = {
+  // Just enough for computeRTL for notification-manager
+  language: "en",
+  translationMetadata: {
+    translations: {},
  },
-  sendMessagePromise() {
-    return Promise.resolve({ value: null });
-  },
-} as unknown as Connection;
+};

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

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

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

-  @state() private _drawerOpen = !this._narrow;
-
  render() {
-    const isSettingsPage = this._page === SETTINGS_PAGE;
-    const page = isSettingsPage ? undefined : PAGES[this._page];
+    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
+      );
+    }

    return html`
      <ha-drawer
        .direction=${this._rtl ? "rtl" : "ltr"}
-        .open=${this._drawerOpen}
+        .open=${!this._narrow}
        .type=${this._narrow ? "modal" : "dismissible"}
      >
-        <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 class="drawer-title">Home Assistant Design</div>
+        <div class="sidebar">${sidebar}</div>
        <div slot="appContent" class="app-content">
-          <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}
+          <ha-top-app-bar-fixed>
+            <ha-icon-button
+              slot="navigationIcon"
+              @click=${this._menuTapped}
+              .path=${mdiMenu}
+            ></ha-icon-button>

            <div slot="title">
-              ${isSettingsPage
-                ? "Settings"
-                : page?.metadata.title || this._page.split("/")[1]}
+              ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
            </div>
-            <div class="content">
-              ${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 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>
+          </div>
        </div>
      </ha-drawer>
      <notification-manager
-        .hass=${this._galleryHass}
+        .hass=${FAKE_HASS}
        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 })
@@ -204,26 +171,16 @@ class HaGallery extends LitElement {
      }
    });

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

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

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

@@ -231,354 +188,37 @@ 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();
    }

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

-  private async _scrollSelectedNavigationItemIntoView() {
-    const menuItem = this._selectedNavigationItem;
-
-    if (!menuItem) {
-      return;
-    }
-
-    // Make sure section is expanded before measuring the selected item.
+    // Make sure section is expanded
    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 _renderSidebarNavigation() {
-    const sidebar: unknown[] = [];
-
-    for (const group of GALLERY_SIDEBAR) {
-      const expanded = groupPages(group).some(
-        (page) => this._page === `${group.category}/${page}`
-      );
-
-      const content = group.subsections
-        ? group.subsections.map((subsection) =>
-            this._renderSidebarSubsection(group, subsection)
-          )
-        : this._renderPageLinks(group, group.pages ?? []);
-
-      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}
-                ${content}
-              </ha-expansion-panel>
-            `
-          : content
-      );
-    }
-
-    return sidebar;
+  private _menuTapped() {
+    this._drawer.open = !this._drawer.open;
  }

-  private _renderSidebarSubsection(
-    group: GallerySidebarGroup,
-    subsection: GallerySidebarSubsection
-  ) {
-    return html`
-      <div class="gallery-sidebar-subheader">${subsection.header}</div>
-      ${this._renderPageLinks(group, subsection.pages)}
-    `;
-  }
-
-  private _renderPageLinks(group: GallerySidebarGroup, pages: string[]) {
-    const links: unknown[] = [];
-    for (const page of 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
-        )
-      );
-    }
-    return links;
-  }
-
-  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 _toggleRtl() {
+    this._rtl = !this._rtl;
+    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
  }

  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`
@@ -586,113 +226,49 @@ class HaGallery extends LitElement {
        -ms-user-select: initial;
        -webkit-user-select: initial;
        -moz-user-select: initial;
-        --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);
+        --ha-sidebar-width: 256px;
+        --header-height: 64px;
      }

-      .gallery-sidebar-section {
-        color: var(--sidebar-text-color);
+      .sidebar {
        box-sizing: border-box;
-        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);
+        max-height: calc(100vh - var(--header-height));
+        overflow-y: auto;
+        padding: 4px;
      }

-      .gallery-sidebar-section::part(summary) {
-        min-height: var(--ha-space-10);
-        border-radius: var(--ha-border-radius-sm);
+      .drawer-title {
+        align-items: center;
        box-sizing: border-box;
-      }
-
-      .gallery-sidebar-section .gallery-nav-item {
-        margin-inline-start: var(--ha-space-4);
-        width: var(--ha-sidebar-expanded-section-item-width, 248px);
-      }
-
-      .gallery-sidebar-subheader {
-        margin: var(--ha-space-2) var(--ha-space-4) var(--ha-space-1);
-        color: var(--secondary-text-color);
-        font-size: var(--ha-font-size-s);
+        color: var(--primary-text-color);
+        display: flex;
+        font-size: var(--ha-font-size-l);
        font-weight: var(--ha-font-weight-medium);
-        line-height: var(--ha-line-height-condensed);
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
+        min-height: var(--header-height);
+        padding: 0 16px;
      }

-      .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);
+      .sidebar a {
+        color: var(--primary-text-color);
+        display: block;
+        padding: 12px;
+        text-decoration: none;
        position: relative;
-        width: var(--ha-sidebar-expanded-item-width, 248px);
-        color: var(--sidebar-text-color);
      }

-      .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);
+      .sidebar a[active]::before {
+        border-radius: var(--ha-border-radius-lg);
        position: absolute;
        top: 0;
-        right: 0;
+        right: 2px;
        bottom: 0;
-        left: 0;
+        left: 2px;
        pointer-events: none;
        content: "";
+        transition: opacity 15ms linear;
+        will-change: opacity;
        background-color: var(--sidebar-selected-icon-color);
-        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);
+        opacity: 0.12;
      }

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

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

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

      .page-footer {
@@ -753,6 +324,18 @@ 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 } from "lit";
+import type { TemplateResult, 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 "../../../../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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-alert ${mode} demo">
              <div class="card-content">
                ${alerts.map(
                  (alert) => html`
@@ -154,19 +154,43 @@ export class DemoHaAlert extends LitElement {
                )}
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    ha-alert {
      display: block;
@@ -1,12 +1,12 @@
 import { mdiButtonCursor, mdiHome } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { TemplateResult, 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 "../../../../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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
              <div class="card-content">
                ${badges.map(
                  (badge) => html`
@@ -78,23 +78,45 @@ export class DemoHaBadge extends LitElement {
                )}
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
-      flex-wrap: wrap;
      gap: var(--ha-space-6);
    }
  `;
@@ -1,13 +1,13 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { TemplateResult, 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 { 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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-button in ${mode}">
              <div class="card-content">
                ${variants.map(
                  (variant) => html`
@@ -112,22 +112,45 @@ export class DemoHaButton extends LitElement {
                )}
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -136,7 +159,6 @@ 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>
+      <ha-card header="ha-chip demo">
        <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,11 +9,9 @@ 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;
@@ -47,72 +45,106 @@ const switches: {
 export class DemoHaControlSwitch extends LitElement {
  @state() private checked = false;

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

  protected render(): TemplateResult {
    return html`
-      <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`
+      <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>
                      <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>
-              </div>
-            </ha-card>
+              </ha-card>
+            </div>
          `
        )}
-      </demo-theme-comparison>
+      </div>
    `;
  }

+  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 {
-      margin: 0;
-      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
    }
    pre {
      margin-top: 0;
@@ -8,25 +8,25 @@ import {
  mdiContentPaste,
  mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { TemplateResult, 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 "../../../../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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-button in ${mode}">
              <div class="card-content">
                <ha-dropdown>
                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
@@ -74,22 +74,45 @@ export class DemoHaDropdown extends LitElement {
                </ha-dropdown>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .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>
+      <ha-card header="ha-faded demo">
        <div class="card-content">
          <h3>Long text directly as slotted content</h3>
          <ha-faded>${LONG_TEXT}</ha-faded>
@@ -1,8 +1,9 @@
 import { ContextProvider } from "@lit/context";
 import { mdiMagnify } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { TemplateResult, 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 "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/input/ha-input";
@@ -10,15 +11,6 @@ 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",
@@ -30,25 +22,6 @@ 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() {
@@ -56,171 +29,185 @@ export class DemoHaInput extends LitElement {
    // Provides internationalizationContext for ha-input-copy, ha-input-multi and ha-input-search
    new ContextProvider(this, {
      context: internationalizationContext,
-      initialValue: DEMO_I18N,
+      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,
+      },
    });
  }

  protected render(): TemplateResult {
    return html`
-      <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>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>
-                  </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>
+      ${["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>
-              </ha-card>

-              <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>
+                <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>
-              </ha-card>
-            </div>
-          `
-        )}
-      </demo-theme-comparison>
+                <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>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>
+
+            <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>
+        `
+      )}
    `;
  }

+  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: block;
-    }
-    .panel-content {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-6);
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
    }
    ha-card {
-      margin: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -237,11 +224,10 @@ export class DemoHaInput extends LitElement {
    }
    .row {
      display: flex;
-      flex-wrap: wrap;
      gap: var(--ha-space-4);
    }
    .row > * {
-      flex: 1 1 180px;
+      flex: 1;
    }
  `;
 }
@@ -1,21 +1,20 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-progress-button in ${mode}">
              <div class="card-content">
                <ha-progress-button @click=${this._clickedSuccess}>
                  Success
@@ -60,17 +59,32 @@ export class DemoHaProgressButton extends LitElement {
                </ha-progress-button>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </div>
+        `
+      )}
    `;
  }

-  private _clickedSuccess(
-    ev: HASSDomCurrentTargetEvent<HTMLElementTagNameMap["ha-progress-button"]>
-  ) {
+  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> {
    console.log("Clicked success");
-    const button = ev.currentTarget;
+    const button = ev.currentTarget as any;
    button.progress = true;

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

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

    setTimeout(() => {
@@ -93,14 +105,20 @@ 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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -1,5 +1,4 @@
-import { ContextProvider } from "@lit/context";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
@@ -15,11 +14,6 @@ import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import {
-  configContext,
-  internationalizationContext,
-} from "../../../../src/data/context";
-import { updateHassGroups } from "../../../../src/data/context/updateContext";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
@@ -524,17 +518,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {

  private data = SCHEMAS.map(() => ({}));

-  // The date/datetime selectors and the date-picker dialog consume these
-  // contexts (provided by the root element in the real app). Provide them here
-  // so they work in the gallery.
-  private _i18nProvider = new ContextProvider(this, {
-    context: internationalizationContext,
-  });
-
-  private _configProvider = new ContextProvider(this, {
-    context: configContext,
-  });
-
  constructor() {
    super();
    const hass = provideHass(this);
@@ -556,16 +539,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
    el.hass = this.hass;
  }

-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("hass") && this.hass) {
-      this._i18nProvider.setValue(
-        updateHassGroups.internationalization(this.hass)
-      );
-      this._configProvider.setValue(updateHassGroups.config(this.hass));
-    }
-  }
-
  public connectedCallback() {
    super.connectedCallback();
    this.addEventListener("show-dialog", this._dialogManager);
@@ -1,12 +1,12 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-slider ${mode} demo">
              <div class="card-content">
                <span>Default (disabled)</span>
                <ha-slider
@@ -45,19 +45,44 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -1,11 +1,11 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
              <div class="card-content">
                <ha-spinner></ha-spinner>
                <ha-spinner size="tiny"></ha-spinner>
@@ -27,19 +27,44 @@ export class DemoHaSpinner extends LitElement {
                <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -1,10 +1,10 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-switch ${mode}">
              <div class="card-content">
                <div class="row">
                  <span>Unchecked</span>
@@ -35,19 +35,44 @@ export class DemoHaSwitch extends LitElement {
                </div>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -1,23 +1,18 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, 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 "../../../../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`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <ha-card slot=${slot}>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-textarea in ${mode}">
              <div class="card-content">
                <h3>Basic</h3>
                <div class="row">
@@ -43,11 +38,6 @@ 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>
@@ -94,19 +84,42 @@ export class DemoHaTextarea extends LitElement {
                </div>
              </div>
            </ha-card>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -1,19 +1,12 @@
 import { provide } from "@lit/context";
-import type { TemplateResult } from "lit";
+import type { PropertyValues, 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",
@@ -21,57 +14,68 @@ 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 = DEMO_I18N;
+  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 render(): TemplateResult {
-    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>
-    `;
+    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
+    );
  }

  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: 0;
-      width: 100%;
+      margin: 24px auto;
    }
  `;
 }
@@ -4,30 +4,21 @@ title: Home

 # Welcome to Home Assistant Design

-This is the design gallery for the Home Assistant frontend: a living reference of working components, dashboard cards, and brand and copy guidance. Every page runs outside a Home Assistant instance, so you can explore the interface, try components in isolation, and review changes against a consistent baseline.
+This portal aims to aid designers and developers on improving the Home Assistant interface. It consists of working code, resources and guidelines.

-## Browse the gallery
+## Home Assistant interface

- [Brand](#brand/logo): the logo, personality, and the story behind the Open Home.
- [Components](#components/ha-button): the `ha-*` component library with live demos and API notes.
- [Dashboards](#lovelace/introduction): Lovelace cards rendered from real card configuration.
- [More Info dialogs](#more-info/light): the more-info experience for each entity type.
- [Automation](#automation/editor-trigger): trigger, condition, and action editors, plus trace views.
- [Users](#user-test/user-types): the audiences we design for.
- [Date and time](#date-time/date): date and time formatting examples.
- [Miscellaneous](#misc/entity-state): smaller utilities and patterns, plus how to edit this gallery.
+The Home Assistant frontend allows users to browse and control the state of their home, manage their automations and configure integrations. The frontend is designed as a mobile-first experience. It is a progressive web application and offers an app-like experience to our users. The Home Assistant frontend needs to be fast. But it also needs to work on a wide range of old devices.

-## Testing and playground
+### Material Design

-Every page runs against fake state, so you can interact with components safely and reproducibly. Treat the demo pages as a playground: change a value, resize the window, or switch the layout to right-to-left to check spacing and direction. Use the gallery to reproduce a UI state in isolation before debugging it in a full Home Assistant setup.
-
-Open **Settings** from the gear icon in the sidebar to switch between light and dark themes or preview the interface in right-to-left.
+The Home Assistant interface is based on Material Design. It's a design system created by Google to quickly build high-quality digital experiences. Components and guidelines that are custom made for Home Assistant are documented on this portal. For all other components check <a href="https://material.io" rel="noopener noreferrer" target="_blank">material.io</a>.

 ## Designers

-We want to make it as easy for designers to contribute as it is for developers. There's a lot a designer can contribute to:
+We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:

- Meet us in the <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
+- Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
 - Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!

@@ -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`. After the first build finishes, the command prints the local URL for 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`. It will automatically open a browser window and load the development version of the website.

 ## Creating a page

@@ -1,6 +1,7 @@
+import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";

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

@@ -8,32 +9,67 @@ const SHADOWS = ["s", "m", "l"] as const;
 export class DemoMiscBoxShadow extends LitElement {
  protected render() {
    return html`
-      <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>
+      ${["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>
+                `
+              )}
            </div>
-          `
-        )}
-      </demo-theme-comparison>
+          </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
+    );
+  }
+
  static styles = css`
    :host {
-      display: block;
+      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;
    }

    .grid {
@@ -372,6 +372,7 @@ export class DemoEntityState extends LitElement {
              hass.localize,
              entry.stateObj,
              hass.locale,
+              [], // numericDeviceClasses
              hass.config,
              hass.entities
            )}`,
@@ -21,7 +21,6 @@
    "prepack": "pinst --disable",
    "postpack": "pinst --enable",
    "test": "vitest run --config test/vitest.config.ts",
-    "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
  },
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@@ -30,26 +29,26 @@
  "dependencies": {
    "@babel/runtime": "7.29.7",
    "@braintree/sanitize-url": "7.1.2",
-    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/autocomplete": "6.20.2",
    "@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.7",
+    "@codemirror/lint": "6.9.6",
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.43.1",
+    "@codemirror/view": "6.43.0",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@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",
+    "@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",
    "@fullcalendar/core": "6.1.20",
    "@fullcalendar/daygrid": "6.1.20",
    "@fullcalendar/interaction": "6.1.20",
@@ -71,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.3",
-    "@tsparticles/preset-links": "4.1.3",
+    "@tsparticles/engine": "4.1.2",
+    "@tsparticles/preset-links": "4.1.2",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -89,13 +88,13 @@
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.4.2",
+    "fuse.js": "7.4.1",
    "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.8",
+    "intl-messageformat": "11.2.7",
    "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",
@@ -103,7 +102,7 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.5",
+    "marked": "18.0.4",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -132,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.62.0",
+    "@html-eslint/eslint-plugin": "0.61.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.13",
-    "@rspack/core": "2.0.8",
+    "@rsdoctor/rspack-plugin": "1.5.12",
+    "@rspack/core": "2.0.6",
    "@rspack/dev-server": "2.0.3",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -154,12 +153,12 @@
    "@types/qrcode": "1.5.6",
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
-    "@vitest/coverage-v8": "4.1.9",
+    "@vitest/coverage-v8": "4.1.8",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.5.0",
+    "eslint": "10.4.1",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.16.2",
@@ -187,17 +186,17 @@
    "lodash.template": "4.18.1",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
-    "prettier": "3.8.4",
-    "rspack-manifest-plugin": "5.2.2",
+    "prettier": "3.8.3",
+    "rspack-manifest-plugin": "5.2.1",
    "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.61.0",
+    "typescript-eslint": "8.60.1",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.9",
+    "vitest": "4.1.8",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -213,8 +212,8 @@
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
    "glob@^10.2.2": "^10.5.0"
  },
-  "packageManager": "yarn@4.17.0",
+  "packageManager": "yarn@4.16.0",
  "volta": {
-    "node": "24.17.0"
+    "node": "24.16.0"
  }
 }
@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-# Safe bash settings
-# -e            Exit on command fail
-# -u            Exit on unset variable
-# -o pipefail   Exit if piped command has error code
-set -eu -o pipefail
-
-cd "$(dirname "$0")/.."
-
-./node_modules/.bin/gulp gen-numeric-device-classes
@@ -5,7 +5,7 @@ import { isComponentLoaded } from "./is_component_loaded";

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

 export const isLoadedIntegration = (
  hass: HomeAssistant,
@@ -16,4 +16,13 @@ export const isLoadedIntegration = (
    isComponentLoaded(hass.config, integration)
  );

+export const isNotLoadedIntegration = (
+  hass: HomeAssistant,
+  page: PageNavigation
+) =>
+  !page.not_component ||
+  !ensureArray(page.not_component).some((integration) =>
+    isComponentLoaded(hass.config, integration)
+  );
+
 export const isCore = (page: PageNavigation) => page.core;
@@ -110,25 +110,6 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
  "media_player",
 ]);

-/** Domains that use a timestamp for state. */
-export const TIMESTAMP_STATE_DOMAINS = new Set([
-  "ai_task",
-  "button",
-  "conversation",
-  "event",
-  "image",
-  "infrared",
-  "input_button",
-  "notify",
-  "radio_frequency",
-  "scene",
-  "stt",
-  "tag",
-  "tts",
-  "wake_word",
-  "datetime",
-]);
-
 /** Temperature units. */
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";
@@ -3,24 +3,23 @@ import type { FrontendLocaleData } from "../../data/translation";
 import { selectUnit } from "../util/select-unit";

 const formatRelTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, style: Intl.RelativeTimeFormatStyle) =>
-    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto", style })
+  (locale: FrontendLocaleData) =>
+    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
 );

 export const relativeTime = (
  from: Date,
  locale: FrontendLocaleData,
  to?: Date,
-  includeTense = true,
-  style: Intl.RelativeTimeFormatStyle = "long"
+  includeTense = true
 ): string => {
  const diff = selectUnit(from, to, locale);
  if (includeTense) {
-    return formatRelTimeMem(locale, style).format(diff.value, diff.unit);
+    return formatRelTimeMem(locale).format(diff.value, diff.unit);
  }
  return Intl.NumberFormat(locale.language, {
    style: "unit",
    unit: diff.unit,
-    unitDisplay: style,
+    unitDisplay: "long",
  }).format(Math.abs(diff.value));
 };
@@ -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", url: string, type?: "module") =>
+const _load = (tag: "link" | "script" | "img", 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,4 +33,5 @@ const _load = (tag: "link" | "script", 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");
@@ -0,0 +1,41 @@
+/**
+ * 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,6 +3,8 @@ 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,
@@ -43,6 +45,17 @@ 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}${
@@ -0,0 +1,3 @@
+/** An empty image which can be set as src of an img element. */
+export const emptyImageBase64 =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
@@ -60,17 +60,6 @@ export const computeAttributeValueToParts = (
    return [{ type: "value", value: localize("state.default.unknown") }];
  }

-  // Device class attribute, return the integration's translated name
-  if (attribute === "device_class" && typeof attributeValue === "string") {
-    const domain = computeStateDomain(stateObj);
-    const deviceClassName = localize(
-      `component.${domain}.entity_component.${attributeValue}.name`
-    );
-    if (deviceClassName) {
-      return [{ type: "value", value: deviceClassName }];
-    }
-  }
-
  // Number value, return formatted number
  if (typeof attributeValue === "number") {
    const domain = computeStateDomain(stateObj);
@@ -30,7 +30,7 @@ export const computeEntityEntryName = (
  fallbackStateObj?: HassEntity
 ): string | undefined => {
  const name =
-    entry.name ??
+    entry.name ||
    ("original_name" in entry && entry.original_name != null
      ? String(entry.original_name)
      : undefined);
@@ -59,8 +59,7 @@ export const computeEntityEntryName = (
    return stripPrefixFromEntityName(name, deviceName) || name;
  }

-  // Empty name = main entity → undefined, so callers fall back to the device name.
-  return name || undefined;
+  return name;
 };

 export const entityUseDeviceName = (
@@ -17,33 +17,13 @@ import {
 import { blankBeforeUnit } from "../translations/blank_before_unit";
 import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
-import {
-  isNumericSensorDeviceClass,
-  SENSOR_TIMESTAMP_DEVICE_CLASSES,
-} from "../../data/sensor";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";
-
-// Domains whose state is a timezone-agnostic date and/or time string.
-const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
-
-// 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",
-};
-
-const NUMERICAL_DOMAINS = ["counter", "input_number", "number"];
+import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";

 export const computeStateDisplay = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entities: HomeAssistant["entities"],
  state?: string
@@ -54,6 +34,7 @@ export const computeStateDisplay = (
  return computeStateDisplayFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    stateObj.entity_id,
@@ -65,6 +46,7 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
  localize: LocalizeFunc,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entity: EntityRegistryDisplayEntry | undefined,
  entityId: string,
@@ -74,6 +56,7 @@ export const computeStateDisplayFromEntityAttributes = (
  const parts = computeStateToPartsFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    entityId,
@@ -86,6 +69,7 @@ export const computeStateDisplayFromEntityAttributes = (
 const computeStateToPartsFromEntityAttributes = (
  localize: LocalizeFunc,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entity: EntityRegistryDisplayEntry | undefined,
  entityId: string,
@@ -102,15 +86,15 @@ const computeStateToPartsFromEntityAttributes = (
  }

  const domain = computeDomain(entityId);
-  const isNumberDomain = NUMERICAL_DOMAINS.includes(domain);
-  const isSensorDomain = domain === "sensor";
-
-  // Numeric values (by attributes, number domain,
-  // or numeric sensor device class) use formatNumber.
+  const is_number_domain =
+    domain === "counter" || domain === "number" || domain === "input_number";
+  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
  if (
-    isNumericFromAttributes(attributes) ||
-    isNumberDomain ||
-    (isSensorDomain && isNumericSensorDeviceClass(attributes.device_class))
+    isNumericFromAttributes(
+      attributes,
+      domain === "sensor" ? sensorNumericDeviceClasses : []
+    ) ||
+    is_number_domain
  ) {
    // state is duration
    if (
@@ -154,10 +138,21 @@ 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 = MONETARY_TYPE_MAP[part.type];
+          const type = TYPE_MAP[part.type];
          if (!type) continue;
          const last = valueParts[valueParts.length - 1];
          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
@@ -196,7 +191,7 @@ const computeStateToPartsFromEntityAttributes = (
    return [{ type: "value", value: value }];
  }

-  if (DATE_TIME_DOMAINS.has(domain)) {
+  if (["date", "input_datetime", "time"].includes(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`.

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

  // state is a timestamp
  if (
-    TIMESTAMP_STATE_DOMAINS.has(domain) ||
+    [
+      "ai_task",
+      "button",
+      "conversation",
+      "event",
+      "image",
+      "infrared",
+      "input_button",
+      "notify",
+      "radio_frequency",
+      "scene",
+      "stt",
+      "tag",
+      "tts",
+      "wake_word",
+      "datetime",
+    ].includes(domain) ||
    (domain === "sensor" &&
      SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
  ) {
@@ -296,6 +307,7 @@ export const computeStateToParts = (
  localize: LocalizeFunc,
  stateObj: HassEntity,
  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
  config: HassConfig,
  entities: HomeAssistant["entities"],
  state?: string
@@ -306,6 +318,7 @@ export const computeStateToParts = (
  return computeStateToPartsFromEntityAttributes(
    localize,
    locale,
+    sensorNumericDeviceClasses,
    config,
    entity,
    stateObj.entity_id,
@@ -0,0 +1,23 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { supportsFeature } from "./supports-feature";
+
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
+// Expects classNames to be an object mapping feature-bit -> className
+export const featureClassNames = (
+  stateObj: HassEntity,
+  classNames: FeatureClassNames
+) => {
+  if (!stateObj || !stateObj.attributes.supported_features) {
+    return "";
+  }
+
+  return Object.keys(classNames)
+    .map((feature) =>
+      supportsFeature(stateObj, Number(feature)) ? classNames[feature] : ""
+    )
+    .filter((attr) => attr !== "")
+    .join(" ");
+};
@@ -1,56 +0,0 @@
-import { AITaskEntityFeature } from "../../data/ai_task";
-import { AlarmControlPanelEntityFeature } from "../../data/alarm_control_panel";
-import { AssistSatelliteEntityFeature } from "../../data/assist_satellite";
-import { CalendarEntityFeature } from "../../data/calendar";
-import { CameraEntityFeature } from "../../data/camera";
-import { ClimateEntityFeature } from "../../data/climate";
-import { ConversationEntityFeature } from "../../data/conversation";
-import { CoverEntityFeature } from "../../data/cover";
-import { FanEntityFeature } from "../../data/fan";
-import { HumidifierEntityFeature } from "../../data/humidifier";
-import { LawnMowerEntityFeature } from "../../data/lawn_mower";
-import { LightEntityFeature } from "../../data/light";
-import { LockEntityFeature } from "../../data/lock";
-import { MediaPlayerEntityFeature } from "../../data/media-player";
-import { NotifyEntityFeature } from "../../data/notify";
-import { RemoteEntityFeature } from "../../data/remote";
-import { SirenEntityFeature } from "../../data/siren";
-import { TodoListEntityFeature } from "../../data/todo";
-import { UpdateEntityFeature } from "../../data/update";
-import { VacuumEntityFeature } from "../../data/vacuum";
-import { ValveEntityFeature } from "../../data/valve";
-import { WaterHeaterEntityFeature } from "../../data/water_heater";
-import { WeatherEntityFeature } from "../../data/weather";
-
-export type FeatureEnum = Record<string | number, string | number>;
-
-const DOMAIN_ENUMS = {
-  ai_task: AITaskEntityFeature,
-  alarm_control_panel: AlarmControlPanelEntityFeature,
-  assist_satellite: AssistSatelliteEntityFeature,
-  calendar: CalendarEntityFeature,
-  camera: CameraEntityFeature,
-  climate: ClimateEntityFeature,
-  conversation: ConversationEntityFeature,
-  cover: CoverEntityFeature,
-  fan: FanEntityFeature,
-  humidifier: HumidifierEntityFeature,
-  lawn_mower: LawnMowerEntityFeature,
-  light: LightEntityFeature,
-  lock: LockEntityFeature,
-  media_player: MediaPlayerEntityFeature,
-  notify: NotifyEntityFeature,
-  remote: RemoteEntityFeature,
-  siren: SirenEntityFeature,
-  todo: TodoListEntityFeature,
-  update: UpdateEntityFeature,
-  vacuum: VacuumEntityFeature,
-  valve: ValveEntityFeature,
-  water_heater: WaterHeaterEntityFeature,
-  weather: WeatherEntityFeature,
-};
-
-export function getFeatures(domain: string): FeatureEnum | undefined {
-  const enumObj = DOMAIN_ENUMS[domain] as FeatureEnum;
-  return enumObj;
-}
@@ -22,13 +22,16 @@ export const FIXED_DOMAIN_STATES = {
  assist_satellite: ["idle", "listening", "responding", "processing"],
  automation: ["on", "off"],
  binary_sensor: ["on", "off"],
+  button: [],
  calendar: ["on", "off"],
  camera: ["idle", "recording", "streaming"],
  cover: ["closed", "closing", "open", "opening"],
  device_tracker: ["home", "not_home"],
  fan: ["on", "off"],
  humidifier: ["on", "off"],
+  infrared: [],
  input_boolean: ["on", "off"],
+  input_button: [],
  lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
  light: ["on", "off"],
  lock: [
@@ -53,6 +56,7 @@ export const FIXED_DOMAIN_STATES = {
  plant: ["ok", "problem"],
  radio_frequency: [],
  remote: ["on", "off"],
+  scene: [],
  schedule: ["on", "off"],
  script: ["on", "off"],
  siren: ["on", "off"],
@@ -286,81 +290,6 @@ export const getStatesDomain = (
  return result;
 };

-// Maps a value attribute (or the main state, keyed `_`) to the attribute listing
-// its options. Naming is irregular per domain, so it's mapped explicitly.
-export const DOMAIN_OPTIONS_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = {
-  climate: {
-    _: "hvac_modes",
-    fan_mode: "fan_modes",
-    preset_mode: "preset_modes",
-    swing_mode: "swing_modes",
-    swing_horizontal_mode: "swing_horizontal_modes",
-  },
-  event: {
-    event_type: "event_types",
-  },
-  fan: {
-    preset_mode: "preset_modes",
-  },
-  humidifier: {
-    mode: "available_modes",
-  },
-  input_select: {
-    _: "options",
-  },
-  select: {
-    _: "options",
-  },
-  light: {
-    effect: "effect_list",
-    color_mode: "supported_color_modes",
-  },
-  media_player: {
-    sound_mode: "sound_mode_list",
-    source: "source_list",
-  },
-  remote: {
-    current_activity: "activity_list",
-  },
-  sensor: {
-    _: "options",
-  },
-  vacuum: {
-    fan_speed: "fan_speed_list",
-  },
-  water_heater: {
-    _: "operation_list",
-    operation_mode: "operation_list",
-  },
-};
-
-const DOMAIN_VALUE_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = Object.fromEntries(
-  Object.entries(DOMAIN_OPTIONS_ATTRIBUTES).map(([domain, mapping]) => [
-    domain,
-    Object.fromEntries(
-      Object.entries(mapping).map(([value, list]) => [list, value])
-    ),
-  ])
-);
-
-// value attribute (or main state) → its options-list attribute
-export const getOptionsAttribute = (
-  domain: string,
-  attribute?: string
-): string | undefined => DOMAIN_OPTIONS_ATTRIBUTES[domain]?.[attribute ?? "_"];
-
-// options-list attribute → its value attribute (`_` = main state)
-export const getValueAttribute = (
-  domain: string,
-  optionsAttribute: string
-): string | undefined => DOMAIN_VALUE_ATTRIBUTES[domain]?.[optionsAttribute];
-
 export const getStates = (
  hass: HomeAssistant,
  state: HassEntity,
@@ -373,15 +302,78 @@ export const getStates = (
  result.push(...getStatesDomain(hass, domain, attribute));

  // Dynamic values based on the entities
-  const optionsAttribute = getOptionsAttribute(domain, attribute);
-  if (optionsAttribute) {
-    const options = state.attributes[optionsAttribute];
-    // Sensors only expose their options when their device class is `enum`.
-    const enumSensor =
-      domain !== "sensor" || state.attributes.device_class === "enum";
-    if (enumSensor && Array.isArray(options)) {
-      result.push(...options);
-    }
+  switch (domain) {
+    case "climate":
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      } else if (attribute === "swing_horizontal_mode") {
+        result.push(...state.attributes.swing_horizontal_modes);
+      }
+      break;
+    case "event":
+      if (attribute === "event_type") {
+        result.push(...state.attributes.event_types);
+      }
+      break;
+    case "fan":
+      if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      }
+      break;
+    case "humidifier":
+      if (attribute === "mode") {
+        result.push(...state.attributes.available_modes);
+      }
+      break;
+    case "input_select":
+    case "select":
+      if (!attribute) {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "light":
+      if (attribute === "effect" && state.attributes.effect_list) {
+        result.push(...state.attributes.effect_list);
+      } else if (
+        attribute === "color_mode" &&
+        state.attributes.supported_color_modes
+      ) {
+        result.push(...state.attributes.supported_color_modes);
+      }
+      break;
+    case "media_player":
+      if (attribute === "sound_mode") {
+        result.push(...state.attributes.sound_mode_list);
+      } else if (attribute === "source") {
+        result.push(...state.attributes.source_list);
+      }
+      break;
+    case "remote":
+      if (attribute === "current_activity") {
+        result.push(...state.attributes.activity_list);
+      }
+      break;
+    case "sensor":
+      if (!attribute && state.attributes.device_class === "enum") {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "vacuum":
+      if (attribute === "fan_speed") {
+        result.push(...state.attributes.fan_speed_list);
+      }
+      break;
+    case "water_heater":
+      if (!attribute || attribute === "operation_mode") {
+        result.push(...state.attributes.operation_list);
+      }
+      break;
  }

  return [...new Set(result)];
@@ -1,13 +1,21 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { OFF, UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";

 export function stateActive(stateObj: HassEntity, state?: string): boolean {
  const domain = computeDomain(stateObj.entity_id);
  const compareState = state !== undefined ? state : stateObj?.state;

-  if (TIMESTAMP_STATE_DOMAINS.has(domain)) {
+  if (
+    [
+      "button",
+      "event",
+      "infrared",
+      "input_button",
+      "radio_frequency",
+      "scene",
+    ].includes(domain)
+  ) {
    return compareState !== UNAVAILABLE;
  }

@@ -4,10 +4,9 @@ import { updateIsInstalling } from "../../data/update";

 export const updateIcon = (stateObj: HassEntity, state?: string) => {
  const compareState = state ?? stateObj.state;
-  // 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";
+  return compareState === "on"
+    ? updateIsInstalling(stateObj as UpdateEntity)
+      ? "mdi:package-down"
+      : "mdi:package-up"
+    : "mdi:package";
 };
@@ -14,8 +14,12 @@ export const isNumericState = (stateObj: HassEntity): boolean =>
  isNumericFromAttributes(stateObj.attributes);

 export const isNumericFromAttributes = (
-  attributes: HassEntityAttributeBase
-): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+  attributes: HassEntityAttributeBase,
+  numericDeviceClasses?: string[]
+): boolean =>
+  !!attributes.unit_of_measurement ||
+  !!attributes.state_class ||
+  (numericDeviceClasses || []).includes(attributes.device_class || "");

 export const numberFormatToLocale = (
  localeOptions: FrontendLocaleData
@@ -36,25 +40,6 @@ 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.
 *
@@ -90,7 +75,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format !== NumberFormat.none &&
    !Number.isNaN(Number(num))
  ) {
-    return getNumberFormatter(
+    return new Intl.NumberFormat(
      locale,
      getDefaultFormatOptions(num, options)
    ).formatToParts(Number(num));
@@ -102,7 +87,7 @@ export const formatNumberToParts = (
    localeOptions?.number_format === NumberFormat.none
  ) {
    // If NumberFormat is none, use en-US format without grouping.
-    return getNumberFormatter(
+    return new Intl.NumberFormat(
      "en-US",
      getDefaultFormatOptions(num, {
        ...options,
@@ -46,7 +46,8 @@ export const computeFormatFunctions = async (
  entities: HomeAssistant["entities"],
  devices: HomeAssistant["devices"],
  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  floors: HomeAssistant["floors"],
+  sensorNumericDeviceClasses: string[]
 ): Promise<{
  formatEntityState: FormatEntityStateFunc;
  formatEntityStateToParts: FormatEntityStateToPartsFunc;
@@ -65,9 +66,25 @@ export const computeFormatFunctions = async (

  return {
    formatEntityState: (stateObj, state) =>
-      computeStateDisplay(localize, stateObj, locale, config, entities, state),
+      computeStateDisplay(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
    formatEntityStateToParts: (stateObj, state) =>
-      computeStateToParts(localize, stateObj, locale, config, entities, state),
+      computeStateToParts(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
    formatEntityAttributeValue: (stateObj, attribute, value) =>
      computeAttributeValueDisplay(
        localize,
@@ -17,6 +17,8 @@ export type LocalizeKeys =
  | `ui.common.${string}`
  | `ui.components.calendar.event.rrule.${string}`
  | `ui.components.selectors.file.${string}`
+  | `ui.components.logbook.messages.detected_device_classes.${string}`
+  | `ui.components.logbook.messages.cleared_device_classes.${string}`
  | `ui.dialogs.entity_registry.editor.${string}`
  | `ui.dialogs.more_info_control.lawn_mower.${string}`
  | `ui.dialogs.more_info_control.vacuum.${string}`
@@ -1,58 +0,0 @@
-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;
-};
@@ -1,172 +0,0 @@
-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;
-};
@@ -1,21 +0,0 @@
-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);
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .17.0
 .16.0