Update dropdown adjustments

gallery/src/pages/components/ha-wa-dialog.ts

@@ -381,6 +381,10 @@ export class DemoHaWaDialog extends LitElement {
               <td><code>--dialog-z-index</code></td>
               <td>Z-index for the dialog.</td>
             </tr>
+            <tr>
+              <td><code>--dialog-surface-position</code></td>
+              <td>CSS position of the dialog surface.</td>
+            </tr>
             <tr>
               <td><code>--dialog-surface-margin-top</code></td>
               <td>Top margin for the dialog surface.</td>

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-ha.1",
+    "@home-assistant/webawesome": "3.0.0-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -209,7 +209,7 @@
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.7.3",
+    "prettier": "3.7.2",
     "rspack-manifest-plugin": "5.2.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",

src/components/chart/state-history-chart-timeline.ts

@@ -373,7 +373,6 @@ export class StateHistoryChartTimeline extends LitElement {
           itemName: 3,
         },
         renderItem: this._renderItem,
-        progressive: 0,
       });
     });
 

src/components/ha-areas-display-editor.ts

@@ -4,6 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { getAreaContext } from "../common/entity/context/get_area_context";
+import { areaCompare } from "../data/area_registry";
 import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./ha-items-display-editor";
@@ -36,7 +37,11 @@ export class HaAreasDisplayEditor extends LitElement {
   public showNavigationButton = false;
 
   protected render(): TemplateResult {
-    const areas = Object.values(this.hass.areas);
+    const compare = areaCompare(this.hass.areas);
+
+    const areas = Object.values(this.hass.areas).sort((areaA, areaB) =>
+      compare(areaA.area_id, areaB.area_id)
+    );
 
     const items: DisplayItem[] = areas.map((area) => {
       const { floor } = getAreaContext(area, this.hass.floors);

src/components/ha-areas-floors-display-editor.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { getAreaContext } from "../common/entity/context/get_area_context";
+import { areaCompare } from "../data/area_registry";
 import type { FloorRegistryEntry } from "../data/floor_registry";
 import { getFloors } from "../panels/lovelace/strategies/areas/helpers/areas-strategy-helper";
 import type { HomeAssistant } from "../types";
@@ -130,8 +131,11 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
       // update items if floors change
       _hassFloors: HomeAssistant["floors"]
     ): Record<string, DisplayItem[]> => {
-      const areas = Object.values(hassAreas);
+      const compare = areaCompare(hassAreas);
 
+      const areas = Object.values(hassAreas).sort((areaA, areaB) =>
+        compare(areaA.area_id, areaB.area_id)
+      );
       const groupedItems: Record<string, DisplayItem[]> = areas.reduce(
         (acc, area) => {
           const { floor } = getAreaContext(area, this.hass.floors);

src/components/ha-wa-dialog.ts

@@ -49,6 +49,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @cssprop --ha-dialog-surface-background - Dialog background color.
  * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
  * @cssprop --dialog-z-index - Z-index for the dialog.
+ * @cssprop --dialog-surface-position - CSS position of the dialog surface.
  * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
  *
  * @attr {boolean} open - Controls the dialog open state.
@@ -243,6 +244,7 @@ export class HaWaDialog extends LitElement {
           calc(var(--safe-height) - var(--ha-space-20))
         );
         min-height: var(--ha-dialog-min-height);
+        position: var(--dialog-surface-position, relative);
         margin-top: var(--dialog-surface-margin-top, auto);
         /* Used to offset the dialog from the safe areas when space is limited */
         transform: translate(

src/data/area_floor.ts

@@ -223,7 +223,6 @@ const getAreasAndFloorsItems = (
   }
 
   let outputAreas = areas;
-  let outputFloors = floors;
 
   let areaIds: string[] | undefined;
 
@@ -255,29 +254,9 @@ const getAreasAndFloorsItems = (
     outputAreas = outputAreas.filter(
       (area) => !area.floor_id || !excludeFloors!.includes(area.floor_id)
     );
-
-    outputFloors = outputFloors.filter(
-      (floor) => !excludeFloors!.includes(floor.floor_id)
-    );
   }
 
-  if (
-    entityFilter ||
-    deviceFilter ||
-    includeDomains ||
-    excludeDomains ||
-    includeDeviceClasses
-  ) {
-    // Ensure we only include floors that have areas with the filtered entities/devices
-    const validFloorIds = new Set(
-      outputAreas.map((area) => area.floor_id).filter((id) => id)
-    );
-    outputFloors = outputFloors.filter((floor) =>
-      validFloorIds.has(floor.floor_id)
-    );
-  }
-
-  const hierarchy = getAreasFloorHierarchy(outputFloors, outputAreas);
+  const hierarchy = getAreasFloorHierarchy(floors, outputAreas);
 
   const items: (
     | FloorComboBoxItem

src/data/area_registry.ts

@@ -1,3 +1,4 @@
+import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { DeviceRegistryEntry } from "./device_registry";
 import type {
@@ -104,3 +105,22 @@ export const getAreaDeviceLookup = (
   }
   return areaDeviceLookup;
 };
+
+export const areaCompare =
+  (entries?: HomeAssistant["areas"], order?: string[]) =>
+  (a: string, b: string) => {
+    const indexA = order ? order.indexOf(a) : -1;
+    const indexB = order ? order.indexOf(b) : -1;
+    if (indexA === -1 && indexB === -1) {
+      const nameA = entries?.[a]?.name ?? a;
+      const nameB = entries?.[b]?.name ?? b;
+      return stringCompare(nameA, nameB);
+    }
+    if (indexA === -1) {
+      return 1;
+    }
+    if (indexB === -1) {
+      return -1;
+    }
+    return indexA - indexB;
+  };

src/data/labs.ts

@@ -18,11 +18,6 @@ export interface LabPreviewFeaturesResponse {
   features: LabPreviewFeature[];
 }
 
-/**
- * Fetch all lab features
- * @param hass - The Home Assistant instance
- * @returns A promise to fetch the lab features
- */
 export const fetchLabFeatures = async (
   hass: HomeAssistant
 ): Promise<LabPreviewFeature[]> => {
@@ -32,15 +27,6 @@ export const fetchLabFeatures = async (
   return response.features;
 };
 
-/**
- * Update a specific lab feature
- * @param hass - The Home Assistant instance
- * @param domain - The domain of the lab feature
- * @param preview_feature - The preview feature of the lab feature
- * @param enabled - Whether the lab feature is enabled
- * @param create_backup - Whether to create a backup of the lab feature
- * @returns A promise to update the lab feature
- */
 export const labsUpdatePreviewFeature = (
   hass: HomeAssistant,
   domain: string,
@@ -79,12 +65,6 @@ const subscribeLabUpdates = (
     "labs_updated"
   );
 
-/**
- * Subscribe to a collection of lab features
- * @param conn - The connection to the Home Assistant instance
- * @param onChange - The function to call when the lab features change
- * @returns The unsubscribe function
- */
 export const subscribeLabFeatures = (
   conn: Connection,
   onChange: (features: LabPreviewFeature[]) => void
@@ -96,27 +76,3 @@ export const subscribeLabFeatures = (
     conn,
     onChange
   );
-
-/**
- * Subscribe to a specific lab feature
- * @param conn - The connection to the Home Assistant instance
- * @param domain - The domain of the lab feature
- * @param previewFeature - The preview feature of the lab feature
- * @param onChange - The function to call when the lab feature changes
- * @returns The unsubscribe function
- */
-export const subscribeLabFeature = (
-  conn: Connection,
-  domain: string,
-  previewFeature: string,
-  onChange: (enabled: boolean) => void
-) =>
-  subscribeLabFeatures(conn, (features) => {
-    const enabled =
-      features.find(
-        (feature) =>
-          feature.domain === domain &&
-          feature.preview_feature === previewFeature
-      )?.enabled ?? false;
-    onChange(enabled);
-  });

src/data/weather.ts

@@ -82,12 +82,6 @@ export interface WeatherEntity extends HassEntityBase {
   attributes: WeatherEntityAttributes;
 }
 
-export const WEATHER_TEMPERATURE_ATTRIBUTES = new Set<string>([
-  "temperature",
-  "apparent_temperature",
-  "dew_point",
-]);
-
 export const weatherSVGs = new Set<string>([
   "clear-night",
   "cloudy",
@@ -262,15 +256,9 @@ export const getWeatherUnit = (
 export const getSecondaryWeatherAttribute = (
   hass: HomeAssistant,
   stateObj: WeatherEntity,
-  forecast: ForecastAttribute[],
-  temperatureFractionDigits?: number
+  forecast: ForecastAttribute[]
 ): TemplateResult | undefined => {
-  const extrema = getWeatherExtrema(
-    hass,
-    stateObj,
-    forecast,
-    temperatureFractionDigits
-  );
+  const extrema = getWeatherExtrema(hass, stateObj, forecast);
 
   if (extrema) {
     return extrema;
@@ -310,8 +298,7 @@ export const getSecondaryWeatherAttribute = (
 const getWeatherExtrema = (
   hass: HomeAssistant,
   stateObj: WeatherEntity,
-  forecast: ForecastAttribute[],
-  temperatureFractionDigits?: number
+  forecast: ForecastAttribute[]
 ): TemplateResult | undefined => {
   if (!forecast?.length) {
     return undefined;
@@ -326,22 +313,13 @@ const getWeatherExtrema = (
       break;
     }
     if (!tempHigh || fc.temperature > tempHigh) {
-      tempHigh =
-        temperatureFractionDigits === undefined
-          ? fc.temperature
-          : round(fc.temperature, temperatureFractionDigits);
+      tempHigh = fc.temperature;
     }
-    if (fc.templow !== undefined && (!tempLow || fc.templow < tempLow)) {
-      tempLow =
-        temperatureFractionDigits === undefined
-          ? fc.templow
-          : round(fc.templow, temperatureFractionDigits);
+    if (!tempLow || (fc.templow && fc.templow < tempLow)) {
+      tempLow = fc.templow;
     }
     if (!fc.templow && (!tempLow || fc.temperature < tempLow)) {
-      tempLow =
-        temperatureFractionDigits === undefined
-          ? fc.temperature
-          : round(fc.temperature, temperatureFractionDigits);
+      tempLow = fc.temperature;
     }
   }
 

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

@@ -14,7 +14,7 @@ import {
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } 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 { cache } from "lit/directives/cache";
 import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
@@ -50,12 +50,7 @@ import { lightSupportsFavoriteColors } from "../../data/light";
 import type { ItemType } from "../../data/search";
 import { SearchableDomains } from "../../data/search";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
-import { ScrollableFadeMixin } from "../../mixins/scrollable-fade-mixin";
-import {
-  haStyleDialog,
-  haStyleDialogFixedTop,
-  haStyleScrollbar,
-} from "../../resources/styles";
+import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import "../../state-summary/state-card-content";
 import type { HomeAssistant } from "../../types";
 import {
@@ -101,15 +96,13 @@ declare global {
 const DEFAULT_VIEW: View = "info";
 
 @customElement("ha-more-info-dialog")
-export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
+export class MoreInfoDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
   @state() private _parentEntityIds: string[] = [];
 
-  @query(".content") private _contentElement!: HTMLDivElement;
-
   @state() private _entityId?: string | null;
 
   @state() private _data?: Record<string, any>;
@@ -128,16 +121,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
-  private static readonly SCROLL_FADE_THRESHOLD = 24;
-
-  protected get scrollableElement(): HTMLElement | null {
-    return this._contentElement;
-  }
-
-  protected get scrollFadeThreshold() {
-    return MoreInfoDialog.SCROLL_FADE_THRESHOLD;
-  }
-
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
     if (!this._entityId) {
@@ -598,81 +581,78 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                 `
               : nothing}
         </ha-dialog-header>
-        <div class="content-wrapper">
-          ${keyed(
-            this._entityId,
-            html`
-              <div
-                class="content ha-scrollbar"
-                tabindex="-1"
-                dialogInitialFocus
-                @show-child-view=${this._showChildView}
-                @entity-entry-updated=${this._entryUpdated}
-                @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
-                @hass-more-info=${this._handleMoreInfoEvent}
-              >
-                ${cache(
-                  this._childView
+        ${keyed(
+          this._entityId,
+          html`
+            <div
+              class="content"
+              tabindex="-1"
+              dialogInitialFocus
+              @show-child-view=${this._showChildView}
+              @entity-entry-updated=${this._entryUpdated}
+              @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
+              @hass-more-info=${this._handleMoreInfoEvent}
+            >
+              ${cache(
+                this._childView
+                  ? html`
+                      <div class="child-view">
+                        ${dynamicElement(this._childView.viewTag, {
+                          hass: this.hass,
+                          entry: this._entry,
+                          params: this._childView.viewParams,
+                        })}
+                      </div>
+                    `
+                  : this._currView === "info"
                     ? html`
-                        <div class="child-view">
-                          ${dynamicElement(this._childView.viewTag, {
-                            hass: this.hass,
-                            entry: this._entry,
-                            params: this._childView.viewParams,
-                          })}
-                        </div>
+                        <ha-more-info-info
+                          dialogInitialFocus
+                          .hass=${this.hass}
+                          .entityId=${this._entityId}
+                          .entry=${this._entry}
+                          .editMode=${this._infoEditMode}
+                          .data=${this._data}
+                        ></ha-more-info-info>
                       `
-                    : this._currView === "info"
+                    : this._currView === "history"
                       ? html`
-                          <ha-more-info-info
-                            dialogInitialFocus
+                          <ha-more-info-history-and-logbook
                             .hass=${this.hass}
                             .entityId=${this._entityId}
-                            .entry=${this._entry}
-                            .editMode=${this._infoEditMode}
-                            .data=${this._data}
-                          ></ha-more-info-info>
+                          ></ha-more-info-history-and-logbook>
                         `
-                      : this._currView === "history"
+                      : this._currView === "settings"
                         ? html`
-                            <ha-more-info-history-and-logbook
+                            <ha-more-info-settings
                               .hass=${this.hass}
                               .entityId=${this._entityId}
-                            ></ha-more-info-history-and-logbook>
+                              .entry=${this._entry}
+                            ></ha-more-info-settings>
                           `
-                        : this._currView === "settings"
+                        : this._currView === "related"
                           ? html`
-                              <ha-more-info-settings
+                              <ha-related-items
                                 .hass=${this.hass}
-                                .entityId=${this._entityId}
-                                .entry=${this._entry}
-                              ></ha-more-info-settings>
+                                .itemId=${entityId}
+                                .itemType=${SearchableDomains.has(domain)
+                                  ? (domain as ItemType)
+                                  : "entity"}
+                              ></ha-related-items>
                             `
-                          : this._currView === "related"
+                          : this._currView === "add_to"
                             ? html`
-                                <ha-related-items
+                                <ha-more-info-add-to
                                   .hass=${this.hass}
-                                  .itemId=${entityId}
-                                  .itemType=${SearchableDomains.has(domain)
-                                    ? (domain as ItemType)
-                                    : "entity"}
-                                ></ha-related-items>
+                                  .entityId=${entityId}
+                                  @add-to-action-selected=${this._goBack}
+                                ></ha-more-info-add-to>
                               `
-                            : this._currView === "add_to"
-                              ? html`
-                                  <ha-more-info-add-to
-                                    .hass=${this.hass}
-                                    .entityId=${entityId}
-                                    @add-to-action-selected=${this._goBack}
-                                  ></ha-more-info-add-to>
-                                `
-                              : nothing
-                )}
-              </div>
-            `
-          )}
-          ${this.renderScrollableFades()}
-        </div>
+                            : nothing
+              )}
+            </div>
+          `
+        )}
       </ha-dialog>
     `;
   }
@@ -727,27 +707,18 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
   static get styles() {
     return [
-      ...super.styles,
       haStyleDialog,
       haStyleDialogFixedTop,
-      haStyleScrollbar,
       css`
         ha-dialog {
           --dialog-content-padding: 0;
         }
 
-        .content-wrapper {
-          flex: 1 1 auto;
-          min-height: 0;
-          position: relative;
+        .content {
           display: flex;
           flex-direction: column;
-        }
-
-        .content {
           outline: none;
           flex: 1;
-          overflow: auto;
         }
 
         .child-view {

src/mixins/scrollable-fade-mixin.ts

@@ -13,27 +13,19 @@ import type { Constructor } from "../types";
 const stylesArray = (styles?: CSSResultGroup | CSSResultGroup[]) =>
   styles === undefined ? [] : Array.isArray(styles) ? styles : [styles];
 
-/**
- * Mixin that adds top and bottom fade overlays for scrollable content.
- * @param superClass - The LitElement class to extend.
- * @returns Extended class with scrollable fade functionality.
- */
 export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
   superClass: T
 ) => {
   class ScrollableFadeClass extends superClass {
-    /** Whether content has scrolled past the threshold. Controls top fade visibility. */
     @state() protected _contentScrolled = false;
 
-    /** Whether content extends beyond the viewport. Controls bottom fade visibility. */
     @state() protected _contentScrollable = false;
 
     private _scrollTarget?: HTMLElement | null;
 
     private _onScroll = (ev: Event) => {
       const target = ev.currentTarget as HTMLElement;
-      this._contentScrolled =
-        (target.scrollTop ?? 0) > this.scrollFadeThreshold;
+      this._contentScrolled = (target.scrollTop ?? 0) > 0;
       this._updateScrollableState(target);
     };
 
@@ -47,42 +39,15 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
       },
     });
 
-    /**
-     * The default safe area padding for the scrollable element.
-     */
     private static readonly DEFAULT_SAFE_AREA_PADDING = 16;
 
-    /**
-     * The default scroll threshold for the scrollable element.
-     */
-    private static readonly DEFAULT_SCROLL_THRESHOLD = 4;
-
-    /**
-     * The default scrollable element.
-     */
     private static readonly DEFAULT_SCROLLABLE_ELEMENT: HTMLElement | null =
       null;
 
-    /**
-     * Safe area padding in pixels for scrollable calculations. Override to customize.
-     * @returns Safe area padding value in pixels.
-     */
     protected get scrollFadeSafeAreaPadding() {
       return ScrollableFadeClass.DEFAULT_SAFE_AREA_PADDING;
     }
 
-    /**
-     * Scroll threshold in pixels for showing the top fade. Override to customize.
-     * @returns Scroll threshold value in pixels.
-     */
-    protected get scrollFadeThreshold() {
-      return ScrollableFadeClass.DEFAULT_SCROLL_THRESHOLD;
-    }
-
-    /**
-     * Element to observe for scroll and resize events. Override to specify target.
-     * @returns The element to observe, or null.
-     */
     protected get scrollableElement(): HTMLElement | null {
       return ScrollableFadeClass.DEFAULT_SCROLLABLE_ELEMENT;
     }
@@ -102,11 +67,6 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
       super.disconnectedCallback();
     }
 
-    /**
-     * Renders top and bottom fade overlays. Call in render method.
-     * @param rounded - Whether to apply rounded corners.
-     * @returns Template containing fade elements.
-     */
     protected renderScrollableFades(rounded = false): TemplateResult {
       return html`
         <div

src/panels/config/areas/dialog-areas-floors-order.ts

@@ -172,7 +172,7 @@ class DialogAreasFloorsOrder extends LitElement {
           ? html`<div class="floor-header">
               <span class="floor-name">
                 ${this.hass.localize(
-                  "ui.panel.config.areas.dialog.other_areas"
+                  "ui.panel.config.areas.dialog.unassigned_areas"
                 )}
               </span>
             </div>`

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

@@ -266,7 +266,7 @@ export class HaConfigAreasDashboard extends LitElement {
                   <div class="header">
                     <h2>
                       ${this.hass.localize(
-                        "ui.panel.config.areas.picker.other_areas"
+                        "ui.panel.config.areas.picker.unassigned_areas"
                       )}
                     </h2>
                   </div>

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAlertCircleCheck,
@@ -33,11 +32,11 @@ import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 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-icon-button";
+import "../../../../components/ha-md-button-menu";
+import "../../../../components/ha-md-divider";
+import "../../../../components/ha-md-menu-item";
 import "../../../../components/ha-service-icon";
 import "../../../../components/ha-tooltip";
 import {
@@ -289,12 +288,15 @@ export default class HaAutomationActionRow extends LitElement {
             </ha-tooltip>`
         : nothing}
 
-      <ha-dropdown
+      <ha-md-button-menu
+        quick
         slot="icons"
         @click=${preventDefaultStopPropagation}
         @keydown=${stopPropagation}
-        @wa-select=${this._handleDropdownSelect}
-        placement="bottom-end"
+        @closed=${stopPropagation}
+        positioning="fixed"
+        anchor-corner="end-end"
+        menu-corner="start-end"
       >
         <ha-icon-button
           slot="trigger"
@@ -302,24 +304,30 @@ export default class HaAutomationActionRow extends LitElement {
           .path=${mdiDotsVertical}
         ></ha-icon-button>
 
-        <ha-dropdown-item value="run">
-          <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
+        <ha-md-menu-item .clickAction=${this._runAction}>
+          <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize("ui.panel.config.automation.editor.actions.run")
           )}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="rename" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+        </ha-md-menu-item>
+        <ha-md-menu-item
+          .clickAction=${this._renameAction}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.rename"
             )
           )}
-        </ha-dropdown-item>
-        <wa-divider></wa-divider>
-        <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
+        </ha-md-menu-item>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+        <ha-md-menu-item
+          .clickAction=${this._duplicateAction}
+          .disabled=${this.disabled}
+        >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${mdiPlusCircleMultipleOutline}
           ></ha-svg-icon>
 
@@ -328,10 +336,13 @@ export default class HaAutomationActionRow extends LitElement {
               "ui.panel.config.automation.editor.actions.duplicate"
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="copy" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+        <ha-md-menu-item
+          .clickAction=${this._copyAction}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.copy"
@@ -340,6 +351,7 @@ export default class HaAutomationActionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -350,10 +362,13 @@ export default class HaAutomationActionRow extends LitElement {
               <span>C</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="cut" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
+        <ha-md-menu-item
+          .clickAction=${this._cutAction}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.cut"
@@ -362,6 +377,7 @@ export default class HaAutomationActionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -372,48 +388,51 @@ export default class HaAutomationActionRow extends LitElement {
               <span>X</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
         ${!this.optionsInSidebar
           ? html`
-              <ha-dropdown-item
-                value="move_up"
+              <ha-md-menu-item
+                .clickAction=${this._moveUp}
                 .disabled=${this.disabled || !!this.first}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_up"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
-              ></ha-dropdown-item>
-              <ha-dropdown-item
-                value="move_down"
+                <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+              ></ha-md-menu-item>
+              <ha-md-menu-item
+                .clickAction=${this._moveDown}
                 .disabled=${this.disabled || !!this.last}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_down"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
-              ></ha-dropdown-item>
+                <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+              ></ha-md-menu-item>
             `
           : nothing}
 
-        <ha-dropdown-item
-          value="toggle_yaml_mode"
+        <ha-md-menu-item
+          .clickAction=${this._toggleYamlMode}
           .disabled=${!this._uiModeAvailable || !!this._warnings}
         >
-          <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <wa-divider></wa-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
 
-        <ha-dropdown-item value="disable" .disabled=${this.disabled}>
+        <ha-md-menu-item
+          .clickAction=${this._onDisable}
+          .disabled=${this.disabled}
+        >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${this.action.enabled === false
               ? mdiPlayCircleOutline
               : mdiStopCircleOutline}
@@ -424,15 +443,15 @@ export default class HaAutomationActionRow extends LitElement {
               `ui.panel.config.automation.editor.actions.${this.action.enabled === false ? "enable" : "disable"}`
             )
           )}
-        </ha-dropdown-item>
-        <ha-dropdown-item
-          value="delete"
-          variant="danger"
+        </ha-md-menu-item>
+        <ha-md-menu-item
+          class="warning"
+          .clickAction=${this._onDelete}
           .disabled=${this.disabled}
         >
           <ha-svg-icon
             class="warning"
-            slot="icon"
+            slot="start"
             .path=${mdiDelete}
           ></ha-svg-icon>
 
@@ -444,6 +463,7 @@ export default class HaAutomationActionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -458,8 +478,8 @@ export default class HaAutomationActionRow extends LitElement {
               >
             </span>`
           )}
-        </ha-dropdown-item>
-      </ha-dropdown>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
 
       ${!this.optionsInSidebar
         ? html`${this._warnings
@@ -870,47 +890,6 @@ export default class HaAutomationActionRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "run":
-        this._runAction();
-        break;
-      case "rename":
-        this._renameAction();
-        break;
-      case "duplicate":
-        this._duplicateAction();
-        break;
-      case "copy":
-        this._copyAction();
-        break;
-      case "cut":
-        this._cutAction();
-        break;
-      case "move_up":
-        this._moveUp();
-        break;
-      case "move_down":
-        this._moveDown();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode(ev.target as HTMLElement);
-        break;
-      case "disable":
-        this._onDisable();
-        break;
-      case "delete":
-        this._onDelete();
-        break;
-    }
-  }
-
   static styles = [rowStyles, overflowStyles];
 }
 

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

@@ -97,7 +97,7 @@ import {
   fetchIntegrationManifests,
 } from "../../../data/integration";
 import type { LabelRegistryEntry } from "../../../data/label_registry";
-import { subscribeLabFeature } from "../../../data/labs";
+import { subscribeLabFeatures } from "../../../data/labs";
 import {
   TARGET_SEPARATOR,
   getConditionsForTarget,
@@ -281,12 +281,15 @@ class DialogAddAutomationElement
     this._fetchManifests();
     this._calculateUsedDomains();
 
-    this._unsubscribeLabFeatures = subscribeLabFeature(
+    this._unsubscribeLabFeatures = subscribeLabFeatures(
       this.hass.connection,
-      "automation",
-      "new_triggers_conditions",
-      (enabled) => {
-        this._newTriggersAndConditions = enabled;
+      (features) => {
+        this._newTriggersAndConditions =
+          features.find(
+            (feature) =>
+              feature.domain === "automation" &&
+              feature.preview_feature === "new_triggers_conditions"
+          )?.enabled ?? false;
         this._tab = this._newTriggersAndConditions ? "targets" : "groups";
       }
     );
@@ -683,7 +686,6 @@ class DialogAddAutomationElement
               <ha-automation-add-items
                 .hass=${this.hass}
                 .items=${this._getItems()}
-                .scrollable=${!this._narrow}
                 .error=${this._tab === "targets" && this._loadItemsError
                   ? this.hass.localize(
                       "ui.panel.config.automation.editor.load_target_items_failed"
@@ -2144,7 +2146,7 @@ class DialogAddAutomationElement
           min-height: 160px;
         }
         .content.column ha-automation-add-from-target {
-          overflow: clip;
+          overflow: hidden;
         }
 
         ha-wa-dialog ha-automation-add-items {

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -911,10 +911,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
     const services: Record<string, Level3Entries> = {};
 
     unassignedDevices.forEach(({ id: deviceId, entry_type }) => {
-      const device = this.devices[deviceId];
-      if (!device || device.disabled_by) {
-        return;
-      }
       const deviceEntry = {
         open: false,
         entities:
@@ -1016,10 +1012,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
     const devices: Record<string, Level3Entries> = {};
 
     referenced_devices.forEach(({ id: deviceId }) => {
-      const device = this.devices[deviceId];
-      if (!device || device.disabled_by) {
-        return;
-      }
       devices[deviceId] = {
         open: false,
         entities:

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

@@ -60,8 +60,6 @@ export class HaAutomationAddItems extends LitElement {
   @property({ type: Boolean, attribute: "tooltip-description" })
   public tooltipDescription = false;
 
-  @property({ type: Boolean, reflect: true }) scrollable = false;
-
   @state() private _itemsScrolled = false;
 
   @query(".items")
@@ -262,12 +260,11 @@ export class HaAutomationAddItems extends LitElement {
     :host {
       display: flex;
     }
-    :host([scrollable]) .items {
-      overflow: auto;
-    }
+
     .items {
       display: flex;
       flex-direction: column;
+      overflow: auto;
       flex: 1;
     }
     .items.blank {

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
@@ -34,11 +33,11 @@ import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-condition-icon";
-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-icon-button";
+import "../../../../components/ha-md-button-menu";
+import "../../../../components/ha-md-divider";
+import "../../../../components/ha-md-menu-item";
 import type {
   AutomationClipboard,
   Condition,
@@ -195,12 +194,15 @@ export default class HaAutomationConditionRow extends LitElement {
 
       <slot name="icons" slot="icons"></slot>
 
-      <ha-dropdown
+      <ha-md-button-menu
+        quick
         slot="icons"
         @click=${preventDefaultStopPropagation}
         @keydown=${stopPropagation}
-        @wa-select=${this._handleDropdownSelect}
-        placement="bottom-end"
+        @closed=${stopPropagation}
+        positioning="fixed"
+        anchor-corner="end-end"
+        menu-corner="start-end"
       >
         <ha-icon-button
           slot="trigger"
@@ -209,28 +211,34 @@ export default class HaAutomationConditionRow extends LitElement {
         >
         </ha-icon-button>
 
-        <ha-dropdown-item value="test">
-          <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
+        <ha-md-menu-item .clickAction=${this._testCondition}>
+          <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.conditions.test"
             )
           )}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="rename" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+        </ha-md-menu-item>
+        <ha-md-menu-item
+          .clickAction=${this._renameCondition}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.conditions.rename"
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <wa-divider></wa-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
 
-        <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
+        <ha-md-menu-item
+          .clickAction=${this._duplicateCondition}
+          .disabled=${this.disabled}
+        >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${mdiPlusCircleMultipleOutline}
           ></ha-svg-icon>
           ${this._renderOverflowLabel(
@@ -238,10 +246,13 @@ export default class HaAutomationConditionRow extends LitElement {
               "ui.panel.config.automation.editor.actions.duplicate"
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="copy" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon
+        <ha-md-menu-item
+          .clickAction=${this._copyCondition}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon
           >${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.copy"
@@ -250,6 +261,7 @@ export default class HaAutomationConditionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -260,10 +272,13 @@ export default class HaAutomationConditionRow extends LitElement {
               <span>C</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="cut" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon
+        <ha-md-menu-item
+          .clickAction=${this._cutCondition}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon
           >${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.cut"
@@ -272,6 +287,7 @@ export default class HaAutomationConditionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -282,45 +298,48 @@ export default class HaAutomationConditionRow extends LitElement {
               <span>X</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
         ${!this.optionsInSidebar
           ? html`
-              <ha-dropdown-item
-                value="move_up"
-                .disabled=${this.disabled || !!this.first}
+              <ha-md-menu-item
+                .clickAction=${this._moveUp}
+                .disabled=${this.disabled || this.first}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_up"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
-              ></ha-dropdown-item>
-              <ha-dropdown-item
-                value="move_down"
-                .disabled=${this.disabled || !!this.last}
+                <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+              ></ha-md-menu-item>
+              <ha-md-menu-item
+                .clickAction=${this._moveDown}
+                .disabled=${this.disabled || this.last}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_down"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
-              ></ha-dropdown-item>
+                <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+              ></ha-md-menu-item>
             `
           : nothing}
 
-        <ha-dropdown-item value="toggle_yaml_mode">
-          <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <ha-md-menu-item .clickAction=${this._toggleYamlMode}>
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <wa-divider></wa-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
 
-        <ha-dropdown-item value="disable" .disabled=${this.disabled}>
+        <ha-md-menu-item
+          .clickAction=${this._onDisable}
+          .disabled=${this.disabled}
+        >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${this.condition.enabled === false
               ? mdiPlayCircleOutline
               : mdiStopCircleOutline}
@@ -331,15 +350,15 @@ export default class HaAutomationConditionRow extends LitElement {
               `ui.panel.config.automation.editor.actions.${this.condition.enabled === false ? "enable" : "disable"}`
             )
           )}
-        </ha-dropdown-item>
-        <ha-dropdown-item
-          variant="danger"
-          value="delete"
+        </ha-md-menu-item>
+        <ha-md-menu-item
+          class="warning"
+          .clickAction=${this._onDelete}
           .disabled=${this.disabled}
         >
           <ha-svg-icon
             class="warning"
-            slot="icon"
+            slot="start"
             .path=${mdiDelete}
           ></ha-svg-icon>
           ${this._renderOverflowLabel(
@@ -350,6 +369,7 @@ export default class HaAutomationConditionRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -364,8 +384,8 @@ export default class HaAutomationConditionRow extends LitElement {
               >
             </span>`
           )}
-        </ha-dropdown-item>
-      </ha-dropdown>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
       ${!this.optionsInSidebar
         ? html`${this._warnings
               ? html`<ha-automation-editor-warning
@@ -817,47 +837,6 @@ export default class HaAutomationConditionRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "test":
-        this._testCondition();
-        break;
-      case "rename":
-        this._renameCondition();
-        break;
-      case "duplicate":
-        this._duplicateCondition();
-        break;
-      case "copy":
-        this._copyCondition();
-        break;
-      case "cut":
-        this._cutCondition();
-        break;
-      case "move_up":
-        this._moveUp();
-        break;
-      case "move_down":
-        this._moveDown();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode(ev.target as HTMLElement);
-        break;
-      case "disable":
-        this._onDisable();
-        break;
-      case "delete":
-        this._onDelete();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       rowStyles,

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

@@ -28,7 +28,7 @@ import {
   CONDITION_BUILDING_BLOCKS,
   subscribeConditions,
 } from "../../../../data/condition";
-import { subscribeLabFeature } from "../../../../data/labs";
+import { subscribeLabFeatures } from "../../../../data/labs";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import {
@@ -90,14 +90,14 @@ export default class HaAutomationCondition extends SubscribeMixin(LitElement) {
 
   protected hassSubscribe() {
     return [
-      subscribeLabFeature(
-        this.hass!.connection,
-        "automation",
-        "new_triggers_conditions",
-        (enabled) => {
-          this._newTriggersAndConditions = enabled;
-        }
-      ),
+      subscribeLabFeatures(this.hass!.connection, (features) => {
+        this._newTriggersAndConditions =
+          features.find(
+            (feature) =>
+              feature.domain === "automation" &&
+              feature.preview_feature === "new_triggers_conditions"
+          )?.enabled ?? false;
+      }),
     ];
   }
 

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
@@ -26,20 +25,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-fade-in";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
@@ -77,6 +74,7 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
+import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -88,10 +86,10 @@ import {
   type EntityRegistryUpdate,
   showAutomationSaveDialog,
 } from "./automation-save-dialog/show-dialog-automation-save";
-import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
+import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -294,10 +292,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
               </ha-button>
             `
           : ""}
-        <ha-dropdown
-          slot="toolbar-icon"
-          @wa-select=${this._handleDropdownSelect}
-        >
+        <ha-button-menu slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -305,73 +300,99 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
           ></ha-icon-button>
 
           ${this._mode === "gui" && this.narrow
-            ? html`<ha-dropdown-item
-                  value="undo"
+            ? html`<ha-list-item
+                  graphic="icon"
+                  @click=${this._undo}
                   .disabled=${!this._undoRedoController.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
-                  <ha-svg-icon slot="icon" .path=${mdiUndo}></ha-svg-icon>
-                </ha-dropdown-item>
-                <ha-dropdown-item
-                  value="redo"
+                  <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
+                </ha-list-item>
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._redo}
                   .disabled=${!this._undoRedoController.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
-                  <ha-svg-icon slot="icon" .path=${mdiRedo}></ha-svg-icon>
-                </ha-dropdown-item>`
+                  <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
+                </ha-list-item>`
             : nothing}
 
-          <ha-dropdown-item .disabled=${!stateObj} value="info">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._showInfo}
+          >
             ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="settings">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._showSettings}
+          >
             ${this.hass.localize(
               "ui.panel.config.automation.picker.show_settings"
             )}
-            <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="category">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._editCategory}
+          >
             ${this.hass.localize(
               `ui.panel.config.scene.picker.${this._registryEntry?.categories?.automation ? "edit_category" : "assign_category"}`
             )}
-            <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="run">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._runActions}
+          >
             ${this.hass.localize("ui.panel.config.automation.editor.run")}
-            <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
+          </ha-list-item>
 
           ${stateObj && this.narrow
-            ? html`<ha-dropdown-item value="trace">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.show_trace"
-                )}
-                <ha-svg-icon
-                  slot="icon"
-                  .path=${mdiTransitConnection}
-                ></ha-svg-icon>
-              </ha-dropdown-item>`
+            ? html`<a
+                href="/config/automation/trace/${encodeURIComponent(
+                  this._config.id!
+                )}"
+              >
+                <ha-list-item graphic="icon">
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.show_trace"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiTransitConnection}
+                  ></ha-svg-icon>
+                </ha-list-item>
+              </a>`
             : nothing}
 
-          <ha-dropdown-item
-            value="rename"
+          <ha-list-item
+            graphic="icon"
+            @click=${this._promptAutomationAlias}
             .disabled=${this._readOnly ||
             !this.automationId ||
             this._mode === "yaml"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.rename")}
-            <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
+          </ha-list-item>
           ${!useBlueprint
             ? html`
-                <ha-dropdown-item
+                <ha-list-item
+                  graphic="icon"
                   @click=${this._promptAutomationMode}
                   .disabled=${this._readOnly || this._mode === "yaml"}
                 >
@@ -379,17 +400,18 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                     "ui.panel.config.automation.editor.change_mode"
                   )}
                   <ha-svg-icon
-                    slot="icon"
+                    slot="graphic"
                     .path=${mdiDebugStepOver}
                   ></ha-svg-icon>
-                </ha-dropdown-item>
+                </ha-list-item>
               `
             : nothing}
 
-          <ha-dropdown-item
-            .disabled=${!!this._blueprintConfig ||
+          <ha-list-item
+            .disabled=${this._blueprintConfig ||
             (!this._readOnly && !this.automationId)}
-            value="duplicate"
+            graphic="icon"
+            @click=${this._duplicate}
           >
             ${this.hass.localize(
               this._readOnly
@@ -397,60 +419,74 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 : "ui.panel.config.automation.editor.duplicate"
             )}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiPlusCircleMultipleOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
           ${useBlueprint
             ? html`
-                <ha-dropdown-item
-                  value="take_control"
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._takeControl}
                   .disabled=${this._readOnly}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.take_control"
                   )}
-                  <ha-svg-icon slot="icon" .path=${mdiFileEdit}></ha-svg-icon>
-                </ha-dropdown-item>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiFileEdit}
+                  ></ha-svg-icon>
+                </ha-list-item>
               `
             : nothing}
 
-          <ha-dropdown-item value="toggle_yaml_mode">
+          <ha-list-item
+            graphic="icon"
+            @click=${this._mode === "gui"
+              ? this._switchYamlMode
+              : this._switchUiMode}
+          >
             ${this.hass.localize(
               `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
             )}
-            <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          </ha-list-item>
 
-          <wa-divider></wa-divider>
+          <li divider role="separator"></li>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="disable">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._toggle}
+          >
             ${stateObj?.state === "off"
               ? this.hass.localize("ui.panel.config.automation.editor.enable")
               : this.hass.localize("ui.panel.config.automation.editor.disable")}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${stateObj?.state === "off"
                 ? mdiPlayCircleOutline
                 : mdiStopCircleOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
-          <ha-dropdown-item
+          <ha-list-item
             .disabled=${!this.automationId}
-            .variant=${this.automationId ? "danger" : "default"}
-            value="delete"
+            class=${classMap({ warning: Boolean(this.automationId) })}
+            graphic="icon"
+            @click=${this._deleteConfirm}
           >
             ${this.hass.localize("ui.panel.config.automation.picker.delete")}
             <ha-svg-icon
               class=${classMap({ warning: Boolean(this.automationId) })}
-              slot="icon"
+              slot="graphic"
               .path=${mdiDelete}
             >
             </ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+          </ha-list-item>
+        </ha-button-menu>
         <div
           class=${this._mode === "yaml" ? "yaml-mode" : ""}
           @subscribe-automation-config=${this._subscribeAutomationConfig}
@@ -1213,63 +1249,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     this._undoRedoController.redo();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "undo":
-        this._undo();
-        break;
-      case "redo":
-        this._redo();
-        break;
-      case "info":
-        this._showInfo();
-        break;
-      case "settings":
-        this._showSettings();
-        break;
-      case "category":
-        this._editCategory();
-        break;
-      case "run":
-        this._runActions();
-        break;
-      case "rename":
-        this._promptAutomationAlias();
-        break;
-      case "change_mode":
-        this._promptAutomationMode();
-        break;
-      case "duplicate":
-        this._duplicate();
-        break;
-      case "take_control":
-        this._takeControl();
-        break;
-      case "toggle_yaml_mode":
-        if (this._mode === "gui") {
-          this._switchYamlMode();
-          break;
-        }
-        this._switchUiMode();
-        break;
-      case "disable":
-        this._toggle();
-        break;
-      case "delete":
-        this._deleteConfirm();
-        break;
-      case "trace":
-        this._showTrace();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1322,6 +1301,13 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
           margin-inline-end: 8px;
           margin-inline-start: initial;
         }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
+        ha-button-menu a {
+          text-decoration: none;
+          color: var(--primary-color);
+        }
         h1 {
           margin: 0;
         }

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiDotsVertical,
   mdiDownload,
@@ -16,13 +15,11 @@ import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-button";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/trace/ha-trace-blueprint-config";
 import "../../../components/trace/ha-trace-config";
 import "../../../components/trace/ha-trace-logbook";
@@ -107,7 +104,9 @@ export class HaAutomationTrace extends LitElement {
                 appearance="plain"
                 size="small"
                 class="trace-link"
-                @click=${this._navigateToAutomation}
+                href="/config/automation/edit/${encodeURIComponent(
+                  stateObj.attributes.id
+                )}"
                 slot="toolbar-icon"
               >
                 ${this.hass.localize(
@@ -115,50 +114,65 @@ export class HaAutomationTrace extends LitElement {
                 )}
               </ha-button>
             `
-          : nothing}
-        <ha-dropdown
-          slot="toolbar-icon"
-          @wa-select=${this._handleDropdownSelect}
-        >
+          : ""}
+        <ha-button-menu slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="show_info">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._showInfo}
+          >
             ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
           ${stateObj?.attributes.id && this.narrow
             ? html`
-                <ha-dropdown-item value="edit_automation">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.trace.edit_automation"
-                  )}
-                  <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
-                </ha-dropdown-item>
+                <a
+                  class="trace-link"
+                  href="/config/automation/edit/${encodeURIComponent(
+                    stateObj.attributes.id
+                  )}"
+                >
+                  <ha-list-item graphic="icon">
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.trace.edit_automation"
+                    )}
+                    <ha-svg-icon
+                      slot="graphic"
+                      .path=${mdiPencil}
+                    ></ha-svg-icon>
+                  </ha-list-item>
+                </a>
               `
-            : nothing}
+            : ""}
 
-          <wa-divider></wa-divider>
+          <li divider role="separator"></li>
 
-          <ha-dropdown-item value="refresh">
+          <ha-list-item graphic="icon" @click=${this._refreshTraces}>
             ${this.hass.localize("ui.panel.config.automation.trace.refresh")}
-            <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!this._trace} value="download_trace">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!this._trace}
+            @click=${this._downloadTrace}
+          >
             ${this.hass.localize(
               "ui.panel.config.automation.trace.download_trace"
             )}
-            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
 
         <div class="toolbar">
           ${this._traces && this._traces.length > 0
@@ -506,37 +520,6 @@ export class HaAutomationTrace extends LitElement {
     fireEvent(this, "hass-more-info", { entityId: this._entityId });
   }
 
-  private _navigateToAutomation() {
-    if (this._entityId && this.hass.states[this._entityId]) {
-      navigate(
-        `/config/automation/edit/${encodeURIComponent(this.hass.states[this._entityId].attributes.id)}`
-      );
-    }
-  }
-
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "show_info":
-        this._showInfo();
-        break;
-      case "refresh":
-        this._refreshTraces();
-        break;
-      case "download_trace":
-        this._downloadTrace();
-        break;
-      case "edit_automation":
-        this._navigateToAutomation();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -20,11 +20,10 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 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-icon-button";
+import "../../../../components/ha-md-button-menu";
+import "../../../../components/ha-md-menu-item";
 import "../../../../components/ha-svg-icon";
 import type {
   Condition,
@@ -37,7 +36,6 @@ import type { Action, Option } from "../../../../data/script";
 import { showPromptDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
-import { showToast } from "../../../../util/toast";
 import "../action/ha-automation-action";
 import type HaAutomationAction from "../action/ha-automation-action";
 import "../condition/ha-automation-condition";
@@ -48,6 +46,7 @@ import {
   overflowStyles,
   rowStyles,
 } from "../styles";
+import { showToast } from "../../../../util/toast";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
@@ -156,12 +155,15 @@ export default class HaAutomationOptionRow extends LitElement {
 
       ${this.option
         ? html`
-            <ha-dropdown
+            <ha-md-button-menu
+              quick
               slot="icons"
               @click=${preventDefaultStopPropagation}
+              @closed=${stopPropagation}
               @keydown=${stopPropagation}
-              @wa-select=${this._handleDropdownSelect}
-              placement="bottom-end"
+              positioning="fixed"
+              anchor-corner="end-end"
+              menu-corner="start-end"
             >
               <ha-icon-button
                 slot="trigger"
@@ -169,18 +171,24 @@ export default class HaAutomationOptionRow extends LitElement {
                 .path=${mdiDotsVertical}
               ></ha-icon-button>
 
-              <ha-dropdown-item value="rename" .disabled=${this.disabled}>
-                <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+              <ha-md-menu-item
+                @click=${this._renameOption}
+                .disabled=${this.disabled}
+              >
+                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
                 ${this._renderOverflowLabel(
                   this.hass.localize(
                     "ui.panel.config.automation.editor.triggers.rename"
                   )
                 )}
-              </ha-dropdown-item>
+              </ha-md-menu-item>
 
-              <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
+              <ha-md-menu-item
+                @click=${this._duplicateOption}
+                .disabled=${this.disabled}
+              >
                 <ha-svg-icon
-                  slot="icon"
+                  slot="start"
                   .path=${mdiPlusCircleMultipleOutline}
                 ></ha-svg-icon>
 
@@ -189,42 +197,45 @@ export default class HaAutomationOptionRow extends LitElement {
                     "ui.panel.config.automation.editor.actions.duplicate"
                   )
                 )}
-              </ha-dropdown-item>
+              </ha-md-menu-item>
 
               ${!this.optionsInSidebar
                 ? html`
-                    <ha-dropdown-item
-                      value="move_up"
+                    <ha-md-menu-item
+                      .clickAction=${this._moveUp}
                       .disabled=${this.disabled || !!this.first}
                     >
                       ${this.hass.localize(
                         "ui.panel.config.automation.editor.move_up"
                       )}
-                      <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
-                    ></ha-dropdown-item>
-                    <ha-dropdown-item
-                      value="move_down"
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${mdiArrowUp}
+                      ></ha-svg-icon
+                    ></ha-md-menu-item>
+                    <ha-md-menu-item
+                      .clickAction=${this._moveDown}
                       .disabled=${this.disabled || !!this.last}
                     >
                       ${this.hass.localize(
                         "ui.panel.config.automation.editor.move_down"
                       )}
                       <ha-svg-icon
-                        slot="icon"
+                        slot="start"
                         .path=${mdiArrowDown}
                       ></ha-svg-icon
-                    ></ha-dropdown-item>
+                    ></ha-md-menu-item>
                   `
                 : nothing}
 
-              <ha-dropdown-item
-                value="delete"
-                variant="danger"
+              <ha-md-menu-item
+                @click=${this._removeOption}
+                class="warning"
                 .disabled=${this.disabled}
               >
                 <ha-svg-icon
                   class="warning"
-                  slot="icon"
+                  slot="start"
                   .path=${mdiDelete}
                 ></ha-svg-icon>
                 ${this._renderOverflowLabel(
@@ -235,6 +246,7 @@ export default class HaAutomationOptionRow extends LitElement {
                     <span
                       >${isMac
                         ? html`<ha-svg-icon
+                            slot="start"
                             .path=${mdiAppleKeyboardCommand}
                           ></ha-svg-icon>`
                         : this.hass.localize(
@@ -249,8 +261,8 @@ export default class HaAutomationOptionRow extends LitElement {
                     >
                   </span>`
                 )}
-              </ha-dropdown-item>
-            </ha-dropdown>
+              </ha-md-menu-item>
+            </ha-md-button-menu>
           `
         : nothing}
       ${!this.optionsInSidebar ? this._renderContent() : nothing}
@@ -349,32 +361,6 @@ export default class HaAutomationOptionRow extends LitElement {
     fireEvent(this, "move-down");
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this._renameOption();
-        break;
-      case "delete":
-        this._removeOption();
-        break;
-      case "duplicate":
-        this._duplicateOption();
-        break;
-      case "move_up":
-        this._moveUp();
-        break;
-      case "move_down":
-        this._moveDown();
-        break;
-    }
-  }
-
   private _removeOption = () => {
     if (this.option) {
       fireEvent(this, "value-changed", {
@@ -527,6 +513,9 @@ export default class HaAutomationOptionRow extends LitElement {
       overflowStyles,
       indentStyle,
       css`
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
         h4 {
           color: var(--ha-color-text-secondary);
         }

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiAppleKeyboardCommand,
   mdiContentCopy,
@@ -17,8 +16,8 @@ import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-md-divider";
+import "../../../../components/ha-md-menu-item";
 import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import { domainToName } from "../../../../data/integration";
@@ -117,7 +116,6 @@ export default class HaAutomationSidebarAction extends LitElement {
       .yamlMode=${this.yamlMode}
       .warnings=${this._warnings}
       .narrow=${this.narrow}
-      @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
       <span slot="subtitle"
@@ -128,35 +126,38 @@ export default class HaAutomationSidebarAction extends LitElement {
           : ""}</span
       >
 
-      <ha-dropdown-item slot="menu-items" value="run">
-        <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
+        <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="rename"
+        .clickAction=${this.config.rename}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.rename"
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-
-      <wa-divider slot="menu-items"></wa-divider>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-divider
         slot="menu-items"
-        value="duplicate"
+        role="separator"
+        tabindex="-1"
+      ></ha-md-divider>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
         <ha-svg-icon
-          slot="icon"
+          slot="start"
           .path=${mdiPlusCircleMultipleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
@@ -165,9 +166,9 @@ export default class HaAutomationSidebarAction extends LitElement {
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item slot="menu-items" value="copy">
-        <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+      </ha-md-menu-item>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.copy"
@@ -177,6 +178,7 @@ export default class HaAutomationSidebarAction extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -188,13 +190,13 @@ export default class HaAutomationSidebarAction extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="cut"
+        .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.cut"
@@ -204,6 +206,7 @@ export default class HaAutomationSidebarAction extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -215,29 +218,32 @@ export default class HaAutomationSidebarAction extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="toggle_yaml_mode"
+        .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
-        <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-
-      <wa-divider slot="menu-items"></wa-divider>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-divider
         slot="menu-items"
-        value="disable"
+        role="separator"
+        tabindex="-1"
+      ></ha-md-divider>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.disable}
         .disabled=${this.disabled}
       >
         <ha-svg-icon
-          slot="icon"
+          slot="start"
           .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
@@ -246,14 +252,14 @@ export default class HaAutomationSidebarAction extends LitElement {
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="delete"
-        variant="danger"
+        .clickAction=${this.config.delete}
         .disabled=${this.disabled}
+        class="warning"
       >
-        <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
@@ -263,6 +269,7 @@ export default class HaAutomationSidebarAction extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -278,7 +285,7 @@ export default class HaAutomationSidebarAction extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
         : keyed(
@@ -334,41 +341,6 @@ export default class HaAutomationSidebarAction extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this.config.rename();
-        break;
-      case "run":
-        this.config.run();
-        break;
-      case "duplicate":
-        this.config.duplicate();
-        break;
-      case "copy":
-        this.config.copy();
-        break;
-      case "cut":
-        this.config.cut();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode();
-        break;
-      case "disable":
-        this.config.disable();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = [sidebarEditorStyles, overflowStyles];
 }
 

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

@@ -3,16 +3,16 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-dropdown";
 import "../../../../components/ha-icon-button";
-import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin";
+import "../../../../components/ha-md-button-menu";
+import "../../../../components/ha-md-divider";
 import { haStyleScrollbar } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
+import { ScrollableFadeMixin } from "../../../../mixins/scrollable-fade-mixin";
 
 export interface SidebarOverflowMenuEntry {
   clickAction: () => void;
@@ -36,10 +36,6 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
 
   @property({ attribute: false }) public warnings?: string[];
 
-  @property({ attribute: false }) public handleDropdownSelect!: (
-    ev: CustomEvent
-  ) => void;
-
   @property({ type: Boolean }) public narrow = false;
 
   @query(".card-content") private _contentElement!: HTMLDivElement;
@@ -67,10 +63,14 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
           <slot slot="title" name="title"></slot>
           <slot slot="subtitle" name="subtitle"></slot>
           <slot name="overflow-menu" slot="actionItems">
-            <ha-dropdown
-              @click=${preventDefaultStopPropagation}
+            <ha-md-button-menu
+              quick
+              @click=${this._openOverflowMenu}
               @keydown=${stopPropagation}
-              placement="bottom-end"
+              @closed=${stopPropagation}
+              .positioning=${this.narrow ? "absolute" : "fixed"}
+              anchor-corner="end-end"
+              menu-corner="start-end"
             >
               <ha-icon-button
                 slot="trigger"
@@ -78,7 +78,7 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
                 .path=${mdiDotsVertical}
               ></ha-icon-button>
               <slot name="menu-items"></slot>
-            </ha-dropdown>
+            </ha-md-button-menu>
           </slot>
         </ha-dialog-header>
         ${this.warnings
@@ -100,6 +100,11 @@ export default class HaAutomationSidebarCard extends ScrollableFadeMixin(
     fireEvent(this, "close-sidebar");
   }
 
+  private _openOverflowMenu(ev: MouseEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+  }
+
   static get styles() {
     return [
       ...super.styles,

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiAppleKeyboardCommand,
   mdiContentCopy,
@@ -17,11 +16,9 @@ import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import type {
-  ConditionSidebarConfig,
   LegacyCondition,
+  ConditionSidebarConfig,
 } from "../../../../data/automation";
 import { testCondition } from "../../../../data/automation";
 import {
@@ -120,7 +117,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
       .yamlMode=${this.yamlMode}
       .warnings=${this._warnings}
       .narrow=${this.narrow}
-      @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
       <span slot="subtitle"
@@ -128,38 +124,42 @@ export default class HaAutomationSidebarCondition extends LitElement {
           ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
           : ""}</span
       >
-      <ha-dropdown-item slot="menu-items" value="test">
-        <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this._testCondition}>
+        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.test"
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="rename"
+        .clickAction=${this.config.rename}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.rename"
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
 
-      <wa-divider slot="menu-items"></wa-divider>
-
-      <ha-dropdown-item
+      <ha-md-divider
         slot="menu-items"
-        value="duplicate"
+        role="separator"
+        tabindex="-1"
+      ></ha-md-divider>
+
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
         <ha-svg-icon
-          slot="icon"
+          slot="start"
           .path=${mdiPlusCircleMultipleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
@@ -168,10 +168,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
 
-      <ha-dropdown-item slot="menu-items" value="copy">
-        <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.copy"
@@ -181,6 +181,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -192,14 +193,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
 
-      <ha-dropdown-item
+      <ha-md-menu-item
         slot="menu-items"
-        value="cut"
+        .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.cut"
@@ -209,6 +210,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -220,29 +222,32 @@ export default class HaAutomationSidebarCondition extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="toggle_yaml_mode"
+        .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
-        <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-
-      <wa-divider slot="menu-items"></wa-divider>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-divider
         slot="menu-items"
-        value="disable"
+        role="separator"
+        tabindex="-1"
+      ></ha-md-divider>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.disable}
         .disabled=${this.disabled}
       >
         <ha-svg-icon
-          slot="icon"
+          slot="start"
           .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
@@ -251,14 +256,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="delete"
-        variant="danger"
+        .clickAction=${this.config.delete}
         .disabled=${this.disabled}
+        class="warning"
       >
-        <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
@@ -268,6 +273,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -283,7 +289,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
         : keyed(
@@ -413,41 +419,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this.config.rename();
-        break;
-      case "test":
-        this._testCondition();
-        break;
-      case "duplicate":
-        this.config.duplicate();
-        break;
-      case "copy":
-        this.config.copy();
-        break;
-      case "cut":
-        this.config.cut();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode();
-        break;
-      case "disable":
-        this.config.disable();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = [
     sidebarEditorStyles,
     overflowStyles,

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiAppleKeyboardCommand,
   mdiDelete,
@@ -7,9 +6,8 @@ import {
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
-
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-md-divider";
+import "../../../../components/ha-md-menu-item";
 import "../../../../components/ha-svg-icon";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
@@ -52,34 +50,33 @@ export default class HaAutomationSidebarOption extends LitElement {
       .hass=${this.hass}
       .isWide=${this.isWide}
       .narrow=${this.narrow}
-      @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
       ${this.config.defaultOption
         ? html`<span slot="overflow-menu"></span>`
         : html`
-            <ha-dropdown-item
+            <ha-md-menu-item
               slot="menu-items"
-              value="rename"
+              .clickAction=${this.config.rename}
               .disabled=${!!disabled}
             >
-              <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.triggers.rename"
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
-            </ha-dropdown-item>
+            </ha-md-menu-item>
 
-            <ha-dropdown-item
+            <ha-md-menu-item
               slot="menu-items"
-              value="duplicate"
+              @click=${this.config.duplicate}
               .disabled=${this.disabled}
             >
               <ha-svg-icon
-                slot="icon"
+                slot="start"
                 .path=${mdiPlusCircleMultipleOutline}
               ></ha-svg-icon>
               <div class="overflow-label">
@@ -88,15 +85,19 @@ export default class HaAutomationSidebarOption extends LitElement {
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
-            </ha-dropdown-item>
-            <wa-divider slot="menu-items"></wa-divider>
-            <ha-dropdown-item
+            </ha-md-menu-item>
+            <ha-md-divider
               slot="menu-items"
-              value="delete"
+              role="separator"
+              tabindex="-1"
+            ></ha-md-divider>
+            <ha-md-menu-item
+              slot="menu-items"
+              .clickAction=${this.config.delete}
               .disabled=${this.disabled}
-              variant="danger"
+              class="warning"
             >
-              <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.type.choose.remove_option"
@@ -122,33 +123,13 @@ export default class HaAutomationSidebarOption extends LitElement {
                     </span>`
                   : nothing}
               </div>
-            </ha-dropdown-item>
+            </ha-md-menu-item>
           `}
 
       <div class="description">${description}</div>
     </ha-automation-sidebar-card>`;
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this.config.rename();
-        break;
-      case "duplicate":
-        this.config.duplicate();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = [sidebarEditorStyles, overflowStyles];
 }
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -4,8 +4,6 @@ import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
@@ -64,30 +62,29 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
       .yamlMode=${this.yamlMode}
       .warnings=${this._warnings}
       .narrow=${this.narrow}
-      @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-      <ha-dropdown-item
+      <ha-md-menu-item
         slot="menu-items"
-        value="toggle_yaml_mode"
+        .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="delete"
+        .clickAction=${this.config.delete}
         .disabled=${this.disabled}
-        variant="danger"
+        class="warning"
       >
-        <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
@@ -97,6 +94,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -112,7 +110,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
       ${keyed(
         this.sidebarKey,
         html`<ha-script-field-selector-editor
@@ -162,23 +160,6 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle_yaml_mode":
-        this._toggleYamlMode();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = sidebarEditorStyles;
 }
 

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

@@ -3,8 +3,6 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
@@ -58,29 +56,28 @@ export default class HaAutomationSidebarScriptField extends LitElement {
       .yamlMode=${this.yamlMode}
       .warnings=${this._warnings}
       .narrow=${this.narrow}
-      @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
-      <ha-dropdown-item
+      <ha-md-menu-item
         slot="menu-items"
-        value="toggle_yaml_mode"
+        .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
-      </ha-dropdown-item>
-      <ha-dropdown-item
+      </ha-md-menu-item>
+      <ha-md-menu-item
         slot="menu-items"
-        value="delete"
+        .clickAction=${this.config.delete}
         .disabled=${this.disabled}
-        variant="danger"
+        class="warning"
       >
-        <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
@@ -90,6 +87,7 @@ export default class HaAutomationSidebarScriptField extends LitElement {
                 <span
                   >${isMac
                     ? html`<ha-svg-icon
+                        slot="start"
                         .path=${mdiAppleKeyboardCommand}
                       ></ha-svg-icon>`
                     : this.hass.localize(
@@ -105,7 +103,7 @@ export default class HaAutomationSidebarScriptField extends LitElement {
               </span>`
             : nothing}
         </div>
-      </ha-dropdown-item>
+      </ha-md-menu-item>
       ${keyed(
         this.sidebarKey,
         html`<ha-script-field-editor
@@ -156,23 +154,6 @@ export default class HaAutomationSidebarScriptField extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle_yaml_mode":
-        this._toggleYamlMode();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = [sidebarEditorStyles, overflowStyles];
 }
 

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiAppleKeyboardCommand,
   mdiContentCopy,
@@ -16,8 +15,6 @@ import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import type {
   LegacyTrigger,
   TriggerSidebarConfig,
@@ -102,7 +99,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
         .yamlMode=${this.yamlMode}
         .warnings=${this._warnings}
         .narrow=${this.narrow}
-        @wa-select=${this._handleDropdownSelect}
       >
         <span slot="title">${title}</span>
         <span slot="subtitle"
@@ -110,56 +106,60 @@ export default class HaAutomationSidebarTrigger extends LitElement {
             ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
             : ""}</span
         >
-        <ha-dropdown-item
+        <ha-md-menu-item
           slot="menu-items"
-          value="rename"
+          .clickAction=${this.config.rename}
           .disabled=${this.disabled || type === "list"}
         >
-          <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.rename"
             )}
             <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
           </div>
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
         ${!this.yamlMode &&
         !("id" in this.config.config) &&
         !this._requestShowId
-          ? html`<ha-dropdown-item
+          ? html`<ha-md-menu-item
               slot="menu-items"
-              value="show_id"
+              .clickAction=${this._showTriggerId}
               .disabled=${this.disabled || type === "list"}
             >
-              <ha-svg-icon slot="icon" .path=${mdiIdentifier}></ha-svg-icon>
+              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.triggers.edit_id"
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
-            </ha-dropdown-item>`
+            </ha-md-menu-item>`
           : nothing}
 
-        <wa-divider slot="menu-items"></wa-divider>
-
-        <ha-dropdown-item
+        <ha-md-divider
           slot="menu-items"
-          value="duplicate"
+          role="separator"
+          tabindex="-1"
+        ></ha-md-divider>
+
+        <ha-md-menu-item
+          slot="menu-items"
+          .clickAction=${this.config.duplicate}
           .disabled=${this.disabled}
         >
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.duplicate"
           )}
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${mdiPlusCircleMultipleOutline}
           ></ha-svg-icon>
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item slot="menu-items" value="copy">
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+        <ha-md-menu-item slot="menu-items" .clickAction=${this.config.copy}>
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.copy"
@@ -169,6 +169,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                   <span
                     >${isMac
                       ? html`<ha-svg-icon
+                          slot="start"
                           .path=${mdiAppleKeyboardCommand}
                         ></ha-svg-icon>`
                       : this.hass.localize(
@@ -180,14 +181,14 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                 </span>`
               : nothing}
           </div>
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item
+        <ha-md-menu-item
           slot="menu-items"
-          value="cut"
+          .clickAction=${this.config.cut}
           .disabled=${this.disabled}
         >
-          <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.cut"
@@ -197,6 +198,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                   <span
                     >${isMac
                       ? html`<ha-svg-icon
+                          slot="start"
                           .path=${mdiAppleKeyboardCommand}
                         ></ha-svg-icon>`
                       : this.hass.localize(
@@ -208,28 +210,32 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                 </span>`
               : nothing}
           </div>
-        </ha-dropdown-item>
-        <ha-dropdown-item
+        </ha-md-menu-item>
+        <ha-md-menu-item
           slot="menu-items"
-          value="toggle_yaml_mode"
+          .clickAction=${this._toggleYamlMode}
           .disabled=${!this.config.uiSupported || !!this._warnings}
         >
-          <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
               `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
             )}
             <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
           </div>
-        </ha-dropdown-item>
-        <wa-divider slot="menu-items"></wa-divider>
-        <ha-dropdown-item
+        </ha-md-menu-item>
+        <ha-md-divider
           slot="menu-items"
-          value="disable"
+          role="separator"
+          tabindex="-1"
+        ></ha-md-divider>
+        <ha-md-menu-item
+          slot="menu-items"
+          .clickAction=${this.config.disable}
           .disabled=${this.disabled || type === "list"}
         >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
           ></ha-svg-icon>
           <div class="overflow-label">
@@ -238,14 +244,14 @@ export default class HaAutomationSidebarTrigger extends LitElement {
             )}
             <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
           </div>
-        </ha-dropdown-item>
-        <ha-dropdown-item
+        </ha-md-menu-item>
+        <ha-md-menu-item
           slot="menu-items"
-          value="delete"
+          .clickAction=${this.config.delete}
           .disabled=${this.disabled}
-          variant="danger"
+          class="warning"
         >
-          <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
               "ui.panel.config.automation.editor.actions.delete"
@@ -255,6 +261,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                   <span
                     >${isMac
                       ? html`<ha-svg-icon
+                          slot="start"
                           .path=${mdiAppleKeyboardCommand}
                         ></ha-svg-icon>`
                       : this.hass.localize(
@@ -270,7 +277,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
                 </span>`
               : nothing}
           </div>
-        </ha-dropdown-item>
+        </ha-md-menu-item>
         ${keyed(
           this.sidebarKey,
           html`<ha-automation-trigger-editor
@@ -328,41 +335,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     this._requestShowId = true;
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this.config.rename();
-        break;
-      case "show_id":
-        this._showTriggerId();
-        break;
-      case "duplicate":
-        this.config.duplicate();
-        break;
-      case "copy":
-        this.config.copy();
-        break;
-      case "cut":
-        this.config.cut();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode();
-        break;
-      case "disable":
-        this.config.disable();
-        break;
-      case "delete":
-        this.config.delete();
-        break;
-    }
-  }
-
   static styles = [sidebarEditorStyles, overflowStyles];
 }
 

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
@@ -35,11 +34,11 @@ import "../../../../components/ha-alert";
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 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-icon-button";
+import "../../../../components/ha-md-button-menu";
+import "../../../../components/ha-md-divider";
+import "../../../../components/ha-md-menu-item";
 import "../../../../components/ha-svg-icon";
 import { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon";
 import type {
@@ -209,35 +208,41 @@ export default class HaAutomationTriggerRow extends LitElement {
 
       <slot name="icons" slot="icons"></slot>
 
-      <ha-dropdown
+      <ha-md-button-menu
+        quick
         slot="icons"
         @click=${preventDefaultStopPropagation}
         @keydown=${stopPropagation}
-        @wa-select=${this._handleDropdownSelect}
-        placement="bottom-end"
+        @closed=${stopPropagation}
+        positioning="fixed"
+        anchor-corner="end-end"
+        menu-corner="start-end"
       >
         <ha-icon-button
           slot="trigger"
           .label=${this.hass.localize("ui.common.menu")}
           .path=${mdiDotsVertical}
         ></ha-icon-button>
-        <ha-dropdown-item
-          value="rename"
+        <ha-md-menu-item
+          .clickAction=${this._renameTrigger}
           .disabled=${this.disabled || type === "list"}
         >
-          <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.rename"
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <wa-divider></wa-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
 
-        <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
+        <ha-md-menu-item
+          .clickAction=${this._duplicateTrigger}
+          .disabled=${this.disabled}
+        >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${mdiPlusCircleMultipleOutline}
           ></ha-svg-icon>
 
@@ -246,10 +251,13 @@ export default class HaAutomationTriggerRow extends LitElement {
               "ui.panel.config.automation.editor.actions.duplicate"
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="copy" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+        <ha-md-menu-item
+          .clickAction=${this._copyTrigger}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.copy"
@@ -258,6 +266,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -268,10 +277,13 @@ export default class HaAutomationTriggerRow extends LitElement {
               <span>C</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="cut" .disabled=${this.disabled}>
-          <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
+        <ha-md-menu-item
+          .clickAction=${this._cutTrigger}
+          .disabled=${this.disabled}
+        >
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               "ui.panel.config.automation.editor.triggers.cut"
@@ -280,6 +292,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -290,51 +303,51 @@ export default class HaAutomationTriggerRow extends LitElement {
               <span>X</span>
             </span>`
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
         ${!this.optionsInSidebar
           ? html`
-              <ha-dropdown-item
-                value="move_up"
+              <ha-md-menu-item
+                .clickAction=${this._moveUp}
                 .disabled=${this.disabled || !!this.first}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_up"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
-              ></ha-dropdown-item>
-              <ha-dropdown-item
-                value="move_down"
+                <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+              ></ha-md-menu-item>
+              <ha-md-menu-item
+                .clickAction=${this._moveDown}
                 .disabled=${this.disabled || !!this.last}
               >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.move_down"
                 )}
-                <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
-              ></ha-dropdown-item>
+                <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+              ></ha-md-menu-item>
             `
           : nothing}
 
-        <ha-dropdown-item
-          value="toggle_yaml_mode"
+        <ha-md-menu-item
+          .clickAction=${this._toggleYamlMode}
           .disabled=${!supported || !!this._warnings}
         >
-          <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
               `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
             )
           )}
-        </ha-dropdown-item>
+        </ha-md-menu-item>
 
-        <wa-divider></wa-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
 
-        <ha-dropdown-item
-          value="disable"
+        <ha-md-menu-item
+          .clickAction=${this._onDisable}
           .disabled=${this.disabled || type === "list"}
         >
           <ha-svg-icon
-            slot="icon"
+            slot="start"
             .path=${"enabled" in this.trigger && this.trigger.enabled === false
               ? mdiPlayCircleOutline
               : mdiStopCircleOutline}
@@ -345,15 +358,15 @@ export default class HaAutomationTriggerRow extends LitElement {
               `ui.panel.config.automation.editor.actions.${"enabled" in this.trigger && this.trigger.enabled === false ? "enable" : "disable"}`
             )
           )}
-        </ha-dropdown-item>
-        <ha-dropdown-item
-          value="delete"
-          variant="danger"
+        </ha-md-menu-item>
+        <ha-md-menu-item
+          .clickAction=${this._onDelete}
+          class="warning"
           .disabled=${this.disabled}
         >
           <ha-svg-icon
             class="warning"
-            slot="icon"
+            slot="start"
             .path=${mdiDelete}
           ></ha-svg-icon>
           ${this._renderOverflowLabel(
@@ -364,6 +377,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               <span
                 >${isMac
                   ? html`<ha-svg-icon
+                      slot="start"
                       .path=${mdiAppleKeyboardCommand}
                     ></ha-svg-icon>`
                   : this.hass.localize(
@@ -378,8 +392,8 @@ export default class HaAutomationTriggerRow extends LitElement {
               >
             </span>`
           )}
-        </ha-dropdown-item>
-      </ha-dropdown>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
       ${!this.optionsInSidebar
         ? html`${this._warnings
               ? html`<ha-automation-editor-warning
@@ -790,44 +804,6 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "rename":
-        this._renameTrigger();
-        break;
-      case "duplicate":
-        this._duplicateTrigger();
-        break;
-      case "copy":
-        this._copyTrigger();
-        break;
-      case "cut":
-        this._cutTrigger();
-        break;
-      case "move_up":
-        this._moveUp();
-        break;
-      case "move_down":
-        this._moveDown();
-        break;
-      case "toggle_yaml_mode":
-        this._toggleYamlMode(ev.target as HTMLElement);
-        break;
-      case "disable":
-        this._onDisable();
-        break;
-      case "delete":
-        this._onDelete();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       rowStyles,

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

@@ -24,7 +24,7 @@ import {
   type Trigger,
   type TriggerList,
 } from "../../../../data/automation";
-import { subscribeLabFeature } from "../../../../data/labs";
+import { subscribeLabFeatures } from "../../../../data/labs";
 import type { TriggerDescriptions } from "../../../../data/trigger";
 import { isTriggerList, subscribeTriggers } from "../../../../data/trigger";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
@@ -85,14 +85,14 @@ export default class HaAutomationTrigger extends SubscribeMixin(LitElement) {
 
   protected hassSubscribe() {
     return [
-      subscribeLabFeature(
-        this.hass!.connection,
-        "automation",
-        "new_triggers_conditions",
-        (enabled) => {
-          this._newTriggersAndConditions = enabled;
-        }
-      ),
+      subscribeLabFeatures(this.hass!.connection, (features) => {
+        this._newTriggersAndConditions =
+          features.find(
+            (feature) =>
+              feature.domain === "automation" &&
+              feature.preview_feature === "new_triggers_conditions"
+          )?.enabled ?? false;
+      }),
     ];
   }
 

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

@@ -1,18 +1,20 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckboxMarked,
+  mdiDotsVertical,
+  mdiLocationEnter,
+  mdiLocationExit,
+  mdiRefresh,
+} from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
-import "../../../components/ha-check-list-item";
-import "../../../components/ha-list-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
@@ -33,6 +35,9 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -73,35 +78,44 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-button-menu multi>
+          <ha-dropdown @wa-select=${this._handleOverflowAction}>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-check-list-item
-              left
-              @request-selected=${this._toggleSkipped}
-              .selected=${this._showSkipped}
-            >
+
+            <ha-dropdown-item value="show_skipped">
+              <ha-svg-icon
+                .path=${this._showSkipped
+                  ? mdiCheckboxMarked
+                  : mdiCheckboxBlankOutline}
+                slot="icon"
+              ></ha-svg-icon>
               ${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"}
                   >
+                    <ha-svg-icon
+                      .path=${this._supervisorInfo.channel === "stable"
+                        ? mdiLocationEnter
+                        : mdiLocationExit}
+                      slot="icon"
+                    ></ha-svg-icon>
                     ${this._supervisorInfo.channel === "stable"
                       ? this.hass.localize("ui.panel.config.updates.join_beta")
                       : 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 +147,19 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
-    if (ev.detail.source !== "property") {
-      return;
-    }
-
-    this._showSkipped = !this._showSkipped;
-  }
-
-  private async _toggleBeta(
-    ev: CustomEvent<RequestSelectedDetail>
+  private async _handleOverflowAction(
+    ev: CustomEvent<{ item: { value: string } }>
   ): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    if (this._supervisorInfo!.channel === "stable") {
-      showJoinBetaDialog(this, {
-        join: async () => this._setChannel("beta"),
-      });
-    } else {
-      this._setChannel("stable");
+    if (ev.detail.item.value === "toggle_beta") {
+      if (this._supervisorInfo!.channel === "stable") {
+        showJoinBetaDialog(this, {
+          join: async () => this._setChannel("beta"),
+        });
+      } else {
+        this._setChannel("stable");
+      }
+    } else if (ev.detail.item.value === "show_skipped") {
+      this._showSkipped = !this._showSkipped;
     }
   }
 

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
@@ -24,19 +23,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
-import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
+
+import { transform } from "../../../common/decorators/transform";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import { substituteBlueprint } from "../../../data/blueprint";
@@ -67,6 +65,7 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
@@ -74,11 +73,11 @@ import { showToast } from "../../../util/toast";
 import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode";
 import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save";
 import { showAutomationSaveDialog } from "../automation/automation-save-dialog/show-dialog-automation-save";
-import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
+import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 
 @customElement("ha-script-editor")
 export class HaScriptEditor extends SubscribeMixin(
@@ -242,10 +241,7 @@ export class HaScriptEditor extends SubscribeMixin(
               </ha-button>
             `
           : ""}
-        <ha-dropdown
-          slot="toolbar-icon"
-          @wa-select=${this._handleDropdownSelect}
-        >
+        <ha-button-menu slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -253,107 +249,133 @@ export class HaScriptEditor extends SubscribeMixin(
           ></ha-icon-button>
 
           ${this._mode === "gui" && this.narrow
-            ? html`<ha-dropdown-item
-                  value="undo"
+            ? html`<ha-list-item
+                  graphic="icon"
+                  @click=${this._undo}
                   .disabled=${!this._undoRedoController.canUndo}
                 >
                   ${this.hass.localize("ui.common.undo")}
-                  <ha-svg-icon slot="icon" .path=${mdiUndo}></ha-svg-icon>
-                </ha-dropdown-item>
-                <ha-dropdown-item
-                  value="redo"
+                  <ha-svg-icon slot="graphic" .path=${mdiUndo}></ha-svg-icon>
+                </ha-list-item>
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._redo}
                   .disabled=${!this._undoRedoController.canRedo}
                 >
                   ${this.hass.localize("ui.common.redo")}
-                  <ha-svg-icon slot="icon" .path=${mdiRedo}></ha-svg-icon>
-                </ha-dropdown-item>`
+                  <ha-svg-icon slot="graphic" .path=${mdiRedo}></ha-svg-icon>
+                </ha-list-item>`
             : nothing}
 
-          <ha-dropdown-item .disabled=${!this.scriptId} value="info">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!this.scriptId}
+            @click=${this._showInfo}
+          >
             ${this.hass.localize("ui.panel.config.script.editor.show_info")}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="settings">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._showSettings}
+          >
             ${this.hass.localize(
               "ui.panel.config.automation.picker.show_settings"
             )}
-            <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="category">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._editCategory}
+          >
             ${this.hass.localize(
               `ui.panel.config.scene.picker.${this._registryEntry?.categories?.script ? "edit_category" : "assign_category"}`
             )}
-            <ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!this.scriptId} value="run">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!this.scriptId}
+            @click=${this._runScript}
+          >
             ${this.hass.localize("ui.panel.config.script.picker.run_script")}
-            <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
+          </ha-list-item>
 
           ${this.scriptId && this.narrow
-            ? html`<ha-dropdown-item value="trace">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.show_trace"
-                )}
-                <ha-svg-icon
-                  slot="icon"
-                  .path=${mdiTransitConnection}
-                ></ha-svg-icon>
-              </ha-dropdown-item>`
+            ? html`
+                <a href="/config/script/trace/${this.scriptId}">
+                  <ha-list-item graphic="icon">
+                    ${this.hass.localize(
+                      "ui.panel.config.script.editor.show_trace"
+                    )}
+                    <ha-svg-icon
+                      slot="graphic"
+                      .path=${mdiTransitConnection}
+                    ></ha-svg-icon>
+                  </ha-list-item>
+                </a>
+              `
             : nothing}
           ${!useBlueprint && !("fields" in this._config)
             ? html`
-                <ha-dropdown-item
+                <ha-list-item
+                  graphic="icon"
                   .disabled=${this._readOnly || this._mode === "yaml"}
-                  value="add_fields"
+                  @click=${this._addFields}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.script.editor.field.add_fields"
                   )}
                   <ha-svg-icon
-                    slot="icon"
+                    slot="graphic"
                     .path=${mdiFormTextbox}
                   ></ha-svg-icon>
-                </ha-dropdown-item>
+                </ha-list-item>
               `
             : nothing}
 
-          <ha-dropdown-item
-            value="rename"
+          <ha-list-item
+            graphic="icon"
+            @click=${this._promptScriptAlias}
             .disabled=${!this.scriptId ||
             this._readOnly ||
             this._mode === "yaml"}
           >
             ${this.hass.localize("ui.panel.config.script.editor.rename")}
-            <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
+          </ha-list-item>
           ${!useBlueprint
             ? html`
-                <ha-dropdown-item
-                  value="change_mode"
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._promptScriptMode}
                   .disabled=${this._readOnly || this._mode === "yaml"}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.script.editor.change_mode"
                   )}
                   <ha-svg-icon
-                    slot="icon"
+                    slot="graphic"
                     .path=${mdiDebugStepOver}
                   ></ha-svg-icon>
-                </ha-dropdown-item>
+                </ha-list-item>
               `
             : nothing}
 
-          <ha-dropdown-item
-            .disabled=${!!this._blueprintConfig ||
+          <ha-list-item
+            .disabled=${this._blueprintConfig ||
             (!this._readOnly && !this.scriptId)}
-            value="duplicate"
+            graphic="icon"
+            @click=${this._duplicate}
           >
             ${this.hass.localize(
               this._readOnly
@@ -361,48 +383,58 @@ export class HaScriptEditor extends SubscribeMixin(
                 : "ui.panel.config.script.editor.duplicate"
             )}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiPlusCircleMultipleOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
           ${useBlueprint
             ? html`
-                <ha-dropdown-item
-                  value="take_control"
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._takeControl}
                   .disabled=${this._readOnly}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.script.editor.take_control"
                   )}
-                  <ha-svg-icon slot="icon" .path=${mdiFileEdit}></ha-svg-icon>
-                </ha-dropdown-item>
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiFileEdit}
+                  ></ha-svg-icon>
+                </ha-list-item>
               `
             : nothing}
 
-          <ha-dropdown-item value="toggle_yaml_mode">
+          <ha-list-item
+            graphic="icon"
+            @click=${this._mode === "gui"
+              ? this._switchYamlMode
+              : this._switchUiMode}
+          >
             ${this.hass.localize(
               `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
             )}
-            <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          </ha-list-item>
 
-          <wa-divider></wa-divider>
+          <li divider role="separator"></li>
 
-          <ha-dropdown-item
+          <ha-list-item
             .disabled=${this._readOnly || !this.scriptId}
-            value="delete"
-            .variant=${this.scriptId ? "danger" : "default"}
+            class=${classMap({ warning: Boolean(this.scriptId) })}
+            graphic="icon"
+            @click=${this._deleteConfirm}
           >
             ${this.hass.localize("ui.panel.config.script.picker.delete")}
             <ha-svg-icon
               class=${classMap({ warning: Boolean(this.scriptId) })}
-              slot="icon"
+              slot="graphic"
               .path=${mdiDelete}
             >
             </ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+          </ha-list-item>
+        </ha-button-menu>
         <div class=${this._mode === "yaml" ? "yaml-mode" : ""}>
           ${this._mode === "gui"
             ? html`
@@ -656,7 +688,9 @@ export class HaScriptEditor extends SubscribeMixin(
     this._dirty = true;
   }
 
-  private async _runScript() {
+  private async _runScript(ev: CustomEvent) {
+    ev.stopPropagation();
+
     if (hasScriptFields(this.hass, this._entityId!)) {
       showMoreInfoDialog(this, {
         entityId: this._entityId!,
@@ -1121,63 +1155,6 @@ export class HaScriptEditor extends SubscribeMixin(
     this._undoRedoController.redo();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "undo":
-        this._undo();
-        break;
-      case "redo":
-        this._redo();
-        break;
-      case "info":
-        this._showInfo();
-        break;
-      case "settings":
-        this._showSettings();
-        break;
-      case "category":
-        this._editCategory();
-        break;
-      case "run":
-        this._runScript();
-        break;
-      case "add_fields":
-        this._addFields();
-        break;
-      case "rename":
-        this._promptScriptAlias();
-        break;
-      case "change_mode":
-        this._promptScriptMode();
-        break;
-      case "duplicate":
-        this._duplicate();
-        break;
-      case "take_control":
-        this._takeControl();
-        break;
-      case "toggle_yaml_mode":
-        if (this._mode === "gui") {
-          this._switchYamlMode();
-          break;
-        }
-        this._switchUiMode();
-        break;
-      case "delete":
-        this._deleteConfirm();
-        break;
-      case "trace":
-        this._showTrace();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1268,6 +1245,9 @@ export class HaScriptEditor extends SubscribeMixin(
         ha-fab.dirty {
           bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
         }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
         .header {
           display: flex;
           margin: 16px 0;
@@ -1281,6 +1261,10 @@ export class HaScriptEditor extends SubscribeMixin(
         .header a {
           color: var(--secondary-text-color);
         }
+        ha-button-menu a {
+          text-decoration: none;
+          color: var(--primary-color);
+        }
         ha-tooltip ha-svg-icon {
           width: 12px;
         }

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

@@ -15,19 +15,18 @@ import type { LocalizeKeys } from "../../../common/translations/localize";
 import "../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../components/ha-automation-row";
 import "../../../components/ha-card";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
+import "../../../components/ha-md-button-menu";
+import "../../../components/ha-md-menu-item";
 import type { ScriptFieldSidebarConfig } from "../../../data/automation";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
-import { showToast } from "../../../util/toast";
 import { indentStyle, overflowStyles } from "../automation/styles";
 import "./ha-script-field-selector-editor";
 import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
+import { showToast } from "../../../util/toast";
 
 @customElement("ha-script-field-row")
 export default class HaScriptFieldRow extends LitElement {
@@ -80,33 +79,36 @@ export default class HaScriptFieldRow extends LitElement {
           .highlight=${this.highlight}
           @delete-row=${this._onDelete}
         >
-          <ha-dropdown
+          <ha-md-button-menu
+            quick
             slot="icons"
             @click=${preventDefaultStopPropagation}
             @keydown=${stopPropagation}
-            @wa-select=${this._handleDropdownSelect}
-            placement="bottom-end"
+            @closed=${stopPropagation}
+            positioning="fixed"
+            anchor-corner="end-end"
+            menu-corner="start-end"
           >
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-dropdown-item value="toggle_yaml_mode">
-              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
+            <ha-md-menu-item .clickAction=${this._toggleYamlMode}>
+              <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
                   `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
-            </ha-dropdown-item>
-            <ha-dropdown-item
-              value="delete"
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._onDelete}
               .disabled=${this.disabled}
-              variant="danger"
+              class="warning"
             >
-              <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.delete"
@@ -116,6 +118,7 @@ export default class HaScriptFieldRow extends LitElement {
                       <span
                         >${isMac
                           ? html`<ha-svg-icon
+                              slot="start"
                               .path=${mdiAppleKeyboardCommand}
                             ></ha-svg-icon>`
                           : this.hass.localize(
@@ -131,8 +134,8 @@ export default class HaScriptFieldRow extends LitElement {
                     </span>`
                   : nothing}
               </div>
-            </ha-dropdown-item>
-          </ha-dropdown>
+            </ha-md-menu-item>
+          </ha-md-button-menu>
 
           <h3 slot="header">${this.key}</h3>
 
@@ -167,21 +170,27 @@ export default class HaScriptFieldRow extends LitElement {
                       "ui.panel.config.script.editor.field.selector"
                     )}
                   </h3>
-                  <ha-dropdown
+                  <ha-md-button-menu
+                    quick
                     slot="icons"
                     @click=${preventDefaultStopPropagation}
                     @keydown=${stopPropagation}
-                    @wa-select=${this._handleDropdownSelect}
-                    placement="bottom-end"
+                    @closed=${stopPropagation}
+                    positioning="fixed"
+                    anchor-corner="end-end"
+                    menu-corner="start-end"
                   >
                     <ha-icon-button
                       slot="trigger"
                       .label=${this.hass.localize("ui.common.menu")}
                       .path=${mdiDotsVertical}
                     ></ha-icon-button>
-                    <ha-dropdown-item value="toggle_yaml_mode" selector-row>
+                    <ha-md-menu-item
+                      .clickAction=${this._toggleYamlMode}
+                      selector-row
+                    >
                       <ha-svg-icon
-                        slot="icon"
+                        slot="start"
                         .path=${mdiPlaylistEdit}
                       ></ha-svg-icon>
                       <div class="overflow-label">
@@ -192,13 +201,16 @@ export default class HaScriptFieldRow extends LitElement {
                           class="shortcut-placeholder ${isMac ? "mac" : ""}"
                         ></span>
                       </div>
-                    </ha-dropdown-item>
-                    <ha-dropdown-item
-                      value="delete"
+                    </ha-md-menu-item>
+                    <ha-md-menu-item
+                      .clickAction=${this._onDelete}
                       .disabled=${this.disabled}
-                      variant="danger"
+                      class="warning"
                     >
-                      <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${mdiDelete}
+                      ></ha-svg-icon>
                       <div class="overflow-label">
                         ${this.hass.localize(
                           "ui.panel.config.automation.editor.actions.delete"
@@ -208,6 +220,7 @@ export default class HaScriptFieldRow extends LitElement {
                               <span
                                 >${isMac
                                   ? html`<ha-svg-icon
+                                      slot="start"
                                       .path=${mdiAppleKeyboardCommand}
                                     ></ha-svg-icon>`
                                   : this.hass.localize(
@@ -223,8 +236,8 @@ export default class HaScriptFieldRow extends LitElement {
                             </span>`
                           : nothing}
                       </div>
-                    </ha-dropdown-item>
-                  </ha-dropdown>
+                    </ha-md-menu-item>
+                  </ha-md-button-menu>
                 </ha-automation-row>
               </ha-card>
               ${typeof this.field.selector === "object" &&
@@ -407,23 +420,6 @@ export default class HaScriptFieldRow extends LitElement {
     this._selectorRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle_yaml_mode":
-        this._toggleYamlMode(ev.target as HTMLElement);
-        break;
-      case "delete":
-        this._onDelete();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -481,6 +477,9 @@ export default class HaScriptFieldRow extends LitElement {
         .selected_menu_item {
           color: var(--primary-color);
         }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
         .selector-row {
           padding-top: 12px;
           padding-bottom: 16px;

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiDotsVertical,
   mdiDownload,
@@ -9,19 +8,17 @@ import {
   mdiRefresh,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-button";
-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-list-item";
 import "../../../components/trace/ha-trace-blueprint-config";
 import "../../../components/trace/ha-trace-config";
 import "../../../components/trace/ha-trace-logbook";
@@ -107,7 +104,7 @@ export class HaScriptTrace extends LitElement {
           ? html`
               <ha-button
                 class="trace-link"
-                @click=${this._navigateToScript}
+                href="/config/script/edit/${this.scriptId}"
                 slot="toolbar-icon"
                 appearance="plain"
               >
@@ -116,49 +113,64 @@ export class HaScriptTrace extends LitElement {
                 )}
               </ha-button>
             `
-          : nothing}
+          : ""}
 
-        <ha-dropdown
-          slot="toolbar-icon"
-          @wa-select=${this._handleDropdownSelect}
-        >
+        <ha-button-menu slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <ha-dropdown-item .disabled=${!stateObj} value="show_info">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!stateObj}
+            @click=${this._showInfo}
+          >
             ${this.hass.localize("ui.panel.config.script.editor.show_info")}
             <ha-svg-icon
-              slot="icon"
+              slot="graphic"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
-          </ha-dropdown-item>
+          </ha-list-item>
 
           ${this.narrow && this.scriptId
-            ? html`<ha-dropdown-item value="edit_script">
-                ${this.hass.localize(
-                  "ui.panel.config.script.trace.edit_script"
-                )}
-                <ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
-              </ha-dropdown-item> `
-            : nothing}
+            ? html`
+                <a
+                  class="trace-link"
+                  href="/config/script/edit/${this.scriptId}"
+                >
+                  <ha-list-item graphic="icon">
+                    ${this.hass.localize(
+                      "ui.panel.config.script.trace.edit_script"
+                    )}
+                    <ha-svg-icon
+                      slot="graphic"
+                      .path=${mdiPencil}
+                    ></ha-svg-icon>
+                  </ha-list-item>
+                </a>
+              `
+            : ""}
 
-          <wa-divider></wa-divider>
+          <li divider role="separator"></li>
 
-          <ha-dropdown-item value="refresh">
+          <ha-list-item graphic="icon" @click=${this._refreshTraces}>
             ${this.hass.localize("ui.panel.config.automation.trace.refresh")}
-            <ha-svg-icon slot="icon" .path=${mdiRefresh}></ha-svg-icon>
-          </ha-dropdown-item>
+            <ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon>
+          </ha-list-item>
 
-          <ha-dropdown-item .disabled=${!this._trace} value="download_trace">
+          <ha-list-item
+            graphic="icon"
+            .disabled=${!this._trace}
+            @click=${this._downloadTrace}
+          >
             ${this.hass.localize(
               "ui.panel.config.automation.trace.download_trace"
             )}
-            <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
 
         <div class="toolbar">
           ${this._traces && this._traces.length > 0
@@ -518,35 +530,6 @@ export class HaScriptTrace extends LitElement {
     fireEvent(this, "hass-more-info", { entityId: this._entityId });
   }
 
-  private _navigateToScript() {
-    if (this.scriptId) {
-      navigate(`/config/script/edit/${this.scriptId}`);
-    }
-  }
-
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail?.item?.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "show_info":
-        this._showInfo();
-        break;
-      case "refresh":
-        this._refreshTraces();
-        break;
-      case "download_trace":
-        this._downloadTrace();
-        break;
-      case "edit_script":
-        this._navigateToScript();
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -215,62 +215,57 @@ export class AssistPipelineDebug extends LitElement {
             ? html`
                 <div class="messages">
                   ${messages.map((content) =>
-                    content.role === "system"
-                      ? content.content
-                        ? html`
-                            <ha-expansion-panel
-                              class="content-expansion ${content.role}"
-                            >
-                              <div slot="header">System</div>
-                              <pre>${content.content}</pre>
-                            </ha-expansion-panel>
-                          `
-                        : nothing
-                      : content.role === "tool_result"
-                        ? html`
-                            <ha-expansion-panel
-                              class="content-expansion ${content.role}"
-                            >
-                              <div slot="header">
-                                Result for ${content.tool_name}
-                              </div>
-                              <ha-yaml-editor
-                                read-only
-                                auto-update
-                                .value=${content}
-                              ></ha-yaml-editor>
-                            </ha-expansion-panel>
-                          `
-                        : html`
-                            ${content.content
-                              ? html`
-                                  <div class=${`message ${content.role}`}>
-                                    ${content.content}
-                                  </div>
-                                `
-                              : nothing}
-                            ${content.role === "assistant" &&
-                            content.tool_calls?.length
-                              ? html`
-                                  <ha-expansion-panel
-                                    class="content-expansion assistant"
-                                  >
-                                    <span slot="header">
-                                      Call
-                                      ${content.tool_calls.length === 1
-                                        ? content.tool_calls[0].tool_name
-                                        : `${content.tool_calls.length} tools`}
-                                    </span>
+                    content.role === "system" || content.role === "tool_result"
+                      ? html`
+                          <ha-expansion-panel
+                            class="content-expansion ${content.role}"
+                          >
+                            <div slot="header">
+                              ${content.role === "system"
+                                ? "System"
+                                : `Result for ${content.tool_name}`}
+                            </div>
+                            ${content.role === "system"
+                              ? html`<pre>${content.content}</pre>`
+                              : html`
+                                  <ha-yaml-editor
+                                    read-only
+                                    auto-update
+                                    .value=${content}
+                                  ></ha-yaml-editor>
+                                `}
+                          </ha-expansion-panel>
+                        `
+                      : html`
+                          ${content.content
+                            ? html`
+                                <div class=${`message ${content.role}`}>
+                                  ${content.content}
+                                </div>
+                              `
+                            : nothing}
+                          ${content.role === "assistant" &&
+                          content.tool_calls?.length
+                            ? html`
+                                <ha-expansion-panel
+                                  class="content-expansion assistant"
+                                >
+                                  <span slot="header">
+                                    Call
+                                    ${content.tool_calls.length === 1
+                                      ? content.tool_calls[0].tool_name
+                                      : `${content.tool_calls.length} tools`}
+                                  </span>
 
-                                    <ha-yaml-editor
-                                      read-only
-                                      auto-update
-                                      .value=${content.tool_calls}
-                                    ></ha-yaml-editor>
-                                  </ha-expansion-panel>
-                                `
-                              : nothing}
-                          `
+                                  <ha-yaml-editor
+                                    read-only
+                                    auto-update
+                                    .value=${content.tool_calls}
+                                  ></ha-yaml-editor>
+                                </ha-expansion-panel>
+                              `
+                            : nothing}
+                        `
                   )}
                 </div>
                 <div style="clear:both"></div>

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

@@ -56,19 +56,6 @@ export function getSuggestedPeriod(
   return dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour";
 }
 
-function createYAxisLabelFormatter(locale: FrontendLocaleData) {
-  let previousValue: number | undefined;
-
-  return (value: number): string => {
-    const maximumFractionDigits = Math.max(
-      1,
-      -Math.floor(Math.log10(Math.abs(value - (previousValue ?? value) || 1)))
-    );
-    previousValue = value;
-    return formatNumber(value, locale, { maximumFractionDigits });
-  };
-}
-
 export function getCommonOptions(
   start: Date,
   end: Date,
@@ -99,7 +86,7 @@ export function getCommonOptions(
         align: "left",
       },
       axisLabel: {
-        formatter: createYAxisLabelFormatter(locale),
+        formatter: (value: number) => formatNumber(Math.abs(value), locale),
       },
       splitLine: {
         show: true,

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -23,10 +23,8 @@ import {
   subscribeForecast,
   weatherAttrIcons,
   weatherSVGStyles,
-  WEATHER_TEMPERATURE_ATTRIBUTES,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import { round } from "../../../common/number/round";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
@@ -268,20 +266,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       this._config.name
     );
 
-    const temperatureFractionDigits = this._config.round_temperature
-      ? 0
-      : undefined;
-
-    const isSecondaryInfoAttributeTemperature =
-      this._config?.secondary_info_attribute &&
-      WEATHER_TEMPERATURE_ATTRIBUTES.has(this._config.secondary_info_attribute);
-
-    const isSecondaryInfoNumber =
-      this._config.secondary_info_attribute &&
-      !Number.isNaN(
-        +stateObj.attributes[this._config.secondary_info_attribute]
-      );
-
     return html`
       <ha-card
         class=${classMap({
@@ -328,11 +312,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                         ? html`
                             ${formatNumber(
                               stateObj.attributes.temperature,
-                              this.hass.locale,
-                              {
-                                maximumFractionDigits:
-                                  temperatureFractionDigits,
-                              }
+                              this.hass.locale
                             )}&nbsp;<span
                               >${getWeatherUnit(
                                 this.hass.config,
@@ -370,26 +350,14 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                               : html`
                                   ${this.hass.formatEntityAttributeValue(
                                     stateObj,
-                                    this._config.secondary_info_attribute,
-                                    temperatureFractionDigits === 0 &&
-                                      isSecondaryInfoNumber &&
-                                      isSecondaryInfoAttributeTemperature
-                                      ? round(
-                                          stateObj.attributes[
-                                            this._config
-                                              .secondary_info_attribute
-                                          ],
-                                          temperatureFractionDigits
-                                        )
-                                      : undefined
+                                    this._config.secondary_info_attribute
                                   )}
                                 `}
                           `
                         : getSecondaryWeatherAttribute(
                             this.hass,
                             stateObj,
-                            forecast!,
-                            temperatureFractionDigits
+                            forecast!
                           )}
                     </div>
                   </div>
@@ -457,11 +425,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                             ${this._showValue(item.temperature)
                               ? html`${formatNumber(
                                   item.temperature,
-                                  this.hass!.locale,
-                                  {
-                                    maximumFractionDigits:
-                                      temperatureFractionDigits,
-                                  }
+                                  this.hass!.locale
                                 )}°`
                               : "—"}
                           </div>
@@ -469,11 +433,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                             ${this._showValue(item.templow)
                               ? html`${formatNumber(
                                   item.templow!,
-                                  this.hass!.locale,
-                                  {
-                                    maximumFractionDigits:
-                                      temperatureFractionDigits,
-                                  }
+                                  this.hass!.locale
                                 )}°`
                               : hourly
                                 ? ""

src/panels/lovelace/cards/types.ts

@@ -597,7 +597,6 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   forecast_type?: ForecastType;
   forecast_slots?: number;
   secondary_info_attribute?: keyof TranslationDict["ui"]["card"]["weather"]["attributes"];
-  round_temperature?: boolean;
   theme?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;

src/panels/lovelace/common/entity/compute-lovelace-entity-name.ts

@@ -21,8 +21,8 @@ export const computeLovelaceEntityName = (
   if (!config) {
     return stateObj ? computeStateName(stateObj) : "";
   }
-  if (typeof config !== "object") {
-    return String(config);
+  if (typeof config === "string") {
+    return config;
   }
   if (stateObj) {
     return hass.formatEntityName(stateObj, config);

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -5,9 +5,10 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain"
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { splitByGroups } from "../../../common/entity/split_by_groups";
 import { stripPrefixFromEntityName } from "../../../common/entity/strip_prefix_from_entity_name";
-import { orderCompare, stringCompare } from "../../../common/string/compare";
+import { stringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import type { AreasDisplayValue } from "../../../components/ha-areas-display-editor";
+import { areaCompare } from "../../../data/area_registry";
 import type {
   EnergyPreferences,
   GridSourceTypeEnergyPreference,
@@ -571,21 +572,13 @@ export const generateDefaultViewConfig = (
 
   const areaCards: LovelaceCardConfig[] = [];
 
-  const areaIds = Object.keys(areaEntries);
+  const sortedAreas = Object.keys(splittedByAreaDevice.areasWithEntities).sort(
+    areaCompare(areaEntries, areasPrefs?.order)
+  );
 
-  if (areasPrefs?.order) {
-    const areaOrder = areasPrefs.order;
-    areaIds.sort(orderCompare(areaOrder));
-  }
-
-  for (const areaId of areaIds) {
-    // Skip areas with no entities
-    if (!(areaId in splittedByAreaDevice.areasWithEntities)) {
-      continue;
-    }
+  for (const areaId of sortedAreas) {
     const areaEntities = splittedByAreaDevice.areasWithEntities[areaId];
     const area = areaEntries[areaId];
-
     areaCards.push(
       ...computeCards(
         hass,

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -37,7 +37,6 @@ const cardConfigStruct = assign(
     forecast_type: optional(string()),
     forecast_slots: optional(number()),
     secondary_info_attribute: optional(string()),
-    round_temperature: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
     double_tap_action: optional(actionConfigStruct),
@@ -157,10 +156,6 @@ export class HuiWeatherForecastCardEditor
           },
           context: { entity: "entity" },
         },
-        {
-          name: "round_temperature",
-          selector: { boolean: {} },
-        },
         {
           name: "",
           type: "grid",

src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts

@@ -5,6 +5,7 @@ import { generateEntityFilter } from "../../../../../common/entity/entity_filter
 import { stripPrefixFromEntityName } from "../../../../../common/entity/strip_prefix_from_entity_name";
 import { orderCompare } from "../../../../../common/string/compare";
 import type { AreaRegistryEntry } from "../../../../../data/area_registry";
+import { areaCompare } from "../../../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
 import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../../types";
@@ -286,11 +287,7 @@ export const getAreas = (
     ? areas.filter((area) => !hiddenAreas!.includes(area.area_id))
     : areas.concat();
 
-  if (!areasOrder) {
-    return filteredAreas;
-  }
-
-  const compare = orderCompare(areasOrder);
+  const compare = areaCompare(entries, areasOrder);
 
   const sortedAreas = filteredAreas.sort((areaA, areaB) =>
     compare(areaA.area_id, areaB.area_id)

src/translations/en.json

@@ -304,7 +304,6 @@
       },
       "weather": {
         "attributes": {
-          "dew_point": "Dew point",
           "air_pressure": "Air pressure",
           "humidity": "Humidity",
           "temperature": "Temperature",
@@ -831,6 +830,7 @@
         "add_new": "Add new area…",
         "no_areas": "No areas available",
         "no_match": "No areas found for {term}",
+        "unassigned_areas": "Unassigned areas",
         "failed_create_area": "Failed to create area."
       },
       "floor-picker": {
@@ -2463,7 +2463,7 @@
             "introduction2": "To place devices in an area, use the link below to navigate to the integrations page and then click on a configured integration to get to the device cards.",
             "integrations_page": "Integrations page",
             "no_areas": "Looks like you have no areas yet!",
-            "other_areas": "Other areas",
+            "unassigned_areas": "Unassigned areas",
             "create_area": "Create area",
             "create_floor": "Create floor",
             "floor": {
@@ -2479,7 +2479,7 @@
           },
           "dialog": {
             "reorder_title": "Reorder floors and areas",
-            "other_areas": "Other areas",
+            "unassigned_areas": "Unassigned areas",
             "reorder_failed": "Failed to save order",
             "empty_floor": "No areas on this floor",
             "empty_unassigned": "All your areas are assigned to floors"
@@ -8026,7 +8026,6 @@
               "suggested_cards": "Suggested cards",
               "other_cards": "Other cards",
               "custom_cards": "Custom cards",
-              "round_temperature": "Round temperature",
               "features": "Features",
               "actions": "Actions",
               "content": "Content"

yarn.lock

@@ -1940,9 +1940,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-ha.1":
-  version: 3.0.0-ha.1
-  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.1"
+"@home-assistant/webawesome@npm:3.0.0-ha.0":
+  version: 3.0.0-ha.0
+  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.0"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1953,7 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/281f16c2c6c28d95a381de6fca05948a9c67d8184f20844d64ce33dc2caf9e6761d2cf8337b97e7487a71be011ab04f2a021b20b823a20e3c049cc68205de86a
+  checksum: 10/2034d498d5b26bb0573ebc2c9aadd144604bb48c04becbae0c67b16857d8e5d6562626e795974362c3fc41e9b593a9005595d8b5ff434b1569b2d724af13043b
   languageName: node
   linkType: hard
 
@@ -9213,7 +9213,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-ha.1"
+    "@home-assistant/webawesome": "npm:3.0.0-ha.0"
     "@lezer/highlight": "npm:1.2.3"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -9343,7 +9343,7 @@ __metadata:
     node-vibrant: "npm:4.0.3"
     object-hash: "npm:3.0.0"
     pinst: "npm:3.0.0"
-    prettier: "npm:3.7.3"
+    prettier: "npm:3.7.2"
     punycode: "npm:2.3.1"
     qr-scanner: "npm:1.4.2"
     qrcode: "npm:1.5.4"
@@ -12131,12 +12131,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:3.7.3":
-  version: 3.7.3
-  resolution: "prettier@npm:3.7.3"
+"prettier@npm:3.7.2":
+  version: 3.7.2
+  resolution: "prettier@npm:3.7.2"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10/f83ca7e3c69717c1e2f7a95af2d9700eea520c235dfc0f94727a550a4bf0f14eda956a9b2682991b4f1da4605247b3cd3c5547bf2ada4a3ca718bc9ca230040a
+  checksum: 10/2d51d3318f2eb80d3339dc884a4425ce7c326722c05be13bc7712403c2b0ddf8b07696776210cb8015e2ede6a737704423749218b2eda27647c92693eda01672
   languageName: node
   linkType: hard