Simplify

Bumps [softprops/action-gh-release](https://github.com/softprops/action-gh-release) from 2.3.4 to 2.4.1.
- [Release notes](https://github.com/softprops/action-gh-release/releases)
- [Changelog](https://github.com/softprops/action-gh-release/blob/master/CHANGELOG.md)
- [Commits](62c96d0c4e...6da8fa9354)

---
updated-dependencies:
- dependency-name: softprops/action-gh-release
  dependency-version: 2.4.1
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/codeql-analysis.yml

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

.github/workflows/release.yaml

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

package.json

@@ -34,18 +34,18 @@
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.4",
+    "@codemirror/view": "6.38.5",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.1",
-    "@formatjs/intl-displaynames": "6.8.12",
-    "@formatjs/intl-durationformat": "0.7.5",
+    "@formatjs/intl-datetimeformat": "6.18.2",
+    "@formatjs/intl-displaynames": "6.8.13",
+    "@formatjs/intl-durationformat": "0.7.6",
     "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.12",
-    "@formatjs/intl-locale": "4.2.12",
-    "@formatjs/intl-numberformat": "8.15.5",
-    "@formatjs/intl-pluralrules": "5.4.5",
-    "@formatjs/intl-relativetimeformat": "11.4.12",
+    "@formatjs/intl-listformat": "7.7.13",
+    "@formatjs/intl-locale": "4.2.13",
+    "@formatjs/intl-numberformat": "8.15.6",
+    "@formatjs/intl-pluralrules": "5.4.6",
+    "@formatjs/intl-relativetimeformat": "11.4.13",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
@@ -99,7 +99,7 @@
     "barcode-detector": "3.0.6",
     "color-name": "2.0.2",
     "comlink": "4.4.2",
-    "core-js": "3.45.1",
+    "core-js": "3.46.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
@@ -114,7 +114,7 @@
     "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.17",
+    "intl-messageformat": "10.7.18",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -122,7 +122,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.2",
-    "marked": "16.3.0",
+    "marked": "16.4.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -135,7 +135,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.5",
+    "ua-parser-js": "2.0.6",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -152,7 +152,7 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
-    "@bundle-stats/plugin-webpack-filter": "4.21.4",
+    "@bundle-stats/plugin-webpack-filter": "4.21.5",
     "@lokalise/node-api": "15.3.0",
     "@octokit/auth-oauth-device": "8.0.2",
     "@octokit/plugin-retry": "8.0.2",

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

@@ -0,0 +1,8 @@
+import xss from "xss";
+
+export const filterXSS = (html: string) =>
+  xss(html, {
+    whiteList: {},
+    stripIgnoreTag: true,
+    stripIgnoreTagBody: true,
+  });

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

@@ -27,6 +27,7 @@ import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
+import { filterXSS } from "../../common/util/xss";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";
 
@@ -811,7 +812,8 @@ export class HaChartBase extends LitElement {
           };
         }
       }
-      return { ...s, data };
+      const name = filterXSS(String(s.name ?? s.id ?? ""));
+      return { ...s, name, data };
     });
     return series as ECOption["series"];
   }

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

@@ -9,6 +9,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { HomeAssistant } from "../../types";
 import type { ECOption } from "../../resources/echarts";
 import { measureTextWidth } from "../../util/text";
+import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
@@ -92,12 +93,12 @@ export class HaSankeyChart extends LitElement {
       : data.value;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${node?.label ?? data.id}<br>${value}`;
+      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
     }
     if (data.source && data.target) {
       const source = this.data.nodes.find((n) => n.id === data.source);
       const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${source?.label ?? data.source} → ${target?.label ?? data.target}<br>${value}`;
+      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
     }
     return null;
   };

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;
@@ -93,8 +104,6 @@ export class HaDevicePicker extends LitElement {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
-
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
     this._loadConfigEntries();
@@ -108,18 +117,162 @@ export class HaDevicePicker extends LitElement {
   }
 
   private _getItems = () =>
-    this._getDevicesMemoized(
-      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,17 +1,15 @@
 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 { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
+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,
@@ -22,11 +20,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")
@@ -247,10 +255,8 @@ export class HaEntityPicker extends LitElement {
     }
   );
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
-
   private _getItems = () =>
-    this._getEntitiesMemoized(
+    this._getEntities(
       this.hass,
       this.includeDomains,
       this.excludeDomains,
@@ -258,10 +264,128 @@ 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(hass);
+
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass.states[entityId];
+
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+
+        const [entityName, deviceName, areaName] = computeEntityNameList(
+          stateObj,
+          [{ type: "entity" }, { type: "device" }, { type: "area" }],
+          hass.entities,
+          hass.devices,
+          hass.areas,
+          hass.floors
+        );
+
+        const domainName = domainToName(hass.localize, computeDomain(entityId));
+
+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
+      if (includeDeviceClasses) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
+        );
+      }
+
+      if (includeUnitOfMeasurement) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                item.stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
+      if (entityFilter) {
+        items = items.filter(
+          (item) =>
+            // We always want to include the entity of the current value
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
+        );
+      }
+
+      return items;
+    }
+  );
+
   protected render() {
     const placeholder =
       this.placeholder ??

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

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

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

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

@@ -1,5 +1,5 @@
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import { css, html, LitElement, type PropertyValues } from "lit";
+import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import { customElement, property, state } from "lit/decorators";
 
 export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
@@ -8,9 +8,6 @@ export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 export class HaBottomSheet extends LitElement {
   @property({ type: Boolean }) public open = false;
 
-  @property({ type: Boolean, reflect: true, attribute: "flexcontent" })
-  public flexContent = false;
-
   @state() private _drawerOpen = false;
 
   private _handleAfterHide() {
@@ -44,19 +41,16 @@ export class HaBottomSheet extends LitElement {
 
   static styles = css`
     wa-drawer {
-      --wa-color-surface-raised: transparent;
+      --wa-color-surface-raised: var(
+        --ha-bottom-sheet-surface-background,
+        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+      );
       --spacing: 0;
-      --size: var(--ha-bottom-sheet-height, auto);
+      --size: auto;
       --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
       --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
     }
     wa-drawer::part(dialog) {
-      max-height: var(--ha-bottom-sheet-max-height, 90vh);
-      align-items: center;
-    }
-    wa-drawer::part(body) {
-      max-width: var(--ha-bottom-sheet-max-width);
-      width: 100%;
       border-top-left-radius: var(
         --ha-bottom-sheet-border-radius,
         var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
@@ -65,19 +59,10 @@ export class HaBottomSheet extends LitElement {
         --ha-bottom-sheet-border-radius,
         var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
       );
-      background-color: var(
-        --ha-bottom-sheet-surface-background,
-        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
-      );
-      padding: var(
-        --ha-bottom-sheet-padding,
-        0 var(--safe-area-inset-right) var(--safe-area-inset-bottom)
-          var(--safe-area-inset-left)
-      );
-    }
-
-    :host([flexcontent]) wa-drawer::part(body) {
-      display: flex;
+      max-height: 90vh;
+      padding-bottom: var(--safe-area-inset-bottom);
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
     }
   `;
 }

src/components/ha-expansion-panel.ts

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

src/components/ha-generic-picker.ts

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

src/components/ha-label-picker.ts

@@ -5,10 +5,16 @@ import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
+import type {
+  DeviceEntityDisplayLookup,
+  DeviceRegistryEntry,
+} from "../data/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
 import type { LabelRegistryEntry } from "../data/label_registry";
 import {
   createLabelRegistryEntry,
-  getLabels,
   subscribeLabelRegistry,
 } from "../data/label_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -131,22 +137,201 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       }
   );
 
-  private _getLabelsMemoized = memoizeOne(getLabels);
+  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,
+          },
+        ];
+      }
 
-  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,
-        },
-      ];
+      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;
     }
+  );
 
-    return this._getLabelsMemoized(
-      this.hass,
+  private _getItems = () =>
+    this._getLabels(
       this._labels,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
@@ -154,7 +339,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.entityFilter,
       this.excludeLabels
     );
-  };
 
   private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
     if (!labels) {

src/components/ha-picture-upload.ts

@@ -39,6 +39,15 @@ export class HaPictureUpload extends LitElement {
   @property({ type: Boolean, attribute: "select-media" }) public selectMedia =
     false;
 
+  // This property is set when this component is used inside a media selector.
+  // When set, it returns selected media or uploaded files as MediaSelectorValue
+  // When unset, it only allows selecting images from image-upload, and returns
+  // selected or uploaded images as a string starting with /api/...
+  @property({ type: Boolean, attribute: "full-media" }) public fullMedia =
+    false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
   @property({ attribute: false }) public cropOptions?: CropOptions;
 
   @property({ type: Boolean }) public original = false;
@@ -164,12 +173,33 @@ export class HaPictureUpload extends LitElement {
     this._uploading = true;
     try {
       const media = await createImage(this.hass, file);
-      this.value = generateImageThumbnailUrl(
-        media.id,
-        this.size,
-        this.original
-      );
-      fireEvent(this, "change");
+      if (this.fullMedia) {
+        const item = {
+          media_content_id: `${MEDIA_PREFIX}/${media.id}`,
+          media_content_type: media.content_type,
+          title: media.name,
+          media_class: "image" as const,
+          can_play: true,
+          can_expand: false,
+          can_search: false,
+          thumbnail: generateImageThumbnailUrl(media.id, 256),
+        } as const;
+        const navigateIds = [
+          {},
+          { media_content_type: "app", media_content_id: MEDIA_PREFIX },
+        ];
+        fireEvent(this, "media-picked", {
+          item,
+          navigateIds,
+        });
+      } else {
+        this.value = generateImageThumbnailUrl(
+          media.id,
+          this.size,
+          this.original
+        );
+        fireEvent(this, "change");
+      }
     } catch (err: any) {
       showAlertDialog(this, {
         text: err.toString(),
@@ -183,15 +213,24 @@ export class HaPictureUpload extends LitElement {
     showMediaBrowserDialog(this, {
       action: "pick",
       entityId: "browser",
-      navigateIds: [
-        { media_content_id: undefined, media_content_type: undefined },
-        {
-          media_content_id: MEDIA_PREFIX,
-          media_content_type: "app",
-        },
-      ],
-      minimumNavigateLevel: 2,
+      accept: ["image/*"],
+      navigateIds: this.fullMedia
+        ? undefined
+        : [
+            { media_content_id: undefined, media_content_type: undefined },
+            {
+              media_content_id: MEDIA_PREFIX,
+              media_content_type: "app",
+            },
+          ],
+      minimumNavigateLevel: this.fullMedia ? undefined : 2,
+      hideContentType: true,
+      contentIdHelper: this.contentIdHelper,
       mediaPickedCallback: async (pickedMedia: MediaPickedEvent) => {
+        if (this.fullMedia) {
+          fireEvent(this, "media-picked", pickedMedia);
+          return;
+        }
         const mediaId = getIdFromUrl(pickedMedia.item.media_content_id);
         if (mediaId) {
           if (this.crop) {

src/components/ha-resizable-bottom-sheet.ts

@@ -220,7 +220,7 @@ export class HaResizableBottomSheet extends LitElement {
       min-height: var(--min-height, 30dvh);
       background-color: var(
         --ha-bottom-sheet-surface-background,
-        var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+        var(--ha-color-surface-default)
       );
       display: flex;
       flex-direction: column;

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

@@ -19,6 +19,7 @@ import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
+import "../ha-picture-upload";
 
 const MANUAL_SCHEMA = [
   { name: "media_content_id", required: false, selector: { text: {} } },
@@ -105,6 +106,17 @@ export class HaMediaSelector extends LitElement {
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
+    if (this.selector.media?.image_upload && !this.value) {
+      return html`<ha-picture-upload
+        .hass=${this.hass}
+        .value=${null}
+        .contentIdHelper=${this.selector.media?.content_id_helper}
+        select-media
+        full-media
+        @media-picked=${this._pictureUploadMediaPicked}
+      ></ha-picture-upload>`;
+    }
+
     return html`
       ${this._hasAccept ||
       (this._contextEntities && this._contextEntities.length <= 1)
@@ -142,8 +154,7 @@ export class HaMediaSelector extends LitElement {
               .computeHelper=${this._computeHelperCallback}
             ></ha-form>
           `
-        : html`
-            <ha-card
+        : html`<ha-card
               outlined
               tabindex="0"
               role="button"
@@ -203,7 +214,20 @@ export class HaMediaSelector extends LitElement {
                 </div>
               </div>
             </ha-card>
-          `}
+            ${this.selector.media?.clearable
+              ? html`<div>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    variant="danger"
+                    @click=${this._clearValue}
+                  >
+                    ${this.hass.localize(
+                      "ui.components.picture-upload.clear_picture"
+                    )}
+                  </ha-button>
+                </div>`
+              : nothing}`}
     `;
   }
 
@@ -248,6 +272,8 @@ export class HaMediaSelector extends LitElement {
       accept: this.selector.media?.accept,
       defaultId: this.value?.media_content_id,
       defaultType: this.value?.media_content_type,
+      hideContentType: this.selector.media?.hide_content_type,
+      contentIdHelper: this.selector.media?.content_id_helper,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
         fireEvent(this, "value-changed", {
           value: {
@@ -289,6 +315,31 @@ export class HaMediaSelector extends LitElement {
     }
   }
 
+  private _pictureUploadMediaPicked(ev) {
+    const pickedMedia = ev.detail as MediaPickedEvent;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.value,
+        media_content_id: pickedMedia.item.media_content_id,
+        media_content_type: pickedMedia.item.media_content_type,
+        metadata: {
+          title: pickedMedia.item.title,
+          thumbnail: pickedMedia.item.thumbnail,
+          media_class: pickedMedia.item.media_class,
+          children_media_class: pickedMedia.item.children_media_class,
+          navigateIds: pickedMedia.navigateIds?.map((id) => ({
+            media_content_type: id.media_content_type,
+            media_content_id: id.media_content_id,
+          })),
+        },
+      },
+    });
+  }
+
+  private _clearValue() {
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
   static styles = css`
     ha-entity-picker {
       display: block;

src/components/ha-sidebar.ts

@@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           justify-content: center;
           align-items: center;
           min-width: 8px;
-          border-radius: var(--ha-border-radius-md);
+          border-radius: var(--ha-border-radius-xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: normal;
           background-color: var(--accent-color);

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

@@ -167,6 +167,8 @@ class DialogMediaPlayerBrowse extends LitElement {
           .accept=${this._params.accept}
           .defaultId=${this._params.defaultId}
           .defaultType=${this._params.defaultType}
+          .hideContentType=${this._params.hideContentType}
+          .contentIdHelper=${this._params.contentIdHelper}
           @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
           @media-browsed=${this._mediaBrowsed}

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

@@ -19,8 +19,12 @@ class BrowseMediaManual extends LitElement {
 
   @property({ attribute: false }) public item!: MediaPlayerItemId;
 
+  @property({ attribute: false }) public hideContentType = false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
   private _schema = memoizeOne(
-    () =>
+    (hideContentType: boolean) =>
       [
         {
           name: "media_content_id",
@@ -29,13 +33,17 @@ class BrowseMediaManual extends LitElement {
             text: {},
           },
         },
-        {
-          name: "media_content_type",
-          required: false,
-          selector: {
-            text: {},
-          },
-        },
+        ...(hideContentType
+          ? []
+          : [
+              {
+                name: "media_content_type",
+                required: false,
+                selector: {
+                  text: {},
+                },
+              },
+            ]),
       ] as const
   );
 
@@ -45,7 +53,7 @@ class BrowseMediaManual extends LitElement {
         <div class="card-content">
           <ha-form
             .hass=${this.hass}
-            .schema=${this._schema()}
+            .schema=${this._schema(this.hideContentType)}
             .data=${this.item}
             .computeLabel=${this._computeLabel}
             .computeHelper=${this._computeHelper}
@@ -69,13 +77,35 @@ class BrowseMediaManual extends LitElement {
 
   private _computeLabel = (
     entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}`);
+  ): string => {
+    switch (entry.name) {
+      case "media_content_id":
+      case "media_content_type":
+        return this.hass.localize(
+          `ui.components.selectors.media.${entry.name}`
+        );
+    }
+    return entry.name;
+  };
 
   private _computeHelper = (
     entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);
+  ): string => {
+    switch (entry.name) {
+      case "media_content_id":
+        return (
+          this.contentIdHelper ||
+          this.hass.localize(
+            `ui.components.selectors.media.${entry.name}_detail`
+          )
+        );
+      case "media_content_type":
+        return this.hass.localize(
+          `ui.components.selectors.media.${entry.name}_detail`
+        );
+    }
+    return "";
+  };
 
   private _mediaPicked() {
     fireEvent(this, "manual-media-picked", {

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

@@ -76,8 +76,8 @@ declare global {
 }
 
 export interface MediaPlayerItemId {
-  media_content_id: string | undefined;
-  media_content_type: string | undefined;
+  media_content_id?: string | undefined;
+  media_content_type?: string | undefined;
 }
 
 const MANUAL_ITEM: MediaPlayerItem = {
@@ -113,6 +113,10 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property({ attribute: false }) public defaultType?: string;
 
+  @property({ attribute: false }) public hideContentType = false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
@@ -521,6 +525,8 @@ export class HaMediaPlayerBrowse extends LitElement {
                         media_content_type: this.defaultType || "",
                       }}
                       .hass=${this.hass}
+                      .hideContentType=${this.hideContentType}
+                      .contentIdHelper=${this.contentIdHelper}
                       @manual-media-picked=${this._manualPicked}
                     ></ha-browse-media-manual>`
                   : isTTSMediaSource(currentItem.media_content_id)

src/components/media-player/show-media-browser-dialog.ts

@@ -14,6 +14,8 @@ export interface MediaPlayerBrowseDialogParams {
   accept?: string[];
   defaultId?: string;
   defaultType?: string;
+  hideContentType?: boolean;
+  contentIdHelper?: string;
 }
 
 export const showMediaBrowserDialog = (

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

@@ -1,104 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-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 LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: TargetDetailsDialogParams;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  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;
-  }
-
-  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: var(--ha-space-2) var(--ha-space-6)
-        max(var(--safe-area-inset-bottom, var(--ha-space-0)), var(--ha-space-8));
-    }
-
-    @media all and (max-width: 600px), all and (max-height: 500px) {
-      ha-md-dialog {
-        --md-dialog-container-shape: var(--ha-space-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 { TargetType } from "../../../data/target";
-import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
-
-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-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 { TargetType, TargetTypeFloorless } from "../../data/target";
-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";
-
-@customElement("ha-target-picker-item-group")
-export class HaTargetPickerItemGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetTypeFloorless;
-
-  @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 TargetTypeFloorless}
-                    .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: var(--ha-space-0);
-    }
-    ha-expansion-panel::part(summary) {
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      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: var(--ha-space-0);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-group": HaTargetPickerItemGroup;
-  }
-}

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

@@ -1,690 +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 type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
-import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import {
-  areaMeetsFilter,
-  deviceMeetsFilter,
-  entityRegMeetsFilter,
-  extractFromTarget,
-  type ExtractFromTargetResult,
-  type ExtractFromTargetResultReferenced,
-  type TargetType,
-} 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";
-
-@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: "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
-              ></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
-              ></ha-target-picker-item-row>
-            `
-          )}
-          ${entityRows.map(
-            (itemId) => html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="entity"
-                .itemId=${itemId}
-                .hideContext=${this.hideContext || this.type !== "label"}
-              ></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: var(--ha-space-0);
-        --md-list-item-bottom-space: var(--ha-space-0);
-        --md-list-item-leading-space: var(--ha-space-2);
-        --md-list-item-trailing-space: var(--ha-space-2);
-        --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: var(--ha-space-12);
-      }
-      .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: var(--ha-space-5);
-      }
-
-      .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-value-chip.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 { TargetType } from "../../data/target";
-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";
-
-@customElement("ha-target-picker-value-chip")
-export class HaTargetPickerValueChip extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: TargetType;
-
-  @property({ attribute: "item-id" }) public itemId!: string;
-
-  @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: var(--ha-space-4);
-      height: var(--ha-space-4);
-      --mdc-icon-size: 14px;
-      color: var(--secondary-text-color);
-      margin-inline-start: var(--ha-space-1) !important;
-      margin-inline-end: calc(-1 * var(--ha-space-1)) !important;
-      direction: var(--direction);
-    }
-    .mdc-chip__icon--leading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --mdc-icon-size: 20px;
-      border-radius: var(--ha-border-radius-circle);
-      padding: 6px;
-      margin-left: -13px !important;
-      margin-inline-start: -13px !important;
-      margin-inline-end: var(--ha-space-1) !important;
-      direction: var(--direction);
-    }
-    .expand-btn {
-      margin-right: var(--ha-space-0);
-      margin-inline-end: var(--ha-space-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-value-chip": HaTargetPickerValueChip;
-  }
-}

src/data/area_floor.ts

@@ -1,259 +0,0 @@
-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[]
-): 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 = 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 = 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 = states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return entityFilter(stateObj);
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = 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 unassignedAreas = 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(
-    ...unassignedAreas.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;
-};

src/data/device_registry.ts

@@ -1,20 +1,12 @@
-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 {
@@ -171,147 +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[] => {
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
-
-  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
-
-  if (
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses ||
-    entityFilter
-  ) {
-    deviceEntityLookup = getDeviceEntityDisplayLookup(entities);
-  }
-
-  let inputDevices = devices.filter(
-    (device) => device.id === 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 = 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 = 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 === value || deviceFilter!(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
-      ? configEntryLookup?.[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;
-};

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,17 +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 { computeEntityNameList } from "../common/entity/compute_entity_name_display";
 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";
 
@@ -329,122 +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[] => {
-  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))
-    );
-  }
-
-  items = entityIds.map<EntityComboBoxItem>((entityId) => {
-    const stateObj = hass.states[entityId];
-
-    const friendlyName = computeStateName(stateObj); // Keep this for search
-    const [entityName, deviceName, areaName] = computeEntityNameList(
-      stateObj,
-      [{ type: "entity" }, { type: "device" }, { type: "area" }],
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
-
-    const domainName = domainToName(hass.localize, computeDomain(entityId));
-
-    const isRTL = computeRTL(hass);
-
-    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 === 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 === 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 === value || (item.stateObj && entityFilter!(item.stateObj))
-    );
-  }
-
-  return items;
-};

src/data/label_registry.ts

@@ -1,20 +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 { 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 {
@@ -99,178 +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[] => {
-  if (!labels || labels.length === 0) {
-    return [];
-  }
-
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
-
-  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 = 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 = 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 = hass.states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return entityFilter(stateObj);
-        });
-      });
-      inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = 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 = hass.areas[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;
-};

src/data/selector.ts

@@ -312,6 +312,10 @@ export interface LocationSelectorValue {
 export interface MediaSelector {
   media: {
     accept?: string[];
+    image_upload?: boolean;
+    clearable?: boolean;
+    hide_content_type?: boolean;
+    content_id_helper?: string;
   } | null;
 }
 

src/data/target.ts

@@ -1,164 +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 { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
-
-export type TargetType = "entity" | "device" | "area" | "label" | "floor";
-export type TargetTypeFloorless = Exclude<TargetType, "floor">;
-
-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/controls/more-info-media_player.ts

@@ -167,15 +167,12 @@ class MoreInfoMediaPlayer extends LitElement {
     }
 
     return html`<ha-md-button-menu positioning="popover">
-      <ha-button
+      <ha-icon-button
         slot="trigger"
-        appearance="plain"
-        variant="neutral"
-        size="small"
-        title=${this.hass.localize(`ui.card.media_player.source`)}
+        .title=${this.hass.localize(`ui.card.media_player.source`)}
+        .path=${mdiLoginVariant}
       >
-        <ha-svg-icon .path=${mdiLoginVariant}></ha-svg-icon>
-      </ha-button>
+      </ha-icon-button>
       ${this.stateObj.attributes.source_list!.map(
         (source) =>
           html`<ha-md-menu-item
@@ -203,15 +200,12 @@ class MoreInfoMediaPlayer extends LitElement {
     }
 
     return html`<ha-md-button-menu positioning="popover">
-      <ha-button
+      <ha-icon-button
         slot="trigger"
-        appearance="plain"
-        variant="neutral"
-        size="small"
-        title=${this.hass.localize(`ui.card.media_player.sound_mode`)}
+        .title=${this.hass.localize(`ui.card.media_player.sound_mode`)}
+        .path=${mdiMusicNoteEighth}
       >
-        <ha-svg-icon .path=${mdiMusicNoteEighth}></ha-svg-icon>
-      </ha-button>
+      </ha-icon-button>
       ${this.stateObj.attributes.sound_mode_list!.map(
         (soundMode) =>
           html`<ha-md-menu-item
@@ -237,21 +231,17 @@ class MoreInfoMediaPlayer extends LitElement {
     const groupMembers = this.stateObj.attributes.group_members;
     const hasMultipleMembers = groupMembers && groupMembers?.length > 1;
 
-    return html`<ha-button
-      class="grouping"
+    return html`<ha-icon-button
       @click=${this._showGroupMediaPlayers}
-      appearance="plain"
-      variant="neutral"
-      size="small"
-      title=${this.hass.localize("ui.card.media_player.join")}
+      .title=${this.hass.localize("ui.card.media_player.join")}
     >
-      <div>
+      <div class="grouping">
         <ha-svg-icon .path=${mdiSpeakerMultiple}></ha-svg-icon>
         ${hasMultipleMembers
-          ? html`<span class="badge"> ${groupMembers?.length || 4} </span>`
+          ? html`<span class="badge">${groupMembers?.length || 4}</span>`
           : nothing}
       </div>
-    </ha-button>`;
+    </ha-icon-button>`;
   }
 
   protected _renderEmptyCover(title: string, icon?: string) {
@@ -414,48 +404,39 @@ class MoreInfoMediaPlayer extends LitElement {
           ${!isUnavailableState(stateObj.state) &&
           supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
             ? html`
-                <ha-button
+                <ha-icon-button
                   @click=${this._showBrowseMedia}
-                  appearance="plain"
-                  variant="neutral"
-                  size="small"
-                  title=${this.hass.localize(
+                  .title=${this.hass.localize(
                     "ui.card.media_player.browse_media"
                   )}
+                  .path=${mdiPlayBoxMultiple}
                 >
-                  <ha-svg-icon .path=${mdiPlayBoxMultiple}></ha-svg-icon>
-                </ha-button>
+                </ha-icon-button>
               `
             : nothing}
           ${this._renderGrouping()} ${this._renderSourceControl()}
           ${this._renderSoundMode()}
           ${turnOn
-            ? html`<ha-button
+            ? html`<ha-icon-button
                 action=${turnOn.action}
                 @click=${this._handleClick}
-                appearance="plain"
-                variant="neutral"
-                size="small"
-                title=${this.hass.localize(
+                .title=${this.hass.localize(
                   `ui.card.media_player.${turnOn.action}`
                 )}
+                .path=${turnOn.icon}
               >
-                <ha-svg-icon .path=${turnOn.icon}></ha-svg-icon>
-              </ha-button>`
+              </ha-icon-button>`
             : nothing}
           ${turnOff
-            ? html`<ha-button
+            ? html`<ha-icon-button
                 action=${turnOff.action}
                 @click=${this._handleClick}
-                appearance="plain"
-                variant="neutral"
-                size="small"
-                title=${this.hass.localize(
+                .title=${this.hass.localize(
                   `ui.card.media_player.${turnOff.action}`
                 )}
+                .path=${turnOff.icon}
               >
-                <ha-svg-icon .path=${turnOff.icon}></ha-svg-icon>
-              </ha-button>`
+              </ha-icon-button>`
             : nothing}
         </div>
       </div>
@@ -579,7 +560,7 @@ class MoreInfoMediaPlayer extends LitElement {
       font-size: var(--ha-font-size-xs);
       background-color: var(--primary-color);
       padding: 0 4px;
-      color: var(--primary-text-color);
+      color: var(--text-primary-color);
     }
 
     .position-bar {
@@ -616,15 +597,15 @@ class MoreInfoMediaPlayer extends LitElement {
       justify-content: space-around;
     }
 
-    .controls-row ha-button {
-      width: 32px;
+    .controls-row ha-icon-button {
+      color: var(--secondary-text-color);
     }
 
     .controls-row ha-svg-icon {
       color: var(--ha-color-on-neutral-quiet);
     }
 
-    .grouping::part(label) {
+    .grouping {
       position: relative;
     }
 

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

@@ -1,5 +1,6 @@
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { tinykeys } from "tinykeys";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-resizable-bottom-sheet";
@@ -44,11 +45,27 @@ export default class HaAutomationSidebar extends LitElement {
   @query("ha-resizable-bottom-sheet")
   private _bottomSheetElement?: HaResizableBottomSheet;
 
+  @query(".handle")
+  private _handleElement?: HTMLDivElement;
+
   private _resizeStartX = 0;
 
+  private _tinykeysUnsub?: () => void;
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("config") || changedProperties.has("narrow")) {
+      if (!this.config || this.narrow) {
+        this._tinykeysUnsub?.();
+        this._tinykeysUnsub = undefined;
+      }
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this._unregisterResizeHandlers();
+    this._tinykeysUnsub?.();
   }
 
   private _renderContent() {
@@ -170,6 +187,9 @@ export default class HaAutomationSidebar extends LitElement {
         class="handle ${this._resizing ? "resizing" : ""}"
         @mousedown=${this._handleMouseDown}
         @touchstart=${this._handleMouseDown}
+        @focus=${this._startKeyboardResizing}
+        @blur=${this._stopKeyboardResizing}
+        tabindex="0"
       >
         <div class="indicator ${this._resizing ? "" : "hidden"}"></div>
       </div>
@@ -288,6 +308,44 @@ export default class HaAutomationSidebar extends LitElement {
     document.removeEventListener("touchcancel", this._endResizing);
   }
 
+  private _startKeyboardResizing = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    this._resizing = true;
+    this._resizeStartX = 0;
+    this._tinykeysUnsub = tinykeys(this._handleElement!, {
+      ArrowLeft: this._increaseSize,
+      ArrowRight: this._decreaseSize,
+    });
+  };
+
+  private _stopKeyboardResizing = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    this._resizing = false;
+    fireEvent(this, "sidebar-resizing-stopped");
+    this._tinykeysUnsub?.();
+    this._tinykeysUnsub = undefined;
+  };
+
+  private _increaseSize = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+
+    this._resizeStartX -= computeRTL(this.hass) ? 10 : -10;
+    this._keyboardResize();
+  };
+
+  private _decreaseSize = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+
+    this._resizeStartX += computeRTL(this.hass) ? 10 : -10;
+    this._keyboardResize();
+  };
+
+  private _keyboardResize() {
+    fireEvent(this, "sidebar-resized", {
+      deltaInPx: this._resizeStartX,
+    });
+  }
+
   static styles = css`
     :host {
       z-index: 6;
@@ -302,6 +360,8 @@ export default class HaAutomationSidebar extends LitElement {
       --ha-bottom-sheet-border-style: solid;
       --ha-bottom-sheet-border-color: var(--primary-color);
       margin-top: var(--safe-area-inset-top);
+
+      --ha-bottom-sheet-surface-background: var(--card-background-color);
     }
 
     @media all and (max-width: 870px) {
@@ -340,6 +400,10 @@ export default class HaAutomationSidebar extends LitElement {
       transform: scale3d(0, 1, 1);
       opacity: 0;
     }
+
+    .handle:focus-visible {
+      outline: none;
+    }
   `;
 }
 

src/panels/config/backup/dialogs/dialog-generate-backup.ts

@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
@@ -9,9 +9,9 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button-prev";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-md-select";
@@ -73,12 +73,13 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
 
   @state() private _formData?: FormData;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+  @state() private _open = false;
 
   public showDialog(_params: GenerateBackupDialogParams): void {
     this._step = STEPS[0];
     this._formData = INITIAL_DATA;
     this._params = _params;
+    this._open = true;
 
     this._fetchAgents();
     this._fetchBackupConfig();
@@ -88,6 +89,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
     if (this._params!.cancel) {
       this._params!.cancel();
     }
+    this._open = false;
     this._step = undefined;
     this._formData = undefined;
     this._agents = [];
@@ -114,7 +116,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
   }
 
   public closeDialog() {
-    this._dialog?.close();
+    this._open = false;
     return true;
   }
 
@@ -179,15 +181,19 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
     const selectedAgents = this._formData.agent_ids;
 
     return html`
-      <ha-md-dialog open disable-cancel-action @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        @closed=${this._dialogClosed}
+      >
+        <ha-dialog-header slot="header">
           ${isFirstStep
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
+                  data-dialog="close"
                   .label=${this.hass.localize("ui.common.close")}
                   .path=${mdiClose}
-                  @click=${this.closeDialog}
                 ></ha-icon-button>
               `
             : html`
@@ -198,13 +204,17 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
               `}
           <span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
         </ha-dialog-header>
-        <div slot="content" class="content">
+        <div class="content">
           ${this._step === "data" ? this._renderData() : this._renderSync()}
         </div>
-        <div slot="actions">
+        <ha-dialog-footer slot="footer">
           ${isFirstStep
             ? html`
-                <ha-button @click=${this.closeDialog} appearance="plain">
+                <ha-button
+                  slot="secondaryAction"
+                  @click=${this.closeDialog}
+                  appearance="plain"
+                >
                   ${this.hass.localize("ui.common.cancel")}
                 </ha-button>
               `
@@ -212,6 +222,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
           ${isLastStep
             ? html`
                 <ha-button
+                  slot="primaryAction"
                   @click=${this._submit}
                   .disabled=${this._formData.agents_mode === "custom" &&
                   !selectedAgents.length}
@@ -223,14 +234,15 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
               `
             : html`
                 <ha-button
+                  slot="primaryAction"
                   @click=${this._nextStep}
                   .disabled=${this._step === "data" && this._noDataSelected}
                 >
                   ${this.hass.localize("ui.common.next")}
                 </ha-button>
               `}
-        </div>
-      </ha-md-dialog>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -436,9 +448,8 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        ha-md-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 24px;
-          max-height: calc(100vh - 48px);
         }
         ha-md-list {
           background: none;

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

@@ -1,10 +1,10 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDotsVertical,
   mdiDownload,
   mdiFilterRemove,
   mdiImagePlus,
 } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
 import { differenceInHours } from "date-fns";
 import type {
   HassServiceTarget,
@@ -27,21 +27,21 @@ 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 type { HistoryResult } from "../../data/history";
 import {
   computeHistory,
-  convertStatisticsToHistory,
-  mergeHistoryResults,
   subscribeHistory,
+  mergeHistoryResults,
+  convertStatisticsToHistory,
 } from "../../data/history";
 import { fetchStatistics } from "../../data/recorder";
 import { resolveEntityIDs } from "../../data/selector";
@@ -182,7 +182,6 @@ class HaPanelHistory extends LitElement {
               .disabled=${this._isLoading}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
           ${this._isLoading
@@ -650,10 +649,6 @@ class HaPanelHistory extends LitElement {
           direction: var(--direction);
         }
 
-        ha-target-picker {
-          flex: 1;
-        }
-
         @media all and (max-width: 1025px) {
           .filters {
             flex-direction: column;

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

@@ -1,11 +1,9 @@
 import { mdiRefresh } from "@mdi/js";
-import type { HassServiceTarget } 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 {
@@ -18,15 +16,17 @@ 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 type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import "../../components/ha-target-picker";
 import { filterLogbookCompatibleEntities } from "../../data/logbook";
-import { resolveEntityIDs } from "../../data/selector";
-import { getSensorNumericDeviceClasses } from "../../data/sensor";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
+import { storage } from "../../common/decorators/storage";
+import { ensureArray } from "../../common/array/ensure-array";
+import { resolveEntityIDs } from "../../data/selector";
+import { getSensorNumericDeviceClasses } from "../../data/sensor";
+import type { HaEntityPickerEntityFilterFunc } from "../../components/entity/ha-entity-picker";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -108,7 +108,6 @@ export class HaPanelLogbook extends LitElement {
               .value=${this._targetPickerValue}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
 
@@ -364,10 +363,6 @@ export class HaPanelLogbook extends LitElement {
           max-width: 400px;
         }
 
-        ha-target-picker {
-          flex: 1;
-        }
-
         :host([narrow]) ha-entity-picker {
           max-width: none;
           width: 100%;

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -27,6 +27,7 @@ import {
 } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts";
+import { filterXSS } from "../../../../../common/util/xss";
 
 export function getSuggestedMax(dayDifference: number, end: Date): number {
   let suggestedMax = new Date(end);
@@ -201,7 +202,7 @@ function formatTooltip(
           countNegative++;
         }
       }
-      return `${param.marker} ${param.seriesName}: ${value} ${unit}`;
+      return `${param.marker} ${filterXSS(param.seriesName!)}: ${value} ${unit}`;
     })
     .filter(Boolean);
   let footer = "";

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -6,6 +6,7 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { BarSeriesOption } from "echarts/charts";
 import type { ECElementEvent } from "echarts/types/dist/shared";
+import { filterXSS } from "../../../../common/util/xss";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/ha-chart-base";
@@ -96,9 +97,8 @@ export class HuiEnergyDevicesGraphCard
   }
 
   private _renderTooltip(params: any) {
-    const title = `<h4 style="text-align: center; margin: 0;">${this._getDeviceName(
-      params.value[1]
-    )}</h4>`;
+    const deviceName = filterXSS(this._getDeviceName(params.value[1]));
+    const title = `<h4 style="text-align: center; margin: 0;">${deviceName}</h4>`;
     const value = `${formatNumber(
       params.value[0] as number,
       this.hass.locale,

src/panels/lovelace/cards/hui-picture-card.ts

@@ -93,17 +93,21 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
       changedProps.has("_config") &&
       changedProps.get("_config")?.image !== this._config?.image;
 
+    const image =
+      (typeof this._config?.image === "object" &&
+        this._config.image.media_content_id) ||
+      (this._config.image as string | undefined);
     if (
       (firstHass || imageChanged) &&
-      typeof this._config?.image === "string" &&
-      isMediaSourceContentId(this._config.image)
+      typeof image === "string" &&
+      isMediaSourceContentId(image)
     ) {
       this._resolvedImage = undefined;
-      resolveMediaSource(this.hass, this._config?.image).then((result) => {
+      resolveMediaSource(this.hass, image).then((result) => {
         this._resolvedImage = result.url;
       });
     } else if (imageChanged) {
-      this._resolvedImage = this._config?.image;
+      this._resolvedImage = image;
     }
   }
 

src/panels/lovelace/cards/types.ts

@@ -29,6 +29,7 @@ import type {
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 import type { HomeSummary } from "../strategies/home/helpers/home-summaries";
+import type { MediaSelectorValue } from "../../../data/selector";
 
 export type AlarmPanelCardConfigState =
   | "arm_away"
@@ -441,7 +442,7 @@ export interface StatisticCardConfig extends LovelaceCardConfig {
 }
 
 export interface PictureCardConfig extends LovelaceCardConfig {
-  image?: string;
+  image?: string | MediaSelectorValue;
   image_entity?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;

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

@@ -6,10 +6,12 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { entityUseDeviceName } from "../../../common/entity/compute_entity_name";
 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";
 

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-picture-card-editor.ts

@@ -1,7 +1,8 @@
 import { mdiGestureTap } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string, union } from "superstruct";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-theme-picker";
@@ -11,11 +12,12 @@ import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
-    image: optional(string()),
+    image: optional(union([string(), object()])),
     image_entity: optional(string()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
@@ -25,47 +27,6 @@ const cardConfigStruct = assign(
   })
 );
 
-const SCHEMA = [
-  { name: "image", selector: { image: {} } },
-  {
-    name: "image_entity",
-    selector: { entity: { domain: ["image", "person"] } },
-  },
-  { name: "alt_text", selector: { text: {} } },
-  { name: "theme", selector: { theme: {} } },
-  {
-    name: "interactions",
-    type: "expandable",
-    flatten: true,
-    iconPath: mdiGestureTap,
-    schema: [
-      {
-        name: "tap_action",
-        selector: {
-          ui_action: {
-            default_action: "more-info",
-          },
-        },
-      },
-      {
-        name: "",
-        type: "optional_actions",
-        flatten: true,
-        schema: (["hold_action", "double_tap_action"] as const).map(
-          (action) => ({
-            name: action,
-            selector: {
-              ui_action: {
-                default_action: "none" as const,
-              },
-            },
-          })
-        ),
-      },
-    ],
-  },
-] as const;
-
 @customElement("hui-picture-card-editor")
 export class HuiPictureCardEditor
   extends LitElement
@@ -75,6 +36,63 @@ export class HuiPictureCardEditor
 
   @state() private _config?: PictureCardConfig;
 
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
+        {
+          name: "image",
+          selector: {
+            media: {
+              accept: ["image/*"] as string[],
+              clearable: true,
+              image_upload: true,
+              hide_content_type: true,
+              content_id_helper: localize(
+                "ui.panel.lovelace.editor.card.picture.content_id_helper"
+              ),
+            },
+          },
+        },
+        {
+          name: "image_entity",
+          selector: { entity: { domain: ["image", "person"] } },
+        },
+        { name: "alt_text", selector: { text: {} } },
+        { name: "theme", selector: { theme: {} } },
+        {
+          name: "interactions",
+          type: "expandable",
+          flatten: true,
+          iconPath: mdiGestureTap,
+          schema: [
+            {
+              name: "tap_action",
+              selector: {
+                ui_action: {
+                  default_action: "more-info",
+                },
+              },
+            },
+            {
+              name: "",
+              type: "optional_actions",
+              flatten: true,
+              schema: (["hold_action", "double_tap_action"] as const).map(
+                (action) => ({
+                  name: action,
+                  selector: {
+                    ui_action: {
+                      default_action: "none" as const,
+                    },
+                  },
+                })
+              ),
+            },
+          ],
+        },
+      ] as const
+  );
+
   public setConfig(config: PictureCardConfig): void {
     assert(config, cardConfigStruct);
     this._config = config;
@@ -88,19 +106,28 @@ export class HuiPictureCardEditor
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
-        .schema=${SCHEMA}
+        .data=${this._processData(this._config)}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
   }
 
+  private _processData = memoizeOne((config: PictureCardConfig) => ({
+    ...config,
+    ...(typeof config.image === "string"
+      ? { image: { media_content_id: config.image } }
+      : {}),
+  }));
+
   private _valueChanged(ev: CustomEvent): void {
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     switch (schema.name) {
       case "theme":
         return `${this.hass!.localize(

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -4,6 +4,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
 import type { AreaRegistryEntry } from "../../../../data/area_registry";
 import { getEnergyPreferences } from "../../../../data/energy";
+import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type {
   LovelaceSectionConfig,
   LovelaceSectionRawConfig,
@@ -18,8 +19,9 @@ import type {
   TileCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
-import { getAreas } from "../areas/helpers/areas-strategy-helper";
+import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
 import type { CommonControlSectionStrategyConfig } from "../usage_prediction/common-controls-section-strategy";
+import { getHomeStructure } from "./helpers/home-structure";
 
 export interface HomeMainViewStrategyConfig {
   type: "home-main";
@@ -59,25 +61,67 @@ export class HomeMainViewStrategy extends ReactiveElement {
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
+    const floors = getFloors(hass.floors);
 
-    const areasSection: LovelaceSectionConfig = {
-      type: "grid",
-      column_span: 2,
-      cards: [
-        {
-          type: "heading",
-          heading_style: "title",
-          heading: hass.localize("ui.panel.lovelace.strategy.home.areas"),
-        },
-        ...areas.map<AreaCardConfig>((area) =>
-          computeAreaCard(area.area_id, hass)
-        ),
-      ],
-    };
+    const home = getHomeStructure(floors, areas);
+
+    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
     // Allow between 2 and 3 columns (the max should be set to define the width of the header)
     const maxColumns = 2;
 
+    const floorsSections: LovelaceSectionConfig[] = [];
+    for (const floorStructure of home.floors) {
+      const floorId = floorStructure.id;
+      const areaIds = floorStructure.areas;
+      const floor = hass.floors[floorId];
+
+      const cards: LovelaceCardConfig[] = [];
+      for (const areaId of areaIds) {
+        cards.push(computeAreaCard(areaId, hass));
+      }
+
+      if (cards.length) {
+        floorsSections.push({
+          type: "grid",
+          column_span: maxColumns,
+          cards: [
+            {
+              type: "heading",
+              heading:
+                floorCount > 1
+                  ? floor.name
+                  : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+              heading_style: "title",
+            },
+            ...cards,
+          ],
+        });
+      }
+    }
+
+    if (home.areas.length) {
+      const cards: LovelaceCardConfig[] = [];
+      for (const areaId of home.areas) {
+        cards.push(computeAreaCard(areaId, hass));
+      }
+      floorsSections.push({
+        type: "grid",
+        column_span: maxColumns,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+            heading_style: "title",
+          },
+          ...cards,
+        ],
+      });
+    }
+
     const favoriteSection: LovelaceSectionConfig = {
       type: "grid",
       column_span: maxColumns,
@@ -234,7 +278,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         favoriteSection.cards && favoriteSection,
         commonControlsSection,
         summarySection,
-        areasSection,
+        ...floorsSections,
         widgetSection.cards && widgetSection,
       ] satisfies (LovelaceSectionRawConfig | undefined)[]
     ).filter(Boolean) as LovelaceSectionRawConfig[];

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: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
   }
 `;

src/resources/theme/wa.globals.ts

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

src/state/context-mixin.ts

@@ -1,5 +1,4 @@
 import { ContextProvider } from "@lit/context";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   areasContext,
   configContext,
@@ -7,7 +6,6 @@ import {
   devicesContext,
   entitiesContext,
   floorsContext,
-  labelsContext,
   localeContext,
   localizeContext,
   panelsContext,
@@ -17,7 +15,6 @@ import {
   userContext,
   userDataContext,
 } from "../data/context";
-import { subscribeLabelRegistry } from "../data/label_registry";
 import type { Constructor, HomeAssistant } from "../types";
 import type { HassBaseEl } from "./hass-base-mixin";
 
@@ -25,8 +22,6 @@ export const contextMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
 ) =>
   class extends superClass {
-    private _unsubscribeLabels?: UnsubscribeFunc;
-
     private __contextProviders: Record<
       string,
       ContextProvider<any> | undefined
@@ -97,10 +92,6 @@ export const contextMixin = <T extends Constructor<HassBaseEl>>(
         context: floorsContext,
         initialValue: this.hass ? this.hass.floors : this._pendingHass.floors,
       }),
-      labels: new ContextProvider(this, {
-        context: labelsContext,
-        initialValue: [],
-      }),
     };
 
     protected hassConnected() {
@@ -110,13 +101,6 @@ export const contextMixin = <T extends Constructor<HassBaseEl>>(
           this.__contextProviders[key]!.setValue(value);
         }
       }
-
-      this._unsubscribeLabels = subscribeLabelRegistry(
-        this.hass!.connection!,
-        (labels) => {
-          this.__contextProviders.labels!.setValue(labels);
-        }
-      );
     }
 
     protected _updateHass(obj: Partial<HomeAssistant>) {
@@ -127,9 +111,4 @@ export const contextMixin = <T extends Constructor<HassBaseEl>>(
         }
       }
     }
-
-    public disconnectedCallback() {
-      super.disconnectedCallback();
-      this._unsubscribeLabels?.();
-    }
   };

src/translations/en.json

@@ -646,7 +646,6 @@
       },
       "entity": {
         "entity-picker": {
-          "choose_entity": "Choose entity",
           "entity": "Entity",
           "edit": "Edit",
           "clear": "Clear",
@@ -683,36 +682,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}",
-        "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",
@@ -7901,7 +7880,8 @@
             },
             "picture": {
               "name": "Picture",
-              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action."
+              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action.",
+              "content_id_helper": "Enter a media_source id or a URL for the image to be displayed."
             },
             "picture-elements": {
               "name": "Picture elements",
@@ -7956,7 +7936,7 @@
               "hide_completed": "Hide completed items",
               "hide_create": "Hide 'Add item' field",
               "hide_section_headers": "Hide section headers",
-              "hide_section_headers_helper": "Removes the 'Active' and 'Completed' sections with the overflow menus.",
+              "hide_section_headers_helper": "Removes the 'Active' and 'Completed' section headers and their overflow menus.",
               "display_order": "Display order",
               "item_tap_action": "Item tap behavior",
               "actions": {

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

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

yarn.lock

@@ -1206,14 +1206,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bundle-stats/plugin-webpack-filter@npm:4.21.4":
-  version: 4.21.4
-  resolution: "@bundle-stats/plugin-webpack-filter@npm:4.21.4"
+"@bundle-stats/plugin-webpack-filter@npm:4.21.5":
+  version: 4.21.5
+  resolution: "@bundle-stats/plugin-webpack-filter@npm:4.21.5"
   dependencies:
     tslib: "npm:2.8.1"
   peerDependencies:
     core-js: ^3.0.0
-  checksum: 10/67e589755ce6702c92db3e9ca6158d0cbdce5a0c1d92508fae61c0424720121e81c6884efd86392f4906db871e4ba6f97111a55976571cdb79720a47149c027b
+  checksum: 10/a24e4fb0efdd671e8d21116045a22500494198feb451981d40db732cd890b90b7bad9a9f1d7909c8db9a1069f4c6226ae35939b4d865be437ea8e19b989ebcf1
   languageName: node
   linkType: hard
 
@@ -1284,15 +1284,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.38.4, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
-  version: 6.38.4
-  resolution: "@codemirror/view@npm:6.38.4"
+"@codemirror/view@npm:6.38.5, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
+  version: 6.38.5
+  resolution: "@codemirror/view@npm:6.38.5"
   dependencies:
     "@codemirror/state": "npm:^6.5.0"
     crelt: "npm:^1.0.6"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/86b3894e9e7c2113aabb1db8684d0520378339c194fa56a688fc26cd7d40336bb9df1f5f19f68309d95f14b80ecf0b70c0ffe5e43f2ec11c4bab18f2d5ee4494
+  checksum: 10/2335b593770042eb3adfe369073432b07cd2d15f1e230ae4dc7be7a7b8edd74e57c13e59b92a11e7e5d59ae030aabf7f55478dfec1cf2a2fe3a1ef3f091676a4
   languageName: node
   linkType: hard
 
@@ -1698,15 +1698,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.5":
-  version: 2.3.5
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.5"
+"@formatjs/ecma402-abstract@npm:2.3.6":
+  version: 2.3.6
+  resolution: "@formatjs/ecma402-abstract@npm:2.3.6"
   dependencies:
     "@formatjs/fast-memoize": "npm:2.2.7"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/254651057170836237dc4f0fbb372157f97133c4dcee414007e0cdb5b589baf0546c2f6337d117b988ee0a4f0a4d8247780aaa9e96b410c568495f162c40dc50
+  checksum: 10/30b1b5cd6b62ba46245f934429936592df5500bc1b089dc92dd49c826757b873dd92c305dcfe370701e4df6b057bf007782113abb9b65db550d73be4961718bc
   languageName: node
   linkType: hard
 
@@ -1719,68 +1719,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.3":
-  version: 2.11.3
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.3"
+"@formatjs/icu-messageformat-parser@npm:2.11.4":
+  version: 2.11.4
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.4"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.15"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/icu-skeleton-parser": "npm:1.8.16"
     tslib: "npm:^2.8.0"
-  checksum: 10/339f5ff5ea7417e2db7f01bd41340f78fd5a8e56a66e723272d21ce7ab4b265dcb45748cdca76eac7137e2b5e6767986812b471e011b4602cf7afbc6da57fb98
+  checksum: 10/2acb100c06c2ade666d72787fb9f9795b1ace41e8e73bfadc2b1a7b8562e81f655e484f0f33d8c39473aa17bf0ad96fb2228871806a9b3dc4f5f876754a0de3a
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.15":
-  version: 1.8.15
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.15"
+"@formatjs/icu-skeleton-parser@npm:1.8.16":
+  version: 1.8.16
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.16"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/19825abc1a5eef0288456c08420d06f3da8256fbe81db0b9ead48cacc94954d748c8068988e26d184d38fca2e50c191ecda5a10ff3935529c3134b8d80db0538
+  checksum: 10/428001e5bed81889b276a2356a1393157af91dc59220b765a1a132f6407ac5832b7ac6ae9737674ac38e44035295c0c1c310b2630f383f2b5779ea90bf2849e6
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.18.1":
-  version: 6.18.1
-  resolution: "@formatjs/intl-datetimeformat@npm:6.18.1"
+"@formatjs/intl-datetimeformat@npm:6.18.2":
+  version: 6.18.2
+  resolution: "@formatjs/intl-datetimeformat@npm:6.18.2"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/66938778ecf37472a7e2f1d9349b0ac249fcbd5d684ae5614dea07287876182429980ba2fe3671224f981065baf017ac955f4b3c1f3c924c89bf2ec82dd1acd8
+  checksum: 10/e6f80d0eb2049564502370839697a18858268a0dff8d199b1908137c4a229b1303131c12b8b8a8e8e259a1feba26dbc25b003b150adabea10d1c43f68086efbe
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:6.8.12":
-  version: 6.8.12
-  resolution: "@formatjs/intl-displaynames@npm:6.8.12"
+"@formatjs/intl-displaynames@npm:6.8.13":
+  version: 6.8.13
+  resolution: "@formatjs/intl-displaynames@npm:6.8.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/7de27ef7e8cde2febce84d5443f00b70062cbd0c3f1039ce8ed1caacb15c4c7a36da16295f26657d59aa4663141a04d7b1083bfd1eea6a4e8ad9dc6093a2c886
+  checksum: 10/adefd25fa42266c7bc33dd3cd50f3681bdce51d18b32a03c98f8ad7587dfd8b9291345e185a4b16f31f4eee10fc799fd1b6361bdfd3a2c9fe127744e1e0f3b07
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.7.5":
-  version: 0.7.5
-  resolution: "@formatjs/intl-durationformat@npm:0.7.5"
+"@formatjs/intl-durationformat@npm:0.7.6":
+  version: 0.7.6
+  resolution: "@formatjs/intl-durationformat@npm:0.7.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/4dc81b112fed25dc8da0a16ddeff033b7c763bf9a1cfd7b1b25c1216f7f147eb67a47059a3cf95b4d4ade150c54a813542b84e69298905a4bc22548d74bf8567
+  checksum: 10/442236ba85bcd9cb7296c43a708271fa09f110b1ca9d5899066d00812fc2965eaeaec6b5240be421b80daba62860352131088449ba0fcd2061f671cec6240f0b
   languageName: node
   linkType: hard
 
-"@formatjs/intl-enumerator@npm:1.8.11":
-  version: 1.8.11
-  resolution: "@formatjs/intl-enumerator@npm:1.8.11"
+"@formatjs/intl-enumerator@npm:1.8.12":
+  version: 1.8.12
+  resolution: "@formatjs/intl-enumerator@npm:1.8.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/8646a517cd4160c1ceff888ec8fdf652caa3d375fa41231e829c13bc7be0cd156c9642e339b75e9cfa8ef60ae8140c766f9055318c62f1c1d9345f25cdb7f426
+  checksum: 10/8dfd7ca5383b4dca530e1df5118a72f71347f4e0daa6131b82dbf7e860a8b96bec0fed43bfa6f6e650e55fa50fcd3e9e3a5253515131b578539d8eaa84630927
   languageName: node
   linkType: hard
 
@@ -1793,26 +1793,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:7.7.12":
-  version: 7.7.12
-  resolution: "@formatjs/intl-listformat@npm:7.7.12"
+"@formatjs/intl-listformat@npm:7.7.13":
+  version: 7.7.13
+  resolution: "@formatjs/intl-listformat@npm:7.7.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/eee910e83ad28b3b3c24ab6e155720187ae5b5ac936ffa2c8ec6cc8c392c194fd5c79a166290da1c6de8dc1857e3d9d11241029832ec88f7a85cce1821b7f067
+  checksum: 10/476d7cffb64eb996a888b1865aa237f04088de60fa7c65b6d073bca8a3c0f4304040ef12f16eafaf6587895976b773607296951afa7f119447d8f9b2c40daa55
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:4.2.12":
-  version: 4.2.12
-  resolution: "@formatjs/intl-locale@npm:4.2.12"
+"@formatjs/intl-locale@npm:4.2.13":
+  version: 4.2.13
+  resolution: "@formatjs/intl-locale@npm:4.2.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-enumerator": "npm:1.8.11"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/intl-enumerator": "npm:1.8.12"
     "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/42111a3002a5a2076b3eb012073230f69c62355dc03647bc17f4d0805f39c7e720e2281b359277d020fef623944a5bcc1ddc3dae9a3af74886d876147680147d
+  checksum: 10/865615561b4bad8b8d7d93539cae7eb3ed2d46b6156486ef3ccb1b8f9f46f075c7cf2f6e5325aba1cf07150e19280858dff7dfd86d530fbf45fd31ea4fabf8d4
   languageName: node
   linkType: hard
 
@@ -1825,38 +1825,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.15.5":
-  version: 8.15.5
-  resolution: "@formatjs/intl-numberformat@npm:8.15.5"
+"@formatjs/intl-numberformat@npm:8.15.6":
+  version: 8.15.6
+  resolution: "@formatjs/intl-numberformat@npm:8.15.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/3440371a43c54cdd2aa3714cb518ad22e491dd19fbc0c046e712dde078d3f6ed709474376863d64d2bddb506957d1cf265d440f6723b88211044a7b56186e550
+  checksum: 10/674c5fefa0b14fcd7c58d0c0e592b4887dc2563fa5a11d80a0a82328ac12b2bb82b9a5367fa0a4d80060d61d15a1821bca7085e20cad09aa93b87edb3cff68ea
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.4.5":
-  version: 5.4.5
-  resolution: "@formatjs/intl-pluralrules@npm:5.4.5"
+"@formatjs/intl-pluralrules@npm:5.4.6":
+  version: 5.4.6
+  resolution: "@formatjs/intl-pluralrules@npm:5.4.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/00f650891893b743d126dd2bf0d17c1b16a8c9e0e0dd94cd0895e66cb556246116263e9603204e1991924814d0ed3a3503765914aff08181d5e4435dfc5e547c
+  checksum: 10/88aa244e69ccfdf459899f5fa3c64df345f451ef91ce1188eab35b7e37daa225d22120f64be633f2cd8b826ea705d19831915118f555f2d17611ee842a9a86dc
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.4.12":
-  version: 11.4.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.12"
+"@formatjs/intl-relativetimeformat@npm:11.4.13":
+  version: 11.4.13
+  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/f6adca59738cb7f58d2ea985558d8fc45e567406de6fb6e67894afe790e2a9fa1a19d34853afc36805fa4a3d638e29c62d6c6ba3ec2a85628c240081dcdfebc1
+  checksum: 10/c2058d5f29a13aa216d317d309a6ffd7d203f0fe11696b7bd524e17ac3cc22ae50ad56a26dbf18125e4c115a3e75f01e6cf2134a83df6c7916ae6d3fb21a1e9b
   languageName: node
   linkType: hard
 
@@ -6925,10 +6925,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:3.45.1":
-  version: 3.45.1
-  resolution: "core-js@npm:3.45.1"
-  checksum: 10/b9dca79b1af8bb4f0d4af0752ea98d694fe157abaf55513fd4084df32dfd4398f0fc57898b32cdb643c1cecb87b9231c2a2ce535797c80ae328eac6d6078ee61
+"core-js@npm:3.46.0":
+  version: 3.46.0
+  resolution: "core-js@npm:3.46.0"
+  checksum: 10/82993ca487c6cbbf8bbf00e45eeb9705eb63dc2f9c90d7f35696733efbc3f4b52426e1f8dbef0f0b68ea16caa21e4f44cc5490e08120e1cad4a72b031ed8adaa
   languageName: node
   linkType: hard
 
@@ -9182,25 +9182,25 @@ __metadata:
     "@babel/preset-env": "npm:7.28.3"
     "@babel/runtime": "npm:7.28.4"
     "@braintree/sanitize-url": "npm:7.1.1"
-    "@bundle-stats/plugin-webpack-filter": "npm:4.21.4"
+    "@bundle-stats/plugin-webpack-filter": "npm:4.21.5"
     "@codemirror/autocomplete": "npm:6.19.0"
     "@codemirror/commands": "npm:6.9.0"
     "@codemirror/language": "npm:6.11.3"
     "@codemirror/legacy-modes": "npm:6.5.2"
     "@codemirror/search": "npm:6.5.11"
     "@codemirror/state": "npm:6.5.2"
-    "@codemirror/view": "npm:6.38.4"
+    "@codemirror/view": "npm:6.38.5"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
-    "@formatjs/intl-datetimeformat": "npm:6.18.1"
-    "@formatjs/intl-displaynames": "npm:6.8.12"
-    "@formatjs/intl-durationformat": "npm:0.7.5"
+    "@formatjs/intl-datetimeformat": "npm:6.18.2"
+    "@formatjs/intl-displaynames": "npm:6.8.13"
+    "@formatjs/intl-durationformat": "npm:0.7.6"
     "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
-    "@formatjs/intl-listformat": "npm:7.7.12"
-    "@formatjs/intl-locale": "npm:4.2.12"
-    "@formatjs/intl-numberformat": "npm:8.15.5"
-    "@formatjs/intl-pluralrules": "npm:5.4.5"
-    "@formatjs/intl-relativetimeformat": "npm:11.4.12"
+    "@formatjs/intl-listformat": "npm:7.7.13"
+    "@formatjs/intl-locale": "npm:4.2.13"
+    "@formatjs/intl-numberformat": "npm:8.15.6"
+    "@formatjs/intl-pluralrules": "npm:5.4.6"
+    "@formatjs/intl-relativetimeformat": "npm:11.4.13"
     "@fullcalendar/core": "npm:6.1.19"
     "@fullcalendar/daygrid": "npm:6.1.19"
     "@fullcalendar/interaction": "npm:6.1.19"
@@ -9283,7 +9283,7 @@ __metadata:
     browserslist-useragent-regexp: "npm:4.1.3"
     color-name: "npm:2.0.2"
     comlink: "npm:4.4.2"
-    core-js: "npm:3.45.1"
+    core-js: "npm:3.46.0"
     cropperjs: "npm:1.6.2"
     culori: "npm:4.0.2"
     date-fns: "npm:4.1.0"
@@ -9317,7 +9317,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
-    intl-messageformat: "npm:10.7.17"
+    intl-messageformat: "npm:10.7.18"
     js-yaml: "npm:4.1.0"
     jsdom: "npm:27.0.0"
     jszip: "npm:3.10.1"
@@ -9332,7 +9332,7 @@ __metadata:
     lodash.template: "npm:4.5.0"
     luxon: "npm:3.7.2"
     map-stream: "npm:0.0.7"
-    marked: "npm:16.3.0"
+    marked: "npm:16.4.0"
     memoize-one: "npm:6.0.0"
     node-vibrant: "npm:4.0.3"
     object-hash: "npm:3.0.0"
@@ -9355,7 +9355,7 @@ __metadata:
     ts-lit-plugin: "npm:2.0.2"
     typescript: "npm:5.9.3"
     typescript-eslint: "npm:8.46.0"
-    ua-parser-js: "npm:2.0.5"
+    ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:3.2.4"
     vue: "npm:2.7.16"
@@ -9712,15 +9712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.17":
-  version: 10.7.17
-  resolution: "intl-messageformat@npm:10.7.17"
+"intl-messageformat@npm:10.7.18":
+  version: 10.7.18
+  resolution: "intl-messageformat@npm:10.7.18"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.3"
+    "@formatjs/icu-messageformat-parser": "npm:2.11.4"
     tslib: "npm:^2.8.0"
-  checksum: 10/4f8c30c998bfc14eb64894414b94a8923045ab31d7bbf0978dab6621c644d451ff5c533c04ce8128163b74dd6d59061ec1ef3acb1cbab3302d31cbdb21947620
+  checksum: 10/96650d673912763d21bbfa14b50749b992d45f1901092a020e3155961e3c70f4644dd1731c3ecb1207a1eb94d84bedf4c34b1ac8127c29ad6b015b6a2a4045cb
   languageName: node
   linkType: hard
 
@@ -10974,12 +10974,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:16.3.0":
-  version: 16.3.0
-  resolution: "marked@npm:16.3.0"
+"marked@npm:16.4.0":
+  version: 16.4.0
+  resolution: "marked@npm:16.4.0"
   bin:
     marked: bin/marked.js
-  checksum: 10/60497834b9acfb3b3994222509d359ecb9a197c885dfeb77e2050a287cd2f4ab19f00d5597172b47f9e0c54d9e1e13d8b2dd73322b7838599e1f16d1d6283f5b
+  checksum: 10/5174b345ccc61e2030c2eb8abb3e5cbebeb6697a6d2b609f64ffa2ff6e482f5f1e1fda1912db19c747f43971b1fa54ae53c1ab1ce5d2f58566d6db4bc3016833
   languageName: node
   linkType: hard
 
@@ -14379,17 +14379,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:2.0.5":
-  version: 2.0.5
-  resolution: "ua-parser-js@npm:2.0.5"
+"ua-parser-js@npm:2.0.6":
+  version: 2.0.6
+  resolution: "ua-parser-js@npm:2.0.6"
   dependencies:
     detect-europe-js: "npm:^0.1.2"
     is-standalone-pwa: "npm:^0.1.1"
     ua-is-frozen: "npm:^0.1.2"
-    undici: "npm:^7.12.0"
   bin:
     ua-parser-js: script/cli.js
-  checksum: 10/e946cb1c85bfcd0f2d30c7d5e1b605e340bb458432e7e87fc4aa1b2f90117e4220521d4e0bc7dd8c2a5cadd0935dedb5ac434b70efdc0007221288c1d98b3cd5
+  checksum: 10/b0049d3b272979049c7df6af2ec2ce032e4351316b10c33699f6e3f0bec701336f67530cc3ccb363c554b1bb5047b75d2f46575699afacd6e541762ca3861f4d
   languageName: node
   linkType: hard
 
@@ -14452,13 +14451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^7.12.0":
-  version: 7.16.0
-  resolution: "undici@npm:7.16.0"
-  checksum: 10/2bb71672b23d3dc0f56f1b7fb6c936e4487a350db46eaafc03f2f9107f99cdf8e51ecdd32e589e2381ef47a64b6369cfb31f328b2c3ea663023aa47bc5258b9e
-  languageName: node
-  linkType: hard
-
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.1
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.1"