20251203.1 (#28383)

When users configure energy with only device consumption (no
grid/solar/battery/gas/water sources), the dashboard would redirect
to /config/energy instead of displaying. This occurred because
_generateLovelaceConfig() returned an empty views array.

The fix adds hasDeviceConsumption check and includes ENERGY_VIEW
when device consumption is configured, since energy-view-strategy
already supports device consumption cards.

.github/workflows/codeql-analysis.yml

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

.github/workflows/nightly.yaml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@c45aaa919ef85620af54242a241ac17a8fa35983 # v3.2.1
+        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@83679a892e2d95755f2dac6acb0bfd1e9ac5d548 # v6.1.0
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         with:
           files: |
             dist/*.whl
@@ -75,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.11.0
+        uses: home-assistant/wheels@2025.10.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

cast/src/receiver/layout/hc-main.ts

@@ -305,8 +305,9 @@ export class HcMain extends HassElement {
         await llColl.refresh();
         this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
           if (isStrategyDashboard(rawConfig)) {
-            const { generateLovelaceDashboardStrategy } =
-              await import("../../../../src/panels/lovelace/strategies/get-strategy");
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
             const config = await generateLovelaceDashboardStrategy(
               rawConfig,
               this.hass!
@@ -346,8 +347,9 @@ export class HcMain extends HassElement {
   }
 
   private async _generateDefaultLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } =
-      await import("../../../../src/panels/lovelace/strategies/get-strategy");
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
+    );
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
     );

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -88,8 +88,8 @@ class HassioRegistriesDialog extends LitElement {
                 <ha-button
                   ?disabled=${Boolean(
                     !this._input.registry ||
-                    !this._input.username ||
-                    !this._input.password
+                      !this._input.username ||
+                      !this._input.password
                   )}
                   @click=${this._addNewRegistry}
                   appearance="filled"

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",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.6",
-    "@vaadin/vaadin-themable-mixin": "24.9.6",
+    "@vaadin/combo-box": "24.9.5",
+    "@vaadin/vaadin-themable-mixin": "24.9.5",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -152,13 +152,13 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.7",
+    "@bundle-stats/plugin-webpack-filter": "4.21.6",
     "@lokalise/node-api": "15.4.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.12",
-    "@rspack/core": "1.6.5",
+    "@rsdoctor/rspack-plugin": "1.3.11",
+    "@rspack/core": "1.6.4",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -178,7 +178,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.14",
+    "@vitest/coverage-v8": "4.0.13",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -194,7 +194,7 @@
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
-    "glob": "13.0.0",
+    "glob": "12.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -209,7 +209,7 @@
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.7.3",
+    "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.2.0",
     "serve": "14.2.5",
     "sinon": "21.0.0",
@@ -217,9 +217,9 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.48.0",
+    "typescript-eslint": "8.47.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.14",
+    "vitest": "4.0.13",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20251203.0"
+version      = "20251203.1"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/translations/entity-state.ts

@@ -45,8 +45,9 @@ export const computeFormatFunctions = async (
   formatEntityAttributeName: FormatEntityAttributeNameFunc;
   formatEntityName: FormatEntityNameFunc;
 }> => {
-  const { computeStateDisplay } =
-    await import("../entity/compute_state_display");
+  const { computeStateDisplay } = await import(
+    "../entity/compute_state_display"
+  );
   const { computeAttributeValueDisplay, computeAttributeNameDisplay } =
     await import("../entity/compute_attribute_display");
 

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

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
@@ -27,7 +27,6 @@ const safeParseFloat = (value) => {
   return isFinite(parsed) ? parsed : null;
 };
 
-@customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -796,6 +795,7 @@ export class StateHistoryChartLine extends LitElement {
     return Math.abs(value) < 1 ? value : roundingFn(value);
   }
 }
+customElements.define("state-history-chart-line", StateHistoryChartLine);
 
 declare global {
   interface HTMLElementTagNameMap {

src/components/data-table/ha-data-table.ts

@@ -838,10 +838,10 @@ export class HaDataTable extends LitElement {
     } else if (this.sortDirection === "asc") {
       this.sortDirection = "desc";
     } else {
-      this.sortDirection = "asc";
+      this.sortDirection = null;
     }
 
-    this.sortColumn = columnId;
+    this.sortColumn = this.sortDirection === null ? undefined : columnId;
 
     fireEvent(this, "sorting-changed", {
       column: columnId,

src/components/entity/state-badge.ts

@@ -2,7 +2,7 @@ import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -17,7 +17,6 @@ import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import type { HomeAssistant } from "../../types";
 import "../ha-state-icon";
 
-@customElement("state-badge")
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
 
@@ -266,3 +265,5 @@ declare global {
     "state-badge": StateBadge;
   }
 }
+
+customElements.define("state-badge", StateBadge);

src/components/ha-picker-field.ts

@@ -103,8 +103,8 @@ export class HaPickerField extends LitElement {
           --md-list-item-two-line-container-height: 56px;
           --md-list-item-top-space: 0px;
           --md-list-item-bottom-space: 0px;
-          --md-list-item-leading-space: var(--ha-space-4);
-          --md-list-item-trailing-space: var(--ha-space-2);
+          --md-list-item-leading-space: 8px;
+          --md-list-item-trailing-space: 8px;
           --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;

src/components/ha-service-control.ts

@@ -450,7 +450,7 @@ export class HaServiceControl extends LitElement {
 
     const hasOptional = Boolean(
       !shouldRenderServiceDataYaml &&
-      serviceData?.flatFields.some((field) => showOptionalToggle(field))
+        serviceData?.flatFields.some((field) => showOptionalToggle(field))
     );
 
     const targetEntities = this._getTargetedEntities(

src/components/ha-settings-row.ts

@@ -86,7 +86,7 @@ export class HaSettingsRow extends LitElement {
       display: contents;
     }
     :host(:not([narrow])) .content {
-      display: var(--settings-row-content-display, contents);
+      display: var(--settings-row-content-display, flex);
       justify-content: flex-end;
       flex: 1;
       min-width: 0;
@@ -109,7 +109,6 @@ export class HaSettingsRow extends LitElement {
     }
     .prefix-wrap {
       display: var(--settings-row-prefix-display);
-      flex-grow: 1;
     }
     :host([narrow]) .prefix-wrap {
       display: flex;

src/components/ha-snowflakes.ts

@@ -31,8 +31,8 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
         this.hass!.connection,
         "frontend",
         "winter_mode",
-        (enabled) => {
-          this._enabled = enabled;
+        (feature) => {
+          this._enabled = feature.enabled;
         }
       ),
     ];

src/components/ha-wa-dialog.ts

@@ -10,7 +10,6 @@ import {
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
-import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-dialog-header";
@@ -73,7 +72,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @see https://github.com/home-assistant/frontend/issues/27143
  */
 @customElement("ha-wa-dialog")
-export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
+export class HaWaDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: "aria-labelledby" })
@@ -114,10 +113,6 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
   @state()
   private _bodyScrolled = false;
 
-  protected get scrollableElement(): HTMLElement | null {
-    return this.bodyContainer;
-  }
-
   protected updated(
     changedProperties: Map<string | number | symbol, unknown>
   ): void {
@@ -166,11 +161,8 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
             <slot name="headerActionItems" slot="actionItems"></slot>
           </ha-dialog-header>
         </slot>
-        <div class="content-wrapper">
-          <div class="body ha-scrollbar" @scroll=${this._handleBodyScroll}>
-            <slot></slot>
-          </div>
-          ${this.renderScrollableFades()}
+        <div class="body ha-scrollbar" @scroll=${this._handleBodyScroll}>
+          <slot></slot>
         </div>
         <slot name="footer" slot="footer"></slot>
       </wa-dialog>
@@ -207,179 +199,165 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     this._bodyScrolled = (ev.target as HTMLDivElement).scrollTop > 0;
   }
 
-  static get styles() {
-    return [
-      ...super.styles,
-      haStyleScrollbar,
-      css`
-        wa-dialog {
-          --full-width: var(
-            --ha-dialog-width-full,
-            min(95vw, var(--safe-width))
-          );
-          --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
-          --spacing: var(--dialog-content-padding, var(--ha-space-6));
-          --show-duration: var(--ha-dialog-show-duration, 200ms);
-          --hide-duration: var(--ha-dialog-hide-duration, 200ms);
-          --ha-dialog-surface-background: var(
-            --card-background-color,
-            var(--ha-color-surface-default)
-          );
-          --wa-color-surface-raised: var(
-            --ha-dialog-surface-background,
-            var(--card-background-color, var(--ha-color-surface-default))
-          );
-          --wa-panel-border-radius: var(
-            --ha-dialog-border-radius,
-            var(--ha-border-radius-3xl)
-          );
-          max-width: var(--ha-dialog-max-width, var(--safe-width));
-        }
+  static styles = [
+    haStyleScrollbar,
+    css`
+      wa-dialog {
+        --full-width: var(--ha-dialog-width-full, min(95vw, var(--safe-width)));
+        --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
+        --spacing: var(--dialog-content-padding, var(--ha-space-6));
+        --show-duration: var(--ha-dialog-show-duration, 200ms);
+        --hide-duration: var(--ha-dialog-hide-duration, 200ms);
+        --ha-dialog-surface-background: var(
+          --card-background-color,
+          var(--ha-color-surface-default)
+        );
+        --wa-color-surface-raised: var(
+          --ha-dialog-surface-background,
+          var(--card-background-color, var(--ha-color-surface-default))
+        );
+        --wa-panel-border-radius: var(
+          --ha-dialog-border-radius,
+          var(--ha-border-radius-3xl)
+        );
+        max-width: var(--ha-dialog-max-width, var(--safe-width));
+      }
 
-        :host([width="small"]) wa-dialog {
-          --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
-        }
+      :host([width="small"]) wa-dialog {
+        --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
+      }
 
-        :host([width="large"]) wa-dialog {
-          --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
-        }
+      :host([width="large"]) wa-dialog {
+        --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
+      }
 
-        :host([width="full"]) wa-dialog {
-          --width: var(--full-width);
-        }
+      :host([width="full"]) wa-dialog {
+        --width: var(--full-width);
+      }
 
-        wa-dialog::part(dialog) {
-          min-width: var(--width, var(--full-width));
-          max-width: var(--width, var(--full-width));
-          max-height: var(
-            --ha-dialog-max-height,
-            calc(var(--safe-height) - var(--ha-space-20))
-          );
-          min-height: var(--ha-dialog-min-height);
-          margin-top: var(--dialog-surface-margin-top, auto);
-          /* Used to offset the dialog from the safe areas when space is limited */
-          transform: translate(
-            calc(
-              var(--safe-area-offset-left, var(--ha-space-0)) - var(
-                  --safe-area-offset-right,
-                  var(--ha-space-0)
-                )
-            ),
-            calc(
-              var(--safe-area-offset-top, var(--ha-space-0)) - var(
-                  --safe-area-offset-bottom,
-                  var(--ha-space-0)
-                )
-            )
-          );
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-        }
+      wa-dialog::part(dialog) {
+        min-width: var(--width, var(--full-width));
+        max-width: var(--width, var(--full-width));
+        max-height: var(
+          --ha-dialog-max-height,
+          calc(var(--safe-height) - var(--ha-space-20))
+        );
+        min-height: var(--ha-dialog-min-height);
+        margin-top: var(--dialog-surface-margin-top, auto);
+        /* Used to offset the dialog from the safe areas when space is limited */
+        transform: translate(
+          calc(
+            var(--safe-area-offset-left, var(--ha-space-0)) - var(
+                --safe-area-offset-right,
+                var(--ha-space-0)
+              )
+          ),
+          calc(
+            var(--safe-area-offset-top, var(--ha-space-0)) - var(
+                --safe-area-offset-bottom,
+                var(--ha-space-0)
+              )
+          )
+        );
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          :host([type="standard"]) {
-            --ha-dialog-border-radius: var(--ha-space-0);
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        :host([type="standard"]) {
+          --ha-dialog-border-radius: var(--ha-space-0);
 
-            wa-dialog {
-              /* Make the container fill the whole screen width and not the safe width */
-              --full-width: var(--ha-dialog-width-full, 100vw);
-              --width: var(--full-width);
-            }
+          wa-dialog {
+            /* Make the container fill the whole screen width and not the safe width */
+            --full-width: var(--ha-dialog-width-full, 100vw);
+            --width: var(--full-width);
+          }
 
-            wa-dialog::part(dialog) {
-              /* Make the dialog fill the whole screen height and not the safe height */
-              min-height: var(--ha-dialog-min-height, 100vh);
-              min-height: var(--ha-dialog-min-height, 100dvh);
-              max-height: var(--ha-dialog-max-height, 100vh);
-              max-height: var(--ha-dialog-max-height, 100dvh);
-              margin-top: 0;
-              margin-bottom: 0;
-              /* Use safe area as padding instead of the container size */
-              padding-top: var(--safe-area-inset-top);
-              padding-bottom: var(--safe-area-inset-bottom);
-              padding-left: var(--safe-area-inset-left);
-              padding-right: var(--safe-area-inset-right);
-              /* Reset the transform to center the dialog */
-              transform: none;
-            }
+          wa-dialog::part(dialog) {
+            /* Make the dialog fill the whole screen height and not the safe height */
+            min-height: var(--ha-dialog-min-height, 100vh);
+            min-height: var(--ha-dialog-min-height, 100dvh);
+            max-height: var(--ha-dialog-max-height, 100vh);
+            max-height: var(--ha-dialog-max-height, 100dvh);
+            margin-top: 0;
+            margin-bottom: 0;
+            /* Use safe area as padding instead of the container size */
+            padding-top: var(--safe-area-inset-top);
+            padding-bottom: var(--safe-area-inset-bottom);
+            padding-left: var(--safe-area-inset-left);
+            padding-right: var(--safe-area-inset-right);
+            /* Reset the transform to center the dialog */
+            transform: none;
           }
         }
+      }
 
-        .header-title-container {
-          display: flex;
-          align-items: center;
-        }
+      .header-title-container {
+        display: flex;
+        align-items: center;
+      }
 
-        .header-title {
-          margin: 0;
-          margin-bottom: 0;
-          color: var(--ha-dialog-header-title-color, var(--primary-text-color));
-          font-size: var(
-            --ha-dialog-header-title-font-size,
-            var(--ha-font-size-2xl)
-          );
-          line-height: var(
-            --ha-dialog-header-title-line-height,
-            var(--ha-line-height-condensed)
-          );
-          font-weight: var(
-            --ha-dialog-header-title-font-weight,
-            var(--ha-font-weight-normal)
-          );
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-right: var(--ha-space-3);
-        }
+      .header-title {
+        margin: 0;
+        margin-bottom: 0;
+        color: var(--ha-dialog-header-title-color, var(--primary-text-color));
+        font-size: var(
+          --ha-dialog-header-title-font-size,
+          var(--ha-font-size-2xl)
+        );
+        line-height: var(
+          --ha-dialog-header-title-line-height,
+          var(--ha-line-height-condensed)
+        );
+        font-weight: var(
+          --ha-dialog-header-title-font-weight,
+          var(--ha-font-weight-normal)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-right: var(--ha-space-3);
+      }
 
-        wa-dialog::part(body) {
-          padding: 0;
-          display: flex;
-          flex-direction: column;
-          max-width: 100%;
-          overflow: hidden;
-        }
+      wa-dialog::part(body) {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        overflow: hidden;
+      }
 
-        .content-wrapper {
-          position: relative;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
-        }
+      .body {
+        position: var(--dialog-content-position, relative);
+        padding: 0 var(--dialog-content-padding, var(--ha-space-6))
+          var(--dialog-content-padding, var(--ha-space-6))
+          var(--dialog-content-padding, var(--ha-space-6));
+        overflow: auto;
+        flex-grow: 1;
+      }
+      :host([flexcontent]) .body {
+        max-width: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
 
-        .body {
-          position: var(--dialog-content-position, relative);
-          padding: 0 var(--dialog-content-padding, var(--ha-space-6))
-            var(--dialog-content-padding, var(--ha-space-6))
-            var(--dialog-content-padding, var(--ha-space-6));
-          overflow: auto;
-          flex-grow: 1;
-        }
-        :host([flexcontent]) .body {
-          max-width: 100%;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-        }
+      wa-dialog::part(footer) {
+        padding: var(--ha-space-0);
+      }
 
-        wa-dialog::part(footer) {
-          padding: var(--ha-space-0);
-        }
-
-        ::slotted([slot="footer"]) {
-          display: flex;
-          padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
-            var(--ha-space-4);
-          gap: var(--ha-space-3);
-          justify-content: flex-end;
-          align-items: center;
-          width: 100%;
-        }
-      `,
-    ];
-  }
+      ::slotted([slot="footer"]) {
+        display: flex;
+        padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
+          var(--ha-space-4);
+        gap: var(--ha-space-3);
+        justify-content: flex-end;
+        align-items: center;
+        width: 100%;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/map/ha-entity-marker.ts

@@ -1,11 +1,10 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators";
+import { property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-state-icon";
 
-@customElement("ha-entity-marker")
 class HaEntityMarker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -90,6 +89,8 @@ class HaEntityMarker extends LitElement {
   `;
 }
 
+customElements.define("ha-entity-marker", HaEntityMarker);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-entity-marker": HaEntityMarker;

src/data/hassio/backup.ts

@@ -47,7 +47,8 @@ export interface HassioFullBackupCreateParams {
   confirm_password?: string;
   background?: boolean;
 }
-export interface HassioPartialBackupCreateParams extends HassioFullBackupCreateParams {
+export interface HassioPartialBackupCreateParams
+  extends HassioFullBackupCreateParams {
   folders?: string[];
   addons?: string[];
   homeassistant?: boolean;

src/data/labs.ts

@@ -101,22 +101,18 @@ export const subscribeLabFeatures = (
  * 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 previewFeature - The preview feature identifier
  * @param onChange - The function to call when the lab feature changes
- * @returns The unsubscribe function
+ * @returns A promise that resolves to 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);
+  onChange: (feature: LabPreviewFeature) => void
+): Promise<() => void> =>
+  conn.subscribeMessage<LabPreviewFeature>(onChange, {
+    type: "labs/subscribe",
+    domain,
+    preview_feature: previewFeature,
   });

src/data/lawn_mower.ts

@@ -18,7 +18,8 @@ export const enum LawnMowerEntityFeature {
 }
 
 interface LawnMowerEntityAttributes
-  extends HassEntityAttributeBase, Record<string, any> {}
+  extends HassEntityAttributeBase,
+    Record<string, any> {}
 
 export interface LawnMowerEntity extends HassEntityBase {
   attributes: LawnMowerEntityAttributes;

src/data/lovelace/config/section.ts

@@ -18,7 +18,8 @@ export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {
   cards?: LovelaceCardConfig[];
 }
 
-export interface LovelaceStrategySectionConfig extends LovelaceBaseSectionConfig {
+export interface LovelaceStrategySectionConfig
+  extends LovelaceBaseSectionConfig {
   strategy: LovelaceStrategyConfig;
 }
 

src/data/lovelace/config/types.ts

@@ -11,7 +11,8 @@ export interface LovelaceConfig extends LovelaceDashboardBaseConfig {
   views: LovelaceViewRawConfig[];
 }
 
-export interface LovelaceDashboardStrategyConfig extends LovelaceDashboardBaseConfig {
+export interface LovelaceDashboardStrategyConfig
+  extends LovelaceDashboardBaseConfig {
   strategy: LovelaceStrategyConfig;
 }
 

src/data/lovelace/dashboard.ts

@@ -29,7 +29,8 @@ export interface LovelaceDashboardMutableParams {
   title: string;
 }
 
-export interface LovelaceDashboardCreateParams extends LovelaceDashboardMutableParams {
+export interface LovelaceDashboardCreateParams
+  extends LovelaceDashboardMutableParams {
   url_path: string;
   mode: "storage";
 }

src/data/trace.ts

@@ -106,7 +106,8 @@ export interface AutomationTrace extends BaseTrace {
 }
 
 export interface AutomationTraceExtended
-  extends AutomationTrace, BaseTraceExtended {
+  extends AutomationTrace,
+    BaseTraceExtended {
   config: ManualAutomationConfig;
   blueprint_inputs?: BlueprintAutomationConfig;
 }

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/generic/show-dialog-box.ts

@@ -32,7 +32,8 @@ export interface PromptDialogParams extends BaseDialogBoxParams {
 }
 
 export interface DialogBoxParams
-  extends ConfirmationDialogParams, PromptDialogParams {
+  extends ConfirmationDialogParams,
+    PromptDialogParams {
   confirm?: (out?: string) => void;
   confirmation?: boolean;
   prompt?: boolean;

src/dialogs/make-dialog-manager.ts

@@ -19,9 +19,8 @@ declare global {
   }
 }
 
-export interface HassDialog<
-  T = HASSDomEvents[ValidHassDomEvent],
-> extends HTMLElement {
+export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
+  extends HTMLElement {
   showDialog(params: T);
   closeDialog?: (historyState?: any) => boolean;
 }

src/dialogs/more-info/controls/more-info-camera.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { slugify } from "../../../common/string/slugify";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-camera-stream";
@@ -9,7 +9,6 @@ import type { HomeAssistant } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import { showToast } from "../../../util/toast";
 
-@customElement("more-info-camera")
 class MoreInfoCamera extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -113,6 +112,8 @@ class MoreInfoCamera extends LitElement {
   `;
 }
 
+customElements.define("more-info-camera", MoreInfoCamera);
+
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-camera": MoreInfoCamera;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -7,7 +7,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
@@ -32,7 +32,6 @@ import { moreInfoControlStyle } from "../components/more-info-control-style";
 
 type MainControl = "temperature" | "humidity";
 
-@customElement("more-info-climate")
 class MoreInfoClimate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -568,6 +567,8 @@ class MoreInfoClimate extends LitElement {
   }
 }
 
+customElements.define("more-info-climate", MoreInfoClimate);
+
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-climate": MoreInfoClimate;

src/dialogs/more-info/controls/more-info-group.ts

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import type { GroupEntity } from "../../../data/group";
 import { computeGroupDomain } from "../../../data/group";
@@ -13,7 +13,6 @@ import {
   importMoreInfoControl,
 } from "../state_more_info_control";
 
-@customElement("more-info-group")
 class MoreInfoGroup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -107,6 +106,8 @@ class MoreInfoGroup extends LitElement {
   }
 }
 
+customElements.define("more-info-group", MoreInfoGroup);
+
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-group": MoreInfoGroup;

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -1,7 +1,7 @@
 import { mdiPower, mdiTuneVariant } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-select-menu";
@@ -15,7 +15,6 @@ import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
 
-@customElement("more-info-humidifier")
 class MoreInfoHumidifier extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -250,6 +249,8 @@ class MoreInfoHumidifier extends LitElement {
   }
 }
 
+customElements.define("more-info-humidifier", MoreInfoHumidifier);
+
 declare global {
   interface HTMLElementTagNameMap {
     "more-info-humidifier": MoreInfoHumidifier;

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

@@ -302,7 +302,9 @@ export class MoreInfoDialog extends LitElement {
   }
 
   private _goToAddEntityTo(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) return;
+    // Only check for request-selected events (from menu items), not regular clicks (from icon button)
+    if (ev.type === "request-selected" && !shouldHandleRequestSelectedEvent(ev))
+      return;
     this._setView("add_to");
   }
 
@@ -550,7 +552,18 @@ export class MoreInfoDialog extends LitElement {
                           : nothing}
                       </ha-button-menu>
                     `
-                  : nothing}
+                  : !__DEMO__ && this._shouldShowAddEntityTo()
+                    ? html`
+                        <ha-icon-button
+                          slot="actionItems"
+                          .label=${this.hass.localize(
+                            "ui.dialogs.more_info_control.add_entity_to"
+                          )}
+                          .path=${mdiPlusBoxMultipleOutline}
+                          @click=${this._goToAddEntityTo}
+                        ></ha-icon-button>
+                      `
+                    : nothing}
               `
             : isSpecificInitialView
               ? html`

src/layouts/ha-init-page.ts

@@ -1,10 +1,9 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import "../components/ha-spinner";
 import "../components/ha-button";
 
-@customElement("ha-init-page")
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
 
@@ -121,6 +120,8 @@ class HaInitPage extends LitElement {
   `;
 }
 
+customElements.define("ha-init-page", HaInitPage);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-init-page": HaInitPage;

src/layouts/hass-subpage.ts

@@ -128,8 +128,6 @@ class HassSubpage extends LitElement {
         ha-menu-button,
         ha-icon-button-arrow-prev,
         ::slotted([slot="toolbar-icon"]) {
-          display: flex;
-          align-items: center;
           pointer-events: auto;
           color: var(--sidebar-icon-color);
         }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -621,9 +621,9 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     } else if (this._sortDirection === "asc") {
       this._sortDirection = "desc";
     } else {
-      this._sortDirection = "asc";
+      this._sortDirection = null;
     }
-    this._sortColumn = columnId;
+    this._sortColumn = this._sortDirection === null ? undefined : columnId;
 
     fireEvent(this, "sorting-changed", {
       column: columnId,

src/managers/notification-manager.ts

@@ -1,6 +1,6 @@
 import { mdiClose } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
 import type { LocalizeKeys } from "../common/translations/localize";
 import "../components/ha-button";
 import "../components/ha-icon-button";
@@ -26,7 +26,6 @@ export interface ToastActionParams {
     | { translationKey: LocalizeKeys; args?: Record<string, string> };
 }
 
-@customElement("notification-manager")
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -116,6 +115,8 @@ class NotificationManager extends LitElement {
   }
 }
 
+customElements.define("notification-manager", NotificationManager);
+
 declare global {
   interface HTMLElementTagNameMap {
     "notification-manager": NotificationManager;

src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts

@@ -90,7 +90,9 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
       this._email = this._cloudLoginElement.emailField.value;
     }
 
-    await import("../../panels/config/cloud/forgot-password/cloud-forgot-password-card");
+    await import(
+      "../../panels/config/cloud/forgot-password/cloud-forgot-password-card"
+    );
     this._view = "forgot-password";
   }
 

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -3,7 +3,7 @@ import { TZDate } from "@date-fns/tz";
 import { addDays, isSameDay } from "date-fns";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatDateTime } from "../../common/datetime/format_date_time";
 import { formatTime } from "../../common/datetime/format_time";
@@ -26,7 +26,6 @@ import type { CalendarEventDetailDialogParams } from "./show-dialog-calendar-eve
 import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor";
 import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
 
-@customElement("dialog-calendar-event-detail")
 class DialogCalendarEventDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -272,3 +271,8 @@ declare global {
     "dialog-calendar-event-detail": DialogCalendarEventDetail;
   }
 }
+
+customElements.define(
+  "dialog-calendar-event-detail",
+  DialogCalendarEventDetail
+);

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

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -40,7 +40,6 @@ const SENSOR_DOMAINS = ["sensor"];
 const TEMPERATURE_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_TEMPERATURE];
 const HUMIDITY_DEVICE_CLASSES = [SENSOR_DEVICE_CLASS_HUMIDITY];
 
-@customElement("dialog-area-registry-detail")
 class DialogAreaDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -427,3 +426,5 @@ declare global {
     "dialog-area-registry-detail": DialogAreaDetail;
   }
 }
+
+customElements.define("dialog-area-registry-detail", DialogAreaDetail);

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

@@ -1,7 +1,7 @@
 import { mdiTextureBox } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -27,7 +27,6 @@ import type { HomeAssistant } from "../../../types";
 import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
 import type { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
 
-@customElement("dialog-floor-registry-detail")
 class DialogFloorDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -362,3 +361,5 @@ declare global {
     "dialog-floor-registry-detail": DialogFloorDetail;
   }
 }
+
+customElements.define("dialog-floor-registry-detail", DialogFloorDetail);

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

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

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

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

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/action/types/ha-automation-action-stop.ts

@@ -64,15 +64,8 @@ export class HaStopAction extends LitElement implements ActionElement {
 
   private _responseChanged(ev: Event) {
     ev.stopPropagation();
-    const newAction = { ...this.action };
-    const newValue = (ev.target as any).value;
-    if (newValue) {
-      newAction.response_variable = newValue;
-    } else {
-      delete newAction.response_variable;
-    }
     fireEvent(this, "value-changed", {
-      value: newAction,
+      value: { ...this.action, response_variable: (ev.target as any).value },
     });
   }
 

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

@@ -228,7 +228,7 @@ class DialogAddAutomationElement
 
   private _unsub?: Promise<UnsubscribeFunc>;
 
-  private _unsubscribeLabFeatures?: UnsubscribeFunc;
+  private _unsubscribeLabFeatures?: Promise<UnsubscribeFunc>;
 
   private _configEntryLookup: Record<string, ConfigEntry> = {};
 
@@ -285,8 +285,8 @@ class DialogAddAutomationElement
       this.hass.connection,
       "automation",
       "new_triggers_conditions",
-      (enabled) => {
-        this._newTriggersAndConditions = enabled;
+      (feature) => {
+        this._newTriggersAndConditions = feature.enabled;
         this._tab = this._newTriggersAndConditions ? "targets" : "groups";
       }
     );
@@ -422,7 +422,7 @@ class DialogAddAutomationElement
       this._unsub = undefined;
     }
     if (this._unsubscribeLabFeatures) {
-      this._unsubscribeLabFeatures();
+      this._unsubscribeLabFeatures.then((unsub) => unsub());
       this._unsubscribeLabFeatures = undefined;
     }
   }

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

@@ -94,8 +94,8 @@ export default class HaAutomationCondition extends SubscribeMixin(LitElement) {
         this.hass!.connection,
         "automation",
         "new_triggers_conditions",
-        (enabled) => {
-          this._newTriggersAndConditions = enabled;
+        (feature) => {
+          this._newTriggersAndConditions = feature.enabled;
         }
       ),
     ];

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

@@ -124,9 +124,9 @@ export class HaPlatformCondition extends LitElement {
 
     const hasOptional = Boolean(
       conditionDesc?.fields &&
-      Object.values(conditionDesc.fields).some((field) =>
-        showOptionalToggle(field)
-      )
+        Object.values(conditionDesc.fields).some((field) =>
+          showOptionalToggle(field)
+        )
     );
 
     return html`

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,
@@ -24,22 +23,20 @@ import {
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { 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 {
@@ -114,7 +112,6 @@ declare global {
   }
 }
 
-@customElement("ha-automation-editor")
 export class HaAutomationEditor extends PreventUnsavedMixin(
   KeyboardShortcutMixin(LitElement)
 ) {
@@ -294,10 +291,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 +299,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 +399,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 +418,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 +1248,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 +1300,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;
         }
@@ -1354,3 +1339,5 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     ];
   }
 }
+
+customElements.define("ha-automation-editor", HaAutomationEditor);

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

@@ -35,8 +35,6 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
-import { slugify } from "../../../common/string/slugify";
-import "../../../components/ha-tooltip";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
   hasRejectedItems,
@@ -57,10 +55,6 @@ import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-entities";
 import "../../../components/ha-filter-floor-areas";
-import "@home-assistant/webawesome/dist/components/divider/divider";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-md-divider";
@@ -333,19 +327,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             const date = new Date(automation.last_triggered);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
-            const formattedTime = formatShortDateTimeWithConditionalYear(
-              date,
-              this.hass.locale,
-              this.hass.config
-            );
-            const elementId = "last-triggered-" + slugify(automation.entity_id);
             return html`
               ${dayDifference > 3
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}>${relativeTime(date, locale)}</span>
-                  `}
+                ? formatShortDateTimeWithConditionalYear(
+                    date,
+                    this.hass.locale,
+                    this.hass.config
+                  )
+                : relativeTime(date, locale)}
             `;
           },
         },
@@ -416,22 +405,29 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   protected render(): TemplateResult {
     const categoryItems = html`${this._categories?.map(
         (category) =>
-          html`<ha-dropdown-item .value=${category.category_id}>
+          html`<ha-md-menu-item
+            .value=${category.category_id}
+            .clickAction=${this._handleBulkCategory}
+          >
             ${category.icon
-              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
-            ${category.name}
-          </ha-dropdown-item>`
+              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
+            <div slot="headline">${category.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item value="__no_category__">
-        ${this.hass.localize(
-          "ui.panel.config.automation.picker.bulk_actions.no_category"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item value="__create_category__">
-        ${this.hass.localize("ui.panel.config.category.editor.add")}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.no_category"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.category.editor.add")}
+        </div>
+      </ha-md-menu-item>`;
 
     const labelItems = html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
@@ -443,14 +439,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -464,39 +460,45 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item>`;
+        </ha-md-menu-item>`;
       })}
-      <wa-divider></wa-divider>
-      <ha-dropdown-item
-        value="__create_label__"
-        @click=${this._bulkCreateLabel}
-      >
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div></ha-md-menu-item
+      >`;
 
     const areaItems = html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-dropdown-item .value=${area.area_id}>
+          html`<ha-md-menu-item
+            .value=${area.area_id}
+            .clickAction=${this._handleBulkArea}
+          >
             ${area.icon
-              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="icon"
+                  slot="start"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            ${area.name}
-          </ha-dropdown-item>`
+            <div slot="headline">${area.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item value="__no_area__">
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.no_area"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item value="__create_area__">
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.add_area"
-        )}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.no_area"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.add_area"
+          )}
+        </div>
+      </ha-md-menu-item>`;
 
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
@@ -518,9 +520,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${this._searchParms.has("historyBack")
-          ? undefined
-          : "/config"}
+        .backPath=${
+          this._searchParms.has("historyBack") ? undefined : "/config"
+        }
         id="entity_id"
         .route=${this.route}
         .tabs=${configSections.automations}
@@ -532,14 +534,16 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
         has-filters
-        .filters=${Object.values(this._filters).filter((filter) =>
-          Array.isArray(filter.value)
-            ? filter.value.length
-            : filter.value &&
-              Object.values(filter.value).some((val) =>
-                Array.isArray(val) ? val.length : val
-              )
-        ).length}
+        .filters=${
+          Object.values(this._filters).filter((filter) =>
+            Array.isArray(filter.value)
+              ? filter.value.length
+              : filter.value &&
+                Object.values(filter.value).some((val) =>
+                  Array.isArray(val) ? val.length : val
+                )
+          ).length
+        }
         .columns=${this._columns(
           this.narrow,
           this.hass.localize,
@@ -632,31 +636,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-blueprints>
-        ${!this.narrow
-          ? html`<ha-dropdown
-                slot="selection-bar"
-                @wa-select=${this._handleBulkCategorySelect}
-              >
-                <ha-assist-chip
-                  slot="trigger"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.move_category"
-                  )}
-                >
-                  <ha-svg-icon
-                    slot="trailing-icon"
-                    .path=${mdiMenuDown}
-                  ></ha-svg-icon>
-                </ha-assist-chip>
-                ${categoryItems}
-              </ha-dropdown>
-              ${labelsInOverflow
-                ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+          ${
+            !this.narrow
+              ? html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        "ui.panel.config.automation.picker.bulk_actions.move_category"
                       )}
                     >
                       <ha-svg-icon
@@ -664,141 +650,179 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                         .path=${mdiMenuDown}
                       ></ha-svg-icon>
                     </ha-assist-chip>
-                    ${labelItems}
-                  </ha-dropdown>`}
-              ${areasInOverflow
-                ? nothing
-                : html`<ha-dropdown
-                    slot="selection-bar"
-                    @wa-select=${this._handleBulkAreaSelect}
+                    ${categoryItems}
+                  </ha-md-button-menu>
+                  ${labelsInOverflow
+                    ? nothing
+                    : html`<ha-md-button-menu slot="selection-bar">
+                        <ha-assist-chip
+                          slot="trigger"
+                          .label=${this.hass.localize(
+                            "ui.panel.config.automation.picker.bulk_actions.add_label"
+                          )}
+                        >
+                          <ha-svg-icon
+                            slot="trailing-icon"
+                            .path=${mdiMenuDown}
+                          ></ha-svg-icon>
+                        </ha-assist-chip>
+                        ${labelItems}
+                      </ha-md-button-menu>`}
+                  ${areasInOverflow
+                    ? nothing
+                    : html`<ha-md-button-menu slot="selection-bar">
+                        <ha-assist-chip
+                          slot="trigger"
+                          .label=${this.hass.localize(
+                            "ui.panel.config.devices.picker.bulk_actions.move_area"
+                          )}
+                        >
+                          <ha-svg-icon
+                            slot="trailing-icon"
+                            .path=${mdiMenuDown}
+                          ></ha-svg-icon>
+                        </ha-assist-chip>
+                        ${areaItems}
+                      </ha-md-button-menu>`}`
+              : nothing
+          }
+          <ha-md-button-menu has-overflow slot="selection-bar">
+            ${
+              this.narrow
+                ? html`<ha-assist-chip
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
                   >
-                    <ha-assist-chip
-                      slot="trigger"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
-                    >
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiMenuDown}
+                    ></ha-svg-icon>
+                  </ha-assist-chip>`
+                : html`<ha-icon-button
+                    .path=${mdiDotsVertical}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  ></ha-icon-button>`
+            }
+              <ha-svg-icon
+                slot="trailing-icon"
+                .path=${mdiMenuDown}
+              ></ha-svg-icon
+            ></ha-assist-chip>
+            ${
+              this.narrow
+                ? html`<ha-sub-menu>
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="trailing-icon"
-                        .path=${mdiMenuDown}
+                        slot="end"
+                        .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-assist-chip>
-                    ${areaItems}
-                  </ha-dropdown>`}`
-          : nothing}
-        <ha-dropdown
-          has-overflow
-          slot="selection-bar"
-          @wa-select=${this._handleOverflowMenuSelect}
-        >
-          ${this.narrow
-            ? html`<ha-assist-chip
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>`
-            : html`<ha-icon-button
-                .path=${mdiDotsVertical}
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              ></ha-icon-button>`}
-          ${this.narrow
-            ? html`<ha-sub-menu>
-                <ha-dropdown-item slot="item">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.move_category"
-                  )}
-                  <ha-svg-icon
-                    slot="details"
-                    .path=${mdiChevronRight}
-                  ></ha-svg-icon>
-                </ha-dropdown-item>
-                <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
-              </ha-sub-menu>`
-            : nothing}
-          ${this.narrow || labelsInOverflow
-            ? html`<ha-sub-menu>
-                <ha-dropdown-item slot="item">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.add_label"
-                  )}
-                  <ha-svg-icon
-                    slot="details"
-                    .path=${mdiChevronRight}
-                  ></ha-svg-icon>
-                </ha-dropdown-item>
-                <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-              </ha-sub-menu>`
-            : nothing}
-          ${this.narrow || areasInOverflow
-            ? html`<ha-sub-menu>
-                <ha-dropdown-item slot="item">
-                  ${this.hass.localize(
-                    "ui.panel.config.devices.picker.bulk_actions.move_area"
-                  )}
-                  <ha-svg-icon
-                    slot="details"
-                    .path=${mdiChevronRight}
-                  ></ha-svg-icon>
-                </ha-dropdown-item>
-                <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-              </ha-sub-menu>`
-            : nothing}
-          <ha-dropdown-item value="enable">
-            <ha-svg-icon slot="icon" .path=${mdiToggleSwitch}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.automation.picker.bulk_actions.enable"
-            )}
-          </ha-dropdown-item>
-          <ha-dropdown-item value="disable">
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiToggleSwitchOffOutline}
-            ></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.automation.picker.bulk_actions.disable"
-            )}
-          </ha-dropdown-item>
-        </ha-dropdown>
-        ${!this.automations.length
-          ? html`<div class="empty" slot="empty">
-              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
-              <h1>
+                    </ha-md-menu-item>
+                    <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
+                  </ha-sub-menu>`
+                : nothing
+            }
+            ${
+              this.narrow || labelsInOverflow
+                ? html`<ha-sub-menu>
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-md-menu-item>
+                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
+                  </ha-sub-menu>`
+                : nothing
+            }
+            ${
+              this.narrow || areasInOverflow
+                ? html`<ha-sub-menu>
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.devices.picker.bulk_actions.move_area"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-md-menu-item>
+                    <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
+                  </ha-sub-menu>`
+                : nothing
+            }
+            <ha-md-menu-item .clickAction=${this._handleBulkEnable}>
+              <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
+              <div slot="headline">
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_header"
+                  "ui.panel.config.automation.picker.bulk_actions.enable"
                 )}
-              </h1>
-              <p>
+              </div>
+            </ha-md-menu-item>
+            <ha-md-menu-item .clickAction=${this._handleBulkDisable}>
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiToggleSwitchOffOutline}
+              ></ha-svg-icon>
+              <div slot="headline">
                 ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_text_1"
+                  "ui.panel.config.automation.picker.bulk_actions.disable"
                 )}
-              </p>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_text_2",
-                  { user: this.hass.user?.name || "Alice" }
-                )}
-              </p>
-              <ha-button
-                href=${documentationUrl(this.hass, "/docs/automation/editor/")}
-                target="_blank"
-                appearance="plain"
-                rel="noreferrer"
-                size="small"
-              >
-                ${this.hass.localize("ui.panel.config.common.learn_more")}
-                <ha-svg-icon slot="end" .path=${mdiOpenInNew}> </ha-svg-icon>
-              </ha-button>
-            </div>`
-          : nothing}
+              </div>
+            </ha-md-menu-item>
+          </ha-md-button-menu>
+        ${
+          !this.automations.length
+            ? html`<div class="empty" slot="empty">
+                <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
+                <h1>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.picker.empty_header"
+                  )}
+                </h1>
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.picker.empty_text_1"
+                  )}
+                </p>
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.picker.empty_text_2",
+                    { user: this.hass.user?.name || "Alice" }
+                  )}
+                </p>
+                <ha-button
+                  href=${documentationUrl(
+                    this.hass,
+                    "/docs/automation/editor/"
+                  )}
+                  target="_blank"
+                  appearance="plain"
+                  rel="noreferrer"
+                  size="small"
+                >
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
+                  <ha-svg-icon slot="end" .path=${mdiOpenInNew}> </ha-svg-icon>
+                </ha-button>
+              </div>`
+            : nothing
+        }
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -860,15 +884,21 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>
         <ha-md-menu-item .clickAction=${this._toggle}>
           <ha-svg-icon
-            .path=${this._overflowAutomation?.state === "off"
-              ? mdiToggleSwitch
-              : mdiToggleSwitchOffOutline}
+            .path=${
+              this._overflowAutomation?.state === "off"
+                ? mdiToggleSwitch
+                : mdiToggleSwitchOffOutline
+            }
             slot="start"
           ></ha-svg-icon>
           <div slot="headline">
-            ${this._overflowAutomation?.state === "off"
-              ? this.hass.localize("ui.panel.config.automation.editor.enable")
-              : this.hass.localize("ui.panel.config.automation.editor.disable")}
+            ${
+              this._overflowAutomation?.state === "off"
+                ? this.hass.localize("ui.panel.config.automation.editor.enable")
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.disable"
+                  )
+            }
           </div>
         </ha-md-menu-item>
         <ha-md-menu-item .clickAction=${this._deleteConfirm} class="warning">
@@ -1224,16 +1254,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleBulkCategorySelect = (ev: CustomEvent) => {
-    const item = ev.detail.item as HaDropdownItem;
-    const value = item.value as string;
-    if (value === "__create_category__") {
-      this._bulkCreateCategory();
-    } else if (value === "__no_category__") {
-      this._bulkAddCategory("");
-    } else {
-      this._bulkAddCategory(value);
-    }
+  private _handleBulkCategory = async (item) => {
+    const category = item.value;
+    this._bulkAddCategory(category);
   };
 
   private async _bulkAddCategory(category: string) {
@@ -1297,16 +1320,9 @@ ${rejected
     }
   }
 
-  private _handleBulkAreaSelect = (ev: CustomEvent) => {
-    const item = ev.detail.item as HaDropdownItem;
-    const value = item.value as string;
-    if (value === "__create_area__") {
-      this._bulkCreateArea();
-    } else if (value === "__no_area__") {
-      this._bulkAddArea("");
-    } else {
-      this._bulkAddArea(value);
-    }
+  private _handleBulkArea = (item) => {
+    const area = item.value;
+    this._bulkAddArea(area);
   };
 
   private async _bulkAddArea(area: string) {
@@ -1344,18 +1360,6 @@ ${rejected
     });
   };
 
-  private _handleOverflowMenuSelect = (ev: CustomEvent) => {
-    const item = ev.detail.item as HaDropdownItem;
-    switch (item.value) {
-      case "enable":
-        this._handleBulkEnable();
-        break;
-      case "disable":
-        this._handleBulkDisable();
-        break;
-    }
-  };
-
   private _handleBulkEnable = async () => {
     const promises: Promise<ServiceCallResponse>[] = [];
     this._selected.forEach((entityId) => {
@@ -1466,7 +1470,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -89,8 +89,8 @@ export default class HaAutomationTrigger extends SubscribeMixin(LitElement) {
         this.hass!.connection,
         "automation",
         "new_triggers_conditions",
-        (enabled) => {
-          this._newTriggersAndConditions = enabled;
+        (feature) => {
+          this._newTriggersAndConditions = feature.enabled;
         }
       ),
     ];

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

@@ -160,9 +160,9 @@ export class HaPlatformTrigger extends LitElement {
 
     const hasOptional = Boolean(
       triggerDesc?.fields &&
-      Object.values(triggerDesc.fields).some((field) =>
-        showOptionalToggle(field)
-      )
+        Object.values(triggerDesc.fields).some((field) =>
+          showOptionalToggle(field)
+        )
     );
 
     return html`

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

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

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,7 +1,7 @@
 import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
+import { state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -13,7 +13,6 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
 
-@customElement("dialog-manage-cloudhook")
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
 
@@ -156,3 +155,5 @@ declare global {
     "dialog-manage-cloudhook": DialogManageCloudhook;
   }
 }
+
+customElements.define("dialog-manage-cloudhook", DialogManageCloudhook);

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

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

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

@@ -1,4 +1,4 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
@@ -6,12 +6,13 @@ 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-dropdown";
-import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
+import "../../../components/ha-check-list-item";
+import "../../../components/ha-list-item";
 import "../../../components/ha-metric";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
@@ -72,24 +73,24 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-dropdown @wa-select=${this._handleMenuAction}>
+          <ha-button-menu multi>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-dropdown-item
-              type="checkbox"
-              .checked=${this._showSkipped}
-              value="toggle_skipped"
+            <ha-check-list-item
+              left
+              @request-selected=${this._toggleSkipped}
+              .selected=${this._showSkipped}
             >
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
-            </ha-dropdown-item>
+            </ha-check-list-item>
             ${this._supervisorInfo
               ? html`
-                  <wa-divider></wa-divider>
-                  <ha-dropdown-item
-                    value="toggle_beta"
+                  <li divider role="separator"></li>
+                  <ha-list-item
+                    @request-selected=${this._toggleBeta}
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
                     ${this._supervisorInfo.channel === "stable"
@@ -97,10 +98,10 @@ class HaConfigSectionUpdates extends LitElement {
                       : this.hass.localize(
                           "ui.panel.config.updates.leave_beta"
                         )}
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               : ""}
-          </ha-dropdown>
+          </ha-button-menu>
         </div>
         <div class="content">
           <ha-card outlined>
@@ -132,21 +133,27 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private _handleMenuAction(ev: CustomEvent): void {
-    const item = ev.detail.item as HaDropdownItem;
-    switch (item.value) {
-      case "toggle_skipped":
-        this._showSkipped = !this._showSkipped;
-        break;
-      case "toggle_beta":
-        if (this._supervisorInfo!.channel === "stable") {
-          showJoinBetaDialog(this, {
-            join: async () => this._setChannel("beta"),
-          });
-        } else {
-          this._setChannel("stable");
-        }
-        break;
+  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (ev.detail.source !== "property") {
+      return;
+    }
+
+    this._showSkipped = !this._showSkipped;
+  }
+
+  private async _toggleBeta(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+
+    if (this._supervisorInfo!.channel === "stable") {
+      showJoinBetaDialog(this, {
+        join: async () => this._setChannel("beta"),
+      });
+    } else {
+      this._setChannel("stable");
     }
   }
 

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

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

src/panels/config/devices/ha-config-device-page.ts

@@ -1138,20 +1138,23 @@ export class HaConfigDevicePage extends LitElement {
     }
 
     if (domains.includes("mqtt")) {
-      const mqtt =
-        await import("./device-detail/integration-elements/mqtt/device-actions");
+      const mqtt = await import(
+        "./device-detail/integration-elements/mqtt/device-actions"
+      );
       const actions = mqtt.getMQTTDeviceActions(this, device);
       deviceActions.push(...actions);
     }
     if (domains.includes("zha")) {
-      const zha =
-        await import("./device-detail/integration-elements/zha/device-actions");
+      const zha = await import(
+        "./device-detail/integration-elements/zha/device-actions"
+      );
       const actions = await zha.getZHADeviceActions(this, this.hass, device);
       deviceActions.push(...actions);
     }
     if (domains.includes("zwave_js")) {
-      const zwave =
-        await import("./device-detail/integration-elements/zwave_js/device-actions");
+      const zwave = await import(
+        "./device-detail/integration-elements/zwave_js/device-actions"
+      );
       const actions = await zwave.getZwaveDeviceActions(
         this,
         this.hass,
@@ -1160,8 +1163,9 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions.push(...actions);
     }
     if (domains.includes("esphome")) {
-      const esphome =
-        await import("./device-detail/integration-elements/esphome/device-actions");
+      const esphome = await import(
+        "./device-detail/integration-elements/esphome/device-actions"
+      );
       const actions = await esphome.getESPHomeDeviceActions(
         this,
         this.hass,
@@ -1170,8 +1174,9 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions.push(...actions);
     }
     if (domains.includes("matter")) {
-      const matter =
-        await import("./device-detail/integration-elements/matter/device-actions");
+      const matter = await import(
+        "./device-detail/integration-elements/matter/device-actions"
+      );
       const defaultActions = matter.getMatterDeviceDefaultActions(
         this,
         this.hass,
@@ -1215,8 +1220,9 @@ export class HaConfigDevicePage extends LitElement {
     ).map((int) => int.domain);
 
     if (domains.includes("zwave_js")) {
-      const zwave =
-        await import("./device-detail/integration-elements/zwave_js/device-alerts");
+      const zwave = await import(
+        "./device-detail/integration-elements/zwave_js/device-alerts"
+      );
 
       const alerts = await zwave.getZwaveDeviceAlerts(this.hass, device);
       deviceAlerts.push(...alerts);
@@ -1298,7 +1304,9 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("zwave_js")) {
-      import("./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js");
+      import(
+        "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
+      );
       deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}
@@ -1307,7 +1315,9 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("matter")) {
-      import("./device-detail/integration-elements/matter/ha-device-info-matter");
+      import(
+        "./device-detail/integration-elements/matter/ha-device-info-matter"
+      );
       deviceInfo.push(html`
         <ha-device-info-matter
           .hass=${this.hass}

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

@@ -47,14 +47,12 @@ import "../../../components/ha-check-list-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
-import "@home-assistant/webawesome/dist/components/divider/divider";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-menu";
+import "../../../components/ha-md-divider";
+import "../../../components/ha-md-menu-item";
 import "../../../components/ha-sub-menu";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
@@ -722,30 +720,34 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
     const areaItems = html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${area.area_id}
             .clickAction=${this._handleBulkArea}
           >
             ${area.icon
-              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="icon"
+                  slot="start"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            ${area.name}
-          </ha-dropdown-item>`
+            <div slot="headline">${area.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.no_area"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.add_area"
-        )}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.no_area"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.add_area"
+          )}
+        </div>
+      </ha-md-menu-item>`;
 
     const labelItems = html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
@@ -757,14 +759,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           this._selected.some((deviceId) =>
             this.hass.devices[deviceId]?.labels.includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -778,12 +780,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item>`;
+        </ha-md-menu-item>`;
       })}
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div></ha-md-menu-item
+      >`;
 
     return html`
       <hass-tabs-subpage-data-table
@@ -902,7 +906,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         ></ha-filter-labels>
 
         ${!this.narrow
-          ? html`<ha-dropdown slot="selection-bar">
+          ? html`<ha-md-button-menu slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -915,11 +919,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-assist-chip>
                 ${labelItems}
-              </ha-dropdown>
+              </ha-md-button-menu>
 
               ${areasInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -932,9 +936,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${areaItems}
-                  </ha-dropdown>`}`
+                  </ha-md-button-menu>`}`
           : nothing}
-        <ha-dropdown has-overflow slot="selection-bar">
+        <ha-md-button-menu has-overflow slot="selection-bar">
           ${this.narrow
             ? html`<ha-assist-chip
                 .label=${this.hass.localize(
@@ -956,44 +960,50 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               ></ha-icon-button>`}
           ${this.narrow
             ? html` <ha-sub-menu>
-                <ha-dropdown-item slot="item">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.bulk_actions.add_label"
-                  )}
+                <ha-md-menu-item slot="item">
+                  <div slot="headline">
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                    )}
+                  </div>
                   <ha-svg-icon
-                    slot="details"
+                    slot="end"
                     .path=${mdiChevronRight}
                   ></ha-svg-icon>
-                </ha-dropdown-item>
+                </ha-md-menu-item>
                 <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
               </ha-sub-menu>`
             : nothing}
           ${areasInOverflow
             ? html`<ha-sub-menu>
-                  <ha-dropdown-item slot="item">
-                    ${this.hass.localize(
-                      "ui.panel.config.devices.picker.bulk_actions.move_area"
-                    )}
+                  <ha-md-menu-item slot="item">
+                    <div slot="headline">
+                      ${this.hass.localize(
+                        "ui.panel.config.devices.picker.bulk_actions.move_area"
+                      )}
+                    </div>
                     <ha-svg-icon
-                      slot="details"
+                      slot="end"
                       .path=${mdiChevronRight}
                     ></ha-svg-icon>
-                  </ha-dropdown-item>
+                  </ha-md-menu-item>
                   <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
                 </ha-sub-menu>
-                <wa-divider></wa-divider>`
+                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
             : nothing}
-          <ha-dropdown-item
+          <ha-md-menu-item
             .clickAction=${this._deleteSelected}
             .disabled=${!this._selectedCanDelete.length}
-            variant="danger"
+            class="warning"
           >
-            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
-            )}
-          </ha-dropdown-item>
-        </ha-dropdown>
+            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+            <div slot="headline">
+              ${this.hass.localize(
+                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
+              )}
+            </div>
+          </ha-md-menu-item>
+        </ha-md-button-menu>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1267,7 +1277,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -9,7 +9,6 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import "../../../../components/ha-button";
-import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 import type { GasSourceTypeEnergyPreference } from "../../../../data/energy";
@@ -110,15 +109,6 @@ export class DialogEnergyGasSettings
       ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
       : undefined;
 
-    const pickedUnitClass =
-      this._pickedDisplayUnit &&
-      this._energy_units?.includes(this._pickedDisplayUnit)
-        ? "energy"
-        : this._pickedDisplayUnit &&
-            this._gas_units?.includes(this._pickedDisplayUnit)
-          ? "volume"
-          : undefined;
-
     const externalSource =
       this._source.stat_energy_from &&
       isExternalStatistic(this._source.stat_energy_from);
@@ -223,33 +213,9 @@ export class DialogEnergyGasSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 "ui.panel.config.energy.gas.dialog.cost_entity_input"
-              )}
-              .helper=${pickedUnitClass
-                ? html`<ha-markdown
-                    .content=${this.hass.localize(
-                      "ui.panel.config.energy.gas.dialog.cost_entity_helper",
-                      pickedUnitClass === "energy"
-                        ? {
-                            currency: this.hass.config.currency,
-                            class: this.hass.localize(
-                              "ui.panel.config.energy.gas.dialog.cost_entity_helper_energy"
-                            ),
-                            unit1: "kWh",
-                            unit2: "Wh",
-                          }
-                        : {
-                            currency: this.hass.config.currency,
-                            class: this.hass.localize(
-                              "ui.panel.config.energy.gas.dialog.cost_entity_helper_volume"
-                            ),
-                            unit1: "m³",
-                            unit2: "ft³",
-                          }
-                    )}
-                  ></ha-markdown>`
-                : nothing}
+              )} ${unitPrice ? ` (${unitPrice})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}

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

@@ -9,7 +9,6 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
-import "../../../../components/ha-markdown";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 import type { WaterSourceTypeEnergyPreference } from "../../../../data/energy";
@@ -17,7 +16,11 @@ import {
   emptyWaterEnergyPreference,
   energyStatisticHelpUrl,
 } from "../../../../data/energy";
-import { isExternalStatistic } from "../../../../data/recorder";
+import {
+  getDisplayUnit,
+  getStatisticMetadata,
+  isExternalStatistic,
+} from "../../../../data/recorder";
 import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
@@ -37,6 +40,8 @@ export class DialogEnergyWaterSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
+  @state() private _pickedDisplayUnit?: string | null;
+
   @state() private _water_units?: string[];
 
   @state() private _error?: string;
@@ -50,6 +55,11 @@ export class DialogEnergyWaterSettings
     this._source = params.source
       ? { ...params.source }
       : emptyWaterEnergyPreference();
+    this._pickedDisplayUnit = getDisplayUnit(
+      this.hass,
+      params.source?.stat_energy_from,
+      params.metadata
+    );
     this._costs = this._source.entity_energy_price
       ? "entity"
       : this._source.number_energy_price
@@ -69,6 +79,7 @@ export class DialogEnergyWaterSettings
     this._params = undefined;
     this._source = undefined;
     this._error = undefined;
+    this._pickedDisplayUnit = undefined;
     this._excludeList = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
     return true;
@@ -81,6 +92,10 @@ export class DialogEnergyWaterSettings
 
     const pickableUnit = this._water_units?.join(", ") || "";
 
+    const unitPriceSensor = this._pickedDisplayUnit
+      ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
+      : undefined;
+
     const unitPriceFixed = `${this.hass.config.currency}/${
       this.hass.config.unit_system.volume === "gal" ? "gal" : "m³"
     }`;
@@ -187,15 +202,9 @@ export class DialogEnergyWaterSettings
               .hass=${this.hass}
               include-domains='["sensor", "input_number"]'
               .value=${this._source.entity_energy_price}
-              .label=${this.hass.localize(
+              .label=${`${this.hass.localize(
                 "ui.panel.config.energy.water.dialog.cost_entity_input"
-              )}
-              .helper=${html`<ha-markdown
-                .content=${this.hass.localize(
-                  "ui.panel.config.energy.water.dialog.cost_entity_helper",
-                  { currency: this.hass.config.currency }
-                )}
-              ></ha-markdown>`}
+              )}${unitPriceSensor ? ` (${unitPriceSensor})` : ""}`}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
           : ""}
@@ -278,6 +287,16 @@ export class DialogEnergyWaterSettings
   }
 
   private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (ev.detail.value) {
+      const metadata = await getStatisticMetadata(this.hass, [ev.detail.value]);
+      this._pickedDisplayUnit = getDisplayUnit(
+        this.hass,
+        ev.detail.value,
+        metadata[0]
+      );
+    } else {
+      this._pickedDisplayUnit = undefined;
+    }
     if (isExternalStatistic(ev.detail.value) && this._costs !== "statistic") {
       this._costs = "no-costs";
     }

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

@@ -1012,6 +1012,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ? html`<ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
+                  .placeholder=${this._device?.area_id}
                   .disabled=${this.disabled}
                   @value-changed=${this._areaPicked}
                 ></ha-area-picker>`

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

@@ -53,11 +53,10 @@ import type {
   SelectionChangedEvent,
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-alert";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
+import "../../../components/ha-button-menu";
+import "../../../components/ha-check-list-item";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-domains";
 import "../../../components/ha-filter-floor-areas";
@@ -66,7 +65,8 @@ import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-menu";
+import "../../../components/ha-md-divider";
+import "../../../components/ha-md-menu-item";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -116,10 +116,8 @@ import { showAddIntegrationDialog } from "../integrations/show-add-integration-d
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { slugify } from "../../../common/string/slugify";
 
-export interface StateEntity extends Omit<
-  EntityRegistryEntry,
-  "id" | "unique_id"
-> {
+export interface StateEntity
+  extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
   readonly?: boolean;
   selectable?: boolean;
   id?: string;
@@ -782,14 +780,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -803,20 +801,22 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item>`;
+        </ha-md-menu-item>`;
       })}
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div></ha-md-menu-item
+      >`;
 
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .backPath=${this._searchParms.has("historyBack")
-          ? undefined
-          : "/config"}
+        .backPath=${
+          this._searchParms.has("historyBack") ? undefined : "/config"
+        }
         .route=${this.route}
         .tabs=${configSections.devices}
         .columns=${this._columns(this.hass.localize)}
@@ -826,14 +826,16 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           { number: filteredEntities.length }
         )}
         has-filters
-        .filters=${Object.values(this._filters).filter((filter) =>
-          Array.isArray(filter)
-            ? filter.length
-            : filter &&
-              Object.values(filter).some((val) =>
-                Array.isArray(val) ? val.length : val
-              )
-        ).length}
+        .filters=${
+          Object.values(this._filters).filter((filter) =>
+            Array.isArray(filter)
+              ? filter.length
+              : filter &&
+                Object.values(filter).some((val) =>
+                  Array.isArray(val) ? val.length : val
+                )
+          ).length
+        }
         selectable
         .selected=${this._selected.length}
         .initialGroupColumn=${this._activeGrouping ?? "device_full"}
@@ -860,127 +862,157 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
 
-        ${!this.narrow
-          ? html`<ha-dropdown slot="selection-bar">
-              <ha-assist-chip
-                slot="trigger"
-                .label=${this.hass.localize(
+
+${
+  !this.narrow
+    ? html`<ha-md-button-menu slot="selection-bar">
+        <ha-assist-chip
+          slot="trigger"
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.add_label"
+          )}
+        >
+          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
+        </ha-assist-chip>
+        ${labelItems}
+      </ha-md-button-menu>`
+    : nothing
+}
+<ha-md-button-menu has-overflow slot="selection-bar">
+  ${
+    this.narrow
+      ? html`<ha-assist-chip
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_action"
+          )}
+          slot="trigger"
+        >
+          <ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon>
+        </ha-assist-chip>`
+      : html`<ha-icon-button
+          .path=${mdiDotsVertical}
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_action"
+          )}
+          slot="trigger"
+        ></ha-icon-button>`
+  }
+    <ha-svg-icon
+      slot="trailing-icon"
+      .path=${mdiMenuDown}
+    ></ha-svg-icon
+  ></ha-assist-chip>
+  ${
+    this.narrow
+      ? html`<ha-sub-menu>
+            <ha-md-menu-item slot="item">
+              <div slot="headline">
+                ${this.hass.localize(
                   "ui.panel.config.automation.picker.bulk_actions.add_label"
                 )}
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>
-              ${labelItems}
-            </ha-dropdown>`
-          : nothing}
-        <ha-dropdown has-overflow slot="selection-bar">
-          ${this.narrow
-            ? html`<ha-assist-chip
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
+              </div>
+              <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
+          </ha-sub-menu>
+          <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+      : nothing
+  }
+
+  <ha-md-menu-item .clickAction=${this._enableSelected}>
+    <ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.enable_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+  <ha-md-menu-item .clickAction=${this._disableSelected}>
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiToggleSwitchOffOutline}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.disable_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+
+  <ha-md-menu-item .clickAction=${this._unhideSelected}>
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiEye}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.unhide_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+  <ha-md-menu-item .clickAction=${this._hideSelected}>
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiEyeOff}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.hide_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+
+  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+
+  <ha-md-menu-item .clickAction=${this._restoreEntityIdSelected}>
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiRestore}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.restore_entity_id_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+
+  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+
+  <ha-md-menu-item .clickAction=${this._removeSelected} class="warning">
+    <ha-svg-icon
+      slot="start"
+      .path=${mdiDelete}
+    ></ha-svg-icon>
+    <div slot="headline">
+      ${this.hass.localize(
+        "ui.panel.config.entities.picker.delete_selected.button"
+      )}
+    </div>
+  </ha-md-menu-item>
+
+</ha-md-button-menu>
+        ${
+          Array.isArray(this._filters.config_entry) &&
+          this._filters.config_entry.length
+            ? html`<ha-alert slot="filter-pane">
+                ${this.hass.localize(
+                  "ui.panel.config.entities.picker.filtering_by_config_entry"
                 )}
-                slot="trigger"
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>`
-            : html`<ha-icon-button
-                .path=${mdiDotsVertical}
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              ></ha-icon-button>`}
-          ${this.narrow
-            ? html`<ha-sub-menu>
-                  <ha-dropdown-item slot="item">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
-                    )}
-                    <ha-svg-icon
-                      slot="details"
-                      .path=${mdiChevronRight}
-                    ></ha-svg-icon>
-                  </ha-dropdown-item>
-                  <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-                </ha-sub-menu>
-                <wa-divider></wa-divider>`
-            : nothing}
-
-          <ha-dropdown-item .clickAction=${this._enableSelected}>
-            <ha-svg-icon slot="icon" .path=${mdiToggleSwitch}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.enable_selected.button"
-            )}
-          </ha-dropdown-item>
-          <ha-dropdown-item .clickAction=${this._disableSelected}>
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiToggleSwitchOffOutline}
-            ></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.disable_selected.button"
-            )}
-          </ha-dropdown-item>
-          <wa-divider></wa-divider>
-
-          <ha-dropdown-item .clickAction=${this._unhideSelected}>
-            <ha-svg-icon slot="icon" .path=${mdiEye}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.unhide_selected.button"
-            )}
-          </ha-dropdown-item>
-          <ha-dropdown-item .clickAction=${this._hideSelected}>
-            <ha-svg-icon slot="icon" .path=${mdiEyeOff}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.hide_selected.button"
-            )}
-          </ha-dropdown-item>
-
-          <wa-divider></wa-divider>
-
-          <ha-dropdown-item .clickAction=${this._restoreEntityIdSelected}>
-            <ha-svg-icon slot="icon" .path=${mdiRestore}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.restore_entity_id_selected.button"
-            )}
-          </ha-dropdown-item>
-
-          <wa-divider></wa-divider>
-
-          <ha-dropdown-item
-            .clickAction=${this._removeSelected}
-            variant="danger"
-          >
-            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.entities.picker.delete_selected.button"
-            )}
-          </ha-dropdown-item>
-        </ha-dropdown>
-        ${Array.isArray(this._filters.config_entry) &&
-        this._filters.config_entry.length
-          ? html`<ha-alert slot="filter-pane">
-              ${this.hass.localize(
-                "ui.panel.config.entities.picker.filtering_by_config_entry"
-              )}
-              ${this._entries?.find(
-                (entry) => entry.entry_id === this._filters.config_entry![0]
-              )?.title || this._filters.config_entry[0]}${this._filters
-                .config_entry.length === 1 &&
-              Array.isArray(this._filters.sub_entry) &&
-              this._filters.sub_entry.length
-                ? html` (${this._subEntries?.find(
-                    (entry) => entry.subentry_id === this._filters.sub_entry![0]
-                  )?.title || this._filters.sub_entry[0]})`
-                : nothing}
-            </ha-alert>`
-          : nothing}
+                ${this._entries?.find(
+                  (entry) => entry.entry_id === this._filters.config_entry![0]
+                )?.title || this._filters.config_entry[0]}${this._filters
+                  .config_entry.length === 1 &&
+                Array.isArray(this._filters.sub_entry) &&
+                this._filters.sub_entry.length
+                  ? html` (${this._subEntries?.find(
+                      (entry) =>
+                        entry.subentry_id === this._filters.sub_entry![0]
+                    )?.title || this._filters.sub_entry[0]})`
+                  : nothing}
+              </ha-alert>`
+            : nothing
+        }
         <ha-filter-floor-areas
           .hass=${this.hass}
           type="entity"
@@ -1041,16 +1073,20 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-labels>
-        ${includeAddDeviceFab
-          ? html`<ha-fab
-              .label=${this.hass.localize("ui.panel.config.devices.add_device")}
-              extended
-              @click=${this._addDevice}
-              slot="fab"
-            >
-              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-            </ha-fab>`
-          : nothing}
+        ${
+          includeAddDeviceFab
+            ? html`<ha-fab
+                .label=${this.hass.localize(
+                  "ui.panel.config.devices.add_device"
+                )}
+                extended
+                @click=${this._addDevice}
+                slot="fab"
+              >
+                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+              </ha-fab>`
+            : nothing
+        }
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1574,7 +1610,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -530,7 +530,9 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zha: {
         tag: "zha-config-dashboard-router",
         load: () =>
-          import("./integrations/integration-panels/zha/zha-config-dashboard-router"),
+          import(
+            "./integrations/integration-panels/zha/zha-config-dashboard-router"
+          ),
       },
       mqtt: {
         tag: "mqtt-config-panel",
@@ -540,22 +542,30 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zwave_js: {
         tag: "zwave_js-config-router",
         load: () =>
-          import("./integrations/integration-panels/zwave_js/zwave_js-config-router"),
+          import(
+            "./integrations/integration-panels/zwave_js/zwave_js-config-router"
+          ),
       },
       matter: {
         tag: "matter-config-panel",
         load: () =>
-          import("./integrations/integration-panels/matter/matter-config-panel"),
+          import(
+            "./integrations/integration-panels/matter/matter-config-panel"
+          ),
       },
       thread: {
         tag: "thread-config-panel",
         load: () =>
-          import("./integrations/integration-panels/thread/thread-config-panel"),
+          import(
+            "./integrations/integration-panels/thread/thread-config-panel"
+          ),
       },
       bluetooth: {
         tag: "bluetooth-config-dashboard-router",
         load: () =>
-          import("./integrations/integration-panels/bluetooth/bluetooth-config-dashboard-router"),
+          import(
+            "./integrations/integration-panels/bluetooth/bluetooth-config-dashboard-router"
+          ),
       },
       dhcp: {
         tag: "dhcp-config-panel",
@@ -570,7 +580,9 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) {
       zeroconf: {
         tag: "zeroconf-config-panel",
         load: () =>
-          import("./integrations/integration-panels/zeroconf/zeroconf-config-panel"),
+          import(
+            "./integrations/integration-panels/zeroconf/zeroconf-config-panel"
+          ),
       },
       application_credentials: {
         tag: "ha-config-application-credentials",

src/panels/config/helpers/forms/dialog-schedule-block-info.ts

@@ -1,7 +1,7 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import memoizeOne from "memoize-one";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-form/ha-form";
@@ -14,7 +14,6 @@ import type {
 } from "./show-dialog-schedule-block-info";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 
-@customElement("dialog-schedule-block-info")
 class DialogScheduleBlockInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -157,3 +156,5 @@ declare global {
     "dialog-schedule-block-info": DialogScheduleBlockInfo;
   }
 }
+
+customElements.define("dialog-schedule-block-info", DialogScheduleBlockInfo);

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

@@ -47,15 +47,11 @@ import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-entities";
 import "../../../components/ha-filter-floor-areas";
-import "@home-assistant/webawesome/dist/components/divider/divider";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-md-menu";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-state-icon";
-import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
 import type { CategoryRegistryEntry } from "../../../data/category_registry";
@@ -608,25 +604,29 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
     const categoryItems = html`${this._categories?.map(
         (category) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${category.category_id}
             .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
-              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
-            ${category.name}
-          </ha-dropdown-item>`
+              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
+            <div slot="headline">${category.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        ${this.hass.localize(
-          "ui.panel.config.automation.picker.bulk_actions.no_category"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateCategory}>
-        ${this.hass.localize("ui.panel.config.category.editor.add")}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.no_category"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.category.editor.add")}
+        </div>
+      </ha-md-menu-item>`;
     const labelItems = html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
         const selected = this._selected.every((entityId) =>
@@ -637,14 +637,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this._labelsForEntity(entityId).includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -658,11 +658,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item> `;
-      })}<wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+        </ha-md-menu-item> `;
+      })}<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div>
+      </ha-md-menu-item>`;
     const labelsInOverflow =
       (this._sizeController.value && this._sizeController.value < 700) ||
       (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -764,7 +766,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         ></ha-filter-categories>
 
         ${!this.narrow
-          ? html`<ha-dropdown slot="selection-bar">
+          ? html`<ha-md-button-menu slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -777,10 +779,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-assist-chip>
                 ${categoryItems}
-              </ha-dropdown>
+              </ha-md-button-menu>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -793,11 +795,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${labelItems}
-                  </ha-dropdown>`}`
+                  </ha-md-button-menu>`}`
           : nothing}
         ${this.narrow || labelsInOverflow
-          ? html` <ha-dropdown has-overflow slot="selection-bar">
-              ${this.narrow
+          ? html`
+          <ha-md-button-menu has-overflow slot="selection-bar">
+            ${
+              this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -815,36 +819,50 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`}
-              ${this.narrow
+                  ></ha-icon-button>`
+            }
+              <ha-svg-icon
+                slot="trailing-icon"
+                .path=${mdiMenuDown}
+              ></ha-svg-icon
+            ></ha-assist-chip>
+            ${
+              this.narrow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.move_category"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-              ${this.narrow || this.hass.dockedSidebar === "docked"
+                : nothing
+            }
+            ${
+              this.narrow || this.hass.dockedSidebar === "docked"
                 ? html` <ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-            </ha-dropdown>`
+                : nothing
+            }
+          </ha-md-button-menu>`
           : nothing}
 
         <ha-integration-overflow-menu
@@ -1398,7 +1416,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

@@ -1,6 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -15,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import type { IssueCommandServiceData } from "./types";
 
-@customElement("zha-cluster-commands")
 export class ZHAClusterCommands extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
@@ -260,3 +259,5 @@ declare global {
     "zha-cluster-commands": ZHAClusterCommands;
   }
 }
+
+customElements.define("zha-cluster-commands", ZHAClusterCommands);

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -192,9 +192,9 @@ export class ZHAGroupBindingControl extends LitElement {
   private get _canBind(): boolean {
     return Boolean(
       this._groupToBind &&
-      this._clustersToBind &&
-      this._clustersToBind?.length > 0 &&
-      this.device
+        this._clustersToBind &&
+        this._clustersToBind?.length > 0 &&
+        this.device
     );
   }
 

src/panels/config/logs/dialog-system-log-detail.ts

@@ -1,7 +1,7 @@
 import { mdiClose, mdiContentCopy } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-alert";
@@ -26,7 +26,6 @@ import { showToast } from "../../../util/toast";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
 
-@customElement("dialog-system-log-detail")
 class DialogSystemLogDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -273,3 +272,5 @@ declare global {
     "dialog-system-log-detail": DialogSystemLogDetail;
   }
 }
+
+customElements.define("dialog-system-log-detail", DialogSystemLogDetail);

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

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

src/panels/config/person/dialog-person-detail.ts

@@ -1,7 +1,7 @@
 import { mdiPencil } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entities-picker";
@@ -43,7 +43,6 @@ const cropOptions: CropOptions = {
   aspectRatio: 1,
 };
 
-@customElement("dialog-person-detail")
 class DialogPersonDetail extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -568,3 +567,5 @@ declare global {
     "dialog-person-detail": DialogPersonDetail;
   }
 }
+
+customElements.define("dialog-person-detail", DialogPersonDetail);

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

@@ -24,7 +24,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
-import { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time";
+import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -52,10 +52,9 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "@home-assistant/webawesome/dist/components/divider/divider";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-md-menu";
+import "../../../components/ha-md-menu-item";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
@@ -302,21 +301,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             const date = new Date(scene.state);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
-            const formattedTime = formatShortDateTimeWithConditionalYear(
-              date,
-              this.hass.locale,
-              this.hass.config
-            );
-            const elementId = "last-activated-" + slugify(scene.entity_id);
             return html`
               ${dayDifference > 3
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}
-                      >${relativeTime(date, this.hass.locale)}</span
-                    >
-                  `}
+                ? formatShortDateTime(date, this.hass.locale, this.hass.config)
+                : relativeTime(date, this.hass.locale)}
             `;
           },
         },
@@ -438,25 +426,29 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   protected render(): TemplateResult {
     const categoryItems = html`${this._categories?.map(
         (category) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${category.category_id}
             .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
-              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
-            ${category.name}
-          </ha-dropdown-item>`
+              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
+            <div slot="headline">${category.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        ${this.hass.localize(
-          "ui.panel.config.automation.picker.bulk_actions.no_category"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateCategory}>
-        ${this.hass.localize("ui.panel.config.category.editor.add")}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.no_category"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.category.editor.add")}
+        </div>
+      </ha-md-menu-item>`;
 
     const labelItems = html` ${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
@@ -468,14 +460,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -489,39 +481,45 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item>`;
+        </ha-md-menu-item>`;
       })}
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div></ha-md-menu-item
+      >`;
 
     const areaItems = html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${area.area_id}
             .clickAction=${this._handleBulkArea}
           >
             ${area.icon
-              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="icon"
+                  slot="start"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            ${area.name}
-          </ha-dropdown-item>`
+            <div slot="headline">${area.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.no_area"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.add_area"
-        )}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.no_area"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.add_area"
+          )}
+        </div>
+      </ha-md-menu-item>`;
 
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
@@ -645,7 +643,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         ></ha-filter-categories>
 
         ${!this.narrow
-          ? html`<ha-dropdown slot="selection-bar">
+          ? html`<ha-md-button-menu slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -658,10 +656,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-assist-chip>
                 ${categoryItems}
-              </ha-dropdown>
+              </ha-md-button-menu>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -674,10 +672,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${labelItems}
-                  </ha-dropdown>`}
+                  </ha-md-button-menu>`}
               ${areasInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -690,11 +688,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${areaItems}
-                  </ha-dropdown>`}`
+                  </ha-md-button-menu>`}`
           : nothing}
         ${this.narrow || areasInOverflow
-          ? html` <ha-dropdown has-overflow slot="selection-bar">
-              ${this.narrow
+          ? html`
+          <ha-md-button-menu has-overflow slot="selection-bar">
+            ${
+              this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -712,50 +712,68 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`}
-              ${this.narrow
+                  ></ha-icon-button>`
+            }
+              <ha-svg-icon
+                slot="trailing-icon"
+                .path=${mdiMenuDown}
+              ></ha-svg-icon
+            ></ha-assist-chip>
+            ${
+              this.narrow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.move_category"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-              ${this.narrow || labelsInOverflow
+                : nothing
+            }
+            ${
+              this.narrow || labelsInOverflow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-              ${this.narrow || areasInOverflow
+                : nothing
+            }
+            ${
+              this.narrow || areasInOverflow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.devices.picker.bulk_actions.move_area"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-            </ha-dropdown>`
+                : nothing
+            }
+          </ha-md-button-menu>`
           : nothing}
         ${!this.scenes.length
           ? html`<div class="empty" slot="empty">
@@ -1202,7 +1220,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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

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

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,
@@ -22,21 +21,20 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { 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,13 +73,12 @@ 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(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
 ) {
@@ -242,10 +240,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 +248,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 +382,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 +687,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 +1154,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 +1244,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 +1260,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;
         }
@@ -1295,6 +1278,8 @@ export class HaScriptEditor extends SubscribeMixin(
   }
 }
 
+customElements.define("ha-script-editor", HaScriptEditor);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-script-editor": HaScriptEditor;

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-picker.ts

@@ -33,8 +33,6 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
-import { slugify } from "../../../common/string/slugify";
-import "../../../components/ha-tooltip";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import {
   hasRejectedItems,
@@ -53,13 +51,12 @@ import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-entities";
 import "../../../components/ha-filter-floor-areas";
-import "@home-assistant/webawesome/dist/components/divider/divider";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-md-menu";
+import "../../../components/ha-md-menu-item";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@@ -305,27 +302,19 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           sortable: true,
           title: localize("ui.card.automation.last_triggered"),
           template: (script) => {
-            if (!script.last_triggered) {
-              return this.hass.localize("ui.components.relative_time.never");
-            }
             const date = new Date(script.last_triggered);
             const now = new Date();
             const dayDifference = differenceInDays(now, date);
-            const formattedTime = formatShortDateTimeWithConditionalYear(
-              date,
-              this.hass.locale,
-              this.hass.config
-            );
-            const elementId = "last-triggered-" + slugify(script.entity_id);
             return html`
-              ${dayDifference > 3
-                ? formattedTime
-                : html`
-                    <ha-tooltip for=${elementId}>${formattedTime}</ha-tooltip>
-                    <span id=${elementId}
-                      >${relativeTime(date, this.hass.locale)}</span
-                    >
-                  `}
+              ${script.last_triggered
+                ? dayDifference > 3
+                  ? formatShortDateTimeWithConditionalYear(
+                      date,
+                      this.hass.locale,
+                      this.hass.config
+                    )
+                  : relativeTime(date, this.hass.locale)
+                : this.hass.localize("ui.components.relative_time.never")}
             `;
           },
         },
@@ -423,25 +412,28 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   protected render(): TemplateResult {
     const categoryItems = html`${this._categories?.map(
         (category) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${category.category_id}
             .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
-              ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
-              : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
-            ${category.name}
-          </ha-dropdown-item>`
+              ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
+              : html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
+            <div slot="headline">${category.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkCategory}>
-        ${this.hass.localize(
-          "ui.panel.config.automation.picker.bulk_actions.no_category"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateCategory}>
-        ${this.hass.localize("ui.panel.config.category.editor.add")}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.automation.picker.bulk_actions.no_category"
+          )}
+        </div> </ha-md-menu-item
+      ><ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.category.editor.add")}
+        </div>
+      </ha-md-menu-item>`;
 
     const labelItems = html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
@@ -453,17 +445,17 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           this._selected.some((entityId) =>
             this.hass.entities[entityId]?.labels.includes(label.label_id)
           );
-        return html`<ha-dropdown-item
+        return html`<ha-md-menu-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
+          reducedTouchTarget
         >
           <ha-checkbox
-            slot="icon"
+            slot="start"
             .checked=${selected}
             .indeterminate=${partial}
-            reducedTouchTarget
           ></ha-checkbox>
           <ha-label
             style=${color ? `--color: ${color}` : ""}
@@ -474,39 +466,45 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-dropdown-item>`;
+        </ha-md-menu-item>`;
       })}
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
-        ${this.hass.localize("ui.panel.config.labels.add_label")}
-      </ha-dropdown-item>`;
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
+        <div slot="headline">
+          ${this.hass.localize("ui.panel.config.labels.add_label")}
+        </div></ha-md-menu-item
+      >`;
 
     const areaItems = html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-dropdown-item
+          html`<ha-md-menu-item
             .value=${area.area_id}
             .clickAction=${this._handleBulkArea}
           >
             ${area.icon
-              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="icon"
+                  slot="start"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            ${area.name}
-          </ha-dropdown-item>`
+            <div slot="headline">${area.name}</div>
+          </ha-md-menu-item>`
       )}
-      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.no_area"
-        )}
-      </ha-dropdown-item>
-      <wa-divider></wa-divider>
-      <ha-dropdown-item .clickAction=${this._bulkCreateArea}>
-        ${this.hass.localize(
-          "ui.panel.config.devices.picker.bulk_actions.add_area"
-        )}
-      </ha-dropdown-item>`;
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.no_area"
+          )}
+        </div>
+      </ha-md-menu-item>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
+        <div slot="headline">
+          ${this.hass.localize(
+            "ui.panel.config.devices.picker.bulk_actions.add_area"
+          )}
+        </div>
+      </ha-md-menu-item>`;
 
     const areasInOverflow =
       (this._sizeController.value && this._sizeController.value < 900) ||
@@ -639,7 +637,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         ></ha-filter-blueprints>
 
         ${!this.narrow
-          ? html`<ha-dropdown slot="selection-bar">
+          ? html`<ha-md-button-menu slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -652,10 +650,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-assist-chip>
                 ${categoryItems}
-              </ha-dropdown>
+              </ha-md-button-menu>
               ${labelsInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -668,10 +666,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${labelItems}
-                  </ha-dropdown>`}
+                  </ha-md-button-menu>`}
               ${areasInOverflow
                 ? nothing
-                : html`<ha-dropdown slot="selection-bar">
+                : html`<ha-md-button-menu slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -684,11 +682,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${areaItems}
-                  </ha-dropdown>`}`
+                  </ha-md-button-menu>`}`
           : nothing}
         ${this.narrow || areasInOverflow
-          ? html` <ha-dropdown has-overflow slot="selection-bar">
-              ${this.narrow
+          ? html`
+          <ha-md-button-menu has-overflow slot="selection-bar">
+            ${
+              this.narrow
                 ? html`<ha-assist-chip
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.picker.bulk_action"
@@ -706,50 +706,68 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                       "ui.panel.config.automation.picker.bulk_action"
                     )}
                     slot="trigger"
-                  ></ha-icon-button>`}
-              ${this.narrow
+                  ></ha-icon-button>`
+            }
+              <ha-svg-icon
+                slot="trailing-icon"
+                .path=${mdiMenuDown}
+              ></ha-svg-icon
+            ></ha-assist-chip>
+            ${
+              this.narrow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.move_category"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.move_category"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${categoryItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-              ${this.narrow || labelsInOverflow
+                : nothing
+            }
+            ${
+              this.narrow || labelsInOverflow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.bulk_actions.add_label"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-              ${this.narrow || areasInOverflow
+                : nothing
+            }
+            ${
+              this.narrow || areasInOverflow
                 ? html`<ha-sub-menu>
-                    <ha-dropdown-item slot="item">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.devices.picker.bulk_actions.move_area"
+                        )}
+                      </div>
                       <ha-svg-icon
-                        slot="details"
+                        slot="end"
                         .path=${mdiChevronRight}
                       ></ha-svg-icon>
-                    </ha-dropdown-item>
+                    </ha-md-menu-item>
                     <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
                   </ha-sub-menu>`
-                : nothing}
-            </ha-dropdown>`
+                : nothing
+            }
+          </ha-md-button-menu>`
           : nothing}
         ${!this.scripts.length
           ? html` <div class="empty" slot="empty">
@@ -1294,7 +1312,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown ha-assist-chip {
+        ha-md-button-menu ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {

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/cloud-alexa-pref.ts

@@ -1,6 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
@@ -20,7 +20,6 @@ import {
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 
-@customElement("cloud-alexa-pref")
 export class CloudAlexaPref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -298,3 +297,5 @@ declare global {
     "cloud-alexa-pref": CloudAlexaPref;
   }
 }
+
+customElements.define("cloud-alexa-pref", CloudAlexaPref);

src/panels/config/voice-assistants/cloud-google-pref.ts

@@ -1,6 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
@@ -23,7 +23,6 @@ import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 
-@customElement("cloud-google-pref")
 export class CloudGooglePref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -368,3 +367,5 @@ declare global {
     "cloud-google-pref": CloudGooglePref;
   }
 }
+
+customElements.define("cloud-google-pref", CloudGooglePref);

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -19,7 +19,6 @@ const SCHEMA = [
   },
 ];
 
-@customElement("dialog-home-zone-detail")
 class DialogHomeZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -152,3 +151,5 @@ declare global {
     "dialog-home-zone-detail": DialogHomeZoneDetail;
   }
 }
+
+customElements.define("dialog-home-zone-detail", DialogHomeZoneDetail);

src/panels/config/zone/dialog-zone-detail.ts

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
@@ -14,7 +14,6 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
 
-@customElement("dialog-zone-detail")
 class DialogZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -242,3 +241,5 @@ declare global {
     "dialog-zone-detail": DialogZoneDetail;
   }
 }
+
+customElements.define("dialog-zone-detail", DialogZoneDetail);

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

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { property } from "lit/decorators";
 import type { NavigateOptions } from "../../common/navigate";
 import { navigate } from "../../common/navigate";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -22,7 +22,6 @@ declare global {
   }
 }
 
-@customElement("ha-panel-custom")
 export class HaPanelCustom extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -172,3 +171,5 @@ export class HaPanelCustom extends ReactiveElement {
     iframeDoc.close();
   }
 }
+
+customElements.define("ha-panel-custom", HaPanelCustom);

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

@@ -1,7 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import type { HassService } from "home-assistant-js-websocket";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
-import { dump, load } from "js-yaml";
+import { load } from "js-yaml";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -320,10 +320,7 @@ class HaPanelDevAction extends LitElement {
                         ${this.hass.localize(
                           `component.${domain}.services.${serviceName}.fields.${field.key}.example`,
                           descriptionPlaceholders
-                        ) ||
-                        (typeof field.example === "object"
-                          ? html`<pre>${dump(field.example)}</pre>`
-                          : field.example)}
+                        ) || field.example}
                       </td>
                     </tr>`
                 )}

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

@@ -547,9 +547,9 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
     } else if (this._sortDirection === "asc") {
       this._sortDirection = "desc";
     } else {
-      this._sortDirection = "asc";
+      this._sortDirection = null;
     }
-    this._sortColumn = columnId;
+    this._sortColumn = this._sortDirection === null ? undefined : columnId;
   }
 
   private _handleGroupBy(ev) {

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -2,10 +2,10 @@ import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
 import { getEnergyDataCollection } from "../../../data/energy";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { HomeAssistant } from "../../../types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
 @customElement("energy-overview-view-strategy")

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

@@ -12,7 +12,7 @@ import type {
 } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { storage } from "../../common/decorators/storage";
@@ -52,7 +52,6 @@ import type { HomeAssistant } from "../../types";
 import { fileDownload } from "../../util/file_download";
 import { addEntitiesToLovelaceView } from "../lovelace/editor/add-entities-to-view";
 
-@customElement("ha-panel-history")
 class HaPanelHistory extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
@@ -680,6 +679,8 @@ class HaPanelHistory extends LitElement {
   }
 }
 
+customElements.define("ha-panel-history", HaPanelHistory);
+
 declare global {
   interface HTMLElementTagNameMap {
     "ha-panel-history": HaPanelHistory;

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -62,7 +62,9 @@ class HuiAlarmModeCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-alarm-modes-card-feature-editor");
+    await import(
+      "../editor/config-elements/hui-alarm-modes-card-feature-editor"
+    );
     return document.createElement("hui-alarm-modes-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -142,7 +142,9 @@ class HuiAreaControlsCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-area-controls-card-feature-editor");
+    await import(
+      "../editor/config-elements/hui-area-controls-card-feature-editor"
+    );
     return document.createElement("hui-area-controls-card-feature-editor");
   }
 

src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts

@@ -71,7 +71,9 @@ class HuiClimateFanModesCardFeature
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-climate-fan-modes-card-feature-editor");
+    await import(
+      "../editor/config-elements/hui-climate-fan-modes-card-feature-editor"
+    );
     return document.createElement("hui-climate-fan-modes-card-feature-editor");
   }