Bumped version to 20260527.3

Fix raw div tag showing in sankey chart tooltips

pyproject.toml

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

src/common/navigate.ts

@@ -17,6 +17,19 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;
 
+/**
+ * Stash a destination URL in the current history entry's state. If the page
+ * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
+ * on load instead of cleaning up the stale dialog state by going back.
+ * The current URL is not changed.
+ */
+export const setRefreshUrl = (path: string) => {
+  mainWindow.history.replaceState(
+    { ...mainWindow.history.state, refreshUrl: path },
+    ""
+  );
+};
+
 /**
  * Ensures all dialogs are closed before navigation.
  * Returns true if navigation can proceed, false if a dialog refused to close.

src/components/automation/ha-automation-row-live-test.ts

@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -13,7 +12,6 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
  *
  * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
  * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
  */
 @customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -21,8 +19,6 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
-  @property() public message?: string;
-
   protected render() {
     return html`
       <div
@@ -31,39 +27,38 @@ export class HaAutomationRowLiveTest extends LitElement {
         tabindex="0"
         aria-label=${this.label}
       ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
     `;
   }
 
   static styles = css`
     :host {
       position: absolute;
+      top: -5px;
       inset-inline-end: -6px;
       display: inline-block;
     }
     #indicator {
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
       border-radius: var(--ha-border-radius-circle);
-      border: 3px solid;
+      border: var(--ha-border-width-md) solid;
       box-sizing: border-box;
       background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
       transition: all var(--ha-animation-duration-normal) ease-in-out;
     }
     :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-fill-success-loud-resting);
-      border-color: var(--ha-color-fill-success-loud-resting);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
     }
     :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-fill-warning-loud-resting);
+      border-color: var(--ha-color-orange-60);
     }
     :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-fill-danger-loud-resting);
+      border-color: var(--ha-color-red-60);
     }
     :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-fill-neutral-loud-resting);
+      border-color: var(--ha-color-neutral-60);
     }
   `;
 }

src/components/automation/ha-automation-row.ts

@@ -165,7 +165,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="leading-icon"]) {
       color: var(--ha-color-on-neutral-quiet);
     }
-    :host([building-block]) ::slotted([slot="leading-icon"]) {
+    :host([building-block]) ::slotted(#condition-icon) {
       --mdc-icon-size: var(--ha-space-5);
       color: var(--white-color);
       transform: rotate(-45deg);

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

@@ -14,6 +14,7 @@ import type {
   ECElementEvent,
   LegendComponentOption,
   LineSeriesOption,
+  TooltipOption,
   XAXisOption,
   YAXisOption,
 } from "echarts/types/dist/shared";
@@ -29,22 +30,59 @@ import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { afterNextRender } from "../../common/util/render-status";
-import { filterXSS } from "../../common/util/xss";
 import { uiContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type {
+  ECOption,
+  HaECOption,
+  HaECSeries,
+  HaECSeriesItem,
+  HaTooltipOption,
+} from "../../resources/echarts/echarts";
 import type { HomeAssistant, HomeAssistantUI } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";
+import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
 
+type RawSeriesOption = Exclude<
+  NonNullable<ECOption["series"]>,
+  readonly unknown[]
+>;
+
+const toEChartsFormatter = (
+  fn: ReturnType<typeof wrapLitTooltipFormatter>
+): NonNullable<TooltipOption["formatter"]> =>
+  fn as NonNullable<TooltipOption["formatter"]>;
+
+const convertHaTooltipFormatter = (tooltip: HaTooltipOption): TooltipOption => {
+  const { formatter, ...rest } = tooltip;
+  const next: TooltipOption = { ...rest };
+  if (typeof formatter === "function") {
+    next.formatter = toEChartsFormatter(wrapLitTooltipFormatter(formatter));
+  } else if (formatter !== undefined) {
+    next.formatter = formatter;
+  }
+  return next;
+};
+
+const processSeriesTooltipFormatter = (s: HaECSeriesItem): RawSeriesOption => {
+  if (s.tooltip && typeof s.tooltip.formatter === "function") {
+    return {
+      ...s,
+      tooltip: convertHaTooltipFormatter(s.tooltip),
+    } as RawSeriesOption;
+  }
+  return s as RawSeriesOption;
+};
+
 export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
   data?: {
@@ -66,9 +104,9 @@ export class HaChartBase extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public data: ECOption["series"] = [];
+  @property({ attribute: false }) public data: HaECSeries = [];
 
-  @property({ attribute: false }) public options?: ECOption;
+  @property({ attribute: false }) public options?: HaECOption;
 
   @property({ type: String }) public height?: string;
 
@@ -614,7 +652,7 @@ export class HaChartBase extends LitElement {
 
   // Return an array of all IDs associated with the legend item of the primaryId
   private _getAllIdsFromLegend(
-    options: ECOption | undefined,
+    options: HaECOption | undefined,
     primaryId: string
   ): string[] {
     if (!options) return [primaryId];
@@ -634,7 +672,7 @@ export class HaChartBase extends LitElement {
 
   // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
   // No known need to remove items at this time.
-  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
+  private _updateHiddenStatsFromOptions(options: HaECOption | undefined) {
     if (!options) return;
     const legend = ensureArray(this.options?.legend || [])[0] as
       | LegendComponentOption
@@ -757,22 +795,34 @@ export class HaChartBase extends LitElement {
       xAxis,
     };
 
-    const isMobile = window.matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
-    if (isMobile && options.tooltip) {
-      // mobile charts are full width so we need to confine the tooltip to the chart
-      const tooltips = Array.isArray(options.tooltip)
-        ? options.tooltip
-        : [options.tooltip];
-      tooltips.forEach((tooltip) => {
-        tooltip.confine = true;
-        tooltip.appendTo = undefined;
-        tooltip.triggerOn = "click";
-      });
-      options.tooltip = tooltips;
+    if (options.tooltip) {
+      const isMobile = window.matchMedia(
+        "all and (max-width: 450px), all and (max-height: 500px)"
+      ).matches;
+      // Shallow-copy each tooltip object so wrap/mobile mutations don't leak
+      // back into the caller's options.tooltip reference (callers may cache the
+      // options object via memoizeOne, in which case in-place mutation would
+      // pollute that cache across chart instances).
+      const processTooltip = (tooltip: HaTooltipOption): TooltipOption => {
+        const next = convertHaTooltipFormatter(tooltip);
+        if (isMobile) {
+          // mobile charts are full width so we need to confine the tooltip to the chart
+          next.confine = true;
+          next.appendTo = undefined;
+          next.triggerOn = "click";
+        }
+        return next;
+      };
+      const haTooltip = options.tooltip;
+      const processedTooltip = Array.isArray(haTooltip)
+        ? haTooltip.map(processTooltip)
+        : processTooltip(haTooltip);
+      return {
+        ...options,
+        tooltip: processedTooltip,
+      } as ECOption;
     }
-    return options;
+    return options as ECOption;
   }
 
   private _createTheme(style: CSSStyleDeclaration) {
@@ -960,8 +1010,12 @@ export class HaChartBase extends LitElement {
       const data = this._hiddenDatasets.has(String(s.id ?? s.name))
         ? undefined
         : s.data;
+      let result = {
+        ...s,
+        data,
+      } as HaECSeriesItem;
       if (data && s.type === "line") {
-        if (s.sampling === "minmax") {
+        if ((s as LineSeriesOption).sampling === "minmax") {
           const minX = xAxis?.min
             ? xAxis.min instanceof Date
               ? xAxis.min.getTime()
@@ -976,8 +1030,8 @@ export class HaChartBase extends LitElement {
                 ? xAxis.max
                 : undefined
             : undefined;
-          return {
-            ...s,
+          result = {
+            ...result,
             sampling: undefined,
             data: downSampleLineData(
               data as LineSeriesOption["data"],
@@ -985,11 +1039,10 @@ export class HaChartBase extends LitElement {
               minX,
               maxX
             ),
-          };
+          } as HaECSeriesItem;
         }
       }
-      const name = filterXSS(String(s.name ?? s.id ?? ""));
-      return { ...s, name, data };
+      return processSeriesTooltipFormatter(result);
     });
     return series as ECOption["series"];
   }
@@ -1326,8 +1379,8 @@ export class HaChartBase extends LitElement {
   }
 
   private _compareCustomLegendOptions(
-    oldOptions: ECOption | undefined,
-    newOptions: ECOption | undefined
+    oldOptions: HaECOption | undefined,
+    newOptions: HaECOption | undefined
   ): boolean {
     const oldLegends = ensureArray(
       oldOptions?.legend || []

src/components/chart/ha-chart-tooltip-marker.ts

@@ -0,0 +1,41 @@
+import type { PropertyValues } from "lit";
+import { css, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-chart-tooltip-marker")
+class HaChartTooltipMarker extends LitElement {
+  @property() public color = "";
+
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
+  protected willUpdate(changed: PropertyValues) {
+    if (changed.has("color")) {
+      this.style.backgroundColor = this.color;
+    }
+  }
+
+  protected render() {
+    return nothing;
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      margin-inline-end: 4px;
+      margin-inline-start: initial;
+      border-radius: 10px;
+      width: 10px;
+      height: 10px;
+      vertical-align: middle;
+    }
+    :host([rtl]) {
+      direction: rtl;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-chart-tooltip-marker": HaChartTooltipMarker;
+  }
+}

src/components/chart/ha-network-graph.ts

@@ -1,6 +1,6 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
-import type { PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 
@@ -11,7 +11,7 @@ import type {
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
@@ -78,7 +78,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public tooltipFormatter?: (
     params: TopLevelFormatterParams
-  ) => string;
+  ) => TemplateResult | typeof nothing | null;
 
   /**
    * Optional callback that returns additional searchable strings for a node.
@@ -182,7 +182,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
   }
 
   private _createOptions = memoizeOne(
-    (categories?: NetworkData["categories"]): ECOption => ({
+    (categories?: NetworkData["categories"]): HaECOption => ({
       tooltip: {
         trigger: "item",
         confine: true,

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

@@ -11,10 +11,10 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { fireEvent } from "../../common/dom/fire_event";
 import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import { measureTextWidth } from "../../util/text";
-import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
+import "./ha-chart-tooltip-marker";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
 
@@ -71,7 +71,7 @@ export class HaSankeyChart extends LitElement {
   });
 
   render() {
-    const options = {
+    const options: HaECOption = {
       grid: {
         top: 0,
         bottom: 0,
@@ -83,7 +83,7 @@ export class HaSankeyChart extends LitElement {
         formatter: this._renderTooltip,
         appendTo: document.body,
       },
-    } as ECOption;
+    };
 
     return html`<ha-chart-base
       .hass=${this.hass}
@@ -101,14 +101,22 @@ export class HaSankeyChart extends LitElement {
     const value = this.valueFormatter
       ? this.valueFormatter(data.value)
       : data.value;
+    // Keep numbers and units left-to-right, even in RTL locales.
+    const formattedValue = html`<div style="direction:ltr; display: inline;">
+      ${value}
+    </div>`;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
+      return html`<ha-chart-tooltip-marker
+          .color=${String(params.color ?? "")}
+        ></ha-chart-tooltip-marker>
+        ${node?.label ?? data.id}<br />${formattedValue}`;
     }
     if (data.source && data.target) {
       const source = this.data.nodes.find((n) => n.id === data.source);
       const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
+      return html`${source?.label ?? data.source} →
+        ${target?.label ?? data.target}<br />${formattedValue}`;
     }
     return null;
   };

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

@@ -5,10 +5,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
-import { filterXSS } from "../../common/util/xss";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
+import "./ha-chart-tooltip-marker";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
 let SunburstChart: typeof import("echarts/lib/chart/sunburst/install");
@@ -50,13 +50,13 @@ export class HaSunburstChart extends LitElement {
       return nothing;
     }
 
-    const options = {
+    const options: HaECOption = {
       tooltip: {
         trigger: "item",
         formatter: this._renderTooltip,
         appendTo: document.body,
       },
-    } as ECOption;
+    };
 
     return html`<ha-chart-base
       .data=${this._createData(this.data)}
@@ -71,7 +71,10 @@ export class HaSunburstChart extends LitElement {
     const value = this.valueFormatter
       ? this.valueFormatter(data.value)
       : data.value;
-    return `${params.marker} ${filterXSS(data.name)}<br>${value}`;
+    return html`<ha-chart-tooltip-marker
+        .color=${String(params.color ?? "")}
+      ></ha-chart-tooltip-marker>
+      ${data.name}<br />${value}`;
   };
 
   private _createData = memoizeOne(

src/components/chart/lit-tooltip-formatter.ts

@@ -0,0 +1,41 @@
+import { nothing, render } from "lit";
+import type { LitTooltipFormatter } from "../../resources/echarts/echarts";
+
+type WrappedTooltipFormatter = (
+  params: unknown,
+  ticket?: string
+) => HTMLElement | null;
+
+export type { WrappedTooltipFormatter };
+
+const litTooltipFormatterCache = new WeakMap<
+  LitTooltipFormatter | WrappedTooltipFormatter,
+  WrappedTooltipFormatter
+>();
+
+export const wrapLitTooltipFormatter = (
+  fn: LitTooltipFormatter | WrappedTooltipFormatter
+): WrappedTooltipFormatter => {
+  const cached = litTooltipFormatterCache.get(fn);
+  if (cached) return cached;
+  const container = document.createElement("div");
+  // display:contents keeps the wrapper layout-invisible so its children act as
+  // direct children of echarts' tooltip box, matching the prior innerHTML behavior.
+  container.style.display = "contents";
+  const wrapped: WrappedTooltipFormatter = (params, ticket) => {
+    const result = (fn as LitTooltipFormatter)(params, ticket);
+    // `nothing` and null/undefined must all suppress the tooltip. Returning
+    // `nothing` to echarts via `render(nothing, container)` leaves a Lit
+    // comment marker behind so echarts would show an empty box; convert it to
+    // null instead so `setContent(null)` clears innerHTML and `show()` hides.
+    if (result === null || result === undefined || result === nothing) {
+      return null;
+    }
+    render(result, container);
+    return container;
+  };
+  litTooltipFormatterCache.set(fn, wrapped);
+  // Idempotent re-wrap: looking up the wrapped fn returns itself.
+  litTooltipFormatterCache.set(wrapped, wrapped);
+  return wrapped;
+};

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

@@ -1,5 +1,5 @@
-import type { PropertyValues } from "lit";
-import { html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
@@ -12,8 +12,9 @@ import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
+import "./ha-chart-tooltip-marker";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
   getNumberFormatOptions,
@@ -24,7 +25,6 @@ import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
-import { filterXSS } from "../../common/util/xss";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
 
 const safeParseFloat = (value) => {
@@ -108,7 +108,7 @@ export class StateHistoryChartLine extends LitElement {
 
   private _datasetToDataIndex: number[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   private _hiddenStats = new Set<string>();
 
@@ -141,12 +141,11 @@ export class StateHistoryChartLine extends LitElement {
 
   private _renderTooltip = (params: any) => {
     const time = params[0].axisValue;
-    const title =
-      formatDateTimeWithSeconds(
-        new Date(time),
-        this.hass.locale,
-        this.hass.config
-      ) + "<br>";
+    const title = formatDateTimeWithSeconds(
+      new Date(time),
+      this.hass.locale,
+      this.hass.config
+    );
     const datapoints: Record<string, any>[] = [];
     this._chartData.forEach((dataset, index) => {
       if (
@@ -177,52 +176,44 @@ export class StateHistoryChartLine extends LitElement {
         seriesName: dataset.name,
         seriesIndex: index,
         value: lastData,
-        // HTML copied from echarts. May change based on options
-        marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
+        color: dataset.color,
       });
     });
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
 
-    return (
-      title +
-      datapoints
-        .map((param) => {
-          const entityId = this._entityIds[param.seriesIndex];
-          const stateObj = this.hass.states[entityId];
-          const entry = this.hass.entities[entityId];
-          const stateValue = String(param.value[1]);
-          let value = stateObj
-            ? this.hass.formatEntityState(stateObj, stateValue)
-            : `${formatNumber(
-                stateValue,
-                this.hass.locale,
-                getNumberFormatOptions(undefined, entry)
-              )}${unit}`;
-          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-          const data = this.data[dataIndex];
-          if (data.statistics && data.statistics.length > 0) {
-            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-            const source =
-              data.states.length === 0 ||
-              param.value[0] < data.states[0].last_changed
-                ? `${this.hass.localize(
-                    "ui.components.history_charts.source_stats"
-                  )}`
-                : `${this.hass.localize(
-                    "ui.components.history_charts.source_history"
-                  )}`;
-            value += source;
-          }
-
-          if (param.seriesName) {
-            return `${param.marker} ${filterXSS(param.seriesName)}: ${value}`;
-          }
-          return `${param.marker} ${value}`;
-        })
-        .join("<br>")
-    );
+    return html`${title}${datapoints.map((param) => {
+      const entityId = this._entityIds[param.seriesIndex];
+      const stateObj = this.hass.states[entityId];
+      const entry = this.hass.entities[entityId];
+      const stateValue = String(param.value[1]);
+      const value = stateObj
+        ? this.hass.formatEntityState(stateObj, stateValue)
+        : `${formatNumber(
+            stateValue,
+            this.hass.locale,
+            getNumberFormatOptions(undefined, entry)
+          )}${unit}`;
+      const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+      const data = this.data[dataIndex];
+      let statSuffix: TemplateResult | typeof nothing = nothing;
+      if (data.statistics && data.statistics.length > 0) {
+        const source =
+          data.states.length === 0 ||
+          param.value[0] < data.states[0].last_changed
+            ? this.hass.localize("ui.components.history_charts.source_stats")
+            : this.hass.localize("ui.components.history_charts.source_history");
+        // Five non-breaking spaces indent the source label.
+        statSuffix = html`<br />${"\u00a0".repeat(5)}${source}`;
+      }
+      return html`<br /><ha-chart-tooltip-marker
+          .color=${String(param.color ?? "")}
+        ></ha-chart-tooltip-marker>
+        ${param.seriesName
+          ? html`${param.seriesName}: `
+          : nothing}${value}${statSuffix}`;
+    })}`;
   };
 
   private _datasetHidden(ev: CustomEvent) {

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

@@ -1,11 +1,10 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type {
   CustomSeriesOption,
   CustomSeriesRenderItem,
   ECElementEvent,
-  TooltipFormatterCallback,
   TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -15,8 +14,9 @@ import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
+import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
 import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -57,7 +57,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _chartData: CustomSeriesOption[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   @state() private _yWidth = 0;
 
@@ -69,7 +69,7 @@ export class StateHistoryChartTimeline extends LitElement {
         .hass=${this.hass}
         .options=${this._chartOptions}
         .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData as ECOption["series"]}
+        .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
         @chart-zoom=${this._handleDataZoom}
@@ -132,42 +132,35 @@ export class StateHistoryChartTimeline extends LitElement {
     return rect;
   };
 
-  private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
-    (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker, seriesName, color } = Array.isArray(params)
-        ? params[0]
-        : params;
-      const title = seriesName
-        ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
-        : "";
-      const durationInMs = value![2] - value![1];
-      const formattedDuration = `${this.hass.localize(
-        "ui.components.history_charts.duration"
-      )}: ${millisecondsToDuration(durationInMs)}`;
+  private _renderTooltip = (params: TooltipPositionCallbackParams) => {
+    const { value, name, seriesName, color } = Array.isArray(params)
+      ? params[0]
+      : params;
+    const durationInMs = value![2] - value![1];
+    const formattedDuration = `${this.hass.localize(
+      "ui.components.history_charts.duration"
+    )}: ${millisecondsToDuration(durationInMs)}`;
 
-      const markerLocalized = !computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      )
-        ? marker
-        : `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
-
-      const lines = [
-        markerLocalized + name,
-        formatDateTimeWithSeconds(
-          new Date(value![1]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formatDateTimeWithSeconds(
-          new Date(value![2]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formattedDuration,
-      ].join("<br>");
-      return [title, lines].join("");
-    };
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+    return html`${seriesName
+        ? html`<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
+        : nothing}<ha-chart-tooltip-marker
+        .color=${String(color ?? "")}
+        .rtl=${rtl}
+      ></ha-chart-tooltip-marker
+      >${name}<br />${formatDateTimeWithSeconds(
+        new Date(value![1]),
+        this.hass.locale,
+        this.hass.config
+      )}<br />${formatDateTimeWithSeconds(
+        new Date(value![2]),
+        this.hass.locale,
+        this.hass.config
+      )}<br />${formattedDuration}`;
+  };
 
   public willUpdate(changedProps: PropertyValues) {
     if (

src/components/chart/statistics-chart.ts

@@ -4,7 +4,7 @@ import type {
   ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -34,12 +34,13 @@ import {
   isExternalStatistic,
   statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
+import "./ha-chart-tooltip-marker";
 import { fillDataGapsAndRoundCaps } from "./round-caps";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 
@@ -126,7 +127,7 @@ export class StatisticsChart extends LitElement {
 
   @state() private _statisticIds: string[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   @state() private _hiddenStats = new Set<string>();
 
@@ -251,91 +252,101 @@ export class StatisticsChart extends LitElement {
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
-    return params
-      .map((param, index: number) => {
-        if (rendered[param.seriesIndex]) return "";
-        rendered[param.seriesIndex] = true;
+    const rows: {
+      time?: string;
+      color: string;
+      seriesName?: string;
+      value: string;
+    }[] = [];
+    for (const param of params) {
+      if (rendered[param.seriesIndex]) continue;
+      rendered[param.seriesIndex] = true;
 
-        const statisticId = this._statisticIds[param.seriesIndex];
-        const stateObj = this.hass.states[statisticId];
-        const entry = this.hass.entities[statisticId];
-        let rawValue: string;
-        let rawTime: string;
-        if (chartIsBar) {
-          // For bar charts value is always second value.
-          rawValue = String(param.value[1]);
-          // Time value is third value (un-shifted date) if given, otherwise first value
-          let startTime: Date;
-          let endTime: Date | undefined;
-          if (param.value[2]) {
-            startTime = new Date(param.value[2]);
-            if (param.value[3]) {
-              endTime = new Date(param.value[3]);
-            }
-          } else {
-            startTime = new Date(param.value[0]);
-          }
-          if (
-            period === "year" ||
-            period === "month" ||
-            period === "week" ||
-            period === "day"
-          ) {
-            // For year/month/day periods, show only the date
-            rawTime =
-              formatDate(startTime, this.hass.locale, this.hass.config) +
-              (endTime && period !== "day"
-                ? ` – ${formatDate(
-                    endTime,
-                    this.hass.locale,
-                    this.hass.config
-                  )}`
-                : "") +
-              "<br>";
-          } else {
-            // For other time periods, include time in render, and optionally show range
-            // if we have an end time.
-            rawTime =
-              formatDateTimeWithSeconds(
-                startTime,
-                this.hass.locale,
-                this.hass.config
-              ) +
-              (endTime
-                ? ` – ${formatTimeWithSeconds(
-                    endTime,
-                    this.hass.locale,
-                    this.hass.config
-                  )}`
-                : "") +
-              "<br>";
+      const statisticId = this._statisticIds[param.seriesIndex];
+      const stateObj = this.hass.states[statisticId];
+      const entry = this.hass.entities[statisticId];
+      let rawValue: string;
+      let rawTime: string;
+      if (chartIsBar) {
+        // For bar charts value is always second value.
+        rawValue = String(param.value[1]);
+        // Time value is third value (un-shifted date) if given, otherwise first value
+        let startTime: Date;
+        let endTime: Date | undefined;
+        if (param.value[2]) {
+          startTime = new Date(param.value[2]);
+          if (param.value[3]) {
+            endTime = new Date(param.value[3]);
           }
         } else {
-          // For lines max series can have 3 values, as the second value is the max-min to form a band
-          rawValue = String(param.value[2] ?? param.value[1]);
-          // Time value is always first value
-          rawTime = `${formatDateTimeWithSeconds(
-            new Date(param.value[0]),
-            this.hass.locale,
-            this.hass.config
-          )} <br>`;
+          startTime = new Date(param.value[0]);
         }
-
-        const options = getNumberFormatOptions(stateObj, entry) ?? {
-          maximumFractionDigits: 2,
-        };
-
-        const value = `${formatNumber(
-          rawValue,
+        if (
+          period === "year" ||
+          period === "month" ||
+          period === "week" ||
+          period === "day"
+        ) {
+          // For year/month/day periods, show only the date
+          rawTime =
+            formatDate(startTime, this.hass.locale, this.hass.config) +
+            (endTime && period !== "day"
+              ? ` – ${formatDate(endTime, this.hass.locale, this.hass.config)}`
+              : "");
+        } else {
+          // For other time periods, include time in render, and optionally show range
+          // if we have an end time.
+          rawTime =
+            formatDateTimeWithSeconds(
+              startTime,
+              this.hass.locale,
+              this.hass.config
+            ) +
+            (endTime
+              ? ` – ${formatTimeWithSeconds(
+                  endTime,
+                  this.hass.locale,
+                  this.hass.config
+                )}`
+              : "");
+        }
+      } else {
+        // For lines max series can have 3 values, as the second value is the max-min to form a band
+        rawValue = String(param.value[2] ?? param.value[1]);
+        // Time value is always first value
+        rawTime = formatDateTimeWithSeconds(
+          new Date(param.value[0]),
           this.hass.locale,
-          options
-        )}${unit}`;
+          this.hass.config
+        );
+      }
 
-        const time = index === 0 ? rawTime : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}`;
-      })
-      .filter(Boolean)
-      .join("<br>");
+      const options = getNumberFormatOptions(stateObj, entry) ?? {
+        maximumFractionDigits: 2,
+      };
+
+      const value = `${formatNumber(rawValue, this.hass.locale, options)}${unit}`;
+
+      rows.push({
+        time: rows.length === 0 ? rawTime : undefined,
+        color: String(param.color ?? ""),
+        seriesName: param.seriesName,
+        value,
+      });
+    }
+
+    if (rows.length === 0) return nothing;
+
+    return html`${rows.map(
+      (row, i) =>
+        html`${row.time
+            ? html`${row.time}<br />`
+            : nothing}<ha-chart-tooltip-marker
+            .color=${row.color}
+          ></ha-chart-tooltip-marker>
+          ${row.seriesName}:
+          ${row.value}${i < rows.length - 1 ? html`<br />` : nothing}`
+    )}`;
   };
 
   private _createOptions() {

src/components/ha-check-list-item.ts

@@ -20,6 +20,7 @@ export class HaCheckListItem extends CheckListItemBase {
   separateCheckboxClick = false;
 
   async onChange(event) {
+    event.stopPropagation();
     super.onChange(event);
     fireEvent(this, event.type);
   }

src/components/ha-generic-picker.ts

@@ -77,7 +77,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     | "bottom-start"
     | "bottom-end"
     | "left-start"
-    | "left-end" = "bottom-start";
+    | "left-end" = "bottom";
 
   /** If set picker shows an add button instead of textbox when value isn't set */
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;

src/components/ha-icon-picker.ts

@@ -121,7 +121,6 @@ export class HaIconPicker extends LitElement {
         .label=${this.label}
         .value=${this._value}
         .searchFn=${this._filterIcons}
-        popover-placement="bottom-start"
         @value-changed=${this._valueChanged}
       >
         <slot name="start"></slot>

src/components/ha-language-picker.ts

@@ -152,7 +152,6 @@ export class HaLanguagePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        popover-placement="bottom-end"
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass?.localize(
           "ui.components.language-picker.no_languages"

src/components/ha-theme-picker.ts

@@ -82,7 +82,6 @@ export class HaThemePicker extends LitElement {
         .disabled=${this.disabled}
         .required=${this.required}
         @value-changed=${this._changed}
-        popover-placement="bottom"
       ></ha-generic-picker>
     `;
   }

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

@@ -22,6 +22,7 @@ export const haTopAppBarFixedStyles = css`
     padding-top: var(--safe-area-inset-top);
     padding-right: var(--safe-area-inset-right);
     transition:
+      box-shadow var(--ha-animation-duration-normal) ease,
       width var(--ha-animation-duration-normal) ease,
       padding-left var(--ha-animation-duration-normal) ease,
       padding-right var(--ha-animation-duration-normal) ease;

src/data/automation.ts

@@ -485,6 +485,17 @@ export const migrateAutomationTrigger = (
     }
     delete trigger.platform;
   }
+
+  if ("options" in trigger) {
+    if (trigger.options && "behavior" in trigger.options) {
+      if (trigger.options.behavior === "any") {
+        trigger.options.behavior = "each";
+      } else if (trigger.options.behavior === "last") {
+        trigger.options.behavior = "all";
+      }
+    }
+  }
+
   return trigger;
 };
 

src/data/calendar.ts

@@ -256,6 +256,7 @@ export const normalizeSubscriptionEventData = (
     dtstart: eventStart,
     dtend: eventEnd,
     description: eventData.description ?? undefined,
+    location: eventData.location ?? undefined,
     uid: eventData.uid ?? undefined,
     recurrence_id: eventData.recurrence_id ?? undefined,
     rrule: eventData.rrule ?? undefined,

src/dialogs/add-to/add-to.ts

@@ -1,26 +1,37 @@
+import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import type { LocalizeKeys } from "../../common/translations/localize";
 import { createSearchParam } from "../../common/url/search-params";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+import { SCENE_IGNORED_DOMAINS, type SceneEntities } from "../../data/scene";
 import type { SingleHassServiceTarget } from "../../data/target";
 import {
   ADD_AUTOMATION_ELEMENT_AREA_TARGET_PARAM,
   ADD_AUTOMATION_ELEMENT_DEVICE_TARGET_PARAM,
-  ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
   ADD_AUTOMATION_ELEMENT_ENTITY_TARGET_PARAM,
+  ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
 } from "../../panels/config/automation/show-add-automation-element-dialog";
 import type { HomeAssistant, TranslationDict } from "../../types";
 
-/** Add to action keys are the keys of the translation dictionary for the add to actions. */
-export type AddToActionKey =
-  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["actions"] extends infer Actions
-    ? keyof Actions
-    : never;
+/** Add to action keys are the keys of the translation dictionary for the add to action options. */
+type AddToActionOptions =
+  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["action_options"];
+
+export type AddToActionKey = Extract<keyof AddToActionOptions, string>;
+
+export type AddToAutomationScriptActionKey = Exclude<AddToActionKey, "scene">;
+
+/** Fully-qualified localize key for an add to action option label. */
+type AddToActionOptionLabelKey = LocalizeKeys &
+  `ui.dialogs.more_info_control.add_to.action_options.${AddToActionKey}`;
 
 interface BaseEntityAddToAction {
   /** Whether the action is enabled and can be selected. */
   enabled: boolean;
-  /** Translated name of the action */
-  name: string;
+  /** Translated label of the action option */
+  name?: string;
+  /** Fully-qualified localize key for the action option label */
+  nameKey?: AddToActionOptionLabelKey;
   /** Optional translated description of the action */
   description?: string;
   /** MDI icon name (e.g., "mdi:car") */
@@ -31,7 +42,7 @@ export interface DefaultEntityAddToAction extends BaseEntityAddToAction {
   /** Type of action handled in the frontend */
   type: "default";
   /** Stable key used to resolve the action handler */
-  key: AddToActionKey;
+  key: AddToAutomationScriptActionKey;
 }
 
 export interface ExternalEntityAddToAction extends BaseEntityAddToAction {
@@ -48,11 +59,11 @@ export type EntityAddToAction =
 export type EntityAddToActions = EntityAddToAction[];
 
 interface ActionDefinition {
-  translation_key: AddToActionKey;
+  translation_key: AddToAutomationScriptActionKey;
   icon: string;
 }
 
-export const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
+const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
   {
     translation_key: "automation_trigger",
     icon: "mdi:robot-outline",
@@ -71,33 +82,49 @@ export const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
   },
 ];
 
-export const getDefaultAddToActions = (
-  states: HomeAssistant["states"],
-  localize: LocalizeFunc,
-  formatEntityName: HomeAssistant["formatEntityName"],
-  entityId: string
-): EntityAddToActions =>
+export const getDefaultAddToActions = (): EntityAddToActions =>
   DEFAULT_ACTION_DEFS.map(
     (def: ActionDefinition): EntityAddToAction => ({
       type: "default",
       key: def.translation_key,
       enabled: true,
-      name: localize(
-        `ui.dialogs.more_info_control.add_to.actions.${def.translation_key}`,
-        {
-          target:
-            states[entityId] !== undefined
-              ? formatEntityName(states[entityId], undefined)
-              : entityId,
-        }
-      ),
+      nameKey: `ui.dialogs.more_info_control.add_to.action_options.${def.translation_key}`,
       icon: def.icon,
     })
   );
 
+export const createAddToSceneEntities = (
+  entityIds: string[]
+): SceneEntities => {
+  const entities: SceneEntities = {};
+  for (const entityId of entityIds) {
+    entities[entityId] = "";
+  }
+  return entities;
+};
+
+export const filterAddToSceneEntityIds = (
+  entityIds: string[],
+  entityRegistry: readonly EntityRegistryEntry[],
+  states: HomeAssistant["states"]
+): string[] => {
+  const entityIdSet = new Set(entityIds);
+
+  return entityRegistry
+    .filter((entry) => entityIdSet.has(entry.entity_id))
+    .filter(
+      (entry) =>
+        !entry.entity_category &&
+        !entry.hidden_by &&
+        !SCENE_IGNORED_DOMAINS.includes(computeDomain(entry.entity_id)) &&
+        states[entry.entity_id]
+    )
+    .map((entry) => entry.entity_id);
+};
+
 /** Handler for adding a target to an automation/script. */
 export function addToActionHandler(
-  key: AddToActionKey,
+  key: AddToAutomationScriptActionKey,
   target: SingleHassServiceTarget
 ): Promise<boolean> {
   const searchParams: Record<string, string> = {};

src/dialogs/add-to/ha-add-to-action-list.ts

@@ -0,0 +1,211 @@
+import { mdiPlus } from "@mdi/js";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
+import type {
+  LocalizeFunc,
+  LocalizeKeys,
+} from "../../common/translations/localize";
+import "../../components/ha-icon";
+import "../../components/ha-svg-icon";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+
+export interface AddToActionListItem {
+  name?: string;
+  nameKey?: LocalizeKeys;
+  description?: string;
+  descriptionKey?: LocalizeKeys;
+  icon?: string;
+  iconPath?: string;
+  enabled?: boolean;
+}
+
+export interface AddToActionListSection<
+  Item extends AddToActionListItem = AddToActionListItem,
+> {
+  title?: string;
+  titleKey?: LocalizeKeys;
+  actions: readonly Item[];
+  empty?: string;
+  emptyKey?: LocalizeKeys;
+}
+
+export interface AddToActionListActionSelectedDetail<
+  Item extends AddToActionListItem = AddToActionListItem,
+> {
+  action: Item;
+}
+
+export type AddToActionListActionSelectedEvent<
+  Item extends AddToActionListItem = AddToActionListItem,
+> = HASSDomEvent<AddToActionListActionSelectedDetail<Item>>;
+
+@customElement("ha-add-to-action-list")
+class HaAddToActionList extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @property({ attribute: false })
+  public sections: readonly AddToActionListSection[] = [];
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this.sections.length) {
+      return nothing;
+    }
+
+    return html`${this.sections.map((section, sectionIndex) =>
+      this._renderSection(section, sectionIndex)
+    )}`;
+  }
+
+  private _renderSection(
+    section: AddToActionListSection,
+    sectionIndex: number
+  ): TemplateResult | typeof nothing {
+    if (!section.actions.length && !section.empty && !section.emptyKey) {
+      return nothing;
+    }
+
+    return html`
+      <h3 class="section-header">
+        ${this._localizeValue(section.title, section.titleKey)}
+      </h3>
+      ${section.actions.length
+        ? html`<ha-list-base>
+            ${section.actions.map((action, actionIndex) =>
+              this._renderActionItem(action, sectionIndex, actionIndex)
+            )}
+          </ha-list-base>`
+        : html`<h4 class="empty">
+            ${this._localizeValue(section.empty, section.emptyKey)}
+          </h4>`}
+    `;
+  }
+
+  private _renderActionItem(
+    action: AddToActionListItem,
+    sectionIndex: number,
+    actionIndex: number
+  ): TemplateResult {
+    return html`
+      <ha-list-item-button
+        .disabled=${action.enabled === false}
+        data-section-index=${sectionIndex}
+        data-action-index=${actionIndex}
+        .headline=${this._localizeValue(action.name, action.nameKey)}
+        .supportingText=${this._localizeValue(
+          action.description,
+          action.descriptionKey
+        )}
+        @click=${this._actionSelected}
+      >
+        ${action.icon
+          ? html`<ha-icon
+              class="start-icon"
+              slot="start"
+              .icon=${action.icon}
+            ></ha-icon>`
+          : action.iconPath
+            ? html`<ha-svg-icon
+                class="start-icon"
+                slot="start"
+                .path=${action.iconPath}
+              ></ha-svg-icon>`
+            : nothing}
+        <ha-svg-icon class="plus" slot="end" .path=${mdiPlus}></ha-svg-icon>
+      </ha-list-item-button>
+    `;
+  }
+
+  private _localizeValue(
+    value?: string,
+    localizeKey?: LocalizeKeys
+  ): string | undefined {
+    return value || (localizeKey ? this._localize(localizeKey) : undefined);
+  }
+
+  private _actionSelected(
+    ev: HASSDomCurrentTargetEvent<HaListItemButton>
+  ): void {
+    const action =
+      this.sections[Number(ev.currentTarget.dataset.sectionIndex)]?.actions[
+        Number(ev.currentTarget.dataset.actionIndex)
+      ];
+
+    if (!action) {
+      return;
+    }
+
+    if (action.enabled === false) {
+      return;
+    }
+
+    fireEvent(this, "add-to-list-action-selected", {
+      action,
+    });
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+    }
+
+    .section-header {
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
+      margin: 0;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      color: var(--secondary-text-color);
+    }
+
+    .empty {
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
+      margin: 0;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-normal);
+      color: var(--secondary-text-color);
+    }
+
+    ha-list-item-button {
+      --ha-row-item-padding-inline: var(--ha-space-5);
+    }
+
+    ha-icon,
+    ha-svg-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    .start-icon {
+      color: var(--ha-color-text-secondary);
+    }
+
+    .plus {
+      color: var(--primary-color);
+    }
+
+    ha-list-item-button[disabled] .start-icon,
+    ha-list-item-button[disabled] .plus {
+      color: var(--disabled-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-add-to-action-list": HaAddToActionList;
+  }
+
+  interface HASSDomEvents {
+    "add-to-list-action-selected": AddToActionListActionSelectedDetail;
+  }
+}

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -1,26 +1,35 @@
-import { LitElement, css, html, nothing } from "lit";
+import { consume, type ContextType } from "@lit/context";
+import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
-import "../../components/ha-icon";
 import "../../components/ha-spinner";
-import "../../components/item/ha-list-item-button";
-import "../../components/list/ha-list-base";
-import type { HaListItemButton } from "../../components/item/ha-list-item-button";
 import { showToast } from "../../util/toast";
 
-import type { HASSDomCurrentTargetEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
+import { configContext } from "../../data/context";
+import "../add-to/ha-add-to-action-list";
+import type {
+  AddToActionListActionSelectedEvent,
+  AddToActionListSection,
+} from "../add-to/ha-add-to-action-list";
 import {
   type EntityAddToAction,
   type EntityAddToActions,
   addToActionHandler,
   getDefaultAddToActions,
-} from "./add-to";
+} from "../add-to/add-to";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("ha-more-info-add-to")
 export class HaMoreInfoAddTo extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config?: ContextType<typeof configContext>;
+
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @property({ attribute: false }) public entityId!: string;
 
@@ -31,18 +40,13 @@ export class HaMoreInfoAddTo extends LitElement {
   @state() private _loading = true;
 
   private async _loadActions() {
-    this._defaultActions = getDefaultAddToActions(
-      this.hass.states,
-      this.hass.localize,
-      this.hass.formatEntityName,
-      this.entityId
-    );
+    this._defaultActions = getDefaultAddToActions();
     this._externalActions = [];
 
-    if (this.hass.auth.external?.config.hasEntityAddTo) {
+    if (this._config?.auth.external?.config.hasEntityAddTo) {
       try {
         const response =
-          await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
+          await this._config.auth.external.sendMessage<"entity/add_to/get_actions">(
             {
               type: "entity/add_to/get_actions",
               payload: { entity_id: this.entityId },
@@ -66,13 +70,9 @@ export class HaMoreInfoAddTo extends LitElement {
   }
 
   private async _actionSelected(
-    ev: HASSDomCurrentTargetEvent<
-      HaListItemButton & {
-        action: EntityAddToAction;
-      }
-    >
+    ev: AddToActionListActionSelectedEvent<EntityAddToAction>
   ) {
-    const action = ev.currentTarget.action;
+    const { action } = ev.detail;
     if (!action.enabled) {
       return;
     }
@@ -82,7 +82,10 @@ export class HaMoreInfoAddTo extends LitElement {
         if (!action.payload) {
           throw new Error("Missing external action payload");
         }
-        this.hass.auth.external!.fireMessage({
+        if (!this._config?.auth.external) {
+          throw new Error("Missing external app connection");
+        }
+        this._config.auth.external.fireMessage({
           type: "entity/add_to",
           payload: {
             entity_id: this.entityId,
@@ -92,7 +95,7 @@ export class HaMoreInfoAddTo extends LitElement {
         fireEvent(this, "add-to-action-selected");
       } catch (err: unknown) {
         showToast(this, {
-          message: this.hass.localize(
+          message: this._localize(
             "ui.dialogs.more_info_control.add_to.action_failed",
             {
               error: err instanceof Error ? err.message : String(err),
@@ -110,24 +113,6 @@ export class HaMoreInfoAddTo extends LitElement {
     addToActionHandler(action.key, { entity_id: this.entityId });
   }
 
-  private _renderActionItems(actions: EntityAddToActions) {
-    return actions.map(
-      (action) => html`
-        <ha-list-item-button
-          .disabled=${!action.enabled}
-          .action=${action}
-          @click=${this._actionSelected}
-        >
-          <ha-icon slot="start" .icon=${action.icon}></ha-icon>
-          <span slot="headline">${action.name}</span>
-          ${action.description
-            ? html`<span slot="supporting-text">${action.description}</span>`
-            : nothing}
-        </ha-list-item-button>
-      `
-    );
-  }
-
   protected async firstUpdated() {
     await this._loadActions();
     this._loading = false;
@@ -145,29 +130,38 @@ export class HaMoreInfoAddTo extends LitElement {
     if (!this._defaultActions.length && !this._externalActions.length) {
       return html`
         <ha-alert alert-type="info">
-          ${this.hass.localize(
-            "ui.dialogs.more_info_control.add_to.no_actions"
-          )}
+          ${this._localize("ui.dialogs.more_info_control.add_to.no_actions")}
         </ha-alert>
       `;
     }
 
+    const automationActions = this._defaultActions.filter(
+      (action) => action.type === "default" && action.key !== "script_action"
+    );
+    const scriptActions = this._defaultActions.filter(
+      (action) => action.type === "default" && action.key === "script_action"
+    );
+
+    const sections: AddToActionListSection<EntityAddToAction>[] = [
+      {
+        titleKey: "ui.dialogs.more_info_control.add_to.automations_heading",
+        actions: automationActions,
+      },
+      {
+        titleKey: "ui.dialogs.more_info_control.add_to.scripts_heading",
+        actions: scriptActions,
+      },
+      {
+        titleKey: "ui.dialogs.more_info_control.add_to.app_actions",
+        actions: this._externalActions,
+      },
+    ];
+
     return html`
-      <ha-list-base>
-        ${this._renderActionItems(this._defaultActions)}
-      </ha-list-base>
-      ${this._externalActions.length
-        ? html`
-            <h2 class="section-title">
-              ${this.hass.localize(
-                "ui.dialogs.more_info_control.add_to.app_actions"
-              )}
-            </h2>
-            <ha-list-base>
-              ${this._renderActionItems(this._externalActions)}
-            </ha-list-base>
-          `
-        : nothing}
+      <ha-add-to-action-list
+        .sections=${sections}
+        @add-to-list-action-selected=${this._actionSelected}
+      ></ha-add-to-action-list>
     `;
   }
 
@@ -183,20 +177,6 @@ export class HaMoreInfoAddTo extends LitElement {
       align-items: center;
       padding: var(--ha-space-8);
     }
-
-    .section-title {
-      padding: 0 var(--ha-space-6);
-      margin: var(--ha-space-4) 0 var(--ha-space-1);
-      font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-normal);
-      color: var(--secondary-text-color);
-    }
-
-    ha-icon {
-      display: flex;
-      align-items: center;
-    }
   `;
 }
 

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

@@ -23,6 +23,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -517,7 +518,7 @@ export class MoreInfoDialog extends SubscribeMixin(
     await favoritesHandler.copy(favoritesContext);
   }
 
-  private _goToAddEntityTo(ev) {
+  private _goToAddEntityTo(ev: CustomEvent<RequestSelectedDetail>) {
     // Only check for request-selected events (from menu items), not regular clicks (from icon button)
     if (
       ev.type === "request-selected" &&
@@ -590,10 +591,19 @@ export class MoreInfoDialog extends SubscribeMixin(
       (v): v is string => Boolean(v)
     );
     const defaultTitle = breadcrumb.pop() || entityId;
+    const addToTitle = this.hass.localize(
+      "ui.dialogs.more_info_control.add_to.title",
+      { target: defaultTitle }
+    );
+    const addToMenuItem = this.hass.localize(
+      "ui.dialogs.more_info_control.add_to.item"
+    );
     const title =
       this._currView === "details"
         ? this.hass.localize("ui.dialogs.more_info_control.details")
-        : this._childView?.viewTitle || defaultTitle;
+        : this._currView === "add_to"
+          ? addToTitle
+          : this._childView?.viewTitle || defaultTitle;
 
     const favoritesContext =
       this._entry && stateObj
@@ -711,9 +721,7 @@ export class MoreInfoDialog extends SubscribeMixin(
                                 slot="icon"
                                 .path=${mdiPlusBoxMultipleOutline}
                               ></ha-svg-icon>
-                              ${this.hass.localize(
-                                "ui.dialogs.more_info_control.add_to.title"
-                              )}
+                              ${addToMenuItem}
                             </ha-dropdown-item>
 
                             <wa-divider></wa-divider>
@@ -814,9 +822,7 @@ export class MoreInfoDialog extends SubscribeMixin(
                   ? html`
                       <ha-icon-button
                         slot="headerActionItems"
-                        .label=${this.hass.localize(
-                          "ui.dialogs.more_info_control.add_to.title"
-                        )}
+                        .label=${addToMenuItem}
                         .path=${mdiPlusBoxMultipleOutline}
                         @click=${this._goToAddEntityTo}
                       ></ha-icon-button>
@@ -906,7 +912,6 @@ export class MoreInfoDialog extends SubscribeMixin(
                             : this._currView === "add_to"
                               ? html`
                                   <ha-more-info-add-to
-                                    .hass=${this.hass}
                                     .entityId=${entityId}
                                     @add-to-action-selected=${this._goBack}
                                   ></ha-more-info-add-to>

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

@@ -185,23 +185,25 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
   private _renderInfoCard() {
     const systemManaged = this._isSystemManaged(this._currentAddon);
 
-    return html`<ha-card outlined>
+    return html` <ha-card outlined>
       <div class="card-content">
         <div class="addon-header">
-          ${this._currentAddon.logo
-            ? html`
-                <img
-                  class="logo"
-                  alt=""
-                  src="/api/hassio/addons/${this._currentAddon.slug}/logo"
-                />
-              `
-            : nothing}
           <div class="title">
-            ${getAppDisplayName(
-              this._currentAddon.name,
-              this._currentAddon.stage
-            )}
+            ${this._currentAddon.logo
+              ? html`
+                  <img
+                    class="logo"
+                    alt=""
+                    src="/api/hassio/addons/${this._currentAddon.slug}/logo"
+                  />
+                `
+              : nothing}
+            ${!this.narrow
+              ? getAppDisplayName(
+                  this._currentAddon.name,
+                  this._currentAddon.stage
+                )
+              : nothing}
             <div class="description">
               ${this._currentAddon.version
                 ? html`
@@ -239,17 +241,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
             ? html`<supervisor-apps-state
                 .state=${this._currentAddon.state}
               ></supervisor-apps-state>`
-            : html`
-                <ha-progress-button
-                  .disabled=${!this._currentAddon.available}
-                  @click=${this._installClicked}
-                  .iconPath=${mdiApplicationImport}
-                >
-                  ${this.i18n.localize(
-                    "ui.panel.config.apps.dashboard.install"
-                  )}
-                </ha-progress-button>
-              `}
+            : nothing}
         </div>
 
         <ha-chip-set class="capabilities">
@@ -513,7 +505,8 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
       </div>
       ${(this._currentAddon.update_available && this._updateEntityId) ||
       this._computeShowWebUI ||
-      this._computeShowIngressUI
+      this._computeShowIngressUI ||
+      !this._currentAddon.version
         ? html`
             <div class="card-actions">
               ${this._currentAddon.update_available && this._updateEntityId
@@ -549,6 +542,19 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
                     </ha-button>
                   `
                 : nothing}
+              ${!this._currentAddon.version
+                ? html`
+                    <ha-progress-button
+                      .disabled=${!this._currentAddon.available}
+                      @click=${this._installClicked}
+                      .iconPath=${mdiApplicationImport}
+                    >
+                      ${this.i18n.localize(
+                        "ui.panel.config.apps.dashboard.install"
+                      )}
+                    </ha-progress-button>
+                  `
+                : nothing}
             </div>
           `
         : nothing}
@@ -1497,16 +1503,17 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
         }
         .addon-header {
           display: flex;
-          padding-inline-start: var(--ha-space-2);
-          padding-inline-end: initial;
           font-size: var(--ha-font-size-2xl);
           color: var(--ha-card-header-color, var(--primary-text-color));
           align-items: center;
           gap: var(--ha-space-2);
+          flex-wrap: wrap;
+          margin-bottom: var(--ha-space-4);
         }
 
         .addon-header .title {
           flex: 1;
+          margin-inline-end: var(--ha-space-4);
         }
 
         .addon-header .title .description {
@@ -1525,17 +1532,15 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
           color: var(--error-color);
           margin-bottom: var(--ha-space-4);
         }
-        .description {
-          margin-bottom: var(--ha-space-4);
-        }
         .description a {
           color: var(--primary-color);
         }
 
         img.logo {
           max-width: 100%;
-          max-height: 60px;
+          max-height: 40px;
           display: block;
+          margin-bottom: var(--ha-space-2);
         }
         ha-assist-chip {
           --md-sys-color-primary: var(--text-primary-color);

src/panels/config/apps/components/supervisor-apps-card-content.ts

@@ -1,5 +1,5 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
-import { mdiHelpCircleOutline } from "@mdi/js";
+import { mdiCheckCircle, mdiHelpCircleOutline } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -25,7 +25,9 @@ class SupervisorAppsCardContent extends LitElement {
 
   @property() public stage: AddonStage = "stable";
 
-  @property() public state: AddonState = null;
+  @property() public state?: AddonState;
+
+  @property({ type: Boolean }) public installed = false;
 
   @property() public description?: string;
 
@@ -77,13 +79,23 @@ class SupervisorAppsCardContent extends LitElement {
           </div>
         </div>
       </div>
-      ${this.tags?.length || this.state
+      ${this.tags?.length || this.state !== undefined || this.installed
         ? html`
             <div class="footer">
-              <supervisor-apps-state
-                .state=${this.state || "unknown"}
-              ></supervisor-apps-state>
-
+              ${this.state !== undefined
+                ? html`<supervisor-apps-state
+                    .state=${this.state || "unknown"}
+                  ></supervisor-apps-state>`
+                : this.installed
+                  ? html`<div class="installed">
+                      <ha-svg-icon .path=${mdiCheckCircle}></ha-svg-icon>
+                      <span
+                        >${this.hass.localize(
+                          "ui.panel.config.apps.state.installed"
+                        )}</span
+                      >
+                    </div>`
+                  : html`<span></span>`}
               ${this.tags?.length
                 ? html`<div class="tags">
                     ${this.tags.map(
@@ -159,6 +171,17 @@ class SupervisorAppsCardContent extends LitElement {
       display: flex;
       gap: var(--ha-space-2);
     }
+    .installed {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ha-space-2);
+      color: var(--ha-color-text-secondary);
+      font-size: var(--ha-font-size-m);
+    }
+    .installed ha-svg-icon {
+      --mdc-icon-size: 16px;
+      color: var(--ha-color-on-success-normal);
+    }
   `;
 }
 

src/panels/config/apps/supervisor-apps-repository.ts

@@ -1,7 +1,14 @@
-import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
+import {
+  mdiAlertDecagramOutline,
+  mdiArrowUpBoldCircle,
+  mdiArrowUpBoldCircleOutline,
+  mdiFlask,
+  mdiPuzzle,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -10,6 +17,7 @@ import type { HassioAddonRepository } from "../../../data/hassio/addon";
 import type { StoreAddon } from "../../../data/supervisor/store";
 import type { HomeAssistant } from "../../../types";
 import "./components/supervisor-apps-card-content";
+import type { AppTag } from "./components/supervisor-apps-card-content";
 import { filterAndSort } from "./components/supervisor-apps-filter";
 import { supervisorAppsStyle } from "./resources/supervisor-apps-style";
 
@@ -54,21 +62,29 @@ export class SupervisorAppsRepositoryEl extends LitElement {
       <div class="content">
         <h1>${repo.name}</h1>
         <div class="card-group">
-          ${addons.map(
-            (addon) => html`
+          ${addons.map((addon) => {
+            const tags = this._getAppTags(addon);
+            return html`
               <ha-card
                 outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}
               >
-                <div class="card-content">
+                <div
+                  class=${classMap({
+                    "card-content": true,
+                    "has-footer": tags.length > 0 || addon.installed,
+                  })}
+                >
                   <supervisor-apps-card-content
                     .hass=${this.hass}
                     .title=${addon.name}
                     .stage=${addon.stage}
                     .description=${addon.description}
                     .available=${addon.available}
+                    .installed=${addon.installed}
+                    .tags=${tags}
                     .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
@@ -108,8 +124,8 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                   ></supervisor-apps-card-content>
                 </div>
               </ha-card>
-            `
-          )}
+            `;
+          })}
         </div>
       </div>
     `;
@@ -119,6 +135,32 @@ export class SupervisorAppsRepositoryEl extends LitElement {
     navigate(`/config/app/${ev.currentTarget.addon.slug}/info?store=true`);
   }
 
+  private _getAppTags(addon: StoreAddon): AppTag[] {
+    const labels: AppTag[] = [];
+
+    if (addon.installed && addon.update_available) {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.state.update_available`
+        ),
+        variant: "brand",
+        iconPath: mdiArrowUpBoldCircleOutline,
+      });
+    }
+    if (addon.stage !== "stable") {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.dashboard.capability.stages.${addon.stage}`
+        ),
+        variant: addon.stage === "experimental" ? "warning" : "danger",
+        iconPath:
+          addon.stage === "experimental" ? mdiFlask : mdiAlertDecagramOutline,
+      });
+    }
+
+    return labels;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       supervisorAppsStyle,
@@ -127,6 +169,9 @@ export class SupervisorAppsRepositoryEl extends LitElement {
           cursor: pointer;
           overflow: hidden;
         }
+        .card-content.has-footer {
+          padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-2);
+        }
         .not_available {
           opacity: 0.6;
         }

src/panels/config/areas/dialog-area-add-to.ts

@@ -12,22 +12,32 @@ import {
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-adaptive-dialog";
-import "../../../components/ha-list";
-import "../../../components/ha-list-item";
-import "../../../components/ha-svg-icon";
 import {
   areasContext,
   internationalizationContext,
 } from "../../../data/context";
-import type { SceneEntities } from "../../../data/scene";
 import { showSceneEditor } from "../../../data/scene";
+import "../../../dialogs/add-to/ha-add-to-action-list";
+import type {
+  AddToActionListActionSelectedEvent,
+  AddToActionListItem,
+  AddToActionListSection,
+} from "../../../dialogs/add-to/ha-add-to-action-list";
 import {
   addToActionHandler,
-  type AddToActionKey,
-} from "../../../dialogs/more-info/add-to";
+  createAddToSceneEntities,
+  type AddToAutomationScriptActionKey,
+} from "../../../dialogs/add-to/add-to";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { AreaAddToDialogParams } from "./show-dialog-area-add-to";
 
+type AreaAddToAction =
+  | (AddToActionListItem & {
+      type: "automation";
+      key: AddToAutomationScriptActionKey;
+    })
+  | (AddToActionListItem & { type: "scene" });
+
 @customElement("dialog-area-add-to")
 class DialogAreaAddTo extends LitElement {
   @state()
@@ -65,7 +75,12 @@ class DialogAreaAddTo extends LitElement {
       <ha-adaptive-dialog
         .open=${this._open}
         header-title=${this._i18n.localize(
-          "ui.dialogs.more_info_control.add_to.title"
+          "ui.dialogs.more_info_control.add_to.title",
+          {
+            target:
+              computeAreaName(this._areas[this._params.areaId]) ||
+              this._params.areaId,
+          }
         )}
         @closed=${this._dialogClosed}
       >
@@ -79,108 +94,96 @@ class DialogAreaAddTo extends LitElement {
       return nothing;
     }
 
-    const area = this._areas[this._params.areaId];
-    const areaName = computeAreaName(area) || this._params.areaId;
-
-    return html`
-      <h3 class="section-header">
-        ${this._i18n.localize(
+    const sections: AddToActionListSection<AreaAddToAction>[] = [
+      {
+        title: this._i18n.localize(
           "ui.panel.config.devices.automation.automations_heading"
-        )}
-      </h3>
-      <ha-list>
-        ${this._renderActionItem(
-          "automation_trigger",
-          mdiRobotOutline,
-          "ui.dialogs.more_info_control.add_to.actions.automation_trigger",
-          areaName
-        )}
-        ${this._renderActionItem(
-          "automation_condition",
-          mdiPlaylistCheck,
-          "ui.dialogs.more_info_control.add_to.actions.automation_condition",
-          areaName
-        )}
-        ${this._renderActionItem(
-          "automation_action",
-          mdiPlayCircleOutline,
-          "ui.dialogs.more_info_control.add_to.actions.automation_action",
-          areaName
-        )}
-      </ha-list>
-      <h3 class="section-header">
-        ${this._i18n.localize("ui.panel.config.devices.script.scripts_heading")}
-      </h3>
-      <ha-list>
-        ${this._renderActionItem(
-          "script_action",
-          mdiScriptTextOutline,
-          "ui.dialogs.more_info_control.add_to.actions.script_action",
-          areaName
-        )}
-      </ha-list>
-      ${this._renderSceneSection(areaName)}
-    `;
-  }
+        ),
+        actions: [
+          {
+            type: "automation",
+            key: "automation_trigger",
+            iconPath: mdiRobotOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_trigger"
+            ),
+          },
+          {
+            type: "automation",
+            key: "automation_condition",
+            iconPath: mdiPlaylistCheck,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_condition"
+            ),
+          },
+          {
+            type: "automation",
+            key: "automation_action",
+            iconPath: mdiPlayCircleOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_action"
+            ),
+          },
+        ],
+      },
+      {
+        title: this._i18n.localize(
+          "ui.panel.config.devices.script.scripts_heading"
+        ),
+        actions: [
+          {
+            type: "automation",
+            key: "script_action",
+            iconPath: mdiScriptTextOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.script_action"
+            ),
+          },
+        ],
+      },
+    ];
 
-  private _renderSceneSection(areaName: string) {
-    if (!this._params?.entityIds.length) {
-      return nothing;
+    if (this._params.canCreateScene && this._params.entityIds.length) {
+      sections.push({
+        title: this._i18n.localize(
+          "ui.panel.config.devices.scene.scenes_heading"
+        ),
+        actions: [
+          {
+            type: "scene",
+            iconPath: mdiPalette,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.scene"
+            ),
+          },
+        ],
+      });
     }
 
     return html`
-      <h3 class="section-header">
-        ${this._i18n.localize("ui.panel.config.devices.scene.scenes_heading")}
-      </h3>
-      <ha-list>
-        <ha-list-item
-          graphic="icon"
-          @click=${this._handleCreateScene}
-          data-dialog="close"
-        >
-          <ha-svg-icon slot="graphic" .path=${mdiPalette}></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.scene",
-            { target: areaName }
-          )}
-        </ha-list-item>
-      </ha-list>
+      <ha-add-to-action-list
+        .sections=${sections}
+        @add-to-list-action-selected=${this._handleActionSelected}
+      ></ha-add-to-action-list>
     `;
   }
 
-  private _renderActionItem(
-    key: AddToActionKey,
-    path: string,
-    translationKey:
-      | "ui.dialogs.more_info_control.add_to.actions.automation_trigger"
-      | "ui.dialogs.more_info_control.add_to.actions.automation_condition"
-      | "ui.dialogs.more_info_control.add_to.actions.automation_action"
-      | "ui.dialogs.more_info_control.add_to.actions.script_action",
-    areaName: string
+  private _handleActionSelected(
+    ev: AddToActionListActionSelectedEvent<AreaAddToAction>
   ) {
-    return html`
-      <ha-list-item
-        graphic="icon"
-        data-type=${key}
-        @click=${this._handleAction}
-        data-dialog="close"
-      >
-        <ha-svg-icon slot="graphic" .path=${path}></ha-svg-icon>
-        ${this._i18n.localize(translationKey, { target: areaName })}
-      </ha-list-item>
-    `;
-  }
-
-  private _handleAction(ev: Event) {
     if (!this._params) {
       return;
     }
 
-    const key = (ev.currentTarget as HTMLElement).dataset
-      .type as AddToActionKey;
+    const { action } = ev.detail;
+
+    if (action.type === "scene") {
+      this._handleCreateScene();
+      return;
+    }
 
     this.closeDialog();
-    addToActionHandler(key, { area_id: this._params.areaId });
+    addToActionHandler(action.key, { area_id: this._params.areaId });
   }
 
   private _handleCreateScene() {
@@ -188,13 +191,11 @@ class DialogAreaAddTo extends LitElement {
       return;
     }
 
-    const entities: SceneEntities = {};
-    for (const entityId of this._params.entityIds) {
-      entities[entityId] = "";
-    }
-
     this.closeDialog();
-    showSceneEditor({ entities }, this._params.areaId);
+    showSceneEditor(
+      { entities: createAddToSceneEntities(this._params.entityIds) },
+      this._params.areaId
+    );
   }
 
   static get styles(): CSSResultGroup {
@@ -205,14 +206,6 @@ class DialogAreaAddTo extends LitElement {
         ha-adaptive-dialog {
           --dialog-content-padding: 0;
         }
-
-        .section-header {
-          padding: var(--ha-space-2) var(--ha-space-4) 0;
-          margin: 0;
-          font-size: var(--ha-font-size-m);
-          font-weight: var(--ha-font-weight-medium);
-          color: var(--secondary-text-color);
-        }
       `,
     ];
   }

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

@@ -48,8 +48,6 @@ import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry
 
 const cropOptions: CropOptions = {
   round: false,
-  type: "image/jpeg",
-  quality: 0.75,
 };
 
 const SENSOR_DOMAINS = ["sensor"];

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

@@ -60,6 +60,7 @@ import type { SceneEntity } from "../../../data/scene";
 import type { ScriptEntity } from "../../../data/script";
 import type { RelatedResult } from "../../../data/search";
 import { findRelated } from "../../../data/search";
+import { filterAddToSceneEntityIds } from "../../../dialogs/add-to/add-to";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-error-screen";
@@ -439,7 +440,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
                           .path=${mdiPlus}
                         ></ha-svg-icon>
                         ${this.hass.localize(
-                          "ui.dialogs.more_info_control.add_to.title"
+                          "ui.dialogs.more_info_control.add_to.item"
                         )}
                       </ha-button>`
                     : nothing}
@@ -781,9 +782,17 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     if (!area) {
       return;
     }
+    const sceneEntityIds = filterAddToSceneEntityIds(
+      this._areaEntityIds,
+      this._entityReg,
+      this.hass.states
+    );
     showAreaAddToDialog(this, {
       areaId: area.area_id,
-      entityIds: this._areaEntityIds,
+      entityIds: sceneEntityIds,
+      canCreateScene:
+        isComponentLoaded(this.hass.config, "scene") &&
+        sceneEntityIds.length > 0,
     });
   }
 

src/panels/config/areas/show-dialog-area-add-to.ts

@@ -3,6 +3,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 export interface AreaAddToDialogParams {
   areaId: string;
   entityIds: string[];
+  canCreateScene: boolean;
 }
 
 export const loadAreaAddToDialog = () => import("./dialog-area-add-to");

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

@@ -334,13 +334,15 @@ export default class HaAutomationActionRow extends LitElement {
           ? this._renderTargets(
               target,
               actionHasTarget && !this._isNew,
-              serviceTargetSpec
+              serviceTargetSpec,
+              type !== "device_id"
             )
           : nothing}
         ${noteTooltipText
           ? html`
               <ha-svg-icon
                 id="note-icon"
+                tabindex="0"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
                   "ui.panel.config.automation.editor.note.label"
@@ -721,13 +723,14 @@ export default class HaAutomationActionRow extends LitElement {
     (
       target?: HassServiceTarget,
       targetRequired = false,
-      targetSpec?: TargetSelector["target"]
+      targetSpec?: TargetSelector["target"],
+      interactive = false
     ) =>
       html`<ha-automation-row-targets
-        .hass=${this.hass}
         .target=${target}
         .targetRequired=${targetRequired}
         .selector=${targetSpec ? { target: targetSpec } : undefined}
+        .interactive=${interactive}
       ></ha-automation-row-targets>`
   );
 

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

@@ -30,10 +30,10 @@ import type {
   LocalizeFunc,
   LocalizeKeys,
 } from "../../../common/translations/localize";
+import { constructUrlCurrentPath } from "../../../common/url/construct-url";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { debounce } from "../../../common/util/debounce";
 import { deepEqual } from "../../../common/util/deep-equal";
-import { constructUrlCurrentPath } from "../../../common/url/construct-url";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-bottom-sheet";
 import "../../../components/ha-button";
@@ -134,8 +134,8 @@ import {
   ADD_AUTOMATION_ELEMENT_DEVICE_TARGET_PARAM,
   ADD_AUTOMATION_ELEMENT_ENTITY_TARGET_PARAM,
   ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
-  getAddAutomationElementTargetFromQuery,
   PASTE_VALUE,
+  getAddAutomationElementTargetFromQuery,
 } from "./show-add-automation-element-dialog";
 import { getTargetText } from "./target/get_target_text";
 
@@ -795,37 +795,33 @@ class DialogAddAutomationElement
                           class="paste"
                           @click=${this._paste}
                         >
-                          <div class="shortcut-label">
-                            <div class="label">
-                              <div>
-                                ${this.hass.localize(
-                                  `ui.panel.config.automation.editor.${automationElementType}s.paste`
-                                )}
-                              </div>
-                              <div class="supporting-text">
-                                ${this.hass.localize(
-                                  // @ts-ignore
-                                  `ui.panel.config.automation.editor.${automationElementType}s.type.${this._params.clipboardItem}.label`
-                                )}
-                              </div>
-                            </div>
-                            ${!this._narrow
-                              ? html`<span class="shortcut">
-                                  <span
-                                    >${isMac
-                                      ? html`<ha-svg-icon
-                                          slot="start"
-                                          .path=${mdiAppleKeyboardCommand}
-                                        ></ha-svg-icon>`
-                                      : this.hass.localize(
-                                          "ui.panel.config.automation.editor.ctrl"
-                                        )}</span
-                                  >
-                                  <span>+</span>
-                                  <span>V</span>
-                                </span>`
-                              : nothing}
+                          <div slot="headline" class="label">
+                            ${this.hass.localize(
+                              `ui.panel.config.automation.editor.${automationElementType}s.paste`
+                            )}
                           </div>
+                          <div slot="supporting-text">
+                            ${this.hass.localize(
+                              // @ts-ignore
+                              `ui.panel.config.automation.editor.${automationElementType}s.type.${this._params.clipboardItem}.label`
+                            )}
+                          </div>
+                          ${!this._narrow
+                            ? html`<span slot="end" class="shortcut">
+                                <span
+                                  >${isMac
+                                    ? html`<ha-svg-icon
+                                        slot="start"
+                                        .path=${mdiAppleKeyboardCommand}
+                                      ></ha-svg-icon>`
+                                    : this.hass.localize(
+                                        "ui.panel.config.automation.editor.ctrl"
+                                      )}</span
+                                >
+                                <span>+</span>
+                                <span>V</span>
+                              </span>`
+                            : nothing}
                           <ha-svg-icon
                             slot="start"
                             .path=${mdiContentPaste}
@@ -2546,23 +2542,16 @@ class DialogAddAutomationElement
         ha-svg-icon.plus {
           color: var(--primary-color);
         }
-        .shortcut-label {
-          display: flex;
-          gap: var(--ha-space-3);
-          justify-content: space-between;
-        }
-        .shortcut-label .supporting-text {
-          color: var(--secondary-text-color);
-          font-size: var(--ha-font-size-s);
-        }
-        .shortcut-label .shortcut {
+
+        .shortcut {
           --mdc-icon-size: var(--ha-space-3);
           display: inline-flex;
           flex-direction: row;
           align-items: center;
           gap: 2px;
+          margin-right: var(--ha-space-4);
         }
-        .shortcut-label .shortcut span {
+        .shortcut span {
           font-size: var(--ha-font-size-s);
           font-family: var(--ha-font-family-code);
           color: var(--ha-color-text-secondary);

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

@@ -52,6 +52,7 @@ import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-tooltip";
 import type {
   AutomationClipboard,
   Condition,
@@ -211,11 +212,27 @@ export default class HaAutomationConditionRow extends LitElement {
     );
 
     return html`
-      <ha-condition-icon
-        slot="leading-icon"
-        .hass=${this.hass}
-        .condition=${this.condition.condition}
-      ></ha-condition-icon>
+      <div id="condition-icon" class="icon-badge-wrapper" slot="leading-icon">
+        <ha-condition-icon
+          .hass=${this.hass}
+          .condition=${this.condition.condition}
+        ></ha-condition-icon>
+        ${this.optionsInSidebar && this.condition.condition !== "trigger"
+          ? html`<ha-automation-row-live-test
+              .state=${this._liveTestResult.state}
+              .label=${this.hass.localize(
+                `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
+              )}
+            ></ha-automation-row-live-test>`
+          : nothing}
+      </div>
+      ${this.optionsInSidebar &&
+      this.condition.condition !== "trigger" &&
+      this._liveTestResult.message
+        ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+            >${this._liveTestResult.message}</ha-tooltip
+          >`
+        : nothing}
       <h3 slot="header">
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
@@ -224,13 +241,15 @@ export default class HaAutomationConditionRow extends LitElement {
           ? this._renderTargets(
               target,
               descriptionHasTarget && !this._isNew,
-              conditionTargetSpec
+              conditionTargetSpec,
+              this.condition.condition !== "device"
             )
           : nothing}
         ${this.condition.note?.trim()
           ? html`
               <ha-svg-icon
                 id="note-icon"
+                tabindex="0"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
                   "ui.panel.config.automation.editor.note.label"
@@ -529,17 +548,7 @@ export default class HaAutomationConditionRow extends LitElement {
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               >${this._renderRow()}
-              <ha-automation-row-live-test
-                slot="icons"
-                .state=${this.condition.condition !== "trigger"
-                  ? this._liveTestResult.state
-                  : "unknown"}
-                .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult.state : "unknown"}`
-                )}
-                .message=${this._liveTestResult.message}
-              ></ha-automation-row-live-test
-            ></ha-automation-row>`
+            </ha-automation-row>`
           : html`
               <ha-expansion-panel
                 left-chevron
@@ -573,13 +582,14 @@ export default class HaAutomationConditionRow extends LitElement {
     (
       target?: HassServiceTarget,
       targetRequired = false,
-      targetSpec?: TargetSelector["target"]
+      targetSpec?: TargetSelector["target"],
+      interactive = false
     ) =>
       html`<ha-automation-row-targets
-        .hass=${this.hass}
         .target=${target}
         .targetRequired=${targetRequired}
         .selector=${targetSpec ? { target: targetSpec } : undefined}
+        .interactive=${interactive}
       ></ha-automation-row-targets>`
   );
 

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

@@ -40,37 +40,6 @@ export class HaSunCondition extends LitElement implements ConditionElement {
   private _schema = memoizeOne(
     (localize: LocalizeFunc, formType: FormType) =>
       [
-        ...(["between", "before"].includes(formType)
-          ? [
-              {
-                name: "before",
-                type: "select",
-                default: BEFORE_DEFAULT,
-                options: [
-                  [
-                    "sunrise",
-                    localize(
-                      "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
-                    ),
-                  ],
-                  [
-                    "sunset",
-                    localize(
-                      "ui.panel.config.automation.editor.conditions.type.sun.sunset"
-                    ),
-                  ],
-                ],
-              },
-              {
-                name: "before_offset",
-                selector: {
-                  duration: {
-                    allow_negative: true,
-                  },
-                },
-              },
-            ]
-          : []),
         ...(["between", "after"].includes(formType)
           ? [
               {
@@ -102,6 +71,37 @@ export class HaSunCondition extends LitElement implements ConditionElement {
               },
             ]
           : []),
+        ...(["between", "before"].includes(formType)
+          ? [
+              {
+                name: "before",
+                type: "select",
+                default: BEFORE_DEFAULT,
+                options: [
+                  [
+                    "sunrise",
+                    localize(
+                      "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
+                    ),
+                  ],
+                  [
+                    "sunset",
+                    localize(
+                      "ui.panel.config.automation.editor.conditions.type.sun.sunset"
+                    ),
+                  ],
+                ],
+              },
+              {
+                name: "before_offset",
+                selector: {
+                  duration: {
+                    allow_negative: true,
+                  },
+                },
+              },
+            ]
+          : []),
       ] as const
   );
 

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

@@ -116,10 +116,8 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
 import {
   getAreaTableColumn,
   getCategoryTableColumn,
-  getCreatedAtTableColumn,
   getEntityIdHiddenTableColumn,
   getLabelsTableColumn,
-  getModifiedAtTableColumn,
   getTriggeredAtTableColumn,
 } from "../common/data-table-columns";
 import { configSections } from "../ha-panel-config";
@@ -141,8 +139,6 @@ type AutomationItem = AutomationEntity & {
   labels: string[]; // search only
   assistants: string[];
   assistants_sortable_key: string | undefined;
-  created_at: number | undefined;
-  modified_at: number | undefined;
 };
 
 @customElement("ha-automation-picker")
@@ -289,8 +285,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           labels: label_entries.map((lbl) => lbl.name),
           assistants,
           assistants_sortable_key: getAssistantsSortableKey(assistants),
-          created_at: entityRegEntry?.created_at,
-          modified_at: entityRegEntry?.modified_at,
           selectable: entityRegEntry !== undefined,
         };
       });
@@ -341,8 +335,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         category: getCategoryTableColumn(localize),
         labels: getLabelsTableColumn(),
         last_triggered: getTriggeredAtTableColumn(localize, this.hass),
-        created_at: getCreatedAtTableColumn(localize, this.hass),
-        modified_at: getModifiedAtTableColumn(localize, this.hass),
         formatted_state: {
           minWidth: "82px",
           maxWidth: "82px",

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

@@ -161,6 +161,7 @@ export default class HaAutomationOptionRow extends LitElement {
           ? html`
               <ha-svg-icon
                 id="note-icon"
+                tabindex="0"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
                   "ui.panel.config.automation.editor.note.label"

src/panels/config/automation/styles.ts

@@ -53,6 +53,11 @@ export const rowStyles = css`
     position: absolute;
   }
 
+  .icon-badge-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
   .note-indicator {
     color: var(--ha-color-on-neutral-normal);
   }

src/panels/config/automation/target/ha-automation-row-targets.ts

@@ -60,6 +60,9 @@ export class HaAutomationRowTargets extends LitElement {
   @property({ attribute: false })
   public selector?: TargetSelector;
 
+  @property({ type: Boolean })
+  public interactive = false;
+
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n!: ContextType<typeof internationalizationContext>;
@@ -89,7 +92,12 @@ export class HaAutomationRowTargets extends LitElement {
   @consume({ context: statesContext, subscribe: true })
   private _states!: ContextType<typeof statesContext>;
 
-  private _countCache = new Map<string, Promise<number | undefined>>();
+  private _countCache = new Map<
+    string,
+    Promise<number | undefined> | number | undefined
+  >();
+
+  private _rerenderCount = true;
 
   protected willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
@@ -98,10 +106,15 @@ export class HaAutomationRowTargets extends LitElement {
       changedProps.has("selector") ||
       changedProps.has("_registries")
     ) {
-      this._countCache.clear();
+      this._rerenderCount = true;
     }
   }
 
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    this._rerenderCount = false;
+  }
+
   private _countMatchingEntities(referencedEntities: string[]): number {
     const targetSelector = this.selector;
     const hasEntityFilter = !!targetSelector?.target?.entity;
@@ -148,7 +161,11 @@ export class HaAutomationRowTargets extends LitElement {
     targetId: string
   ) {
     const key = `${targetType}:${targetId}`;
-    if (!this._countCache.has(key)) {
+    let fallback = " (-)";
+    if (!this._countCache.has(key) || this._rerenderCount) {
+      if (typeof this._countCache.get(key) === "number") {
+        fallback = ` (${this._countCache.get(key)})`;
+      }
       this._countCache.set(
         key,
         extractFromTarget(
@@ -162,15 +179,30 @@ export class HaAutomationRowTargets extends LitElement {
           .then((result) =>
             this._countMatchingEntities(result.referenced_entities)
           )
-          .catch(() => undefined)
+          .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error("Error counting target entities", err);
+            return undefined;
+          })
       );
     }
-    return until(
-      this._countCache
-        .get(key)!
-        .then((count) => (count === undefined ? nothing : html` (${count})`)),
-      "(-)"
-    );
+
+    if (this._countCache.get(key) instanceof Promise) {
+      return until(
+        (this._countCache.get(key) as Promise<number | undefined>)!.then(
+          (count) => {
+            this._countCache.set(key, count);
+            return count === undefined ? nothing : html` (${count})`;
+          }
+        ),
+        fallback
+      );
+    }
+
+    if (typeof this._countCache.get(key) === "number") {
+      return ` (${this._countCache.get(key)})`;
+    }
+    return nothing;
   }
 
   protected render() {
@@ -249,8 +281,9 @@ export class HaAutomationRowTargets extends LitElement {
       <ha-dropdown
         @wa-select=${this._handleTargetSelect}
         @click=${stopPropagation}
+        @keydown=${stopPropagation}
       >
-        <span slot="trigger" class="target interactive">
+        <button slot="trigger" class="target">
           <ha-svg-icon .path=${mdiFormatListBulleted}></ha-svg-icon>
           <div class="label">
             ${this._i18n.localize(
@@ -261,7 +294,7 @@ export class HaAutomationRowTargets extends LitElement {
             )}
           </div>
           <ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
-        </span>
+        </button>
         ${rows.map(([targetType, targetId]) => {
           const content = html`${lastTargetType !== null &&
           lastTargetType !== targetType
@@ -316,21 +349,37 @@ export class HaAutomationRowTargets extends LitElement {
     targetType?: string,
     countTemplate: unknown = nothing
   ) {
-    return html`<div
+    if (!this.interactive || !targetId || !targetType) {
+      return html`<div
+        class=${classMap({
+          target: true,
+          warning,
+          error,
+        })}
+        .targetId=${targetId}
+        .targetType=${targetType}
+        .label=${label}
+      >
+        ${icon}
+        <div class="label">${label}${countTemplate}</div>
+      </div>`;
+    }
+
+    return html`<button
       class=${classMap({
         target: true,
         warning,
         error,
-        interactive: targetId && targetType,
       })}
       .targetId=${targetId}
       .targetType=${targetType}
       .label=${label}
       @click=${this._handleTargetClick}
+      @keydown=${this._handleTargetKeydown}
     >
       ${icon}
       <div class="label">${label}${countTemplate}</div>
-    </div>`;
+    </button>`;
   }
 
   private _renderTarget(
@@ -384,7 +433,7 @@ export class HaAutomationRowTargets extends LitElement {
           targetId,
           this._getLabel
         );
-        if (targetType !== "entity") {
+        if (targetType !== "entity" && this.interactive) {
           countTemplate = this._renderCount(targetType, targetId);
         }
       }
@@ -444,6 +493,13 @@ export class HaAutomationRowTargets extends LitElement {
     this._showTargetInfo(target.targetId, target.targetType, target.label, ev);
   }
 
+  private _handleTargetKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._handleTargetClick(ev);
+    }
+  }
+
   private _handleTargetSelect(
     ev: HaDropdownSelectEvent<{
       targetId?: string;
@@ -533,10 +589,10 @@ export class HaAutomationRowTargets extends LitElement {
       align-items: center;
     }
 
-    .target.interactive {
+    button.target {
       cursor: pointer;
     }
-    .target.interactive:hover {
+    button.target:hover {
       background: var(--ha-color-fill-neutral-normal-hover);
     }
 

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

@@ -249,13 +249,15 @@ export default class HaAutomationTriggerRow extends LitElement {
           ? this._renderTargets(
               target,
               descriptionHasTarget && !this._isNew,
-              triggerTargetSpec
+              triggerTargetSpec,
+              type !== "device"
             )
           : nothing}
         ${type !== "list" &&
         (this.trigger as Exclude<Trigger, TriggerList>).note?.trim()
           ? html`
               <ha-svg-icon
+                tabindex="0"
                 id="note-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
@@ -557,13 +559,14 @@ export default class HaAutomationTriggerRow extends LitElement {
     (
       target?: HassServiceTarget,
       targetRequired = false,
-      targetSpec?: TargetSelector["target"]
+      targetSpec?: TargetSelector["target"],
+      interactive = false
     ) =>
       html`<ha-automation-row-targets
-        .hass=${this.hass}
         .target=${target}
         .targetRequired=${targetRequired}
         .selector=${targetSpec ? { target: targetSpec } : undefined}
+        .interactive=${interactive}
       ></ha-automation-row-targets>`
   );
 

src/panels/config/dashboard/dialog-new-dashboard.ts

@@ -299,9 +299,10 @@ class DialogNewDashboard extends LitElement implements HassDialog {
       const options: IFuseOptions<CustomStrategyEntry> = {
         keys: ["type", "name", "description"],
         isCaseSensitive: false,
-        threshold: 0.3,
-        ignoreLocation: true,
         minMatchCharLength: Math.min(filter.length, 2),
+        threshold: 0.3,
+        ignoreDiacritics: true,
+        ignoreLocation: true,
       };
       const fuse = new Fuse(strategies, options);
       return fuse.search(filter).map((result) => result.item);

src/panels/config/devices/device-detail/ha-device-add-to-dialog.ts

@@ -12,8 +12,6 @@ import {
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-adaptive-dialog";
-import "../../../../components/ha-list";
-import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
 import type { AutomationConfig } from "../../../../data/automation";
 import { showAutomationEditor } from "../../../../data/automation";
@@ -35,15 +33,38 @@ import {
 } from "../../../../data/device/device_automation";
 import type { ScriptConfig } from "../../../../data/script";
 import { showScriptEditor } from "../../../../data/script";
-import type { SceneEntities } from "../../../../data/scene";
 import { showSceneEditor } from "../../../../data/scene";
+import "../../../../dialogs/add-to/ha-add-to-action-list";
+import type {
+  AddToActionListActionSelectedEvent,
+  AddToActionListItem,
+  AddToActionListSection,
+} from "../../../../dialogs/add-to/ha-add-to-action-list";
 import {
   addToActionHandler,
-  type AddToActionKey,
-} from "../../../../dialogs/more-info/add-to";
+  createAddToSceneEntities,
+  type AddToAutomationScriptActionKey,
+} from "../../../../dialogs/add-to/add-to";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { DeviceAddToDialogParams } from "./show-dialog-device-add-to";
 
+type DeviceLegacyAddToActionType =
+  | "trigger"
+  | "condition"
+  | "automation_action"
+  | "script_action";
+
+type DeviceAddToAction =
+  | (AddToActionListItem & {
+      kind: "add-to";
+      key: AddToAutomationScriptActionKey;
+    })
+  | (AddToActionListItem & {
+      kind: "legacy";
+      legacyType: DeviceLegacyAddToActionType;
+    })
+  | (AddToActionListItem & { kind: "scene" });
+
 @customElement("dialog-device-add-to")
 export class DialogDeviceAddTo extends LitElement {
   @state()
@@ -132,11 +153,18 @@ export class DialogDeviceAddTo extends LitElement {
       return nothing;
     }
 
+    const deviceName = computeDeviceNameDisplay(
+      this._params.device,
+      this._i18n.localize,
+      this._states
+    );
+
     return html`
       <ha-adaptive-dialog
         .open=${this._open}
         header-title=${this._i18n.localize(
-          "ui.dialogs.more_info_control.add_to.title"
+          "ui.dialogs.more_info_control.add_to.title",
+          { target: deviceName }
         )}
         @closed=${this._dialogClosed}
       >
@@ -151,80 +179,62 @@ export class DialogDeviceAddTo extends LitElement {
     if (!this._params) {
       return nothing;
     }
-    const deviceName = computeDeviceNameDisplay(
-      this._params.device,
-      this._i18n.localize,
-      this._states
-    );
+
+    const sections: AddToActionListSection<DeviceAddToAction>[] = [
+      {
+        title: this._i18n.localize(
+          "ui.panel.config.devices.automation.automations_heading"
+        ),
+        actions: [
+          {
+            kind: "add-to",
+            key: "automation_trigger",
+            iconPath: mdiRobotOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_trigger"
+            ),
+          },
+          {
+            kind: "add-to",
+            key: "automation_condition",
+            iconPath: mdiPlaylistCheck,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_condition"
+            ),
+          },
+          {
+            kind: "add-to",
+            key: "automation_action",
+            iconPath: mdiPlayCircleOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.automation_action"
+            ),
+          },
+        ],
+      },
+      {
+        title: this._i18n.localize(
+          "ui.panel.config.devices.script.scripts_heading"
+        ),
+        actions: [
+          {
+            kind: "add-to",
+            key: "script_action",
+            iconPath: mdiScriptTextOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.script_action"
+            ),
+          },
+        ],
+      },
+    ];
+    this._addSceneSection(sections);
 
     return html`
-      <h3 class="section-header">
-        ${this._i18n.localize(
-          "ui.panel.config.devices.automation.automations_heading"
-        )}
-      </h3>
-      <ha-list>
-        <ha-list-item
-          graphic="icon"
-          data-type="automation_trigger"
-          @click=${this._handleNewAction}
-          data-dialog="close"
-        >
-          <ha-svg-icon slot="graphic" .path=${mdiRobotOutline}></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.automation_trigger",
-            { target: deviceName }
-          )}
-        </ha-list-item>
-        <ha-list-item
-          graphic="icon"
-          data-type="automation_condition"
-          @click=${this._handleNewAction}
-          data-dialog="close"
-        >
-          <ha-svg-icon slot="graphic" .path=${mdiPlaylistCheck}></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.automation_condition",
-            { target: deviceName }
-          )}
-        </ha-list-item>
-        <ha-list-item
-          graphic="icon"
-          data-type="automation_action"
-          @click=${this._handleNewAction}
-          data-dialog="close"
-        >
-          <ha-svg-icon
-            slot="graphic"
-            .path=${mdiPlayCircleOutline}
-          ></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.automation_action",
-            { target: deviceName }
-          )}
-        </ha-list-item>
-      </ha-list>
-      <h3 class="section-header">
-        ${this._i18n.localize("ui.panel.config.devices.script.scripts_heading")}
-      </h3>
-      <ha-list>
-        <ha-list-item
-          graphic="icon"
-          data-type="script_action"
-          @click=${this._handleNewAction}
-          data-dialog="close"
-        >
-          <ha-svg-icon
-            slot="graphic"
-            .path=${mdiScriptTextOutline}
-          ></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.script_action",
-            { target: deviceName }
-          )}
-        </ha-list-item>
-      </ha-list>
-      ${this._renderSceneSection(deviceName)}
+      <ha-add-to-action-list
+        .sections=${sections}
+        @add-to-list-action-selected=${this._handleActionSelected}
+      ></ha-add-to-action-list>
     `;
   }
 
@@ -242,12 +252,6 @@ export class DialogDeviceAddTo extends LitElement {
       return nothing;
     }
 
-    const deviceName = computeDeviceNameDisplay(
-      this._params.device,
-      this._i18n.localize,
-      this._states
-    );
-
     const hasTriggers = Boolean(this._triggers?.length);
     const hasConditions = Boolean(this._conditions?.length);
     const hasActions = Boolean(this._actions?.length);
@@ -263,165 +267,138 @@ export class DialogDeviceAddTo extends LitElement {
       `;
     }
 
-    return html`
-      <h3 class="section-header">
-        ${this._i18n.localize(
-          "ui.panel.config.devices.automation.automations_heading"
-        )}
-      </h3>
-      ${hasTriggers || hasConditions || hasActions
-        ? html`
-            <ha-list>
-              ${hasTriggers
-                ? html`
-                    <ha-list-item
-                      graphic="icon"
-                      data-type="trigger"
-                      @click=${this._handleLegacyAction}
-                      data-dialog="close"
-                    >
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiRobotOutline}
-                      ></ha-svg-icon>
-                      ${this._i18n.localize(
-                        "ui.dialogs.more_info_control.add_to.actions.automation_trigger",
-                        { target: deviceName }
-                      )}
-                    </ha-list-item>
-                  `
-                : nothing}
-              ${hasConditions
-                ? html`
-                    <ha-list-item
-                      graphic="icon"
-                      data-type="condition"
-                      @click=${this._handleLegacyAction}
-                      data-dialog="close"
-                    >
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiPlaylistCheck}
-                      ></ha-svg-icon>
-                      ${this._i18n.localize(
-                        "ui.dialogs.more_info_control.add_to.actions.automation_condition",
-                        { target: deviceName }
-                      )}
-                    </ha-list-item>
-                  `
-                : nothing}
-              ${hasActions
-                ? html`
-                    <ha-list-item
-                      graphic="icon"
-                      data-type="automation_action"
-                      @click=${this._handleLegacyAction}
-                      data-dialog="close"
-                    >
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiPlayCircleOutline}
-                      ></ha-svg-icon>
-                      ${this._i18n.localize(
-                        "ui.dialogs.more_info_control.add_to.actions.automation_action",
-                        { target: deviceName }
-                      )}
-                    </ha-list-item>
-                  `
-                : nothing}
-            </ha-list>
-          `
-        : html`
-            <ha-list>
-              <ha-list-item noninteractive>
-                ${this._i18n.localize(
-                  "ui.panel.config.devices.automation.no_automations"
-                )}
-              </ha-list-item>
-            </ha-list>
-          `}
-      <h3 class="section-header">
-        ${this._i18n.localize("ui.panel.config.devices.script.scripts_heading")}
-      </h3>
-      ${hasActions
-        ? html`
-            <ha-list>
-              <ha-list-item
-                graphic="icon"
-                data-type="script_action"
-                @click=${this._handleLegacyAction}
-                data-dialog="close"
-              >
-                <ha-svg-icon
-                  slot="graphic"
-                  .path=${mdiScriptTextOutline}
-                ></ha-svg-icon>
-                ${this._i18n.localize(
-                  "ui.dialogs.more_info_control.add_to.actions.script_action",
-                  { target: deviceName }
-                )}
-              </ha-list-item>
-            </ha-list>
-          `
-        : html`
-            <ha-list>
-              <ha-list-item noninteractive>
-                ${this._i18n.localize(
-                  "ui.panel.config.devices.script.no_scripts"
-                )}
-              </ha-list-item>
-            </ha-list>
-          `}
-      ${this._renderSceneSection(deviceName)}
-    `;
-  }
-
-  private _renderSceneSection(deviceName: string) {
-    if (!this._params?.entityIds.length) {
-      return nothing;
+    const automationActions: DeviceAddToAction[] = [];
+    if (hasTriggers) {
+      automationActions.push({
+        kind: "legacy",
+        legacyType: "trigger",
+        iconPath: mdiRobotOutline,
+        name: this._i18n.localize(
+          "ui.dialogs.more_info_control.add_to.action_options.automation_trigger"
+        ),
+      });
+    }
+    if (hasConditions) {
+      automationActions.push({
+        kind: "legacy",
+        legacyType: "condition",
+        iconPath: mdiPlaylistCheck,
+        name: this._i18n.localize(
+          "ui.dialogs.more_info_control.add_to.action_options.automation_condition"
+        ),
+      });
+    }
+    if (hasActions) {
+      automationActions.push({
+        kind: "legacy",
+        legacyType: "automation_action",
+        iconPath: mdiPlayCircleOutline,
+        name: this._i18n.localize(
+          "ui.dialogs.more_info_control.add_to.action_options.automation_action"
+        ),
+      });
     }
 
+    const scriptActions: DeviceAddToAction[] = hasActions
+      ? [
+          {
+            kind: "legacy",
+            legacyType: "script_action",
+            iconPath: mdiScriptTextOutline,
+            name: this._i18n.localize(
+              "ui.dialogs.more_info_control.add_to.action_options.script_action"
+            ),
+          },
+        ]
+      : [];
+
+    const sections: AddToActionListSection<DeviceAddToAction>[] = [
+      {
+        title: this._i18n.localize(
+          "ui.panel.config.devices.automation.automations_heading"
+        ),
+        actions: automationActions,
+        empty: automationActions.length
+          ? undefined
+          : this._i18n.localize(
+              "ui.panel.config.devices.automation.no_automations"
+            ),
+      },
+      {
+        title: this._i18n.localize(
+          "ui.panel.config.devices.script.scripts_heading"
+        ),
+        actions: scriptActions,
+        empty: scriptActions.length
+          ? undefined
+          : this._i18n.localize("ui.panel.config.devices.script.no_scripts"),
+      },
+    ];
+    this._addSceneSection(sections);
+
     return html`
-      <h3 class="section-header">
-        ${this._i18n.localize("ui.panel.config.devices.scene.scenes_heading")}
-      </h3>
-      <ha-list>
-        <ha-list-item
-          graphic="icon"
-          @click=${this._handleCreateScene}
-          data-dialog="close"
-        >
-          <ha-svg-icon slot="graphic" .path=${mdiPalette}></ha-svg-icon>
-          ${this._i18n.localize(
-            "ui.dialogs.more_info_control.add_to.actions.scene",
-            { target: deviceName }
-          )}
-        </ha-list-item>
-      </ha-list>
+      <ha-add-to-action-list
+        .sections=${sections}
+        @add-to-list-action-selected=${this._handleActionSelected}
+      ></ha-add-to-action-list>
     `;
   }
 
-  private _handleNewAction(ev: Event) {
+  private _addSceneSection(
+    sections: AddToActionListSection<DeviceAddToAction>[]
+  ): void {
+    if (!this._params?.canCreateScene || !this._params.entityIds.length) {
+      return;
+    }
+
+    sections.push({
+      title: this._i18n.localize(
+        "ui.panel.config.devices.scene.scenes_heading"
+      ),
+      actions: [
+        {
+          kind: "scene",
+          iconPath: mdiPalette,
+          name: this._i18n.localize(
+            "ui.dialogs.more_info_control.add_to.action_options.scene"
+          ),
+        },
+      ],
+    });
+  }
+
+  private _handleActionSelected(
+    ev: AddToActionListActionSelectedEvent<DeviceAddToAction>
+  ) {
     if (!this._params) {
       return;
     }
-    const key = (ev.currentTarget as HTMLElement).dataset
-      .type as AddToActionKey;
+
+    const { action } = ev.detail;
+    if (action.kind === "scene") {
+      this._handleCreateScene();
+      return;
+    }
+
+    if (action.kind === "add-to") {
+      this._handleAddToAction(action.key);
+      return;
+    }
+
+    this._handleLegacyAction(action.legacyType);
+  }
+
+  private _handleAddToAction(key: AddToAutomationScriptActionKey) {
+    if (!this._params) {
+      return;
+    }
+
     this.closeDialog();
     addToActionHandler(key, { device_id: this._params.device.id });
   }
 
   // When new_triggers_conditions labs feature is promoted, this whole method can be removed.
-  private _handleLegacyAction(ev: Event) {
-    if (!this._params) {
-      return;
-    }
-    const type = (ev.currentTarget as HTMLElement).dataset.type as
-      | "trigger"
-      | "condition"
-      | "automation_action"
-      | "script_action";
-
+  private _handleLegacyAction(type: DeviceLegacyAddToActionType) {
     this.closeDialog();
 
     if (type === "script_action") {
@@ -430,29 +407,28 @@ export class DialogDeviceAddTo extends LitElement {
         newScript.sequence = [this._actions[0]];
       }
       showScriptEditor(newScript, true);
-    } else {
-      const newAutomation = {} as AutomationConfig;
-      if (type === "trigger" && this._triggers?.length) {
-        newAutomation.triggers = [this._triggers[0]];
-      } else if (type === "condition" && this._conditions?.length) {
-        newAutomation.conditions = [this._conditions[0]];
-      } else if (type === "automation_action" && this._actions?.length) {
-        newAutomation.actions = [this._actions[0]];
-      }
-      showAutomationEditor(newAutomation, true);
+      return;
     }
+
+    const newAutomation = {} as AutomationConfig;
+    if (type === "trigger" && this._triggers?.length) {
+      newAutomation.triggers = [this._triggers[0]];
+    } else if (type === "condition" && this._conditions?.length) {
+      newAutomation.conditions = [this._conditions[0]];
+    } else if (type === "automation_action" && this._actions?.length) {
+      newAutomation.actions = [this._actions[0]];
+    }
+    showAutomationEditor(newAutomation, true);
   }
 
   private _handleCreateScene() {
     if (!this._params) {
       return;
     }
-    const entities: SceneEntities = {};
-    for (const entityId of this._params.entityIds) {
-      entities[entityId] = "";
-    }
     this.closeDialog();
-    showSceneEditor({ entities });
+    showSceneEditor({
+      entities: createAddToSceneEntities(this._params.entityIds),
+    });
   }
 
   static get styles(): CSSResultGroup {
@@ -469,14 +445,6 @@ export class DialogDeviceAddTo extends LitElement {
           padding: var(--ha-space-4);
           text-align: center;
         }
-
-        .section-header {
-          padding: var(--ha-space-2) var(--ha-space-4) 0;
-          margin: 0;
-          font-size: var(--ha-font-size-m);
-          font-weight: var(--ha-font-weight-medium);
-          color: var(--secondary-text-color);
-        }
       `,
     ];
   }

src/panels/config/devices/device-detail/show-dialog-device-add-to.ts

@@ -5,6 +5,7 @@ export interface DeviceAddToDialogParams {
   device: DeviceRegistryEntry;
   newTriggersConditions: boolean;
   entityIds: string[];
+  canCreateScene: boolean;
 }
 
 export const loadDeviceAddToDialog = () => import("./ha-device-add-to-dialog");

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

@@ -86,6 +86,7 @@ import { domainToName } from "../../../data/integration";
 import { regenerateEntityIds } from "../../../data/regenerate_entity_ids";
 import type { RelatedResult } from "../../../data/search";
 import { findRelated } from "../../../data/search";
+import { filterAddToSceneEntityIds } from "../../../dialogs/add-to/add-to";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -424,6 +425,11 @@ export class HaConfigDevicePage extends LitElement {
       this._entityReg,
       this.hass.devices
     );
+    const sceneEntityIds = filterAddToSceneEntityIds(
+      this._entityIds(entities),
+      this._entityReg,
+      this.hass.states
+    );
     const entitiesByCategory = this._entitiesByCategory(entities);
     const quickLinkCounts = this._getQuickLinkCounts(entities, this._related);
     const batteryEntity = this._batteryEntity(entities);
@@ -531,7 +537,7 @@ export class HaConfigDevicePage extends LitElement {
       : this.hass.localize("ui.panel.config.devices.add_prompt_enabled");
 
     const hasSceneSupport =
-      isComponentLoaded(this.hass.config, "scene") && entities.length;
+      isComponentLoaded(this.hass.config, "scene") && sceneEntityIds.length;
 
     const relatedCard =
       isComponentLoaded(this.hass.config, "automation") ||
@@ -551,7 +557,7 @@ export class HaConfigDevicePage extends LitElement {
                 >
                   <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                   ${this.hass.localize(
-                    "ui.dialogs.more_info_control.add_to.title"
+                    "ui.dialogs.more_info_control.add_to.item"
                   )}
                 </ha-button>
               </h1>
@@ -1366,10 +1372,18 @@ export class HaConfigDevicePage extends LitElement {
       this._entityReg,
       this.hass.devices
     ).map((entity) => entity.entity_id);
+    const sceneEntityIds = filterAddToSceneEntityIds(
+      entityIds,
+      this._entityReg,
+      this.hass.states
+    );
     showDeviceAddToDialog(this, {
       device,
       newTriggersConditions: this._newTriggersConditions,
-      entityIds,
+      entityIds: sceneEntityIds,
+      canCreateScene:
+        isComponentLoaded(this.hass.config, "scene") &&
+        sceneEntityIds.length > 0,
     });
   }
 

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -330,42 +330,48 @@ export class BluetoothNetworkVisualization extends LitElement {
     return rssi > -33 ? 3 : rssi > -66 ? 2 : 1;
   }
 
-  private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
+  private _tooltipFormatter = (params: TopLevelFormatterParams) => {
     const { dataType, data } = params as CallbackDataParams;
-    let tooltipText = "";
     if (dataType === "edge") {
       const { source, target, value } = data as any;
       const sourceName = this._getBluetoothDeviceName(source);
       const targetName = this._getBluetoothDeviceName(target);
-      tooltipText = `${sourceName} → ${targetName}`;
-      if (source !== CORE_SOURCE_ID) {
-        tooltipText += ` <b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b> ${value}`;
-      }
-    } else {
-      const { id: address } = data as any;
-      const name = this._getBluetoothDeviceName(address);
-      const btDevice = this._data.find((d) => d.address === address);
-      if (btDevice) {
-        tooltipText = `<b>${name}</b><br><b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b> ${address}<br><b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b> ${btDevice.rssi}<br><b>${this.hass.localize("ui.panel.config.bluetooth.source")}:</b> ${btDevice.source}<br><b>${this.hass.localize("ui.panel.config.bluetooth.updated")}:</b> ${relativeTime(new Date(btDevice.time * 1000), this.hass.locale)}`;
-        const device = this._sourceDevices[address];
-        if (device) {
-          const area = getDeviceArea(device, this.hass.areas);
-          if (area) {
-            tooltipText += `<br><b>${this.hass.localize("ui.panel.config.bluetooth.area")}: </b>${area.name}`;
-          }
-        }
-      } else {
-        const device = this._sourceDevices[address];
-        if (device) {
-          tooltipText = `<b>${name}</b><br><b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b> ${address}`;
-          const area = getDeviceArea(device, this.hass.areas);
-          if (area) {
-            tooltipText += `<br><b>${this.hass.localize("ui.panel.config.bluetooth.area")}: </b>${area.name}`;
-          }
-        }
-      }
+      return html`${sourceName} →
+      ${targetName}${source !== CORE_SOURCE_ID
+        ? html` <b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b>
+            ${value}`
+        : nothing}`;
     }
-    return tooltipText;
+    const { id: address } = data as any;
+    const name = this._getBluetoothDeviceName(address);
+    const btDevice = this._data.find((d) => d.address === address);
+    const device = this._sourceDevices[address];
+    const area = device ? getDeviceArea(device, this.hass.areas) : undefined;
+    const areaLine = area
+      ? html`<br /><b
+            >${this.hass.localize("ui.panel.config.bluetooth.area")}: </b
+          >${area.name}`
+      : nothing;
+    if (btDevice) {
+      return html`<b>${name}</b><br />
+        <b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b>
+        ${address}<br />
+        <b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b>
+        ${btDevice.rssi}<br />
+        <b>${this.hass.localize("ui.panel.config.bluetooth.source")}:</b>
+        ${btDevice.source}<br />
+        <b>${this.hass.localize("ui.panel.config.bluetooth.updated")}:</b>
+        ${relativeTime(
+          new Date(btDevice.time * 1000),
+          this.hass.locale
+        )}${areaLine}`;
+    }
+    if (device) {
+      return html`<b>${name}</b><br />
+        <b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b>
+        ${address}${areaLine}`;
+    }
+    return nothing;
   };
 
   private _handleChartClick(e: CustomEvent): void {

src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts

@@ -5,7 +5,7 @@ import { dynamicElement } from "../../../../../common/dom/dynamic-element-direct
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../../common/entity/compute_domain";
 import { computeDeviceName } from "../../../../../common/entity/compute_device_name";
-import { navigate } from "../../../../../common/navigate";
+import { navigate, setRefreshUrl } from "../../../../../common/navigate";
 import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-icon-button-arrow-prev";
 import "../../../../../components/ha-button";
@@ -25,6 +25,7 @@ import {
   type ExtEntityRegistryEntry,
 } from "../../../../../data/entity/entity_registry";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import { OVERRIDE_DEVICE_CLASSES } from "../../../entities/entity-registry-settings-editor";
 import "./matter-add-device/matter-add-device-apple-home";
 import "./matter-add-device/matter-add-device-existing";
 import "./matter-add-device/matter-add-device-generic";
@@ -100,6 +101,8 @@ class DialogMatterAddDevice extends LitElement {
   public showDialog(): void {
     this._open = true;
     this._unsub = watchForNewMatterDevice(this.hass, (device) => {
+      // make sure a refresh of the page will navigate to the device page, old iOS apps will refresh the webview when commissioning is done
+      setRefreshUrl(`/config/devices/device/${device.id}`);
       this._newDevice = device;
       this._step = "device_added";
       this._fetchMainEntity();
@@ -137,15 +140,17 @@ class DialogMatterAddDevice extends LitElement {
       entityIds
     );
 
-    const mainEntry = Object.values(entries).find(
-      (e) => e.original_name === null
-    );
-    if (!mainEntry) return;
-
-    const domain = computeDomain(mainEntry.entity_id);
-    if (domain === "cover" || domain === "binary_sensor") {
-      this._mainEntity = mainEntry;
-    }
+    this._mainEntity = Object.values(entries).find((entry) => {
+      if (entry.entity_category) return false;
+      const domain = computeDomain(entry.entity_id);
+      const deviceClasses = OVERRIDE_DEVICE_CLASSES[domain];
+      if (!deviceClasses) return false;
+      const deviceClass = entry.device_class ?? entry.original_device_class;
+      if (!deviceClass) return false;
+      return deviceClasses.some(
+        (classes) => classes.length > 1 && classes.includes(deviceClass)
+      );
+    });
   }
 
   private _dialogClosed(): void {

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -131,7 +131,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
     this._searchFilter = (ev.target as HaInputSearch).value ?? "";
   }
 
-  private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
+  private _tooltipFormatter = (params: TopLevelFormatterParams) => {
     const { dataType, data, name } = params as CallbackDataParams;
     if (dataType === "edge") {
       const { source, target, value } = data as any;
@@ -141,40 +141,45 @@ export class ZHANetworkVisualizationPage extends LitElement {
       const sourceName = this._networkData.nodes.find(
         (node) => node.id === source
       )!.name;
-      const tooltipText = `${sourceName} → ${targetName}${value ? ` <b>LQI:</b> ${value}` : ""}`;
-
       const reverseValue = this._networkData.links.find(
         (link) => link.source === source && link.target === target
       )?.reverseValue;
-      if (reverseValue) {
-        return `${tooltipText}<br>${targetName} → ${sourceName} <b>LQI:</b> ${reverseValue}`;
-      }
-      return tooltipText;
+      return html`${sourceName} →
+      ${targetName}${value
+        ? html` <b>LQI:</b> ${value}`
+        : nothing}${reverseValue
+        ? html`<br />${targetName} → ${sourceName} <b>LQI:</b> ${reverseValue}`
+        : nothing}`;
     }
     const device = this._devices.find((d) => d.ieee === (data as any).id);
     if (!device) {
-      return name;
-    }
-    let label = `<b>IEEE: </b>${device.ieee}`;
-    label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.device_type")}: </b>${device.device_type.replace("_", " ")}`;
-    if (device.nwk != null) {
-      label += `<br><b>NWK: </b>${formatAsPaddedHex(device.nwk)}`;
-    }
-    if (device.manufacturer != null && device.model != null) {
-      label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.device")}: </b>${device.manufacturer} ${device.model}`;
-    } else {
-      label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.device_not_in_db")}</b>`;
+      return html`${name}`;
     }
     const haDevice = this.hass.devices[device.device_reg_id] as
       | DeviceRegistryEntry
       | undefined;
-    if (haDevice) {
-      const area = getDeviceArea(haDevice, this.hass.areas);
-      if (area) {
-        label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.area")}: </b>${area.name}`;
-      }
-    }
-    return label;
+    const area = haDevice
+      ? getDeviceArea(haDevice, this.hass.areas)
+      : undefined;
+    return html`<b>IEEE: </b>${device.ieee}<br /><b
+        >${this.hass.localize("ui.panel.config.zha.visualization.device_type")}: </b
+      >${device.device_type.replace("_", " ")}${device.nwk != null
+        ? html`<br /><b>NWK: </b>${formatAsPaddedHex(device.nwk)}`
+        : nothing}${device.manufacturer != null && device.model != null
+        ? html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zha.visualization.device"
+              )}: </b
+            >${device.manufacturer} ${device.model}`
+        : html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zha.visualization.device_not_in_db"
+              )}</b
+            >`}${area
+        ? html`<br /><b
+              >${this.hass.localize("ui.panel.config.zha.visualization.area")}: </b
+            >${area.name}`
+        : nothing}`;
   };
 
   private async _refreshTopology(): Promise<void> {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -9,6 +9,7 @@ import { getDeviceArea } from "../../../../../common/entity/context/get_device_c
 import { navigate } from "../../../../../common/navigate";
 import { debounce } from "../../../../../common/util/debounce";
 import "../../../../../components/chart/ha-network-graph";
+import "../../../../../components/chart/ha-chart-tooltip-marker";
 import type {
   NetworkData,
   NetworkLink,
@@ -150,7 +151,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
     this._searchFilter = (ev.target as HaInputSearch).value ?? "";
   }
 
-  private _tooltipFormatter = (params: TopLevelFormatterParams): string => {
+  private _tooltipFormatter = (params: TopLevelFormatterParams) => {
     const { dataType, data } = params as CallbackDataParams;
     if (dataType === "edge") {
       const { source, target, value } = data as any;
@@ -160,39 +161,66 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         sourceDevice?.name_by_user ?? sourceDevice?.name ?? source;
       const targetName =
         targetDevice?.name_by_user ?? targetDevice?.name ?? target;
-      let tip = `${sourceName} → ${targetName}`;
       const route =
         this._nodeStatistics[source]?.lwr || this._nodeStatistics[source]?.nlwr;
-      if (route?.protocol_data_rate) {
-        tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.data_rate")}:</b> ${this.hass.localize(`ui.panel.config.zwave_js.protocol_data_rate.${route.protocol_data_rate}`)}`;
-      }
-      if (value) {
-        tip += `<br><b>RSSI:</b> ${value}`;
-      }
-      return tip;
+      return html`${sourceName} →
+      ${targetName}${route?.protocol_data_rate
+        ? html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zwave_js.visualization.data_rate"
+              )}:</b
+            >
+            ${this.hass.localize(
+              `ui.panel.config.zwave_js.protocol_data_rate.${route.protocol_data_rate}` as any
+            )}`
+        : nothing}${value ? html`<br /><b>RSSI:</b> ${value}` : nothing}`;
     }
     const { id, name } = data as any;
     const device = this._devices[id] as DeviceRegistryEntry | undefined;
     const nodeStatus = this._nodeStatuses[id];
-    let tip = `${(params as any).marker} ${name}`;
-    tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.node_id")}:</b> ${id}`;
-    if (device) {
-      tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.manufacturer")}:</b> ${device.manufacturer || "-"}`;
-      tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.model")}:</b> ${device.model || "-"}`;
-    }
-    if (nodeStatus) {
-      tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.status")}:</b> ${this.hass.localize(`ui.panel.config.zwave_js.node_status.${nodeStatus.status}`)}`;
-      if (nodeStatus.zwave_plus_version) {
-        tip += `<br><b>Z-Wave Plus:</b> ${this.hass.localize("ui.panel.config.zwave_js.visualization.version")} ${nodeStatus.zwave_plus_version}`;
-      }
-    }
-    if (device) {
-      const area = getDeviceArea(device, this.hass.areas);
-      if (area) {
-        tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.area")}:</b> ${area.name}`;
-      }
-    }
-    return tip;
+    const area = device ? getDeviceArea(device, this.hass.areas) : undefined;
+    return html`<ha-chart-tooltip-marker
+        .color=${String((params as CallbackDataParams).color ?? "")}
+      ></ha-chart-tooltip-marker>
+      ${name}<br /><b
+        >${this.hass.localize(
+          "ui.panel.config.zwave_js.visualization.node_id"
+        )}:</b
+      >
+      ${id}${device
+        ? html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zwave_js.visualization.manufacturer"
+              )}:</b
+            >
+            ${device.manufacturer || "-"}<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zwave_js.visualization.model"
+              )}:</b
+            >
+            ${device.model || "-"}`
+        : nothing}${nodeStatus
+        ? html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zwave_js.visualization.status"
+              )}:</b
+            >
+            ${this.hass.localize(
+              `ui.panel.config.zwave_js.node_status.${nodeStatus.status}` as any
+            )}${nodeStatus.zwave_plus_version
+              ? html`<br /><b>Z-Wave Plus:</b> ${this.hass.localize(
+                    "ui.panel.config.zwave_js.visualization.version"
+                  )}
+                  ${nodeStatus.zwave_plus_version}`
+              : nothing}`
+        : nothing}${area
+        ? html`<br /><b
+              >${this.hass.localize(
+                "ui.panel.config.zwave_js.visualization.area"
+              )}:</b
+            >
+            ${area.name}`
+        : nothing}`;
   };
 
   private _getNetworkData = memoizeOne(

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

@@ -104,10 +104,8 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
 import {
   getAreaTableColumn,
   getCategoryTableColumn,
-  getCreatedAtTableColumn,
   getEditableTableColumn,
   getLabelsTableColumn,
-  getModifiedAtTableColumn,
   renderRelativeTimeColumn,
 } from "../common/data-table-columns";
 import { configSections } from "../ha-panel-config";
@@ -127,8 +125,6 @@ type SceneItem = SceneEntity & {
   labels: string[]; // search only
   assistants: string[];
   assistants_sortable_key: string | undefined;
-  created_at: number | undefined;
-  modified_at: number | undefined;
   editable: boolean;
 };
 
@@ -268,8 +264,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           labels: label_entries.map((lbl) => lbl.name),
           assistants,
           assistants_sortable_key: getAssistantsSortableKey(assistants),
-          created_at: entityRegEntry?.created_at,
-          modified_at: entityRegEntry?.modified_at,
           selectable: entityRegEntry !== undefined,
           editable: Boolean(scene.attributes.id),
         };
@@ -329,8 +323,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           localize,
           localize("ui.panel.config.scene.picker.only_editable")
         ),
-        created_at: getCreatedAtTableColumn(localize, this.hass),
-        modified_at: getModifiedAtTableColumn(localize, this.hass),
         actions: {
           lastFixed: true,
           title: "",

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

@@ -158,6 +158,7 @@ export default class HaScriptFieldRow extends LitElement {
               ? html`
                   <ha-svg-icon
                     id="note-icon"
+                    tabindex="0"
                     .path=${mdiCommentTextOutline}
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.editor.note.label"

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

@@ -109,10 +109,8 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
 import {
   getAreaTableColumn,
   getCategoryTableColumn,
-  getCreatedAtTableColumn,
   getEntityIdHiddenTableColumn,
   getLabelsTableColumn,
-  getModifiedAtTableColumn,
   getTriggeredAtTableColumn,
 } from "../common/data-table-columns";
 import { configSections } from "../ha-panel-config";
@@ -132,8 +130,6 @@ type ScriptItem = ScriptEntity & {
   labels: string[]; // search only
   assistants: string[];
   assistants_sortable_key: string | undefined;
-  created_at: number | undefined;
-  modified_at: number | undefined;
 };
 
 @customElement("ha-script-picker")
@@ -275,8 +271,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           labels: label_entries.map((lbl) => lbl.name),
           assistants,
           assistants_sortable_key: getAssistantsSortableKey(assistants),
-          created_at: entityRegEntry?.created_at,
-          modified_at: entityRegEntry?.modified_at,
           selectable: entityRegEntry !== undefined,
         };
       });
@@ -324,8 +318,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         category: getCategoryTableColumn(localize),
         labels: getLabelsTableColumn(),
         last_triggered: getTriggeredAtTableColumn(localize, this.hass),
-        created_at: getCreatedAtTableColumn(localize, this.hass),
-        modified_at: getModifiedAtTableColumn(localize, this.hass),
         actions: {
           lastFixed: true,
           title: "",

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

@@ -14,7 +14,6 @@ import {
   removeSearchParam,
 } from "../../common/url/search-params";
 import "../../components/date-picker/ha-date-range-picker";
-import "../../components/entity/ha-entity-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
@@ -305,24 +304,23 @@ export class HaPanelLogbook extends LitElement {
         :host {
           --ha-generic-picker-max-width: 400px;
         }
-        ha-logbook {
+
+        .content {
+          display: flex;
+          flex-direction: column;
           height: calc(
-            100vh -
-              168px - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
+            100vh - var(--header-height, 0px) - var(
+                --safe-area-inset-top,
                 0px
-              )
+              ) - var(--safe-area-inset-bottom, 0px)
           );
+          overflow-x: hidden;
+          padding: 0 0 16px;
         }
 
-        :host([narrow]) ha-logbook {
-          height: calc(
-            100vh -
-              250px - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
-                0px
-              )
-          );
+        ha-logbook {
+          flex: 1;
+          min-height: 0;
         }
 
         ha-date-range-picker {
@@ -337,6 +335,10 @@ export class HaPanelLogbook extends LitElement {
           ha-date-range-picker {
             width: 100%;
           }
+
+          .filters {
+            flex-direction: column;
+          }
         }
 
         :host([narrow]) ha-date-range-picker {
@@ -360,22 +362,11 @@ export class HaPanelLogbook extends LitElement {
           flex-wrap: wrap;
         }
 
-        ha-entity-picker {
-          display: inline-block;
-          flex-grow: 1;
-          max-width: 400px;
-        }
-
         ha-target-picker {
           flex: 1;
           max-width: 100%;
           min-width: 0;
         }
-
-        :host([narrow]) ha-entity-picker {
-          max-width: none;
-          width: 100%;
-        }
       `,
     ];
   }

src/panels/lovelace/card-features/hui-counter-actions-card-feature.ts

@@ -86,7 +86,6 @@ class HuiCounterActionsCardFeature
   static getStubConfig(): CounterActionsCardFeatureConfig {
     return {
       type: "counter-actions",
-      actions: COUNTER_ACTIONS.map((action) => action),
     };
   }
 
@@ -108,10 +107,12 @@ class HuiCounterActionsCardFeature
       return null;
     }
 
+    const actions = this._config?.actions ?? COUNTER_ACTIONS;
+
     return html`
       <ha-control-button-group>
-        ${this._config?.actions
-          ?.filter((action) => COUNTER_ACTIONS.includes(action))
+        ${actions
+          .filter((action) => COUNTER_ACTIONS.includes(action))
           .map((action) => {
             const button = COUNTER_ACTIONS_BUTTON[action](this._stateObj!);
             return html`

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts

@@ -110,20 +110,9 @@ class HuiLawnMowerCommandCardFeature
       | undefined;
   }
 
-  static getStubConfig(
-    hass: HomeAssistant,
-    context: LovelaceCardFeatureContext
-  ): LawnMowerCommandsCardFeatureConfig {
-    const stateObj = context.entity_id
-      ? hass.states[context.entity_id]
-      : undefined;
+  static getStubConfig(): LawnMowerCommandsCardFeatureConfig {
     return {
       type: "lawn-mower-commands",
-      commands: stateObj
-        ? LAWN_MOWER_COMMANDS.filter((c) =>
-            supportsLawnMowerCommand(stateObj, c)
-          ).slice(0, 3)
-        : [],
     };
   }
 
@@ -162,28 +151,28 @@ class HuiLawnMowerCommandCardFeature
 
     const stateObj = this._stateObj as LawnMowerEntity;
 
+    const commands = this._config.commands ?? LAWN_MOWER_COMMANDS;
+
     return html`
       <ha-control-button-group>
-        ${LAWN_MOWER_COMMANDS.filter(
-          (command) =>
-            supportsLawnMowerCommand(stateObj, command) &&
-            this._config?.commands?.includes(command)
-        ).map((command) => {
-          const button = LAWN_MOWER_COMMANDS_BUTTONS[command](stateObj);
-          return html`
-            <ha-control-button
-              .entry=${button}
-              .label=${this.hass!.localize(
-                // @ts-ignore
-                `ui.dialogs.more_info_control.lawn_mower.${button.translationKey}`
-              )}
-              @click=${this._onCommandTap}
-              .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
-            >
-              <ha-svg-icon .path=${button.icon}></ha-svg-icon>
-            </ha-control-button>
-          `;
-        })}
+        ${commands
+          .filter((command) => supportsLawnMowerCommand(stateObj, command))
+          .map((command) => {
+            const button = LAWN_MOWER_COMMANDS_BUTTONS[command](stateObj);
+            return html`
+              <ha-control-button
+                .entry=${button}
+                .label=${this.hass!.localize(
+                  // @ts-ignore
+                  `ui.dialogs.more_info_control.lawn_mower.${button.translationKey}`
+                )}
+                @click=${this._onCommandTap}
+                .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
+              >
+                <ha-svg-icon .path=${button.icon}></ha-svg-icon>
+              </ha-control-button>
+            `;
+          })}
       </ha-control-button-group>
     `;
   }

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts

@@ -52,6 +52,12 @@ export const VACUUM_COMMANDS_FEATURES: Record<
   return_home: [VacuumEntityFeature.RETURN_HOME],
 };
 
+export const VACUUM_DEFAULT_COMMANDS: VacuumCommand[] = [
+  "start_pause",
+  "stop",
+  "return_home",
+];
+
 export const supportsVacuumCommand = (
   stateObj: HassEntity,
   command: VacuumCommand
@@ -154,20 +160,9 @@ class HuiVacuumCommandCardFeature
       | undefined;
   }
 
-  static getStubConfig(
-    hass: HomeAssistant,
-    context: LovelaceCardFeatureContext
-  ): VacuumCommandsCardFeatureConfig {
-    const stateObj = context.entity_id
-      ? hass.states[context.entity_id]
-      : undefined;
+  static getStubConfig(): VacuumCommandsCardFeatureConfig {
     return {
       type: "vacuum-commands",
-      commands: stateObj
-        ? VACUUM_COMMANDS.filter((c) =>
-            supportsVacuumCommand(stateObj, c)
-          ).slice(0, 3)
-        : [],
     };
   }
 
@@ -204,28 +199,28 @@ class HuiVacuumCommandCardFeature
 
     const stateObj = this._stateObj as VacuumEntity;
 
+    const commands = this._config.commands ?? VACUUM_DEFAULT_COMMANDS;
+
     return html`
       <ha-control-button-group>
-        ${VACUUM_COMMANDS.filter(
-          (command) =>
-            supportsVacuumCommand(stateObj, command) &&
-            this._config?.commands?.includes(command)
-        ).map((command) => {
-          const button = VACUUM_COMMANDS_BUTTONS[command](stateObj);
-          return html`
-            <ha-control-button
-              .entry=${button}
-              .label=${this.hass!.localize(
-                // @ts-ignore
-                `ui.dialogs.more_info_control.vacuum.${button.translationKey}`
-              )}
-              @click=${this._onCommandTap}
-              .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
-            >
-              <ha-svg-icon .path=${button.icon}></ha-svg-icon>
-            </ha-control-button>
-          `;
-        })}
+        ${commands
+          .filter((command) => supportsVacuumCommand(stateObj, command))
+          .map((command) => {
+            const button = VACUUM_COMMANDS_BUTTONS[command](stateObj);
+            return html`
+              <ha-control-button
+                .entry=${button}
+                .label=${this.hass!.localize(
+                  // @ts-ignore
+                  `ui.dialogs.more_info_control.vacuum.${button.translationKey}`
+                )}
+                @click=${this._onCommandTap}
+                .disabled=${button.disabled || stateObj.state === UNAVAILABLE}
+              >
+                <ha-svg-icon .path=${button.icon}></ha-svg-icon>
+              </ha-control-button>
+            `;
+          })}
       </ha-control-button-group>
     `;
   }

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

@@ -1,4 +1,6 @@
 import type { HassConfig } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
+import { html, nothing } from "lit";
 import {
   subHours,
   differenceInDays,
@@ -31,10 +33,10 @@ import {
   formatDateWeekdayVeryShortDate,
 } from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
-import type { ECOption } from "../../../../../resources/echarts/echarts";
-import { filterXSS } from "../../../../../common/util/xss";
+import type { HaECOption } from "../../../../../resources/echarts/echarts";
 import type { StatisticPeriod } from "../../../../../data/recorder";
 import { getPeriodicAxisLabelConfig } from "../../../../../components/chart/axis-label";
+import "../../../../../components/chart/ha-chart-tooltip-marker";
 import { getSuggestedPeriod } from "../../../../../data/energy";
 
 export { fillDataGapsAndRoundCaps } from "../../../../../components/chart/round-caps";
@@ -110,7 +112,7 @@ export function getCommonOptions(
   formatTotal?: (total: number) => string,
   detailedDailyData = false,
   yAxisFractionDigits = 1
-): ECOption {
+): HaECOption {
   const suggestedPeriod = getSuggestedPeriod(start, end, detailedDailyData);
   let suggestedMax = getSuggestedMax(suggestedPeriod, end, detailedDailyData);
 
@@ -134,7 +136,7 @@ export function getCommonOptions(
     }
   }
 
-  const monthTimeAxis: ECOption = {
+  const monthTimeAxis: HaECOption = {
     xAxis: {
       type: "time",
       min: subDays(start, MONTH_TIME_AXIS_PADDING),
@@ -146,7 +148,7 @@ export function getCommonOptions(
       splitNumber: Math.min(differenceInCalendarMonths(end, start), 5),
     },
   };
-  const normalTimeAxis: ECOption = {
+  const normalTimeAxis: HaECOption = {
     xAxis: {
       type: "time",
       min: start,
@@ -154,7 +156,7 @@ export function getCommonOptions(
     },
   };
 
-  const options: ECOption = {
+  const options: HaECOption = {
     ...(suggestedPeriod === "month" ? monthTimeAxis : normalTimeAxis),
     yAxis: {
       type: "value",
@@ -179,7 +181,7 @@ export function getCommonOptions(
     },
     tooltip: {
       trigger: "axis",
-      formatter: (params: TopLevelFormatterParams): string => {
+      formatter: (params: TopLevelFormatterParams) => {
         // trigger: "axis" gives an array of params, but "item" gives a single param
         if (Array.isArray(params)) {
           const mainItems: CallbackDataParams[] = [];
@@ -191,7 +193,7 @@ export function getCommonOptions(
               mainItems.push(param);
             }
           });
-          return [mainItems, compareItems]
+          const sections = [mainItems, compareItems]
             .map((items) =>
               formatTooltip(
                 items,
@@ -204,8 +206,12 @@ export function getCommonOptions(
                 formatTotal
               )
             )
-            .filter(Boolean)
-            .join("<br><br>");
+            .filter((s): s is TemplateResult => s !== nothing);
+          if (sections.length === 0) return nothing;
+          return html`${sections.map(
+            (section, i) =>
+              html`${i > 0 ? html`<br /><br />` : nothing}${section}`
+          )}`;
         }
         return formatTooltip(
           [params],
@@ -232,9 +238,9 @@ function formatTooltip(
   showCompareYear: boolean,
   unit?: string,
   formatTotal?: (total: number) => string
-) {
+): TemplateResult | typeof nothing {
   if (!params[0]?.value) {
-    return "";
+    return nothing;
   }
   // displayX may be shifted from the period start (see EnergyDataPoint);
   // originalStart has the real date for display. Gap-filled entries lack it.
@@ -258,43 +264,50 @@ function formatTooltip(
       period += ` – ${formatTime(addHours(date, 1), locale, config)}`;
     }
   }
-  const title = `<h4 style="text-align: center; margin: 0;">${period}</h4>`;
 
   let sumPositive = 0;
   let countPositive = 0;
   let sumNegative = 0;
   let countNegative = 0;
-  const values = params
-    .map((param) => {
-      const y = param.value?.[1] as number;
-      const value = formatNumber(
-        y,
-        locale,
-        y < 0.1 ? { maximumFractionDigits: 3 } : undefined
-      );
-      if (value === "0") {
-        return false;
+  const rows: TemplateResult[] = [];
+  for (const param of params) {
+    const y = param.value?.[1] as number;
+    const value = formatNumber(
+      y,
+      locale,
+      y < 0.1 ? { maximumFractionDigits: 3 } : undefined
+    );
+    if (value === "0") {
+      continue;
+    }
+    if (param.componentSubType === "bar") {
+      if (y > 0) {
+        sumPositive += y;
+        countPositive++;
+      } else {
+        sumNegative += y;
+        countNegative++;
       }
-      if (param.componentSubType === "bar") {
-        if (y > 0) {
-          sumPositive += y;
-          countPositive++;
-        } else {
-          sumNegative += y;
-          countNegative++;
-        }
-      }
-      return `${param.marker} ${filterXSS(param.seriesName!)}: <div style="direction:ltr; display: inline;">${value} ${unit}</div>`;
-    })
-    .filter(Boolean);
-  let footer = "";
-  if (sumPositive !== 0 && countPositive > 1 && formatTotal) {
-    footer += `<br><b>${formatTotal(sumPositive)}</b>`;
+    }
+    rows.push(
+      html`<ha-chart-tooltip-marker
+          .color=${String(param.color ?? "")}
+        ></ha-chart-tooltip-marker>
+        ${param.seriesName}:
+        <div style="direction:ltr; display: inline;">${value} ${unit}</div>`
+    );
   }
-  if (sumNegative !== 0 && countNegative > 1 && formatTotal) {
-    footer += `<br><b>${formatTotal(sumNegative)}</b>`;
+  if (rows.length === 0) {
+    return nothing;
   }
-  return values.length > 0 ? `${title}${values.join("<br>")}${footer}` : "";
+  return html`<h4 style="text-align: center; margin: 0;">${period}</h4>
+    ${rows.map(
+      (row, i) => html`${i > 0 ? html`<br />` : nothing}${row}`
+    )}${sumPositive !== 0 && countPositive > 1 && formatTotal
+      ? html`<br /><b>${formatTotal(sumPositive)}</b>`
+      : nothing}${sumNegative !== 0 && countNegative > 1 && formatTotal
+      ? html`<br /><b>${formatTotal(sumNegative)}</b>`
+      : nothing}`;
 }
 
 function getDatapointX(datapoint: NonNullable<LineSeriesOption["data"]>[0]) {

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -44,7 +44,7 @@ import {
   getCompareTransform,
 } from "./common/energy-chart-options";
 import { storage } from "../../../../common/decorators/storage";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import { formatNumber } from "../../../../common/number/format_number";
 import type { CustomLegendOption } from "../../../../components/chart/ha-chart-base";
 
@@ -161,7 +161,8 @@ export class HuiEnergyDevicesDetailGraphCard
               UNIT,
               this._compareStart,
               this._compareEnd,
-              this._yAxisFractionDigits
+              this._yAxisFractionDigits,
+              this._legendData
             )}
             click-label-for-more-info
             @dataset-hidden=${this._datasetHidden}
@@ -215,8 +216,9 @@ export class HuiEnergyDevicesDetailGraphCard
       unit: string | undefined,
       compareStart: Date | undefined,
       compareEnd: Date | undefined,
-      yAxisFractionDigits: number
-    ): ECOption => {
+      yAxisFractionDigits: number,
+      legendData: CustomLegendOption["data"]
+    ): HaECOption => {
       const commonOptions = getCommonOptions(
         start,
         end,
@@ -230,8 +232,8 @@ export class HuiEnergyDevicesDetailGraphCard
         yAxisFractionDigits
       );
 
-      const selected = this._legendData
-        ? this._legendData
+      const selected = legendData
+        ? legendData
             .filter(
               (d) =>
                 d.id && this._hiddenStats.includes(this._getStatIdFromId(d.id))
@@ -247,7 +249,7 @@ export class HuiEnergyDevicesDetailGraphCard
         legend: {
           show: true,
           type: "custom",
-          data: this._legendData,
+          data: legendData,
           selected,
         },
         grid: {

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -9,10 +9,10 @@ import type { BarSeriesOption, PieSeriesOption } from "echarts/charts";
 import { PieChart } from "echarts/charts";
 import type { ECElementEvent } from "echarts/types/dist/shared";
 import type { PieDataItemOption } from "echarts/types/src/chart/pie/PieSeries";
-import { filterXSS } from "../../../../common/util/xss";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/ha-chart-base";
+import "../../../../components/chart/ha-chart-tooltip-marker";
 import type { EnergyData } from "../../../../data/energy";
 import {
   computeConsumptionData,
@@ -30,7 +30,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { LovelaceCard } from "../../types";
 import type { EnergyDevicesGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import "../../../../components/ha-card";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { measureTextWidth } from "../../../../util/text";
@@ -198,24 +198,28 @@ export class HuiEnergyDevicesGraphCard
     `;
   }
 
-  private _renderTooltip(params: any) {
-    const deviceName = filterXSS(this._getDeviceName(params.name));
-    const title = `<h4 style="text-align: center; margin: 0;">${deviceName}</h4>`;
+  private _renderTooltip = (params: any) => {
+    const deviceName = this._getDeviceName(params.name);
     const value = `${formatNumber(
       params.value[0] as number,
       this.hass.locale,
       params.value < 0.1 ? { maximumFractionDigits: 3 } : undefined
     )} kWh ${params.percent ? `(${params.percent} %)` : ""}`;
-    return `${title}${params.marker} ${params.seriesName}: <div style="direction:ltr; display: inline;">${value}</div>`;
-  }
+    return html`<h4 style="text-align: center; margin: 0;">${deviceName}</h4>
+      <ha-chart-tooltip-marker
+        .color=${String(params.color ?? "")}
+      ></ha-chart-tooltip-marker>
+      ${params.seriesName}:
+      <div style="direction:ltr; display: inline;">${value}</div>`;
+  };
 
   private _createOptions = memoizeOne(
     (
       data: (BarSeriesOption | PieSeriesOption)[],
       chartType: "bar" | "pie",
       legendData: typeof this._legendData
-    ): ECOption => {
-      const options: ECOption = {
+    ): HaECOption => {
+      const options: HaECOption = {
         grid: {
           top: 5,
           left: 5,
@@ -225,7 +229,7 @@ export class HuiEnergyDevicesGraphCard
         },
         tooltip: {
           show: true,
-          formatter: this._renderTooltip.bind(this),
+          formatter: this._renderTooltip,
         },
         xAxis: { show: false },
         yAxis: { show: false },

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -35,7 +35,7 @@ import {
   getCommonOptions,
   getCompareTransform,
 } from "./common/energy-chart-options";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import "./common/hui-energy-graph-chip";
 import "../../../../components/ha-tooltip";
 
@@ -177,7 +177,7 @@ export class HuiEnergyGasGraphCard
       compareStart: Date | undefined,
       compareEnd: Date | undefined,
       yAxisFractionDigits: number
-    ): ECOption =>
+    ): HaECOption =>
       getCommonOptions(
         start,
         end,

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -438,9 +438,7 @@ class HuiEnergySankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
-      kWh</div>`;
+    `${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)} kWh`;
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -37,7 +37,7 @@ import {
   getCommonOptions,
   getCompareTransform,
 } from "./common/energy-chart-options";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import "./common/hui-energy-graph-chip";
 import "../../../../components/ha-tooltip";
 
@@ -65,7 +65,7 @@ export class HuiEnergySolarGraphCard
     };
   }
 
-  @state() private _chartData: ECOption["series"][] = [];
+  @state() private _chartData: (BarSeriesOption | LineSeriesOption)[] = [];
 
   @state() private _yAxisFractionDigits = 1;
 
@@ -175,7 +175,7 @@ export class HuiEnergySolarGraphCard
       compareStart: Date | undefined,
       compareEnd: Date | undefined,
       yAxisFractionDigits: number
-    ): ECOption =>
+    ): HaECOption =>
       getCommonOptions(
         start,
         end,
@@ -213,7 +213,7 @@ export class HuiEnergySolarGraphCard
       }
     }
 
-    const datasets: ECOption["series"] = [];
+    const datasets: (BarSeriesOption | LineSeriesOption)[] = [];
 
     const computedStyles = getComputedStyle(this);
 

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -6,10 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import type { BarSeriesOption } from "echarts/charts";
-import type {
-  TooltipOption,
-  TopLevelFormatterParams,
-} from "echarts/types/dist/shared";
+import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
 import { getEnergyColor } from "./common/color";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/ha-chart-base";
@@ -43,7 +40,7 @@ import {
   getCommonOptions,
   getCompareTransform,
 } from "./common/energy-chart-options";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 
 const colorPropertyMap = {
   to_grid: "--energy-grid-return-color",
@@ -196,7 +193,7 @@ export class HuiEnergyUsageGraphCard
       compareStart: Date | undefined,
       compareEnd: Date | undefined,
       yAxisFractionDigits: number
-    ): ECOption => {
+    ): HaECOption => {
       const commonOptions = getCommonOptions(
         start,
         end,
@@ -209,15 +206,22 @@ export class HuiEnergyUsageGraphCard
         false,
         yAxisFractionDigits
       );
-      const options: ECOption = {
+      const tooltip = commonOptions.tooltip;
+      const baseFormatter =
+        tooltip &&
+        !Array.isArray(tooltip) &&
+        typeof tooltip.formatter === "function"
+          ? tooltip.formatter
+          : undefined;
+      const options: HaECOption = {
         ...commonOptions,
         tooltip: {
           ...commonOptions.tooltip,
-          formatter: (params: TopLevelFormatterParams): string => {
+          formatter: (params: TopLevelFormatterParams) => {
             if (!Array.isArray(params)) {
-              return "";
+              return nothing;
             }
-            params.sort((a, b) => {
+            const sorted = [...params].sort((a, b) => {
               const aValue = (a.value as number[])?.[1];
               const bValue = (b.value as number[])?.[1];
               if (aValue > 0 && bValue < 0) {
@@ -231,9 +235,7 @@ export class HuiEnergyUsageGraphCard
               }
               return a.componentIndex - b.componentIndex;
             });
-            return (
-              (commonOptions.tooltip as TooltipOption)?.formatter as any
-            )?.(params);
+            return baseFormatter ? baseFormatter(sorted) : nothing;
           },
         },
       };

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -34,7 +34,7 @@ import {
   getCommonOptions,
   getCompareTransform,
 } from "./common/energy-chart-options";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import { formatNumber } from "../../../../common/number/format_number";
 import "./common/hui-energy-graph-chip";
 import "../../../../components/ha-tooltip";
@@ -177,7 +177,7 @@ export class HuiEnergyWaterGraphCard
       compareStart: Date | undefined,
       compareEnd: Date | undefined,
       yAxisFractionDigits: number
-    ): ECOption =>
+    ): HaECOption =>
       getCommonOptions(
         start,
         end,

src/panels/lovelace/cards/energy/hui-power-sankey-card.ts

@@ -580,9 +580,7 @@ class HuiPowerSankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatPowerShort(this.hass, value)}
-    </div>`;
+    formatPowerShort(this.hass, value);
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

src/panels/lovelace/cards/energy/hui-power-sources-graph-card.ts

@@ -24,7 +24,7 @@ import type { LovelaceCard } from "../../types";
 import type { PowerSourcesGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import { getCommonOptions, fillLineGaps } from "./common/energy-chart-options";
-import type { ECOption } from "../../../../resources/echarts/echarts";
+import type { HaECOption } from "../../../../resources/echarts/echarts";
 import { hex2rgb } from "../../../../common/color/convert-color";
 import type { CustomLegendOption } from "../../../../components/chart/ha-chart-base";
 
@@ -148,7 +148,7 @@ export class HuiPowerSourcesGraphCard
       compareEnd: Date | undefined,
       legendData: CustomLegendOption["data"] | undefined,
       yAxisFractionDigits: number
-    ): ECOption => ({
+    ): HaECOption => ({
       ...getCommonOptions(
         start,
         end,

src/panels/lovelace/cards/water/hui-water-flow-sankey-card.ts

@@ -511,9 +511,11 @@ class HuiWaterFlowSankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatFlowRateShort(this.hass.locale, this.hass.config.unit_system.length, value)}
-    </div>`;
+    formatFlowRateShort(
+      this.hass.locale,
+      this.hass.config.unit_system.length,
+      value
+    );
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

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

@@ -155,7 +155,7 @@ export class HuiActionEditor extends LitElement {
         this.defaultAction
           ? ` (${this.hass!.localize(
               `ui.panel.lovelace.editor.action-editor.actions.${this.defaultAction}`
-            ).toLowerCase()})`
+            )})`
           : ""
       }`,
     };

src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts

@@ -84,6 +84,7 @@ export class HuiBadgePicker extends LitElement {
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
         ignoreDiacritics: true,
+        ignoreLocation: true,
       };
       const fuse = new Fuse(badges, options);
       badges = fuse.search(filter).map((result) => result.item);

src/panels/lovelace/editor/card-editor/entity-tree-builder.ts

@@ -6,6 +6,7 @@ import {
 } from "@mdi/js";
 import type { FuseIndex } from "fuse.js";
 import Fuse from "fuse.js";
+import { getAreasFloorHierarchy } from "../../../../common/areas/areas-floor-hierarchy";
 import { computeAreaName } from "../../../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -13,7 +14,6 @@ import { computeEntityName } from "../../../../common/entity/compute_entity_name
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { stringCompare } from "../../../../common/string/compare";
 import { entityComboBoxKeys } from "../../../../data/entity/entity_picker";
-import { getFloorAreaLookup } from "../../../../data/floor_registry";
 import { domainToName } from "../../../../data/integration";
 import { multiTermSortedSearch } from "../../../../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../../../../types";
@@ -206,23 +206,24 @@ export function buildEntityTree(input: BuildEntityTreeInput): EntityTree {
     return stringCompare(an, bn, language);
   };
 
+  const buildDeviceNodes = (source: Map<string, string[]>): DeviceNode[] =>
+    [...source.entries()]
+      .map(([id, ids]) => {
+        const device = deviceReg[id];
+        return {
+          id,
+          name: (device ? computeDeviceName(device) : undefined) ?? id,
+          entityIds: ids.sort(sortByName),
+        };
+      })
+      .sort((a, b) => stringCompare(a.name, b.name, language));
+
   const buildAreaNode = (areaId: string): AreaNode | undefined => {
     const area = areaReg[areaId];
     if (!area) return undefined;
     const directIds = (areaDirectEntities.get(areaId) ?? []).sort(sortByName);
     const byDevice = areaDeviceEntities.get(areaId);
-    const devices: DeviceNode[] = byDevice
-      ? [...byDevice.entries()]
-          .map(([id, ids]) => {
-            const device = deviceReg[id];
-            return {
-              id,
-              name: (device ? computeDeviceName(device) : undefined) ?? id,
-              entityIds: ids.sort(sortByName),
-            };
-          })
-          .sort((a, b) => stringCompare(a.name, b.name, language))
-      : [];
+    const devices = byDevice ? buildDeviceNodes(byDevice) : [];
     if (!directIds.length && !devices.length) return undefined;
     return {
       id: area.area_id,
@@ -235,14 +236,14 @@ export function buildEntityTree(input: BuildEntityTreeInput): EntityTree {
 
   const areas = Object.values(areaReg);
   const floors = Object.values(floorReg);
-  const floorAreaLookup = getFloorAreaLookup(areas);
+  const hierarchy = getAreasFloorHierarchy(floors, areas);
 
-  const floorNodes: FloorNode[] = floors
-    .map((floor) => {
-      const areaList = (floorAreaLookup[floor.floor_id] ?? [])
-        .map((a) => buildAreaNode(a.area_id))
-        .filter((a): a is AreaNode => !!a)
-        .sort((a, b) => stringCompare(a.name, b.name, language));
+  const floorNodes: FloorNode[] = hierarchy.floors
+    .map(({ id, areas: areaIds }) => {
+      const floor = floorReg[id];
+      const areaList = areaIds
+        .map((areaId) => buildAreaNode(areaId))
+        .filter((a): a is AreaNode => !!a);
       if (!areaList.length) return undefined;
       return {
         id: floor.floor_id,
@@ -252,26 +253,11 @@ export function buildEntityTree(input: BuildEntityTreeInput): EntityTree {
         areas: areaList,
       };
     })
-    .filter((f): f is FloorNode => !!f)
-    .sort((a, b) => stringCompare(a.name, b.name, language));
+    .filter((f): f is FloorNode => !!f);
 
-  const otherAreas = areas
-    .filter((a) => !a.floor_id || !floorReg[a.floor_id])
-    .map((a) => buildAreaNode(a.area_id))
-    .filter((a): a is AreaNode => !!a)
-    .sort((a, b) => stringCompare(a.name, b.name, language));
-
-  const buildDeviceNodes = (source: Map<string, string[]>): DeviceNode[] =>
-    [...source.entries()]
-      .map(([id, ids]) => {
-        const device = deviceReg[id];
-        return {
-          id,
-          name: (device ? computeDeviceName(device) : undefined) ?? id,
-          entityIds: ids.sort(sortByName),
-        };
-      })
-      .sort((a, b) => stringCompare(a.name, b.name, language));
+  const otherAreas = hierarchy.areas
+    .map((areaId) => buildAreaNode(areaId))
+    .filter((a): a is AreaNode => !!a);
 
   const buildDomainGroups = (source: Map<string, string[]>): DomainGroup[] =>
     [...source.entries()]

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -91,6 +91,7 @@ export class HuiCardPicker extends LitElement {
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
         ignoreDiacritics: true,
+        ignoreLocation: true,
       };
       const fuse = new Fuse(cards, options);
       cards = fuse.search(filter).map((result) => result.item);

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -30,6 +30,7 @@ import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
@@ -230,11 +231,28 @@ export class HaCardConditionEditor extends LitElement {
     return html`
       <div class="container">
         <ha-expansion-panel left-chevron>
-          <ha-svg-icon
+          <div
+            id="condition-icon"
+            class="icon-badge-wrapper"
             slot="leading-icon"
-            class="condition-icon"
-            .path=${ICON_CONDITION[condition.condition]}
-          ></ha-svg-icon>
+          >
+            <ha-svg-icon
+              .path=${ICON_CONDITION[condition.condition]}
+            ></ha-svg-icon>
+            ${hideLiveTest
+              ? nothing
+              : html`<ha-automation-row-live-test
+                  .state=${this._liveTestResult.state}
+                  .label=${this.hass.localize(
+                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
+                  )}
+                ></ha-automation-row-live-test>`}
+          </div>
+          ${!hideLiveTest && this._liveTestResult.message
+            ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+                >${this._liveTestResult.message}</ha-tooltip
+              >`
+            : nothing}
           <h3 slot="header">
             ${this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
@@ -255,18 +273,6 @@ export class HaCardConditionEditor extends LitElement {
                   "ui.panel.lovelace.editor.condition-editor.testing_error"
                 )}
           </ha-automation-row-event-chip>
-          ${hideLiveTest
-            ? nothing
-            : html`
-                <ha-automation-row-live-test
-                  slot="icons"
-                  .state=${this._liveTestResult.state}
-                  .label=${this.hass.localize(
-                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
-                  )}
-                  .message=${this._liveTestResult.message}
-                ></ha-automation-row-live-test>
-              `}
           <ha-dropdown
             slot="icons"
             @wa-select=${this._handleAction}
@@ -479,17 +485,15 @@ export class HaCardConditionEditor extends LitElement {
         --expansion-panel-summary-padding: 0 0 0 8px;
         --expansion-panel-content-padding: 0;
       }
-      .condition-icon {
+      .icon-badge-wrapper {
         display: none;
       }
       @media (min-width: 870px) {
-        .condition-icon {
-          display: inline-block;
+        .icon-badge-wrapper {
+          display: inline-flex;
+          position: relative;
           color: var(--secondary-text-color);
           opacity: 0.9;
-          margin-right: 8px;
-          margin-inline-end: 8px;
-          margin-inline-start: initial;
         }
       }
       h3 {

src/panels/lovelace/editor/conditions/ha-visibility-status.ts

@@ -1,9 +1,10 @@
 import { consume } from "@lit/context";
 import { mdiAlertCircle, mdiEye, mdiEyeOff } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ConditionListenersController } from "../../../../common/controllers/condition-listeners-controller";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-svg-icon";
 import { HaRowItem } from "../../../../components/item/ha-row-item";
 import type { HomeAssistant } from "../../../../types";
@@ -28,17 +29,15 @@ const STATE_ICONS: Record<VisibilityState, string> = {
 
 /**
  * @element ha-visibility-status
- * @extends {HaRowItem}
  *
  * @summary
- * Row-style banner that surfaces the live visibility result for a set of
- * lovelace conditions. Replaces the static explanation alert at the top of
- * card / section / badge / conditional-card visibility editors.
+ * Alert banner that surfaces the live visibility result for a set of
+ * lovelace conditions.
  *
- * @attr {"visible"|"hidden"|"invalid"} state - Computed visibility state (reflected for styling).
+ * @attr {"visible"|"hidden"|"invalid"} state - Computed visibility state
  */
 @customElement("ha-visibility-status")
-export class HaVisibilityStatus extends HaRowItem {
+export class HaVisibilityStatus extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false })
@@ -48,7 +47,7 @@ export class HaVisibilityStatus extends HaRowItem {
   @consume({ context: conditionsEntityContext, subscribe: true })
   private _entityContext?: ConditionsEntityContext;
 
-  @property({ reflect: true })
+  @property()
   public state: VisibilityState = "visible";
 
   private _listeners = new ConditionListenersController(this);
@@ -71,23 +70,27 @@ export class HaVisibilityStatus extends HaRowItem {
     }
   }
 
-  protected override _renderInner(): TemplateResult {
+  public render() {
     return html`
-      <div part="start" class="start">
-        <ha-svg-icon .path=${STATE_ICONS[this.state]}></ha-svg-icon>
-      </div>
-      <div part="content" class="content">
-        <div part="headline" class="headline">
+      <ha-alert
+        .alertType=${this.state === "visible"
+          ? "success"
+          : this.state === "hidden"
+            ? "warning"
+            : "error"}
+      >
+        <ha-svg-icon slot="icon" .path=${STATE_ICONS[this.state]}></ha-svg-icon>
+        <div class="headline">
           ${this.hass?.localize(
             `ui.panel.lovelace.editor.condition-editor.visibility_status.${this.state}.headline`
           )}
         </div>
-        <div part="supporting-text" class="supporting">
+        <div class="supporting">
           ${this.hass?.localize(
             `ui.panel.lovelace.editor.condition-editor.visibility_status.${this.state}.supporting${(this.conditions?.length ?? 0) === 0 ? "_empty" : ""}`
           )}
         </div>
-      </div>
+      </ha-alert>
     `;
   }
 
@@ -117,37 +120,13 @@ export class HaVisibilityStatus extends HaRowItem {
   static styles: CSSResultGroup = [
     HaRowItem.styles,
     css`
-      :host {
+      ha-alert {
         display: block;
-        border-radius: var(--ha-border-radius-xl);
-        transition: background-color var(--ha-animation-duration-normal)
-          ease-in-out;
-      }
-      .base {
-        padding: var(--ha-space-4);
-      }
-      :host([state="visible"]) {
-        background-color: var(--ha-color-fill-success-quiet-resting);
-        --visibility-status-color: var(--ha-color-on-success-normal);
-      }
-      :host([state="hidden"]) {
-        background-color: var(--ha-color-fill-warning-quiet-resting);
-        --visibility-status-color: var(--ha-color-on-warning-normal);
-      }
-      :host([state="invalid"]) {
-        background-color: var(--ha-color-fill-danger-quiet-resting);
-        --visibility-status-color: var(--ha-color-on-danger-normal);
-      }
-      .start {
-        align-self: start;
-      }
-      .start ha-svg-icon {
-        color: var(--visibility-status-color);
         --mdc-icon-size: 24px;
       }
       .headline {
         font-weight: var(--ha-font-weight-medium);
-        white-space: normal;
+        margin-bottom: var(--ha-space-1);
       }
     `,
   ];

src/panels/lovelace/editor/config-elements/customizable-list-feature.ts

@@ -0,0 +1,59 @@
+import type { HaFormSchema } from "../../../../components/ha-form/types";
+
+interface CustomizableListSchemaParams {
+  field: string;
+  customize: boolean;
+  options: { value: string; label: string }[];
+}
+
+export const customizableListSchema = ({
+  field,
+  customize,
+  options,
+}: CustomizableListSchemaParams) =>
+  [
+    {
+      name: "customize",
+      selector: { boolean: {} },
+    },
+    ...(customize
+      ? ([
+          {
+            name: field,
+            selector: {
+              select: {
+                mode: "list",
+                reorder: true,
+                multiple: true,
+                options,
+              },
+            },
+          },
+        ] as const satisfies readonly HaFormSchema[])
+      : []),
+  ] as const satisfies readonly HaFormSchema[];
+
+// `customize` is form-only and never stored in the config.
+export const customizableListData = <T extends object>(
+  config: T,
+  field: string
+): T & { customize: boolean } => ({
+  ...config,
+  customize: (config as Record<string, unknown>)[field] !== undefined,
+});
+
+// Dropping the field lets the feature fall back to its own default.
+export const processCustomizableListValue = <T extends object>(
+  value: T & { customize?: boolean },
+  field: string,
+  defaults: readonly string[]
+): T => {
+  const { customize, ...rest } = value;
+  const config = rest as Record<string, unknown>;
+  if (customize && !config[field]) {
+    config[field] = [...defaults];
+  } else if (!customize) {
+    delete config[field];
+  }
+  return config as unknown as T;
+};

src/panels/lovelace/editor/config-elements/hui-counter-actions-card-feature-editor.ts

@@ -2,16 +2,20 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-form/ha-form";
 import type { HomeAssistant } from "../../../../types";
-import {
-  COUNTER_ACTIONS,
-  type LovelaceCardFeatureContext,
-  type CounterActionsCardFeatureConfig,
+import type {
+  CounterActionsCardFeatureConfig,
+  LovelaceCardFeatureContext,
 } from "../../card-features/types";
+import { COUNTER_ACTIONS } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
+import {
+  customizableListData,
+  customizableListSchema,
+  processCustomizableListValue,
+} from "./customizable-list-feature";
 
 @customElement("hui-counter-actions-card-feature-editor")
 export class HuiCounterActionsCardFeatureEditor
@@ -28,26 +32,17 @@ export class HuiCounterActionsCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
-      [
-        {
-          name: "actions",
-          selector: {
-            select: {
-              multiple: true,
-              mode: "list",
-              reorder: true,
-              options: COUNTER_ACTIONS.map((action) => ({
-                value: action,
-                label: `${localize(
-                  `ui.panel.lovelace.editor.features.types.counter-actions.actions.${action}`
-                )}`,
-              })),
-            },
-          },
-        },
-      ] as const
+  private _schema = memoizeOne((customize: boolean) =>
+    customizableListSchema({
+      field: "actions",
+      customize,
+      options: COUNTER_ACTIONS.map((action) => ({
+        value: action,
+        label: this.hass!.localize(
+          `ui.panel.lovelace.editor.features.types.counter-actions.actions_list.${action}`
+        ),
+      })),
+    })
   );
 
   protected render() {
@@ -55,12 +50,13 @@ export class HuiCounterActionsCardFeatureEditor
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize);
+    const data = customizableListData(this._config, "actions");
+    const schema = this._schema(data.customize);
 
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -69,19 +65,21 @@ export class HuiCounterActionsCardFeatureEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const config =
+      processCustomizableListValue<CounterActionsCardFeatureConfig>(
+        ev.detail.value,
+        "actions",
+        COUNTER_ACTIONS
+      );
+    fireEvent(this, "config-changed", { config });
   }
 
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
-    switch (schema.name) {
-      default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
-    }
-  };
+  ) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.features.types.counter-actions.${schema.name}`
+    );
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-lawn-mower-commands-card-feature-editor.ts

@@ -3,7 +3,6 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-form/ha-form";
 import type { HomeAssistant } from "../../../../types";
@@ -14,6 +13,11 @@ import type {
 } from "../../card-features/types";
 import { LAWN_MOWER_COMMANDS } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
+import {
+  customizableListData,
+  customizableListSchema,
+  processCustomizableListValue,
+} from "./customizable-list-feature";
 
 @customElement("hui-lawn-mower-commands-card-feature-editor")
 export class HuiLawnMowerCommandsCardFeatureEditor
@@ -31,27 +35,19 @@ export class HuiLawnMowerCommandsCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, stateObj?: HassEntity) =>
-      [
-        {
-          name: "commands",
-          selector: {
-            select: {
-              multiple: true,
-              mode: "list",
-              options: LAWN_MOWER_COMMANDS.filter(
-                (command) =>
-                  stateObj && supportsLawnMowerCommand(stateObj, command)
-              ).map((command) => ({
-                value: command,
-                label: `${localize(
-                  `ui.panel.lovelace.editor.features.types.lawn-mower-commands.commands_list.${command}`
-                )}`,
-              })),
-            },
-          },
-        },
-      ] as const
+    (stateObj: HassEntity | undefined, customize: boolean) =>
+      customizableListSchema({
+        field: "commands",
+        customize,
+        options: LAWN_MOWER_COMMANDS.filter(
+          (command) => stateObj && supportsLawnMowerCommand(stateObj, command)
+        ).map((command) => ({
+          value: command,
+          label: this.hass!.localize(
+            `ui.panel.lovelace.editor.features.types.lawn-mower-commands.commands_list.${command}`
+          ),
+        })),
+      })
   );
 
   protected render() {
@@ -60,15 +56,16 @@ export class HuiLawnMowerCommandsCardFeatureEditor
     }
 
     const stateObj = this.context?.entity_id
-      ? this.hass.states[this.context?.entity_id]
+      ? this.hass.states[this.context.entity_id]
       : undefined;
 
-    const schema = this._schema(this.hass.localize, stateObj);
+    const data = customizableListData(this._config, "commands");
+    const schema = this._schema(stateObj, data.customize);
 
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -77,23 +74,27 @@ export class HuiLawnMowerCommandsCardFeatureEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const stateObj = this.context?.entity_id
+      ? this.hass!.states[this.context.entity_id]
+      : undefined;
+    const defaults = LAWN_MOWER_COMMANDS.filter(
+      (command) => stateObj && supportsLawnMowerCommand(stateObj, command)
+    );
+    const config =
+      processCustomizableListValue<LawnMowerCommandsCardFeatureConfig>(
+        ev.detail.value,
+        "commands",
+        defaults
+      );
+    fireEvent(this, "config-changed", { config });
   }
 
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
-    switch (schema.name) {
-      case "commands":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.features.types.lawn-mower-commands.${schema.name}`
-        );
-      default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
-    }
-  };
+  ) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.features.types.lawn-mower-commands.${schema.name}`
+    );
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-vacuum-commands-card-feature-editor.ts

@@ -3,17 +3,24 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-form/ha-form";
 import type { HomeAssistant } from "../../../../types";
-import { supportsVacuumCommand } from "../../card-features/hui-vacuum-commands-card-feature";
+import {
+  supportsVacuumCommand,
+  VACUUM_DEFAULT_COMMANDS,
+} from "../../card-features/hui-vacuum-commands-card-feature";
 import type {
   LovelaceCardFeatureContext,
   VacuumCommandsCardFeatureConfig,
 } from "../../card-features/types";
 import { VACUUM_COMMANDS } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
+import {
+  customizableListData,
+  customizableListSchema,
+  processCustomizableListValue,
+} from "./customizable-list-feature";
 
 @customElement("hui-vacuum-commands-card-feature-editor")
 export class HuiVacuumCommandsCardFeatureEditor
@@ -31,27 +38,19 @@ export class HuiVacuumCommandsCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, stateObj?: HassEntity) =>
-      [
-        {
-          name: "commands",
-          selector: {
-            select: {
-              multiple: true,
-              mode: "list",
-              options: VACUUM_COMMANDS.filter(
-                (command) =>
-                  stateObj && supportsVacuumCommand(stateObj, command)
-              ).map((command) => ({
-                value: command,
-                label: `${localize(
-                  `ui.panel.lovelace.editor.features.types.vacuum-commands.commands_list.${command}`
-                )}`,
-              })),
-            },
-          },
-        },
-      ] as const
+    (stateObj: HassEntity | undefined, customize: boolean) =>
+      customizableListSchema({
+        field: "commands",
+        customize,
+        options: VACUUM_COMMANDS.filter(
+          (command) => stateObj && supportsVacuumCommand(stateObj, command)
+        ).map((command) => ({
+          value: command,
+          label: this.hass!.localize(
+            `ui.panel.lovelace.editor.features.types.vacuum-commands.commands_list.${command}`
+          ),
+        })),
+      })
   );
 
   protected render() {
@@ -60,15 +59,16 @@ export class HuiVacuumCommandsCardFeatureEditor
     }
 
     const stateObj = this.context?.entity_id
-      ? this.hass.states[this.context?.entity_id]
+      ? this.hass.states[this.context.entity_id]
       : undefined;
 
-    const schema = this._schema(this.hass.localize, stateObj);
+    const data = customizableListData(this._config, "commands");
+    const schema = this._schema(stateObj, data.customize);
 
     return html`
       <ha-form
         .hass=${this.hass}
-        .data=${this._config}
+        .data=${data}
         .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -77,23 +77,27 @@ export class HuiVacuumCommandsCardFeatureEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const stateObj = this.context?.entity_id
+      ? this.hass!.states[this.context.entity_id]
+      : undefined;
+    const defaults = VACUUM_DEFAULT_COMMANDS.filter(
+      (command) => stateObj && supportsVacuumCommand(stateObj, command)
+    );
+    const config =
+      processCustomizableListValue<VacuumCommandsCardFeatureConfig>(
+        ev.detail.value,
+        "commands",
+        defaults
+      );
+    fireEvent(this, "config-changed", { config });
   }
 
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
-    switch (schema.name) {
-      case "commands":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.features.types.vacuum-commands.${schema.name}`
-        );
-      default:
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.generic.${schema.name}`
-        );
-    }
-  };
+  ) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.features.types.vacuum-commands.${schema.name}`
+    );
 }
 
 declare global {

src/panels/lovelace/hui-root.ts

@@ -1105,11 +1105,11 @@ class HUIRoot extends LitElement {
     const lovelace = this.lovelace!;
     const oldIndex = this._curView as number;
     const newIndex = (this._curView as number) - 1;
-    this._curView = newIndex;
     if (!this.config.views[oldIndex].path) {
       this._navigateToView(newIndex, true);
     }
     lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
+    this._selectView(newIndex);
   }
 
   private _moveViewRight(ev) {
@@ -1120,11 +1120,11 @@ class HUIRoot extends LitElement {
     const lovelace = this.lovelace!;
     const oldIndex = this._curView as number;
     const newIndex = (this._curView as number) + 1;
-    this._curView = newIndex;
     if (!this.config.views[oldIndex].path) {
       this._navigateToView(newIndex, true);
     }
     lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
+    this._selectView(newIndex);
   }
 
   private _addView() {

src/resources/echarts/echarts.ts

@@ -67,6 +67,14 @@ export type ECOption = ComposeOption<
   | SunburstSeriesOption
 >;
 
+export type {
+  HaECOption,
+  HaECSeries,
+  HaECSeriesItem,
+  HaTooltipOption,
+  LitTooltipFormatter,
+} from "./ha-ec-option";
+
 // Register the required components
 echarts.use([
   BarChart,

src/resources/echarts/ha-ec-option.ts

@@ -0,0 +1,33 @@
+import type { TemplateResult, nothing } from "lit";
+import type { TooltipOption } from "echarts/types/dist/shared";
+import type { ECOption } from "./echarts";
+
+export type LitTooltipFormatter<P = any> = (
+  params: P,
+  ticket?: string
+) => TemplateResult | typeof nothing | null | undefined;
+
+export type HaTooltipOption = Omit<TooltipOption, "formatter"> & {
+  formatter?: string | LitTooltipFormatter;
+};
+
+type RawSeriesOption = Exclude<
+  NonNullable<ECOption["series"]>,
+  readonly unknown[]
+>;
+
+/** Single series item with optional Lit tooltip formatter */
+export type HaECSeriesItem = Omit<RawSeriesOption, "tooltip"> & {
+  tooltip?: HaTooltipOption;
+};
+
+/** Series array passed to ha-chart-base `.data` */
+export type HaECSeries = HaECSeriesItem[];
+
+export type HaECOption = {
+  [K in keyof ECOption]: K extends "tooltip"
+    ? HaTooltipOption | HaTooltipOption[] | undefined
+    : K extends "series"
+      ? HaECSeriesItem | HaECSeriesItem[] | undefined
+      : ECOption[K];
+};

src/state/url-sync-mixin.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import type { ReactiveElement, PropertyValues } from "lit";
+import { fireEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
 import { closeLastDialog } from "../dialogs/make-dialog-manager";
 import type { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
@@ -38,6 +39,21 @@ export const urlSyncMixin = <
         protected firstUpdated(changedProperties: PropertyValues<this>): void {
           super.firstUpdated(changedProperties);
           if (mainWindow.history.state?.dialog) {
+            const refreshUrl = mainWindow.history.state.refreshUrl;
+            if (typeof refreshUrl === "string") {
+              // Page was refreshed while a dialog had stashed an intended
+              // destination URL. Clean up the stale dialog state and route
+              // to the intended URL. We bypass navigate() because its
+              // ensureDialogsClosed loop would spin until timeout on the
+              // dangling state.dialog with no actual dialog open.
+              mainWindow.history.replaceState(null, "", refreshUrl);
+              // Defer: the host element's firstUpdated registers the
+              // location-changed listener after super.firstUpdated() returns.
+              setTimeout(() => {
+                fireEvent(mainWindow, "location-changed", { replace: true });
+              });
+              return;
+            }
             // this is a page refresh with a dialog open
             // the dialog stack must be empty in this case so this state should be cleaned up
             mainWindow.history.back();

src/translations/en.json

@@ -1693,14 +1693,17 @@
           "last_triggered": "Last triggered"
         },
         "add_to": {
-          "title": "Add to",
-          "actions": {
-            "automation_trigger": "Create new automation using {target} as a trigger",
-            "automation_condition": "Create new automation using {target} as a condition",
-            "automation_action": "Create new automation using {target} in an action",
-            "script_action": "Create new script using {target} in an action",
-            "scene": "Create new scene using {target}"
+          "title": "Add {target} to…",
+          "item": "Add to…",
+          "action_options": {
+            "automation_trigger": "Create as a new trigger",
+            "automation_condition": "Create as a new condition",
+            "automation_action": "Create as a new action",
+            "script_action": "Create as a new action",
+            "scene": "Create as a new scene"
           },
+          "automations_heading": "Automations",
+          "scripts_heading": "Scripts",
           "app_actions": "App actions",
           "no_actions": "No actions available",
           "action_failed": "Failed to perform the action {error}"
@@ -5575,7 +5578,7 @@
                   "sunset": "Sunset",
                   "description": {
                     "picker": "Tests if the sun is above or below the horizon.",
-                    "between": "Between {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n} and {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n}",
+                    "between": "Between {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n} and {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n}",
                     "before": "Before {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n}",
                     "after": "After {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n}"
                   }
@@ -10150,6 +10153,7 @@
               },
               "vacuum-commands": {
                 "label": "Vacuum commands",
+                "customize": "Customize commands",
                 "commands": "Commands",
                 "commands_list": {
                   "start_pause": "[%key:ui::dialogs::more_info_control::vacuum::start_pause%]",
@@ -10221,7 +10225,9 @@
               },
               "counter-actions": {
                 "label": "Counter actions",
-                "actions": {
+                "customize": "Customize actions",
+                "actions": "Actions",
+                "actions_list": {
                   "increment": "Increment",
                   "decrement": "Decrement",
                   "reset": "Reset"
@@ -10284,6 +10290,7 @@
               },
               "lawn-mower-commands": {
                 "label": "Lawn mower commands",
+                "customize": "Customize commands",
                 "commands": "Commands",
                 "commands_list": {
                   "start_pause": "Start Pause",

test/components/chart/lit-tooltip-formatter.test.ts

@@ -0,0 +1,38 @@
+import { html, nothing } from "lit";
+import { describe, expect, it } from "vitest";
+import type { LitTooltipFormatter } from "../../../src/resources/echarts/echarts";
+import { wrapLitTooltipFormatter } from "../../../src/components/chart/lit-tooltip-formatter";
+
+describe("wrapLitTooltipFormatter", () => {
+  it("renders TemplateResult into a stable container", () => {
+    const formatter = () => html`<b>Hello</b>`;
+    const wrapped = wrapLitTooltipFormatter(formatter);
+    const first = wrapped({});
+    const second = wrapped({});
+
+    expect(first).toBe(second);
+    expect(first?.tagName).toBe("DIV");
+    expect(first?.style.display).toBe("contents");
+    expect(first?.textContent).toContain("Hello");
+  });
+
+  it("returns null for nothing, null, and undefined", () => {
+    const returnNothing: LitTooltipFormatter = () => nothing;
+    expect(wrapLitTooltipFormatter(returnNothing)({})).toBeNull();
+    expect(wrapLitTooltipFormatter(() => null)({})).toBeNull();
+    expect(wrapLitTooltipFormatter(() => undefined)({})).toBeNull();
+  });
+
+  it("returns the same wrapped function for the same formatter", () => {
+    const formatter = () => html`x`;
+    expect(wrapLitTooltipFormatter(formatter)).toBe(
+      wrapLitTooltipFormatter(formatter)
+    );
+  });
+
+  it("does not double-wrap an already wrapped formatter", () => {
+    const formatter = () => html`x`;
+    const wrapped = wrapLitTooltipFormatter(formatter);
+    expect(wrapLitTooltipFormatter(wrapped)).toBe(wrapped);
+  });
+});