Position chart tooltip beside cursor instead of over data point

* add a possibility to customize color

* add a possibility to customize color

* add GraphEntityConfig

* add basic color support

---------

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

build-scripts/bundle.cjs

@@ -1,3 +1,4 @@
+/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -176,11 +177,14 @@ module.exports.babelOptions = ({
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
       // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
+      // (otherwise babel-plugin-polyfill-corejs3 injects bare require("core-js/modules/...") calls
+      // that rspack does not transform, causing ReferenceError in browsers like Safari 14).
       sourceType: "unambiguous",
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
         "@?lit(?:-labs|-element|-html)?",
+        "@formatjs/(?:ecma402-abstract|intl-\\w+)",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },
   ],

build-scripts/get-built-in-node-module-shim.cjs

@@ -0,0 +1,12 @@
+/* global module */
+// Browser-only replacement for core-js/internals/get-built-in-node-module.
+// The original helper evaluates `Function('return require("...")')()`
+// when it detects a Node environment, which causes a runtime
+// ReferenceError on browsers (notably Safari 14) if environment
+// detection mis-classifies the page. Since browser bundles never need to
+// access Node built-in modules, return undefined unconditionally.
+//
+// Wired up via rspack `NormalModuleReplacementPlugin` in build-scripts/rspack.cjs.
+module.exports = function () {
+  return undefined;
+};

build-scripts/rspack.cjs

@@ -1,3 +1,4 @@
+/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -173,6 +174,16 @@ const createRspackConfig = ({
             path.resolve(paths.root_dir, "src/util/empty.js")
           )
         : false,
+      // core-js ships a Node-only helper that evaluates
+      // `Function('return require("...")')()` when its runtime environment
+      // detection mis-classifies the page as Node. That produces a
+      // ReferenceError on browsers (observed on Safari 14). Since browser
+      // bundles never need to access Node built-in modules, replace it with
+      // a CommonJS no-op stub matching the helper's API (returns undefined).
+      new rspack.NormalModuleReplacementPlugin(
+        /core-js[\\/]internals[\\/]get-built-in-node-module(?:\.js)?$/,
+        path.resolve(__dirname, "get-built-in-node-module-shim.cjs")
+      ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({

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

@@ -42,7 +42,7 @@ class HcDemo extends HassElement {
         this._updateHass(hassUpdate),
     };
 
-    const hass = (this.hass = provideHass(this, initial));
+    const hass = provideHass(this, initial, true);
 
     mockHistory(hass);
 

demo/src/ha-demo.ts

@@ -39,7 +39,7 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = (this.hass = provideHass(this, initial));
+    const hass = provideHass(this, initial, true);
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/lovelace.ts

@@ -1,4 +1,5 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
+import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
   selectedDemoConfig,
@@ -27,6 +28,9 @@ export const mockLovelace = (
     );
   });
 
+  hass.mockWS("lovelace/info", () =>
+    Promise.resolve({ resource_mode: "storage" } as LovelaceInfo)
+  );
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
   hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));

demo/src/stubs/sensor.ts

@@ -1,58 +1,56 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS("sensor/numeric_device_classes", () => [
-    {
-      numeric_device_classes: [
-        "volume_storage",
-        "gas",
-        "data_size",
-        "irradiance",
-        "wind_speed",
-        "volatile_organic_compounds",
-        "volatile_organic_compounds_parts",
-        "voltage",
-        "frequency",
-        "precipitation_intensity",
-        "volume",
-        "precipitation",
-        "battery",
-        "nitrogen_dioxide",
-        "speed",
-        "signal_strength",
-        "pm1",
-        "nitrous_oxide",
-        "atmospheric_pressure",
-        "data_rate",
-        "temperature",
-        "power_factor",
-        "aqi",
-        "current",
-        "volume_flow_rate",
-        "humidity",
-        "duration",
-        "ozone",
-        "distance",
-        "pressure",
-        "pm25",
-        "weight",
-        "energy",
-        "carbon_monoxide",
-        "apparent_power",
-        "illuminance",
-        "energy_storage",
-        "moisture",
-        "power",
-        "water",
-        "carbon_dioxide",
-        "ph",
-        "reactive_power",
-        "monetary",
-        "nitrogen_monoxide",
-        "pm10",
-        "sound_pressure",
-        "sulphur_dioxide",
-      ],
-    },
-  ]);
+  hass.mockWS("sensor/numeric_device_classes", () => ({
+    numeric_device_classes: [
+      "volume_storage",
+      "gas",
+      "data_size",
+      "irradiance",
+      "wind_speed",
+      "volatile_organic_compounds",
+      "volatile_organic_compounds_parts",
+      "voltage",
+      "frequency",
+      "precipitation_intensity",
+      "volume",
+      "precipitation",
+      "battery",
+      "nitrogen_dioxide",
+      "speed",
+      "signal_strength",
+      "pm1",
+      "nitrous_oxide",
+      "atmospheric_pressure",
+      "data_rate",
+      "temperature",
+      "power_factor",
+      "aqi",
+      "current",
+      "volume_flow_rate",
+      "humidity",
+      "duration",
+      "ozone",
+      "distance",
+      "pressure",
+      "pm25",
+      "weight",
+      "energy",
+      "carbon_monoxide",
+      "apparent_power",
+      "illuminance",
+      "energy_storage",
+      "moisture",
+      "power",
+      "water",
+      "carbon_dioxide",
+      "ph",
+      "reactive_power",
+      "monetary",
+      "nitrogen_monoxide",
+      "pm10",
+      "sound_pressure",
+      "sulphur_dioxide",
+    ],
+  }));
 };

gallery/src/pages/components/ha-list.markdown

@@ -0,0 +1,188 @@
+---
+title: List
+---
+
+# List
+
+The list family provides accessible, keyboard-navigable list containers and
+item variants. Pick the container based on semantics, then the item based on
+interactivity.
+
+## Containers
+
+### `<ha-list-base>`
+
+A styled container with roving-tabindex keyboard navigation. Host role is
+`list`. Children should be `<ha-list-item-*>`. Arrow keys rove focus;
+Home/End jump to the first/last enabled item; Enter/Space activates the
+focused item.
+
+**Attributes**
+
+| Name         | Type    | Default | Description                    |
+| ------------ | ------- | ------- | ------------------------------ |
+| `wrap-focus` | Boolean | `false` | Arrow keys wrap past the ends. |
+| `aria-label` | String  | —       | Accessible name.               |
+
+**Events**
+
+- `ha-list-activated` — Enter/Space on a focused item. Detail
+  `{ index: number, item: HaListItemBase }`.
+
+**Methods**
+
+- `focus()` — focus the active item (or the first focusable one).
+- `focusItemAtIndex(index)` — make the item at `index` active and focus it.
+- `getActiveItemIndex()` — current active index, or `-1`.
+- `setActiveItemIndex(index, focusItem?)` — move the active index without
+  necessarily focusing.
+- `updateListItems()` — re-discover slotted items (called automatically on
+  slotchange).
+
+**CSS parts**
+
+- `base` — the outer `<div role="list">`.
+
+**CSS custom properties**
+
+- `--ha-list-gap` — spacing between items. Defaults to `0`.
+- `--ha-list-padding` — padding around the list. Defaults to `0`.
+
+### `<ha-list-selectable>`
+
+Selectable list. Extends `ha-list-base`. Host role is `listbox`; items must be
+`<ha-list-item-option>` (role `option`). Set `multi` for multi-select; the
+host reflects `aria-multiselectable`.
+
+**Attributes**
+
+| Name    | Type    | Default | Description                            |
+| ------- | ------- | ------- | -------------------------------------- |
+| `multi` | Boolean | `false` | Allow multiple options to be selected. |
+
+**Events**
+
+- `ha-list-selected` — selection changed. Detail
+  `{ index: number | Set<number>, diff: { added: Set<number>, removed: Set<number> } }`.
+  `index` is a `number` in single mode (`-1` when nothing selected) and a
+  `Set<number>` in multi mode.
+
+**Methods / getters**
+
+- `selected` (getter) — current selection (`number` or `Set<number>`).
+- `selectedItems` (getter) — selected `HaListItemOption` elements, in index
+  order.
+- `setSelected(indices)` — replace the entire selection.
+- `select(index)` — add `index` to the selection (replaces in single mode).
+- `toggle(index, force?)` — toggle a single index, or force on/off.
+- `clearSelection()` — clear all.
+
+### `<ha-list-nav>`
+
+Same as `ha-list-base`, but wrapped in a `<nav>` landmark
+(`<nav><div role="list">…</div></nav>`). Use `aria-label` to name the
+landmark — the value is forwarded to the inner `<nav>`. Items should be
+`<ha-list-item-button>` with an `href`.
+
+**CSS parts**
+
+- `nav` — the `<nav>` wrapper.
+- `base` — the inner `<div role="list">`.
+
+## Items
+
+All items inherit from `ha-row-item`, which provides the row layout and the
+shared slots/attributes below.
+
+### Shared row layout (`ha-row-item`)
+
+**Slots**
+
+- `start` — leading container (icon/avatar).
+- `end` — trailing container (meta/chevron).
+- `headline` — primary text (overrides the `headline` attribute).
+- `supporting-text` — secondary text (overrides the `supporting-text` attribute).
+- `content` — escape hatch: replaces the entire middle column.
+
+**Attributes**
+
+| Name              | Type    | Default | Description                             |
+| ----------------- | ------- | ------- | --------------------------------------- |
+| `headline`        | String  | —       | Primary text. Overridden by the slot.   |
+| `supporting-text` | String  | —       | Secondary text. Overridden by the slot. |
+| `disabled`        | Boolean | `false` | Dims the row and blocks pointer events. |
+
+**CSS parts**
+
+`base`, `start`, `content`, `headline`, `supporting-text`, `end`.
+
+**CSS custom properties**
+
+- `--ha-row-item-padding-block` — vertical padding.
+- `--ha-row-item-padding-inline` — horizontal padding.
+- `--ha-row-item-gap` — gap between `start`, `content`, and `end`.
+- `--ha-row-item-min-height` — minimum row height (default `48px`).
+
+### `<ha-list-item-base>`
+
+Non-interactive list row. Host role is `listitem`. Inherits everything from
+`ha-row-item`.
+
+**Attributes**
+
+- `interactive` (Boolean, default `false`) — opt this row into the parent
+  list's roving tabindex. Useful for sortable rows that need keyboard focus
+  but no click action. Interactive subclasses set this automatically.
+
+**CSS custom properties**
+
+- `--ha-list-item-focus-radius` — focus outline border-radius.
+- `--ha-list-item-focus-width` — focus outline width (steady state).
+- `--ha-list-item-focus-width-start` — focus outline width at the start of
+  the focus-in animation.
+- `--ha-list-item-focus-offset` — focus outline offset.
+- `--ha-list-item-focus-background` — background color on keyboard focus.
+
+### `<ha-list-item-button>`
+
+Interactive row. Renders an inner `<a>` when `href` is set, otherwise a
+`<button>`. The full row is the hit target. When placed inside a list using
+roving tabindex, the host is the tab stop and the inner element carries
+`tabindex="-1"`.
+
+**Attributes**
+
+- `href` (String) — when set, renders an `<a>` instead of a `<button>`.
+- `target` (String) — anchor `target` (requires `href`).
+- `rel` (String) — anchor `rel` (requires `href`).
+- `download` (String) — anchor `download` (requires `href`).
+
+**CSS parts**
+
+- `ripple` — the ripple effect element.
+
+### `<ha-list-item-option>`
+
+Selectable row. Host role is `option`; reflects `aria-selected`. Designed to
+sit inside `<ha-list-selectable>`, which owns selection state and toggles
+`selected` on this item — the option itself does not fire selection events.
+
+**Attributes**
+
+- `selected` (Boolean, default `false`, reflected) — set by the parent
+  `ha-list-selectable`.
+- `value` (String) — value identifying the option.
+- `appearance` (`"line"` | `"checkbox"`, default `"line"`) — `"line"`
+  highlights the row; `"checkbox"` renders a decorative `<ha-checkbox>`.
+- `selection-position` (`"start"` | `"end"`, default `"start"`) — side the
+  checkbox sits on when `appearance="checkbox"`.
+
+**CSS parts**
+
+- `checkbox` — wrapper around the `<ha-checkbox>` when `appearance="checkbox"`.
+- `ripple` — the ripple effect element.
+
+**CSS custom properties**
+
+- `--ha-list-item-selected-background` — background color when selected
+  (`appearance="line"`).

gallery/src/pages/components/ha-list.ts

@@ -0,0 +1,415 @@
+import {
+  mdiAccount,
+  mdiChevronRight,
+  mdiCog,
+  mdiHome,
+  mdiInformationOutline,
+  mdiMapMarker,
+  mdiOpenInNew,
+  mdiViewDashboard,
+  mdiWifi,
+} from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/item/ha-list-item-base";
+import "../../../../src/components/item/ha-list-item-button";
+import "../../../../src/components/item/ha-list-item-option";
+import "../../../../src/components/list/ha-list-base";
+import "../../../../src/components/list/ha-list-nav";
+import "../../../../src/components/list/ha-list-selectable";
+import type { HaListSelectedDetail } from "../../../../src/components/list/types";
+
+type Appearance = "line" | "checkbox";
+type Position = "start" | "end";
+
+const appearances: Appearance[] = ["line", "checkbox"];
+const positions: Position[] = ["start", "end"];
+const selectedStates = [false, true];
+const disabledStates = [false, true];
+
+@customElement("demo-components-ha-list")
+export class DemoHaList extends LitElement {
+  @state() private _buttonClicks = 0;
+
+  @state() private _single: number | Set<number> = -1;
+
+  @state() private _multiLine: number | Set<number> = new Set();
+
+  @state() private _multiCheckStart: number | Set<number> = new Set();
+
+  @state() private _multiCheckEnd: number | Set<number> = new Set();
+
+  private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];
+
+  protected render(): TemplateResult {
+    return html`
+      <h2>ha-list-base</h2>
+      <p>
+        Styled container with keyboard focus navigation. Children should be
+        <code>ha-list-item-*</code>.
+      </p>
+
+      <ha-card header="Info list (non-interactive rows)">
+        <ha-list-base aria-label="Device info">
+          <ha-list-item-base
+            headline="IP address"
+            supporting-text="192.168.1.42"
+          >
+            <ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Location" supporting-text="Living room">
+            <ha-svg-icon slot="start" .path=${mdiMapMarker}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Firmware" supporting-text="2026.4.1">
+            <ha-svg-icon
+              slot="start"
+              .path=${mdiInformationOutline}
+            ></ha-svg-icon>
+          </ha-list-item-base>
+        </ha-list-base>
+      </ha-card>
+
+      <ha-card header="Vertical list (default)">
+        <ha-list-base aria-label="Example list">
+          <ha-list-item-button>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <span slot="headline">First row</span>
+            <span slot="supporting-text">Supporting text</span>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <ha-svg-icon slot="start" .path=${mdiAccount}></ha-svg-icon>
+            <span slot="headline">Second row</span>
+          </ha-list-item-button>
+          <ha-list-item-button disabled>
+            <span slot="headline">Disabled row</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">Fourth row</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <ha-card header="Vertical list with wrap-focus">
+        <ha-list-base wrap-focus aria-label="Wrap focus">
+          <ha-list-item-button>
+            <span slot="headline">A</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">B</span>
+          </ha-list-item-button>
+          <ha-list-item-button>
+            <span slot="headline">C</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-item-base</h2>
+      <p>Non-interactive base row with slot permutations.</p>
+
+      <ha-card header="Slot permutations">
+        <ha-list-base aria-label="Slot permutations">
+          <ha-list-item-base headline="Headline only"></ha-list-item-base>
+          <ha-list-item-base
+            headline="Headline"
+            supporting-text="Supporting text"
+          ></ha-list-item-base>
+          <ha-list-item-base headline="Start + headline">
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Start + headline + end">
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base
+            headline="Full row"
+            supporting-text="All slots filled"
+          >
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+          </ha-list-item-base>
+          <ha-list-item-base>
+            <div slot="content" class="custom-content">
+              <strong>Custom content escape hatch</strong>
+              <span>Replaces the whole middle column</span>
+            </div>
+          </ha-list-item-base>
+          <ha-list-item-base headline="Disabled row" disabled>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+          </ha-list-item-base>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-item-button</h2>
+      <p>
+        Interactive row. Renders an inner <code>&lt;a&gt;</code> when
+        <code>href</code> is set, otherwise a <code>&lt;button&gt;</code>.
+      </p>
+
+      <ha-card header="Button (default) / link (with href)">
+        <ha-list-base aria-label="Button items">
+          <ha-list-item-button @click=${this._onButtonClick}>
+            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
+            <span slot="headline">Button (clicks: ${this._buttonClicks})</span>
+          </ha-list-item-button>
+          <ha-list-item-button
+            href="https://www.home-assistant.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ha-svg-icon slot="start" .path=${mdiOpenInNew}></ha-svg-icon>
+            <span slot="headline">Link (opens in new tab)</span>
+            <span slot="supporting-text"
+              >Cmd/Ctrl-click still opens in new tab</span
+            >
+          </ha-list-item-button>
+          <ha-list-item-button disabled>
+            <span slot="headline">Disabled button</span>
+          </ha-list-item-button>
+          <ha-list-item-button href="#nope" disabled>
+            <span slot="headline">Disabled link</span>
+          </ha-list-item-button>
+        </ha-list-base>
+      </ha-card>
+
+      <h2>ha-list-selectable + ha-list-item-option</h2>
+      <p>
+        Selectable list (<code>role="listbox"</code>). Items must be
+        <code>ha-list-item-option</code>. Set <code>multi</code> for
+        multi-select.
+      </p>
+
+      <ha-card header="Single select, appearance=line">
+        <ha-list-selectable
+          aria-label="Single select"
+          @ha-list-selected=${this._onSingle}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                .value=${o}
+                ?selected=${this._isSel(this._single, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify(this._toJson(this._single))}</pre>
+      </ha-card>
+
+      <ha-card header="Multi select, appearance=line">
+        <ha-list-selectable
+          multi
+          aria-label="Multi select line"
+          @ha-list-selected=${this._onMultiLine}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                .value=${o}
+                ?selected=${this._isSel(this._multiLine, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>selected: ${JSON.stringify(this._toJson(this._multiLine))}</pre>
+      </ha-card>
+
+      <ha-card
+        header='Multi select, appearance=checkbox, selection-position="start"'
+      >
+        <ha-list-selectable
+          multi
+          aria-label="Multi checkbox start"
+          @ha-list-selected=${this._onMultiCheckStart}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="start"
+                .value=${o}
+                ?selected=${this._isSel(this._multiCheckStart, i)}
+              >
+                <span slot="headline">${o}</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
+        >
+      </ha-card>
+
+      <ha-card
+        header='Multi select, appearance=checkbox, selection-position="end"'
+      >
+        <ha-list-selectable
+          multi
+          aria-label="Multi checkbox end"
+          @ha-list-selected=${this._onMultiCheckEnd}
+        >
+          ${this._options.map(
+            (o, i) => html`
+              <ha-list-item-option
+                appearance="checkbox"
+                selection-position="end"
+                .value=${o}
+                ?selected=${this._isSel(this._multiCheckEnd, i)}
+              >
+                <span slot="headline">${o}</span>
+                <span slot="supporting-text">${o.length} characters</span>
+              </ha-list-item-option>
+            `
+          )}
+        </ha-list-selectable>
+        <pre>
+selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
+        >
+      </ha-card>
+
+      <ha-card header="Option: all combinations">
+        <div class="grid">
+          ${appearances.map((appearance) =>
+            positions.map((position) =>
+              selectedStates.map((selected) =>
+                disabledStates.map(
+                  (disabled) => html`
+                    <div role="listbox" class="wrap" aria-label="single option">
+                      <ha-list-item-option
+                        appearance=${appearance}
+                        selection-position=${position}
+                        ?selected=${selected}
+                        ?disabled=${disabled}
+                      >
+                        <span slot="headline"
+                          >${appearance} / pos=${position}</span
+                        >
+                        <span slot="supporting-text"
+                          >selected=${String(selected)}
+                          disabled=${String(disabled)}</span
+                        >
+                      </ha-list-item-option>
+                    </div>
+                  `
+                )
+              )
+            )
+          )}
+        </div>
+      </ha-card>
+
+      <h2>ha-list-nav</h2>
+      <p>
+        Same as <code>ha-list-base</code> but wrapped in a
+        <code>&lt;nav&gt;</code> landmark.
+      </p>
+
+      <ha-card header="Sidebar-style navigation">
+        <ha-list-nav aria-label="Primary navigation">
+          ${[
+            { name: "Overview", path: "#overview", icon: mdiHome },
+            { name: "Dashboards", path: "#dashboards", icon: mdiViewDashboard },
+            { name: "Map", path: "#map", icon: mdiMapMarker },
+            { name: "Settings", path: "#settings", icon: mdiCog },
+          ].map(
+            (p) => html`
+              <ha-list-item-button .href=${p.path}>
+                <ha-svg-icon slot="start" .path=${p.icon}></ha-svg-icon>
+                <span slot="headline">${p.name}</span>
+                <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
+              </ha-list-item-button>
+            `
+          )}
+        </ha-list-nav>
+      </ha-card>
+    `;
+  }
+
+  private _isSel(value: number | Set<number>, index: number): boolean {
+    if (typeof value === "number") {
+      return value === index;
+    }
+    return value.has(index);
+  }
+
+  private _toJson(value: number | Set<number>): unknown {
+    return value instanceof Set ? [...value] : value;
+  }
+
+  private _onButtonClick = () => {
+    this._buttonClicks++;
+  };
+
+  private _onSingle = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._single = ev.detail.index;
+  };
+
+  private _onMultiLine = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiLine = ev.detail.index;
+  };
+
+  private _onMultiCheckStart = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiCheckStart = ev.detail.index;
+  };
+
+  private _onMultiCheckEnd = (ev: CustomEvent<HaListSelectedDetail>) => {
+    this._multiCheckEnd = ev.detail.index;
+  };
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-4);
+      padding: var(--ha-space-6);
+    }
+    h2 {
+      margin: var(--ha-space-4) 0 0;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-medium);
+    }
+    p {
+      margin: 0 0 var(--ha-space-2);
+      color: var(--secondary-text-color);
+    }
+    ha-card {
+      max-width: 560px;
+    }
+    pre {
+      padding: var(--ha-space-4);
+      background: var(--secondary-background-color);
+      margin: 0;
+    }
+    .custom-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-1);
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--ha-space-3);
+      padding: var(--ha-space-3);
+    }
+    .wrap {
+      border: 1px solid var(--divider-color);
+      border-radius: var(--ha-border-radius-sm);
+    }
+    .drag-handle {
+      cursor: grab;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-list": DemoHaList;
+  }
+}

gallery/src/pages/components/ha-select-box.ts

@@ -43,12 +43,22 @@ const fullOptions: SelectBoxOption[] = [
   },
 ];
 
+const manyOptions: SelectBoxOption[] = [
+  { value: "opt1", label: "Option 1" },
+  { value: "opt2", label: "Option 2" },
+  { value: "opt3", label: "Option 3" },
+  { value: "opt4", label: "Option 4" },
+  { value: "opt5", label: "Option 5" },
+  { value: "opt6", label: "Option 6" },
+];
+
 const selects: {
   id: string;
   label: string;
   class?: string;
   options: SelectBoxOption[];
   disabled?: boolean;
+  maxColumns?: number;
 }[] = [
   {
     id: "basic",
@@ -60,6 +70,12 @@ const selects: {
     label: "With description and image",
     options: fullOptions,
   },
+  {
+    id: "two-columns",
+    label: "2 columns (maxColumns=2)",
+    options: manyOptions,
+    maxColumns: 2,
+  },
 ];
 
 @customElement("demo-components-ha-select-box")
@@ -67,13 +83,14 @@ export class DemoHaSelectBox extends LitElement {
   @state() private value?: string = "off";
 
   handleValueChanged(e: CustomEvent) {
+    console.log(e.detail.value);
     this.value = e.detail.value as string;
   }
 
   protected render(): TemplateResult {
     return html`
       ${repeat(selects, (select) => {
-        const { id, label, options } = select;
+        const { id, label, options, maxColumns } = select;
         return html`
           <ha-card>
             <div class="card-content">
@@ -81,6 +98,7 @@ export class DemoHaSelectBox extends LitElement {
               <ha-select-box
                 .value=${this.value}
                 .options=${options}
+                .maxColumns=${maxColumns}
                 @value-changed=${this.handleValueChanged}
               >
               </ha-select-box>

gallery/src/pages/misc/entity-state.ts

@@ -52,6 +52,7 @@ const SENSOR_DEVICE_CLASSES = [
   "sulphur_dioxide",
   "temperature",
   "timestamp",
+  "uptime",
   "volatile_organic_compounds",
   "volatile_organic_compounds_parts",
   "voltage",

landing-page/src/ha-landing-page.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { extractSearchParam } from "../../src/common/url/search-params";
 import "../../src/components/ha-alert";
 import "../../src/components/ha-button";
-import "../../src/components/ha-fade-in";
+import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";

package.json

@@ -33,27 +33,28 @@
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
+    "@codemirror/lint": "6.9.5",
     "@codemirror/search": "6.7.0",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.41.1",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.0",
-    "@formatjs/intl-displaynames": "7.3.3",
-    "@formatjs/intl-durationformat": "0.10.5",
-    "@formatjs/intl-getcanonicallocales": "3.2.4",
-    "@formatjs/intl-listformat": "8.3.3",
-    "@formatjs/intl-locale": "5.3.3",
-    "@formatjs/intl-numberformat": "9.3.3",
-    "@formatjs/intl-pluralrules": "6.3.3",
-    "@formatjs/intl-relativetimeformat": "12.3.3",
+    "@formatjs/intl-datetimeformat": "7.4.1",
+    "@formatjs/intl-displaynames": "7.3.4",
+    "@formatjs/intl-durationformat": "0.10.7",
+    "@formatjs/intl-getcanonicallocales": "3.2.5",
+    "@formatjs/intl-listformat": "8.3.4",
+    "@formatjs/intl-locale": "5.3.4",
+    "@formatjs/intl-numberformat": "9.3.4",
+    "@formatjs/intl-pluralrules": "6.3.4",
+    "@formatjs/intl-relativetimeformat": "12.3.4",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.3.1-ha.1",
+    "@home-assistant/webawesome": "3.3.1-ha.3",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -65,7 +66,6 @@
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@material/mwc-radio": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
@@ -99,7 +99,7 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.2",
+    "intl-messageformat": "11.2.3",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -107,7 +107,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "18.0.2",
+    "marked": "18.0.3",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -133,17 +133,17 @@
     "@babel/core": "7.29.0",
     "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.2",
+    "@babel/preset-env": "7.29.3",
     "@bundle-stats/plugin-webpack-filter": "4.22.1",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.59.0",
+    "@html-eslint/eslint-plugin": "0.60.0",
     "@lokalise/node-api": "15.7.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
     "@rsdoctor/rspack-plugin": "1.5.9",
-    "@rspack/core": "2.0.0",
-    "@rspack/dev-server": "2.0.0",
+    "@rspack/core": "2.0.1",
+    "@rspack/dev-server": "2.0.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -166,7 +166,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.2.1",
+    "eslint": "10.3.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.16.2",
@@ -177,14 +177,14 @@
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.4",
     "glob": "13.0.6",
-    "globals": "17.5.0",
+    "globals": "17.6.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.0.2",
+    "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "lint-staged": "16.4.0",
     "lit-analyzer": "2.0.3",
@@ -200,7 +200,7 @@
     "terser-webpack-plugin": "5.5.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.0",
+    "typescript-eslint": "8.59.1",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.5",
     "webpack-stats-plugin": "1.1.3",
@@ -213,7 +213,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.5.0",
+    "globals": "17.6.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"

public/static/images/form/automation_behavior_trigger_any.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="88" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
+<rect x="124" width="88" height="28" rx="8" fill="white"/>
+<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
+</svg>

public/static/images/form/automation_behavior_trigger_any_dark.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
+<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
+<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/automation_behavior_trigger_first.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="88" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
+<rect x="124" width="88" height="28" rx="8" fill="white"/>
+<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
+</svg>

public/static/images/form/automation_behavior_trigger_first_dark.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
+<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
+<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/form/automation_behavior_trigger_last.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="88" height="28" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
+<rect x="124" width="88" height="28" rx="8" fill="white"/>
+<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
+</svg>

public/static/images/form/automation_behavior_trigger_last_dark.svg

@@ -0,0 +1,17 @@
+<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
+<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="8" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
+<rect x="68" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
+<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
+<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
+<rect x="132" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
+<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
+<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
+</svg>

pyproject.toml

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

src/common/entity/compute_entity_unit_display.ts

@@ -0,0 +1,52 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { isUnavailableState } from "../../data/entity/entity";
+import type { HomeAssistant } from "../../types";
+
+interface EntityUnitStubConfig {
+  entity: string;
+  attribute?: string;
+  unit?: string;
+}
+
+/**
+ * Computes the display unit for an entity.
+ *
+ * @param hass - Home Assistant instance
+ * @param stateObj - Entity state object
+ * @param config - Element configuration
+ * @returns Computed entity unit
+ */
+export const computeEntityUnitDisplay = (
+  hass: HomeAssistant,
+  stateObj: HassEntity | undefined,
+  config: EntityUnitStubConfig
+): string => {
+  let unit;
+  if (
+    stateObj &&
+    !isUnavailableState(stateObj.state) &&
+    (config.attribute || stateObj.attributes.device_class !== "duration")
+  ) {
+    // check for an explicitly defined unit in config
+    unit = config.unit;
+
+    if (!unit) {
+      if (!config.attribute) {
+        // use entity's unit_of_measurement
+        const stateParts = hass.formatEntityStateToParts(stateObj);
+        unit = stateParts.find((part) => part.type === "unit")?.value;
+      } else {
+        // use attribute's unit if available
+        const attrParts = hass.formatEntityAttributeValueToParts(
+          stateObj,
+          config.attribute
+        );
+        unit = attrParts.find((part) => part.type === "unit")?.value;
+      }
+    }
+
+    return unit ?? "";
+  }
+
+  return "";
+};

src/common/entity/compute_state_display.ts

@@ -17,6 +17,7 @@ import {
 import { blankBeforeUnit } from "../translations/blank_before_unit";
 import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
+import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -266,7 +267,8 @@ const computeStateToPartsFromEntityAttributes = (
       "wake_word",
       "datetime",
     ].includes(domain) ||
-    (domain === "sensor" && attributes.device_class === "timestamp")
+    (domain === "sensor" &&
+      SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
   ) {
     try {
       return [

src/common/entity/get_states.ts

@@ -225,6 +225,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "sulphur_dioxide",
       "temperature",
       "timestamp",
+      "uptime",
       "volatile_organic_compounds",
       "volatile_organic_compounds_parts",
       "voltage",

src/common/util/uuid.ts

@@ -0,0 +1,17 @@
+// Generates an RFC 4122 v4 UUID. Falls back to crypto.getRandomValues when
+// crypto.randomUUID is unavailable (e.g. non-secure HTTP contexts on a LAN).
+export const generateUuidV4 = (): string => {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  /* eslint-disable no-bitwise */
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+  /* eslint-enable no-bitwise */
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join(
+    ""
+  );
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20, 32)}`;
+};

src/common/util/view-transition.ts

@@ -10,6 +10,17 @@ export const setViewTransitionDisabled = (disabled: boolean): void => {
   isViewTransitionDisabled = disabled;
 };
 
+const isAbortError = (err: unknown): boolean =>
+  err instanceof DOMException
+    ? err.name === "AbortError"
+    : err instanceof Error && err.name === "AbortError";
+
+const ignoreAbortError = (err: unknown): void => {
+  if (!isAbortError(err)) {
+    throw err;
+  }
+};
+
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -40,7 +51,8 @@ export const withViewTransition = (
       callbackInvoked = true;
       callback(true);
     });
-    return transition.finished;
+    transition.ready.catch(ignoreAbortError);
+    return transition.finished.catch(ignoreAbortError);
   } catch (err) {
     // eslint-disable-next-line no-console
     console.warn(

src/components/animation/ha-fade-in.ts

@@ -3,13 +3,14 @@ import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")
 export class HaFadeIn extends WaAnimation {
-  @property() public name = "fadeIn";
-
-  @property() public fill: FillMode = "both";
-
   @property({ type: Boolean }) public play = true;
 
-  @property({ type: Number }) public iterations = 1;
+  constructor() {
+    super();
+    this.iterations = 1;
+    this.fill = "both";
+    this.name = "fadeIn";
+  }
 }
 
 declare global {

src/components/animation/ha-fade-out.ts

@@ -0,0 +1,20 @@
+import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-fade-out")
+export class HaFadeOut extends WaAnimation {
+  @property({ type: Boolean }) public play = true;
+
+  constructor() {
+    super();
+    this.iterations = 1;
+    this.fill = "both";
+    this.name = "fadeOut";
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-fade-out": HaFadeOut;
+  }
+}

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

@@ -0,0 +1,154 @@
+import "@home-assistant/webawesome/dist/components/animation/animation";
+import { mdiInformationOutline } from "@mdi/js";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
+import "../animation/ha-fade-in";
+import "../animation/ha-fade-out";
+import "../ha-icon-button";
+
+@customElement("ha-automation-row-event-chip")
+export class HaAutomationRowEventChip extends LitElement {
+  @property({ reflect: true })
+  public variant: "info" | "warning" | "success" | "danger" | "neutral" =
+    "info";
+
+  @property({ type: Boolean })
+  public interactive = false;
+
+  @property({ type: Boolean })
+  public show = false;
+
+  @state()
+  private _hide = false;
+
+  @state()
+  private _highlight = 0;
+
+  willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("show")) {
+      this._highlight = 0;
+
+      if (!this.show && this.hasUpdated) {
+        this._hide = true;
+      }
+    }
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this.show && !this._hide) {
+      return nothing;
+    }
+
+    let base = html`<div><slot></slot></div>`;
+
+    if (this.interactive) {
+      base = html`<button>
+        <slot></slot>
+        <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
+      </button>`;
+    }
+
+    if (this.show && this._highlight) {
+      return keyed(
+        this._highlight,
+        html`
+          <wa-animation fill="both" .iterations=${1} name="headShake" play
+            >${base}</wa-animation
+          >
+        `
+      );
+    }
+
+    if (!this.show && this._hide) {
+      return html`
+        <ha-fade-out @wa-finish=${this._handleHideFinish}>${base}</ha-fade-out>
+      `;
+    }
+
+    return html`<ha-fade-in .duration=${250}>${base}</ha-fade-in>`;
+  }
+
+  public highlight() {
+    this._highlight += 1;
+  }
+
+  private _handleHideFinish() {
+    this._hide = false;
+  }
+
+  static styles = css`
+    :host {
+      --background-color: var(--ha-color-fill-primary-normal-resting);
+      --background-color-hover: var(--ha-color-fill-primary-normal-hover);
+      --text-color: var(--ha-color-on-primary-normal);
+      border-radius: var(--ha-border-radius-pill);
+    }
+
+    :host([variant="warning"]) {
+      --background-color: var(--ha-color-fill-warning-normal-resting);
+      --background-color-hover: var(--ha-color-fill-warning-normal-hover);
+      --text-color: var(--ha-color-on-warning-normal);
+    }
+
+    :host([variant="neutral"]) {
+      --background-color: var(--ha-color-fill-neutral-normal-resting);
+      --background-color-hover: var(--ha-color-fill-neutral-normal-hover);
+      --text-color: var(--ha-color-on-neutral-normal);
+    }
+
+    :host([variant="success"]) {
+      --background-color: var(--ha-color-fill-success-normal-resting);
+      --background-color-hover: var(--ha-color-fill-success-normal-hover);
+      --text-color: var(--ha-color-on-success-normal);
+    }
+
+    :host([variant="danger"]) {
+      --background-color: var(--ha-color-fill-danger-normal-resting);
+      --background-color-hover: var(--ha-color-fill-danger-normal-hover);
+      --text-color: var(--ha-color-on-danger-normal);
+    }
+
+    button,
+    div {
+      background: var(--background-color);
+      border-radius: var(--ha-border-radius-pill);
+      color: var(--text-color);
+      display: inline-flex;
+      gap: var(--ha-space-2);
+      padding: var(--ha-space-1) var(--ha-space-2);
+      align-items: center;
+      --mdc-icon-size: 16px;
+      line-height: 1;
+    }
+
+    button {
+      border: none;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background: var(--background-color-hover);
+    }
+
+    button:focus-visible {
+      outline: var(--wa-focus-ring);
+      outline-offset: var(--wa-focus-ring-offset);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-row-event-chip": HaAutomationRowEventChip;
+  }
+
+  interface HASSDomEvents {
+    "toggle-collapsed": undefined;
+    "stop-sort-selection": undefined;
+    "copy-row": undefined;
+    "cut-row": undefined;
+    "delete-row": undefined;
+  }
+}

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

@@ -2,8 +2,8 @@ import { mdiChevronUp } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import "./ha-icon-button";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-icon-button";
 
 @customElement("ha-automation-row")
 export class HaAutomationRow extends LitElement {
@@ -27,6 +27,9 @@ export class HaAutomationRow extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public highlight?: boolean;
 
+  @property({ type: Boolean, reflect: true })
+  public dim = false;
+
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -51,7 +54,11 @@ export class HaAutomationRow extends LitElement {
         <div class="leading-icon-wrapper">
           <slot name="leading-icon"></slot>
         </div>
-        <slot class="header" name="header"></slot>
+        <div class="header">
+          <slot name="header"></slot>
+          <slot name="event"></slot>
+        </div>
+
         <div class="icons">
           <slot name="icons"></slot>
         </div>
@@ -120,7 +127,7 @@ export class HaAutomationRow extends LitElement {
     }
     .row {
       display: flex;
-      padding: 0 var(--ha-space-3);
+      padding: 0 0 0 var(--ha-space-3);
       min-height: 48px;
       align-items: flex-start;
       cursor: pointer;
@@ -172,12 +179,24 @@ export class HaAutomationRow extends LitElement {
       border-top-right-radius: var(--ha-border-radius-square);
       border-top-left-radius: var(--ha-border-radius-square);
     }
-    ::slotted([slot="header"]) {
+    .header {
+      position: relative;
+      display: flex;
+      align-items: center;
       flex: 1;
       min-width: 0;
       overflow-wrap: anywhere;
       margin: 0 var(--ha-space-3);
     }
+    ::slotted([slot="header"]) {
+      overflow-wrap: anywhere;
+      margin: 0 var(--ha-space-3);
+    }
+    ::slotted([slot="event"]) {
+      position: absolute;
+      top: 13px;
+      inset-inline-end: 0;
+    }
     .icons {
       display: flex;
       align-items: center;
@@ -199,6 +218,19 @@ export class HaAutomationRow extends LitElement {
     :host([highlight]) .row:hover {
       background-color: rgba(var(--rgb-primary-color), 0.16);
     }
+
+    .icons,
+    .leading-icon-wrapper,
+    ::slotted([slot="header"]) {
+      transition: opacity var(--ha-animation-duration-normal);
+      opacity: 1;
+    }
+
+    :host([dim]) .icons,
+    :host([dim]) .leading-icon-wrapper,
+    :host([dim]) ::slotted([slot="header"]) {
+      opacity: 0.5;
+    }
   `;
 }
 

src/components/chart/chart-tooltip-position.ts

@@ -0,0 +1,40 @@
+import type { TooltipPositionCallback } from "echarts/types/dist/shared";
+
+export const TOOLTIP_GAP_PX = 12;
+export const TOOLTIP_TOP_OFFSET_PX = 10;
+
+/**
+ * Pins the tooltip near the top of the chart and offsets it horizontally
+ * from the cursor so it never covers the data point being inspected.
+ * For axis-trigger time-series tooltips where the cursor's Y is uncorrelated
+ * with the displayed content.
+ */
+export const sideTooltipPosition: TooltipPositionCallback = (
+  point,
+  _params,
+  dom,
+  _rect,
+  size
+) => {
+  const [cursorX] = point;
+  const [viewW, viewH] = size.viewSize;
+  const [tipW, tipH] = size.contentSize;
+
+  const rtl =
+    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
+
+  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
+  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
+
+  let x = rtl ? leftOfCursor : rightOfCursor;
+  const overflowsRight = x + tipW > viewW;
+  const overflowsLeft = x < 0;
+  if (overflowsRight || overflowsLeft) {
+    x = rtl ? rightOfCursor : leftOfCursor;
+  }
+  x = Math.max(0, Math.min(x, viewW - tipW));
+
+  const y = Math.max(0, Math.min(TOOLTIP_TOP_OFFSET_PX, viewH - tipH));
+
+  return [x, y];
+};

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

@@ -1,6 +1,12 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
-import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
+import {
+  mdiCheckCircle,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiCircleOutline,
+  mdiRestart,
+} from "@mdi/js";
 import { differenceInMinutes } from "date-fns";
 import type { DataZoomComponentOption } from "echarts/components";
 import type { EChartsType } from "echarts/core";
@@ -47,6 +53,10 @@ export type CustomLegendOption = ECOption["legend"] & {
     name: string;
     value?: string; // Current value to display next to the name in the legend.
     itemStyle?: Record<string, any>;
+    // If true, label click does not fire `legend-label-click` even when the
+    // chart has `clickLabelForMoreInfo`; falls back to toggle. Used for items
+    // without a corresponding entity (e.g. external statistics).
+    noLabelClick?: boolean;
   }[];
 };
 
@@ -81,6 +91,9 @@ export class HaChartBase extends LitElement {
   })
   private _themes!: Themes;
 
+  @property({ attribute: "click-label-for-more-info", type: Boolean })
+  public clickLabelForMoreInfo = false;
+
   @state() private _isZoomed = false;
 
   @state() private _zoomRatio = 1;
@@ -362,6 +375,7 @@ export class HaChartBase extends LitElement {
           let itemStyle: Record<string, any> = {};
           let id = "";
           let value = "";
+          let noLabelClick = false;
           const name = typeof item === "string" ? item : (item.name ?? "");
           if (typeof item === "string") {
             id = item;
@@ -369,7 +383,9 @@ export class HaChartBase extends LitElement {
             id = item.id ?? name;
             value = item.value ?? "";
             itemStyle = item.itemStyle ?? {};
+            noLabelClick = item.noLabelClick ?? false;
           }
+          const labelClickable = this.clickLabelForMoreInfo && !noLabelClick;
           const dataset =
             datasets.find((d) => d.id === id) ??
             datasets.find((d) => d.name === id);
@@ -379,26 +395,43 @@ export class HaChartBase extends LitElement {
             ...itemStyle,
           };
           const color = itemStyle?.color as string;
-          const borderColor = itemStyle?.borderColor as string;
           return html`<li
             .id=${id}
-            @click=${this._legendClick}
             @pointerdown=${this._legendPointerDown}
             @pointerup=${this._legendPointerCancel}
             @pointerleave=${this._legendPointerCancel}
             @pointercancel=${this._legendPointerCancel}
             @contextmenu=${this._legendContextMenu}
             class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
-            .title=${name}
           >
-            <div
-              class="bullet"
-              style=${styleMap({
-                backgroundColor: color,
-                borderColor: borderColor || color,
-              })}
-            ></div>
-            <div class="label">${name}</div>
+            <button
+              type="button"
+              class="legend-toggle"
+              data-id=${id}
+              aria-pressed=${!this._hiddenDatasets.has(id)}
+              .title=${this.hass.localize(
+                "ui.components.history_charts.toggle_visibility"
+              )}
+              @click=${this._toggleDataset}
+            >
+              <ha-svg-icon
+                .path=${this._hiddenDatasets.has(id)
+                  ? mdiCircleOutline
+                  : mdiCheckCircle}
+                style=${styleMap({
+                  color: this._hiddenDatasets.has(id) ? undefined : color,
+                })}
+              ></ha-svg-icon>
+            </button>
+            <button
+              type="button"
+              class=${classMap({ label: true, clickable: labelClickable })}
+              data-id=${id}
+              .title=${name}
+              @click=${this._labelClick}
+            >
+              ${name}
+            </button>
             ${value ? html`<div class="value">${value}</div>` : nothing}
           </li>`;
         })}
@@ -1161,7 +1194,8 @@ export class HaChartBase extends LitElement {
     }
   }
 
-  private _legendClick(ev: MouseEvent) {
+  private _toggleDataset(ev: MouseEvent) {
+    ev.stopPropagation();
     if (!this.chart) {
       return;
     }
@@ -1169,13 +1203,46 @@ export class HaChartBase extends LitElement {
       this._longPressTriggered = false;
       return;
     }
-    const id = (ev.currentTarget as HTMLElement)?.id;
+    const id = (ev.currentTarget as HTMLElement).dataset.id;
+    if (!id) {
+      return;
+    }
     // Cmd+click on Mac (Ctrl+click is right-click there), Ctrl+click elsewhere
     const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
     if (soloModifier) {
       this._soloLegend(id);
       return;
     }
+    this._handleDatasetToggle(id);
+  }
+
+  private _labelClick(ev: MouseEvent) {
+    ev.stopPropagation();
+    if (!this.chart) {
+      return;
+    }
+    if (this._longPressTriggered) {
+      this._longPressTriggered = false;
+      return;
+    }
+    const target = ev.currentTarget as HTMLElement;
+    const id = target.dataset.id;
+    if (!id) {
+      return;
+    }
+    const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
+    if (soloModifier) {
+      this._soloLegend(id);
+      return;
+    }
+    if (target.classList.contains("clickable")) {
+      fireEvent(this, "legend-label-click", { id });
+    } else {
+      this._handleDatasetToggle(id);
+    }
+  }
+
+  private _handleDatasetToggle(id: string) {
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1390,7 +1457,6 @@ export class HaChartBase extends LitElement {
     }
     .chart-legend li {
       height: 24px;
-      cursor: pointer;
       display: inline-flex;
       align-items: center;
       padding: 0 2px;
@@ -1407,33 +1473,54 @@ export class HaChartBase extends LitElement {
       color: var(--secondary-text-color);
     }
     .chart-legend .label {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+      text-align: start;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      line-height: 1;
+    }
+    @media (hover: hover) {
+      .chart-legend .label.clickable:hover {
+        text-decoration: underline;
+      }
+      .chart-legend .legend-toggle:hover {
+        opacity: 0.5;
+      }
     }
     .chart-legend .value {
       color: var(--secondary-text-color);
       margin-inline-start: var(--ha-space-1);
       flex-shrink: 0;
       white-space: nowrap;
+      line-height: 1;
     }
-    .chart-legend .bullet {
-      border-width: 1px;
-      border-style: solid;
-      border-radius: var(--ha-border-radius-circle);
-      display: block;
-      height: 16px;
-      width: 16px;
-      margin-right: 4px;
-      flex-shrink: 0;
-      box-sizing: border-box;
-      margin-inline-end: 4px;
-      margin-inline-start: initial;
-      direction: var(--direction);
+    .chart-legend .legend-toggle {
+      background: none;
+      border: none;
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      padding: 4px;
+      margin: -4px;
+      margin-inline-end: 0;
     }
-    .chart-legend .hidden .bullet {
-      border-color: var(--secondary-text-color) !important;
-      background-color: transparent !important;
+    .chart-legend .legend-toggle:focus-visible,
+    .chart-legend .label:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+      border-radius: var(--ha-border-radius-small, 4px);
+    }
+    .chart-legend .legend-toggle ha-svg-icon {
+      --mdc-icon-size: 18px;
     }
     ha-assist-chip {
       height: 100%;
@@ -1453,6 +1540,7 @@ declare global {
     "dataset-hidden": { id: string };
     "dataset-unhidden": { id: string };
     "chart-click": ECElementEvent;
+    "legend-label-click": { id: string };
     "chart-zoom": {
       start: number;
       end: number;

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

@@ -11,6 +11,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 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 type { ECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -18,6 +19,7 @@ import {
   formatNumber,
 } from "../../common/number/format_number";
 import { measureTextWidth } from "../../util/text";
+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";
@@ -36,6 +38,21 @@ const CLIMATE_MODE_CONFIGS = [
   { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
 ] as const;
 
+// Used to recover the underlying entity_id from a legend dataset id.
+// Kept in sync with the suffixes appended at dataset construction below
+// for climate / water_heater / humidifier multi-attribute charts.
+const ENTITY_DATASET_SUFFIXES = [
+  "-current_temperature",
+  "-target_temperature",
+  "-target_temperature_mode",
+  "-target_temperature_mode_low",
+  ...CLIMATE_MODE_CONFIGS.map((c) => `-${c.action}`),
+  "-current_humidity",
+  "-target_humidity",
+  "-humidifying",
+  "-on",
+];
+
 @customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -44,6 +61,11 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
+  @property({ attribute: false }) public colors?: Record<
+    string,
+    string | undefined
+  >;
+
   @property() public unit?: string;
 
   @property() public identifier?: string;
@@ -112,6 +134,8 @@ export class StateHistoryChartLine extends LitElement {
         @chart-zoom=${this._handleDataZoom}
         .expandLegend=${this.expandLegend}
         .hideResetButton=${this.hideResetButton}
+        .clickLabelForMoreInfo=${this.clickForMoreInfo}
+        @legend-label-click=${this._handleLegendLabelClick}
       ></ha-chart-base>
     `;
   }
@@ -223,6 +247,24 @@ export class StateHistoryChartLine extends LitElement {
     });
   }
 
+  private _handleLegendLabelClick(
+    ev: HASSDomEvent<HASSDomEvents["legend-label-click"]>
+  ) {
+    const id = ev.detail.id;
+    let entityId = id;
+    if (!this.hass.states[entityId]) {
+      for (const suffix of ENTITY_DATASET_SUFFIXES) {
+        if (id.endsWith(suffix)) {
+          entityId = id.slice(0, -suffix.length);
+          break;
+        }
+      }
+    }
+    if (this.hass.states[entityId]) {
+      fireEvent(this, "hass-more-info", { entityId });
+    }
+  }
+
   public willUpdate(changedProps: PropertyValues) {
     if (
       changedProps.has("data") ||
@@ -369,8 +411,7 @@ export class StateHistoryChartLine extends LitElement {
         tooltip: {
           trigger: "axis",
           renderMode: "html",
-          position: "bottom",
-          align: "center",
+          position: sideTooltipPosition,
           confine: true,
           formatter: this._renderTooltip,
         },
@@ -399,9 +440,11 @@ export class StateHistoryChartLine extends LitElement {
     this._chartTime = new Date();
     const endTime = this.endTime;
     const names = this.names || {};
+    const colors = this.colors || {};
     entityStates.forEach((states, dataIdx) => {
       const domain = states.domain;
       const name = names[states.entity_id] || states.name;
+      const color = colors[states.entity_id];
       // array containing [value1, value2, etc]
       let prevValues: any[] | null = null;
 
@@ -432,11 +475,11 @@ export class StateHistoryChartLine extends LitElement {
       const addDataSet = (
         id: string,
         nameY: string,
-        color?: string,
+        clr?: string,
         fill = false
       ) => {
-        if (!color) {
-          color = getGraphColorByIndex(colorIndex, computedStyles);
+        if (!clr) {
+          clr = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
         }
         data.push({
@@ -445,7 +488,7 @@ export class StateHistoryChartLine extends LitElement {
           type: "line",
           cursor: "default",
           name: nameY,
-          color,
+          color: clr,
           symbol: "circle",
           symbolSize: 1,
           step: "end",
@@ -456,7 +499,7 @@ export class StateHistoryChartLine extends LitElement {
           },
           areaStyle: fill
             ? {
-                color: color + "7F",
+                color: clr + "7F",
               }
             : undefined,
           tooltip: {
@@ -704,7 +747,7 @@ export class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(states.entity_id, name);
+        addDataSet(states.entity_id, name, color);
 
         let lastValue: number;
         let lastDate: Date;

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

@@ -14,6 +14,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 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 { computeTimelineColor } from "./timeline-color";
 import type { ECOption } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
@@ -256,8 +257,7 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       tooltip: {
         renderMode: "html",
-        position: "bottom",
-        align: "center",
+        position: sideTooltipPosition,
         confine: true,
         formatter: this._renderTooltip,
       },

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

@@ -52,6 +52,11 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
+  @property({ attribute: false }) public colors?: Record<
+    string,
+    string | undefined
+  >;
+
   @property({ type: Boolean, reflect: true }) public virtualize = false;
 
   @property({ attribute: false }) public endTime?: Date;
@@ -181,6 +186,7 @@ export class StateHistoryCharts extends LitElement {
           .endTime=${this._computedEndTime}
           .paddingYAxis=${this._maxYWidth}
           .names=${this.names}
+          .colors=${this.colors}
           .chartIndex=${index}
           .clickForMoreInfo=${this.clickForMoreInfo}
           .logarithmicScale=${this.logarithmicScale}
@@ -399,12 +405,12 @@ export class StateHistoryCharts extends LitElement {
 
     .entry-container {
       width: 100%;
+      overflow: visible;
     }
 
     .entry-container.line {
       flex: 1;
       padding-top: 8px;
-      overflow: hidden;
     }
 
     .entry-container:hover {

src/components/chart/statistics-chart.ts

@@ -10,6 +10,8 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import type { HASSDomEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
 
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -35,6 +37,7 @@ 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 { fillDataGapsAndRoundCaps } from "./round-caps";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
@@ -46,6 +49,13 @@ export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   change: "sum",
 };
 
+// When the chart has a single entity, ha-chart-base falls back to raw series
+// ids (`${statistic_id}-${type}`) for the legend (see _legendData branch at
+// the bottom of _generateData). Strip the type suffix to recover statistic_id.
+const STAT_TYPE_SUFFIXES = (
+  Object.keys(supportedStatTypeMap) as StatisticType[]
+).map((t) => `-${t}`);
+
 @customElement("statistics-chart")
 export class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -59,6 +69,11 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
+  @property({ attribute: false }) public colors?: Record<
+    string,
+    string | undefined
+  >;
+
   @property() public unit?: string;
 
   @property({ attribute: false }) public startTime?: Date;
@@ -186,6 +201,9 @@ export class StatisticsChart extends LitElement {
         @dataset-hidden=${this._datasetHidden}
         @dataset-unhidden=${this._datasetUnhidden}
         .expandLegend=${this.expandLegend}
+        .clickLabelForMoreInfo=${this.clickForMoreInfo &&
+        !this._statisticIds.every(isExternalStatistic)}
+        @legend-label-click=${this._handleLegendLabelClick}
       ></ha-chart-base>
     `;
   }
@@ -200,6 +218,28 @@ export class StatisticsChart extends LitElement {
     this.requestUpdate("_hiddenStats");
   }
 
+  private _handleLegendLabelClick(
+    ev: HASSDomEvent<HASSDomEvents["legend-label-click"]>
+  ) {
+    const id = ev.detail.id;
+    // External statistics aren't real entities; nothing to open.
+    if (isExternalStatistic(id)) {
+      return;
+    }
+    let entityId = id;
+    if (!this.hass.states[entityId]) {
+      for (const suffix of STAT_TYPE_SUFFIXES) {
+        if (id.endsWith(suffix)) {
+          entityId = id.slice(0, -suffix.length);
+          break;
+        }
+      }
+    }
+    if (this.hass.states[entityId]) {
+      fireEvent(this, "hass-more-info", { entityId });
+    }
+  }
+
   private _renderTooltip = (params: any) => {
     const rendered: Record<string, boolean> = {};
     const unit = this.unit
@@ -359,8 +399,7 @@ export class StatisticsChart extends LitElement {
       tooltip: {
         trigger: "axis",
         renderMode: "html",
-        position: "bottom",
-        align: "center",
+        position: sideTooltipPosition,
         confine: true,
         formatter: this._renderTooltip,
       },
@@ -400,6 +439,7 @@ export class StatisticsChart extends LitElement {
       name: string;
       color?: ZRColor;
       borderColor?: ZRColor;
+      noLabelClick?: boolean;
     }[] = [];
     const statisticIds: string[] = [];
     let endTime: Date;
@@ -450,6 +490,7 @@ export class StatisticsChart extends LitElement {
     }
 
     const names = this.names || {};
+    const colors = this.colors || {};
     statisticsData.forEach(([statistic_id, stats]) => {
       const meta = statisticsMetaData?.[statistic_id];
       let name = names[statistic_id];
@@ -494,11 +535,14 @@ export class StatisticsChart extends LitElement {
         prevEndTime = end;
       };
 
-      const color = getGraphColorByIndex(
-        colorIndex,
-        this._computedStyle || getComputedStyle(this)
-      );
-      colorIndex++;
+      let color = colors[statistic_id];
+      if (color === undefined) {
+        color = getGraphColorByIndex(
+          colorIndex,
+          this._computedStyle || getComputedStyle(this)
+        );
+        colorIndex++;
+      }
 
       const statTypes: this["statTypes"] = [];
 
@@ -603,6 +647,7 @@ export class StatisticsChart extends LitElement {
                 name,
                 color: series.color as ZRColor,
                 borderColor: series.itemStyle?.borderColor,
+                noLabelClick: isExternalStatistic(statistic_id),
               });
             }
             displayedLegend = displayedLegend || showLegend;
@@ -738,7 +783,11 @@ export class StatisticsChart extends LitElement {
       // only update the legend if it has changed or it will trigger options update
       this._legendData =
         legendData.length > 1
-          ? legendData.map(({ id, name }) => ({ id, name }))
+          ? legendData.map(({ id, name, noLabelClick }) => ({
+              id,
+              name,
+              noLabelClick,
+            }))
           : // if there is only one entity, let the base chart handle the legend
             undefined;
     }

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

@@ -1,7 +1,7 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityPickerDisplay } from "../../common/entity/compute_entity_name_display";
@@ -129,6 +129,20 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @state() private _pendingEntityId?: string;
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (
+      this._pendingEntityId &&
+      changedProperties.has("hass") &&
+      this.hass.states !== changedProperties.get("hass")?.states &&
+      this.hass.states[this._pendingEntityId]
+    ) {
+      this._setValue(this._pendingEntityId);
+      this._pendingEntityId = undefined;
+    }
+  }
+
   protected firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     // Load title translations so it is available when the combo-box opens
@@ -399,7 +413,13 @@ export class HaEntityPicker extends LitElement {
       showHelperDetailDialog(this, {
         domain,
         dialogClosedCallback: (item) => {
-          if (item.entityId) this._setValue(item.entityId);
+          if (item.entityId) {
+            if (this.hass.states[item.entityId]) {
+              this._setValue(item.entityId);
+            } else {
+              this._pendingEntityId = item.entityId;
+            }
+          }
         },
       });
       return;

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

@@ -13,9 +13,9 @@ import {
 } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
-import "../ha-control-switch";
 import "../ha-formfield";
 import "../ha-icon-button";
+import "../ha-switch";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -35,7 +35,7 @@ export class HaEntityToggle extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
-      return html`<ha-control-switch disabled></ha-control-switch> `;
+      return html`<ha-switch disabled></ha-switch> `;
     }
 
     if (
@@ -62,14 +62,14 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
-    const switchTemplate = html`<ha-control-switch
+    const switchTemplate = html`<ha-switch
       aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
       .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
-    ></ha-control-switch>`;
+    ></ha-switch>`;
 
     if (!this.label) {
       return switchTemplate;
@@ -160,12 +160,14 @@ export class HaEntityToggle extends LitElement {
 
   static styles = css`
     :host {
+      display: flex;
+      align-items: center;
       white-space: nowrap;
-      min-width: 38px;
     }
-    ha-control-switch {
-      --control-switch-thickness: 20px;
-      --control-switch-off-color: var(--state-inactive-color);
+    ha-switch {
+      --ha-switch-width: 38px;
+      --ha-switch-size: 20px;
+      --ha-switch-thumb-size: 14px;
     }
     ha-icon-button {
       --ha-icon-button-size: 40px;

src/components/ha-area-picker.ts

@@ -1,8 +1,8 @@
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import type { TemplateResult, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeAreaName } from "../common/entity/compute_area_name";
@@ -85,6 +85,20 @@ export class HaAreaPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @state() private _pendingAreaId?: string;
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (
+      this._pendingAreaId &&
+      changedProperties.has("hass") &&
+      this.hass.areas !== changedProperties.get("hass")?.areas &&
+      this.hass.areas[this._pendingAreaId]
+    ) {
+      this._setValue(this._pendingAreaId);
+      this._pendingAreaId = undefined;
+    }
+  }
+
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -243,7 +257,11 @@ export class HaAreaPicker extends LitElement {
         createEntry: async (values) => {
           try {
             const area = await createAreaRegistryEntry(this.hass, values);
-            this._setValue(area.area_id);
+            if (this.hass.areas[area.area_id]) {
+              this._setValue(area.area_id);
+            } else {
+              this._pendingAreaId = area.area_id;
+            }
           } catch (err: any) {
             showAlertDialog(this, {
               title: this.hass.localize(

src/components/ha-clock-date-format-picker.ts

@@ -1,538 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { ensureArray } from "../common/array/ensure-array";
-import { resolveTimeZone } from "../common/datetime/resolve-time-zone";
-import { fireEvent } from "../common/dom/fire_event";
-import { configContext, internationalizationContext } from "../data/context";
-import {
-  CLOCK_CARD_DATE_PARTS,
-  formatClockCardDate,
-} from "../panels/lovelace/cards/clock/clock-date-format";
-import type { ClockCardDatePart } from "../panels/lovelace/cards/types";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
-import "./chips/ha-assist-chip";
-import "./chips/ha-chip-set";
-import "./chips/ha-input-chip";
-import "./ha-generic-picker";
-import type { HaGenericPicker } from "./ha-generic-picker";
-import "./ha-input-helper-text";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import "./ha-sortable";
-
-type ClockDatePartSection = "weekday" | "day" | "month" | "year" | "separator";
-
-type ClockDateSeparatorPart = Extract<
-  ClockCardDatePart,
-  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
->;
-
-const CLOCK_DATE_PART_SECTION_ORDER: readonly ClockDatePartSection[] = [
-  "day",
-  "month",
-  "year",
-  "weekday",
-  "separator",
-];
-
-const CLOCK_DATE_SEPARATOR_VALUES: Record<ClockDateSeparatorPart, string> = {
-  "separator-dash": "-",
-  "separator-slash": "/",
-  "separator-dot": ".",
-  "separator-new-line": "",
-};
-
-const getClockDatePartSection = (
-  part: ClockCardDatePart
-): ClockDatePartSection => {
-  if (part.startsWith("weekday-")) {
-    return "weekday";
-  }
-
-  if (part.startsWith("day-")) {
-    return "day";
-  }
-
-  if (part.startsWith("month-")) {
-    return "month";
-  }
-
-  if (part.startsWith("year-")) {
-    return "year";
-  }
-
-  return "separator";
-};
-
-interface ClockDatePartSectionData {
-  id: ClockDatePartSection;
-  title: string;
-  items: PickerComboBoxItem[];
-}
-
-interface ClockDatePartValueItem {
-  key: string;
-  item: string;
-  idx: number;
-}
-
-@customElement("ha-clock-date-format-picker")
-export class HaClockDateFormatPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property() public label?: string;
-
-  @property() public value?: string[] | string;
-
-  @property() public helper?: string;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _hassConfig!: ContextType<typeof configContext>;
-
-  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
-
-  private _editIndex?: number;
-
-  protected render() {
-    const value = this._value;
-    const valueItems = this._getValueItems(value);
-    const sections = this._buildSections();
-
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required && !value.length}
-        .value=${this._getPickerValue()}
-        .sections=${this._getSectionHeaders(sections)}
-        .getItems=${this._getItems(sections)}
-        @value-changed=${this._pickerValueChanged}
-      >
-        <div slot="field" class="container">
-          <ha-sortable
-            no-style
-            @item-moved=${this._moveItem}
-            .disabled=${this.disabled}
-            handle-selector="button.primary.action"
-            filter=".add"
-          >
-            <ha-chip-set>
-              ${repeat(
-                valueItems,
-                (entry: ClockDatePartValueItem) => entry.key,
-                ({ item, idx }) => this._renderValueChip(item, idx, sections)
-              )}
-              ${this.disabled
-                ? nothing
-                : html`
-                    <ha-assist-chip
-                      @click=${this._addItem}
-                      .disabled=${this.disabled}
-                      label=${this._i18n.localize("ui.common.add")}
-                      class="add"
-                    >
-                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                    </ha-assist-chip>
-                  `}
-            </ha-chip-set>
-          </ha-sortable>
-        </div>
-      </ha-generic-picker>
-      ${this._renderHelper()}
-    `;
-  }
-
-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
-  private _getValueItems = memoizeOne(
-    (value: string[]): ClockDatePartValueItem[] => {
-      const occurrences = new Map<string, number>();
-
-      return value.map((item, idx) => {
-        const occurrence = occurrences.get(item) ?? 0;
-        occurrences.set(item, occurrence + 1);
-
-        return {
-          key: `${item}:${occurrence}`,
-          item,
-          idx,
-        };
-      });
-    }
-  );
-
-  private _renderValueChip(
-    item: string,
-    idx: number,
-    sections: ClockDatePartSectionData[]
-  ) {
-    const label = this._getItemLabel(item, sections);
-    const isValid = !!label;
-
-    return html`
-      <ha-input-chip
-        data-idx=${idx}
-        @remove=${this._removeItem}
-        @click=${this._editItem}
-        .label=${label ?? item}
-        .selected=${!this.disabled}
-        .disabled=${this.disabled}
-        class=${!isValid ? "invalid" : ""}
-      >
-        <ha-svg-icon
-          slot="icon"
-          .path=${mdiDragHorizontalVariant}
-        ></ha-svg-icon>
-      </ha-input-chip>
-    `;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-
-    if (this.disabled) {
-      return;
-    }
-
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-
-    if (this.disabled) {
-      return;
-    }
-
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private get _value() {
-    return !this.value ? [] : ensureArray(this.value);
-  }
-
-  private _toValue = memoizeOne((value: string[]): string[] | undefined =>
-    value.length === 0 ? undefined : value
-  );
-
-  private _buildSections(): ClockDatePartSectionData[] {
-    const itemsBySection: Record<ClockDatePartSection, PickerComboBoxItem[]> = {
-      weekday: [],
-      day: [],
-      month: [],
-      year: [],
-      separator: [],
-    };
-
-    const previewDate = new Date();
-    const previewTimeZone = resolveTimeZone(
-      this._i18n.locale.time_zone,
-      this._hassConfig.config.time_zone
-    );
-
-    CLOCK_CARD_DATE_PARTS.forEach((part) => {
-      const section = getClockDatePartSection(part);
-      const label =
-        this._i18n.localize(
-          `ui.panel.lovelace.editor.card.clock.date.parts.${part}`
-        ) ?? part;
-
-      const secondary =
-        section === "separator"
-          ? CLOCK_DATE_SEPARATOR_VALUES[part as ClockDateSeparatorPart]
-          : formatClockCardDate(
-              previewDate,
-              { parts: [part] },
-              this._i18n.locale.language,
-              previewTimeZone
-            );
-
-      itemsBySection[section].push({
-        id: part,
-        primary: label,
-        secondary,
-        sorting_label: label,
-      });
-    });
-
-    return CLOCK_DATE_PART_SECTION_ORDER.map((section) => ({
-      id: section,
-      title:
-        this._i18n.localize(
-          `ui.panel.lovelace.editor.card.clock.date.sections.${section}`
-        ) ?? section,
-      items: itemsBySection[section],
-    })).filter((section) => section.items.length > 0);
-  }
-
-  private _getSectionHeaders(
-    sections: ClockDatePartSectionData[]
-  ): { id: string; label: string }[] {
-    return sections.map((section) => ({
-      id: section.id,
-      label: section.title,
-    }));
-  }
-
-  private _getItems = memoizeOne(
-    (sections: ClockDatePartSectionData[]) =>
-      (
-        searchString?: string,
-        section?: string
-      ): (PickerComboBoxItem | string)[] => {
-        const normalizedSearch = searchString?.trim().toLowerCase();
-
-        const filteredSections = sections
-          .map((sectionData) => {
-            if (!normalizedSearch) {
-              return sectionData;
-            }
-
-            return {
-              ...sectionData,
-              items: sectionData.items.filter(
-                (item) =>
-                  item.primary.toLowerCase().includes(normalizedSearch) ||
-                  item.secondary?.toLowerCase().includes(normalizedSearch) ||
-                  item.id.toLowerCase().includes(normalizedSearch)
-              ),
-            };
-          })
-          .filter((sectionData) => sectionData.items.length > 0);
-
-        if (section) {
-          return (
-            filteredSections.find((candidate) => candidate.id === section)
-              ?.items || []
-          );
-        }
-
-        const groupedItems: (PickerComboBoxItem | string)[] = [];
-
-        filteredSections.forEach((sectionData) => {
-          groupedItems.push(sectionData.title, ...sectionData.items);
-        });
-
-        return groupedItems;
-      }
-  );
-
-  private _getItemLabel(
-    value: string,
-    sections: ClockDatePartSectionData[]
-  ): string | undefined {
-    for (const section of sections) {
-      const item = section.items.find((candidate) => candidate.id === value);
-
-      if (item) {
-        if (section.id === "separator") {
-          if (value === "separator-new-line") {
-            return item.primary;
-          }
-
-          return item.secondary ?? item.primary;
-        }
-
-        return `${item.secondary} [${item.primary} ${section.title}]`;
-      }
-    }
-
-    return undefined;
-  }
-
-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      return this._value[this._editIndex];
-    }
-
-    return undefined;
-  }
-
-  private async _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-
-    const value = this._value;
-    const newValue = value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-
-    this._setValue(newValue);
-  }
-
-  private async _removeItem(ev: Event) {
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
-      10
-    );
-
-    if (Number.isNaN(idx)) {
-      return;
-    }
-
-    const value = [...this._value];
-    value.splice(idx, 1);
-
-    if (this._editIndex !== undefined) {
-      if (this._editIndex === idx) {
-        this._editIndex = undefined;
-      } else if (this._editIndex > idx) {
-        this._editIndex -= 1;
-      }
-    }
-
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const newValue = [...this._value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = value;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(value);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: string[]) {
-    const newValue = this._toValue(value);
-    this.value = newValue;
-
-    fireEvent(this, "value-changed", {
-      value: newValue,
-    });
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-
-    .container:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-      transition:
-        height 180ms ease-in-out,
-        background-color 180ms ease-in-out;
-    }
-
-    :host([disabled]) .container:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-
-    .container:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    label {
-      display: block;
-      margin: 0 0 var(--ha-space-2);
-    }
-
-    .add {
-      order: 1;
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-2);
-    }
-
-    .invalid {
-      text-decoration: line-through;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-
-    ha-input-helper-text {
-      display: block;
-      margin: var(--ha-space-2) 0 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clock-date-format-picker": HaClockDateFormatPicker;
-  }
-}

src/components/ha-code-editor-jinja-arg-hover.ts

@@ -0,0 +1,42 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { CompletionItem } from "./ha-code-editor-completion-items";
+import "./ha-code-editor-completion-items";
+
+@customElement("ha-code-editor-jinja-arg-hover")
+export class HaCodeEditorJinjaArgHover extends LitElement {
+  /** Bold heading shown above the items grid (e.g. entity/device/area name). */
+  @property({ attribute: false }) public heading?: string;
+
+  @property({ attribute: false }) public items: CompletionItem[] = [];
+
+  render() {
+    return html`
+      ${this.heading
+        ? html`<div class="heading">${this.heading}</div>`
+        : nothing}
+      <ha-code-editor-completion-items
+        .items=${this.items}
+      ></ha-code-editor-completion-items>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 6px 10px;
+      max-width: 360px;
+    }
+
+    .heading {
+      font-weight: var(--ha-font-weight-bold);
+      margin-bottom: 4px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-code-editor-jinja-arg-hover": HaCodeEditorJinjaArgHover;
+  }
+}

src/components/ha-code-editor-jinja-hover.ts

@@ -0,0 +1,101 @@
+import type { Completion } from "@codemirror/autocomplete";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { mdiHelpCircleOutline } from "@mdi/js";
+import "./ha-svg-icon";
+
+@customElement("ha-code-editor-jinja-hover")
+export class HaCodeEditorJinjaHover extends LitElement {
+  @property({ attribute: false }) public completion!: Completion;
+
+  @property({ attribute: false }) public docUrl?: string;
+
+  @property({ attribute: false }) public openDocumentation =
+    "Open documentation";
+
+  render() {
+    const info =
+      typeof this.completion.info === "string"
+        ? this.completion.info
+        : undefined;
+
+    return html`
+      <div class="header">
+        <div class="sig">
+          <strong>${this.completion.label}</strong>
+          ${this.completion.detail
+            ? html`<span class="detail">(${this.completion.detail})</span>`
+            : nothing}
+        </div>
+        ${this.docUrl
+          ? html`<a
+              class="doc-link"
+              href=${this.docUrl}
+              target="_blank"
+              rel="noreferrer"
+              title=${this.openDocumentation}
+              ><ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon
+            ></a>`
+          : nothing}
+      </div>
+      ${info ? html`<div class="desc">${info}</div>` : nothing}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 6px 10px;
+      max-width: 360px;
+      line-height: 1.5;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+
+    .sig {
+      font-family: var(--ha-font-family-code);
+      font-size: 0.9em;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .detail {
+      color: var(--secondary-text-color);
+    }
+
+    .doc-link {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      color: var(--secondary-text-color);
+      opacity: 0.7;
+      line-height: 1;
+    }
+
+    .doc-link:hover {
+      opacity: 1;
+      color: var(--primary-color);
+    }
+
+    .doc-link ha-svg-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .desc {
+      font-size: 0.9em;
+      color: var(--secondary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-code-editor-jinja-hover": HaCodeEditorJinjaHover;
+  }
+}

src/components/ha-code-editor.ts

@@ -36,9 +36,13 @@ import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
 import { haStyleScrollbar } from "../resources/styles";
-import type { JinjaArgType } from "../resources/jinja_ha_completions";
+import type {
+  JinjaArgType,
+  HassArgHoverContext,
+} from "../resources/jinja_ha_completions";
 import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
+import { documentationUrl } from "../util/documentation-url";
 import { labelsContext } from "../data/context";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import "./ha-code-editor-completion-items";
@@ -91,6 +95,8 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property({ type: Boolean }) public error = false;
 
+  @property({ type: Boolean }) public lint = false;
+
   @property({ type: Boolean, attribute: "disable-fullscreen" })
   public disableFullscreen = false;
 
@@ -159,6 +165,40 @@ export class HaCodeEditor extends ReactiveElement {
     return !!this.renderRoot.querySelector(`span.${className}`);
   }
 
+  /**
+   * Push a YAML parse error (or null to clear) into the lint gutter as a
+   * diagnostic. Avoids re-parsing the document — the caller (ha-yaml-editor)
+   * already has the error from its own js-yaml load() call.
+   */
+  public setYamlError(
+    err: {
+      mark?: { position: number; line: number; column: number };
+      reason?: string;
+    } | null
+  ): void {
+    if (!this.codemirror || !this._loadedCodeMirror) return;
+    let diagnostics: {
+      from: number;
+      to: number;
+      severity: "error";
+      message: string;
+    }[] = [];
+    if (err) {
+      const doc = this.codemirror.state.doc;
+      const pos = err.mark ? Math.min(err.mark.position, doc.length) : 0;
+      const line = doc.lineAt(pos);
+      const message = `${
+        err.reason ||
+        this.hass?.localize("ui.components.yaml-editor.error") ||
+        "YAML syntax error"
+      }${err.mark ? ` (${this.hass?.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
+      diagnostics = [{ from: pos, to: line.to, severity: "error", message }];
+    }
+    this.codemirror.dispatch(
+      this._loadedCodeMirror.setDiagnostics(this.codemirror.state, diagnostics)
+    );
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     this.classList.toggle("in-dialog", this.inDialog);
@@ -216,17 +256,38 @@ export class HaCodeEditor extends ReactiveElement {
       transactions.push({
         effects: [
           this._loadedCodeMirror!.langCompartment!.reconfigure(this._mode),
+          this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
+            this.lint && !this.readOnly
+              ? [this._loadedCodeMirror!.lintGutter()]
+              : []
+          ),
         ],
       });
     }
     if (changedProps.has("readOnly")) {
       transactions.push({
-        effects: this._loadedCodeMirror!.readonlyCompartment!.reconfigure(
-          this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
-        ),
+        effects: [
+          this._loadedCodeMirror!.readonlyCompartment!.reconfigure(
+            this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
+          ),
+          this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
+            this.lint && !this.readOnly
+              ? [this._loadedCodeMirror!.lintGutter()]
+              : []
+          ),
+        ],
       });
       this._updateToolbarButtons();
     }
+    if (changedProps.has("lint")) {
+      transactions.push({
+        effects: this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
+          this.lint && !this.readOnly
+            ? [this._loadedCodeMirror!.lintGutter()]
+            : []
+        ),
+      });
+    }
     if (changedProps.has("linewrap")) {
       transactions.push({
         effects: this._loadedCodeMirror!.linewrapCompartment!.reconfigure(
@@ -308,6 +369,7 @@ export class HaCodeEditor extends ReactiveElement {
         ...this._loadedCodeMirror.searchKeymap,
         ...this._loadedCodeMirror.historyKeymap,
         ...this._loadedCodeMirror.tabKeyBindings,
+        ...this._loadedCodeMirror.lintKeymap,
         saveKeyBinding,
       ]),
       this._loadedCodeMirror.search({ top: true }),
@@ -322,10 +384,23 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.linewrapCompartment.of(
         this.linewrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
       ),
+      this._loadedCodeMirror.yamlLintCompartment.of(
+        this.lint && !this.readOnly ? [this._loadedCodeMirror.lintGutter()] : []
+      ),
       this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
       this._loadedCodeMirror.tooltips({
         position: "absolute",
       }),
+      this._loadedCodeMirror.hoverTooltip(
+        (view, pos) =>
+          this._loadedCodeMirror!.haJinjaHoverSource(
+            view,
+            pos,
+            this.hass ? documentationUrl(this.hass, "") : undefined,
+            this.hass ? this._hassArgHoverContext() : undefined
+          ),
+        { hoverTime: 300 }
+      ),
       ...(this.placeholder ? [placeholder(this.placeholder)] : []),
     ];
 
@@ -575,6 +650,48 @@ export class HaCodeEditor extends ReactiveElement {
     }
   };
 
+  /**
+   * Builds a HassArgHoverContext from the current hass object so that
+   * haJinjaHoverSource can resolve entity / device / area friendly names
+   * without importing the full HomeAssistant type into the resource file.
+   */
+  private _hassArgHoverContext(): HassArgHoverContext {
+    const hass = this.hass!;
+    const labelMap: Record<
+      string,
+      { name: string; description?: string | null }
+    > = {};
+    for (const label of this._labels ?? []) {
+      labelMap[label.label_id] = {
+        name: label.name,
+        description: label.description,
+      };
+    }
+    return {
+      states: hass.states as HassArgHoverContext["states"],
+      devices: hass.devices as HassArgHoverContext["devices"],
+      areas: hass.areas as HassArgHoverContext["areas"],
+      floors: hass.floors as HassArgHoverContext["floors"],
+      entities: hass.entities as HassArgHoverContext["entities"],
+      labels: labelMap,
+      formatEntityState: (entityId) =>
+        hass.formatEntityState(hass.states[entityId]),
+      formatEntityName: (entityId) => {
+        const stateObj = hass.states[entityId];
+        return (
+          (stateObj?.attributes.friendly_name as string | undefined) ??
+          hass.entities[entityId]?.name ??
+          undefined
+        );
+      },
+      formatAttributeName: (entityId, attribute) =>
+        hass.formatEntityAttributeName(hass.states[entityId], attribute),
+      formatAttributeValue: (entityId, attribute) =>
+        hass.formatEntityAttributeValue(hass.states[entityId], attribute),
+      localize: (key) => hass.localize(key as never),
+    };
+  }
+
   private _renderInfo = (completion: Completion): CompletionInfo => {
     const key =
       typeof completion.apply === "string"

src/components/ha-condition-icon.ts

@@ -55,7 +55,11 @@ export class HaConditionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = conditionIcon(this.hass, this.condition).then((icn) => {
+    const icon = conditionIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.condition
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-control-switch.ts

@@ -196,6 +196,7 @@ export class HaControlSwitch extends LitElement {
       --control-switch-background-opacity: 0.2;
       --control-switch-hover-background-opacity: 0.4;
       --control-switch-thickness: 40px;
+      --control-switch-min-touch-size: 40px;
       --control-switch-border-radius: var(--ha-border-radius-lg);
       --control-switch-padding: 4px;
       --mdc-icon-size: 20px;
@@ -219,21 +220,35 @@ export class HaControlSwitch extends LitElement {
       width: 100%;
       border-radius: var(--control-switch-border-radius);
       outline: none;
-      overflow: hidden;
       padding: var(--control-switch-padding);
       display: flex;
       cursor: pointer;
     }
+    .switch::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: var(--control-switch-min-touch-size);
+      min-height: var(--control-switch-min-touch-size);
+    }
     .switch[disabled] {
       opacity: 0.5;
       cursor: not-allowed;
     }
+    .switch[disabled]::before {
+      pointer-events: none;
+    }
     .switch .background {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
+      border-radius: inherit;
       background-color: var(--control-switch-off-color);
       transition: background-color 180ms ease-in-out;
       opacity: var(--control-switch-background-opacity);

src/components/ha-filter-floor-areas.ts

@@ -13,14 +13,17 @@ import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-floor-icon";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-list";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
+import "./item/ha-list-item-option";
+import type { HaListItemOption } from "./item/ha-list-item-option";
+import "./list/ha-list-selectable";
+import type { HaListSelectable } from "./list/ha-list-selectable";
+import type { HaListSelectedDetail } from "./list/types";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
@@ -75,27 +78,33 @@ export class HaFilterFloorAreas extends LitElement {
         </div>
         ${this._shouldRender
           ? html`
-              <ha-list class="ha-scrollbar">
+              <ha-list-selectable
+                class="ha-scrollbar"
+                multi
+                @ha-list-selected=${this._handleListChanged}
+                aria-label=${this.hass.localize(
+                  "ui.panel.config.areas.caption"
+                )}
+              >
                 ${repeat(
                   areas?.floors || [],
                   (floor) => floor.floor_id,
                   (floor) => html`
-                    <ha-check-list-item
+                    <ha-list-item-option
+                      appearance="checkbox"
+                      selection-position="end"
                       .value=${floor.floor_id}
                       .type=${"floors"}
                       .selected=${this.value?.floors?.includes(
                         floor.floor_id
                       ) || false}
-                      graphic="icon"
-                      @request-selected=${this._handleItemClick}
-                      @keydown=${this._handleItemKeydown}
                     >
                       <ha-floor-icon
-                        slot="graphic"
+                        slot="start"
                         .floor=${floor}
                       ></ha-floor-icon>
-                      ${floor.name}
-                    </ha-check-list-item>
+                      <span slot="headline">${floor.name} </span>
+                    </ha-list-item-option>
                     ${repeat(
                       floor.areas,
                       (area, index) =>
@@ -110,7 +119,7 @@ export class HaFilterFloorAreas extends LitElement {
                   (area) => area.area_id,
                   (area) => this._renderArea(area)
                 )}
-              </ha-list>
+              </ha-list-selectable>
             `
           : nothing}
       </ha-expansion-panel>
@@ -119,79 +128,83 @@ export class HaFilterFloorAreas extends LitElement {
 
   private _renderArea(area, last = false) {
     const hasFloor = !!area.floor_id;
+
     return html`
-      <ha-check-list-item
+      <ha-list-item-option
+        appearance="checkbox"
+        selection-position="end"
         .value=${area.area_id}
         .selected=${this.value?.areas?.includes(area.area_id) || false}
         .type=${"areas"}
-        graphic="icon"
-        @request-selected=${this._handleItemClick}
-        @keydown=${this._handleItemKeydown}
         class=${classMap({
           rtl: computeRTL(this.hass),
           floor: hasFloor,
         })}
       >
         ${hasFloor
-          ? html`
-              <ha-tree-indicator
-                .end=${last}
-                slot="graphic"
-              ></ha-tree-indicator>
-            `
+          ? html`<ha-tree-indicator
+              slot="start"
+              .end=${last}
+            ></ha-tree-indicator>`
           : nothing}
         ${area.icon
-          ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
+          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
           : html`<ha-svg-icon
-              slot="graphic"
+              slot="start"
               .path=${mdiTextureBox}
             ></ha-svg-icon>`}
-        ${area.name}
-      </ha-check-list-item>
+        <span slot="headline">${area.name}</span>
+      </ha-list-item-option>
     `;
   }
 
-  private _handleItemKeydown(ev) {
-    if (ev.key === " " || ev.key === "Enter") {
-      ev.preventDefault();
-      this._handleItemClick(ev);
-    }
-  }
-
-  private _handleItemClick(ev) {
-    ev.stopPropagation();
-
-    const listItem = ev.currentTarget;
-    const type = listItem?.type;
-    const value = listItem?.value;
-
-    if (ev.detail.selected === listItem.selected || !value) {
+  private _handleListChanged(ev: CustomEvent<HaListSelectedDetail>) {
+    if (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size) {
       return;
     }
 
-    if (this.value?.[type]?.includes(value)) {
-      this.value = {
-        ...this.value,
-        [type]: this.value[type].filter((val) => val !== value),
-      };
-    } else {
+    if (ev.detail.diff?.added.size) {
+      const addedIndex = ev.detail.diff.added.values().next().value;
+      if (addedIndex === undefined) {
+        return;
+      }
+      const addedItem = (ev.currentTarget as HaListSelectable).items[
+        addedIndex
+      ] as HaListItemOption & { type: string; value: string };
+
       if (!this.value) {
         this.value = {};
       }
       this.value = {
         ...this.value,
-        [type]: [...(this.value[type] || []), value],
+        [addedItem.type]: [
+          ...(this.value[addedItem.type] || []),
+          addedItem.value,
+        ],
+      };
+    } else {
+      const removedIndex = ev.detail.diff?.removed.values().next().value;
+      if (removedIndex === undefined) {
+        return;
+      }
+      const removedItem = (ev.currentTarget as HaListSelectable).items[
+        removedIndex
+      ] as HaListItemOption & { type: string; value: string };
+
+      this.value = {
+        ...this.value,
+        [removedItem.type]: this.value![removedItem.type].filter(
+          (val) => val !== removedItem.value
+        ),
       };
     }
-
-    listItem.selected = this.value[type]?.includes(value);
   }
 
   protected updated(changed: PropertyValues<this>) {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
+        this.renderRoot.querySelector("ha-list-selectable")!.style.height =
           `${this.clientHeight - 49}px`;
       }, 300);
     }
@@ -317,11 +330,7 @@ export class HaFilterFloorAreas extends LitElement {
           padding: 0px 2px;
           color: var(--text-primary-color);
         }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: 16px;
-        }
-        .floor {
-          padding-left: 48px;
+        .floor::part(base) {
           padding-inline-start: 48px;
           padding-inline-end: 16px;
         }

src/components/ha-floor-picker.ts

@@ -1,9 +1,9 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import type { TemplateResult, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -104,6 +104,20 @@ export class HaFloorPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @state() private _pendingFloorId?: string;
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (
+      this._pendingFloorId &&
+      changedProperties.has("hass") &&
+      this.hass.floors !== changedProperties.get("hass")?.floors &&
+      this.hass.floors[this._pendingFloorId]
+    ) {
+      this._setValue(this._pendingFloorId);
+      this._pendingFloorId = undefined;
+    }
+  }
+
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -436,7 +450,11 @@ export class HaFloorPicker extends LitElement {
                 floor_id: floor.floor_id,
               });
             });
-            this._setValue(floor.floor_id);
+            if (this.hass.floors[floor.floor_id]) {
+              this._setValue(floor.floor_id);
+            } else {
+              this._pendingFloorId = floor.floor_id;
+            }
           } catch (err: any) {
             showAlertDialog(this, {
               title: this.hass.localize(

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

@@ -72,6 +72,8 @@ export class HaForm extends LitElement implements HaFormElement {
     key: string
   ) => string;
 
+  @property({ attribute: false }) public context?: Record<string, any>;
+
   protected getFormProperties(): Record<string, any> {
     return {};
   }
@@ -218,13 +220,15 @@ export class HaForm extends LitElement implements HaFormElement {
   private _generateContext(
     schema: HaFormSchema
   ): Record<string, any> | undefined {
-    if (!schema.context) {
+    if (!schema.context && !this.context) {
       return undefined;
     }
 
-    const context = {};
-    for (const [context_key, data_key] of Object.entries(schema.context)) {
-      context[context_key] = this.data[data_key];
+    const context = { ...this.context };
+    if (schema.context) {
+      for (const [context_key, data_key] of Object.entries(schema.context)) {
+        context[context_key] = this.data[data_key];
+      }
     }
     return context;
   }

src/components/ha-formfield.ts

@@ -37,10 +37,6 @@ export class HaFormfield extends FormfieldBase {
         input.checked = !input.checked;
         fireEvent(input, "change");
         break;
-      case "HA-RADIO":
-        input.checked = true;
-        fireEvent(input, "change");
-        break;
       default:
         input.click();
         break;

src/components/ha-generic-picker.ts

@@ -469,6 +469,8 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
           --ha-bottom-sheet-padding: 0;
           --ha-bottom-sheet-surface-background: var(--card-background-color);
           --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
+          --ha-bottom-sheet-content-padding: 0 var(--safe-area-inset-right)
+            var(--safe-area-inset-bottom) var(--safe-area-inset-left);
         }
 
         ha-picker-field.opened {

src/components/ha-humidifier-state.ts

@@ -32,7 +32,7 @@ class HaHumidifierState extends LitElement {
 
       ${currentStatus && !isUnavailableState(this.stateObj.state)
         ? html`<div class="current">
-            ${this.hass.localize("ui.card.climate.currently")}:
+            ${this.hass.localize("ui.card.humidifier.currently")}:
             <div class="unit">${currentStatus}</div>
           </div>`
         : ""}`;

src/components/ha-icon-button.ts

@@ -53,7 +53,10 @@ export class HaIconButton extends LitElement {
         .download=${this.download}
       >
         ${this.path
-          ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>`
+          ? html`<ha-svg-icon
+              aria-hidden="true"
+              .path=${this.path}
+            ></ha-svg-icon>`
           : html`<span><slot></slot></span>`}
       </ha-button>
     `;

src/components/ha-label-picker.ts

@@ -2,8 +2,8 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { consume } from "@lit/context";
 import { mdiPlus } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
+import type { TemplateResult, PropertyValues } from "lit";
 import {
   customElement,
   property,
@@ -117,6 +117,19 @@ export class HaLabelPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @state() private _pendingLabelId?: string;
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (
+      this._pendingLabelId &&
+      changedProperties.has("_labels") &&
+      this._labels?.some((l) => l.label_id === this._pendingLabelId)
+    ) {
+      this._setValue(this._pendingLabelId);
+      this._pendingLabelId = undefined;
+    }
+  }
+
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -248,7 +261,11 @@ export class HaLabelPicker extends LitElement {
         createEntry: async (values) => {
           try {
             const label = await createLabelRegistryEntry(this.hass, values);
-            this._setValue(label.label_id);
+            if (this._labels?.some((l) => l.label_id === label.label_id)) {
+              this._setValue(label.label_id);
+            } else {
+              this._pendingLabelId = label.label_id;
+            }
           } catch (err: any) {
             showAlertDialog(this, {
               title: this.hass.localize(

src/components/ha-radio.ts

@@ -1,22 +0,0 @@
-import { RadioBase } from "@material/mwc-radio/mwc-radio-base";
-import { styles } from "@material/mwc-radio/mwc-radio.css";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-radio")
-export class HaRadio extends RadioBase {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-radio": HaRadio;
-  }
-}

src/components/ha-select-box.ts

@@ -1,13 +1,14 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeRTL } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import "./ha-radio";
-import type { HaRadio } from "./ha-radio";
+import "./radio/ha-radio-group";
+import type { HaRadioGroup } from "./radio/ha-radio-group";
+import "./radio/ha-radio-option";
 
 interface SelectBoxOptionImage {
   src: string;
@@ -36,19 +37,28 @@ export class HaSelectBox extends LitElement {
   @property({ type: Number, attribute: "max_columns" })
   public maxColumns?: number;
 
+  @property({ type: Boolean, attribute: "stacked_image" })
+  public stackedImage = false;
+
   render() {
     const maxColumns = this.maxColumns ?? 3;
     const columns = Math.min(maxColumns, this.options.length);
 
     return html`
-      <div class="list" style=${styleMap({ "--columns": columns })}>
+      <ha-radio-group
+        class="list"
+        style=${styleMap({ "--columns": columns })}
+        .value=${this.value}
+        @change=${this._radioChanged}
+      >
         ${this.options.map((option) => this._renderOption(option))}
-      </div>
+      </ha-radio-group>
     `;
   }
 
   private _renderOption(option: SelectBoxOption) {
-    const horizontal = this.maxColumns === 1;
+    const horizontal = this.maxColumns === 1 && !this.stackedImage;
+    const stacked = this.maxColumns === 1 && this.stackedImage;
     const disabled = option.disabled || this.disabled || false;
     const selected = option.value === this.value;
 
@@ -66,23 +76,28 @@ export class HaSelectBox extends LitElement {
       <label
         class="option ${classMap({
           horizontal: horizontal,
+          stacked: stacked,
           selected: selected,
         })}"
         ?disabled=${disabled}
-        @click=${this._labelClick}
       >
         <div class="content">
-          <ha-radio
-            .checked=${option.value === this.value}
+          <ha-radio-option
+            aria-describedby=${ifDefined(
+              option.description ? `desc-${option.value}` : undefined
+            )}
+            aria-labelledby=${`label-${option.value}`}
             .value=${option.value}
             .disabled=${disabled}
-            @change=${this._radioChanged}
-            @click=${stopPropagation}
-          ></ha-radio>
+          ></ha-radio-option>
           <div class="text">
-            <span class="label">${option.label}</span>
+            <span id=${`label-${option.value}`} class="label"
+              >${option.label}</span
+            >
             ${option.description
-              ? html`<span class="description">${option.description}</span>`
+              ? html`<span class="description" id="desc-${option.value}"
+                  >${option.description}</span
+                >`
               : nothing}
           </div>
         </div>
@@ -95,14 +110,9 @@ export class HaSelectBox extends LitElement {
     `;
   }
 
-  private _labelClick(ev) {
-    ev.stopPropagation();
-    ev.currentTarget.querySelector("ha-radio")?.click();
-  }
-
   private _radioChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    const radio = ev.currentTarget as HaRadio;
+    const radio = ev.currentTarget as HaRadioGroup;
     const value = radio.value;
     if (this.disabled || value === undefined || value === (this.value ?? "")) {
       return;
@@ -113,7 +123,7 @@ export class HaSelectBox extends LitElement {
   }
 
   static styles = css`
-    .list {
+    .list::part(form-control-input) {
       display: grid;
       grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
       gap: var(--ha-space-3);
@@ -141,8 +151,9 @@ export class HaSelectBox extends LitElement {
       min-width: 0;
       width: 100%;
     }
-    .option .content ha-radio {
-      margin: -12px;
+    .option .content ha-radio-option {
+      --ha-radio-option-control-margin: 0;
+      margin: 0;
       flex: none;
     }
     .option .content .text {
@@ -151,6 +162,7 @@ export class HaSelectBox extends LitElement {
       gap: var(--ha-space-1);
       min-width: 0;
       flex: 1;
+      justify-content: center;
     }
     .option .content .text .label {
       color: var(--primary-text-color);
@@ -187,6 +199,16 @@ export class HaSelectBox extends LitElement {
       margin: 0;
     }
 
+    .option.stacked {
+      align-items: stretch;
+    }
+
+    .option.stacked img {
+      max-width: 100%;
+      max-height: var(--ha-select-box-image-size, 96px);
+      margin: 0;
+    }
+
     .option:before {
       content: "";
       display: block;

src/components/ha-select.ts

@@ -59,7 +59,7 @@ export class HaSelect extends LitElement {
       value: string | number | undefined
     ) => {
       // just in case value is a number, convert it to string to avoid falsy value
-      const valueStr = String(value);
+      const valueStr = value !== undefined ? String(value) : undefined;
       if (!options || !valueStr) {
         return valueStr;
       }

src/components/ha-selector/ha-selector-automation-behavior.ts

@@ -0,0 +1,123 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeKeys } from "../../common/translations/localize";
+import type {
+  AutomationBehavior,
+  AutomationBehaviorConditionMode,
+  AutomationBehaviorSelector,
+  AutomationBehaviorTriggerMode,
+} from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-input-helper-text";
+import type { SelectBoxOption } from "../ha-select-box";
+import "../ha-select-box";
+
+const TRIGGER_BEHAVIORS: AutomationBehaviorTriggerMode[] = [
+  "any",
+  "first",
+  "last",
+];
+
+const CONDITION_BEHAVIORS: AutomationBehaviorConditionMode[] = ["any", "all"];
+
+@customElement("ha-selector-automation_behavior")
+export class HaSelectorAutomationBehavior extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false })
+  public selector!: AutomationBehaviorSelector;
+
+  @property() public value?: AutomationBehavior;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false })
+  public localizeValue?: (key: string) => string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    const { mode } = this.selector.automation_behavior ?? {};
+    const modeKey = mode ?? "trigger";
+
+    const isTrigger = modeKey === "trigger";
+
+    const options = this._behaviors().map<SelectBoxOption>((behavior) => ({
+      value: behavior,
+      label: this._localizeOption(behavior, "label"),
+      description: this._localizeOption(behavior, "description"),
+      disabled: this.disabled,
+      ...(isTrigger && {
+        image: {
+          src: `/static/images/form/automation_behavior_trigger_${behavior}.svg`,
+          src_dark: `/static/images/form/automation_behavior_trigger_${behavior}_dark.svg`,
+        },
+      }),
+    }));
+
+    return html`
+      <ha-select-box
+        .hass=${this.hass}
+        .options=${options}
+        .value=${this.value ?? ""}
+        max_columns="1"
+        ?stacked_image=${isTrigger}
+        @value-changed=${this._valueChanged}
+      ></ha-select-box>
+      ${this.helper
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
+        : nothing}
+    `;
+  }
+
+  private _behaviors(): AutomationBehavior[] {
+    const mode = this.selector.automation_behavior?.mode;
+    return mode === "condition" ? CONDITION_BEHAVIORS : TRIGGER_BEHAVIORS;
+  }
+
+  private _localizeOption(
+    behavior: AutomationBehavior,
+    field: "label" | "description"
+  ): string {
+    const { translation_key: translationKey, mode } =
+      this.selector.automation_behavior ?? {};
+
+    if (this.localizeValue && translationKey) {
+      const translated = this.localizeValue(
+        `${translationKey}.options.${behavior}.${field}`
+      );
+      if (translated) {
+        return translated;
+      }
+    }
+    return this.hass.localize(
+      `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
+    );
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value as AutomationBehavior;
+    if (this.disabled || value === this.value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static styles = css`
+    ha-select-box {
+      --ha-select-box-image-size: 28px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-automation_behavior": HaSelectorAutomationBehavior;
+  }
+}

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

@@ -78,22 +78,28 @@ export class HaObjectSelector extends LitElement {
   };
 
   private _renderItem(item: any, index: number) {
-    const labelField =
-      this.selector.object!.label_field ||
-      Object.keys(this.selector.object!.fields!)[0];
+    const fields = this.selector.object!.fields!;
+    const preferredLabel = this.selector.object!.label_field;
+    const hasValidLabelField = preferredLabel && preferredLabel in fields;
 
-    const labelSelector = this.selector.object!.fields![labelField].selector;
-
-    const label = labelSelector
-      ? formatSelectorValue(this.hass, item[labelField], labelSelector)
-      : "";
+    const label = hasValidLabelField
+      ? formatSelectorValue(
+          this.hass,
+          item[preferredLabel!],
+          fields[preferredLabel!]?.selector
+        )
+      : Object.entries(fields)
+          .map(([key, field]) =>
+            formatSelectorValue(this.hass, item[key], field.selector)
+          )
+          .filter(Boolean)
+          .join(" · ");
 
     let description = "";
 
     const descriptionField = this.selector.object!.description_field;
-    if (descriptionField) {
-      const descriptionSelector =
-        this.selector.object!.fields![descriptionField].selector;
+    if (descriptionField && descriptionField in fields) {
+      const descriptionSelector = fields[descriptionField]?.selector;
 
       description = descriptionSelector
         ? formatSelectorValue(

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

@@ -15,10 +15,11 @@ import "../ha-dropdown-item";
 import "../ha-formfield";
 import "../ha-generic-picker";
 import "../ha-input-helper-text";
-import "../ha-radio";
 import "../ha-select";
 import "../ha-select-box";
 import "../ha-sortable";
+import "../radio/ha-radio-group";
+import "../radio/ha-radio-option";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -108,24 +109,23 @@ export class HaSelectSelector extends LitElement {
     ) {
       if (!this.selector.select?.multiple) {
         return html`
-          <div>
-            ${this.label}
+          <ha-radio-group
+            .label=${this.label}
+            .disabled=${this.disabled}
+            .value=${this.value}
+            @change=${this._radioChanged}
+          >
             ${options.map(
               (item: SelectOption) => html`
-                <ha-formfield
-                  .label=${item.label}
-                  .disabled=${item.disabled || this.disabled}
+                <ha-radio-option
+                  .value=${item.value}
+                  .disabled=${!!item.disabled}
                 >
-                  <ha-radio
-                    .checked=${item.value === this.value}
-                    .value=${item.value}
-                    .disabled=${item.disabled || this.disabled}
-                    @change=${this._radioChanged}
-                  ></ha-radio>
-                </ha-formfield>
+                  ${item.label}
+                </ha-radio-option>
               `
             )}
-          </div>
+          </ha-radio-group>
           ${this._renderHelper()}
         `;
       }

src/components/ha-selector/ha-selector-serial-port.ts

@@ -1,6 +1,8 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiClose, mdiConnection, mdiMemory, mdiPencil, mdiUsb } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -27,21 +29,32 @@ const MANUAL_ENTRY_ID = "__manual_entry__";
 const SERIAL_PORTS_REFRESH_INTERVAL = 5000;
 
 type SerialPortType =
+  | "recommended"
+  | "serial_proxy"
+  | "integration"
+  | "usb"
+  | "embedded"
+  | "unnamed"
+  | "not_recommended";
+
+const SECTION_ORDER: SerialPortType[] = [
+  "recommended",
+  "serial_proxy",
+  "integration",
+  "usb",
+  "embedded",
+  "unnamed",
+  "not_recommended",
+];
+
+type BaseSerialPortType =
   | "serial_proxy"
   | "integration"
   | "usb"
   | "embedded"
   | "unnamed";
 
-const SECTION_ORDER: SerialPortType[] = [
-  "serial_proxy",
-  "integration",
-  "usb",
-  "embedded",
-  "unnamed",
-];
-
-const TYPE_ICONS: Record<SerialPortType, string> = {
+const TYPE_ICONS: Record<BaseSerialPortType, string> = {
   serial_proxy: mdiEsphomeLogo,
   integration: mdiConnection,
   usb: mdiUsb,
@@ -51,7 +64,7 @@ const TYPE_ICONS: Record<SerialPortType, string> = {
 
 const ESPHOME_HASS_SCHEME = "esphome-hass://";
 
-const getPortType = (port: SerialPort): SerialPortType => {
+const getBasePortType = (port: SerialPort): BaseSerialPortType => {
   if (port.device.startsWith(ESPHOME_HASS_SCHEME)) {
     return "serial_proxy";
   }
@@ -67,6 +80,37 @@ const getPortType = (port: SerialPort): SerialPortType => {
   return "unnamed";
 };
 
+interface SerialPickerItem extends PickerComboBoxItem {
+  port_type: SerialPortType;
+  used_by?: string;
+  description?: string;
+}
+
+const integrationName = (
+  localize: HomeAssistant["localize"],
+  domain: string
+): string => localize(`component.${domain}.title`) || domain;
+
+const getPortType = (
+  port: SerialPort,
+  recommendedDomains: Set<string>
+): SerialPortType => {
+  const matchingDomains = port.matching_integrations ?? [];
+
+  // If the current integration matches this port, it is recommended
+  if (matchingDomains.some((d) => recommendedDomains.has(d))) {
+    return "recommended";
+  }
+
+  // If any other integrations match it, the port is not recommended
+  if (recommendedDomains.size > 0 && matchingDomains.length > 0) {
+    return "not_recommended";
+  }
+
+  // Otherwise, classify the port
+  return getBasePortType(port);
+};
+
 @customElement("ha-selector-serial_port")
 export class HaSerialPortSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -85,6 +129,8 @@ export class HaSerialPortSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property({ attribute: false }) public context?: Record<string, any>;
+
   @state() private _serialPorts?: SerialPort[];
 
   @state() private _manualEntry = false;
@@ -172,24 +218,29 @@ export class HaSerialPortSelector extends LitElement {
       language: string,
       devices: HomeAssistant["devices"],
       areas: HomeAssistant["areas"],
-      localize: HomeAssistant["localize"]
-    ): Record<SerialPortType, PickerComboBoxItem[]> => {
-      const grouped: Record<SerialPortType, PickerComboBoxItem[]> = {
+      localize: HomeAssistant["localize"],
+      recommendedDomains: Set<string>
+    ): Record<SerialPortType, SerialPickerItem[]> => {
+      const grouped: Record<SerialPortType, SerialPickerItem[]> = {
+        recommended: [],
         serial_proxy: [],
         integration: [],
         usb: [],
         embedded: [],
         unnamed: [],
+        not_recommended: [],
       };
 
       for (const port of ports) {
-        const type = getPortType(port);
+        const type = getPortType(port, recommendedDomains);
         let primary: string;
+        let description: string | undefined;
         let secondary: string | undefined;
         const searchLabels: Record<string, string | null> = {
           device: port.device,
           manufacturer: port.manufacturer,
           description: port.description,
+          interface_description: port.interface_description ?? null,
           serial_number: port.serial_number,
         };
 
@@ -223,13 +274,25 @@ export class HaSerialPortSelector extends LitElement {
             searchLabels.port_name = port.device;
           }
         } else {
-          primary =
+          const productManufacturer =
             port.description && port.manufacturer
               ? `${port.description} — ${port.manufacturer}`
-              : port.description || port.manufacturer || port.device;
+              : port.description || port.manufacturer;
+
+          // Prefer the interface description if one exists
+          if (
+            port.interface_description &&
+            port.interface_description !== port.description
+          ) {
+            primary = port.interface_description;
+            description = productManufacturer || undefined;
+          } else {
+            primary = productManufacturer || port.device;
+            description = undefined;
+          }
 
           const parts: string[] = [];
-          if (port.description || port.manufacturer) {
+          if (primary !== port.device) {
             parts.push(port.device);
           }
           if (port.vid && port.pid) {
@@ -238,16 +301,31 @@ export class HaSerialPortSelector extends LitElement {
           if (port.serial_number) {
             parts.push(`S/N: ${port.serial_number}`);
           }
-          secondary = parts.length ? parts.join(" · ") : undefined;
+
+          secondary = parts.join(" · ");
+        }
+
+        let used_by: string | undefined;
+        if (type === "not_recommended" && port.matching_integrations.length) {
+          const integrations = port.matching_integrations
+            .map((d) => integrationName(localize, d))
+            .join(", ");
+          used_by = localize("ui.components.selectors.serial_port.used_by", {
+            integrations,
+          });
+          searchLabels.used_by = used_by;
         }
 
         grouped[type].push({
           id: port.device,
           primary,
           secondary,
-          icon_path: TYPE_ICONS[type],
+          icon_path: TYPE_ICONS[getBasePortType(port)],
           search_labels: searchLabels,
           sorting_label: primary,
+          port_type: type,
+          used_by,
+          description: description,
         });
       }
 
@@ -265,6 +343,42 @@ export class HaSerialPortSelector extends LitElement {
     }
   );
 
+  private _sectionLabel(type: SerialPortType): string {
+    const key = `ui.components.selectors.serial_port.type.${type}` as const;
+    if (type === "recommended" && this._selectorDomain) {
+      return this.hass.localize(key, {
+        integration: integrationName(this.hass.localize, this._selectorDomain),
+      });
+    }
+    return this.hass.localize(key);
+  }
+
+  private get _selectorDomain(): string | undefined {
+    return this.context?.handler;
+  }
+
+  private _memoRecommendedDomains = memoizeOne(
+    (domain: string | undefined, extra: string[] | undefined): Set<string> => {
+      const domains = new Set<string>();
+      if (domain) {
+        domains.add(domain);
+      }
+      if (extra) {
+        for (const d of extra) {
+          domains.add(d);
+        }
+      }
+      return domains;
+    }
+  );
+
+  private get _recommendedDomains(): Set<string> {
+    return this._memoRecommendedDomains(
+      this._selectorDomain,
+      this.selector?.serial_port?.extra_recommended_domains
+    );
+  }
+
   private _getPickerItems = (
     searchString?: string,
     section?: string
@@ -278,7 +392,8 @@ export class HaSerialPortSelector extends LitElement {
       this.hass.locale.language,
       this.hass.devices,
       this.hass.areas,
-      this.hass.localize
+      this.hass.localize,
+      this._recommendedDomains
     );
 
     const items: (PickerComboBoxItem | string)[] = [];
@@ -286,7 +401,7 @@ export class HaSerialPortSelector extends LitElement {
       if (section && section !== type) {
         continue;
       }
-      let groupItems = grouped[type];
+      let groupItems: SerialPickerItem[] = grouped[type];
       if (searchString) {
         groupItems = multiTermSortedSearch(
           groupItems,
@@ -299,11 +414,7 @@ export class HaSerialPortSelector extends LitElement {
         continue;
       }
       if (!section) {
-        items.push(
-          this.hass.localize(
-            `ui.components.selectors.serial_port.type.${type}` as const
-          )
-        );
+        items.push(this._sectionLabel(type));
       }
       items.push(...groupItems);
     }
@@ -321,17 +432,48 @@ export class HaSerialPortSelector extends LitElement {
     },
   ];
 
-  private _rowRenderer = (item: PickerComboBoxItem) => html`
-    <ha-combo-box-item type="button" compact>
-      ${item.icon_path
-        ? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
-        : nothing}
-      <span slot="headline">${item.primary}</span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
-    </ha-combo-box-item>
-  `;
+  private _rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => {
+    const manual = item.id === MANUAL_ENTRY_ID;
+    const { port_type, used_by, description } = item as SerialPickerItem;
+    return html`
+      <ha-combo-box-item
+        type="button"
+        compact
+        .borderTop=${manual}
+        style=${styleMap({
+          marginTop: manual ? "var(--ha-space-3)" : "",
+          opacity: port_type === "not_recommended" ? "0.6" : "",
+          backgroundColor:
+            port_type === "recommended"
+              ? "var(--ha-assist-chip-active-container-color)"
+              : "",
+        })}
+      >
+        ${item.icon_path
+          ? html`<ha-svg-icon
+              slot="start"
+              .path=${item.icon_path}
+            ></ha-svg-icon>`
+          : nothing}
+        <span slot="headline" style="white-space: normal">${item.primary}</span>
+        ${used_by
+          ? html`<span slot="supporting-text" style="white-space: normal"
+              >${used_by}</span
+            >`
+          : nothing}
+        ${description
+          ? html`<span slot="supporting-text" style="white-space: normal"
+              >${description}</span
+            >`
+          : nothing}
+        ${item.secondary
+          ? html`<span slot="supporting-text" style="white-space: normal"
+              >${item.secondary}</span
+            >`
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
 
   protected render() {
     const usbLoaded = this.hass && isComponentLoaded(this.hass.config, "usb");
@@ -393,7 +535,8 @@ export class HaSerialPortSelector extends LitElement {
         this.hass.locale.language,
         this.hass.devices,
         this.hass.areas,
-        this.hass.localize
+        this.hass.localize,
+        this._recommendedDomains
       )
     )
       .flat()
@@ -415,13 +558,12 @@ export class HaSerialPortSelector extends LitElement {
       this.hass.locale.language,
       this.hass.devices,
       this.hass.areas,
-      this.hass.localize
+      this.hass.localize,
+      this._recommendedDomains
     );
     return SECTION_ORDER.filter((type) => grouped[type].length).map((type) => ({
       id: type,
-      label: this.hass.localize(
-        `ui.components.selectors.serial_port.type.${type}` as const
-      ),
+      label: this._sectionLabel(type),
     }));
   }
 

src/components/ha-selector/ha-selector-ui-clock-date-format.ts

@@ -1,41 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { UiClockDateFormatSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-clock-date-format-picker";
-
-@customElement("ha-selector-ui_clock_date_format")
-export class HaSelectorUiClockDateFormat extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: UiClockDateFormatSelector;
-
-  @property() public value?: string | string[];
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-clock-date-format-picker
-        .hass=${this.hass}
-        .value=${this.value}
-        .label=${this.label}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-clock-date-format-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-ui_clock_date_format": HaSelectorUiClockDateFormat;
-  }
-}

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

@@ -13,6 +13,7 @@ import type { HomeAssistant } from "../../types";
 const LOAD_ELEMENTS = {
   action: () => import("./ha-selector-action"),
   addon: () => import("./ha-selector-addon"),
+  automation_behavior: () => import("./ha-selector-automation-behavior"),
   app: () => import("./ha-selector-app"),
   area: () => import("./ha-selector-area"),
   areas_display: () => import("./ha-selector-areas-display"),
@@ -64,7 +65,6 @@ const LOAD_ELEMENTS = {
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
-  ui_clock_date_format: () => import("./ha-selector-ui-clock-date-format"),
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
 };

src/components/ha-service-icon.ts

@@ -32,7 +32,11 @@ export class HaServiceIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(this.hass, this.service).then((icn) => {
+    const icon = serviceIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.service
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-service-picker.ts

@@ -54,7 +54,7 @@ class HaServicePicker extends LitElement {
   protected firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.hass.loadBackendTranslation("services");
-    getServiceIcons(this.hass);
+    getServiceIcons(this.hass.connection, this.hass.config);
   }
 
   private _rowRenderer: RenderItemFunction<ServiceComboBoxItem> = (

src/components/ha-service-section-icon.ts

@@ -29,14 +29,17 @@ export class HaServiceSectionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceSectionIcon(this.hass, this.service, this.section).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
+    const icon = serviceSectionIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.service,
+      this.section
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
       }
-    );
+      return this._renderFallback();
+    });
 
     return html`${until(icon)}`;
   }

src/components/ha-sidebar.ts

@@ -36,14 +36,15 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
-import "./ha-fade-in";
+import { isMobileClient } from "../util/is_mobile";
+import "./animation/ha-fade-in";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-md-list";
-import "./ha-md-list-item";
 import "./ha-spinner";
 import "./ha-svg-icon";
 import "./ha-tooltip";
+import "./item/ha-list-item-button";
+import "./list/ha-list-nav";
 import "./user/ha-user-badge";
 
 const SORT_VALUE_URL_PATHS = {
@@ -352,12 +353,12 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
 
   private _renderAllPanels(selectedPanel: string) {
     const renderList = (content, cls: string, scrollable: boolean) =>
-      html`<ha-md-list
+      html`<ha-list-nav
         class=${classMap({
           "ha-scrollbar": scrollable,
           [cls]: true,
         })}
-        >${content}</ha-md-list
+        >${content}</ha-list-nav
       >`;
 
     if (!this._panelOrder || !this._hiddenPanels) {
@@ -429,9 +430,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
     const iconPath = getPanelIconPath(panel);
 
     return html`
-      <ha-md-list-item
+      <ha-list-item-button
         .href=${`/${urlPath}`}
-        type="link"
         id="sidebar-panel-${urlPath}"
         class=${classMap({ selected: isSelected })}
       >
@@ -439,7 +439,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
           : html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
         <span class="item-text" slot="headline">${title}</span>
-      </ha-md-list-item>
+      </ha-list-item-button>
       ${!this.alwaysExpand && title
         ? this._renderToolTip(`sidebar-panel-${urlPath}`, title)
         : nothing}
@@ -456,9 +456,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
     }
     const isSelected = selectedPanel === "config";
     return html`
-      <ha-md-list-item
+      <ha-list-item-button
         class="configuration ${classMap({ selected: isSelected })}"
-        type="button"
         href="/config"
         id="sidebar-config"
       >
@@ -480,7 +479,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
               >
             `
           : nothing}
-      </ha-md-list-item>
+      </ha-list-item-button>
       ${!this.alwaysExpand
         ? this._renderToolTip(
             "sidebar-config",
@@ -496,10 +495,9 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
       : 0;
 
     return html`
-      <ha-md-list-item
+      <ha-list-item-button
         class="notifications"
         @click=${this._handleShowNotificationDrawer}
-        type="button"
         id="sidebar-notifications"
       >
         <ha-svg-icon slot="start" .path=${mdiBell}></ha-svg-icon>
@@ -514,7 +512,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
         ${notificationCount > 0
           ? html`<span class="badge" slot="end">${notificationCount}</span>`
           : nothing}
-      </ha-md-list-item>
+      </ha-list-item-button>
       ${!this.alwaysExpand
         ? this._renderToolTip(
             "sidebar-notifications",
@@ -529,9 +527,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
     const isSelected = selectedPanel === "profile";
 
     return html`
-      <ha-md-list-item
+      <ha-list-item-button
         href="/profile"
-        type="link"
         id="sidebar-profile"
         class=${classMap({
           user: true,
@@ -547,7 +544,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
         <span class="item-text" slot="headline"
           >${this.hass.user ? this.hass.user.name : ""}</span
         >
-      </ha-md-list-item>
+      </ha-list-item-button>
       ${!this.alwaysExpand && this.hass.user
         ? this._renderToolTip("sidebar-profile", this.hass.user.name)
         : nothing}
@@ -559,16 +556,15 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
       return nothing;
     }
     return html`
-      <ha-md-list-item
+      <ha-list-item-button
         @click=${this._handleExternalAppConfiguration}
-        type="button"
         id="sidebar-external-config"
       >
         <ha-svg-icon slot="start" .path=${mdiCellphoneCog}></ha-svg-icon>
         <span class="item-text" slot="headline"
           >${this.hass.localize("ui.sidebar.external_app_configuration")}</span
         >
-      </ha-md-list-item>
+      </ha-list-item-button>
       ${!this.alwaysExpand
         ? this._renderToolTip(
             "sidebar-external-config",
@@ -579,6 +575,10 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
   }
 
   private _renderToolTip(id: string, text: string) {
+    if (isMobileClient) {
+      return nothing;
+    }
+
     return html`<ha-tooltip
       for=${id}
       show-delay="0"
@@ -713,10 +713,10 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           flex: 1;
         }
 
-        ha-md-list {
+        ha-list-nav {
           overflow-x: hidden;
-          background: none;
           margin-left: var(--safe-area-inset-left, 0px);
+          margin-block: var(--ha-space-2);
         }
 
         .wrapper {
@@ -726,42 +726,38 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           min-height: 0;
           flex: 1;
         }
-        ha-md-list.before-spacer {
+        ha-list-nav.before-spacer {
           padding-bottom: 0;
         }
-        ha-md-list.after-spacer {
+        ha-list-nav.after-spacer {
           padding-top: 0;
           min-height: fit-content;
         }
 
-        ha-md-list-item {
+        ha-list-item-button {
           flex-shrink: 0;
-          box-sizing: border-box;
-          margin: var(--ha-space-1);
+          margin: 0 var(--ha-space-1) var(--ha-space-1);
           border-radius: var(--ha-border-radius-sm);
-          --md-list-item-one-line-container-height: var(--ha-space-10);
-          --md-list-item-top-space: 0;
-          --md-list-item-bottom-space: 0;
+          --ha-row-item-min-height: var(--ha-space-10);
+          --ha-row-item-padding-block: 0;
           width: var(--ha-space-12);
           position: relative;
-          --md-list-item-label-text-color: var(--sidebar-text-color);
-          --md-list-item-leading-space: var(--ha-space-3);
-          --md-list-item-trailing-space: var(--ha-space-3);
-          --md-list-item-leading-icon-size: var(--ha-space-6);
           transition: width var(--ha-animation-duration-normal) ease;
         }
-        :host([expanded]) ha-md-list-item {
+        ha-list-item-button::part(headline) {
+          color: var(--sidebar-text-color);
+        }
+        :host([expanded]) ha-list-item-button {
           width: 248px;
         }
-        :host([narrow][expanded]) ha-md-list-item {
+        :host([narrow][expanded]) ha-list-item-button {
           width: calc(240px - var(--safe-area-inset-left, 0px));
         }
 
-        ha-md-list-item.selected {
-          --md-list-item-label-text-color: var(--sidebar-selected-icon-color);
-          --md-ripple-hover-color: var(--sidebar-selected-icon-color);
+        ha-list-item-button.selected::part(headline) {
+          color: var(--sidebar-selected-icon-color);
         }
-        ha-md-list-item.selected::before {
+        ha-list-item-button.selected::before {
           border-radius: var(--ha-border-radius-sm);
           position: absolute;
           top: 0;
@@ -783,12 +779,12 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           color: var(--sidebar-icon-color);
         }
 
-        ha-md-list-item.selected ha-svg-icon[slot="start"],
-        ha-md-list-item.selected ha-icon[slot="start"] {
+        ha-list-item-button.selected ha-svg-icon[slot="start"],
+        ha-list-item-button.selected ha-icon[slot="start"] {
           color: var(--sidebar-selected-icon-color);
         }
 
-        ha-md-list-item .item-text {
+        ha-list-item-button .item-text {
           display: block;
           max-width: 0;
           opacity: 0;
@@ -801,7 +797,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
             max-width var(--ha-animation-duration-normal) ease,
             opacity var(--ha-animation-duration-normal) ease;
         }
-        :host([expanded]) ha-md-list-item .item-text {
+        :host([expanded]) ha-list-item-button .item-text {
           max-width: 100%;
           opacity: 1;
           transition-delay: 0ms, 80ms;
@@ -843,13 +839,17 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           pointer-events: none;
         }
 
-        ha-md-list-item.user {
-          --md-list-item-leading-icon-size: var(--ha-space-10);
-          --md-list-item-leading-space: var(--ha-space-1);
+        ha-user-badge {
+          width: var(--ha-space-10);
+          height: var(--ha-space-10);
         }
 
-        ha-md-list-item.user.rtl {
-          --md-list-item-leading-space: var(--ha-space-3);
+        ha-list-item-button.user {
+          --ha-row-item-padding-inline: var(--ha-space-2) var(--ha-space-3);
+        }
+
+        ha-list-item-button.user.rtl {
+          --ha-row-item-padding-inline: var(--ha-space-4) var(--ha-space-3);
         }
 
         ha-user-badge {
@@ -869,8 +869,8 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
 
         @media (prefers-reduced-motion: reduce) {
           .menu,
-          ha-md-list-item,
-          ha-md-list-item .item-text,
+          ha-list-item-button,
+          ha-list-item-button .item-text,
           .title {
             transition: 1ms;
           }

src/components/ha-switch.ts

@@ -33,6 +33,7 @@ import { forwardHaptic } from "../data/haptics";
  * @cssprop --ha-switch-checked-thumb-border-color-hover - Border color of the checked thumb on hover.
  * @cssprop --ha-switch-thumb-box-shadow - The box shadow of the thumb. Defaults to `var(--ha-box-shadow-s)`.
  * @cssprop --ha-switch-disabled-opacity - Opacity of the switch when disabled. Defaults to `0.2`.
+ * @cssprop --ha-switch-min-touch-size - Minimum touch target size around the switch. Defaults to `40px`.
  * @cssprop --ha-switch-required-marker - The marker shown after the label for required fields. Defaults to `"*"`.
  * @cssprop --ha-switch-required-marker-offset - Offset of the required marker. Defaults to `0.1rem`.
  *
@@ -89,8 +90,23 @@ export class HaSwitch extends Switch {
         }
 
         label {
+          position: relative;
           height: max(var(--thumb-size), var(--wa-form-control-toggle-size));
         }
+        label::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 100%;
+          min-width: var(--ha-switch-min-touch-size, 40px);
+          min-height: var(--ha-switch-min-touch-size, 40px);
+        }
+        label.disabled::before {
+          pointer-events: none;
+        }
 
         .switch {
           background-color: var(

src/components/ha-target-picker.ts

@@ -157,12 +157,24 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     ),
   };
 
+  @state() private _pendingEntityId?: string;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
 
     if (!this.hasUpdated) {
       this._loadConfigEntries();
     }
+
+    if (
+      this._pendingEntityId &&
+      changedProps.has("hass") &&
+      this.hass.states !== changedProps.get("hass")?.states &&
+      this.hass.states[this._pendingEntityId]
+    ) {
+      this._addTarget(this._pendingEntityId, "entity");
+      this._pendingEntityId = undefined;
+    }
   }
 
   private _createFuseIndex = (states, keys: FuseWeightedKey[]) =>
@@ -532,10 +544,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       domain,
       dialogClosedCallback: (item) => {
         if (item.entityId) {
-          // prevent error that new entity_id isn't in hass object
-          requestAnimationFrame(() => {
-            this._addTarget(item.entityId!, "entity");
-          });
+          if (this.hass.states[item.entityId]) {
+            this._addTarget(item.entityId, "entity");
+          } else {
+            this._pendingEntityId = item.entityId;
+          }
         }
       },
     });

src/components/ha-trace-picker.ts

@@ -0,0 +1,185 @@
+import {
+  mdiAlertCircleOutline,
+  mdiCheckCircleOutline,
+  mdiChevronDown,
+  mdiHelpCircleOutline,
+  mdiProgressClock,
+  mdiProgressWrench,
+  mdiStopCircleOutline,
+} from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import type { HomeAssistant } from "../types";
+import type { Trace } from "../data/trace";
+import "./ha-button";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+
+@customElement("ha-trace-picker")
+class HaTracePicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public traces!: Trace[];
+
+  @property({ attribute: false }) public value?: string;
+
+  @query("ha-generic-picker") private tracePicker?: HaGenericPicker;
+
+  protected render() {
+    return html` <ha-generic-picker
+      name="trace"
+      .hass=${this.hass}
+      .label=${this.hass.localize(
+        "ui.panel.config.automation.trace.select_trace"
+      )}
+      .value=${this.value}
+      .getItems=${this._getTraces}
+      required
+    >
+      <ha-button
+        slot="field"
+        appearance="filled"
+        variant="neutral"
+        size="small"
+        @click=${this._openPicker}
+      >
+        ${this._renderTracePickerValue(this.value!)}
+        <ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
+      </ha-button>
+    </ha-generic-picker>`;
+  }
+
+  private _openPicker(ev: Event) {
+    ev.stopPropagation();
+    this.tracePicker?.open();
+  }
+
+  private _getTraces = (): PickerComboBoxItem[] =>
+    this.traces?.map((trace) => {
+      const renderRuntime = () =>
+        (
+          (new Date(trace.timestamp.finish!).getTime() -
+            new Date(trace.timestamp.start).getTime()) /
+          1000
+        ).toFixed(2);
+
+      const item: PickerComboBoxItem = {
+        id: trace.run_id,
+        primary: formatDateTimeWithSeconds(
+          new Date(trace.timestamp.start),
+          this.hass.locale,
+          this.hass.config
+        ),
+      };
+      if (trace.state === "running") {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.still_running"
+        );
+        item.icon_path = mdiProgressClock;
+      } else if (trace.state === "debugged") {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.debugged"
+        );
+        item.icon_path = mdiProgressWrench;
+      } else if (trace.script_execution === "finished") {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.finished",
+          {
+            executiontime: renderRuntime(),
+          }
+        );
+        item.icon_path = mdiCheckCircleOutline;
+      } else if (trace.script_execution === "aborted") {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.aborted",
+          {
+            executiontime: renderRuntime(),
+          }
+        );
+        item.icon_path = mdiAlertCircleOutline;
+      } else if (trace.script_execution === "cancelled") {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.cancelled",
+          {
+            executiontime: renderRuntime(),
+          }
+        );
+        item.icon_path = mdiAlertCircleOutline;
+      } else {
+        let message:
+          | "stopped_failed_conditions"
+          | "stopped_failed_single"
+          | "stopped_failed_max_runs"
+          | "stopped_error"
+          | "stopped_unknown_reason";
+        let error: string | undefined;
+        let icon: string;
+
+        switch (trace.script_execution) {
+          case "failed_conditions":
+            message = "stopped_failed_conditions";
+            icon = mdiStopCircleOutline;
+            break;
+          case "failed_single":
+            message = "stopped_failed_single";
+            icon = mdiStopCircleOutline;
+            break;
+          case "failed_max_runs":
+            message = "stopped_failed_max_runs";
+            icon = mdiStopCircleOutline;
+            break;
+          case "error":
+            message = "stopped_error";
+            error = trace.error!;
+            icon = mdiAlertCircleOutline;
+            break;
+          default:
+            message = "stopped_unknown_reason";
+            icon = mdiHelpCircleOutline;
+        }
+
+        item.secondary = this.hass.localize(
+          `ui.panel.config.automation.trace.picker.${message}`,
+          {
+            error,
+            executiontime: renderRuntime(),
+          }
+        );
+        item.icon_path = icon;
+      }
+      return item;
+    }) ?? [];
+
+  private _renderTracePickerValue = (runId: string) => {
+    const trace = this.traces?.find((t) => t.run_id === runId);
+    return html`${trace
+      ? formatDateTimeWithSeconds(
+          new Date(trace.timestamp.start),
+          this.hass.locale,
+          this.hass.config
+        )
+      : runId}`;
+  };
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        ha-generic-picker {
+          width: 100%;
+        }
+        ha-button {
+          width: 100%;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-trace-picker": HaTracePicker;
+  }
+}

src/components/ha-trigger-icon.ts

@@ -69,7 +69,11 @@ export class HaTriggerIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(this.hass, this.trigger).then((icn) => {
+    const icon = triggerIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.trigger
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-yaml-editor.ts

@@ -8,7 +8,6 @@ import { copyToClipboard } from "../common/util/copy-clipboard";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
-import "./ha-alert";
 import "./ha-button";
 import "./ha-code-editor";
 import type { HaCodeEditor } from "./ha-code-editor";
@@ -58,15 +57,8 @@ export class HaYamlEditor extends LitElement {
   @property({ attribute: "has-extra-actions", type: Boolean })
   public hasExtraActions = false;
 
-  @property({ attribute: "show-errors", type: Boolean })
-  public showErrors = true;
-
   @state() private _yaml = "";
 
-  @state() private _error = "";
-
-  @state() private _showingError = false;
-
   @query("ha-code-editor") _codeEditor?: HaCodeEditor;
 
   public setValue(value): void {
@@ -126,16 +118,14 @@ export class HaYamlEditor extends LitElement {
         .disableFullscreen=${this.disableFullscreen}
         .inDialog=${this.inDialog}
         mode="yaml"
+        lint
         autocomplete-entities
         autocomplete-icons
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
-        @blur=${this._onBlur}
+        @editor-save=${this._onEditorSave}
         dir="ltr"
       ></ha-code-editor>
-      ${this._showingError
-        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-        : nothing}
       ${this.copyClipboard || this.hasExtraActions
         ? html`
             <div class="card-actions">
@@ -158,9 +148,13 @@ export class HaYamlEditor extends LitElement {
   private _onChange(ev: CustomEvent): void {
     ev.stopPropagation();
     this._yaml = ev.detail.value;
-    let parsed;
+    let parsed: unknown;
     let isValid = true;
-    let errorMsg;
+    let errorMsg: string | undefined;
+    let yamlError: {
+      mark?: { position: number; line: number; column: number };
+      message?: string;
+    } | null = null;
 
     if (this._yaml) {
       try {
@@ -168,15 +162,13 @@ export class HaYamlEditor extends LitElement {
       } catch (err: any) {
         // Invalid YAML
         isValid = false;
+        yamlError = err;
         errorMsg = `${this.hass.localize("ui.components.yaml-editor.error", { reason: err.reason })}${err.mark ? ` (${this.hass.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
       }
     } else {
       parsed = {};
     }
-    this._error = errorMsg ?? "";
-    if (isValid) {
-      this._showingError = false;
-    }
+    this._codeEditor?.setYamlError(yamlError);
 
     this.value = parsed;
     this.isValid = isValid;
@@ -188,16 +180,23 @@ export class HaYamlEditor extends LitElement {
     } as any);
   }
 
-  private _onBlur(): void {
-    if (this.showErrors && this._error) {
-      this._showingError = true;
-    }
-  }
-
   get yaml() {
     return this._yaml;
   }
 
+  get codemirror() {
+    return this._codeEditor?.codemirror;
+  }
+
+  get hasComments(): boolean {
+    return this._codeEditor?.hasComments ?? false;
+  }
+
+  private _onEditorSave(ev: CustomEvent): void {
+    fireEvent(this, "editor-save");
+    ev.stopPropagation();
+  }
+
   private async _copyYaml(): Promise<void> {
     if (this.yaml) {
       await copyToClipboard(this.yaml);

src/components/input/ha-input-search.ts

@@ -1,8 +1,6 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiMagnify } from "@mdi/js";
 import { css, html, type PropertyValues } from "lit";
-import { customElement, state } from "lit/decorators";
-import { internationalizationContext } from "../../data/context";
+import { customElement } from "lit/decorators";
 import { HaInput } from "./ha-input";
 
 /**
@@ -17,10 +15,6 @@ import { HaInput } from "./ha-input";
  */
 @customElement("ha-input-search")
 export class HaInputSearch extends HaInput {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
   constructor() {
     super();
     this.withClear = true;
@@ -35,7 +29,7 @@ export class HaInputSearch extends HaInput {
       !this.placeholder &&
       (!this.hasUpdated || changedProps.has("_i18n"))
     ) {
-      this.placeholder = this._i18n.localize("ui.common.search");
+      this.placeholder = this.i18n?.localize?.("ui.common.search") || "Search";
     }
   }
 

src/components/input/ha-input.ts

@@ -2,19 +2,21 @@ import "@home-assistant/webawesome/dist/components/animation/animation";
 import "@home-assistant/webawesome/dist/components/input/input";
 import type WaInput from "@home-assistant/webawesome/dist/components/input/input";
 import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
+import { consume, type ContextType } from "@lit/context";
 import { mdiClose, mdiEye, mdiEyeOff } from "@mdi/js";
 import {
-  LitElement,
-  type PropertyValues,
-  type TemplateResult,
   css,
   html,
+  LitElement,
   nothing,
+  type PropertyValues,
+  type TemplateResult,
 } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { stopPropagation } from "../../common/dom/stop_propagation";
+import { internationalizationContext } from "../../data/context";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "../ha-tooltip";
@@ -125,6 +127,10 @@ export class HaInput extends WaInputMixin(LitElement) {
   @query("wa-input")
   private _input?: WaInput;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  protected i18n?: ContextType<typeof internationalizationContext>;
+
   private readonly _hasSlotController = new HasSlotController(
     this,
     "label",
@@ -233,19 +239,22 @@ export class HaInput extends WaInputMixin(LitElement) {
           ${this.renderStartDefault()}
         </slot>
         <slot name="end" slot="end"> ${this.renderEndDefault()} </slot>
-        <slot name="clear-icon" slot="clear-icon">
-          <ha-icon-button .path=${mdiClose}></ha-icon-button>
-        </slot>
-        <slot name="show-password-icon" slot="show-password-icon">
+        <slot name="clear-button" slot="clear-button">
           <ha-icon-button
-            @keydown=${stopPropagation}
-            .path=${mdiEye}
+            @click=${this._handleClearClick}
+            .label=${this.i18n?.localize?.("ui.components.input.clear") ||
+            "Clear"}
+            .path=${mdiClose}
           ></ha-icon-button>
         </slot>
-        <slot name="hide-password-icon" slot="hide-password-icon">
+        <slot name="password-toggle-button" slot="password-toggle-button">
           <ha-icon-button
             @keydown=${stopPropagation}
-            .path=${mdiEyeOff}
+            @click=${this._handlePasswordToggle}
+            .label=${this.i18n?.localize?.(
+              `ui.components.input.${this.passwordVisible ? "hide_password" : "show_password"}`
+            ) || (this.passwordVisible ? "Hide password" : "Show password")}
+            .path=${this.passwordVisible ? mdiEyeOff : mdiEye}
           ></ha-icon-button>
         </slot>
         <div
@@ -293,6 +302,14 @@ export class HaInput extends WaInputMixin(LitElement) {
     }
   };
 
+  private _handleClearClick() {
+    this._input?.clear();
+  }
+
+  private _handlePasswordToggle() {
+    this.passwordVisible = !this.passwordVisible;
+  }
+
   static styles = [
     waInputStyles,
     css`
@@ -414,6 +431,12 @@ export class HaInput extends WaInputMixin(LitElement) {
         color: var(--ha-color-text-secondary);
       }
 
+      ha-icon-button {
+        display: flex;
+        align-items: center;
+        color: var(--ha-color-text-secondary);
+      }
+
       :host([appearance="outlined"]) wa-input.no-label {
         --ha-icon-button-size: 24px;
         --mdc-icon-size: 18px;

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

@@ -0,0 +1,101 @@
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HaRowItem } from "./ha-row-item";
+
+/**
+ * @element ha-list-item-base
+ * @extends {HaRowItem}
+ *
+ * @summary
+ * Non-interactive list row (role `listitem`). Base class for
+ * `ha-list-item-button`, `ha-list-item-option`.
+ *
+ * @cssprop --ha-list-item-focus-radius - Focus outline border-radius.
+ * @cssprop --ha-list-item-focus-width - Focus outline width (steady state).
+ * @cssprop --ha-list-item-focus-width-start - Focus outline width at the start of the focus-in animation.
+ * @cssprop --ha-list-item-focus-offset - Focus outline offset.
+ * @cssprop --ha-list-item-focus-background - Background color applied on keyboard focus.
+ *
+ * @attr {boolean} interactive - Opts the row into the parent list's roving tabindex. Interactive subclasses set this automatically.
+ */
+@customElement("ha-list-item-base")
+export class HaListItemBase extends HaRowItem {
+  /**
+   * Whether the item takes keyboard focus. Read by the parent list to decide
+   * if it should be part of the roving-tabindex ring. Interactive subclasses
+   * (`ha-list-item-button`, `-option`, `-todo`) override the default to `true`.
+   * For the plain base row, set the `interactive` attribute to opt into focus
+   * (useful for sortable rows where you need keyboard reorder but no click
+   * action).
+   */
+  @property({ type: Boolean, reflect: true }) public interactive = false;
+
+  /** Host `role` attribute. Subclasses override. */
+  protected readonly defaultRole: string = "listitem";
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", this.defaultRole);
+    }
+  }
+
+  /**
+   * Activate the item (Enter/Space from the parent list). Default dispatches
+   * a click on the host. Subclasses that wrap a native element (e.g. `<a>`)
+   * override this to click the inner element so browser default actions
+   * (like anchor navigation) fire.
+   */
+  public activate(): void {
+    this.click();
+  }
+
+  static styles: CSSResultGroup = [
+    HaRowItem.styles,
+    css`
+      :host {
+        --ha-list-item-focus-radius: var(--ha-border-radius-sm);
+        --ha-list-item-focus-width: 2px;
+        --ha-list-item-focus-width-start: var(--ha-space-2);
+        --ha-list-item-focus-offset: -2px;
+        --ha-list-item-focus-background: var(
+          --ha-color-fill-neutral-quiet-hover
+        );
+      }
+      :host(:focus) {
+        outline: none;
+      }
+      .base {
+        border-radius: var(--ha-list-item-focus-radius);
+        outline: var(--ha-list-item-focus-width) solid transparent;
+        outline-offset: var(--ha-list-item-focus-offset);
+        transition:
+          outline-color var(--ha-animation-duration-fast) ease-out,
+          background-color var(--ha-animation-duration-fast) ease-out;
+      }
+      @keyframes ha-list-item-focus-in {
+        from {
+          outline-width: var(--ha-list-item-focus-width-start);
+          outline-offset: calc(-1 * var(--ha-list-item-focus-width-start));
+        }
+        to {
+          outline-width: var(--ha-list-item-focus-width);
+          outline-offset: var(--ha-list-item-focus-offset);
+        }
+      }
+      :host(:focus-visible) .base {
+        outline-color: var(--ha-color-focus);
+        background-color: var(--ha-list-item-focus-background);
+        animation: ha-list-item-focus-in var(--ha-animation-duration-normal)
+          ease-in;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-item-base": HaListItemBase;
+  }
+}

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

@@ -0,0 +1,109 @@
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import "../ha-ripple";
+import { HaListItemBase } from "./ha-list-item-base";
+
+/**
+ * @element ha-list-item-button
+ * @extends {HaListItemBase}
+ *
+ * @summary
+ * Interactive list row. Renders an inner `<a>` when `href` is set, otherwise
+ * a `<button>`. The full row is the hit target. When placed in a list using
+ * roving tabindex, the host is the tab stop and the inner element carries
+ * `tabindex="-1"`. For a non-interactive row, use `ha-list-item-base`.
+ *
+ * @csspart ripple - The ripple effect element.
+ *
+ * @attr {string} href - URL. When set, renders an `<a>` instead of a `<button>`.
+ * @attr {string} target - Anchor `target` attribute (requires `href`).
+ * @attr {string} rel - Anchor `rel` attribute (requires `href`).
+ * @attr {string} download - Anchor `download` attribute (requires `href`).
+ */
+@customElement("ha-list-item-button")
+export class HaListItemButton extends HaListItemBase {
+  public override interactive = true;
+
+  @property({ type: String }) public href?: string;
+
+  @property({ type: String }) public target?: string;
+
+  @property({ type: String }) public rel?: string;
+
+  @property({ type: String }) public download?: string;
+
+  public override activate(): void {
+    this.renderRoot.querySelector<HTMLElement>("#item")?.click();
+  }
+
+  protected _renderBase(inner: TemplateResult): TemplateResult {
+    if (this.href !== undefined) {
+      return html`<a
+        part="base"
+        class="base interactive"
+        id="item"
+        href=${ifDefined(this.disabled ? undefined : this.href)}
+        target=${ifDefined(this.target)}
+        rel=${ifDefined(this.rel)}
+        download=${ifDefined(this.download)}
+        tabindex="-1"
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        ${this._renderRipple()}${inner}
+      </a>`;
+    }
+    return html`<button
+      part="base"
+      class="base interactive"
+      id="item"
+      type="button"
+      ?disabled=${this.disabled}
+      tabindex="-1"
+    >
+      ${this._renderRipple()}${inner}
+    </button>`;
+  }
+
+  private _renderRipple() {
+    return html`<ha-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}
+    ></ha-ripple>`;
+  }
+
+  static styles: CSSResultGroup = [
+    HaListItemBase.styles,
+    css`
+      :host {
+        cursor: pointer;
+        --ha-ripple-color: var(--primary-text-color);
+      }
+      :host([disabled]) {
+        cursor: default;
+      }
+      .base.interactive {
+        width: 100%;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        text-align: inherit;
+        text-decoration: none;
+        appearance: none;
+        cursor: inherit;
+      }
+      :host([disabled]) .base.interactive {
+        color: var(--disabled-text-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-item-button": HaListItemButton;
+  }
+}

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

@@ -0,0 +1,132 @@
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../ha-checkbox";
+import "../ha-ripple";
+import { HaListItemBase } from "./ha-list-item-base";
+
+export type HaListItemOptionAppearance = "line" | "checkbox";
+
+export type HaListItemOptionSelectionPosition = "start" | "end";
+
+/**
+ * @element ha-list-item-option
+ * @extends {HaListItemBase}
+ *
+ * @summary
+ * Selectable list row (role `option`). Selection state is driven by the parent
+ * `ha-list-selectable`; reflects `aria-selected`. When `appearance="checkbox"`, renders
+ * a decorative `<ha-checkbox>` (clicks on the row are handled by the listbox).
+ *
+ * @csspart checkbox - Wrapper around the `<ha-checkbox>` when `appearance="checkbox"`.
+ * @csspart ripple - The ripple effect element.
+ *
+ * @cssprop --ha-list-item-selected-background - Background color when selected (`appearance="line"`).
+ *
+ * @attr {boolean} selected - Whether the option is selected. Set by the parent `ha-list-selectable`.
+ * @attr {string} value - Value identifying the option.
+ * @attr {("line"|"checkbox")} appearance - Visual style. "line" highlights the row; "checkbox" renders an `ha-checkbox`.
+ * @attr {("start"|"end")} selection-position - Side the checkbox sits on when `appearance="checkbox"`.
+ */
+@customElement("ha-list-item-option")
+export class HaListItemOption extends HaListItemBase {
+  @property({ type: Boolean, reflect: true }) public selected = false;
+
+  @property({ type: String }) public value?: string;
+
+  @property({ type: String, reflect: true })
+  public appearance: HaListItemOptionAppearance = "line";
+
+  @property({ type: String, reflect: true, attribute: "selection-position" })
+  public selectionPosition: HaListItemOptionSelectionPosition = "start";
+
+  protected override readonly defaultRole = "option";
+
+  public override interactive = true;
+
+  public update(changed: Map<string, unknown>) {
+    super.update(changed);
+    if (changed.has("selected")) {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    }
+    if (changed.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+  }
+
+  protected _renderBase(inner: TemplateResult): TemplateResult {
+    return html`<div part="base" class="base" id="item">
+      ${this._renderRipple()}${this.selectionPosition === "start"
+        ? this._renderCheckbox()
+        : nothing}${inner}${this.selectionPosition === "end"
+        ? this._renderCheckbox()
+        : nothing}
+    </div>`;
+  }
+
+  private _renderRipple() {
+    return html`<ha-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}
+    ></ha-ripple>`;
+  }
+
+  private _renderCheckbox() {
+    if (this.appearance !== "checkbox") {
+      return nothing;
+    }
+
+    return html`<div part="checkbox" class="checkbox" inert>
+      <ha-checkbox
+        .checked=${this.selected}
+        .disabled=${this.disabled}
+      ></ha-checkbox>
+    </div>`;
+  }
+
+  static styles: CSSResultGroup = [
+    HaListItemBase.styles,
+    css`
+      :host {
+        cursor: pointer;
+        --ha-ripple-color: var(--primary-text-color);
+        --ha-list-item-selected-background: var(
+          --ha-color-fill-primary-quiet-resting,
+          rgba(var(--rgb-primary-color), 0.08)
+        );
+      }
+      :host([disabled]) {
+        cursor: default;
+      }
+      .base {
+        cursor: inherit;
+      }
+      :host([appearance="line"][selected]:not([disabled])) .base,
+      :host([appearance="line"][active]:not([disabled])) .base {
+        background-color: var(--ha-list-item-selected-background);
+      }
+      :host([appearance="line"][selected]:not([disabled])) {
+        color: var(--primary-color);
+      }
+      .checkbox {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        pointer-events: none;
+      }
+      .checkbox ha-checkbox {
+        pointer-events: none;
+      }
+      ha-checkbox::part(base) {
+        gap: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-item-option": HaListItemOption;
+  }
+}

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

@@ -0,0 +1,170 @@
+import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+
+/**
+ * @element ha-row-item
+ * @extends {LitElement}
+ *
+ * @summary
+ * Generic row layout primitive. Renders a horizontal row with optional
+ * leading/trailing slots and a stacked middle column (headline +
+ * supporting text). Role-agnostic; use `ha-list-item-base` and its
+ * subclasses for list semantics.
+ *
+ * @slot start - Leading container (usually icon/avatar).
+ * @slot end - Trailing container (usually meta/chevron).
+ * @slot headline - Primary text (overrides the `headline` attribute).
+ * @slot supporting-text - Secondary text (overrides the `supporting-text` attribute).
+ * @slot content - Escape hatch: replaces the entire middle column (headline + supporting-text).
+ *
+ * @csspart base - The outer container.
+ * @csspart start - The leading slot wrapper.
+ * @csspart content - The middle column wrapper.
+ * @csspart headline - The headline wrapper.
+ * @csspart supporting-text - The supporting-text wrapper.
+ * @csspart end - The trailing slot wrapper.
+ *
+ * @cssprop --ha-row-item-padding-block - Vertical padding inside the row.
+ * @cssprop --ha-row-item-padding-inline - Horizontal padding inside the row.
+ * @cssprop --ha-row-item-gap - Gap between start, content, and end.
+ * @cssprop --ha-row-item-min-height - Minimum row height.
+ *
+ * @attr {string} headline - Primary text. Overridden by the `headline` slot.
+ * @attr {string} supporting-text - Secondary text. Overridden by the `supporting-text` slot.
+ * @attr {boolean} disabled - Dims the row and blocks pointer events.
+ */
+@customElement("ha-row-item")
+export class HaRowItem extends LitElement {
+  @property({ type: String }) public headline?: string;
+
+  @property({ type: String, attribute: "supporting-text" })
+  public supportingText?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected readonly _slotController = new HasSlotController(
+    this,
+    "start",
+    "end",
+    "headline",
+    "supporting-text",
+    "content"
+  );
+
+  protected render(): TemplateResult {
+    return this._renderBase(this._renderInner());
+  }
+
+  protected _renderBase(inner: TemplateResult): TemplateResult {
+    return html`<div part="base" class="base" id="item">${inner}</div>`;
+  }
+
+  protected _renderInner(): TemplateResult {
+    const hasStart = this._slotController.test("start");
+    const hasEnd = this._slotController.test("end");
+    const hasContent = this._slotController.test("content");
+
+    return html`
+      ${hasStart
+        ? html`<div part="start" class="start">
+            <slot name="start"></slot>
+          </div>`
+        : nothing}
+      <div part="content" class="content">
+        ${hasContent
+          ? html`<slot name="content"></slot>`
+          : this._renderDefaultContent()}
+      </div>
+      ${hasEnd
+        ? html`<div part="end" class="end">
+            <slot name="end"></slot>
+          </div>`
+        : nothing}
+    `;
+  }
+
+  protected _renderDefaultContent(): TemplateResult {
+    const hasHeadlineSlot = this._slotController.test("headline");
+    const hasSupportingSlot = this._slotController.test("supporting-text");
+
+    const showHeadline = hasHeadlineSlot || this.headline !== undefined;
+    const showSupporting =
+      hasSupportingSlot || this.supportingText !== undefined;
+
+    return html`
+      ${showHeadline
+        ? html`<div part="headline" class="headline">
+            <slot name="headline">${this.headline ?? nothing}</slot>
+          </div>`
+        : nothing}
+      ${showSupporting
+        ? html`<div part="supporting-text" class="supporting">
+            <slot name="supporting-text"
+              >${this.supportingText ?? nothing}</slot
+            >
+          </div>`
+        : nothing}
+    `;
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      color: var(--primary-text-color);
+      font-size: var(--ha-font-size-m);
+      line-height: var(--ha-line-height-normal);
+      --ha-row-item-padding-block: var(--ha-space-3);
+      --ha-row-item-padding-inline: var(--ha-space-4);
+      --ha-row-item-gap: var(--ha-space-4);
+      --ha-row-item-min-height: 48px;
+    }
+    :host([disabled]) {
+      color: var(--disabled-text-color);
+      pointer-events: none;
+    }
+    .base {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--ha-row-item-gap);
+      padding-block: var(--ha-row-item-padding-block);
+      padding-inline: var(--ha-row-item-padding-inline);
+      min-height: var(--ha-row-item-min-height);
+      box-sizing: border-box;
+    }
+    .content {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .start,
+    .end {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+    }
+    .headline {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .supporting {
+      color: var(--secondary-text-color);
+      font-size: var(--ha-font-size-s);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-row-item": HaRowItem;
+  }
+}

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

@@ -0,0 +1,291 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { tinykeys } from "tinykeys";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HaListItemBase } from "../item/ha-list-item-base";
+import "./types";
+
+/**
+ * @element ha-list-base
+ * @extends {LitElement}
+ *
+ * @summary
+ * Base list container with roving-tabindex keyboard navigation (ArrowUp/Down,
+ * Home/End, optional Enter/Space activation, optional wrap-focus). Discovers
+ * slotted `HaListItemBase` descendants. Subclasses override `hostRole` and/or
+ * `render()` to specialize.
+ *
+ * @slot - List items (`<ha-list-item-*>`).
+ *
+ * @csspart base - The outer container (`<div role="list">`).
+ *
+ * @cssprop --ha-list-gap - Spacing between items. Defaults to `0`.
+ * @cssprop --ha-list-padding - Padding around the list content. Defaults to `0`.
+ *
+ * @attr {boolean} wrap-focus - Whether ArrowUp/Down navigation wraps at the ends.
+ * @attr {string} aria-label - Accessible label for the list.
+ *
+ * @fires ha-list-activated - Fired when an item is activated via Enter/Space. `detail: { index, item }`.
+ */
+@customElement("ha-list-base")
+export class HaListBase extends LitElement {
+  @property({ type: Boolean, attribute: "wrap-focus" })
+  public wrapFocus = false;
+
+  @property({ type: String, attribute: "aria-label", reflect: true })
+  public ariaLabel: string | null = null;
+
+  public items: readonly HaListItemBase[] = [];
+
+  /** Host `role` attribute. Empty string means no role is set. */
+  protected readonly hostRole: string = "list";
+
+  private _activeItemIndex = -1;
+
+  private _firstFocusableIndex = -1;
+
+  private _lastFocusableIndex = -1;
+
+  private _hasFocusableItem = false;
+
+  private _unbindKeys?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("ha-list")) {
+      this.setAttribute("ha-list", "");
+    }
+    if (!this.hasAttribute("role") && this.hostRole) {
+      this.setAttribute("role", this.hostRole);
+    }
+    this._unbindKeys = tinykeys(this, {
+      ArrowDown: this._onForward,
+      ArrowUp: this._onBack,
+      Home: this._onHome,
+      End: this._onEnd,
+      Enter: this._onActivate,
+      Space: this._onActivate,
+    });
+    this.addEventListener("focusin", this._onFocusIn);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unbindKeys?.();
+    this._unbindKeys = undefined;
+    this.removeEventListener("focusin", this._onFocusIn);
+  }
+
+  public firstUpdated(changed: PropertyValues) {
+    super.firstUpdated(changed);
+    this.updateListItems();
+  }
+
+  public focus(options?: FocusOptions) {
+    if (!this.items.length) {
+      super.focus(options);
+      return;
+    }
+    this.focusItemAtIndex(
+      this._activeItemIndex >= 0 ? this._activeItemIndex : 0
+    );
+  }
+
+  public focusItemAtIndex(index: number) {
+    if (index < 0) {
+      return;
+    }
+    this.setActiveItemIndex(index, true);
+  }
+
+  public getActiveItemIndex(): number {
+    return this._activeItemIndex;
+  }
+
+  public setActiveItemIndex(index: number, focusItem = false) {
+    if (!this._hasFocusableItem) {
+      this._activeItemIndex = -1;
+      return;
+    }
+    this._activeItemIndex = Math.max(0, Math.min(this.items.length - 1, index));
+    if (!this._isFocusable(this._activeItemIndex)) {
+      this._activeItemIndex = this._firstFocusableIndex;
+    }
+    this._applyActive(focusItem);
+  }
+
+  public updateListItems() {
+    const next = this._discoverListItems();
+    const changed =
+      next.length !== this.items.length ||
+      next.some((it, i) => it !== this.items[i]);
+    if (!changed) {
+      return;
+    }
+    this.items = next;
+    this._recomputeFocusableIndexes();
+    if (
+      this._activeItemIndex >= next.length ||
+      !this._hasFocusableItem ||
+      this._activeItemIndex < 0
+    ) {
+      this._activeItemIndex = this._firstFocusableIndex;
+    }
+    this._applyActive(false);
+  }
+
+  private _recomputeFocusableIndexes() {
+    let first = -1;
+    let last = -1;
+    for (let i = 0; i < this.items.length; i++) {
+      if (this._isFocusable(i)) {
+        if (first === -1) {
+          first = i;
+        }
+        last = i;
+      }
+    }
+    this._firstFocusableIndex = first;
+    this._lastFocusableIndex = last;
+    this._hasFocusableItem = first !== -1;
+  }
+
+  public handleSlotChange = () => {
+    this.updateListItems();
+  };
+
+  protected render(): TemplateResult {
+    return html`<div part="base" class="base">
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    </div>`;
+  }
+
+  private _discoverListItems(): HaListItemBase[] {
+    const slot =
+      this.renderRoot?.querySelector<HTMLSlotElement>("slot:not([name])");
+    if (!slot) {
+      return [];
+    }
+    return slot
+      .assignedElements({ flatten: true })
+      .filter((el): el is HaListItemBase => el instanceof HaListItemBase);
+  }
+
+  private _isFocusable(index: number): boolean {
+    const item = this.items[index];
+    return !!item && item.interactive && !item.disabled;
+  }
+
+  private _applyActive(focusItem: boolean) {
+    this.items.forEach((item, i) => {
+      if (!item.interactive || item.disabled) {
+        item.removeAttribute("tabindex");
+        return;
+      }
+      item.tabIndex = i === this._activeItemIndex ? 0 : -1;
+    });
+    if (focusItem && this._activeItemIndex >= 0) {
+      this.items[this._activeItemIndex]?.focus();
+    }
+  }
+
+  private _onFocusIn = (ev: FocusEvent) => {
+    const path = ev.composedPath();
+    for (let i = 0; i < this.items.length; i++) {
+      if (path.includes(this.items[i])) {
+        if (i !== this._activeItemIndex) {
+          this._activeItemIndex = i;
+          this._applyActive(false);
+        }
+        return;
+      }
+    }
+  };
+
+  private _onForward = (ev: KeyboardEvent) => {
+    this._moveFocus(ev, this._stepIndex(this._activeItemIndex, 1));
+  };
+
+  private _onBack = (ev: KeyboardEvent) => {
+    this._moveFocus(ev, this._stepIndex(this._activeItemIndex, -1));
+  };
+
+  private _onHome = (ev: KeyboardEvent) => {
+    this._moveFocus(ev, this._firstFocusableIndex);
+  };
+
+  private _onEnd = (ev: KeyboardEvent) => {
+    this._moveFocus(ev, this._lastFocusableIndex);
+  };
+
+  private _onActivate = (ev: KeyboardEvent) => {
+    if (!this._isFocusable(this._activeItemIndex)) {
+      return;
+    }
+    ev.preventDefault();
+    const active = this.items[this._activeItemIndex];
+    active.activate();
+    fireEvent(this, "ha-list-activated", {
+      index: this._activeItemIndex,
+      item: active,
+    });
+  };
+
+  private _moveFocus(ev: KeyboardEvent, next: number) {
+    if (!this._hasFocusableItem || next < 0 || next === this._activeItemIndex) {
+      return;
+    }
+    ev.preventDefault();
+    this._activeItemIndex = next;
+    this._applyActive(true);
+  }
+
+  /**
+   * Step from `from` by `delta`, skipping non-interactive and disabled items.
+   * Returns `from` when no other focusable item can be reached (honouring
+   * `wrapFocus`).
+   */
+  private _stepIndex(from: number, delta: 1 | -1): number {
+    const n = this.items.length;
+    if (!n || !this._hasFocusableItem) {
+      return from;
+    }
+    let i = from;
+    for (let step = 0; step < n; step++) {
+      i += delta;
+      if (i < 0 || i >= n) {
+        if (!this.wrapFocus) {
+          return from;
+        }
+        i = (i + n) % n;
+      }
+      if (this._isFocusable(i)) {
+        return i;
+      }
+    }
+    return from;
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      --ha-list-gap: 0;
+      --ha-list-padding: 0;
+    }
+    .base {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-list-gap);
+      padding: var(--ha-list-padding);
+      margin: 0;
+      list-style: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-base": HaListBase;
+  }
+}

src/components/list/ha-list-nav.ts

@@ -0,0 +1,44 @@
+import type { TemplateResult } from "lit";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { HaListBase } from "./ha-list-base";
+
+/**
+ * @element ha-list-nav
+ * @extends {HaListBase}
+ *
+ * @summary
+ * Navigation list. Wraps the list in a `<nav>` landmark. Items should be
+ * `<ha-list-item-button>` with an `href`. Use `aria-label` to name the landmark.
+ *
+ * @csspart nav - The `<nav>` wrapper.
+ * @csspart base - The inner `<div role="list">`.
+ */
+@customElement("ha-list-nav")
+export class HaListNav extends HaListBase {
+  // No host role — the inner <nav> carries the landmark semantics, and the
+  // inner <div role="list"> preserves the list semantics for screen readers.
+  protected override readonly hostRole = "";
+
+  // The label is forwarded to the inner <nav>
+  @property({ type: String, attribute: "aria-label", reflect: false })
+  public override ariaLabel: string | null = null;
+
+  protected render(): TemplateResult {
+    return html`<nav
+      part="nav"
+      aria-label=${ifDefined(this.ariaLabel ?? undefined)}
+    >
+      <div part="base" class="base" role="list">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    </nav>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-nav": HaListNav;
+  }
+}

src/components/list/ha-list-selectable.ts

@@ -0,0 +1,212 @@
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HaListItemOption } from "../item/ha-list-item-option";
+import { HaListBase } from "./ha-list-base";
+import type { HaListSelectedDetail } from "./types";
+
+/**
+ * @element ha-list-selectable
+ * @extends {HaListBase}
+ *
+ * @summary
+ * Selection list (role `listbox`). Items must be `<ha-list-item-option>`.
+ * Toggle single vs multi selection via the `multi` attribute.
+ *
+ * @attr {boolean} multi - Whether multiple options can be selected at once.
+ *
+ * @fires ha-list-selected - Fired when the selection changes. `detail: HaListSelectedDetail`.
+ */
+@customElement("ha-list-selectable")
+export class HaListSelectable extends HaListBase {
+  @property({ type: Boolean, reflect: true }) public multi = false;
+
+  protected override readonly hostRole = "listbox";
+
+  private _selectedIndices?: Set<number>;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("click", this._onOptionClick);
+    this.setAttribute("aria-multiselectable", this.multi ? "true" : "false");
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._onOptionClick);
+  }
+
+  public updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has("multi")) {
+      this.setAttribute("aria-multiselectable", this.multi ? "true" : "false");
+      if (!this.multi && (this._selectedIndices?.size ?? 0) > 1) {
+        const first = Math.min(...this._selectedIndices!);
+        this._setSelection(new Set([first]));
+      }
+    }
+  }
+
+  /**
+   * Returns the current selection. `number` (or `-1` if nothing) when single,
+   * `Set<number>` when multi.
+   */
+  public get selected(): number | Set<number> {
+    if (this.multi) {
+      return new Set(this._selectedIndices);
+    }
+    return (this._selectedIndices?.size ?? 0) === 0
+      ? -1
+      : this._selectedIndices!.values().next().value!;
+  }
+
+  public get selectedItems(): HaListItemOption[] {
+    return this._sortedSelectedIndices()
+      .map((i) => this.items[i] as HaListItemOption | undefined)
+      .filter((it): it is HaListItemOption => !!it);
+  }
+
+  /** Replace the entire selection. */
+  public setSelected(indices: number | number[] | Set<number>): void {
+    const next =
+      typeof indices === "number"
+        ? indices < 0
+          ? new Set<number>()
+          : new Set([indices])
+        : new Set(indices);
+    if (!this.multi && next.size > 1) {
+      const first = Math.min(...next);
+      this._setSelection(new Set([first]));
+      return;
+    }
+    this._setSelection(next);
+  }
+
+  public select(index: number): void {
+    if (index < 0) {
+      return;
+    }
+    if (this.multi) {
+      const next = new Set(this._selectedIndices);
+      next.add(index);
+      this._setSelection(next);
+    } else {
+      this._setSelection(new Set([index]));
+    }
+  }
+
+  public toggle(index: number, force?: boolean): void {
+    if (index < 0) {
+      return;
+    }
+    if (this.multi) {
+      const next = new Set(this._selectedIndices);
+      const isSelected = next.has(index);
+      const shouldSelect = force !== undefined ? force : !isSelected;
+      if (shouldSelect) {
+        next.add(index);
+      } else {
+        next.delete(index);
+      }
+      this._setSelection(next);
+    } else {
+      const isSelected = this._selectedIndices!.has(index);
+      const shouldSelect = force !== undefined ? force : !isSelected;
+      this._setSelection(shouldSelect ? new Set([index]) : new Set());
+    }
+  }
+
+  public clearSelection(): void {
+    this._setSelection(new Set());
+  }
+
+  public updateListItems() {
+    super.updateListItems();
+    this._syncItemSelectedState();
+  }
+
+  private _sortedSelectedIndices(): number[] {
+    return [...this._selectedIndices!].sort((a, b) => a - b);
+  }
+
+  private _syncItemSelectedState() {
+    if (!this._selectedIndices) {
+      this._selectedIndices = new Set<number>();
+      this.items.forEach((item, i) => {
+        const opt = item as HaListItemOption;
+        if (opt.selected) {
+          this._selectedIndices!.add(i);
+        }
+      });
+      return;
+    }
+
+    this.items.forEach((item, i) => {
+      const opt = item as HaListItemOption;
+      const shouldBe = this._selectedIndices!.has(i);
+      if (opt.selected !== shouldBe) {
+        opt.selected = shouldBe;
+      }
+    });
+  }
+
+  private _setSelection(next: Set<number>): void {
+    const prev = this._selectedIndices!;
+    const added = new Set<number>();
+    const removed = new Set<number>();
+    next.forEach((i) => {
+      if (!prev.has(i)) {
+        added.add(i);
+      }
+    });
+    prev.forEach((i) => {
+      if (!next.has(i)) {
+        removed.add(i);
+      }
+    });
+    if (!added.size && !removed.size) {
+      return;
+    }
+
+    this._selectedIndices = next;
+    this._syncItemSelectedState();
+
+    const detail: HaListSelectedDetail = this.multi
+      ? { index: new Set(next), diff: { added, removed } }
+      : {
+          index: next.size === 0 ? -1 : next.values().next().value!,
+          diff: { added, removed },
+        };
+    fireEvent(this, "ha-list-selected", detail);
+  }
+
+  private _onOptionClick = (ev: Event) => {
+    const path = ev.composedPath();
+    for (const el of path) {
+      if (el === this) {
+        return;
+      }
+      if (el instanceof HaListItemOption) {
+        const index = this.items.indexOf(el);
+        if (index < 0) {
+          return;
+        }
+        const item = this.items[index];
+        if (item.disabled) {
+          return;
+        }
+        if (this.multi) {
+          this.toggle(index);
+        } else {
+          this.select(index);
+        }
+        return;
+      }
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-selectable": HaListSelectable;
+  }
+}

src/components/list/types.ts

@@ -0,0 +1,19 @@
+import type { HaListItemBase } from "../item/ha-list-item-base";
+
+export interface HaListSelectedDetail {
+  index: number | Set<number>;
+  diff?: { added: Set<number>; removed: Set<number> };
+  value?: string | string[];
+}
+
+export interface HaListActivatedDetail {
+  index: number;
+  item: HaListItemBase;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "ha-list-selected": HaListSelectedDetail;
+    "ha-list-activated": HaListActivatedDetail;
+  }
+}

src/components/progress/ha-progress-bar.ts

@@ -44,7 +44,7 @@ export class HaProgressBar extends ProgressBar {
             --ha-progress-bar-track-color,
             var(--ha-color-fill-neutral-normal-hover)
           );
-          --track-height: var(--ha-progress-bar-track-height, 16px);
+          --track-height: var(--ha-progress-bar-track-height, 12px);
           --wa-transition-slow: var(--ha-animation-duration-slow);
           position: relative;
         }

src/components/radio/ha-radio-group.ts

@@ -0,0 +1,70 @@
+import RadioGroup from "@home-assistant/webawesome/dist/components/radio-group/radio-group";
+import { css, type CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+/**
+ * Home Assistant radio group component
+ *
+ * @element ha-radio-group
+ * @extends {RadioGroup}
+ *
+ * @summary
+ * A Home Assistant themed radio group built on top of the Web Awesome radio group.
+ * Groups `ha-radio-option` children so they behave as a single form control.
+ *
+ * @slot - The default slot where `ha-radio-option` elements are placed.
+ * @slot label - The radio group's label. Required for accessibility. Alternatively, use the `label` attribute.
+ * @slot hint - Text that describes how to use the radio group. Alternatively, use the `hint` attribute.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and hint.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart radios - The wrapper around the radio items, styled as a flex container by default.
+ * @csspart hint - The hint's wrapper.
+ *
+ * @cssprop --ha-radio-group-required-marker - Marker shown after the label for required fields. Defaults to `--ha-input-required-marker`, then `"*"`.
+ * @cssprop --ha-radio-group-required-marker-offset - Offset of the required marker. Defaults to `0.1rem`.
+ *
+ * @attr {string} label - The radio group's label.
+ * @attr {string} hint - The radio group's hint text.
+ * @attr {string} name - The name of the radio group, submitted as a name/value pair with form data.
+ * @attr {("horizontal"|"vertical")} orientation - The orientation in which to show radio items.
+ * @attr {boolean} disabled - Disables the radio group and all child radios.
+ * @attr {boolean} required - Ensures a child radio is checked before allowing the containing form to submit.
+ *
+ * @fires change - Emitted when the radio group's selected value changes.
+ * @fires input - Emitted when the radio group receives user input.
+ * @fires wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ */
+@customElement("ha-radio-group")
+export class HaRadioGroup extends RadioGroup {
+  constructor() {
+    super();
+
+    this.radioTag = "ha-radio-option";
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      RadioGroup.styles,
+      css`
+        :host {
+          --wa-form-control-required-content: var(
+            --ha-radio-group-required-marker,
+            var(--ha-input-required-marker, "*")
+          );
+          --wa-form-control-required-content-offset: var(
+            --ha-radio-group-required-marker-offset,
+            0.1rem
+          );
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-radio-group": HaRadioGroup;
+  }
+}

src/components/radio/ha-radio-option.ts

@@ -0,0 +1,122 @@
+import Radio from "@home-assistant/webawesome/dist/components/radio/radio";
+import { css, type CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+/**
+ * Home Assistant radio option component
+ *
+ * @element ha-radio-option
+ * @extends {Radio}
+ *
+ * @summary
+ * A Home Assistant themed radio built on top of the Web Awesome radio.
+ * Intended to be used as a child of `ha-radio-group`.
+ *
+ * @slot - The radio option's label.
+ *
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart checked-icon - The checked icon.
+ * @csspart label - The container that wraps the radio option's label.
+ *
+ * @cssprop --ha-radio-option-active-color - Accent color used for the checked indicator and border. Defaults to `--ha-color-fill-primary-loud-resting`.
+ * @cssprop --ha-radio-option-height - Minimum height of the option in `button` appearance. Defaults to `40px`.
+ * @cssprop --ha-radio-option-toggle-size - Size of the radio toggle circle in `default` appearance. Defaults to `20px`.
+ * @cssprop --ha-radio-option-border-width - Border width of the radio control. Defaults to `--ha-border-width-md`.
+ * @cssprop --ha-radio-option-border-color - Border color of the radio control. Defaults to `--ha-color-border-neutral-normal`.
+ * @cssprop --ha-radio-option-border-color-hover - Border color of the radio control on hover. Defaults to `--ha-radio-option-border-color`, then `--ha-color-border-neutral-loud`.
+ * @cssprop --ha-radio-option-background-color - Background color of the radio control. Defaults to `--wa-form-control-background-color`.
+ * @cssprop --ha-radio-option-background-color-hover - Background color of the radio control on hover. Defaults to `--ha-color-fill-neutral-quiet-hover`.
+ * @cssprop --ha-radio-option-checked-background-color - Background color of the radio control when checked. Defaults to `--ha-color-fill-primary-normal-resting`.
+ * @cssprop --ha-radio-option-checked-icon-color - Color of the checked indicator dot. Defaults to `--ha-radio-option-active-color`.
+ * @cssprop --ha-radio-option-checked-icon-scale - Size of the checked indicator relative to the toggle. Defaults to `0.7`.
+ * @cssprop --ha-radio-option-control-margin - Margin around the radio toggle in `default` appearance. Defaults to `var(--ha-space-3) var(--ha-space-2) var(--ha-space-3) var(--ha-space-3)`.
+ *
+ * @attr {("default"|"button")} appearance - Sets the radio option's visual appearance.
+ * @attr {("small"|"medium"|"large")} size - Sets the radio option's size. Overridden by the parent `ha-radio-group`.
+ * @attr {boolean} checked - Draws the radio option in a checked state.
+ * @attr {boolean} disabled - Disables the radio option.
+ */
+@customElement("ha-radio-option")
+export class HaRadioOption extends Radio {
+  static get styles(): CSSResultGroup {
+    return [
+      Radio.styles,
+      css`
+        :host {
+          --wa-form-control-activated-color: var(
+            --ha-radio-option-active-color,
+            var(--ha-color-fill-primary-loud-resting)
+          );
+          --wa-form-control-height: var(--ha-radio-option-height, 40px);
+          --wa-form-control-toggle-size: var(
+            --ha-radio-option-toggle-size,
+            20px
+          );
+          --wa-form-control-border-width: var(
+            --ha-radio-option-border-width,
+            var(--ha-border-width-md)
+          );
+          --wa-form-control-border-color: var(
+            --ha-radio-option-border-color,
+            var(--ha-color-border-neutral-normal)
+          );
+          --wa-form-control-background-color: var(
+            --ha-radio-option-background-color,
+            var(--wa-form-control-background-color)
+          );
+          --checked-icon-color: var(
+            --ha-radio-option-checked-icon-color,
+            var(--wa-form-control-activated-color)
+          );
+          --checked-icon-scale: var(--ha-radio-option-checked-icon-scale, 0.7);
+        }
+
+        :host([appearance="default"]) .control {
+          margin: var(
+            --ha-radio-option-control-margin,
+            var(--ha-space-3) var(--ha-space-2) var(--ha-space-3)
+              var(--ha-space-3)
+          );
+        }
+
+        :host(:not([aria-checked="true"], [aria-disabled="true"]):hover)
+          .control {
+          border-color: var(
+            --ha-radio-option-border-color-hover,
+            var(
+              --ha-radio-option-border-color,
+              var(--ha-color-border-neutral-loud)
+            )
+          );
+          background-color: var(
+            --ha-radio-option-background-color-hover,
+            var(--ha-color-fill-neutral-quiet-hover)
+          );
+        }
+
+        :host([aria-checked="true"]) .control {
+          background-color: var(
+            --ha-radio-option-checked-background-color,
+            var(--ha-color-fill-primary-normal-resting)
+          );
+        }
+
+        [part~="label"] {
+          display: inline-flex;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        :host([disabled]) [part~="label"] {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-radio-option": HaRadioOption;
+  }
+}

src/data/automation.ts

@@ -322,6 +322,7 @@ export interface ShorthandNotCondition extends ShorthandBaseCondition {
 
 export interface AutomationElementGroupCollection {
   titleKey?: LocalizeKeys;
+  generic?: boolean;
   groups: AutomationElementGroup;
 }
 

src/data/backup.ts

@@ -189,6 +189,20 @@ export const updateBackupConfig = (
   config: BackupMutableConfig
 ) => hass.callWS({ type: "backup/config/update", ...config });
 
+export const saveBackupConfig = (hass: HomeAssistant, config: BackupConfig) =>
+  updateBackupConfig(hass, {
+    create_backup: {
+      agent_ids: config.create_backup.agent_ids,
+      include_folders: config.create_backup.include_folders ?? [],
+      include_database: config.create_backup.include_database,
+      include_addons: config.create_backup.include_addons ?? [],
+      include_all_addons: config.create_backup.include_all_addons,
+      password: config.create_backup.password,
+    },
+    retention: config.retention,
+    schedule: config.schedule,
+  });
+
 export const getBackupDownloadUrl = (
   id: string,
   agentId: string,

src/data/compute-service-info.ts

@@ -0,0 +1,34 @@
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeObjectId } from "../common/entity/compute_object_id";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { DEFAULT_SERVICE_ICON } from "./icons";
+import type { HomeAssistant } from "../types";
+
+export interface ServiceInfo {
+  label: string;
+  icon?: string;
+  iconPath: string;
+}
+
+export const DEFAULT_SERVICE_INFO: ServiceInfo = {
+  label: "",
+  iconPath: DEFAULT_SERVICE_ICON,
+};
+
+export const computeServiceLabel = (
+  localize: LocalizeFunc,
+  services: HomeAssistant["services"],
+  service: string
+): string => {
+  const domain = computeDomain(service);
+  const serviceName = computeObjectId(service);
+  const serviceDef = services[domain]?.[serviceName];
+  return (
+    localize(
+      `component.${domain}.services.${serviceName}.name`,
+      serviceDef?.description_placeholders
+    ) ||
+    serviceDef?.name ||
+    service
+  );
+};

src/data/condition.ts

@@ -8,28 +8,31 @@ import type { Selector, TargetSelector } from "./selector";
 export const CONDITION_COLLECTIONS: AutomationElementGroupCollection[] = [
   {
     groups: {
-      device: {},
       dynamicGroups: {},
-      entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
       time_location: {
         icon: mdiMapClock,
         members: { sun: {}, time: {}, zone: {} },
       },
+      helpers: {},
+      template: {},
+      trigger: {},
+      other: {},
     },
   },
   {
     titleKey:
-      "ui.panel.config.automation.editor.conditions.groups.helpers.label",
+      "ui.panel.config.automation.editor.conditions.groups.generic.label",
+    generic: true,
     groups: {
-      helpers: {},
+      device: {},
+      entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
     },
   },
   {
-    titleKey: "ui.panel.config.automation.editor.conditions.groups.other.label",
+    titleKey:
+      "ui.panel.config.automation.editor.conditions.groups.custom_integrations.label",
     groups: {
-      template: {},
-      trigger: {},
-      other: {},
+      customDynamicGroups: {},
     },
   },
 ] as const;

src/data/config.ts

@@ -1,11 +1,11 @@
 import type { HomeAssistant } from "../types";
 
-interface ValidConfig {
+export interface ValidConfig {
   valid: true;
   error: null;
 }
 
-interface InvalidConfig {
+export interface InvalidConfig {
   valid: false;
   error: string;
 }

src/data/context/index.ts

@@ -11,6 +11,7 @@ import type {
 } from "../../types";
 import type { ConfigEntry } from "../config_entries";
 import type { EntityRegistryEntry } from "../entity/entity_registry";
+import type { DomainManifestLookup } from "../integration";
 import type { LabelRegistryEntry } from "../label/label_registry";
 
 /**
@@ -107,6 +108,12 @@ export const fullEntitiesContext =
 export const configEntriesContext =
   createContext<ConfigEntry[]>("configEntries");
 
+/**
+ * Lazy loaded integration manifests, keyed by domain.
+ */
+export const manifestsContext =
+  createContext<DomainManifestLookup>("manifests");
+
 // #endregion lazy-contexts
 
 // #region deprecated-contexts

src/data/frontend.ts

@@ -1,4 +1,5 @@
 import type { Connection } from "home-assistant-js-websocket";
+import type { ShortcutItem } from "./home_shortcuts";
 
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
@@ -18,20 +19,12 @@ export interface CoreFrontendSystemData {
   onboarded_date?: string;
 }
 
-export interface CustomShortcutItem {
-  path: string;
-  label?: string;
-  icon?: string;
-  color?: string;
-}
-
 export interface HomeFrontendSystemData {
   favorite_entities?: string[];
   welcome_banner_dismissed?: boolean;
-  hidden_summaries?: string[];
   hide_welcome_message?: boolean;
   hide_suggested_entities?: boolean;
-  custom_shortcuts?: CustomShortcutItem[];
+  shortcuts?: ShortcutItem[];
 }
 
 declare global {

src/data/home_shortcuts.ts

@@ -0,0 +1,55 @@
+export interface CustomShortcutItem {
+  type: "custom";
+  path: string;
+  label?: string;
+  icon?: string;
+  color?: string;
+}
+
+export interface SummaryShortcutItem {
+  type: "summary";
+  key: string;
+  hidden?: boolean;
+}
+
+export type ShortcutItem = CustomShortcutItem | SummaryShortcutItem;
+
+export const DEFAULT_SUMMARY_KEYS = [
+  "light",
+  "climate",
+  "security",
+  "media_players",
+  "maintenance",
+  "weather",
+  "energy",
+] as const;
+
+export type DefaultSummaryKey = (typeof DEFAULT_SUMMARY_KEYS)[number];
+
+const DEFAULT_SUMMARY_KEYS_SET: ReadonlySet<string> = new Set(
+  DEFAULT_SUMMARY_KEYS
+);
+
+// Built-in summary keys missing from the saved list are appended in
+// DEFAULT_SUMMARY_KEYS order; summary keys no longer in the defaults are
+// dropped.
+export function resolveShortcutItems(
+  saved: ShortcutItem[] | undefined
+): ShortcutItem[] {
+  const result: ShortcutItem[] = [];
+  const seenSummaryKeys = new Set<string>();
+  for (const item of saved || []) {
+    if (item.type === "summary") {
+      if (!DEFAULT_SUMMARY_KEYS_SET.has(item.key)) continue;
+      if (seenSummaryKeys.has(item.key)) continue;
+      seenSummaryKeys.add(item.key);
+    }
+    result.push(item);
+  }
+  for (const key of DEFAULT_SUMMARY_KEYS) {
+    if (!seenSummaryKeys.has(key)) {
+      result.push({ type: "summary", key });
+    }
+  }
+  return result;
+}

src/data/icons.ts

@@ -323,7 +323,8 @@ export const getComponentIcons = async (
 export const getCategoryIcons = async <
   T extends Exclude<IconCategory, "entity" | "entity_component">,
 >(
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   category: T,
   domain?: string,
   force = false
@@ -334,12 +335,10 @@ export const getCategoryIcons = async <
         Record<string, CategoryType[T]>
       >;
     }
-    resources[category].all = getHassIcons(hass.connection, category).then(
-      (res) => {
-        resources[category].domains = res.resources as any;
-        return res?.resources as Record<string, CategoryType[T]>;
-      }
-    ) as any;
+    resources[category].all = getHassIcons(connection, category).then((res) => {
+      resources[category].domains = res.resources as any;
+      return res?.resources as Record<string, CategoryType[T]>;
+    }) as any;
     return resources[category].all as Promise<Record<string, CategoryType[T]>>;
   }
   if (!force && domain in resources[category].domains) {
@@ -351,10 +350,10 @@ export const getCategoryIcons = async <
       return resources[category].domains[domain] as Promise<CategoryType[T]>;
     }
   }
-  if (!isComponentLoaded(hass.config, domain)) {
+  if (!isComponentLoaded(hassConfig, domain)) {
     return undefined;
   }
-  const result = getHassIcons(hass.connection, category, domain);
+  const result = getHassIcons(connection, category, domain);
   resources[category].domains[domain] = result.then(
     (res) => res?.resources[domain]
   ) as any;
@@ -362,25 +361,28 @@ export const getCategoryIcons = async <
 };
 
 export const getServiceIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<ServiceIcons | Record<string, ServiceIcons> | undefined> =>
-  getCategoryIcons(hass, "services", domain, force);
+  getCategoryIcons(connection, hassConfig, "services", domain, force);
 
 export const getTriggerIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<TriggerIcons | Record<string, TriggerIcons> | undefined> =>
-  getCategoryIcons(hass, "triggers", domain, force);
+  getCategoryIcons(connection, hassConfig, "triggers", domain, force);
 
 export const getConditionIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<ConditionIcons | Record<string, ConditionIcons> | undefined> =>
-  getCategoryIcons(hass, "conditions", domain, force);
+  getCategoryIcons(connection, hassConfig, "conditions", domain, force);
 
 // Cache for sorted range keys
 const sortedRangeCache = new WeakMap<Record<string, string>, number[]>();
@@ -578,7 +580,8 @@ export const attributeIcon = async (
 };
 
 export const triggerIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   trigger: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
@@ -586,62 +589,69 @@ export const triggerIcon = async (
   const domain = getTriggerDomain(trigger);
   const triggerName = getTriggerObjectId(trigger);
 
-  const triggerIcons = await getTriggerIcons(hass, domain);
+  const triggerIcons = await getTriggerIcons(connection, hassConfig, domain);
   if (triggerIcons) {
     const trgrIcon = triggerIcons[triggerName] as TriggerIcons[string];
     icon = trgrIcon?.trigger;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const conditionIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   condition: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
 
   const domain = getConditionDomain(condition);
-  const conditionIcons = await getConditionIcons(hass, domain);
+  const conditionIcons = await getConditionIcons(
+    connection,
+    hassConfig,
+    domain
+  );
   if (conditionIcons) {
     const conditionName = getConditionObjectId(condition);
     const condIcon = conditionIcons[conditionName] as ConditionIcons[string];
     icon = condIcon?.condition;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const serviceIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   service: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
   const domain = computeDomain(service);
   const serviceName = computeObjectId(service);
-  const serviceIcons = await getServiceIcons(hass, domain);
+  const serviceIcons = await getServiceIcons(connection, hassConfig, domain);
   if (serviceIcons) {
     const srvceIcon = serviceIcons[serviceName] as ServiceIcons[string];
     icon = srvceIcon?.service;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const serviceSectionIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   service: string,
   section: string
 ): Promise<string | undefined> => {
   const domain = computeDomain(service);
   const serviceName = computeObjectId(service);
-  const serviceIcons = await getServiceIcons(hass, domain);
+  const serviceIcons = await getServiceIcons(connection, hassConfig, domain);
   if (serviceIcons) {
     const srvceIcon = serviceIcons[serviceName] as ServiceIcons[string];
     return srvceIcon?.sections?.[section];

src/data/integration.ts

@@ -109,6 +109,24 @@ export const fetchIntegrationManifests = (
   return hass.callWS<IntegrationManifest[]>(params);
 };
 
+export const fetchIntegrationManifestsCollection = async (
+  connection: Connection,
+  setValue: (value: DomainManifestLookup) => void
+): Promise<() => void> => {
+  const fetched = await connection.sendMessagePromise<IntegrationManifest[]>({
+    type: "manifest/list",
+  });
+  const manifests: DomainManifestLookup = {};
+  for (const manifest of fetched) {
+    manifests[manifest.domain] = manifest;
+  }
+  setValue(manifests);
+  // One-time fetch — nothing to unsubscribe from
+  return () => {
+    // noop
+  };
+};
+
 export const fetchIntegrationManifest = (
   hass: HomeAssistant,
   integration: string

src/data/number.ts

@@ -12,3 +12,183 @@ export const getNumberDeviceClassConvertibleUnits = (
     type: "number/device_class_convertible_units",
     device_class: deviceClass,
   });
+
+/**
+ * Extracted from
+ * core/homeassistant/components/sensor/const.py
+ */
+export const unitOfMeasurementOptions = [
+  "%",
+  "A",
+  "B",
+  "B/s",
+  "BTU/(h⋅ft²)",
+  "Beaufort",
+  "CCF",
+  "EB",
+  "EiB",
+  "GB",
+  "GB/s",
+  "GHz",
+  "GJ",
+  "GW",
+  "GWh",
+  "Gbit",
+  "Gbit/s",
+  "Gcal",
+  "GiB",
+  "GiB/s",
+  "Hz",
+  "J",
+  "K",
+  "KiB",
+  "KiB/s",
+  "L",
+  "L/h",
+  "L/min",
+  "L/s",
+  "MB",
+  "MB/s",
+  "MCF",
+  "MHz",
+  "MJ",
+  "MV",
+  "MW",
+  "MWh",
+  "Mbit",
+  "Mbit/s",
+  "Mcal",
+  "MiB",
+  "MiB/s",
+  "PB",
+  "Pa",
+  "PiB",
+  "S/cm",
+  "TB",
+  "TW",
+  "TWh",
+  "TiB",
+  "V",
+  "VA",
+  "W",
+  "W/m²",
+  "Wh",
+  "Wh/km",
+  "YB",
+  "YiB",
+  "ZB",
+  "ZiB",
+  "ac",
+  "bar",
+  "bit",
+  "bit/s",
+  "cal",
+  "cbar",
+  "cm",
+  "cm²",
+  "d",
+  "dB",
+  "dBA",
+  "dBm",
+  "fl. oz.",
+  "ft",
+  "ft/s",
+  "ft²",
+  "ft³",
+  "ft³/min",
+  "g",
+  "g/m³",
+  "gal",
+  "gal/d",
+  "gal/h",
+  "gal/min",
+  "h",
+  "hPa",
+  "ha",
+  "in",
+  "in/d",
+  "in/h",
+  "in/s",
+  "inHg",
+  "inH₂O",
+  "in²",
+  "kB",
+  "kB/s",
+  "kHz",
+  "kJ",
+  "kPa",
+  "kV",
+  "kVA",
+  "kW",
+  "kWh",
+  "kWh/100km",
+  "kbit",
+  "kbit/s",
+  "kcal",
+  "kg",
+  "km",
+  "km/h",
+  "km/kWh",
+  "km²",
+  "kn",
+  "kvar",
+  "kvarh",
+  "lb",
+  "lx",
+  "m",
+  "m/min",
+  "m/s",
+  "mA",
+  "mHz",
+  "mL",
+  "mL/s",
+  "mPa",
+  "mS/cm",
+  "mV",
+  "mVA",
+  "mW",
+  "mWh",
+  "mbar",
+  "mg",
+  "mg/dL",
+  "mg/m³",
+  "mi",
+  "mi/kWh",
+  "min",
+  "mi²",
+  "mm",
+  "mm/d",
+  "mm/h",
+  "mm/s",
+  "mmHg",
+  "mmol/L",
+  "mm²",
+  "mph",
+  "ms",
+  "mvar",
+  "m²",
+  "m³",
+  "m³/h",
+  "m³/min",
+  "m³/s",
+  "nmi",
+  "oz",
+  "ppb",
+  "ppm",
+  "psi",
+  "s",
+  "st",
+  "var",
+  "varh",
+  "yd",
+  "yd²",
+  "°",
+  "°C",
+  "°F",
+  "μA",
+  "μS/cm",
+  "μV",
+  "μg",
+  "μg/m³",
+  "μs",
+] as const;

src/data/script_i18n.ts

@@ -10,6 +10,7 @@ import { describeCondition } from "./automation_i18n";
 import { localizeDeviceAutomationAction } from "./device/device_automation";
 import type { EntityRegistryEntry } from "./entity/entity_registry";
 import { domainToName } from "./integration";
+import type { DomainManifestLookup } from "./integration";
 import type {
   ActionType,
   ActionTypes,
@@ -31,12 +32,23 @@ import { getActionType } from "./script";
 const actionTranslationBaseKey =
   "ui.panel.config.automation.editor.actions.type";
 
+const shouldShowDomainPrefix = (
+  domain: string,
+  manifests?: DomainManifestLookup
+): boolean => {
+  if (!manifests) return true;
+  const manifest = manifests[domain];
+  if (!manifest) return true;
+  return manifest.integration_type !== "entity" || !manifest.is_built_in;
+};
+
 export const describeAction = <T extends ActionType>(
   hass: HomeAssistant,
   entityRegistry: EntityRegistryEntry[],
   action: ActionTypes[T],
   actionType?: T,
-  ignoreAlias = false
+  ignoreAlias = false,
+  manifests?: DomainManifestLookup
 ): string => {
   try {
     const description = tryDescribeAction(
@@ -44,7 +56,8 @@ export const describeAction = <T extends ActionType>(
       entityRegistry,
       action,
       actionType,
-      ignoreAlias
+      ignoreAlias,
+      manifests
     );
     if (typeof description !== "string") {
       throw new Error(String(description));
@@ -66,7 +79,8 @@ const tryDescribeAction = <T extends ActionType>(
   entityRegistry: EntityRegistryEntry[],
   action: ActionTypes[T],
   actionType?: T,
-  ignoreAlias = false
+  ignoreAlias = false,
+  manifests?: DomainManifestLookup
 ): string => {
   if (action.alias && !ignoreAlias) {
     return action.alias;
@@ -114,20 +128,19 @@ const tryDescribeAction = <T extends ActionType>(
         ) || hass.services[domain]?.[serviceName]?.name;
 
       if (config.metadata) {
-        return hass.localize(
-          `${actionTranslationBaseKey}.service.description.service_name_no_targets`,
-          {
-            domain: domainToName(hass.localize, domain),
-            name: service || config.action,
-          }
-        );
+        if (service && shouldShowDomainPrefix(domain, manifests)) {
+          return `${domainToName(hass.localize, domain)}: ${service}`;
+        }
+        return service || config.action;
       }
 
       return hass.localize(
         `${actionTranslationBaseKey}.service.description.service_based_on_name_no_targets`,
         {
           name: service
-            ? `${domainToName(hass.localize, domain)}: ${service}`
+            ? shouldShowDomainPrefix(domain, manifests)
+              ? `${domainToName(hass.localize, domain)}: ${service}`
+              : service
             : config.action,
         }
       );

src/data/selector.ts

@@ -31,6 +31,7 @@ export type Selector =
   | AreaSelector
   | AreasDisplaySelector
   | AttributeSelector
+  | AutomationBehaviorSelector
   | BooleanSelector
   | ButtonToggleSelector
   | ChooseSelector
@@ -79,7 +80,6 @@ export type Selector =
   | TTSVoiceSelector
   | SerialPortSelector
   | UiActionSelector
-  | UiClockDateFormatSelector
   | UiColorSelector
   | UiStateContentSelector
   | BackupLocationSelector;
@@ -125,6 +125,21 @@ export interface BooleanSelector {
   boolean: {} | null;
 }
 
+export type AutomationBehaviorTriggerMode = "first" | "last" | "any";
+
+export type AutomationBehaviorConditionMode = "all" | "any";
+
+export type AutomationBehavior =
+  | AutomationBehaviorTriggerMode
+  | AutomationBehaviorConditionMode;
+
+export interface AutomationBehaviorSelector {
+  automation_behavior: {
+    mode: "trigger" | "condition";
+    translation_key?: string;
+  } | null;
+}
+
 export interface ButtonToggleSelector {
   button_toggle: {
     options: readonly string[] | readonly SelectOption[];
@@ -465,7 +480,9 @@ export interface SelectorSelector {
 }
 
 export interface SerialPortSelector {
-  serial_port: {} | null;
+  serial_port: {
+    extra_recommended_domains?: string[];
+  } | null;
 }
 
 export interface StateSelector {
@@ -560,10 +577,6 @@ export interface UiActionSelector {
   } | null;
 }
 
-export interface UiClockDateFormatSelector {
-  ui_clock_date_format: {} | null;
-}
-
 export interface UiColorExtraOption {
   value: string;
   label: string;

src/data/selector/format_selector_value.ts

@@ -98,5 +98,30 @@ export const formatSelectorValue = (
       .join(", ");
   }
 
-  return ensureArray(value).join(", ");
+  if ("object" in selector) {
+    const { fields } = selector.object ?? {};
+    const items = ensureArray(value);
+    return items
+      .map((item) => {
+        if (item == null || typeof item !== "object") {
+          return String(item);
+        }
+        if (fields) {
+          return Object.entries(fields)
+            .filter(([key]) => key in item && item[key] != null)
+            .map(([key, field]) =>
+              formatSelectorValue(hass, item[key], field.selector)
+            )
+            .join(" = ");
+        }
+        return JSON.stringify(item);
+      })
+      .join(", ");
+  }
+
+  return ensureArray(value)
+    .map((v) =>
+      v != null && typeof v === "object" ? JSON.stringify(v) : String(v)
+    )
+    .join(", ");
 };

src/data/sensor.ts

@@ -4,6 +4,12 @@ export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
 export const SENSOR_DEVICE_CLASS_TIMESTAMP = "timestamp";
 export const SENSOR_DEVICE_CLASS_TEMPERATURE = "temperature";
 export const SENSOR_DEVICE_CLASS_HUMIDITY = "humidity";
+export const SENSOR_DEVICE_CLASS_UPTIME = "uptime";
+
+export const SENSOR_TIMESTAMP_DEVICE_CLASSES: (string | undefined)[] = [
+  "timestamp",
+  "uptime",
+];
 
 export interface SensorDeviceClassUnits {
   units: string[];

src/data/service-info-controller.ts

@@ -0,0 +1,157 @@
+import { ContextConsumer, type Context } from "@lit/context";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import { computeDomain } from "../common/entity/compute_domain";
+import {
+  computeServiceLabel,
+  DEFAULT_SERVICE_INFO,
+  type ServiceInfo,
+} from "./compute-service-info";
+import {
+  configContext,
+  connectionContext,
+  internationalizationContext,
+  servicesContext,
+} from "./context";
+import {
+  DEFAULT_SERVICE_ICON,
+  FALLBACK_DOMAIN_ICONS,
+  serviceIcon,
+} from "./icons";
+import type {
+  HomeAssistant,
+  HomeAssistantInternationalization,
+} from "../types";
+
+type ServiceInfoHost = ReactiveControllerHost & HTMLElement;
+
+/**
+ * Reactive controller that prepares display data for a service action
+ * (e.g. `light.turn_on`): loads service translations, resolves the localized
+ * service name, and resolves the service icon (with a synchronous domain
+ * fallback that upgrades once the full icon is loaded).
+ *
+ * Pulls connection, config, services, and i18n from Lit context, so the
+ * caller only needs to feed in the service ID via `updateService()`.
+ */
+export class ServiceInfoController implements ReactiveController {
+  private _host: ServiceInfoHost;
+
+  private _connection?: Connection;
+
+  private _config?: HassConfig;
+
+  private _services?: HomeAssistant["services"];
+
+  private _i18n?: HomeAssistantInternationalization;
+
+  private _service?: string;
+
+  private _resolvedService?: string;
+
+  private _resolvedLanguage?: string;
+
+  private _info: ServiceInfo = DEFAULT_SERVICE_INFO;
+
+  constructor(host: ServiceInfoHost) {
+    this._host = host;
+    host.addController(this);
+
+    this._consume(connectionContext, (value) => {
+      this._connection = value.connection;
+    });
+    this._consume(configContext, (value) => {
+      this._config = value.config;
+    });
+    this._consume(servicesContext, (value) => {
+      this._services = value;
+    });
+    this._consume(internationalizationContext, (value) => {
+      this._i18n = value;
+    });
+  }
+
+  private _consume<T>(
+    context: Context<unknown, T>,
+    assign: (value: T) => void
+  ): void {
+    new ContextConsumer(this._host, {
+      context,
+      subscribe: true,
+      callback: (value) => {
+        assign(value);
+        this._resolve();
+      },
+    });
+  }
+
+  get info(): ServiceInfo {
+    return this._info;
+  }
+
+  hostConnected(): void {
+    this._resolve();
+  }
+
+  updateService(service: string | undefined): void {
+    if (service === this._service) return;
+    this._service = service;
+    this._resolve();
+  }
+
+  private _resolve(): void {
+    if (!this._connection || !this._config || !this._services || !this._i18n) {
+      return;
+    }
+
+    const service = this._service;
+    const language = this._i18n.language;
+
+    const serviceChanged = service !== this._resolvedService;
+    const languageChanged = language !== this._resolvedLanguage;
+
+    if (!serviceChanged && !languageChanged) return;
+
+    this._resolvedService = service;
+    this._resolvedLanguage = language;
+
+    if (!service) {
+      this._info = DEFAULT_SERVICE_INFO;
+      this._host.requestUpdate();
+      return;
+    }
+
+    const domain = computeDomain(service);
+    this._info = {
+      label: computeServiceLabel(this._i18n.localize, this._services, service),
+      iconPath: serviceChanged
+        ? FALLBACK_DOMAIN_ICONS[domain] || DEFAULT_SERVICE_ICON
+        : this._info.iconPath,
+      icon: serviceChanged ? undefined : this._info.icon,
+    };
+    this._host.requestUpdate();
+
+    this._i18n.loadBackendTranslation("services", domain).then((localize) => {
+      if (
+        this._resolvedService !== service ||
+        this._resolvedLanguage !== language ||
+        !this._services
+      ) {
+        return;
+      }
+      this._info = {
+        ...this._info,
+        label: computeServiceLabel(localize, this._services, service),
+      };
+      this._host.requestUpdate();
+    });
+
+    if (serviceChanged) {
+      serviceIcon(this._connection, this._config, service).then((icon) => {
+        if (this._resolvedService !== service) return;
+        this._info = { ...this._info, icon };
+        this._host.requestUpdate();
+      });
+    }
+  }
+}

src/data/trace.ts

@@ -120,6 +120,7 @@ export interface ScriptTraceExtended extends ScriptTrace, BaseTraceExtended {
   blueprint_inputs?: BlueprintScriptConfig;
 }
 
+export type Trace = AutomationTrace | ScriptTrace;
 export type TraceExtended = AutomationTraceExtended | ScriptTraceExtended;
 
 interface TraceTypes {