Add back path to protocol config pages

* proper functionnames

* refactor _applyFilters on scenes and script page

* Apply suggestions from code review

---------

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

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+FROM mcr.microsoft.com/devcontainers/python:1-3.14
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
         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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
 
       # ℹ️ 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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -84,7 +84,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@2025.12.0
         with:
-          abi: cp313
+          abi: cp314
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

demo/src/ha-demo.ts

@@ -9,11 +9,14 @@ import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
+import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
+import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -60,6 +63,9 @@ export class HaDemo extends HomeAssistantAppEl {
     mockPersistentNotification(hass);
     mockConfigEntries(hass);
     mockAreaRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockFloorRegistry(hass);
+    mockLabelRegistry(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",

demo/src/stubs/frontend.ts

@@ -27,4 +27,25 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
+  hass.mockWS(
+    "frontend/subscribe_system_data",
+    (_msg, currentHass, onChange) => {
+      onChange?.({
+        value: currentHass.systemData,
+      });
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  );
+  hass.mockWS("labs/subscribe", (_msg, _currentHass, onChange) => {
+    onChange?.({
+      preview_feature: _msg.preview_feature,
+      domain: _msg.domain,
+      enabled: false,
+      is_built_in: true,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
+  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
 };

demo/src/stubs/template.ts

@@ -7,8 +7,18 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
     })
   );
   hass.mockWS("render_template", (msg, _hass, onChange) => {
+    let result = msg.template;
+    // Simple variable substitution for demo purposes
+    if (msg.variables) {
+      for (const [key, value] of Object.entries(msg.variables)) {
+        result = result.replace(
+          new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g"),
+          String(value)
+        );
+      }
+    }
     onChange!({
-      result: msg.template,
+      result,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
     // eslint-disable-next-line @typescript-eslint/no-empty-function

package.json

@@ -27,14 +27,14 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.28.6",
-    "@braintree/sanitize-url": "7.1.1",
+    "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.0",
     "@codemirror/commands": "6.10.1",
     "@codemirror/language": "6.12.1",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.5.4",
-    "@codemirror/view": "6.39.11",
+    "@codemirror/view": "6.39.12",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.2.0",
@@ -89,7 +89,7 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vibrant/color": "4.0.0",
+    "@vibrant/color": "4.0.4",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -122,7 +122,7 @@
     "luxon": "3.7.2",
     "marked": "17.0.1",
     "memoize-one": "6.0.0",
-    "node-vibrant": "4.0.3",
+    "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
@@ -151,12 +151,12 @@
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.6",
     "@bundle-stats/plugin-webpack-filter": "4.21.9",
-    "@lokalise/node-api": "15.6.0",
+    "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.0",
-    "@rspack/core": "1.7.3",
+    "@rsdoctor/rspack-plugin": "1.5.1",
+    "@rspack/core": "1.7.4",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -211,7 +211,7 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.5",
     "sinon": "21.0.1",
-    "tar": "7.5.6",
+    "tar": "7.5.7",
     "terser-webpack-plugin": "5.3.16",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
@@ -229,7 +229,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.1.0",
+    "globals": "17.2.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"

pyproject.toml

@@ -12,7 +12,7 @@ readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
 ]
-requires-python = ">=3.13.0"
+requires-python = ">=3.14.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

src/common/util/view-transition.ts

@@ -1,3 +1,15 @@
+let isViewTransitionDisabled = false;
+try {
+  isViewTransitionDisabled =
+    window.localStorage.getItem("disableViewTransition") === "true";
+} catch {
+  // ignore
+}
+
+export const setViewTransitionDisabled = (disabled: boolean): void => {
+  isViewTransitionDisabled = disabled;
+};
+
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -14,7 +26,7 @@
 export const withViewTransition = (
   callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (!document.startViewTransition) {
+  if (!document.startViewTransition || isViewTransitionDisabled) {
     callback(false);
     return Promise.resolve();
   }

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

@@ -58,7 +58,7 @@ export class HaSankeyChart extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

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

@@ -29,7 +29,7 @@ export class HaSunburstChart extends LitElement {
 
   @property({ attribute: false }) public data?: SunburstNode;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

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

@@ -50,16 +50,16 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -716,6 +716,18 @@ export class StateHistoryChartLine extends LitElement {
       // Add an entry for final values
       pushData(endTime, prevValues);
 
+      // For sensors, append current state if viewing recent data
+      const now = new Date();
+      // allow 1s of leeway for "now"
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      if (domain === "sensor" && isUpToNow && data.length === 1) {
+        const stateObj = this.hass.states[states.entity_id];
+        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+        if (currentValue !== null) {
+          data[0].data!.push([now, currentValue]);
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(datasets, data);
     });

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

@@ -47,9 +47,9 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "hide-reset-button", type: Boolean })
   public hideResetButton?: boolean;

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

@@ -60,7 +60,7 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
-  @property({ attribute: false, type: Number }) public hoursToShow?: number;
+  @property({ attribute: false }) public hoursToShow?: number;
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
@@ -73,9 +73,9 @@ export class StateHistoryCharts extends LitElement {
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 

src/components/chart/statistics-chart.ts

@@ -62,14 +62,14 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
   @property({ attribute: false }) public chartType: "line" | "bar" = "line";
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -605,6 +605,57 @@ export class StatisticsChart extends LitElement {
         }
       });
 
+      // Append current state if viewing recent data
+      const now = new Date();
+      // allow 10m of leeway for "now", because stats are 5 minute aggregated
+      const isUpToNow = now.getTime() - endTime.getTime() <= 600000;
+      if (isUpToNow) {
+        // Skip external statistics (they have ":" in the ID)
+        if (!statistic_id.includes(":")) {
+          const stateObj = this.hass.states[statistic_id];
+          if (stateObj) {
+            const currentValue = parseFloat(stateObj.state);
+            if (
+              isFinite(currentValue) &&
+              !this._hiddenStats.has(statistic_id)
+            ) {
+              // First, close out the last stat segment at prevEndTime
+              const lastEndTime = prevEndTime;
+              const lastValues = prevValues;
+              if (lastEndTime && lastValues) {
+                statDataSets.forEach((d, i) => {
+                  d.data!.push(
+                    this._transformDataValue([lastEndTime, ...lastValues[i]!])
+                  );
+                });
+              }
+              // Then push the current state at now
+              statTypes.forEach((type, i) => {
+                const val: (number | null)[] = [];
+                if (type === "sum" || type === "change") {
+                  // Skip cumulative types - need special calculation
+                  val.push(null);
+                } else if (
+                  type === bandTop &&
+                  this.chartType === "line" &&
+                  drawBands &&
+                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+                ) {
+                  // For band chart, current value is both min and max, so diff is 0
+                  val.push(0);
+                  val.push(currentValue);
+                } else {
+                  val.push(currentValue);
+                }
+                statDataSets[i].data!.push(
+                  this._transformDataValue([now, ...val])
+                );
+              });
+            }
+          }
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(totalDataSets, statDataSets);
       Array.prototype.push.apply(legendData, statLegendData);

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

@@ -130,9 +130,9 @@ export class HaDataTable extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: String }) public id = "id";
 
-  @property({ attribute: false, type: String }) public noDataText?: string;
+  @property({ attribute: false }) public noDataText?: string;
 
-  @property({ attribute: false, type: String }) public searchLabel?: string;
+  @property({ attribute: false }) public searchLabel?: string;
 
   @property({ type: Boolean, attribute: "no-label-float" })
   public noLabelFloat? = false;

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

@@ -48,7 +48,7 @@ export class HaDevicePicker extends LitElement {
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show only devices with entities from specific domains.

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

@@ -76,7 +76,7 @@ class HaEntitiesPicker extends LitElement {
   @property({ attribute: false })
   public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   @property({ type: Boolean })
   public reorder = false;

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

@@ -58,7 +58,7 @@ export class HaEntityPicker extends LitElement {
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show entities from specific domains.

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

@@ -78,7 +78,7 @@ export class HaStatisticPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public statisticIds?: StatisticsMetaData[];
 
   @property({ attribute: false }) public helpMissingEntityUrl =

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

@@ -11,7 +11,7 @@ class HaStatisticsPicker extends LitElement {
 
   @property({ type: Array }) public value?: string[];
 
-  @property({ attribute: false, type: Array }) public statisticIds?: string[];
+  @property({ attribute: false }) public statisticIds?: string[];
 
   @property({ attribute: "statistic-types" })
   public statisticTypes?: "mean" | "sum";

src/components/ha-assist-chat.ts

@@ -36,7 +36,7 @@ export class HaAssistChat extends LitElement {
   @property({ type: Boolean, attribute: "disable-speech" })
   public disableSpeech = false;
 
-  @property({ type: Boolean, attribute: false })
+  @property({ attribute: false })
   public startListening?: boolean;
 
   @query("#message-input") private _messageInput!: HaTextField;

src/components/ha-card.ts

@@ -51,6 +51,7 @@ export class HaCard extends LitElement {
       font-weight: var(--ha-font-weight-normal);
     }
 
+    /* clean-css ignore:start */
     :host
       ::slotted(
         .card-content:not(:nth-child(1 of .card-content, .card-header))
@@ -59,6 +60,7 @@ export class HaCard extends LitElement {
       padding-top: 0;
       margin-top: calc(var(--ha-space-2) * -1);
     }
+    /* clean-css ignore:end */
 
     :host ::slotted(.card-content) {
       padding: var(--ha-space-4);

src/components/ha-control-select-menu.ts

@@ -1,24 +1,31 @@
-import { SelectBase } from "@material/mwc-select/mwc-select-base";
 import { mdiMenuDown } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, nothing } from "lit";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { debounce } from "../common/util/debounce";
-import { nextRender } from "../common/util/render-status";
+import memoizeOne from "memoize-one";
+import type { HomeAssistant } from "../types";
+import "./ha-attribute-icon";
+import "./ha-dropdown";
+import "./ha-dropdown-item";
 import "./ha-icon";
-import type { HaIcon } from "./ha-icon";
-import "./ha-ripple";
 import "./ha-svg-icon";
-import type { HaSvgIcon } from "./ha-svg-icon";
-import "./ha-menu";
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  iconPath?: string;
+  icon?: string;
+  attributeIcon?: {
+    stateObj: HassEntity;
+    attribute: string;
+    attributeValue?: string;
+  };
+}
 
 @customElement("ha-control-select-menu")
-export class HaControlSelectMenu extends SelectBase {
-  @query(".select") protected mdcRoot!: HTMLElement;
-
-  @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
+export class HaControlSelectMenu extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, attribute: "show-arrow" })
   public showArrow = false;
@@ -26,95 +33,83 @@ export class HaControlSelectMenu extends SelectBase {
   @property({ type: Boolean, attribute: "hide-label" })
   public hideLabel = false;
 
-  @property() public options;
+  @property({ type: Boolean })
+  public disabled = false;
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.get("options")) {
-      this.layoutOptions();
-      this.selectByValue(this.value);
-    }
-  }
+  @property({ type: Boolean })
+  public required = false;
+
+  @property()
+  public label?: string;
+
+  @property()
+  public value?: string;
+
+  @property({ attribute: false }) public options: SelectOption[] = [];
+
+  @query("button") private _triggerButton!: HTMLButtonElement;
 
   public override render() {
-    const classes = {
-      "select-disabled": this.disabled,
-      "select-required": this.required,
-      "select-invalid": !this.isUiValid,
-      "select-no-value": !this.selectedText,
-    };
-
-    const labelledby = this.label && !this.hideLabel ? "label" : undefined;
-    const labelAttribute =
-      this.label && this.hideLabel ? this.label : undefined;
+    if (this.disabled) {
+      return this._renderTrigger();
+    }
 
     return html`
-      <div class="select ${classMap(classes)}">
-        <input
-          class="formElement"
-          .name=${this.name}
-          .value=${this.value}
-          hidden
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-        />
-        <!-- @ts-ignore -->
-        <div
-          class="select-anchor"
-          aria-autocomplete="none"
-          role="combobox"
-          aria-expanded=${this.menuOpen}
-          aria-invalid=${!this.isUiValid}
-          aria-haspopup="listbox"
-          aria-labelledby=${ifDefined(labelledby)}
-          aria-label=${ifDefined(labelAttribute)}
-          aria-required=${this.required}
-          aria-controls="listbox"
-          @focus=${this.onFocus}
-          @blur=${this.onBlur}
-          @click=${this.onClick}
-          @keydown=${this.onKeydown}
-        >
-          ${this._renderIcon()}
-          <div class="content">
-            ${this.hideLabel
-              ? nothing
-              : html`<p id="label" class="label">${this.label}</p>`}
-            ${this.selectedText
-              ? html`<p class="value">${this.selectedText}</p>`
-              : nothing}
-          </div>
-          ${this._renderArrow()}
-          <ha-ripple .disabled=${this.disabled}></ha-ripple>
-        </div>
-        ${this.renderMenu()}
-      </div>
+      <ha-dropdown placement="bottom" @wa-show=${this._showDropdown}>
+        ${this._renderTrigger()} ${this.options.map(this._renderOption)}
+      </ha-dropdown>
     `;
   }
 
-  protected override renderMenu() {
-    const classes = this.getMenuClasses();
-    return html`<ha-menu
-      innerRole="listbox"
-      wrapFocus
-      class=${classMap(classes)}
-      activatable
-      .fullwidth=${this.fixedMenuPosition ? false : !this.naturalMenuWidth}
-      .open=${this.menuOpen}
-      .anchor=${this.anchorElement}
-      .fixed=${this.fixedMenuPosition}
-      @selected=${this.onSelected}
-      @opened=${this.onOpened}
-      @closed=${this.onClosed}
-      @items-updated=${this.onItemsUpdated}
-      @keydown=${this.handleTypeahead}
+  private _renderTrigger() {
+    const selectedText = this.getValueObject(this.options, this.value)?.label;
+
+    const classes = {
+      "select-disabled": this.disabled,
+      "select-required": this.required,
+      "select-no-value": !selectedText,
+    };
+
+    return html`<button
+      ?disabled=${this.disabled}
+      slot="trigger"
+      class="select-anchor ${classMap(classes)}"
     >
-      ${this.renderMenuContent()}
-    </ha-menu>`;
+      ${this._renderIcon()}
+      <div class="content">
+        ${this.hideLabel
+          ? nothing
+          : html`<p id="label" class="label">${this.label}</p>`}
+        ${selectedText ? html`<p class="value">${selectedText}</p>` : nothing}
+      </div>
+      ${this._renderArrow()}
+    </button>`;
   }
 
+  private _renderOption = (option: SelectOption) =>
+    html`<ha-dropdown-item
+      .value=${option.value}
+      class=${this.value === option.value ? "selected" : ""}
+      >${option.iconPath
+        ? html`<ha-svg-icon slot="icon" .path=${option.iconPath}></ha-svg-icon>`
+        : option.icon
+          ? html`<ha-icon slot="icon" .icon=${option.icon}></ha-icon>`
+          : option.attributeIcon
+            ? html`<ha-attribute-icon
+                slot="icon"
+                .hass=${this.hass}
+                .stateObj=${option.attributeIcon.stateObj}
+                .attribute=${option.attributeIcon.attribute}
+                .attributeValue=${option.attributeIcon.attributeValue}
+              ></ha-attribute-icon>`
+            : nothing}
+      ${option.label}</ha-dropdown-item
+    >`;
+
   private _renderArrow() {
-    if (!this.showArrow) return nothing;
+    if (!this.showArrow) {
+      return nothing;
+    }
 
     return html`
       <div class="icon">
@@ -124,47 +119,42 @@ export class HaControlSelectMenu extends SelectBase {
   }
 
   private _renderIcon() {
-    const index = this.mdcFoundation?.getSelectedIndex();
-    const items = this.menuElement?.items ?? [];
-    const item = index != null ? items[index] : undefined;
+    const { iconPath, icon, attributeIcon } =
+      this.getValueObject(this.options, this.value) ?? {};
     const defaultIcon = this.querySelector("[slot='icon']");
-    const icon = (item?.querySelector("[slot='graphic']") ?? null) as
-      | HaSvgIcon
-      | HaIcon
-      | null;
-
-    if (!defaultIcon && !icon) {
-      return null;
-    }
 
     return html`
       <div class="icon">
-        ${icon && icon.localName === "ha-svg-icon" && "path" in icon
-          ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
-          : icon && icon.localName === "ha-icon" && "icon" in icon
-            ? html`<ha-icon .path=${icon.icon}></ha-icon>`
-            : html`<slot name="icon"></slot>`}
+        ${iconPath
+          ? html`<ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>`
+          : icon
+            ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
+            : attributeIcon
+              ? html`<ha-attribute-icon
+                  slot="icon"
+                  .hass=${this.hass}
+                  .stateObj=${attributeIcon.stateObj}
+                  .attribute=${attributeIcon.attribute}
+                  .attributeValue=${attributeIcon.attributeValue}
+                ></ha-attribute-icon>`
+              : defaultIcon
+                ? html`<slot name="icon"></slot>`
+                : nothing}
       </div>
     `;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("translations-updated", this._translationsUpdated);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "translations-updated",
-      this._translationsUpdated
+  private _showDropdown() {
+    this.style.setProperty(
+      "--control-select-menu-width",
+      `${this._triggerButton.offsetWidth}px`
     );
   }
 
-  private _translationsUpdated = debounce(async () => {
-    await nextRender();
-    this.layoutOptions();
-  }, 500);
+  private getValueObject = memoizeOne(
+    (options: SelectOption[], value?: string) =>
+      options.find((option) => option.value === value)
+  );
 
   static override styles = [
     css`
@@ -186,6 +176,8 @@ export class HaControlSelectMenu extends SelectBase {
         -webkit-tap-highlight-color: transparent;
       }
       .select-anchor {
+        border: none;
+        text-align: left;
         height: var(--control-select-menu-height);
         padding: var(--control-select-menu-padding);
         overflow: hidden;
@@ -211,6 +203,12 @@ export class HaControlSelectMenu extends SelectBase {
         font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;
       }
+      .select-anchor:hover {
+        --control-select-menu-background-color: var(
+          --ha-color-on-neutral-quiet
+        );
+      }
+
       .content {
         display: flex;
         flex-direction: column;
@@ -230,16 +228,19 @@ export class HaControlSelectMenu extends SelectBase {
       }
 
       .label {
-        font-size: 0.85em;
+        font-size: var(--ha-font-size-s);
         letter-spacing: 0.4px;
       }
-
       .select-no-value .label {
         font-size: inherit;
         line-height: inherit;
         letter-spacing: inherit;
       }
 
+      .content .value {
+        font-size: var(--ha-font-size-m);
+      }
+
       .select-anchor:focus-visible {
         box-shadow: 0 0 0 2px var(--control-select-menu-focus-color);
       }
@@ -258,10 +259,23 @@ export class HaControlSelectMenu extends SelectBase {
         opacity: var(--control-select-menu-background-opacity);
       }
 
-      .select-disabled .select-anchor {
+      .select-disabled.select-anchor {
         cursor: not-allowed;
         color: var(--disabled-color);
       }
+      ha-dropdown-item.selected {
+        font-weight: var(--ha-font-weight-medium);
+        color: var(--primary-color);
+        background-color: var(--ha-color-fill-primary-quiet-resting);
+        --icon-primary-color: var(--primary-color);
+      }
+      ha-dropdown-item.selected:hover {
+        background-color: var(--ha-color-fill-primary-quiet-hover);
+      }
+
+      ha-dropdown::part(menu) {
+        min-width: var(--control-select-menu-width);
+      }
     `,
   ];
 }

src/components/ha-control-switch.ts

@@ -24,10 +24,10 @@ export class HaControlSwitch extends LitElement {
   @property({ type: Boolean }) public checked = false;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
-  @property({ attribute: false, type: String }) pathOn?: string;
+  @property({ attribute: false }) pathOn?: string;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
-  @property({ attribute: false, type: String }) pathOff?: string;
+  @property({ attribute: false }) pathOff?: string;
 
   @property({ type: String })
   public label?: string;

src/components/ha-dialog.ts

@@ -88,6 +88,9 @@ export class HaDialog extends DialogBase {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         --mdc-typography-headline6-font-size: 1.574rem;
       }
+      .mdc-dialog .mdc-dialog__scrim {
+        background-color: var(--mdc-dialog-scrim-color, none);
+      }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
         padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)

src/components/ha-dropdown-item.ts

@@ -1,9 +1,9 @@
 import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
 import "@home-assistant/webawesome/dist/components/icon/icon";
+import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 import { css, type CSSResultGroup, html } from "lit";
 import { customElement } from "lit/decorators";
 import "./ha-svg-icon";
-import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 
 /**
  * Home Assistant dropdown item component

src/components/ha-dropdown.ts

@@ -1,6 +1,9 @@
 import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
 import { css, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { HaDropdownItem } from "./ha-dropdown-item";
+
+export type HaDropdownSelectEvent = CustomEvent<{ item: HaDropdownItem }>;
 
 /**
  * Home Assistant dropdown component

src/components/ha-filter-categories.ts

@@ -31,6 +31,7 @@ import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-list";
 import "./ha-list-item";
+import type { HaDropdownSelectEvent } from "./ha-dropdown";
 
 @customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -174,7 +175,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const categoryId = (ev.currentTarget as any).categoryId;
     const action = ev.detail.item.value;
     switch (action) {

src/components/ha-form/ha-form-multi_select.ts

@@ -11,8 +11,7 @@ import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-picker-field";
 
-import type { HaDropdown } from "../ha-dropdown";
-import type { HaDropdownItem } from "../ha-dropdown-item";
+import type { HaDropdown, HaDropdownSelectEvent } from "../ha-dropdown";
 import type {
   HaFormElement,
   HaFormMultiSelectData,
@@ -108,7 +107,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     `;
   }
 
-  protected _toggleItem(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  protected _toggleItem(ev: HaDropdownSelectEvent) {
     ev.preventDefault(); // keep the dropdown open
     const value = ev.detail.item.value;
     const action = (ev.detail.item as any).action;

src/components/ha-form/ha-form-optional_actions.ts

@@ -17,6 +17,7 @@ import type {
   HaFormOptionalActionsSchema,
   HaFormSchema,
 } from "./types";
+import type { HaDropdownSelectEvent } from "../ha-dropdown";
 
 const NO_ACTIONS = [];
 
@@ -142,7 +143,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     `;
   }
 
-  private _handleAddAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAddAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
     this._displayActions = [...(this._displayActions ?? []), action];
   }

src/components/ha-gauge.ts

@@ -30,7 +30,7 @@ export class HaGauge extends LitElement {
   @property({ attribute: false })
   public formatOptions?: Intl.NumberFormatOptions;
 
-  @property({ attribute: false, type: String }) public valueText?: string;
+  @property({ attribute: false }) public valueText?: string;
 
   @property({ attribute: false }) public locale!: FrontendLocaleData;
 

src/components/ha-generic-picker.ts

@@ -48,7 +48,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     section?: string
   ) => (PickerComboBoxItem | string)[] | undefined;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
 
   @property({ attribute: false })

src/components/ha-hs-color-picker.ts

@@ -113,13 +113,13 @@ class HaHsColorPicker extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
-  @property({ type: Number, attribute: false })
+  @property({ attribute: false })
   public renderSize?: number;
 
   @property({ type: Array })
   public value?: [number, number];
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public colorBrightness?: number;
 
   @property({ type: Number })
@@ -131,10 +131,10 @@ class HaHsColorPicker extends LitElement {
   @property({ type: Number })
   public ww?: number;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public minKelvin?: number;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public maxKelvin?: number;
 
   @query("#canvas") private _canvas!: HTMLCanvasElement;

src/components/ha-icon-button-toolbar.ts

@@ -19,7 +19,7 @@ export interface HaIconButtonToolbarItem {
 
 @customElement("ha-icon-button-toolbar")
 export class HaIconButtonToolbar extends LitElement {
-  @property({ type: Array, attribute: false })
+  @property({ attribute: false })
   public items: (HaIconButtonToolbarItem | string)[] = [];
 
   @queryAll("ha-icon-button") private _buttons?: HaIconButton[];

src/components/ha-markdown.ts

@@ -134,16 +134,51 @@ export class HaMarkdown extends LitElement {
     }
     table[role="presentation"] {
       --markdown-table-border-collapse: separate;
-      --markdown-table-border-width: attr(border, 0);
+      --markdown-table-border-width: 0;
       --markdown-table-padding-inline: 0;
       --markdown-table-padding-block: 0;
-      th {
-        vertical-align: attr(valign, middle);
-      }
+      th,
       td {
+        vertical-align: middle;
+      }
+    }
+    table[role="presentation"] td[valign="top"],
+    table[role="presentation"] th[valign="top"] {
+      vertical-align: top;
+    }
+    table[role="presentation"] td[valign="middle"],
+    table[role="presentation"] th[valign="middle"] {
+      vertical-align: middle;
+    }
+    table[role="presentation"] td[valign="bottom"],
+    table[role="presentation"] th[valign="bottom"] {
+      vertical-align: bottom;
+    }
+    table[role="presentation"] td[valign="baseline"],
+    table[role="presentation"] th[valign="baseline"] {
+      vertical-align: baseline;
+    }
+    @supports (border-width: attr(border px, 0)) {
+      table[role="presentation"] {
+        --markdown-table-border-width: attr(border px, 0);
+      }
+      table[role="presentation"] th,
+      table[role="presentation"] td {
         vertical-align: attr(valign, middle);
       }
     }
+    table[role="presentation"][border="0"] {
+      --markdown-table-border-width: 0;
+    }
+    table[role="presentation"][border="1"] {
+      --markdown-table-border-width: 1px;
+    }
+    table[role="presentation"][border="2"] {
+      --markdown-table-border-width: 2px;
+    }
+    table[role="presentation"][border="3"] {
+      --markdown-table-border-width: 3px;
+    }
     table {
       border-collapse: var(--markdown-table-border-collapse, collapse);
     }

src/components/ha-navigation-picker.ts

@@ -11,6 +11,7 @@ import { fetchConfig } from "../data/lovelace/config/types";
 import { getPanelIcon, getPanelTitle } from "../data/panel";
 import { findRelated, type RelatedResult } from "../data/search";
 import { PANEL_DASHBOARDS } from "../panels/config/lovelace/dashboards/ha-config-lovelace-dashboards";
+import { computeAreaPath } from "../panels/lovelace/strategies/areas/helpers/areas-strategy-helper";
 import { multiTermSortedSearch } from "../resources/fuseMultiTerm";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { ActionRelatedContext } from "../panels/lovelace/components/hui-action-editor";
@@ -25,8 +26,9 @@ import {
 type NavigationGroup = "related" | "dashboards" | "views" | "other_routes";
 
 const RELATED_SORT_PREFIX = {
-  area: "0_area",
-  device: "1_device",
+  area_view: "0_area_view",
+  area: "1_area_settings",
+  device: "2_device",
 } as const;
 
 interface NavigationItem extends PickerComboBoxItem {
@@ -437,10 +439,31 @@ export class HaNavigationPicker extends LitElement {
     for (const areaId of relatedAreaIds) {
       const area = this.hass.areas[areaId];
       const primary = area?.name ?? areaId;
+
+      // Area dashboard view
+      const viewPath = `/home/${computeAreaPath(areaId)}`;
+      relatedItems.push({
+        id: viewPath,
+        primary,
+        secondary: viewPath,
+        icon: area?.icon ?? undefined,
+        icon_path: area?.icon ? undefined : mdiTextureBox,
+        sorting_label: createSortingLabel(
+          RELATED_SORT_PREFIX.area_view,
+          primary,
+          viewPath
+        ),
+        group: "related",
+      });
+
+      // Area settings
       const path = `/config/areas/area/${areaId}`;
       relatedItems.push({
         id: path,
-        primary,
+        primary: this.hass.localize(
+          "ui.components.navigation-picker.area_settings",
+          { area: primary }
+        ),
         secondary: path,
         icon: area?.icon ?? undefined,
         icon_path: area?.icon ? undefined : mdiTextureBox,

src/components/ha-password-field.ts

@@ -89,7 +89,7 @@ export class HaPasswordField extends LitElement {
   @property({ type: Boolean }) readOnly = false;
 
   // eslint-disable-next-line lit/no-native-attributes
-  @property({ attribute: false, type: String }) autocapitalize = "";
+  @property({ attribute: false }) autocapitalize = "";
 
   @state() private _unmaskedPassword = false;
 

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

@@ -22,6 +22,7 @@ import {
 import { haStyleScrollbar } from "../resources/styles";
 import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
+import { isTouch } from "../util/is_touch";
 import "./chips/ha-chip-set";
 import "./chips/ha-filter-chip";
 import "./ha-combo-box-item";
@@ -118,7 +119,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     section?: string
   ) => PickerComboBoxItem[] | undefined;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
 
   @property({ attribute: false })
@@ -284,6 +285,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           section === "separator"
             ? html`<div class="separator"></div>`
             : html`<ha-filter-chip
+                @mousedown=${isTouch ? undefined : this._preventBlur}
                 @click=${this._toggleSection}
                 .section-id=${section.id}
                 .selected=${this._selectedSection === section.id}
@@ -506,6 +508,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     this._valuePinned = true;
   };
 
+  private _preventBlur(ev: Event) {
+    ev.preventDefault();
+  }
+
   private _toggleSection(ev: Event) {
     ev.stopPropagation();
     this._resetSelectedItem();

src/components/ha-qr-code.ts

@@ -22,7 +22,7 @@ export class HaQrCode extends LitElement {
   @property({ type: Number })
   public margin = 4;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public maskPattern?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
   @property({ attribute: "center-image" }) public centerImage?: string;

src/components/ha-qr-scanner.ts

@@ -14,8 +14,8 @@ import type { HomeAssistant } from "../types";
 import "./ha-alert";
 import "./ha-button";
 import "./ha-dropdown";
+import type { HaDropdownSelectEvent } from "./ha-dropdown";
 import "./ha-dropdown-item";
-import type { HaDropdownItem } from "./ha-dropdown-item";
 import "./ha-spinner";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
@@ -259,7 +259,7 @@ class HaQrScanner extends LitElement {
     this._qrCodeScanned(this._manualInput!.value);
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const cameraId = ev.detail?.item?.value;
     if (cameraId) {
       this._selectedCamera = cameraId;

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

@@ -224,6 +224,7 @@ ${typeof this._templateResult.result === "object"
       margin-bottom: 0;
       direction: ltr;
       border-radius: var(--ha-border-radius-sm);
+      overflow-wrap: break-word;
     }
   `;
 }

src/components/ha-target-picker.ts

@@ -76,7 +76,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public compact = false;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show only targets with entities from specific domains.

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -48,7 +48,7 @@ export class TopAppBarBaseBase extends BaseElement {
 
   @query(".pane .ha-scrollbar") private _paneElement?: HTMLElement;
 
-  @property({ attribute: false, type: Object })
+  @property({ attribute: false })
   get scrollTarget() {
     return this._scrollTarget || window;
   }

src/components/media-player/dialog-media-player-browse.ts

@@ -21,8 +21,8 @@ import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-dialog-header";
 import "../ha-dropdown";
+import type { HaDropdownSelectEvent } from "../ha-dropdown";
 import "../ha-dropdown-item";
-import type { HaDropdownItem } from "../ha-dropdown-item";
 import "../ha-icon-button-arrow-prev";
 import "../ha-wa-dialog";
 import "./ha-media-manage-button";
@@ -177,7 +177,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     this.classList.add("opened");
   }
 
-  private async _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private async _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
     switch (action) {
       case "auto":

src/components/tile/ha-tile-container.ts

@@ -15,7 +15,7 @@ export class HaTileContainer extends LitElement {
   @property({ type: Boolean })
   public vertical = false;
 
-  @property({ type: Boolean, attribute: false })
+  @property({ attribute: false })
   public interactive = false;
 
   @property({ attribute: false })

src/data/climate.ts

@@ -53,6 +53,7 @@ export type ClimateEntity = HassEntityBase & {
     current_humidity?: number;
     target_humidity_low?: number;
     target_humidity_high?: number;
+    target_humidity_step?: number;
     min_humidity?: number;
     max_humidity?: number;
     fan_mode?: string;

src/data/data_table_filters.ts

@@ -35,7 +35,7 @@ export const deserializeFilters = (value: DataTableFilters) => {
 
 // returns true when this filter has *selected* options and the filter's name
 // equals the given filterName
-export const isUsedFilter = (
+export const isFilterUsed = (
   key: string,
   filter: DataTableFilter,
   filterName: string
@@ -49,7 +49,7 @@ export const isUsedFilter = (
 // which has resulted in a list of items that match these selected opions
 // (this list can be empty),
 // and the filter's name equals (one of) the given filterName(s)
-export const isUsedRelatedItemsFilter = (
+export const isRelatedItemsFilterUsed = (
   key: string,
   filter: DataTableFilter,
   filterName: string | string[]

src/data/energy.ts

@@ -511,6 +511,15 @@ const getEnergyData = async (
         "mean",
       ])
     : {};
+  // If power stats 5 minute data is selected, then also fetch hourly data which
+  // will be used to back-fill any missing data points in the 5 minute data when
+  // the requested range is beyond the limit of short term statistics.
+  const _powerStatsHour: Statistics | Promise<Statistics> =
+    powerStatIds.length && finePeriod === "5minute"
+      ? fetchStatistics(hass!, start, end, powerStatIds, "hour", powerUnits, [
+          "mean",
+        ])
+      : {};
 
   const _waterStats: Statistics | Promise<Statistics> = waterStatIds.length
     ? fetchStatistics(hass!, start, end, waterStatIds, period, waterUnits, [
@@ -619,6 +628,7 @@ const getEnergyData = async (
   const [
     energyStats,
     powerStats,
+    powerStatsHour,
     waterStats,
     energyStatsCompare,
     waterStatsCompare,
@@ -627,12 +637,44 @@ const getEnergyData = async (
   ] = await Promise.all([
     _energyStats,
     _powerStats,
+    _powerStatsHour,
     _waterStats,
     _energyStatsCompare,
     _waterStatsCompare,
     _fossilEnergyConsumption,
     _fossilEnergyConsumptionCompare,
   ]);
+
+  // Back-fill any missing power statistics from hourly data if present
+  if (Object.keys(powerStatsHour).length) {
+    powerStatIds.forEach((powerId) => {
+      if (powerId in powerStatsHour) {
+        // If we have extra hourly power statistics for an ID, we may need to
+        // insert data into statistics
+        if (powerId in powerStats && powerStats[powerId].length) {
+          // We have 5-minute data. Only insert hourly values for time periods
+          // before the first 5-minute value.
+          const powerStatFirst = powerStats[powerId][0];
+          const powerStatHour = powerStatsHour[powerId];
+          let powerStatHourLast = 0;
+          for (const powerStat of powerStatHour) {
+            if (powerStat.end > powerStatFirst.start) {
+              break;
+            }
+            powerStatHourLast++;
+          }
+          powerStats[powerId] = [
+            ...powerStatHour.slice(0, powerStatHourLast),
+            ...powerStats[powerId],
+          ];
+        } else {
+          // There was no 5-minute data, so simply insert full hourly data
+          powerStats[powerId] = powerStatsHour[powerId];
+        }
+      }
+    });
+  }
+
   const stats = { ...energyStats, ...waterStats, ...powerStats };
   if (compare) {
     statsCompare = { ...energyStatsCompare, ...waterStatsCompare };

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -91,9 +91,11 @@ export const showConfigFlowDialog = (
 
     renderShowFormStepFieldLabel(hass, step, field, options) {
       if (field.type === "expandable") {
-        return hass.localize(
-          `component.${step.handler}.config.step.${step.step_id}.sections.${field.name}.name`,
-          step.description_placeholders
+        return (
+          hass.localize(
+            `component.${step.handler}.config.step.${step.step_id}.sections.${field.name}.name`,
+            step.description_placeholders
+          ) || field.name
         );
       }
 

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -95,9 +95,11 @@ export const showOptionsFlowDialog = (
 
       renderShowFormStepFieldLabel(hass, step, field, options) {
         if (field.type === "expandable") {
-          return hass.localize(
-            `component.${configEntry.domain}.options.step.${step.step_id}.sections.${field.name}.name`,
-            step.description_placeholders
+          return (
+            hass.localize(
+              `component.${configEntry.domain}.options.step.${step.step_id}.sections.${field.name}.name`,
+              step.description_placeholders
+            ) || field.name
           );
         }
 

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -86,9 +86,11 @@ export const showSubConfigFlowDialog = (
 
     renderShowFormStepFieldLabel(hass, step, field, options) {
       if (field.type === "expandable") {
-        return hass.localize(
-          `component.${configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.sections.${field.name}.name`,
-          step.description_placeholders
+        return (
+          hass.localize(
+            `component.${configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.sections.${field.name}.name`,
+            step.description_placeholders
+          ) || field.name
         );
       }
 

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

@@ -8,9 +8,7 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
@@ -29,6 +27,7 @@ import "../../../state-control/climate/ha-state-control-climate-temperature";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type MainControl = "temperature" | "humidity";
 
@@ -169,182 +168,112 @@ class MoreInfoClimate extends LitElement {
       </div>
       <ha-more-info-control-select-container>
         <ha-control-select-menu
+          .hass=${this.hass}
           .label=${this.hass.localize("ui.card.climate.mode")}
           .value=${stateObj.state}
           .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._handleOperationModeChanged}
-          @closed=${stopPropagation}
-        >
-          ${html`
-            <ha-svg-icon
-              slot="icon"
-              .path=${climateHvacModeIcon(stateObj.state)}
-            ></ha-svg-icon>
-          `}
-          ${stateObj.attributes.hvac_modes
+          .options=${stateObj.attributes.hvac_modes
             .concat()
             .sort(compareClimateHvacModes)
-            .map(
-              (mode) => html`
-                <ha-list-item .value=${mode} graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${climateHvacModeIcon(mode)}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityState(stateObj, mode)}
-                </ha-list-item>
-              `
-            )}
+            .map((mode) => ({
+              value: mode,
+              iconPath: climateHvacModeIcon(mode),
+              label: this.hass.formatEntityState(stateObj, mode),
+            }))}
+          @wa-select=${this._handleOperationModeChanged}
+        >
+          <ha-svg-icon
+            slot="icon"
+            .path=${climateHvacModeIcon(stateObj.state)}
+          ></ha-svg-icon>
         </ha-control-select-menu>
         ${supportPresetMode && stateObj.attributes.preset_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "preset_mode"
                 )}
                 .value=${stateObj.attributes.preset_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handlePresetmodeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handlePresetmodeChanged}
+                .options=${stateObj.attributes.preset_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "preset_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "preset_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.preset_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${stateObj.attributes.preset_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.preset_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "preset_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportFanMode && stateObj.attributes.fan_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "fan_mode"
                 )}
                 .value=${stateObj.attributes.fan_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleFanModeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleFanModeChanged}
+                .options=${stateObj.attributes.fan_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "fan_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "fan_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.fan_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="fan_mode"
-                        .attributeValue=${stateObj.attributes.fan_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.fan_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="fan_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "fan_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportSwingMode && stateObj.attributes.swing_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "swing_mode"
                 )}
                 .value=${stateObj.attributes.swing_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleSwingmodeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleSwingmodeChanged}
+                .options=${stateObj.attributes.swing_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "swing_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "swing_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.swing_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_mode"
-                        .attributeValue=${stateObj.attributes.swing_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiArrowOscillating}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.swing_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "swing_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiArrowOscillating}
+                ></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -352,52 +281,34 @@ class MoreInfoClimate extends LitElement {
         stateObj.attributes.swing_horizontal_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "swing_horizontal_mode"
                 )}
                 .value=${stateObj.attributes.swing_horizontal_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleSwingHorizontalmodeChanged}
-                @closed=${stopPropagation}
-              >
-                ${stateObj.attributes.swing_horizontal_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_horizontal_mode"
-                        .attributeValue=${stateObj.attributes
-                          .swing_horizontal_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiArrowOscillating}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.swing_horizontal_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_horizontal_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "swing_horizontal_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
+                @wa-select=${this._handleSwingHorizontalmodeChanged}
+                .options=${stateObj.attributes.swing_horizontal_modes.map(
+                  (mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityAttributeValue(
+                      stateObj,
+                      "swing_horizontal_mode",
+                      mode
+                    ),
+                    attributeIcon: {
+                      stateObj,
+                      attribute: "swing_horizontal_mode",
+                      attributeValue: mode,
+                    },
+                  })
                 )}
+              >
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiArrowOscillating}
+                ></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -410,8 +321,8 @@ class MoreInfoClimate extends LitElement {
     this._mainControl = ev.currentTarget.control;
   }
 
-  private _handleFanModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleFanModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.fan_mode,
       newVal,
@@ -420,15 +331,15 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handleOperationModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleOperationModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(this.stateObj!.state, newVal, "set_hvac_mode", {
       hvac_mode: newVal,
     });
   }
 
-  private _handleSwingmodeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleSwingmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.swing_mode,
       newVal,
@@ -437,8 +348,8 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handleSwingHorizontalmodeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleSwingHorizontalmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.swing_horizontal_mode,
       newVal,
@@ -447,8 +358,8 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handlePresetmodeChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handlePresetmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value || null;
     if (newVal) {
       this._callServiceHelper(
         this.stateObj!.attributes.preset_mode,

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

@@ -9,7 +9,6 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
@@ -31,6 +30,7 @@ import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import "../components/ha-more-info-state-header";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("more-info-fan")
 class MoreInfoFan extends LitElement {
@@ -48,8 +48,8 @@ class MoreInfoFan extends LitElement {
     });
   };
 
-  private _handleDirection(ev) {
-    const newVal = ev.target.value;
+  private _handleDirection(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this.stateObj?.attributes.direction;
 
     if (!newVal || oldVal === newVal) return;
@@ -60,8 +60,8 @@ class MoreInfoFan extends LitElement {
     });
   }
 
-  private _handlePresetMode(ev) {
-    const newVal = ev.target.value;
+  private _handlePresetMode(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this._presetMode;
 
     if (!newVal || oldVal === newVal) return;
@@ -73,8 +73,8 @@ class MoreInfoFan extends LitElement {
     });
   }
 
-  private _handleOscillating(ev) {
-    const newVal = ev.target.value === "true";
+  private _handleOscillating(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value === "true";
     const oldVal = this.stateObj?.attributes.oscillating;
 
     if (oldVal === newVal) return;
@@ -176,65 +176,64 @@ class MoreInfoFan extends LitElement {
         ${supportsPresetMode && this.stateObj.attributes.preset_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "preset_mode"
                 )}
                 .value=${this.stateObj.attributes.preset_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handlePresetMode}
-                @closed=${stopPropagation}
-              >
-                ${this.stateObj.attributes.preset_mode
-                  ? html`<ha-attribute-icon
-                      slot="icon"
-                      .hass=${this.hass}
-                      .stateObj=${this.stateObj}
-                      attribute="preset_mode"
-                      .attributeValue=${this.stateObj.attributes.preset_mode}
-                    ></ha-attribute-icon>`
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${this.stateObj.attributes.preset_modes?.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${this.stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        this.stateObj!,
-                        "preset_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
+                @wa-select=${this._handlePresetMode}
+                .options=${this.stateObj.attributes.preset_modes.map(
+                  (mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityAttributeValue(
+                      this.stateObj!,
+                      "preset_mode",
+                      mode
+                    ),
+                    attributeIcon: this.stateObj
+                      ? {
+                          stateObj: this.stateObj,
+                          attribute: "preset_mode",
+                          attributeValue: mode,
+                        }
+                      : undefined,
+                  })
                 )}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportsDirection
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "direction"
                 )}
                 .value=${this.stateObj.attributes.direction}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleDirection}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleDirection}
+                .options=${["forward", "reverse"].map((direction) => ({
+                  value: direction,
+                  label: this.stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        this.stateObj,
+                        "direction",
+                        direction
+                      )
+                    : direction,
+                  attributeIcon: this.stateObj
+                    ? {
+                        stateObj: this.stateObj,
+                        attribute: "direction",
+                        attributeValue: direction,
+                      }
+                    : undefined,
+                }))}
               >
                 <ha-attribute-icon
                   slot="icon"
@@ -243,40 +242,13 @@ class MoreInfoFan extends LitElement {
                   attribute="direction"
                   .attributeValue=${this.stateObj.attributes.direction}
                 ></ha-attribute-icon>
-                <ha-list-item value="forward" graphic="icon">
-                  <ha-attribute-icon
-                    slot="graphic"
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    attribute="direction"
-                    attributeValue="forward"
-                  ></ha-attribute-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "direction",
-                    "forward"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="reverse" graphic="icon">
-                  <ha-attribute-icon
-                    slot="graphic"
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    attribute="direction"
-                    attributeValue="reverse"
-                  ></ha-attribute-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "direction",
-                    "reverse"
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportsOscillate
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "oscillating"
@@ -285,37 +257,26 @@ class MoreInfoFan extends LitElement {
                   ? "true"
                   : "false"}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleOscillating}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleOscillating}
+                .options=${["true", "false"].map((val) => ({
+                  value: val,
+                  iconPath:
+                    val === "true"
+                      ? mdiArrowOscillating
+                      : mdiArrowOscillatingOff,
+                  label: this.stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        this.stateObj,
+                        "oscillating",
+                        val === "true"
+                      )
+                    : val,
+                }))}
               >
                 <ha-svg-icon
                   slot="icon"
                   .path=${mdiArrowOscillatingOff}
                 ></ha-svg-icon>
-                <ha-list-item value="true" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiArrowOscillating}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "oscillating",
-                    true
-                  )}
-                </ha-list-item>
-                <ha-list-item value="false" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiArrowOscillatingOff}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "oscillating",
-                    false
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}

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

@@ -2,7 +2,6 @@ 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 { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
@@ -14,6 +13,7 @@ import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("more-info-humidifier")
 class MoreInfoHumidifier extends LitElement {
@@ -74,68 +74,48 @@ class MoreInfoHumidifier extends LitElement {
 
       <ha-more-info-control-select-container>
         <ha-control-select-menu
+          .hass=${hass}
           .label=${this.hass.localize("ui.card.humidifier.state")}
           .value=${this.stateObj.state}
           .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._handleStateChanged}
-          @closed=${stopPropagation}
+          @wa-select=${this._handleStateChanged}
+          .options=${["off", "on"].map((fanState) => ({
+            value: fanState,
+            label: this.stateObj
+              ? this.hass.formatEntityState(this.stateObj, fanState)
+              : fanState,
+          }))}
         >
           <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
-          <ha-list-item value="off">
-            ${this.hass.formatEntityState(this.stateObj, "off")}
-          </ha-list-item>
-          <ha-list-item value="on">
-            ${this.hass.formatEntityState(this.stateObj, "on")}
-          </ha-list-item>
         </ha-control-select-menu>
 
         ${supportModes
           ? html`
               <ha-control-select-menu
+                .hass=${hass}
                 .label=${hass.localize("ui.card.humidifier.mode")}
                 .value=${stateObj.attributes.mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleModeChanged}
-                @closed=${stopPropagation}
-              >
-                ${stateObj.attributes.mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="mode"
-                        .attributeValue=${stateObj.attributes.mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.available_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj!,
+                @wa-select=${this._handleModeChanged}
+                .options=${stateObj.attributes.available_modes?.map((mode) => ({
+                  value: mode,
+                  label: stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        stateObj,
                         "mode",
                         mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                      )
+                    : mode,
+                  attributeIcon: stateObj
+                    ? {
+                        stateObj,
+                        attribute: "mode",
+                        attributeValue: mode,
+                      }
+                    : undefined,
+                })) || []}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -143,8 +123,8 @@ class MoreInfoHumidifier extends LitElement {
     `;
   }
 
-  private _handleStateChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handleStateChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value || null;
     this._callServiceHelper(
       this.stateObj!.state,
       newVal,
@@ -153,8 +133,8 @@ class MoreInfoHumidifier extends LitElement {
     );
   }
 
-  private _handleModeChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handleModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._mode = newVal;
     this._callServiceHelper(
       this.stateObj!.attributes.mode,

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

@@ -9,7 +9,6 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
@@ -38,6 +37,7 @@ import "../components/lights/ha-more-info-light-favorite-colors";
 import "../components/lights/light-color-rgb-picker";
 import "../components/lights/light-color-temp-picker";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type MainControl = "brightness" | "color_temp" | "color";
 
@@ -253,47 +253,35 @@ class MoreInfoLight extends LitElement {
           ${supportsEffects && this.stateObj.attributes.effect_list
             ? html`
                 <ha-control-select-menu
+                  .hass=${this.hass}
                   .label=${this.hass.formatEntityAttributeName(
                     this.stateObj,
                     "effect"
                   )}
                   .value=${this.stateObj.attributes.effect}
                   .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleEffect}
-                  @closed=${stopPropagation}
-                >
-                  ${this.stateObj.attributes.effect
-                    ? html`<ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${this.stateObj}
-                        attribute="effect"
-                        .attributeValue=${this.stateObj.attributes.effect}
-                      ></ha-attribute-icon>`
-                    : html`<ha-svg-icon
-                        slot="icon"
-                        .path=${mdiCreation}
-                      ></ha-svg-icon>`}
-                  ${this.stateObj.attributes.effect_list?.map(
-                    (effect) => html`
-                      <ha-list-item .value=${effect} graphic="icon">
-                        <ha-attribute-icon
-                          slot="graphic"
-                          .hass=${this.hass}
-                          .stateObj=${this.stateObj}
-                          attribute="effect"
-                          .attributeValue=${effect}
-                        ></ha-attribute-icon>
-                        ${this.hass.formatEntityAttributeValue(
-                          this.stateObj!,
-                          "effect",
-                          effect
-                        )}
-                      </ha-list-item>
-                    `
+                  @wa-select=${this._handleEffect}
+                  .options=${this.stateObj.attributes.effect_list.map(
+                    (effect) => ({
+                      value: effect,
+                      label: this.stateObj
+                        ? this.hass.formatEntityAttributeValue(
+                            this.stateObj,
+                            "effect",
+                            effect
+                          )
+                        : effect,
+                      attributeIcon: this.stateObj
+                        ? {
+                            stateObj: this.stateObj,
+                            attribute: "effect",
+                            attributeValue: effect,
+                          }
+                        : undefined,
+                    })
                   )}
+                >
+                  <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
                 </ha-control-select-menu>
               `
             : nothing}
@@ -317,8 +305,8 @@ class MoreInfoLight extends LitElement {
     });
   };
 
-  private _handleEffect(ev) {
-    const newVal = ev.target.value;
+  private _handleEffect(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this._effect;
 
     if (!newVal || oldVal === newVal) return;

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

@@ -25,8 +25,8 @@ import { VolumeSliderController } from "../../../common/util/volume-slider";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-marquee-text";
@@ -743,7 +743,7 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _handleSourceChange(e: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSourceChange(e: HaDropdownSelectEvent) {
     const source = e.detail.item.value;
     if (!source || this.stateObj!.attributes.source === source) {
       return;
@@ -755,7 +755,7 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _handleSoundModeChange(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSoundModeChange(ev: HaDropdownSelectEvent) {
     const soundMode = ev.detail.item.value;
     if (!soundMode || this.stateObj!.attributes.sound_mode === soundMode) {
       return;

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

@@ -2,9 +2,10 @@ import { mdiAccount, mdiAccountArrowRight, mdiWaterBoiler } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-list-item";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import type { WaterHeaterEntity } from "../../../data/water_heater";
@@ -16,7 +17,6 @@ import "../../../state-control/water_heater/ha-state-control-water_heater-temper
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
-import "../../../components/ha-attribute-icon";
 
 @customElement("more-info-water_heater")
 class MoreInfoWaterHeater extends LitElement {
@@ -74,32 +74,25 @@ class MoreInfoWaterHeater extends LitElement {
         ${supportOperationMode && stateObj.attributes.operation_list
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.localize("ui.card.water_heater.mode")}
                 .value=${stateObj.state}
                 .disabled=${stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleOperationModeChanged}
-                @closed=${stopPropagation}
-              >
-                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
-                ${stateObj.attributes.operation_list
+                @wa-select=${this._handleOperationModeChanged}
+                .options=${stateObj.attributes.operation_list
                   .concat()
                   .sort(compareWaterHeaterOperationMode)
-                  .map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-attribute-icon
-                          slot="graphic"
-                          .hass=${this.hass}
-                          .stateObj=${stateObj}
-                          attribute="operation_mode"
-                          .attributeValue=${mode}
-                        ></ha-attribute-icon>
-                        ${this.hass.formatEntityState(stateObj, mode)}
-                      </ha-list-item>
-                    `
-                  )}
+                  .map((mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityState(stateObj, mode),
+                    attributeIcon: {
+                      stateObj,
+                      attribute: "operation_mode",
+                      attributeValue: mode,
+                    },
+                  }))}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -112,31 +105,18 @@ class MoreInfoWaterHeater extends LitElement {
                 )}
                 .value=${stateObj.attributes.away_mode}
                 .disabled=${stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleAwayModeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleAwayModeChanged}
+                .options=${["on", "off"].map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "away_mode",
+                    mode
+                  ),
+                  iconPath: mode === "on" ? mdiAccountArrowRight : mdiAccount,
+                }))}
               >
                 <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
-                <ha-list-item value="on" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiAccountArrowRight}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    "away_mode",
-                    "on"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="off" graphic="icon">
-                  <ha-svg-icon slot="graphic" .path=${mdiAccount}></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    "away_mode",
-                    "off"
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}
@@ -144,8 +124,8 @@ class MoreInfoWaterHeater extends LitElement {
     `;
   }
 
-  private _handleOperationModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleOperationModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.state,
       newVal,
@@ -156,8 +136,8 @@ class MoreInfoWaterHeater extends LitElement {
     );
   }
 
-  private _handleAwayModeChanged(ev) {
-    const newVal = ev.target.value === "on";
+  private _handleAwayModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value === "on";
     const oldVal = this.stateObj!.attributes.away_mode === "on";
 
     this._callServiceHelper(oldVal, newVal, "set_away_mode", {

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

@@ -25,11 +25,11 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   computeEntityEntryName,
   computeEntityName,
 } from "../../common/entity/compute_entity_name";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   getEntityContext,
   getEntityEntryContext,
@@ -37,11 +37,12 @@ import {
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { withViewTransition } from "../../common/util/view-transition";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
 import "../../components/ha-related-items";
@@ -317,7 +318,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._setView("related");
   }
 
-  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
     switch (action) {
       case "device":
@@ -770,7 +771,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   }
 
   private _enlarge() {
-    this.large = !this.large;
+    withViewTransition(() => {
+      this.large = !this.large;
+    });
   }
 
   private _handleOpened() {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,8 +1,10 @@
 import { mdiDevices } from "@mdi/js";
 import Fuse from "fuse.js";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import type { NavigationFilterOptions } from "../../common/config/filter_navigation_pages";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
@@ -45,13 +47,14 @@ import {
   type ActionCommandComboBoxItem,
   type NavigationComboBoxItem,
 } from "../../data/quick_bar";
-import type { NavigationFilterOptions } from "../../common/config/filter_navigation_pages";
 import {
   multiTermSortedSearch,
   type FuseWeightedKey,
 } from "../../resources/fuseMultiTerm";
+import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
+import { isMac } from "../../util/is_mac";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
 import type { QuickBarParams, QuickBarSection } from "./show-dialog-quick-bar";
@@ -66,7 +69,7 @@ export class QuickBar extends LitElement {
 
   @state() private _loading = true;
 
-  @state() private _hint?: string;
+  @state() private _showHint = false;
 
   @state() private _selectedSection?: QuickBarSection;
 
@@ -86,6 +89,8 @@ export class QuickBar extends LitElement {
 
   private _translationsLoaded = false;
 
+  private _itemSelected = false;
+
   // #region lifecycle
   public async showDialog(params: QuickBarParams) {
     if (!this._translationsLoaded) {
@@ -94,7 +99,7 @@ export class QuickBar extends LitElement {
     }
     this._initialize();
     this._selectedSection = params.mode;
-    this._hint = params.hint;
+    this._showHint = params.showHint ?? false;
     this._open = true;
   }
 
@@ -162,6 +167,7 @@ export class QuickBar extends LitElement {
     this._selectedSection = undefined;
     this._opened = false;
     this._open = false;
+    this._itemSelected = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   };
 
@@ -253,9 +259,17 @@ export class QuickBar extends LitElement {
               clearable
             ></ha-picker-combo-box>`
           : nothing}
-        ${this._hint
+        ${this._showHint
           ? html`<ha-tip slot="footer" .hass=${this.hass}
-              >${this._hint}</ha-tip
+              >${this.hass.localize("ui.tips.key_shortcut_quick_search", {
+                keyboard_shortcut: html`<button
+                  class="link"
+                  @click=${this._openShortcutDialog}
+                >
+                  ${this.hass.localize("ui.tips.keyboard_shortcut")}
+                </button>`,
+                modifier: isMac ? "⌘" : "Ctrl",
+              })}</ha-tip
             >`
           : nothing}
       </ha-adaptive-dialog>
@@ -655,12 +669,18 @@ export class QuickBar extends LitElement {
   private async _handleItemSelected(
     ev: CustomEvent<PickerComboBoxIndexSelectedDetail>
   ) {
-    if (this._comboBox && this._comboBox.virtualizerElement) {
+    if (
+      !this._itemSelected &&
+      this._comboBox &&
+      this._comboBox.virtualizerElement
+    ) {
       const { index, newTab } = ev.detail;
       const item = this._comboBox.virtualizerElement.items[
         index
       ] as PickerComboBoxItem;
 
+      this._itemSelected = true;
+
       // entity selected
       if (item && "stateObj" in item) {
         this.closeDialog();
@@ -742,48 +762,59 @@ export class QuickBar extends LitElement {
     }
   }
 
+  private _openShortcutDialog(ev: Event): void {
+    ev.preventDefault();
+    showShortcutsDialog(this);
+    this.closeDialog();
+  }
+
   // #endregion interaction
 
   // #region styles
 
-  static styles = css`
-    :host {
-      --dialog-surface-margin-top: var(--ha-space-10);
-      --ha-dialog-min-height: 620px;
-      --ha-bottom-sheet-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --dialog-content-padding: 0;
-      --safe-area-inset-bottom: 0px;
-    }
+  static get styles(): CSSResultGroup {
+    return [
+      buttonLinkStyle,
+      css`
+        :host {
+          --dialog-surface-margin-top: var(--ha-space-10);
+          --ha-dialog-min-height: 620px;
+          --ha-bottom-sheet-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --dialog-content-padding: 0;
+          --safe-area-inset-bottom: 0px;
+        }
 
-    ha-tip {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--secondary-text-color);
-      gap: var(--ha-space-1);
-    }
+        ha-tip {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--secondary-text-color);
+          gap: var(--ha-space-1);
+        }
 
-    ha-tip a {
-      color: var(--primary-color);
-    }
+        ha-tip a {
+          color: var(--primary-color);
+        }
 
-    @media all and (max-width: 450px), all and (max-height: 690px) {
-      ha-tip {
-        display: none;
-      }
-    }
-  `;
+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          ha-tip {
+            display: none;
+          }
+        }
+      `,
+    ];
+  }
 
   // #endregion styles
 }

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -11,7 +11,7 @@ export type QuickBarSection =
 export interface QuickBarParams {
   entityFilter?: string;
   mode?: QuickBarSection;
-  hint?: string;
+  showHint?: boolean;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -9,8 +9,8 @@ import { formatLanguageCode } from "../../common/language/format_language";
 import "../../components/chips/ha-assist-chip";
 import "../../components/ha-dialog";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import { getLanguageOptions } from "../../components/ha-language-picker";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { fetchAssistSatelliteConfiguration } from "../../data/assist_satellite";
@@ -328,7 +328,7 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
     }
   }
 
-  private _handlePickLanguage(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handlePickLanguage(ev: HaDropdownSelectEvent) {
     this._language = ev.detail.item.value;
   }
 

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -17,8 +17,8 @@ import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-next";
 import "../../components/ha-spinner";
@@ -215,7 +215,7 @@ export class HaVoiceCommandDialog extends LitElement {
     this._preferredPipeline = preferred_pipeline || undefined;
   }
 
-  private async _selectPipeline(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private async _selectPipeline(ev: HaDropdownSelectEvent) {
     const pipelineId = ev.detail?.item?.value;
     if (pipelineId) {
       this._pipelineId = pipelineId;

src/fake_data/demo_panels.ts

@@ -8,6 +8,14 @@ export const demoPanels: Panels = {
     config: { mode: "storage" },
     url_path: "lovelace",
   },
+  home: {
+    component_name: "home",
+    icon: "mdi:home",
+    title: "home",
+    default_visible: false,
+    config: null,
+    url_path: "home",
+  },
   "dev-state": {
     component_name: "dev-state",
     icon: null,

src/fake_data/provide_hass.ts

@@ -7,7 +7,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeFormatFunctions } from "../common/translations/entity-state";
 import { computeLocalize } from "../common/translations/localize";
 import type { EntityRegistryDisplayEntry } from "../data/entity/entity_registry";
-import { DEFAULT_PANEL } from "../data/panel";
 import {
   DateFormat,
   FirstWeekday,
@@ -268,7 +267,9 @@ export const provideHass = (
       name: "Demo User",
     },
     panelUrl: "lovelace",
-    defaultPanel: DEFAULT_PANEL,
+    systemData: {
+      default_panel: "lovelace",
+    },
     language: localLanguage,
     selectedLanguage: localLanguage,
     locale: {
@@ -367,6 +368,7 @@ export const provideHass = (
     areas: {},
     devices: {},
     entities: {},
+    floors: {},
     formatEntityState: (stateObj, state) =>
       (state !== null ? state : stateObj.state) ?? "",
     formatEntityAttributeName: (_stateObj, attribute) => attribute,

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

@@ -30,8 +30,8 @@ import { showDataTableSettingsDialog } from "../components/data-table/show-dialo
 import "../components/ha-dialog";
 import "../components/ha-dialog-header";
 import "../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
 import "../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../components/ha-dropdown-item";
 import "../components/search-input-outlined";
 import { KeyboardShortcutMixin } from "../mixins/keyboard-shortcut-mixin";
 import type { HomeAssistant, Route } from "../types";
@@ -134,7 +134,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    * String to show when there are no records in the data table.
    * @type {String}
    */
-  @property({ attribute: false, type: String }) public noDataText?: string;
+  @property({ attribute: false }) public noDataText?: string;
 
   /**
    * Hides the data table and show an empty message.
@@ -590,7 +590,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     this._sortColumn = this._sortDirection ? ev.detail.column : undefined;
   }
 
-  private _handleSortBy(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSortBy(ev: HaDropdownSelectEvent) {
     ev.preventDefault(); // keep the dropdown open
 
     const columnId = ev.detail.item.value;
@@ -609,7 +609,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     });
   }
 
-  private _handleGroupBy(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleGroupBy(ev: HaDropdownSelectEvent) {
     const group = ev.detail.item.value;
 
     if (group === "reset") {
@@ -662,7 +662,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     this._selectMode = true;
   }
 
-  private _handleSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
 
     if (!action) {

src/onboarding/integration-badge.ts

@@ -13,7 +13,7 @@ class IntegrationBadge extends LitElement {
   @property({ attribute: "dark-optimized-icon", type: Boolean })
   public darkOptimizedIcon = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true })
+  @property({ attribute: false })
   public clickable = false;
 
   protected render(): TemplateResult {

src/panels/config/apps/app-view/config/supervisor-app-config.ts

@@ -9,8 +9,8 @@ import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
 import "../../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-form/ha-form";
 import type {
   HaFormDataContainer,
@@ -347,7 +347,7 @@ class SupervisorAppConfig extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
 
     if (!action) {

src/panels/config/apps/ha-config-apps-available.ts

@@ -7,8 +7,8 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/search-input";
 import type {
@@ -202,7 +202,7 @@ export class HaConfigAppsAvailable extends LitElement {
       })
   );
 
-  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
 
     if (!action) {

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

@@ -82,7 +82,7 @@ class DialogAreaDetail
 
   @state() private _params?: AreaRegistryDetailDialogParams;
 
-  @state() private _submitting?: boolean;
+  @state() private _submitting = false;
 
   @state() private _open = false;
 
@@ -378,7 +378,7 @@ class DialogAreaDetail
           <ha-button
             slot="primaryAction"
             @click=${this._updateEntry}
-            .disabled=${nameInvalid || !!this._submitting}
+            .disabled=${nameInvalid || this._submitting}
           >
             ${entry
               ? this.hass.localize("ui.common.save")

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

@@ -19,7 +19,6 @@ import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list";
@@ -53,6 +52,7 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 declare interface NameAndEntity<EntityType extends HassEntity> {
   name: string;
@@ -239,9 +239,8 @@ class HaConfigAreaPage extends LitElement {
             ${this.hass.localize("ui.panel.config.areas.edit_settings")}
           </ha-dropdown-item>
 
-          <ha-dropdown-item value="delete">
-            <ha-svg-icon class="warning" slot="icon" .path=${mdiDelete}>
-            </ha-svg-icon>
+          <ha-dropdown-item value="delete" variant="danger">
+            <ha-svg-icon slot="icon" .path=${mdiDelete}> </ha-svg-icon>
             ${this.hass.localize("ui.panel.config.areas.editor.delete")}
           </ha-dropdown-item>
         </ha-dropdown>
@@ -606,7 +605,7 @@ class HaConfigAreaPage extends LitElement {
     this._related = await findRelated(this.hass, "area", this.areaId);
   }
 
-  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
     const entry = (ev.detail?.item as any)?.data as AreaRegistryEntry;
     switch (action) {

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

@@ -58,6 +58,7 @@ import {
 } from "./show-dialog-area-registry-detail";
 import { showAreasFloorsOrderDialog } from "./show-dialog-areas-floors-order";
 import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 const UNASSIGNED_FLOOR = "__unassigned__";
 
@@ -224,9 +225,8 @@ export class HaConfigAreasDashboard extends LitElement {
                             "ui.panel.config.areas.picker.floor.edit_floor"
                           )}</ha-dropdown-item
                         >
-                        <ha-dropdown-item value="delete" class="warning"
+                        <ha-dropdown-item value="delete" variant="danger"
                           ><ha-svg-icon
-                            class="warning"
                             .path=${mdiDelete}
                             slot="icon"
                           ></ha-svg-icon
@@ -535,7 +535,7 @@ export class HaConfigAreasDashboard extends LitElement {
     }, time);
   }
 
-  private _handleFloorAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleFloorAction(ev: HaDropdownSelectEvent) {
     const floor = (ev.currentTarget as any).floor;
     const action = ev.detail.item.value;
     switch (action) {
@@ -551,9 +551,7 @@ export class HaConfigAreasDashboard extends LitElement {
     }
   }
 
-  private _handleUnassignedAreasAction(
-    ev: CustomEvent<{ item: { value: string } }>
-  ) {
+  private _handleUnassignedAreasAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
     if (action === "reorder") {
       this._showReorderDialog();
@@ -727,9 +725,6 @@ export class HaConfigAreasDashboard extends LitElement {
       align-items: center;
       overflow-wrap: anywhere;
     }
-    .warning {
-      color: var(--error-color);
-    }
   `;
 }
 

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

@@ -36,7 +36,6 @@ 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-service-icon";
@@ -92,6 +91,7 @@ import "./types/ha-automation-action-set_conversation_response";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 export const getAutomationActionType = memoizeOne(
   (action: Action | undefined) => {
@@ -184,8 +184,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   @state() private _warnings?: string[];
 
-  @state() private _uiSupported = false;
-
   @query("ha-automation-action-editor")
   private _actionEditor?: HaAutomationActionEditor;
 
@@ -217,25 +215,6 @@ export default class HaAutomationActionRow extends LitElement {
     if (!this._uiModeAvailable && !this._yamlMode) {
       this._yamlMode = true;
     }
-
-    if (changedProperties.has("action") || !this.hasUpdated) {
-      const uiSupported = this._checkUiSupport(type);
-      if (uiSupported !== this._uiSupported || !this.hasUpdated) {
-        this._uiSupported = uiSupported;
-      }
-    }
-  }
-
-  protected override updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("_uiSupported") &&
-      this._selected &&
-      this.optionsInSidebar
-    ) {
-      // update sidebar if uiSupported changed
-      this.openSidebar();
-    }
   }
 
   private _renderOverflowLabel(label: string, shortcut?: TemplateResult) {
@@ -488,7 +467,7 @@ export default class HaAutomationActionRow extends LitElement {
               .disabled=${this.disabled}
               .yamlMode=${this._yamlMode}
               .narrow=${this.narrow}
-              .uiSupported=${this._uiSupported}
+              .uiSupported=${this._uiSupported(type!)}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
             ></ha-automation-action-editor>`
         : nothing}
@@ -560,7 +539,7 @@ export default class HaAutomationActionRow extends LitElement {
             .action=${this.action}
             .narrow=${this.narrow}
             .disabled=${this.disabled}
-            .uiSupported=${this._uiSupported}
+            .uiSupported=${this._uiSupported(type!)}
             indent
             .selected=${this._selected}
             @value-changed=${this._onValueChange}
@@ -790,6 +769,7 @@ export default class HaAutomationActionRow extends LitElement {
 
   public openSidebar(action?: Action): void {
     const sidebarAction = action ?? this.action;
+    const actionType = getAutomationActionType(sidebarAction);
 
     fireEvent(this, "open-sidebar", {
       save: (value) => {
@@ -819,7 +799,7 @@ export default class HaAutomationActionRow extends LitElement {
       config: {
         action: sidebarAction,
       },
-      uiSupported: this._uiSupported,
+      uiSupported: actionType ? this._uiSupported(actionType) : false,
       yamlMode: this._yamlMode,
     } satisfies ActionSidebarConfig);
     this._selected = true;
@@ -869,10 +849,9 @@ export default class HaAutomationActionRow extends LitElement {
     this._actionEditor?.collapseAll();
   }
 
-  private _checkUiSupport = memoizeOne((type?: string) =>
-    type
-      ? customElements.get(`ha-automation-action-${type}`) !== undefined
-      : false
+  private _uiSupported = memoizeOne(
+    (type: string) =>
+      customElements.get(`ha-automation-action-${type}`) !== undefined
   );
 
   private _toggleCollapse() {
@@ -883,7 +862,7 @@ export default class HaAutomationActionRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     ev.stopPropagation();
     const action = ev.detail?.item?.value;
 

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

@@ -37,7 +37,6 @@ 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 type {
@@ -77,6 +76,7 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -84,31 +84,6 @@ export interface ConditionElement extends LitElement {
   collapseAll?: () => void;
 }
 
-export const handleChangeEvent = (
-  element: ConditionElement,
-  ev: CustomEvent
-) => {
-  ev.stopPropagation();
-  const name = (ev.currentTarget as any)?.name;
-  if (!name) {
-    return;
-  }
-  const newVal = ev.detail?.value || (ev.currentTarget as any)?.value;
-
-  if ((element.condition[name] || "") === newVal) {
-    return;
-  }
-
-  let newCondition: Condition;
-  if (!newVal) {
-    newCondition = { ...element.condition };
-    delete newCondition[name];
-  } else {
-    newCondition = { ...element.condition, [name]: newVal };
-  }
-  fireEvent(element, "value-changed", { value: newCondition });
-};
-
 @customElement("ha-automation-condition-row")
 export default class HaAutomationConditionRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -156,8 +131,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _selected = false;
 
-  @state() private _uiSupported = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
@@ -397,7 +370,9 @@ export default class HaAutomationConditionRow extends LitElement {
               ]}
               .disabled=${this.disabled}
               .yamlMode=${this._yamlMode}
-              .uiSupported=${this._uiSupported}
+              .uiSupported=${this._uiSupported(
+                this._getType(this.condition, this.conditionDescriptions)
+              )}
               .narrow=${this.narrow}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
             ></ha-automation-condition-editor>`
@@ -476,7 +451,9 @@ export default class HaAutomationConditionRow extends LitElement {
             .hass=${this.hass}
             .condition=${this.condition}
             .disabled=${this.disabled}
-            .uiSupported=${this._uiSupported}
+            .uiSupported=${this._uiSupported(
+              this._getType(this.condition, this.conditionDescriptions)
+            )}
             indent
             .selected=${this._selected}
             .narrow=${this.narrow}
@@ -507,27 +484,6 @@ export default class HaAutomationConditionRow extends LitElement {
     if (changedProperties.has("yamlMode")) {
       this._warnings = undefined;
     }
-
-    if (changedProperties.has("condition") || !this.hasUpdated) {
-      const type = this._getType(this.condition, this.conditionDescriptions);
-      const uiSupported = this._checkUiSupport(type);
-      if (uiSupported !== this._uiSupported || !this.hasUpdated) {
-        this._uiSupported = uiSupported;
-      }
-    }
-  }
-
-  protected override updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (
-      changedProps.has("_uiSupported") &&
-      this._selected &&
-      this.optionsInSidebar
-    ) {
-      // update sidebar if uiSupported changed
-      this.openSidebar();
-    }
   }
 
   private _onValueChange(event: CustomEvent) {
@@ -815,7 +771,9 @@ export default class HaAutomationConditionRow extends LitElement {
       cut: this._cutCondition,
       test: this._testCondition,
       config: sidebarCondition,
-      uiSupported: this._uiSupported,
+      uiSupported: this._uiSupported(
+        this._getType(sidebarCondition, this.conditionDescriptions)
+      ),
       description: this.conditionDescriptions[sidebarCondition.condition],
       yamlMode: this._yamlMode,
     } satisfies ConditionSidebarConfig);
@@ -842,7 +800,7 @@ export default class HaAutomationConditionRow extends LitElement {
     }
   );
 
-  private _checkUiSupport = memoizeOne(
+  private _uiSupported = memoizeOne(
     (type: string) =>
       customElements.get(`ha-automation-condition-${type}`) !== undefined
   );
@@ -855,7 +813,7 @@ export default class HaAutomationConditionRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     ev.stopPropagation();
     const action = ev.detail?.item?.value;
 

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

@@ -1,9 +1,15 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../../components/ha-textarea";
 import type { TemplateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-condition-row";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
+import "../../../../../components/ha-form/ha-form";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+
+const SCHEMA = [
+  { name: "value_template", required: true, selector: { template: {} } },
+] as const;
 
 @customElement("ha-automation-condition-template")
 export class HaTemplateCondition extends LitElement {
@@ -18,36 +24,30 @@ export class HaTemplateCondition extends LitElement {
   }
 
   protected render() {
-    const { value_template } = this.condition;
     return html`
-      <p>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.type.template.value_template"
-        )}
-        *
-      </p>
-      <ha-code-editor
-        .name=${"value_template"}
-        mode="jinja2"
+      <ha-form
         .hass=${this.hass}
-        .value=${value_template}
-        .readOnly=${this.disabled}
-        autocomplete-entities
+        .data=${this.condition}
+        .schema=${SCHEMA}
         @value-changed=${this._valueChanged}
-        dir="ltr"
-      ></ha-code-editor>
+        .computeLabel=${this._computeLabelCallback}
+        .disabled=${this.disabled}
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newCondition = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newCondition });
   }
 
-  static styles = css`
-    p {
-      margin-top: 0;
-    }
-  `;
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof SCHEMA>
+  ): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.conditions.type.template.${schema.name}`
+    );
 }
 
 declare global {

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

@@ -35,7 +35,6 @@ 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-fab";
 import "../../../components/ha-fade-in";
 import "../../../components/ha-icon";
@@ -91,6 +90,7 @@ import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialo
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -1212,7 +1212,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     this._undoRedoController.redo();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -52,7 +52,6 @@ import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
@@ -89,9 +88,9 @@ import { fullEntitiesContext } from "../../../data/context";
 import type { DataTableFilters } from "../../../data/data_table_filters";
 import {
   deserializeFilters,
-  isUsedFilter as isFilterUsed,
-  isUsedRelatedItemsFilter as isRelatedItemsFilterUsed,
   serializeFilters,
+  isFilterUsed,
+  isRelatedItemsFilterUsed,
 } from "../../../data/data_table_filters";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import type {
@@ -127,6 +126,7 @@ import {
 } from "../voice-assistants/expose/assistants-table-column";
 import { getAvailableAssistants } from "../voice-assistants/expose/available-assistants";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type AutomationItem = AutomationEntity & {
   name: string;
@@ -884,9 +884,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         );
 
         // the filters below only expose the selected options (as filter.value);
-        // category filter only allows a single selected option
         // applying the filter must be done here
       } else if (isFilterUsed(key, filter, "ha-filter-categories")) {
+        // category filter only allows a single selected option
         filteredEntityIds = filteredEntityIds.filter(
           (entityId) =>
             filter.value![0] ===
@@ -1140,7 +1140,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleBulkCategory = (ev: CustomEvent<{ item: HaDropdownItem }>) => {
+  private _handleBulkCategory = (ev: HaDropdownSelectEvent) => {
     const value = ev.detail.item.value;
     if (value === "category_create") {
       this._bulkCreateCategory();
@@ -1528,6 +1528,10 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
+        ha-dropdown::part(menu),
+        ha-dropdown::part(submenu) {
+          --auto-size-available-width: calc(50vw - var(--ha-space-4));
+        }
         ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }

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

@@ -21,7 +21,6 @@ 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-icon-button";
 import "../../../components/trace/ha-trace-blueprint-config";
 import "../../../components/trace/ha-trace-config";
@@ -47,6 +46,7 @@ import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 const TABS = ["details", "timeline", "logbook", "automation_config"] as const;
 
@@ -515,7 +515,7 @@ export class HaAutomationTrace extends LitElement {
     }
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -22,7 +22,6 @@ 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-svg-icon";
@@ -48,6 +47,7 @@ import {
   overflowStyles,
   rowStyles,
 } from "../styles";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
@@ -349,7 +349,7 @@ export default class HaAutomationOptionRow extends LitElement {
     fireEvent(this, "move-down");
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     ev.stopPropagation();
     const action = ev.detail?.item?.value;
 

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

@@ -18,7 +18,6 @@ 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 { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import { domainToName } from "../../../../data/integration";
@@ -30,6 +29,7 @@ import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-action")
 export default class HaAutomationSidebarAction extends LitElement {
@@ -334,7 +334,7 @@ export default class HaAutomationSidebarAction extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -18,7 +18,6 @@ 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,
@@ -37,6 +36,7 @@ import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-condition")
 export default class HaAutomationSidebarCondition extends LitElement {
@@ -413,7 +413,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -9,7 +9,6 @@ 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-svg-icon";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
@@ -17,6 +16,7 @@ import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-option")
 export default class HaAutomationSidebarOption extends LitElement {
@@ -129,7 +129,7 @@ export default class HaAutomationSidebarOption extends LitElement {
     </ha-automation-sidebar-card>`;
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -5,7 +5,6 @@ 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";
@@ -13,6 +12,7 @@ import "../../script/ha-script-field-selector-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-script-field-selector")
 export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
@@ -162,7 +162,7 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -4,7 +4,6 @@ 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";
@@ -12,6 +11,7 @@ import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-script-field")
 export default class HaAutomationSidebarScriptField extends LitElement {
@@ -156,7 +156,7 @@ export default class HaAutomationSidebarScriptField extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -17,7 +17,6 @@ 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,
@@ -33,6 +32,7 @@ import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
 import "./ha-automation-sidebar-card";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-trigger")
 export default class HaAutomationSidebarTrigger extends LitElement {
@@ -328,7 +328,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     this._requestShowId = true;
   };
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (!action) {

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

@@ -40,7 +40,6 @@ 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-svg-icon";
@@ -90,6 +89,7 @@ import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 export interface TriggerElement extends LitElement {
   trigger: Trigger;
@@ -147,8 +147,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @state() private _warnings?: string[];
 
-  @state() private _uiSupported = false;
-
   @property({ attribute: false })
   public triggerDescriptions: TriggerDescriptions = {};
 
@@ -195,7 +193,9 @@ export default class HaAutomationTriggerRow extends LitElement {
   private _renderRow() {
     const type = this._getType(this.trigger, this.triggerDescriptions);
 
-    const yamlMode = this._yamlMode || !this._uiSupported;
+    const supported = this._uiSupported(type);
+
+    const yamlMode = this._yamlMode || !supported;
 
     const target =
       type === "platform" &&
@@ -333,7 +333,7 @@ export default class HaAutomationTriggerRow extends LitElement {
 
         <ha-dropdown-item
           value="toggle_yaml_mode"
-          .disabled=${!this._uiSupported || !!this._warnings}
+          .disabled=${!supported || !!this._warnings}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
           ${this._renderOverflowLabel(
@@ -412,7 +412,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                 : undefined}
               .disabled=${this.disabled}
               .yamlMode=${this._yamlMode}
-              .uiSupported=${this._uiSupported}
+              .uiSupported=${supported}
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
             ></ha-automation-trigger-editor>`
         : nothing}
@@ -479,30 +479,13 @@ export default class HaAutomationTriggerRow extends LitElement {
     if (changedProperties.has("yamlMode")) {
       this._warnings = undefined;
     }
-
-    if (changedProperties.has("trigger") || !this.hasUpdated) {
-      const type = this._getType(this.trigger, this.triggerDescriptions);
-      const uiSupported = this._checkUiSupport(type);
-      if (uiSupported !== this._uiSupported || !this.hasUpdated) {
-        this._uiSupported = uiSupported;
-      }
-    }
   }
 
-  protected override updated(changedProps: PropertyValues): void {
+  protected override updated(changedProps: PropertyValues<this>): void {
     super.updated(changedProps);
     if (changedProps.has("trigger")) {
       this._subscribeTrigger();
     }
-
-    if (
-      changedProps.has("_uiSupported") &&
-      this._selected &&
-      this.optionsInSidebar
-    ) {
-      // update sidebar if uiSupported changed
-      this.openSidebar();
-    }
   }
 
   public connectedCallback(): void {
@@ -620,7 +603,9 @@ export default class HaAutomationTriggerRow extends LitElement {
       cut: this._cutTrigger,
       insertAfter: this._insertAfter,
       config: trigger,
-      uiSupported: this._uiSupported,
+      uiSupported: this._uiSupported(
+        this._getType(trigger, this.triggerDescriptions)
+      ),
       description:
         "trigger" in trigger
           ? this.triggerDescriptions[trigger.trigger]
@@ -820,7 +805,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     }
   );
 
-  private _checkUiSupport = memoizeOne(
+  private _uiSupported = memoizeOne(
     (type: string) =>
       customElements.get(`ha-automation-trigger-${type}`) !== undefined
   );
@@ -829,7 +814,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._automationRowElement?.focus();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     ev.stopPropagation();
     const action = ev.detail?.item?.value;
 

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

@@ -9,7 +9,6 @@ import { slugify } from "../../../../../common/string/slugify";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import "../../../../../components/ha-dropdown";
 import "../../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-textfield";
 import type { HaTextField } from "../../../../../components/ha-textfield";
@@ -20,6 +19,7 @@ import type {
 import type { HomeAssistant } from "../../../../../types";
 import { showToast } from "../../../../../util/toast";
 import { handleChangeEvent } from "../ha-automation-trigger-row";
+import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
 
 const SUPPORTED_METHODS = ["GET", "HEAD", "POST", "PUT"];
 const DEFAULT_METHODS = ["POST", "PUT"];
@@ -208,7 +208,7 @@ export class HaWebhookTrigger extends LitElement {
     });
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     ev.preventDefault(); // don't close the dropdown to select multiple options
     const action = ev.detail?.item?.value;
 

src/panels/config/backup/components/ha-backup-data-picker.ts

@@ -61,7 +61,7 @@ export class HaBackupDataPicker extends LitElement {
     | "page-onboarding.restore"
     | "config.backup" = "config.backup";
 
-  @property({ type: Boolean, attribute: false }) public addonsDisabled = false;
+  @property({ attribute: false }) public addonsDisabled = false;
 
   @state() public _addonIcons: Record<string, boolean> = {};
 

src/panels/config/backup/ha-config-backup-backups.ts

@@ -27,7 +27,6 @@ import type {
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
@@ -74,6 +73,7 @@ import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup"
 import { showNewBackupDialog } from "./dialogs/show-dialog-new-backup";
 import { showUploadBackupDialog } from "./dialogs/show-dialog-upload-backup";
 import { downloadBackup } from "./helper/download_backup";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 interface BackupRow extends DataTableRowData, BackupContent {
   formatted_type: string;
@@ -631,7 +631,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     this._dataTable.clearSelection();
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item.value;
 
     if (action === "upload_backup") {

src/panels/config/backup/ha-config-backup-details.ts

@@ -43,6 +43,7 @@ import "./components/ha-backup-details-restore";
 import "./components/ha-backup-details-summary";
 import { showRestoreBackupDialog } from "./dialogs/show-dialog-restore-backup";
 import { downloadBackup } from "./helper/download_backup";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 interface Agent extends BackupContentAgent {
   id: string;
@@ -123,7 +124,7 @@ class HaConfigBackupDetails extends LitElement {
             <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
             ${this.hass.localize("ui.common.download")}
           </ha-dropdown-item>
-          <ha-dropdown-item value="delete" class="warning">
+          <ha-dropdown-item value="delete" variant="danger">
             <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
             ${this.hass.localize("ui.common.delete")}
           </ha-dropdown-item>
@@ -311,7 +312,7 @@ class HaConfigBackupDetails extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
     switch (action) {
       case "download":
@@ -323,7 +324,7 @@ class HaConfigBackupDetails extends LitElement {
     }
   }
 
-  private _handleAgentAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAgentAction(ev: HaDropdownSelectEvent) {
     const button = ev.currentTarget;
     const agentId = (button as any).agent;
     this._downloadBackup(agentId);
@@ -385,12 +386,6 @@ class HaConfigBackupDetails extends LitElement {
       --mdc-icon-size: 48px;
       color: var(--primary-text-color);
     }
-    .warning {
-      color: var(--error-color);
-    }
-    .warning ha-svg-icon {
-      color: var(--error-color);
-    }
     ha-button.danger {
       --mdc-theme-primary: var(--error-color);
     }

src/panels/config/backup/ha-config-backup-overview.ts

@@ -7,7 +7,6 @@ import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-next";
@@ -40,6 +39,7 @@ import { showBackupOnboardingDialog } from "./dialogs/show-dialog-backup_onboard
 import { showGenerateBackupDialog } from "./dialogs/show-dialog-generate-backup";
 import { showNewBackupDialog } from "./dialogs/show-dialog-new-backup";
 import { showUploadBackupDialog } from "./dialogs/show-dialog-upload-backup";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("ha-config-backup-overview")
 class HaConfigBackupOverview extends LitElement {
@@ -240,7 +240,7 @@ class HaConfigBackupOverview extends LitElement {
     `;
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item.value;
 
     if (action === "upload_backup") {

src/panels/config/backup/ha-config-backup-settings.ts

@@ -11,7 +11,6 @@ import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-password-field";
@@ -36,6 +35,7 @@ import "./components/config/ha-backup-config-encryption-key";
 import "./components/config/ha-backup-config-schedule";
 import type { BackupConfigSchedule } from "./components/config/ha-backup-config-schedule";
 import { showLocalBackupLocationDialog } from "./dialogs/show-dialog-local-backup-location";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("ha-config-backup-settings")
 class HaConfigBackupSettings extends LitElement {
@@ -492,7 +492,7 @@ class HaConfigBackupSettings extends LitElement {
     fireEvent(this, "ha-refresh-backup-config");
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
 
     if (action === "change_local_location") {

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

@@ -9,7 +9,6 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-tip";
@@ -36,6 +35,7 @@ import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
 import { showSupportPackageDialog } from "./show-dialog-cloud-support-package";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -300,7 +300,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     fireEvent(this, "ha-refresh-cloud-status");
   }
 
-  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
     const value = ev.detail.item.value;
     switch (value) {
       case "reset":

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

@@ -8,7 +8,6 @@ import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-next";
 import "../../../../components/ha-list";
 import "../../../../components/ha-list-item";
@@ -25,6 +24,7 @@ import "../../ha-config-section";
 import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
 import "./cloud-login";
 import type { CloudLogin } from "./cloud-login";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("cloud-login-panel")
 export class CloudLoginPanel extends LitElement {
@@ -167,7 +167,7 @@ export class CloudLoginPanel extends LitElement {
     fireEvent(this, "flash-message-changed", { value: "" });
   }
 
-  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
     const value = ev.detail.item.value;
     switch (value) {
       case "reset":

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

@@ -11,6 +11,7 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant, Route } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import "./ha-config-analytics";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("ha-config-section-analytics")
 class HaConfigSectionAnalytics extends LitElement {
@@ -49,7 +50,7 @@ class HaConfigSectionAnalytics extends LitElement {
   }
 
   private async _handleOverflowAction(
-    ev: CustomEvent<{ item: { value: string } }>
+    ev: HaDropdownSelectEvent
   ): Promise<void> {
     if (ev.detail.item.value === "download_device_info") {
       const signedPath = await getSignedPath(

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

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiDotsVertical,
   mdiLocationEnter,
@@ -12,8 +11,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
-import "../../../components/ha-dropdown";
-import "../../../components/ha-dropdown-item";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
   HassioSupervisorInfo,
@@ -33,6 +30,10 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import "@home-assistant/webawesome/dist/components/divider/divider";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -161,9 +162,7 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private _handleOverflowAction(
-    ev: CustomEvent<{ item: { value: string } }>
-  ): void {
+  private _handleOverflowAction(ev: HaDropdownSelectEvent): void {
     if (ev.detail.item.value === "toggle_beta") {
       if (this._supervisorInfo!.channel === "stable") {
         showJoinBetaDialog(this, {

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

@@ -39,12 +39,14 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
+import { isMac } from "../../../util/is_mac";
 import { isMobileClient } from "../../../util/is_mobile";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "../repairs/ha-config-repairs";
 import "./ha-config-navigation";
 import "./ha-config-updates";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => {
   const weighted: string[] = [];
@@ -123,6 +125,14 @@ const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => {
         content: hass.localize("ui.tips.key_a_tip", localizeParam),
         weight: 1,
         narrow: false,
+      },
+      {
+        content: hass.localize("ui.tips.key_shortcut_quick_search", {
+          ...localizeParam,
+          modifier: isMac ? "⌘" : "Ctrl",
+        }),
+        weight: 1,
+        narrow: false,
       }
     );
   }
@@ -364,22 +374,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
   );
 
   private _showQuickBar(): void {
-    const params = {
-      keyboard_shortcut: html`<a href="#" @click=${this._openShortcutDialog}
-        >${this.hass.localize("ui.tips.keyboard_shortcut")}</a
-      >`,
-    };
-
-    showQuickBar(this, {
-      hint: this.hass.enableShortcuts
-        ? this.hass.localize("ui.dialogs.quick-bar.key_c_tip", params)
-        : undefined,
-    });
+    showQuickBar(this, { showHint: this.hass.enableShortcuts });
   }
 
-  private async _handleMenuAction(
-    ev: CustomEvent<{ item: { value: string } }>
-  ) {
+  private async _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
     switch (action) {
       case "check-updates":

src/panels/config/developer-tools/debug/developer-tools-debug.ts

@@ -7,6 +7,7 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./ha-debug-connection-row";
+import "./ha-debug-disable-view-transition-row";
 import {
   getStatisticMetadata,
   validateStatistics,
@@ -15,6 +16,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import { showToast } from "../../../../util/toast";
 import { getExtendedEntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import type { ExtEntityRegistryEntry } from "../../../../data/entity/entity_registry";
 
 @customElement("developer-tools-debug")
 class HaPanelDevDebug extends SubscribeMixin(LitElement) {
@@ -36,6 +38,10 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
             .hass=${this.hass}
             .narrow=${this.narrow}
           ></ha-debug-connection-row>
+          <ha-debug-disable-view-transition-row
+            .hass=${this.hass}
+            .narrow=${this.narrow}
+          ></ha-debug-disable-view-transition-row>
         </ha-card>
         <ha-card
           .header=${this.hass.localize(
@@ -82,8 +88,12 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
         };
       }
     }
-
-    const entity = await getExtendedEntityRegistryEntry(this.hass, id);
+    let entity: ExtEntityRegistryEntry | undefined;
+    try {
+      entity = await getExtendedEntityRegistryEntry(this.hass, id);
+    } catch {
+      // not in the registry
+    }
     const device = entity?.device_id && this.hass.devices[entity.device_id];
 
     const data = {