update translation

src/common/dom/is-navigation-click.ts

@@ -31,10 +31,10 @@ export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
 
   const location = window.location;
   const origin = location.origin || location.protocol + "//" + location.host;
-  if (!href.startsWith(origin)) {
+  if (href.indexOf(origin) !== 0) {
     return undefined;
   }
-  href = href.slice(origin.length);
+  href = href.substr(origin.length);
 
   if (href === "#") {
     return undefined;

src/common/entity/compute_object_id.ts

@@ -1,3 +1,3 @@
 /** Compute the object ID of a state. */
 export const computeObjectId = (entityId: string): string =>
-  entityId.slice(entityId.indexOf(".") + 1);
+  entityId.substr(entityId.indexOf(".") + 1);

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/common/util/parse-aspect-ratio.ts

@@ -14,7 +14,7 @@ export default function parseAspectRatio(input: string) {
   }
   try {
     if (input.endsWith("%")) {
-      return { w: 100, h: parseOrThrow(input.slice(0, -1)) };
+      return { w: 100, h: parseOrThrow(input.substr(0, input.length - 1)) };
     }
 
     const arr = input.replace(":", "x").split("x");

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/entity/ha-statistic-picker.ts

@@ -20,7 +20,6 @@ import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-icon-button";
-import "../ha-input-helper-text";
 import type {
   PickerComboBoxItem,
   PickerComboBoxSearchFn,
@@ -465,6 +464,7 @@ export class HaStatisticPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
+        .helper=${this.helper}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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-hls-player.ts

@@ -321,7 +321,7 @@ class HaHLSPlayer extends LitElement {
               } else if (data.response.code >= 400) {
                 error += " (Stream never started)";
               } else {
-                error += ` (${data.response.code})`;
+                error += " (" + data.response.code + ")";
               }
             }
             this._setRetryableError(error);

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/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/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/energy.ts

@@ -102,6 +102,7 @@ export type EnergySolarForecasts = Record<string, EnergySolarForecast>;
 export interface DeviceConsumptionEnergyPreference {
   // This is an ever increasing value
   stat_consumption: string;
+  stat_power?: string;
   name?: string;
   included_in_stat?: string;
 }
@@ -109,6 +110,8 @@ export interface DeviceConsumptionEnergyPreference {
 export interface FlowFromGridSourceEnergyPreference {
   // kWh meter
   stat_energy_from: string;
+  // W meter
+  stat_power_from?: string;
 
   // $ meter
   stat_cost: string | null;
@@ -121,6 +124,8 @@ export interface FlowFromGridSourceEnergyPreference {
 export interface FlowToGridSourceEnergyPreference {
   // kWh meter
   stat_energy_to: string;
+  // W meter
+  stat_power_to?: string;
 
   // $ meter
   stat_compensation: string | null;
@@ -143,6 +148,7 @@ export interface SolarSourceTypeEnergyPreference {
   type: "solar";
 
   stat_energy_from: string;
+  stat_power_from?: string;
   config_entry_solar_forecast: string[] | null;
 }
 
@@ -150,6 +156,8 @@ export interface BatterySourceTypeEnergyPreference {
   type: "battery";
   stat_energy_from: string;
   stat_energy_to: string;
+  stat_power_from?: string;
+  stat_power_to?: string;
 }
 export interface GasSourceTypeEnergyPreference {
   type: "gas";

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/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/dialogs/more-info/ha-more-info-settings.ts

@@ -70,7 +70,9 @@ export class HaMoreInfoSettings extends LitElement {
     if (!this.entry) {
       return;
     }
-    if (!(this.entry.platform in PLATFORMS_WITH_SETTINGS_TAB)) {
+    if (
+      !Object.keys(PLATFORMS_WITH_SETTINGS_TAB).includes(this.entry.platform)
+    ) {
       this._settingsElementTag = "entity-registry-settings";
       return;
     }

src/fake_data/provide_hass.ts

@@ -167,7 +167,7 @@ export const provideHass = (
   }
 
   mockAPI(/states\/.+/, (_method, path, parameters) => {
-    const [domain, objectId] = path.slice(7).split(".", 2);
+    const [domain, objectId] = path.substr(7).split(".", 2);
     if (!domain || !objectId) {
       return;
     }

src/onboarding/onboarding-restore-backup.ts

@@ -209,7 +209,9 @@ class OnboardingRestoreBackup extends LitElement {
       }
 
       if (this._cloudStatus?.logged_in && !this._backupId) {
-        this._backup = backups.find(({ agents }) => CLOUD_AGENT in agents);
+        this._backup = backups.find(({ agents }) =>
+          Object.keys(agents).includes(CLOUD_AGENT)
+        );
 
         if (!this._backup) {
           this._view = "empty_cloud";

src/panels/config/blueprint/ha-config-blueprint.ts

@@ -68,7 +68,7 @@ class HaConfigBlueprint extends HassRouterPage {
       (!changedProps || changedProps.has("route")) &&
       this._currentPage === "edit"
     ) {
-      const blueprintId = this.routeTail.path.slice(1);
+      const blueprintId = this.routeTail.path.substr(1);
       pageEl.blueprintId = blueprintId === "new" ? null : blueprintId;
     }
   }

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -18,6 +18,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-battery-settings")
 export class DialogEnergyBatterySettings
@@ -32,10 +33,14 @@ export class DialogEnergyBatterySettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   public async showDialog(
     params: EnergySettingsBatteryDialogParams
   ): Promise<void> {
@@ -46,6 +51,9 @@ export class DialogEnergyBatterySettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     const allSources: string[] = [];
     this._params.battery_sources.forEach((entry) => {
       allSources.push(entry.stat_energy_from);
@@ -56,6 +64,16 @@ export class DialogEnergyBatterySettings
         id !== this._source?.stat_energy_from &&
         id !== this._source?.stat_energy_to
     );
+    const allPowerSources: string[] = [];
+    this._params.battery_sources.forEach((entry) => {
+      if (entry.stat_power_from) allPowerSources.push(entry.stat_power_from);
+      if (entry.stat_power_to) allPowerSources.push(entry.stat_power_to);
+    });
+    this._excludeListPower = allPowerSources.filter(
+      (id) =>
+        id !== this._source?.stat_power_from &&
+        id !== this._source?.stat_power_to
+    );
   }
 
   public closeDialog() {
@@ -72,8 +90,6 @@ export class DialogEnergyBatterySettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -85,12 +101,6 @@ export class DialogEnergyBatterySettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -105,6 +115,10 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_from,
           ]}
           @value-changed=${this._statisticToChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -121,6 +135,40 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_to,
           ]}
           @value-changed=${this._statisticFromChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power_to}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.power_into_battery"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerToChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power_from}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.power_out_of_battery"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerFromChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
         ></ha-statistic-picker>
 
         <ha-button
@@ -150,6 +198,14 @@ export class DialogEnergyBatterySettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
+  private _powerToChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = { ...this._source!, stat_power_to: ev.detail.value };
+  }
+
+  private _powerFromChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = { ...this._source!, stat_power_from: ev.detail.value };
+  }
+
   private async _save() {
     try {
       await this._params!.saveCallback(this._source!);
@@ -168,7 +224,11 @@ export class DialogEnergyBatterySettings
           --mdc-dialog-max-width: 430px;
         }
         ha-statistic-picker {
-          width: 100%;
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
+        ha-statistic-picker:last-of-type {
+          margin-bottom: 0;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -21,6 +21,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsDeviceDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-device-settings")
 export class DialogEnergyDeviceSettings
@@ -35,10 +36,14 @@ export class DialogEnergyDeviceSettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
 
   public async showDialog(
@@ -50,9 +55,15 @@ export class DialogEnergyDeviceSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     this._excludeList = this._params.device_consumptions
       .map((entry) => entry.stat_consumption)
       .filter((id) => id !== this._device?.stat_consumption);
+    this._excludeListPower = this._params.device_consumptions
+      .map((entry) => entry.stat_power)
+      .filter((id) => id && id !== this._device?.stat_power) as string[];
   }
 
   private _computePossibleParents() {
@@ -93,8 +104,6 @@ export class DialogEnergyDeviceSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -108,12 +117,6 @@ export class DialogEnergyDeviceSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -125,9 +128,28 @@ export class DialogEnergyDeviceSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._device?.stat_power}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power_helper",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
         <ha-textfield
           .label=${this.hass.localize(
             "ui.panel.config.energy.device_consumption.dialog.display_name"
@@ -210,6 +232,20 @@ export class DialogEnergyDeviceSettings
     this._computePossibleParents();
   }
 
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (!this._device) {
+      return;
+    }
+    const newDevice = {
+      ...this._device,
+      stat_power: ev.detail.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.stat_power) {
+      delete newDevice.stat_power;
+    }
+    this._device = newDevice;
+  }
+
   private _nameChanged(ev) {
     const newDevice = {
       ...this._device!,
@@ -245,15 +281,19 @@ export class DialogEnergyDeviceSettings
     return [
       haStyleDialog,
       css`
+        ha-statistic-picker {
+          display: block;
+          margin-bottom: var(--ha-space-2);
+        }
         ha-statistic-picker {
           width: 100%;
         }
         ha-select {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
           width: 100%;
         }
         ha-textfield {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
           width: 100%;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -31,6 +31,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsGridFlowDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-grid-flow-settings")
 export class DialogEnergyGridFlowSettings
@@ -51,10 +52,14 @@ export class DialogEnergyGridFlowSettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   public async showDialog(
     params: EnergySettingsGridFlowDialogParams
   ): Promise<void> {
@@ -80,6 +85,10 @@ export class DialogEnergyGridFlowSettings
           ? "stat_energy_from"
           : "stat_energy_to"
       ];
+    const initialSourceIdPower =
+      this._source[
+        this._params.direction === "from" ? "stat_power_from" : "stat_power_to"
+      ];
 
     this._pickedDisplayUnit = getDisplayUnit(
       this.hass,
@@ -89,6 +98,9 @@ export class DialogEnergyGridFlowSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
 
     this._excludeList = [
       ...(this._params.grid_source?.flow_from?.map(
@@ -98,6 +110,15 @@ export class DialogEnergyGridFlowSettings
         (entry) => entry.stat_energy_to
       ) || []),
     ].filter((id) => id !== initialSourceId);
+
+    this._excludeListPower = [
+      ...(this._params.grid_source?.flow_from?.map(
+        (entry) => entry.stat_power_from
+      ) || []),
+      ...(this._params.grid_source?.flow_to?.map(
+        (entry) => entry.stat_power_to
+      ) || []),
+    ].filter((id) => id && id !== initialSourceIdPower) as string[];
   }
 
   public closeDialog() {
@@ -115,8 +136,6 @@ export class DialogEnergyGridFlowSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     const unitPriceSensor = this._pickedDisplayUnit
       ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
       : undefined;
@@ -150,19 +169,11 @@ export class DialogEnergyGridFlowSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          <p>
-            ${this.hass.localize(
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-            )}
-          </p>
-          <p>
-            ${this.hass.localize(
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-              { unit: pickableUnit }
-            )}
-          </p>
-        </div>
+        <p>
+          ${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+          )}
+        </p>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -178,6 +189,30 @@ export class DialogEnergyGridFlowSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
+          dialogInitialFocus
+        ></ha-statistic-picker>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source[
+            this._params.direction === "from"
+              ? "stat_power_from"
+              : "stat_power_to"
+          ]}
+          .label=${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.power_stat`
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+            { unit: this._power_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -340,6 +375,15 @@ export class DialogEnergyGridFlowSettings
     };
   }
 
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = {
+      ...this._source!,
+      [this._params!.direction === "from"
+        ? "stat_power_from"
+        : "stat_power_to"]: ev.detail.value,
+    };
+  }
+
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
     if (ev.detail.value) {
       const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
@@ -380,6 +424,10 @@ export class DialogEnergyGridFlowSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
+        ha-statistic-picker {
+          display: block;
+          margin: var(--ha-space-4) 0;
+        }
         ha-formfield {
           display: block;
         }

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -28,6 +28,7 @@ import { brandsUrl } from "../../../../util/brands-url";
 import type { EnergySettingsSolarDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-solar-settings")
 export class DialogEnergySolarSettings
@@ -46,10 +47,14 @@ export class DialogEnergySolarSettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   public async showDialog(
     params: EnergySettingsSolarDialogParams
   ): Promise<void> {
@@ -62,9 +67,15 @@ export class DialogEnergySolarSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     this._excludeList = this._params.solar_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
+    this._excludeListPower = this._params.solar_sources
+      .map((entry) => entry.stat_power_from)
+      .filter((id) => id && id !== this._source?.stat_power_from) as string[];
   }
 
   public closeDialog() {
@@ -81,8 +92,6 @@ export class DialogEnergySolarSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -94,12 +103,6 @@ export class DialogEnergySolarSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -111,9 +114,28 @@ export class DialogEnergySolarSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power_from}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.solar_production_power"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
         <h3>
           ${this.hass.localize(
             "ui.panel.config.energy.solar.dialog.solar_production_forecast"
@@ -267,6 +289,10 @@ export class DialogEnergySolarSettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = { ...this._source!, stat_power_from: ev.detail.value };
+  }
+
   private async _save() {
     try {
       if (!this._forecast) {
@@ -287,6 +313,10 @@ export class DialogEnergySolarSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
+        ha-statistic-picker {
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
         img {
           height: 24px;
           margin-right: 16px;

src/panels/config/integrations/ha-config-integration-page.ts

@@ -442,7 +442,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     : nothing}
                   ${this._manifest?.is_built_in &&
                   this._manifest.quality_scale &&
-                  this._manifest.quality_scale in QUALITY_SCALE_MAP
+                  Object.keys(QUALITY_SCALE_MAP).includes(
+                    this._manifest.quality_scale
+                  )
                     ? html`
                         <div class="integration-info">
                           <a

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -70,7 +70,7 @@ export class ZHAClusterCommands extends LitElement {
             ${this._commands.map(
               (entry) => html`
                 <ha-list-item .value=${String(entry.id)}>
-                  ${entry.name} (id: ${formatAsPaddedHex(entry.id)})
+                  ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"}
                 </ha-list-item>
               `
             )}

src/panels/config/scene/ha-config-scene.ts

@@ -74,7 +74,7 @@ class HaConfigScene extends HassRouterPage {
       this._currentPage === "edit"
     ) {
       pageEl.creatingNew = undefined;
-      const sceneId = this.routeTail.path.slice(1);
+      const sceneId = this.routeTail.path.substr(1);
       pageEl.sceneId = sceneId === "new" ? null : sceneId;
     }
   }

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

@@ -98,7 +98,7 @@ class HaConfigScript extends HassRouterPage {
       this._currentPage === "show"
     ) {
       pageEl.creatingNew = undefined;
-      const scriptId = this.routeTail.path.slice(1);
+      const scriptId = this.routeTail.path.substr(1);
       pageEl.entityId = scriptId === "new" ? null : scriptId;
       return;
     }
@@ -108,7 +108,7 @@ class HaConfigScript extends HassRouterPage {
       this._currentPage !== "dashboard"
     ) {
       pageEl.creatingNew = undefined;
-      const scriptId = this.routeTail.path.slice(1);
+      const scriptId = this.routeTail.path.substr(1);
       pageEl.scriptId = scriptId === "new" ? null : scriptId;
     }
   }

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/badge-editor/hui-dialog-create-badge.ts

@@ -222,9 +222,9 @@ export class HuiCreateDialogBadge
   private _handleBadgePicked(ev) {
     const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length) {
-      if ("entities" in config) {
+      if (Object.keys(config).includes("entities")) {
         config.entities = this._params!.entities;
-      } else if ("entity" in config) {
+      } else if (Object.keys(config).includes("entity")) {
         config.entity = this._params!.entities[0];
       }
     }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -244,9 +244,9 @@ export class HuiCreateDialogCard
   private _handleCardPicked(ev) {
     const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length) {
-      if ("entities" in config) {
+      if (Object.keys(config).includes("entities")) {
         config.entities = this._params!.entities;
-      } else if ("entity" in config) {
+      } else if (Object.keys(config).includes("entity")) {
         config.entity = this._params!.entities[0];
       }
     }

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/panels/lovelace/editor/config-elements/hui-statistic-card-editor.ts

@@ -129,7 +129,8 @@ export class HuiStatisticCardEditor
           name: "period",
           required: true,
           selector:
-            selectedPeriodKey && selectedPeriodKey in periods
+            selectedPeriodKey &&
+            Object.keys(periods).includes(selectedPeriodKey)
               ? {
                   select: {
                     multiple: false,

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/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",
@@ -3052,6 +3031,7 @@
                 "paragraph": "Grid consumption is the energy that flows from the energy grid to your home.",
                 "entity_para": "Pick a sensor which measures grid consumption in either of {unit}.",
                 "energy_stat": "Consumed energy",
+                "power_stat": "Current power consumption",
                 "cost_para": "Select how Home Assistant should keep track of the costs of the consumed energy.",
                 "no_cost": "Do not track costs",
                 "cost_stat": "Use an entity tracking the total costs",
@@ -3066,6 +3046,7 @@
                 "paragraph": "Grid production is the energy that flows from your solar panels to the grid.",
                 "entity_para": "Pick a sensor which measures grid production in either of {unit}.",
                 "energy_stat": "Energy returned to the grid",
+                "power_stat": "Current power returned to the grid",
                 "cost_para": "Do you get money back when you return energy to the grid?",
                 "no_cost": "I do not get money back",
                 "cost_stat": "Use an entity tracking the total received money",
@@ -3092,6 +3073,7 @@
               "header": "Configure solar panels",
               "entity_para": "Pick a sensor which measures solar energy production in either of {unit}.",
               "solar_production_energy": "Solar production energy",
+              "solar_production_power": "Solar production power",
               "solar_production_forecast": "Solar production forecast",
               "solar_production_forecast_description": "Adding solar production forecast information will allow you to quickly see your expected production for today.",
               "dont_forecast_production": "Don't forecast production",
@@ -3110,8 +3092,10 @@
             "dialog": {
               "header": "Configure battery system",
               "entity_para": "Pick sensors which measure energy going into and coming out of the battery in either of {unit}.",
-              "energy_into_battery": "Energy going into the battery",
-              "energy_out_of_battery": "Energy coming out of the battery"
+              "energy_into_battery": "Energy charged into the battery",
+              "energy_out_of_battery": "Energy discharged from the battery",
+              "power_into_battery": "Power charging the battery",
+              "power_out_of_battery": "Power discharging the battery"
             }
           },
           "gas": {
@@ -3173,10 +3157,12 @@
               "header": "Add a device",
               "display_name": "Display name",
               "device_consumption_energy": "Device energy consumption",
-              "selected_stat_intro": "Select the energy sensor that measures the device's energy usage in either of {unit}.",
+              "device_consumption_power": "Device power consumption",
+              "selected_stat_intro": "Select the sensor that measures the device's energy usage in either of {unit}.",
               "included_in_device": "Upstream device",
               "included_in_device_helper": "If this device is already counted by another device (such as a smart switch measured by a smart breaker), selecting the upstream device prevents duplicate energy tracking.",
-              "no_upstream_devices": "No eligible upstream devices"
+              "no_upstream_devices": "No eligible upstream devices",
+              "device_consumption_power_helper": "Select the sensor that measures the device's power usage in either of {unit}."
             }
           }
         },

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,