Add type to mount candidates

Add local disk mounts to storage settings
Support the new disk mount type from the Supervisor mount API: - Model disk mounts in the mounts data layer. Only network mounts have a server and a port, so those move out of the shared base, and a disk mount carries the uuid and filesystem Supervisor resolves it to. - Offer "Local disk" when adding storage, with the disk picked from the devices Supervisor reports as mountable. A device the host reports as write-protected forces the read-only option on, and is not offered for backups at all, as Supervisor refuses a read-only backup mount. - Hide the option when Supervisor does not have the candidates endpoint, and explain it rather than error when no suitable disk is connected. - Show the disk a mount already uses as fixed text when editing it, since Supervisor excludes a mounted device from the candidates. - Describe disk mounts in the storage panel and the mount picker. Both built their secondary line from server, share and path, which a disk mount does not have, so it rendered as "undefined". - Retitle the card to "Additional storage", as it is no longer limited to storage reached over the network. Also fixes the mount picker dropping its mount type filter whenever a usage was set, which reapplied the filter to the unfiltered list.
2026-09-01 14:49:47 +00:00 · 2026-08-20 12:42:18 +03:00 · 2026-08-14 16:12:13 +03:00
460 changed files with 9043 additions and 29687 deletions
@@ -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.
- Each test added by the change protects real logic, not the look of a component.
+- Tests are added or updated for new data processing and utilities where applicable.
 - User-facing text is localized and follows `ha-frontend-user-facing-text` guidance.
 - Components handle loading, error, unavailable, and missing-entity states.
 - Entity existence is checked before property access.
@@ -49,13 +49,12 @@ 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.

-## When To Add Tests
+## Unit And Utility Tests

- 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.
+- Add or update Vitest tests for data processing, utility code, and behavior that can be tested without a browser.
+- Mock WebSocket connections and API calls at boundaries.
+- Cover loading, error, unavailable, and missing-entity states where relevant.
+- Test accessibility-sensitive behavior when it can be asserted without brittle DOM internals.

 ## Dev Servers

@@ -1,52 +1,36 @@
 [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 2 years + current alpha/beta versions
+# - released in the last year + current alpha/beta versions
+# - Firefox extended support release (ESR)
+# - with global utilization at or above 0.5%
 # - exclude dead browsers (no security maintenance for 2+ years)
-# - exclude QQ, and UC browsers due to lack of sufficient feature support data
+# - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
-last 2 years
+last 1 year
+Firefox ESR
+>= 0.5%
 not dead
+not KaiOS > 0
 not QQAndroid > 0
 not UCAndroid > 0

 [legacy]
-# 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 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-sw]
-# 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
+# Same as legacy plus supports service workers
+unreleased versions
+last 7 years
+>= 0.05% and supports serviceworkers
+not dead
+not op_mini all
@@ -32,12 +32,12 @@ jobs:
          persist-credentials: false

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+        uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
        with:
          languages: javascript-typescript
          build-mode: none

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
+        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
        with:
          category: "/language:javascript-typescript"
@@ -1,47 +0,0 @@
-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`.
@@ -1,8 +1,7 @@
-name: Sync sensor entity constants
+name: Sync numeric device classes

-# 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
+# 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
 # when it drifts. Reads homeassistant/generated/sensor.json from core.

 on:
@@ -29,8 +28,8 @@ jobs:
      - name: Setup Node and install
        uses: ./.github/actions/setup

-      - name: Regenerate sensor entity constants
-        run: ./script/gen_sensor_entity_constants
+      - name: Regenerate numeric device classes
+        run: ./script/gen_numeric_device_classes

      - name: Format
        run: yarn prettier --write src/data/sensor_numeric_device_classes.ts
@@ -74,6 +74,3 @@ test/e2e/app/dist/
 .serena

 test/benchmarks/results/
-
-# Downloaded map glyph and sprite archives
-.map-assets/
@@ -1 +1 @@
-24.20.0
+24.19.0
@@ -33,7 +33,6 @@ 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

@@ -34,14 +34,6 @@ In production, the following responsibilities are added:

 - Minify HTML
 - Bundle multiple imports so that the browser can fetch less files
- Generate a second version that is compatible with older browsers (legacy build)
+- Generate a second version that is ES5 compatible

 Configuration for all these steps are specified in [bundle.js](bundle.js).
-
-## Auditing browser support changes
-
-`node build-scripts/list-plugins-and-polyfills.js` prints, per browserslist
-environment (modern/legacy), the Babel transforms preset-env enables and the
-Core-JS polyfills that may be injected — as collapsible markdown ready to
-paste into a PR. Use it to show the bundle impact when changing
-`.browserslistrc` or the Babel configuration.
@@ -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": 576583,
-    "core": 54790,
-    "authorize": 543547,
-    "onboarding": 655556
+    "app": 595204,
+    "core": 57741,
+    "authorize": 576928,
+    "onboarding": 685964
  },
  "frontend-legacy": {
-    "app": 717124,
-    "core": 181583,
-    "authorize": 699175,
-    "onboarding": 816133
+    "app": 861452,
+    "core": 258557,
+    "authorize": 834356,
+    "onboarding": 1001360
  }
 }
@@ -63,10 +63,8 @@ module.exports.htmlMinifierOptions = {
 };

 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
-  // 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,
+  safari10: !latestBuild,
+  ecma: latestBuild ? 2015 : 5,
  module: latestBuild,
  format: { comments: false },
  sourceMap: !isTestBuild,
@@ -121,7 +119,7 @@ module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
        ignoreModuleNotFound: true,
      },
    ],
-    // Import helpers from runtime package.
+    // Import helpers and regenerator from runtime package.
    // `moduleName` is pinned so helpers resolve from `@babel/runtime`: the
    // corejs3 polyfill provider above otherwise redirects them to the
    // (uninstalled) `@babel/runtime-corejs3`, which preset-env used to suppress
@@ -155,6 +153,8 @@ module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
          "@lit-labs/virtualizer/polyfills",
          "@webcomponents/scoped-custom-element-registry",
          "element-internals-polyfill",
+          "proxy-polyfill",
+          "unfetch",
        ].map((p) => new RegExp(`/node_modules/${p}/`)),
      ],
    },
@@ -25,7 +25,7 @@ const SAFARI_TO_MACOS = {
  16: [11, 0, 0],
  17: [12, 0, 0],
  18: [13, 0, 0],
-  26: [14, 6, 0],
+  26: [26, 0, 0],
 };

 const getCommonTemplateVars = () => {
@@ -89,7 +89,7 @@ const minifyHtml = (content, ext) => {
    ...htmlMinifierOptions,
    conservativeCollapse: false,
    minifyJS: terserOptions({
-      latestBuild: false, // Shared scripts must satisfy the legacy targets
+      latestBuild: false, // Shared scripts should be ES5
      isTestBuild: true, // Don't need source maps
    }),
  }).then((wrapped) =>
@@ -4,7 +4,6 @@ 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);
@@ -42,6 +41,37 @@ function copyMdiIcons(staticDir) {
  fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
 }

+function copyPolyfills(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // For custom panels using ES5 builds that don't use Babel 7+
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
+    staticPath("polyfills/")
+  );
+
+  // Web Component polyfills and adapters
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
+    staticPath("polyfills/")
+  );
+  // Lit polyfill support
+  fs.copySync(
+    npmPath("lit/polyfill-support.js"),
+    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
+  );
+
+  // dialog-polyfill css
+  copyFileDir(
+    npmPath("dialog-polyfill/dialog-polyfill.css"),
+    staticPath("polyfills/")
+  );
+}
+
 function copyFonts(staticDir) {
  const staticPath = genStaticPath(staticDir);
  // Local fonts
@@ -59,7 +89,7 @@ function copyQrScannerWorker(staticDir) {
  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
 }

-async function copyMapPanel(staticDir) {
+function copyMapPanel(staticDir) {
  const staticPath = genStaticPath(staticDir);
  copyFileDir(
    npmPath("leaflet/dist/leaflet.css"),
@@ -73,14 +103,6 @@ async 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/"));
-  copyFileDir(
-    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
-    staticPath("map/")
-  );
 }

 function copyZXingWasm(staticDir) {
@@ -110,13 +132,14 @@ gulp.task("copy-static-app", async () => {
  const staticDir = paths.app_output_static;
  // Basic static files
  fs.copySync(polyPath("public"), paths.app_output_root);
+  copyPolyfills(staticDir);
  copyFonts(staticDir);
  copyTranslations(staticDir);
  copyLocaleData(staticDir);
  copyMdiIcons(staticDir);

  // Panel assets
-  await copyMapPanel(staticDir);
+  copyMapPanel(staticDir);

  // Qr Scanner assets
  copyZXingWasm(staticDir);
@@ -131,7 +154,8 @@ gulp.task("copy-static-demo", async () => {
  );
  // Copy demo static files
  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
-  await copyMapPanel(paths.demo_output_static);
+  copyPolyfills(paths.demo_output_static);
+  copyMapPanel(paths.demo_output_static);
  copyFonts(paths.demo_output_static);
  copyTranslations(paths.demo_output_static);
  copyLocaleData(paths.demo_output_static);
@@ -143,7 +167,8 @@ gulp.task("copy-static-cast", async () => {
  fs.copySync(polyPath("public/static"), paths.cast_output_static);
  // Copy cast static files
  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
-  await copyMapPanel(paths.cast_output_static);
+  copyPolyfills(paths.cast_output_static);
+  copyMapPanel(paths.cast_output_static);
  copyFonts(paths.cast_output_static);
  copyTranslations(paths.cast_output_static);
  copyLocaleData(paths.cast_output_static);
@@ -159,7 +184,7 @@ gulp.task("copy-static-gallery", async () => {
    paths.gallery_output_root
  );

-  await copyMapPanel(paths.gallery_output_static);
+  copyMapPanel(paths.gallery_output_static);
  copyFonts(paths.gallery_output_static);
  copyTranslations(paths.gallery_output_static);
  copyLocaleData(paths.gallery_output_static);
@@ -189,7 +214,8 @@ gulp.task("copy-static-e2e-test-app", async () => {
    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
  }

-  await copyMapPanel(paths.e2eTestApp_output_static);
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
  copyFonts(paths.e2eTestApp_output_static);
  copyTranslations(paths.e2eTestApp_output_static);
  copyLocaleData(paths.e2eTestApp_output_static);
@@ -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/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);
-});
@@ -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/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);
+});
@@ -1,83 +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_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);
-});
@@ -9,12 +9,10 @@ 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-sensor-entity-constants.js";
+import "./gen-numeric-device-classes.js";
 import "./landing-page.js";
 import "./locale-data.js";
-import "./map-assets.js";
 import "./rspack.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -1,218 +0,0 @@
-// Assembles the static assets of the vector base map - style, SDF glyphs and
-// icon sprites - into /static/map/. vector.openstreetmap.org sets CORS headers
-// on its tiles only, so these cannot be loaded from there by a browser.
-//
-// Glyphs and sprites come from pinned VersaTiles releases, cached locally and
-// verified against a digest.
-
-import { createHash } from "node:crypto";
-import { readFile, 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 { extract } from "tar";
-import paths from "../paths.cjs";
-import { addLatinLabels } from "./map-labels.js";
-
-// The tile URL is deliberately never named here: the OSMF asks consumers to
-// resolve it through the TileJSON so they can move the tiles without every
-// client needing a release. https://operations.osmfoundation.org/policies/vector/
-const TILEJSON_URL =
-  "https://vector.openstreetmap.org/shortbread_v1/tilejson.json";
-
-const ASSET_PATH = "/static/map";
-
-const ARCHIVES = {
-  fonts: {
-    url: "https://github.com/versatiles-org/versatiles-fonts/releases/download/v2.2.0/noto_sans.tar.gz",
-    sha256: "a2dac39f4096722bc420367ffd4a36687cce7229e8aa760bc12cf657072eea6b",
-  },
-  sprites: {
-    url: "https://github.com/versatiles-org/versatiles-style/releases/download/v5.13.1/sprites.tar.gz",
-    sha256: "efffd0ee4cb9591bd52f16ff5b269d9618c7dd1db159cd6511943965560ddea5",
-  },
-};
-
-// Rendered with a device font through `localIdeographFontFamily`, so these are
-// never downloaded - and they are 90% of the Noto Sans SDF set.
-const LOCAL_IDEOGRAPH_BLOCKS = [
-  [0x2e80, 0x9fff], // CJK radicals through CJK Unified Ideographs, incl. kana
-  [0xac00, 0xd7ff], // Hangul syllables
-  [0xf900, 0xfaff], // CJK compatibility ideographs
-  [0xfe30, 0xfe4f], // CJK compatibility forms
-];
-
-// Our styles use bold only for motorway shields, so Latin, Greek and Cyrillic
-// cover every ref and the rest of bold - half the glyph set - is dropped.
-// `assertBoldStaysOnRefs` guards the assumption.
-const BOLD_MAX_CODEPOINT = 0x04ff;
-const BOLD_TEXT_FIELD = "{ref}";
-
-const cacheDir = path.resolve(paths.root_dir, ".map-assets");
-const outputDir = path.resolve(paths.build_dir, "map");
-
-const sha256 = (buffer) => createHash("sha256").update(buffer).digest("hex");
-
-// Downloads an archive into the cache, or reuses it when the digest matches.
-const cachedArchive = async (name, { url, sha256: expected }) => {
-  const file = path.join(cacheDir, `${name}.tar.gz`);
-
-  if (await fs.pathExists(file)) {
-    if (sha256(await readFile(file)) === expected) {
-      return file;
-    }
-    console.warn("Cached map %s archive is stale, downloading again", name);
-  }
-
-  console.log("Downloading map %s from %s", name, url);
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to download map ${name}: ${response.status} ${response.statusText}`
-    );
-  }
-  const body = Buffer.from(await response.arrayBuffer());
-
-  const digest = sha256(body);
-  if (digest !== expected) {
-    throw new Error(
-      `Digest mismatch for map ${name}: expected ${expected}, got ${digest}`
-    );
-  }
-
-  await fs.outputFile(file, body);
-  return file;
-};
-
-const glyphRange = (entryPath) => {
-  const match = /^(?<font>[^/]+)\/(?<start>\d+)-(?<end>\d+)\.pbf$/.exec(
-    entryPath
-  );
-  return match
-    ? { font: match.groups.font, start: Number(match.groups.start) }
-    : undefined;
-};
-
-const keepGlyph = (entryPath) => {
-  const range = glyphRange(entryPath);
-  if (!range) {
-    return false;
-  }
-  if (range.font.endsWith("_bold") && range.start > BOLD_MAX_CODEPOINT) {
-    return false;
-  }
-  return !LOCAL_IDEOGRAPH_BLOCKS.some(
-    ([from, to]) => range.start >= from && range.start <= to
-  );
-};
-
-const keepSprite = (entryPath) =>
-  /^basics\/sprites(@2x)?\.(json|png)$/.test(entryPath);
-
-// `neutrino`, for one, sets country and state labels in bold - names in any
-// script, which would turn to tofu. Fail the build rather than ship that.
-const assertBoldStaysOnRefs = (name, style) => {
-  const offenders = style.layers
-    .filter((layer) =>
-      (layer.layout?.["text-font"] ?? []).some((font) => font.endsWith("_bold"))
-    )
-    .filter((layer) => layer.layout["text-field"] !== BOLD_TEXT_FIELD)
-    .map((layer) => layer.id);
-
-  if (offenders.length) {
-    throw new Error(
-      `Style "${name}" uses bold for ${offenders.join(", ")}, which can hold ` +
-        `names in any script. Raise BOLD_MAX_CODEPOINT to cover the full set ` +
-        `before shipping this style.`
-    );
-  }
-};
-
-// 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
-// a remote switch 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: `${ASSET_PATH}/fonts/{fontstack}/{range}.pbf`,
-  sprite: [{ id: "basics", url: `${ASSET_PATH}/sprites/basics/sprites` }],
-};
-
-const buildMapAssets = async () => {
-  const [fontArchive, spriteArchive] = await Promise.all([
-    cachedArchive("fonts", ARCHIVES.fonts),
-    cachedArchive("sprites", ARCHIVES.sprites),
-  ]);
-
-  await fs.emptyDir(outputDir);
-  await Promise.all([
-    fs.ensureDir(path.join(outputDir, "fonts")),
-    fs.ensureDir(path.join(outputDir, "sprites")),
-  ]);
-
-  await Promise.all([
-    extract({
-      file: fontArchive,
-      cwd: path.join(outputDir, "fonts"),
-      filter: keepGlyph,
-    }),
-    extract({
-      file: spriteArchive,
-      cwd: path.join(outputDir, "sprites"),
-      filter: keepSprite,
-    }),
-    // Both themes up front: dark is a real cartography, not an inverted raster.
-    ...[
-      ["light", colorful],
-      ["dark", eclipse],
-    ].map(([name, builder]) => {
-      const style = addLatinLabels(useTileJson(name, builder(styleOptions)));
-      assertBoldStaysOnRefs(name, style);
-      return writeFile(
-        path.join(outputDir, `${name}.json`),
-        JSON.stringify(style)
-      );
-    }),
-  ]);
-};
-
-// 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;
@@ -1,42 +0,0 @@
-// Adds the English name to labels whose local name is not in Latin script.
-// Shortbread tiles carry `name`, `name_en` and `name_de` only.
-
-const NAME = ["get", "name"];
-const NAME_EN = ["get", "name_en"];
-
-// Strings compare by code point: anything from Basic Latin up to Latin
-// Extended-B, digits and punctuation included.
-const IS_LATIN = ["<", NAME, "ɐ"];
-
-const ENGLISH_SCALE = 0.8;
-
-// Streets are line-placed and cannot break lines.
-const withEnglish = (placement) =>
-  placement === "line"
-    ? ["concat", NAME, " (", NAME_EN, ")"]
-    : ["format", NAME, {}, "\n", {}, NAME_EN, { "font-scale": ENGLISH_SCALE }];
-
-const isNameLabel = (layer) =>
-  JSON.stringify(layer.layout?.["text-field"]) === JSON.stringify(NAME);
-
-export const addLatinLabels = (style) => ({
-  ...style,
-  layers: style.layers.map((layer) =>
-    isNameLabel(layer)
-      ? {
-          ...layer,
-          layout: {
-            ...layer.layout,
-            "text-field": [
-              "case",
-              IS_LATIN,
-              NAME,
-              ["!", ["has", "name_en"]],
-              NAME,
-              withEnglish(layer.layout["symbol-placement"]),
-            ],
-          },
-        }
-      : layer
-  ),
-});
@@ -1,55 +1,38 @@
 #!/usr/bin/env node
 // Script to print Babel plugins and Core JS polyfills that will be used by browserslist environments

-import { transformSync } from "@babel/core";
-import compilationTargets, {
-  getInclusionReasons,
-} from "@babel/helper-compilation-targets";
+import { version as babelVersion } from "@babel/core";
+import presetEnv from "@babel/preset-env";
+import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
+import { logPlugin } from "@babel/preset-env/lib/debug.js";
+import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
 import { babelOptions } from "./bundle.cjs";

 const detailsOpen = (heading) =>
  `<details>\n<summary><h4>${heading}</h4></summary>\n`;
 const detailsClose = "</details>\n";

-// Copied from @babel/preset-env's internal `logPlugin`, which Babel 8 no
-// longer exposes (the package rolls up into lib/index.js and exports nothing
-// but the preset). Prints an item with the targets that require it.
-const logPlugin = (item, targetVersions, list) => {
-  const filteredList = getInclusionReasons(item, targetVersions, list);
-  const support = list[item];
-  if (!support) {
-    console.log(`  ${item}`);
-    return;
-  }
-  let formattedTargets = `{`;
-  let first = true;
-  for (const target of Object.keys(filteredList)) {
-    if (!first) formattedTargets += `,`;
-    first = false;
-    formattedTargets += ` ${target}`;
-    if (support[target]) formattedTargets += ` < ${support[target]}`;
-  }
-  formattedTargets += ` }`;
-  console.log(`  ${item} ${formattedTargets}`);
+const dummyAPI = {
+  version: babelVersion,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  assertVersion: () => {},
+  caller: (callback) =>
+    callback({
+      name: "Dummy Bundler",
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true,
+      supportsExportNamespaceFrom: true,
+    }),
+  targets: () => ({}),
 };

-// Copied from babel-plugin-polyfill-corejs3's generated
-// corejs3ShippedProposalsList, which v1 no longer exposes (it is inlined in
-// the package's rolled-up bundle).
-const shippedProposalsList = new Set([
-  "esnext.array.group",
-  "esnext.array.group-to-map",
-  "esnext.iterator.zip",
-  "esnext.iterator.zip-keyed",
-  "esnext.symbol.metadata",
-]);
-
 // Generate filter function based on proposal/method inputs
 // Copied and adapted from babel-plugin-polyfill-corejs3/esm/index.mjs
 const polyfillFilter = (method, proposals, shippedProposals) => (name) => {
  if (proposals || method === "entry-global") return true;
-  if (shippedProposals && shippedProposalsList.has(name)) {
+  if (shippedProposals && shippedPolyfills.default.has(name)) {
    return true;
  }
  if (name.startsWith("esnext.")) {
@@ -64,9 +47,7 @@ const polyfillFilter = (method, proposals, shippedProposals) => (name) => {
 for (const buildType of ["Modern", "Legacy"]) {
  const browserslistEnv = buildType.toLowerCase();
  const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
-  const presetEnvOpts = babelOpts.presets.find(
-    (preset) => Array.isArray(preset) && preset[0] === "@babel/preset-env"
-  )?.[1];
+  const presetEnvOpts = babelOpts.presets[0][1];
  // Core-JS polyfills are injected by babel-plugin-polyfill-corejs3 (Babel 8
  // removed preset-env's `useBuiltIns`), so read its options here.
  const corejsOpts = babelOpts.plugins.find(
@@ -74,38 +55,22 @@ for (const buildType of ["Modern", "Legacy"]) {
      Array.isArray(plugin) && plugin[0] === "babel-plugin-polyfill-corejs3"
  )?.[1];

-  // Transforming an empty file with preset-env in debug mode logs the included
-  // plugins. The caller declares the same capabilities babel-loader does, so
-  // plugins gated on bundler support (e.g. transform-export-namespace-from)
-  // match the build.
-  presetEnvOpts.debug = true;
+  // Invoking preset-env in debug mode will log the included plugins
  console.log(detailsOpen(`${buildType} Build Babel Plugins`));
-  transformSync("", {
-    ...babelOpts,
-    configFile: false,
-    filename: "audit.js",
-    caller: {
-      name: "list-plugins-and-polyfills",
-      supportsStaticESM: true,
-      supportsDynamicImport: true,
-      supportsTopLevelAwait: true,
-      supportsExportNamespaceFrom: true,
-    },
+  presetEnv.default(dummyAPI, {
+    ...presetEnvOpts,
+    browserslistEnv,
+    debug: true,
  });
  console.log(detailsClose);

  // Manually log the Core-JS polyfills using the same technique
  if (corejsOpts) {
    console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
-    const targets = compilationTargets(babelOpts.targets, {
+    const targets = compilationTargets.default(babelOpts?.targets, {
      browserslistEnv,
    });
-    // `version` limits the list to modules the installed core-js ships,
-    // mirroring the provider's own filtering.
-    const polyfillList = coreJSCompat({
-      targets,
-      version: corejsOpts.version,
-    }).list.filter(
+    const polyfillList = coreJSCompat({ targets }).list.filter(
      polyfillFilter(
        corejsOpts.method,
        corejsOpts.proposals,
@@ -345,7 +345,10 @@ const createRspackConfig = ({
        "lit/directives/join$": "lit/directives/join.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
        "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": "lit/directives/keyed.js",
+        "lit/directives/keyed$": latestBuild
+          ? "lit/directives/keyed.js"
+          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
+        "lit/polyfill-support$": "lit/polyfill-support.js",
        "@lit-labs/virtualizer/layouts/grid":
          "@lit-labs/virtualizer/layouts/grid.js",
        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
@@ -15,6 +15,7 @@ import {
  saveTokens,
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
@@ -196,7 +197,8 @@ class HcCast extends LitElement {

  protected updated(changedProps: PropertyValues<this>) {
    super.updated(changedProps);
-    this.toggleAttribute(
+    toggleAttribute(
+      this,
      "hide-icons",
      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
    );
@@ -19,7 +19,6 @@ 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,
 };
@@ -102,11 +102,6 @@ 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 => ({
@@ -1,12 +1,6 @@
 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",
@@ -693,7 +693,9 @@ class HaGallery extends LitElement {
    haStyle,
    css`
      :host {
-        user-select: initial;
+        -ms-user-select: initial;
+        -webkit-user-select: initial;
+        -moz-user-select: initial;
        --ha-sidebar-width: 300px;
        --ha-sidebar-expanded-width: 300px;
        --ha-sidebar-expanded-item-width: 292px;
@@ -25,9 +25,6 @@ title: Button
  <ha-button appearance="filled">
    filled button
  </ha-button>
-  <ha-button appearance="outlined">
-    outlined button
-  </ha-button>

  <ha-button size="s">
    small
@@ -68,7 +65,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt

 | Name       | Type                                           | Default  | Description                                                                       |
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
-| appearance | "accent"/"filled"/"outlined"/"plain"           | "accent" | Sets the button appearance.                                                       |
+| appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
 | size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
@@ -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", "outlined", "plain"];
+const appearances = ["accent", "filled", "plain"];
 const variants = ["brand", "danger", "neutral", "warning", "success"];

@customElement("demo-components-ha-button")
@@ -29,50 +29,6 @@ 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;
@@ -85,8 +41,6 @@ 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 {
@@ -320,45 +274,6 @@ 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) =>
@@ -446,43 +361,6 @@ 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;
  };
@@ -565,9 +443,6 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre>
    .drag-handle {
      cursor: grab;
    }
-    .child::part(base) {
-      padding-inline-start: var(--ha-space-12);
-    }
  `;
 }

@@ -1,3 +1,4 @@
+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";
@@ -8,6 +9,7 @@ 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";
@@ -153,6 +155,9 @@ 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[] = [
@@ -163,6 +168,14 @@ 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:
@@ -261,13 +274,23 @@ class DemoHaSelectorReplacedDevice
                <ha-settings-row narrow slot=${slot}>
                  <span slot="heading">${sample.name}</span>
                  <span slot="description">${sample.description}</span>
-                  <ha-selector
-                    .hass=${this.hass}
-                    .selector=${sample.selector}
-                    .value=${this._values[idx]}
-                    .sampleIdx=${idx}
-                    @value-changed=${this._handleValueChanged}
-                  ></ha-selector>
+                  ${
+                    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-settings-row>
              `
            )}
@@ -424,23 +424,6 @@ 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: {
@@ -39,7 +39,6 @@ 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,
@@ -16,25 +16,6 @@ const ENTITIES = [
      duration: "0:05:00",
    },
  },
-  {
-    entity_id: "timer.active_timer",
-    state: "active",
-    attributes: {
-      friendly_name: "Active timer",
-      duration: "0:10:00",
-      remaining: "0:10:00",
-      finishes_at: new Date(Date.now() + 10 * 60 * 1000).toISOString(),
-    },
-  },
-  {
-    entity_id: "timer.paused_timer",
-    state: "paused",
-    attributes: {
-      friendly_name: "Paused timer",
-      duration: "0:10:00",
-      remaining: "0:03:21",
-    },
-  },
 ];

@customElement("demo-more-info-timer")
@@ -15,6 +15,7 @@ const ALL_FEATURES =
  VacuumEntityFeature.STOP +
  VacuumEntityFeature.RETURN_HOME +
  VacuumEntityFeature.FAN_SPEED +
+  VacuumEntityFeature.BATTERY +
  VacuumEntityFeature.STATUS +
  VacuumEntityFeature.LOCATE +
  VacuumEntityFeature.CLEAN_SPOT +
@@ -27,6 +28,8 @@ 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",
@@ -38,6 +41,8 @@ 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",
@@ -53,7 +58,10 @@ const ENTITIES = [
        VacuumEntityFeature.START +
        VacuumEntityFeature.PAUSE +
        VacuumEntityFeature.STOP +
-        VacuumEntityFeature.RETURN_HOME,
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.BATTERY,
+      battery_level: 23,
+      battery_icon: "mdi:battery-20",
      status: "Returning to dock",
    },
  },
@@ -88,6 +96,8 @@ 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",
@@ -42,14 +42,14 @@
    "@babel/runtime": "8.0.0",
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.11.0",
+    "@codemirror/commands": "6.10.4",
    "@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.9",
+    "@codemirror/view": "6.43.8",
    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "7.6.0",
@@ -75,8 +75,6 @@
    "@lit/context": "1.1.6",
    "@lit/reactive-element": "2.1.2",
    "@lit/task": "1.0.3",
-    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
-    "@maplibre/maplibre-gl-leaflet": "0.1.4",
    "@material/mwc-formfield": "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",
@@ -90,33 +88,33 @@
    "@vibrant/color": "4.0.4",
    "@vvo/tzdb": "6.198.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
-    "barcode-detector": "3.2.2",
+    "@webcomponents/webcomponentsjs": "2.8.0",
+    "barcode-detector": "3.2.1",
    "cally": "0.9.2",
    "color-name": "2.1.1",
    "comlink": "4.4.2",
    "core-js": "3.50.0",
-    "cropperjs": "1.6.3",
+    "cropperjs": "1.6.2",
    "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.7.1",
+    "hls.js": "1.6.17",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.14",
-    "js-yaml": "5.4.1",
+    "intl-messageformat": "11.2.13",
+    "js-yaml": "5.2.3",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
    "leaflet.markercluster": "1.5.3",
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "maplibre-gl": "5.24.0",
-    "marked": "18.0.11",
+    "marked": "18.0.9",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -144,18 +142,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.3",
+    "@bundle-stats/plugin-webpack-filter": "4.22.2",
    "@eslint/js": "10.0.1",
    "@gfx/zopfli": "1.0.15",
-    "@html-eslint/eslint-plugin": "0.65.0",
-    "@lokalise/node-api": "16.4.0",
+    "@html-eslint/eslint-plugin": "0.64.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.3",
-    "@rspack/core": "2.2.1",
-    "@rspack/dev-server": "2.2.1",
+    "@rsdoctor/rspack-plugin": "1.6.1",
+    "@rspack/core": "2.1.8",
+    "@rspack/dev-server": "2.2.0",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.26",
    "@types/chromecast-caf-sender": "1.0.11",
@@ -166,19 +164,17 @@
    "@types/leaflet-draw": "1.0.13",
    "@types/leaflet.markercluster": "1.5.6",
    "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.5",
+    "@types/luxon": "3.7.4",
    "@types/qrcode": "1.5.6",
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@typescript/native": "npm:[email protected]",
-    "@versatiles/style": "5.13.1",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/coverage-v8": "4.1.10",
    "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.9.1",
+    "eslint": "10.8.1",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.17.1",
@@ -188,9 +184,9 @@
    "eslint-plugin-wc": "3.1.0",
    "fancy-log": "2.0.0",
    "fs-extra": "11.4.0",
-    "generate-license-file": "4.2.4",
+    "generate-license-file": "4.2.1",
    "glob": "13.0.6",
-    "globals": "17.11.0",
+    "globals": "17.9.0",
    "gulp": "5.0.1",
    "gulp-json-transform": "0.5.0",
    "gulp-rename": "2.1.0",
@@ -199,13 +195,12 @@
    "jsdom": "30.0.1",
    "jszip": "3.10.1",
    "license-checker-rseidelsohn": "5.0.1",
-    "lightningcss": "1.33.0",
-    "lint-staged": "17.4.1",
+    "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.2.0",
+    "minify-literals": "2.1.0",
    "pinst": "3.0.0",
    "prettier": "3.9.6",
    "rspack-manifest-plugin": "5.2.2",
@@ -215,9 +210,9 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.68.0",
+    "typescript-eslint": "8.67.0",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.11",
+    "vitest": "4.1.10",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -228,11 +223,12 @@
    "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"
  },
  "packageManager": "[email protected]",
  "volta": {
-    "node": "24.20.0"
+    "node": "24.19.0"
  }
 }
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260826.0"
+version      = "20260729.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -27,7 +27,6 @@ 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",
@@ -8,4 +8,4 @@ set -eu -o pipefail

 cd "$(dirname "$0")/.."

-./node_modules/.bin/gulp gen-device-classes
+./node_modules/.bin/gulp gen-numeric-device-classes
@@ -1,11 +0,0 @@
-#!/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
@@ -1,216 +0,0 @@
-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) {
-    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;
-  }
-}
@@ -1,70 +0,0 @@
-import type {
-  ReactiveController,
-  ReactiveControllerHost,
-} from "@lit/reactive-element/reactive-controller";
-import type { HassEntity } from "home-assistant-js-websocket";
-import { timerTimeRemaining } from "../../data/timer";
-
-/**
- * Tracks the live remaining time of a timer entity. While the timer is
- * active, the host is re-rendered every second with an updated
- * `timeRemaining`, computed from the entity's `finishes_at` attribute.
- *
- * The host must call `setStateObj` whenever its timer entity changes.
- */
-export class TimerRemainingTimeController implements ReactiveController {
-  public timeRemaining?: number;
-
-  private _host: ReactiveControllerHost;
-
-  private _stateObj?: HassEntity;
-
-  private _interval?: number;
-
-  constructor(host: ReactiveControllerHost) {
-    this._host = host;
-    host.addController(this);
-  }
-
-  public setStateObj(stateObj: HassEntity | undefined): void {
-    this._stateObj = stateObj;
-    this._startInterval();
-  }
-
-  public hostConnected(): void {
-    this._startInterval();
-  }
-
-  public hostDisconnected(): void {
-    this._clearInterval();
-  }
-
-  private _startInterval(): void {
-    this._clearInterval();
-    if (!this._stateObj) {
-      this.timeRemaining = undefined;
-      return;
-    }
-    this._calculateRemaining();
-
-    if (this._stateObj.state === "active") {
-      this._interval = window.setInterval(() => {
-        this._calculateRemaining();
-        this._host.requestUpdate();
-      }, 1000);
-    }
-  }
-
-  private _clearInterval(): void {
-    if (this._interval) {
-      clearInterval(this._interval);
-      this._interval = undefined;
-    }
-  }
-
-  private _calculateRemaining(): void {
-    this.timeRemaining = this._stateObj
-      ? timerTimeRemaining(this._stateObj)
-      : undefined;
-  }
-}
@@ -39,25 +39,6 @@ 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,
@@ -145,11 +145,16 @@ export const applyThemesOnElement = (
  element.__themes = { cacheKey, keys: newTheme?.keys };

  // Set and/or reset styles
-  for (const s in styles) {
-    if (s === null) {
-      element.style.removeProperty(s);
-    } else {
-      element.style.setProperty(s, styles[s]);
+  if (window.ShadyCSS) {
+    // Use ShadyCSS if available
+    window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles);
+  } else {
+    for (const s in styles) {
+      if (s === null) {
+        element.style.removeProperty(s);
+      } else {
+        element.style.setProperty(s, styles[s]);
+      }
    }
  }
 };
@@ -1,26 +1,13 @@
-import type { Map } from "leaflet";
-import type { MapBaseLayer } from "../map/base-layer";
-import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../map/base-layer";
+import type { Map, TileLayer } from "leaflet";

 // 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;
-    darkMode?: boolean;
-  }
-): Promise<LeafletMapSetup> => {
+  initialView?: { latitude: number; longitude: number; zoom?: number }
+): Promise<[Map, LeafletModuleType, TileLayer]> => {
  if (!mapElement.parentNode) {
    throw new Error("Cannot setup Leaflet map on disconnected element");
  }
@@ -30,11 +17,7 @@ export const setupLeafletMap = async (

  await import("leaflet.markercluster");

-  const map = Leaflet.map(mapElement, {
-    minZoom: MAP_MIN_ZOOM,
-    maxZoom: MAP_MAX_ZOOM,
-  });
-  map.attributionControl.setPrefix("");
+  const map = Leaflet.map(mapElement);
  const style = document.createElement("link");
  style.setAttribute("href", "/static/images/leaflet/leaflet.css");
  style.setAttribute("rel", "stylesheet");
@@ -55,13 +38,21 @@ export const setupLeafletMap = async (
    );
  }

-  // 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
-  );
+  const tileLayer = createTileLayer(Leaflet).addTo(map);

-  return { map, leaflet: Leaflet, baseLayer };
+  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,
+    }
+  );
@@ -0,0 +1,25 @@
+// Toggle Attribute Polyfill because it's too new for some browsers
+export const toggleAttribute = (
+  el: HTMLElement,
+  name: string,
+  force?: boolean
+) => {
+  if (force !== undefined) {
+    force = !!force;
+  }
+
+  if (el.hasAttribute(name)) {
+    if (force) {
+      return true;
+    }
+
+    el.removeAttribute(name);
+    return false;
+  }
+  if (force === false) {
+    return false;
+  }
+
+  el.setAttribute(name, "");
+  return true;
+};
@@ -33,10 +33,7 @@ const normalizeFilterArray = <T>(
 };

 export const generateEntityFilter = (
-  hass: Pick<
-    HomeAssistant,
-    "states" | "entities" | "devices" | "areas" | "floors"
-  >,
+  hass: HomeAssistant,
  filter: EntityFilter
 ): EntityFilterFunc => {
  const domains = filter.domain
@@ -304,9 +304,6 @@ 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",
  },
@@ -0,0 +1 @@
+export const webComponentsSupported = "attachShadow" in Element.prototype;
@@ -0,0 +1,50 @@
+/**
+ * ES5-compatible implementation of the keyed directive.
+ * Based on lit-html's keyed directive but written to avoid ES5 minification issues.
+ *
+ * This implementation avoids parameter destructuring in the update() method,
+ * which causes Terser with ecma: 5 to generate invalid references like `_k`.
+ *
+ * Used only for ES5 builds (legacy browsers). Modern builds use the original
+ * lit-html keyed directive.
+ *
+ * @see https://github.com/home-assistant/frontend/issues/28732
+ */
+import { directive, Directive } from "lit-html/directive.js";
+import { setCommittedValue } from "lit-html/directive-helpers.js";
+// eslint-disable-next-line lit/no-legacy-imports
+import { nothing } from "lit-html";
+import type { Part } from "lit-html/directive.js";
+
+class KeyedES5 extends Directive {
+  private _key: unknown = nothing;
+
+  render(k: unknown, v: unknown) {
+    this._key = k;
+    return v;
+  }
+
+  update(part: unknown, args: [unknown, unknown]) {
+    const k = args[0];
+    const v = args[1];
+    if (k !== this._key) {
+      // Clear the part before returning a value. The one-arg form of
+      // setCommittedValue sets the value to a sentinel which forces a
+      // commit the next render.
+      setCommittedValue(part as Part);
+      this._key = k;
+    }
+    return v;
+  }
+}
+
+/**
+ * Associates a renderable value with a unique key. When the key changes, the
+ * previous DOM is removed and disposed before rendering the next value, even
+ * if the value - such as a template - is the same.
+ *
+ * This is useful for forcing re-renders of stateful components, or working
+ * with code that expects new data to generate new HTML elements, such as some
+ * animation techniques.
+ */
+export const keyed = directive(KeyedES5);
@@ -1,251 +0,0 @@
-import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
-import type { Map as LeafletMap } from "leaflet";
-import type { setRTLTextPlugin, StyleSpecification } from "maplibre-gl";
-import type { LeafletModuleType } from "../dom/setup-leaflet-map";
-
-// Shortbread vector tiles from the OpenStreetMap Foundation. Only their tile
-// endpoint sends CORS headers, so the style, glyphs and sprites are ours to
-// serve - see build-scripts/gulp/map-assets.js. The credit comes from the
-// TileJSON rather than from here, deliberately: it follows whoever serves the
-// tiles.
-const VECTOR_STYLES = {
-  light: "/static/map/light.json",
-  dark: "/static/map/dark.json",
-} as const;
-
-// Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
-// worker, hence a URL rather than an import.
-const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
-
-// Fallback for browsers without WebGL2, which MapLibre needs even for raster,
-// so it stays a Leaflet tile layer. Still CARTO, and temporarily so: OSM's
-// raster blocks a browser that sends no Referer, and the only referrer a browser
-// can send is its origin, which identifies a Nabu Casa installation.
-const RASTER_TILE_URL = "https://basemaps.cartocdn.com/rastertiles/voyager";
-const CARTO_ATTRIBUTION =
-  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, ' +
-  '&copy; <a href="https://carto.com/attributions">CARTO</a>';
-
-// Browsers keep about 16 live WebGL contexts and drop the oldest, so a dashboard
-// full of map cards loses its first ones for good - nothing frees a slot for
-// MapLibre to reclaim. A transient loss does get restored, hence the grace.
-const CONTEXT_RESTORE_GRACE = 2000;
-
-// On the map, not the layer: only Leaflet tile layers report their own limits,
-// and marker clustering throws without a maximum. The floor is 1 because at
-// Leaflet zoom 0 the adapter drives MapLibre to -1, outside its range.
-export const MAP_MIN_ZOOM = 1;
-export const MAP_MAX_ZOOM = 20;
-
-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;
-};
-
-// Asset URLs are stored origin relative so they follow the instance's host, but
-// MapLibre rejects a relative sprite URL. The glyph URL is left alone: URL
-// encoding would mangle its {fontstack} and {range} placeholders.
-const loadStyle = async (url: string): Promise<StyleSpecification> => {
-  const style: StyleSpecification = await (await fetch(url)).json();
-  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;
-};
-
-// Global to MapLibre, and it throws when set twice.
-let rtlTextPluginRequested = false;
-const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
-  if (rtlTextPluginRequested) {
-    return;
-  }
-  rtlTextPluginRequested = true;
-  setPlugin(new URL(RTL_TEXT_PLUGIN_URL, location.href).href, true).catch(
-    () => {
-      // RTL labels stay reversed; everything else still renders.
-    }
-  );
-};
-
-const createVectorLayer = async (
-  createLayer: typeof maplibreGL,
-  leaflet: LeafletModuleType,
-  map: LeafletMap,
-  darkMode: boolean
-): Promise<MapBaseLayer | undefined> => {
-  let layer: ReturnType<typeof maplibreGL> | undefined;
-
-  try {
-    layer = createLayer({
-      style: await loadStyle(VECTOR_STYLES[darkMode ? "dark" : "light"]),
-      // Draws CJK, kana and hangul with a device font, which is why we ship a
-      // tenth of the glyph set. No referrer is set: the endpoint serves without
-      // one, and the only one a browser can send identifies the installation.
-      localIdeographFontFamily: "sans-serif",
-    });
-    // The plugin builds the MapLibre map in `onAdd`, so a refused context, a
-    // blocked worker or a rejected blob URL throws here. Keep it inside the
-    // guard or those lose the raster fallback.
-    layer.addTo(map);
-  } catch {
-    if (layer) {
-      try {
-        layer.remove();
-      } catch {
-        // May never have finished being added.
-      }
-    }
-    return undefined;
-  }
-
-  // Tracked apart because a failed request must roll back to what is displayed,
-  // not to the opposite of what it asked for - with several in flight those are
-  // different, and guessing wrong makes the next toggle a permanent no-op.
-  let appliedDarkMode = darkMode;
-  let requestedDarkMode = darkMode;
-  // Styles are fetched, so only the newest request may touch the map.
-  let latestRequest = 0;
-  let vector = true;
-
-  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);
-  };
-
-  const scheduleSwap = () => {
-    clearTimeout(fallbackTimeout);
-    // Backgrounding also drops the context, and there it comes back on return.
-    // Running the clock then would make switching apps enough to lose vector.
-    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);
-  });
-
-  return {
-    setDarkMode: (newDarkMode: boolean) => {
-      if (!vector || newDarkMode === requestedDarkMode) {
-        return;
-      }
-      requestedDarkMode = newDarkMode;
-      const request = ++latestRequest;
-
-      loadStyle(VECTOR_STYLES[newDarkMode ? "dark" : "light"])
-        .then((style) => {
-          if (request === latestRequest) {
-            appliedDarkMode = newDarkMode;
-            layer.getMaplibreMap()?.setStyle(style);
-          }
-        })
-        .catch(() => {
-          if (request === latestRequest) {
-            requestedDarkMode = appliedDarkMode;
-          }
-        });
-    },
-  };
-};
-
-const createRasterLayer = (
-  leaflet: LeafletModuleType,
-  map: LeafletMap
-): MapBaseLayer => {
-  leaflet
-    .tileLayer(
-      // These are the old retina tablets, and CARTO serves @2x - sharp tiles at
-      // the same request count, where `detectRetina` would fetch a zoom deeper
-      // at four times as many.
-      `${RASTER_TILE_URL}/{z}/{x}/{y}${leaflet.Browser.retina ? "@2x" : ""}.png`,
-      {
-        attribution: CARTO_ATTRIBUTION,
-        maxZoom: MAP_MAX_ZOOM,
-      }
-    )
-    .addTo(map);
-
-  return { setDarkMode: () => undefined };
-};
-
-export const createBaseLayer = async (
-  leaflet: LeafletModuleType,
-  map: LeafletMap,
-  darkMode: boolean
-): Promise<MapBaseLayer> => {
-  if (supportsWebGL2()) {
-    let vectorLayer: MapBaseLayer | undefined;
-    try {
-      const [{ maplibreGL: createLayer }, maplibre] = await Promise.all([
-        import("@maplibre/maplibre-gl-leaflet"),
-        import("maplibre-gl"),
-      ]);
-      ensureRTLTextPlugin(maplibre.setRTLTextPlugin);
-      vectorLayer = await createVectorLayer(
-        createLayer,
-        leaflet,
-        map,
-        darkMode
-      );
-    } catch {
-      // No chunk, no vector map - but still a map.
-    }
-    if (vectorLayer) {
-      return vectorLayer;
-    }
-  }
-  return createRasterLayer(leaflet, map);
-};
@@ -80,67 +80,6 @@ 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
@@ -152,7 +91,7 @@ const buildHistoryState = (
  return { ...state, from };
 };

-const performNavigation = async (path: string, options?: NavigateOptions) => {
+export const navigate = async (path: string, options?: NavigateOptions) => {
  const canProceed = await ensureDialogsClosed(Date.now());
  if (!canProceed) {
    return false;
@@ -188,28 +127,9 @@ const performNavigation = 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
@@ -222,9 +142,6 @@ 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());
@@ -239,5 +156,5 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
    return;
  }

-  await performNavigation(fallbackPath || "/", { replace: true });
+  await navigate(fallbackPath || "/", { replace: true });
 };
@@ -25,7 +25,6 @@ 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}`
@@ -1,5 +1,4 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
-import { deepEqual } from "../util/deep-equal";
 import {
  createQueryString,
  decodeQueryParams,
@@ -36,15 +35,6 @@ 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,
@@ -1,55 +0,0 @@
-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;
-}
-
-export interface CreateMoreInfoUrlData {
-  entityId: string;
-  view: MoreInfoView;
-}
-
-export const decodeMoreInfoUrl = (
-  search: SearchParamsSource
-): 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,
-  };
-};
-
-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);
-
-  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}`;
-};
@@ -1,37 +0,0 @@
-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;
-};
@@ -55,20 +55,17 @@ export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
  }

  const resultPromise = func(hass, ...args);
-  const cachePromise = resultPromise.then((result) => ({
-    result,
-    cacheKey: generateCacheKey?.(hass, result),
-  }));
-  anyHass[cacheKey] = cachePromise;
+  anyHass[cacheKey] = resultPromise;

-  cachePromise.then(
+  resultPromise.then(
    // When successful, set timer to clear cache
    (result) => {
-      anyHass[cacheKey] = result;
+      anyHass[cacheKey] = {
+        result,
+        cacheKey: generateCacheKey?.(hass, result),
+      };
      setTimeout(() => {
-        if (anyHass[cacheKey] === result) {
-          anyHass[cacheKey] = undefined;
-        }
+        anyHass[cacheKey] = undefined;
      }, cacheTime);
    },
    // On failure, clear cache right away
@@ -1,355 +0,0 @@
-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();
-    },
-  };
-};
@@ -3,27 +3,6 @@ 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.
@@ -41,29 +20,21 @@ export const sideTooltipPosition: TooltipPositionCallback = (
  const [viewW, viewH] = size.viewSize;
  const [tipW, tipH] = size.contentSize;

-  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
+  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 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];
-};
@@ -10,16 +10,12 @@ 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;
@@ -53,25 +49,6 @@ 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],
 >(
@@ -105,10 +82,7 @@ export function downSampleLineData<
      const pointData = getPointData(point);
      if (!Array.isArray(pointData)) continue;
      const x = Number(pointData[0]);
-      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);
+      const y = Number(pointData[1]);
      if (isNaN(x) || isNaN(y)) continue;

      const frameIndex = Math.floor(x / step);
@@ -146,34 +120,21 @@ export function downSampleLineData<
    const pointData = getPointData(point);
    if (!Array.isArray(pointData)) continue;
    const x = Number(pointData[0]);
-    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 y = Number(pointData[1]);
+    if (isNaN(x) || isNaN(y)) continue;

    const frameIndex = Math.floor(x / step);
    const frame = frames.get(frameIndex);
    if (!frame) {
-      frames.set(frameIndex, newFrame(point, x, y, undefined));
-    } else if (frame.hasValue) {
+      frames.set(frameIndex, {
+        minPoint: point,
+        minX: x,
+        minY: y,
+        maxPoint: point,
+        maxX: x,
+        maxY: y,
+      });
+    } else {
      // Match the original strict-less / strict-greater comparisons so the
      // first occurrence wins on ties.
      if (y < frame.minY) {
@@ -186,40 +147,18 @@ 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()) {
-    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);
-      }
+    // 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.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);
-      }
+    result.push(frame.minPoint as T);
+    if (frame.minX < frame.maxX) {
+      result.push(frame.maxPoint as T);
    }
  }

@@ -22,7 +22,6 @@ 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";
@@ -48,8 +47,6 @@ 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";

@@ -117,11 +114,6 @@ 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;

@@ -154,17 +146,6 @@ 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;
@@ -217,7 +198,6 @@ export class HaChartBase extends LitElement {
    while (this._listeners.length) {
      this._listeners.pop()!();
    }
-    this._disposeSonification();
    this.chart?.dispose();
    this.chart = undefined;
    this._originalZrFlush = undefined;
@@ -332,18 +312,6 @@ 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() };
@@ -369,9 +337,6 @@ 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 })}"
@@ -383,23 +348,8 @@ export class HaChartBase extends LitElement {
            height: this.height ? undefined : `${this._getDefaultHeight()}px`,
          })}
        >
-          <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 class="chart"></div>
        </div>
-        <div class="sonification-output"></div>
        ${this._renderLegend()}
        <div class="top-controls ${classMap({ small: this.smallControls })}">
          <slot name="search"></slot>
@@ -571,61 +521,6 @@ 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,
@@ -638,9 +533,6 @@ 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();
      }
@@ -1558,23 +1450,6 @@ 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);
@@ -328,7 +328,6 @@ 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;
@@ -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 { itemTooltipPosition } from "./chart-tooltip-position";
+import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
@@ -22,9 +22,6 @@ 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;
@@ -70,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement {
      <ha-chart-base
        .hass=${this.hass}
        .options=${this._chartOptions}
-        .height=${`${this.data.length * ROW_HEIGHT + GRID_BOTTOM}px`}
+        .height=${`${this.data.length * 30 + 30}px`}
        .data=${this._chartData as HaECSeries}
        small-controls
        @chart-click=${this._handleChartClick}
@@ -255,13 +252,13 @@ export class StateHistoryChartTimeline extends LitElement {
      },
      grid: {
        top: 10,
-        bottom: GRID_BOTTOM,
+        bottom: 30,
        left: rtl ? 1 : labelWidth,
        right: rtl ? labelWidth : 1,
      },
      tooltip: {
        renderMode: "html",
-        position: itemTooltipPosition,
+        position: sideTooltipPosition,
        confine: true,
        formatter: this._renderTooltip,
      },
@@ -163,15 +163,12 @@ 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
-          ? (start.getTime() + end.getTime()) / 2
-          : start.getTime();
+          ? new Date((start.getTime() + end.getTime()) / 2)
+          : start;
      // Whether a gap needs to be drawn before this data point (line charts).
      const drawGap =
        isLineChart &&
@@ -185,10 +182,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!.getTime(), ...prevValues![i]!]);
-            d.data!.push([prevEndTime!.getTime(), null]);
+            d.data!.push([prevEndTime!, ...prevValues![i]!]);
+            d.data!.push([prevEndTime!, null]);
          }
-          d.data!.push([start.getTime(), ...dataValue!]);
+          d.data!.push([start, ...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]);
@@ -390,7 +387,7 @@ export function generateStatisticsChartData(
    const lastValues = prevValues;
    if (chartType === "line" && lastEndTime && lastValues) {
      statDataSets.forEach((d, i) => {
-        d.data!.push([lastEndTime.getTime(), ...lastValues[i]!]);
+        d.data!.push([lastEndTime, ...lastValues[i]!]);
      });
    }

@@ -426,7 +423,7 @@ export function generateStatisticsChartData(
              } else {
                val.push(currentValue);
              }
-              statDataSets[i].data!.push([now.getTime(), ...val]);
+              statDataSets[i].data!.push([now, ...val]);
              trackY(val[val.length - 1]);
            });
          }
@@ -446,7 +446,6 @@ 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,
@@ -1,32 +1,13 @@
-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, 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.
+// observed data range. We mirror how ECharts sizes its ticks: it splits the
+// range into ~5 intervals (its default `splitNumber`) and rounds that raw
+// interval to a "nice" 1/2/3/5×10ⁿ value, then reports the decimals that nice
+// interval needs. This matches the precision ECharts actually renders, so
+// labels are neither truncated to identical values nor padded with extra zeros.
 export function computeYAxisFractionDigits(
  min: number,
  max: number,
@@ -41,7 +22,13 @@ 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;
-  return getPrecision(nice(range / SPLIT_NUMBER, true));
+  const rawInterval = range / 5;
+  const exponent = Math.floor(Math.log10(rawInterval));
+  const mantissa = rawInterval / 10 ** exponent; // in [1, 10)
+  // Rounding the mantissa to a nice value only ever carries to the next power
+  // of ten (mantissa ≥ 7 → 10), which needs one fewer decimal.
+  const niceExponent = mantissa >= 7 ? exponent + 1 : exponent;
+  return Math.max(0, -niceExponent);
 }

 interface YAxisExtentValues {
@@ -57,116 +44,34 @@ const resolveYAxisBound = (
  values: YAxisExtentValues
 ): number | undefined => (typeof bound === "function" ? bound(values) : bound);

-// 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.
+// Wrap the Y-axis `min`/`max` options in callbacks so the tick-label precision
+// tracks the currently visible axis extent. ECharts re-invokes these callbacks
+// with the extent of the visible (zoom-filtered) data on every dataZoom, and
+// always before the label formatter runs, so recomputing the fraction digits
+// here keeps zoomed-in labels distinct. The callbacks return the original
+// bounds unchanged, so auto-scaling still applies when a bound is not set.
 export function createYAxisPrecisionBounds(options: {
  min?: YAxisBound;
  max?: YAxisBound;
  // Set for bar axes anchored at 0, so precision reflects the 0-based range.
-  // 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, 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,
-    };
-  };
-
+  const { min, max, includeZero, onFractionDigits } = options;
  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 bounds = resolveBounds(values);
+      const resolvedMin = resolveYAxisBound(min, values);
+      const resolvedMax = resolveYAxisBound(max, values);
+      const extentMin = resolvedMin ?? values.min;
+      const extentMax = resolvedMax ?? values.max;
      onFractionDigits(
-        computeYAxisFractionDigits(
-          bounds.min ?? values.min - bounds.gap,
-          bounds.max ?? values.max + bounds.gap,
-          includeZero
-        )
+        computeYAxisFractionDigits(extentMin, extentMax, includeZero)
      );
-      return bounds.min;
+      return resolvedMin;
    },
-    max: (values) => resolveBounds(values).max,
+    max: (values) => resolveYAxisBound(max, values),
  };
 }
@@ -117,7 +117,7 @@ export class HaDataTable extends LitElement {
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n?: ContextType<typeof internationalizationContext>;

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

  @property({ type: Object }) public columns: DataTableColumnContainer = {};

@@ -1158,11 +1158,6 @@ 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);
@@ -1235,13 +1230,16 @@ export class HaDataTable extends LitElement {
          display: none;
        }

+        /* Hide scrollbar for IE, Edge and Firefox */
        .mdc-data-table__header-row {
-          scrollbar-width: none;
+          -ms-overflow-style: none; /* IE and Edge */
+          scrollbar-width: none; /* Firefox */
        }

        .mdc-data-table__cell,
        .mdc-data-table__header-cell {
-          padding-inline: var(--_cell-padding-inline);
+          padding-right: 16px;
+          padding-left: 16px;
          min-width: 150px;
          align-self: center;
          overflow: hidden;
@@ -1261,8 +1259,14 @@ export class HaDataTable extends LitElement {

        .mdc-data-table__header-cell--checkbox,
        .mdc-data-table__cell--checkbox {
-          padding-inline-start: var(--_cell-padding-inline);
-          padding-inline-end: 0;
+          /* @noflip */
+          padding-left: 16px;
+          /* @noflip */
+          padding-right: 0;
+          /* @noflip */
+          padding-inline-start: 16px;
+          /* @noflip */
+          padding-inline-end: initial;
          width: 60px;
          min-width: 60px;
        }
@@ -1375,7 +1379,8 @@ 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-inline-start: var(--_cell-padding-inline);
+          padding-left: 16px;
+          padding-inline-start: 16px;
          padding-inline-end: initial;
        }

@@ -1383,7 +1388,8 @@ 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-inline-end: var(--_cell-padding-inline);
+          padding-right: 16px;
+          padding-inline-end: 16px;
          padding-inline-start: initial;
        }
        .mdc-data-table__cell--overflow-menu,
@@ -1510,17 +1516,11 @@ 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);
@@ -1,79 +0,0 @@
-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;
-  }
-}
@@ -2,6 +2,7 @@ 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";
@@ -10,7 +11,10 @@ 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 { formatShortDateTimeWithConditionalYear } from "../../common/datetime/format_date_time";
+import {
+  formatShortDateTime,
+  formatShortDateTimeWithYear,
+} 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";
@@ -38,67 +42,18 @@ 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 })
-  protected _i18n!: ContextType<typeof internationalizationContext>;
+  private _i18n!: ContextType<typeof internationalizationContext>;

  @state()
  @consume({ context: configContext, subscribe: true })
  @transform<HomeAssistantConfig, HassConfig>({
    transformer: ({ config }) => config,
  })
-  protected _hassConfig!: HassConfig;
+  private _hassConfig!: HassConfig;

  @property({ attribute: false }) public startDate!: Date;

@@ -188,7 +143,73 @@ export class HaDateRangePicker extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="container">
-        <div class="date-range-inputs">${this._renderField()}</div>
+        <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>
        ${
          this._pickerWrapperOpen || this._opened
            ? this._openedNarrow
@@ -227,60 +248,6 @@ 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;
@@ -336,12 +303,12 @@ export class HaDateRangePicker extends LitElement {
    this._opened = false;
  };

-  protected _handleNext(ev: MouseEvent): void {
+  private _handleNext(ev: MouseEvent): void {
    if (ev && ev.stopPropagation) ev.stopPropagation();
    this._shift(true);
  }

-  protected _handlePrev(ev: MouseEvent): void {
+  private _handlePrev(ev: MouseEvent): void {
    if (ev && ev.stopPropagation) ev.stopPropagation();
    this._shift(false);
  }
@@ -369,7 +336,7 @@ export class HaDateRangePicker extends LitElement {
    this._pickerWrapperOpen = false;
  }

-  protected _openPicker(ev?: Event) {
+  private _openPicker(ev?: Event) {
    if (this.disabled) {
      return;
    }
@@ -385,7 +352,7 @@ export class HaDateRangePicker extends LitElement {
    });
  }

-  protected _handleKeydown(ev: KeyboardEvent) {
+  private _handleKeydown(ev: KeyboardEvent) {
    if (ev.key === "Enter" || ev.key === " ") {
      ev.stopPropagation();
      this._openPicker(ev);
@@ -402,7 +369,56 @@ export class HaDateRangePicker extends LitElement {
    }
  }

-  static styles = [haDateRangePickerStyles];
+  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;
+      }
+    `,
+  ];
 }

 declare global {
@@ -8,7 +8,6 @@ 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);
@@ -12,6 +12,7 @@ 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";
@@ -179,15 +180,12 @@ export abstract class HaDeviceAutomationPicker<
      (a, idx) => value === `${a.device_id}_${idx}`
    );

-    const described =
-      automation ?? (this.value?.domain ? this.value : undefined);
-
-    const text = described
+    const text = automation
      ? this._localizeDeviceAutomation(
          this.hass.localize,
          this.hass.states,
          this._entityReg,
-          described
+          automation
        )
      : value === NO_AUTOMATION_KEY
        ? this.NO_AUTOMATION_TEXT
@@ -197,24 +195,29 @@ 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
-          ).catch(() => [] as T[])
+          await this._fetchDeviceAutomations(this.hass.callWS, this.deviceId)
        ).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.
+    // 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 (!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(
-        this._automations.length
-          ? this._automations[0]
-          : this._createNoAutomation(this.deviceId)
+        equivalent ||
+          (this._automations.length
+            ? this._automations[0]
+            : this._createNoAutomation(this.deviceId))
      );
    }
    this._renderEmpty = true;
@@ -1,4 +1,4 @@
-import { mdiSwapHorizontal } from "@mdi/js";
+import { mdiAlertOutline } 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";
@@ -22,7 +22,6 @@ 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";
@@ -105,14 +104,6 @@ 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> = {};
@@ -196,8 +187,7 @@ export class HaDevicePicker extends LitElement {
      value: string | undefined,
      _devices: HomeAssistant["devices"],
      compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[],
-      replacementDeviceIds: string[] | undefined
+      items: (DevicePickerItem | string)[]
    ) => {
      if (!value || !compositeSplits || this.hass.devices[value]) {
        return undefined;
@@ -213,11 +203,7 @@ 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) &&
-          (!replacementDeviceIds || replacementDeviceIds.includes(id))
-      );
+      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
      return { candidates, primaryId: split.primary_id };
    }
  );
@@ -264,26 +250,26 @@ export class HaDevicePicker extends LitElement {
  };

  private _valueRenderer = memoizeOne(
-    (configEntriesLookup: Record<string, ConfigEntry>, isReplaced: boolean) =>
+    (
+      configEntriesLookup: Record<string, ConfigEntry>,
+      replacementName: string | undefined
+    ) =>
      (value: string) => {
        const deviceId = value;
        const device = this.hass.devices[deviceId];

        if (!device) {
-          // 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) {
+          // 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) {
            return html`
              <ha-svg-icon
                slot="start"
-                .path=${mdiSwapHorizontal}
+                style="color: var(--warning-color)"
+                .path=${mdiAlertOutline}
              ></ha-svg-icon>
-              <span slot="headline"
-                >${this.hass.localize(
-                  "ui.components.device-picker.device_replaced"
-                )}</span
-              >
+              <span slot="headline">${replacementName}</span>
            `;
          }
          return html`<span slot="headline">${deviceId}</span>`;
@@ -413,23 +399,31 @@ export class HaDevicePicker extends LitElement {
            this.value,
            this.hass.devices,
            this._compositeSplits,
-            this._getItems(),
-            this.replacementDeviceIds
+            this._getItems()
          )
        : 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,
-      canReplace
+      replacementName
    );

    return html`
      <ha-generic-picker
-        .noUnknownState=${canReplace}
        .hass=${this.hass}
        .autofocus=${this.autofocus}
        .disabled=${this.disabled}
@@ -449,9 +443,14 @@ export class HaDevicePicker extends LitElement {
        .hideClearIcon=${this.hideClearIcon}
        .valueRenderer=${valueRenderer}
        .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.device-picker.unknown"
-        )}
+        .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")
+        }
        @value-changed=${this._valueChanged}
      >
      </ha-generic-picker>
@@ -465,52 +464,30 @@ export class HaDevicePicker extends LitElement {
  }) {
    const { candidates } = replacement;

-    // 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;
+    const replacementName =
+      candidates.length === 1
+        ? computeDeviceName(this.hass.devices[candidates[0]])
+        : undefined;

    return html`
      <ha-alert alert-type="warning">
        ${
-          replacementName && replacementDomain
+          replacementName
            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one_integration",
-                {
-                  device: replacementName,
-                  integration: domainToName(
-                    this.hass.localize,
-                    replacementDomain
-                  ),
-                }
+                "ui.components.device-picker.device_replaced_by_one",
+                { device: replacementName }
+              )
+            : this.hass.localize(
+                "ui.components.device-picker.device_replaced_by_multiple",
+                { count: candidates.length }
              )
-            : 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}
        >
-          ${
-            candidates.length === 1
-              ? this.hass.localize("ui.components.device-picker.replace_update")
-              : this.hass.localize("ui.components.device-picker.replace_choose")
-          }
+          ${this.hass.localize("ui.components.device-picker.replace_device")}
        </ha-button>
      </ha-alert>
    `;
@@ -521,8 +498,7 @@ export class HaDevicePicker extends LitElement {
      this.value,
      this.hass.devices,
      this._compositeSplits,
-      this._getItems(),
-      this.replacementDeviceIds
+      this._getItems()
    );
    if (!replacement?.candidates.length) {
      return;
@@ -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";
@@ -1,141 +0,0 @@
-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;
-  }
-}
@@ -293,7 +293,12 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
          );
          overflow: hidden;
          color: var(--primary-text-color);
+          -webkit-backdrop-filter: var(
+            --ha-dialog-surface-backdrop-filter,
+            none
+          );
          backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
+          -webkit-user-select: text;
          user-select: text;
        }

@@ -90,7 +90,7 @@ class HaAlert extends LitElement {
  static styles = css`
    .issue-type {
      position: relative;
-      padding: var(--ha-alert-padding, 8px);
+      padding: 8px;
      display: flex;
    }
    .icon {
@@ -12,7 +12,6 @@ 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 {
@@ -25,7 +24,6 @@ import {
 import {
  configContext,
  connectionContext,
-  internationalizationContext,
  statesContext,
 } from "../data/context";
 import { ConversationEntityFeature } from "../data/conversation";
@@ -35,13 +33,8 @@ 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";
@@ -74,17 +67,6 @@ 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;
@@ -119,13 +101,6 @@ 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"];
@@ -140,8 +115,6 @@ export class HaAssistChat extends LitElement {

  private _conversationId: string | null = null;

-  private _greetingLoadToken = 0;
-
  private _initialPromptSubmitted = false;

  private _audioRecorder?: AudioRecorder;
@@ -158,44 +131,17 @@ export class HaAssistChat extends LitElement {
      (changedProperties.has("pipeline") &&
        assistPipelineChanged(changedProperties.get("pipeline"), this.pipeline))
    ) {
-      this._conversation = [];
-      this._loadGreeting();
+      this._conversation = [
+        {
+          who: "hass",
+          text: this._localize("ui.dialogs.voice_command.how_can_i_help"),
+          thinking: "",
+          tool_calls: {},
+        },
+      ];
    }
  }

-  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 (
@@ -211,7 +157,7 @@ export class HaAssistChat extends LitElement {

  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);
-    if (changedProps.has("_conversation") && this._conversation.length) {
+    if (changedProps.has("_conversation")) {
      this._scrollMessagesBottom();
    }
    if (
@@ -1061,18 +1007,31 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre>
          position: absolute;
          top: 0;
          left: 0;
+          -webkit-animation: sk-bounce 2s infinite ease-in-out;
          animation: sk-bounce 2s infinite ease-in-out;
        }
        .double-bounce2 {
+          -webkit-animation-delay: -1s;
          animation-delay: -1s;
        }
+        @-webkit-keyframes sk-bounce {
+          0%,
+          100% {
+            -webkit-transform: scale(0);
+          }
+          50% {
+            -webkit-transform: scale(1);
+          }
+        }
        @keyframes sk-bounce {
          0%,
          100% {
            transform: scale(0);
+            -webkit-transform: scale(0);
          }
          50% {
            transform: scale(1);
+            -webkit-transform: scale(1);
          }
        }

@@ -0,0 +1,161 @@
+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;
+  }
+}
@@ -70,6 +70,7 @@ export class HaBadge extends LitElement {
        --ha-card-background,
        var(--card-background-color, white)
      );
+      -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
      backdrop-filter: var(--ha-card-backdrop-filter, none);
      border-width: var(--ha-card-border-width, 1px);
      box-shadow: var(--ha-card-box-shadow, none);
@@ -432,6 +432,13 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
          }
        }
        wa-drawer::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-scrim-backdrop-filter,
+            var(
+              --ha-dialog-scrim-backdrop-filter,
+              var(--dialog-backdrop-filter, none)
+            )
+          );
          backdrop-filter: var(
            --ha-bottom-sheet-scrim-backdrop-filter,
            var(
@@ -463,6 +470,10 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
              var(--card-background-color, var(--ha-color-surface-default))
            )
          );
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-surface-backdrop-filter,
+            var(--ha-dialog-surface-backdrop-filter, none)
+          );
          backdrop-filter: var(
            --ha-bottom-sheet-surface-backdrop-filter,
            var(--ha-dialog-surface-backdrop-filter, none)
@@ -34,8 +34,6 @@ 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";

@@ -59,7 +57,6 @@ export class HaButtonToggleGroup extends LitElement {
              .value=${button.value}
              @click=${this._handleClick}
              .title=${button.label}
-              .disabled=${this.disabled}
              .appearance=${this.active === button.value ? "accent" : "filled"}
            >
              ${
@@ -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"|"outlined"|"plain")} appearance - Sets the button appearance.
+ * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
 * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
 * @attr {boolean} disabled - Disables the button and prevents user interaction.
 */
@@ -199,7 +199,6 @@ 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) {
@@ -5,7 +5,6 @@ import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import { STATE_RUNNING } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
@@ -150,7 +149,6 @@ export class HaCameraStream extends LitElement {
          objectFit: this.fitMode,
        })}
        alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
-        @load=${this._handleImageLoad}
      />`;
    }

@@ -216,10 +214,6 @@ export class HaCameraStream extends LitElement {
    }
  }

-  private _handleImageLoad() {
-    fireEvent(this, "load");
-  }
-
  private _handleHlsStreams(ev: CustomEvent) {
    this._hlsStreams = ev.detail;
  }
@@ -13,6 +13,7 @@ export class HaCard extends LitElement {
        --ha-card-background,
        var(--card-background-color, white)
      );
+      -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
      backdrop-filter: var(--ha-card-backdrop-filter, none);
      box-shadow: var(--ha-card-box-shadow, none);
      box-sizing: border-box;
@@ -33,7 +33,6 @@ 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";
@@ -753,19 +752,6 @@ 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(
@@ -773,39 +759,31 @@ 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 (entityName) {
-      completionItems.push({
-        label: this._i18n!.localize(
-          "ui.components.entity.entity-picker.entity"
-        ),
-        value: entityName,
-      });
-    }
-
-    if (deviceName) {
+    if (context.device && context.device.name) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.device-picker.device"),
-        value: deviceName,
+        value: context.device.name,
      });
    }

-    if (areaName) {
+    if (context.area && context.area.name) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.area-picker.area"),
-        value: areaName,
+        value: context.area.name,
      });
    }

-    if (floorName) {
+    if (context.floor && context.floor.name) {
      completionItems.push({
        label: this._i18n!.localize("ui.components.floor-picker.floor"),
-        value: floorName,
+        value: context.floor.name,
      });
    }

@@ -101,7 +101,7 @@ export class HaControlSelect extends LitElement {

  private _handleOptionClick(ev: MouseEvent) {
    if (this.disabled) return;
-    const value = (ev.currentTarget as any).value;
+    const value = (ev.target 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.currentTarget as any).value;
+    const value = (ev.target 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.currentTarget as any).value;
+    const value = (ev.target as any).value;
    this._activeIndex = this.options?.findIndex(
      (option) => option.value === value
    );
@@ -323,6 +323,8 @@ export class HaControlSelect extends LitElement {
    .option .content span {
      display: block;
      width: 100%;
+      -webkit-hyphens: auto;
+      -moz-hyphens: auto;
      hyphens: auto;
    }
    :host([vertical]) {
@@ -1,216 +0,0 @@
-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;
-  }
-}
@@ -393,6 +393,10 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
        }

        wa-dialog::part(dialog) {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-surface-backdrop-filter,
+            none
+          );
          backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
          box-shadow: var(--dialog-box-shadow, var(--wa-shadow-l));
          color: var(--primary-text-color);
@@ -425,6 +429,10 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
        }

        wa-dialog::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-scrim-backdrop-filter,
+            var(--dialog-backdrop-filter, none)
+          );
          backdrop-filter: var(
            --ha-dialog-scrim-backdrop-filter,
            var(--dialog-backdrop-filter, none)
@@ -95,10 +95,6 @@ export class HaDrawer extends LitElement {
  }

  private _handleAfterHide(ev: Event) {
-    // Ignore wa-after-hide from nested Web Awesome components (e.g. tooltips)
-    if (ev.target !== ev.currentTarget) {
-      return;
-    }
    ev.stopPropagation();
    this.open = false;
    fireEvent(this, "hass-drawer-closed");
@@ -68,7 +68,6 @@ export class HaDurationInput extends LitElement {
                    { label: "-", iconPath: mdiMinusThick, value: "-" },
                  ]}
                  .active=${this._negative ? "-" : "+"}
-                  .disabled=${this.disabled}
                  @value-changed=${this._negativeChanged}
                ></ha-button-toggle-group>
              `
@@ -236,8 +235,8 @@ export class HaDurationInput extends LitElement {
    ev.stopPropagation();
    const negative = (ev.detail?.value || ev.target.value) === "-";
    this._toggleNegative = negative;
-    if (this.data) {
-      const value = { ...this.data };
+    const value = this.data;
+    if (value) {
      FIELDS.forEach((t) => {
        if (value[t]) {
          value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);
@@ -1,79 +0,0 @@
-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;
-  }
-}
@@ -63,6 +63,11 @@ class HaFaded extends LitElement {
    }
    .faded {
      cursor: pointer;
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        black 25%,
+        transparent 100%
+      );
      mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
      overflow-y: hidden;
    }
@@ -2,12 +2,7 @@ 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, state } from "lit/decorators";
-import { createRef, ref } from "lit/directives/ref";
-import {
-  FilterPanelController,
-  filterPanelStyles,
-} from "../common/controllers/filter-panel-controller";
+import { customElement, property, query, state } from "lit/decorators";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -39,11 +34,11 @@ export class HaFilterBlueprints extends LitElement {

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

+  @state() private _shouldRender = false;
+
  @state() private _blueprints?: Blueprints;

-  private _content = createRef<HTMLElement>();
-
-  private _panel = new FilterPanelController(this, this._content);
+  @query("ha-list") private _list?: HTMLElement;

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);
@@ -61,6 +56,7 @@ 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">
@@ -75,38 +71,29 @@ export class HaFilterBlueprints extends LitElement {
              : nothing
          }
        </div>
-      </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"
+        ${
+          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)}
                        >
-                          ${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
-      }
+                          ${blueprint.metadata.name || id}
+                        </ha-check-list-item>`
+                  )}
+                </ha-list>
+              `
+            : nothing
+        }
+      </ha-expansion-panel>
    `;
  }

@@ -117,6 +104,19 @@ 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,11 +191,17 @@ export class HaFilterBlueprints extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
-      filterPanelStyles,
      css`
-        ha-list {
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
          flex: 1;
-          min-height: 0;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
        }
        .header {
          display: flex;
@@ -8,14 +8,9 @@ import {
  mdiTag,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { createRef, ref } from "lit/directives/ref";
-import {
-  FilterPanelController,
-  filterPanelStyles,
-} from "../common/controllers/filter-panel-controller";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
@@ -52,9 +47,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {

  @state() private _categories: CategoryRegistryEntry[] = [];

-  private _content = createRef<HTMLElement>();
+  @state() private _shouldRender = false;

-  private _panel = new FilterPanelController(this, this._content);
+  @query("ha-list") private _list?: HTMLElement;

  protected hassSubscribeRequiredHostProps = ["scope"];

@@ -75,6 +70,7 @@ 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">
@@ -89,11 +85,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
              : nothing
          }
        </div>
-      </ha-expansion-panel>
-      ${
-        this._panel.showContent
-          ? html`
-              <div class="content" ${ref(this._content)}>
+        ${
+          this._shouldRender
+            ? html`
                <ha-list
                  @selected=${this._categorySelected}
                  class="ha-scrollbar"
@@ -164,17 +158,34 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                      </ha-list-item>`
                  )}
                </ha-list>
-                <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
+        }
+      </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>`
          : 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;
@@ -233,6 +244,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    });
  }

+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
  private _expandedChanged(ev) {
    this.expanded = ev.detail.expanded;
  }
@@ -272,8 +287,19 @@ 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;
@@ -299,8 +325,6 @@ 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);
@@ -315,6 +339,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
        .warning {
          color: var(--error-color);
        }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
      `,
    ];
  }
@@ -3,12 +3,7 @@ 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";
@@ -64,15 +59,13 @@ 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);

@@ -84,11 +77,26 @@ 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">
@@ -104,33 +112,31 @@ 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
-      }
    `;
  }

@@ -171,6 +177,10 @@ 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;
  }
@@ -261,43 +271,58 @@ export class HaFilterDevices extends LitElement {
    this._listElement?.clearSelection();
  }

-  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;
-      }
-    `,
-  ];
+  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;
+    }
+  `;
 }

 declare global {
@@ -1,16 +1,11 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { createRef, ref } from "lit/directives/ref";
+import { customElement, property, query, state } from "lit/decorators";
 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";
@@ -46,17 +41,18 @@ export class HaFilterDomains extends LitElement {

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

+  @state() private _shouldRender = false;
+
  @state() private _filter?: string;

-  private _content = createRef<HTMLElement>();
-
-  private _panel = new FilterPanelController(this, this._content);
+  @query("ha-list") private _list?: HTMLElement;

  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">
@@ -71,48 +67,46 @@ 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
-      }
    `;
  }

@@ -145,6 +139,22 @@ 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;
  }
@@ -189,18 +199,24 @@ export class HaFilterDomains extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
-      filterPanelStyles,
      css`
-        ha-list {
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
          flex: 1;
-          min-height: 0;
+          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;
        }
        .header ha-icon-button {
-          margin-inline-start: auto;
+          margin-inline-start: initial;
          margin-inline-end: 8px;
        }
        ha-check-list-item {
@@ -2,13 +2,8 @@ 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, state } from "lit/decorators";
-import { createRef, ref } from "lit/directives/ref";
+import { customElement, property, query, state } from "lit/decorators";
 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";
@@ -57,11 +52,11 @@ export class HaFilterEntities extends LitElement {

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

+  @state() private _shouldRender = false;
+
  @state() private _filter?: string;

-  private _content = createRef<HTMLElement>();
-
-  private _panel = new FilterPanelController(this, this._content);
+  @query("ha-list") private _list?: HTMLElement;

  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);
@@ -83,6 +78,7 @@ 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">
@@ -97,11 +93,9 @@ export class HaFilterEntities extends LitElement {
              : nothing
          }
        </div>
-      </ha-expansion-panel>
-      ${
-        this._panel.showContent
-          ? html`
-              <div class="content" ${ref(this._content)}>
+        ${
+          this._shouldRender
+            ? html`
                <ha-input-search
                  appearance="outlined"
                  .value=${this._filter}
@@ -124,13 +118,25 @@ export class HaFilterEntities extends LitElement {
                  >
                  </lit-virtualizer>
                </ha-list>
-              </div>
-            `
-          : nothing
-      }
+              `
+            : nothing
+        }
+      </ha-expansion-panel>
    `;
  }

+  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) =>
@@ -167,6 +173,10 @@ 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;
  }
@@ -245,11 +255,17 @@ export class HaFilterEntities extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
-      filterPanelStyles,
      css`
-        ha-list {
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
          flex: 1;
-          min-height: 0;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
        }
        .header {
          display: flex;
@@ -1,519 +0,0 @@
-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;
-  }
-}
@@ -4,13 +4,8 @@ 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";
@@ -69,12 +64,10 @@ 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);

@@ -93,6 +86,7 @@ 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">
@@ -113,11 +107,9 @@ export class HaFilterFloorAreas extends LitElement {
              : nothing
          }
        </div>
-      </ha-expansion-panel>
-      ${
-        this._panel.showContent
-          ? html`
-              <div class="content" ${ref(this._content)}>
+        ${
+          this._shouldRender
+            ? html`
                <ha-list-selectable
                  class="ha-scrollbar"
                  multi
@@ -162,10 +154,10 @@ export class HaFilterFloorAreas extends LitElement {
                    (area) => this._renderArea(area)
                  )}
                </ha-list-selectable>
-              </div>
-            `
-          : nothing
-      }
+              `
+            : nothing
+        }
+      </ha-expansion-panel>
    `;
  }

@@ -251,6 +243,19 @@ 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;
  }
@@ -342,11 +347,17 @@ export class HaFilterFloorAreas extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
-      filterPanelStyles,
      css`
-        ha-list-selectable {
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
          flex: 1;
-          min-height: 0;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
        }
        .header {
          display: flex;
@@ -1,16 +1,11 @@
 import type { SelectedDetail } from "@material/mwc-list";
 import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { createRef, ref } from "lit/directives/ref";
+import { customElement, property, query, state } from "lit/decorators";
 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";
@@ -49,11 +44,11 @@ export class HaFilterIntegrations extends LitElement {
      Object.values(manifests)
  );

+  @state() private _shouldRender = false;
+
  @state() private _filter?: string;

-  private _content = createRef<HTMLElement>();
-
-  private _panel = new FilterPanelController(this, this._content);
+  @query("ha-list") private _list?: HTMLElement;

  protected render() {
    const manifests = this._manifests
@@ -64,6 +59,7 @@ 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">
@@ -78,57 +74,67 @@ export class HaFilterIntegrations extends LitElement {
              : nothing
          }
        </div>
-      </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>`
+        ${
+          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
                        )}
-                      </ha-list>`
-                  : nothing
-              }
-            </div>`
-          : nothing
-      }
+                        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>
    `;
  }

+  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;
  }
@@ -207,11 +213,17 @@ export class HaFilterIntegrations extends LitElement {
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
-      filterPanelStyles,
      css`
-        ha-list {
+        :host {
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
          flex: 1;
-          min-height: 0;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
        }
        .header {
          display: flex;
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .20.0
 .19.0
				`@@ -0,0 +1 @@`
				`export const webComponentsSupported = "attachShadow" in Element.prototype;`