Add WIP keyboard shortcuts

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/cast_deployment.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -77,7 +77,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             node_modules/.cache/prettier

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.github/workflows/demo_deployment.yaml

@@ -43,7 +43,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -78,7 +78,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -40,7 +40,7 @@ jobs:
       - name: Deploy preview to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/release.yaml

@@ -75,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.07.0
+        uses: home-assistant/wheels@2025.09.1
         with:
           abi: cp313
           tag: musllinux_1_2

.nvmrc

@@ -1 +1 @@
-lts/iron
+22.20.0

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.10.2.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

cast/src/media/entrypoint.ts

@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/demo/cast-demo-entities.ts

@@ -75,7 +75,7 @@ export const castDemoEntities: () => Entity[] = () =>
         longitude: 4.8903147,
         radius: 100,
         friendly_name: "Home",
-        icon: "hass:home",
+        icon: "mdi:home",
       },
     },
     "input_number.harmonyvolume": {
@@ -88,7 +88,7 @@ export const castDemoEntities: () => Entity[] = () =>
         step: 1,
         mode: "slider",
         friendly_name: "Volume",
-        icon: "hass:volume-high",
+        icon: "mdi:volume-high",
       },
     },
     "climate.upstairs": {

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/climate",
                 name: "Climate controls",
-                icon: "hass:arrow-right",
+                icon: "mdi:arrow-right",
               },
             ],
           },
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/overview",
                 name: "Back",
-                icon: "hass:arrow-left",
+                icon: "mdi:arrow-left",
               },
             ],
           },

cast/src/receiver/entrypoint.ts

@@ -40,8 +40,7 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType =
-    "NONE" as framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -90,7 +89,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: "json" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -98,7 +97,9 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (playerManager.getPlayerState() !== "IDLE") {
+    if (
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+    ) {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -112,7 +113,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -126,23 +127,24 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/src/configs/arsaboo/entities.ts

@@ -143,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "on",
       attributes: {
         friendly_name: "Home Automation",
-        icon: "hass:home-automation",
+        icon: "mdi:home-automation",
       },
     },
     "input_boolean.tvtime": {

demo/src/configs/arsaboo/lovelace.ts

@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",
   views: [
     {
-      icon: "hass:home-assistant",
+      icon: "mdi:home-assistant",
       id: "home",
       title: "Home",
       cards: [

demo/src/configs/jimpower/lovelace.ts

@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
         },
       ],
       path: "security",
-      icon: "hass:shield-home",
+      icon: "mdi:shield-home",
       name: "Security",
       background:
         'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',

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

@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
     }
     .card-content {
       display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

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

@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

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

@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           --mdc-icon-size: 48px;
           margin-bottom: 32px;
         }

hassio/src/resources/hassio-style.ts

@@ -31,7 +31,7 @@ export const hassioStyle = css`
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
   }
   @media screen and (min-width: 640px) {
     .card-group {

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

@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-card .card-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
       }
       ha-alert p {
         text-align: unset;

package.json

@@ -28,13 +28,13 @@
   "dependencies": {
     "@babel/runtime": "7.28.4",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.7",
+    "@codemirror/autocomplete": "6.19.0",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.2",
+    "@codemirror/view": "6.38.3",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.0",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.0",
-    "@vaadin/vaadin-themable-mixin": "24.9.0",
+    "@vaadin/combo-box": "24.9.1",
+    "@vaadin/vaadin-themable-mixin": "24.9.1",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.12",
+    "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -157,11 +157,11 @@
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.6",
+    "@rsdoctor/rspack-plugin": "1.3.0",
+    "@rspack/core": "1.5.7",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -203,7 +203,7 @@
     "husky": "9.1.7",
     "jsdom": "27.0.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.2.0",
+    "lint-staged": "16.2.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -213,11 +213,11 @@
     "rspack-manifest-plugin": "5.1.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.4.4",
+    "tar": "7.5.1",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "typescript-eslint": "8.44.1",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -235,5 +235,5 @@
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.10.2"
+  "packageManager": "yarn@4.10.3"
 }

src/common/color/hex.ts

@@ -1,23 +1,40 @@
+import { formatHex, parse } from "culori";
+
+/**
+ * Expands a 3-digit hex color to a 6-digit hex color.
+ * @param hex - The hex color to expand.
+ * @returns The expanded hex color.
+ * @throws If the hex color is invalid.
+ */
 export const expandHex = (hex: string): string => {
-  hex = hex.replace("#", "");
-  if (hex.length === 6) return hex;
-  let result = "";
-  for (const val of hex) {
-    result += val + val;
+  const color = parse(hex);
+  if (!color) {
+    throw new Error(`Invalid hex color: ${hex}`);
   }
-  return result;
+  const formattedColor = formatHex(color);
+  if (!formattedColor) {
+    throw new Error(`Could not format hex color: ${hex}`);
+  }
+  return formattedColor.replace("#", "");
 };
 
-// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+/**
+ * Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
+ * @param c1 - The first hex color.
+ * @param c2 - The second hex color.
+ * @param blend - The blend percentage (0-100).
+ * @returns The blended hex color.
+ */
 export const hexBlend = (c1: string, c2: string, blend = 50): string => {
-  let color = "";
   c1 = expandHex(c1);
   c2 = expandHex(c2);
+  let color = "";
   for (let i = 0; i <= 5; i += 2) {
     const h1 = parseInt(c1.substring(i, i + 2), 16);
     const h2 = parseInt(c2.substring(i, i + 2), 16);
-    let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
-    while (hex.length < 2) hex = "0" + hex;
+    const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
+      .toString(16)
+      .padStart(2, "0");
     color += hex;
   }
   return `#${color}`;

src/common/color/rgb.ts

@@ -1,28 +1,49 @@
-export const luminosity = (rgb: [number, number, number]): number => {
-  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
-  const lum: [number, number, number] = [0, 0, 0];
-  for (let i = 0; i < rgb.length; i++) {
-    const chan = rgb[i] / 255;
-    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
-  }
+import { wcagLuminance, wcagContrast } from "culori";
 
-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
-};
+/**
+ * Calculates the luminosity of an RGB color.
+ * @param rgb - The RGB color to calculate the luminosity of.
+ * @returns The luminosity of the color.
+ */
+export const luminosity = (rgb: [number, number, number]): number =>
+  wcagLuminance({
+    mode: "rgb",
+    r: rgb[0] / 255,
+    g: rgb[1] / 255,
+    b: rgb[2] / 255,
+  });
 
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param color1 - The first color to calculate the contrast ratio of.
+ * @param color2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const rgbContrast = (
   color1: [number, number, number],
   color2: [number, number, number]
-) => {
-  const lum1 = luminosity(color1);
-  const lum2 = luminosity(color2);
-
-  if (lum1 > lum2) {
-    return (lum1 + 0.05) / (lum2 + 0.05);
+) =>
+  wcagContrast(
+    {
+      mode: "rgb",
+      r: color1[0] / 255,
+      g: color1[1] / 255,
+      b: color1[2] / 255,
+    },
+    {
+      mode: "rgb",
+      r: color2[0] / 255,
+      g: color2[1] / 255,
+      b: color2[2] / 255,
     }
+  );
 
-  return (lum2 + 0.05) / (lum1 + 0.05);
-};
-
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param rgb1 - The first color to calculate the contrast ratio of.
+ * @param rgb2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]

src/common/entity/context/get_area_context.ts

@@ -8,10 +8,10 @@ interface AreaContext {
 }
 export const getAreaContext = (
   area: AreaRegistryEntry,
-  hass: HomeAssistant
+  hassFloors: HomeAssistant["floors"]
 ): AreaContext => {
   const floorId = area.floor_id;
-  const floor = floorId ? hass.floors[floorId] : undefined;
+  const floor = floorId ? hassFloors[floorId] : undefined;
 
   return {
     area: area,

src/components/chart/down-sample.ts

@@ -1,22 +1,21 @@
 import type { LineSeriesOption } from "echarts";
 
-export function downSampleLineData<
-  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
->(
-  data: T[] | undefined,
-  maxDetails: number,
+export function downSampleLineData(
+  data: LineSeriesOption["data"],
+  chartWidth: number,
   minX?: number,
   maxX?: number
-): T[] {
-  if (!data) {
-    return [];
+) {
+  if (!data || data.length < 10) {
+    return data;
   }
-  if (data.length <= maxDetails) {
+  const width = chartWidth * window.devicePixelRatio;
+  if (data.length <= width) {
     return data;
   }
   const min = minX ?? getPointData(data[0]!)[0];
   const max = maxX ?? getPointData(data[data.length - 1]!)[0];
-  const step = Math.ceil((max - min) / Math.floor(maxDetails));
+  const step = Math.floor((max - min) / width);
   const frames = new Map<
     number,
     {
@@ -48,7 +47,7 @@ export function downSampleLineData<
   }
 
   // Convert frames back to points
-  const result: T[] = [];
+  const result: typeof data = [];
   for (const [_i, frame] of frames) {
     // Use min/max points to preserve visual accuracy
     // The order of the data must be preserved so max may be before min

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

@@ -804,7 +804,7 @@ export class HaChartBase extends LitElement {
             sampling: undefined,
             data: downSampleLineData(
               data as LineSeriesOption["data"],
-              this.clientWidth * window.devicePixelRatio,
+              this.clientWidth,
               minX,
               maxX
             ),
@@ -974,7 +974,7 @@ export class HaChartBase extends LitElement {
       right: 4px;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .chart-controls.small {
       top: 0;
@@ -1011,7 +1011,7 @@ export class HaChartBase extends LitElement {
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .chart-legend li {
       height: 24px;

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

@@ -5,24 +5,18 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
-import {
-  computeDeviceName,
-  computeDeviceNameDisplay,
-} from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
-  getDeviceEntityDisplayLookup,
-  type DeviceEntityDisplayLookup,
+  getDevices,
+  type DevicePickerItem,
   type DeviceRegistryEntry,
 } from "../../data/device_registry";
-import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -30,11 +24,6 @@ export type HaDevicePickerDeviceFilterFunc = (
 
 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
-interface DevicePickerItem extends PickerComboBoxItem {
-  domain?: string;
-  domain_name?: string;
-}
-
 @customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -117,160 +106,16 @@ export class HaDevicePicker extends LitElement {
   }
 
   private _getItems = () =>
-    this._getDevices(
-      this.hass.devices,
-      this.hass.entities,
+    getDevices(
+      this.hass,
       this._configEntryLookup,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
       this.deviceFilter,
       this.entityFilter,
-      this.excludeDevices
-    );
-
-  private _getDevices = memoizeOne(
-    (
-      haDevices: HomeAssistant["devices"],
-      haEntities: HomeAssistant["entities"],
-      configEntryLookup: Record<string, ConfigEntry>,
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      deviceFilter: this["deviceFilter"],
-      entityFilter: this["entityFilter"],
-      excludeDevices: this["excludeDevices"]
-    ): DevicePickerItem[] => {
-      const devices = Object.values(haDevices);
-      const entities = Object.values(haEntities);
-
-      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-
-      if (
-        includeDomains ||
-        excludeDomains ||
-        includeDeviceClasses ||
-        entityFilter
-      ) {
-        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-      }
-
-      let inputDevices = devices.filter(
-        (device) => device.id === this.value || !device.disabled_by
-      );
-
-      if (includeDomains) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) =>
-            includeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-      }
-
-      if (excludeDomains) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return true;
-          }
-          return entities.every(
-            (entity) =>
-              !excludeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-      }
-
-      if (excludeDevices) {
-        inputDevices = inputDevices.filter(
-          (device) => !excludeDevices!.includes(device.id)
-        );
-      }
-
-      if (includeDeviceClasses) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return (
-              stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class)
-            );
-          });
-        });
-      }
-
-      if (entityFilter) {
-        inputDevices = inputDevices.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return devEntities.some((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return entityFilter(stateObj);
-          });
-        });
-      }
-
-      if (deviceFilter) {
-        inputDevices = inputDevices.filter(
-          (device) =>
-            // We always want to include the device of the current value
-            device.id === this.value || deviceFilter!(device)
-        );
-      }
-
-      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
-        const deviceName = computeDeviceNameDisplay(
-          device,
-          this.hass,
-          deviceEntityLookup[device.id]
-        );
-
-        const { area } = getDeviceContext(device, this.hass);
-
-        const areaName = area ? computeAreaName(area) : undefined;
-
-        const configEntry = device.primary_config_entry
-          ? configEntryLookup?.[device.primary_config_entry]
-          : undefined;
-
-        const domain = configEntry?.domain;
-        const domainName = domain
-          ? domainToName(this.hass.localize, domain)
-          : undefined;
-
-        return {
-          id: device.id,
-          label: "",
-          primary:
-            deviceName ||
-            this.hass.localize("ui.components.device-picker.unnamed_device"),
-          secondary: areaName,
-          domain: configEntry?.domain,
-          domain_name: domainName,
-          search_labels: [deviceName, areaName, domain, domainName].filter(
-            Boolean
-          ) as string[],
-          sorting_label: deviceName || "zzz",
-        };
-      });
-
-      return outputDevices;
-    }
+      this.excludeDevices,
+      this.value
     );
 
   private _valueRenderer = memoizeOne(

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

@@ -7,7 +7,7 @@ import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
-import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {

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

@@ -1,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -8,8 +7,6 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 
-export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
-
 interface AttributeOption {
   value: string;
   label: string;

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

@@ -1,14 +1,16 @@
 import { mdiPlus, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeStateName } from "../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import {
+  getEntities,
+  type EntityComboBoxItem,
+} from "../../data/entity_registry";
 import { domainToName } from "../../data/integration";
 import {
   isHelperDomain,
@@ -19,21 +21,11 @@ import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type {
-  PickerComboBoxItem,
-  PickerComboBoxSearchFn,
-} from "../ha-picker-combo-box";
+import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
 import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";
 
-interface EntityComboBoxItem extends PickerComboBoxItem {
-  domain_name?: string;
-  stateObj?: HassEntity;
-}
-
-export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
-
 const CREATE_ID = "___create-new-entity___";
 
 @customElement("ha-entity-picker")
@@ -250,7 +242,7 @@ export class HaEntityPicker extends LitElement {
   );
 
   private _getItems = () =>
-    this._getEntities(
+    getEntities(
       this.hass,
       this.includeDomains,
       this.excludeDomains,
@@ -258,123 +250,8 @@ export class HaEntityPicker extends LitElement {
       this.includeDeviceClasses,
       this.includeUnitOfMeasurement,
       this.includeEntities,
-      this.excludeEntities
-    );
-
-  private _getEntities = memoizeOne(
-    (
-      hass: this["hass"],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      entityFilter: this["entityFilter"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
-      includeEntities: this["includeEntities"],
-      excludeEntities: this["excludeEntities"]
-    ): EntityComboBoxItem[] => {
-      let items: EntityComboBoxItem[] = [];
-
-      let entityIds = Object.keys(hass.states);
-
-      if (includeEntities) {
-        entityIds = entityIds.filter((entityId) =>
-          includeEntities.includes(entityId)
-        );
-      }
-
-      if (excludeEntities) {
-        entityIds = entityIds.filter(
-          (entityId) => !excludeEntities.includes(entityId)
-        );
-      }
-
-      if (includeDomains) {
-        entityIds = entityIds.filter((eid) =>
-          includeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      if (excludeDomains) {
-        entityIds = entityIds.filter(
-          (eid) => !excludeDomains.includes(computeDomain(eid))
-        );
-      }
-
-      const isRTL = computeRTL(this.hass);
-
-      items = entityIds.map<EntityComboBoxItem>((entityId) => {
-        const stateObj = hass!.states[entityId];
-
-        const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = this.hass.formatEntityName(stateObj, "entity");
-        const deviceName = this.hass.formatEntityName(stateObj, "device");
-        const areaName = this.hass.formatEntityName(stateObj, "area");
-
-        const domainName = domainToName(
-          this.hass.localize,
-          computeDomain(entityId)
-        );
-
-        const primary = entityName || deviceName || entityId;
-        const secondary = [areaName, entityName ? deviceName : undefined]
-          .filter(Boolean)
-          .join(isRTL ? " ◂ " : " ▸ ");
-        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
-
-        return {
-          id: entityId,
-          primary: primary,
-          secondary: secondary,
-          domain_name: domainName,
-          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
-          search_labels: [
-            entityName,
-            deviceName,
-            areaName,
-            domainName,
-            friendlyName,
-            entityId,
-          ].filter(Boolean) as string[],
-          a11y_label: a11yLabel,
-          stateObj: stateObj,
-        };
-      });
-
-      if (includeDeviceClasses) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj?.attributes.device_class &&
-              includeDeviceClasses.includes(
-                item.stateObj.attributes.device_class
-              ))
-        );
-      }
-
-      if (includeUnitOfMeasurement) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj?.attributes.unit_of_measurement &&
-              includeUnitOfMeasurement.includes(
-                item.stateObj.attributes.unit_of_measurement
-              ))
-        );
-      }
-
-      if (entityFilter) {
-        items = items.filter(
-          (item) =>
-            // We always want to include the entity of the current value
-            item.id === this.value ||
-            (item.stateObj && entityFilter!(item.stateObj))
-        );
-      }
-
-      return items;
-    }
+      this.excludeEntities,
+      this.value
     );
 
   protected render() {

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

@@ -1,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -9,8 +8,6 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 
-export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
-
 interface StateOption {
   value: string;
   label: string;

src/components/entity/ha-entity-toggle.ts

@@ -112,7 +112,7 @@ export class HaEntityToggle extends LitElement {
     if (!this.hass || !this.stateObj) {
       return;
     }
-    forwardHaptic("light");
+    forwardHaptic(this, "light");
     const stateDomain = computeStateDomain(this.stateObj);
     let serviceDomain;
     let service;

src/components/ha-analytics.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
@@ -73,14 +73,18 @@ export class HaAnalytics extends LitElement {
                 .checked=${this.analytics?.preferences[preference]}
                 .preference=${preference}
                 name=${preference}
-                ?disabled=${baseEnabled}
               >
               </ha-switch>
-              <ha-tooltip .for="switch-${preference}" placement="right">
+              ${baseEnabled
+                ? nothing
+                : html`<ha-tooltip
+                    .for="switch-${preference}"
+                    placement="right"
+                  >
                     ${this.localize(
                       `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                     )}
-              </ha-tooltip>
+                  </ha-tooltip>`}
             </span>
           </ha-settings-row>
         `

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

@@ -8,21 +8,13 @@ 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 { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
-import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
-import type { AreaRegistryEntry } from "../data/area_registry";
-import type {
-  DeviceEntityDisplayLookup,
-  DeviceRegistryEntry,
-} from "../data/device_registry";
-import { getDeviceEntityDisplayLookup } from "../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import {
-  getFloorAreaLookup,
-  type FloorRegistryEntry,
-} from "../data/floor_registry";
+  getAreasAndFloors,
+  type AreaFloorValue,
+  type FloorComboBoxItem,
+} from "../data/area_floor";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
@@ -30,24 +22,12 @@ import "./ha-floor-icon";
 import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import "./ha-icon-button";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
 
 const SEPARATOR = "________";
 
-interface FloorComboBoxItem extends PickerComboBoxItem {
-  type: "floor" | "area";
-  floor?: FloorRegistryEntry;
-  area?: AreaRegistryEntry;
-}
-
-interface AreaFloorValue {
-  id: string;
-  type: "floor" | "area";
-}
-
 @customElement("ha-area-floor-picker")
 export class HaAreaFloorPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -154,243 +134,6 @@ export class HaAreaFloorPicker extends LitElement {
     `;
   };
 
-  private _getAreasAndFloors = memoizeOne(
-    (
-      haFloors: HomeAssistant["floors"],
-      haAreas: HomeAssistant["areas"],
-      haDevices: HomeAssistant["devices"],
-      haEntities: HomeAssistant["entities"],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      deviceFilter: this["deviceFilter"],
-      entityFilter: this["entityFilter"],
-      excludeAreas: this["excludeAreas"],
-      excludeFloors: this["excludeFloors"]
-    ): FloorComboBoxItem[] => {
-      const floors = Object.values(haFloors);
-      const areas = Object.values(haAreas);
-      const devices = Object.values(haDevices);
-      const entities = Object.values(haEntities);
-
-      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-      let inputDevices: DeviceRegistryEntry[] | undefined;
-      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
-
-      if (
-        includeDomains ||
-        excludeDomains ||
-        includeDeviceClasses ||
-        deviceFilter ||
-        entityFilter
-      ) {
-        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-        inputDevices = devices;
-        inputEntities = entities.filter((entity) => entity.area_id);
-
-        if (includeDomains) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) =>
-              includeDomains.includes(computeDomain(entity.entity_id))
-            );
-          });
-          inputEntities = inputEntities!.filter((entity) =>
-            includeDomains.includes(computeDomain(entity.entity_id))
-          );
-        }
-
-        if (excludeDomains) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return true;
-            }
-            return entities.every(
-              (entity) =>
-                !excludeDomains.includes(computeDomain(entity.entity_id))
-            );
-          });
-          inputEntities = inputEntities!.filter(
-            (entity) =>
-              !excludeDomains.includes(computeDomain(entity.entity_id))
-          );
-        }
-
-        if (includeDeviceClasses) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) => {
-              const stateObj = this.hass.states[entity.entity_id];
-              if (!stateObj) {
-                return false;
-              }
-              return (
-                stateObj.attributes.device_class &&
-                includeDeviceClasses.includes(stateObj.attributes.device_class)
-              );
-            });
-          });
-          inputEntities = inputEntities!.filter((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            return (
-              stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class)
-            );
-          });
-        }
-
-        if (deviceFilter) {
-          inputDevices = inputDevices!.filter((device) =>
-            deviceFilter!(device)
-          );
-        }
-
-        if (entityFilter) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) => {
-              const stateObj = this.hass.states[entity.entity_id];
-              if (!stateObj) {
-                return false;
-              }
-              return entityFilter(stateObj);
-            });
-          });
-          inputEntities = inputEntities!.filter((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return entityFilter!(stateObj);
-          });
-        }
-      }
-
-      let outputAreas = areas;
-
-      let areaIds: string[] | undefined;
-
-      if (inputDevices) {
-        areaIds = inputDevices
-          .filter((device) => device.area_id)
-          .map((device) => device.area_id!);
-      }
-
-      if (inputEntities) {
-        areaIds = (areaIds ?? []).concat(
-          inputEntities
-            .filter((entity) => entity.area_id)
-            .map((entity) => entity.area_id!)
-        );
-      }
-
-      if (areaIds) {
-        outputAreas = outputAreas.filter((area) =>
-          areaIds!.includes(area.area_id)
-        );
-      }
-
-      if (excludeAreas) {
-        outputAreas = outputAreas.filter(
-          (area) => !excludeAreas!.includes(area.area_id)
-        );
-      }
-
-      if (excludeFloors) {
-        outputAreas = outputAreas.filter(
-          (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
-        );
-      }
-
-      const floorAreaLookup = getFloorAreaLookup(outputAreas);
-      const unassisgnedAreas = Object.values(outputAreas).filter(
-        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
-      );
-
-      // @ts-ignore
-      const floorAreaEntries: [
-        FloorRegistryEntry | undefined,
-        AreaRegistryEntry[],
-      ][] = Object.entries(floorAreaLookup)
-        .map(([floorId, floorAreas]) => {
-          const floor = floors.find((fl) => fl.floor_id === floorId)!;
-          return [floor, floorAreas] as const;
-        })
-        .sort(([floorA], [floorB]) => {
-          if (floorA.level !== floorB.level) {
-            return (floorA.level ?? 0) - (floorB.level ?? 0);
-          }
-          return stringCompare(floorA.name, floorB.name);
-        });
-
-      const items: FloorComboBoxItem[] = [];
-
-      floorAreaEntries.forEach(([floor, floorAreas]) => {
-        if (floor) {
-          const floorName = computeFloorName(floor);
-
-          const areaSearchLabels = floorAreas
-            .map((area) => {
-              const areaName = computeAreaName(area) || area.area_id;
-              return [area.area_id, areaName, ...area.aliases];
-            })
-            .flat();
-
-          items.push({
-            id: this._formatValue({ id: floor.floor_id, type: "floor" }),
-            type: "floor",
-            primary: floorName,
-            floor: floor,
-            search_labels: [
-              floor.floor_id,
-              floorName,
-              ...floor.aliases,
-              ...areaSearchLabels,
-            ],
-          });
-        }
-        items.push(
-          ...floorAreas.map((area) => {
-            const areaName = computeAreaName(area) || area.area_id;
-            return {
-              id: this._formatValue({ id: area.area_id, type: "area" }),
-              type: "area" as const,
-              primary: areaName,
-              area: area,
-              icon: area.icon || undefined,
-              search_labels: [area.area_id, areaName, ...area.aliases],
-            };
-          })
-        );
-      });
-
-      items.push(
-        ...unassisgnedAreas.map((area) => {
-          const areaName = computeAreaName(area) || area.area_id;
-          return {
-            id: this._formatValue({ id: area.area_id, type: "area" }),
-            type: "area" as const,
-            primary: areaName,
-            icon: area.icon || undefined,
-            search_labels: [area.area_id, areaName, ...area.aliases],
-          };
-        })
-      );
-
-      return items;
-    }
-  );
-
   private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (
     item,
     { index },
@@ -446,11 +189,13 @@ export class HaAreaFloorPicker extends LitElement {
   };
 
   private _getItems = () =>
-    this._getAreasAndFloors(
+    getAreasAndFloors(
+      this.hass.states,
       this.hass.floors,
       this.hass.areas,
       this.hass.devices,
       this.hass.entities,
+      this._formatValue,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,

src/components/ha-areas-display-editor.ts

@@ -44,7 +44,7 @@ export class HaAreasDisplayEditor extends LitElement {
     );
 
     const items: DisplayItem[] = areas.map((area) => {
-      const { floor } = getAreaContext(area, this.hass!);
+      const { floor } = getAreaContext(area, this.hass.floors);
       return {
         value: area.area_id,
         label: area.name,

src/components/ha-areas-floors-display-editor.ts

@@ -138,7 +138,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
       );
       const groupedItems: Record<string, DisplayItem[]> = areas.reduce(
         (acc, area) => {
-          const { floor } = getAreaContext(area, this.hass!);
+          const { floor } = getAreaContext(area, this.hass.floors);
           const floorId = floor?.floor_id ?? UNASSIGNED_FLOOR;
 
           if (!acc[floorId]) {

src/components/ha-badge.ts

@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: var(--ha-badge-size, 36px);
       min-width: var(--ha-badge-size, 36px);
       padding: 0px 12px;

src/components/ha-copy-textfield.ts

@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
     .container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
 

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

@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
     .date-range-inputs {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .date-range-ranges {

src/components/ha-expansion-panel.ts

@@ -49,6 +49,7 @@ export class HaExpansionPanel extends LitElement {
           tabindex=${this.noCollapse ? -1 : 0}
           aria-expanded=${this.expanded}
           aria-controls="sect1"
+          part="summary"
         >
           ${this.leftChevron ? chevronIcon : nothing}
           <slot name="leading-icon"></slot>
@@ -170,6 +171,11 @@ export class HaExpansionPanel extends LitElement {
       margin-left: 8px;
       margin-inline-start: 8px;
       margin-inline-end: initial;
+      border-radius: var(--ha-border-radius-circle);
+    }
+
+    #summary:focus-visible ha-svg-icon.summary-icon {
+      background-color: var(--ha-color-fill-neutral-normal-active);
     }
 
     :host([left-chevron]) .summary-icon,

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

@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         var(--form-grid-column-count, auto-fit),
         minmax(var(--form-grid-min-width, 200px), 1fr)
       );
-      grid-column-gap: 8px;
-      grid-row-gap: 24px;
+      grid-column-gap: var(--ha-space-2);
+      grid-row-gap: var(--ha-space-6);
     }
     :host > ha-form {
       display: block;

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

@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     :host {
       display: flex !important;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     :host ha-form {
       display: block;

src/components/ha-formfield.ts

@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
       }
       .mdc-form-field {
         align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
       .mdc-form-field > label {
         direction: var(--direction);

src/components/ha-generic-picker.ts

@@ -79,6 +79,7 @@ export class HaGenericPicker extends LitElement {
         ${!this._opened
           ? html`
               <ha-picker-field
+                id="picker"
                 type="button"
                 compact
                 aria-label=${ifDefined(this.label)}

src/components/ha-grid-size-picker.ts

@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
           "row-slider preview";
         grid-template-rows: auto auto;
         grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
       }
       #columns {
         grid-area: column-slider;

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

@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
       background-color: transparent;
       padding-right: 4px;
       height: var(--icon-button-toolbar-height);
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .icon-toolbar-button {

src/components/ha-label-picker.ts

@@ -5,16 +5,10 @@ import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { computeDomain } from "../common/entity/compute_domain";
-import type {
-  DeviceEntityDisplayLookup,
-  DeviceRegistryEntry,
-} from "../data/device_registry";
-import { getDeviceEntityDisplayLookup } from "../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import type { LabelRegistryEntry } from "../data/label_registry";
 import {
   createLabelRegistryEntry,
+  getLabels,
   subscribeLabelRegistry,
 } from "../data/label_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -137,20 +131,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       }
   );
 
-  private _getLabels = memoizeOne(
-    (
-      labels: LabelRegistryEntry[] | undefined,
-      haAreas: HomeAssistant["areas"],
-      haDevices: HomeAssistant["devices"],
-      haEntities: HomeAssistant["entities"],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      deviceFilter: this["deviceFilter"],
-      entityFilter: this["entityFilter"],
-      excludeLabels: this["excludeLabels"]
-    ): PickerComboBoxItem[] => {
-      if (!labels || labels.length === 0) {
+  private _getItems = () => {
+    if (!this._labels || this._labels.length === 0) {
       return [
         {
           id: NO_LABELS,
@@ -160,178 +142,9 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       ];
     }
 
-      const devices = Object.values(haDevices);
-      const entities = Object.values(haEntities);
-
-      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-      let inputDevices: DeviceRegistryEntry[] | undefined;
-      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
-
-      if (
-        includeDomains ||
-        excludeDomains ||
-        includeDeviceClasses ||
-        deviceFilter ||
-        entityFilter
-      ) {
-        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-        inputDevices = devices;
-        inputEntities = entities.filter((entity) => entity.labels.length > 0);
-
-        if (includeDomains) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) =>
-              includeDomains.includes(computeDomain(entity.entity_id))
-            );
-          });
-          inputEntities = inputEntities!.filter((entity) =>
-            includeDomains.includes(computeDomain(entity.entity_id))
-          );
-        }
-
-        if (excludeDomains) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return true;
-            }
-            return entities.every(
-              (entity) =>
-                !excludeDomains.includes(computeDomain(entity.entity_id))
-            );
-          });
-          inputEntities = inputEntities!.filter(
-            (entity) =>
-              !excludeDomains.includes(computeDomain(entity.entity_id))
-          );
-        }
-
-        if (includeDeviceClasses) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) => {
-              const stateObj = this.hass.states[entity.entity_id];
-              if (!stateObj) {
-                return false;
-              }
-              return (
-                stateObj.attributes.device_class &&
-                includeDeviceClasses.includes(stateObj.attributes.device_class)
-              );
-            });
-          });
-          inputEntities = inputEntities!.filter((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            return (
-              stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class)
-            );
-          });
-        }
-
-        if (deviceFilter) {
-          inputDevices = inputDevices!.filter((device) =>
-            deviceFilter!(device)
-          );
-        }
-
-        if (entityFilter) {
-          inputDevices = inputDevices!.filter((device) => {
-            const devEntities = deviceEntityLookup[device.id];
-            if (!devEntities || !devEntities.length) {
-              return false;
-            }
-            return deviceEntityLookup[device.id].some((entity) => {
-              const stateObj = this.hass.states[entity.entity_id];
-              if (!stateObj) {
-                return false;
-              }
-              return entityFilter(stateObj);
-            });
-          });
-          inputEntities = inputEntities!.filter((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return entityFilter!(stateObj);
-          });
-        }
-      }
-
-      let outputLabels = labels;
-      const usedLabels = new Set<string>();
-
-      let areaIds: string[] | undefined;
-
-      if (inputDevices) {
-        areaIds = inputDevices
-          .filter((device) => device.area_id)
-          .map((device) => device.area_id!);
-
-        inputDevices.forEach((device) => {
-          device.labels.forEach((label) => usedLabels.add(label));
-        });
-      }
-
-      if (inputEntities) {
-        areaIds = (areaIds ?? []).concat(
-          inputEntities
-            .filter((entity) => entity.area_id)
-            .map((entity) => entity.area_id!)
-        );
-        inputEntities.forEach((entity) => {
-          entity.labels.forEach((label) => usedLabels.add(label));
-        });
-      }
-
-      if (areaIds) {
-        areaIds.forEach((areaId) => {
-          const area = haAreas[areaId];
-          area.labels.forEach((label) => usedLabels.add(label));
-        });
-      }
-
-      if (excludeLabels) {
-        outputLabels = outputLabels.filter(
-          (label) => !excludeLabels!.includes(label.label_id)
-        );
-      }
-
-      if (inputDevices || inputEntities) {
-        outputLabels = outputLabels.filter((label) =>
-          usedLabels.has(label.label_id)
-        );
-      }
-
-      const items = outputLabels.map<PickerComboBoxItem>((label) => ({
-        id: label.label_id,
-        primary: label.name,
-        icon: label.icon || undefined,
-        icon_path: label.icon ? undefined : mdiLabel,
-        sorting_label: label.name,
-        search_labels: [label.name, label.label_id, label.description].filter(
-          (v): v is string => Boolean(v)
-        ),
-      }));
-
-      return items;
-    }
-  );
-
-  private _getItems = () =>
-    this._getLabels(
+    return getLabels(
+      this.hass,
       this._labels,
-      this.hass.areas,
-      this.hass.devices,
-      this.hass.entities,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
@@ -339,6 +152,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.entityFilter,
       this.excludeLabels
     );
+  };
 
   private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
     if (!labels) {

src/components/ha-md-dialog.ts

@@ -1,10 +1,10 @@
-import { Dialog } from "@material/web/dialog/internal/dialog";
-import { styles } from "@material/web/dialog/internal/dialog-styles";
 import {
   type DialogAnimation,
   DIALOG_DEFAULT_CLOSE_ANIMATION,
   DIALOG_DEFAULT_OPEN_ANIMATION,
 } from "@material/web/dialog/internal/animations";
+import { Dialog } from "@material/web/dialog/internal/dialog";
+import { styles } from "@material/web/dialog/internal/dialog-styles";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -57,6 +57,9 @@ export class HaMdDialog extends Dialog {
   @property({ attribute: "disable-cancel-action", type: Boolean })
   public disableCancelAction = false;
 
+  @property({ attribute: "flexcontent", type: Boolean, reflect: true })
+  public flexContent = false;
+
   private _polyfillDialogRegistered = false;
 
   constructor() {
@@ -200,6 +203,10 @@ export class HaMdDialog extends Dialog {
       .scrim {
         z-index: 10; /* overlay navigation */
       }
+
+      :host([flexcontent]) .content {
+        display: flex;
+      }
     `,
   ];
 }

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

@@ -33,7 +33,7 @@ export interface PickerComboBoxItemWithLabel extends PickerComboBoxItem {
 
 const NO_MATCHING_ITEMS_FOUND_ID = "___no_matching_items_found___";
 
-const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
+export const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
   item
 ) => html`
   <ha-combo-box-item type="button" compact>

src/components/ha-picker-field.ts

@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
           --md-list-item-bottom-space: 0px;
           --md-list-item-leading-space: 8px;
           --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;
           --md-focus-ring-duration: 0s;

src/components/ha-segmented-bar.ts

@@ -39,22 +39,24 @@ class HaSegmentedBar extends LitElement {
           <slot name="extra"></slot>
         </div>
         <div class="bar">
-          ${this.segments.map((segment) => {
-            const bar = html`<div
+          ${this.segments.map(
+            (segment, index) => html`
+              ${this.hideTooltip || !segment.label
+                ? nothing
+                : html`
+                    <ha-tooltip for="segment-${index}" placement="top">
+                      ${segment.label}
+                    </ha-tooltip>
+                  `}
+              <div
+                id="segment-${index}"
                 style=${styleMap({
                   width: `${(segment.value / totalValue) * 100}%`,
                   backgroundColor: segment.color,
                 })}
-            ></div>`;
-            return this.hideTooltip && !segment.label
-              ? bar
-              : html`
-                  <ha-tooltip>
-                    <span slot="content">${segment.label}</span>
-                    ${bar}
-                  </ha-tooltip>
-                `;
-          })}
+              ></div>
+            `
+          )}
         </div>
         ${this.hideLegend
           ? nothing
@@ -88,7 +90,7 @@ class HaSegmentedBar extends LitElement {
     .heading {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .heading .title {
       flex: 1;
@@ -123,7 +125,7 @@ class HaSegmentedBar extends LitElement {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: 12px 0;
       padding: 0;
       list-style: none;
@@ -131,7 +133,7 @@ class HaSegmentedBar extends LitElement {
     .legend li {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
       font-size: var(--ha-font-size-s);
     }
     .legend li .bullet {

src/components/ha-select-box.ts

@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
     .list {
       display: grid;
       grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     .option {
       position: relative;
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
       overflow: hidden;
       cursor: pointer;
     }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
       position: relative;
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       min-width: 0;
       width: 100%;
     }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
       min-width: 0;
       flex: 1;
     }

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

@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
       align-items: center;
     }
     @media all and (max-width: 600px) {

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

@@ -62,7 +62,7 @@ export class HaColorTempSelector extends LitElement {
           "--ha-slider-background": `linear-gradient( to var(--float-end), ${gradient})`,
         })}
         labeled
-        icon="hass:thermometer"
+        icon="mdi:thermometer"
         .caption=${this.label || ""}
         .min=${min}
         .max=${max}

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

@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
       display: flex;
       align-items: center;
       padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     ha-card .thumbnail {
       width: 40px;

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

@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                 labeled
                 .min=${this.selector.number!.min}
                 .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                 .step=${sliderStep}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
               >
               </ha-slider>
             `

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

@@ -297,7 +297,7 @@ export class HaObjectSelector extends LitElement {
     return [
       css`
         ha-md-list {
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         ha-md-list-item {
           border: 1px solid var(--divider-color);

src/components/ha-slider.ts

@@ -19,7 +19,7 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
-          --wa-form-control-activated-color: var(--primary-color);
+          --wa-form-control-activated-color: var(--ha-control-color);
           --track-size: var(--ha-slider-track-size, 4px);
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);

src/components/ha-switch.ts

@@ -15,7 +15,7 @@ export class HaSwitch extends SwitchBase {
     super.firstUpdated();
     this.addEventListener("change", () => {
       if (this.haptic) {
-        forwardHaptic("light");
+        forwardHaptic(this, "light");
       }
     });
   }

src/components/media-player/dialog-join-media-players.ts

@@ -217,7 +217,7 @@ class DialogJoinMediaPlayers extends LitElement {
         .content {
           display: flex;
           flex-direction: column;
-          row-gap: 16px;
+          row-gap: var(--ha-space-4);
         }
 
         ha-dialog-header ha-button {

src/components/media-player/ha-media-player-browse.ts

@@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             auto-fit,
             minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
-          grid-gap: 16px;
+          grid-gap: var(--ha-space-4);
           padding: 16px;
         }
 

src/components/media-player/ha-media-player-toggle.ts

@@ -54,7 +54,7 @@ class HaMediaPlayerToggle extends LitElement {
         .list-item {
           display: grid;
           grid-template-columns: auto 1fr auto;
-          column-gap: 16px;
+          column-gap: var(--ha-space-4);
           align-items: center;
           width: 100%;
         }

src/components/target-picker/dialog/dialog-target-details.ts

@@ -0,0 +1,125 @@
+import { ContextProvider } from "@lit/context";
+import { mdiClose } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { labelsContext } from "../../../data/context";
+import { subscribeLabelRegistry } from "../../../data/label_registry";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
+import "../../ha-dialog-header";
+import "../../ha-icon-button";
+import "../../ha-icon-next";
+import "../../ha-md-dialog";
+import type { HaMdDialog } from "../../ha-md-dialog";
+import "../../ha-md-list";
+import "../../ha-md-list-item";
+import "../../ha-svg-icon";
+import "../ha-target-picker-item-row";
+import type { TargetDetailsDialogParams } from "./show-dialog-target-details";
+
+@customElement("ha-dialog-target-details")
+class DialogTargetDetails
+  extends SubscribeMixin(LitElement)
+  implements HassDialog
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: TargetDetailsDialogParams;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  private _labelsContext = new ContextProvider(this, {
+    context: labelsContext,
+    initialValue: [],
+  });
+
+  public showDialog(params: TargetDetailsDialogParams): void {
+    this._params = params;
+  }
+
+  public closeDialog() {
+    this._dialog?.close();
+    return true;
+  }
+
+  private _dialogClosed() {
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    this._params = undefined;
+  }
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection!, (labels) => {
+        this._labelsContext.setValue(labels);
+      }),
+    ];
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title"
+            >${this.hass.localize(
+              "ui.components.target-picker.target_details"
+            )}</span
+          >
+          <span slot="subtitle"
+            >${this.hass.localize(
+              `ui.components.target-picker.type.${this._params.type}`
+            )}:
+            ${this._params.title}</span
+          >
+        </ha-dialog-header>
+        <div slot="content">
+          <ha-target-picker-item-row
+            .hass=${this.hass}
+            .type=${this._params.type}
+            .itemId=${this._params.itemId}
+            .deviceFilter=${this._params.deviceFilter}
+            .entityFilter=${this._params.entityFilter}
+            .includeDomains=${this._params.includeDomains}
+            .includeDeviceClasses=${this._params.includeDeviceClasses}
+            expand
+          ></ha-target-picker-item-row>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  static styles = css`
+    ha-md-dialog {
+      min-width: 400px;
+      max-height: 90%;
+      --dialog-content-padding: 8px 24px
+        max(var(--safe-area-inset-bottom, 0px), 32px);
+    }
+
+    @media all and (max-width: 600px), all and (max-height: 500px) {
+      ha-md-dialog {
+        --md-dialog-container-shape: 0;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-target-details": DialogTargetDetails;
+  }
+}

src/components/target-picker/dialog/dialog-target-picker.ts

@@ -0,0 +1,134 @@
+import { ContextProvider } from "@lit/context";
+import { mdiClose } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { labelsContext } from "../../../data/context";
+import { subscribeLabelRegistry } from "../../../data/label_registry";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
+import "../../ha-dialog-header";
+import "../../ha-icon-button";
+import "../../ha-icon-next";
+import "../../ha-md-dialog";
+import type { HaMdDialog } from "../../ha-md-dialog";
+import "../../ha-md-list";
+import "../../ha-md-list-item";
+import "../../ha-svg-icon";
+import "../ha-target-picker-selector";
+import type { TargetTypeFloorless } from "../ha-target-picker-selector";
+import type { TargetPickerDialogParams } from "./show-dialog-target-picker";
+
+@customElement("ha-dialog-target-picker")
+class DialogTargetPicker
+  extends SubscribeMixin(LitElement)
+  implements HassDialog
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: TargetPickerDialogParams;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  private _labelsContext = new ContextProvider(this, {
+    context: labelsContext,
+    initialValue: [],
+  });
+
+  public showDialog(params: TargetPickerDialogParams): void {
+    this._params = params;
+  }
+
+  public closeDialog() {
+    this._dialog?.close();
+    return true;
+  }
+
+  private _dialogClosed() {
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    this._params = undefined;
+  }
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection!, (labels) => {
+        this._labelsContext.setValue(labels);
+      }),
+    ];
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-dialog flexcontent open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">Pick target</span>
+        </ha-dialog-header>
+        <div class="content" slot="content">
+          <ha-target-picker-selector
+            mode="dialog"
+            autofocus
+            .hass=${this.hass}
+            @filter-types-changed=${this._handleUpdatePickerFilters}
+            .filterTypes=${this._params.typeFilter || []}
+            @target-picked=${this._handleTargetPicked}
+            .targetValue=${this._params.target}
+            .deviceFilter=${this._params.deviceFilter}
+            .entityFilter=${this._params.entityFilter}
+            .includeDomains=${this._params.includeDomains}
+            .includeDeviceClasses=${this._params.includeDeviceClasses}
+          ></ha-target-picker-selector>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private _handleUpdatePickerFilters(ev: CustomEvent<TargetTypeFloorless[]>) {
+    if (this._params?.updateTypeFilter) {
+      this._params.updateTypeFilter(ev.detail);
+    }
+  }
+
+  private _handleTargetPicked(
+    ev: CustomEvent<{ id: string; type: TargetTypeFloorless }>
+  ) {
+    this._params?.selectTarget(ev);
+    this.closeDialog();
+  }
+
+  static styles = css`
+    ha-md-dialog {
+      --md-dialog-container-shape: 0;
+      min-width: 100%;
+      min-height: 100%;
+      --dialog-content-padding: 8px 0 0 0;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    ha-target-picker-selector {
+      flex: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-target-picker": DialogTargetPicker;
+  }
+}

src/components/target-picker/dialog/show-dialog-target-details.ts

@@ -0,0 +1,28 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
+import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
+import type { TargetType } from "../ha-target-picker-item-row";
+
+export type NewBackupType = "automatic" | "manual";
+
+export interface TargetDetailsDialogParams {
+  title: string;
+  type: TargetType;
+  itemId: string;
+  deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  entityFilter?: HaEntityPickerEntityFilterFunc;
+  includeDomains?: string[];
+  includeDeviceClasses?: string[];
+}
+
+export const loadTargetDetailsDialog = () => import("./dialog-target-details");
+
+export const showTargetDetailsDialog = (
+  element: HTMLElement,
+  params: TargetDetailsDialogParams
+) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-target-details",
+    dialogImport: loadTargetDetailsDialog,
+    dialogParams: params,
+  });

src/components/target-picker/dialog/show-dialog-target-picker.ts

@@ -0,0 +1,29 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
+import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
+import type { TargetType } from "../ha-target-picker-item-row";
+import type { TargetTypeFloorless } from "../ha-target-picker-selector";
+
+export interface TargetPickerDialogParams {
+  target?: HassServiceTarget;
+  deviceFilter?: HaDevicePickerDeviceFilterFunc;
+  entityFilter?: HaEntityPickerEntityFilterFunc;
+  includeDomains?: string[];
+  includeDeviceClasses?: string[];
+  typeFilter?: TargetTypeFloorless[];
+  updateTypeFilter?: (types: TargetTypeFloorless[]) => void;
+  selectTarget: (ev: CustomEvent<{ type: TargetType; id: string }>) => void;
+}
+
+export const loadTargetPickerDialog = () => import("./dialog-target-picker");
+
+export const showTargetPickerDialog = (
+  element: HTMLElement,
+  params: TargetPickerDialogParams
+) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-target-picker",
+    dialogImport: loadTargetPickerDialog,
+    dialogParams: params,
+  });

src/components/target-picker/ha-target-picker-chips-selection.ts

@@ -0,0 +1,354 @@
+import { consume } from "@lit/context";
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import {
+  mdiClose,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiTextureBox,
+  mdiUnfoldMoreVertical,
+} from "@mdi/js";
+import { css, html, LitElement, nothing, unsafeCSS } 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 {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import { getConfigEntry } from "../../data/config_entries";
+import { labelsContext } from "../../data/context";
+import { domainToName } from "../../data/integration";
+import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import { floorDefaultIconPath } from "../ha-floor-icon";
+import "../ha-icon";
+import "../ha-icon-button";
+import "../ha-md-list";
+import "../ha-md-list-item";
+import "../ha-state-icon";
+import "../ha-tooltip";
+import type { TargetType } from "./ha-target-picker-item-row";
+
+@customElement("ha-target-picker-chips-selection")
+export class HaTargetPickerChipsSelection extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ reflect: true }) public type!: TargetType;
+
+  @property({ attribute: "item-id" }) public itemId!: string;
+
+  @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);
+
+    return html`
+      <div
+        class="mdc-chip ${classMap({
+          [this.type]: true,
+        })}"
+        style=${color
+          ? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
+          : ""}
+      >
+        ${iconPath
+          ? html`<ha-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .icon=${iconPath}
+            ></ha-icon>`
+          : this._iconImg
+            ? html`<img
+                class="mdc-chip__icon mdc-chip__icon--leading"
+                alt=${this._domainName || ""}
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${this._iconImg}
+              />`
+            : fallbackIconPath
+              ? html`<ha-svg-icon
+                  class="mdc-chip__icon mdc-chip__icon--leading"
+                  .path=${fallbackIconPath}
+                ></ha-svg-icon>`
+              : stateObject
+                ? html`<ha-state-icon
+                    class="mdc-chip__icon mdc-chip__icon--leading"
+                    .hass=${this.hass}
+                    .stateObj=${stateObject}
+                  ></ha-state-icon>`
+                : nothing}
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span id="title-${this.itemId}" class="mdc-chip__text"
+              >${name}</span
+            >
+          </span>
+        </span>
+        ${this.type === "entity"
+          ? nothing
+          : html`<span role="gridcell">
+              <ha-tooltip .for="expand-${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-${this.itemId}"
+                .type=${this.type}
+                @click=${this._handleExpand}
+              ></ha-icon-button>
+            </span>`}
+        <span role="gridcell">
+          <ha-tooltip .for="remove-${this.itemId}">
+            ${this.hass.localize(
+              `ui.components.target-picker.remove_${this.type}_id`
+            )}
+          </ha-tooltip>
+          <ha-icon-button
+            class="mdc-chip__icon mdc-chip__icon--trailing"
+            .label=${this.hass.localize("ui.components.target-picker.remove")}
+            .path=${mdiClose}
+            hide-title
+            .id="remove-${this.itemId}"
+            .type=${this.type}
+            @click=${this._removeItem}
+          ></ha-icon-button>
+        </span>
+      </div>
+    `;
+  }
+
+  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) : itemId,
+        fallbackIconPath: mdiDevices,
+      };
+    }
+    if (type === "entity") {
+      this._setDomainName(computeDomain(itemId));
+
+      const stateObject = this.hass.states[itemId];
+      const entityName = computeEntityName(
+        stateObject,
+        this.hass.entities,
+        this.hass.devices
+      );
+      const { device } = getEntityContext(
+        stateObject,
+        this.hass.entities,
+        this.hass.devices,
+        this.hass.areas,
+        this.hass.floors
+      );
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      return {
+        name: entityName || deviceName || itemId,
+        stateObject,
+      };
+    }
+
+    // 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._setDomainName(domain);
+    } catch {
+      // failed to load config entry -> ignore
+    }
+  }
+
+  private _removeItem(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "remove-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  private _handleExpand(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "expand-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  static styles = css`
+    ${unsafeCSS(chipStyles)}
+    .mdc-chip {
+      color: var(--primary-text-color);
+    }
+    .mdc-chip.add {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .add-container {
+      position: relative;
+      display: inline-flex;
+    }
+    .mdc-chip:not(.add) {
+      cursor: default;
+    }
+    .mdc-chip ha-icon-button {
+      --mdc-icon-button-size: 24px;
+      display: flex;
+      align-items: center;
+      outline: none;
+    }
+    .mdc-chip ha-icon-button ha-svg-icon {
+      border-radius: 50%;
+      background: var(--secondary-text-color);
+    }
+    .mdc-chip__icon.mdc-chip__icon--trailing {
+      width: 16px;
+      height: 16px;
+      --mdc-icon-size: 14px;
+      color: var(--secondary-text-color);
+      margin-inline-start: 4px !important;
+      margin-inline-end: -4px !important;
+      direction: var(--direction);
+    }
+    .mdc-chip__icon--leading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      --mdc-icon-size: 20px;
+      border-radius: 50%;
+      padding: 6px;
+      margin-left: -13px !important;
+      margin-inline-start: -13px !important;
+      margin-inline-end: 4px !important;
+      direction: var(--direction);
+    }
+    .expand-btn {
+      margin-right: 0;
+      margin-inline-end: 0;
+      margin-inline-start: initial;
+    }
+    .mdc-chip.area:not(.add),
+    .mdc-chip.floor:not(.add) {
+      border: 1px solid #fed6a4;
+      background: var(--card-background-color);
+    }
+    .mdc-chip.area:not(.add) .mdc-chip__icon--leading,
+    .mdc-chip.area.add,
+    .mdc-chip.floor:not(.add) .mdc-chip__icon--leading,
+    .mdc-chip.floor.add {
+      background: #fed6a4;
+    }
+    .mdc-chip.device:not(.add) {
+      border: 1px solid #a8e1fb;
+      background: var(--card-background-color);
+    }
+    .mdc-chip.device:not(.add) .mdc-chip__icon--leading,
+    .mdc-chip.device.add {
+      background: #a8e1fb;
+    }
+    .mdc-chip.entity:not(.add) {
+      border: 1px solid #d2e7b9;
+      background: var(--card-background-color);
+    }
+    .mdc-chip.entity:not(.add) .mdc-chip__icon--leading,
+    .mdc-chip.entity.add {
+      background: #d2e7b9;
+    }
+    .mdc-chip.label:not(.add) {
+      border: 1px solid var(--color, #e0e0e0);
+      background: var(--card-background-color);
+    }
+    .mdc-chip.label:not(.add) .mdc-chip__icon--leading,
+    .mdc-chip.label.add {
+      background: var(--background-color, #e0e0e0);
+    }
+    .mdc-chip:hover {
+      z-index: 5;
+    }
+    :host([disabled]) .mdc-chip {
+      opacity: var(--light-disabled-opacity);
+      pointer-events: none;
+    }
+    .tooltip-icon-img {
+      width: 24px;
+      height: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-chips-selection": HaTargetPickerChipsSelection;
+  }
+}

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

@@ -0,0 +1,107 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HomeAssistant } from "../../types";
+import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
+import "../ha-expansion-panel";
+import "../ha-md-list";
+import "./ha-target-picker-item-row";
+import type { TargetType } from "./ha-target-picker-item-row";
+
+@customElement("ha-target-picker-item-group")
+export class HaTargetPickerItemGroup extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public type!: "entity" | "device" | "area" | "label";
+
+  @property({ attribute: false }) public items!: Partial<
+    Record<TargetType, string[]>
+  >;
+
+  @property({ type: Boolean }) public collapsed = false;
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  /**
+   * Show only targets with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show only targets with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  protected render() {
+    let count = 0;
+    Object.values(this.items).forEach((items) => {
+      if (items) {
+        count += items.length;
+      }
+    });
+
+    return html`<ha-expansion-panel .expanded=${!this.collapsed} left-chevron>
+      <div slot="header" class="heading">
+        ${this.hass.localize(
+          `ui.components.target-picker.selected.${this.type}`,
+          {
+            count,
+          }
+        )}
+      </div>
+      <ha-md-list>
+        ${Object.entries(this.items).map(([type, items]) =>
+          items
+            ? items.map(
+                (item) =>
+                  html`<ha-target-picker-item-row
+                    .hass=${this.hass}
+                    .type=${type as "entity" | "device" | "area" | "label"}
+                    .itemId=${item}
+                    .deviceFilter=${this.deviceFilter}
+                    .entityFilter=${this.entityFilter}
+                    .includeDomains=${this.includeDomains}
+                    .includeDeviceClasses=${this.includeDeviceClasses}
+                  ></ha-target-picker-item-row>`
+              )
+            : nothing
+        )}
+      </ha-md-list>
+    </ha-expansion-panel>`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      --expansion-panel-content-padding: 0;
+    }
+    ha-expansion-panel::part(summary) {
+      background-color: var(--ha-color-fill-neutral-quiet-resting);
+      padding: 4px 8px;
+      font-weight: var(--ha-font-weight-bold);
+      color: var(--secondary-text-color);
+      display: flex;
+      justify-content: space-between;
+      min-height: unset;
+    }
+    ha-md-list {
+      padding: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-item-group": HaTargetPickerItemGroup;
+  }
+}

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

@@ -0,0 +1,699 @@
+import { consume } from "@lit/context";
+import {
+  mdiClose,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiTextureBox,
+} from "@mdi/js";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import { computeRTL } from "../../common/util/compute_rtl";
+import { getConfigEntry } from "../../data/config_entries";
+import { labelsContext } from "../../data/context";
+import { domainToName } from "../../data/integration";
+import type { LabelRegistryEntry } from "../../data/label_registry";
+import {
+  areaMeetsFilter,
+  deviceMeetsFilter,
+  entityRegMeetsFilter,
+  extractFromTarget,
+  type ExtractFromTargetResult,
+  type ExtractFromTargetResultReferenced,
+} from "../../data/target";
+import { buttonLinkStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
+import { floorDefaultIconPath } from "../ha-floor-icon";
+import "../ha-icon-button";
+import "../ha-md-list";
+import type { HaMdList } from "../ha-md-list";
+import "../ha-md-list-item";
+import type { HaMdListItem } from "../ha-md-list-item";
+import "../ha-state-icon";
+import "../ha-svg-icon";
+import { showTargetDetailsDialog } from "./dialog/show-dialog-target-details";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+
+export type TargetType = "entity" | "device" | "area" | "label" | "floor";
+
+@customElement("ha-target-picker-item-row")
+export class HaTargetPickerItemRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ reflect: true }) public type!: TargetType;
+
+  @property({ attribute: "item-id" }) public itemId!: string;
+
+  @property({ type: Boolean }) public expand = false;
+
+  @property({ type: Boolean, attribute: "last" }) public lastItem = false;
+
+  @property({ type: Boolean, attribute: "sub-entry", reflect: true })
+  public subEntry = false;
+
+  @property({ type: Boolean, attribute: "hide-context" })
+  public hideContext = false;
+
+  @property({ attribute: false })
+  public parentEntries?: ExtractFromTargetResultReferenced;
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  /**
+   * Show only targets with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show only targets with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @state() private _iconImg?: string;
+
+  @state() private _domainName?: string;
+
+  @state() private _entries?: ExtractFromTargetResult;
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelRegistry!: LabelRegistryEntry[];
+
+  @query("ha-md-list-item") public item?: HaMdListItem;
+
+  @query("ha-md-list") public list?: HaMdList;
+
+  @query("ha-target-picker-item-row") public itemRow?: HaTargetPickerItemRow;
+
+  protected willUpdate(changedProps: PropertyValues) {
+    if (!this.subEntry && changedProps.has("itemId")) {
+      this._updateItemData();
+    }
+  }
+
+  protected render() {
+    const { name, context, iconPath, fallbackIconPath, stateObject } =
+      this._itemData(this.type, this.itemId);
+
+    const showDevices = ["floor", "area", "label"].includes(this.type);
+    const showEntities = this.type !== "entity";
+
+    const entries = this.parentEntries || this._entries;
+
+    // Don't show sub entries that have no entities
+    if (
+      this.subEntry &&
+      this.type !== "entity" &&
+      (!entries || entries.referenced_entities.length === 0)
+    ) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-list-item type="text">
+        <div slot="start">
+          ${this.subEntry
+            ? html`
+                <div class="horizontal-line-wrapper">
+                  <div class="horizontal-line"></div>
+                </div>
+              `
+            : nothing}
+          ${iconPath
+            ? html`<ha-icon .icon=${iconPath}></ha-icon>`
+            : this._iconImg
+              ? html`<img
+                  alt=${this._domainName || ""}
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  src=${this._iconImg}
+                />`
+              : fallbackIconPath
+                ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
+                : stateObject
+                  ? html`
+                      <ha-state-icon
+                        .hass=${this.hass}
+                        .stateObj=${stateObject}
+                      >
+                      </ha-state-icon>
+                    `
+                  : nothing}
+        </div>
+
+        <div slot="headline">${name}</div>
+        ${context && !this.hideContext
+          ? html`<span slot="supporting-text">${context}</span>`
+          : this._domainName && this.subEntry
+            ? html`<span slot="supporting-text" class="domain"
+                >${this._domainName}</span
+              >`
+            : nothing}
+        ${!this.subEntry &&
+        ((entries && (showEntities || showDevices)) || this._domainName)
+          ? html`
+              <div slot="end" class="summary">
+                ${showEntities && !this.expand
+                  ? html`<button class="main link" @click=${this._openDetails}>
+                      ${this.hass.localize(
+                        "ui.components.target-picker.entities_count",
+                        {
+                          count: entries?.referenced_entities.length,
+                        }
+                      )}
+                    </button>`
+                  : showEntities
+                    ? html`<span class="main">
+                        ${this.hass.localize(
+                          "ui.components.target-picker.entities_count",
+                          {
+                            count: entries?.referenced_entities.length,
+                          }
+                        )}
+                      </span>`
+                    : nothing}
+                ${showDevices
+                  ? html`<span class="secondary"
+                      >${this.hass.localize(
+                        "ui.components.target-picker.devices_count",
+                        {
+                          count: entries?.referenced_devices.length,
+                        }
+                      )}</span
+                    >`
+                  : nothing}
+                ${this._domainName && !showDevices
+                  ? html`<span class="secondary domain"
+                      >${this._domainName}</span
+                    >`
+                  : nothing}
+              </div>
+            `
+          : nothing}
+        ${!this.expand && !this.subEntry
+          ? html`
+              <ha-icon-button
+                .path=${mdiClose}
+                slot="end"
+                @click=${this._removeItem}
+              ></ha-icon-button>
+            `
+          : nothing}
+      </ha-md-list-item>
+      ${this.expand && entries && entries.referenced_entities
+        ? this._renderEntries()
+        : nothing}
+    `;
+  }
+
+  private _renderEntries() {
+    const entries = this.parentEntries || this._entries;
+
+    let nextType: TargetType =
+      this.type === "floor"
+        ? "area"
+        : this.type === "area"
+          ? "device"
+          : "entity";
+
+    if (this.type === "label") {
+      if (entries?.referenced_areas.length) {
+        nextType = "area";
+      } else if (entries?.referenced_devices.length) {
+        nextType = "device";
+      }
+    }
+
+    const rows1 =
+      (nextType === "area"
+        ? entries?.referenced_areas
+        : nextType === "device"
+          ? entries?.referenced_devices
+          : entries?.referenced_entities) || [];
+
+    const devicesInAreas = [] as string[];
+
+    const rows1Entries =
+      nextType === "entity"
+        ? undefined
+        : rows1.map((rowItem) => {
+            const nextEntries = {
+              referenced_areas: [] as string[],
+              referenced_devices: [] as string[],
+              referenced_entities: [] as string[],
+            };
+
+            if (nextType === "area") {
+              nextEntries.referenced_devices =
+                entries?.referenced_devices.filter(
+                  (device_id) =>
+                    this.hass.devices?.[device_id]?.area_id === rowItem &&
+                    entries?.referenced_entities.some(
+                      (entity_id) =>
+                        this.hass.entities?.[entity_id]?.device_id === device_id
+                    )
+                ) || ([] as string[]);
+
+              devicesInAreas.push(...nextEntries.referenced_devices);
+
+              nextEntries.referenced_entities =
+                entries?.referenced_entities.filter((entity_id) => {
+                  const entity = this.hass.entities[entity_id];
+                  return (
+                    entity.area_id === rowItem ||
+                    !entity.device_id ||
+                    nextEntries.referenced_devices.includes(entity.device_id)
+                  );
+                }) || ([] as string[]);
+
+              return nextEntries;
+            }
+
+            nextEntries.referenced_entities =
+              entries?.referenced_entities.filter(
+                (entity_id) =>
+                  this.hass.entities?.[entity_id]?.device_id === rowItem
+              ) || ([] as string[]);
+
+            return nextEntries;
+          });
+
+    const entityRows =
+      this.type === "label" && entries
+        ? entries.referenced_entities.filter((entity_id) =>
+            this.hass.entities[entity_id].labels.includes(this.itemId)
+          )
+        : nextType === "device" && entries
+          ? entries.referenced_entities.filter(
+              (entity_id) =>
+                this.hass.entities[entity_id].area_id === this.itemId
+            )
+          : [];
+
+    const deviceRows =
+      this.type === "label" && entries
+        ? entries.referenced_devices.filter(
+            (device_id) =>
+              !devicesInAreas.includes(device_id) &&
+              this.hass.devices[device_id].labels.includes(this.itemId)
+          )
+        : [];
+
+    const deviceRowsEntries =
+      deviceRows.length === 0
+        ? undefined
+        : deviceRows.map((device_id) => ({
+            referenced_areas: [] as string[],
+            referenced_devices: [] as string[],
+            referenced_entities:
+              entries?.referenced_entities.filter(
+                (entity_id) =>
+                  this.hass.entities?.[entity_id]?.device_id === device_id
+              ) || ([] as string[]),
+          }));
+
+    return html`
+      <div class="entries-tree">
+        <div class="line-wrapper">
+          <div class="line"></div>
+        </div>
+        <ha-md-list class="entries">
+          ${rows1.map(
+            (itemId, index) => html`
+              <ha-target-picker-item-row
+                sub-entry
+                .hass=${this.hass}
+                .type=${nextType}
+                .itemId=${itemId}
+                .parentEntries=${rows1Entries?.[index]}
+                .hideContext=${this.hideContext || this.type !== "label"}
+                expand
+                .lastItem=${deviceRows.length === 0 &&
+                entityRows.length === 0 &&
+                index === rows1.length - 1}
+              ></ha-target-picker-item-row>
+            `
+          )}
+          ${deviceRows.map(
+            (itemId, index) => html`
+              <ha-target-picker-item-row
+                sub-entry
+                .hass=${this.hass}
+                type="device"
+                .itemId=${itemId}
+                .parentEntries=${deviceRowsEntries?.[index]}
+                .hideContext=${this.hideContext || this.type !== "label"}
+                expand
+                .lastItem=${entityRows.length === 0 &&
+                index === deviceRows.length - 1}
+              ></ha-target-picker-item-row>
+            `
+          )}
+          ${entityRows.map(
+            (itemId, index) => html`
+              <ha-target-picker-item-row
+                sub-entry
+                .hass=${this.hass}
+                type="entity"
+                .itemId=${itemId}
+                .hideContext=${this.hideContext || this.type !== "label"}
+                .lastItem=${index === entityRows.length - 1}
+              ></ha-target-picker-item-row>
+            `
+          )}
+        </ha-md-list>
+      </div>
+    `;
+  }
+
+  private async _updateItemData() {
+    if (this.type === "entity") {
+      this._entries = undefined;
+      return;
+    }
+    try {
+      const entries = await extractFromTarget(this.hass, {
+        [`${this.type}_id`]: [this.itemId],
+      });
+
+      const hiddenAreaIds: string[] = [];
+      if (this.type === "floor" || this.type === "label") {
+        entries.referenced_areas = entries.referenced_areas.filter(
+          (area_id) => {
+            const area = this.hass.areas[area_id];
+            if (
+              (this.type === "floor" || area.labels.includes(this.itemId)) &&
+              areaMeetsFilter(
+                area,
+                this.hass.devices,
+                this.hass.entities,
+                this.deviceFilter,
+                this.includeDomains,
+                this.includeDeviceClasses,
+                this.hass.states,
+                this.entityFilter
+              )
+            ) {
+              return true;
+            }
+
+            hiddenAreaIds.push(area_id);
+            return false;
+          }
+        );
+      }
+
+      const hiddenDeviceIds: string[] = [];
+      if (
+        this.type === "floor" ||
+        this.type === "area" ||
+        this.type === "label"
+      ) {
+        entries.referenced_devices = entries.referenced_devices.filter(
+          (device_id) => {
+            const device = this.hass.devices[device_id];
+            if (
+              !hiddenAreaIds.includes(device.area_id || "") &&
+              (this.type !== "label" || device.labels.includes(this.itemId)) &&
+              deviceMeetsFilter(
+                device,
+                this.hass.entities,
+                this.deviceFilter,
+                this.includeDomains,
+                this.includeDeviceClasses,
+                this.hass.states,
+                this.entityFilter
+              )
+            ) {
+              return true;
+            }
+
+            hiddenDeviceIds.push(device_id);
+            return false;
+          }
+        );
+      }
+
+      entries.referenced_entities = entries.referenced_entities.filter(
+        (entity_id) => {
+          const entity = this.hass.entities[entity_id];
+          if (hiddenDeviceIds.includes(entity.device_id || "")) {
+            return false;
+          }
+          if (
+            (this.type === "area" && entity.area_id === this.itemId) ||
+            (this.type === "label" && entity.labels.includes(this.itemId)) ||
+            entries.referenced_devices.includes(entity.device_id || "")
+          ) {
+            return entityRegMeetsFilter(
+              entity,
+              this.type === "label",
+              this.includeDomains,
+              this.includeDeviceClasses,
+              this.hass.states,
+              this.entityFilter
+            );
+          }
+          return false;
+        }
+      );
+
+      this._entries = entries;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to extract target", e);
+    }
+  }
+
+  private _itemData = memoizeOne((type: TargetType, item: string) => {
+    if (type === "floor") {
+      const floor = this.hass.floors?.[item];
+      return {
+        name: floor?.name || item,
+        iconPath: floor?.icon,
+        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
+      };
+    }
+    if (type === "area") {
+      const area = this.hass.areas?.[item];
+      return {
+        name: area?.name || item,
+        context: area.floor_id && this.hass.floors?.[area.floor_id]?.name,
+        iconPath: area?.icon,
+        fallbackIconPath: mdiTextureBox,
+      };
+    }
+    if (type === "device") {
+      const device = this.hass.devices?.[item];
+
+      if (device.primary_config_entry) {
+        this._getDeviceDomain(device.primary_config_entry);
+      }
+
+      return {
+        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
+        context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
+        fallbackIconPath: mdiDevices,
+      };
+    }
+    if (type === "entity") {
+      this._setDomainName(computeDomain(item));
+
+      const stateObject = this.hass.states[item];
+      const entityName = computeEntityName(
+        stateObject,
+        this.hass.entities,
+        this.hass.devices
+      );
+      const { area, device } = getEntityContext(
+        stateObject,
+        this.hass.entities,
+        this.hass.devices,
+        this.hass.areas,
+        this.hass.floors
+      );
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+      const context = [areaName, entityName ? deviceName : undefined]
+        .filter(Boolean)
+        .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
+      return {
+        name: entityName || deviceName || item,
+        context,
+        stateObject,
+      };
+    }
+
+    // type label
+    const label = this._labelRegistry.find((lab) => lab.label_id === item);
+    return {
+      name: label?.name || item,
+      iconPath: label?.icon,
+      fallbackIconPath: mdiLabel,
+    };
+  });
+
+  private _setDomainName(domain: string) {
+    this._domainName = domainToName(this.hass.localize, domain);
+  }
+
+  private _removeItem(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "remove-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  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._setDomainName(domain);
+    } catch {
+      // failed to load config entry -> ignore
+    }
+  }
+
+  private _openDetails() {
+    showTargetDetailsDialog(this, {
+      title: this._itemData(this.type, this.itemId).name,
+      type: this.type,
+      itemId: this.itemId,
+      deviceFilter: this.deviceFilter,
+      entityFilter: this.entityFilter,
+      includeDomains: this.includeDomains,
+      includeDeviceClasses: this.includeDeviceClasses,
+    });
+  }
+
+  static styles = [
+    buttonLinkStyle,
+    css`
+      :host {
+        --md-list-item-top-space: 0;
+        --md-list-item-bottom-space: 0;
+        --md-list-item-leading-space: 8px;
+        --md-list-item-trailing-space: 8px;
+        --md-list-item-two-line-container-height: 56px;
+      }
+
+      :host([expand]:not([sub-entry])) ha-md-list-item {
+        border: 2px solid var(--ha-color-border-neutral-loud);
+        background-color: var(--ha-color-fill-neutral-quiet-resting);
+        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      }
+
+      state-badge {
+        color: var(--ha-color-on-neutral-quiet);
+      }
+      img {
+        width: 24px;
+        height: 24px;
+      }
+      ha-icon-button {
+        --mdc-icon-button-size: 32px;
+      }
+      .summary {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        line-height: var(--ha-line-height-condensed);
+      }
+      :host([sub-entry]) .summary {
+        margin-right: 48px;
+      }
+      .summary .main {
+        font-weight: var(--ha-font-weight-medium);
+      }
+      .summary .secondary {
+        font-size: var(--ha-font-size-s);
+        color: var(--secondary-text-color);
+      }
+      .domain {
+        font-family: var(--ha-font-family-code);
+      }
+
+      .entries-tree {
+        display: flex;
+        position: relative;
+      }
+
+      .entries-tree .line-wrapper {
+        padding: 20px;
+      }
+
+      .entries-tree .line-wrapper .line {
+        border-left: 2px dashed var(--divider-color);
+        height: calc(100% - 28px);
+        position: absolute;
+        top: 0;
+      }
+
+      :host([sub-entry]) .entries-tree .line-wrapper .line {
+        height: calc(100% - 12px);
+        top: -18px;
+      }
+
+      .entries {
+        padding: 0;
+        --md-item-overflow: visible;
+      }
+
+      .horizontal-line-wrapper {
+        position: relative;
+      }
+      .horizontal-line-wrapper .horizontal-line {
+        position: absolute;
+        top: 11px;
+        margin-inline-start: -28px;
+        width: 29px;
+        border-top: 2px dashed var(--divider-color);
+      }
+
+      button.link {
+        text-decoration: none;
+        color: var(--primary-color);
+      }
+
+      button.link:hover,
+      button.link:focus {
+        text-decoration: underline;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-item-row": HaTargetPickerItemRow;
+  }
+}

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

@@ -0,0 +1,850 @@
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
+import { consume } from "@lit/context";
+import { mdiCheck, mdiTextureBox } from "@mdi/js";
+import Fuse from "fuse.js";
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import {
+  customElement,
+  eventOptions,
+  property,
+  query,
+  state,
+} from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
+import { tinykeys } from "tinykeys";
+import { ensureArray } from "../../common/array/ensure-array";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeKeys } from "../../common/translations/localize";
+import { computeRTL } from "../../common/util/compute_rtl";
+import {
+  getAreasAndFloors,
+  type AreaFloorValue,
+  type FloorComboBoxItem,
+} from "../../data/area_floor";
+import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
+import { labelsContext } from "../../data/context";
+import { getDevices, type DevicePickerItem } from "../../data/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import {
+  getEntities,
+  type EntityComboBoxItem,
+} from "../../data/entity_registry";
+import { getLabels, type LabelRegistryEntry } from "../../data/label_registry";
+import { HaFuse } from "../../resources/fuse";
+import { haStyleScrollbar } from "../../resources/styles";
+import { loadVirtualizer } from "../../resources/virtualizer";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
+import "../entity/state-badge";
+import "../ha-button";
+import "../ha-combo-box-item";
+import "../ha-floor-icon";
+import "../ha-md-list";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import "../ha-svg-icon";
+import "../ha-textfield";
+import type { HaTextField } from "../ha-textfield";
+import "../ha-tree-indicator";
+import type { TargetType } from "./ha-target-picker-item-row";
+
+const SEPARATOR = "________";
+
+const EMPTY_SEARCH = "___EMPTY_SEARCH___";
+
+export type TargetTypeFloorless = Exclude<TargetType, "floor">;
+
+@customElement("ha-target-picker-selector")
+export class HaTargetPickerSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public filterTypes: TargetTypeFloorless[] =
+    [];
+
+  @property({ reflect: true }) public mode: "popover" | "dialog" = "popover";
+
+  /**
+   * Show only targets with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show only targets with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @property({ attribute: false })
+  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property({ attribute: false })
+  public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  @property({ attribute: false }) public targetValue?: HassServiceTarget;
+
+  @query("lit-virtualizer") private _virtualizerElement?: LitVirtualizer;
+
+  @state() private _searchTerm = "";
+
+  @state() private _listScrolled = false;
+
+  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
+
+  @state() private _selectedItemIndex = -1;
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelRegistry!: LabelRegistryEntry[];
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  private _removeKeyboardShortcuts?: () => void;
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._loadConfigEntries();
+      loadVirtualizer();
+    }
+  }
+
+  protected firstUpdated() {
+    this._registerKeyboardShortcuts();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeKeyboardShortcuts?.();
+  }
+
+  private async _loadConfigEntries() {
+    const configEntries = await getConfigEntries(this.hass);
+    this._configEntryLookup = Object.fromEntries(
+      configEntries.map((entry) => [entry.entry_id, entry])
+    );
+  }
+
+  protected render() {
+    return html`
+      <ha-textfield
+        .label=${this.hass.localize("ui.common.search")}
+        @input=${this._searchChanged}
+        .value=${this._searchTerm}
+      ></ha-textfield>
+      <div class="filter">${this._renderFilterButtons()}</div>
+      <lit-virtualizer
+        scroller
+        .items=${this._getItems(
+          this.filterTypes,
+          this._searchTerm,
+          this._selectedItemIndex
+        )}
+        .renderItem=${this._renderRow}
+        @scroll=${this._onScrollList}
+        class="list ${this._listScrolled ? "scrolled" : ""}"
+        style="min-height: 56px;"
+      >
+      </lit-virtualizer>
+    `;
+  }
+
+  private _registerKeyboardShortcuts() {
+    this._removeKeyboardShortcuts = tinykeys(this, {
+      ArrowUp: this._selectPreviousItem,
+      ArrowDown: this._selectNextItem,
+      Enter: this._pickSelectedItem,
+    });
+  }
+
+  private _selectNextItem = () => {
+    if (!this._virtualizerElement) {
+      return;
+    }
+
+    const maxItems = this._virtualizerElement.items.length - 1;
+
+    if (maxItems === -1) {
+      this._selectedItemIndex = -1;
+      return;
+    }
+
+    this._selectedItemIndex =
+      maxItems === this._selectedItemIndex
+        ? this._selectedItemIndex
+        : this._selectedItemIndex + 1;
+
+    this._virtualizerElement?.scrollToIndex(this._selectedItemIndex);
+  };
+
+  private _selectPreviousItem = () => {
+    if (!this._virtualizerElement) {
+      return;
+    }
+
+    if (this._selectedItemIndex > 0) {
+      this._selectedItemIndex--;
+
+      this._virtualizerElement?.scrollToIndex(this._selectedItemIndex);
+    }
+  };
+
+  private _pickSelectedItem = () => {
+    if (this._selectedItemIndex === -1) {
+      return;
+    }
+
+    const item: any = this._virtualizerElement?.items[this._selectedItemIndex];
+    if (item && typeof item !== "string") {
+      this._pickTarget(
+        item.id,
+        "domain" in item
+          ? "device"
+          : "stateObj" in item
+            ? "entity"
+            : item.type
+              ? "area"
+              : "label"
+      );
+    }
+  };
+
+  private _renderFilterButtons() {
+    const filter: (TargetTypeFloorless | "separator")[] = [
+      "entity",
+      "device",
+      "area",
+      "separator",
+      "label",
+    ];
+    return filter.map((filterType) => {
+      if (filterType === "separator") {
+        return html`<div class="separator"></div>`;
+      }
+
+      const selected = this.filterTypes.includes(filterType);
+      return html`
+        <ha-button
+          @click=${this._toggleFilter}
+          .type=${filterType}
+          size="small"
+          .variant=${selected ? "brand" : "neutral"}
+          appearance="filled"
+        >
+          ${selected
+            ? html`<ha-svg-icon slot="start" .path=${mdiCheck}></ha-svg-icon>`
+            : nothing}
+          ${this.hass.localize(
+            `ui.components.target-picker.type.${filterType === "entity" ? "entities" : `${filterType}s`}` as LocalizeKeys
+          )}
+        </ha-button>
+      `;
+    });
+  }
+
+  private _renderRow = (
+    item:
+      | PickerComboBoxItem
+      | (FloorComboBoxItem & { last?: boolean | undefined })
+      | EntityComboBoxItem
+      | DevicePickerItem,
+    index
+  ) => {
+    if (!item) {
+      return nothing;
+    }
+
+    if (typeof item === "string") {
+      if (item === "padding") {
+        return html`<div class="bottom-padding"></div>`;
+      }
+      return html`<div class="title">${item}</div>`;
+    }
+
+    if (
+      (item as FloorComboBoxItem).type === "area" ||
+      (item as FloorComboBoxItem).type === "floor"
+    ) {
+      return this._areaRowRenderer(
+        item as FloorComboBoxItem & { last?: boolean },
+        index
+      );
+    }
+
+    if ("domain" in item) {
+      return this._deviceRowRenderer(item, index);
+    }
+
+    if ("stateObj" in item) {
+      return this._entityRowRenderer(item, index);
+    }
+
+    // label or empty
+    return html`
+      <ha-combo-box-item
+        class=${this._selectedItemIndex === index ? "selected" : ""}
+        .type=${item.id === EMPTY_SEARCH ? "text" : "button"}
+        @click=${
+          // eslint-disable-next-line lit/no-template-arrow
+          () => {
+            this._pickTarget(item.id, "label");
+          }
+        }
+      >
+        ${item.icon
+          ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+          : item.icon_path
+            ? html`<ha-svg-icon
+                slot="start"
+                .path=${item.icon_path}
+              ></ha-svg-icon>`
+            : nothing}
+        <span slot="headline">${item.primary}</span>
+        ${item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
+
+  private _filterAreasAndFloors(items: FloorComboBoxItem[]) {
+    const index = this._areaFuseIndex(items);
+    const fuse = new HaFuse(items, { shouldSort: false }, index);
+
+    const results = fuse.multiTermsSearch(this._searchTerm);
+    let filteredItems = items as FloorComboBoxItem[];
+    if (results) {
+      filteredItems = results.map((result) => result.item);
+    }
+
+    return filteredItems;
+  }
+
+  private _filterEntities(items: EntityComboBoxItem[]) {
+    const fuseIndex = this._entityFuseIndex(items);
+    const fuse = new HaFuse(items, { shouldSort: false }, fuseIndex);
+
+    const results = fuse.multiTermsSearch(this._searchTerm);
+    let filteredItems = items as EntityComboBoxItem[];
+    if (results) {
+      filteredItems = results.map((result) => result.item);
+    }
+
+    // If there is exact match for entity id, put it first
+    const index = filteredItems.findIndex(
+      (item) => item.stateObj?.entity_id === this._searchTerm
+    );
+    if (index === -1) {
+      return filteredItems;
+    }
+
+    const [exactMatch] = filteredItems.splice(index, 1);
+    filteredItems.unshift(exactMatch);
+    return filteredItems;
+  }
+
+  private _filterDevices(items: PickerComboBoxItem[]) {
+    const fuseIndex = this._deviceFuseIndex(items);
+    const fuse = new HaFuse(items, { shouldSort: false }, fuseIndex);
+
+    const results = fuse.multiTermsSearch(this._searchTerm);
+    let filteredItems = items as DevicePickerItem[];
+    if (results) {
+      filteredItems = results.map((result) => result.item);
+    }
+
+    return filteredItems;
+  }
+
+  private _filterLabels(items: PickerComboBoxItem[]) {
+    const fuseIndex = this._labelFuseIndex(items);
+    const fuse = new HaFuse(items, { shouldSort: false }, fuseIndex);
+
+    const results = fuse.multiTermsSearch(this._searchTerm);
+    let filteredItems = items as PickerComboBoxItem[];
+    if (results) {
+      filteredItems = results.map((result) => result.item);
+    }
+
+    return filteredItems;
+  }
+
+  private _getItems = memoizeOne(
+    (
+      filterTypes: this["filterTypes"],
+      searchTerm: string,
+      _selectedItemIndex: number
+    ) => {
+      const items: (
+        | string
+        | FloorComboBoxItem
+        | EntityComboBoxItem
+        | PickerComboBoxItem
+      )[] = [];
+
+      if (filterTypes.length === 0 || filterTypes.includes("entity")) {
+        let entities = getEntities(
+          this.hass,
+          this.includeDomains,
+          undefined,
+          this.entityFilter,
+          this.includeDeviceClasses,
+          undefined,
+          undefined,
+          this.targetValue?.entity_id
+            ? ensureArray(this.targetValue.entity_id)
+            : undefined
+        );
+
+        if (searchTerm) {
+          entities = this._filterEntities(entities);
+        }
+
+        if (entities.length > 0 && filterTypes.length !== 1) {
+          items.push(
+            this.hass.localize("ui.components.target-picker.type.entities")
+          ); // title
+        }
+
+        items.push(...entities);
+      }
+
+      if (filterTypes.length === 0 || filterTypes.includes("device")) {
+        let devices = getDevices(
+          this.hass,
+          this._configEntryLookup,
+          this.includeDomains,
+          undefined,
+          this.includeDeviceClasses,
+          this.deviceFilter,
+          this.entityFilter,
+          this.targetValue?.device_id
+            ? ensureArray(this.targetValue.device_id)
+            : undefined
+        );
+
+        if (searchTerm) {
+          devices = this._filterDevices(devices);
+        }
+
+        if (devices.length > 0 && filterTypes.length !== 1) {
+          items.push(
+            this.hass.localize("ui.components.target-picker.type.devices")
+          ); // title
+        }
+
+        items.push(...devices);
+      }
+
+      if (filterTypes.length === 0 || filterTypes.includes("label")) {
+        let labels = getLabels(
+          this.hass,
+          this._labelRegistry,
+          this.includeDomains,
+          undefined,
+          this.includeDeviceClasses,
+          this.deviceFilter,
+          this.entityFilter,
+          this.targetValue?.label_id
+            ? ensureArray(this.targetValue.label_id)
+            : undefined
+        );
+
+        if (searchTerm) {
+          labels = this._filterLabels(labels);
+        }
+
+        if (labels.length > 0 && filterTypes.length !== 1) {
+          items.push(
+            this.hass.localize("ui.components.target-picker.type.labels")
+          ); // title
+        }
+
+        items.push(...labels);
+      }
+
+      if (filterTypes.length === 0 || filterTypes.includes("area")) {
+        let areasAndFloors = getAreasAndFloors(
+          this.hass.states,
+          this.hass.floors,
+          this.hass.areas,
+          this.hass.devices,
+          this.hass.entities,
+          memoizeOne((value: AreaFloorValue): string =>
+            [value.type, value.id].join(SEPARATOR)
+          ),
+          this.includeDomains,
+          undefined,
+          this.includeDeviceClasses,
+          this.deviceFilter,
+          this.entityFilter,
+          this.targetValue?.area_id
+            ? ensureArray(this.targetValue.area_id)
+            : undefined,
+          this.targetValue?.floor_id
+            ? ensureArray(this.targetValue.floor_id)
+            : undefined
+        );
+
+        if (searchTerm) {
+          areasAndFloors = this._filterAreasAndFloors(areasAndFloors);
+        }
+
+        if (areasAndFloors.length > 0 && filterTypes.length !== 1) {
+          items.push(
+            this.hass.localize("ui.components.target-picker.type.areas")
+          ); // title
+        }
+
+        items.push(
+          ...areasAndFloors.map((item, index) => {
+            const nextItem = areasAndFloors[index + 1];
+
+            if (
+              !nextItem ||
+              (item.type === "area" && nextItem.type === "floor")
+            ) {
+              return {
+                ...item,
+                last: true,
+              };
+            }
+
+            return item;
+          })
+        );
+      }
+
+      if (searchTerm && items.length === 0) {
+        items.push({
+          id: EMPTY_SEARCH,
+          primary: this.hass.localize(
+            "ui.components.target-picker.no_target_found",
+            { term: html`<span class="search-term">"${searchTerm}"</span>` }
+          ),
+        });
+      } else if (items.length === 0) {
+        items.push({
+          id: EMPTY_SEARCH,
+          primary: this.hass.localize("ui.components.target-picker.no_targets"),
+        });
+      }
+
+      if (this.mode === "dialog") {
+        items.push("padding"); // padding for safe area inset
+      }
+
+      return items;
+    }
+  );
+
+  private _areaFuseIndex = memoizeOne((states: FloorComboBoxItem[]) =>
+    Fuse.createIndex(["search_labels"], states)
+  );
+
+  private _entityFuseIndex = memoizeOne((states: EntityComboBoxItem[]) =>
+    Fuse.createIndex(["search_labels"], states)
+  );
+
+  private _deviceFuseIndex = memoizeOne((states: DevicePickerItem[]) =>
+    Fuse.createIndex(["search_labels"], states)
+  );
+
+  private _labelFuseIndex = memoizeOne((states: PickerComboBoxItem[]) =>
+    Fuse.createIndex(["search_labels"], states)
+  );
+
+  private _searchChanged(ev: Event) {
+    const textfield = ev.target as HaTextField;
+    const value = textfield.value.trim();
+    this._searchTerm = value;
+  }
+
+  private _pickTarget = (id: string, type: TargetType) => {
+    if (type === "label" && id === EMPTY_SEARCH) {
+      return;
+    }
+    fireEvent(this, "target-picked", {
+      id,
+      type,
+    });
+  };
+
+  private _areaRowRenderer = (
+    item: FloorComboBoxItem & { last?: boolean },
+    index: number
+  ) => {
+    const rtl = computeRTL(this.hass);
+
+    const hasFloor = item.type === "area" && item.area?.floor_id;
+
+    return html`
+      <ha-combo-box-item
+        class=${this._selectedItemIndex === index ? "selected" : ""}
+        type="button"
+        style=${item.type === "area" && hasFloor
+          ? "--md-list-item-leading-space: 48px;"
+          : ""}
+        @click=${
+          // eslint-disable-next-line lit/no-template-arrow
+          () => {
+            this._pickTarget(item[item.type]?.[`${item.type}_id`], item.type);
+          }
+        }
+      >
+        ${item.type === "area" && hasFloor
+          ? html`
+              <ha-tree-indicator
+                style=${styleMap({
+                  width: "48px",
+                  position: "absolute",
+                  top: "0px",
+                  left: rtl ? undefined : "4px",
+                  right: rtl ? "4px" : undefined,
+                  transform: rtl ? "scaleX(-1)" : "",
+                })}
+                .end=${item.last}
+                slot="start"
+              ></ha-tree-indicator>
+            `
+          : nothing}
+        ${item.type === "floor" && item.floor
+          ? html`<ha-floor-icon
+              slot="start"
+              .floor=${item.floor}
+            ></ha-floor-icon>`
+          : item.icon
+            ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+            : html`<ha-svg-icon
+                slot="start"
+                .path=${item.icon_path || mdiTextureBox}
+              ></ha-svg-icon>`}
+        ${item.primary}
+      </ha-combo-box-item>
+    `;
+  };
+
+  private _deviceRowRenderer(item: DevicePickerItem, index: number) {
+    return html`
+      <ha-combo-box-item
+        type="button"
+        class=${this._selectedItemIndex === index ? "selected" : ""}
+        @click=${
+          // eslint-disable-next-line lit/no-template-arrow
+          () => {
+            this._pickTarget(item.id, "device");
+          }
+        }
+      >
+        ${item.domain
+          ? html`
+              <img
+                slot="start"
+                alt=""
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${brandsUrl({
+                  domain: item.domain,
+                  type: "icon",
+                  darkOptimized: this.hass.themes.darkMode,
+                })}
+              />
+            `
+          : 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>
+    `;
+  }
+
+  private get _showEntityId() {
+    return this.hass.userData?.showEntityIdPicker;
+  }
+
+  private _entityRowRenderer = (item: EntityComboBoxItem, index: number) => {
+    const showEntityId = this._showEntityId;
+
+    return html`
+      <ha-combo-box-item
+        class=${this._selectedItemIndex === index ? "selected" : ""}
+        type="button"
+        compact
+        @click=${
+          // eslint-disable-next-line lit/no-template-arrow
+          () => {
+            this._pickTarget(item.id, "entity");
+          }
+        }
+      >
+        ${item.icon_path
+          ? html`
+              <ha-svg-icon
+                slot="start"
+                style="margin: 0 4px"
+                .path=${item.icon_path}
+              ></ha-svg-icon>
+            `
+          : html`
+              <state-badge
+                slot="start"
+                .stateObj=${item.stateObj}
+                .hass=${this.hass}
+              ></state-badge>
+            `}
+        <span slot="headline">${item.primary}</span>
+        ${item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing}
+        ${item.stateObj && showEntityId
+          ? html`
+              <span slot="supporting-text" class="code">
+                ${item.stateObj.entity_id}
+              </span>
+            `
+          : nothing}
+        ${item.domain_name && !showEntityId
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${item.domain_name}
+              </div>
+            `
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
+
+  private _toggleFilter(ev: any) {
+    this._selectedItemIndex = -1;
+    const type = ev.target.type as TargetTypeFloorless;
+    if (!type) {
+      return;
+    }
+    const index = this.filterTypes.indexOf(type);
+    if (index === -1) {
+      this.filterTypes = [...this.filterTypes, type];
+    } else {
+      this.filterTypes = this.filterTypes.filter((t) => t !== type);
+    }
+
+    // Reset scroll position when filter changes
+    if (this._virtualizerElement) {
+      this._virtualizerElement.scrollTop = 0;
+    }
+
+    fireEvent(this, "filter-types-changed", this.filterTypes);
+  }
+
+  @eventOptions({ passive: true })
+  private _onScrollList(ev) {
+    const top = ev.target.scrollTop ?? 0;
+    this._listScrolled = top > 0;
+  }
+
+  static styles = [
+    haStyleScrollbar,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding-top: 12px;
+        flex: 1;
+      }
+
+      ha-textfield {
+        padding: 0 12px;
+      }
+
+      .filter {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        padding: 0 12px;
+        --ha-button-border-radius: var(--ha-border-radius-md);
+      }
+
+      .filter .separator {
+        height: 32px;
+        width: 0;
+        border: 1px solid var(--ha-color-border-neutral-quiet);
+      }
+
+      .title {
+        width: 100%;
+        background-color: var(--ha-color-fill-neutral-quiet-resting);
+        padding: 4px 8px;
+        font-weight: var(--ha-font-weight-bold);
+        color: var(--secondary-text-color);
+      }
+
+      :host([mode="dialog"]) .title {
+        padding: 4px 16px;
+      }
+
+      :host([mode="dialog"]) .filter,
+      :host([mode="dialog"]) ha-textfield {
+        padding: 0 16px;
+      }
+
+      ha-combo-box-item {
+        width: 100%;
+      }
+
+      ha-combo-box-item.selected {
+        background-color: var(--ha-color-fill-neutral-quiet-hover);
+      }
+
+      lit-virtualizer {
+        flex: 1;
+      }
+
+      lit-virtualizer.scrolled {
+        border-top: 1px solid var(--ha-color-border-neutral-quiet);
+      }
+
+      .bottom-padding {
+        height: max(var(--safe-area-inset-bottom, 0px), 32px);
+        width: 100%;
+      }
+
+      .search-term {
+        color: var(--primary-color);
+        font-weight: var(--ha-font-weight-medium);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-selector": HaTargetPickerSelector;
+  }
+
+  interface HASSDomEvents {
+    "filter-types-changed": TargetTypeFloorless[];
+    "target-picked": {
+      type: TargetType;
+      id: string;
+    };
+  }
+}

src/data/area_floor.ts

@@ -0,0 +1,298 @@
+import memoizeOne from "memoize-one";
+import { computeAreaName } from "../common/entity/compute_area_name";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeFloorName } from "../common/entity/compute_floor_name";
+import { stringCompare } from "../common/string/compare";
+import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
+import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
+import type { HomeAssistant } from "../types";
+import type { AreaRegistryEntry } from "./area_registry";
+import {
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
+  type DeviceRegistryEntry,
+} from "./device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "./entity";
+import type { EntityRegistryDisplayEntry } from "./entity_registry";
+import { getFloorAreaLookup, type FloorRegistryEntry } from "./floor_registry";
+
+export interface FloorComboBoxItem extends PickerComboBoxItem {
+  type: "floor" | "area";
+  floor?: FloorRegistryEntry;
+  area?: AreaRegistryEntry;
+}
+
+export interface AreaFloorValue {
+  id: string;
+  type: "floor" | "area";
+}
+
+export const getAreasAndFloors = (
+  states: HomeAssistant["states"],
+  haFloors: HomeAssistant["floors"],
+  haAreas: HomeAssistant["areas"],
+  haDevices: HomeAssistant["devices"],
+  haEntities: HomeAssistant["entities"],
+  formatId: (value: AreaFloorValue) => string,
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  includeDeviceClasses?: string[],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  excludeAreas?: string[],
+  excludeFloors?: string[]
+) =>
+  memoizeOne(
+    (
+      haFloorsMemo: HomeAssistant["floors"],
+      haAreasMemo: HomeAssistant["areas"],
+      haDevicesMemo: HomeAssistant["devices"],
+      haEntitiesMemo: HomeAssistant["entities"],
+      includeDomainsMemo?: string[],
+      excludeDomainsMemo?: string[],
+      includeDeviceClassesMemo?: string[],
+      deviceFilterMemo?: HaDevicePickerDeviceFilterFunc,
+      entityFilterMemo?: HaEntityPickerEntityFilterFunc,
+      excludeAreasMemo?: string[],
+      excludeFloorsMemo?: string[]
+    ): FloorComboBoxItem[] => {
+      const floors = Object.values(haFloorsMemo);
+      const areas = Object.values(haAreasMemo);
+      const devices = Object.values(haDevicesMemo);
+      const entities = Object.values(haEntitiesMemo);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomainsMemo ||
+        excludeDomainsMemo ||
+        includeDeviceClassesMemo ||
+        deviceFilterMemo ||
+        entityFilterMemo
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+
+        if (includeDomainsMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomainsMemo.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomainsMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomainsMemo.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClassesMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClassesMemo.includes(
+                  stateObj.attributes.device_class
+                )
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClassesMemo.includes(
+                stateObj.attributes.device_class
+              )
+            );
+          });
+        }
+
+        if (deviceFilterMemo) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilterMemo!(device)
+          );
+        }
+
+        if (entityFilterMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilterMemo(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilterMemo!(stateObj);
+          });
+        }
+      }
+
+      let outputAreas = areas;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        outputAreas = outputAreas.filter((area) =>
+          areaIds!.includes(area.area_id)
+        );
+      }
+
+      if (excludeAreasMemo) {
+        outputAreas = outputAreas.filter(
+          (area) => !excludeAreasMemo!.includes(area.area_id)
+        );
+      }
+
+      if (excludeFloorsMemo) {
+        outputAreas = outputAreas.filter(
+          (area) =>
+            !area.floor_id || !excludeFloorsMemo!.includes(area.floor_id)
+        );
+      }
+
+      const floorAreaLookup = getFloorAreaLookup(outputAreas);
+      const unassisgnedAreas = Object.values(outputAreas).filter(
+        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
+      );
+
+      // @ts-ignore
+      const floorAreaEntries: [
+        FloorRegistryEntry | undefined,
+        AreaRegistryEntry[],
+      ][] = Object.entries(floorAreaLookup)
+        .map(([floorId, floorAreas]) => {
+          const floor = floors.find((fl) => fl.floor_id === floorId)!;
+          return [floor, floorAreas] as const;
+        })
+        .sort(([floorA], [floorB]) => {
+          if (floorA.level !== floorB.level) {
+            return (floorA.level ?? 0) - (floorB.level ?? 0);
+          }
+          return stringCompare(floorA.name, floorB.name);
+        });
+
+      const items: FloorComboBoxItem[] = [];
+
+      floorAreaEntries.forEach(([floor, floorAreas]) => {
+        if (floor) {
+          const floorName = computeFloorName(floor);
+
+          const areaSearchLabels = floorAreas
+            .map((area) => {
+              const areaName = computeAreaName(area) || area.area_id;
+              return [area.area_id, areaName, ...area.aliases];
+            })
+            .flat();
+
+          items.push({
+            id: formatId({ id: floor.floor_id, type: "floor" }),
+            type: "floor",
+            primary: floorName,
+            floor: floor,
+            search_labels: [
+              floor.floor_id,
+              floorName,
+              ...floor.aliases,
+              ...areaSearchLabels,
+            ],
+          });
+        }
+        items.push(
+          ...floorAreas.map((area) => {
+            const areaName = computeAreaName(area) || area.area_id;
+            return {
+              id: formatId({ id: area.area_id, type: "area" }),
+              type: "area" as const,
+              primary: areaName,
+              area: area,
+              icon: area.icon || undefined,
+              search_labels: [area.area_id, areaName, ...area.aliases],
+            };
+          })
+        );
+      });
+
+      items.push(
+        ...unassisgnedAreas.map((area) => {
+          const areaName = computeAreaName(area) || area.area_id;
+          return {
+            id: formatId({ id: area.area_id, type: "area" }),
+            type: "area" as const,
+            primary: areaName,
+            area: area,
+            icon: area.icon || undefined,
+            search_labels: [area.area_id, areaName, ...area.aliases],
+          };
+        })
+      );
+
+      return items;
+    }
+  )(
+    haFloors,
+    haAreas,
+    haDevices,
+    haEntities,
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeAreas,
+    excludeFloors
+  );

src/data/device_registry.ts

@@ -1,12 +1,21 @@
+import memoizeOne from "memoize-one";
+import { computeAreaName } from "../common/entity/compute_area_name";
+import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
+import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
+import { getDeviceContext } from "../common/entity/context/get_device_context";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
+import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
+import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
 import type { ConfigEntry } from "./config_entries";
+import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
 } from "./entity_registry";
 import type { EntitySources } from "./entity_sources";
+import { domainToName } from "./integration";
 import type { RegistryEntry } from "./registry";
 
 export {
@@ -163,3 +172,175 @@ export const getDeviceIntegrationLookup = (
   }
   return deviceIntegrations;
 };
+
+export interface DevicePickerItem extends PickerComboBoxItem {
+  domain?: string;
+  domain_name?: string;
+}
+
+export const getDevices = (
+  hass: HomeAssistant,
+  configEntryLookup: Record<string, ConfigEntry>,
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  includeDeviceClasses?: string[],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  excludeDevices?: string[],
+  value?: string
+): DevicePickerItem[] =>
+  memoizeOne(
+    (
+      haDevicesMemo: HomeAssistant["devices"],
+      haEntitiesMemo: HomeAssistant["entities"],
+      configEntryLookupMemo: Record<string, ConfigEntry>,
+      includeDomainsMemo?: string[],
+      excludeDomainsMemo?: string[],
+      includeDeviceClassesMemo?: string[],
+      deviceFilterMemo?: HaDevicePickerDeviceFilterFunc,
+      entityFilterMemo?: HaEntityPickerEntityFilterFunc,
+      excludeDevicesMemo?: string[]
+    ): DevicePickerItem[] => {
+      const devices = Object.values(haDevicesMemo);
+      const entities = Object.values(haEntitiesMemo);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+
+      if (
+        includeDomainsMemo ||
+        excludeDomainsMemo ||
+        includeDeviceClassesMemo ||
+        entityFilterMemo
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+      }
+
+      let inputDevices = devices.filter(
+        (device) => device.id === value || !device.disabled_by
+      );
+
+      if (includeDomainsMemo) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) =>
+            includeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDomainsMemo) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return true;
+          }
+          return entities.every(
+            (entity) =>
+              !excludeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDevicesMemo) {
+        inputDevices = inputDevices.filter(
+          (device) => !excludeDevicesMemo!.includes(device.id)
+        );
+      }
+
+      if (includeDeviceClassesMemo) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) => {
+            const stateObj = hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClassesMemo.includes(
+                stateObj.attributes.device_class
+              )
+            );
+          });
+        });
+      }
+
+      if (entityFilterMemo) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return devEntities.some((entity) => {
+            const stateObj = hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilterMemo(stateObj);
+          });
+        });
+      }
+
+      if (deviceFilterMemo) {
+        inputDevices = inputDevices.filter(
+          (device) =>
+            // We always want to include the device of the current value
+            device.id === value || deviceFilterMemo!(device)
+        );
+      }
+
+      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
+        const deviceName = computeDeviceNameDisplay(
+          device,
+          hass,
+          deviceEntityLookup[device.id]
+        );
+
+        const { area } = getDeviceContext(device, hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const configEntry = device.primary_config_entry
+          ? configEntryLookupMemo?.[device.primary_config_entry]
+          : undefined;
+
+        const domain = configEntry?.domain;
+        const domainName = domain
+          ? domainToName(hass.localize, domain)
+          : undefined;
+
+        return {
+          id: device.id,
+          label: "",
+          primary:
+            deviceName ||
+            hass.localize("ui.components.device-picker.unnamed_device"),
+          secondary: areaName,
+          domain: configEntry?.domain,
+          domain_name: domainName,
+          search_labels: [deviceName, areaName, domain, domainName].filter(
+            Boolean
+          ) as string[],
+          sorting_label: deviceName || "zzz",
+        };
+      });
+
+      return outputDevices;
+    }
+  )(
+    hass.devices,
+    hass.entities,
+    configEntryLookup,
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeDevices
+  );

src/data/entity.ts

@@ -1,3 +1,4 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import { arrayLiteralIncludes } from "../common/array/literal-includes";
 
 export const UNAVAILABLE = "unavailable";
@@ -10,3 +11,5 @@ export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;
 
 export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
 export const isOffState = arrayLiteralIncludes(OFF_STATES);
+
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

src/data/entity_registry.ts

@@ -1,12 +1,16 @@
-import type { Connection } from "home-assistant-js-websocket";
+import type { Connection, HassEntity } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
+import { computeRTL } from "../common/util/compute_rtl";
 import { debounce } from "../common/util/debounce";
+import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
+import type { HaEntityPickerEntityFilterFunc } from "./entity";
+import { domainToName } from "./integration";
 import type { LightColor } from "./light";
 import type { RegistryEntry } from "./registry";
 
@@ -324,3 +328,141 @@ export const getAutomaticEntityIds = (
     type: "config/entity_registry/get_automatic_entity_ids",
     entity_ids,
   });
+
+export interface EntityComboBoxItem extends PickerComboBoxItem {
+  domain_name?: string;
+  stateObj?: HassEntity;
+}
+
+export const getEntities = (
+  hass: HomeAssistant,
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  includeDeviceClasses?: string[],
+  includeUnitOfMeasurement?: string[],
+  includeEntities?: string[],
+  excludeEntities?: string[],
+  value?: string
+): EntityComboBoxItem[] =>
+  memoizeOne(
+    (
+      states: HomeAssistant["states"],
+      isRTLMemo: boolean,
+      includeDomainsMemo?: string[],
+      excludeDomainsMemo?: string[],
+      entityFilterMemo?: HaEntityPickerEntityFilterFunc,
+      includeDeviceClassesMemo?: string[],
+      includeUnitOfMeasurementMemo?: string[],
+      includeEntitiesMemo?: string[],
+      excludeEntitiesMemo?: string[]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];
+
+      let entityIds = Object.keys(states);
+
+      if (includeEntitiesMemo) {
+        entityIds = entityIds.filter((entityId) =>
+          includeEntitiesMemo.includes(entityId)
+        );
+      }
+
+      if (excludeEntitiesMemo) {
+        entityIds = entityIds.filter(
+          (entityId) => !excludeEntitiesMemo.includes(entityId)
+        );
+      }
+
+      if (includeDomainsMemo) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomainsMemo.includes(computeDomain(eid))
+        );
+      }
+
+      if (excludeDomainsMemo) {
+        entityIds = entityIds.filter(
+          (eid) => !excludeDomainsMemo.includes(computeDomain(eid))
+        );
+      }
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = states[entityId];
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = hass.formatEntityName(stateObj, "entity");
+        const deviceName = hass.formatEntityName(stateObj, "device");
+        const areaName = hass.formatEntityName(stateObj, "area");
+
+        const domainName = domainToName(hass.localize, computeDomain(entityId));
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTLMemo ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClassesMemo) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClassesMemo.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurementMemo) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurementMemo.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilterMemo) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === value ||
+            (item.stateObj && entityFilterMemo!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  )(
+    hass.states,
+    computeRTL(hass),
+    includeDomains,
+    excludeDomains,
+    entityFilter,
+    includeDeviceClasses,
+    includeUnitOfMeasurement,
+    includeEntities,
+    excludeEntities
+  );

src/data/haptics.ts

@@ -28,6 +28,6 @@ declare global {
   }
 }
 
-export const forwardHaptic = (hapticType: HapticType) => {
-  fireEvent(window, "haptic", hapticType);
+export const forwardHaptic = (node: HTMLElement, hapticType: HapticType) => {
+  fireEvent(node, "haptic", hapticType);
 };

src/data/label_registry.ts

@@ -1,9 +1,21 @@
+import { mdiLabel } from "@mdi/js";
 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 memoizeOne from "memoize-one";
+import { computeDomain } from "../common/entity/compute_domain";
 import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
+import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
+import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
+import {
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
+  type DeviceRegistryEntry,
+} from "./device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "./entity";
+import type { EntityRegistryDisplayEntry } from "./entity_registry";
 import type { RegistryEntry } from "./registry";
 
 export interface LabelRegistryEntry extends RegistryEntry {
@@ -88,3 +100,211 @@ export const deleteLabelRegistryEntry = (
     type: "config/label_registry/delete",
     label_id: labelId,
   });
+
+export const getLabels = (
+  hass: HomeAssistant,
+  labels?: LabelRegistryEntry[],
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  includeDeviceClasses?: string[],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  excludeLabels?: string[]
+): PickerComboBoxItem[] =>
+  memoizeOne(
+    (
+      haAreasMemo: HomeAssistant["areas"],
+      haDevicesMemo: HomeAssistant["devices"],
+      haEntitiesMemo: HomeAssistant["entities"],
+      labelsMemo?: LabelRegistryEntry[],
+      includeDomainsMemo?: string[],
+      excludeDomainsMemo?: string[],
+      includeDeviceClassesMemo?: string[],
+      deviceFilterMemo?: HaDevicePickerDeviceFilterFunc,
+      entityFilterMemo?: HaEntityPickerEntityFilterFunc,
+      excludeLabelsMemo?: string[]
+    ): PickerComboBoxItem[] => {
+      if (!labelsMemo || labelsMemo.length === 0) {
+        return [];
+      }
+
+      const devices = Object.values(haDevicesMemo);
+      const entities = Object.values(haEntitiesMemo);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomainsMemo ||
+        excludeDomainsMemo ||
+        includeDeviceClassesMemo ||
+        deviceFilterMemo ||
+        entityFilterMemo
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.labels.length > 0);
+
+        if (includeDomainsMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomainsMemo.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomainsMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomainsMemo.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomainsMemo.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClassesMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClassesMemo.includes(
+                  stateObj.attributes.device_class
+                )
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClassesMemo.includes(
+                stateObj.attributes.device_class
+              )
+            );
+          });
+        }
+
+        if (deviceFilterMemo) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilterMemo!(device)
+          );
+        }
+
+        if (entityFilterMemo) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilterMemo(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilterMemo!(stateObj);
+          });
+        }
+      }
+
+      let outputLabels = labelsMemo;
+      const usedLabels = new Set<string>();
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+
+        inputDevices.forEach((device) => {
+          device.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+        inputEntities.forEach((entity) => {
+          entity.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (areaIds) {
+        areaIds.forEach((areaId) => {
+          const area = haAreasMemo[areaId];
+          area.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (excludeLabelsMemo) {
+        outputLabels = outputLabels.filter(
+          (label) => !excludeLabelsMemo!.includes(label.label_id)
+        );
+      }
+
+      if (inputDevices || inputEntities) {
+        outputLabels = outputLabels.filter((label) =>
+          usedLabels.has(label.label_id)
+        );
+      }
+
+      const items = outputLabels.map<PickerComboBoxItem>((label) => ({
+        id: label.label_id,
+        primary: label.name,
+        icon: label.icon || undefined,
+        icon_path: label.icon ? undefined : mdiLabel,
+        sorting_label: label.name,
+        search_labels: [label.name, label.label_id, label.description].filter(
+          (v): v is string => Boolean(v)
+        ),
+      }));
+
+      return items;
+    }
+  )(
+    hass.areas,
+    hass.devices,
+    hass.entities,
+    labels,
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeLabels
+  );

src/data/lovelace/config/badge.ts

@@ -4,6 +4,7 @@ export interface LovelaceBadgeConfig {
   type: string;
   [key: string]: any;
   visibility?: Condition[];
+  disabled?: boolean;
 }
 
 export const ensureBadgeConfig = (

src/data/media-player.ts

@@ -39,6 +39,8 @@ import type { HomeAssistant, TranslationDict } from "../types";
 import { isUnavailableState } from "./entity";
 import { isTTSMediaSource } from "./tts";
 
+import { generateEntityFilter } from "../common/entity/entity_filter";
+
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_content_id?: string;
   media_content_type?: string;
@@ -522,3 +524,33 @@ export const mediaPlayerJoin = (
 
 export const mediaPlayerUnjoin = (hass: HomeAssistant, entity_id: string) =>
   hass.callService("media_player", "unjoin", {}, { entity_id });
+
+/**
+ * Compute active media player states in a specific area.
+ * @param hass Home Assistant object
+ * @param areaId Area ID to filter media players by
+ * @returns Array of playing media player entities
+ */
+export const computeActiveAreaMediaStates = (
+  hass: HomeAssistant,
+  areaId: string
+): MediaPlayerEntity[] => {
+  const area = hass.areas[areaId];
+  if (!area) {
+    return [];
+  }
+
+  // Get all media_player entities in this area
+  const mediaFilter = generateEntityFilter(hass, {
+    area: areaId,
+    domain: "media_player",
+  });
+
+  const mediaEntities = Object.keys(hass.entities).filter(mediaFilter);
+
+  return mediaEntities
+    .map((entityId) => hass.states[entityId] as MediaPlayerEntity | undefined)
+    .filter(
+      (stateObj): stateObj is MediaPlayerEntity => stateObj?.state === "playing"
+    );
+};

src/data/panel.ts

@@ -66,9 +66,9 @@ export const getPanelIcon = (panel: PanelInfo): string | null => {
   if (!panel.icon) {
     switch (panel.component_name) {
       case "profile":
-        return "hass:account";
+        return "mdi:account";
       case "lovelace":
-        return "hass:view-dashboard";
+        return "mdi:view-dashboard";
     }
   }
 

src/data/target.ts

@@ -0,0 +1,161 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { computeDomain } from "../common/entity/compute_domain";
+import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
+import type { HomeAssistant } from "../types";
+import type { AreaRegistryEntry } from "./area_registry";
+import type { DeviceRegistryEntry } from "./device_registry";
+import type { EntityRegistryDisplayEntry } from "./entity_registry";
+import type { HaEntityPickerEntityFilterFunc } from "./entity";
+
+export interface ExtractFromTargetResult {
+  missing_areas: string[];
+  missing_devices: string[];
+  missing_floors: string[];
+  missing_labels: string[];
+  referenced_areas: string[];
+  referenced_devices: string[];
+  referenced_entities: string[];
+}
+
+export interface ExtractFromTargetResultReferenced {
+  referenced_areas: string[];
+  referenced_devices: string[];
+  referenced_entities: string[];
+}
+
+export const extractFromTarget = async (
+  hass: HomeAssistant,
+  target: HassServiceTarget
+) =>
+  hass.callWS<ExtractFromTargetResult>({
+    type: "extract_from_target",
+    target,
+  });
+
+export const areaMeetsFilter = (
+  area: AreaRegistryEntry,
+  devices: HomeAssistant["devices"],
+  entities: HomeAssistant["entities"],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  includeDomains?: string[],
+  includeDeviceClasses?: string[],
+  states?: HomeAssistant["states"],
+  entityFilter?: HaEntityPickerEntityFilterFunc
+): boolean => {
+  const areaDevices = Object.values(devices).filter(
+    (device) => device.area_id === area.area_id
+  );
+
+  if (
+    areaDevices.some((device) =>
+      deviceMeetsFilter(
+        device,
+        entities,
+        deviceFilter,
+        includeDomains,
+        includeDeviceClasses,
+        states,
+        entityFilter
+      )
+    )
+  ) {
+    return true;
+  }
+
+  const areaEntities = Object.values(entities).filter(
+    (entity) => entity.area_id === area.area_id
+  );
+
+  if (
+    areaEntities.some((entity) =>
+      entityRegMeetsFilter(
+        entity,
+        false,
+        includeDomains,
+        includeDeviceClasses,
+        states,
+        entityFilter
+      )
+    )
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const deviceMeetsFilter = (
+  device: DeviceRegistryEntry,
+  entities: HomeAssistant["entities"],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  includeDomains?: string[],
+  includeDeviceClasses?: string[],
+  states?: HomeAssistant["states"],
+  entityFilter?: HaEntityPickerEntityFilterFunc
+): boolean => {
+  const devEntities = Object.values(entities).filter(
+    (entity) => entity.device_id === device.id
+  );
+
+  if (
+    !devEntities.some((entity) =>
+      entityRegMeetsFilter(
+        entity,
+        false,
+        includeDomains,
+        includeDeviceClasses,
+        states,
+        entityFilter
+      )
+    )
+  ) {
+    return false;
+  }
+
+  if (deviceFilter) {
+    return deviceFilter(device);
+  }
+
+  return true;
+};
+
+export const entityRegMeetsFilter = (
+  entity: EntityRegistryDisplayEntry,
+  includeSecondary = false,
+  includeDomains?: string[],
+  includeDeviceClasses?: string[],
+  states?: HomeAssistant["states"],
+  entityFilter?: HaEntityPickerEntityFilterFunc
+): boolean => {
+  if (entity.hidden || (entity.entity_category && !includeSecondary)) {
+    return false;
+  }
+
+  if (
+    includeDomains &&
+    !includeDomains.includes(computeDomain(entity.entity_id))
+  ) {
+    return false;
+  }
+  if (includeDeviceClasses) {
+    const stateObj = states?.[entity.entity_id];
+    if (!stateObj) {
+      return false;
+    }
+    if (
+      !stateObj.attributes.device_class ||
+      !includeDeviceClasses!.includes(stateObj.attributes.device_class)
+    ) {
+      return false;
+    }
+  }
+
+  if (entityFilter) {
+    const stateObj = states?.[entity.entity_id];
+    if (!stateObj) {
+      return false;
+    }
+    return entityFilter!(stateObj);
+  }
+  return true;
+};

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -325,7 +325,7 @@ class StepFlowCreateEntry extends LitElement {
         .device-info {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .device-info img {
           width: 40px;

src/dialogs/config-flow/step-flow-loading.ts

@@ -26,20 +26,21 @@ class StepFlowLoading extends LitElement {
       this.step
     );
     return html`
-      <div class="init-spinner">
+      <div class="content">
+        <ha-spinner size="large"></ha-spinner>
         ${description ? html`<div>${description}</div>` : ""}
-        <ha-spinner></ha-spinner>
       </div>
     `;
   }
 
   static styles = css`
-    .init-spinner {
+    .content {
+      margin-top: 0;
       padding: 50px 100px;
       text-align: center;
     }
     ha-spinner {
-      margin-top: 16px;
+      margin-bottom: 16px;
     }
   `;
 }

src/dialogs/config-flow/step-flow-progress.ts

@@ -48,6 +48,7 @@ class StepFlowProgress extends LitElement {
       configFlowContentStyles,
       css`
         .content {
+          margin-top: 0;
           padding: 50px 100px;
           text-align: center;
         }

src/dialogs/enter-code/dialog-enter-code.ts

@@ -209,7 +209,7 @@ export class DialogEnterCode
       display: grid;
       grid-template-columns: repeat(var(--keypad-columns), auto);
       grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: var(--ha-space-6);
       justify-items: center;
       align-items: center;
     }

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -32,7 +32,7 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: auto;
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -110,7 +110,7 @@ class LightRgbColorPicker extends LitElement {
         ? html`<ha-labeled-slider
             labeled
             .caption=${this.hass.localize("ui.card.light.color_brightness")}
-            icon="hass:brightness-7"
+            icon="mdi:brightness-7"
             min="0"
             max="100"
             .value=${this._colorBrightnessSliderValue}
@@ -122,7 +122,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.white_value")}
-              icon="hass:file-word-box"
+              icon="mdi:file-word-box"
               min="0"
               max="100"
               .name=${"wv"}
@@ -136,7 +136,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.cold_white_value")}
-              icon="hass:file-word-box-outline"
+              icon="mdi:file-word-box-outline"
               min="0"
               max="100"
               .name=${"cw"}
@@ -146,7 +146,7 @@ class LightRgbColorPicker extends LitElement {
             <ha-labeled-slider
               labeled
               .caption=${this.hass.localize("ui.card.light.warm_white_value")}
-              icon="hass:file-word-box"
+              icon="mdi:file-word-box"
               min="0"
               max="100"
               .name=${"ww"}

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -202,13 +202,13 @@ class MoreInfoSirenAdvancedControls extends LitElement {
         .options {
           display: flex;
           flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .controls {
           display: flex;
           flex-direction: row;
           justify-content: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           margin-top: 16px;
         }
         ha-control-button {

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

@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -42,7 +42,7 @@ class MoreInfoFan extends LitElement {
 
   private _toggle = () => {
     const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
-    forwardHaptic("light");
+    forwardHaptic(this, "light");
     this.hass.callService("fan", service, {
       entity_id: this.stateObj!.entity_id,
     });

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

@@ -310,7 +310,7 @@ class MoreInfoLight extends LitElement {
 
   private _toggle = () => {
     const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
-    forwardHaptic("light");
+    forwardHaptic(this, "light");
     this.hass.callService("light", service, {
       entity_id: this.stateObj!.entity_id,
     });

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

@@ -181,7 +181,7 @@ class MoreInfoLock extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           font-weight: var(--ha-font-weight-medium);
           color: var(--success-color);
         }

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

@@ -48,10 +48,10 @@ class MoreInfoMediaPlayer extends LitElement {
 
   @property({ attribute: false }) public stateObj?: MediaPlayerEntity;
 
-  private _formateDuration(duration: number) {
+  private _formatDuration(duration: number) {
     const hours = Math.floor(duration / 3600);
     const minutes = Math.floor((duration % 3600) / 60);
-    const seconds = duration % 60;
+    const seconds = Math.floor(duration % 60);
     return formatDurationDigital(this.hass.locale, {
       hours,
       minutes,
@@ -260,12 +260,12 @@ class MoreInfoMediaPlayer extends LitElement {
     const controls = computeMediaControls(stateObj, true);
     const coverUrl = stateObj.attributes.entity_picture || "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
-    const position = Math.floor(playerObj.currentProgress) || 0;
-    const duration = stateObj.attributes.media_duration || 0;
-    const remaining = duration - position;
-    const durationFormated =
-      remaining > 0 ? this._formateDuration(remaining) : 0;
-    const postionFormated = this._formateDuration(position);
+
+    const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
+    const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
+    const remaining = Math.max(duration - position, 0);
+    const remainingFormatted = this._formatDuration(remaining);
+    const positionFormatted = this._formatDuration(position);
     const primaryTitle = playerObj.primaryTitle;
     const secondaryTitle = playerObj.secondaryTitle;
     const turnOn = controls?.find((c) => c.action === "turn_on");
@@ -323,11 +323,10 @@ class MoreInfoMediaPlayer extends LitElement {
                 @change=${this._handleMediaSeekChanged}
                 ?disabled=${!stateActive(stateObj) ||
                 !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
-              ></ha-slider>
-              <div class="position-info-row">
-                <span class="position-time">${postionFormated}</span>
-                <span class="duration-time">${durationFormated}</span>
-              </div>
+              >
+                <span slot="reference">${positionFormatted}</span>
+                <span slot="reference">${remainingFormatted}</span>
+              </ha-slider>
             </div>
           `
         : nothing}
@@ -443,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       margin-top: 0;
     }
 
@@ -477,6 +476,22 @@ class MoreInfoMediaPlayer extends LitElement {
       height: 320px;
     }
 
+    @media (max-height: 750px) {
+      .cover-container {
+        height: 120px;
+      }
+
+      .cover-image {
+        width: 100px;
+        height: 100px;
+      }
+
+      .cover-image--playing {
+        width: 120px;
+        height: 120px;
+      }
+    }
+
     .empty-cover {
       background-color: var(--secondary-background-color);
       font-size: 1.5em;
@@ -511,7 +526,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .volume {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin-left: 8px;
     }
 
@@ -548,13 +563,8 @@ class MoreInfoMediaPlayer extends LitElement {
       flex-direction: column;
     }
 
-    .position-info-row {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    .position-bar ha-slider::part(references) {
       color: var(--secondary-text-color);
-      padding: 0 8px;
-      font-size: var(--ha-font-size-s);
     }
 
     .media-info-row {
@@ -597,7 +607,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .bottom-controls {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       align-self: center;
       width: 320px;
     }

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

@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     a {

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -269,7 +269,7 @@ class DialogShortcuts extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 8px;
+        gap: var(--ha-space-2);
         margin: 4px 0;
       }