Recover the map after a reconnect

The token refresh ran on an interval only, which does not fire while the
process is suspended, so a reconnect came back with a token the proxy
refuses. A refresh on the connection's "ready" event covers that.

A fresh token alone was not enough: the vector source is built from a
TileJSON fetched once and never retried, so a refused request left the map
blank. The style is now re-applied when a token arrives after a refusal,
throttled so a proxy refusing for another reason cannot loop. The raster
layer redraws for the same reason - refused tiles are cached as failures.

Co-Authored-By: Claude Opus 5 <[email protected]>

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

@@ -22,7 +22,7 @@ When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body
 
 - `yarn lint` passes when practical for the scope.
 - `yarn test` or focused relevant tests are green when practical for the scope.
-- Tests are added or updated for new data processing and utilities where applicable.
+- Each test added by the change protects real logic, not the look of a component.
 - User-facing text is localized and follows `ha-frontend-user-facing-text` guidance.
 - Components handle loading, error, unavailable, and missing-entity states.
 - Entity existence is checked before property access.

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

@@ -49,12 +49,13 @@ Do not pass `--help`, `--background`, or `--modern` to `script/build_frontend`;
 
 Managed app, demo, gallery, and E2E app workflows share one lifetime lock, so only one build or development server can run at a time.
 
-## Unit And Utility Tests
+## When To Add Tests
 
-- Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
-- Mock WebSocket connections and API calls at boundaries.
-- Cover loading, error, unavailable, and missing-entity states where relevant.
-- Test accessibility-sensitive behavior when it can be asserted without brittle DOM internals.
+- Write tests for code that computes something: data processing, utility functions, config validation, and what happens when the user interacts with a component.
+- Do not write tests that check what a component looks like: its text, CSS classes, styles, or slots. Do not write tests that check the default value of an option.
+- A component that only takes data from contexts and helpers and puts it in a template does not need a test.
+- If you are not sure a test is useful, describe the test and what it would catch, and let the user decide.
+- Tests never talk to a real Home Assistant. Replace `callWS`, `callApi`, and the connection with fakes.
 
 ## Dev Servers
 

.browserslistrc

@@ -1,36 +1,52 @@
 [modern]
 # Modern builds target recent browsers supporting the latest features to minimize transpilation, polyfills, etc.
 # It is served to browsers meeting the following requirements:
-# - released in the last year + current alpha/beta versions
-# - Firefox extended support release (ESR)
-# - with global utilization at or above 0.5%
+# - released in the last 2 years + current alpha/beta versions
 # - exclude dead browsers (no security maintenance for 2+ years)
-# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
+# - exclude QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
-last 1 year
-Firefox ESR
->= 0.5%
+last 2 years
 not dead
-not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0
 
 [legacy]
-# Legacy builds are served when modern requirements are not met and support browsers:
-# - released in the last 7 years + current alpha/beta versionss
-# - with global utilization at or above 0.05%
-# - exclude dead browsers (no security maintenance for 2+ years)
-# - exclude Opera Mini which does not support web sockets
-unreleased versions
-last 7 years
->= 0.05%
-not dead
-not op_mini all
+# Legacy builds are served when modern requirements are not met.
+# Floors are pinned explicitly (not usage-based) so the support policy is
+# deliberate and does not drift with global usage statistics, which do not
+# represent old tablets and wall displays used as Home Assistant dashboards:
+# - iOS/Safari >= 12: iPad Air 1 / mini 2 / mini 3 (last supported iOS).
+#   Older iPads (iPad 2/3/mini 1 on iOS 9.3, iPad 4 on iOS 10.3) cannot run
+#   the app: their engines lack custom elements, shadow DOM, and/or CSS grid.
+# - Chrome >= 59: Fire OS 5 tablets (Fire 7/HD 8/HD 10 through ~2017) have
+#   their system WebView pinned at Chromium 59 and commonly run Fully Kiosk;
+#   also covers old kiosk browsers and no-longer-updating webviews above it.
+# - Edge >= 79: all Chromium-based Edge. Costs nothing (above the Chrome
+#   floor); mainly catches Edge 109 on Windows 7/8.1 and update-frozen
+#   enterprise installs, whose engines can run the legacy build fine.
+# - Firefox >= 94: the zero-cost floor, not a chased population — pinning it
+#   adds no babel transforms, core-js modules, or Lightning CSS prefixes to
+#   the output. Mozilla-supported Firefox (incl. current ESR) always matches
+#   [modern]; Firefox on old OSes is not supported (use Chrome 109 instead).
+#   If Firefox ever becomes the pin forcing extra output, raise it first.
+# - Samsung >= 9: Samsung Internet on old Galaxy tablets
+Chrome >= 59
+ChromeAndroid >= 59
+Edge >= 79
+Firefox >= 94
+FirefoxAndroid >= 94
+iOS >= 12
+Safari >= 12
+Samsung >= 9
 
 [legacy-sw]
-# Same as legacy plus supports service workers
-unreleased versions
-last 7 years
->= 0.05% and supports serviceworkers
-not dead
-not op_mini all
+# Same as legacy, restricted to browsers that support service workers
+# (currently resolves to the same set; guards the service worker build if the legacy floor ever drops below them)
+Chrome >= 59 and supports serviceworkers
+ChromeAndroid >= 59 and supports serviceworkers
+Edge >= 79 and supports serviceworkers
+Firefox >= 94 and supports serviceworkers
+FirefoxAndroid >= 94 and supports serviceworkers
+iOS >= 12 and supports serviceworkers
+Safari >= 12 and supports serviceworkers
+Samsung >= 9 and supports serviceworkers

.github/workflows/codeql-analysis.yaml

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

.github/workflows/sync-device-classes.yaml

@@ -0,0 +1,47 @@
+name: Sync device class constants
+
+# Mirrors the device class constants for Home Assistant Core's into the
+# build-time default in src/data/devce_classes.ts and opens a PR
+# when it drifts. Reads homeassistant/generated/device_classes.json from core.
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 4 * * *" # Daily, 04:00 UTC
+
+permissions:
+  contents: read
+
+jobs:
+  sync:
+    name: Sync
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - name: Setup Node and install
+        uses: ./.github/actions/setup
+
+      - name: Regenerate device class constants
+        run: ./script/gen_device_classes
+
+      - name: Format
+        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
+
+      - name: Create pull request
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        with:
+          branch: chore/sync-numeric-device-classes
+          commit-message: Update numeric sensor device classes
+          title: Update numeric sensor device classes
+          body: |
+            Regenerated `SENSOR_NUMERIC_DEVICE_CLASSES` from Home Assistant Core's
+            `SensorDeviceClass`.
+
+            Automated by `.github/workflows/sync-numeric-device-classes.yaml`.

.github/workflows/sync-sensor-entity-constants.yaml

@@ -1,7 +1,8 @@
-name: Sync numeric device classes
+name: Sync sensor entity constants
 
-# Mirrors Home Assistant Core's numeric `SensorDeviceClass` list into the
-# build-time default in src/data/sensor_numeric_device_classes.ts and opens a PR
+# Mirrors Home Assistant Core's numeric `SensorDeviceClass`, `SensorStateClass`,
+# units and related device and state classes arrays into the
+# build-time default in src/data/sensor_entity_constants.ts and opens a PR
 # when it drifts. Reads homeassistant/generated/sensor.json from core.
 
 on:
@@ -28,8 +29,8 @@ jobs:
       - name: Setup Node and install
         uses: ./.github/actions/setup
 
-      - name: Regenerate numeric device classes
-        run: ./script/gen_numeric_device_classes
+      - name: Regenerate sensor entity constants
+        run: ./script/gen_sensor_entity_constants
 
       - name: Format
         run: yarn prettier --write src/data/sensor_numeric_device_classes.ts

.gitignore

@@ -74,3 +74,4 @@ test/e2e/app/dist/
 .serena
 
 test/benchmarks/results/
+

AGENTS.md

@@ -33,6 +33,7 @@ Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives fi
 - Do not query or manipulate DOM manually when Lit decorators, component refs, or render state are appropriate.
 - Scope styles to components, use theme custom properties, and keep layouts mobile-first and RTL-safe.
 - All user-facing text must be localized through the translation system.
+- Do not write tests just because you changed some code. Write a test when there is real logic that could break without anyone noticing, and explain what the test protects.
 
 ## Project Skills
 

build-scripts/bundle-budget.json

@@ -1,15 +1,15 @@
 {
   "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
   "frontend-modern": {
-    "app": 595204,
-    "core": 57741,
-    "authorize": 576928,
-    "onboarding": 685964
+    "app": 576583,
+    "core": 54790,
+    "authorize": 543547,
+    "onboarding": 655556
   },
   "frontend-legacy": {
-    "app": 861452,
-    "core": 258557,
-    "authorize": 834356,
-    "onboarding": 1001360
+    "app": 717124,
+    "core": 181583,
+    "authorize": 699175,
+    "onboarding": 816133
   }
 }

build-scripts/bundle.cjs

@@ -63,8 +63,10 @@ module.exports.htmlMinifierOptions = {
 };
 
 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
-  safari10: !latestBuild,
-  ecma: latestBuild ? 2015 : 5,
+  // Highest syntax the minifier may emit; it never downlevels. Every browser
+  // in [modern] is well past ES2020 (universal since spring 2020); the
+  // [legacy] floors (Chrome 59 / Safari 12) top out at ES2017.
+  ecma: latestBuild ? 2020 : 2017,
   module: latestBuild,
   format: { comments: false },
   sourceMap: !isTestBuild,

build-scripts/gulp/gather-static.js

@@ -4,6 +4,7 @@ import fs from "fs-extra";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
+import { ensureMapAssets, mapAssetsDir } from "./map-assets.js";
 
 const npmPath = (...parts) =>
   path.resolve(paths.root_dir, "node_modules", ...parts);
@@ -89,7 +90,7 @@ function copyQrScannerWorker(staticDir) {
   copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
 }
 
-function copyMapPanel(staticDir) {
+async function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("leaflet/dist/leaflet.css"),
@@ -103,6 +104,10 @@ function copyMapPanel(staticDir) {
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")
   );
+
+  // Style, glyphs and sprites for the vector base map
+  await ensureMapAssets();
+  fs.copySync(mapAssetsDir, staticPath("map/"));
 }
 
 function copyZXingWasm(staticDir) {
@@ -139,7 +144,7 @@ gulp.task("copy-static-app", async () => {
   copyMdiIcons(staticDir);
 
   // Panel assets
-  copyMapPanel(staticDir);
+  await copyMapPanel(staticDir);
 
   // Qr Scanner assets
   copyZXingWasm(staticDir);
@@ -155,7 +160,7 @@ gulp.task("copy-static-demo", async () => {
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
   copyPolyfills(paths.demo_output_static);
-  copyMapPanel(paths.demo_output_static);
+  await copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
   copyLocaleData(paths.demo_output_static);
@@ -168,7 +173,7 @@ gulp.task("copy-static-cast", async () => {
   // Copy cast static files
   fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
   copyPolyfills(paths.cast_output_static);
-  copyMapPanel(paths.cast_output_static);
+  await copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
   copyLocaleData(paths.cast_output_static);
@@ -184,7 +189,7 @@ gulp.task("copy-static-gallery", async () => {
     paths.gallery_output_root
   );
 
-  copyMapPanel(paths.gallery_output_static);
+  await copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
   copyLocaleData(paths.gallery_output_static);
@@ -215,7 +220,7 @@ gulp.task("copy-static-e2e-test-app", async () => {
   }
 
   copyPolyfills(paths.e2eTestApp_output_static);
-  copyMapPanel(paths.e2eTestApp_output_static);
+  await copyMapPanel(paths.e2eTestApp_output_static);
   copyFonts(paths.e2eTestApp_output_static);
   copyTranslations(paths.e2eTestApp_output_static);
   copyLocaleData(paths.e2eTestApp_output_static);

build-scripts/gulp/gen-device-classes.js

@@ -0,0 +1,40 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/refs/heads/dev/homeassistant/generated/device_classes.json";
+
+const TARGET = join(paths.root_dir, "src", "data", "device_classes.ts");
+
+gulp.task("gen-device-classes", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const domainDeviceClasses = data ?? {};
+  if (!Object.keys(domainDeviceClasses).length) {
+    throw new Error(`No device classes found in ${SOURCE_URL}`);
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's
+// entity platform device classes. Do not edit by hand.
+// Regenerate with \`script/gen_device_classes\`.
+
+export const DOMAIN_DEVICE_CLASSES: Record<string, string[]> = {
+${Object.entries(domainDeviceClasses)
+  .map(
+    ([domain, deviceClasses]) =>
+      `  "${domain}": [${deviceClasses.map((deviceClass) => `"${deviceClass}"`).join(", ")}],`
+  )
+  .join("\n")}
+};
+`;
+
+  await writeFile(TARGET, content);
+});

build-scripts/gulp/gen-numeric-device-classes.js

@@ -1,40 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import process from "node:process";
-import gulp from "gulp";
-import paths from "../paths.cjs";
-
-const SOURCE_URL =
-  process.env.SENSOR_METADATA_URL ||
-  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
-
-const TARGET = join(
-  paths.root_dir,
-  "src",
-  "data",
-  "sensor_numeric_device_classes.ts"
-);
-
-gulp.task("gen-numeric-device-classes", async () => {
-  const response = await fetch(SOURCE_URL);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
-  }
-
-  const data = await response.json();
-  const classes = [...(data.numeric_device_classes ?? [])].sort();
-  if (!classes.length) {
-    throw new Error(`No numeric_device_classes found in ${SOURCE_URL}`);
-  }
-
-  const content = `// This file is auto-generated from Home Assistant Core's \`SensorDeviceClass\`
-// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
-// Regenerate with \`script/gen_numeric_device_classes\`.
-
-export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
-${classes.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
-];
-`;
-
-  await writeFile(TARGET, content);
-});

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

@@ -0,0 +1,83 @@
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import process from "node:process";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const SOURCE_URL =
+  process.env.SENSOR_METADATA_URL ||
+  "https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/generated/sensor.json";
+
+const TARGET = join(
+  paths.root_dir,
+  "src",
+  "data",
+  "sensor_entity_constants.ts"
+);
+
+gulp.task("gen-sensor-entity-constants", async () => {
+  const response = await fetch(SOURCE_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${SOURCE_URL}: ${response.status}`);
+  }
+
+  const data = await response.json();
+  const numericDeviceClasses = [...(data.numeric_device_classes ?? [])].sort();
+  const deviceClassUnits = data.device_class_units ?? {};
+  const convertibleClassUnits = data.convertible_units ?? {};
+  const stateClasses = [...(data.state_classes ?? [])].sort();
+  const stateClassUnits = data.state_class_units ?? {};
+  if (
+    !numericDeviceClasses.length ||
+    !stateClasses.length ||
+    !Object.keys(deviceClassUnits).length ||
+    !Object.keys(stateClassUnits).length
+  ) {
+    throw new Error(
+      `No sensor device classes, state classes or units found in ${SOURCE_URL}`
+    );
+  }
+
+  const content = `// This file is auto-generated from Home Assistant Core's \`DEVICE_CLASS_UNITS\`
+// and \`STATE_CLASS_UNITS\`) and \`SensorDeviceClass\`
+// (all values minus \`NON_NUMERIC_DEVICE_CLASSES\`). Do not edit by hand.
+// Regenerate with \`script/gen_sensor_entity_constants\`.
+
+export const SENSOR_NUMERIC_DEVICE_CLASSES: string[] = [
+${numericDeviceClasses.map((deviceClass) => `  "${deviceClass}",`).join("\n")}
+];
+
+export const SENSOR_DEVICE_CLASS_UNITS: Record<string, (string | null)[]> = {
+${Object.entries(deviceClassUnits)
+  .map(
+    ([deviceClass, units]) =>
+      `  ${deviceClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
+  )
+  .join("\n")}
+};
+
+export const SENSOR_DEVICE_CLASS_CONVERTIBLE_UNITS: Record<string, (string | null)[]> = {
+${Object.entries(convertibleClassUnits)
+  .map(
+    ([deviceClass, units]) =>
+      `  ${deviceClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
+  )
+  .join("\n")}
+};
+
+export const SENSOR_STATE_CLASSES: string[] = [
+${stateClasses.map((stateClass) => `  "${stateClass}",`).join("\n")}
+];
+
+export const SENSOR_STATE_CLASS_UNITS: Record<string, string[]> = {
+${Object.entries(stateClassUnits)
+  .map(
+    ([stateClass, units]) =>
+      `  ${stateClass}: [${units.map((u) => (u === null ? "null" : `"${u}"`)).join(", ")}],`
+  )
+  .join("\n")}
+};
+`;
+
+  await writeFile(TARGET, content);
+});

build-scripts/gulp/index.mjs

@@ -9,10 +9,12 @@ import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
+import "./gen-device-classes.js";
 import "./gen-icons-json.js";
-import "./gen-numeric-device-classes.js";
+import "./gen-sensor-entity-constants.js";
 import "./landing-page.js";
 import "./locale-data.js";
+import "./map-assets.js";
 import "./rspack.js";
 import "./service-worker.js";
 import "./translations.js";

build-scripts/gulp/map-assets.js

@@ -0,0 +1,85 @@
+// Generates the MapLibre styles for the vector base map.
+//
+// Only the styles. Glyphs, sprites and tiles are served by core's proxy, which
+// is what lets them be requested with an application User-Agent and without a
+// referrer. The styles stay here because they come from @versatiles/style and
+// core has no node toolchain to regenerate them with.
+
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { colorful, eclipse } from "@versatiles/style";
+import fs from "fs-extra";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+
+const PROXY_PATH = "/api/map_tiles";
+const TILEJSON_URL = `${PROXY_PATH}/tilejson.json`;
+
+const outputDir = path.resolve(paths.build_dir, "map");
+
+// MapLibre extends the fetched TileJSON with the style's source options, so
+// anything left here wins and freezes at build time. Dropping them is what lets
+// the proxy move the attribution and zoom range too, not just the URLs.
+const TILEJSON_FIELDS = [
+  "tiles",
+  "attribution",
+  "bounds",
+  "minzoom",
+  "maxzoom",
+  "scheme",
+];
+
+// The builder can only write a tile URL, so the source is repointed afterwards.
+// Keyed on there being exactly one source: any other shape means the builder's
+// own default host would ship unnoticed.
+const useTileJson = (name, style) => {
+  const sources = Object.values(style.sources);
+
+  if (sources.length !== 1) {
+    throw new Error(
+      `Style "${name}" has ${sources.length} sources, expected exactly one to ` +
+        `point at the TileJSON. Check what @versatiles/style emits.`
+    );
+  }
+
+  for (const field of TILEJSON_FIELDS) {
+    delete sources[0][field];
+  }
+  sources[0].url = TILEJSON_URL;
+  return style;
+};
+
+const styleOptions = {
+  // Keeps the generated URLs origin relative.
+  baseUrl: "",
+  glyphs: `${PROXY_PATH}/fonts/{fontstack}/{range}.pbf`,
+  sprite: [{ id: "basics", url: `${PROXY_PATH}/sprites/basics/sprites` }],
+};
+
+const buildMapAssets = async () => {
+  await fs.emptyDir(outputDir);
+
+  await Promise.all(
+    // Both themes up front: dark is a real cartography, not an inverted raster.
+    [
+      ["light", colorful],
+      ["dark", eclipse],
+    ].map(([name, builder]) =>
+      writeFile(
+        path.join(outputDir, `${name}.json`),
+        JSON.stringify(useTileJson(name, builder(styleOptions)))
+      )
+    )
+  );
+};
+
+// Shared so it does not have to be wired into every pipeline separately.
+let pending;
+export const ensureMapAssets = () => {
+  pending ??= buildMapAssets();
+  return pending;
+};
+
+gulp.task("build-map-assets", ensureMapAssets);
+
+export const mapAssetsDir = outputDir;

demo/src/stubs/config_entries.ts

@@ -19,6 +19,7 @@ const baseEntry = {
   pref_disable_polling: false,
   disabled_by: null,
   reason: null,
+  error_reason_translation_domain: null,
   error_reason_translation_key: null,
   error_reason_translation_placeholders: null,
 };

demo/src/stubs/devices.ts

@@ -51,4 +51,39 @@ export const demoDevices: DeviceRegistryEntry[] = [
     primary_config_entry: "mock-sonos",
     entry_type: null,
   },
+  {
+    ...baseDevice,
+    id: "power-strip",
+    name: "Power strip",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+  },
+  // Child devices (logical parts of the power strip). They carry the parent's
+  // inherited hardware fields, mirroring how resolveChildDevices fills them in
+  // from the WebSocket, and reference the parent via parent_device_id.
+  {
+    ...baseDevice,
+    id: "power-strip-outlet-1",
+    name: "Outlet 1",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+    parent_device_id: "power-strip",
+  },
+  {
+    ...baseDevice,
+    id: "power-strip-outlet-2",
+    name: "Outlet 2",
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    config_entries: ["mock-hue"],
+    primary_config_entry: "mock-hue",
+    entry_type: null,
+    parent_device_id: "power-strip",
+  },
 ];

demo/src/stubs/energy.ts

@@ -102,6 +102,11 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
     cost_sensors: {},
     solar_forecast_domains: [],
   }));
+  hass.mockWS("energy/validate", () => ({
+    energy_sources: Array.from({ length: 6 }, () => []),
+    device_consumption: Array.from({ length: 6 }, () => []),
+    device_consumption_water: Array.from({ length: 2 }, () => []),
+  }));
   hass.mockWS(
     "energy/fossil_energy_consumption",
     ({ period }): FossilEnergyConsumption => ({

demo/src/stubs/sensor.ts

@@ -1,6 +1,12 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "sensor/device_class_convertible_units",
+    ({ device_class }: { device_class: string }) => ({
+      units: device_class === "energy" ? ["kWh"] : ["W"],
+    })
+  );
   hass.mockWS("sensor/numeric_device_classes", () => ({
     numeric_device_classes: [
       "volume_storage",

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

@@ -25,6 +25,9 @@ title: Button
   <ha-button appearance="filled">
     filled button
   </ha-button>
+  <ha-button appearance="outlined">
+    outlined button
+  </ha-button>
 
   <ha-button size="s">
     small
@@ -65,7 +68,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 
 | Name       | Type                                           | Default  | Description                                                                       |
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
-| appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
+| appearance | "accent"/"filled"/"outlined"/"plain"           | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
 | size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |

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

@@ -9,7 +9,7 @@ import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
 
-const appearances = ["accent", "filled", "plain"];
+const appearances = ["accent", "filled", "outlined", "plain"];
 const variants = ["brand", "danger", "neutral", "warning", "success"];
 
 @customElement("demo-components-ha-button")

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

@@ -29,6 +29,50 @@ const positions: Position[] = ["start", "end"];
 const selectedStates = [false, true];
 const disabledStates = [false, true];
 
+interface TreeChild {
+  key: string;
+  label: string;
+}
+
+interface TreeGroup {
+  key: string;
+  label: string;
+  children: TreeChild[];
+}
+
+const treeGroups: TreeGroup[] = [
+  {
+    key: "binary_sensor",
+    label: "Binary sensor",
+    children: [
+      { key: "door", label: "Door" },
+      { key: "motion", label: "Motion" },
+      { key: "window", label: "Window" },
+    ],
+  },
+  {
+    key: "cover",
+    label: "Cover",
+    children: [
+      { key: "garage", label: "Garage" },
+      { key: "shutter", label: "Shutter" },
+    ],
+  },
+];
+
+interface TreeRow {
+  group: TreeGroup;
+  child?: TreeChild;
+}
+
+const treeRows: TreeRow[] = treeGroups.flatMap((group) => [
+  { group },
+  ...group.children.map((child) => ({ group, child })),
+]);
+
+const treeKey = (group: TreeGroup, child: TreeChild) =>
+  `${group.key}/${child.key}`;
+
 @customElement("demo-components-ha-list")
 export class DemoHaList extends LitElement {
   @state() private _buttonClicks = 0;
@@ -41,6 +85,8 @@ export class DemoHaList extends LitElement {
 
   @state() private _multiCheckEnd: number | Set<number> = new Set();
 
+  @state() private _tree = new Set<string>();
+
   private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];
 
   protected render(): TemplateResult {
@@ -274,6 +320,45 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre>
 selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
       </ha-card>
 
+      <ha-card header="Controlled selection with indeterminate groups">
+        <ha-list-selectable
+          multi
+          controlled
+          aria-label="Controlled tree"
+          @ha-list-item-selected=${this._onTreeToggle}
+          @ha-list-item-deselected=${this._onTreeToggle}
+        >
+          ${treeGroups.map((group) => {
+            const groupState = this._groupState(group);
+            return html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="end"
+                .value=${group.key}
+                ?selected=${groupState === "all"}
+                ?indeterminate=${groupState === "some"}
+              >
+                <span slot="headline">${group.label}</span>
+              </ha-list-item-option>
+              ${group.children.map(
+                (child) => html`
+                  <ha-list-item-option
+                    class="child"
+                    appearance="checkbox"
+                    selection-position="end"
+                    .value=${treeKey(group, child)}
+                    ?selected=${this._tree.has(treeKey(group, child))}
+                  >
+                    <span slot="headline">${child.label}</span>
+                  </ha-list-item-option>
+                `
+              )}
+            `;
+          })}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify([...this._tree])}</pre>
+      </ha-card>
+
       <ha-card header="Option: all combinations">
         <div class="grid">
           ${appearances.map((appearance) =>
@@ -361,6 +446,43 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
     return next;
   }
 
+  private _groupState(group: TreeGroup): "none" | "some" | "all" {
+    const selected = group.children.filter((child) =>
+      this._tree.has(treeKey(group, child))
+    ).length;
+    if (selected === 0) {
+      return "none";
+    }
+    return selected === group.children.length ? "all" : "some";
+  }
+
+  private _onTreeToggle = (ev: CustomEvent<number>) => {
+    const row = treeRows[ev.detail];
+    if (!row) {
+      return;
+    }
+    const next = new Set(this._tree);
+    if (row.child) {
+      const key = treeKey(row.group, row.child);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+    } else {
+      const select = this._groupState(row.group) !== "all";
+      row.group.children.forEach((child) => {
+        const key = treeKey(row.group, child);
+        if (select) {
+          next.add(key);
+        } else {
+          next.delete(key);
+        }
+      });
+    }
+    this._tree = next;
+  };
+
   private _onSingle = (ev: CustomEvent<number>) => {
     this._single = ev.detail;
   };
@@ -443,6 +565,9 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
     .drag-handle {
       cursor: grab;
     }
+    .child::part(base) {
+      padding-inline-start: var(--ha-space-12);
+    }
   `;
 }
 

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

@@ -1,4 +1,3 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -9,7 +8,6 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-target-picker";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { EntityRegistryDisplayEntry } from "../../../../src/data/entity/entity_registry";
@@ -155,9 +153,6 @@ interface Sample {
   description: string;
   selector: Selector;
   value: unknown;
-  // Render ha-target-picker directly in compact (chip) mode instead of the
-  // ha-selector, which does not expose the compact option.
-  compact?: boolean;
 }
 
 const SAMPLES: Sample[] = [
@@ -168,14 +163,6 @@ const SAMPLES: Sample[] = [
     selector: { target: {} },
     value: { device_id: ["old_composite"] },
   },
-  {
-    name: "Target (compact)",
-    description:
-      "In compact mode the replaced reference is shown as a warning chip.",
-    selector: { target: {} },
-    value: { device_id: ["old_composite"] },
-    compact: true,
-  },
   {
     name: "Device (unfiltered, multiple matches)",
     description:
@@ -274,23 +261,13 @@ class DemoHaSelectorReplacedDevice
                 <ha-settings-row narrow slot=${slot}>
                   <span slot="heading">${sample.name}</span>
                   <span slot="description">${sample.description}</span>
-                  ${
-                    sample.compact
-                      ? html`<ha-target-picker
-                          compact
-                          .hass=${this.hass}
-                          .value=${this._values[idx] as HassServiceTarget}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-target-picker>`
-                      : html`<ha-selector
-                          .hass=${this.hass}
-                          .selector=${sample.selector}
-                          .value=${this._values[idx]}
-                          .sampleIdx=${idx}
-                          @value-changed=${this._handleValueChanged}
-                        ></ha-selector>`
-                  }
+                  <ha-selector
+                    .hass=${this.hass}
+                    .selector=${sample.selector}
+                    .value=${this._values[idx]}
+                    .sampleIdx=${idx}
+                    @value-changed=${this._handleValueChanged}
+                  ></ha-selector>
                 </ha-settings-row>
               `
             )}

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

@@ -152,6 +152,84 @@ const DEVICES: DeviceRegistryEntry[] = [
     primary_config_entry: null,
     parent_device_id: null,
   },
+  {
+    area_id: "livingroom",
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_power_strip",
+    identifiers: [["demo", "strip1"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Power strip",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: null,
+  },
+  // Child devices of the power strip. They have no area of their own and
+  // inherit the parent's area ("Livingroom"); the picker renders them indented
+  // under the parent with a tree connector.
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_outlet_1",
+    identifiers: [["demo", "outlet1"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Outlet 1",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: "device_power_strip",
+  },
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_outlet_2",
+    identifiers: [["demo", "outlet2"] as [string, string]],
+    manufacturer: "Acme",
+    model: "Smart Power Strip",
+    model_id: null,
+    name_by_user: null,
+    name: "Outlet 2",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+    serial_number: null,
+    labels: [],
+    created_at: 0,
+    modified_at: 0,
+    primary_config_entry: null,
+    parent_device_id: "device_power_strip",
+  },
 ];
 
 const AREAS: DemoArea[] = [
@@ -346,6 +424,23 @@ const SCHEMAS: {
           },
         },
       },
+      device_class: {
+        name: "Device Class",
+        selector: {
+          device_class: {
+            domain: "sensor",
+          },
+        },
+      },
+      device_class_multiple: {
+        name: "Device Class (Multiple)",
+        selector: {
+          device_class: {
+            domain: "binary_sensor",
+            multiple: true,
+          },
+        },
+      },
       select_custom: {
         name: "Select (Custom)",
         selector: {

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

@@ -132,12 +132,12 @@ const ENTITIES = [
       fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
       preset_modes: ["home", "eco", "away"],
       swing_modes: ["auto", "1", "2", "3", "off"],
-      switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
       current_temperature: 23,
       target_temp_high: 24,
       target_temp_low: 21,
       fan_mode: "auto_low",
       preset_mode: "home",
+      swing_horizontal_modes: ["auto", "4", "5", "6", "off"],
       swing_mode: "auto",
       swing_horizontal_mode: "off",
       supported_features:
@@ -340,6 +340,84 @@ const CONFIGS = [
       features: [{ type: "fan-oscillate" }],
     },
   },
+  {
+    heading: "Inline features: one feature",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [{ type: "climate-hvac-modes", style: "dropdown" }],
+    },
+  },
+  {
+    heading: "Inline features: two features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: three features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: four features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Inline features: five features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "inline",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+        { type: "climate-swing-horizontal-modes", style: "dropdown" },
+      ],
+    },
+  },
+  {
+    heading: "Bottom features: five features",
+    config: {
+      type: "tile",
+      entity: "climate.dual_thermostat",
+      features_position: "bottom",
+      features: [
+        { type: "climate-hvac-modes", style: "dropdown" },
+        { type: "climate-preset-modes", style: "dropdown" },
+        { type: "climate-fan-modes", style: "dropdown" },
+        { type: "climate-swing-modes", style: "dropdown" },
+        { type: "climate-swing-horizontal-modes", style: "dropdown" },
+      ],
+    },
+  },
 ] satisfies DemoCardConfig<TileCardConfig>[];
 
 @customElement("demo-lovelace-tile-card")

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

@@ -39,6 +39,7 @@ const createConfigEntry = (
   pref_disable_new_entities: false,
   pref_disable_polling: false,
   reason: null,
+  error_reason_translation_domain: null,
   error_reason_translation_key: null,
   error_reason_translation_placeholders: null,
   ...override,

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

@@ -15,7 +15,6 @@ const ALL_FEATURES =
   VacuumEntityFeature.STOP +
   VacuumEntityFeature.RETURN_HOME +
   VacuumEntityFeature.FAN_SPEED +
-  VacuumEntityFeature.BATTERY +
   VacuumEntityFeature.STATUS +
   VacuumEntityFeature.LOCATE +
   VacuumEntityFeature.CLEAN_SPOT +
@@ -28,8 +27,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Full featured vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 85,
-      battery_icon: "mdi:battery-80",
       fan_speed: "balanced",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Charged",
@@ -41,8 +38,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Cleaning vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 62,
-      battery_icon: "mdi:battery-60",
       fan_speed: "turbo",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Cleaning bedroom",
@@ -58,10 +53,7 @@ const ENTITIES = [
         VacuumEntityFeature.START +
         VacuumEntityFeature.PAUSE +
         VacuumEntityFeature.STOP +
-        VacuumEntityFeature.RETURN_HOME +
-        VacuumEntityFeature.BATTERY,
-      battery_level: 23,
-      battery_icon: "mdi:battery-20",
+        VacuumEntityFeature.RETURN_HOME,
       status: "Returning to dock",
     },
   },
@@ -96,8 +88,6 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Paused vacuum",
       supported_features: ALL_FEATURES,
-      battery_level: 45,
-      battery_icon: "mdi:battery-40",
       fan_speed: "standard",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Paused",

package.json

@@ -42,14 +42,14 @@
     "@babel/runtime": "8.0.0",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.10.4",
+    "@codemirror/commands": "6.11.0",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.4",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.8",
+    "@codemirror/view": "6.43.9",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.6.0",
@@ -75,6 +75,7 @@
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
+    "@maplibre/maplibre-gl-leaflet": "0.1.4",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/web": "2.5.0",
@@ -89,32 +90,34 @@
     "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.1",
+    "barcode-detector": "3.2.2",
     "cally": "0.9.2",
     "color-name": "2.1.1",
     "comlink": "4.4.2",
     "core-js": "3.50.0",
-    "cropperjs": "1.6.2",
+    "cropperjs": "1.6.3",
     "culori": "4.0.2",
     "date-fns": "4.4.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
     "echarts": "6.1.0",
+    "echarts-extension-chart2music": "0.1.1",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
-    "hls.js": "1.6.17",
+    "hls.js": "1.7.1",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.13",
-    "js-yaml": "5.2.3",
+    "intl-messageformat": "11.2.14",
+    "js-yaml": "5.3.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "marked": "18.0.9",
+    "maplibre-gl": "5.24.0",
+    "marked": "18.0.10",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -142,18 +145,18 @@
     "@babel/helper-define-polyfill-provider": "1.0.0",
     "@babel/plugin-transform-runtime": "8.0.1",
     "@babel/preset-env": "8.0.2",
-    "@bundle-stats/plugin-webpack-filter": "4.22.2",
+    "@bundle-stats/plugin-webpack-filter": "4.22.3",
     "@eslint/js": "10.0.1",
     "@gfx/zopfli": "1.0.15",
-    "@html-eslint/eslint-plugin": "0.64.0",
+    "@html-eslint/eslint-plugin": "0.65.0",
     "@lokalise/node-api": "16.3.0",
     "@octokit/auth-oauth-device": "8.0.4",
     "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.1",
-    "@rspack/core": "2.1.8",
-    "@rspack/dev-server": "2.2.0",
+    "@rsdoctor/rspack-plugin": "1.6.3",
+    "@rspack/core": "2.1.10",
+    "@rspack/dev-server": "2.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -164,17 +167,19 @@
     "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.4",
+    "@types/luxon": "3.7.5",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@typescript/native": "npm:[email protected]",
-    "@vitest/coverage-v8": "4.1.10",
+    "@versatiles/style": "5.13.1",
+    "@vitest/coverage-v8": "4.1.11",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
+    "browserslist": "4.28.8",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.8.1",
+    "eslint": "10.9.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -186,7 +191,7 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.9.0",
+    "globals": "17.11.0",
     "gulp": "5.0.1",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
@@ -195,12 +200,13 @@
     "jsdom": "30.0.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
+    "lightningcss": "1.33.0",
     "lint-staged": "17.3.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
-    "minify-literals": "2.1.0",
+    "minify-literals": "2.2.0",
     "pinst": "3.0.0",
     "prettier": "3.9.6",
     "rspack-manifest-plugin": "5.2.2",
@@ -210,9 +216,9 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.66.0",
+    "typescript-eslint": "8.67.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -223,7 +229,6 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
-    "globals": "17.9.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260729.0"
+version      = "20260826.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

script/check-licenses

@@ -27,6 +27,7 @@ const ALLOWED_LICENSES = new Set([
   "0BSD",
   "CC0-1.0",
   "(MIT OR CC0-1.0)",
+  "(MIT OR Apache-2.0)",
   "(MIT AND Zlib)",
   "Python-2.0", // argparse - Python Software Foundation License (permissive)
   "Public Domain",

script/gen_device_classes

@@ -8,4 +8,4 @@ set -eu -o pipefail
 
 cd "$(dirname "$0")/.."
 
-./node_modules/.bin/gulp gen-numeric-device-classes
+./node_modules/.bin/gulp gen-device-classes

script/gen_sensor_entity_constants

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

src/common/controllers/filter-panel-controller.ts

@@ -0,0 +1,217 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import { css, type LitElement } from "lit";
+import type { Ref } from "lit/directives/ref";
+import { parseAnimationDuration } from "../util/parse-animation-duration";
+
+type FilterPanelHost = ReactiveControllerHost &
+  LitElement & { expanded: boolean };
+
+const EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+
+/**
+ * Layout the controller relies on: the filter is a flex column made of its
+ * header (`ha-expansion-panel`) and a `.content` wrapper. Collapsed, it is as
+ * tall as its header; expanded, it fills what is left of the pane and hands
+ * that space down to the list through the wrapper.
+ */
+export const filterPanelStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  :host([expanded]) {
+    flex: 1;
+    height: 0;
+  }
+  ha-expansion-panel {
+    flex: none;
+    --ha-card-border-radius: var(--ha-border-radius-square);
+  }
+  ha-expansion-panel::part(summary) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+`;
+
+const panels = new Set<FilterPanelController>();
+
+let pending: Set<FilterPanelController> | undefined;
+
+const flush = () => {
+  const batch = [...pending!].filter((panel) => panel.host.isConnected);
+  pending = undefined;
+  batch.forEach((panel) => panel.prepare());
+  batch.forEach((panel) => panel.measure());
+  batch.forEach((panel) => panel.play());
+};
+
+// Filters that change in the same frame (one closing while another opens) are
+// animated as one batch: every filter is measured before any of them has
+// changed the DOM, and the closing ones are parked at their final height so
+// the opening one reads its own final height from the real layout.
+const enqueue = (panel: FilterPanelController) => {
+  if (!pending) {
+    pending = new Set();
+    panels.forEach((other) => other.snapshot());
+    requestAnimationFrame(flush);
+  }
+  pending.add(panel);
+};
+
+const clearInlineStyles = (element?: HTMLElement) => {
+  element?.style.removeProperty("height");
+  element?.style.removeProperty("flex");
+  element?.style.removeProperty("overflow");
+};
+
+/**
+ * Animates a filter of the filter pane between its collapsed and expanded
+ * heights whenever `expanded` changes, and tells the host when to render its
+ * content: from the moment it expands until its collapse animation has ended.
+ *
+ * During the animation the content keeps its final size and the host clips
+ * it, so the list is revealed rather than resized.
+ */
+export class FilterPanelController implements ReactiveController {
+  public showContent = false;
+
+  public host: FilterPanelHost;
+
+  private _content: Ref<HTMLElement>;
+
+  private _expanded?: boolean;
+
+  private _first = 0;
+
+  private _last = 0;
+
+  private _contentHeight = 0;
+
+  private _animation?: Animation;
+
+  constructor(host: FilterPanelHost, content: Ref<HTMLElement>) {
+    this.host = host;
+    this._content = content;
+    host.addController(this);
+  }
+
+  public hostConnected() {
+    panels.add(this);
+  }
+
+  public hostDisconnected() {
+    panels.delete(this);
+    this._animation?.cancel();
+    this._animation = undefined;
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+  }
+
+  public hostUpdate() {
+    const expanded = this.host.expanded;
+    if (this._expanded === undefined) {
+      this._expanded = expanded;
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded === this._expanded) {
+      return;
+    }
+    this._expanded = expanded;
+    if (!this.host.isConnected) {
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded) {
+      this.showContent = true;
+    }
+    enqueue(this);
+  }
+
+  public snapshot() {
+    this._first = this.host.getBoundingClientRect().height;
+  }
+
+  public prepare() {
+    this._animation?.cancel();
+    this._animation = undefined;
+    const host = this.host;
+    const content = this._content.value;
+    clearInlineStyles(host);
+    clearInlineStyles(content);
+    if (host.expanded) {
+      return;
+    }
+    this._last =
+      host.getBoundingClientRect().height -
+      (content?.getBoundingClientRect().height ?? 0);
+    this._contentHeight = this._first - this._last;
+    host.style.flex = "none";
+    host.style.height = `${this._last}px`;
+  }
+
+  public measure() {
+    if (!this.host.expanded) {
+      return;
+    }
+    this._last = this.host.getBoundingClientRect().height;
+    this._contentHeight =
+      this._content.value?.getBoundingClientRect().height ?? 0;
+  }
+
+  public play() {
+    const host = this.host;
+    if (this._first === this._last) {
+      this._finish();
+      return;
+    }
+    const content = this._content.value;
+    host.style.flex = "none";
+    host.style.overflow = "hidden";
+    if (content) {
+      content.style.flex = "none";
+      content.style.height = `${this._contentHeight}px`;
+    }
+    const animation = host.animate(
+      [{ height: `${this._first}px` }, { height: `${this._last}px` }],
+      {
+        duration:
+          parseAnimationDuration(
+            getComputedStyle(host).getPropertyValue(
+              "--ha-animation-duration-normal"
+            )
+          ) || 250,
+        easing: EASING,
+        fill: "forwards",
+      }
+    );
+    animation.onfinish = () => this._finish(animation);
+    this._animation = animation;
+  }
+
+  private async _finish(animation?: Animation) {
+    if (!this.host.expanded) {
+      this.showContent = false;
+      this.host.requestUpdate();
+      await this.host.updateComplete;
+    }
+    if (this._animation !== animation) {
+      return;
+    }
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+    this._animation?.cancel();
+    this._animation = undefined;
+  }
+}

src/common/datetime/format_time.ts

@@ -39,6 +39,25 @@ const formatTimeWithSecondsMem = memoizeOne(
     })
 );
 
+// 9:15:24.123 PM || 21:15:24,123
+export const formatTimeWithMilliseconds = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => formatTimeWithMillisecondsMem(locale, config.time_zone).format(dateObj);
+
+const formatTimeWithMillisecondsMem = memoizeOne(
+  (locale: FrontendLocaleData, serverTimeZone: string) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3,
+      hourCycle: useAmPm(locale) ? "h12" : "h23",
+      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+    })
+);
+
 // Tuesday 7:00 PM || Tuesday 19:00
 export const formatTimeWeekday = (
   dateObj: Date,

src/common/dom/setup-leaflet-map.ts

@@ -1,13 +1,27 @@
-import type { Map, TileLayer } from "leaflet";
+import type { Map } from "leaflet";
+import type { MapBaseLayer } from "../map/base-layer";
+import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../map/base-layer";
 
 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");
 
+export interface LeafletMapSetup {
+  map: Map;
+  leaflet: LeafletModuleType;
+  baseLayer: MapBaseLayer;
+}
+
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
-  initialView?: { latitude: number; longitude: number; zoom?: number }
-): Promise<[Map, LeafletModuleType, TileLayer]> => {
+  initialView?: {
+    latitude: number;
+    longitude: number;
+    zoom?: number;
+    darkMode?: boolean;
+    token?: string;
+  }
+): Promise<LeafletMapSetup> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
   }
@@ -17,7 +31,11 @@ export const setupLeafletMap = async (
 
   await import("leaflet.markercluster");
 
-  const map = Leaflet.map(mapElement);
+  const map = Leaflet.map(mapElement, {
+    minZoom: MAP_MIN_ZOOM,
+    maxZoom: MAP_MAX_ZOOM,
+  });
+  map.attributionControl.setPrefix("");
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");
   style.setAttribute("rel", "stylesheet");
@@ -38,21 +56,14 @@ export const setupLeafletMap = async (
     );
   }
 
-  const tileLayer = createTileLayer(Leaflet).addTo(map);
-
-  return [map, Leaflet, tileLayer];
-};
-
-const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
-  leaflet.tileLayer(
-    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
-      leaflet.Browser.retina ? "@2x.png" : ".png"
-    }`,
-    {
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
-      subdomains: "abcd",
-      minZoom: 0,
-      maxZoom: 20,
-    }
+  // The base layer adds itself: the vector layer only builds its MapLibre map
+  // once it is on the map, and that failing has to fall back to raster.
+  const baseLayer = await createBaseLayer(
+    Leaflet,
+    map,
+    initialView?.darkMode ?? false,
+    initialView?.token
   );
+
+  return { map, leaflet: Leaflet, baseLayer };
+};

src/common/entity/entity_filter.ts

@@ -33,7 +33,10 @@ const normalizeFilterArray = <T>(
 };
 
 export const generateEntityFilter = (
-  hass: HomeAssistant,
+  hass: Pick<
+    HomeAssistant,
+    "states" | "entities" | "devices" | "areas" | "floors"
+  >,
   filter: EntityFilter
 ): EntityFilterFunc => {
   const domains = filter.domain

src/common/entity/get_states.ts

@@ -304,6 +304,9 @@ export const DOMAIN_OPTIONS_ATTRIBUTES: Record<
     swing_mode: "swing_modes",
     swing_horizontal_mode: "swing_horizontal_modes",
   },
+  cover: {
+    speed: "supported_speeds",
+  },
   event: {
     event_type: "event_types",
   },

src/common/map/base-layer.ts

@@ -0,0 +1,294 @@
+import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
+import type { Map as LeafletMap, TileLayerOptions } from "leaflet";
+import type { StyleSpecification } from "maplibre-gl";
+import type { LeafletModuleType } from "../dom/setup-leaflet-map";
+import {
+  MAP_TILES_PATH,
+  refreshMapTilesToken,
+  subscribeMapTilesToken,
+  withMapTilesToken,
+} from "../../data/map_tiles";
+
+// Generated by build-scripts/gulp/map-assets.js. The attribution comes from the
+// TileJSON, deliberately: it follows whoever serves the tiles.
+const VECTOR_STYLES = {
+  light: "/static/map/light.json",
+  dark: "/static/map/dark.json",
+} as const;
+
+// MapLibre needs WebGL2 even for raster, so the fallback stays a Leaflet layer.
+// OSM serves no @2x variant.
+const RASTER_TILE_URL = `${MAP_TILES_PATH}/raster/{z}/{x}/{y}.png?token={token}`;
+const OSM_ATTRIBUTION =
+  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+
+// 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;
+
+// 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.
+export const MAP_MIN_ZOOM = 1;
+export const MAP_MAX_ZOOM = 20;
+
+// Leaflet substitutes any option into the URL template; its types do not.
+type TokenTileLayerOptions = TileLayerOptions & { token?: string };
+
+export interface MapBaseLayer {
+  // A no-op for raster, which has no dark variant and is inverted in CSS.
+  setDarkMode: (darkMode: boolean) => void;
+}
+
+let webGL2Supported: boolean | undefined;
+
+// Rules out iOS below 15, older Android tablets and blocklisted drivers.
+const supportsWebGL2 = (): boolean => {
+  if (webGL2Supported === undefined) {
+    try {
+      const context = document.createElement("canvas").getContext("webgl2");
+      webGL2Supported = Boolean(context);
+      // Contexts are scarce; the probe must not keep one.
+      context?.getExtension("WEBGL_lose_context")?.loseContext();
+    } catch {
+      webGL2Supported = false;
+    }
+  }
+  return webGL2Supported;
+};
+
+// MapLibre rejects a relative sprite URL. Not the glyph URL: encoding would
+// mangle its {fontstack} and {range} placeholders.
+// The demo has no core to proxy through. OSM sets CORS on its tiles but not on
+// its glyphs and sprites, which is why those come from VersaTiles.
+const DEMO_UPSTREAM = {
+  tilejson: "https://vector.openstreetmap.org/shortbread_v1/tilejson.json",
+  assets: "https://tiles.versatiles.org/assets",
+};
+
+const useDemoUpstream = (style: StyleSpecification): StyleSpecification => {
+  style.glyphs = `${DEMO_UPSTREAM.assets}/glyphs/{fontstack}/{range}.pbf`;
+  style.sprite = [
+    { id: "basics", url: `${DEMO_UPSTREAM.assets}/sprites/basics/sprites` },
+  ];
+  Object.values(style.sources).forEach((source) => {
+    if ("url" in source) {
+      source.url = DEMO_UPSTREAM.tilejson;
+    }
+  });
+  return style;
+};
+
+const loadStyle = async (url: string): Promise<StyleSpecification> => {
+  const style: StyleSpecification = await (await fetch(url)).json();
+
+  if (__DEMO__) {
+    return useDemoUpstream(style);
+  }
+
+  if (typeof style.sprite === "string") {
+    style.sprite = new URL(style.sprite, location.href).href;
+  } else if (Array.isArray(style.sprite)) {
+    style.sprite = style.sprite.map((sprite) => ({
+      ...sprite,
+      url: new URL(sprite.url, location.href).href,
+    }));
+  }
+  return style;
+};
+
+const createVectorLayer = async (
+  createLayer: typeof maplibreGL,
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  darkMode: boolean,
+  token: string | undefined
+): Promise<MapBaseLayer | undefined> => {
+  let layer: ReturnType<typeof maplibreGL> | undefined;
+
+  try {
+    layer = createLayer({
+      style: await loadStyle(VECTOR_STYLES[darkMode ? "dark" : "light"]),
+      // Absolute, or the worker fetching tiles cannot resolve them.
+      transformRequest: (url) => ({
+        url: withMapTilesToken(url),
+        // OSM asks a website for a referrer, and the demo has no instance
+        // hostname to leak.
+        referrerPolicy: __DEMO__ ? "origin" : undefined,
+      }),
+    });
+    // The plugin builds the MapLibre map in `onAdd`, so a refused context or a
+    // blocked worker throws here. Keep it guarded or those lose the fallback.
+    layer.addTo(map);
+  } catch {
+    if (layer) {
+      try {
+        layer.remove();
+      } catch {
+        // May never have finished being added.
+      }
+    }
+    return undefined;
+  }
+
+  // Tracked apart so a failed request rolls back to what is displayed, not to
+  // the opposite of what it asked - which with several in flight differs.
+  let appliedDarkMode = darkMode;
+  let requestedDarkMode = darkMode;
+  // Styles are fetched, so only the newest request may touch the map.
+  let latestRequest = 0;
+  let vector = true;
+  let refused = false;
+
+  const glMap = layer.getMaplibreMap();
+  let fallbackTimeout: number | undefined;
+  let contextLost = false;
+
+  // Declared first, but only ever called once all three exist.
+  const handleVisibilityChange = () => {
+    if (contextLost) {
+      scheduleSwap();
+    }
+  };
+
+  const swapToRaster = () => {
+    vector = false;
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    try {
+      layer.remove();
+    } catch {
+      // Nothing left to detach.
+    }
+    createRasterLayer(leaflet, map, token);
+  };
+
+  const scheduleSwap = () => {
+    clearTimeout(fallbackTimeout);
+    // Backgrounding drops it too, and there it comes back on return.
+    if (!vector || document.hidden) {
+      return;
+    }
+    fallbackTimeout = window.setTimeout(swapToRaster, CONTEXT_RESTORE_GRACE);
+  };
+
+  glMap.on("webglcontextlost", () => {
+    contextLost = true;
+    scheduleSwap();
+  });
+  glMap.on("webglcontextrestored", () => {
+    contextLost = false;
+    clearTimeout(fallbackTimeout);
+  });
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  map.on("unload", () => {
+    // Otherwise the timer revives a map that is already gone.
+    clearTimeout(fallbackTimeout);
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
+
+  const applyStyle = (newDarkMode: boolean) => {
+    const request = ++latestRequest;
+
+    loadStyle(VECTOR_STYLES[newDarkMode ? "dark" : "light"])
+      .then((style) => {
+        if (request === latestRequest) {
+          appliedDarkMode = newDarkMode;
+          refused = false;
+          layer.getMaplibreMap()?.setStyle(style);
+        }
+      })
+      .catch(() => {
+        if (request === latestRequest) {
+          requestedDarkMode = appliedDarkMode;
+        }
+      });
+  };
+
+  // A refused request leaves the source dead: the TileJSON is fetched once and
+  // is never retried, so the style has to be applied again once there is a new
+  // token. Throttled, or a proxy refusing for another reason loops.
+  let lastRecovery = 0;
+  glMap.on("error", (event) => {
+    if ((event.error as { status?: number } | undefined)?.status !== 403) {
+      return;
+    }
+    if (Date.now() - lastRecovery < RECOVERY_THROTTLE) {
+      return;
+    }
+    lastRecovery = Date.now();
+    refused = true;
+    refreshMapTilesToken();
+  });
+
+  const unsubscribeToken = subscribeMapTilesToken(() => {
+    if (vector && refused) {
+      applyStyle(requestedDarkMode);
+    }
+  });
+  map.on("unload", unsubscribeToken);
+
+  return {
+    setDarkMode: (newDarkMode: boolean) => {
+      if (!vector || newDarkMode === requestedDarkMode) {
+        return;
+      }
+      requestedDarkMode = newDarkMode;
+      applyStyle(newDarkMode);
+    },
+  };
+};
+
+const createRasterLayer = (
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  token: string | undefined
+): MapBaseLayer => {
+  const layer = leaflet
+    .tileLayer(RASTER_TILE_URL, {
+      attribution: OSM_ATTRIBUTION,
+      maxZoom: MAP_MAX_ZOOM,
+      // Leaflet throws on an undefined template variable, so no token means an
+      // empty one: the tiles 403 and the markers still draw.
+      token: token ?? "",
+    } as TokenTileLayerOptions)
+    .addTo(map);
+
+  // Substituted per request, so a refreshed token needs no new layer.
+  const unsubscribe = subscribeMapTilesToken((newToken) => {
+    (layer.options as TokenTileLayerOptions).token = newToken;
+    // Tiles that 403'd are cached as failures; only a redraw asks again.
+    layer.redraw();
+  });
+  map.on("unload", unsubscribe);
+
+  return { setDarkMode: () => undefined };
+};
+
+export const createBaseLayer = async (
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  darkMode: boolean,
+  token: string | undefined
+): Promise<MapBaseLayer> => {
+  if (supportsWebGL2()) {
+    let vectorLayer: MapBaseLayer | undefined;
+    try {
+      const { maplibreGL: createLayer } =
+        await import("@maplibre/maplibre-gl-leaflet");
+      vectorLayer = await createVectorLayer(
+        createLayer,
+        leaflet,
+        map,
+        darkMode,
+        token
+      );
+    } catch {
+      // No chunk, no vector map - but still a map.
+    }
+    if (vectorLayer) {
+      return vectorLayer;
+    }
+  }
+  return createRasterLayer(leaflet, map, token);
+};

src/common/navigate.ts

@@ -80,6 +80,67 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
   return ensureDialogsClosed(timestamp);
 };
 
+/**
+ * Lets a page with unsaved changes (e.g. the automation editor) veto
+ * navigation. `isDirty` is read live at navigation time; `prompt` resolves
+ * true when navigation may proceed.
+ */
+export interface UnsavedChangesGuard {
+  isDirty(): boolean;
+  prompt(): Promise<boolean>;
+}
+
+const unsavedChangesGuards = new Set<UnsavedChangesGuard>();
+
+export const registerUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.add(guard);
+};
+
+export const unregisterUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.delete(guard);
+};
+
+let pendingUnsavedPrompt: Promise<boolean> | undefined;
+
+/**
+ * Counts navigations that changed the history entry, so a navigation held up
+ * by an unsaved-changes prompt can tell whether a newer one has moved the app
+ * on in the meantime.
+ */
+let committedNavigations = 0;
+
+/**
+ * Asks each dirty guard whether navigation may proceed. Returns true when
+ * nothing is dirty or every prompt was confirmed. Concurrent navigations
+ * share one pending prompt instead of stacking dialogs; the dirty check runs
+ * before joining it, so a navigation triggered from inside a prompt (e.g. by
+ * its save action) cannot deadlock on its own promise.
+ */
+const ensureUnsavedChangesConfirmed = (): Promise<boolean> => {
+  const dirtyGuards = [...unsavedChangesGuards].filter((guard) =>
+    guard.isDirty()
+  );
+  if (!dirtyGuards.length) {
+    return Promise.resolve(true);
+  }
+  if (!pendingUnsavedPrompt) {
+    pendingUnsavedPrompt = (async () => {
+      try {
+        for (const guard of dirtyGuards) {
+          // eslint-disable-next-line no-await-in-loop
+          if (!(await guard.prompt())) {
+            return false;
+          }
+        }
+        return true;
+      } finally {
+        pendingUnsavedPrompt = undefined;
+      }
+    })();
+  }
+  return pendingUnsavedPrompt;
+};
+
 const buildHistoryState = (
   data: Record<string, unknown> | undefined,
   from?: string
@@ -91,7 +152,7 @@ const buildHistoryState = (
   return { ...state, from };
 };
 
-export const navigate = async (path: string, options?: NavigateOptions) => {
+const performNavigation = async (path: string, options?: NavigateOptions) => {
   const canProceed = await ensureDialogsClosed(Date.now());
   if (!canProceed) {
     return false;
@@ -127,9 +188,28 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   fireEvent(mainWindow, "location-changed", {
     replace,
   });
+  committedNavigations += 1;
   return true;
 };
 
+export const navigate = async (path: string, options?: NavigateOptions) => {
+  // Only guard actual departures: navigating to the current path keeps the
+  // page, and any unsaved state on it, mounted.
+  if (path !== currentPath()) {
+    const navigationsBeforePrompt = committedNavigations;
+    if (!(await ensureUnsavedChangesConfirmed())) {
+      return false;
+    }
+    if (committedNavigations !== navigationsBeforePrompt) {
+      // Another navigation landed while the prompt was waiting for an answer,
+      // so this destination is stale. Dropping it keeps a late answer from
+      // pulling the user back off the page they are on now.
+      return false;
+    }
+  }
+  return performNavigation(path, options);
+};
+
 /**
  * Whether the previous history entry is a page this app navigated away from.
  * `history.length` cannot answer this: a login redirect goes through
@@ -142,6 +222,9 @@ export const canGoBack = (): boolean =>
 /**
  * Navigate back to the page we came from, falling back to a path when the
  * previous entry is not ours (deep link, login redirect, fresh tab).
+ * Deliberately not guarded against unsaved changes: pages with such a guard
+ * confirm in their own back handlers, and delete flows leave through here
+ * after the edited item is already gone.
  */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
   const canProceed = await ensureDialogsClosed(Date.now());
@@ -156,5 +239,5 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
     return;
   }
 
-  await navigate(fallbackPath || "/", { replace: true });
+  await performNavigation(fallbackPath || "/", { replace: true });
 };

src/common/translations/localize.ts

@@ -25,6 +25,7 @@ export type LocalizeKeys =
   | `ui.dialogs.unsupported.reasons.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
   | `ui.panel.config.dashboard.${string}`
+  | `ui.panel.config.mqtt.${string}`
   | `ui.panel.config.storage.segments.${string}`
   | `ui.panel.config.zha.${string}`
   | `ui.panel.config.zwave_js.${string}`

src/common/url/history-logbook-query-params.ts

@@ -1,4 +1,5 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { deepEqual } from "../util/deep-equal";
 import {
   createQueryString,
   decodeQueryParams,
@@ -35,6 +36,15 @@ export const historyLogbookTargetFromQueryParams = (
 ): HassServiceTarget | undefined =>
   serviceTargetFromQueryParams(params, historyLogbookTargetParamKeys);
 
+export const historyLogbookTargetsEqual = (
+  a: HassServiceTarget,
+  b: HassServiceTarget
+): boolean =>
+  deepEqual(
+    queryParamsFromServiceTarget(a, historyLogbookTargetParamKeys),
+    queryParamsFromServiceTarget(b, historyLogbookTargetParamKeys)
+  );
+
 export const createHistoryLogbookUrl = (
   path: string,
   target: HassServiceTarget,

src/common/url/more-info-query-params.ts

@@ -0,0 +1,64 @@
+import {
+  isMoreInfoView,
+  type MoreInfoView,
+} from "../../dialogs/more-info/more-info-view";
+import type { SearchParamsSource } from "./query-params";
+
+const ENTITY_ID_PARAM = "more-info-entity-id";
+const VIEW_PARAM = "more-info-view";
+
+export interface MoreInfoUrlData {
+  entityId?: string;
+  view?: MoreInfoView;
+  hash: URLSearchParams;
+}
+
+export interface CreateMoreInfoUrlData {
+  entityId: string;
+  view: MoreInfoView;
+  hash?: URLSearchParams;
+}
+
+export const decodeMoreInfoUrl = (
+  search: SearchParamsSource,
+  hash = ""
+): MoreInfoUrlData => {
+  const params =
+    typeof search === "string"
+      ? new URLSearchParams(search)
+      : search instanceof URLSearchParams
+        ? search
+        : new URLSearchParams(search);
+  const entityId = params.get(ENTITY_ID_PARAM) || undefined;
+  const view = params.get(VIEW_PARAM) || undefined;
+
+  return {
+    entityId,
+    view: isMoreInfoView(view) ? view : undefined,
+    hash: new URLSearchParams(
+      __DEMO__ ? "" : hash.startsWith("#") ? hash.substring(1) : hash
+    ),
+  };
+};
+
+export const createMoreInfoUrl = (
+  base: string,
+  data: CreateMoreInfoUrlData
+): string => {
+  const url = new URL(base, window.location.origin);
+  url.searchParams.set(ENTITY_ID_PARAM, data.entityId);
+  url.searchParams.set(VIEW_PARAM, data.view);
+  if (!__DEMO__ && data.hash !== undefined) {
+    url.hash = data.hash.toString();
+  }
+
+  return `${url.pathname}${url.search}${url.hash}`;
+};
+
+export const removeMoreInfoUrl = (base: string): string => {
+  const url = new URL(base, window.location.origin);
+  url.searchParams.delete(ENTITY_ID_PARAM);
+  url.searchParams.delete(VIEW_PARAM);
+
+  return `${url.pathname}${url.search}${url.hash}`;
+};

src/common/util/share-in-flight-request.ts

@@ -0,0 +1,37 @@
+import deepFreeze from "deep-freeze";
+
+const inFlightRequests = new WeakMap<object, Map<string, Promise<unknown>>>();
+
+export const shareInFlightRequest = <T>(
+  owner: object,
+  key: string,
+  fetcher: () => Promise<T>
+): Promise<T> => {
+  let requests = inFlightRequests.get(owner);
+  if (!requests) {
+    requests = new Map();
+    inFlightRequests.set(owner, requests);
+  }
+
+  const ownerRequests = requests;
+  const existing = ownerRequests.get(key);
+  if (existing) {
+    return existing as Promise<T>;
+  }
+
+  const request = fetcher()
+    .then((result) => deepFreeze(result) as T)
+    .finally(() => {
+      if (ownerRequests.get(key) !== request) {
+        return;
+      }
+
+      ownerRequests.delete(key);
+      if (ownerRequests.size === 0) {
+        inFlightRequests.delete(owner);
+      }
+    });
+
+  ownerRequests.set(key, request);
+  return request;
+};

src/common/util/time-cache-function-promise.ts

@@ -55,17 +55,20 @@ export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
   }
 
   const resultPromise = func(hass, ...args);
-  anyHass[cacheKey] = resultPromise;
+  const cachePromise = resultPromise.then((result) => ({
+    result,
+    cacheKey: generateCacheKey?.(hass, result),
+  }));
+  anyHass[cacheKey] = cachePromise;
 
-  resultPromise.then(
+  cachePromise.then(
     // When successful, set timer to clear cache
     (result) => {
-      anyHass[cacheKey] = {
-        result,
-        cacheKey: generateCacheKey?.(hass, result),
-      };
+      anyHass[cacheKey] = result;
       setTimeout(() => {
-        anyHass[cacheKey] = undefined;
+        if (anyHass[cacheKey] === result) {
+          anyHass[cacheKey] = undefined;
+        }
       }, cacheTime);
     },
     // On failure, clear cache right away

src/components/chart/chart-sonification.ts

@@ -0,0 +1,355 @@
+import type { HassConfig } from "home-assistant-js-websocket";
+import type { EChartsType } from "echarts/core";
+import type { XAXisOption, YAXisOption } from "echarts/types/dist/shared";
+import { ensureArray } from "../../common/array/ensure-array";
+import { formatDateTime } from "../../common/datetime/format_date_time";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HaECSeries,
+  HaECSeriesItem,
+} from "../../resources/echarts/echarts";
+
+export interface ChartSonification {
+  update: () => void;
+  dispose: () => void;
+}
+
+// Series types the Chart2Music ECharts extension can turn into data points. Our
+// other series (custom timelines, sankey, network graphs) have no equivalent, and
+// the extension refuses the whole chart if a single series is unsupported.
+const SONIFIABLE_SERIES_TYPES = new Set(["bar", "line", "pie", "scatter"]);
+
+// Languages shipped by chart2music. Anything else falls back to its English.
+const SONIFICATION_LANGUAGES = new Set(["de", "en", "es", "fr", "hmn", "it"]);
+
+// Fewer than this and there is nothing to walk between, so a focus stop would
+// lead nowhere.
+const MIN_NAVIGABLE_POINTS = 2;
+
+const itemValues = (raw: unknown): unknown[] | null => {
+  if (Array.isArray(raw)) {
+    return raw;
+  }
+  if (raw && typeof raw === "object") {
+    const { value } = raw as { value?: unknown };
+    if (Array.isArray(value)) {
+      return value;
+    }
+  }
+  return null;
+};
+
+// ECharts spells empty values and numbers as strings too, and neither names a
+// category.
+const NON_CATEGORY_STRINGS = new Set(["-", "NaN", "null", "undefined"]);
+
+const isCategoryKey = (value: unknown): boolean =>
+  typeof value === "string" &&
+  !NON_CATEGORY_STRINGS.has(value) &&
+  Number.isNaN(Number(value));
+
+// A chart with the value axis on x, like the energy device charts, encodes its
+// items value-first: [amount, "sensor.foo"]. The extension only reads a series
+// that way when every item has that shape, so mirror the same gate.
+const isValueFirstSeries = (data: readonly unknown[]): boolean =>
+  data.length > 0 &&
+  data.every((raw) => {
+    const values = itemValues(raw);
+    return (
+      !!values && typeof values[0] === "number" && isCategoryKey(values[1])
+    );
+  });
+
+// Mirrors the extension's own reading of a point: it takes `value` as [x, y]
+// (or [y, category] in a value-first series) and drops anything whose y is not
+// a real number, which rejects gap-only series. Counts no further than `limit`
+// so this stays cheap on charts with many points.
+const countNumericPoints = (data: unknown, limit: number): number => {
+  if (!Array.isArray(data)) {
+    return 0;
+  }
+  const valueFirst = isValueFirstSeries(data);
+  let found = 0;
+  for (const raw of data) {
+    let y: unknown = raw;
+    const values = itemValues(raw);
+    if (values) {
+      y = valueFirst ? values[0] : values.length > 1 ? values[1] : values[0];
+    } else if (raw && typeof raw === "object") {
+      y = (raw as { value?: unknown }).value;
+    }
+    if (typeof y === "number" && !Number.isNaN(y)) {
+      found += 1;
+      if (found >= limit) {
+        break;
+      }
+    }
+  }
+  return found;
+};
+
+const countNavigablePoints = (
+  series: readonly ({ data?: unknown } | undefined)[]
+): number => {
+  let total = 0;
+  for (const s of series) {
+    total += countNumericPoints(s?.data, MIN_NAVIGABLE_POINTS - total);
+    if (total >= MIN_NAVIGABLE_POINTS) {
+      break;
+    }
+  }
+  return total;
+};
+
+export const canSonifyChart = (
+  data: HaECSeries,
+  // Legend-hidden series reach ECharts with their data stripped, so they cannot
+  // be sonified either.
+  hiddenDatasets?: ReadonlySet<string>
+): boolean => {
+  const series = ensureArray(data);
+  const visible = hiddenDatasets?.size
+    ? series.filter((s) => !hiddenDatasets.has(String(s.id ?? s.name)))
+    : series;
+  return (
+    // Cards commonly push empty placeholder series, so judge the chart by the
+    // points the extension can actually read — but every type has to be
+    // convertible too.
+    countNavigablePoints(visible) >= MIN_NAVIGABLE_POINTS &&
+    series.every((s) => SONIFIABLE_SERIES_TYPES.has(s.type as string))
+  );
+};
+
+interface SonifyChartOptions {
+  cc: HTMLElement;
+  localize: LocalizeFunc;
+  locale: FrontendLocaleData;
+  config: HassConfig;
+  // Maps a category key or item name to what should be announced for it, so
+  // cards that key their data on ids (like the energy device charts) can have
+  // the display names read out instead. Returning undefined keeps the original.
+  formatLabel?: (label: string) => string | undefined;
+  onError: (error: string) => void;
+}
+
+// Chart2Music appends its help and options dialogs straight to document.body, so
+// they can only be themed from a document-level stylesheet.
+let stylesAppended = false;
+const appendSonificationStyles = () => {
+  if (stylesAppended) {
+    return;
+  }
+  stylesAppended = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    dialog.chart2music-dialog {
+      box-sizing: border-box;
+      max-width: min(600px, calc(100vw - 32px));
+      max-height: calc(100vh - 32px);
+      overflow: auto;
+      padding: var(--ha-space-6);
+      border: none;
+      border-radius: var(--ha-border-radius-lg);
+      background-color: var(--card-background-color);
+      color: var(--primary-text-color);
+      font-family: var(--ha-font-family-body);
+      font-size: var(--ha-font-size-m);
+      box-shadow: var(--ha-box-shadow-l);
+    }
+    dialog.chart2music-dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    dialog.chart2music-dialog h1 {
+      font-size: var(--ha-font-size-2xl);
+      font-weight: var(--ha-font-weight-normal);
+      margin-block: 0 var(--ha-space-4);
+      padding-inline-end: var(--ha-space-8);
+    }
+    dialog.chart2music-dialog table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+    dialog.chart2music-dialog th,
+    dialog.chart2music-dialog td {
+      text-align: start;
+      padding: var(--ha-space-1) var(--ha-space-2);
+      border-bottom: 1px solid var(--divider-color);
+    }
+    dialog.chart2music-dialog a {
+      color: var(--primary-color);
+    }
+    dialog.chart2music-dialog > button {
+      /* The extension inlines "right", which does not mirror in RTL, and inline
+         styles can only be beaten with !important. */
+      inset-inline-end: var(--ha-space-4) !important;
+      inset-inline-start: auto !important;
+      top: var(--ha-space-4);
+      min-width: 32px;
+      min-height: 32px;
+      cursor: pointer;
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-border-radius-sm);
+      background-color: transparent;
+      color: var(--primary-text-color);
+      font: inherit;
+    }
+  `;
+  document.head.append(style);
+};
+
+// Rebuilds the labels the extension would announce — the category axis's data,
+// or the item names on pies, which ignore whatever vestigial axes the chart
+// options carry — with each one run through the card's formatter. Returns
+// undefined when there is nothing to reword, so the extension's own labels
+// stay untouched.
+const buildValueLabels = (
+  categoryAxis: { type?: string; data?: unknown } | undefined,
+  firstSeries: { type?: string; data?: unknown } | undefined,
+  formatLabel?: (label: string) => string | undefined
+): string[] | undefined => {
+  if (!formatLabel) {
+    return undefined;
+  }
+  const axisData =
+    categoryAxis?.type === "category" &&
+    Array.isArray(categoryAxis.data) &&
+    categoryAxis.data.length
+      ? categoryAxis.data
+      : undefined;
+  const labels = axisData
+    ? axisData.map((entry) =>
+        entry && typeof entry === "object"
+          ? String((entry as { value?: unknown }).value ?? "")
+          : String(entry ?? "")
+      )
+    : firstSeries?.type === "pie" && Array.isArray(firstSeries.data)
+      ? firstSeries.data.map((raw) => {
+          const name = (raw as { name?: unknown } | null)?.name;
+          if (typeof name === "string") {
+            return name;
+          }
+          const values = itemValues(raw);
+          return values && isCategoryKey(values[1]) ? String(values[1]) : "";
+        })
+      : undefined;
+  if (!labels?.length || labels.every((label) => !label)) {
+    return undefined;
+  }
+  return labels.map((label) => formatLabel(label) ?? label);
+};
+
+export const sonifyChart = async (
+  chart: EChartsType,
+  options: SonifyChartOptions
+): Promise<ChartSonification | null> => {
+  const { connect } = await import("echarts-extension-chart2music");
+  const { localize, locale, config } = options;
+  appendSonificationStyles();
+
+  // ECharts nulls its model on dispose, and the instance can be disposed while
+  // the chunk is in flight.
+  const chartOptions = chart.getOption() as ReturnType<
+    EChartsType["getOption"]
+  > | null;
+  if (!chartOptions) {
+    return null;
+  }
+  const xAxis = ensureArray(chartOptions.xAxis)?.[0] as XAXisOption | undefined;
+  const yAxis = ensureArray(chartOptions.yAxis)?.[0] as YAXisOption | undefined;
+
+  // Chart2Music throws while validating a group with no points, which is what
+  // placeholder, legend-hidden and all-null series turn into, so only offer it
+  // the series carrying points it can read.
+  const allSeries = ensureArray(chartOptions.series) as (
+    HaECSeriesItem | undefined
+  )[];
+  const readable = allSeries.filter((s) => countNumericPoints(s?.data, 1));
+  // A single point is not navigable, so it does not earn a focus stop either.
+  if (countNavigablePoints(readable) < MIN_NAVIGABLE_POINTS) {
+    return null;
+  }
+  const seriesIndex = readable.map((s) => allSeries.indexOf(s));
+
+  // Chart2Music always reads out an axis label, and the extension picks the wrong
+  // axis to name when there is no category axis, so label both explicitly. On a
+  // horizontal chart the announced x is the category from the y axis and the
+  // announced y is the value from the x axis, so the sources swap.
+  const isTimeAxis = xAxis?.type === "time";
+  const isHorizontal = xAxis?.type === "value" && yAxis?.type === "category";
+  const valueLabels = buildValueLabels(
+    isHorizontal ? yAxis : xAxis,
+    readable[0],
+    options.formatLabel
+  );
+  const x = {
+    label:
+      (isHorizontal ? yAxis?.name : xAxis?.name) ||
+      localize(
+        isTimeAxis
+          ? "ui.components.history_charts.time"
+          : "ui.components.history_charts.category"
+      ),
+    ...(valueLabels ? { valueLabels } : {}),
+    // Time series carry raw timestamps, which would otherwise be announced as
+    // epoch milliseconds.
+    format: isTimeAxis
+      ? (value: number) => formatDateTime(new Date(value), locale, config)
+      : undefined,
+  };
+  const y = {
+    label:
+      (isHorizontal ? xAxis?.name : yAxis?.name) ||
+      localize("ui.components.history_charts.value"),
+  };
+
+  let connection: ReturnType<typeof connect>;
+  try {
+    connection = connect(chart, {
+      cc: options.cc,
+      seriesIndex,
+      title: localize("ui.components.history_charts.chart"),
+      lang: SONIFICATION_LANGUAGES.has(locale.language)
+        ? locale.language
+        : "en",
+      errorCallback: options.onError,
+      axes: { x, y },
+    });
+  } catch (err) {
+    options.onError(err instanceof Error ? err.message : String(err));
+    return null;
+  }
+  if (!connection) {
+    return null;
+  }
+  // Chart2Music bails out silently on mobile user agents, returning an instance
+  // that never wired anything up. Turning the caption container into a live
+  // region is the last thing it does, so use that as the "really connected" test
+  // rather than leaving a focus stop that does nothing.
+  if (!options.cc.hasAttribute("aria-live")) {
+    connection.dispose();
+    return null;
+  }
+  const connected = connection;
+
+  // The extension re-reads the chart from ECharts' own "finished" event. Run that
+  // through a guard of our own so a conversion failure cannot escape into
+  // ECharts' event dispatch and leave the chart half-rendered.
+  const update = () => {
+    try {
+      connected.update();
+    } catch (_err) {
+      // Keep whatever Chart2Music last read successfully.
+    }
+  };
+  chart.off("finished", connected.update);
+  chart.on("finished", update);
+
+  return {
+    update,
+    dispose: () => {
+      chart.off("finished", update);
+      connected.dispose();
+    },
+  };
+};

src/components/chart/chart-tooltip-position.ts

@@ -3,6 +3,27 @@ import type { TooltipPositionCallback } from "echarts/types/dist/shared";
 export const TOOLTIP_GAP_PX = 12;
 export const TOOLTIP_TOP_OFFSET_PX = 10;
 
+const offsetFromCursor = (
+  cursorX: number,
+  dom: unknown,
+  viewW: number,
+  tipW: number
+) => {
+  const rtl =
+    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
+
+  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
+  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
+
+  let x = rtl ? leftOfCursor : rightOfCursor;
+  const overflowsRight = x + tipW > viewW;
+  const overflowsLeft = x < 0;
+  if (overflowsRight || overflowsLeft) {
+    x = rtl ? rightOfCursor : leftOfCursor;
+  }
+  return Math.max(0, Math.min(x, viewW - tipW));
+};
+
 /**
  * Pins the tooltip near the top of the chart and offsets it horizontally
  * from the cursor so it never covers the data point being inspected.
@@ -20,21 +41,29 @@ export const sideTooltipPosition: TooltipPositionCallback = (
   const [viewW, viewH] = size.viewSize;
   const [tipW, tipH] = size.contentSize;
 
-  const rtl =
-    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
-
-  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
-  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
-
-  let x = rtl ? leftOfCursor : rightOfCursor;
-  const overflowsRight = x + tipW > viewW;
-  const overflowsLeft = x < 0;
-  if (overflowsRight || overflowsLeft) {
-    x = rtl ? rightOfCursor : leftOfCursor;
-  }
-  x = Math.max(0, Math.min(x, viewW - tipW));
-
+  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
   const y = Math.max(0, Math.min(TOOLTIP_TOP_OFFSET_PX, viewH - tipH));
 
   return [x, y];
 };
+
+/**
+ * Offsets the tooltip horizontally from the cursor and keeps it level with it.
+ * For item-trigger tooltips where the cursor's row is what the tooltip shows.
+ */
+export const itemTooltipPosition: TooltipPositionCallback = (
+  point,
+  _params,
+  dom,
+  _rect,
+  size
+) => {
+  const [cursorX, cursorY] = point;
+  const [viewW, viewH] = size.viewSize;
+  const [tipW, tipH] = size.contentSize;
+
+  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
+  const y = Math.max(0, Math.min(cursorY - tipH / 2, viewH - tipH));
+
+  return [x, y];
+};

src/components/chart/down-sample.ts

@@ -10,12 +10,16 @@ interface MeanFrame {
 }
 
 interface MinMaxFrame {
+  // A frame can hold a gap marker before any value lands in it, so the min/max
+  // slots below only mean something once this is true.
+  hasValue: boolean;
   minPoint: Point;
   minX: number;
   minY: number;
   maxPoint: Point;
   maxX: number;
   maxY: number;
+  gapPoint: Point | undefined;
 }
 
 const SECOND = 1000;
@@ -49,6 +53,25 @@ function snapFrameSize(step: number): number {
   return snapped;
 }
 
+// y is NaN for a frame seeded by a gap marker, which has no value yet.
+function newFrame(
+  point: Point,
+  x: number,
+  y: number,
+  gapPoint: Point | undefined
+): MinMaxFrame {
+  return {
+    hasValue: gapPoint === undefined,
+    minPoint: point,
+    minX: x,
+    minY: y,
+    maxPoint: point,
+    maxX: x,
+    maxY: y,
+    gapPoint,
+  };
+}
+
 export function downSampleLineData<
   T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
 >(
@@ -82,7 +105,10 @@ export function downSampleLineData<
       const pointData = getPointData(point);
       if (!Array.isArray(pointData)) continue;
       const x = Number(pointData[0]);
-      const y = Number(pointData[1]);
+      const rawY = pointData[1] as number | null;
+      // Number(null) is 0, which would drag the mean towards zero
+      if (rawY === null) continue;
+      const y = Number(rawY);
       if (isNaN(x) || isNaN(y)) continue;
 
       const frameIndex = Math.floor(x / step);
@@ -120,21 +146,34 @@ export function downSampleLineData<
     const pointData = getPointData(point);
     if (!Array.isArray(pointData)) continue;
     const x = Number(pointData[0]);
-    const y = Number(pointData[1]);
-    if (isNaN(x) || isNaN(y)) continue;
+    if (isNaN(x)) continue;
+    const rawY = pointData[1] as number | null;
+    if (rawY === null) {
+      // The chart data modules push a null value to break the line where an
+      // entity was unavailable. Number(null) is 0, so such a marker must stay
+      // out of the comparisons below, where it would win the minimum slot
+      // whenever the readings are positive and discard the frame's real
+      // minimum. One marker per frame is enough to break the line, and keeping
+      // them all would blow up the output on series that are mostly null. The
+      // last one wins: where the break lands only depends on which points it
+      // sits between, not on its own x.
+      const gapIndex = Math.floor(x / step);
+      const gapFrame = frames.get(gapIndex);
+      if (gapFrame) {
+        gapFrame.gapPoint = point;
+      } else {
+        frames.set(gapIndex, newFrame(point, x, NaN, point));
+      }
+      continue;
+    }
+    const y = Number(rawY);
+    if (isNaN(y)) continue;
 
     const frameIndex = Math.floor(x / step);
     const frame = frames.get(frameIndex);
     if (!frame) {
-      frames.set(frameIndex, {
-        minPoint: point,
-        minX: x,
-        minY: y,
-        maxPoint: point,
-        maxX: x,
-        maxY: y,
-      });
-    } else {
+      frames.set(frameIndex, newFrame(point, x, y, undefined));
+    } else if (frame.hasValue) {
       // Match the original strict-less / strict-greater comparisons so the
       // first occurrence wins on ties.
       if (y < frame.minY) {
@@ -147,18 +186,40 @@ export function downSampleLineData<
         frame.maxX = x;
         frame.maxY = y;
       }
+    } else {
+      // the frame held nothing but a marker so far
+      frame.hasValue = true;
+      frame.minPoint = point;
+      frame.minX = x;
+      frame.minY = y;
+      frame.maxPoint = point;
+      frame.maxX = x;
+      frame.maxY = y;
     }
   }
 
   const result: T[] = [];
   for (const frame of frames.values()) {
-    // The order of the data must be preserved so max may be before min
-    if (frame.minX > frame.maxX) {
-      result.push(frame.maxPoint as T);
+    if (frame.hasValue) {
+      // The order of the data must be preserved so max may be before min
+      if (frame.minX > frame.maxX) {
+        result.push(frame.maxPoint as T);
+      }
+      result.push(frame.minPoint as T);
+      if (frame.minX < frame.maxX) {
+        result.push(frame.maxPoint as T);
+      }
     }
-    result.push(frame.minPoint as T);
-    if (frame.minX < frame.maxX) {
-      result.push(frame.maxPoint as T);
+    if (frame.gapPoint !== undefined) {
+      // A marker followed by a value in its own frame is a gap that closed
+      // within one frame, which is about one device pixel: too narrow to show.
+      // The kept points are exactly min and max, so comparing against the
+      // later of the two catches that without any work on the ingest path. A
+      // marker-only frame compares against its own x and always passes.
+      const lastValueX = frame.minX > frame.maxX ? frame.minX : frame.maxX;
+      if (Number(getPointData(frame.gapPoint)[0]) >= lastValueX) {
+        result.push(frame.gapPoint as T);
+      }
     }
   }
 

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

@@ -22,6 +22,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
@@ -47,6 +48,8 @@ import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
+import type { ChartSonification } from "./chart-sonification";
+import { canSonifyChart, sonifyChart } from "./chart-sonification";
 import { downSampleLineData } from "./down-sample";
 import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";
 
@@ -114,6 +117,11 @@ export class HaChartBase extends LitElement {
 
   @property({ type: String }) public height?: string;
 
+  // Lets cards that key their data on ids have display names announced
+  // instead when the chart is navigated with Chart2Music.
+  @property({ attribute: false })
+  public sonificationLabelFormatter?: (label: string) => string | undefined;
+
   @property({ attribute: "expand-legend", type: Boolean })
   public expandLegend?: boolean;
 
@@ -146,6 +154,17 @@ export class HaChartBase extends LitElement {
 
   @query(".chart") private _chartContainer?: HTMLDivElement;
 
+  @query(".sonification-output")
+  private _sonificationOutput?: HTMLDivElement;
+
+  private _sonification?: ChartSonification;
+
+  @state() private _sonificationLoading = false;
+
+  @state() private _sonificationUnavailable = false;
+
+  @state() private _sonificationFocusHeld = false;
+
   private _modifierPressed = false;
 
   private _isTouchDevice = "ontouchstart" in window;
@@ -198,6 +217,7 @@ export class HaChartBase extends LitElement {
     while (this._listeners.length) {
       this._listeners.pop()!();
     }
+    this._disposeSonification();
     this.chart?.dispose();
     this.chart = undefined;
     this._originalZrFlush = undefined;
@@ -312,6 +332,18 @@ export class HaChartBase extends LitElement {
     }
     if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
       chartOptions.series = this._getSeries();
+      // New data, or a series shown again, may well be convertible where the
+      // last set was not.
+      this._sonificationUnavailable = false;
+      // The connection is built from the series that had data at the time, so
+      // drop it and let the next focus rebuild it against the current set.
+      if (
+        this._sonification &&
+        (changedProps.has("_hiddenDatasets") ||
+          !canSonifyChart(this.data, this._hiddenDatasets))
+      ) {
+        this._disposeSonification();
+      }
     }
     if (changedProps.has("options")) {
       chartOptions = { ...chartOptions, ...this._createOptions() };
@@ -337,6 +369,9 @@ export class HaChartBase extends LitElement {
   }
 
   protected render() {
+    const sonifiable =
+      !this._sonificationUnavailable &&
+      canSonifyChart(this.data, this._hiddenDatasets);
     return html`
       <div
         class="container ${classMap({ "has-height": !!this.height })}"
@@ -348,8 +383,23 @@ export class HaChartBase extends LitElement {
             height: this.height ? undefined : `${this._getDefaultHeight()}px`,
           })}
         >
-          <div class="chart"></div>
+          <div
+            class="chart"
+            role=${ifDefined(sonifiable ? "application" : undefined)}
+            tabindex=${ifDefined(
+              sonifiable ? "0" : this._sonificationFocusHeld ? "-1" : undefined
+            )}
+            aria-label=${ifDefined(
+              sonifiable
+                ? this.hass.localize("ui.components.history_charts.chart")
+                : undefined
+            )}
+            aria-busy=${ifDefined(this._sonificationLoading ? "true" : undefined)}
+            @focus=${this._handleChartFocus}
+            @blur=${this._handleChartBlur}
+          ></div>
         </div>
+        <div class="sonification-output"></div>
         ${this._renderLegend()}
         <div class="top-controls ${classMap({ small: this.smallControls })}">
           <slot name="search"></slot>
@@ -521,6 +571,61 @@ export class HaChartBase extends LitElement {
     </div>`;
   }
 
+  // Chart2Music adds ~45 kB gzipped, so it is only fetched once someone actually
+  // moves keyboard focus into a chart.
+  private async _handleChartFocus() {
+    // Dropping tabindex off the active element resets focus to the document and
+    // 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) {
+      return;
+    }
+    this._sonificationLoading = true;
+    try {
+      const sonification = await sonifyChart(this.chart, {
+        cc: this._sonificationOutput!,
+        localize: this.hass.localize,
+        locale: this.hass.locale,
+        config: this.hass.config,
+        formatLabel: this.sonificationLabelFormatter,
+        onError: () => {
+          // Charts the extension cannot describe stay silent rather than
+          // dropping an error on someone who only pressed Tab.
+        },
+      });
+      if (!this.isConnected || !this.chart) {
+        sonification?.dispose();
+        return;
+      }
+      if (!sonification) {
+        // Nothing came back, so stop offering a focus stop that leads nowhere.
+        this._sonificationUnavailable = true;
+        return;
+      }
+      this._sonification = sonification;
+      if (this.shadowRoot?.activeElement === this._chartContainer) {
+        // Chart2Music reads its summary and key hints on focus, which already
+        // happened while it was still being fetched.
+        this._chartContainer!.dispatchEvent(new FocusEvent("focus"));
+      }
+    } catch (_err) {
+      // Never let a failure here escape a focus handler. The tab stop stays, so
+      // focusing the chart again retries.
+    } finally {
+      this._sonificationLoading = false;
+    }
+  }
+
+  private _handleChartBlur() {
+    this._sonificationFocusHeld = false;
+  }
+
+  private _disposeSonification() {
+    this._sonification?.dispose();
+    this._sonification = undefined;
+  }
+
   private _formatTimeLabel = (value: number | Date) =>
     formatTimeLabel(
       value,
@@ -533,6 +638,9 @@ export class HaChartBase extends LitElement {
     if (this._loading) return;
     this._loading = true;
     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();
       }
@@ -1450,6 +1558,23 @@ export class HaChartBase extends LitElement {
       height: 100%;
       width: 100%;
     }
+    .chart:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+      border-radius: var(--ha-border-radius-sm);
+    }
+    /* Chart2Music renders its announcements here. It must stay in the layout for
+       screen readers to pick up the live region, so hide it visually only. */
+    .sonification-output {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
     .top-controls {
       position: absolute;
       top: var(--ha-space-4);

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

@@ -328,6 +328,7 @@ export class StateHistoryChartLine extends LitElement {
           ...createYAxisPrecisionBounds({
             min: this._clampYAxis(minYAxis),
             max: this._clampYAxis(maxYAxis),
+            unit: this.unit,
             onFractionDigits: (digits) => {
               if (digits !== this._yAxisFractionDigits) {
                 this._yAxisFractionDigits = digits;

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

@@ -12,7 +12,7 @@ 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 { sideTooltipPosition } from "./chart-tooltip-position";
+import { itemTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
@@ -22,6 +22,9 @@ import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 
+const ROW_HEIGHT = 30;
+const GRID_BOTTOM = 30;
+
 @customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -67,7 +70,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .hass=${this.hass}
         .options=${this._chartOptions}
-        .height=${`${this.data.length * 30 + 30}px`}
+        .height=${`${this.data.length * ROW_HEIGHT + GRID_BOTTOM}px`}
         .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
@@ -252,13 +255,13 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       grid: {
         top: 10,
-        bottom: 30,
+        bottom: GRID_BOTTOM,
         left: rtl ? 1 : labelWidth,
         right: rtl ? labelWidth : 1,
       },
       tooltip: {
         renderMode: "html",
-        position: sideTooltipPosition,
+        position: itemTooltipPosition,
         confine: true,
         formatter: this._renderTooltip,
       },

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

@@ -163,12 +163,15 @@ export function generateStatisticsChartData(
         return;
       }
       const isLineChart = chartType === "line";
+      // Points carry their time as epoch milliseconds, not Date objects:
+      // ECharts accepts both, but Chart2Music only reads a numeric x, and a
+      // Date would make it announce points by index instead of time.
       // For bar charts, optionally center the bar within its time range. The
       // centered time is shared by every series of this data point.
       const barTime =
         !isLineChart && centerBars
-          ? new Date((start.getTime() + end.getTime()) / 2)
-          : start;
+          ? (start.getTime() + end.getTime()) / 2
+          : start.getTime();
       // Whether a gap needs to be drawn before this data point (line charts).
       const drawGap =
         isLineChart &&
@@ -182,10 +185,10 @@ export function generateStatisticsChartData(
           if (drawGap) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime!, ...prevValues![i]!]);
-            d.data!.push([prevEndTime!, null]);
+            d.data!.push([prevEndTime!.getTime(), ...prevValues![i]!]);
+            d.data!.push([prevEndTime!.getTime(), null]);
           }
-          d.data!.push([start, ...dataValue!]);
+          d.data!.push([start.getTime(), ...dataValue!]);
           // For band-top rows dataValues[i] is [diff, top]; the actual Y is
           // the last element. For regular rows it's [value]. Same call works.
           trackY(dataValue[dataValue.length - 1]);
@@ -387,7 +390,7 @@ export function generateStatisticsChartData(
     const lastValues = prevValues;
     if (chartType === "line" && lastEndTime && lastValues) {
       statDataSets.forEach((d, i) => {
-        d.data!.push([lastEndTime, ...lastValues[i]!]);
+        d.data!.push([lastEndTime.getTime(), ...lastValues[i]!]);
       });
     }
 
@@ -423,7 +426,7 @@ export function generateStatisticsChartData(
               } else {
                 val.push(currentValue);
               }
-              statDataSets[i].data!.push([now, ...val]);
+              statDataSets[i].data!.push([now.getTime(), ...val]);
               trackY(val[val.length - 1]);
             });
           }

src/components/chart/statistics-chart.ts

@@ -446,6 +446,7 @@ export class StatisticsChart extends LitElement {
         ...createYAxisPrecisionBounds({
           min: this._clampYAxis(minYAxis),
           max: this._clampYAxis(maxYAxis),
+          unit: this.unit,
           // Bar charts stay anchored at 0, so precision must reflect the
           // 0-based range that is actually rendered.
           includeZero: !yAxisScale,

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

@@ -1,13 +1,32 @@
+import { intervalScaleEnsureValidExtent } from "echarts/lib/scale/helper";
+import { getPrecision, nice, round } from "echarts/lib/util/number";
+
 // A range smaller than this fraction of the axis magnitude is floating-point
 // noise (e.g. from summed statistics), not real precision.
 const NEGLIGIBLE_RANGE_RATIO = 1e-10;
 
+// Intervals the axis aims for. Passed to ECharts rather than assumed, so the
+// precision derived here cannot drift from the ticks it renders.
+const SPLIT_NUMBER = 5;
+
+// How thin a gap between the data and the plot edge counts as no gap at all,
+// as a fraction of the data span. ECharts floors the axis minimum and ceils the
+// maximum to a tick multiple, which usually leaves headroom, but quantized
+// states often land exactly on a tick and get none — collapsing area-filled
+// series, which are drawn from their value down to the axis minimum. Widening
+// the extent by this much before that rounding bumps any axis with less
+// headroom out to a full tick, and leaves the rest where they are.
+const GAP_FRACTION_OF_SPAN = 0.02;
+
+// A percentage has a real ceiling the way zero is a real floor, so the gap must
+// not push the axis past it. Not every `%` sensor is bounded — power factor is
+// signed and can read over 100 — so this only applies while the data stays under.
+const PERCENT_MAX = 100;
+
 // Derive the number of decimal digits to use for Y-axis labels from the
-// observed data range. We mirror how ECharts sizes its ticks: it splits the
-// range into ~5 intervals (its default `splitNumber`) and rounds that raw
-// interval to a "nice" 1/2/3/5×10ⁿ value, then reports the decimals that nice
-// interval needs. This matches the precision ECharts actually renders, so
-// labels are neither truncated to identical values nor padded with extra zeros.
+// observed data range, by asking ECharts for the same tick interval it will
+// render. This matches the precision it actually draws, so labels are neither
+// truncated to identical values nor padded with extra zeros.
 export function computeYAxisFractionDigits(
   min: number,
   max: number,
@@ -22,13 +41,7 @@ export function computeYAxisFractionDigits(
   // with a tail of zeros (e.g. "0.20000000000000"), so treat it as flat.
   const magnitude = Math.max(Math.abs(lo), Math.abs(hi));
   if (range <= magnitude * NEGLIGIBLE_RANGE_RATIO) return 1;
-  const rawInterval = range / 5;
-  const exponent = Math.floor(Math.log10(rawInterval));
-  const mantissa = rawInterval / 10 ** exponent; // in [1, 10)
-  // Rounding the mantissa to a nice value only ever carries to the next power
-  // of ten (mantissa ≥ 7 → 10), which needs one fewer decimal.
-  const niceExponent = mantissa >= 7 ? exponent + 1 : exponent;
-  return Math.max(0, -niceExponent);
+  return getPrecision(nice(range / SPLIT_NUMBER, true));
 }
 
 interface YAxisExtentValues {
@@ -44,34 +57,116 @@ const resolveYAxisBound = (
   values: YAxisExtentValues
 ): number | undefined => (typeof bound === "function" ? bound(values) : bound);
 
-// Wrap the Y-axis `min`/`max` options in callbacks so the tick-label precision
-// tracks the currently visible axis extent. ECharts re-invokes these callbacks
-// with the extent of the visible (zoom-filtered) data on every dataZoom, and
-// always before the label formatter runs, so recomputing the fraction digits
-// here keeps zoomed-in labels distinct. The callbacks return the original
-// bounds unchanged, so auto-scaling still applies when a bound is not set.
+// A constant series has no span for the gap to be a fraction of, so ECharts
+// falls back to `Math.abs(min)` when sizing it. That makes the extent unequal,
+// which in turn stops `intervalScaleEnsureValidExtent` from applying the ±|v|/2
+// expansion a flat series relies on for its window. Run that expansion here and
+// return fixed bounds, which also suppresses the gap.
+const flatSeriesExtent = (value: number, fixed: [boolean, boolean]) => {
+  const [lo, hi] = intervalScaleEnsureValidExtent([value, value], fixed);
+  const interval = nice((hi - lo) / SPLIT_NUMBER, true);
+  const precision = getPrecision(interval);
+  return {
+    min: round(Math.floor(lo / interval) * interval, precision),
+    max: round(Math.ceil(hi / interval) * interval, precision),
+  };
+};
+
+// Build the `yAxis` options that keep tick-label precision and the plot-edge gap
+// in agreement with the extent ECharts renders. It re-invokes the `min`/`max`
+// callbacks with the extent of the visible (zoom-filtered) data on every
+// dataZoom, and always before the label formatter runs, so the fraction digits
+// recomputed here track the zoomed range. A callback returns `undefined`
+// wherever auto-scaling should stand, and a number only where the axis has to be
+// pinned: an explicit bound, the zero anchor, or a constant series.
 export function createYAxisPrecisionBounds(options: {
   min?: YAxisBound;
   max?: YAxisBound;
   // Set for bar axes anchored at 0, so precision reflects the 0-based range.
+  // Such an axis also gets no gap: pushing it below zero would defeat the zero
+  // anchoring and leave the bars floating above the axis.
   includeZero?: boolean;
+  // Used to recognise a bounded quantity, so the gap cannot widen the axis past
+  // a limit the data itself never crosses.
+  unit?: string;
   onFractionDigits: (digits: number) => void;
 }): {
   min: (values: YAxisExtentValues) => number | undefined;
   max: (values: YAxisExtentValues) => number | undefined;
+  boundaryGap: [number, number];
+  splitNumber: number;
 } {
-  const { min, max, includeZero, onFractionDigits } = options;
+  const { min, max, includeZero, unit, onFractionDigits } = options;
+  const naturalMax = unit === "%" ? PERCENT_MAX : undefined;
+
+  const resolveBounds = (values: YAxisExtentValues) => {
+    const resolvedMin = resolveYAxisBound(min, values);
+    const resolvedMax = resolveYAxisBound(max, values);
+    if (
+      includeZero ||
+      !Number.isFinite(values.min) ||
+      !Number.isFinite(values.max)
+    ) {
+      return { min: resolvedMin, max: resolvedMax, gap: 0 };
+    }
+    if (values.min === values.max) {
+      const flat = flatSeriesExtent(values.min, [
+        resolvedMin !== undefined,
+        resolvedMax !== undefined,
+      ]);
+      // The expansion is a fraction of the magnitude, so a constant series near
+      // the ceiling would otherwise overshoot it too.
+      const flatMax =
+        naturalMax !== undefined && values.max <= naturalMax
+          ? Math.min(flat.max, naturalMax)
+          : flat.max;
+      return {
+        min: resolvedMin ?? flat.min,
+        max: resolvedMax ?? flatMax,
+        gap: 0,
+      };
+    }
+    const gap = (values.max - values.min) * GAP_FRACTION_OF_SPAN;
+    // Never let the gap carry a series past a boundary it does not itself cross.
+    const floor = values.min >= 0 ? 0 : undefined;
+    const ceiling =
+      naturalMax !== undefined && values.max <= naturalMax
+        ? naturalMax
+        : values.max <= 0
+          ? 0
+          : undefined;
+    return {
+      min:
+        resolvedMin ??
+        (floor !== undefined && values.min - floor < gap ? floor : undefined),
+      max:
+        resolvedMax ??
+        (ceiling !== undefined && ceiling - values.max < gap
+          ? ceiling
+          : undefined),
+      gap,
+    };
+  };
+
   return {
+    // Always emit the key. `setOption` merges the Y axis rather than replacing
+    // it, so a conditionally spread gap would survive a chart switching to a
+    // zero-anchored type and leave its bars floating.
+    boundaryGap: includeZero
+      ? [0, 0]
+      : [GAP_FRACTION_OF_SPAN, GAP_FRACTION_OF_SPAN],
+    splitNumber: SPLIT_NUMBER,
     min: (values) => {
-      const resolvedMin = resolveYAxisBound(min, values);
-      const resolvedMax = resolveYAxisBound(max, values);
-      const extentMin = resolvedMin ?? values.min;
-      const extentMax = resolvedMax ?? values.max;
+      const bounds = resolveBounds(values);
       onFractionDigits(
-        computeYAxisFractionDigits(extentMin, extentMax, includeZero)
+        computeYAxisFractionDigits(
+          bounds.min ?? values.min - bounds.gap,
+          bounds.max ?? values.max + bounds.gap,
+          includeZero
+        )
       );
-      return resolvedMin;
+      return bounds.min;
     },
-    max: (values) => resolveYAxisBound(max, values),
+    max: (values) => resolveBounds(values).max,
   };
 }

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

@@ -117,7 +117,7 @@ export class HaDataTable extends LitElement {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: ContextType<typeof internationalizationContext>;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
@@ -1158,6 +1158,11 @@ export class HaDataTable extends LitElement {
         /* default mdc styles, colors changed, without checkbox styles */
         :host {
           height: 100%;
+          --_cell-padding-inline: 16px;
+        }
+
+        :host([narrow]) {
+          --_cell-padding-inline: 8px;
         }
         .mdc-data-table__content {
           font-family: var(--ha-font-family-body);
@@ -1238,8 +1243,7 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell,
         .mdc-data-table__header-cell {
-          padding-right: 16px;
-          padding-left: 16px;
+          padding-inline: var(--_cell-padding-inline);
           min-width: 150px;
           align-self: center;
           overflow: hidden;
@@ -1259,14 +1263,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell--checkbox,
         .mdc-data-table__cell--checkbox {
-          /* @noflip */
-          padding-left: 16px;
-          /* @noflip */
-          padding-right: 0;
-          /* @noflip */
-          padding-inline-start: 16px;
-          /* @noflip */
-          padding-inline-end: initial;
+          padding-inline-start: var(--_cell-padding-inline);
+          padding-inline-end: 0;
           width: 60px;
           min-width: 60px;
         }
@@ -1379,8 +1377,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:first-child,
         .mdc-data-table__header-cell--icon-button:first-child,
         .mdc-data-table__cell--icon-button:first-child {
-          padding-left: 16px;
-          padding-inline-start: 16px;
+          padding-inline-start: var(--_cell-padding-inline);
           padding-inline-end: initial;
         }
 
@@ -1388,8 +1385,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:last-child,
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
-          padding-right: 16px;
-          padding-inline-end: 16px;
+          padding-inline-end: var(--_cell-padding-inline);
           padding-inline-start: initial;
         }
         .mdc-data-table__cell--overflow-menu,
@@ -1516,11 +1512,17 @@ export class HaDataTable extends LitElement {
         .center {
           text-align: center;
         }
+        .primary {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .secondary {
           color: var(--secondary-text-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          margin-top: 2px;
         }
         .scroller {
           height: calc(100% - 57px);

src/components/date-picker/ha-date-range-nav.ts

@@ -0,0 +1,79 @@
+import { mdiCalendar } from "@mdi/js";
+import { css, html } from "lit";
+import { customElement } from "lit/decorators";
+import "../chips/ha-assist-chip";
+import "../ha-icon-button-next";
+import "../ha-icon-button-prev";
+import "../ha-svg-icon";
+import {
+  haDateRangePickerStyles,
+  HaDateRangePicker,
+} from "./ha-date-range-picker";
+
+/**
+ * Date range picker as a single pill that also steps through ranges: a
+ * previous button, the selected range and a next button. Meant for a toolbar,
+ * next to other chips.
+ */
+@customElement("ha-date-range-nav")
+export class HaDateRangeNav extends HaDateRangePicker {
+  protected override _renderField() {
+    return html`
+      <ha-icon-button-prev
+        class="step"
+        .label=${this._i18n.localize("ui.common.previous")}
+        .disabled=${this.disabled}
+        @click=${this._handlePrev}
+      ></ha-icon-button-prev>
+      <ha-assist-chip
+        id="field"
+        class="range"
+        .label=${this._formatRange(" – ")}
+        .disabled=${this.disabled}
+        @click=${this._openPicker}
+      >
+        <ha-svg-icon slot="icon" .path=${mdiCalendar}></ha-svg-icon>
+      </ha-assist-chip>
+      <ha-icon-button-next
+        class="step"
+        .label=${this._i18n.localize("ui.common.next")}
+        .disabled=${this.disabled}
+        @click=${this._handleNext}
+      ></ha-icon-button-next>
+    `;
+  }
+
+  static override styles = [
+    haDateRangePickerStyles,
+    css`
+      /* The three controls read as one pill, with the range chip's borders as
+         the dividers between them. */
+      .date-range-inputs {
+        gap: 0;
+        border: 1px solid var(--outline-color);
+        border-radius: var(--ha-assist-chip-container-shape, 10px);
+        background: var(--ha-assist-chip-container-color, transparent);
+        overflow: hidden;
+        width: fit-content;
+      }
+
+      .step {
+        --ha-icon-button-size: 32px;
+        --mdc-icon-size: 20px;
+      }
+
+      .range {
+        --md-assist-chip-outline-color: transparent;
+        --ha-assist-chip-container-shape: 0;
+        --ha-assist-chip-container-color: transparent;
+        border-inline: 1px solid var(--divider-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-date-range-nav": HaDateRangeNav;
+  }
+}

src/components/date-picker/ha-date-range-picker.ts

@@ -2,7 +2,6 @@ import "@home-assistant/webawesome/dist/components/popover/popover";
 import { consume, type ContextType } from "@lit/context";
 import { mdiCalendar } from "@mdi/js";
 import "cally";
-import { isThisYear } from "date-fns";
 import type { HassConfig } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,10 +10,7 @@ import { tinykeys } from "tinykeys";
 import { shiftDateRange } from "../../common/datetime/calc_date";
 import type { DateRange } from "../../common/datetime/calc_date_range";
 import { calcDateRange } from "../../common/datetime/calc_date_range";
-import {
-  formatShortDateTime,
-  formatShortDateTimeWithYear,
-} from "../../common/datetime/format_date_time";
+import { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
 import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { configContext, internationalizationContext } from "../../data/context";
@@ -42,18 +38,67 @@ const EXTENDED_RANGE_KEYS: DateRange[] = [
   "now-30d",
 ];
 
+export const haDateRangePickerStyles = css`
+  ha-icon-button {
+    direction: var(--direction);
+  }
+
+  .date-range-inputs {
+    display: flex;
+    align-items: center;
+    gap: var(--ha-space-2);
+  }
+
+  ha-textarea {
+    display: inline-block;
+    width: 340px;
+  }
+  @media only screen and (max-width: 460px) {
+    ha-textarea {
+      width: 100%;
+    }
+  }
+
+  wa-popover {
+    --wa-space-l: 0;
+  }
+
+  wa-popover::part(dialog)::backdrop {
+    opacity: 0;
+    transition: opacity var(--ha-animation-duration-normal) ease-out;
+  }
+
+  wa-popover.open::part(dialog)::backdrop {
+    opacity: 1;
+  }
+
+  :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
+    background: none;
+  }
+
+  wa-popover::part(body) {
+    min-width: max(var(--body-width), 250px);
+    max-width: calc(
+      100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right) - var(
+          --ha-space-8
+        )
+    );
+    overflow: hidden;
+  }
+`;
+
 @customElement("ha-date-range-picker")
 export class HaDateRangePicker extends LitElement {
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
+  protected _i18n!: ContextType<typeof internationalizationContext>;
 
   @state()
   @consume({ context: configContext, subscribe: true })
   @transform<HomeAssistantConfig, HassConfig>({
     transformer: ({ config }) => config,
   })
-  private _hassConfig!: HassConfig;
+  protected _hassConfig!: HassConfig;
 
   @property({ attribute: false }) public startDate!: Date;
 
@@ -143,73 +188,7 @@ export class HaDateRangePicker extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="container">
-        <div class="date-range-inputs">
-          ${
-            !this.minimal
-              ? html`<ha-textarea
-                    id="field"
-                    rows="1"
-                    resize="auto"
-                    @click=${this._openPicker}
-                    @keydown=${this._handleKeydown}
-                    .value=${
-                      (isThisYear(this.startDate)
-                        ? formatShortDateTime(
-                            this.startDate,
-                            this._i18n.locale,
-                            this._hassConfig
-                          )
-                        : formatShortDateTimeWithYear(
-                            this.startDate,
-                            this._i18n.locale,
-                            this._hassConfig
-                          )) +
-                      (window.innerWidth >= 459 ? " - " : " - \n") +
-                      (isThisYear(this.endDate)
-                        ? formatShortDateTime(
-                            this.endDate,
-                            this._i18n.locale,
-                            this._hassConfig
-                          )
-                        : formatShortDateTimeWithYear(
-                            this.endDate,
-                            this._i18n.locale,
-                            this._hassConfig
-                          ))
-                    }
-                    .label=${
-                      this._i18n.localize(
-                        "ui.components.date-range-picker.start_date"
-                      ) +
-                      " - " +
-                      this._i18n.localize(
-                        "ui.components.date-range-picker.end_date"
-                      )
-                    }
-                    .disabled=${this.disabled}
-                    readonly
-                  ></ha-textarea>
-                  <ha-icon-button-prev
-                    .label=${this._i18n.localize("ui.common.previous")}
-                    @click=${this._handlePrev}
-                  >
-                  </ha-icon-button-prev>
-                  <ha-icon-button-next
-                    .label=${this._i18n.localize("ui.common.next")}
-                    @click=${this._handleNext}
-                  >
-                  </ha-icon-button-next>`
-              : html`<ha-icon-button
-                  @click=${this._openPicker}
-                  .disabled=${this.disabled}
-                  id="field"
-                  .label=${this._i18n.localize(
-                    "ui.components.date-range-picker.select_date_range"
-                  )}
-                  .path=${mdiCalendar}
-                ></ha-icon-button>`
-          }
-        </div>
+        <div class="date-range-inputs">${this._renderField()}</div>
         ${
           this._pickerWrapperOpen || this._opened
             ? this._openedNarrow
@@ -248,6 +227,60 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
+  /**
+   * The control that opens the picker. It has to carry `id="field"`, which the
+   * popover anchors to.
+   */
+  protected _renderField() {
+    if (this.minimal) {
+      return html`<ha-icon-button
+        @click=${this._openPicker}
+        .disabled=${this.disabled}
+        id="field"
+        .label=${this._i18n.localize(
+          "ui.components.date-range-picker.select_date_range"
+        )}
+        .path=${mdiCalendar}
+      ></ha-icon-button>`;
+    }
+
+    return html`<ha-textarea
+        id="field"
+        rows="1"
+        resize="auto"
+        @click=${this._openPicker}
+        @keydown=${this._handleKeydown}
+        .value=${this._formatRange(window.innerWidth >= 459 ? " - " : " - \n")}
+        .label=${
+          this._i18n.localize("ui.components.date-range-picker.start_date") +
+          " - " +
+          this._i18n.localize("ui.components.date-range-picker.end_date")
+        }
+        .disabled=${this.disabled}
+        readonly
+      ></ha-textarea>
+      <ha-icon-button-prev
+        .label=${this._i18n.localize("ui.common.previous")}
+        @click=${this._handlePrev}
+      >
+      </ha-icon-button-prev>
+      <ha-icon-button-next
+        .label=${this._i18n.localize("ui.common.next")}
+        @click=${this._handleNext}
+      >
+      </ha-icon-button-next>`;
+  }
+
+  protected _formatRange(separator: string): string {
+    const format = (date: Date) =>
+      formatShortDateTimeWithConditionalYear(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
+    return format(this.startDate) + separator + format(this.endDate);
+  }
+
   private _renderPicker() {
     if (!this._opened) {
       return nothing;
@@ -303,12 +336,12 @@ export class HaDateRangePicker extends LitElement {
     this._opened = false;
   };
 
-  private _handleNext(ev: MouseEvent): void {
+  protected _handleNext(ev: MouseEvent): void {
     if (ev && ev.stopPropagation) ev.stopPropagation();
     this._shift(true);
   }
 
-  private _handlePrev(ev: MouseEvent): void {
+  protected _handlePrev(ev: MouseEvent): void {
     if (ev && ev.stopPropagation) ev.stopPropagation();
     this._shift(false);
   }
@@ -336,7 +369,7 @@ export class HaDateRangePicker extends LitElement {
     this._pickerWrapperOpen = false;
   }
 
-  private _openPicker(ev?: Event) {
+  protected _openPicker(ev?: Event) {
     if (this.disabled) {
       return;
     }
@@ -352,7 +385,7 @@ export class HaDateRangePicker extends LitElement {
     });
   }
 
-  private _handleKeydown(ev: KeyboardEvent) {
+  protected _handleKeydown(ev: KeyboardEvent) {
     if (ev.key === "Enter" || ev.key === " ") {
       ev.stopPropagation();
       this._openPicker(ev);
@@ -369,56 +402,7 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
-  static styles = [
-    css`
-      ha-icon-button {
-        direction: var(--direction);
-      }
-
-      .date-range-inputs {
-        display: flex;
-        align-items: center;
-        gap: var(--ha-space-2);
-      }
-
-      ha-textarea {
-        display: inline-block;
-        width: 340px;
-      }
-      @media only screen and (max-width: 460px) {
-        ha-textarea {
-          width: 100%;
-        }
-      }
-
-      wa-popover {
-        --wa-space-l: 0;
-      }
-
-      wa-popover::part(dialog)::backdrop {
-        opacity: 0;
-        transition: opacity var(--ha-animation-duration-normal) ease-out;
-      }
-
-      wa-popover.open::part(dialog)::backdrop {
-        opacity: 1;
-      }
-
-      :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
-        background: none;
-      }
-
-      wa-popover::part(body) {
-        min-width: max(var(--body-width), 250px);
-        max-width: calc(
-          100vw - var(--safe-area-inset-left) - var(
-              --safe-area-inset-right
-            ) - var(--ha-space-8)
-        );
-        overflow: hidden;
-      }
-    `,
-  ];
+  static styles = [haDateRangePickerStyles];
 }
 
 declare global {

src/components/date-picker/styles.ts

@@ -8,6 +8,7 @@ export const datePickerStyles = css`
   }
   calendar-date::part(button),
   calendar-range::part(button) {
+    color: var(--primary-text-color);
     border: none;
     background-color: unset;
     border-radius: var(--ha-border-radius-circle);

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

@@ -12,7 +12,6 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
   deviceAutomationsEqual,
-  deviceAutomationsSimilar,
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -180,12 +179,15 @@ export abstract class HaDeviceAutomationPicker<
       (a, idx) => value === `${a.device_id}_${idx}`
     );
 
-    const text = automation
+    const described =
+      automation ?? (this.value?.domain ? this.value : undefined);
+
+    const text = described
       ? this._localizeDeviceAutomation(
           this.hass.localize,
           this.hass.states,
           this._entityReg,
-          automation
+          described
         )
       : value === NO_AUTOMATION_KEY
         ? this.NO_AUTOMATION_TEXT
@@ -195,29 +197,24 @@ export abstract class HaDeviceAutomationPicker<
   };
 
   private async _updateDeviceInfo() {
+    // Asking a removed device for its automations fails rather than returning
+    // an empty list.
     this._automations = this.deviceId
       ? (
-          await this._fetchDeviceAutomations(this.hass.callWS, this.deviceId)
+          await this._fetchDeviceAutomations(
+            this.hass.callWS,
+            this.deviceId
+          ).catch(() => [] as T[])
         ).sort(sortDeviceAutomations)
       : // No device, clear the list of automations
         [];
 
-    // If there is no value, or if we have changed the device ID, reset the
-    // value. When the device changed (for example after replacing a removed
-    // device), try to keep the same automation type/subtype on the new device
-    // before falling back to the first available automation.
+    // If there is no value, or if we have changed the device ID, reset the value.
     if (!this.value || this.value.device_id !== this.deviceId) {
-      const equivalent =
-        this.value && this.deviceId
-          ? this._automations.find((automation) =>
-              deviceAutomationsSimilar(automation, this.value!)
-            )
-          : undefined;
       this._setValue(
-        equivalent ||
-          (this._automations.length
-            ? this._automations[0]
-            : this._createNoAutomation(this.deviceId))
+        this._automations.length
+          ? this._automations[0]
+          : this._createNoAutomation(this.deviceId)
       );
     }
     this._renderEmpty = true;

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

@@ -1,13 +1,15 @@
-import { mdiAlertOutline } from "@mdi/js";
+import { mdiSwapHorizontal } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { computeRTL } from "../../common/util/compute_rtl";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
   deviceComboBoxKeys,
@@ -20,13 +22,16 @@ import {
   type DeviceRegistryEntry,
 } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
 import "../ha-svg-icon";
+import "../ha-tree-indicator";
 import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";
 
 export type HaDevicePickerDeviceFilterFunc = (
@@ -100,6 +105,14 @@ export class HaDevicePicker extends LitElement {
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
+  /**
+   * The split devices that can actually replace the current value, when the
+   * caller knows better than this picker. Narrows the replacement candidates,
+   * so the user is only asked to choose when there is a real choice.
+   */
+  @property({ attribute: false })
+  public replacementDeviceIds?: string[];
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
@@ -128,6 +141,7 @@ export class HaDevicePicker extends LitElement {
         entityFilter,
         excludeDevices,
         value,
+        nested: true,
       })
   );
 
@@ -182,7 +196,8 @@ export class HaDevicePicker extends LitElement {
       value: string | undefined,
       _devices: HomeAssistant["devices"],
       compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[]
+      items: (DevicePickerItem | string)[],
+      replacementDeviceIds: string[] | undefined
     ) => {
       if (!value || !compositeSplits || this.hass.devices[value]) {
         return undefined;
@@ -198,7 +213,11 @@ export class HaDevicePicker extends LitElement {
           .filter((item): item is DevicePickerItem => typeof item !== "string")
           .map((item) => item.id)
       );
-      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
+      const candidates = split.split_ids.filter(
+        (id) =>
+          selectableIds.has(id) &&
+          (!replacementDeviceIds || replacementDeviceIds.includes(id))
+      );
       return { candidates, primaryId: split.primary_id };
     }
   );
@@ -216,27 +235,55 @@ export class HaDevicePicker extends LitElement {
       this.value
     );
 
+  // The fuzzy search ranks matches by relevance, which would pull a child device
+  // above its parent (the parent often only matches through the lower-weighted
+  // child names). Restore the nested order from the full item list and recompute
+  // which child is last, so the tree connectors stay correct while searching.
+  private _searchFn: PickerComboBoxSearchFn<DevicePickerItem> = (
+    _search,
+    filteredItems,
+    allItems
+  ) => {
+    const matchedIds = new Set(filteredItems.map((item) => item.id));
+    const ordered = allItems.filter((item) => matchedIds.has(item.id));
+    // Keep any items the search added that are not part of the nested list
+    // (for example the "no items available" placeholder or additional items).
+    const orderedIds = new Set(ordered.map((item) => item.id));
+    const extras = filteredItems.filter((item) => !orderedIds.has(item.id));
+
+    return [
+      ...ordered.map((item, index) => {
+        if (!item.is_child) {
+          return item;
+        }
+        const nextItem = ordered[index + 1];
+        return { ...item, last: !nextItem || !nextItem.is_child };
+      }),
+      ...extras,
+    ];
+  };
+
   private _valueRenderer = memoizeOne(
-    (
-      configEntriesLookup: Record<string, ConfigEntry>,
-      replacementName: string | undefined
-    ) =>
+    (configEntriesLookup: Record<string, ConfigEntry>, isReplaced: boolean) =>
       (value: string) => {
         const deviceId = value;
         const device = this.hass.devices[deviceId];
 
         if (!device) {
-          // When the device was replaced and a replacement is available, show
-          // the replacement device's name. Otherwise fall back to the normal
-          // "not found" display of the raw id.
-          if (replacementName) {
+          // The removed device has no name left to show, so say what happened
+          // to it instead. The alert below names the replacements. Without a
+          // replacement, fall back to the normal "not found" display.
+          if (isReplaced) {
             return html`
               <ha-svg-icon
                 slot="start"
-                style="color: var(--warning-color)"
-                .path=${mdiAlertOutline}
+                .path=${mdiSwapHorizontal}
               ></ha-svg-icon>
-              <span slot="headline">${replacementName}</span>
+              <span slot="headline"
+                >${this.hass.localize(
+                  "ui.components.device-picker.device_replaced"
+                )}</span
+              >
             `;
           }
           return html`<span slot="headline">${deviceId}</span>`;
@@ -279,46 +326,76 @@ export class HaDevicePicker extends LitElement {
       }
   );
 
-  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
-    <ha-combo-box-item type="button">
-      ${
-        item.domain
-          ? html`
-              <img
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => {
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+    return html`
+      <ha-combo-box-item
+        type="button"
+        style=${
+          item.is_child
+            ? "--md-list-item-leading-space: var(--ha-space-12);"
+            : ""
+        }
+      >
+        ${
+          item.is_child
+            ? html`<ha-tree-indicator
+                style=${styleMap({
+                  width: "var(--ha-space-12)",
+                  position: "absolute",
+                  top: "0",
+                  height: "100%",
+                  left: rtl ? undefined : "var(--ha-space-1)",
+                  right: rtl ? "var(--ha-space-1)" : undefined,
+                  transform: rtl ? "scaleX(-1)" : "",
+                })}
+                .end=${item.last}
                 slot="start"
-                alt=""
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${brandsUrl(
-                  {
-                    domain: item.domain,
-                    type: "icon",
-                    darkOptimized: this.hass.themes.darkMode,
-                  },
-                  this.hass.auth.data.hassUrl
-                )}
-              />
-            `
-          : nothing
-      }
+              ></ha-tree-indicator>`
+            : nothing
+        }
+        ${
+          item.domain
+            ? html`
+                <img
+                  slot="start"
+                  alt=""
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl(
+                    {
+                      domain: item.domain,
+                      type: "icon",
+                      darkOptimized: this.hass.themes.darkMode,
+                    },
+                    this.hass.auth.data.hassUrl
+                  )}
+                />
+              `
+            : nothing
+        }
 
-      <span slot="headline">${item.primary}</span>
-      ${
-        item.secondary
-          ? html`<span slot="supporting-text">${item.secondary}</span>`
-          : nothing
-      }
-      ${
-        item.domain_name
-          ? html`
-              <div slot="trailing-supporting-text" class="domain">
-                ${item.domain_name}
-              </div>
-            `
-          : nothing
-      }
-    </ha-combo-box-item>
-  `;
+        <span slot="headline">${item.primary}</span>
+        ${
+          item.secondary
+            ? html`<span slot="supporting-text">${item.secondary}</span>`
+            : nothing
+        }
+        ${
+          item.domain_name
+            ? html`
+                <div slot="trailing-supporting-text" class="domain">
+                  ${item.domain_name}
+                </div>
+              `
+            : nothing
+        }
+      </ha-combo-box-item>
+    `;
+  };
 
   protected render() {
     const placeholder =
@@ -336,31 +413,23 @@ export class HaDevicePicker extends LitElement {
             this.value,
             this.hass.devices,
             this._compositeSplits,
-            this._getItems()
+            this._getItems(),
+            this.replacementDeviceIds
           )
         : undefined;
 
     // Only treat the value as "replaced" when there is an available
     // replacement device; otherwise fall back to normal "not found" behavior.
     const canReplace = !!replacement?.candidates.length;
-    const replacementName = canReplace
-      ? computeDeviceName(
-          this.hass.devices[
-            replacement!.primaryId &&
-            replacement!.candidates.includes(replacement!.primaryId)
-              ? replacement!.primaryId
-              : replacement!.candidates[0]
-          ]
-        )
-      : undefined;
 
     const valueRenderer = this._valueRenderer(
       this._configEntryLookup,
-      replacementName
+      canReplace
     );
 
     return html`
       <ha-generic-picker
+        .noUnknownState=${canReplace}
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .disabled=${this.disabled}
@@ -375,17 +444,14 @@ export class HaDevicePicker extends LitElement {
         .value=${this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
+        .searchFn=${this._searchFn}
+        no-sort
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${
-          replacement?.candidates.length
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_count",
-                { count: replacement.candidates.length }
-              )
-            : this.hass.localize("ui.components.device-picker.unknown")
-        }
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
@@ -399,30 +465,52 @@ export class HaDevicePicker extends LitElement {
   }) {
     const { candidates } = replacement;
 
-    const replacementName =
-      candidates.length === 1
-        ? computeDeviceName(this.hass.devices[candidates[0]])
-        : undefined;
+    // The split devices all inherit the composite's name, so the integration is
+    // what tells them apart.
+    const replacementDevice =
+      candidates.length === 1 ? this.hass.devices[candidates[0]] : undefined;
+    const replacementName = replacementDevice
+      ? computeDeviceName(replacementDevice)
+      : undefined;
+    const replacementDomain = replacementDevice?.primary_config_entry
+      ? this._configEntryLookup[replacementDevice.primary_config_entry]?.domain
+      : undefined;
 
     return html`
       <ha-alert alert-type="warning">
         ${
-          replacementName
+          replacementName && replacementDomain
             ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one",
-                { device: replacementName }
-              )
-            : this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_multiple",
-                { count: candidates.length }
+                "ui.components.device-picker.device_replaced_by_one_integration",
+                {
+                  device: replacementName,
+                  integration: domainToName(
+                    this.hass.localize,
+                    replacementDomain
+                  ),
+                }
               )
+            : replacementName
+              ? this.hass.localize(
+                  "ui.components.device-picker.device_replaced_by_one",
+                  { device: replacementName }
+                )
+              : this.hass.localize(
+                  "ui.components.device-picker.device_replaced_by_multiple",
+                  { count: candidates.length }
+                )
         }
         <ha-button
           slot="action"
           appearance="plain"
+          variant="warning"
           @click=${this._handleReplace}
         >
-          ${this.hass.localize("ui.components.device-picker.replace_device")}
+          ${
+            candidates.length === 1
+              ? this.hass.localize("ui.components.device-picker.replace_update")
+              : this.hass.localize("ui.components.device-picker.replace_choose")
+          }
         </ha-button>
       </ha-alert>
     `;
@@ -433,7 +521,8 @@ export class HaDevicePicker extends LitElement {
       this.value,
       this.hass.devices,
       this._compositeSplits,
-      this._getItems()
+      this._getItems(),
+      this.replacementDeviceIds
     );
     if (!replacement?.candidates.length) {
       return;

src/components/entity/ha-favorite-entity-list-item.ts

@@ -1,34 +1,57 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiDelete } from "@mdi/js";
+import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { computeEntityPickerDisplay } from "../../../common/entity/compute_entity_name_display";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/entity/state-badge";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-settings-row";
-import type { HomeAssistant } from "../../../types";
+import { customElement, property, state } from "lit/decorators";
+import { consumeEntityState } from "../../common/decorators/consume-context-entry";
+import { computeEntityPickerDisplay } from "../../common/entity/compute_entity_name_display";
+import { fireEvent } from "../../common/dom/fire_event";
+import "./state-badge";
+import "../ha-icon-button";
+import "../ha-settings-row";
+import {
+  internationalizationContext,
+  registriesContext,
+} from "../../data/context";
 
 declare global {
   interface HASSDomEvents {
     "delete-favorite-entity": { index: number };
   }
   interface HTMLElementTagNameMap {
-    "home-favorite-entity-list-item": HomeFavoriteEntityListItem;
+    "ha-favorite-entity-list-item": HaFavoriteEntityListItem;
   }
 }
 
-@customElement("home-favorite-entity-list-item")
-export class HomeFavoriteEntityListItem extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
+@customElement("ha-favorite-entity-list-item")
+export class HaFavoriteEntityListItem extends LitElement {
   @property({ attribute: "entity-id" }) public entityId!: string;
 
   @property({ type: Number }) public index = 0;
 
+  @state()
+  @consumeEntityState({ entityIdPath: ["entityId"] })
+  private _stateObj?: HassEntity;
+
+  @state()
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: ContextType<typeof registriesContext>;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
   protected render() {
-    const stateObj = this.hass.states[this.entityId];
+    const stateObj = this._stateObj;
     const { primary, secondary } = stateObj
-      ? computeEntityPickerDisplay(this.hass, stateObj)
+      ? computeEntityPickerDisplay(
+          {
+            ...this._registries,
+            language: this._i18n.language,
+            translationMetadata: this._i18n.translationMetadata,
+          },
+          stateObj
+        )
       : { primary: this.entityId, secondary: undefined };
 
     return html`
@@ -42,7 +65,7 @@ export class HomeFavoriteEntityListItem extends LitElement {
         }
         <ha-icon-button
           .path=${mdiDelete}
-          .label=${this.hass.localize("ui.common.delete")}
+          .label=${this._i18n.localize("ui.common.delete")}
           @click=${this._delete}
         ></ha-icon-button>
       </ha-settings-row>

src/components/entity/ha-favorites-editor.ts

@@ -2,24 +2,28 @@ import { mdiDragHorizontalVariant } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event";
-import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
-import "../../../components/entity/ha-entity-picker";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
-import "./home-favorite-entity-list-item";
-
-@customElement("home-favorites-editor")
-export class HomeFavoritesEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
+import type { HaEntityPicker } from "./ha-entity-picker";
+import "./ha-entity-picker";
+import "../ha-sortable";
+import "../ha-svg-icon";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
+import type { ValueChangedEvent } from "../../types";
+import "./ha-favorite-entity-list-item";
 
+@customElement("ha-favorites-editor")
+export class HaFavoritesEditor extends LitElement {
   @property({ attribute: false }) public favorites: string[] = [];
 
   @property() public label?: string;
 
   @property() public helper?: string;
 
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
+
   protected render() {
     return html`
       ${this.label ? html`<p class="field-label">${this.label}</p>` : nothing}
@@ -27,22 +31,21 @@ export class HomeFavoritesEditor extends LitElement {
         this.helper ? html`<p class="field-helper">${this.helper}</p>` : nothing
       }
       <ha-sortable handle-selector=".handle" @item-moved=${this._moved}>
-        <div class="home-list">
+        <div class="favorites-list">
           ${repeat(
             this.favorites,
             (entityId) => entityId,
             (entityId, index) => html`
-              <div class="home-list-item favorite-row">
+              <div class="favorite-row">
                 <div class="handle">
                   <ha-svg-icon .path=${mdiDragHorizontalVariant}></ha-svg-icon>
                 </div>
-                <home-favorite-entity-list-item
+                <ha-favorite-entity-list-item
                   class="favorite-content"
-                  .hass=${this.hass}
                   .entityId=${entityId}
                   .index=${index}
                   @delete-favorite-entity=${this._remove}
-                ></home-favorite-entity-list-item>
+                ></ha-favorite-entity-list-item>
               </div>
             `
           )}
@@ -50,10 +53,9 @@ export class HomeFavoritesEditor extends LitElement {
       </ha-sortable>
       <ha-entity-picker
         add-button
-        .addButtonLabel=${this.hass.localize(
-          "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
-        )}
+        .addButtonLabel=${this.addButtonLabel}
         .excludeEntities=${this.favorites}
+        .entityFilter=${this.entityFilter}
         @value-changed=${this._add}
       ></ha-entity-picker>
     `;
@@ -102,7 +104,7 @@ export class HomeFavoritesEditor extends LitElement {
       color: var(--secondary-text-color);
       font-size: 12px;
     }
-    .home-list {
+    .favorites-list {
       display: flex;
       flex-direction: column;
     }
@@ -131,6 +133,6 @@ export class HomeFavoritesEditor extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-favorites-editor": HomeFavoritesEditor;
+    "ha-favorites-editor": HaFavoritesEditor;
   }
 }

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

@@ -16,10 +16,10 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
 import {
-  getStatisticIds,
   getStatisticLabel,
   type StatisticsMetaData,
 } from "../../data/recorder";
+import { getStatisticIds } from "../../data/recorder_statistic_ids";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box-item";

src/components/ha-action-result.ts

@@ -0,0 +1,141 @@
+import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import "./ha-spinner";
+import "./ha-svg-icon";
+
+type ActionResult = "success" | "error";
+
+// Keep in sync with ha-progress-button
+const RESULT_DURATION = 2000;
+
+// Long enough that fast actions go straight to their result without a flash
+const SPINNER_DELAY = 150;
+
+/**
+ * Home Assistant action result component
+ *
+ * @element ha-action-result
+ *
+ * @summary
+ * Wraps the content of an action trigger, for example an `ha-control-button`,
+ * and swaps it for a spinner while a slow action runs and for a success or
+ * error icon once it settles.
+ *
+ * @slot - Content of the trigger.
+ */
+@customElement("ha-action-result")
+export class HaActionResult extends LitElement {
+  @state() private _loading = false;
+
+  @state() private _showSpinner = false;
+
+  @state() private _result?: ActionResult;
+
+  private _timeout?: number;
+
+  private _spinnerTimeout?: number;
+
+  public get busy(): boolean {
+    return this._loading;
+  }
+
+  public async run(action: Promise<unknown>): Promise<void> {
+    clearTimeout(this._timeout);
+    clearTimeout(this._spinnerTimeout);
+    this._result = undefined;
+    this._loading = true;
+    this._spinnerTimeout = window.setTimeout(() => {
+      this._showSpinner = true;
+    }, SPINNER_DELAY);
+    try {
+      await action;
+      this._result = "success";
+    } catch (_err) {
+      this._result = "error";
+    } finally {
+      clearTimeout(this._spinnerTimeout);
+      this._loading = false;
+      this._showSpinner = false;
+      this._timeout = window.setTimeout(() => {
+        this._result = undefined;
+      }, RESULT_DURATION);
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    clearTimeout(this._timeout);
+    clearTimeout(this._spinnerTimeout);
+    this._showSpinner = false;
+    this._result = undefined;
+  }
+
+  protected render() {
+    const busy = this._showSpinner || this._result !== undefined;
+
+    return html`
+      <span class="content ${busy ? "hidden" : ""}"><slot></slot></span>
+      ${
+        busy
+          ? html`<div class="indicator">${this._renderIndicator()}</div>`
+          : nothing
+      }
+    `;
+  }
+
+  private _renderIndicator() {
+    if (!this._result) {
+      return html`<ha-spinner></ha-spinner>`;
+    }
+    return html`
+      <ha-svg-icon
+        class=${this._result}
+        .path=${this._result === "success" ? mdiCheckBold : mdiAlertOctagram}
+      ></ha-svg-icon>
+    `;
+  }
+
+  static styles = css`
+    /* Prefer no box so the host inherits the layout of the slot it sits in.
+       A ::slotted() rule in the host component can still override this. */
+    :host {
+      display: contents;
+    }
+    .content {
+      transition: opacity var(--ha-animation-duration-instant) ease-in-out;
+    }
+    .content.hidden {
+      opacity: 0;
+    }
+    .indicator {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: fade-in var(--ha-animation-duration-instant) ease-in-out;
+    }
+    ha-spinner {
+      --ha-spinner-size: var(--mdc-icon-size, 24px);
+      --track-width: 2px;
+    }
+    /* Overshoot so the icon lands with a small pop */
+    ha-svg-icon {
+      animation: scale var(--ha-animation-duration-fast)
+        cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    ha-svg-icon.success {
+      color: var(--ha-color-on-success-quiet);
+    }
+    ha-svg-icon.error {
+      color: var(--ha-color-on-danger-quiet);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-action-result": HaActionResult;
+  }
+}

src/components/ha-alert.ts

@@ -90,7 +90,7 @@ class HaAlert extends LitElement {
   static styles = css`
     .issue-type {
       position: relative;
-      padding: 8px;
+      padding: var(--ha-alert-padding, 8px);
       display: flex;
     }
     .icon {

src/components/ha-assist-chat.ts

@@ -12,6 +12,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { transform } from "../common/decorators/transform";
 import { supportsFeature } from "../common/entity/supports-feature";
 import type { LocalizeFunc } from "../common/translations/localize";
 import {
@@ -24,6 +25,7 @@ import {
 import {
   configContext,
   connectionContext,
+  internationalizationContext,
   statesContext,
 } from "../data/context";
 import { ConversationEntityFeature } from "../data/conversation";
@@ -33,8 +35,13 @@ import type {
   HomeAssistant,
   HomeAssistantConfig,
   HomeAssistantConnection,
+  HomeAssistantInternationalization,
 } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
+import {
+  findAvailableLanguage,
+  getTranslation,
+} from "../util/common-translation";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
 import "./ha-markdown";
@@ -67,6 +74,17 @@ export const assistPipelineChanged = (
   current: AssistPipeline | undefined
 ): boolean => previous?.id !== current?.id;
 
+export const greetingTranslationLanguage = (
+  pipelineLanguage: string | undefined,
+  interfaceLanguage: string | undefined
+): string | undefined => {
+  if (!pipelineLanguage || pipelineLanguage === interfaceLanguage) {
+    return undefined;
+  }
+  const language = findAvailableLanguage(pipelineLanguage);
+  return language && language !== interfaceLanguage ? language : undefined;
+};
+
 @customElement("ha-assist-chat")
 export class HaAssistChat extends LitElement {
   @property({ attribute: false }) public pipeline?: AssistPipeline;
@@ -101,6 +119,13 @@ export class HaAssistChat extends LitElement {
   @consumeLocalize()
   private _localize!: LocalizeFunc;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, string>({
+    transformer: ({ language }) => language,
+  })
+  private _language!: string;
+
   @state()
   @consume({ context: statesContext, subscribe: true })
   private _states!: HomeAssistant["states"];
@@ -115,6 +140,8 @@ export class HaAssistChat extends LitElement {
 
   private _conversationId: string | null = null;
 
+  private _greetingLoadToken = 0;
+
   private _initialPromptSubmitted = false;
 
   private _audioRecorder?: AudioRecorder;
@@ -131,17 +158,44 @@ export class HaAssistChat extends LitElement {
       (changedProperties.has("pipeline") &&
         assistPipelineChanged(changedProperties.get("pipeline"), this.pipeline))
     ) {
-      this._conversation = [
-        {
-          who: "hass",
-          text: this._localize("ui.dialogs.voice_command.how_can_i_help"),
-          thinking: "",
-          tool_calls: {},
-        },
-      ];
+      this._conversation = [];
+      this._loadGreeting();
     }
   }
 
+  private async _loadGreeting(): Promise<void> {
+    const token = ++this._greetingLoadToken;
+    const language = greetingTranslationLanguage(
+      this.pipeline?.language,
+      this._language
+    );
+    let greeting: string | undefined;
+    if (language) {
+      try {
+        const result = await getTranslation(null, language, false);
+        if (result.language === language) {
+          greeting = result.data["ui.dialogs.voice_command.how_can_i_help"];
+        }
+      } catch (_err) {
+        // Translation failed to load; fall back to the interface language.
+      }
+    }
+    if (token !== this._greetingLoadToken) {
+      // The pipeline changed while loading; a newer load owns the greeting.
+      return;
+    }
+    this._conversation = [
+      {
+        who: "hass",
+        text:
+          greeting || this._localize("ui.dialogs.voice_command.how_can_i_help"),
+        thinking: "",
+        tool_calls: {},
+      },
+      ...this._conversation,
+    ];
+  }
+
   protected firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     if (
@@ -157,7 +211,7 @@ export class HaAssistChat extends LitElement {
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
-    if (changedProps.has("_conversation")) {
+    if (changedProps.has("_conversation") && this._conversation.length) {
       this._scrollMessagesBottom();
     }
     if (

src/components/ha-attributes.ts

@@ -1,161 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
-import {
-  STATE_ATTRIBUTES,
-  STATE_ATTRIBUTES_DOMAIN_CLASS,
-} from "../data/entity/entity_attributes";
-import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
-import "./ha-attribute-value";
-import "./ha-expansion-panel";
-
-@customElement("ha-attributes")
-class HaAttributes extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj?: HassEntity;
-
-  @property({ attribute: "extra-filters" }) public extraFilters?: string;
-
-  @state() private _expanded = false;
-
-  private get _filteredAttributes() {
-    return this._computeDisplayAttributes(
-      STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : [],
-        (this.stateObj &&
-          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
-            this.stateObj.attributes?.device_class
-          ]) ||
-          []
-      )
-    );
-  }
-
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (
-      changedProperties.has("extraFilters") ||
-      changedProperties.has("stateObj")
-    ) {
-      this.toggleAttribute("empty", this._filteredAttributes.length === 0);
-    }
-  }
-
-  protected render() {
-    if (!this.stateObj) {
-      return nothing;
-    }
-
-    const attributes = this._filteredAttributes;
-
-    if (attributes.length === 0) {
-      return nothing;
-    }
-
-    return html`
-      <ha-expansion-panel
-        .header=${this.hass.localize(
-          "ui.components.attributes.expansion_header"
-        )}
-        outlined
-        @expanded-will-change=${this._expandedChanged}
-      >
-        <div class="attribute-container">
-          ${
-            this._expanded
-              ? html`
-                  ${attributes.map(
-                    (attribute) => html`
-                      <div class="data-entry">
-                        <div class="key">
-                          ${computeAttributeNameDisplay(
-                            this.hass.localize,
-                            this.stateObj!,
-                            this.hass.entities,
-                            attribute
-                          )}
-                        </div>
-                        <div class="value">
-                          <ha-attribute-value
-                            .attribute=${attribute}
-                            .stateObj=${this.stateObj}
-                          ></ha-attribute-value>
-                        </div>
-                      </div>
-                    `
-                  )}
-                `
-              : ""
-          }
-        </div>
-      </ha-expansion-panel>
-      ${
-        this.stateObj.attributes.attribution
-          ? html`
-              <div class="attribution">
-                ${this.stateObj.attributes.attribution}
-              </div>
-            `
-          : ""
-      }
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .attribute-container {
-          margin-bottom: 8px;
-          direction: ltr;
-        }
-        .data-entry {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-        .data-entry .value {
-          max-width: 60%;
-          overflow-wrap: break-word;
-          text-align: right;
-        }
-        .key {
-          flex-grow: 1;
-        }
-        .attribution {
-          color: var(--secondary-text-color);
-          text-align: center;
-          margin-top: 16px;
-        }
-        hr {
-          border-color: var(--divider-color);
-          border-bottom: none;
-          margin: 16px 0;
-        }
-      `,
-    ];
-  }
-
-  private _computeDisplayAttributes(filtersArray: string[]): string[] {
-    if (!this.stateObj) {
-      return [];
-    }
-    return Object.keys(this.stateObj.attributes).filter(
-      (key) => filtersArray.indexOf(key) === -1
-    );
-  }
-
-  private _expandedChanged(ev) {
-    this._expanded = ev.detail.expanded;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-attributes": HaAttributes;
-  }
-}

src/components/ha-button-toggle-group.ts

@@ -34,6 +34,8 @@ export class HaButtonToggleGroup extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "full-width" })
   public fullWidth = false;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @property() public variant:
     "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
@@ -57,6 +59,7 @@ export class HaButtonToggleGroup extends LitElement {
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
+              .disabled=${this.disabled}
               .appearance=${this.active === button.value ? "accent" : "filled"}
             >
               ${

src/components/ha-button.ts

@@ -29,7 +29,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  *
  * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
- * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
+ * @attr {("accent"|"filled"|"outlined"|"plain")} appearance - Sets the button appearance.
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
  * @attr {boolean} disabled - Disables the button and prevents user interaction.
  */
@@ -199,6 +199,7 @@ export class HaButton extends Button {
         :host([appearance~="outlined"]) .button.disabled {
           background-color: transparent;
           color: var(--ha-color-on-disabled-quiet);
+          border-color: var(--ha-color-on-disabled-quiet);
         }
 
         @media (hover: hover) {

src/components/ha-code-editor.ts

@@ -33,6 +33,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
 import { computeDeviceName } from "../common/entity/compute_device_name";
+import { computeEntityName } from "../common/entity/compute_entity_name";
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
@@ -752,6 +753,19 @@ export class HaCodeEditor extends ReactiveElement {
       this._states![key]
     );
 
+    const entityName = computeEntityName(
+      this._states![key],
+      this._registries!.entities,
+      this._registries!.devices
+    );
+    const deviceName = context.device
+      ? computeDeviceName(context.device)
+      : undefined;
+    const areaName = context.area ? computeAreaName(context.area) : undefined;
+    const floorName = context.floor
+      ? computeFloorName(context.floor)
+      : undefined;
+
     const completionItems: CompletionItem[] = [
       {
         label: this._i18n!.localize(
@@ -759,31 +773,39 @@ export class HaCodeEditor extends ReactiveElement {
         ),
         value: formattedState,
         subValue:
-          // If the state exactly matches the formatted state, don't show the raw state
           this._states![key].state === formattedState
             ? undefined
             : this._states![key].state,
       },
     ];
 
-    if (context.device && context.device.name) {
+    if (entityName) {
+      completionItems.push({
+        label: this._i18n!.localize(
+          "ui.components.entity.entity-picker.entity"
+        ),
+        value: entityName,
+      });
+    }
+
+    if (deviceName) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.device-picker.device"),
-        value: context.device.name,
+        value: deviceName,
       });
     }
 
-    if (context.area && context.area.name) {
+    if (areaName) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.area-picker.area"),
-        value: context.area.name,
+        value: areaName,
       });
     }
 
-    if (context.floor && context.floor.name) {
+    if (floorName) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.floor-picker.floor"),
-        value: context.floor.name,
+        value: floorName,
       });
     }
 

src/components/ha-control-select.ts

@@ -101,7 +101,7 @@ export class HaControlSelect extends LitElement {
 
   private _handleOptionClick(ev: MouseEvent) {
     if (this.disabled) return;
-    const value = (ev.target as any).value;
+    const value = (ev.currentTarget as any).value;
     this.value = value;
     fireEvent(this, "value-changed", { value });
   }
@@ -109,7 +109,7 @@ export class HaControlSelect extends LitElement {
   private _handleOptionMouseDown(ev: MouseEvent) {
     if (this.disabled) return;
     ev.preventDefault();
-    const value = (ev.target as any).value;
+    const value = (ev.currentTarget as any).value;
     this._activeIndex = this.options?.findIndex(
       (option) => option.value === value
     );
@@ -121,7 +121,7 @@ export class HaControlSelect extends LitElement {
 
   private _handleOptionFocus(ev: FocusEvent) {
     if (this.disabled) return;
-    const value = (ev.target as any).value;
+    const value = (ev.currentTarget as any).value;
     this._activeIndex = this.options?.findIndex(
       (option) => option.value === value
     );
@@ -143,7 +143,8 @@ export class HaControlSelect extends LitElement {
             ? repeat(
                 this.options,
                 (option) => option.value,
-                (option) => this._renderOption(option)
+                (option, index) =>
+                  this._renderOption(option, index === this._tabbableIndex)
               )
             : nothing
         }
@@ -151,7 +152,14 @@ export class HaControlSelect extends LitElement {
     `;
   }
 
-  private _renderOption(option: ControlSelectOption) {
+  /* a radio group with no selection puts its first option in the tab sequence */
+  private get _tabbableIndex() {
+    const selectedIndex =
+      this.options?.findIndex((option) => option.value === this.value) ?? -1;
+    return selectedIndex === -1 ? 0 : selectedIndex;
+  }
+
+  private _renderOption(option: ControlSelectOption, tabbable: boolean) {
     const isSelected = this.value === option.value;
 
     return html`
@@ -162,7 +170,7 @@ export class HaControlSelect extends LitElement {
           selected: isSelected,
         })}
         role="radio"
-        tabindex=${isSelected ? "0" : "-1"}
+        tabindex=${tabbable ? "0" : "-1"}
         .value=${option.value}
         aria-checked=${isSelected ? "true" : "false"}
         aria-label=${ifDefined(option.ariaLabel ?? option.label)}

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

@@ -0,0 +1,216 @@
+import { consume } from "@lit/context";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+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 { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext } from "../data/context";
+import { DOMAIN_DEVICE_CLASSES } from "../data/device_classes";
+import { computeDeviceClassName } from "../data/entity/device_class";
+import type {
+  HomeAssistantInternationalization,
+  ValueChangedEvent,
+} from "../types";
+import "./chips/ha-chip-set";
+import "./chips/ha-input-chip";
+import "./ha-generic-picker";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+
+export const getDeviceClassOptions = (
+  domain: string,
+  localize: LocalizeFunc
+): PickerComboBoxItem[] =>
+  (DOMAIN_DEVICE_CLASSES[domain] ?? []).map((deviceClass) => {
+    const primary = computeDeviceClassName(localize, domain, deviceClass);
+    return { id: deviceClass, primary, sorting_label: primary };
+  });
+
+@customElement("ha-device-class-picker")
+export class HaDeviceClassPicker extends LitElement {
+  @property() public domain?: string;
+
+  @property({ attribute: false }) public value?: string | string[];
+
+  @property({ type: Boolean }) public multiple = false;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: HomeAssistantInternationalization;
+
+  private _loadedDomain?: string;
+
+  protected willUpdate() {
+    if (!this.domain || !this._i18n || this._loadedDomain === this.domain) {
+      return;
+    }
+    this._loadedDomain = this.domain;
+    this._i18n.loadBackendTranslation("entity_component", this.domain);
+  }
+
+  private get _value(): string[] {
+    return this.value ? ensureArray(this.value) : [];
+  }
+
+  private _deviceClassName(deviceClass: string): string {
+    return this._i18n && this.domain
+      ? computeDeviceClassName(this._i18n.localize, this.domain, deviceClass)
+      : deviceClass;
+  }
+
+  private _options = memoizeOne(
+    (
+      domain: string | undefined,
+      localize: LocalizeFunc | undefined
+    ): PickerComboBoxItem[] =>
+      domain && localize ? getDeviceClassOptions(domain, localize) : []
+  );
+
+  private _availableOptions = memoizeOne(
+    (options: PickerComboBoxItem[], selected: string[]) =>
+      options.filter((option) => !selected.includes(option.id))
+  );
+
+  private _getItems = () => {
+    const options = this._options(this.domain, this._i18n?.localize);
+    return this.multiple
+      ? this._availableOptions(options, this._value)
+      : options;
+  };
+
+  private _valueRenderer = (value: string) =>
+    html`<span slot="headline">${this._deviceClassName(value)}</span>`;
+
+  private _notFoundLabel = (search: string) => {
+    const term = html`<b>'${search}'</b>`;
+    return this._i18n
+      ? this._i18n.localize("ui.components.device-class-picker.no_match", {
+          term,
+        })
+      : html`No device classes found for ${term}`;
+  };
+
+  protected render() {
+    const localize = this._i18n?.localize;
+    const emptyLabel = localize?.(
+      "ui.components.device-class-picker.no_device_classes"
+    );
+
+    if (this.multiple) {
+      const value = this._value;
+      return html`
+        ${
+          value.length
+            ? html`
+                <ha-chip-set>
+                  ${repeat(
+                    value,
+                    (deviceClass) => deviceClass,
+                    (deviceClass) => {
+                      const label = this._deviceClassName(deviceClass);
+                      return html`
+                        <ha-input-chip
+                          .item=${deviceClass}
+                          .label=${label}
+                          .disabled=${this.disabled}
+                          @remove=${this._removeItem}
+                          selected
+                        >
+                          ${label}
+                        </ha-input-chip>
+                      `;
+                    }
+                  )}
+                </ha-chip-set>
+              `
+            : nothing
+        }
+        <ha-generic-picker
+          .helper=${this.helper}
+          .disabled=${this.disabled}
+          .required=${this.required && !value.length}
+          .value=${""}
+          .addButtonLabel=${
+            this.label ?? localize?.("ui.components.device-class-picker.add")
+          }
+          .getItems=${this._getItems}
+          .notFoundLabel=${this._notFoundLabel}
+          .emptyLabel=${emptyLabel}
+          @value-changed=${this._itemAdded}
+        ></ha-generic-picker>
+      `;
+    }
+
+    return html`
+      <ha-generic-picker
+        .label=${
+          this.label ??
+          localize?.("ui.components.device-class-picker.device_class")
+        }
+        .value=${this.value as string | undefined}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .getItems=${this._getItems}
+        .valueRenderer=${this._valueRenderer}
+        .notFoundLabel=${this._notFoundLabel}
+        .emptyLabel=${emptyLabel}
+        @value-changed=${this._valueChanged}
+      ></ha-generic-picker>
+    `;
+  }
+
+  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", { value: ev.detail.value || undefined });
+  }
+
+  private _itemAdded(ev: ValueChangedEvent<string | undefined>) {
+    ev.stopPropagation();
+    const deviceClass = ev.detail.value;
+    if (!deviceClass || this._value.includes(deviceClass)) {
+      return;
+    }
+    this._setValue([...this._value, deviceClass]);
+  }
+
+  private _removeItem(ev: Event) {
+    ev.stopPropagation();
+    const deviceClass = (ev.currentTarget as HTMLElement & { item: string })
+      .item;
+    this._setValue(this._value.filter((item) => item !== deviceClass));
+  }
+
+  private _setValue(value: string[]) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+    ha-generic-picker {
+      display: block;
+      width: 100%;
+    }
+    ha-chip-set {
+      padding: 8px 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-class-picker": HaDeviceClassPicker;
+  }
+}

src/components/ha-duration-input.ts

@@ -68,6 +68,7 @@ export class HaDurationInput extends LitElement {
                     { label: "-", iconPath: mdiMinusThick, value: "-" },
                   ]}
                   .active=${this._negative ? "-" : "+"}
+                  .disabled=${this.disabled}
                   @value-changed=${this._negativeChanged}
                 ></ha-button-toggle-group>
               `
@@ -235,8 +236,8 @@ export class HaDurationInput extends LitElement {
     ev.stopPropagation();
     const negative = (ev.detail?.value || ev.target.value) === "-";
     this._toggleNegative = negative;
-    const value = this.data;
-    if (value) {
+    if (this.data) {
+      const value = { ...this.data };
       FIELDS.forEach((t) => {
         if (value[t]) {
           value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);

src/components/ha-empty-state.ts

@@ -0,0 +1,79 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./ha-svg-icon";
+
+/**
+ * Centered placeholder for a surface that has nothing to show, with an icon, a
+ * heading, an optional description and optional actions.
+ *
+ * @slot - Actions that help the user fill the surface, e.g. a button.
+ */
+@customElement("ha-empty-state")
+export class HaEmptyState extends LitElement {
+  /** SVG path of the icon shown above the heading. */
+  @property() public icon?: string;
+
+  @property() public heading?: string;
+
+  @property() public description?: string;
+
+  protected render() {
+    return html`
+      <div class="content">
+        ${
+          this.icon
+            ? html`<ha-svg-icon .path=${this.icon}></ha-svg-icon>`
+            : nothing
+        }
+        ${this.heading ? html`<h2>${this.heading}</h2>` : nothing}
+        ${this.description ? html`<p>${this.description}</p>` : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--ha-space-4);
+      box-sizing: border-box;
+      max-width: 500px;
+      padding: var(--ha-space-8) var(--ha-space-4);
+      text-align: center;
+    }
+
+    ha-svg-icon {
+      --mdc-icon-size: var(--ha-empty-state-icon-size, 64px);
+      color: var(--secondary-text-color);
+    }
+
+    h2 {
+      margin: 0;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-condensed);
+    }
+
+    p {
+      margin: 0;
+      color: var(--secondary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-empty-state": HaEmptyState;
+  }
+}

src/components/ha-filter-blueprints.ts

@@ -2,7 +2,12 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,11 +39,11 @@ export class HaFilterBlueprints extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _blueprints?: Blueprints;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
@@ -56,7 +61,6 @@ export class HaFilterBlueprints extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -71,29 +75,38 @@ export class HaFilterBlueprints extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._blueprints && this._shouldRender
-            ? html`
-                <ha-list
-                  @selected=${this._blueprintsSelected}
-                  multi
-                  class="ha-scrollbar"
-                >
-                  ${Object.entries(this._blueprints).map(([id, blueprint]) =>
-                    "error" in blueprint
-                      ? nothing
-                      : html`<ha-check-list-item
-                          .value=${id}
-                          .selected=${(this.value || []).includes(id)}
-                        >
-                          ${blueprint.metadata.name || id}
-                        </ha-check-list-item>`
-                  )}
-                </ha-list>
-              `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
+                ${
+                  this._blueprints
+                    ? html`
+                        <ha-list
+                          @selected=${this._blueprintsSelected}
+                          multi
+                          class="ha-scrollbar"
+                        >
+                          ${Object.entries(this._blueprints).map(
+                            ([id, blueprint]) =>
+                              "error" in blueprint
+                                ? nothing
+                                : html`<ha-check-list-item
+                                    .value=${id}
+                                    .selected=${(this.value || []).includes(id)}
+                                  >
+                                    ${blueprint.metadata.name || id}
+                                  </ha-check-list-item>`
+                          )}
+                        </ha-list>
+                      `
+                    : nothing
+                }
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
@@ -104,19 +117,6 @@ export class HaFilterBlueprints extends LitElement {
     this._blueprints = await fetchBlueprints(this.hass, this.type);
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (this.narrow || !this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -191,17 +191,11 @@ export class HaFilterBlueprints extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-categories.ts

@@ -8,9 +8,14 @@ import {
   mdiTag,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
@@ -47,9 +52,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
 
   @state() private _categories: CategoryRegistryEntry[] = [];
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected hassSubscribeRequiredHostProps = ["scope"];
 
@@ -70,7 +75,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -85,9 +89,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list
                   @selected=${this._categorySelected}
                   class="ha-scrollbar"
@@ -158,34 +164,17 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                       </ha-list-item>`
                   )}
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
-      ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._addCategory}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
-              ${this.hass.localize("ui.panel.config.category.editor.add")}
-            </ha-list-item>`
+                <ha-list-item graphic="icon" @click=${this._addCategory}>
+                  <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
+                  ${this.hass.localize("ui.panel.config.category.editor.add")}
+                </ha-list-item>
+              </div>
+            `
           : nothing
       }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48)}px`;
-      }, 300);
-    }
-  }
-
   private _handleAction(ev: HaDropdownSelectEvent) {
     const categoryId = (ev.currentTarget as any).categoryId;
     const action = ev.detail.item.value;
@@ -244,10 +233,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -287,19 +272,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-          position: relative;
-        }
-        :host([expanded]) {
-          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
-        }
         .header {
           display: flex;
           align-items: center;
@@ -325,6 +299,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           color: var(--text-primary-color);
         }
         ha-list {
+          flex: 1;
+          min-height: 0;
           --mdc-list-item-meta-size: auto;
           --mdc-list-side-padding-right: var(--ha-space-1);
           --mdc-list-side-padding-left: var(--ha-space-4);
@@ -339,12 +315,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         .warning {
           color: var(--error-color);
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
       `,
     ];
   }

src/components/ha-filter-devices.ts

@@ -3,7 +3,12 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
@@ -59,13 +64,15 @@ export class HaFilterDevices extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
   @query("ha-list-selectable-virtualized")
   private _listElement?: HaListSelectableVirtualized;
 
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -77,26 +84,11 @@ export class HaFilterDevices extends LitElement {
     }
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded || !this._listElement) {
-          return;
-        }
-        this._listElement.style.height = `${this.clientHeight - 49 - 4 - 38}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 38px - height of the search input
-      }, 300);
-    }
-  }
-
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -112,31 +104,33 @@ export class HaFilterDevices extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                  @keydown=${this._handleSearchKeydown}
-                >
-                </ha-input-search>
-                <ha-list-selectable-virtualized
-                  multi
-                  .rows=${this._devices(
-                    this._devicesReg,
-                    this._filter || "",
-                    this._localize,
-                    this._states,
-                    this._i18n.locale.language
-                  )}
-                  .rowRenderer=${this._renderItem}
-                  @ha-list-item-selected=${this._handleAdded}
-                  @ha-list-item-deselected=${this._handleRemoved}
-                ></ha-list-selectable-virtualized>`
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+                @keydown=${this._handleSearchKeydown}
+              >
+              </ha-input-search>
+              <ha-list-selectable-virtualized
+                multi
+                .rows=${this._devices(
+                  this._devicesReg,
+                  this._filter || "",
+                  this._localize,
+                  this._states,
+                  this._i18n.locale.language
+                )}
+                .rowRenderer=${this._renderItem}
+                @ha-list-item-selected=${this._handleAdded}
+                @ha-list-item-deselected=${this._handleRemoved}
+              ></ha-list-selectable-virtualized>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -177,10 +171,6 @@ export class HaFilterDevices extends LitElement {
     this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -271,58 +261,43 @@ export class HaFilterDevices extends LitElement {
     this._listElement?.clearSelection();
   }
 
-  static styles = css`
-    :host {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    :host([expanded]) {
-      flex: 1;
-      height: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    ha-expansion-panel {
-      --ha-card-border-radius: var(--ha-border-radius-square);
-      --expansion-panel-content-padding: 0;
-    }
-    :host([expanded]) ha-expansion-panel {
-      flex: 1;
-      min-height: 0;
-    }
-    ha-list-selectable-virtualized {
-      flex: 1;
-      min-height: 0;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-    }
-    .header ha-icon-button {
-      margin-inline-start: auto;
-      margin-inline-end: 8px;
-    }
-    .badge {
-      display: inline-block;
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: 0;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0px 2px;
-      color: var(--text-primary-color);
-    }
-    ha-input-search {
-      display: block;
-      padding: var(--ha-space-1) var(--ha-space-2) 0;
-    }
-  `;
+  static styles = [
+    filterPanelStyles,
+    css`
+      ha-list-selectable-virtualized {
+        flex: 1;
+        min-height: 0;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+      }
+      .header ha-icon-button {
+        margin-inline-start: auto;
+        margin-inline-end: 8px;
+      }
+      .badge {
+        display: inline-block;
+        margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: 0;
+        min-width: 16px;
+        box-sizing: border-box;
+        border-radius: var(--ha-border-radius-circle);
+        font-size: var(--ha-font-size-xs);
+        font-weight: var(--ha-font-weight-normal);
+        background-color: var(--primary-color);
+        line-height: var(--ha-line-height-normal);
+        text-align: center;
+        padding: 0px 2px;
+        color: var(--text-primary-color);
+      }
+      ha-input-search {
+        display: block;
+        padding: var(--ha-space-1) var(--ha-space-2) 0;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-filter-domains.ts

@@ -1,11 +1,16 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -41,18 +46,17 @@ export class HaFilterDomains extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -67,46 +71,48 @@ export class HaFilterDomains extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._handleItemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._domains(
-                      this._states,
-                      this._localize,
-                      this._i18n.locale.language,
-                      this._filter,
-                      this.value
-                    ),
-                    (i) => i,
-                    (domain) =>
-                      html`<ha-check-list-item
-                        .value=${domain}
-                        .selected=${(this.value || []).includes(domain)}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${domainToName(this._localize, domain)}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+              >
+              </ha-input-search>
+              <ha-list
+                class="ha-scrollbar"
+                @selected=${this._handleItemSelected}
+                multi
+              >
+                ${repeat(
+                  this._domains(
+                    this._states,
+                    this._localize,
+                    this._i18n.locale.language,
+                    this._filter,
+                    this.value
+                  ),
+                  (i) => i,
+                  (domain) =>
+                    html`<ha-check-list-item
+                      .value=${domain}
+                      .selected=${(this.value || []).includes(domain)}
+                      graphic="icon"
+                    >
+                      <ha-domain-icon
+                        slot="graphic"
+                        .domain=${domain}
+                        brand-fallback
+                      ></ha-domain-icon>
+                      ${domainToName(this._localize, domain)}
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -139,22 +145,6 @@ export class HaFilterDomains extends LitElement {
     }
   );
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -199,24 +189,18 @@ export class HaFilterDomains extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;
           align-items: center;
         }
         .header ha-icon-button {
-          margin-inline-start: initial;
+          margin-inline-start: auto;
           margin-inline-end: 8px;
         }
         ha-check-list-item {

src/components/ha-filter-entities.ts

@@ -2,8 +2,13 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -52,11 +57,11 @@ export class HaFilterEntities extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
@@ -78,7 +83,6 @@ export class HaFilterEntities extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -93,9 +97,11 @@ export class HaFilterEntities extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-input-search
                   appearance="outlined"
                   .value=${this._filter}
@@ -118,25 +124,13 @@ export class HaFilterEntities extends LitElement {
                   >
                   </lit-virtualizer>
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
   private _keyFunction = (entity) => entity?.entity_id;
 
   private _renderItem = (entity) =>
@@ -173,10 +167,6 @@ export class HaFilterEntities extends LitElement {
     listItem.selected = this.value?.includes(value);
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -255,17 +245,11 @@ export class HaFilterEntities extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-entity-types.ts

@@ -0,0 +1,519 @@
+import { consume, type ContextType } from "@lit/context";
+import {
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiFilterVariantRemove,
+  mdiShape,
+} from "@mdi/js";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { createRef, ref } from "lit/directives/ref";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { computeRTL } from "../common/util/compute_rtl";
+import { fireEvent } from "../common/dom/fire_event";
+import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, statesContext } from "../data/context";
+import {
+  computeDeviceClassName,
+  NO_DEVICE_CLASS,
+} from "../data/entity/device_class";
+import {
+  entityTypeKey,
+  parseEntityType,
+  usedEntityTypes,
+} from "../data/entity/entity_type";
+import { domainToName } from "../data/integration";
+import "./ha-domain-icon";
+import "./ha-expansion-panel";
+import "./ha-icon-button";
+import "./ha-svg-icon";
+import "./ha-tree-indicator";
+import "./input/ha-input-search";
+import type { HaInputSearch } from "./input/ha-input-search";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";
+
+// Core picks this one from the battery level, so it has no usable default.
+const FIXED_TYPE_ICONS: Record<string, string> = {
+  "sensor/battery": "mdi:battery",
+};
+
+interface TypeRow {
+  key: string;
+  domain: string;
+  deviceClass?: string;
+  name: string;
+  deviceClasses?: string[];
+  expanded?: boolean;
+  last?: boolean;
+}
+
+@customElement("ha-filter-entity-types")
+export class HaFilterEntityTypes extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @property({ attribute: false }) public value?: string[];
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _filter?: string;
+
+  @state() private _expandedDomains = new Set<string>();
+
+  @query("ha-list-selectable") private _list?: HaListSelectable;
+
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
+  private _badgeTypes?: Map<string, string[]>;
+
+  protected render() {
+    const count = this.value?.length
+      ? this._count(this.value, this._badgeTypes!)
+      : 0;
+
+    return html`
+      <ha-expansion-panel
+        left-chevron
+        .expanded=${this.expanded}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this._localize("ui.components.filter-entity-types.caption")}
+          ${
+            count
+              ? html`<div class="badge">${count}</div>
+                  <ha-icon-button
+                    .path=${mdiFilterVariantRemove}
+                    @click=${this._clearFilter}
+                  ></ha-icon-button>`
+              : nothing
+          }
+        </div>
+      </ha-expansion-panel>
+      ${this._panel.showContent ? this._renderContent() : nothing}
+    `;
+  }
+
+  private _renderContent() {
+    const rows = this._rows(
+      this._states,
+      this._localize,
+      this._i18n.locale.language,
+      this._filter,
+      this._expandedDomains
+    );
+    const rtl = computeRTL(
+      this._i18n.language,
+      this._i18n.translationMetadata.translations
+    );
+
+    return html`<div class="content" ${ref(this._content)}>
+      <ha-input-search
+        appearance="outlined"
+        .value=${this._filter}
+        @input=${this._handleSearchChange}
+      >
+      </ha-input-search>
+      <ha-list-selectable
+        multi
+        controlled
+        aria-label=${this._localize("ui.components.filter-entity-types.caption")}
+        @ha-list-item-selected=${this._handleItemToggled}
+        @ha-list-item-deselected=${this._handleItemToggled}
+      >
+        ${repeat(
+          rows,
+          (row) => row.key,
+          (row) => this._renderRow(row, rtl)
+        )}
+      </ha-list-selectable>
+    </div>`;
+  }
+
+  private _renderRow(row: TypeRow, rtl: boolean) {
+    const selected = this._isSelected(row);
+    const expandable = !!row.deviceClasses?.length;
+
+    return html`
+      <ha-list-item-option
+        appearance="checkbox"
+        selection-position="end"
+        class=${classMap({ child: !!row.deviceClass, rtl })}
+        .value=${row.key}
+        .selected=${selected}
+        .indeterminate=${!selected && this._isPartiallySelected(row)}
+      >
+        ${
+          row.deviceClass
+            ? html`<ha-tree-indicator
+                slot="start"
+                .end=${!!row.last}
+              ></ha-tree-indicator>`
+            : nothing
+        }
+        ${
+          row.deviceClass === NO_DEVICE_CLASS
+            ? html`<ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>`
+            : html`<ha-domain-icon
+                slot="start"
+                .icon=${FIXED_TYPE_ICONS[row.key]}
+                .domain=${row.domain}
+                .deviceClass=${row.deviceClass}
+                .state=${row.domain === "binary_sensor" ? "on" : undefined}
+                ?brand-fallback=${!row.deviceClass}
+              ></ha-domain-icon>`
+        }
+        <span slot="headline">${row.name}</span>
+        ${
+          expandable
+            ? html`<ha-icon-button
+                slot="end"
+                data-domain=${row.domain}
+                .path=${row.expanded ? mdiChevronUp : mdiChevronDown}
+                .label=${this._localize(
+                  row.expanded
+                    ? "ui.components.filter-entity-types.collapse"
+                    : "ui.components.filter-entity-types.expand"
+                )}
+                @click=${this._toggleDomain}
+                @keydown=${this._handleChevronKeydown}
+              ></ha-icon-button>`
+            : nothing
+        }
+      </ha-list-item-option>
+    `;
+  }
+
+  private _types = memoizeOne(usedEntityTypes);
+
+  // A selected domain counts for the classes it stands for, so that collapsing
+  // the last one does not drop the count to one.
+  private _count = memoizeOne(
+    (value: string[], types: Map<string, string[]>): number =>
+      value.reduce((count, key) => {
+        const { domain, deviceClass } = parseEntityType(key);
+        return (
+          count +
+          (deviceClass ? 1 : Math.max(types.get(domain)?.length ?? 0, 1))
+        );
+      }, 0)
+  );
+
+  private _rows = memoizeOne(
+    (
+      states: ContextType<typeof statesContext>,
+      localize: LocalizeFunc,
+      language: string | undefined,
+      filter: string | undefined,
+      expandedDomains: Set<string>
+    ): TypeRow[] => {
+      const types = this._types(states);
+
+      const domains = [...types.keys()]
+        .map((domain) => ({ domain, name: domainToName(localize, domain) }))
+        .sort((a, b) => stringCompare(a.name, b.name, language));
+
+      const rows: TypeRow[] = [];
+
+      for (const { domain, name } of domains) {
+        const deviceClasses = types
+          .get(domain)!
+          .map((deviceClass) => ({
+            deviceClass,
+            name: this._deviceClassName(localize, domain, deviceClass),
+          }))
+          .sort((a, b) => {
+            if (a.deviceClass === NO_DEVICE_CLASS) {
+              return 1;
+            }
+            if (b.deviceClass === NO_DEVICE_CLASS) {
+              return -1;
+            }
+            return stringCompare(a.name, b.name, language);
+          });
+
+        const matchingClasses = deviceClasses.filter((entry) =>
+          this._matches(filter, entry.deviceClass, entry.name)
+        );
+        const domainMatches = this._matches(filter, domain, name);
+
+        if (!domainMatches && !matchingClasses.length) {
+          continue;
+        }
+
+        // Only a search that matched nothing but device classes unfolds them.
+        const revealed = !!filter && !domainMatches;
+        const expanded = revealed || expandedDomains.has(domain);
+
+        rows.push({
+          key: domain,
+          domain,
+          name,
+          deviceClasses: deviceClasses.map((entry) => entry.deviceClass),
+          expanded,
+        });
+
+        if (!deviceClasses.length || !expanded) {
+          continue;
+        }
+
+        const children = revealed ? matchingClasses : deviceClasses;
+
+        children.forEach((entry, index) => {
+          rows.push({
+            key: entityTypeKey(domain, entry.deviceClass),
+            domain,
+            deviceClass: entry.deviceClass,
+            name: entry.name,
+            last: index === children.length - 1,
+          });
+        });
+      }
+
+      return rows;
+    }
+  );
+
+  private _deviceClassName(
+    localize: LocalizeFunc,
+    domain: string,
+    deviceClass: string
+  ): string {
+    return deviceClass === NO_DEVICE_CLASS
+      ? localize("ui.components.filter-entity-types.no_device_class")
+      : computeDeviceClassName(localize, domain, deviceClass);
+  }
+
+  private _matches(
+    filter: string | undefined,
+    slug: string,
+    name: string
+  ): boolean {
+    return (
+      !filter ||
+      slug.toLowerCase().includes(filter) ||
+      name.toLowerCase().includes(filter)
+    );
+  }
+
+  private _isSelected(row: TypeRow): boolean {
+    const value = this.value;
+    if (!value?.length) {
+      return false;
+    }
+    return value.includes(row.domain) || value.includes(row.key);
+  }
+
+  private _isPartiallySelected(row: TypeRow): boolean {
+    if (row.deviceClass || !this.value?.length) {
+      return false;
+    }
+    return this.value.some(
+      (key) => parseEntityType(key).domain === row.domain && key !== row.domain
+    );
+  }
+
+  public willUpdate(changed: PropertyValues<this>) {
+    super.willUpdate(changed);
+
+    // While closed, the badge reuses the classes it last saw rather than
+    // rescanning every entity on each state change.
+    if (this._panel.showContent || !this._badgeTypes) {
+      this._badgeTypes = this._types(this._states);
+    }
+
+    if (changed.has("expanded") && this.expanded) {
+      this._expandedDomains = new Set(
+        (this.value ?? [])
+          .map((key) => parseEntityType(key))
+          .filter((type) => type.deviceClass)
+          .map((type) => type.domain)
+      );
+    }
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  // The list activates the focused row on Enter and Space, which would select
+  // the domain instead of expanding it.
+  private _handleChevronKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+    }
+  }
+
+  private _toggleDomain(ev: Event) {
+    ev.stopPropagation();
+    const { domain } = (ev.currentTarget as HTMLElement).dataset;
+    if (!domain) {
+      return;
+    }
+    const expandedDomains = new Set(this._expandedDomains);
+    if (!expandedDomains.delete(domain)) {
+      expandedDomains.add(domain);
+    }
+    this._expandedDomains = expandedDomains;
+  }
+
+  private _handleItemToggled(ev: CustomEvent<number>) {
+    // The list indexes its items by registration order, which a search reorders,
+    // so read the key off the clicked option instead.
+    const option = this._list?.items[ev.detail] as HaListItemOption | undefined;
+    const key = option?.value;
+    if (!key) {
+      return;
+    }
+    const { domain, deviceClass } = parseEntityType(key);
+
+    const value = new Set(this.value ?? []);
+    const siblings = (this._types(this._states).get(domain) ?? []).map(
+      (entry) => entityTypeKey(domain, entry)
+    );
+
+    // Drops the classes the domain no longer exposes too, so that a stale key
+    // can never sit next to the domain that covers it.
+    const selectDomain = () => {
+      value.forEach((selected) => {
+        if (parseEntityType(selected).domain === domain) {
+          value.delete(selected);
+        }
+      });
+      value.add(domain);
+    };
+
+    if (!deviceClass) {
+      if (!value.delete(domain)) {
+        selectDomain();
+      }
+    } else if (value.delete(domain)) {
+      siblings.forEach((sibling) => {
+        if (sibling !== key) {
+          value.add(sibling);
+        }
+      });
+    } else if (!value.delete(key)) {
+      value.add(key);
+      if (siblings.length && siblings.every((sibling) => value.has(sibling))) {
+        selectDomain();
+      }
+    }
+
+    this.value = [...value];
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value.length ? this.value : undefined,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev: Event) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  private _handleSearchChange(ev: InputEvent) {
+    const target = ev.target as HaInputSearch;
+    this._filter = (target.value ?? "").toLowerCase();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      filterPanelStyles,
+      css`
+        /* The list scrolls through its own container, not through the host. */
+        ha-list-selectable {
+          display: flex;
+          flex: 1;
+          min-height: 0;
+        }
+        ha-list-selectable::part(base) {
+          flex: 1;
+          min-height: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: var(--ha-border-radius-circle);
+          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
+          background-color: var(--primary-color);
+          line-height: var(--ha-line-height-normal);
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        ha-input-search {
+          display: block;
+          padding: var(--ha-space-1) var(--ha-space-2) 0;
+        }
+        /* Keeps a row that carries the chevron as tall as one that does not. */
+        ha-list-item-option {
+          --ha-row-item-padding-block: var(--ha-space-2);
+        }
+        ha-list-item-option ha-icon-button {
+          --ha-icon-button-size: 32px;
+        }
+        .child::part(base) {
+          padding-inline-start: 48px;
+        }
+        ha-tree-indicator {
+          width: 56px;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+        }
+        .rtl ha-tree-indicator {
+          right: 0px;
+          left: initial;
+          transform: scaleX(-1);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-entity-types": HaFilterEntityTypes;
+  }
+}

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

@@ -4,8 +4,13 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
@@ -64,10 +69,12 @@ export class HaFilterFloorAreas extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @query("ha-list-selectable") private _list?: HaListSelectable;
 
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -86,7 +93,6 @@ export class HaFilterFloorAreas extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -107,9 +113,11 @@ export class HaFilterFloorAreas extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list-selectable
                   class="ha-scrollbar"
                   multi
@@ -154,10 +162,10 @@ export class HaFilterFloorAreas extends LitElement {
                     (area) => this._renderArea(area)
                   )}
                 </ha-list-selectable>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
@@ -243,19 +251,6 @@ export class HaFilterFloorAreas extends LitElement {
     };
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -347,17 +342,11 @@ export class HaFilterFloorAreas extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list-selectable {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-integrations.ts

@@ -1,11 +1,16 @@
 import type { SelectedDetail } from "@material/mwc-list";
 import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
@@ -44,11 +49,11 @@ export class HaFilterIntegrations extends LitElement {
       Object.values(manifests)
   );
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     const manifests = this._manifests
@@ -59,7 +64,6 @@ export class HaFilterIntegrations extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -74,67 +78,57 @@ export class HaFilterIntegrations extends LitElement {
               : nothing
           }
         </div>
-        ${
-          manifests && this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._itemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._integrations(
-                      this._localize,
-                      manifests,
-                      this._filter,
-                      this.value,
-                      this._i18n.locale.language
-                    ),
-                    (i) => i.domain,
-                    (integration) =>
-                      html`<ha-check-list-item
-                        .value=${integration.domain}
-                        .selected=${(this.value || []).includes(
-                          integration.domain
-                        )}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${integration.domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${integration.name}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              ${
+                manifests
+                  ? html`<ha-input-search
+                        appearance="outlined"
+                        .value=${this._filter}
+                        @input=${this._handleSearchChange}
+                      >
+                      </ha-input-search>
+                      <ha-list
+                        class="ha-scrollbar"
+                        @selected=${this._itemSelected}
+                        multi
+                      >
+                        ${repeat(
+                          this._integrations(
+                            this._localize,
+                            manifests,
+                            this._filter,
+                            this.value,
+                            this._i18n.locale.language
+                          ),
+                          (i) => i.domain,
+                          (integration) =>
+                            html`<ha-check-list-item
+                              .value=${integration.domain}
+                              .selected=${(this.value || []).includes(
+                                integration.domain
+                              )}
+                              graphic="icon"
+                            >
+                              <ha-domain-icon
+                                slot="graphic"
+                                .domain=${integration.domain}
+                                brand-fallback
+                              ></ha-domain-icon>
+                              ${integration.name}
+                            </ha-check-list-item>`
+                        )}
+                      </ha-list>`
+                  : nothing
+              }
+            </div>`
+          : nothing
+      }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -213,17 +207,11 @@ export class HaFilterIntegrations extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-labels.ts

@@ -1,11 +1,16 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
@@ -44,11 +49,11 @@ export class HaFilterLabels extends LitElement {
   @state()
   private _labels?: LabelRegistryEntry[];
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
@@ -75,7 +80,6 @@ export class HaFilterLabels extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -90,89 +94,66 @@ export class HaFilterLabels extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  @selected=${this._labelSelected}
-                  class="ha-scrollbar"
-                  multi
-                >
-                  ${repeat(
-                    this._filteredLabels(
-                      this._labels || [],
-                      this._filter,
-                      this._i18n.locale.language,
-                      this.value
-                    ),
-                    (label) => label.label_id,
-                    (label) =>
-                      html`<ha-check-list-item
-                        .value=${label.label_id}
-                        .selected=${(this.value || []).includes(label.label_id)}
-                        hasMeta
-                      >
-                        <ha-label
-                          .color=${label.color}
-                          .description=${label.description}
-                        >
-                          ${
-                            label.icon
-                              ? html`<ha-icon
-                                  slot="icon"
-                                  .icon=${label.icon}
-                                ></ha-icon>`
-                              : nothing
-                          }
-                          ${label.name}
-                        </ha-label>
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
       ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._manageLabels}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-              ${this._localize("ui.panel.config.labels.manage_labels")}
-            </ha-list-item>`
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+              >
+              </ha-input-search>
+              <ha-list
+                @selected=${this._labelSelected}
+                class="ha-scrollbar"
+                multi
+              >
+                ${repeat(
+                  this._filteredLabels(
+                    this._labels || [],
+                    this._filter,
+                    this._i18n.locale.language,
+                    this.value
+                  ),
+                  (label) => label.label_id,
+                  (label) =>
+                    html`<ha-check-list-item
+                      .value=${label.label_id}
+                      .selected=${(this.value || []).includes(label.label_id)}
+                      hasMeta
+                    >
+                      <ha-label
+                        .color=${label.color}
+                        .description=${label.description}
+                      >
+                        ${
+                          label.icon
+                            ? html`<ha-icon
+                                slot="icon"
+                                .icon=${label.icon}
+                              ></ha-icon>`
+                            : nothing
+                        }
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+              <ha-list-item graphic="icon" @click=${this._manageLabels}>
+                <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+                ${this._localize("ui.panel.config.labels.manage_labels")}
+              </ha-list-item>
+            </div>`
           : nothing
       }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-        // 48px - height of ha-list-item
-      }, 300);
-    }
-  }
-
   private _manageLabels() {
     navigate("/config/labels");
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -227,18 +208,11 @@ export class HaFilterLabels extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;
@@ -267,12 +241,6 @@ export class HaFilterLabels extends LitElement {
         .warning {
           color: var(--error-color);
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
         ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;

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

@@ -0,0 +1,73 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./chips/ha-assist-chip";
+import "./ha-svg-icon";
+
+/**
+ * Chip that opens a filter pane, with a badge showing how many filters are
+ * active.
+ */
+@customElement("ha-filter-pane-chip")
+export class HaFilterPaneChip extends LitElement {
+  @property() public label = "";
+
+  /** SVG path of the leading icon. */
+  @property() public path?: string;
+
+  /** Number of active filters, shown as a badge when there is at least one. */
+  @property({ type: Number }) public count = 0;
+
+  @property({ type: Boolean }) public active = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-assist-chip
+        .label=${this.label}
+        .active=${this.active}
+        .disabled=${this.disabled}
+      >
+        ${
+          this.path
+            ? html`<ha-svg-icon slot="icon" .path=${this.path}></ha-svg-icon>`
+            : nothing
+        }
+      </ha-assist-chip>
+      ${this.count ? html`<div class="badge">${this.count}</div>` : nothing}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      --ha-assist-chip-container-shape: 10px;
+    }
+
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      inset-inline-end: -4px;
+      inset-inline-start: initial;
+      min-width: 16px;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-circle);
+      font-size: var(--ha-font-size-xs);
+      font-weight: var(--ha-font-weight-normal);
+      background-color: var(--primary-color);
+      line-height: var(--ha-line-height-normal);
+      text-align: center;
+      padding: 0 2px;
+      color: var(--text-primary-color);
+      pointer-events: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-pane-chip": HaFilterPaneChip;
+  }
+}

src/components/ha-filter-pane.ts

@@ -0,0 +1,182 @@
+import { mdiFilterVariant, mdiFilterVariantRemove } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { fireEvent } from "../common/dom/fire_event";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { haStyleScrollbar } from "../resources/styles";
+import "./ha-adaptive-dialog";
+import "./ha-button";
+import "./ha-dialog-footer";
+import "./ha-filter-pane-chip";
+import "./ha-icon-button";
+
+/**
+ * Filter pane for a filtered page: a column next to the content on wide
+ * screens, a bottom sheet on narrow ones. Mirrors the filter pane of
+ * `hass-tabs-subpage-data-table` for pages that are not a data table.
+ *
+ * The page keeps ownership of whether the pane is shown, so that it can also
+ * open it from elsewhere (e.g. an empty state) and hide its own toolbar chip
+ * while it is open.
+ *
+ * @slot - Filter panels, e.g. `ha-filter-domains`.
+ */
+@customElement("ha-filter-pane")
+export class HaFilterPane extends LitElement {
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  /** Header label, defaults to "Filters". */
+  @property() public label?: string;
+
+  /** SVG path of the header chip icon. */
+  @property() public path = mdiFilterVariant;
+
+  /** Number of active filters, shows the clear button when above zero. */
+  @property({ type: Number }) public count = 0;
+
+  /**
+   * Number of results the current filters resolve to, shown on the narrow
+   * confirm button. Leave undefined when the page shows everything.
+   */
+  @property({ attribute: false }) public resultCount?: number;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  protected render() {
+    const label =
+      this.label ?? this._localize("ui.components.subpage-data-table.filters");
+
+    if (this.narrow) {
+      return html`
+        <ha-adaptive-dialog
+          open
+          flexcontent
+          .headerTitle=${label}
+          @closed=${this._close}
+        >
+          ${this._renderClearButton("headerActionItems")}
+          <div class="sheet-content">
+            <slot></slot>
+          </div>
+          <ha-dialog-footer slot="footer">
+            <ha-button slot="primaryAction" data-dialog="close">
+              ${
+                this.resultCount === undefined
+                  ? this._localize("ui.common.close")
+                  : this._localize(
+                      "ui.components.subpage-data-table.show_results",
+                      { number: this.resultCount }
+                    )
+              }
+            </ha-button>
+          </ha-dialog-footer>
+        </ha-adaptive-dialog>
+      `;
+    }
+
+    return html`
+      <div class="header">
+        <ha-filter-pane-chip
+          active
+          .label=${label}
+          .path=${this.path}
+          .disabled=${this.disabled}
+          @click=${this._close}
+        ></ha-filter-pane-chip>
+        ${this._renderClearButton()}
+      </div>
+      <div class="content ha-scrollbar">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private _renderClearButton(slot?: string) {
+    if (!this.count) {
+      return nothing;
+    }
+    return html`
+      <ha-icon-button
+        slot=${ifDefined(slot)}
+        .path=${mdiFilterVariantRemove}
+        .disabled=${this.disabled}
+        .label=${this._localize("ui.components.subpage-data-table.clear_filter")}
+        @click=${this._clear}
+      ></ha-icon-button>
+    `;
+  }
+
+  private _close() {
+    fireEvent(this, "close-filter-pane");
+  }
+
+  private _clear() {
+    fireEvent(this, "clear-filter");
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          flex: 0 0 var(--ha-filter-pane-width, 320px);
+          width: var(--ha-filter-pane-width, 320px);
+          box-sizing: border-box;
+          overflow: hidden;
+          border-inline-end: 1px solid var(--divider-color);
+        }
+
+        /* The bottom sheet positions itself, so the pane takes no space. */
+        :host([narrow]) {
+          display: contents;
+        }
+
+        .header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: var(--ha-space-4);
+          box-sizing: border-box;
+          height: 56px;
+          flex-shrink: 0;
+          padding: 0 16px;
+          background: var(--primary-background-color);
+          border-bottom: 1px solid var(--divider-color);
+        }
+
+        .content,
+        .sheet-content {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+        }
+
+        ha-adaptive-dialog {
+          --dialog-content-padding: 0;
+          /* Fixed height so the sheet does not resize while filtering. */
+          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-pane": HaFilterPane;
+  }
+  interface HASSDomEvents {
+    "close-filter-pane": undefined;
+  }
+}

src/components/ha-filter-states.ts

@@ -1,8 +1,13 @@
-import type { List, SelectedDetail } from "@material/mwc-list";
+import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import "./ha-check-list-item";
@@ -27,9 +32,9 @@ export class HaFilterStates extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list!: List;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     if (!this.states) {
@@ -40,7 +45,6 @@ export class HaFilterStates extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -55,9 +59,11 @@ export class HaFilterStates extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list
                   @selected=${this._statesSelected}
                   multi
@@ -82,36 +88,13 @@ export class HaFilterStates extends LitElement {
                       </ha-check-list-item>`
                   )}
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
-  protected willUpdate(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      this._shouldRender = true;
-    }
-  }
-
-  protected updated(changed: PropertyValues<this>) {
-    if ((changed.has("expanded") || changed.has("states")) && this.expanded) {
-      setTimeout(async () => {
-        if (!this.expanded) return;
-        const list = this._list;
-        if (!list) {
-          return;
-        }
-        list.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -152,17 +135,11 @@ export class HaFilterStates extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

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

@@ -2,8 +2,13 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,16 +39,15 @@ export class HaFilterVoiceAssistants extends LitElement {
 
   @state() private _voiceAssistantOptions: string[] = [];
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -58,9 +62,11 @@ export class HaFilterVoiceAssistants extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-list
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-list
                 @selected=${this._assistantsSelected}
                 class="ha-scrollbar"
                 multi
@@ -83,10 +89,10 @@ export class HaFilterVoiceAssistants extends LitElement {
                       ${voiceAssistants[voiceAssistantId].name}
                     </ha-check-list-item>`
                 )}
-              </ha-list> `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </ha-list>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -95,19 +101,6 @@ export class HaFilterVoiceAssistants extends LitElement {
     this._voiceAssistantOptions = Object.keys(voiceAssistants);
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -148,18 +141,11 @@ export class HaFilterVoiceAssistants extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-form/get-selector-fallback-value.ts

@@ -0,0 +1,25 @@
+import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
+import type { Selector } from "../../data/selector";
+
+/**
+ * Value a selector already displays when no field value is set.
+ * Used when enabling an optional service/trigger/condition field.
+ */
+export const getSelectorFallbackValue = (selector: Selector): unknown => {
+  if ("constant" in selector) {
+    return selector.constant?.value;
+  }
+  if ("boolean" in selector) {
+    return false;
+  }
+  if ("number" in selector) {
+    return selector.number?.min ?? 0;
+  }
+  if ("color_temp" in selector) {
+    if (selector.color_temp?.unit === "kelvin") {
+      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
+    }
+    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
+  }
+  return undefined;
+};

src/components/ha-generic-picker.ts

@@ -111,6 +111,11 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
 
   @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
 
+  // Skip the "unknown value" highlight and note for a value that is not in the
+  // list but that the value renderer presents on its own.
+  @property({ type: Boolean, attribute: "no-unknown-state" })
+  public noUnknownState = false;
+
   @query(".container") private _containerElement?: HTMLDivElement;
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -148,7 +153,10 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _unsubscribeTinyKeys?: () => void;
 
   protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("value")) {
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("noUnknownState")
+    ) {
       this._setUnknownValue();
     }
   }
@@ -287,6 +295,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _setUnknownValue = () => {
     const items = this.getItems();
     if (
+      this.noUnknownState ||
       this.allowCustomValue ||
       this.value === undefined ||
       this.value === null ||

src/components/ha-icon.ts

@@ -43,6 +43,8 @@ const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
     import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
   matter: () =>
     import("../resources/matter-logo-svg").then((mod) => mod.mdiMatterLogo),
+  mqtt: () =>
+    import("../resources/mqtt-logo-svg").then((mod) => mod.mdiMqttLogo),
 };
 
 @customElement("ha-icon")

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

@@ -81,6 +81,7 @@ export class HaChooseSelector extends LitElement {
         .required=${this.required}
         @value-changed=${this._handleValueChanged}
         .helper=${this.helper}
+        .localizeValue=${this.localizeValue}
       ></ha-selector>`;
   }
 
@@ -107,7 +108,12 @@ export class HaChooseSelector extends LitElement {
         : {
             [this._activeChoice!]: this.value,
           };
-    this._activeChoice = ev.detail?.value || ev.target.value;
+    const choice = ev.detail?.value || ev.target.value;
+    this._activeChoice = choice;
+    if (choice && "constant" in this.selector.choose.choices[choice].selector) {
+      value[choice] =
+        this.selector.choose.choices[choice].selector.constant?.value;
+    }
     fireEvent(this, "value-changed", {
       value: {
         ...value,

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

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { DeviceClassSelector } from "../../data/selector";
+import "../ha-device-class-picker";
+
+@customElement("ha-selector-device_class")
+export class HaDeviceClassSelector extends LitElement {
+  @property({ attribute: false }) public selector!: DeviceClassSelector;
+
+  @property() public value?: string | string[];
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-device-class-picker
+        .domain=${this.selector.device_class?.domain}
+        .value=${this.value}
+        .multiple=${this.selector.device_class?.multiple ?? false}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-device-class-picker>
+    `;
+  }
+
+  static styles = css`
+    ha-device-class-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-device_class": HaDeviceClassSelector;
+  }
+}

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

@@ -30,6 +30,7 @@ const LOAD_ELEMENTS = {
   date: () => import("./ha-selector-date"),
   datetime: () => import("./ha-selector-datetime"),
   device: () => import("./ha-selector-device"),
+  device_class: () => import("./ha-selector-device-class"),
   duration: () => import("./ha-selector-duration"),
   entity: () => import("./ha-selector-entity"),
   entity_name: () => import("./ha-selector-entity-name"),

src/components/ha-service-control.ts

@@ -35,6 +35,7 @@ import {
 } from "../data/selector";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
+import { getSelectorFallbackValue } from "./ha-form/get-selector-fallback-value";
 import "./ha-checkbox";
 import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-icon-button";
@@ -799,20 +800,8 @@ export class HaServiceControl extends LitElement {
 
       let defaultValue = field?.default;
 
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "constant" in field.selector
-      ) {
-        defaultValue = field.selector.constant?.value;
-      }
-
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "boolean" in field.selector
-      ) {
-        defaultValue = false;
+      if (defaultValue == null && field?.selector) {
+        defaultValue = getSelectorFallbackValue(field.selector);
       }
 
       if (defaultValue != null) {

src/components/ha-sidebar.ts

@@ -664,6 +664,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          overscroll-behavior: contain;
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;

src/components/ha-sources-picker.ts

@@ -0,0 +1,267 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import { ensureArray } from "../common/array/ensure-array";
+import { fireEvent } from "../common/dom/fire_event";
+import type { DataTableFiltersValue } from "../data/data_table_filters";
+import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
+import { entityTypeFilterFunc } from "../data/entity/entity_type";
+import type { EntitySources } from "../data/entity/entity_sources";
+import type { HomeAssistant } from "../types";
+import "./ha-filter-entity-types";
+import "./ha-filter-integrations";
+import "./ha-target-picker";
+
+/**
+ * Ways to narrow down the entities a target selection resolves to. Not to be
+ * confused with `EntitySources`, which maps an entity to its integration.
+ */
+export interface SourceFilters {
+  /** Domains (`sensor`) and domains narrowed to a device class (`sensor/power`). */
+  types?: string[];
+  integrations?: string[];
+}
+
+const TARGET_KEYS = [
+  "floor_id",
+  "area_id",
+  "device_id",
+  "entity_id",
+  "label_id",
+] as const;
+
+/** Number of picked targets, no matter which type they are. */
+export const countTargets = (target: HassServiceTarget): number =>
+  TARGET_KEYS.reduce(
+    (count, key) => count + (target[key] ? ensureArray(target[key]).length : 0),
+    0
+  );
+
+/** Number of filters that have at least one option selected. */
+export const countSourceFilters = (filters: SourceFilters): number =>
+  Object.values(filters).filter((value) => value?.length).length;
+
+/**
+ * Matches an entity against the selected filters: it is kept when it matches
+ * every filter that has a selection. Undefined when nothing is selected.
+ */
+export const sourceFilterFunc = (
+  filters: SourceFilters,
+  states: HomeAssistant["states"],
+  entities: HomeAssistant["entities"],
+  entitySources?: EntitySources
+): ((entityId: string) => boolean) | undefined => {
+  const matchesType = filters.types?.length
+    ? entityTypeFilterFunc(filters.types, states)
+    : undefined;
+  const integrations = filters.integrations?.length
+    ? filters.integrations
+    : undefined;
+
+  if (!matchesType && !integrations) {
+    return undefined;
+  }
+
+  return (entityId: string) => {
+    if (matchesType && !matchesType(entityId)) {
+      return false;
+    }
+    if (integrations) {
+      const integration =
+        entities[entityId]?.platform ?? entitySources?.[entityId]?.domain;
+      if (!integration || !integrations.includes(integration)) {
+        return false;
+      }
+    }
+    return true;
+  };
+};
+
+/** Narrows entity IDs down by the selected filters. */
+export const applySourceFilters = (
+  entityIds: string[],
+  filters: SourceFilters,
+  states: HomeAssistant["states"],
+  entities: HomeAssistant["entities"],
+  entitySources?: EntitySources
+): string[] => {
+  const matches = sourceFilterFunc(filters, states, entities, entitySources);
+  return matches ? entityIds.filter(matches) : entityIds;
+};
+
+/**
+ * Picker for what a page shows: the targets to include, narrowed down by
+ * entity type and integration. Meant to be placed in an `ha-filter-pane`.
+ *
+ * The pages resolve every entity of a target, secondary ones included, so the
+ * target picker counts them too.
+ */
+@customElement("ha-sources-picker")
+export class HaSourcesPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public value: HassServiceTarget = {};
+
+  @property({ attribute: false }) public filters: SourceFilters = {};
+
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  @property({ attribute: false }) public entitySources?: EntitySources;
+
+  /** Explains what the page shows while no target is picked. */
+  @property() public description?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  // Only one filter panel is expanded at a time, so that the expanded one can
+  // use the height that is left in the pane.
+  @state() private _expandedFilter?: keyof SourceFilters;
+
+  protected render() {
+    const noTargets = countTargets(this.value) === 0;
+
+    return html`
+      ${
+        this.description && noTargets
+          ? html`<div class="description">${this.description}</div>`
+          : nothing
+      }
+      <ha-target-picker
+        class=${classMap({ "no-padding-top": noTargets })}
+        .hass=${this.hass}
+        .value=${this.value}
+        .entityFilter=${this.entityFilter}
+        .activeFilter=${this._activeFilter(
+          this.filters,
+          this.hass.states,
+          this.hass.entities,
+          this.entitySources
+        )}
+        .primaryEntitiesOnly=${false}
+        .disabled=${this.disabled}
+        @value-changed=${this._targetsChanged}
+      ></ha-target-picker>
+      <div
+        class=${classMap({ filters: true, expanded: !!this._expandedFilter })}
+      >
+        <ha-filter-entity-types
+          .value=${this.filters.types}
+          .expanded=${this._expandedFilter === "types"}
+          @data-table-filter-changed=${this._typesChanged}
+          @expanded-changed=${this._typesExpanded}
+        ></ha-filter-entity-types>
+        <ha-filter-integrations
+          .value=${this.filters.integrations}
+          .expanded=${this._expandedFilter === "integrations"}
+          @data-table-filter-changed=${this._integrationsChanged}
+          @expanded-changed=${this._integrationsExpanded}
+        ></ha-filter-integrations>
+      </div>
+    `;
+  }
+
+  private _activeFilter = memoizeOne(sourceFilterFunc);
+
+  protected firstUpdated() {
+    // The filter panels label themselves with keys from the config panel.
+    this.hass.loadFragmentTranslation("config");
+  }
+
+  private _targetsChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", { value: ev.detail.value || {} });
+  }
+
+  private _typesChanged(ev: CustomEvent) {
+    this._filterChanged("types", ev);
+  }
+
+  private _integrationsChanged(ev: CustomEvent) {
+    this._filterChanged("integrations", ev);
+  }
+
+  private _filterChanged(key: keyof SourceFilters, ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value as DataTableFiltersValue;
+    fireEvent(this, "source-filters-changed", {
+      value: {
+        ...this.filters,
+        [key]: Array.isArray(value) && value.length ? value : undefined,
+      },
+    });
+  }
+
+  private _typesExpanded(ev: CustomEvent) {
+    this._filterExpanded("types", ev);
+  }
+
+  private _integrationsExpanded(ev: CustomEvent) {
+    this._filterExpanded("integrations", ev);
+  }
+
+  private _filterExpanded(key: keyof SourceFilters, ev: CustomEvent) {
+    if (ev.detail.expanded) {
+      this._expandedFilter = key;
+    } else if (this._expandedFilter === key) {
+      this._expandedFilter = undefined;
+    }
+  }
+
+  static styles = css`
+    /* The sections are laid out by the pane, so that an expanded filter
+         panel can use the height that is left. */
+    :host {
+      display: contents;
+    }
+
+    .description {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 92px;
+      margin: var(--ha-space-4) var(--ha-space-4) 0;
+      padding: 0 var(--ha-space-6);
+      border-radius: var(--ha-border-radius-lg);
+      background-color: var(--ha-color-fill-neutral-quiet-resting);
+      text-align: center;
+      color: var(--secondary-text-color);
+    }
+
+    ha-target-picker {
+      display: block;
+      flex: none;
+      padding: var(--ha-space-4);
+    }
+
+    /* The description already spaces the picker from the pane header. */
+    ha-target-picker.no-padding-top {
+      padding-top: 0;
+    }
+
+    .filters {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 auto;
+      border-top: 1px solid var(--divider-color);
+    }
+
+    /* An expanded panel sizes itself to the space that is left over. */
+    .filters.expanded {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sources-picker": HaSourcesPicker;
+  }
+  interface HASSDomEvents {
+    "source-filters-changed": { value: SourceFilters };
+  }
+}

src/components/ha-target-picker.ts

@@ -41,9 +41,6 @@ import { domainToName } from "../data/integration";
 import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
-  areaMeetsFilter,
-  deviceMeetsFilter,
-  entityRegMeetsFilter,
   getTargetComboBoxItemType,
   type TargetItem,
   type TargetType,
@@ -66,7 +63,6 @@ import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
-import "./target-picker/ha-target-picker-value-chip";
 
 const SEPARATOR = "________";
 const CREATE_ID = "___create-new-entity___";
@@ -85,8 +81,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean, reflect: true }) public compact = false;
-
   @property({ attribute: false }) public createDomains?: string[];
 
   @property({ type: Boolean, attribute: "primary-entities-only" })
@@ -114,9 +108,14 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   @property({ attribute: false })
   public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ type: Boolean, reflect: true }) public disabled = false;
+  /**
+   * Entities that pass the filters the page currently has on. Narrows the
+   * counts, unlike `entityFilter`, which says what can be picked at all.
+   */
+  @property({ attribute: false })
+  public activeFilter?: (entityId: string) => boolean;
 
-  @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
+  @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @state() private _selectedSection?: TargetTypeFloorless;
 
@@ -158,6 +157,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         excludeDevices,
         value,
         idPrefix,
+        nested: true,
       })
   );
 
@@ -252,119 +252,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     Fuse.createIndex(keys, states);
 
   protected render() {
-    if (this.addOnTop) {
-      return html` ${this._renderPicker()} ${this._renderItems()} `;
-    }
     return html` ${this._renderItems()} ${this._renderPicker()} `;
   }
 
-  private _renderValueChips() {
-    const entityIds = this.value?.entity_id
-      ? ensureArray(this.value.entity_id)
-      : [];
-    const deviceIds = this.value?.device_id
-      ? ensureArray(this.value.device_id)
-      : [];
-    const areaIds = this.value?.area_id ? ensureArray(this.value.area_id) : [];
-    const floorIds = this.value?.floor_id
-      ? ensureArray(this.value.floor_id)
-      : [];
-    const labelIds = this.value?.label_id
-      ? ensureArray(this.value.label_id)
-      : [];
-
-    if (
-      !entityIds.length &&
-      !deviceIds.length &&
-      !areaIds.length &&
-      !floorIds.length &&
-      !labelIds.length
-    ) {
-      return nothing;
-    }
-
-    return html`
-      <div class="items">
-        ${
-          floorIds.length
-            ? floorIds.map(
-                (floor_id) => html`
-                  <ha-target-picker-value-chip
-                    .hass=${this.hass}
-                    type="floor"
-                    .itemId=${floor_id}
-                    @remove-target-item=${this._handleRemove}
-                    @expand-target-item=${this._handleExpand}
-                  ></ha-target-picker-value-chip>
-                `
-              )
-            : nothing
-        }
-        ${
-          areaIds.length
-            ? areaIds.map(
-                (area_id) => html`
-                  <ha-target-picker-value-chip
-                    .hass=${this.hass}
-                    type="area"
-                    .itemId=${area_id}
-                    @remove-target-item=${this._handleRemove}
-                    @expand-target-item=${this._handleExpand}
-                  ></ha-target-picker-value-chip>
-                `
-              )
-            : nothing
-        }
-        ${
-          deviceIds.length
-            ? deviceIds.map(
-                (device_id) => html`
-                  <ha-target-picker-value-chip
-                    .hass=${this.hass}
-                    type="device"
-                    .itemId=${device_id}
-                    .compositeSplits=${this._compositeSplits}
-                    @remove-target-item=${this._handleRemove}
-                    @expand-target-item=${this._handleExpand}
-                  ></ha-target-picker-value-chip>
-                `
-              )
-            : nothing
-        }
-        ${
-          entityIds.length
-            ? entityIds.map(
-                (entity_id) => html`
-                  <ha-target-picker-value-chip
-                    .hass=${this.hass}
-                    type="entity"
-                    .itemId=${entity_id}
-                    @remove-target-item=${this._handleRemove}
-                    @expand-target-item=${this._handleExpand}
-                  ></ha-target-picker-value-chip>
-                `
-              )
-            : nothing
-        }
-        ${
-          labelIds.length
-            ? labelIds.map(
-                (label_id) => html`
-                  <ha-target-picker-value-chip
-                    .hass=${this.hass}
-                    type="label"
-                    .itemId=${label_id}
-                    @remove-target-item=${this._handleRemove}
-                    @expand-target-item=${this._handleExpand}
-                  ></ha-target-picker-value-chip>
-                `
-              )
-            : nothing
-        }
-      </div>
-    `;
-  }
-
   private _renderValueGroups() {
     const entityIds = this.value?.entity_id
       ? ensureArray(this.value.entity_id)
@@ -403,6 +293,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .items=${{ entity: entityIds }}
                   .deviceFilter=${this.deviceFilter}
                   .entityFilter=${this.entityFilter}
+                  .activeFilter=${this.activeFilter}
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -423,6 +314,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .items=${{ device: deviceIds }}
                   .deviceFilter=${this.deviceFilter}
                   .entityFilter=${this.entityFilter}
+                  .activeFilter=${this.activeFilter}
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -446,6 +338,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   }}
                   .deviceFilter=${this.deviceFilter}
                   .entityFilter=${this.entityFilter}
+                  .activeFilter=${this.activeFilter}
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -465,6 +358,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .items=${{ label: labelIds }}
                   .deviceFilter=${this.deviceFilter}
                   .entityFilter=${this.entityFilter}
+                  .activeFilter=${this.activeFilter}
                   .includeDomains=${this.includeDomains}
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .primaryEntitiesOnly=${this.primaryEntitiesOnly}
@@ -478,9 +372,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _renderItems() {
-    return html`
-      ${this.compact ? this._renderValueChips() : this._renderValueGroups()}
-    `;
+    return html` ${this._renderValueGroups()} `;
   }
 
   private _renderPicker() {
@@ -655,152 +547,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleExpand(ev: HASSDomEvent<HASSDomEvents["expand-target-item"]>) {
-    const type = ev.detail.type;
-    const itemId = ev.detail.id;
-    const newAreas: string[] = [];
-    const newDevices: string[] = [];
-    const newEntities: string[] = [];
-
-    if (type === "floor") {
-      Object.values(this.hass.areas).forEach((area) => {
-        if (
-          area.floor_id === itemId &&
-          !this.value!.area_id?.includes(area.area_id) &&
-          areaMeetsFilter(
-            area,
-            this.hass.devices,
-            this.hass.entities,
-            this.deviceFilter,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newAreas.push(area.area_id);
-        }
-      });
-    } else if (type === "area") {
-      Object.values(this.hass.devices).forEach((device) => {
-        if (
-          device.area_id === itemId &&
-          !this.value!.device_id?.includes(device.id) &&
-          deviceMeetsFilter(
-            device,
-            this.hass.entities,
-            this.deviceFilter,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newDevices.push(device.id);
-        }
-      });
-      Object.values(this.hass.entities).forEach((entity) => {
-        if (
-          entity.area_id === itemId &&
-          !this.value!.entity_id?.includes(entity.entity_id) &&
-          entityRegMeetsFilter(
-            entity,
-            false,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newEntities.push(entity.entity_id);
-        }
-      });
-    } else if (type === "device") {
-      Object.values(this.hass.entities).forEach((entity) => {
-        if (
-          entity.device_id === itemId &&
-          !this.value!.entity_id?.includes(entity.entity_id) &&
-          entityRegMeetsFilter(
-            entity,
-            false,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newEntities.push(entity.entity_id);
-        }
-      });
-    } else if (type === "label") {
-      Object.values(this.hass.areas).forEach((area) => {
-        if (
-          area.labels.includes(itemId) &&
-          !this.value!.area_id?.includes(area.area_id) &&
-          areaMeetsFilter(
-            area,
-            this.hass.devices,
-            this.hass.entities,
-            this.deviceFilter,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newAreas.push(area.area_id);
-        }
-      });
-      Object.values(this.hass.devices).forEach((device) => {
-        if (
-          device.labels.includes(itemId) &&
-          !this.value!.device_id?.includes(device.id) &&
-          deviceMeetsFilter(
-            device,
-            this.hass.entities,
-            this.deviceFilter,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newDevices.push(device.id);
-        }
-      });
-      Object.values(this.hass.entities).forEach((entity) => {
-        if (
-          entity.labels.includes(itemId) &&
-          !this.value!.entity_id?.includes(entity.entity_id) &&
-          entityRegMeetsFilter(
-            entity,
-            true,
-            this.includeDomains,
-            this.includeDeviceClasses,
-            this.hass.states,
-            this.entityFilter
-          )
-        ) {
-          newEntities.push(entity.entity_id);
-        }
-      });
-    } else {
-      return;
-    }
-    let value = this.value;
-    if (newEntities.length) {
-      value = this._addItems(value, "entity_id", newEntities);
-    }
-    if (newDevices.length) {
-      value = this._addItems(value, "device_id", newDevices);
-    }
-    if (newAreas.length) {
-      value = this._addItems(value, "area_id", newAreas);
-    }
-    value = this._removeItem(value, type, itemId);
-    fireEvent(this, "value-changed", { value });
-  }
-
   private _handleReplace(
     ev: HASSDomEvent<HASSDomEvents["replace-target-item"]>
   ) {
@@ -840,17 +586,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     this._replaceTargetAnchor = undefined;
   }
 
-  private _addItems(
-    value: this["value"],
-    type: string,
-    ids: string[]
-  ): this["value"] {
-    return {
-      ...value,
-      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
-    };
-  }
-
   private _removeItem(
     value: this["value"],
     type: TargetType,
@@ -1001,6 +736,28 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       }
 
       if (!filterType || filterType === "device") {
+        const selectedDeviceIds = targetValue?.device_id
+          ? replacingDeviceId
+            ? ensureArray(targetValue.device_id).filter(
+                (deviceId) => deviceId !== replacingDeviceId
+              )
+            : ensureArray(targetValue.device_id)
+          : undefined;
+        // A selected parent device already targets its children, so exclude
+        // those children from the picker too (mirrors selecting a floor
+        // removing its areas from the list).
+        const excludeDeviceIds = selectedDeviceIds
+          ? [
+              ...selectedDeviceIds,
+              ...Object.values(this.hass.devices)
+                .filter(
+                  (device) =>
+                    device.parent_device_id !== null &&
+                    selectedDeviceIds.includes(device.parent_device_id)
+                )
+                .map((device) => device.id),
+            ]
+          : undefined;
         let deviceItems = this._getDevicesMemoized(
           this.hass,
           configEntryLookup,
@@ -1008,26 +765,41 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           includeDeviceClasses,
           deviceFilter,
           entityFilter,
-          targetValue?.device_id
-            ? replacingDeviceId
-              ? ensureArray(targetValue.device_id).filter(
-                  (deviceId) => deviceId !== replacingDeviceId
-                )
-              : ensureArray(targetValue.device_id)
-            : undefined,
+          excludeDeviceIds,
           replacingDeviceId,
           `device${SEPARATOR}`
-        ).sort(this._sortBySortingLabel);
+        );
+        // getDevices already returns child devices nested under their parent
+        // with the top-level devices sorted; keep that order rather than
+        // re-sorting by label, which would separate children from their parent.
 
         if (searchTerm) {
+          // Keep the nested parent-then-children order (sort=false), matching
+          // the areas group; the default sorted search would reorder matches by
+          // relevance and pull children above their parent.
           deviceItems = this._filterGroup(
             "device",
             deviceItems,
             searchTerm,
-            deviceComboBoxKeys
+            deviceComboBoxKeys,
+            false
           );
         }
 
+        // Recompute the tree "last child" flag over the (possibly filtered)
+        // list so the last visible child of each parent draws its end connector.
+        deviceItems = deviceItems.map((item, index) => {
+          if (!(item as DevicePickerItem).is_child) {
+            return item;
+          }
+          const nextItem = deviceItems[index + 1] as
+            DevicePickerItem | undefined;
+          return {
+            ...item,
+            last: !nextItem || !nextItem.is_child,
+          };
+        });
+
         if (!filterType && deviceItems.length) {
           // show group title
           items.push(localize("ui.components.target-picker.type.devices"));
@@ -1245,7 +1017,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;
-    if (type === "area" || type === "floor") {
+    const isChildDeviceRow =
+      type === "device" && !!(item as DevicePickerItem).is_child;
+    if (type === "area" || type === "floor" || isChildDeviceRow) {
       rtl = computeRTL(
         this.hass.language,
         this.hass.translationMetadata.translations
@@ -1265,27 +1039,27 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         .type=${type === "empty" ? "text" : "button"}
         class=${type === "empty" ? "empty" : ""}
         style=${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? "--md-list-item-leading-space: var(--ha-space-12);"
             : ""
         }
       >
         ${
-          (item as FloorComboBoxItem).type === "area" && hasFloor
+          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
+          isChildDeviceRow
             ? html`
                 <ha-tree-indicator
                   style=${styleMap({
                     width: "var(--ha-space-12)",
                     position: "absolute",
                     top: "0",
+                    height: "100%",
                     left: rtl ? undefined : "var(--ha-space-1)",
                     right: rtl ? "var(--ha-space-1)" : undefined,
                     transform: rtl ? "scaleX(-1)" : "",
                   })}
-                  .end=${
-                    (item as FloorComboBoxItem & { last?: boolean | undefined })
-                      .last
-                  }
+                  .end=${(item as { last?: boolean }).last}
                   slot="start"
                 ></ha-tree-indicator>
               `
@@ -1387,13 +1161,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       width: 100%;
     }
 
-    .items {
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      padding: var(--ha-space-2) 0;
-      gap: var(--ha-space-2);
-    }
     .item-groups {
       overflow: hidden;
       border: var(--ha-border-width-sm) solid var(--divider-color);
@@ -1409,7 +1176,6 @@ declare global {
 
   interface HASSDomEvents {
     "remove-target-item": TargetItem;
-    "expand-target-item": TargetItem;
     "replace-target-item": TargetItem;
     "migrate-target-item": { id: string; replacements: string[] };
     "remove-target-group": string;

src/components/ha-tree-indicator.ts

@@ -8,10 +8,31 @@ export class HaTreeIndicator extends LitElement {
   public end?: boolean = false;
 
   protected render(): TemplateResult {
+    // preserveAspectRatio="none" lets the connector stretch to the host box, so
+    // it can span the full height of a taller row instead of being letterboxed
+    // to a square in the middle. non-scaling-stroke keeps the line width and
+    // dash pattern identical no matter how far it is stretched.
     return html`
-      <svg width="100%" height="100%" viewBox="0 0 48 48">
-        <line x1="24" y1="0" x2="24" y2=${this.end ? "24" : "48"}></line>
-        <line x1="24" y1="24" x2="36" y2="24"></line>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 48 48"
+        preserveAspectRatio="none"
+      >
+        <line
+          x1="24"
+          y1="0"
+          x2="24"
+          y2=${this.end ? "24" : "48"}
+          vector-effect="non-scaling-stroke"
+        ></line>
+        <line
+          x1="24"
+          y1="24"
+          x2="36"
+          y2="24"
+          vector-effect="non-scaling-stroke"
+        ></line>
       </svg>
     `;
   }

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

@@ -24,6 +24,7 @@ export type HaListItemOptionSelectionPosition = "start" | "end";
  * @cssprop --ha-list-item-selected-background - Background color when selected (`appearance="line"`).
  *
  * @attr {boolean} selected - Whether the option is selected. Set by the parent `ha-list-selectable`.
+ * @attr {boolean} indeterminate - Draws the checkbox in an indeterminate state, for a row that stands for a partially selected set.
  * @attr {string} value - Value identifying the option.
  * @attr {("line"|"checkbox")} appearance - Visual style. "line" highlights the row; "checkbox" renders an `ha-checkbox`.
  * @attr {("start"|"end")} selection-position - Side the checkbox sits on when `appearance="checkbox"`.
@@ -32,6 +33,8 @@ export type HaListItemOptionSelectionPosition = "start" | "end";
 export class HaListItemOption extends HaListItemBase {
   @property({ type: Boolean, reflect: true }) public selected = false;
 
+  @property({ type: Boolean, reflect: true }) public indeterminate = false;
+
   @property({ type: String }) public value?: string;
 
   @property({ type: String, reflect: true })
@@ -80,6 +83,7 @@ export class HaListItemOption extends HaListItemBase {
     return html`<div part="checkbox" class="checkbox" inert>
       <ha-checkbox
         .checked=${this.selected}
+        .indeterminate=${this.indeterminate}
         .disabled=${this.disabled}
       ></ha-checkbox>
     </div>`;

src/components/list/ha-list-selectable-mixin.ts

@@ -10,6 +10,8 @@ export const SelectableMixin = <T extends Constructor<HaListBase>>(
   class SelectableClass extends superClass {
     @property({ type: Boolean, reflect: true }) public multi = false;
 
+    @property({ type: Boolean, reflect: true }) public controlled = false;
+
     protected override readonly hostRole = "listbox";
 
     public connectedCallback(): void {
@@ -67,15 +69,19 @@ export const SelectableMixin = <T extends Constructor<HaListBase>>(
               `ha-list-item-${el.selected ? "deselected" : "selected"}`,
               index
             );
-            el.toggleAttribute("selected");
+            if (!this.controlled) {
+              el.toggleAttribute("selected");
+            }
             return;
           }
 
           if (!el.selected) {
             fireEvent(this, "ha-list-item-selected", index);
-            // deselect the other optional selected item
-            this.clearSelection();
-            el.toggleAttribute("selected", true);
+            if (!this.controlled) {
+              // deselect the other optional selected item
+              this.clearSelection();
+              el.toggleAttribute("selected", true);
+            }
           }
         }
       }