Bumped version to 20251126.0

.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

build-scripts/gulp/translations.js

@@ -156,9 +156,7 @@ const createTestTranslation = () =>
  */
 const createMasterTranslation = () =>
   gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])], {
-      allowEmpty: true,
-    })
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
     .pipe(gulp.dest(workDir));

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!)
     );

demo/src/stubs/energy.ts

@@ -44,24 +44,18 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
               number_energy_price: null,
             },
           ],
-          power: [
-            { stat_rate: "sensor.power_grid" },
-            { stat_rate: "sensor.power_grid_return" },
-          ],
           cost_adjustment_day: 0,
         },
         {
           type: "solar",
           stat_energy_from: "sensor.solar_production",
-          stat_rate: "sensor.power_solar",
           config_entry_solar_forecast: ["solar_forecast"],
         },
-        {
+        /*         {
           type: "battery",
           stat_energy_from: "sensor.battery_output",
           stat_energy_to: "sensor.battery_input",
-          stat_rate: "sensor.power_battery",
-        },
+        }, */
         {
           type: "gas",
           stat_energy_from: "sensor.energy_gas",
@@ -69,48 +63,28 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           entity_energy_price: null,
           number_energy_price: null,
         },
-        {
-          type: "water",
-          stat_energy_from: "sensor.energy_water",
-          stat_cost: "sensor.energy_water_cost",
-          entity_energy_price: null,
-          number_energy_price: null,
-        },
       ],
       device_consumption: [
         {
           stat_consumption: "sensor.energy_car",
-          stat_rate: "sensor.power_car",
         },
         {
           stat_consumption: "sensor.energy_ac",
-          stat_rate: "sensor.power_ac",
         },
         {
           stat_consumption: "sensor.energy_washing_machine",
-          stat_rate: "sensor.power_washing_machine",
         },
         {
           stat_consumption: "sensor.energy_dryer",
-          stat_rate: "sensor.power_dryer",
         },
         {
           stat_consumption: "sensor.energy_heat_pump",
-          stat_rate: "sensor.power_heat_pump",
         },
         {
           stat_consumption: "sensor.energy_boiler",
-          stat_rate: "sensor.power_boiler",
-        },
-      ],
-      device_consumption_water: [
-        {
-          stat_consumption: "sensor.water_kitchen",
-        },
-        {
-          stat_consumption: "sensor.water_garden",
         },
       ],
+      device_consumption_water: [],
     })
   );
   hass.mockWS(

demo/src/stubs/entities.ts

@@ -154,38 +154,6 @@ export const energyEntities = () =>
         unit_of_measurement: "EUR",
       },
     },
-    "sensor.power_grid": {
-      entity_id: "sensor.power_grid",
-      state: "500",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_grid_return": {
-      entity_id: "sensor.power_grid_return",
-      state: "-100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_solar": {
-      entity_id: "sensor.power_solar",
-      state: "200",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_battery": {
-      entity_id: "sensor.power_battery",
-      state: "100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
     "sensor.energy_gas_cost": {
       entity_id: "sensor.energy_gas_cost",
       state: "2",
@@ -203,15 +171,6 @@ export const energyEntities = () =>
         unit_of_measurement: "m³",
       },
     },
-    "sensor.energy_water": {
-      entity_id: "sensor.energy_water",
-      state: "4000",
-      attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
-        friendly_name: "Water",
-        unit_of_measurement: "L",
-      },
-    },
     "sensor.energy_car": {
       entity_id: "sensor.energy_car",
       state: "4",
@@ -266,58 +225,4 @@ export const energyEntities = () =>
         unit_of_measurement: "kWh",
       },
     },
-    "sensor.power_car": {
-      entity_id: "sensor.power_car",
-      state: "40",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Electric car",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_ac": {
-      entity_id: "sensor.power_ac",
-      state: "30",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Air conditioning",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_washing_machine": {
-      entity_id: "sensor.power_washing_machine",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Washing machine",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_dryer": {
-      entity_id: "sensor.power_dryer",
-      state: "55",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Dryer",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_heat_pump": {
-      entity_id: "sensor.power_heat_pump",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Heat pump",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_boiler": {
-      entity_id: "sensor.power_boiler",
-      state: "70",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Boiler",
-        unit_of_measurement: "W",
-      },
-    },
   });

demo/src/stubs/recorder.ts

@@ -17,15 +17,17 @@ const generateMeanStatistics = (
   end: Date,
   // eslint-disable-next-line default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
   maxDiff: number
 ): StatisticValue[] => {
   const statistics: StatisticValue[] = [];
   let currentDate = new Date(start);
   currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
     const delta = Math.random() * maxDiff;
-    const mean = delta;
+    const mean = lastVal + delta;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -36,6 +38,7 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
+    lastVal = mean;
     currentDate =
       period === "day"
         ? addDays(currentDate, 1)
@@ -333,6 +336,7 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   start,
                   end,
                   period,
+                  state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );
         }

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

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

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      = "20251126.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/auth/token_storage.ts

@@ -1,6 +1,5 @@
 import type { AuthData } from "home-assistant-js-websocket";
 import { extractSearchParam } from "../url/search-params";
-import { hassUrl } from "../../data/auth";
 
 declare global {
   interface Window {
@@ -31,11 +30,7 @@ export function askWrite() {
 export function saveTokens(tokens: AuthData | null) {
   tokenCache.tokens = tokens;
 
-  if (
-    !tokenCache.writeEnabled &&
-    (extractSearchParam("storeToken") === "true" ||
-      hassUrl !== `${location.protocol}//${location.host}`)
-  ) {
+  if (!tokenCache.writeEnabled && extractSearchParam("storeToken") === "true") {
     tokenCache.writeEnabled = true;
   }
 

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/ha-chart-base.ts

@@ -593,7 +593,6 @@ export class HaChartBase extends LitElement {
     }
     const options = {
       animation: !this._reducedMotion,
-      animationDuration: 500,
       darkMode: this._themes.darkMode ?? false,
       aria: { show: true },
       dataZoom: this._getDataZoomConfig(),

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

@@ -167,7 +167,6 @@ export class HaSankeyChart extends LitElement {
         curveness: 0.5,
       },
       layoutIterations: 0,
-      animationDuration: 500,
       label: {
         formatter: (params) =>
           data.nodes.find((node) => node.id === (params.data as Node).id)
@@ -280,7 +279,6 @@ export class HaSankeyChart extends LitElement {
     :host {
       display: block;
       flex: 1;
-      max-width: 100%;
       background: var(--ha-card-background, var(--card-background-color));
     }
     ha-chart-base {

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/chart/state-history-chart-timeline.ts

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

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/device/ha-device-picker.ts

@@ -216,9 +216,6 @@ export class HaDevicePicker extends LitElement {
         .getItems=${this._getItems}
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.device-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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

@@ -288,13 +288,10 @@ export class HaEntityPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
+        @value-changed=${this._valueChanged}
         .addButtonLabel=${this.addButton
           ? this.hass.localize("ui.components.entity.entity-picker.add")
           : undefined}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.entity.entity-picker.unknown"
-        )}
-        @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
     `;

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

@@ -475,9 +475,6 @@ export class HaStatisticPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .helper=${this.helper}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.statistic-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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

@@ -379,9 +379,6 @@ export class HaAreaPicker extends LitElement {
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
         .addButtonLabel=${this.addButtonLabel}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.area-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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

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

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

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

src/components/ha-assist-chat.ts

@@ -659,7 +659,6 @@ export class HaAssistChat extends LitElement {
       --markdown-table-border-color: var(--divider-color);
       --markdown-code-background-color: var(--primary-background-color);
       --markdown-code-text-color: var(--primary-text-color);
-      --markdown-list-indent: 1rem;
       &:not(:has(ha-markdown-element)) {
         min-height: 1lh;
         min-width: 1lh;

src/components/ha-bottom-sheet.ts

@@ -21,8 +21,7 @@ export class HaBottomSheet extends LitElement {
 
   private _isDragging = false;
 
-  private _handleAfterHide(afterHideEvent: Event) {
-    afterHideEvent.stopPropagation();
+  private _handleAfterHide() {
     this.open = false;
     const ev = new Event("closed", {
       bubbles: true,

src/components/ha-control-select.ts

@@ -202,7 +202,6 @@ export class HaControlSelect extends LitElement {
       color: var(--primary-text-color);
       user-select: none;
       -webkit-tap-highlight-color: transparent;
-      border-radius: var(--control-select-border-radius);
     }
     :host([vertical]) {
       width: var(--control-select-thickness);
@@ -212,6 +211,7 @@ export class HaControlSelect extends LitElement {
       position: relative;
       height: 100%;
       width: 100%;
+      border-radius: var(--control-select-border-radius);
       transform: translateZ(0);
       display: flex;
       flex-direction: row;

src/components/ha-filter-labels.ts

@@ -167,33 +167,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
   }
 
   private async _labelSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    if (!ev.detail.index.size) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const value: string[] = [];
     const filteredLabels = this._filteredLabels(
       this._labels,
       this._filter,
       this.value
     );
 
-    const filteredLabelIds = new Set(filteredLabels.map((l) => l.label_id));
-
-    // Keep previously selected labels that are not in the current filtered view
-    const preservedLabels = (this.value || []).filter(
-      (id) => !filteredLabelIds.has(id)
-    );
-
-    // Build the new selection from the filtered labels based on selected indices
-    const newlySelectedLabels: string[] = [];
     for (const index of ev.detail.index) {
-      const labelId = filteredLabels[index]?.label_id;
-      if (labelId) {
-        newlySelectedLabels.push(labelId);
-      }
+      const labelId = filteredLabels[index].label_id;
+      value.push(labelId);
     }
-
-    const value = [...preservedLabels, ...newlySelectedLabels];
-    this.value = value.length ? value : [];
+    this.value = value;
 
     fireEvent(this, "data-table-filter-changed", {
-      value: value.length ? value : undefined,
+      value,
       items: undefined,
     });
   }

src/components/ha-floor-picker.ts

@@ -393,9 +393,6 @@ export class HaFloorPicker extends LitElement {
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
         .rowRenderer=${this._rowRenderer}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.floor-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-generic-picker.ts

@@ -4,7 +4,6 @@ import { mdiPlaylistPlus } from "@mdi/js";
 import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -108,8 +107,6 @@ export class HaGenericPicker extends LitElement {
 
   @property({ attribute: "selected-section" }) public selectedSection?: string;
 
-  @property({ attribute: "unknown-item-text" }) public unknownItemText;
-
   @query(".container") private _containerElement?: HTMLDivElement;
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -159,8 +156,6 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  .unknown=${this._unknownValue(this.value, this.getItems)}
-                  .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
                   @clear=${this._clear}
@@ -238,16 +233,6 @@ export class HaGenericPicker extends LitElement {
     `;
   }
 
-  private _unknownValue = memoizeOne(
-    (value?: string, getItems?: () => any[]) => {
-      if (value === undefined || !getItems) {
-        return false;
-      }
-
-      return !getItems().some((item) => item.id === value);
-    }
-  );
-
   private _renderHelper() {
     return this.helper
       ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -263,7 +248,7 @@ export class HaGenericPicker extends LitElement {
     });
   };
 
-  private _hidePicker(ev: Event) {
+  private _hidePicker(ev) {
     ev.stopPropagation();
     if (this._newValue) {
       fireEvent(this, "value-changed", { value: this._newValue });

src/components/ha-language-picker.ts

@@ -73,8 +73,6 @@ export class HaLanguagePicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property() public helper?: string;
-
   @property({ attribute: "native-name", type: Boolean })
   public nativeName = false;
 
@@ -137,7 +135,6 @@ export class HaLanguagePicker extends LitElement {
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}
-        .helper=${this.helper}
         .getItems=${this._getItems}
         @value-changed=${this._changed}
         hide-clear-icon

src/components/ha-markdown-element.ts

@@ -71,7 +71,7 @@ class HaMarkdownElement extends ReactiveElement {
     if (!this.innerHTML && this.cache) {
       const key = this._computeCacheKey();
       if (markdownCache.has(key)) {
-        render(h(unsafeHTML(markdownCache.get(key))), this.renderRoot);
+        render(markdownCache.get(key)!, this.renderRoot);
         this._resize();
       }
     }
@@ -99,7 +99,10 @@ class HaMarkdownElement extends ReactiveElement {
       }
     );
 
-    render(h(unsafeHTML(elements.join(""))), this.renderRoot);
+    render(
+      elements.map((e) => h(unsafeHTML(e))),
+      this.renderRoot
+    );
 
     this._resize();
 

src/components/ha-markdown.ts

@@ -25,11 +25,11 @@ export class HaMarkdown extends LitElement {
 
   @property({ type: Boolean }) public cache = false;
 
-  @query("ha-markdown-element") private _markdownElement?: ReactiveElement;
+  @query("ha-markdown-element") private _markdownElement!: ReactiveElement;
 
   protected async getUpdateComplete() {
     const result = await super.getUpdateComplete();
-    await this._markdownElement?.updateComplete;
+    await this._markdownElement.updateComplete;
     return result;
   }
 
@@ -71,11 +71,13 @@ export class HaMarkdown extends LitElement {
       color: var(--markdown-link-color, var(--primary-color));
     }
     img {
-      background-color: var(--markdown-image-background-color);
+      background-color: rgba(10, 10, 10, 0.15);
       border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
+      min-height: 2lh;
       height: auto;
       width: auto;
+      text-indent: 4px;
       transition: height 0.2s ease-in-out;
     }
     p:first-child > img:first-child {
@@ -84,9 +86,10 @@ export class HaMarkdown extends LitElement {
     p:first-child > img:last-child {
       vertical-align: top;
     }
-    :host > ul,
-    :host > ol {
-      padding-inline-start: var(--markdown-list-indent, revert);
+    ol,
+    ul {
+      list-style-position: inside;
+      padding-inline-start: 0;
     }
     li {
       &:has(input[type="checkbox"]) {
@@ -137,19 +140,16 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-4) 0;
     }
     table {
-      border-collapse: var(--markdown-table-border-collapse, collapse);
-    }
-    div:has(> table) {
-      overflow: auto;
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
     }
     th {
       text-align: start;
     }
     td,
     th {
-      border-width: var(--markdown-table-border-width, 1px);
-      border-style: var(--markdown-table-border-style, solid);
-      border-color: var(--markdown-table-border-color, var(--divider-color));
+      border: 1px solid var(--markdown-table-border-color, transparent);
       padding: 0.25em 0.5em;
     }
     blockquote {

src/components/ha-picker-field.ts

@@ -1,4 +1,3 @@
-import { consume } from "@lit/context";
 import { mdiClose, mdiMenuDown } from "@mdi/js";
 import {
   css,
@@ -8,10 +7,8 @@ import {
   type CSSResultGroup,
   type TemplateResult,
 } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { localizeContext } from "../data/context";
-import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
 import "./ha-icon-button";
@@ -36,10 +33,6 @@ export class HaPickerField extends LitElement {
 
   @property() public placeholder?: string;
 
-  @property({ type: Boolean, reflect: true }) public unknown = false;
-
-  @property({ attribute: "unknown-item-text" }) public unknownItemText;
-
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
@@ -48,10 +41,6 @@ export class HaPickerField extends LitElement {
 
   @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
 
-  @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: HomeAssistant["localize"];
-
   public async focus() {
     await this.updateComplete;
     await this.item?.focus();
@@ -72,12 +61,6 @@ export class HaPickerField extends LitElement {
                 ${this.placeholder}
               </span>
             `}
-        ${this.unknown
-          ? html`<div slot="supporting-text" class="unknown">
-              ${this.unknownItemText ||
-              this.localize("ui.components.combo-box.unknown_item")}
-            </div>`
-          : nothing}
         ${showClearIcon
           ? html`
               <ha-icon-button
@@ -120,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;
@@ -159,10 +142,6 @@ export class HaPickerField extends LitElement {
           background-color: var(--mdc-theme-primary);
         }
 
-        :host([unknown]) ha-combo-box-item {
-          background-color: var(--ha-color-fill-warning-quiet-resting);
-        }
-
         .clear {
           margin: 0 -8px;
           --mdc-icon-button-size: 32px;
@@ -177,10 +156,6 @@ export class HaPickerField extends LitElement {
           color: var(--secondary-text-color);
           padding: 0 8px;
         }
-
-        .unknown {
-          color: var(--ha-color-on-warning-normal);
-        }
       `,
     ];
   }

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(
@@ -467,7 +467,7 @@ export class HaServiceControl extends LitElement {
 
     const descriptionPlaceholders =
       domain && serviceName
-        ? this.hass.services[domain]?.[serviceName]?.description_placeholders
+        ? this.hass.services[domain][serviceName].description_placeholders
         : undefined;
 
     const description =

src/components/ha-service-picker.ts

@@ -141,9 +141,6 @@ class HaServicePicker extends LitElement {
           this.hass.localize,
           this.hass.services
         )}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.service-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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

@@ -197,8 +197,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private _mouseLeaveTimeout?: number;
 
-  private _touchendTimeout?: number;
-
   private _tooltipHideTimeout?: number;
 
   private _recentKeydownActiveUntil = 0;
@@ -239,18 +237,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     ];
   }
 
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    // clear timeouts
-    clearTimeout(this._mouseLeaveTimeout);
-    clearTimeout(this._tooltipHideTimeout);
-    clearTimeout(this._touchendTimeout);
-    // set undefined values
-    this._mouseLeaveTimeout = undefined;
-    this._tooltipHideTimeout = undefined;
-    this._touchendTimeout = undefined;
-  }
-
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -420,7 +406,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         class="ha-scrollbar"
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
-        @touchend=${this._listboxTouchend}
         @scroll=${this._listboxScroll}
         @keydown=${this._listboxKeydown}
       >
@@ -635,14 +620,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     this._hideTooltip();
   }
 
-  private _listboxTouchend() {
-    clearTimeout(this._touchendTimeout);
-    this._touchendTimeout = window.setTimeout(() => {
-      // Allow 1 second for users to read the tooltip on touch devices
-      this._hideTooltip();
-    }, 1000);
-  }
-
   @eventOptions({
     passive: true,
   })

src/components/ha-trigger-icon.ts

@@ -6,6 +6,7 @@ import {
   mdiDevices,
   mdiFormatListBulleted,
   mdiGestureDoubleTap,
+  mdiHomeAssistant,
   mdiMapMarker,
   mdiMapMarkerRadius,
   mdiMessageAlert,
@@ -22,7 +23,6 @@ import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
 import { computeDomain } from "../common/entity/compute_domain";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
-import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";

src/components/ha-wa-dialog.ts

@@ -1,5 +1,3 @@
-import "@home-assistant/webawesome/dist/components/dialog/dialog";
-import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import {
   customElement,
@@ -9,8 +7,9 @@ import {
   state,
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { mdiClose } from "@mdi/js";
+import "@home-assistant/webawesome/dist/components/dialog/dialog";
 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";
@@ -50,10 +49,10 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @cssprop --ha-dialog-surface-background - Dialog background color.
  * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
  * @cssprop --dialog-z-index - Z-index for the dialog.
+ * @cssprop --dialog-surface-position - CSS position of the dialog surface.
  * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
  *
  * @attr {boolean} open - Controls the dialog open state.
- * @attr {("alert"|"standard")} type - Dialog type. Defaults to "standard".
  * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
  * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
  * @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
@@ -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" })
@@ -85,9 +84,6 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   public open = false;
 
-  @property({ reflect: true })
-  public type: "alert" | "standard" = "standard";
-
   @property({ type: String, reflect: true, attribute: "width" })
   public width: DialogWidth = "medium";
 
@@ -114,10 +110,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 +158,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>
@@ -183,9 +172,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
 
     await this.updateComplete;
 
-    requestAnimationFrame(() => {
-      (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
-    });
+    (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
   };
 
   private _handleAfterShow = () => {
@@ -207,179 +194,155 @@ 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));
-        }
-
-        :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="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(
+  static styles = [
+    haStyleScrollbar,
+    css`
+      wa-dialog {
+        --full-width: var(
+          --ha-dialog-width-full,
+          min(
+            95vw,
             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,
+              100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
+                  --safe-area-inset-right,
                   var(--ha-space-0)
                 )
             )
-          );
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
+          )
+        );
+        --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, 100vw);
+        max-width: var(--ha-dialog-max-width, 100svw);
+      }
+
+      :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="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(100% - var(--ha-space-20))
+        );
+        min-height: var(--ha-dialog-min-height);
+        position: var(--dialog-surface-position, relative);
+        margin-top: var(--dialog-surface-margin-top, auto);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        :host {
+          --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::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 {
+          --full-width: var(--ha-dialog-width-full, 100vw);
         }
 
-        .header-title-container {
-          display: flex;
-          align-items: center;
+        wa-dialog::part(dialog) {
+          min-height: var(--ha-dialog-min-height, 100vh);
+          min-height: var(--ha-dialog-min-height, 100svh);
+          max-height: var(--ha-dialog-max-height, 100vh);
+          max-height: var(--ha-dialog-max-height, 100svh);
+          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
+          padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
+          padding-left: var(--safe-area-inset-left, var(--ha-space-0));
+          padding-right: var(--safe-area-inset-right, var(--ha-space-0));
         }
+      }
 
-        .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-container {
+        display: flex;
+        align-items: center;
+      }
 
-        wa-dialog::part(body) {
-          padding: 0;
-          display: flex;
-          flex-direction: column;
-          max-width: 100%;
-          overflow: hidden;
-        }
+      .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);
+      }
 
-        .content-wrapper {
-          position: relative;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
-        }
+      wa-dialog::part(body) {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        max-width: 100%;
+        overflow: hidden;
+      }
 
-        .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/components/user/ha-user-picker.ts

@@ -134,9 +134,6 @@ class HaUserPicker extends LitElement {
         .getItems=${this._getItems}
         .valueRenderer=${this._valueRenderer}
         .rowRenderer=${this._rowRenderer}
-        .unknownItemText=${this.hass.localize(
-          "ui.components.user-picker.unknown"
-        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/data/area_floor.ts

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

src/data/area_registry.ts

@@ -1,3 +1,4 @@
+import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { DeviceRegistryEntry } from "./device_registry";
 import type {
@@ -74,11 +75,17 @@ export const reorderAreaRegistryEntries = (
   });
 
 export const getAreaEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
+  filterHidden = false
 ): AreaEntityLookup => {
   const areaEntityLookup: AreaEntityLookup = {};
   for (const entity of entities) {
-    if (!entity.area_id) {
+    if (
+      !entity.area_id ||
+      (filterHidden &&
+        ((entity as EntityRegistryDisplayEntry).hidden ||
+          (entity as EntityRegistryEntry).hidden_by))
+    ) {
       continue;
     }
     if (!(entity.area_id in areaEntityLookup)) {
@@ -104,3 +111,22 @@ export const getAreaDeviceLookup = (
   }
   return areaDeviceLookup;
 };
+
+export const areaCompare =
+  (entries?: HomeAssistant["areas"], order?: string[]) =>
+  (a: string, b: string) => {
+    const indexA = order ? order.indexOf(a) : -1;
+    const indexB = order ? order.indexOf(b) : -1;
+    if (indexA === -1 && indexB === -1) {
+      const nameA = entries?.[a]?.name ?? a;
+      const nameB = entries?.[b]?.name ?? b;
+      return stringCompare(nameA, nameB);
+    }
+    if (indexA === -1) {
+      return 1;
+    }
+    if (indexB === -1) {
+      return -1;
+    }
+    return indexA - indexB;
+  };

src/data/automation_i18n.ts

@@ -144,7 +144,9 @@ const tryDescribeTrigger = (
   const type = getTriggerObjectId(trigger.trigger);
 
   return (
-    hass.localize(`component.${domain}.triggers.${type}.name`) ||
+    hass.localize(
+      `component.${domain}.triggers.${type}.description_configured`
+    ) ||
     hass.localize(
       `ui.panel.config.automation.editor.triggers.type.${triggerType as LegacyTrigger["trigger"]}.label`
     ) ||
@@ -917,7 +919,9 @@ const tryDescribeCondition = (
   const type = getConditionObjectId(condition.condition);
 
   return (
-    hass.localize(`component.${domain}.conditions.${type}.name`) ||
+    hass.localize(
+      `component.${domain}.conditions.${type}.description_configured`
+    ) ||
     hass.localize(
       `ui.panel.config.automation.editor.conditions.type.${conditionType as LegacyCondition["condition"]}.label`
     ) ||

src/data/device_registry.ts

@@ -111,11 +111,17 @@ export const sortDeviceRegistryByName = (
   );
 
 export const getDeviceEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
+  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
+  filterHidden = false
 ): DeviceEntityLookup => {
   const deviceEntityLookup: DeviceEntityLookup = {};
   for (const entity of entities) {
-    if (!entity.device_id) {
+    if (
+      !entity.device_id ||
+      (filterHidden &&
+        ((entity as EntityRegistryDisplayEntry).hidden ||
+          (entity as EntityRegistryEntry).hidden_by))
+    ) {
       continue;
     }
     if (!(entity.device_id in deviceEntityLookup)) {

src/data/energy.ts

@@ -11,7 +11,7 @@ import {
   isLastDayOfMonth,
   addYears,
 } from "date-fns";
-import type { Collection, HassEntity } from "home-assistant-js-websocket";
+import type { Collection } from "home-assistant-js-websocket";
 import { getCollection } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import {
@@ -1361,37 +1361,3 @@ export const calculateSolarConsumedGauge = (
   }
   return undefined;
 };
-
-/**
- * Get current power value from entity state, normalized to kW
- * @param stateObj - The entity state object to get power value from
- * @returns Power value in kW, or 0 if entity not found or invalid
- */
-export const getPowerFromState = (stateObj: HassEntity): number | undefined => {
-  if (!stateObj) {
-    return undefined;
-  }
-  const value = parseFloat(stateObj.state);
-  if (isNaN(value)) {
-    return undefined;
-  }
-
-  // Normalize to kW based on unit of measurement (case-sensitive)
-  // Supported units: GW, kW, MW, mW, TW, W
-  const unit = stateObj.attributes.unit_of_measurement;
-  switch (unit) {
-    case "W":
-      return value / 1000;
-    case "mW":
-      return value / 1000000;
-    case "MW":
-      return value * 1000;
-    case "GW":
-      return value * 1000000;
-    case "TW":
-      return value * 1000000000;
-    default:
-      // Assume kW if no unit or unit is kW
-      return value;
-  }
-};

src/data/floor_registry.ts

@@ -1,3 +1,4 @@
+import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area_registry";
 import type { RegistryEntry } from "./registry";
@@ -74,3 +75,27 @@ export const getFloorAreaLookup = (
   }
   return floorAreaLookup;
 };
+
+export const floorCompare =
+  (entries?: HomeAssistant["floors"], order?: string[]) =>
+  (a: string, b: string) => {
+    const indexA = order ? order.indexOf(a) : -1;
+    const indexB = order ? order.indexOf(b) : -1;
+    if (indexA === -1 && indexB === -1) {
+      const floorA = entries?.[a];
+      const floorB = entries?.[b];
+      if (floorA && floorB && floorA.level !== floorB.level) {
+        return (floorB.level ?? -9999) - (floorA.level ?? -9999);
+      }
+      const nameA = floorA?.name ?? a;
+      const nameB = floorB?.name ?? b;
+      return stringCompare(nameA, nameB);
+    }
+    if (indexA === -1) {
+      return 1;
+    }
+    if (indexB === -1) {
+      return -1;
+    }
+    return indexA - indexB;
+  };

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

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

src/data/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/dialog-box.ts

@@ -1,7 +1,6 @@
 import { mdiAlertOutline, mdiClose } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
@@ -65,7 +64,6 @@ class DialogBox extends LitElement {
       <ha-wa-dialog
         .hass=${this.hass}
         .open=${this._open}
-        type=${confirmPrompt ? "alert" : "standard"}
         ?prevent-scrim-close=${confirmPrompt}
         @closed=${this._dialogClosed}
         aria-labelledby="dialog-box-title"
@@ -81,11 +79,7 @@ class DialogBox extends LitElement {
                 ></ha-icon-button
               ></slot>`
             : nothing}
-          <span
-            class=${classMap({ title: true, alert: confirmPrompt })}
-            slot="title"
-            id="dialog-box-title"
-          >
+          <span slot="title" id="dialog-box-title">
             ${this._params.warning
               ? html`<ha-svg-icon
                   .path=${mdiAlertOutline}
@@ -205,14 +199,6 @@ class DialogBox extends LitElement {
     ha-textfield {
       width: 100%;
     }
-    .title.alert {
-      padding: 0 var(--ha-space-2);
-    }
-    @media all and (min-width: 450px) and (min-height: 500px) {
-      .title.alert {
-        padding: 0 var(--ha-space-1);
-      }
-    }
   `;
 }
 

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

@@ -1,9 +1,9 @@
-import { ancestorsWithProperty } from "../common/dom/ancestors-with-property";
-import { deepActiveElement } from "../common/dom/deep-active-element";
 import type { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
-import { nextRender } from "../common/util/render-status";
 import type { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
+import { ancestorsWithProperty } from "../common/dom/ancestors-with-property";
+import { deepActiveElement } from "../common/dom/deep-active-element";
+import { nextRender } from "../common/util/render-status";
 
 declare global {
   // for fire event
@@ -19,11 +19,10 @@ 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;
+  closeDialog?: () => boolean;
 }
 
 interface ShowDialogParams<T> {
@@ -144,32 +143,27 @@ export const showDialog = async (
   return true;
 };
 
-export const closeDialog = async (
-  dialogTag: string,
-  historyState?: any
-): Promise<boolean> => {
+export const closeDialog = async (dialogTag: string): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;
   }
   const dialogElement = await LOADED[dialogTag].element;
   if (dialogElement.closeDialog) {
-    return dialogElement.closeDialog(historyState) !== false;
+    return dialogElement.closeDialog() !== false;
   }
   return true;
 };
 
 // called on back()
-export const closeLastDialog = async (historyState?: any) => {
+export const closeLastDialog = async () => {
   if (OPEN_DIALOG_STACK.length) {
-    const lastDialog = OPEN_DIALOG_STACK.pop() as DialogState;
-    const closed = await closeDialog(lastDialog.dialogTag, historyState);
+    const lastDialog = OPEN_DIALOG_STACK.pop();
+    const closed = await closeDialog(lastDialog!.dialogTag);
     if (!closed) {
       // if the dialog was not closed, put it back on the stack
-      OPEN_DIALOG_STACK.push(lastDialog);
-    } else if (
-      OPEN_DIALOG_STACK.length &&
-      mainWindow.history.state?.opensDialog
-    ) {
+      OPEN_DIALOG_STACK.push(lastDialog!);
+    }
+    if (OPEN_DIALOG_STACK.length && mainWindow.history.state?.opensDialog) {
       // if there are more dialogs open, push a new state so back() will close the next top dialog
       mainWindow.history.pushState(
         { dialog: OPEN_DIALOG_STACK[OPEN_DIALOG_STACK.length - 1].dialogTag },

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/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);
         }
@@ -145,6 +143,7 @@ class HassSubpage extends LitElement {
           -webkit-box-orient: vertical;
           overflow: hidden;
           text-overflow: ellipsis;
+          padding-bottom: 1px;
         }
 
         .content {

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/climate/ha-panel-climate.ts

@@ -13,7 +13,6 @@ import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strateg
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
-import "../lovelace/views/hui-view-background";
 
 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -116,7 +115,6 @@ class PanelClimate extends LitElement {
         this._lovelace
           ? html`
               <hui-view-container .hass=${this.hass}>
-                <hui-view-background .hass=${this.hass}> </hui-view-background>
                 <hui-view
                   .hass=${this.hass}
                   .narrow=${this.narrow}

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-areas-floors-order.ts

@@ -1,496 +0,0 @@
-import { mdiClose, mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import {
-  type AreasFloorHierarchy,
-  getAreasFloorHierarchy,
-  getAreasOrder,
-  getFloorOrder,
-} from "../../../common/areas/areas-floor-hierarchy";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-button";
-import "../../../components/ha-dialog-header";
-import "../../../components/ha-floor-icon";
-import "../../../components/ha-icon";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../components/ha-md-dialog";
-import "../../../components/ha-md-list";
-import "../../../components/ha-md-list-item";
-import "../../../components/ha-sortable";
-import "../../../components/ha-svg-icon";
-import type { AreaRegistryEntry } from "../../../data/area_registry";
-import {
-  reorderAreaRegistryEntries,
-  updateAreaRegistryEntry,
-} from "../../../data/area_registry";
-import { reorderFloorRegistryEntries } from "../../../data/floor_registry";
-import { haStyle, haStyleDialog } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-import { showToast } from "../../../util/toast";
-import type { AreasFloorsOrderDialogParams } from "./show-dialog-areas-floors-order";
-
-const UNASSIGNED_FLOOR = "__unassigned__";
-
-interface FloorChange {
-  areaId: string;
-  floorId: string | null;
-}
-
-@customElement("dialog-areas-floors-order")
-class DialogAreasFloorsOrder extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _open = false;
-
-  @state() private _hierarchy?: AreasFloorHierarchy;
-
-  @state() private _saving = false;
-
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
-  public async showDialog(
-    _params: AreasFloorsOrderDialogParams
-  ): Promise<void> {
-    this._open = true;
-    this._computeHierarchy();
-  }
-
-  private _computeHierarchy(): void {
-    this._hierarchy = getAreasFloorHierarchy(
-      Object.values(this.hass.floors),
-      Object.values(this.hass.areas)
-    );
-  }
-
-  public closeDialog(): void {
-    this._dialog?.close();
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
-    this._hierarchy = undefined;
-    this._saving = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._open || !this._hierarchy) {
-      return nothing;
-    }
-
-    const hasFloors = this._hierarchy.floors.length > 0;
-    const dialogTitle = this.hass.localize(
-      hasFloors
-        ? "ui.panel.config.areas.dialog.reorder_floors_areas_title"
-        : "ui.panel.config.areas.dialog.reorder_areas_title"
-    );
-
-    return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title" .title=${dialogTitle}>${dialogTitle}</span>
-        </ha-dialog-header>
-        <div slot="content" class="content">
-          <ha-sortable
-            handle-selector=".floor-handle"
-            draggable-selector=".floor"
-            @item-moved=${this._floorMoved}
-            invert-swap
-          >
-            <div class="floors">
-              ${repeat(
-                this._hierarchy.floors,
-                (floor) => floor.id,
-                (floor) => this._renderFloor(floor)
-              )}
-            </div>
-          </ha-sortable>
-          ${this._renderUnassignedAreas()}
-        </div>
-        <div slot="actions">
-          <ha-button @click=${this.closeDialog} appearance="plain">
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button @click=${this._save} .disabled=${this._saving}>
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </div>
-      </ha-md-dialog>
-    `;
-  }
-
-  private _renderFloor(floor: { id: string; areas: string[] }) {
-    const floorEntry = this.hass.floors[floor.id];
-    if (!floorEntry) {
-      return nothing;
-    }
-
-    return html`
-      <div class="floor">
-        <div class="floor-header">
-          <ha-floor-icon .floor=${floorEntry}></ha-floor-icon>
-          <span class="floor-name">${floorEntry.name}</span>
-          <ha-svg-icon
-            class="floor-handle"
-            .path=${mdiDragHorizontalVariant}
-          ></ha-svg-icon>
-        </div>
-        <ha-sortable
-          handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
-          @item-moved=${this._areaMoved}
-          @item-added=${this._areaAdded}
-          group="areas"
-          .floor=${floor.id}
-        >
-          <ha-md-list>
-            ${floor.areas.length > 0
-              ? floor.areas.map((areaId) => this._renderArea(areaId))
-              : html`<p class="empty">
-                  ${this.hass.localize(
-                    "ui.panel.config.areas.dialog.empty_floor"
-                  )}
-                </p>`}
-          </ha-md-list>
-        </ha-sortable>
-      </div>
-    `;
-  }
-
-  private _renderUnassignedAreas() {
-    const hasFloors = this._hierarchy!.floors.length > 0;
-
-    return html`
-      <div class="floor unassigned">
-        ${hasFloors
-          ? html`<div class="floor-header">
-              <span class="floor-name">
-                ${this.hass.localize(
-                  "ui.panel.config.areas.dialog.other_areas"
-                )}
-              </span>
-            </div>`
-          : nothing}
-        <ha-sortable
-          handle-selector=".area-handle"
-          draggable-selector="ha-md-list-item"
-          @item-moved=${this._areaMoved}
-          @item-added=${this._areaAdded}
-          group="areas"
-          .floor=${UNASSIGNED_FLOOR}
-        >
-          <ha-md-list>
-            ${this._hierarchy!.areas.length > 0
-              ? this._hierarchy!.areas.map((areaId) => this._renderArea(areaId))
-              : html`<p class="empty">
-                  ${this.hass.localize(
-                    "ui.panel.config.areas.dialog.empty_unassigned"
-                  )}
-                </p>`}
-          </ha-md-list>
-        </ha-sortable>
-      </div>
-    `;
-  }
-
-  private _renderArea(areaId: string) {
-    const area = this.hass.areas[areaId];
-    if (!area) {
-      return nothing;
-    }
-
-    return html`
-      <ha-md-list-item .sortableData=${area}>
-        ${area.icon
-          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
-          : html`<ha-svg-icon
-              slot="start"
-              .path=${mdiTextureBox}
-            ></ha-svg-icon>`}
-        <span slot="headline">${area.name}</span>
-        <ha-svg-icon
-          class="area-handle"
-          slot="end"
-          .path=${mdiDragHorizontalVariant}
-        ></ha-svg-icon>
-      </ha-md-list-item>
-    `;
-  }
-
-  private _floorMoved(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { oldIndex, newIndex } = ev.detail;
-    const newFloors = [...this._hierarchy.floors];
-    const [movedFloor] = newFloors.splice(oldIndex, 1);
-    newFloors.splice(newIndex, 0, movedFloor);
-
-    this._hierarchy = {
-      ...this._hierarchy,
-      floors: newFloors,
-    };
-  }
-
-  private _areaMoved(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
-    const { oldIndex, newIndex } = ev.detail;
-    const floorId = floor === UNASSIGNED_FLOOR ? null : floor;
-
-    if (floorId === null) {
-      // Reorder unassigned areas
-      const newAreas = [...this._hierarchy.areas];
-      const [movedArea] = newAreas.splice(oldIndex, 1);
-      newAreas.splice(newIndex, 0, movedArea);
-
-      this._hierarchy = {
-        ...this._hierarchy,
-        areas: newAreas,
-      };
-    } else {
-      // Reorder areas within a floor
-      this._hierarchy = {
-        ...this._hierarchy,
-        floors: this._hierarchy.floors.map((f) => {
-          if (f.id === floorId) {
-            const newAreas = [...f.areas];
-            const [movedArea] = newAreas.splice(oldIndex, 1);
-            newAreas.splice(newIndex, 0, movedArea);
-            return { ...f, areas: newAreas };
-          }
-          return f;
-        }),
-      };
-    }
-  }
-
-  private _areaAdded(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (!this._hierarchy) {
-      return;
-    }
-
-    const { floor } = ev.currentTarget as HTMLElement & { floor: string };
-    const { data: area, index } = ev.detail as {
-      data: AreaRegistryEntry;
-      index: number;
-    };
-
-    const newFloorId = floor === UNASSIGNED_FLOOR ? null : floor;
-
-    // Update hierarchy
-    const newUnassignedAreas = this._hierarchy.areas.filter(
-      (id) => id !== area.area_id
-    );
-    if (newFloorId === null) {
-      // Add to unassigned at the specified index
-      newUnassignedAreas.splice(index, 0, area.area_id);
-    }
-
-    this._hierarchy = {
-      ...this._hierarchy,
-      floors: this._hierarchy.floors.map((f) => {
-        if (f.id === newFloorId) {
-          // Add to new floor at the specified index
-          const newAreas = [...f.areas];
-          newAreas.splice(index, 0, area.area_id);
-          return { ...f, areas: newAreas };
-        }
-        // Remove from old floor
-        return {
-          ...f,
-          areas: f.areas.filter((id) => id !== area.area_id),
-        };
-      }),
-      areas: newUnassignedAreas,
-    };
-  }
-
-  private _computeFloorChanges(): FloorChange[] {
-    if (!this._hierarchy) {
-      return [];
-    }
-
-    const changes: FloorChange[] = [];
-
-    // Check areas assigned to floors
-    for (const floor of this._hierarchy.floors) {
-      for (const areaId of floor.areas) {
-        const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
-        if (floor.id !== originalFloorId) {
-          changes.push({ areaId, floorId: floor.id });
-        }
-      }
-    }
-
-    // Check unassigned areas
-    for (const areaId of this._hierarchy.areas) {
-      const originalFloorId = this.hass.areas[areaId]?.floor_id ?? null;
-      if (originalFloorId !== null) {
-        changes.push({ areaId, floorId: null });
-      }
-    }
-
-    return changes;
-  }
-
-  private async _save(): Promise<void> {
-    if (!this._hierarchy || this._saving) {
-      return;
-    }
-
-    this._saving = true;
-
-    try {
-      const areaOrder = getAreasOrder(this._hierarchy);
-      const floorOrder = getFloorOrder(this._hierarchy);
-
-      // Update floor assignments for areas that changed floors
-      const floorChanges = this._computeFloorChanges();
-      const floorChangePromises = floorChanges.map(({ areaId, floorId }) =>
-        updateAreaRegistryEntry(this.hass, areaId, {
-          floor_id: floorId,
-        })
-      );
-
-      await Promise.all(floorChangePromises);
-
-      // Reorder areas and floors
-      await reorderAreaRegistryEntries(this.hass, areaOrder);
-      await reorderFloorRegistryEntries(this.hass, floorOrder);
-
-      this.closeDialog();
-    } catch (err: any) {
-      showToast(this, {
-        message:
-          err.message ||
-          this.hass.localize("ui.panel.config.areas.dialog.reorder_failed"),
-      });
-      this._saving = false;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-md-dialog {
-          min-width: 600px;
-          max-height: 90%;
-          --dialog-content-padding: 8px 24px;
-        }
-
-        @media all and (max-width: 600px), all and (max-height: 500px) {
-          ha-md-dialog {
-            --md-dialog-container-shape: 0;
-            min-width: 100%;
-            min-height: 100%;
-          }
-        }
-
-        .floors {
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
-        .floor {
-          border: 1px solid var(--divider-color);
-          border-radius: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
-          overflow: hidden;
-        }
-
-        .floor.unassigned {
-          margin-top: 16px;
-        }
-
-        .floor-header {
-          display: flex;
-          align-items: center;
-          padding: 12px 16px;
-          background-color: var(--secondary-background-color);
-          gap: 12px;
-        }
-
-        .floor-name {
-          flex: 1;
-          font-weight: var(--ha-font-weight-medium);
-        }
-
-        .floor-handle {
-          cursor: grab;
-          color: var(--secondary-text-color);
-        }
-
-        ha-md-list {
-          padding: 0;
-          --md-list-item-leading-space: 16px;
-          --md-list-item-trailing-space: 16px;
-          display: flex;
-          flex-direction: column;
-        }
-
-        ha-md-list-item {
-          --md-list-item-one-line-container-height: 48px;
-          --md-list-item-container-shape: 0;
-        }
-
-        ha-md-list-item.sortable-ghost {
-          border-radius: calc(
-            var(--ha-card-border-radius, var(--ha-border-radius-lg)) - 1px
-          );
-          box-shadow: inset 0 0 0 2px var(--primary-color);
-        }
-
-        .area-handle {
-          cursor: grab;
-          color: var(--secondary-text-color);
-        }
-
-        .empty {
-          text-align: center;
-          color: var(--secondary-text-color);
-          font-style: italic;
-          margin: 0;
-          padding: 12px 16px;
-          order: 1;
-        }
-
-        ha-md-list:has(ha-md-list-item) .empty {
-          display: none;
-        }
-
-        .content {
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-areas-floors-order": DialogAreasFloorsOrder;
-  }
-}

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;
 
@@ -145,10 +144,6 @@ class DialogFloorDetail extends LitElement {
                 "ui.panel.config.floors.editor.level"
               )}
               type="number"
-              .helper=${this.hass.localize(
-                "ui.panel.config.floors.editor.level_helper"
-              )}
-              helperPersistent
             ></ha-textfield>
 
             <ha-icon-picker
@@ -362,3 +357,5 @@ declare global {
     "dialog-floor-registry-detail": DialogFloorDetail;
   }
 }
+
+customElements.define("dialog-floor-registry-detail", DialogFloorDetail);

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

@@ -2,10 +2,10 @@ import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
+  mdiDragHorizontalVariant,
   mdiHelpCircle,
   mdiPencil,
   mdiPlus,
-  mdiSort,
 } from "@mdi/js";
 import {
   css,
@@ -21,6 +21,7 @@ import memoizeOne from "memoize-one";
 import {
   getAreasFloorHierarchy,
   getAreasOrder,
+  getFloorOrder,
   type AreasFloorHierarchy,
 } from "../../../common/areas/areas-floor-hierarchy";
 import { formatListWithAnds } from "../../../common/string/format-list";
@@ -41,6 +42,7 @@ import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import {
   createFloorRegistryEntry,
   deleteFloorRegistryEntry,
+  reorderFloorRegistryEntries,
   updateFloorRegistryEntry,
 } from "../../../data/floor_registry";
 import {
@@ -56,7 +58,6 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import { showAreasFloorsOrderDialog } from "./show-dialog-areas-floors-order";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
 
 const UNASSIGNED_FLOOR = "__unassigned__";
@@ -83,8 +84,6 @@ export class HaConfigAreasDashboard extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  private _searchParms = new URLSearchParams(window.location.search);
-
   @state() private _hierarchy?: AreasFloorHierarchy;
 
   private _blockHierarchyUpdate = false;
@@ -168,9 +167,7 @@ export class HaConfigAreasDashboard extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .isWide=${this.isWide}
-        .backPath=${this._searchParms.has("historyBack")
-          ? undefined
-          : "/config"}
+        back-path="/config"
         .tabs=${configSections.areas}
         .route=${this.route}
         has-fab
@@ -182,84 +179,87 @@ export class HaConfigAreasDashboard extends LitElement {
           @click=${this._showHelp}
         ></ha-icon-button>
         <div class="container">
-          <div class="floors">
-            ${this._hierarchy.floors.map(({ areas, id }) => {
-              const floor = this.hass.floors[id];
-              if (!floor) {
-                return nothing;
-              }
-              return html`
-                <div class="floor">
-                  <div class="header">
-                    <h2>
-                      <ha-floor-icon .floor=${floor}></ha-floor-icon>
-                      ${floor.name}
-                    </h2>
-                    <div class="actions">
-                      <ha-button-menu
-                        .floor=${floor}
-                        @action=${this._handleFloorAction}
-                      >
-                        <ha-icon-button
-                          slot="trigger"
-                          .path=${mdiDotsVertical}
-                        ></ha-icon-button>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
-                            .path=${mdiSort}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.reorder"
-                          )}</ha-list-item
+          <ha-sortable
+            handle-selector=".handle"
+            draggable-selector=".floor"
+            @item-moved=${this._floorMoved}
+            .options=${SORT_OPTIONS}
+            group="floors"
+            invert-swap
+          >
+            <div class="floors">
+              ${this._hierarchy.floors.map(({ areas, id }) => {
+                const floor = this.hass.floors[id];
+                if (!floor) {
+                  return nothing;
+                }
+                return html`
+                  <div class="floor">
+                    <div class="header">
+                      <h2>
+                        <ha-floor-icon .floor=${floor}></ha-floor-icon>
+                        ${floor.name}
+                      </h2>
+                      <div class="actions">
+                        <ha-svg-icon
+                          class="handle"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
+                        <ha-button-menu
+                          .floor=${floor}
+                          @action=${this._handleFloorAction}
                         >
-                        <li divider role="separator"></li>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
-                            .path=${mdiPencil}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.floor.edit_floor"
-                          )}</ha-list-item
-                        >
-                        <ha-list-item class="warning" graphic="icon"
-                          ><ha-svg-icon
-                            class="warning"
-                            .path=${mdiDelete}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.floor.delete_floor"
-                          )}</ha-list-item
-                        >
-                      </ha-button-menu>
+                          <ha-icon-button
+                            slot="trigger"
+                            .path=${mdiDotsVertical}
+                          ></ha-icon-button>
+                          <ha-list-item graphic="icon"
+                            ><ha-svg-icon
+                              .path=${mdiPencil}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.edit_floor"
+                            )}</ha-list-item
+                          >
+                          <ha-list-item class="warning" graphic="icon"
+                            ><ha-svg-icon
+                              class="warning"
+                              .path=${mdiDelete}
+                              slot="graphic"
+                            ></ha-svg-icon
+                            >${this.hass.localize(
+                              "ui.panel.config.areas.picker.floor.delete_floor"
+                            )}</ha-list-item
+                          >
+                        </ha-button-menu>
+                      </div>
                     </div>
+                    <ha-sortable
+                      handle-selector="a"
+                      draggable-selector="a"
+                      @item-added=${this._areaAdded}
+                      @item-moved=${this._areaMoved}
+                      group="areas"
+                      .options=${SORT_OPTIONS}
+                      .floor=${floor.floor_id}
+                    >
+                      <div class="areas">
+                        ${areas.map((areaId) => {
+                          const area = this.hass.areas[areaId];
+                          if (!area) {
+                            return nothing;
+                          }
+                          const stats = areasStats.get(area.area_id);
+                          return this._renderArea(area, stats);
+                        })}
+                      </div>
+                    </ha-sortable>
                   </div>
-                  <ha-sortable
-                    handle-selector="a"
-                    draggable-selector="a"
-                    @item-added=${this._areaAdded}
-                    @item-moved=${this._areaMoved}
-                    group="areas"
-                    .options=${SORT_OPTIONS}
-                    .floor=${floor.floor_id}
-                  >
-                    <div class="areas">
-                      ${areas.map((areaId) => {
-                        const area = this.hass.areas[areaId];
-                        if (!area) {
-                          return nothing;
-                        }
-                        const stats = areasStats.get(area.area_id);
-                        return this._renderArea(area, stats);
-                      })}
-                    </div>
-                  </ha-sortable>
-                </div>
-              `;
-            })}
-          </div>
+                `;
+              })}
+            </div>
+          </ha-sortable>
 
           ${this._hierarchy.areas.length
             ? html`
@@ -267,30 +267,9 @@ export class HaConfigAreasDashboard extends LitElement {
                   <div class="header">
                     <h2>
                       ${this.hass.localize(
-                        this._hierarchy.floors.length
-                          ? "ui.panel.config.areas.picker.other_areas"
-                          : "ui.panel.config.areas.picker.header"
+                        "ui.panel.config.areas.picker.unassigned_areas"
                       )}
                     </h2>
-                    <div class="actions">
-                      <ha-button-menu
-                        @action=${this._handleUnassignedAreasAction}
-                      >
-                        <ha-icon-button
-                          slot="trigger"
-                          .path=${mdiDotsVertical}
-                        ></ha-icon-button>
-                        <ha-list-item graphic="icon"
-                          ><ha-svg-icon
-                            .path=${mdiSort}
-                            slot="graphic"
-                          ></ha-svg-icon
-                          >${this.hass.localize(
-                            "ui.panel.config.areas.picker.reorder"
-                          )}</ha-list-item
-                        >
-                      </ha-button-menu>
-                    </div>
                   </div>
                   <ha-sortable
                     handle-selector="a"
@@ -412,6 +391,51 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
+  private async _floorMoved(ev) {
+    ev.stopPropagation();
+    if (!this.hass || !this._hierarchy) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+
+    const reorderFloors = (
+      floors: AreasFloorHierarchy["floors"],
+      oldIdx: number,
+      newIdx: number
+    ) => {
+      const newFloors = [...floors];
+      const [movedFloor] = newFloors.splice(oldIdx, 1);
+      newFloors.splice(newIdx, 0, movedFloor);
+      return newFloors;
+    };
+
+    // Optimistically update UI
+    this._hierarchy = {
+      ...this._hierarchy,
+      floors: reorderFloors(this._hierarchy.floors, oldIndex, newIndex),
+    };
+
+    const areaOrder = getAreasOrder(this._hierarchy);
+    const floorOrder = getFloorOrder(this._hierarchy);
+
+    // Block hierarchy updates for 500ms to avoid flickering
+    // because of multiple async updates
+    this._blockHierarchyUpdateFor(500);
+
+    try {
+      await reorderAreaRegistryEntries(this.hass, areaOrder);
+      await reorderFloorRegistryEntries(this.hass, floorOrder);
+    } catch {
+      showToast(this, {
+        message: this.hass.localize(
+          "ui.panel.config.areas.picker.floor_reorder_failed"
+        ),
+      });
+      // Revert on error
+      this._computeHierarchy();
+    }
+  }
+
   private async _areaMoved(ev) {
     ev.stopPropagation();
     if (!this.hass || !this._hierarchy) {
@@ -537,23 +561,14 @@ export class HaConfigAreasDashboard extends LitElement {
     const floor = (ev.currentTarget as any).floor;
     switch (ev.detail.index) {
       case 0:
-        this._showReorderDialog();
-        break;
-      case 1:
         this._editFloor(floor);
         break;
-      case 2:
+      case 1:
         this._deleteFloor(floor);
         break;
     }
   }
 
-  private _handleUnassignedAreasAction(ev: CustomEvent<ActionDetail>) {
-    if (ev.detail.index === 0) {
-      this._showReorderDialog();
-    }
-  }
-
   private _createFloor() {
     this._openFloorDialog();
   }
@@ -583,10 +598,6 @@ export class HaConfigAreasDashboard extends LitElement {
     this._openAreaDialog();
   }
 
-  private _showReorderDialog() {
-    showAreasFloorsOrderDialog(this, {});
-  }
-
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.areas.caption"),

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

@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-
-export interface AreasFloorsOrderDialogParams {}
-
-export const loadAreasFloorsOrderDialog = () =>
-  import("./dialog-areas-floors-order");
-
-export const showAreasFloorsOrderDialog = (
-  element: HTMLElement,
-  params: AreasFloorsOrderDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-areas-floors-order",
-    dialogImport: loadAreasFloorsOrderDialog,
-    dialogParams: params,
-  });
-};

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

@@ -16,7 +16,6 @@ import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { mainWindow } from "../../../common/dom/get_main_window";
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -97,7 +96,7 @@ import {
   fetchIntegrationManifests,
 } from "../../../data/integration";
 import type { LabelRegistryEntry } from "../../../data/label_registry";
-import { subscribeLabFeature } from "../../../data/labs";
+import { subscribeLabFeatures } from "../../../data/labs";
 import {
   TARGET_SEPARATOR,
   getConditionsForTarget,
@@ -119,6 +118,7 @@ import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import "./add-automation-element/ha-automation-add-from-target";
+import type HaAutomationAddFromTarget from "./add-automation-element/ha-automation-add-from-target";
 import "./add-automation-element/ha-automation-add-items";
 import "./add-automation-element/ha-automation-add-search";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
@@ -216,6 +216,10 @@ class DialogAddAutomationElement
   // #endregion state
 
   // #region queries
+
+  @query("ha-automation-add-from-target")
+  private _targetPickerElement?: HaAutomationAddFromTarget;
+
   @query("ha-automation-add-items")
   private _itemsListElement?: HTMLDivElement;
 
@@ -281,24 +285,22 @@ class DialogAddAutomationElement
     this._fetchManifests();
     this._calculateUsedDomains();
 
-    this._unsubscribeLabFeatures = subscribeLabFeature(
+    this._unsubscribeLabFeatures = subscribeLabFeatures(
       this.hass.connection,
-      "automation",
-      "new_triggers_conditions",
-      (enabled) => {
-        this._newTriggersAndConditions = enabled;
-        this._tab = this._newTriggersAndConditions ? "targets" : "groups";
+      (features) => {
+        this._newTriggersAndConditions =
+          features.find(
+            (feature) =>
+              feature.domain === "automation" &&
+              feature.preview_feature === "new_triggers_conditions"
+          )?.enabled ?? false;
+        this._tab =
+          this._newTriggersAndConditions && this._params?.type !== "condition"
+            ? "targets"
+            : "groups";
       }
     );
 
-    // add initial dialog view state to history
-    mainWindow.history.pushState(
-      {
-        dialogData: {},
-      },
-      ""
-    );
-
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
       getServiceIcons(this.hass);
@@ -319,41 +321,7 @@ class DialogAddAutomationElement
     this._bottomSheetMode = this._narrow;
   }
 
-  public closeDialog(historyState?: any) {
-    // prevent closing when come from popstate event and root level isn't active
-    if (
-      this._open &&
-      historyState &&
-      (this._selectedTarget || this._selectedGroup)
-    ) {
-      if (historyState.dialogData?.target) {
-        this._selectedTarget = historyState.dialogData.target;
-        this._getItemsByTarget();
-        this._tab = "targets";
-        return false;
-      }
-      if (historyState.dialogData?.group) {
-        this._selectedCollectionIndex = historyState.dialogData.collectionIndex;
-        this._selectedGroup = historyState.dialogData.group;
-        this._tab = "groups";
-        return false;
-      }
-
-      // return to home on mobile
-      if (this._narrow) {
-        this._selectedTarget = undefined;
-        this._selectedGroup = undefined;
-        return false;
-      }
-    }
-
-    // if dialog is closed, but root level isn't active, clean up history state
-    if (mainWindow.history.state?.dialogData) {
-      this._open = false;
-      mainWindow.history.back();
-      return false;
-    }
-
+  public closeDialog() {
     this.removeKeyboardShortcuts();
     this._unsubscribe();
     if (this._params) {
@@ -440,7 +408,7 @@ class DialogAddAutomationElement
       return html`
         <ha-bottom-sheet
           .open=${this._open}
-          @closed=${this._handleClosed}
+          @closed=${this.closeDialog}
           flexcontent
         >
           ${this._renderContent()}
@@ -452,7 +420,7 @@ class DialogAddAutomationElement
       <ha-wa-dialog
         width="large"
         .open=${this._open}
-        @closed=${this._handleClosed}
+        @closed=${this.closeDialog}
         flexcontent
       >
         ${this._renderContent()}
@@ -590,7 +558,8 @@ class DialogAddAutomationElement
                           interactive
                           type="button"
                           class="paste"
-                          @click=${this._paste}
+                          .value=${PASTE_VALUE}
+                          @click=${this._selected}
                         >
                           <div class="shortcut-label">
                             <div class="label">
@@ -683,7 +652,6 @@ class DialogAddAutomationElement
               <ha-automation-add-items
                 .hass=${this.hass}
                 .items=${this._getItems()}
-                .scrollable=${!this._narrow}
                 .error=${this._tab === "targets" && this._loadItemsError
                   ? this.hass.localize(
                       "ui.panel.config.automation.editor.load_target_items_failed"
@@ -762,26 +730,15 @@ class DialogAddAutomationElement
       );
 
       if (targetId) {
-        if (targetType === "area") {
-          const floorId = this.hass.areas[targetId]?.floor_id;
-          if (floorId) {
-            subtitle = computeFloorName(this.hass.floors[floorId]) || floorId;
-          } else {
-            subtitle = this.hass.localize(
-              "ui.panel.config.automation.editor.other_areas"
-            );
-          }
-        } else if (targetType === "device") {
-          const areaId = this.hass.devices[targetId]?.area_id;
-          if (areaId) {
-            subtitle = computeAreaName(this.hass.areas[areaId]) || areaId;
-          } else {
-            const device = this.hass.devices[targetId];
-            subtitle = this.hass.localize(
-              `ui.panel.config.automation.editor.${device?.entry_type === "service" ? "services" : "unassigned_devices"}`
-            );
-          }
-        } else if (targetType === "entity" && this.hass.states[targetId]) {
+        if (targetType === "area" && this.hass.areas[targetId]?.floor_id) {
+          const floorId = this.hass.areas[targetId].floor_id;
+          subtitle = computeFloorName(this.hass.floors[floorId]) || floorId;
+        }
+        if (targetType === "device" && this.hass.devices[targetId]?.area_id) {
+          const areaId = this.hass.devices[targetId].area_id;
+          subtitle = computeAreaName(this.hass.areas[areaId]) || areaId;
+        }
+        if (targetType === "entity" && this.hass.states[targetId]) {
           const entity = this.hass.entities[targetId];
           if (entity && !entity.device_id && !entity.area_id) {
             const domain = targetId.split(".", 2)[0];
@@ -806,10 +763,10 @@ class DialogAddAutomationElement
               .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
           }
         }
+      }
 
-        if (subtitle) {
-          return html`<span slot="subtitle">${subtitle}</span>`;
-        }
+      if (subtitle) {
+        return html`<span slot="subtitle">${subtitle}</span>`;
       }
     }
 
@@ -1396,61 +1353,6 @@ class DialogAddAutomationElement
     this._labelRegistry?.find(({ label_id }) => label_id === labelId)
   );
 
-  private _getDomainType(domain: string) {
-    return ENTITY_DOMAINS_MAIN.has(domain) ||
-      (this._manifests?.[domain].integration_type === "entity" &&
-        !ENTITY_DOMAINS_OTHER.has(domain))
-      ? "dynamicGroups"
-      : this._manifests?.[domain].integration_type === "helper"
-        ? "helpers"
-        : "other";
-  }
-
-  private _sortDomainsByCollection(
-    type: AddAutomationElementDialogParams["type"],
-    entries: [
-      string,
-      { title: string; items: AddAutomationElementListItem[] },
-    ][]
-  ): { title: string; items: AddAutomationElementListItem[] }[] {
-    const order: string[] = [];
-
-    TYPES[type].collections.forEach((collection) => {
-      order.push(...Object.keys(collection.groups));
-    });
-
-    return entries
-      .sort((a, b) => {
-        const domainA = a[0];
-        const domainB = b[0];
-
-        if (order.includes(domainA) && order.includes(domainB)) {
-          return order.indexOf(domainA) - order.indexOf(domainB);
-        }
-
-        let typeA = domainA;
-        let typeB = domainB;
-
-        if (!order.includes(domainA)) {
-          typeA = this._getDomainType(domainA);
-        }
-
-        if (!order.includes(domainB)) {
-          typeB = this._getDomainType(domainB);
-        }
-
-        if (typeA === typeB) {
-          return stringCompare(
-            a[1].title,
-            b[1].title,
-            this.hass.locale.language
-          );
-        }
-        return order.indexOf(typeA) - order.indexOf(typeB);
-      })
-      .map((entry) => entry[1]);
-  }
-
   // #endregion data
 
   // #region data memoize
@@ -1466,12 +1368,12 @@ class DialogAddAutomationElement
 
   private _getAreaEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getAreaEntityLookup(Object.values(entities))
+      getAreaEntityLookup(Object.values(entities), true)
   );
 
   private _getDeviceEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getDeviceEntityLookup(Object.values(entities))
+      getDeviceEntityLookup(Object.values(entities), true)
   );
 
   private _extractTypeAndIdFromTarget = memoizeOne(
@@ -1536,9 +1438,8 @@ class DialogAddAutomationElement
       );
     });
 
-    return this._sortDomainsByCollection(
-      this._params!.type,
-      Object.entries(items)
+    return Object.values(items).sort((a, b) =>
+      stringCompare(a.title, b.title, this.hass.locale.language)
     );
   }
 
@@ -1647,9 +1548,8 @@ class DialogAddAutomationElement
       );
     });
 
-    return this._sortDomainsByCollection(
-      this._params!.type,
-      Object.entries(items)
+    return Object.values(items).sort((a, b) =>
+      stringCompare(a.title, b.title, this.hass.locale.language)
     );
   }
 
@@ -1680,9 +1580,8 @@ class DialogAddAutomationElement
       );
     });
 
-    return this._sortDomainsByCollection(
-      this._params!.type,
-      Object.entries(items)
+    return Object.values(items).sort((a, b) =>
+      stringCompare(a.title, b.title, this.hass.locale.language)
     );
   }
 
@@ -1695,7 +1594,11 @@ class DialogAddAutomationElement
   }
 
   private _back() {
-    mainWindow.history.back();
+    if (this._selectedTarget) {
+      this._targetPickerElement?.navigateBack();
+      return;
+    }
+    this._selectedGroup = undefined;
   }
 
   private _groupSelected(ev) {
@@ -1707,26 +1610,11 @@ class DialogAddAutomationElement
     }
     this._selectedGroup = group.value;
     this._selectedCollectionIndex = ev.currentTarget.index;
-
-    mainWindow.history.pushState(
-      {
-        dialogData: {
-          group: this._selectedGroup,
-          collectionIndex: this._selectedCollectionIndex,
-        },
-      },
-      ""
-    );
     requestAnimationFrame(() => {
       this._itemsListElement?.scrollTo(0, 0);
     });
   }
 
-  private _paste() {
-    this._params!.add(PASTE_VALUE);
-    this.closeDialog();
-  }
-
   private _selected(ev: CustomEvent<{ value: string }>) {
     let target: HassServiceTarget | undefined;
     if (
@@ -1746,14 +1634,6 @@ class DialogAddAutomationElement
     this._targetItems = undefined;
     this._loadItemsError = false;
     this._selectedTarget = ev.detail.value;
-    mainWindow.history.pushState(
-      {
-        dialogData: {
-          target: this._selectedTarget,
-        },
-      },
-      ""
-    );
 
     requestAnimationFrame(() => {
       if (this._narrow) {
@@ -1798,19 +1678,14 @@ class DialogAddAutomationElement
       }
 
       if (this._params!.type === "action") {
-        const items: string[] = await getServicesForTarget(
+        const items = await getServicesForTarget(
           this.hass.callWS,
           this._selectedTarget
         );
 
-        const filteredItems = items.filter(
-          // homeassistant services are too generic to be applied on the selected target
-          (service) => !service.startsWith("homeassistant.")
-        );
-
         this._targetItems = this._getDomainGroupedActionListItems(
           this.hass.localize,
-          filteredItems
+          items
         );
       }
     } catch (err) {
@@ -1873,10 +1748,6 @@ class DialogAddAutomationElement
     this._tab = "targets";
   }
 
-  private _handleClosed() {
-    this.closeDialog();
-  }
-
   // #region interaction
 
   // #region render helpers
@@ -2042,7 +1913,7 @@ class DialogAddAutomationElement
         ha-wa-dialog {
           --dialog-content-padding: var(--ha-space-0);
           --ha-dialog-min-height: min(
-            800px,
+            648px,
             calc(
               100vh - max(
                   var(--safe-area-inset-bottom),
@@ -2051,7 +1922,7 @@ class DialogAddAutomationElement
             )
           );
           --ha-dialog-min-height: min(
-            800px,
+            648px,
             calc(
               100dvh - max(
                   var(--safe-area-inset-bottom),
@@ -2144,7 +2015,7 @@ class DialogAddAutomationElement
           min-height: 160px;
         }
         .content.column ha-automation-add-from-target {
-          overflow: clip;
+          overflow: hidden;
         }
 
         ha-wa-dialog ha-automation-add-items {

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

@@ -553,6 +553,9 @@ export default class HaAutomationAddFromTarget extends LitElement {
           area.icon,
         ] as [string, string, string | undefined, string | undefined];
       })
+      .sort(([, nameA], [, nameB]) =>
+        stringCompare(nameA, nameB, this.hass.locale.language)
+      )
       .map(([areaTargetId, areaName, floorId, areaIcon]) => {
         const { open, devices, entities } =
           this._entries[`floor${TARGET_SEPARATOR}${floorId || ""}`].areas![
@@ -705,11 +708,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
           this.floors
         );
 
-        let label = entityName || deviceName || entityId;
-
-        if (this.entities[entityId]?.hidden) {
-          label += ` (${this.localize("ui.panel.config.automation.editor.entity_hidden")})`;
-        }
+        const label = entityName || deviceName || entityId;
 
         return [entityId, label, stateObj] as [string, string, HassEntity];
       })
@@ -838,12 +837,12 @@ export default class HaAutomationAddFromTarget extends LitElement {
 
   private _getAreaEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getAreaEntityLookup(Object.values(entities))
+      getAreaEntityLookup(Object.values(entities), true)
   );
 
   private _getDeviceEntityLookupMemoized = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
-      getDeviceEntityLookup(Object.values(entities))
+      getDeviceEntityLookup(Object.values(entities), true)
   );
 
   private _getSelectedTargetId = memoizeOne(
@@ -911,10 +910,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
     const services: Record<string, Level3Entries> = {};
 
     unassignedDevices.forEach(({ id: deviceId, entry_type }) => {
-      const device = this.devices[deviceId];
-      if (!device || device.disabled_by) {
-        return;
-      }
       const deviceEntry = {
         open: false,
         entities:
@@ -1016,10 +1011,6 @@ export default class HaAutomationAddFromTarget extends LitElement {
     const devices: Record<string, Level3Entries> = {};
 
     referenced_devices.forEach(({ id: deviceId }) => {
-      const device = this.devices[deviceId];
-      if (!device || device.disabled_by) {
-        return;
-      }
       devices[deviceId] = {
         open: false,
         entities:
@@ -1391,6 +1382,92 @@ export default class HaAutomationAddFromTarget extends LitElement {
     );
   }
 
+  public navigateBack() {
+    if (!this.value) {
+      return;
+    }
+
+    const valueType = Object.keys(this.value)[0].replace("_id", "");
+    const valueId = this.value[`${valueType}_id`];
+
+    if (
+      valueType === "floor" ||
+      valueType === "label" ||
+      (!valueId &&
+        (valueType === "device" ||
+          valueType === "helper" ||
+          valueType === "service" ||
+          valueType === "area"))
+    ) {
+      fireEvent(this, "value-changed", { value: undefined });
+      return;
+    }
+
+    if (valueType === "area") {
+      fireEvent(this, "value-changed", {
+        value: { floor_id: this.areas[valueId].floor_id || undefined },
+      });
+      return;
+    }
+
+    if (valueType === "device") {
+      if (
+        !this.devices[valueId].area_id &&
+        this.devices[valueId].entry_type === "service"
+      ) {
+        fireEvent(this, "value-changed", {
+          value: { service_id: undefined },
+        });
+        return;
+      }
+
+      fireEvent(this, "value-changed", {
+        value: { area_id: this.devices[valueId].area_id || undefined },
+      });
+      return;
+    }
+
+    if (valueType === "entity" && valueId) {
+      const deviceId = this.entities[valueId].device_id;
+      if (deviceId) {
+        fireEvent(this, "value-changed", {
+          value: { device_id: deviceId },
+        });
+        return;
+      }
+
+      const areaId = this.entities[valueId].area_id;
+      if (areaId) {
+        fireEvent(this, "value-changed", {
+          value: { area_id: areaId },
+        });
+        return;
+      }
+
+      const domain = valueId.split(".", 2)[0];
+      const manifest = this.manifests ? this.manifests[domain] : undefined;
+      if (manifest?.integration_type === "helper") {
+        fireEvent(this, "value-changed", {
+          value: { [`helper_${domain}_id`]: undefined },
+        });
+        return;
+      }
+
+      fireEvent(this, "value-changed", {
+        value: { [`entity_${domain}_id`]: undefined },
+      });
+    }
+
+    if (valueType.startsWith("helper_") || valueType.startsWith("entity_")) {
+      fireEvent(this, "value-changed", {
+        value: {
+          [`${valueType.startsWith("helper_") ? "helper" : "device"}_id`]:
+            undefined,
+        },
+      });
+    }
+  }
+
   private _expandHeight() {
     this._fullHeight = true;
     this.style.setProperty("--max-height", "none");

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

@@ -60,8 +60,6 @@ export class HaAutomationAddItems extends LitElement {
   @property({ type: Boolean, attribute: "tooltip-description" })
   public tooltipDescription = false;
 
-  @property({ type: Boolean, reflect: true }) scrollable = false;
-
   @state() private _itemsScrolled = false;
 
   @query(".items")
@@ -262,12 +260,11 @@ export class HaAutomationAddItems extends LitElement {
     :host {
       display: flex;
     }
-    :host([scrollable]) .items {
-      overflow: auto;
-    }
+
     .items {
       display: flex;
       flex-direction: column;
+      overflow: auto;
       flex: 1;
     }
     .items.blank {
@@ -276,7 +273,7 @@ export class HaAutomationAddItems extends LitElement {
       align-items: center;
       color: var(--ha-color-text-secondary);
       padding: var(--ha-space-0);
-      margin: var(--ha-space-0) var(--ha-space-4)
+      margin: var(--ha-space-3) var(--ha-space-4)
         max(var(--safe-area-inset-bottom), var(--ha-space-3));
       line-height: var(--ha-line-height-expanded);
       justify-content: center;
@@ -309,7 +306,7 @@ export class HaAutomationAddItems extends LitElement {
     .items .item-headline {
       display: flex;
       align-items: center;
-      gap: var(--ha-space-2);
+      gap: var(--ha-space-1);
       min-height: var(--ha-space-9);
       flex-wrap: wrap;
     }
@@ -369,16 +366,12 @@ export class HaAutomationAddItems extends LitElement {
     }
 
     .selected-target state-badge {
-      --mdc-icon-size: 24px;
+      --mdc-icon-size: 20px;
     }
     .selected-target state-badge,
-    .selected-target ha-floor-icon {
-      display: flex;
-      height: 32px;
-      width: 32px;
-      align-items: center;
-    }
     .selected-target ha-domain-icon {
+      width: 24px;
+      height: 24px;
       filter: grayscale(100%);
     }
   `;

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

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

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

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

src/panels/config/automation/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`
@@ -393,10 +393,6 @@ export class HaPlatformCondition extends LitElement {
   }
 
   static styles = css`
-    :host {
-      display: block;
-      margin: 0px calc(-1 * var(--ha-space-4));
-    }
     ha-settings-row {
       padding: 0 var(--ha-space-4);
     }

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,
@@ -329,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)}
             `;
           },
         },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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