Restore page filter check in canShowPage

.github/copilot-instructions.md

@@ -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
 
@@ -338,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[]`
@@ -356,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`
@@ -369,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.
@@ -392,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
 
@@ -421,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")
@@ -494,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
@@ -528,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

.github/workflows/blocking-labels.yaml

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

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

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

.github/workflows/nightly.yaml

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

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

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

.github/workflows/translations.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
 

build-scripts/gulp/gallery.js

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

build-scripts/gulp/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,
   })
 );
 

eslint.config.mjs

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

gallery/AGENTS.md

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

gallery/sidebar.js

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

gallery/src/common/theme.ts

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

gallery/src/components/demo-black-white-row.ts

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

gallery/src/components/demo-cards.ts

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

gallery/src/components/demo-more-infos.ts

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

gallery/src/components/demo-theme-comparison.ts

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

gallery/src/components/gallery-settings.ts

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

gallery/src/components/page-description.ts

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

gallery/src/ha-demo-options.ts

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

gallery/src/ha-gallery.ts

@@ -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("/", "-")}`)}
-                  `}
+              ${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>
-            ${isSettingsPage || !page ? nothing : this._renderPageFooter(page)}
           </ha-top-app-bar-fixed>
         </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);
+      }
     `,
   ];
 }

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

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

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

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

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

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

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

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

gallery/src/pages/components/ha-control-switch.ts

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

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

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

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

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

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

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

gallery/src/pages/components/ha-progress-button.ts

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

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

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

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

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

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

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

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

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

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

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

gallery/src/pages/design.home-assistant.io/editing.markdown

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

gallery/src/pages/misc/box-shadow.ts

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

package.json

@@ -29,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",
@@ -70,8 +70,8 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.1.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",
@@ -88,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",
@@ -102,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",
@@ -131,13 +131,13 @@
     "@babel/preset-env": "7.29.7",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.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",
@@ -186,15 +186,15 @@
     "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.8",
     "webpack-stats-plugin": "1.1.3",

src/common/config/can_show_page.ts

@@ -4,7 +4,8 @@ import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
-  isCore(page) || isLoadedIntegration(hass, page);
+  (isCore(page) || isLoadedIntegration(hass, page)) &&
+  (!page.filter || page.filter(hass));
 
 export const isLoadedIntegration = (
   hass: HomeAssistant,

src/common/dom/load_resource.ts

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

src/common/dom/scroll-to-target.ts

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

src/common/dom/setup-leaflet-map.ts

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

src/common/empty_image_base64.ts

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

src/common/entity/compute_state_display.ts

@@ -19,40 +19,6 @@ import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
 import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";
 
-// Domains whose state is a timezone-agnostic date and/or time string.
-const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
-
-// Domains whose state is a timestamp.
-const TIMESTAMP_DOMAINS = new Set([
-  "ai_task",
-  "button",
-  "conversation",
-  "event",
-  "image",
-  "infrared",
-  "input_button",
-  "notify",
-  "radio_frequency",
-  "scene",
-  "stt",
-  "tag",
-  "tts",
-  "wake_word",
-  "datetime",
-]);
-
-// Maps Intl.NumberFormat part types to ValuePart types for monetary states.
-const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
-  integer: "value",
-  group: "value",
-  decimal: "value",
-  fraction: "value",
-  minusSign: "value",
-  plusSign: "value",
-  literal: "literal",
-  currency: "unit",
-};
-
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
@@ -172,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")
@@ -214,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`.
 
@@ -273,7 +250,23 @@ const computeStateToPartsFromEntityAttributes = (
 
   // state is a timestamp
   if (
-    TIMESTAMP_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))
   ) {

src/common/entity/update_icon.ts

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

src/common/number/format_number.ts

@@ -40,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.
  *
@@ -94,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));
@@ -106,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,

src/common/url/history-logbook-query-params.ts

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

src/common/url/query-params.ts

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

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

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

src/common/util/copy-clipboard.ts

@@ -11,12 +11,6 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
   }
 
   const root = rootEl || deepActiveElement()?.getRootNode() || document.body;
-  // A document node cannot have a textarea appended directly (only the single
-  // documentElement is allowed), so fall back to its body. Shadow roots and
-  // elements can hold the textarea directly, which keeps execCommand working
-  // inside dialogs that trap focus.
-  const container: Node =
-    root.nodeType === Node.DOCUMENT_NODE ? document.body : root;
 
   const el = document.createElement("textarea");
   el.value = str;
@@ -25,8 +19,8 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
   el.style.top = "0";
   el.style.left = "0";
   el.style.opacity = "0";
-  container.appendChild(el);
+  root.appendChild(el);
   el.select();
   document.execCommand("copy");
-  container.removeChild(el);
+  root.removeChild(el);
 };

src/components/automation/ha-automation-condition-live-test.ts

@@ -1,144 +0,0 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { debounce } from "../../common/util/debounce";
-import type { Condition } from "../../data/automation";
-import { subscribeCondition } from "../../data/automation";
-import type { HomeAssistant } from "../../types";
-import "../ha-tooltip";
-import "./ha-automation-row-live-test";
-import type { LiveTestState } from "./ha-automation-row-live-test";
-
-@customElement("ha-automation-condition-live-test")
-export class HaAutomationConditionLiveTest extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public condition!: Condition;
-
-  @state() private _liveTestResult: {
-    state: LiveTestState;
-    message?: string;
-  } = { state: "unknown" };
-
-  private _conditionUnsub?: Promise<UnsubscribeFunc>;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._subscribeCondition();
-  }
-
-  protected override updated(changedProps: PropertyValues<this>): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("condition") &&
-      changedProps.get("condition") !== undefined
-    ) {
-      this._resetSubscription();
-      this._debounceSubscribeCondition();
-    }
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._debounceSubscribeCondition.cancel();
-    this._resetSubscription();
-  }
-
-  protected render() {
-    return html`
-      <div id="indicator">
-        <slot></slot>
-        <ha-automation-row-live-test
-          .state=${this._liveTestResult.state}
-          .label=${this.hass.localize(
-            `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
-          )}
-        ></ha-automation-row-live-test>
-      </div>
-      ${this._liveTestResult.message
-        ? html`<ha-tooltip for="indicator"
-            >${this._liveTestResult.message}</ha-tooltip
-          >`
-        : nothing}
-    `;
-  }
-
-  private _resetSubscription() {
-    this._liveTestResult = {
-      state: "unknown",
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
-      ),
-    };
-    if (this._conditionUnsub) {
-      this._conditionUnsub.then((unsub) => unsub());
-      this._conditionUnsub = undefined;
-    }
-  }
-
-  private _debounceSubscribeCondition = debounce(
-    () => this._subscribeCondition(),
-    500
-  );
-
-  private async _subscribeCondition() {
-    this._resetSubscription();
-
-    if (!this.condition) {
-      return;
-    }
-
-    const conditionUnsub = subscribeCondition(
-      this.hass.connection,
-      (result) => {
-        if (result.error) {
-          this._handleLiveTestError(result.error);
-        } else {
-          this._liveTestResult = {
-            state: result.result ? "pass" : "fail",
-            message: this.hass.localize(
-              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
-            ),
-          };
-        }
-      },
-      this.condition
-    );
-    conditionUnsub.catch((err: any) => {
-      this._handleLiveTestError(err);
-      if (this._conditionUnsub === conditionUnsub) {
-        this._conditionUnsub = undefined;
-      }
-    });
-    this._conditionUnsub = conditionUnsub;
-  }
-
-  private _handleLiveTestError(error: any) {
-    const invalid =
-      typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = {
-      state: invalid ? "invalid" : "unknown",
-      message: this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
-      ),
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-      position: relative;
-    }
-    #indicator {
-      display: inline-flex;
-      position: relative;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-condition-live-test": HaAutomationConditionLiveTest;
-  }
-}

src/components/automation/ha-automation-row.ts

@@ -161,8 +161,6 @@ export class HaAutomationRow extends LitElement {
     }
     .leading-icon-wrapper {
       padding-top: var(--ha-space-3);
-      position: relative;
-      z-index: 1;
     }
     ::slotted([slot="leading-icon"]) {
       color: var(--ha-color-on-neutral-quiet);

src/components/chart/down-sample.ts

@@ -1,23 +1,5 @@
 import type { LineSeriesOption } from "echarts";
 
-type Point = NonNullable<LineSeriesOption["data"]>[number];
-
-interface MeanFrame {
-  sumX: number;
-  sumY: number;
-  count: number;
-  isArray: boolean;
-}
-
-interface MinMaxFrame {
-  minPoint: Point;
-  minX: number;
-  minY: number;
-  maxPoint: Point;
-  maxX: number;
-  maxY: number;
-}
-
 export function downSampleLineData<
   T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -37,47 +19,11 @@ export function downSampleLineData<
   const max = maxX ?? getPointData(data[data.length - 1]!)[0];
   const step = Math.ceil((max - min) / Math.floor(maxDetails));
 
-  if (useMean) {
-    // Group points into frames, accumulating sums in insertion order.
-    const frames = new Map<number, MeanFrame>();
-
-    for (const point of data) {
-      const pointData = getPointData(point);
-      if (!Array.isArray(pointData)) continue;
-      const x = Number(pointData[0]);
-      const y = Number(pointData[1]);
-      if (isNaN(x) || isNaN(y)) continue;
-
-      const frameIndex = Math.floor((x - min) / step);
-      const frame = frames.get(frameIndex);
-      if (!frame) {
-        frames.set(frameIndex, {
-          sumX: x,
-          sumY: y,
-          count: 1,
-          isArray: Array.isArray(pointData),
-        });
-      } else {
-        frame.sumX += x;
-        frame.sumY += y;
-        frame.count += 1;
-      }
-    }
-
-    const result: T[] = [];
-    for (const frame of frames.values()) {
-      const meanX = frame.sumX / frame.count;
-      const meanY = frame.sumY / frame.count;
-      const meanPoint = (
-        frame.isArray ? [meanX, meanY] : { value: [meanX, meanY] }
-      ) as T;
-      result.push(meanPoint);
-    }
-    return result;
-  }
-
-  // Min/max mode: track the min and max point per frame in insertion order.
-  const frames = new Map<number, MinMaxFrame>();
+  // Group points into frames
+  const frames = new Map<
+    number,
+    { point: (typeof data)[number]; x: number; y: number }[]
+  >();
 
   for (const point of data) {
     const pointData = getPointData(point);
@@ -89,39 +35,53 @@ export function downSampleLineData<
     const frameIndex = Math.floor((x - min) / step);
     const frame = frames.get(frameIndex);
     if (!frame) {
-      frames.set(frameIndex, {
-        minPoint: point,
-        minX: x,
-        minY: y,
-        maxPoint: point,
-        maxX: x,
-        maxY: y,
-      });
+      frames.set(frameIndex, [{ point, x, y }]);
     } else {
-      // Match the original strict-less / strict-greater comparisons so the
-      // first occurrence wins on ties.
-      if (y < frame.minY) {
-        frame.minPoint = point;
-        frame.minX = x;
-        frame.minY = y;
-      }
-      if (y > frame.maxY) {
-        frame.maxPoint = point;
-        frame.maxX = x;
-        frame.maxY = y;
-      }
+      frame.push({ point, x, y });
     }
   }
 
+  // Convert frames back to points
   const result: T[] = [];
-  for (const frame of frames.values()) {
-    // The order of the data must be preserved so max may be before min
-    if (frame.minX > frame.maxX) {
-      result.push(frame.maxPoint as T);
+
+  if (useMean) {
+    // Use mean values for each frame
+    for (const [_i, framePoints] of frames) {
+      const sumY = framePoints.reduce((acc, p) => acc + p.y, 0);
+      const meanY = sumY / framePoints.length;
+      const sumX = framePoints.reduce((acc, p) => acc + p.x, 0);
+      const meanX = sumX / framePoints.length;
+
+      const firstPoint = framePoints[0].point;
+      const pointData = getPointData(firstPoint);
+      const meanPoint = (
+        Array.isArray(pointData) ? [meanX, meanY] : { value: [meanX, meanY] }
+      ) as T;
+      result.push(meanPoint);
     }
-    result.push(frame.minPoint as T);
-    if (frame.minX < frame.maxX) {
-      result.push(frame.maxPoint as T);
+  } else {
+    // Use min/max values for each frame
+    for (const [_i, framePoints] of frames) {
+      let minPoint = framePoints[0];
+      let maxPoint = framePoints[0];
+
+      for (const p of framePoints) {
+        if (p.y < minPoint.y) {
+          minPoint = p;
+        }
+        if (p.y > maxPoint.y) {
+          maxPoint = p;
+        }
+      }
+
+      // The order of the data must be preserved so max may be before min
+      if (minPoint.x > maxPoint.x) {
+        result.push(maxPoint.point);
+      }
+      result.push(minPoint.point);
+      if (minPoint.x < maxPoint.x) {
+        result.push(maxPoint.point);
+      }
     }
   }
 

src/components/chart/ha-chart-base.ts

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

src/components/chart/state-history-chart-line.ts

@@ -147,14 +147,6 @@ export class StateHistoryChartLine extends LitElement {
       this.hass.config
     );
     const datapoints: Record<string, any>[] = [];
-    // Index the hovered points by series so the per-dataset lookup below is
-    // O(1) instead of scanning `params` for every dataset on each mouse move.
-    const paramsBySeriesIndex = new Map<number, Record<string, any>>();
-    for (const p of params) {
-      if (!paramsBySeriesIndex.has(p.seriesIndex)) {
-        paramsBySeriesIndex.set(p.seriesIndex, p);
-      }
-    }
     this._chartData.forEach((dataset, index) => {
       if (
         dataset.tooltip?.show === false ||
@@ -162,7 +154,9 @@ export class StateHistoryChartLine extends LitElement {
       ) {
         return;
       }
-      const param = paramsBySeriesIndex.get(index);
+      const param = params.find(
+        (p: Record<string, any>) => p.seriesIndex === index
+      );
       if (param) {
         datapoints.push(param);
         return;
@@ -446,10 +440,6 @@ export class StateHistoryChartLine extends LitElement {
 
     this._chartTime = new Date();
     const endTime = this.endTime;
-    // Work with numeric epoch timestamps (ms) instead of Date objects below.
-    // Charts can hold a huge number of points, and allocating a Date per point
-    // is needless GC pressure; the "time" axis consumes numbers natively.
-    const endTimeMs = endTime.getTime();
     const names = this.names || {};
     const colors = this.colors || {};
     entityStates.forEach((states, dataIdx) => {
@@ -461,9 +451,9 @@ export class StateHistoryChartLine extends LitElement {
 
       const data: LineSeriesOption[] = [];
 
-      const pushData = (timestamp: number, datavalues: any[] | null) => {
+      const pushData = (timestamp: Date, datavalues: any[] | null) => {
         if (!datavalues) return;
-        if (timestamp > endTimeMs) {
+        if (timestamp > endTime) {
           // Drop data points that are after the requested endTime. This could happen if
           // endTime is "now" and client time is not in sync with server time.
           return;
@@ -634,11 +624,11 @@ export class StateHistoryChartLine extends LitElement {
               entityState.attributes.target_temp_low
             );
             series.push(targetHigh, targetLow);
-            pushData(entityState.last_changed, series);
+            pushData(new Date(entityState.last_changed), series);
           } else {
             const target = safeParseFloat(entityState.attributes.temperature);
             series.push(target);
-            pushData(entityState.last_changed, series);
+            pushData(new Date(entityState.last_changed), series);
           }
         });
       } else if (domain === "humidifier") {
@@ -756,27 +746,31 @@ export class StateHistoryChartLine extends LitElement {
           } else {
             series.push(entityState.state === "on" ? current : null);
           }
-          pushData(entityState.last_changed, series);
+          pushData(new Date(entityState.last_changed), series);
         });
       } else {
         addDataSet(states.entity_id, name, color);
 
         let lastValue: number;
-        let lastDate: number;
-        let lastNullDate: number | null = null;
+        let lastDate: Date;
+        let lastNullDate: Date | null = null;
 
         // Process chart data.
         // When state is `unknown`, calculate the value and break the line.
         const processData = (entityState: LineChartState) => {
           const value = safeParseFloat(entityState.state);
-          const date = entityState.last_changed;
+          const date = new Date(entityState.last_changed);
           if (value !== null && lastNullDate) {
+            const dateTime = date.getTime();
+            const lastNullDateTime = lastNullDate.getTime();
+            const lastDateTime = lastDate?.getTime();
             const tmpValue =
               (value - lastValue) *
-                ((lastNullDate - lastDate) / (date - lastDate)) +
+                ((lastNullDateTime - lastDateTime) /
+                  (dateTime - lastDateTime)) +
               lastValue;
             pushData(lastNullDate, [tmpValue]);
-            pushData(lastNullDate + 1, [null]);
+            pushData(new Date(lastNullDateTime + 1), [null]);
             pushData(date, [value]);
             lastDate = date;
             lastValue = value;
@@ -815,17 +809,17 @@ export class StateHistoryChartLine extends LitElement {
       }
 
       // Add an entry for final values
-      pushData(endTimeMs, prevValues);
+      pushData(endTime, prevValues);
 
       // For sensors, append current state if viewing recent data
-      const nowMs = Date.now();
+      const now = new Date();
       // allow 1s of leeway for "now"
-      const isUpToNow = nowMs - endTimeMs <= 1000;
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
       if (domain === "sensor" && isUpToNow && data.length === 1) {
         const stateObj = this.hass.states[states.entity_id];
         const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
         if (currentValue !== null) {
-          data[0].data!.push([nowMs, currentValue]);
+          data[0].data!.push([now, currentValue]);
           trackY(currentValue);
         }
       }

src/components/data-table/ha-data-table.ts

@@ -162,7 +162,7 @@ export class HaDataTable extends LitElement {
 
   @state() private _filter = "";
 
-  @state() private _filteredData?: DataTableRowData[];
+  @state() private _filteredData: DataTableRowData[] = [];
 
   @state() private _headerHeight = 0;
 
@@ -204,7 +204,7 @@ export class HaDataTable extends LitElement {
   }
 
   public selectAll(): void {
-    this._checkedRows = (this._filteredData || [])
+    this._checkedRows = this._filteredData
       .filter((data) => data.selectable !== false)
       .map((data) => data[this.id]);
     this._lastSelectedRowId = null;
@@ -215,16 +215,10 @@ export class HaDataTable extends LitElement {
     if (clear) {
       this._checkedRows = [];
     }
-    // Map + Set keep a large selection O(rows + ids) instead of O(rows × ids).
-    const rowLookup = new Map(
-      (this._filteredData || []).map((data) => [data[this.id], data])
-    );
-    const checkedRows = new Set(this._checkedRows);
     ids.forEach((id) => {
-      const row = rowLookup.get(id);
-      if (row?.selectable !== false && !checkedRows.has(id)) {
+      const row = this._filteredData.find((data) => data[this.id] === id);
+      if (row?.selectable !== false && !this._checkedRows.includes(id)) {
         this._checkedRows.push(id);
-        checkedRows.add(id);
       }
     });
     this._lastSelectedRowId = null;
@@ -244,7 +238,7 @@ export class HaDataTable extends LitElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this._filteredData?.length) {
+    if (this._filteredData.length) {
       // Force update of location of rows
       this._filteredData = [...this._filteredData];
     }
@@ -372,10 +366,7 @@ export class HaDataTable extends LitElement {
       this._lastSelectedRowId = null;
     }
 
-    if (
-      this._filteredData &&
-      (properties.has("selectable") || properties.has("hiddenColumns"))
-    ) {
+    if (properties.has("selectable") || properties.has("hiddenColumns")) {
       this._filteredData = [...this._filteredData];
     }
   }
@@ -418,8 +409,6 @@ export class HaDataTable extends LitElement {
     const renderRow = (row: DataTableRowData, index: number) =>
       this._renderRow(columns, this.narrow, row, index);
 
-    const filteredDataLength = this._filteredData?.length || 0;
-
     return html`
       <div class="mdc-data-table">
         <slot name="header" @slotchange=${this._calcTableHeight}>
@@ -440,10 +429,10 @@ export class HaDataTable extends LitElement {
             "auto-height": this.autoHeight,
           })}"
           role="table"
-          aria-rowcount=${filteredDataLength + 1}
+          aria-rowcount=${this._filteredData.length + 1}
           style=${styleMap({
             height: this.autoHeight
-              ? `${(filteredDataLength || 1) * 53 + 53}px`
+              ? `${(this._filteredData.length || 1) * 53 + 53}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
@@ -532,23 +521,16 @@ export class HaDataTable extends LitElement {
               })}
             </slot>
           </div>
-          ${!this._filteredData?.length
+          ${!this._filteredData.length
             ? html`
                 <div class="mdc-data-table__content">
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
-                      ${!this._filteredData
-                        ? this._i18n?.localize?.("ui.common.loading") ||
-                          "Loading"
-                        : this.data.length
-                          ? this._i18n?.localize?.(
-                              "ui.components.data-table.no_match_filter"
-                            ) || "No rows matching current filters"
-                          : this.noDataText ||
-                            this._i18n?.localize?.(
-                              "ui.components.data-table.no-data"
-                            ) ||
-                            "No data"}
+                      ${this.noDataText ||
+                      this._i18n?.localize?.(
+                        "ui.components.data-table.no-data"
+                      ) ||
+                      "No data"}
                     </div>
                   </div>
                 </div>
@@ -921,7 +903,7 @@ export class HaDataTable extends LitElement {
     const rowId = checkboxElement.rowId;
 
     const groupedData = this._groupData(
-      this._filteredData || [],
+      this._filteredData,
       this._i18n?.localize,
       this._i18n?.locale,
       this.appendRow,
@@ -1023,7 +1005,7 @@ export class HaDataTable extends LitElement {
 
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
-    if (this._filteredData?.length) {
+    if (this._filteredData.length) {
       this._filteredData = [...this._filteredData];
     }
     fireEvent(this, "selection-changed", {
@@ -1483,11 +1465,6 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__table.auto-height .scroller {
           overflow-y: hidden !important;
         }
-
-        .mdc-data-table__table.auto-height lit-virtualizer {
-          overscroll-behavior-y: auto;
-        }
-
         .grows {
           flex-grow: 1;
           flex-shrink: 1;

src/components/entity/ha-entity-state-picker.ts

@@ -115,20 +115,6 @@ export class HaEntityStatePicker extends LitElement {
     return html`<span slot="headline">${item?.primary ?? value}</span>`;
   };
 
-  private _computeDefaultLabel(): string {
-    // When an attribute is configured, default to the attribute's friendly
-    // name (e.g. "Source") instead of the generic "State". Requires a concrete
-    // entity to resolve the translated name; otherwise fall back to "State".
-    if (this.attribute && this.entityId) {
-      const entityId = ensureArray(this.entityId)[0];
-      const stateObj = entityId ? this.hass.states[entityId] : undefined;
-      if (stateObj) {
-        return this.hass.formatEntityAttributeName(stateObj, this.attribute);
-      }
-    }
-    return this.hass.localize("ui.components.entity.entity-state-picker.state");
-  }
-
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -143,7 +129,8 @@ export class HaEntityStatePicker extends LitElement {
         .disabled=${this.disabled || noEntity}
         .autofocus=${this.autofocus}
         .required=${this.required}
-        .label=${this.label ?? this._computeDefaultLabel()}
+        .label=${this.label ??
+        this.hass.localize("ui.components.entity.entity-state-picker.state")}
         .helper=${this.helper}
         .value=${this.value}
         .getItems=${this._getFilteredItems}

src/components/ha-camera-stream.ts

@@ -112,16 +112,12 @@ export class HaCameraStream extends LitElement {
       return nothing;
     }
     if (stream.type === MJPEG_STREAM) {
-      const streamUrl = __DEMO__
-        ? this.stateObj.attributes.entity_picture
-        : this._connected
-          ? computeMJPEGStreamUrl(this.stateObj)
-          : this._posterUrl;
-      if (!streamUrl) {
-        return nothing;
-      }
       return html`<img
-        .src=${streamUrl}
+        .src=${__DEMO__
+          ? this.stateObj.attributes.entity_picture!
+          : this._connected
+            ? computeMJPEGStreamUrl(this.stateObj)
+            : this._posterUrl || ""}
         style=${styleMap({
           aspectRatio: this.aspectRatio,
           objectFit: this.fitMode,

src/components/ha-code-editor.ts

@@ -1600,8 +1600,8 @@ export class HaCodeEditor extends ReactiveElement {
           // Filter states based on what's typed
           const filteredStates = typedText
             ? states.filter((entityState) =>
-                entityState.displayLabel
-                  ?.toLowerCase()
+                entityState.label
+                  .toLowerCase()
                   .startsWith(typedText.toLowerCase())
               )
             : states;
@@ -1658,8 +1658,8 @@ export class HaCodeEditor extends ReactiveElement {
               // Filter states based on what's typed
               const filteredStates = typedText
                 ? states.filter((entityState) =>
-                    entityState.displayLabel
-                      ?.toLowerCase()
+                    entityState.label
+                      .toLowerCase()
                       .startsWith(typedText.toLowerCase())
                   )
                 : states;

src/components/ha-control-select-menu.ts

@@ -183,7 +183,6 @@ export class HaControlSelectMenu extends LitElement {
         gap: 10px;
         width: 100%;
         user-select: none;
-        font-family: var(--ha-font-family-body, inherit);
         font-style: normal;
         font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;

src/components/ha-form/ha-form-select.ts

@@ -12,20 +12,6 @@ import type {
   HaFormSelectSchema,
 } from "./types";
 
-/**
- * The underlying select returns option values as strings. Map a selected value
- * back to its original option value so the source type is retained (for example
- * a number coming from a backend `vol.In` schema), falling back to the value
- * itself when no option matches.
- */
-export const matchSelectOptionValue = (
-  options: HaFormSelectSchema["options"],
-  value: string
-): HaFormSelectData => {
-  const option = options.find((opt) => String(opt[0]) === String(value));
-  return option ? option[0] : value;
-};
-
 @customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -80,18 +66,16 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    let value: HaFormSelectData | undefined = ev.detail.value;
-
-    if (value === "") {
-      value = undefined;
-    } else if (value != null) {
-      value = matchSelectOptionValue(this.schema.options, value);
-    }
+    let value: string | undefined = ev.detail.value;
 
     if (value === this.data) {
       return;
     }
 
+    if (value === "") {
+      value = undefined;
+    }
+
     fireEvent(this, "value-changed", {
       value,
     });

src/components/ha-icon.ts

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

src/components/ha-selector/ha-selector-serial-port.ts

@@ -354,9 +354,7 @@ export class HaSerialPortSelector extends LitElement {
   }
 
   private get _selectorDomain(): string | undefined {
-    // `domain` is the integration domain even in options flows, where the flow
-    // handler is the config entry id instead.
-    return this.context?.domain;
+    return this.context?.handler;
   }
 
   private _memoRecommendedDomains = memoizeOne(

src/components/ha-sidebar.ts

@@ -170,9 +170,6 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
   @property({ attribute: "always-expand", type: Boolean })
   public alwaysExpand = false;
 
-  @property({ attribute: "sidebar-title" }) public sidebarTitle =
-    "Home Assistant";
-
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _updatesCount = 0;
@@ -349,8 +346,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
               @action=${this._toggleSidebar}
             ></ha-icon-button>
           `
-        : nothing}
-      <div class="title">${this.sidebarTitle}</div>
+        : ""}
+      <div class="title">Home Assistant</div>
     </div>`;
   }
 
@@ -365,28 +362,16 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
       >`;
 
     if (!this._panelOrder || !this._hiddenPanels) {
-      return html`<div class="panels-list">
-        <div class="wrapper">
-          ${renderList(
-            html`<slot name="main-navigation">
-              <ha-fade-in .delay=${500}>
-                <ha-spinner size="small"></ha-spinner>
-              </ha-fade-in>
-            </slot>`,
-            "before-spacer",
-            true
-          )}
-          ${this.renderScrollableFades()}
-        </div>
-        ${this._renderSpacer()}
+      return html`
+        <ha-fade-in .delay=${500}>
+          <ha-spinner size="small"></ha-spinner>
+        </ha-fade-in>
         ${renderList(
-          html`<slot name="fixed-navigation">
-            ${this._renderFixedPanels(selectedPanel)}
-          </slot>`,
+          html`${this._renderFixedPanels(selectedPanel)}`,
           "after-spacer",
           false
         )}
-      </div>`;
+      `;
     }
 
     const defaultPanel = getDefaultPanelUrlPath(this.hass);
@@ -403,9 +388,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
     return html`<div class="panels-list">
       <div class="wrapper">
         ${renderList(
-      html`<slot name="main-navigation">
-        ${this._renderPanels(beforeSpacer, selectedPanel)}
-      </slot>`,
+      this._renderPanels(beforeSpacer, selectedPanel),
       "before-spacer",
       true
     )}
@@ -413,10 +396,10 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
       </div>
       ${this._renderSpacer()}
       ${renderList(
-      html`<slot name="fixed-navigation">
+      html`
           ${this._renderPanels(afterSpacer, selectedPanel)}
           ${this._renderFixedPanels(selectedPanel)}
-        </slot>`,
+        `,
       "after-spacer",
       false
     )}
@@ -558,7 +541,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
       >
         <ha-user-badge slot="start" .user=${this.hass.user}></ha-user-badge>
         <span class="item-text" slot="headline"
-          >${this.hass.user ? this.hass.user.name : nothing}</span
+          >${this.hass.user ? this.hass.user.name : ""}</span
         >
       </ha-list-item-button>
       ${!this.alwaysExpand && this.hass.user
@@ -682,10 +665,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           transition: width var(--ha-animation-duration-normal) ease;
         }
         :host([expanded]) .menu {
-          width: calc(
-            var(--ha-sidebar-expanded-width, 256px) +
-              var(--safe-area-inset-left, 0px)
-          );
+          width: calc(256px + var(--safe-area-inset-left, 0px));
         }
         :host([narrow][expanded]) .menu {
           width: 100%;
@@ -768,7 +748,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           color: var(--sidebar-text-color);
         }
         :host([expanded]) ha-list-item-button {
-          width: var(--ha-sidebar-expanded-item-width, 248px);
+          width: 248px;
         }
         :host([narrow][expanded]) ha-list-item-button {
           width: calc(240px - var(--safe-area-inset-left, 0px));

src/components/ha-textarea.ts

@@ -258,14 +258,6 @@ export class HaTextArea extends WaInputMixin(LitElement) {
         overflow-y: auto;
       }
 
-      /* The size-adjuster shares a grid cell with the textarea and is given an
-         inline height matching the content's scrollHeight. Without capping it
-         too, it inflates the grid row past the max-height and pushes the
-         textarea down instead of scrolling. */
-      :host([resize="auto"]) wa-textarea::part(textarea-adjuster) {
-        max-height: var(--ha-textarea-max-height, 200px);
-      }
-
       wa-textarea:hover::part(base),
       wa-textarea:hover::part(label) {
         background-color: var(--ha-color-form-background-hover);

src/components/ha-theme-settings.ts

@@ -1,255 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { normalizeLuminance } from "../common/color/palette";
-import { fireEvent } from "../common/dom/fire_event";
-import {
-  DefaultAccentColor,
-  DefaultPrimaryColor,
-} from "../resources/theme/color/color.globals";
-import type { HomeAssistant, ThemeSettings, ValueChangedEvent } from "../types";
-import "./ha-button";
-import "./ha-settings-row";
-import "./ha-theme-picker";
-import "./input/ha-input";
-import "./radio/ha-radio-group";
-import type { HaRadioGroup } from "./radio/ha-radio-group";
-import "./radio/ha-radio-option";
-
-const HOME_ASSISTANT_THEME = "default";
-
-export interface ThemeSettingsLabels {
-  theme?: string;
-  noTheme?: string;
-  mode?: string;
-  autoMode?: string;
-  lightMode?: string;
-  darkMode?: string;
-  primaryColor?: string;
-  accentColor?: string;
-  reset?: string;
-}
-
-@customElement("ha-theme-settings")
-export class HaThemeSettings extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selectedTheme?: ThemeSettings | null;
-
-  @property({ attribute: false }) public labels?: ThemeSettingsLabels;
-
-  @property({ attribute: false }) public description?: TemplateResult | string;
-
-  @property() public heading?: string;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: "include-default", type: Boolean })
-  public includeDefault = false;
-
-  @property({ attribute: "show-theme-picker", type: Boolean })
-  public showThemePicker = true;
-
-  @property({ attribute: "theme-picker-disabled", type: Boolean })
-  public themePickerDisabled = false;
-
-  protected render(): TemplateResult {
-    const themeSettings = this.selectedTheme ?? this.hass.selectedTheme;
-    const curThemeIsUseDefault = themeSettings?.theme === "";
-    const curTheme = themeSettings?.theme
-      ? themeSettings.theme
-      : this.hass.themes.darkMode
-        ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
-        : this.hass.themes.default_theme;
-
-    return html`
-      <ha-settings-row .narrow=${this.narrow} ?empty=${!this.showThemePicker}>
-        ${this.heading
-          ? html`<span slot="heading">${this.heading}</span>`
-          : nothing}
-        ${this.description
-          ? html`<span slot="description">${this.description}</span>`
-          : nothing}
-        ${this.showThemePicker
-          ? html`
-              <ha-theme-picker
-                .hass=${this.hass}
-                .label=${this.labels?.theme}
-                .noThemeLabel=${this.labels?.noTheme}
-                .value=${themeSettings?.theme || undefined}
-                .disabled=${this.themePickerDisabled}
-                ?include-default=${this.includeDefault}
-                @value-changed=${this._handleThemeSelection}
-              ></ha-theme-picker>
-            `
-          : nothing}
-      </ha-settings-row>
-      ${curTheme === HOME_ASSISTANT_THEME ||
-      (curThemeIsUseDefault &&
-        this.hass.themes.default_dark_theme &&
-        this.hass.themes.default_theme) ||
-      this._supportsModeSelection(curTheme)
-        ? html`<div class="inputs">
-            <ha-radio-group
-              @change=${this._handleDarkMode}
-              name="dark_mode"
-              .ariaLabel=${this.labels?.mode ?? "Theme mode"}
-              .value=${themeSettings?.dark === undefined
-                ? "auto"
-                : themeSettings.dark
-                  ? "dark"
-                  : "light"}
-              orientation="horizontal"
-            >
-              <ha-radio-option value="auto">
-                ${this.labels?.autoMode ?? "Auto"}
-              </ha-radio-option>
-              <ha-radio-option value="light">
-                ${this.labels?.lightMode ?? "Light"}
-              </ha-radio-option>
-              <ha-radio-option value="dark">
-                ${this.labels?.darkMode ?? "Dark"}
-              </ha-radio-option>
-            </ha-radio-group>
-            ${curTheme === HOME_ASSISTANT_THEME
-              ? html`<div class="color-pickers">
-                  <ha-input
-                    .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
-                    type="color"
-                    .label=${this.labels?.primaryColor ?? "Primary color"}
-                    .name=${"primaryColor"}
-                    @change=${this._handleColorChange}
-                  ></ha-input>
-                  <ha-input
-                    .value=${themeSettings?.accentColor || DefaultAccentColor}
-                    type="color"
-                    .label=${this.labels?.accentColor ?? "Accent color"}
-                    .name=${"accentColor"}
-                    @change=${this._handleColorChange}
-                  ></ha-input>
-                  ${themeSettings?.primaryColor || themeSettings?.accentColor
-                    ? html` <ha-button
-                        appearance="plain"
-                        size="s"
-                        @click=${this._resetColors}
-                      >
-                        ${this.labels?.reset ?? "Reset"}
-                      </ha-button>`
-                    : nothing}
-                </div>`
-              : nothing}
-          </div>`
-        : nothing}
-    `;
-  }
-
-  private _handleColorChange(ev: Event) {
-    const target = ev.currentTarget as HTMLInputElement;
-    const value =
-      target.name === "primaryColor"
-        ? normalizeLuminance(target.value)
-        : target.value;
-
-    target.value = value;
-    fireEvent(this, "theme-settings-changed", {
-      [target.name]: value,
-    } as Partial<ThemeSettings>);
-  }
-
-  private _resetColors() {
-    fireEvent(this, "theme-settings-changed", {
-      primaryColor: undefined,
-      accentColor: undefined,
-    });
-  }
-
-  private _supportsModeSelection(themeName: string): boolean {
-    const theme = this.hass.themes.themes[themeName];
-    if (!theme) {
-      return false;
-    }
-
-    return !!(theme.modes && "light" in theme.modes && "dark" in theme.modes);
-  }
-
-  private _handleDarkMode(ev: Event) {
-    let dark: boolean | undefined;
-    switch ((ev.currentTarget as HaRadioGroup).value) {
-      case "light":
-        dark = false;
-        break;
-      case "dark":
-        dark = true;
-        break;
-    }
-    fireEvent(this, "theme-settings-changed", { dark });
-  }
-
-  private _handleThemeSelection(
-    ev: ValueChangedEvent<string | undefined>
-  ): void {
-    ev.stopPropagation();
-    const theme = ev.detail.value;
-
-    if (theme === undefined) {
-      if (this.selectedTheme?.theme || this.hass.selectedTheme?.theme) {
-        fireEvent(this, "theme-settings-changed", {
-          theme: "",
-          primaryColor: undefined,
-          accentColor: undefined,
-        });
-      }
-      return;
-    }
-
-    if (theme === (this.selectedTheme ?? this.hass.selectedTheme)?.theme) {
-      return;
-    }
-
-    fireEvent(this, "theme-settings-changed", {
-      theme,
-      primaryColor: undefined,
-      accentColor: undefined,
-    });
-  }
-
-  static styles = css`
-    .inputs {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin: 0 var(--ha-space-3);
-    }
-    ha-radio-group {
-      display: flex;
-      justify-content: center;
-      margin-inline-end: var(--ha-space-3);
-    }
-    .color-pickers {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      flex-grow: 1;
-    }
-    ha-input {
-      min-width: 75px;
-      flex-grow: 1;
-      margin: 0 var(--ha-space-1);
-    }
-
-    ha-theme-picker {
-      display: block;
-      width: 100%;
-    }
-  `;
-}
-
-declare global {
-  interface HASSDomEvents {
-    "theme-settings-changed": Partial<ThemeSettings>;
-  }
-
-  interface HTMLElementTagNameMap {
-    "ha-theme-settings": HaThemeSettings;
-  }
-}

src/components/ha-top-app-bar-fixed.ts

@@ -2,19 +2,12 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { goBack } from "../common/navigate";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-icon-button-arrow-prev";
-import "./ha-menu-button";
 
 const PASSIVE_EVENT_OPTIONS = { passive: true } as const;
 
 export const haTopAppBarFixedStyles = css`
   :host {
     display: block;
-    position: relative;
-    height: 100vh;
-    overflow: hidden;
     --total-top-app-bar-height: calc(
       var(--header-height, 0px) + var(--sub-row-height, 0px)
     );
@@ -25,11 +18,10 @@ export const haTopAppBarFixedStyles = css`
     box-sizing: border-box;
     color: var(--app-header-text-color, #fff);
     background-color: var(--app-header-background-color, var(--primary-color));
-    position: absolute;
+    position: fixed;
     top: 0;
-    inset-inline-start: 0;
     inset-inline-end: 0;
-    width: 100%;
+    width: var(--ha-top-app-bar-width, 100%);
     z-index: 4;
     padding-top: var(--safe-area-inset-top);
     padding-right: var(--safe-area-inset-right);
@@ -121,17 +113,17 @@ export const haTopAppBarFixedStyles = css`
   }
 
   .top-app-bar-fixed-adjust {
-    box-sizing: border-box;
-    position: absolute;
-    top: calc(
+    height: calc(
+      100vh - var(--total-top-app-bar-height, 0px) - var(
+          --safe-area-inset-top,
+          0px
+        ) - var(--safe-area-inset-bottom, 0px)
+    );
+    padding-top: calc(
       var(--total-top-app-bar-height, 0px) + var(--safe-area-inset-top, 0px)
     );
-    bottom: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
     padding-bottom: var(--safe-area-inset-bottom);
     padding-right: var(--safe-area-inset-right);
-    overflow: auto;
   }
 
   :host([narrow]) .top-app-bar-fixed-adjust {
@@ -143,16 +135,12 @@ export const haTopAppBarFixedStyles = css`
 export class HaTopAppBarFixed extends LitElement {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: "back-button", type: Boolean }) backButton = false;
-
   @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
 
   @query(".top-app-bar") protected _barElement!: HTMLElement;
 
   @query(".sub-row") protected _subRowElement?: HTMLElement;
 
-  @query(".top-app-bar-fixed-adjust") protected _scrollElement?: HTMLElement;
-
   @state() private _hasSubRow = false;
 
   private _scrollTarget?: HTMLElement | Window;
@@ -161,13 +149,14 @@ export class HaTopAppBarFixed extends LitElement {
 
   @property({ attribute: false })
   public get scrollTarget(): HTMLElement | Window {
-    return this._scrollTarget || this._scrollElement || window;
+    return this._scrollTarget || window;
   }
 
   public set scrollTarget(value: HTMLElement | Window) {
     const old = this.scrollTarget;
     this._unregisterListeners();
     this._scrollTarget = value;
+    this._updateBarPosition();
     this.requestUpdate("scrollTarget", old);
     if (this.isConnected) {
       this._registerListeners();
@@ -189,6 +178,7 @@ export class HaTopAppBarFixed extends LitElement {
     if (this.hasUpdated) {
       this._observeSubRowHeight();
       this._updateSubRowHeight();
+      this._updateBarPosition();
       this._registerListeners();
       this._syncScrollState();
     }
@@ -210,14 +200,16 @@ export class HaTopAppBarFixed extends LitElement {
         <div class="row">
           ${paneHeader
             ? html`<section class="section" id="title">
-                ${this._renderNavigationIcon()} ${title}
+                <slot name="navigationIcon"></slot>
+                ${title}
               </section>`
             : nothing}
           <section class="section" id="navigation">
             ${paneHeader
               ? nothing
-              : html`${this._renderNavigationIcon()}
-                ${this.centerTitle ? nothing : title}`}
+              : html`<slot name="navigationIcon"></slot> ${this.centerTitle
+                    ? nothing
+                    : title}`}
           </section>
           ${!paneHeader && this.centerTitle
             ? html`<section class="section center">${title}</section>`
@@ -233,22 +225,8 @@ export class HaTopAppBarFixed extends LitElement {
     `;
   }
 
-  private _renderNavigationIcon() {
-    return html`
-      <slot name="navigationIcon">
-        ${this.backButton
-          ? html`
-              <ha-icon-button-arrow-prev
-                @click=${this._handleBackClick}
-              ></ha-icon-button-arrow-prev>
-            `
-          : html`<ha-menu-button></ha-menu-button>`}
-      </slot>
-    `;
-  }
-
   protected _renderContent() {
-    return html`<div class="top-app-bar-fixed-adjust ha-scrollbar">
+    return html`<div class="top-app-bar-fixed-adjust">
       <slot></slot>
     </div>`;
   }
@@ -257,6 +235,7 @@ export class HaTopAppBarFixed extends LitElement {
     super.firstUpdated(changedProperties);
     this._observeSubRowHeight();
     this._updateSubRowHeight();
+    this._updateBarPosition();
     this._registerListeners();
     this._syncScrollState();
   }
@@ -274,6 +253,13 @@ export class HaTopAppBarFixed extends LitElement {
     this._unregisterListeners();
   }
 
+  protected _updateBarPosition() {
+    if (this._barElement) {
+      this._barElement.style.position =
+        this.scrollTarget === window ? "" : "absolute";
+    }
+  }
+
   protected _syncScrollState = () => {
     const scrollTop =
       this.scrollTarget instanceof Window
@@ -282,11 +268,6 @@ export class HaTopAppBarFixed extends LitElement {
     this._barElement?.classList.toggle("scrolled", scrollTop > 0);
   };
 
-  private _handleBackClick(ev: Event) {
-    ev.stopPropagation();
-    goBack();
-  }
-
   protected _registerListeners() {
     this.scrollTarget.addEventListener(
       "scroll",
@@ -333,10 +314,7 @@ export class HaTopAppBarFixed extends LitElement {
     this.style.setProperty("--sub-row-height", `${subRowHeight}px`);
   };
 
-  static override styles: CSSResultGroup = [
-    haStyleScrollbar,
-    haTopAppBarFixedStyles,
-  ];
+  static override styles: CSSResultGroup = haTopAppBarFixedStyles;
 }
 
 declare global {

src/components/ha-tts-voice-picker.ts

@@ -85,25 +85,15 @@ export class HaTTSVoicePicker extends LitElement {
       await listTTSVoices(this.hass, this.engineId, this.language)
     ).voices;
 
-    const valueIsValid =
-      this.value &&
-      this._voices?.some((voice) => voice.voice_id === this.value);
-
-    if (valueIsValid) {
+    if (!this.value) {
       return;
     }
 
-    // The current value is missing or no longer valid for the loaded voices.
-    // When a voice is required, auto-select the first one (the <ha-select>
-    // already displays it) so the value is propagated to the parent;
-    // otherwise clear it.
-    const newValue =
-      this.required && this._voices?.length
-        ? this._voices[0].voice_id
-        : undefined;
-
-    if (newValue !== this.value) {
-      this.value = newValue;
+    if (
+      !this._voices ||
+      !this._voices.find((voice) => voice.voice_id === this.value)
+    ) {
+      this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });
     }
   }

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -29,7 +29,6 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
       <div
         class=${classMap({
           "top-app-bar-fixed-adjust": true,
-          "ha-scrollbar": true,
           "top-app-bar-fixed-adjust--pane": this.pane,
         })}
       >
@@ -131,7 +130,12 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
 
       .top-app-bar-fixed-adjust--pane {
         display: flex;
-        overflow: hidden;
+        height: calc(
+          100vh - var(--total-top-app-bar-height, 0px) - var(
+              --safe-area-inset-top,
+              0px
+            ) - var(--safe-area-inset-bottom, 0px)
+        );
       }
 
       .pane {
@@ -163,7 +167,6 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
         position: relative;
         flex: 1;
         height: 100%;
-        min-width: 0;
       }
 
       .top-app-bar-fixed-adjust--pane .content {

src/components/list/ha-list-virtualized.ts

@@ -156,7 +156,7 @@ export class HaListVirtualized extends HaListBase {
       this._activeItemFocus = focusItem;
       this._scrollToActiveItem = true;
       this.virtualizerElement
-        ?.element(this.activeItemIndex)
+        ?.element(index)
         ?.scrollIntoView({ block: "nearest" });
     }
   }

src/components/timezone-datalist.ts

@@ -0,0 +1,13 @@
+import timezones from "google-timezones-json";
+
+export const createTimezoneListEl = () => {
+  const list = document.createElement("datalist");
+  list.id = "timezones";
+  Object.keys(timezones).forEach((key) => {
+    const option = document.createElement("option");
+    option.value = key;
+    option.innerText = timezones[key];
+    list.appendChild(option);
+  });
+  return list;
+};

src/data/auth.ts

@@ -87,7 +87,7 @@ export const redirectWithAuthCode = (
   // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
   if (!url.includes("?")) {
     url += "?";
-  } else if (!url.endsWith("?") && !url.endsWith("&")) {
+  } else if (!url.endsWith("&")) {
     url += "&";
   }
 

src/data/camera.ts

@@ -17,7 +17,7 @@ export type StreamType = typeof STREAM_TYPE_HLS | typeof STREAM_TYPE_WEB_RTC;
 
 interface CameraEntityAttributes extends HassEntityAttributeBase {
   model_name: string;
-  access_token?: string;
+  access_token: string;
   brand: string;
   motion_detection: boolean;
   frontend_stream_type: string;
@@ -78,12 +78,8 @@ export const cameraUrlWithWidthHeight = (
   height: number
 ) => `${base_url}&width=${width}&height=${height}`;
 
-export const computeMJPEGStreamUrl = (
-  entity: CameraEntity
-): string | undefined =>
-  entity.attributes.access_token
-    ? `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`
-    : undefined;
+export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
+  `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
 
 export const fetchThumbnailUrlWithCache = async (
   hass: HomeAssistant,

src/data/context/dirty-state.ts

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

src/data/entity/entity_picker.ts

@@ -73,44 +73,30 @@ export const getEntities = (
 
   let entityIds = Object.keys(hass.states);
 
-  // These run over every entity, so use Sets for O(1) membership instead of
-  // repeated Array.includes scans.
   if (includeEntities) {
-    const includeEntitiesSet = new Set(includeEntities);
     entityIds = entityIds.filter((entityId) =>
-      includeEntitiesSet.has(entityId)
+      includeEntities.includes(entityId)
     );
   }
 
   if (excludeEntities) {
-    const excludeEntitiesSet = new Set(excludeEntities);
     entityIds = entityIds.filter(
-      (entityId) => !excludeEntitiesSet.has(entityId)
+      (entityId) => !excludeEntities.includes(entityId)
     );
   }
 
   if (includeDomains) {
-    const includeDomainsSet = new Set(includeDomains);
     entityIds = entityIds.filter((eid) =>
-      includeDomainsSet.has(computeDomain(eid))
+      includeDomains.includes(computeDomain(eid))
     );
   }
 
   if (excludeDomains) {
-    const excludeDomainsSet = new Set(excludeDomains);
     entityIds = entityIds.filter(
-      (eid) => !excludeDomainsSet.has(computeDomain(eid))
+      (eid) => !excludeDomains.includes(computeDomain(eid))
     );
   }
 
-  // These values are the same for every entity, so compute them once instead
-  // of inside the map over (potentially thousands of) entities.
-  const isRTL = computeRTL(
-    hass.language,
-    hass.translationMetadata.translations
-  );
-  const domainNames = new Map<string, string>();
-
   items = entityIds.map<EntityComboBoxItem>((entityId) => {
     const stateObj = hass.states[entityId];
 
@@ -124,12 +110,12 @@ export const getEntities = (
       hass.floors
     );
 
-    const domain = computeDomain(entityId);
-    let domainName = domainNames.get(domain);
-    if (domainName === undefined) {
-      domainName = domainToName(hass.localize, domain);
-      domainNames.set(domain, domainName);
-    }
+    const domainName = domainToName(hass.localize, computeDomain(entityId));
+
+    const isRTL = computeRTL(
+      hass.language,
+      hass.translationMetadata.translations
+    );
 
     const primary = entityName || deviceName || entityId;
     const secondary = [areaName, entityName ? deviceName : undefined]

src/data/history.ts

@@ -725,18 +725,16 @@ export const mergeHistoryResults = (
     }
 
     const newLineItem: LineChartUnit = { ...historyItem, data: [] };
-    const historyDataByEntity = new Map(
-      historyItem.data.map((d) => [d.entity_id, d])
-    );
-    const ltsDataByEntity = new Map(ltsItem.data.map((d) => [d.entity_id, d]));
     const entities = new Set([
-      ...historyDataByEntity.keys(),
-      ...ltsDataByEntity.keys(),
+      ...historyItem.data.map((d) => d.entity_id),
+      ...ltsItem.data.map((d) => d.entity_id),
     ]);
 
     for (const entity of entities) {
-      const historyDataItem = historyDataByEntity.get(entity);
-      const ltsDataItem = ltsDataByEntity.get(entity);
+      const historyDataItem = historyItem.data.find(
+        (d) => d.entity_id === entity
+      );
+      const ltsDataItem = ltsItem.data.find((d) => d.entity_id === entity);
 
       if (!historyDataItem || !ltsDataItem) {
         newLineItem.data.push(historyDataItem || ltsDataItem!);

src/data/image.ts

@@ -4,14 +4,12 @@ import type {
 } from "home-assistant-js-websocket";
 
 interface ImageEntityAttributes extends HassEntityAttributeBase {
-  access_token?: string;
+  access_token: string;
 }
 
 export interface ImageEntity extends HassEntityBase {
   attributes: ImageEntityAttributes;
 }
 
-export const computeImageUrl = (entity: ImageEntity): string | undefined =>
-  entity.attributes.access_token
-    ? `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`
-    : undefined;
+export const computeImageUrl = (entity: ImageEntity): string =>
+  `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`;

src/data/light.ts

@@ -43,6 +43,11 @@ export const lightSupportsColorMode = (
   mode: LightColorMode
 ) => entity.attributes.supported_color_modes?.includes(mode) || false;
 
+export const lightIsInColorMode = (entity: LightEntity) =>
+  (entity.attributes.color_mode &&
+    modesSupportingColor.includes(entity.attributes.color_mode)) ||
+  false;
+
 export const lightSupportsColor = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
     modesSupportingColor.includes(mode)
@@ -154,3 +159,5 @@ export const computeDefaultFavoriteColors = (
 
   return colors;
 };
+
+export const formatTempColor = (value: number) => `${value} K`;

src/data/matter.ts

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

src/data/radio_frequency.ts

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

src/data/update.ts

@@ -146,20 +146,10 @@ export const filterUpdateEntitiesParameterized = (
     return updateCanInstall(entity, showSkipped);
   });
 
-export const installUpdates = (
-  hass: HomeAssistant,
-  entityIds: string[],
-  notifyOnError = true
-) =>
-  hass.callService(
-    "update",
-    "install",
-    {
-      entity_id: entityIds,
-    },
-    undefined,
-    notifyOnError
-  );
+export const installUpdates = (hass: HomeAssistant, entityIds: string[]) =>
+  hass.callService("update", "install", {
+    entity_id: entityIds,
+  });
 
 export const checkForEntityUpdates = async (
   element: HTMLElement,
@@ -231,24 +221,6 @@ export const computeUpdateStateDisplay = (
   const state = stateObj.state;
   const attributes = stateObj.attributes;
 
-  // An install can be in progress even when the state is "off", e.g. when
-  // downgrading firmware (installed_version is newer than latest_version).
-  // Show the installing status regardless of state in that case.
-  if (updateIsInstalling(stateObj)) {
-    const supportsProgress =
-      supportsFeature(stateObj, UpdateEntityFeature.PROGRESS) &&
-      attributes.update_percentage !== null;
-    if (supportsProgress) {
-      return hass.localize("ui.card.update.installing_with_progress", {
-        progress: formatNumber(attributes.update_percentage!, hass.locale, {
-          maximumFractionDigits: attributes.display_precision,
-          minimumFractionDigits: attributes.display_precision,
-        }),
-      });
-    }
-    return hass.localize("ui.card.update.installing");
-  }
-
   if (state === "off") {
     const isSkipped =
       attributes.latest_version &&
@@ -259,6 +231,23 @@ export const computeUpdateStateDisplay = (
     return hass.formatEntityState(stateObj);
   }
 
+  if (state === "on") {
+    if (updateIsInstalling(stateObj)) {
+      const supportsProgress =
+        supportsFeature(stateObj, UpdateEntityFeature.PROGRESS) &&
+        attributes.update_percentage !== null;
+      if (supportsProgress) {
+        return hass.localize("ui.card.update.installing_with_progress", {
+          progress: formatNumber(attributes.update_percentage!, hass.locale, {
+            maximumFractionDigits: attributes.display_precision,
+            minimumFractionDigits: attributes.display_precision,
+          }),
+        });
+      }
+      return hass.localize("ui.card.update.installing");
+    }
+  }
+
   return hass.formatEntityState(stateObj);
 };
 

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -10,21 +10,13 @@ import "../../components/ha-button";
 import type { HaSwitch } from "../../components/ha-switch";
 import type { ConfigEntryMutableParams } from "../../data/config_entries";
 import { updateConfigEntry } from "../../data/config_entries";
-import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
 
-interface SystemOptionsState {
-  disableNewEntities: boolean;
-  disablePolling: boolean;
-}
-
 @customElement("dialog-config-entry-system-options")
-class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptionsState>()(
-  LitElement
-) {
+class DialogConfigEntrySystemOptions extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _disableNewEntities!: boolean;
@@ -46,13 +38,6 @@ class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptio
     this._error = undefined;
     this._disableNewEntities = params.entry.pref_disable_new_entities;
     this._disablePolling = params.entry.pref_disable_polling;
-    this._initDirtyTracking(
-      { type: "shallow" },
-      {
-        disableNewEntities: this._disableNewEntities,
-        disablePolling: this._disablePolling,
-      }
-    );
     this._open = true;
   }
 
@@ -83,7 +68,7 @@ class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptio
               ) || this._params.entry.domain,
           }
         )}
-        .preventScrimClose=${this.isDirtyState}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
@@ -150,7 +135,7 @@ class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptio
           <ha-button
             slot="primaryAction"
             @click=${this._updateEntry}
-            .disabled=${this._submitting || !this.isDirtyState}
+            .disabled=${this._submitting}
           >
             ${this.hass.localize(
               "ui.dialogs.config_entry_system_options.update"
@@ -164,19 +149,11 @@ class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptio
   private _disableNewEntitiesChanged(ev: Event): void {
     this._error = undefined;
     this._disableNewEntities = !(ev.target as HaSwitch).checked;
-    this._updateDirtyState({
-      disableNewEntities: this._disableNewEntities,
-      disablePolling: this._disablePolling,
-    });
   }
 
   private _disablePollingChanged(ev: Event): void {
     this._error = undefined;
     this._disablePolling = !(ev.target as HaSwitch).checked;
-    this._updateDirtyState({
-      disableNewEntities: this._disableNewEntities,
-      disablePolling: this._disablePolling,
-    });
   }
 
   private async _updateEntry(): Promise<void> {

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -403,7 +403,6 @@ class DataEntryFlowDialog extends LitElement {
                           .flowConfig=${this._params.flowConfig}
                           .step=${this._step}
                           .hass=${this.hass}
-                          .domain=${this._params.domain ?? this._step.handler}
                           @flow-step-footer-state-changed=${this
                             ._handleFooterStateChanged}
                         ></step-flow-form>

src/dialogs/config-flow/previews/entity-preview-row.ts

@@ -106,9 +106,7 @@ class EntityPreviewRow extends LitElement {
     }
   `;
 
-  private _renderEntityState(
-    stateObj: HassEntity
-  ): TemplateResult | string | typeof nothing {
+  private _renderEntityState(stateObj: HassEntity): TemplateResult | string {
     const domain = stateObj.entity_id.split(".", 1)[0];
     const disabled = stateObj.state === UNAVAILABLE;
     const noValue =
@@ -218,10 +216,7 @@ class EntityPreviewRow extends LitElement {
     }
 
     if (domain === "image") {
-      const image = computeImageUrl(stateObj as ImageEntity);
-      if (!image) {
-        return nothing;
-      }
+      const image: string = computeImageUrl(stateObj as ImageEntity);
       return html`
         <img
           alt=${ifDefined(stateObj?.attributes.friendly_name)}

src/dialogs/config-flow/step-flow-form.ts

@@ -35,10 +35,6 @@ class StepFlowForm extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  // The integration domain this flow belongs to. Unlike `step.handler`, this is
-  // the domain even for options flows (where the handler is the config entry id).
-  @property({ attribute: false }) public domain?: string;
-
   @state() private _loading = false;
 
   @state() private _stepData?: Record<string, any>;
@@ -112,7 +108,7 @@ class StepFlowForm extends LitElement {
               .computeHelper=${this._helperCallback}
               .computeError=${this._errorCallback}
               .localizeValue=${this._localizeValueCallback}
-              .context=${{ handler: step.handler, domain: this.domain }}
+              .context=${{ handler: step.handler }}
             ></ha-form>`
           : nothing}
       </div>

src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-segment-mapping.ts

@@ -1,4 +1,3 @@
-import { consume } from "@lit/context";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,10 +6,6 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-vacuum-segment-area-mapper";
 import type { HaVacuumSegmentAreaMapper } from "../../../../components/ha-vacuum-segment-area-mapper";
-import {
-  dirtyStateContext,
-  type DirtyStateContext,
-} from "../../../../data/context/dirty-state";
 import type {
   ExtEntityRegistryEntry,
   VacuumEntityOptions,
@@ -19,7 +14,7 @@ import {
   getExtendedEntityRegistryEntry,
   updateEntityRegistryEntry,
 } from "../../../../data/entity/entity_registry";
-import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
+import type { HomeAssistant } from "../../../../types";
 
 @customElement("ha-more-info-view-vacuum-segment-mapping")
 export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
@@ -27,17 +22,12 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
 
   @property({ attribute: false }) public params!: { entityId: string };
 
-  @consume({ context: dirtyStateContext, subscribe: true })
-  @state()
-  private _dirtyState?: DirtyStateContext<
-    Record<string, string[]>,
-    "vacuum-segment-mapping"
-  >;
-
   @state() private _areaMapping?: Record<string, string[]>;
 
   @state() private _submitting = false;
 
+  @state() private _dirty = false;
+
   @state() private _error?: string;
 
   private _entry?: ExtEntityRegistryEntry;
@@ -54,15 +44,16 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
       this.params.entityId
     );
 
-    const mapping: Record<string, string[]> =
-      this._entry?.options?.vacuum?.area_mapping || {};
-    this._areaMapping = mapping;
-    this._dirtyState?.setState(mapping, "vacuum-segment-mapping");
+    if (this._entry?.options?.vacuum) {
+      this._areaMapping = this._entry.options.vacuum.area_mapping || {};
+    } else {
+      this._areaMapping = {};
+    }
   }
 
-  private _valueChanged(ev: ValueChangedEvent<Record<string, string[]>>) {
+  private _valueChanged(ev: CustomEvent) {
     this._areaMapping = ev.detail.value;
-    this._dirtyState?.setState(ev.detail.value, "vacuum-segment-mapping");
+    this._dirty = true;
   }
 
   private async _save() {
@@ -86,7 +77,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
         options_domain: "vacuum",
         options: options,
       });
-      this._dirtyState?.markClean();
+      this._dirty = false;
       fireEvent(this, "close-child-view");
     } catch (err: any) {
       this._error = err.message;
@@ -116,7 +107,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
         <div class="footer">
           <ha-button
             @click=${this._save}
-            .disabled=${!this._dirtyState?.isDirty || this._submitting}
+            .disabled=${!this._dirty || this._submitting}
           >
             ${this.hass.localize("ui.common.save")}
           </ha-button>

src/dialogs/more-info/controls/more-info-image.ts

@@ -15,13 +15,9 @@ class MoreInfoImage extends LitElement {
     if (!this.hass || !this.stateObj) {
       return nothing;
     }
-    const imageUrl = computeImageUrl(this.stateObj);
-    if (!imageUrl) {
-      return nothing;
-    }
     return html`<img
       alt=${this.stateObj.attributes.friendly_name || this.stateObj.entity_id}
-      src=${this.hass.hassUrl(imageUrl)}
+      src=${this.hass.hassUrl(computeImageUrl(this.stateObj))}
     /> `;
   }
 

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -116,14 +116,12 @@ class MoreInfoMediaPlayer extends LitElement {
       MediaPlayerEntityFeature.VOLUME_SET
     );
 
-    const assumedState = this.stateObj.attributes.assumed_state === true;
-
     return html`${(supportsFeature(
       this.stateObj!,
       MediaPlayerEntityFeature.VOLUME_SET
     ) ||
       supportsFeature(this.stateObj!, MediaPlayerEntityFeature.VOLUME_STEP)) &&
-    (stateActive(this.stateObj!) || assumedState)
+    stateActive(this.stateObj!)
       ? html`
           <div class="volume">
             ${supportsMute

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -40,9 +40,7 @@ export class HaMoreInfoAddTo extends LitElement {
   @state() private _loading = true;
 
   private async _loadActions() {
-    this._defaultActions = this._config?.user?.is_admin
-      ? getDefaultAddToActions()
-      : [];
+    this._defaultActions = getDefaultAddToActions();
     this._externalActions = [];
 
     if (this._config?.auth.external?.config.hasEntityAddTo) {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -63,9 +63,6 @@ import { subscribeLabFeature } from "../../data/labs";
 import type { ItemType } from "../../data/search";
 import { SearchableDomains } from "../../data/search";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
-import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
-import type { EntitySettingsState } from "../../panels/config/entities/entity-registry-settings-editor";
-import type { Helper } from "../../panels/config/helpers/const";
 import { ScrollableFadeMixin } from "../../mixins/scrollable-fade-mixin";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import {
@@ -124,10 +121,9 @@ declare global {
 const DEFAULT_VIEW: MoreInfoView = "info";
 
 @customElement("ha-more-info-dialog")
-export class MoreInfoDialog extends DirtyStateProviderMixin<
-  EntitySettingsState | Helper | Record<string, string[]> | null,
-  "entity-registry" | "helper" | "vacuum-segment-mapping"
->()(SubscribeMixin(ScrollableFadeMixin(LitElement))) {
+export class MoreInfoDialog extends SubscribeMixin(
+  ScrollableFadeMixin(LitElement)
+) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public large = false;
@@ -266,8 +262,9 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _shouldShowAddEntityTo(): boolean {
+    // When new_triggers_conditions labs feature is promoted, this whole check can be removed.
     return (
-      (this._newTriggersAndConditions && !!this.hass.user?.is_admin) ||
+      this._newTriggersAndConditions ||
       !!this.hass.auth.external?.config.hasEntityAddTo
     );
   }
@@ -636,18 +633,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
       this.hass.translationMetadata.translations
     );
 
-    const childViewContent = this._childView
-      ? html`
-          <div class="child-view">
-            ${dynamicElement(this._childView.viewTag, {
-              hass: this.hass,
-              entry: this._entry,
-              params: this._childView.viewParams,
-            })}
-          </div>
-        `
-      : nothing;
-
     return html`
       <ha-adaptive-dialog
         .open=${this._open}
@@ -655,9 +640,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
         @closed=${this._dialogClosed}
         @opened=${this._handleOpened}
         @show-child-view=${this._showChildView}
-        .preventScrimClose=${((this._currView === "settings" ||
-          this._childView) &&
-          this.isDirtyState) ||
+        .preventScrimClose=${this._currView === "settings" ||
         !this._isEscapeEnabled}
         flexcontent
       >
@@ -880,65 +863,70 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
                 @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
                 @hass-more-info=${this._handleMoreInfoEvent}
               >
-                ${this._currView === "settings"
-                  ? html`
-                      <div ?hidden=${!!this._childView}>
-                        <ha-more-info-settings
-                          .hass=${this.hass}
-                          .entityId=${this._entityId}
-                          .entry=${this._entry}
-                        ></ha-more-info-settings>
-                      </div>
-                      ${childViewContent}
-                    `
-                  : cache(
-                      this._childView
-                        ? childViewContent
-                        : this._currView === "info"
+                ${cache(
+                  this._childView
+                    ? html`
+                        <div class="child-view">
+                          ${dynamicElement(this._childView.viewTag, {
+                            hass: this.hass,
+                            entry: this._entry,
+                            params: this._childView.viewParams,
+                          })}
+                        </div>
+                      `
+                    : this._currView === "info"
+                      ? html`
+                          <ha-more-info-info
+                            .hass=${this.hass}
+                            .entityId=${this._entityId}
+                            .entry=${this._entry}
+                            .editMode=${this._infoEditMode}
+                            .data=${this._data}
+                          ></ha-more-info-info>
+                        `
+                      : this._currView === "history"
+                        ? html`
+                            <ha-more-info-history-and-logbook
+                              .hass=${this.hass}
+                              .entityId=${this._entityId}
+                            ></ha-more-info-history-and-logbook>
+                          `
+                        : this._currView === "settings"
                           ? html`
-                              <ha-more-info-info
+                              <ha-more-info-settings
                                 .hass=${this.hass}
                                 .entityId=${this._entityId}
                                 .entry=${this._entry}
-                                .editMode=${this._infoEditMode}
-                                .data=${this._data}
-                              ></ha-more-info-info>
+                              ></ha-more-info-settings>
                             `
-                          : this._currView === "history"
+                          : this._currView === "related"
                             ? html`
-                                <ha-more-info-history-and-logbook
+                                <ha-related-items
                                   .hass=${this.hass}
-                                  .entityId=${this._entityId}
-                                ></ha-more-info-history-and-logbook>
+                                  .itemId=${entityId}
+                                  .itemType=${SearchableDomains.has(domain)
+                                    ? (domain as ItemType)
+                                    : "entity"}
+                                ></ha-related-items>
                               `
-                            : this._currView === "related"
+                            : this._currView === "add_to"
                               ? html`
-                                  <ha-related-items
-                                    .hass=${this.hass}
-                                    .itemId=${entityId}
-                                    .itemType=${SearchableDomains.has(domain)
-                                      ? (domain as ItemType)
-                                      : "entity"}
-                                  ></ha-related-items>
+                                  <ha-more-info-add-to
+                                    .entityId=${entityId}
+                                    @add-to-action-selected=${this._goBack}
+                                  ></ha-more-info-add-to>
                                 `
-                              : this._currView === "add_to"
+                              : this._currView === "details"
                                 ? html`
-                                    <ha-more-info-add-to
-                                      .entityId=${entityId}
-                                      @add-to-action-selected=${this._goBack}
-                                    ></ha-more-info-add-to>
+                                    <ha-more-info-details
+                                      .hass=${this.hass}
+                                      .entry=${this._entry}
+                                      .params=${{ entityId }}
+                                      .yamlMode=${this._detailsYamlMode}
+                                    ></ha-more-info-details>
                                   `
-                                : this._currView === "details"
-                                  ? html`
-                                      <ha-more-info-details
-                                        .hass=${this.hass}
-                                        .entry=${this._entry}
-                                        .params=${{ entityId }}
-                                        .yamlMode=${this._detailsYamlMode}
-                                      ></ha-more-info-details>
-                                    `
-                                  : nothing
-                    )}
+                                : nothing
+                )}
               </div>
             `
           )}
@@ -961,10 +949,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
       | MoreInfoView
       | undefined;
 
-    if (previousView === "settings" && this._currView !== "settings") {
-      this._discardDirtyStateChanges();
-    }
-
     if (previousView === "details" && this._currView !== "details") {
       const dialog =
         this._dialogElement?.shadowRoot?.querySelector("ha-dialog");
@@ -973,12 +957,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
       }
     }
 
-    if (changedProps.has("_currView") || changedProps.has("_entry")) {
-      if (this._currView === "settings" && this._entry) {
-        this._initDirtyTracking({ type: "deep" });
-      }
-    }
-
     if (changedProps.has("_currView")) {
       this._infoEditMode = false;
       this._detailsYamlMode = false;
@@ -1103,7 +1081,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
         .title .breadcrumb {
           color: var(--secondary-text-color);
           font-size: var(--ha-font-size-m);
-          font-family: var(--ha-font-family-heading, inherit);
           line-height: 16px;
           --mdc-icon-size: 16px;
           padding: var(--ha-space-1);

src/dialogs/more-info/more-info-content.ts

@@ -22,7 +22,6 @@ interface EntityInfo {
   entityId: string;
   entityName: string | undefined;
   areaId: string | undefined;
-  deviceId: string | undefined;
 }
 
 @customElement("more-info-content")
@@ -121,7 +120,7 @@ class MoreInfoContent extends LitElement {
           hass.entities,
           hass.devices
         );
-        const { area, device } = getEntityContext(
+        const { area } = getEntityContext(
           stateObj,
           hass.entities,
           hass.devices,
@@ -129,8 +128,7 @@ class MoreInfoContent extends LitElement {
           hass.floors
         );
         const areaId = area?.area_id;
-        const deviceId = device?.id;
-        return { entityId, entityName, areaId, deviceId };
+        return { entityId, entityName, areaId };
       })
       .filter(Boolean) as EntityInfo[];
 
@@ -142,20 +140,10 @@ class MoreInfoContent extends LitElement {
     const areaIds = new Set(entityInfos.map((info) => info.areaId));
     const allSameArea = areaIds.size === 1;
 
-    // Check if all entities belong to the same device
-    const deviceIds = new Set(entityInfos.map((info) => info.deviceId));
-    const allSameDevice = deviceIds.size === 1;
+    // Build name and state content config based on conditions
+    const name: EntityNameItem[] = [{ type: "device" }];
 
-    // Build name and state content config based on conditions. The device name
-    // is redundant when every member belongs to the same device, so omit it
-    // (and fall back to the entity name so the tile still has a label).
-    const name: EntityNameItem[] = [];
-
-    if (!allSameDevice) {
-      name.push({ type: "device" });
-    }
-
-    if (!allSameEntityName || allSameDevice) {
+    if (!allSameEntityName) {
       name.push({ type: "entity" });
     }
 

src/entrypoints/service-worker.ts

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

src/external_app/external_app_entrypoint.ts

@@ -5,7 +5,6 @@ in core bundle slows things down and causes duplicate registration.
 This is the entry point for providing external app stuff from app entrypoint.
 */
 
-import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
 import { navigate } from "../common/navigate";
@@ -16,7 +15,6 @@ import type {
   EMIncomingMessageBarCodeScanResult,
   EMIncomingMessageCommands,
   ImprovDiscoveredDevice,
-  MatterCommissionFinish,
 } from "./external_messaging";
 
 const barCodeListeners = new Set<
@@ -93,8 +91,6 @@ export const handleExternalMessage = (
     fireEvent(window, "improv-discovered-device", msg.payload);
   } else if (msg.command === "improv/device_setup_done") {
     fireEvent(window, "improv-device-setup-done");
-  } else if (msg.command === "matter/commission/finish") {
-    fireEvent(window, "matter-commission-finish", msg.payload);
   } else if (msg.command === "bar_code/scan_result") {
     barCodeListeners.forEach((listener) => listener(msg));
   } else if (msg.command === "bar_code/aborted") {
@@ -119,10 +115,5 @@ declare global {
   interface HASSDomEvents {
     "improv-discovered-device": ImprovDiscoveredDevice;
     "improv-device-setup-done": undefined;
-    "matter-commission-finish": MatterCommissionFinish;
-  }
-
-  interface GlobalEventHandlersEventMap {
-    "matter-commission-finish": HASSDomEvent<MatterCommissionFinish>;
   }
 }

src/external_app/external_messaging.ts

@@ -320,18 +320,6 @@ export interface EMIncomingMessageKioskModeSet {
   };
 }
 
-export interface MatterCommissionFinish {
-  name: string | null;
-  success: boolean;
-}
-
-export interface EMIncomingMessageMatterCommissionFinish extends EMMessage {
-  id: number;
-  type: "command";
-  command: "matter/commission/finish";
-  payload: MatterCommissionFinish;
-}
-
 export type EMIncomingMessageCommands =
   | EMIncomingMessageRestart
   | EMIncomingMessageNavigate
@@ -343,7 +331,6 @@ export type EMIncomingMessageCommands =
   | EMIncomingMessageBarCodeScanAborted
   | EMIncomingMessageImprovDeviceDiscovered
   | EMIncomingMessageImprovDeviceSetupDone
-  | EMIncomingMessageMatterCommissionFinish
   | EMIncomingMessageKioskModeSet;
 
 type EMIncomingMessage =
@@ -359,7 +346,6 @@ export interface ExternalConfig {
   canWriteTag?: boolean;
   hasExoPlayer?: boolean;
   canCommissionMatter?: boolean;
-  hasMatterStatusReport?: boolean;
   canImportThreadCredentials?: boolean;
   canTransferThreadCredentialsToKeychain?: boolean;
   hasAssist?: boolean;