Remove option to group

Categories data table
2026-06-12 11:22:58 +00:00 · 2026-06-02 14:56:37 +01:00 · 2026-06-02 14:52:55 +01:00
456 changed files with 8293 additions and 25639 deletions
@@ -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
@@ -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();
-            }
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -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 }}
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -77,22 +77,9 @@ 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
@@ -58,4 +58,3 @@ test/coverage/
 .claude
 .cursor
 .opencode
-test/benchmarks/results/
@@ -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
@@ -13,4 +13,4 @@ nodeLinker: node-modules

 npmMinimalAgeGate: 3d

-yarnPath: .yarn/releases/yarn-4.16.0.cjs
+yarnPath: .yarn/releases/yarn-4.15.0.cjs
@@ -29,7 +29,7 @@ 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",
+    version: "5.6.0",
    licensePath: path.resolve(
      paths.root_dir,
      "node_modules/type-fest/license-mit"
@@ -33,9 +33,7 @@ const isWsl =
 *   compiler: import("@rspack/core").Compiler,
 *   contentBase: string,
 *   port: number,
- *   listenHost?: string,
- *   open?: boolean,
- *   logUrlAfterFirstBuild?: boolean,
+ *   listenHost?: string
 * }}
 */
 const runDevServer = async ({
@@ -43,31 +41,16 @@ const runDevServer = async ({
  contentBase,
  port,
  listenHost = undefined,
-  open = true,
-  logUrlAfterFirstBuild = false,
  proxy = undefined,
 }) => {
  if (listenHost === undefined) {
    // For dev container, we need to listen on all hosts
    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
  }
-  const url = `http://localhost:${port}`;
-  let loggedUrl = false;
-  if (logUrlAfterFirstBuild) {
-    compiler.hooks.done.tap("log-dev-server-url", () => {
-      if (loggedUrl) {
-        return;
-      }
-      loggedUrl = true;
-      setTimeout(() => {
-        log("[rspack-dev-server]", `Project is running at ${url}`);
-      }, 0);
-    });
-  }
  const server = new RspackDevServer(
    {
      hot: false,
-      open,
+      open: true,
      host: listenHost,
      port,
      static: {
@@ -87,9 +70,7 @@ const runDevServer = async ({

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

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

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

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

-const rspackConfigPath = fileURLToPath(
-  new URL("./rspack.config.cjs", import.meta.url)
-);
-
 export default tseslint.config(
  js.configs.recommended,
  eslintConfigPrettier,
@@ -56,7 +50,7 @@ export default tseslint.config(
    settings: {
      "import-x/resolver": {
        webpack: {
-          config: rspackConfigPath,
+          config: "./rspack.config.cjs",
        },
      },
    },
@@ -1,112 +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`.
-
-## 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,50 +1,20 @@
-import {
-  mdiAccountGroup,
-  mdiCalendarClock,
-  mdiDotsHorizontal,
-  mdiHome,
-  mdiInformationOutline,
-  mdiPalette,
-  mdiPuzzle,
-  mdiRobot,
-  mdiViewDashboard,
-} from "@mdi/js";
-
 export default [
  {
    // This section has no header and so all page links are shown directly in the sidebar
    category: "concepts",
-    icon: mdiHome,
    pages: ["home"],
  },

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

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

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

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

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

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

+  handleSubmit(ev) {
+    const content = (ev.target as HaButton).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
  static styles = css`
-    :host {
-      display: block;
-      flex: 1;
-      min-block-size: 100%;
-    }
    .row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      inline-size: 100%;
-      min-block-size: 100%;
+      display: flex;
    }
    .content {
-      box-sizing: border-box;
-      min-inline-size: 0;
-      padding: var(--ha-space-8);
+      padding: 50px 0;
      background-color: var(--primary-background-color);
-      color: var(--primary-text-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
    }
    ha-card {
-      width: 100%;
-    }
-    h2 {
-      margin: 0;
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-normal);
+      width: 400px;
    }
    pre {
-      box-sizing: border-box;
-      width: 100%;
-      margin: 0;
+      width: 300px;
+      margin: 0 16px 0;
      overflow: auto;
      color: var(--primary-text-color);
    }
@@ -190,18 +112,27 @@ class DemoBlackWhiteRow extends LitElement {
      flex-direction: row-reverse;
      border-top: none;
    }
-    @media only screen and (max-width: 1000px) {
-      .row {
-        grid-template-columns: 1fr;
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
      }
-      .content {
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
        padding: 16px;
      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
      ha-card {
+        margin: 0 auto;
        width: 100%;
+        max-width: 400px;
      }
      pre {
-        margin: 0;
+        margin: 16px auto;
      }
    }
  `;
@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
@@ -15,12 +16,17 @@ class DemoCards extends LitElement {

  @state() private _showConfig = false;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    this._applyDirection();
-    this._applyTheme();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  protected render(): TemplateResult {
    return html`
-      <demo-theme-comparison>
-        ${THEME_COMPARISON_PANELS.map(
-          ({ slot }) => html`
-            <div slot=${slot} class="panel-content">
-              <ha-card>
-                <div class="card-content">
-                  <h3>Basic</h3>
-                  <div class="row">
-                    <ha-input label="Default"></ha-input>
-                    <ha-input label="With value" value="Hello"></ha-input>
-                    <ha-input
-                      label="With placeholder"
-                      placeholder="Type here..."
-                    ></ha-input>
-                  </div>
-
-                  <h3>Input types</h3>
-                  <div class="row">
-                    <ha-input label="Text" type="text" value="Text"></ha-input>
-                    <ha-input
-                      label="Number"
-                      type="number"
-                      value="42"
-                    ></ha-input>
-                    <ha-input
-                      label="Email"
-                      type="email"
-                      placeholder="you@example.com"
-                    ></ha-input>
-                  </div>
-                  <div class="row">
-                    <ha-input
-                      label="Password"
-                      type="password"
-                      value="secret"
-                      password-toggle
-                    ></ha-input>
-                    <ha-input label="URL" type="url" placeholder="https://...">
-                    </ha-input>
-                    <ha-input label="Date" type="date"></ha-input>
-                  </div>
-
-                  <h3>States</h3>
-                  <div class="row">
-                    <ha-input
-                      label="Disabled"
-                      disabled
-                      value="Disabled"
-                    ></ha-input>
-                    <ha-input
-                      label="Readonly"
-                      readonly
-                      value="Readonly"
-                    ></ha-input>
-                    <ha-input label="Required" required></ha-input>
-                  </div>
-                  <div class="row">
-                    <ha-input
-                      label="Invalid"
-                      invalid
-                      validation-message="This field is required"
-                      value=""
-                    ></ha-input>
-                    <ha-input
-                      label="With hint"
-                      hint="This is a hint"
-                    ></ha-input>
-                    <ha-input
-                      label="With clear"
-                      with-clear
-                      value="Clear me"
-                    ></ha-input>
-                  </div>
-
-                  <h3>With slots</h3>
-                  <div class="row">
-                    <ha-input label="With prefix">
-                      <span slot="start">$</span>
-                    </ha-input>
-                    <ha-input label="With suffix">
-                      <span slot="end">kg</span>
-                    </ha-input>
-                    <ha-input label="With icon">
-                      <ha-svg-icon
-                        .path=${mdiMagnify}
-                        slot="start"
-                      ></ha-svg-icon>
-                    </ha-input>
-                  </div>
-
-                  <h3>Appearance: outlined</h3>
-                  <div class="row">
-                    <ha-input
-                      appearance="outlined"
-                      label="Outlined"
-                      value="Hello"
-                    ></ha-input>
-                    <ha-input
-                      appearance="outlined"
-                      label="Outlined disabled"
-                      disabled
-                      value="Disabled"
-                    ></ha-input>
-                    <ha-input
-                      appearance="outlined"
-                      label="Outlined invalid"
-                      invalid
-                      validation-message="Required"
-                    ></ha-input>
-                  </div>
-                  <div class="row">
-                    <ha-input
-                      appearance="outlined"
-                      placeholder="Placeholder only"
-                    ></ha-input>
-                  </div>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-input in ${mode}">
+              <div class="card-content">
+                <h3>Basic</h3>
+                <div class="row">
+                  <ha-input label="Default"></ha-input>
+                  <ha-input label="With value" value="Hello"></ha-input>
+                  <ha-input
+                    label="With placeholder"
+                    placeholder="Type here..."
+                  ></ha-input>
                </div>
-              </ha-card>

-              <ha-card header="Derivatives">
-                <div class="card-content">
-                  <h3>ha-input-search</h3>
-                  <ha-input-search label="Search label"></ha-input-search>
-                  <ha-input-search appearance="outlined"></ha-input-search>
-
-                  <h3>ha-input-copy</h3>
-                  <ha-input-copy
-                    value="my-api-token-123"
-                    masked-value="••••••••••••••••••"
-                    masked-toggle
-                  ></ha-input-copy>
-
-                  <h3>ha-input-multi</h3>
-                  <ha-input-multi
-                    label="URL"
-                    add-label="Add URL"
-                    .value=${["https://example.com"]}
-                  ></ha-input-multi>
+                <h3>Input types</h3>
+                <div class="row">
+                  <ha-input label="Text" type="text" value="Text"></ha-input>
+                  <ha-input label="Number" type="number" value="42"></ha-input>
+                  <ha-input
+                    label="Email"
+                    type="email"
+                    placeholder="you@example.com"
+                  ></ha-input>
                </div>
-              </ha-card>
-            </div>
-          `
-        )}
-      </demo-theme-comparison>
+                <div class="row">
+                  <ha-input
+                    label="Password"
+                    type="password"
+                    value="secret"
+                    password-toggle
+                  ></ha-input>
+                  <ha-input label="URL" type="url" placeholder="https://...">
+                  </ha-input>
+                  <ha-input label="Date" type="date"></ha-input>
+                </div>
+
+                <h3>States</h3>
+                <div class="row">
+                  <ha-input
+                    label="Disabled"
+                    disabled
+                    value="Disabled"
+                  ></ha-input>
+                  <ha-input
+                    label="Readonly"
+                    readonly
+                    value="Readonly"
+                  ></ha-input>
+                  <ha-input label="Required" required></ha-input>
+                </div>
+                <div class="row">
+                  <ha-input
+                    label="Invalid"
+                    invalid
+                    validation-message="This field is required"
+                    value=""
+                  ></ha-input>
+                  <ha-input label="With hint" hint="This is a hint"></ha-input>
+                  <ha-input
+                    label="With clear"
+                    with-clear
+                    value="Clear me"
+                  ></ha-input>
+                </div>
+
+                <h3>With slots</h3>
+                <div class="row">
+                  <ha-input label="With prefix">
+                    <span slot="start">$</span>
+                  </ha-input>
+                  <ha-input label="With suffix">
+                    <span slot="end">kg</span>
+                  </ha-input>
+                  <ha-input label="With icon">
+                    <ha-svg-icon .path=${mdiMagnify} slot="start"></ha-svg-icon>
+                  </ha-input>
+                </div>
+
+                <h3>Appearance: outlined</h3>
+                <div class="row">
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined"
+                    value="Hello"
+                  ></ha-input>
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined disabled"
+                    disabled
+                    value="Disabled"
+                  ></ha-input>
+                  <ha-input
+                    appearance="outlined"
+                    label="Outlined invalid"
+                    invalid
+                    validation-message="Required"
+                  ></ha-input>
+                </div>
+                <div class="row">
+                  <ha-input
+                    appearance="outlined"
+                    placeholder="Placeholder only"
+                  ></ha-input>
+                </div>
+              </div>
+            </ha-card>
+
+            <ha-card header="Derivatives in ${mode}">
+              <div class="card-content">
+                <h3>ha-input-search</h3>
+                <ha-input-search label="Search label"></ha-input-search>
+                <ha-input-search appearance="outlined"></ha-input-search>
+
+                <h3>ha-input-copy</h3>
+                <ha-input-copy
+                  value="my-api-token-123"
+                  masked-value="••••••••••••••••••"
+                  masked-toggle
+                ></ha-input-copy>
+
+                <h3>ha-input-multi</h3>
+                <ha-input-multi
+                  label="URL"
+                  add-label="Add URL"
+                  .value=${["https://example.com"]}
+                ></ha-input-multi>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
    `;
  }

+  firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
  static styles = css`
    :host {
-      display: block;
-    }
-    .panel-content {
      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-6);
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
    }
    ha-card {
-      margin: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -237,11 +224,10 @@ export class DemoHaInput extends LitElement {
    }
    .row {
      display: flex;
-      flex-wrap: wrap;
      gap: var(--ha-space-4);
    }
    .row > * {
-      flex: 1 1 180px;
+      flex: 1;
    }
  `;
 }
@@ -62,11 +62,10 @@ host reflects `aria-multiselectable`.

 **Events**

- `ha-list-item-selected` — an option was selected. Detail is the option's
-  index (`number`). In single mode this is the only selection event; in multi
-  mode it fires for each option added to the selection.
- `ha-list-item-deselected` — an option was deselected (multi mode only). Detail
-  is the option's index (`number`).
+- `ha-list-selected` — selection changed. Detail
+  `{ index: number | Set<number>, diff: { added: Set<number>, removed: Set<number> } }`.
+  `index` is a `number` in single mode (`-1` when nothing selected) and a
+  `Set<number>` in multi mode.

 **Methods / getters**

@@ -20,6 +20,7 @@ import "../../../../src/components/item/ha-list-item-option";
 import "../../../../src/components/list/ha-list-base";
 import "../../../../src/components/list/ha-list-nav";
 import "../../../../src/components/list/ha-list-selectable";
+import type { HaListSelectedDetail } from "../../../../src/components/list/types";

 type Appearance = "line" | "checkbox";
 type Position = "start" | "end";
@@ -184,7 +185,7 @@ export class DemoHaList extends LitElement {
      <ha-card header="Single select, appearance=line">
        <ha-list-selectable
          aria-label="Single select"
-          @ha-list-item-selected=${this._onSingle}
+          @ha-list-selected=${this._onSingle}
        >
          ${this._options.map(
            (o, i) => html`
@@ -204,8 +205,7 @@ export class DemoHaList extends LitElement {
        <ha-list-selectable
          multi
          aria-label="Multi select line"
-          @ha-list-item-selected=${this._onMultiLineSelected}
-          @ha-list-item-deselected=${this._onMultiLineDeselected}
+          @ha-list-selected=${this._onMultiLine}
        >
          ${this._options.map(
            (o, i) => html`
@@ -227,8 +227,7 @@ export class DemoHaList extends LitElement {
        <ha-list-selectable
          multi
          aria-label="Multi checkbox start"
-          @ha-list-item-selected=${this._onMultiCheckStartSelected}
-          @ha-list-item-deselected=${this._onMultiCheckStartDeselected}
+          @ha-list-selected=${this._onMultiCheckStart}
        >
          ${this._options.map(
            (o, i) => html`
@@ -254,8 +253,7 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
        <ha-list-selectable
          multi
          aria-label="Multi checkbox end"
-          @ha-list-item-selected=${this._onMultiCheckEndSelected}
-          @ha-list-item-deselected=${this._onMultiCheckEndDeselected}
+          @ha-list-selected=${this._onMultiCheckEnd}
        >
          ${this._options.map(
            (o, i) => html`
@@ -349,58 +347,20 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
    this._buttonClicks++;
  };

-  private _withIndex(
-    value: number | Set<number>,
-    index: number,
-    selected: boolean
-  ): Set<number> {
-    const next = new Set(value instanceof Set ? value : []);
-    if (selected) {
-      next.add(index);
-    } else {
-      next.delete(index);
-    }
-    return next;
-  }
-
-  private _onSingle = (ev: CustomEvent<number>) => {
-    this._single = ev.detail;
+  private _onSingle = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._single = ev.detail.index;
  };

-  private _onMultiLineSelected = (ev: CustomEvent<number>) => {
-    this._multiLine = this._withIndex(this._multiLine, ev.detail, true);
+  private _onMultiLine = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiLine = ev.detail.index;
  };

-  private _onMultiLineDeselected = (ev: CustomEvent<number>) => {
-    this._multiLine = this._withIndex(this._multiLine, ev.detail, false);
+  private _onMultiCheckStart = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiCheckStart = ev.detail.index;
  };

-  private _onMultiCheckStartSelected = (ev: CustomEvent<number>) => {
-    this._multiCheckStart = this._withIndex(
-      this._multiCheckStart,
-      ev.detail,
-      true
-    );
-  };
-
-  private _onMultiCheckStartDeselected = (ev: CustomEvent<number>) => {
-    this._multiCheckStart = this._withIndex(
-      this._multiCheckStart,
-      ev.detail,
-      false
-    );
-  };
-
-  private _onMultiCheckEndSelected = (ev: CustomEvent<number>) => {
-    this._multiCheckEnd = this._withIndex(this._multiCheckEnd, ev.detail, true);
-  };
-
-  private _onMultiCheckEndDeselected = (ev: CustomEvent<number>) => {
-    this._multiCheckEnd = this._withIndex(
-      this._multiCheckEnd,
-      ev.detail,
-      false
-    );
+  private _onMultiCheckEnd = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiCheckEnd = ev.detail.index;
  };

  static styles = css`
@@ -1,21 +1,20 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
-import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";

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

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

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

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

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

  static styles = css`
    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
    }
    .button {
      padding: unset;
    }
    ha-card {
-      margin: 0;
-      width: 100%;
+      margin: 24px auto;
    }
    .card-content {
      display: flex;
@@ -17,13 +17,13 @@ subtitle: A slider component for selecting a value from a range.
 ### Example Usage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  static styles = css`
    :host {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .dark,
+    .light {
      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
    }
    ha-tip {
      margin-bottom: 14px;
    }
    ha-card {
-      margin: 0;
-      width: 100%;
+      margin: 24px auto;
    }
  `;
 }
@@ -10,7 +10,7 @@ All pages are stored in [the pages folder][pages-folder] on GitHub. Pages are gr

 ## Development

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

 ## Creating a page

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

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

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

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

    .grid {
@@ -13,28 +13,6 @@ export interface NetworkInfo {
  supervisor_internet: boolean;
 }

-interface SupervisorJob {
-  name: string;
-  reference: string | null;
-  uuid: string;
-  progress: number; // float, 0–100
-  stage: string | null;
-  done: boolean;
-  errors: {
-    type: string;
-    message: string;
-    stage: string | null;
-  }[];
-  created: string; // ISO datetime string
-  extra: Record<string, unknown> | null;
-  child_jobs: SupervisorJob[];
-}
-
-export interface SupervisorJobInfo {
-  ignore_conditions: string[];
-  jobs: SupervisorJob[];
-}
-
 export const ALTERNATIVE_DNS_SERVERS: {
  ipv4: string[];
  ipv6: string[];
@@ -79,15 +57,6 @@ export async function getSupervisorNetworkInfo(): Promise<NetworkInfo> {
  return responseData?.data;
 }

-export async function getSupervisorJobsInfo(): Promise<
-  HassioResponse<SupervisorJobInfo>
-> {
-  const responseData = await handleFetchPromise<
-    HassioResponse<SupervisorJobInfo>
-  >(fetch("/supervisor-api/jobs/info"));
-  return responseData;
-}
-
 export const setSupervisorNetworkDns = async (
  dnsServerIndex: number,
  primaryInterface: string
@@ -2,9 +2,9 @@ import { mdiOpenInNew } from "@mdi/js";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { extractSearchParam } from "../../src/common/url/search-params";
-import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-alert";
 import "../../src/components/ha-button";
+import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";
@@ -15,7 +15,6 @@ import { haStyle } from "../../src/resources/styles";
 import "./components/landing-page-logs";
 import "./components/landing-page-network";
 import {
-  getSupervisorJobsInfo,
  getSupervisorNetworkInfo,
  pingSupervisor,
  type NetworkInfo,
@@ -25,7 +24,6 @@ import { LandingPageBaseElement } from "./landing-page-base-element";
 export const ASSUME_CORE_START_SECONDS = 60;
 const SCHEDULE_CORE_CHECK_SECONDS = 1;
 const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
-const SCHEDULE_FETCH_JOBS_INFO_SECONDS = 2;

@customElement("ha-landing-page")
 class HaLandingPage extends LandingPageBaseElement {
@@ -41,8 +39,6 @@ class HaLandingPage extends LandingPageBaseElement {

  @state() private _coreCheckActive = false;

-  @state() private _progress = -1;
-
  private _mobileApp =
    extractSearchParam("redirect_uri") === "homeassistant://auth-callback";

@@ -64,14 +60,7 @@ class HaLandingPage extends LandingPageBaseElement {
          ${!networkIssue && !this._supervisorError
            ? html`
                <p>${this.localize("subheader")}</p>
-                <ha-progress-bar
-                  .indeterminate=${this._progress <= 0}
-                  .value=${this._progress > 0 ? this._progress : undefined}
-                  .loading=${this._progress >= 0}
-                  >${this._progress > 0
-                    ? `${Math.round(this._progress)}%`
-                    : nothing}</ha-progress-bar
-                >
+                <ha-progress-bar indeterminate></ha-progress-bar>
              `
            : nothing}
          ${networkIssue || this._networkInfoError
@@ -137,7 +126,6 @@ class HaLandingPage extends LandingPageBaseElement {
    import("../../src/components/ha-language-picker");

    this._fetchSupervisorInfo(true);
-    this._fetchSupervisorJobsInfo();
  }

  private _scheduleFetchSupervisorInfo() {
@@ -150,13 +138,6 @@ class HaLandingPage extends LandingPageBaseElement {
    );
  }

-  private _scheduleFetchSupervisorJobsInfo() {
-    setTimeout(
-      () => this._fetchSupervisorJobsInfo(),
-      SCHEDULE_FETCH_JOBS_INFO_SECONDS * 1000
-    );
-  }
-
  private _scheduleTurnOffCoreCheck() {
    setTimeout(() => {
      this._coreCheckActive = false;
@@ -184,7 +165,7 @@ class HaLandingPage extends LandingPageBaseElement {
      // assume supervisor update if ping fails -> don't show an error
      if (!this._coreCheckActive && err.message !== "ping-failed") {
        // eslint-disable-next-line no-console
-        console.error("Failed to fetch supervisor info", err);
+        console.error(err);
        this._networkInfoError = true;
      }
    }
@@ -194,33 +175,6 @@ class HaLandingPage extends LandingPageBaseElement {
    }
  }

-  private async _fetchSupervisorJobsInfo() {
-    try {
-      const jobsInfo = await getSupervisorJobsInfo();
-      const coreInstallJob =
-        jobsInfo.result === "ok"
-          ? jobsInfo.data.jobs.find(
-              (job) => job.name === "home_assistant_core_install"
-            )
-          : undefined;
-      if (coreInstallJob) {
-        this._progress = coreInstallJob.progress;
-      } else {
-        this._progress = -1;
-      }
-    } catch (err: any) {
-      await this._checkCoreAvailability();
-
-      if (!this._coreCheckActive) {
-        this._progress = -1;
-        // eslint-disable-next-line no-console
-        console.error("Failed to fetch supervisor jobs info", err);
-      }
-    }
-
-    this._scheduleFetchSupervisorJobsInfo();
-  }
-
  private async _checkCoreAvailability() {
    try {
      const response = await fetch("/manifest.json");
@@ -268,27 +222,21 @@ class HaLandingPage extends LandingPageBaseElement {
        flex-direction: column;
        gap: var(--ha-space-4);
      }
+      ha-language-picker {
+        min-width: 200px;
+      }
      ha-alert p {
        text-align: unset;
      }
      .footer ha-svg-icon {
        --mdc-icon-size: var(--ha-space-5);
      }
-      ha-language-picker {
-        margin-inline-start: calc(-1 * var(--ha-space-4));
-      }
-      ha-button {
-        margin-inline-end: calc(-1 * var(--ha-space-2));
-      }
      ha-fade-in {
        min-height: calc(100vh - 64px - 88px);
        display: flex;
        justify-content: center;
        align-items: center;
      }
-      ha-progress-bar {
-        --ha-progress-bar-track-height: 20px;
-      }
    `,
  ];
 }
@@ -21,7 +21,6 @@
    "prepack": "pinst --disable",
    "postpack": "pinst --enable",
    "test": "vitest run --config test/vitest.config.ts",
-    "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
  },
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@@ -30,7 +29,7 @@
  "dependencies": {
    "@babel/runtime": "7.29.7",
    "@braintree/sanitize-url": "7.1.2",
-    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/autocomplete": "6.20.2",
    "@codemirror/commands": "6.10.3",
    "@codemirror/lang-jinja": "6.0.1",
    "@codemirror/lang-yaml": "6.1.3",
@@ -41,15 +40,15 @@
    "@codemirror/view": "6.43.0",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.8",
-    "@formatjs/intl-displaynames": "7.3.10",
-    "@formatjs/intl-durationformat": "0.10.14",
-    "@formatjs/intl-getcanonicallocales": "3.2.10",
-    "@formatjs/intl-listformat": "8.3.10",
-    "@formatjs/intl-locale": "5.3.9",
-    "@formatjs/intl-numberformat": "9.3.11",
-    "@formatjs/intl-pluralrules": "6.3.10",
-    "@formatjs/intl-relativetimeformat": "12.3.10",
+    "@formatjs/intl-datetimeformat": "7.4.7",
+    "@formatjs/intl-displaynames": "7.3.9",
+    "@formatjs/intl-durationformat": "0.10.13",
+    "@formatjs/intl-getcanonicallocales": "3.2.9",
+    "@formatjs/intl-listformat": "8.3.9",
+    "@formatjs/intl-locale": "5.3.8",
+    "@formatjs/intl-numberformat": "9.3.10",
+    "@formatjs/intl-pluralrules": "6.3.9",
+    "@formatjs/intl-relativetimeformat": "12.3.9",
    "@fullcalendar/core": "6.1.20",
    "@fullcalendar/daygrid": "6.1.20",
    "@fullcalendar/interaction": "6.1.20",
@@ -71,12 +70,12 @@
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@swc/helpers": "0.5.23",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.1.3",
-    "@tsparticles/preset-links": "4.1.3",
+    "@tsparticles/engine": "4.1.0",
+    "@tsparticles/preset-links": "4.1.0",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.0",
+    "barcode-detector": "3.1.3",
    "cally": "0.9.2",
    "color-name": "2.1.0",
    "comlink": "4.4.2",
@@ -89,21 +88,21 @@
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.4.2",
+    "fuse.js": "7.3.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "7.0.0",
    "hls.js": "1.6.16",
    "home-assistant-js-websocket": "9.6.0",
-    "idb-keyval": "6.2.5",
-    "intl-messageformat": "11.2.8",
-    "js-yaml": "4.2.0",
+    "idb-keyval": "6.2.4",
+    "intl-messageformat": "11.2.7",
+    "js-yaml": "4.1.1",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
    "leaflet.markercluster": "1.5.3",
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.5",
+    "marked": "18.0.4",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -115,7 +114,7 @@
    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
-    "tinykeys": "patch:tinykeys@npm%3A4.0.0#~/.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch",
+    "tinykeys": "4.0.0",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.1",
    "workbox-core": "7.4.1",
@@ -138,7 +137,7 @@
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
    "@rsdoctor/rspack-plugin": "1.5.12",
-    "@rspack/core": "2.0.6",
+    "@rspack/core": "2.0.5",
    "@rspack/dev-server": "2.0.3",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -154,7 +153,7 @@
    "@types/qrcode": "1.5.6",
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
-    "@vitest/coverage-v8": "4.1.8",
+    "@vitest/coverage-v8": "4.1.7",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
@@ -181,23 +180,23 @@
    "jsdom": "29.1.1",
    "jszip": "3.10.1",
    "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.7",
+    "lint-staged": "17.0.6",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.18.1",
    "map-stream": "0.0.7",
    "pinst": "3.0.0",
    "prettier": "3.8.3",
-    "rspack-manifest-plugin": "5.2.2",
+    "rspack-manifest-plugin": "5.2.1",
    "serve": "14.2.6",
    "sinon": "22.0.0",
-    "tar": "7.5.16",
+    "tar": "7.5.15",
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.60.1",
+    "typescript-eslint": "8.60.0",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.8",
+    "vitest": "4.1.7",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -213,7 +212,7 @@
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
    "glob@^10.2.2": "^10.5.0"
  },
-  "packageManager": "yarn@4.16.0",
+  "packageManager": "yarn@4.15.0",
  "volta": {
    "node": "24.16.0"
  }
@@ -4,7 +4,8 @@ import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";

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

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

+export const isNotLoadedIntegration = (
+  hass: HomeAssistant,
+  page: PageNavigation
+) =>
+  !page.not_component ||
+  !ensureArray(page.not_component).some((integration) =>
+    isComponentLoaded(hass.config, integration)
+  );
+
 export const isCore = (page: PageNavigation) => page.core;
@@ -1,59 +0,0 @@
-import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import { computeStateDomain } from "./compute_state_domain";
-
-export interface EntityLocation {
-  latitude: number;
-  longitude: number;
-  gpsAccuracy?: number;
-}
-
-const findFirstActiveZone = (
-  inZones: readonly string[],
-  states: HassEntities
-): HassEntity | undefined => {
-  for (const zoneId of inZones) {
-    const zone = states[zoneId];
-    if (
-      zone &&
-      !zone.attributes.passive &&
-      typeof zone.attributes.latitude === "number" &&
-      typeof zone.attributes.longitude === "number"
-    ) {
-      return zone;
-    }
-  }
-  return undefined;
-};
-
-export const getEntityLocation = (
-  stateObj: HassEntity,
-  states: HassEntities
-): EntityLocation | undefined => {
-  const {
-    latitude,
-    longitude,
-    gps_accuracy: gpsAccuracy,
-  } = stateObj.attributes;
-  if (typeof latitude === "number" && typeof longitude === "number") {
-    return { latitude, longitude, gpsAccuracy };
-  }
-
-  if (computeStateDomain(stateObj) !== "person") {
-    return undefined;
-  }
-
-  const inZones = stateObj.attributes.in_zones;
-  if (!Array.isArray(inZones) || inZones.length === 0) {
-    return undefined;
-  }
-
-  const zone = findFirstActiveZone(inZones, states);
-  if (!zone) {
-    return undefined;
-  }
-
-  return {
-    latitude: zone.attributes.latitude,
-    longitude: zone.attributes.longitude,
-  };
-};
@@ -1,58 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import {
-  createQueryString,
-  decodeQueryParams,
-  queryParamsFromServiceTarget,
-  serviceTargetFromQueryParams,
-  type QueryParamConfig,
-  type QueryParamValues,
-  type SearchParamsSource,
-} from "./query-params";
-
-export type HistoryLogbookTargetParamKey =
-  | "entity_id"
-  | "label_id"
-  | "floor_id"
-  | "area_id"
-  | "device_id";
-
-export const historyLogbookTargetParamKeys: readonly HistoryLogbookTargetParamKey[] =
-  ["entity_id", "label_id", "floor_id", "area_id", "device_id"];
-
-export const historyLogbookQueryParamConfig = {
-  list: historyLogbookTargetParamKeys,
-  date: ["start_date", "end_date"],
-  boolean: [{ key: "back", trueValue: "1" }],
-} as const satisfies QueryParamConfig;
-
-export type HistoryLogbookQueryParams = QueryParamValues<
-  typeof historyLogbookQueryParamConfig
->;
-
-export const decodeHistoryLogbookQueryParams = (
-  searchParams: SearchParamsSource
-): HistoryLogbookQueryParams =>
-  decodeQueryParams(searchParams, historyLogbookQueryParamConfig);
-
-export const historyLogbookTargetFromQueryParams = (
-  params: HistoryLogbookQueryParams
-): HassServiceTarget | undefined =>
-  serviceTargetFromQueryParams(params, historyLogbookTargetParamKeys);
-
-export const createHistoryLogbookUrl = (
-  path: string,
-  target: HassServiceTarget,
-  startDate: Date,
-  endDate: Date
-): string => {
-  const queryString = createQueryString(
-    {
-      ...queryParamsFromServiceTarget(target, historyLogbookTargetParamKeys),
-      start_date: startDate,
-      end_date: endDate,
-    },
-    historyLogbookQueryParamConfig
-  );
-
-  return queryString ? `${path}?${queryString}` : path;
-};
@@ -1,172 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import { ensureArray } from "../array/ensure-array";
-
-export type SearchParamsSource =
-  | URLSearchParams
-  | Record<string, string>
-  | string;
-
-export interface QueryParamConfig {
-  list?: readonly string[];
-  date?: readonly string[];
-  boolean?: readonly {
-    key: string;
-    trueValue: string;
-  }[];
-  string?: readonly string[];
-}
-
-type ListKeyOf<C extends QueryParamConfig> = C extends {
-  list: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-type DateKeyOf<C extends QueryParamConfig> = C extends {
-  date: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-type BooleanKeyOf<C extends QueryParamConfig> = C extends {
-  boolean: readonly { key: infer K extends string }[];
-}
-  ? K
-  : never;
-
-type StringKeyOf<C extends QueryParamConfig> = C extends {
-  string: readonly (infer K extends string)[];
-}
-  ? K
-  : never;
-
-export type QueryParamValues<C extends QueryParamConfig> = Partial<
-  Record<ListKeyOf<C>, string[]> &
-    Record<DateKeyOf<C>, Date> &
-    Record<BooleanKeyOf<C>, boolean> &
-    Record<StringKeyOf<C>, string>
->;
-
-type QueryParamValue = string[] | Date | boolean | string;
-
-export type ServiceTargetQueryParams<
-  Key extends keyof HassServiceTarget & string,
-> = Partial<Record<Key, string[]>>;
-
-const getSearchParam = (
-  searchParams: SearchParamsSource,
-  key: string
-): string | null => {
-  if (typeof searchParams === "string") {
-    return new URLSearchParams(searchParams).get(key);
-  }
-  if (searchParams instanceof URLSearchParams) {
-    return searchParams.get(key);
-  }
-  return searchParams[key] ?? null;
-};
-
-export function decodeQueryParams<C extends QueryParamConfig>(
-  searchParams: SearchParamsSource,
-  config: C
-): QueryParamValues<C>;
-export function decodeQueryParams(
-  searchParams: SearchParamsSource,
-  config: QueryParamConfig
-): Record<string, QueryParamValue | undefined> {
-  const params: Record<string, QueryParamValue> = {};
-  for (const key of config.list ?? []) {
-    const value = getSearchParam(searchParams, key);
-    if (value) {
-      params[key] = value.split(",");
-    }
-  }
-  for (const key of config.date ?? []) {
-    const value = getSearchParam(searchParams, key);
-    if (value) {
-      params[key] = new Date(value);
-    }
-  }
-  for (const { key, trueValue } of config.boolean ?? []) {
-    if (getSearchParam(searchParams, key) === trueValue) {
-      params[key] = true;
-    }
-  }
-  for (const key of config.string ?? []) {
-    const value = getSearchParam(searchParams, key);
-    if (value) {
-      params[key] = value;
-    }
-  }
-  return params;
-}
-
-export function createQueryString<C extends QueryParamConfig>(
-  values: QueryParamValues<NoInfer<C>>,
-  config: C
-): string;
-export function createQueryString(
-  values: Record<string, QueryParamValue | undefined>,
-  config: QueryParamConfig
-): string {
-  const searchParams = new URLSearchParams();
-  for (const key of config.list ?? []) {
-    const value = values[key];
-    if (Array.isArray(value) && value.length) {
-      searchParams.append(key, value.join(","));
-    }
-  }
-  for (const key of config.date ?? []) {
-    const value = values[key];
-    if (value instanceof Date) {
-      searchParams.append(key, value.toISOString());
-    }
-  }
-  for (const { key, trueValue } of config.boolean ?? []) {
-    if (values[key]) {
-      searchParams.append(key, trueValue);
-    }
-  }
-  for (const key of config.string ?? []) {
-    const value = values[key];
-    if (typeof value === "string" && value) {
-      searchParams.append(key, value);
-    }
-  }
-  return searchParams.toString();
-}
-
-export const serviceTargetFromQueryParams = <
-  Key extends keyof HassServiceTarget & string,
->(
-  params: ServiceTargetQueryParams<Key>,
-  keys: readonly Key[]
-): HassServiceTarget | undefined => {
-  if (!keys.some((key) => params[key])) {
-    return undefined;
-  }
-  const target: HassServiceTarget = {};
-  for (const key of keys) {
-    const value = params[key];
-    if (value) {
-      target[key] = value;
-    }
-  }
-  return target;
-};
-
-export const queryParamsFromServiceTarget = <
-  Key extends keyof HassServiceTarget & string,
->(
-  target: HassServiceTarget,
-  keys: readonly Key[]
-): ServiceTargetQueryParams<Key> => {
-  const params: ServiceTargetQueryParams<Key> = {};
-  for (const key of keys) {
-    const value = target[key];
-    if (value) {
-      params[key] = ensureArray(value);
-    }
-  }
-  return params;
-};
@@ -1,21 +0,0 @@
-import {
-  createQueryString,
-  decodeQueryParams,
-  type QueryParamConfig,
-  type QueryParamValues,
-  type SearchParamsSource,
-} from "./query-params";
-
-export const todoQueryParamConfig = {
-  string: ["entity_id"],
-  boolean: [{ key: "add_item", trueValue: "true" }],
-} as const satisfies QueryParamConfig;
-
-export type TodoQueryParams = QueryParamValues<typeof todoQueryParamConfig>;
-
-export const decodeTodoQueryParams = (
-  searchParams: SearchParamsSource
-): TodoQueryParams => decodeQueryParams(searchParams, todoQueryParamConfig);
-
-export const createTodoQueryString = (values: TodoQueryParams): string =>
-  createQueryString(values, todoQueryParamConfig);
@@ -1,144 +0,0 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { debounce } from "../../common/util/debounce";
-import type { Condition } from "../../data/automation";
-import { subscribeCondition } from "../../data/automation";
-import type { HomeAssistant } from "../../types";
-import "../ha-tooltip";
-import "./ha-automation-row-live-test";
-import type { LiveTestState } from "./ha-automation-row-live-test";
-
-@customElement("ha-automation-condition-live-test")
-export class HaAutomationConditionLiveTest extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public condition!: Condition;
-
-  @state() private _liveTestResult: {
-    state: LiveTestState;
-    message?: string;
-  } = { state: "unknown" };
-
-  private _conditionUnsub?: Promise<UnsubscribeFunc>;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._subscribeCondition();
-  }
-
-  protected override updated(changedProps: PropertyValues<this>): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("condition") &&
-      changedProps.get("condition") !== undefined
-    ) {
-      this._resetSubscription();
-      this._debounceSubscribeCondition();
-    }
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._debounceSubscribeCondition.cancel();
-    this._resetSubscription();
-  }
-
-  protected render() {
-    return html`
-      <div id="indicator">
-        <slot></slot>
-        <ha-automation-row-live-test
-          .state=${this._liveTestResult.state}
-          .label=${this.hass.localize(
-            `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
-          )}
-        ></ha-automation-row-live-test>
-      </div>
-      ${this._liveTestResult.message
-        ? html`<ha-tooltip for="indicator"
-            >${this._liveTestResult.message}</ha-tooltip
-          >`
-        : nothing}
-    `;
-  }
-
-  private _resetSubscription() {
-    this._liveTestResult = {
-      state: "unknown",
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
-      ),
-    };
-    if (this._conditionUnsub) {
-      this._conditionUnsub.then((unsub) => unsub());
-      this._conditionUnsub = undefined;
-    }
-  }
-
-  private _debounceSubscribeCondition = debounce(
-    () => this._subscribeCondition(),
-    500
-  );
-
-  private async _subscribeCondition() {
-    this._resetSubscription();
-
-    if (!this.condition) {
-      return;
-    }
-
-    const conditionUnsub = subscribeCondition(
-      this.hass.connection,
-      (result) => {
-        if (result.error) {
-          this._handleLiveTestError(result.error);
-        } else {
-          this._liveTestResult = {
-            state: result.result ? "pass" : "fail",
-            message: this.hass.localize(
-              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
-            ),
-          };
-        }
-      },
-      this.condition
-    );
-    conditionUnsub.catch((err: any) => {
-      this._handleLiveTestError(err);
-      if (this._conditionUnsub === conditionUnsub) {
-        this._conditionUnsub = undefined;
-      }
-    });
-    this._conditionUnsub = conditionUnsub;
-  }
-
-  private _handleLiveTestError(error: any) {
-    const invalid =
-      typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = {
-      state: invalid ? "invalid" : "unknown",
-      message: this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
-      ),
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-      position: relative;
-    }
-    #indicator {
-      display: inline-flex;
-      position: relative;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-condition-live-test": HaAutomationConditionLiveTest;
-  }
-}
@@ -1,5 +1,6 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../ha-tooltip";

 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";

@@ -12,6 +13,7 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 *
 * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
 * @attr {string} label - Accessible label announced by assistive technology.
+ * @attr {string} message - Optional tooltip body shown on hover/focus.
 */
@customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -19,6 +21,8 @@ export class HaAutomationRowLiveTest extends LitElement {

  @property() public label = "";

+  @property() public message?: string;
+
  protected render() {
    return html`
      <div
@@ -27,38 +31,39 @@ export class HaAutomationRowLiveTest extends LitElement {
        tabindex="0"
        aria-label=${this.label}
      ></div>
+      ${this.message
+        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
+        : nothing}
    `;
  }

  static styles = css`
    :host {
      position: absolute;
-      top: -5px;
      inset-inline-end: -6px;
      display: inline-block;
    }
    #indicator {
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
      border-radius: var(--ha-border-radius-circle);
-      border: var(--ha-border-width-md) solid;
+      border: 3px solid;
      box-sizing: border-box;
      background-color: var(--card-background-color);
-      box-shadow: 0 0 0 2px var(--card-background-color);
      transition: all var(--ha-animation-duration-normal) ease-in-out;
    }
    :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-green-60);
-      border-color: var(--ha-color-green-60);
+      background-color: var(--ha-color-fill-success-loud-resting);
+      border-color: var(--ha-color-fill-success-loud-resting);
    }
    :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-orange-60);
+      border-color: var(--ha-color-fill-warning-loud-resting);
    }
    :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-red-60);
+      border-color: var(--ha-color-fill-danger-loud-resting);
    }
    :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-neutral-60);
+      border-color: var(--ha-color-fill-neutral-loud-resting);
    }
  `;
 }
@@ -161,14 +161,11 @@ export class HaAutomationRow extends LitElement {
    }
    .leading-icon-wrapper {
      padding-top: var(--ha-space-3);
-      position: relative;
-      z-index: 1;
    }
    ::slotted([slot="leading-icon"]) {
      color: var(--ha-color-on-neutral-quiet);
    }
-    :host([building-block]) ::slotted([slot="leading-icon"].action-icon),
-    :host([building-block]) ::slotted(#condition-icon) {
+    :host([building-block]) ::slotted([slot="leading-icon"]) {
      --mdc-icon-size: var(--ha-space-5);
      color: var(--white-color);
      transform: rotate(-45deg);
@@ -101,22 +101,18 @@ export class HaSankeyChart extends LitElement {
    const value = this.valueFormatter
      ? this.valueFormatter(data.value)
      : data.value;
-    // Keep numbers and units left-to-right, even in RTL locales.
-    const formattedValue = html`<div style="direction:ltr; display: inline;">
-      ${value}
-    </div>`;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
      return html`<ha-chart-tooltip-marker
          .color=${String(params.color ?? "")}
        ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${formattedValue}`;
+        ${node?.label ?? data.id}<br />${value}`;
    }
    if (data.source && data.target) {
      const source = this.data.nodes.find((n) => n.id === data.source);
      const target = this.data.nodes.find((n) => n.id === data.target);
      return html`${source?.label ?? data.source} →
-        ${target?.label ?? data.target}<br />${formattedValue}`;
+        ${target?.label ?? data.target}<br />${value}`;
    }
    return null;
  };
@@ -1,480 +0,0 @@
-import type { LineSeriesOption } from "echarts/charts";
-import type { VisualMapComponentOption } from "echarts/components";
-import { getGraphColorByIndex } from "../../common/color/colors";
-import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
-import type { LineChartEntity, LineChartState } from "../../data/history";
-import type { HomeAssistant } from "../../types";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-
-const safeParseFloat = (value) => {
-  const parsed = parseFloat(value);
-  return isFinite(parsed) ? parsed : null;
-};
-
-export const CLIMATE_MODE_CONFIGS = [
-  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
-  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
-  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
-  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
-] as const;
-
-export interface StateHistoryChartLineDataParams {
-  hass: HomeAssistant;
-  data: LineChartEntity[];
-  endTime: Date;
-  names?: Record<string, string>;
-  colors?: Record<string, string | undefined>;
-  showNames: boolean;
-  computedStyles: CSSStyleDeclaration;
-  now: Date;
-}
-
-export interface StateHistoryChartLineData {
-  datasets: LineSeriesOption[];
-  entityIds: string[];
-  datasetToDataIndex: number[];
-  visualMap?: VisualMapComponentOption[];
-  yAxisFractionDigits: number;
-}
-
-/**
- * Transforms processed history (`LineChartEntity[]`) into ECharts series for
- * `state-history-chart-line`. Pure data processing: all environment inputs
- * (current time, theme style, hass) are injected so the transform is
- * deterministic and benchmarkable.
- */
-export function generateStateHistoryChartLineData(
-  params: StateHistoryChartLineDataParams
-): StateHistoryChartLineData | undefined {
-  const { hass, computedStyles, endTime } = params;
-
-  let colorIndex = 0;
-  const entityStates = params.data;
-  const datasets: LineSeriesOption[] = [];
-  const entityIds: string[] = [];
-  const datasetToDataIndex: number[] = [];
-  let yMin = Infinity;
-  let yMax = -Infinity;
-  const trackY = (v: number | null | undefined) => {
-    if (typeof v === "number" && Number.isFinite(v)) {
-      if (v < yMin) yMin = v;
-      if (v > yMax) yMax = v;
-    }
-  };
-  if (entityStates.length === 0) {
-    return undefined;
-  }
-
-  const names = params.names || {};
-  const colors = params.colors || {};
-  entityStates.forEach((states, dataIdx) => {
-    const domain = states.domain;
-    const name = names[states.entity_id] || states.name;
-    const color = colors[states.entity_id];
-    // array containing [value1, value2, etc]
-    let prevValues: any[] | null = null;
-
-    const data: LineSeriesOption[] = [];
-
-    const pushData = (timestamp: Date, datavalues: any[] | null) => {
-      if (!datavalues) return;
-      if (timestamp > endTime) {
-        // Drop data points that are after the requested endTime. This could happen if
-        // endTime is "now" and client time is not in sync with server time.
-        return;
-      }
-      data.forEach((d, i) => {
-        if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
-          // null data values show up as gaps in the chart.
-          // If the current value for the dataset is null and the previous
-          // value of the data set is not null, then add an 'end' point
-          // to the chart for the previous value. Otherwise the gap will
-          // be too big. It will go from the start of the previous data
-          // value until the start of the next data value.
-          d.data!.push([timestamp, prevValues[i]]);
-        }
-        d.data!.push([timestamp, datavalues[i]]);
-        trackY(datavalues[i]);
-      });
-      prevValues = datavalues;
-    };
-
-    const addDataSet = (
-      id: string,
-      nameY: string,
-      clr?: string,
-      fill = false
-    ) => {
-      if (!clr) {
-        clr = getGraphColorByIndex(colorIndex, computedStyles);
-        colorIndex++;
-      }
-      data.push({
-        id,
-        data: [],
-        type: "line",
-        cursor: "default",
-        name: nameY,
-        color: clr,
-        symbol: "circle",
-        symbolSize: 1,
-        step: "end",
-        sampling: "minmax",
-        animationDurationUpdate: 0,
-        lineStyle: {
-          width: fill ? 0 : 1.5,
-        },
-        areaStyle: fill
-          ? {
-              color: clr + "7F",
-            }
-          : undefined,
-        tooltip: {
-          show: !fill,
-        },
-      });
-      entityIds.push(states.entity_id);
-      datasetToDataIndex.push(dataIdx);
-    };
-
-    if (
-      domain === "thermostat" ||
-      domain === "climate" ||
-      domain === "water_heater"
-    ) {
-      const hasHvacAction = states.states.some(
-        (entityState) => entityState.attributes?.hvac_action
-      );
-
-      const activeModes = CLIMATE_MODE_CONFIGS.map(
-        ({ mode, action, cssVar }) => {
-          const isActive =
-            domain === "climate" && hasHvacAction
-              ? (entityState: LineChartState) =>
-                  CLIMATE_HVAC_ACTION_TO_MODE[
-                    entityState.attributes?.hvac_action
-                  ] === mode
-              : (entityState: LineChartState) => entityState.state === mode;
-          return { action, cssVar, isActive };
-        }
-      ).filter(({ isActive }) => states.states.some(isActive));
-      // We differentiate between thermostats that have a target temperature
-      // range versus ones that have just a target temperature
-
-      // Using step chart by step-before so manually interpolation not needed.
-      const hasTargetRange = states.states.some(
-        (entityState) =>
-          entityState.attributes &&
-          entityState.attributes.target_temp_high !==
-            entityState.attributes.target_temp_low
-      );
-      addDataSet(
-        states.entity_id + "-current_temperature",
-        params.showNames
-          ? hass.localize("ui.card.climate.current_temperature", {
-              name: name,
-            })
-          : hass.localize(
-              "component.climate.entity_component._.state_attributes.current_temperature.name"
-            )
-      );
-      for (const { action, cssVar } of activeModes) {
-        addDataSet(
-          `${states.entity_id}-${action}`,
-          params.showNames
-            ? hass.localize(`ui.card.climate.${action}`, {
-                name: name,
-              })
-            : hass.localize(
-                `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
-              ),
-          computedStyles.getPropertyValue(cssVar),
-          true
-        );
-      }
-
-      if (hasTargetRange) {
-        addDataSet(
-          states.entity_id + "-target_temperature_mode",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_mode", {
-                name: name,
-                mode: hass.localize("ui.card.climate.high"),
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.target_temp_high.name"
-              )
-        );
-        addDataSet(
-          states.entity_id + "-target_temperature_mode_low",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_mode", {
-                name: name,
-                mode: hass.localize("ui.card.climate.low"),
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.target_temp_low.name"
-              )
-        );
-      } else {
-        addDataSet(
-          states.entity_id + "-target_temperature",
-          params.showNames
-            ? hass.localize("ui.card.climate.target_temperature_entity", {
-                name: name,
-              })
-            : hass.localize(
-                "component.climate.entity_component._.state_attributes.temperature.name"
-              )
-        );
-      }
-
-      states.states.forEach((entityState) => {
-        if (!entityState.attributes) return;
-        const curTemp = safeParseFloat(
-          entityState.attributes.current_temperature
-        );
-        const series = [curTemp];
-        for (const { isActive } of activeModes) {
-          series.push(isActive(entityState) ? curTemp : null);
-        }
-        if (hasTargetRange) {
-          const targetHigh = safeParseFloat(
-            entityState.attributes.target_temp_high
-          );
-          const targetLow = safeParseFloat(
-            entityState.attributes.target_temp_low
-          );
-          series.push(targetHigh, targetLow);
-          pushData(new Date(entityState.last_changed), series);
-        } else {
-          const target = safeParseFloat(entityState.attributes.temperature);
-          series.push(target);
-          pushData(new Date(entityState.last_changed), series);
-        }
-      });
-    } else if (domain === "humidifier") {
-      const hasAction = states.states.some(
-        (entityState) => entityState.attributes?.action
-      );
-      const hasCurrent = states.states.some(
-        (entityState) => entityState.attributes?.current_humidity
-      );
-
-      const hasHumidifying =
-        hasAction &&
-        states.states.some(
-          (entityState: LineChartState) =>
-            entityState.attributes?.action === "humidifying"
-        );
-      const hasDrying =
-        hasAction &&
-        states.states.some(
-          (entityState: LineChartState) =>
-            entityState.attributes?.action === "drying"
-        );
-
-      addDataSet(
-        states.entity_id + "-target_humidity",
-        params.showNames
-          ? hass.localize("ui.card.humidifier.target_humidity_entity", {
-              name: name,
-            })
-          : hass.localize(
-              "component.humidifier.entity_component._.state_attributes.humidity.name"
-            )
-      );
-
-      if (hasCurrent) {
-        addDataSet(
-          states.entity_id + "-current_humidity",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.current_humidity_entity", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.current_humidity.name"
-              )
-        );
-      }
-
-      // If action attribute is available, we used it to shade the area below the humidity.
-      // If action attribute is not available, we shade the area when the device is on
-      if (hasHumidifying) {
-        addDataSet(
-          states.entity_id + "-humidifying",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.humidifying", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
-              ),
-          computedStyles.getPropertyValue("--state-humidifier-on-color"),
-          true
-        );
-      } else if (hasDrying) {
-        addDataSet(
-          states.entity_id + "-drying",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.drying", {
-                name: name,
-              })
-            : hass.localize(
-                "component.humidifier.entity_component._.state_attributes.action.state.drying"
-              ),
-          computedStyles.getPropertyValue("--state-humidifier-on-color"),
-          true
-        );
-      } else {
-        addDataSet(
-          states.entity_id + "-on",
-          params.showNames
-            ? hass.localize("ui.card.humidifier.on_entity", {
-                name: name,
-              })
-            : hass.localize("component.humidifier.entity_component._.state.on"),
-          undefined,
-          true
-        );
-      }
-
-      states.states.forEach((entityState) => {
-        if (!entityState.attributes) return;
-        const target = safeParseFloat(entityState.attributes.humidity);
-        // If the current humidity is not available, then we fill up to the target humidity
-        const current = hasCurrent
-          ? safeParseFloat(entityState.attributes?.current_humidity)
-          : target;
-        const series = [target];
-
-        if (hasCurrent) {
-          series.push(current);
-        }
-
-        if (hasHumidifying) {
-          series.push(
-            entityState.attributes?.action === "humidifying" ? current : null
-          );
-        } else if (hasDrying) {
-          series.push(
-            entityState.attributes?.action === "drying" ? current : null
-          );
-        } else {
-          series.push(entityState.state === "on" ? current : null);
-        }
-        pushData(new Date(entityState.last_changed), series);
-      });
-    } else {
-      addDataSet(states.entity_id, name, color);
-
-      let lastValue: number;
-      let lastDate: Date;
-      let lastNullDate: Date | null = null;
-
-      // Process chart data.
-      // When state is `unknown`, calculate the value and break the line.
-      const processData = (entityState: LineChartState) => {
-        const value = safeParseFloat(entityState.state);
-        const date = new Date(entityState.last_changed);
-        if (value !== null && lastNullDate) {
-          const dateTime = date.getTime();
-          const lastNullDateTime = lastNullDate.getTime();
-          const lastDateTime = lastDate?.getTime();
-          const tmpValue =
-            (value - lastValue) *
-              ((lastNullDateTime - lastDateTime) / (dateTime - lastDateTime)) +
-            lastValue;
-          pushData(lastNullDate, [tmpValue]);
-          pushData(new Date(lastNullDateTime + 1), [null]);
-          pushData(date, [value]);
-          lastDate = date;
-          lastValue = value;
-          lastNullDate = null;
-        } else if (value !== null && lastNullDate === null) {
-          pushData(date, [value]);
-          lastDate = date;
-          lastValue = value;
-        } else if (
-          value === null &&
-          lastNullDate === null &&
-          lastValue !== undefined
-        ) {
-          lastNullDate = date;
-        }
-      };
-
-      if (states.statistics) {
-        const stopTime =
-          !states.states || states.states.length === 0
-            ? 0
-            : states.states[0].last_changed;
-        for (const statistic of states.statistics) {
-          if (stopTime && statistic.last_changed >= stopTime) {
-            break;
-          }
-          processData(statistic);
-        }
-      }
-      states.states.forEach((entityState) => {
-        processData(entityState);
-      });
-      if (lastNullDate !== null) {
-        pushData(lastNullDate, [null]);
-      }
-    }
-
-    // Add an entry for final values
-    pushData(endTime, prevValues);
-
-    // For sensors, append current state if viewing recent data
-    const now = params.now;
-    // allow 1s of leeway for "now"
-    const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
-    if (domain === "sensor" && isUpToNow && data.length === 1) {
-      const stateObj = hass.states[states.entity_id];
-      const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
-      if (currentValue !== null) {
-        data[0].data!.push([now, currentValue]);
-        trackY(currentValue);
-      }
-    }
-
-    // Concat two arrays
-    Array.prototype.push.apply(datasets, data);
-  });
-
-  const visualMap: VisualMapComponentOption[] = [];
-  datasets.forEach((_, seriesIndex) => {
-    const dataIndex = datasetToDataIndex[seriesIndex];
-    const data = entityStates[dataIndex];
-    if (!data.statistics || data.statistics.length === 0) {
-      return;
-    }
-    // render stat data with a slightly transparent line
-    const firstStateTS = data.states[0]?.last_changed ?? endTime.getTime();
-    visualMap.push({
-      show: false,
-      seriesIndex,
-      dimension: 0,
-      pieces: [
-        {
-          max: firstStateTS - 0.01,
-          colorAlpha: 0.5,
-        },
-        {
-          min: firstStateTS,
-          colorAlpha: 1,
-        },
-      ],
-    });
-  });
-
-  return {
-    datasets,
-    entityIds,
-    datasetToDataIndex,
-    visualMap: visualMap.length > 0 ? visualMap : undefined,
-    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
-  };
-}
@@ -5,17 +5,15 @@ import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
 import { styleMap } from "lit/directives/style-map";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { computeRTL } from "../../common/util/compute_rtl";

-import type { LineChartEntity } from "../../data/history";
+import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import {
-  CLIMATE_MODE_CONFIGS,
-  generateStateHistoryChartLineData,
-} from "./state-history-chart-line-data";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -25,9 +23,22 @@ import {
 import { measureTextWidth } from "../../util/text";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
+import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";

+const safeParseFloat = (value) => {
+  const parsed = parseFloat(value);
+  return isFinite(parsed) ? parsed : null;
+};
+
+const CLIMATE_MODE_CONFIGS = [
+  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
+  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
+  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
+  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
+] as const;
+
 // Used to recover the underlying entity_id from a legend dataset id.
 // Kept in sync with the suffixes appended at dataset construction below
 // for climate / water_heater / humidifier multi-attribute charts.
@@ -409,32 +420,445 @@ export class StateHistoryChartLine extends LitElement {
  }

  private _generateData() {
-    if (this.data.length === 0) {
+    let colorIndex = 0;
+    const computedStyles = getComputedStyle(this);
+    const entityStates = this.data;
+    const datasets: LineSeriesOption[] = [];
+    const entityIds: string[] = [];
+    const datasetToDataIndex: number[] = [];
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    const trackY = (v: number | null | undefined) => {
+      if (typeof v === "number" && Number.isFinite(v)) {
+        if (v < yMin) yMin = v;
+        if (v > yMax) yMax = v;
+      }
+    };
+    if (entityStates.length === 0) {
      return;
    }

    this._chartTime = new Date();
+    const endTime = this.endTime;
+    const names = this.names || {};
+    const colors = this.colors || {};
+    entityStates.forEach((states, dataIdx) => {
+      const domain = states.domain;
+      const name = names[states.entity_id] || states.name;
+      const color = colors[states.entity_id];
+      // array containing [value1, value2, etc]
+      let prevValues: any[] | null = null;

-    const data = generateStateHistoryChartLineData({
-      hass: this.hass,
-      data: this.data,
-      endTime: this.endTime,
-      names: this.names,
-      colors: this.colors,
-      showNames: this.showNames,
-      computedStyles: getComputedStyle(this),
-      now: new Date(),
+      const data: LineSeriesOption[] = [];
+
+      const pushData = (timestamp: Date, datavalues: any[] | null) => {
+        if (!datavalues) return;
+        if (timestamp > endTime) {
+          // Drop data points that are after the requested endTime. This could happen if
+          // endTime is "now" and client time is not in sync with server time.
+          return;
+        }
+        data.forEach((d, i) => {
+          if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
+            // null data values show up as gaps in the chart.
+            // If the current value for the dataset is null and the previous
+            // value of the data set is not null, then add an 'end' point
+            // to the chart for the previous value. Otherwise the gap will
+            // be too big. It will go from the start of the previous data
+            // value until the start of the next data value.
+            d.data!.push([timestamp, prevValues[i]]);
+          }
+          d.data!.push([timestamp, datavalues[i]]);
+          trackY(datavalues[i]);
+        });
+        prevValues = datavalues;
+      };
+
+      const addDataSet = (
+        id: string,
+        nameY: string,
+        clr?: string,
+        fill = false
+      ) => {
+        if (!clr) {
+          clr = getGraphColorByIndex(colorIndex, computedStyles);
+          colorIndex++;
+        }
+        data.push({
+          id,
+          data: [],
+          type: "line",
+          cursor: "default",
+          name: nameY,
+          color: clr,
+          symbol: "circle",
+          symbolSize: 1,
+          step: "end",
+          sampling: "minmax",
+          animationDurationUpdate: 0,
+          lineStyle: {
+            width: fill ? 0 : 1.5,
+          },
+          areaStyle: fill
+            ? {
+                color: clr + "7F",
+              }
+            : undefined,
+          tooltip: {
+            show: !fill,
+          },
+        });
+        entityIds.push(states.entity_id);
+        datasetToDataIndex.push(dataIdx);
+      };
+
+      if (
+        domain === "thermostat" ||
+        domain === "climate" ||
+        domain === "water_heater"
+      ) {
+        const hasHvacAction = states.states.some(
+          (entityState) => entityState.attributes?.hvac_action
+        );
+
+        const activeModes = CLIMATE_MODE_CONFIGS.map(
+          ({ mode, action, cssVar }) => {
+            const isActive =
+              domain === "climate" && hasHvacAction
+                ? (entityState: LineChartState) =>
+                    CLIMATE_HVAC_ACTION_TO_MODE[
+                      entityState.attributes?.hvac_action
+                    ] === mode
+                : (entityState: LineChartState) => entityState.state === mode;
+            return { action, cssVar, isActive };
+          }
+        ).filter(({ isActive }) => states.states.some(isActive));
+        // We differentiate between thermostats that have a target temperature
+        // range versus ones that have just a target temperature
+
+        // Using step chart by step-before so manually interpolation not needed.
+        const hasTargetRange = states.states.some(
+          (entityState) =>
+            entityState.attributes &&
+            entityState.attributes.target_temp_high !==
+              entityState.attributes.target_temp_low
+        );
+        addDataSet(
+          states.entity_id + "-current_temperature",
+          this.showNames
+            ? this.hass.localize("ui.card.climate.current_temperature", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.climate.entity_component._.state_attributes.current_temperature.name"
+              )
+        );
+        for (const { action, cssVar } of activeModes) {
+          addDataSet(
+            `${states.entity_id}-${action}`,
+            this.showNames
+              ? this.hass.localize(`ui.card.climate.${action}`, {
+                  name: name,
+                })
+              : this.hass.localize(
+                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+                ),
+            computedStyles.getPropertyValue(cssVar),
+            true
+          );
+        }
+
+        if (hasTargetRange) {
+          addDataSet(
+            states.entity_id + "-target_temperature_mode",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.high"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_high.name"
+                )
+          );
+          addDataSet(
+            states.entity_id + "-target_temperature_mode_low",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.low"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_low.name"
+                )
+          );
+        } else {
+          addDataSet(
+            states.entity_id + "-target_temperature",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.climate.target_temperature_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.temperature.name"
+                )
+          );
+        }
+
+        states.states.forEach((entityState) => {
+          if (!entityState.attributes) return;
+          const curTemp = safeParseFloat(
+            entityState.attributes.current_temperature
+          );
+          const series = [curTemp];
+          for (const { isActive } of activeModes) {
+            series.push(isActive(entityState) ? curTemp : null);
+          }
+          if (hasTargetRange) {
+            const targetHigh = safeParseFloat(
+              entityState.attributes.target_temp_high
+            );
+            const targetLow = safeParseFloat(
+              entityState.attributes.target_temp_low
+            );
+            series.push(targetHigh, targetLow);
+            pushData(new Date(entityState.last_changed), series);
+          } else {
+            const target = safeParseFloat(entityState.attributes.temperature);
+            series.push(target);
+            pushData(new Date(entityState.last_changed), series);
+          }
+        });
+      } else if (domain === "humidifier") {
+        const hasAction = states.states.some(
+          (entityState) => entityState.attributes?.action
+        );
+        const hasCurrent = states.states.some(
+          (entityState) => entityState.attributes?.current_humidity
+        );
+
+        const hasHumidifying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "humidifying"
+          );
+        const hasDrying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "drying"
+          );
+
+        addDataSet(
+          states.entity_id + "-target_humidity",
+          this.showNames
+            ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.humidifier.entity_component._.state_attributes.humidity.name"
+              )
+        );
+
+        if (hasCurrent) {
+          addDataSet(
+            states.entity_id + "-current_humidity",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.humidifier.current_humidity_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.current_humidity.name"
+                )
+          );
+        }
+
+        // If action attribute is available, we used it to shade the area below the humidity.
+        // If action attribute is not available, we shade the area when the device is on
+        if (hasHumidifying) {
+          addDataSet(
+            states.entity_id + "-humidifying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.humidifying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
+                ),
+            computedStyles.getPropertyValue("--state-humidifier-on-color"),
+            true
+          );
+        } else if (hasDrying) {
+          addDataSet(
+            states.entity_id + "-drying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.drying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.drying"
+                ),
+            computedStyles.getPropertyValue("--state-humidifier-on-color"),
+            true
+          );
+        } else {
+          addDataSet(
+            states.entity_id + "-on",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.on_entity", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state.on"
+                ),
+            undefined,
+            true
+          );
+        }
+
+        states.states.forEach((entityState) => {
+          if (!entityState.attributes) return;
+          const target = safeParseFloat(entityState.attributes.humidity);
+          // If the current humidity is not available, then we fill up to the target humidity
+          const current = hasCurrent
+            ? safeParseFloat(entityState.attributes?.current_humidity)
+            : target;
+          const series = [target];
+
+          if (hasCurrent) {
+            series.push(current);
+          }
+
+          if (hasHumidifying) {
+            series.push(
+              entityState.attributes?.action === "humidifying" ? current : null
+            );
+          } else if (hasDrying) {
+            series.push(
+              entityState.attributes?.action === "drying" ? current : null
+            );
+          } else {
+            series.push(entityState.state === "on" ? current : null);
+          }
+          pushData(new Date(entityState.last_changed), series);
+        });
+      } else {
+        addDataSet(states.entity_id, name, color);
+
+        let lastValue: number;
+        let lastDate: Date;
+        let lastNullDate: Date | null = null;
+
+        // Process chart data.
+        // When state is `unknown`, calculate the value and break the line.
+        const processData = (entityState: LineChartState) => {
+          const value = safeParseFloat(entityState.state);
+          const date = new Date(entityState.last_changed);
+          if (value !== null && lastNullDate) {
+            const dateTime = date.getTime();
+            const lastNullDateTime = lastNullDate.getTime();
+            const lastDateTime = lastDate?.getTime();
+            const tmpValue =
+              (value - lastValue) *
+                ((lastNullDateTime - lastDateTime) /
+                  (dateTime - lastDateTime)) +
+              lastValue;
+            pushData(lastNullDate, [tmpValue]);
+            pushData(new Date(lastNullDateTime + 1), [null]);
+            pushData(date, [value]);
+            lastDate = date;
+            lastValue = value;
+            lastNullDate = null;
+          } else if (value !== null && lastNullDate === null) {
+            pushData(date, [value]);
+            lastDate = date;
+            lastValue = value;
+          } else if (
+            value === null &&
+            lastNullDate === null &&
+            lastValue !== undefined
+          ) {
+            lastNullDate = date;
+          }
+        };
+
+        if (states.statistics) {
+          const stopTime =
+            !states.states || states.states.length === 0
+              ? 0
+              : states.states[0].last_changed;
+          for (const statistic of states.statistics) {
+            if (stopTime && statistic.last_changed >= stopTime) {
+              break;
+            }
+            processData(statistic);
+          }
+        }
+        states.states.forEach((entityState) => {
+          processData(entityState);
+        });
+        if (lastNullDate !== null) {
+          pushData(lastNullDate, [null]);
+        }
+      }
+
+      // Add an entry for final values
+      pushData(endTime, prevValues);
+
+      // For sensors, append current state if viewing recent data
+      const now = new Date();
+      // allow 1s of leeway for "now"
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      if (domain === "sensor" && isUpToNow && data.length === 1) {
+        const stateObj = this.hass.states[states.entity_id];
+        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+        if (currentValue !== null) {
+          data[0].data!.push([now, currentValue]);
+          trackY(currentValue);
+        }
+      }
+
+      // Concat two arrays
+      Array.prototype.push.apply(datasets, data);
    });

-    if (!data) {
-      return;
-    }
-
-    this._yAxisFractionDigits = data.yAxisFractionDigits;
-    this._chartData = data.datasets;
-    this._entityIds = data.entityIds;
-    this._datasetToDataIndex = data.datasetToDataIndex;
-    this._visualMap = data.visualMap;
+    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
+    this._chartData = datasets;
+    this._entityIds = entityIds;
+    this._datasetToDataIndex = datasetToDataIndex;
+    const visualMap: VisualMapComponentOption[] = [];
+    this._chartData.forEach((_, seriesIndex) => {
+      const dataIndex = this._datasetToDataIndex[seriesIndex];
+      const data = this.data[dataIndex];
+      if (!data.statistics || data.statistics.length === 0) {
+        return;
+      }
+      // render stat data with a slightly transparent line
+      const firstStateTS =
+        data.states[0]?.last_changed ?? this.endTime.getTime();
+      visualMap.push({
+        show: false,
+        seriesIndex,
+        dimension: 0,
+        pieces: [
+          {
+            max: firstStateTS - 0.01,
+            colorAlpha: 0.5,
+          },
+          {
+            min: firstStateTS,
+            colorAlpha: 1,
+          },
+        ],
+      });
+    });
+    this._visualMap = visualMap.length > 0 ? visualMap : undefined;
  }

  private _formatYAxisLabel = (value: number) => {
@@ -167,7 +167,7 @@ export class StateHistoryCharts extends LitElement {
          )}`}
      ${this.syncCharts && this._hasZoomedCharts
        ? html`<ha-button
-            size="l"
+            size="large"
            class="reset-button"
            @click=${this._handleGlobalZoomReset}
          >
@@ -1,436 +0,0 @@
-import type {
-  BarSeriesOption,
-  LineSeriesOption,
-  ZRColor,
-} from "echarts/types/dist/shared";
-import { getGraphColorByIndex } from "../../common/color/colors";
-import type {
-  Statistics,
-  StatisticsMetaData,
-  StatisticType,
-} from "../../data/recorder";
-import {
-  getDisplayUnit,
-  getStatisticLabel,
-  isExternalStatistic,
-  statisticsHaveType,
-} from "../../data/recorder";
-import type { HomeAssistant } from "../../types";
-import { fillDataGapsAndRoundCaps } from "./round-caps";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-
-export interface StatisticsChartLegendItem {
-  id: string;
-  name: string;
-  color?: ZRColor;
-  borderColor?: ZRColor;
-  noLabelClick?: boolean;
-}
-
-export interface StatisticsChartDataParams {
-  hass: HomeAssistant;
-  statisticsData: Statistics;
-  statisticsMetaData: Record<string, StatisticsMetaData>;
-  names?: Record<string, string>;
-  colors?: Record<string, string | undefined>;
-  unit?: string;
-  endTime?: Date;
-  statTypes: StatisticType[];
-  chartType: "line" | "line-stack" | "bar" | "bar-stack";
-  period?: string;
-  hideLegend: boolean;
-  hiddenStats: ReadonlySet<string>;
-  computedStyle: CSSStyleDeclaration;
-  now: Date;
-}
-
-export interface StatisticsChartData {
-  datasets: (LineSeriesOption | BarSeriesOption)[];
-  legendData: StatisticsChartLegendItem[];
-  statisticIds: string[];
-  /** Chart unit, inferred from statistics metadata when not set explicitly */
-  unit?: string;
-  yAxisFractionDigits: number;
-}
-
-/**
- * Transforms raw statistics into ECharts series for `statistics-chart`.
- * Pure data processing: all environment inputs (current time, theme style,
- * hass) are injected so the transform is deterministic and benchmarkable.
- */
-export function generateStatisticsChartData(
-  params: StatisticsChartDataParams
-): StatisticsChartData | undefined {
-  const { hass, statisticsMetaData, computedStyle, now, hiddenStats } = params;
-
-  let colorIndex = 0;
-  const chartType = params.chartType.startsWith("line") ? "line" : "bar";
-  const chartStacked = params.chartType.endsWith("stack");
-  const statisticsData = Object.entries(params.statisticsData);
-  const totalDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-  let yMin = Infinity;
-  let yMax = -Infinity;
-  const trackY = (v: number | null | undefined) => {
-    if (typeof v === "number" && Number.isFinite(v)) {
-      if (v < yMin) yMin = v;
-      if (v > yMax) yMax = v;
-    }
-  };
-  const legendData: StatisticsChartLegendItem[] = [];
-  const statisticIds: string[] = [];
-  let endTime: Date;
-
-  if (statisticsData.length === 0) {
-    return undefined;
-  }
-
-  endTime =
-    params.endTime ||
-    // Get the highest date from the last date of each statistic
-    new Date(
-      Math.max(
-        ...statisticsData.map(([_, stats]) =>
-          new Date(stats[stats.length - 1].start).getTime()
-        )
-      )
-    );
-
-  if (endTime > now) {
-    endTime = now;
-  }
-
-  // Check if we need to display most recent data. Allow 10m of leeway for "now",
-  // because stats are 5 minute aggregated.
-  // Use same now point for all statistics even if processing time means the
-  // state value is actually from a slightly later time. Otherwise the points
-  // end up separated slightly and disappear from the tooltips.
-  const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
-
-  // Try to determine chart unit if it has not already been set explicitly
-  let unit = params.unit;
-  if (!unit) {
-    let inferredUnit: string | undefined | null;
-    statisticsData.forEach(([statistic_id, _stats]) => {
-      const meta = statisticsMetaData?.[statistic_id];
-      const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
-      if (inferredUnit === undefined) {
-        inferredUnit = statisticUnit;
-      } else if (inferredUnit !== null && inferredUnit !== statisticUnit) {
-        // Clear unit if not all statistics have same unit
-        inferredUnit = null;
-      }
-    });
-    if (inferredUnit) {
-      unit = inferredUnit;
-    }
-  }
-
-  const names = params.names || {};
-  const colors = params.colors || {};
-  statisticsData.forEach(([statistic_id, stats]) => {
-    const meta = statisticsMetaData?.[statistic_id];
-    let name = names[statistic_id];
-    if (name === undefined) {
-      name = getStatisticLabel(hass, statistic_id, meta);
-    }
-
-    // array containing [value1, value2, etc]
-    let prevValues: (number | null)[][] | null = null;
-    let prevEndTime: Date | undefined;
-
-    // The datasets for the current statistic
-    const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-    const statLegendData: StatisticsChartLegendItem[] = [];
-
-    // Place bars at centre of their specified time range if this is a bar chart
-    // and the period is 5minute or hour.
-    const centerBars =
-      chartType === "bar" &&
-      (params.period === "5minute" || params.period === "hour");
-
-    const pushData = (
-      start: Date, // Data point start time
-      end: Date, // Data point end time
-      limit: Date, // Limit for end time (e.g. now)
-      dataValues: (number | null)[][]
-    ) => {
-      if (!dataValues.length) return;
-      // Limit for time range is lesser of overall limit and data point end
-      limit = end.getTime() < limit.getTime() ? end : limit;
-      if (start.getTime() > limit.getTime()) {
-        // Drop data points that are after the requested endTime. This could happen if
-        // endTime is "now" and client time is not in sync with server time.
-        return;
-      }
-      statDataSets.forEach((d, i) => {
-        if (chartType === "line") {
-          if (
-            prevEndTime &&
-            prevValues &&
-            prevEndTime.getTime() !== start.getTime()
-          ) {
-            // if the end of the previous data doesn't match the start of the current data,
-            // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime, ...prevValues[i]!]);
-            d.data!.push([prevEndTime, null]);
-          }
-          d.data!.push([start, ...dataValues[i]!]);
-          // For band-top rows dataValues[i] is [diff, top]; the actual Y is
-          // the last element. For regular rows it's [value]. Same call works.
-          trackY(dataValues[i][dataValues[i].length - 1]);
-        } else {
-          let time = start;
-          if (centerBars) {
-            // If centering bars, set the time to the midpoint between start and end instead
-            // of the start time.
-            time = new Date((start.getTime() + end.getTime()) / 2);
-          }
-          // Data value should always be a scalar for bar charts. Pass in
-          // real start time as extra value to allow formatting tooltip.
-          d.data!.push([time, dataValues[i][0]!, start, end]);
-          trackY(dataValues[i][0]);
-        }
-      });
-      prevValues = dataValues;
-      prevEndTime = limit;
-    };
-
-    let color = colors[statistic_id];
-    if (color === undefined) {
-      color = getGraphColorByIndex(colorIndex, computedStyle);
-      colorIndex++;
-    }
-
-    const statTypes: StatisticType[] = [];
-
-    const hasMean =
-      params.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
-    const hasMax =
-      params.statTypes.includes("max") && statisticsHaveType(stats, "max");
-    const hasMin =
-      params.statTypes.includes("min") && statisticsHaveType(stats, "min");
-    const drawBands =
-      !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
-
-    const hasState = params.statTypes.includes("state");
-
-    const bandTop = hasMax ? "max" : "mean";
-    const bandBottom = hasMin ? "min" : "mean";
-
-    const sortedTypes = drawBands
-      ? [...params.statTypes].sort((a, b) => {
-          if (a === "min" || b === "max") {
-            return -1;
-          }
-          if (a === "max" || b === "min") {
-            return +1;
-          }
-          return 0;
-        })
-      : params.statTypes;
-
-    let displayedLegend = false;
-    sortedTypes.forEach((type) => {
-      if (statisticsHaveType(stats, type)) {
-        const band = drawBands && (type === bandTop || type === bandBottom);
-        statTypes.push(type);
-        const borderColor =
-          (band && hasMin && hasMax && hasMean) ||
-          (hasState && ["change", "sum"].includes(type))
-            ? color + (params.hideLegend ? "00" : "7F")
-            : color;
-        const backgroundColor = band ? color + "3F" : color + "7F";
-        const series: LineSeriesOption | BarSeriesOption = {
-          id: `${statistic_id}-${type}`,
-          type: chartType,
-          smooth: chartType === "line" ? 0.4 : false,
-          cursor: "default",
-          data: [],
-          name: name
-            ? `${name} (${hass.localize(
-                `ui.components.statistics_charts.statistic_types.${type}`
-              )})`
-            : hass.localize(
-                `ui.components.statistics_charts.statistic_types.${type}`
-              ),
-          symbol: "none",
-          // minmax sampling operates independently per series, breaking stacking alignment
-          // https://github.com/apache/echarts/issues/11879
-          sampling: band && drawBands ? "lttb" : "minmax",
-          animationDurationUpdate: 0,
-          lineStyle: {
-            width: 1.5,
-          },
-          itemStyle:
-            chartType === "bar"
-              ? {
-                  borderColor,
-                  borderWidth: 1.5,
-                }
-              : undefined,
-          color: chartType === "bar" ? backgroundColor : borderColor,
-        };
-        if (chartStacked) {
-          series.stack = `band-stacked`;
-          series.stackStrategy = "samesign";
-          if (chartType === "line") {
-            (series as LineSeriesOption).areaStyle = {
-              color: color + "3F",
-            };
-          }
-        } else if (band && chartType === "line") {
-          series.stack = `band-${statistic_id}`;
-          series.stackStrategy = "all";
-          if (hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
-            // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
-            series.stackOrder = "seriesDesc";
-            (series as LineSeriesOption).areaStyle = undefined;
-          } else {
-            series.stackOrder = "seriesAsc";
-            if (type === bandTop) {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
-            }
-          }
-        }
-        if (!params.hideLegend) {
-          const showLegend = hasMean
-            ? type === "mean"
-            : displayedLegend === false;
-          if (showLegend) {
-            statLegendData.push({
-              id: statistic_id,
-              name,
-              color: series.color as ZRColor,
-              borderColor: series.itemStyle?.borderColor,
-              noLabelClick: isExternalStatistic(statistic_id),
-            });
-          }
-          displayedLegend = displayedLegend || showLegend;
-        }
-        statDataSets.push(series);
-        statisticIds.push(statistic_id);
-      }
-    });
-
-    let prevDate: Date | null = null;
-    // Process chart data.
-    let firstSum: number | null | undefined = null;
-    stats.forEach((stat) => {
-      const startDate = new Date(stat.start);
-      const endDate = new Date(stat.end);
-      if (prevDate === startDate) {
-        return;
-      }
-      prevDate = startDate;
-      const dataValues: (number | null)[][] = [];
-      statTypes.forEach((type) => {
-        const val: (number | null)[] = [];
-        if (type === "sum") {
-          if (firstSum === null || firstSum === undefined) {
-            val.push(0);
-            firstSum = stat.sum;
-          } else {
-            val.push((stat.sum || 0) - firstSum);
-          }
-        } else if (
-          type === bandTop &&
-          chartType === "line" &&
-          drawBands &&
-          !hiddenStats.has(`${statistic_id}-${bandBottom}`)
-        ) {
-          const top = stat[bandTop] || 0;
-          val.push(Math.abs(top - (stat[bandBottom] || 0)));
-          val.push(top);
-        } else {
-          val.push(stat[type] ?? null);
-        }
-        dataValues.push(val);
-      });
-      if (!hiddenStats.has(statistic_id)) {
-        pushData(startDate, endDate, endTime, dataValues);
-      }
-    });
-
-    // For line charts, close out the last stat segment at prevEndTime
-    const lastEndTime = prevEndTime;
-    const lastValues = prevValues;
-    if (chartType === "line" && lastEndTime && lastValues) {
-      statDataSets.forEach((d, i) => {
-        d.data!.push([lastEndTime, ...lastValues[i]!]);
-      });
-    }
-
-    // Show current state if required, and units match (or are unknown)
-    const statisticUnit = getDisplayUnit(hass, statistic_id, meta);
-    if (
-      displayCurrentState &&
-      !chartStacked &&
-      (!unit || !statisticUnit || unit === statisticUnit)
-    ) {
-      // Skip external statistics
-      if (!isExternalStatistic(statistic_id)) {
-        const stateObj = hass.states[statistic_id];
-        if (stateObj) {
-          const currentValue = parseFloat(stateObj.state);
-          if (isFinite(currentValue) && !hiddenStats.has(statistic_id)) {
-            // Then push the current state at now
-            statTypes.forEach((type, i) => {
-              if (type === "sum" || type === "change") {
-                // Skip cumulative types - need special calculation.
-                return;
-              }
-              const val: (number | null)[] = [];
-              if (
-                type === bandTop &&
-                chartType === "line" &&
-                drawBands &&
-                !hiddenStats.has(`${statistic_id}-${bandBottom}`)
-              ) {
-                // For band chart, current value is both min and max, so diff is 0
-                val.push(0);
-                val.push(currentValue);
-              } else {
-                val.push(currentValue);
-              }
-              statDataSets[i].data!.push([now, ...val]);
-              trackY(val[val.length - 1]);
-            });
-          }
-        }
-      }
-    }
-
-    // Concat two arrays
-    Array.prototype.push.apply(totalDataSets, statDataSets);
-    Array.prototype.push.apply(legendData, statLegendData);
-  });
-
-  if (chartType === "bar") {
-    fillDataGapsAndRoundCaps(totalDataSets as BarSeriesOption[], chartStacked);
-  }
-
-  legendData.forEach(({ id, name, color, borderColor }) => {
-    // Add an empty series for the legend
-    totalDataSets.push({
-      id: id,
-      name: name,
-      color,
-      itemStyle: {
-        borderColor,
-      },
-      type: chartType,
-      data: [],
-      xAxisIndex: 1,
-    });
-  });
-
-  return {
-    datasets: totalDataSets,
-    legendData,
-    statisticIds,
-    unit,
-    yAxisFractionDigits: computeYAxisFractionDigits(yMin, yMax),
-  };
-}
@@ -1,12 +1,14 @@
 import type {
  BarSeriesOption,
  LineSeriesOption,
+  ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -25,7 +27,13 @@ import type {
  StatisticsMetaData,
  StatisticType,
 } from "../../data/recorder";
-import { getStatisticMetadata, isExternalStatistic } from "../../data/recorder";
+import {
+  getDisplayUnit,
+  getStatisticLabel,
+  getStatisticMetadata,
+  isExternalStatistic,
+  statisticsHaveType,
+} from "../../data/recorder";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
@@ -33,7 +41,8 @@ import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import { generateStatisticsChartData } from "./statistics-chart-data";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";

 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
  mean: "mean",
@@ -494,35 +503,391 @@ export class StatisticsChart extends LitElement {
      this.metadata ||
      (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));

-    const data = generateStatisticsChartData({
-      hass: this.hass,
-      statisticsData: this.statisticsData,
-      statisticsMetaData,
-      names: this.names,
-      colors: this.colors,
-      unit: this.unit,
-      endTime: this.endTime,
-      statTypes: this.statTypes,
-      chartType: this.chartType,
-      period: this.period,
-      hideLegend: this.hideLegend,
-      hiddenStats: this._hiddenStats,
-      computedStyle: this._computedStyle || getComputedStyle(this),
-      now: new Date(),
-    });
+    let colorIndex = 0;
+    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
+    const chartStacked = this.chartType.endsWith("stack");
+    const statisticsData = Object.entries(this.statisticsData);
+    const totalDataSets: typeof this._chartData = [];
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    const trackY = (v: number | null | undefined) => {
+      if (typeof v === "number" && Number.isFinite(v)) {
+        if (v < yMin) yMin = v;
+        if (v > yMax) yMax = v;
+      }
+    };
+    const legendData: {
+      id: string;
+      name: string;
+      color?: ZRColor;
+      borderColor?: ZRColor;
+      noLabelClick?: boolean;
+    }[] = [];
+    const statisticIds: string[] = [];
+    let endTime: Date;

-    if (!data) {
+    if (statisticsData.length === 0) {
      return;
    }

-    this.unit = data.unit;
-    this._yAxisFractionDigits = data.yAxisFractionDigits;
-    this._chartData = data.datasets;
-    if (data.legendData.length !== this._legendData?.length) {
+    endTime =
+      this.endTime ||
+      // Get the highest date from the last date of each statistic
+      new Date(
+        Math.max(
+          ...statisticsData.map(([_, stats]) =>
+            new Date(stats[stats.length - 1].start).getTime()
+          )
+        )
+      );
+
+    if (endTime > new Date()) {
+      endTime = new Date();
+    }
+
+    // Check if we need to display most recent data. Allow 10m of leeway for "now",
+    // because stats are 5 minute aggregated.
+    // Use same now point for all statistics even if processing time means the
+    // state value is actually from a slightly later time. Otherwise the points
+    // end up separated slightly and disappear from the tooltips.
+    const now = new Date();
+    const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
+
+    // Try to determine chart unit if it has not already been set explicitly
+    if (!this.unit) {
+      let unit: string | undefined | null;
+      statisticsData.forEach(([statistic_id, _stats]) => {
+        const meta = statisticsMetaData?.[statistic_id];
+        const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+        if (unit === undefined) {
+          unit = statisticUnit;
+        } else if (unit !== null && unit !== statisticUnit) {
+          // Clear unit if not all statistics have same unit
+          unit = null;
+        }
+      });
+      if (unit) {
+        this.unit = unit;
+      }
+    }
+
+    const names = this.names || {};
+    const colors = this.colors || {};
+    statisticsData.forEach(([statistic_id, stats]) => {
+      const meta = statisticsMetaData?.[statistic_id];
+      let name = names[statistic_id];
+      if (name === undefined) {
+        name = getStatisticLabel(this.hass, statistic_id, meta);
+      }
+
+      // array containing [value1, value2, etc]
+      let prevValues: (number | null)[][] | null = null;
+      let prevEndTime: Date | undefined;
+
+      // The datasets for the current statistic
+      const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
+      const statLegendData: typeof legendData = [];
+
+      // Place bars at centre of their specified time range if this is a bar chart
+      // and the period is 5minute or hour.
+      const centerBars =
+        chartType === "bar" &&
+        (this.period === "5minute" || this.period === "hour");
+
+      const pushData = (
+        start: Date, // Data point start time
+        end: Date, // Data point end time
+        limit: Date, // Limit for end time (e.g. now)
+        dataValues: (number | null)[][]
+      ) => {
+        if (!dataValues.length) return;
+        // Limit for time range is lesser of overall limit and data point end
+        limit = end.getTime() < limit.getTime() ? end : limit;
+        if (start.getTime() > limit.getTime()) {
+          // Drop data points that are after the requested endTime. This could happen if
+          // endTime is "now" and client time is not in sync with server time.
+          return;
+        }
+        statDataSets.forEach((d, i) => {
+          if (chartType === "line") {
+            if (
+              prevEndTime &&
+              prevValues &&
+              prevEndTime.getTime() !== start.getTime()
+            ) {
+              // if the end of the previous data doesn't match the start of the current data,
+              // we have to draw a gap so add a value at the end time, and then an empty value.
+              d.data!.push([prevEndTime, ...prevValues[i]!]);
+              d.data!.push([prevEndTime, null]);
+            }
+            d.data!.push([start, ...dataValues[i]!]);
+            // For band-top rows dataValues[i] is [diff, top]; the actual Y is
+            // the last element. For regular rows it's [value]. Same call works.
+            trackY(dataValues[i][dataValues[i].length - 1]);
+          } else {
+            let time = start;
+            if (centerBars) {
+              // If centering bars, set the time to the midpoint between start and end instead
+              // of the start time.
+              time = new Date((start.getTime() + end.getTime()) / 2);
+            }
+            // Data value should always be a scalar for bar charts. Pass in
+            // real start time as extra value to allow formatting tooltip.
+            d.data!.push([time, dataValues[i][0]!, start, end]);
+            trackY(dataValues[i][0]);
+          }
+        });
+        prevValues = dataValues;
+        prevEndTime = limit;
+      };
+
+      let color = colors[statistic_id];
+      if (color === undefined) {
+        color = getGraphColorByIndex(
+          colorIndex,
+          this._computedStyle || getComputedStyle(this)
+        );
+        colorIndex++;
+      }
+
+      const statTypes: this["statTypes"] = [];
+
+      const hasMean =
+        this.statTypes.includes("mean") && statisticsHaveType(stats, "mean");
+      const hasMax =
+        this.statTypes.includes("max") && statisticsHaveType(stats, "max");
+      const hasMin =
+        this.statTypes.includes("min") && statisticsHaveType(stats, "min");
+      const drawBands =
+        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+
+      const hasState = this.statTypes.includes("state");
+
+      const bandTop = hasMax ? "max" : "mean";
+      const bandBottom = hasMin ? "min" : "mean";
+
+      const sortedTypes = drawBands
+        ? [...this.statTypes].sort((a, b) => {
+            if (a === "min" || b === "max") {
+              return -1;
+            }
+            if (a === "max" || b === "min") {
+              return +1;
+            }
+            return 0;
+          })
+        : this.statTypes;
+
+      let displayedLegend = false;
+      sortedTypes.forEach((type) => {
+        if (statisticsHaveType(stats, type)) {
+          const band = drawBands && (type === bandTop || type === bandBottom);
+          statTypes.push(type);
+          const borderColor =
+            (band && hasMin && hasMax && hasMean) ||
+            (hasState && ["change", "sum"].includes(type))
+              ? color + (this.hideLegend ? "00" : "7F")
+              : color;
+          const backgroundColor = band ? color + "3F" : color + "7F";
+          const series: LineSeriesOption | BarSeriesOption = {
+            id: `${statistic_id}-${type}`,
+            type: chartType,
+            smooth: chartType === "line" ? 0.4 : false,
+            cursor: "default",
+            data: [],
+            name: name
+              ? `${name} (${this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                )})`
+              : this.hass.localize(
+                  `ui.components.statistics_charts.statistic_types.${type}`
+                ),
+            symbol: "none",
+            // minmax sampling operates independently per series, breaking stacking alignment
+            // https://github.com/apache/echarts/issues/11879
+            sampling: band && drawBands ? "lttb" : "minmax",
+            animationDurationUpdate: 0,
+            lineStyle: {
+              width: 1.5,
+            },
+            itemStyle:
+              chartType === "bar"
+                ? {
+                    borderColor,
+                    borderWidth: 1.5,
+                  }
+                : undefined,
+            color: chartType === "bar" ? backgroundColor : borderColor,
+          };
+          if (chartStacked) {
+            series.stack = `band-stacked`;
+            series.stackStrategy = "samesign";
+            if (chartType === "line") {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          } else if (band && chartType === "line") {
+            series.stack = `band-${statistic_id}`;
+            series.stackStrategy = "all";
+            if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
+              // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
+              series.stackOrder = "seriesDesc";
+              (series as LineSeriesOption).areaStyle = undefined;
+            } else {
+              series.stackOrder = "seriesAsc";
+              if (type === bandTop) {
+                (series as LineSeriesOption).areaStyle = {
+                  color: color + "3F",
+                };
+              }
+            }
+          }
+          if (!this.hideLegend) {
+            const showLegend = hasMean
+              ? type === "mean"
+              : displayedLegend === false;
+            if (showLegend) {
+              statLegendData.push({
+                id: statistic_id,
+                name,
+                color: series.color as ZRColor,
+                borderColor: series.itemStyle?.borderColor,
+                noLabelClick: isExternalStatistic(statistic_id),
+              });
+            }
+            displayedLegend = displayedLegend || showLegend;
+          }
+          statDataSets.push(series);
+          statisticIds.push(statistic_id);
+        }
+      });
+
+      let prevDate: Date | null = null;
+      // Process chart data.
+      let firstSum: number | null | undefined = null;
+      stats.forEach((stat) => {
+        const startDate = new Date(stat.start);
+        const endDate = new Date(stat.end);
+        if (prevDate === startDate) {
+          return;
+        }
+        prevDate = startDate;
+        const dataValues: (number | null)[][] = [];
+        statTypes.forEach((type) => {
+          const val: (number | null)[] = [];
+          if (type === "sum") {
+            if (firstSum === null || firstSum === undefined) {
+              val.push(0);
+              firstSum = stat.sum;
+            } else {
+              val.push((stat.sum || 0) - firstSum);
+            }
+          } else if (
+            type === bandTop &&
+            chartType === "line" &&
+            drawBands &&
+            !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+          ) {
+            const top = stat[bandTop] || 0;
+            val.push(Math.abs(top - (stat[bandBottom] || 0)));
+            val.push(top);
+          } else {
+            val.push(stat[type] ?? null);
+          }
+          dataValues.push(val);
+        });
+        if (!this._hiddenStats.has(statistic_id)) {
+          pushData(startDate, endDate, endTime, dataValues);
+        }
+      });
+
+      // For line charts, close out the last stat segment at prevEndTime
+      const lastEndTime = prevEndTime;
+      const lastValues = prevValues;
+      if (chartType === "line" && lastEndTime && lastValues) {
+        statDataSets.forEach((d, i) => {
+          d.data!.push([lastEndTime, ...lastValues[i]!]);
+        });
+      }
+
+      // Show current state if required, and units match (or are unknown)
+      const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
+      if (
+        displayCurrentState &&
+        !chartStacked &&
+        (!this.unit || !statisticUnit || this.unit === statisticUnit)
+      ) {
+        // Skip external statistics
+        if (!isExternalStatistic(statistic_id)) {
+          const stateObj = this.hass.states[statistic_id];
+          if (stateObj) {
+            const currentValue = parseFloat(stateObj.state);
+            if (
+              isFinite(currentValue) &&
+              !this._hiddenStats.has(statistic_id)
+            ) {
+              // Then push the current state at now
+              statTypes.forEach((type, i) => {
+                if (type === "sum" || type === "change") {
+                  // Skip cumulative types - need special calculation.
+                  return;
+                }
+                const val: (number | null)[] = [];
+                if (
+                  type === bandTop &&
+                  chartType === "line" &&
+                  drawBands &&
+                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+                ) {
+                  // For band chart, current value is both min and max, so diff is 0
+                  val.push(0);
+                  val.push(currentValue);
+                } else {
+                  val.push(currentValue);
+                }
+                statDataSets[i].data!.push([now, ...val]);
+                trackY(val[val.length - 1]);
+              });
+            }
+          }
+        }
+      }
+
+      // Concat two arrays
+      Array.prototype.push.apply(totalDataSets, statDataSets);
+      Array.prototype.push.apply(legendData, statLegendData);
+    });
+
+    if (chartType === "bar") {
+      fillDataGapsAndRoundCaps(
+        totalDataSets as BarSeriesOption[],
+        chartStacked
+      );
+    }
+
+    legendData.forEach(({ id, name, color, borderColor }) => {
+      // Add an empty series for the legend
+      totalDataSets.push({
+        id: id,
+        name: name,
+        color,
+        itemStyle: {
+          borderColor,
+        },
+        type: chartType,
+        data: [],
+        xAxisIndex: 1,
+      });
+    });
+
+    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
+    this._chartData = totalDataSets;
+    if (legendData.length !== this._legendData?.length) {
      // only update the legend if it has changed or it will trigger options update
      this._legendData =
-        data.legendData.length > 1
-          ? data.legendData.map(({ id, name, noLabelClick }) => ({
+        legendData.length > 1
+          ? legendData.map(({ id, name, noLabelClick }) => ({
              id,
              name,
              noLabelClick,
@@ -530,7 +895,7 @@ export class StatisticsChart extends LitElement {
          : // if there is only one entity, let the base chart handle the legend
            undefined;
    }
-    this._statisticIds = data.statisticIds;
+    this._statisticIds = statisticIds;
  }

  private _clampYAxis(value?: number | ((values: any) => number)) {
@@ -162,7 +162,7 @@ export class HaDataTable extends LitElement {

  @state() private _filter = "";

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

  @state() private _headerHeight = 0;

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

  public selectAll(): void {
-    this._checkedRows = (this._filteredData || [])
+    this._checkedRows = this._filteredData
      .filter((data) => data.selectable !== false)
      .map((data) => data[this.id]);
    this._lastSelectedRowId = null;
@@ -216,7 +216,7 @@ export class HaDataTable extends LitElement {
      this._checkedRows = [];
    }
    ids.forEach((id) => {
-      const row = this._filteredData?.find((data) => data[this.id] === id);
+      const row = this._filteredData.find((data) => data[this.id] === id);
      if (row?.selectable !== false && !this._checkedRows.includes(id)) {
        this._checkedRows.push(id);
      }
@@ -238,7 +238,7 @@ export class HaDataTable extends LitElement {

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

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

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

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

  private _checkedRowsChanged() {
    // force scroller to update, change it's items
-    if (this._filteredData?.length) {
+    if (this._filteredData.length) {
      this._filteredData = [...this._filteredData];
    }
    fireEvent(this, "selection-changed", {
@@ -1477,11 +1465,6 @@ export class HaDataTable extends LitElement {
        .mdc-data-table__table.auto-height .scroller {
          overflow-y: hidden !important;
        }
-
-        .mdc-data-table__table.auto-height lit-virtualizer {
-          overscroll-behavior-y: auto;
-        }
-
        .grows {
          flex-grow: 1;
          flex-shrink: 1;
@@ -2,17 +2,12 @@ import { mdiDragHorizontalVariant } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import {
-  fireEvent,
-  type HASSDomCurrentTargetEvent,
-  type HASSDomEvent,
-} from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
-import type { HaEntityPicker } from "./ha-entity-picker";

@customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -156,7 +151,7 @@ class HaEntitiesPicker extends LitElement {
    `;
  }

-  private _entityMoved(e: HASSDomEvent<HASSDomEvents["item-moved"]>) {
+  private _entityMoved(e: CustomEvent) {
    e.stopPropagation();
    const { oldIndex, newIndex } = e.detail;
    const currentEntities = this._currentEntities;
@@ -183,7 +178,7 @@ class HaEntitiesPicker extends LitElement {
    return this.value || [];
  }

-  private async _updateEntities(entities: string[]) {
+  private async _updateEntities(entities) {
    this.value = entities;

    fireEvent(this, "value-changed", {
@@ -191,12 +186,9 @@ class HaEntitiesPicker extends LitElement {
    });
  }

-  private _entityChanged(
-    event: ValueChangedEvent<string> &
-      HASSDomCurrentTargetEvent<HaEntityPicker & { curValue: string }>
-  ) {
+  private _entityChanged(event: ValueChangedEvent<string>) {
    event.stopPropagation();
-    const curValue = event.currentTarget.curValue;
+    const curValue = (event.currentTarget as any).curValue;
    const newValue = event.detail.value;
    if (
      newValue === curValue ||
@@ -214,15 +206,13 @@ class HaEntitiesPicker extends LitElement {
    );
  }

-  private _addEntity(
-    event: ValueChangedEvent<string> & HASSDomCurrentTargetEvent<HaEntityPicker>
-  ) {
+  private async _addEntity(event: ValueChangedEvent<string>) {
    event.stopPropagation();
    const toAdd = event.detail.value;
    if (!toAdd) {
      return;
    }
-    event.currentTarget.value = "";
+    (event.currentTarget as any).value = "";
    if (!toAdd) {
      return;
    }
@@ -249,7 +239,6 @@ class HaEntitiesPicker extends LitElement {
    }
    .entity ha-entity-picker {
      flex: 1;
-      min-width: var(--ha-entities-picker-entity-min-width, auto);
    }
    .entity-handle {
      padding: 8px;
@@ -117,7 +117,7 @@ export class HaEntityNamePicker extends LitElement {
        <div class="header">
          ${this.label ? html`<label>${this.label}</label>` : nothing}
          <ha-button-toggle-group
-            size="s"
+            size="small"
            .buttons=${modeButtons}
            .active=${this._mode}
            .disabled=${this.disabled}
@@ -115,20 +115,6 @@ export class HaEntityStatePicker extends LitElement {
    return html`<span slot="headline">${item?.primary ?? value}</span>`;
  };

-  private _computeDefaultLabel(): string {
-    // When an attribute is configured, default to the attribute's friendly
-    // name (e.g. "Source") instead of the generic "State". Requires a concrete
-    // entity to resolve the translated name; otherwise fall back to "State".
-    if (this.attribute && this.entityId) {
-      const entityId = ensureArray(this.entityId)[0];
-      const stateObj = entityId ? this.hass.states[entityId] : undefined;
-      if (stateObj) {
-        return this.hass.formatEntityAttributeName(stateObj, this.attribute);
-      }
-    }
-    return this.hass.localize("ui.components.entity.entity-state-picker.state");
-  }
-
  protected render() {
    if (!this.hass) {
      return nothing;
@@ -143,7 +129,8 @@ export class HaEntityStatePicker extends LitElement {
        .disabled=${this.disabled || noEntity}
        .autofocus=${this.autofocus}
        .required=${this.required}
-        .label=${this.label ?? this._computeDefaultLabel()}
+        .label=${this.label ??
+        this.hass.localize("ui.components.entity.entity-state-picker.state")}
        .helper=${this.helper}
        .value=${this.value}
        .getItems=${this._getFilteredItems}
@@ -1,15 +1,12 @@
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
+import type { HomeAssistant } from "../types";
 import "./input/ha-input-multi";

@customElement("ha-aliases-editor")
 class AliasesEditor extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ type: Array }) public aliases!: string[];

@@ -28,9 +25,9 @@ class AliasesEditor extends LitElement {
        .disabled=${this.disabled}
        .sortable=${this.sortable}
        update-on-blur
-        .label=${this._localize("ui.dialogs.aliases.label")}
-        .removeLabel=${this._localize("ui.dialogs.aliases.remove")}
-        .addLabel=${this._localize("ui.dialogs.aliases.add")}
+        .label=${this.hass!.localize("ui.dialogs.aliases.label")}
+        .removeLabel=${this.hass!.localize("ui.dialogs.aliases.remove")}
+        .addLabel=${this.hass!.localize("ui.dialogs.aliases.add")}
        item-index
        @value-changed=${this._aliasesChanged}
      >
@@ -1,4 +1,3 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { LitElement, html, nothing } from "lit";
@@ -11,19 +10,10 @@ import { computeFloorName } from "../common/entity/compute_floor_name";
 import { getAreaContext } from "../common/entity/context/get_area_context";
 import { areaComboBoxKeys, getAreas } from "../data/area/area_picker";
 import { createAreaRegistryEntry } from "../data/area/area_registry";
-import {
-  apiContext,
-  areasContext,
-  devicesContext,
-  entitiesContext,
-  floorsContext,
-  internationalizationContext,
-  statesContext,
-} from "../data/context";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
-import type { ValueChangedEvent } from "../types";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
 import "./ha-generic-picker";
@@ -37,6 +27,8 @@ const ADD_NEW_ID = "___ADD_NEW___";

@customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property() public label?: string;

  @property() public value?: string;
@@ -92,37 +84,16 @@ export class HaAreaPicker extends LitElement {

  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;

-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: ContextType<typeof statesContext>;
-
-  @consume({ context: entitiesContext, subscribe: true })
-  private _entities!: ContextType<typeof entitiesContext>;
-
-  @consume({ context: devicesContext, subscribe: true })
-  private _devices!: ContextType<typeof devicesContext>;
-
-  @consume({ context: areasContext, subscribe: true })
-  private _areas!: ContextType<typeof areasContext>;
-
-  @consume({ context: floorsContext, subscribe: true })
-  private _floors!: ContextType<typeof floorsContext>;
-
  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  @state() private _pendingAreaId?: string;

-  protected willUpdate(changedProperties: PropertyValues) {
+  protected willUpdate(changedProperties: PropertyValues<this>) {
    if (
      this._pendingAreaId &&
-      changedProperties.has("_areas") &&
-      this._areas[this._pendingAreaId]
+      changedProperties.has("hass") &&
+      this.hass.areas !== changedProperties.get("hass")?.areas &&
+      this.hass.areas[this._pendingAreaId]
    ) {
      this._setValue(this._pendingAreaId);
      this._pendingAreaId = undefined;
@@ -136,11 +107,11 @@ export class HaAreaPicker extends LitElement {

  private _getAreasMemoized = memoizeOne(
    (
-      haAreas: ContextType<typeof areasContext>,
-      haFloors: ContextType<typeof floorsContext>,
-      haDevices: ContextType<typeof devicesContext>,
-      haEntities: ContextType<typeof entitiesContext>,
-      haStates: ContextType<typeof statesContext>,
+      haAreas: HomeAssistant["areas"],
+      haFloors: HomeAssistant["floors"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      haStates: HomeAssistant["states"],
      includeDomains?: string[],
      excludeDomains?: string[],
      includeDeviceClasses?: string[],
@@ -160,9 +131,9 @@ export class HaAreaPicker extends LitElement {

  // Recompute value renderer when the areas change
  private _computeValueRenderer = memoizeOne(
-    (haAreas: ContextType<typeof areasContext>): PickerValueRenderer =>
+    (_haAreas: HomeAssistant["areas"]): PickerValueRenderer =>
      (value) => {
-        const area = haAreas[value];
+        const area = this.hass.areas[value];

        if (!area) {
          return html`
@@ -171,7 +142,7 @@ export class HaAreaPicker extends LitElement {
          `;
        }

-        const { floor } = getAreaContext(area, this._floors);
+        const { floor } = getAreaContext(area, this.hass.floors);

        const areaName = area ? computeAreaName(area) : undefined;
        const floorName = floor ? computeFloorName(floor) : undefined;
@@ -195,11 +166,11 @@ export class HaAreaPicker extends LitElement {

  private _getItems = () =>
    this._getAreasMemoized(
-      this._areas,
-      this._floors,
-      this._devices,
-      this._entities,
-      this._states,
+      this.hass.areas,
+      this.hass.floors,
+      this.hass.devices,
+      this.hass.entities,
+      this.hass.states,
      this.includeDomains,
      this.excludeDomains,
      this.includeDeviceClasses,
@@ -209,7 +180,7 @@ export class HaAreaPicker extends LitElement {
    );

  private _allAreaNames = memoizeOne(
-    (areas: ContextType<typeof areasContext>) =>
+    (areas: HomeAssistant["areas"]) =>
      Object.values(areas)
        .map((area) => computeAreaName(area)?.toLowerCase())
        .filter(Boolean) as string[]
@@ -222,13 +193,13 @@ export class HaAreaPicker extends LitElement {
      return [];
    }

-    const allAreas = this._allAreaNames(this._areas);
+    const allAreas = this._allAreaNames(this.hass.areas);

    if (searchString && !allAreas.includes(searchString.toLowerCase())) {
      return [
        {
          id: ADD_NEW_ID + searchString,
-          primary: this._i18n.localize(
+          primary: this.hass.localize(
            "ui.components.area-picker.add_new_suggestion",
            {
              name: searchString,
@@ -242,7 +213,7 @@ export class HaAreaPicker extends LitElement {
    return [
      {
        id: ADD_NEW_ID,
-        primary: this._i18n.localize("ui.components.area-picker.add_new"),
+        primary: this.hass.localize("ui.components.area-picker.add_new"),
        icon_path: mdiPlus,
      },
    ];
@@ -250,17 +221,15 @@ export class HaAreaPicker extends LitElement {

  protected render(): TemplateResult {
    const baseLabel =
-      this.label ?? this._i18n.localize("ui.components.area-picker.area");
-    const areas = this._areas;
-    const floors = this._floors;
-    const valueRenderer = this._computeValueRenderer(areas);
+      this.label ?? this.hass.localize("ui.components.area-picker.area");
+    const valueRenderer = this._computeValueRenderer(this.hass.areas);

    // Only show label if there's no floor
    let label: string | undefined = baseLabel;
    if (this.value && baseLabel) {
-      const area = areas[this.value];
+      const area = this.hass.areas[this.value];
      if (area) {
-        const { floor } = getAreaContext(area, floors);
+        const { floor } = getAreaContext(area, this.hass.floors);
        if (floor) {
          label = undefined;
        }
@@ -269,11 +238,12 @@ export class HaAreaPicker extends LitElement {

    return html`
      <ha-generic-picker
+        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .label=${label}
        .helper=${this.helper}
        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this._i18n.localize("ui.components.area-picker.no_areas")}
+        .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
        .disabled=${this.disabled}
        .required=${this.required}
        .value=${this.value}
@@ -282,7 +252,7 @@ export class HaAreaPicker extends LitElement {
        .valueRenderer=${valueRenderer}
        .addButtonLabel=${this.addButtonLabel}
        .searchKeys=${areaComboBoxKeys}
-        .unknownItemText=${this._i18n.localize(
+        .unknownItemText=${this.hass.localize(
          "ui.components.area-picker.unknown"
        )}
        @value-changed=${this._valueChanged}
@@ -301,7 +271,7 @@ export class HaAreaPicker extends LitElement {
    }

    if (value.startsWith(ADD_NEW_ID)) {
-      this._i18n.loadFragmentTranslation("config");
+      this.hass.loadFragmentTranslation("config");

      const suggestedName = value.substring(ADD_NEW_ID.length);

@@ -309,15 +279,15 @@ export class HaAreaPicker extends LitElement {
        suggestedName: suggestedName,
        createEntry: async (values) => {
          try {
-            const area = await createAreaRegistryEntry(this._api, values);
-            if (this._areas[area.area_id]) {
+            const area = await createAreaRegistryEntry(this.hass, values);
+            if (this.hass.areas[area.area_id]) {
              this._setValue(area.area_id);
            } else {
              this._pendingAreaId = area.area_id;
            }
          } catch (err: any) {
            showAlertDialog(this, {
-              title: this._i18n.localize(
+              title: this.hass.localize(
                "ui.components.area-picker.failed_create_area"
              ),
              text: err.message,
@@ -338,7 +308,7 @@ export class HaAreaPicker extends LitElement {
  }

  private _notFoundLabel = (search: string) =>
-    this._i18n.localize("ui.components.area-picker.no_match", {
+    this.hass.localize("ui.components.area-picker.no_match", {
      term: html`<b>‘${search}’</b>`,
    });
 }
@@ -85,6 +85,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
                <ha-area-picker
                  .curValue=${area}
                  .noAdd=${this.noAdd}
+                  .hass=${this.hass}
                  .value=${area}
                  .label=${this.pickedAreaLabel}
                  .includeDomains=${this.includeDomains}
@@ -111,6 +112,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
      <div>
        <ha-area-picker
          .noAdd=${this.noAdd}
+          .hass=${this.hass}
          .label=${this.pickAreaLabel}
          .helper=${this.helper}
          .includeDomains=${this.includeDomains}
@@ -1,16 +1,12 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import { formattersContext } from "../data/context";
+import type { HomeAssistant } from "../types";

@customElement("ha-attribute-value")
 class HaAttributeValue extends LitElement {
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters?: ContextType<typeof formattersContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public stateObj?: HassEntity;

@@ -57,7 +53,7 @@ class HaAttributeValue extends LitElement {
    }

    if (this.hideUnit) {
-      const parts = this._formatters!.formatEntityAttributeValueToParts(
+      const parts = this.hass.formatEntityAttributeValueToParts(
        this.stateObj!,
        this.attribute
      );
@@ -67,10 +63,7 @@ class HaAttributeValue extends LitElement {
        .join("");
    }

-    return this._formatters!.formatEntityAttributeValue(
-      this.stateObj!,
-      this.attribute
-    );
+    return this.hass.formatEntityAttributeValue(this.stateObj!, this.attribute);
  }

  static styles = css`
@@ -80,6 +80,7 @@ class HaAttributes extends LitElement {
                      </div>
                      <div class="value">
                        <ha-attribute-value
+                          .hass=${this.hass}
                          .attribute=${attribute}
                          .stateObj=${this.stateObj}
                        ></ha-attribute-value>
@@ -15,7 +15,7 @@ import "./ha-svg-icon";
 *
 * @attr {ToggleButton[]} buttons - the button config
 * @attr {string} active - The value of the currently active button.
- * @attr {("s"|"m")} size - The size of the buttons in the group.
+ * @attr {("small"|"medium")} size - The size of the buttons in the group.
 * @attr {("brand"|"neutral"|"success"|"warning"|"danger")} variant - The variant of the buttons in the group.
 *
 * @fires value-changed - Dispatched when the active button changes.
@@ -26,7 +26,7 @@ export class HaButtonToggleGroup extends LitElement {

  @property() public active?: string;

-  @property({ reflect: true }) size: "s" | "m" = "m";
+  @property({ reflect: true }) size: "small" | "medium" = "medium";

  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
  public nowrap = false;
@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
 * @cssprop --ha-button-height - The height of the button.
 * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-border-radius-pill)`.
 *
- * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
+ * @attr {("small"|"medium"|"large")} size - Sets the button size.
 * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
 * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
 * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
@@ -65,7 +65,7 @@ export class HaButton extends Button {
          box-shadow: var(--ha-button-box-shadow);
        }

-        :host([size="s"]) .button {
+        :host([size="small"]) .button {
          --wa-form-control-height: var(
            --ha-button-height,
            var(--button-height, 32px)
@@ -74,7 +74,7 @@ export class HaButton extends Button {
          --wa-form-control-padding-inline: var(--ha-space-3);
        }

-        :host([size="l"]) .button {
+        :host([size="large"]) .button {
          --wa-form-control-height: var(
            --ha-button-height,
            var(--button-height, 48px)
@@ -112,16 +112,12 @@ export class HaCameraStream extends LitElement {
      return nothing;
    }
    if (stream.type === MJPEG_STREAM) {
-      const streamUrl = __DEMO__
-        ? this.stateObj.attributes.entity_picture
-        : this._connected
-          ? computeMJPEGStreamUrl(this.stateObj)
-          : this._posterUrl;
-      if (!streamUrl) {
-        return nothing;
-      }
      return html`<img
-        .src=${streamUrl}
+        .src=${__DEMO__
+          ? this.stateObj.attributes.entity_picture!
+          : this._connected
+            ? computeMJPEGStreamUrl(this.stateObj)
+            : this._posterUrl || ""}
        style=${styleMap({
          aspectRatio: this.aspectRatio,
          objectFit: this.fitMode,
@@ -1,22 +1,14 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
+import { customElement, property } from "lit/decorators";
 import type { ClimateEntity } from "../data/climate";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { formattersContext } from "../data/context";
 import { OFF, UNAVAILABLE, UNKNOWN } from "../data/entity/entity";
+import type { HomeAssistant } from "../types";

@customElement("ha-climate-state")
 class HaClimateState extends LitElement {
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters?: ContextType<typeof formattersContext>;
-
-  @state() @consumeLocalize() private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public stateObj!: ClimateEntity;

@@ -32,7 +24,7 @@ class HaClimateState extends LitElement {
                ${this.stateObj.attributes.preset_mode &&
                this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
                  ? html`-
-                    ${this._formatters!.formatEntityAttributeValue(
+                    ${this.hass.formatEntityAttributeValue(
                      this.stateObj,
                      "preset_mode"
                    )}`
@@ -45,7 +37,7 @@ class HaClimateState extends LitElement {
      ${currentStatus && !noValue
        ? html`
            <div class="current">
-              ${this._localize("ui.card.climate.currently")}:
+              ${this.hass.localize("ui.card.climate.currently")}:
              <div class="unit">${currentStatus}</div>
            </div>
          `
@@ -53,32 +45,32 @@ class HaClimateState extends LitElement {
  }

  private _computeCurrentStatus(): string | undefined {
-    if (!this._formatters || !this.stateObj) {
+    if (!this.hass || !this.stateObj) {
      return undefined;
    }
    if (
      this.stateObj.attributes.current_temperature != null &&
      this.stateObj.attributes.current_humidity != null
    ) {
-      return `${this._formatters.formatEntityAttributeValue(
+      return `${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "current_temperature"
      )}/
-      ${this._formatters.formatEntityAttributeValue(
+      ${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "current_humidity"
      )}`;
    }

    if (this.stateObj.attributes.current_temperature != null) {
-      return this._formatters.formatEntityAttributeValue(
+      return this.hass.formatEntityAttributeValue(
        this.stateObj,
        "current_temperature"
      );
    }

    if (this.stateObj.attributes.current_humidity != null) {
-      return this._formatters.formatEntityAttributeValue(
+      return this.hass.formatEntityAttributeValue(
        this.stateObj,
        "current_humidity"
      );
@@ -88,7 +80,7 @@ class HaClimateState extends LitElement {
  }

  private _computeTarget(): string {
-    if (!this._formatters || !this.stateObj) {
+    if (!this.hass || !this.stateObj) {
      return "";
    }

@@ -96,39 +88,33 @@ class HaClimateState extends LitElement {
      this.stateObj.attributes.target_temp_low != null &&
      this.stateObj.attributes.target_temp_high != null
    ) {
-      return `${this._formatters.formatEntityAttributeValue(
+      return `${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "target_temp_low"
-      )}-${this._formatters.formatEntityAttributeValue(
+      )}-${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "target_temp_high"
      )}`;
    }

    if (this.stateObj.attributes.temperature != null) {
-      return this._formatters.formatEntityAttributeValue(
-        this.stateObj,
-        "temperature"
-      );
+      return this.hass.formatEntityAttributeValue(this.stateObj, "temperature");
    }
    if (
      this.stateObj.attributes.target_humidity_low != null &&
      this.stateObj.attributes.target_humidity_high != null
    ) {
-      return `${this._formatters.formatEntityAttributeValue(
+      return `${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "target_humidity_low"
-      )}-${this._formatters.formatEntityAttributeValue(
+      )}-${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "target_humidity_high"
      )}`;
    }

    if (this.stateObj.attributes.humidity != null) {
-      return this._formatters.formatEntityAttributeValue(
-        this.stateObj,
-        "humidity"
-      );
+      return this.hass.formatEntityAttributeValue(this.stateObj, "humidity");
    }

    return "";
@@ -139,13 +125,13 @@ class HaClimateState extends LitElement {
      this.stateObj.state === UNAVAILABLE ||
      this.stateObj.state === UNKNOWN
    ) {
-      return this._localize(`state.default.${this.stateObj.state}`);
+      return this.hass.localize(`state.default.${this.stateObj.state}`);
    }

-    const stateString = this._formatters!.formatEntityState(this.stateObj);
+    const stateString = this.hass.formatEntityState(this.stateObj);

    if (this.stateObj.attributes.hvac_action && this.stateObj.state !== OFF) {
-      const actionString = this._formatters!.formatEntityAttributeValue(
+      const actionString = this.hass.formatEntityAttributeValue(
        this.stateObj,
        "hvac_action"
      );
@@ -1600,8 +1600,8 @@ export class HaCodeEditor extends ReactiveElement {
          // Filter states based on what's typed
          const filteredStates = typedText
            ? states.filter((entityState) =>
-                entityState.displayLabel
-                  ?.toLowerCase()
+                entityState.label
+                  .toLowerCase()
                  .startsWith(typedText.toLowerCase())
              )
            : states;
@@ -1658,8 +1658,8 @@ export class HaCodeEditor extends ReactiveElement {
              // Filter states based on what's typed
              const filteredStates = typedText
                ? states.filter((entityState) =>
-                    entityState.displayLabel
-                      ?.toLowerCase()
+                    entityState.label
+                      .toLowerCase()
                      .startsWith(typedText.toLowerCase())
                  )
                : states;
@@ -1,23 +1,17 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiStop } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
 import { supportsFeature } from "../common/entity/supports-feature";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { apiContext } from "../data/context";
 import type { CoverEntity } from "../data/cover";
 import { canClose, canOpen, canStop, CoverEntityFeature } from "../data/cover";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";

@customElement("ha-cover-controls")
 class HaCoverControls extends LitElement {
-  @state() @consumeLocalize() private _localize!: LocalizeFunc;
-
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public stateObj!: CoverEntity;

@@ -32,7 +26,7 @@ class HaCoverControls extends LitElement {
          class=${classMap({
            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
          })}
-          .label=${this._localize("ui.card.cover.open_cover")}
+          .label=${this.hass.localize("ui.card.cover.open_cover")}
          @click=${this._onOpenTap}
          .disabled=${!canOpen(this.stateObj)}
          .path=${computeOpenIcon(this.stateObj)}
@@ -42,7 +36,7 @@ class HaCoverControls extends LitElement {
          class=${classMap({
            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
          })}
-          .label=${this._localize("ui.card.cover.stop_cover")}
+          .label=${this.hass.localize("ui.card.cover.stop_cover")}
          .path=${mdiStop}
          @click=${this._onStopTap}
          .disabled=${!canStop(this.stateObj)}
@@ -51,7 +45,7 @@ class HaCoverControls extends LitElement {
          class=${classMap({
            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
          })}
-          .label=${this._localize("ui.card.cover.close_cover")}
+          .label=${this.hass.localize("ui.card.cover.close_cover")}
          @click=${this._onCloseTap}
          .disabled=${!canClose(this.stateObj)}
          .path=${computeCloseIcon(this.stateObj)}
@@ -63,21 +57,21 @@ class HaCoverControls extends LitElement {

  private _onOpenTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "open_cover", {
+    this.hass.callService("cover", "open_cover", {
      entity_id: this.stateObj.entity_id,
    });
  }

  private _onCloseTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "close_cover", {
+    this.hass.callService("cover", "close_cover", {
      entity_id: this.stateObj.entity_id,
    });
  }

  private _onStopTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "stop_cover", {
+    this.hass.callService("cover", "stop_cover", {
      entity_id: this.stateObj.entity_id,
    });
  }
@@ -1,12 +1,8 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { supportsFeature } from "../common/entity/supports-feature";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { apiContext } from "../data/context";
 import type { CoverEntity } from "../data/cover";
 import {
  canCloseTilt,
@@ -14,14 +10,12 @@ import {
  canStopTilt,
  CoverEntityFeature,
 } from "../data/cover";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";

@customElement("ha-cover-tilt-controls")
 class HaCoverTiltControls extends LitElement {
-  @state() @consumeLocalize() private _localize!: LocalizeFunc;
-
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) stateObj!: CoverEntity;

@@ -37,7 +31,7 @@ class HaCoverTiltControls extends LitElement {
            CoverEntityFeature.OPEN_TILT
          ),
        })}
-        .label=${this._localize("ui.card.cover.open_tilt_cover")}
+        .label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
        .path=${mdiArrowTopRight}
        @click=${this._onOpenTiltTap}
        .disabled=${!canOpenTilt(this.stateObj)}
@@ -49,7 +43,7 @@ class HaCoverTiltControls extends LitElement {
            CoverEntityFeature.STOP_TILT
          ),
        })}
-        .label=${this._localize("ui.card.cover.stop_cover")}
+        .label=${this.hass.localize("ui.card.cover.stop_cover")}
        .path=${mdiStop}
        @click=${this._onStopTiltTap}
        .disabled=${!canStopTilt(this.stateObj)}
@@ -61,7 +55,7 @@ class HaCoverTiltControls extends LitElement {
            CoverEntityFeature.CLOSE_TILT
          ),
        })}
-        .label=${this._localize("ui.card.cover.close_tilt_cover")}
+        .label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
        .path=${mdiArrowBottomLeft}
        @click=${this._onCloseTiltTap}
        .disabled=${!canCloseTilt(this.stateObj)}
@@ -70,21 +64,21 @@ class HaCoverTiltControls extends LitElement {

  private _onOpenTiltTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "open_cover_tilt", {
+    this.hass.callService("cover", "open_cover_tilt", {
      entity_id: this.stateObj.entity_id,
    });
  }

  private _onCloseTiltTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "close_cover_tilt", {
+    this.hass.callService("cover", "close_cover_tilt", {
      entity_id: this.stateObj.entity_id,
    });
  }

  private _onStopTiltTap(ev): void {
    ev.stopPropagation();
-    this._api.callService("cover", "stop_cover_tilt", {
+    this.hass.callService("cover", "stop_cover_tilt", {
      entity_id: this.stateObj.entity_id,
    });
  }
@@ -61,7 +61,7 @@ export class HaDurationInput extends LitElement {
        ${this.allowNegative
          ? html`
              <ha-button-toggle-group
-                size="s"
+                size="small"
                .buttons=${[
                  { label: "+", iconPath: mdiPlusThick, value: "+" },
                  { label: "-", iconPath: mdiMinusThick, value: "-" },
@@ -107,7 +107,6 @@ export class HaExpansionPanel extends LitElement {
    }
    const newExpanded = !this.expanded;
    fireEvent(this, "expanded-will-change", { expanded: newExpanded });
-
    this._container.style.overflow = "hidden";

    if (newExpanded) {
@@ -120,7 +120,7 @@ export class HaFileUpload extends LitElement {
            @dragend=${this._handleDragEnd}
            >${!this.value
              ? html`<ha-button
-                    size="s"
+                    size="small"
                    appearance="filled"
                    @click=${this._openFilePicker}
                  >
@@ -20,8 +20,8 @@ import {
  subscribeCategoryRegistry,
  updateCategoryRegistryEntry,
 } from "../data/category_registry";
-import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { confirmDeleteCategory } from "../panels/config/category/confirm-delete-category";
 import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -199,17 +199,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
  }

  private async _deleteCategory(id: string) {
-    const confirm = await showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.category.editor.confirm_delete"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.category.editor.confirm_delete_text"
-      ),
-      confirmText: this.hass.localize("ui.common.delete"),
-      destructive: true,
-    });
-    if (!confirm) {
+    if (!(await confirmDeleteCategory(this, this.hass))) {
      return;
    }
    try {
@@ -1,5 +1,5 @@
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { PropertyValues } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -9,18 +9,14 @@ import { stringCompare } from "../common/string/compare";
 import { deepEqual } from "../common/util/deep-equal";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
+import { haStyleScrollbar } from "../resources/styles";
+import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
 import "./ha-expansion-panel";
+import "./ha-list";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";
-import "./item/ha-list-item-option";
-import "./list/ha-list-selectable-virtualized";
-import type { HaListSelectableVirtualized } from "./list/ha-list-selectable-virtualized";
-import type { HaListVirtualizedItem } from "./list/ha-list-virtualized";
-
-interface HaFilterDevicesItem extends HaListVirtualizedItem {
-  name: string;
-}

@customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
@@ -38,12 +34,15 @@ export class HaFilterDevices extends LitElement {

  @state() private _filter?: string;

-  @query("ha-list-selectable-virtualized")
-  private _listElement?: HaListSelectableVirtualized;
+  @query("ha-list") private _list?: HTMLElement;

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

+    if (!this.hasUpdated) {
+      loadVirtualizer();
+    }
+
    if (
      properties.has("value") &&
      !deepEqual(this.value, properties.get("value"))
@@ -52,20 +51,6 @@ export class HaFilterDevices extends LitElement {
    }
  }

-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded || !this._listElement) {
-          return;
-        }
-        this._listElement.style.height = `${this.clientHeight - 49 - 4 - 38}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 38px - height of the search input
-      }, 300);
-    }
-  }
-
  protected render() {
    return html`
      <ha-expansion-panel
@@ -81,7 +66,6 @@ export class HaFilterDevices extends LitElement {
                <ha-icon-button
                  .path=${mdiFilterVariantRemove}
                  @click=${this._clearFilter}
-                  @keydown=${this._handleClearFilterKeydown}
                ></ha-icon-button>`
            : nothing}
        </div>
@@ -90,45 +74,75 @@ export class HaFilterDevices extends LitElement {
                appearance="outlined"
                .value=${this._filter}
                @input=${this._handleSearchChange}
-                @keydown=${this._handleSearchKeydown}
              >
              </ha-input-search>
-              <ha-list-selectable-virtualized
-                multi
-                .rows=${this._devices(this.hass.devices, this._filter || "")}
-                .rowRenderer=${this._renderItem}
-                @ha-list-item-selected=${this._handleAdded}
-                @ha-list-item-deselected=${this._handleRemoved}
-              ></ha-list-selectable-virtualized>`
+              <ha-list class="ha-scrollbar" multi>
+                <lit-virtualizer
+                  .items=${this._devices(
+                    this.hass.devices,
+                    this._filter || "",
+                    this.value
+                  )}
+                  .keyFunction=${this._keyFunction}
+                  .renderItem=${this._renderItem}
+                  @click=${this._handleItemClick}
+                  @keydown=${this._handleItemKeydown}
+                >
+                </lit-virtualizer>
+              </ha-list>`
          : nothing}
      </ha-expansion-panel>
    `;
  }

-  private _renderItem = (item?: HaFilterDevicesItem) =>
-    !item
-      ? nothing
-      : html`<ha-list-item-option
-          style="width: 100%;"
-          appearance="checkbox"
-          selection-position="end"
-          .value=${item.id}
-          .selected=${this.value?.includes(item.id) ?? false}
-        >
-          <span slot="headline">${item.name}</span>
-        </ha-list-item-option>`;
+  private _keyFunction = (device) => device?.id;

-  private _handleAdded(ev: CustomEvent<number>) {
-    this.value = [
-      ...(this.value ?? []),
-      this._devices(this.hass.devices, this._filter || "")[ev.detail].id,
-    ];
+  private _renderItem = (device) =>
+    !device
+      ? nothing
+      : html`<ha-check-list-item
+          tabindex="0"
+          .value=${device.id}
+          .selected=${this.value?.includes(device.id) ?? false}
+        >
+          ${computeDeviceNameDisplay(
+            device,
+            this.hass.localize,
+            this.hass.states
+          )}
+        </ha-check-list-item>`;
+
+  private _handleItemKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._handleItemClick(ev);
+    }
  }

-  private _handleRemoved(ev: CustomEvent<number>) {
-    const id = this._devices(this.hass.devices, this._filter || "")[ev.detail]
-      .id;
-    this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
+  private _handleItemClick(ev) {
+    const listItem = ev.target.closest("ha-check-list-item");
+    const value = listItem?.value;
+    if (!value) {
+      return;
+    }
+    if (this.value?.includes(value)) {
+      this.value = this.value?.filter((val) => val !== value);
+    } else {
+      this.value = [...(this.value || []), value];
+    }
+    listItem.selected = this.value?.includes(value);
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        // 49px - height of a header + 1px
+        // 4px - padding-top of the search-input
+        // 32px - height of the search input
+      }, 300);
+    }
  }

  private _expandedWillChange(ev) {
@@ -141,38 +155,30 @@ export class HaFilterDevices extends LitElement {

  private _handleSearchChange(ev: InputEvent) {
    const target = ev.target as HaInputSearch;
-    this._filter = target.value ?? "";
-  }
-
-  private _handleSearchKeydown(ev: KeyboardEvent) {
-    if (ev.key === "ArrowDown" && this._listElement) {
-      ev.preventDefault();
-      this._listElement.focus();
-    }
+    this._filter = (target.value ?? "").toLowerCase();
  }

  private _devices = memoizeOne(
-    (
-      devices: HomeAssistant["devices"],
-      filter: string
-    ): HaFilterDevicesItem[] => {
+    (devices: HomeAssistant["devices"], filter: string, _value) => {
      const values = Object.values(devices);
      return values
-        .map((device) => ({
-          id: device.id,
-          interactive: true,
-          name: computeDeviceNameDisplay(
-            device,
-            this.hass.localize,
-            this.hass.states
-          ),
-        }))
        .filter(
-          ({ name }) =>
-            !filter || name.toLowerCase().includes(filter.toLowerCase())
+          (device) =>
+            !filter ||
+            computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
+              .toLowerCase()
+              .includes(filter)
        )
        .sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
+          stringCompare(
+            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
+            this.hass.locale.language
+          )
        );
    }
  );
@@ -211,13 +217,6 @@ export class HaFilterDevices extends LitElement {
    });
  }

-  private _handleClearFilterKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._clearFilter(ev);
-    }
-  }
-
  private _clearFilter(ev) {
    ev.preventDefault();
    this.value = undefined;
@@ -225,61 +224,58 @@ export class HaFilterDevices extends LitElement {
      value: undefined,
      items: undefined,
    });
-    this._listElement?.clearSelection();
  }

-  static styles = css`
-    :host {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    :host([expanded]) {
-      flex: 1;
-      height: 0;
-      display: flex;
-      flex-direction: column;
-    }
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }

-    ha-expansion-panel {
-      --ha-card-border-radius: var(--ha-border-radius-square);
-      --expansion-panel-content-padding: 0;
-    }
-    :host([expanded]) ha-expansion-panel {
-      flex: 1;
-      min-height: 0;
-    }
-    ha-list-selectable-virtualized {
-      flex: 1;
-      min-height: 0;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-    }
-    .header ha-icon-button {
-      margin-inline-start: auto;
-      margin-inline-end: 8px;
-    }
-    .badge {
-      display: inline-block;
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: 0;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0px 2px;
-      color: var(--text-primary-color);
-    }
-    ha-input-search {
-      display: block;
-      padding: var(--ha-space-1) var(--ha-space-2) 0;
-    }
-  `;
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: 0;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: var(--ha-border-radius-circle);
+          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
+          background-color: var(--primary-color);
+          line-height: var(--ha-line-height-normal);
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-check-list-item {
+          width: 100%;
+        }
+        ha-input-search {
+          display: block;
+          padding: var(--ha-space-1) var(--ha-space-2) 0;
+        }
+      `,
+    ];
+  }
 }

 declare global {
@@ -23,6 +23,7 @@ import "./item/ha-list-item-option";
 import type { HaListItemOption } from "./item/ha-list-item-option";
 import "./list/ha-list-selectable";
 import type { HaListSelectable } from "./list/ha-list-selectable";
+import type { HaListSelectedDetail } from "./list/types";

@customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
@@ -41,7 +42,7 @@ export class HaFilterFloorAreas extends LitElement {

  @state() private _shouldRender = false;

-  @query("ha-list-selectable") private _list?: HaListSelectable;
+  @query("ha-list-selectable") private _list?: HTMLElement;

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);
@@ -74,7 +75,6 @@ export class HaFilterFloorAreas extends LitElement {
                <ha-icon-button
                  .path=${mdiFilterVariantRemove}
                  @click=${this._clearFilter}
-                  @keydown=${this._handleClearFilterKeydown}
                ></ha-icon-button>`
            : nothing}
        </div>
@@ -83,8 +83,7 @@ export class HaFilterFloorAreas extends LitElement {
              <ha-list-selectable
                class="ha-scrollbar"
                multi
-                @ha-list-item-selected=${this._handleAdded}
-                @ha-list-item-deselected=${this._handleRemoved}
+                @ha-list-selected=${this._handleListChanged}
                aria-label=${this.hass.localize(
                  "ui.panel.config.areas.caption"
                )}
@@ -164,47 +163,46 @@ export class HaFilterFloorAreas extends LitElement {
    `;
  }

-  private _handleAdded(ev: CustomEvent<number>) {
-    if (!this.value) {
-      this.value = {};
-    }
-
-    const addedItem = (ev.currentTarget as HaListSelectable).items[
-      ev.detail
-    ] as HaListItemOption & { type: string; value: string };
-
-    if (!addedItem) {
+  private _handleListChanged(ev: CustomEvent<HaListSelectedDetail>) {
+    if (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size) {
      return;
    }

-    this.value = {
-      ...this.value,
-      [addedItem.type]: [
-        ...(this.value[addedItem.type] || []),
-        addedItem.value,
-      ],
-    };
-  }
+    if (ev.detail.diff?.added.size) {
+      const addedIndex = ev.detail.diff.added.values().next().value;
+      if (addedIndex === undefined) {
+        return;
+      }
+      const addedItem = (ev.currentTarget as HaListSelectable).items[
+        addedIndex
+      ] as HaListItemOption & { type: string; value: string };

-  private _handleRemoved(ev: CustomEvent<number>) {
-    if (!this.value) {
-      return;
+      if (!this.value) {
+        this.value = {};
+      }
+      this.value = {
+        ...this.value,
+        [addedItem.type]: [
+          ...(this.value[addedItem.type] || []),
+          addedItem.value,
+        ],
+      };
+    } else {
+      const removedIndex = ev.detail.diff?.removed.values().next().value;
+      if (removedIndex === undefined) {
+        return;
+      }
+      const removedItem = (ev.currentTarget as HaListSelectable).items[
+        removedIndex
+      ] as HaListItemOption & { type: string; value: string };
+
+      this.value = {
+        ...this.value,
+        [removedItem.type]: this.value![removedItem.type].filter(
+          (val) => val !== removedItem.value
+        ),
+      };
    }
-
-    const removedItem = (ev.currentTarget as HaListSelectable).items[
-      ev.detail
-    ] as HaListItemOption & { type: string; value: string };
-
-    if (!removedItem) {
-      return;
-    }
-
-    this.value = {
-      ...this.value,
-      [removedItem.type]: this.value![removedItem.type].filter(
-        (val) => val !== removedItem.value
-      ),
-    };
  }

  protected updated(changed: PropertyValues<this>) {
@@ -288,13 +286,6 @@ export class HaFilterFloorAreas extends LitElement {
    });
  }

-  private _handleClearFilterKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._clearFilter(ev);
-    }
-  }
-
  private _clearFilter(ev) {
    ev.preventDefault();
    this.value = undefined;
@@ -302,7 +293,6 @@ export class HaFilterFloorAreas extends LitElement {
      value: undefined,
      items: undefined,
    });
-    this._list?.clearSelection();
  }

  static get styles(): CSSResultGroup {
@@ -1,19 +1,17 @@
 import type { SelectedDetail } from "@material/mwc-list";
-import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, manifestsContext } from "../data/context";
 import type { IntegrationManifest } from "../data/integration";
-import { domainToName } from "../data/integration";
+import { domainToName, fetchIntegrationManifests } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
@@ -23,26 +21,15 @@ import type { HaInputSearch } from "./input/ha-input-search";

@customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property({ attribute: false }) public value?: string[];

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

  @property({ type: Boolean, reflect: true }) public expanded = false;

-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @consume({ context: manifestsContext, subscribe: true })
-  @state()
-  private _manifests?: ContextType<typeof manifestsContext>;
-
-  private _manifestList = memoizeOne(
-    (manifests: ContextType<typeof manifestsContext>) =>
-      Object.values(manifests)
-  );
+  @state() private _manifests?: IntegrationManifest[];

  @state() private _shouldRender = false;

@@ -51,10 +38,6 @@ export class HaFilterIntegrations extends LitElement {
  @query("ha-list") private _list?: HTMLElement;

  protected render() {
-    const manifests = this._manifests
-      ? this._manifestList(this._manifests)
-      : undefined;
-
    return html`
      <ha-expansion-panel
        left-chevron
@@ -63,7 +46,7 @@ export class HaFilterIntegrations extends LitElement {
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
-          ${this._localize("ui.panel.config.integrations.caption")}
+          ${this.hass.localize("ui.panel.config.integrations.caption")}
          ${this.value?.length
            ? html`<div class="badge">${this.value?.length}</div>
                <ha-icon-button
@@ -72,7 +55,7 @@ export class HaFilterIntegrations extends LitElement {
                ></ha-icon-button>`
            : nothing}
        </div>
-        ${manifests && this._shouldRender
+        ${this._manifests && this._shouldRender
          ? html`<ha-input-search
                appearance="outlined"
                .value=${this._filter}
@@ -86,11 +69,10 @@ export class HaFilterIntegrations extends LitElement {
              >
                ${repeat(
                  this._integrations(
-                    this._localize,
-                    manifests,
+                    this.hass.localize,
+                    this._manifests,
                    this._filter,
-                    this.value,
-                    this._i18n.locale.language
+                    this.value
                  ),
                  (i) => i.domain,
                  (integration) =>
@@ -135,8 +117,9 @@ export class HaFilterIntegrations extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  protected firstUpdated() {
-    this._i18n.loadBackendTranslation("title");
+  protected async firstUpdated() {
+    this._manifests = await fetchIntegrationManifests(this.hass);
+    this.hass.loadBackendTranslation("title");
  }

  private _integrations = memoizeOne(
@@ -144,8 +127,7 @@ export class HaFilterIntegrations extends LitElement {
      localize: LocalizeFunc,
      manifest: IntegrationManifest[],
      filter: string | undefined,
-      _value: string[] | undefined,
-      language: string
+      _value
    ) =>
      manifest
        .map((mnfst) => ({
@@ -162,20 +144,17 @@ export class HaFilterIntegrations extends LitElement {
              mnfst.name.toLowerCase().includes(filter) ||
              mnfst.domain.toLowerCase().includes(filter))
        )
-        .sort((a, b) => stringCompare(a.name, b.name, language))
+        .sort((a, b) =>
+          stringCompare(a.name, b.name, this.hass.locale.language)
+        )
  );

  private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    if (!this._manifests) {
-      return;
-    }
-
    const integrations = this._integrations(
-      this._localize,
-      this._manifestList(this._manifests),
+      this.hass.localize,
+      this._manifests!,
      this._filter,
-      this.value,
-      this._i18n.locale.language
+      this.value
    );

    const visibleDomains = new Set(integrations.map((i) => i.domain));
@@ -129,7 +129,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
              @wa-select=${this._handleAddAction}
              @closed=${stopPropagation}
            >
-              <ha-button slot="trigger" appearance="filled" size="s">
+              <ha-button slot="trigger" appearance="filled" size="small">
                <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                ${this.localize?.("ui.components.form-optional-actions.add") ||
                "Add interaction"}
@@ -174,7 +174,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
          <slot name="field">
            ${this.addButtonLabel && !this.value
              ? html`<ha-button
-                  size="s"
+                  size="small"
                  appearance="filled"
                  @click=${this.open}
                  .disabled=${this.disabled}
@@ -8,12 +8,13 @@ import { conditionalClamp } from "../common/number/clamp";
 import type { CardGridSize } from "../panels/lovelace/common/compute-card-grid-size";
 import { DEFAULT_GRID_SIZE } from "../panels/lovelace/common/compute-card-grid-size";
 import "../panels/lovelace/editor/card-editor/ha-grid-layout-slider";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-grid-size-picker")
 export class HaGridSizeEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property({ attribute: false }) public value?: CardGridSize;

  @property({ attribute: false }) public rows = 8;
@@ -34,10 +35,6 @@ export class HaGridSizeEditor extends LitElement {

  @state() public _localValue?: CardGridSize = { rows: 1, columns: 1 };

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected willUpdate(changedProperties: PropertyValues<this>) {
    if (changedProperties.has("value")) {
      this._localValue = this.value;
@@ -65,7 +62,9 @@ export class HaGridSizeEditor extends LitElement {
    return html`
      <div class="grid">
        <ha-grid-layout-slider
-          aria-label=${this._localize("ui.components.grid-size-picker.columns")}
+          aria-label=${this.hass.localize(
+            "ui.components.grid-size-picker.columns"
+          )}
          id="columns"
          .min=${columnMin}
          .max=${columnMax}
@@ -79,7 +78,9 @@ export class HaGridSizeEditor extends LitElement {
        ></ha-grid-layout-slider>

        <ha-grid-layout-slider
-          aria-label=${this._localize("ui.components.grid-size-picker.rows")}
+          aria-label=${this.hass.localize(
+            "ui.components.grid-size-picker.rows"
+          )}
          id="rows"
          .min=${rowMin}
          .max=${rowMax}
@@ -97,10 +98,10 @@ export class HaGridSizeEditor extends LitElement {
                @click=${this._reset}
                class="reset"
                .path=${mdiRestore}
-                label=${this._localize(
+                label=${this.hass.localize(
                  "ui.components.grid-size-picker.reset_default"
                )}
-                title=${this._localize(
+                title=${this.hass.localize(
                  "ui.components.grid-size-picker.reset_default"
                )}
              >
@@ -1,21 +1,13 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { formattersContext } from "../data/context";
+import { customElement, property } from "lit/decorators";
 import { OFF, UNAVAILABLE, UNKNOWN } from "../data/entity/entity";
 import type { HumidifierEntity } from "../data/humidifier";
+import type { HomeAssistant } from "../types";

@customElement("ha-humidifier-state")
 class HaHumidifierState extends LitElement {
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters?: ContextType<typeof formattersContext>;
-
-  @state() @consumeLocalize() private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public stateObj!: HumidifierEntity;

@@ -30,7 +22,7 @@ class HaHumidifierState extends LitElement {
                ${this._localizeState()}
                ${this.stateObj.attributes.mode
                  ? html`-
-                    ${this._formatters!.formatEntityAttributeValue(
+                    ${this.hass.formatEntityAttributeValue(
                      this.stateObj,
                      "mode"
                    )}`
@@ -42,19 +34,19 @@ class HaHumidifierState extends LitElement {

      ${currentStatus && !noValue
        ? html`<div class="current">
-            ${this._localize("ui.card.humidifier.currently")}:
+            ${this.hass.localize("ui.card.humidifier.currently")}:
            <div class="unit">${currentStatus}</div>
          </div>`
        : ""}`;
  }

  private _computeCurrentStatus(): string | undefined {
-    if (!this._formatters || !this.stateObj) {
+    if (!this.hass || !this.stateObj) {
      return undefined;
    }

    if (this.stateObj.attributes.current_humidity != null) {
-      return `${this._formatters.formatEntityAttributeValue(
+      return `${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "current_humidity"
      )}`;
@@ -64,12 +56,12 @@ class HaHumidifierState extends LitElement {
  }

  private _computeTarget(): string {
-    if (!this._formatters || !this.stateObj) {
+    if (!this.hass || !this.stateObj) {
      return "";
    }

    if (this.stateObj.attributes.humidity != null) {
-      return `${this._formatters.formatEntityAttributeValue(
+      return `${this.hass.formatEntityAttributeValue(
        this.stateObj,
        "humidity"
      )}`;
@@ -83,13 +75,13 @@ class HaHumidifierState extends LitElement {
      this.stateObj.state === UNAVAILABLE ||
      this.stateObj.state === UNKNOWN
    ) {
-      return this._localize(`state.default.${this.stateObj.state}`);
+      return this.hass.localize(`state.default.${this.stateObj.state}`);
    }

-    const stateString = this._formatters!.formatEntityState(this.stateObj);
+    const stateString = this.hass.formatEntityState(this.stateObj);

    if (this.stateObj.attributes.action && this.stateObj.state !== OFF) {
-      const actionString = this._formatters!.formatEntityAttributeValue(
+      const actionString = this.hass.formatEntityAttributeValue(
        this.stateObj,
        "action"
      );
@@ -3,12 +3,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-icon-button-arrow-next")
 export class HaIconButtonArrowNext extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
  @property({ type: Boolean }) public disabled = false;

  @property() public label?: string;
@@ -16,15 +17,11 @@ export class HaIconButtonArrowNext extends LitElement {
  @state() private _icon =
    mainWindow.document.dir === "rtl" ? mdiArrowLeft : mdiArrowRight;

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected render(): TemplateResult {
    return html`
      <ha-icon-button
        .disabled=${this.disabled}
-        .label=${this.label || this._localize("ui.common.next") || "Next"}
+        .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
        .path=${this._icon}
      ></ha-icon-button>
    `;
@@ -3,12 +3,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
  @property({ type: Boolean }) public disabled = false;

  @property() public label?: string;
@@ -24,15 +25,11 @@ export class HaIconButtonArrowPrev extends LitElement {
  @state() private _icon =
    mainWindow.document.dir === "rtl" ? mdiArrowRight : mdiArrowLeft;

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected render(): TemplateResult {
    return html`
      <ha-icon-button
        .disabled=${this.disabled}
-        .label=${this.label || this._localize("ui.common.back") || "Back"}
+        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
        .path=${this._icon}
        .href=${this.href}
        .target=${this.target}
@@ -3,12 +3,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-icon-button-next")
 export class HaIconButtonNext extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
  @property({ type: Boolean }) public disabled = false;

  @property() public label?: string;
@@ -24,15 +25,11 @@ export class HaIconButtonNext extends LitElement {
  @state() private _icon =
    mainWindow.document.dir === "rtl" ? mdiChevronLeft : mdiChevronRight;

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected render(): TemplateResult {
    return html`
      <ha-icon-button
        .disabled=${this.disabled}
-        .label=${this.label || this._localize("ui.common.next") || "Next"}
+        .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
        .path=${this._icon}
        .href=${this.href}
        .target=${this.target}
@@ -3,12 +3,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-icon-button-prev")
 export class HaIconButtonPrev extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
  @property({ type: Boolean }) public disabled = false;

  @property() public label?: string;
@@ -24,15 +25,11 @@ export class HaIconButtonPrev extends LitElement {
  @state() private _icon =
    mainWindow.document.dir === "rtl" ? mdiChevronRight : mdiChevronLeft;

-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected render(): TemplateResult {
    return html`
      <ha-icon-button
        .disabled=${this.disabled}
-        .label=${this.label || this._localize("ui.common.back") || "Back"}
+        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
        .path=${this._icon}
        .href=${this.href}
        .target=${this.target}
@@ -171,7 +171,7 @@ export class HaLabelsPicker extends LitElement {
            : nothing}
          <ha-button
            id="picker"
-            size="s"
+            size="small"
            appearance="filled"
            @click=${this._openPicker}
            .disabled=${this.disabled}
@@ -53,7 +53,7 @@ class HaLawnMowerActionButton extends LitElement {
          appearance="plain"
          @click=${this.callService}
          .service=${action.service}
-          size="s"
+          size="small"
        >
          ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
        </ha-button>
@@ -1,36 +1,18 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiMenu } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import {
-  connectionContext,
-  narrowViewportContext,
-  uiContext,
-} from "../data/context";
 import { subscribeNotifications } from "../data/persistent_notification";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";

@customElement("ha-menu-button")
 class HaMenuButton extends LitElement {
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection?: ContextType<typeof connectionContext>;
+  @property({ type: Boolean }) public narrow = false;

-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: narrowViewportContext, subscribe: true })
-  private _narrow = false;
-
-  @state()
-  @consume({ context: uiContext, subscribe: true })
-  private _ui?: ContextType<typeof uiContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _hasNotifications = false;

@@ -44,7 +26,7 @@ class HaMenuButton extends LitElement {

  public connectedCallback() {
    super.connectedCallback();
-    if (this._attachNotifOnConnect && this._connection) {
+    if (this._attachNotifOnConnect) {
      this._attachNotifOnConnect = false;
      this._subscribeNotifications();
    }
@@ -60,15 +42,15 @@ class HaMenuButton extends LitElement {
  }

  protected render() {
-    if (!this._show || !this._ui) {
+    if (!this._show) {
      return nothing;
    }
    const hasNotifications =
      this._hasNotifications &&
-      (this._narrow || this._ui.dockedSidebar === "always_hidden");
+      (this.narrow || this.hass.dockedSidebar === "always_hidden");
    return html`
      <ha-icon-button
-        .label=${this._localize("ui.sidebar.sidebar_toggle")}
+        .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
        .path=${mdiMenu}
        @click=${this._toggleMenu}
      ></ha-icon-button>
@@ -76,25 +58,30 @@ class HaMenuButton extends LitElement {
    `;
  }

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

-    if (
-      !changedProps.has("_narrow") &&
-      !changedProps.has("_ui") &&
-      !changedProps.has("_connection")
-    ) {
+    if (!changedProps.has("narrow") && !changedProps.has("hass")) {
      return;
    }

-    if (changedProps.has("_connection") && this._unsubNotifications) {
-      this._unsubNotifications();
-      this._unsubNotifications = undefined;
-    }
+    const oldHass = changedProps.has("hass")
+      ? (changedProps.get("hass") as HomeAssistant | undefined)
+      : this.hass;
+    const oldNarrow = changedProps.has("narrow")
+      ? (changedProps.get("narrow") as boolean | undefined)
+      : this.narrow;

+    const oldShowButton =
+      oldHass?.kioskMode === false &&
+      (oldNarrow || oldHass?.dockedSidebar === "always_hidden");
    const showButton =
-      this._ui?.kioskMode === false &&
-      (this._narrow || this._ui.dockedSidebar === "always_hidden");
+      this.hass.kioskMode === false &&
+      (this.narrow || this.hass.dockedSidebar === "always_hidden");
+
+    if (this.hasUpdated && oldShowButton === showButton) {
+      return;
+    }

    this._show = showButton || this._alwaysVisible;

@@ -106,10 +93,7 @@ class HaMenuButton extends LitElement {
      return;
    }

-    if (!this._unsubNotifications && this._connection) {
-      this._attachNotifOnConnect = false;
-      this._subscribeNotifications();
-    }
+    this._subscribeNotifications();
  }

  private _subscribeNotifications() {
@@ -117,7 +101,7 @@ class HaMenuButton extends LitElement {
      throw new Error("Already subscribed");
    }
    this._unsubNotifications = subscribeNotifications(
-      this._connection!.connection,
+      this.hass.connection,
      (notifications) => {
        this._hasNotifications = notifications.length > 0;
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aidan Timson	153290593b	Remove option to group	2026-06-02 14:56:37 +01:00
Aidan Timson	189477a1d4	Categories data table	2026-06-02 14:52:55 +01:00