Merge branch 'dev' into triggers-descriptions

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         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@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         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@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         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@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

package.json

@@ -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.1",
-    "@vaadin/vaadin-themable-mixin": "24.9.1",
+    "@vaadin/combo-box": "24.9.2",
+    "@vaadin/vaadin-themable-mixin": "24.9.2",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",

src/common/entity/context/get_area_context.ts

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

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

@@ -5,18 +5,24 @@ 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 } from "../../common/entity/compute_device_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
-  getDevices,
-  type DevicePickerItem,
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
   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
@@ -24,6 +30,11 @@ 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;
@@ -106,18 +117,162 @@ export class HaDevicePicker extends LitElement {
   }
 
   private _getItems = () =>
-    getDevices(
-      this.hass,
+    this._getDevices(
+      this.hass.devices,
+      this.hass.entities,
       this._configEntryLookup,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
       this.deviceFilter,
       this.entityFilter,
-      this.excludeDevices,
-      this.value
+      this.excludeDevices
     );
 
+  private _getDevices = memoizeOne(
+    (
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      excludeDevices: this["excludeDevices"]
+    ): DevicePickerItem[] => {
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+      }
+
+      let inputDevices = devices.filter(
+        (device) => device.id === this.value || !device.disabled_by
+      );
+
+      if (includeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDomains) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return true;
+          }
+          return entities.every(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+      }
+
+      if (excludeDevices) {
+        inputDevices = inputDevices.filter(
+          (device) => !excludeDevices!.includes(device.id)
+        );
+      }
+
+      if (includeDeviceClasses) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        });
+      }
+
+      if (entityFilter) {
+        inputDevices = inputDevices.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return devEntities.some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter(stateObj);
+          });
+        });
+      }
+
+      if (deviceFilter) {
+        inputDevices = inputDevices.filter(
+          (device) =>
+            // We always want to include the device of the current value
+            device.id === this.value || deviceFilter!(device)
+        );
+      }
+
+      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
+        const deviceName = computeDeviceNameDisplay(
+          device,
+          this.hass,
+          deviceEntityLookup[device.id]
+        );
+
+        const { area } = getDeviceContext(device, this.hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const configEntry = device.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
+
+        const domain = configEntry?.domain;
+        const domainName = domain
+          ? domainToName(this.hass.localize, domain)
+          : undefined;
+
+        return {
+          id: device.id,
+          label: "",
+          primary:
+            deviceName ||
+            this.hass.localize("ui.components.device-picker.unnamed_device"),
+          secondary: areaName,
+          domain: configEntry?.domain,
+          domain_name: domainName,
+          search_labels: [deviceName, areaName, domain, domainName].filter(
+            Boolean
+          ) as string[],
+          sorting_label: deviceName || "zzz",
+        };
+      });
+
+      return outputDevices;
+    }
+  );
+
   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 "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {

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

@@ -1,3 +1,4 @@
+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";
@@ -7,6 +8,8 @@ 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,16 +1,14 @@
 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,
@@ -21,11 +19,21 @@ import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { PickerComboBoxSearchFn } from "../ha-picker-combo-box";
+import type {
+  PickerComboBoxItem,
+  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")
@@ -242,7 +250,7 @@ export class HaEntityPicker extends LitElement {
   );
 
   private _getItems = () =>
-    getEntities(
+    this._getEntities(
       this.hass,
       this.includeDomains,
       this.excludeDomains,
@@ -250,10 +258,125 @@ export class HaEntityPicker extends LitElement {
       this.includeDeviceClasses,
       this.includeUnitOfMeasurement,
       this.includeEntities,
-      this.excludeEntities,
-      this.value
+      this.excludeEntities
     );
 
+  private _getEntities = memoizeOne(
+    (
+      hass: this["hass"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      entityFilter: this["entityFilter"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
+      includeEntities: this["includeEntities"],
+      excludeEntities: this["excludeEntities"]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];
+
+      let entityIds = Object.keys(hass.states);
+
+      if (includeEntities) {
+        entityIds = entityIds.filter((entityId) =>
+          includeEntities.includes(entityId)
+        );
+      }
+
+      if (excludeEntities) {
+        entityIds = entityIds.filter(
+          (entityId) => !excludeEntities.includes(entityId)
+        );
+      }
+
+      if (includeDomains) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      if (excludeDomains) {
+        entityIds = entityIds.filter(
+          (eid) => !excludeDomains.includes(computeDomain(eid))
+        );
+      }
+
+      const isRTL = computeRTL(this.hass);
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass!.states[entityId];
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = this.hass.formatEntityName(stateObj, "entity");
+        const deviceName = this.hass.formatEntityName(stateObj, "device");
+        const areaName = this.hass.formatEntityName(stateObj, "area");
+
+        const domainName = domainToName(
+          this.hass.localize,
+          computeDomain(entityId)
+        );
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClasses) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  );
+
   protected render() {
     const placeholder =
       this.placeholder ??

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

@@ -1,3 +1,4 @@
+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,6 +9,8 @@ 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,13 +8,21 @@ 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 {
-  getAreasAndFloors,
-  type AreaFloorValue,
-  type FloorComboBoxItem,
-} from "../data/area_floor";
+  getFloorAreaLookup,
+  type FloorRegistryEntry,
+} from "../data/floor_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
@@ -22,12 +30,24 @@ 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;
@@ -134,6 +154,243 @@ 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 },
@@ -189,13 +446,11 @@ export class HaAreaFloorPicker extends LitElement {
   };
 
   private _getItems = () =>
-    getAreasAndFloors(
-      this.hass.states,
+    this._getAreasAndFloors(
       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.floors);
+        const { floor } = getAreaContext(area, this.hass);
 
         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.floors);
+        const { floor } = getAreaContext(area, this.hass);
         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.floors);
+      const { floor } = getAreaContext(area, this.hass!);
       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.floors);
+          const { floor } = getAreaContext(area, this.hass!);
           const floorId = floor?.floor_id ?? UNASSIGNED_FLOOR;
 
           if (!acc[floorId]) {

src/components/ha-expansion-panel.ts

@@ -49,7 +49,6 @@ 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>
@@ -171,11 +170,6 @@ 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,7 +79,6 @@ 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,10 +5,16 @@ 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";
@@ -131,20 +137,201 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       }
   );
 
-  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 _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,
+          },
+        ];
+      }
 
-    return getLabels(
-      this.hass,
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
+      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
+
+      if (
+        includeDomains ||
+        excludeDomains ||
+        includeDeviceClasses ||
+        deviceFilter ||
+        entityFilter
+      ) {
+        deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.labels.length > 0);
+
+        if (includeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) =>
+              includeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (excludeDomains) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return true;
+            }
+            return entities.every(
+              (entity) =>
+                !excludeDomains.includes(computeDomain(entity.entity_id))
+            );
+          });
+          inputEntities = inputEntities!.filter(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        }
+
+        if (includeDeviceClasses) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return (
+                stateObj.attributes.device_class &&
+                includeDeviceClasses.includes(stateObj.attributes.device_class)
+              );
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        }
+
+        if (deviceFilter) {
+          inputDevices = inputDevices!.filter((device) =>
+            deviceFilter!(device)
+          );
+        }
+
+        if (entityFilter) {
+          inputDevices = inputDevices!.filter((device) => {
+            const devEntities = deviceEntityLookup[device.id];
+            if (!devEntities || !devEntities.length) {
+              return false;
+            }
+            return deviceEntityLookup[device.id].some((entity) => {
+              const stateObj = this.hass.states[entity.entity_id];
+              if (!stateObj) {
+                return false;
+              }
+              return entityFilter(stateObj);
+            });
+          });
+          inputEntities = inputEntities!.filter((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return entityFilter!(stateObj);
+          });
+        }
+      }
+
+      let outputLabels = labels;
+      const usedLabels = new Set<string>();
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+
+        inputDevices.forEach((device) => {
+          device.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+        inputEntities.forEach((entity) => {
+          entity.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (areaIds) {
+        areaIds.forEach((areaId) => {
+          const area = haAreas[areaId];
+          area.labels.forEach((label) => usedLabels.add(label));
+        });
+      }
+
+      if (excludeLabels) {
+        outputLabels = outputLabels.filter(
+          (label) => !excludeLabels!.includes(label.label_id)
+        );
+      }
+
+      if (inputDevices || inputEntities) {
+        outputLabels = outputLabels.filter((label) =>
+          usedLabels.has(label.label_id)
+        );
+      }
+
+      const items = outputLabels.map<PickerComboBoxItem>((label) => ({
+        id: label.label_id,
+        primary: label.name,
+        icon: label.icon || undefined,
+        icon_path: label.icon ? undefined : mdiLabel,
+        sorting_label: label.name,
+        search_labels: [label.name, label.label_id, label.description].filter(
+          (v): v is string => Boolean(v)
+        ),
+      }));
+
+      return items;
+    }
+  );
+
+  private _getItems = () =>
+    this._getLabels(
       this._labels,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
@@ -152,7 +339,6 @@ 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,9 +57,6 @@ 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() {
@@ -203,10 +200,6 @@ 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___";
 
-export const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
+const DEFAULT_ROW_RENDERER: ComboBoxLitRenderer<PickerComboBoxItem> = (
   item
 ) => html`
   <ha-combo-box-item type="button" compact>

src/components/ha-service-control.ts

@@ -94,9 +94,6 @@ export class HaServiceControl extends LitElement {
   @property({ attribute: "hide-picker", type: Boolean, reflect: true })
   public hidePicker = false;
 
-  @property({ attribute: "hide-description", type: Boolean })
-  public hideDescription = false;
-
   @state() private _value!: this["value"];
 
   @state() private _checkedKeys = new Set();
@@ -472,136 +469,135 @@ export class HaServiceControl extends LitElement {
       serviceData?.description;
 
     return html`${this.hidePicker
-      ? nothing
-      : html`<ha-service-picker
-          .hass=${this.hass}
-          .value=${this._value?.action}
-          .disabled=${this.disabled}
-          @value-changed=${this._serviceChanged}
-          .showServiceId=${this.showServiceId}
-        ></ha-service-picker>`}
-    ${this.hideDescription
-      ? nothing
-      : html`
-          <div class="description">
-            ${description ? html`<p>${description}</p>` : ""}
-            ${this._manifest
-              ? html` <a
-                  href=${this._manifest.is_built_in
-                    ? documentationUrl(
-                        this.hass,
-                        `/integrations/${this._manifest.domain}`
-                      )
-                    : this._manifest.documentation}
-                  title=${this.hass.localize(
-                    "ui.components.service-control.integration_doc"
-                  )}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <ha-icon-button
-                    .path=${mdiHelpCircle}
-                    class="help-icon"
-                  ></ha-icon-button>
-                </a>`
-              : nothing}
-          </div>
-        `}
-    ${serviceData && "target" in serviceData
-      ? html`<ha-settings-row .narrow=${this.narrow}>
-          ${hasOptional
-            ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-            : ""}
-          <span slot="heading"
-            >${this.hass.localize("ui.components.service-control.target")}</span
-          >
-          <span slot="description"
-            >${this.hass.localize(
-              "ui.components.service-control.target_secondary"
-            )}</span
-          ><ha-selector
+        ? nothing
+        : html`<ha-service-picker
             .hass=${this.hass}
-            .selector=${this._targetSelector(
-              serviceData.target as TargetSelector,
-              this._value?.target
-            )}
+            .value=${this._value?.action}
             .disabled=${this.disabled}
-            @value-changed=${this._targetChanged}
-            .value=${this._value?.target}
-          ></ha-selector
-        ></ha-settings-row>`
-      : entityId
-        ? html`<ha-entity-picker
-            .hass=${this.hass}
-            .disabled=${this.disabled}
-            .value=${this._value?.data?.entity_id}
-            .label=${this.hass.localize(
-              `component.${domain}.services.${serviceName}.fields.entity_id.description`
-            ) || entityId.description}
-            @value-changed=${this._entityPicked}
-            allow-custom-entity
-          ></ha-entity-picker>`
-        : ""}
-    ${shouldRenderServiceDataYaml
-      ? html`<ha-yaml-editor
-          .hass=${this.hass}
-          .label=${this.hass.localize(
-            "ui.components.service-control.action_data"
-          )}
-          .name=${"data"}
-          .readOnly=${this.disabled}
-          .defaultValue=${this._value?.data}
-          @value-changed=${this._dataChanged}
-        ></ha-yaml-editor>`
-      : serviceData?.fields.map((dataField) => {
-          if (!dataField.fields) {
-            return this._renderField(
-              dataField,
-              hasOptional,
-              domain,
-              serviceName,
-              targetEntities
-            );
-          }
+            @value-changed=${this._serviceChanged}
+            .showServiceId=${this.showServiceId}
+          ></ha-service-picker>`}
 
-          const fields = Object.entries(dataField.fields).map(
-            ([key, field]) => ({ key, ...field })
-          );
-
-          return fields.length &&
-            this._hasFilteredFields(fields, targetEntities)
-            ? html`<ha-expansion-panel
-                left-chevron
-                .expanded=${!dataField.collapsed}
-                .header=${this.hass.localize(
-                  `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`
-                ) ||
-                dataField.name ||
-                dataField.key}
-                .secondary=${this._getSectionDescription(
-                  dataField,
-                  domain,
-                  serviceName
-                )}
-              >
-                <ha-service-section-icon
-                  slot="icons"
-                  .hass=${this.hass}
-                  .service=${this._value!.action}
-                  .section=${dataField.key}
-                ></ha-service-section-icon>
-                ${Object.entries(dataField.fields).map(([key, field]) =>
-                  this._renderField(
-                    { key, ...field },
-                    hasOptional,
-                    domain,
-                    serviceName,
-                    targetEntities
+      <div class="description">
+        ${description ? html`<p>${description}</p>` : ""}
+        ${this._manifest
+          ? html` <a
+              href=${this._manifest.is_built_in
+                ? documentationUrl(
+                    this.hass,
+                    `/integrations/${this._manifest.domain}`
                   )
-                )}
-              </ha-expansion-panel>`
-            : nothing;
-        })} `;
+                : this._manifest.documentation}
+              title=${this.hass.localize(
+                "ui.components.service-control.integration_doc"
+              )}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <ha-icon-button
+                .path=${mdiHelpCircle}
+                class="help-icon"
+              ></ha-icon-button>
+            </a>`
+          : nothing}
+      </div>
+      ${serviceData && "target" in serviceData
+        ? html`<ha-settings-row .narrow=${this.narrow}>
+            ${hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : ""}
+            <span slot="heading"
+              >${this.hass.localize(
+                "ui.components.service-control.target"
+              )}</span
+            >
+            <span slot="description"
+              >${this.hass.localize(
+                "ui.components.service-control.target_secondary"
+              )}</span
+            ><ha-selector
+              .hass=${this.hass}
+              .selector=${this._targetSelector(
+                serviceData.target as TargetSelector,
+                this._value?.target
+              )}
+              .disabled=${this.disabled}
+              @value-changed=${this._targetChanged}
+              .value=${this._value?.target}
+            ></ha-selector
+          ></ha-settings-row>`
+        : entityId
+          ? html`<ha-entity-picker
+              .hass=${this.hass}
+              .disabled=${this.disabled}
+              .value=${this._value?.data?.entity_id}
+              .label=${this.hass.localize(
+                `component.${domain}.services.${serviceName}.fields.entity_id.description`
+              ) || entityId.description}
+              @value-changed=${this._entityPicked}
+              allow-custom-entity
+            ></ha-entity-picker>`
+          : ""}
+      ${shouldRenderServiceDataYaml
+        ? html`<ha-yaml-editor
+            .hass=${this.hass}
+            .label=${this.hass.localize(
+              "ui.components.service-control.action_data"
+            )}
+            .name=${"data"}
+            .readOnly=${this.disabled}
+            .defaultValue=${this._value?.data}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>`
+        : serviceData?.fields.map((dataField) => {
+            if (!dataField.fields) {
+              return this._renderField(
+                dataField,
+                hasOptional,
+                domain,
+                serviceName,
+                targetEntities
+              );
+            }
+
+            const fields = Object.entries(dataField.fields).map(
+              ([key, field]) => ({ key, ...field })
+            );
+
+            return fields.length &&
+              this._hasFilteredFields(fields, targetEntities)
+              ? html`<ha-expansion-panel
+                  left-chevron
+                  .expanded=${!dataField.collapsed}
+                  .header=${this.hass.localize(
+                    `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`
+                  ) ||
+                  dataField.name ||
+                  dataField.key}
+                  .secondary=${this._getSectionDescription(
+                    dataField,
+                    domain,
+                    serviceName
+                  )}
+                >
+                  <ha-service-section-icon
+                    slot="icons"
+                    .hass=${this.hass}
+                    .service=${this._value!.action}
+                    .section=${dataField.key}
+                  ></ha-service-section-icon>
+                  ${Object.entries(dataField.fields).map(([key, field]) =>
+                    this._renderField(
+                      { key, ...field },
+                      hasOptional,
+                      domain,
+                      serviceName,
+                      targetEntities
+                    )
+                  )}
+                </ha-expansion-panel>`
+              : nothing;
+          })} `;
   }
 
   private _getSectionDescription(

src/components/ha-trigger-icon.ts

@@ -0,0 +1,97 @@
+import {
+  mdiAvTimer,
+  mdiCalendar,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiFormatListBulleted,
+  mdiGestureDoubleTap,
+  mdiHomeAssistant,
+  mdiMapMarker,
+  mdiMapMarkerRadius,
+  mdiMessageAlert,
+  mdiMicrophoneMessage,
+  mdiNfcVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiSwapHorizontal,
+  mdiWeatherSunny,
+  mdiWebhook,
+} from "@mdi/js";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { computeDomain } from "../common/entity/compute_domain";
+import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
+import type { HomeAssistant } from "../types";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+export const TRIGGER_ICONS = {
+  calendar: mdiCalendar,
+  device: mdiDevices,
+  event: mdiGestureDoubleTap,
+  state: mdiStateMachine,
+  geo_location: mdiMapMarker,
+  homeassistant: mdiHomeAssistant,
+  mqtt: mdiSwapHorizontal,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  conversation: mdiMicrophoneMessage,
+  tag: mdiNfcVariant,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  time_pattern: mdiAvTimer,
+  webhook: mdiWebhook,
+  persistent_notification: mdiMessageAlert,
+  zone: mdiMapMarkerRadius,
+  list: mdiFormatListBulleted,
+};
+
+@customElement("ha-trigger-icon")
+export class HaTriggerIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public trigger?: string;
+
+  @property() public icon?: string;
+
+  protected render() {
+    if (this.icon) {
+      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
+    }
+
+    if (!this.trigger) {
+      return nothing;
+    }
+
+    if (!this.hass) {
+      return this._renderFallback();
+    }
+
+    const icon = triggerIcon(this.hass, this.trigger).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
+      }
+      return this._renderFallback();
+    });
+
+    return html`${until(icon)}`;
+  }
+
+  private _renderFallback() {
+    const domain = computeDomain(this.trigger!);
+
+    return html`
+      <ha-svg-icon
+        .path=${TRIGGER_ICONS[this.trigger!] || FALLBACK_DOMAIN_ICONS[domain]}
+      ></ha-svg-icon>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-trigger-icon": HaTriggerIcon;
+  }
+}

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

@@ -1,125 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,354 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,699 +0,0 @@
-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

@@ -1,863 +0,0 @@
-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

@@ -1,298 +0,0 @@
-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/automation.ts

@@ -1,6 +1,7 @@
 import type {
   HassEntityAttributeBase,
   HassEntityBase,
+  HassServiceTarget,
 } from "home-assistant-js-websocket";
 import { ensureArray } from "../common/array/ensure-array";
 import { navigate } from "../common/navigate";
@@ -11,6 +12,7 @@ import { CONDITION_BUILDING_BLOCKS } from "./condition";
 import type { DeviceCondition, DeviceTrigger } from "./device_automation";
 import type { Action, Field, MODES } from "./script";
 import { migrateAutomationAction } from "./script";
+import type { TriggerDescription } from "./trigger";
 
 export const AUTOMATION_DEFAULT_MODE: (typeof MODES)[number] = "single";
 export const AUTOMATION_DEFAULT_MAX = 10;
@@ -84,6 +86,11 @@ export interface BaseTrigger {
   id?: string;
   variables?: Record<string, unknown>;
   enabled?: boolean;
+  options?: Record<string, unknown>;
+}
+
+export interface PlatformTrigger extends BaseTrigger {
+  target?: HassServiceTarget;
 }
 
 export interface StateTrigger extends BaseTrigger {
@@ -570,6 +577,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
   insertAfter: (value: Trigger | Trigger[]) => boolean;
   toggleYamlMode: () => void;
   config: Trigger;
+  description?: TriggerDescription;
   yamlMode: boolean;
   uiSupported: boolean;
 }

src/data/automation_i18n.ts

@@ -803,9 +803,15 @@ const tryDescribeTrigger = (
     );
   }
 
+  const triggerType = trigger.trigger;
+  const [domain, type] = triggerType.split(".", 2);
+
   return (
     hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.${trigger.trigger}.label`
+      `component.${domain}.triggers.${type || "_"}.description_configured`
+    ) ||
+    hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.${triggerType}.label`
     ) ||
     hass.localize(`ui.panel.config.automation.editor.triggers.unknown_trigger`)
   );

src/data/device_registry.ts

@@ -1,21 +1,12 @@
-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 {
@@ -172,175 +163,3 @@ 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,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { arrayLiteralIncludes } from "../common/array/literal-includes";
 
 export const UNAVAILABLE = "unavailable";
@@ -11,5 +10,3 @@ 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,16 +1,12 @@
-import type { Connection, HassEntity } from "home-assistant-js-websocket";
+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 { 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";
 
@@ -328,141 +324,3 @@ 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/icons.ts

@@ -131,14 +131,19 @@ const resources: {
     all?: Promise<Record<string, ServiceIcons>>;
     domains: Record<string, ServiceIcons | Promise<ServiceIcons>>;
   };
+  triggers: {
+    all?: Promise<Record<string, TriggerIcons>>;
+    domains: Record<string, TriggerIcons | Promise<TriggerIcons>>;
+  };
 } = {
   entity: {},
   entity_component: {},
   services: { domains: {} },
+  triggers: { domains: {} },
 };
 
 interface IconResources<
-  T extends ComponentIcons | PlatformIcons | ServiceIcons,
+  T extends ComponentIcons | PlatformIcons | ServiceIcons | TriggerIcons,
 > {
   resources: Record<string, T>;
 }
@@ -182,12 +187,22 @@ type ServiceIcons = Record<
   { service: string; sections?: Record<string, string> }
 >;
 
-export type IconCategory = "entity" | "entity_component" | "services";
+type TriggerIcons = Record<
+  string,
+  { trigger: string; sections?: Record<string, string> }
+>;
+
+export type IconCategory =
+  | "entity"
+  | "entity_component"
+  | "services"
+  | "triggers";
 
 interface CategoryType {
   entity: PlatformIcons;
   entity_component: ComponentIcons;
   services: ServiceIcons;
+  triggers: TriggerIcons;
 }
 
 export const getHassIcons = async <T extends IconCategory>(
@@ -265,12 +280,10 @@ export const getServiceIcons = async (
     if (!force && resources.services.all) {
       return resources.services.all;
     }
-    resources.services.all = getHassIcons(hass, "services", domain).then(
-      (res) => {
-        resources.services.domains = res.resources;
-        return res?.resources;
-      }
-    );
+    resources.services.all = getHassIcons(hass, "services").then((res) => {
+      resources.services.domains = res.resources;
+      return res?.resources;
+    });
     return resources.services.all;
   }
   if (!force && domain in resources.services.domains) {
@@ -292,6 +305,40 @@ export const getServiceIcons = async (
   return resources.services.domains[domain];
 };
 
+export const getTriggerIcons = async (
+  hass: HomeAssistant,
+  domain?: string,
+  force = false
+): Promise<TriggerIcons | Record<string, TriggerIcons> | undefined> => {
+  if (!domain) {
+    if (!force && resources.triggers.all) {
+      return resources.triggers.all;
+    }
+    resources.triggers.all = getHassIcons(hass, "triggers").then((res) => {
+      resources.triggers.domains = res.resources;
+      return res?.resources;
+    });
+    return resources.triggers.all;
+  }
+  if (!force && domain in resources.triggers.domains) {
+    return resources.triggers.domains[domain];
+  }
+  if (resources.triggers.all && !force) {
+    await resources.triggers.all;
+    if (domain in resources.triggers.domains) {
+      return resources.triggers.domains[domain];
+    }
+  }
+  if (!isComponentLoaded(hass, domain)) {
+    return undefined;
+  }
+  const result = getHassIcons(hass, "triggers", domain);
+  resources.triggers.domains[domain] = result.then(
+    (res) => res?.resources[domain]
+  );
+  return resources.triggers.domains[domain];
+};
+
 // Cache for sorted range keys
 const sortedRangeCache = new WeakMap<Record<string, string>, number[]>();
 
@@ -471,6 +518,26 @@ export const attributeIcon = async (
   return icon;
 };
 
+export const triggerIcon = async (
+  hass: HomeAssistant,
+  trigger: string
+): Promise<string | undefined> => {
+  let icon: string | undefined;
+
+  const domain = trigger.includes(".") ? computeDomain(trigger) : trigger;
+  const triggerName = trigger.includes(".") ? computeObjectId(trigger) : "_";
+
+  const triggerIcons = await getTriggerIcons(hass, domain);
+  if (triggerIcons) {
+    const trgrIcon = triggerIcons[triggerName] as TriggerIcons[string];
+    icon = trgrIcon?.trigger;
+  }
+  if (!icon) {
+    icon = await domainIcon(hass, domain);
+  }
+  return icon;
+};
+
 export const serviceIcon = async (
   hass: HomeAssistant,
   service: string

src/data/label_registry.ts

@@ -1,21 +1,9 @@
-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 {
@@ -100,211 +88,3 @@ 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

@@ -1,161 +0,0 @@
-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/data/translation.ts

@@ -73,7 +73,8 @@ export type TranslationCategory =
   | "application_credentials"
   | "issues"
   | "selector"
-  | "services";
+  | "services"
+  | "triggers";
 
 export const subscribeTranslationPreferences = (
   hass: HomeAssistant,

src/data/trigger.ts

@@ -1,53 +1,12 @@
-import {
-  mdiAvTimer,
-  mdiCalendar,
-  mdiClockOutline,
-  mdiCodeBraces,
-  mdiDevices,
-  mdiDotsHorizontal,
-  mdiFormatListBulleted,
-  mdiGestureDoubleTap,
-  mdiMapClock,
-  mdiMapMarker,
-  mdiMapMarkerRadius,
-  mdiMessageAlert,
-  mdiMicrophoneMessage,
-  mdiNfcVariant,
-  mdiNumeric,
-  mdiShape,
-  mdiStateMachine,
-  mdiSwapHorizontal,
-  mdiWeatherSunny,
-  mdiWebhook,
-} from "@mdi/js";
+import { mdiDotsHorizontal, mdiMapClock, mdiShape } from "@mdi/js";
 
-import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
+import type { HomeAssistant } from "../types";
 import type {
   AutomationElementGroup,
   Trigger,
   TriggerList,
 } from "./automation";
-
-export const TRIGGER_ICONS = {
-  calendar: mdiCalendar,
-  device: mdiDevices,
-  event: mdiGestureDoubleTap,
-  state: mdiStateMachine,
-  geo_location: mdiMapMarker,
-  homeassistant: mdiHomeAssistant,
-  mqtt: mdiSwapHorizontal,
-  numeric_state: mdiNumeric,
-  sun: mdiWeatherSunny,
-  conversation: mdiMicrophoneMessage,
-  tag: mdiNfcVariant,
-  template: mdiCodeBraces,
-  time: mdiClockOutline,
-  time_pattern: mdiAvTimer,
-  webhook: mdiWebhook,
-  persistent_notification: mdiMessageAlert,
-  zone: mdiMapMarkerRadius,
-  list: mdiFormatListBulleted,
-};
+import type { Selector, TargetSelector } from "./selector";
 
 export const TRIGGER_GROUPS: AutomationElementGroup = {
   device: {},
@@ -74,3 +33,26 @@ export const TRIGGER_GROUPS: AutomationElementGroup = {
 
 export const isTriggerList = (trigger: Trigger): trigger is TriggerList =>
   "triggers" in trigger;
+
+export interface TriggerDescription {
+  target?: TargetSelector["target"];
+  fields: Record<
+    string,
+    {
+      example?: string | boolean | number;
+      default?: unknown;
+      required?: boolean;
+      selector?: Selector;
+    }
+  >;
+}
+
+export type TriggerDescriptions = Record<string, TriggerDescription>;
+
+export const subscribeTriggers = (
+  hass: HomeAssistant,
+  callback: (triggers: TriggerDescriptions) => void
+) =>
+  hass.connection.subscribeMessage<TriggerDescriptions>(callback, {
+    type: "trigger_platforms/subscribe",
+  });

src/panels/config/automation/add-automation-element-dialog.ts

@@ -44,7 +44,7 @@ import {
   domainToName,
   fetchIntegrationManifests,
 } from "../../../data/integration";
-import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
+import { TRIGGER_GROUPS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { HaFuse } from "../../../resources/fuse";
@@ -54,6 +54,7 @@ import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
+import { TRIGGER_ICONS } from "../../../components/ha-trigger-icon";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },

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

@@ -27,7 +27,6 @@ import type HaAutomationConditionEditor from "../action/ha-automation-action-edi
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
-import "../trigger/ha-automation-trigger-editor";
 import "./ha-automation-sidebar-card";
 
 @customElement("ha-automation-sidebar-action")

src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts

@@ -17,7 +17,6 @@ import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-md-button-menu";
 import "../../../../components/ha-md-divider";
-import "../../../../components/ha-md-menu-item";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
 

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

@@ -22,6 +22,8 @@ import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
 import "./ha-automation-sidebar-card";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { computeObjectId } from "../../../../common/entity/compute_object_id";
 
 @customElement("ha-automation-sidebar-trigger")
 export default class HaAutomationSidebarTrigger extends LitElement {
@@ -68,9 +70,22 @@ export default class HaAutomationSidebarTrigger extends LitElement {
       "ui.panel.config.automation.editor.triggers.trigger"
     );
 
-    const title = this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.${type}.label`
-    );
+    const domain =
+      "trigger" in this.config.config &&
+      this.config.config.trigger.includes(".")
+        ? computeDomain(this.config.config.trigger)
+        : "trigger" in this.config.config && this.config.config.trigger;
+    const triggerName =
+      "trigger" in this.config.config &&
+      this.config.config.trigger.includes(".")
+        ? computeObjectId(this.config.config.trigger)
+        : "_";
+
+    const title =
+      this.hass.localize(
+        `ui.panel.config.automation.editor.triggers.type.${type}.label`
+      ) ||
+      this.hass.localize(`component.${domain}.triggers.${triggerName}.name`);
 
     return html`
       <ha-automation-sidebar-card
@@ -246,6 +261,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
             class="sidebar-editor"
             .hass=${this.hass}
             .trigger=${this.config.config}
+            .description=${this.config.description}
             @value-changed=${this._valueChangedSidebar}
             @yaml-changed=${this._yamlChangedSidebar}
             .uiSupported=${this.config.uiSupported}

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

@@ -9,10 +9,12 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Trigger } from "../../../../data/automation";
 import { migrateAutomationTrigger } from "../../../../data/automation";
+import type { TriggerDescription } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
+import "./types/ha-automation-trigger-platform";
 
 @customElement("ha-automation-trigger-editor")
 export default class HaAutomationTriggerEditor extends LitElement {
@@ -29,6 +31,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
 
   @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
 
+  @property({ attribute: false }) public description?: TriggerDescription;
+
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
   protected render() {
@@ -88,11 +92,18 @@ export default class HaAutomationTriggerEditor extends LitElement {
                   `
                 : nothing}
               <div @value-changed=${this._onUiChanged}>
-                ${dynamicElement(`ha-automation-trigger-${type}`, {
-                  hass: this.hass,
-                  trigger: this.trigger,
-                  disabled: this.disabled,
-                })}
+                ${this.description
+                  ? html`<ha-automation-trigger-platform
+                      .hass=${this.hass}
+                      .trigger=${this.trigger}
+                      .description=${this.description}
+                      .disabled=${this.disabled}
+                    ></ha-automation-trigger-platform>`
+                  : dynamicElement(`ha-automation-trigger-${type}`, {
+                      hass: this.hass,
+                      trigger: this.trigger,
+                      disabled: this.disabled,
+                    })}
               </div>
             `}
       </div>

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

@@ -40,9 +40,11 @@ import "../../../../components/ha-md-button-menu";
 import "../../../../components/ha-md-divider";
 import "../../../../components/ha-md-menu-item";
 import "../../../../components/ha-svg-icon";
+import { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon";
 import type {
   AutomationClipboard,
   Trigger,
+  TriggerList,
   TriggerSidebarConfig,
 } from "../../../../data/automation";
 import { isTrigger, subscribeTrigger } from "../../../../data/automation";
@@ -50,7 +52,8 @@ import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity_registry";
-import { TRIGGER_ICONS, isTriggerList } from "../../../../data/trigger";
+import type { TriggerDescriptions } from "../../../../data/trigger";
+import { isTriggerList } from "../../../../data/trigger";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -73,6 +76,7 @@ import "./types/ha-automation-trigger-list";
 import "./types/ha-automation-trigger-mqtt";
 import "./types/ha-automation-trigger-numeric_state";
 import "./types/ha-automation-trigger-persistent_notification";
+import "./types/ha-automation-trigger-platform";
 import "./types/ha-automation-trigger-state";
 import "./types/ha-automation-trigger-sun";
 import "./types/ha-automation-trigger-tag";
@@ -138,6 +142,9 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @state() private _warnings?: string[];
 
+  @property({ attribute: false })
+  public triggerDescriptions: TriggerDescriptions = {};
+
   @property({ type: Boolean }) public narrow = false;
 
   @query("ha-automation-trigger-editor")
@@ -179,18 +186,24 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _renderRow() {
-    const type = this._getType(this.trigger);
+    const type = this._getType(this.trigger, this.triggerDescriptions);
 
     const supported = this._uiSupported(type);
 
     const yamlMode = this._yamlMode || !supported;
 
     return html`
-      <ha-svg-icon
-        slot="leading-icon"
-        class="trigger-icon"
-        .path=${TRIGGER_ICONS[type]}
-      ></ha-svg-icon>
+      ${type === "list"
+        ? html`<ha-svg-icon
+            slot="leading-icon"
+            class="trigger-icon"
+            .path=${TRIGGER_ICONS[type]}
+          ></ha-svg-icon>`
+        : html`<ha-trigger-icon
+            slot="leading-icon"
+            .hass=${this.hass}
+            .trigger=${(this.trigger as Exclude<Trigger, TriggerList>).trigger}
+          ></ha-trigger-icon>`}
       <h3 slot="header">
         ${describeTrigger(this.trigger, this.hass, this._entityReg)}
       </h3>
@@ -394,6 +407,9 @@ export default class HaAutomationTriggerRow extends LitElement {
             <ha-automation-trigger-editor
               .hass=${this.hass}
               .trigger=${this.trigger}
+              .description=${"trigger" in this.trigger
+                ? this.triggerDescriptions[this.trigger.trigger]
+                : undefined}
               .disabled=${this.disabled}
               .yamlMode=${this._yamlMode}
               .uiSupported=${supported}
@@ -553,6 +569,7 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   public openSidebar(trigger?: Trigger): void {
+    trigger = trigger || this.trigger;
     fireEvent(this, "open-sidebar", {
       save: (value) => {
         fireEvent(this, "value-changed", { value });
@@ -577,8 +594,14 @@ export default class HaAutomationTriggerRow extends LitElement {
       duplicate: this._duplicateTrigger,
       cut: this._cutTrigger,
       insertAfter: this._insertAfter,
-      config: trigger || this.trigger,
-      uiSupported: this._uiSupported(this._getType(trigger || this.trigger)),
+      config: trigger,
+      uiSupported: this._uiSupported(
+        this._getType(trigger, this.triggerDescriptions)
+      ),
+      description:
+        "trigger" in trigger
+          ? this.triggerDescriptions[trigger.trigger]
+          : undefined,
       yamlMode: this._yamlMode,
     } satisfies TriggerSidebarConfig);
     this._selected = true;
@@ -762,8 +785,18 @@ export default class HaAutomationTriggerRow extends LitElement {
     });
   }
 
-  private _getType = memoizeOne((trigger: Trigger) =>
-    isTriggerList(trigger) ? "list" : trigger.trigger
+  private _getType = memoizeOne(
+    (trigger: Trigger, triggerDescriptions: TriggerDescriptions) => {
+      if (isTriggerList(trigger)) {
+        return "list";
+      }
+
+      if (trigger.trigger in triggerDescriptions) {
+        return "platform";
+      }
+
+      return trigger.trigger;
+    }
   );
 
   private _uiSupported = memoizeOne(

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

@@ -4,6 +4,7 @@ import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
@@ -17,7 +18,9 @@ import type {
   Trigger,
   TriggerList,
 } from "../../../../data/automation";
-import { isTriggerList } from "../../../../data/trigger";
+import type { TriggerDescriptions } from "../../../../data/trigger";
+import { isTriggerList, subscribeTriggers } from "../../../../data/trigger";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import {
   PASTE_VALUE,
@@ -26,10 +29,9 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 @customElement("ha-automation-trigger")
-export default class HaAutomationTrigger extends LitElement {
+export default class HaAutomationTrigger extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public triggers!: Trigger[];
@@ -62,6 +64,23 @@ export default class HaAutomationTrigger extends LitElement {
 
   private _triggerKeys = new WeakMap<Trigger, string>();
 
+  @state() private _triggerDescriptions: TriggerDescriptions = {};
+
+  protected hassSubscribe() {
+    return [
+      subscribeTriggers(this.hass, (triggers) => this._addTriggers(triggers)),
+    ];
+  }
+
+  private _addTriggers(triggers: TriggerDescriptions) {
+    this._triggerDescriptions = { ...this._triggerDescriptions, ...triggers };
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.hass.loadBackendTranslation("triggers");
+  }
+
   protected render() {
     return html`
       <ha-sortable
@@ -85,6 +104,7 @@ export default class HaAutomationTrigger extends LitElement {
                 .first=${idx === 0}
                 .last=${idx === this.triggers.length - 1}
                 .trigger=${trg}
+                .triggerDescriptions=${this._triggerDescriptions}
                 @duplicate=${this._duplicateTrigger}
                 @insert-after=${this._insertAfter}
                 @move-down=${this._moveDown}

src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts

@@ -0,0 +1,406 @@
+import { mdiHelpCircle } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { computeDomain } from "../../../../../common/entity/compute_domain";
+import { computeObjectId } from "../../../../../common/entity/compute_object_id";
+import "../../../../../components/ha-checkbox";
+import "../../../../../components/ha-selector/ha-selector";
+import "../../../../../components/ha-settings-row";
+import "../../../../../components/ha-textfield";
+import "../../../../../components/ha-yaml-editor";
+import "../../../../../components/user/ha-users-picker";
+import type { PlatformTrigger } from "../../../../../data/automation";
+import type { IntegrationManifest } from "../../../../../data/integration";
+import { fetchIntegrationManifest } from "../../../../../data/integration";
+import type { TargetSelector } from "../../../../../data/selector";
+import type { TriggerDescription } from "../../../../../data/trigger";
+import type { HomeAssistant } from "../../../../../types";
+import { documentationUrl } from "../../../../../util/documentation-url";
+
+const showOptionalToggle = (field) =>
+  field.selector &&
+  !field.required &&
+  !("boolean" in field.selector && field.default);
+
+@customElement("ha-automation-trigger-platform")
+export class HaPlatformTrigger extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public trigger!: PlatformTrigger;
+
+  @property({ attribute: false }) public description?: TriggerDescription;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public narrow = true;
+
+  @state() private _checkedKeys = new Set();
+
+  @state() private _manifest?: IntegrationManifest;
+
+  public static get defaultConfig(): PlatformTrigger {
+    return { trigger: "" };
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this.hass.loadBackendTranslation("triggers");
+      this.hass.loadBackendTranslation("selector");
+    }
+    if (!changedProperties.has("trigger")) {
+      return;
+    }
+    const oldValue = changedProperties.get("trigger") as
+      | undefined
+      | this["trigger"];
+
+    // Fetch the manifest if we have a trigger selected and the trigger domain changed.
+    // If no trigger is selected, clear the manifest.
+    if (this.trigger?.trigger) {
+      const domain = this.trigger.trigger.includes(".")
+        ? computeDomain(this.trigger.trigger)
+        : this.trigger.trigger;
+
+      const oldDomain = oldValue?.trigger.includes(".")
+        ? computeDomain(oldValue.trigger)
+        : oldValue?.trigger;
+
+      if (domain !== oldDomain) {
+        this._fetchManifest(domain);
+      }
+    } else {
+      this._manifest = undefined;
+    }
+  }
+
+  protected render() {
+    const domain = this.trigger.trigger.includes(".")
+      ? computeDomain(this.trigger.trigger)
+      : this.trigger.trigger;
+    const triggerName = this.trigger.trigger.includes(".")
+      ? computeObjectId(this.trigger.trigger)
+      : "_";
+
+    const description = this.hass.localize(
+      `component.${domain}.triggers.${triggerName}.description`
+    );
+
+    const triggerDesc = this.description;
+
+    const shouldRenderDataYaml = !triggerDesc?.fields;
+
+    const hasOptional = Boolean(
+      triggerDesc?.fields &&
+        Object.values(triggerDesc.fields).some((field) =>
+          showOptionalToggle(field)
+        )
+    );
+
+    return html`
+      <div class="description">
+        ${description ? html`<p>${description}</p>` : ""}
+        ${this._manifest
+          ? html` <a
+              href=${this._manifest.is_built_in
+                ? documentationUrl(
+                    this.hass,
+                    `/integrations/${this._manifest.domain}`
+                  )
+                : this._manifest.documentation}
+              title=${this.hass.localize(
+                "ui.components.service-control.integration_doc"
+              )}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <ha-icon-button
+                .path=${mdiHelpCircle}
+                class="help-icon"
+              ></ha-icon-button>
+            </a>`
+          : nothing}
+      </div>
+      ${triggerDesc && "target" in triggerDesc
+        ? html`<ha-settings-row .narrow=${this.narrow}>
+            ${hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : ""}
+            <span slot="heading"
+              >${this.hass.localize(
+                "ui.components.service-control.target"
+              )}</span
+            >
+            <span slot="description"
+              >${this.hass.localize(
+                "ui.components.service-control.target_secondary"
+              )}</span
+            ><ha-selector
+              .hass=${this.hass}
+              .selector=${this._targetSelector(triggerDesc.target)}
+              .disabled=${this.disabled}
+              @value-changed=${this._targetChanged}
+              .value=${this.trigger?.target}
+            ></ha-selector
+          ></ha-settings-row>`
+        : nothing}
+      ${shouldRenderDataYaml
+        ? html`<ha-yaml-editor
+            .hass=${this.hass}
+            .label=${this.hass.localize(
+              "ui.components.service-control.action_data"
+            )}
+            .name=${"data"}
+            .readOnly=${this.disabled}
+            .defaultValue=${this.trigger?.options}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>`
+        : Object.entries(triggerDesc.fields).map(([fieldName, dataField]) =>
+            this._renderField(
+              fieldName,
+              dataField,
+              hasOptional,
+              domain,
+              triggerName
+            )
+          )}
+    `;
+  }
+
+  private _targetSelector = memoizeOne(
+    (targetSelector: TargetSelector["target"] | null | undefined) =>
+      targetSelector ? { target: { ...targetSelector } } : { target: {} }
+  );
+
+  private _renderField = (
+    fieldName: string,
+    dataField: TriggerDescription["fields"][string],
+    hasOptional: boolean,
+    domain: string | undefined,
+    triggerName: string | undefined
+  ) => {
+    const selector = dataField?.selector ?? { text: null };
+
+    const showOptional = showOptionalToggle(dataField);
+
+    return dataField.selector
+      ? html`<ha-settings-row .narrow=${this.narrow}>
+          ${!showOptional
+            ? hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : ""
+            : html`<ha-checkbox
+                .key=${fieldName}
+                .checked=${this._checkedKeys.has(fieldName) ||
+                (this.trigger?.options &&
+                  this.trigger.options[fieldName] !== undefined)}
+                .disabled=${this.disabled}
+                @change=${this._checkboxChanged}
+                slot="prefix"
+              ></ha-checkbox>`}
+          <span slot="heading"
+            >${this.hass.localize(
+              `component.${domain}.triggers.${triggerName}.fields.${fieldName}.name`
+            ) || triggerName}</span
+          >
+          <span slot="description"
+            >${this.hass.localize(
+              `component.${domain}.triggers.${triggerName}.fields.${fieldName}.description`
+            )}</span
+          >
+          <ha-selector
+            .disabled=${this.disabled ||
+            (showOptional &&
+              !this._checkedKeys.has(fieldName) &&
+              (!this.trigger?.options ||
+                this.trigger.options[fieldName] === undefined))}
+            .hass=${this.hass}
+            .selector=${selector}
+            .key=${fieldName}
+            @value-changed=${this._dataChanged}
+            .value=${this.trigger?.options
+              ? this.trigger.options[fieldName]
+              : undefined}
+            .placeholder=${dataField.default}
+            .localizeValue=${this._localizeValueCallback}
+          ></ha-selector>
+        </ha-settings-row>`
+      : "";
+  };
+
+  private _dataChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (ev.detail.isValid === false) {
+      // Don't clear an object selector that returns invalid YAML
+      return;
+    }
+    const key = (ev.currentTarget as any).key;
+    const value = ev.detail.value;
+    if (
+      this.trigger?.options?.[key] === value ||
+      ((!this.trigger?.options || !(key in this.trigger.options)) &&
+        (value === "" || value === undefined))
+    ) {
+      return;
+    }
+
+    const options = { ...this.trigger?.options, [key]: value };
+
+    if (
+      value === "" ||
+      value === undefined ||
+      (typeof value === "object" && !Object.keys(value).length)
+    ) {
+      delete options[key];
+    }
+
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        options,
+      },
+    });
+  }
+
+  private _targetChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        target: ev.detail.value,
+      },
+    });
+  }
+
+  private _checkboxChanged(ev) {
+    const checked = ev.currentTarget.checked;
+    const key = ev.currentTarget.key;
+    let options;
+
+    if (checked) {
+      this._checkedKeys.add(key);
+      const field =
+        this.description &&
+        Object.entries(this.description).find(([k, _value]) => k === key)?.[1];
+      let defaultValue = field?.default;
+
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "constant" in field.selector
+      ) {
+        defaultValue = field.selector.constant?.value;
+      }
+
+      if (
+        defaultValue == null &&
+        field?.selector &&
+        "boolean" in field.selector
+      ) {
+        defaultValue = false;
+      }
+
+      if (defaultValue != null) {
+        options = {
+          ...this.trigger?.options,
+          [key]: defaultValue,
+        };
+      }
+    } else {
+      this._checkedKeys.delete(key);
+      options = { ...this.trigger?.options };
+      delete options[key];
+    }
+    if (options) {
+      fireEvent(this, "value-changed", {
+        value: {
+          ...this.trigger,
+          options,
+        },
+      });
+    }
+    this.requestUpdate("_checkedKeys");
+  }
+
+  private _localizeValueCallback = (key: string) => {
+    if (!this.trigger?.trigger) {
+      return "";
+    }
+    return this.hass.localize(
+      `component.${computeDomain(this.trigger.trigger)}.selector.${key}`
+    );
+  };
+
+  private async _fetchManifest(integration: string) {
+    this._manifest = undefined;
+    try {
+      this._manifest = await fetchIntegrationManifest(this.hass, integration);
+    } catch (_err: any) {
+      // Ignore if loading manifest fails. Probably bad JSON in manifest
+    }
+  }
+
+  static styles = css`
+    ha-settings-row {
+      padding: var(--service-control-padding, 0 16px);
+    }
+    ha-settings-row[narrow] {
+      padding-bottom: 8px;
+    }
+    ha-settings-row {
+      --settings-row-content-width: 100%;
+      --settings-row-prefix-display: contents;
+      border-top: var(
+        --service-control-items-border-top,
+        1px solid var(--divider-color)
+      );
+    }
+    ha-service-picker,
+    ha-entity-picker,
+    ha-yaml-editor {
+      display: block;
+      margin: var(--service-control-padding, 0 16px);
+    }
+    ha-yaml-editor {
+      padding: 16px 0;
+    }
+    p {
+      margin: var(--service-control-padding, 0 16px);
+      padding: 16px 0;
+    }
+    :host([hide-picker]) p {
+      padding-top: 0;
+    }
+    .checkbox-spacer {
+      width: 32px;
+    }
+    ha-checkbox {
+      margin-left: -16px;
+      margin-inline-start: -16px;
+      margin-inline-end: initial;
+    }
+    .help-icon {
+      color: var(--secondary-text-color);
+    }
+    .description {
+      justify-content: space-between;
+      display: flex;
+      align-items: center;
+      padding-right: 2px;
+      padding-inline-end: 2px;
+      padding-inline-start: initial;
+    }
+    .description p {
+      direction: ltr;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trigger-platform": HaPlatformTrigger;
+  }
+}

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

@@ -1,11 +1,10 @@
-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,
@@ -28,35 +27,32 @@ 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-button-menu";
+import "../../components/ha-spinner";
 import "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
-import "../../components/ha-icon-button-arrow-prev";
+import "../../components/ha-button-menu";
 import "../../components/ha-list-item";
+import "../../components/ha-icon-button-arrow-prev";
 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,
-  convertStatisticsToHistory,
-  mergeHistoryResults,
   subscribeHistory,
+  mergeHistoryResults,
+  convertStatisticsToHistory,
 } 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 SubscribeMixin(LitElement) {
+class HaPanelHistory extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
   @property({ reflect: true, type: Boolean }) public narrow = false;
@@ -93,11 +89,6 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
   private _interval?: number;
 
-  private _labelsContext = new ContextProvider(this, {
-    context: labelsContext,
-    initialValue: [],
-  });
-
   public constructor() {
     super();
 
@@ -117,14 +108,6 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
     }
   }
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeLabelRegistry(this.hass.connection!, (labels) => {
-        this._labelsContext.setValue(labels);
-      }),
-    ];
-  }
-
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._unsubscribeHistory();
@@ -199,7 +182,6 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
               .disabled=${this._isLoading}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
           ${this._isLoading
@@ -667,10 +649,6 @@ class HaPanelHistory extends SubscribeMixin(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,15 +1,9 @@
-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 {
@@ -22,21 +16,20 @@ 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-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 "../../components/ha-target-picker";
 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 SubscribeMixin(LitElement) {
+export class HaPanelLogbook extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
@@ -58,11 +51,6 @@ export class HaPanelLogbook extends SubscribeMixin(LitElement) {
 
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
-  private _labelsContext = new ContextProvider(this, {
-    context: labelsContext,
-    initialValue: [],
-  });
-
   public constructor() {
     super();
 
@@ -75,14 +63,6 @@ export class HaPanelLogbook extends SubscribeMixin(LitElement) {
     this._time = { range: [start, end] };
   }
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeLabelRegistry(this.hass.connection!, (labels) => {
-        this._labelsContext.setValue(labels);
-      }),
-    ];
-  }
-
   private _goBack(): void {
     goBack();
   }
@@ -128,7 +108,6 @@ export class HaPanelLogbook extends SubscribeMixin(LitElement) {
               .value=${this._targetPickerValue}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
 
@@ -384,10 +363,6 @@ export class HaPanelLogbook extends SubscribeMixin(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,14 +3,16 @@ 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 } from "../../../components/entity/ha-entity-picker";
+import type {
+  HaEntityPicker,
+  HaEntityPickerEntityFilterFunc,
+} 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.entity.entity-picker.choose_entity"
+            "ui.components.target-picker.add_entity_id"
           )}
           .searchLabel=${this.hass.localize(
-            "ui.components.entity.entity-picker.choose_entity"
+            "ui.components.target-picker.add_entity_id"
           )}
           @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

@@ -0,0 +1,67 @@
+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,13 +52,6 @@ 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-lg);
+    --wa-border-width-l: var(--ha-border-radius-l);
     --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 { css, html, LitElement } from "lit";
+import { 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,6 +10,7 @@ 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")
@@ -137,41 +138,7 @@ export class HaStateControlCoverToggle extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 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, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,7 @@ 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")
@@ -128,42 +129,7 @@ export class HaStateControlToggle extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { 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,6 +12,10 @@ 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 {
@@ -145,56 +149,7 @@ export class HaStateControlLockToggle extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  static styles = [stateControlToggleStyle, stateControlPulseStyle];
 }
 
 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 { css, html, LitElement } from "lit";
+import { 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,6 +10,7 @@ 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")
@@ -137,42 +138,7 @@ export class HaStateControlValveToggle extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 declare global {

src/translations/en.json

@@ -647,7 +647,6 @@
       },
       "entity": {
         "entity-picker": {
-          "choose_entity": "Choose entity",
           "entity": "Entity",
           "edit": "Edit",
           "clear": "Clear",
@@ -672,36 +671,16 @@
         "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",
-        "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"
-        }
+        "add_area_id": "Choose area",
+        "add_device_id": "Choose device",
+        "add_entity_id": "Choose entity",
+        "add_label_id": "Choose label"
       },
       "subpage-data-table": {
         "filters": "Filters",

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

@@ -1,5 +1,6 @@
-import { describe, expect, it } from "vitest";
+import { describe, it, expect } 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", () => {
@@ -8,7 +9,14 @@ describe("getAreaContext", () => {
       area_id: "area_1",
     });
 
-    const result = getAreaContext(area, {});
+    const hass = {
+      areas: {
+        area_1: area,
+      },
+      floors: {},
+    } as unknown as HomeAssistant;
+
+    const result = getAreaContext(area, hass);
 
     expect(result).toEqual({
       area,
@@ -26,9 +34,16 @@ describe("getAreaContext", () => {
       floor_id: "floor_1",
     });
 
-    const result = getAreaContext(area, {
-      floor_1: floor,
-    });
+    const hass = {
+      areas: {
+        area_2: area,
+      },
+      floors: {
+        floor_1: floor,
+      },
+    } as unknown as HomeAssistant;
+
+    const result = getAreaContext(area, hass);
 
     expect(result).toEqual({
       area,

yarn.lock

@@ -5080,131 +5080,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/a11y-base@npm:24.9.1"
+"@vaadin/a11y-base@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/a11y-base@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/f8789d0ff11f2c3aa3e8b5bcf4f1af32af1dcd7eb671c2fb4cae63331840c6a79f070bc637e6762f8bbd15ec0d6e4d9cb378507fb2a78cc7f876934914c4ea32
+  checksum: 10/3e49b03daf1a1f16c4592364d8ddd0be574589779302f6cca10a242aab8a6052d69475eb60c77473267539ec2f741acd4a3794cd24aee5fa424dacfa3871668b
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/combo-box@npm:24.9.1"
+"@vaadin/combo-box@npm:24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/combo-box@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@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"
+    "@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"
     lit: "npm:^3.0.0"
-  checksum: 10/422fd0d2e47678e759526097d128aba13f2e70147631baf43a0328cadb95c1bdc4ce0ab459a5a8710882568194ff79e3c0d73c3c4ebf3ffcac72a43dfbfe6ade
+  checksum: 10/6931a185b4bf3854fae224e79eafc97b46fd0078f1757f458e5b5ddbc91b6dcbb80cdc27d8c4e7e20a75bb95e32da867f285a7c116eed23282bc9662b5b841f3
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/component-base@npm:24.9.1"
+"@vaadin/component-base@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/component-base@npm:24.9.2"
   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/5cb4870a0e0581bbb275c0addb144e0a3823fe4d86826d8fa2bff5c61105a5b6a34d7f65d13686a3b5f6e9e585105caa5b45716b9574ae7a0f323c1a6aa79535
+  checksum: 10/782c8186a69ae51ac0e07af643a5d0cdfa9d281a3bda25ed8df0f3bd24210489e5f8fb60a5aec7e242d6d986fc16d54343dbc3725fc022da8890c9734f10e561
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/field-base@npm:24.9.1"
+"@vaadin/field-base@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/field-base@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.1"
-    "@vaadin/component-base": "npm:~24.9.1"
+    "@vaadin/a11y-base": "npm:~24.9.2"
+    "@vaadin/component-base": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/47440fa611ad1bab1f996a6e1471959d156d9bed88f0671ffb07f32d9fee0fea267c71c6f35fe207dba919bddf43488552a0bdf5cbe64387a00256f22b4f1948
+  checksum: 10/456670e9fa69374e53cc3bd69a2a7bccfc447eec40756db1a3b6ea2ee2af39c529e0ae77d2b7977f65d26bcd323d448f9788794b67cb3e20027988e63c3a3d77
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/icon@npm:24.9.1"
+"@vaadin/icon@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/icon@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.1"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
+    "@vaadin/component-base": "npm:~24.9.2"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.9.2"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
     lit: "npm:^3.0.0"
-  checksum: 10/0574f83fe14d5ffc5c8cf40a5fb38b80373d3ec590bedd1046800cda70f3d5d9337e4f062cdd2c79f917f71b6a71e850c4127da2cb8f7b863f0dd86a7e8d851b
+  checksum: 10/86581231e2d46292152e7010852276a870700fdd5f0cce3ab234fcd5fa57827120163e0c9f6e34f436b5d43b20c741e6b51a40f9f2148cc77087f1b15d17e016
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/input-container@npm:24.9.1"
+"@vaadin/input-container@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/input-container@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@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"
+    "@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"
     lit: "npm:^3.0.0"
-  checksum: 10/f8e2420fd3c0187eb2d1b96a53685e6ac053ce390ab5ab0c9cb9a7be42c66fe500828c0b0e3ef270ba3802b5c6dc667646906d8db3a7a8a0bef4b24decf1ffc7
+  checksum: 10/fd8ff7458dddd01cf7d2bb4cf6a969473ccad4dec6292897698aa3a51db3b74e30e1ae4077aa092e324041734f4829febf9f81345ee6b142138cfe4436a8a0ba
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/item@npm:24.9.1"
+"@vaadin/item@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/item@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@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"
+    "@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"
     lit: "npm:^3.0.0"
-  checksum: 10/2f7c1cdeedd38aa80a8a8756690ca4d73415d801a37156d0f6e78e7dbebf470f3db090c7a7511e6f47d0ff6189447d4a452285622a8edd9364ab5cd5477649ab
+  checksum: 10/1173fa0b147acfe66cb817ce518e8d7b2a4189e3386c98e8eebee7c15767d51b35d2b60a7d0ab165431dbe09061a492da96414755c936621e68cddaefa5c9301
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/lit-renderer@npm:24.9.1"
+"@vaadin/lit-renderer@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/lit-renderer@npm:24.9.2"
   dependencies:
     lit: "npm:^3.0.0"
-  checksum: 10/bdaaa2354352155e8b500e6c207881ec73be66acdccd98346375b1139d97d3acaec3b908e61db6cbde78b9f0b0aa94921144e3090d6bfaa5bb39961923b6f7db
+  checksum: 10/a33d22a26ae4d66c371e620a19da67ee1aab2cdb75dbcbf5dd4dc885368b9fc90a7063112dba7b58eee8cf3d7b69a6640941aa50106db1a287eca5c8188bbf76
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/overlay@npm:24.9.1"
+"@vaadin/overlay@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/overlay@npm:24.9.2"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     "@polymer/polymer": "npm:^3.0.0"
-    "@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"
+    "@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"
     lit: "npm:^3.0.0"
-  checksum: 10/3d84412fe98c43b8e9487a5426f72dbc09fcad964d9f792bc7daab944776f106dfc27b0242642effb77e45a3314eccf646c3cd0cfc1852646f69fe1eab5bca32
+  checksum: 10/48d52a1038c3ee033d56a819cd67da171b2f640bdfdbc1d1bb9091401a0a661f817862587efa0a5eda0ad5119ed0014edb1fd9f96b31b0724399c935d33133c0
   languageName: node
   linkType: hard
 
@@ -5215,37 +5215,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.1"
+"@vaadin/vaadin-lumo-styles@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
-    "@vaadin/icon": "npm:~24.9.1"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
-  checksum: 10/6318b68ccee1ca3527d6aa503d3a57d5a9920a00b459057fa7a98336d071a63e905dfd1e29c965f740c7b409ea5a9cc5bd99f769633803b3d485f765741e43ee
+    "@vaadin/component-base": "npm:~24.9.2"
+    "@vaadin/icon": "npm:~24.9.2"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+  checksum: 10/ea0f008ccc4cabe1ae40f5fb78fb59b0b0d6996694ba054df1b634296563f75abeb0c1cbcde5adac8cc9e455e341f2b8fe13b132aa393e5a94804f1b4e6c8c43
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~24.9.1":
-  version: 24.9.1
-  resolution: "@vaadin/vaadin-material-styles@npm:24.9.1"
+"@vaadin/vaadin-material-styles@npm:~24.9.2":
+  version: 24.9.2
+  resolution: "@vaadin/vaadin-material-styles@npm:24.9.2"
   dependencies:
     "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.1"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.1"
-  checksum: 10/e3cb4a5de4d28bcd43b82a94d25880af5b22116f15b0f711d5b66aaaf5116e144fe6f05143fee9e65ecc6d6ea8a3b734864667c20135e3047e79c3aab9a03f00
+    "@vaadin/component-base": "npm:~24.9.2"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.9.2"
+  checksum: 10/bbe07aa29a8e9ea36f62cf1e17c497e38207850743be450d05976febb5b9d751766abf1a56d116410c09e91e6b390164f7fdb47714fac981c323cc75d00fa084
   languageName: node
   linkType: hard
 
-"@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"
+"@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"
   dependencies:
     "@open-wc/dedupe-mixin": "npm:^1.3.0"
     lit: "npm:^3.0.0"
     style-observer: "npm:^0.0.8"
-  checksum: 10/90139de617724f01b116a52388319d9e9d752215b98bf5a7ee10eebf4b0d21583c1ac8a238a921bfe83665c3becd5586d322a4d463cdf3e9bfa493331c68a604
+  checksum: 10/80e06db3dc145ea28c43b58829eb298524dd44732e419ebd99e562053a7b7bcb4dec121e12bcba96610b63b328250dc4b09776d9d2dae94b3cca7f0414d5590c
   languageName: node
   linkType: hard
 
@@ -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.1"
-    "@vaadin/vaadin-themable-mixin": "npm:24.9.1"
+    "@vaadin/combo-box": "npm:24.9.2"
+    "@vaadin/vaadin-themable-mixin": "npm:24.9.2"
     "@vibrant/color": "npm:4.0.0"
     "@vitest/coverage-v8": "npm:3.2.4"
     "@vue/web-component-wrapper": "npm:1.3.0"