Fix possible undefined entity

* Migrate upgrade dropdown

* Apply suggestion from @MindFreeze

* Update src/panels/config/core/ha-config-section-updates.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0",
+    "@home-assistant/webawesome": "3.0.0-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

src/components/ha-label-picker.ts

@@ -154,7 +154,10 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
     }
 
     return this._getLabelsMemoized(
-      this.hass,
+      this.hass.states,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
       this._labels,
       this.includeDomains,
       this.excludeDomains,

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

@@ -192,7 +192,7 @@ export class HaPickerComboBox extends LitElement {
         @focus=${this._focusList}
         @visibilityChanged=${this._visibilityChanged}
       >
-      </lit-virtualizer> `;
+      </lit-virtualizer>`;
   }
 
   private _renderSectionButtons() {

src/components/ha-section-title.ts

@@ -0,0 +1,28 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-section-title")
+class HaSectionTitle extends LitElement {
+  protected render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = css`
+    :host {
+      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);
+      min-height: var(--ha-space-6);
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-section-title": HaSectionTitle;
+  }
+}

src/components/ha-target-picker.ts

@@ -30,6 +30,7 @@ import {
   areaMeetsFilter,
   deviceMeetsFilter,
   entityRegMeetsFilter,
+  getTargetComboBoxItemType,
   type TargetType,
   type TargetTypeFloorless,
 } from "../data/target";
@@ -47,7 +48,6 @@ import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
 import "./target-picker/ha-target-picker-value-chip";
 
-const EMPTY_SEARCH = "___EMPTY_SEARCH___";
 const SEPARATOR = "________";
 const CREATE_ID = "___create-new-entity___";
 
@@ -634,35 +634,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return undefined;
   }
 
-  private _getRowType = (
-    item:
-      | PickerComboBoxItem
-      | (FloorComboBoxItem & { last?: boolean | undefined })
-      | EntityComboBoxItem
-      | DevicePickerItem
-  ) => {
-    if (
-      (item as FloorComboBoxItem).type === "area" ||
-      (item as FloorComboBoxItem).type === "floor"
-    ) {
-      return (item as FloorComboBoxItem).type;
-    }
-
-    if ("domain" in item) {
-      return "device";
-    }
-
-    if ("stateObj" in item) {
-      return "entity";
-    }
-
-    if (item.id === EMPTY_SEARCH) {
-      return "empty";
-    }
-
-    return "label";
-  };
-
   private _sectionTitleFunction = ({
     firstIndex,
     lastIndex,
@@ -686,7 +657,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return undefined;
     }
 
-    const type = this._getRowType(firstItem as PickerComboBoxItem);
+    const type = getTargetComboBoxItemType(firstItem as PickerComboBoxItem);
     const translationType:
       | "areas"
       | "entities"
@@ -858,7 +829,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
       if (!filterType || filterType === "label") {
         let labels = this._getLabelsMemoized(
-          this.hass,
+          this.hass.states,
+          this.hass.areas,
+          this.hass.devices,
+          this.hass.entities,
           this._labelRegistry,
           includeDomains,
           undefined,
@@ -974,7 +948,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return nothing;
     }
 
-    const type = this._getRowType(item);
+    const type = getTargetComboBoxItemType(item);
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;

src/components/ha-wa-dialog.ts

@@ -235,7 +235,7 @@ export class HaWaDialog extends LitElement {
       }
 
       :host([width="large"]) wa-dialog {
-        --width: min(var(--ha-dialog-width-lg, 720px), var(--full-width));
+        --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
       }
 
       :host([width="full"]) wa-dialog {

src/data/area_floor.ts

@@ -21,11 +21,52 @@ export interface FloorComboBoxItem extends PickerComboBoxItem {
   area?: AreaRegistryEntry;
 }
 
+export interface FloorNestedComboBoxItem extends PickerComboBoxItem {
+  floor?: FloorRegistryEntry;
+  areas: FloorComboBoxItem[];
+}
+
+export interface UnassignedAreasFloorComboBoxItem extends PickerComboBoxItem {
+  areas: FloorComboBoxItem[];
+}
+
 export interface AreaFloorValue {
   id: string;
   type: "floor" | "area";
 }
 
+export const getAreasNestedInFloors = (
+  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[]
+) =>
+  getAreasAndFloorsItems(
+    states,
+    haFloors,
+    haAreas,
+    haDevices,
+    haEntities,
+    formatId,
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeAreas,
+    excludeFloors,
+    true
+  ) as (FloorNestedComboBoxItem | UnassignedAreasFloorComboBoxItem)[];
+
 export const getAreasAndFloors = (
   states: HomeAssistant["states"],
   haFloors: HomeAssistant["floors"],
@@ -40,7 +81,43 @@ export const getAreasAndFloors = (
   entityFilter?: HaEntityPickerEntityFilterFunc,
   excludeAreas?: string[],
   excludeFloors?: string[]
-): FloorComboBoxItem[] => {
+) =>
+  getAreasAndFloorsItems(
+    states,
+    haFloors,
+    haAreas,
+    haDevices,
+    haEntities,
+    formatId,
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeAreas,
+    excludeFloors
+  ) as FloorComboBoxItem[];
+
+const getAreasAndFloorsItems = (
+  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[],
+  nested = false
+): (
+  | FloorComboBoxItem
+  | FloorNestedComboBoxItem
+  | UnassignedAreasFloorComboBoxItem
+)[] => {
   const floors = Object.values(haFloors);
   const areas = Object.values(haAreas);
   const devices = Object.values(haDevices);
@@ -181,7 +258,11 @@ export const getAreasAndFloors = (
 
   const hierarchy = getAreasFloorHierarchy(floors, outputAreas);
 
-  const items: FloorComboBoxItem[] = [];
+  const items: (
+    | FloorComboBoxItem
+    | FloorNestedComboBoxItem
+    | UnassignedAreasFloorComboBoxItem
+  )[] = [];
 
   hierarchy.floors.forEach((f) => {
     const floor = haFloors[f.id];
@@ -196,7 +277,7 @@ export const getAreasAndFloors = (
       })
       .flat();
 
-    items.push({
+    const floorItem: FloorComboBoxItem | FloorNestedComboBoxItem = {
       id: formatId({ id: floor.floor_id, type: "floor" }),
       type: "floor",
       primary: floorName,
@@ -208,41 +289,53 @@ export const getAreasAndFloors = (
         ...floor.aliases,
         ...areaSearchLabels,
       ],
-    });
+    };
 
-    items.push(
-      ...floorAreas.map((area) => {
-        const areaName = computeAreaName(area);
-        return {
-          id: formatId({ id: area.area_id, type: "area" }),
-          type: "area" as const,
-          primary: areaName || area.area_id,
-          area: area,
-          icon: area.icon || undefined,
-          search_labels: [
-            area.area_id,
-            ...(areaName ? [areaName] : []),
-            ...area.aliases,
-          ],
-        };
-      })
-    );
-  });
+    items.push(floorItem);
 
-  items.push(
-    ...hierarchy.areas.map((areaId) => {
-      const area = haAreas[areaId];
-      const areaName = computeAreaName(area) || area.area_id;
+    const floorAreasItems = floorAreas.map((area) => {
+      const areaName = computeAreaName(area);
       return {
         id: formatId({ id: area.area_id, type: "area" }),
         type: "area" as const,
-        primary: areaName,
+        primary: areaName || area.area_id,
         area: area,
         icon: area.icon || undefined,
-        search_labels: [area.area_id, areaName, ...area.aliases],
+        search_labels: [
+          area.area_id,
+          ...(areaName ? [areaName] : []),
+          ...area.aliases,
+        ],
       };
-    })
-  );
+    });
+
+    if (nested && floor) {
+      (floorItem as unknown as FloorNestedComboBoxItem).areas = floorAreasItems;
+    } else {
+      items.push(...floorAreasItems);
+    }
+  });
+
+  const unassignedAreaItems = hierarchy.areas.map((areaId) => {
+    const area = haAreas[areaId];
+    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],
+    };
+  });
+
+  if (nested && unassignedAreaItems.length) {
+    items.push({
+      areas: unassignedAreaItems,
+    } as UnassignedAreasFloorComboBoxItem);
+  } else {
+    items.push(...unassignedAreaItems);
+  }
 
   return items;
 };

src/data/area_registry.ts

@@ -1,7 +1,10 @@
 import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { DeviceRegistryEntry } from "./device_registry";
-import type { EntityRegistryEntry } from "./entity_registry";
+import type {
+  EntityRegistryDisplayEntry,
+  EntityRegistryEntry,
+} from "./entity_registry";
 import type { RegistryEntry } from "./registry";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";
@@ -18,7 +21,10 @@ export interface AreaRegistryEntry extends RegistryEntry {
   temperature_entity_id: string | null;
 }
 
-export type AreaEntityLookup = Record<string, EntityRegistryEntry[]>;
+export type AreaEntityLookup = Record<
+  string,
+  (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
+>;
 
 export type AreaDeviceLookup = Record<string, DeviceRegistryEntry[]>;
 
@@ -69,11 +75,17 @@ export const reorderAreaRegistryEntries = (
   });
 
 export const getAreaEntityLookup = (
-  entities: EntityRegistryEntry[]
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
+  filterHidden = false
 ): AreaEntityLookup => {
   const areaEntityLookup: AreaEntityLookup = {};
   for (const entity of entities) {
-    if (!entity.area_id) {
+    if (
+      !entity.area_id ||
+      (filterHidden &&
+        ((entity as EntityRegistryDisplayEntry).hidden ||
+          (entity as EntityRegistryEntry).hidden_by))
+    ) {
       continue;
     }
     if (!(entity.area_id in areaEntityLookup)) {

src/data/device_registry.ts

@@ -50,7 +50,11 @@ export type DeviceEntityDisplayLookup = Record<
   EntityRegistryDisplayEntry[]
 >;
 
-export type DeviceEntityLookup = Record<string, EntityRegistryEntry[]>;
+export type DeviceEntityLookup<
+  T extends EntityRegistryEntry | EntityRegistryDisplayEntry =
+    | EntityRegistryEntry
+    | EntityRegistryDisplayEntry,
+> = Record<string, T[]>;
 
 export interface DeviceRegistryEntryMutableParams {
   area_id?: string | null;
@@ -107,11 +111,17 @@ export const sortDeviceRegistryByName = (
   );
 
 export const getDeviceEntityLookup = (
-  entities: EntityRegistryEntry[]
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
+  filterHidden = false
 ): DeviceEntityLookup => {
   const deviceEntityLookup: DeviceEntityLookup = {};
   for (const entity of entities) {
-    if (!entity.device_id) {
+    if (
+      !entity.device_id ||
+      (filterHidden &&
+        ((entity as EntityRegistryDisplayEntry).hidden ||
+          (entity as EntityRegistryEntry).hidden_by))
+    ) {
       continue;
     }
     if (!(entity.device_id in deviceEntityLookup)) {

src/data/integration.ts

@@ -1,8 +1,8 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { LocalizeFunc } from "../common/translations/localize";
-import type { HomeAssistant } from "../types";
 import { debounce } from "../common/util/debounce";
+import type { HomeAssistant } from "../types";
 
 export const integrationsWithPanel = {
   bluetooth: "config/bluetooth",
@@ -25,6 +25,8 @@ export type IntegrationType =
   | "entity"
   | "system";
 
+export type DomainManifestLookup = Record<string, IntegrationManifest>;
+
 export interface IntegrationManifest {
   is_built_in: boolean;
   overwrites_built_in?: boolean;

src/data/label_registry.ts

@@ -101,7 +101,10 @@ export const deleteLabelRegistryEntry = (
   });
 
 export const getLabels = (
-  hass: HomeAssistant,
+  hassStates: HomeAssistant["states"],
+  hassAreas: HomeAssistant["areas"],
+  hassDevices: HomeAssistant["devices"],
+  hassEntities: HomeAssistant["entities"],
   labels?: LabelRegistryEntry[],
   includeDomains?: string[],
   excludeDomains?: string[],
@@ -115,8 +118,8 @@ export const getLabels = (
     return [];
   }
 
-  const devices = Object.values(hass.devices);
-  const entities = Object.values(hass.entities);
+  const devices = Object.values(hassDevices);
+  const entities = Object.values(hassEntities);
 
   let deviceEntityLookup: DeviceEntityDisplayLookup = {};
   let inputDevices: DeviceRegistryEntry[] | undefined;
@@ -170,7 +173,7 @@ export const getLabels = (
           return false;
         }
         return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hass.states[entity.entity_id];
+          const stateObj = hassStates[entity.entity_id];
           if (!stateObj) {
             return false;
           }
@@ -181,7 +184,7 @@ export const getLabels = (
         });
       });
       inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hass.states[entity.entity_id];
+        const stateObj = hassStates[entity.entity_id];
         return (
           stateObj.attributes.device_class &&
           includeDeviceClasses.includes(stateObj.attributes.device_class)
@@ -200,7 +203,7 @@ export const getLabels = (
           return false;
         }
         return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hass.states[entity.entity_id];
+          const stateObj = hassStates[entity.entity_id];
           if (!stateObj) {
             return false;
           }
@@ -208,7 +211,7 @@ export const getLabels = (
         });
       });
       inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hass.states[entity.entity_id];
+        const stateObj = hassStates[entity.entity_id];
         if (!stateObj) {
           return false;
         }
@@ -245,7 +248,7 @@ export const getLabels = (
 
   if (areaIds) {
     areaIds.forEach((areaId) => {
-      const area = hass.areas[areaId];
+      const area = hassAreas[areaId];
       area.labels.forEach((label) => usedLabels.add(label));
     });
   }

src/data/target.ts

@@ -1,15 +1,30 @@
 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 { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
+import type { FloorComboBoxItem } from "./area_floor";
 import type { AreaRegistryEntry } from "./area_registry";
-import type { DeviceRegistryEntry } from "./device_registry";
+import type { DevicePickerItem, DeviceRegistryEntry } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
+import type {
+  EntityComboBoxItem,
+  EntityRegistryDisplayEntry,
+} from "./entity_registry";
+
+export const TARGET_SEPARATOR = "________";
 
 export type TargetType = "entity" | "device" | "area" | "label" | "floor";
 export type TargetTypeFloorless = Exclude<TargetType, "floor">;
 
+export interface SingleHassServiceTarget {
+  entity_id?: string;
+  device_id?: string;
+  area_id?: string;
+  floor_id?: string;
+  label_id?: string;
+}
+
 export interface ExtractFromTargetResult {
   missing_areas: string[];
   missing_devices: string[];
@@ -35,6 +50,28 @@ export const extractFromTarget = async (
     target,
   });
 
+export const getTriggersForTarget = async (
+  callWS: HomeAssistant["callWS"],
+  target: HassServiceTarget,
+  expandGroup = true
+) =>
+  callWS<string[]>({
+    type: "get_triggers_for_target",
+    target,
+    expand_group: expandGroup,
+  });
+
+export const getServicesForTarget = async (
+  callWS: HomeAssistant["callWS"],
+  target: HassServiceTarget,
+  expandGroup = true
+) =>
+  callWS<string[]>({
+    type: "get_services_for_target",
+    target,
+    expand_group: expandGroup,
+  });
+
 export const areaMeetsFilter = (
   area: AreaRegistryEntry,
   devices: HomeAssistant["devices"],
@@ -162,3 +199,32 @@ export const entityRegMeetsFilter = (
   }
   return true;
 };
+
+export const getTargetComboBoxItemType = (
+  item:
+    | PickerComboBoxItem
+    | (FloorComboBoxItem & { last?: boolean | undefined })
+    | EntityComboBoxItem
+    | DevicePickerItem
+) => {
+  if (
+    (item as FloorComboBoxItem).type === "area" ||
+    (item as FloorComboBoxItem).type === "floor"
+  ) {
+    return (item as FloorComboBoxItem).type;
+  }
+
+  if ("domain" in item) {
+    return "device";
+  }
+
+  if ("stateObj" in item) {
+    return "entity";
+  }
+
+  if (item.id === "___EMPTY_SEARCH___") {
+    return "empty";
+  }
+
+  return "label";
+};

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -11,6 +11,7 @@ import type {
 import { showToast } from "../../util/toast";
 
 import type { HomeAssistant } from "../../types";
+import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("ha-more-info-add-to")
 export class HaMoreInfoAddTo extends LitElement {
@@ -51,6 +52,7 @@ export class HaMoreInfoAddTo extends LitElement {
           app_payload: action.app_payload,
         },
       });
+      fireEvent(this, "add-to-action-selected");
     } catch (err: any) {
       showToast(this, {
         message: this.hass.localize(
@@ -149,4 +151,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-more-info-add-to": HaMoreInfoAddTo;
   }
+
+  interface HASSDomEvents {
+    "add-to-action-selected": undefined;
+  }
 }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -645,6 +645,7 @@ export class MoreInfoDialog extends LitElement {
                                 <ha-more-info-add-to
                                   .hass=${this.hass}
                                   .entityId=${entityId}
+                                  @add-to-action-selected=${this._goBack}
                                 ></ha-more-info-add-to>
                               `
                             : nothing

src/panels/config/automation/add-automation-element/ha-automation-add-items.ts

@@ -0,0 +1,361 @@
+import {
+  mdiInformationOutline,
+  mdiLabel,
+  mdiPlus,
+  mdiTextureBox,
+} from "@mdi/js";
+import { LitElement, css, html, nothing, type TemplateResult } from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/entity/state-badge";
+import "../../../../components/ha-domain-icon";
+import "../../../../components/ha-floor-icon";
+import "../../../../components/ha-icon-next";
+import "../../../../components/ha-md-list";
+import "../../../../components/ha-md-list-item";
+import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
+import type { ConfigEntry } from "../../../../data/config_entries";
+import type { HomeAssistant } from "../../../../types";
+import type { AddAutomationElementListItem } from "../add-automation-element-dialog";
+
+type Target = [string, string | undefined, string | undefined];
+
+@customElement("ha-automation-add-items")
+export class HaAutomationAddItems extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public items?: {
+    title: string;
+    items: AddAutomationElementListItem[];
+  }[];
+
+  @property() public error?: string;
+
+  @property({ attribute: "select-label" }) public selectLabel!: string;
+
+  @property({ attribute: "empty-label" }) public emptyLabel!: string;
+
+  @property({ attribute: false }) public target?: Target;
+
+  @property({ attribute: false }) public getLabel!: (
+    id: string
+  ) => { name: string; icon?: string } | undefined;
+
+  @property({ attribute: false }) public configEntryLookup: Record<
+    string,
+    ConfigEntry
+  > = {};
+
+  @property({ type: Boolean, attribute: "tooltip-description" })
+  public tooltipDescription = false;
+
+  @state() private _itemsScrolled = false;
+
+  protected render() {
+    return html`<div
+      class=${classMap({
+        items: true,
+        blank: this.error || !this.items || !this.items.length,
+        error: this.error,
+      })}
+      @scroll=${this._onItemsScroll}
+    >
+      ${!this.items && !this.error
+        ? this.selectLabel
+        : this.error
+          ? html`${this.error}
+              <div>${this._renderTarget(this.target)}</div>`
+          : this.items && !this.items.length
+            ? html`${this.emptyLabel}
+              ${this.target
+                ? html`<div>${this._renderTarget(this.target)}</div>`
+                : nothing}`
+            : repeat(
+                this.items,
+                (_, index) => `item-group-${index}`,
+                (itemGroup) =>
+                  this._renderItemList(itemGroup.title, itemGroup.items)
+              )}
+    </div>`;
+  }
+
+  private _renderItemList(title, items?: AddAutomationElementListItem[]) {
+    if (!items || !items.length) {
+      return nothing;
+    }
+
+    return html`
+      <div class="items-title ${this._itemsScrolled ? "scrolled" : ""}">
+        ${title}
+      </div>
+      <ha-md-list>
+        ${repeat(
+          items,
+          (item) => item.key,
+          (item) => html`
+            <ha-md-list-item
+              interactive
+              type="button"
+              .value=${item.key}
+              @click=${this._selected}
+            >
+              <div slot="headline" class=${this.target ? "item-headline" : ""}>
+                ${item.name}${this._renderTarget(this.target)}
+              </div>
+
+              ${!this.tooltipDescription && item.description
+                ? html`<div slot="supporting-text">${item.description}</div>`
+                : nothing}
+              ${item.icon
+                ? html`<span slot="start">${item.icon}</span>`
+                : item.iconPath
+                  ? html`<ha-svg-icon
+                      slot="start"
+                      .path=${item.iconPath}
+                    ></ha-svg-icon>`
+                  : nothing}
+              ${this.tooltipDescription && item.description
+                ? html`<ha-svg-icon
+                      tabindex="0"
+                      id=${`description-tooltip-${item.key}`}
+                      slot="end"
+                      .path=${mdiInformationOutline}
+                      @click=${stopPropagation}
+                    ></ha-svg-icon>
+                    <ha-tooltip
+                      .for=${`description-tooltip-${item.key}`}
+                      @wa-show=${stopPropagation}
+                      @wa-hide=${stopPropagation}
+                      @wa-after-hide=${stopPropagation}
+                      @wa-after-show=${stopPropagation}
+                      >${item.description}</ha-tooltip
+                    > `
+                : nothing}
+              <ha-svg-icon
+                slot="end"
+                class="plus"
+                .path=${mdiPlus}
+              ></ha-svg-icon>
+            </ha-md-list-item>
+          `
+        )}
+      </ha-md-list>
+    `;
+  }
+
+  private _renderTarget = memoizeOne((target?: Target) => {
+    if (!target) {
+      return nothing;
+    }
+
+    return html`<div class="selected-target">
+      ${this._getSelectedTargetIcon(target[0], target[1])}
+      <div class="label">${target[2]}</div>
+    </div>`;
+  });
+
+  private _getSelectedTargetIcon(
+    targetType: string,
+    targetId: string | undefined
+  ): TemplateResult | typeof nothing {
+    if (!targetId) {
+      return nothing;
+    }
+
+    if (targetType === "floor" && this.hass.floors[targetId]) {
+      return html`<ha-floor-icon
+        .floor=${this.hass.floors[targetId]}
+      ></ha-floor-icon>`;
+    }
+
+    if (targetType === "area" && this.hass.areas[targetId]) {
+      const area = this.hass.areas[targetId];
+      if (area.icon) {
+        return html`<ha-icon .icon=${area.icon}></ha-icon>`;
+      }
+      return html`<ha-svg-icon .path=${mdiTextureBox}></ha-svg-icon>`;
+    }
+
+    if (targetType === "device" && this.hass.devices[targetId]) {
+      const device = this.hass.devices[targetId];
+      const configEntry = device.primary_config_entry
+        ? this.configEntryLookup[device.primary_config_entry]
+        : undefined;
+      const domain = configEntry?.domain;
+
+      if (domain) {
+        return html`<ha-domain-icon
+          slot="start"
+          .hass=${this.hass}
+          .domain=${domain}
+          brand-fallback
+        ></ha-domain-icon>`;
+      }
+    }
+
+    if (targetType === "entity" && this.hass.states[targetId]) {
+      const stateObj = this.hass.states[targetId];
+      if (stateObj) {
+        return html`<state-badge
+          .stateObj=${stateObj}
+          .hass=${this.hass}
+          .stateColor=${false}
+        ></state-badge>`;
+      }
+    }
+
+    if (targetType === "label") {
+      const label = this.getLabel(targetId);
+      if (label?.icon) {
+        return html`<ha-icon .icon=${label.icon}></ha-icon>`;
+      }
+      return html`<ha-svg-icon .path=${mdiLabel}></ha-svg-icon>`;
+    }
+
+    return nothing;
+  }
+
+  private _selected(ev) {
+    const item = ev.currentTarget;
+    fireEvent(this, "value-changed", {
+      value: item.value,
+    });
+  }
+
+  @eventOptions({ passive: true })
+  private _onItemsScroll(ev) {
+    const top = ev.target.scrollTop ?? 0;
+    this._itemsScrolled = top > 0;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      flex: 1;
+    }
+    .items.blank {
+      border-radius: var(--ha-border-radius-xl);
+      background-color: var(--ha-color-surface-default);
+      align-items: center;
+      color: var(--ha-color-text-secondary);
+      padding: var(--ha-space-0);
+      margin: var(--ha-space-3) var(--ha-space-4)
+        max(var(--safe-area-inset-bottom), var(--ha-space-3));
+      line-height: var(--ha-line-height-expanded);
+      justify-content: center;
+    }
+
+    .items.error {
+      background-color: var(--ha-color-fill-danger-quiet-resting);
+      color: var(--ha-color-on-danger-normal);
+    }
+    .items ha-md-list {
+      --md-list-item-two-line-container-height: var(--ha-space-12);
+      --md-list-item-leading-space: var(--ha-space-3);
+      --md-list-item-trailing-space: var(--md-list-item-leading-space);
+      --md-list-item-bottom-space: var(--ha-space-2);
+      --md-list-item-top-space: var(--md-list-item-bottom-space);
+      --md-list-item-supporting-text-font: var(--ha-font-family-body);
+      --ha-md-list-item-gap: var(--ha-space-3);
+      gap: var(--ha-space-2);
+      padding: var(--ha-space-0) var(--ha-space-4);
+    }
+    .items ha-md-list ha-md-list-item {
+      border-radius: var(--ha-border-radius-lg);
+      border: 1px solid var(--ha-color-border-neutral-quiet);
+    }
+
+    .items ha-md-list {
+      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-3));
+    }
+
+    .items .item-headline {
+      display: flex;
+      align-items: center;
+      gap: var(--ha-space-1);
+      min-height: var(--ha-space-9);
+      flex-wrap: wrap;
+    }
+
+    .items-title {
+      position: sticky;
+      display: flex;
+      align-items: center;
+      font-weight: var(--ha-font-weight-medium);
+      padding-top: var(--ha-space-2);
+      padding-bottom: var(--ha-space-2);
+      padding-inline-start: var(--ha-space-8);
+      padding-inline-end: var(--ha-space-3);
+      top: 0;
+      z-index: 1;
+      background-color: var(--card-background-color);
+    }
+    ha-bottom-sheet .items-title {
+      padding-top: var(--ha-space-3);
+    }
+    .items-title.scrolled:first-of-type {
+      box-shadow: var(--bar-box-shadow);
+      border-bottom: 1px solid var(--ha-color-border-neutral-quiet);
+    }
+
+    ha-icon-next {
+      width: var(--ha-space-6);
+    }
+
+    ha-svg-icon.plus {
+      color: var(--primary-color);
+    }
+
+    .selected-target {
+      display: inline-flex;
+      gap: var(--ha-space-1);
+      justify-content: center;
+      align-items: center;
+      border-radius: var(--ha-border-radius-md);
+      background: var(--ha-color-fill-neutral-normal-resting);
+      padding: 0 var(--ha-space-2) 0 var(--ha-space-1);
+      color: var(--ha-color-on-neutral-normal);
+      overflow: hidden;
+    }
+    .selected-target .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .selected-target ha-icon,
+    .selected-target ha-svg-icon,
+    .selected-target state-badge,
+    .selected-target ha-domain-icon {
+      display: flex;
+      padding: var(--ha-space-1) 0;
+    }
+
+    .selected-target state-badge {
+      --mdc-icon-size: 20px;
+    }
+    .selected-target state-badge,
+    .selected-target ha-domain-icon {
+      width: 24px;
+      height: 24px;
+      filter: grayscale(100%);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-add-items": HaAutomationAddItems;
+  }
+}

src/panels/config/core/ha-config-section-analytics.ts

@@ -2,9 +2,7 @@ import { mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../data/auth";
 import "../../../layouts/hass-subpage";
@@ -14,6 +12,8 @@ import {
   downloadFileSupported,
   fileDownload,
 } from "../../../util/file_download";
+import "../../../components/ha-dropdown-item";
+import "../../../components/ha-dropdown";
 
 @customElement("ha-config-section-analytics")
 class HaConfigSectionAnalytics extends LitElement {
@@ -33,22 +33,19 @@ class HaConfigSectionAnalytics extends LitElement {
       >
         ${downloadFileSupported(this.hass)
           ? html`
-              <ha-button-menu
-                @action=${this._handleOverflowAction}
+              <ha-dropdown
+                @wa-select=${this._handleOverflowAction}
                 slot="toolbar-icon"
               >
                 <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
                 </ha-icon-button>
-                <ha-list-item graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiDownload}
-                  ></ha-svg-icon>
+                <ha-dropdown-item .value=${"download_device_info"}>
+                  <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.analytics.download_device_info"
                   )}
-                </ha-list-item>
-              </ha-button-menu>
+                </ha-dropdown-item>
+              </ha-dropdown>
             `
           : nothing}
         <div class="content">
@@ -58,9 +55,16 @@ class HaConfigSectionAnalytics extends LitElement {
     `;
   }
 
-  private async _handleOverflowAction(): Promise<void> {
-    const signedPath = await getSignedPath(this.hass, "/api/analytics/devices");
-    fileDownload(signedPath.path);
+  private async _handleOverflowAction(
+    ev: CustomEvent<{ item: { value: string } }>
+  ): Promise<void> {
+    if (ev.detail.item.value === "download_device_info") {
+      const signedPath = await getSignedPath(
+        this.hass,
+        "/api/analytics/devices"
+      );
+      fileDownload(signedPath.path);
+    }
   }
 
   static styles = css`

src/panels/config/core/ha-config-section-updates.ts

@@ -1,4 +1,3 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
@@ -6,13 +5,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-check-list-item";
-import "../../../components/ha-list-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
@@ -33,6 +28,9 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -73,24 +71,25 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-button-menu multi>
+          <ha-dropdown @wa-select=${this._handleOverflowAction}>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-check-list-item
-              left
-              @request-selected=${this._toggleSkipped}
-              .selected=${this._showSkipped}
+
+            <ha-dropdown-item
+              type="checkbox"
+              value="show_skipped"
+              .checked=${this._showSkipped}
             >
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
-            </ha-check-list-item>
+            </ha-dropdown-item>
             ${this._supervisorInfo
               ? html`
-                  <li divider role="separator"></li>
-                  <ha-list-item
-                    @request-selected=${this._toggleBeta}
+                  <wa-divider></wa-divider>
+                  <ha-dropdown-item
+                    value="toggle_beta"
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
                     ${this._supervisorInfo.channel === "stable"
@@ -98,10 +97,10 @@ class HaConfigSectionUpdates extends LitElement {
                       : this.hass.localize(
                           "ui.panel.config.updates.leave_beta"
                         )}
-                  </ha-list-item>
+                  </ha-dropdown-item>
                 `
               : ""}
-          </ha-button-menu>
+          </ha-dropdown>
         </div>
         <div class="content">
           <ha-card outlined>
@@ -133,27 +132,19 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
-    if (ev.detail.source !== "property") {
-      return;
-    }
-
-    this._showSkipped = !this._showSkipped;
-  }
-
-  private async _toggleBeta(
-    ev: CustomEvent<RequestSelectedDetail>
+  private async _handleOverflowAction(
+    ev: CustomEvent<{ item: { value: string } }>
   ): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    if (this._supervisorInfo!.channel === "stable") {
-      showJoinBetaDialog(this, {
-        join: async () => this._setChannel("beta"),
-      });
-    } else {
-      this._setChannel("stable");
+    if (ev.detail.item.value === "toggle_beta") {
+      if (this._supervisorInfo!.channel === "stable") {
+        showJoinBetaDialog(this, {
+          join: async () => this._setChannel("beta"),
+        });
+      } else {
+        this._setChannel("stable");
+      }
+    } else if (ev.detail.item.value === "show_skipped") {
+      this._showSkipped = !this._showSkipped;
     }
   }
 

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1,19 +1,19 @@
 import { consume } from "@lit/context";
 import {
+  mdiCancel,
   mdiChevronRight,
+  mdiDelete,
   mdiDotsVertical,
   mdiMenuDown,
   mdiPlus,
   mdiTextureBox,
-  mdiCancel,
-  mdiDelete,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
@@ -68,8 +68,8 @@ import type {
   DeviceRegistryEntry,
 } from "../../../data/device_registry";
 import {
-  updateDeviceRegistryEntry,
   removeConfigEntryFromDevice,
+  updateDeviceRegistryEntry,
 } from "../../../data/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
@@ -86,8 +86,8 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
 import "../../../layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
@@ -318,7 +318,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         })
       );
 
-      const deviceEntityLookup: DeviceEntityLookup = {};
+      const deviceEntityLookup: DeviceEntityLookup<EntityRegistryEntry> = {};
       for (const entity of entities) {
         if (!entity.device_id) {
           continue;

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

@@ -52,6 +52,8 @@ 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-text-quiet: var(--ha-color-text-secondary);
+
     --wa-color-text-normal: var(--ha-color-text-primary);
     --wa-color-surface-default: var(--card-background-color);
     --wa-color-surface-raised: var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff));
@@ -62,5 +64,7 @@ export const waColorStyles = css`
 
     --wa-focus-ring-color: var(--ha-color-neutral-60);
     --wa-shadow-l: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
+
+    --wa-color-text-normal: var(--ha-color-text-primary);
   }
 `;

src/resources/theme/wa.globals.ts

@@ -9,12 +9,16 @@ export const waMainStyles = css`
     --wa-focus-ring-offset: 2px;
     --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-focus-ring-color);
 
+    --wa-space-xs: var(--ha-space-2);
+    --wa-space-m: var(--ha-space-4);
     --wa-space-l: var(--ha-space-6);
     --wa-space-xl: var(--ha-space-8);
 
     --wa-form-control-padding-block: 0.75em;
+    --wa-form-control-value-line-height: var(--ha-line-height-condensed);
 
     --wa-font-weight-action: var(--ha-font-weight-medium);
+    --wa-transition-normal: 150ms;
     --wa-transition-fast: 75ms;
     --wa-transition-easing: ease;
 
@@ -28,6 +32,7 @@ export const waMainStyles = css`
 
     --wa-line-height-condensed: var(--ha-line-height-condensed);
 
+    --wa-font-size-m: var(--ha-font-size-m);
     --wa-shadow-s: var(--ha-box-shadow-s);
     --wa-shadow-m: var(--ha-box-shadow-m);
     --wa-shadow-l: var(--ha-box-shadow-l);

src/translations/en.json

@@ -4009,7 +4009,25 @@
             "item_pasted": "{item} pasted",
             "ctrl": "Ctrl",
             "del": "Del",
+            "targets": "Targets",
+            "select_target": "Select a target",
+            "home": "Home",
+            "unassigned": "Unassigned",
             "blocks": "Blocks",
+            "show_more": "Show more",
+            "unassigned_entities": "Unassigned entities",
+            "unassigned_devices": "Unassigned devices",
+            "empty_section_search": {
+              "block": "No blocks found for {term}",
+              "entity": "No entities found for {term}",
+              "device": "No devices found for {term}",
+              "area": "No areas or floors found for {term}",
+              "label": "No labels found for {term}"
+            },
+            "load_target_items_failed": "Failed to load target items for",
+            "other_areas": "Other areas",
+            "services": "Services",
+            "helpers": "Helpers",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -4017,7 +4035,10 @@
               "learn_more": "Learn more about triggers",
               "triggered": "Triggered",
               "add": "Add trigger",
-              "empty_search": "No triggers found for {term}",
+              "empty_search": {
+                "global": "No triggers and targets found for {term}",
+                "item": "No triggers found for {term}"
+              },
               "id": "Trigger ID",
               "optional": "Optional",
               "edit_id": "Edit ID",
@@ -4038,6 +4059,7 @@
               "copied_to_clipboard": "Trigger copied to clipboard",
               "cut_to_clipboard": "Trigger cut to clipboard",
               "select": "Select a trigger",
+              "no_items_for_target": "No triggers available for",
               "groups": {
                 "device": {
                   "label": "Device"
@@ -4279,7 +4301,10 @@
               "description": "All conditions added here need to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
               "learn_more": "Learn more about conditions",
               "add": "Add condition",
-              "empty_search": "No conditions and blocks found for {term}",
+              "empty_search": {
+                "global": "No conditions, blocks and targets found for {term}",
+                "item": "No conditions found for {term}"
+              },
               "add_building_block": "Add building block",
               "test": "Test",
               "testing_error": "Condition did not pass",
@@ -4302,6 +4327,7 @@
               "copied_to_clipboard": "Condition copied to clipboard",
               "cut_to_clipboard": "Condition cut to clipboard",
               "select": "Select a condition",
+              "no_items_for_target": "No conditions available for",
               "groups": {
                 "device": {
                   "label": "Device"
@@ -4447,7 +4473,10 @@
               "description": "All actions added here will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.",
               "learn_more": "Learn more about actions",
               "add": "Add action",
-              "empty_search": "No actions and blocks found for {term}",
+              "empty_search": {
+                "global": "No actions, blocks and targets found for {term}",
+                "item": "No actions found for {term}"
+              },
               "add_building_block": "Add building block",
               "invalid_action": "Invalid action",
               "run": "Run action",
@@ -4472,6 +4501,7 @@
               "copied_to_clipboard": "Action copied to clipboard",
               "cut_to_clipboard": "Action cut to clipboard",
               "select": "Select an action",
+              "no_items_for_target": "No actions available for",
               "groups": {
                 "device_id": {
                   "label": "Device"

yarn.lock

@@ -1940,9 +1940,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@home-assistant/webawesome@npm:3.0.0"
+"@home-assistant/webawesome@npm:3.0.0-ha.0":
+  version: 3.0.0-ha.0
+  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.0"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1953,7 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/03400894cfee8548fd5b1f5c56d31d253830e704b18ba69d36ce6b761d8b1bef2fb52cffba8d9b033033bb582f2f51a2d6444d82622f66d70150e2104fcb49e2
+  checksum: 10/2034d498d5b26bb0573ebc2c9aadd144604bb48c04becbae0c67b16857d8e5d6562626e795974362c3fc41e9b593a9005595d8b5ff434b1569b2d724af13043b
   languageName: node
   linkType: hard
 
@@ -9226,7 +9226,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0"
+    "@home-assistant/webawesome": "npm:3.0.0-ha.0"
     "@lezer/highlight": "npm:1.2.3"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"