Add BrowserStack cross-browser/device e2e runs

Layers BrowserStack on top of the local Playwright e2e suites: - browserstack.yml (Windows Chrome, macOS Firefox, iPad/iPhone WebKit, Galaxy S23) driven by the BrowserStack Node SDK and Local tunnel - :browserstack package scripts and the gated E2E (BrowserStack) CI job (runs on manual dispatch or the e2e-browserstack PR label) - tunnel/iOS-WebKit resilience in the specs (bs-local.com host, single shared mobile context, dynamic-import + CDP "Internal error" skips) Co-Authored-By: Claude Opus 4.8 <[email protected]>
Add Playwright e2e tests for demo, test app, and gallery
2026-08-07 15:06:57 +00:00 · 2026-06-17 10:50:27 +02:00 · 2026-06-17 10:49:08 +02:00 · 2026-06-17 08:38:24 +01:00 · 2026-06-17 08:23:40 +03:00 · 2026-06-17 07:12:30 +02:00
1270 changed files with 108836 additions and 23088 deletions
@@ -2,12 +2,13 @@

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

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

 ## Table of Contents

 - [Quick Reference](#quick-reference)
 - [Core Architecture](#core-architecture)
+- [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - [Development Standards](#development-standards)
 - [Component Library](#component-library)
 - [Common Patterns](#common-patterns)
@@ -40,7 +41,7 @@ script/develop     # Development server
 ```typescript
 import type { HomeAssistant } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 ```

 ## Core Architecture
@@ -52,13 +53,64 @@ The Home Assistant frontend is a modern web application that:
 - Communicates with the backend via WebSocket API
 - Provides comprehensive theming and internationalization

+## State Access: Contexts Instead of `hass`
+
+Every component used to take the whole `hass: HomeAssistant` object — a god-object that re-renders on any unrelated `hass` change, forces tests to mock everything, and hides what a component actually reads. We're moving leaf components to **fine-grained [Lit context](https://lit.dev/docs/data/context/)**: consume only the slice you need and re-render only when it changes.
+
+For new code, consume the matching context instead of adding a `hass` property. `hass` stays for container components that own it and feed the providers; the canonical migration is [`hui-button-card.ts`](src/panels/lovelace/cards/hui-button-card.ts). Infrastructure: contexts in [`src/data/context/index.ts`](src/data/context/index.ts), the `consume…` helpers in [`src/common/decorators/consume-context-entry.ts`](src/common/decorators/consume-context-entry.ts), and `@transform` in [`src/common/decorators/transform.ts`](src/common/decorators/transform.ts). Providers are wired automatically by `contextMixin` on `HassBaseEl` — you only consume.
+
+### Contexts
+
+Consume the narrowest context that covers your reads:
+
+| Context                                                                 | Replaces                                                                                  |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `statesContext`                                                         | `hass.states`                                                                             |
+| `entitiesContext` / `devicesContext` / `areasContext` / `floorsContext` | `hass.entities` / `.devices` / `.areas` / `.floors` (or `registriesContext` for all four) |
+| `servicesContext`                                                       | `hass.services`                                                                           |
+| `internationalizationContext`                                           | `hass.localize`, `hass.locale`, `hass.language`                                           |
+| `formattersContext`                                                     | `hass.formatEntityName`, `hass.formatEntityState`, `hass.formatEntityAttributeName`, …    |
+| `configContext`                                                         | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                                  |
+| `connectionContext`                                                     | `hass.connection`, `hass.connected`, `hass.hassUrl`                                       |
+| `apiContext`                                                            | `hass.callService`, `hass.callApi`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth`    |
+| `uiContext`                                                             | `hass.themes`, `hass.selectedTheme`, `hass.panels`, `hass.dockedSidebar`, …               |
+| `narrowViewportContext`                                                 | narrow-layout boolean                                                                     |
+
+Lazy contexts (subscribe on first consumer, tear down after the last): `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`. The single-field contexts (`localizeContext`, `themesContext`, `userContext`, …) are **deprecated** — use the grouped ones above.
+
+### Consuming
+
+Use the `consume…` helpers for entity-scoped and `localize` reads. `entityIdPath` is resolved against `this`, so these watch `this._config.entity`:
+
+```ts
+@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
+private _stateObj?: HassEntity; // consumeEntityStates(...) for a record of several
+
+@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
+private _entity?: EntityRegistryDisplayEntry;
+
+@state() @consumeLocalize()
+private _localize!: LocalizeFunc;
+```
+
+For any other single field, pair `@consume` with `@transform`:
+
+```ts
+@state()
+@consume({ context: uiContext, subscribe: true })
+@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
+private _themes!: Themes;
+```
+
+`@transform`'s `watch` option re-runs the transformer when a host prop changes — needed when an entity id is computed, since `consumeEntityState` only watches the first path segment. To consume a whole group untransformed, drop `@transform` and type it `ContextType<typeof statesContext>`.
+
 ## Development Standards

 ### Code Quality Requirements

 **Linting and Formatting (Enforced by Tools)**

- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
+- ESLint config (flat config) extends TypeScript strict, Lit, Web Components, Accessibility (lit-a11y), and import-x
 - Prettier with ES5 trailing commas enforced
 - No console statements (`no-console: "error"`) - use proper logging
 - Import organization: No unused imports, consistent type imports
@@ -136,6 +188,7 @@ export class HaMyComponent extends LitElement {
 ### Data Management

 - **Use WebSocket API**: All backend communication via home-assistant-js-websocket
+- **Prefer contexts over `hass`**: For state reads, consume the relevant Lit context instead of taking the whole `hass` object — see [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - **Cache appropriately**: Use collections and caching for frequently accessed data
 - **Handle errors gracefully**: All API calls should have error handling
 - **Update real-time**: Subscribe to state changes for live updates
@@ -160,7 +213,7 @@ try {
  - Defined in `src/resources/theme/core.globals.ts`
  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
- **Follow Material Design**: Use Material Web Components where appropriate
+- **Prefer `ha-*` components**: Build on the Home Assistant component library (many now wrap Web Awesome components); avoid new use of legacy Material Web Components (`mwc-*`), which are being phased out
 - **Support RTL**: Ensure all layouts work in RTL languages

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

 ## Component Library

@@ -267,22 +321,24 @@ fireEvent(this, "show-dialog", {

 **Dialog Sizing:**

- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
+- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (580px - default), `"large"` (1024px), or `"full"`
 - Custom sizing is NOT recommended - use the standard width presets

 **Button Appearance Guidelines:**

- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
- **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
+`ha-button` (wraps the Web Awesome button — see `src/components/ha-button.ts`) has two independent axes plus size:
+
+- **`variant`** (color): `"brand"` (default), `"neutral"`, `"danger"`, `"warning"`, `"success"`
+- **`appearance`** (fill style): `"accent"`, `"filled"`, `"outlined"`, `"plain"`
+- **`size`**: `"xs"` (extra small, 40px), `"s"` (small, 32px), `"m"` (medium, 40px - default), `"l"` (large, 48px), `"xl"` (extra large, 40px)
+
+Common patterns:
+
+- **Primary action**: `appearance="filled"` for emphasis (or the default appearance for a lighter look)
+- **Secondary action**: `appearance="plain"` for cancel/dismiss actions
+- **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[]`
@@ -301,14 +357,11 @@ fireEvent(this, "show-dialog", {
 ></ha-form>
 ```

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

 - Types: `error`, `warning`, `info`, `success`
- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
+- Properties: `title`, `alert-type`, `dismissable`, `narrow`
+- Slots: `icon` (override the leading icon), `action` (custom action content)
 - Content announced by screen readers when dynamically displayed

 ```html
@@ -317,10 +370,6 @@ fireEvent(this, "show-dialog", {
 <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.
@@ -344,7 +393,6 @@ The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming

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

 ## Common Patterns

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

 #### Creating a Lovelace Card

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

 ```typescript
@customElement("hui-my-card")
@@ -447,9 +495,13 @@ 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 use `querySelector` - Use refs or component properties
+- Don't manually query the DOM with `querySelector` - use the `@query`/`@queryAll` decorators or component properties
 - Don't manipulate DOM directly - Let Lit handle rendering
 - Don't use global styles - Scope styles to components
 - Don't block the main thread - Use web workers for heavy computation
@@ -477,7 +529,7 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Terminology Standards

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

 - **Use "Remove"** for actions that can be restored or reapplied:
  - Removing a user's permission
@@ -540,35 +592,24 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Translation Considerations

- **Add translation keys**: All user-facing text must be translatable
- **Use placeholders**: Support dynamic content in translations
+All user-facing text must be translatable — see the **Internationalization** section (under Common Patterns) for the `localize` API and placeholder usage. From a copy perspective:
+
 - **Keep context**: Provide enough context for translators
-
-```typescript
-// Good
-this.hass.localize("ui.panel.config.automation.delete_confirm", {
-  name: automation.alias,
-});
-
-// Bad - hardcoded text
-("Are you sure you want to delete this automation?");
-```
+- **Avoid concatenation**: Prefer full localized strings with placeholders over stitching translated fragments together

 ### Common Review Issues (From PR Analysis)

+Recurring, easy-to-miss problems surfaced in real PR reviews. These complement the standards above rather than repeating them — items already covered earlier (loading states, error handling, mobile layout, theming, import hygiene) are intentionally not duplicated here.
+
 #### User Experience and Accessibility

 - **Form validation**: Always provide proper field labels and validation feedback
 - **Form accessibility**: Prevent password managers from incorrectly identifying fields
- **Loading states**: Show clear progress indicators during async operations
- **Error handling**: Display meaningful error messages when operations fail
- **Mobile responsiveness**: Ensure components work well on small screens
 - **Hit targets**: Make clickable areas large enough for touch interaction
- **Visual feedback**: Provide clear indication of interactive states
+- **Visual feedback**: Provide clear indication of interactive states (hover, active, focus)

 #### Dialog and Modal Patterns

- **Dialog width constraints**: Respect minimum and maximum width requirements
 - **Interview progress**: Show clear progress for multi-step operations
 - **State persistence**: Handle dialog state properly during background operations
 - **Cancel behavior**: Ensure cancel/close buttons work consistently
@@ -580,15 +621,12 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - **Visual hierarchy**: Ensure proper font sizes and spacing ratios
 - **Grid alignment**: Components should align to the design grid system
 - **Badge placement**: Position badges and indicators consistently
- **Color theming**: Respect theme variables and design system colors

 #### Code Quality Issues

 - **Null checking**: Always check if entities exist before accessing properties
 - **TypeScript safety**: Handle potentially undefined array/object access
- **Import organization**: Remove unused imports and use proper type imports
- **Event handling**: Properly subscribe and unsubscribe from events
- **Memory leaks**: Clean up subscriptions and event listeners
+- **Event handling and cleanup**: Subscribe/unsubscribe correctly and remove listeners to avoid memory leaks

 #### Configuration and Props

@@ -599,39 +637,12 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {

 ## Review Guidelines

-### Core Requirements Checklist
+Final pre-submission checklist. Linting and formatting are enforced by tooling, so this focuses on what tools can't catch rather than restating every rule above.

- [ ] TypeScript strict mode passes (`yarn lint:types`)
- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
- [ ] Prettier formatting applied (`yarn lint:prettier`)
- [ ] Lit analyzer passes (`yarn lint:lit`)
- [ ] Component follows Lit best practices
- [ ] Proper error handling implemented
- [ ] Loading states handled
- [ ] Mobile responsive
- [ ] Theme variables used
- [ ] Translations added
- [ ] Accessible to screen readers
- [ ] Tests added (where applicable)
- [ ] No console statements (use proper logging)
- [ ] Unused imports removed
- [ ] Proper naming conventions
-
-### Text and Copy Checklist
-
- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
- [ ] Localization keys added for all user-facing text
- [ ] Uses "Home Assistant" (never "HA" or "HASS")
- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
- [ ] American English spelling
- [ ] Friendly, informational tone
- [ ] Avoids abbreviations and jargon
- [ ] Correct terminology (integration not component)
-
-### Component-Specific Checks
-
- [ ] ha-alert used correctly for messages
- [ ] ha-form uses proper schema structure
+- [ ] `yarn lint` passes (TypeScript, ESLint, Prettier, Lit analyzer) and `yarn test` is green
+- [ ] Tests added for new data processing/utilities (where applicable)
+- [ ] All user-facing text is localized and follows the Text and Copy guidelines (sentence case, "Home Assistant" in full, Delete/Remove + Create/Add)
 - [ ] Components handle all states (loading, error, unavailable)
 - [ ] Entity existence checked before property access
- [ ] Event subscriptions properly cleaned up
+- [ ] Event/subscription listeners cleaned up (no memory leaks)
+- [ ] Accessible to screen readers and keyboard
@@ -0,0 +1,50 @@
+name: Blocking labels
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
+    branches:
+      - dev
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  check:
+    name: Check for labels which block the Pull Request from being merged
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for blocking labels
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        with:
+          script: |
+            const blockingLabels = [
+              "wait for backend",
+              "Needs UX",
+              "Do Not Review",
+              "Blocked",
+              "has-parent",
+            ];
+            const prLabels = context.payload.pull_request.labels.map(
+              (l) => l.name
+            );
+            const found = blockingLabels.filter((bl) => prLabels.includes(bl));
+            if (found.length > 0) {
+              const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
+              await core.summary
+                .addHeading(":no_entry_sign: Pull Request is blocked", 2)
+                .addRaw(message)
+                .write();
+              core.setFailed(message);
+            } else {
+              await core.summary
+                .addHeading(":white_check_mark: Pull Request is clear to merge after review", 2)
+                .addRaw("This Pull Request is not blocked by any labels which prevent it from being merged.")
+                .write();
+            }
@@ -24,7 +24,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: dev
          persist-credentials: false
@@ -46,7 +46,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -60,7 +60,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: master
          persist-credentials: false
@@ -82,7 +82,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
+          npx -y netlify-cli deploy --dir=cast/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -27,7 +27,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -58,12 +58,14 @@ jobs:
        run: yarn run lint:lit --quiet
      - name: Run prettier
        run: yarn run lint:prettier
+      - name: Check dependency licenses
+        run: yarn run lint:licenses
  test:
    name: Run tests
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -83,7 +85,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -27,7 +27,7 @@ jobs:

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

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

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

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

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
+        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
@@ -25,7 +25,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: dev
          persist-credentials: false
@@ -47,7 +47,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
+          npx -y netlify-cli deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -61,7 +61,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          ref: master
          persist-credentials: false
@@ -83,7 +83,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
+          npx -y netlify-cli deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
@@ -19,7 +19,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -40,7 +40,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
+          npx -y netlify-cli deploy --dir=gallery/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
@@ -24,7 +24,7 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -45,7 +45,7 @@ jobs:
      - name: Deploy preview to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
            --json > deploy_output.json
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -0,0 +1,308 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+  # BrowserStack runs are gated by the `e2e-browserstack` label or manual
+  # dispatch — see the e2e-browserstack job below. Local Chromium always runs.
+  workflow_dispatch:
+    inputs:
+      run-browserstack:
+        description: "Run BrowserStack suite"
+        type: boolean
+        default: true
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build e2e test app
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
+    # Chromium; anything longer is almost certainly an install or webServer
+    # hang.
+    timeout-minutes: 30
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      # Cache the downloaded browser build keyed on the pinned Playwright
+      # version (yarn.lock), so re-runs skip the ~170 MB download.
+      - name: Cache Playwright browsers
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+        timeout-minutes: 10
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+        timeout-minutes: 15
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Run Playwright tests on BrowserStack (real devices + browsers) ─────────
+  # The BrowserStack SDK manages the Local tunnel and uploads results to the
+  # BrowserStack Automate dashboard automatically — no tunnel action needed.
+  #
+  # Gated on:
+  #   - manual dispatch with the run-browserstack input enabled, OR
+  #   - a PR with the `e2e-browserstack` label applied.
+  # This keeps CI fast on normal PRs while still allowing on-demand runs.
+  e2e-browserstack:
+    name: E2E (BrowserStack)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'workflow_dispatch' && inputs.run-browserstack) ||
+      (github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'e2e-browserstack'))
+    environment: browserstack
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (BrowserStack)
+        run: yarn test:e2e:browserstack
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  # Only depends on the local job — BrowserStack reports live on the
+  # BrowserStack Automate dashboard and don't feed into the local blob report.
+  report:
+    name: Report
+    needs: [e2e-local]
+    runs-on: ubuntu-latest
+    if: always()
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download blob report (local)
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          path: test/e2e/reports/combined/
+          retention-days: 14
+
+      - name: Post report link to PR
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
+            const body = `## Playwright E2E test report\n\nThe combined HTML report is available as a workflow artifact.\n\n[View workflow run](${runUrl})`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body,
+            });
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
        with:
          sync-labels: true
@@ -13,13 +13,11 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
-          issue-lock-inactive-days: "30"
-          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-inactive-days: "30"
          issue-lock-reason: ""
-          pr-lock-inactive-days: "1"
-          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-inactive-days: "1"
          pr-lock-reason: ""
@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

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

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

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

      - name: Setup Node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -77,14 +77,27 @@ jobs:
        env:
          GITHUB_REF: ${{ github.ref }}
        run: |
-          # Sleep to give pypi time to populate the new version across mirrors
-          sleep 240
          version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
+          # Wait for the package to become available on PyPI
+          echo "Waiting for home-assistant-frontend==$version to appear on PyPI..."
+          for i in $(seq 1 30); do
+            status=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/home-assistant-frontend/$version/json")
+            if [ "$status" = "200" ]; then
+              echo "Package is available on PyPI!"
+              break
+            fi
+            if [ "$i" = "30" ]; then
+              echo "Timed out waiting for package to appear on PyPI"
+              exit 1
+            fi
+            echo "Not available yet (HTTP $status), retrying in 30 seconds... ($i/30)"
+            sleep 30
+          done
          echo "home-assistant-frontend==$version" > ./requirements.txt

      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
        with:
          abi: cp314
          tag: musllinux_1_2
@@ -100,7 +113,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false
      - name: Setup Node
@@ -15,7 +15,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -0,0 +1,51 @@
+name: Sync numeric device classes
+
+# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
+# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
+# when it drifts. Reads homeassistant/generated/sensor.json from core.
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *" # Daily, 04:00 UTC
+
+permissions:
+  contents: read
+
+jobs:
+  sync:
+    name: Sync
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+
+      - name: Set up Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Regenerate numeric device classes
+        run: ./script/gen_numeric_device_classes
+
+      - name: Format
+        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        with:
+          branch: chore/sync-numeric-device-classes
+          commit-message: Update numeric sensor device classes
+          title: Update numeric sensor device classes
+          body: |
+            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
+            `SensorDeviceClass`.
+
+            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
        with:
          persist-credentials: false

@@ -54,7 +54,16 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/

+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+
 # AI tooling
 .claude
 .cursor
 .opencode
+.serena
+
+test/benchmarks/results/
@@ -1 +1 @@
-24.15.0
+24.16.0
@@ -0,0 +1,86 @@
+diff --git a/dist/tinykeys.cjs b/dist/tinykeys.cjs
+index 08c98b6eff3b8fb4b727fe8e6b096951d6ef6347..9c44f14862f582766ea1733b6dc0e97f962800d8 100644
+--- a/dist/tinykeys.cjs
+++ b/dist/tinykeys.cjs
+@@ -61,6 +61,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
+function splitKeybindingPress(press) {
+	let parts = [];
+	let start = 0;
+	for (let index = 0; index < press.length; index++) {
+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
+			parts.push(press.slice(start, index));
+			start = index + 1;
+		}
+	}
+	parts.push(press.slice(start));
+	return parts;
+}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -76,10 +88,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
+		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -201,5 +213,3 @@ exports.defaultKeybindingsHandlerIgnore = defaultKeybindingsHandlerIgnore;
+ exports.matchKeybindingPress = matchKeybindingPress;
+ exports.parseKeybinding = parseKeybinding;
+ exports.tinykeys = tinykeys;
+-
+-//# sourceMappingURL=tinykeys.cjs.map
+\ No newline at end of file
+diff --git a/dist/tinykeys.mjs b/dist/tinykeys.mjs
+index c289972d2728e03d9b272268c38fd3392e8845bf..e22897b00aae6cdb0dbbb971445227c07be52918 100644
+--- a/dist/tinykeys.mjs
+++ b/dist/tinykeys.mjs
+@@ -60,6 +60,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
+function splitKeybindingPress(press) {
+	let parts = [];
+	let start = 0;
+	for (let index = 0; index < press.length; index++) {
+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
+			parts.push(press.slice(start, index));
+			start = index + 1;
+		}
+	}
+	parts.push(press.slice(start));
+	return parts;
+}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -75,10 +87,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
+		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -196,5 +208,3 @@ function tinykeys(target, keybindingMap, options = {}) {
+ }
+ //#endregion
+ export { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };
+-
+-//# sourceMappingURL=tinykeys.mjs.map
+\ No newline at end of file
@@ -1,11 +1,16 @@
-compressionLevel: mixed
+approvedGitRepositories:
+  - "**"

-npmMinimalAgeGate: "3d"
+compressionLevel: mixed

 defaultSemverRangePrefix: ""

 enableGlobalCache: false

+enableScripts: true
+
 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.14.1.cjs
+npmMinimalAgeGate: 3d
+
+yarnPath: .yarn/releases/yarn-4.16.0.cjs
@@ -0,0 +1,53 @@
+# BrowserStack Automate configuration for Home Assistant frontend e2e tests.
+# Credentials are read from BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
+# environment variables set in GitHub Actions (or locally).
+# See: https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs
+
+userName: ${BROWSERSTACK_USERNAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+projectName: Home Assistant Frontend
+buildName: e2e tests
+buildIdentifier: "CI #${BUILD_NUMBER}"
+
+# ── Platforms ────────────────────────────────────────────────────────────────
+platforms:
+  - os: Windows
+    osVersion: 11
+    browserName: chrome
+    browserVersion: latest
+  - os: OS X
+    osVersion: Ventura
+    browserName: playwright-firefox
+    browserVersion: latest
+  - deviceName: iPad 6th
+    osVersion: 12
+    browserName: playwright-webkit
+  - deviceName: iPhone 12
+    osVersion: 14
+    browserName: playwright-webkit
+  - deviceName: Samsung Galaxy S23
+    osVersion: 13
+    browserName: chrome
+    realMobile: true
+
+parallelsPerPlatform: 1
+
+# ── Local tunnel ─────────────────────────────────────────────────────────────
+# The SDK manages the BrowserStack Local tunnel automatically.
+browserstackLocal: true
+
+framework: playwright
+
+# Pin to the latest Playwright version BrowserStack supports. Our local
+# @playwright/test is newer (1.59.x) which BrowserStack does not yet support,
+# causing a "Malformed endpoint" connection error if left unset.
+# Update this when BrowserStack adds support for a newer version.
+# Supported versions: https://www.browserstack.com/docs/automate/playwright/browsers-and-os
+playwrightVersion: 1.latest
+
+# ── Debugging ────────────────────────────────────────────────────────────────
+debug: false
+networkLogs: false
+consoleLogs: errors
+testObservability: true
@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -321,4 +320,22 @@ module.exports.config = {
      isLandingPageBuild: true,
    };
  },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };
@@ -1,9 +1,13 @@
 // @ts-check

+import globals from "globals";
 import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

 export default tseslint.config(...rootConfig, {
+  languageOptions: {
+    globals: globals.node,
+  },
  rules: {
    "no-console": "off",
    "import-x/no-extraneous-dependencies": "off",
@@ -1,4 +1,3 @@
-/* global module */
 // Browser-only replacement for core-js/internals/get-built-in-node-module.
 // The original helper evaluates `Function('return require("...")')()`
 // when it detects a Node environment, which causes a runtime
@@ -5,6 +5,7 @@ import "./compress.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./licenses.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -36,7 +37,12 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean",
-    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "build-locale-data",
+      "gen-licenses"
+    ),
    "copy-static-app",
    "rspack-prod-app",
    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
@@ -45,3 +45,10 @@ gulp.task(
    ])
  )
 );
+
+gulp.task(
+  "clean-e2e-test-app",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
+  )
+);
@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-e2e-test-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-e2e-test-app",
+    "rspack-dev-server-e2e-test-app"
+  )
+);
+
+gulp.task(
+  "build-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app",
+    "gen-pages-e2e-test-app-prod"
+  )
+);
@@ -25,6 +25,7 @@ const SAFARI_TO_MACOS = {
  16: [11, 0, 0],
  17: [12, 0, 0],
  18: [13, 0, 0],
+  26: [26, 0, 0],
 };

 const getCommonTemplateVars = () => {
@@ -266,3 +267,24 @@ gulp.task(
    paths.landingPage_output_es5
  )
 );
+
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+
+gulp.task(
+  "gen-pages-e2e-test-app-dev",
+  genPagesDevTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-e2e-test-app-prod",
+  genPagesProdTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root,
+    paths.e2eTestApp_output_latest
+  )
+);
@@ -57,7 +57,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
      if (descriptionContent === "") {
        hasDescription = false;
      } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent)
+          .replace(/\\/g, "\\\\")
+          .replace(/`/g, "\\`");
        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
        fs.writeFileSync(
          path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -101,12 +103,29 @@ gulp.task("gather-gallery-pages", async function gatherPages() {

    if (!toProcess) {
      console.error("Unknown category", group.category);
-      if (!group.pages) {
+      if (!group.subsections && !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) {
@@ -201,3 +201,23 @@ gulp.task("copy-static-landing-page", async () => {
  copyFonts(paths.landingPage_output_static);
  copyTranslations(paths.landingPage_output_static);
 });
+
+gulp.task("copy-static-e2e-test-app", async () => {
+  // Copy app static files (icons, polyfills, etc.)
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.e2eTestApp_output_root, "static")
+  );
+  // Copy e2e test app public files (manifest, sw stubs)
+  const e2ePublic = path.resolve(paths.e2eTestApp_dir, "public");
+  if (fs.existsSync(e2ePublic)) {
+    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
+  }
+
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
+  copyFonts(paths.e2eTestApp_output_static);
+  copyTranslations(paths.e2eTestApp_output_static);
+  copyLocaleData(paths.e2eTestApp_output_static);
+  copyMdiIcons(paths.e2eTestApp_output_static);
+});
@@ -0,0 +1,40 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
+
+const TARGET = join(
+  paths.root_dir,
+  "src",
+  "data",
+  "sensor_numeric_device_classes.ts"
+);
+
+gulp.task("gen-numeric-device-classes", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const classes = [...(data.numeric_device_classes ?? [])].sort();
+  if (!classes.length) {
+    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
+// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
+// Regenerate with \`script/gen_numeric_device_classes\`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
+];
+`;
+
+  await writeFile(TARGET, content);
+});
@@ -4,11 +4,13 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";
@@ -0,0 +1,121 @@
+// Gulp task to generate third-party license notices.
+
+import { readFile, access, readdir } from "fs/promises";
+import { generateLicenseFile } from "generate-license-file";
+import gulp from "gulp";
+import path from "path";
+import paths from "../paths.cjs";
+
+const OUTPUT_FILE = path.join(
+  paths.app_output_static,
+  "third-party-licenses.txt"
+);
+
+const NODE_MODULES = path.resolve(paths.root_dir, "node_modules");
+
+// The echarts package ships an Apache-2.0 NOTICE file that must be
+// redistributed alongside the compiled output per Apache License §4(d).
+const NOTICE_FILES = [path.join(NODE_MODULES, "echarts/NOTICE")];
+
+// Some packages need a manual license override (e.g. they ship multiple
+// license files and we must pick the right one for the bundled code).
+//
+// Each entry is pinned to a specific version. If a package is updated,
+// this list must be reviewed and the version updated after verifying
+// that the new version's license still matches. The build will fail if
+// the pinned version is no longer installed.
+const LICENSE_OVERRIDES = [
+  {
+    // type-fest ships two license files (MIT for code, CC0 for types).
+    // We use the MIT license since that covers the bundled code.
+    packageName: "type-fest",
+    version: "5.7.0",
+    licenseFile: "license-mit",
+  },
+];
+
+// Locate the directory of an installed package matching an exact version.
+//
+// The copy we care about may be hoisted to the top-level node_modules or
+// nested under a dependency when a different version occupies the hoisted
+// slot (e.g. a build-only dependency pulling in an older release). Searching
+// both keeps this check independent of yarn's hoisting decisions, which can
+// shift when unrelated dependencies are added.
+async function findPackageDir(packageName, version) {
+  const candidateDirs = [path.join(NODE_MODULES, packageName)];
+
+  // Collect one level of nesting: node_modules/<dep>/node_modules/<pkg> and
+  // node_modules/@scope/<dep>/node_modules/<pkg>.
+  let topLevel = [];
+  try {
+    topLevel = await readdir(NODE_MODULES, { withFileTypes: true });
+  } catch {
+    // node_modules unreadable — fall back to the hoisted candidate only.
+  }
+  for (const entry of topLevel) {
+    if (!entry.isDirectory() || entry.name === packageName) {
+      continue;
+    }
+    if (entry.name.startsWith("@")) {
+      const scopeDir = path.join(NODE_MODULES, entry.name);
+      // eslint-disable-next-line no-await-in-loop
+      const scoped = await readdir(scopeDir, { withFileTypes: true }).catch(
+        () => []
+      );
+      for (const dep of scoped) {
+        if (dep.isDirectory()) {
+          candidateDirs.push(
+            path.join(scopeDir, dep.name, "node_modules", packageName)
+          );
+        }
+      }
+    } else {
+      candidateDirs.push(
+        path.join(NODE_MODULES, entry.name, "node_modules", packageName)
+      );
+    }
+  }
+
+  for (const dir of candidateDirs) {
+    // eslint-disable-next-line no-await-in-loop
+    const pkg = await readFile(path.join(dir, "package.json"), "utf-8")
+      .then(JSON.parse)
+      .catch(() => null);
+    if (pkg?.version === version) {
+      return dir;
+    }
+  }
+  return null;
+}
+
+gulp.task("gen-licenses", async () => {
+  const licenseOverrides = {};
+
+  for (const { packageName, version, licenseFile } of LICENSE_OVERRIDES) {
+    // eslint-disable-next-line no-await-in-loop
+    const packageDir = await findPackageDir(packageName, version);
+
+    if (!packageDir) {
+      throw new Error(
+        `License override for "${packageName}" is pinned to version ${version}, but that version is not installed. ` +
+          `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
+      );
+    }
+
+    const licensePath = path.join(packageDir, licenseFile);
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await access(licensePath);
+    } catch {
+      throw new Error(`License file not found or unreadable: ${licensePath}`);
+    }
+
+    licenseOverrides[`${packageName}@${version}`] = licensePath;
+  }
+
+  await generateLicenseFile(
+    path.resolve(paths.root_dir, "package.json"),
+    OUTPUT_FILE,
+    { append: NOTICE_FILES, replace: licenseOverrides }
+  );
+});
@@ -14,6 +14,7 @@ import {
  createDemoConfig,
  createGalleryConfig,
  createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";

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

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

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

@@ -210,3 +232,22 @@ gulp.task("rspack-prod-landing-page", () =>
    })
  )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);
@@ -50,4 +50,15 @@ module.exports = {
  ),

  translations_src: path.resolve(__dirname, "../src/translations"),
+
+  e2eTestApp_dir: path.resolve(__dirname, "../test/e2e/app"),
+  e2eTestApp_output_root: path.resolve(__dirname, "../test/e2e/app/dist"),
+  e2eTestApp_output_static: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/static"
+  ),
+  e2eTestApp_output_latest: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/frontend_latest"
+  ),
 };
@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -338,6 +337,11 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));

+const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 module.exports = {
  createAppConfig,
  createDemoConfig,
@@ -345,4 +349,5 @@ module.exports = {
  createGalleryConfig,
  createRspackConfig,
  createLandingPageConfig,
+  createE2eTestAppConfig,
 };
@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { mockConfigEntries } from "./stubs/config_entries";
+import { demoDevices } from "./stubs/devices";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,6 +16,7 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -29,6 +30,31 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";

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

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

 export const mockEntityRegistry = (
@@ -6,4 +9,17 @@ export const mockEntityRegistry = (
  data: EntityRegistryEntry[] = []
 ) => {
  hass.mockWS("config/entity_registry/list", () => data);
+  hass.mockWS(
+    "config/entity_registry/get_entries",
+    (msg: { entity_ids: string[] }) => {
+      const result: Record<string, ExtEntityRegistryEntry> = {};
+      for (const entityId of msg.entity_ids) {
+        const entry = data.find((e) => e.entity_id === entityId);
+        if (entry) {
+          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
+        }
+      }
+      return result;
+    }
+  );
 };
@@ -0,0 +1,12 @@
+import type { EntitySources } from "../../../src/data/entity/entity_sources";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEntitySources = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "entity/source",
+    (): EntitySources => ({
+      "sensor.co2_intensity": { domain: "co2signal" },
+      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
+    })
+  );
+};
@@ -0,0 +1,39 @@
+import type { ExposeEntitySettings } from "../../../src/data/expose";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const exposedEntities: Record<string, ExposeEntitySettings> = {
+  "light.bed_light": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+  "light.ceiling_lights": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": false,
+  },
+  "switch.decorative_lights": {
+    conversation: true,
+    "cloud.alexa": false,
+    "cloud.google_assistant": true,
+  },
+  "climate.ecobee": {
+    conversation: true,
+    "cloud.alexa": true,
+    "cloud.google_assistant": true,
+  },
+};
+
+export const mockExpose = (hass: MockHomeAssistant) => {
+  hass.mockWS("homeassistant/expose_entity/list", () => ({
+    exposed_entities: exposedEntities,
+  }));
+  hass.mockWS(
+    "homeassistant/expose_new_entities/get",
+    (msg: { assistant: string }) => ({
+      expose_new: msg.assistant !== "cloud.google_assistant",
+    })
+  );
+  hass.mockWS("homeassistant/expose_entity", () => null);
+  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
+};
@@ -42,6 +42,7 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
+  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };
@@ -0,0 +1,72 @@
+import type { IntegrationManifest } from "../../../src/data/integration";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const manifest = (
+  domain: string,
+  name: string,
+  overrides: Partial<IntegrationManifest> = {}
+): IntegrationManifest => ({
+  is_built_in: true,
+  domain,
+  name,
+  config_flow: true,
+  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
+  iot_class: "local_push",
+  ...overrides,
+});
+
+const manifests: IntegrationManifest[] = [
+  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
+  manifest("hue", "Philips Hue"),
+  manifest("sonos", "Sonos"),
+  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
+  // Helpers
+  manifest("template", "Template", { integration_type: "helper" }),
+  manifest("input_boolean", "Toggle", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_number", "Number", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_select", "Dropdown", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_text", "Text", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("input_datetime", "Date and/or time", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("counter", "Counter", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("timer", "Timer", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+  manifest("schedule", "Schedule", {
+    config_flow: false,
+    integration_type: "helper",
+    iot_class: "local_polling",
+  }),
+];
+
+export const mockIntegration = (hass: MockHomeAssistant) => {
+  hass.mockWS("manifest/list", () => manifests);
+  hass.mockWS("manifest/get", (msg: { integration: string }) =>
+    manifests.find((m) => m.domain === msg.integration)
+  );
+};
@@ -0,0 +1,13 @@
+import type { NetworkUrls } from "../../../src/data/network";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockNetwork = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "network/url",
+    (): NetworkUrls => ({
+      internal: "http://homeassistant.local:8123",
+      external: "https://demo-instance.ui.nabu.casa",
+      cloud: "https://demo-instance.ui.nabu.casa",
+    })
+  );
+};
@@ -0,0 +1,20 @@
+import type { Person } from "../../../src/data/person";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const storage: Person[] = [
+  {
+    id: "demo_user",
+    name: "Demo User",
+    user_id: "abcd",
+    device_trackers: [],
+  },
+  {
+    id: "anne_therese",
+    name: "Anne Therese",
+    device_trackers: [],
+  },
+];
+
+export const mockPerson = (hass: MockHomeAssistant) => {
+  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
+};
@@ -1,6 +1,7 @@
 import {
  addDays,
  addHours,
+  addMinutes,
  addMonths,
  differenceInHours,
  endOfDay,
@@ -12,6 +13,19 @@ import type {
 } from "../../../src/data/recorder";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

+const getNextDate = (
+  currentDate: Date,
+  period: "5minute" | "hour" | "day" | "month"
+): Date => {
+  return period === "day"
+    ? addDays(currentDate, 1)
+    : period === "month"
+      ? addMonths(currentDate, 1)
+      : period === "hour"
+        ? addHours(currentDate, 1)
+        : addMinutes(currentDate, 5);
+};
+
 const generateMeanStatistics = (
  start: Date,
  end: Date,
@@ -25,9 +39,10 @@ const generateMeanStatistics = (
  while (end > currentDate && currentDate < now) {
    const delta = Math.random() * maxDiff;
    const mean = delta;
+    const nextDate = getNextDate(currentDate, period);
    statistics.push({
      start: currentDate.getTime(),
-      end: currentDate.getTime(),
+      end: nextDate.getTime(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
@@ -35,12 +50,7 @@ const generateMeanStatistics = (
      state: mean,
      sum: null,
    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-          ? addMonths(currentDate, 1)
-          : addHours(currentDate, 1);
+    currentDate = nextDate;
  }
  return statistics;
 };
@@ -58,11 +68,12 @@ const generateSumStatistics = (
  let sum = initValue;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
+    const nextDate = getNextDate(currentDate, period);
    const add = Math.random() * maxDiff;
    sum += add;
    statistics.push({
      start: currentDate.getTime(),
-      end: currentDate.getTime(),
+      end: nextDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -71,12 +82,7 @@ const generateSumStatistics = (
      state: initValue + sum,
      sum,
    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-          ? addMonths(currentDate, 1)
-          : addHours(currentDate, 1);
+    currentDate = nextDate;
  }
  return statistics;
 };
@@ -84,7 +90,7 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
  start: Date,
  end: Date,
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
+  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
@@ -98,11 +104,12 @@ const generateCurvedStatistics = (
  let half = false;
  const now = new Date();
  while (end > currentDate && currentDate < now) {
+    const nextDate = getNextDate(currentDate, period);
    const add = i * (Math.random() * maxDiff);
    sum += add;
    statistics.push({
      start: currentDate.getTime(),
-      end: currentDate.getTime(),
+      end: nextDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -111,7 +118,7 @@ const generateCurvedStatistics = (
      state: initValue + sum,
      sum: metered ? sum : null,
    });
-    currentDate = addHours(currentDate, 1);
+    currentDate = nextDate;
    if (!half && i > hours / 2) {
      half = true;
    }
@@ -289,7 +296,7 @@ const statisticsFunctions: Record<
      end,
      period,
      productionFinalVal,
-      2
+      0.2
    );
    return [...morning, ...production, ...evening, ...rest];
  },
@@ -0,0 +1,18 @@
+import type { SceneConfig } from "../../../src/data/scene";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const demoSceneConfig = (id: string): SceneConfig => ({
+  id,
+  name: "Demo scene",
+  entities: {
+    "light.bed_light": { state: "on" },
+  },
+});
+
+export const mockScene = (hass: MockHomeAssistant) => {
+  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
+    const id = path.split("/").pop()!;
+    // GET returns the config; POST/DELETE just acknowledge.
+    return method === "GET" ? demoSceneConfig(id) : {};
+  });
+};
@@ -0,0 +1,7 @@
+import type { RelatedResult } from "../../../src/data/search";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSearch = (hass: MockHomeAssistant) => {
+  // The demo has no relationship graph, so report no related items.
+  hass.mockWS("search/related", (): RelatedResult => ({}));
+};
@@ -0,0 +1,37 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSystemHealth = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "system_health/info",
+    (_msg, _hass, onChange?: (event: any) => void) => {
+      // Defer so the consumer's unsubscribe handle is initialized first
+      // (real WS events arrive asynchronously).
+      setTimeout(() => {
+        onChange?.({
+          type: "initial",
+          data: {
+            homeassistant: {
+              info: {
+                version: "DEMO",
+                installation_type: "Home Assistant OS",
+                dev: false,
+                hassio: true,
+                docker: true,
+                container_arch: "aarch64",
+                user: "root",
+                virtualenv: false,
+                python_version: "3.13.0",
+                os_name: "Linux",
+                os_version: "6.6.0",
+                arch: "aarch64",
+                timezone: "America/Los_Angeles",
+                config_dir: "/config",
+              },
+            },
+          },
+        });
+      });
+      return () => undefined;
+    }
+  );
+};
@@ -1,5 +1,33 @@
+import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

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

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

+const rspackConfigPath = fileURLToPath(
+  new URL("./rspack.config.cjs", import.meta.url)
+);
+
 export default tseslint.config(
  js.configs.recommended,
  eslintConfigPrettier,
@@ -50,7 +56,7 @@ export default tseslint.config(
    settings: {
      "import-x/resolver": {
        webpack: {
-          config: "./rspack.config.cjs",
+          config: rspackConfigPath,
        },
      },
    },
@@ -228,6 +234,12 @@ export default tseslint.config(
      globals: globals.serviceworker,
    },
  },
+  {
+    files: ["test/e2e/*.mjs"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
  {
    plugins: {
      html,
@@ -0,0 +1,123 @@
+# Gallery Agent Instructions
+
+This file applies to all files under `gallery/`. Follow the root `AGENTS.md` for repository-wide Home Assistant frontend, TypeScript, Lit, accessibility, and copy standards. This file adds gallery-specific structure, page, demo, and verification guidance.
+
+## Quick Reference
+
+Run commands from the repository root unless noted otherwise:
+
+```bash
+gallery/script/develop_gallery  # Start the gallery development server
+gallery/script/build_gallery    # Build the static gallery
+yarn lint                       # ESLint, Prettier, TypeScript, and Lit checks
+yarn lint:types                 # TypeScript compiler, without file arguments
+```
+
+Never run `yarn lint:types` or `tsc` with file arguments. See the root `AGENTS.md` for the generated `.js` file risk.
+
+## Purpose
+
+The gallery is a developer and designer reference for Home Assistant frontend UI patterns. It documents component APIs, shows realistic Lovelace and more-info states, captures brand and copy guidance, and provides reproducible demos that are safe to inspect outside a running Home Assistant instance.
+
+- Prefer demonstrating real production components from `src/` instead of creating gallery-only replacements.
+- Keep fake state, sample data, and demo-only helpers inside `gallery/`.
+- Do not move gallery stubs or demo data into production code unless a production feature explicitly needs them.
+- Do not hand-edit generated output under `gallery/build/` or `gallery/dist/`.
+
+## Structure
+
+- `sidebar.js`: Defines gallery sections, headers, and explicit page ordering.
+- `script/develop_gallery`: Wrapper for the `develop-gallery` gulp task.
+- `script/build_gallery`: Wrapper for the `build-gallery` gulp task.
+- `src/entrypoint.js`: Creates the `<ha-gallery>` shell.
+- `src/ha-gallery.ts`: Renders the drawer, page routing, markdown descriptions, demos, edit links, and RTL toggle.
+- `src/html/index.html.template`: HTML template used by the gallery build.
+- `src/pages/<category>/<page>.markdown`: Optional page description and frontmatter.
+- `src/pages/<category>/<page>.ts`: Optional live demo module for the same page id.
+- `src/components/`: Gallery-only demo wrappers like `demo-card`, `demo-cards`, `demo-more-info`, and `page-description`.
+- `src/data/`: Fake `hass`, demo states, mock traces, and reusable sample data.
+- `public/`: Static assets copied into the gallery output.
+
+## Page Model
+
+Gallery pages are generated by `gather-gallery-pages` in `build-scripts/gulp/gallery.js`.
+
+- A page id is the path under `src/pages/` without the extension, like `components/ha-button`.
+- A `.markdown` file and a `.ts` file with the same page id become one gallery page.
+- A page may have only markdown, only a TypeScript demo, or both.
+- Markdown can contain YAML frontmatter with `title` and optional `subtitle`.
+- Markdown that contains only frontmatter contributes metadata without rendering a description block.
+- TypeScript demo modules are dynamically imported for side effects when the page is opened.
+- A demo module must define a custom element named `demo-${category}-${page}` with slashes replaced by hyphens, like `demo-components-ha-button` for `components/ha-button`.
+- `ha-gallery.ts` renders that element with `dynamicElement()` based on the current page id.
+
+## Sidebar
+
+Use `sidebar.js` when a page needs a visible section, section header, or deterministic ordering.
+
+- `category` must match the first directory name under `src/pages/`.
+- `header` is the section label shown in the drawer.
+- `pages` is optional. When present, listed pages keep that exact order.
+- Pages in a category that are not listed are appended alphabetically after the listed pages.
+- New categories without a sidebar entry are appended by the generator with their category name as the header.
+- If a listed page does not exist, the generator logs an error during `gather-gallery-pages`.
+
+### Subsections
+
+A section can group its pages under named subsections instead of one flat list. Use this for large categories where related pages should sit together.
+
+- `subsections` is an array of `{ header, pages }`. It is mutually exclusive with a flat `pages` array on the same group.
+- Each subsection `header` is a non-collapsible label rendered inside the section's expansion panel; the section stays the only collapsible level.
+- Listed pages keep their per-subsection order.
+- Any pages found in the category but not listed in a subsection are collected into a generated `Other` subsection, appended alphabetically. The `Other` subsection is omitted when there are no leftovers.
+- A listed page that does not exist still logs an error during `gather-gallery-pages`.
+- Use sentence case for subsection headers and follow the content standards below.
+
+## Markdown Pages
+
+Use markdown pages for explanations, design guidance, API notes, and copy standards.
+
+- Start with frontmatter when the page needs a title or subtitle.
+- Use sentence case for titles, headings, labels, and UI copy.
+- Put the live example before the reference API when that makes the page easier to scan.
+- Use fenced code blocks with a language tag for copyable examples.
+- Keep examples short and focused on the behavior being documented.
+- Prefer real component names and attributes over prose-only descriptions.
+- Use Home Assistant terminology from the root `AGENTS.md`.
+- For remove/delete and add/create wording, follow `src/pages/misc/remove-delete-add-create.markdown`.
+
+Gallery markdown is documentation content and is not localized with `localize`. If demo code creates production UI strings, keep those strings aligned with the root localization and copy guidance.
+
+## Demo Components
+
+Use TypeScript demo pages for interactive or stateful examples.
+
+- Import production components from `../../../src/...` or the correct relative path from the demo file.
+- Import reusable gallery helpers from `gallery/src/components/` when they already model the pattern.
+- Use `demo-card` and `demo-cards` for Lovelace card examples that render YAML card configs.
+- Use `demo-more-info` and `demo-more-infos` for more-info dialog examples.
+- Use shared mock data from `src/data/` instead of repeating large fake state objects inline.
+- Show meaningful states, such as loading, unavailable, empty, error, active, inactive, and disabled when relevant.
+- Check responsive behavior and the gallery RTL toggle when layout or direction-sensitive UI changes.
+- Keep unavoidable casts or loose demo parsing local to the demo helper or demo page.
+
+The gallery ESLint config allows `console` for gallery diagnostics. Do not copy that exception into production frontend code.
+
+## Content Standards
+
+The root copy standards still apply: use American English, sentence case, active voice, inclusive language, direct user-focused wording, and consistent Home Assistant terminology.
+
+- Use `Home Assistant` in full, not `HA` or `HASS`.
+- Use `integration` instead of `component` for product concepts.
+- Use `Remove` for reversible disassociation and `Delete` for permanent deletion.
+- Use `Add` for existing items and `Create` for something made from scratch.
+- Avoid Latin abbreviations like `e.g.` and `i.e.` in prose.
+- Avoid stitching sentence fragments together in production UI examples.
+
+## Verification
+
+- For markdown, sidebar, and page-generation changes, run `gallery/script/build_gallery`.
+- For TypeScript demo or gallery shell changes, run the smallest relevant check plus `yarn lint` when practical.
+- For type checking, run `yarn lint:types` without file arguments.
+- For visual changes, run `gallery/script/develop_gallery` and check the affected page on desktop, narrow viewport, and RTL when relevant.
+- If verification is skipped, state which command was skipped and why.
@@ -1,56 +1,237 @@
+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: "lovelace",
-    // Label for in the sidebar
-    header: "Dashboards",
-    // Specify order of pages. Any pages in the category folder but not listed here will
-    // automatically be added after the pages listed here.
-    pages: ["introduction"],
-  },
-  {
-    category: "automation",
-    header: "Automation",
-    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",
+    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"],
+      },
+    ],
+  },
+  {
+    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"],
+      },
+    ],
+  },
  {
    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: "design.home-assistant.io",
-    header: "About",
+    category: "misc",
+    icon: mdiDotsHorizontal,
+    header: "Miscellaneous",
+    pages: [
+      "entity-state",
+      "ha-markdown",
+      "integration-card",
+      "box-shadow",
+      "util-long-press",
+      "remove-delete-add-create",
+      "editing",
+    ],
  },
 ];
@@ -0,0 +1,121 @@
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { extractVars } from "../../../src/common/style/derived-css-vars";
+import { animationStyles } from "../../../src/resources/theme/animations.globals";
+import { coreStyles } from "../../../src/resources/theme/core.globals";
+import { colorStyles } from "../../../src/resources/theme/color/color.globals";
+import { coreColorStyles } from "../../../src/resources/theme/color/core.globals";
+import { semanticColorStyles } from "../../../src/resources/theme/color/semantic.globals";
+import { waColorStyles } from "../../../src/resources/theme/color/wa.globals";
+import { mainStyles } from "../../../src/resources/theme/main.globals";
+import { semanticStyles } from "../../../src/resources/theme/semantic.globals";
+import { typographyStyles } from "../../../src/resources/theme/typography.globals";
+import { waMainStyles } from "../../../src/resources/theme/wa.globals";
+import type { HomeAssistant, ThemeSettings } from "../../../src/types";
+
+export const GALLERY_THEME_STORAGE_KEY = "gallery-theme";
+
+export const loadGalleryThemeSettings = (): ThemeSettings => {
+  const stored = localStorage.getItem(GALLERY_THEME_STORAGE_KEY);
+  if (!stored) {
+    return { theme: "default" };
+  }
+
+  try {
+    const parsed = JSON.parse(stored) as unknown;
+    const value =
+      parsed && typeof parsed === "object"
+        ? (parsed as Partial<ThemeSettings>)
+        : {};
+    return {
+      theme: "default",
+      dark: typeof value.dark === "boolean" ? value.dark : undefined,
+      primaryColor:
+        typeof value.primaryColor === "string" ? value.primaryColor : undefined,
+      accentColor:
+        typeof value.accentColor === "string" ? value.accentColor : undefined,
+    };
+  } catch (_err) {
+    return { theme: "default" };
+  }
+};
+
+const LIGHT_THEME_STYLES = [
+  coreStyles,
+  mainStyles,
+  typographyStyles,
+  semanticStyles,
+  coreColorStyles,
+  semanticColorStyles,
+  colorStyles,
+  waColorStyles,
+  waMainStyles,
+  animationStyles,
+];
+
+const LIGHT_THEME_VARIABLES = LIGHT_THEME_STYLES.reduce<Record<string, string>>(
+  (variables, style) => {
+    for (const [key, value] of Object.entries(extractVars(style))) {
+      variables[`--${key}`] = value;
+    }
+    return variables;
+  },
+  {}
+);
+
+const LIGHT_THEME_VARIABLE_KEYS = Object.keys(LIGHT_THEME_VARIABLES);
+const LIGHT_THEME_DEFAULTS_APPLIED = new WeakSet<HTMLElement>();
+
+export const effectiveGalleryDarkMode = (
+  themeSettings: ThemeSettings,
+  systemDark: boolean
+): boolean => themeSettings.dark ?? systemDark;
+
+const galleryThemes = (darkMode: boolean): HomeAssistant["themes"] => ({
+  default_theme: "default",
+  default_dark_theme: null,
+  themes: {},
+  darkMode,
+  theme: "default",
+});
+
+const applyLightThemeDefaults = (element: HTMLElement, lightMode: boolean) => {
+  if (lightMode) {
+    for (const [key, value] of Object.entries(LIGHT_THEME_VARIABLES)) {
+      element.style.setProperty(key, value);
+    }
+    LIGHT_THEME_DEFAULTS_APPLIED.add(element);
+    return;
+  }
+
+  if (!LIGHT_THEME_DEFAULTS_APPLIED.has(element)) {
+    return;
+  }
+
+  for (const key of LIGHT_THEME_VARIABLE_KEYS) {
+    element.style.removeProperty(key);
+  }
+  LIGHT_THEME_DEFAULTS_APPLIED.delete(element);
+};
+
+export const applyFlippedGalleryTheme = (
+  element: HTMLElement,
+  themeSettings: ThemeSettings,
+  systemDark: boolean
+) => {
+  const darkMode = !effectiveGalleryDarkMode(themeSettings, systemDark);
+
+  if (!darkMode) {
+    applyThemesOnElement(element, galleryThemes(false), undefined, {
+      dark: false,
+    });
+    applyLightThemeDefaults(element, true);
+  } else {
+    applyLightThemeDefaults(element, false);
+  }
+
+  applyThemesOnElement(element, galleryThemes(darkMode), "default", {
+    ...themeSettings,
+    dark: darkMode,
+  });
+  element.style.colorScheme = darkMode ? "dark" : "light";
+};
@@ -1,25 +1,83 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
 import type { HaButton } from "../../../src/components/ha-button";
+import type { ThemeSettings } from "../../../src/types";
+import {
+  applyFlippedGalleryTheme,
+  effectiveGalleryDarkMode,
+  loadGalleryThemeSettings,
+} from "../common/theme";
+
+const mql = matchMedia("(prefers-color-scheme: dark)");

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

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

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

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

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

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

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

  @state() private _showConfig = false;

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

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

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

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

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

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

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

-const FAKE_HASS = {
-  // Just enough for computeRTL for notification-manager
-  language: "en",
-  translationMetadata: {
-    translations: {},
+interface GalleryPage {
+  metadata: Record<string, unknown>;
+  description?: unknown;
+  demo?: unknown;
+}
+
+interface 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);
  },
-};
+  sendMessagePromise() {
+    return Promise.resolve({ value: null });
+  },
+} as unknown as Connection;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  private _menuTapped() {
-    this._drawer.open = !this._drawer.open;
+  private _renderSidebarNavigation() {
+    const sidebar: unknown[] = [];
+
+    for (const group of GALLERY_SIDEBAR) {
+      const 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 _toggleRtl() {
-    this._rtl = !this._rtl;
-    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
+  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 _applyDirection() {
    setDirectionStyles(this._rtl ? "rtl" : "ltr", this);
  }

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

-      .sidebar {
-        padding: 4px;
+      .gallery-sidebar-section {
+        color: var(--sidebar-text-color);
+        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);
      }

-      .sidebar a {
-        color: var(--primary-text-color);
-        display: block;
-        padding: 12px;
-        text-decoration: none;
+      .gallery-sidebar-section::part(summary) {
+        min-height: var(--ha-space-10);
+        border-radius: var(--ha-border-radius-sm);
+        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);
+        font-weight: var(--ha-font-weight-medium);
+        line-height: var(--ha-line-height-condensed);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+
+      .gallery-sidebar-icon,
+      .gallery-nav-item ha-svg-icon[slot="start"] {
+        color: var(--sidebar-icon-color);
+        flex-shrink: 0;
+        height: var(--ha-space-6);
+        width: var(--ha-space-6);
+      }
+
+      .gallery-sidebar-icon {
+        margin-inline-end: var(--ha-space-3);
+      }
+
+      .gallery-nav-item,
+      .gallery-settings-item {
+        flex-shrink: 0;
+        margin: 0 var(--ha-space-1) var(--ha-space-1);
+        border-radius: var(--ha-border-radius-sm);
+        --ha-row-item-min-height: var(--ha-space-10);
+        --ha-row-item-padding-block: 0;
+        --ha-row-item-padding-inline: var(--ha-space-3);
        position: relative;
+        width: var(--ha-sidebar-expanded-item-width, 248px);
+        color: var(--sidebar-text-color);
      }

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

-      div[slot="appContent"] {
+      .gallery-settings-item ha-svg-icon[slot="start"] {
+        color: var(--sidebar-icon-color);
+        flex-shrink: 0;
+        height: var(--ha-space-6);
+        width: var(--ha-space-6);
+      }
+
+      .gallery-settings-item[selected] ha-svg-icon[slot="start"] {
+        color: var(--sidebar-selected-icon-color);
+      }
+
+      .gallery-nav-item[selected] ha-svg-icon[slot="start"] {
+        color: var(--sidebar-selected-icon-color);
+      }
+
+      .app-content {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: var(--primary-background-color);
      }

+      ha-drawer[type="dismissible"][open] ha-top-app-bar-fixed {
+        --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
+      }
+
      .content {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
        flex: 1;
+        padding-top: var(--ha-space-4);
      }

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

      .page-footer {
@@ -304,18 +753,6 @@ class HaGallery extends LitElement {
        margin: 0 8px;
        text-decoration: none;
      }
-
-      .rtl-toggle {
-        padding: var(--ha-space-4);
-        display: inline-flex;
-        align-items: flex-end;
-        margin-top: 12px !important;
-      }
-
-      .rtl-toggle ha-icon-button {
-        border: 1px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-pill);
-      }
    `,
  ];
 }
@@ -0,0 +1,48 @@
+---
+title: "Brand Personality"
+---
+
+# Brand Personality
+
+These five traits describe who Home Assistant is, not how it speaks. Tone of voice – the playfulness, the informality, the warmth, etc – should flow naturally from these, and will help guide writers on how to bring the brand personality to life.
+
+The first four traits are relational: they describe how Home Assistant behaves toward its users.
+_Welcoming_ is about how we receive them.\
+_Candid_ is about how we communicate with them.\
+_Supportive_ is about how we help them.\
+_Generous_ is about how/what we give to them.\
+If any of these feel similar, it’s because they’re all expressions of the same underlying character, just in different moments of the user relationship.
+
+_Independent_ is different. It’s foundational: it describes who Home Assistant is at its core.\
+And it’s because of that independence that the other four traits feel genuine rather than performed. A corporate brand can try to be welcoming, candid, supportive, and generous,
+but without independence, those traits will always be managed and moderated.
+
+## Welcoming
+
+**Warm and open, kind, friendly, approachable, accommodating**\
+_But not: people pleasing, appeasing, sycophantic, ingratiating_\
+Home Assistant feels like a knowledgeable friend, not a product. We meet you at your own level, never talk down to you, and make you feel valued regardless of your technical ability. This isn’t performative, it’s expressed naturally in the small things: how errors are explained, documentation is written, and how the community talks to newcomers.
+
+## Candid
+
+**Direct, honest, transparent, unpretentious**\
+_But not: unfriendly, rude, blunt, unempathetic_\
+Home Assistant says what it means. We don’t hide complexity behind false simplicity, fall back on marketing fluff, or pretend limitations don’t exist. We respect users enough to be straight with them: about what Home Assistant can do, what it can't, and why it works the way it does. This is what builds real trust with users.
+
+## Supportive
+
+**Helpful, guiding, encouraging, empathetic, genuine**\
+_But not: directive, hollow, condescending, over-bearing_\
+Home Assistant always has your back. Whether you’re just starting out or deep into a complex setup, we steer you forward without taking over. Our support is genuine: practical, patient, and there when it’s needed most. Because Home Assistant wants every user to succeed in building a smart home with privacy, choice, and sustainability at its heart.
+
+## Generous
+
+**Empowering, trusting, giving, sharing**\
+_But not: overwhelming, indiscriminate, patronizing, controlling_\
+Home Assistant gives you everything you need today, and as your setup evolves. There are no strings attached: no artificial limits, features locked behind tiers, or deceptive patterns designed to tie you to a closed platform. We trust users with control, access, and transparency. This generosity is reciprocal: the time, knowledge, and care our community gives freely is what keeps Home Assistant thriving and truly open.
+
+## Independent
+
+**Principled, liberated, confident, imperfect**\
+_But not: conceited, obstinate, erratic, insular_\
+Home Assistant doesn’t feel the need to behave like an established tech brand or follow corporate rules. With no shareholders or VCs to answer to, we can say what we think, do things our own way, and not take ourselves too seriously. This freedom of spirit comes from the confidence of knowing our own values, and that our community shares them.
@@ -1,11 +1,11 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

 const alerts: {
  title?: string;
@@ -78,13 +78,13 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action",
    type: "error",
-    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">restart</ha-button>`,
  },
  {
    title: "Unsaved data",
    description: "You have unsaved data",
    type: "warning",
-    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">save</ha-button>`,
  },
  {
    title: "Slotted icon",
@@ -135,10 +135,10 @@ const alerts: {
 export class DemoHaAlert extends LitElement {
  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-alert ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                ${alerts.map(
                  (alert) => html`
@@ -154,43 +154,19 @@ export class DemoHaAlert extends LitElement {
                )}
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

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

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

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
+      flex-wrap: wrap;
      gap: var(--ha-space-6);
    }
  `;
@@ -26,7 +26,7 @@ title: Button
    filled button
  </ha-button>

-  <ha-button size="small">
+  <ha-button size="s">
    small
  </ha-button>
 </div>
@@ -34,7 +34,7 @@ title: Button
 ```html
 <ha-button> simple button </ha-button>

-<ha-button size="small"> small </ha-button>
+<ha-button size="s"> small </ha-button>
 ```

 ### API
@@ -57,7 +57,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
-| size       | "small"/"medium"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
 | disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |

@@ -1,13 +1,13 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import { titleCase } from "../../../../src/common/string/title-case";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

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

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

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

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

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

-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
      display: block;
    }
-    .themes {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      flex-wrap: wrap;
-      gap: 16px;
-      padding: 16px;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 16px;
-      border-radius: var(--ha-border-radius-md);
-    }
    ha-card {
-      max-width: 600px;
-      margin: 0 auto;
+      margin: 0;
+      width: 100%;
    }
    pre {
      margin-top: 0;
@@ -13,7 +13,7 @@ Our dialogs are based on the latest version of Material Design. Please note that

 - Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
 - The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
+- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user **has made changes to**. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
 - Keep the labels short, for example `Save`, `Delete`, `Enable`.
@@ -8,25 +8,25 @@ import {
  mdiContentPaste,
  mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-dropdown";
 import "../../../../src/components/ha-dropdown-item";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-svg-icon";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

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

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

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

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

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

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

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

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

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

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
+    }
+    .panel-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-6);
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -224,10 +237,11 @@ export class DemoHaInput extends LitElement {
    }
    .row {
      display: flex;
+      flex-wrap: wrap;
      gap: var(--ha-space-4);
    }
    .row > * {
-      flex: 1;
+      flex: 1 1 180px;
    }
  `;
 }
@@ -0,0 +1,189 @@
+---
+title: List
+---
+
+# List
+
+The list family provides accessible, keyboard-navigable list containers and
+item variants. Pick the container based on semantics, then the item based on
+interactivity.
+
+## Containers
+
+### `<ha-list-base>`
+
+A styled container with roving-tabindex keyboard navigation. Host role is
+`list`. Children should be `<ha-list-item-*>`. Arrow keys rove focus;
+Home/End jump to the first/last enabled item; Enter/Space activates the
+focused item.
+
+**Attributes**
+
+| Name         | Type    | Default | Description                    |
+| ------------ | ------- | ------- | ------------------------------ |
+| `wrap-focus` | Boolean | `false` | Arrow keys wrap past the ends. |
+| `aria-label` | String  | —       | Accessible name.               |
+
+**Events**
+
+- `ha-list-activated` — Enter/Space on a focused item. Detail
+  `{ index: number, item: HaListItemBase }`.
+
+**Methods**
+
+- `focus()` — focus the active item (or the first focusable one).
+- `focusItemAtIndex(index)` — make the item at `index` active and focus it.
+- `getActiveItemIndex()` — current active index, or `-1`.
+- `setActiveItemIndex(index, focusItem?)` — move the active index without
+  necessarily focusing.
+- `updateListItems()` — re-discover slotted items (called automatically on
+  slotchange).
+
+**CSS parts**
+
+- `base` — the outer `<div role="list">`.
+
+**CSS custom properties**
+
+- `--ha-list-gap` — spacing between items. Defaults to `0`.
+- `--ha-list-padding` — padding around the list. Defaults to `0`.
+
+### `<ha-list-selectable>`
+
+Selectable list. Extends `ha-list-base`. Host role is `listbox`; items must be
+`<ha-list-item-option>` (role `option`). Set `multi` for multi-select; the
+host reflects `aria-multiselectable`.
+
+**Attributes**
+
+| Name    | Type    | Default | Description                            |
+| ------- | ------- | ------- | -------------------------------------- |
+| `multi` | Boolean | `false` | Allow multiple options to be selected. |
+
+**Events**
+
+- `ha-list-item-selected` — an option was selected. Detail is the option's
+  index (`number`). In single mode this is the only selection event; in multi
+  mode it fires for each option added to the selection.
+- `ha-list-item-deselected` — an option was deselected (multi mode only). Detail
+  is the option's index (`number`).
+
+**Methods / getters**
+
+- `selected` (getter) — current selection (`number` or `Set<number>`).
+- `selectedItems` (getter) — selected `HaListItemOption` elements, in index
+  order.
+- `setSelected(indices)` — replace the entire selection.
+- `select(index)` — add `index` to the selection (replaces in single mode).
+- `toggle(index, force?)` — toggle a single index, or force on/off.
+- `clearSelection()` — clear all.
+
+### `<ha-list-nav>`
+
+Same as `ha-list-base`, but wrapped in a `<nav>` landmark
+(`<nav><div role="list">…</div></nav>`). Use `aria-label` to name the
+landmark — the value is forwarded to the inner `<nav>`. Items should be
+`<ha-list-item-button>` with an `href`.
+
+**CSS parts**
+
+- `nav` — the `<nav>` wrapper.
+- `base` — the inner `<div role="list">`.
+
+## Items
+
+All items inherit from `ha-row-item`, which provides the row layout and the
+shared slots/attributes below.
+
+### Shared row layout (`ha-row-item`)
+
+**Slots**
+
+- `start` — leading container (icon/avatar).
+- `end` — trailing container (meta/chevron).
+- `headline` — primary text (overrides the `headline` attribute).
+- `supporting-text` — secondary text (overrides the `supporting-text` attribute).
+- `content` — escape hatch: replaces the entire middle column.
+
+**Attributes**
+
+| Name              | Type    | Default | Description                             |
+| ----------------- | ------- | ------- | --------------------------------------- |
+| `headline`        | String  | —       | Primary text. Overridden by the slot.   |
+| `supporting-text` | String  | —       | Secondary text. Overridden by the slot. |
+| `disabled`        | Boolean | `false` | Dims the row and blocks pointer events. |
+
+**CSS parts**
+
+`base`, `start`, `content`, `headline`, `supporting-text`, `end`.
+
+**CSS custom properties**
+
+- `--ha-row-item-padding-block` — vertical padding.
+- `--ha-row-item-padding-inline` — horizontal padding.
+- `--ha-row-item-gap` — gap between `start`, `content`, and `end`.
+- `--ha-row-item-min-height` — minimum row height (default `48px`).
+
+### `<ha-list-item-base>`
+
+Non-interactive list row. Host role is `listitem`. Inherits everything from
+`ha-row-item`.
+
+**Attributes**
+
+- `interactive` (Boolean, default `false`) — opt this row into the parent
+  list's roving tabindex. Useful for sortable rows that need keyboard focus
+  but no click action. Interactive subclasses set this automatically.
+
+**CSS custom properties**
+
+- `--ha-list-item-focus-radius` — focus outline border-radius.
+- `--ha-list-item-focus-width` — focus outline width (steady state).
+- `--ha-list-item-focus-width-start` — focus outline width at the start of
+  the focus-in animation.
+- `--ha-list-item-focus-offset` — focus outline offset.
+- `--ha-list-item-focus-background` — background color on keyboard focus.
+
+### `<ha-list-item-button>`
+
+Interactive row. Renders an inner `<a>` when `href` is set, otherwise a
+`<button>`. The full row is the hit target. When placed inside a list using
+roving tabindex, the host is the tab stop and the inner element carries
+`tabindex="-1"`.
+
+**Attributes**
+
+- `href` (String) — when set, renders an `<a>` instead of a `<button>`.
+- `target` (String) — anchor `target` (requires `href`).
+- `rel` (String) — anchor `rel` (requires `href`).
+- `download` (String) — anchor `download` (requires `href`).
+
+**CSS parts**
+
+- `ripple` — the ripple effect element.
+
+### `<ha-list-item-option>`
+
+Selectable row. Host role is `option`; reflects `aria-selected`. Designed to
+sit inside `<ha-list-selectable>`, which owns selection state and toggles
+`selected` on this item — the option itself does not fire selection events.
+
+**Attributes**
+
+- `selected` (Boolean, default `false`, reflected) — set by the parent
+  `ha-list-selectable`.
+- `value` (String) — value identifying the option.
+- `appearance` (`"line"` | `"checkbox"`, default `"line"`) — `"line"`
+  highlights the row; `"checkbox"` renders a decorative `<ha-checkbox>`.
+- `selection-position` (`"start"` | `"end"`, default `"start"`) — side the
+  checkbox sits on when `appearance="checkbox"`.
+
+**CSS parts**
+
+- `checkbox` — wrapper around the `<ha-checkbox>` when `appearance="checkbox"`.
+- `ripple` — the ripple effect element.
+
+**CSS custom properties**
+
+- `--ha-list-item-selected-background` — background color when selected
+  (`appearance="line"`).
@@ -0,0 +1,455 @@
+import {
+  mdiAccount,
+  mdiChevronRight,
+  mdiCog,
+  mdiHome,
+  mdiInformationOutline,
+  mdiMapMarker,
+  mdiOpenInNew,
+  mdiViewDashboard,
+  mdiWifi,
+} from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/item/ha-list-item-base";
+import "../../../../src/components/item/ha-list-item-button";
+import "../../../../src/components/item/ha-list-item-option";
+import "../../../../src/components/list/ha-list-base";
+import "../../../../src/components/list/ha-list-nav";
+import "../../../../src/components/list/ha-list-selectable";
+
+type Appearance = "line" | "checkbox";
+type Position = "start" | "end";
+
+const appearances: Appearance[] = ["line", "checkbox"];
+const positions: Position[] = ["start", "end"];
+const selectedStates = [false, true];
+const disabledStates = [false, true];
+
+@customElement("demo-components-ha-list")
+export class DemoHaList extends LitElement {
+  @state() private _buttonClicks = 0;
+
+  @state() private _single: number | Set<number> = -1;
+
+  @state() private _multiLine: number | Set<number> = new Set();
+
+  @state() private _multiCheckStart: number | Set<number> = new Set();
+
+  @state() private _multiCheckEnd: number | Set<number> = new Set();
+
+  private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];
+
+  protected render(): TemplateResult {
+    return html`
+      <h2>ha-list-base</h2>
+      <p>
+        Styled container with keyboard focus navigation. Children should be
+        <code>ha-list-item-*</code>.
+      </p>
+
+      <ha-card header="Info list (non-interactive rows)">
+        <ha-list-base aria-label="Device info">
+          <ha-list-item-base
+            headline="IP address"
+            supporting-text="192.168.1.42"
+          >
+            <ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Location" supporting-text="Living room">
+            <ha-svg-icon slot="start" .path=${mdiMapMarker}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Firmware" supporting-text="2026.4.1">
+            <ha-svg-icon
+              slot="start"
+              .path=${mdiInformationOutline}
+            ></ha-svg-icon>
+          </ha-list-item-base>
+        </ha-list-base>
+      </ha-card>
+
+      <ha-card header="Vertical list (default)">
+        <ha-list-base aria-label="Example list">
+          <ha-list-item-button>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <span slot="headline">First row</span>
+            <span slot="supporting-text">Supporting text</span>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <ha-svg-icon slot="start" .path=${mdiAccount}></ha-svg-icon>
+            <span slot="headline">Second row</span>
+          </ha-list-item-button>
+          <ha-list-item-button disabled>
+            <span slot="headline">Disabled row</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">Fourth row</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <ha-card header="Vertical list with wrap-focus">
+        <ha-list-base wrap-focus aria-label="Wrap focus">
+          <ha-list-item-button>
+            <span slot="headline">A</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">B</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">C</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-item-base</h2>
+      <p>Non-interactive base row with slot permutations.</p>
+
+      <ha-card header="Slot permutations">
+        <ha-list-base aria-label="Slot permutations">
+          <ha-list-item-base headline="Headline only"></ha-list-item-base>
+          <ha-list-item-base
+            headline="Headline"
+            supporting-text="Supporting text"
+          ></ha-list-item-base>
+          <ha-list-item-base headline="Start + headline">
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Start + headline + end">
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base
+            headline="Full row"
+            supporting-text="All slots filled"
+          >
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base>
+            <div slot="content" class="custom-content">
+              <strong>Custom content escape hatch</strong>
+              <span>Replaces the whole middle column</span>
+            </div>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Disabled row" disabled>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+          </ha-list-item-base>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-item-button</h2>
+      <p>
+        Interactive row. Renders an inner <code>&lt;a&gt;</code> when
+        <code>href</code> is set, otherwise a <code>&lt;button&gt;</code>.
+      </p>
+
+      <ha-card header="Button (default) / link (with href)">
+        <ha-list-base aria-label="Button items">
+          <ha-list-item-button @click=${this._onButtonClick}>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <span slot="headline">Button (clicks: ${this._buttonClicks})</span>
+          </ha-list-item-button>
+          <ha-list-item-button
+            href="https://www.home-assistant.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ha-svg-icon slot="start" .path=${mdiOpenInNew}></ha-svg-icon>
+            <span slot="headline">Link (opens in new tab)</span>
+            <span slot="supporting-text"
+              >Cmd/Ctrl-click still opens in new tab</span
+            >
+          </ha-list-item-button>
+          <ha-list-item-button disabled>
+            <span slot="headline">Disabled button</span>
+          </ha-list-item-button>
+          <ha-list-item-button href="#nope" disabled>
+            <span slot="headline">Disabled link</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-selectable + ha-list-item-option</h2>
+      <p>
+        Selectable list (<code>role="listbox"</code>). Items must be
+        <code>ha-list-item-option</code>. Set <code>multi</code> for
+        multi-select.
+      </p>
+
+      <ha-card header="Single select, appearance=line">
+        <ha-list-selectable
+          aria-label="Single select"
+          @ha-list-item-selected=${this._onSingle}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                .value=${o}
+                ?selected=${this._isSel(this._single, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify(this._toJson(this._single))}</pre>
+      </ha-card>
+
+      <ha-card header="Multi select, appearance=line">
+        <ha-list-selectable
+          multi
+          aria-label="Multi select line"
+          @ha-list-item-selected=${this._onMultiLineSelected}
+          @ha-list-item-deselected=${this._onMultiLineDeselected}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                .value=${o}
+                ?selected=${this._isSel(this._multiLine, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify(this._toJson(this._multiLine))}</pre>
+      </ha-card>
+
+      <ha-card
+        header='Multi select, appearance=checkbox, selection-position="start"'
+      >
+        <ha-list-selectable
+          multi
+          aria-label="Multi checkbox start"
+          @ha-list-item-selected=${this._onMultiCheckStartSelected}
+          @ha-list-item-deselected=${this._onMultiCheckStartDeselected}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="start"
+                .value=${o}
+                ?selected=${this._isSel(this._multiCheckStart, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
+        >
+      </ha-card>
+
+      <ha-card
+        header='Multi select, appearance=checkbox, selection-position="end"'
+      >
+        <ha-list-selectable
+          multi
+          aria-label="Multi checkbox end"
+          @ha-list-item-selected=${this._onMultiCheckEndSelected}
+          @ha-list-item-deselected=${this._onMultiCheckEndDeselected}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="end"
+                .value=${o}
+                ?selected=${this._isSel(this._multiCheckEnd, i)}
+              >
+                <span slot="headline">${o}</span>
+                <span slot="supporting-text">${o.length} characters</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
+        >
+      </ha-card>
+
+      <ha-card header="Option: all combinations">
+        <div class="grid">
+          ${appearances.map((appearance) =>
+            positions.map((position) =>
+              selectedStates.map((selected) =>
+                disabledStates.map(
+                  (disabled) => html`
+                    <div role="listbox" class="wrap" aria-label="single option">
+                      <ha-list-item-option
+                        appearance=${appearance}
+                        selection-position=${position}
+                        ?selected=${selected}
+                        ?disabled=${disabled}
+                      >
+                        <span slot="headline"
+                          >${appearance} / pos=${position}</span
+                        >
+                        <span slot="supporting-text"
+                          >selected=${String(selected)}
+                          disabled=${String(disabled)}</span
+                        >
+                      </ha-list-item-option>
+                    </div>
+                  `
+                )
+              )
+            )
+          )}
+        </div>
+      </ha-card>
+
+      <h2>ha-list-nav</h2>
+      <p>
+        Same as <code>ha-list-base</code> but wrapped in a
+        <code>&lt;nav&gt;</code> landmark.
+      </p>
+
+      <ha-card header="Sidebar-style navigation">
+        <ha-list-nav aria-label="Primary navigation">
+          ${[
+            { name: "Overview", path: "#overview", icon: mdiHome },
+            { name: "Dashboards", path: "#dashboards", icon: mdiViewDashboard },
+            { name: "Map", path: "#map", icon: mdiMapMarker },
+            { name: "Settings", path: "#settings", icon: mdiCog },
+          ].map(
+            (p) => html`
+              <ha-list-item-button .href=${p.path}>
+                <ha-svg-icon slot="start" .path=${p.icon}></ha-svg-icon>
+                <span slot="headline">${p.name}</span>
+                <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+              </ha-list-item-button>
+            `
+          )}
+        </ha-list-nav>
+      </ha-card>
+    `;
+  }
+
+  private _isSel(value: number | Set<number>, index: number): boolean {
+    if (typeof value === "number") {
+      return value === index;
+    }
+    return value.has(index);
+  }
+
+  private _toJson(value: number | Set<number>): unknown {
+    return value instanceof Set ? [...value] : value;
+  }
+
+  private _onButtonClick = () => {
+    this._buttonClicks++;
+  };
+
+  private _withIndex(
+    value: number | Set<number>,
+    index: number,
+    selected: boolean
+  ): Set<number> {
+    const next = new Set(value instanceof Set ? value : []);
+    if (selected) {
+      next.add(index);
+    } else {
+      next.delete(index);
+    }
+    return next;
+  }
+
+  private _onSingle = (ev: CustomEvent<number>) => {
+    this._single = ev.detail;
+  };
+
+  private _onMultiLineSelected = (ev: CustomEvent<number>) => {
+    this._multiLine = this._withIndex(this._multiLine, ev.detail, true);
+  };
+
+  private _onMultiLineDeselected = (ev: CustomEvent<number>) => {
+    this._multiLine = this._withIndex(this._multiLine, ev.detail, false);
+  };
+
+  private _onMultiCheckStartSelected = (ev: CustomEvent<number>) => {
+    this._multiCheckStart = this._withIndex(
+      this._multiCheckStart,
+      ev.detail,
+      true
+    );
+  };
+
+  private _onMultiCheckStartDeselected = (ev: CustomEvent<number>) => {
+    this._multiCheckStart = this._withIndex(
+      this._multiCheckStart,
+      ev.detail,
+      false
+    );
+  };
+
+  private _onMultiCheckEndSelected = (ev: CustomEvent<number>) => {
+    this._multiCheckEnd = this._withIndex(this._multiCheckEnd, ev.detail, true);
+  };
+
+  private _onMultiCheckEndDeselected = (ev: CustomEvent<number>) => {
+    this._multiCheckEnd = this._withIndex(
+      this._multiCheckEnd,
+      ev.detail,
+      false
+    );
+  };
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-4);
+      padding: var(--ha-space-6);
+    }
+    h2 {
+      margin: var(--ha-space-4) 0 0;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-medium);
+    }
+    p {
+      margin: 0 0 var(--ha-space-2);
+      color: var(--secondary-text-color);
+    }
+    ha-card {
+      max-width: 560px;
+    }
+    pre {
+      padding: var(--ha-space-4);
+      background: var(--secondary-background-color);
+      margin: 0;
+    }
+    .custom-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-1);
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--ha-space-3);
+      padding: var(--ha-space-3);
+    }
+    .wrap {
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-border-radius-sm);
+    }
+    .drag-handle {
+      cursor: grab;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-list": DemoHaList;
+  }
+}
@@ -1,20 +1,21 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

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

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

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

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

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

  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    .button {
      padding: unset;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
@@ -43,12 +43,22 @@ const fullOptions: SelectBoxOption[] = [
  },
 ];

+const manyOptions: SelectBoxOption[] = [
+  { value: "opt1", label: "Option 1" },
+  { value: "opt2", label: "Option 2" },
+  { value: "opt3", label: "Option 3" },
+  { value: "opt4", label: "Option 4" },
+  { value: "opt5", label: "Option 5" },
+  { value: "opt6", label: "Option 6" },
+];
+
 const selects: {
  id: string;
  label: string;
  class?: string;
  options: SelectBoxOption[];
  disabled?: boolean;
+  maxColumns?: number;
 }[] = [
  {
    id: "basic",
@@ -60,6 +70,12 @@ const selects: {
    label: "With description and image",
    options: fullOptions,
  },
+  {
+    id: "two-columns",
+    label: "2 columns (maxColumns=2)",
+    options: manyOptions,
+    maxColumns: 2,
+  },
 ];

@customElement("demo-components-ha-select-box")
@@ -67,13 +83,14 @@ export class DemoHaSelectBox extends LitElement {
  @state() private value?: string = "off";

  handleValueChanged(e: CustomEvent) {
+    console.log(e.detail.value);
    this.value = e.detail.value as string;
  }

  protected render(): TemplateResult {
    return html`
      ${repeat(selects, (select) => {
-        const { id, label, options } = select;
+        const { id, label, options, maxColumns } = select;
        return html`
          <ha-card>
            <div class="card-content">
@@ -81,6 +98,7 @@ export class DemoHaSelectBox extends LitElement {
              <ha-select-box
                .value=${this.value}
                .options=${options}
+                .maxColumns=${maxColumns}
                @value-changed=${this.handleValueChanged}
              >
              </ha-select-box>
@@ -17,13 +17,13 @@ subtitle: A slider component for selecting a value from a range.
 ### Example Usage

 <div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
+  <ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+  <ha-slider size="m"></ha-slider>
 </div>

 ```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
+<ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+<ha-slider size="m"></ha-slider>
 ```

 ### API
@@ -1,12 +1,12 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-bar";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-slider";
 import type { HomeAssistant } from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

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

  protected render(): TemplateResult {
    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <ha-card slot=${slot}>
              <div class="card-content">
                <span>Default (disabled)</span>
                <ha-slider
@@ -29,7 +29,7 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
                <span>Small</span>
                <ha-slider
-                  size="small"
+                  size="s"
                  min="0"
                  max="8"
                  value="4"
@@ -37,7 +37,7 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
                <span>Medium</span>
                <ha-slider
-                  size="medium"
+                  size="m"
                  min="0"
                  max="8"
                  value="4"
@@ -45,44 +45,19 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
              </div>
            </ha-card>
-          </div>
-        `
-      )}
+          `
+        )}
+      </demo-theme-comparison>
    `;
  }

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

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

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

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

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

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

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

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

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

-  firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
  static styles = css`
    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
    }
    ha-card {
-      margin: 24px auto;
+      margin: 0;
+      width: 100%;
    }
    .card-content {
      display: flex;
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .15.0
 .16.0