Align the grouped list header with the row text

.browserslistrc

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

.github/actions/build/action.yml

@@ -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 }}

.github/workflows/ci.yaml

@@ -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

.github/workflows/codeql-analysis.yaml

@@ -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"

.github/workflows/e2e.yaml

@@ -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

.github/workflows/nightly.yaml

@@ -58,24 +58,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 +69,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,14 +79,6 @@ 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: Upload build artifacts
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.gitignore

@@ -7,7 +7,6 @@ dist/
 /hass_frontend/
 /translations/
 /.compress-cache/
-/.rspack-cache/
 # Composite action source, not build output
 !/.github/actions/build/
 

build-scripts/bundle-budget.json

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

build-scripts/bundle.cjs

@@ -63,10 +63,8 @@ module.exports.htmlMinifierOptions = {
 };
 
 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
-  // Highest syntax the minifier may emit; it never downlevels. Every browser
-  // in [modern] is well past ES2020 (universal since spring 2020); the
-  // [legacy] floors (Chrome 59 / Safari 12) top out at ES2017.
-  ecma: latestBuild ? 2020 : 2017,
+  safari10: !latestBuild,
+  ecma: latestBuild ? 2015 : 5,
   module: latestBuild,
   format: { comments: false },
   sourceMap: !isTestBuild,
@@ -279,7 +277,7 @@ module.exports.config = {
     };
   },
 
-  gallery({ isProdBuild, latestBuild, isTestBuild }) {
+  gallery({ isProdBuild, latestBuild }) {
     return {
       name: "gallery" + nameSuffix(latestBuild),
       entry: {
@@ -289,7 +287,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isTestBuild,
       defineOverlay: {
         __DEMO__: true,
       },

build-scripts/gulp/rspack.js

@@ -252,7 +252,6 @@ gulp.task("rspack-prod-gallery", () =>
     createGalleryConfig({
       isProdBuild: true,
       latestBuild: true,
-      isTestBuild: env.isTestBuild(),
     })
   )
 );

build-scripts/rspack.cjs

@@ -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 }));

demo/src/stubs/devices.ts

@@ -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",
-  },
 ];

demo/src/stubs/energy.ts

@@ -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 => ({

demo/src/stubs/sensor.ts

@@ -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",

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

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

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

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

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

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

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

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

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

@@ -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>
               `
             )}

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

@@ -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",
   },
 ];
 

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

@@ -132,12 +132,12 @@ const ENTITIES = [
       fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
       preset_modes: ["home", "eco", "away"],
       swing_modes: ["auto", "1", "2", "3", "off"],
+      switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
       current_temperature: 23,
       target_temp_high: 24,
       target_temp_low: 21,
       fan_mode: "auto_low",
       preset_mode: "home",
-      swing_horizontal_modes: ["auto", "4", "5", "6", "off"],
       swing_mode: "auto",
       swing_horizontal_mode: "off",
       supported_features:
@@ -340,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")

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

@@ -238,7 +238,6 @@ const createDeviceRegistryEntries = (
     created_at: 0,
     modified_at: 0,
     primary_config_entry: null,
-    parent_device_id: null,
   },
 ];
 

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

@@ -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",

package.json

@@ -42,14 +42,14 @@
     "@babel/runtime": "8.0.0",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
-    "@codemirror/commands": "6.11.0",
+    "@codemirror/commands": "6.10.4",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.4",
     "@codemirror/lint": "6.9.7",
     "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.7.1",
-    "@codemirror/view": "6.43.9",
+    "@codemirror/view": "6.43.8",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.6.0",
@@ -89,7 +89,7 @@
     "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.2",
+    "barcode-detector": "3.2.1",
     "cally": "0.9.2",
     "color-name": "2.1.1",
     "comlink": "4.4.2",
@@ -103,11 +103,11 @@
     "echarts": "6.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 +151,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",
@@ -172,7 +172,6 @@
     "@vitest/coverage-v8": "4.1.10",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
-    "browserslist": "4.28.8",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
     "eslint": "10.8.1",
@@ -187,7 +186,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",
@@ -196,7 +195,6 @@
     "jsdom": "30.0.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lightningcss": "1.33.0",
     "lint-staged": "17.3.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
@@ -212,7 +210,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",
@@ -225,6 +223,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"
   },

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

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

src/common/datetime/format_time.ts

@@ -39,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,

src/common/entity/context/get_device_context.ts

@@ -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;
 };

src/common/entity/context/get_entity_context.ts

@@ -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;

src/common/translations/localize.ts

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

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

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

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

@@ -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}`;
-};

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

@@ -1,4 +1,3 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -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;
-const ROW_HEIGHT_INSIDE_LABELS = 64;
-const GRID_BOTTOM = 30;
-
 @customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -43,10 +38,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  /** Draw each row's name above its bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean })
-  public insideLabels = false;
-
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -69,13 +60,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _yWidth = 0;
 
-  private _width = 0;
-
-  private _resize = new ResizeController(this, {
-    skipInitial: true,
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   private _chartTime: Date = new Date();
 
   protected render() {
@@ -83,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) + GRID_BOTTOM}px`}
+        .height=${`${this.data.length * 30 + 30}px`}
         .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
@@ -193,19 +177,13 @@ export class StateHistoryChartTimeline extends LitElement {
       this._generateData();
     }
 
-    const width = this.insideLabels ? Math.round(this._resize.value ?? 0) : 0;
-    const widthChanged = width !== this._width;
-    this._width = width;
-
     if (
       !this.hasUpdated ||
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("showNames") ||
-      changedProps.has("insideLabels") ||
       changedProps.has("paddingYAxis") ||
-      changedProps.has("_yWidth") ||
-      widthChanged
+      changedProps.has("_yWidth")
     ) {
       this._createOptions();
     }
@@ -215,22 +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
     );
-    // Keeps the plot aligned with the line charts sharing the y-axis padding.
-    const plotPadding = insideLabels ? this.paddingYAxis : labelWidth;
-    // A zero width hides the labels instead of truncating them.
-    const insideLabelWidth = this._width
-      ? Math.max(0, this._width - plotPadding - labelMargin)
-      : undefined;
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -254,52 +224,37 @@ export class StateHistoryChartTimeline extends LitElement {
         axisLine: {
           show: false,
         },
-        axisLabel: insideLabels
-          ? {
-              show: showNames,
-              inside: true,
-              margin: 0,
-              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: {
-        top: insideLabels ? 20 : 10,
-        bottom: GRID_BOTTOM,
-        left: rtl ? 1 : plotPadding,
-        right: rtl ? plotPadding : 1,
+        top: 10,
+        bottom: 30,
+        left: rtl ? 1 : labelWidth,
+        right: rtl ? labelWidth : 1,
       },
       tooltip: {
         renderMode: "html",
@@ -443,10 +398,6 @@ export class StateHistoryChartTimeline extends LitElement {
   }
 
   static styles = css`
-    :host {
-      display: block;
-    }
-
     ha-chart-base {
       --chart-max-height: none;
     }

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

@@ -79,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;
     }

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

@@ -117,7 +117,7 @@ export class HaDataTable extends LitElement {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: ContextType<typeof internationalizationContext>;
 
-  @property({ type: Boolean, 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);

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

@@ -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;
-  }
-}

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

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

src/components/date-picker/styles.ts

@@ -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);

src/components/device/dialog-device-replaced.ts

@@ -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;

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

@@ -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}

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

@@ -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"}
             >
               ${

src/components/ha-button.ts

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

src/components/ha-code-editor.ts

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

src/components/ha-control-select.ts

@@ -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)}

src/components/ha-duration-input.ts

@@ -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]);

src/components/ha-empty-state.ts

@@ -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;
-  }
-}

src/components/ha-filter-blueprints.ts

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

src/components/ha-filter-categories.ts

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

src/components/ha-filter-device-classes.ts

@@ -1,287 +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, type HASSDomEvent } 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-domain-icon";
-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;
-  domain: 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, 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)}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${item.domain}
-                          .deviceClass=${item.deviceClass}
-                          .state=${item.domain === "binary_sensor" ? "on" : undefined}
-                        ></ha-domain-icon>
-                        ${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[] =>
-      this._deviceClassItems(this._deviceClassDomains(states), localize)
-        .filter(
-          (item) =>
-            !filter ||
-            item.deviceClass.toLowerCase().includes(filter) ||
-            item.name.toLowerCase().includes(filter)
-        )
-        .sort((a, b) => stringCompare(a.name, b.name, language))
-  );
-
-  private _deviceClassDomains = memoizeOne(
-    (states: ContextType<typeof statesContext>): Map<string, string[]> => {
-      const domains = new Map<string, string[]>();
-      Object.values(states).forEach((stateObj) => {
-        const deviceClass = stateObj.attributes.device_class;
-        if (!deviceClass) {
-          return;
-        }
-        const domain = computeStateDomain(stateObj);
-        const known = domains.get(deviceClass);
-        if (!known) {
-          domains.set(deviceClass, [domain]);
-        } else if (!known.includes(domain)) {
-          known.push(domain);
-        }
-      });
-      return domains;
-    }
-  );
-
-  private _deviceClassItems = memoizeOne(
-    (
-      deviceClassDomains: Map<string, string[]>,
-      localize: LocalizeFunc
-    ): DeviceClassItem[] =>
-      [...deviceClassDomains].map(([deviceClass, domains]) => {
-        for (const domain of domains) {
-          const name = localize(
-            `component.${domain}.entity_component.${deviceClass}.name`
-          );
-          if (name) {
-            return { deviceClass, domain, name };
-          }
-        }
-        return { deviceClass, domain: domains[0], name: deviceClass };
-      }),
-    ([domainsA, localizeA], [domainsB, localizeB]) =>
-      localizeA === localizeB &&
-      domainsA.size === domainsB.size &&
-      [...domainsA].every(
-        ([deviceClass, domains]) =>
-          domainsB.get(deviceClass)?.join() === domains.join()
-      )
-  );
-
-  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: HASSDomEvent<{ expanded: boolean }>) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
-  private _expandedChanged(ev: HASSDomEvent<{ expanded: boolean }>) {
-    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: Event) {
-    ev.preventDefault();
-    this.value = undefined;
-    fireEvent(this, "data-table-filter-changed", {
-      value: undefined,
-      items: undefined,
-    });
-  }
-
-  private _handleSearchChange(ev: InputEvent) {
-    const target = ev.target as HaInputSearch;
-    this._filter = (target.value ?? "").toLowerCase();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      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;
-  }
-}

src/components/ha-filter-devices.ts

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

src/components/ha-filter-domains.ts

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

src/components/ha-filter-entities.ts

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

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

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

src/components/ha-filter-integrations.ts

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

src/components/ha-filter-labels.ts

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

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

@@ -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;
-  }
-}

src/components/ha-filter-pane.ts

@@ -1,182 +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, shows the clear button when above zero. */
-  @property({ type: Number }) public count = 0;
-
-  /**
-   * Number of results the current filters resolve to, shown on the narrow
-   * confirm button. Leave undefined when the page shows everything.
-   */
-  @property({ attribute: false }) public resultCount?: number;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  protected render() {
-    const label =
-      this.label ?? this._localize("ui.components.subpage-data-table.filters");
-
-    if (this.narrow) {
-      return html`
-        <ha-adaptive-dialog
-          open
-          flexcontent
-          .headerTitle=${label}
-          @closed=${this._close}
-        >
-          ${this._renderClearButton("headerActionItems")}
-          <div class="sheet-content">
-            <slot></slot>
-          </div>
-          <ha-dialog-footer slot="footer">
-            <ha-button slot="primaryAction" data-dialog="close">
-              ${
-                this.resultCount === undefined
-                  ? this._localize("ui.common.close")
-                  : this._localize(
-                      "ui.components.subpage-data-table.show_results",
-                      { number: this.resultCount }
-                    )
-              }
-            </ha-button>
-          </ha-dialog-footer>
-        </ha-adaptive-dialog>
-      `;
-    }
-
-    return html`
-      <div class="header">
-        <ha-filter-pane-chip
-          active
-          .label=${label}
-          .path=${this.path}
-          .disabled=${this.disabled}
-          @click=${this._close}
-        ></ha-filter-pane-chip>
-        ${this._renderClearButton()}
-      </div>
-      <div class="content ha-scrollbar">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  private _renderClearButton(slot?: string) {
-    if (!this.count) {
-      return nothing;
-    }
-    return html`
-      <ha-icon-button
-        slot=${ifDefined(slot)}
-        .path=${mdiFilterVariantRemove}
-        .disabled=${this.disabled}
-        .label=${this._localize("ui.components.subpage-data-table.clear_filter")}
-        @click=${this._clear}
-      ></ha-icon-button>
-    `;
-  }
-
-  private _close() {
-    fireEvent(this, "close-filter-pane");
-  }
-
-  private _clear() {
-    fireEvent(this, "clear-filter");
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          flex: 0 0 var(--ha-filter-pane-width, 320px);
-          width: var(--ha-filter-pane-width, 320px);
-          box-sizing: border-box;
-          overflow: hidden;
-          border-inline-end: 1px solid var(--divider-color);
-        }
-
-        /* The bottom sheet positions itself, so the pane takes no space. */
-        :host([narrow]) {
-          display: contents;
-        }
-
-        .header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: var(--ha-space-4);
-          box-sizing: border-box;
-          height: 56px;
-          flex-shrink: 0;
-          padding: 0 16px;
-          background: var(--primary-background-color);
-          border-bottom: 1px solid var(--divider-color);
-        }
-
-        .content,
-        .sheet-content {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          min-height: 0;
-          overflow-y: auto;
-        }
-
-        ha-adaptive-dialog {
-          --dialog-content-padding: 0;
-          /* Fixed height so the sheet does not resize while filtering. */
-          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane": HaFilterPane;
-  }
-  interface HASSDomEvents {
-    "close-filter-pane": undefined;
-  }
-}

src/components/ha-filter-states.ts

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

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

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

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

@@ -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;
-};

src/components/ha-icon.ts

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

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

@@ -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) {

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

@@ -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,

src/components/ha-service-control.ts

@@ -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) {

src/components/ha-sidebar.ts

@@ -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;

src/components/ha-sources-picker.ts

@@ -1,268 +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.
- */
-export const applySourceFilters = (
-  entityIds: string[],
-  filters: SourceFilters,
-  states: HomeAssistant["states"],
-  entities: HomeAssistant["entities"],
-  entitySources?: EntitySources
-): string[] => {
-  const domains = filters.domains?.length ? filters.domains : undefined;
-  const deviceClasses = filters.deviceClasses?.length
-    ? filters.deviceClasses
-    : undefined;
-  const integrations = filters.integrations?.length
-    ? 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 =
-        entities[entityId]?.platform ?? 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`.
- *
- * The pages resolve every entity of a target, secondary ones included, so the
- * target picker counts them too.
- */
-@customElement("ha-sources-picker")
-export class HaSourcesPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public value: HassServiceTarget = {};
-
-  @property({ attribute: false }) public filters: SourceFilters = {};
-
-  @property({ attribute: false })
-  public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  /** Explains what the page shows while no target is picked. */
-  @property() public description?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  // Only one filter panel is expanded at a time, so that the expanded one can
-  // use the height that is left in the pane.
-  @state() private _expandedFilter?: keyof SourceFilters;
-
-  protected render() {
-    const noTargets = countTargets(this.value) === 0;
-
-    return html`
-      ${
-        this.description && noTargets
-          ? html`<div class="description">${this.description}</div>`
-          : nothing
-      }
-      <ha-target-picker
-        class=${classMap({ "no-padding-top": noTargets })}
-        .hass=${this.hass}
-        .value=${this.value}
-        .entityFilter=${this.entityFilter}
-        .primaryEntitiesOnly=${false}
-        .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}
-          .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}
-          .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}
-          .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 };
-  }
-}

src/components/ha-target-picker.ts

@@ -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;

src/components/ha-tree-indicator.ts

@@ -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>
     `;
   }

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

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

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

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

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

@@ -20,9 +20,6 @@ import { HaListVirtualized } from "./ha-list-virtualized";
  *
  * @attr {boolean} multi - Whether multiple options can be selected at once. In
  *   single-select mode, selecting a row clears any previous selection.
- * @attr {boolean} controlled - Only notify on click, never toggle a row's `selected` state.
- *   Set it when the consumer derives `selected` from its own state, for example when a row stands
- *   for a group whose click also changes its children.
  *
  * @fires ha-list-item-selected - Fires when the user selects a row.
  *   `detail` is the row's index (number).

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

@@ -11,9 +11,6 @@ import { SelectableMixin } from "./ha-list-selectable-mixin";
  * Toggle single vs multi selection via the `multi` attribute.
  *
  * @attr {boolean} multi - Whether multiple options can be selected at once.
- * @attr {boolean} controlled - Only notify on click, never toggle an option's `selected` state.
- *   Set it when the consumer derives `selected` from its own state, for example when a row stands
- *   for a group whose click also changes its children.
  *
  * @fires ha-list-item-selected - An option was selected. `detail: number` (option index).
  * @fires ha-list-item-deselected - An option was deselected (multi mode only). `detail: number` (option index).

src/components/target-picker/ha-target-picker-item-row.ts

@@ -393,9 +393,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 +416,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 +424,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 +433,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 +528,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 +560,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 +585,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;
           }

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -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;
+  }
+}

src/components/tile/ha-tile-container.ts

@@ -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;

src/data/automation_i18n.ts

@@ -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 {

src/data/device/device_picker.ts

@@ -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;
 };

src/data/device/device_registry.ts

@@ -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[]

src/data/energy.ts

@@ -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;

src/data/hassio/host.ts

@@ -126,18 +126,11 @@ export const listDatadisks = async (
     timeout: null,
   });
 
-// `disk` is "default" for the data disk, or a mount name. Omitting maxDepth
-// leaves the depth to the Supervisor, which defaults per target — walking a
-// mount costs a round trip per directory, so mounts want no depth at all.
-export const fetchHostDisksUsage = async (
-  hass: HomeAssistant,
-  disk = "default",
-  maxDepth?: number
-) =>
+export const fetchHostDisksUsage = async (hass: HomeAssistant) =>
   hass.callWS<HostDisksUsage>({
     type: "supervisor/api",
-    endpoint: `/host/disks/${disk}/usage`,
+    endpoint: "/host/disks/default/usage",
     method: "get",
     timeout: 3600, // seconds. This can take a while
-    ...(maxDepth === undefined ? {} : { params: { max_depth: maxDepth } }),
+    params: { max_depth: 3 },
   });

src/data/lovelace/config/types.ts

@@ -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[];
 }
 

src/data/lovelace/config/view.ts

@@ -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;

src/data/matter.ts

@@ -45,73 +45,6 @@ export interface MatterNodeDiagnostics {
 
 export type MatterPingResult = Record<string, boolean>;
 
-export type MatterTopologyNodeKind =
-  "matter" | "border_router" | "thread_unknown" | "wifi_ap";
-
-export type MatterTopologyStrength =
-  "strong" | "medium" | "weak" | "none" | "unknown";
-
-export interface MatterTopologyDirectionInfo {
-  strength: MatterTopologyStrength;
-  lqi?: number | null;
-  rssi?: number | null;
-}
-
-export interface MatterNetworkTopologyNode {
-  id: string;
-  kind: MatterTopologyNodeKind;
-  network_type: string;
-  node_id?: number | null;
-  ha_device_id?: string | null;
-  role?: string | null;
-  available?: boolean | null;
-  is_bridge?: boolean | null;
-  ext_address?: string | null;
-  rloc16?: number | null;
-  ext_pan_id?: string | null;
-  network_name?: string | null;
-  ssid?: string | null;
-  bssid?: string | null;
-  host_name?: string | null;
-  vendor_name?: string | null;
-  model_name?: string | null;
-  last_seen?: number | null;
-}
-
-export interface MatterNetworkTopologyConnection {
-  source: string;
-  target: string;
-  network: string;
-  strength: MatterTopologyStrength;
-  source_to_target?: MatterTopologyDirectionInfo | null;
-  target_to_source?: MatterTopologyDirectionInfo | null;
-  via_route_table?: boolean | null;
-  path_cost?: number | null;
-}
-
-export interface MatterNetworkTopology {
-  collected_at: number;
-  nodes: MatterNetworkTopologyNode[];
-  connections: MatterNetworkTopologyConnection[];
-}
-
-export const fetchMatterNetworkTopology = (
-  hass: HomeAssistant,
-  refresh = false
-): Promise<MatterNetworkTopology> =>
-  hass.callWS({
-    type: "matter/network_topology",
-    refresh,
-  });
-
-export const subscribeMatterNetworkTopology = (
-  hass: HomeAssistant,
-  callback: (topology: MatterNetworkTopology) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage<MatterNetworkTopology>(callback, {
-    type: "matter/subscribe_network_topology",
-  });
-
 export interface MatterCommissioningParameters {
   setup_pin_code: number;
   setup_manual_code: string;

src/data/selector.ts

@@ -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,
@@ -1135,10 +1131,6 @@ export const resolveEntityIDs = (
     expanded.areas.forEach((id) => targetAreas.add(id));
   });
 
-  // Devices only reached through an area do not pull in entities that are
-  // explicitly assigned to another area, matching core.
-  const devicesNotViaArea = new Set(targetDevices);
-
   targetAreas.forEach((areaId) => {
     const expanded = expandAreaTarget(
       hass,
@@ -1151,16 +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);
-      devicesNotViaArea.add(device.id);
-    }
-  });
-
   targetDevices.forEach((deviceId) => {
     const expanded = expandDeviceTarget(
       hass,
@@ -1168,11 +1150,7 @@ export const resolveEntityIDs = (
       entities,
       targetSelector
     );
-    expanded.entities.forEach((id) => {
-      if (devicesNotViaArea.has(deviceId) || !entities[id]?.area_id) {
-        targetEntities.add(id);
-      }
-    });
+    expanded.entities.forEach((id) => targetEntities.add(id));
   });
 
   return Array.from(targetEntities);

src/data/target.ts

@@ -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
   );

src/data/update.ts

@@ -184,7 +184,6 @@ export const checkForEntityUpdates = async (
   }
 
   showToast(element, {
-    id: "check-updates",
     message: hass.localize("ui.panel.config.updates.checking_updates"),
   });
 
@@ -195,7 +194,6 @@ export const checkForEntityUpdates = async (
       if (computeDomain(event.data.entity_id) === "update") {
         updated++;
         showToast(element, {
-          id: "check-updates",
           message: hass.localize("ui.panel.config.updates.updates_refreshed", {
             count: updated,
           }),
@@ -218,7 +216,6 @@ export const checkForEntityUpdates = async (
 
   if (updated === 0) {
     showToast(element, {
-      id: "check-updates",
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });
   }

src/data/vacuum.ts

@@ -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;

src/data/weather.ts

@@ -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>
     `;
   }

src/data/ws-device_registry.ts

@@ -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,

src/data/zwave_js.ts

@@ -1,7 +1,6 @@
 import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 import { callWS } from "../util/websocket";
-import type { DeviceRegistryEntry } from "./device/device_registry";
 
 export enum InclusionState {
   /** The controller isn't doing anything regarding inclusion. */
@@ -466,27 +465,6 @@ export interface RequestedGrant {
   clientSideAuth: boolean;
 }
 
-/**
- * Get the Z-Wave node ID of a device from its registry identifiers, which have
- * the form `<home id>-<node id>[-<manufacturer>:<product type>:<product id>]`.
- * Returns undefined for devices without a node, e.g. provisioning entries.
- */
-export const getNodeIdFromDevice = (
-  device: DeviceRegistryEntry
-): number | undefined => {
-  for (const [domain, identifier] of device.identifiers) {
-    // a provisioning entry is identified by its DSK, whose blocks parse as numbers
-    if (domain !== "zwave_js" || identifier.startsWith("provision_")) {
-      continue;
-    }
-    const nodeId = parseInt(identifier.split("-")[1]);
-    if (!isNaN(nodeId)) {
-      return nodeId;
-    }
-  }
-  return undefined;
-};
-
 export const invokeZWaveCCApi = <T = unknown>(
   hass: HomeAssistant,
   device_id: string,

src/dialogs/more-info/const.ts

@@ -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"];
 /**

src/dialogs/more-info/context.ts

@@ -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");

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -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;
   }
 

src/dialogs/more-info/controls/more-info-weather.ts

@@ -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 {

src/dialogs/more-info/ha-more-info-details.ts

@@ -1,14 +1,9 @@
-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";
@@ -16,9 +11,7 @@ import "../../components/item/ha-list-item-value";
 import "../../components/list/ha-grouped-list";
 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 +27,6 @@ interface DetailsViewParams {
 interface DetailEntry {
   translationKey: LocalizeKeys;
   value: string;
-  href?: string;
 }
 
 @customElement("ha-more-info-details")
@@ -49,15 +41,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 +55,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,32 +70,19 @@ 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"
-                        )}
-                      >
-                        ${this._renderEntries(contextEntries)}
-                      </ha-grouped-list>`
-                    : nothing
-                }
-
                 <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"
+                  ${stateEntries.map(
+                    (entry) =>
+                      html`<ha-list-item-value
+                        .label=${this.hass.localize(entry.translationKey)}
+                      >
+                        ${entry.value}
+                      </ha-list-item-value>`
                   )}
-                >
-                  ${this._renderEntries(entityEntries)}
                 </ha-grouped-list>
 
                 <ha-grouped-list
@@ -275,20 +163,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">
@@ -360,10 +234,6 @@ class HaMoreInfoDetails extends LitElement {
       margin-top: var(--ha-space-4);
     }
 
-    a {
-      color: var(--primary-color);
-    }
-
     .empty {
       color: var(--secondary-text-color);
       text-align: center;

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -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";
@@ -44,10 +43,8 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques
 import {
   getHistoryState,
   navigate,
-  replaceCurrentUrl,
   updateHistoryState,
 } from "../../common/navigate";
-import { createMoreInfoUrl } from "../../common/url/more-info-query-params";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -88,7 +85,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 +102,6 @@ export interface MoreInfoDialogParams {
   tab?: MoreInfoView;
   large?: boolean;
   data?: Record<string, any>;
-  hash?: URLSearchParams;
-  fromUrl?: boolean;
-  returnUrl?: string;
   parentElement?: LitElement;
 }
 
@@ -154,12 +147,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 +181,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 +216,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _dialogClosed() {
-    if (this._returnUrl) {
-      replaceCurrentUrl(this._returnUrl);
-    }
     this._entityId = undefined;
     this._parentEntityIds = [];
     this._entry = undefined;
@@ -242,8 +224,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,10 +271,7 @@ 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();
-    }
+  private _setView(view: MoreInfoView) {
     updateHistoryState({
       dialogParams: {
         ...getHistoryState()?.dialogParams,
@@ -302,38 +279,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
       },
     });
     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();
   }
 
   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 = () => {

src/dialogs/more-info/more-info-view.ts

@@ -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);

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -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`
             ),

src/dialogs/restart/automation-restart-status.ts

@@ -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;
-  }
-}

src/dialogs/restart/dialog-restart.ts

@@ -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"}`
       ),

src/fake_data/entities/vacuum-entity.ts

@@ -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;
     }