Limit the section preview to the view width and reset a cleared width

* Fix Assist microphone not supported message showing [object Object]

The not supported microphone message was built as a Lit TemplateResult,
but chat messages are rendered through ha-markdown which expects a
string, so it was displayed as "[object Object]". Build the message as
markdown instead and narrow the message text type to string.

Fixes #29769

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Jza8VBEqKGoFP35sCcz35H

* Load Assist voice responses from Home Assistant's URL

* Explain when HTTPS or the microphone blocks a feature

---------

Co-authored-by: Claude Opus 5.5 <[email protected]>

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

@@ -16,7 +16,7 @@ Container components may keep `hass` when they own it and feed providers. Leaf c
 ## Core Files
 
 - Context definitions: `src/data/context/index.ts`
-- `consume` decorator and `ContextSubscriptionController`: `src/common/decorators/consume.ts` (use instead of `@lit/context`'s `consume` and `ContextConsumer`, enforced by ESLint)
+- `consume` decorator, `ContextSubscriptionController`, and `consumeContext` / `ContextController` for reactive controllers: `src/common/decorators/consume.ts` (use instead of `@lit/context`'s `consume` and `ContextConsumer`, enforced by ESLint)
 - 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`
@@ -37,6 +37,7 @@ Container components may keep `hass` when they own it and feed providers. Leaf c
 | `apiContext`                                                         | `hass.callService`, `hass.callApi`, `hass.callApiRaw`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth` |
 | `uiContext`                                                          | themes, selected theme, panels, sidebar, and UI state                                                     |
 | `narrowViewportContext`                                              | narrow-layout boolean                                                                                     |
+| `reducedMotionContext`                                               | `prefers-reduced-motion` media query                                                                      |
 
 Lazy contexts subscribe on first consumer and tear down after the last consumer: `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`, `triggerDescriptionsContext`, and `conditionDescriptionsContext`.
 
@@ -50,7 +51,9 @@ Import `consume` from `src/common/decorators/consume`, not from `@lit/context`.
 - `@state()` plus `@consume` plus `@transform`: rerenders only when the transformed value changes.
 - `@consume` alone: the field stays current but never triggers a render. Use this for values only read in event handlers or callbacks, such as `apiContext`, or for data read on demand, such as picker item callbacks.
 
-In controllers or for lazily created subscriptions, use `ContextSubscriptionController` from the same file instead of `@lit/context`'s `ContextConsumer`, which also forces a host update. Its callback must store the value in a reactive field or call `host.requestUpdate()` itself when the host needs to rerender.
+In reactive controllers, extend `ContextController` and decorate fields with `consumeContext({ context, subscribe, transform })` from the same file. `transform` stores one part of the context value, and `contextUpdated()` runs only when that part changes. `@state()` and `@transform` do not work on controller fields; call `host.requestUpdate()` when the host needs to rerender. Example: `src/data/service-info-controller.ts`.
+
+For lazily created subscriptions, use `ContextSubscriptionController` from the same file instead of `@lit/context`'s `ContextConsumer`, which also forces a host update. Its callback must store the value in a reactive field or call `host.requestUpdate()` itself when the host needs to rerender.
 
 Use entity-scoped helpers when the component watches an entity ID held on the host:
 

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

@@ -54,6 +54,10 @@ http://localhost:8090/?demo=<second slug>#/energy/water
 - `demo/src/stubs/`: Mocked WebSocket and REST APIs.
 - `demo/script/develop_demo`, `demo/script/build_demo`: Development server and static build wrappers.
 
+## Core Data
+
+The service descriptions in `src/fake_data/demo_services.ts` and the trigger and condition descriptions and icons in `demo/src/stubs/automation_platforms_*.ts` are generated from Home Assistant Core. Do not edit them by hand. Run `script/gen_demo_core_data` to regenerate them from the core `dev` branch, and add a domain to the lists in `build-scripts/gulp/gen-demo-core-data.js` when the demo needs its services, triggers, or conditions. Their translations come from the backend translations merged into the demo build.
+
 ## Shared Gallery Stubs
 
 `demo/src/stubs/` is shared, not demo-private: gallery pages import from it directly. Before changing or removing anything a stub does, search for its callers across `demo/src/` and `gallery/src/`, then check the affected gallery pages as well as the demo.

.github/labeler.yml

@@ -1,3 +1,23 @@
+# Path rules for .github/workflows/labeler.yaml, which runs actions/labeler on
+# every pull request. A label is added when a pull request changes a matching
+# file, and removed again when it no longer does, including one added by hand.
+#
+# Do not add these labels here. .github/scripts/label-content.mts applies and
+# removes them from paths and code. A rule here would remove them whenever its
+# paths don't match, even when the script's code check does:
+#
+# - Companion App
+# - Home Assistant Link
+# - Labs
+# - Supervisor
+
+Activity:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/logbook/**
+          - src/panels/lovelace/**/*logbook*
+          - src/data/logbook.ts
+
 Agents:
   - changed-files:
       - any-glob-to-any-file:
@@ -16,6 +36,36 @@ Agents:
           - .github/skills/**
           - .github/workflows/copilot-setup-steps.yml
 
+AI:
+  - changed-files:
+      - any-glob-to-any-file:
+          - "src/panels/config/core/{ha-config-section-ai,ai-task-pref,mcp-pref}.ts"
+          - src/components/ha-suggest-with-ai-button.ts
+          - "src/data/{ai_task,llm}.ts"
+
+Areas:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/areas/**
+          - src/data/area/**
+          - "src/data/{area_floor_picker,floor_registry,ws-area_registry,ws-floor_registry}.ts"
+
+Automations:
+  - changed-files:
+      - any-glob-to-any-file:
+          - "src/panels/config/{automation,script,scene,blueprint}/**"
+          - src/components/automation/**
+          - src/components/trace/**
+          - src/data/trace*.ts
+          - "src/data/{automation,automation_i18n,script,script_i18n,scene,blueprint,trigger,condition,action}.ts"
+
+Backups:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/backup/**
+          - src/data/backup*.ts
+          - src/onboarding/onboarding-restore-backup.ts
+
 Build:
   - changed-files:
       - any-glob-to-any-file:
@@ -23,12 +73,37 @@ Build:
           - .browserslistrc
           - gulpfile.js
 
+Calendar:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/calendar/**
+          - src/panels/lovelace/**/*calendar*
+          - src/data/calendar.ts
+
 Cast:
   - changed-files:
       - any-glob-to-any-file:
           - cast/src/**
           - src/cast/**
 
+Connectivity:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/connectivity/**
+          - src/panels/config/tags/**
+          - "src/panels/config/integrations/integration-panels/{bluetooth,infrared,matter,modbus,mqtt,radio_frequency,serial,thread,zha,zwave_js}/**"
+          - "src/data/{bluetooth,infrared,matter,matter-lock,modbus,mqtt,otbr,radio_frequency,tag,thread,usb,zha,zwave_js,zwave_js-credentials}.ts"
+
+Dashboards:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/lovelace/**
+          - "src/panels/{home,climate,light,security,maintenance,map}/**"
+          - src/panels/config/lovelace/**
+          - "src/panels/config/dashboard/{dashboard-card,dialog-new-dashboard,show-dialog-new-dashboard}.ts"
+          - src/data/lovelace/**
+          - src/data/lovelace*.ts
+
 Demo:
   - changed-files:
       - any-glob-to-any-file:
@@ -57,6 +132,29 @@ Dependencies:
           - "^renovate/"
           - "^dependabot/"
 
+Devices:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/devices/**
+          - src/data/device/device_registry.ts
+          - src/data/ws-device_registry.ts
+
+Energy:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/energy/**
+          - src/panels/config/energy/**
+          - src/panels/lovelace/cards/energy/**
+          - src/panels/lovelace/**/*energy*
+          - src/data/energy*.ts
+
+Entities:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/entities/**
+          - src/data/entity/entity_registry*.ts
+          - src/data/ws-entity_registry_display.ts
+
 GitHub Actions:
   - changed-files:
       - any-glob-to-any-file:
@@ -64,6 +162,100 @@ GitHub Actions:
           - .github/workflows/**
           - .github/*.yml
 
+Helpers:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/helpers/**
+          - src/data/helpers_crud.ts
+
+History:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/history/**
+          - src/panels/lovelace/**/*history*
+          - src/data/history.ts
+
+Integrations:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/integrations/**
+          - src/panels/config/application_credentials/**
+          - src/dialogs/config-flow/**
+          - src/data/application_credential.ts
+          - src/data/config_entries.ts
+          - "src/data/{config_flow,data_entry_flow,options_flow,sub_config_flow}.ts"
+
+Labels:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/labels/**
+          - src/data/label/**
+
+Landing Page:
+  - changed-files:
+      - any-glob-to-any-file:
+          - landing-page/**
+
+Marketplace:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/marketplace/**
+          - src/data/marketplace/**
+          - src/panels/config/integrations/offer-marketplace-uninstall.ts
+
+Media:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/media-browser/**
+          - src/components/media-player/**
+          - src/data/media_source.ts
+
+Notifications:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/dialogs/notifications/**
+          - src/data/persistent_notification.ts
+
+Onboarding:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/onboarding/**
+          - src/auth/**
+          - src/data/onboarding.ts
+          - src/data/auth.ts
+
+People:
+  - changed-files:
+      - any-glob-to-any-file:
+          - "src/panels/config/{person,users}/**"
+          - "src/data/{person,user,ws-user}.ts"
+
+Profile:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/profile/**
+
+Search:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/dialogs/quick-bar/**
+          - src/state/quick-bar-mixin.ts
+          - "src/data/{quick_bar,search}.ts"
+
+Sidebar:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/components/ha-sidebar.ts
+          - src/dialogs/sidebar/**
+
+System:
+  - changed-files:
+      - any-glob-to-any-file:
+          - "src/panels/config/{core,hardware,info,logs,network,repairs,storage}/**"
+          - src/panels/config/dashboard/ha-config-updates.ts
+          - "src/dialogs/{repairs-flow,restart}/**"
+          - "src/data/{analytics,entity_id_format,error_log,hardware,network,repairs,system_health,system_log,system_log_report,update}.ts"
+
 "Tests: E2E":
   - changed-files:
       - any-glob-to-any-file:
@@ -93,3 +285,37 @@ GitHub Actions:
       - any-glob-to-any-file:
           - test/*.ts
           - "test/!(e2e)/**"
+
+Theming:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/resources/theme/**
+          - src/state/themes-mixin.ts
+          - src/common/dom/apply_themes_on_element.ts
+          - "src/data/{theme,ws-themes}.ts"
+
+To-do:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/todo/**
+          - src/panels/lovelace/**/*todo*
+          - src/data/todo.ts
+
+Tools:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/tools/**
+
+Voice:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/voice-assistants/**
+          - "src/dialogs/{voice-assistant-setup,voice-command-dialog}/**"
+          - src/components/ha-assist-chat.ts
+          - "src/data/{assist_pipeline,assist_satellite,conversation,stt,tts,wake_word}.ts"
+
+Zones:
+  - changed-files:
+      - any-glob-to-any-file:
+          - src/panels/config/zone/**
+          - src/data/zone.ts

.github/scripts/check-blocking-labels.mts

@@ -1,46 +0,0 @@
-#!/usr/bin/env node
-// Fails the check when a pull request carries a label that blocks merging, and
-// writes the outcome to the job summary. Invoked from the `check` job in
-// .github/workflows/blocking-labels.yaml via actions/github-script:
-//
-//   const { default: checkBlockingLabels } =
-//     await import(`${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mts`);
-//   await checkBlockingLabels({ github, context, core });
-
-import type {
-  GitHubScriptArgs,
-  PullRequestPayload,
-} from "./github-script.d.ts";
-
-export default async function checkBlockingLabels({
-  context,
-  core,
-}: GitHubScriptArgs<PullRequestPayload>) {
-  const blockingLabels = [
-    "wait for backend",
-    "Needs UX",
-    "Do Not Review",
-    "Blocked",
-    "has-parent",
-  ];
-  const prLabels = context.payload.pull_request.labels.map((l) => l.name);
-  const found = blockingLabels.filter((bl) => prLabels.includes(bl));
-  if (found.length > 0) {
-    const message = `This Pull Request is blocked by label${found.length > 1 ? "s" : ""}: ${found.join(", ")}`;
-    await core.summary
-      .addHeading(":no_entry_sign: Pull Request is blocked", 2)
-      .addRaw(message)
-      .write();
-    core.setFailed(message);
-  } else {
-    await core.summary
-      .addHeading(
-        ":white_check_mark: Pull Request is clear to merge after review",
-        2
-      )
-      .addRaw(
-        "This Pull Request is not blocked by any labels which prevent it from being merged."
-      )
-      .write();
-  }
-}

.github/scripts/check-npm-metadata.mts

@@ -17,6 +17,7 @@ import type {
   GitHubScriptArgs,
   PullRequestPayload,
 } from "./github-script.d.ts";
+import { withRetry } from "./github-retry.mts";
 
 // Scheduled and manual runs have no pull request
 type Payload = Partial<PullRequestPayload>;
@@ -90,12 +91,14 @@ const readPackageJson = async (
   context: Context<Payload>,
   ref: string
 ): Promise<PackageJson> => {
-  const { data } = await github.rest.repos.getContent({
-    ...context.repo,
-    path: "package.json",
-    ref,
-    mediaType: { format: "raw" },
-  });
+  const { data } = await withRetry(`package.json lookup at ${ref}`, () =>
+    github.rest.repos.getContent({
+      ...context.repo,
+      path: "package.json",
+      ref,
+      mediaType: { format: "raw" },
+    })
+  );
 
   // The raw media type returns the file contents as a string, but Octokit
   // types the response as the JSON form

.github/scripts/check-pull-request-standards.mts

@@ -13,6 +13,7 @@ import type {
   GitHubScriptArgs,
   PullRequestPayload,
 } from "./github-script.d.ts";
+import { withRetry } from "./github-retry.mts";
 
 export default async function checkPullRequestStandards({
   github,
@@ -31,10 +32,12 @@ export default async function checkPullRequestStandards({
     return;
   }
   try {
-    await github.rest.orgs.checkMembershipForUser({
-      org: "home-assistant",
-      username: pr.user.login,
-    });
+    await withRetry("organization membership check", () =>
+      github.rest.orgs.checkMembershipForUser({
+        org: "home-assistant",
+        username: pr.user.login,
+      })
+    );
     core.info(`Skipping organization member: ${pr.user.login}`);
     return;
   } catch (_error) {
@@ -88,7 +91,9 @@ export default async function checkPullRequestStandards({
            }
          }`;
     try {
-      await github.graphql(mutation, { id: subjectId });
+      await withRetry(`comment ${minimized ? "minimize" : "restore"}`, () =>
+        github.graphql(mutation, { id: subjectId })
+      );
     } catch (error) {
       core.info(
         `Could not ${minimized ? "minimize" : "restore"} comment: ${error instanceof Error ? error.message : error}`
@@ -132,12 +137,14 @@ export default async function checkPullRequestStandards({
 
   const isValid = problems.length === 0;
 
-  const comments = await github.paginate(github.rest.issues.listComments, {
-    owner,
-    repo,
-    issue_number,
-    per_page: 100,
-  });
+  const comments = await withRetry("comment list", () =>
+    github.paginate(github.rest.issues.listComments, {
+      owner,
+      repo,
+      issue_number,
+      per_page: 100,
+    })
+  );
 
   const existing = comments.find((c) => c.body?.includes(marker));
   const hasLabel = pr.labels.some((l) => l.name === label);
@@ -147,12 +154,14 @@ export default async function checkPullRequestStandards({
 
     if (hasLabel) {
       await ignoreMissing(() =>
-        github.rest.issues.removeLabel({
-          owner,
-          repo,
-          issue_number,
-          name: label,
-        })
+        withRetry("label removal", () =>
+          github.rest.issues.removeLabel({
+            owner,
+            repo,
+            issue_number,
+            name: label,
+          })
+        )
       );
     }
     if (existing) {
@@ -164,12 +173,14 @@ export default async function checkPullRequestStandards({
   core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
 
   if (!hasLabel) {
-    await github.rest.issues.addLabels({
-      owner,
-      repo,
-      issue_number,
-      labels: [label],
-    });
+    await withRetry("label addition", () =>
+      github.rest.issues.addLabels({
+        owner,
+        repo,
+        issue_number,
+        labels: [label],
+      })
+    );
   }
 
   const message =
@@ -185,14 +196,17 @@ export default async function checkPullRequestStandards({
     `for more on creating a great pull request (see point 6).`;
 
   if (existing) {
-    await github.rest.issues.updateComment({
-      owner,
-      repo,
-      comment_id: existing.id,
-      body: message,
-    });
+    await withRetry("comment update", () =>
+      github.rest.issues.updateComment({
+        owner,
+        repo,
+        comment_id: existing.id,
+        body: message,
+      })
+    );
     await setMinimized(existing.node_id, false);
   } else {
+    // Not retried, as a retry after GitHub created the comment would post it twice
     await github.rest.issues.createComment({
       owner,
       repo,

.github/scripts/check-task-authorization.mts

@@ -9,6 +9,7 @@
 //   await checkTaskAuthorization({ github, context, core });
 
 import type { GitHubScriptArgs, IssuePayload } from "./github-script.d.ts";
+import { withRetry } from "./github-retry.mts";
 
 export default async function checkTaskAuthorization({
   github,
@@ -19,17 +20,20 @@ export default async function checkTaskAuthorization({
 
   // Check if user is an organization member
   try {
-    await github.rest.orgs.checkMembershipForUser({
-      org: "home-assistant",
-      username: issueAuthor,
-    });
+    await withRetry("organization membership check", () =>
+      github.rest.orgs.checkMembershipForUser({
+        org: "home-assistant",
+        username: issueAuthor,
+      })
+    );
     core.info(`✅ ${issueAuthor} is an organization member`);
     return; // Authorized
   } catch (_error) {
     core.info(`❌ ${issueAuthor} is not authorized to create Task issues`);
   }
 
-  // Close the issue with a comment
+  // Close the issue with a comment. Not retried, as a retry after GitHub
+  // created the comment would post it twice.
   await github.rest.issues.createComment({
     owner: context.repo.owner,
     repo: context.repo.repo,
@@ -43,18 +47,22 @@ export default async function checkTaskAuthorization({
       `If you believe you should have access to create Task issues, please contact the maintainers.`,
   });
 
-  await github.rest.issues.update({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    issue_number: context.issue.number,
-    state: "closed",
-  });
+  await withRetry("issue close", () =>
+    github.rest.issues.update({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      issue_number: context.issue.number,
+      state: "closed",
+    })
+  );
 
   // Add a label to indicate this was auto-closed
-  await github.rest.issues.addLabels({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    issue_number: context.issue.number,
-    labels: ["auto-closed"],
-  });
+  await withRetry("auto-closed label", () =>
+    github.rest.issues.addLabels({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      issue_number: context.issue.number,
+      labels: ["auto-closed"],
+    })
+  );
 }

.github/scripts/github-retry.mts

@@ -0,0 +1,69 @@
+// Retries GitHub API requests with jittered exponential backoff. Shared by the
+// workflow scripts in this directory, test/e2e/post-report-comment.mjs and the
+// fetch-nightly-translations gulp task. Only wrap requests that are safe to
+// repeat: a create that fails after GitHub has applied it would run twice.
+//
+// This replaces @octokit/plugin-retry, which only retries HTTP error statuses
+// on a fixed 1s, 4s, 9s delay with no jitter or logging. GitHub can also
+// answer 200 with briefly stale data, such as the nightly translations lookup
+// returning an old run with no artifact, and the plugin cannot retry that.
+// github-script also leaves its built-in retries off by default.
+
+const RETRIES = 3;
+
+const BASE_DELAY = 1000; // ms
+
+const MAX_DELAY = 10000; // ms
+
+const TRANSIENT_STATUSES = new Set([408, 429, 500, 502, 503, 504]);
+
+// Throw from a request to retry a response GitHub may answer differently on
+// the next attempt, such as briefly stale data
+export class RetryableError extends Error {}
+
+// Octokit reports network failures as status 500
+const isRetryable = (err: unknown) => {
+  if (err instanceof RetryableError) {
+    return true;
+  }
+
+  if (!(err instanceof Error) || !("status" in err)) {
+    return false;
+  }
+
+  const status = Number(err.status);
+
+  return (
+    TRANSIENT_STATUSES.has(status) ||
+    (status === 403 && /rate limit/i.test(err.message))
+  );
+};
+
+export async function withRetry<T>(
+  label: string,
+  request: () => Promise<T>
+): Promise<T> {
+  for (let attempt = 1; ; attempt++) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      return await request();
+    } catch (err) {
+      if (attempt > RETRIES || !isRetryable(err)) {
+        throw err;
+      }
+
+      const delay =
+        Math.min(BASE_DELAY * 2 ** (attempt - 1), MAX_DELAY) *
+        (0.8 + Math.random() * 0.4);
+
+      // eslint-disable-next-line no-console
+      console.log(
+        `Retrying ${label} after ${(delay / 1000).toFixed(1)}s (attempt ${attempt}/${RETRIES}): ${err instanceof Error ? err.message : err}`
+      );
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise((resolve) => {
+        setTimeout(resolve, delay);
+      });
+    }
+  }
+}

.github/scripts/github-summary.mts

@@ -0,0 +1,56 @@
+/**
+ * Builds a section of a workflow run's summary: a heading, a table of rows and
+ * the warnings raised along the way.
+ *
+ * Warnings are also logged as annotations, so a script can report problems
+ * without failing its step.
+ */
+
+import type { AnnotationProperties, Core } from "./github-script.d.ts";
+
+interface SummaryOptions {
+  heading: string;
+  columns: string[];
+  // Shown instead of the table when no rows were added
+  empty: string;
+}
+
+export const createSummary = (
+  core: Core,
+  { heading, columns, empty }: SummaryOptions
+) => {
+  const rows: string[][] = [];
+  const warnings: string[] = [];
+
+  return {
+    addRow: (...cells: string[]) => {
+      rows.push(cells);
+    },
+
+    warn: (message: string, properties?: AnnotationProperties) => {
+      core.warning(message, properties);
+      warnings.push(message);
+    },
+
+    write: async () => {
+      core.summary.addHeading(heading, 2);
+
+      if (rows.length > 0) {
+        core.summary.addTable([
+          columns.map((data) => ({ data, header: true })),
+          ...rows,
+        ]);
+      } else {
+        core.summary.addRaw(`${empty}\n`);
+      }
+
+      if (warnings.length > 0) {
+        core.summary
+          .addHeading("Warnings", 3)
+          .addRaw(`${warnings.map((warning) => `- ${warning}`).join("\n")}\n`);
+      }
+
+      await core.summary.write();
+    },
+  };
+};

.github/scripts/label-content.mts

@@ -0,0 +1,324 @@
+#!/usr/bin/env node
+/**
+ * Applies the Companion App, Home Assistant Link, Labs and Supervisor labels
+ * to pull requests.
+ *
+ * These areas are often changed from code outside their folders, which
+ * actions/labeler can't see, so this script owns them and .github/labeler.yml
+ * leaves them out.
+ *
+ * A label matches when the pull request:
+ * - changes a file in one of the area's paths, or
+ * - adds or removes a line that uses the area's API, such as gating a feature
+ *   behind Labs or only showing it on Supervisor installs.
+ *
+ * Like actions/labeler, a label is removed once the pull request no longer
+ * matches, including one added by hand.
+ *
+ * Invoked from the `triage` job in .github/workflows/labeler.yaml.
+ */
+
+import type {
+  GitHubScriptArgs,
+  PullRequestPayload,
+} from "./github-script.d.ts";
+import { withRetry } from "./github-retry.mts";
+import { createSummary } from "./github-summary.mts";
+
+const RULES: { label: string; paths: RegExp[]; pattern: RegExp }[] = [
+  {
+    label: "Companion App",
+    paths: [
+      /^src\/external_app\//,
+      /^src\/data\/external\.ts$/,
+      /^src\/util\/is_ios\.ts$/,
+    ],
+    // Reads or messages the companion app the frontend is running in, or
+    // imports its modules. Matches imports of data/external rather than
+    // isExternal, which is also a common local name.
+    pattern:
+      /\bauth\??\.external\b(?:[!?]*\.\w+)*(?:\([^)]*)?|\bfireExternalBusMessage\([^)]*|(?:\bimport\s[^;]*?from\s*|\bimport\(\s*)["'][^"']*\/(?:external_app\/[^"']*|data\/external)["']/g,
+  },
+  {
+    label: "Home Assistant Link",
+    paths: [
+      /^src\/panels\/config\/cloud\//,
+      /^src\/data\/cloud\//,
+      /^src\/data\/cloud\.ts$/,
+    ],
+    // Only runs when Home Assistant Link is set up
+    pattern: /isComponentLoaded\([^)]*["']cloud["']/g,
+  },
+  {
+    label: "Labs",
+    paths: [/^src\/panels\/config\/labs\//, /^src\/data\/labs\.ts$/],
+    // Gates a feature behind, or toggles, a Labs preview feature
+    pattern:
+      /\b(?:subscribeLabFeatures?|fetchLabFeatures|labsUpdatePreviewFeature)\([^)]*/g,
+  },
+  {
+    label: "Supervisor",
+    paths: [
+      /^src\/panels\/config\/apps\//,
+      /^src\/panels\/app\//,
+      /^src\/data\/hassio\//,
+      /^src\/data\/supervisor\//,
+    ],
+    // Only runs on installs with the Supervisor
+    pattern: /isComponentLoaded\([^)]*["']hassio["']/g,
+  },
+];
+
+interface HunkSide {
+  lines: string[];
+  changed: boolean[];
+}
+
+interface CodeChange {
+  code: string;
+  filename: string;
+}
+
+const parseHunks = (patch: string) => {
+  const hunks: { before: HunkSide; after: HunkSide }[] = [];
+
+  for (const line of patch.split("\n")) {
+    if (line.startsWith("@@")) {
+      hunks.push({
+        before: { lines: [], changed: [] },
+        after: { lines: [], changed: [] },
+      });
+      continue;
+    }
+
+    const hunk = hunks.at(-1);
+
+    if (!hunk || line.startsWith("\\")) {
+      continue;
+    }
+
+    const text = line.slice(1);
+
+    if (!line.startsWith("+")) {
+      hunk.before.lines.push(text);
+      hunk.before.changed.push(line.startsWith("-"));
+    }
+
+    if (!line.startsWith("-")) {
+      hunk.after.lines.push(text);
+      hunk.after.changed.push(line.startsWith("+"));
+    }
+  }
+
+  return hunks;
+};
+
+// Ignores whitespace and trailing commas outside strings, as Prettier changes
+// them when wrapping
+const normaliseCode = (code: string) => {
+  const parts = code.split(
+    /("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`)/
+  );
+
+  return parts
+    .map((part, i) => {
+      if (i % 2 === 1) {
+        return part;
+      }
+
+      const stripped = part.replace(/\s+/g, "").replace(/,(?=[}\])])/g, "");
+
+      return i === parts.length - 1 ? stripped.replace(/,$/, "") : stripped;
+    })
+    .join("");
+};
+
+// Matches whole calls, which can span lines, that touch a changed line
+const changedMatches = (side: HunkSide, pattern: RegExp) => {
+  const text = side.lines.join("\n");
+  const matches: string[] = [];
+
+  for (const match of text.matchAll(pattern)) {
+    const first = text.slice(0, match.index).split("\n").length - 1;
+    const last = first + match[0].split("\n").length - 1;
+
+    if (side.changed.slice(first, last + 1).some(Boolean)) {
+      matches.push(normaliseCode(match[0]));
+    }
+  }
+
+  return matches;
+};
+
+// Matches that were only moved, reindented or reformatted cancel out in pairs,
+// returning a file with a match that doesn't
+const unmatchedChange = (added: CodeChange[], removed: CodeChange[]) => {
+  const remaining = [...removed];
+
+  for (const change of added) {
+    const index = remaining.findIndex(({ code }) => code === change.code);
+
+    if (index === -1) {
+      return change.filename;
+    }
+
+    remaining.splice(index, 1);
+  }
+
+  return remaining[0]?.filename;
+};
+
+const describeError = (cause: unknown) =>
+  cause instanceof Error ? cause.message : String(cause);
+
+const isNotFound = (cause: unknown) =>
+  cause instanceof Error && "status" in cause && cause.status === 404;
+
+export default async function labelContent({
+  github,
+  context,
+  core,
+}: GitHubScriptArgs<PullRequestPayload>) {
+  const pr = context.payload.pull_request;
+
+  const summary = createSummary(core, {
+    heading: "Content labels",
+    columns: ["Label", "Change", "Reason"],
+    empty: "No content labels changed.",
+  });
+
+  if (process.env.LABELER_OUTCOME === "failure") {
+    summary.warn(
+      "Applying labels from .github/labeler.yml failed, see its step"
+    );
+  }
+
+  // Bot pull requests, such as Prettier bumps, rewrite code they don't change
+  const checkCode = pr.user.type !== "Bot";
+
+  const { owner, repo } = context.repo;
+
+  let files;
+  let existing: Set<string>;
+
+  try {
+    // Read the current labels, as the event's snapshot can be stale by now
+    const [fileList, labels] = await Promise.all([
+      withRetry("pull request files", () =>
+        github.paginate(github.rest.pulls.listFiles, {
+          owner,
+          repo,
+          pull_number: pr.number,
+          per_page: 100,
+        })
+      ),
+      withRetry("pull request labels", () =>
+        github.paginate(github.rest.issues.listLabelsOnIssue, {
+          owner,
+          repo,
+          issue_number: pr.number,
+          per_page: 100,
+        })
+      ),
+    ]);
+
+    files = fileList;
+    existing = new Set(labels.map((l) => l.name));
+  } catch (error) {
+    summary.warn(
+      `Could not read the pull request's files and labels: ${describeError(error)}`
+    );
+    await summary.write();
+
+    return;
+  }
+
+  const add: { label: string; reason: string }[] = [];
+  const remove: string[] = [];
+
+  for (const rule of RULES) {
+    const added: CodeChange[] = [];
+    const removed: CodeChange[] = [];
+
+    if (checkCode) {
+      for (const { filename, patch } of files) {
+        for (const { before, after } of parseHunks(patch ?? "")) {
+          for (const code of changedMatches(after, rule.pattern)) {
+            added.push({ code, filename });
+          }
+
+          for (const code of changedMatches(before, rule.pattern)) {
+            removed.push({ code, filename });
+          }
+        }
+      }
+    }
+
+    // Renames count for both locations, as moving a file out of an area changes it
+    const match =
+      files.find(({ filename, previous_filename }) =>
+        rule.paths.some(
+          (path) =>
+            path.test(filename) ||
+            (previous_filename !== undefined && path.test(previous_filename))
+        )
+      )?.filename ?? unmatchedChange(added, removed);
+
+    if (match && !existing.has(rule.label)) {
+      core.info(`Adding ${rule.label} for ${match}`);
+      add.push({ label: rule.label, reason: match });
+    } else if (!match && existing.has(rule.label)) {
+      core.info(`Removing ${rule.label}, no longer matched`);
+      remove.push(rule.label);
+    }
+  }
+
+  const removals = await Promise.allSettled(
+    remove.map((name) =>
+      withRetry("label removal", () =>
+        github.rest.issues.removeLabel({
+          owner,
+          repo,
+          issue_number: pr.number,
+          name,
+        })
+      )
+    )
+  );
+
+  removals.forEach((removal, i) => {
+    const name = remove[i];
+
+    // Already removed, such as by hand or a run that raced this one
+    if (removal.status === "fulfilled" || isNotFound(removal.reason)) {
+      summary.addRow(name, "Removed", "No longer matched");
+    } else {
+      summary.warn(
+        `Could not remove ${name}: ${describeError(removal.reason)}`
+      );
+    }
+  });
+
+  if (add.length > 0) {
+    try {
+      await withRetry("label addition", () =>
+        github.rest.issues.addLabels({
+          owner,
+          repo,
+          issue_number: pr.number,
+          labels: add.map(({ label }) => label),
+        })
+      );
+
+      for (const { label, reason } of add) {
+        summary.addRow(label, "Added", reason);
+      }
+    } catch (error) {
+      summary.warn(
+        `Could not add ${add.map(({ label }) => label).join(", ")}: ${describeError(error)}`
+      );
+    }
+  }
+
+  await summary.write();
+}

.github/workflows/blocking-labels.yaml

@@ -1,35 +0,0 @@
-name: Blocking labels
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - labeled
-      - unlabeled
-    branches:
-      - dev
-      - master
-
-permissions:
-  contents: read
-
-jobs:
-  check:
-    name: Check for labels which block the Pull Request from being merged
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out workflow scripts
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-        with:
-          persist-credentials: false
-          sparse-checkout: .github/scripts
-      - name: Check for blocking labels
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const { default: checkBlockingLabels } = await import(
-              `${process.env.GITHUB_WORKSPACE}/.github/scripts/check-blocking-labels.mts`
-            );
-            await checkBlockingLabels({ github, context, core });

.github/workflows/ci.yaml

@@ -100,12 +100,9 @@ jobs:
         run: pnpm run test
   build:
     name: Build frontend
-    # Runs alongside lint and test rather than after them: the build only needs
-    # the dependency tree, and with the rspack cache it is no longer expensive
-    # enough to be worth serialising behind the other checks. The
-    # cancel-on-failure job below stops the run as soon as a check fails, so a
-    # broken pull request does not finish building.
-    needs: prepare-dependencies
+    needs:
+      - lint
+      - test
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
@@ -151,54 +148,3 @@ jobs:
           path: hass_frontend/
           if-no-files-found: error
           retention-days: 7
-
-  # Now that the checks run in parallel, a failing lint or test no longer stops
-  # the build from finishing on its own, so this watches them and cancels the
-  # whole run on the first failure.
-  #
-  # It is a separate job on purpose. Cancelling needs `actions: write`, and the
-  # other jobs check out the pull request and run its build scripts — handing
-  # them that scope would give PR-controlled code (or a compromised dependency)
-  # write access to Actions. This job never checks out the repository, so the
-  # elevated token stays away from PR code. It also cannot be a job that
-  # `needs` the checks: that would only start once they have all finished, which
-  # is exactly too late to cancel anything.
-  cancel-on-failure:
-    name: Cancel run on failure
-    needs: prepare-dependencies
-    runs-on: ubuntu-latest
-    permissions:
-      actions: write
-    timeout-minutes: 30
-    steps:
-      - name: Cancel the run when a check fails
-        env:
-          GH_TOKEN: ${{ github.token }}
-          REPO: ${{ github.repository }}
-          RUN_ID: ${{ github.run_id }}
-        run: |
-          watched='^(Lint and check format|Run tests|Build frontend)$'
-          while :; do
-            jobs=$(gh api "repos/$REPO/actions/runs/$RUN_ID/jobs?per_page=100" \
-              --paginate --jq '.jobs[] | [.name, .status, (.conclusion // "")] | @tsv' \
-              2>/dev/null || true)
-
-            failed=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && ($3 == "failure" || $3 == "timed_out") { print $1 }')
-            if [ -n "$failed" ]; then
-              echo "Cancelling the run, these checks failed:"
-              printf '%s\n' "$failed"
-              gh run cancel "$RUN_ID" --repo "$REPO" || true
-              exit 0
-            fi
-
-            found=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" '$1 ~ w' | wc -l)
-            running=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && $2 != "completed" { print $1 }')
-            if [ "$found" -ge 3 ] && [ -z "$running" ]; then
-              echo "All checks finished without failure"
-              exit 0
-            fi
-
-            sleep 15
-          done

.github/workflows/e2e.yaml

@@ -38,7 +38,7 @@ jobs:
     name: Prepare container dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.63.0-noble
+      image: mcr.microsoft.com/playwright:v1.64.0-noble
       options: --user 1001
     defaults:
       run:
@@ -155,7 +155,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.63.0-noble
+      image: mcr.microsoft.com/playwright:v1.64.0-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -207,7 +207,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.63.0-noble
+      image: mcr.microsoft.com/playwright:v1.64.0-noble
       options: --user 1001 --ipc=host
     defaults:
       run:
@@ -261,7 +261,7 @@ jobs:
       - prepare-container-dependencies
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.63.0-noble
+      image: mcr.microsoft.com/playwright:v1.64.0-noble
       options: --user 1001 --ipc=host
     defaults:
       run:

.github/workflows/labeler.yaml

@@ -1,6 +1,11 @@
 name: "Pull Request Labeler"
 
-on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
+on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: checks out base repo scripts only and reads PR files through the API, never PR head code
+
+# Runs one at a time per pull request, so an older run can't undo a newer one
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
 
 jobs:
   triage:
@@ -10,6 +15,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
+        id: labeler
+        continue-on-error: true
         uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0
         with:
           sync-labels: true
+      - name: Check out workflow scripts
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          sparse-checkout: .github/scripts
+      - name: Apply content labels
+        continue-on-error: true
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        env:
+          LABELER_OUTCOME: ${{ steps.labeler.outcome }}
+        with:
+          script: |
+            const { default: labelContent } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/label-content.mts`
+            );
+            await labelContent({ github, context, core });

.github/workflows/relative-ci.yaml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@711f3a8fa1b928e6afde280011110c9b0a224a60 # v3.2.4
         with:
           key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
           token: ${{ github.token }}
@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@711f3a8fa1b928e6afde280011110c9b0a224a60 # v3.2.4
         with:
           key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

@@ -19,6 +19,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@34d80673e067bdc0c24568d3af899c216adcfaa9 # v7.7.0
+      - uses: release-drafter/release-drafter@72967cdc98ddd3160f1fc3dff619de365e137dd0 # v7.9.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/restrict-task-creation.yaml

@@ -15,22 +15,33 @@ jobs:
     name: Add no-stale label
     runs-on: ubuntu-latest
     permissions:
+      contents: read # To check out workflow scripts
       issues: write # To add labels to issues
     if: >-
       github.event.issue.type.name == 'Task'
       || github.event.issue.type.name == 'Epic'
       || github.event.issue.type.name == 'Opportunity'
     steps:
+      - name: Check out workflow scripts
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          sparse-checkout: .github/scripts
       - name: Add no-stale label
         uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
-            await github.rest.issues.addLabels({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              labels: ['no-stale']
-            });
+            const { withRetry } = await import(
+              `${process.env.GITHUB_WORKSPACE}/.github/scripts/github-retry.mts`
+            );
+            await withRetry("no-stale label", () =>
+              github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                labels: ['no-stale']
+              })
+            );
 
   check-authorization:
     name: Check authorization

.github/workflows/stale.yaml

@@ -15,11 +15,12 @@ jobs:
     if: github.repository == 'home-assistant/frontend'
     runs-on: ubuntu-latest
     steps:
-      - name: 90 days stale policy
+      - name: Stale policy
         uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-stale: 90
+          days-before-issue-stale: 90
+          days-before-pr-stale: 60
           days-before-close: 7
           operations-per-run: 25
           remove-stale-when-updated: true

LICENSE.md

@@ -1,194 +1,201 @@
-Apache License
-==============
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
 
-_Version 2.0, January 2004_
-_&lt;<http://www.apache.org/licenses/>&gt;_
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
-### Terms and Conditions for use, reproduction, and distribution
+   1. Definitions.
 
-#### 1. Definitions
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
 
-“License” shall mean the terms and conditions for use, reproduction, and
-distribution as defined by Sections 1 through 9 of this document.
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
 
-“Licensor” shall mean the copyright owner or entity authorized by the copyright
-owner that is granting the License.
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
 
-“Legal Entity” shall mean the union of the acting entity and all other entities
-that control, are controlled by, or are under common control with that entity.
-For the purposes of this definition, “control” means **(i)** the power, direct or
-indirect, to cause the direction or management of such entity, whether by
-contract or otherwise, or **(ii)** ownership of fifty percent (50%) or more of the
-outstanding shares, or **(iii)** beneficial ownership of such entity.
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
 
-“You” (or “Your”) shall mean an individual or Legal Entity exercising
-permissions granted by this License.
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
 
-“Source” form shall mean the preferred form for making modifications, including
-but not limited to software source code, documentation source, and configuration
-files.
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
 
-“Object” form shall mean any form resulting from mechanical transformation or
-translation of a Source form, including but not limited to compiled object code,
-generated documentation, and conversions to other media types.
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
 
-“Work” shall mean the work of authorship, whether in Source or Object form, made
-available under the License, as indicated by a copyright notice that is included
-in or attached to the work (an example is provided in the Appendix below).
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
 
-“Derivative Works” shall mean any work, whether in Source or Object form, that
-is based on (or derived from) the Work and for which the editorial revisions,
-annotations, elaborations, or other modifications represent, as a whole, an
-original work of authorship. For the purposes of this License, Derivative Works
-shall not include works that remain separable from, or merely link (or bind by
-name) to the interfaces of, the Work and Derivative Works thereof.
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
 
-“Contribution” shall mean any work of authorship, including the original version
-of the Work and any modifications or additions to that Work or Derivative Works
-thereof, that is intentionally submitted to Licensor for inclusion in the Work
-by the copyright owner or by an individual or Legal Entity authorized to submit
-on behalf of the copyright owner. For the purposes of this definition,
-“submitted” means any form of electronic, verbal, or written communication sent
-to the Licensor or its representatives, including but not limited to
-communication on electronic mailing lists, source code control systems, and
-issue tracking systems that are managed by, or on behalf of, the Licensor for
-the purpose of discussing and improving the Work, but excluding communication
-that is conspicuously marked or otherwise designated in writing by the copyright
-owner as “Not a Contribution.”
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
 
-“Contributor” shall mean Licensor and any individual or Legal Entity on behalf
-of whom a Contribution has been received by Licensor and subsequently
-incorporated within the Work.
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
 
-#### 2. Grant of Copyright License
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
 
-Subject to the terms and conditions of this License, each Contributor hereby
-grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
-irrevocable copyright license to reproduce, prepare Derivative Works of,
-publicly display, publicly perform, sublicense, and distribute the Work and such
-Derivative Works in Source or Object form.
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
 
-#### 3. Grant of Patent License
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
 
-Subject to the terms and conditions of this License, each Contributor hereby
-grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free,
-irrevocable (except as stated in this section) patent license to make, have
-made, use, offer to sell, sell, import, and otherwise transfer the Work, where
-such license applies only to those patent claims licensable by such Contributor
-that are necessarily infringed by their Contribution(s) alone or by combination
-of their Contribution(s) with the Work to which such Contribution(s) was
-submitted. If You institute patent litigation against any entity (including a
-cross-claim or counterclaim in a lawsuit) alleging that the Work or a
-Contribution incorporated within the Work constitutes direct or contributory
-patent infringement, then any patent licenses granted to You under this License
-for that Work shall terminate as of the date such litigation is filed.
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
 
-#### 4. Redistribution
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
 
-You may reproduce and distribute copies of the Work or Derivative Works thereof
-in any medium, with or without modifications, and in Source or Object form,
-provided that You meet the following conditions:
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
 
-* **(a)** You must give any other recipients of the Work or Derivative Works a copy of
-this License; and
-* **(b)** You must cause any modified files to carry prominent notices stating that You
-changed the files; and
-* **(c)** You must retain, in the Source form of any Derivative Works that You distribute,
-all copyright, patent, trademark, and attribution notices from the Source form
-of the Work, excluding those notices that do not pertain to any part of the
-Derivative Works; and
-* **(d)** If the Work includes a “NOTICE” text file as part of its distribution, then any
-Derivative Works that You distribute must include a readable copy of the
-attribution notices contained within such NOTICE file, excluding those notices
-that do not pertain to any part of the Derivative Works, in at least one of the
-following places: within a NOTICE text file distributed as part of the
-Derivative Works; within the Source form or documentation, if provided along
-with the Derivative Works; or, within a display generated by the Derivative
-Works, if and wherever such third-party notices normally appear. The contents of
-the NOTICE file are for informational purposes only and do not modify the
-License. You may add Your own attribution notices within Derivative Works that
-You distribute, alongside or as an addendum to the NOTICE text from the Work,
-provided that such additional attribution notices cannot be construed as
-modifying the License.
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
 
-You may add Your own copyright statement to Your modifications and may provide
-additional or different license terms and conditions for use, reproduction, or
-distribution of Your modifications, or for any such Derivative Works as a whole,
-provided Your use, reproduction, and distribution of the Work otherwise complies
-with the conditions stated in this License.
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
 
-#### 5. Submission of Contributions
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
 
-Unless You explicitly state otherwise, any Contribution intentionally submitted
-for inclusion in the Work by You to the Licensor shall be under the terms and
-conditions of this License, without any additional terms or conditions.
-Notwithstanding the above, nothing herein shall supersede or modify the terms of
-any separate license agreement you may have executed with Licensor regarding
-such Contributions.
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
 
-#### 6. Trademarks
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
 
-This License does not grant permission to use the trade names, trademarks,
-service marks, or product names of the Licensor, except as required for
-reasonable and customary use in describing the origin of the Work and
-reproducing the content of the NOTICE file.
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
 
-#### 7. Disclaimer of Warranty
+   END OF TERMS AND CONDITIONS
 
-Unless required by applicable law or agreed to in writing, Licensor provides the
-Work (and each Contributor provides its Contributions) on an “AS IS” BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied,
-including, without limitation, any warranties or conditions of TITLE,
-NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are
-solely responsible for determining the appropriateness of using or
-redistributing the Work and assume any risks associated with Your exercise of
-permissions under this License.
+   APPENDIX: How to apply the Apache License to your work.
 
-#### 8. Limitation of Liability
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
 
-In no event and under no legal theory, whether in tort (including negligence),
-contract, or otherwise, unless required by applicable law (such as deliberate
-and grossly negligent acts) or agreed to in writing, shall any Contributor be
-liable to You for damages, including any direct, indirect, special, incidental,
-or consequential damages of any character arising as a result of this License or
-out of the use or inability to use the Work (including but not limited to
-damages for loss of goodwill, work stoppage, computer failure or malfunction, or
-any and all other commercial damages or losses), even if such Contributor has
-been advised of the possibility of such damages.
+   Copyright [yyyy] [name of copyright owner]
 
-#### 9. Accepting Warranty or Additional Liability
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
 
-While redistributing the Work or Derivative Works thereof, You may choose to
-offer, and charge a fee for, acceptance of support, warranty, indemnity, or
-other liability obligations and/or rights consistent with this License. However,
-in accepting such obligations, You may act only on Your own behalf and on Your
-sole responsibility, not on behalf of any other Contributor, and only if You
-agree to indemnify, defend, and hold each Contributor harmless for any liability
-incurred by, or claims asserted against, such Contributor by reason of your
-accepting any such warranty or additional liability.
+       http://www.apache.org/licenses/LICENSE-2.0
 
-_END OF TERMS AND CONDITIONS_
-
-### APPENDIX: How to apply the Apache License to your work
-
-To apply the Apache License to your work, attach the following boilerplate
-notice, with the fields enclosed by brackets `[]` replaced with your own
-identifying information. (Don't include the brackets!) The text should be
-enclosed in the appropriate comment syntax for the file format. We also
-recommend that a file or class name and description of purpose be included on
-the same “printed page” as the copyright notice for easier identification within
-third-party archives.
-
-    Copyright [yyyy] [name of copyright owner]
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

build-scripts/bundle-budget.json

@@ -1,15 +1,15 @@
 {
   "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
   "frontend-modern": {
-    "app": 593517,
-    "core": 54884,
-    "authorize": 557490,
-    "onboarding": 676131
+    "app": 624240,
+    "core": 55144,
+    "authorize": 594400,
+    "onboarding": 705499
   },
   "frontend-legacy": {
-    "app": 738388,
-    "core": 188119,
-    "authorize": 716748,
-    "onboarding": 840680
+    "app": 776696,
+    "core": 188309,
+    "authorize": 763316,
+    "onboarding": 879807
   }
 }

build-scripts/gulp/download-translations.js

@@ -5,6 +5,7 @@ import mapStream from "map-stream";
 import transform from "gulp-json-transform";
 import { LokaliseApi } from "@lokalise/node-api";
 import JSZip from "jszip";
+import { SERVICE_DOMAINS } from "./gen-demo-core-data.js";
 
 const inDir = "translations";
 const inDirFrontend = `${inDir}/frontend`;
@@ -51,15 +52,34 @@ function convertBackendTranslations(data, _file) {
   if (!data.component) {
     return output;
   }
+  // Keep the entity domains and the domains with automation triggers or
+  // conditions, so the demo can show states and describe automations. Only
+  // keep the services of the domains whose services the demo mocks.
   Object.keys(data.component).forEach((domain) => {
-    if (!("entity_component" in data.component[domain])) {
+    const {
+      entity_component,
+      services,
+      triggers,
+      conditions,
+      selector,
+      title,
+    } = data.component[domain];
+    if (
+      !entity_component &&
+      !triggers &&
+      !conditions &&
+      !SERVICE_DOMAINS.includes(domain)
+    ) {
       return;
     }
-    output.component[domain] = { entity_component: {} };
-    Object.keys(data.component[domain].entity_component).forEach((key) => {
-      output.component[domain].entity_component[key] =
-        data.component[domain].entity_component[key];
-    });
+    output.component[domain] = {
+      entity_component,
+      services: SERVICE_DOMAINS.includes(domain) ? services : undefined,
+      triggers,
+      conditions,
+      selector,
+      title,
+    };
   });
   return output;
 }
@@ -155,8 +175,9 @@ gulp.task("fetch-lokalise", async function () {
     fs.mkdir(inDirBackend, { recursive: true }),
   ]);
 
-  // The backend project only provides entity_component translations, which are
-  // merged into the demo, gallery, cast and e2e builds. The shipped app fetches
+  // The backend project only provides the translations the mocked backend
+  // needs (see convertBackendTranslations), which are merged into the demo,
+  // gallery, cast and e2e builds. The shipped app fetches
   // them live from core, so builds that only produce the app (release, release
   // landing-page) can skip this second, whole-project export to save time.
   const projects = Object.entries(lokaliseProjects).filter(

build-scripts/gulp/fetch-nightly-translations.mts

@@ -1,7 +1,6 @@
 // Task to download the latest Lokalise translations from the nightly workflow artifacts
 
 import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
-import { retry } from "@octokit/plugin-retry";
 import { Octokit } from "@octokit/rest";
 import { deleteAsync } from "del";
 import { mkdir, readFile, writeFile } from "fs/promises";
@@ -10,11 +9,20 @@ import jszip from "jszip";
 import path from "path";
 import process from "process";
 import { extract } from "tar";
+import {
+  RetryableError,
+  withRetry,
+} from "../../.github/scripts/github-retry.mts";
+
+type Artifact = Awaited<
+  ReturnType<Octokit["rest"]["actions"]["listArtifactsForRepo"]>
+>["data"]["artifacts"][number];
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
 const REPO = "frontend";
-const WORKFLOW_NAME = "nightly.yaml";
+
+const BRANCH = "dev";
 const ARTIFACT_NAME = "translations";
 const CLIENT_ID = "Iv1.3914e28cb27834d1";
 const EXTRACT_DIR = "translations";
@@ -36,11 +44,16 @@ gulp.task("fetch-nightly-translations", async function () {
 
   // Read current translations artifact info if it exists,
   // and stop if they are not old enough
-  let currentArtifact;
+  let currentArtifact: Artifact | null;
   try {
-    currentArtifact = JSON.parse(await readFile(ARTIFACT_FILE, "utf-8"));
+    const artifact: Artifact = JSON.parse(
+      await readFile(ARTIFACT_FILE, "utf-8")
+    );
+
+    currentArtifact = artifact;
+
     const currentAge =
-      (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
+      (Date.now() - Date.parse(artifact.created_at ?? "")) / 3600000;
     if (currentAge < MAX_AGE) {
       console.log(
         "Keeping current translations (only %s hours old)",
@@ -63,19 +76,19 @@ gulp.task("fetch-nightly-translations", async function () {
     }
     console.warn(
       "Failed to fetch nightly translations, continuing with English only:",
-      err?.message || err
+      err instanceof Error ? err.message : err
     );
   }
 });
 
-async function fetchTranslations(currentArtifact) {
+async function fetchTranslations(currentArtifact: Artifact | null) {
   // To store file writing promises
   const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
-  const writings = [];
+  const writings: Promise<void>[] = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
   // otherwise look for a saved user token or generate a new one if none
-  let tokenAuth;
+  let tokenAuth: { token: string };
   if (process.env.GITHUB_TOKEN) {
     tokenAuth = { token: process.env.GITHUB_TOKEN };
   } else {
@@ -104,69 +117,86 @@ async function fetchTranslations(currentArtifact) {
       });
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
-        createExtractDir.then(
+        createExtractDir.then(() =>
           writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
     }
   }
 
-  // Authenticate with token and request workflow runs from GitHub
   console.log("Fetching new translations...");
-  const octokit = new (Octokit.plugin(retry))({
+
+  // Authenticate with token and find the newest translations artifact
+  const octokit = new Octokit({
     userAgent: "Fetch Nightly Translations",
     auth: tokenAuth.token,
   });
 
-  const workflowRunsResponse = await octokit.rest.actions.listWorkflowRuns({
-    owner: OWNER,
-    repo: REPO,
-    workflow_id: WORKFLOW_NAME,
-    status: "success",
-    event: "schedule",
-    per_page: 1,
-    exclude_pull_requests: true,
-  });
-  if (workflowRunsResponse.data.total_count === 0) {
-    throw Error("No successful nightly workflow runs found");
-  }
-  const latestNightlyRun = workflowRunsResponse.data.workflow_runs[0];
+  // Only the nightly workflow uploads this artifact. Requiring a run from this
+  // repository's own branch excludes artifacts uploaded by fork pull requests.
+  const latestArtifact = await withRetry(
+    "translations artifact lookup",
+    async () => {
+      const { data } = await octokit.rest.actions.listArtifactsForRepo({
+        owner: OWNER,
+        repo: REPO,
+        name: ARTIFACT_NAME,
+        per_page: 10,
+      });
 
-  // Stop if current is already the latest, otherwise Find the translations artifact
-  if (currentArtifact?.workflow_run.id === latestNightlyRun.id) {
+      const artifact = data.artifacts.find(
+        ({ expired, workflow_run: run }) =>
+          !expired &&
+          run?.head_branch === BRANCH &&
+          run.head_repository_id === run.repository_id
+      );
+
+      if (!artifact) {
+        throw new RetryableError(
+          `No ${ARTIFACT_NAME} artifact found from ${BRANCH}`
+        );
+      }
+
+      return artifact;
+    }
+  );
+
+  console.log(
+    "Latest translations artifact is %s from workflow run %s (%s)",
+    latestArtifact.id,
+    latestArtifact.workflow_run?.id,
+    latestArtifact.created_at
+  );
+
+  // Stop if current is already the latest
+  if (currentArtifact?.id === latestArtifact.id) {
     console.log("Stopping because current translations are still the latest");
     return;
   }
-  const latestArtifact = (
-    await octokit.actions.listWorkflowRunArtifacts({
-      owner: OWNER,
-      repo: REPO,
-      run_id: latestNightlyRun.id,
-    })
-  ).data.artifacts.find((artifact) => artifact.name === ARTIFACT_NAME);
-  if (!latestArtifact) {
-    throw Error("Latest nightly workflow run has no translations artifact");
-  }
 
   // Remove the current translations
-  const deleteCurrent = Promise.all(writings).then(
+  const deleteCurrent = Promise.all(writings).then(() =>
     deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
   );
 
   // Get the download URL and follow the redirect to download (stored as ArrayBuffer)
-  const downloadResponse = await octokit.actions.downloadArtifact({
-    owner: OWNER,
-    repo: REPO,
-    artifact_id: latestArtifact.id,
-    archive_format: "zip",
-  });
-  if (downloadResponse.status !== 200) {
+  const downloadResponse = await withRetry("translations download", () =>
+    octokit.rest.actions.downloadArtifact({
+      owner: OWNER,
+      repo: REPO,
+      artifact_id: latestArtifact.id,
+      archive_format: "zip",
+    })
+  );
+
+  // Octokit types the redirect, but fetch follows it to the archive
+  if ((downloadResponse.status as number) !== 200) {
     throw Error("Failure downloading translations artifact");
   }
 
   // Artifact is a tarball, but GitHub adds it to a zip file
   console.log("Unpacking downloaded translations...");
-  const zip = await jszip.loadAsync(downloadResponse.data);
+  const zip = await jszip.loadAsync(downloadResponse.data as ArrayBuffer);
   await deleteCurrent;
   const extractStream = zip.file(/.*/)[0].nodeStream().pipe(extract());
   await new Promise((resolve, reject) => {

build-scripts/gulp/gather-static.js

@@ -77,10 +77,6 @@ async function copyMapPanel(staticDir) {
   // Style, glyphs and sprites for the vector base map
   await ensureMapAssets();
   fs.copySync(mapAssetsDir, staticPath("map/"));
-  copyFileDir(
-    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
-    staticPath("map/")
-  );
   // Controls and popups of the native MapLibre engine
   copyFileDir(npmPath("maplibre-gl/dist/maplibre-gl.css"), staticPath("map/"));
 }

build-scripts/gulp/gen-demo-core-data.js

@@ -0,0 +1,422 @@
+// Generates the service, trigger and condition descriptions the demo and
+// gallery serve instead of a backend, from the files in Home Assistant Core.
+import gulp from "gulp";
+import { CORE_SCHEMA, load, mergeTag } from "js-yaml";
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import prettier from "prettier";
+import paths from "../paths.cjs";
+
+const CORE_URL =
+  process.env.CORE_COMPONENTS_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/refs/heads/dev/homeassistant/components";
+
+// Integrations whose services the mocked backend provides
+export const SERVICE_DOMAINS = [
+  "alarm_control_panel",
+  "automation",
+  "button",
+  "calendar",
+  "camera",
+  "climate",
+  "conversation",
+  "counter",
+  "cover",
+  "device_tracker",
+  "fan",
+  "frontend",
+  "group",
+  "homeassistant",
+  "humidifier",
+  "image_processing",
+  "input_boolean",
+  "input_button",
+  "input_datetime",
+  "input_number",
+  "input_select",
+  "input_text",
+  "lawn_mower",
+  "light",
+  "lock",
+  "logger",
+  "media_player",
+  "notify",
+  "number",
+  "persistent_notification",
+  "person",
+  "recorder",
+  "remote",
+  "scene",
+  "schedule",
+  "script",
+  "select",
+  "siren",
+  "switch",
+  "system_log",
+  "text",
+  "timer",
+  "todo",
+  "tts",
+  "update",
+  "vacuum",
+  "valve",
+  "water_heater",
+  "weather",
+  "zone",
+];
+
+// Services that return data. Core sets this when it registers a service, it is
+// not part of services.yaml. The value is whether the response is optional.
+const RESPONSE_SERVICES = {
+  "calendar.get_events": false,
+  "conversation.process": true,
+  "media_player.browse_media": false,
+  "media_player.search_media": false,
+  "recorder.get_statistics": false,
+  "schedule.get_schedule": false,
+  "todo.get_items": false,
+  "weather.get_forecasts": false,
+};
+
+// Services that are still in services.yaml, but that core no longer registers
+const UNREGISTERED_SERVICES = ["weather.get_forecast"];
+
+// Integrations that provide the new style triggers and conditions
+const AUTOMATION_PLATFORM_DOMAINS = [
+  "air_quality",
+  "alarm_control_panel",
+  "assist_satellite",
+  "battery",
+  "button",
+  "calendar",
+  "climate",
+  "counter",
+  "cover",
+  "door",
+  "doorbell",
+  "event",
+  "fan",
+  "garage_door",
+  "gate",
+  "humidifier",
+  "humidity",
+  "illuminance",
+  "lawn_mower",
+  "light",
+  "lock",
+  "media_player",
+  "moisture",
+  "moon",
+  "motion",
+  "occupancy",
+  "power",
+  "remote",
+  "scene",
+  "schedule",
+  "select",
+  "siren",
+  "sun",
+  "switch",
+  "temperature",
+  "text",
+  "timer",
+  "todo",
+  "update",
+  "vacuum",
+  "valve",
+  "vibration",
+  "water_heater",
+  "window",
+  "zone",
+];
+
+// YAML 1.2 with merge keys, which matches how core reads these files
+const YAML_SCHEMA = CORE_SCHEMA.withTags([mergeTag]);
+
+const HEADER = `// This file is auto-generated from Home Assistant Core. Do not edit by hand.
+// Regenerate with \`script/gen_demo_core_data\`.`;
+
+const fetchCoreFile = async (domain, file) => {
+  const url = `${CORE_URL}/${domain}/${file}`;
+  const response = await fetch(url);
+  if (response.status === 404) {
+    return undefined;
+  }
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status}`);
+  }
+  return response.text();
+};
+
+// Fetches a file of every domain, keyed by domain
+const fetchCoreFiles = async (domains, file) =>
+  Object.fromEntries(
+    await Promise.all(
+      domains.map(async (domain) => [domain, await fetchCoreFile(domain, file)])
+    )
+  );
+
+const parseYaml = (content) => load(content, { schema: YAML_SCHEMA }) ?? {};
+
+// Enum references look like "cover.CoverEntityFeature.OPEN"
+const ENUM_REFERENCE = /^([a-z_]+)\.[A-Z]\w*\.[A-Z0-9_]+$/;
+
+const enumDomains = (value, domains = new Set()) => {
+  if (typeof value === "string") {
+    const match = value.match(ENUM_REFERENCE);
+    if (match) {
+      domains.add(match[1]);
+    }
+  } else if (value && typeof value === "object") {
+    Object.values(value).forEach((val) => enumDomains(val, domains));
+  }
+  return domains;
+};
+
+// Resolves "<domain>.<Enum>.<MEMBER>" to the value of the member, like core
+const enumResolver = async (yamls) => {
+  const domains = [...enumDomains(yamls)];
+  const [consts, inits] = await Promise.all([
+    fetchCoreFiles(domains, "const.py"),
+    fetchCoreFiles(domains, "__init__.py"),
+  ]);
+  return (reference) => {
+    const [domain, enumName, member] = reference.split(".");
+    for (const source of [consts[domain], inits[domain]]) {
+      const match = source
+        ?.split(`class ${enumName}(`)[1]
+        ?.match(new RegExp(`\\n\\s+${member} = ("[^"]*"|\\d+)`));
+      if (match) {
+        return JSON.parse(match[1]);
+      }
+    }
+    throw new Error(`Unknown enum ${reference}`);
+  };
+};
+
+const createResolvers = (enumValue) => {
+  // In entity filters, every item of the supported features, a feature or a
+  // list of features, becomes one bit mask
+  const featureMask = (features) =>
+    [].concat(features).reduce(
+      // eslint-disable-next-line no-bitwise
+      (mask, feature) => mask | enumValue(feature),
+      0
+    );
+
+  const resolveSelector = (value) => {
+    if (Array.isArray(value)) {
+      return value.map(resolveSelector);
+    }
+    if (!value || typeof value !== "object") {
+      return value;
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, val]) => [
+        key,
+        key === "supported_features"
+          ? [].concat(val).map(featureMask)
+          : resolveSelector(val),
+      ])
+    );
+  };
+
+  // Like core, an empty target allows any target
+  const resolveTarget = (target) => resolveSelector(target ?? {});
+
+  // Field filters keep their lists, with every enum resolved on its own
+  const resolveField = (field) => {
+    const result = { ...field };
+    if (field.selector) {
+      result.selector = resolveSelector(field.selector);
+    }
+    if (field.filter?.supported_features) {
+      result.filter = {
+        ...result.filter,
+        supported_features: field.filter.supported_features.map(enumValue),
+      };
+    }
+    if (field.filter?.attribute) {
+      result.filter = {
+        ...result.filter,
+        attribute: Object.fromEntries(
+          Object.entries(field.filter.attribute).map(([name, options]) => [
+            name,
+            options.map(enumValue),
+          ])
+        ),
+      };
+    }
+    return result;
+  };
+
+  // Fields can be grouped in sections, which hold fields themselves
+  const resolveFields = (fields) =>
+    Object.fromEntries(
+      Object.entries(fields ?? {}).map(([key, field]) => [
+        key,
+        field && "fields" in field && !("selector" in field)
+          ? { ...field, fields: resolveFields(field.fields) }
+          : resolveField(field ?? {}),
+      ])
+    );
+
+  return { resolveFields, resolveTarget };
+};
+
+// Mirrors how core builds the response of get_services
+const serviceDescriptions = (yamls, { resolveFields, resolveTarget }) =>
+  Object.fromEntries(
+    SERVICE_DOMAINS.map((domain) => {
+      if (!yamls[domain]) {
+        throw new Error(`No services.yaml found for ${domain}`);
+      }
+      const services = Object.entries(yamls[domain])
+        .filter(
+          ([service]) =>
+            !service.startsWith(".") &&
+            !UNREGISTERED_SERVICES.includes(`${domain}.${service}`)
+        )
+        .map(([service, value]) => {
+          const description = { fields: resolveFields(value?.fields) };
+          for (const item of ["description", "name"]) {
+            if (value && item in value) {
+              description[item] = value[item];
+            }
+          }
+          if (value && "target" in value) {
+            description.target = resolveTarget(value.target);
+          }
+          const key = `${domain}.${service}`;
+          if (key in RESPONSE_SERVICES) {
+            description.response = { optional: RESPONSE_SERVICES[key] };
+          }
+          return [service, description];
+        });
+      return [domain, Object.fromEntries(services)];
+    })
+  );
+
+// Mirrors how core builds the trigger and condition platform descriptions
+const platformDescriptions = (yamls, { resolveFields, resolveTarget }) =>
+  Object.fromEntries(
+    AUTOMATION_PLATFORM_DOMAINS.flatMap((domain) =>
+      Object.entries(yamls[domain] ?? {})
+        // Keys starting with a dot only hold YAML anchors
+        .filter(([key, value]) => !key.startsWith(".") && value)
+        .map(([key, value]) => {
+          const absoluteKey = !key.startsWith("_")
+            ? `${domain}.${key}`
+            : key.slice(1) || domain;
+          const description = { fields: resolveFields(value.fields) };
+          if ("target" in value) {
+            description.target = resolveTarget(value.target);
+          }
+          return [absoluteKey, description];
+        })
+    )
+  );
+
+// The trigger or condition icons of every domain that has them
+const platformIcons = (icons, category) =>
+  Object.fromEntries(
+    Object.entries(icons)
+      .map(([domain, content]) => [
+        domain,
+        content ? JSON.parse(content)[category] : undefined,
+      ])
+      .filter(([, categoryIcons]) => categoryIcons)
+  );
+
+const parseYamls = (files) =>
+  Object.fromEntries(
+    Object.entries(files)
+      .filter(([, content]) => content !== undefined)
+      .map(([domain, content]) => [domain, parseYaml(content)])
+  );
+
+const writeTs = async (path, content) => {
+  const file = join(paths.root_dir, path);
+  const options = await prettier.resolveConfig(file);
+  await writeFile(
+    file,
+    await prettier.format(`${HEADER}\n${content}`, {
+      ...options,
+      filepath: file,
+    })
+  );
+};
+
+gulp.task("gen-demo-core-data", async () => {
+  const [servicesFiles, triggersFiles, conditionsFiles, iconsFiles] =
+    await Promise.all([
+      fetchCoreFiles(SERVICE_DOMAINS, "services.yaml"),
+      fetchCoreFiles(AUTOMATION_PLATFORM_DOMAINS, "triggers.yaml"),
+      fetchCoreFiles(AUTOMATION_PLATFORM_DOMAINS, "conditions.yaml"),
+      fetchCoreFiles(AUTOMATION_PLATFORM_DOMAINS, "icons.json"),
+    ]);
+  const servicesYamls = parseYamls(servicesFiles);
+  const triggersYamls = parseYamls(triggersFiles);
+  const conditionsYamls = parseYamls(conditionsFiles);
+  const resolvers = createResolvers(
+    await enumResolver([servicesYamls, triggersYamls, conditionsYamls])
+  );
+  for (const key of UNREGISTERED_SERVICES) {
+    const [domain, service] = key.split(".");
+    if (!(service in (servicesYamls[domain] ?? {}))) {
+      throw new Error(`Remove ${key} from UNREGISTERED_SERVICES, it is gone`);
+    }
+  }
+  const services = serviceDescriptions(servicesYamls, resolvers);
+  for (const key of Object.keys(RESPONSE_SERVICES)) {
+    const [domain, service] = key.split(".");
+    if (!services[domain]?.[service]) {
+      throw new Error(`Service ${key} that returns a response does not exist`);
+    }
+  }
+  const triggers = platformDescriptions(triggersYamls, resolvers);
+  const conditions = platformDescriptions(conditionsYamls, resolvers);
+  const icons = {
+    triggers: platformIcons(iconsFiles, "triggers"),
+    conditions: platformIcons(iconsFiles, "conditions"),
+  };
+
+  await Promise.all([
+    writeTs(
+      "src/fake_data/demo_services.ts",
+      `import type { HassServices } from "home-assistant-js-websocket";
+
+// Core sends more than the HassServices type covers, like sections and list
+// examples.
+export const demoServices = ${JSON.stringify(services)} as unknown as HassServices;
+`
+    ),
+    writeTs(
+      "demo/src/stubs/automation_platform_domains.ts",
+      `
+// Integrations that provide the new style triggers and conditions. Their
+// translations are part of the demo build.
+export const automationPlatformDomains = ${JSON.stringify(AUTOMATION_PLATFORM_DOMAINS)};
+`
+    ),
+    writeTs(
+      "demo/src/stubs/automation_platforms_data.ts",
+      `import type { ConditionDescriptions } from "../../../src/data/condition";
+import type { TriggerDescriptions } from "../../../src/data/trigger";
+
+export const triggerDescriptions: TriggerDescriptions = ${JSON.stringify(triggers)};
+
+export const conditionDescriptions: ConditionDescriptions = ${JSON.stringify(conditions)};
+`
+    ),
+    writeTs(
+      "demo/src/stubs/automation_platforms_icons.ts",
+      `
+export const triggerIcons = ${JSON.stringify(icons.triggers)};
+
+export const conditionIcons = ${JSON.stringify(icons.conditions)};
+`
+    ),
+  ]);
+});

build-scripts/gulp/gen-sensor-entity-constants.js

@@ -69,7 +69,7 @@ export const SENSOR_STATE_CLASSES: string[] = [
 ${stateClasses.map((stateClass) => `  "${stateClass}",`).join("\n")}
 ];
 
-export const SENSOR_STATE_CLASS_UNITS: Record<string, string[]> = {
+export const SENSOR_STATE_CLASS_UNITS: Record<string, (string | null)[]> = {
 ${Object.entries(stateClassUnits)
   .map(
     ([stateClass, units]) =>

build-scripts/gulp/index.mjs

@@ -6,9 +6,10 @@ import "./demo.js";
 import "./download-translations.js";
 import "./e2e-test-app.js";
 import "./entry-html.js";
-import "./fetch-nightly-translations.js";
+import "./fetch-nightly-translations.mts";
 import "./gallery.js";
 import "./gather-static.js";
+import "./gen-demo-core-data.js";
 import "./gen-device-classes.js";
 import "./gen-icons-json.js";
 import "./gen-sensor-entity-constants.js";

build-scripts/gulp/translations.js

@@ -10,7 +10,7 @@ import { finished } from "node:stream/promises";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
 import { mergeTranslations } from "./merge-translations.js";
-import "./fetch-nightly-translations.js";
+import "./fetch-nightly-translations.mts";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";

build-scripts/rspack.cjs

@@ -115,7 +115,10 @@ const createRspackConfig = ({
     dontHash = new Set();
   }
   const ignorePackages = bundle.ignorePackages({ latestBuild });
-  const litHtmlRoot = path.resolve(__dirname, "../node_modules/lit-html");
+  // pnpm links node_modules/lit-html into its store; rspack compares real paths
+  const litHtmlRoot = fs.realpathSync(
+    path.resolve(__dirname, "../node_modules/lit-html")
+  );
   const litHtmlDevelopmentRoot = path.join(litHtmlRoot, "development");
   const litDisableDevModeLoader = path.join(
     __dirname,

cast/src/receiver/layout/hc-main.ts

@@ -27,6 +27,7 @@ import type {
   LovelaceConfig,
   LovelaceDashboardStrategyConfig,
 } from "../../../../src/data/lovelace/config/types";
+import { normalizeLovelaceConfig } from "../../../../src/data/lovelace/config/normalize";
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import { fetchResources } from "../../../../src/data/lovelace/resource";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
@@ -34,7 +35,6 @@ import { HassElement } from "../../../../src/state/hass-element";
 import { castContext } from "../cast_context";
 import "./hc-launch-screen";
 import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
-import { checkLovelaceConfig } from "../../../../src/panels/lovelace/common/check-lovelace-config";
 
 const DEFAULT_CONFIG: LovelaceDashboardStrategyConfig = {
   strategy: {
@@ -359,7 +359,7 @@ export class HcMain extends HassElement {
       this._urlPath || "lovelace"
     );
     castContext.setApplicationState(title || "");
-    this._lovelaceConfig = checkLovelaceConfig(
+    this._lovelaceConfig = normalizeLovelaceConfig(
       lovelaceConfig
     ) as LovelaceConfig;
   }

demo/src/configs/demo-configs.ts

@@ -1,12 +1,16 @@
 import { navigate } from "../../../src/common/navigate";
+import { slugify } from "../../../src/common/string/slugify";
+import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { setDemoAreas } from "../stubs/area_registry";
+import { setPlatformEntityRegistryEntries } from "../stubs/entity_registry";
 import { energyEntities } from "../stubs/entities";
 import { connectivityEntities } from "../stubs/connectivity/fixtures";
 import { setDemoFloors } from "../stubs/floor_registry";
 import { getDemoTheme } from "../stubs/frontend";
-import type { DemoConfig, DemoTheme } from "./types";
+import type { EntityInput } from "../../../src/fake_data/entities/types";
+import type { DemoAutomation, DemoConfig, DemoTheme } from "./types";
 
 export const applyDemoTheme = (hass: MockHomeAssistant, theme: DemoTheme) => {
   if (typeof theme === "function") {
@@ -16,6 +20,95 @@ export const applyDemoTheme = (hass: MockHomeAssistant, theme: DemoTheme) => {
   hass.mockTheme(null, getDemoTheme(theme));
 };
 
+export const automationEntity = ({
+  config: automation,
+  entityId,
+  state = "on",
+  icon,
+  lastTriggered,
+}: DemoAutomation): EntityInput => ({
+  entity_id: entityId ?? `automation.${slugify(automation.alias)}`,
+  platform: "automation",
+  state,
+  attributes: {
+    id: automation.id,
+    friendly_name: automation.alias,
+    last_triggered:
+      lastTriggered === undefined
+        ? null
+        : new Date(Date.now() - lastTriggered * 60000).toISOString(),
+    mode: automation.mode ?? "single",
+    current: 0,
+    // Like core, only the modes that can run more than once have a maximum
+    ...((automation.mode === "queued" || automation.mode === "parallel") && {
+      max: automation.max ?? 10,
+    }),
+    icon,
+  },
+});
+
+// Automations saved in the editor during this session, per demo
+// Automations saved in the editor during this session, per demo. A deleted
+// automation is null.
+const savedAutomations: Record<
+  string,
+  Record<string, DemoAutomation | null>
+> = {};
+
+export const saveDemoAutomation = (
+  id: string,
+  automation: DemoAutomation | null
+) => {
+  savedAutomations[selectedDemo] = {
+    ...savedAutomations[selectedDemo],
+    [id]: automation,
+  };
+};
+
+// The automations of a demo config, with the ones saved in the editor
+export const demoAutomations = (
+  demo: string,
+  config: DemoConfig
+): DemoAutomation[] => {
+  const saved = savedAutomations[demo] ?? {};
+  const configured = config.automations ?? [];
+  const ids = new Set(configured.map((automation) => automation.config.id));
+  return [
+    ...configured.map((automation) =>
+      automation.config.id in saved ? saved[automation.config.id] : automation
+    ),
+    ...Object.values(saved).filter(
+      (automation) => automation && !ids.has(automation.config.id)
+    ),
+  ].filter((automation): automation is DemoAutomation => automation !== null);
+};
+
+// The automation entities are derived from the configs the editor shows, so
+// their names and IDs always match.
+export const demoConfigEntities = (
+  demo: string,
+  config: DemoConfig,
+  localize: LocalizeFunc
+): EntityInput[] => [
+  ...config.entities(localize),
+  ...demoAutomations(demo, config).map(automationEntity),
+];
+
+// Like core, the automations of a demo config are in the entity registry
+export const registerDemoAutomations = (
+  hass: MockHomeAssistant,
+  demo: string,
+  config: DemoConfig
+) =>
+  setPlatformEntityRegistryEntries(
+    hass,
+    "automation",
+    demoAutomations(demo, config).map((automation) => ({
+      entity_id: automationEntity(automation).entity_id,
+      unique_id: automation.config.id,
+    }))
+  );
+
 export const demoConfigs: Record<string, () => Promise<DemoConfig>> = {
   sections: () => import("./sections").then((mod) => mod.demoSections),
   home: () => import("./home").then((mod) => mod.demoHome),
@@ -52,7 +145,8 @@ export const setDemoConfig = async (
 
   setDemoFloors(hass, config.floors);
   setDemoAreas(hass, config.areas);
-  hass.addEntities(config.entities(hass.localize), true);
+  hass.addEntities(demoConfigEntities(demo, config, hass.localize), true);
+  registerDemoAutomations(hass, demo, config);
   hass.addEntities(energyEntities());
   // Replaced the whole state map above, so the entities that do not belong to a
   // demo config have to be added back.

demo/src/configs/home/strategies.ts

@@ -7,7 +7,7 @@ import type { HomeDashboardStrategyConfig } from "../../../../src/panels/lovelac
 import { HomeDashboardStrategy } from "../../../../src/panels/lovelace/strategies/home/home-dashboard-strategy";
 import type { HomeOverviewViewStrategyConfig } from "../../../../src/panels/lovelace/strategies/home/home-overview-view-strategy";
 import { HomeOverviewViewStrategy } from "../../../../src/panels/lovelace/strategies/home/home-overview-view-strategy";
-import { generateLovelaceSectionStrategy } from "../../../../src/panels/lovelace/strategies/get-strategy";
+import type { HeadingCardConfig } from "../../../../src/panels/lovelace/cards/types";
 import type { HomeAssistant } from "../../../../src/types";
 
 export interface DemoHomeDashboardStrategyConfig extends Omit<
@@ -61,29 +61,33 @@ class DemoHomeOverviewViewStrategy extends ReactiveElement {
       { ...config, type: "home-overview" },
       hass
     );
-    // Expand the favorites section so the demo card can be added to it
-    const sections = await Promise.all(
-      (view.sections || []).map(async (section) => {
-        if (
-          !isStrategySection(section) ||
-          section.strategy.type !== "common-controls"
-        ) {
-          return section;
-        }
-        // The demo card takes up the space of two tiles
-        const limit = (section.strategy.limit as number | undefined) ?? 8;
-        const favorites = await generateLovelaceSectionStrategy(
-          { ...section, strategy: { ...section.strategy, limit: limit - 2 } },
-          hass
-        );
-        const [heading, ...cards] = favorites.cards || [];
-        return {
-          ...favorites,
-          // Place the demo card first so the tiles fill the rows next to it
-          cards: [heading, { type: "custom:ha-demo-next-card" }, ...cards],
-        };
-      })
+    // Add the demo card to the favorites section, found by its heading
+    const favoritesHeading = hass.localize(
+      "ui.panel.lovelace.strategy.home.favorites"
     );
+    const sections = (view.sections || []).map((section) => {
+      if (
+        isStrategySection(section) ||
+        !section.cards?.some(
+          (card) =>
+            card.type === "heading" &&
+            (card as HeadingCardConfig).heading === favoritesHeading
+        )
+      ) {
+        return section;
+      }
+      const [heading, ...cards] = section.cards;
+      return {
+        ...section,
+        // Place the demo card first so the tiles fill the rows next to it. It
+        // takes up the space of two tiles, so keep two less, but at least six.
+        cards: [
+          heading,
+          { type: "custom:ha-demo-next-card" },
+          ...cards.slice(0, Math.max(6, cards.length - 2)),
+        ],
+      };
+    });
 
     return {
       ...view,

demo/src/configs/sections/automations.ts

@@ -0,0 +1,361 @@
+import type { DemoAutomation } from "../types";
+
+export const demoAutomationsSections: DemoAutomation[] = [
+  {
+    lastTriggered: 60 * 9,
+    state: "off",
+    icon: "mdi:auto-mode",
+    config: {
+      id: "1700669321947",
+      alias: "Home Assistant Auto-update",
+      description:
+        "Installs Home Assistant updates at night, so nobody is bothered by the restart.",
+      triggers: [{ trigger: "time", at: "03:00:00" }],
+      conditions: [
+        {
+          condition: "update.is_available",
+          target: { entity_id: "update.home_assistant_core_update" },
+          options: { for: "00:00:00" },
+        },
+      ],
+      actions: [
+        {
+          action: "update.install",
+          target: { entity_id: "update.home_assistant_core_update" },
+          data: { backup: true },
+        },
+      ],
+      mode: "queued",
+    },
+  },
+  {
+    lastTriggered: 25,
+    config: {
+      id: "1700669322001",
+      alias: "Kitchen lights on motion",
+      description:
+        "Turns on the kitchen lights when motion is detected and turns them off again once the kitchen has been empty for 2 minutes.",
+      triggers: [
+        {
+          trigger: "motion.detected",
+          target: { entity_id: "binary_sensor.kitchen_motion" },
+          options: { for: "00:00:00" },
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          action: "light.turn_on",
+          target: {
+            entity_id: ["light.kitchen_spotlights", "light.worktop_spotlights"],
+          },
+          data: { brightness_pct: 80 },
+        },
+        {
+          wait_for_trigger: [
+            {
+              trigger: "motion.cleared",
+              target: { entity_id: "binary_sensor.kitchen_motion" },
+              options: { for: "00:02:00" },
+            },
+          ],
+        },
+        {
+          action: "light.turn_off",
+          target: {
+            entity_id: ["light.kitchen_spotlights", "light.worktop_spotlights"],
+          },
+        },
+      ],
+      mode: "restart",
+    },
+  },
+  {
+    lastTriggered: 60 * 3,
+    config: {
+      id: "1700669322002",
+      alias: "Outdoor light from sunset to sunrise",
+      description:
+        "Uses trigger IDs to handle both sunset and sunrise in one automation.",
+      triggers: [
+        {
+          trigger: "sun.sunset",
+          id: "sunset",
+          options: {
+            offset: { days: 0, hours: 0, minutes: 15, seconds: 0 },
+            offset_type: "before",
+          },
+        },
+        {
+          trigger: "sun.sunrise",
+          id: "sunrise",
+          options: {
+            offset: { days: 0, hours: 0, minutes: 0, seconds: 0 },
+            offset_type: "before",
+          },
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          choose: [
+            {
+              conditions: [{ condition: "trigger", id: "sunset" }],
+              sequence: [
+                {
+                  action: "light.turn_on",
+                  target: { entity_id: "light.outdoor_light" },
+                },
+              ],
+            },
+            {
+              conditions: [{ condition: "trigger", id: "sunrise" }],
+              sequence: [
+                {
+                  action: "light.turn_off",
+                  target: { entity_id: "light.outdoor_light" },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 60 * 14,
+    config: {
+      id: "1700669322003",
+      alias: "Flood light on motion when dark",
+      description:
+        "Turns on the flood light for 5 minutes when someone walks by in the dark.",
+      triggers: [
+        {
+          trigger: "motion.detected",
+          target: { entity_id: "binary_sensor.outdoor_motion_sensor_motion" },
+          options: { for: "00:00:00" },
+        },
+      ],
+      conditions: [
+        {
+          condition: "illuminance.is_value",
+          target: { entity_id: "sensor.outdoor_motion_sensor_illuminance" },
+          options: {
+            threshold: {
+              type: "below",
+              value: { number: 50, unit_of_measurement: "lx" },
+            },
+            for: "00:00:00",
+          },
+        },
+      ],
+      actions: [
+        {
+          action: "light.turn_on",
+          target: { entity_id: "light.flood_light" },
+        },
+        { delay: { hours: 0, minutes: 5, seconds: 0, milliseconds: 0 } },
+        {
+          action: "light.turn_off",
+          target: { entity_id: "light.flood_light" },
+        },
+      ],
+      mode: "restart",
+    },
+  },
+  {
+    lastTriggered: 60 * 26,
+    config: {
+      id: "1700669322004",
+      alias: "Close the shutters when it gets hot",
+      description:
+        "Keeps the living room cool by closing the shutters on hot, sunny days.",
+      triggers: [
+        {
+          trigger: "temperature.crossed_threshold",
+          target: { entity_id: "sensor.outdoor_temperature" },
+          options: {
+            threshold: {
+              type: "above",
+              value: { number: 25, unit_of_measurement: "°C" },
+            },
+            for: "00:10:00",
+          },
+        },
+      ],
+      conditions: [{ condition: "sun.is_up" }],
+      actions: [
+        {
+          action: "cover.close_cover",
+          target: {
+            entity_id: [
+              "cover.living_room_garden_shutter",
+              "cover.living_room_graveyard_shutter",
+              "cover.living_room_left_shutter",
+              "cover.living_room_right_shutter",
+            ],
+          },
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 60 * 50,
+    config: {
+      id: "1700669322005",
+      alias: "Fridge door left open",
+      description:
+        "Sends a reminder when the fridge door has been open for 2 minutes.",
+      triggers: [
+        {
+          trigger: "door.opened",
+          target: { entity_id: "binary_sensor.fridge_door" },
+          options: { for: "00:02:00" },
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          action: "notify.notify",
+          data: {
+            title: "Fridge door",
+            message: "The fridge door has been open for 2 minutes.",
+          },
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 90,
+    config: {
+      id: "1700669322006",
+      alias: "Meeting mode",
+      description:
+        "Pauses the music in the study and turns on the lights when a meeting starts.",
+      triggers: [
+        {
+          trigger: "switch.turned_on",
+          target: { entity_id: "switch.in_meeting" },
+          options: { for: "00:00:00" },
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          action: "media_player.media_pause",
+          target: { entity_id: "media_player.study_nest_hub" },
+        },
+        {
+          action: "light.turn_on",
+          target: { entity_id: "light.study_spotlights" },
+          data: { brightness_pct: 100, color_temp_kelvin: 4000 },
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 60 * 20,
+    config: {
+      id: "1700669322009",
+      alias: "Lights up when the music pauses",
+      description:
+        "Turns on the living room spotlights when the music is paused in the evening.",
+      triggers: [
+        {
+          trigger: "media_player.paused_playing",
+          target: { entity_id: "media_player.living_room_nest_mini" },
+          options: { for: "00:00:00" },
+        },
+      ],
+      conditions: [{ condition: "sun.is_set" }],
+      actions: [
+        {
+          action: "light.turn_on",
+          target: { entity_id: "light.living_room_spotlights" },
+          data: { brightness_pct: 40 },
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 60 * 7,
+    config: {
+      id: "1700669322007",
+      alias: "Lower heating when the car leaves",
+      triggers: [
+        {
+          trigger: "zone.left",
+          target: { entity_id: "device_tracker.car" },
+          options: { zone: "zone.home", for: "00:00:00" },
+        },
+      ],
+      conditions: [
+        {
+          condition: "time",
+          weekday: ["mon", "tue", "wed", "thu", "fri"],
+        },
+      ],
+      actions: [
+        {
+          action: "climate.set_temperature",
+          target: {
+            entity_id: ["climate.ground_floor", "climate.first_floor"],
+          },
+          data: { temperature: 17 },
+        },
+      ],
+      mode: "single",
+    },
+  },
+  {
+    lastTriggered: 60 * 11,
+    config: {
+      id: "1700669322008",
+      alias: "Good night",
+      description:
+        "Turns off all lights and closes the shutters at 23:00 on weeknights.",
+      triggers: [
+        {
+          trigger: "time",
+          at: "23:00:00",
+          weekday: ["sun", "mon", "tue", "wed", "thu"],
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          action: "light.turn_off",
+          target: {
+            entity_id: [
+              "light.floor_lamp",
+              "light.living_room_spotlights",
+              "light.bar_lamp",
+              "light.kitchen_spotlights",
+              "light.worktop_spotlights",
+              "light.study_spotlights",
+            ],
+          },
+        },
+        {
+          action: "cover.close_cover",
+          target: {
+            entity_id: [
+              "cover.living_room_garden_shutter",
+              "cover.living_room_graveyard_shutter",
+              "cover.living_room_left_shutter",
+              "cover.living_room_right_shutter",
+              "cover.kitchen_shutter",
+              "cover.study_shutter",
+            ],
+          },
+        },
+      ],
+      mode: "single",
+    },
+  },
+];

demo/src/configs/sections/entities.ts

@@ -140,6 +140,18 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
         friendly_name: "Outdoor humidity",
       },
     },
+    // Used by the automation for when the car leaves home
+    "zone.home": {
+      entity_id: "zone.home",
+      state: "0",
+      attributes: {
+        latitude: 52.3731339,
+        longitude: 4.8903147,
+        radius: 100,
+        friendly_name: "Home",
+        icon: "mdi:home",
+      },
+    },
     "device_tracker.car": {
       entity_id: "device_tracker.car",
       state: "not_home",
@@ -514,19 +526,6 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
         friendly_name: "Outdoor motion sensor Illuminance",
       },
     },
-    "automation.home_assistant_auto_update": {
-      entity_id: "automation.home_assistant_auto_update",
-      state: "off",
-      attributes: {
-        id: "1700669321947",
-        last_triggered: "2024-02-29T18:02:05.343139+00:00",
-        mode: "queued",
-        current: 0,
-        max: 50,
-        icon: "mdi:auto-mode",
-        friendly_name: "Home Assistant Auto-update",
-      },
-    },
     "update.home_assistant_operating_system_update": {
       entity_id: "update.home_assistant_operating_system_update",
       state: "off",

demo/src/configs/sections/index.ts

@@ -1,4 +1,5 @@
 import type { DemoConfig } from "../types";
+import { demoAutomationsSections } from "./automations";
 import { demoEntitiesSections } from "./entities";
 import { demoLovelaceSections } from "./lovelace";
 
@@ -8,5 +9,6 @@ export const demoSections: DemoConfig = {
   name: "Home Demo",
   lovelace: demoLovelaceSections,
   entities: demoEntitiesSections,
+  automations: demoAutomationsSections,
   theme: { theme: "default", dark: false },
 };

demo/src/configs/types.ts

@@ -1,5 +1,6 @@
 import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
+import type { ManualAutomationConfig } from "../../../src/data/automation";
 import type { LovelaceRawConfig } from "../../../src/data/lovelace/config/types";
 import type { EntityInput } from "../../../src/fake_data/entities/types";
 import type { ThemeSettings } from "../../../src/types";
@@ -8,6 +9,16 @@ import type { DemoFloor } from "../stubs/floor_registry";
 
 export type DemoTheme = ThemeSettings | (() => Record<string, string> | null);
 
+export interface DemoAutomation {
+  config: ManualAutomationConfig & { id: string; alias: string };
+  /** Defaults to the alias as slug */
+  entityId?: string;
+  state?: "on" | "off";
+  icon?: string;
+  /** Minutes ago */
+  lastTriggered?: number;
+}
+
 export interface DemoConfig {
   index?: number;
   name: string;
@@ -17,6 +28,7 @@ export interface DemoConfig {
     string | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceRawConfig;
   entities: (localize: LocalizeFunc) => EntityInput[];
+  automations?: DemoAutomation[];
   floors?: DemoFloor[];
   areas?: DemoArea[];
   theme: DemoTheme;

demo/src/ha-demo.ts

@@ -1,11 +1,18 @@
 import { customElement } from "lit/decorators";
+import type { LocalizeFunc } from "../../src/common/translations/localize";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 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 { applyDemoTheme, selectedDemoConfig } from "./configs/demo-configs";
+import {
+  applyDemoTheme,
+  demoConfigEntities,
+  registerDemoAutomations,
+  selectedDemo,
+  selectedDemoConfig,
+} from "./configs/demo-configs";
 import { mockAreaRegistry, setDemoAreas } from "./stubs/area_registry";
 import {
   connectivityCommands,
@@ -18,7 +25,10 @@ import { demoDevices } from "./stubs/devices";
 import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
-import { mockEntityRegistry } from "./stubs/entity_registry";
+import {
+  mockEntityRegistry,
+  mockEntityRegistryDisplay,
+} from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFloorRegistry, setDemoFloors } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
@@ -26,6 +36,7 @@ import { mockHardware } from "./stubs/hardware";
 import { mockHassioSupervisor } from "./stubs/hassio_supervisor";
 import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
+import { automationPlatformDomains } from "./stubs/automation_platform_domains";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -58,6 +69,12 @@ const CONFIG_PANEL_COMMANDS = [
   "system_health/",
   "backup/",
   "automation/config",
+  "trigger_platforms/subscribe",
+  "condition_platforms/subscribe",
+  "get_triggers_for_target",
+  "get_conditions_for_target",
+  "get_services_for_target",
+  "extract_from_target",
   "script/config",
   "config/automation/config",
   "config/script/config",
@@ -89,15 +106,19 @@ export class HaDemo extends HomeAssistantAppEl {
       config: {
         ...hass.config,
         components: [
-          ...(hass.config?.components ?? []),
-          "backup",
-          "webhook",
-          "usage_prediction",
-          "assist_pipeline",
-          "hassio",
-          "hardware",
-          "marketplace",
-          ...connectivityComponents,
+          // Some automation platforms are loaded already
+          ...new Set([
+            ...(hass.config?.components ?? []),
+            "backup",
+            "webhook",
+            "usage_prediction",
+            "assist_pipeline",
+            "hassio",
+            "hardware",
+            "marketplace",
+            ...connectivityComponents,
+            ...automationPlatformDomains,
+          ]),
         ],
       },
       panels: {
@@ -116,7 +137,9 @@ export class HaDemo extends HomeAssistantAppEl {
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(
-        () => this.hass!.localize
+        // hass is not updated yet when another fragment started loading
+        // meanwhile, so use the localize with these translations directly
+        (localize?: LocalizeFunc) => localize ?? this.hass!.localize
       );
 
     mockLovelace(hass, localizePromise);
@@ -151,6 +174,7 @@ export class HaDemo extends HomeAssistantAppEl {
     mockFloorRegistry(hass);
     mockLabelRegistry(hass);
     mockUsagePrediction(hass);
+    mockEntityRegistryDisplay(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",
@@ -206,7 +230,8 @@ export class HaDemo extends HomeAssistantAppEl {
       ([conf, localize]) => {
         setDemoFloors(hass, conf.floors);
         setDemoAreas(hass, conf.areas);
-        hass.addEntities(conf.entities(localize));
+        hass.addEntities(demoConfigEntities(selectedDemo, conf, localize));
+        registerDemoAutomations(hass, selectedDemo, conf);
         applyDemoTheme(hass, conf.theme);
       }
     );

demo/src/html/index.html.template

@@ -39,6 +39,9 @@
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
+        /* Prevent iOS Safari from inflating text when rotating to landscape */
+        -webkit-text-size-adjust: 100%;
+        text-size-adjust: 100%;
       }
       @media (prefers-color-scheme: dark) {
         html {

demo/src/stubs/auth.ts

@@ -1,3 +1,4 @@
+import type { OwnProfileMutableParams } from "../../../src/data/person";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockAuth = (hass: MockHomeAssistant) => {
@@ -6,4 +7,22 @@ export const mockAuth = (hass: MockHomeAssistant) => {
   hass.mockWS("auth/sign_path", (msg: { path: string }) => ({
     path: msg.path,
   }));
+
+  let name: string | undefined;
+  // The profile dialog refreshes the user subscription after saving, which
+  // writes the updated user back to hass.user. Read the current user on each
+  // call so later changes to it, such as a non-admin user, are kept.
+  hass.mockWS("auth/current_user", (_msg, currentHass: MockHomeAssistant) =>
+    name && currentHass.user ? { ...currentHass.user, name } : currentHass.user
+  );
+  hass.mockWS(
+    "person/update_own_profile",
+    (msg: Partial<OwnProfileMutableParams>, currentHass: MockHomeAssistant) => {
+      if (msg.name) {
+        name = msg.name;
+      }
+
+      return { user_name: name ?? currentHass.user?.name, person: null };
+    }
+  );
 };

demo/src/stubs/automation.ts

@@ -1,69 +1,155 @@
 import type { AutomationConfig } from "../../../src/data/automation";
 import type { ScriptConfig } from "../../../src/data/script";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { computeDomain } from "../../../src/common/entity/compute_domain";
+import { slugify } from "../../../src/common/string/slugify";
+import {
+  automationEntity,
+  demoAutomations,
+  saveDemoAutomation,
+  selectedDemo,
+  selectedDemoConfig,
+} from "../configs/demo-configs";
+import type { DemoAutomation } from "../configs/types";
+import { mockAutomationPlatforms } from "./automation_platforms";
+import {
+  addEntityRegistryEntry,
+  getEntityRegistryEntry,
+  removeEntityRegistryEntry,
+} from "./entity_registry";
 
-const demoAutomationConfig = (entityId: string): AutomationConfig => ({
-  id: entityId.split(".")[1],
-  alias: "Demo automation",
-  description: "An example automation shown in the demo.",
-  triggers: [
-    { trigger: "state", entity_id: "binary_sensor.basement_floor_wet" },
-  ],
-  conditions: [],
-  actions: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
+const automationConfig = async (
+  id: string | undefined
+): Promise<AutomationConfig> => {
+  const automation = demoAutomations(
+    selectedDemo,
+    await selectedDemoConfig
+  ).find((a) => a.config.id === id);
+  if (!automation) {
+    throw new Error("Automation not found");
+  }
+  return automation.config;
+};
 
-const demoScriptConfig = (): ScriptConfig => ({
-  alias: "Demo script",
-  description: "An example script shown in the demo.",
-  sequence: [
-    {
-      action: "light.turn_on",
-      target: { entity_id: "light.bed_light" },
-    },
-  ],
-  mode: "single",
-});
+const scriptConfig = (
+  currentHass: MockHomeAssistant,
+  entityId: string
+): ScriptConfig => {
+  const alias =
+    currentHass.states[entityId]?.attributes.friendly_name ?? entityId;
+  return {
+    alias,
+    sequence: [
+      {
+        action: "persistent_notification.create",
+        data: { message: `${alias} ran` },
+      },
+    ],
+    mode: "single",
+  };
+};
 
 export const mockAutomation = (hass: MockHomeAssistant) => {
-  hass.mockWS("automation/config", (msg: { entity_id: string }) => ({
-    config: demoAutomationConfig(msg.entity_id),
-  }));
-  hass.mockWS("script/config", () => ({ config: demoScriptConfig() }));
-
-  hass.mockAPI(/config\/automation\/config\/.+/, () =>
-    demoAutomationConfig("automation.demo")
-  );
-  hass.mockAPI(/config\/script\/config\/.+/, () => demoScriptConfig());
-
-  // Trigger/condition type pickers subscribe for integration-provided
-  // platforms. The demo only uses the built-in ones, so emit empty records.
   hass.mockWS(
-    "trigger_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
+    "automation/config",
+    async (msg: { entity_id: string }, currentHass: MockHomeAssistant) => ({
+      config: await automationConfig(
+        currentHass.states[msg.entity_id]?.attributes.id
+      ),
+    })
+  );
+  hass.mockAPI(
+    /config\/automation\/config\/.+/,
+    (currentHass, method, path, parameters) => {
+      const id = decodeURIComponent(path.split("/").pop()!);
+      const existing = Object.values(currentHass.states).find(
+        (stateObj) =>
+          computeDomain(stateObj.entity_id) === "automation" &&
+          stateObj.attributes.id === id
+      );
+      if (method === "DELETE") {
+        // Like core, remove the automation with its entity
+        saveDemoAutomation(id, null);
+        if (existing) {
+          const { [existing.entity_id]: _state, ...states } =
+            currentHass.states;
+          const { [existing.entity_id]: _entity, ...entities } =
+            currentHass.entities;
+          currentHass.updateHass({ states, entities });
+          // Otherwise a service call to it would add its state again
+          delete currentHass.mockEntities[existing.entity_id];
+          removeEntityRegistryEntry(currentHass, existing.entity_id);
+        }
+        return { result: "ok" };
+      }
+      if (method === "POST") {
+        // Core stores the ID in the config
+        const config = {
+          ...(parameters as DemoAutomation["config"]),
+          id,
+        };
+        config.alias ||= id;
+        // Like core, update the automation entity, or add it for a new one
+        // A new automation gets a free entity ID, like core
+        const slug = `automation.${slugify(config.alias)}`;
+        let entityId = existing?.entity_id ?? slug;
+        for (let i = 2; !existing && entityId in currentHass.states; i++) {
+          entityId = `${slug}_${i}`;
+        }
+        const lastTriggered = existing?.attributes.last_triggered;
+        const automation: DemoAutomation = {
+          config,
+          entityId,
+          state: existing?.state as DemoAutomation["state"],
+          icon: existing?.attributes.icon,
+          lastTriggered: lastTriggered
+            ? (Date.now() - Date.parse(lastTriggered)) / 60000
+            : undefined,
+        };
+        // Kept per demo, so it is still there after switching demos
+        saveDemoAutomation(id, automation);
+        // A display entry of a new automation is left over from another demo
+        const display = existing ? currentHass.entities[entityId] : undefined;
+        currentHass.addEntities(automationEntity(automation));
+        // Adding the entity resets its display entry, keep what the registry
+        // holds
+        if (display) {
+          const registryName = getEntityRegistryEntry(entityId)?.name;
+          currentHass.entities[entityId] = {
+            ...currentHass.entities[entityId],
+            ...(registryName && { name: registryName }),
+            area_id: display.area_id,
+            labels: display.labels,
+            icon: display.icon,
+            hidden: display.hidden,
+          };
+        }
+        if (!existing) {
+          addEntityRegistryEntry(currentHass, {
+            entity_id: entityId,
+            platform: "automation",
+            unique_id: id,
+          });
+        }
+        return { result: "ok" };
+      }
+      return automationConfig(id);
     }
   );
+
+  // Scripts do not have demo configs yet, show the script under its own name.
   hass.mockWS(
-    "condition_platforms/subscribe",
-    (
-      _msg,
-      _hass,
-      onChange?: (descriptions: Record<string, unknown>) => void
-    ) => {
-      onChange?.({});
-      return () => undefined;
-    }
+    "script/config",
+    (msg: { entity_id: string }, currentHass: MockHomeAssistant) => ({
+      config: scriptConfig(currentHass, msg.entity_id),
+    })
   );
+  hass.mockAPI(/config\/script\/config\/.+/, (currentHass, _method, path) =>
+    scriptConfig(
+      currentHass,
+      `script.${decodeURIComponent(path.split("/").pop()!)}`
+    )
+  );
+
+  mockAutomationPlatforms(hass);
 };

demo/src/stubs/automation_platform_domains.ts

@@ -0,0 +1,52 @@
+// This file is auto-generated from Home Assistant Core. Do not edit by hand.
+// Regenerate with `script/gen_demo_core_data`.
+
+// Integrations that provide the new style triggers and conditions. Their
+// translations are part of the demo build.
+export const automationPlatformDomains = [
+  "air_quality",
+  "alarm_control_panel",
+  "assist_satellite",
+  "battery",
+  "button",
+  "calendar",
+  "climate",
+  "counter",
+  "cover",
+  "door",
+  "doorbell",
+  "event",
+  "fan",
+  "garage_door",
+  "gate",
+  "humidifier",
+  "humidity",
+  "illuminance",
+  "lawn_mower",
+  "light",
+  "lock",
+  "media_player",
+  "moisture",
+  "moon",
+  "motion",
+  "occupancy",
+  "power",
+  "remote",
+  "scene",
+  "schedule",
+  "select",
+  "siren",
+  "sun",
+  "switch",
+  "temperature",
+  "text",
+  "timer",
+  "todo",
+  "update",
+  "vacuum",
+  "valve",
+  "vibration",
+  "water_heater",
+  "window",
+  "zone",
+];

demo/src/stubs/automation_platforms.ts

@@ -0,0 +1,270 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { ensureArray } from "../../../src/common/array/ensure-array";
+import { computeDomain } from "../../../src/common/entity/compute_domain";
+import type { ConditionDescriptions } from "../../../src/data/condition";
+import type { ExtractFromTargetResult } from "../../../src/data/target";
+import type { TriggerDescriptions } from "../../../src/data/trigger";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { getLabelIds } from "./label_registry";
+import {
+  conditionDescriptions,
+  triggerDescriptions,
+} from "./automation_platforms_data";
+
+type Descriptions = TriggerDescriptions | ConditionDescriptions;
+
+interface EntityFilter {
+  integration?: string;
+  domain?: string | string[];
+  device_class?: string | string[];
+  supported_features?: number[];
+}
+
+// Expands a target to its areas, devices and entities, like core does
+const expandTarget = (
+  hass: MockHomeAssistant,
+  target: HassServiceTarget,
+  primaryEntitiesOnly = true
+) => {
+  const missing = {
+    floors: [] as string[],
+    areas: [] as string[],
+    devices: [] as string[],
+    labels: [] as string[],
+  };
+  const knownLabelIds = getLabelIds();
+  const floorIds = ensureArray(target.floor_id ?? []);
+  const labelIds = ensureArray(target.label_id ?? []);
+  missing.floors.push(...floorIds.filter((id) => !(id in hass.floors)));
+  // Like core, unknown labels are reported, but still expanded
+  missing.labels.push(...labelIds.filter((id) => !knownLabelIds.includes(id)));
+  const hasLabel = (labels?: string[]) =>
+    labelIds.some((labelId) => labels?.includes(labelId));
+
+  // Unknown areas and devices are reported, but still referenced
+  const areaIds = new Set(ensureArray(target.area_id ?? []));
+  missing.areas.push(...[...areaIds].filter((id) => !(id in hass.areas)));
+  for (const area of Object.values(hass.areas)) {
+    if (
+      (area.floor_id && floorIds.includes(area.floor_id)) ||
+      hasLabel(area.labels)
+    ) {
+      areaIds.add(area.area_id);
+    }
+  }
+
+  // A targeted or labeled device includes its child devices
+  const deviceIds = new Set<string>();
+  const addDevice = (deviceId: string) => {
+    deviceIds.add(deviceId);
+    for (const device of Object.values(hass.devices)) {
+      if (device.parent_device_id === deviceId) {
+        deviceIds.add(device.id);
+      }
+    }
+  };
+  for (const deviceId of ensureArray(target.device_id ?? [])) {
+    if (!(deviceId in hass.devices)) {
+      missing.devices.push(deviceId);
+    }
+    addDevice(deviceId);
+  }
+  for (const device of Object.values(hass.devices)) {
+    if (hasLabel(device.labels)) {
+      addDevice(device.id);
+    }
+  }
+
+  // A child device without its own area is in the area of its parent device
+  const deviceArea = (deviceId: string) => {
+    const device = hass.devices[deviceId];
+    return (
+      device?.area_id ??
+      (device?.parent_device_id
+        ? hass.devices[device.parent_device_id]?.area_id
+        : undefined)
+    );
+  };
+  const areaDeviceIds = new Set<string>();
+  for (const device of Object.values(hass.devices)) {
+    const areaId = deviceArea(device.id);
+    if (areaId && areaIds.has(areaId)) {
+      areaDeviceIds.add(device.id);
+    }
+  }
+
+  const entityIds = new Set(ensureArray(target.entity_id ?? []));
+  for (const entity of Object.values(hass.entities)) {
+    // The display registry keeps the entities of a previous demo, and like
+    // core, hidden entities are never included indirectly
+    if (!(entity.entity_id in hass.states) || entity.hidden) {
+      continue;
+    }
+    const primary = !primaryEntitiesOnly || !entity.entity_category;
+    if (
+      hasLabel(entity.labels) ||
+      (primary &&
+        ((entity.device_id && deviceIds.has(entity.device_id)) ||
+          (entity.area_id && areaIds.has(entity.area_id)) ||
+          // An entity with its own area is not in the area of its device
+          (!entity.area_id &&
+            entity.device_id &&
+            areaDeviceIds.has(entity.device_id))))
+    ) {
+      entityIds.add(entity.entity_id);
+    }
+  }
+
+  return {
+    areas: [...areaIds],
+    devices: [...new Set([...deviceIds, ...areaDeviceIds])],
+    entities: [...entityIds],
+    missing,
+  };
+};
+
+const matchesFilter = (
+  hass: MockHomeAssistant,
+  entityId: string,
+  filter: EntityFilter
+) =>
+  (!filter.integration ||
+    hass.entities[entityId]?.platform === filter.integration) &&
+  (!filter.domain ||
+    ensureArray(filter.domain).includes(computeDomain(entityId))) &&
+  (!filter.device_class ||
+    ensureArray(filter.device_class).includes(
+      hass.states[entityId]?.attributes.device_class ?? ""
+    )) &&
+  // Like core, the entity needs all the features of one of the feature sets
+  (!filter.supported_features ||
+    filter.supported_features.some(
+      (features) =>
+        // eslint-disable-next-line no-bitwise
+        ((hass.states[entityId]?.attributes.supported_features ?? 0) &
+          features) ===
+        features
+    ));
+
+type TargetDescriptions = Record<
+  string,
+  {
+    target?: {
+      entity?: EntityFilter | EntityFilter[];
+      primary_entities_only?: boolean;
+    } | null;
+  }
+>;
+
+// Like core, the components with a target that apply to at least one entity
+// of the target. A target without entity filters applies to any entity.
+const componentsForTarget = (
+  hass: MockHomeAssistant,
+  target: HassServiceTarget,
+  descriptions: TargetDescriptions
+) => {
+  const entityIds = expandTarget(hass, target, false).entities;
+  const targetedIds = ensureArray(target.entity_id ?? []);
+  return Object.entries(descriptions)
+    .filter(([, description]) => {
+      if (!description.target) {
+        return false;
+      }
+      const filters = ensureArray(description.target.entity ?? []);
+      const primaryEntitiesOnly =
+        description.target.primary_entities_only ?? true;
+      return entityIds.some(
+        (entityId) =>
+          // Entities with a category only count when targeted directly,
+          // unless the component allows them
+          (!primaryEntitiesOnly ||
+            targetedIds.includes(entityId) ||
+            !hass.entities[entityId]?.entity_category) &&
+          (!filters.length ||
+            filters.some((filter) => matchesFilter(hass, entityId, filter)))
+      );
+    })
+    .map(([key]) => key);
+};
+
+const mockForTarget = (
+  hass: MockHomeAssistant,
+  type: string,
+  descriptions: Descriptions
+) =>
+  hass.mockWS(
+    type,
+    (msg: { target: HassServiceTarget }, currentHass: MockHomeAssistant) =>
+      componentsForTarget(
+        currentHass,
+        msg.target,
+        descriptions as TargetDescriptions
+      )
+  );
+
+const mockPlatformSubscription = (
+  hass: MockHomeAssistant,
+  type: string,
+  descriptions: Descriptions
+) =>
+  hass.mockWS(
+    type,
+    (_msg, _hass, onChange?: (descriptions: Descriptions) => void) => {
+      onChange?.(descriptions);
+      return () => undefined;
+    }
+  );
+
+export const mockAutomationPlatforms = (hass: MockHomeAssistant) => {
+  mockPlatformSubscription(
+    hass,
+    "trigger_platforms/subscribe",
+    triggerDescriptions
+  );
+  mockPlatformSubscription(
+    hass,
+    "condition_platforms/subscribe",
+    conditionDescriptions
+  );
+  mockForTarget(hass, "get_triggers_for_target", triggerDescriptions);
+  mockForTarget(hass, "get_conditions_for_target", conditionDescriptions);
+  hass.mockWS(
+    "extract_from_target",
+    (
+      msg: { target: HassServiceTarget; primary_entities_only?: boolean },
+      currentHass: MockHomeAssistant
+    ): ExtractFromTargetResult => {
+      const { areas, devices, entities, missing } = expandTarget(
+        currentHass,
+        msg.target,
+        msg.primary_entities_only ?? true
+      );
+      return {
+        missing_areas: missing.areas,
+        missing_devices: missing.devices,
+        missing_floors: missing.floors,
+        missing_labels: missing.labels,
+        referenced_areas: areas,
+        referenced_devices: devices,
+        referenced_entities: entities,
+      };
+    }
+  );
+  hass.mockWS(
+    "get_services_for_target",
+    (msg: { target: HassServiceTarget }, currentHass: MockHomeAssistant) =>
+      componentsForTarget(
+        currentHass,
+        msg.target,
+        // Keyed by <domain>.<service>, like the triggers and conditions
+        Object.fromEntries(
+          Object.entries(currentHass.services).flatMap(([domain, services]) =>
+            Object.entries(services).map(([service, description]) => [
+              `${domain}.${service}`,
+              description,
+            ])
+          )
+        ) as TargetDescriptions
+      )
+  );
+};

demo/src/stubs/automation_platforms_icons.ts

@@ -0,0 +1,495 @@
+// This file is auto-generated from Home Assistant Core. Do not edit by hand.
+// Regenerate with `script/gen_demo_core_data`.
+
+export const triggerIcons = {
+  air_quality: {
+    co2_changed: { trigger: "mdi:molecule-co2" },
+    co2_crossed_threshold: { trigger: "mdi:molecule-co2" },
+    co_changed: { trigger: "mdi:molecule-co" },
+    co_cleared: { trigger: "mdi:check-circle" },
+    co_crossed_threshold: { trigger: "mdi:molecule-co" },
+    co_detected: { trigger: "mdi:molecule-co" },
+    gas_cleared: { trigger: "mdi:check-circle" },
+    gas_detected: { trigger: "mdi:gas-cylinder" },
+    n2o_changed: { trigger: "mdi:factory" },
+    n2o_crossed_threshold: { trigger: "mdi:factory" },
+    no2_changed: { trigger: "mdi:factory" },
+    no2_crossed_threshold: { trigger: "mdi:factory" },
+    no_changed: { trigger: "mdi:factory" },
+    no_crossed_threshold: { trigger: "mdi:factory" },
+    ozone_changed: { trigger: "mdi:weather-sunny-alert" },
+    ozone_crossed_threshold: { trigger: "mdi:weather-sunny-alert" },
+    pm10_changed: { trigger: "mdi:blur" },
+    pm10_crossed_threshold: { trigger: "mdi:blur" },
+    pm1_changed: { trigger: "mdi:blur" },
+    pm1_crossed_threshold: { trigger: "mdi:blur" },
+    pm25_changed: { trigger: "mdi:blur" },
+    pm25_crossed_threshold: { trigger: "mdi:blur" },
+    pm4_changed: { trigger: "mdi:blur" },
+    pm4_crossed_threshold: { trigger: "mdi:blur" },
+    smoke_cleared: { trigger: "mdi:check-circle" },
+    smoke_detected: { trigger: "mdi:smoke-detector-variant" },
+    so2_changed: { trigger: "mdi:factory" },
+    so2_crossed_threshold: { trigger: "mdi:factory" },
+    voc_changed: { trigger: "mdi:air-filter" },
+    voc_crossed_threshold: { trigger: "mdi:air-filter" },
+    voc_ratio_changed: { trigger: "mdi:air-filter" },
+    voc_ratio_crossed_threshold: { trigger: "mdi:air-filter" },
+  },
+  alarm_control_panel: {
+    armed: { trigger: "mdi:shield" },
+    armed_away: { trigger: "mdi:shield-lock" },
+    armed_home: { trigger: "mdi:shield-home" },
+    armed_night: { trigger: "mdi:shield-moon" },
+    armed_vacation: { trigger: "mdi:shield-airplane" },
+    disarmed: { trigger: "mdi:shield-off" },
+    triggered: { trigger: "mdi:bell-ring" },
+  },
+  assist_satellite: {
+    idle: { trigger: "mdi:chat-sleep" },
+    listening: { trigger: "mdi:chat-question" },
+    processing: { trigger: "mdi:chat-processing" },
+    responding: { trigger: "mdi:chat-alert" },
+  },
+  battery: {
+    became_low: { trigger: "mdi:battery-alert" },
+    level_changed: { trigger: "mdi:battery-unknown" },
+    level_crossed_threshold: { trigger: "mdi:battery-alert" },
+    no_longer_low: { trigger: "mdi:battery" },
+    started_charging: { trigger: "mdi:battery-charging" },
+    stopped_charging: { trigger: "mdi:battery" },
+  },
+  button: { pressed: { trigger: "mdi:gesture-tap-button" } },
+  calendar: {
+    event_ended: { trigger: "mdi:calendar-end" },
+    event_started: { trigger: "mdi:calendar-start" },
+  },
+  climate: {
+    hvac_mode_changed: { trigger: "mdi:thermostat" },
+    started_cooling: { trigger: "mdi:snowflake" },
+    started_drying: { trigger: "mdi:water-percent" },
+    started_heating: { trigger: "mdi:fire" },
+    target_humidity_changed: { trigger: "mdi:water-percent" },
+    target_humidity_crossed_threshold: { trigger: "mdi:water-percent" },
+    target_temperature_changed: { trigger: "mdi:thermometer" },
+    target_temperature_crossed_threshold: { trigger: "mdi:thermometer" },
+    turned_off: { trigger: "mdi:power-off" },
+    turned_on: { trigger: "mdi:power-on" },
+  },
+  counter: {
+    decremented: { trigger: "mdi:numeric-negative-1" },
+    incremented: { trigger: "mdi:numeric-positive-1" },
+    maximum_reached: { trigger: "mdi:sort-numeric-ascending-variant" },
+    minimum_reached: { trigger: "mdi:sort-numeric-descending-variant" },
+    reset: { trigger: "mdi:refresh" },
+  },
+  cover: {
+    awning_closed: { trigger: "mdi:storefront-outline" },
+    awning_opened: { trigger: "mdi:storefront-outline" },
+    blind_closed: { trigger: "mdi:blinds-horizontal-closed" },
+    blind_opened: { trigger: "mdi:blinds-horizontal" },
+    curtain_closed: { trigger: "mdi:curtains-closed" },
+    curtain_opened: { trigger: "mdi:curtains" },
+    shade_closed: { trigger: "mdi:roller-shade-closed" },
+    shade_opened: { trigger: "mdi:roller-shade" },
+    shutter_closed: { trigger: "mdi:window-shutter" },
+    shutter_opened: { trigger: "mdi:window-shutter-open" },
+  },
+  door: {
+    closed: { trigger: "mdi:door-closed" },
+    opened: { trigger: "mdi:door-open" },
+  },
+  doorbell: { rang: { trigger: "mdi:doorbell" } },
+  event: { received: { trigger: "mdi:eye-check" } },
+  fan: {
+    turned_off: { trigger: "mdi:fan-off" },
+    turned_on: { trigger: "mdi:fan" },
+  },
+  garage_door: {
+    closed: { trigger: "mdi:garage" },
+    opened: { trigger: "mdi:garage-open" },
+  },
+  gate: {
+    closed: { trigger: "mdi:gate" },
+    opened: { trigger: "mdi:gate-open" },
+  },
+  humidifier: {
+    mode_changed: { trigger: "mdi:air-humidifier" },
+    started_drying: { trigger: "mdi:arrow-down-bold" },
+    started_humidifying: { trigger: "mdi:arrow-up-bold" },
+    turned_off: { trigger: "mdi:air-humidifier-off" },
+    turned_on: { trigger: "mdi:air-humidifier" },
+  },
+  humidity: {
+    changed: { trigger: "mdi:water-percent" },
+    crossed_threshold: { trigger: "mdi:water-percent" },
+  },
+  illuminance: {
+    changed: { trigger: "mdi:brightness-6" },
+    cleared: { trigger: "mdi:brightness-4" },
+    crossed_threshold: { trigger: "mdi:brightness-6" },
+    detected: { trigger: "mdi:brightness-7" },
+  },
+  lawn_mower: {
+    became_idle: { trigger: "mdi:stop" },
+    errored: { trigger: "mdi:alert-circle-outline" },
+    paused_mowing: { trigger: "mdi:pause" },
+    returned_to_dock: { trigger: "mdi:home-import-outline" },
+    started_mowing: { trigger: "mdi:play" },
+    started_returning: { trigger: "mdi:home-import-outline" },
+  },
+  light: {
+    brightness_changed: { trigger: "mdi:lightbulb-on-50" },
+    brightness_crossed_threshold: { trigger: "mdi:lightbulb-on-50" },
+    turned_off: { trigger: "mdi:lightbulb-off" },
+    turned_on: { trigger: "mdi:lightbulb-on" },
+  },
+  lock: {
+    jammed: { trigger: "mdi:lock-alert" },
+    locked: { trigger: "mdi:lock" },
+    opened: { trigger: "mdi:lock-open-variant" },
+    unlocked: { trigger: "mdi:lock-open-variant" },
+  },
+  media_player: {
+    muted: { trigger: "mdi:volume-mute" },
+    paused_playing: { trigger: "mdi:pause" },
+    started_playing: { trigger: "mdi:play" },
+    stopped_playing: { trigger: "mdi:stop" },
+    turned_off: { trigger: "mdi:power" },
+    turned_on: { trigger: "mdi:power" },
+    unmuted: { trigger: "mdi:volume-high" },
+    volume_changed: { trigger: "mdi:volume-medium" },
+    volume_crossed_threshold: { trigger: "mdi:volume-medium" },
+  },
+  moisture: {
+    changed: { trigger: "mdi:water-percent" },
+    cleared: { trigger: "mdi:water-off" },
+    crossed_threshold: { trigger: "mdi:water-percent" },
+    detected: { trigger: "mdi:water" },
+  },
+  moon: { phase_changed: { trigger: "mdi:moon-waning-crescent" } },
+  motion: {
+    cleared: { trigger: "mdi:motion-sensor-off" },
+    detected: { trigger: "mdi:motion-sensor" },
+  },
+  occupancy: {
+    cleared: { trigger: "mdi:home-outline" },
+    detected: { trigger: "mdi:home-account" },
+  },
+  power: {
+    changed: { trigger: "mdi:flash" },
+    crossed_threshold: { trigger: "mdi:flash" },
+  },
+  remote: {
+    turned_off: { trigger: "mdi:remote-off" },
+    turned_on: { trigger: "mdi:remote" },
+  },
+  scene: { activated: { trigger: "mdi:palette" } },
+  schedule: {
+    block_ended: { trigger: "mdi:calendar-blank" },
+    block_started: { trigger: "mdi:calendar-clock" },
+  },
+  select: { selection_changed: { trigger: "mdi:format-list-bulleted" } },
+  siren: {
+    turned_off: { trigger: "mdi:bullhorn-outline" },
+    turned_on: { trigger: "mdi:bullhorn" },
+  },
+  sun: {
+    blue_hour_ended: { trigger: "mdi:weather-sunset" },
+    blue_hour_started: { trigger: "mdi:weather-sunset" },
+    dawn: { trigger: "mdi:weather-sunset-up" },
+    dusk: { trigger: "mdi:weather-sunset-down" },
+    elevation_changed: { trigger: "mdi:sun-angle" },
+    elevation_crossed_threshold: { trigger: "mdi:sun-angle" },
+    golden_hour_ended: { trigger: "mdi:weather-sunset" },
+    golden_hour_started: { trigger: "mdi:weather-sunset" },
+    midnight_sun_ended: { trigger: "mdi:weather-sunset" },
+    midnight_sun_started: { trigger: "mdi:weather-sunny" },
+    polar_night_ended: { trigger: "mdi:weather-sunset-up" },
+    polar_night_started: { trigger: "mdi:weather-night" },
+    solar_midnight: { trigger: "mdi:weather-night" },
+    solar_noon: { trigger: "mdi:weather-sunny" },
+    sunrise: { trigger: "mdi:weather-sunset-up" },
+    sunset: { trigger: "mdi:weather-sunset-down" },
+  },
+  switch: {
+    turned_off: { trigger: "mdi:toggle-switch-variant-off" },
+    turned_on: { trigger: "mdi:toggle-switch-variant" },
+  },
+  temperature: {
+    changed: { trigger: "mdi:thermometer" },
+    crossed_threshold: { trigger: "mdi:thermometer" },
+  },
+  text: { changed: { trigger: "mdi:form-textbox" } },
+  timer: {
+    cancelled: { trigger: "mdi:timer-cancel" },
+    finished: { trigger: "mdi:timer-check" },
+    paused: { trigger: "mdi:timer-pause" },
+    remaining_time_reached: { trigger: "mdi:timer-alert-outline" },
+    restarted: { trigger: "mdi:timer-refresh" },
+    started: { trigger: "mdi:timer-play" },
+  },
+  todo: {
+    item_added: { trigger: "mdi:clipboard-plus" },
+    item_completed: { trigger: "mdi:clipboard-check" },
+    item_removed: { trigger: "mdi:clipboard-minus" },
+  },
+  update: { became_available: { trigger: "mdi:package-up" } },
+  vacuum: {
+    errored: { trigger: "mdi:alert-circle-outline" },
+    paused_cleaning: { trigger: "mdi:pause" },
+    returned_to_dock: { trigger: "mdi:home-outline" },
+    started_cleaning: { trigger: "mdi:play" },
+    started_returning: { trigger: "mdi:home-import-outline" },
+  },
+  valve: {
+    closed: { trigger: "mdi:valve-closed" },
+    opened: { trigger: "mdi:valve-open" },
+  },
+  vibration: {
+    cleared: { trigger: "mdi:vibrate-off" },
+    detected: { trigger: "mdi:vibrate" },
+  },
+  water_heater: {
+    operation_mode_changed: { trigger: "mdi:water-boiler" },
+    target_temperature_changed: { trigger: "mdi:thermometer" },
+    target_temperature_crossed_threshold: { trigger: "mdi:thermometer" },
+    turned_off: { trigger: "mdi:water-boiler-off" },
+    turned_on: { trigger: "mdi:water-boiler" },
+  },
+  window: {
+    closed: { trigger: "mdi:window-closed" },
+    opened: { trigger: "mdi:window-open" },
+  },
+  zone: {
+    entered: { trigger: "mdi:map-marker-plus" },
+    left: { trigger: "mdi:map-marker-minus" },
+    occupancy_cleared: { trigger: "mdi:account-off" },
+    occupancy_detected: { trigger: "mdi:account-group" },
+  },
+};
+
+export const conditionIcons = {
+  air_quality: {
+    is_co2_value: { condition: "mdi:molecule-co2" },
+    is_co_cleared: { condition: "mdi:check-circle" },
+    is_co_detected: { condition: "mdi:molecule-co" },
+    is_co_value: { condition: "mdi:molecule-co" },
+    is_gas_cleared: { condition: "mdi:check-circle" },
+    is_gas_detected: { condition: "mdi:gas-cylinder" },
+    is_n2o_value: { condition: "mdi:factory" },
+    is_no2_value: { condition: "mdi:factory" },
+    is_no_value: { condition: "mdi:factory" },
+    is_ozone_value: { condition: "mdi:weather-sunny-alert" },
+    is_pm10_value: { condition: "mdi:blur" },
+    is_pm1_value: { condition: "mdi:blur" },
+    is_pm25_value: { condition: "mdi:blur" },
+    is_pm4_value: { condition: "mdi:blur" },
+    is_smoke_cleared: { condition: "mdi:check-circle" },
+    is_smoke_detected: { condition: "mdi:smoke-detector-variant" },
+    is_so2_value: { condition: "mdi:factory" },
+    is_voc_ratio_value: { condition: "mdi:air-filter" },
+    is_voc_value: { condition: "mdi:air-filter" },
+  },
+  alarm_control_panel: {
+    is_armed: { condition: "mdi:shield" },
+    is_armed_away: { condition: "mdi:shield-lock" },
+    is_armed_home: { condition: "mdi:shield-home" },
+    is_armed_night: { condition: "mdi:shield-moon" },
+    is_armed_vacation: { condition: "mdi:shield-airplane" },
+    is_disarmed: { condition: "mdi:shield-off" },
+    is_triggered: { condition: "mdi:bell-ring" },
+  },
+  assist_satellite: {
+    is_idle: { condition: "mdi:chat-sleep" },
+    is_listening: { condition: "mdi:chat-question" },
+    is_processing: { condition: "mdi:chat-processing" },
+    is_responding: { condition: "mdi:chat-alert" },
+  },
+  battery: {
+    is_charging: { condition: "mdi:battery-charging" },
+    is_level: { condition: "mdi:battery-unknown" },
+    is_low: { condition: "mdi:battery-alert" },
+    is_not_charging: { condition: "mdi:battery" },
+    is_not_low: { condition: "mdi:battery" },
+  },
+  calendar: { is_event_active: { condition: "mdi:calendar-check" } },
+  climate: {
+    is_cooling: { condition: "mdi:snowflake" },
+    is_drying: { condition: "mdi:water-percent" },
+    is_heating: { condition: "mdi:fire" },
+    is_hvac_mode: { condition: "mdi:thermostat" },
+    is_off: { condition: "mdi:power-off" },
+    is_on: { condition: "mdi:power-on" },
+    is_target_humidity: { condition: "mdi:water-percent" },
+    is_target_temperature: { condition: "mdi:thermometer" },
+  },
+  counter: { is_value: { condition: "mdi:counter" } },
+  cover: {
+    awning_is_closed: { condition: "mdi:storefront-outline" },
+    awning_is_open: { condition: "mdi:storefront-outline" },
+    blind_is_closed: { condition: "mdi:blinds-horizontal-closed" },
+    blind_is_open: { condition: "mdi:blinds-horizontal" },
+    curtain_is_closed: { condition: "mdi:curtains-closed" },
+    curtain_is_open: { condition: "mdi:curtains" },
+    shade_is_closed: { condition: "mdi:roller-shade-closed" },
+    shade_is_open: { condition: "mdi:roller-shade" },
+    shutter_is_closed: { condition: "mdi:window-shutter" },
+    shutter_is_open: { condition: "mdi:window-shutter-open" },
+  },
+  door: {
+    is_closed: { condition: "mdi:door-closed" },
+    is_open: { condition: "mdi:door-open" },
+  },
+  fan: {
+    is_off: { condition: "mdi:fan-off" },
+    is_on: { condition: "mdi:fan" },
+  },
+  garage_door: {
+    is_closed: { condition: "mdi:garage" },
+    is_open: { condition: "mdi:garage-open" },
+  },
+  gate: {
+    is_closed: { condition: "mdi:gate" },
+    is_open: { condition: "mdi:gate-open" },
+  },
+  humidifier: {
+    is_drying: { condition: "mdi:arrow-down-bold" },
+    is_humidifying: { condition: "mdi:arrow-up-bold" },
+    is_mode: { condition: "mdi:air-humidifier" },
+    is_off: { condition: "mdi:air-humidifier-off" },
+    is_on: { condition: "mdi:air-humidifier" },
+    is_target_humidity: { condition: "mdi:water-percent" },
+  },
+  humidity: { is_value: { condition: "mdi:water-percent" } },
+  illuminance: {
+    is_detected: { condition: "mdi:brightness-7" },
+    is_not_detected: { condition: "mdi:brightness-4" },
+    is_value: { condition: "mdi:brightness-percent" },
+  },
+  lawn_mower: {
+    is_docked: { condition: "mdi:home-import-outline" },
+    is_encountering_an_error: { condition: "mdi:alert-circle-outline" },
+    is_idle: { condition: "mdi:stop" },
+    is_mowing: { condition: "mdi:play" },
+    is_paused: { condition: "mdi:pause" },
+    is_returning: { condition: "mdi:home-import-outline" },
+  },
+  light: {
+    is_brightness: { condition: "mdi:lightbulb-on-50" },
+    is_off: { condition: "mdi:lightbulb-off" },
+    is_on: { condition: "mdi:lightbulb-on" },
+  },
+  lock: {
+    is_jammed: { condition: "mdi:lock-alert" },
+    is_locked: { condition: "mdi:lock" },
+    is_open: { condition: "mdi:lock-open-variant" },
+    is_unlocked: { condition: "mdi:lock-open-variant" },
+  },
+  media_player: {
+    is_muted: { condition: "mdi:volume-mute" },
+    is_not_playing: { condition: "mdi:stop" },
+    is_off: { condition: "mdi:cast-off" },
+    is_on: { condition: "mdi:cast" },
+    is_paused: { condition: "mdi:pause" },
+    is_playing: { condition: "mdi:play" },
+    is_unmuted: { condition: "mdi:volume-high" },
+    is_volume: { condition: "mdi:volume-medium" },
+  },
+  moisture: {
+    is_detected: { condition: "mdi:water" },
+    is_not_detected: { condition: "mdi:water-off" },
+    is_value: { condition: "mdi:water-percent" },
+  },
+  moon: {
+    is_phase: { condition: "mdi:moon-full" },
+    is_waning: { condition: "mdi:moon-waning-crescent" },
+    is_waxing: { condition: "mdi:moon-waxing-crescent" },
+  },
+  motion: {
+    is_detected: { condition: "mdi:motion-sensor" },
+    is_not_detected: { condition: "mdi:motion-sensor-off" },
+  },
+  occupancy: {
+    is_detected: { condition: "mdi:home-account" },
+    is_not_detected: { condition: "mdi:home-outline" },
+  },
+  power: { is_value: { condition: "mdi:flash" } },
+  remote: {
+    is_off: { condition: "mdi:remote-off" },
+    is_on: { condition: "mdi:remote" },
+  },
+  schedule: {
+    is_off: { condition: "mdi:calendar-blank" },
+    is_on: { condition: "mdi:calendar-clock" },
+  },
+  select: { is_option_selected: { condition: "mdi:format-list-bulleted" } },
+  siren: {
+    is_off: { condition: "mdi:bullhorn-outline" },
+    is_on: { condition: "mdi:bullhorn" },
+  },
+  sun: {
+    elevation: { condition: "mdi:sun-angle" },
+    is_ascending: { condition: "mdi:weather-sunset-up" },
+    is_blue_hour: { condition: "mdi:weather-sunset" },
+    is_descending: { condition: "mdi:weather-sunset-down" },
+    is_evening_twilight: { condition: "mdi:weather-sunset-down" },
+    is_golden_hour: { condition: "mdi:weather-sunset" },
+    is_midnight_sun: { condition: "mdi:weather-sunny" },
+    is_morning_twilight: { condition: "mdi:weather-sunset-up" },
+    is_night: { condition: "mdi:weather-night" },
+    is_polar_night: { condition: "mdi:weather-night" },
+    is_set: { condition: "mdi:weather-sunny-off" },
+    is_up: { condition: "mdi:weather-sunny" },
+  },
+  switch: {
+    is_off: { condition: "mdi:toggle-switch-variant-off" },
+    is_on: { condition: "mdi:toggle-switch-variant" },
+  },
+  temperature: { is_value: { condition: "mdi:thermometer" } },
+  text: { is_equal_to: { condition: "mdi:form-textbox" } },
+  timer: {
+    is_active: { condition: "mdi:timer" },
+    is_idle: { condition: "mdi:timer-off" },
+    is_paused: { condition: "mdi:timer-pause" },
+  },
+  todo: {
+    all_completed: { condition: "mdi:clipboard-check" },
+    incomplete: { condition: "mdi:clipboard-alert" },
+  },
+  update: {
+    is_available: { condition: "mdi:package-up" },
+    is_not_available: { condition: "mdi:package" },
+  },
+  vacuum: {
+    is_cleaning: { condition: "mdi:play" },
+    is_docked: { condition: "mdi:home-import-outline" },
+    is_encountering_an_error: { condition: "mdi:alert-circle-outline" },
+    is_paused: { condition: "mdi:pause" },
+    is_returning: { condition: "mdi:home-import-outline" },
+  },
+  valve: {
+    is_closed: { condition: "mdi:valve-closed" },
+    is_open: { condition: "mdi:valve-open" },
+  },
+  vibration: {
+    is_detected: { condition: "mdi:vibrate" },
+    is_not_detected: { condition: "mdi:vibrate-off" },
+  },
+  water_heater: {
+    is_off: { condition: "mdi:water-boiler-off" },
+    is_on: { condition: "mdi:water-boiler" },
+    is_operation_mode: { condition: "mdi:water-boiler" },
+    is_target_temperature: { condition: "mdi:thermometer" },
+  },
+  window: {
+    is_closed: { condition: "mdi:window-closed" },
+    is_open: { condition: "mdi:window-open" },
+  },
+  zone: {
+    in_zone: { condition: "mdi:map-marker-check" },
+    not_in_zone: { condition: "mdi:map-marker-remove" },
+    occupancy_is_detected: { condition: "mdi:account-group" },
+    occupancy_is_not_detected: { condition: "mdi:account-off" },
+  },
+};

demo/src/stubs/backup.ts

@@ -39,6 +39,7 @@ const backupInfo: BackupInfo = {
     },
   ],
   agent_errors: {},
+  agent_error_translations: {},
   last_attempted_automatic_backup: recent,
   last_completed_automatic_backup: recent,
   last_action_event: { manager_state: "idle" },

demo/src/stubs/entity_registry.ts

@@ -1,25 +1,244 @@
 import type {
+  EntityRegistryDisplayEntryResponse,
   EntityRegistryEntry,
   ExtEntityRegistryEntry,
+  UpdateEntityRegistryEntryResult,
 } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+let entries: EntityRegistryEntry[] = [];
+
+const newEntry = (
+  entry: Pick<EntityRegistryEntry, "entity_id" | "platform" | "unique_id">
+): EntityRegistryEntry => {
+  const now = Date.now() / 1000;
+  return {
+    config_entry_id: null,
+    config_subentry_id: null,
+    device_id: null,
+    area_id: null,
+    disabled_by: null,
+    id: entry.entity_id,
+    name: null,
+    icon: null,
+    labels: [],
+    categories: {},
+    hidden_by: null,
+    entity_category: null,
+    has_entity_name: false,
+    options: null,
+    created_at: now,
+    modified_at: now,
+    ...entry,
+  };
+};
+
+// The registry settings that the display registry holds. A display entry
+// without a registry name shows the name of its state.
+const displayFields = (entry: EntityRegistryEntry) => ({
+  ...(entry.name && { name: entry.name }),
+  icon: entry.icon ?? undefined,
+  area_id: entry.area_id ?? undefined,
+  labels: entry.labels,
+  hidden: entry.hidden_by !== null,
+});
+
+const extEntry = (entry: EntityRegistryEntry): ExtEntityRegistryEntry => ({
+  ...entry,
+  capabilities: {},
+  aliases: [],
+});
+
 export const mockEntityRegistry = (
   hass: MockHomeAssistant,
   data: EntityRegistryEntry[] = []
 ) => {
-  hass.mockWS("config/entity_registry/list", () => data);
+  entries = [...data];
+  // A new array, so subscribers see the registry changed after an update
+  hass.mockWS("config/entity_registry/list", () => [...entries]);
   hass.mockWS(
     "config/entity_registry/get_entries",
     (msg: { entity_ids: string[] }) => {
       const result: Record<string, ExtEntityRegistryEntry> = {};
       for (const entityId of msg.entity_ids) {
-        const entry = data.find((e) => e.entity_id === entityId);
+        const entry = entries.find((e) => e.entity_id === entityId);
         if (entry) {
-          result[entityId] = { ...entry, capabilities: {}, aliases: [] };
+          result[entityId] = extEntry(entry);
         }
       }
       return result;
     }
   );
+  hass.mockWS(
+    "config/entity_registry/update",
+    (
+      msg: Pick<
+        EntityRegistryEntry,
+        | "entity_id"
+        | "name"
+        | "icon"
+        | "area_id"
+        | "labels"
+        | "categories"
+        | "hidden_by"
+        | "disabled_by"
+      > & { new_entity_id?: string },
+      currentHass: MockHomeAssistant
+    ): UpdateEntityRegistryEntryResult => {
+      const {
+        entity_id: entityId,
+        new_entity_id: newEntityId,
+        ...updates
+      } = msg;
+      // Renaming would have to move the entity in every mock, so refuse it
+      // instead of reporting a rename that did not happen
+      if (newEntityId && newEntityId !== entityId) {
+        throw new Error("Changing the entity ID is not supported in the demo");
+      }
+      // The demo entities without an entry get one, like any core entity has
+      const entry = {
+        ...(entries.find((e) => e.entity_id === entityId) ??
+          newEntry({
+            entity_id: entityId,
+            platform: currentHass.entities[entityId]?.platform ?? "demo",
+            unique_id: entityId,
+          })),
+        ...Object.fromEntries(
+          Object.entries(updates).filter(([key]) => key !== "type")
+        ),
+        modified_at: Date.now() / 1000,
+      };
+      entries = [...entries.filter((e) => e.entity_id !== entityId), entry];
+      // Core updates the display registry too, only change what was updated
+      const display = currentHass.entities[entityId];
+      if (display) {
+        const fields = displayFields(entry);
+        currentHass.updateHass({
+          entities: {
+            ...currentHass.entities,
+            [entityId]: {
+              ...display,
+              ...("name" in updates && { name: fields.name }),
+              ...("icon" in updates && { icon: fields.icon }),
+              ...("area_id" in updates && { area_id: fields.area_id }),
+              ...("labels" in updates && { labels: fields.labels }),
+              ...("hidden_by" in updates && { hidden: fields.hidden }),
+            },
+          },
+        });
+      }
+      currentHass.mockEvent("entity_registry_updated");
+      return { entity_entry: extEntry(entry) };
+    }
+  );
 };
+
+// Entries of a platform that were replaced, so their settings are restored
+// when the entity comes back after switching demos
+const retiredEntries = new Map<string, EntityRegistryEntry>();
+
+// Replaces the entries of a platform, like core does for the entities of a
+// demo config
+export const setPlatformEntityRegistryEntries = (
+  hass: MockHomeAssistant,
+  platform: string,
+  platformEntries: Pick<EntityRegistryEntry, "entity_id" | "unique_id">[]
+) => {
+  for (const entry of entries) {
+    if (entry.platform === platform) {
+      retiredEntries.set(`${platform}.${entry.unique_id}`, entry);
+    }
+  }
+  const restored: EntityRegistryEntry[] = [];
+  const platformRegistryEntries = platformEntries.map((entry) => {
+    const retired = retiredEntries.get(`${platform}.${entry.unique_id}`);
+    if (!retired) {
+      return newEntry({ ...entry, platform });
+    }
+    const restoredEntry = { ...retired, entity_id: entry.entity_id };
+    restored.push(restoredEntry);
+    return restoredEntry;
+  });
+  entries = [
+    ...entries.filter((e) => e.platform !== platform),
+    ...platformRegistryEntries,
+  ];
+  // The display registry was rebuilt with the entities, restore its settings
+  if (restored.length) {
+    const entities = { ...hass.entities };
+    for (const entry of restored) {
+      if (entities[entry.entity_id]) {
+        entities[entry.entity_id] = {
+          ...entities[entry.entity_id],
+          ...displayFields(entry),
+        };
+      }
+    }
+    hass.updateHass({ entities });
+  }
+  hass.mockEvent("entity_registry_updated");
+};
+
+export const getEntityRegistryEntry = (entityId: string) =>
+  entries.find((e) => e.entity_id === entityId);
+
+export const removeEntityRegistryEntry = (
+  hass: MockHomeAssistant,
+  entityId: string
+) => {
+  entries = entries.filter((e) => e.entity_id !== entityId);
+  hass.mockEvent("entity_registry_updated");
+};
+
+// Adds an entry like core does when an integration creates an entity
+export const addEntityRegistryEntry = (
+  hass: MockHomeAssistant,
+  entry: Pick<EntityRegistryEntry, "entity_id" | "platform" | "unique_id">
+) => {
+  entries = [
+    ...entries.filter((e) => e.entity_id !== entry.entity_id),
+    newEntry(entry),
+  ];
+  hass.mockEvent("entity_registry_updated");
+};
+
+// The app refetches the display registry on entity_registry_updated events.
+// Answer with the current display registry, which the demo keeps in hass.
+export const mockEntityRegistryDisplay = (hass: MockHomeAssistant) =>
+  hass.mockWS(
+    "config/entity_registry/list_for_display",
+    (
+      _msg,
+      currentHass: MockHomeAssistant
+    ): EntityRegistryDisplayEntryResponse => {
+      const categories = [
+        ...new Set(
+          Object.values(currentHass.entities)
+            .map((entity) => entity.entity_category)
+            .filter((category) => category !== undefined)
+        ),
+      ];
+      return {
+        entities: Object.values(currentHass.entities).map((entity) => ({
+          ei: entity.entity_id,
+          di: entity.device_id,
+          ai: entity.area_id,
+          np: entity.next_name_part,
+          lb: entity.labels,
+          ec: entity.entity_category
+            ? categories.indexOf(entity.entity_category)
+            : undefined,
+          en: entity.name,
+          ic: entity.icon,
+          pl: entity.platform ?? "demo",
+          tk: entity.translation_key,
+          hb: entity.hidden,
+          dp: entity.display_precision,
+          hn: entity.has_entity_name,
+        })),
+        entity_categories: Object.fromEntries(
+          categories.map((category, index) => [index, category])
+        ),
+      };
+    }
+  );

demo/src/stubs/icons.ts

@@ -12,6 +12,17 @@ export const mockIcons = (hass: MockHomeAssistant) => {
       category: IconCategory;
       integration?: string;
     }) => {
+      if (category === "triggers" || category === "conditions") {
+        const { triggerIcons, conditionIcons } =
+          await import("./automation_platforms_icons");
+        const icons: Record<string, unknown> =
+          category === "triggers" ? triggerIcons : conditionIcons;
+        return {
+          resources: integration
+            ? { [integration]: icons[integration] ?? {} }
+            : icons,
+        };
+      }
       if (integration) {
         try {
           const response = await fetch(

demo/src/stubs/label_registry.ts

@@ -1,7 +1,14 @@
 import type { LabelRegistryEntry } from "../../../src/data/label/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+let labels: LabelRegistryEntry[] = [];
+
+export const getLabelIds = () => labels.map((label) => label.label_id);
+
 export const mockLabelRegistry = (
   hass: MockHomeAssistant,
   data: LabelRegistryEntry[] = []
-) => hass.mockWS("config/label_registry/list", () => data);
+) => {
+  labels = data;
+  hass.mockWS("config/label_registry/list", () => data);
+};

demo/src/stubs/map.ts

@@ -221,7 +221,14 @@ const personEntity = (person: DemoPerson, now: number): EntityInput => {
 const personHistory = (person: DemoPerson, now: number): EntityHistoryState[] =>
   person.timeline.map(([hoursAgo, state]) => {
     const time = (now - hoursAgo * HOUR) / 1000;
-    return { s: state, a: {}, lu: time, lc: time };
+    const zoneId =
+      state === "home" ? "home" : zones.find((zone) => zone.name === state)?.id;
+    return {
+      s: state,
+      a: { in_zones: zoneId ? [`zone.${zoneId}`] : [] },
+      lu: time,
+      lc: time,
+    };
   });
 
 export const mockMap = (hass: MockHomeAssistant) => {

demo/src/stubs/recorder.ts

@@ -60,7 +60,7 @@ const generateSumStatistics = (
   end: Date,
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
-  maxDiff: number
+  maxDiff: number | ((start: Date, end: Date) => number)
 ): StatisticValue[] => {
   const statistics: StatisticValue[] = [];
   let currentDate = new Date(start);
@@ -69,7 +69,9 @@ const generateSumStatistics = (
   const now = new Date();
   while (end > currentDate && currentDate < now) {
     const nextDate = getNextDate(currentDate, period);
-    const add = Math.random() * maxDiff;
+    const bound =
+      typeof maxDiff === "function" ? maxDiff(currentDate, nextDate) : maxDiff;
+    const add = Math.random() * bound;
     sum += add;
     statistics.push({
       start: currentDate.getTime(),
@@ -136,6 +138,15 @@ const statisticsFunctions: Record<
     period: "5minute" | "hour" | "day" | "month"
   ) => StatisticValue[]
 > = {
+  "sensor.energy_water": (_id, start, end, period = "hour") =>
+    generateSumStatistics(
+      start,
+      end,
+      period,
+      4000,
+      (bucketStart, bucketEnd) =>
+        (20 * (bucketEnd.getTime() - bucketStart.getTime())) / 3600000
+    ),
   "sensor.energy_consumption_tarif_1": (
     _id: string,
     start: Date,
@@ -301,6 +312,11 @@ const statisticsFunctions: Record<
     return [...morning, ...production, ...evening, ...rest];
   },
 };
+// Prices are per source unit; water uses litres (4 currency units per m³).
+const derivedCosts: Record<string, { source: string; price: number }> = {
+  "sensor.energy_water_cost": { source: "sensor.energy_water", price: 0.004 },
+};
+
 export const mockRecorder = (mockHass: MockHomeAssistant) => {
   mockHass.mockWS(
     "recorder/get_statistics_metadata",
@@ -317,10 +333,23 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
       const end = end_time ? new Date(end_time) : new Date();
 
       const statistics: Record<string, StatisticValue[]> = {};
+      const cache: Record<string, StatisticValue[]> = {};
+      const getStats = (id: string) => {
+        cache[id] ??= statisticsFunctions[id](id, start, end, period);
+        return cache[id];
+      };
 
       statistic_ids.forEach((id: string) => {
-        if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end, period);
+        if (id in derivedCosts) {
+          const { source, price } = derivedCosts[id];
+          let cost = 0;
+          statistics[id] = getStats(source).map((statistic) => {
+            const change = statistic.change! * price;
+            cost += change;
+            return { ...statistic, change, state: cost, sum: cost };
+          });
+        } else if (id in statisticsFunctions) {
+          statistics[id] = getStats(id);
         } else {
           const entityState = hass.states[id];
           const state = entityState ? Number(entityState.state) : 1;

gallery/sidebar.js

@@ -40,6 +40,7 @@ export default [
           "ha-select-box",
           "ha-input",
           "ha-textarea",
+          "ha-picker-combo-box",
         ],
       },
       {
@@ -102,6 +103,7 @@ export default [
           "entity-button-card",
           "entity-filter-card",
           "glance-card",
+          "sensor-card",
           "tile-card",
           "area-card",
         ],

gallery/src/components/demo-cards.ts

@@ -1,6 +1,5 @@
 import { html, css, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
 import "./demo-card";
@@ -18,9 +17,7 @@ class DemoCards extends LitElement {
   render() {
     return html`
       <ha-demo-options>
-        <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
-        </ha-formfield>
+        <ha-switch @change=${this._showConfigToggled}>Show config</ha-switch>
       </ha-demo-options>
       <div id="container">
         <div class="cards">
@@ -51,7 +48,7 @@ class DemoCards extends LitElement {
     demo-card {
       margin: 16px 16px 32px;
     }
-    ha-formfield {
+    ha-switch {
       margin-right: 16px;
     }
     #container {

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

@@ -1,6 +1,5 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import type { HomeAssistant } from "../../../src/types";
 import "../ha-demo-options";
@@ -17,9 +16,7 @@ class DemoMoreInfos extends LitElement {
   render() {
     return html`
       <ha-demo-options>
-        <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
-        </ha-formfield>
+        <ha-switch @change=${this._showConfigToggled}>Show config</ha-switch>
       </ha-demo-options>
       <div id="container">
         <div class="cards">
@@ -49,7 +46,7 @@ class DemoMoreInfos extends LitElement {
     demo-more-info {
       margin: var(--ha-space-4) var(--ha-space-4) var(--ha-space-8);
     }
-    ha-formfield {
+    ha-switch {
       margin-right: var(--ha-space-4);
     }
   `;

gallery/src/components/gallery-settings.ts

@@ -6,12 +6,10 @@ import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
 import type { HaSwitch } from "../../../src/components/ha-switch";
 import "../../../src/components/ha-theme-settings";
-import type { HomeAssistant, ThemeSettings } from "../../../src/types";
+import type { ThemeSettings } from "../../../src/types";
 
 @customElement("gallery-settings")
 class GallerySettings extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public themeSettings!: ThemeSettings;
 
   @property({ type: Boolean }) public narrow = false;
@@ -26,7 +24,6 @@ class GallerySettings extends LitElement {
             Configure how the gallery renders component previews and examples.
           </div>
           <ha-theme-settings
-            .hass=${this.hass}
             .selectedTheme=${this.themeSettings}
             .narrow=${this.narrow}
             .heading=${"Theme"}

gallery/src/data/media_players.ts

@@ -151,6 +151,16 @@ export const createMediaPlayerEntities = () => [
       supported_features: 289,
     },
   },
+  {
+    entity_id: "media_player.theater_off_assumed",
+    state: "off",
+    attributes: {
+      friendly_name: "TV Off (assumed state, cannot be switched on)",
+      assumed_state: true,
+      // Off + Next + Pause
+      supported_features: 289,
+    },
+  },
   {
     entity_id: "media_player.theater_on_static",
     state: "on",

gallery/src/ha-gallery.ts

@@ -9,6 +9,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import type { HASSDomEvent } from "../../src/common/dom/fire_event";
+import { listenMediaQuery } from "../../src/common/dom/media_query";
 import { computeEntityNameDisplayWithoutContext } from "../../src/common/entity/compute_entity_name_display";
 import { setDirectionStyles } from "../../src/common/util/compute_rtl";
 import "../../src/components/ha-button";
@@ -31,6 +32,7 @@ import {
   floorsContext,
   formattersContext,
   internationalizationContext,
+  reducedMotionContext,
   registriesContext,
   servicesContext,
   statesContext,
@@ -161,6 +163,13 @@ class HaGallery extends LitElement {
     floors: new ContextProvider(this, { context: floorsContext }),
   };
 
+  private _reducedMotionProvider = new ContextProvider(this, {
+    context: reducedMotionContext,
+    initialValue: false,
+  });
+
+  private _unsubReducedMotion?: () => void;
+
   protected willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Refresh the fallback contexts before each render so theme/page changes in
@@ -233,7 +242,6 @@ class HaGallery extends LitElement {
               ${
                 isSettingsPage
                   ? html`<gallery-settings
-                      .hass=${this._galleryHass}
                       .themeSettings=${this._themeSettings}
                       .narrow=${this._narrow}
                       .rtl=${this._rtl}
@@ -267,6 +275,10 @@ class HaGallery extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     mql.addEventListener("change", this._systemDarkChanged);
+    this._unsubReducedMotion = listenMediaQuery(
+      "(prefers-reduced-motion: reduce)",
+      (matches) => this._reducedMotionProvider.setValue(matches)
+    );
   }
 
   firstUpdated(changedProps: PropertyValues<this>) {
@@ -300,6 +312,8 @@ class HaGallery extends LitElement {
     super.disconnectedCallback();
     mql.removeEventListener("change", this._systemDarkChanged);
     window.removeEventListener("hashchange", this._hashChanged);
+    this._unsubReducedMotion?.();
+    this._unsubReducedMotion = undefined;
   }
 
   private _hashChanged = () => {

gallery/src/html/index.html.template

@@ -12,6 +12,11 @@
       <script type="module" src="<%= entry %>"></script>
     <% } %>
     <style>
+      html {
+        /* Prevent iOS Safari from inflating text when rotating to landscape */
+        -webkit-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+      }
       body {
         font-family: Roboto, Noto, sans-serif;
         margin: 0;

gallery/src/pages/automation/editor-action.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-formfield";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
@@ -64,13 +63,12 @@ class DemoHaAutomationEditorAction extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
+        <ha-switch
+          .name=${"disabled"}
+          .checked=${this._disabled}
+          @change=${this._handleOptionChange}
+          >Disabled</ha-switch
+        >
       </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
@@ -111,7 +109,7 @@ class DemoHaAutomationEditorAction extends LitElement {
       max-width: 800px;
       margin: 16px auto;
     }
-    .options ha-formfield {
+    .options ha-switch {
       margin-right: 16px;
     }
   `;

gallery/src/pages/automation/editor-condition.ts

@@ -5,7 +5,6 @@ import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import "../../../../src/components/ha-formfield";
 import type { ConditionWithShorthand } from "../../../../src/data/automation";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
@@ -106,13 +105,12 @@ export class DemoAutomationEditorCondition extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
+        <ha-switch
+          .name=${"disabled"}
+          .checked=${this._disabled}
+          @change=${this._handleOptionChange}
+          >Disabled</ha-switch
+        >
       </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
@@ -153,7 +151,7 @@ export class DemoAutomationEditorCondition extends LitElement {
       max-width: 800px;
       margin: 16px auto;
     }
-    .options ha-formfield {
+    .options ha-switch {
       margin-right: 16px;
     }
   `;

gallery/src/pages/automation/editor-trigger.ts

@@ -8,7 +8,6 @@ import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { mockTags } from "../../../../demo/src/stubs/tags";
-import "../../../../src/components/ha-formfield";
 import type { Trigger } from "../../../../src/data/automation";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
@@ -146,13 +145,12 @@ export class DemoAutomationEditorTrigger extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="options">
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
+        <ha-switch
+          .name=${"disabled"}
+          .checked=${this._disabled}
+          @change=${this._handleOptionChange}
+          >Disabled</ha-switch
+        >
       </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
@@ -193,7 +191,7 @@ export class DemoAutomationEditorTrigger extends LitElement {
       max-width: 800px;
       margin: 16px auto;
     }
-    .options ha-formfield {
+    .options ha-switch {
       margin-right: 16px;
     }
   `;

gallery/src/pages/components/ha-adaptive-dialog.ts

@@ -9,7 +9,6 @@ import "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-icon-button";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
 
 const SCHEMA: HaFormSchema[] = [
   { type: "string", name: "Name", default: "", autofocus: true },
@@ -31,11 +30,8 @@ type DialogType =
 export class DemoHaAdaptiveDialog extends LitElement {
   @state() private _openDialog: DialogType = false;
 
-  @state() private _hass?: HomeAssistant;
-
   protected firstUpdated() {
-    const hass = provideHass(this);
-    this._hass = hass;
+    provideHass(this);
   }
 
   protected render() {
@@ -89,7 +85,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-card>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "basic"}
           header-title="Basic adaptive dialog"
           @closed=${this._handleClosed}
@@ -98,7 +93,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "basic-subtitle-below"}
           header-title="Adaptive dialog with subtitle"
           header-subtitle="This is an adaptive dialog with a subtitle below"
@@ -108,7 +102,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "basic-subtitle-above"}
           header-title="Adaptive dialog with subtitle above"
           header-subtitle="This is an adaptive dialog with a subtitle above"
@@ -119,7 +112,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "small"}
           width="small"
           header-title="Small adaptive dialog"
@@ -129,7 +121,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "large"}
           width="large"
           header-title="Large adaptive dialog"
@@ -139,7 +130,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "form"}
           header-title="Adaptive dialog with form"
           header-subtitle="This is an adaptive dialog with a form"
@@ -163,7 +153,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .allowModeChange=${this._openDialog === "allow-mode-change"}
           header-title="Adaptive dialog with allow mode change"
           header-subtitle="Resize the window while this dialog is open"
@@ -176,7 +165,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
-          .hass=${this._hass}
           .open=${this._openDialog === "actions"}
           header-title="Adaptive dialog with actions"
           header-subtitle="This is an adaptive dialog with header actions"
@@ -395,7 +383,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         <h3>Example usage</h3>
 
         <pre><code>&lt;ha-adaptive-dialog
-  .hass=\${this.hass}
   open
   header-title="Dialog title"
   header-subtitle="Dialog subtitle"
@@ -607,7 +594,7 @@ export class DemoHaAdaptiveDialog extends LitElement {
 
         <p>Example:</p>
 
-        <pre><code>&lt;ha-adaptive-dialog .hass=\${this.hass} open&gt;
+        <pre><code>&lt;ha-adaptive-dialog open&gt;
   &lt;ha-form autofocus .schema=\${schema}&gt;&lt;/ha-form&gt;
 &lt;/ha-adaptive-dialog&gt;</code></pre>
       </div>

gallery/src/pages/components/ha-adaptive-popover.ts

@@ -9,7 +9,6 @@ import "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-icon-button";
 import type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 
 const SCHEMA: HaFormSchema[] = [
@@ -23,12 +22,10 @@ type PopoverType = false | "basic" | "small" | "large" | "form" | "actions";
 export class DemoHaAdaptivePopover extends LitElement {
   @state() private _openPopover: PopoverType = false;
 
-  @state() private _hass?: HomeAssistant;
-
   @state() private _dialogAnchor?: HTMLElement;
 
   protected firstUpdated() {
-    this._hass = provideHass(this);
+    provideHass(this);
   }
 
   protected render() {
@@ -72,7 +69,6 @@ export class DemoHaAdaptivePopover extends LitElement {
         </ha-card>
 
         <ha-adaptive-popover
-          .hass=${this._hass}
           .open=${this._openPopover === "basic"}
           .dialogAnchor=${this._dialogAnchor}
           header-title="Basic adaptive popover"
@@ -86,7 +82,6 @@ export class DemoHaAdaptivePopover extends LitElement {
         </ha-adaptive-popover>
 
         <ha-adaptive-popover
-          .hass=${this._hass}
           .open=${this._openPopover === "small"}
           .dialogAnchor=${this._dialogAnchor}
           width="small"
@@ -97,7 +92,6 @@ export class DemoHaAdaptivePopover extends LitElement {
         </ha-adaptive-popover>
 
         <ha-adaptive-popover
-          .hass=${this._hass}
           .open=${this._openPopover === "large"}
           .dialogAnchor=${this._dialogAnchor}
           width="large"
@@ -108,7 +102,6 @@ export class DemoHaAdaptivePopover extends LitElement {
         </ha-adaptive-popover>
 
         <ha-adaptive-popover
-          .hass=${this._hass}
           .open=${this._openPopover === "form"}
           .dialogAnchor=${this._dialogAnchor}
           header-title="Adaptive popover with form"
@@ -133,7 +126,6 @@ export class DemoHaAdaptivePopover extends LitElement {
         </ha-adaptive-popover>
 
         <ha-adaptive-popover
-          .hass=${this._hass}
           .open=${this._openPopover === "actions"}
           .dialogAnchor=${this._dialogAnchor}
           header-title="Adaptive popover with actions"

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

@@ -51,11 +51,12 @@ The badge component is a small component that displays a number or status inform
 
 **Properties/Attributes**
 
-| Name     | Type                    | Default     | Description                                                  |
-| -------- | ----------------------- | ----------- | ------------------------------------------------------------ |
-| type     | `"badge"` or `"button"` | `"badge"`   | If it's button it shows a ripple effect                      |
-| label    | string                  | `undefined` | Text label for the badge, only visible if `iconOnly = false` |
-| iconOnly | boolean                 | `false`     | Only show label                                              |
+| Name            | Type                    | Default     | Description                                                   |
+| --------------- | ----------------------- | ----------- | ------------------------------------------------------------- |
+| type            | `"badge"` or `"button"` | `"badge"`   | If it's button it shows a ripple effect                       |
+| label           | string                  | `undefined` | Text label for the badge, only visible if `iconOnly = false`  |
+| iconOnly        | boolean                 | `false`     | Only show label                                               |
+| accessibleLabel | string                  | `undefined` | Accessible name of the button, only used if `iconOnly = true` |
 
 **CSS Custom Properties**
 

gallery/src/pages/components/ha-picker-combo-box.markdown

@@ -0,0 +1,91 @@
+---
+title: Picker combo box
+---
+
+# Picker combo box `<ha-picker-combo-box>`
+
+The searchable list used inside pickers. `ha-generic-picker` renders it in a
+popover or dialog; entity, area, floor, label and device pickers all reach it
+that way. It is shown directly here so the list and its keyboard model can be
+inspected on their own.
+
+It takes no `hass`. Items come from a `getItems` callback and locale comes from
+`internationalizationContext`.
+
+## Two render paths
+
+The item count picks the renderer, and the two behave differently enough that
+list changes need checking against both.
+
+| Items                                       | Renderer          | Rows in the DOM       |
+| ------------------------------------------- | ----------------- | --------------------- |
+| 12 or fewer rendered rows, no sections      | `repeat()`        | all of them           |
+| more than 12 rendered rows, or any sections | `lit-virtualizer` | only the visible ones |
+
+The threshold is `MAX_PLAIN_LIST_ITEMS`, counted against the initial rendered
+row set, including additional items and dialog padding. Filtering does not switch renderers.
+
+## Two highlights
+
+The list has two row backgrounds.
+
+- **`selected`** — the row matching the `value` property, rendered onto its
+  `ha-list-item-option`.
+- **`active`** — the keyboard cursor, and the row <kbd>Enter</kbd> picks. The
+  list runs in `virtual-focus` mode: DOM focus stays in the search field, and
+  the list owns the active row, skips disabled rows and section titles, and
+  scrolls it into view.
+
+## Keyboard
+
+| Key                                   | Behavior                                              |
+| ------------------------------------- | ----------------------------------------------------- |
+| <kbd>↑</kbd> <kbd>↓</kbd>             | Move the cursor                                       |
+| <kbd>Home</kbd> <kbd>End</kbd>        | Jump to the first or last item                        |
+| <kbd>PageUp</kbd> <kbd>PageDown</kbd> | Move the cursor a page                                |
+| <kbd>Enter</kbd>                      | Pick the row under the cursor                         |
+| <kbd>Ctrl/⌘</kbd> + <kbd>Enter</kbd>  | Pick it and report `newTab: true` in `index-selected` |
+
+With no cursor yet, <kbd>↓</kbd> and <kbd>Enter</kbd> start from the `value`
+row, or from the top match while searching. With one item in the list,
+<kbd>Enter</kbd> picks it whether or not the cursor has moved.
+
+## Implementation
+
+Without `sections`, the component filters the items from `getItems` itself as the
+user types, so `getItems` can ignore its search argument. With sections,
+`getItems` receives the search string and selected section and must return the
+matching rows.
+
+The host is `display: flex` with `flex: 1` and expects a parent with a bounded
+height. In the app that bound comes from the popover; embedding it directly
+means supplying one.
+
+### Properties/Attributes
+
+| Name               | Type               | Default   | Description                                                                                                                             |
+| ------------------ | ------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| getItems           | Function           | -         | Required. Returns the items, optionally filtered by search string and section.                                                          |
+| getAdditionalItems | Function           | -         | Extra items appended to search results, for example "add new".                                                                          |
+| value              | String             | -         | Id of the current item. Marks its row `selected`, and the virtualized list opens with that row in view.                                 |
+| label              | String             | -         | Placeholder for the search field. Falls back to a localized "Search".                                                                   |
+| mode               | "popover"/"dialog" | "popover" | Adjusts padding for the surface the list sits in.                                                                                       |
+| shown              | Boolean            | true      | Whether the surface finished animating. `ha-generic-picker` sets it so the virtualizer does not measure rows mid-animation.             |
+| sections           | Array              | -         | Filter chips. Section headers are plain strings returned by `getItems`, and the sticky title shows the one above the first visible row. |
+| selectedSection    | String             | -         | Section filter selected when the list is initialized.                                                                                   |
+| searchKeys         | Array              | -         | Fuse weighted keys for fuzzy search.                                                                                                    |
+| searchFn           | Function           | -         | Post-processes filtered results.                                                                                                        |
+| rowRenderer        | Function           | -         | Replaces the default row template.                                                                                                      |
+| allowCustomValue   | Boolean            | false     | Offers the typed string as an item.                                                                                                     |
+| customValueLabel   | String             | -         | Label for that custom item.                                                                                                             |
+| notFoundLabel      | String/Function    | -         | Shown when a search matches nothing.                                                                                                    |
+| emptyLabel         | String             | -         | Shown when there are no items at all.                                                                                                   |
+| noSort             | Boolean            | false     | Keeps the order `getItems` returned.                                                                                                    |
+| clearable          | Boolean            | false     | Adjusts search field padding for a clear affordance.                                                                                    |
+
+### Events
+
+| Event            | Detail                    | Description                                                    |
+| ---------------- | ------------------------- | -------------------------------------------------------------- |
+| `value-changed`  | `{ value }`               | An item was picked.                                            |
+| `index-selected` | `{ index, item, newTab }` | Which row was picked, and whether it should open in a new tab. |

gallery/src/pages/components/ha-picker-combo-box.ts

@@ -0,0 +1,273 @@
+import { ContextProvider } from "@lit/context";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-picker-combo-box";
+import type { PickerComboBoxItem } from "../../../../src/components/ha-picker-combo-box";
+import { internationalizationContext } from "../../../../src/data/context";
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../../../src/data/translation";
+import type {
+  HomeAssistantInternationalization,
+  ValueChangedEvent,
+} from "../../../../src/types";
+import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
+
+const LOCALIZE_KEYS: Record<string, string> = {
+  "ui.common.search": "Search",
+  "ui.components.combo-box.no_match": "No matching items found",
+  "ui.components.combo-box.no_items": "No items available",
+};
+
+const localize = (key: string) => LOCALIZE_KEYS[key] ?? key;
+
+const DEMO_I18N: HomeAssistantInternationalization = {
+  localize,
+  language: "en",
+  selectedLanguage: null,
+  locale: {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.language,
+    date_format: DateFormat.language,
+    first_weekday: FirstWeekday.language,
+    time_zone: TimeZone.local,
+  },
+  translationMetadata: { fragments: [], translations: {} },
+  loadBackendTranslation: async () => localize,
+  loadFragmentTranslation: async () => localize,
+};
+
+const PLAIN_ITEMS: PickerComboBoxItem[] = [
+  { id: "light.desk", primary: "Desk", secondary: "Office" },
+  { id: "light.dining_table", primary: "Dining table", secondary: "Kitchen" },
+  { id: "light.doorway", primary: "Doorway", secondary: "Hallway" },
+  { id: "light.hallway", primary: "Hallway", secondary: "Hallway" },
+  {
+    id: "light.kitchen_counter",
+    primary: "Kitchen counter",
+    secondary: "Kitchen",
+  },
+  { id: "light.porch", primary: "Porch", secondary: "Outside" },
+  { id: "light.reading_lamp", primary: "Reading lamp", secondary: "Bedroom" },
+  {
+    id: "light.shed",
+    primary: "Shed (disabled)",
+    secondary: "Outside",
+    disabled: true,
+  },
+  { id: "light.workbench", primary: "Workbench", secondary: "Garage" },
+];
+
+const AREAS = [
+  "Attic",
+  "Basement",
+  "Bedroom",
+  "Dining room",
+  "Garage",
+  "Hallway",
+  "Kitchen",
+  "Living room",
+  "Office",
+  "Outside",
+];
+
+const FIXTURES = [
+  "Ceiling",
+  "Corner lamp",
+  "Cupboard",
+  "Desk lamp",
+  "Downlight",
+  "Floor lamp",
+  "Shelf",
+  "Spotlight",
+  "Strip",
+  "Wall sconce",
+];
+
+const VIRTUALIZED_ITEMS: PickerComboBoxItem[] = AREAS.flatMap((area, a) =>
+  FIXTURES.flatMap((fixture) =>
+    [1, 2].map((offset) => {
+      const n = a * 2 + offset;
+      return {
+        id: `light.${fixture.toLowerCase().replace(/ /g, "_")}_${n}`,
+        primary: `${fixture} ${n}`,
+        secondary: area,
+      };
+    })
+  )
+);
+
+@customElement("demo-components-ha-picker-combo-box")
+export class DemoHaPickerComboBox extends LitElement {
+  @state() private _plainValue?: string;
+
+  @state() private _virtualizedValue?: string;
+
+  @state() private _preselectedValue = "light.spotlight_13";
+
+  constructor() {
+    super();
+    // Provides internationalizationContext for ha-picker-combo-box and ha-input-search
+    new ContextProvider(this, {
+      context: internationalizationContext,
+      initialValue: DEMO_I18N,
+    });
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-theme-comparison>
+        ${THEME_COMPARISON_PANELS.map(
+          ({ slot }) => html`
+            <div slot=${slot} class="panel-content">
+              <ha-card header="Plain list (9 items)">
+                <div class="card-content">
+                  <p class="note">
+                    At or below 12 items the list renders with
+                    <code>repeat()</code>, so every row is in the DOM. One item
+                    is disabled, so neither a click nor <kbd>Enter</kbd>
+                    picks it.
+                  </p>
+                  <div class="picker">
+                    <ha-picker-combo-box
+                      .getItems=${this._getPlainItems}
+                      .value=${this._plainValue}
+                      @value-changed=${this._plainValueChanged}
+                    ></ha-picker-combo-box>
+                  </div>
+                  <p class="value">
+                    Picked: <code>${this._plainValue ?? "—"}</code>
+                  </p>
+                </div>
+              </ha-card>
+
+              <ha-card header="Virtualized list (200 items)">
+                <div class="card-content">
+                  <p class="note">
+                    Above 12 items the list switches to
+                    <code>lit-virtualizer</code> and only the visible rows
+                    exist.
+                  </p>
+                  <div class="picker">
+                    <ha-picker-combo-box
+                      .getItems=${this._getVirtualizedItems}
+                      .value=${this._virtualizedValue}
+                      @value-changed=${this._virtualizedValueChanged}
+                    ></ha-picker-combo-box>
+                  </div>
+                  <p class="value">
+                    Picked: <code>${this._virtualizedValue ?? "—"}</code>
+                  </p>
+                </div>
+              </ha-card>
+
+              <ha-card header="Empty">
+                <div class="card-content">
+                  <p class="note">
+                    With no items the list shows
+                    <code>emptyLabel</code>, or a localized fallback. Searching
+                    a non-empty list that matches nothing shows
+                    <code>notFoundLabel</code> instead.
+                  </p>
+                  <div class="picker">
+                    <ha-picker-combo-box
+                      .getItems=${this._getNoItems}
+                    ></ha-picker-combo-box>
+                  </div>
+                </div>
+              </ha-card>
+
+              <ha-card header="With a current value">
+                <div class="card-content">
+                  <p class="note">
+                    A set <code>value</code> marks its row
+                    <code>selected</code>. The keyboard cursor is a separate
+                    highlight, and <kbd>↓</kbd> starts it on this row.
+                  </p>
+                  <div class="picker">
+                    <ha-picker-combo-box
+                      .getItems=${this._getVirtualizedItems}
+                      .value=${this._preselectedValue}
+                      @value-changed=${this._preselectedValueChanged}
+                    ></ha-picker-combo-box>
+                  </div>
+                  <p class="value">
+                    Current: <code>${this._preselectedValue}</code>
+                  </p>
+                </div>
+              </ha-card>
+            </div>
+          `
+        )}
+      </demo-theme-comparison>
+    `;
+  }
+
+  private _getPlainItems = () => PLAIN_ITEMS;
+
+  private _getVirtualizedItems = () => VIRTUALIZED_ITEMS;
+
+  private _getNoItems = (): PickerComboBoxItem[] => [];
+
+  private _plainValueChanged(ev: ValueChangedEvent<string>) {
+    this._plainValue = ev.detail.value;
+  }
+
+  private _virtualizedValueChanged(ev: ValueChangedEvent<string>) {
+    this._virtualizedValue = ev.detail.value;
+  }
+
+  private _preselectedValueChanged(ev: ValueChangedEvent<string>) {
+    this._preselectedValue = ev.detail.value;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .panel-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-4);
+    }
+    ha-card {
+      margin: 0;
+      width: 100%;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-2);
+    }
+    .note {
+      margin: 0;
+      color: var(--secondary-text-color);
+      font-size: var(--ha-font-size-s);
+    }
+    .picker {
+      display: flex;
+      flex-direction: column;
+      max-height: 320px;
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-border-radius-md);
+      overflow: hidden;
+    }
+    .value {
+      margin: 0;
+      font-size: var(--ha-font-size-s);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-picker-combo-box": DemoHaPickerComboBox;
+  }
+}

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

@@ -15,13 +15,13 @@ import {
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
 import { StatisticMeanType } from "../../../../src/data/recorder";
+import { resolveSelectorContext } from "../../../../src/data/selector";
 import type { SerialPort } from "../../../../src/data/usb";
 import {
   showDialog,
@@ -679,6 +679,77 @@ const SCHEMAS: {
       },
     },
   },
+  {
+    name: "Unit of measurement",
+    input: {
+      sensor_device_class: {
+        name: "Device class",
+        selector: { device_class: { domain: "sensor" } },
+      },
+      sensor_state_class: {
+        name: "State class",
+        selector: { state_class: {} },
+      },
+      unit_linked: {
+        name: "Unit of the device class and state class above",
+        selector: {
+          unit_of_measurement: {
+            context: {
+              filter_device_class: "sensor_device_class",
+              filter_state_class: "sensor_state_class",
+            },
+          },
+        },
+      },
+      unit: {
+        name: "Any unit (custom allowed)",
+        selector: { unit_of_measurement: {} },
+      },
+      unit_temperature: {
+        name: "Temperature",
+        selector: { unit_of_measurement: { device_classes: ["temperature"] } },
+      },
+      unit_battery_humidity: {
+        name: "Battery or humidity",
+        selector: {
+          unit_of_measurement: { device_classes: ["battery", "humidity"] },
+        },
+      },
+      unit_aqi: {
+        name: "Air quality index (no unit)",
+        selector: { unit_of_measurement: { device_classes: ["aqi"] } },
+      },
+      unit_enum: {
+        name: "Enum (no unit)",
+        selector: { unit_of_measurement: { device_classes: ["enum"] } },
+      },
+      unit_timestamp: {
+        name: "Timestamp (no unit)",
+        selector: { unit_of_measurement: { device_classes: ["timestamp"] } },
+      },
+      unit_uptime: {
+        name: "Uptime (no unit)",
+        selector: { unit_of_measurement: { device_classes: ["uptime"] } },
+      },
+      unit_monetary: {
+        name: "Monetary (custom unit)",
+        selector: { unit_of_measurement: { device_classes: ["monetary"] } },
+      },
+      unit_angle: {
+        name: "Measurement angle",
+        selector: {
+          unit_of_measurement: { state_classes: ["measurement_angle"] },
+        },
+      },
+      unit_context: {
+        name: "Temperature or humidity, narrowed by context to humidity",
+        selector: {
+          unit_of_measurement: { device_classes: ["temperature", "humidity"] },
+        },
+        context: { filter_device_class: "humidity" },
+      },
+    },
+  },
   {
     name: "Multiples",
     input: {
@@ -991,34 +1062,30 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
   protected render(): TemplateResult {
     return html`
       <div class="options">
-        <ha-formfield label="Labels">
-          <ha-switch
-            .name=${"label"}
-            .checked=${this._label}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Required">
-          <ha-switch
-            .name=${"required"}
-            .checked=${this._required}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Helper text">
-          <ha-switch
-            .name=${"helper"}
-            .checked=${this._helper}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
+        <ha-switch
+          .name=${"label"}
+          .checked=${this._label}
+          @change=${this._handleOptionChange}
+          >Labels</ha-switch
+        >
+        <ha-switch
+          .name=${"required"}
+          .checked=${this._required}
+          @change=${this._handleOptionChange}
+          >Required</ha-switch
+        >
+        <ha-switch
+          .name=${"disabled"}
+          .checked=${this._disabled}
+          @change=${this._handleOptionChange}
+          >Disabled</ha-switch
+        >
+        <ha-switch
+          .name=${"helper"}
+          .checked=${this._helper}
+          @change=${this._handleOptionChange}
+          >Helper text</ha-switch
+        >
       </div>
       ${SCHEMAS.map((info, idx) => {
         const data = this.data[idx];
@@ -1039,7 +1106,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}
-                      .context=${value!.context}
+                      .context=${this._context(value!, data)}
                       .key=${key}
                       .label=${this._label ? value!.name : undefined}
                       .value=${data[key] ?? value!.default}
@@ -1059,6 +1126,19 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     `;
   }
 
+  private _context(
+    input: (typeof SCHEMAS)[number]["input"][string],
+    data: Record<string, unknown>
+  ): Record<string, unknown> | undefined {
+    const selectorContext = input?.selector
+      ? resolveSelectorContext(input.selector, data)
+      : undefined;
+    if (!selectorContext) {
+      return input?.context;
+    }
+    return { ...input?.context, ...selectorContext };
+  }
+
   private _handleValueChanged(ev) {
     const idx = ev.target.sampleIdx;
     this.data[idx] = {
@@ -1077,7 +1157,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
       max-width: 800px;
       margin: 16px auto;
     }
-    .options ha-formfield {
+    .options ha-switch {
       margin-right: 16px;
     }
   `;

gallery/src/pages/lovelace/media-control-card.ts

@@ -102,6 +102,13 @@ const CONFIGS = [
       entity: "media_player.theater_off_static",
     },
   },
+  {
+    heading: "Player Off (assumed state, cannot be switched on)",
+    config: {
+      type: "media-control",
+      entity: "media_player.theater_off_assumed",
+    },
+  },
   {
     heading: "Player On (cannot be switched off)",
     config: {

gallery/src/pages/lovelace/sensor-card.markdown

@@ -0,0 +1,3 @@
+---
+title: Sensor card
+---

gallery/src/pages/lovelace/sensor-card.ts

@@ -0,0 +1,147 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, query } from "lit/decorators";
+import { mockHistory } from "../../../../demo/src/stubs/history";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { SensorCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type { DemoCardConfig } from "../../components/demo-card";
+import "../../components/demo-cards";
+
+const ENTITIES = [
+  {
+    entity_id: "sensor.outside_temperature",
+    state: "15.6",
+    attributes: {
+      friendly_name: "Outside temperature",
+      device_class: "temperature",
+      unit_of_measurement: "°C",
+    },
+  },
+  {
+    entity_id: "sensor.outside_humidity",
+    state: "54",
+    attributes: {
+      friendly_name: "Outside humidity",
+      device_class: "humidity",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.phone_battery",
+    state: "18",
+    attributes: {
+      friendly_name: "Phone battery",
+      device_class: "battery",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.not_working",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Not working",
+    },
+  },
+];
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: {
+      type: "sensor",
+      entity: "sensor.outside_temperature",
+    },
+  },
+  {
+    heading: "With line graph",
+    config: {
+      type: "sensor",
+      entity: "sensor.outside_temperature",
+      graph: "line",
+    },
+  },
+  {
+    heading: "With graph detail and hours to show",
+    config: {
+      type: "sensor",
+      entity: "sensor.outside_humidity",
+      graph: "line",
+      detail: 2,
+      hours_to_show: 6,
+    },
+  },
+  {
+    heading: "With state color",
+    config: {
+      type: "sensor",
+      entity: "sensor.phone_battery",
+      icon: "mdi:battery-20",
+      graph: "line",
+      state_color: true,
+    },
+  },
+  {
+    heading: "With name, icon and unit",
+    config: {
+      type: "sensor",
+      entity: "sensor.outside_humidity",
+      name: "Humidity",
+      icon: "mdi:water",
+      unit: "pct",
+    },
+  },
+  {
+    heading: "Without tap action (not focusable)",
+    config: {
+      type: "sensor",
+      entity: "sensor.outside_temperature",
+      tap_action: { action: "none" },
+    },
+  },
+  {
+    heading: "Unavailable",
+    config: {
+      type: "sensor",
+      entity: "sensor.not_working",
+    },
+  },
+  {
+    heading: "Invalid entity",
+    config: {
+      type: "sensor",
+      entity: "sensor.invalid_entity",
+    },
+  },
+] satisfies DemoCardConfig<SensorCardConfig>[];
+
+@customElement("demo-lovelace-sensor-card")
+class DemoSensorCard extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.updateHass({
+      config: {
+        ...hass.config,
+        components: [...hass.config.components, "history"],
+      },
+    });
+    hass.addEntities(ENTITIES);
+    mockIcons(hass);
+    mockHistory(hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-lovelace-sensor-card": DemoSensorCard;
+  }
+}

gallery/src/pages/misc/cloud-account.ts

@@ -1,7 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-select";
 import type { HaSelectSelectEvent } from "../../../../src/components/ha-select";
 import "../../../../src/components/ha-switch";
@@ -388,13 +387,12 @@ export class DemoMiscCloudAccount
 
   private _toggle(label: string, field: keyof CloudDemoScenario) {
     return html`
-      <ha-formfield .label=${label}>
-        <ha-switch
-          .checked=${this._scenario[field] as boolean}
-          data-field=${field}
-          @change=${this._switchChanged}
-        ></ha-switch>
-      </ha-formfield>
+      <ha-switch
+        .checked=${this._scenario[field] as boolean}
+        data-field=${field}
+        @change=${this._switchChanged}
+        >${label}</ha-switch
+      >
     `;
   }
 

gallery/src/pages/misc/integration-card.ts

@@ -1,6 +1,5 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-switch";
 
 import { customElement, property, state } from "lit/decorators";
@@ -258,12 +257,10 @@ export class DemoIntegrationCard extends LitElement {
     return html`
       <div class="container">
         <div class="filters">
-          <ha-formfield label="Custom Integration">
-            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
-          </ha-formfield>
-          <ha-formfield label="Relies on cloud">
-            <ha-switch @change=${this._toggleCloud}></ha-switch>
-          </ha-formfield>
+          <ha-switch @change=${this._toggleCustomIntegration}
+            >Custom Integration</ha-switch
+          >
+          <ha-switch @change=${this._toggleCloud}>Relies on cloud</ha-switch>
         </div>
 
         <ha-ignored-config-entry-card
@@ -293,7 +290,6 @@ export class DemoIntegrationCard extends LitElement {
               class=${classMap({
                 highlight: info.highlight !== undefined,
               })}
-              .hass=${this.hass}
               domain="esphome"
               .items=${info.items}
               .manifest=${createManifest(
@@ -316,7 +312,6 @@ export class DemoIntegrationCard extends LitElement {
         <!-- One that is standalone to see how it increases height if height
            not defined by other cards. -->
         <ha-integration-card
-          .hass=${this.hass}
           domain="esphome"
           .items=${[
             loadedEntry,
@@ -369,9 +364,9 @@ export class DemoIntegrationCard extends LitElement {
       max-width: 500px;
     }
 
-    ha-formfield {
+    ha-switch {
       margin: 8px 0;
-      display: block;
+      display: flex;
     }
   `;
 }

package.json

@@ -40,20 +40,20 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "8.0.5",
+    "@babel/runtime": "8.0.7",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
     "@codemirror/commands": "6.11.1",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
-    "@codemirror/language": "6.12.4",
+    "@codemirror/language": "6.13.1",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.2",
     "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.13",
+    "@codemirror/view": "6.43.14",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.8.0",
+    "@formatjs/intl-datetimeformat": "7.8.1",
     "@formatjs/intl-displaynames": "7.3.15",
     "@formatjs/intl-durationformat": "0.11.1",
     "@formatjs/intl-getcanonicallocales": "3.2.12",
@@ -68,7 +68,7 @@
     "@fullcalendar/list": "6.1.21",
     "@fullcalendar/luxon3": "6.1.21",
     "@fullcalendar/timegrid": "6.1.21",
-    "@home-assistant/webawesome": "3.7.0-ha.1",
+    "@home-assistant/webawesome": "3.14.0-ha.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.5",
     "@lit-labs/motion": "1.1.0",
@@ -77,27 +77,24 @@
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
-    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
-    "@material/mwc-formfield": "0.27.0",
     "@material/mwc-list": "0.27.0",
-    "@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",
     "@tsparticles/engine": "4.4.0",
     "@tsparticles/preset-links": "4.4.0",
-    "@versatiles/style": "6.0.3",
+    "@versatiles/style": "6.4.0",
     "@vibrant/color": "4.0.4",
-    "@vvo/tzdb": "6.198.0",
+    "@vvo/tzdb": "6.201.1",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "barcode-detector": "3.2.2",
     "cally": "0.9.2",
     "color-name": "2.1.1",
     "comlink": "4.4.2",
     "core-js": "3.50.0",
-    "cropperjs": "1.6.3",
+    "cropperjs": "1.7.0",
     "culori": "4.0.2",
     "date-fns": "4.4.0",
     "deep-clone-simple": "1.1.1",
@@ -109,17 +106,17 @@
     "hls.js": "1.7.3",
     "home-assistant-js-websocket": "9.7.1",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "12.1.2",
-    "js-yaml": "5.4.2",
+    "intl-messageformat": "12.1.3",
+    "js-yaml": "5.4.3",
     "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "maplibre-gl": "6.11.2",
-    "marked": "18.0.14",
+    "maplibre-gl": "6.14.0",
+    "marked": "18.1.0",
     "memoize-one": "6.0.0",
-    "nanoid": "6.0.1",
+    "nanoid": "6.0.2",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
@@ -140,25 +137,24 @@
     "workbox-strategies": "7.4.1",
     "xss": "1.0.15",
     "zrender": "6.1.0",
-    "zxing-wasm": "3.1.4"
+    "zxing-wasm": "3.1.5"
   },
   "devDependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@babel/core": "8.0.6",
-    "@babel/helper-compilation-targets": "8.0.6",
+    "@babel/core": "8.0.7",
+    "@babel/helper-compilation-targets": "8.0.7",
     "@babel/helper-define-polyfill-provider": "1.0.0",
     "@babel/plugin-transform-runtime": "8.0.6",
-    "@babel/preset-env": "8.0.6",
+    "@babel/preset-env": "8.0.7",
     "@bundle-stats/plugin-webpack-filter": "4.22.3",
     "@eslint/js": "10.0.1",
     "@gfx/zopfli": "1.0.15",
     "@html-eslint/eslint-plugin": "0.66.1",
     "@lokalise/node-api": "16.6.0",
     "@octokit/auth-oauth-device": "8.0.5",
-    "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
-    "@playwright/test": "1.63.0",
-    "@rsdoctor/rspack-plugin": "1.6.4",
+    "@playwright/test": "1.64.0",
+    "@rsdoctor/rspack-plugin": "1.6.5",
     "@rspack/core": "2.2.8",
     "@rspack/dev-server": "2.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -172,18 +168,18 @@
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.6",
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@typescript/native": "npm:[email protected]",
-    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/coverage-v8": "5.0.4",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist": "4.29.3",
     "browserslist-useragent-regexp": "4.1.4",
     "core-js-compat": "3.50.0",
-    "del": "8.0.1",
+    "del": "9.0.1",
     "eslint": "10.12.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
@@ -202,7 +198,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "30.1.1",
+    "jsdom": "30.1.2",
     "jszip": "3.10.2",
     "license-checker-rseidelsohn": "5.0.1",
     "lightningcss": "1.33.0",
@@ -213,7 +209,7 @@
     "map-stream": "0.0.7",
     "minify-literals": "2.2.0",
     "pinst": "3.0.0",
-    "prettier": "3.9.9",
+    "prettier": "3.9.10",
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.1.0",
@@ -221,15 +217,15 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.71.0",
-    "vite": "8.3.2",
+    "typescript-eslint": "8.71.1",
+    "vite": "8.3.4",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "5.0.3",
+    "vitest": "5.0.4",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "7.4.1"
   },
-  "packageManager": "pnpm@12.9.0",
+  "packageManager": "pnpm@12.11.2",
   "volta": {
     "node": "24.21.0"
   }

patches/@material__mwc-formfield@0.27.0.patch

@@ -1,22 +0,0 @@
-diff --git a/mwc-formfield-base.js b/mwc-formfield-base.js
-index 7b763326d7d51835ad52646bfbc80fe21989abd3..f2baa8224e6d03df1fdb0b9fd03f5c6d77fc8747 100644
---- a/mwc-formfield-base.js
-+++ b/mwc-formfield-base.js
-@@ -9,7 +9,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
- import { FormElement } from '@material/mwc-base/form-element.js';
- import { observer } from '@material/mwc-base/observer.js';
- import { html } from 'lit';
--import { property, query, queryAssignedNodes } from 'lit/decorators.js';
-+import { property, query, queryAssignedElements } from 'lit/decorators.js';
- import { classMap } from 'lit/directives/class-map.js';
- export class FormfieldBase extends BaseElement {
-     constructor() {
-@@ -96,7 +96,7 @@ __decorate([
-     query('.mdc-form-field')
- ], FormfieldBase.prototype, "mdcRoot", void 0);
- __decorate([
--    queryAssignedNodes('', true, '*')
-+    queryAssignedElements({ slot: "", flatten: true, selector: "*" })
- ], FormfieldBase.prototype, "slottedInputs", void 0);
- __decorate([
-     query('label')

pnpm-workspace.yaml

@@ -4,8 +4,9 @@ autoInstallPeers: false
 # Supply-chain protection
 minimumReleaseAge: 4320 # 3 days, in minutes
 minimumReleaseAgeExclude:
-  # Our own packages, published from our own CI
+  # Our own packages, published from our own CI. Keep in sync with renovate.json
   - home-assistant-js-websocket
+  - "@home-assistant/*"
 trustPolicy: no-downgrade
 trustPolicyExclude:
   # Backports published after provenance-signed 7.x releases
@@ -29,7 +30,6 @@ overrides:
   tslib: 2.8.1
 
 patchedDependencies:
-  "@material/[email protected]": patches/@[email protected]
   "@material/[email protected]": patches/@[email protected]
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]

public/static/images/form/feature_style_buttons.svg

@@ -0,0 +1,9 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="78" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="12" y="13.25" width="6" height="1.5" rx="0.75" fill="black" fill-opacity="0.48"/>
+<rect x="37" y="12.5" width="20" height="3" rx="1.5" fill="black" fill-opacity="0.32"/>
+<rect x="76" y="13.25" width="6" height="1.5" rx="0.75" fill="black" fill-opacity="0.48"/>
+<rect x="78.25" y="11" width="1.5" height="6" rx="0.75" fill="black" fill-opacity="0.48"/>
+</svg>

public/static/images/form/feature_style_buttons_dark.svg

@@ -0,0 +1,9 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="#1C1C1C"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="78" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="12" y="13.25" width="6" height="1.5" rx="0.75" fill="white" fill-opacity="0.72"/>
+<rect x="37" y="12.5" width="20" height="3" rx="1.5" fill="white" fill-opacity="0.48"/>
+<rect x="76" y="13.25" width="6" height="1.5" rx="0.75" fill="white" fill-opacity="0.72"/>
+<rect x="78.25" y="11" width="1.5" height="6" rx="0.75" fill="white" fill-opacity="0.72"/>
+</svg>

public/static/images/form/feature_style_slider.svg

@@ -0,0 +1,7 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="78" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="8" y="8" width="46" height="12" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="49" y="10.5" width="2" height="7" rx="1" fill="white"/>
+</svg>

public/static/images/form/feature_style_slider_dark.svg

@@ -0,0 +1,7 @@
+<svg width="94" height="28" viewBox="0 0 94 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="28" rx="8" fill="#1C1C1C"/>
+<rect x="0.5" y="0.5" width="93" height="27" rx="7.5" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="78" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="8" y="8" width="46" height="12" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="49" y="10.5" width="2" height="7" rx="1" fill="#1C1C1C"/>
+</svg>

public/static/images/form/section_column_span_1_of_2.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="16" viewBox="0 0 36 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="20" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_1_of_2_dark.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="16" viewBox="0 0 36 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="20" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_1_of_3.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="20" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="40" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_1_of_3_dark.svg

@@ -0,0 +1,5 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="20" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="40" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_1_of_4.svg

@@ -0,0 +1,6 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="20" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="40" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="60" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_1_of_4_dark.svg

@@ -0,0 +1,6 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="20" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="40" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="60" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_2_of_2.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="16" viewBox="0 0 36 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+</svg>

public/static/images/form/section_column_span_2_of_2_dark.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="16" viewBox="0 0 36 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+</svg>

public/static/images/form/section_column_span_2_of_3.svg

@@ -0,0 +1,4 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="40" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_2_of_3_dark.svg

@@ -0,0 +1,4 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="40" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_2_of_4.svg

@@ -0,0 +1,5 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="40" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="60" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_2_of_4_dark.svg

@@ -0,0 +1,5 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="40" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="60" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_3_of_3.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+</svg>

public/static/images/form/section_column_span_3_of_3_dark.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="16" viewBox="0 0 56 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+</svg>

public/static/images/form/section_column_span_3_of_4.svg

@@ -0,0 +1,4 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+<rect x="60" width="16" height="16" rx="3" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/section_column_span_3_of_4_dark.svg

@@ -0,0 +1,4 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+<rect x="60" width="16" height="16" rx="3" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/section_column_span_4_of_4.svg

@@ -0,0 +1,3 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="76" height="16" rx="3" fill="black" fill-opacity="0.32"/>
+</svg>

public/static/images/form/section_column_span_4_of_4_dark.svg

@@ -0,0 +1,3 @@
+<svg width="76" height="16" viewBox="0 0 76 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="76" height="16" rx="3" fill="white" fill-opacity="0.48"/>
+</svg>

renovate.json

@@ -144,6 +144,21 @@
       "matchPackageNames": ["/^actions\\/cache(?:\\/|$)/"],
       "groupName": "actions/cache",
       "groupSlug": "actions-cache"
+    },
+    {
+      "description": "First-party packages and actions are reviewed and published by us, so skip the release delay. Keep in sync with minimumReleaseAgeExclude in pnpm-workspace.yaml",
+      "matchPackageNames": [
+        "home-assistant-js-websocket",
+        "@home-assistant/**",
+        "home-assistant/**"
+      ],
+      "minimumReleaseAge": null
+    },
+    {
+      "description": "Follow webawesome fork releases (X.Y.Z-ha.N) across upstream versions, and skip the plain upstream syncs",
+      "matchPackageNames": ["@home-assistant/webawesome"],
+      "allowedVersions": "/-ha\\.\\d+$/",
+      "ignoreUnstable": false
     }
   ]
 }

script/gen_demo_core_data

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+# Safe bash settings
+# -e            Exit on command fail
+# -u            Exit on unset variable
+# -o pipefail   Exit if piped command has error code
+set -eu -o pipefail
+
+cd "$(dirname "$0")/.."
+
+./node_modules/.bin/gulp gen-demo-core-data