Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

.agents/skills/ha-frontend-components/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: ha-frontend-components
+description: Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
+---
+
+# HA Frontend Components
+
+Use this skill when creating or reviewing Home Assistant UI components and common interaction patterns.
+
+## Dialogs
+
+Open dialogs through the fire-event pattern:
+
+```ts
+fireEvent(this, "show-dialog", {
+  dialogTag: "dialog-example",
+  dialogImport: () => import("./dialog-example"),
+  dialogParams: { title: "Example", data: someData },
+});
+```
+
+Dialog implementation requirements:
+
+- Use `ha-dialog`.
+- Use `DialogMixin`, which implements `HassDialogNext<T>`, for new dialogs. See `src/dialogs/dialog-mixin.ts`.
+- Existing dialogs may implement the legacy `HassDialog<T>` interface from `src/dialogs/make-dialog-manager.ts`.
+- Use `@state() private _open = false` to control visibility.
+- Set `_open = true` in `showDialog()` and `_open = false` in `closeDialog()`.
+- Return `nothing` while required params are absent.
+- Fire `dialog-closed` in the close handler.
+- Use `header-title` and `header-subtitle` for simple header text.
+- Use slots when standard header attributes are not enough.
+- Use `ha-dialog-footer` with `primaryAction` and `secondaryAction` slots.
+- Add `autofocus` to the first focusable element, such as `<ha-form autofocus>`, and forward it internally if needed.
+
+Use standard dialog widths: `small`, `medium`, `large`, or `full`. Avoid custom dialog sizing unless there is a clear product need.
+
+## Buttons
+
+`ha-button` wraps the Web Awesome button in `src/components/ha-button.ts`.
+
+Axes:
+
+- `variant`: `brand`, `neutral`, `danger`, `warning`, `success`.
+- `appearance`: `accent`, `filled`, `outlined`, `plain`.
+- `size`: `xs`, `s`, `m`, `l`, `xl`.
+
+Common usage:
+
+- Use `appearance="filled"` for primary emphasis when needed.
+- Use `appearance="plain"` for cancel and dismiss actions.
+- Use `variant="danger"` for destructive actions.
+- Place primary actions in `slot="primaryAction"` and secondary actions in `slot="secondaryAction"`.
+
+## Forms
+
+`ha-form` is schema-driven with `HaFormSchema[]` and supports common selectors for entities, devices, areas, targets, numbers, booleans, time, actions, text, objects, selects, icons, media, and location.
+
+Use `computeLabel`, `computeError`, and `computeHelper` for translated labels, validation, and helper text.
+
+```ts
+<ha-form
+  .hass=${this.hass}
+  .data=${this._data}
+  .schema=${this._schema}
+  .error=${this._errors}
+  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
+  @value-changed=${this._valueChanged}
+></ha-form>
+```
+
+## Alerts
+
+Use `ha-alert` for user-visible status messaging.
+
+- Alert types: `error`, `warning`, `info`, `success`.
+- Useful properties: `title`, `alert-type`, `dismissable`, `narrow`.
+- Slots: `icon` for custom leading icon, `action` for custom action content.
+- Content is announced by screen readers when dynamically displayed.
+
+```html
+<ha-alert alert-type="error">Error message</ha-alert>
+<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
+<ha-alert alert-type="success" dismissable>Success message</ha-alert>
+```
+
+## Shortcuts And Tooltips
+
+Use `ShortcutManager` from `src/common/keyboard/shortcuts.ts` for keyboard shortcuts. It blocks shortcuts in input fields, can prevent shortcuts during text selection, and supports character and KeyCode shortcuts for non-latin keyboards. See `src/state/quick-bar-mixin.ts` for global shortcut examples.
+
+Use `ha-tooltip` from `src/components/ha-tooltip.ts` for contextual hover help. See `src/components/ha-label.ts` for an example.
+
+## Panels And Lovelace Cards
+
+Panels commonly extend `SubscribeMixin(LitElement)` and receive route and narrow-layout properties.
+
+Lovelace cards should implement `LovelaceCard`, validate config in `setConfig()`, handle loading, error, unavailable, and missing-entity states, and add a configuration editor when needed.
+
+Cards are user-story surfaces. Support different households, entity types, responsive layouts, and accessible interaction states.

.agents/skills/ha-frontend-contexts/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: ha-frontend-contexts
+description: Home Assistant frontend Lit context and hass migration guidance. Use when adding or changing component state access, replacing hass reads, consuming entity or registry contexts, or reviewing rerender behavior.
+---
+
+# HA Frontend Contexts
+
+Use this skill when a component reads Home Assistant state, registries, localization, services, config, UI data, connection state, or API helpers.
+
+## Goal
+
+Move leaf components away from the broad `hass: HomeAssistant` object. Broad `hass` access rerenders components for unrelated changes, hides the data a component depends on, and makes tests harder to mock.
+
+Container components may keep `hass` when they own it and feed providers. Leaf components should consume the narrowest context that covers their reads.
+
+## Core Files
+
+- Context definitions: `src/data/context/index.ts`
+- Entity-scoped consume helpers: `src/common/decorators/consume-context-entry.ts`
+- Transform decorator: `src/common/decorators/transform.ts`
+- Canonical migration example: `src/panels/lovelace/cards/hui-button-card.ts`
+- Providers are wired by `contextMixin` on `HassBaseEl`; consumers do not wire providers manually.
+
+## Context Selection
+
+| Context                                                              | Replaces                                                                               |
+| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `statesContext`                                                      | `hass.states`                                                                          |
+| `entitiesContext`, `devicesContext`, `areasContext`, `floorsContext` | `hass.entities`, `hass.devices`, `hass.areas`, `hass.floors`                           |
+| `registriesContext`                                                  | all four registries together                                                           |
+| `servicesContext`                                                    | `hass.services`                                                                        |
+| `internationalizationContext`                                        | `hass.localize`, `hass.locale`, `hass.language`                                        |
+| `formattersContext`                                                  | entity and attribute formatters                                                        |
+| `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`                                                          | themes, selected theme, panels, sidebar, and UI state                                  |
+| `narrowViewportContext`                                              | narrow-layout boolean                                                                  |
+
+Lazy contexts subscribe on first consumer and tear down after the last consumer: `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, and `manifestsContext`.
+
+The single-field contexts such as `localizeContext`, `themesContext`, and `userContext` are deprecated. Use grouped contexts instead.
+
+## Consumption Patterns
+
+Use entity-scoped helpers when the component watches an entity id held on the host:
+
+```ts
+@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
+private _stateObj?: HassEntity;
+
+@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
+private _entity?: EntityRegistryDisplayEntry;
+
+@state() @consumeLocalize()
+private _localize!: LocalizeFunc;
+```
+
+For a single field from a grouped context, pair `@consume` with `@transform`:
+
+```ts
+@state()
+@consume({ context: uiContext, subscribe: true })
+@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
+private _themes!: Themes;
+```
+
+Use `@transform` with `watch` when the transformer depends on a host property, such as a computed entity id. `consumeEntityState` only watches the first path segment.
+
+To consume a whole group untransformed, omit `@transform` and type the field as `ContextType<typeof statesContext>` or the matching context type.
+
+## Review Checklist
+
+- The component consumes the narrowest context needed for the data it reads.
+- A broad `hass` property is kept only when the component is a container or external API requires it.
+- Entity-scoped reads use the consume helpers rather than ad hoc context transforms.
+- Context fields are marked `@state()` so updates trigger rendering.
+- Tests and mocks only provide the data the component actually consumes.

.agents/skills/ha-frontend-review/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: ha-frontend-review
+description: Home Assistant frontend PR and review guidance. Use when reviewing frontend changes, preparing a PR, checking recurring review issues, or applying the PR template.
+---
+
+# HA Frontend Review
+
+Use this skill when reviewing Home Assistant frontend changes or preparing a pull request.
+
+## Pull Request Body
+
+When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body.
+
+- Do not omit, reorder, or rewrite template sections.
+- Check the appropriate "Type of change" box based on the actual change.
+- Do not check checklist items on behalf of the user.
+- If the PR includes UI changes, remind the user to add screenshots or a short video.
+- Explain what the change does for users, not only implementation details.
+- Use Markdown.
+
+## Pre-Submission Checklist
+
+- `yarn lint` passes when practical for the scope.
+- `yarn test` or focused relevant tests are green when practical for the scope.
+- Tests are added or updated for new data processing and utilities where applicable.
+- User-facing text is localized and follows `ha-frontend-user-facing-text` guidance.
+- Components handle loading, error, unavailable, and missing-entity states.
+- Entity existence is checked before property access.
+- Event listeners and subscriptions are cleaned up.
+- UI is accessible to screen readers and keyboard users.
+
+## Recurring Review Issues
+
+User experience and accessibility:
+
+- Forms need proper labels, helper text, and validation feedback.
+- Form markup should not cause password managers to identify fields incorrectly.
+- Clickable areas should be large enough for touch interaction.
+- Hover, active, disabled, loading, and focus states should be clear.
+
+Dialog and modal patterns:
+
+- Multi-step operations should show progress.
+- Dialog state should survive background operations correctly.
+- Cancel and close buttons should behave consistently.
+- Defaults should be helpful without blocking user override.
+
+Component design patterns:
+
+- Terminology should be consistent. Use words like "Join" or "Apply" instead of "Group" when that better matches the user action.
+- Visual hierarchy should use appropriate font sizes, weights, and spacing ratios.
+- Components should align to the design grid.
+- Badges and indicators should be placed consistently.
+
+Code quality:
+
+- Null and undefined paths should be handled explicitly.
+- Potentially undefined array and object access should be guarded.
+- Event handlers, timers, observers, and subscriptions should be cleaned up.
+
+Configuration and props:
+
+- Make configuration fields optional when sensible.
+- Provide reasonable defaults.
+- Keep APIs extensible without adding speculative abstractions.
+- Validate configuration before applying changes.
+
+## Review Flow
+
+- Identify behavioral regressions, bugs, accessibility issues, and missing tests first.
+- Keep style-only comments secondary unless they affect maintainability or user experience.
+- Prefer small, direct fixes over large refactors during review follow-up.
+- Cross-load `ha-frontend-contexts`, `ha-frontend-components`, `ha-frontend-styling`, `ha-frontend-testing`, or `ha-frontend-user-facing-text` when a finding falls in that area.

.agents/skills/ha-frontend-styling/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: ha-frontend-styling
+description: Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance. Use when editing CSS, layout, motion, or visual component structure.
+---
+
+# HA Frontend Styling
+
+Use this skill when editing CSS, layout, visual hierarchy, theme integration, responsive behavior, RTL support, or view transitions.
+
+## Theme And Layout Basics
+
+- Use Home Assistant CSS custom properties instead of hardcoded colors.
+- Use `--ha-space-*` spacing tokens instead of hardcoded spacing where possible.
+- Keep components mobile-first and enhance for desktop.
+- Keep layouts RTL-safe. Prefer logical properties when they fit.
+- Prefer `ha-*` components and current Web Awesome wrappers.
+- Avoid adding new legacy Material Web Components (`mwc-*`).
+- Scope styles to the component. Do not rely on global styles for component internals.
+
+Spacing tokens are defined in `src/resources/theme/core.globals.ts`. The scale runs from `--ha-space-1` at 4px through `--ha-space-20` at 80px in 4px increments. Common values are `--ha-space-2` at 8px, `--ha-space-4` at 16px, and `--ha-space-8` at 32px.
+
+```ts
+static get styles() {
+  return css`
+    :host {
+      padding: var(--ha-space-4);
+      color: var(--primary-text-color);
+      background-color: var(--card-background-color);
+    }
+
+    .content {
+      gap: var(--ha-space-2);
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        padding: var(--ha-space-2);
+      }
+    }
+  `;
+}
+```
+
+## Interaction States
+
+- Make touch targets large enough for mobile.
+- Provide clear hover, active, focus, disabled, loading, error, and unavailable states.
+- Preserve keyboard navigation and visible focus indicators.
+- Maintain WCAG AA contrast for text and essential UI affordances.
+
+## View Transitions
+
+Use the View Transitions API only for meaningful continuity between DOM states.
+
+Core resources:
+
+- Utility wrapper: `src/common/util/view-transition.ts`, `withViewTransition()`.
+- Launch-screen fade example: `src/util/launch-screen.ts`.
+- Animation keyframes: `src/resources/theme/animations.globals.ts`.
+- Animation duration tokens: `src/resources/theme/core.globals.ts`.
+
+Implementation rules:
+
+- Use `withViewTransition()` for fallback behavior.
+- Keep transitions simple. Subtle fades and crossfades usually work best.
+- Use `--ha-animation-duration-fast`, `--ha-animation-duration-normal`, or `--ha-animation-duration-slow` for timing.
+- Ensure each `view-transition-name` is unique at any given time.
+- Remember only one view transition can run at a time.
+- View transitions operate at document level and do not work inside Shadow DOM style isolation. For web components, set `view-transition-name` on `:host` or use document-level transitions.
+- The root gets `view-transition-name: root` by default. Target `::view-transition-group(root)` to customize the default page transition.
+
+## Review Checklist
+
+- Styling uses theme variables and spacing tokens where practical.
+- Layout is mobile-first and RTL-safe.
+- Component styles are scoped.
+- Interactive states are clear and accessible.
+- Motion is subtle, tokenized, and respects reduced-motion behavior through existing globals.

.agents/skills/ha-frontend-testing/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: ha-frontend-testing
+description: Home Assistant frontend testing and validation workflow. Use when adding or updating tests, running lint, TypeScript checks, Vitest, Playwright e2e suites, dev servers, or chart-data benchmarks.
+---
+
+# HA Frontend Testing
+
+Use this skill when choosing or running validation for frontend changes.
+
+## Test Helpers
+
+- Before adding or changing tests, inspect the relevant suite's existing helpers and fixtures. Reuse them instead of duplicating setup, test data, navigation, interactions, waits, or assertions.
+- When the same test flow appears more than once, move it into the closest suite-local helper with a focused interface.
+- Keep one-off test behaviour in the test unless a helper makes the intent materially clearer. Do not hide the behaviour under test behind broad, configurable abstractions.
+
+## Core Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler, run without file arguments
+yarn test          # Vitest
+yarn dev           # App dev server
+yarn dev:serve     # Local serving dev server
+```
+
+Never run `tsc` or `yarn lint:types` with file arguments. File arguments make `tsc` ignore `tsconfig.json` and can emit `.js` files into `src/`.
+
+For focused type feedback on one file, use editor diagnostics instead of a file-scoped `tsc` command.
+
+## Unit And Utility Tests
+
+- Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
+- Mock WebSocket connections and API calls at boundaries.
+- Cover loading, error, unavailable, and missing-entity states where relevant.
+- Test accessibility-sensitive behavior when it can be asserted without brittle DOM internals.
+
+## Dev Servers
+
+`yarn dev` builds and watches the app, served by a running Home Assistant core configured through `development_repo`.
+
+`yarn dev:serve` also serves locally and supports `-c` for the core URL and `-p` for the port. The default is 8124, or 8123 in a devcontainer.
+
+Dev server commands support `--background`, `--status`, `--stop`, and `--logs [--follow]`. Prefer managed background mode while iterating so the watcher stays available across test runs without occupying the terminal.
+
+## Playwright E2E
+
+Each suite has its own dev server port. Playwright reuses an existing server locally when its configured URL responds; otherwise it performs a slow full build. When a development watcher is being reused, rspack recompiles on save and reruns should not need a restart.
+
+Start the relevant suite server, then run that suite:
+
+| Suite   | Background server                            | Test command            |
+| ------- | -------------------------------------------- | ----------------------- |
+| App     | `yarn test:e2e:app:dev --background` on 8095 | `yarn test:e2e:app`     |
+| Demo    | `yarn dev:demo --background` on 8090         | `yarn test:e2e:demo`    |
+| Gallery | `yarn dev:gallery --background` on 8100      | `yarn test:e2e:gallery` |
+
+The custom development wrappers use `/__ha_dev_status` to identify and manage their own suites. Playwright server reuse checks the configured URL instead. Wrapper start and stop operations are idempotent for a matching suite and reject an unrelated process occupying the port.
+
+Local runs against a watched development server do not always match CI's clean build artifacts, environment, sharding, or worker configuration. Use background servers for the fast iteration loop, but confirm the relevant CI jobs complete successfully before considering E2E changes verified.
+
+Use `-g "<title>" --project=chromium` to narrow a run. `yarn test:e2e` runs all three suites in parallel when every managed server is available, otherwise it runs them sequentially to prevent cold builds racing over shared generated assets. Run suites directly; piping through output truncation hides progress and failures.
+
+The app suite uses a stripped-down harness for e2e. Demo and gallery use their normal dev servers.
+
+## Benchmarks
+
+For chart data transforms such as history, statistics, energy, and downsampling, follow `test/benchmarks/README.md`.
+
+Use seeded fixtures, characterization snapshot tests, and `yarn test:bench` before and after optimization. Optimizations must keep output bit-identical.
+
+## Verification Selection
+
+- Documentation-only change: no code test required unless examples or commands changed.
+- Type-only or utility change: run focused Vitest if available, then `yarn lint:types` if practical.
+- Lit component change: run relevant tests plus lint or typecheck depending on scope.
+- E2E-sensitive flow: start the relevant e2e dev server and run the narrow Playwright suite.
+- Broad refactor: run `yarn lint` and relevant test suites when practical.

.agents/skills/ha-frontend-user-facing-text/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: ha-frontend-user-facing-text
+description: Home Assistant frontend copy, localization, terminology, and user-facing text guidance. Use when adding or reviewing labels, buttons, dialogs, errors, translations, or UI strings.
+---
+
+# HA Frontend User-Facing Text
+
+Use this skill for all user-facing text, translations, labels, buttons, dialog copy, errors, helper text, and review comments about wording.
+
+## Localization
+
+- All user-facing text must be translatable.
+- Add translation keys to `src/translations/en.json` when introducing new strings.
+- Use the localization system instead of inline user-visible strings.
+- Prefer complete localized strings with placeholders over concatenating translated fragments.
+- Give translators enough context through key naming and placeholders.
+
+```ts
+this.hass.localize("ui.panel.config.updates.updates_refreshed", {
+  count: 5,
+});
+```
+
+## Voice And Style
+
+- Use American English.
+- Use a friendly, informational tone.
+- Address users directly with "you" and "your" when appropriate.
+- Be inclusive, objective, and non-discriminatory.
+- Be concise and clear.
+- Use active voice.
+- Avoid jargon where a familiar home automation term works.
+- Always write "Home Assistant" in full. Do not use "HA" or "HASS" in user-facing copy.
+- Spell out terms when possible.
+- Use sentence case for titles, headings, buttons, labels, and UI elements.
+- Use the Oxford comma in lists.
+- Prefer "like" over "e.g." and "for example" over "i.e.".
+- Avoid all caps for emphasis. Use wording, bold, or italics instead.
+- Write for both technical and non-technical users.
+
+Sentence case examples:
+
+- Use: "Create new automation"
+- Avoid: "Create New Automation"
+- Use: "Device settings"
+- Avoid: "Device Settings"
+
+## Terminology
+
+Use "integration" instead of "component" for user-facing product language unless referring to a frontend component in developer context.
+
+Technical product terms are lowercase in prose: automation, entity, device, service.
+
+## Delete, Remove, Create, Add
+
+Use "Remove" for actions that can be restored or reapplied:
+
+- Removing a user's permission.
+- Removing a user from a group.
+- Removing links between items.
+- Removing a widget from a dashboard.
+- Removing an item from a cart.
+
+Use "Delete" for permanent, non-recoverable actions:
+
+- Deleting a field.
+- Deleting a value in a field.
+- Deleting a task.
+- Deleting a group.
+- Deleting a permission.
+- Deleting a calendar event.
+
+Use "Add" for already-existing items:
+
+- Adding a permission to a user.
+- Adding a user to a group.
+- Adding links between items.
+- Adding a widget to a dashboard.
+- Adding an item to a cart.
+
+Use "Create" for something made from scratch:
+
+- Creating a new field.
+- Creating a new task.
+- Creating a new group.
+- Creating a new permission.
+- Creating a new calendar event.
+
+Create pairs with Delete. Add pairs with Remove.
+
+## Review Checklist
+
+- Text is localized.
+- Copy uses sentence case.
+- "Home Assistant" is written in full.
+- Delete/Remove and Create/Add match recoverability and object lifecycle.
+- Placeholders are used instead of string concatenation.
+- The wording is concise and understandable without implementation knowledge.

.claude/skills

@@ -0,0 +1 @@
+../.agents/skills

.github/actions/netlify-deploy/action.yml

@@ -19,6 +19,9 @@ outputs:
   netlify_url:
     description: The deployed URL
     value: ${{ steps.deploy.outputs.netlify_url }}
+  unique_deploy_url:
+    description: The unique hash-based deployment URL for this specific build
+    value: ${{ steps.deploy.outputs.unique_deploy_url }}
 
 runs:
   using: composite
@@ -32,9 +35,18 @@ runs:
         NETLIFY_AUTH_TOKEN: ${{ inputs.auth-token }}
         NETLIFY_SITE_ID: ${{ inputs.site-id }}
       run: |
+        # Execute the deployment
         if [ -n "$ALIAS" ]; then
           npx -y netlify-cli deploy --dir="$DIR" --alias "$ALIAS" --json > deploy_output.json
         else
           npx -y netlify-cli deploy --dir="$DIR" --prod --json > deploy_output.json
         fi
-        echo "netlify_url=$(jq -r '.url // .deploy_url' deploy_output.json)" >> "$GITHUB_OUTPUT"
+
+        # Collect the urls from the deployment output
+        NETLIFY_URL=$(jq -r '.url // .deploy_url' deploy_output.json)
+        SITE_NAME=$(jq -r '.site_name' deploy_output.json)
+        DEPLOY_ID=$(jq -r '.deploy_id' deploy_output.json)
+        UNIQUE_URL="https://${DEPLOY_ID}--${SITE_NAME}.netlify.app"
+
+        echo "netlify_url=$NETLIFY_URL" >> "$GITHUB_OUTPUT"
+        echo "unique_deploy_url=$UNIQUE_URL" >> "$GITHUB_OUTPUT"

.github/actions/setup/action.yml

@@ -8,16 +8,37 @@ inputs:
   cache:
     description: Enable the yarn cache in setup-node
     default: "true"
+  node-modules-cache:
+    description: Restore the exact shared node_modules cache before installing
+    default: "false"
 
 runs:
   using: composite
   steps:
+    - name: Restore complete dependency tree
+      id: dependency-cache
+      if: inputs.node-modules-cache == 'true'
+      continue-on-error: true
+      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+      with:
+        path: |
+          node_modules
+          .yarn/install-state.gz
+        key: >-
+          node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+          hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+
     - name: Setup Node
-      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version-file: ".nvmrc"
-        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
+        cache: ${{ inputs.cache == 'true' && (inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true') && 'yarn' || '' }}
+
+    - name: Enable Corepack
+      shell: bash
+      run: corepack enable
 
     - name: Install dependencies
+      if: inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true'
       shell: bash
       run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/copilot-instructions.md

@@ -1,669 +0,0 @@
-# GitHub Copilot & Claude Code Instructions
-
-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).
-
-## 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)
-- [Text and Copy Guidelines](#text-and-copy-guidelines)
-- [Development Workflow](#development-workflow)
-- [Review Guidelines](#review-guidelines)
-
-## Quick Reference
-
-### Essential Commands
-
-```bash
-yarn lint          # ESLint + Prettier + TypeScript + Lit
-yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
-yarn test          # Vitest
-yarn dev           # Dev server (app; --background/--status/--stop/--logs)
-yarn dev:serve     # Dev server with serve (-c core URL, -p port; --background/--status/--stop/--logs)
-```
-
-> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
-
-### Component Prefixes
-
-- `ha-` - Home Assistant components
-- `hui-` - Lovelace UI components
-- `dialog-` - Dialog components
-
-### Import Patterns
-
-```typescript
-import type { HomeAssistant } from "../types";
-import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-```
-
-## Core Architecture
-
-The Home Assistant frontend is a modern web application that:
-
-- Uses Web Components (custom elements) built with Lit framework
-- Is written entirely in TypeScript with strict type checking
-- 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
-- Prettier with ES5 trailing commas enforced
-- No console statements (`no-console: "error"`) - use proper logging
-- Import organization: No unused imports, consistent type imports
-
-**Naming Conventions**
-
-- PascalCase for types and classes
-- camelCase for variables, methods
-- Private methods require leading underscore
-- Public methods forbid leading underscore
-
-### TypeScript Usage
-
-- **Always use strict TypeScript**: Enable all strict flags, avoid `any` types
-- **Proper type imports**: Use `import type` for type-only imports
-- **Define interfaces**: Create proper interfaces for data structures
-- **Type component properties**: All Lit properties must be properly typed
-- **No unused variables**: Prefix with `_` if intentionally unused
-- **Consistent imports**: Use `@typescript-eslint/consistent-type-imports`
-
-```typescript
-// Good
-import type { HomeAssistant } from "../types";
-
-interface EntityConfig {
-  entity: string;
-  name?: string;
-}
-
-@property({ type: Object })
-hass!: HomeAssistant;
-
-// Bad
-@property()
-hass: any;
-```
-
-### Web Components with Lit
-
-- **Use Lit 3.x patterns**: Follow modern Lit practices
-- **Extend appropriate base classes**: Use `LitElement`, `SubscribeMixin`, or other mixins as needed
-- **Define custom element names**: Use `ha-` prefix for components
-
-```typescript
-@customElement("ha-my-component")
-export class HaMyComponent extends LitElement {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @state()
-  private _config?: MyComponentConfig;
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-    `;
-  }
-
-  render() {
-    return html`<div>Content</div>`;
-  }
-}
-```
-
-### Component Guidelines
-
-- **Use composition**: Prefer composition over inheritance
-- **Lazy load panels**: Heavy panels should be dynamically imported
-- **Optimize renders**: Use `@state()` for internal state, `@property()` for public API
-- **Handle loading states**: Always show appropriate loading indicators
-- **Support themes**: Use CSS custom properties from theme
-
-### 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
-
-```typescript
-// Good
-try {
-  const result = await fetchEntityRegistry(this.hass.connection);
-  this._processResult(result);
-} catch (err) {
-  showAlertDialog(this, {
-    text: `Failed to load: ${err.message}`,
-  });
-}
-```
-
-### Styling Guidelines
-
-- **Use CSS custom properties**: Leverage the theme system
-- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
-  - 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
-- **Support RTL**: Ensure all layouts work in RTL languages
-
-```typescript
-static get styles() {
-  return css`
-    :host {
-      padding: var(--ha-space-4);
-      color: var(--primary-text-color);
-      background-color: var(--card-background-color);
-    }
-
-    .content {
-      gap: var(--ha-space-2);
-    }
-
-    @media (max-width: 600px) {
-      :host {
-        padding: var(--ha-space-2);
-      }
-    }
-  `;
-}
-```
-
-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
-- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
-- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
-- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`)
-
-**Implementation Guidelines:**
-
-1. Always use `withViewTransition()` wrapper for automatic fallback
-2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-duration-*` CSS variables for consistent timing (`fast`, `normal`, `slow`)
-4. Assign unique `view-transition-name` to elements (must be unique at any given time)
-5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
-- Each `view-transition-name` must be unique at any given time
-- Only one view transition can run at a time
-- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
-- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
-- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
-- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
-### Performance Best Practices
-
-- **Code split**: Split code at the panel/dialog level
-- **Lazy load**: Use dynamic imports for heavy components
-- **Optimize bundle**: Keep initial bundle size minimal
-- **Use virtual scrolling**: For long lists, implement virtual scrolling
-- **Memoize computations**: Cache expensive calculations
-
-### Testing Requirements
-
-- **Write tests**: Add tests for data processing and utilities
-- **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
-
-### Dialog Component
-
-**Opening Dialogs (Fire Event Pattern - Recommended):**
-
-```typescript
-fireEvent(this, "show-dialog", {
-  dialogTag: "dialog-example",
-  dialogImport: () => import("./dialog-example"),
-  dialogParams: { title: "Example", data: someData },
-});
-```
-
-**Dialog Implementation Requirements:**
-
-- Use `ha-dialog` component
-- Implement `HassDialog<T>` interface
-- Use `@state() private _open = false` to control dialog visibility
-- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
-- Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event in `_dialogClosed()` handler
-- Use `header-title` attribute for simple titles
-- Use `header-subtitle` attribute for simple subtitles
-- Use slots for custom content where the standard attributes are not enough
-- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
-- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
-
-**Dialog Sizing:**
-
-- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (580px - default), `"large"` (1024px), or `"full"`
-- Custom sizing is NOT recommended - use the standard width presets
-
-**Button Appearance Guidelines:**
-
-`ha-button` (wraps the Web Awesome button — see `src/components/ha-button.ts`) has two independent axes plus size:
-
-- **`variant`** (color): `"brand"` (default), `"neutral"`, `"danger"`, `"warning"`, `"success"`
-- **`appearance`** (fill style): `"accent"`, `"filled"`, `"outlined"`, `"plain"`
-- **`size`**: `"xs"` (extra small, 40px), `"s"` (small, 32px), `"m"` (medium, 40px - default), `"l"` (large, 48px), `"xl"` (extra large, 40px)
-
-Common patterns:
-
-- **Primary action**: `appearance="filled"` for emphasis (or the default appearance for a lighter look)
-- **Secondary action**: `appearance="plain"` for cancel/dismiss actions
-- **Destructive actions**: `variant="danger"` for delete/remove operations (the generic confirmation dialog uses `variant="danger"` for its confirm button — see `src/dialogs/generic/dialog-box.ts`)
-- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
-
-### Form Component (ha-form)
-
-- Schema-driven using `HaFormSchema[]`
-- Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
-- Built-in validation with error display
-- Use `computeLabel`, `computeError`, `computeHelper` for translations
-
-```typescript
-<ha-form
-  .hass=${this.hass}
-  .data=${this._data}
-  .schema=${this._schema}
-  .error=${this._errors}
-  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
-  @value-changed=${this._valueChanged}
-></ha-form>
-```
-
-### 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)
-- Content announced by screen readers when dynamically displayed
-
-```html
-<ha-alert alert-type="error">Error message</ha-alert>
-<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
-<ha-alert alert-type="success" dismissable>Success message</ha-alert>
-```
-
-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
-- Automatically blocks shortcuts when input fields are focused
-- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
-- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
-- **Class definition**: `src/common/keyboard/shortcuts.ts`
-- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
-- **Component definition**: `src/components/ha-tooltip.ts`
-- **Usage example**: `src/components/ha-label.ts`
-
-## Common Patterns
-
-### Creating a Panel
-
-```typescript
-@customElement("ha-panel-myfeature")
-export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true })
-  narrow!: boolean;
-
-  @property()
-  route!: Route;
-
-  hassSubscribe() {
-    return [
-      subscribeEntityRegistry(this.hass.connection, (entities) => {
-        this._entities = entities;
-      }),
-    ];
-  }
-}
-```
-
-#### Creating a Lovelace Card
-
-**Purpose**: Cards allow users to tell different stories about their house.
-
-```typescript
-@customElement("hui-my-card")
-export class HuiMyCard extends LitElement implements LovelaceCard {
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @state()
-  private _config?: MyCardConfig;
-
-  public setConfig(config: MyCardConfig): void {
-    if (!config.entity) {
-      throw new Error("Entity required");
-    }
-    this._config = config;
-  }
-
-  public getCardSize(): number {
-    return 3; // Height in grid units
-  }
-
-  // Optional: Editor for card configuration
-  public static getConfigElement(): LovelaceCardEditor {
-    return document.createElement("hui-my-card-editor");
-  }
-
-  // Optional: Stub config for card picker
-  public static getStubConfig(): object {
-    return { entity: "" };
-  }
-}
-```
-
-**Card Guidelines:**
-
-- Cards are highly customizable for different households
-- Implement `LovelaceCard` interface with `setConfig()` and `getCardSize()`
-- Use proper error handling in `setConfig()`
-- Consider all possible states (loading, error, unavailable)
-- Support different entity types and states
-- Follow responsive design principles
-- Add configuration editor when needed
-
-### Internationalization
-
-- **Use localize**: Always use the localization system
-- **Add translation keys**: Add keys to src/translations/en.json
-- **Support placeholders**: Use proper placeholder syntax
-
-```typescript
-this.hass.localize("ui.panel.config.updates.update_available", {
-  count: 5,
-});
-```
-
-### Accessibility
-
-- **ARIA labels**: Add appropriate ARIA labels
-- **Keyboard navigation**: Ensure all interactions work with keyboard
-- **Screen reader support**: Test with screen readers
-- **Color contrast**: Meet WCAG AA standards
-
-## Development Workflow
-
-### Setup and Commands
-
-1. **Setup**: `script/setup` - Install dependencies
-2. **Develop**: `script/develop` - Development server
-3. **Lint**: `yarn lint` - Run all linting before committing
-4. **Test**: `yarn test` - Add and run tests
-5. **Build**: `script/build_frontend` - Test production build
-
-### Dev servers
-
-`yarn dev` builds and watches the app, served by a running Home Assistant core (`development_repo` setting). `yarn dev:serve` also serves it locally (`-c` core URL, `-p` port, default 8124).
-
-These and the e2e dev servers below take `--background`, `--status`, `--stop`, and `--logs [--follow]`.
-
-### End-to-end (e2e) tests
-
-Each Playwright suite has a dev server on its own port. Playwright reuses a server already on the port (`reuseExistingServer` locally); otherwise it does a slow full build. The rspack watcher recompiles on save, so re-runs need no restart.
-
-Start the suite's dev server, then run the suite:
-
-- **App** (8095): `yarn test:e2e:app:dev`, then `yarn test:e2e:app`
-- **Demo** (8090): `yarn dev:demo`, then `yarn test:e2e:demo`
-- **Gallery** (8100): `yarn dev:gallery`, then `yarn test:e2e:gallery`
-
-Server reuse and `--stop` key off a `/__ha_dev_status` health check, so starting or stopping twice is harmless. The app suite uses a stripped-down harness built only for e2e; demo and gallery use their normal dev servers.
-
-Add `-g "<title>" --project=chromium` to narrow a run; `yarn test:e2e` runs all three. Run the suite directly, since piping through `tail`/`head` hides progress and truncates results.
-
-### 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 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
-- Don't ignore TypeScript errors - Fix all type issues
-
-### Security Best Practices
-
-- Sanitize HTML - Never use `unsafeHTML` with user content
-- Validate inputs - Always validate user inputs
-- Use HTTPS - All external resources must use HTTPS
-- CSP compliance - Ensure code works with Content Security Policy
-
-### Pull Requests
-
-When creating a pull request, you **must** use the PR template located at `.github/PULL_REQUEST_TEMPLATE.md`. Read the template file and use its full content as the PR body, filling in each section appropriately.
-
-- Do not omit, reorder, or rewrite the template sections
-- Check the appropriate "Type of change" box based on the changes
-- Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check
-- If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it
-- Be simple and user friendly — explain what the change does, not implementation details
-- Use markdown so the user can copy it
-
-### Text and Copy Guidelines
-
-#### Terminology Standards
-
-**Delete vs Remove**
-
-- **Use "Remove"** for actions that can be restored or reapplied:
-  - Removing a user's permission
-  - Removing a user from a group
-  - Removing links between items
-  - Removing a widget from dashboard
-  - Removing an item from a cart
-- **Use "Delete"** for permanent, non-recoverable actions:
-  - Deleting a field
-  - Deleting a value in a field
-  - Deleting a task
-  - Deleting a group
-  - Deleting a permission
-  - Deleting a calendar event
-
-**Create vs Add** (Create pairs with Delete, Add pairs with Remove)
-
-- **Use "Add"** for already-existing items:
-  - Adding a permission to a user
-  - Adding a user to a group
-  - Adding links between items
-  - Adding a widget to dashboard
-  - Adding an item to a cart
-- **Use "Create"** for something made from scratch:
-  - Creating a new field
-  - Creating a new task
-  - Creating a new group
-  - Creating a new permission
-  - Creating a new calendar event
-
-#### Writing Style (Consistent with Home Assistant Documentation)
-
-- **Use American English**: Standard spelling and terminology
-- **Friendly, informational tone**: Be inspiring, personal, comforting, engaging
-- **Address users directly**: Use "you" and "your"
-- **Be inclusive**: Objective, non-discriminatory language
-- **Be concise**: Use clear, direct language
-- **Be consistent**: Follow established terminology patterns
-- **Use active voice**: "Delete the automation" not "The automation should be deleted"
-- **Avoid jargon**: Use terms familiar to home automation users
-
-#### Language Standards
-
-- **Always use "Home Assistant"** in full, never "HA" or "HASS"
-- **Avoid abbreviations**: Spell out terms when possible
-- **Use sentence case everywhere**: Titles, headings, buttons, labels, UI elements
-  - ✅ "Create new automation"
-  - ❌ "Create New Automation"
-  - ✅ "Device settings"
-  - ❌ "Device Settings"
-- **Oxford comma**: Use in lists (item 1, item 2, and item 3)
-- **Replace Latin terms**: Use "like" instead of "e.g.", "for example" instead of "i.e."
-- **Avoid CAPS for emphasis**: Use bold or italics instead
-- **Write for all skill levels**: Both technical and non-technical users
-
-#### Key Terminology
-
-- **"integration"** (preferred over "component")
-- **Technical terms**: Use lowercase (automation, entity, device, service)
-
-#### 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:
-
-- **Keep context**: Provide enough context for translators
-- **Avoid concatenation**: Prefer full localized strings with placeholders over stitching translated fragments together
-
-### Common Review Issues (From PR Analysis)
-
-Recurring, easy-to-miss problems surfaced in real PR reviews. These complement the standards above rather than repeating them — items already covered earlier (loading states, error handling, mobile layout, theming, import hygiene) are intentionally not duplicated here.
-
-#### User Experience and Accessibility
-
-- **Form validation**: Always provide proper field labels and validation feedback
-- **Form accessibility**: Prevent password managers from incorrectly identifying fields
-- **Hit targets**: Make clickable areas large enough for touch interaction
-- **Visual feedback**: Provide clear indication of interactive states (hover, active, focus)
-
-#### Dialog and Modal Patterns
-
-- **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
-- **Form prefilling**: Use smart defaults but allow user override
-
-#### Component Design Patterns
-
-- **Terminology consistency**: Use "Join"/"Apply" instead of "Group" when appropriate
-- **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
-
-#### 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
-
-#### Configuration and Props
-
-- **Optional parameters**: Make configuration fields optional when sensible
-- **Smart defaults**: Provide reasonable default values
-- **Future extensibility**: Design APIs that can be extended later
-- **Validation**: Validate configuration before applying changes
-
-## 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.
-
-- [ ] `yarn lint` passes (TypeScript, ESLint, Prettier, Lit analyzer) and `yarn test` is green
-- [ ] Tests added for new data processing/utilities (where applicable)
-- [ ] All user-facing text is localized and follows the Text and Copy guidelines (sentence case, "Home Assistant" in full, Delete/Remove + Create/Add)
-- [ ] Components handle all states (loading, error, unavailable)
-- [ ] Entity existence checked before property access
-- [ ] Event/subscription listeners cleaned up (no memory leaks)
-- [ ] Accessible to screen readers and keyboard

.github/copilot-instructions.md

@@ -0,0 +1 @@
+../AGENTS.md

.github/dependabot.yml

@@ -15,6 +15,10 @@ updates:
     cooldown:
       default-days: 7
     open-pull-requests-limit: 10
+    groups:
+      codeql-action:
+        patterns:
+          - "github/codeql-action/*"
     labels:
       - Dependencies
       - GitHub Actions

.github/labeler.yml

@@ -1,3 +1,21 @@
+Agents:
+  - changed-files:
+      - any-glob-to-any-file:
+          - "**/AGENTS.md"
+          - "**/CLAUDE.md"
+          - "**/GEMINI.md"
+          - .agents/**
+          - .claude/**
+          - .github/agents/**
+          - .github/copilot-instructions.md
+          - .github/hooks/**
+          - .github/instructions/**
+          - .github/plugin.json
+          - .github/plugin/**
+          - .github/prompts/**
+          - .github/skills/**
+          - .github/workflows/copilot-setup-steps.yml
+
 Build:
   - changed-files:
       - any-glob-to-any-file:

.github/workflows/ci.yaml

@@ -1,6 +1,7 @@
 name: CI
 
 on:
+  workflow_dispatch:
   push:
     branches:
       - dev
@@ -21,16 +22,56 @@ permissions:
   contents: read
 
 jobs:
-  lint:
-    name: Lint and check format
+  prepare-dependencies:
+    name: Prepare dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
+      - name: Check for complete dependency tree
+        id: dependencies
+        continue-on-error: true
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+          lookup-only: true
       - name: Setup Node and install
+        if: steps.dependencies.outputs.cache-hit != 'true'
         uses: ./.github/actions/setup
+        with:
+          cache: false
+      - name: Save complete dependency tree
+        if: steps.dependencies.outputs.cache-hit != 'true'
+        continue-on-error: true
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+
+  lint:
+    name: Lint and check format
+    needs: prepare-dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+      - name: Setup Node with shared dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
@@ -63,14 +104,17 @@ jobs:
         run: yarn run lint:licenses
   test:
     name: Run tests
+    needs: prepare-dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
         env:
@@ -80,6 +124,7 @@ jobs:
   build:
     name: Build frontend
     needs:
+      - prepare-dependencies
       - lint
       - test
     runs-on: ubuntu-latest
@@ -88,8 +133,10 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Build Application
         uses: ./.github/actions/build
         with:

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/init@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/analyze@99df26d4f13ea111d4ec1a7dddef6063f76b97e9 # v4.37.0
         with:
           category: "/language:javascript-typescript"

.github/workflows/demo_deployment.yaml

@@ -22,7 +22,7 @@ jobs:
     if: github.event_name != 'push' || github.ref_name != 'master'
     environment:
       name: Demo Development
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.unique_deploy_url }}
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0

.github/workflows/e2e.yaml

@@ -38,8 +38,9 @@ jobs:
       - name: Build demo
         uses: ./.github/actions/build
         with:
-          target: build-demo
+          target: build-demo-e2e
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true
 
       - name: Upload demo build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -65,8 +66,9 @@ jobs:
       - name: Build e2e test app
         uses: ./.github/actions/build
         with:
-          target: build-e2e-test-app
+          target: build-e2e-test-app-e2e
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          is-test: true
 
       - name: Upload e2e test app build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -103,15 +105,27 @@ jobs:
           if-no-files-found: error
           retention-days: 3
 
-  # ── Run Playwright tests locally against Chromium ──────────────────────────
-  e2e-local:
-    name: E2E (local Chromium)
-    needs: [build-demo, build-e2e-test-app, build-gallery]
+  # ── Run Playwright tests against Chromium ──────────────────────────────────
+  e2e-demo:
+    name: E2E demo (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-demo
     runs-on: ubuntu-latest
-    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
-    # Chromium; anything longer is almost certainly an install or webServer
-    # hang.
-    timeout-minutes: 30
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+        shardTotal:
+          - 2
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
@@ -121,60 +135,133 @@ jobs:
       - name: Setup Node and install
         uses: ./.github/actions/setup
 
-      # Resolve the installed Playwright version so the browser cache tracks
-      # Playwright itself, not every unrelated dependency bump.
-      - name: Resolve Playwright version
-        id: playwright-version
-        run: echo "version=$(node -p 'require("@playwright/test/package.json").version')" >> "$GITHUB_OUTPUT"
-
-      # Cache the downloaded browser build keyed on the installed Playwright
-      # version, so re-runs skip the ~170 MB download unless Playwright changes.
-      - name: Cache Playwright browsers
-        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
-
-      - name: Install Playwright browsers
-        run: yarn playwright install --with-deps chromium
-        timeout-minutes: 10
-
       - name: Download demo build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: demo-dist
           path: demo/dist/
 
+      - name: Run Playwright demo tests
+        run: yarn test:e2e:demo --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload demo blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-demo-${{ matrix.shardIndex }}
+          path: test/e2e/reports/demo/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-app:
+    name: E2E app (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-e2e-test-app
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
       - name: Download e2e test app build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: e2e-test-app-dist
           path: test/e2e/app/dist/
 
+      - name: Run Playwright app tests
+        run: yarn test:e2e:app --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        timeout-minutes: 15
+
+      - name: Upload app blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-app-${{ matrix.shardIndex }}
+          path: test/e2e/reports/app/
+          if-no-files-found: warn
+          retention-days: 3
+
+  e2e-gallery:
+    name: E2E gallery (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+    needs:
+      - build-gallery
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      options: --user 1001 --ipc=host
+    defaults:
+      run:
+        shell: bash
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
+          - 4
+        shardTotal:
+          - 4
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
       - name: Download gallery build
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         with:
           name: gallery-dist
           path: gallery/dist/
 
-      - name: Run Playwright tests (local)
-        run: yarn test:e2e
+      - name: Run Playwright gallery tests
+        run: yarn test:e2e:gallery --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         timeout-minutes: 15
 
-      - name: Upload blob report
+      - name: Upload gallery blob report
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         if: always()
         with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          name: blob-report-gallery-${{ matrix.shardIndex }}
+          path: test/e2e/reports/gallery/
+          if-no-files-found: warn
           retention-days: 3
 
-  # ── Merge local blob reports and post PR comment ───────────────────────────
   report:
     name: Report
-    needs: [e2e-local]
+    needs:
+      - e2e-demo
+      - e2e-app
+      - e2e-gallery
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
+    if: ${{ always() }}
     permissions:
       contents: read
       pull-requests: write
@@ -187,12 +274,26 @@ jobs:
       - name: Setup Node and install
         uses: ./.github/actions/setup
 
-      - name: Download blob report (local)
+      - name: Download demo blob reports
         uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
         continue-on-error: true
         with:
-          name: blob-report-local
-          path: test/e2e/reports/
+          pattern: blob-report-demo-*
+          path: test/e2e/reports/demo/
+
+      - name: Download app blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-app-*
+          path: test/e2e/reports/app/
+
+      - name: Download gallery blob reports
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        continue-on-error: true
+        with:
+          pattern: blob-report-gallery-*
+          path: test/e2e/reports/gallery/
 
       - name: Stage blobs for merge
         run: node test/e2e/collect-blob-reports.mjs
@@ -209,7 +310,11 @@ jobs:
           retention-days: 14
 
       - name: Post report to PR
-        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
+        if: >-
+          github.event_name == 'pull_request' &&
+          (needs.e2e-demo.result == 'failure' ||
+          needs.e2e-app.result == 'failure' ||
+          needs.e2e-gallery.result == 'failure')
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
@@ -217,3 +322,19 @@ jobs:
               `${process.env.GITHUB_WORKSPACE}/test/e2e/post-report-comment.mjs`
             );
             await postReportComment({ github, context, core });
+
+      - name: Check suite results
+        run: |
+          failed=0
+          for suite in \
+            "demo:${{ needs.e2e-demo.result }}" \
+            "app:${{ needs.e2e-app.result }}" \
+            "gallery:${{ needs.e2e-gallery.result }}"; do
+            name="${suite%%:*}"
+            result="${suite#*:}"
+            echo "E2E ${name}: ${result}"
+            if [ "$result" != "success" ]; then
+              failed=1
+            fi
+          done
+          exit "$failed"

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
+        uses: actions/labeler@b8dd2d9be0f68b860e7dae5dae7d772984eacd6d # v6.2.0
         with:
           sync-labels: true

.github/workflows/stale.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
+        uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10.4.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.gitignore

@@ -61,9 +61,12 @@ test/e2e/reports/
 test/e2e/test-results/
 # E2E test app build output
 test/e2e/app/dist/
+# MCP server
+.playwright-mcp/
 
 # AI tooling
-.claude
+.claude/*
+!.claude/skills
 .cursor
 .opencode
 .serena

.yarnrc.yml

@@ -13,4 +13,4 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 3d
 
-yarnPath: .yarn/releases/yarn-4.17.0.cjs
+yarnPath: .yarn/releases/yarn-4.17.1.cjs

AGENTS.md

@@ -1 +0,0 @@
-.github/copilot-instructions.md

AGENTS.md

@@ -0,0 +1,60 @@
+# Home Assistant Frontend Agent Guide
+
+You are helping develop the Home Assistant frontend. This repository is a TypeScript application built from Lit-based Web Components for the Home Assistant web UI.
+
+For gallery-specific documentation, demos, page structure, and examples, read `gallery/AGENTS.md` when working under `gallery/`.
+
+## Essential Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler, run without file arguments
+yarn test          # Vitest
+yarn dev           # App dev server, supports --background/--status/--stop/--logs
+yarn dev:serve     # Local serving dev server, supports -c core URL, -p port, and dev flags
+```
+
+Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives file arguments, it ignores `tsconfig.json` and can emit `.js` files into `src/`. Always run `yarn lint:types` without arguments. For individual file type checking, rely on editor diagnostics.
+
+## Architecture
+
+- The frontend uses custom elements built with Lit and TypeScript strict mode.
+- Components communicate with the backend through the Home Assistant WebSocket API.
+- Use `ha-` for Home Assistant components, `hui-` for Lovelace UI components, and `dialog-` for dialogs.
+- Prefer `ha-*` components and current Web Awesome wrappers. Avoid adding new legacy `mwc-*` usage.
+- Leaf components should consume narrow Lit contexts instead of taking the broad `hass` object unless they are containers that own and provide `hass`.
+
+## Development Standards
+
+- Use strict TypeScript, proper interfaces, and `import type` for type-only imports.
+- Avoid `any`; model data with existing Home Assistant types or narrow new types.
+- Keep imports organized and remove unused imports.
+- Do not use `console`; use existing logging or user-visible error patterns.
+- Use `@state()` for internal Lit state and `@property()` for public API.
+- Do not query or manipulate DOM manually when Lit decorators, component refs, or render state are appropriate.
+- Scope styles to components, use theme custom properties, and keep layouts mobile-first and RTL-safe.
+- All user-facing text must be localized through the translation system.
+
+## Project Skills
+
+Detailed guidance lives in project skills under `.agents/skills/`. Load the matching skill before detailed implementation or review:
+
+- `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
+- `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.
+- `ha-frontend-styling`: theme variables, spacing tokens, responsive layout, RTL, and view transitions.
+- `ha-frontend-testing`: lint, typecheck, Vitest, Playwright e2e dev servers, and benchmarks.
+- `ha-frontend-user-facing-text`: localization, terminology, sentence case, and Home Assistant text style.
+- `ha-frontend-review`: PR template use, review checklist, and recurring review issues.
+
+## Pull Requests
+
+When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the PR body. Preserve template sections, check only the appropriate type-of-change boxes, and do not check checklist items on behalf of the user. If the PR includes UI changes, remind the user to add screenshots or a short video.
+
+## AI policy
+
+This project follows the [Open Home Foundation AI Policy](AI_POLICY.md).
+Autonomous contributions are not accepted: a human must review, understand,
+and be able to explain every change before it is submitted. Do not open
+issues or pull requests autonomously, and do not post comments on behalf of
+a user without their review.

AI_POLICY.md

@@ -0,0 +1,45 @@
+# Open Home Foundation - AI Policy
+
+We support using AI (i.e., LLMs) as tools when contributing to Open Home Foundation projects. However, you are responsible for any contributions you submit, and we are responsible for any contributions we merge and release. We hold a high bar for all contributions to our projects.
+
+Our maintainers dedicate their time and expertise to reviewing contributions. Submitting AI-generated content that you have not personally reviewed and understood wastes that time and will not be accepted.
+
+## Autonomous agents
+
+**We do not allow autonomous agents to be used for contributing to our projects.** We will close any pull requests or issues that we believe were created autonomously, and may mark automated comments as spam. This includes contributions that bypass the provided issue or pull request templates.
+
+## Communication on issues, pull requests, and code reviews
+
+We don't mind if you use AI tools to help you write. However, do not have tools post unreviewed content on your behalf. Keep responses to the minimum needed to communicate your intent. We may hide any comments that we believe are unreviewed AI output.
+
+If you are opening a pull request, we expect you to be able to explain the proposed changes in your own words. This includes the pull request description and responses to questions. If you use AI to help generate the pull request summary, you must review it for technical accuracy.
+
+**Do not use AI to generate answers to questions from maintainers.** You should understand and be able to explain your own work. Using AI to improve grammar or clarity is fine, but the substance of your responses must be your own.
+
+If you wish to include context from an interaction with AI in your comments, it must be in a quote block (e.g., using `>`) and disclosed as such. It must be accompanied by your own commentary explaining the relevance and implications of the context. Do not share long snippets.
+
+## Non-native English speakers
+
+We understand that AI is useful when communicating as a non-native English speaker. Using AI to improve the grammar or clarity of text you have written yourself is fine. If you are using AI to translate your comments, please ensure the translation accurately reflects your intent. Including your original text in a details block shows the effort behind your contribution, helps maintainers verify the translation if needed, and keeps the conversation readable.
+
+## Code and documentation contributions
+
+AI can be a helpful tool for writing code and documentation. However, due to the foundational open source nature of our projects, we require a human in the loop who understands the work produced by AI.
+
+All contributions must be reviewed and understood by the contributor before submission. You should be able to explain every change in a pull request you submit. Pull requests that appear to be unreviewed AI output will be closed without review.
+
+## Our use of AI
+
+Some of our projects use AI tools to assist with code reviews, issue triaging, reporting, and other project management tasks. These tools may leave comments on pull requests or issues. As with any automated tooling, these comments are not always correct.
+
+If an AI tool leaves a comment on your contribution, treat it as you would any other review comment. If you believe it is incorrect, say so; a brief explanation is sufficient. Maintainers always have the final say. If in doubt, ask a maintainer.
+
+## Enforcement
+
+Contributions that do not follow this policy will be closed. Repeated violations may result in being blocked from contributing to OHF projects. If you believe your contribution was closed in error, you are welcome to reach out to a maintainer to discuss.
+
+---
+
+The canonical version of this policy is published at
+<https://developers.home-assistant.io/docs/ai_policy>. In case of differences,
+the published version applies.

CLAUDE.md

@@ -1 +1 @@
-.github/copilot-instructions.md
+AGENTS.md

build-scripts/bundle.cjs

@@ -232,7 +232,7 @@ module.exports.config = {
     };
   },
 
-  demo({ isProdBuild, latestBuild, isStatsBuild }) {
+  demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
     return {
       name: "demo" + nameSuffix(latestBuild),
       entry: {
@@ -247,6 +247,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isTestBuild,
     };
   },
 
@@ -306,7 +307,7 @@ module.exports.config = {
     };
   },
 
-  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
     return {
       name: "e2e-test-app" + nameSuffix(latestBuild),
       entry: {
@@ -321,6 +322,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isTestBuild,
     };
   },
 };

build-scripts/gulp/demo.js

@@ -42,6 +42,22 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-demo-e2e",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    // Cast needs to be backwards compatible and older HA has no translations
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-demo",
+    "rspack-prod-demo-e2e",
+    "gen-pages-demo-prod-e2e"
+  )
+);
+
 gulp.task(
   "analyze-demo",
   gulp.series(

build-scripts/gulp/e2e-test-app.js

@@ -39,3 +39,18 @@ gulp.task(
     "gen-pages-e2e-test-app-prod"
   )
 );
+
+gulp.task(
+  "build-e2e-test-app-e2e",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app-e2e",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -225,6 +225,16 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "gen-pages-demo-prod-e2e",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
+    paths.demo_output_latest
+  )
+);
+
 const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
 gulp.task(

build-scripts/gulp/licenses.js

@@ -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.8.0",
     licenseFile: "license-mit",
   },
 ];

build-scripts/gulp/rspack.js

@@ -177,6 +177,18 @@ gulp.task("rspack-prod-demo", () =>
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
       isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-demo-e2e", () =>
+  prodBuild(
+    createDemoConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
   )
 );
@@ -269,6 +281,18 @@ gulp.task("rspack-prod-e2e-test-app", () =>
     bothBuilds(createE2eTestAppConfig, {
       isProdBuild: true,
       isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
+gulp.task("rspack-prod-e2e-test-app-e2e", () =>
+  prodBuild(
+    createE2eTestAppConfig({
+      isProdBuild: true,
+      latestBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
     })
   )
 );

build-scripts/rspack.cjs

@@ -387,9 +387,14 @@ const createAppConfig = ({
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createDemoConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
   createRspackConfig(
-    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
@@ -401,9 +406,19 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
-const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+const createE2eTestAppConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
   createRspackConfig(
-    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+    bundle.config.e2eTestApp({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+    })
   );
 
 module.exports = {

demo/src/configs/demo-configs.ts

@@ -1,7 +1,16 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
-import type { DemoConfig } from "./types";
+import { getDemoTheme } from "../stubs/frontend";
+import type { DemoConfig, DemoTheme } from "./types";
+
+export const applyDemoTheme = (hass: MockHomeAssistant, theme: DemoTheme) => {
+  if (typeof theme === "function") {
+    hass.mockTheme(theme());
+    return;
+  }
+  hass.mockTheme(null, getDemoTheme(theme));
+};
 
 export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./sections").then((mod) => mod.demoSections),
@@ -31,5 +40,5 @@ export const setDemoConfig = async (
   hass.addEntities(config.entities(hass.localize), true);
   hass.addEntities(energyEntities());
   lovelace.saveConfig(config.lovelace(hass.localize));
-  hass.mockTheme(config.theme());
+  applyDemoTheme(hass, config.theme);
 };

demo/src/configs/sections/index.ts

@@ -8,5 +8,5 @@ export const demoSections: DemoConfig = {
   name: "Home Demo",
   lovelace: demoLovelaceSections,
   entities: demoEntitiesSections,
-  theme: () => ({}),
+  theme: { theme: "default", dark: false },
 };

demo/src/configs/types.ts

@@ -2,6 +2,9 @@ import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import type { EntityInput } from "../../../src/fake_data/entities/types";
+import type { ThemeSettings } from "../../../src/types";
+
+export type DemoTheme = ThemeSettings | (() => Record<string, string> | null);
 
 export interface DemoConfig {
   index?: number;
@@ -12,5 +15,5 @@ export interface DemoConfig {
     string | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
   entities: (localize: LocalizeFunc) => EntityInput[];
-  theme: () => Record<string, string> | null;
+  theme: DemoTheme;
 }

demo/src/ha-demo.ts

@@ -5,7 +5,7 @@ import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
 import { provideHass } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import type { HomeAssistant } from "../../src/types";
-import { selectedDemoConfig } from "./configs/demo-configs";
+import { applyDemoTheme, selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { demoDevices } from "./stubs/devices";
@@ -173,9 +173,7 @@ export class HaDemo extends HomeAssistantAppEl {
     Promise.all([selectedDemoConfig, localizePromise]).then(
       ([conf, localize]) => {
         hass.addEntities(conf.entities(localize));
-        if (conf.theme) {
-          hass.mockTheme(conf.theme());
-        }
+        applyDemoTheme(hass, conf.theme);
       }
     );
 

demo/src/stubs/cloud-demo-state.ts

@@ -22,7 +22,7 @@ export type DemoCloudBackup = "fresh" | "stale" | "failed" | "local" | "none";
 export interface CloudDemoScenario {
   account: DemoCloudAccount;
   onboarded: boolean;
-  // Onboarding postponed server-side (maps to is_onboarding_postponed); hides
+  // Onboarding postponed server-side (maps to onboarding_postponed); hides
   // the onboarding UI without marking it completed.
   postponed: boolean;
   remote: boolean;

demo/src/stubs/cloud.ts

@@ -57,7 +57,7 @@ const cloudStatus: CloudStatusLoggedIn = {
   remote_certificate_status: "ready",
   http_use_ssl: false,
   active_subscription: true,
-  is_onboarding_postponed: false,
+  onboarding_postponed: false,
   onboarding_completed: true,
   prefs: {
     google_enabled: true,
@@ -124,7 +124,7 @@ const applyScenario = () => {
     ? [...ONBOARDING_ITEMS]
     : [];
   cloudStatus.onboarding_completed = scenario.onboarded;
-  cloudStatus.is_onboarding_postponed = scenario.postponed;
+  cloudStatus.onboarding_postponed = scenario.postponed;
   cloudStatus.prefs.onboarding_postponed_until = scenario.postponed
     ? new Date(Date.now() + 24 * 3600 * 1000).toISOString()
     : null;
@@ -165,7 +165,7 @@ const syncScenarioFromStatus = () => {
   const scenario = getCloudDemoScenario();
   const next = {
     onboarded: cloudStatus.onboarding_completed,
-    postponed: cloudStatus.is_onboarding_postponed,
+    postponed: cloudStatus.onboarding_postponed,
     remote: cloudStatus.prefs.remote_enabled,
     webrtc: cloudStatus.prefs.cloud_ice_servers_enabled,
     webhooks: Object.keys(cloudStatus.prefs.cloudhooks).length > 0,
@@ -201,7 +201,7 @@ export const mockCloud = (hass: MockHomeAssistant) => {
     cloudStatus.prefs.onboarding_postponed_until = new Date(
       Date.now() + 24 * 3600 * 1000
     ).toISOString();
-    cloudStatus.is_onboarding_postponed = true;
+    cloudStatus.onboarding_postponed = true;
     syncScenarioFromStatus();
     // Backend returns the full logged-in status object.
     return { ...cloudStatus, prefs: { ...cloudStatus.prefs } };

demo/src/stubs/frontend.ts

@@ -1,10 +1,37 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import type { ThemeSettings } from "../../../src/types";
 
-let sidebarChangeCallback;
+let sidebarChangeCallback: ((data: { value: unknown }) => void) | undefined;
+let themeChangeCallback: ((data: { value: ThemeSettings }) => void) | undefined;
+
+const THEME_STORAGE_KEY = "demo_theme";
+const DEFAULT_THEME: ThemeSettings = { theme: "default", dark: false };
+
+export const getDemoTheme = (
+  fallback: ThemeSettings = DEFAULT_THEME
+): ThemeSettings => {
+  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+  if (!storedTheme) {
+    return fallback;
+  }
+  try {
+    return JSON.parse(storedTheme) as ThemeSettings;
+  } catch {
+    localStorage.removeItem(THEME_STORAGE_KEY);
+    return fallback;
+  }
+};
 
 export const mockFrontend = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_user_data", () => ({ value: null }));
+  hass.mockWS("frontend/get_user_data", ({ key }) => ({
+    value: key === "theme" ? getDemoTheme() : null,
+  }));
   hass.mockWS("frontend/set_user_data", ({ key, value }) => {
+    if (key === "theme") {
+      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(value));
+      themeChangeCallback?.({ value });
+      localStorage.removeItem("selectedTheme");
+    }
     if (key === "sidebar") {
       sidebarChangeCallback?.({
         value: {
@@ -14,10 +41,18 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
       });
     }
   });
-  hass.mockWS("frontend/subscribe_user_data", (msg, _hass, onChange) => {
+  hass.mockWS("frontend/subscribe_user_data", (msg, currentHass, onChange) => {
     if (msg.key === "sidebar") {
       sidebarChangeCallback = onChange;
     }
+    if (msg.key === "theme") {
+      themeChangeCallback = onChange;
+      onChange?.({
+        value: getDemoTheme(currentHass.selectedTheme ?? undefined),
+      });
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
     onChange?.({ value: null });
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};

package.json

@@ -12,7 +12,7 @@
     "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
-    "lint:types": "tsc",
+    "lint:types": "node ./node_modules/@typescript/native/bin/tsc",
     "lint:lit": "lit-analyzer \"{.,*}/src/**/*.ts\"",
     "lint:licenses": "node --no-deprecation script/check-licenses",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types && yarn run lint:lit",
@@ -48,19 +48,19 @@
     "@codemirror/language": "6.12.4",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
-    "@codemirror/state": "6.7.0",
-    "@codemirror/view": "6.43.5",
+    "@codemirror/state": "6.7.1",
+    "@codemirror/view": "6.43.6",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.9",
-    "@formatjs/intl-displaynames": "7.3.10",
-    "@formatjs/intl-durationformat": "0.10.15",
-    "@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.5.2",
+    "@formatjs/intl-displaynames": "7.3.13",
+    "@formatjs/intl-durationformat": "0.10.18",
+    "@formatjs/intl-getcanonicallocales": "3.2.11",
+    "@formatjs/intl-listformat": "8.3.13",
+    "@formatjs/intl-locale": "5.3.10",
+    "@formatjs/intl-numberformat": "9.3.14",
+    "@formatjs/intl-pluralrules": "6.3.13",
+    "@formatjs/intl-relativetimeformat": "12.3.13",
     "@fullcalendar/core": "6.1.21",
     "@fullcalendar/daygrid": "6.1.21",
     "@fullcalendar/interaction": "6.1.21",
@@ -77,19 +77,19 @@
     "@lit/task": "1.0.3",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@material/web": "2.4.1",
+    "@material/web": "2.5.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.3.1",
-    "@tsparticles/preset-links": "4.3.1",
+    "@tsparticles/engine": "4.3.2",
+    "@tsparticles/preset-links": "4.3.2",
     "@vibrant/color": "4.0.4",
     "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.0",
+    "barcode-detector": "3.2.1",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
@@ -102,12 +102,12 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.4.2",
+    "fuse.js": "7.5.0",
     "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
-    "idb-keyval": "6.2.6",
-    "intl-messageformat": "11.2.9",
+    "idb-keyval": "6.3.0",
+    "intl-messageformat": "11.2.12",
     "js-yaml": "5.2.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -115,7 +115,7 @@
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "marked": "18.0.5",
+    "marked": "18.0.6",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -145,14 +145,14 @@
     "@babel/preset-env": "8.0.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.63.0",
-    "@lokalise/node-api": "16.0.0",
+    "@html-eslint/eslint-plugin": "0.64.0",
+    "@lokalise/node-api": "16.3.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.61.1",
-    "@rsdoctor/rspack-plugin": "1.5.17",
-    "@rspack/core": "2.1.2",
+    "@rsdoctor/rspack-plugin": "1.6.0",
+    "@rspack/core": "2.1.4",
     "@rspack/dev-server": "2.1.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -168,12 +168,13 @@
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@vitest/coverage-v8": "4.1.9",
+    "@typescript/native": "npm:typescript@7.0.2",
+    "@vitest/coverage-v8": "4.1.10",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.6.0",
+    "eslint": "10.7.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -195,24 +196,24 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.8",
+    "lint-staged": "17.1.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
     "minify-literals": "2.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.9.4",
+    "prettier": "3.9.5",
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.0.0",
-    "tar": "7.5.19",
+    "tar": "7.5.20",
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.62.1",
+    "typescript-eslint": "8.64.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.9",
+    "vitest": "4.1.10",
     "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"
@@ -228,7 +229,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.17.0",
+  "packageManager": "yarn@4.17.1",
   "volta": {
     "node": "24.18.0"
   }

renovate.json

@@ -58,6 +58,17 @@
       "depNameTemplate": "rhysd/actionlint",
       "datasourceTemplate": "github-releases",
       "extractVersionTemplate": "^v(?<version>.+)$"
+    },
+    {
+      "description": "Keep Playwright CI container image up to date",
+      "customType": "regex",
+      "managerFilePatterns": ["/^\\.github/workflows/e2e\\.yaml$/"],
+      "matchStrings": [
+        "mcr\\.microsoft\\.com/playwright:(?<currentValue>v\\d+\\.\\d+\\.\\d+-noble)"
+      ],
+      "depNameTemplate": "mcr.microsoft.com/playwright",
+      "datasourceTemplate": "docker",
+      "versioningTemplate": "regex:^v(?<major>\\d+)\\.(?<minor>\\d+)\\.(?<patch>\\d+)-(?<compatibility>noble)$"
     }
   ],
   "packageRules": [
@@ -86,6 +97,16 @@
       "description": "Group date-fns with dependent timezone package",
       "groupName": "date-fns",
       "matchPackageNames": ["date-fns", "date-fns-tz"]
+    },
+    {
+      "description": "Group formatjs monorepo package",
+      "groupName": "formatjs",
+      "matchPackageNames": ["@formatjs/**"]
+    },
+    {
+      "description": "Group Playwright package and CI container updates",
+      "groupName": "Playwright",
+      "matchPackageNames": ["@playwright/test", "mcr.microsoft.com/playwright"]
     }
   ]
 }

src/common/decorators/consume-context-entry.ts

@@ -1,5 +1,7 @@
-import { consume } from "@lit/context";
+import { ContextEvent } from "@lit/context";
+import type { Context, ContextCallback } from "@lit/context";
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
+import type { ReactiveController, ReactiveElement } from "lit";
 import type {
   HomeAssistant,
   HomeAssistantInternationalization,
@@ -49,8 +51,86 @@ export const preserveUnchangedEntityStatesRecord = <
   return previous;
 };
 
+/**
+ * Reactive controller that subscribes to a Lit context and assigns each
+ * delivered value to a host property — WITHOUT forcing a host update on every
+ * delivery.
+ *
+ * `@lit/context`'s built-in `ContextConsumer` calls `host.requestUpdate()`
+ * unconditionally on every provider notification. For a hot context such as
+ * `statesContext` (replaced on every entity state change) that means every
+ * consumer runs an (often empty) update/render cycle on every unrelated state
+ * change, even when the value it actually reads is unchanged.
+ *
+ * This controller instead leaves update scheduling to the property's own
+ * setter. Combined with {@link transform}, that setter only requests an update
+ * when the *selected* value changes (Lit gates `requestUpdate(key, oldValue)`
+ * with `hasChanged`), so unrelated context churn no longer triggers renders.
+ */
+class ContextSubscriptionController<ValueType> implements ReactiveController {
+  private _unsubscribe?: () => void;
+
+  constructor(
+    private readonly _host: ReactiveElement,
+    private readonly _context: Context<unknown, ValueType>,
+    private readonly _assign: (value: ValueType) => void
+  ) {
+    this._host.addController(this);
+  }
+
+  public hostConnected(): void {
+    this._host.dispatchEvent(
+      new ContextEvent(this._context, this._host, this._callback, true)
+    );
+  }
+
+  public hostDisconnected(): void {
+    this._unsubscribe?.();
+    this._unsubscribe = undefined;
+  }
+
+  // Class field arrow function so the identity is stable per instance, which the
+  // provider's subscription bookkeeping and `ContextRoot` deduping rely on.
+  private readonly _callback: ContextCallback<ValueType> = (
+    value,
+    unsubscribe
+  ) => {
+    // A different provider answered (e.g. re-parenting); drop the stale one.
+    if (this._unsubscribe && this._unsubscribe !== unsubscribe) {
+      this._unsubscribe();
+    }
+    this._unsubscribe = unsubscribe;
+    // Assign through the property setter, which decides — via `hasChanged` —
+    // whether an update is actually needed. We intentionally never call
+    // `host.requestUpdate()` here.
+    this._assign(value);
+  };
+}
+
+/**
+ * Like `@consume({ subscribe: true })` from `@lit/context`, but does not force a
+ * host update on every provider notification — see
+ * {@link ContextSubscriptionController}. Pair with {@link transform} so an
+ * update is scheduled only when the derived value actually changes.
+ */
+const subscribeContext =
+  <ValueType>(context: Context<unknown, ValueType>) =>
+  (proto: object, propertyKey: string): void => {
+    (proto.constructor as unknown as typeof ReactiveElement).addInitializer(
+      (host) => {
+        new ContextSubscriptionController<ValueType>(
+          host as ReactiveElement,
+          context,
+          (value) => {
+            (host as unknown as Record<string, unknown>)[propertyKey] = value;
+          }
+        );
+      }
+    );
+  };
+
 const composeDecorator = <T, V>(
-  context: Parameters<typeof consume>[0]["context"],
+  context: Context<unknown, T>,
   watchKey: string | undefined,
   select: (this: unknown, value: T) => V | undefined
 ) => {
@@ -60,7 +140,7 @@ const composeDecorator = <T, V>(
     },
     watch: watchKey ? [watchKey] : [],
   });
-  const consumeDec = consume<any>({ context, subscribe: true });
+  const consumeDec = subscribeContext<T>(context);
   return (proto: any, propertyKey: string) => {
     transformDec(proto, propertyKey);
     consumeDec(proto, propertyKey);
@@ -124,10 +204,7 @@ export const consumeEntityStates = (config: ConsumeEntryConfig) => {
       },
       watch: watchKey ? [watchKey] : [],
     });
-    const consumeDec = consume<any>({
-      context: statesContext,
-      subscribe: true,
-    });
+    const consumeDec = subscribeContext<HassEntities>(statesContext);
     transformDec(proto as never, propertyKey);
     consumeDec(proto as never, propertyKey);
   };
@@ -151,7 +228,7 @@ export const consumeEntityRegistryEntry = (config: ConsumeEntryConfig) =>
 /**
  * Consumes `internationalizationContext` and narrows it to the `localize`
  * function. No host watching is needed — the decorated property updates
- * whenever the i18n context changes.
+ * whenever `localize` changes.
  */
 export const consumeLocalize = () =>
   composeDecorator<HomeAssistantInternationalization, LocalizeFunc>(

src/common/decorators/storage.ts

@@ -51,8 +51,9 @@ class StorageClass {
     storageKey: string,
     callback: Callback
   ): UnsubscribeFunc {
-    if (this._listeners[storageKey]) {
-      this._listeners[storageKey].push(callback);
+    const listeners = this._listeners[storageKey];
+    if (listeners) {
+      listeners.push(callback);
     } else {
       this._listeners[storageKey] = [callback];
     }

src/common/entity/can_toggle_domain.ts

@@ -6,11 +6,17 @@ export const canToggleDomain = (hass: HomeAssistant, domain: string) => {
     return false;
   }
 
+  if (domain === "button" || domain === "input_button") {
+    return "press" in services;
+  }
   if (domain === "lock") {
     return "lock" in services;
   }
   if (domain === "cover") {
     return "open_cover" in services;
   }
+  if (domain === "valve") {
+    return "open_valve" in services;
+  }
   return "turn_on" in services;
 };

src/common/entity/can_toggle_state.ts

@@ -3,6 +3,7 @@ import type { HomeAssistant } from "../../types";
 import { canToggleDomain } from "./can_toggle_domain";
 import { computeStateDomain } from "./compute_state_domain";
 import { supportsFeature } from "./supports-feature";
+import { ClimateEntityFeature } from "../../data/climate";
 
 export const canToggleState = (hass: HomeAssistant, stateObj: HassEntity) => {
   const domain = computeStateDomain(stateObj);
@@ -26,7 +27,10 @@ export const canToggleState = (hass: HomeAssistant, stateObj: HassEntity) => {
   }
 
   if (domain === "climate") {
-    return supportsFeature(stateObj, 4096);
+    return (
+      supportsFeature(stateObj, ClimateEntityFeature.TURN_ON) &&
+      supportsFeature(stateObj, ClimateEntityFeature.TURN_OFF)
+    );
   }
 
   return canToggleDomain(hass, domain);

src/common/entity/get_states.ts

@@ -89,7 +89,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
     device_class: [
       "battery",
       "battery_charging",
-      "co",
+      "carbon_monoxide",
       "cold",
       "connectivity",
       "door",
@@ -227,7 +227,12 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "voltage",
       "volume_flow_rate",
     ],
-    state_class: ["measurement", "total", "total_increasing"],
+    state_class: [
+      "measurement",
+      "measurement_angle",
+      "total",
+      "total_increasing",
+    ],
   },
   switch: {
     device_class: ["outlet", "switch"],

src/common/navigate.ts

@@ -64,6 +64,23 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   const replace = options?.replace || false;
 
   if (__DEMO__) {
+    if (path.includes("#")) {
+      if (replace) {
+        mainWindow.history.replaceState(
+          mainWindow.history.state?.root
+            ? { root: true }
+            : (options?.data ?? null),
+          "",
+          path
+        );
+      } else {
+        mainWindow.history.pushState(options?.data ?? null, "", path);
+      }
+      fireEvent(mainWindow, "location-changed", {
+        replace,
+      });
+      return true;
+    }
     if (replace) {
       mainWindow.history.replaceState(
         mainWindow.history.state?.root

src/common/string/is_ip_address.ts

@@ -1,4 +1,53 @@
-const regexp =
-  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+// Unanchored regex fragments, shared as the single source of truth for both
+// the boolean validators below and the HTML `pattern` attribute (the browser
+// anchors a pattern as `^(?:…)$`).
+const IPV4 =
+  "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";
 
-export const isIPAddress = (input: string): boolean => regexp.test(input);
+const IPV6 =
+  "(?:([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|::(ffff(:0{1,4})?:)?((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))";
+
+// CIDR prefix lengths: 0-32 for IPv4, 0-128 for IPv6.
+const IPV4_PREFIX = "(?:3[0-2]|[12]?[0-9])";
+const IPV6_PREFIX = "(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])";
+
+// IPv4 or IPv6 address.
+export const IP_ADDRESS_PATTERN = `${IPV4}|${IPV6}`;
+
+// IPv4/IPv6 address, optionally with a CIDR prefix (network).
+export const IP_ADDRESS_OR_NETWORK_PATTERN = `${IPV4}(?:/${IPV4_PREFIX})?|${IPV6}(?:/${IPV6_PREFIX})?`;
+
+const anchored = (pattern: string): RegExp => new RegExp(`^(?:${pattern})$`);
+
+const ipv4Regexp = anchored(IPV4);
+const ipv6Regexp = anchored(IPV6);
+
+// IPv4 address, e.g. 192.168.1.10
+export const isIPAddress = (input: string): boolean => ipv4Regexp.test(input);
+
+// IPv6 address, e.g. fe80::85d:e82c:9446:7995
+export const isIPv6Address = (input: string): boolean => ipv6Regexp.test(input);
+
+// IPv4 or IPv6 address
+export const isIPAddressV4OrV6 = (input: string): boolean =>
+  isIPAddress(input) || isIPv6Address(input);
+
+// IP network in CIDR notation, e.g. 192.168.1.0/24 or fd00::/8
+export const isIPNetwork = (input: string): boolean => {
+  const parts = input.split("/");
+  if (parts.length !== 2) {
+    return false;
+  }
+  const [address, prefix] = parts;
+  if (!/^\d{1,3}$/.test(prefix)) {
+    return false;
+  }
+  const prefixLength = Number(prefix);
+  if (isIPAddress(address)) {
+    return prefixLength >= 0 && prefixLength <= 32;
+  }
+  if (isIPv6Address(address)) {
+    return prefixLength >= 0 && prefixLength <= 128;
+  }
+  return false;
+};

src/common/style/derived-css-vars.ts

@@ -33,13 +33,12 @@ const extractVarFromBase = (
   varName: string,
   baseVars: Record<string, string>
 ): string | undefined => {
-  if (baseVars[varName] && baseVars[varName].startsWith("var(")) {
-    const baseVarName = baseVars[varName]
-      .substring(6, baseVars[varName].length - 1)
-      .trim();
+  const value = baseVars[varName];
+  if (value && value.startsWith("var(")) {
+    const baseVarName = value.substring(6, value.length - 1).trim();
     return extractVarFromBase(baseVarName, baseVars);
   }
-  return baseVars[varName];
+  return value;
 };
 
 /**

src/common/url/construct-url.ts

@@ -1,5 +1,6 @@
 export const constructUrlCurrentPath = (searchParams: string): string => {
   const base = window.location.pathname;
+  const hash = __DEMO__ ? window.location.hash : "";
   // Prevent trailing "?" if no parameters exist
-  return searchParams ? base + "?" + searchParams : base;
+  return `${searchParams ? `${base}?${searchParams}` : base}${hash}`;
 };

src/components/chart/round-caps.ts

@@ -1,8 +1,16 @@
 import type { BarSeriesOption } from "echarts/types/dist/shared";
 
+/**
+ * `extraBuckets` (only used when `stacked`) seeds the bucket union with the
+ * expected statistics grid so sparse datasets get zero-filled across the whole
+ * range, including past their last real point. Without it, buckets are only
+ * derived from the data and trailing buckets are never filled (legacy
+ * behavior, kept for callers that don't pass a grid).
+ */
 export function fillDataGapsAndRoundCaps(
   datasets: BarSeriesOption[],
-  stacked = true
+  stacked = true,
+  extraBuckets?: number[]
 ) {
   if (!stacked) {
     // For non-stacked charts, we can simply apply an overall border to each stack
@@ -44,6 +52,7 @@ export function fillDataGapsAndRoundCaps(
           dataset.data!.map((datapoint) => Number(datapoint![0]))
         )
         .flat()
+        .concat(extraBuckets ?? [])
     )
   ).sort((a, b) => a - b);
 
@@ -61,9 +70,18 @@ export function fillDataGapsAndRoundCaps(
       const x = item.value?.[0];
       const stack = datasets[i].stack ?? "";
       if (x === undefined) {
-        continue;
+        // Past the end of this dataset's data. Only append trailing buckets
+        // when an explicit grid was provided; originally-empty datasets
+        // (e.g. compare placeholders) stay empty either way.
+        if (
+          dataPoint !== undefined ||
+          extraBuckets === undefined ||
+          !datasets[i].data!.length
+        ) {
+          continue;
+        }
       }
-      if (Number(x) !== bucket) {
+      if (x === undefined || Number(x) !== bucket) {
         datasets[i].data?.splice(index, 0, {
           value: [bucket, 0],
           itemStyle: {

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

@@ -16,6 +16,7 @@ import {
   CLIMATE_MODE_CONFIGS,
   generateStateHistoryChartLineData,
 } from "./state-history-chart-line-data";
+import { createYAxisPrecisionBounds } from "./y-axis-fraction-digits";
 import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -28,6 +29,10 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
 
+// Minimum width reserved for the Y-axis labels; also the value _yWidth is
+// re-measured up from whenever the tick precision changes on zoom.
+const MIN_Y_AXIS_WIDTH = 25;
+
 // 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.
@@ -101,7 +106,7 @@ export class StateHistoryChartLine extends LitElement {
 
   private _hiddenStats = new Set<string>();
 
-  @state() private _yWidth = 25;
+  @state() private _yWidth = MIN_Y_AXIS_WIDTH;
 
   @state() private _visualMap?: VisualMapComponentOption[];
 
@@ -318,8 +323,18 @@ export class StateHistoryChartLine extends LitElement {
         yAxis: {
           type: this.logarithmicScale ? "log" : "value",
           name: this.unit,
-          min: this._clampYAxis(minYAxis),
-          max: this._clampYAxis(maxYAxis),
+          ...createYAxisPrecisionBounds({
+            min: this._clampYAxis(minYAxis),
+            max: this._clampYAxis(maxYAxis),
+            onFractionDigits: (digits) => {
+              if (digits !== this._yAxisFractionDigits) {
+                this._yAxisFractionDigits = digits;
+                // Re-measure the gutter for the new precision so it can shrink
+                // again when zooming back out (_yWidth otherwise only grows).
+                this._yWidth = 0;
+              }
+            },
+          }),
           position: rtl ? "right" : "left",
           scale: true,
           nameGap: 2,
@@ -448,7 +463,7 @@ export class StateHistoryChartLine extends LitElement {
       minimumFractionDigits: value === 0 ? 0 : this._yAxisFractionDigits,
       maximumFractionDigits: this._yAxisFractionDigits,
     });
-    const width = measureTextWidth(label, 12) + 5;
+    const width = Math.max(measureTextWidth(label, 12) + 5, MIN_Y_AXIS_WIDTH);
     if (width > this._yWidth) {
       this._yWidth = width;
       fireEvent(this, "y-width-changed", {

src/components/chart/statistics-chart.ts

@@ -34,6 +34,7 @@ import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import { generateStatisticsChartData } from "./statistics-chart-data";
+import { createYAxisPrecisionBounds } from "./y-axis-fraction-digits";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -391,6 +392,11 @@ export class StatisticsChart extends LitElement {
       }
     }
 
+    const yAxisScale =
+      this.chartType.startsWith("line") ||
+      this.logarithmicScale ||
+      minYAxis !== undefined ||
+      maxYAxis !== undefined;
     this._chartOptions = {
       xAxis: [
         {
@@ -434,13 +440,17 @@ export class StatisticsChart extends LitElement {
         )
           ? "right"
           : "left",
-        scale:
-          this.chartType.startsWith("line") ||
-          this.logarithmicScale ||
-          minYAxis !== undefined ||
-          maxYAxis !== undefined,
-        min: this._clampYAxis(minYAxis),
-        max: this._clampYAxis(maxYAxis),
+        scale: yAxisScale,
+        ...createYAxisPrecisionBounds({
+          min: this._clampYAxis(minYAxis),
+          max: this._clampYAxis(maxYAxis),
+          // Bar charts stay anchored at 0, so precision must reflect the
+          // 0-based range that is actually rendered.
+          includeZero: !yAxisScale,
+          onFractionDigits: (digits) => {
+            this._yAxisFractionDigits = digits;
+          },
+        }),
         splitLine: {
           show: true,
         },

src/components/chart/y-axis-fraction-digits.ts

@@ -1,9 +1,77 @@
+// A range smaller than this fraction of the axis magnitude is floating-point
+// noise (e.g. from summed statistics), not real precision.
+const NEGLIGIBLE_RANGE_RATIO = 1e-10;
+
 // Derive the number of decimal digits to use for Y-axis labels from the
-// observed data range. We estimate the tick interval as `range / 10` (twice
-// ECharts' default splitNumber of 5, as a safety margin against finer "nice"
-// intervals), then derive `ceil(-log10(interval))`.
-export function computeYAxisFractionDigits(min: number, max: number): number {
-  const range = max - min;
+// observed data range. We mirror how ECharts sizes its ticks: it splits the
+// range into ~5 intervals (its default `splitNumber`) and rounds that raw
+// interval to a "nice" 1/2/3/5×10ⁿ value, then reports the decimals that nice
+// interval needs. This matches the precision ECharts actually renders, so
+// labels are neither truncated to identical values nor padded with extra zeros.
+export function computeYAxisFractionDigits(
+  min: number,
+  max: number,
+  // Bar axes render from 0, so union the extent with 0 to match.
+  includeZero = false
+): number {
+  const lo = includeZero ? Math.min(min, 0) : min;
+  const hi = includeZero ? Math.max(max, 0) : max;
+  const range = hi - lo;
   if (!Number.isFinite(range) || range <= 0) return 1;
-  return Math.max(0, Math.ceil(-Math.log10(range / 10)));
+  // A near-zero range is fp noise; deriving digits from it would pad the labels
+  // with a tail of zeros (e.g. "0.20000000000000"), so treat it as flat.
+  const magnitude = Math.max(Math.abs(lo), Math.abs(hi));
+  if (range <= magnitude * NEGLIGIBLE_RANGE_RATIO) return 1;
+  const rawInterval = range / 5;
+  const exponent = Math.floor(Math.log10(rawInterval));
+  const mantissa = rawInterval / 10 ** exponent; // in [1, 10)
+  // Rounding the mantissa to a nice value only ever carries to the next power
+  // of ten (mantissa ≥ 7 → 10), which needs one fewer decimal.
+  const niceExponent = mantissa >= 7 ? exponent + 1 : exponent;
+  return Math.max(0, -niceExponent);
+}
+
+interface YAxisExtentValues {
+  min: number;
+  max: number;
+}
+
+type YAxisBound =
+  number | ((values: YAxisExtentValues) => number | undefined) | undefined;
+
+const resolveYAxisBound = (
+  bound: YAxisBound,
+  values: YAxisExtentValues
+): number | undefined => (typeof bound === "function" ? bound(values) : bound);
+
+// Wrap the Y-axis `min`/`max` options in callbacks so the tick-label precision
+// tracks the currently visible axis extent. ECharts re-invokes these callbacks
+// with the extent of the visible (zoom-filtered) data on every dataZoom, and
+// always before the label formatter runs, so recomputing the fraction digits
+// here keeps zoomed-in labels distinct. The callbacks return the original
+// bounds unchanged, so auto-scaling still applies when a bound is not set.
+export function createYAxisPrecisionBounds(options: {
+  min?: YAxisBound;
+  max?: YAxisBound;
+  // Set for bar axes anchored at 0, so precision reflects the 0-based range.
+  includeZero?: boolean;
+  onFractionDigits: (digits: number) => void;
+}): {
+  min: (values: YAxisExtentValues) => number | undefined;
+  max: (values: YAxisExtentValues) => number | undefined;
+} {
+  const { min, max, includeZero, onFractionDigits } = options;
+  return {
+    min: (values) => {
+      const resolvedMin = resolveYAxisBound(min, values);
+      const resolvedMax = resolveYAxisBound(max, values);
+      const extentMin = resolvedMin ?? values.min;
+      const extentMax = resolvedMax ?? values.max;
+      onFractionDigits(
+        computeYAxisFractionDigits(extentMin, extentMax, includeZero)
+      );
+      return resolvedMin;
+    },
+    max: (values) => resolveYAxisBound(max, values),
+  };
 }

src/components/chips/ha-assist-chip.ts

@@ -1,8 +1,8 @@
 import { AssistChip } from "@material/web/chips/internal/assist-chip";
-import { styles } from "@material/web/chips/internal/assist-styles";
+import { styles } from "@material/web/chips/internal/assist-styles.cssresult.js";
 
-import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles";
-import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
+import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles.cssresult.js";
+import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles.cssresult.js";
 
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";

src/components/chips/ha-filter-chip.ts

@@ -1,9 +1,9 @@
-import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
+import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles.cssresult.js";
 import { FilterChip } from "@material/web/chips/internal/filter-chip";
-import { styles } from "@material/web/chips/internal/filter-styles";
-import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles";
-import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles";
-import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles";
+import { styles } from "@material/web/chips/internal/filter-styles.cssresult.js";
+import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles.cssresult.js";
+import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles.cssresult.js";
+import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles.cssresult.js";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 

src/components/chips/ha-input-chip.ts

@@ -1,8 +1,8 @@
 import { InputChip } from "@material/web/chips/internal/input-chip";
-import { styles } from "@material/web/chips/internal/input-styles";
-import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles";
-import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles";
-import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles";
+import { styles } from "@material/web/chips/internal/input-styles.cssresult.js";
+import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles.cssresult.js";
+import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles.cssresult.js";
+import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/device/ha-device-automation-picker.ts

@@ -1,3 +1,4 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { consume } from "@lit/context";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -15,7 +16,12 @@ import {
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { CallWS, HomeAssistant, ValueChangedEvent } from "../../types";
+import "../ha-combo-box-item";
 import "../ha-generic-picker";
+import {
+  DEFAULT_ROW_RENDERER_CONTENT,
+  type PickerComboBoxItem,
+} from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
@@ -105,6 +111,7 @@ export abstract class HaDeviceAutomationPicker<
       .disabled=${!this._automations || this._automations.length === 0}
       .getItems=${this._getItems(value, this._automations)}
       @value-changed=${this._automationChanged}
+      .rowRenderer=${this._rowRenderer}
       .valueRenderer=${this._valueRenderer}
       .unknownItemText=${this.hass.localize(
         "ui.panel.config.devices.automation.actions.unknown_action"
@@ -160,6 +167,13 @@ export abstract class HaDeviceAutomationPicker<
     }
   );
 
+  // Device automation labels (entity name + subtype) are often longer than the
+  // field, so let the option wrap onto multiple lines instead of truncating.
+  private _rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) =>
+    html`<ha-combo-box-item type="button" compact multiline>
+      ${DEFAULT_ROW_RENDERER_CONTENT(item)}
+    </ha-combo-box-item>`;
+
   private _valueRenderer: PickerValueRenderer = (value: string) => {
     const automation = this._automations?.find(
       (a, idx) => value === `${a.device_id}_${idx}`

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

@@ -33,7 +33,6 @@ const HIDDEN_ATTRIBUTES = [
   "battery_level",
   "code_arm_required",
   "code_format",
-  "color_modes",
   "device_class",
   "editable",
   "effect_list",

src/components/ha-clock-date-format-picker.ts

@@ -0,0 +1,579 @@
+import { consume, type ContextType } from "@lit/context";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+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 { ensureArray } from "../common/array/ensure-array";
+import { resolveTimeZone } from "../common/datetime/resolve-time-zone";
+import { fireEvent } from "../common/dom/fire_event";
+import { configContext, internationalizationContext } from "../data/context";
+import {
+  CLOCK_CARD_DATE_PARTS,
+  formatClockCardDate,
+} from "../panels/lovelace/cards/clock/clock-date-format";
+import type { ClockCardDatePart } from "../panels/lovelace/cards/types";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./chips/ha-assist-chip";
+import "./chips/ha-chip-set";
+import "./chips/ha-input-chip";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import "./ha-input-helper-text";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import "./ha-sortable";
+
+type ClockDatePartSection = "weekday" | "day" | "month" | "year" | "separator";
+
+type ClockDateSeparatorPart = Extract<
+  ClockCardDatePart,
+  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
+>;
+
+const CLOCK_DATE_PART_SECTION_ORDER: readonly ClockDatePartSection[] = [
+  "day",
+  "month",
+  "year",
+  "weekday",
+  "separator",
+];
+
+const CLOCK_DATE_SEPARATOR_VALUES: Record<ClockDateSeparatorPart, string> = {
+  "separator-dash": "-",
+  "separator-slash": "/",
+  "separator-dot": ".",
+  "separator-new-line": "",
+};
+
+const getClockDatePartSection = (
+  part: ClockCardDatePart
+): ClockDatePartSection => {
+  if (part.startsWith("weekday-")) {
+    return "weekday";
+  }
+
+  if (part.startsWith("day-")) {
+    return "day";
+  }
+
+  if (part.startsWith("month-")) {
+    return "month";
+  }
+
+  if (part.startsWith("year-")) {
+    return "year";
+  }
+
+  return "separator";
+};
+
+interface ClockDatePartSectionData {
+  id: ClockDatePartSection;
+  title: string;
+  items: PickerComboBoxItem[];
+}
+
+/**
+ * Filters out sections whose group already has a value in `value`, so only
+ * one non-separator value per group can be selected in the picker. The whole
+ * group of the item at `excludeIndex` (the one being edited) stays
+ * selectable, even if that group has more than one value in `value` (e.g. a
+ * pre-existing config authored outside the picker via YAML).
+ * The separator group is always kept.
+ */
+export const getAvailableClockDatePartSections = (
+  sections: ClockDatePartSectionData[],
+  value: string[],
+  excludeIndex?: number
+): ClockDatePartSectionData[] => {
+  const editedItem = excludeIndex != null ? value[excludeIndex] : undefined;
+  const editedSection = editedItem
+    ? getClockDatePartSection(editedItem as ClockCardDatePart)
+    : undefined;
+
+  const usedSections = new Set<ClockDatePartSection>();
+
+  value.forEach((item) => {
+    const section = getClockDatePartSection(item as ClockCardDatePart);
+
+    if (section !== "separator" && section !== editedSection) {
+      usedSections.add(section);
+    }
+  });
+
+  return sections.filter(
+    (sectionData) =>
+      sectionData.id === "separator" || !usedSections.has(sectionData.id)
+  );
+};
+
+interface ClockDatePartValueItem {
+  key: string;
+  item: string;
+  idx: number;
+}
+
+@customElement("ha-clock-date-format-picker")
+export class HaClockDateFormatPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property() public label?: string;
+
+  @property() public value?: string[] | string;
+
+  @property() public helper?: string;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _hassConfig!: ContextType<typeof configContext>;
+
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
+
+  @state() private _editIndex?: number;
+
+  protected render() {
+    const value = this._value;
+    const valueItems = this._getValueItems(value);
+    const sections = this._buildSections();
+    const pickerSections = getAvailableClockDatePartSections(
+      sections,
+      value,
+      this._editIndex
+    );
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${this._getPickerValue()}
+        .sections=${this._getSectionHeaders(pickerSections)}
+        .getItems=${this._getItems(pickerSections)}
+        @value-changed=${this._pickerValueChanged}
+      >
+        <div slot="field" class="container">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
+            .disabled=${this.disabled}
+            handle-selector="button.primary.action"
+            filter=".add"
+          >
+            <ha-chip-set>
+              ${repeat(
+                valueItems,
+                (entry: ClockDatePartValueItem) => entry.key,
+                ({ item, idx }) => this._renderValueChip(item, idx, sections)
+              )}
+              ${
+                this.disabled
+                  ? nothing
+                  : html`
+                      <ha-assist-chip
+                        @click=${this._addItem}
+                        .disabled=${this.disabled}
+                        label=${this._i18n.localize("ui.common.add")}
+                        class="add"
+                      >
+                        <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                      </ha-assist-chip>
+                    `
+              }
+            </ha-chip-set>
+          </ha-sortable>
+        </div>
+      </ha-generic-picker>
+      ${this._renderHelper()}
+    `;
+  }
+
+  private _renderHelper() {
+    return this.helper
+      ? html`
+          <ha-input-helper-text .disabled=${this.disabled}>
+            ${this.helper}
+          </ha-input-helper-text>
+        `
+      : nothing;
+  }
+
+  private _getValueItems = memoizeOne(
+    (value: string[]): ClockDatePartValueItem[] => {
+      const occurrences = new Map<string, number>();
+
+      return value.map((item, idx) => {
+        const occurrence = occurrences.get(item) ?? 0;
+        occurrences.set(item, occurrence + 1);
+
+        return {
+          key: `${item}:${occurrence}`,
+          item,
+          idx,
+        };
+      });
+    }
+  );
+
+  private _renderValueChip(
+    item: string,
+    idx: number,
+    sections: ClockDatePartSectionData[]
+  ) {
+    const label = this._getItemLabel(item, sections);
+    const isValid = !!label;
+
+    return html`
+      <ha-input-chip
+        data-idx=${idx}
+        @remove=${this._removeItem}
+        @click=${this._editItem}
+        .label=${label ?? item}
+        .selected=${!this.disabled}
+        .disabled=${this.disabled}
+        class=${!isValid ? "invalid" : ""}
+      >
+        <ha-svg-icon
+          slot="icon"
+          .path=${mdiDragHorizontalVariant}
+        ></ha-svg-icon>
+      </ha-input-chip>
+    `;
+  }
+
+  private async _addItem(ev: Event) {
+    ev.stopPropagation();
+
+    if (this.disabled) {
+      return;
+    }
+
+    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private async _editItem(ev: Event) {
+    ev.stopPropagation();
+
+    if (this.disabled) {
+      return;
+    }
+
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
+      10
+    );
+    this._editIndex = idx;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private get _value() {
+    return !this.value ? [] : ensureArray(this.value);
+  }
+
+  private _toValue = memoizeOne((value: string[]): string[] | undefined =>
+    value.length === 0 ? undefined : value
+  );
+
+  private _buildSections(): ClockDatePartSectionData[] {
+    const itemsBySection: Record<ClockDatePartSection, PickerComboBoxItem[]> = {
+      weekday: [],
+      day: [],
+      month: [],
+      year: [],
+      separator: [],
+    };
+
+    const previewDate = new Date();
+    const previewTimeZone = resolveTimeZone(
+      this._i18n.locale.time_zone,
+      this._hassConfig.config.time_zone
+    );
+
+    CLOCK_CARD_DATE_PARTS.forEach((part) => {
+      const section = getClockDatePartSection(part);
+      const label =
+        this._i18n.localize(
+          `ui.panel.lovelace.editor.card.clock.date.parts.${part}`
+        ) ?? part;
+
+      const secondary =
+        section === "separator"
+          ? CLOCK_DATE_SEPARATOR_VALUES[part as ClockDateSeparatorPart]
+          : formatClockCardDate(
+              previewDate,
+              { parts: [part] },
+              this._i18n.locale.language,
+              previewTimeZone
+            );
+
+      itemsBySection[section].push({
+        id: part,
+        primary: label,
+        secondary,
+        sorting_label: label,
+      });
+    });
+
+    return CLOCK_DATE_PART_SECTION_ORDER.map((section) => ({
+      id: section,
+      title:
+        this._i18n.localize(
+          `ui.panel.lovelace.editor.card.clock.date.sections.${section}`
+        ) ?? section,
+      items: itemsBySection[section],
+    })).filter((section) => section.items.length > 0);
+  }
+
+  private _getSectionHeaders(
+    sections: ClockDatePartSectionData[]
+  ): { id: string; label: string }[] {
+    return sections.map((section) => ({
+      id: section.id,
+      label: section.title,
+    }));
+  }
+
+  private _getItems = memoizeOne(
+    (sections: ClockDatePartSectionData[]) =>
+      (
+        searchString?: string,
+        section?: string
+      ): (PickerComboBoxItem | string)[] => {
+        const normalizedSearch = searchString?.trim().toLowerCase();
+
+        const filteredSections = sections
+          .map((sectionData) => {
+            if (!normalizedSearch) {
+              return sectionData;
+            }
+
+            return {
+              ...sectionData,
+              items: sectionData.items.filter(
+                (item) =>
+                  item.primary.toLowerCase().includes(normalizedSearch) ||
+                  item.secondary?.toLowerCase().includes(normalizedSearch) ||
+                  item.id.toLowerCase().includes(normalizedSearch)
+              ),
+            };
+          })
+          .filter((sectionData) => sectionData.items.length > 0);
+
+        if (section) {
+          return (
+            filteredSections.find((candidate) => candidate.id === section)
+              ?.items || []
+          );
+        }
+
+        const groupedItems: (PickerComboBoxItem | string)[] = [];
+
+        filteredSections.forEach((sectionData) => {
+          groupedItems.push(sectionData.title, ...sectionData.items);
+        });
+
+        return groupedItems;
+      }
+  );
+
+  private _getItemLabel(
+    value: string,
+    sections: ClockDatePartSectionData[]
+  ): string | undefined {
+    for (const section of sections) {
+      const item = section.items.find((candidate) => candidate.id === value);
+
+      if (item) {
+        if (section.id === "separator") {
+          if (value === "separator-new-line") {
+            return item.primary;
+          }
+
+          return item.secondary ?? item.primary;
+        }
+
+        return `${item.secondary} [${item.primary} ${section.title}]`;
+      }
+    }
+
+    return undefined;
+  }
+
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      return this._value[this._editIndex];
+    }
+
+    return undefined;
+  }
+
+  private async _moveItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+
+    const value = this._value;
+    const newValue = value.concat();
+    const element = newValue.splice(oldIndex, 1)[0];
+    newValue.splice(newIndex, 0, element);
+
+    this._setValue(newValue);
+  }
+
+  private async _removeItem(ev: Event) {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
+      10
+    );
+
+    if (Number.isNaN(idx)) {
+      return;
+    }
+
+    const value = [...this._value];
+    value.splice(idx, 1);
+
+    if (this._editIndex !== undefined) {
+      if (this._editIndex === idx) {
+        this._editIndex = undefined;
+      } else if (this._editIndex > idx) {
+        this._editIndex -= 1;
+      }
+    }
+
+    this._setValue(value);
+  }
+
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    if (this.disabled || !value) {
+      return;
+    }
+
+    const newValue = [...this._value];
+
+    if (this._editIndex != null) {
+      newValue[this._editIndex] = value;
+      this._editIndex = undefined;
+    } else {
+      newValue.push(value);
+    }
+
+    this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
+  }
+
+  private _setValue(value: string[]) {
+    const newValue = this._toValue(value);
+    this.value = newValue;
+
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+      width: 100%;
+    }
+
+    .container {
+      position: relative;
+      background-color: var(--mdc-text-field-fill-color, whitesmoke);
+      border-radius: var(--ha-border-radius-sm);
+      border-end-end-radius: var(--ha-border-radius-square);
+      border-end-start-radius: var(--ha-border-radius-square);
+    }
+
+    .container:after {
+      display: block;
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      width: 100%;
+      background-color: var(
+        --mdc-text-field-idle-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+      transition:
+        height 180ms ease-in-out,
+        background-color 180ms ease-in-out;
+    }
+
+    :host([disabled]) .container:after {
+      background-color: var(
+        --mdc-text-field-disabled-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+    }
+
+    .container:focus-within:after {
+      height: 2px;
+      background-color: var(--mdc-theme-primary);
+    }
+
+    label {
+      display: block;
+      margin: 0 0 var(--ha-space-2);
+    }
+
+    .add {
+      order: 1;
+    }
+
+    ha-chip-set {
+      padding: var(--ha-space-2);
+    }
+
+    .invalid {
+      text-decoration: line-through;
+    }
+
+    .sortable-fallback {
+      display: none;
+      opacity: 0;
+    }
+
+    .sortable-ghost {
+      opacity: 0.4;
+    }
+
+    .sortable-drag {
+      cursor: grabbing;
+    }
+
+    ha-input-helper-text {
+      display: block;
+      margin: var(--ha-space-2) 0 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-clock-date-format-picker": HaClockDateFormatPicker;
+  }
+}

src/components/ha-combo-box-item.ts

@@ -7,6 +7,11 @@ export class HaComboBoxItem extends HaMdListItem {
   @property({ type: Boolean, reflect: true, attribute: "border-top" })
   public borderTop = false;
 
+  // Allow the headline/supporting text to wrap onto multiple lines instead of
+  // truncating with an ellipsis. Off by default to preserve single-line rows.
+  @property({ type: Boolean, reflect: true })
+  public multiline = false;
+
   static override styles = [
     ...haMdListStyles,
     css`
@@ -41,6 +46,10 @@ export class HaComboBoxItem extends HaMdListItem {
         font-size: var(--ha-font-size-s);
         white-space: nowrap;
       }
+      :host([multiline]) [slot="headline"],
+      :host([multiline]) [slot="supporting-text"] {
+        white-space: normal;
+      }
       ::slotted(state-badge),
       ::slotted(img) {
         width: 32px;

src/components/ha-form/conditions.ts

@@ -0,0 +1,73 @@
+import type {
+  HaFormBaseSchema,
+  HaFormCondition,
+  HaFormDataContainer,
+  HaFormFieldCondition,
+  HaFormSchema,
+} from "./types";
+
+const isEmpty = (value: unknown): boolean =>
+  value === undefined || value === null || value === "";
+
+const matchFieldCondition = (
+  condition: HaFormFieldCondition,
+  data: HaFormDataContainer | undefined
+): boolean => {
+  const actual = data?.[condition.field];
+  switch (condition.operator ?? "eq") {
+    case "eq":
+      return actual === condition.value;
+    case "not_eq":
+      return actual !== condition.value;
+    case "in":
+      return (
+        Array.isArray(condition.value) &&
+        condition.value.includes(actual as any)
+      );
+    case "not_in":
+      return (
+        Array.isArray(condition.value) &&
+        !condition.value.includes(actual as any)
+      );
+    case "exists":
+      return !isEmpty(actual);
+    case "not_exists":
+      return isEmpty(actual);
+    default:
+      return false;
+  }
+};
+
+export const evaluateCondition = (
+  condition: HaFormCondition,
+  data: HaFormDataContainer | undefined
+): boolean => {
+  if ("condition" in condition) {
+    switch (condition.condition) {
+      case "and":
+        return condition.conditions.every((c) => evaluateCondition(c, data));
+      case "or":
+        return condition.conditions.some((c) => evaluateCondition(c, data));
+      case "not":
+        return !condition.conditions.some((c) => evaluateCondition(c, data));
+      default:
+        return false;
+    }
+  }
+  return matchFieldCondition(condition, data);
+};
+
+export const isFieldHidden = (
+  schema: HaFormSchema,
+  data: HaFormDataContainer | undefined
+): boolean => {
+  const { hidden } = schema as HaFormBaseSchema;
+  if (!hidden) {
+    return false;
+  }
+  if (hidden === true) {
+    return true;
+  }
+  const conditions = Array.isArray(hidden) ? hidden : [hidden];
+  return conditions.every((condition) => evaluateCondition(condition, data));
+};

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

@@ -2,6 +2,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
+import { isFieldHidden } from "./conditions";
 import "./ha-form";
 import type { HaForm } from "./ha-form";
 import type {
@@ -68,19 +69,21 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.schema.schema.map(
-        (item) => html`
-          <ha-form
-            .hass=${this.hass}
-            .data=${this.data}
-            .schema=${[item]}
-            .disabled=${this.disabled}
-            .computeLabel=${this.computeLabel}
-            .computeHelper=${this.computeHelper}
-            .localizeValue=${this.localizeValue}
-          ></ha-form>
-        `
-      )}
+      ${this.schema.schema
+        .filter((item) => !isFieldHidden(item, this.data))
+        .map(
+          (item) => html`
+            <ha-form
+              .hass=${this.hass}
+              .data=${this.data}
+              .schema=${[item]}
+              .disabled=${this.disabled}
+              .computeLabel=${this.computeLabel}
+              .computeHelper=${this.computeHelper}
+              .localizeValue=${this.localizeValue}
+            ></ha-form>
+          `
+        )}
     `;
   }
 

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

@@ -1,11 +1,12 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
 import "../ha-alert";
 import "../ha-selector/ha-selector";
+import { isFieldHidden } from "./conditions";
 import type { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
 
 const LOAD_ELEMENTS = {
@@ -98,7 +99,11 @@ export class HaForm extends LitElement implements HaFormElement {
     let isValid = true;
     let firstInvalidElement: HTMLElement | undefined;
 
-    this.schema.forEach((item, index) => {
+    const visibleSchema = this.schema.filter(
+      (item) => !isFieldHidden(item, this.data)
+    );
+
+    visibleSchema.forEach((item, index) => {
       const element = elements[index];
       if (!element) {
         return;
@@ -164,6 +169,10 @@ export class HaForm extends LitElement implements HaFormElement {
             : ""
         }
         ${this.schema.map((item) => {
+          if (isFieldHidden(item, this.data)) {
+            return nothing;
+          }
+
           const error = getError(this.error, item);
           const warning = getWarning(this.warning, item);
 

src/components/ha-form/types.ts

@@ -22,6 +22,9 @@ export interface HaFormBaseSchema {
   default?: HaFormData;
   required?: boolean;
   disabled?: boolean;
+  // Field is hidden while the condition holds. Serializable so it can be
+  // shared with the backend and other renderers.
+  hidden?: boolean | HaFormCondition | HaFormCondition[];
   description?: {
     suffix?: string;
     // This value will be set initially when form is loaded
@@ -30,6 +33,36 @@ export interface HaFormBaseSchema {
   context?: Record<string, string>;
 }
 
+export type HaFormConditionOperator =
+  "eq" | "not_eq" | "in" | "not_in" | "exists" | "not_exists";
+
+export interface HaFormFieldCondition {
+  field: string;
+  operator?: HaFormConditionOperator;
+  value?: HaFormData | readonly HaFormData[];
+}
+
+export interface HaFormAndCondition {
+  condition: "and";
+  conditions: readonly HaFormCondition[];
+}
+
+export interface HaFormOrCondition {
+  condition: "or";
+  conditions: readonly HaFormCondition[];
+}
+
+export interface HaFormNotCondition {
+  condition: "not";
+  conditions: readonly HaFormCondition[];
+}
+
+export type HaFormCondition =
+  | HaFormFieldCondition
+  | HaFormAndCondition
+  | HaFormOrCondition
+  | HaFormNotCondition;
+
 export interface HaFormGridSchema extends HaFormBaseSchema {
   type: "grid";
   flatten?: boolean;

src/components/ha-md-list-item.ts

@@ -1,5 +1,5 @@
 import { ListItemEl } from "@material/web/list/internal/listitem/list-item";
-import { styles } from "@material/web/list/internal/listitem/list-item-styles";
+import { styles } from "@material/web/list/internal/listitem/list-item-styles.cssresult.js";
 import { css, html, nothing, type TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "./ha-ripple";

src/components/ha-md-list.ts

@@ -1,5 +1,5 @@
 import { List } from "@material/web/list/internal/list";
-import { styles } from "@material/web/list/internal/list-styles";
+import { styles } from "@material/web/list/internal/list-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-outlined-button.ts

@@ -1,6 +1,6 @@
 import { OutlinedButton } from "@material/web/button/internal/outlined-button";
-import { styles as sharedStyles } from "@material/web/button/internal/shared-styles";
-import { styles } from "@material/web/button/internal/outlined-styles";
+import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.cssresult.js";
+import { styles } from "@material/web/button/internal/outlined-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-outlined-field.ts

@@ -1,6 +1,6 @@
 import { OutlinedField } from "@material/web/field/internal/outlined-field";
-import { styles } from "@material/web/field/internal/outlined-styles";
-import { styles as sharedStyles } from "@material/web/field/internal/shared-styles";
+import { styles } from "@material/web/field/internal/outlined-styles.cssresult.js";
+import { styles as sharedStyles } from "@material/web/field/internal/shared-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 import { literal } from "lit/static-html";

src/components/ha-outlined-icon-button.ts

@@ -1,6 +1,6 @@
 import { IconButton } from "@material/web/iconbutton/internal/icon-button";
-import { styles } from "@material/web/iconbutton/internal/outlined-styles";
-import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles";
+import { styles } from "@material/web/iconbutton/internal/outlined-styles.cssresult.js";
+import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-relative-time.ts

@@ -20,18 +20,16 @@ class HaRelativeTime extends ReactiveElement {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: HomeAssistantInternationalization;
 
-  private _interval?: number;
+  private _timeout?: number;
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._clearInterval();
+    this._clearTimeout();
   }
 
   public connectedCallback(): void {
     super.connectedCallback();
-    if (this.datetime) {
-      this._startInterval();
-    }
+    this._updateRelative();
   }
 
   protected createRenderRoot() {
@@ -40,31 +38,19 @@ class HaRelativeTime extends ReactiveElement {
 
   protected update(changedProps: PropertyValues<this>) {
     super.update(changedProps);
-    if (changedProps.has("datetime")) {
-      if (this.datetime) {
-        this._startInterval();
-      } else {
-        this._clearInterval();
-      }
-    }
     this._updateRelative();
   }
 
-  private _clearInterval(): void {
-    if (this._interval) {
-      window.clearInterval(this._interval);
-      this._interval = undefined;
+  private _clearTimeout(): void {
+    if (this._timeout) {
+      window.clearTimeout(this._timeout);
+      this._timeout = undefined;
     }
   }
 
-  private _startInterval(): void {
-    this._clearInterval();
-
-    // update every 60 seconds
-    this._interval = window.setInterval(() => this._updateRelative(), 60000);
-  }
-
   private _updateRelative(): void {
+    this._clearTimeout();
+
     if (!this._i18n) {
       return;
     }
@@ -73,23 +59,33 @@ class HaRelativeTime extends ReactiveElement {
       this.textContent = this._i18n.localize(
         "ui.components.relative_time.never"
       );
-    } else {
-      const date =
-        typeof this.datetime === "string"
-          ? parseISO(this.datetime)
-          : this.datetime;
-
-      const relTime = relativeTime(
-        date,
-        this._i18n.locale,
-        undefined,
-        true,
-        this.format
-      );
-      this.textContent = this.capitalize
-        ? capitalizeFirstLetter(relTime)
-        : relTime;
+      return;
     }
+
+    const date =
+      typeof this.datetime === "string"
+        ? parseISO(this.datetime)
+        : this.datetime;
+
+    const relTime = relativeTime(
+      date,
+      this._i18n.locale,
+      undefined,
+      true,
+      this.format
+    );
+    this.textContent = this.capitalize
+      ? capitalizeFirstLetter(relTime)
+      : relTime;
+
+    // Keep the relative time counting up on its own. Refresh every second
+    // while the difference is still measured in seconds, otherwise every
+    // minute.
+    const secondsDiff = Math.abs(Date.now() - date.getTime()) / 1000;
+    this._timeout = window.setTimeout(
+      () => this._updateRelative(),
+      secondsDiff < 60 ? 1000 : 60000
+    );
   }
 }
 

src/components/ha-ripple.ts

@@ -1,6 +1,6 @@
 import { AttachableController } from "@material/web/internal/controller/attachable-controller";
 import { Ripple } from "@material/web/ripple/internal/ripple";
-import { styles } from "@material/web/ripple/internal/ripple-styles";
+import { styles } from "@material/web/ripple/internal/ripple-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-selector/ha-selector-area.ts

@@ -133,7 +133,13 @@ export class HaAreaSelector extends LitElement {
     }
 
     return ensureArray(this.selector.area.entity).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
+      filterSelectorEntities(
+        filter,
+        entity,
+        this._entitySources,
+        this.hass.entities,
+        this.hass.devices
+      )
     );
   };
 

src/components/ha-selector/ha-selector-device.ts

@@ -147,7 +147,13 @@ export class HaDeviceSelector extends LitElement {
 
   private _filterEntities = (entity: HassEntity): boolean =>
     ensureArray(this.selector.device!.entity).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
+      filterSelectorEntities(
+        filter,
+        entity,
+        this._entitySources,
+        this.hass.entities,
+        this.hass.devices
+      )
     );
 }
 

src/components/ha-selector/ha-selector-entity.ts

@@ -2,8 +2,12 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { ConfigEntry } from "../../data/config_entries";
+import { getConfigEntries } from "../../data/config_entries";
+import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
 import type { EntitySources } from "../../data/entity/entity_sources";
 import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import type { EntitySelector } from "../../data/selector";
@@ -23,6 +27,8 @@ export class HaEntitySelector extends LitElement {
 
   @state() private _entitySources?: EntitySources;
 
+  @state() private _configEntries?: ConfigEntry[];
+
   @property() public value?: any;
 
   @property() public label?: string;
@@ -37,12 +43,38 @@ export class HaEntitySelector extends LitElement {
 
   @state() private _createDomains: string[] | undefined;
 
-  private _hasIntegration(selector: EntitySelector) {
-    return (
-      selector.entity?.filter &&
-      ensureArray(selector.entity.filter).some((filter) => filter.integration)
-    );
-  }
+  private _deviceIntegrationLookup = memoizeOne(
+    (
+      entitySources: EntitySources,
+      entities: HomeAssistant["entities"],
+      devices: HomeAssistant["devices"],
+      configEntries?: ConfigEntry[]
+    ) =>
+      getDeviceIntegrationLookup(
+        entitySources,
+        Object.values(entities),
+        Object.values(devices),
+        configEntries
+      )
+  );
+
+  // Which async data the current filter needs to be evaluated: a top-level or
+  // device `integration` filter needs entity sources, and a `device.integration`
+  // filter additionally needs config entries (the device integration lookup is
+  // built from both).
+  private _dataNeeds = memoizeOne((selector: EntitySelector) => {
+    const filters = selector.entity?.filter
+      ? ensureArray(selector.entity.filter)
+      : [];
+    return {
+      entitySources: filters.some(
+        (f) => f.integration || f.device?.integration
+      ),
+      configEntries: filters.some((f) => f.device?.integration),
+    };
+  });
+
+  private _fetchedConfigEntries = false;
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.get("selector") && this.value !== undefined) {
@@ -57,7 +89,11 @@ export class HaEntitySelector extends LitElement {
   }
 
   protected render() {
-    if (this._hasIntegration(this.selector) && !this._entitySources) {
+    const needs = this._dataNeeds(this.selector);
+    if (
+      (needs.entitySources && !this._entitySources) ||
+      (needs.configEntries && !this._configEntries)
+    ) {
       return nothing;
     }
 
@@ -96,15 +132,37 @@ export class HaEntitySelector extends LitElement {
 
   protected updated(changedProps: PropertyValues<this>): void {
     super.updated(changedProps);
-    if (
-      changedProps.has("selector") &&
-      this._hasIntegration(this.selector) &&
-      !this._entitySources
-    ) {
+
+    // The connection changed (e.g. reconnect); refetch config entries.
+    const oldHass = changedProps.get("hass");
+    if (oldHass && oldHass.connection !== this.hass.connection) {
+      this._fetchedConfigEntries = false;
+      this._configEntries = undefined;
+    }
+
+    const needs = this._dataNeeds(this.selector);
+
+    if (needs.entitySources && !this._entitySources) {
       fetchEntitySourcesWithCache(this.hass).then((sources) => {
         this._entitySources = sources;
       });
     }
+
+    if (needs.configEntries && !this._fetchedConfigEntries) {
+      this._fetchedConfigEntries = true;
+      getConfigEntries(this.hass)
+        .then((entries) => {
+          this._configEntries = entries;
+        })
+        .catch(() => {
+          // Fall back to no entries so the picker still renders. We keep
+          // `_fetchedConfigEntries` set so the failed fetch is not retried on
+          // every re-render; the connection-change handler above retries on
+          // reconnect.
+          this._configEntries = [];
+        });
+    }
+
     if (changedProps.has("selector")) {
       this._createDomains = computeCreateDomains(this.selector);
     }
@@ -114,8 +172,25 @@ export class HaEntitySelector extends LitElement {
     if (!this.selector?.entity?.filter) {
       return true;
     }
+    const deviceIntegrationLookup =
+      this._entitySources && this._dataNeeds(this.selector).configEntries
+        ? this._deviceIntegrationLookup(
+            this._entitySources,
+            this.hass.entities,
+            this.hass.devices,
+            this._configEntries
+          )
+        : undefined;
+
     return ensureArray(this.selector.entity.filter).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
+      filterSelectorEntities(
+        filter,
+        entity,
+        this._entitySources,
+        this.hass.entities,
+        this.hass.devices,
+        deviceIntegrationLookup
+      )
     );
   };
 }

src/components/ha-selector/ha-selector-floor.ts

@@ -133,7 +133,13 @@ export class HaFloorSelector extends LitElement {
     }
 
     return ensureArray(this.selector.floor.entity).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
+      filterSelectorEntities(
+        filter,
+        entity,
+        this._entitySources,
+        this.hass.entities,
+        this.hass.devices
+      )
     );
   };
 

src/components/ha-selector/ha-selector-icon.ts

@@ -1,19 +1,23 @@
+import { consume, type ContextType } from "@lit/context";
 import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { AsyncValueTask } from "../../common/controllers/async-value-task";
+import { consumeEntityState } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
+import {
+  configContext,
+  connectionContext,
+  entitiesContext,
+} from "../../data/context";
 import { entityIcon } from "../../data/icons";
 import type { IconSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-icon-picker";
 import "../ha-state-icon";
 
 @customElement("ha-selector-icon")
 export class HaIconSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: IconSelector;
 
   @property() public value?: string;
@@ -30,10 +34,21 @@ export class HaIconSelector extends LitElement {
     icon_entity?: string;
   };
 
-  private get _stateObj(): HassEntity | undefined {
-    const iconEntity = this.context?.icon_entity;
-    return iconEntity ? this.hass.states[iconEntity] : undefined;
-  }
+  @state()
+  @consumeEntityState({ entityIdPath: ["context", "icon_entity"] })
+  private _stateObj?: HassEntity;
+
+  @state()
+  @consume({ context: entitiesContext, subscribe: true })
+  private _entities?: ContextType<typeof entitiesContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config?: ContextType<typeof configContext>;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
 
   private _placeholderTask = new AsyncValueTask(this, {
     task: ([
@@ -44,19 +59,31 @@ export class HaIconSelector extends LitElement {
       connection,
       stateObj,
     ]) => {
-      if (placeholder || attributeIcon || !stateObj) {
+      if (
+        placeholder ||
+        attributeIcon ||
+        !entities ||
+        !config ||
+        !connection ||
+        !stateObj
+      ) {
         return initialState;
       }
-      return entityIcon(entities, config, connection, stateObj);
+      return entityIcon(
+        entities,
+        config.config,
+        connection.connection,
+        stateObj
+      );
     },
     args: () => {
       const stateObj = this._stateObj;
       return [
         this.selector.icon?.placeholder,
         stateObj?.attributes.icon,
-        this.hass.entities,
-        this.hass.config,
-        this.hass.connection,
+        this._entities,
+        this._config,
+        this._connection,
         stateObj,
       ] as const;
     },
@@ -72,7 +99,6 @@ export class HaIconSelector extends LitElement {
 
     return html`
       <ha-icon-picker
-        .hass=${this.hass}
         .label=${this.label}
         .value=${this.value}
         .required=${this.required}

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

@@ -181,49 +181,49 @@ export class HaSelectorSelector extends LitElement {
     return true;
   }
 
-  private _schema = memoizeOne(
-    (choice: string, localize: LocalizeFunc) =>
-      [
-        {
-          name: "type",
-          required: true,
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: Object.keys(SELECTOR_SCHEMAS)
-                .concat("manual")
-                .map((key) => ({
-                  label:
-                    localize(
-                      `ui.components.selectors.selector.types.${key}` as LocalizeKeys
-                    ) || key,
-                  value: key,
-                })),
-            },
+  private _schema = memoizeOne((choice: string, localize: LocalizeFunc) => {
+    const schemas = SELECTOR_SCHEMAS[choice];
+    return [
+      {
+        name: "type",
+        required: true,
+        selector: {
+          select: {
+            mode: "dropdown",
+            options: Object.keys(SELECTOR_SCHEMAS)
+              .concat("manual")
+              .map((key) => ({
+                label:
+                  localize(
+                    `ui.components.selectors.selector.types.${key}` as LocalizeKeys
+                  ) || key,
+                value: key,
+              })),
           },
         },
-        ...(choice === "manual"
-          ? ([
+      },
+      ...(choice === "manual"
+        ? ([
+            {
+              name: "manual",
+              selector: { object: {} },
+            },
+          ] as const)
+        : []),
+      ...(schemas
+        ? schemas.length > 1
+          ? [
               {
-                name: "manual",
-                selector: { object: {} },
+                name: "",
+                type: "expandable",
+                title: localize("ui.components.selectors.selector.options"),
+                schema: schemas,
               },
-            ] as const)
-          : []),
-        ...(SELECTOR_SCHEMAS[choice]
-          ? SELECTOR_SCHEMAS[choice].length > 1
-            ? [
-                {
-                  name: "",
-                  type: "expandable",
-                  title: localize("ui.components.selectors.selector.options"),
-                  schema: SELECTOR_SCHEMAS[choice],
-                },
-              ]
-            : SELECTOR_SCHEMAS[choice]
-          : []),
-      ] as const
-  );
+            ]
+          : schemas
+        : []),
+    ] as const;
+  });
 
   protected render() {
     let data;

src/components/ha-selector/ha-selector-target.ts

@@ -93,7 +93,13 @@ export class HaTargetSelector extends LitElement {
     }
 
     return ensureArray(this.selector.target.entity).some((filter) =>
-      filterSelectorEntities(filter, entity, this._entitySources)
+      filterSelectorEntities(
+        filter,
+        entity,
+        this._entitySources,
+        this.hass.entities,
+        this.hass.devices
+      )
     );
   };
 

src/components/ha-selector/ha-selector-text.ts

@@ -28,6 +28,10 @@ export class HaTextSelector extends LitElement {
 
   @query("ha-input, ha-textarea") private _input?: HTMLInputElement;
 
+  @query("ha-input-multi") private _inputMulti?: {
+    reportValidity: () => boolean;
+  };
+
   public async focus() {
     await this.updateComplete;
     this._input?.focus();
@@ -35,7 +39,7 @@ export class HaTextSelector extends LitElement {
 
   public reportValidity(): boolean {
     if (this.selector.text?.multiple) {
-      return true;
+      return this._inputMulti?.reportValidity() ?? true;
     }
     return this._input?.reportValidity() ?? true;
   }
@@ -52,6 +56,8 @@ export class HaTextSelector extends LitElement {
           .inputPrefix=${this.selector.text?.prefix}
           .helper=${this.helper}
           .autocomplete=${this.selector.text?.autocomplete}
+          .pattern=${this.selector.text?.pattern}
+          .validationMessage=${this.selector.text?.validation_message}
           @value-changed=${this._handleChange}
         >
         </ha-input-multi>
@@ -80,6 +86,9 @@ export class HaTextSelector extends LitElement {
       .hint=${this.helper}
       .disabled=${this.disabled}
       .type=${this.selector.text?.type}
+      .pattern=${this.selector.text?.pattern}
+      .validationMessage=${this.selector.text?.validation_message}
+      .autoValidate=${this.selector.text?.pattern !== undefined}
       @input=${this._handleChange}
       @change=${this._handleChange}
       .label=${this.label || ""}

src/components/ha-selector/ha-selector-timezone.ts

@@ -1,13 +1,10 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { TimezoneSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-timezone-picker";
 
 @customElement("ha-selector-timezone")
 export class HaTimezoneSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: TimezoneSelector;
 
   @property() public value?: string;
@@ -23,7 +20,6 @@ export class HaTimezoneSelector extends LitElement {
   protected render() {
     return html`
       <ha-timezone-picker
-        .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}

src/components/ha-selector/ha-selector-ui-clock-date-format.ts

@@ -0,0 +1,41 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { UiClockDateFormatSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-clock-date-format-picker";
+
+@customElement("ha-selector-ui_clock_date_format")
+export class HaSelectorUiClockDateFormat extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: UiClockDateFormatSelector;
+
+  @property() public value?: string | string[];
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-clock-date-format-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-clock-date-format-picker>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui_clock_date_format": HaSelectorUiClockDateFormat;
+  }
+}

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

@@ -65,6 +65,7 @@ const LOAD_ELEMENTS = {
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
+  ui_clock_date_format: () => import("./ha-selector-ui-clock-date-format"),
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
   ui_time_format: () => import("./ha-selector-ui-time-format"),

src/components/ha-service-control.ts

@@ -305,6 +305,10 @@ export class HaServiceControl extends LitElement {
     ) {
       return null;
     }
+    const isPrimaryEntity = (entityId: string) => {
+      const entity = this.hass.entities[entityId];
+      return !entity?.entity_category && !entity?.hidden;
+    };
     const targetEntities =
       ensureArray(
         value?.target?.entity_id || value?.data?.entity_id
@@ -333,11 +337,7 @@ export class HaServiceControl extends LitElement {
           targetSelector
         );
         targetDevices.push(...expanded.devices);
-        const primaryEntities = expanded.entities.filter(
-          (entityId) =>
-            !this.hass.entities[entityId]?.entity_category &&
-            !this.hass.entities[entityId]?.hidden
-        );
+        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
         targetEntities.push(primaryEntities);
         targetAreas.push(...expanded.areas);
       });
@@ -362,11 +362,7 @@ export class HaServiceControl extends LitElement {
           this.hass.entities,
           targetSelector
         );
-        const primaryEntities = expanded.entities.filter(
-          (entityId) =>
-            !this.hass.entities[entityId]?.entity_category &&
-            !this.hass.entities[entityId]?.hidden
-        );
+        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
         targetEntities.push(...primaryEntities);
         targetDevices.push(...expanded.devices);
       });
@@ -379,11 +375,7 @@ export class HaServiceControl extends LitElement {
           this.hass.entities,
           targetSelector
         );
-        const primaryEntities = expanded.entities.filter(
-          (entityId) =>
-            !this.hass.entities[entityId]?.entity_category &&
-            !this.hass.entities[entityId]?.hidden
-        );
+        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
         targetEntities.push(...primaryEntities);
       });
     }
@@ -903,7 +895,13 @@ export class HaServiceControl extends LitElement {
         }
         if (targetEntities.length) {
           targetEntities = targetEntities.filter((entity) =>
-            entityMeetsTargetSelector(this.hass.states[entity], targetSelector)
+            entityMeetsTargetSelector(
+              this.hass.states[entity],
+              targetSelector,
+              undefined,
+              this.hass.entities,
+              this.hass.devices
+            )
           );
         }
         target = {

src/components/ha-sub-menu.ts

@@ -1,5 +1,5 @@
 import { SubMenu } from "@material/web/menu/internal/submenu/sub-menu";
-import { styles } from "@material/web/menu/internal/submenu/sub-menu-styles";
+import { styles } from "@material/web/menu/internal/submenu/sub-menu-styles.cssresult.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
 

src/components/ha-timezone-picker.ts

@@ -2,8 +2,10 @@ import { getTimeZones, timeZonesNames } from "@vvo/tzdb";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { LocalizeFunc } from "../common/translations/localize";
+import type { ValueChangedEvent } from "../types";
 import "./ha-generic-picker";
 
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
@@ -52,7 +54,8 @@ export const getTimezoneOptions = (): PickerComboBoxItem[] => {
 
 @customElement("ha-timezone-picker")
 export class HaTimeZonePicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @property() public value?: string;
 
@@ -82,15 +85,14 @@ export class HaTimeZonePicker extends LitElement {
   protected render() {
     const label =
       this.label ??
-      (this.hass?.localize("ui.components.timezone-picker.time_zone") ||
+      (this._localize("ui.components.timezone-picker.time_zone") ||
         "Time zone");
 
     return html`
       <ha-generic-picker
-        .hass=${this.hass}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${
-          this.hass?.localize("ui.components.timezone-picker.no_timezones") ||
+          this._localize("ui.components.timezone-picker.no_timezones") ||
           "No time zones available"
         }
         .label=${label}
@@ -124,9 +126,10 @@ export class HaTimeZonePicker extends LitElement {
 
   private _notFoundLabel = (search: string) => {
     const term = html`<b>'${search}'</b>`;
-    return this.hass
-      ? this.hass.localize("ui.components.timezone-picker.no_match", { term })
-      : html`No time zones found for ${term}`;
+    return (
+      this._localize("ui.components.timezone-picker.no_match", { term }) ||
+      html`No time zones found for ${term}`
+    );
   };
 }
 

src/components/input/ha-input-multi.ts

@@ -2,7 +2,13 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiDeleteOutline, mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../common/dom/fire_event";
 import { uid } from "../../common/util/uid";
@@ -50,6 +56,13 @@ class HaInputMulti extends LitElement {
 
   @property() public autocomplete?: string;
 
+  /** Regular expression each entry is validated against (HTML `pattern`). */
+  @property() public pattern?: string;
+
+  /** Message shown on an entry when it fails `pattern` validation. */
+  @property({ attribute: "validation-message" })
+  public validationMessage?: string;
+
   @property({ attribute: "add-label" }) public addLabel?: string;
 
   @property({ attribute: "remove-label" }) public removeLabel?: string;
@@ -70,6 +83,8 @@ class HaInputMulti extends LitElement {
 
   @query("ha-input[data-last]") private _lastInput?: HaInput;
 
+  @queryAll("ha-input") private _inputs?: NodeListOf<HaInput>;
+
   // Stable key per row, kept in sync with `value`. Because items are plain
   // strings we cannot use a WeakMap (as the object-based sortable lists do),
   // so we track keys in a parallel array. Keys stay fixed while a row is
@@ -89,6 +104,16 @@ class HaInputMulti extends LitElement {
     }
   }
 
+  public reportValidity(): boolean {
+    let valid = true;
+    this._inputs?.forEach((input) => {
+      if (!input.reportValidity()) {
+        valid = false;
+      }
+    });
+    return valid;
+  }
+
   protected render() {
     return html`
       <ha-sortable
@@ -109,6 +134,9 @@ class HaInputMulti extends LitElement {
                     .type=${this.inputType}
                     .autocomplete=${this.autocomplete}
                     .disabled=${this.disabled}
+                    .pattern=${this.pattern}
+                    .validationMessage=${this.validationMessage}
+                    .autoValidate=${this.pattern !== undefined}
                     dialogInitialFocus=${index}
                     .index=${index}
                     class="flex-auto"

src/components/input/ha-input.ts

@@ -127,6 +127,8 @@ export class HaInput extends WaInputMixin(LitElement) {
   @query("wa-input")
   private _input?: WaInput;
 
+  private _startSlotResizeObserver?: ResizeObserver;
+
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   protected i18n?: ContextType<typeof internationalizationContext>;
@@ -167,9 +169,15 @@ export class HaInput extends WaInputMixin(LitElement) {
       // Wait for wa-input to finish its first render
       await this._input?.updateComplete;
       this._syncStartSlotWidth();
+      this._observeStartSlot();
     }
   }
 
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._startSlotResizeObserver?.disconnect();
+  }
+
   protected render() {
     const hasLabelSlot = this.label
       ? false
@@ -291,6 +299,25 @@ export class HaInput extends WaInputMixin(LitElement) {
     return nothing;
   }
 
+  // Safari can report the start-slot width as 0 during the first render, which
+  // leaves the floating label overlapping the start icon (e.g. the magnify icon
+  // in ha-input-search). Re-sync whenever the wrapper's size changes
+  // (0 -> icon width, or hidden -> shown) so the label padding stays correct.
+  private _observeStartSlot() {
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const startEl = this._input?.shadowRoot?.querySelector('[part~="start"]');
+    if (!startEl) {
+      return;
+    }
+    this._startSlotResizeObserver?.disconnect();
+    this._startSlotResizeObserver = new ResizeObserver(() =>
+      this._syncStartSlotWidth()
+    );
+    this._startSlotResizeObserver.observe(startEl);
+  }
+
   private _syncStartSlotWidth = () => {
     const startEl = this._input?.shadowRoot?.querySelector(
       '[part~="start"]'

src/data/backup.ts

@@ -1,4 +1,3 @@
-import { memoize } from "@fullcalendar/core/internal";
 import { setHours, setMinutes } from "date-fns";
 import type { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
@@ -360,9 +359,10 @@ export const cloudBackupHealth = (
     return "failed";
   }
 
-  const next = backupConfig?.next_automatic_backup
-    ? new Date(backupConfig.next_automatic_backup).getTime()
-    : 0;
+  const next =
+    backupConfig?.next_automatic_backup &&
+    new Date(backupConfig.next_automatic_backup).getTime();
+
   if (next && next < Date.now() - BACKUP_OVERDUE_MARGIN_MS) {
     return "old";
   }
@@ -410,7 +410,7 @@ export type BackupType = "automatic" | "manual" | "app_update";
 
 const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "app_update", "manual"];
 
-export const getBackupTypes = memoize((isHassio: boolean) =>
+export const getBackupTypes = memoizeOne((isHassio: boolean) =>
   isHassio
     ? BACKUP_TYPE_ORDER
     : BACKUP_TYPE_ORDER.filter((type) => type !== "app_update")

src/data/cloud.ts

@@ -52,7 +52,7 @@ export interface CloudStatusLoggedIn {
   remote_certificate_status: RemoteCertificateStatus | null;
   http_use_ssl: boolean;
   active_subscription: boolean;
-  is_onboarding_postponed: boolean;
+  onboarding_postponed: boolean;
   onboarding_completed: boolean;
 }
 

src/data/entity/entity_attributes.ts

@@ -127,7 +127,6 @@ export const NON_NUMERIC_ATTRIBUTES = [
   "away_mode",
   "changed_by",
   "code_format",
-  "color_modes",
   "current_activity",
   "device_class",
   "editable",
@@ -177,6 +176,7 @@ export const NON_NUMERIC_ATTRIBUTES = [
   "source_type",
   "source",
   "state_class",
+  "supported_color_modes",
   "supported_features",
   "swing_mode",
   "swing_mode",
@@ -190,7 +190,6 @@ export const NON_NUMERIC_ATTRIBUTES = [
 export const STATE_CONDITION_HIDDEN_ATTRIBUTES = [
   "access_token",
   "available_modes",
-  "color_modes",
   "editable",
   "effect_list",
   "entity_picture",
@@ -207,6 +206,7 @@ export const STATE_CONDITION_HIDDEN_ATTRIBUTES = [
   "sound_mode_list",
   "source_list",
   "state_class",
+  "supported_color_modes",
   "swing_modes",
   "token",
 ];

src/data/entity/entity_registry.ts

@@ -213,12 +213,14 @@ export const findBatteryEntity = <T extends { entity_id: string }>(
   entities: T[]
 ): T | undefined => {
   const batteryEntities = entities
-    .filter(
-      (entity) =>
-        states[entity.entity_id] &&
-        states[entity.entity_id].attributes.device_class === "battery" &&
+    .filter((entity) => {
+      const state = states[entity.entity_id];
+      return (
+        state &&
+        state.attributes.device_class === "battery" &&
         batteryPriorities.includes(computeDomain(entity.entity_id))
-    )
+      );
+    })
     .sort(
       (a, b) =>
         batteryPriorities.indexOf(computeDomain(a.entity_id)) -
@@ -235,11 +237,10 @@ export const findBatteryChargingEntity = <T extends { entity_id: string }>(
   states: HomeAssistant["states"],
   entities: T[]
 ): T | undefined =>
-  entities.find(
-    (entity) =>
-      states[entity.entity_id] &&
-      states[entity.entity_id].attributes.device_class === "battery_charging"
-  );
+  entities.find((entity) => {
+    const state = states[entity.entity_id];
+    return state && state.attributes.device_class === "battery_charging";
+  });
 
 export const computeEntityRegistryName = (
   hass: HomeAssistant,

src/data/frontend.ts

@@ -1,6 +1,11 @@
 import type { Connection } from "home-assistant-js-websocket";
 import type { ShortcutItem } from "./home_shortcuts";
 
+export interface SurveyInteraction {
+  date: string;
+  action: "opened" | "dismissed";
+}
+
 export interface CoreFrontendUserData {
   showEntityIdPicker?: boolean;
   default_panel?: string;
@@ -16,6 +21,9 @@ export interface CoreFrontendSystemData {
   default_panel?: string;
   onboarded_version?: string;
   onboarded_date?: string;
+  surveys?: {
+    onboarding?: SurveyInteraction;
+  };
 }
 
 export interface HomeFrontendSystemData {

src/data/hassio/addon.ts

@@ -140,7 +140,7 @@ export interface HassioAddonSetOptionParams {
 export const reloadHassioAddons = async (hass: HomeAssistant) => {
   await hass.callWS({
     type: "supervisor/api",
-    endpoint: "/addons/reload",
+    endpoint: "/store/reload",
     method: "post",
   });
 };

src/data/hassio/common.ts

@@ -17,9 +17,6 @@ export interface HassioStats {
   network_tx: number;
 }
 
-export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
-  response.data;
-
 export const extractApiErrorMessage = (error: any): string =>
   typeof error === "object"
     ? typeof error.body === "object"

src/data/hassio/docker.ts

@@ -1,7 +1,4 @@
-import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
-import type { HassioResponse } from "./common";
-import { hassioApiResultExtractor } from "./common";
 
 type HassioDockerRegistries = Record<
   string,
@@ -10,59 +7,32 @@ type HassioDockerRegistries = Record<
 
 export const fetchHassioDockerRegistries = async (
   hass: HomeAssistant
-): Promise<HassioDockerRegistries> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries`,
-      method: "get",
-    });
-  }
-
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HassioDockerRegistries>>(
-      "GET",
-      "hassio/docker/registries"
-    )
-  );
-};
+): Promise<HassioDockerRegistries> =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: `/docker/registries`,
+    method: "get",
+  });
 
 export const addHassioDockerRegistry = async (
   hass: HomeAssistant,
   data: HassioDockerRegistries
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries`,
-      method: "post",
-      data,
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<HassioDockerRegistries>>(
-    "POST",
-    "hassio/docker/registries",
-    data
-  );
+  await hass.callWS({
+    type: "supervisor/api",
+    endpoint: `/docker/registries`,
+    method: "post",
+    data,
+  });
 };
 
 export const removeHassioDockerRegistry = async (
   hass: HomeAssistant,
   registry: string
 ) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/docker/registries/${registry}`,
-      method: "delete",
-    });
-    return;
-  }
-
-  await hass.callApi<HassioResponse<void>>(
-    "DELETE",
-    `hassio/docker/registries/${registry}`
-  );
+  await hass.callWS({
+    type: "supervisor/api",
+    endpoint: `/docker/registries/${registry}`,
+    method: "delete",
+  });
 };

src/data/hassio/hardware.ts

@@ -1,7 +1,4 @@
-import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
-import type { HassioResponse } from "./common";
-import { hassioApiResultExtractor } from "./common";
 
 export interface HassioHardwareAudioDevice {
   device?: string | null;
@@ -30,38 +27,18 @@ export interface HassioHardwareInfo {
 
 export const fetchHassioHardwareAudio = async (
   hass: HomeAssistant
-): Promise<HassioHardwareAudioList> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/hardware/audio`,
-      method: "get",
-    });
-  }
-
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HassioHardwareAudioList>>(
-      "GET",
-      "hassio/hardware/audio"
-    )
-  );
-};
+): Promise<HassioHardwareAudioList> =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: `/hardware/audio`,
+    method: "get",
+  });
 
 export const fetchHassioHardwareInfo = async (
   hass: HomeAssistant
-): Promise<HassioHardwareInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/hardware/info`,
-      method: "get",
-    });
-  }
-
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HassioHardwareInfo>>(
-      "GET",
-      "hassio/hardware/info"
-    )
-  );
-};
+): Promise<HassioHardwareInfo> =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: `/hardware/info`,
+    method: "get",
+  });

src/data/hassio/host.ts

@@ -1,7 +1,4 @@
-import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
-import type { HassioResponse } from "./common";
-import { hassioApiResultExtractor } from "./common";
 
 export interface HassioHostInfo {
   agent_version: string;
@@ -54,156 +51,86 @@ export interface HostDisksUsage {
 
 export const fetchHassioHostInfo = async (
   hass: HomeAssistant
-): Promise<HassioHostInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/info",
-      method: "get",
-    });
-  }
-
-  const response = await hass.callApi<HassioResponse<HassioHostInfo>>(
-    "GET",
-    "hassio/host/info"
-  );
-  return hassioApiResultExtractor(response);
-};
+): Promise<HassioHostInfo> =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/host/info",
+    method: "get",
+  });
 
 export const fetchHassioHassOsInfo = async (
   hass: HomeAssistant
-): Promise<HassioHassOSInfo> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/info",
-      method: "get",
-    });
-  }
+): Promise<HassioHassOSInfo> =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/os/info",
+    method: "get",
+  });
 
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HassioHassOSInfo>>(
-      "GET",
-      "hassio/os/info"
-    )
-  );
-};
+export const rebootHost = async (hass: HomeAssistant) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/host/reboot",
+    method: "post",
+    timeout: null,
+  });
 
-export const rebootHost = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/reboot",
-      method: "post",
-      timeout: null,
-    });
-  }
+export const shutdownHost = async (hass: HomeAssistant) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/host/shutdown",
+    method: "post",
+    timeout: null,
+  });
 
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/reboot");
-};
+export const updateOS = async (hass: HomeAssistant) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/os/update",
+    method: "post",
+    timeout: null,
+  });
 
-export const shutdownHost = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/shutdown",
-      method: "post",
-      timeout: null,
-    });
-  }
+export const configSyncOS = async (hass: HomeAssistant) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/os/config/sync",
+    method: "post",
+    timeout: null,
+  });
 
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/shutdown");
-};
+export const changeHostOptions = async (hass: HomeAssistant, options: any) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/host/options",
+    method: "post",
+    data: options,
+  });
 
-export const updateOS = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/update",
-      method: "post",
-      timeout: null,
-    });
-  }
-
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/update");
-};
-
-export const configSyncOS = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/config/sync",
-      method: "post",
-      timeout: null,
-    });
-  }
-
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/config/sync");
-};
-
-export const changeHostOptions = async (hass: HomeAssistant, options: any) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/host/options",
-      method: "post",
-      data: options,
-    });
-  }
-
-  return hass.callApi<HassioResponse<void>>(
-    "POST",
-    "hassio/host/options",
-    options
-  );
-};
-
-export const moveDatadisk = async (hass: HomeAssistant, device: string) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: "/os/datadisk/move",
-      method: "post",
-      timeout: null,
-      data: { device },
-    });
-  }
-
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/datadisk/move");
-};
+export const moveDatadisk = async (hass: HomeAssistant, device: string) =>
+  hass.callWS({
+    type: "supervisor/api",
+    endpoint: "/os/datadisk/move",
+    method: "post",
+    timeout: null,
+    data: { device },
+  });
 
 export const listDatadisks = async (
   hass: HomeAssistant
-): Promise<DatadiskList> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS<DatadiskList>({
-      type: "supervisor/api",
-      endpoint: "/os/datadisk/list",
-      method: "get",
-      timeout: null,
-    });
-  }
+): Promise<DatadiskList> =>
+  hass.callWS<DatadiskList>({
+    type: "supervisor/api",
+    endpoint: "/os/datadisk/list",
+    method: "get",
+    timeout: null,
+  });
 
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<DatadiskList>>("GET", "/os/datadisk/list")
-  );
-};
-
-export const fetchHostDisksUsage = async (hass: HomeAssistant) => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS<HostDisksUsage>({
-      type: "supervisor/api",
-      endpoint: "/host/disks/default/usage",
-      method: "get",
-      timeout: 3600, // seconds. This can take a while
-      params: { max_depth: 3 },
-    });
-  }
-
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HostDisksUsage>>(
-      "GET",
-      "hassio/host/disks/default/usage"
-    )
-  );
-};
+export const fetchHostDisksUsage = async (hass: HomeAssistant) =>
+  hass.callWS<HostDisksUsage>({
+    type: "supervisor/api",
+    endpoint: "/host/disks/default/usage",
+    method: "get",
+    timeout: 3600, // seconds. This can take a while
+    params: { max_depth: 3 },
+  });