Merge branch 'dev' of github.com:home-assistant/frontend into copilot/migrate-overflow-menus-to-ha-dropdown

Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>

package.json

@@ -218,7 +218,7 @@
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
     "typescript-eslint": "8.49.0",
-    "vite-tsconfig-paths": "6.0.1",
+    "vite-tsconfig-paths": "5.1.4",
     "vitest": "4.0.15",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",

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

@@ -61,6 +61,7 @@ class HaDevicesPicker extends LitElement {
         (entityId) => html`
           <div>
             <ha-device-picker
+              allow-custom-entity
               .curValue=${entityId}
               .hass=${this.hass}
               .deviceFilter=${this.deviceFilter}
@@ -78,6 +79,7 @@ class HaDevicesPicker extends LitElement {
       )}
       <div>
         <ha-device-picker
+          allow-custom-entity
           .hass=${this.hass}
           .helper=${this.helper}
           .deviceFilter=${this.deviceFilter}

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

@@ -99,6 +99,7 @@ class HaEntitiesPicker extends LitElement {
             (entityId) => html`
               <div class="entity">
                 <ha-entity-picker
+                  allow-custom-entity
                   .curValue=${entityId}
                   .hass=${this.hass}
                   .includeDomains=${this.includeDomains}
@@ -128,6 +129,7 @@ class HaEntitiesPicker extends LitElement {
       </ha-sortable>
       <div>
         <ha-entity-picker
+          allow-custom-entity
           .hass=${this.hass}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}

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

@@ -277,13 +277,12 @@ export class HaEntityPicker extends LitElement {
         .disabled=${this.disabled}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
-        .required=${this.required}
         .label=${this.label}
-        .placeholder=${placeholder}
         .helper=${this.helper}
-        .value=${this.addButton ? undefined : this.value}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${this._notFoundLabel}
+        .placeholder=${placeholder}
+        .value=${this.addButton ? undefined : this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
@@ -291,7 +290,6 @@ export class HaEntityPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .searchKeys=${entityComboBoxKeys}
-        use-top-label
         .addButtonLabel=${this.addButton
           ? this.hass.localize("ui.components.entity.entity-picker.add")
           : undefined}

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

@@ -471,14 +471,14 @@ export class HaStatisticPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
-        .disabled=${this.disabled}
         .label=${this.label}
-        .placeholder=${placeholder}
-        .value=${this.value}
+        .disabled=${this.disabled}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.statistic-picker.no_statistics"
         )}
+        .placeholder=${placeholder}
+        .value=${this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-addon-picker.ts

@@ -1,29 +1,29 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
+import { stringCompare } from "../common/string/compare";
+import type { HassioAddonInfo } from "../data/hassio/addon";
 import { fetchHassioAddonsInfo } from "../data/hassio/addon";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./ha-alert";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
-import "./ha-generic-picker";
-import type { HaGenericPicker } from "./ha-generic-picker";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
-const SEARCH_KEYS = [
-  { name: "primary", weight: 10 },
-  { name: "secondary", weight: 8 },
-  { name: "search_labels.description", weight: 6 },
-  { name: "search_labels.repository", weight: 5 },
-];
-
-const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`
   <ha-combo-box-item type="button">
-    <span slot="headline">${item.primary}</span>
-    <span slot="supporting-text">${item.secondary}</span>
+    <span slot="headline">${item.name}</span>
+    <span slot="supporting-text">${item.slug}</span>
     ${item.icon
-      ? html` <img alt="" slot="start" .src=${item.icon} /> `
+      ? html`
+          <img
+            alt=""
+            slot="start"
+            .src="/api/hassio/addons/${item.slug}/icon"
+          />
+        `
       : nothing}
   </ha-combo-box-item>
 `;
@@ -38,22 +38,22 @@ class HaAddonPicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _addons?: PickerComboBoxItem[];
+  @state() private _addons?: HassioAddonInfo[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
 
-  @query("ha-generic-picker") private _genericPicker!: HaGenericPicker;
+  @query("ha-combo-box") private _comboBox!: HaComboBox;
 
   @state() private _error?: string;
 
   public open() {
-    this._genericPicker?.open();
+    this._comboBox?.open();
   }
 
   public focus() {
-    this._genericPicker?.focus();
+    this._comboBox?.focus();
   }
 
   protected firstUpdated() {
@@ -61,34 +61,29 @@ class HaAddonPicker extends LitElement {
   }
 
   protected render() {
-    const label =
-      this.label === undefined && this.hass
-        ? this.hass.localize("ui.components.addon-picker.addon")
-        : this.label;
-
     if (this._error) {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
     if (!this._addons) {
       return nothing;
     }
-
     return html`
-      <ha-generic-picker
+      <ha-combo-box
         .hass=${this.hass}
-        .autofocus=${this.autofocus}
-        .label=${label}
-        .valueRenderer=${this._valueRenderer}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.addon-picker.addon")
+          : this.label}
+        .value=${this._value}
         .required=${this.required}
-        .value=${this.value}
-        .getItems=${this._getItems}
-        .searchKeys=${SEARCH_KEYS}
-        .rowRenderer=${rowRenderer}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
+        .renderer=${rowRenderer}
+        .items=${this._addons}
+        item-value-path="slug"
+        item-id-path="slug"
+        item-label-path="name"
         @value-changed=${this._addonChanged}
-      >
-      </ha-generic-picker>
+      ></ha-combo-box>
     `;
   }
 
@@ -98,19 +93,9 @@ class HaAddonPicker extends LitElement {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)
-          .map((addon) => ({
-            id: addon.slug,
-            primary: addon.name,
-            secondary: addon.slug,
-            icon: addon.icon
-              ? `/api/hassio/addons/${addon.slug}/icon`
-              : undefined,
-            search_labels: {
-              description: addon.description || null,
-              repository: addon.repository || null,
-            },
-            sorting_label: [addon.name, addon.slug].filter(Boolean).join("_"),
-          }));
+          .sort((a, b) =>
+            stringCompare(a.name, b.name, this.hass.locale.language)
+          );
       } else {
         this._error = this.hass.localize(
           "ui.components.addon-picker.error.no_supervisor"
@@ -123,8 +108,6 @@ class HaAddonPicker extends LitElement {
     }
   }
 
-  private _getItems = () => this._addons!;
-
   private get _value() {
     return this.value || "";
   }
@@ -145,17 +128,6 @@ class HaAddonPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
-
-  private _valueRenderer = (itemId: string) => {
-    const item = this._addons!.find((addon) => addon.id === itemId);
-    return html`${item?.icon
-        ? html`<img
-            slot="start"
-            alt=${item.primary ?? "Unknown"}
-            .src=${item.icon}
-          />`
-        : nothing}<span slot="headline">${item?.primary || "Unknown"}</span>`;
-  };
 }
 
 declare global {

src/components/ha-area-picker.ts

@@ -51,6 +51,9 @@ export class HaAreaPicker extends LitElement {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
+  @property({ type: Boolean, attribute: "show-label" })
+  public showLabel = false;
+
   /**
    * Show only areas with entities from specific domains.
    * @type {Array}
@@ -363,19 +366,16 @@ export class HaAreaPicker extends LitElement {
   };
 
   protected render(): TemplateResult {
-    const baseLabel =
-      this.label ?? this.hass.localize("ui.components.area-picker.area");
+    const placeholder =
+      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
-    // Only show label if there's no floor
-    let label: string | undefined = baseLabel;
-    if (this.value && baseLabel) {
+    let showLabel = this.showLabel;
+    if (this.value) {
       const area = this.hass.areas[this.value];
       if (area) {
         const { floor } = getAreaContext(area, this.hass.floors);
-        if (floor) {
-          label = undefined;
-        }
+        showLabel = !floor && this.showLabel;
       }
     }
 
@@ -383,12 +383,14 @@ export class HaAreaPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        .label=${label}
+        .label=${this.label}
         .helper=${this.helper}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
         .disabled=${this.disabled}
         .required=${this.required}
+        .placeholder=${placeholder}
+        .showLabel=${showLabel}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-color-picker.ts

@@ -1,23 +1,25 @@
 import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
-import "./ha-generic-picker";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import type { PickerValueRenderer } from "./ha-picker-field";
+import "./ha-list-item";
+import "./ha-md-divider";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
 
 @customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public label?: string;
 
   @property() public helper?: string;
 
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public value?: string;
 
   @property({ type: String, attribute: "default_color" })
@@ -31,178 +33,137 @@ export class HaColorPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
+  @query("ha-select") private _select?: HaSelect;
 
-  render() {
-    const effectiveValue = this.value ?? this.defaultColor ?? "";
-
-    return html`
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .hideClearIcon=${!this.value && !!this.defaultColor}
-        .label=${this.label}
-        .helper=${this.helper}
-        .value=${effectiveValue}
-        .getItems=${this._getItems}
-        .rowRenderer=${this._rowRenderer}
-        .valueRenderer=${this._valueRenderer}
-        @value-changed=${this._valueChanged}
-      >
-      </ha-generic-picker>
-    `;
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Refresh layout options when the field is connected to the DOM to ensure current value displayed
+    this._select?.layoutOptions();
   }
 
-  private _getItems = () =>
-    this._getColors(
-      this.includeNone,
-      this.includeState,
-      this.defaultColor,
-      this.value
-    );
-
-  private _getColors = (
-    includeNone: boolean,
-    includeState: boolean,
-    defaultColor: string | undefined,
-    currentValue: string | undefined
-  ): PickerComboBoxItem[] => {
-    const items: PickerComboBoxItem[] = [];
-
-    const defaultSuffix = this.hass.localize(
-      "ui.components.color-picker.default"
-    );
-
-    const addDefaultSuffix = (label: string, isDefault: boolean) =>
-      isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
-
-    if (includeNone) {
-      const noneLabel =
-        this.hass.localize("ui.components.color-picker.none") || "None";
-      items.push({
-        id: "none",
-        primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
-        icon_path: mdiInvertColorsOff,
-        sorting_label: noneLabel,
-      });
-    }
-
-    if (includeState) {
-      const stateLabel =
-        this.hass.localize("ui.components.color-picker.state") || "State";
-      items.push({
-        id: "state",
-        primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
-        icon_path: mdiPalette,
-        sorting_label: stateLabel,
-      });
-    }
-
-    Array.from(THEME_COLORS).forEach((color) => {
-      const themeLabel =
-        this.hass.localize(
-          `ui.components.color-picker.colors.${color}` as LocalizeKeys
-        ) || color;
-      items.push({
-        id: color,
-        primary: addDefaultSuffix(themeLabel, defaultColor === color),
-        sorting_label: themeLabel,
-      });
+  private _valueSelected(ev) {
+    ev.stopPropagation();
+    if (!this.isConnected) return;
+    const value = ev.target.value;
+    this.value = value === this.defaultColor ? undefined : value;
+    fireEvent(this, "value-changed", {
+      value: this.value,
     });
+  }
 
-    const isSpecial =
-      currentValue === "none" ||
-      currentValue === "state" ||
-      THEME_COLORS.has(currentValue || "");
+  render() {
+    const value = this.value || this.defaultColor || "";
 
-    const hasValue = currentValue && currentValue.length > 0;
-
-    if (hasValue && !isSpecial) {
-      items.push({
-        id: currentValue!,
-        primary: currentValue!,
-        sorting_label: currentValue!,
-      });
-    }
-
-    return items;
-  };
-
-  private _rowRenderer: (
-    item: PickerComboBoxItem,
-    index?: number
-  ) => ReturnType<typeof html> = (item) => html`
-    <ha-combo-box-item type="button" compact>
-      ${item.id === "none"
-        ? html`<ha-svg-icon
-            slot="start"
-            .path=${mdiInvertColorsOff}
-          ></ha-svg-icon>`
-        : item.id === "state"
-          ? html`<ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>`
-          : html`<span slot="start">
-              ${this._renderColorCircle(item.id)}
-            </span>`}
-      <span slot="headline">${item.primary}</span>
-    </ha-combo-box-item>
-  `;
-
-  private _valueRenderer: PickerValueRenderer = (value: string) => {
-    if (value === "none") {
-      return html`
-        <ha-svg-icon slot="start" .path=${mdiInvertColorsOff}></ha-svg-icon>
-        <span slot="headline">
-          ${this.hass.localize("ui.components.color-picker.none")}
-        </span>
-      `;
-    }
-    if (value === "state") {
-      return html`
-        <ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>
-        <span slot="headline">
-          ${this.hass.localize("ui.components.color-picker.state")}
-        </span>
-      `;
-    }
+    const isCustom = !(
+      THEME_COLORS.has(value) ||
+      value === "none" ||
+      value === "state"
+    );
 
     return html`
-      <span slot="start">${this._renderColorCircle(value)}</span>
-      <span slot="headline">
-        ${this.hass.localize(
-          `ui.components.color-picker.colors.${value}` as LocalizeKeys
-        ) || value}
-      </span>
+      <ha-select
+        .icon=${Boolean(value)}
+        .label=${this.label}
+        .value=${value}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        @closed=${stopPropagation}
+        @selected=${this._valueSelected}
+        fixedMenuPosition
+        naturalMenuWidth
+        .clearable=${!this.defaultColor}
+      >
+        ${value
+          ? html`
+              <span slot="icon">
+                ${value === "none"
+                  ? html`
+                      <ha-svg-icon path=${mdiInvertColorsOff}></ha-svg-icon>
+                    `
+                  : value === "state"
+                    ? html`<ha-svg-icon path=${mdiPalette}></ha-svg-icon>`
+                    : this._renderColorCircle(value || "grey")}
+              </span>
+            `
+          : nothing}
+        ${this.includeNone
+          ? html`
+              <ha-list-item value="none" graphic="icon">
+                ${this.hass.localize("ui.components.color-picker.none")}
+                ${this.defaultColor === "none"
+                  ? ` (${this.hass.localize("ui.components.color-picker.default")})`
+                  : nothing}
+                <ha-svg-icon
+                  slot="graphic"
+                  path=${mdiInvertColorsOff}
+                ></ha-svg-icon>
+              </ha-list-item>
+            `
+          : nothing}
+        ${this.includeState
+          ? html`
+              <ha-list-item value="state" graphic="icon">
+                ${this.hass.localize("ui.components.color-picker.state")}
+                ${this.defaultColor === "state"
+                  ? ` (${this.hass.localize("ui.components.color-picker.default")})`
+                  : nothing}
+                <ha-svg-icon slot="graphic" path=${mdiPalette}></ha-svg-icon>
+              </ha-list-item>
+            `
+          : nothing}
+        ${this.includeState || this.includeNone
+          ? html`<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+          : nothing}
+        ${Array.from(THEME_COLORS).map(
+          (color) => html`
+            <ha-list-item .value=${color} graphic="icon">
+              ${this.hass.localize(
+                `ui.components.color-picker.colors.${color}` as LocalizeKeys
+              ) || color}
+              ${this.defaultColor === color
+                ? ` (${this.hass.localize("ui.components.color-picker.default")})`
+                : nothing}
+              <span slot="graphic">${this._renderColorCircle(color)}</span>
+            </ha-list-item>
+          `
+        )}
+        ${isCustom
+          ? html`
+              <ha-list-item .value=${value} graphic="icon">
+                ${value}
+                <span slot="graphic">${this._renderColorCircle(value)}</span>
+              </ha-list-item>
+            `
+          : nothing}
+      </ha-select>
     `;
-  };
+  }
 
   private _renderColorCircle(color: string) {
     return html`
       <span
+        class="circle-color"
         style=${styleMap({
           "--circle-color": computeCssColor(color),
-          display: "block",
-          "background-color": "var(--circle-color, var(--divider-color))",
-          border: "1px solid var(--outline-color)",
-          "border-radius": "var(--ha-border-radius-pill)",
-          width: "20px",
-          height: "20px",
-          "box-sizing": "border-box",
         })}
       ></span>
     `;
   }
 
-  private _valueChanged(ev: CustomEvent<{ value?: string }>) {
-    ev.stopPropagation();
-    const selected = ev.detail.value;
-    const normalized =
-      selected && selected === this.defaultColor
-        ? undefined
-        : (selected ?? undefined);
-    this.value = normalized;
-    fireEvent(this, "value-changed", { value: this.value });
-  }
+  static styles = css`
+    .circle-color {
+      display: block;
+      background-color: var(--circle-color, var(--divider-color));
+      border: 1px solid var(--outline-color);
+      border-radius: var(--ha-border-radius-pill);
+      width: 20px;
+      height: 20px;
+      box-sizing: border-box;
+    }
+    ha-select {
+      width: 100%;
+    }
+  `;
 }
 
 declare global {

src/components/ha-config-entry-picker.ts

@@ -57,9 +57,10 @@ class HaConfigEntryPicker extends LitElement {
     return html`
       <ha-generic-picker
         .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
+        .placeholder=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.config-entry-picker.config_entry")
           : this.label}
+        show-label
         .value=${this.value}
         .required=${this.required}
         .disabled=${this.disabled}

src/components/ha-floor-picker.ts

@@ -389,14 +389,14 @@ export class HaFloorPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        .disabled=${this.disabled}
         .label=${this.label}
         .helper=${this.helper}
-        .placeholder=${placeholder}
+        .disabled=${this.disabled}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.floor-picker.no_floors"
         )}
+        .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-generic-picker.ts

@@ -7,10 +7,8 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
-import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
-import { isIosApp } from "../util/is_ios";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
@@ -22,18 +20,39 @@ import type {
   PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
+import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 
 @customElement("ha-generic-picker")
-export class HaGenericPicker extends PickerMixin(LitElement) {
+export class HaGenericPicker extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
+  @property() public value?: string;
+
+  @property() public icon?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
+
+  @property({ attribute: "show-label", type: Boolean })
+  public showLabel = false;
+
   /** To prevent lags, getItems needs to be memoized */
   @property({ attribute: false })
   public getItems!: (
@@ -47,6 +66,9 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   @property({ attribute: false })
   public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
 
+  @property({ attribute: false })
+  public valueRenderer?: PickerValueRenderer;
+
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
@@ -96,11 +118,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
 
   @property({ attribute: "selected-section" }) public selectedSection?: string;
 
-  @property({ type: Boolean, attribute: "use-top-label" })
-  public useTopLabel = false;
-
-  @property({ attribute: "custom-value-label" })
-  public customValueLabel?: string;
+  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
 
   @query(".container") private _containerElement?: HTMLDivElement;
 
@@ -131,13 +149,11 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _unsubscribeTinyKeys?: () => void;
 
   protected render() {
-    // Only show label if it's not a top label and there is a value.
-    const label = this.useTopLabel && this.value ? undefined : this.label;
-
-    return html`<div class="container">
-        ${this.useTopLabel && this.label
-          ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-          : nothing}
+    return html`
+      ${this.label
+        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
+        : nothing}
+      <div class="container">
         <div id="picker">
           <slot name="field">
             ${this.addButtonLabel && !this.value
@@ -157,20 +173,14 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  .unknown=${this._unknownValue(
-                    this.allowCustomValue,
-                    this.value,
-                    this.getItems()
-                  )}
+                  .unknown=${this._unknownValue(this.value, this.getItems())}
                   .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
                   @clear=${this._clear}
                   .icon=${this.icon}
-                  .image=${this.image}
-                  .label=${label}
+                  .showLabel=${this.showLabel}
                   .placeholder=${this.placeholder}
-                  .helper=${this.helper}
                   .value=${this.value}
                   .valueRenderer=${this.valueRenderer}
                   .required=${this.required}
@@ -178,7 +188,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
                   .invalid=${this.invalid}
                   .hideClearIcon=${this.hideClearIcon}
                 >
-                  <slot name="start"></slot>
                 </ha-picker-field>`}
           </slot>
         </div>
@@ -217,7 +226,8 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
               </ha-bottom-sheet>`
             : nothing}
       </div>
-      ${this._renderHelper()}`;
+      ${this._renderHelper()}
+    `;
   }
 
   private _renderComboBox(dialogMode = false) {
@@ -226,7 +236,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     }
     return html`
       <ha-picker-combo-box
-        id="combo-box"
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
         .label=${this.searchLabel}
@@ -243,24 +252,13 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
         .sectionTitleFunction=${this.sectionTitleFunction}
         .selectedSection=${this.selectedSection}
         .searchKeys=${this.searchKeys}
-        .customValueLabel=${this.customValueLabel}
       ></ha-picker-combo-box>
     `;
   }
 
   private _unknownValue = memoizeOne(
-    (
-      allowCustomValue: boolean,
-      value?: string,
-      items?: (PickerComboBoxItem | string)[]
-    ) => {
-      if (
-        allowCustomValue ||
-        value === undefined ||
-        value === null ||
-        value === "" ||
-        !items
-      ) {
+    (value?: string, items?: (PickerComboBoxItem | string)[]) => {
+      if (value === undefined || value === null || value === "" || !items) {
         return false;
       }
 
@@ -286,15 +284,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _dialogOpened = () => {
     this._opened = true;
     requestAnimationFrame(() => {
-      if (this.hass && isIosApp(this.hass)) {
-        this.hass.auth.external!.fireMessage({
-          type: "focus_element",
-          payload: {
-            element_id: "combo-box",
-          },
-        });
-        return;
-      }
       this._comboBox?.focus();
     });
   };
@@ -321,7 +310,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     this._newValue = value;
   }
 
-  private _clear(e: CustomEvent) {
+  private _clear(e) {
     e.stopPropagation();
     this._setValue(undefined);
   }

src/components/ha-icon-picker.ts

@@ -113,6 +113,7 @@ export class HaIconPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         allow-custom-value
+        show-label
         .getItems=${this._getIconPickerItems}
         .helper=${this.helper}
         .disabled=${this.disabled}
@@ -121,7 +122,7 @@ export class HaIconPicker extends LitElement {
         .invalid=${this.invalid}
         .rowRenderer=${rowRenderer}
         .icon=${this._icon}
-        .label=${this.label}
+        .placeholder=${this.label}
         .value=${this._value}
         .searchFn=${this._filterIcons}
         .notFoundLabel=${this.hass?.localize(
@@ -130,7 +131,6 @@ export class HaIconPicker extends LitElement {
         popover-placement="bottom-start"
         @value-changed=${this._valueChanged}
       >
-        <slot name="start"></slot>
       </ha-generic-picker>
     `;
   }

src/components/ha-language-picker.ts

@@ -116,11 +116,6 @@ export class HaLanguagePicker extends LitElement {
     > `;
 
   protected render() {
-    const label =
-      this.label ??
-      (this.hass?.localize("ui.components.language-picker.language") ||
-        "Language");
-
     const value =
       this.value ??
       (this.required && !this.disabled ? this._getItems()[0].id : this.value);
@@ -134,7 +129,10 @@ export class HaLanguagePicker extends LitElement {
         .emptyLabel=${this.hass?.localize(
           "ui.components.language-picker.no_languages"
         ) || "No languages available"}
-        .label=${label}
+        .placeholder=${this.label ??
+        (this.hass?.localize("ui.components.language-picker.language") ||
+          "Language")}
+        show-label
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}

src/components/ha-navigation-picker.ts

@@ -1,17 +1,55 @@
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import { fetchConfig } from "../data/lovelace/config/types";
+import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
 import { getPanelIcon, getPanelTitle } from "../data/panel";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
-import "./ha-generic-picker";
+import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
+import "./ha-combo-box";
+import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box-item";
 import "./ha-icon";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+
+interface NavigationItem {
+  path: string;
+  icon: string;
+  title: string;
+}
+
+const DEFAULT_ITEMS: NavigationItem[] = [];
+
+const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
+  <ha-combo-box-item type="button">
+    <ha-icon .icon=${item.icon} slot="start"></ha-icon>
+    <span slot="headline">${item.title || item.path}</span>
+    ${item.title
+      ? html`<span slot="supporting-text">${item.path}</span>`
+      : nothing}
+  </ha-combo-box-item>
+`;
+
+const createViewNavigationItem = (
+  prefix: string,
+  view: LovelaceViewRawConfig,
+  index: number
+) => ({
+  path: `/${prefix}/${view.path ?? index}`,
+  icon: view.icon ?? "mdi:view-compact",
+  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
+});
+
+const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
+  path: `/${panel.url_path}`,
+  icon: getPanelIcon(panel) || "mdi:view-dashboard",
+  title: getPanelTitle(hass, panel) || "",
+});
 
 @customElement("ha-navigation-picker")
 export class HaNavigationPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public label?: string;
 
@@ -23,51 +61,46 @@ export class HaNavigationPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @state() private _loading = true;
+  @state() private _opened = false;
 
-  protected firstUpdated() {
-    this._loadNavigationItems();
-  }
+  private navigationItemsLoaded = false;
 
-  private _navigationItems: PickerComboBoxItem[] = [];
+  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
 
-  protected render() {
+  @query("ha-combo-box", true) private comboBox!: HaComboBox;
+
+  protected render(): TemplateResult {
     return html`
-      <ha-generic-picker
+      <ha-combo-box
         .hass=${this.hass}
-        .value=${this._loading ? undefined : this.value}
+        item-value-path="path"
+        item-label-path="path"
+        .value=${this._value}
         allow-custom-value
-        .placeholder=${this.label}
+        .filteredItems=${this.navigationItems}
+        .label=${this.label}
         .helper=${this.helper}
-        .disabled=${this._loading || this.disabled}
+        .disabled=${this.disabled}
         .required=${this.required}
-        .getItems=${this._getItems}
-        .valueRenderer=${this._valueRenderer}
-        .customValueLabel=${this.hass.localize(
-          "ui.components.navigation-picker.add_custom_path"
-        )}
+        .renderer=${rowRenderer}
+        @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
       >
-      </ha-generic-picker>
+      </ha-combo-box>
     `;
   }
 
-  private _valueRenderer = (itemId: string) => {
-    const item = this._navigationItems.find((navItem) => navItem.id === itemId);
-    return html`
-      ${item?.icon
-        ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
-        : nothing}
-      <span slot="headline">${item?.primary || itemId}</span>
-      ${item?.primary
-        ? html`<span slot="supporting-text">${itemId}</span>`
-        : nothing}
-    `;
-  };
-
-  private _getItems = () => this._navigationItems;
+  private async _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+    if (this._opened && !this.navigationItemsLoaded) {
+      this._loadNavigationItems();
+    }
+  }
 
   private async _loadNavigationItems() {
+    this.navigationItemsLoaded = true;
+
     const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
       id,
       ...panel,
@@ -91,47 +124,27 @@ export class HaNavigationPicker extends LitElement {
 
     const panelViewConfig = new Map(viewConfigs);
 
-    this._navigationItems = [];
+    this.navigationItems = [];
 
     for (const panel of panels) {
-      const path = `/${panel.url_path}`;
-      const panelTitle = getPanelTitle(this.hass, panel);
-      const primary = panelTitle || path;
-      this._navigationItems.push({
-        id: path,
-        primary,
-        secondary: panelTitle ? path : undefined,
-        icon: getPanelIcon(panel) || "mdi:view-dashboard",
-        sorting_label: [
-          primary.startsWith("/") ? `zzz${primary}` : primary,
-          path,
-        ]
-          .filter(Boolean)
-          .join("_"),
-      });
+      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
 
       const config = panelViewConfig.get(panel.id);
 
       if (!config || !("views" in config)) continue;
 
-      config.views.forEach((view, index) => {
-        const viewPath = `/${panel.url_path}/${view.path ?? index}`;
-        const viewPrimary =
-          view.title ?? (view.path ? titleCase(view.path) : `${index}`);
-        this._navigationItems.push({
-          id: viewPath,
-          secondary: viewPath,
-          icon: view.icon ?? "mdi:view-compact",
-          primary: viewPrimary,
-          sorting_label: [
-            viewPrimary.startsWith("/") ? `zzz${viewPrimary}` : viewPrimary,
-            viewPath,
-          ].join("_"),
-        });
-      });
+      config.views.forEach((view, index) =>
+        this.navigationItems.push(
+          createViewNavigationItem(panel.url_path, view, index)
+        )
+      );
     }
 
-    this._loading = false;
+    this.comboBox.filteredItems = this.navigationItems;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !this._opened || changedProps.has("_opened");
   }
 
   private _valueChanged(ev: ValueChangedEvent<string>) {
@@ -139,18 +152,61 @@ export class HaNavigationPicker extends LitElement {
     this._setValue(ev.detail.value);
   }
 
-  private _setValue(value = "") {
+  private _setValue(value: string) {
     this.value = value;
     fireEvent(
       this,
       "value-changed",
-      { value: this.value },
+      { value: this._value },
       {
         bubbles: false,
         composed: false,
       }
     );
   }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const filterString = ev.detail.value.toLowerCase();
+    const characterCount = filterString.length;
+    if (characterCount >= 2) {
+      const filteredItems: NavigationItem[] = [];
+
+      this.navigationItems.forEach((item) => {
+        if (
+          item.path.toLowerCase().includes(filterString) ||
+          item.title.toLowerCase().includes(filterString)
+        ) {
+          filteredItems.push(item);
+        }
+      });
+
+      if (filteredItems.length > 0) {
+        this.comboBox.filteredItems = filteredItems;
+      } else {
+        this.comboBox.filteredItems = [];
+      }
+    } else {
+      this.comboBox.filteredItems = this.navigationItems;
+    }
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  static styles = css`
+    ha-icon,
+    ha-svg-icon {
+      color: var(--primary-text-color);
+      position: relative;
+      bottom: 0px;
+    }
+    *[slot="prefix"] {
+      margin-right: 8px;
+      margin-inline-end: 8px;
+      margin-inline-start: initial;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiMagnify, mdiMinusBoxOutline, mdiPlus } from "@mdi/js";
+import { mdiMagnify, mdiMinusBoxOutline } from "@mdi/js";
 import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -91,9 +91,6 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
-  @property({ attribute: "custom-value-label" })
-  public customValueLabel?: string;
-
   @property() public label?: string;
 
   @property() public value?: string;
@@ -190,15 +187,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   }
 
   protected render() {
-    const searchLabel =
-      this.label ??
-      (this.allowCustomValue
-        ? (this.hass?.localize("ui.components.combo-box.search_or_custom") ??
-          "Search | Add custom value")
-        : (this.hass?.localize("ui.common.search") ?? "Search"));
-
     return html`<ha-textfield
-        .label=${searchLabel}
+        .label=${this.label ??
+        this.hass?.localize("ui.common.search") ??
+        "Search"}
         @input=${this._filterChanged}
       ></ha-textfield>
       ${this._renderSectionButtons()}
@@ -446,23 +438,13 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         );
       }
 
-      if (this.allowCustomValue && searchString) {
-        filteredItems.push({
-          id: searchString,
-          primary:
-            this.customValueLabel ??
-            this.hass?.localize("ui.components.combo-box.add_custom_item") ??
-            "Add custom item",
-          secondary: `"${searchString}"`,
-          icon_path: mdiPlus,
-        });
-      }
-
       this._items = filteredItems as PickerComboBoxItem[];
     }
 
     this._selectedItemIndex = -1;
-    this._valuePinned = true;
+    if (this._virtualizerElement) {
+      this._virtualizerElement.scrollTo(0, 0);
+    }
   };
 
   private _toggleSection(ev: Event) {
@@ -657,7 +639,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     typeof item === "string" ? item : item?.id;
 
   private _getInitialSelectedIndex() {
-    if (!this._virtualizerElement || this._search || !this.value) {
+    if (!this._virtualizerElement || !this.value) {
       return 0;
     }
 

src/components/ha-picker-field.ts

@@ -9,9 +9,7 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
-import { PickerMixin } from "../mixins/picker-mixin";
 import { localizeContext } from "../data/context";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
@@ -28,7 +26,32 @@ declare global {
 export type PickerValueRenderer = (value: string) => TemplateResult<1>;
 
 @customElement("ha-picker-field")
-export class HaPickerField extends PickerMixin(LitElement) {
+export class HaPickerField extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property() public value?: string;
+
+  @property() public icon?: string;
+
+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ type: Boolean, reflect: true }) public unknown = false;
+
+  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
+
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;
+
+  @property({ attribute: "show-label", type: Boolean })
+  public showLabel = false;
+
+  @property({ attribute: false })
+  public valueRenderer?: PickerValueRenderer;
+
   @property({ type: Boolean, reflect: true }) public invalid = false;
 
   @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
@@ -43,48 +66,31 @@ export class HaPickerField extends PickerMixin(LitElement) {
   }
 
   protected render() {
-    const hasValue = !!this.value;
+    const hasValue = !!this.value?.length;
 
     const showClearIcon =
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
 
-    const placeholderText = this.placeholder ?? this.label;
-
     const overlineLabel =
-      this.label && hasValue
-        ? html`<span slot="overline"
-            >${this.label}${this.required ? " *" : ""}</span
-          >`
+      this.showLabel && hasValue && this.placeholder
+        ? html`<span slot="overline">${this.placeholder}</span>`
         : nothing;
 
     const headlineContent = hasValue
       ? this.valueRenderer
         ? this.valueRenderer(this.value ?? "")
         : html`<span slot="headline">${this.value}</span>`
-      : placeholderText
+      : this.placeholder
         ? html`<span slot="headline" class="placeholder">
-            ${placeholderText}${this.required ? " *" : ""}
+            ${this.placeholder}
           </span>`
         : nothing;
 
     return html`
-      <ha-combo-box-item
-        aria-label=${ifDefined(this.label || this.placeholder)}
-        .disabled=${this.disabled}
-        type="button"
-        compact
-      >
-        ${this.image
-          ? html`<img
-              alt=${this.label ?? ""}
-              slot="start"
-              .src=${this.image}
-              crossorigin="anonymous"
-              referrerpolicy="no-referrer"
-            />`
-          : this.icon
-            ? html`<ha-icon slot="start" .icon=${this.icon}></ha-icon>`
-            : html`<slot name="start"></slot>`}
+      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
+        ${this.icon
+          ? html`<ha-icon slot="start" .icon=${this.icon}></ha-icon>`
+          : nothing}
         ${overlineLabel}${headlineContent}
         ${this.unknown
           ? html`<div slot="supporting-text" class="unknown">
@@ -111,7 +117,7 @@ export class HaPickerField extends PickerMixin(LitElement) {
     `;
   }
 
-  private _clear(e: CustomEvent) {
+  private _clear(e) {
     e.stopPropagation();
     fireEvent(this, "clear");
   }

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

@@ -28,6 +28,7 @@ export class HaAddonSelector extends LitElement {
       .helper=${this.helper}
       .disabled=${this.disabled}
       .required=${this.required}
+      allow-custom-entity
     ></ha-addon-picker>`;
   }
 

src/components/ha-selector/ha-selector-config-entry.ts

@@ -29,6 +29,7 @@ export class HaConfigEntrySelector extends LitElement {
       .disabled=${this.disabled}
       .required=${this.required}
       .integration=${this.selector.config_entry?.integration}
+      allow-custom-entity
     ></ha-config-entry-picker>`;
   }
 

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

@@ -107,6 +107,7 @@ export class HaDeviceSelector extends LitElement {
           .placeholder=${this.placeholder}
           .disabled=${this.disabled}
           .required=${this.required}
+          allow-custom-entity
         ></ha-device-picker>
       `;
     }

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

@@ -66,14 +66,15 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
-        .placeholder=${this.placeholder}
         .helper=${this.helper}
         .includeEntities=${this.selector.entity?.include_entities}
         .excludeEntities=${this.selector.entity?.exclude_entities}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
+        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
+        allow-custom-entity
       ></ha-entity-picker>`;
     }
 
@@ -82,13 +83,13 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
-        .placeholder=${this.placeholder}
         .helper=${this.helper}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
         .reorder=${this.selector.entity.reorder ?? false}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
+        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-entities-picker>

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

@@ -52,7 +52,7 @@ export class HaIconSelector extends LitElement {
         ${!placeholder && stateObj
           ? html`
               <ha-state-icon
-                slot="start"
+                slot="fallback"
                 .hass=${this.hass}
                 .stateObj=${stateObj}
               ></ha-state-icon>

src/components/ha-service-picker.ts

@@ -135,6 +135,7 @@ class HaServicePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
+        allow-custom-value
         .notFoundLabel=${this.hass.localize(
           "ui.components.service-picker.no_match"
         )}

src/components/ha-wa-dialog.ts

@@ -13,7 +13,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";
 
@@ -185,21 +184,6 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (isIosApp(this.hass)) {
-        const element = this.querySelector("[autofocus]");
-        if (element !== null) {
-          if (!element.id) {
-            element.id = "ha-wa-dialog-autofocus";
-          }
-          this.hass.auth.external!.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
       (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
     });
   };
@@ -251,12 +235,6 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           );
           max-width: var(--ha-dialog-max-width, var(--safe-width));
         }
-        @media (prefers-reduced-motion: reduce) {
-          wa-dialog {
-            --show-duration: 0ms;
-            --hide-duration: 0ms;
-          }
-        }
 
         :host([width="small"]) wa-dialog {
           --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));

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

@@ -132,9 +132,9 @@ class HaUserPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
+        .notFoundLabel=${this._notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
-        .notFoundLabel=${this._notFoundLabel}
         .getItems=${this._getItems}
         .valueRenderer=${this._valueRenderer}
         .rowRenderer=${this._rowRenderer}

src/dialogs/more-info/const.ts

@@ -88,6 +88,7 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
   "select",
   "text",
   "update",
+  "event",
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */

src/external_app/external_messaging.ts

@@ -176,13 +176,6 @@ interface EMOutgoingMessageAddEntityTo extends EMMessage {
   };
 }
 
-interface EMOutgoingMessageFocusElement extends EMMessage {
-  type: "focus_element";
-  payload: {
-    element_id: string;
-  };
-}
-
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -204,8 +197,7 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
   | EMOutgoingMessageImprovConfigureDevice
-  | EMOutgoingMessageAddEntityTo
-  | EMOutgoingMessageFocusElement;
+  | EMOutgoingMessageAddEntityTo;
 
 export interface EMIncomingMessageRestart {
   id: number;

src/mixins/picker-mixin.ts

@@ -1,38 +0,0 @@
-import type { ReactiveElement } from "lit";
-import { property } from "lit/decorators";
-import type { Constructor } from "../types";
-import type { PickerValueRenderer } from "../components/ha-picker-field";
-
-export const PickerMixin = <T extends Constructor<ReactiveElement>>(
-  superClass: T
-) => {
-  class PickerFieldClass extends superClass {
-    @property({ type: Boolean }) public disabled = false;
-
-    @property({ type: Boolean }) public required = false;
-
-    @property() public icon?: string;
-
-    @property() public image?: string;
-
-    @property() public label?: string;
-
-    @property() public placeholder?: string;
-
-    @property() public helper?: string;
-
-    @property() public value?: string;
-
-    @property({ type: Boolean, reflect: true }) public unknown = false;
-
-    @property({ attribute: "unknown-item-text" })
-    public unknownItemText?: string;
-
-    @property({ attribute: "hide-clear-icon", type: Boolean })
-    public hideClearIcon = false;
-
-    @property({ attribute: false })
-    public valueRenderer?: PickerValueRenderer;
-  }
-  return PickerFieldClass;
-};

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -160,7 +160,7 @@ class DialogFloorDetail extends LitElement {
               ${!this._icon
                 ? html`
                     <ha-floor-icon
-                      slot="start"
+                      slot="fallback"
                       .floor=${{ level: this._level }}
                     ></ha-floor-icon>
                   `

src/panels/config/areas/ha-config-area-page.ts

@@ -16,8 +16,10 @@ import { slugify } from "../../../common/string/slugify";
 import { groupBy } from "../../../common/util/group-by";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list";
@@ -226,32 +228,23 @@ class HaConfigAreaPage extends LitElement {
             ></ha-icon>`
           : nothing}${area.name}`}
       >
-        <ha-button-menu slot="toolbar-icon">
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-list-item
-            graphic="icon"
-            .entry=${area}
-            @click=${this._showSettings}
-          >
+          <ha-dropdown-item value="settings" .entry=${area}>
+            <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.areas.edit_settings")}
-            <ha-svg-icon slot="graphic" .path=${mdiPencil}> </ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <ha-list-item
-            class="warning"
-            graphic="icon"
-            @click=${this._deleteConfirm}
-          >
+          <ha-dropdown-item value="delete" variant="danger">
+            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.areas.editor.delete")}
-            <ha-svg-icon class="warning" slot="graphic" .path=${mdiDelete}>
-            </ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
 
         <div class="container">
           <div class="column">
@@ -613,6 +606,20 @@ class HaConfigAreaPage extends LitElement {
     this._related = await findRelated(this.hass, "area", this.areaId);
   }
 
+  private _handleMenuAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem & {
+      entry: AreaRegistryEntry;
+    };
+    switch (item.value) {
+      case "settings":
+        this._openDialog(item.entry);
+        break;
+      case "delete":
+        this._deleteConfirm();
+        break;
+    }
+  }
+
   private _showSettings(ev: MouseEvent) {
     const entry: AreaRegistryEntry = (ev.currentTarget! as any).entry;
     this._openDialog(entry);

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

@@ -1,4 +1,4 @@
-import type { ActionDetail } from "@material/mwc-list";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiDelete,
   mdiDotsVertical,
@@ -24,10 +24,12 @@ import {
   type AreasFloorHierarchy,
 } from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-floor-icon";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list-item";
 import "../../../components/ha-sortable";
 import type { HaSortableOptions } from "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
@@ -196,44 +198,43 @@ export class HaConfigAreasDashboard extends LitElement {
                       ${floor.name}
                     </h2>
                     <div class="actions">
-                      <ha-button-menu
+                      <ha-dropdown
                         .floor=${floor}
-                        @action=${this._handleFloorAction}
+                        @wa-select=${this._handleFloorAction}
                       >
                         <ha-icon-button
                           slot="trigger"
                           .path=${mdiDotsVertical}
                         ></ha-icon-button>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
+                        <ha-dropdown-item value="reorder">
+                          <ha-svg-icon
+                            slot="icon"
                             .path=${mdiSort}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
+                          ></ha-svg-icon>
+                          ${this.hass.localize(
                             "ui.panel.config.areas.picker.reorder"
-                          )}</ha-list-item
-                        >
-                        <li divider role="separator"></li>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
+                          )}
+                        </ha-dropdown-item>
+                        <wa-divider></wa-divider>
+                        <ha-dropdown-item value="edit">
+                          <ha-svg-icon
+                            slot="icon"
                             .path=${mdiPencil}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
+                          ></ha-svg-icon>
+                          ${this.hass.localize(
                             "ui.panel.config.areas.picker.floor.edit_floor"
-                          )}</ha-list-item
-                        >
-                        <ha-list-item class="warning" graphic="icon"
-                          ><ha-svg-icon
-                            class="warning"
+                          )}
+                        </ha-dropdown-item>
+                        <ha-dropdown-item value="delete" variant="danger">
+                          <ha-svg-icon
+                            slot="icon"
                             .path=${mdiDelete}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
+                          ></ha-svg-icon>
+                          ${this.hass.localize(
                             "ui.panel.config.areas.picker.floor.delete_floor"
-                          )}</ha-list-item
-                        >
-                      </ha-button-menu>
+                          )}
+                        </ha-dropdown-item>
+                      </ha-dropdown>
                     </div>
                   </div>
                   <ha-sortable
@@ -273,23 +274,23 @@ export class HaConfigAreasDashboard extends LitElement {
                       )}
                     </h2>
                     <div class="actions">
-                      <ha-button-menu
-                        @action=${this._handleUnassignedAreasAction}
+                      <ha-dropdown
+                        @wa-select=${this._handleUnassignedAreasAction}
                       >
                         <ha-icon-button
                           slot="trigger"
                           .path=${mdiDotsVertical}
                         ></ha-icon-button>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
+                        <ha-dropdown-item value="reorder">
+                          <ha-svg-icon
+                            slot="icon"
                             .path=${mdiSort}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
+                          ></ha-svg-icon>
+                          ${this.hass.localize(
                             "ui.panel.config.areas.picker.reorder"
-                          )}</ha-list-item
-                        >
-                      </ha-button-menu>
+                          )}
+                        </ha-dropdown-item>
+                      </ha-dropdown>
                     </div>
                   </div>
                   <ha-sortable
@@ -533,23 +534,25 @@ export class HaConfigAreasDashboard extends LitElement {
     }, time);
   }
 
-  private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
+  private _handleFloorAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
     const floor = (ev.currentTarget as any).floor;
-    switch (ev.detail.index) {
-      case 0:
+    switch (item.value) {
+      case "reorder":
         this._showReorderDialog();
         break;
-      case 1:
+      case "edit":
         this._editFloor(floor);
         break;
-      case 2:
+      case "delete":
         this._deleteFloor(floor);
         break;
     }
   }
 
-  private _handleUnassignedAreasAction(ev: CustomEvent<ActionDetail>) {
-    if (ev.detail.index === 0) {
+  private _handleUnassignedAreasAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    if (item.value === "reorder") {
       this._showReorderDialog();
     }
   }

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -148,7 +148,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
               @value-changed=${this._iconChanged}
             >
               <ha-domain-icon
-                slot="start"
+                slot="fallback"
                 domain=${this._params.domain}
                 .hass=${this.hass}
               >
@@ -176,10 +176,8 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             id="category"
             .hass=${this.hass}
             .scope=${this._params.domain}
-            .label=${this.hass.localize(
-              "ui.components.category-picker.category"
-            )}
             .value=${this._entryUpdates.category}
+            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-category-picker>`
         : nothing}
@@ -196,6 +194,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             id="area"
             .hass=${this.hass}
             .value=${this._entryUpdates.area}
+            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-area-picker>`
         : nothing}

src/panels/config/automation/condition/types/ha-automation-condition-zone.ts

@@ -40,6 +40,7 @@ export class HaZoneCondition extends LitElement {
         @value-changed=${this._entityPicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
+        allow-custom-entity
         .entityFilter=${zoneAndLocationFilter}
       ></ha-entity-picker>
       <ha-entity-picker
@@ -50,6 +51,7 @@ export class HaZoneCondition extends LitElement {
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
+        allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
     `;

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

@@ -1,7 +1,7 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
-  mdiChevronRight,
   mdiCog,
   mdiContentDuplicate,
   mdiDelete,
@@ -23,7 +23,7 @@ import { differenceInDays } from "date-fns";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
@@ -50,6 +50,9 @@ import type {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
@@ -58,12 +61,7 @@ import "../../../components/ha-filter-entities";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu";
-import type { HaMdMenu } from "../../../components/ha-md-menu";
-import "../../../components/ha-md-menu-item";
-import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
-import "../../../components/ha-sub-menu";
+
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@@ -175,8 +173,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  @state() private _overflowAutomation?: AutomationItem;
-
   @storage({ key: "automation-table-sort", state: false, subscribe: false })
   private _activeSorting?: SortingChangedEvent;
 
@@ -204,8 +200,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   })
   private _activeHiddenColumns?: string[];
 
-  @query("#overflow-menu") private _overflowMenu!: HaMdMenu;
-
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
   });
@@ -368,12 +362,81 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           moveable: false,
           hideable: false,
           template: (automation) => html`
-            <ha-icon-button
+            <ha-dropdown
               .automation=${automation}
-              .label=${this.hass.localize("ui.common.overflow_menu")}
-              .path=${mdiDotsVertical}
-              @click=${this._showOverflowMenu}
-            ></ha-icon-button>
+              @wa-select=${this._handleRowOverflowMenu}
+            >
+              <ha-icon-button
+                slot="trigger"
+                .label=${this.hass.localize("ui.common.overflow_menu")}
+                .path=${mdiDotsVertical}
+              ></ha-icon-button>
+              <ha-dropdown-item value="show-info">
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiInformationOutline}
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.show_info"
+                )}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="show-settings">
+                <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.show_settings"
+                )}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="edit-category">
+                <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.panel.config.automation.picker.${automation.category ? "edit_category" : "assign_category"}`
+                )}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="run-actions">
+                <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
+                ${this.hass.localize("ui.panel.config.automation.editor.run")}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="show-trace">
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiTransitConnection}
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.show_trace"
+                )}
+              </ha-dropdown-item>
+              <wa-divider></wa-divider>
+              <ha-dropdown-item value="duplicate">
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiContentDuplicate}
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.duplicate"
+                )}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="toggle">
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${automation.state === "off"
+                    ? mdiToggleSwitch
+                    : mdiToggleSwitchOffOutline}
+                ></ha-svg-icon>
+                ${automation.state === "off"
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.enable"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.automation.editor.disable"
+                    )}
+              </ha-dropdown-item>
+              <ha-dropdown-item value="delete" variant="danger">
+                <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.delete"
+                )}
+              </ha-dropdown-item>
+            </ha-dropdown>
           `,
         },
       };
@@ -381,17 +444,38 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  private _showOverflowMenu = (ev) => {
-    if (
-      this._overflowMenu.open &&
-      ev.target === this._overflowMenu.anchorElement
-    ) {
-      this._overflowMenu.close();
-      return;
+  private _handleRowOverflowMenu = (ev: CustomEvent) => {
+    const item = ev.detail.item as HaDropdownItem;
+    const automation = (
+      (ev.currentTarget as HTMLElement).closest("ha-dropdown") as any
+    ).automation;
+
+    switch (item.value) {
+      case "show-info":
+        this._showInfo(automation);
+        break;
+      case "show-settings":
+        this._showSettings(automation);
+        break;
+      case "edit-category":
+        this._editCategory(automation);
+        break;
+      case "run-actions":
+        this._runActions(automation);
+        break;
+      case "show-trace":
+        this._showTrace(automation);
+        break;
+      case "duplicate":
+        this._duplicate(automation);
+        break;
+      case "toggle":
+        this._toggle(automation);
+        break;
+      case "delete":
+        this._deleteConfirm(automation);
+        break;
     }
-    this._overflowAutomation = ev.target.automation;
-    this._overflowMenu.anchorElement = ev.target;
-    this._overflowMenu.show();
   };
 
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
@@ -409,34 +493,38 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
+  private _renderCategoryItems = (submenu = false) =>
+    html`${this._categories?.map(
         (category) =>
-          html`<ha-md-menu-item
-            .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_category"
+            data-category=${category.category_id}
           >
             ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-md-menu-item>`
+              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
+            ${category.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="__no_category__"
+      >
+        ${this.hass.localize(
+          "ui.panel.config.automation.picker.bulk_actions.no_category"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="__create_category__"
+      >
+        ${this.hass.localize("ui.panel.config.category.editor.add")}
+      </ha-dropdown-item>`;
 
-    const labelItems = html`${this._labels?.map((label) => {
+  private _renderLabelItems = (submenu = false) =>
+    html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
         const selected = this._selected.every((entityId) =>
           this.hass.entities[entityId]?.labels.includes(label.label_id)
@@ -446,14 +534,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-md-menu-item
+        return html`<ha-dropdown-item
+          .slot=${submenu ? "submenu" : ""}
           .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
+          data-action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
-          keep-open
         >
           <ha-checkbox
-            slot="start"
+            slot="icon"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -467,46 +555,50 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-md-menu-item>`;
+        </ha-dropdown-item>`;
       })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="__create_label__"
+        @click=${this._bulkCreateLabel}
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
 
-    const areaItems = html`${Object.values(this.hass.areas).map(
+  private _renderAreaItems = (submenu = false) =>
+    html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-md-menu-item
-            .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_area"
+            data-area=${area.area_id}
           >
             ${area.icon
-              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="start"
+                  slot="icon"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            <div slot="headline">${area.name}</div>
-          </ha-md-menu-item>`
+            ${area.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.no_area"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.add_area"
-          )}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="__no_area__">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.no_area"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="__create_area__"
+      >
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.add_area"
+        )}
+      </ha-dropdown-item>`;
 
+  protected render(): TemplateResult {
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -527,9 +619,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}
@@ -541,16 +633,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
         has-filters
-        .filters=${
-          Object.values(this._filters).filter((filter) =>
-            Array.isArray(filter.value)
-              ? filter.value.length
-              : filter.value &&
-                Object.values(filter.value).some((val) =>
-                  Array.isArray(val) ? val.length : val
-                )
-          ).length
-        }
+        .filters=${Object.values(this._filters).filter((filter) =>
+          Array.isArray(filter.value)
+            ? filter.value.length
+            : filter.value &&
+              Object.values(filter.value).some((val) =>
+                Array.isArray(val) ? val.length : val
+              )
+        ).length}
         .columns=${this._columns(
           this.narrow,
           this.hass.localize,
@@ -643,13 +733,31 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
-          ${
-            !this.narrow
-              ? html`<ha-md-button-menu slot="selection-bar">
+        ${!this.narrow
+          ? html`<ha-dropdown
+                slot="selection-bar"
+                @wa-select=${this._handleOverflowMenuSelect}
+              >
+                <ha-assist-chip
+                  slot="trigger"
+                  .label=${this.hass.localize(
+                    "ui.panel.config.automation.picker.bulk_actions.move_category"
+                  )}
+                >
+                  <ha-svg-icon
+                    slot="trailing-icon"
+                    .path=${mdiMenuDown}
+                  ></ha-svg-icon>
+                </ha-assist-chip>
+                ${this._renderCategoryItems()}
+              </ha-dropdown>
+              ${labelsInOverflow
+                ? nothing
+                : html`<ha-dropdown slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        "ui.panel.config.automation.picker.bulk_actions.add_label"
                       )}
                     >
                       <ha-svg-icon
@@ -657,179 +765,123 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${categoryItems}
-                  </ha-md-button-menu>
-                  ${labelsInOverflow
-                    ? nothing
-                    : html`<ha-md-button-menu slot="selection-bar">
-                        <ha-assist-chip
-                          slot="trigger"
-                          .label=${this.hass.localize(
-                            "ui.panel.config.automation.picker.bulk_actions.add_label"
-                          )}
-                        >
-                          <ha-svg-icon
-                            slot="trailing-icon"
-                            .path=${mdiMenuDown}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                        ${labelItems}
-                      </ha-md-button-menu>`}
-                  ${areasInOverflow
-                    ? nothing
-                    : html`<ha-md-button-menu slot="selection-bar">
-                        <ha-assist-chip
-                          slot="trigger"
-                          .label=${this.hass.localize(
-                            "ui.panel.config.devices.picker.bulk_actions.move_area"
-                          )}
-                        >
-                          <ha-svg-icon
-                            slot="trailing-icon"
-                            .path=${mdiMenuDown}
-                          ></ha-svg-icon>
-                        </ha-assist-chip>
-                        ${areaItems}
-                      </ha-md-button-menu>`}`
-              : nothing
-          }
-          <ha-md-button-menu has-overflow slot="selection-bar">
-            ${
-              this.narrow
-                ? html`<ha-assist-chip
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
+                    ${this._renderLabelItems()}
+                  </ha-dropdown>`}
+              ${areasInOverflow
+                ? nothing
+                : html`<ha-dropdown
+                    slot="selection-bar"
+                    @wa-select=${this._handleOverflowMenuSelect}
                   >
-                    <ha-svg-icon
-                      slot="trailing-icon"
-                      .path=${mdiMenuDown}
-                    ></ha-svg-icon>
-                  </ha-assist-chip>`
-                : html`<ha-icon-button
-                    .path=${mdiDotsVertical}
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_action"
-                    )}
-                    slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
+                    <ha-assist-chip
+                      slot="trigger"
+                      .label=${this.hass.localize(
+                        "ui.panel.config.devices.picker.bulk_actions.move_area"
+                      )}
+                    >
                       <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
+                        slot="trailing-icon"
+                        .path=${mdiMenuDown}
                       ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || labelsInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || areasInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.picker.bulk_actions.move_area"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            <ha-md-menu-item .clickAction=${this._handleBulkEnable}>
-              <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.enable"
+                    </ha-assist-chip>
+                    ${this._renderAreaItems()}
+                  </ha-dropdown>`}`
+          : nothing}
+        <ha-dropdown
+          has-overflow
+          slot="selection-bar"
+          @wa-select=${this._handleOverflowMenuSelect}
+        >
+          ${this.narrow
+            ? html`<ha-assist-chip
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
                 )}
-              </div>
-            </ha-md-menu-item>
-            <ha-md-menu-item .clickAction=${this._handleBulkDisable}>
-              <ha-svg-icon
-                slot="start"
-                .path=${mdiToggleSwitchOffOutline}
-              ></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_actions.disable"
+                slot="trigger"
+              >
+                <ha-svg-icon
+                  slot="trailing-icon"
+                  .path=${mdiMenuDown}
+                ></ha-svg-icon>
+              </ha-assist-chip>`
+            : html`<ha-icon-button
+                .path=${mdiDotsVertical}
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
                 )}
-              </div>
-            </ha-md-menu-item>
-          </ha-md-button-menu>
-        ${
-          !this.automations.length
-            ? html`<div class="empty" slot="empty">
-                <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
-                <h1>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_header"
-                  )}
-                </h1>
-                <p>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_text_1"
-                  )}
-                </p>
-                <p>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.empty_text_2",
-                    { user: this.hass.user?.name || "Alice" }
-                  )}
-                </p>
-                <ha-button
-                  href=${documentationUrl(
-                    this.hass,
-                    "/docs/automation/editor/"
-                  )}
-                  target="_blank"
-                  appearance="plain"
-                  rel="noreferrer"
-                  size="small"
-                >
-                  ${this.hass.localize("ui.panel.config.common.learn_more")}
-                  <ha-svg-icon slot="end" .path=${mdiOpenInNew}> </ha-svg-icon>
-                </ha-button>
-              </div>`
-            : nothing
-        }
+                slot="trigger"
+              ></ha-icon-button>`}
+          ${this.narrow
+            ? html`<ha-dropdown-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_actions.move_category"
+                )}
+                ${this._renderCategoryItems(true)}
+              </ha-dropdown-item>`
+            : nothing}
+          ${this.narrow || labelsInOverflow
+            ? html`<ha-dropdown-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_actions.add_label"
+                )}
+                ${this._renderLabelItems(true)}
+              </ha-dropdown-item>`
+            : nothing}
+          ${this.narrow || areasInOverflow
+            ? html`<ha-dropdown-item>
+                ${this.hass.localize(
+                  "ui.panel.config.devices.picker.bulk_actions.move_area"
+                )}
+                ${this._renderAreaItems(true)}
+              </ha-dropdown-item>`
+            : nothing}
+          <ha-dropdown-item value="enable">
+            <ha-svg-icon slot="icon" .path=${mdiToggleSwitch}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.bulk_actions.enable"
+            )}
+          </ha-dropdown-item>
+          <ha-dropdown-item value="disable">
+            <ha-svg-icon
+              slot="icon"
+              .path=${mdiToggleSwitchOffOutline}
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.bulk_actions.disable"
+            )}
+          </ha-dropdown-item>
+        </ha-dropdown>
+        ${!this.automations.length
+          ? html`<div class="empty" slot="empty">
+              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
+              <h1>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.empty_header"
+                )}
+              </h1>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.empty_text_1"
+                )}
+              </p>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.empty_text_2",
+                  { user: this.hass.user?.name || "Alice" }
+                )}
+              </p>
+              <ha-button
+                href=${documentationUrl(this.hass, "/docs/automation/editor/")}
+                target="_blank"
+                appearance="plain"
+                rel="noreferrer"
+                size="small"
+              >
+                ${this.hass.localize("ui.panel.config.common.learn_more")}
+                <ha-svg-icon slot="end" .path=${mdiOpenInNew}> </ha-svg-icon>
+              </ha-button>
+            </div>`
+          : nothing}
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -841,80 +893,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
       </hass-tabs-subpage-data-table>
-      <ha-md-menu id="overflow-menu" positioning="fixed">
-        <ha-md-menu-item .clickAction=${this._showInfo}>
-          <ha-svg-icon
-            .path=${mdiInformationOutline}
-            slot="start"
-          ></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
-          </div>
-        </ha-md-menu-item>
-
-        <ha-md-menu-item .clickAction=${this._showSettings}>
-          <ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              "ui.panel.config.automation.picker.show_settings"
-            )}
-          </div>
-        </ha-md-menu-item>
-        <ha-md-menu-item .clickAction=${this._editCategory}>
-          <ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              `ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
-            )}
-          </div>
-        </ha-md-menu-item>
-        <ha-md-menu-item .clickAction=${this._runActions}>
-          <ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.editor.run")}
-          </div>
-        </ha-md-menu-item>
-        <ha-md-menu-item .clickAction=${this._showTrace}>
-          <ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.show_trace"
-            )}
-          </div>
-        </ha-md-menu-item>
-        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-        <ha-md-menu-item .clickAction=${this._duplicate}>
-          <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
-          </div>
-        </ha-md-menu-item>
-        <ha-md-menu-item .clickAction=${this._toggle}>
-          <ha-svg-icon
-            .path=${
-              this._overflowAutomation?.state === "off"
-                ? mdiToggleSwitch
-                : mdiToggleSwitchOffOutline
-            }
-            slot="start"
-          ></ha-svg-icon>
-          <div slot="headline">
-            ${
-              this._overflowAutomation?.state === "off"
-                ? this.hass.localize("ui.panel.config.automation.editor.enable")
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.disable"
-                  )
-            }
-          </div>
-        </ha-md-menu-item>
-        <ha-md-menu-item .clickAction=${this._deleteConfirm} class="warning">
-          <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
-          <div slot="headline">
-            ${this.hass.localize("ui.panel.config.automation.picker.delete")}
-          </div>
-        </ha-md-menu-item>
-      </ha-md-menu>
     `;
   }
 
@@ -1071,33 +1049,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  private _showInfo = (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
+  private _showInfo = (automation: AutomationItem) => {
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   };
 
-  private _showSettings = (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _showSettings = (automation: AutomationItem) => {
     fireEvent(this, "hass-more-info", {
       entityId: automation.entity_id,
       view: "settings",
     });
   };
 
-  private _runActions = (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _runActions = (automation: AutomationItem) => {
     triggerAutomationActions(this.hass, automation.entity_id);
   };
 
-  private _editCategory = (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _editCategory = (automation: AutomationItem) => {
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === automation.entity_id
     );
@@ -1118,10 +1085,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private _showTrace = (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _showTrace = (automation: AutomationItem) => {
     if (!automation.attributes.id) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -1135,20 +1099,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     );
   };
 
-  private _toggle = async (item: HaMdMenuItem): Promise<void> => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _toggle = async (automation: AutomationItem): Promise<void> => {
     const service = automation.state === "off" ? "turn_on" : "turn_off";
     await this.hass.callService("automation", service, {
       entity_id: automation.entity_id,
     });
   };
 
-  private _deleteConfirm = async (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _deleteConfirm = async (automation: AutomationItem) => {
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.automation.picker.delete_confirm_title"
@@ -1164,8 +1122,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private async _delete(automation) {
+  private async _delete(automation: AutomationEntity) {
     try {
+      if (!automation.attributes.id) {
+        throw new Error("Automation ID is missing");
+      }
       await deleteAutomation(this.hass, automation.attributes.id);
       this._selected = this._selected.filter(
         (entityId) => entityId !== automation.entity_id
@@ -1185,11 +1146,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _duplicate = async (item: HaMdMenuItem) => {
-    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
-      .automation;
-
+  private _duplicate = async (automation: AutomationEntity) => {
     try {
+      if (!automation.attributes.id) {
+        throw new Error("Automation ID is missing");
+      }
       const config = await fetchAutomationFileConfig(
         this.hass,
         automation.attributes.id
@@ -1261,11 +1222,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleBulkCategory = async (item) => {
-    const category = item.value;
-    this._bulkAddCategory(category);
-  };
-
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1292,8 +1248,9 @@ ${rejected
   }
 
   private async _handleBulkLabel(ev) {
+    ev.stopPropagation();
     const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
+    const action = ev.currentTarget.dataset.action;
     this._bulkLabel(label, action);
   }
 
@@ -1327,11 +1284,6 @@ ${rejected
     }
   }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
-    this._bulkAddArea(area);
-  };
-
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1367,6 +1319,40 @@ ${rejected
     });
   };
 
+  private _handleOverflowMenuSelect = (ev: CustomEvent) => {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "enable":
+        this._handleBulkEnable();
+        break;
+      case "disable":
+        this._handleBulkDisable();
+        break;
+      case "__create_category__":
+        this._bulkCreateCategory();
+        break;
+      case "__no_category__":
+        this._bulkAddCategory("");
+        break;
+      case "move_category":
+        if (item.dataset.category) {
+          this._bulkAddCategory(item.dataset.category);
+        }
+        break;
+      case "__create_area__":
+        this._bulkCreateArea();
+        break;
+      case "__no_area__":
+        this._bulkAddArea("");
+        break;
+      case "move_area":
+        if (item.dataset.area) {
+          this._bulkAddArea(item.dataset.area);
+        }
+        break;
+    }
+  };
+
   private _handleBulkEnable = async () => {
     const promises: Promise<ServiceCallResponse>[] = [];
     this._selected.forEach((entityId) => {
@@ -1477,7 +1463,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -43,6 +43,7 @@ export class HaZoneTrigger extends LitElement {
         .disabled=${this.disabled}
         @value-changed=${this._entityPicked}
         .hass=${this.hass}
+        allow-custom-entity
         .entityFilter=${zoneAndLocationFilter}
       ></ha-entity-picker>
       <ha-entity-picker
@@ -53,6 +54,7 @@ export class HaZoneTrigger extends LitElement {
         .disabled=${this.disabled}
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
+        allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
 

src/panels/config/category/dialog-assign-category.ts

@@ -65,9 +65,6 @@ class DialogAssignCategory extends LitElement {
             <ha-category-picker
               .hass=${this.hass}
               .scope=${this._scope}
-              .label=${this.hass.localize(
-                "ui.components.category-picker.category"
-              )}
               .value=${this._category}
               @value-changed=${this._categoryChanged}
             ></ha-category-picker>

src/panels/config/category/ha-category-picker.ts

@@ -39,6 +39,9 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
+  @property({ type: Boolean, attribute: "show-label" })
+  public showLabel = false;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -180,6 +183,10 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   };
 
   protected render(): TemplateResult {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.category-picker.category");
+
     const valueRenderer = this._computeValueRenderer(this._categories);
 
     return html`
@@ -187,12 +194,13 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .placeholder=${this.placeholder}
-        .value=${this.value}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.category-picker.no_categories"
         )}
+        .placeholder=${placeholder}
+        .showLabel=${this.showLabel}
+        .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}

src/panels/config/cloud/account/cloud-account.ts

@@ -6,8 +6,10 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-tip";
 import type {
@@ -53,26 +55,26 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="reset">
+            <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.cloud.account.reset_cloud_data"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
+          </ha-dropdown-item>
+          <ha-dropdown-item value="download">
+            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.cloud.account.download_support_package"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
@@ -297,13 +299,15 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     fireEvent(this, "ha-refresh-cloud-status");
   }
 
-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
+  private _handleMenuAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "reset":
         this._deleteCloudData();
         break;
-      case 1:
+      case "download":
         this._downloadSupportPackage();
+        break;
     }
   }
 

src/panels/config/cloud/login/cloud-login-panel.ts

@@ -5,8 +5,10 @@ import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
+import "../../../../components/ha-dropdown";
+import "../../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-next";
 import "../../../../components/ha-list";
 import "../../../../components/ha-list-item";
@@ -44,26 +46,26 @@ export class CloudLoginPanel extends LitElement {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="reset">
+            <ha-svg-icon slot="icon" .path=${mdiDeleteForever}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.cloud.account.reset_cloud_data"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon">
+          </ha-dropdown-item>
+          <ha-dropdown-item value="download">
+            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.cloud.account.download_support_package"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
@@ -164,13 +166,15 @@ export class CloudLoginPanel extends LitElement {
     fireEvent(this, "flash-message-changed", { value: "" });
   }
 
-  private _handleMenuAction(ev) {
-    switch (ev.detail.index) {
-      case 0:
+  private _handleMenuAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "reset":
         this._deleteCloudData();
         break;
-      case 1:
+      case "download":
         this._downloadSupportPackage();
+        break;
     }
   }
 

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

@@ -1,4 +1,4 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
@@ -6,13 +6,12 @@ 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-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
@@ -73,24 +72,24 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-button-menu multi>
+          <ha-dropdown @wa-select=${this._handleMenuAction}>
             <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"
+              .checked=${this._showSkipped}
+              value="toggle_skipped"
             >
               ${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,21 @@ 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>
-  ): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    if (this._supervisorInfo!.channel === "stable") {
-      showJoinBetaDialog(this, {
-        join: async () => this._setChannel("beta"),
-      });
-    } else {
-      this._setChannel("stable");
+  private _handleMenuAction(ev: CustomEvent): void {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "toggle_skipped":
+        this._showSkipped = !this._showSkipped;
+        break;
+      case "toggle_beta":
+        if (this._supervisorInfo!.channel === "stable") {
+          showJoinBetaDialog(this, {
+            join: async () => this._setChannel("beta"),
+          });
+        } else {
+          this._setChannel("stable");
+        }
+        break;
     }
   }
 

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

@@ -1,4 +1,3 @@
-import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiCloudLock,
   mdiDotsVertical,
@@ -13,11 +12,12 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/chips/ha-assist-chip";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tip";
@@ -226,25 +226,25 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
           .path=${mdiMagnify}
           @click=${this._showQuickBar}
         ></ha-icon-button>
-        <ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
+        <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="check_updates">
+            <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.updates.check_updates")}
-            <ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="restart">
+            <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.system_dashboard.restart_homeassistant"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiPower}></ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
 
         <ha-config-section
           .narrow=${this.narrow}
@@ -371,12 +371,13 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     });
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
+  private async _handleMenuAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "check_updates":
         checkForEntityUpdates(this, this.hass);
         break;
-      case 1:
+      case "restart":
         showRestartDialog(this);
         break;
     }

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -80,6 +80,7 @@ class DialogDeviceRegistryDetail extends LitElement {
             <ha-area-picker
               .hass=${this.hass}
               .value=${this._areaId}
+              show-label
               @value-changed=${this._areaPicked}
             ></ha-area-picker>
             <ha-labels-picker

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

@@ -1,7 +1,6 @@
 import { consume } from "@lit/context";
 import {
   mdiCancel,
-  mdiChevronRight,
   mdiDelete,
   mdiDotsVertical,
   mdiMenuDown,
@@ -39,11 +38,15 @@ import type {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
@@ -51,9 +54,6 @@ import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu-item";
-import "../../../components/ha-sub-menu";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
 import { getSubEntries, sortConfigEntries } from "../../../data/config_entries";
@@ -702,6 +702,80 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     ];
   }
 
+  private _renderAreaItems = (submenu = false) =>
+    html`${Object.values(this.hass.areas).map(
+        (area) =>
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="toggle_area"
+            data-area=${area.area_id}
+          >
+            ${area.icon
+              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
+              : html`<ha-svg-icon
+                  slot="icon"
+                  .path=${mdiTextureBox}
+                ></ha-svg-icon>`}
+            ${area.name}
+          </ha-dropdown-item>`
+      )}
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="__no_area__">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.no_area"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="__create_area__"
+      >
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.add_area"
+        )}
+      </ha-dropdown-item>`;
+
+  private _renderLabelItems = (submenu = false) =>
+    html`${this._labels?.map((label) => {
+        const color = label.color ? computeCssColor(label.color) : undefined;
+        const selected = this._selected.every((deviceId) =>
+          this.hass.devices[deviceId]?.labels.includes(label.label_id)
+        );
+        const partial =
+          !selected &&
+          this._selected.some((deviceId) =>
+            this.hass.devices[deviceId]?.labels.includes(label.label_id)
+          );
+        return html`<ha-dropdown-item
+          .slot=${submenu ? "submenu" : ""}
+          .value=${label.label_id}
+          data-action=${selected ? "remove" : "add"}
+          @click=${this._handleBulkLabel}
+        >
+          <ha-checkbox
+            slot="icon"
+            .checked=${selected}
+            .indeterminate=${partial}
+            reducedTouchTarget
+          ></ha-checkbox>
+          <ha-label
+            style=${color ? `--color: ${color}` : ""}
+            .description=${label.description}
+          >
+            ${label.icon
+              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+              : nothing}
+            ${label.name}
+          </ha-label>
+        </ha-dropdown-item>`;
+      })}
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        @click=${this._bulkCreateLabel}
+        .slot=${submenu ? "submenu" : ""}
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
+
   protected render(): TemplateResult {
     const { devicesOutput } = this._devicesAndFilterDomains(
       this.hass.devices,
@@ -718,77 +792,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
       (this._sizeController.value && this._sizeController.value < 700) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
 
-    const areaItems = html`${Object.values(this.hass.areas).map(
-        (area) =>
-          html`<ha-md-menu-item
-            .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
-          >
-            ${area.icon
-              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
-              : html`<ha-svg-icon
-                  slot="start"
-                  .path=${mdiTextureBox}
-                ></ha-svg-icon>`}
-            <div slot="headline">${area.name}</div>
-          </ha-md-menu-item>`
-      )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.no_area"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.add_area"
-          )}
-        </div>
-      </ha-md-menu-item>`;
-
-    const labelItems = html`${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((deviceId) =>
-          this.hass.devices[deviceId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((deviceId) =>
-            this.hass.devices[deviceId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-md-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-md-menu-item>`;
-      })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
-
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -906,7 +909,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         ></ha-filter-labels>
 
         ${!this.narrow
-          ? html`<ha-md-button-menu slot="selection-bar">
+          ? html`<ha-dropdown slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -918,12 +921,15 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                     .path=${mdiMenuDown}
                   ></ha-svg-icon>
                 </ha-assist-chip>
-                ${labelItems}
-              </ha-md-button-menu>
+                ${this._renderLabelItems()}
+              </ha-dropdown>
 
               ${areasInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown
+                    slot="selection-bar"
+                    @wa-select=${this._handleOverflowMenuSelect}
+                  >
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -935,10 +941,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${areaItems}
-                  </ha-md-button-menu>`}`
+                    ${this._renderAreaItems()}
+                  </ha-dropdown>`}`
           : nothing}
-        <ha-md-button-menu has-overflow slot="selection-bar">
+        <ha-dropdown
+          has-overflow
+          slot="selection-bar"
+          @wa-select=${this._handleOverflowMenuSelect}
+        >
           ${this.narrow
             ? html`<ha-assist-chip
                 .label=${this.hass.localize(
@@ -959,51 +969,32 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                 slot="trigger"
               ></ha-icon-button>`}
           ${this.narrow
-            ? html` <ha-sub-menu>
-                <ha-md-menu-item slot="item">
-                  <div slot="headline">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
-                    )}
-                  </div>
-                  <ha-svg-icon
-                    slot="end"
-                    .path=${mdiChevronRight}
-                  ></ha-svg-icon>
-                </ha-md-menu-item>
-                <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-              </ha-sub-menu>`
+            ? html`<ha-dropdown-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_actions.add_label"
+                )}
+                ${this._renderLabelItems(true)}
+              </ha-dropdown-item>`
             : nothing}
           ${areasInOverflow
-            ? html`<ha-sub-menu>
-                  <ha-md-menu-item slot="item">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
-                    </div>
-                    <ha-svg-icon
-                      slot="end"
-                      .path=${mdiChevronRight}
-                    ></ha-svg-icon>
-                  </ha-md-menu-item>
-                  <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                </ha-sub-menu>
-                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+            ? html`<ha-dropdown-item>
+                ${this.hass.localize(
+                  "ui.panel.config.devices.picker.bulk_actions.move_area"
+                )}
+                ${this._renderAreaItems(true)}
+              </ha-dropdown-item>`
             : nothing}
-          <ha-md-menu-item
-            .clickAction=${this._deleteSelected}
+          <ha-dropdown-item
+            value="delete"
             .disabled=${!this._selectedCanDelete.length}
-            class="warning"
+            variant="danger"
           >
-            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            <div slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
-              )}
-            </div>
-          </ha-md-menu-item>
-        </ha-md-button-menu>
+            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
+            )}
+          </ha-dropdown-item>
+        </ha-dropdown>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1093,12 +1084,28 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
-    this._bulkAddArea(area);
-  };
+  private _handleOverflowMenuSelect(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
 
-  private async _bulkAddArea(area: string) {
+    switch (item.value) {
+      case "delete":
+        this._deleteSelected();
+        break;
+      case "__no_area__":
+        this._bulkAddArea(null);
+        break;
+      case "__create_area__":
+        this._bulkCreateArea();
+        break;
+      case "toggle_area":
+        if (item.dataset.area) {
+          this._bulkAddArea(item.dataset.area);
+        }
+        break;
+    }
+  }
+
+  private async _bulkAddArea(area: string | null) {
     const promises: Promise<DeviceRegistryEntry>[] = [];
     this._selected.forEach((deviceId) => {
       promises.push(
@@ -1133,12 +1140,6 @@ ${rejected
     });
   };
 
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
   private async _bulkLabel(label: string, action: "add" | "remove") {
     const promises: Promise<DeviceRegistryEntry>[] = [];
     this._selected.forEach((deviceId) => {
@@ -1178,6 +1179,13 @@ ${rejected
     });
   };
 
+  private async _handleBulkLabel(ev) {
+    ev.stopPropagation();
+    const label = ev.currentTarget.value;
+    const action = ev.currentTarget.dataset.action;
+    this._bulkLabel(label, action);
+  }
+
   private _deleteSelected = () => {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -1277,7 +1285,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -403,7 +403,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ${!this._icon && !stateObj?.attributes.icon && stateObj
                 ? html`
                     <ha-state-icon
-                      slot="start"
+                      slot="fallback"
                       .hass=${this.hass}
                       .stateObj=${stateObj}
                     ></ha-state-icon>
@@ -778,6 +778,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
             .hass=${this.hass}
             .value=${this._areaId}
             .disabled=${this.disabled}
+            show-label
             @value-changed=${this._areaPicked}
           ></ha-area-picker>`
         : ""}
@@ -1012,6 +1013,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ? html`<ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
+                  show-label
                   .disabled=${this.disabled}
                   @value-changed=${this._areaPicked}
                 ></ha-area-picker>`
@@ -1543,12 +1545,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
           margin-inline-end: 0;
           margin-inline-start: initial;
         }
-        ha-settings-row {
-          display: grid;
-          grid-template-columns: 1fr auto;
-          gap: var(--ha-space-4);
-          align-items: start;
-        }
         ha-textfield,
         ha-icon-picker,
         ha-select,

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

@@ -1,8 +1,8 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAlertCircle,
   mdiCancel,
-  mdiChevronRight,
   mdiDelete,
   mdiDotsVertical,
   mdiEye,
@@ -56,8 +56,9 @@ import type {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-alert";
-import "../../../components/ha-button-menu";
-import "../../../components/ha-check-list-item";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-domains";
 import "../../../components/ha-filter-floor-areas";
@@ -66,9 +67,6 @@ import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu-item";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
@@ -749,6 +747,48 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     ];
   }
 
+  private _renderLabelItems = (submenu = false) =>
+    html` ${this._labels?.map((label) => {
+        const color = label.color ? computeCssColor(label.color) : undefined;
+        const selected = this._selected.every((entityId) =>
+          this.hass.entities[entityId]?.labels.includes(label.label_id)
+        );
+        const partial =
+          !selected &&
+          this._selected.some((entityId) =>
+            this.hass.entities[entityId]?.labels.includes(label.label_id)
+          );
+        return html`<ha-dropdown-item
+          .slot=${submenu ? "submenu" : ""}
+          .value=${label.label_id}
+          data-action=${selected ? "remove" : "add"}
+          @click=${this._handleLabelMenuSelect}
+        >
+          <ha-checkbox
+            slot="icon"
+            .checked=${selected}
+            .indeterminate=${partial}
+            reducedTouchTarget
+          ></ha-checkbox>
+          <ha-label
+            style=${color ? `--color: ${color}` : ""}
+            .description=${label.description}
+          >
+            ${label.icon
+              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+              : nothing}
+            ${label.name}
+          </ha-label>
+        </ha-dropdown-item>`;
+      })}
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        @click=${this._handleCreateLabel}
+        .slot=${submenu ? "submenu" : ""}
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
+
   protected render() {
     if (!this.hass || this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
@@ -773,53 +813,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         [...filteredDomains][0]
       );
 
-    const labelItems = html` ${this._labels?.map((label) => {
-        const color = label.color ? computeCssColor(label.color) : undefined;
-        const selected = this._selected.every((entityId) =>
-          this.hass.entities[entityId]?.labels.includes(label.label_id)
-        );
-        const partial =
-          !selected &&
-          this._selected.some((entityId) =>
-            this.hass.entities[entityId]?.labels.includes(label.label_id)
-          );
-        return html`<ha-md-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-        >
-          <ha-checkbox
-            slot="start"
-            .checked=${selected}
-            .indeterminate=${partial}
-            reducedTouchTarget
-          ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
-            ${label.icon
-              ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
-              : nothing}
-            ${label.name}
-          </ha-label>
-        </ha-md-menu-item>`;
-      })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
-
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${
-          this._searchParms.has("historyBack") ? undefined : "/config"
-        }
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         .route=${this.route}
         .tabs=${configSections.devices}
         .columns=${this._columns(this.hass.localize)}
@@ -829,16 +829,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           { number: filteredEntities.length }
         )}
         has-filters
-        .filters=${
-          Object.values(this._filters).filter((filter) =>
-            Array.isArray(filter)
-              ? filter.length
-              : filter &&
-                Object.values(filter).some((val) =>
-                  Array.isArray(val) ? val.length : val
-                )
-          ).length
-        }
+        .filters=${Object.values(this._filters).filter((filter) =>
+          Array.isArray(filter)
+            ? filter.length
+            : filter &&
+              Object.values(filter).some((val) =>
+                Array.isArray(val) ? val.length : val
+              )
+        ).length}
         selectable
         .selected=${this._selected.length}
         .initialGroupColumn=${this._activeGrouping ?? "device_full"}
@@ -865,157 +863,120 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
 
-
-${
-  !this.narrow
-    ? html`<ha-md-button-menu slot="selection-bar">
-        <ha-assist-chip
-          slot="trigger"
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.add_label"
-          )}
+        ${!this.narrow
+          ? html`<ha-dropdown slot="selection-bar">
+              <ha-assist-chip
+                slot="trigger"
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_actions.add_label"
+                )}
+              >
+                <ha-svg-icon
+                  slot="trailing-icon"
+                  .path=${mdiMenuDown}
+                ></ha-svg-icon>
+              </ha-assist-chip>
+              ${this._renderLabelItems()}
+            </ha-dropdown>`
+          : nothing}
+        <ha-dropdown
+          slot="selection-bar"
+          @wa-select=${this._handleOverflowMenuSelect}
         >
-          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-        </ha-assist-chip>
-        ${labelItems}
-      </ha-md-button-menu>`
-    : nothing
-}
-<ha-md-button-menu has-overflow slot="selection-bar">
-  ${
-    this.narrow
-      ? html`<ha-assist-chip
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_action"
-          )}
-          slot="trigger"
-        >
-          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
-        </ha-assist-chip>`
-      : html`<ha-icon-button
-          .path=${mdiDotsVertical}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_action"
-          )}
-          slot="trigger"
-        ></ha-icon-button>`
-  }
-    <ha-svg-icon
-      slot="trailing-icon"
-      .path=${mdiMenuDown}
-    ></ha-svg-icon
-  ></ha-assist-chip>
-  ${
-    this.narrow
-      ? html`<ha-sub-menu>
-            <ha-md-menu-item slot="item">
-              <div slot="headline">
+          ${this.narrow
+            ? html`<ha-assist-chip
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
+                )}
+                slot="trigger"
+              >
+                <ha-svg-icon
+                  slot="trailing-icon"
+                  .path=${mdiMenuDown}
+                ></ha-svg-icon>
+              </ha-assist-chip>`
+            : html`<ha-icon-button
+                .path=${mdiDotsVertical}
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.picker.bulk_action"
+                )}
+                slot="trigger"
+              ></ha-icon-button>`}
+          ${this.narrow
+            ? html`<ha-dropdown-item>
                 ${this.hass.localize(
                   "ui.panel.config.automation.picker.bulk_actions.add_label"
                 )}
-              </div>
-              <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-            </ha-md-menu-item>
-            <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-          </ha-sub-menu>
-          <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-      : nothing
-  }
+                ${this._renderLabelItems(true)}
+              </ha-dropdown-item>`
+            : nothing}
 
-  <ha-md-menu-item .clickAction=${this._enableSelected}>
-    <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.enable_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
-  <ha-md-menu-item .clickAction=${this._disableSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiToggleSwitchOffOutline}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.disable_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
-  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+          <ha-dropdown-item value="enable">
+            <ha-svg-icon slot="icon" .path=${mdiToggleSwitch}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.enable_selected.button"
+            )}
+          </ha-dropdown-item>
+          <ha-dropdown-item value="disable">
+            <ha-svg-icon
+              slot="icon"
+              .path=${mdiToggleSwitchOffOutline}
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.disable_selected.button"
+            )}
+          </ha-dropdown-item>
+          <wa-divider></wa-divider>
 
-  <ha-md-menu-item .clickAction=${this._unhideSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiEye}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.unhide_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
-  <ha-md-menu-item .clickAction=${this._hideSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiEyeOff}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.hide_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
+          <ha-dropdown-item value="unhide">
+            <ha-svg-icon slot="icon" .path=${mdiEye}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.unhide_selected.button"
+            )}
+          </ha-dropdown-item>
+          <ha-dropdown-item value="hide">
+            <ha-svg-icon slot="icon" .path=${mdiEyeOff}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.hide_selected.button"
+            )}
+          </ha-dropdown-item>
 
-  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+          <wa-divider></wa-divider>
 
-  <ha-md-menu-item .clickAction=${this._restoreEntityIdSelected}>
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiRestore}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.restore_entity_id_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
+          <ha-dropdown-item value="restore_entity_id">
+            <ha-svg-icon slot="icon" .path=${mdiRestore}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.restore_entity_id_selected.button"
+            )}
+          </ha-dropdown-item>
 
-  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+          <wa-divider></wa-divider>
 
-  <ha-md-menu-item .clickAction=${this._removeSelected} class="warning">
-    <ha-svg-icon
-      slot="start"
-      .path=${mdiDelete}
-    ></ha-svg-icon>
-    <div slot="headline">
-      ${this.hass.localize(
-        "ui.panel.config.entities.picker.delete_selected.button"
-      )}
-    </div>
-  </ha-md-menu-item>
-
-</ha-md-button-menu>
-        ${
-          Array.isArray(this._filters.config_entry) &&
-          this._filters.config_entry.length
-            ? html`<ha-alert slot="filter-pane">
-                ${this.hass.localize(
-                  "ui.panel.config.entities.picker.filtering_by_config_entry"
-                )}
-                ${this._entries?.find(
-                  (entry) => entry.entry_id === this._filters.config_entry![0]
-                )?.title || this._filters.config_entry[0]}${this._filters
-                  .config_entry.length === 1 &&
-                Array.isArray(this._filters.sub_entry) &&
-                this._filters.sub_entry.length
-                  ? html` (${this._subEntries?.find(
-                      (entry) =>
-                        entry.subentry_id === this._filters.sub_entry![0]
-                    )?.title || this._filters.sub_entry[0]})`
-                  : nothing}
-              </ha-alert>`
-            : nothing
-        }
+          <ha-dropdown-item value="remove" variant="danger">
+            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.entities.picker.delete_selected.button"
+            )}
+          </ha-dropdown-item>
+        </ha-dropdown>
+        ${Array.isArray(this._filters.config_entry) &&
+        this._filters.config_entry.length
+          ? html`<ha-alert slot="filter-pane">
+              ${this.hass.localize(
+                "ui.panel.config.entities.picker.filtering_by_config_entry"
+              )}
+              ${this._entries?.find(
+                (entry) => entry.entry_id === this._filters.config_entry![0]
+              )?.title || this._filters.config_entry[0]}${this._filters
+                .config_entry.length === 1 &&
+              Array.isArray(this._filters.sub_entry) &&
+              this._filters.sub_entry.length
+                ? html` (${this._subEntries?.find(
+                    (entry) => entry.subentry_id === this._filters.sub_entry![0]
+                  )?.title || this._filters.sub_entry[0]})`
+                : nothing}
+            </ha-alert>`
+          : nothing}
         <ha-filter-floor-areas
           .hass=${this.hass}
           type="entity"
@@ -1076,20 +1037,16 @@ ${
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-labels>
-        ${
-          includeAddDeviceFab
-            ? html`<ha-fab
-                .label=${this.hass.localize(
-                  "ui.panel.config.devices.add_device"
-                )}
-                extended
-                @click=${this._addDevice}
-                slot="fab"
-              >
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </ha-fab>`
-            : nothing
-        }
+        ${includeAddDeviceFab
+          ? html`<ha-fab
+              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
+              extended
+              @click=${this._addDevice}
+              slot="fab"
+            >
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+            </ha-fab>`
+          : nothing}
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1223,6 +1180,44 @@ ${
     this._selected = ev.detail.value;
   }
 
+  private _handleLabelMenuSelect(ev: CustomEvent) {
+    ev.stopPropagation();
+    const item = ev.currentTarget as HaDropdownItem;
+
+    const label = item.value as string;
+    const action = (item as HTMLElement).dataset.action as "add" | "remove";
+    this._bulkLabel(label, action);
+  }
+
+  private _handleCreateLabel() {
+    this._bulkCreateLabel();
+  }
+
+  private _handleOverflowMenuSelect(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+
+    switch (item.value) {
+      case "enable":
+        this._enableSelected();
+        break;
+      case "disable":
+        this._disableSelected();
+        break;
+      case "unhide":
+        this._unhideSelected();
+        break;
+      case "hide":
+        this._hideSelected();
+        break;
+      case "remove":
+        this._removeSelected();
+        break;
+      case "restore_entity_id":
+        this._restoreEntityIdSelected();
+        break;
+    }
+  }
+
   private _enableSelected = async () => {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -1346,12 +1341,6 @@ ${
     this._clearSelection();
   };
 
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    await this._bulkLabel(label, action);
-  }
-
   private async _bulkLabel(label: string, action: "add" | "remove") {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1613,7 +1602,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -1,9 +1,9 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
   mdiAlertCircle,
   mdiCancel,
-  mdiChevronRight,
   mdiCog,
   mdiDelete,
   mdiDotsVertical,
@@ -45,6 +45,9 @@ import type {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
@@ -53,8 +56,9 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-md-divider";
+import "../../../components/ha-md-menu";
 import "../../../components/ha-state-icon";
+import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import { getSignedPath } from "../../../data/auth";
@@ -607,42 +611,35 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     );
   }
 
-  protected render(): TemplateResult {
-    if (
-      !this.hass ||
-      this._stateItems === undefined ||
-      this._entityEntries === undefined ||
-      this._configEntries === undefined
-    ) {
-      return html`<hass-loading-screen></hass-loading-screen>`;
-    }
-
-    const categoryItems = html`${this._categories?.map(
+  private _renderCategoryItems = (submenu = false) =>
+    html`${this._categories?.map(
         (category) =>
-          html`<ha-md-menu-item
-            .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_category"
+            data-category=${category.category_id}
           >
             ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-md-menu-item>`
+              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
+            ${category.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-md-menu-item>`;
-    const labelItems = html`${this._labels?.map((label) => {
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="no_category">
+        ${this.hass.localize(
+          "ui.panel.config.automation.picker.bulk_actions.no_category"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="create_category"
+      >
+        ${this.hass.localize("ui.panel.config.category.editor.add")}
+      </ha-dropdown-item>`;
+
+  private _renderLabelItems = (submenu = false) =>
+    html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
         const selected = this._selected.every((entityId) =>
           this._labelsForEntity(entityId).includes(label.label_id)
@@ -652,14 +649,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this._labelsForEntity(entityId).includes(label.label_id)
           );
-        return html`<ha-md-menu-item
+        return html`<ha-dropdown-item
+          @click=${this._handleLabelMenuSelect}
+          .slot=${submenu ? "submenu" : ""}
           .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
+          data-action=${selected ? "remove" : "add"}
         >
           <ha-checkbox
-            slot="start"
+            slot="icon"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -673,13 +670,25 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-md-menu-item> `;
-      })}<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div>
-      </ha-md-menu-item>`;
+        </ha-dropdown-item>`;
+      })}<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        @click=${this._bulkCreateLabel}
+        .slot=${submenu ? "submenu" : ""}
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
+
+  protected render(): TemplateResult {
+    if (
+      !this.hass ||
+      this._stateItems === undefined ||
+      this._entityEntries === undefined ||
+      this._configEntries === undefined
+    ) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
     const labelsInOverflow =
       (this._sizeController.value && this._sizeController.value < 700) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -781,7 +790,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         ></ha-filter-categories>
 
         ${!this.narrow
-          ? html`<ha-md-button-menu slot="selection-bar">
+          ? html`<ha-dropdown
+                slot="selection-bar"
+                @wa-select=${this._handleMenuSelect}
+              >
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -793,11 +805,11 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                     .path=${mdiMenuDown}
                   ></ha-svg-icon>
                 </ha-assist-chip>
-                ${categoryItems}
-              </ha-md-button-menu>
+                ${this._renderCategoryItems()}
+              </ha-dropdown>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -809,14 +821,15 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${labelItems}
-                  </ha-md-button-menu>`}`
+                    ${this._renderLabelItems()}
+                  </ha-dropdown>`}`
           : nothing}
         ${this.narrow || labelsInOverflow
-          ? html`
-          <ha-md-button-menu has-overflow slot="selection-bar">
-            ${
-              this.narrow
+          ? html`<ha-dropdown
+              slot="selection-bar"
+              @wa-select=${this._handleMenuSelect}
+            >
+              ${this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -834,50 +847,24 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || this.hass.dockedSidebar === "docked"
-                ? html` <ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-md-button-menu>`
+                  ></ha-icon-button>`}
+              ${this.narrow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.move_category"
+                    )}
+                    ${this._renderCategoryItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+              ${this.narrow || this.hass.dockedSidebar === "docked"
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                    )}
+                    ${this._renderLabelItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+            </ha-dropdown>`
           : nothing}
 
         <ha-integration-overflow-menu
@@ -1020,12 +1007,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
-    this._bulkAddCategory(category);
-  };
-
-  private async _bulkAddCategory(category: string) {
+  private async _bulkAddCategory(category: string | null) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
       promises.push(
@@ -1050,12 +1032,6 @@ ${rejected
     }
   }
 
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
   private async _bulkLabel(label: string, action: "add" | "remove") {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1091,6 +1067,32 @@ ${rejected
     this._selected = ev.detail.value;
   }
 
+  private _handleMenuSelect(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "no_category":
+        this._bulkAddCategory(null);
+        break;
+      case "create_category":
+        this._bulkCreateCategory();
+        break;
+      case "move_category":
+        if (item.dataset.category) {
+          this._bulkAddCategory(item.dataset.category);
+        }
+        break;
+    }
+  }
+
+  private _handleLabelMenuSelect(ev: CustomEvent) {
+    ev.stopPropagation();
+    const item = ev.currentTarget as HaDropdownItem;
+
+    const label = item.value as string;
+    const action = (item as HTMLElement).dataset.action as "add" | "remove";
+    this._bulkLabel(label, action);
+  }
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -1431,7 +1433,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -16,14 +16,13 @@ import "../../../../../components/buttons/ha-progress-button";
 import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-generic-picker";
 import "../../../../../components/ha-list-item";
-import type { PickerComboBoxItem } from "../../../../../components/ha-picker-combo-box";
 import "../../../../../components/ha-select";
 import "../../../../../components/ha-selector/ha-selector-boolean";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-textfield";
+import "../../../../../components/ha-combo-box";
 import type {
   ZWaveJSNodeCapabilities,
   ZWaveJSNodeConfigParam,
@@ -330,22 +329,19 @@ class ZWaveJSNodeConfig extends LitElement {
       ) {
         return html`
           ${labelAndDescription}
-          <ha-generic-picker
+          <ha-combo-box
             .hass=${this.hass}
             .value=${item.value?.toString()}
             allow-custom-value
             hide-clear-icon
-            .getItems=${this._getManualEntryItems(item.metadata.states)}
+            .items=${this._getComboBoxOptions(item.metadata.states)}
             .disabled=${!item.metadata.writeable}
             .invalid=${result?.status === "error"}
             .placeholder=${item.metadata.unit}
             .helper=${`${this.hass.localize("ui.panel.config.zwave_js.node_config.between_min_max", { min: item.metadata.min, max: item.metadata.max })}${defaultLabel ? `, ${defaultLabel}` : ""}`}
-            .valueRenderer=${this._enumeratedPickerValueRenderer(
-              item.metadata.states
-            )}
             @value-changed=${this._getComboBoxValueChangedCallback(id, item)}
           >
-          </ha-generic-picker>
+          </ha-combo-box>
         `;
       }
       return html`${labelAndDescription}
@@ -367,10 +363,7 @@ class ZWaveJSNodeConfig extends LitElement {
         </ha-textfield>`;
     }
 
-    if (
-      item.configuration_value_type === "enumerated" &&
-      Object.keys(item.metadata.states).length < 5
-    ) {
+    if (item.configuration_value_type === "enumerated") {
       return html`
         ${labelAndDescription}
         <ha-select
@@ -392,28 +385,6 @@ class ZWaveJSNodeConfig extends LitElement {
         </ha-select>
       `;
     }
-    if (item.configuration_value_type === "enumerated") {
-      return html`
-        ${labelAndDescription}
-        <ha-generic-picker
-          .hass=${this.hass}
-          .disabled=${!item.metadata.writeable}
-          .value=${item.value?.toString()}
-          .key=${id}
-          hide-clear-icon
-          @value-changed=${this._pickerValueChanged}
-          .helper=${defaultLabel}
-          .getItems=${this._getEnumeratedPickerItems(item.metadata.states!)}
-          .valueRenderer=${this._enumeratedPickerValueRenderer(
-            item.metadata.states!
-          )}
-          .property=${item.property}
-          .endpoint=${item.endpoint}
-          .propertyKey=${item.property_key}
-        >
-        </ha-generic-picker>
-      `;
-    }
 
     return html`${labelAndDescription}
       <p>${item.value}</p>`;
@@ -458,23 +429,15 @@ class ZWaveJSNodeConfig extends LitElement {
   }
 
   private _dropdownSelected(ev) {
-    this._handleEnumeratedPickerValueChanged(ev, ev.target.value);
-  }
-
-  private _pickerValueChanged(ev) {
-    this._handleEnumeratedPickerValueChanged(ev, ev.detail.value);
-  }
-
-  private _handleEnumeratedPickerValueChanged(ev, value: string) {
     if (ev.target === undefined || this._config![ev.target.key] === undefined) {
       return;
     }
-    if (this._config![ev.target.key].value?.toString() === value) {
+    if (this._config![ev.target.key].value?.toString() === ev.target.value) {
       return;
     }
     this._setResult(ev.target.key, undefined);
 
-    this._updateConfigParameter(ev.target, Number(value));
+    this._updateConfigParameter(ev.target, Number(ev.target.value));
   }
 
   private _numericInputChanged(ev) {
@@ -511,36 +474,11 @@ class ZWaveJSNodeConfig extends LitElement {
     this._updateConfigParameter(ev.target, value);
   }
 
-  private _getEnumeratedPickerItems = memoizeOne(
-    (states: Record<string, string>) => {
-      const items: PickerComboBoxItem[] = Object.entries(states).map(
-        ([value, label]) => ({
-          id: value,
-          primary: label,
-          sorting_label: `${label}_${value}`,
-        })
-      );
-      return () => items;
-    }
-  );
-
-  private _enumeratedPickerValueRenderer = memoizeOne(
-    (states: Record<string, string>) => (value: string) =>
-      html`<span slot="headline">${states[value] || value}</span>`
-  );
-
-  private _getManualEntryItems = memoizeOne(
-    (states: Record<string, string>) => {
-      const items: PickerComboBoxItem[] = Object.entries(states).map(
-        ([value, label]) => ({
-          id: value,
-          primary: `${label}`,
-          secondary: value,
-          sorting_label: `${label}_${value}`,
-        })
-      );
-      return () => items;
-    }
+  private _getComboBoxOptions = memoizeOne((states: Record<string, string>) =>
+    Object.entries(states).map(([value, label]) => ({
+      value,
+      label: `${value} - ${label}`,
+    }))
   );
 
   private _getComboBoxValueChangedCallback(

src/panels/config/labels/dialog-label-detail.ts

@@ -5,10 +5,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-color-picker";
-import "../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
-import "../../../components/ha-wa-dialog";
 import "../../../components/ha-textarea";
 import "../../../components/ha-textfield";
 import type { LabelRegistryEntryMutableParams } from "../../../data/label/label_registry";
@@ -38,8 +37,6 @@ class DialogLabelDetail
 
   @state() private _submitting = false;
 
-  @state() private _open = false;
-
   public showDialog(params: LabelDetailDialogParams): void {
     this._params = params;
     this._error = undefined;
@@ -54,17 +51,20 @@ class DialogLabelDetail
       this._color = "";
       this._description = "";
     }
-    this._open = true;
+    document.body.addEventListener("keydown", this._handleKeyPress);
   }
 
+  private _handleKeyPress = (ev: KeyboardEvent) => {
+    if (ev.key === "Escape") {
+      ev.stopPropagation();
+    }
+  };
+
   public closeDialog() {
-    this._open = false;
-    return true;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
+    document.body.removeEventListener("keydown", this._handleKeyPress);
+    return true;
   }
 
   protected render() {
@@ -73,13 +73,17 @@ class DialogLabelDetail
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.entry
-          ? this._params.entry.name || this._params.entry.label_id
-          : this.hass!.localize("ui.dialogs.label-detail.new_label")}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this._params.entry
+            ? this._params.entry.name || this._params.entry.label_id
+            : this.hass!.localize("ui.dialogs.label-detail.new_label")
+        )}
       >
         <div>
           ${this._error
@@ -87,7 +91,7 @@ class DialogLabelDetail
             : ""}
           <div class="form">
             <ha-textfield
-              autofocus
+              dialogInitialFocus
               .value=${this._name}
               .configValue=${"name"}
               @input=${this._input}
@@ -121,32 +125,29 @@ class DialogLabelDetail
             ></ha-textarea>
           </div>
         </div>
-
-        <ha-dialog-footer slot="footer">
-          ${this._params.entry && this._params.removeEntry
-            ? html`
-                <ha-button
-                  slot="secondaryAction"
-                  variant="danger"
-                  appearance="plain"
-                  @click=${this._deleteEntry}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass!.localize("ui.common.delete")}
-                </ha-button>
-              `
-            : nothing}
-          <ha-button
-            slot="primaryAction"
-            @click=${this._updateEntry}
-            .disabled=${this._submitting || !this._name}
-          >
-            ${this._params.entry
-              ? this.hass!.localize("ui.common.update")
-              : this.hass!.localize("ui.common.create")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        ${this._params.entry && this._params.removeEntry
+          ? html`
+              <ha-button
+                slot="secondaryAction"
+                variant="danger"
+                appearance="plain"
+                @click=${this._deleteEntry}
+                .disabled=${this._submitting}
+              >
+                ${this.hass!.localize("ui.common.delete")}
+              </ha-button>
+            `
+          : nothing}
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${this._submitting || !this._name}
+        >
+          ${this._params.entry
+            ? this.hass!.localize("ui.common.update")
+            : this.hass!.localize("ui.common.create")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 

src/panels/config/network/supervisor-network.ts

@@ -4,8 +4,10 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
@@ -500,15 +502,18 @@ export class HassioNetwork extends LitElement {
                   `
                 )}
               </div>
-              <ha-button-menu
-                @opened=${this._handleDNSMenuOpened}
-                @closed=${this._handleDNSMenuClosed}
+              <ha-dropdown
+                @wa-show=${this._handleDNSMenuOpened}
+                @wa-hide=${this._handleDNSMenuClosed}
+                @wa-select=${this._handleDNSMenuSelect}
                 .version=${version}
-                class="add-nameserver"
-                appearance="filled"
-                size="small"
               >
-                <ha-button appearance="filled" size="small" slot="trigger">
+                <ha-button
+                  appearance="filled"
+                  size="small"
+                  slot="trigger"
+                  class="add-nameserver"
+                >
                   ${this.hass.localize(
                     "ui.panel.config.network.supervisor.add_dns_server"
                   )}
@@ -519,21 +524,21 @@ export class HassioNetwork extends LitElement {
                 </ha-button>
                 ${Object.entries(PREDEFINED_DNS[version]).map(
                   ([name, addresses]) => html`
-                    <ha-list-item
-                      @click=${this._addPredefinedDNS}
+                    <ha-dropdown-item
+                      value="predefined"
                       .version=${version}
                       .addresses=${addresses}
                     >
                       ${name}
-                    </ha-list-item>
+                    </ha-dropdown-item>
                   `
                 )}
-                <ha-list-item @click=${this._addCustomDNS} .version=${version}>
+                <ha-dropdown-item value="custom" .version=${version}>
                   ${this.hass.localize(
                     "ui.panel.config.network.supervisor.custom_dns"
                   )}
-                </ha-list-item>
-              </ha-button-menu>
+                </ha-dropdown-item>
+              </ha-dropdown>
             `
           : nothing}
       </ha-expansion-panel>
@@ -747,27 +752,30 @@ export class HassioNetwork extends LitElement {
     this._dnsMenuOpen = false;
   }
 
-  private _addPredefinedDNS(ev: Event) {
-    const source = ev.target as any;
-    const version = source.version as "ipv4" | "ipv6";
-    const addresses = source.addresses as string[];
-    if (!this._interface![version]!.nameservers) {
-      this._interface![version]!.nameservers = [];
-    }
-    this._interface![version]!.nameservers!.push(...addresses);
-    this._dirty = true;
-    this.requestUpdate("_interface");
-  }
+  private _handleDNSMenuSelect(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem & {
+      version: "ipv4" | "ipv6";
+      addresses?: string[];
+    };
+    const version = item.version;
 
-  private _addCustomDNS(ev: Event) {
-    const source = ev.target as any;
-    const version = source.version as "ipv4" | "ipv6";
-    if (!this._interface![version]!.nameservers) {
-      this._interface![version]!.nameservers = [];
+    if (item.value === "predefined" && item.addresses) {
+      if (!this._interface![version]!.nameservers) {
+        this._interface![version]!.nameservers = [];
+      }
+      this._interface![version]!.nameservers!.push(...item.addresses);
+      this._dirty = true;
+      this.requestUpdate("_interface");
+      return;
+    }
+    if (item.value === "custom") {
+      if (!this._interface![version]!.nameservers) {
+        this._interface![version]!.nameservers = [];
+      }
+      this._interface![version]!.nameservers!.push("");
+      this._dirty = true;
+      this.requestUpdate("_interface");
     }
-    this._interface![version]!.nameservers!.push("");
-    this._dirty = true;
-    this.requestUpdate("_interface");
   }
 
   private _removeNameserver(ev: Event): void {

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

@@ -1,7 +1,7 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
-  mdiChevronRight,
   mdiCog,
   mdiContentDuplicate,
   mdiDelete,
@@ -45,6 +45,9 @@ import type {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-button";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
@@ -53,11 +56,7 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu";
-import "../../../components/ha-md-menu-item";
 import "../../../components/ha-state-icon";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@@ -434,34 +433,8 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
-        (category) =>
-          html`<ha-md-menu-item
-            .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
-          >
-            ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-md-menu-item>`
-      )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-md-menu-item>`;
-
-    const labelItems = html` ${this._labels?.map((label) => {
+  private _renderLabelItems = (submenu = false) =>
+    html` ${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
         const selected = this._selected.every((entityId) =>
           this.hass.entities[entityId]?.labels.includes(label.label_id)
@@ -471,14 +444,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-md-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
+        return html`<ha-dropdown-item
+          .slot=${submenu ? "submenu" : ""}
+          value=${label.label_id}
+          data-action=${selected ? "remove" : "add"}
+          @click=${this._handleLabelMenuSelect}
         >
           <ha-checkbox
-            slot="start"
+            slot="icon"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -492,46 +465,74 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-md-menu-item>`;
+        </ha-dropdown-item>`;
       })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        @click=${this._handleCreateLabel}
+        .slot=${submenu ? "submenu" : ""}
+        value="create-label"
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
 
-    const areaItems = html`${Object.values(this.hass.areas).map(
+  private _renderCategoryItems = (submenu = false) =>
+    html`${this._categories?.map(
+        (category) =>
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_category"
+            data-category=${category.category_id}
+          >
+            ${category.icon
+              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
+            ${category.name}
+          </ha-dropdown-item>`
+      )}
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="no-category">
+        ${this.hass.localize(
+          "ui.panel.config.automation.picker.bulk_actions.no_category"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="create-category"
+      >
+        ${this.hass.localize("ui.panel.config.category.editor.add")}
+      </ha-dropdown-item>`;
+
+  private _renderAreaItems = (submenu = false) =>
+    html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-md-menu-item
-            .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_area"
+            data-area=${area.area_id}
           >
             ${area.icon
-              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="start"
+                  slot="icon"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            <div slot="headline">${area.name}</div>
-          </ha-md-menu-item>`
+            ${area.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.no_area"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.add_area"
-          )}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="no-area">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.no_area"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="create-area">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.add_area"
+        )}
+      </ha-dropdown-item>`;
 
+  protected render(): TemplateResult {
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -654,7 +655,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         ></ha-filter-categories>
 
         ${!this.narrow
-          ? html`<ha-md-button-menu slot="selection-bar">
+          ? html`<ha-dropdown
+                slot="selection-bar"
+                @wa-select=${this._handleOverflowMenuSelect}
+              >
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -666,11 +670,11 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                     .path=${mdiMenuDown}
                   ></ha-svg-icon>
                 </ha-assist-chip>
-                ${categoryItems}
-              </ha-md-button-menu>
+                ${this._renderCategoryItems()}
+              </ha-dropdown>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -682,11 +686,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${labelItems}
-                  </ha-md-button-menu>`}
+                    ${this._renderLabelItems()}
+                  </ha-dropdown>`}
               ${areasInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown
+                    slot="selection-bar"
+                    @wa-select=${this._handleOverflowMenuSelect}
+                  >
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -698,14 +705,15 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${areaItems}
-                  </ha-md-button-menu>`}`
+                    ${this._renderAreaItems()}
+                  </ha-dropdown>`}`
           : nothing}
         ${this.narrow || areasInOverflow
-          ? html`
-          <ha-md-button-menu has-overflow slot="selection-bar">
-            ${
-              this.narrow
+          ? html` <ha-dropdown
+              slot="selection-bar"
+              @wa-select=${this._handleOverflowMenuSelect}
+            >
+              ${this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -723,68 +731,32 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || labelsInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || areasInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.picker.bulk_actions.move_area"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-md-button-menu>`
+                  ></ha-icon-button>`}
+              ${this.narrow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.move_category"
+                    )}
+                    ${this._renderCategoryItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+              ${this.narrow || labelsInOverflow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                    )}
+                    ${this._renderLabelItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+              ${this.narrow || areasInOverflow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.devices.picker.bulk_actions.move_area"
+                    )}
+                    ${this._renderAreaItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+            </ha-dropdown>`
           : nothing}
         ${!this.scenes.length
           ? html`<div class="empty" slot="empty">
@@ -955,12 +927,52 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
-    this._bulkAddCategory(category);
+  private _handleLabelMenuSelect = (ev: CustomEvent) => {
+    ev.stopPropagation();
+    const item = ev.currentTarget as HaDropdownItem & {
+      dataset: { action?: string };
+    };
+    const action = item.dataset.action as "add" | "remove";
+    this._bulkLabel(item.value, action);
   };
 
-  private async _bulkAddCategory(category: string) {
+  private _handleCreateLabel = () => {
+    this._bulkCreateLabel();
+  };
+
+  private _handleOverflowMenuSelect = (ev: CustomEvent) => {
+    const item = ev.detail.item as HaDropdownItem;
+
+    switch (item.value) {
+      case "create-category":
+        this._bulkCreateCategory();
+        break;
+      case "no-category":
+        this._bulkAddCategory(null);
+        break;
+      case "create-label":
+        this._bulkCreateLabel();
+        break;
+      case "create-area":
+        this._bulkCreateArea();
+        break;
+      case "no-area":
+        this._bulkAddArea(null);
+        break;
+      case "move_category":
+        if (item.dataset.category) {
+          this._bulkAddCategory(item.dataset.category);
+        }
+        break;
+      case "move_area":
+        if (item.dataset.area) {
+          this._bulkAddArea(item.dataset.area);
+        }
+        break;
+    }
+  };
+
+  private async _bulkAddCategory(category: string | null) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
       promises.push(
@@ -985,12 +997,6 @@ ${rejected
     }
   }
 
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
   private async _bulkLabel(label: string, action: "add" | "remove") {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1021,12 +1027,7 @@ ${rejected
     }
   }
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
-    this._bulkAddArea(area);
-  };
-
-  private async _bulkAddArea(area: string) {
+  private async _bulkAddArea(area: string | null) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
       promises.push(
@@ -1231,7 +1232,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -1,6 +1,6 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 
-import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import {
   mdiCog,
   mdiContentDuplicate,
@@ -32,8 +32,10 @@ import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-alert";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-button";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-picker";
@@ -227,78 +229,66 @@ export class HaSceneEditor extends PreventUnsavedMixin(
           ? computeStateName(this._scene)
           : this.hass.localize("ui.panel.config.scene.editor.default_name")}
       >
-        <ha-button-menu
-          slot="toolbar-icon"
-          @action=${this._handleMenuAction}
-          activatable
-        >
+        <ha-dropdown slot="toolbar-icon" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-list-item
-            graphic="icon"
+          <ha-dropdown-item
+            value="apply"
             .disabled=${!this.sceneId || this._mode === "live"}
           >
+            <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.scene.picker.apply")}
-            <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
-            ${this.hass.localize("ui.panel.config.scene.picker.show_info")}
+          </ha-dropdown-item>
+          <ha-dropdown-item value="info" .disabled=${!this.sceneId}>
             <ha-svg-icon
-              slot="graphic"
+              slot="icon"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
-          </ha-list-item>
-          <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
+            ${this.hass.localize("ui.panel.config.scene.picker.show_info")}
+          </ha-dropdown-item>
+          <ha-dropdown-item value="settings" .disabled=${!this.sceneId}>
+            <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.automation.picker.show_settings"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
+          <ha-dropdown-item value="category" .disabled=${!this.sceneId}>
+            <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
             ${this.hass.localize(
               `ui.panel.config.scene.picker.${this._getCategory(this._entityRegistryEntries, this._scene?.entity_id) ? "edit_category" : "assign_category"}`
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <ha-list-item graphic="icon">
+          <ha-dropdown-item value="toggle_yaml">
+            <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
             ${this.hass.localize(
               `ui.panel.config.automation.editor.edit_${this._mode !== "yaml" ? "yaml" : "ui"}`
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <li divider role="separator"></li>
+          <wa-divider></wa-divider>
 
-          <ha-list-item .disabled=${!this.sceneId} graphic="icon">
+          <ha-dropdown-item value="duplicate" .disabled=${!this.sceneId}>
+            <ha-svg-icon slot="icon" .path=${mdiContentDuplicate}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.scene.picker.duplicate_scene"
             )}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiContentDuplicate}
-            ></ha-svg-icon>
-          </ha-list-item>
+          </ha-dropdown-item>
 
-          <ha-list-item
+          <ha-dropdown-item
+            value="delete"
             .disabled=${!this.sceneId}
-            class=${classMap({ warning: Boolean(this.sceneId) })}
-            graphic="icon"
+            .variant=${this.sceneId ? "danger" : "default"}
           >
+            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.scene.picker.delete_scene")}
-            <ha-svg-icon
-              class=${classMap({ warning: Boolean(this.sceneId) })}
-              slot="graphic"
-              .path=${mdiDelete}
-            >
-            </ha-svg-icon>
-          </ha-list-item>
-        </ha-button-menu>
+          </ha-dropdown-item>
+        </ha-dropdown>
         ${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
         ${this._mode === "yaml" ? this._renderYamlMode() : this._renderUiMode()}
         <ha-fab
@@ -652,24 +642,25 @@ export class HaSceneEditor extends PreventUnsavedMixin(
     }
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
+  private async _handleMenuAction(ev: CustomEvent) {
+    const item = ev.detail.item as HaDropdownItem;
+    switch (item.value) {
+      case "apply":
         activateScene(this.hass, this._scene!.entity_id);
         break;
-      case 1:
+      case "info":
         fireEvent(this, "hass-more-info", { entityId: this._scene!.entity_id });
         break;
-      case 2:
+      case "settings":
         showMoreInfoDialog(this, {
           entityId: this._scene!.entity_id,
           view: "settings",
         });
         break;
-      case 3:
+      case "category":
         this._editCategory(this._scene!);
         break;
-      case 4:
+      case "toggle_yaml":
         if (this._mode === "yaml") {
           this._initEntities(this._config!);
           this._exitYamlMode();
@@ -677,10 +668,10 @@ export class HaSceneEditor extends PreventUnsavedMixin(
           this._enterYamlMode();
         }
         break;
-      case 5:
+      case "duplicate":
         this._duplicate();
         break;
-      case 6:
+      case "delete":
         this._deleteTapped();
         break;
     }

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

@@ -1,7 +1,7 @@
+import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
-  mdiChevronRight,
   mdiCog,
   mdiContentDuplicate,
   mdiDelete,
@@ -46,6 +46,9 @@ import type {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
@@ -55,10 +58,6 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu";
-import "../../../components/ha-md-menu-item";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@@ -419,33 +418,35 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected render(): TemplateResult {
-    const categoryItems = html`${this._categories?.map(
+  private _renderCategoryItems = (submenu = false) =>
+    html`${this._categories?.map(
         (category) =>
-          html`<ha-md-menu-item
-            .value=${category.category_id}
-            .clickAction=${this._handleBulkCategory}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_category"
+            data-category=${category.category_id}
           >
             ${category.icon
-              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
-            <div slot="headline">${category.name}</div>
-          </ha-md-menu-item>`
+              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
+            ${category.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.bulk_actions.no_category"
-          )}
-        </div> </ha-md-menu-item
-      ><ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.category.editor.add")}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="no-category">
+        ${this.hass.localize(
+          "ui.panel.config.automation.picker.bulk_actions.no_category"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        .slot=${submenu ? "submenu" : ""}
+        value="create-category"
+      >
+        ${this.hass.localize("ui.panel.config.category.editor.add")}
+      </ha-dropdown-item>`;
 
-    const labelItems = html`${this._labels?.map((label) => {
+  private _renderLabelItems = (submenu = false) =>
+    html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
         const selected = this._selected.every((entityId) =>
           this.hass.entities[entityId]?.labels.includes(label.label_id)
@@ -455,15 +456,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-md-menu-item
-          .value=${label.label_id}
-          .action=${selected ? "remove" : "add"}
-          @click=${this._handleBulkLabel}
-          keep-open
-          reducedTouchTarget
-        >
-          <ha-checkbox
-            slot="start"
+        return html`<ha-dropdown-item
+          @click=${this._handleLabelMenuSelect}
+          .slot=${submenu ? "submenu" : ""}
+          value=${label.label_id}
+          data-action=${selected ? "remove" : "add"}
+          ><ha-checkbox
+            slot="icon"
             .checked=${selected}
             .indeterminate=${partial}
           ></ha-checkbox>
@@ -476,46 +475,47 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-md-menu-item>`;
+        </ha-dropdown-item>`;
       })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item
+        @click=${this._bulkCreateLabel}
+        .slot=${submenu ? "submenu" : ""}
+        value="create-label"
+      >
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
 
-    const areaItems = html`${Object.values(this.hass.areas).map(
+  private _renderAreaItems = (submenu = false) =>
+    html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-md-menu-item
-            .value=${area.area_id}
-            .clickAction=${this._handleBulkArea}
+          html`<ha-dropdown-item
+            .slot=${submenu ? "submenu" : ""}
+            value="move_area"
+            data-area=${area.area_id}
           >
             ${area.icon
-              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="start"
+                  slot="icon"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            <div slot="headline">${area.name}</div>
-          </ha-md-menu-item>`
+            ${area.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.no_area"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.add_area"
-          )}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="no-area">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.no_area"
+        )}
+      </ha-dropdown-item>
+      <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
+      <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="create-area">
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.add_area"
+        )}
+      </ha-dropdown-item>`;
 
+  protected render(): TemplateResult {
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -647,7 +647,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         ></ha-filter-blueprints>
 
         ${!this.narrow
-          ? html`<ha-md-button-menu slot="selection-bar">
+          ? html`<ha-dropdown
+                slot="selection-bar"
+                @wa-select=${this._handleOverflowMenuSelect}
+              >
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -659,11 +662,11 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                     .path=${mdiMenuDown}
                   ></ha-svg-icon>
                 </ha-assist-chip>
-                ${categoryItems}
-              </ha-md-button-menu>
+                ${this._renderCategoryItems()}
+              </ha-dropdown>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -675,11 +678,14 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${labelItems}
-                  </ha-md-button-menu>`}
+                    ${this._renderLabelItems()}
+                  </ha-dropdown>`}
               ${areasInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown
+                    slot="selection-bar"
+                    @wa-select=${this._handleOverflowMenuSelect}
+                  >
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -691,14 +697,15 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${areaItems}
-                  </ha-md-button-menu>`}`
+                    ${this._renderAreaItems()}
+                  </ha-dropdown>`}`
           : nothing}
         ${this.narrow || areasInOverflow
-          ? html`
-          <ha-md-button-menu has-overflow slot="selection-bar">
-            ${
-              this.narrow
+          ? html` <ha-dropdown
+              slot="selection-bar"
+              @wa-select=${this._handleOverflowMenuSelect}
+            >
+              ${this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -716,68 +723,32 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`
-            }
-              <ha-svg-icon
-                slot="trailing-icon"
-                .path=${mdiMenuDown}
-              ></ha-svg-icon
-            ></ha-assist-chip>
-            ${
-              this.narrow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.move_category"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || labelsInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.picker.bulk_actions.add_label"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-            ${
-              this.narrow || areasInOverflow
-                ? html`<ha-sub-menu>
-                    <ha-md-menu-item slot="item">
-                      <div slot="headline">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.picker.bulk_actions.move_area"
-                        )}
-                      </div>
-                      <ha-svg-icon
-                        slot="end"
-                        .path=${mdiChevronRight}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                    <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                  </ha-sub-menu>`
-                : nothing
-            }
-          </ha-md-button-menu>`
+                  ></ha-icon-button>`}
+              ${this.narrow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.move_category"
+                    )}
+                    ${this._renderCategoryItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+              ${this.narrow || labelsInOverflow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                    )}
+                    ${this._renderLabelItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+              ${this.narrow || areasInOverflow
+                ? html`<ha-dropdown-item>
+                    ${this.hass.localize(
+                      "ui.panel.config.devices.picker.bulk_actions.move_area"
+                    )}
+                    ${this._renderAreaItems(true)}
+                  </ha-dropdown-item>`
+                : nothing}
+            </ha-dropdown>`
           : nothing}
         ${!this.scripts.length
           ? html` <div class="empty" slot="empty">
@@ -995,9 +966,46 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private _handleBulkCategory = (item) => {
-    const category = item.value;
-    this._bulkAddCategory(category);
+  private _handleLabelMenuSelect = (ev: CustomEvent) => {
+    ev.stopPropagation();
+    const item = ev.currentTarget as HaDropdownItem & {
+      dataset: { action?: string };
+    };
+    const action = item.dataset.action as "add" | "remove";
+    this._bulkLabel(item.value, action);
+  };
+
+  private _handleOverflowMenuSelect = (ev: CustomEvent) => {
+    const item = ev.detail.item as HaDropdownItem & {
+      dataset: { action?: string };
+    };
+    switch (item.value) {
+      case "create-category":
+        this._bulkCreateCategory();
+        break;
+      case "no-category":
+        this._bulkAddCategory(null!);
+        break;
+      case "create-label":
+        this._bulkCreateLabel();
+        break;
+      case "create-area":
+        this._bulkCreateArea();
+        break;
+      case "no-area":
+        this._bulkAddArea(null!);
+        break;
+      case "move_area":
+        if (item.dataset.area) {
+          this._bulkAddArea(item.dataset.area);
+        }
+        break;
+      case "move_category":
+        if (item.dataset.category) {
+          this._bulkAddCategory(item.dataset.category);
+        }
+        break;
+    }
   };
 
   private async _bulkAddCategory(category: string) {
@@ -1025,12 +1033,6 @@ ${rejected
     }
   }
 
-  private async _handleBulkLabel(ev) {
-    const label = ev.currentTarget.value;
-    const action = ev.currentTarget.action;
-    this._bulkLabel(label, action);
-  }
-
   private async _bulkLabel(label: string, action: "add" | "remove") {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1235,11 +1237,6 @@ ${rejected
     });
   };
 
-  private _handleBulkArea = (item) => {
-    const area = item.value;
-    this._bulkAddArea(area);
-  };
-
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
     this._selected.forEach((entityId) => {
@@ -1322,7 +1319,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

src/panels/developer-tools/state/developer-tools-state.ts

@@ -144,6 +144,7 @@ class HaPanelDevState extends LitElement {
               .hass=${this.hass}
               .value=${this._entityId}
               @value-changed=${this._entityIdChanged}
+              allow-custom-entity
               show-entity-id
             ></ha-entity-picker>
             ${this._entityId

src/panels/home/dialogs/dialog-edit-home.ts

@@ -75,6 +75,7 @@ export class DialogEditHome
             "ui.panel.home.editor.favorite_entities_helper"
           )}
           reorder
+          allow-custom-entity
           @value-changed=${this._favoriteEntitiesChanged}
         ></ha-entities-picker>
 

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

@@ -167,6 +167,7 @@ export class HuiEntityEditor extends LitElement {
                       .index=${index}
                       .entityFilter=${this.entityFilter}
                       @value-changed=${this._valueChanged}
+                      allow-custom-entity
                     ></ha-entity-picker>
                   </div>
                 `

src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts

@@ -51,6 +51,7 @@ export class HuiGraphFooterEditor
     return html`
       <div class="card-config">
         <ha-entity-picker
+          allow-custom-entity
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
           )}

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

@@ -78,6 +78,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
                         ${isEntityBadge && entityBadge
                           ? html`
                               <ha-entity-picker
+                                allow-custom-entity
                                 hide-clear-icon
                                 .hass=${this.hass}
                                 .value=${entityBadge.entity ?? ""}
@@ -130,6 +131,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
           @value-changed=${this._entityPicked}
           .value=${undefined}
           @click=${preventDefault}
+          allow-custom-entity
           add-button
         ></ha-entity-picker>
       </div>

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

@@ -316,6 +316,7 @@ export class HuiStatisticsGraphCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
         <ha-statistics-picker
+          allow-custom-entity
           .hass=${this.hass}
           .placeholder=${this.hass!.localize(
             "ui.panel.lovelace.editor.card.statistics-graph.pick_statistic"

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -80,6 +80,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
                     `
                   : html`
                       <ha-entity-picker
+                        allow-custom-entity
                         hide-clear-icon
                         .hass=${this.hass}
                         .value=${(entityConf as EntityConfig).entity}

src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts

@@ -36,6 +36,7 @@ export class HuiHomeDashboardStrategyEditor
           "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
         )}
         reorder
+        allow-custom-entity
         @value-changed=${this._valueChanged}
       >
       </ha-entities-picker>

src/translations/en.json

@@ -1308,9 +1308,7 @@
       "combo-box": {
         "no_match": "No matching items found",
         "no_items": "No items available",
-        "unknown_item": "Unknown item",
-        "search_or_custom": "Search | Add custom item",
-        "add_custom_item": "Add custom item"
+        "unknown_item": "Unknown item"
       },
       "suggest_with_ai": {
         "label": "Suggest",
@@ -1319,9 +1317,6 @@
         "suggesting_3": "Enchanting…",
         "done": "Done!",
         "error": "Fail!"
-      },
-      "navigation-picker": {
-        "add_custom_path": "Add custom path"
       }
     },
     "dialogs": {

yarn.lock

@@ -9354,7 +9354,7 @@ __metadata:
     typescript: "npm:5.9.3"
     typescript-eslint: "npm:8.49.0"
     ua-parser-js: "npm:2.0.7"
-    vite-tsconfig-paths: "npm:6.0.1"
+    vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:4.0.15"
     vue: "npm:2.7.16"
     vue2-daterange-picker: "npm:0.6.8"
@@ -14698,9 +14698,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-tsconfig-paths@npm:6.0.1":
-  version: 6.0.1
-  resolution: "vite-tsconfig-paths@npm:6.0.1"
+"vite-tsconfig-paths@npm:5.1.4":
+  version: 5.1.4
+  resolution: "vite-tsconfig-paths@npm:5.1.4"
   dependencies:
     debug: "npm:^4.1.1"
     globrex: "npm:^0.1.2"
@@ -14710,7 +14710,7 @@ __metadata:
   peerDependenciesMeta:
     vite:
       optional: true
-  checksum: 10/7ac6d17efee21be805ed62857269d4e41d939774a8cc698e77145b4312edf996a9536e7a3b37e25486ae77d36fc5ae011378058ff290be39da16e52a47e87da7
+  checksum: 10/b409dbd17829f560021a71dba3e473b9c06dcf5fdc9d630b72c1f787145ec478b38caff1be04868971ac8bdcbf0f5af45eeece23dbc9c59c54b901f867740ae0
   languageName: node
   linkType: hard