Reduce top position

Add floating support for badges
2026-06-17 22:01:56 +00:00 · 2026-04-13 11:19:29 +01:00 · 2026-04-13 11:19:15 +01:00
1630 changed files with 30040 additions and 129502 deletions
@@ -69,6 +69,7 @@
 - [ ] I understand the code I am submitting and can explain how it works.
 - [ ] The code change is tested and works locally.
 - [ ] There is no commented out code in this PR.
+- [ ] I have followed the [development checklist][dev-checklist]
 - [ ] I have followed the [perfect PR recommendations][perfect-pr]
 - [ ] Any generated code has been carefully reviewed for correctness and compliance with project standards.

@@ -104,5 +105,6 @@ To help with the load of incoming pull requests:

  Below, some useful links you could explore:
 -->
+[dev-checklist]: https://developers.home-assistant.io/docs/development_checklist/
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
 [perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr
@@ -2,13 +2,12 @@

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

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

 ## Table of Contents

 - [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)
@@ -41,7 +40,7 @@ script/develop     # Development server
 ```typescript
 import type { HomeAssistant } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
 ```

 ## Core Architecture
@@ -53,64 +52,13 @@ 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 (flat config) extends TypeScript strict, Lit, Web Components, Accessibility (lit-a11y), and import-x
+- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
 - Prettier with ES5 trailing commas enforced
 - No console statements (`no-console: "error"`) - use proper logging
 - Import organization: No unused imports, consistent type imports
@@ -188,7 +136,6 @@ 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
@@ -213,7 +160,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
- **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
+- **Follow Material Design**: Use Material Web Components where appropriate
 - **Support RTL**: Ensure all layouts work in RTL languages

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

 ## Component Library

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

 **Dialog Sizing:**

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

 **Button Appearance Guidelines:**

-`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`)
+- **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)
 - Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`

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

 - Schema-driven using `HaFormSchema[]`
@@ -357,11 +301,14 @@ Common patterns:
 ></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`, `narrow`
- Slots: `icon` (override the leading icon), `action` (custom action content)
+- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
 - Content announced by screen readers when dynamically displayed

 ```html
@@ -370,6 +317,10 @@ Common patterns:
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```

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

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

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

 ## Common Patterns

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

 #### Creating a Lovelace Card

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

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

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

- Don't manually query the DOM with `querySelector` - use the `@query`/`@queryAll` decorators or component properties
+- Don't use `querySelector` - Use refs 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
@@ -529,7 +477,7 @@ When creating a pull request, you **must** use the PR template located at `.gith

 #### Terminology Standards

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

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

 #### Translation Considerations

-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:
-
+- **Add translation keys**: All user-facing text must be translatable
+- **Use placeholders**: Support dynamic content in translations
 - **Keep context**: Provide enough context for translators
- **Avoid concatenation**: Prefer full localized strings with placeholders over stitching translated fragments together
+
+```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?");
+```

 ### 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 (hover, active, focus)
+- **Visual feedback**: Provide clear indication of interactive states

 #### 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
@@ -621,12 +580,15 @@ Recurring, easy-to-miss problems surfaced in real PR reviews. These complement t
 - **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
- **Event handling and cleanup**: Subscribe/unsubscribe correctly and remove listeners to avoid memory leaks
+- **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

 #### Configuration and Props

@@ -637,12 +599,39 @@ Recurring, easy-to-miss problems surfaced in real PR reviews. These complement t

 ## Review Guidelines

-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.
+### Core Requirements Checklist

- [ ] `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)
+- [ ] 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
 - [ ] Components handle all states (loading, error, unavailable)
 - [ ] Entity existence checked before property access
- [ ] Event/subscription listeners cleaned up (no memory leaks)
- [ ] Accessible to screen readers and keyboard
+- [ ] Event subscriptions properly cleaned up
@@ -6,6 +6,7 @@ updates:
      interval: weekly
      time: "06:00"
    cooldown:
+      default-days-before-reopen: 30
      default-days: 7
    open-pull-requests-limit: 10
    labels:
@@ -1,50 +0,0 @@
-name: Blocking labels
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - labeled
-      - unlabeled
-    branches:
-      - dev
-      - master
-
-permissions:
-  contents: read
-
-jobs:
-  check:
-    name: Check for labels which block the Pull Request from being merged
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for blocking labels
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const blockingLabels = [
-              "wait for backend",
-              "Needs UX",
-              "Do Not Review",
-              "Blocked",
-              "has-parent",
-            ];
-            const prLabels = context.payload.pull_request.labels.map(
-              (l) => l.name
-            );
-            const found = blockingLabels.filter((bl) => prLabels.includes(bl));
-            if (found.length > 0) {
-              const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
-              await core.summary
-                .addHeading(":no_entry_sign: Pull Request is blocked", 2)
-                .addRaw(message)
-                .write();
-              core.setFailed(message);
-            } else {
-              await core.summary
-                .addHeading(":white_check_mark: Pull Request is clear to merge after review", 2)
-                .addRaw("This Pull Request is not blocked by any labels which prevent it from being merged.")
-                .write();
-            }
@@ -24,13 +24,13 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: dev
          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -46,7 +46,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -60,13 +60,13 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -82,7 +82,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -27,11 +27,11 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -42,7 +42,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
        with:
          path: |
            node_modules/.cache/prettier
@@ -58,18 +58,16 @@ 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@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -85,11 +83,11 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -27,7 +27,7 @@ jobs:

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

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

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

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

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

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -47,7 +47,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -61,13 +61,13 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
          persist-credentials: false

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -83,7 +83,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
@@ -19,12 +19,12 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

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

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -45,7 +45,7 @@ jobs:
      - name: Deploy preview to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
            --json > deploy_output.json
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -1,308 +0,0 @@
-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@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
+        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
        with:
          sync-labels: true
@@ -13,11 +13,13 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
+      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
-          issue-inactive-days: "30"
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
          issue-lock-reason: ""
-          pr-inactive-days: "1"
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
          pr-lock-reason: ""
@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false

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

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

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

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

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"

@@ -77,27 +77,14 @@ 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@34957438948e0b3dcde73c77750643dadae594f5 # 2026.06.0
+        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
        with:
          abi: cp314
          tag: musllinux_1_2
@@ -113,11 +100,11 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          persist-credentials: false
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
      - name: Install dependencies
@@ -22,7 +22,7 @@ jobs:
      || github.event.issue.type.name == 'Opportunity'
    steps:
      - name: Add no-stale label
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
        with:
          script: |
            await github.rest.issues.addLabels({
@@ -41,7 +41,7 @@ jobs:
    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
@@ -6,7 +6,6 @@ on:
    - cron: "0 * * * *"

 permissions:
-  actions: write
  issues: write
  pull-requests: write

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

@@ -54,16 +54,7 @@ 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.16.0
+24.14.1
@@ -1,86 +0,0 @@
-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,16 +1,11 @@
-approvedGitRepositories:
-  - "**"
-
 compressionLevel: mixed

+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""

 enableGlobalCache: false

-enableScripts: true
-
 nodeLinker: node-modules

-npmMinimalAgeGate: 3d
-
-yarnPath: .yarn/releases/yarn-4.16.0.cjs
+yarnPath: .yarn/releases/yarn-4.13.0.cjs
@@ -1,53 +0,0 @@
-# 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
@@ -176,14 +176,11 @@ module.exports.babelOptions = ({
    {
      // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
      // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
-      // (otherwise babel-plugin-polyfill-corejs3 injects bare require("core-js/modules/...") calls
-      // that rspack does not transform, causing ReferenceError in browsers like Safari 14).
      sourceType: "unambiguous",
      include: /\/node_modules\//,
      exclude: [
        "element-internals-polyfill",
        "@?lit(?:-labs|-element|-html)?",
-        "@formatjs/(?:ecma402-abstract|intl-\\w+)",
      ].map((p) => new RegExp(`/node_modules/${p}/`)),
    },
  ],
@@ -320,22 +317,4 @@ 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,13 +1,9 @@
 // @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,11 +0,0 @@
-// 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
-// ReferenceError on browsers (notably Safari 14) if environment
-// detection mis-classifies the page. Since browser bundles never need to
-// access Node built-in modules, return undefined unconditionally.
-//
-// Wired up via rspack `NormalModuleReplacementPlugin` in build-scripts/rspack.cjs.
-module.exports = function () {
-  return undefined;
-};
@@ -5,7 +5,6 @@ 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";
@@ -37,12 +36,7 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gen-licenses"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-app",
    "rspack-prod-app",
    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
@@ -45,10 +45,3 @@ gulp.task(
    ])
  )
 );
-
-gulp.task(
-  "clean-e2e-test-app",
-  gulp.parallel("clean-translations", async () =>
-    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
-  )
-);
@@ -1,41 +0,0 @@
-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,7 +25,6 @@ const SAFARI_TO_MACOS = {
  16: [11, 0, 0],
  17: [12, 0, 0],
  18: [13, 0, 0],
-  26: [26, 0, 0],
 };

 const getCommonTemplateVars = () => {
@@ -267,24 +266,3 @@ 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,9 +57,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
      if (descriptionContent === "") {
        hasDescription = false;
      } else {
-        descriptionContent = marked(descriptionContent)
-          .replace(/\\/g, "\\\\")
-          .replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
        fs.writeFileSync(
          path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -103,29 +101,12 @@ gulp.task("gather-gallery-pages", async function gatherPages() {

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

-    if (group.subsections) {
-      // Listed pages keep their per-subsection order.
-      for (const subsection of group.subsections) {
-        for (const page of subsection.pages) {
-          if (!toProcess.delete(page)) {
-            console.error("Found unreferenced demo", page);
-          }
-        }
-      }
-      // Any remaining pages land in a trailing "Other" subsection.
-      const leftover = Array.from(toProcess).sort();
-      if (leftover.length) {
-        group.subsections.push({ header: "Other", pages: leftover });
-      }
-      continue;
-    }
-
    // Any pre-defined groups will not be sorted.
    if (group.pages) {
      for (const page of group.pages) {
@@ -201,23 +201,3 @@ 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);
-});
@@ -1,40 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
-
-const TARGET = join(
-  paths.root_dir,
-  "src",
-  "data",
-  "sensor_numeric_device_classes.ts"
-);
-
-gulp.task("gen-numeric-device-classes", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const classes = [...(data.numeric_device_classes ?? [])].sort();
-  if (!classes.length) {
-    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
-// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
-// Regenerate with \`script/gen_numeric_device_classes\`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
-];
-`;
-
-  await writeFile(TARGET, content);
-});
@@ -4,13 +4,11 @@ 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";
@@ -1,121 +0,0 @@
-// 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,7 +14,6 @@ import {
  createDemoConfig,
  createGalleryConfig,
  createLandingPageConfig,
-  createE2eTestAppConfig,
 } from "../rspack.cjs";

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

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

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

@@ -232,22 +210,3 @@ 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,15 +50,4 @@ 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"
-  ),
 };
@@ -12,7 +12,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const SafeWebpackBar = require("./safe-webpackbar.cjs");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");

@@ -126,7 +126,7 @@ const createRspackConfig = ({
      },
    },
    plugins: [
-      !isStatsBuild && new SafeWebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
      new WebpackManifestPlugin({
        // Only include the JS of entrypoints
        filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -173,16 +173,6 @@ const createRspackConfig = ({
            path.resolve(paths.root_dir, "src/util/empty.js")
          )
        : false,
-      // core-js ships a Node-only helper that evaluates
-      // `Function('return require("...")')()` when its runtime environment
-      // detection mis-classifies the page as Node. That produces a
-      // ReferenceError on browsers (observed on Safari 14). Since browser
-      // bundles never need to access Node built-in modules, replace it with
-      // a CommonJS no-op stub matching the helper's API (returns undefined).
-      new rspack.NormalModuleReplacementPlugin(
-        /core-js[\\/]internals[\\/]get-built-in-node-module(?:\.js)?$/,
-        path.resolve(__dirname, "get-built-in-node-module-shim.cjs")
-      ),
      !isProdBuild && new LogStartCompilePlugin(),
      isProdBuild &&
        new StatsWriterPlugin({
@@ -337,11 +327,6 @@ 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,
@@ -349,5 +334,4 @@ module.exports = {
  createGalleryConfig,
  createRspackConfig,
  createLandingPageConfig,
-  createE2eTestAppConfig,
 };
@@ -1,25 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WebpackBar = require("webpackbar/rspack");
-
-// Rspack 2's ProgressPlugin passes the third `info` arg as
-// `{ builtModules, moduleIdentifier? }` instead of the v1 string. webpackbar@7's
-// parseRequest still expects a string and crashes on `split`. Extract
-// moduleIdentifier (the v1 equivalent) so progress still shows the active module.
-class SafeWebpackBar extends WebpackBar {
-  constructor(options) {
-    super(options);
-    const inner = this.webpackbar;
-    const originalUpdate = inner.updateProgress.bind(inner);
-    inner.updateProgress = (percent, message, details = []) =>
-      originalUpdate(
-        percent,
-        message,
-        details.map((d) => {
-          if (typeof d === "string") return d;
-          return d?.moduleIdentifier ?? "";
-        })
-      );
-  }
-}
-
-module.exports = SafeWebpackBar;
@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -150,7 +150,7 @@ class HcCast extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);

    const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +183,7 @@ class HcCast extends LitElement {
    });
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);
    toggleAttribute(
      this,
@@ -12,7 +12,7 @@ import {
  ERR_INVALID_HTTPS_TO_HTTP,
  getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -158,7 +158,7 @@ export class HcConnect extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("./hc-cast");

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -53,7 +53,7 @@ class HcLayout extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);

    if (this.connection) {
@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
@@ -30,7 +29,7 @@ class HcDemo extends HassElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._initializeHass();
  }
@@ -42,7 +41,7 @@ class HcDemo extends HassElement {
        this._updateHass(hassUpdate),
    };

-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));

    mockHistory(hass);

@@ -1,5 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -65,7 +64,7 @@ class HcLovelace extends LitElement {
    `;
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);

    if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {
@@ -1,6 +1,6 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { createConnection, getAuth } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
@@ -106,7 +106,7 @@ export class HcMain extends HassElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("./hc-lovelace");
    import("../../../../src/resources/append-ha-style");
@@ -1,6 +1,5 @@
 /// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -38,7 +37,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
      getCastManager().then((mgr) => {
@@ -63,7 +62,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    );
  }

-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
    super.updated(changedProps);
    this.style.display = this._castManager ? "" : "none";
  }
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -102,7 +102,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    if (this._hidden) {
      this.style.display = "none";
@@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
-import { demoDevices } from "./stubs/devices";
+import { mockConfigEntries } from "./stubs/config_entries";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
@@ -16,7 +16,6 @@ import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -30,31 +29,6 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";

-// WS command / REST path prefixes whose mocks live in the lazily imported
-// config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
-const CONFIG_PANEL_COMMANDS = [
-  "cloud/",
-  "validate_config",
-  "config_entries/",
-  "device_automation/",
-  "entity/source",
-  "blueprint/",
-  "homeassistant/expose",
-  "zone/list",
-  "person/list",
-  "network/url",
-  "application_credentials/",
-  "system_health/",
-  "backup/",
-  "automation/config",
-  "script/config",
-  "config/automation/config",
-  "config/script/config",
-  "config/scene/config",
-  "search/related",
-  "tag/list",
-];
-
@customElement("ha-demo")
 export class HaDemo extends HomeAssistantAppEl {
  protected async _initializeHass() {
@@ -65,7 +39,7 @@ export class HaDemo extends HomeAssistantAppEl {
        this._updateHass(hassUpdate),
    };

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

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

 export const mockEntityRegistry = (
@@ -9,17 +6,4 @@ export const mockEntityRegistry = (
  data: EntityRegistryEntry[] = []
 ) => {
  hass.mockWS("config/entity_registry/list", () => data);
-  hass.mockWS(
-    "config/entity_registry/get_entries",
-    (msg: { entity_ids: string[] }) => {
-      const result: Record<string, ExtEntityRegistryEntry> = {};
-      for (const entityId of msg.entity_ids) {
-        const entry = data.find((e) => e.entity_id === entityId);
-        if (entry) {
-          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
-        }
-      }
-      return result;
-    }
-  );
 };
@@ -1,12 +0,0 @@
-import type { EntitySources } from "../../../src/data/entity/entity_sources";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockEntitySources = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "entity/source",
-    (): EntitySources => ({
-      "sensor.co2_intensity": { domain: "co2signal" },
-      "sensor.grid_fossil_fuel_percentage": { domain: "co2signal" },
-    })
-  );
-};
@@ -1,39 +0,0 @@
-import type { ExposeEntitySettings } from "../../../src/data/expose";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const exposedEntities: Record<string, ExposeEntitySettings> = {
-  "light.bed_light": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-  "light.ceiling_lights": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": false,
-  },
-  "switch.decorative_lights": {
-    conversation: true,
-    "cloud.alexa": false,
-    "cloud.google_assistant": true,
-  },
-  "climate.ecobee": {
-    conversation: true,
-    "cloud.alexa": true,
-    "cloud.google_assistant": true,
-  },
-};
-
-export const mockExpose = (hass: MockHomeAssistant) => {
-  hass.mockWS("homeassistant/expose_entity/list", () => ({
-    exposed_entities: exposedEntities,
-  }));
-  hass.mockWS(
-    "homeassistant/expose_new_entities/get",
-    (msg: { assistant: string }) => ({
-      expose_new: msg.assistant !== "cloud.google_assistant",
-    })
-  );
-  hass.mockWS("homeassistant/expose_entity", () => null);
-  hass.mockWS("homeassistant/expose_new_entities/set", () => null);
-};
@@ -42,7 +42,6 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
-  hass.mockWS("frontend/get_system_data", () => ({ value: null }));
  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };
@@ -1,72 +0,0 @@
-import type { IntegrationManifest } from "../../../src/data/integration";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const manifest = (
-  domain: string,
-  name: string,
-  overrides: Partial<IntegrationManifest> = {}
-): IntegrationManifest => ({
-  is_built_in: true,
-  domain,
-  name,
-  config_flow: true,
-  documentation: `https://www.home-assistant.io/integrations/${domain}/`,
-  iot_class: "local_push",
-  ...overrides,
-});
-
-const manifests: IntegrationManifest[] = [
-  manifest("co2signal", "Electricity Maps", { iot_class: "cloud_polling" }),
-  manifest("hue", "Philips Hue"),
-  manifest("sonos", "Sonos"),
-  manifest("met", "Met.no", { iot_class: "cloud_polling" }),
-  // Helpers
-  manifest("template", "Template", { integration_type: "helper" }),
-  manifest("input_boolean", "Toggle", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_number", "Number", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_select", "Dropdown", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_text", "Text", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("input_datetime", "Date and/or time", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("counter", "Counter", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("timer", "Timer", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-  manifest("schedule", "Schedule", {
-    config_flow: false,
-    integration_type: "helper",
-    iot_class: "local_polling",
-  }),
-];
-
-export const mockIntegration = (hass: MockHomeAssistant) => {
-  hass.mockWS("manifest/list", () => manifests);
-  hass.mockWS("manifest/get", (msg: { integration: string }) =>
-    manifests.find((m) => m.domain === msg.integration)
-  );
-};
@@ -1,5 +1,4 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
  selectedDemoConfig,
@@ -28,9 +27,6 @@ export const mockLovelace = (
    );
  });

-  hass.mockWS("lovelace/info", () =>
-    Promise.resolve({ resource_mode: "storage" } as LovelaceInfo)
-  );
  hass.mockWS("lovelace/config/save", () => Promise.resolve());
  hass.mockWS("lovelace/resources", () => Promise.resolve([]));
  hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));
@@ -1,13 +0,0 @@
-import type { NetworkUrls } from "../../../src/data/network";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockNetwork = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "network/url",
-    (): NetworkUrls => ({
-      internal: "http://homeassistant.local:8123",
-      external: "https://demo-instance.ui.nabu.casa",
-      cloud: "https://demo-instance.ui.nabu.casa",
-    })
-  );
-};
@@ -1,20 +0,0 @@
-import type { Person } from "../../../src/data/person";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const storage: Person[] = [
-  {
-    id: "demo_user",
-    name: "Demo User",
-    user_id: "abcd",
-    device_trackers: [],
-  },
-  {
-    id: "anne_therese",
-    name: "Anne Therese",
-    device_trackers: [],
-  },
-];
-
-export const mockPerson = (hass: MockHomeAssistant) => {
-  hass.mockWS("person/list", () => ({ storage, config: [] as Person[] }));
-};
@@ -1,7 +1,6 @@
 import {
  addDays,
  addHours,
-  addMinutes,
  addMonths,
  differenceInHours,
  endOfDay,
@@ -13,22 +12,10 @@ 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,
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
  maxDiff: number
 ): StatisticValue[] => {
@@ -39,10 +26,9 @@ 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: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
@@ -50,7 +36,12 @@ const generateMeanStatistics = (
      state: mean,
      sum: null,
    });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -58,6 +49,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
  start: Date,
  end: Date,
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
@@ -68,12 +60,11 @@ 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: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -82,7 +73,12 @@ const generateSumStatistics = (
      state: initValue + sum,
      sum,
    });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -90,7 +86,8 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
  start: Date,
  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
+  // eslint-disable-next-line default-param-last
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
@@ -104,12 +101,11 @@ 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: nextDate.getTime(),
+      end: currentDate.getTime(),
      mean: null,
      min: null,
      max: null,
@@ -118,7 +114,7 @@ const generateCurvedStatistics = (
      state: initValue + sum,
      sum: metered ? sum : null,
    });
-    currentDate = nextDate;
+    currentDate = addHours(currentDate, 1);
    if (!half && i > hours / 2) {
      half = true;
    }
@@ -296,7 +292,7 @@ const statisticsFunctions: Record<
      end,
      period,
      productionFinalVal,
-      0.2
+      2
    );
    return [...morning, ...production, ...evening, ...rest];
  },
@@ -1,18 +0,0 @@
-import type { SceneConfig } from "../../../src/data/scene";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const demoSceneConfig = (id: string): SceneConfig => ({
-  id,
-  name: "Demo scene",
-  entities: {
-    "light.bed_light": { state: "on" },
-  },
-});
-
-export const mockScene = (hass: MockHomeAssistant) => {
-  hass.mockAPI(/config\/scene\/config\/.+/, (_hass, method, path) => {
-    const id = path.split("/").pop()!;
-    // GET returns the config; POST/DELETE just acknowledge.
-    return method === "GET" ? demoSceneConfig(id) : {};
-  });
-};
@@ -1,7 +0,0 @@
-import type { RelatedResult } from "../../../src/data/search";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSearch = (hass: MockHomeAssistant) => {
-  // The demo has no relationship graph, so report no related items.
-  hass.mockWS("search/related", (): RelatedResult => ({}));
-};
@@ -1,56 +1,58 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS("sensor/numeric_device_classes", () => ({
-    numeric_device_classes: [
-      "volume_storage",
-      "gas",
-      "data_size",
-      "irradiance",
-      "wind_speed",
-      "volatile_organic_compounds",
-      "volatile_organic_compounds_parts",
-      "voltage",
-      "frequency",
-      "precipitation_intensity",
-      "volume",
-      "precipitation",
-      "battery",
-      "nitrogen_dioxide",
-      "speed",
-      "signal_strength",
-      "pm1",
-      "nitrous_oxide",
-      "atmospheric_pressure",
-      "data_rate",
-      "temperature",
-      "power_factor",
-      "aqi",
-      "current",
-      "volume_flow_rate",
-      "humidity",
-      "duration",
-      "ozone",
-      "distance",
-      "pressure",
-      "pm25",
-      "weight",
-      "energy",
-      "carbon_monoxide",
-      "apparent_power",
-      "illuminance",
-      "energy_storage",
-      "moisture",
-      "power",
-      "water",
-      "carbon_dioxide",
-      "ph",
-      "reactive_power",
-      "monetary",
-      "nitrogen_monoxide",
-      "pm10",
-      "sound_pressure",
-      "sulphur_dioxide",
-    ],
-  }));
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
 };
@@ -1,37 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockSystemHealth = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "system_health/info",
-    (_msg, _hass, onChange?: (event: any) => void) => {
-      // Defer so the consumer's unsubscribe handle is initialized first
-      // (real WS events arrive asynchronously).
-      setTimeout(() => {
-        onChange?.({
-          type: "initial",
-          data: {
-            homeassistant: {
-              info: {
-                version: "DEMO",
-                installation_type: "Home Assistant OS",
-                dev: false,
-                hassio: true,
-                docker: true,
-                container_arch: "aarch64",
-                user: "root",
-                virtualenv: false,
-                python_version: "3.13.0",
-                os_name: "Linux",
-                os_version: "6.6.0",
-                arch: "aarch64",
-                timezone: "America/Los_Angeles",
-                config_dir: "/config",
-              },
-            },
-          },
-        });
-      });
-      return () => undefined;
-    }
-  );
-};
@@ -1,33 +1,5 @@
-import type { LoggedError } from "../../../src/data/system_log";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

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

-import { fileURLToPath } from "node:url";
-
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
 import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
 import { configs as litConfigs } from "eslint-plugin-lit";
@@ -13,12 +14,35 @@ 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)
-);
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
+const compat = new FlatCompat({
+  baseDirectory: _dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+// Load airbnb-base via FlatCompat for non-import rules only.
+// eslint-plugin-import is incompatible with ESLint 10 (uses removed APIs),
+// so we strip its plugin/rules/settings and use eslint-plugin-import-x instead.
+const airbnbConfigs = compat.extends("airbnb-base").map((config) => {
+  const { plugins = {}, rules = {}, settings = {}, ...rest } = config;
+  return {
+    ...rest,
+    plugins: Object.fromEntries(
+      Object.entries(plugins).filter(([key]) => key !== "import")
+    ),
+    rules: Object.fromEntries(
+      Object.entries(rules).filter(([key]) => !key.startsWith("import/"))
+    ),
+    settings: Object.fromEntries(
+      Object.entries(settings).filter(([key]) => !key.startsWith("import/"))
+    ),
+  };
+});

 export default tseslint.config(
-  js.configs.recommended,
+  ...airbnbConfigs,
  eslintConfigPrettier,
  litConfigs["flat/all"],
  tseslint.configs.recommended,
@@ -56,65 +80,41 @@ export default tseslint.config(
    settings: {
      "import-x/resolver": {
        webpack: {
-          config: rspackConfigPath,
+          config: "./rspack.config.cjs",
        },
      },
    },

    rules: {
-      "array-callback-return": ["error", { allowImplicit: true }],
-      "block-scoped-var": "error",
-      "consistent-return": "error",
-      curly: ["error", "multi-line"],
-      "default-case-last": "error",
-      eqeqeq: ["error", "always", { null: "ignore" }],
-      "guard-for-in": "error",
-      "no-await-in-loop": "error",
-      "no-caller": "error",
-      "no-constructor-return": "error",
-      "no-eval": "error",
-      "no-extend-native": "error",
-      "no-implied-eval": "error",
-      "no-iterator": "error",
-      "no-new-func": "error",
-      "no-new-wrappers": "error",
-      "no-octal-escape": "error",
-      "no-promise-executor-return": "error",
-      "no-return-assign": ["error", "always"],
-      "no-script-url": "error",
-      "no-self-compare": "error",
-      "no-sequences": "error",
-      "no-template-curly-in-string": "error",
-      "no-unreachable-loop": "error",
-
-      "no-else-return": ["error", { allowElseIf: false }],
-      "no-lonely-if": "error",
-      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
-      "no-useless-computed-key": "error",
-      "no-useless-concat": "error",
-      "no-useless-rename": "error",
-      "no-useless-return": "error",
-      "one-var": ["error", "never"],
-      "operator-assignment": ["error", "always"],
-      "prefer-arrow-callback": "error",
-      "prefer-exponentiation-operator": "error",
-      "prefer-object-spread": "error",
-      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
-      "symbol-description": "error",
-      yoda: "error",
-
-      // TODO: Enable once violations are fixed (43 instances as of 2026-04)
-      // "no-useless-assignment": "error",
-      "no-useless-assignment": "error",
-
-      // Project rules
+      "class-methods-use-this": "off",
+      "new-cap": "off",
+      "prefer-template": "off",
+      "object-shorthand": "off",
+      "func-names": "off",
+      "no-underscore-dangle": "off",
+      strict: "off",
+      "no-plusplus": "off",
      "no-bitwise": "error",
+      "comma-dangle": "off",
+      "vars-on-top": "off",
+      "no-continue": "off",
+      "no-param-reassign": "off",
+      "no-multi-assign": "off",
      "no-console": "error",
+      radix: "off",
+      "no-alert": "off",
+      "no-nested-ternary": "off",
+      "prefer-destructuring": "off",
      "no-restricted-globals": [2, "event"],
+      "prefer-promise-reject-errors": "off",
      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "object-curly-newline": "off",
+      "default-case": "off",
      "wc/no-self-class": "off",
+      "no-shadow": "off",
+      "no-use-before-define": "off",

-      // import-x rules
+      // import-x rules (migrated from eslint-plugin-import / airbnb-base)
      "import-x/named": "off",
      "import-x/prefer-default-export": "off",
      "import-x/no-default-export": "off",
@@ -146,9 +146,13 @@ export default tseslint.config(
      "import-x/no-relative-packages": "error",

      // TypeScript rules
+      "@typescript-eslint/camelcase": "off",
      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-use-before-define": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/no-shadow": ["error"],

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

-  {
-    category: "brand",
-    icon: mdiPalette,
-    header: "Brand",
-  },
-  {
-    category: "components",
-    icon: mdiPuzzle,
-    header: "Components",
-    subsections: [
-      {
-        header: "Form and selectors",
-        pages: [
-          "ha-form",
-          "ha-selector",
-          "ha-select-box",
-          "ha-input",
-          "ha-textarea",
-        ],
-      },
-      {
-        header: "Controls and sliders",
-        pages: [
-          "ha-button",
-          "ha-control-button",
-          "ha-progress-button",
-          "ha-switch",
-          "ha-control-switch",
-          "ha-slider",
-          "ha-control-slider",
-          "ha-control-circular-slider",
-          "ha-control-number-buttons",
-          "ha-control-select",
-          "ha-control-select-menu",
-          "ha-hs-color-picker",
-        ],
-      },
-      {
-        header: "Overlays",
-        pages: [
-          "ha-dialog",
-          "ha-dialogs",
-          "ha-adaptive-dialog",
-          "ha-adaptive-popover",
-          "ha-dropdown",
-          "ha-tooltip",
-        ],
-      },
-      {
-        header: "Lists and disclosure",
-        pages: ["ha-list", "ha-expansion-panel", "ha-faded"],
-      },
-      {
-        header: "Feedback and status",
-        pages: ["ha-alert", "ha-spinner", "ha-tip", "ha-bar", "ha-gauge"],
-      },
-      {
-        header: "Labels and text",
-        pages: ["ha-badge", "ha-label-badge", "ha-chips", "ha-marquee-text"],
-      },
-    ],
-  },
  {
    category: "lovelace",
-    icon: mdiViewDashboard,
    // Label for in the sidebar
    header: "Dashboards",
-    subsections: [
-      {
-        header: "Introduction",
-        pages: ["introduction"],
-      },
-      {
-        header: "Entity cards",
-        pages: [
-          "entities-card",
-          "entity-button-card",
-          "entity-filter-card",
-          "glance-card",
-          "tile-card",
-          "area-card",
-        ],
-      },
-      {
-        header: "Picture cards",
-        pages: [
-          "picture-card",
-          "picture-elements-card",
-          "picture-entity-card",
-          "picture-glance-card",
-        ],
-      },
-      {
-        header: "Domain cards",
-        pages: [
-          "light-card",
-          "thermostat-card",
-          "alarm-panel-card",
-          "gauge-card",
-          "plant-card",
-          "map-card",
-          "media-control-card",
-          "media-player-row",
-        ],
-      },
-      {
-        header: "Layout and utility",
-        pages: [
-          "grid-and-stack-card",
-          "conditional-card",
-          "iframe-card",
-          "markdown-card",
-          "todo-list-card",
-        ],
-      },
-    ],
-  },
-  {
-    category: "more-info",
-    icon: mdiInformationOutline,
-    header: "More Info dialogs",
-    subsections: [
-      {
-        header: "Climate and water",
-        pages: ["climate", "humidifier", "water-heater", "fan"],
-      },
-      {
-        header: "Covers and access",
-        pages: ["cover", "lock", "lawn-mower", "vacuum"],
-      },
-      {
-        header: "Lighting",
-        pages: ["light", "scene"],
-      },
-      {
-        header: "Media",
-        pages: ["media-player"],
-      },
-      {
-        header: "Inputs and values",
-        pages: ["input-number", "input-text", "number", "timer"],
-      },
-      {
-        header: "System",
-        pages: ["update"],
-      },
-    ],
+    // Specify order of pages. Any pages in the category folder but not listed here will
+    // automatically be added after the pages listed here.
+    pages: ["introduction"],
  },
  {
    category: "automation",
-    icon: mdiRobot,
    header: "Automation",
-    subsections: [
-      {
-        header: "Editors",
-        pages: ["editor-trigger", "editor-condition", "editor-action"],
-      },
-      {
-        header: "Descriptions",
-        pages: ["describe-trigger", "describe-condition", "describe-action"],
-      },
-      {
-        header: "Traces",
-        pages: ["trace", "trace-timeline"],
-      },
+    pages: [
+      "editor-trigger",
+      "editor-condition",
+      "editor-action",
+      "trace",
+      "trace-timeline",
    ],
  },
+  {
+    category: "components",
+    header: "Components",
+  },
+  {
+    category: "more-info",
+    header: "More Info dialogs",
+  },
+  {
+    category: "misc",
+    header: "Miscellaneous",
+  },
+  {
+    category: "brand",
+    header: "Brand",
+  },
  {
    category: "user-test",
-    icon: mdiAccountGroup,
    header: "Users",
    pages: ["user-types", "configuration-menu"],
  },
  {
    category: "date-time",
-    icon: mdiCalendarClock,
    header: "Date and Time",
-    subsections: [
-      {
-        header: "Date",
-        pages: ["date"],
-      },
-      {
-        header: "Time",
-        pages: ["time", "time-seconds", "time-weekday"],
-      },
-      {
-        header: "Combined",
-        pages: [
-          "date-time",
-          "date-time-numeric",
-          "date-time-seconds",
-          "date-time-short",
-          "date-time-short-year",
-        ],
-      },
-    ],
  },
  {
-    category: "misc",
-    icon: mdiDotsHorizontal,
-    header: "Miscellaneous",
-    pages: [
-      "entity-state",
-      "ha-markdown",
-      "integration-card",
-      "box-shadow",
-      "util-long-press",
-      "remove-delete-add-create",
-      "editing",
-    ],
+    category: "design.home-assistant.io",
+    header: "About",
  },
 ];
@@ -1,121 +0,0 @@
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import { extractVars } from "../../../src/common/style/derived-css-vars";
-import { animationStyles } from "../../../src/resources/theme/animations.globals";
-import { coreStyles } from "../../../src/resources/theme/core.globals";
-import { colorStyles } from "../../../src/resources/theme/color/color.globals";
-import { coreColorStyles } from "../../../src/resources/theme/color/core.globals";
-import { semanticColorStyles } from "../../../src/resources/theme/color/semantic.globals";
-import { waColorStyles } from "../../../src/resources/theme/color/wa.globals";
-import { mainStyles } from "../../../src/resources/theme/main.globals";
-import { semanticStyles } from "../../../src/resources/theme/semantic.globals";
-import { typographyStyles } from "../../../src/resources/theme/typography.globals";
-import { waMainStyles } from "../../../src/resources/theme/wa.globals";
-import type { HomeAssistant, ThemeSettings } from "../../../src/types";
-
-export const GALLERY_THEME_STORAGE_KEY = "gallery-theme";
-
-export const loadGalleryThemeSettings = (): ThemeSettings => {
-  const stored = localStorage.getItem(GALLERY_THEME_STORAGE_KEY);
-  if (!stored) {
-    return { theme: "default" };
-  }
-
-  try {
-    const parsed = JSON.parse(stored) as unknown;
-    const value =
-      parsed && typeof parsed === "object"
-        ? (parsed as Partial<ThemeSettings>)
-        : {};
-    return {
-      theme: "default",
-      dark: typeof value.dark === "boolean" ? value.dark : undefined,
-      primaryColor:
-        typeof value.primaryColor === "string" ? value.primaryColor : undefined,
-      accentColor:
-        typeof value.accentColor === "string" ? value.accentColor : undefined,
-    };
-  } catch (_err) {
-    return { theme: "default" };
-  }
-};
-
-const LIGHT_THEME_STYLES = [
-  coreStyles,
-  mainStyles,
-  typographyStyles,
-  semanticStyles,
-  coreColorStyles,
-  semanticColorStyles,
-  colorStyles,
-  waColorStyles,
-  waMainStyles,
-  animationStyles,
-];
-
-const LIGHT_THEME_VARIABLES = LIGHT_THEME_STYLES.reduce<Record<string, string>>(
-  (variables, style) => {
-    for (const [key, value] of Object.entries(extractVars(style))) {
-      variables[`--${key}`] = value;
-    }
-    return variables;
-  },
-  {}
-);
-
-const LIGHT_THEME_VARIABLE_KEYS = Object.keys(LIGHT_THEME_VARIABLES);
-const LIGHT_THEME_DEFAULTS_APPLIED = new WeakSet<HTMLElement>();
-
-export const effectiveGalleryDarkMode = (
-  themeSettings: ThemeSettings,
-  systemDark: boolean
-): boolean => themeSettings.dark ?? systemDark;
-
-const galleryThemes = (darkMode: boolean): HomeAssistant["themes"] => ({
-  default_theme: "default",
-  default_dark_theme: null,
-  themes: {},
-  darkMode,
-  theme: "default",
-});
-
-const applyLightThemeDefaults = (element: HTMLElement, lightMode: boolean) => {
-  if (lightMode) {
-    for (const [key, value] of Object.entries(LIGHT_THEME_VARIABLES)) {
-      element.style.setProperty(key, value);
-    }
-    LIGHT_THEME_DEFAULTS_APPLIED.add(element);
-    return;
-  }
-
-  if (!LIGHT_THEME_DEFAULTS_APPLIED.has(element)) {
-    return;
-  }
-
-  for (const key of LIGHT_THEME_VARIABLE_KEYS) {
-    element.style.removeProperty(key);
-  }
-  LIGHT_THEME_DEFAULTS_APPLIED.delete(element);
-};
-
-export const applyFlippedGalleryTheme = (
-  element: HTMLElement,
-  themeSettings: ThemeSettings,
-  systemDark: boolean
-) => {
-  const darkMode = !effectiveGalleryDarkMode(themeSettings, systemDark);
-
-  if (!darkMode) {
-    applyThemesOnElement(element, galleryThemes(false), undefined, {
-      dark: false,
-    });
-    applyLightThemeDefaults(element, true);
-  } else {
-    applyLightThemeDefaults(element, false);
-  }
-
-  applyThemesOnElement(element, galleryThemes(darkMode), "default", {
-    ...themeSettings,
-    dark: darkMode,
-  });
-  element.style.colorScheme = darkMode ? "dark" : "light";
-};
@@ -1,83 +1,25 @@
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import type { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-button";
 import type { HaButton } from "../../../src/components/ha-button";
-import type { ThemeSettings } from "../../../src/types";
-import {
-  applyFlippedGalleryTheme,
-  effectiveGalleryDarkMode,
-  loadGalleryThemeSettings,
-} from "../common/theme";
-
-const mql = matchMedia("(prefers-color-scheme: dark)");

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

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

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

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

-  handleSubmit(ev: Event) {
-    const content = (ev.target as HaButton).closest(".content");
-    if (!content) {
-      return;
-    }
-
-    fireEvent(this, "submitted" as any, {
-      slot: content.classList.contains("current") ? "light" : "dark",
-    });
-  }
-
-  private _themeSettingsChanged = (
-    ev: HASSDomEvent<Partial<ThemeSettings>>
-  ) => {
-    this._themeSettings = {
-      ...this._themeSettings,
-      ...ev.detail,
-      theme: "default",
-    };
-  };
-
-  private _systemDarkChanged = (ev: MediaQueryListEvent) => {
-    this._systemDark = ev.matches;
-  };
-
-  private _applyFlippedTheme() {
-    if (!this._flipped) {
-      return;
-    }
-
-    applyFlippedGalleryTheme(
-      this._flipped,
-      this._themeSettings,
-      this._systemDark
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
    );
  }

+  handleSubmit(ev) {
+    const content = (ev.target as HaButton).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
  static styles = css`
-    :host {
-      display: block;
-      flex: 1;
-      min-block-size: 100%;
-    }
    .row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      inline-size: 100%;
-      min-block-size: 100%;
+      display: flex;
    }
    .content {
-      box-sizing: border-box;
-      min-inline-size: 0;
-      padding: var(--ha-space-8);
+      padding: 50px 0;
      background-color: var(--primary-background-color);
-      color: var(--primary-text-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
    }
    ha-card {
-      width: 100%;
-    }
-    h2 {
-      margin: 0;
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-normal);
+      width: 400px;
    }
    pre {
-      box-sizing: border-box;
-      width: 100%;
-      margin: 0;
+      width: 300px;
+      margin: 0 16px 0;
      overflow: auto;
      color: var(--primary-text-color);
    }
@@ -190,18 +112,27 @@ class DemoBlackWhiteRow extends LitElement {
      flex-direction: row-reverse;
      border-top: none;
    }
-    @media only screen and (max-width: 1000px) {
-      .row {
-        grid-template-columns: 1fr;
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
      }
-      .content {
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
        padding: 16px;
      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
      ha-card {
+        margin: 0 auto;
        width: 100%;
+        max-width: 400px;
      }
      pre {
-        margin: 0;
+        margin: 16px auto;
      }
    }
  `;
@@ -1,5 +1,5 @@
 import { load } from "js-yaml";
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,9 @@ class DemoCard extends LitElement {
    this._size = await this._card?.getCardSize();
  }

-  protected update(_changedProperties: PropertyValues<this>): void {
+  protected update(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
    super.update(_changedProperties);
    this._updateSize();
  }
@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -15,12 +16,17 @@ class DemoCards extends LitElement {

  @state() private _showConfig = false;

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

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

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

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

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

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

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

@customElement("ha-gallery")
 class HaGallery extends LitElement {
-  @state() private _page = this._pageFromLocation();
-
-  @state() private _rtl = localStorage.getItem(RTL_STORAGE_KEY) === "true";
-
-  @state() private _themeSettings = loadGalleryThemeSettings();
-
-  @state() private _systemDark = mql.matches;
+  @state() private _page =
+    document.location.hash.substring(1) ||
+    `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;

  @query("notification-manager")
  private _notifications!: HTMLElementTagNameMap["notification-manager"];

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

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

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

    return html`
-      <ha-drawer
-        .direction=${this._rtl ? "rtl" : "ltr"}
-        .open=${this._drawerOpen}
+      <mwc-drawer
+        hasHeader
+        .open=${!this._narrow}
        .type=${this._narrow ? "modal" : "dismissible"}
      >
-        <ha-sidebar
-          .hass=${this._galleryHass}
-          .narrow=${this._narrow}
-          .route=${{ prefix: "", path: this._page }}
-          .alwaysExpand=${true}
-          sidebar-title="Home Assistant Design"
-          @hass-toggle-menu=${this._toggleDrawer}
-        >
-          ${this._renderSidebarNavigation()} ${this._renderSettingsItem()}
-        </ha-sidebar>
-        <div 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}
+        <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>

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

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

-    this._applyDirection();
-    this._applyTheme();
-
    this.addEventListener("show-notification", (ev) =>
      this._notifications.showDialog({ message: ev.detail.message })
    );
@@ -204,379 +152,38 @@ class HaGallery extends LitElement {
      }
    });

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

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

-  disconnectedCallback() {
-    super.disconnectedCallback();
-    mql.removeEventListener("change", this._systemDarkChanged);
-    window.removeEventListener("hashchange", this._hashChanged);
-  }
-
-  private _hashChanged = () => {
-    this._page = this._pageFromLocation();
-    if (this._narrow) {
-      this._drawerOpen = false;
-    }
-  };
-
  updated(changedProps: PropertyValues) {
    super.updated(changedProps);
-
-    if (changedProps.has("_rtl")) {
-      this._applyDirection();
-    }
-
-    if (changedProps.has("_themeSettings") || changedProps.has("_systemDark")) {
-      this._applyTheme();
-    }
-
    if (!changedProps.has("_page")) {
      return;
    }

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

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

-  private async _scrollSelectedNavigationItemIntoView() {
-    const menuItem = this._selectedNavigationItem;
-
-    if (!menuItem) {
-      return;
-    }
-
-    // Make sure section is expanded before measuring the selected item.
+    // Make sure section is expanded
    if (menuItem.parentElement instanceof HaExpansionPanel) {
      menuItem.parentElement.expanded = true;
-      await menuItem.parentElement.updateComplete;
-    }
-
-    const scrollable = this._sidebar?.shadowRoot?.querySelector<HTMLElement>(
-      "ha-list-nav.before-spacer"
-    );
-
-    if (!scrollable) {
-      return;
-    }
-
-    requestAnimationFrame(() => {
-      const itemRect = menuItem.getBoundingClientRect();
-      const scrollableRect = scrollable.getBoundingClientRect();
-      const targetScrollTop =
-        scrollable.scrollTop +
-        itemRect.top -
-        scrollableRect.top -
-        (scrollableRect.height - itemRect.height) / 2;
-
-      scrollable.scrollTo({
-        top: Math.min(
-          Math.max(0, targetScrollTop),
-          scrollable.scrollHeight - scrollable.clientHeight
-        ),
-        left: 0,
-      });
-      scrollable.scrollLeft = 0;
-    });
-  }
-
-  private _renderSidebarNavigation() {
-    const sidebar: unknown[] = [];
-
-    for (const group of GALLERY_SIDEBAR) {
-      const expanded = groupPages(group).some(
-        (page) => this._page === `${group.category}/${page}`
-      );
-
-      const content = group.subsections
-        ? group.subsections.map((subsection) =>
-            this._renderSidebarSubsection(group, subsection)
-          )
-        : this._renderPageLinks(group, group.pages ?? []);
-
-      sidebar.push(
-        group.header
-          ? html`
-              <ha-expansion-panel
-                slot="main-navigation"
-                class="gallery-sidebar-section"
-                .header=${group.header}
-                ?expanded=${expanded}
-              >
-                ${group.icon
-                  ? html`<ha-svg-icon
-                      slot="leading-icon"
-                      class="gallery-sidebar-icon"
-                      .path=${group.icon}
-                    ></ha-svg-icon>`
-                  : nothing}
-                ${content}
-              </ha-expansion-panel>
-            `
-          : content
-      );
-    }
-
-    return sidebar;
-  }
-
-  private _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;
+  private _menuTapped() {
+    this._drawer.open = !this._drawer.open;
  }

  static styles = [
@@ -586,150 +193,56 @@ 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);
      }

-      .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 {
+        padding: 4px;
      }

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

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

-      .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 {
+      div[slot="appContent"] {
        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 {
-        display: block;
-        margin: 0 var(--ha-space-4) var(--ha-space-4);
+        margin: 16px;
      }

      .page-footer {
-        display: flex;
-        border-radius: var(--ha-border-radius-lg);
-        background-color: var(--primary-background-color);
-      }
-
-      .edit-docs {
-        flex: 1;
        text-align: center;
        margin: 16px;
        padding: 16px;
+        border-radius: var(--ha-border-radius-lg);
+        background-color: var(--primary-background-color);
      }

      .page-footer div {
@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -172,7 +171,7 @@ export class DemoAutomationDescribeAction extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -97,7 +96,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -120,7 +119,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */

-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
    `;
  }

-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aidan Timson	af0f4160df	Reduce top position	2026-04-13 11:19:29 +01:00
Aidan Timson	5718cde64e	Add floating support for badges	2026-04-13 11:19:15 +01:00
@@ -1 +1 @@
 .16.0
 .14.1