Let companion apps draw the top bar back button

Apps that report hasNativeBackButton draw the back button themselves. The frontend hides its own arrow and reports whether the current top bar offers a back action, then performs the navigation when the app says the button was tapped.

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

@@ -7,6 +7,12 @@ description: Home Assistant frontend PR and review guidance, including implement
 
 Use this skill when reviewing Home Assistant frontend changes or preparing a pull request.
 
+## Review Preparation
+
+1. Establish the review scope from the diff and the behavior changed by it.
+2. Before identifying findings, use the [project skill catalogue](../../../AGENTS.md#project-skills) to load every matching companion's `SKILL.md`. Follow applicable companion references in those skills as well; this review skill supplies the workflow, and companions supply the domain-specific criteria.
+3. Apply all loaded guidance within that scope. Report only problems introduced or worsened by the changeset, anchored to changed lines. Read surrounding code to understand affected behavior, not to generate unrelated cleanup or migration requests.
+
 ## Pull Request Body
 
 When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body.
@@ -116,4 +122,3 @@ For user-facing changes, establish the existing design context as part of fronte
 - Record the applicable UI/UX evidence for user-facing changes, whether or not further input is needed.
 - Keep style-only comments secondary unless they affect maintainability or user experience.
 - Prefer small, direct fixes over large refactors during review follow-up.
-- Load the matching `ha-frontend-*` skill when a finding falls within its area.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -7,13 +7,17 @@ body:
       value: |
         Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
 
+        Please read our [issue reporting guide][reporting-issues] before submitting a report.
+
         If you have a feature or enhancement request for the frontend, please [start a discussion][fr] instead of creating an issue.
 
         **Please do not report issues for custom cards.**
 
         [fr]: https://github.com/orgs/home-assistant/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
+        [reporting-issues]: https://www.home-assistant.io/help/reporting_issues/
   - type: checkboxes
+    id: checklist
     attributes:
       label: Checklist
       description: Please verify that you've followed these steps
@@ -30,18 +34,21 @@ body:
       value: |
         ## The problem
   - type: textarea
+    id: problem
     validations:
       required: true
     attributes:
       label: Describe the issue you are experiencing
       description: Provide a clear and concise description of what the bug is.
   - type: textarea
+    id: expected_behavior
     validations:
       required: true
     attributes:
       label: Describe the behavior you expected
       description: Describe what you expected to happen or it should look/behave.
   - type: textarea
+    id: steps_to_reproduce
     validations:
       required: true
     attributes:
@@ -59,6 +66,7 @@ body:
       value: |
         ## Environment
   - type: input
+    id: core_version
     validations:
       required: true
     attributes:
@@ -67,18 +75,21 @@ body:
       description: >
         Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
   - type: input
+    id: last_working_version
     attributes:
       label: What was the last working version of Home Assistant Core?
       placeholder: core-
       description: >
         If known, otherwise leave blank.
   - type: input
+    id: browser
     attributes:
       label: In which browser are you experiencing the issue?
       placeholder: Google Chrome 88.0.4324.150
       description: >
         Provide the full name and don't forget to add the version!
   - type: input
+    id: os
     attributes:
       label: Which operating system are you using to run this browser?
       placeholder: macOS Big Sur (1.11)
@@ -90,6 +101,7 @@ body:
         # Details
 
   - type: textarea
+    id: entity_state
     attributes:
       label: State of relevant entities
       description: >
@@ -98,6 +110,7 @@ body:
         information in the Details view of the More info dialog.
       render: txt
   - type: textarea
+    id: configuration
     attributes:
       label: Problem-relevant frontend configuration
       description: >
@@ -107,6 +120,7 @@ body:
         passwords, private URLs and other credentials.
       render: yaml
   - type: textarea
+    id: javascript_errors
     attributes:
       label: JavaScript errors shown in your browser console/inspector
       description: >
@@ -114,6 +128,7 @@ body:
         browser console/inspector please provide them.
       render: txt
   - type: textarea
+    id: additional_information
     attributes:
       label: Additional information
       description: >

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

@@ -0,0 +1,38 @@
+#!/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.mjs`);
+//   await checkBlockingLabels({ github, context, core });
+
+export default async function checkBlockingLabels({ context, core }) {
+  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/workflows/blocking-labels.yaml

@@ -0,0 +1,35 @@
+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.mjs`
+            );
+            await checkBlockingLabels({ github, context, core });

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+        uses: github/codeql-action/init@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+        uses: github/codeql-action/analyze@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
         with:
           category: "/language:javascript-typescript"

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@a7c616ce81ccda50150bf1595786c71b1883fabb # master
+        uses: home-assistant/actions/helpers/verify-version@58bff37c8947f690ace498be413a9b78d6f30f93 # master
 
       - name: Setup Node and install
         uses: ./.github/actions/setup

.nvmrc

@@ -1 +1 @@
-24.20.0
+24.21.0

AGENTS.md

@@ -37,7 +37,7 @@ Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives fi
 
 ## Project Skills
 
-Detailed guidance lives in project skills under `.agents/skills/`. Load the matching skill before detailed implementation or review:
+Detailed guidance lives in `.agents/skills/<name>/SKILL.md`. Load every matching skill before detailed implementation or review. For reviews, load `ha-frontend-review` alongside all companions that apply to the changed code or behavior:
 
 - `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
 - `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.

build-scripts/gulp/gather-static.js

@@ -81,6 +81,8 @@ async function copyMapPanel(staticDir) {
     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/"));
 }
 
 function copyZXingWasm(staticDir) {

demo/src/stubs/connectivity/fixtures.ts

@@ -1,6 +1,7 @@
 import { bluetoothFixtures } from "./bluetooth/fixtures";
 import { infraredFixtures } from "./infrared/fixtures";
 import { matterFixtures } from "./matter/fixtures";
+import { modbusFixtures } from "./modbus/fixtures";
 import { mqttFixtures } from "./mqtt/fixtures";
 import { radioFrequencyFixtures } from "./radio_frequency/fixtures";
 import { serialFixtures } from "./serial/fixtures";
@@ -16,6 +17,7 @@ import { zwaveJsFixtures } from "./zwave_js/fixtures";
 const INTEGRATIONS: ConnectivityFixtures[] = [
   bluetoothFixtures,
   serialFixtures,
+  modbusFixtures,
   mqttFixtures,
   matterFixtures,
   infraredFixtures,

demo/src/stubs/connectivity/index.ts

@@ -1,6 +1,7 @@
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { mockBluetooth } from "./bluetooth/mock";
 import { mockMatter } from "./matter/mock";
+import { mockModbus } from "./modbus/mock";
 import { mockMqtt } from "./mqtt/mock";
 import { mockRadioFrequency } from "./radio_frequency/mock";
 import { mockSerial } from "./serial/mock";
@@ -12,6 +13,7 @@ import { mockZwaveJs } from "./zwave_js/mock";
 const MOCKS = [
   mockBluetooth,
   mockSerial,
+  mockModbus,
   mockMatter,
   mockMqtt,
   mockZwaveJs,

demo/src/stubs/connectivity/modbus/fixtures.ts

@@ -0,0 +1,47 @@
+import { manifest } from "../../manifest";
+import { configEntry } from "../helpers";
+import type { ConnectivityFixtures } from "../types";
+
+export const FLEXIT_ENTRY_ID = "mock-flexit";
+export const SOLAREDGE_ENTRY_ID = "mock-solaredge";
+export const FRONIUS_ENTRY_ID = "mock-fronius";
+
+/** The RS-485 adapter the two serial devices share, as the Serial panel lists it. */
+export const RS485_PORT = "/dev/ttyUSB1";
+
+export const modbusFixtures: ConnectivityFixtures = {
+  components: ["modbus"],
+  commands: ["modbus/"],
+  manifests: [
+    manifest("flexit", "Flexit", {
+      integration_type: "device",
+      iot_class: "local_polling",
+    }),
+    manifest("solaredge_modbus", "SolarEdge Modbus", {
+      integration_type: "device",
+      iot_class: "local_polling",
+    }),
+    manifest("fronius", "Fronius", {
+      integration_type: "device",
+      iot_class: "local_polling",
+    }),
+  ],
+  configEntries: [
+    {
+      type: "device",
+      entry: configEntry(FLEXIT_ENTRY_ID, "flexit", "Flexit Nordic S4"),
+    },
+    {
+      type: "device",
+      entry: configEntry(
+        SOLAREDGE_ENTRY_ID,
+        "solaredge_modbus",
+        "SolarEdge SE7K"
+      ),
+    },
+    {
+      type: "device",
+      entry: configEntry(FRONIUS_ENTRY_ID, "fronius", "Fronius Symo"),
+    },
+  ],
+};

demo/src/stubs/connectivity/modbus/mock.ts

@@ -0,0 +1,42 @@
+import type { ModbusConnection } from "../../../../../src/data/modbus";
+import type { MockHomeAssistant } from "../../../../../src/fake_data/provide_hass";
+import {
+  FLEXIT_ENTRY_ID,
+  FRONIUS_ENTRY_ID,
+  RS485_PORT,
+  SOLAREDGE_ENTRY_ID,
+} from "./fixtures";
+
+const CONNECTIONS: ModbusConnection[] = [
+  // Two integrations on one RS-485 bus, which is what the panel exists to show
+  {
+    endpoint: ["serial", RS485_PORT],
+    connected: true,
+    source: "config_entry",
+    units: { [FLEXIT_ENTRY_ID]: [1], [SOLAREDGE_ENTRY_ID]: [2] },
+  },
+  {
+    endpoint: ["tcp", "192.168.1.42", 502],
+    connected: true,
+    source: "config_entry",
+    units: { [FRONIUS_ENTRY_ID]: [1] },
+  },
+  // A second inverter behind a gateway that is not answering
+  {
+    endpoint: ["tcp", "modbus-gateway.local", 502],
+    connected: false,
+    source: "config_entry",
+    units: { [FRONIUS_ENTRY_ID]: [2] },
+  },
+  // A YAML hub keeps a link of its own to a device an integration also talks to
+  {
+    endpoint: ["tcp", "192.168.1.42", 502],
+    connected: true,
+    source: "yaml",
+    units: { modbus_hub: [10, 11] },
+  },
+];
+
+export const mockModbus = (hass: MockHomeAssistant) => {
+  hass.mockWS("modbus/connections/list", () => ({ connections: CONNECTIONS }));
+};

demo/src/stubs/connectivity/serial/mock.ts

@@ -1,5 +1,12 @@
 import type { SerialPortUsage } from "../../../../../src/data/usb";
 import type { MockHomeAssistant } from "../../../../../src/fake_data/provide_hass";
+// The RS-485 port below carries the Modbus connections, so both sides name the
+// same config entries.
+import {
+  FLEXIT_ENTRY_ID,
+  RS485_PORT,
+  SOLAREDGE_ENTRY_ID,
+} from "../modbus/fixtures";
 
 const PORTS: SerialPortUsage[] = [
   {
@@ -55,7 +62,7 @@ const PORTS: SerialPortUsage[] = [
     discovery_flows: [],
   },
   {
-    device: "/dev/ttyUSB1",
+    device: RS485_PORT,
     resolved_device:
       "/dev/serial/by-id/usb-FTDI_FT232R_USB_UART_A50285BI-if00-port0",
     serial_number: "A50285BI",
@@ -68,7 +75,24 @@ const PORTS: SerialPortUsage[] = [
     bcd_device: 1536,
     matching_integrations: [],
     present: true,
-    consumers: [],
+    consumers: [
+      {
+        kind: "config_entry",
+        title: "Flexit Nordic S4",
+        active: true,
+        domain: "flexit",
+        config_entry_id: FLEXIT_ENTRY_ID,
+        slug: null,
+      },
+      {
+        kind: "config_entry",
+        title: "SolarEdge SE7K",
+        active: true,
+        domain: "solaredge_modbus",
+        config_entry_id: SOLAREDGE_ENTRY_ID,
+        slug: null,
+      },
+    ],
     discovery_flows: [],
   },
   {

demo/src/stubs/hardware.ts

@@ -13,6 +13,7 @@ const HARDWARE_INFO: HardwareInfo = {
         hassio_board_id: "green",
         manufacturer: "homeassistant",
         model: "green",
+        revision: null,
       },
       dongle: null,
       config_entries: [],

demo/src/stubs/hassio_supervisor.ts

@@ -32,11 +32,11 @@ const DEMO_ADDONS: HassioAddonInfo[] = [
     detached: false,
     homeassistant: "2025.7.0",
     icon: false,
-    installed: true,
     logo: false,
     repository: "d5369777",
     stage: "stable",
     state: "started",
+    system_managed: false,
     update_available: false,
     url: "https://github.com/music-assistant/home-assistant-addon",
     version: "2.6.3",
@@ -53,11 +53,11 @@ const DEMO_ADDONS: HassioAddonInfo[] = [
     detached: false,
     homeassistant: "2025.7.0",
     icon: false,
-    installed: true,
     logo: false,
     repository: "5c53de3b",
     stage: "stable",
     state: "started",
+    system_managed: false,
     update_available: false,
     url: "https://esphome.io/",
     version: "2025.7.3",
@@ -114,13 +114,14 @@ const addonDetails = (addon: HassioAddonInfo): HassioAddonDetails => ({
   audio_output: null,
   audio: false,
   auth_api: false,
-  auto_uart: false,
   auto_update: false,
   boot: "auto",
+  boot_config: "auto",
   changelog: false,
   devices: [],
   devicetree: false,
   discovery: [],
+  dns: [],
   docker_api: false,
   documentation: false,
   full_access: false,
@@ -133,8 +134,10 @@ const addonDetails = (addon: HassioAddonInfo): HassioAddonDetails => ({
   host_ipc: false,
   host_network: false,
   host_pid: false,
+  host_uts: false,
   ingress_entry: null,
   ingress_panel: false,
+  ingress_port: null,
   ingress_url: null,
   ingress: false,
   ip_address: "172.30.33.2",
@@ -148,13 +151,16 @@ const addonDetails = (addon: HassioAddonInfo): HassioAddonDetails => ({
   protected: true,
   rating: 6,
   schema: CONFIG_SCHEMAS[addon.slug] ?? null,
-  services_role: [],
+  services: [],
   signed: false,
   startup: "application",
   stdin: false,
-  system_managed: false,
   system_managed_config_entry: null,
   translations: {},
+  uart: false,
+  udev: false,
+  usb: false,
+  video: false,
   watchdog: true,
   webui: null,
 });
@@ -181,11 +187,14 @@ const ADDON_STATS: HassioStats = {
   blk_read: 12300000,
   blk_write: 4500000,
   cpu_percent: 1.4,
+  cpu_system_usage: 1420000000000,
+  cpu_usage: 19800000000,
   memory_limit: 3900000000,
   memory_percent: 4.2,
   memory_usage: 163000000,
   network_rx: 8900000,
   network_tx: 2300000,
+  online_cpus: 4,
 };
 
 export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
@@ -209,9 +218,13 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
         wait_boot: 5,
         timezone: "Europe/Amsterdam",
         logging: "info",
+        auto_update: true,
+        country: "NL",
         debug: false,
         debug_block: false,
+        detect_blocking_io: false,
         diagnostics: true,
+        feature_flags: {},
         addons: DEMO_ADDONS as any,
         addons_repositories: [
           "https://github.com/music-assistant/home-assistant-addon",
@@ -224,22 +237,6 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
     if (msg.endpoint === "/addons") {
       const data: HassioAddonsInfo = {
         addons: DEMO_ADDONS,
-        repositories: [
-          {
-            slug: "d5369777",
-            name: "Music Assistant",
-            source: "https://github.com/music-assistant/home-assistant-addon",
-            url: "https://github.com/music-assistant/home-assistant-addon",
-            maintainer: "Music Assistant",
-          },
-          {
-            slug: "5c53de3b",
-            name: "ESPHome",
-            source: "https://github.com/esphome/home-assistant-addon",
-            url: "https://esphome.io/",
-            maintainer: "ESPHome",
-          },
-        ],
       };
       return data;
     }
@@ -264,6 +261,7 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
         hostname: "homeassistant",
         logging: "info",
         machine: "green",
+        machine_id: "0123456789abcdef0123456789abcdef",
         state: "running",
         operating_system: "Home Assistant OS 18.2",
         supervisor: "2026.07.1",
@@ -301,6 +299,7 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
         update_available: false,
         version: "18.2",
         version_latest: "18.2",
+        version_pending: null,
         data_disk: "Home Assistant Green (mmcblk0)",
       };
       return data;
@@ -334,8 +333,9 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
       const data: NetworkInfo = {
         interfaces: [
           {
+            connected: true,
+            mac: "aa:bb:cc:dd:ee:ff",
             primary: true,
-            privacy: false,
             interface: "eth0",
             enabled: true,
             type: "ethernet",
@@ -354,10 +354,18 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
           gateway: "172.30.32.1",
           interface: "hassio",
         },
+        host_internet: true,
+        supervisor_internet: true,
       };
       return data;
     }
 
+    if (msg.endpoint === "/ingress/panels") {
+      // The navigation picker waits for this collection before it enables
+      // itself, so it has to answer even when no add-on exposes a panel.
+      return { panels: {} };
+    }
+
     if (msg.endpoint === "/store/reload") {
       return null;
     }

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

@@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
-import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
 import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 

gallery/src/data/traces/basic_trace.ts

@@ -126,7 +126,6 @@ export const basicTrace: DemoTrace = {
               },
             },
             running_script: false,
-            limit: 10,
           },
         },
       ],
@@ -171,7 +170,6 @@ export const basicTrace: DemoTrace = {
               },
             },
             running_script: false,
-            limit: 10,
           },
         },
       ],
@@ -189,7 +187,6 @@ export const basicTrace: DemoTrace = {
               },
             },
             running_script: false,
-            limit: 10,
           },
         },
       ],
@@ -207,7 +204,6 @@ export const basicTrace: DemoTrace = {
               },
             },
             running_script: false,
-            limit: 10,
           },
         },
       ],

gallery/src/ha-demo-options.ts

@@ -1,9 +1,7 @@
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
-import "./components/page-description";
 
 @customElement("ha-demo-options")
 class HaDemoOptions extends LitElement {

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 { computeEntityNameDisplayWithoutContext } from "../../src/common/entity/compute_entity_name_display";
 import { setDirectionStyles } from "../../src/common/util/compute_rtl";
 import "../../src/components/ha-button";
 import "../../src/components/ha-drawer";
@@ -682,10 +683,7 @@ class HaGallery extends LitElement {
       formatEntityAttributeName: (_stateObj, attribute) => attribute,
       formatEntityAttributeValue: (stateObj, attribute, value) =>
         value != null ? value : (stateObj.attributes[attribute] ?? ""),
-      formatEntityName: (stateObj, type) =>
-        typeof type === "string"
-          ? type
-          : (stateObj.attributes.friendly_name ?? stateObj.entity_id),
+      formatEntityName: computeEntityNameDisplayWithoutContext,
     } as unknown as HomeAssistant;
   }
 

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

@@ -57,6 +57,7 @@ This component is based on the webawesome input component.
 | invalid              | Boolean                                                                                        | false      | Marks the input as invalid.                                                                                |
 | inset-label          | Boolean                                                                                        | false      | Uses an inset label style where the label stays inside the input.                                          |
 | validation-message   | String                                                                                         | ""         | Custom validation message shown when the input is invalid.                                                 |
+| input-id             | String                                                                                         | -          | Sets the native input's `id` and associated label `for` on the inner `wa-input`. Defaults to `"input"`.    |
 | pattern              | String                                                                                         | -          | A regular expression pattern to validate input against.                                                    |
 | minlength            | Number                                                                                         | -          | The minimum length of input that will be considered valid.                                                 |
 | maxlength            | Number                                                                                         | -          | The maximum length of input that will be considered valid.                                                 |

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

@@ -21,6 +21,8 @@ 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 type { SerialPort } from "../../../../src/data/usb";
 import {
   showDialog,
   type ShowDialogParams,
@@ -293,9 +295,72 @@ const LABELS: LabelRegistryEntry[] = [
   },
 ];
 
+const serialPort = (port: Partial<SerialPort>): SerialPort => ({
+  device: "/dev/ttyUSB0",
+  resolved_device: null,
+  serial_number: null,
+  manufacturer: null,
+  description: null,
+  matching_integrations: [],
+  present: true,
+  ...port,
+});
+
+// One port per section the picker groups by, relative to the "zha" domain the
+// serial port selector below is given as its flow context
+const SERIAL_PORTS: SerialPort[] = [
+  serialPort({
+    device:
+      "/dev/serial/by-id/usb-Nabu_Casa_SkyConnect_v1.0_9e2adbd75b8beb119fe564a0f320645d-if00-port0",
+    description: "SkyConnect v1.0",
+    manufacturer: "Nabu Casa",
+    serial_number: "9e2adbd75b8beb119fe564a0f320645d",
+    vid: "10C4",
+    pid: "EA60",
+    matching_integrations: ["zha"],
+  }),
+  serialPort({
+    device: "esphome-hass://01JQ8Z5X9WQ0/?port_name=UART0",
+  }),
+  serialPort({
+    device: "socket://192.168.1.10:6638",
+  }),
+  serialPort({
+    device: "/dev/serial/by-id/usb-FTDI_FT232R_USB_UART_AB0KVD1L-if00-port0",
+    description: "FT232R USB UART",
+    manufacturer: "FTDI",
+    serial_number: "AB0KVD1L",
+    vid: "0403",
+    pid: "6001",
+  }),
+  serialPort({
+    device: "/dev/ttyS0",
+    description: "ttyS0",
+    manufacturer: "Intel",
+  }),
+  serialPort({ device: "/dev/ttyAMA0" }),
+  serialPort({
+    device:
+      "/dev/serial/by-id/usb-Silicon_Labs_CP2102_USB_to_UART_Bridge_Controller_0001-if00-port0",
+    description: "CP2102 USB to UART Bridge Controller",
+    manufacturer: "Silicon Labs",
+    serial_number: "0001",
+    vid: "10C4",
+    pid: "EA60",
+    matching_integrations: ["matter"],
+  }),
+];
+
 const SCHEMAS: {
   name: string;
-  input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
+  input: Record<
+    string,
+    | (BlueprintInput & {
+        required?: boolean;
+        context?: Record<string, unknown>;
+      })
+    | null
+  >;
 }[] = [
   {
     name: "One of each",
@@ -320,6 +385,13 @@ const SCHEMAS: {
       },
       duration: { name: "Duration", selector: { duration: {} } },
       app: { name: "App", selector: { app: {} } },
+      serial_port: {
+        name: "Serial port",
+        selector: { serial_port: {} },
+        // A config flow passes its own domain as context, which is what the
+        // picker groups recommended and not recommended ports by
+        context: { domain: "zha" },
+      },
       number_box: {
         name: "Number Box",
         selector: {
@@ -504,6 +576,99 @@ const SCHEMAS: {
           },
         },
       },
+      addon: { name: "Add-on", selector: { addon: {} } },
+      areas_display: {
+        name: "Areas display",
+        selector: { areas_display: {} },
+      },
+      assist_pipeline: {
+        name: "Assist pipeline",
+        selector: { assist_pipeline: {} },
+      },
+      automation_behavior: {
+        name: "Automation behavior",
+        selector: { automation_behavior: { mode: "trigger" } },
+      },
+      backup_location: {
+        name: "Backup location",
+        selector: { backup_location: {} },
+      },
+      button_toggle: {
+        name: "Button toggle",
+        selector: {
+          button_toggle: {
+            options: [
+              { label: "Left", value: "left" },
+              { label: "Center", value: "center" },
+              { label: "Right", value: "right" },
+            ],
+          },
+        },
+      },
+      condition: { name: "Condition", selector: { condition: {} } },
+      conversation_agent: {
+        name: "Conversation agent",
+        selector: { conversation_agent: {} },
+      },
+      country: {
+        name: "Country",
+        selector: { country: { countries: ["DE", "GB", "NL", "US"] } },
+      },
+      entity_name: {
+        name: "Entity name",
+        selector: { entity_name: { entity_id: "light.bedroom" } },
+      },
+      file: {
+        name: "File",
+        selector: { file: { accept: "image/png,image/jpeg" } },
+      },
+      language: { name: "Language", selector: { language: {} } },
+      navigation: { name: "Navigation", selector: { navigation: {} } },
+      numeric_threshold: {
+        name: "Numeric threshold",
+        selector: { numeric_threshold: {} },
+      },
+      period: {
+        name: "Period",
+        selector: {
+          period: {
+            options: ["today", "yesterday", "this_week", "this_month"],
+          },
+        },
+        // Without a value that matches one of the options the selector offers
+        // its custom-period editor instead of the list
+        default: { calendar: { period: "day" } },
+      },
+      selector: {
+        name: "Selector",
+        selector: { selector: {} },
+        default: { text: {} },
+      },
+      state_class: { name: "State class", selector: { state_class: {} } },
+      statistic: { name: "Statistic", selector: { statistic: {} } },
+      stt: { name: "Speech-to-text", selector: { stt: {} } },
+      theme: { name: "Theme", selector: { theme: {} } },
+      timezone: { name: "Time zone", selector: { timezone: {} } },
+      trigger: { name: "Trigger", selector: { trigger: {} } },
+      tts: { name: "Text-to-speech", selector: { tts: {} } },
+      tts_voice: {
+        name: "Text-to-speech voice",
+        selector: { tts_voice: { engineId: "tts.cloud", language: "en-US" } },
+      },
+      ui_action: { name: "UI action", selector: { ui_action: {} } },
+      ui_clock_date_format: {
+        name: "Clock date format",
+        selector: { ui_clock_date_format: {} },
+      },
+      ui_color: { name: "UI color", selector: { ui_color: {} } },
+      ui_state_content: {
+        name: "State content",
+        selector: { ui_state_content: { entity_id: "light.bedroom" } },
+      },
+      ui_time_format: {
+        name: "Time format",
+        selector: { ui_time_format: {} },
+      },
     },
   },
   {
@@ -605,8 +770,98 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     mockFloorRegistry(hass, FLOORS);
     mockLabelRegistry(hass, LABELS);
     mockHassioSupervisor(hass);
+    hass.addTranslations({
+      "component.matter.title": "Matter",
+      "component.zha.title": "Zigbee Home Automation",
+    });
+    hass.updateHass({
+      config: {
+        ...hass.config,
+        components: [...hass.config.components, "usb"],
+      },
+    });
     hass.mockWS("auth/sign_path", (params) => params);
     hass.mockWS("media_player/browse_media", this._browseMedia);
+    hass.mockWS("usb/list_serial_ports", () => SERIAL_PORTS);
+    hass.mockWS("recorder/list_statistic_ids", () => [
+      {
+        statistic_id: "sensor.energy_consumption",
+        statistics_unit_of_measurement: "kWh",
+        source: "recorder",
+        name: null,
+        has_sum: true,
+        mean_type: StatisticMeanType.NONE,
+        unit_class: "energy",
+      },
+      {
+        statistic_id: "sensor.outside_temperature",
+        statistics_unit_of_measurement: "\u00b0C",
+        source: "recorder",
+        name: null,
+        has_sum: false,
+        mean_type: StatisticMeanType.ARITHMETIC,
+        unit_class: "temperature",
+      },
+    ]);
+    hass.mockWS("assist_pipeline/pipeline/list", () => ({
+      pipelines: [
+        {
+          id: "pipeline_home",
+          name: "Home Assistant",
+          language: "en",
+          conversation_engine: "conversation.home_assistant",
+          conversation_language: "en",
+          stt_engine: "stt.cloud",
+          stt_language: "en-US",
+          tts_engine: "tts.cloud",
+          tts_language: "en-US",
+          tts_voice: "JennyNeural",
+          wake_word_entity: null,
+          wake_word_id: null,
+        },
+      ],
+      preferred_pipeline: "pipeline_home",
+    }));
+    hass.mockWS("conversation/agent/list", () => ({
+      agents: [
+        {
+          id: "conversation.home_assistant",
+          name: "Home Assistant",
+          supported_languages: "*",
+        },
+        {
+          id: "conversation.openai",
+          name: "OpenAI Conversation",
+          supported_languages: ["en"],
+        },
+      ],
+    }));
+    hass.mockWS("stt/engine/list", () => ({
+      providers: [
+        {
+          engine_id: "stt.cloud",
+          name: "Home Assistant Cloud",
+          supported_languages: ["en-US"],
+          deprecated: false,
+        },
+      ],
+    }));
+    hass.mockWS("tts/engine/list", () => ({
+      providers: [
+        {
+          engine_id: "tts.cloud",
+          name: "Home Assistant Cloud",
+          supported_languages: ["en-US"],
+          deprecated: false,
+        },
+      ],
+    }));
+    hass.mockWS("tts/engine/voices", () => ({
+      voices: [
+        { voice_id: "JennyNeural", name: "Jenny" },
+        { voice_id: "GuyNeural", name: "Guy" },
+      ],
+    }));
   }
 
   public provideHass(el) {
@@ -776,6 +1031,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}
+                      .context=${value!.context}
                       .key=${key}
                       .label=${this._label ? value!.name : undefined}
                       .value=${data[key] ?? value!.default}

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

@@ -21,7 +21,8 @@ const ENTITIES = [
     state: "on",
     attributes: {
       friendly_name: "Dining Room",
-      supported_features: 1,
+      supported_color_modes: ["brightness"],
+      color_mode: "brightness",
       brightness: 100,
     },
   },
@@ -30,7 +31,7 @@ const ENTITIES = [
     state: "off",
     attributes: {
       friendly_name: "Dining Room",
-      supported_features: 1,
+      supported_color_modes: ["brightness"],
     },
   },
   {
@@ -38,7 +39,7 @@ const ENTITIES = [
     state: "unavailable",
     attributes: {
       friendly_name: "Lost Light",
-      supported_features: 1,
+      supported_color_modes: ["brightness"],
     },
   },
 ];

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

@@ -12,7 +12,10 @@ import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
 import { FanEntityFeature } from "../../../../src/data/fan";
-import type { TileCardConfig } from "../../../../src/panels/lovelace/cards/types";
+import type {
+  GridCardConfig,
+  TileCardConfig,
+} from "../../../../src/panels/lovelace/cards/types";
 
 const ENTITIES = [
   {
@@ -163,6 +166,39 @@ const ENTITIES = [
         FanEntityFeature.OSCILLATE,
     },
   },
+  {
+    entity_id: "fan.three_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Desk fan",
+      device_class: "fan",
+      percentage: 67,
+      percentage_step: 100 / 3,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.four_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Bedroom fan",
+      device_class: "fan",
+      percentage: 50,
+      percentage_step: 25,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.five_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Attic fan",
+      device_class: "fan",
+      percentage: 80,
+      percentage_step: 20,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
 ];
 
 const CONFIGS = [
@@ -332,6 +368,50 @@ const CONFIGS = [
       features: [{ type: "fan-speed" }],
     },
   },
+  {
+    heading: "Fan speed feature (3 speeds)",
+    config: {
+      type: "tile",
+      entity: "fan.three_speed_fan",
+      features: [{ type: "fan-speed" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (4 speeds)",
+    config: {
+      type: "tile",
+      entity: "fan.four_speed_fan",
+      features: [{ type: "fan-speed" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (5 speeds)",
+    config: {
+      type: "tile",
+      entity: "fan.five_speed_fan",
+      features: [{ type: "fan-speed" }],
+    },
+  },
+  {
+    heading: "Fan speed feature (half width)",
+    config: {
+      type: "grid",
+      columns: 2,
+      square: false,
+      cards: [
+        {
+          type: "tile",
+          entity: "fan.four_speed_fan",
+          features: [{ type: "fan-speed" }],
+        },
+        {
+          type: "tile",
+          entity: "fan.five_speed_fan",
+          features: [{ type: "fan-speed" }],
+        },
+      ],
+    },
+  },
   {
     heading: "Fan oscillate feature",
     config: {
@@ -418,7 +498,7 @@ const CONFIGS = [
       ],
     },
   },
-] satisfies DemoCardConfig<TileCardConfig>[];
+] satisfies DemoCardConfig<TileCardConfig | GridCardConfig>[];
 
 @customElement("demo-lovelace-tile-card")
 class DemoTile extends LitElement {

gallery/src/pages/more-info/fan.ts

@@ -21,6 +21,61 @@ const ENTITIES = [
         FanEntityFeature.SET_SPEED,
     },
   },
+  {
+    entity_id: "fan.one_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "One speed fan",
+      device_class: "fan",
+      percentage: 100,
+      percentage_step: 100,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.two_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Two speed fan",
+      device_class: "fan",
+      percentage: 50,
+      percentage_step: 50,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.three_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Three speed fan",
+      device_class: "fan",
+      percentage: 67,
+      percentage_step: 100 / 3,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.four_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Four speed fan",
+      device_class: "fan",
+      percentage: 50,
+      percentage_step: 25,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
+  {
+    entity_id: "fan.five_speed_fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Five speed fan",
+      device_class: "fan",
+      percentage: 80,
+      percentage_step: 20,
+      supported_features: FanEntityFeature.SET_SPEED,
+    },
+  },
 ];
 
 @customElement("demo-more-info-fan")

gallery/src/pages/more-info/lawn-mower.ts

@@ -11,6 +11,7 @@ import { LawnMowerEntityFeature } from "../../../../src/data/lawn_mower";
 const ALL_FEATURES =
   LawnMowerEntityFeature.START_MOWING +
   LawnMowerEntityFeature.PAUSE +
+  LawnMowerEntityFeature.STOP +
   LawnMowerEntityFeature.DOCK;
 
 const ENTITIES = [
@@ -49,6 +50,14 @@ const ENTITIES = [
       supported_features: ALL_FEATURES,
     },
   },
+  {
+    entity_id: "lawn_mower.idle",
+    state: "idle",
+    attributes: {
+      friendly_name: "Idle",
+      supported_features: ALL_FEATURES,
+    },
+  },
   {
     entity_id: "lawn_mower.error",
     state: "error",

landing-page/src/components/landing-page-logs.ts

@@ -1,8 +1,9 @@
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { consumeLocalize } from "../../../src/common/decorators/consume-context-entry";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import type {
   LandingPageKeys,
@@ -34,9 +35,6 @@ const SCHEDULE_FETCH_OBSERVER_LOGS = 5;
 
 @customElement("landing-page-logs")
 class LandingPageLogs extends LitElement {
-  @property({ attribute: false })
-  public localize!: LocalizeFunc<LandingPageKeys>;
-
   @query("ha-ansi-to-html") private _ansiToHtmlElement?: HaAnsiToHtml;
 
   @query(".logs") private _logElement?: HTMLElement;
@@ -44,6 +42,10 @@ class LandingPageLogs extends LitElement {
   @query("#scroll-bottom-marker")
   private _scrollBottomMarkerElement?: HTMLElement;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc<LandingPageKeys>;
+
   @state() private _show = false;
 
   @state() private _scrolledToBottomController =
@@ -63,12 +65,12 @@ class LandingPageLogs extends LitElement {
     return html`
       <div class="actions">
         <ha-button appearance="plain" @click=${this._toggleLogDetails}>
-          ${this.localize(this._show ? "hide_details" : "show_details")}
+          ${this._localize(this._show ? "hide_details" : "show_details")}
         </ha-button>
         ${
           this._show
             ? html`<ha-icon-button
-                .label=${this.localize("logs.download_logs")}
+                .label=${this._localize("logs.download_logs")}
                 .path=${mdiDownload}
                 @click=${this._downloadLogs}
               ></ha-icon-button>`
@@ -80,14 +82,14 @@ class LandingPageLogs extends LitElement {
           ? html`
               <ha-alert
                 alert-type="error"
-                .title=${this.localize("logs.fetch_error")}
+                .title=${this._localize("logs.fetch_error")}
               >
                 <ha-button
                   size="small"
                   variant="danger"
                   @click=${this._startLogStream}
                 >
-                  ${this.localize("logs.retry")}
+                  ${this._localize("logs.retry")}
                 </ha-button>
               </ha-alert>
             `
@@ -115,7 +117,7 @@ class LandingPageLogs extends LitElement {
         @click=${this._scrollToBottom}
       >
         <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
-        ${this.localize("logs.scroll_down_button")}
+        ${this._localize("logs.scroll_down_button")}
         <ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
       </ha-button>
     `;

landing-page/src/components/landing-page-network.ts

@@ -1,35 +1,37 @@
+import { LitElement, css, html, nothing, type CSSResultGroup } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { type CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { consumeLocalize } from "../../../src/common/decorators/consume-context-entry";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import type {
   LandingPageKeys,
   LocalizeFunc,
 } from "../../../src/common/translations/localize";
-import "../../../src/components/ha-button";
 import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button";
+import type { NetworkInterface } from "../../../src/data/hassio/network";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import {
   ALTERNATIVE_DNS_SERVERS,
   setSupervisorNetworkDns,
   type NetworkInfo,
 } from "../data/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import type { NetworkInterface } from "../../../src/data/hassio/network";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 
 @customElement("landing-page-network")
 class LandingPageNetwork extends LitElement {
-  @property({ attribute: false })
-  public localize!: LocalizeFunc<LandingPageKeys>;
-
   @property({ attribute: false }) public networkInfo?: NetworkInfo;
 
   @property({ type: Boolean }) public error = false;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc<LandingPageKeys>;
+
   protected render() {
     if (this.error) {
       return html`
         <ha-alert alert-type="error">
-          <p>${this.localize("network_issue.error_get_network_info")}</p>
+          <p>${this._localize("network_issue.error_get_network_info")}</p>
         </ha-alert>
       `;
     }
@@ -47,19 +49,21 @@ class LandingPageNetwork extends LitElement {
     return html`
       <ha-alert
         alert-type="warning"
-        .title=${this.localize("network_issue.title")}
+        .title=${this._localize("network_issue.title")}
       >
         <p>
-          ${this.localize("network_issue.description", {
+          ${this._localize("network_issue.description", {
             dns: dnsPrimaryInterfaceNameservers || "?",
           })}
         </p>
-        <p>${this.localize("network_issue.resolve_different")}</p>
+        <p>${this._localize("network_issue.resolve_different")}</p>
         ${
           !dnsPrimaryInterfaceNameservers
             ? html`
                 <p>
-                  <b>${this.localize("network_issue.no_primary_interface")} </b>
+                  <b
+                    >${this._localize("network_issue.no_primary_interface")}
+                  </b>
                 </p>
               `
             : nothing
@@ -72,7 +76,7 @@ class LandingPageNetwork extends LitElement {
                 .index=${key}
                 .disabled=${!dnsPrimaryInterfaceNameservers}
                 @click=${this._setDns}
-                >${this.localize(translationKey)}</ha-button
+                >${this._localize(translationKey)}</ha-button
               >`
           )}
         </div>
@@ -118,12 +122,12 @@ class LandingPageNetwork extends LitElement {
       // eslint-disable-next-line no-console
       console.error(err);
       showAlertDialog(this, {
-        title: this.localize("network_issue.failed"),
+        title: this._localize("network_issue.failed"),
         warning: true,
-        text: `${this.localize(
+        text: `${this._localize(
           "network_issue.set_dns_failed"
-        )}${err?.message ? ` ${this.localize("network_issue.error")}: ${err.message}` : ""}`,
-        confirmText: this.localize("network_issue.close"),
+        )}${err?.message ? ` ${this._localize("network_issue.error")}: ${err.message}` : ""}`,
+        confirmText: this._localize("network_issue.close"),
       });
     }
   }

landing-page/src/ha-landing-page.ts

@@ -9,6 +9,7 @@ import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
+import { provideLiteI18nMixin } from "../../src/mixins/provide-lite-i18n-mixin";
 import "../../src/onboarding/onboarding-welcome-links";
 import { onBoardingStyles } from "../../src/onboarding/styles";
 import { haStyle } from "../../src/resources/styles";
@@ -28,7 +29,7 @@ const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
 const SCHEDULE_FETCH_JOBS_INFO_SECONDS = 2;
 
 @customElement("ha-landing-page")
-class HaLandingPage extends LandingPageBaseElement {
+class HaLandingPage extends provideLiteI18nMixin(LandingPageBaseElement) {
   @property({ attribute: false }) public translationFragment = "landing-page";
 
   @state() private _supervisorError = false;
@@ -82,7 +83,6 @@ class HaLandingPage extends LandingPageBaseElement {
             networkIssue || this._networkInfoError
               ? html`
                   <landing-page-network
-                    .localize=${this.localize}
                     .networkInfo=${this._networkInfo}
                     .error=${this._networkInfoError}
                     @dns-set=${this._fetchSupervisorInfo}
@@ -103,13 +103,11 @@ class HaLandingPage extends LandingPageBaseElement {
               : nothing
           }
           <landing-page-logs
-            .localize=${this.localize}
             @landing-page-error=${this._showError}
           ></landing-page-logs>
         </div>
       </ha-card>
       <onboarding-welcome-links
-        .localize=${this.localize}
         .mobileApp=${this._mobileApp}
       ></onboarding-welcome-links>
       <div class="footer">

package.json

@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "8.0.0",
+    "@babel/runtime": "8.0.5",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
     "@codemirror/commands": "6.11.0",
@@ -52,22 +52,22 @@
     "@codemirror/view": "6.43.11",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.6.1",
-    "@formatjs/intl-displaynames": "7.3.13",
-    "@formatjs/intl-durationformat": "0.10.18",
-    "@formatjs/intl-getcanonicallocales": "3.2.11",
-    "@formatjs/intl-listformat": "8.3.13",
-    "@formatjs/intl-locale": "5.3.10",
-    "@formatjs/intl-numberformat": "9.4.0",
-    "@formatjs/intl-pluralrules": "6.3.13",
-    "@formatjs/intl-relativetimeformat": "12.3.13",
+    "@formatjs/intl-datetimeformat": "7.6.2",
+    "@formatjs/intl-displaynames": "7.3.14",
+    "@formatjs/intl-durationformat": "0.11.0",
+    "@formatjs/intl-getcanonicallocales": "3.2.12",
+    "@formatjs/intl-listformat": "8.3.14",
+    "@formatjs/intl-locale": "5.3.11",
+    "@formatjs/intl-numberformat": "9.4.1",
+    "@formatjs/intl-pluralrules": "6.3.14",
+    "@formatjs/intl-relativetimeformat": "12.3.14",
     "@fullcalendar/core": "6.1.21",
     "@fullcalendar/daygrid": "6.1.21",
     "@fullcalendar/interaction": "6.1.21",
     "@fullcalendar/list": "6.1.21",
     "@fullcalendar/luxon3": "6.1.21",
     "@fullcalendar/timegrid": "6.1.21",
-    "@home-assistant/webawesome": "3.7.0-ha.0",
+    "@home-assistant/webawesome": "3.7.0-ha.1",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -84,7 +84,6 @@
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
-    "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "4.4.0",
     "@tsparticles/preset-links": "4.4.0",
     "@vibrant/color": "4.0.4",
@@ -104,20 +103,20 @@
     "echarts-extension-chart2music": "0.1.1",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
-    "hls.js": "1.7.2",
+    "hls.js": "1.7.3",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.14",
+    "intl-messageformat": "11.2.15",
     "js-yaml": "5.4.1",
     "leaflet": "1.9.4",
-    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
     "maplibre-gl": "5.24.0",
-    "marked": "18.0.11",
+    "marked": "18.0.12",
     "memoize-one": "6.0.0",
+    "nanoid": "6.0.1",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
@@ -140,10 +139,10 @@
   },
   "devDependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@babel/core": "8.0.1",
+    "@babel/core": "8.0.5",
     "@babel/helper-define-polyfill-provider": "1.0.0",
     "@babel/plugin-transform-runtime": "8.0.1",
-    "@babel/preset-env": "8.0.2",
+    "@babel/preset-env": "8.0.5",
     "@bundle-stats/plugin-webpack-filter": "4.22.3",
     "@eslint/js": "10.0.1",
     "@gfx/zopfli": "1.0.15",
@@ -153,8 +152,8 @@
     "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.3",
-    "@rspack/core": "2.2.2",
+    "@rsdoctor/rspack-plugin": "1.6.4",
+    "@rspack/core": "2.2.3",
     "@rspack/dev-server": "2.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -163,7 +162,6 @@
     "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
     "@types/leaflet": "1.9.22",
-    "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.5",
@@ -197,10 +195,10 @@
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
     "jsdom": "30.0.1",
-    "jszip": "3.10.1",
+    "jszip": "3.10.2",
     "license-checker-rseidelsohn": "5.0.1",
     "lightningcss": "1.33.0",
-    "lint-staged": "17.5.0",
+    "lint-staged": "17.5.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -215,8 +213,8 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.69.0",
-    "vite": "8.2.2",
+    "typescript-eslint": "8.70.0",
+    "vite": "8.3.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
@@ -234,6 +232,6 @@
   },
   "packageManager": "[email protected]",
   "volta": {
-    "node": "24.20.0"
+    "node": "24.21.0"
   }
 }

src/auth/ha-auth-flow.ts

@@ -23,6 +23,7 @@ import type {
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
 import type { HaAuthForm } from "./ha-auth-form";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 
 type State = "loading" | "error" | "step";
 
@@ -36,12 +37,14 @@ export class HaAuthFlow extends LitElement {
 
   @property({ attribute: false }) public oauth2State?: string;
 
-  @property({ attribute: false }) public localize!: LocalizeFunc;
-
   @property({ attribute: false }) public step?: DataEntryFlowStep;
 
   @property({ attribute: false }) public initStoreToken = false;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   @state() private _storeToken = false;
 
   @state() private _state: State = "loading";
@@ -184,8 +187,8 @@ export class HaAuthFlow extends LitElement {
             >
               ${
                 this.step.type === "form"
-                  ? this.localize("ui.panel.page-authorize.form.next")
-                  : this.localize("ui.panel.page-authorize.form.start_over")
+                  ? this._localize("ui.panel.page-authorize.form.next")
+                  : this._localize("ui.panel.page-authorize.form.start_over")
               }
             </ha-button>
           </div>
@@ -193,20 +196,20 @@ export class HaAuthFlow extends LitElement {
       case "error":
         return html`
           <ha-alert alert-type="error">
-            ${this.localize("ui.panel.page-authorize.form.error", {
+            ${this._localize("ui.panel.page-authorize.form.error", {
               error: this._errorMessage,
             })}
           </ha-alert>
           <div class="action">
             <ha-button @click=${this._startOver}>
-              ${this.localize("ui.panel.page-authorize.form.start_over")}
+              ${this._localize("ui.panel.page-authorize.form.start_over")}
             </ha-button>
           </div>
         `;
       case "loading":
         return html`
           <ha-alert alert-type="info">
-            ${this.localize("ui.panel.page-authorize.form.working")}
+            ${this._localize("ui.panel.page-authorize.form.working")}
           </ha-alert>
         `;
       default:
@@ -218,8 +221,8 @@ export class HaAuthFlow extends LitElement {
     switch (step.type) {
       case "abort":
         return html`
-          ${this.localize("ui.panel.page-authorize.abort_intro")}:
-          ${this.localize(
+          ${this._localize("ui.panel.page-authorize.abort_intro")}:
+          ${this._localize(
             `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
           )}
         `;
@@ -228,15 +231,14 @@ export class HaAuthFlow extends LitElement {
           <h1>
             ${
               !["select_mfa_module", "mfa"].includes(step.step_id)
-                ? this.localize("ui.panel.page-authorize.welcome_home")
-                : this.localize("ui.panel.page-authorize.just_checking")
+                ? this._localize("ui.panel.page-authorize.welcome_home")
+                : this._localize("ui.panel.page-authorize.just_checking")
             }
           </h1>
           ${this._computeStepDescription(step)}
           ${keyed(
             step.step_id,
             html`<ha-auth-form
-              .localize=${this.localize}
               .data=${this._stepData!}
               .schema=${autocompleteLoginFields(step.data_schema)}
               .error=${step.errors}
@@ -256,7 +258,7 @@ export class HaAuthFlow extends LitElement {
                       .checked=${this._storeToken}
                       @change=${this._storeTokenChanged}
                     >
-                      ${this.localize("ui.panel.page-authorize.store_token")}
+                      ${this._localize("ui.panel.page-authorize.store_token")}
                     </ha-checkbox>
                   `
                 : ""
@@ -266,7 +268,7 @@ export class HaAuthFlow extends LitElement {
               href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
               target="_blank"
               rel="noreferrer noopener"
-              >${this.localize("ui.panel.page-authorize.forgot_password")}</a
+              >${this._localize("ui.panel.page-authorize.forgot_password")}</a
             >
           </div>
         `;
@@ -336,13 +338,13 @@ export class HaAuthFlow extends LitElement {
   private _computeStepDescription(step: DataEntryFlowStepForm) {
     const resourceKey =
       `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description` as const;
-    return this.localize(resourceKey, step.description_placeholders);
+    return this._localize(resourceKey, step.description_placeholders);
   }
 
   private _computeLabelCallback(step: DataEntryFlowStepForm) {
     // Returns a callback for ha-form to calculate labels per schema object
     return (schema) =>
-      this.localize(
+      this._localize(
         `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.data.${schema.name}`
       );
   }
@@ -350,13 +352,13 @@ export class HaAuthFlow extends LitElement {
   private _computeErrorCallback(step: DataEntryFlowStepForm) {
     // Returns a callback for ha-form to calculate error messages
     return (error) =>
-      this.localize(
+      this._localize(
         `ui.panel.page-authorize.form.providers.${step.handler[0]}.error.${error}`
       );
   }
 
   private _unknownError() {
-    return this.localize("ui.panel.page-authorize.form.unknown_error");
+    return this._localize("ui.panel.page-authorize.form.unknown_error");
   }
 
   private _startOver() {

src/auth/ha-auth-form.ts

@@ -1,6 +1,7 @@
 /* eslint-disable lit/prefer-static-styles */
 import { html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { HaForm } from "../components/ha-form/ha-form";
 import "./ha-auth-form-string";
@@ -9,11 +10,13 @@ const localizeBaseKey = "ui.panel.page-authorize.form";
 
 @customElement("ha-auth-form")
 export class HaAuthForm extends HaForm {
-  @property({ attribute: false }) public localize?: LocalizeFunc;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   protected getFormProperties(): Record<string, any> {
     return {
-      localize: this.localize,
+      localize: this._localize,
       localizeBaseKey,
     };
   }

src/auth/ha-authorize.ts

@@ -12,6 +12,7 @@ import "../components/ha-svg-icon";
 import type { AuthProvider, AuthUrlSearchParams } from "../data/auth";
 import { fetchAuthProviders } from "../data/auth";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
+import { provideLiteI18nMixin } from "../mixins/provide-lite-i18n-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
 
@@ -23,7 +24,9 @@ const appNames = {
 };
 
 @customElement("ha-authorize")
-export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
+export class HaAuthorize extends provideLiteI18nMixin(
+  litLocalizeLiteMixin(LitElement)
+) {
   @property({ attribute: false }) public clientId?: string;
 
   @property({ attribute: false }) public redirectUri?: string;
@@ -183,14 +186,12 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
                   .redirectUri=${this.redirectUri}
                   .oauth2State=${this.oauth2State}
                   .authProvider=${this._authProvider}
-                  .localize=${this.localize}
                   .initStoreToken=${this._preselectStoreToken}
                 ></ha-auth-flow>
                 ${
                   inactiveProviders!.length > 0
                     ? html`
                         <ha-pick-auth-provider
-                          .localize=${this.localize}
                           .clientId=${this.clientId}
                           .authProviders=${inactiveProviders!}
                           @pick-auth-provider=${this._handleAuthProviderPick}

src/auth/ha-pick-auth-provider.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-next";
@@ -20,13 +21,15 @@ declare global {
 export class HaPickAuthProvider extends LitElement {
   @property({ attribute: false }) public authProviders: AuthProvider[] = [];
 
-  @property({ attribute: false }) public localize!: LocalizeFunc;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   protected render() {
     return html`
       <h3>
         <span
-          >${this.localize("ui.panel.page-authorize.pick_auth_provider")}</span
+          >${this._localize("ui.panel.page-authorize.pick_auth_provider")}</span
         >
       </h3>
       <ha-list>

src/common/datetime/create_duration_data.ts

@@ -9,36 +9,34 @@ export const createDurationData = (
   }
   if (typeof duration !== "object") {
     if (typeof duration === "string" || isNaN(duration)) {
-      const parts = duration?.toString().split(":") || [];
+      const durationString = duration.toString().trim();
+      // A leading "-" negates the whole period, matching
+      // `cv.time_period_str` in core.
+      const negative = durationString[0] === "-";
+      const parts = durationString
+        .split(":")
+        .map((part) =>
+          negative && part ? -Math.abs(Number(part)) : Number(part)
+        );
+
       if (parts.length === 1) {
-        return { seconds: Number(parts[0]) };
+        return { seconds: parts[0] };
       }
       if (parts.length > 3) {
         return undefined;
       }
-      const seconds = Number(parts[2]) || 0;
-      const seconds_whole = Math.floor(seconds);
+      const seconds = parts[2] || 0;
+      const secondsWhole = Math.trunc(seconds);
       return {
-        hours: Number(parts[0]) || 0,
-        minutes: Number(parts[1]) || 0,
-        seconds: seconds_whole,
-        milliseconds: Math.floor(
-          Number((seconds - seconds_whole).toFixed(4)) * 1000
+        hours: parts[0] || 0,
+        minutes: parts[1] || 0,
+        seconds: secondsWhole,
+        milliseconds: Math.trunc(
+          Number((seconds - secondsWhole).toFixed(4)) * 1000
         ),
       };
     }
     return { seconds: duration };
   }
-  if (!("days" in duration)) {
-    return duration;
-  }
-  const { days, minutes, seconds, milliseconds } = duration;
-  let hours = duration.hours || 0;
-  hours = (hours || 0) + (days || 0) * 24;
-  return {
-    hours,
-    minutes,
-    seconds,
-    milliseconds,
-  };
+  return duration;
 };

src/common/dom/stop_propagation.ts

@@ -1 +1,7 @@
 export const stopPropagation = (ev) => ev.stopPropagation();
+
+export const stopKeydownEnterSpacePropagation = (ev: KeyboardEvent) => {
+  if (ev.key === "Enter" || ev.key === " " || ev.key === "Spacebar") {
+    ev.stopPropagation();
+  }
+};

src/common/entity/compute_entity_name_display.ts

@@ -1,33 +1,70 @@
 import type { HassEntity } from "home-assistant-js-websocket";
+import type {
+  EntityRegistryDisplayEntry,
+  EntityRegistryEntry,
+} from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
 import { ensureArray } from "../array/ensure-array";
 import { computeRTL } from "../util/compute_rtl";
 import { computeAreaName } from "./compute_area_name";
 import { computeDeviceName } from "./compute_device_name";
-import { computeEntityName, entityUseDeviceName } from "./compute_entity_name";
+import {
+  computeEntityEntryName,
+  computeEntityName,
+  entityUseDeviceName,
+} from "./compute_entity_name";
 import { computeFloorName } from "./compute_floor_name";
 import { computeStateName } from "./compute_state_name";
-import { getEntityContext } from "./context/get_entity_context";
+import {
+  getEntityContext,
+  getEntityEntryContext,
+} from "./context/get_entity_context";
+import type { EntityNameItem, EntityNameOptions } from "./entity_name_config";
 
 const DEFAULT_SEPARATOR = " ";
 
-export const DEFAULT_ENTITY_NAME = [
-  { type: "device" },
-  { type: "entity" },
-] satisfies EntityNameItem[];
+export { DEFAULT_ENTITY_NAME, ENTITY_NAME_TYPES } from "./entity_name_config";
+export type {
+  EntityNameItem,
+  EntityNameOptions,
+  EntityNameType,
+} from "./entity_name_config";
 
-export type EntityNameItem =
-  | {
-      type: "entity" | "device" | "area" | "floor";
-    }
-  | {
-      type: "text";
-      text: string;
-    };
+// Joins items that need no entity context. Returns undefined as soon as one
+// item references the registries (device, area, ...).
+const computeTextOnlyName = (
+  items: EntityNameItem[],
+  options?: EntityNameOptions
+): string | undefined =>
+  items.every((n) => n.type === "text")
+    ? items
+        .map((item) => item.text)
+        .join(options?.separator ?? DEFAULT_SEPARATOR)
+    : undefined;
 
-export interface EntityNameOptions {
-  separator?: string;
-}
+/**
+ * Name formatter used before the registry-aware one is installed
+ * (see state/connection-mixin and state/state-display-mixin). It honours a
+ * configured string or text-only name and falls back to the friendly name for
+ * anything that needs entity context, so a configured name is never dropped
+ * while the real formatter is still loading.
+ */
+export const computeEntityNameDisplayWithoutContext = (
+  stateObj: HassEntity,
+  name: string | EntityNameItem | EntityNameItem[] | undefined,
+  options?: EntityNameOptions
+): string => {
+  if (typeof name === "string") {
+    return name;
+  }
+  if (!name) {
+    return computeStateName(stateObj);
+  }
+  return (
+    computeTextOnlyName(ensureArray(name), options) ??
+    computeStateName(stateObj)
+  );
+};
 
 export const computeEntityNameDisplay = (
   stateObj: HassEntity,
@@ -52,8 +89,9 @@ export const computeEntityNameDisplay = (
   const separator = options?.separator ?? DEFAULT_SEPARATOR;
 
   // If all items are text, just join them
-  if (items.every((n) => n.type === "text")) {
-    return items.map((item) => item.text).join(separator);
+  const textOnlyName = computeTextOnlyName(items, options);
+  if (textOnlyName !== undefined) {
+    return textOnlyName;
   }
 
   const useDeviceName = entityUseDeviceName(stateObj, entities, devices);
@@ -91,20 +129,53 @@ export const computeEntityNameList = (
   areas: HomeAssistant["areas"],
   floors: HomeAssistant["floors"]
 ): (string | undefined)[] => {
-  const { device, area, floor } = getEntityContext(
-    stateObj,
+  const entry = entities[stateObj.entity_id] as
+    EntityRegistryDisplayEntry | undefined;
+
+  if (!entry) {
+    return name.map((item) =>
+      item.type === "entity"
+        ? computeStateName(stateObj)
+        : item.type === "text"
+          ? item.text
+          : undefined
+    );
+  }
+
+  return computeEntityEntryNameList(
+    entry,
+    name,
+    entities,
+    devices,
+    areas,
+    floors
+  );
+};
+
+export const computeEntityEntryNameList = (
+  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
+  name: EntityNameItem[],
+  entities: HomeAssistant["entities"],
+  devices: HomeAssistant["devices"],
+  areas: HomeAssistant["areas"],
+  floors: HomeAssistant["floors"]
+): (string | undefined)[] => {
+  const { device, parentDevice, area, floor } = getEntityEntryContext(
+    entry,
     entities,
     devices,
     areas,
     floors
   );
 
-  const names = name.map((item) => {
+  return name.map((item) => {
     switch (item.type) {
       case "entity":
-        return computeEntityName(stateObj, entities, devices);
+        return computeEntityEntryName(entry, devices);
       case "device":
         return device ? computeDeviceName(device) : undefined;
+      case "parent_device":
+        return parentDevice ? computeDeviceName(parentDevice) : undefined;
       case "area":
         return area ? computeAreaName(area) : undefined;
       case "floor":
@@ -115,8 +186,29 @@ export const computeEntityNameList = (
         return "";
     }
   });
+};
 
-  return names;
+export const computeEntitySearchLabels = (
+  stateObj: HassEntity,
+  entities: HomeAssistant["entities"],
+  devices: HomeAssistant["devices"],
+  areas: HomeAssistant["areas"],
+  floors: HomeAssistant["floors"]
+) => {
+  const { device, parentDevice, area } = getEntityContext(
+    stateObj,
+    entities,
+    devices,
+    areas,
+    floors
+  );
+  return {
+    entityName: computeEntityName(stateObj, entities, devices) || null,
+    friendlyName: computeStateName(stateObj) || null,
+    deviceName: (device && computeDeviceName(device)) || null,
+    parentDeviceName: (parentDevice && computeDeviceName(parentDevice)) || null,
+    areaName: (area && computeAreaName(area)) || null,
+  };
 };
 
 export interface EntityPickerDisplay {
@@ -136,14 +228,20 @@ export const computeEntityPickerDisplay = (
   >,
   stateObj: HassEntity
 ): EntityPickerDisplay => {
-  const [entityName, deviceName, areaName] = computeEntityNameList(
-    stateObj,
-    [{ type: "entity" }, { type: "device" }, { type: "area" }],
-    hass.entities,
-    hass.devices,
-    hass.areas,
-    hass.floors
-  );
+  const [entityName, deviceName, parentDeviceName, areaName] =
+    computeEntityNameList(
+      stateObj,
+      [
+        { type: "entity" },
+        { type: "device" },
+        { type: "parent_device" },
+        { type: "area" },
+      ],
+      hass.entities,
+      hass.devices,
+      hass.areas,
+      hass.floors
+    );
 
   const isRTL = computeRTL(
     hass.language,
@@ -152,7 +250,7 @@ export const computeEntityPickerDisplay = (
 
   const primary = entityName || deviceName || stateObj.entity_id;
   const secondary =
-    [areaName, entityName ? deviceName : undefined]
+    [areaName, parentDeviceName, entityName ? deviceName : undefined]
       .filter(Boolean)
       .join(isRTL ? " ◂ " : " ▸ ") || undefined;
 

src/common/entity/context/get_entity_context.ts

@@ -13,6 +13,7 @@ import { getDeviceAreaId } from "./get_device_context";
 interface EntityContext {
   entity: EntityRegistryDisplayEntry | null;
   device: DeviceRegistryEntry | null;
+  parentDevice: DeviceRegistryEntry | null;
   area: AreaRegistryEntry | null;
   floor: FloorRegistryEntry | null;
 }
@@ -31,6 +32,7 @@ export const getEntityContext = (
     return {
       entity: null,
       device: null,
+      parentDevice: null,
       area: null,
       floor: null,
     };
@@ -65,6 +67,9 @@ export const getEntityEntryContext = (
   const entity = entities[entry.entity_id];
   const deviceId = entry?.device_id;
   const device = deviceId ? devices[deviceId] : undefined;
+  const parentDevice = device?.parent_device_id
+    ? devices[device.parent_device_id]
+    : undefined;
   const areaId =
     entry?.area_id || (device ? getDeviceAreaId(device, devices) : undefined);
   const area = areaId ? areas[areaId] : undefined;
@@ -74,6 +79,7 @@ export const getEntityEntryContext = (
   return {
     entity: entity,
     device: device || null,
+    parentDevice: parentDevice || null,
     area: area || null,
     floor: floor || null,
   };

src/common/entity/entity_name_config.ts

@@ -0,0 +1,34 @@
+/**
+ * Shape of a composed entity name, kept free of runtime dependencies so that
+ * modules in the core entry chunk can name an entity without pulling in the
+ * registry-aware formatters from `compute_entity_name_display`.
+ */
+
+export const ENTITY_NAME_TYPES = [
+  "floor",
+  "area",
+  "parent_device",
+  "device",
+  "entity",
+] as const;
+
+export type EntityNameType = (typeof ENTITY_NAME_TYPES)[number];
+
+export type EntityNameItem =
+  | {
+      type: EntityNameType;
+    }
+  | {
+      type: "text";
+      text: string;
+    };
+
+export interface EntityNameOptions {
+  separator?: string;
+}
+
+export const DEFAULT_ENTITY_NAME = [
+  { type: "parent_device" },
+  { type: "device" },
+  { type: "entity" },
+] satisfies EntityNameItem[];

src/common/entity/get_states.ts

@@ -29,7 +29,7 @@ export const FIXED_DOMAIN_STATES = {
   fan: ["on", "off"],
   humidifier: ["on", "off"],
   input_boolean: ["on", "off"],
-  lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
+  lawn_mower: ["error", "paused", "mowing", "returning", "docked", "idle"],
   light: ["on", "off"],
   lock: [
     "jammed",
@@ -95,6 +95,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "door",
       "garage_door",
       "gas",
+      "glass_break",
       "heat",
       "light",
       "lock",

src/common/entity/state_active.ts

@@ -36,7 +36,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     case "person":
       return compareState !== "not_home";
     case "lawn_mower":
-      return !["docked", "paused"].includes(compareState);
+      return !["docked", "paused", "idle"].includes(compareState);
     case "lock":
       return compareState !== "locked";
     case "media_player":

src/common/map/base-layer.ts

@@ -12,14 +12,14 @@ import {
 
 // Generated by build-scripts/gulp/map-assets.js. The attribution comes from the
 // TileJSON, deliberately: it follows whoever serves the tiles.
-const VECTOR_STYLES = {
+export const VECTOR_STYLES = {
   light: "/static/map/light.json",
   dark: "/static/map/dark.json",
 } as const;
 
 // Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
 // worker, hence a URL rather than an import.
-const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
+export const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
 
 // MapLibre needs WebGL2 even for raster, so the fallback stays a Leaflet layer.
 // OSM serves no @2x variant.
@@ -33,8 +33,8 @@ const OSM_ATTRIBUTION =
 
 // Browsers keep about 16 live WebGL contexts and drop the oldest, which a
 // dashboard full of map cards hits. A transient loss is restored, hence a grace.
-const CONTEXT_RESTORE_GRACE = 2000;
-const RECOVERY_THROTTLE = 30000;
+export const CONTEXT_RESTORE_GRACE = 2000;
+export const RECOVERY_THROTTLE = 30000;
 
 // On the map, not the layer: marker clustering throws without a maximum. The
 // floor is 1 because at Leaflet zoom 0 the adapter drives MapLibre to -1.
@@ -55,7 +55,7 @@ export interface MapBaseLayer {
 let webGL2Supported: boolean | undefined;
 
 // Rules out iOS below 15, older Android tablets and blocklisted drivers.
-const supportsWebGL2 = (): boolean => {
+export const supportsWebGL2 = (): boolean => {
   if (webGL2Supported === undefined) {
     try {
       const context = document.createElement("canvas").getContext("webgl2");
@@ -91,7 +91,7 @@ const useDemoUpstream = (style: StyleSpecification): StyleSpecification => {
   return style;
 };
 
-const loadStyle = async (url: string): Promise<StyleSpecification> => {
+export const loadStyle = async (url: string): Promise<StyleSpecification> => {
   const style: StyleSpecification = await (await fetch(url)).json();
 
   if (__DEMO__) {
@@ -111,7 +111,7 @@ const loadStyle = async (url: string): Promise<StyleSpecification> => {
 
 // Global to MapLibre, and it throws when set twice.
 let rtlTextPluginRequested = false;
-const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
+export const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
   if (rtlTextPluginRequested) {
     return;
   }
@@ -303,9 +303,11 @@ export const createBaseLayer = async (
   leaflet: LeafletModuleType,
   map: LeafletMap,
   darkMode: boolean,
-  token: string | undefined
+  token: string | undefined,
+  // Skip the vector layer, e.g. after a permanent WebGL context loss
+  rasterOnly = false
 ): Promise<MapBaseLayer> => {
-  if (supportsWebGL2()) {
+  if (!rasterOnly && supportsWebGL2()) {
     let vectorLayer: MapBaseLayer | undefined;
     try {
       const [{ maplibreGL: createLayer }, maplibre] = await Promise.all([

src/common/map/editable-circle.ts

@@ -0,0 +1,59 @@
+/** Handle DOM and styles of the editable circle (MapEngine.addEditableCircle) */
+
+/** Hit target for the radius handle; comfortably above touch minimums */
+export const RESIZE_HANDLE_SIZE = 24;
+
+/** The visible dot inside the hit target */
+export const RESIZE_HANDLE_DOT_SIZE = 12;
+
+/** Relative radius change per arrow key press on the handle */
+export const RESIZE_KEY_STEP = 0.1;
+
+/** Advertised slider maximum; a larger radius raises it (see the engine) */
+export const RADIUS_ARIA_MAX = 100000;
+
+export const createResizeHandleElement = (label?: string): HTMLElement => {
+  const element = document.createElement("div");
+  element.className = "editable-circle-resize";
+  element.tabIndex = 0;
+  element.setAttribute("role", "slider");
+  element.setAttribute("aria-valuemin", "1");
+  element.setAttribute("aria-valuemax", String(RADIUS_ARIA_MAX));
+  if (label) {
+    element.setAttribute("aria-label", label);
+  }
+  const dot = document.createElement("div");
+  dot.className = "editable-circle-resize-dot";
+  element.appendChild(dot);
+  return element;
+};
+
+/** Styles for the handles, included by ha-map for both engines */
+export const editableCircleStyles = `
+  .editable-circle-center {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    border: 2px solid var(--card-background-color, #fff);
+    box-sizing: border-box;
+    box-shadow: var(--ha-box-shadow-s);
+  }
+  .editable-circle-resize {
+    width: ${RESIZE_HANDLE_SIZE}px;
+    height: ${RESIZE_HANDLE_SIZE}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: ew-resize;
+  }
+  .editable-circle-resize-dot {
+    width: ${RESIZE_HANDLE_DOT_SIZE}px;
+    height: ${RESIZE_HANDLE_DOT_SIZE}px;
+    border-radius: 50%;
+    background: var(--card-background-color, #fff);
+    border: 2px solid var(--primary-color);
+    box-sizing: border-box;
+    box-shadow: var(--ha-box-shadow-s);
+  }
+`;

src/common/map/engines/leaflet-map-engine.ts

@@ -0,0 +1,353 @@
+import type {
+  CircleMarker,
+  Control,
+  Map,
+  MarkerClusterGroup,
+  Polyline,
+} from "leaflet";
+import type { LeafletModuleType } from "../../dom/setup-leaflet-map";
+import type { MapBaseLayer } from "../base-layer";
+import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../base-layer";
+import { DecoratedMarker } from "../decorated_marker";
+import { isTouch } from "../../../util/is_touch";
+import type {
+  MapClusterOptions,
+  MapCircleOptions,
+  MapControlPosition,
+  MapEngine,
+  MapEngineOptions,
+  MapFitOptions,
+  MapItemHandle,
+  MapLatLng,
+  MapMarkerHandle,
+  MapMarkerOptions,
+  MapPath,
+} from "../map-engine";
+import { setMarkerAccessibility } from "../marker-accessibility";
+
+/** A leaflet marker that knows the engine handle it was created for */
+interface HandledMarker extends DecoratedMarker {
+  engineHandle?: LeafletMarkerHandle;
+}
+
+interface LeafletMarkerHandle extends MapMarkerHandle {
+  marker: HandledMarker;
+}
+
+/** The Leaflet engine: raster viewing fallback without WebGL2, no editing */
+export class LeafletMapEngine implements MapEngine {
+  /** For the ha-map jsdom tests only */
+  public leafletMap?: Map;
+
+  public Leaflet?: LeafletModuleType;
+
+  private _baseLayer?: MapBaseLayer;
+
+  private _clusterable: HandledMarker[] = [];
+
+  private _cluster?: MarkerClusterGroup;
+
+  private _clusterOptions: MapClusterOptions | null = null;
+
+  private _scaleControl?: Control.Scale;
+
+  public async init(
+    container: HTMLElement,
+    options: MapEngineOptions
+  ): Promise<void> {
+    const root = container.parentNode;
+    if (!root) {
+      throw new Error("Cannot set up a Leaflet map on a detached element");
+    }
+    // eslint-disable-next-line
+    const Leaflet = (await import("leaflet")).default as LeafletModuleType;
+    Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
+    await import("leaflet.markercluster");
+
+    const map = Leaflet.map(container, {
+      minZoom: MAP_MIN_ZOOM,
+      maxZoom: MAP_MAX_ZOOM,
+    });
+    map.attributionControl.setPrefix("");
+    for (const href of [
+      "/static/images/leaflet/leaflet.css",
+      "/static/images/leaflet/MarkerCluster.css",
+    ]) {
+      const style = document.createElement("link");
+      style.setAttribute("href", href);
+      style.setAttribute("rel", "stylesheet");
+      root.appendChild(style);
+    }
+    map.setView(options.center, options.zoom);
+
+    // The base layer adds itself; a vector layer may still fall back to raster
+    this._baseLayer = await createBaseLayer(
+      Leaflet,
+      map,
+      options.darkMode,
+      options.token,
+      options.rasterOnly ?? false
+    );
+    this.leafletMap = map;
+    this.Leaflet = Leaflet;
+    map.zoomControl?.setPosition(options.zoomControlPosition);
+
+    const { events } = options;
+    if (events.click) {
+      map.on("click", (ev) => {
+        events.click!([ev.latlng.lat, ev.latlng.lng]);
+      });
+    }
+    if (events.zoomStart) {
+      map.on("zoomstart", () => events.zoomStart!());
+    }
+    if (events.moveStart) {
+      map.on("movestart", () => events.moveStart!());
+    }
+  }
+
+  public destroy(): void {
+    this.leafletMap?.remove();
+    this.leafletMap = undefined;
+    this.Leaflet = undefined;
+    this._baseLayer = undefined;
+    this._cluster = undefined;
+    this._clusterable = [];
+    this._scaleControl = undefined;
+  }
+
+  public invalidateSize(): void {
+    this.leafletMap?.invalidateSize({ debounceMoveend: true });
+  }
+
+  public hasUsableSize(): boolean {
+    if (!this.leafletMap) {
+      return false;
+    }
+    const size = this.leafletMap.getSize();
+    if (size.x > 0 && size.y > 0) {
+      return true;
+    }
+    const container = this.leafletMap.getContainer();
+    if (container.clientWidth > 0 && container.clientHeight > 0) {
+      // The container was laid out since Leaflet last measured it
+      this.leafletMap.invalidateSize(false);
+      return true;
+    }
+    return false;
+  }
+
+  public setDarkMode(darkMode: boolean): void {
+    this._baseLayer?.setDarkMode(darkMode);
+  }
+
+  public setZoomControlPosition(position: MapControlPosition): void {
+    this.leafletMap?.zoomControl?.setPosition(position);
+  }
+
+  public setScaleRuler(options: { metric: boolean } | null): void {
+    if (this._scaleControl) {
+      this.leafletMap?.removeControl(this._scaleControl);
+      this._scaleControl = undefined;
+    }
+    if (!options || !this.leafletMap || !this.Leaflet) {
+      return;
+    }
+    this._scaleControl = this.Leaflet.control.scale({
+      position: "bottomleft",
+      metric: options.metric,
+      imperial: !options.metric,
+    });
+    this._scaleControl.addTo(this.leafletMap!);
+  }
+
+  public setView(center: MapLatLng, zoom?: number): void {
+    this.leafletMap?.setView(center, zoom);
+  }
+
+  public setZoom(zoom: number): void {
+    this.leafletMap?.setZoom(zoom);
+  }
+
+  private _getZoom(): number {
+    return this.leafletMap?.getZoom() ?? 0;
+  }
+
+  private _project(location: MapLatLng): { x: number; y: number } {
+    const point = this.leafletMap!.project(location, this._getZoom());
+    return { x: point.x, y: point.y };
+  }
+
+  public fitBounds(points: MapLatLng[], options?: MapFitOptions): void {
+    if (!this.leafletMap || !this.Leaflet || !points.length) {
+      return;
+    }
+    const bounds = this.Leaflet.latLngBounds(points).pad(options?.pad ?? 0.5);
+    this.leafletMap.fitBounds(bounds, {
+      maxZoom: options?.maxZoom,
+      animate: options?.animate,
+      paddingTopLeft: [options?.padding?.left ?? 0, options?.padding?.top ?? 0],
+      paddingBottomRight: [
+        options?.padding?.right ?? 0,
+        options?.padding?.bottom ?? 0,
+      ],
+    });
+  }
+
+  public panTo(location: MapLatLng): void {
+    this.leafletMap?.panTo(location);
+  }
+
+  public containsLocation(location: MapLatLng): boolean {
+    return this.leafletMap?.getBounds().contains(location) ?? false;
+  }
+
+  public addMarker(
+    element: HTMLElement,
+    location: MapLatLng,
+    options: MapMarkerOptions
+  ): MapMarkerHandle {
+    const decoration = options.decoration
+      ? this.Leaflet!.circle(location, {
+          interactive: false,
+          color: options.decoration.color,
+          radius: options.decoration.radius,
+        })
+      : undefined;
+
+    // Leaflet's keyboard support focuses its own wrapper, where the element's
+    // activation handlers never hear a key; the element itself takes focus
+    const interactive = options.interactive ?? true;
+    const focusable = options.focusable ?? interactive;
+    setMarkerAccessibility(element, options.title, focusable);
+    const marker: HandledMarker = new DecoratedMarker(location, decoration, {
+      icon: this.Leaflet!.divIcon({
+        html: element,
+        iconSize: options.size,
+        iconAnchor: options.anchor,
+        className: "",
+      }),
+      interactive,
+      keyboard: false,
+      title: options.title,
+    });
+
+    const handle: LeafletMarkerHandle = {
+      marker,
+      location,
+      clusterData: options.clusterData,
+      remove: () => {
+        this._cluster?.removeLayer(marker);
+        marker.remove();
+        const index = this._clusterable.indexOf(marker);
+        if (index !== -1) {
+          this._clusterable.splice(index, 1);
+        }
+      },
+    };
+    marker.engineHandle = handle;
+
+    if (options.cluster) {
+      // Placed on the map by the next setClustering call
+      this._clusterable.push(marker);
+    } else {
+      marker.addTo(this.leafletMap!);
+    }
+    return handle;
+  }
+
+  public addCircle(
+    center: MapLatLng,
+    options: MapCircleOptions
+  ): MapItemHandle {
+    const circle = this.Leaflet!.circle(center, {
+      interactive: false,
+      color: options.color,
+      radius: options.radius,
+    }).addTo(this.leafletMap!);
+    return { remove: () => circle.remove() };
+  }
+
+  public addPath(path: MapPath): MapItemHandle {
+    const items: (Polyline | CircleMarker)[] = [];
+    for (const segment of path.segments) {
+      items.push(
+        this.Leaflet!.polyline(segment.points, {
+          color: path.color,
+          opacity: segment.opacity,
+          interactive: false,
+        })
+      );
+    }
+    for (const pathMarker of path.markers) {
+      items.push(
+        this.Leaflet!.circleMarker(pathMarker.location, {
+          radius: isTouch ? 8 : 3,
+          color: path.color,
+          opacity: pathMarker.opacity,
+          fillOpacity: pathMarker.opacity,
+          interactive: true,
+        }).bindTooltip(pathMarker.tooltipHtml, { direction: "top" })
+      );
+    }
+    items.forEach((item) => item.addTo(this.leafletMap!));
+    return { remove: () => items.forEach((item) => item.remove()) };
+  }
+
+  public setClustering(options: MapClusterOptions | null): void {
+    if (this._cluster) {
+      this._cluster.remove();
+      this._cluster = undefined;
+    }
+    this._clusterOptions = options;
+    if (!this.leafletMap || !this.Leaflet) {
+      return;
+    }
+    if (!options) {
+      this._clusterable.forEach((marker) => marker.addTo(this.leafletMap!));
+      return;
+    }
+    // markercluster groups by proximity only; groupKey is not supported here
+    this._cluster = this.Leaflet.markerClusterGroup({
+      showCoverageOnHover: false,
+      removeOutsideVisibleBounds: false,
+      maxClusterRadius: options.radius,
+      iconCreateFunction: (cluster) => {
+        const members = (cluster.getAllChildMarkers() as HandledMarker[]).map(
+          (marker) => marker.engineHandle!
+        );
+        const latLng = cluster.getLatLng();
+        const icon = this._clusterOptions!.iconBuilder(members, [
+          latLng.lat,
+          latLng.lng,
+        ]);
+        // The element fills the divIcon wrapper, which gets the size
+        icon.element.style.width = `${icon.size[0]}px`;
+        icon.element.style.height = `${icon.size[1]}px`;
+        // markercluster pins icons to the cluster, so a location override becomes an anchor shift
+        let anchor = icon.anchor;
+        if (icon.location) {
+          const clusterPoint = this._project([latLng.lat, latLng.lng]);
+          const targetPoint = this._project(icon.location);
+          const base = anchor ?? [icon.size[0] / 2, icon.size[1] / 2];
+          anchor = [
+            base[0] - (targetPoint.x - clusterPoint.x),
+            base[1] - (targetPoint.y - clusterPoint.y),
+          ];
+        }
+        return this.Leaflet!.divIcon({
+          html: icon.element,
+          iconSize: icon.size,
+          iconAnchor: anchor,
+          className: "",
+        });
+      },
+    });
+    this._cluster.addLayers(this._clusterable);
+    this.leafletMap!.addLayer(this._cluster!);
+  }
+
+  public refreshClusters(): void {
+    this._cluster?.refreshClusters();
+  }
+}

src/common/map/entity-map-colors.ts

@@ -0,0 +1,88 @@
+import memoizeOne from "memoize-one";
+import { getColorByIndex } from "../color/colors";
+import { computeDomain } from "../entity/compute_domain";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+
+/**
+ * Map colors for entities, by registry creation order, so an entity has the
+ * same color on every map. The registry comes from the fullEntitiesContext;
+ * entities without an entry (e.g. YAML zones) get a color derived from their
+ * id.
+ */
+
+export const HOME_ZONE_ENTITY_ID = "zone.home";
+
+/** Domains whose entities are colored by creation order */
+const ORDERED_DOMAINS = ["zone", "person", "device_tracker"];
+
+// One index per registry update, shared by every map on the page. Zones,
+// persons and trackers share one sequence, so a person never has the color
+// of the zone it is in.
+const creationIndex = memoizeOne(
+  (entries: EntityRegistryEntry[]): Record<string, number> => {
+    const index: Record<string, number> = {};
+    entries
+      .filter(
+        (entry) =>
+          ORDERED_DOMAINS.includes(computeDomain(entry.entity_id)) &&
+          // The home zone has a fixed color and does not take a palette slot
+          entry.entity_id !== HOME_ZONE_ENTITY_ID
+      )
+      .sort((a, b) => a.created_at - b.created_at || a.id.localeCompare(b.id))
+      .forEach((entry, i) => {
+        index[entry.entity_id] = i;
+      });
+    return index;
+  }
+);
+
+// For entities without a registry entry
+const hashIndex = (entityId: string): number => {
+  let hash = 5381;
+  for (let i = 0; i < entityId.length; i++) {
+    hash = (hash * 33 + entityId.charCodeAt(i)) % 2147483647;
+  }
+  return hash;
+};
+
+/** The palette color of an entity on a map */
+export const entityMapColor = (
+  entityId: string,
+  entries: EntityRegistryEntry[],
+  computedStyles: CSSStyleDeclaration
+): string =>
+  getColorByIndex(
+    creationIndex(entries)[entityId] ?? hashIndex(entityId),
+    computedStyles
+  );
+
+/** The color a new zone will take once created, from the next creation-order slot */
+export const nextZoneColor = (
+  passive: boolean,
+  entries: EntityRegistryEntry[],
+  computedStyles: CSSStyleDeclaration
+): string => {
+  if (passive) {
+    return computedStyles.getPropertyValue("--secondary-text-color");
+  }
+  return getColorByIndex(
+    Object.keys(creationIndex(entries)).length,
+    computedStyles
+  );
+};
+
+/** A zone's color: primary for home, muted for passive, its entity map color otherwise */
+export const zoneColor = (
+  entityId: string,
+  passive: boolean,
+  entries: EntityRegistryEntry[],
+  computedStyles: CSSStyleDeclaration
+): string => {
+  if (entityId === HOME_ZONE_ENTITY_ID) {
+    return computedStyles.getPropertyValue("--primary-color");
+  }
+  if (passive) {
+    return computedStyles.getPropertyValue("--secondary-text-color");
+  }
+  return entityMapColor(entityId, entries, computedStyles);
+};

src/common/map/map-engine.ts

@@ -0,0 +1,311 @@
+/**
+ * Map engine abstraction for ha-map: MapLibre GL where WebGL2 is available,
+ * Leaflet as the viewing fallback. The Leaflet engine is frozen at this
+ * contract; new capabilities go on MapLibre only, as optional members like
+ * `editing`.
+ *
+ * Positions are [latitude, longitude]; zoom levels use Leaflet semantics.
+ */
+
+export type MapLatLng = [latitude: number, longitude: number];
+
+export type MapControlPosition =
+  "topleft" | "topright" | "bottomleft" | "bottomright";
+
+export interface MapEngineEvents {
+  /** Click on the map surface, not on a marker */
+  click(location: MapLatLng): void;
+  /** Zoom is starting, programmatic or not */
+  zoomStart(): void;
+  /** The map starts moving, programmatic or not */
+  moveStart(): void;
+  /** The engine can no longer render; the host switches to the fallback */
+  fatal(): void;
+}
+
+export interface MapEngineOptions {
+  center: MapLatLng;
+  zoom: number;
+  darkMode: boolean;
+  /** Token for core's tile proxy */
+  token?: string;
+  zoomControlPosition: MapControlPosition;
+  /** Render without WebGL after a permanent context loss; WebGL engines reject init */
+  rasterOnly?: boolean;
+  events: Partial<MapEngineEvents>;
+}
+
+export interface MapFitOptions {
+  /** Do not zoom in beyond this level even if the bounds would allow it */
+  maxZoom?: number;
+  /** Relative padding around the bounds, e.g. 0.5 grows them by 50% */
+  pad?: number;
+  /** Ease the camera to the bounds instead of jumping; defaults to true */
+  animate?: boolean;
+  /** Viewport pixels covered by overlays; the bounds fit inside the rest */
+  padding?: MapFitPadding;
+}
+
+export interface MapFitPadding {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+export interface MapMarkerOptions {
+  /** Rendered size of the element in pixels */
+  size: [width: number, height: number];
+  /** Point of the element placed on the coordinate, from its top left; defaults to the center */
+  anchor?: [x: number, y: number];
+  /** Takes pointer input; defaults to true */
+  interactive?: boolean;
+  /** A keyboard-focusable button, for markers that act on activation; defaults to interactive */
+  focusable?: boolean;
+  /** Accessible name */
+  title?: string;
+  /** A meter-radius circle sharing the marker's lifecycle (GPS accuracy) */
+  decoration?: MapCircleOptions;
+  /** Cluster this marker; it appears once setClustering is called */
+  cluster?: boolean;
+  /** Caller data handed back to the cluster icon builder */
+  clusterData?: unknown;
+}
+
+export interface MapCircleOptions {
+  /** Radius in meters */
+  radius: number;
+  /** Stroke color; the fill is derived from it, translucent */
+  color: string;
+}
+
+export interface MapPathSegment {
+  points: MapLatLng[];
+  opacity?: number;
+}
+
+export interface MapPathMarker {
+  location: MapLatLng;
+  opacity?: number;
+  /** Tooltip/popup HTML shown on hover; caller is responsible for escaping */
+  tooltipHtml: string;
+}
+
+export interface MapPath {
+  color: string;
+  segments: MapPathSegment[];
+  markers: MapPathMarker[];
+}
+
+/** Handle to anything placed on the map; remove() must be idempotent */
+export interface MapItemHandle {
+  remove(): void;
+}
+
+export interface MapMarkerHandle extends MapItemHandle {
+  readonly location: MapLatLng;
+  readonly clusterData?: unknown;
+}
+
+export interface MapDraggableMarkerOptions extends MapMarkerOptions {
+  onDragEnd?(location: MapLatLng): void;
+}
+
+export interface MapEditableCircleOptions {
+  /** Radius in meters */
+  radius: number;
+  /** Stroke color; the fill is derived from it, translucent */
+  color: string;
+  /** Element shown at the center, e.g. the zone icon; a plain dot otherwise */
+  centerElement?: HTMLElement;
+  centerSize?: [width: number, height: number];
+  title?: string;
+  /** The center can be dragged */
+  moveable?: boolean;
+  /** A handle on the edge can be dragged to change the radius */
+  resizable?: boolean;
+  /** Accessible name of the radius handle, e.g. "Radius of Home in meters" */
+  resizeLabel?: string;
+  onMove?(center: MapLatLng): void;
+  onResize?(radius: number): void;
+  onClick?(): void;
+}
+
+export interface MapEditingSupport {
+  /** Place a draggable HTML element marker */
+  addDraggableMarker(
+    element: HTMLElement,
+    location: MapLatLng,
+    options: MapDraggableMarkerOptions
+  ): MapEditableMarkerHandle;
+
+  /** Draw a circle whose center and radius can be dragged */
+  addEditableCircle(
+    center: MapLatLng,
+    options: MapEditableCircleOptions
+  ): MapEditableCircleHandle;
+}
+
+/** A circle with drag handles for its center and radius */
+export interface MapEditableCircleHandle extends MapItemHandle {
+  readonly center: MapLatLng;
+  readonly radius: number;
+  /** Move and resize without recreating (no-op mid-drag) */
+  update(center: MapLatLng, radius: number): void;
+}
+
+export interface MapEditableMarkerHandle extends MapMarkerHandle {
+  /** Move without recreating (no-op mid-drag) */
+  setLocation(location: MapLatLng): void;
+}
+
+export interface MapClusterIcon {
+  element: HTMLElement;
+  size: [width: number, height: number];
+  /** Like MapMarkerOptions.anchor; defaults to the element's center */
+  anchor?: [x: number, y: number];
+  /** Show the icon here instead of at the cluster, e.g. attached to a zone */
+  location?: MapLatLng;
+}
+
+export interface MapClusterOptions {
+  /** Cluster markers closer than this many screen pixels */
+  radius: number;
+  /**
+   * Markers sharing a key (e.g. their zone) form one group while they span
+   * at most groupRadius pixels; beyond that, and without a key, they cluster
+   * by proximity.
+   */
+  groupKey?(marker: MapMarkerHandle): string | undefined;
+  groupRadius?: number;
+  /** Builds a cluster's element; called when its members change and on refreshClusters() */
+  iconBuilder(members: MapMarkerHandle[], location: MapLatLng): MapClusterIcon;
+}
+
+export interface MapEngine {
+  /** Create the map in the container; call once */
+  init(container: HTMLElement, options: MapEngineOptions): Promise<void>;
+
+  /** Tear down the map and release its resources (DOM, workers, WebGL) */
+  destroy(): void;
+
+  /** Re-measure the container after a size change */
+  invalidateSize(): void;
+
+  /** Whether the map has a non-zero size, re-measuring if needed */
+  hasUsableSize(): boolean;
+
+  setDarkMode(darkMode: boolean): void;
+
+  setZoomControlPosition(position: MapControlPosition): void;
+
+  /** Show a scale ruler (bottom start); null hides it */
+  setScaleRuler(options: { metric: boolean } | null): void;
+
+  setView(center: MapLatLng, zoom?: number): void;
+
+  setZoom(zoom: number): void;
+
+  /** Fit the given points into view; a single point centers on it */
+  fitBounds(points: MapLatLng[], options?: MapFitOptions): void;
+
+  /** Pan to the location, keeping the zoom */
+  panTo(location: MapLatLng): void;
+
+  /** Whether the location is inside the current viewport */
+  containsLocation(location: MapLatLng): boolean;
+
+  /** Place a caller-owned element on the map */
+  addMarker(
+    element: HTMLElement,
+    location: MapLatLng,
+    options: MapMarkerOptions
+  ): MapMarkerHandle;
+
+  /** Draw a meter-radius circle (zone radius) */
+  addCircle(center: MapLatLng, options: MapCircleOptions): MapItemHandle;
+
+  /** Editing support, MapLibre only; undefined on the Leaflet fallback */
+  editing?: MapEditingSupport;
+
+  /** Draw one history trail (points with tooltips, connecting segments) */
+  addPath(path: MapPath): MapItemHandle;
+
+  /** Cluster the markers added with cluster: true; call after each batch of addMarker calls */
+  setClustering(options: MapClusterOptions | null): void;
+
+  /** Rebuild cluster icons without regrouping (e.g. after a style change) */
+  refreshClusters(): void;
+}
+
+const EARTH_RADIUS = 6371008.8;
+
+const toRadians = (degrees: number) => (degrees * Math.PI) / 180;
+const toDegrees = (radians: number) => (radians * 180) / Math.PI;
+
+/**
+ * The point a distance away from center along a bearing (degrees clockwise
+ * from north), on the great circle. Longitude is left unwrapped so a ring of
+ * points stays continuous across the antimeridian.
+ */
+export const destinationPoint = (
+  center: MapLatLng,
+  distanceInMeters: number,
+  bearingDegrees: number
+): MapLatLng => {
+  const angular = distanceInMeters / EARTH_RADIUS;
+  const lat = toRadians(center[0]);
+  const bearing = toRadians(bearingDegrees);
+  const destLat = Math.asin(
+    Math.sin(lat) * Math.cos(angular) +
+      Math.cos(lat) * Math.sin(angular) * Math.cos(bearing)
+  );
+  const dLng = Math.atan2(
+    Math.sin(bearing) * Math.sin(angular) * Math.cos(lat),
+    Math.cos(angular) - Math.sin(lat) * Math.sin(destLat)
+  );
+  return [toDegrees(destLat), center[1] + toDegrees(dLng)];
+};
+
+/** Great-circle distance in meters */
+export const distanceMeters = (a: MapLatLng, b: MapLatLng): number => {
+  const dLat = toRadians(b[0] - a[0]);
+  const dLng = toRadians(b[1] - a[1]);
+  const h =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos(toRadians(a[0])) *
+      Math.cos(toRadians(b[0])) *
+      Math.sin(dLng / 2) ** 2;
+  return 2 * EARTH_RADIUS * Math.asin(Math.sqrt(h));
+};
+
+/** The point the given distance due east of center, e.g. for a resize handle */
+export const pointEastOf = (
+  center: MapLatLng,
+  distanceInMeters: number
+): MapLatLng => destinationPoint(center, distanceInMeters, 90);
+
+/**
+ * Bounding box corners of a circle, for fitting a radius into view. A circle
+ * that reaches a pole spans every longitude.
+ */
+export const circleBoundsPoints = (
+  center: MapLatLng,
+  radiusMeters: number
+): MapLatLng[] => {
+  const angular = radiusMeters / EARTH_RADIUS;
+  const latMin = Math.max(-90, center[0] - toDegrees(angular));
+  const latMax = Math.min(90, center[0] + toDegrees(angular));
+  const sinRatio = Math.sin(angular) / Math.cos(toRadians(center[0]));
+  if (latMin <= -90 || latMax >= 90 || Math.abs(sinRatio) >= 1) {
+    return [
+      [latMin, -180],
+      [latMax, 180],
+    ];
+  }
+  const dLng = toDegrees(Math.asin(sinRatio));
+  return [
+    [latMin, center[1] - dLng],
+    [latMax, center[1] + dLng],
+  ];
+};

src/common/map/marker-accessibility.ts

@@ -0,0 +1,57 @@
+/**
+ * Marker elements may be focusable buttons on both engines, so the caller's
+ * element is the keyboard target and needs a name and a role. MapLibre would
+ * otherwise label it "Map marker".
+ *
+ * What the engine sets is recorded on the element, so a rebuilt marker on a
+ * reused element gets fresh attributes while the caller's own are left alone.
+ */
+
+const OWNED = "haMapA11y";
+
+export const setMarkerAccessibility = (
+  element: HTMLElement,
+  title: string | undefined,
+  focusable: boolean
+): void => {
+  clearMarkerAccessibility(element);
+  const owned: string[] = [];
+  if (
+    title &&
+    !element.hasAttribute("aria-label") &&
+    !element.hasAttribute("aria-labelledby")
+  ) {
+    element.setAttribute("aria-label", title);
+    owned.push("aria-label");
+  }
+  if (!element.hasAttribute("role")) {
+    if (focusable) {
+      element.setAttribute("role", "button");
+      owned.push("role");
+    } else if (title) {
+      element.setAttribute("role", "img");
+      owned.push("role");
+    } else {
+      element.setAttribute("aria-hidden", "true");
+      owned.push("aria-hidden");
+    }
+  }
+  if (focusable && !element.hasAttribute("tabindex")) {
+    element.tabIndex = 0;
+    owned.push("tabindex");
+  }
+  element.dataset[OWNED] = owned.join(" ");
+};
+
+/** Removes what setMarkerAccessibility set on the element */
+export const clearMarkerAccessibility = (element: HTMLElement): void => {
+  const owned = element.dataset[OWNED];
+  if (owned === undefined) {
+    return;
+  }
+  owned
+    .split(" ")
+    .filter(Boolean)
+    .forEach((name) => element.removeAttribute(name));
+  delete element.dataset[OWNED];
+};

src/common/map/zone-marker.ts

@@ -0,0 +1,67 @@
+import { getContrastedColorHex } from "../color/rgb";
+
+/** The zone marker: a colored circle with the zone's icon or initials, shared by the map and the zone editor */
+
+export const ZONE_CIRCLE_SIZE = 36;
+
+// Content color contrasting the fill; not every theme color parses
+export const contrastingZoneContent = (color: string): string => {
+  try {
+    return getContrastedColorHex(color.trim());
+  } catch {
+    return "#ffffff";
+  }
+};
+
+export const zoneInitials = (name: string): string =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2);
+
+export const createZoneMarkerElement = (options: {
+  color: string;
+  icon?: string;
+  /** Path for an ha-svg-icon, when there is no icon name */
+  iconPath?: string;
+  name: string;
+}): HTMLElement => {
+  const element = document.createElement("div");
+  element.className = "zone-circle";
+  element.style.backgroundColor = options.color;
+  element.style.color = contrastingZoneContent(options.color);
+  if (options.icon) {
+    const icon = document.createElement("ha-icon");
+    icon.setAttribute("icon", options.icon);
+    element.appendChild(icon);
+  } else if (options.iconPath) {
+    const icon = document.createElement("ha-svg-icon");
+    icon.setAttribute("path", options.iconPath);
+    element.appendChild(icon);
+  } else {
+    const initials = document.createElement("span");
+    initials.textContent = zoneInitials(options.name);
+    element.appendChild(initials);
+  }
+  return element;
+};
+
+/** Styles for the zone marker, included by ha-map */
+export const zoneMarkerStyles = `
+  .zone-circle {
+    width: ${ZONE_CIRCLE_SIZE}px;
+    height: ${ZONE_CIRCLE_SIZE}px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--card-background-color, #fff);
+    box-sizing: border-box;
+    box-shadow: var(--ha-box-shadow-s);
+    overflow: hidden;
+    font-size: var(--ha-font-size-s);
+    font-weight: var(--ha-font-weight-medium);
+    --mdc-icon-size: ${ZONE_CIRCLE_SIZE / 2}px;
+  }
+`;

src/common/translations/entity-state.ts

@@ -31,11 +31,9 @@ export type FormatEntityAttributeNameFunc = (
   attribute: string
 ) => string;
 
-export type EntityNameType = "entity" | "device" | "area" | "floor";
-
 export type FormatEntityNameFunc = (
   stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[],
+  name: string | EntityNameItem | EntityNameItem[] | undefined,
   options?: EntityNameOptions
 ) => string;
 

src/common/translations/lite-internationalization.ts

@@ -0,0 +1,48 @@
+import {
+  DateFormat,
+  FirstWeekday,
+  NumberFormat,
+  TimeFormat,
+  TimeZone,
+} from "../../data/translation";
+import { translationMetadata } from "../../resources/translations-metadata";
+import type { HomeAssistantInternationalization } from "../../types";
+import type { LocalizeFunc } from "./localize";
+
+/**
+ * Builds an internationalization context value for the "lite" localize mode
+ * used before a `hass` object exists. Locale falls back to browser defaults and
+ * the lazy loaders are stubs that warn when called.
+ */
+export const buildLiteInternationalization = (
+  language: string,
+  localize: LocalizeFunc
+): HomeAssistantInternationalization => ({
+  language,
+  selectedLanguage: language,
+  locale: {
+    language,
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.language,
+    date_format: DateFormat.language,
+    time_zone: TimeZone.local,
+    first_weekday: FirstWeekday.language,
+  },
+  localize,
+  translationMetadata,
+  loadBackendTranslation: async (category, integrations, configFlow) => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "loadBackendTranslation called in lite i18n mode; backend strings are not available",
+      { category, integrations, configFlow }
+    );
+    return localize;
+  },
+  loadFragmentTranslation: async (fragment) => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `loadFragmentTranslation("${fragment}") called in lite i18n mode; fragment not loaded`
+    );
+    return undefined;
+  },
+});

src/common/url/github.ts

@@ -0,0 +1,5 @@
+export const GITHUB_CORE_ISSUES_URL =
+  "https://github.com/home-assistant/core/issues";
+
+export const GITHUB_FRONTEND_ISSUES_URL =
+  "https://github.com/home-assistant/frontend/issues";

src/components/automation/ha-automation-condition-summary.ts

@@ -0,0 +1,155 @@
+import { consume, type ContextType } from "@lit/context";
+import { mdiCommentTextOutline } from "@mdi/js";
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { truncateWithEllipsis } from "../../common/string/truncate-with-ellipsis";
+import type { Condition } from "../../data/automation";
+import type { ConditionDescription } from "../../data/condition";
+import { internationalizationContext } from "../../data/context";
+import "../../panels/config/automation/ha-automation-row-behavior";
+import "../../panels/config/automation/ha-automation-row-options";
+import { getDeviceTarget } from "../../panels/config/automation/target/get_device_target";
+import { getEntityTarget } from "../../panels/config/automation/target/get_entity_target";
+import "../../panels/config/automation/target/ha-automation-row-targets";
+import "../ha-svg-icon";
+import "../ha-tooltip";
+
+@customElement("ha-automation-condition-summary")
+export class HaAutomationConditionSummary extends LitElement {
+  @property() public label = "";
+
+  @property({ attribute: false }) public condition?: Condition;
+
+  @property({ attribute: false }) public description?: ConditionDescription;
+
+  @property({ attribute: false }) public isNew = false;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  private _getEntityTarget = memoizeOne(getEntityTarget);
+
+  private _getDeviceTarget = memoizeOne(getDeviceTarget);
+
+  protected render() {
+    const descriptionHasTarget = "target" in (this.description || {});
+    const hasEntityTarget =
+      this.condition?.condition === "state" ||
+      this.condition?.condition === "numeric_state";
+    const targetRequired =
+      (descriptionHasTarget || hasEntityTarget) && !this.isNew;
+    const note = this.condition?.note?.trim();
+
+    let target: HassServiceTarget | undefined;
+    if (this.condition) {
+      if (descriptionHasTarget && "target" in this.condition) {
+        target = this.condition.target;
+      } else if (
+        hasEntityTarget &&
+        "entity_id" in this.condition &&
+        this.condition.entity_id
+      ) {
+        target = this._getEntityTarget(this.condition.entity_id);
+      } else if ("device_id" in this.condition && this.condition.device_id) {
+        target = this._getDeviceTarget(this.condition.device_id);
+      }
+    }
+
+    return html`
+      <h3>
+        ${this.label}
+        ${
+          this.description && this.condition
+            ? html`<ha-automation-row-behavior
+                mode="condition"
+                .config=${this.condition}
+              ></ha-automation-row-behavior>`
+            : nothing
+        }
+        ${
+          target !== undefined || targetRequired
+            ? html`<ha-automation-row-targets
+                .target=${target}
+                .targetRequired=${targetRequired}
+                .selector=${
+                  this.description?.target
+                    ? { target: this.description.target }
+                    : undefined
+                }
+                .interactive=${this.condition?.condition !== "device"}
+              ></ha-automation-row-targets>`
+            : nothing
+        }
+        ${
+          this.description && this.condition
+            ? html`<ha-automation-row-options
+                .config=${this.condition}
+              ></ha-automation-row-options>`
+            : nothing
+        }
+        <slot name="references"></slot>
+        ${
+          note
+            ? html`
+                <ha-svg-icon
+                  id="note-icon"
+                  tabindex="0"
+                  role="img"
+                  .path=${mdiCommentTextOutline}
+                  aria-label=${this._i18n.localize(
+                    "ui.panel.config.automation.editor.note.label"
+                  )}
+                  class="note-indicator"
+                ></ha-svg-icon>
+                <ha-tooltip for="note-icon"
+                  ><p>${truncateWithEllipsis(note, 250)}</p></ha-tooltip
+                >
+              `
+            : nothing
+        }
+      </h3>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      min-width: 0;
+    }
+    h3 {
+      margin: 0;
+      font-size: inherit;
+      font-weight: inherit;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: var(--ha-space-2);
+      padding: var(--ha-space-2) 0;
+      min-height: 32px;
+      max-width: 100%;
+    }
+    .note-indicator {
+      color: var(--ha-color-on-neutral-normal);
+    }
+    ha-tooltip {
+      cursor: default;
+    }
+    ha-tooltip::part(body) {
+      cursor: default;
+      max-width: 300px;
+    }
+    ha-tooltip p {
+      white-space: pre-wrap;
+      margin: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-summary": HaAutomationConditionSummary;
+  }
+}

src/components/automation/ha-automation-row-event-chip.ts

@@ -93,9 +93,9 @@ export class HaAutomationRowEventChip extends LitElement {
     }
 
     :host([variant="neutral"]) {
-      --background-color: var(--ha-color-fill-neutral-normal-resting);
-      --background-color-hover: var(--ha-color-fill-neutral-normal-hover);
-      --text-color: var(--ha-color-on-neutral-normal);
+      --background-color: var(--ha-color-fill-neutral-loud-resting);
+      --background-color-hover: var(--ha-color-fill-neutral-loud-hover);
+      --text-color: var(--ha-color-on-neutral-loud);
     }
 
     :host([variant="success"]) {

src/components/automation/ha-automation-row.ts

@@ -152,7 +152,7 @@ export class HaAutomationRow extends LitElement {
       margin-inline-end: initial;
     }
     :host([building-block]) .leading-icon-wrapper {
-      background-color: var(--ha-color-fill-neutral-loud-resting);
+      border: 1px solid var(--ha-color-border-neutral-normal);
       border-radius: var(--ha-border-radius-md);
       padding: var(--ha-space-1);
       margin-top: 10px;
@@ -172,7 +172,6 @@ export class HaAutomationRow extends LitElement {
     :host([building-block]) ::slotted([slot="leading-icon"].action-icon),
     :host([building-block]) ::slotted(#condition-icon) {
       --mdc-icon-size: var(--ha-space-5);
-      color: var(--white-color);
       transform: rotate(-45deg);
     }
     :host([collapsed]) .expand-button {
@@ -185,9 +184,16 @@ export class HaAutomationRow extends LitElement {
       outline-offset: -2px;
       outline-width: 2px;
     }
-    :host([disabled]) .row {
-      border-top-right-radius: var(--ha-border-radius-square);
-      border-top-left-radius: var(--ha-border-radius-square);
+    :host([disabled]) .row,
+    :host([disabled]) ::slotted([slot="leading-icon"]) {
+      color: var(--ha-color-text-disabled);
+    }
+    :host([disabled]) .leading-icon-wrapper {
+      opacity: 0.6;
+    }
+    :host([disabled]) ::slotted([slot="header"]) {
+      opacity: 0.6;
+      text-decoration: line-through;
     }
     .header {
       position: relative;

src/components/chart/down-sample.ts

@@ -39,7 +39,7 @@ const FRAME_SIZES = [
 ].flat();
 
 // Always rounds down, so no chart ends up with fewer frames than it asked for.
-function snapFrameSize(step: number): number {
+export function snapFrameSize(step: number): number {
   if (step >= DAY) {
     return Math.floor(step / DAY) * DAY;
   }

src/components/chart/ha-chart-base.ts

@@ -34,6 +34,7 @@ import type {
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { afterNextRender } from "../../common/util/render-status";
+import { MobileAwareMixin } from "../../mixins/mobile-aware-mixin";
 import { uiContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
 import type {
@@ -57,7 +58,17 @@ export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
-const DEFAULT_CHART_WIDTH = 500;
+export const DEFAULT_CHART_WIDTH = 500;
+// Slack so a chart is up to date before a scroll can reach it. A phone screen
+// is short enough for a whole screenful; on a desktop that would cover the page.
+const VISIBILITY_ROOT_MARGIN_NARROW = "100%";
+const VISIBILITY_ROOT_MARGIN = "300px";
+const DEFERRED_PROPS = [
+  "options",
+  "data",
+  "_hiddenDatasets",
+  "_isZoomed",
+] as const;
 
 type RawSeriesOption = Exclude<
   NonNullable<ECOption["series"]>,
@@ -106,7 +117,7 @@ export type CustomLegendOption = ECOption["legend"] & {
 };
 
 @customElement("ha-chart-base")
-export class HaChartBase extends LitElement {
+export class HaChartBase extends MobileAwareMixin(LitElement) {
   public chart?: EChartsType;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -183,20 +194,38 @@ export class HaChartBase extends LitElement {
 
   private _layoutTransitionActive = false;
 
+  // Both start visible so a chart on screen renders on its first update rather
+  // than waiting a frame for the observers. A chart that starts off screen is
+  // therefore still built once; only its later updates are gated.
+  private _intersecting = true;
+
+  private _hasSize = true;
+
+  // Reported by the ResizeObserver, so rendering and downsampling need not
+  // measure layout themselves once it has fired.
+  private _contentWidth?: number;
+
   // @ts-ignore
   private _resizeController = new ResizeController(this, {
-    callback: () => {
+    callback: (entries) => {
+      // The controller also fires once with no entries when it starts observing.
+      const contentRect = entries[entries.length - 1]?.contentRect;
+      if (contentRect) {
+        this._contentWidth = contentRect.width;
+        this._hasSize = contentRect.width > 0 && contentRect.height > 0;
+      }
       if (this.chart) {
         if (this._suspendResize) {
           this._shouldResizeChart = true;
-          return;
-        }
-        if (!this.chart.getZr().animation.isFinished()) {
+        } else if (!this.chart.getZr().animation.isFinished()) {
           this._shouldResizeChart = true;
         } else {
           this.chart.resize();
         }
       }
+      if (!this._suspendResize) {
+        this._applyDeferredWork();
+      }
     },
   });
 
@@ -210,10 +239,24 @@ export class HaChartBase extends LitElement {
 
   private _pendingSetup = false;
 
+  private _pendingUpdate?: Set<PropertyKey>;
+
+  private _pendingOptions?: HaECOption;
+
+  private _pendingZoom?: [number, number, boolean];
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._legendPointerCancel();
     this._pendingSetup = false;
+    this._pendingUpdate = undefined;
+    this._pendingOptions = undefined;
+    this._pendingZoom = undefined;
+    // The observers are about to be torn down, so nothing would correct a stale
+    // value if this element is reattached inside a hidden container.
+    this._intersecting = false;
+    this._hasSize = false;
+    this._contentWidth = undefined;
     while (this._listeners.length) {
       this._listeners.pop()!();
     }
@@ -227,14 +270,31 @@ export class HaChartBase extends LitElement {
     super.connectedCallback();
     if (this.hasUpdated) {
       this._pendingSetup = true;
-      afterNextRender(() => {
-        if (this.isConnected && this._pendingSetup) {
-          this._pendingSetup = false;
-          this._setupChart();
-        }
-      });
+      afterNextRender(() => this._applyDeferredWork());
     }
 
+    const handleVisibilityChange = () => this._applyDeferredWork();
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    this._listeners.push(() =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+    );
+
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        this._intersecting = entries[entries.length - 1].isIntersecting;
+        if (!this._suspendResize) {
+          this._applyDeferredWork();
+        }
+      },
+      {
+        rootMargin: this._isMobileSize
+          ? VISIBILITY_ROOT_MARGIN_NARROW
+          : VISIBILITY_ROOT_MARGIN,
+      }
+    );
+    intersectionObserver.observe(this);
+    this._listeners.push(() => intersectionObserver.disconnect());
+
     this._listeners.push(
       listenMediaQuery("(prefers-reduced-motion)", (matches) => {
         if (this._reducedMotion !== matches) {
@@ -300,6 +360,7 @@ export class HaChartBase extends LitElement {
       this._suspendResize = this._layoutTransitionActive;
       if (!this._suspendResize) {
         this._resizeChartIfNeeded();
+        this._applyDeferredWork();
       }
     };
     window.addEventListener("hass-layout-transition", handleLayoutTransition);
@@ -312,24 +373,105 @@ export class HaChartBase extends LitElement {
   }
 
   protected firstUpdated() {
-    if (this.isConnected) {
-      this._setupChart();
+    if (!this.isConnected) {
+      return;
     }
+    // The only measurement taken here: neither observer has reported yet, and a
+    // chart first rendered inside a hidden container has to defer its setup
+    // rather than build against a guessed width.
+    this._hasSize = this.clientWidth > 0 && this.clientHeight > 0;
+    if (this._isVisible()) {
+      this._setupChart();
+    } else {
+      this._pendingSetup = true;
+    }
+  }
+
+  private _isVisible() {
+    return (
+      document.visibilityState !== "hidden" &&
+      this._hasSize &&
+      this._intersecting
+    );
+  }
+
+  private _deferUpdate(changedProps: PropertyValues) {
+    for (const prop of DEFERRED_PROPS) {
+      if (!changedProps.has(prop)) {
+        continue;
+      }
+      if (!this._pendingUpdate) {
+        this._pendingUpdate = new Set();
+      }
+      if (prop === "options" && !this._pendingUpdate.has(prop)) {
+        // The one previous value a replay reads, and it has to stay the options
+        // the chart currently renders, not those of a later deferred change.
+        this._pendingOptions = changedProps.get(prop) as HaECOption | undefined;
+      }
+      this._pendingUpdate.add(prop);
+    }
+  }
+
+  private async _applyDeferredWork() {
+    if (!this._pendingSetup && !this._pendingUpdate) {
+      return;
+    }
+    if (!this.isConnected || !this._isVisible()) {
+      return;
+    }
+    if (this._pendingSetup) {
+      await this._setupChart();
+      return;
+    }
+    const pending = this._pendingUpdate!;
+    const previousOptions = this._pendingOptions;
+    this._pendingUpdate = undefined;
+    this._pendingOptions = undefined;
+    this._applyChartUpdate(pending, previousOptions);
   }
 
   public willUpdate(changedProps: PropertyValues): void {
     if (!this.chart) {
       return;
     }
-    if (changedProps.has("_themes") && this.hasUpdated) {
-      this._setupChart();
+    const themeChanged = changedProps.has("_themes") && this.hasUpdated;
+    if (!themeChanged && !DEFERRED_PROPS.some((p) => changedProps.has(p))) {
+      return;
+    }
+    const invisible = !this._isVisible();
+    if (themeChanged) {
+      if (invisible) {
+        this._pendingSetup = true;
+        this._pendingUpdate = undefined;
+        this._pendingOptions = undefined;
+      } else {
+        this._setupChart();
+      }
       return;
     }
-    let chartOptions: ECOption = {};
     if (changedProps.has("options")) {
-      // Separate 'if' from below since this must updated before _getSeries()
+      // Separate 'if' from below since this must be updated before _getSeries().
+      // It stays out of _applyChartUpdate so a replay cannot request another
+      // update and turn one catch-up render into two.
       this._updateHiddenStatsFromOptions(this.options);
     }
+    if (invisible) {
+      if (!this._pendingSetup) {
+        this._deferUpdate(changedProps);
+      }
+      return;
+    }
+    this._applyChartUpdate(
+      changedProps,
+      changedProps.get("options") as HaECOption | undefined
+    );
+  }
+
+  private _applyChartUpdate(
+    changedProps: { has: (prop: string) => boolean },
+    previousOptions: HaECOption | undefined
+  ) {
+    let chartOptions: ECOption = {};
     if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
       chartOptions.series = this._getSeries();
       // New data, or a series shown again, may well be convertible where the
@@ -347,12 +489,7 @@ export class HaChartBase extends LitElement {
     }
     if (changedProps.has("options")) {
       chartOptions = { ...chartOptions, ...this._createOptions() };
-      if (
-        this._compareCustomLegendOptions(
-          changedProps.get("options"),
-          this.options
-        )
-      ) {
+      if (this._compareCustomLegendOptions(previousOptions, this.options)) {
         // custom legend changes may require a resize to layout properly
         this._shouldResizeChart = true;
         this._resizeAnimationDuration = 250;
@@ -463,10 +600,7 @@ export class HaChartBase extends LitElement {
       }
     }
 
-    const isMobile = window.matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
-    const overflowLimit = isMobile
+    const overflowLimit = this._isMobileSize
       ? LEGEND_OVERFLOW_LIMIT_MOBILE
       : LEGEND_OVERFLOW_LIMIT;
     return html`<div
@@ -578,7 +712,11 @@ export class HaChartBase extends LitElement {
     // costs the user their place in the tab order, so stay programmatically
     // focusable for as long as we hold focus, however we stop being sonifiable.
     this._sonificationFocusHeld = true;
-    if (this._sonification || this._sonificationLoading || !this.chart) {
+    if (this._sonification || this._sonificationLoading) {
+      return;
+    }
+    await this._applyDeferredWork();
+    if (!this.chart) {
       return;
     }
     this._sonificationLoading = true;
@@ -635,14 +773,22 @@ export class HaChartBase extends LitElement {
     );
 
   private async _setupChart() {
-    if (this._loading) return;
+    if (this._loading) {
+      this._pendingSetup = true;
+      return;
+    }
     this._loading = true;
+    this._pendingSetup = false;
+    this._pendingUpdate = undefined;
+    this._pendingOptions = undefined;
     try {
       // The connection holds a reference to the chart instance, so it cannot
       // outlive it. Focusing the chart again reconnects.
       this._disposeSonification();
       if (this.chart) {
         this.chart.dispose();
+        this.chart = undefined;
+        this._originalZrFlush = undefined;
       }
       const echarts = (await import("../../resources/echarts/echarts")).default;
 
@@ -780,8 +926,14 @@ export class HaChartBase extends LitElement {
         series: this._getSeries(),
       });
       this._updateSankeyRoam();
+      if (this._pendingZoom) {
+        const [start, end, silent] = this._pendingZoom;
+        this._pendingZoom = undefined;
+        this.chart.dispatchAction({ type: "dataZoom", start, end, silent });
+      }
     } finally {
       this._loading = false;
+      this._applyDeferredWork();
     }
   }
 
@@ -927,9 +1079,7 @@ export class HaChartBase extends LitElement {
     };
 
     if (options.tooltip) {
-      const isMobile = window.matchMedia(
-        "all and (max-width: 450px), all and (max-height: 500px)"
-      ).matches;
+      const isMobile = this._isMobileSize;
       // Shallow-copy each tooltip object so wrap/mobile mutations don't leak
       // back into the caller's options.tooltip reference (callers may cache the
       // options object via memoizeOne, in which case in-place mutation would
@@ -1166,8 +1316,8 @@ export class HaChartBase extends LitElement {
             data: downSampleLineData(
               data as LineSeriesOption["data"],
               // 0 while inside a hidden container, e.g. a section with a visibility condition
-              (this.clientWidth || DEFAULT_CHART_WIDTH) *
-                window.devicePixelRatio,
+              ((this._contentWidth ?? this.clientWidth) ||
+                DEFAULT_CHART_WIDTH) * window.devicePixelRatio,
               minX,
               maxX
             ),
@@ -1180,7 +1330,7 @@ export class HaChartBase extends LitElement {
   }
 
   private _getDefaultHeight() {
-    return Math.max(this.clientWidth / 2, 200);
+    return Math.max((this._contentWidth ?? this.clientWidth) / 2, 200);
   }
 
   private _setChartOptions(options: ECOption) {
@@ -1247,7 +1397,16 @@ export class HaChartBase extends LitElement {
   };
 
   public zoom(start: number, end: number, silent = false) {
-    this.chart?.dispatchAction({
+    if (!this.chart || this._pendingSetup) {
+      // Sibling charts sync their zoom imperatively, so a range that arrives
+      // before a deferred setup or rebuild has to be replayed rather than
+      // dropped. A reset to the full range is what a fresh chart is built with,
+      // so it just clears.
+      this._pendingZoom =
+        start === 0 && end === 100 ? undefined : [start, end, silent];
+      return;
+    }
+    this.chart.dispatchAction({
       type: "dataZoom",
       start,
       end,

src/components/chart/ha-sankey-chart.ts

@@ -12,7 +12,6 @@ import type { HaECOption } from "../../resources/echarts/echarts";
 import { measureTextWidth } from "../../util/text";
 import "./ha-chart-base";
 import "./ha-chart-tooltip-marker";
-import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
 
 export interface Node {
@@ -43,6 +42,9 @@ const OVERFLOW_MARGIN = 5;
 const FONT_SIZE = 12;
 const NODE_GAP = 6;
 const LABEL_DISTANCE = 5;
+const NODE_SIZE = 30;
+const LABEL_MIN_MARGIN = 5;
+const BIDI_MARKS = /[\u200E\u200F\u202A-\u202E\u2066-\u2069]/g;
 
 @customElement("ha-sankey-chart")
 export class HaSankeyChart extends LitElement {
@@ -55,6 +57,9 @@ export class HaSankeyChart extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
+  @property({ type: Boolean, attribute: "show-values" }) public showValues =
+    false;
+
   @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
@@ -84,7 +89,11 @@ export class HaSankeyChart extends LitElement {
 
     return html`<ha-chart-base
       .hass=${this.hass}
-      .data=${this._createData(this.data, this._sizeController.value?.width)}
+      .data=${this._createData(
+        this.data,
+        this._sizeController.value?.width,
+        this.showValues
+      )}
       .options=${options}
       height="100%"
       .extraComponents=${[SankeyChart]}
@@ -142,7 +151,11 @@ export class HaSankeyChart extends LitElement {
     }
   };
 
-  private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
+  private _computeData = (
+    data: SankeyChartData,
+    width = 0,
+    showValues = false
+  ) => {
     const filteredNodes = data.nodes.filter((n) => n.value > 0);
     const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
     const depthMap = new Map<number, number>();
@@ -183,6 +196,10 @@ export class HaSankeyChart extends LitElement {
     const links = this._processLinks(filteredNodes, data.links);
     const sectionWidth = width / indexes.length;
     const labelSpace = sectionWidth - NODE_SIZE - LABEL_DISTANCE;
+    // Two-line values can wrap the unit onto a third line; keep that text inside the chart.
+    const verticalBottom = showValues
+      ? LABEL_DISTANCE + FONT_SIZE * 3 + OVERFLOW_MARGIN
+      : 25;
 
     return {
       id: "sankey",
@@ -209,29 +226,48 @@ export class HaSankeyChart extends LitElement {
       layoutIterations: 0,
       animationDuration: 500,
       label: {
-        formatter: (params) =>
-          data.nodes.find((node) => node.id === (params.data as Node).id)
-            ?.label ?? (params.data as Node).id,
+        formatter: (params) => {
+          const nodeData = params.data as { id: string; value: number };
+          const node = data.nodes.find((n) => n.id === nodeData.id);
+          const label = node?.label ?? nodeData.id;
+          if (!showValues || !nodeData.id) return label;
+          const formatted = this.valueFormatter
+            ? this.valueFormatter(nodeData.value).trim()
+            : String(nodeData.value);
+          // LRM keeps numeric values LTR on the canvas without creating wrap points.
+          return `${label}\n\u200E${formatted}`;
+        },
         position: this.vertical ? "bottom" : "right",
         distance: LABEL_DISTANCE,
-        minMargin: 5,
+        minMargin: LABEL_MIN_MARGIN,
         overflow: "break",
       },
       labelLayout: (params) => {
         if (this.vertical) {
           // reduce the label font size so the longest word fits on one line
           const longestWord = params.text
-            .split(" ")
-            .reduce(
-              (longest, current) =>
-                longest.length > current.length ? longest : current,
-              ""
-            );
-          const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
+            .replace(BIDI_MARKS, "")
+            .split(/[ \n]+/)
+            .reduce((longest, current) => {
+              if (!current) {
+                return longest;
+              }
+              if (!longest) {
+                return current;
+              }
+              return measureTextWidth(current, FONT_SIZE) >
+                measureTextWidth(longest, FONT_SIZE)
+                ? current
+                : longest;
+            }, "");
+          const wordWidth = measureTextWidth(longestWord, FONT_SIZE) || 1;
           const availableWidth = (params.rect.width + 6) * this._currentZoom;
+          // minMargin is applied as padding on the label box, so words must
+          // fit in the inner wrap width or overflow:break splits them.
+          const wrapWidth = Math.max(availableWidth - LABEL_MIN_MARGIN, 1);
           const fontSize = Math.min(
             FONT_SIZE,
-            (availableWidth / wordWidth) * FONT_SIZE
+            (wrapWidth / wordWidth) * FONT_SIZE
           );
           return {
             fontSize: fontSize > 1 ? fontSize : 0,
@@ -254,14 +290,16 @@ export class HaSankeyChart extends LitElement {
         };
       },
       top: this.vertical ? 0 : OVERFLOW_MARGIN,
-      bottom: this.vertical ? 25 : OVERFLOW_MARGIN,
+      bottom: this.vertical ? verticalBottom : OVERFLOW_MARGIN,
       left: this.vertical ? OVERFLOW_MARGIN : 0,
       right: this.vertical ? OVERFLOW_MARGIN : labelSpace + LABEL_DISTANCE,
       emphasis: {
         focus: "adjacency",
       },
     } as SankeySeriesOption;
-  });
+  };
+
+  private _createData = memoizeOne(this._computeData);
 
   private _processLinks(nodes: Node[], rawLinks: Link[]) {
     const accountedIn = new Map<string, number>();

src/components/chart/state-history-chart-timeline-data.ts

@@ -0,0 +1,258 @@
+import type {
+  CustomSeriesOption,
+  CustomSeriesRenderItem,
+} from "echarts/types/dist/shared";
+import type { HassEntities } from "home-assistant-js-websocket";
+import { hex2rgb } from "../../common/color/convert-color";
+import { luminosity } from "../../common/color/rgb";
+import type { TimelineEntity } from "../../data/history";
+import { snapFrameSize } from "./down-sample";
+import { computeTimelineColor } from "./timeline-color";
+
+export interface StateHistoryChartTimelineDataParams {
+  states: HassEntities;
+  data: TimelineEntity[];
+  startTime: Date;
+  endTime: Date;
+  names?: Record<string, string>;
+  showNames: boolean;
+  computedStyles: CSSStyleDeclaration;
+  renderItem: CustomSeriesRenderItem;
+  /** Chart width in device pixels; bounds how many rectangles are emitted. */
+  chartWidth: number;
+}
+
+export interface TimelineSegment {
+  state: string;
+  locState: string | null;
+  start: number;
+  end: number;
+}
+
+/** Resolves each frame of a run to the state covering most of that frame. */
+function collapseRun(
+  segments: TimelineSegment[],
+  from: number,
+  to: number,
+  frameMs: number,
+  push: (segment: TimelineSegment) => void
+) {
+  const runEnd = segments[to - 1].end;
+  const frameStates = new Map<
+    string,
+    { duration: number; locState: string | null }
+  >();
+  let frameStart = segments[from].start;
+  let index = from;
+
+  while (frameStart < runEnd) {
+    const boundary = (Math.floor(frameStart / frameMs) + 1) * frameMs;
+    // a frame size that rounds back onto frameStart would never advance
+    const next = boundary > frameStart ? boundary : frameStart + frameMs;
+    const frameEnd = next < runEnd ? next : runEnd;
+
+    frameStates.clear();
+    let bestState: string | null = null;
+    let bestLocState: string | null = null;
+    let bestDuration = 0;
+    // Segments are narrower than a frame, so each is visited at most twice:
+    // index stops at the one spilling into the next frame.
+    let cursor = index;
+    while (cursor < to && segments[cursor].start < frameEnd) {
+      const segment = segments[cursor];
+      cursor++;
+      const overlapStart =
+        segment.start > frameStart ? segment.start : frameStart;
+      const overlapEnd = segment.end < frameEnd ? segment.end : frameEnd;
+      if (overlapEnd <= overlapStart) {
+        continue;
+      }
+      let entry = frameStates.get(segment.state);
+      if (entry) {
+        entry.duration += overlapEnd - overlapStart;
+      } else {
+        entry = {
+          duration: overlapEnd - overlapStart,
+          locState: segment.locState,
+        };
+        frameStates.set(segment.state, entry);
+      }
+      if (entry.duration > bestDuration) {
+        bestDuration = entry.duration;
+        bestState = segment.state;
+        bestLocState = entry.locState;
+      }
+    }
+    while (index < to && segments[index].end <= frameEnd) {
+      index++;
+    }
+    if (bestState !== null) {
+      push({
+        state: bestState,
+        locState: bestLocState,
+        start: frameStart,
+        end: frameEnd,
+      });
+    }
+    frameStart = frameEnd;
+  }
+}
+
+/**
+ * Bounds the rectangle count by the chart's pixel width. Segments at least one
+ * frame wide are kept as they are; narrower ones are resolved per frame, and
+ * neighbours resolving to the same state merge into one rectangle.
+ */
+export function downSampleTimelineSegments(
+  segments: TimelineSegment[],
+  frameMs: number
+): TimelineSegment[] {
+  if (!(frameMs > 0)) {
+    return segments;
+  }
+  const result: TimelineSegment[] = [];
+  const push = (segment: TimelineSegment) => {
+    const last = result[result.length - 1];
+    if (last && last.state === segment.state && last.end === segment.start) {
+      last.end = segment.end;
+      return;
+    }
+    result.push(segment);
+  };
+
+  let index = 0;
+  while (index < segments.length) {
+    if (segments[index].end - segments[index].start >= frameMs) {
+      push({ ...segments[index] });
+      index++;
+      continue;
+    }
+    const from = index;
+    index++;
+    // A gap of its own frame or more stays a gap; a narrower one is invisible
+    // and is absorbed, so that a row of gap-separated slivers stays bounded.
+    while (
+      index < segments.length &&
+      segments[index].end - segments[index].start < frameMs &&
+      segments[index].start - segments[index - 1].end < frameMs
+    ) {
+      index++;
+    }
+    collapseRun(segments, from, index, frameMs, push);
+  }
+  return result;
+}
+
+/**
+ * Transforms processed history (`TimelineEntity[]`) into ECharts custom series
+ * for `state-history-chart-timeline`. Pure data processing: all environment
+ * inputs (theme style, entity states, chart width, the render callback) are injected so
+ * the transform is deterministic and benchmarkable.
+ */
+export function generateStateHistoryChartTimelineData(
+  params: StateHistoryChartTimelineDataParams
+): CustomSeriesOption[] {
+  const { states, computedStyles, startTime, endTime, renderItem } = params;
+  const stateHistory = params.data ?? [];
+  const startTimeMs = startTime.getTime();
+  const endTimeMs = endTime.getTime();
+  // Snapped, and placed on absolute time, so a chart following "now" keeps
+  // resolving the same frames instead of reshaping on every refresh.
+  const rawFrameMs = Math.ceil(
+    (endTimeMs - startTimeMs) / Math.floor(params.chartWidth)
+  );
+  const frameMs =
+    Number.isFinite(rawFrameMs) && rawFrameMs > 0
+      ? snapFrameSize(rawFrameMs)
+      : 0;
+  const datasets: CustomSeriesOption[] = [];
+  const names = params.names || {};
+  // stateHistory is a list of lists of sorted state objects
+  stateHistory.forEach((stateInfo) => {
+    let prevState: string | null = null;
+    let locState: string | null = null;
+    let prevLastChanged = startTimeMs;
+    const entityDisplay: string = params.showNames
+      ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
+      : "";
+
+    const segments: TimelineSegment[] = [];
+    stateInfo.data.forEach((entityState) => {
+      let newState: string | null = entityState.state;
+      const timeStamp = entityState.last_changed;
+      if (!newState) {
+        newState = null;
+      }
+      if (timeStamp > endTimeMs) {
+        // Drop datapoints that are after the requested endTime. This could happen if
+        // endTime is 'now' and client time is not in sync with server time.
+        return;
+      }
+      if (prevState === null) {
+        prevState = newState;
+        locState = entityState.state_localize;
+        prevLastChanged = timeStamp;
+      } else if (newState !== prevState) {
+        segments.push({
+          state: prevState,
+          locState,
+          start: prevLastChanged,
+          end: timeStamp,
+        });
+        prevState = newState;
+        locState = entityState.state_localize;
+        prevLastChanged = timeStamp;
+      }
+    });
+
+    if (prevState !== null) {
+      segments.push({
+        state: prevState,
+        locState,
+        start: prevLastChanged,
+        end: endTimeMs,
+      });
+    }
+
+    const stateObj = states[stateInfo.entity_id];
+    const dataRow = downSampleTimelineSegments(segments, frameMs).map(
+      (segment) => {
+        const color = computeTimelineColor(
+          segment.state,
+          computedStyles,
+          stateObj
+        );
+        return {
+          value: [
+            stateInfo.entity_id,
+            new Date(segment.start),
+            new Date(segment.end),
+            segment.locState,
+            color,
+            luminosity(hex2rgb(color)) > 0.5 ? "#000" : "#fff",
+          ],
+          itemStyle: {
+            color,
+          },
+        };
+      }
+    );
+
+    datasets.push({
+      id: stateInfo.entity_id,
+      data: dataRow,
+      name: entityDisplay,
+      dimensions: ["id", "start", "end", "name", "color", "textColor"],
+      type: "custom",
+      encode: {
+        x: [1, 2],
+        y: 0,
+        itemName: 3,
+      },
+      renderItem,
+      progressive: 0,
+    });
+  });
+
+  return datasets;
+}

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

@@ -11,18 +11,18 @@ import millisecondsToDuration from "../../common/datetime/milliseconds_to_durati
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
-import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import { DEFAULT_CHART_WIDTH, MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { itemTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
-import { computeTimelineColor } from "./timeline-color";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
-import { luminosity } from "../../common/color/rgb";
-import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
+import { generateStateHistoryChartTimelineData } from "./state-history-chart-timeline-data";
 
 const ROW_HEIGHT = 30;
+// Taller rows when the name is drawn under the bar instead of in a column.
+const ROW_HEIGHT_INSIDE_LABELS = 64;
 const GRID_BOTTOM = 30;
 
 @customElement("state-history-chart-timeline")
@@ -41,6 +41,12 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
+  // Render each row's name inside the plot (under its bar) instead of in a
+  // left-hand category-label column. Opt-in; used by the history panel and
+  // history-graph card.
+  @property({ attribute: "inside-labels", type: Boolean })
+  public insideLabels = false;
+
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -70,7 +76,13 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .hass=${this.hass}
         .options=${this._chartOptions}
-        .height=${`${this.data.length * ROW_HEIGHT + GRID_BOTTOM}px`}
+        .height=${`${
+          this.data.length *
+            (this.insideLabels && (this.chunked || this.showNames)
+              ? ROW_HEIGHT_INSIDE_LABELS
+              : ROW_HEIGHT) +
+          GRID_BOTTOM
+        }px`}
         .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
@@ -185,6 +197,7 @@ export class StateHistoryChartTimeline extends LitElement {
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("showNames") ||
+      changedProps.has("insideLabels") ||
       changedProps.has("paddingYAxis") ||
       changedProps.has("_yWidth")
     ) {
@@ -196,9 +209,11 @@ export class StateHistoryChartTimeline extends LitElement {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
     const maxInternalLabelWidth = narrow ? 105 : 185;
-    const labelWidth = showNames
-      ? Math.max(this.paddingYAxis, this._yWidth)
-      : 0;
+    const insideLabels = this.insideLabels;
+    const labelWidth =
+      showNames && !insideLabels
+        ? Math.max(this.paddingYAxis, this._yWidth)
+        : 0;
     const labelMargin = 5;
     const rtl = computeRTL(
       this.hass.language,
@@ -227,31 +242,47 @@ export class StateHistoryChartTimeline extends LitElement {
         axisLine: {
           show: false,
         },
-        axisLabel: {
-          show: showNames,
-          width: labelWidth,
-          overflow: "truncate",
-          margin: labelMargin,
-          formatter: (id: string) => {
-            const label = this._chartData.find((d) => d.id === id)
-              ?.name as string;
-            const width = label
-              ? Math.min(
-                  measureTextWidth(label, 12) + labelMargin,
-                  maxInternalLabelWidth
-                )
-              : 0;
-            if (width > this._yWidth) {
-              this._yWidth = width;
-              fireEvent(this, "y-width-changed", {
-                value: this._yWidth,
-                chartIndex: this.chartIndex,
-              });
+        axisLabel: insideLabels
+          ? {
+              // Draw the name inside the plot, under each row's bar, matching
+              // the line charts whose legend sits under the plot. The taller
+              // rows keep a name clear of the next row's bar.
+              show: showNames,
+              inside: true,
+              margin: 0,
+              padding: [18, 0, 0, rtl ? 0 : 2],
+              align: rtl ? "right" : "left",
+              verticalAlign: "top",
+              formatter: (id: string) =>
+                (this._chartData.find((d) => d.id === id)?.name as string) ??
+                "",
+              hideOverlap: true,
             }
-            return label;
-          },
-          hideOverlap: true,
-        },
+          : {
+              show: showNames,
+              width: labelWidth,
+              overflow: "truncate",
+              margin: labelMargin,
+              formatter: (id: string) => {
+                const label = this._chartData.find((d) => d.id === id)
+                  ?.name as string;
+                const width = label
+                  ? Math.min(
+                      measureTextWidth(label, 12) + labelMargin,
+                      maxInternalLabelWidth
+                    )
+                  : 0;
+                if (width > this._yWidth) {
+                  this._yWidth = width;
+                  fireEvent(this, "y-width-changed", {
+                    value: this._yWidth,
+                    chartIndex: this.chartIndex,
+                  });
+                }
+                return label;
+              },
+              hideOverlap: true,
+            },
       },
       grid: {
         top: 10,
@@ -282,109 +313,20 @@ export class StateHistoryChartTimeline extends LitElement {
   }
 
   private _generateData() {
-    const computedStyles = getComputedStyle(this);
-    let stateHistory = this.data;
-
-    if (!stateHistory) {
-      stateHistory = [];
-    }
-
     this._chartTime = new Date();
-    const startTime = this.startTime;
-    const endTime = this.endTime;
-    const datasets: CustomSeriesOption[] = [];
-    const names = this.names || {};
-    // stateHistory is a list of lists of sorted state objects
-    stateHistory.forEach((stateInfo) => {
-      let newLastChanged: Date;
-      let prevState: string | null = null;
-      let locState: string | null = null;
-      let prevLastChanged = startTime;
-      const entityDisplay: string = this.showNames
-        ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
-        : "";
-
-      const dataRow: unknown[] = [];
-      stateInfo.data.forEach((entityState) => {
-        let newState: string | null = entityState.state;
-        const timeStamp = new Date(entityState.last_changed);
-        if (!newState) {
-          newState = null;
-        }
-        if (timeStamp > endTime) {
-          // Drop datapoints that are after the requested endTime. This could happen if
-          // endTime is 'now' and client time is not in sync with server time.
-          return;
-        }
-        if (prevState === null) {
-          prevState = newState;
-          locState = entityState.state_localize;
-          prevLastChanged = new Date(entityState.last_changed);
-        } else if (newState !== prevState) {
-          newLastChanged = new Date(entityState.last_changed);
-
-          const color = computeTimelineColor(
-            prevState,
-            computedStyles,
-            this.hass.states[stateInfo.entity_id]
-          );
-          dataRow.push({
-            value: [
-              stateInfo.entity_id,
-              prevLastChanged,
-              newLastChanged,
-              locState,
-              color,
-              luminosity(hex2rgb(color)) > 0.5 ? "#000" : "#fff",
-            ],
-            itemStyle: {
-              color,
-            },
-          });
-
-          prevState = newState;
-          locState = entityState.state_localize;
-          prevLastChanged = newLastChanged;
-        }
-      });
-
-      if (prevState !== null) {
-        const color = computeTimelineColor(
-          prevState,
-          computedStyles,
-          this.hass.states[stateInfo.entity_id]
-        );
-        dataRow.push({
-          value: [
-            stateInfo.entity_id,
-            prevLastChanged,
-            endTime,
-            locState,
-            color,
-            luminosity(hex2rgb(color)) > 0.5 ? "#000" : "#fff",
-          ],
-          itemStyle: {
-            color,
-          },
-        });
-      }
-      datasets.push({
-        id: stateInfo.entity_id,
-        data: dataRow,
-        name: entityDisplay,
-        dimensions: ["id", "start", "end", "name", "color", "textColor"],
-        type: "custom",
-        encode: {
-          x: [1, 2],
-          y: 0,
-          itemName: 3,
-        },
-        renderItem: this._renderItem,
-        progressive: 0,
-      });
+    this._chartData = generateStateHistoryChartTimelineData({
+      states: this.hass.states,
+      data: this.data,
+      startTime: this.startTime,
+      endTime: this.endTime,
+      names: this.names,
+      showNames: this.showNames,
+      computedStyles: getComputedStyle(this),
+      renderItem: this._renderItem,
+      // 0 while inside a hidden container, e.g. a section with a visibility condition
+      chartWidth:
+        (this.clientWidth || DEFAULT_CHART_WIDTH) * window.devicePixelRatio,
     });
-
-    this._chartData = datasets;
   }
 
   private _handleChartClick(
@@ -401,6 +343,9 @@ export class StateHistoryChartTimeline extends LitElement {
   }
 
   static styles = css`
+    :host {
+      display: block;
+    }
     ha-chart-base {
       --chart-max-height: none;
     }

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

@@ -79,6 +79,11 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
+  // Render timeline row names inside the plot (under each bar) instead of in a
+  // left-hand column. Opt-in; used by the history panel and history-graph card.
+  @property({ attribute: "inside-labels", type: Boolean })
+  public insideLabels = false;
+
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -227,6 +232,7 @@ export class StateHistoryCharts extends LitElement {
         .startTime=${this._computedStartTime}
         .endTime=${this._computedEndTime}
         .showNames=${this.showNames}
+        .insideLabels=${this.insideLabels}
         .names=${this.names}
         .narrow=${this.narrow}
         .chunked=${this.virtualize}
@@ -369,7 +375,7 @@ export class StateHistoryCharts extends LitElement {
         const chartBase =
           chartComponent.renderRoot?.querySelector("ha-chart-base");
 
-        if (chartBase && chartBase.chart) {
+        if (chartBase) {
           chartBase.zoom(0, 100);
         }
       });
@@ -444,6 +450,10 @@ export class StateHistoryCharts extends LitElement {
       margin-top: 16px;
     }
 
+    .entry-container.timeline:not(:first-child) {
+      margin-top: var(--ha-space-8);
+    }
+
     .container,
     lit-virtualizer {
       height: 100%;

src/components/chart/statistics-chart-data.ts

@@ -53,6 +53,41 @@ export interface StatisticsChartData {
   yAxisFractionDigits: number;
 }
 
+// ECharts stacks a time axis by data index. Merge the sorted point lists so
+// every stacked line has the same x at every index, padding with null.
+function alignStackedLines(datasets: LineSeriesOption[]) {
+  const sources = datasets.map((d) => d.data as [number, number | null][]);
+  const cursors = sources.map(() => 0);
+  const counts = sources.map(() => 0);
+  const aligned = sources.map((): [number, number | null][] => []);
+  while (cursors.some((cursor, i) => cursor < sources[i].length)) {
+    let x = Infinity;
+    for (let i = 0; i < sources.length; i++) {
+      const point = sources[i][cursors[i]];
+      if (point && point[0] < x) x = point[0];
+    }
+    let slots = 1;
+    for (let i = 0; i < sources.length; i++) {
+      let count = 0;
+      while (sources[i][cursors[i] + count]?.[0] === x) count++;
+      counts[i] = count;
+      if (count > slots) slots = count;
+    }
+    for (let i = 0; i < sources.length; i++) {
+      const count = counts[i];
+      for (let slot = 0; slot < slots; slot++) {
+        aligned[i].push(
+          count ? sources[i][cursors[i] + Math.min(slot, count - 1)] : [x, null]
+        );
+      }
+      cursors[i] += count;
+    }
+  }
+  datasets.forEach((d, i) => {
+    d.data = aligned[i];
+  });
+}
+
 /**
  * Transforms raw statistics into ECharts series for `statistics-chart`.
  * Pure data processing: all environment inputs (current time, theme style,
@@ -263,8 +298,10 @@ export function generateStatisticsChartData(
               ),
           symbol: "none",
           // minmax sampling operates independently per series, breaking stacking alignment
+          // echarts stacks before it samples, so its lttb keeps stacks aligned
           // https://github.com/apache/echarts/issues/11879
-          sampling: band && drawBands ? "lttb" : "minmax",
+          sampling:
+            band || (chartStacked && chartType === "line") ? "lttb" : "minmax",
           animationDurationUpdate: 0,
           lineStyle: {
             width: 1.5,
@@ -439,6 +476,15 @@ export function generateStatisticsChartData(
     Array.prototype.push.apply(legendData, statLegendData);
   });
 
+  if (chartType === "line" && chartStacked) {
+    const stacked = (totalDataSets as LineSeriesOption[]).filter(
+      (d) => d.data?.length
+    );
+    if (stacked.length > 1) {
+      alignStackedLines(stacked);
+    }
+  }
+
   if (chartType === "bar") {
     fillDataGapsAndRoundCaps(totalDataSets as BarSeriesOption[], chartStacked);
   }

src/components/chart/statistics-chart.ts

@@ -125,7 +125,23 @@ export class StatisticsChart extends LitElement {
   private _yAxisFractionDigits = 1;
 
   protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
-    return changedProps.size > 1 || !changedProps.has("hass");
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this._entityNamesChanged(changedProps)
+    );
+  }
+
+  // Series names are resolved once and cached in _chartData, so a hass update
+  // that only replaces the formatters has to regenerate them. The formatters are
+  // swapped as a set whenever the registries change, which is what renames a
+  // series.
+  private _entityNamesChanged(changedProps: PropertyValues): boolean {
+    if (!changedProps.has("hass")) {
+      return false;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    return !!oldHass && oldHass.formatEntityName !== this.hass.formatEntityName;
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -135,7 +151,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("chartType") ||
       changedProps.has("hideLegend") ||
       changedProps.has("_hiddenStats") ||
-      changedProps.has("names")
+      changedProps.has("names") ||
+      this._entityNamesChanged(changedProps)
     ) {
       this._generateData();
     }
@@ -253,6 +270,8 @@ export class StatisticsChart extends LitElement {
     }[] = [];
     for (const param of params) {
       if (rendered[param.seriesIndex]) continue;
+      // stacked lines are padded with null where a statistic has no data
+      if (!chartIsBar && param.value[1] === null) continue;
       rendered[param.seriesIndex] = true;
 
       const statisticId = this._statisticIds[param.seriesIndex];
@@ -530,17 +549,26 @@ export class StatisticsChart extends LitElement {
     this.unit = data.unit;
     this._yAxisFractionDigits = data.yAxisFractionDigits;
     this._chartData = data.datasets;
-    if (data.legendData.length !== this._legendData?.length) {
+    const legendData =
+      data.legendData.length > 1
+        ? data.legendData.map(({ id, name, noLabelClick }) => ({
+            id,
+            name,
+            noLabelClick,
+          }))
+        : // if there is only one entity, let the base chart handle the legend
+          undefined;
+    if (
+      legendData?.length !== this._legendData?.length ||
+      legendData?.some(
+        (item, index) =>
+          item.id !== this._legendData?.[index]?.id ||
+          item.name !== this._legendData?.[index]?.name ||
+          item.noLabelClick !== this._legendData?.[index]?.noLabelClick
+      )
+    ) {
       // only update the legend if it has changed or it will trigger options update
-      this._legendData =
-        data.legendData.length > 1
-          ? data.legendData.map(({ id, name, noLabelClick }) => ({
-              id,
-              name,
-              noLabelClick,
-            }))
-          : // if there is only one entity, let the base chart handle the legend
-            undefined;
+      this._legendData = legendData;
     }
     this._statisticIds = data.statisticIds;
   }

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

@@ -35,6 +35,14 @@ export class HaFilterChip extends FilterChip {
     `,
   ];
 
+  protected getContainerClasses() {
+    const classes = super.getContainerClasses();
+    if (this.noLeadingIcon) {
+      classes["has-icon"] = false;
+    }
+    return classes;
+  }
+
   protected renderLeadingIcon() {
     if (this.noLeadingIcon) {
       // eslint-disable-next-line lit/prefer-nothing

src/components/data-table/ha-data-table.ts

@@ -1202,6 +1202,20 @@ export class HaDataTable extends LitElement {
           overflow: auto;
         }
 
+        :host([narrow]) .mdc-data-table {
+          width: calc(
+            100% + var(--safe-area-inset-left, 0px) +
+              var(--safe-area-inset-right, 0px)
+          );
+          margin-left: calc(-1 * var(--safe-area-inset-left, 0px));
+          margin-right: calc(-1 * var(--safe-area-inset-right, 0px));
+          overflow: visible;
+        }
+
+        :host([narrow]) .mdc-data-table__header-row {
+          overflow: visible;
+        }
+
         /* Hide scrollbar for Chrome, Safari and Opera */
         .mdc-data-table__header-row::-webkit-scrollbar {
           display: none;
@@ -1499,6 +1513,16 @@ export class HaDataTable extends LitElement {
           overflow: overlay !important;
         }
 
+        :host([narrow]) .mdc-data-table__row {
+          box-sizing: border-box;
+          padding-left: var(--safe-area-inset-left, 0px);
+          padding-right: var(--safe-area-inset-right, 0px);
+        }
+
+        :host([narrow]) .mdc-data-table__row:has(.group-header) {
+          background-color: var(--primary-background-color);
+        }
+
         .mdc-data-table__table.auto-height .scroller {
           overflow-y: hidden !important;
         }

src/components/entity/ha-entity-name-picker.ts

@@ -7,9 +7,12 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
+import {
+  ENTITY_NAME_TYPES,
+  type EntityNameItem,
+  type EntityNameType,
+} from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import type { EntityNameType } from "../../common/translations/entity-state";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
@@ -35,9 +38,7 @@ const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
   </ha-combo-box-item>
 `;
 
-const KNOWN_TYPES = new Set(["entity", "device", "area", "floor"]);
-
-const UNIQUE_TYPES = new Set(["entity", "device", "area", "floor"]);
+const KNOWN_TYPES = new Set<string>(ENTITY_NAME_TYPES);
 
 const formatOptionValue = (item: EntityNameItem) => {
   if (item.type === "text" && item.text) {
@@ -135,9 +136,7 @@ export class HaEntityNamePicker extends LitElement {
       ${
         this.helper
           ? html`
-              <ha-input-helper-text .disabled=${this.disabled}>
-                ${this.helper}
-              </ha-input-helper-text>
+              <ha-input-helper-text> ${this.helper} </ha-input-helper-text>
             `
           : nothing
       }
@@ -170,6 +169,7 @@ export class HaEntityNamePicker extends LitElement {
         .getItems=${this._getFilteredItems}
         .rowRenderer=${rowRenderer}
         .value=${this._getPickerValue()}
+        no-sort
         allow-custom-value
         .customValueLabel=${this.hass.localize(
           "ui.components.entity.entity-name-picker.custom_name"
@@ -387,6 +387,7 @@ export class HaEntityNamePicker extends LitElement {
     );
 
     if (context.device) options.add("device");
+    if (context.parentDevice) options.add("parent_device");
     if (context.area) options.add("area");
     if (context.floor) options.add("floor");
     return options;
@@ -399,8 +400,8 @@ export class HaEntityNamePicker extends LitElement {
 
     const types = this._validTypes(entityId);
 
-    const items = (
-      ["entity", "device", "area", "floor"] as const
+    const items = ENTITY_NAME_TYPES.filter(
+      (name) => name !== "parent_device" || types.has(name)
     ).map<PickerComboBoxItem>((name) => {
       const stateObj = this.hass.states[entityId];
       const isValid = types.has(name);
@@ -464,7 +465,7 @@ export class HaEntityNamePicker extends LitElement {
 
     const excludedValues = new Set(
       this._items
-        .filter((item) => UNIQUE_TYPES.has(item.type))
+        .filter((item) => KNOWN_TYPES.has(item.type))
         .map((item) => formatOptionValue(item))
     );
 

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

@@ -178,6 +178,17 @@ export class HaStateContentPicker extends LitElement {
                   ),
                 });
               }
+              if (context.parentDevice) {
+                contextItems.push({
+                  id: "parent_device_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.parent_device_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.parent_device_name"
+                  ),
+                });
+              }
               if (context.area) {
                 contextItems.push({
                   id: "area_name",
@@ -318,11 +329,7 @@ export class HaStateContentPicker extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
+      ? html` <ha-input-helper-text> ${this.helper} </ha-input-helper-text> `
       : nothing;
   }
 

src/components/entity/ha-statistic-picker.ts

@@ -11,9 +11,10 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
-import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { computeRTL } from "../../common/util/compute_rtl";
+import {
+  computeEntityPickerDisplay,
+  computeEntitySearchLabels,
+} from "../../common/entity/compute_entity_name_display";
 import { domainToName } from "../../data/integration";
 import {
   getStatisticLabel,
@@ -52,6 +53,7 @@ const SEARCH_KEYS = [
   { name: "search_labels.entityName", weight: 10 },
   { name: "search_labels.friendlyName", weight: 9 },
   { name: "search_labels.deviceName", weight: 8 },
+  { name: "search_labels.parentDeviceName", weight: 6 },
   { name: "search_labels.areaName", weight: 6 },
   { name: "search_labels.domainName", weight: 4 },
   { name: "statisticId", weight: 3 },
@@ -232,11 +234,6 @@ export class HaStatisticPicker extends LitElement {
         });
       }
 
-      const isRTL = computeRTL(
-        hass.language,
-        hass.translationMetadata.translations
-      );
-
       const output: StatisticComboBoxItem[] = [];
 
       statisticIds.forEach((meta) => {
@@ -290,22 +287,18 @@ export class HaStatisticPicker extends LitElement {
         }
         const id = meta.statistic_id;
 
-        const friendlyName = computeStateName(stateObj); // Keep this for search
-
-        const [entityName, deviceName, areaName] = computeEntityNameList(
+        const { primary, secondary } = computeEntityPickerDisplay(
+          hass,
+          stateObj
+        );
+        const searchLabels = computeEntitySearchLabels(
           stateObj,
-          [{ type: "entity" }, { type: "device" }, { type: "area" }],
           hass.entities,
           hass.devices,
           hass.areas,
           hass.floors
         );
 
-        const primary = entityName || deviceName || id;
-        const secondary = [areaName, entityName ? deviceName : undefined]
-          .filter(Boolean)
-          .join(isRTL ? " ◂ " : " ▸ ");
-
         const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
         output.push({
           id,
@@ -314,13 +307,12 @@ export class HaStatisticPicker extends LitElement {
           secondary,
           stateObj: stateObj,
           type: "entity",
-          sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
-          search_labels: {
-            entityName: entityName || null,
-            deviceName: deviceName || null,
-            areaName: areaName || null,
-            friendlyName,
-          },
+          sorting_label: [
+            sortingPrefix,
+            searchLabels.deviceName,
+            searchLabels.entityName,
+          ].join("_"),
+          search_labels: searchLabels,
         });
       });
 
@@ -395,26 +387,18 @@ export class HaStatisticPicker extends LitElement {
     const stateObj = this.hass.states[statisticId];
 
     if (stateObj) {
-      const [entityName, deviceName, areaName] = computeEntityNameList(
+      const { primary, secondary } = computeEntityPickerDisplay(
+        this.hass,
+        stateObj
+      );
+      const searchLabels = computeEntitySearchLabels(
         stateObj,
-        [{ type: "entity" }, { type: "device" }, { type: "area" }],
         this.hass.entities,
         this.hass.devices,
         this.hass.areas,
         this.hass.floors
       );
 
-      const isRTL = computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      );
-
-      const primary = entityName || deviceName || statisticId;
-      const secondary = [areaName, entityName ? deviceName : undefined]
-        .filter(Boolean)
-        .join(isRTL ? " ◂ " : " ▸ ");
-      const friendlyName = computeStateName(stateObj); // Keep this for search
-
       const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
       return {
         id: statisticId,
@@ -423,14 +407,12 @@ export class HaStatisticPicker extends LitElement {
         secondary,
         stateObj: stateObj,
         type: "entity",
-        sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
-        search_labels: {
-          entityName: entityName || null,
-          deviceName: deviceName || null,
-          areaName: areaName || null,
-          friendlyName,
-          statisticId,
-        },
+        sorting_label: [
+          sortingPrefix,
+          searchLabels.deviceName,
+          searchLabels.entityName,
+        ].join("_"),
+        search_labels: { ...searchLabels, statisticId },
       };
     }
 

src/components/ha-analytics.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { Analytics, AnalyticsPreferences } from "../data/analytics";
@@ -20,13 +21,15 @@ declare global {
 
 @customElement("ha-analytics")
 export class HaAnalytics extends LitElement {
-  @property({ attribute: false }) public localize!: LocalizeFunc;
-
   @property({ attribute: false }) public analytics?: Analytics;
 
   @property({ attribute: "translation_key_panel" }) public translationKeyPanel:
     "page-onboarding" | "config" = "config";
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   protected render(): TemplateResult {
     const loading = this.analytics === undefined;
     const baseEnabled = !loading && this.analytics!.preferences.base;
@@ -34,12 +37,12 @@ export class HaAnalytics extends LitElement {
     return html`
       <ha-row-item>
         <span slot="headline"
-          >${this.localize(
+          >${this._localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
           )}</span
         >
         <span slot="supporting-text"
-          >${this.localize(
+          >${this._localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.description`
           )}</span
         >
@@ -50,18 +53,22 @@ export class HaAnalytics extends LitElement {
           .preference=${"base"}
           .disabled=${loading}
           name="base"
-        ></ha-switch>
+        >
+          ${this._localize(
+            `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
+          )}
+        </ha-switch>
       </ha-row-item>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) => html`
           <ha-row-item>
             <span slot="headline"
-              >${this.localize(
+              >${this._localize(
                 `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
               )}</span
             >
             <span slot="supporting-text"
-              >${this.localize(
+              >${this._localize(
                 `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.description`
               )}</span
             >
@@ -72,7 +79,11 @@ export class HaAnalytics extends LitElement {
               .checked=${!!this.analytics?.preferences[preference]}
               .preference=${preference}
               name=${preference}
-            ></ha-switch>
+            >
+              ${this._localize(
+                `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
+              )}
+            </ha-switch>
             ${
               baseEnabled
                 ? nothing
@@ -80,7 +91,7 @@ export class HaAnalytics extends LitElement {
                     .for="switch-${preference}"
                     placement="right"
                   >
-                    ${this.localize(
+                    ${this._localize(
                       `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                     )}
                   </ha-tooltip>`
@@ -90,12 +101,12 @@ export class HaAnalytics extends LitElement {
       )}
       <ha-row-item>
         <span slot="headline"
-          >${this.localize(
+          >${this._localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
           )}</span
         >
         <span slot="supporting-text"
-          >${this.localize(
+          >${this._localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.description`
           )}</span
         >
@@ -106,7 +117,11 @@ export class HaAnalytics extends LitElement {
           .preference=${"diagnostics"}
           .disabled=${loading}
           name="diagnostics"
-        ></ha-switch>
+        >
+          ${this._localize(
+            `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
+          )}
+        </ha-switch>
       </ha-row-item>
     `;
   }
@@ -143,6 +158,19 @@ export class HaAnalytics extends LitElement {
           color: var(--error-color);
         }
 
+        /* The visible headline already names the row. Keep the switch's
+           slotted label available to assistive technology without repeating it. */
+        ha-switch::part(label) {
+          position: absolute;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          height: 1px;
+          width: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+        }
+
         ha-row-item {
           --ha-row-item-padding-inline: 0;
         }

src/components/ha-area-controls-picker.ts

@@ -3,8 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import Fuse from "fuse.js";
 import memoizeOne from "memoize-one";
-import { computeEntityNameList } from "../common/entity/compute_entity_name_display";
-import { computeRTL } from "../common/util/compute_rtl";
+import { computeEntityPickerDisplay } from "../common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../common/translations/localize";
 import {
   multiTermSortedSearch,
@@ -183,11 +182,6 @@ export class HaAreaControlsPicker extends LitElement {
           const allEntityIds = Object.values(controlEntities).flat();
           const uniqueEntityIds = Array.from(new Set(allEntityIds));
 
-          const isRTL = computeRTL(
-            this.hass.language,
-            this.hass.translationMetadata.translations
-          );
-
           uniqueEntityIds.forEach((entityId) => {
             if (isSelected(entityId)) {
               return;
@@ -197,20 +191,11 @@ export class HaAreaControlsPicker extends LitElement {
               return;
             }
 
-            const [entityName, deviceName, areaName] = computeEntityNameList(
-              stateObj,
-              [{ type: "entity" }, { type: "device" }, { type: "area" }],
-              this.hass!.entities,
-              this.hass!.devices,
-              this.hass!.areas,
-              this.hass!.floors
+            const { primary, secondary } = computeEntityPickerDisplay(
+              this.hass!,
+              stateObj
             );
 
-            const primary = entityName || deviceName || entityId;
-            const secondary = [areaName, entityName ? deviceName : undefined]
-              .filter(Boolean)
-              .join(isRTL ? " ◂ " : " ▸ ");
-
             entityItems.push({
               type: "entity",
               id: entityId,

src/components/ha-assist-chat.ts

@@ -22,6 +22,7 @@ import {
   type ConversationChatLogToolResultDelta,
   type PipelineRunEvent,
 } from "../data/assist_pipeline";
+import type { ChatLogToolResult } from "../data/chat_log";
 import {
   configContext,
   connectionContext,
@@ -58,7 +59,7 @@ interface AssistMessage {
     {
       tool_name: string;
       tool_args: Record<string, unknown>;
-      result?: any;
+      result?: ChatLogToolResult;
     }
   >;
   error?: boolean;
@@ -834,7 +835,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre>
           } else if (isToolResult(delta)) {
             if (progress.hassMessage.tool_calls[delta.tool_call_id]) {
               progress.hassMessage.tool_calls[delta.tool_call_id].result =
-                delta.tool_result;
+                delta.result;
               this.requestUpdate("_conversation");
             }
           }

src/components/ha-base-time-input.ts

@@ -312,9 +312,7 @@ export class HaBaseTimeInput extends LitElement {
       </div>
       ${
         this.helper
-          ? html`<ha-input-helper-text .disabled=${this.disabled}
-              >${this.helper}</ha-input-helper-text
-            >`
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : nothing
       }
     `;

src/components/ha-card.ts

@@ -42,8 +42,8 @@ export class HaCard extends LitElement {
       font-family: var(--ha-card-header-font-family, inherit);
       font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
-      line-height: var(--ha-line-height-expanded);
-      padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
+      line-height: var(--ha-line-height-condensed);
+      padding: var(--ha-space-5) var(--ha-space-4) var(--ha-space-6);
       display: block;
       margin-block-start: 0;
       margin-block-end: 0;

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

@@ -198,11 +198,7 @@ export class HaClockDateFormatPicker extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
+      ? html` <ha-input-helper-text> ${this.helper} </ha-input-helper-text> `
       : nothing;
   }
 

src/components/ha-code-editor.ts

@@ -761,6 +761,9 @@ export class HaCodeEditor extends ReactiveElement {
     const deviceName = context.device
       ? computeDeviceName(context.device)
       : undefined;
+    const parentDeviceName = context.parentDevice
+      ? computeDeviceName(context.parentDevice)
+      : undefined;
     const areaName = context.area ? computeAreaName(context.area) : undefined;
     const floorName = context.floor
       ? computeFloorName(context.floor)
@@ -795,6 +798,15 @@ export class HaCodeEditor extends ReactiveElement {
       });
     }
 
+    if (parentDeviceName) {
+      completionItems.push({
+        label: this._i18n!.localize(
+          "ui.components.device-picker.parent_device"
+        ),
+        value: parentDeviceName,
+      });
+    }
+
     if (areaName) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.area-picker.area"),

src/components/ha-duration-input.ts

@@ -103,69 +103,87 @@ export class HaDurationInput extends LitElement {
     `;
   }
 
+  // Fold units we do not render into the smallest unit we do, so a value the
+  // user cannot see is not silently dropped on the next edit.
+  private get _data(): HaDurationData | undefined {
+    if (!this.data) {
+      return this.data;
+    }
+    const data = { ...this.data };
+    if (!this.enableDay && data.days) {
+      data.hours = (data.hours || 0) + data.days * 24;
+      delete data.days;
+    }
+    if (!this.enableMillisecond && data.milliseconds) {
+      data.seconds = (data.seconds || 0) + data.milliseconds / 1000;
+      delete data.milliseconds;
+    }
+    return data;
+  }
+
   private get _negative() {
     return (
       this._toggleNegative ||
-      (this.data?.days
-        ? this.data.days < 0
-        : this.data?.hours
-          ? this.data.hours < 0
-          : this.data?.minutes
-            ? this.data.minutes < 0
-            : this.data?.seconds
-              ? this.data.seconds < 0
-              : this.data?.milliseconds
-                ? this.data.milliseconds < 0
+      (this._data?.days
+        ? this._data.days < 0
+        : this._data?.hours
+          ? this._data.hours < 0
+          : this._data?.minutes
+            ? this._data.minutes < 0
+            : this._data?.seconds
+              ? this._data.seconds < 0
+              : this._data?.milliseconds
+                ? this._data.milliseconds < 0
                 : false)
     );
   }
 
   private get _days() {
-    return this.data?.days
+    return this._data?.days
       ? this.allowNegative
-        ? Math.abs(Number(this.data.days))
-        : Number(this.data.days)
-      : this.required || this.data
+        ? Math.abs(Number(this._data.days))
+        : Number(this._data.days)
+      : this.required || this._data
         ? 0
         : NaN;
   }
 
   private get _hours() {
-    return this.data?.hours
+    return this._data?.hours
       ? this.allowNegative
-        ? Math.abs(Number(this.data.hours))
-        : Number(this.data.hours)
-      : this.required || this.data
+        ? Math.abs(Number(this._data.hours))
+        : Number(this._data.hours)
+      : this.required || this._data
         ? 0
         : NaN;
   }
 
   private get _minutes() {
-    return this.data?.minutes
+    return this._data?.minutes
       ? this.allowNegative
-        ? Math.abs(Number(this.data.minutes))
-        : Number(this.data.minutes)
-      : this.required || this.data
+        ? Math.abs(Number(this._data.minutes))
+        : Number(this._data.minutes)
+      : this.required || this._data
         ? 0
         : NaN;
   }
 
   private get _seconds() {
-    return this.data?.seconds
+    return this._data?.seconds
       ? this.allowNegative
-        ? Math.abs(Number(this.data.seconds))
-        : Number(this.data.seconds)
-      : this.required || this.data
+        ? Math.abs(Number(this._data.seconds))
+        : Number(this._data.seconds)
+      : this.required || this._data
         ? 0
         : NaN;
   }
 
   private get _milliseconds() {
-    return this.data?.milliseconds
+    return this._data?.milliseconds
       ? this.allowNegative
-        ? Math.abs(Number(this.data.milliseconds))
-        : Number(this.data.milliseconds)
-      : this.required || this.data
+        ? Math.abs(Number(this._data.milliseconds))
+        : Number(this._data.milliseconds)
+      : this.required || this._data
         ? 0
         : NaN;
   }
@@ -236,8 +254,8 @@ export class HaDurationInput extends LitElement {
     ev.stopPropagation();
     const negative = (ev.detail?.value || ev.target.value) === "-";
     this._toggleNegative = negative;
-    if (this.data) {
-      const value = { ...this.data };
+    if (this._data) {
+      const value = { ...this._data };
       FIELDS.forEach((t) => {
         if (value[t]) {
           value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);
@@ -254,6 +272,11 @@ export class HaDurationInput extends LitElement {
       display: flex;
       align-items: center;
     }
+    /* Full width: bigger touch targets, no ragged right edge in a form. */
+    ha-base-time-input {
+      flex: 1;
+      --time-input-flex: 1;
+    }
     ha-button-toggle-group {
       margin: var(--ha-space-2);
     }

src/components/ha-file-upload.ts

@@ -27,9 +27,9 @@ declare global {
 
 @customElement("ha-file-upload")
 export class HaFileUpload extends LitElement {
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
-  @state() @consumeLocalize() private _localize?: LocalizeFunc;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
@@ -92,7 +92,6 @@ export class HaFileUpload extends LitElement {
   }
 
   public render(): TemplateResult {
-    const localize = this.localize || this._localize!;
     return html`
       ${
         this.uploading
@@ -102,10 +101,13 @@ export class HaFileUpload extends LitElement {
                   >${
                     this.uploadingLabel ||
                     (this.value
-                      ? localize("ui.components.file-upload.uploading_name", {
-                          name: this._name,
-                        })
-                      : localize("ui.components.file-upload.uploading"))
+                      ? this._localize(
+                          "ui.components.file-upload.uploading_name",
+                          {
+                            name: this._name,
+                          }
+                        )
+                      : this._localize("ui.components.file-upload.uploading"))
                   }</span
                 >
                 ${
@@ -147,12 +149,12 @@ export class HaFileUpload extends LitElement {
                           slot="start"
                           .path=${this.icon || mdiFileUpload}
                         ></ha-svg-icon>
-                        ${this.label || localize("ui.components.file-upload.label")}
+                        ${this.label || this._localize("ui.components.file-upload.label")}
                       </ha-button>
                       <span class="secondary"
                         >${
                           this.secondary ||
-                          localize("ui.components.file-upload.secondary")
+                          this._localize("ui.components.file-upload.secondary")
                         }</span
                       >
                       <span class="supports">${this.supports}</span>`
@@ -166,7 +168,7 @@ export class HaFileUpload extends LitElement {
                         </div>
                         <ha-icon-button
                           @click=${this._clearValue}
-                          .label=${this.deleteLabel || localize("ui.common.delete")}
+                          .label=${this.deleteLabel || this._localize("ui.common.delete")}
                           .path=${mdiDelete}
                         ></ha-icon-button>
                       </div>`
@@ -185,7 +187,8 @@ export class HaFileUpload extends LitElement {
                             <ha-icon-button
                               @click=${this._clearValue}
                               .label=${
-                                this.deleteLabel || localize("ui.common.delete")
+                                this.deleteLabel ||
+                                this._localize("ui.common.delete")
                               }
                               .path=${mdiDelete}
                             ></ha-icon-button>

src/components/ha-filter-devices.ts

@@ -60,6 +60,9 @@ export class HaFilterDevices extends LitElement {
 
   @property() public type?: keyof RelatedResult;
 
+  @property({ type: Boolean, attribute: "include-disabled-entities" })
+  public includeDisabledEntities = false;
+
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
   @property({ type: Boolean }) public narrow = false;
@@ -227,7 +230,14 @@ export class HaFilterDevices extends LitElement {
     for (const deviceId of this.value) {
       value.push(deviceId);
       if (this.type) {
-        relatedPromises.push(findRelated(this._api, "device", deviceId));
+        relatedPromises.push(
+          findRelated(
+            this._api,
+            "device",
+            deviceId,
+            this.includeDisabledEntities
+          )
+        );
       }
     }
     const results = await Promise.all(relatedPromises);

src/components/ha-filter-floor-areas.ts

@@ -65,6 +65,9 @@ export class HaFilterFloorAreas extends LitElement {
 
   @property() public type?: keyof RelatedResult;
 
+  @property({ type: Boolean, attribute: "include-disabled-entities" })
+  public includeDisabledEntities = false;
+
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
@@ -295,7 +298,9 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.areas) {
       for (const areaId of this.value.areas) {
         if (this.type) {
-          relatedPromises.push(findRelated(this._api, "area", areaId));
+          relatedPromises.push(
+            findRelated(this._api, "area", areaId, this.includeDisabledEntities)
+          );
         }
       }
     }
@@ -303,7 +308,14 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.floors) {
       for (const floorId of this.value.floors) {
         if (this.type) {
-          relatedPromises.push(findRelated(this._api, "floor", floorId));
+          relatedPromises.push(
+            findRelated(
+              this._api,
+              "floor",
+              floorId,
+              this.includeDisabledEntities
+            )
+          );
         }
       }
     }

src/components/ha-filter-voice-assistants.ts

@@ -22,7 +22,6 @@ import "./ha-list";
 import "./ha-list-item";
 import "./voice-assistant-brand-icon";
 import { voiceAssistants } from "../data/expose";
-import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 
 @customElement("ha-filter-voice-assistants")
 export class HaFilterVoiceAssistants extends LitElement {

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

@@ -91,7 +91,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
           </div>
           ${
             this.helper
-              ? html`<ha-input-helper-text .disabled=${this.disabled}
+              ? html`<ha-input-helper-text
                   >${this.helper}</ha-input-helper-text
                 >`
               : nothing

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

@@ -3,7 +3,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HASSDomTargetEvent } from "../../common/dom/fire_event";
-import "../ha-check-list-item";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-dropdown";

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

@@ -57,6 +57,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .name=${this.schema.name}
         .autofocus=${!!this.schema.autofocus}
         .autocomplete=${this.schema.autocomplete}
+        .inputId=${this.schema.name}
         .validationMessage=${
           this.schema.required
             ? this.localize?.("ui.common.error_required")

src/components/ha-generic-picker.ts

@@ -329,7 +329,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
       return nothing;
     }
 
-    return html`<ha-input-helper-text .disabled=${this.disabled}>
+    return html`<ha-input-helper-text>
       ${
         showError
           ? html`<span class="error">${this.errorMessage}</span> ${
@@ -360,7 +360,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
         this._initialFieldValue = undefined;
       }
       if (
-        this._hassConfig?.auth.external &&
+        this._hassConfig?.auth?.external &&
         isIosApp(this._hassConfig.auth.external)
       ) {
         this._hassConfig.auth.external.fireMessage({

src/components/ha-icon-arrow-next.ts

@@ -0,0 +1,16 @@
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
+import { customElement, property } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
+import { HaSvgIcon } from "./ha-svg-icon";
+
+@customElement("ha-icon-arrow-next")
+export class HaIconArrowNext extends HaSvgIcon {
+  @property() public override path =
+    mainWindow.document.dir === "rtl" ? mdiArrowLeft : mdiArrowRight;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-arrow-next": HaIconArrowNext;
+  }
+}

src/components/ha-icon-arrow-prev.ts

@@ -0,0 +1,16 @@
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
+import { customElement, property } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
+import { HaSvgIcon } from "./ha-svg-icon";
+
+@customElement("ha-icon-arrow-prev")
+export class HaIconArrowPrev extends HaSvgIcon {
+  @property() public override path =
+    mainWindow.document.dir === "rtl" ? mdiArrowRight : mdiArrowLeft;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-arrow-prev": HaIconArrowPrev;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { mdiChevronDoubleLeft, mdiChevronDoubleRight } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
+import "./ha-icon-button";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
+
+@customElement("ha-icon-button-first")
+export class HaIconButtonFirst extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @property() href?: string;
+
+  @property() target?: "_blank" | "_parent" | "_self" | "_top";
+
+  @property() rel?: string;
+
+  @property() download?: string;
+
+  @state() private _icon =
+    mainWindow.document.dir === "rtl"
+      ? mdiChevronDoubleRight
+      : mdiChevronDoubleLeft;
+
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-icon-button
+        .disabled=${this.disabled}
+        .label=${this.label || this._localize("ui.common.first") || "First"}
+        .path=${this._icon}
+        .href=${this.href}
+        .target=${this.target}
+        .rel=${this.rel}
+        .download=${this.download}
+      ></ha-icon-button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-first": HaIconButtonFirst;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { mdiChevronDoubleLeft, mdiChevronDoubleRight } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { mainWindow } from "../common/dom/get_main_window";
+import "./ha-icon-button";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
+
+@customElement("ha-icon-button-last")
+export class HaIconButtonLast extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @property() href?: string;
+
+  @property() target?: "_blank" | "_parent" | "_self" | "_top";
+
+  @property() rel?: string;
+
+  @property() download?: string;
+
+  @state() private _icon =
+    mainWindow.document.dir === "rtl"
+      ? mdiChevronDoubleLeft
+      : mdiChevronDoubleRight;
+
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-icon-button
+        .disabled=${this.disabled}
+        .label=${this.label || this._localize("ui.common.last") || "Last"}
+        .path=${this._icon}
+        .href=${this.href}
+        .target=${this.target}
+        .rel=${this.rel}
+        .download=${this.download}
+      ></ha-icon-button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-last": HaIconButtonLast;
+  }
+}

src/components/ha-input-helper-text.ts

@@ -1,11 +1,9 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-input-helper-text")
 class InputHelperText extends LitElement {
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
   protected render(): TemplateResult {
     return html`<slot></slot>`;
   }
@@ -25,9 +23,6 @@ class InputHelperText extends LitElement {
       );
       line-height: normal;
     }
-    :host([disabled]) {
-      color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
-    }
   `;
 }
 

src/components/ha-labeled-slider.ts

@@ -50,9 +50,7 @@ class HaLabeledSlider extends LitElement {
       </div>
       ${
         this.helper
-          ? html`<ha-input-helper-text .disabled=${this.disabled}>
-              ${this.helper}
-            </ha-input-helper-text>`
+          ? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
           : nothing
       }
     `;

src/components/ha-lawn_mower-action-button.ts

@@ -28,6 +28,11 @@ const LAWN_MOWER_ACTIONS: Partial<
     service: "start_mowing",
     feature: LawnMowerEntityFeature.START_MOWING,
   },
+  idle: {
+    action: "start_mowing",
+    service: "start_mowing",
+    feature: LawnMowerEntityFeature.START_MOWING,
+  },
   returning: {
     action: "pause",
     service: "pause",

src/components/ha-media-item-picker.ts

@@ -239,9 +239,7 @@ export class HaMediaItemPicker extends LitElement {
       }
       ${
         hideEntityPicker && this.helper
-          ? html`<ha-input-helper-text .disabled=${this.disabled}
-              >${this.helper}</ha-input-helper-text
-            >`
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : nothing
       }
     `;

src/components/ha-outlined-button.ts

@@ -1,26 +0,0 @@
-import { OutlinedButton } from "@material/web/button/internal/outlined-button";
-import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.cssresult.js";
-import { styles } from "@material/web/button/internal/outlined-styles.cssresult.js";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-outlined-button")
-export class HaOutlinedButton extends OutlinedButton {
-  static override styles = [
-    sharedStyles,
-    styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-outline: var(--outline-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-outlined-button": HaOutlinedButton;
-  }
-}

src/components/ha-outlined-field.ts

@@ -1,36 +0,0 @@
-import { OutlinedField } from "@material/web/field/internal/outlined-field";
-import { styles } from "@material/web/field/internal/outlined-styles.cssresult.js";
-import { styles as sharedStyles } from "@material/web/field/internal/shared-styles.cssresult.js";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-import { literal } from "lit/static-html";
-
-@customElement("ha-outlined-field")
-export class HaOutlinedField extends OutlinedField {
-  protected readonly fieldTag = literal`ha-outlined-field`;
-
-  static override styles = [
-    sharedStyles,
-    styles,
-    css`
-      .container::before {
-        display: block;
-        content: "";
-        position: absolute;
-        inset: 0;
-        background-color: var(--ha-outlined-field-container-color, transparent);
-        opacity: var(--ha-outlined-field-container-opacity, 1);
-        border-start-start-radius: var(--_container-shape-start-start);
-        border-start-end-radius: var(--_container-shape-start-end);
-        border-end-start-radius: var(--_container-shape-end-start);
-        border-end-end-radius: var(--_container-shape-end-end);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-outlined-field": HaOutlinedField;
-  }
-}

src/components/ha-resizable-bottom-sheet.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, query, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
 
@@ -11,39 +11,80 @@ import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
  * the sheet by dragging the handle at the top. It supports both mouse and touch
  * interactions and automatically closes when dragged below a 20% of screen height.
  *
+ * A persistent sheet never closes by dragging; it stops at its minimum height
+ * instead, so a host can keep a collapsed strip of content reachable.
+ *
  * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
+ * @fires bottom-sheet-resized - Fired with the sheet's height in pixels once
+ * it has opened and whenever a drag ends
  *
  * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
  * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
  * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
+ * @cssprop --ha-bottom-sheet-handle-padding - How far below the handle the
+ * grab area reaches; shrink it when content sits right under the handle
  */
 @customElement("ha-resizable-bottom-sheet")
 export class HaResizableBottomSheet extends LitElement {
   @query("dialog") private _dialog!: HTMLDialogElement;
 
+  /** Dragging down stops at the minimum height instead of closing the sheet */
+  @property({ type: Boolean }) public persistent = false;
+
+  /**
+   * The height in pixels the sheet cannot be dragged below, e.g. what a host
+   * measures for the strip it wants to keep visible. Without it the sheet
+   * stops at 20% of the viewport.
+   */
+  @property({ type: Number, attribute: "min-height" })
+  public minHeight?: number;
+
+  /**
+   * The largest share of the viewport the sheet opens at, in percent. It
+   * opens at its content height up to this, and can be dragged to 90 after.
+   */
+  @property({ type: Number, attribute: "open-max-viewport-height" })
+  public openMaxViewportHeight = 70;
+
+  /**
+   * Whether the sheet may open smaller than 55% of the viewport, down to its
+   * content height and the minimum it can be dragged to.
+   */
+  @property({ type: Boolean, attribute: "open-at-content-height" })
+  public openAtContentHeight = false;
+
   private _dragging = false;
 
   private _dragStartY = 0;
 
   private _initialSize = 0;
 
-  @state() private _dialogMaxViewpointHeight = 70;
+  private _opened = false;
 
-  @state() private _dialogMinViewpointHeight = 55;
+  @state() private _dialogMaxViewpointHeight?: number;
+
+  @state() private _dialogMinViewpointHeight?: number;
 
   @state() private _dialogViewportHeight?: number;
 
   render() {
+    // Until it has opened, the sheet sizes to its content within the opening
+    // bounds; afterwards it keeps the height it settled on or was dragged to
+    const maxHeight =
+      this._dialogMaxViewpointHeight ?? this.openMaxViewportHeight;
+    const minHeight =
+      this._dialogMinViewpointHeight ??
+      (this.openAtContentHeight ? this._minViewportHeight() : 55);
     return html`<dialog
       open
       @transitionend=${this._handleTransitionEnd}
       style=${`
         --height: ${this._dialogViewportHeight}vh;
         --height: ${this._dialogViewportHeight}dvh;
-        --max-height: ${this._dialogMaxViewpointHeight}vh;
-        --max-height: ${this._dialogMaxViewpointHeight}dvh;
-        --min-height: ${this._dialogMinViewpointHeight}vh;
-        --min-height: ${this._dialogMinViewpointHeight}dvh;
+        --max-height: ${maxHeight}vh;
+        --max-height: ${maxHeight}dvh;
+        --min-height: ${minHeight}vh;
+        --min-height: ${minHeight}dvh;
       `}
     >
       <div class="handle-wrapper">
@@ -83,7 +124,9 @@ export class HaResizableBottomSheet extends LitElement {
       this._dialogViewportHeight =
         (this._dialog.offsetHeight / window.innerHeight) * 100;
       this._dialogMaxViewpointHeight = 90;
-      this._dialogMinViewpointHeight = 20;
+      this._dialogMinViewpointHeight = this._minViewportHeight();
+      this._opened = true;
+      this._fireResized();
     } else {
       // after close animation is done close dialog element and fire closed event
       this._dialog.close();
@@ -102,6 +145,7 @@ export class HaResizableBottomSheet extends LitElement {
     });
     document.addEventListener("touchend", this._handleTouchEnd);
     document.addEventListener("touchcancel", this._handleTouchEnd);
+    window.addEventListener("resize", this._handleViewportResize);
   }
 
   disconnectedCallback() {
@@ -113,8 +157,16 @@ export class HaResizableBottomSheet extends LitElement {
     document.removeEventListener("touchmove", this._handleTouchMove);
     document.removeEventListener("touchend", this._handleTouchEnd);
     document.removeEventListener("touchcancel", this._handleTouchEnd);
+    window.removeEventListener("resize", this._handleViewportResize);
   }
 
+  // minHeight is a pixel value, so its viewport-relative minimum depends on the
+  // window height; recompute it when the viewport changes (for example on
+  // rotation) so the cached percentage cannot clip the persistent peek content.
+  private _handleViewportResize = () => {
+    this._applyMinViewportHeight();
+  };
+
   private _handleMouseDown = (ev: MouseEvent) => {
     this._startDrag(ev.clientY);
   };
@@ -156,8 +208,10 @@ export class HaResizableBottomSheet extends LitElement {
     let newSize = this._initialSize + deltaVh;
     newSize = Math.max(10, Math.min(90, newSize));
 
-    // on drag down and below 20vh
-    if (newSize < 20 && deltaY < 0) {
+    if (this.persistent) {
+      newSize = Math.max(this._minViewportHeight(), newSize);
+    } else if (newSize < 20 && deltaY < 0) {
+      // on drag down and below 20vh
       this._endDrag();
       this.closeSheet();
       return;
@@ -166,6 +220,45 @@ export class HaResizableBottomSheet extends LitElement {
     this._dialogViewportHeight = newSize;
   }
 
+  private _minViewportHeight(): number {
+    return this.minHeight === undefined
+      ? 20
+      : (this.minHeight / window.innerHeight) * 100;
+  }
+
+  protected updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    // A minimum set after opening applies right away
+    if (changedProperties.has("minHeight") && this._opened) {
+      this._applyMinViewportHeight();
+    }
+  }
+
+  // Applies the current pixel minimum as a viewport percentage and, once it has
+  // rendered, reports the size if it changed: raising the minimum can grow a
+  // sheet resting at the old one, and the host needs the new height to keep its
+  // overlay padding in step.
+  private _applyMinViewportHeight() {
+    if (!this._opened) {
+      return;
+    }
+    this._dialogMinViewpointHeight = this._minViewportHeight();
+    this.updateComplete.then(() => {
+      if (this._dialog.offsetHeight !== this._lastReportedHeight) {
+        this._fireResized();
+      }
+    });
+  }
+
+  private _lastReportedHeight?: number;
+
+  private _fireResized() {
+    this._lastReportedHeight = this._dialog.offsetHeight;
+    fireEvent(this, "bottom-sheet-resized", {
+      height: this._lastReportedHeight,
+    });
+  }
+
   private _handleMouseUp = () => {
     this._endDrag();
   };
@@ -180,6 +273,8 @@ export class HaResizableBottomSheet extends LitElement {
     }
     this._dragging = false;
     document.body.style.removeProperty("cursor");
+    // Hosts lay out around the sheet once, not on every move
+    this.updateComplete.then(() => this._fireResized());
   }
 
   static styles = css`
@@ -201,7 +296,8 @@ export class HaResizableBottomSheet extends LitElement {
       justify-content: center;
       align-items: center;
       z-index: 7;
-      padding-bottom: 76px;
+      /* Extends the grab area over the content below the handle */
+      padding-bottom: var(--ha-bottom-sheet-handle-padding, 76px);
     }
     .handle-wrapper .handle::after {
       content: "";
@@ -234,8 +330,20 @@ export class HaResizableBottomSheet extends LitElement {
       top: 0;
       inset-inline-start: 0;
       position: fixed;
+      --sheet-inset-left: var(
+        --ha-bottom-sheet-inset-left,
+        var(--safe-area-inset-left)
+      );
+      --sheet-inset-right: var(
+        --ha-bottom-sheet-inset-right,
+        var(--safe-area-inset-right)
+      );
+      --sheet-border-width: var(--ha-bottom-sheet-border-width, 0px);
+      --sheet-side-borders: calc(2 * var(--sheet-border-width));
       width: calc(
-        100% - 4px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+        100% - var(--sheet-side-borders) - var(--sheet-inset-left) - var(
+            --sheet-inset-right
+          )
       );
       max-width: 100%;
       border: none;
@@ -257,14 +365,14 @@ export class HaResizableBottomSheet extends LitElement {
       );
       transform: translateY(100%);
       transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
-      border-top-width: var(--ha-bottom-sheet-border-width);
-      border-right-width: var(--ha-bottom-sheet-border-width);
-      border-left-width: var(--ha-bottom-sheet-border-width);
+      border-top-width: var(--sheet-border-width);
+      border-right-width: var(--sheet-border-width);
+      border-left-width: var(--sheet-border-width);
       border-bottom-width: 0;
       border-style: var(--ha-bottom-sheet-border-style);
       border-color: var(--ha-bottom-sheet-border-color);
-      margin-left: var(--safe-area-inset-left);
-      margin-right: var(--safe-area-inset-right);
+      margin-left: var(--sheet-inset-left);
+      margin-right: var(--sheet-inset-right);
     }
 
     dialog.show {
@@ -280,5 +388,6 @@ declare global {
 
   interface HASSDomEvents {
     "bottom-sheet-closed": undefined;
+    "bottom-sheet-resized": { height: number };
   }
 }

src/components/ha-select.ts

@@ -164,9 +164,7 @@ export class HaSelect extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`<ha-input-helper-text .disabled=${this.disabled}
-          >${this.helper}</ha-input-helper-text
-        >`
+      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
       : nothing;
   }
 

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

@@ -72,9 +72,7 @@ export class HaSelectorAutomationBehavior extends LitElement {
       ></ha-select-box>
       ${
         this.helper
-          ? html`<ha-input-helper-text .disabled=${this.disabled}
-              >${this.helper}</ha-input-helper-text
-            >`
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : nothing
       }
     `;

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

@@ -45,8 +45,11 @@ export class HaChooseSelector extends LitElement {
     }
     if (
       changedProperties.has("value") &&
-      changedProperties.get("value")?.active_choice &&
-      changedProperties.get("value")?.active_choice !== this._activeChoice
+      typeof this.value === "object" &&
+      this.value !== null &&
+      "active_choice" in this.value &&
+      this.value.active_choice in this.selector.choose.choices &&
+      this.value.active_choice !== this._activeChoice
     ) {
       this._setActiveChoice();
     }
@@ -150,14 +153,14 @@ export class HaChooseSelector extends LitElement {
     if (this.value === null || this.value === undefined) {
       return undefined;
     }
-    return typeof this.value === "object"
+    return typeof this.value === "object" && "active_choice" in this.value
       ? this.value[choice || this.value.active_choice]
       : this.value;
   }
 
   private _setActiveChoice() {
     if (this.value) {
-      if (typeof this.value === "object") {
+      if (typeof this.value === "object" && "active_choice" in this.value) {
         if (this.value.active_choice in this.selector.choose.choices) {
           this._activeChoice = this.value.active_choice;
           return;
@@ -199,6 +202,22 @@ export class HaChooseSelector extends LitElement {
           ];
           return;
         }
+        if (
+          typeofValue === "object" &&
+          !Array.isArray(this.value) &&
+          Object.keys(this.value).length > 0 &&
+          Object.keys(this.value).every((key) =>
+            ["days", "hours", "minutes", "seconds", "milliseconds"].includes(
+              key
+            )
+          ) &&
+          selectorTypes.includes("duration")
+        ) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("duration")
+          ];
+          return;
+        }
       }
     }
     this._activeChoice = Object.keys(this.selector.choose.choices)[0];

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

@@ -68,9 +68,7 @@ export class HaDateTimeSelector extends LitElement {
       </div>
       ${
         this.helper
-          ? html`<ha-input-helper-text .disabled=${this.disabled}
-              >${this.helper}</ha-input-helper-text
-            >`
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : ""
       }
     `;