Exclude legend-hidden series when judging chart sonifiability

Drop the direct chart2music dependency
Skip chart sonification when there is nothing to navigate
2026-08-18 04:27:45 +00:00 · 2026-08-11 10:51:22 +03:00 · 2026-08-11 10:51:22 +03:00 · 2026-08-11 10:51:22 +03:00 · 2026-08-11 10:51:22 +03:00 · 2026-08-11 10:51:22 +03:00
255 changed files with 3628 additions and 10890 deletions
@@ -11,9 +11,6 @@ inputs:
  is-test:
    description: Set IS_TEST for the build (skips source maps and compression)
    default: "false"
-  rspack-cache:
-    description: rspack persistent cache mode ("readwrite", "readonly", or "" to disable)
-    default: ""

 runs:
  using: composite
@@ -24,4 +21,3 @@ runs:
      env:
        GITHUB_TOKEN: ${{ inputs.github-token }}
        IS_TEST: ${{ inputs.is-test }}
-        RSPACK_CACHE: ${{ inputs.rspack-cache }}
@@ -97,12 +97,10 @@ jobs:
        run: yarn run test
  build:
    name: Build frontend
-    # Runs alongside lint and test rather than after them: the build only needs
-    # the dependency tree, and with the rspack cache it is no longer expensive
-    # enough to be worth serialising behind the other checks. The
-    # cancel-on-failure job below stops the run as soon as a check fails, so a
-    # broken pull request does not finish building.
-    needs: prepare-dependencies
+    needs:
+      - prepare-dependencies
+      - lint
+      - test
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
@@ -113,26 +111,12 @@ jobs:
        uses: ./.github/actions/setup
        with:
          node-modules-cache: true
-      # Read-only reuse of the rspack cache written by the nightly (see
-      # nightly.yaml). rspack itself decides what is still valid (version +
-      # buildDependencies + node_modules snapshot), so the GHA key just restores
-      # the latest nightly cache; no fingerprint, and no save step (CI never
-      # writes the shared cache).
-      - name: Restore rspack cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}
-          restore-keys: |
-            rspack-cache-${{ runner.os }}-
      - name: Build Application
        uses: ./.github/actions/build
        with:
          target: build-app
          github-token: ${{ secrets.GITHUB_TOKEN }}
          is-test: true
-          rspack-cache: readonly
      - name: Upload bundle stats
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
@@ -148,54 +132,3 @@ jobs:
          path: hass_frontend/
          if-no-files-found: error
          retention-days: 7
-
-  # Now that the checks run in parallel, a failing lint or test no longer stops
-  # the build from finishing on its own, so this watches them and cancels the
-  # whole run on the first failure.
-  #
-  # It is a separate job on purpose. Cancelling needs `actions: write`, and the
-  # other jobs check out the pull request and run its build scripts — handing
-  # them that scope would give PR-controlled code (or a compromised dependency)
-  # write access to Actions. This job never checks out the repository, so the
-  # elevated token stays away from PR code. It also cannot be a job that
-  # `needs` the checks: that would only start once they have all finished, which
-  # is exactly too late to cancel anything.
-  cancel-on-failure:
-    name: Cancel run on failure
-    needs: prepare-dependencies
-    runs-on: ubuntu-latest
-    permissions:
-      actions: write
-    timeout-minutes: 30
-    steps:
-      - name: Cancel the run when a check fails
-        env:
-          GH_TOKEN: ${{ github.token }}
-          REPO: ${{ github.repository }}
-          RUN_ID: ${{ github.run_id }}
-        run: |
-          watched='^(Lint and check format|Run tests|Build frontend)$'
-          while :; do
-            jobs=$(gh api "repos/$REPO/actions/runs/$RUN_ID/jobs?per_page=100" \
-              --paginate --jq '.jobs[] | [.name, .status, (.conclusion // "")] | @tsv' \
-              2>/dev/null || true)
-
-            failed=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && ($3 == "failure" || $3 == "timed_out") { print $1 }')
-            if [ -n "$failed" ]; then
-              echo "Cancelling the run, these checks failed:"
-              printf '%s\n' "$failed"
-              gh run cancel "$RUN_ID" --repo "$REPO" || true
-              exit 0
-            fi
-
-            found=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" '$1 ~ w' | wc -l)
-            running=$(printf '%s\n' "$jobs" | awk -F'\t' -v w="$watched" \
-              '$1 ~ w && $2 != "completed" { print $1 }')
-            if [ "$found" -ge 3 ] && [ -z "$running" ]; then
-              echo "All checks finished without failure"
-              exit 0
-            fi
-
-            sleep 15
-          done
@@ -32,12 +32,12 @@ jobs:
          persist-credentials: false

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6
+        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@5595ccaf912efad79be6eef63a5619ff05969be3 # v4.37.6
+        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
        with:
          category: "/language:javascript-typescript"
@@ -137,7 +137,6 @@ jobs:
        with:
          target: build-gallery
          github-token: ${{ secrets.GITHUB_TOKEN }}
-          is-test: true

      - name: Upload gallery build
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -38,11 +38,6 @@ jobs:
        run: ./script/translations_download
        env:
          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-          # The wheel only builds the app (build-app), which does not merge
-          # backend translations. Skipping the whole-project backend export (as
-          # the release does) keeps this off the build's critical path; the full
-          # translations artifact is produced in parallel by the job below.
-          SKIP_BACKEND_TRANSLATIONS: "1"

      - name: Bump version
        run: script/version_bump.js nightly
@@ -58,24 +53,9 @@ jobs:
          restore-keys: |
            compress-cache-${{ runner.os }}-

-      # The nightly writes the rspack persistent cache; CI reads it read-only
-      # (see ci.yaml). rspack invalidates internally (version + buildDependencies
-      # + node_modules snapshot), so the cache rolls forward daily and a single
-      # dependency bump keeps most of it warm instead of dropping the lineage.
-      - name: Restore rspack cache
-        id: rspack-cache
-        continue-on-error: true
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
-          restore-keys: |
-            rspack-cache-${{ runner.os }}-
-
      - name: Build nightly Python wheels
        env:
          COMPRESS_CACHE_DIR: ${{ github.workspace }}/.compress-cache
-          RSPACK_CACHE: readwrite
        run: |
          pip install build
          yarn install
@@ -84,7 +64,7 @@ jobs:
          rm -rf dist home_assistant_frontend.egg-info
          python3 -m build

-      # Not gated on the restore steps: a transient restore failure (they are
+      # Not gated on the restore step: a transient restore failure (it is
      # continue-on-error) must not stop us persisting a freshly built cache.
      - name: Save compression cache
        if: success()
@@ -94,13 +74,8 @@ jobs:
          path: .compress-cache
          key: compress-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}

-      - name: Save rspack cache
-        if: success()
-        continue-on-error: true
-        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: .rspack-cache
-          key: rspack-cache-${{ runner.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+      - name: Archive translations
+        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
@@ -109,31 +84,6 @@ jobs:
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

-  # The full translations (including the slow backend/core export) are only
-  # needed for the uploaded artifact, not the wheel, so they are downloaded in
-  # parallel here instead of blocking the build above.
-  translations:
-    name: Translations
-    runs-on: ubuntu-latest
-    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
-        with:
-          immutable: false
-
-      - name: Download translations
-        run: ./script/translations_download
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
-
      - name: Upload translations
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
@@ -7,7 +7,6 @@ dist/
 /hass_frontend/
 /translations/
 /.compress-cache/
-/.rspack-cache/
 # Composite action source, not build output
 !/.github/actions/build/

@@ -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": 585518,
-    "core": 57048,
-    "authorize": 552423,
-    "onboarding": 666818
+    "app": 595204,
+    "core": 57741,
+    "authorize": 576928,
+    "onboarding": 685964
  },
  "frontend-legacy": {
-    "app": 887384,
-    "core": 244482,
-    "authorize": 844995,
-    "onboarding": 1008816
+    "app": 861452,
+    "core": 258557,
+    "authorize": 834356,
+    "onboarding": 1001360
  }
 }
@@ -277,7 +277,7 @@ module.exports.config = {
    };
  },

-  gallery({ isProdBuild, latestBuild, isTestBuild }) {
+  gallery({ isProdBuild, latestBuild }) {
    return {
      name: "gallery" + nameSuffix(latestBuild),
      entry: {
@@ -287,7 +287,6 @@ module.exports.config = {
      publicPath: publicPath(latestBuild),
      isProdBuild,
      latestBuild,
-      isTestBuild,
      defineOverlay: {
        __DEMO__: true,
      },
@@ -252,7 +252,6 @@ gulp.task("rspack-prod-gallery", () =>
    createGalleryConfig({
      isProdBuild: true,
      latestBuild: true,
-      isTestBuild: env.isTestBuild(),
    })
  )
 );
@@ -1,6 +1,4 @@
-const fs = require("fs");
-
-const { existsSync } = fs;
+const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -18,61 +16,6 @@ const SafeWebpackBar = require("./safe-webpackbar.cjs");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");

-// Build-toolchain packages whose version changes the emitted bytes but which
-// are loader/compiler machinery, not modules in the build graph — so rspack's
-// node_modules snapshot cannot see them. Their versions are folded into the
-// persistent cache `version` so a toolchain upgrade invalidates the cache,
-// while ordinary runtime-dependency bumps (handled by the snapshot) do not.
-const TOOLCHAIN_PACKAGES = [
-  "@rspack/core",
-  "@babel/core",
-  "@babel/preset-env",
-  "babel-plugin-polyfill-corejs3",
-  "@babel/plugin-transform-runtime",
-  "@babel/plugin-transform-class-properties",
-  "@babel/plugin-transform-private-methods",
-  "@babel/runtime",
-  "babel-loader",
-  "core-js",
-  "terser",
-  "terser-webpack-plugin",
-  "browserslist",
-  "caniuse-lite",
-];
-
-// Our own build logic — the config, loaders and babel plugins. Their contents
-// (not their paths) go into the cache version, so a change invalidates the
-// cache the same way `buildDependencies` would, but without tying validity to
-// absolute paths — rspack compares buildDependencies by path, which breaks a
-// cache reused on another machine/checkout (a different workspace path).
-const CONFIG_FILES = [
-  __filename,
-  path.join(__dirname, "bundle.cjs"),
-  path.join(__dirname, "minify-template-literals-loader.cjs"),
-  path.join(__dirname, "lit-disable-dev-mode-loader.cjs"),
-  path.join(__dirname, "babel-plugins", "custom-polyfill-plugin.js"),
-  path.join(__dirname, "babel-plugins", "inline-constants-plugin.cjs"),
-];
-
-// Content hash of the toolchain versions and our own build files, used as the
-// persistent cache `version`. Everything here is path-independent so the cache
-// stays valid when reused on a different machine or checkout path.
-const cacheVersion = () => {
-  const parts = [
-    ...TOOLCHAIN_PACKAGES.map(
-      (pkg) => `${pkg}@${require(`${pkg}/package.json`).version}`
-    ),
-    ...CONFIG_FILES.map(
-      (file) => `${path.basename(file)}:${fs.readFileSync(file, "utf8")}`
-    ),
-  ];
-  return require("crypto")
-    .createHash("sha256")
-    .update(parts.join("\n"))
-    .digest("hex")
-    .slice(0, 16);
-};
-
 class LogStartCompilePlugin {
  ignoredFirst = false;

@@ -433,33 +376,6 @@ const createRspackConfig = ({
        ])
      ),
    },
-    // Persistent filesystem cache for production builds, opt-in per environment
-    // via RSPACK_CACHE ("readwrite" writes it, "readonly" only reads a warm
-    // cache — e.g. CI reusing the nightly-written one). Unset (releases, local,
-    // tests) = no cache.
-    ...(isProdBuild && process.env.RSPACK_CACHE
-      ? {
-          cache: {
-            type: "persistent",
-            // `name` is already unique per variant (frontend-modern/-legacy).
-            name,
-            // Content-based version (node major + toolchain versions + our own
-            // build files). Everything is path-independent, so the cache stays
-            // valid when reused on another machine/checkout. Runtime deps are
-            // deliberately absent — rspack's node_modules snapshot invalidates
-            // their modules per-package, so a single unrelated bump keeps the
-            // rest warm. buildDependencies is intentionally not used: rspack
-            // compares it by absolute path, which breaks cross-machine reuse.
-            version: `node${process.versions.node.split(".")[0]}-${cacheVersion()}`,
-            storage: {
-              type: "filesystem",
-              directory: path.resolve(paths.root_dir, ".rspack-cache"),
-            },
-            // CI reads the nightly-written cache but must not modify it.
-            readonly: process.env.RSPACK_CACHE === "readonly",
-          },
-        }
-      : {}),
    experiments: {
      outputModule: true,
    },
@@ -489,10 +405,8 @@ const createDemoConfig = ({
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));

-const createGalleryConfig = ({ isProdBuild, latestBuild, isTestBuild }) =>
-  createRspackConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild, isTestBuild })
-  );
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));

 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
@@ -14,7 +14,6 @@ const baseDevice = {
  name_by_user: null,
  disabled_by: null,
  configuration_url: null,
-  parent_device_id: null,
  created_at: 0,
  modified_at: 0,
 };
@@ -51,39 +50,4 @@ export const demoDevices: DeviceRegistryEntry[] = [
    primary_config_entry: "mock-sonos",
    entry_type: null,
  },
-  {
-    ...baseDevice,
-    id: "power-strip",
-    name: "Power strip",
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    config_entries: ["mock-hue"],
-    primary_config_entry: "mock-hue",
-    entry_type: null,
-  },
-  // Child devices (logical parts of the power strip). They carry the parent's
-  // inherited hardware fields, mirroring how resolveChildDevices fills them in
-  // from the WebSocket, and reference the parent via parent_device_id.
-  {
-    ...baseDevice,
-    id: "power-strip-outlet-1",
-    name: "Outlet 1",
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    config_entries: ["mock-hue"],
-    primary_config_entry: "mock-hue",
-    entry_type: null,
-    parent_device_id: "power-strip",
-  },
-  {
-    ...baseDevice,
-    id: "power-strip-outlet-2",
-    name: "Outlet 2",
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    config_entries: ["mock-hue"],
-    primary_config_entry: "mock-hue",
-    entry_type: null,
-    parent_device_id: "power-strip",
-  },
 ];
@@ -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",
@@ -17,9 +17,6 @@ const rspackConfigPath = fileURLToPath(
  new URL("./rspack.config.cjs", import.meta.url)
 );

-// Applies everywhere, including the files exempted from the history rule below.
-const restrictedSyntax = ["LabeledStatement", "WithStatement"];
-
 export default tseslint.config(
  js.configs.recommended,
  eslintConfigPrettier,
@@ -114,16 +111,7 @@ export default tseslint.config(
      "no-bitwise": "error",
      "no-console": "error",
      "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": [
-        "error",
-        ...restrictedSyntax,
-        {
-          selector:
-            "CallExpression[callee.property.name=/^(push|replace)State$/]",
-          message:
-            "Use navigate(), updateHistoryState() or replaceCurrentUrl() from common/navigate. History entries carry the app's own bookkeeping, which a raw pushState/replaceState drops.",
-        },
-      ],
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
      "wc/no-self-class": "off",

      // import-x rules
@@ -234,24 +222,6 @@ export default tseslint.config(
      ],
    },
  },
-  {
-    // These own history entries themselves: the navigation helpers, the dialog
-    // stack, the boot paths that run before the app has any state to keep, and
-    // the tests that fabricate entries to simulate a document load.
-    files: [
-      "src/common/navigate.ts",
-      "src/dialogs/make-dialog-manager.ts",
-      "src/state/url-sync-mixin.ts",
-      "src/panels/config/automation/add-automation-element-dialog.ts",
-      "src/entrypoints/core.ts",
-      "src/onboarding/**/*.ts",
-      "cast/**/*.ts",
-      "test/**/*.ts",
-    ],
-    rules: {
-      "no-restricted-syntax": ["error", ...restrictedSyntax],
-    },
-  },
  {
    files: ["src/util/recorder-worklet.js"],
    languageOptions: {
@@ -37,16 +37,6 @@ title: Button
 <ha-button size="s"> small </ha-button>
 ```

-### Icons in the `xs` size
-
-Avoid icons in `xs` buttons. At 24px the label carries the meaning on its own, and a
-16px glyph next to it adds visual noise without adding information.
-
-Use an icon only when the button needs to be recognized at a glance in a dense layout,
-and only when the glyph is a common one users can identify from its silhouette alone,
-such as close, add, or settings. A detailed or unfamiliar glyph is unreadable at this
-size and should be replaced by the label alone.
-
 ### API

 This component is based on the webawesome button component.
@@ -56,19 +56,6 @@ export class DemoHaButton extends LitElement {
                        `
                      )}
                    </div>
-                    <div>
-                      ${appearances.map(
-                        (appearance) => html`
-                          <ha-button
-                            .appearance=${appearance}
-                            .variant=${variant}
-                            size="xs"
-                          >
-                            ${titleCase(`${variant} ${appearance}`)}
-                          </ha-button>
-                        `
-                      )}
-                    </div>
                    <div>
                      ${appearances.map(
                        (appearance) => html`
@@ -87,7 +87,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
  {
    area_id: "backyard",
@@ -112,7 +111,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
  {
    area_id: null,
@@ -137,7 +135,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
 ];

@@ -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";
@@ -48,7 +50,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
  {
    area_id: "backyard",
@@ -73,7 +74,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
 ];

@@ -153,6 +153,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 +166,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 +272,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>
              `
            )}
@@ -100,7 +100,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
  {
    area_id: "backyard",
@@ -125,7 +124,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
  {
    area_id: null,
@@ -150,85 +148,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
-  },
-  {
-    area_id: "livingroom",
-    configuration_url: null,
-    config_entries: ["config_entry_1"],
-    config_entries_subentries: {},
-    connections: [],
-    disabled_by: null,
-    entry_type: null,
-    id: "device_power_strip",
-    identifiers: [["demo", "strip1"] as [string, string]],
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    model_id: null,
-    name_by_user: null,
-    name: "Power strip",
-    sw_version: null,
-    hw_version: null,
-    via_device_id: null,
-    serial_number: null,
-    labels: [],
-    created_at: 0,
-    modified_at: 0,
-    primary_config_entry: null,
-    parent_device_id: null,
-  },
-  // Child devices of the power strip. They have no area of their own and
-  // inherit the parent's area ("Livingroom"); the picker renders them indented
-  // under the parent with a tree connector.
-  {
-    area_id: null,
-    configuration_url: null,
-    config_entries: ["config_entry_1"],
-    config_entries_subentries: {},
-    connections: [],
-    disabled_by: null,
-    entry_type: null,
-    id: "device_outlet_1",
-    identifiers: [["demo", "outlet1"] as [string, string]],
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    model_id: null,
-    name_by_user: null,
-    name: "Outlet 1",
-    sw_version: null,
-    hw_version: null,
-    via_device_id: null,
-    serial_number: null,
-    labels: [],
-    created_at: 0,
-    modified_at: 0,
-    primary_config_entry: null,
-    parent_device_id: "device_power_strip",
-  },
-  {
-    area_id: null,
-    configuration_url: null,
-    config_entries: ["config_entry_1"],
-    config_entries_subentries: {},
-    connections: [],
-    disabled_by: null,
-    entry_type: null,
-    id: "device_outlet_2",
-    identifiers: [["demo", "outlet2"] as [string, string]],
-    manufacturer: "Acme",
-    model: "Smart Power Strip",
-    model_id: null,
-    name_by_user: null,
-    name: "Outlet 2",
-    sw_version: null,
-    hw_version: null,
-    via_device_id: null,
-    serial_number: null,
-    labels: [],
-    created_at: 0,
-    modified_at: 0,
-    primary_config_entry: null,
-    parent_device_id: "device_power_strip",
  },
 ];

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

@customElement("demo-lovelace-tile-card")
@@ -238,7 +238,6 @@ const createDeviceRegistryEntries = (
    created_at: 0,
    modified_at: 0,
    primary_config_entry: null,
-    parent_device_id: null,
  },
 ];

@@ -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",
@@ -101,13 +101,14 @@
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
    "echarts": "6.1.0",
+    "echarts-extension-chart2music": "0.1.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.5.0",
-    "hls.js": "1.7.0",
+    "hls.js": "1.6.17",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.3.0",
    "intl-messageformat": "11.2.13",
-    "js-yaml": "5.3.0",
+    "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",
@@ -151,8 +152,8 @@
    "@octokit/plugin-retry": "8.1.1",
    "@octokit/rest": "22.0.1",
    "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.2",
-    "@rspack/core": "2.1.10",
+    "@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",
@@ -186,7 +187,7 @@
    "fs-extra": "11.4.0",
    "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",
@@ -210,7 +211,7 @@
    "terser-webpack-plugin": "5.6.1",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.67.0",
+    "typescript-eslint": "8.66.0",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.10",
    "webpack-stats-plugin": "1.1.3",
@@ -223,6 +224,7 @@
    "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"
  },
@@ -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,
@@ -1,9 +1,8 @@
 import type { ReactiveElement } from "lit";
-import { getHistoryState, updateHistoryState } from "../navigate";
 import { throttle } from "../util/throttle";

 const throttleReplaceState = throttle((value) => {
-  updateHistoryState({ scrollPosition: value });
+  history.replaceState({ scrollPosition: value }, "");
 }, 300);

 export function restoreScroll(selector: string) {
@@ -40,8 +39,7 @@ export function restoreScroll(selector: string) {
      newDescriptor = {
        get(this: ReactiveElement) {
          return (
-            this[`__${String(propertyKey)}`] ||
-            getHistoryState()?.scrollPosition
+            this[`__${String(propertyKey)}`] || history.state?.scrollPosition
          );
        },
        set(this: ReactiveElement, value) {
@@ -2,31 +2,10 @@ import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import type { HomeAssistant } from "../../../types";

-/**
- * Return the effective area id of a device: a child device without an area of
- * its own inherits its parent's area (mirrors core's
- * async_get_effective_area_id). Nesting is single-level, so no recursion.
- */
-export const getDeviceAreaId = (
-  device: DeviceRegistryEntry,
-  devices: HomeAssistant["devices"]
-): string | undefined => {
-  if (device.area_id) {
-    return device.area_id;
-  }
-  if (device.parent_device_id) {
-    return devices[device.parent_device_id]?.area_id ?? undefined;
-  }
-  return undefined;
-};
-
 export const getDeviceArea = (
  device: DeviceRegistryEntry,
-  areas: HomeAssistant["areas"],
-  // Required so every caller resolves a child device's effective area
-  // consistently, see getDeviceAreaId.
-  devices: HomeAssistant["devices"]
+  areas: HomeAssistant["areas"]
 ): AreaRegistryEntry | undefined => {
-  const areaId = getDeviceAreaId(device, devices);
+  const areaId = device.area_id;
  return areaId ? areas[areaId] : undefined;
 };
@@ -8,7 +8,6 @@ import type {
 } from "../../../data/entity/entity_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
-import { getDeviceAreaId } from "./get_device_context";

 interface EntityContext {
  entity: EntityRegistryDisplayEntry | null;
@@ -47,11 +46,7 @@ export const getEntityAreaId = (
  if (!entry) return undefined;
  const deviceId = entry.device_id;
  const device = deviceId ? devices[deviceId] : undefined;
-  return (
-    entry.area_id ||
-    (device ? getDeviceAreaId(device, devices) : undefined) ||
-    undefined
-  );
+  return entry.area_id || device?.area_id || undefined;
 };

 export const getEntityEntryContext = (
@@ -65,8 +60,7 @@ export const getEntityEntryContext = (
  const entity = entities[entry.entity_id];
  const deviceId = entry?.device_id;
  const device = deviceId ? devices[deviceId] : undefined;
-  const areaId =
-    entry?.area_id || (device ? getDeviceAreaId(device, devices) : undefined);
+  const areaId = entry?.area_id || device?.area_id;
  const area = areaId ? areas[areaId] : undefined;
  const floorId = area?.floor_id;
  const floor = floorId ? floors[floorId] : undefined;
@@ -1,7 +1,6 @@
 import { closeAllDialogs } from "../dialogs/make-dialog-manager";
 import { fireEvent } from "./dom/fire_event";
 import { mainWindow } from "./dom/get_main_window";
-import { currentPath } from "./url/current-path";

 declare global {
  // for fire event
@@ -12,38 +11,12 @@ declare global {

 export interface NavigateOptions {
  replace?: boolean;
-  data?: Record<string, unknown>;
+  data?: any;
 }

 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;

-/**
- * State of the current history entry. Always read through this, the app writes
- * to the main window and a panel running in an iframe has its own history.
- */
-export const getHistoryState = (): any => mainWindow.history.state;
-
-/**
- * Merge into the current history entry's state, keeping what is already there.
- * Entries carry the app's own bookkeeping (`from`, `root`, dialog state), so
- * they must never be replaced wholesale.
- */
-export const updateHistoryState = (patch: Record<string, unknown>) => {
-  mainWindow.history.replaceState(
-    { ...mainWindow.history.state, ...patch },
-    ""
-  );
-};
-
-/**
- * Rewrite the URL of the current history entry without navigating and without
- * touching its state. For query parameter cleanup.
- */
-export const replaceCurrentUrl = (url: string) => {
-  mainWindow.history.replaceState(mainWindow.history.state, "", url);
-};
-
 /**
 * Stash a destination URL in the current history entry's state. If the page
 * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
@@ -51,7 +24,10 @@ export const replaceCurrentUrl = (url: string) => {
 * The current URL is not changed.
 */
 export const setRefreshUrl = (path: string) => {
-  updateHistoryState({ refreshUrl: path });
+  mainWindow.history.replaceState(
+    { ...mainWindow.history.state, refreshUrl: path },
+    ""
+  );
 };

 /**
@@ -80,17 +56,6 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
  return ensureDialogsClosed(timestamp);
 };

-const buildHistoryState = (
-  data: Record<string, unknown> | undefined,
-  from?: string
-) => {
-  const state = typeof data === "object" ? data : undefined;
-  if (from === undefined) {
-    return state ?? null;
-  }
-  return { ...state, from };
-};
-
 export const navigate = async (path: string, options?: NavigateOptions) => {
  const canProceed = await ensureDialogsClosed(Date.now());
  if (!canProceed) {
@@ -98,32 +63,37 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
  }
  const replace = options?.replace || false;

-  if (__DEMO__ && !path.includes("#")) {
-    // The demo routes with the hash instead of the pathname. Resolve the
-    // path like the browser would do for pushState, and keep the query
-    // parameters in the URL query instead of inside the hash.
-    const url = new URL(
-      path,
-      `${mainWindow.location.origin}${mainWindow.location.hash.substring(1)}`
-    );
-    path = `${mainWindow.location.pathname}${url.search}#${url.pathname}`;
-  }
-
-  const { history } = mainWindow;
-
-  if (replace) {
-    // A replaced entry keeps its predecessor, so it keeps `from`.
-    const { root, from } = history.state ?? {};
-    const data = root ? { root: true } : options?.data;
-    history.replaceState(buildHistoryState(data, from), "", path);
-  } else {
-    history.pushState(
-      buildHistoryState(options?.data, currentPath()),
+  if (__DEMO__) {
+    if (!path.includes("#")) {
+      // The demo routes with the hash instead of the pathname. Resolve the
+      // path like the browser would do for pushState, and keep the query
+      // parameters in the URL query instead of inside the hash.
+      const url = new URL(
+        path,
+        `${mainWindow.location.origin}${mainWindow.location.hash.substring(1)}`
+      );
+      path = `${mainWindow.location.pathname}${url.search}#${url.pathname}`;
+    }
+    if (replace) {
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root
+          ? { root: true }
+          : (options?.data ?? null),
+        "",
+        path
+      );
+    } else {
+      mainWindow.history.pushState(options?.data ?? null, "", path);
+    }
+  } else if (replace) {
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : (options?.data ?? null),
      "",
      path
    );
+  } else {
+    mainWindow.history.pushState(options?.data ?? null, "", path);
  }
-
  fireEvent(mainWindow, "location-changed", {
    replace,
  });
@@ -131,17 +101,8 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
 };

 /**
- * Whether the previous history entry is a page this app navigated away from.
- * `history.length` cannot answer this: a login redirect goes through
- * `location.assign`, which leaves /auth/authorize right behind the requested
- * page, and going back there would bounce the user out of the app.
- */
-export const canGoBack = (): boolean =>
-  mainWindow.history.state?.from !== undefined;
-
-/**
- * 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).
+ * Navigate back in history, with fallback to a default path if no history exists.
+ * This prevents a user from getting stuck when they navigate directly to a page with no history.
 */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
  const canProceed = await ensureDialogsClosed(Date.now());
@@ -149,12 +110,14 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
    return;
  }

-  // Read after closing dialogs: their history entries are popped by then, so
-  // this is the state of the page entry.
-  if (canGoBack()) {
-    mainWindow.history.back();
+  // Check if we have history to go back to
+  const { history } = mainWindow;
+  if (history.length > 1) {
+    history.back();
    return;
  }

-  await navigate(fallbackPath || "/", { replace: true });
+  // No history available, navigate to fallback path
+  const fallback = fallbackPath || "/";
+  navigate(fallback, { replace: true });
 };
@@ -1,10 +0,0 @@
-import { mainWindow } from "../dom/get_main_window";
-
-/**
- * The path of the page currently shown by the app. The demo routes with the
- * hash instead of the pathname, see navigate().
- */
-export const currentPath = (): string =>
-  __DEMO__
-    ? mainWindow.location.hash.substring(1)
-    : mainWindow.location.pathname;
@@ -1,64 +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;
-  hash: URLSearchParams;
-}
-
-export interface CreateMoreInfoUrlData {
-  entityId: string;
-  view: MoreInfoView;
-  hash?: URLSearchParams;
-}
-
-export const decodeMoreInfoUrl = (
-  search: SearchParamsSource,
-  hash = ""
-): MoreInfoUrlData => {
-  const params =
-    typeof search === "string"
-      ? new URLSearchParams(search)
-      : search instanceof URLSearchParams
-        ? search
-        : new URLSearchParams(search);
-  const entityId = params.get(ENTITY_ID_PARAM) || undefined;
-  const view = params.get(VIEW_PARAM) || undefined;
-
-  return {
-    entityId,
-    view: isMoreInfoView(view) ? view : undefined,
-    hash: new URLSearchParams(
-      __DEMO__ ? "" : hash.startsWith("#") ? hash.substring(1) : hash
-    ),
-  };
-};
-
-export const createMoreInfoUrl = (
-  base: string,
-  data: CreateMoreInfoUrlData
-): string => {
-  const url = new URL(base, window.location.origin);
-  url.searchParams.set(ENTITY_ID_PARAM, data.entityId);
-  url.searchParams.set(VIEW_PARAM, data.view);
-  if (!__DEMO__ && data.hash !== undefined) {
-    url.hash = data.hash.toString();
-  }
-
-  return `${url.pathname}${url.search}${url.hash}`;
-};
-
-export const removeMoreInfoUrl = (base: string): string => {
-  const url = new URL(base, window.location.origin);
-  url.searchParams.delete(ENTITY_ID_PARAM);
-  url.searchParams.delete(VIEW_PARAM);
-
-  return `${url.pathname}${url.search}${url.hash}`;
-};
@@ -0,0 +1,268 @@
+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;
+
+// Mirrors the extension's own reading of a point: it takes `value` as [x, y] and
+// drops anything whose y is not a real number. That rejects gap-only series, and
+// also value-first pairs like the energy device charts' [amount, "sensor.foo"].
+// 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;
+  }
+  let found = 0;
+  for (const raw of data) {
+    let y: unknown = raw;
+    if (Array.isArray(raw)) {
+      y = raw.length > 1 ? raw[1] : raw[0];
+    } else if (raw && typeof raw === "object") {
+      const { value } = raw as { value?: unknown };
+      y = Array.isArray(value)
+        ? value.length > 1
+          ? value[1]
+          : value[0]
+        : 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;
+  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);
+};
+
+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.
+  const isTimeAxis = xAxis?.type === "time";
+  const x = {
+    label:
+      xAxis?.name ||
+      localize(
+        isTimeAxis
+          ? "ui.components.history_charts.time"
+          : "ui.components.history_charts.category"
+      ),
+    // 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: 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();
+    },
+  };
+};
@@ -22,6 +22,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
@@ -47,6 +48,8 @@ import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
+import type { ChartSonification } from "./chart-sonification";
+import { canSonifyChart, sonifyChart } from "./chart-sonification";
 import { downSampleLineData } from "./down-sample";
 import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";

@@ -146,6 +149,17 @@ export class HaChartBase extends LitElement {

  @query(".chart") private _chartContainer?: HTMLDivElement;

+  @query(".sonification-output")
+  private _sonificationOutput?: HTMLDivElement;
+
+  private _sonification?: ChartSonification;
+
+  @state() private _sonificationLoading = false;
+
+  @state() private _sonificationUnavailable = false;
+
+  @state() private _sonificationFocusHeld = false;
+
  private _modifierPressed = false;

  private _isTouchDevice = "ontouchstart" in window;
@@ -198,6 +212,7 @@ export class HaChartBase extends LitElement {
    while (this._listeners.length) {
      this._listeners.pop()!();
    }
+    this._disposeSonification();
    this.chart?.dispose();
    this.chart = undefined;
    this._originalZrFlush = undefined;
@@ -312,6 +327,18 @@ export class HaChartBase extends LitElement {
    }
    if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
      chartOptions.series = this._getSeries();
+      // New data, or a series shown again, may well be convertible where the
+      // last set was not.
+      this._sonificationUnavailable = false;
+      // The connection is built from the series that had data at the time, so
+      // drop it and let the next focus rebuild it against the current set.
+      if (
+        this._sonification &&
+        (changedProps.has("_hiddenDatasets") ||
+          !canSonifyChart(this.data, this._hiddenDatasets))
+      ) {
+        this._disposeSonification();
+      }
    }
    if (changedProps.has("options")) {
      chartOptions = { ...chartOptions, ...this._createOptions() };
@@ -337,6 +364,9 @@ export class HaChartBase extends LitElement {
  }

  protected render() {
+    const sonifiable =
+      !this._sonificationUnavailable &&
+      canSonifyChart(this.data, this._hiddenDatasets);
    return html`
      <div
        class="container ${classMap({ "has-height": !!this.height })}"
@@ -348,8 +378,23 @@ export class HaChartBase extends LitElement {
            height: this.height ? undefined : `${this._getDefaultHeight()}px`,
          })}
        >
-          <div class="chart"></div>
+          <div
+            class="chart"
+            role=${ifDefined(sonifiable ? "application" : undefined)}
+            tabindex=${ifDefined(
+              sonifiable ? "0" : this._sonificationFocusHeld ? "-1" : undefined
+            )}
+            aria-label=${ifDefined(
+              sonifiable
+                ? this.hass.localize("ui.components.history_charts.chart")
+                : undefined
+            )}
+            aria-busy=${ifDefined(this._sonificationLoading ? "true" : undefined)}
+            @focus=${this._handleChartFocus}
+            @blur=${this._handleChartBlur}
+          ></div>
        </div>
+        <div class="sonification-output"></div>
        ${this._renderLegend()}
        <div class="top-controls ${classMap({ small: this.smallControls })}">
          <slot name="search"></slot>
@@ -521,6 +566,60 @@ 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,
+        onError: () => {
+          // Charts the extension cannot describe stay silent rather than
+          // dropping an error on someone who only pressed Tab.
+        },
+      });
+      if (!this.isConnected || !this.chart) {
+        sonification?.dispose();
+        return;
+      }
+      if (!sonification) {
+        // Nothing came back, so stop offering a focus stop that leads nowhere.
+        this._sonificationUnavailable = true;
+        return;
+      }
+      this._sonification = sonification;
+      if (this.shadowRoot?.activeElement === this._chartContainer) {
+        // Chart2Music reads its summary and key hints on focus, which already
+        // happened while it was still being fetched.
+        this._chartContainer!.dispatchEvent(new FocusEvent("focus"));
+      }
+    } catch (_err) {
+      // Never let a failure here escape a focus handler. The tab stop stays, so
+      // focusing the chart again retries.
+    } finally {
+      this._sonificationLoading = false;
+    }
+  }
+
+  private _handleChartBlur() {
+    this._sonificationFocusHeld = false;
+  }
+
+  private _disposeSonification() {
+    this._sonification?.dispose();
+    this._sonification = undefined;
+  }
+
  private _formatTimeLabel = (value: number | Date) =>
    formatTimeLabel(
      value,
@@ -533,6 +632,9 @@ export class HaChartBase extends LitElement {
    if (this._loading) return;
    this._loading = true;
    try {
+      // The connection holds a reference to the chart instance, so it cannot
+      // outlive it. Focusing the chart again reconnects.
+      this._disposeSonification();
      if (this.chart) {
        this.chart.dispose();
      }
@@ -1450,6 +1552,23 @@ export class HaChartBase extends LitElement {
      height: 100%;
      width: 100%;
    }
+    .chart:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+      border-radius: var(--ha-border-radius-sm);
+    }
+    /* Chart2Music renders its announcements here. It must stay in the layout for
+       screen readers to pick up the live region, so hide it visually only. */
+    .sonification-output {
+      position: absolute;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      width: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+    }
    .top-controls {
      position: absolute;
      top: var(--ha-space-4);
@@ -1,7 +1,6 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type {
  CustomSeriesOption,
  CustomSeriesRenderItem,
@@ -23,10 +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;
-// Rows with their name drawn above the bar need room for both.
-const ROW_HEIGHT_INSIDE_LABELS = 64;
-
@customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -43,14 +38,6 @@ export class StateHistoryChartTimeline extends LitElement {

  @property({ attribute: "show-names", type: Boolean }) public showNames = true;

-  /**
-   * Draw each row's name inside the plot, above its bar, instead of in a label
-   * column next to it. Gives long names the full width, at the cost of taller
-   * rows.
-   */
-  @property({ attribute: "inside-labels", type: Boolean })
-  public insideLabels = false;
-
  @property({ attribute: "click-for-more-info", type: Boolean })
  public clickForMoreInfo = true;

@@ -73,20 +60,6 @@ export class StateHistoryChartTimeline extends LitElement {

  @state() private _yWidth = 0;

-  // Inside labels are truncated to the plot, so their width follows the chart.
-  @state() private _width = 0;
-
-  // The host is an inline element, which a resize observer skips, so the chart
-  // itself is the one being observed.
-  @query("ha-chart-base") private _chartBase?: HTMLElement;
-
-  private _resizeController = new ResizeController<void>(this, {
-    target: null,
-    callback: (entries) => {
-      this._width = entries[0]?.contentRect.width ?? 0;
-    },
-  });
-
  private _chartTime: Date = new Date();

  protected render() {
@@ -94,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement {
      <ha-chart-base
        .hass=${this.hass}
        .options=${this._chartOptions}
-        .height=${`${this.data.length * (this.insideLabels ? ROW_HEIGHT_INSIDE_LABELS : ROW_HEIGHT) + 30}px`}
+        .height=${`${this.data.length * 30 + 30}px`}
        .data=${this._chartData as HaECSeries}
        small-controls
        @chart-click=${this._handleChartClick}
@@ -190,12 +163,6 @@ export class StateHistoryChartTimeline extends LitElement {
      )}<br />${formattedDuration}`;
  };

-  protected firstUpdated() {
-    if (this._chartBase) {
-      this._resizeController.observe(this._chartBase);
-    }
-  }
-
  public willUpdate(changedProps: PropertyValues) {
    if (
      this.isConnected &&
@@ -215,10 +182,8 @@ export class StateHistoryChartTimeline extends LitElement {
      changedProps.has("startTime") ||
      changedProps.has("endTime") ||
      changedProps.has("showNames") ||
-      changedProps.has("insideLabels") ||
      changedProps.has("paddingYAxis") ||
-      changedProps.has("_yWidth") ||
-      changedProps.has("_width")
+      changedProps.has("_yWidth")
    ) {
      this._createOptions();
    }
@@ -228,24 +193,14 @@ export class StateHistoryChartTimeline extends LitElement {
    const narrow = this.narrow;
    const showNames = this.chunked || this.showNames;
    const maxInternalLabelWidth = narrow ? 105 : 185;
-    const insideLabels = this.insideLabels;
-    const labelWidth =
-      showNames && !insideLabels
-        ? Math.max(this.paddingYAxis, this._yWidth)
-        : 0;
+    const labelWidth = showNames
+      ? Math.max(this.paddingYAxis, this._yWidth)
+      : 0;
    const labelMargin = 5;
    const rtl = computeRTL(
      this.hass.language,
      this.hass.translationMetadata.translations
    );
-    // Inside labels take no width of their own, but the plot still lines up
-    // with the line charts that share the y-axis padding.
-    const plotPadding = insideLabels ? this.paddingYAxis : labelWidth;
-    // Before the first resize observation the width is unknown, and a zero
-    // width would hide the labels instead of truncating them.
-    const insideLabelWidth = this._width
-      ? Math.max(0, this._width - plotPadding - labelMargin)
-      : undefined;
    this._chartOptions = {
      xAxis: {
        type: "time",
@@ -269,54 +224,37 @@ export class StateHistoryChartTimeline extends LitElement {
        axisLine: {
          show: false,
        },
-        axisLabel: insideLabels
-          ? {
-              show: showNames,
-              inside: true,
-              margin: 0,
-              // Sits on the row's baseline, lifted above the bar.
-              padding: [0, rtl ? 2 : 0, 14, rtl ? 0 : 2],
-              align: rtl ? "right" : "left",
-              verticalAlign: "bottom",
-              width: insideLabelWidth,
-              overflow: "truncate",
-              formatter: (id: string) =>
-                (this._chartData.find((d) => d.id === id)?.name as string) ??
-                "",
-              hideOverlap: true,
+        axisLabel: {
+          show: showNames,
+          width: labelWidth,
+          overflow: "truncate",
+          margin: labelMargin,
+          formatter: (id: string) => {
+            const label = this._chartData.find((d) => d.id === id)
+              ?.name as string;
+            const width = label
+              ? Math.min(
+                  measureTextWidth(label, 12) + labelMargin,
+                  maxInternalLabelWidth
+                )
+              : 0;
+            if (width > this._yWidth) {
+              this._yWidth = width;
+              fireEvent(this, "y-width-changed", {
+                value: this._yWidth,
+                chartIndex: this.chartIndex,
+              });
            }
-          : {
-              show: showNames,
-              width: labelWidth,
-              overflow: "truncate",
-              margin: labelMargin,
-              formatter: (id: string) => {
-                const label = this._chartData.find((d) => d.id === id)
-                  ?.name as string;
-                const width = label
-                  ? Math.min(
-                      measureTextWidth(label, 12) + labelMargin,
-                      maxInternalLabelWidth
-                    )
-                  : 0;
-                if (width > this._yWidth) {
-                  this._yWidth = width;
-                  fireEvent(this, "y-width-changed", {
-                    value: this._yWidth,
-                    chartIndex: this.chartIndex,
-                  });
-                }
-                return label;
-              },
-              hideOverlap: true,
-            },
+            return label;
+          },
+          hideOverlap: true,
+        },
      },
      grid: {
-        // Room for the first row's name above its bar.
-        top: insideLabels ? 20 : 10,
+        top: 10,
        bottom: 30,
-        left: rtl ? 1 : plotPadding,
-        right: rtl ? plotPadding : 1,
+        left: rtl ? 1 : labelWidth,
+        right: rtl ? labelWidth : 1,
      },
      tooltip: {
        renderMode: "html",
@@ -79,10 +79,6 @@ export class StateHistoryCharts extends LitElement {

  @property({ attribute: "show-names", type: Boolean }) public showNames = true;

-  /** Draw timeline row names above their bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean, reflect: true })
-  public insideLabels = false;
-
  @property({ attribute: "click-for-more-info", type: Boolean })
  public clickForMoreInfo = true;

@@ -231,7 +227,6 @@ export class StateHistoryCharts extends LitElement {
        .startTime=${this._computedStartTime}
        .endTime=${this._computedEndTime}
        .showNames=${this.showNames}
-        .insideLabels=${this.insideLabels}
        .names=${this.names}
        .narrow=${this.narrow}
        .chunked=${this.virtualize}
@@ -429,12 +424,6 @@ export class StateHistoryCharts extends LitElement {
      padding-top: 8px;
    }

-    /* Names inside the plot sit close to the chart above them, so the groups
-       need more room between them to stay apart. */
-    :host([inside-labels]) .entry-container.timeline:not(:first-child) {
-      margin-top: var(--ha-space-8);
-    }
-
    .entry-container:hover {
      z-index: 1;
    }
@@ -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);
@@ -1243,7 +1238,8 @@ export class HaDataTable extends LitElement {

        .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;
@@ -1263,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;
        }
@@ -1377,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;
        }

@@ -1385,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,
@@ -1512,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;
-  }
-}
@@ -42,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;

@@ -192,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
@@ -231,63 +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>`;
-  }
-
-  /** The selected range as text, with the year only when it is not this year. */
-  protected _formatRange(separator: string): string {
-    const format = (date: Date) =>
-      isThisYear(date)
-        ? formatShortDateTime(date, this._i18n.locale, this._hassConfig)
-        : formatShortDateTimeWithYear(
-            date,
-            this._i18n.locale,
-            this._hassConfig
-          );
-    return format(this.startDate) + separator + format(this.endDate);
-  }
-
  private _renderPicker() {
    if (!this._opened) {
      return nothing;
@@ -343,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);
  }
@@ -376,7 +336,7 @@ export class HaDateRangePicker extends LitElement {
    this._pickerWrapperOpen = false;
  }

-  protected _openPicker(ev?: Event) {
+  private _openPicker(ev?: Event) {
    if (this.disabled) {
      return;
    }
@@ -392,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);
@@ -409,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);
@@ -73,7 +73,7 @@ export class DialogDeviceReplaced
    ) =>
      candidates.map((deviceId) => {
        const device = devices[deviceId];
-        const area = device ? getDeviceArea(device, areas, devices) : undefined;
+        const area = device ? getDeviceArea(device, areas) : undefined;
        const configEntry = device?.primary_config_entry
          ? configEntryLookup?.[device.primary_config_entry]
          : undefined;
@@ -3,13 +3,11 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
-import { computeRTL } from "../../common/util/compute_rtl";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
  deviceComboBoxKeys,
@@ -28,9 +26,7 @@ import "../ha-alert";
 import "../ha-button";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
 import "../ha-svg-icon";
-import "../ha-tree-indicator";
 import { showDeviceReplacedDialog } from "./show-dialog-device-replaced";

 export type HaDevicePickerDeviceFilterFunc = (
@@ -132,7 +128,6 @@ export class HaDevicePicker extends LitElement {
        entityFilter,
        excludeDevices,
        value,
-        nested: true,
      })
  );

@@ -221,34 +216,6 @@ export class HaDevicePicker extends LitElement {
      this.value
    );

-  // The fuzzy search ranks matches by relevance, which would pull a child device
-  // above its parent (the parent often only matches through the lower-weighted
-  // child names). Restore the nested order from the full item list and recompute
-  // which child is last, so the tree connectors stay correct while searching.
-  private _searchFn: PickerComboBoxSearchFn<DevicePickerItem> = (
-    _search,
-    filteredItems,
-    allItems
-  ) => {
-    const matchedIds = new Set(filteredItems.map((item) => item.id));
-    const ordered = allItems.filter((item) => matchedIds.has(item.id));
-    // Keep any items the search added that are not part of the nested list
-    // (for example the "no items available" placeholder or additional items).
-    const orderedIds = new Set(ordered.map((item) => item.id));
-    const extras = filteredItems.filter((item) => !orderedIds.has(item.id));
-
-    return [
-      ...ordered.map((item, index) => {
-        if (!item.is_child) {
-          return item;
-        }
-        const nextItem = ordered[index + 1];
-        return { ...item, last: !nextItem || !nextItem.is_child };
-      }),
-      ...extras,
-    ];
-  };
-
  private _valueRenderer = memoizeOne(
    (
      configEntriesLookup: Record<string, ConfigEntry>,
@@ -275,7 +242,7 @@ export class HaDevicePicker extends LitElement {
          return html`<span slot="headline">${deviceId}</span>`;
        }

-        const area = getDeviceArea(device, this.hass.areas, this.hass.devices);
+        const area = getDeviceArea(device, this.hass.areas);

        const deviceName = device ? computeDeviceName(device) : undefined;
        const areaName = area ? computeAreaName(area) : undefined;
@@ -312,76 +279,46 @@ export class HaDevicePicker extends LitElement {
      }
  );

-  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => {
-    const rtl = computeRTL(
-      this.hass.language,
-      this.hass.translationMetadata.translations
-    );
-    return html`
-      <ha-combo-box-item
-        type="button"
-        style=${
-          item.is_child
-            ? "--md-list-item-leading-space: var(--ha-space-12);"
-            : ""
-        }
-      >
-        ${
-          item.is_child
-            ? html`<ha-tree-indicator
-                style=${styleMap({
-                  width: "var(--ha-space-12)",
-                  position: "absolute",
-                  top: "0",
-                  height: "100%",
-                  left: rtl ? undefined : "var(--ha-space-1)",
-                  right: rtl ? "var(--ha-space-1)" : undefined,
-                  transform: rtl ? "scaleX(-1)" : "",
-                })}
-                .end=${item.last}
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
+    <ha-combo-box-item type="button">
+      ${
+        item.domain
+          ? html`
+              <img
                slot="start"
-              ></ha-tree-indicator>`
-            : nothing
-        }
-        ${
-          item.domain
-            ? html`
-                <img
-                  slot="start"
-                  alt=""
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${brandsUrl(
-                    {
-                      domain: item.domain,
-                      type: "icon",
-                      darkOptimized: this.hass.themes.darkMode,
-                    },
-                    this.hass.auth.data.hassUrl
-                  )}
-                />
-              `
-            : nothing
-        }
+                alt=""
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${brandsUrl(
+                  {
+                    domain: item.domain,
+                    type: "icon",
+                    darkOptimized: this.hass.themes.darkMode,
+                  },
+                  this.hass.auth.data.hassUrl
+                )}
+              />
+            `
+          : nothing
+      }

-        <span slot="headline">${item.primary}</span>
-        ${
-          item.secondary
-            ? html`<span slot="supporting-text">${item.secondary}</span>`
-            : nothing
-        }
-        ${
-          item.domain_name
-            ? html`
-                <div slot="trailing-supporting-text" class="domain">
-                  ${item.domain_name}
-                </div>
-              `
-            : nothing
-        }
-      </ha-combo-box-item>
-    `;
-  };
+      <span slot="headline">${item.primary}</span>
+      ${
+        item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing
+      }
+      ${
+        item.domain_name
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${item.domain_name}
+              </div>
+            `
+          : nothing
+      }
+    </ha-combo-box-item>
+  `;

  protected render() {
    const placeholder =
@@ -438,8 +375,6 @@ export class HaDevicePicker extends LitElement {
        .value=${this.value}
        .rowRenderer=${this._rowRenderer}
        .getItems=${this._getItems}
-        .searchFn=${this._searchFn}
-        no-sort
        .hideClearIcon=${this.hideClearIcon}
        .valueRenderer=${valueRenderer}
        .searchKeys=${deviceComboBoxKeys}
@@ -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"}
            >
              ${
@@ -65,21 +65,6 @@ export class HaButton extends Button {
          box-shadow: var(--ha-button-box-shadow);
        }

-        :host([size="xs"]) .button {
-          --wa-form-control-height: var(
-            --ha-button-height,
-            var(--button-height, 24px)
-          );
-          font-size: var(--ha-font-size-m);
-          --wa-form-control-padding-inline: var(--ha-space-2);
-        }
-
-        /* A default 24px icon would fill the whole xs button. */
-        :host([size="xs"]) slot[name="start"]::slotted(*),
-        :host([size="xs"]) slot[name="end"]::slotted(*) {
-          --mdc-icon-size: 16px;
-        }
-
        :host([size="s"]) .button {
          --wa-form-control-height: var(
            --ha-button-height,
@@ -143,8 +143,7 @@ export class HaControlSelect extends LitElement {
            ? repeat(
                this.options,
                (option) => option.value,
-                (option, index) =>
-                  this._renderOption(option, index === this._tabbableIndex)
+                (option) => this._renderOption(option)
              )
            : nothing
        }
@@ -152,14 +151,7 @@ export class HaControlSelect extends LitElement {
    `;
  }

-  /* a radio group with no selection puts its first option in the tab sequence */
-  private get _tabbableIndex() {
-    const selectedIndex =
-      this.options?.findIndex((option) => option.value === this.value) ?? -1;
-    return selectedIndex === -1 ? 0 : selectedIndex;
-  }
-
-  private _renderOption(option: ControlSelectOption, tabbable: boolean) {
+  private _renderOption(option: ControlSelectOption) {
    const isSelected = this.value === option.value;

    return html`
@@ -170,7 +162,7 @@ export class HaControlSelect extends LitElement {
          selected: isSelected,
        })}
        role="radio"
-        tabindex=${tabbable ? "0" : "-1"}
+        tabindex=${isSelected ? "0" : "-1"}
        .value=${option.value}
        aria-checked=${isSelected ? "true" : "false"}
        aria-label=${ifDefined(option.ariaLabel ?? option.label)}
@@ -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;
-  }
-}
@@ -1,256 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import type { SelectedDetail } from "@material/mwc-list";
-import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
-import { stringCompare } from "../common/string/compare";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, statesContext } from "../data/context";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-check-list-item";
-import "./ha-expansion-panel";
-import "./ha-icon-button";
-import "./ha-list";
-import "./input/ha-input-search";
-import type { HaInputSearch } from "./input/ha-input-search";
-
-interface DeviceClassItem {
-  deviceClass: string;
-  name: string;
-}
-
-@customElement("ha-filter-device-classes")
-export class HaFilterDeviceClasses 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 }) public narrow = false;
-
-  @property({ type: Boolean, reflect: true }) public expanded = false;
-
-  @state() private _shouldRender = false;
-
-  @state() private _filter?: string;
-
-  @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">
-          ${this._localize("ui.components.filter-device-classes.caption")}
-          ${
-            this.value?.length
-              ? html`<div class="badge">${this.value?.length}</div>
-                  <ha-icon-button
-                    .path=${mdiFilterVariantRemove}
-                    @click=${this._clearFilter}
-                  ></ha-icon-button>`
-              : 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._deviceClasses(
-                      this._states,
-                      this._localize,
-                      this._i18n.locale.language,
-                      this._filter
-                    ),
-                    (item) => item.deviceClass,
-                    (item) =>
-                      html`<ha-check-list-item
-                        .value=${item.deviceClass}
-                        .selected=${(this.value || []).includes(item.deviceClass)}
-                      >
-                        ${item.name}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
-      </ha-expansion-panel>
-    `;
-  }
-
-  private _deviceClasses = memoizeOne(
-    (
-      states: ContextType<typeof statesContext>,
-      localize: LocalizeFunc,
-      language: string | undefined,
-      filter: string | undefined
-    ): DeviceClassItem[] => {
-      // The same device class can be used by multiple domains; label it with
-      // the first domain that has a translation for it.
-      const names = new Map<string, string | undefined>();
-      Object.values(states).forEach((stateObj) => {
-        const deviceClass = stateObj.attributes.device_class;
-        if (!deviceClass || names.get(deviceClass)) {
-          return;
-        }
-        names.set(
-          deviceClass,
-          localize(
-            `component.${computeStateDomain(stateObj)}.entity_component.${deviceClass}.name`
-          )
-        );
-      });
-
-      return Array.from(names.entries())
-        .map(([deviceClass, name]) => ({
-          deviceClass,
-          name: name || deviceClass,
-        }))
-        .filter(
-          (item) =>
-            !filter ||
-            item.deviceClass.toLowerCase().includes(filter) ||
-            item.name.toLowerCase().includes(filter)
-        )
-        .sort((a, b) => stringCompare(a.name, b.name, language));
-    }
-  );
-
-  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;
-  }
-
-  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const deviceClasses = this._deviceClasses(
-      this._states,
-      this._localize,
-      this._i18n.locale.language,
-      this._filter
-    );
-
-    const visible = new Set(deviceClasses.map((item) => item.deviceClass));
-    const preserved = (this.value || []).filter((d) => !visible.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => deviceClasses[i]?.deviceClass)
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
-
-    fireEvent(this, "data-table-filter-changed", {
-      value: this.value.length ? this.value : undefined,
-      items: undefined,
-    });
-  }
-
-  private _clearFilter(ev) {
-    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 [
-      haStyleScrollbar,
-      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :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;
-        }
-        .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;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-device-classes": HaFilterDeviceClasses;
-  }
-}
@@ -216,7 +216,7 @@ export class HaFilterDomains extends LitElement {
          align-items: center;
        }
        .header ha-icon-button {
-          margin-inline-start: auto;
+          margin-inline-start: initial;
          margin-inline-end: 8px;
        }
        ha-check-list-item {
@@ -1,73 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import "./chips/ha-assist-chip";
-import "./ha-svg-icon";
-
-/**
- * Chip that opens a filter pane, with a badge showing how many filters are
- * active.
- */
-@customElement("ha-filter-pane-chip")
-export class HaFilterPaneChip extends LitElement {
-  @property() public label = "";
-
-  /** SVG path of the leading icon. */
-  @property() public path?: string;
-
-  /** Number of active filters, shown as a badge when there is at least one. */
-  @property({ type: Number }) public count = 0;
-
-  @property({ type: Boolean }) public active = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-assist-chip
-        .label=${this.label}
-        .active=${this.active}
-        .disabled=${this.disabled}
-      >
-        ${
-          this.path
-            ? html`<ha-svg-icon slot="icon" .path=${this.path}></ha-svg-icon>`
-            : nothing
-        }
-      </ha-assist-chip>
-      ${this.count ? html`<div class="badge">${this.count}</div>` : nothing}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-block;
-      --ha-assist-chip-container-shape: 10px;
-    }
-
-    .badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      inset-inline-end: -4px;
-      inset-inline-start: initial;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0 2px;
-      color: var(--text-primary-color);
-      pointer-events: none;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane-chip": HaFilterPaneChip;
-  }
-}
@@ -1,183 +0,0 @@
-import { mdiFilterVariant, mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import { fireEvent } from "../common/dom/fire_event";
-import type { LocalizeFunc } from "../common/translations/localize";
-import { haStyleScrollbar } from "../resources/styles";
-import "./ha-adaptive-dialog";
-import "./ha-button";
-import "./ha-dialog-footer";
-import "./ha-filter-pane-chip";
-import "./ha-icon-button";
-
-/**
- * Filter pane for a filtered page: a column next to the content on wide
- * screens, a bottom sheet on narrow ones. Mirrors the filter pane of
- * `hass-tabs-subpage-data-table` for pages that are not a data table.
- *
- * The page keeps ownership of whether the pane is shown, so that it can also
- * open it from elsewhere (e.g. an empty state) and hide its own toolbar chip
- * while it is open.
- *
- * @slot - Filter panels, e.g. `ha-filter-domains`.
- */
-@customElement("ha-filter-pane")
-export class HaFilterPane extends LitElement {
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  /** Header label, defaults to "Filters". */
-  @property() public label?: string;
-
-  /** SVG path of the header chip icon. */
-  @property() public path = mdiFilterVariant;
-
-  /** Number of active filters, shown as a badge. */
-  @property({ type: Number }) public count = 0;
-
-  /**
-   * Number of results the current filters resolve to, shown on the narrow
-   * confirm button. Leave undefined when the page shows everything.
-   */
-  @property({ attribute: false }) public resultCount?: number;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  protected render() {
-    const label =
-      this.label ?? this._localize("ui.components.subpage-data-table.filters");
-
-    if (this.narrow) {
-      return html`
-        <ha-adaptive-dialog
-          open
-          flexcontent
-          .headerTitle=${label}
-          @closed=${this._close}
-        >
-          ${this._renderClearButton("headerActionItems")}
-          <div class="sheet-content">
-            <slot></slot>
-          </div>
-          <ha-dialog-footer slot="footer">
-            <ha-button slot="primaryAction" @click=${this._close}>
-              ${
-                this.resultCount === undefined
-                  ? this._localize("ui.common.close")
-                  : this._localize(
-                      "ui.components.subpage-data-table.show_results",
-                      { number: this.resultCount }
-                    )
-              }
-            </ha-button>
-          </ha-dialog-footer>
-        </ha-adaptive-dialog>
-      `;
-    }
-
-    return html`
-      <div class="header">
-        <ha-filter-pane-chip
-          active
-          .label=${label}
-          .path=${this.path}
-          .count=${this.count}
-          .disabled=${this.disabled}
-          @click=${this._close}
-        ></ha-filter-pane-chip>
-        ${this._renderClearButton()}
-      </div>
-      <div class="content ha-scrollbar">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  private _renderClearButton(slot?: string) {
-    if (!this.count) {
-      return nothing;
-    }
-    return html`
-      <ha-icon-button
-        slot=${ifDefined(slot)}
-        .path=${mdiFilterVariantRemove}
-        .disabled=${this.disabled}
-        .label=${this._localize("ui.components.subpage-data-table.clear_filter")}
-        @click=${this._clear}
-      ></ha-icon-button>
-    `;
-  }
-
-  private _close() {
-    fireEvent(this, "close-filter-pane");
-  }
-
-  private _clear() {
-    fireEvent(this, "clear-filter");
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          flex: 0 0 var(--ha-filter-pane-width, 320px);
-          width: var(--ha-filter-pane-width, 320px);
-          box-sizing: border-box;
-          overflow: hidden;
-          border-inline-end: 1px solid var(--divider-color);
-        }
-
-        /* The bottom sheet positions itself, so the pane takes no space. */
-        :host([narrow]) {
-          display: contents;
-        }
-
-        .header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: var(--ha-space-4);
-          box-sizing: border-box;
-          height: 56px;
-          flex-shrink: 0;
-          padding: 0 16px;
-          background: var(--primary-background-color);
-          border-bottom: 1px solid var(--divider-color);
-        }
-
-        .content,
-        .sheet-content {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-height: 0;
-          overflow-y: auto;
-        }
-
-        ha-adaptive-dialog {
-          --dialog-content-padding: 0;
-          /* Fixed height so the sheet does not resize while filtering. */
-          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane": HaFilterPane;
-  }
-  interface HASSDomEvents {
-    "close-filter-pane": undefined;
-  }
-}
@@ -1,25 +0,0 @@
-import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
-import type { Selector } from "../../data/selector";
-
-/**
- * Value a selector already displays when no field value is set.
- * Used when enabling an optional service/trigger/condition field.
- */
-export const getSelectorFallbackValue = (selector: Selector): unknown => {
-  if ("constant" in selector) {
-    return selector.constant?.value;
-  }
-  if ("boolean" in selector) {
-    return false;
-  }
-  if ("number" in selector) {
-    return selector.number?.min ?? 0;
-  }
-  if ("color_temp" in selector) {
-    if (selector.color_temp?.unit === "kelvin") {
-      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
-    }
-    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
-  }
-  return undefined;
-};
@@ -1,89 +1,11 @@
-import { animate } from "@lit-labs/motion";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
-
-const THUMB_SIZE = 40;
+import { customElement } from "lit/decorators";

@customElement("ha-icon-button-group")
 export class HaIconButtonGroup extends LitElement {
-  @state() private _thumbX = 0;
-
-  @state() private _thumbVisible = false;
-
-  @state() private _thumbBorderOnly = false;
-
-  // When the thumb appears, only fade it in at its new position instead of
-  // also sliding it from wherever it was last visible.
-  private _thumbAppearing = false;
-
-  private _observer = new MutationObserver(() => this._updateThumb());
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._observer.disconnect();
-  }
-
-  protected render() {
-    return html`
-      <div
-        class="thumb ${classMap({
-          visible: this._thumbVisible,
-          "border-only": this._thumbBorderOnly,
-        })}"
-        style=${styleMap({ left: `${this._thumbX}px` })}
-        ${animate(() => ({
-          properties: this._thumbAppearing ? ["opacity"] : ["left", "opacity"],
-          keyframeOptions: {
-            duration: this._animationDuration(),
-            easing: "ease-in-out",
-          },
-          skipInitial: true,
-        }))}
-      ></div>
-      <slot @slotchange=${this._handleSlotchange}></slot>
-    `;
-  }
-
-  protected updated() {
-    this._thumbAppearing = false;
-  }
-
-  private _animationDuration(): number {
-    return (
-      parseFloat(
-        getComputedStyle(this).getPropertyValue("--ha-animation-duration-fast")
-      ) || 150
-    );
-  }
-
-  private _handleSlotchange(ev: Event) {
-    this._observer.disconnect();
-    const slot = ev.target as HTMLSlotElement;
-    for (const el of slot.assignedElements()) {
-      this._observer.observe(el, {
-        attributes: true,
-        attributeFilter: ["selected", "disabled"],
-      });
-    }
-    // Positions are only valid once the slotted buttons are laid out.
-    requestAnimationFrame(() => this._updateThumb());
-  }
-
-  private _updateThumb() {
-    const selected = this.querySelector<HTMLElement>(
-      "ha-icon-button-toggle[selected]:not([disabled])"
-    );
-    if (!selected) {
-      this._thumbVisible = false;
-      return;
-    }
-    this._thumbAppearing = !this._thumbVisible;
-    this._thumbBorderOnly = selected.hasAttribute("border-only");
-    this._thumbX =
-      selected.offsetLeft + (selected.offsetWidth - THUMB_SIZE) / 2;
-    this._thumbVisible = true;
+  protected render(): TemplateResult {
+    return html`<slot></slot>`;
  }

  static styles = css`
@@ -99,32 +21,6 @@ export class HaIconButtonGroup extends LitElement {
      width: auto;
      padding: 0;
    }
-    /* The selected toggle's circle is drawn here so it can slide between
-       toggles; their own circles are suppressed below. */
-    .thumb {
-      position: absolute;
-      top: calc(50% - 20px);
-      opacity: 0;
-      width: 40px;
-      height: 40px;
-      border-radius: var(--ha-border-radius-circle);
-      background-color: var(
-        --ha-icon-button-group-thumb-color,
-        var(--primary-text-color)
-      );
-      box-sizing: border-box;
-    }
-    .thumb.visible {
-      opacity: 1;
-    }
-    .thumb.border-only {
-      background-color: transparent;
-      border: 2px solid
-        var(--ha-icon-button-group-thumb-color, var(--primary-text-color));
-    }
-    ::slotted(ha-icon-button-toggle) {
-      --ha-icon-button-toggle-thumb-opacity: 0;
-    }
    ::slotted(.separator) {
      background-color: rgba(var(--rgb-primary-text-color), 0.15);
      width: 1px;
@@ -44,10 +44,8 @@ export class HaIconButtonToggle extends HaIconButton {
        color: var(--primary-background-color);
        background-color: unset;
      }
-      /* ha-icon-button-group zeroes this so its sliding thumb draws the
-         circle instead. */
      :host([selected]:not([disabled])) ha-button::part(base)::before {
-        opacity: var(--ha-icon-button-toggle-thumb-opacity, 1);
+        opacity: 1;
      }
      ::slotted(*) {
        display: block;
@@ -472,9 +472,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
    if (disabled) {
      return;
    }
+    const newValue = value?.trim();
    const newTab = ev.ctrlKey || ev.metaKey;

-    this._fireSelectedEvents(value, index, newTab);
+    this._fireSelectedEvents(newValue, index, newTab);
  };

  private _fireSelectedEvents(value: string, index: number, newTab = false) {
@@ -81,7 +81,6 @@ export class HaChooseSelector extends LitElement {
        .required=${this.required}
        @value-changed=${this._handleValueChanged}
        .helper=${this.helper}
-        .localizeValue=${this.localizeValue}
      ></ha-selector>`;
  }

@@ -108,12 +107,7 @@ export class HaChooseSelector extends LitElement {
        : {
            [this._activeChoice!]: this.value,
          };
-    const choice = ev.detail?.value || ev.target.value;
-    this._activeChoice = choice;
-    if (choice && "constant" in this.selector.choose.choices[choice].selector) {
-      value[choice] =
-        this.selector.choose.choices[choice].selector.constant?.value;
-    }
+    this._activeChoice = ev.detail?.value || ev.target.value;
    fireEvent(this, "value-changed", {
      value: {
        ...value,
@@ -35,7 +35,6 @@ import {
 } from "../data/selector";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
-import { getSelectorFallbackValue } from "./ha-form/get-selector-fallback-value";
 import "./ha-checkbox";
 import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-icon-button";
@@ -800,8 +799,20 @@ export class HaServiceControl extends LitElement {

      let defaultValue = field?.default;

-      if (defaultValue == null && field?.selector) {
-        defaultValue = getSelectorFallbackValue(field.selector);
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "constant" in field.selector
+      ) {
+        defaultValue = field.selector.constant?.value;
+      }
+
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "boolean" in field.selector
+      ) {
+        defaultValue = false;
      }

      if (defaultValue != null) {
@@ -664,7 +664,6 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
          display: flex;
          flex-direction: column;
          overflow: hidden;
-          overscroll-behavior: contain;
          -ms-user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
@@ -1,269 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ensureArray } from "../common/array/ensure-array";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeDomain } from "../common/entity/compute_domain";
-import type { DataTableFiltersValue } from "../data/data_table_filters";
-import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
-import type { EntitySources } from "../data/entity/entity_sources";
-import type { HomeAssistant } from "../types";
-import "./ha-filter-device-classes";
-import "./ha-filter-domains";
-import "./ha-filter-integrations";
-import "./ha-target-picker";
-
-/**
- * Ways to narrow down the entities a target selection resolves to. Not to be
- * confused with `EntitySources`, which maps an entity to its integration.
- */
-export interface SourceFilters {
-  domains?: string[];
-  deviceClasses?: string[];
-  integrations?: string[];
-}
-
-const TARGET_KEYS = [
-  "floor_id",
-  "area_id",
-  "device_id",
-  "entity_id",
-  "label_id",
-] as const;
-
-/** Number of picked targets, no matter which type they are. */
-export const countTargets = (target: HassServiceTarget): number =>
-  TARGET_KEYS.reduce(
-    (count, key) => count + (target[key] ? ensureArray(target[key]).length : 0),
-    0
-  );
-
-/** Number of filters that have at least one option selected. */
-export const countSourceFilters = (filters: SourceFilters): number =>
-  Object.values(filters).filter((value) => value?.length).length;
-
-/**
- * Narrows entity IDs down by the selected filters: an entity is kept when it
- * matches every filter that has a selection. The integration filter is skipped
- * while the entity sources are still loading.
- */
-export const applySourceFilters = (
-  entityIds: string[],
-  filters: SourceFilters,
-  states: HomeAssistant["states"],
-  entitySources?: EntitySources
-): string[] => {
-  const domains = filters.domains?.length ? filters.domains : undefined;
-  const deviceClasses = filters.deviceClasses?.length
-    ? filters.deviceClasses
-    : undefined;
-  const integrations =
-    filters.integrations?.length && entitySources
-      ? filters.integrations
-      : undefined;
-
-  if (!domains && !deviceClasses && !integrations) {
-    return entityIds;
-  }
-
-  return entityIds.filter((entityId) => {
-    if (domains && !domains.includes(computeDomain(entityId))) {
-      return false;
-    }
-    if (deviceClasses) {
-      const deviceClass = states[entityId]?.attributes.device_class;
-      if (!deviceClass || !deviceClasses.includes(deviceClass)) {
-        return false;
-      }
-    }
-    if (integrations) {
-      const integration = entitySources![entityId]?.domain;
-      if (!integration || !integrations.includes(integration)) {
-        return false;
-      }
-    }
-    return true;
-  });
-};
-
-/**
- * Picker for what a page shows: the targets to include, narrowed down by
- * domain, device class and integration. Meant to be placed in an
- * `ha-filter-pane`.
- */
-@customElement("ha-sources-picker")
-export class HaSourcesPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public value: HassServiceTarget = {};
-
-  @property({ attribute: false }) public filters: SourceFilters = {};
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /** Explains what the page shows while no target is picked. */
-  @property() public description?: string;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  // Only one filter panel is expanded at a time, so that the expanded one can
-  // use the height that is left in the pane.
-  @state() private _expandedFilter?: keyof SourceFilters;
-
-  protected render() {
-    const noTargets = countTargets(this.value) === 0;
-
-    return html`
-      ${
-        this.description && noTargets
-          ? html`<div class="description">${this.description}</div>`
-          : nothing
-      }
-      <ha-target-picker
-        class=${classMap({ "no-padding-top": noTargets })}
-        .hass=${this.hass}
-        .value=${this.value}
-        .entityFilter=${this.entityFilter}
-        .disabled=${this.disabled}
-        @value-changed=${this._targetsChanged}
-      ></ha-target-picker>
-      <div
-        class=${classMap({ filters: true, expanded: !!this._expandedFilter })}
-      >
-        <ha-filter-domains
-          .value=${this.filters.domains}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "domains"}
-          @data-table-filter-changed=${this._domainsChanged}
-          @expanded-changed=${this._domainsExpanded}
-        ></ha-filter-domains>
-        <ha-filter-device-classes
-          .value=${this.filters.deviceClasses}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "deviceClasses"}
-          @data-table-filter-changed=${this._deviceClassesChanged}
-          @expanded-changed=${this._deviceClassesExpanded}
-        ></ha-filter-device-classes>
-        <ha-filter-integrations
-          .value=${this.filters.integrations}
-          .narrow=${this.narrow}
-          .expanded=${this._expandedFilter === "integrations"}
-          @data-table-filter-changed=${this._integrationsChanged}
-          @expanded-changed=${this._integrationsExpanded}
-        ></ha-filter-integrations>
-      </div>
-    `;
-  }
-
-  protected firstUpdated() {
-    // The filter panels label themselves with keys from the config panel.
-    this.hass.loadFragmentTranslation("config");
-  }
-
-  private _targetsChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: ev.detail.value || {} });
-  }
-
-  private _domainsChanged(ev: CustomEvent) {
-    this._filterChanged("domains", ev);
-  }
-
-  private _deviceClassesChanged(ev: CustomEvent) {
-    this._filterChanged("deviceClasses", ev);
-  }
-
-  private _integrationsChanged(ev: CustomEvent) {
-    this._filterChanged("integrations", ev);
-  }
-
-  private _filterChanged(key: keyof SourceFilters, ev: CustomEvent) {
-    ev.stopPropagation();
-    const value = ev.detail.value as DataTableFiltersValue;
-    fireEvent(this, "source-filters-changed", {
-      value: {
-        ...this.filters,
-        [key]: Array.isArray(value) && value.length ? value : undefined,
-      },
-    });
-  }
-
-  private _domainsExpanded(ev: CustomEvent) {
-    this._filterExpanded("domains", ev);
-  }
-
-  private _deviceClassesExpanded(ev: CustomEvent) {
-    this._filterExpanded("deviceClasses", ev);
-  }
-
-  private _integrationsExpanded(ev: CustomEvent) {
-    this._filterExpanded("integrations", ev);
-  }
-
-  private _filterExpanded(key: keyof SourceFilters, ev: CustomEvent) {
-    if (ev.detail.expanded) {
-      this._expandedFilter = key;
-    } else if (this._expandedFilter === key) {
-      this._expandedFilter = undefined;
-    }
-  }
-
-  static styles = css`
-    /* The sections are laid out by the pane, so that an expanded filter
-         panel can use the height that is left. */
-    :host {
-      display: contents;
-    }
-
-    .description {
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 92px;
-      margin: var(--ha-space-4) var(--ha-space-4) 0;
-      padding: 0 var(--ha-space-6);
-      border-radius: var(--ha-border-radius-lg);
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      text-align: center;
-      color: var(--secondary-text-color);
-    }
-
-    ha-target-picker {
-      display: block;
-      flex: none;
-      padding: var(--ha-space-4);
-    }
-
-    /* The description already spaces the picker from the pane header. */
-    ha-target-picker.no-padding-top {
-      padding-top: 0;
-    }
-
-    .filters {
-      display: flex;
-      flex-direction: column;
-      flex: 1 0 auto;
-      border-top: 1px solid var(--divider-color);
-    }
-
-    /* An expanded panel sizes itself to the space that is left over. */
-    .filters.expanded {
-      flex: 1 1 auto;
-      min-height: 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-sources-picker": HaSourcesPicker;
-  }
-  interface HASSDomEvents {
-    "source-filters-changed": { value: SourceFilters };
-  }
-}
@@ -41,6 +41,9 @@ import { domainToName } from "../data/integration";
 import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
+  areaMeetsFilter,
+  deviceMeetsFilter,
+  entityRegMeetsFilter,
  getTargetComboBoxItemType,
  type TargetItem,
  type TargetType,
@@ -63,6 +66,7 @@ import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
+import "./target-picker/ha-target-picker-value-chip";

 const SEPARATOR = "________";
 const CREATE_ID = "___create-new-entity___";
@@ -81,6 +85,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

  @property() public helper?: string;

+  @property({ type: Boolean, reflect: true }) public compact = false;
+
  @property({ attribute: false }) public createDomains?: string[];

  @property({ type: Boolean, attribute: "primary-entities-only" })
@@ -110,6 +116,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

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

+  @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
+
  @state() private _selectedSection?: TargetTypeFloorless;

  @state() private _replaceTarget?: TargetItem;
@@ -150,7 +158,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
        excludeDevices,
        value,
        idPrefix,
-        nested: true,
      })
  );

@@ -245,9 +252,119 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    Fuse.createIndex(keys, states);

  protected render() {
+    if (this.addOnTop) {
+      return html` ${this._renderPicker()} ${this._renderItems()} `;
+    }
    return html` ${this._renderItems()} ${this._renderPicker()} `;
  }

+  private _renderValueChips() {
+    const entityIds = this.value?.entity_id
+      ? ensureArray(this.value.entity_id)
+      : [];
+    const deviceIds = this.value?.device_id
+      ? ensureArray(this.value.device_id)
+      : [];
+    const areaIds = this.value?.area_id ? ensureArray(this.value.area_id) : [];
+    const floorIds = this.value?.floor_id
+      ? ensureArray(this.value.floor_id)
+      : [];
+    const labelIds = this.value?.label_id
+      ? ensureArray(this.value.label_id)
+      : [];
+
+    if (
+      !entityIds.length &&
+      !deviceIds.length &&
+      !areaIds.length &&
+      !floorIds.length &&
+      !labelIds.length
+    ) {
+      return nothing;
+    }
+
+    return html`
+      <div class="items">
+        ${
+          floorIds.length
+            ? floorIds.map(
+                (floor_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="floor"
+                    .itemId=${floor_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          areaIds.length
+            ? areaIds.map(
+                (area_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="area"
+                    .itemId=${area_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          deviceIds.length
+            ? deviceIds.map(
+                (device_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="device"
+                    .itemId=${device_id}
+                    .compositeSplits=${this._compositeSplits}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          entityIds.length
+            ? entityIds.map(
+                (entity_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="entity"
+                    .itemId=${entity_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+        ${
+          labelIds.length
+            ? labelIds.map(
+                (label_id) => html`
+                  <ha-target-picker-value-chip
+                    .hass=${this.hass}
+                    type="label"
+                    .itemId=${label_id}
+                    @remove-target-item=${this._handleRemove}
+                    @expand-target-item=${this._handleExpand}
+                  ></ha-target-picker-value-chip>
+                `
+              )
+            : nothing
+        }
+      </div>
+    `;
+  }
+
  private _renderValueGroups() {
    const entityIds = this.value?.entity_id
      ? ensureArray(this.value.entity_id)
@@ -361,7 +478,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
  }

  private _renderItems() {
-    return html` ${this._renderValueGroups()} `;
+    return html`
+      ${this.compact ? this._renderValueChips() : this._renderValueGroups()}
+    `;
  }

  private _renderPicker() {
@@ -536,6 +655,152 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    });
  }

+  private _handleExpand(ev: HASSDomEvent<HASSDomEvents["expand-target-item"]>) {
+    const type = ev.detail.type;
+    const itemId = ev.detail.id;
+    const newAreas: string[] = [];
+    const newDevices: string[] = [];
+    const newEntities: string[] = [];
+
+    if (type === "floor") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.floor_id === itemId &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          areaMeetsFilter(
+            area,
+            this.hass.devices,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+    } else if (type === "area") {
+      Object.values(this.hass.devices).forEach((device) => {
+        if (
+          device.area_id === itemId &&
+          !this.value!.device_id?.includes(device.id) &&
+          deviceMeetsFilter(
+            device,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.area_id === itemId &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            false,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (type === "device") {
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.device_id === itemId &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            false,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (type === "label") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.labels.includes(itemId) &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          areaMeetsFilter(
+            area,
+            this.hass.devices,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+      Object.values(this.hass.devices).forEach((device) => {
+        if (
+          device.labels.includes(itemId) &&
+          !this.value!.device_id?.includes(device.id) &&
+          deviceMeetsFilter(
+            device,
+            this.hass.entities,
+            this.deviceFilter,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.labels.includes(itemId) &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          entityRegMeetsFilter(
+            entity,
+            true,
+            this.includeDomains,
+            this.includeDeviceClasses,
+            this.hass.states,
+            this.entityFilter
+          )
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else {
+      return;
+    }
+    let value = this.value;
+    if (newEntities.length) {
+      value = this._addItems(value, "entity_id", newEntities);
+    }
+    if (newDevices.length) {
+      value = this._addItems(value, "device_id", newDevices);
+    }
+    if (newAreas.length) {
+      value = this._addItems(value, "area_id", newAreas);
+    }
+    value = this._removeItem(value, type, itemId);
+    fireEvent(this, "value-changed", { value });
+  }
+
  private _handleReplace(
    ev: HASSDomEvent<HASSDomEvents["replace-target-item"]>
  ) {
@@ -575,6 +840,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    this._replaceTargetAnchor = undefined;
  }

+  private _addItems(
+    value: this["value"],
+    type: string,
+    ids: string[]
+  ): this["value"] {
+    return {
+      ...value,
+      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
+    };
+  }
+
  private _removeItem(
    value: this["value"],
    type: TargetType,
@@ -725,28 +1001,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
      }

      if (!filterType || filterType === "device") {
-        const selectedDeviceIds = targetValue?.device_id
-          ? replacingDeviceId
-            ? ensureArray(targetValue.device_id).filter(
-                (deviceId) => deviceId !== replacingDeviceId
-              )
-            : ensureArray(targetValue.device_id)
-          : undefined;
-        // A selected parent device already targets its children, so exclude
-        // those children from the picker too (mirrors selecting a floor
-        // removing its areas from the list).
-        const excludeDeviceIds = selectedDeviceIds
-          ? [
-              ...selectedDeviceIds,
-              ...Object.values(this.hass.devices)
-                .filter(
-                  (device) =>
-                    device.parent_device_id !== null &&
-                    selectedDeviceIds.includes(device.parent_device_id)
-                )
-                .map((device) => device.id),
-            ]
-          : undefined;
        let deviceItems = this._getDevicesMemoized(
          this.hass,
          configEntryLookup,
@@ -754,41 +1008,26 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
          includeDeviceClasses,
          deviceFilter,
          entityFilter,
-          excludeDeviceIds,
+          targetValue?.device_id
+            ? replacingDeviceId
+              ? ensureArray(targetValue.device_id).filter(
+                  (deviceId) => deviceId !== replacingDeviceId
+                )
+              : ensureArray(targetValue.device_id)
+            : undefined,
          replacingDeviceId,
          `device${SEPARATOR}`
-        );
-        // getDevices already returns child devices nested under their parent
-        // with the top-level devices sorted; keep that order rather than
-        // re-sorting by label, which would separate children from their parent.
+        ).sort(this._sortBySortingLabel);

        if (searchTerm) {
-          // Keep the nested parent-then-children order (sort=false), matching
-          // the areas group; the default sorted search would reorder matches by
-          // relevance and pull children above their parent.
          deviceItems = this._filterGroup(
            "device",
            deviceItems,
            searchTerm,
-            deviceComboBoxKeys,
-            false
+            deviceComboBoxKeys
          );
        }

-        // Recompute the tree "last child" flag over the (possibly filtered)
-        // list so the last visible child of each parent draws its end connector.
-        deviceItems = deviceItems.map((item, index) => {
-          if (!(item as DevicePickerItem).is_child) {
-            return item;
-          }
-          const nextItem = deviceItems[index + 1] as
-            DevicePickerItem | undefined;
-          return {
-            ...item,
-            last: !nextItem || !nextItem.is_child,
-          };
-        });
-
        if (!filterType && deviceItems.length) {
          // show group title
          items.push(localize("ui.components.target-picker.type.devices"));
@@ -1006,9 +1245,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
    let hasFloor = false;
    let rtl = false;
    let showEntityId = false;
-    const isChildDeviceRow =
-      type === "device" && !!(item as DevicePickerItem).is_child;
-    if (type === "area" || type === "floor" || isChildDeviceRow) {
+    if (type === "area" || type === "floor") {
      rtl = computeRTL(
        this.hass.language,
        this.hass.translationMetadata.translations
@@ -1028,27 +1265,27 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
        .type=${type === "empty" ? "text" : "button"}
        class=${type === "empty" ? "empty" : ""}
        style=${
-          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
-          isChildDeviceRow
+          (item as FloorComboBoxItem).type === "area" && hasFloor
            ? "--md-list-item-leading-space: var(--ha-space-12);"
            : ""
        }
      >
        ${
-          ((item as FloorComboBoxItem).type === "area" && hasFloor) ||
-          isChildDeviceRow
+          (item as FloorComboBoxItem).type === "area" && hasFloor
            ? html`
                <ha-tree-indicator
                  style=${styleMap({
                    width: "var(--ha-space-12)",
                    position: "absolute",
                    top: "0",
-                    height: "100%",
                    left: rtl ? undefined : "var(--ha-space-1)",
                    right: rtl ? "var(--ha-space-1)" : undefined,
                    transform: rtl ? "scaleX(-1)" : "",
                  })}
-                  .end=${(item as { last?: boolean }).last}
+                  .end=${
+                    (item as FloorComboBoxItem & { last?: boolean | undefined })
+                      .last
+                  }
                  slot="start"
                ></ha-tree-indicator>
              `
@@ -1150,6 +1387,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
      width: 100%;
    }

+    .items {
+      z-index: 2;
+      display: flex;
+      flex-wrap: wrap;
+      padding: var(--ha-space-2) 0;
+      gap: var(--ha-space-2);
+    }
    .item-groups {
      overflow: hidden;
      border: var(--ha-border-width-sm) solid var(--divider-color);
@@ -1165,6 +1409,7 @@ declare global {

  interface HASSDomEvents {
    "remove-target-item": TargetItem;
+    "expand-target-item": TargetItem;
    "replace-target-item": TargetItem;
    "migrate-target-item": { id: string; replacements: string[] };
    "remove-target-group": string;
@@ -8,31 +8,10 @@ export class HaTreeIndicator extends LitElement {
  public end?: boolean = false;

  protected render(): TemplateResult {
-    // preserveAspectRatio="none" lets the connector stretch to the host box, so
-    // it can span the full height of a taller row instead of being letterboxed
-    // to a square in the middle. non-scaling-stroke keeps the line width and
-    // dash pattern identical no matter how far it is stretched.
    return html`
-      <svg
-        width="100%"
-        height="100%"
-        viewBox="0 0 48 48"
-        preserveAspectRatio="none"
-      >
-        <line
-          x1="24"
-          y1="0"
-          x2="24"
-          y2=${this.end ? "24" : "48"}
-          vector-effect="non-scaling-stroke"
-        ></line>
-        <line
-          x1="24"
-          y1="24"
-          x2="36"
-          y2="24"
-          vector-effect="non-scaling-stroke"
-        ></line>
+      <svg width="100%" height="100%" viewBox="0 0 48 48">
+        <line x1="24" y1="0" x2="24" y2=${this.end ? "24" : "48"}></line>
+        <line x1="24" y1="24" x2="36" y2="24"></line>
      </svg>
    `;
  }
@@ -1,62 +0,0 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { HaListItemBase } from "./ha-list-item-base";
-
-/**
- * @element ha-list-item-value
- * @extends {HaListItemBase}
- *
- * @summary
- * Non-interactive label/value row for grouped lists: label on the start
- * side, value content end-aligned. The value is the default slot so callers
- * can render rich content (links, secondary lines).
- *
- * @slot - The value content.
- *
- * @csspart label - The label column.
- * @csspart value - The value column.
- *
- * @cssprop --ha-list-item-value-max-width - Maximum width of the value column. Defaults to 60%.
- *
- * @attr {string} label - The row label.
- */
-@customElement("ha-list-item-value")
-export class HaListItemValue extends HaListItemBase {
-  @property({ type: String }) public label?: string;
-
-  protected override _renderInner(): TemplateResult {
-    return html`
-      <div part="label" class="label">${this.label}</div>
-      <div part="value" class="value"><slot></slot></div>
-    `;
-  }
-
-  static styles: CSSResultGroup = [
-    HaListItemBase.styles,
-    css`
-      :host {
-        --ha-row-item-padding-block: var(--ha-space-2);
-        --ha-row-item-min-height: 40px;
-      }
-
-      .label {
-        flex: 1;
-        color: var(--secondary-text-color);
-      }
-
-      .value {
-        max-width: var(--ha-list-item-value-max-width, 60%);
-        min-width: 0;
-        text-align: end;
-        overflow-wrap: anywhere;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-list-item-value": HaListItemValue;
-  }
-}
@@ -1,88 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { HaListBase } from "./ha-list-base";
-
-/**
- * @element ha-grouped-list
- * @extends {HaListBase}
- *
- * @summary
- * Grouped list: an optional header above a framed box of rows separated by
- * hairlines — the "grouped list" idiom of settings and detail views. Items
- * are `<ha-list-item-*>` rows; use `ha-list-item-value` for label/value
- * facts and `ha-list-item-button` for navigable rows.
- *
- * @slot - List items (`<ha-list-item-*>`).
- *
- * @csspart header - The header above the frame.
- * @csspart base - The framed `<div role="list">`.
- *
- * @cssprop --ha-row-item-padding-inline - Horizontal padding of the rows, which the header aligns to. Defaults to `--ha-space-3`.
- *
- * @attr {string} header - Header text rendered above the frame.
- */
-@customElement("ha-grouped-list")
-export class HaGroupedList extends HaListBase {
-  // The frame carries the list role so the header stays out of the list
-  // semantics.
-  protected override readonly hostRole = "";
-
-  @property({ type: String }) public header?: string;
-
-  protected override render(): TemplateResult {
-    return html`
-      ${
-        this.header
-          ? html`<div part="header" class="header" id="header">
-              ${this.header}
-            </div>`
-          : nothing
-      }
-      <div
-        part="base"
-        class="base"
-        role="list"
-        aria-labelledby=${ifDefined(this.header ? "header" : undefined)}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  static styles = [
-    ...HaListBase.styles,
-    css`
-      :host {
-        --ha-row-item-padding-inline: var(--ha-space-3);
-      }
-
-      .header {
-        margin: 0 0 var(--ha-space-1);
-        margin-inline-start: calc(
-          var(--ha-row-item-padding-inline) + var(--ha-border-width-sm)
-        );
-        font-size: var(--ha-font-size-m);
-        font-weight: var(--ha-font-weight-medium);
-        color: var(--secondary-text-color);
-      }
-
-      .base {
-        border: var(--ha-border-width-sm) solid var(--divider-color);
-        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-        overflow: hidden;
-      }
-
-      ::slotted(:not(:first-child)) {
-        border-top: var(--ha-border-width-sm) solid var(--divider-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-grouped-list": HaGroupedList;
-  }
-}
@@ -52,6 +52,7 @@ import {
  type TargetType,
 } from "../../data/target";
 import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
+import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
@@ -220,28 +221,30 @@ export class HaTargetPickerItemRow extends LitElement {
          ? html`
              <div slot="end" class="summary">
                ${
-                  this.expand || !entries.referenced_entities.length
-                    ? html`<span class="main">
-                        ${this.hass.localize(
-                          "ui.components.target-picker.entities_count",
-                          {
-                            count: entries.referenced_entities.length,
-                          }
-                        )}
-                      </span>`
-                    : html`<ha-button
-                        appearance="filled"
-                        variant="brand"
-                        size="xs"
+                  showEntities &&
+                  !this.expand &&
+                  entries?.referenced_entities.length
+                    ? html`<button
+                        class="main link"
                        @click=${this._openDetails}
                      >
                        ${this.hass.localize(
                          "ui.components.target-picker.entities_count",
                          {
-                            count: entries.referenced_entities.length,
+                            count: entries?.referenced_entities.length,
                          }
                        )}
-                      </ha-button>`
+                      </button>`
+                    : showEntities
+                      ? html`<span class="main">
+                          ${this.hass.localize(
+                            "ui.components.target-picker.entities_count",
+                            {
+                              count: entries?.referenced_entities.length,
+                            }
+                          )}
+                        </span>`
+                      : nothing
                }
              </div>
            `
@@ -393,9 +396,6 @@ export class HaTargetPickerItemRow extends LitElement {
              nextEntries.referenced_entities =
                entries?.referenced_entities.filter((entity_id) => {
                  const entity = this.hass.entities[entity_id];
-                  if (!entity) {
-                    return false;
-                  }
                  return (
                    entity.area_id === rowItem ||
                    !entity.device_id ||
@@ -419,9 +419,6 @@ export class HaTargetPickerItemRow extends LitElement {
      this.type === "label" && entries
        ? entries.referenced_entities.filter((entity_id) => {
            const entity = this.hass.entities[entity_id];
-            if (!entity) {
-              return false;
-            }
            return (
              entity.labels.includes(this.itemId) &&
              !entries.referenced_devices.includes(entity.device_id || "")
@@ -430,7 +427,7 @@ export class HaTargetPickerItemRow extends LitElement {
        : nextType === "device" && entries
          ? entries.referenced_entities.filter(
              (entity_id) =>
-                this.hass.entities[entity_id]?.area_id === this.itemId
+                this.hass.entities[entity_id].area_id === this.itemId
            )
          : [];

@@ -439,7 +436,7 @@ export class HaTargetPickerItemRow extends LitElement {
        ? entries.referenced_devices.filter(
            (device_id) =>
              !devicesInAreas.includes(device_id) &&
-              this.hass.devices[device_id]?.labels.includes(this.itemId)
+              this.hass.devices[device_id].labels.includes(this.itemId)
          )
        : [];

@@ -534,12 +531,6 @@ export class HaTargetPickerItemRow extends LitElement {
        entries.referenced_areas = entries.referenced_areas.filter(
          (area_id) => {
            const area = this.hass.areas[area_id];
-            // Absent from the registry is not a filter decision: drop the id
-            // without marking it hidden, so entities targeted through their
-            // own area or label are not dropped along with it.
-            if (!area) {
-              return false;
-            }
            if (
              (this.type === "floor" || area.labels.includes(this.itemId)) &&
              areaMeetsFilter(
@@ -572,9 +563,6 @@ export class HaTargetPickerItemRow extends LitElement {
        entries.referenced_devices = entries.referenced_devices.filter(
          (device_id) => {
            const device = this.hass.devices[device_id];
-            if (!device) {
-              return false;
-            }
            if (
              !hiddenAreaIds.includes(device.area_id || "") &&
              deviceMeetsFilter(
@@ -600,11 +588,6 @@ export class HaTargetPickerItemRow extends LitElement {
      entries.referenced_entities = entries.referenced_entities.filter(
        (entity_id) => {
          const entity = this.hass.entities[entity_id];
-          // Core can reference entities that are absent from the display
-          // registry (e.g. disabled ones expanded from an area).
-          if (!entity) {
-            return false;
-          }
          if (hiddenDeviceIds.includes(entity.device_id || "")) {
            return false;
          }
@@ -829,6 +812,7 @@ export class HaTargetPickerItemRow extends LitElement {
  };

  static styles = [
+    buttonLinkStyle,
    css`
      :host {
        --md-list-item-top-space: 0;
@@ -899,6 +883,16 @@ export class HaTargetPickerItemRow extends LitElement {
        color: var(--secondary-text-color);
      }

+      button.link {
+        text-decoration: none;
+        color: var(--primary-color);
+      }
+
+      button.link:hover,
+      button.link:focus {
+        text-decoration: underline;
+      }
+
      .state {
        width: fit-content;
        font-size: var(--ha-font-size-s);
@@ -0,0 +1,314 @@
+import "@home-assistant/webawesome/dist/components/tag/tag";
+import { consume } from "@lit/context";
+import {
+  mdiAlertOutline,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiTextureBox,
+  mdiUnfoldMoreVertical,
+} from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import { computeCssColor } from "../../common/color/compute-color";
+import { hex2rgb } from "../../common/color/convert-color";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { slugify } from "../../common/string/slugify";
+import { getConfigEntry } from "../../data/config_entries";
+import { labelsContext } from "../../data/context";
+import type { DeviceCompositeSplits } from "../../data/device/device_registry";
+import { domainToName } from "../../data/integration";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
+import type { TargetType } from "../../data/target";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import "../ha-domain-icon";
+import { floorDefaultIconPath } from "../ha-floor-icon";
+import "../ha-icon";
+import "../ha-icon-button";
+import "../ha-state-icon";
+import "../ha-tooltip";
+
+@customElement("ha-target-picker-value-chip")
+export class HaTargetPickerValueChip extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public type!: TargetType;
+
+  @property({ attribute: "item-id" }) public itemId!: string;
+
+  @property({ attribute: false })
+  public compositeSplits?: DeviceCompositeSplits;
+
+  @state() private _domainName?: string;
+
+  @state() private _iconImg?: string;
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelRegistry!: LabelRegistryEntry[];
+
+  protected render() {
+    const { name, iconPath, fallbackIconPath, stateObject, color } =
+      this._itemData(this.type, this.itemId);
+
+    const split =
+      this.type === "device" && !this.hass.devices?.[this.itemId]
+        ? this.compositeSplits?.[this.itemId]
+        : undefined;
+    // Show the replaced reference using the primary replacement device's name,
+    // falling back to the first still-existing split device if the primary
+    // device itself was deleted. If no replacement device exists at all, fall
+    // back to the normal "not found" display.
+    const replacementDevice = split
+      ? (split.primary_id && this.hass.devices?.[split.primary_id]) ||
+        split.split_ids
+          .map((id) => this.hass.devices?.[id])
+          .find((device) => device)
+      : undefined;
+    const replaced = !!replacementDevice;
+    const replacedName = replacementDevice
+      ? computeDeviceNameDisplay(
+          replacementDevice,
+          this.hass.localize,
+          this.hass.states
+        )
+      : undefined;
+
+    return html`
+      <wa-tag
+        pill
+        with-remove
+        class=${classMap({ [this.type]: true, replaced })}
+        style=${color ? `--color: rgb(${color});` : ""}
+        @wa-remove=${this._removeItem}
+      >
+        <div class="icon">
+          ${
+            replaced
+              ? html`<ha-svg-icon .path=${mdiAlertOutline}></ha-svg-icon>`
+              : iconPath
+                ? html`<ha-icon .icon=${iconPath}></ha-icon>`
+                : this._iconImg
+                  ? html`<img
+                      alt=${this._domainName || ""}
+                      width="24"
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      src=${this._iconImg}
+                    />`
+                  : fallbackIconPath
+                    ? html`<ha-svg-icon
+                        .path=${fallbackIconPath}
+                      ></ha-svg-icon>`
+                    : stateObject
+                      ? html`<ha-state-icon
+                          .stateObj=${stateObject}
+                        ></ha-state-icon>`
+                      : nothing
+          }
+        </div>
+        <span class="name">
+          ${
+            replaced
+              ? replacedName ||
+                this.hass.localize(
+                  "ui.components.target-picker.replaced_device"
+                )
+              : name
+          }
+        </span>
+        ${
+          this.type === "entity" || replaced
+            ? nothing
+            : html`<ha-tooltip .for="expand-${slugify(this.itemId)}"
+                  >${this.hass.localize(
+                    `ui.components.target-picker.expand_${this.type}_id`
+                  )}
+                </ha-tooltip>
+                <ha-icon-button
+                  class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                  .label=${this.hass.localize(
+                    "ui.components.target-picker.expand"
+                  )}
+                  .path=${mdiUnfoldMoreVertical}
+                  hide-title
+                  .id="expand-${slugify(this.itemId)}"
+                  .type=${this.type}
+                  @click=${this._handleExpand}
+                ></ha-icon-button>`
+        }
+      </wa-tag>
+    `;
+  }
+
+  private _itemData = memoizeOne((type: TargetType, itemId: string) => {
+    if (type === "floor") {
+      const floor = this.hass.floors?.[itemId];
+      return {
+        name: floor?.name || itemId,
+        iconPath: floor?.icon,
+        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
+      };
+    }
+    if (type === "area") {
+      const area = this.hass.areas?.[itemId];
+      return {
+        name: area?.name || itemId,
+        iconPath: area?.icon,
+        fallbackIconPath: mdiTextureBox,
+      };
+    }
+    if (type === "device") {
+      const device = this.hass.devices?.[itemId];
+
+      if (device?.primary_config_entry) {
+        this._getDeviceDomain(device.primary_config_entry);
+      }
+
+      return {
+        name: device
+          ? computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
+          : itemId,
+        fallbackIconPath: mdiDevices,
+      };
+    }
+    if (type === "entity") {
+      this._setDomainName(computeDomain(itemId));
+
+      const stateObj = this.hass.states[itemId];
+      return {
+        name: computeStateName(stateObj) || itemId,
+        stateObject: stateObj,
+      };
+    }
+
+    // type label
+    const label = this._labelRegistry.find((lab) => lab.label_id === itemId);
+    let color = label?.color ? computeCssColor(label.color) : undefined;
+    if (color?.startsWith("var(")) {
+      const computedStyles = getComputedStyle(this);
+      color = computedStyles.getPropertyValue(
+        color.substring(4, color.length - 1)
+      );
+    }
+    if (color?.startsWith("#")) {
+      color = hex2rgb(color).join(",");
+    }
+    return {
+      name: label?.name || itemId,
+      iconPath: label?.icon,
+      fallbackIconPath: mdiLabel,
+      color,
+    };
+  });
+
+  private _setDomainName(domain: string) {
+    this._domainName = domainToName(this.hass.localize, domain);
+  }
+
+  private async _getDeviceDomain(configEntryId: string) {
+    try {
+      const data = await getConfigEntry(this.hass, configEntryId);
+      const domain = data.config_entry.domain;
+      this._iconImg = brandsUrl(
+        {
+          domain: domain,
+          type: "icon",
+          darkOptimized: this.hass.themes?.darkMode,
+        },
+        this.hass.auth.data.hassUrl
+      );
+
+      this._setDomainName(domain);
+    } catch {
+      // failed to load config entry -> ignore
+    }
+  }
+
+  private _removeItem(ev: MouseEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "remove-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  private _handleExpand(ev: MouseEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "expand-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      max-width: 100%;
+    }
+    wa-tag {
+      background-color: var(--card-background-color);
+      border-width: var(--ha-border-width-md);
+      padding-inline-start: 0;
+      overflow: hidden;
+      max-width: 100%;
+      color: var(--primary-text-color);
+    }
+
+    wa-tag.entity {
+      border-color: var(--ha-color-green-80);
+      --background-color: var(--ha-color-green-80);
+    }
+    wa-tag.device {
+      border-color: var(--ha-color-primary-80);
+      --background-color: var(--ha-color-primary-80);
+    }
+    wa-tag.area {
+      border-color: var(--ha-color-orange-80);
+      --background-color: var(--ha-color-orange-80);
+    }
+    wa-tag.label {
+      border-color: var(--color);
+      --background-color: var(--color);
+      --icon-primary-color: var(--primary-text-color);
+    }
+    wa-tag.replaced {
+      border-color: var(--ha-color-border-warning-normal, var(--warning-color));
+      --background-color: var(--warning-color);
+      color: var(--ha-color-on-warning-normal, var(--warning-color));
+    }
+
+    .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .icon {
+      background-color: var(--background-color);
+      border-radius: var(--ha-border-radius-circle);
+      padding: var(--ha-space-2) var(--ha-space-1);
+      display: flex;
+    }
+    .expand-btn {
+      --ha-icon-button-size: 16px;
+      --mdc-icon-size: 14px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-value-chip": HaTargetPickerValueChip;
+  }
+}
@@ -1,5 +1,5 @@
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -25,13 +25,6 @@ export class HaTileContainer extends LitElement {
  @property({ attribute: false })
  public actionHandlerOptions?: ActionHandlerOptions;

-  @state() private _hasFeatures = false;
-
-  private _handleFeaturesSlotChange(ev: Event) {
-    this._hasFeatures =
-      (ev.target as HTMLSlotElement).assignedElements().length > 0;
-  }
-
  private _handleFocus(ev: FocusEvent) {
    if ((ev.target as HTMLElement).matches(":focus-visible")) {
      this.setAttribute("focused", "");
@@ -43,12 +36,8 @@ export class HaTileContainer extends LitElement {
  }

  protected render() {
-    const isInline = this.featurePosition === "inline";
-    const containerClasses = {
-      inline: isInline,
-      "has-features-below": isInline && this._hasFeatures,
-      "fixed-height": this.fixedInfoHeight,
-    };
+    const containerOrientationClass =
+      this.featurePosition === "inline" ? "horizontal" : "";
    const contentClasses = {
      vertical: this.vertical,
      "fixed-info-height": this.fixedInfoHeight,
@@ -67,21 +56,15 @@ export class HaTileContainer extends LitElement {
        <ha-ripple .disabled=${!this.interactive}></ha-ripple>
      </div>
      <div
-        class="container ${classMap(containerClasses)}"
+        class="container ${containerOrientationClass}"
        @action=${stopPropagation}
        @click=${stopPropagation}
      >
-        <div class="row">
-          <div class="content ${classMap(contentClasses)}">
-            <slot name="icon"></slot>
-            <slot name="info" id="info"></slot>
-          </div>
-          <slot name="features-inline"></slot>
+        <div class="content ${classMap(contentClasses)}">
+          <slot name="icon"></slot>
+          <slot name="info" id="info"></slot>
        </div>
-        <slot
-          name="features"
-          @slotchange=${this._handleFeaturesSlotChange}
-        ></slot>
+        <slot name="features"></slot>
      </div>
    `;
  }
@@ -114,13 +97,7 @@ export class HaTileContainer extends LitElement {
      flex-direction: column;
      flex: 1;
    }
-    .row {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-    }
-    .container.inline .row {
+    .container.horizontal {
      flex-direction: row;
    }

@@ -176,30 +153,13 @@ export class HaTileContainer extends LitElement {
      padding: 0 var(--ha-space-3) var(--ha-space-3) var(--ha-space-3);
    }

-    .container.inline ::slotted([slot="features-inline"]) {
-      /* size the feature on the 6 column grid track, so it lines up with neighbouring tiles */
+    .container.horizontal ::slotted([slot="features"]) {
      width: calc(50% - var(--column-gap, 0px) / 2 - var(--ha-space-3));
      flex: none;
+      --feature-height: var(--ha-space-9);
      padding: 0 var(--ha-space-3);
      padding-inline-start: 0;
    }
-    /* the inline feature keeps the icon height, unless the card reserves a row it can fill */
-    .container.inline:not(.has-features-below)
-      ::slotted([slot="features-inline"]),
-    .container.inline:not(.fixed-height) ::slotted([slot="features-inline"]) {
-      --feature-height: var(--ha-space-9);
-    }
-
-    .container.inline.has-features-below ::slotted([slot="features"]) {
-      /* keep both columns under the inline feature, which sits on the grid track */
-      --ha-card-feature-column-gap: calc(
-        var(--column-gap, 0px) + var(--ha-space-3) * 2
-      );
-      --ha-card-feature-divider: 1px solid var(--ha-color-border-neutral-quiet);
-      --ha-card-feature-divider-inset: calc(
-        var(--ha-space-3) + var(--column-gap, 0px) / 2
-      );
-    }
    [role="button"] {
      cursor: pointer;
      pointer-events: auto;
@@ -29,7 +29,6 @@ export class HaTraceLogbook extends LitElement {
            .hass=${this.hass}
            .entries=${this.logbookEntries}
            .narrow=${this.narrow}
-            no-detail
          ></ha-logbook-renderer>
          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
        `
@@ -437,7 +437,6 @@ export class HaTracePathDetails extends LitElement {
            .hass=${this.hass}
            .entries=${entries}
            .narrow=${this.narrow}
-            no-detail
          ></ha-logbook-renderer>
          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
        `
@@ -94,45 +94,6 @@ const localizeTimeString = (
  }
 };

-// Seconds since midnight for a literal `HH:MM(:SS)` time, undefined for
-// anything else (entity ids contain a dot, and malformed input is ignored).
-const literalTimeToSeconds = (value: unknown): number | undefined => {
-  if (typeof value !== "string" || value.includes(".")) {
-    return undefined;
-  }
-  const chunks = value.split(":");
-  if (chunks.length < 2 || chunks.length > 3) {
-    return undefined;
-  }
-  const hours = Number(chunks[0]);
-  const minutes = Number(chunks[1]);
-  const seconds = chunks.length > 2 ? Number(chunks[2]) : 0;
-  if (
-    !Number.isFinite(hours) ||
-    !Number.isFinite(minutes) ||
-    !Number.isFinite(seconds)
-  ) {
-    return undefined;
-  }
-  return hours * 3600 + minutes * 60 + seconds;
-};
-
-const numericThresholdSuffix = (config: {
-  above?: number | string;
-  below?: number | string;
-}): "above" | "below" | "above_below" | undefined => {
-  if (config.above !== undefined && config.below !== undefined) {
-    return "above_below";
-  }
-  if (config.above !== undefined) {
-    return "above";
-  }
-  if (config.below !== undefined) {
-    return "below";
-  }
-  return undefined;
-};
-
 const formatNumericLimitValue = (
  hass: HomeAssistant,
  value?: number | string
@@ -146,26 +107,18 @@ const formatNumericLimitValue = (
    : value;
 };

-export interface DescribeOptions {
-  // Skip the user defined alias and describe the underlying config.
-  ignoreAlias?: boolean;
-  // Leave the entities out of the sentence, for rows that render them as
-  // target badges.
-  hideEntities?: boolean;
-}
-
 export const describeTrigger = (
  trigger: Trigger,
  hass: HomeAssistant,
  entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ): string => {
  try {
    const description = tryDescribeTrigger(
      trigger,
      hass,
      entityRegistry,
-      options
+      ignoreAlias
    );
    if (typeof description !== "string") {
      throw new Error(String(description));
@@ -187,7 +140,7 @@ const tryDescribeTrigger = (
  trigger: Trigger,
  hass: HomeAssistant,
  entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ) => {
  if (isTriggerList(trigger)) {
    const triggers = ensureArray(trigger.triggers);
@@ -203,15 +156,14 @@ const tryDescribeTrigger = (
    });
  }

-  if (trigger.alias && !options?.ignoreAlias) {
+  if (trigger.alias && !ignoreAlias) {
    return trigger.alias;
  }

  const description = describeLegacyTrigger(
    trigger as LegacyTrigger,
    hass,
-    entityRegistry,
-    options?.hideEntities
+    entityRegistry
  );

  if (description) {
@@ -235,8 +187,7 @@ const tryDescribeTrigger = (
 const describeLegacyTrigger = (
  trigger: LegacyTrigger,
  hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[],
-  hideEntities = false
+  entityRegistry: EntityRegistryEntry[]
 ) => {
  // Event Trigger
  if (trigger.trigger === "event" && trigger.event_type) {
@@ -267,16 +218,28 @@ const describeLegacyTrigger = (
  }

  // Numeric State Trigger
-  if (
-    trigger.trigger === "numeric_state" &&
-    (trigger.entity_id || hideEntities)
-  ) {
+  if (trigger.trigger === "numeric_state" && trigger.entity_id) {
+    const entities: string[] = [];
    const states = hass.states;

    const stateObj = Array.isArray(trigger.entity_id)
      ? hass.states[trigger.entity_id[0]]
      : (hass.states[trigger.entity_id] as HassEntity | undefined);

+    if (Array.isArray(trigger.entity_id)) {
+      for (const entity of trigger.entity_id.values()) {
+        if (states[entity]) {
+          entities.push(computeStateName(states[entity]) || entity);
+        }
+      }
+    } else if (trigger.entity_id) {
+      entities.push(
+        states[trigger.entity_id]
+          ? computeStateName(states[trigger.entity_id])
+          : trigger.entity_id
+      );
+    }
+
    const attribute = trigger.attribute
      ? stateObj
        ? computeAttributeNameDisplay(
@@ -292,39 +255,6 @@ const describeLegacyTrigger = (
      ? describeDuration(hass.locale, trigger.for)
      : undefined;

-    if (hideEntities) {
-      const suffix = numericThresholdSuffix(trigger);
-      if (!suffix) {
-        return hass.localize(
-          `${triggerTranslationBaseKey}.numeric_state.label`
-        );
-      }
-      return hass.localize(
-        `${triggerTranslationBaseKey}.numeric_state.description.crossed_${suffix}`,
-        {
-          attribute: attribute,
-          above: formatNumericLimitValue(hass, trigger.above),
-          below: formatNumericLimitValue(hass, trigger.below),
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (Array.isArray(trigger.entity_id)) {
-      for (const entity of trigger.entity_id.values()) {
-        if (states[entity]) {
-          entities.push(computeStateName(states[entity]) || entity);
-        }
-      }
-    } else if (trigger.entity_id) {
-      entities.push(
-        states[trigger.entity_id]
-          ? computeStateName(states[trigger.entity_id])
-          : trigger.entity_id
-      );
-    }
-
    if (trigger.above !== undefined && trigger.below !== undefined) {
      return hass.localize(
        `${triggerTranslationBaseKey}.numeric_state.description.above-below`,
@@ -366,14 +296,14 @@ const describeLegacyTrigger = (

  // State Trigger
  if (trigger.trigger === "state") {
+    const entities: string[] = [];
    const states = hass.states;

-    const entityArray: string[] = ensureArray(trigger.entity_id);
-
-    const stateObj = hass.states[entityArray?.[0]] as HassEntity | undefined;
-
    let attribute = "";
    if (trigger.attribute) {
+      const stateObj = Array.isArray(trigger.entity_id)
+        ? hass.states[trigger.entity_id[0]]
+        : (hass.states[trigger.entity_id] as HassEntity | undefined);
      attribute = stateObj
        ? computeAttributeNameDisplay(
            hass.localize,
@@ -384,6 +314,17 @@ const describeLegacyTrigger = (
        : trigger.attribute;
    }

+    const entityArray: string[] = ensureArray(trigger.entity_id);
+    if (entityArray) {
+      for (const entity of entityArray) {
+        if (states[entity]) {
+          entities.push(computeStateName(states[entity]) || entity);
+        }
+      }
+    }
+
+    const stateObj = hass.states[entityArray[0]] as HassEntity | undefined;
+
    let fromChoice = "other";
    let fromString = "";
    if (trigger.from !== undefined) {
@@ -463,32 +404,6 @@ const describeLegacyTrigger = (
      duration = describeDuration(hass.locale, trigger.for) ?? "";
    }

-    if (hideEntities) {
-      return hass.localize(
-        `${triggerTranslationBaseKey}.state.description.changed`,
-        {
-          hasAttribute: attribute !== "" ? "true" : "false",
-          attribute: attribute,
-          anyChange: toChoice === "special" ? "true" : "false",
-          fromChoice: fromChoice,
-          fromString: fromString,
-          toChoice: toChoice,
-          toString: toString,
-          hasDuration: duration !== "" ? "true" : "false",
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (entityArray) {
-      for (const entity of entityArray) {
-        if (states[entity]) {
-          entities.push(computeStateName(states[entity]) || entity);
-        }
-      }
-    }
-
    return hass.localize(
      `${triggerTranslationBaseKey}.state.description.full`,
      {
@@ -978,14 +893,14 @@ export const describeCondition = (
  condition: Condition,
  hass: HomeAssistant,
  entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ): string => {
  try {
    const description = tryDescribeCondition(
      condition,
      hass,
      entityRegistry,
-      options
+      ignoreAlias
    );
    if (typeof description !== "string") {
      throw new Error(String(description));
@@ -1007,7 +922,7 @@ const tryDescribeCondition = (
  condition: Condition,
  hass: HomeAssistant,
  entityRegistry: EntityRegistryEntry[],
-  options?: DescribeOptions
+  ignoreAlias = false
 ) => {
  if (typeof condition === "string" && hasTemplate(condition)) {
    return hass.localize(
@@ -1015,7 +930,7 @@ const tryDescribeCondition = (
    );
  }

-  if (condition.alias && !options?.ignoreAlias) {
+  if (condition.alias && !ignoreAlias) {
    return condition.alias;
  }

@@ -1037,8 +952,7 @@ const tryDescribeCondition = (
  const description = describeLegacyCondition(
    condition as LegacyCondition,
    hass,
-    entityRegistry,
-    options?.hideEntities
+    entityRegistry
  );

  if (description) {
@@ -1064,8 +978,7 @@ const tryDescribeCondition = (
 const describeLegacyCondition = (
  condition: LegacyCondition,
  hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[],
-  hideEntities = false
+  entityRegistry: EntityRegistryEntry[]
 ) => {
  if (condition.condition === "or") {
    const conditions = ensureArray(condition.conditions);
@@ -1122,20 +1035,17 @@ const describeLegacyCondition = (

  // State Condition
  if (condition.condition === "state") {
-    if (!condition.entity_id && !hideEntities) {
+    if (!condition.entity_id) {
      return hass.localize(
        `${conditionsTranslationBaseKey}.state.description.no_entity`
      );
    }

-    const stateObj = hass.states[
-      Array.isArray(condition.entity_id)
-        ? condition.entity_id[0]
-        : condition.entity_id
-    ] as HassEntity | undefined;
-
    let attribute = "";
    if (condition.attribute) {
+      const stateObj = Array.isArray(condition.entity_id)
+        ? hass.states[condition.entity_id[0]]
+        : (hass.states[condition.entity_id] as HassEntity | undefined);
      attribute = stateObj
        ? computeAttributeNameDisplay(
            hass.localize,
@@ -1146,7 +1056,27 @@ const describeLegacyCondition = (
        : condition.attribute;
    }

+    const entities: string[] = [];
+    if (Array.isArray(condition.entity_id)) {
+      for (const entity of condition.entity_id.values()) {
+        if (hass.states[entity]) {
+          entities.push(computeStateName(hass.states[entity]) || entity);
+        }
+      }
+    } else if (condition.entity_id) {
+      entities.push(
+        hass.states[condition.entity_id]
+          ? computeStateName(hass.states[condition.entity_id])
+          : condition.entity_id
+      );
+    }
+
    const states: string[] = [];
+    const stateObj = hass.states[
+      Array.isArray(condition.entity_id)
+        ? condition.entity_id[0]
+        : condition.entity_id
+    ] as HassEntity | undefined;
    if (Array.isArray(condition.state)) {
      for (const state of condition.state.values()) {
        states.push(
@@ -1163,7 +1093,7 @@ const describeLegacyCondition = (
            : state
        );
      }
-    } else if (condition.state != null && condition.state !== "") {
+    } else if (condition.state !== "") {
      states.push(
        stateObj
          ? condition.attribute
@@ -1184,37 +1114,6 @@ const describeLegacyCondition = (
      duration = describeDuration(hass.locale, condition.for) || "";
    }

-    if (hideEntities) {
-      if (states.length === 0) {
-        return hass.localize(`${conditionsTranslationBaseKey}.state.label`);
-      }
-      return hass.localize(
-        `${conditionsTranslationBaseKey}.state.description.is`,
-        {
-          hasAttribute: attribute !== "" ? "true" : "false",
-          attribute: attribute,
-          states: formatListWithOrs(hass.locale, states),
-          hasDuration: duration !== "" ? "true" : "false",
-          duration: duration,
-        }
-      );
-    }
-
-    const entities: string[] = [];
-    if (Array.isArray(condition.entity_id)) {
-      for (const entity of condition.entity_id.values()) {
-        if (hass.states[entity]) {
-          entities.push(computeStateName(hass.states[entity]) || entity);
-        }
-      }
-    } else if (condition.entity_id) {
-      entities.push(
-        hass.states[condition.entity_id]
-          ? computeStateName(hass.states[condition.entity_id])
-          : condition.entity_id
-      );
-    }
-
    return hass.localize(
      `${conditionsTranslationBaseKey}.state.description.full`,
      {
@@ -1237,14 +1136,15 @@ const describeLegacyCondition = (
  }

  // Numeric State Condition
-  if (
-    condition.condition === "numeric_state" &&
-    (condition.entity_id || hideEntities)
-  ) {
-    const entity_ids = condition.entity_id
-      ? ensureArray(condition.entity_id)
-      : [];
+  if (condition.condition === "numeric_state" && condition.entity_id) {
+    const entity_ids = ensureArray(condition.entity_id);
    const stateObj = hass.states[entity_ids[0]] as HassEntity | undefined;
+    const entity = formatListWithAnds(
+      hass.locale,
+      entity_ids.map((id) =>
+        hass.states[id] ? computeStateName(hass.states[id]) : id || ""
+      )
+    );

    const attribute = condition.attribute
      ? stateObj
@@ -1257,30 +1157,6 @@ const describeLegacyCondition = (
        : condition.attribute
      : undefined;

-    if (hideEntities) {
-      const suffix = numericThresholdSuffix(condition);
-      if (!suffix) {
-        return hass.localize(
-          `${conditionsTranslationBaseKey}.numeric_state.label`
-        );
-      }
-      return hass.localize(
-        `${conditionsTranslationBaseKey}.numeric_state.description.is_${suffix}`,
-        {
-          attribute,
-          above: formatNumericLimitValue(hass, condition.above),
-          below: formatNumericLimitValue(hass, condition.below),
-        }
-      );
-    }
-
-    const entity = formatListWithAnds(
-      hass.locale,
-      entity_ids.map((id) =>
-        hass.states[id] ? computeStateName(hass.states[id]) : id || ""
-      )
-    );
-
    if (condition.above !== undefined && condition.below !== undefined) {
      return hass.localize(
        `${conditionsTranslationBaseKey}.numeric_state.description.above-below`,
@@ -1356,16 +1232,12 @@ const describeLegacyCondition = (

      let hasTime = "";
      if (after !== undefined && before !== undefined) {
-        const afterSeconds = literalTimeToSeconds(condition.after);
-        const beforeSeconds = literalTimeToSeconds(condition.before);
-        if (beforeSeconds === 0) {
-          // A window ending at midnight runs to the end of the day, so the
-          // "before" boundary adds nothing to the summary.
-          hasTime = "after";
-        } else if (
-          afterSeconds !== undefined &&
-          beforeSeconds !== undefined &&
-          afterSeconds > beforeSeconds
+        if (
+          typeof condition.after === "string" &&
+          !condition.after.includes(".") &&
+          typeof condition.before === "string" &&
+          !condition.before.includes(".") &&
+          condition.after > condition.before
        ) {
          hasTime = "after_before_or";
        } else {
@@ -3,7 +3,6 @@ import { computeDeviceNameDisplay } from "../../common/entity/compute_device_nam
 import { computeDomain } from "../../common/entity/compute_domain";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import type { LocalizeFunc } from "../../common/translations/localize";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { HaDevicePickerDeviceFilterFunc } from "../../components/device/ha-device-picker";
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
@@ -25,17 +24,12 @@ import {
 export interface DevicePickerItem extends PickerComboBoxItem {
  domain?: string;
  domain_name?: string;
-  // Set when this device is a child rendered indented under its parent.
-  is_child?: boolean;
-  // Set on the last child of a parent so the tree connector draws its end.
-  last?: boolean;
 }

 export interface DeviceAreaLabel {
  areaName?: string;
  viaDeviceName?: string;
  viaDeviceAreaName?: string;
-  parentDeviceName?: string;
 }

 export interface GetDevicesOptions {
@@ -47,10 +41,6 @@ export interface GetDevicesOptions {
  excludeDevices?: string[];
  value?: string;
  idPrefix?: string;
-  // When set, order the result so children directly follow their parent and
-  // flag them for indented rendering. Requires the picker to disable its own
-  // sorting (no-sort) so this order is preserved.
-  nested?: boolean;
 }

 export const computeDeviceAreaLabel = (
@@ -63,8 +53,7 @@ export const computeDeviceAreaLabel = (
  translationMetadata: HomeAssistant["translationMetadata"],
  viaDeviceEntities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[]
 ): DeviceAreaLabel => {
-  // Pass devices so a child device inherits its parent's area.
-  const area = getDeviceArea(device, areas, devices);
+  const area = getDeviceArea(device, areas);

  const viaDevice = device.via_device_id
    ? devices[device.via_device_id]
@@ -72,23 +61,11 @@ export const computeDeviceAreaLabel = (
  const viaDeviceName = viaDevice
    ? computeDeviceNameDisplay(viaDevice, localize, states, viaDeviceEntities)
    : undefined;
-  const viaDeviceArea = viaDevice
-    ? getDeviceArea(viaDevice, areas, devices)
-    : undefined;
+  const viaDeviceArea = viaDevice ? getDeviceArea(viaDevice, areas) : undefined;
  const viaDeviceAreaName = viaDeviceArea
    ? computeAreaName(viaDeviceArea)
    : undefined;

-  // A child device is a logical part of its parent. We surface the parent name
-  // only as a search term (below) — not in the area label, which stays the pure
-  // (inherited) area. The nested tree rendering communicates the relationship.
-  const parentDevice = device.parent_device_id
-    ? devices[device.parent_device_id]
-    : undefined;
-  const parentDeviceName = parentDevice
-    ? computeDeviceNameDisplay(parentDevice, localize, states)
-    : undefined;
-
  const isRTL = computeRTL(language, translationMetadata.translations);

  const areaName = area
@@ -97,7 +74,7 @@ export const computeDeviceAreaLabel = (
      ? `${viaDeviceAreaName}${isRTL ? " ◂ " : " ▸ "}${viaDeviceName}`
      : viaDeviceName || undefined;

-  return { areaName, viaDeviceName, viaDeviceAreaName, parentDeviceName };
+  return { areaName, viaDeviceName, viaDeviceAreaName };
 };

 export const deviceComboBoxKeys: FuseWeightedKey[] = [
@@ -125,14 +102,6 @@ export const deviceComboBoxKeys: FuseWeightedKey[] = [
    name: "search_labels.viaDeviceArea",
    weight: 3,
  },
-  {
-    name: "search_labels.parentDeviceName",
-    weight: 3,
-  },
-  {
-    name: "search_labels.childDeviceNames",
-    weight: 3,
-  },
 ];

 export const getDevices = (
@@ -149,7 +118,6 @@ export const getDevices = (
    excludeDevices,
    value,
    idPrefix = "",
-    nested,
  } = options ?? {};

  const devices = Object.values(hass.devices);
@@ -157,60 +125,26 @@ export const getDevices = (

  let deviceEntityLookup: DeviceEntityDisplayLookup = {};

-  const filtersEntities =
-    includeDomains || excludeDomains || includeDeviceClasses || entityFilter;
-
-  if (filtersEntities) {
+  if (
+    includeDomains ||
+    excludeDomains ||
+    includeDeviceClasses ||
+    entityFilter
+  ) {
    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
  }

-  // Targeting a device also targets its child devices (a parent inherits its
-  // children's entities), so a device should match an entity-based filter when
-  // it OR any of its children has a matching entity. Build a parent -> children
-  // map and resolve each device's effective entity set accordingly. Nesting is
-  // single-level, so one hop covers it.
-  const filterChildrenByParent = new Map<string, DeviceRegistryEntry[]>();
-  if (filtersEntities) {
-    for (const device of devices) {
-      if (device.parent_device_id) {
-        const siblings = filterChildrenByParent.get(device.parent_device_id);
-        if (siblings) {
-          siblings.push(device);
-        } else {
-          filterChildrenByParent.set(device.parent_device_id, [device]);
-        }
-      }
-    }
-  }
-  const effectiveEntities = (
-    deviceId: string
-  ): EntityRegistryDisplayEntry[] => {
-    const own = deviceEntityLookup[deviceId] ?? [];
-    const children = filterChildrenByParent.get(deviceId);
-    if (!children) {
-      return own;
-    }
-    const combined = [...own];
-    for (const child of children) {
-      const childEntities = deviceEntityLookup[child.id];
-      if (childEntities) {
-        combined.push(...childEntities);
-      }
-    }
-    return combined;
-  };
-
  let inputDevices = devices.filter(
    (device) => device.id === value || !device.disabled_by
  );

  if (includeDomains) {
    inputDevices = inputDevices.filter((device) => {
-      const devEntities = effectiveEntities(device.id);
-      if (!devEntities.length) {
+      const devEntities = deviceEntityLookup[device.id];
+      if (!devEntities || !devEntities.length) {
        return false;
      }
-      return devEntities.some((entity) =>
+      return deviceEntityLookup[device.id].some((entity) =>
        includeDomains.includes(computeDomain(entity.entity_id))
      );
    });
@@ -218,11 +152,11 @@ export const getDevices = (

  if (excludeDomains) {
    inputDevices = inputDevices.filter((device) => {
-      const devEntities = effectiveEntities(device.id);
-      if (!devEntities.length) {
+      const devEntities = deviceEntityLookup[device.id];
+      if (!devEntities || !devEntities.length) {
        return true;
      }
-      return devEntities.every(
+      return entities.every(
        (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
      );
    });
@@ -236,11 +170,11 @@ export const getDevices = (

  if (includeDeviceClasses) {
    inputDevices = inputDevices.filter((device) => {
-      const devEntities = effectiveEntities(device.id);
-      if (!devEntities.length) {
+      const devEntities = deviceEntityLookup[device.id];
+      if (!devEntities || !devEntities.length) {
        return false;
      }
-      return devEntities.some((entity) => {
+      return deviceEntityLookup[device.id].some((entity) => {
        const stateObj = hass.states[entity.entity_id];
        if (!stateObj) {
          return false;
@@ -255,8 +189,8 @@ export const getDevices = (

  if (entityFilter) {
    inputDevices = inputDevices.filter((device) => {
-      const devEntities = effectiveEntities(device.id);
-      if (!devEntities.length) {
+      const devEntities = deviceEntityLookup[device.id];
+      if (!devEntities || !devEntities.length) {
        return false;
      }
      return devEntities.some((entity) => {
@@ -285,7 +219,7 @@ export const getDevices = (
      deviceEntityLookup[device.id]
    );

-    const { areaName, viaDeviceName, viaDeviceAreaName, parentDeviceName } =
+    const { areaName, viaDeviceName, viaDeviceAreaName } =
      computeDeviceAreaLabel(
        device,
        hass.areas,
@@ -322,79 +256,10 @@ export const getDevices = (
        domainName: domainName || null,
        viaDeviceName: viaDeviceName || null,
        viaDeviceArea: viaDeviceAreaName || null,
-        parentDeviceName: parentDeviceName || null,
      },
      sorting_label: [primary, areaName, domainName].filter(Boolean).join("_"),
    };
  });

-  if (!nested) {
-    return outputDevices;
-  }
-
-  // Order children directly after their parent and flag them for indented
-  // rendering. outputDevices is 1:1 with inputDevices, so we can pair them up.
-  const itemByDeviceId = new Map<string, DevicePickerItem>();
-  inputDevices.forEach((device, index) => {
-    itemByDeviceId.set(device.id, outputDevices[index]);
-  });
-  const presentIds = new Set(inputDevices.map((device) => device.id));
-
-  const childrenByParent = new Map<string, DeviceRegistryEntry[]>();
-  const topLevel: DeviceRegistryEntry[] = [];
-  for (const device of inputDevices) {
-    const parentId = device.parent_device_id;
-    // A child whose parent was filtered out is shown as a top-level row.
-    if (parentId && presentIds.has(parentId)) {
-      const siblings = childrenByParent.get(parentId);
-      if (siblings) {
-        siblings.push(device);
-      } else {
-        childrenByParent.set(parentId, [device]);
-      }
-    } else {
-      topLevel.push(device);
-    }
-  }
-
-  const compareByName = (a: DeviceRegistryEntry, b: DeviceRegistryEntry) =>
-    caseInsensitiveStringCompare(
-      itemByDeviceId.get(a.id)!.primary,
-      itemByDeviceId.get(b.id)!.primary,
-      hass.locale.language
-    );
-
-  topLevel.sort(compareByName);
-
-  const ordered: DevicePickerItem[] = [];
-  for (const device of topLevel) {
-    const parentItem = itemByDeviceId.get(device.id)!;
-    const children = childrenByParent.get(device.id);
-    if (children) {
-      children.sort(compareByName);
-      // Add the children's names to the parent's search terms so a search that
-      // matches a child keeps the parent visible (mirrors how a floor stays
-      // visible when one of its areas matches).
-      ordered.push({
-        ...parentItem,
-        search_labels: {
-          ...parentItem.search_labels,
-          childDeviceNames: children
-            .map((child) => itemByDeviceId.get(child.id)!.primary)
-            .join(" "),
-        },
-      });
-      children.forEach((child, index) => {
-        ordered.push({
-          ...itemByDeviceId.get(child.id)!,
-          is_child: true,
-          last: index === children.length - 1,
-        });
-      });
-    } else {
-      ordered.push(parentItem);
-    }
-  }
-
-  return ordered;
+  return outputDevices;
 };
@@ -15,13 +15,6 @@ export {
  subscribeDeviceRegistry,
 } from "../ws-device_registry";

-export type DeviceDisabler =
-  | "user"
-  | "integration"
-  | "config_entry"
-  // The device's parent device is disabled (child devices only).
-  | "device";
-
 export interface DeviceRegistryEntry extends RegistryEntry {
  id: string;
  config_entries: string[];
@@ -40,116 +33,11 @@ export interface DeviceRegistryEntry extends RegistryEntry {
  area_id: string | null;
  name_by_user: string | null;
  entry_type: "service" | null;
-  disabled_by: DeviceDisabler | null;
+  disabled_by: "user" | "integration" | "config_entry" | null;
  configuration_url: string | null;
  primary_config_entry: string | null;
-  // Set when this device is a child (logical part) of another device.
-  // null for regular top-level devices.
-  parent_device_id: string | null;
 }

-/**
- * A child device as it arrives over the wire from
- * `config/device_registry/list`. A child is a lightweight logical part of a
- * parent device (e.g. an outlet of a power strip); it only carries its own
- * fields and inherits the rest from its parent. It is never stored in
- * `hass.devices` in this shape — {@link resolveChildDevices} turns every child
- * into a complete {@link DeviceRegistryEntry} at ingestion, so downstream code
- * only ever sees full device entries.
- */
-export interface ChildDeviceRegistryEntry extends RegistryEntry {
-  id: string;
-  config_entry_id: string;
-  config_subentry_id: string | null;
-  identifiers: [string, string][];
-  name: string | null;
-  name_by_user: string | null;
-  labels: string[];
-  area_id: string | null;
-  disabled_by: DeviceDisabler | null;
-  parent_device_id: string;
-}
-
-/**
- * The raw, mixed list returned by `config/device_registry/list`: full devices
- * and stripped children, discriminated by the presence of full-device fields.
- */
-export type DeviceRegistryListEntry =
-  DeviceRegistryEntry | ChildDeviceRegistryEntry;
-
-/** Whether a resolved device entry is a child (logical part) of another device. */
-export const isChildDevice = (device: DeviceRegistryEntry): boolean =>
-  device.parent_device_id !== null;
-
-/**
- * Devices whose effective area is the given area: devices with that area, and
- * child devices that inherit it because they have no area of their own. Mirrors
- * core's dr.async_entries_for_area, so a child device with a different explicit
- * area is not part of its parent's area.
- */
-export const devicesInEffectiveArea = (
-  devices: Record<string, DeviceRegistryEntry>,
-  areaId: string
-): DeviceRegistryEntry[] =>
-  Object.values(devices).filter((device) => {
-    if (device.area_id) {
-      return device.area_id === areaId;
-    }
-    if (device.parent_device_id) {
-      return devices[device.parent_device_id]?.area_id === areaId;
-    }
-    return false;
-  });
-
-export interface DeviceRowItem {
-  device: DeviceRegistryEntry;
-  isChild: boolean;
-  // True for the last child of a parent, so the tree connector draws its end.
-  isLastChild: boolean;
-}
-
-/**
- * Order a flat device list so each child directly follows its parent, flagging
- * children for indented rendering. The incoming order of the top-level devices
- * (and of the children within each parent) is preserved. A child whose parent
- * is not in the list is treated as a top-level device.
- */
-export const groupDevicesByParent = (
-  devices: DeviceRegistryEntry[]
-): DeviceRowItem[] => {
-  const presentIds = new Set(devices.map((device) => device.id));
-  const childrenByParent = new Map<string, DeviceRegistryEntry[]>();
-  const topLevel: DeviceRegistryEntry[] = [];
-
-  for (const device of devices) {
-    const parentId = device.parent_device_id;
-    if (parentId && presentIds.has(parentId)) {
-      const siblings = childrenByParent.get(parentId);
-      if (siblings) {
-        siblings.push(device);
-      } else {
-        childrenByParent.set(parentId, [device]);
-      }
-    } else {
-      topLevel.push(device);
-    }
-  }
-
-  const result: DeviceRowItem[] = [];
-  for (const device of topLevel) {
-    result.push({ device, isChild: false, isLastChild: false });
-    const children = childrenByParent.get(device.id) ?? [];
-    children.forEach((child, index) => {
-      result.push({
-        device: child,
-        isChild: true,
-        isLastChild: index === children.length - 1,
-      });
-    });
-  }
-  return result;
-};
-
 export type DeviceEntityDisplayLookup = Record<
  string,
  EntityRegistryDisplayEntry[]
@@ -258,13 +146,15 @@ export const updateDeviceRegistryEntry = (
    ...updates,
  });

-export const removeDeviceFromRegistry = (
+export const removeConfigEntryFromDevice = (
  hass: HomeAssistant,
-  deviceId: string
+  deviceId: string,
+  configEntryId: string
 ) =>
-  hass.callWS<null>({
-    type: "config/device_registry/remove",
+  hass.callWS<DeviceRegistryEntry>({
+    type: "config/device_registry/remove_config_entry",
    device_id: deviceId,
+    config_entry_id: configEntryId,
  });

 export const sortDeviceRegistryByName = (
@@ -22,7 +22,6 @@ import {
 import type { DateRange } from "../common/datetime/calc_date_range";
 import { calcDateRange } from "../common/datetime/calc_date_range";
 import { formatTime24h } from "../common/datetime/format_time";
-import { DEFAULT_ENTITY_NAME } from "../common/entity/compute_entity_name_display";
 import { formatNumber } from "../common/number/format_number";
 import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import { groupBy } from "../common/util/group-by";
@@ -37,7 +36,6 @@ import type {
 import {
  fetchStatistics,
  getDisplayUnit,
-  getStatisticLabel,
  getStatisticMetadata,
  VOLUME_UNITS,
 } from "./recorder";
@@ -313,59 +311,6 @@ export interface EnergySourceByType {
 export const energySourcesByType = (prefs: EnergyPreferences) =>
  groupBy(prefs.energy_sources, (item) => item.type) as EnergySourceByType;

-/**
- * Display name of a configured statistic. A name set by the user always wins;
- * otherwise the entity is named the same way the rest of the UI names
- * entities, so devices sharing an entity name stay distinguishable.
- * Statistics without an entity (external or removed) keep the statistic label.
- */
-export const computeEnergyLabel = (
-  hass: HomeAssistant,
-  statisticId: string,
-  statisticsMetaData?: StatisticsMetaData,
-  customName?: string
-): string => {
-  if (customName) {
-    return customName;
-  }
-
-  const stateObj = hass.states[statisticId];
-
-  if (stateObj) {
-    return hass.formatEntityName(stateObj, DEFAULT_ENTITY_NAME);
-  }
-
-  return getStatisticLabel(hass, statisticId, statisticsMetaData);
-};
-
-/**
- * Device labels keyed by statistic id. Cards that show live power or flow
- * key their nodes by `stat_rate` instead of `stat_consumption`; devices
- * without the requested statistic are left out.
- */
-export const computeEnergyDeviceLabels = (
-  hass: HomeAssistant,
-  devices: DeviceConsumptionEnergyPreference[],
-  statsMetadata?: Record<string, StatisticsMetaData>,
-  statisticKey: "stat_consumption" | "stat_rate" = "stat_consumption"
-): Record<string, string> => {
-  const labels: Record<string, string> = {};
-
-  for (const device of devices) {
-    const statisticId = device[statisticKey];
-    if (statisticId) {
-      labels[statisticId] = computeEnergyLabel(
-        hass,
-        statisticId,
-        statsMetadata?.[statisticId],
-        device.name
-      );
-    }
-  }
-
-  return labels;
-};
-
 export interface EnergyData {
  start: Date;
  end?: Date;
@@ -76,7 +76,7 @@ export const getLogbookDataForContext = async (
 ): Promise<LogbookEntry[]> =>
  getLogbookDataFromServer(hass, startDate, undefined, undefined, contextId);

-export const getLogbookDataFromServer = (
+const getLogbookDataFromServer = (
  hass: HomeAssistant,
  startDate: string,
  endDate?: string,
@@ -2,15 +2,12 @@ import type { Connection } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceResource } from "../resource";
 import type { LovelaceStrategyConfig } from "./strategy";
-import type {
-  LovelaceDashboardBackgroundConfig,
-  LovelaceViewRawConfig,
-} from "./view";
+import type { LovelaceViewRawConfig } from "./view";

 export interface LovelaceDashboardBaseConfig {}

 export interface LovelaceConfig extends LovelaceDashboardBaseConfig {
-  background?: LovelaceDashboardBackgroundConfig;
+  background?: string;
  views: LovelaceViewRawConfig[];
 }

@@ -31,9 +31,6 @@ export interface LovelaceViewBackgroundConfig {
  attachment?: "scroll" | "fixed";
 }

-export type LovelaceDashboardBackgroundConfig =
-  string | LovelaceViewBackgroundConfig;
-
 export interface LovelaceViewHeaderConfig {
  card?: LovelaceCardConfig;
  layout?: "start" | "center" | "responsive";
@@ -63,7 +60,7 @@ export interface LovelaceBaseViewConfig {
  show_icon_and_title?: boolean;
  theme?: string;
  panel?: boolean;
-  background?: LovelaceDashboardBackgroundConfig;
+  background?: string | LovelaceViewBackgroundConfig;
  visible?: boolean | ShowViewConfig[];
  subview?: boolean;
  back_path?: string;
@@ -14,7 +14,6 @@ import type {
 import type { HomeAssistant } from "../types";
 import {
  type DeviceRegistryEntry,
-  devicesInEffectiveArea,
  getDeviceIntegrationLookup,
 } from "./device/device_registry";
 import type {
@@ -727,10 +726,9 @@ export const expandAreaTarget = (
 ) => {
  const newEntities: string[] = [];
  const newDevices: string[] = [];
-  // Devices of an area are its effective-area members: a child device inheriting
-  // this area counts, a child with a different explicit area does not.
-  devicesInEffectiveArea(devices, areaId).forEach((device) => {
+  Object.values(devices).forEach((device) => {
    if (
+      device.area_id === areaId &&
      deviceMeetsTargetSelector(
        hass.states,
        Object.values(entities),
@@ -792,8 +790,9 @@ export const areaMeetsTargetSelector = (
  targetSelector: TargetSelector,
  entitySources?: EntitySources
 ): boolean => {
-  const hasMatchingdevice = devicesInEffectiveArea(devices, areaId).some(
-    (device) =>
+  const hasMatchingdevice = Object.values(devices).some((device) => {
+    if (
+      device.area_id === areaId &&
      deviceMeetsTargetSelector(
        hass.states,
        Object.values(entities),
@@ -801,7 +800,11 @@ export const areaMeetsTargetSelector = (
        targetSelector,
        entitySources
      )
-  );
+    ) {
+      return true;
+    }
+    return false;
+  });
  if (hasMatchingdevice) {
    return true;
  }
@@ -843,8 +846,6 @@ export const deviceMeetsTargetSelector = (
    }
  }
  if (targetSelector.target?.entity) {
-    // Only the device's own entities: a child device is reached through the
-    // device target itself, so a parent must not match on a child's behalf.
    const entities = entityRegistry.filter(
      (reg) => reg.device_id === device.id
    );
@@ -1111,11 +1112,6 @@ export const resolveEntityIDs = (
  const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
  const targetLabels = new Set(ensureArray(targetPickerValue.label_id));

-  // Only a directly targeted device pulls in its child devices. Devices that are
-  // only reached through a label or an area must not, because core does not
-  // inherit labels to children and resolves areas by effective area membership.
-  const directDevices = new Set(targetDevices);
-
  targetLabels.forEach((labelId) => {
    const expanded = expandLabelTarget(
      hass,
@@ -1147,15 +1143,6 @@ export const resolveEntityIDs = (
    expanded.entities.forEach((id) => targetEntities.add(id));
  });

-  // Targeting a device also targets its child devices, matching core's
-  // server-side target resolution. Only direct device targets expand this way;
-  // nesting is single-level, so one pass is enough.
-  Object.values(devices).forEach((device) => {
-    if (device.parent_device_id && directDevices.has(device.parent_device_id)) {
-      targetDevices.add(device.id);
-    }
-  });
-
  targetDevices.forEach((deviceId) => {
    const expanded = expandDeviceTarget(
      hass,
@@ -7,10 +7,7 @@ import type { CallWS, HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area/area_registry";
 import type { FloorComboBoxItem } from "./area_floor_picker";
 import type { DevicePickerItem } from "./device/device_picker";
-import {
-  devicesInEffectiveArea,
-  type DeviceRegistryEntry,
-} from "./device/device_registry";
+import type { DeviceRegistryEntry } from "./device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/entity";
 import type { EntityComboBoxItem } from "./entity/entity_picker";
 import type { EntityRegistryDisplayEntry } from "./entity/entity_registry";
@@ -128,7 +125,9 @@ export const areaMeetsFilter = (
  entityFilter?: HaEntityPickerEntityFilterFunc,
  includeSecondary = false
 ): boolean => {
-  const areaDevices = devicesInEffectiveArea(devices, area.area_id);
+  const areaDevices = Object.values(devices).filter(
+    (device) => device.area_id === area.area_id
+  );

  if (
    areaDevices.some((device) =>
@@ -179,9 +178,6 @@ export const deviceMeetsFilter = (
  entityFilter?: HaEntityPickerEntityFilterFunc,
  includeSecondary = false
 ): boolean => {
-  // Only the device's own entities: child devices are targeted through the
-  // device itself (see core's target resolution), not by making a parent match
-  // on behalf of a child.
  const devEntities = Object.values(entities).filter(
    (entity) => entity.device_id === device.id
  );
@@ -22,6 +22,7 @@ export enum VacuumEntityFeature {
  STOP = 8,
  RETURN_HOME = 16,
  FAN_SPEED = 32,
+  BATTERY = 64,
  STATUS = 128,
  SEND_COMMAND = 256,
  LOCATE = 512,
@@ -33,6 +34,7 @@ export enum VacuumEntityFeature {
 }

 interface VacuumEntityAttributes extends HassEntityAttributeBase {
+  battery_level?: number;
  fan_speed?: string;
  fan_speed_list?: string[];
  [key: string]: any;
@@ -566,10 +566,9 @@ export const getWeatherStateIcon = (
  if (userDefinedIcon) {
    return html`
      <div
-        style=${styleMap({
-          "background-size": "cover",
+        style="background-size: cover;${styleMap({
          "background-image": userDefinedIcon,
-        })}
+        })}"
      ></div>
    `;
  }
@@ -2,87 +2,12 @@ import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
 import { debounce } from "../common/util/debounce";
-import type {
-  ChildDeviceRegistryEntry,
-  DeviceRegistryEntry,
-  DeviceRegistryListEntry,
-} from "./device/device_registry";
-
-// A full device carries fields that stripped children never do; use one of
-// those as the discriminant. This keeps "is a stripped child" decoupled from
-// "has a parent", so a hypothetical full-featured sub-device would still be
-// treated as a complete entry. We key off `connections` rather than
-// `config_entries` because the latter is a deprecated compatibility field core
-// plans to drop; `connections` is present on every full device and never on a
-// stripped child.
-const isChildEntry = (
-  entry: DeviceRegistryListEntry
-): entry is ChildDeviceRegistryEntry => !("connections" in entry);
-
-/**
- * Resolve the mixed device list from `config/device_registry/list` into a flat
- * list of complete {@link DeviceRegistryEntry} objects.
- *
- * Children are stripped over the wire and inherit the rest from their parent:
- * - config-entry association comes from the child's own `config_entry_id`, so
- *   children still show up under their integration;
- * - hardware/display fields (manufacturer, model, versions, ...) are inherited
- *   from the parent, since a child is a logical part of the same hardware;
- * - identity fields (`connections`, `via_device_id`) are NOT inherited — a
- *   child is not the parent and has no connections of its own.
- *
- * Nesting is a single level (core rejects a child as another child's parent),
- * so no recursion is needed.
- */
-export const resolveChildDevices = (
-  entries: DeviceRegistryListEntry[]
-): DeviceRegistryEntry[] => {
-  const parents = new Map<string, DeviceRegistryEntry>();
-  for (const entry of entries) {
-    if (!isChildEntry(entry)) {
-      parents.set(entry.id, entry);
-    }
-  }
-
-  return entries.map((entry) => {
-    if (!isChildEntry(entry)) {
-      return entry;
-    }
-
-    const parent = parents.get(entry.parent_device_id);
-
-    return {
-      // Structural fields derived from the child's own config entry.
-      config_entries: [entry.config_entry_id],
-      config_entries_subentries: {
-        [entry.config_entry_id]: [entry.config_subentry_id],
-      },
-      primary_config_entry: entry.config_entry_id,
-      // Hardware/display fields inherited from the parent.
-      manufacturer: parent?.manufacturer ?? null,
-      model: parent?.model ?? null,
-      model_id: parent?.model_id ?? null,
-      sw_version: parent?.sw_version ?? null,
-      hw_version: parent?.hw_version ?? null,
-      serial_number: parent?.serial_number ?? null,
-      entry_type: parent?.entry_type ?? null,
-      configuration_url: parent?.configuration_url ?? null,
-      // Identity fields — a child has none of its own.
-      connections: [],
-      via_device_id: null,
-      // The child's own fields (id, name, area_id, labels, identifiers,
-      // parent_device_id, ...) win over everything above.
-      ...entry,
-    };
-  });
-};
+import type { DeviceRegistryEntry } from "./device/device_registry";

 export const fetchDeviceRegistry = (conn: Connection) =>
-  conn
-    .sendMessagePromise<DeviceRegistryListEntry[]>({
-      type: "config/device_registry/list",
-    })
-    .then(resolveChildDevices);
+  conn.sendMessagePromise<DeviceRegistryEntry[]>({
+    type: "config/device_registry/list",
+  });

 const subscribeDeviceRegistryUpdates = (
  conn: Connection,
@@ -98,31 +98,20 @@ export const showDialog = async (
      return false;
    }
    LOADED[dialogTag] = {
-      element: dialogImport().then(
-        () => {
-          const dialogEl = document.createElement(dialogTag) as
-            HassDialogNext | HassDialog;
+      element: dialogImport().then(() => {
+        const dialogEl = document.createElement(dialogTag) as
+          HassDialogNext | HassDialog;

-          if ("showDialog" in dialogEl) {
-            // provide hass for legacy persistent dialogs
-            element.provideHass(dialogEl);
-          }
-
-          dialogEl.addEventListener("dialog-closed", _handleClosed);
-          dialogEl.addEventListener("dialog-closed", _handleClosedFocus);
-
-          return dialogEl;
-        },
-        (err) => {
-          // Don't cache a rejected import (e.g. a stale build's chunk 404s
-          // while the app stayed open): drop the entry so a later open
-          // re-imports instead of being permanently stuck on the rejected
-          // promise. The rejection still propagates to the global stale-build
-          // handler (logging-mixin) for recovery.
-          delete LOADED[dialogTag];
-          throw err;
+        if ("showDialog" in dialogEl) {
+          // provide hass for legacy persistent dialogs
+          element.provideHass(dialogEl);
        }
-      ),
+
+        dialogEl.addEventListener("dialog-closed", _handleClosed);
+        dialogEl.addEventListener("dialog-closed", _handleClosedFocus);
+
+        return dialogEl;
+      }),
    };
  }

@@ -7,11 +7,21 @@ import { isNumericEntity } from "../../data/history";
 import { CONTINUOUS_DOMAINS } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";

-export {
-  isMoreInfoView,
-  MORE_INFO_VIEWS,
-  type MoreInfoView,
-} from "./more-info-view";
+export const MORE_INFO_VIEWS = [
+  "info",
+  "history",
+  "settings",
+  "related",
+  "add_to",
+  "details",
+] as const;
+
+export type MoreInfoView = (typeof MORE_INFO_VIEWS)[number];
+
+export const isMoreInfoView = (
+  value: string | undefined
+): value is MoreInfoView =>
+  value !== undefined && (MORE_INFO_VIEWS as readonly string[]).includes(value);

 export const DOMAINS_NO_INFO = ["camera", "configurator"];
 /**
@@ -1,9 +0,0 @@
-import { createContext } from "@lit/context";
-
-export interface MoreInfoContext {
-  hash: URLSearchParams;
-  setHashParam: (key: string, value?: string) => void;
-}
-
-export const moreInfoContext =
-  createContext<MoreInfoContext>("more-info-context");
@@ -367,10 +367,10 @@ class MoreInfoLight extends LitElement {
          width: auto;
        }
        .wheel {
-          width: 28px;
-          height: 28px;
+          width: 30px;
+          height: 30px;
          flex: none;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: var(--ha-border-radius-xl);
        }
        .wheel.color {
          background-image: url("/static/images/color_wheel.png");
@@ -159,6 +159,23 @@ class MoreInfoVacuum extends LitElement {
      `;
    }

+    // Use deprecated battery_level and battery_icon attributes
+    if (
+      supportsFeature(this.stateObj, VacuumEntityFeature.BATTERY) &&
+      this.stateObj.attributes.battery_level
+    ) {
+      return html`
+        <span class="battery" slot="after-time">
+          <span
+            >${Math.round(
+              this.stateObj.attributes.battery_level
+            )}${blankBeforePercent(this._i18n.locale)}%</span
+          >
+          <ha-icon .icon=${this.stateObj.attributes.battery_icon}></ha-icon>
+        </span>
+      `;
+    }
+
    return nothing;
  }

@@ -11,7 +11,6 @@ import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { transform } from "../../../common/decorators/transform";
 import { formatNumber } from "../../../common/number/format_number";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
 import "../../../components/ha-spinner";
@@ -49,16 +48,11 @@ import type {
  HomeAssistantFormatters,
  HomeAssistantInternationalization,
 } from "../../../types";
-import { moreInfoContext, type MoreInfoContext } from "../context";

@customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
  @property({ attribute: false }) public stateObj?: WeatherEntity;

-  @state()
-  @consume({ context: moreInfoContext, subscribe: true })
-  private _moreInfoContext?: MoreInfoContext;
-
  @state()
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n!: HomeAssistantInternationalization;
@@ -133,33 +127,15 @@ class MoreInfoWeather extends LitElement {
  protected willUpdate(changedProps: PropertyValues): void {
    super.willUpdate(changedProps);

-    if (
-      (changedProps.has("stateObj") ||
-        changedProps.has("_moreInfoContext") ||
-        !this._subscribed) &&
-      this.stateObj
-    ) {
+    if ((changedProps.has("stateObj") || !this._subscribed) && this.stateObj) {
      const oldState = changedProps.get("stateObj") as
        WeatherEntity | undefined;
      if (
        oldState?.entity_id !== this.stateObj?.entity_id ||
-        changedProps.has("_moreInfoContext") ||
        !this._subscribed
      ) {
-        const supportedForecastTypes = getSupportedForecastTypes(this.stateObj);
-        const requestedForecastType =
-          this._moreInfoContext?.hash.get("forecast");
-        const selectedForecastType =
-          supportedForecastTypes.find(
-            (forecastType) => forecastType === requestedForecastType
-          ) ?? getDefaultForecastType(this.stateObj);
-        if (selectedForecastType !== requestedForecastType) {
-          this._moreInfoContext?.setHashParam("forecast", selectedForecastType);
-        }
-        if (this._forecastType !== selectedForecastType || !this._subscribed) {
-          this._forecastType = selectedForecastType;
-          this._subscribeForecastEvents();
-        }
+        this._forecastType = getDefaultForecastType(this.stateObj);
+        this._subscribeForecastEvents();
      }
    } else if (changedProps.has("_forecastType")) {
      this._subscribeForecastEvents();
@@ -533,17 +509,8 @@ class MoreInfoWeather extends LitElement {
    `;
  }

-  private _handleForecastTypeChanged(
-    ev: HASSDomEvent<{ name: ModernForecastType }>
-  ): void {
-    if (
-      !this.stateObj ||
-      !getSupportedForecastTypes(this.stateObj).includes(ev.detail.name)
-    ) {
-      return;
-    }
+  private _handleForecastTypeChanged(ev: CustomEvent): void {
    this._forecastType = ev.detail.name;
-    this._moreInfoContext?.setHashParam("forecast", this._forecastType);
  }

  static get styles(): CSSResultGroup {
@@ -1,24 +1,16 @@
-import { consume } from "@lit/context";
 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 memoizeOne from "memoize-one";
-import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
-import { computeFloorName } from "../../common/entity/compute_floor_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import checkValidDate from "../../common/datetime/check_valid_date";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import "../../components/ha-attribute-value";
-import "../../components/item/ha-list-item-value";
-import "../../components/list/ha-grouped-list";
+import "../../components/ha-card";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeShownAttributes } from "../../data/entity/entity_attributes";
-import { labelsContext } from "../../data/context";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { HomeAssistant } from "../../types";
 import "../../components/ha-yaml-editor";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -34,7 +26,6 @@ interface DetailsViewParams {
 interface DetailEntry {
  translationKey: LocalizeKeys;
  value: string;
-  href?: string;
 }

@customElement("ha-more-info-details")
@@ -49,15 +40,8 @@ class HaMoreInfoDetails extends LitElement {

  @state() private _stateObj?: HassEntity;

-  @consume({ context: labelsContext, subscribe: true })
-  @state()
-  private _labels?: LabelRegistryEntry[];
-
  protected willUpdate(changedProps: PropertyValues<this>): void {
    super.willUpdate(changedProps);
-    if (changedProps.has("entry") && this.entry) {
-      this.hass.loadBackendTranslation("title", [this.entry.platform]);
-    }
    if (changedProps.has("params") || changedProps.has("hass")) {
      if (this.params?.entityId && this.hass) {
        this._stateObj = this.hass.states[this.params.entityId];
@@ -70,93 +54,9 @@ class HaMoreInfoDetails extends LitElement {
      return nothing;
    }

-    const {
-      stateEntries,
-      attributes,
-      yamlData: stateYamlData,
-    } = this._getDetailData(this._stateObj);
-    const { floor, area, device } = getEntityContext(
-      this._stateObj,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      this.hass.floors
+    const { stateEntries, attributes, yamlData } = this._getDetailData(
+      this._stateObj
    );
-    const floorName = floor ? computeFloorName(floor) : undefined;
-    const areaName = area ? (computeAreaName(area) ?? area.area_id) : undefined;
-    const deviceName = device
-      ? computeDeviceNameDisplay(device, this.hass.localize, this.hass.states)
-      : undefined;
-    const integrationName = this.entry?.platform
-      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
-        this.entry.platform
-      : undefined;
-    const labelNames =
-      this.entry?.labels.map(
-        (labelId) =>
-          this._labels?.find((label) => label.label_id === labelId)?.name ??
-          labelId
-      ) ?? [];
-    const contextEntries: DetailEntry[] = [];
-
-    if (floor && floorName) {
-      contextEntries.push({
-        translationKey: "ui.dialogs.more_info_control.floor",
-        value: floorName,
-        href: "/config/areas/dashboard",
-      });
-    }
-    if (area && areaName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.area",
-        value: areaName,
-        href: `/config/areas/area/${area.area_id}`,
-      });
-    }
-    if (device && deviceName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.device",
-        value: deviceName,
-        href: `/config/devices/device/${device.id}`,
-      });
-    }
-    if (this.entry?.platform && integrationName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.integration",
-        value: integrationName,
-        href: this.entry.config_entry_id
-          ? `/config/integrations/integration/${this.entry.platform}#config_entry=${this.entry.config_entry_id}`
-          : undefined,
-      });
-    }
-
-    const entityEntries: DetailEntry[] = [
-      {
-        translationKey: "ui.dialogs.more_info_control.entity_id",
-        value: this.params.entityId,
-      },
-      {
-        translationKey: "ui.dialogs.more_info_control.labels",
-        value: labelNames.join(", ") || this.hass.localize("ui.common.none"),
-      },
-    ];
-    const yamlData = {
-      ...(contextEntries.length
-        ? {
-            context: {
-              ...(floorName ? { floor: floorName } : {}),
-              ...(areaName ? { area: areaName } : {}),
-              ...(deviceName ? { device: deviceName } : {}),
-              ...(integrationName ? { integration: integrationName } : {}),
-            },
-          }
-        : {}),
-      entity: {
-        entity_id: this.params.entityId,
-        labels: labelNames,
-      },
-      ...stateYamlData,
-    };

    return html`
      <div class="content">
@@ -169,41 +69,43 @@ class HaMoreInfoDetails extends LitElement {
                in-dialog
              ></ha-yaml-editor>`
            : html`
-                ${
-                  contextEntries.length
-                    ? html`<ha-grouped-list
-                        .header=${this.hass.localize(
-                          "ui.dialogs.more_info_control.context"
+                <section class="section">
+                  <h2 class="section-title">
+                    ${this.hass.localize(
+                      "ui.components.entity.entity-state-picker.state"
+                    )}
+                  </h2>
+                  <ha-card>
+                    <div class="card-content">
+                      <div class="data-group">
+                        ${stateEntries.map(
+                          (entry) =>
+                            html`<div class="data-entry">
+                              <div class="key">
+                                ${this.hass.localize(entry.translationKey)}
+                              </div>
+                              <div class="value">${entry.value}</div>
+                            </div>`
                        )}
-                      >
-                        ${this._renderEntries(contextEntries)}
-                      </ha-grouped-list>`
-                    : nothing
-                }
+                      </div>
+                    </div>
+                  </ha-card>
+                </section>

-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.components.entity.entity-state-picker.state"
-                  )}
-                >
-                  ${this._renderEntries(stateEntries)}
-                </ha-grouped-list>
-
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.dialogs.more_info_control.entity"
-                  )}
-                >
-                  ${this._renderEntries(entityEntries)}
-                </ha-grouped-list>
-
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.dialogs.more_info_control.attributes"
-                  )}
-                >
-                  ${this._renderAttributes(attributes)}
-                </ha-grouped-list>
+                <section class="section">
+                  <h2 class="section-title">
+                    ${this.hass.localize(
+                      "ui.dialogs.more_info_control.attributes"
+                    )}
+                  </h2>
+                  <ha-card>
+                    <div class="card-content">
+                      <div class="data-group">
+                        ${this._renderAttributes(attributes)}
+                      </div>
+                    </div>
+                  </ha-card>
+                </section>
              `
        }
      </div>
@@ -275,20 +177,6 @@ class HaMoreInfoDetails extends LitElement {
      : value;
  }

-  private _renderEntries(entries: DetailEntry[]) {
-    return entries.map(
-      (entry) => html`
-        <ha-list-item-value .label=${this.hass.localize(entry.translationKey)}>
-          ${
-            entry.href
-              ? html`<a href=${entry.href}>${entry.value}</a>`
-              : entry.value
-          }
-        </ha-list-item-value>
-      `
-    );
-  }
-
  private _renderAttributes(attributes: string[]) {
    if (attributes.length === 0) {
      return html`<div class="empty">
@@ -304,25 +192,28 @@ class HaMoreInfoDetails extends LitElement {

    return attributes.map(
      (attribute) => html`
-        <ha-list-item-value
-          .label=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this._stateObj!,
-            this.hass.entities,
-            attribute
-          )}
-        >
-          ${
-            attribute === "supported_features" && featureEnum
-              ? this._renderFeatures(featureEnum, this._stateObj!)
-              : html`
-                  <ha-attribute-value
-                    .attribute=${attribute}
-                    .stateObj=${this._stateObj}
-                  ></ha-attribute-value>
-                `
-          }
-        </ha-list-item-value>
+        <div class="data-entry">
+          <div class="key">
+            ${computeAttributeNameDisplay(
+              this.hass.localize,
+              this._stateObj!,
+              this.hass.entities,
+              attribute
+            )}
+          </div>
+          <div class="value">
+            ${
+              attribute === "supported_features" && featureEnum
+                ? this._renderFeatures(featureEnum, this._stateObj!)
+                : html`
+                    <ha-attribute-value
+                      .attribute=${attribute}
+                      .stateObj=${this._stateObj}
+                    ></ha-attribute-value>
+                  `
+            }
+          </div>
+        </div>
      `
    );
  }
@@ -356,18 +247,47 @@ class HaMoreInfoDetails extends LitElement {
      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
    }

-    ha-grouped-list + ha-grouped-list {
+    .section + .section {
      margin-top: var(--ha-space-4);
    }

-    a {
-      color: var(--primary-color);
+    .section-title {
+      margin: 0 0 var(--ha-space-2);
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+    }
+
+    .card-content {
+      padding: var(--ha-space-2) var(--ha-space-4);
+    }
+
+    .data-entry {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: var(--ha-space-2) 0;
+      border-bottom: 1px solid var(--divider-color);
+    }
+
+    .data-group .data-entry:last-of-type {
+      border-bottom: none;
+    }
+
+    .data-entry .value {
+      max-width: 60%;
+      overflow-wrap: break-word;
+      text-align: right;
+    }
+
+    .key {
+      flex-grow: 1;
+      color: var(--secondary-text-color);
    }

    .empty {
      color: var(--secondary-text-color);
      text-align: center;
-      padding: var(--ha-space-3) var(--ha-space-4);
+      padding: var(--ha-space-2) 0;
    }
  `;
 }
@@ -17,7 +17,6 @@ import {
  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { provide } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -41,13 +40,7 @@ import {
  getEntityEntryContext,
 } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
-import {
-  getHistoryState,
-  navigate,
-  replaceCurrentUrl,
-  updateHistoryState,
-} from "../../common/navigate";
-import { createMoreInfoUrl } from "../../common/url/more-info-query-params";
+import { navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -88,7 +81,6 @@ import {
  EDITABLE_DOMAINS_WITH_UNIQUE_ID,
  type MoreInfoView,
 } from "./const";
-import { moreInfoContext, type MoreInfoContext } from "./context";
 import "./controls/more-info-default";
 import type { FavoritesDialogContext } from "./favorites";
 import { getFavoritesDialogHandler } from "./favorites";
@@ -106,9 +98,6 @@ export interface MoreInfoDialogParams {
  tab?: MoreInfoView;
  large?: boolean;
  data?: Record<string, any>;
-  hash?: URLSearchParams;
-  fromUrl?: boolean;
-  returnUrl?: string;
  parentElement?: LitElement;
 }

@@ -154,12 +143,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<

  @state() private _data?: Record<string, any>;

-  @provide({ context: moreInfoContext })
-  @state()
-  private _moreInfoContext: MoreInfoContext = this._createMoreInfoContext();
-
-  private _returnUrl?: string;
-
  @state() private _currView: MoreInfoView = DEFAULT_VIEW;

  @state() private _initialView: MoreInfoView = DEFAULT_VIEW;
@@ -194,8 +177,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    const view = params.view || params.tab || DEFAULT_VIEW;

    this._data = params.data;
-    this._moreInfoContext = this._createMoreInfoContext(params.hash);
-    this._returnUrl = params.returnUrl;
    this._currView = view;
    this._initialView = view;
    this._childViewStack = [];
@@ -231,9 +212,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
  }

  private _dialogClosed() {
-    if (this._returnUrl) {
-      replaceCurrentUrl(this._returnUrl);
-    }
    this._entityId = undefined;
    this._parentEntityIds = [];
    this._entry = undefined;
@@ -242,8 +220,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    this._initialView = DEFAULT_VIEW;
    this._currView = DEFAULT_VIEW;
    this._childViewStack = [];
-    this._moreInfoContext = this._createMoreInfoContext();
-    this._returnUrl = undefined;
    this._isEscapeEnabled = true;
    window.removeEventListener("dialog-closed", this._enableEscapeKeyClose);
    window.removeEventListener("show-dialog", this._disableEscapeKeyClose);
@@ -291,49 +267,18 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    return entity?.device_id ?? null;
  }

-  private _setView(view: MoreInfoView, preserveHash = false) {
-    if (view !== this._currView && !preserveHash) {
-      this._moreInfoContext = this._createMoreInfoContext();
-    }
-    updateHistoryState({
-      dialogParams: {
-        ...getHistoryState()?.dialogParams,
-        view,
+  private _setView(view: MoreInfoView) {
+    history.replaceState(
+      {
+        ...history.state,
+        dialogParams: {
+          ...history.state?.dialogParams,
+          view,
+        },
      },
-    });
-    this._currView = view;
-    this._syncUrl();
-  }
-
-  private _syncUrl() {
-    if (!this._returnUrl || !this._entityId) {
-      return;
-    }
-    replaceCurrentUrl(
-      createMoreInfoUrl(this._returnUrl, {
-        entityId: this._entityId,
-        view: this._currView,
-        hash: this._moreInfoContext.hash,
-      })
+      ""
    );
-  }
-
-  private _createMoreInfoContext(hash?: URLSearchParams): MoreInfoContext {
-    return {
-      hash: new URLSearchParams(hash),
-      setHashParam: (key, value) => this._setHashParam(key, value),
-    };
-  }
-
-  private _setHashParam(key: string, value?: string) {
-    const hash = new URLSearchParams(this._moreInfoContext.hash);
-    if (value) {
-      hash.set(key, value);
-    } else {
-      hash.delete(key);
-    }
-    this._moreInfoContext = this._createMoreInfoContext(hash);
-    this._syncUrl();
+    this._currView = view;
  }

  private _goBack() {
@@ -361,9 +306,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    if (this._parentEntityIds.length > 0) {
      this._entityId = this._parentEntityIds.pop();
      this._currView = DEFAULT_VIEW;
-      this._moreInfoContext = this._createMoreInfoContext();
      this._loadEntityRegistryEntry();
-      this._syncUrl();
    }
  }

@@ -1064,22 +1007,19 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
    }
    const view = ev.detail.view || ev.detail.tab || DEFAULT_VIEW;
    if (entityId === this._entityId) {
-      this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
      this._infoEditMode = false;
      this._detailsYamlMode = false;
-      this._setView(view, true);
+      this._setView(view);
      return;
    }
    this._parentEntityIds = [...this._parentEntityIds, this._entityId!];
    this._entityId = entityId;
-    this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
    this._currView = view === "details" ? view : DEFAULT_VIEW;
    this._initialView = view;
    this._infoEditMode = false;
    this._detailsYamlMode = false;
    this._childViewStack = [];
    this._loadEntityRegistryEntry();
-    this._syncUrl();
  }

  private _enableEscapeKeyClose = () => {
@@ -1123,10 +1063,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
          outline: none;
          flex: 1;
          overflow: auto;
-          /* Keep the content width constant when the scrollbar toggles;
-             otherwise width-dependent content can flicker at the overflow
-             threshold (#53228). */
-          scrollbar-gutter: stable;
        }

        .content-wrapper.settings-view .fade-bottom {
@@ -1,15 +0,0 @@
-export const MORE_INFO_VIEWS = [
-  "info",
-  "history",
-  "settings",
-  "related",
-  "add_to",
-  "details",
-] as const;
-
-export type MoreInfoView = (typeof MORE_INFO_VIEWS)[number];
-
-export const isMoreInfoView = (
-  value: string | undefined
-): value is MoreInfoView =>
-  value !== undefined && (MORE_INFO_VIEWS as readonly string[]).includes(value);
@@ -60,7 +60,6 @@ import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
 import { isMac } from "../../util/is_mac";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
-import "../restart/automation-restart-status";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../voice-command-dialog/show-ha-voice-command-dialog";
 import {
@@ -800,9 +799,9 @@ export class QuickBar extends LitElement {
            title: this.hass.localize(
              `ui.dialogs.restart.${actionItem.action}.confirm_title`
            ),
-            text: html`${this.hass.localize(
-                `ui.dialogs.restart.${actionItem.action}.confirm_description`
-              )}<br /><br /><automation-restart-status></automation-restart-status>`,
+            text: this.hass.localize(
+              `ui.dialogs.restart.${actionItem.action}.confirm_description`
+            ),
            confirmText: this.hass.localize(
              `ui.dialogs.restart.${actionItem.action}.confirm_action`
            ),
@@ -1,54 +0,0 @@
-import { LitElement, html } from "lit";
-import { consume, type ContextType } from "@lit/context";
-import { customElement, state } from "lit/decorators";
-import { computeDomain } from "../../common/entity/compute_domain";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
-import { STRINGS_SEPARATOR_DOT } from "../../common/const";
-import {
-  formattersContext,
-  internationalizationContext,
-  statesContext,
-} from "../../data/context";
-
-const ENTITY_NAME_FORMAT: EntityNameItem[] = [
-  { type: "entity" },
-  { type: "area" },
-] as const;
-const ENTITY_NAME_OPTIONS = { separator: STRINGS_SEPARATOR_DOT } as const;
-
-@customElement("automation-restart-status")
-class AutomationRestartStatus extends LitElement {
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters!: ContextType<typeof formattersContext>;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: ContextType<typeof statesContext>;
-
-  protected render() {
-    const automations = Object.values(this._states).filter((s) => {
-      const domain = computeDomain(s.entity_id);
-      return (
-        (domain === "script" || domain === "automation") && s.attributes.current
-      );
-    });
-
-    return automations.length
-      ? html`${this._i18n.localize("ui.dialogs.restart.interrupt_automations")}
-          <ul>
-            ${automations.map((a) => html`<li>${this._formatters.formatEntityName(a, ENTITY_NAME_FORMAT, ENTITY_NAME_OPTIONS)}</li>`)}
-          </ul>`
-      : html`${this._i18n.localize("ui.dialogs.restart.no_interrupt_automations")}`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "automation-restart-status": AutomationRestartStatus;
-  }
-}
@@ -41,7 +41,6 @@ import {
  showConfirmationDialog,
 } from "../generic/show-dialog-box";
 import { showRestartWaitDialog } from "./show-dialog-restart";
-import "./automation-restart-status";

@customElement("dialog-restart")
 class DialogRestart extends LitElement {
@@ -358,12 +357,12 @@ class DialogRestart extends LitElement {
    const confirmed = await showConfirmationDialog(this, {
      title: this.hass.localize(`ui.dialogs.restart.${action}.confirm_title`),
      text: html`${this.hass.localize(
-          `ui.dialogs.restart.${action}.confirm_description`
-        )}${
-          backupProgressMessage
-            ? html`<br /><br /><ha-alert>${backupProgressMessage}</ha-alert>`
-            : nothing
-        } <br /><br /><automation-restart-status></automation-restart-status>`,
+        `ui.dialogs.restart.${action}.confirm_description`
+      )}${
+        backupProgressMessage
+          ? html`<br /><br /><ha-alert>${backupProgressMessage}</ha-alert>`
+          : nothing
+      }`,
      confirmText: this.hass.localize(
        `ui.dialogs.restart.${action}.confirm_action${backupState === "idle" ? "" : "_backup"}`
      ),
@@ -191,10 +191,6 @@ interface EMOutgoingMessageFocusElement extends EMMessage {
  };
 }

-interface EMOutgoingMessageReloadAndClearCache extends EMMessage {
-  type: "frontend/reload_and_clear_cache";
-}
-
 // These types are handled internally by the Android app via postMessage.
 // They are not sent by the frontend and should not be used directly.
 // They are intentionally listed here to prevent anyone from using them unintentionally.
@@ -224,7 +220,6 @@ type EMOutgoingMessageWithoutAnswer =
  | EMOutgoingMessageImprovConfigureDevice
  | EMOutgoingMessageAddEntityTo
  | EMOutgoingMessageFocusElement
-  | EMOutgoingMessageReloadAndClearCache
  | EMOutgoingMessageAssistSettings;

 export interface EMIncomingMessageRestart {
@@ -516,26 +511,14 @@ export class ExternalMessaging {
      // eslint-disable-next-line no-console
      console.log("Sending message to external app", msg);
    }
-    fireExternalBusMessage(msg);
+    if (window.externalAppV2) {
+      window.externalAppV2.postMessage(
+        JSON.stringify({ type: "externalBus", payload: msg })
+      );
+    } else if (window.externalApp) {
+      window.externalApp.externalBus(JSON.stringify(msg));
+    } else {
+      window.webkit!.messageHandlers.externalBus.postMessage(msg);
+    }
  }
 }
-
-/**
- * Post a message to the companion app's external bus without needing an
- * `ExternalMessaging` instance (i.e. without `hass`). Returns `false` when no
- * external bridge is present, so callers can fall back to browser behavior.
- */
-export const fireExternalBusMessage = (msg: EMMessage): boolean => {
-  if (window.externalAppV2) {
-    window.externalAppV2.postMessage(
-      JSON.stringify({ type: CALLBACK_EXTERNAL_BUS, payload: msg })
-    );
-  } else if (window.externalApp) {
-    window.externalApp.externalBus(JSON.stringify(msg));
-  } else if (window.webkit?.messageHandlers?.externalBus) {
-    window.webkit.messageHandlers.externalBus.postMessage(msg);
-  } else {
-    return false;
-  }
-  return true;
-};
@@ -74,6 +74,11 @@ export class MockVacuumEntity extends MockBaseEntity {
      stateAttrs.fan_speed = attrs.fan_speed ?? null;
    }

+    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.BATTERY)) {
+      stateAttrs.battery_level = attrs.battery_level ?? null;
+      stateAttrs.battery_icon = attrs.battery_icon ?? null;
+    }
+
    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.STATUS)) {
      stateAttrs.status = attrs.status ?? null;
    }
@@ -1,30 +0,0 @@
-import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { goBack } from "../common/navigate";
-import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-
-/**
- * Shared behavior of the toolbar back arrow. The arrow is a link to the
- * declared parent page so it can be opened in a new tab, but a plain click
- * returns to the page the user came from instead.
- */
-export const handleBackClick = (
-  ev: MouseEvent,
-  backPath?: string,
-  backCallback?: () => void
-): void => {
-  const path = sanitizeNavigationPath(backPath);
-
-  // Ctrl, cmd and shift click open the parent in a new tab or window: let
-  // the anchor handle those. A plain click is handled here instead, and
-  // isNavigationClick calls preventDefault so the anchor stays inert.
-  if (path && !isNavigationClick(ev)) {
-    return;
-  }
-
-  if (backCallback) {
-    backCallback();
-    return;
-  }
-
-  goBack(path);
-};
@@ -1,11 +1,10 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { getHistoryState, goBack } from "../common/navigate";
+import { goBack } from "../common/navigate";
 import "../components/ha-button";
 import "../components/ha-top-app-bar-fixed";
 import type { HomeAssistant } from "../types";
-import { reloadForUpdate } from "../util/recover-stale-build";
 import "../components/ha-alert";

@customElement("hass-error-screen")
@@ -20,9 +19,6 @@ class HassErrorScreen extends LitElement {

  @property() public error?: string;

-  @property({ type: Boolean, attribute: "show-reload" }) public showReload =
-    false;
-
  protected render(): TemplateResult {
    if (!this.toolbar) {
      return this._renderContent();
@@ -31,7 +27,7 @@ class HassErrorScreen extends LitElement {
    return html`
      <ha-top-app-bar-fixed
        .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || getHistoryState()?.root)}
+        .backButton=${!(this.rootnav || history.state?.root)}
      >
        ${this._renderContent()}
      </ha-top-app-bar-fixed>
@@ -43,19 +39,6 @@ class HassErrorScreen extends LitElement {
      <div class="content">
        <ha-alert alert-type="error">${this.error}</ha-alert>
        <slot>
-          ${
-            this.showReload
-              ? html`
-                  <ha-button
-                    appearance="filled"
-                    size="s"
-                    @click=${this._handleReload}
-                  >
-                    ${this.hass?.localize("ui.common.refresh")}
-                  </ha-button>
-                `
-              : nothing
-          }
          <ha-button appearance="plain" size="s" @click=${this._handleBack}>
            ${this.hass?.localize("ui.common.back")}
          </ha-button>
@@ -68,12 +51,6 @@ class HassErrorScreen extends LitElement {
    goBack();
  }

-  private _handleReload(): void {
-    // Dirty-aware: reloads when clean, or defers with a toast when an editor
-    // has unsaved changes.
-    reloadForUpdate();
-  }
-
  static get styles(): CSSResultGroup {
    return [
      css`
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { getHistoryState } from "../common/navigate";
 import "../components/animation/ha-fade-in";
 import "../components/ha-top-app-bar-fixed";
 import "../components/ha-spinner";
@@ -28,7 +27,7 @@ class HassLoadingScreen extends LitElement {
    return html`
      <ha-top-app-bar-fixed
        .narrow=${this.narrow}
-        .backButton=${!(this.rootnav || getHistoryState()?.root)}
+        .backButton=${!(this.rootnav || history.state?.root)}
      >
        ${this._renderContent()}
      </ha-top-app-bar-fixed>
@@ -5,7 +5,6 @@ import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { computeRouteTail } from "../common/url/route";
 import type { Route } from "../types";
-import { recoverFromStaleBuild } from "../util/recover-stale-build";
 import { PanelReady } from "./panel-ready";

 const extractPage = (path: string, defaultPage: string) => {
@@ -183,21 +182,10 @@ export class HassRouterPage extends ReactiveElement {
        this._showLoadingScreenTimeout = undefined;
      }

-      // A stale build (the panel's hashed chunk 404s after an upgrade while
-      // the app stayed open) is recoverable: reload onto the current build
-      // (or prompt when there are unsaved edits) instead of dead-ending.
-      const message = err instanceof Error ? err.message : String(err ?? "");
-      const stale = recoverFromStaleBuild(message, this);
-
-      // Show error screen, offering a reload action for a stale build. Set
-      // `showReload` on the returned element rather than through
-      // createErrorScreen's signature, so router subclasses that override
-      // createErrorScreen (e.g. ToolsRouter) can't drop it.
-      const errorScreen = this.createErrorScreen(
-        `Error while loading page ${newPage}.`
+      // Show error screen
+      this.appendChild(
+        this.createErrorScreen(`Error while loading page ${newPage}.`)
      );
-      errorScreen.showReload = stale;
-      this.appendChild(errorScreen);
    });

    // If we don't show loading screen, just show the panel.
@@ -4,9 +4,8 @@ import { customElement, eventOptions, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { HASSDomTargetEvent } from "../common/dom/fire_event";
-import { getHistoryState } from "../common/navigate";
+import { goBack } from "../common/navigate";
 import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-import { handleBackClick } from "./back-navigation";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { haStyleScrollbar } from "../resources/styles";
@@ -38,14 +37,19 @@ class HassSubpage extends LitElement {
      <div class="toolbar ${classMap({ narrow: this.narrow })}">
        <div class="toolbar-content">
          ${
-            this.mainPage || (!backPath && getHistoryState()?.root)
+            this.mainPage || history.state?.root
              ? html`<ha-menu-button></ha-menu-button>`
-              : html`
-                  <ha-icon-button-arrow-prev
-                    .href=${backPath}
-                    @click=${this._backTapped}
-                  ></ha-icon-button-arrow-prev>
-                `
+              : backPath
+                ? html`
+                    <ha-icon-button-arrow-prev
+                      href=${backPath}
+                    ></ha-icon-button-arrow-prev>
+                  `
+                : html`
+                    <ha-icon-button-arrow-prev
+                      @click=${this._backTapped}
+                    ></ha-icon-button-arrow-prev>
+                  `
          }

          <div class="main-title">
@@ -75,8 +79,12 @@ class HassSubpage extends LitElement {
    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
  }

-  private _backTapped(ev: MouseEvent): void {
-    handleBackClick(ev, this.backPath, this.backCallback);
+  private _backTapped(): void {
+    if (this.backCallback) {
+      this.backCallback();
+      return;
+    }
+    goBack();
  }

  static get styles(): CSSResultGroup {
@@ -34,7 +34,6 @@ import "../components/ha-dialog-footer";
 import "../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
 import "../components/ha-dropdown-item";
-import "../components/ha-filter-pane-chip";
 import "../components/ha-icon-button";
 import "../components/ha-svg-icon";
 import "../components/input/ha-input-search";
@@ -238,13 +237,20 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    const localize = this.localizeFunc || this.hass.localize;
    const showPane = this._showPaneController.value ?? !this.narrow;
    const filterButton = this.hasFilters
-      ? html`<ha-filter-pane-chip
-          .label=${localize("ui.components.subpage-data-table.filters")}
-          .path=${mdiFilterVariant}
-          .count=${this.filters}
-          .active=${!!this.filters}
-          @click=${this._toggleFilters}
-        ></ha-filter-pane-chip>`
+      ? html`<div class="relative">
+          <ha-assist-chip
+            .label=${localize("ui.components.subpage-data-table.filters")}
+            .active=${this.filters}
+            @click=${this._toggleFilters}
+          >
+            <ha-svg-icon slot="icon" .path=${mdiFilterVariant}></ha-svg-icon>
+          </ha-assist-chip>
+          ${
+            this.filters
+              ? html`<div class="badge">${this.filters}</div>`
+              : nothing
+          }
+        </div>`
      : nothing;

    const selectModeBtn =
@@ -465,14 +471,18 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
              ? nothing
              : html`<div class="pane" slot="pane">
                  <div class="table-header">
-                    <ha-filter-pane-chip
+                    <ha-assist-chip
                      .label=${localize(
                        "ui.components.subpage-data-table.filters"
                      )}
-                      .path=${mdiFilterVariant}
                      active
                      @click=${this._toggleFilters}
-                    ></ha-filter-pane-chip>
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiFilterVariant}
+                      ></ha-svg-icon>
+                    </ha-assist-chip>
                    ${
                      this.filters
                        ? html`<ha-icon-button
@@ -875,6 +885,24 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      padding: 16px;
    }

+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      inset-inline-end: -4px;
+      inset-inline-start: initial;
+      min-width: 16px;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-circle);
+      font-size: var(--ha-font-size-xs);
+      font-weight: var(--ha-font-weight-normal);
+      background-color: var(--primary-color);
+      line-height: var(--ha-line-height-normal);
+      text-align: center;
+      padding: 0px 2px;
+      color: var(--text-primary-color);
+    }
+
    .narrow-header-row {
      display: flex;
      align-items: center;
@@ -923,8 +951,11 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      gap: var(--ha-space-2);
    }

-    ha-assist-chip,
-    ha-filter-pane-chip {
+    .relative {
+      position: relative;
+    }
+
+    ha-assist-chip {
      --ha-assist-chip-container-shape: 10px;
      --ha-assist-chip-container-color: var(--card-background-color);
    }
@@ -14,10 +14,9 @@ import { canShowPage } from "../common/config/can_show_page";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { HASSDomTargetEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { getHistoryState, navigate } from "../common/navigate";
+import { goBack, navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { sanitizeNavigationPath } from "../common/url/sanitize-navigation-path";
-import { handleBackClick } from "./back-navigation";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
@@ -174,14 +173,19 @@ export class HassTabsSubpage extends LitElement {
        <slot name="toolbar">
          <div class="toolbar-content">
            ${
-              this.mainPage || (!backPath && getHistoryState()?.root)
+              this.mainPage || (!backPath && history.state?.root)
                ? html`<ha-menu-button></ha-menu-button>`
-                : html`
-                    <ha-icon-button-arrow-prev
-                      .href=${backPath}
-                      @click=${this._backTapped}
-                    ></ha-icon-button-arrow-prev>
-                  `
+                : backPath
+                  ? html`
+                      <ha-icon-button-arrow-prev
+                        .href=${backPath}
+                      ></ha-icon-button-arrow-prev>
+                    `
+                  : html`
+                      <ha-icon-button-arrow-prev
+                        @click=${this._backTapped}
+                      ></ha-icon-button-arrow-prev>
+                    `
            }
            ${
              this._narrow || !this.showTabs
@@ -242,8 +246,12 @@ export class HassTabsSubpage extends LitElement {
    this._content.focus({ preventScroll: true });
  }

-  private _backTapped(ev: MouseEvent): void {
-    handleBackClick(ev, this.backPath, this.backCallback);
+  private _backTapped(): void {
+    if (this.backCallback) {
+      this.backCallback();
+      return;
+    }
+    goBack();
  }

  private _isActiveTabPath(tabPath: string, currentPath: string): boolean {
@@ -6,16 +6,12 @@ import { storage } from "../common/decorators/storage";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { decodeMoreInfoUrl } from "../common/url/more-info-query-params";
-import { extractSearchParamsObject } from "../common/url/search-params";
-import { afterNextRender } from "../common/util/render-status";
 import { fetchHttpConfig } from "../data/http";
 import type { HttpConfigState } from "../data/http";
 import type { WindowWithPreloads } from "../data/preloads";
 import type { RecorderInfo } from "../data/recorder";
 import { getRecorderInfo } from "../data/recorder";
 import { showHttpPendingConfigDialog } from "../dialogs/http-pending-config/show-dialog-http-pending-config";
-import { showMoreInfoDialog } from "../dialogs/more-info/show-ha-more-info-dialog";
 import "../resources/custom-card-support";
 import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
@@ -23,7 +19,6 @@ import type { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { renderLaunchScreenContent } from "../util/launch-screen";
 import { checkOnboardingSurveyToast } from "../util/onboarding-survey";
-import { reloadForUpdate } from "../util/recover-stale-build";
 import {
  registerServiceWorker,
  supportsServiceWorker,
@@ -148,7 +143,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
      // the shadow root. Appending the dialog before that render would let it
      // tear the freshly-added dialog straight back out of the DOM.
      this.checkHttpPendingConfig();
-      this._restoreMoreInfoFromUrl();
    }
  }

@@ -183,12 +177,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    // Handle history changes
    window.addEventListener("popstate", () => updateRoute());

-    // Restore a more-info dialog deep-linked in the current URL, if any.
-    window.addEventListener("location-changed", () =>
-      this._restoreMoreInfoFromUrl()
-    );
-    window.addEventListener("popstate", () => this._restoreMoreInfoFromUrl());
-
    // Handle clicking on links
    window.addEventListener("click", (ev) => {
      const href = isNavigationClick(ev);
@@ -259,11 +247,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
          if (registration) {
            registration.update();
          } else if (oldVersion) {
-            reloadForUpdate();
+            // @ts-ignore Firefox supports forceGet
+            location.reload(true);
          }
        });
      } else if (oldVersion) {
-        reloadForUpdate();
+        // @ts-ignore Firefox supports forceGet
+        location.reload(true);
      }
    }
  }
@@ -308,35 +298,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    });
  }

-  private _restoreMoreInfoFromUrl() {
-    // Only restore once the main UI is rendered so the dialog has access to
-    // the loaded entities.
-    if (this.render !== this.renderHass) {
-      return;
-    }
-    const searchParams = extractSearchParamsObject();
-    if (!searchParams["more-info-entity-id"]) {
-      return;
-    }
-    const { entityId, view, hash } = decodeMoreInfoUrl(
-      window.location.search,
-      window.location.hash
-    );
-    if (!entityId) {
-      return;
-    }
-    // Wait for the next render to ensure the view is fully loaded
-    // because the more info dialog is closed when the url changes
-    afterNextRender(() => {
-      showMoreInfoDialog(this, {
-        entityId,
-        view,
-        hash,
-        fromUrl: true,
-      });
-    });
-  }
-
  protected async checkDataBaseMigration() {
    if (__DEMO__) {
      this._databaseMigration = false;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Petar Petrov	1028b37cfc	Exclude legend-hidden series when judging chart sonifiability	2026-08-11 10:51:22 +03:00
Petar Petrov	5dae5bab6c	Drop the direct chart2music dependency	2026-08-11 10:51:22 +03:00
Petar Petrov	ebde066ff9	Skip chart sonification when there is nothing to navigate	2026-08-11 10:51:22 +03:00
Petar Petrov	9b51a195c4	Mark charts as busy while the sonification chunk loads	2026-08-11 10:51:22 +03:00
Petar Petrov	bd2bd63d8e	Add keyboard and screen reader navigation to charts via Chart2Music	2026-08-11 10:51:22 +03:00