Merge branches 'target-selector' and 'dev' of github.com:home-assistant/frontend into target-selector

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
+        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@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
+        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@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: |
             dist/*.whl
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
+        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

package.json

@@ -37,15 +37,15 @@
     "@codemirror/view": "6.38.4",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.1",
-    "@formatjs/intl-displaynames": "6.8.12",
-    "@formatjs/intl-durationformat": "0.7.5",
-    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.12",
-    "@formatjs/intl-locale": "4.2.12",
-    "@formatjs/intl-numberformat": "8.15.5",
-    "@formatjs/intl-pluralrules": "5.4.5",
-    "@formatjs/intl-relativetimeformat": "11.4.12",
+    "@formatjs/intl-datetimeformat": "6.18.0",
+    "@formatjs/intl-displaynames": "6.8.11",
+    "@formatjs/intl-durationformat": "0.7.4",
+    "@formatjs/intl-getcanonicallocales": "2.5.5",
+    "@formatjs/intl-listformat": "7.7.11",
+    "@formatjs/intl-locale": "4.2.11",
+    "@formatjs/intl-numberformat": "8.15.4",
+    "@formatjs/intl-pluralrules": "5.4.4",
+    "@formatjs/intl-relativetimeformat": "11.4.11",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
@@ -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.2",
-    "@vaadin/vaadin-themable-mixin": "24.9.2",
+    "@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",
@@ -114,7 +114,7 @@
     "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.17",
+    "intl-messageformat": "10.7.16",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",

src/common/controllers/undo-redo-controller.ts

@@ -1,141 +0,0 @@
-import type {
-  ReactiveController,
-  ReactiveControllerHost,
-} from "@lit/reactive-element/reactive-controller";
-
-const UNDO_REDO_STACK_LIMIT = 75;
-
-/**
- * Configuration options for the UndoRedoController.
- *
- * @template ConfigType The type of configuration to manage.
- */
-export interface UndoRedoControllerConfig<ConfigType> {
-  stackLimit?: number;
-  currentConfig: () => ConfigType;
-  apply: (config: ConfigType) => void;
-}
-
-/**
- * A controller to manage undo and redo operations for a given configuration type.
- *
- * @template ConfigType The type of configuration to manage.
- */
-export class UndoRedoController<ConfigType> implements ReactiveController {
-  private _host: ReactiveControllerHost;
-
-  private _undoStack: ConfigType[] = [];
-
-  private _redoStack: ConfigType[] = [];
-
-  private readonly _stackLimit: number = UNDO_REDO_STACK_LIMIT;
-
-  private readonly _apply: (config: ConfigType) => void = () => {
-    throw new Error("No apply function provided");
-  };
-
-  private readonly _currentConfig: () => ConfigType = () => {
-    throw new Error("No currentConfig function provided");
-  };
-
-  constructor(
-    host: ReactiveControllerHost,
-    options: UndoRedoControllerConfig<ConfigType>
-  ) {
-    if (options.stackLimit !== undefined) {
-      this._stackLimit = options.stackLimit;
-    }
-
-    this._apply = options.apply;
-    this._currentConfig = options.currentConfig;
-    this._host = host;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    window.addEventListener("undo-change", this._onUndoChange);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener("undo-change", this._onUndoChange);
-  }
-
-  private _onUndoChange = (ev: Event) => {
-    ev.stopPropagation();
-    this.undo();
-    this._host.requestUpdate();
-  };
-
-  /**
-   * Indicates whether there are actions available to undo.
-   *
-   * @returns `true` if there are actions to undo, `false` otherwise.
-   */
-  public get canUndo(): boolean {
-    return this._undoStack.length > 0;
-  }
-
-  /**
-   * Indicates whether there are actions available to redo.
-   *
-   * @returns `true` if there are actions to redo, `false` otherwise.
-   */
-  public get canRedo(): boolean {
-    return this._redoStack.length > 0;
-  }
-
-  /**
-   * Commits the current configuration to the undo stack and clears the redo stack.
-   *
-   * @param config The current configuration to commit.
-   */
-  public commit(config: ConfigType) {
-    if (this._undoStack.length >= this._stackLimit) {
-      this._undoStack.shift();
-    }
-    this._undoStack.push({ ...config });
-    this._redoStack = [];
-  }
-
-  /**
-   * Undoes the last action and applies the previous configuration
-   * while saving the current configuration to the redo stack.
-   */
-  public undo() {
-    if (this._undoStack.length === 0) {
-      return;
-    }
-    this._redoStack.push({ ...this._currentConfig() });
-    const config = this._undoStack.pop()!;
-    this._apply(config);
-    this._host.requestUpdate();
-  }
-
-  /**
-   * Redoes the last undone action and reapplies the configuration
-   * while saving the current configuration to the undo stack.
-   */
-  public redo() {
-    if (this._redoStack.length === 0) {
-      return;
-    }
-    this._undoStack.push({ ...this._currentConfig() });
-    const config = this._redoStack.pop()!;
-    this._apply(config);
-    this._host.requestUpdate();
-  }
-
-  /**
-   * Resets the undo and redo stacks, clearing all history.
-   */
-  public reset() {
-    this._undoStack = [];
-    this._redoStack = [];
-  }
-}
-
-declare global {
-  interface HASSDomEvents {
-    "undo-change": undefined;
-  }
-}

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/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,162 +106,18 @@ 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
+      this.excludeDevices,
+      this.value
     );
 
-  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;
-    }
-  );
-
   private _valueRenderer = memoizeOne(
     (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
       const deviceId = value;

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,125 +250,10 @@ export class HaEntityPicker extends LitElement {
       this.includeDeviceClasses,
       this.includeUnitOfMeasurement,
       this.includeEntities,
-      this.excludeEntities
+      this.excludeEntities,
+      this.value
     );
 
-  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;
-    }
-  );
-
   protected render() {
     const placeholder =
       this.placeholder ??

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/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-area-picker.ts

@@ -107,7 +107,7 @@ export class HaAreaPicker extends LitElement {
           `;
         }
 
-        const { floor } = getAreaContext(area, this.hass);
+        const { floor } = getAreaContext(area, this.hass.floors);
 
         const areaName = area ? computeAreaName(area) : undefined;
         const floorName = floor ? computeFloorName(floor) : undefined;
@@ -279,7 +279,7 @@ export class HaAreaPicker extends LitElement {
       }
 
       const items = outputAreas.map<PickerComboBoxItem>((area) => {
-        const { floor } = getAreaContext(area, this.hass);
+        const { floor } = getAreaContext(area, this.hass.floors);
         const floorName = floor ? computeFloorName(floor) : undefined;
         const areaName = computeAreaName(area);
         return {

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-button.ts

@@ -41,7 +41,8 @@ export class HaButton extends Button {
     return [
       Button.styles,
       css`
-        :host {
+        .button {
+          /* set theme vars */
           --wa-form-control-padding-inline: 16px;
           --wa-font-weight-action: var(--ha-font-weight-medium);
           --wa-form-control-border-radius: var(
@@ -53,8 +54,7 @@ export class HaButton extends Button {
             --ha-button-height,
             var(--button-height, 40px)
           );
-        }
-        .button {
+
           font-size: var(--ha-font-size-m);
           line-height: 1;
 

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-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-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,201 +131,20 @@ 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) {
-        return [
-          {
-            id: NO_LABELS,
-            primary: this.hass.localize("ui.components.label-picker.no_labels"),
-            icon_path: mdiLabel,
-          },
-        ];
-      }
-
-      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 = () => {
+    if (!this._labels || this._labels.length === 0) {
+      return [
+        {
+          id: NO_LABELS,
+          primary: this.hass.localize("ui.components.label-picker.no_labels"),
+          icon_path: mdiLabel,
+        },
+      ];
     }
-  );
 
-  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/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/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/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,863 @@
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
+import { consume } from "@lit/context";
+import { mdiCheck, mdiPlus, 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 { domainToName } from "../../data/integration";
+import { getLabels, type LabelRegistryEntry } from "../../data/label_registry";
+import {
+  isHelperDomain,
+  type HelperDomain,
+} from "../../panels/config/helpers/const";
+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___";
+const CREATE_ID = "___create-new-entity___";
+
+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;
+
+  @property({ attribute: false, type: Array }) public createDomains?: string[];
+
+  @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()}
+        .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 = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    if (!this._virtualizerElement) {
+      return;
+    }
+
+    const items = this._virtualizerElement.items;
+
+    const maxItems = items.length - 1;
+
+    if (maxItems === -1) {
+      this._selectedItemIndex = -1;
+      return;
+    }
+
+    const nextIndex =
+      maxItems === this._selectedItemIndex
+        ? this._selectedItemIndex
+        : this._selectedItemIndex + 1;
+
+    if (!items[nextIndex]) {
+      return;
+    }
+
+    if (
+      typeof items[nextIndex] === "string" ||
+      (items[nextIndex] as PickerComboBoxItem)?.id === EMPTY_SEARCH
+    ) {
+      // Skip titles, padding and empty search
+      if (nextIndex === maxItems) {
+        return;
+      }
+      this._selectedItemIndex = nextIndex + 1;
+    } else {
+      this._selectedItemIndex = nextIndex;
+    }
+
+    this._virtualizerElement?.scrollToIndex(this._selectedItemIndex, "end");
+  };
+
+  private _selectPreviousItem = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    if (!this._virtualizerElement) {
+      return;
+    }
+
+    if (this._selectedItemIndex > 0) {
+      const nextIndex = this._selectedItemIndex - 1;
+
+      const items = this._virtualizerElement.items;
+
+      if (!items[nextIndex]) {
+        return;
+      }
+
+      if (
+        typeof items[nextIndex] === "string" ||
+        (items[nextIndex] as PickerComboBoxItem)?.id === EMPTY_SEARCH
+      ) {
+        // Skip titles, padding and empty search
+        if (nextIndex === 0) {
+          return;
+        }
+        this._selectedItemIndex = nextIndex - 1;
+      } else {
+        this._selectedItemIndex = nextIndex;
+      }
+
+      this._virtualizerElement?.scrollToIndex(this._selectedItemIndex, "end");
+    }
+  };
+
+  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>`;
+    }
+
+    let type: TargetType | "empty" = "label";
+    let hasFloor = false;
+    let rtl = false;
+    let showEntityId = false;
+
+    if (
+      (item as FloorComboBoxItem).type === "area" ||
+      (item as FloorComboBoxItem).type === "floor"
+    ) {
+      type = (item as FloorComboBoxItem).type;
+      const areaItem = item as FloorComboBoxItem;
+      item.id = item[areaItem.type]?.[`${areaItem.type}_id`];
+
+      rtl = computeRTL(this.hass);
+      hasFloor = areaItem.type === "area" && !!areaItem.area?.floor_id;
+      // return this._areaRowRenderer(
+      //   item as FloorComboBoxItem & { last?: boolean },
+      //   index
+      // );
+    }
+
+    if ("domain" in item) {
+      type = "device";
+      // return this._deviceRowRenderer(item, index);
+    }
+
+    if ("stateObj" in item) {
+      type = "entity";
+      showEntityId = !!this._showEntityId;
+      // return this._entityRowRenderer(item, index);
+    }
+
+    if (item.id === EMPTY_SEARCH) {
+      type = "empty";
+    }
+
+    // label or empty
+    return html`
+      <ha-combo-box-item
+        tabindex="-1"
+        class=${this._selectedItemIndex === index ? "selected" : ""}
+        .type=${type === "empty" ? "text" : "button"}
+        @click=${this._handlePickTarget}
+        .targetType=${type}
+        .targetId=${item.id}
+        style=${(item as FloorComboBoxItem).type === "area" && hasFloor
+          ? "--md-list-item-leading-space: 48px;"
+          : ""}
+      >
+        ${(item as FloorComboBoxItem).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 as FloorComboBoxItem & { last?: boolean | undefined }
+                ).last}
+                slot="start"
+              ></ha-tree-indicator>
+            `
+          : nothing}
+        ${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>`
+            : (item as EntityComboBoxItem).stateObj
+              ? html`
+                  <state-badge
+                    slot="start"
+                    .stateObj=${(item as EntityComboBoxItem).stateObj}
+                    .hass=${this.hass}
+                  ></state-badge>
+                `
+              : (item as DevicePickerItem).domain
+                ? html`
+                    <img
+                      slot="start"
+                      alt=""
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      src=${brandsUrl({
+                        domain: (item as DevicePickerItem).domain!,
+                        type: "icon",
+                        darkOptimized: this.hass.themes.darkMode,
+                      })}
+                    />
+                  `
+                : (item as FloorComboBoxItem).type === "floor" &&
+                    (item as FloorComboBoxItem).floor
+                  ? html`<ha-floor-icon
+                      slot="start"
+                      .floor=${(item as FloorComboBoxItem).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>`}
+        <span slot="headline">${item.primary}</span>
+        ${item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing}
+        ${(item as EntityComboBoxItem).stateObj && showEntityId
+          ? html`
+              <span slot="supporting-text" class="code">
+                ${(item as EntityComboBoxItem).stateObj?.entity_id}
+              </span>
+            `
+          : nothing}
+        ${(item as EntityComboBoxItem).domain_name && !showEntityId
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${(item as EntityComboBoxItem).domain_name}
+              </div>
+            `
+          : nothing}
+        ${(item as DevicePickerItem).domain_name
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${(item as DevicePickerItem).domain_name}
+              </div>
+            `
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
+
+  private _filterGroup(
+    type: TargetType,
+    items: (FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem)[],
+    checkExact?: (
+      item: FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem
+    ) => boolean
+  ) {
+    const fuseIndex = this._fuseIndexes[type](items);
+    const fuse = new HaFuse(items, { shouldSort: false }, fuseIndex);
+
+    const results = fuse.multiTermsSearch(this._searchTerm);
+    let filteredItems = items;
+    if (results) {
+      filteredItems = results.map((result) => result.item);
+    }
+
+    if (!checkExact) {
+      return filteredItems;
+    }
+
+    // If there is exact match for entity id, put it first
+    const index = filteredItems.findIndex((item) => checkExact(item));
+    if (index === -1) {
+      return filteredItems;
+    }
+
+    return filteredItems;
+  }
+
+  private _getItems = () => {
+    const items: (
+      | string
+      | FloorComboBoxItem
+      | EntityComboBoxItem
+      | PickerComboBoxItem
+    )[] = [];
+
+    if (this.filterTypes.length === 0 || this.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 (this._searchTerm) {
+        entities = this._filterGroup(
+          "entity",
+          entities,
+          (item: EntityComboBoxItem) =>
+            item.stateObj?.entity_id === this._searchTerm
+        ) as EntityComboBoxItem[];
+      }
+
+      if (entities.length > 0 && this.filterTypes.length !== 1) {
+        // show group title
+        items.push(
+          this.hass.localize("ui.components.target-picker.type.entities")
+        );
+      }
+
+      items.push(...entities);
+    }
+
+    if (this.filterTypes.length === 0 || this.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 (this._searchTerm) {
+        devices = this._filterGroup("device", devices);
+      }
+
+      if (devices.length > 0 && this.filterTypes.length !== 1) {
+        // show group title
+        items.push(
+          this.hass.localize("ui.components.target-picker.type.devices")
+        );
+      }
+
+      items.push(...devices);
+    }
+
+    if (this.filterTypes.length === 0 || this.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 (this._searchTerm) {
+        labels = this._filterGroup("label", labels);
+      }
+
+      if (labels.length > 0 && this.filterTypes.length !== 1) {
+        // show group title
+        items.push(
+          this.hass.localize("ui.components.target-picker.type.labels")
+        );
+      }
+
+      items.push(...labels);
+    }
+
+    if (this.filterTypes.length === 0 || this.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 (this._searchTerm) {
+        areasAndFloors = this._filterGroup(
+          "area",
+          areasAndFloors
+        ) as FloorComboBoxItem[];
+      }
+
+      if (areasAndFloors.length > 0 && this.filterTypes.length !== 1) {
+        // show group title
+        items.push(
+          this.hass.localize("ui.components.target-picker.type.areas")
+        );
+      }
+
+      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;
+        })
+      );
+    }
+
+    items.push(...this._getCreateItems(this.createDomains));
+
+    if (this._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">"${this._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 _getCreateItems = memoizeOne(
+    (createDomains: this["createDomains"]) => {
+      if (!createDomains?.length) {
+        return [];
+      }
+
+      return createDomains.map((domain) => {
+        const primary = this.hass.localize(
+          "ui.components.entity.entity-picker.create_helper",
+          {
+            domain: isHelperDomain(domain)
+              ? this.hass.localize(
+                  `ui.panel.config.helpers.types.${domain as HelperDomain}`
+                )
+              : domainToName(this.hass.localize, domain),
+          }
+        );
+
+        return {
+          id: CREATE_ID + domain,
+          primary: primary,
+          secondary: this.hass.localize(
+            "ui.components.entity.entity-picker.new_entity"
+          ),
+          icon_path: mdiPlus,
+        } satisfies EntityComboBoxItem;
+      });
+    }
+  );
+
+  private _fuseIndexes = {
+    area: memoizeOne((states: FloorComboBoxItem[]) =>
+      this._createFuseIndex(states)
+    ),
+    entity: memoizeOne((states: EntityComboBoxItem[]) =>
+      this._createFuseIndex(states)
+    ),
+    device: memoizeOne((states: DevicePickerItem[]) =>
+      this._createFuseIndex(states)
+    ),
+    label: memoizeOne((states: PickerComboBoxItem[]) =>
+      this._createFuseIndex(states)
+    ),
+  };
+
+  private _createFuseIndex = (states) =>
+    Fuse.createIndex(["search_labels"], states);
+
+  private _searchChanged(ev: Event) {
+    const textfield = ev.target as HaTextField;
+    const value = textfield.value.trim();
+    this._searchTerm = value;
+    this._selectedItemIndex = -1;
+  }
+
+  private _handlePickTarget = (ev) => {
+    const id = ev.currentTarget?.targetId as string;
+    const type = ev.currentTarget?.targetType as TargetType;
+
+    if (!id || !type) {
+      return;
+    }
+
+    this._pickTarget(id, type);
+  };
+
+  private _pickTarget = (id: string, type: TargetType) => {
+    if (type === "label" && id === EMPTY_SEARCH) {
+      return;
+    }
+
+    if (id.startsWith(CREATE_ID)) {
+      const domain = id.substring(CREATE_ID.length);
+
+      fireEvent(this, "create-domain-picked", domain);
+      return;
+    }
+
+    fireEvent(this, "target-picked", {
+      id,
+      type,
+    });
+  };
+
+  private get _showEntityId() {
+    return this.hass.userData?.showEntityIdPicker;
+  }
+
+  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;
+        padding: 0 12px;
+        overflow: auto;
+        --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;
+    };
+    "create-domain-picked": 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/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/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/mixins/undo-redo-mixin.ts

@@ -0,0 +1,60 @@
+import type { LitElement } from "lit";
+import type { Constructor } from "../types";
+
+export const UndoRedoMixin = <T extends Constructor<LitElement>, ConfigType>(
+  superClass: T
+) => {
+  class UndoRedoClass extends superClass {
+    private _undoStack: ConfigType[] = [];
+
+    private _redoStack: ConfigType[] = [];
+
+    protected _undoStackLimit = 75;
+
+    protected pushToUndo(config: ConfigType) {
+      if (this._undoStack.length >= this._undoStackLimit) {
+        this._undoStack.shift();
+      }
+      this._undoStack.push({ ...config });
+      this._redoStack = [];
+    }
+
+    public undo() {
+      const currentConfig = this.currentConfig;
+      if (this._undoStack.length === 0 || !currentConfig) {
+        return;
+      }
+      this._redoStack.push({ ...currentConfig });
+      const config = this._undoStack.pop()!;
+      this.applyUndoRedo(config);
+    }
+
+    public redo() {
+      const currentConfig = this.currentConfig;
+      if (this._redoStack.length === 0 || !currentConfig) {
+        return;
+      }
+      this._undoStack.push({ ...currentConfig });
+      const config = this._redoStack.pop()!;
+      this.applyUndoRedo(config);
+    }
+
+    public get canUndo(): boolean {
+      return this._undoStack.length > 0;
+    }
+
+    public get canRedo(): boolean {
+      return this._redoStack.length > 0;
+    }
+
+    protected get currentConfig(): ConfigType | undefined {
+      return undefined;
+    }
+
+    protected applyUndoRedo(_: ConfigType) {
+      throw new Error("applyUndoRedo not implemented");
+    }
+  }
+
+  return UndoRedoClass;
+};

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -70,6 +70,7 @@ import { describeAction } from "../../../../data/script_i18n";
 import { callExecuteScript } from "../../../../data/service";
 import {
   showAlertDialog,
+  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -649,19 +650,21 @@ export default class HaAutomationActionRow extends LitElement {
   };
 
   private _onDelete = () => {
-    fireEvent(this, "value-changed", { value: null });
-    if (this._selected) {
-      fireEvent(this, "close-sidebar");
-    }
-
-    showToast(this, {
-      message: this.hass.localize("ui.common.successfully_deleted"),
-      duration: 4000,
-      action: {
-        text: this.hass.localize("ui.common.undo"),
-        action: () => {
-          fireEvent(window, "undo-change");
-        },
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.delete_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.delete_confirm_text"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        fireEvent(this, "value-changed", { value: null });
+        if (this._selected) {
+          fireEvent(this, "close-sidebar");
+        }
       },
     });
   };

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -53,6 +53,7 @@ import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import {
   showAlertDialog,
+  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -531,19 +532,21 @@ export default class HaAutomationConditionRow extends LitElement {
   };
 
   private _onDelete = () => {
-    fireEvent(this, "value-changed", { value: null });
-    if (this._selected) {
-      fireEvent(this, "close-sidebar");
-    }
-
-    showToast(this, {
-      message: this.hass.localize("ui.common.successfully_deleted"),
-      duration: 4000,
-      action: {
-        text: this.hass.localize("ui.common.undo"),
-        action: () => {
-          fireEvent(window, "undo-change");
-        },
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.delete_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.delete_confirm_text"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        fireEvent(this, "value-changed", { value: null });
+        if (this._selected) {
+          fireEvent(this, "close-sidebar");
+        }
       },
     });
   };

src/panels/config/automation/ha-automation-editor.ts

@@ -74,7 +74,7 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
-import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -111,9 +111,12 @@ declare global {
   }
 }
 
-export class HaAutomationEditor extends PreventUnsavedMixin(
-  KeyboardShortcutMixin(LitElement)
-) {
+const baseEditorMixins = PreventUnsavedMixin(KeyboardShortcutMixin(LitElement));
+
+export class HaAutomationEditor extends UndoRedoMixin<
+  typeof baseEditorMixins,
+  AutomationConfig
+>(baseEditorMixins) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public automationId: string | null = null;
@@ -180,11 +183,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
   ) => void;
 
-  private _undoRedoController = new UndoRedoController<AutomationConfig>(this, {
-    apply: (config) => this._applyUndoRedo(config),
-    currentConfig: () => this._config!,
-  });
-
   protected willUpdate(changedProps) {
     super.willUpdate(changedProps);
 
@@ -237,8 +235,8 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.undo")}
                 .path=${mdiUndo}
-                @click=${this._undo}
-                .disabled=${!this._undoRedoController.canUndo}
+                @click=${this.undo}
+                .disabled=${!this.canUndo}
                 id="button-undo"
               >
               </ha-icon-button>
@@ -255,8 +253,8 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
-                @click=${this._redo}
-                .disabled=${!this._undoRedoController.canRedo}
+                @click=${this.redo}
+                .disabled=${!this.canRedo}
                 id="button-redo"
               >
               </ha-icon-button>
@@ -300,16 +298,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
           ${this._mode === "gui" && this.narrow
             ? html`<ha-list-item
                   graphic="icon"
-                  @click=${this._undo}
-                  .disabled=${!this._undoRedoController.canUndo}
+                  @click=${this.undo}
+                  .disabled=${!this.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
                   <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
                 </ha-list-item>
                 <ha-list-item
                   graphic="icon"
-                  @click=${this._redo}
-                  .disabled=${!this._undoRedoController.canRedo}
+                  @click=${this.redo}
+                  .disabled=${!this.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
                   <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
@@ -520,6 +518,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           @value-changed=${this._valueChanged}
                           @save-automation=${this._handleSaveAutomation}
                           @editor-save=${this._handleSaveAutomation}
+                          @undo-paste=${this.undo}
                         >
                           <div class="alert-wrapper" slot="alerts">
                             ${this._errors || stateObj?.state === UNAVAILABLE
@@ -792,7 +791,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     ev.stopPropagation();
 
     if (this._config) {
-      this._undoRedoController.commit(this._config);
+      this.pushToUndo(this._config);
     }
 
     this._config = ev.detail.value;
@@ -1203,9 +1202,9 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
-      z: () => this._undo(),
-      Z: () => this._redo(),
-      y: () => this._redo(),
+      z: () => this.undo(),
+      Z: () => this.redo(),
+      y: () => this.redo(),
     };
   }
 
@@ -1239,20 +1238,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     this._manualEditor?.deleteSelectedRow();
   }
 
-  private _applyUndoRedo(config: AutomationConfig) {
+  protected get currentConfig() {
+    return this._config;
+  }
+
+  protected applyUndoRedo(config: AutomationConfig) {
     this._manualEditor?.triggerCloseSidebar();
     this._config = config;
     this._dirty = true;
   }
 
-  private _undo() {
-    this._undoRedoController.undo();
-  }
-
-  private _redo() {
-    this._undoRedoController.redo();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/automation/manual-automation-editor.ts

@@ -616,7 +616,7 @@ export class HaManualAutomationEditor extends LitElement {
       action: {
         text: this.hass.localize("ui.common.undo"),
         action: () => {
-          fireEvent(this, "undo-change");
+          fireEvent(this, "undo-paste");
 
           this._pastedConfig = undefined;
         },
@@ -742,5 +742,6 @@ declare global {
     "open-sidebar": SidebarConfig;
     "request-close-sidebar": undefined;
     "close-sidebar": undefined;
+    "undo-paste": undefined;
   }
 }

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -33,7 +33,10 @@ import { describeCondition } from "../../../../data/automation_i18n";
 import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import type { Action, Option } from "../../../../data/script";
-import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box";
+import {
+  showConfirmationDialog,
+  showPromptDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import "../action/ha-automation-action";
@@ -46,7 +49,6 @@ import {
   overflowStyles,
   rowStyles,
 } from "../styles";
-import { showToast } from "../../../../util/toast";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
@@ -363,21 +365,23 @@ export default class HaAutomationOptionRow extends LitElement {
 
   private _removeOption = () => {
     if (this.option) {
-      fireEvent(this, "value-changed", {
-        value: null,
-      });
-      if (this._selected) {
-        fireEvent(this, "close-sidebar");
-      }
-
-      showToast(this, {
-        message: this.hass.localize("ui.common.successfully_deleted"),
-        duration: 4000,
-        action: {
-          text: this.hass.localize("ui.common.undo"),
-          action: () => {
-            fireEvent(window, "undo-change");
-          },
+      showConfirmationDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.choose.delete_confirm_title"
+        ),
+        text: this.hass.localize(
+          "ui.panel.config.automation.editor.actions.delete_confirm_text"
+        ),
+        dismissText: this.hass.localize("ui.common.cancel"),
+        confirmText: this.hass.localize("ui.common.delete"),
+        destructive: true,
+        confirm: () => {
+          fireEvent(this, "value-changed", {
+            value: null,
+          });
+          if (this._selected) {
+            fireEvent(this, "close-sidebar");
+          }
         },
       });
     }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -53,6 +53,7 @@ import type { EntityRegistryEntry } from "../../../../data/entity_registry";
 import { TRIGGER_ICONS, isTriggerList } from "../../../../data/trigger";
 import {
   showAlertDialog,
+  showConfirmationDialog,
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
@@ -602,20 +603,22 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _onDelete = () => {
-    fireEvent(this, "value-changed", { value: null });
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.delete_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.delete_confirm_text"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        fireEvent(this, "value-changed", { value: null });
 
-    if (this._selected) {
-      fireEvent(this, "close-sidebar");
-    }
-
-    showToast(this, {
-      message: this.hass.localize("ui.common.successfully_deleted"),
-      duration: 4000,
-      action: {
-        text: this.hass.localize("ui.common.undo"),
-        action: () => {
-          fireEvent(window, "undo-change");
-        },
+        if (this._selected) {
+          fireEvent(this, "close-sidebar");
+        }
       },
     });
   };

src/panels/config/script/ha-script-editor.ts

@@ -65,7 +65,7 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -78,9 +78,14 @@ import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
 
-export class HaScriptEditor extends SubscribeMixin(
+const baseEditorMixins = SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
-) {
+);
+
+export class HaScriptEditor extends UndoRedoMixin<
+  typeof baseEditorMixins,
+  ScriptConfig
+>(baseEditorMixins) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public scriptId: string | null = null;
@@ -136,11 +141,6 @@ export class HaScriptEditor extends SubscribeMixin(
     value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
   ) => void;
 
-  private _undoRedoController = new UndoRedoController<ScriptConfig>(this, {
-    apply: (config) => this._applyUndoRedo(config),
-    currentConfig: () => this._config!,
-  });
-
   protected willUpdate(changedProps) {
     super.willUpdate(changedProps);
 
@@ -188,8 +188,8 @@ export class HaScriptEditor extends SubscribeMixin(
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.undo")}
                 .path=${mdiUndo}
-                @click=${this._undo}
-                .disabled=${!this._undoRedoController.canUndo}
+                @click=${this.undo}
+                .disabled=${!this.canUndo}
                 id="button-undo"
               >
               </ha-icon-button>
@@ -205,8 +205,8 @@ export class HaScriptEditor extends SubscribeMixin(
                 slot="toolbar-icon"
                 .label=${this.hass.localize("ui.common.redo")}
                 .path=${mdiRedo}
-                @click=${this._redo}
-                .disabled=${!this._undoRedoController.canRedo}
+                @click=${this.redo}
+                .disabled=${!this.canRedo}
                 id="button-redo"
               >
               </ha-icon-button>
@@ -249,16 +249,16 @@ export class HaScriptEditor extends SubscribeMixin(
           ${this._mode === "gui" && this.narrow
             ? html`<ha-list-item
                   graphic="icon"
-                  @click=${this._undo}
-                  .disabled=${!this._undoRedoController.canUndo}
+                  @click=${this.undo}
+                  .disabled=${!this.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
                   <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
                 </ha-list-item>
                 <ha-list-item
                   graphic="icon"
-                  @click=${this._redo}
-                  .disabled=${!this._undoRedoController.canRedo}
+                  @click=${this.redo}
+                  .disabled=${!this.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
                   <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
@@ -463,6 +463,7 @@ export class HaScriptEditor extends SubscribeMixin(
                           @value-changed=${this._valueChanged}
                           @editor-save=${this._handleSaveScript}
                           @save-script=${this._handleSaveScript}
+                          @undo-paste=${this.undo}
                         >
                           <div class="alert-wrapper" slot="alerts">
                             ${this._errors || stateObj?.state === UNAVAILABLE
@@ -678,7 +679,7 @@ export class HaScriptEditor extends SubscribeMixin(
 
   private _valueChanged(ev) {
     if (this._config) {
-      this._undoRedoController.commit(this._config);
+      this.pushToUndo(this._config);
     }
 
     this._config = ev.detail.value;
@@ -775,7 +776,7 @@ export class HaScriptEditor extends SubscribeMixin(
     }
 
     if (this._config) {
-      this._undoRedoController.commit(this._config);
+      this.pushToUndo(this._config);
     }
 
     this._manualEditor?.addFields();
@@ -1109,9 +1110,9 @@ export class HaScriptEditor extends SubscribeMixin(
       x: () => this._cutSelectedRow(),
       Delete: () => this._deleteSelectedRow(),
       Backspace: () => this._deleteSelectedRow(),
-      z: () => this._undo(),
-      Z: () => this._redo(),
-      y: () => this._redo(),
+      z: () => this.undo(),
+      Z: () => this.redo(),
+      y: () => this.redo(),
     };
   }
 
@@ -1145,20 +1146,16 @@ export class HaScriptEditor extends SubscribeMixin(
     this._manualEditor?.deleteSelectedRow();
   }
 
-  private _applyUndoRedo(config: ScriptConfig) {
+  protected get currentConfig() {
+    return this._config;
+  }
+
+  protected applyUndoRedo(config: ScriptConfig) {
     this._manualEditor?.triggerCloseSidebar();
     this._config = config;
     this._dirty = true;
   }
 
-  private _undo() {
-    this._undoRedoController.undo();
-  }
-
-  private _redo() {
-    this._undoRedoController.redo();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-field-row.ts

@@ -20,13 +20,13 @@ import "../../../components/ha-md-menu-item";
 import type { ScriptFieldSidebarConfig } from "../../../data/automation";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { indentStyle, overflowStyles } from "../automation/styles";
 import "./ha-script-field-selector-editor";
 import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
-import { showToast } from "../../../util/toast";
 
 @customElement("ha-script-field-row")
 export default class HaScriptFieldRow extends LitElement {
@@ -386,19 +386,21 @@ export default class HaScriptFieldRow extends LitElement {
   };
 
   private _onDelete = () => {
-    fireEvent(this, "value-changed", { value: null });
-    if (this._selected || this._selectorRowSelected) {
-      fireEvent(this, "close-sidebar");
-    }
-
-    showToast(this, {
-      message: this.hass.localize("ui.common.successfully_deleted"),
-      duration: 4000,
-      action: {
-        text: this.hass.localize("ui.common.undo"),
-        action: () => {
-          fireEvent(window, "undo-change");
-        },
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.script.editor.field_delete_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.script.editor.field_delete_confirm_text"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        fireEvent(this, "value-changed", { value: null });
+        if (this._selected || this._selectorRowSelected) {
+          fireEvent(this, "close-sidebar");
+        }
       },
     });
   };

src/panels/config/script/manual-script-editor.ts

@@ -491,7 +491,7 @@ export class HaManualScriptEditor extends LitElement {
       action: {
         text: this.hass.localize("ui.common.undo"),
         action: () => {
-          fireEvent(this, "undo-change");
+          fireEvent(this, "undo-paste");
 
           this._pastedConfig = undefined;
         },

src/panels/history/ha-panel-history.ts

@@ -1,10 +1,11 @@
+import { ContextProvider } from "@lit/context";
+import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDotsVertical,
   mdiDownload,
   mdiFilterRemove,
   mdiImagePlus,
 } from "@mdi/js";
-import type { ActionDetail } from "@material/mwc-list";
 import { differenceInHours } from "date-fns";
 import type {
   HassServiceTarget,
@@ -27,32 +28,35 @@ import {
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
 import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
-import "../../components/ha-spinner";
+import "../../components/ha-button-menu";
 import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
-import "../../components/ha-button-menu";
-import "../../components/ha-list-item";
 import "../../components/ha-icon-button-arrow-prev";
+import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
+import "../../components/ha-spinner";
 import "../../components/ha-target-picker";
 import "../../components/ha-top-app-bar-fixed";
+import { labelsContext } from "../../data/context";
 import type { HistoryResult } from "../../data/history";
 import {
   computeHistory,
-  subscribeHistory,
-  mergeHistoryResults,
   convertStatisticsToHistory,
+  mergeHistoryResults,
+  subscribeHistory,
 } from "../../data/history";
+import { subscribeLabelRegistry } from "../../data/label_registry";
 import { fetchStatistics } from "../../data/recorder";
 import { resolveEntityIDs } from "../../data/selector";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
 
-class HaPanelHistory extends LitElement {
+class HaPanelHistory extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) hass!: HomeAssistant;
 
   @property({ reflect: true, type: Boolean }) public narrow = false;
@@ -89,6 +93,11 @@ class HaPanelHistory extends LitElement {
 
   private _interval?: number;
 
+  private _labelsContext = new ContextProvider(this, {
+    context: labelsContext,
+    initialValue: [],
+  });
+
   public constructor() {
     super();
 
@@ -108,6 +117,14 @@ class HaPanelHistory extends LitElement {
     }
   }
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection!, (labels) => {
+        this._labelsContext.setValue(labels);
+      }),
+    ];
+  }
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._unsubscribeHistory();
@@ -182,6 +199,7 @@ class HaPanelHistory extends LitElement {
               .disabled=${this._isLoading}
               add-on-top
               @value-changed=${this._targetsChanged}
+              compact
             ></ha-target-picker>
           </div>
           ${this._isLoading
@@ -649,6 +667,10 @@ class HaPanelHistory extends LitElement {
           direction: var(--direction);
         }
 
+        ha-target-picker {
+          flex: 1;
+        }
+
         @media all and (max-width: 1025px) {
           .filters {
             flex-direction: column;

src/panels/logbook/ha-panel-logbook.ts

@@ -1,9 +1,15 @@
+import { ContextProvider } from "@lit/context";
 import { mdiRefresh } from "@mdi/js";
+import type {
+  HassServiceTarget,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { HassServiceTarget } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import { ensureArray } from "../../common/array/ensure-array";
+import { storage } from "../../common/decorators/storage";
 import { goBack, navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -16,20 +22,21 @@ import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
-import "../../components/ha-top-app-bar-fixed";
 import "../../components/ha-target-picker";
+import "../../components/ha-top-app-bar-fixed";
+import { labelsContext } from "../../data/context";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import { subscribeLabelRegistry } from "../../data/label_registry";
 import { filterLogbookCompatibleEntities } from "../../data/logbook";
+import { resolveEntityIDs } from "../../data/selector";
+import { getSensorNumericDeviceClasses } from "../../data/sensor";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
-import { storage } from "../../common/decorators/storage";
-import { ensureArray } from "../../common/array/ensure-array";
-import { resolveEntityIDs } from "../../data/selector";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
-import type { HaEntityPickerEntityFilterFunc } from "../../components/entity/ha-entity-picker";
 
 @customElement("ha-panel-logbook")
-export class HaPanelLogbook extends LitElement {
+export class HaPanelLogbook extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
@@ -51,6 +58,11 @@ export class HaPanelLogbook extends LitElement {
 
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
+  private _labelsContext = new ContextProvider(this, {
+    context: labelsContext,
+    initialValue: [],
+  });
+
   public constructor() {
     super();
 
@@ -63,6 +75,14 @@ export class HaPanelLogbook extends LitElement {
     this._time = { range: [start, end] };
   }
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection!, (labels) => {
+        this._labelsContext.setValue(labels);
+      }),
+    ];
+  }
+
   private _goBack(): void {
     goBack();
   }
@@ -108,6 +128,7 @@ export class HaPanelLogbook extends LitElement {
               .value=${this._targetPickerValue}
               add-on-top
               @value-changed=${this._targetsChanged}
+              compact
             ></ha-target-picker>
           </div>
 
@@ -363,6 +384,10 @@ export class HaPanelLogbook extends LitElement {
           max-width: 400px;
         }
 
+        ha-target-picker {
+          flex: 1;
+        }
+
         :host([narrow]) ha-entity-picker {
           max-width: none;
           width: 100%;

src/panels/lovelace/components/hui-entity-editor.ts

@@ -3,16 +3,14 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/entity/ha-entity-picker";
-import type {
-  HaEntityPicker,
-  HaEntityPickerEntityFilterFunc,
-} from "../../../components/entity/ha-entity-picker";
+import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-sortable";
+import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import type { EntityConfig } from "../entity-rows/types";
-import { computeRTL } from "../../../common/util/compute_rtl";
 
 @customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -148,10 +148,10 @@ export class HuiHeadingBadgesEditor extends LitElement {
           .hass=${this.hass}
           id="input"
           .placeholder=${this.hass.localize(
-            "ui.components.target-picker.add_entity_id"
+            "ui.components.entity.entity-picker.choose_entity"
           )}
           .searchLabel=${this.hass.localize(
-            "ui.components.target-picker.add_entity_id"
+            "ui.components.entity.entity-picker.choose_entity"
           )}
           @value-changed=${this._entityPicked}
           @click=${preventDefault}

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -22,8 +22,8 @@ import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { DEFAULT_HOURS_TO_SHOW } from "../../cards/hui-logbook-card";
 import { targetStruct } from "../../../../data/script";
-import type { HaEntityPickerEntityFilterFunc } from "../../../../components/entity/ha-entity-picker";
 import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
+import type { HaEntityPickerEntityFilterFunc } from "../../../../data/entity";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,

src/resources/state-control-styles.ts

@@ -1,67 +0,0 @@
-import { css } from "lit";
-
-/**
- * Shared styles for state control toggle components
- * Used by: cover, valve, lock, fan, light toggle controls
- */
-export const stateControlToggleStyle = css`
-  ha-control-switch {
-    height: 45vh;
-    max-height: 320px;
-    min-height: 200px;
-    --control-switch-thickness: 130px;
-    --control-switch-border-radius: var(--ha-border-radius-6xl);
-    --control-switch-padding: 6px;
-    --mdc-icon-size: 24px;
-  }
-
-  .buttons {
-    display: flex;
-    flex-direction: column;
-    width: 130px;
-    height: 45vh;
-    max-height: 320px;
-    min-height: 200px;
-    padding: 6px;
-    box-sizing: border-box;
-  }
-
-  ha-control-button {
-    flex: 1;
-    width: 100%;
-    --control-button-border-radius: var(--ha-border-radius-6xl);
-    --mdc-icon-size: 24px;
-  }
-
-  ha-control-button.active {
-    --control-button-icon-color: white;
-    --control-button-background-color: var(--color);
-    --control-button-focus-color: var(--color);
-    --control-button-background-opacity: 1;
-  }
-
-  ha-control-button:not(:last-child) {
-    margin-bottom: 6px;
-  }
-`;
-
-/**
- * Additional styles for components with pulse animation (like lock toggle)
- */
-export const stateControlPulseStyle = css`
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .pulse {
-    animation: pulse 1s infinite;
-  }
-`;

src/resources/theme/color/wa.globals.ts

@@ -52,6 +52,13 @@ export const waColorStyles = css`
     --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
     --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);
 
+    --wa-color-surface-default: var(--white-color);
+    --wa-panel-border-radius: var(--ha-border-radius-3xl);
+    --wa-panel-border-style: solid;
+    --wa-panel-border-width: 1px;
+    --wa-color-surface-border: var(--ha-color-border-neutral-quiet);
+
     --wa-focus-ring-color: var(--ha-color-neutral-60);
+    --wa-shadow-l: box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
   }
 `;

src/resources/theme/wa.globals.ts

@@ -16,7 +16,7 @@ export const waMainStyles = css`
     --wa-font-weight-action: var(--ha-font-weight-medium);
     --wa-transition-fast: 75ms;
     --wa-transition-easing: ease;
-    --wa-border-width-l: var(--ha-border-radius-l);
+    --wa-border-width-l: var(--ha-border-radius-lg);
     --wa-space-xl: 32px;
   }
 

src/state-control/cover/ha-state-control-cover-toggle.ts

@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,7 +10,6 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
-import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-cover-toggle")
@@ -138,7 +137,41 @@ export class HaStateControlCoverToggle extends LitElement {
     `;
   }
 
-  static styles = [stateControlToggleStyle];
+  static styles = css`
+    ha-control-switch {
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      --control-switch-thickness: 130px;
+      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-padding: 6px;
+      --mdc-icon-size: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      width: 130px;
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      padding: 6px;
+      box-sizing: border-box;
+    }
+    ha-control-button {
+      flex: 1;
+      width: 100%;
+      --control-button-border-radius: var(--ha-border-radius-6xl);
+      --mdc-icon-size: 24px;
+    }
+    ha-control-button.active {
+      --control-button-icon-color: white;
+      --control-button-background-color: var(--color);
+      --control-button-background-opacity: 1;
+    }
+    ha-control-button:not(:last-child) {
+      margin-bottom: 6px;
+    }
+  `;
 }
 
 declare global {

src/state-control/ha-state-control-toggle.ts

@@ -1,7 +1,7 @@
 import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,7 +12,6 @@ import "../components/ha-control-button";
 import "../components/ha-control-switch";
 import { UNAVAILABLE, UNKNOWN } from "../data/entity";
 import { forwardHaptic } from "../data/haptics";
-import { stateControlToggleStyle } from "../resources/state-control-styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-state-control-toggle")
@@ -129,7 +128,42 @@ export class HaStateControlToggle extends LitElement {
     `;
   }
 
-  static styles = [stateControlToggleStyle];
+  static styles = css`
+    ha-control-switch {
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      --control-switch-thickness: 130px;
+      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-padding: 6px;
+      --mdc-icon-size: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      width: 130px;
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      padding: 6px;
+      box-sizing: border-box;
+    }
+    ha-control-button {
+      flex: 1;
+      width: 100%;
+      --control-button-border-radius: var(--ha-border-radius-6xl);
+      --mdc-icon-size: 24px;
+    }
+    ha-control-button.active {
+      --control-button-icon-color: white;
+      --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
+      --control-button-background-opacity: 1;
+    }
+    ha-control-button:not(:last-child) {
+      margin-bottom: 6px;
+    }
+  `;
 }
 
 declare global {

src/state-control/lock/ha-state-control-lock-toggle.ts

@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,10 +12,6 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { LockEntity } from "../../data/lock";
 import { callProtectedLockService } from "../../data/lock";
-import {
-  stateControlToggleStyle,
-  stateControlPulseStyle,
-} from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 declare global {
@@ -149,7 +145,56 @@ export class HaStateControlLockToggle extends LitElement {
     `;
   }
 
-  static styles = [stateControlToggleStyle, stateControlPulseStyle];
+  static styles = css`
+    @keyframes pulse {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    ha-control-switch {
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      --control-switch-thickness: 130px;
+      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-padding: 6px;
+      --mdc-icon-size: 24px;
+    }
+    .pulse {
+      animation: pulse 1s infinite;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      width: 130px;
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      padding: 6px;
+      box-sizing: border-box;
+    }
+    ha-control-button {
+      flex: 1;
+      width: 100%;
+      --control-button-border-radius: var(--ha-border-radius-6xl);
+      --mdc-icon-size: 24px;
+    }
+    ha-control-button.active {
+      --control-button-icon-color: white;
+      --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
+      --control-button-background-opacity: 1;
+    }
+    ha-control-button:not(:last-child) {
+      margin-bottom: 6px;
+    }
+  `;
 }
 
 declare global {

src/state-control/valve/ha-state-control-valve-toggle.ts

@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,7 +10,6 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
-import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-valve-toggle")
@@ -138,7 +137,42 @@ export class HaStateControlValveToggle extends LitElement {
     `;
   }
 
-  static styles = [stateControlToggleStyle];
+  static styles = css`
+    ha-control-switch {
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      --control-switch-thickness: 130px;
+      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-padding: 6px;
+      --mdc-icon-size: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      width: 130px;
+      height: 45vh;
+      max-height: 320px;
+      min-height: 200px;
+      padding: 6px;
+      box-sizing: border-box;
+    }
+    ha-control-button {
+      flex: 1;
+      width: 100%;
+      --control-button-border-radius: var(--ha-border-radius-6xl);
+      --mdc-icon-size: 24px;
+    }
+    ha-control-button.active {
+      --control-button-icon-color: white;
+      --control-button-background-color: var(--color);
+      --control-button-focus-color: var(--color);
+      --control-button-background-opacity: 1;
+    }
+    ha-control-button:not(:last-child) {
+      margin-bottom: 6px;
+    }
+  `;
 }
 
 declare global {

src/translations/en.json

@@ -647,6 +647,7 @@
       },
       "entity": {
         "entity-picker": {
+          "choose_entity": "Choose entity",
           "entity": "Entity",
           "edit": "Edit",
           "clear": "Clear",
@@ -671,16 +672,36 @@
         "expand_area_id": "Split this area into separate devices and entities.",
         "expand_device_id": "Split this device into separate entities.",
         "expand_label_id": "Split this label into separate areas, devices and entities.",
+        "add_target": "Add target",
         "remove": "Remove",
         "remove_floor_id": "Remove floor",
         "remove_area_id": "Remove area",
         "remove_device_id": "Remove device",
         "remove_entity_id": "Remove entity",
         "remove_label_id": "Remove label",
-        "add_area_id": "Choose area",
-        "add_device_id": "Choose device",
-        "add_entity_id": "Choose entity",
-        "add_label_id": "Choose label"
+        "devices_count": "{count} {count, plural,\n one {device}\n other {devices}\n}",
+        "entities_count": "{count} {count, plural,\n one {entity}\n other {entities}\n}",
+        "target_details": "Target details",
+        "no_targets": "No targets",
+        "no_target_found": "No target found for term {term}",
+        "selected": {
+          "entity": "Entities: {count}",
+          "device": "Devices: {count}",
+          "area": "Areas: {count}",
+          "label": "Labels: {count}",
+          "floor": "Floors: {count}"
+        },
+        "type": {
+          "area": "Area",
+          "areas": "Areas",
+          "device": "Device",
+          "devices": "Devices",
+          "entity": "Entity",
+          "entities": "Entities",
+          "label": "Label",
+          "labels": "Labels",
+          "floor": "Floor"
+        }
       },
       "subpage-data-table": {
         "filters": "Filters",
@@ -3907,6 +3928,8 @@
               "change_alias": "Rename trigger",
               "alias": "Trigger name",
               "delete": "[%key:ui::common::delete%]",
+              "delete_confirm_title": "Delete trigger?",
+              "delete_confirm_text": "It will be permanently deleted.",
               "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
               "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
@@ -4170,6 +4193,8 @@
               "change_alias": "Rename condition",
               "alias": "Condition name",
               "delete": "[%key:ui::common::delete%]",
+              "delete_confirm_title": "Delete condition?",
+              "delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
               "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
@@ -4339,6 +4364,8 @@
               "disable": "Disable",
               "disabled": "Disabled",
               "delete": "[%key:ui::common::delete%]",
+              "delete_confirm_title": "Delete action?",
+              "delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
               "unsupported_action": "No visual editor support for this action",
               "type_select": "Action type",
               "continue_on_error": "Continue on error",
@@ -4800,6 +4827,8 @@
               "label": "Field",
               "field_selector": "Field selector"
             },
+            "field_delete_confirm_title": "Delete field?",
+            "field_delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
             "header": "Script: {name}",
             "default_name": "New script",
             "modes": {

test/common/entity/context/get_area_context.test.ts

@@ -1,6 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { getAreaContext } from "../../../../src/common/entity/context/get_area_context";
-import type { HomeAssistant } from "../../../../src/types";
 import { mockArea, mockFloor } from "./context-mock";
 
 describe("getAreaContext", () => {
@@ -9,14 +8,7 @@ describe("getAreaContext", () => {
       area_id: "area_1",
     });
 
-    const hass = {
-      areas: {
-        area_1: area,
-      },
-      floors: {},
-    } as unknown as HomeAssistant;
-
-    const result = getAreaContext(area, hass);
+    const result = getAreaContext(area, {});
 
     expect(result).toEqual({
       area,
@@ -34,16 +26,9 @@ describe("getAreaContext", () => {
       floor_id: "floor_1",
     });
 
-    const hass = {
-      areas: {
-        area_2: area,
-      },
-      floors: {
-        floor_1: floor,
-      },
-    } as unknown as HomeAssistant;
-
-    const result = getAreaContext(area, hass);
+    const result = getAreaContext(area, {
+      floor_1: floor,
+    });
 
     expect(result).toEqual({
       area,

yarn.lock

@@ -1696,15 +1696,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.5":
-  version: 2.3.5
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.5"
+"@formatjs/ecma402-abstract@npm:2.3.4":
+  version: 2.3.4
+  resolution: "@formatjs/ecma402-abstract@npm:2.3.4"
   dependencies:
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/254651057170836237dc4f0fbb372157f97133c4dcee414007e0cdb5b589baf0546c2f6337d117b988ee0a4f0a4d8247780aaa9e96b410c568495f162c40dc50
+  checksum: 10/573971ffc291096a4b9fcc80b4708124e89bf2e3ac50e0f78b41eb797e9aa1b842f4dc3665e4467a853c738386821769d9e40408a1d25bc73323a1f057a16cf2
   languageName: node
   linkType: hard
 
@@ -1717,144 +1717,144 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.3":
-  version: 2.11.3
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.3"
+"@formatjs/icu-messageformat-parser@npm:2.11.2":
+  version: 2.11.2
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.2"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.15"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/icu-skeleton-parser": "npm:1.8.14"
     tslib: "npm:^2.8.0"
-  checksum: 10/339f5ff5ea7417e2db7f01bd41340f78fd5a8e56a66e723272d21ce7ab4b265dcb45748cdca76eac7137e2b5e6767986812b471e011b4602cf7afbc6da57fb98
+  checksum: 10/e919eb2a132ac1d54fb1a7e3a3254007649b55196d3818090df92a4268dcddf20cbdf863c06039fbbe7a35a8a3f17bdc172dade99d1f17c1d8a95dcec444c3e3
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.15":
-  version: 1.8.15
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.15"
+"@formatjs/icu-skeleton-parser@npm:1.8.14":
+  version: 1.8.14
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.14"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
     tslib: "npm:^2.8.0"
-  checksum: 10/19825abc1a5eef0288456c08420d06f3da8256fbe81db0b9ead48cacc94954d748c8068988e26d184d38fca2e50c191ecda5a10ff3935529c3134b8d80db0538
+  checksum: 10/2fbe3155c310358820b118d8c9844f314eff3500a82f1c65402434a3095823e1afeaab8d1762b4a59cc5679d82dc4c8c134683565d7cdae4daace23251f46a47
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.18.1":
-  version: 6.18.1
-  resolution: "@formatjs/intl-datetimeformat@npm:6.18.1"
+"@formatjs/intl-datetimeformat@npm:6.18.0":
+  version: 6.18.0
+  resolution: "@formatjs/intl-datetimeformat@npm:6.18.0"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/66938778ecf37472a7e2f1d9349b0ac249fcbd5d684ae5614dea07287876182429980ba2fe3671224f981065baf017ac955f4b3c1f3c924c89bf2ec82dd1acd8
+  checksum: 10/b70edaa4cfa150f0a6cbeeb1488e6acdea21349abdefc4e37b923de68592c6f330a966456bf6000f233d0f715cf3b8cfce23d5a4ed574fa8ea35ccb5bea80886
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:6.8.12":
-  version: 6.8.12
-  resolution: "@formatjs/intl-displaynames@npm:6.8.12"
+"@formatjs/intl-displaynames@npm:6.8.11":
+  version: 6.8.11
+  resolution: "@formatjs/intl-displaynames@npm:6.8.11"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/7de27ef7e8cde2febce84d5443f00b70062cbd0c3f1039ce8ed1caacb15c4c7a36da16295f26657d59aa4663141a04d7b1083bfd1eea6a4e8ad9dc6093a2c886
+  checksum: 10/05c785d9e767cc1e4d1bd40d6989c3318b6a98cb43dd6808f501f5e5538bb3a1fb8fa80f8d2282d598501d3d193a406f0127acce6b14cb7c595ab6d981437e6f
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.7.5":
-  version: 0.7.5
-  resolution: "@formatjs/intl-durationformat@npm:0.7.5"
+"@formatjs/intl-durationformat@npm:0.7.4":
+  version: 0.7.4
+  resolution: "@formatjs/intl-durationformat@npm:0.7.4"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/4dc81b112fed25dc8da0a16ddeff033b7c763bf9a1cfd7b1b25c1216f7f147eb67a47059a3cf95b4d4ade150c54a813542b84e69298905a4bc22548d74bf8567
+  checksum: 10/d62273ecd635475ca91e9b501301f3f396403fa91b584c550734b19b2d194ba1316b27303fed985c1d42ae933d54eb220da6540edfdf376b0d9371ecfd0d4e15
   languageName: node
   linkType: hard
 
-"@formatjs/intl-enumerator@npm:1.8.11":
-  version: 1.8.11
-  resolution: "@formatjs/intl-enumerator@npm:1.8.11"
+"@formatjs/intl-enumerator@npm:1.8.10":
+  version: 1.8.10
+  resolution: "@formatjs/intl-enumerator@npm:1.8.10"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
     tslib: "npm:^2.8.0"
-  checksum: 10/8646a517cd4160c1ceff888ec8fdf652caa3d375fa41231e829c13bc7be0cd156c9642e339b75e9cfa8ef60ae8140c766f9055318c62f1c1d9345f25cdb7f426
+  checksum: 10/9e0e762143248bf91e174d3abc15261b47ac7294632d26797cf5b001707aa68ca2deeb05c95f7308aa2cffa46d61b0fac46306dea722ab210dfa012990743798
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:2.5.6":
-  version: 2.5.6
-  resolution: "@formatjs/intl-getcanonicallocales@npm:2.5.6"
+"@formatjs/intl-getcanonicallocales@npm:2.5.5":
+  version: 2.5.5
+  resolution: "@formatjs/intl-getcanonicallocales@npm:2.5.5"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/1d3d13fa1758a9bb7854f3afd844ecb70a4333a7cfbb6822b99e3b8ab6269e525a0ca23a8a47c3944e5376bc19e9e423b5cc3043db1c6de64909986c5cec6fc0
+  checksum: 10/2a32202765c9a4f16fc36f4e4afca7fd5f4f35885ad2ca671352a7bba1a19d5ec81933d52ab1855c8570e73247213739d9d2d95d2438bd9f02a1f0db7cb9b8a9
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:7.7.12":
-  version: 7.7.12
-  resolution: "@formatjs/intl-listformat@npm:7.7.12"
+"@formatjs/intl-listformat@npm:7.7.11":
+  version: 7.7.11
+  resolution: "@formatjs/intl-listformat@npm:7.7.11"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/eee910e83ad28b3b3c24ab6e155720187ae5b5ac936ffa2c8ec6cc8c392c194fd5c79a166290da1c6de8dc1857e3d9d11241029832ec88f7a85cce1821b7f067
+  checksum: 10/e7de54dcbcfdd8718870501623fb1be55dbac11e2582b7961d4668fb5e1f0d1f6da0388ed49084a4527e500dbea548670659efccb690f3b4398f0f8bcd5221dd
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:4.2.12":
-  version: 4.2.12
-  resolution: "@formatjs/intl-locale@npm:4.2.12"
+"@formatjs/intl-locale@npm:4.2.11":
+  version: 4.2.11
+  resolution: "@formatjs/intl-locale@npm:4.2.11"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-enumerator": "npm:1.8.11"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-enumerator": "npm:1.8.10"
+    "@formatjs/intl-getcanonicallocales": "npm:2.5.5"
     tslib: "npm:^2.8.0"
-  checksum: 10/42111a3002a5a2076b3eb012073230f69c62355dc03647bc17f4d0805f39c7e720e2281b359277d020fef623944a5bcc1ddc3dae9a3af74886d876147680147d
+  checksum: 10/8746af66ebd5284f189c83e0d59a4d781490ce3eadaab284bf96c4240eaf8b9422130a94a842a1ab12fa14bb2cdf02e9f78ac3b9cf955156fafeffab9d73d7a2
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.6.2":
-  version: 0.6.2
-  resolution: "@formatjs/intl-localematcher@npm:0.6.2"
+"@formatjs/intl-localematcher@npm:0.6.1":
+  version: 0.6.1
+  resolution: "@formatjs/intl-localematcher@npm:0.6.1"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/eb12a7f5367bbecdfafc20d7f005559ce840f420e970f425c5213d35e94e86dfe75bde03464971a26494bf8427d4961269db22ecad2834f2a19d888b5d9cc064
+  checksum: 10/c7b3bc8395d18670677f207b2fd107561fff5d6394a9b4273c29e0bea920300ec3a2eefead600ebb7761c04a770cada28f78ac059f84d00520bfb57a9db36998
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.15.5":
-  version: 8.15.5
-  resolution: "@formatjs/intl-numberformat@npm:8.15.5"
+"@formatjs/intl-numberformat@npm:8.15.4":
+  version: 8.15.4
+  resolution: "@formatjs/intl-numberformat@npm:8.15.4"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/3440371a43c54cdd2aa3714cb518ad22e491dd19fbc0c046e712dde078d3f6ed709474376863d64d2bddb506957d1cf265d440f6723b88211044a7b56186e550
+  checksum: 10/232740eb4992f1bf4f829f05a755f427089a70b56a8a715fa9ac8604f701691701e989247ef1537a1d7c90e315b4153b82cf2e67e7f9d5b78d471c1cf59abace
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.4.5":
-  version: 5.4.5
-  resolution: "@formatjs/intl-pluralrules@npm:5.4.5"
+"@formatjs/intl-pluralrules@npm:5.4.4":
+  version: 5.4.4
+  resolution: "@formatjs/intl-pluralrules@npm:5.4.4"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/00f650891893b743d126dd2bf0d17c1b16a8c9e0e0dd94cd0895e66cb556246116263e9603204e1991924814d0ed3a3503765914aff08181d5e4435dfc5e547c
+  checksum: 10/919f80e144283b5849014bc245626916224adc0d693e8be5531168f1c7af54bb4c8cbd77a12ceba1d13ad49171680d346d9176464fae5013e13f79d9c7baa02a
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.4.12":
-  version: 11.4.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.12"
+"@formatjs/intl-relativetimeformat@npm:11.4.11":
+  version: 11.4.11
+  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.11"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
+    "@formatjs/intl-localematcher": "npm:0.6.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/f6adca59738cb7f58d2ea985558d8fc45e567406de6fb6e67894afe790e2a9fa1a19d34853afc36805fa4a3d638e29c62d6c6ba3ec2a85628c240081dcdfebc1
+  checksum: 10/fda4da27c0245869316c9199ed4e0521988be8b41b3e685f4abcb486f01d5b4c72f2ecf1b19b07091c15360c7691a4dd87199f81943d1ad6bda084c746fc8ec3
   languageName: node
   linkType: hard
 
@@ -5080,131 +5080,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/a11y-base@npm:24.9.2"
+"@vaadin/a11y-base@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/a11y-base@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.2"
+    "@vaadin/component-base": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/3e49b03daf1a1f16c4592364d8ddd0be574589779302f6cca10a242aab8a6052d69475eb60c77473267539ec2f741acd4a3794cd24aee5fa424dacfa3871668b
+  checksum: 10/f8789d0ff11f2c3aa3e8b5bcf4f1af32af1dcd7eb671c2fb4cae63331840c6a79f070bc637e6762f8bbd15ec0d6e4d9cb378507fb2a78cc7f876934914c4ea32
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/combo-box@npm:24.9.2"
+"@vaadin/combo-box@npm:24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/combo-box@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/field-base": "npm:~24.9.2"
-    "@vaadin/input-container": "npm:~24.9.2"
-    "@vaadin/item": "npm:~24.9.2"
-    "@vaadin/lit-renderer": "npm:~24.9.2"
-    "@vaadin/overlay": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/field-base": "npm:~24.9.1"
+    "@vaadin/input-container": "npm:~24.9.1"
+    "@vaadin/item": "npm:~24.9.1"
+    "@vaadin/lit-renderer": "npm:~24.9.1"
+    "@vaadin/overlay": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/6931a185b4bf3854fae224e79eafc97b46fd0078f1757f458e5b5ddbc91b6dcbb80cdc27d8c4e7e20a75bb95e32da867f285a7c116eed23282bc9662b5b841f3
+  checksum: 10/422fd0d2e47678e759526097d128aba13f2e70147631baf43a0328cadb95c1bdc4ce0ab459a5a8710882568194ff79e3c0d73c3c4ebf3ffcac72a43dfbfe6ade
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/component-base@npm:24.9.2"
+"@vaadin/component-base@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/component-base@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
     "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
     "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
     lit: "npm:^3.0.0"
-  checksum: 10/782c8186a69ae51ac0e07af643a5d0cdfa9d281a3bda25ed8df0f3bd24210489e5f8fb60a5aec7e242d6d986fc16d54343dbc3725fc022da8890c9734f10e561
+  checksum: 10/5cb4870a0e0581bbb275c0addb144e0a3823fe4d86826d8fa2bff5c61105a5b6a34d7f65d13686a3b5f6e9e585105caa5b45716b9574ae7a0f323c1a6aa79535
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/field-base@npm:24.9.2"
+"@vaadin/field-base@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/field-base@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.2"
+    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/456670e9fa69374e53cc3bd69a2a7bccfc447eec40756db1a3b6ea2ee2af39c529e0ae77d2b7977f65d26bcd323d448f9788794b67cb3e20027988e63c3a3d77
+  checksum: 10/47440fa611ad1bab1f996a6e1471959d156d9bed88f0671ffb07f32d9fee0fea267c71c6f35fe207dba919bddf43488552a0bdf5cbe64387a00256f22b4f1948
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/icon@npm:24.9.2"
+"@vaadin/icon@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/icon@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/86581231e2d46292152e7010852276a870700fdd5f0cce3ab234fcd5fa57827120163e0c9f6e34f436b5d43b20c741e6b51a40f9f2148cc77087f1b15d17e016
+  checksum: 10/0574f83fe14d5ffc5c8cf40a5fb38b80373d3ec590bedd1046800cda70f3d5d9337e4f062cdd2c79f917f71b6a71e850c4127da2cb8f7b863f0dd86a7e8d851b
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/input-container@npm:24.9.2"
+"@vaadin/input-container@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/input-container@npm:24.9.1"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/fd8ff7458dddd01cf7d2bb4cf6a969473ccad4dec6292897698aa3a51db3b74e30e1ae4077aa092e324041734f4829febf9f81345ee6b142138cfe4436a8a0ba
+  checksum: 10/f8e2420fd3c0187eb2d1b96a53685e6ac053ce390ab5ab0c9cb9a7be42c66fe500828c0b0e3ef270ba3802b5c6dc667646906d8db3a7a8a0bef4b24decf1ffc7
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/item@npm:24.9.2"
+"@vaadin/item@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/item@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/1173fa0b147acfe66cb817ce518e8d7b2a4189e3386c98e8eebee7c15767d51b35d2b60a7d0ab165431dbe09061a492da96414755c936621e68cddaefa5c9301
+  checksum: 10/2f7c1cdeedd38aa80a8a8756690ca4d73415d801a37156d0f6e78e7dbebf470f3db090c7a7511e6f47d0ff6189447d4a452285622a8edd9364ab5cd5477649ab
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/lit-renderer@npm:24.9.2"
+"@vaadin/lit-renderer@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/lit-renderer@npm:24.9.1"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/a33d22a26ae4d66c371e620a19da67ee1aab2cdb75dbcbf5dd4dc885368b9fc90a7063112dba7b58eee8cf3d7b69a6640941aa50106db1a287eca5c8188bbf76
+  checksum: 10/bdaaa2354352155e8b500e6c207881ec73be66acdccd98346375b1139d97d3acaec3b908e61db6cbde78b9f0b0aa94921144e3090d6bfaa5bb39961923b6f7db
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/overlay@npm:24.9.2"
+"@vaadin/overlay@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/overlay@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.2"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+    "@vaadin/a11y-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-material-styles": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
     lit: "npm:^3.0.0"
-  checksum: 10/48d52a1038c3ee033d56a819cd67da171b2f640bdfdbc1d1bb9091401a0a661f817862587efa0a5eda0ad5119ed0014edb1fd9f96b31b0724399c935d33133c0
+  checksum: 10/3d84412fe98c43b8e9487a5426f72dbc09fcad964d9f792bc7daab944776f106dfc27b0242642effb77e45a3314eccf646c3cd0cfc1852646f69fe1eab5bca32
   languageName: node
   linkType: hard
 
@@ -5215,37 +5215,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.2"
+"@vaadin/vaadin-lumo-styles@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.1"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/icon": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
-  checksum: 10/ea0f008ccc4cabe1ae40f5fb78fb59b0b0d6996694ba054df1b634296563f75abeb0c1cbcde5adac8cc9e455e341f2b8fe13b132aa393e5a94804f1b4e6c8c43
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/icon": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+  checksum: 10/6318b68ccee1ca3527d6aa503d3a57d5a9920a00b459057fa7a98336d071a63e905dfd1e29c965f740c7b409ea5a9cc5bd99f769633803b3d485f765741e43ee
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/vaadin-material-styles@npm:24.9.2"
+"@vaadin/vaadin-material-styles@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/vaadin-material-styles@npm:24.9.1"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
-  checksum: 10/bbe07aa29a8e9ea36f62cf1e17c497e38207850743be450d05976febb5b9d751766abf1a56d116410c09e91e6b390164f7fdb47714fac981c323cc75d00fa084
+    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+  checksum: 10/e3cb4a5de4d28bcd43b82a94d25880af5b22116f15b0f711d5b66aaaf5116e144fe6f05143fee9e65ecc6d6ea8a3b734864667c20135e3047e79c3aab9a03f00
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:24.9.2, @vaadin/vaadin-themable-mixin@npm:~24.9.2":
-  version: 24.9.2
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.9.2"
+"@vaadin/vaadin-themable-mixin@npm:24.9.1, @vaadin/vaadin-themable-mixin@npm:~24.9.1":
+  version: 24.9.1
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.9.1"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
     style-observer: "npm:^0.0.8"
-  checksum: 10/80e06db3dc145ea28c43b58829eb298524dd44732e419ebd99e562053a7b7bcb4dec121e12bcba96610b63b328250dc4b09776d9d2dae94b3cca7f0414d5590c
+  checksum: 10/90139de617724f01b116a52388319d9e9d752215b98bf5a7ee10eebf4b0d21583c1ac8a238a921bfe83665c3becd5586d322a4d463cdf3e9bfa493331c68a604
   languageName: node
   linkType: hard
 
@@ -9190,15 +9190,15 @@ __metadata:
     "@codemirror/view": "npm:6.38.4"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
-    "@formatjs/intl-datetimeformat": "npm:6.18.1"
-    "@formatjs/intl-displaynames": "npm:6.8.12"
-    "@formatjs/intl-durationformat": "npm:0.7.5"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
-    "@formatjs/intl-listformat": "npm:7.7.12"
-    "@formatjs/intl-locale": "npm:4.2.12"
-    "@formatjs/intl-numberformat": "npm:8.15.5"
-    "@formatjs/intl-pluralrules": "npm:5.4.5"
-    "@formatjs/intl-relativetimeformat": "npm:11.4.12"
+    "@formatjs/intl-datetimeformat": "npm:6.18.0"
+    "@formatjs/intl-displaynames": "npm:6.8.11"
+    "@formatjs/intl-durationformat": "npm:0.7.4"
+    "@formatjs/intl-getcanonicallocales": "npm:2.5.5"
+    "@formatjs/intl-listformat": "npm:7.7.11"
+    "@formatjs/intl-locale": "npm:4.2.11"
+    "@formatjs/intl-numberformat": "npm:8.15.4"
+    "@formatjs/intl-pluralrules": "npm:5.4.4"
+    "@formatjs/intl-relativetimeformat": "npm:11.4.11"
     "@fullcalendar/core": "npm:6.1.19"
     "@fullcalendar/daygrid": "npm:6.1.19"
     "@fullcalendar/interaction": "npm:6.1.19"
@@ -9267,8 +9267,8 @@ __metadata:
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
-    "@vaadin/combo-box": "npm:24.9.2"
-    "@vaadin/vaadin-themable-mixin": "npm:24.9.2"
+    "@vaadin/combo-box": "npm:24.9.1"
+    "@vaadin/vaadin-themable-mixin": "npm:24.9.1"
     "@vibrant/color": "npm:4.0.0"
     "@vitest/coverage-v8": "npm:3.2.4"
     "@vue/web-component-wrapper": "npm:1.3.0"
@@ -9315,7 +9315,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
-    intl-messageformat: "npm:10.7.17"
+    intl-messageformat: "npm:10.7.16"
     js-yaml: "npm:4.1.0"
     jsdom: "npm:27.0.0"
     jszip: "npm:3.10.1"
@@ -9710,15 +9710,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.17":
-  version: 10.7.17
-  resolution: "intl-messageformat@npm:10.7.17"
+"intl-messageformat@npm:10.7.16":
+  version: 10.7.16
+  resolution: "intl-messageformat@npm:10.7.16"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.4"
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.3"
+    "@formatjs/icu-messageformat-parser": "npm:2.11.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/4f8c30c998bfc14eb64894414b94a8923045ab31d7bbf0978dab6621c644d451ff5c533c04ce8128163b74dd6d59061ec1ef3acb1cbab3302d31cbdb21947620
+  checksum: 10/c19b77c5e495ce8b0d1aa0d95444bf3a4f73886805f1e08d7159b364abcf2f63686b2ccf202eaafb0e39a0e9fde61848b8dd2db1679efd4f6ec8f6a3d0e77928
   languageName: node
   linkType: hard