Migrate add-to action list to grouped list style (#53921)

* Split more-info related and details views

* Update the related view e2e smoke case

.github/workflows/codeql-analysis.yaml

@@ -32,12 +32,12 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
+        uses: github/codeql-action/init@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
         with:
           languages: javascript-typescript
           build-mode: none
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
+        uses: github/codeql-action/analyze@db488ddef3bf6cb639b32c2e9a7c0a7ea8271d28 # v4.37.8
         with:
           category: "/language:javascript-typescript"

.gitignore

@@ -74,3 +74,4 @@ test/e2e/app/dist/
 .serena
 
 test/benchmarks/results/
+

.nvmrc

@@ -1 +1 @@
-24.19.0
+24.20.0

build-scripts/gulp/gather-static.js

@@ -4,6 +4,7 @@ import fs from "fs-extra";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
+import { ensureMapAssets, mapAssetsDir } from "./map-assets.js";
 
 const npmPath = (...parts) =>
   path.resolve(paths.root_dir, "node_modules", ...parts);
@@ -89,7 +90,7 @@ function copyQrScannerWorker(staticDir) {
   copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
 }
 
-function copyMapPanel(staticDir) {
+async function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
     npmPath("leaflet/dist/leaflet.css"),
@@ -103,6 +104,14 @@ function copyMapPanel(staticDir) {
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")
   );
+
+  // Style, glyphs and sprites for the vector base map
+  await ensureMapAssets();
+  fs.copySync(mapAssetsDir, staticPath("map/"));
+  copyFileDir(
+    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
+    staticPath("map/")
+  );
 }
 
 function copyZXingWasm(staticDir) {
@@ -139,7 +148,7 @@ gulp.task("copy-static-app", async () => {
   copyMdiIcons(staticDir);
 
   // Panel assets
-  copyMapPanel(staticDir);
+  await copyMapPanel(staticDir);
 
   // Qr Scanner assets
   copyZXingWasm(staticDir);
@@ -155,7 +164,7 @@ gulp.task("copy-static-demo", async () => {
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
   copyPolyfills(paths.demo_output_static);
-  copyMapPanel(paths.demo_output_static);
+  await copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
   copyLocaleData(paths.demo_output_static);
@@ -168,7 +177,7 @@ gulp.task("copy-static-cast", async () => {
   // Copy cast static files
   fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
   copyPolyfills(paths.cast_output_static);
-  copyMapPanel(paths.cast_output_static);
+  await copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
   copyLocaleData(paths.cast_output_static);
@@ -184,7 +193,7 @@ gulp.task("copy-static-gallery", async () => {
     paths.gallery_output_root
   );
 
-  copyMapPanel(paths.gallery_output_static);
+  await copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
   copyLocaleData(paths.gallery_output_static);
@@ -215,7 +224,7 @@ gulp.task("copy-static-e2e-test-app", async () => {
   }
 
   copyPolyfills(paths.e2eTestApp_output_static);
-  copyMapPanel(paths.e2eTestApp_output_static);
+  await copyMapPanel(paths.e2eTestApp_output_static);
   copyFonts(paths.e2eTestApp_output_static);
   copyTranslations(paths.e2eTestApp_output_static);
   copyLocaleData(paths.e2eTestApp_output_static);

build-scripts/gulp/index.mjs

@@ -14,6 +14,7 @@ import "./gen-icons-json.js";
 import "./gen-sensor-entity-constants.js";
 import "./landing-page.js";
 import "./locale-data.js";
+import "./map-assets.js";
 import "./rspack.js";
 import "./service-worker.js";
 import "./translations.js";

build-scripts/gulp/map-assets.js

@@ -0,0 +1,86 @@
+// Generates the MapLibre styles for the vector base map.
+//
+// Only the styles. Glyphs, sprites and tiles are served by core's proxy, which
+// is what lets them be requested with an application User-Agent and without a
+// referrer. The styles stay here because they come from @versatiles/style and
+// core has no node toolchain to regenerate them with.
+
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { colorful, eclipse } from "@versatiles/style";
+import fs from "fs-extra";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+import { addLatinLabels } from "./map-labels.js";
+
+const PROXY_PATH = "/api/map_tiles";
+const TILEJSON_URL = `${PROXY_PATH}/tilejson.json`;
+
+const outputDir = path.resolve(paths.build_dir, "map");
+
+// MapLibre extends the fetched TileJSON with the style's source options, so
+// anything left here wins and freezes at build time. Dropping them is what lets
+// the proxy move the attribution and zoom range too, not just the URLs.
+const TILEJSON_FIELDS = [
+  "tiles",
+  "attribution",
+  "bounds",
+  "minzoom",
+  "maxzoom",
+  "scheme",
+];
+
+// The builder can only write a tile URL, so the source is repointed afterwards.
+// Keyed on there being exactly one source: any other shape means the builder's
+// own default host would ship unnoticed.
+const useTileJson = (name, style) => {
+  const sources = Object.values(style.sources);
+
+  if (sources.length !== 1) {
+    throw new Error(
+      `Style "${name}" has ${sources.length} sources, expected exactly one to ` +
+        `point at the TileJSON. Check what @versatiles/style emits.`
+    );
+  }
+
+  for (const field of TILEJSON_FIELDS) {
+    delete sources[0][field];
+  }
+  sources[0].url = TILEJSON_URL;
+  return style;
+};
+
+const styleOptions = {
+  // Keeps the generated URLs origin relative.
+  baseUrl: "",
+  glyphs: `${PROXY_PATH}/fonts/{fontstack}/{range}.pbf`,
+  sprite: [{ id: "basics", url: `${PROXY_PATH}/sprites/basics/sprites` }],
+};
+
+const buildMapAssets = async () => {
+  await fs.emptyDir(outputDir);
+
+  await Promise.all(
+    // Both themes up front: dark is a real cartography, not an inverted raster.
+    [
+      ["light", colorful],
+      ["dark", eclipse],
+    ].map(([name, builder]) =>
+      writeFile(
+        path.join(outputDir, `${name}.json`),
+        JSON.stringify(addLatinLabels(useTileJson(name, builder(styleOptions))))
+      )
+    )
+  );
+};
+
+// Shared so it does not have to be wired into every pipeline separately.
+let pending;
+export const ensureMapAssets = () => {
+  pending ??= buildMapAssets();
+  return pending;
+};
+
+gulp.task("build-map-assets", ensureMapAssets);
+
+export const mapAssetsDir = outputDir;

build-scripts/gulp/map-labels.js

@@ -0,0 +1,42 @@
+// Adds the English name to labels whose local name is not in Latin script.
+// Shortbread tiles carry `name`, `name_en` and `name_de` only.
+
+const NAME = ["get", "name"];
+const NAME_EN = ["get", "name_en"];
+
+// Strings compare by code point: anything from Basic Latin up to Latin
+// Extended-B, digits and punctuation included.
+const IS_LATIN = ["<", NAME, "ɐ"];
+
+const ENGLISH_SCALE = 0.8;
+
+// Streets are line-placed and cannot break lines.
+const withEnglish = (placement) =>
+  placement === "line"
+    ? ["concat", NAME, " (", NAME_EN, ")"]
+    : ["format", NAME, {}, "\n", {}, NAME_EN, { "font-scale": ENGLISH_SCALE }];
+
+const isNameLabel = (layer) =>
+  JSON.stringify(layer.layout?.["text-field"]) === JSON.stringify(NAME);
+
+export const addLatinLabels = (style) => ({
+  ...style,
+  layers: style.layers.map((layer) =>
+    isNameLabel(layer)
+      ? {
+          ...layer,
+          layout: {
+            ...layer.layout,
+            "text-field": [
+              "case",
+              IS_LATIN,
+              NAME,
+              ["!", ["has", "name_en"]],
+              NAME,
+              withEnglish(layer.layout["symbol-placement"]),
+            ],
+          },
+        }
+      : layer
+  ),
+});

gallery/src/pages/more-info/timer.ts

@@ -16,6 +16,25 @@ const ENTITIES = [
       duration: "0:05:00",
     },
   },
+  {
+    entity_id: "timer.active_timer",
+    state: "active",
+    attributes: {
+      friendly_name: "Active timer",
+      duration: "0:10:00",
+      remaining: "0:10:00",
+      finishes_at: new Date(Date.now() + 10 * 60 * 1000).toISOString(),
+    },
+  },
+  {
+    entity_id: "timer.paused_timer",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused timer",
+      duration: "0:10:00",
+      remaining: "0:03:21",
+    },
+  },
 ];
 
 @customElement("demo-more-info-timer")

package.json

@@ -75,6 +75,8 @@
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
+    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
+    "@maplibre/maplibre-gl-leaflet": "0.1.4",
     "@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/web": "2.5.0",
@@ -108,14 +110,15 @@
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
     "intl-messageformat": "11.2.14",
-    "js-yaml": "5.3.0",
+    "js-yaml": "5.4.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.3",
     "lit-html": "3.3.3",
     "luxon": "3.7.2",
-    "marked": "18.0.10",
+    "maplibre-gl": "5.24.0",
+    "marked": "18.0.11",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -147,13 +150,13 @@
     "@eslint/js": "10.0.1",
     "@gfx/zopfli": "1.0.15",
     "@html-eslint/eslint-plugin": "0.65.0",
-    "@lokalise/node-api": "16.3.0",
+    "@lokalise/node-api": "16.4.0",
     "@octokit/auth-oauth-device": "8.0.4",
     "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
     "@rsdoctor/rspack-plugin": "1.6.3",
-    "@rspack/core": "2.1.10",
+    "@rspack/core": "2.2.1",
     "@rspack/dev-server": "2.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -170,13 +173,14 @@
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@typescript/native": "npm:[email protected]",
+    "@versatiles/style": "5.13.1",
     "@vitest/coverage-v8": "4.1.11",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist": "4.28.8",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.9.0",
+    "eslint": "10.9.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -186,7 +190,7 @@
     "eslint-plugin-wc": "3.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.4.0",
-    "generate-license-file": "4.2.1",
+    "generate-license-file": "4.2.4",
     "glob": "13.0.6",
     "globals": "17.11.0",
     "gulp": "5.0.1",
@@ -198,12 +202,12 @@
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
     "lightningcss": "1.33.0",
-    "lint-staged": "17.3.0",
+    "lint-staged": "17.4.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
-    "minify-literals": "2.1.0",
+    "minify-literals": "2.2.0",
     "pinst": "3.0.0",
     "prettier": "3.9.6",
     "rspack-manifest-plugin": "5.2.2",
@@ -213,7 +217,7 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.67.0",
+    "typescript-eslint": "8.68.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.11",
     "webpack-stats-plugin": "1.1.3",
@@ -231,6 +235,6 @@
   },
   "packageManager": "[email protected]",
   "volta": {
-    "node": "24.19.0"
+    "node": "24.20.0"
   }
 }

script/check-licenses

@@ -27,6 +27,7 @@ const ALLOWED_LICENSES = new Set([
   "0BSD",
   "CC0-1.0",
   "(MIT OR CC0-1.0)",
+  "(MIT OR Apache-2.0)",
   "(MIT AND Zlib)",
   "Python-2.0", // argparse - Python Software Foundation License (permissive)
   "Public Domain",

src/common/controllers/timer-remaining-time-controller.ts

@@ -0,0 +1,70 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { timerTimeRemaining } from "../../data/timer";
+
+/**
+ * Tracks the live remaining time of a timer entity. While the timer is
+ * active, the host is re-rendered every second with an updated
+ * `timeRemaining`, computed from the entity's `finishes_at` attribute.
+ *
+ * The host must call `setStateObj` whenever its timer entity changes.
+ */
+export class TimerRemainingTimeController implements ReactiveController {
+  public timeRemaining?: number;
+
+  private _host: ReactiveControllerHost;
+
+  private _stateObj?: HassEntity;
+
+  private _interval?: number;
+
+  constructor(host: ReactiveControllerHost) {
+    this._host = host;
+    host.addController(this);
+  }
+
+  public setStateObj(stateObj: HassEntity | undefined): void {
+    this._stateObj = stateObj;
+    this._startInterval();
+  }
+
+  public hostConnected(): void {
+    this._startInterval();
+  }
+
+  public hostDisconnected(): void {
+    this._clearInterval();
+  }
+
+  private _startInterval(): void {
+    this._clearInterval();
+    if (!this._stateObj) {
+      this.timeRemaining = undefined;
+      return;
+    }
+    this._calculateRemaining();
+
+    if (this._stateObj.state === "active") {
+      this._interval = window.setInterval(() => {
+        this._calculateRemaining();
+        this._host.requestUpdate();
+      }, 1000);
+    }
+  }
+
+  private _clearInterval(): void {
+    if (this._interval) {
+      clearInterval(this._interval);
+      this._interval = undefined;
+    }
+  }
+
+  private _calculateRemaining(): void {
+    this.timeRemaining = this._stateObj
+      ? timerTimeRemaining(this._stateObj)
+      : undefined;
+  }
+}

src/common/dom/setup-leaflet-map.ts

@@ -1,13 +1,27 @@
-import type { Map, TileLayer } from "leaflet";
+import type { Map } from "leaflet";
+import type { MapBaseLayer } from "../map/base-layer";
+import { createBaseLayer, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from "../map/base-layer";
 
 // Sets up a Leaflet map on the provided DOM element
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 export type LeafletModuleType = typeof import("leaflet");
 
+export interface LeafletMapSetup {
+  map: Map;
+  leaflet: LeafletModuleType;
+  baseLayer: MapBaseLayer;
+}
+
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
-  initialView?: { latitude: number; longitude: number; zoom?: number }
-): Promise<[Map, LeafletModuleType, TileLayer]> => {
+  initialView?: {
+    latitude: number;
+    longitude: number;
+    zoom?: number;
+    darkMode?: boolean;
+    token?: string;
+  }
+): Promise<LeafletMapSetup> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
   }
@@ -17,7 +31,11 @@ export const setupLeafletMap = async (
 
   await import("leaflet.markercluster");
 
-  const map = Leaflet.map(mapElement);
+  const map = Leaflet.map(mapElement, {
+    minZoom: MAP_MIN_ZOOM,
+    maxZoom: MAP_MAX_ZOOM,
+  });
+  map.attributionControl.setPrefix("");
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");
   style.setAttribute("rel", "stylesheet");
@@ -38,21 +56,14 @@ export const setupLeafletMap = async (
     );
   }
 
-  const tileLayer = createTileLayer(Leaflet).addTo(map);
-
-  return [map, Leaflet, tileLayer];
-};
-
-const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
-  leaflet.tileLayer(
-    `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
-      leaflet.Browser.retina ? "@2x.png" : ".png"
-    }`,
-    {
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
-      subdomains: "abcd",
-      minZoom: 0,
-      maxZoom: 20,
-    }
+  // The base layer adds itself: the vector layer only builds its MapLibre map
+  // once it is on the map, and that failing has to fall back to raster.
+  const baseLayer = await createBaseLayer(
+    Leaflet,
+    map,
+    initialView?.darkMode ?? false,
+    initialView?.token
   );
+
+  return { map, leaflet: Leaflet, baseLayer };
+};

src/common/map/base-layer.ts

@@ -0,0 +1,331 @@
+import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
+import type { Map as LeafletMap, TileLayerOptions } from "leaflet";
+import type { setRTLTextPlugin, StyleSpecification } from "maplibre-gl";
+import type { LeafletModuleType } from "../dom/setup-leaflet-map";
+import {
+  MAP_TILES_PATH,
+  mapTilesUrl,
+  refreshMapTilesToken,
+  subscribeMapTilesToken,
+  withMapTilesToken,
+} from "../../data/map_tiles";
+
+// Generated by build-scripts/gulp/map-assets.js. The attribution comes from the
+// TileJSON, deliberately: it follows whoever serves the tiles.
+const VECTOR_STYLES = {
+  light: "/static/map/light.json",
+  dark: "/static/map/dark.json",
+} as const;
+
+// Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
+// worker, hence a URL rather than an import.
+const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
+
+// MapLibre needs WebGL2 even for raster, so the fallback stays a Leaflet layer.
+// OSM serves no @2x variant.
+const RASTER_TILE_URL = `${MAP_TILES_PATH}/raster/{z}/{x}/{y}.png?token={token}`;
+// The demo has no proxy to go through. Upstream serves raster to a browser that
+// identifies itself with a referrer, which the demo page's `same-origin` meta
+// policy strips again unless the tiles ask for it back.
+const DEMO_RASTER_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+const OSM_ATTRIBUTION =
+  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+
+// Browsers keep about 16 live WebGL contexts and drop the oldest, which a
+// dashboard full of map cards hits. A transient loss is restored, hence a grace.
+const CONTEXT_RESTORE_GRACE = 2000;
+const RECOVERY_THROTTLE = 30000;
+
+// On the map, not the layer: marker clustering throws without a maximum. The
+// floor is 1 because at Leaflet zoom 0 the adapter drives MapLibre to -1.
+export const MAP_MIN_ZOOM = 1;
+export const MAP_MAX_ZOOM = 20;
+// OSM's raster stops at 19 and the proxy refuses higher, so Leaflet scales the
+// last level up rather than asking for tiles that are not there.
+const RASTER_MAX_NATIVE_ZOOM = 19;
+
+// Leaflet substitutes any option into the URL template; its types do not.
+type TokenTileLayerOptions = TileLayerOptions & { token?: string };
+
+export interface MapBaseLayer {
+  // A no-op for raster, which has no dark variant and is inverted in CSS.
+  setDarkMode: (darkMode: boolean) => void;
+}
+
+let webGL2Supported: boolean | undefined;
+
+// Rules out iOS below 15, older Android tablets and blocklisted drivers.
+const supportsWebGL2 = (): boolean => {
+  if (webGL2Supported === undefined) {
+    try {
+      const context = document.createElement("canvas").getContext("webgl2");
+      webGL2Supported = Boolean(context);
+      // Contexts are scarce; the probe must not keep one.
+      context?.getExtension("WEBGL_lose_context")?.loseContext();
+    } catch {
+      webGL2Supported = false;
+    }
+  }
+  return webGL2Supported;
+};
+
+// MapLibre rejects a relative sprite URL. Not the glyph URL: encoding would
+// mangle its {fontstack} and {range} placeholders.
+// The demo has no core to proxy through. OSM sets CORS on its tiles but not on
+// its glyphs and sprites, which is why those come from VersaTiles.
+const DEMO_UPSTREAM = {
+  tilejson: "https://vector.openstreetmap.org/shortbread_v1/tilejson.json",
+  assets: "https://tiles.versatiles.org/assets",
+};
+
+const useDemoUpstream = (style: StyleSpecification): StyleSpecification => {
+  style.glyphs = `${DEMO_UPSTREAM.assets}/glyphs/{fontstack}/{range}.pbf`;
+  style.sprite = [
+    { id: "basics", url: `${DEMO_UPSTREAM.assets}/sprites/basics/sprites` },
+  ];
+  Object.values(style.sources).forEach((source) => {
+    if ("url" in source) {
+      source.url = DEMO_UPSTREAM.tilejson;
+    }
+  });
+  return style;
+};
+
+const loadStyle = async (url: string): Promise<StyleSpecification> => {
+  const style: StyleSpecification = await (await fetch(url)).json();
+
+  if (__DEMO__) {
+    return useDemoUpstream(style);
+  }
+
+  if (typeof style.sprite === "string") {
+    style.sprite = mapTilesUrl(style.sprite);
+  } else if (Array.isArray(style.sprite)) {
+    style.sprite = style.sprite.map((sprite) => ({
+      ...sprite,
+      url: mapTilesUrl(sprite.url),
+    }));
+  }
+  return style;
+};
+
+// Global to MapLibre, and it throws when set twice.
+let rtlTextPluginRequested = false;
+const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
+  if (rtlTextPluginRequested) {
+    return;
+  }
+  rtlTextPluginRequested = true;
+  setPlugin(new URL(RTL_TEXT_PLUGIN_URL, location.href).href, true).catch(
+    () => {
+      // RTL labels stay reversed; everything else still renders.
+    }
+  );
+};
+
+const createVectorLayer = async (
+  createLayer: typeof maplibreGL,
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  darkMode: boolean,
+  token: string | undefined
+): Promise<MapBaseLayer | undefined> => {
+  let layer: ReturnType<typeof maplibreGL> | undefined;
+
+  try {
+    layer = createLayer({
+      style: await loadStyle(VECTOR_STYLES[darkMode ? "dark" : "light"]),
+      // Absolute, or the worker fetching tiles cannot resolve them.
+      transformRequest: (url) => ({
+        url: withMapTilesToken(url),
+        // OSM asks a website for a referrer, and the demo has no instance
+        // hostname to leak.
+        referrerPolicy: __DEMO__ ? "origin" : undefined,
+      }),
+    });
+    // The plugin builds the MapLibre map in `onAdd`, so a refused context or a
+    // blocked worker throws here. Keep it guarded or those lose the fallback.
+    layer.addTo(map);
+  } catch {
+    if (layer) {
+      try {
+        layer.remove();
+      } catch {
+        // May never have finished being added.
+      }
+    }
+    return undefined;
+  }
+
+  // Tracked apart so a failed request rolls back to what is displayed, not to
+  // the opposite of what it asked - which with several in flight differs.
+  let appliedDarkMode = darkMode;
+  let requestedDarkMode = darkMode;
+  // Styles are fetched, so only the newest request may touch the map.
+  let latestRequest = 0;
+  let vector = true;
+  let refused = false;
+
+  const glMap = layer.getMaplibreMap();
+  let fallbackTimeout: number | undefined;
+  let contextLost = false;
+
+  // Declared first, but only ever called once all three exist.
+  const handleVisibilityChange = () => {
+    if (contextLost) {
+      scheduleSwap();
+    }
+  };
+
+  const swapToRaster = () => {
+    vector = false;
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    try {
+      layer.remove();
+    } catch {
+      // Nothing left to detach.
+    }
+    createRasterLayer(leaflet, map, token);
+  };
+
+  const scheduleSwap = () => {
+    clearTimeout(fallbackTimeout);
+    // Backgrounding drops it too, and there it comes back on return.
+    if (!vector || document.hidden) {
+      return;
+    }
+    fallbackTimeout = window.setTimeout(swapToRaster, CONTEXT_RESTORE_GRACE);
+  };
+
+  glMap.on("webglcontextlost", () => {
+    contextLost = true;
+    scheduleSwap();
+  });
+  glMap.on("webglcontextrestored", () => {
+    contextLost = false;
+    clearTimeout(fallbackTimeout);
+  });
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  map.on("unload", () => {
+    // Otherwise the timer revives a map that is already gone.
+    clearTimeout(fallbackTimeout);
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  });
+
+  const applyStyle = (newDarkMode: boolean) => {
+    const request = ++latestRequest;
+
+    loadStyle(VECTOR_STYLES[newDarkMode ? "dark" : "light"])
+      .then((style) => {
+        if (request === latestRequest) {
+          appliedDarkMode = newDarkMode;
+          layer.getMaplibreMap()?.setStyle(style);
+        }
+      })
+      .catch(() => {
+        if (request === latestRequest) {
+          requestedDarkMode = appliedDarkMode;
+        }
+      });
+  };
+
+  // A refused request leaves the source dead: the TileJSON is fetched once and
+  // is never retried, so the style has to be applied again once there is a new
+  // token. Throttled, or a proxy refusing for another reason loops.
+  let lastRecovery = 0;
+  glMap.on("error", (event) => {
+    const status = (event.error as { status?: number } | undefined)?.status;
+    // 403 is a stale token, 404 the proxy not registered yet during a restart,
+    // and no status at all a network failure. All three recover the same way,
+    // and a token that comes back unchanged costs nothing.
+    if (status !== undefined && status !== 403 && status !== 404) {
+      return;
+    }
+    if (Date.now() - lastRecovery < RECOVERY_THROTTLE) {
+      return;
+    }
+    lastRecovery = Date.now();
+    refused = true;
+    refreshMapTilesToken();
+  });
+
+  // Only a new token clears the refusal. A theme change in between applies a
+  // style that is refused just as the last one was, so it proves nothing.
+  const unsubscribeToken = subscribeMapTilesToken(() => {
+    if (vector && refused) {
+      refused = false;
+      applyStyle(requestedDarkMode);
+    }
+  });
+  map.on("unload", unsubscribeToken);
+
+  return {
+    setDarkMode: (newDarkMode: boolean) => {
+      if (!vector || newDarkMode === requestedDarkMode) {
+        return;
+      }
+      requestedDarkMode = newDarkMode;
+      applyStyle(newDarkMode);
+    },
+  };
+};
+
+const createRasterLayer = (
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  token: string | undefined
+): MapBaseLayer => {
+  const layer = leaflet
+    .tileLayer(__DEMO__ ? DEMO_RASTER_TILE_URL : mapTilesUrl(RASTER_TILE_URL), {
+      attribution: OSM_ATTRIBUTION,
+      maxZoom: MAP_MAX_ZOOM,
+      maxNativeZoom: RASTER_MAX_NATIVE_ZOOM,
+      referrerPolicy: __DEMO__ ? "origin" : undefined,
+      // Leaflet throws on an undefined template variable, so no token means an
+      // empty one: the tiles 403 and the markers still draw.
+      token: token ?? "",
+    } as TokenTileLayerOptions)
+    .addTo(map);
+
+  // Substituted per request, so a refreshed token needs no new layer.
+  const unsubscribe = subscribeMapTilesToken((newToken) => {
+    (layer.options as TokenTileLayerOptions).token = newToken;
+    // Tiles that 403'd are cached as failures; only a redraw asks again.
+    layer.redraw();
+  });
+  map.on("unload", unsubscribe);
+
+  return { setDarkMode: () => undefined };
+};
+
+export const createBaseLayer = async (
+  leaflet: LeafletModuleType,
+  map: LeafletMap,
+  darkMode: boolean,
+  token: string | undefined
+): Promise<MapBaseLayer> => {
+  if (supportsWebGL2()) {
+    let vectorLayer: MapBaseLayer | undefined;
+    try {
+      const [{ maplibreGL: createLayer }, maplibre] = await Promise.all([
+        import("@maplibre/maplibre-gl-leaflet"),
+        import("maplibre-gl"),
+      ]);
+      ensureRTLTextPlugin(maplibre.setRTLTextPlugin);
+      vectorLayer = await createVectorLayer(
+        createLayer,
+        leaflet,
+        map,
+        darkMode,
+        token
+      );
+    } catch {
+      // No chunk, no vector map - but still a map.
+    }
+    if (vectorLayer) {
+      return vectorLayer;
+    }
+  }
+  return createRasterLayer(leaflet, map, token);
+};

src/common/navigate.ts

@@ -80,6 +80,67 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
   return ensureDialogsClosed(timestamp);
 };
 
+/**
+ * Lets a page with unsaved changes (e.g. the automation editor) veto
+ * navigation. `isDirty` is read live at navigation time; `prompt` resolves
+ * true when navigation may proceed.
+ */
+export interface UnsavedChangesGuard {
+  isDirty(): boolean;
+  prompt(): Promise<boolean>;
+}
+
+const unsavedChangesGuards = new Set<UnsavedChangesGuard>();
+
+export const registerUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.add(guard);
+};
+
+export const unregisterUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.delete(guard);
+};
+
+let pendingUnsavedPrompt: Promise<boolean> | undefined;
+
+/**
+ * Counts navigations that changed the history entry, so a navigation held up
+ * by an unsaved-changes prompt can tell whether a newer one has moved the app
+ * on in the meantime.
+ */
+let committedNavigations = 0;
+
+/**
+ * Asks each dirty guard whether navigation may proceed. Returns true when
+ * nothing is dirty or every prompt was confirmed. Concurrent navigations
+ * share one pending prompt instead of stacking dialogs; the dirty check runs
+ * before joining it, so a navigation triggered from inside a prompt (e.g. by
+ * its save action) cannot deadlock on its own promise.
+ */
+const ensureUnsavedChangesConfirmed = (): Promise<boolean> => {
+  const dirtyGuards = [...unsavedChangesGuards].filter((guard) =>
+    guard.isDirty()
+  );
+  if (!dirtyGuards.length) {
+    return Promise.resolve(true);
+  }
+  if (!pendingUnsavedPrompt) {
+    pendingUnsavedPrompt = (async () => {
+      try {
+        for (const guard of dirtyGuards) {
+          // eslint-disable-next-line no-await-in-loop
+          if (!(await guard.prompt())) {
+            return false;
+          }
+        }
+        return true;
+      } finally {
+        pendingUnsavedPrompt = undefined;
+      }
+    })();
+  }
+  return pendingUnsavedPrompt;
+};
+
 const buildHistoryState = (
   data: Record<string, unknown> | undefined,
   from?: string
@@ -91,7 +152,7 @@ const buildHistoryState = (
   return { ...state, from };
 };
 
-export const navigate = async (path: string, options?: NavigateOptions) => {
+const performNavigation = async (path: string, options?: NavigateOptions) => {
   const canProceed = await ensureDialogsClosed(Date.now());
   if (!canProceed) {
     return false;
@@ -127,9 +188,28 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   fireEvent(mainWindow, "location-changed", {
     replace,
   });
+  committedNavigations += 1;
   return true;
 };
 
+export const navigate = async (path: string, options?: NavigateOptions) => {
+  // Only guard actual departures: navigating to the current path keeps the
+  // page, and any unsaved state on it, mounted.
+  if (path !== currentPath()) {
+    const navigationsBeforePrompt = committedNavigations;
+    if (!(await ensureUnsavedChangesConfirmed())) {
+      return false;
+    }
+    if (committedNavigations !== navigationsBeforePrompt) {
+      // Another navigation landed while the prompt was waiting for an answer,
+      // so this destination is stale. Dropping it keeps a late answer from
+      // pulling the user back off the page they are on now.
+      return false;
+    }
+  }
+  return performNavigation(path, options);
+};
+
 /**
  * Whether the previous history entry is a page this app navigated away from.
  * `history.length` cannot answer this: a login redirect goes through
@@ -142,6 +222,9 @@ export const canGoBack = (): boolean =>
 /**
  * Navigate back to the page we came from, falling back to a path when the
  * previous entry is not ours (deep link, login redirect, fresh tab).
+ * Deliberately not guarded against unsaved changes: pages with such a guard
+ * confirm in their own back handlers, and delete flows leave through here
+ * after the edited item is already gone.
  */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
   const canProceed = await ensureDialogsClosed(Date.now());
@@ -156,5 +239,5 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
     return;
   }
 
-  await navigate(fallbackPath || "/", { replace: true });
+  await performNavigation(fallbackPath || "/", { replace: true });
 };

src/common/url/more-info-query-params.ts

@@ -10,18 +10,15 @@ const VIEW_PARAM = "more-info-view";
 export interface MoreInfoUrlData {
   entityId?: string;
   view?: MoreInfoView;
-  hash: URLSearchParams;
 }
 
 export interface CreateMoreInfoUrlData {
   entityId: string;
   view: MoreInfoView;
-  hash?: URLSearchParams;
 }
 
 export const decodeMoreInfoUrl = (
-  search: SearchParamsSource,
-  hash = ""
+  search: SearchParamsSource
 ): MoreInfoUrlData => {
   const params =
     typeof search === "string"
@@ -35,9 +32,6 @@ export const decodeMoreInfoUrl = (
   return {
     entityId,
     view: isMoreInfoView(view) ? view : undefined,
-    hash: new URLSearchParams(
-      __DEMO__ ? "" : hash.startsWith("#") ? hash.substring(1) : hash
-    ),
   };
 };
 
@@ -48,9 +42,6 @@ export const createMoreInfoUrl = (
   const url = new URL(base, window.location.origin);
   url.searchParams.set(ENTITY_ID_PARAM, data.entityId);
   url.searchParams.set(VIEW_PARAM, data.view);
-  if (!__DEMO__ && data.hash !== undefined) {
-    url.hash = data.hash.toString();
-  }
 
   return `${url.pathname}${url.search}${url.hash}`;
 };

src/common/util/share-in-flight-request.ts

@@ -0,0 +1,37 @@
+import deepFreeze from "deep-freeze";
+
+const inFlightRequests = new WeakMap<object, Map<string, Promise<unknown>>>();
+
+export const shareInFlightRequest = <T>(
+  owner: object,
+  key: string,
+  fetcher: () => Promise<T>
+): Promise<T> => {
+  let requests = inFlightRequests.get(owner);
+  if (!requests) {
+    requests = new Map();
+    inFlightRequests.set(owner, requests);
+  }
+
+  const ownerRequests = requests;
+  const existing = ownerRequests.get(key);
+  if (existing) {
+    return existing as Promise<T>;
+  }
+
+  const request = fetcher()
+    .then((result) => deepFreeze(result) as T)
+    .finally(() => {
+      if (ownerRequests.get(key) !== request) {
+        return;
+      }
+
+      ownerRequests.delete(key);
+      if (ownerRequests.size === 0) {
+        inFlightRequests.delete(owner);
+      }
+    });
+
+  ownerRequests.set(key, request);
+  return request;
+};

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

@@ -3,6 +3,27 @@ import type { TooltipPositionCallback } from "echarts/types/dist/shared";
 export const TOOLTIP_GAP_PX = 12;
 export const TOOLTIP_TOP_OFFSET_PX = 10;
 
+const offsetFromCursor = (
+  cursorX: number,
+  dom: unknown,
+  viewW: number,
+  tipW: number
+) => {
+  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;
+  }
+  return Math.max(0, Math.min(x, viewW - tipW));
+};
+
 /**
  * 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.
@@ -20,21 +41,29 @@ export const sideTooltipPosition: TooltipPositionCallback = (
   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 x = offsetFromCursor(cursorX, dom, viewW, tipW);
   const y = Math.max(0, Math.min(TOOLTIP_TOP_OFFSET_PX, viewH - tipH));
 
   return [x, y];
 };
+
+/**
+ * Offsets the tooltip horizontally from the cursor and keeps it level with it.
+ * For item-trigger tooltips where the cursor's row is what the tooltip shows.
+ */
+export const itemTooltipPosition: TooltipPositionCallback = (
+  point,
+  _params,
+  dom,
+  _rect,
+  size
+) => {
+  const [cursorX, cursorY] = point;
+  const [viewW, viewH] = size.viewSize;
+  const [tipW, tipH] = size.contentSize;
+
+  const x = offsetFromCursor(cursorX, dom, viewW, tipW);
+  const y = Math.max(0, Math.min(cursorY - tipH / 2, viewH - tipH));
+
+  return [x, y];
+};

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

@@ -328,6 +328,7 @@ export class StateHistoryChartLine extends LitElement {
           ...createYAxisPrecisionBounds({
             min: this._clampYAxis(minYAxis),
             max: this._clampYAxis(maxYAxis),
+            unit: this.unit,
             onFractionDigits: (digits) => {
               if (digits !== this._yAxisFractionDigits) {
                 this._yAxisFractionDigits = digits;

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

@@ -1,4 +1,3 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,7 +12,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 { itemTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
@@ -24,7 +23,6 @@ import { measureTextWidth } from "../../util/text";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 
 const ROW_HEIGHT = 30;
-const ROW_HEIGHT_INSIDE_LABELS = 64;
 const GRID_BOTTOM = 30;
 
 @customElement("state-history-chart-timeline")
@@ -43,10 +41,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  /** Draw each row's name above its bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean })
-  public insideLabels = false;
-
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -69,13 +63,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _yWidth = 0;
 
-  private _width = 0;
-
-  private _resize = new ResizeController(this, {
-    skipInitial: true,
-    callback: (entries) => entries[0]?.contentRect.width,
-  });
-
   private _chartTime: Date = new Date();
 
   protected render() {
@@ -83,7 +70,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .hass=${this.hass}
         .options=${this._chartOptions}
-        .height=${`${this.data.length * (this.insideLabels ? ROW_HEIGHT_INSIDE_LABELS : ROW_HEIGHT) + GRID_BOTTOM}px`}
+        .height=${`${this.data.length * ROW_HEIGHT + GRID_BOTTOM}px`}
         .data=${this._chartData as HaECSeries}
         small-controls
         @chart-click=${this._handleChartClick}
@@ -193,19 +180,13 @@ export class StateHistoryChartTimeline extends LitElement {
       this._generateData();
     }
 
-    const width = this.insideLabels ? Math.round(this._resize.value ?? 0) : 0;
-    const widthChanged = width !== this._width;
-    this._width = width;
-
     if (
       !this.hasUpdated ||
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("showNames") ||
-      changedProps.has("insideLabels") ||
       changedProps.has("paddingYAxis") ||
-      changedProps.has("_yWidth") ||
-      widthChanged
+      changedProps.has("_yWidth")
     ) {
       this._createOptions();
     }
@@ -215,22 +196,14 @@ export class StateHistoryChartTimeline extends LitElement {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
     const maxInternalLabelWidth = narrow ? 105 : 185;
-    const insideLabels = this.insideLabels;
-    const labelWidth =
-      showNames && !insideLabels
-        ? Math.max(this.paddingYAxis, this._yWidth)
-        : 0;
+    const labelWidth = showNames
+      ? Math.max(this.paddingYAxis, this._yWidth)
+      : 0;
     const labelMargin = 5;
     const rtl = computeRTL(
       this.hass.language,
       this.hass.translationMetadata.translations
     );
-    // Keeps the plot aligned with the line charts sharing the y-axis padding.
-    const plotPadding = insideLabels ? this.paddingYAxis : labelWidth;
-    // A zero width hides the labels instead of truncating them.
-    const insideLabelWidth = this._width
-      ? Math.max(0, this._width - plotPadding - labelMargin)
-      : undefined;
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -254,56 +227,41 @@ export class StateHistoryChartTimeline extends LitElement {
         axisLine: {
           show: false,
         },
-        axisLabel: insideLabels
-          ? {
-              show: showNames,
-              inside: true,
-              margin: 0,
-              padding: [0, rtl ? 2 : 0, 14, rtl ? 0 : 2],
-              align: rtl ? "right" : "left",
-              verticalAlign: "bottom",
-              width: insideLabelWidth,
-              overflow: "truncate",
-              formatter: (id: string) =>
-                (this._chartData.find((d) => d.id === id)?.name as string) ??
-                "",
-              hideOverlap: true,
+        axisLabel: {
+          show: showNames,
+          width: labelWidth,
+          overflow: "truncate",
+          margin: labelMargin,
+          formatter: (id: string) => {
+            const label = this._chartData.find((d) => d.id === id)
+              ?.name as string;
+            const width = label
+              ? Math.min(
+                  measureTextWidth(label, 12) + labelMargin,
+                  maxInternalLabelWidth
+                )
+              : 0;
+            if (width > this._yWidth) {
+              this._yWidth = width;
+              fireEvent(this, "y-width-changed", {
+                value: this._yWidth,
+                chartIndex: this.chartIndex,
+              });
             }
-          : {
-              show: showNames,
-              width: labelWidth,
-              overflow: "truncate",
-              margin: labelMargin,
-              formatter: (id: string) => {
-                const label = this._chartData.find((d) => d.id === id)
-                  ?.name as string;
-                const width = label
-                  ? Math.min(
-                      measureTextWidth(label, 12) + labelMargin,
-                      maxInternalLabelWidth
-                    )
-                  : 0;
-                if (width > this._yWidth) {
-                  this._yWidth = width;
-                  fireEvent(this, "y-width-changed", {
-                    value: this._yWidth,
-                    chartIndex: this.chartIndex,
-                  });
-                }
-                return label;
-              },
-              hideOverlap: true,
-            },
+            return label;
+          },
+          hideOverlap: true,
+        },
       },
       grid: {
-        top: insideLabels ? 20 : 10,
+        top: 10,
         bottom: GRID_BOTTOM,
-        left: rtl ? 1 : plotPadding,
-        right: rtl ? plotPadding : 1,
+        left: rtl ? 1 : labelWidth,
+        right: rtl ? labelWidth : 1,
       },
       tooltip: {
         renderMode: "html",
-        position: sideTooltipPosition,
+        position: itemTooltipPosition,
         confine: true,
         formatter: this._renderTooltip,
       },
@@ -443,10 +401,6 @@ export class StateHistoryChartTimeline extends LitElement {
   }
 
   static styles = css`
-    :host {
-      display: block;
-    }
-
     ha-chart-base {
       --chart-max-height: none;
     }

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

@@ -79,10 +79,6 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
-  /** Draw timeline row names above their bar instead of in a label column. */
-  @property({ attribute: "inside-labels", type: Boolean, reflect: true })
-  public insideLabels = false;
-
   @property({ attribute: "click-for-more-info", type: Boolean })
   public clickForMoreInfo = true;
 
@@ -231,7 +227,6 @@ export class StateHistoryCharts extends LitElement {
         .startTime=${this._computedStartTime}
         .endTime=${this._computedEndTime}
         .showNames=${this.showNames}
-        .insideLabels=${this.insideLabels}
         .names=${this.names}
         .narrow=${this.narrow}
         .chunked=${this.virtualize}
@@ -429,12 +424,6 @@ export class StateHistoryCharts extends LitElement {
       padding-top: 8px;
     }
 
-    /* Names inside the plot sit close to the chart above them, so the groups
-       need more room between them to stay apart. */
-    :host([inside-labels]) .entry-container.timeline:not(:first-child) {
-      margin-top: var(--ha-space-8);
-    }
-
     .entry-container:hover {
       z-index: 1;
     }

src/components/chart/statistics-chart.ts

@@ -446,6 +446,7 @@ export class StatisticsChart extends LitElement {
         ...createYAxisPrecisionBounds({
           min: this._clampYAxis(minYAxis),
           max: this._clampYAxis(maxYAxis),
+          unit: this.unit,
           // Bar charts stay anchored at 0, so precision must reflect the
           // 0-based range that is actually rendered.
           includeZero: !yAxisScale,

src/components/chart/y-axis-fraction-digits.ts

@@ -1,13 +1,32 @@
+import { intervalScaleEnsureValidExtent } from "echarts/lib/scale/helper";
+import { getPrecision, nice, round } from "echarts/lib/util/number";
+
 // A range smaller than this fraction of the axis magnitude is floating-point
 // noise (e.g. from summed statistics), not real precision.
 const NEGLIGIBLE_RANGE_RATIO = 1e-10;
 
+// Intervals the axis aims for. Passed to ECharts rather than assumed, so the
+// precision derived here cannot drift from the ticks it renders.
+const SPLIT_NUMBER = 5;
+
+// How thin a gap between the data and the plot edge counts as no gap at all,
+// as a fraction of the data span. ECharts floors the axis minimum and ceils the
+// maximum to a tick multiple, which usually leaves headroom, but quantized
+// states often land exactly on a tick and get none — collapsing area-filled
+// series, which are drawn from their value down to the axis minimum. Widening
+// the extent by this much before that rounding bumps any axis with less
+// headroom out to a full tick, and leaves the rest where they are.
+const GAP_FRACTION_OF_SPAN = 0.02;
+
+// A percentage has a real ceiling the way zero is a real floor, so the gap must
+// not push the axis past it. Not every `%` sensor is bounded — power factor is
+// signed and can read over 100 — so this only applies while the data stays under.
+const PERCENT_MAX = 100;
+
 // Derive the number of decimal digits to use for Y-axis labels from the
-// observed data range. We mirror how ECharts sizes its ticks: it splits the
-// range into ~5 intervals (its default `splitNumber`) and rounds that raw
-// interval to a "nice" 1/2/3/5×10ⁿ value, then reports the decimals that nice
-// interval needs. This matches the precision ECharts actually renders, so
-// labels are neither truncated to identical values nor padded with extra zeros.
+// observed data range, by asking ECharts for the same tick interval it will
+// render. This matches the precision it actually draws, so labels are neither
+// truncated to identical values nor padded with extra zeros.
 export function computeYAxisFractionDigits(
   min: number,
   max: number,
@@ -22,13 +41,7 @@ export function computeYAxisFractionDigits(
   // with a tail of zeros (e.g. "0.20000000000000"), so treat it as flat.
   const magnitude = Math.max(Math.abs(lo), Math.abs(hi));
   if (range <= magnitude * NEGLIGIBLE_RANGE_RATIO) return 1;
-  const rawInterval = range / 5;
-  const exponent = Math.floor(Math.log10(rawInterval));
-  const mantissa = rawInterval / 10 ** exponent; // in [1, 10)
-  // Rounding the mantissa to a nice value only ever carries to the next power
-  // of ten (mantissa ≥ 7 → 10), which needs one fewer decimal.
-  const niceExponent = mantissa >= 7 ? exponent + 1 : exponent;
-  return Math.max(0, -niceExponent);
+  return getPrecision(nice(range / SPLIT_NUMBER, true));
 }
 
 interface YAxisExtentValues {
@@ -44,34 +57,116 @@ const resolveYAxisBound = (
   values: YAxisExtentValues
 ): number | undefined => (typeof bound === "function" ? bound(values) : bound);
 
-// Wrap the Y-axis `min`/`max` options in callbacks so the tick-label precision
-// tracks the currently visible axis extent. ECharts re-invokes these callbacks
-// with the extent of the visible (zoom-filtered) data on every dataZoom, and
-// always before the label formatter runs, so recomputing the fraction digits
-// here keeps zoomed-in labels distinct. The callbacks return the original
-// bounds unchanged, so auto-scaling still applies when a bound is not set.
+// A constant series has no span for the gap to be a fraction of, so ECharts
+// falls back to `Math.abs(min)` when sizing it. That makes the extent unequal,
+// which in turn stops `intervalScaleEnsureValidExtent` from applying the ±|v|/2
+// expansion a flat series relies on for its window. Run that expansion here and
+// return fixed bounds, which also suppresses the gap.
+const flatSeriesExtent = (value: number, fixed: [boolean, boolean]) => {
+  const [lo, hi] = intervalScaleEnsureValidExtent([value, value], fixed);
+  const interval = nice((hi - lo) / SPLIT_NUMBER, true);
+  const precision = getPrecision(interval);
+  return {
+    min: round(Math.floor(lo / interval) * interval, precision),
+    max: round(Math.ceil(hi / interval) * interval, precision),
+  };
+};
+
+// Build the `yAxis` options that keep tick-label precision and the plot-edge gap
+// in agreement with the extent ECharts renders. It re-invokes the `min`/`max`
+// callbacks with the extent of the visible (zoom-filtered) data on every
+// dataZoom, and always before the label formatter runs, so the fraction digits
+// recomputed here track the zoomed range. A callback returns `undefined`
+// wherever auto-scaling should stand, and a number only where the axis has to be
+// pinned: an explicit bound, the zero anchor, or a constant series.
 export function createYAxisPrecisionBounds(options: {
   min?: YAxisBound;
   max?: YAxisBound;
   // Set for bar axes anchored at 0, so precision reflects the 0-based range.
+  // Such an axis also gets no gap: pushing it below zero would defeat the zero
+  // anchoring and leave the bars floating above the axis.
   includeZero?: boolean;
+  // Used to recognise a bounded quantity, so the gap cannot widen the axis past
+  // a limit the data itself never crosses.
+  unit?: string;
   onFractionDigits: (digits: number) => void;
 }): {
   min: (values: YAxisExtentValues) => number | undefined;
   max: (values: YAxisExtentValues) => number | undefined;
+  boundaryGap: [number, number];
+  splitNumber: number;
 } {
-  const { min, max, includeZero, onFractionDigits } = options;
+  const { min, max, includeZero, unit, onFractionDigits } = options;
+  const naturalMax = unit === "%" ? PERCENT_MAX : undefined;
+
+  const resolveBounds = (values: YAxisExtentValues) => {
+    const resolvedMin = resolveYAxisBound(min, values);
+    const resolvedMax = resolveYAxisBound(max, values);
+    if (
+      includeZero ||
+      !Number.isFinite(values.min) ||
+      !Number.isFinite(values.max)
+    ) {
+      return { min: resolvedMin, max: resolvedMax, gap: 0 };
+    }
+    if (values.min === values.max) {
+      const flat = flatSeriesExtent(values.min, [
+        resolvedMin !== undefined,
+        resolvedMax !== undefined,
+      ]);
+      // The expansion is a fraction of the magnitude, so a constant series near
+      // the ceiling would otherwise overshoot it too.
+      const flatMax =
+        naturalMax !== undefined && values.max <= naturalMax
+          ? Math.min(flat.max, naturalMax)
+          : flat.max;
+      return {
+        min: resolvedMin ?? flat.min,
+        max: resolvedMax ?? flatMax,
+        gap: 0,
+      };
+    }
+    const gap = (values.max - values.min) * GAP_FRACTION_OF_SPAN;
+    // Never let the gap carry a series past a boundary it does not itself cross.
+    const floor = values.min >= 0 ? 0 : undefined;
+    const ceiling =
+      naturalMax !== undefined && values.max <= naturalMax
+        ? naturalMax
+        : values.max <= 0
+          ? 0
+          : undefined;
+    return {
+      min:
+        resolvedMin ??
+        (floor !== undefined && values.min - floor < gap ? floor : undefined),
+      max:
+        resolvedMax ??
+        (ceiling !== undefined && ceiling - values.max < gap
+          ? ceiling
+          : undefined),
+      gap,
+    };
+  };
+
   return {
+    // Always emit the key. `setOption` merges the Y axis rather than replacing
+    // it, so a conditionally spread gap would survive a chart switching to a
+    // zero-anchored type and leave its bars floating.
+    boundaryGap: includeZero
+      ? [0, 0]
+      : [GAP_FRACTION_OF_SPAN, GAP_FRACTION_OF_SPAN],
+    splitNumber: SPLIT_NUMBER,
     min: (values) => {
-      const resolvedMin = resolveYAxisBound(min, values);
-      const resolvedMax = resolveYAxisBound(max, values);
-      const extentMin = resolvedMin ?? values.min;
-      const extentMax = resolvedMax ?? values.max;
+      const bounds = resolveBounds(values);
       onFractionDigits(
-        computeYAxisFractionDigits(extentMin, extentMax, includeZero)
+        computeYAxisFractionDigits(
+          bounds.min ?? values.min - bounds.gap,
+          bounds.max ?? values.max + bounds.gap,
+          includeZero
+        )
       );
-      return resolvedMin;
+      return bounds.min;
     },
-    max: (values) => resolveYAxisBound(max, values),
+    max: (values) => resolveBounds(values).max,
   };
 }

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

@@ -12,7 +12,6 @@ import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
   deviceAutomationsEqual,
-  deviceAutomationsSimilar,
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
@@ -180,12 +179,15 @@ export abstract class HaDeviceAutomationPicker<
       (a, idx) => value === `${a.device_id}_${idx}`
     );
 
-    const text = automation
+    const described =
+      automation ?? (this.value?.domain ? this.value : undefined);
+
+    const text = described
       ? this._localizeDeviceAutomation(
           this.hass.localize,
           this.hass.states,
           this._entityReg,
-          automation
+          described
         )
       : value === NO_AUTOMATION_KEY
         ? this.NO_AUTOMATION_TEXT
@@ -195,29 +197,24 @@ export abstract class HaDeviceAutomationPicker<
   };
 
   private async _updateDeviceInfo() {
+    // Asking a removed device for its automations fails rather than returning
+    // an empty list.
     this._automations = this.deviceId
       ? (
-          await this._fetchDeviceAutomations(this.hass.callWS, this.deviceId)
+          await this._fetchDeviceAutomations(
+            this.hass.callWS,
+            this.deviceId
+          ).catch(() => [] as T[])
         ).sort(sortDeviceAutomations)
       : // No device, clear the list of automations
         [];
 
-    // If there is no value, or if we have changed the device ID, reset the
-    // value. When the device changed (for example after replacing a removed
-    // device), try to keep the same automation type/subtype on the new device
-    // before falling back to the first available automation.
+    // If there is no value, or if we have changed the device ID, reset the value.
     if (!this.value || this.value.device_id !== this.deviceId) {
-      const equivalent =
-        this.value && this.deviceId
-          ? this._automations.find((automation) =>
-              deviceAutomationsSimilar(automation, this.value!)
-            )
-          : undefined;
       this._setValue(
-        equivalent ||
-          (this._automations.length
-            ? this._automations[0]
-            : this._createNoAutomation(this.deviceId))
+        this._automations.length
+          ? this._automations[0]
+          : this._createNoAutomation(this.deviceId)
       );
     }
     this._renderEmpty = true;

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

@@ -1,4 +1,4 @@
-import { mdiAlertOutline } from "@mdi/js";
+import { mdiSwapHorizontal } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
@@ -22,6 +22,7 @@ import {
   type DeviceRegistryEntry,
 } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
+import { domainToName } from "../../data/integration";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-alert";
@@ -104,6 +105,14 @@ export class HaDevicePicker extends LitElement {
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
+  /**
+   * The split devices that can actually replace the current value, when the
+   * caller knows better than this picker. Narrows the replacement candidates,
+   * so the user is only asked to choose when there is a real choice.
+   */
+  @property({ attribute: false })
+  public replacementDeviceIds?: string[];
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
@@ -187,7 +196,8 @@ export class HaDevicePicker extends LitElement {
       value: string | undefined,
       _devices: HomeAssistant["devices"],
       compositeSplits: DeviceCompositeSplits | undefined,
-      items: (DevicePickerItem | string)[]
+      items: (DevicePickerItem | string)[],
+      replacementDeviceIds: string[] | undefined
     ) => {
       if (!value || !compositeSplits || this.hass.devices[value]) {
         return undefined;
@@ -203,7 +213,11 @@ export class HaDevicePicker extends LitElement {
           .filter((item): item is DevicePickerItem => typeof item !== "string")
           .map((item) => item.id)
       );
-      const candidates = split.split_ids.filter((id) => selectableIds.has(id));
+      const candidates = split.split_ids.filter(
+        (id) =>
+          selectableIds.has(id) &&
+          (!replacementDeviceIds || replacementDeviceIds.includes(id))
+      );
       return { candidates, primaryId: split.primary_id };
     }
   );
@@ -250,26 +264,26 @@ export class HaDevicePicker extends LitElement {
   };
 
   private _valueRenderer = memoizeOne(
-    (
-      configEntriesLookup: Record<string, ConfigEntry>,
-      replacementName: string | undefined
-    ) =>
+    (configEntriesLookup: Record<string, ConfigEntry>, isReplaced: boolean) =>
       (value: string) => {
         const deviceId = value;
         const device = this.hass.devices[deviceId];
 
         if (!device) {
-          // When the device was replaced and a replacement is available, show
-          // the replacement device's name. Otherwise fall back to the normal
-          // "not found" display of the raw id.
-          if (replacementName) {
+          // The removed device has no name left to show, so say what happened
+          // to it instead. The alert below names the replacements. Without a
+          // replacement, fall back to the normal "not found" display.
+          if (isReplaced) {
             return html`
               <ha-svg-icon
                 slot="start"
-                style="color: var(--warning-color)"
-                .path=${mdiAlertOutline}
+                .path=${mdiSwapHorizontal}
               ></ha-svg-icon>
-              <span slot="headline">${replacementName}</span>
+              <span slot="headline"
+                >${this.hass.localize(
+                  "ui.components.device-picker.device_replaced"
+                )}</span
+              >
             `;
           }
           return html`<span slot="headline">${deviceId}</span>`;
@@ -399,31 +413,23 @@ export class HaDevicePicker extends LitElement {
             this.value,
             this.hass.devices,
             this._compositeSplits,
-            this._getItems()
+            this._getItems(),
+            this.replacementDeviceIds
           )
         : undefined;
 
     // Only treat the value as "replaced" when there is an available
     // replacement device; otherwise fall back to normal "not found" behavior.
     const canReplace = !!replacement?.candidates.length;
-    const replacementName = canReplace
-      ? computeDeviceName(
-          this.hass.devices[
-            replacement!.primaryId &&
-            replacement!.candidates.includes(replacement!.primaryId)
-              ? replacement!.primaryId
-              : replacement!.candidates[0]
-          ]
-        )
-      : undefined;
 
     const valueRenderer = this._valueRenderer(
       this._configEntryLookup,
-      replacementName
+      canReplace
     );
 
     return html`
       <ha-generic-picker
+        .noUnknownState=${canReplace}
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .disabled=${this.disabled}
@@ -443,14 +449,9 @@ export class HaDevicePicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${
-          replacement?.candidates.length
-            ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_count",
-                { count: replacement.candidates.length }
-              )
-            : this.hass.localize("ui.components.device-picker.unknown")
-        }
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
@@ -464,30 +465,52 @@ export class HaDevicePicker extends LitElement {
   }) {
     const { candidates } = replacement;
 
-    const replacementName =
-      candidates.length === 1
-        ? computeDeviceName(this.hass.devices[candidates[0]])
-        : undefined;
+    // The split devices all inherit the composite's name, so the integration is
+    // what tells them apart.
+    const replacementDevice =
+      candidates.length === 1 ? this.hass.devices[candidates[0]] : undefined;
+    const replacementName = replacementDevice
+      ? computeDeviceName(replacementDevice)
+      : undefined;
+    const replacementDomain = replacementDevice?.primary_config_entry
+      ? this._configEntryLookup[replacementDevice.primary_config_entry]?.domain
+      : undefined;
 
     return html`
       <ha-alert alert-type="warning">
         ${
-          replacementName
+          replacementName && replacementDomain
             ? this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_one",
-                { device: replacementName }
-              )
-            : this.hass.localize(
-                "ui.components.device-picker.device_replaced_by_multiple",
-                { count: candidates.length }
+                "ui.components.device-picker.device_replaced_by_one_integration",
+                {
+                  device: replacementName,
+                  integration: domainToName(
+                    this.hass.localize,
+                    replacementDomain
+                  ),
+                }
               )
+            : replacementName
+              ? this.hass.localize(
+                  "ui.components.device-picker.device_replaced_by_one",
+                  { device: replacementName }
+                )
+              : this.hass.localize(
+                  "ui.components.device-picker.device_replaced_by_multiple",
+                  { count: candidates.length }
+                )
         }
         <ha-button
           slot="action"
           appearance="plain"
+          variant="warning"
           @click=${this._handleReplace}
         >
-          ${this.hass.localize("ui.components.device-picker.replace_device")}
+          ${
+            candidates.length === 1
+              ? this.hass.localize("ui.components.device-picker.replace_update")
+              : this.hass.localize("ui.components.device-picker.replace_choose")
+          }
         </ha-button>
       </ha-alert>
     `;
@@ -498,7 +521,8 @@ export class HaDevicePicker extends LitElement {
       this.value,
       this.hass.devices,
       this._compositeSplits,
-      this._getItems()
+      this._getItems(),
+      this.replacementDeviceIds
     );
     if (!replacement?.candidates.length) {
       return;

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

@@ -16,10 +16,10 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
 import {
-  getStatisticIds,
   getStatisticLabel,
   type StatisticsMetaData,
 } from "../../data/recorder";
+import { getStatisticIds } from "../../data/recorder_statistic_ids";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box-item";

src/components/ha-alert.ts

@@ -90,7 +90,7 @@ class HaAlert extends LitElement {
   static styles = css`
     .issue-type {
       position: relative;
-      padding: 8px;
+      padding: var(--ha-alert-padding, 8px);
       display: flex;
     }
     .icon {

src/components/ha-camera-stream.ts

@@ -5,6 +5,7 @@ import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import { STATE_RUNNING } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
@@ -149,6 +150,7 @@ export class HaCameraStream extends LitElement {
           objectFit: this.fitMode,
         })}
         alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
+        @load=${this._handleImageLoad}
       />`;
     }
 
@@ -214,6 +216,10 @@ export class HaCameraStream extends LitElement {
     }
   }
 
+  private _handleImageLoad() {
+    fireEvent(this, "load");
+  }
+
   private _handleHlsStreams(ev: CustomEvent) {
     this._hlsStreams = ev.detail;
   }

src/components/ha-config-navigation-list.ts

@@ -1,12 +1,12 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-svg-icon";
-import "../../../components/item/ha-list-item-button";
-import "../../../components/list/ha-list-nav";
-import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
-import type { HomeAssistant } from "../../../types";
+import "./ha-icon-next";
+import "./ha-svg-icon";
+import "./item/ha-list-item-button";
+import "./list/ha-list-nav";
+import type { PageNavigation } from "../layouts/hass-tabs-subpage";
+import type { HomeAssistant } from "../types";
 
 @customElement("ha-config-navigation-list")
 class HaConfigNavigationList extends LitElement {

src/components/ha-drawer.ts

@@ -95,6 +95,10 @@ export class HaDrawer extends LitElement {
   }
 
   private _handleAfterHide(ev: Event) {
+    // Ignore wa-after-hide from nested Web Awesome components (e.g. tooltips)
+    if (ev.target !== ev.currentTarget) {
+      return;
+    }
     ev.stopPropagation();
     this.open = false;
     fireEvent(this, "hass-drawer-closed");

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -1,6 +1,13 @@
-import type { Selector } from "../../data/selector";
+import {
+  getSelectorInitialValue,
+  getSelectorInitialValueOrUndefined,
+} from "./get-selector-initial-value";
 import type { HaFormData, HaFormSchema } from "./types";
 
+interface ComputeInitialHaFormDataOptions {
+  skipUnsupportedSelectors?: boolean;
+}
+
 const setDefaultValue = (
   field: HaFormSchema,
   value: HaFormData | undefined
@@ -18,7 +25,8 @@ const setDefaultValue = (
 };
 
 export const computeInitialHaFormData = (
-  schema: HaFormSchema[] | readonly HaFormSchema[]
+  schema: HaFormSchema[] | readonly HaFormSchema[],
+  options?: ComputeInitialHaFormDataOptions
 ): Record<string, any> => {
   const data = {};
   schema.forEach((field) => {
@@ -33,7 +41,7 @@ export const computeInitialHaFormData = (
     } else if ("default" in field) {
       data[field.name] = setDefaultValue(field, field.default);
     } else if (field.type === "expandable") {
-      const expandableData = computeInitialHaFormData(field.schema);
+      const expandableData = computeInitialHaFormData(field.schema, options);
       if (field.required || Object.keys(expandableData).length) {
         // Only add expandable data if it's required or any of its children have initial values.
         data[field.name] = expandableData;
@@ -62,104 +70,11 @@ export const computeInitialHaFormData = (
         seconds: 0,
       };
     } else if ("selector" in field) {
-      const selector: Selector = field.selector;
-
-      if ("device" in selector) {
-        data[field.name] = selector.device?.multiple ? [] : "";
-      } else if ("entity" in selector) {
-        data[field.name] = selector.entity?.multiple ? [] : "";
-      } else if ("area" in selector) {
-        data[field.name] = selector.area?.multiple ? [] : "";
-      } else if ("label" in selector) {
-        data[field.name] = selector.label?.multiple ? [] : "";
-      } else if ("boolean" in selector) {
-        data[field.name] = false;
-      } else if (
-        "addon" in selector ||
-        "attribute" in selector ||
-        "file" in selector ||
-        "icon" in selector ||
-        "serial_port" in selector ||
-        "template" in selector ||
-        "text" in selector ||
-        "theme" in selector ||
-        "object" in selector
-      ) {
-        data[field.name] = "";
-      } else if ("number" in selector) {
-        data[field.name] = selector.number?.min ?? 0;
-      } else if ("select" in selector) {
-        if (selector.select?.options.length) {
-          const firstOption = selector.select.options[0];
-          const val =
-            typeof firstOption === "string" ? firstOption : firstOption.value;
-          data[field.name] = selector.select.multiple ? [val] : val;
-        }
-      } else if ("country" in selector) {
-        if (selector.country?.countries?.length) {
-          data[field.name] = selector.country.countries[0];
-        }
-      } else if ("language" in selector) {
-        if (selector.language?.languages?.length) {
-          data[field.name] = selector.language.languages[0];
-        }
-      } else if ("duration" in selector) {
-        data[field.name] = {
-          hours: 0,
-          minutes: 0,
-          seconds: 0,
-        };
-      } else if ("time" in selector) {
-        data[field.name] = "00:00:00";
-      } else if ("date" in selector || "datetime" in selector) {
-        const now = new Date().toISOString().slice(0, 10);
-        data[field.name] = `${now}T00:00:00`;
-      } else if ("color_rgb" in selector) {
-        data[field.name] = [0, 0, 0];
-      } else if ("color_temp" in selector) {
-        data[field.name] = selector.color_temp?.min_mireds ?? 153;
-      } else if (
-        "action" in selector ||
-        "trigger" in selector ||
-        "condition" in selector
-      ) {
-        data[field.name] = [];
-      } else if ("media" in selector || "target" in selector) {
-        data[field.name] = {};
-      } else if ("state" in selector) {
-        data[field.name] = selector.state?.multiple ? [] : "";
-      } else if ("choose" in selector) {
-        const firstChoice = Object.keys(selector.choose.choices)[0];
-        if (!firstChoice) {
-          data[field.name] = {};
-        } else {
-          data[field.name] = {
-            active_choice: firstChoice,
-            [firstChoice]: computeInitialHaFormData([
-              {
-                name: firstChoice,
-                selector: selector.choose.choices[firstChoice].selector,
-              },
-            ])[firstChoice],
-          };
-        }
-      } else if ("numeric_threshold" in selector) {
-        const mode = selector.numeric_threshold?.mode ?? "crossed";
-        const type = mode === "changed" ? "any" : "above";
-        data[field.name] =
-          type === "any"
-            ? { type }
-            : {
-                type,
-                value: {
-                  number: selector.numeric_threshold?.number?.min ?? 0,
-                  active_choice: "number",
-                },
-              };
-      } else {
-        throw new Error(
-          `Selector ${Object.keys(selector)[0]} not supported in initial form data`
-        );
+      const initialValue = options?.skipUnsupportedSelectors
+        ? getSelectorInitialValueOrUndefined(field.selector)
+        : getSelectorInitialValue(field.selector);
+      if (initialValue !== undefined) {
+        data[field.name] = initialValue;
       }
     }
   });

src/components/ha-form/get-selector-fallback-value.ts

@@ -1,25 +1,89 @@
 import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
-import type { Selector } from "../../data/selector";
+import type {
+  Selector,
+  SelectorForType,
+  SelectorType,
+} from "../../data/selector";
+
+type SelectorFallbackValues = {
+  [T in SelectorType]: ((selector: SelectorForType<T>) => unknown) | undefined;
+};
+
+const SELECTOR_FALLBACK_VALUES = {
+  action: undefined,
+  addon: undefined,
+  automation_behavior: undefined,
+  app: undefined,
+  area: undefined,
+  areas_display: undefined,
+  attribute: undefined,
+  assist_pipeline: undefined,
+  boolean: () => false,
+  choose: undefined,
+  color_rgb: undefined,
+  condition: undefined,
+  config_entry: undefined,
+  conversation_agent: undefined,
+  constant: (selector) => selector.constant?.value,
+  country: undefined,
+  date: undefined,
+  datetime: undefined,
+  device: undefined,
+  device_class: undefined,
+  duration: undefined,
+  entity: undefined,
+  entity_name: undefined,
+  statistic: undefined,
+  file: undefined,
+  floor: undefined,
+  label: undefined,
+  language: undefined,
+  navigation: undefined,
+  number: (selector) => selector.number?.min ?? 0,
+  numeric_threshold: undefined,
+  object: undefined,
+  period: undefined,
+  qr_code: undefined,
+  select: undefined,
+  selector: undefined,
+  serial_port: undefined,
+  state: undefined,
+  backup_location: undefined,
+  stt: undefined,
+  target: undefined,
+  template: undefined,
+  text: undefined,
+  time: undefined,
+  icon: undefined,
+  media: undefined,
+  theme: undefined,
+  timezone: undefined,
+  button_toggle: undefined,
+  trigger: undefined,
+  tts: undefined,
+  tts_voice: undefined,
+  location: undefined,
+  color_temp: (selector) => {
+    if (selector.color_temp?.unit === "kelvin") {
+      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
+    }
+
+    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
+  },
+  ui_action: undefined,
+  ui_clock_date_format: undefined,
+  ui_color: undefined,
+  ui_state_content: undefined,
+  ui_time_format: undefined,
+} satisfies SelectorFallbackValues;
 
 /**
  * Value a selector already displays when no field value is set.
  * Used when enabling an optional service/trigger/condition field.
  */
 export const getSelectorFallbackValue = (selector: Selector): unknown => {
-  if ("constant" in selector) {
-    return selector.constant?.value;
-  }
-  if ("boolean" in selector) {
-    return false;
-  }
-  if ("number" in selector) {
-    return selector.number?.min ?? 0;
-  }
-  if ("color_temp" in selector) {
-    if (selector.color_temp?.unit === "kelvin") {
-      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
-    }
-    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
-  }
-  return undefined;
+  const type = Object.keys(selector)[0] as SelectorType;
+  const fallbackValue = SELECTOR_FALLBACK_VALUES[type];
+
+  return fallbackValue?.(selector as never);
 };

src/components/ha-form/get-selector-initial-value.ts

@@ -0,0 +1,140 @@
+import { DEFAULT_MIN_KELVIN } from "../../common/color/convert-light-color";
+import type {
+  Selector,
+  SelectorForType,
+  SelectorType,
+} from "../../data/selector";
+
+type SelectorInitialValues = {
+  [T in SelectorType]: ((selector: SelectorForType<T>) => unknown) | undefined;
+};
+
+const SELECTOR_INITIAL_VALUES = {
+  action: () => [],
+  addon: () => "",
+  automation_behavior: undefined,
+  app: undefined,
+  area: (selector) => (selector.area?.multiple ? [] : ""),
+  areas_display: undefined,
+  attribute: () => "",
+  assist_pipeline: undefined,
+  boolean: () => false,
+  choose: (selector) => {
+    const firstChoice = Object.keys(selector.choose.choices)[0];
+
+    if (!firstChoice) {
+      return {};
+    }
+
+    const childValue = getSelectorInitialValueOrUndefined(
+      selector.choose.choices[firstChoice].selector
+    );
+
+    return childValue === undefined
+      ? { active_choice: firstChoice }
+      : { active_choice: firstChoice, [firstChoice]: childValue };
+  },
+  color_rgb: () => [0, 0, 0],
+  condition: () => [],
+  config_entry: undefined,
+  conversation_agent: undefined,
+  constant: (selector) => selector.constant?.value,
+  country: (selector) => selector.country?.countries?.[0],
+  date: () => new Date().toISOString().slice(0, 10),
+  datetime: () => `${new Date().toISOString().slice(0, 10)} 00:00:00`,
+  device: (selector) => (selector.device?.multiple ? [] : ""),
+  device_class: (selector) =>
+    selector.device_class?.multiple ? [] : undefined,
+  duration: () => ({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  }),
+  entity: (selector) => (selector.entity?.multiple ? [] : ""),
+  entity_name: undefined,
+  statistic: undefined,
+  file: () => "",
+  floor: undefined,
+  label: (selector) => (selector.label?.multiple ? [] : ""),
+  language: (selector) => selector.language?.languages?.[0],
+  navigation: undefined,
+  number: (selector) => selector.number?.min ?? 0,
+  numeric_threshold: (selector) => {
+    const mode = selector.numeric_threshold?.mode ?? "crossed";
+    const type = mode === "changed" ? "any" : "above";
+
+    return type === "any"
+      ? { type }
+      : {
+          type,
+          value: {
+            number: selector.numeric_threshold?.number?.min ?? 0,
+            active_choice: "number",
+          },
+        };
+  },
+  object: (selector) => (selector.object?.multiple ? [] : ""),
+  period: undefined,
+  qr_code: undefined,
+  select: (selector) => {
+    const select = selector.select;
+
+    if (!select?.options.length) {
+      return undefined;
+    }
+
+    const firstOption = select.options[0];
+    const value =
+      typeof firstOption === "string" ? firstOption : firstOption.value;
+
+    return select.multiple ? [value] : value;
+  },
+  selector: undefined,
+  serial_port: () => "",
+  state: (selector) => (selector.state?.multiple ? [] : ""),
+  backup_location: undefined,
+  stt: undefined,
+  target: () => ({}),
+  template: () => "",
+  text: (selector) => (selector.text?.multiple ? [] : ""),
+  time: () => "00:00:00",
+  icon: () => "",
+  media: (selector) => (selector.media?.multiple ? [] : {}),
+  theme: () => "",
+  timezone: undefined,
+  button_toggle: undefined,
+  trigger: () => [],
+  tts: undefined,
+  tts_voice: undefined,
+  location: undefined,
+  color_temp: (selector) => {
+    if (selector.color_temp?.unit === "kelvin") {
+      return selector.color_temp.min ?? DEFAULT_MIN_KELVIN;
+    }
+
+    return selector.color_temp?.min ?? selector.color_temp?.min_mireds ?? 153;
+  },
+  ui_action: undefined,
+  ui_clock_date_format: undefined,
+  ui_color: undefined,
+  ui_state_content: undefined,
+  ui_time_format: undefined,
+} satisfies SelectorInitialValues;
+
+export const getSelectorInitialValueOrUndefined = (
+  selector: Selector
+): unknown => {
+  const type = Object.keys(selector)[0] as SelectorType;
+  return SELECTOR_INITIAL_VALUES[type]?.(selector as never);
+};
+
+export const getSelectorInitialValue = (selector: Selector): unknown => {
+  const type = Object.keys(selector)[0] as SelectorType;
+  const initialValue = SELECTOR_INITIAL_VALUES[type];
+
+  if (!initialValue) {
+    throw new Error(`Selector ${type} not supported in initial form data`);
+  }
+
+  return initialValue(selector as never);
+};

src/components/ha-generic-picker.ts

@@ -111,6 +111,11 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
 
   @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
 
+  // Skip the "unknown value" highlight and note for a value that is not in the
+  // list but that the value renderer presents on its own.
+  @property({ type: Boolean, attribute: "no-unknown-state" })
+  public noUnknownState = false;
+
   @query(".container") private _containerElement?: HTMLDivElement;
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -148,7 +153,10 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _unsubscribeTinyKeys?: () => void;
 
   protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("value")) {
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("noUnknownState")
+    ) {
       this._setUnknownValue();
     }
   }
@@ -287,6 +295,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
   private _setUnknownValue = () => {
     const items = this.getItems();
     if (
+      this.noUnknownState ||
       this.allowCustomValue ||
       this.value === undefined ||
       this.value === null ||

src/components/ha-media-item-picker.ts

@@ -0,0 +1,445 @@
+import { mdiDelete, mdiPlayBox, mdiPlus } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../common/dom/fire_event";
+import { supportsFeature } from "../common/entity/supports-feature";
+import type { MediaPickedEvent } from "../data/media-player";
+import {
+  MediaClassBrowserSettings,
+  MediaPlayerEntityFeature,
+} from "../data/media-player";
+import type { MediaSelector, MediaSelectorValue } from "../data/selector";
+import type { HomeAssistant } from "../types";
+import "./ha-alert";
+import "./ha-form/ha-form";
+import type { SchemaUnion } from "./ha-form/types";
+import "./media-player/ha-media-browser-thumbnail";
+import { showMediaBrowserDialog } from "./media-player/show-media-browser-dialog";
+import { ensureArray } from "../common/array/ensure-array";
+import "./ha-picture-upload";
+
+const MANUAL_SCHEMA = [
+  { name: "media_content_id", required: false, selector: { text: {} } },
+  { name: "media_content_type", required: false, selector: { text: {} } },
+] as const;
+
+const INCLUDE_DOMAINS = ["media_player"];
+
+const EMPTY_FORM = {};
+
+@customElement("ha-media-item-picker")
+export class HaMediaItemPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: MediaSelector;
+
+  @property({ attribute: false }) public value?: MediaSelectorValue;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean, reflect: true }) public required = true;
+
+  @property({ type: Boolean }) public multiple = false;
+
+  @property({ attribute: false }) public context?: {
+    filter_entity?: string | string[];
+  };
+
+  private _contextEntities: string[] | undefined;
+
+  private get _hasAccept(): boolean {
+    return !!this.selector?.media?.accept?.length;
+  }
+
+  willUpdate(changedProps: PropertyValues<this>) {
+    if (changedProps.has("context")) {
+      if (!this._hasAccept) {
+        this._contextEntities = ensureArray(this.context?.filter_entity);
+      }
+    }
+  }
+
+  protected render() {
+    const entityId = this._getActiveEntityId();
+
+    const stateObj = entityId ? this.hass.states[entityId] : undefined;
+
+    const supportsBrowse =
+      !entityId ||
+      (stateObj &&
+        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
+
+    if (this.selector.media?.image_upload && !this.value) {
+      return html`${this.label ? html`<label>${this.label}</label>` : nothing}
+        <ha-picture-upload
+          .hass=${this.hass}
+          .value=${null}
+          .contentIdHelper=${this.selector.media?.content_id_helper}
+          select-media
+          full-media
+          @media-picked=${this._pictureUploadMediaPicked}
+        ></ha-picture-upload>`;
+    }
+
+    const hideEntityPicker =
+      this._hasAccept ||
+      (this._contextEntities && this._contextEntities.length <= 1);
+    return html`
+      ${
+        hideEntityPicker
+          ? nothing
+          : html`
+              <ha-entity-picker
+                .value=${entityId}
+                .label=${
+                  this.label ||
+                  this.hass.localize(
+                    "ui.components.selectors.media.pick_media_player"
+                  )
+                }
+                .disabled=${this.disabled}
+                .helper=${this.helper}
+                .required=${this.required}
+                .hideClearIcon=${!!this._contextEntities}
+                .includeDomains=${INCLUDE_DOMAINS}
+                .includeEntities=${this._contextEntities}
+                .allowCustomEntity=${!this._contextEntities}
+                @value-changed=${this._entityChanged}
+              ></ha-entity-picker>
+            `
+      }
+      ${
+        !supportsBrowse
+          ? html`
+              ${this.label ? html`<label>${this.label}</label>` : nothing}
+              <ha-alert>
+                ${this.hass.localize(
+                  "ui.components.selectors.media.browse_not_supported"
+                )}
+              </ha-alert>
+              <ha-form
+                .hass=${this.hass}
+                .data=${this.value || EMPTY_FORM}
+                .schema=${MANUAL_SCHEMA}
+                .computeLabel=${this._computeLabelCallback}
+                .computeHelper=${this._computeHelperCallback}
+              ></ha-form>
+            `
+          : html`${this.label ? html`<label>${this.label}</label>` : nothing}
+              <ha-card
+                outlined
+                tabindex="0"
+                role="button"
+                aria-label=${
+                  !this.value?.media_content_id
+                    ? this.hass.localize(
+                        "ui.components.selectors.media.pick_media"
+                      )
+                    : this.value.metadata?.title || this.value.media_content_id
+                }
+                @click=${this._pickMedia}
+                @keydown=${this._handleKeyDown}
+                class=${
+                  this.disabled || (!entityId && !this._hasAccept)
+                    ? "disabled"
+                    : ""
+                }
+              >
+                <div class="content-container">
+                  <div class="thumbnail">
+                    ${
+                      this.value?.metadata?.thumbnail
+                        ? html`
+                            <div
+                              class="${classMap({
+                                "centered-image":
+                                  !!this.value.metadata.media_class &&
+                                  ["app", "directory"].includes(
+                                    this.value.metadata.media_class
+                                  ),
+                              })}
+                          image"
+                            >
+                              <ha-media-browser-thumbnail
+                                .hass=${this.hass}
+                                .url=${this.value.metadata.thumbnail}
+                              ></ha-media-browser-thumbnail>
+                            </div>
+                          `
+                        : html`
+                            <div class="icon-holder image">
+                              <ha-svg-icon
+                                class="folder"
+                                .path=${
+                                  !this.value?.media_content_id
+                                    ? mdiPlus
+                                    : this.value?.metadata?.media_class
+                                      ? MediaClassBrowserSettings[
+                                          this.value.metadata.media_class ===
+                                          "directory"
+                                            ? this.value.metadata
+                                                .children_media_class ||
+                                              this.value.metadata.media_class
+                                            : this.value.metadata.media_class
+                                        ].icon
+                                      : mdiPlayBox
+                                }
+                              ></ha-svg-icon>
+                            </div>
+                          `
+                    }
+                  </div>
+                  <div class="title">
+                    ${
+                      !this.value?.media_content_id
+                        ? this.hass.localize(
+                            "ui.components.selectors.media.pick_media"
+                          )
+                        : this.value.metadata?.title ||
+                          this.value.media_content_id
+                    }
+                  </div>
+                  ${
+                    !this.multiple || !this.value
+                      ? nothing
+                      : html`
+                          <div class="delete">
+                            <ha-icon-button
+                              .label=${this.hass.localize("ui.common.delete")}
+                              .path=${mdiDelete}
+                              @click=${this._clearValue}
+                            ></ha-icon-button>
+                          </div>
+                        `
+                  }
+                </div>
+              </ha-card>
+              ${
+                this.selector.media?.image_upload
+                  ? html`<div>
+                      <ha-button
+                        appearance="plain"
+                        size="s"
+                        variant="danger"
+                        @click=${this._clearValue}
+                      >
+                        ${this.hass.localize(
+                          "ui.components.picture-upload.clear_picture"
+                        )}
+                      </ha-button>
+                    </div>`
+                  : nothing
+              }`
+      }
+      ${
+        hideEntityPicker && this.helper
+          ? html`<ha-input-helper-text .disabled=${this.disabled}
+              >${this.helper}</ha-input-helper-text
+            >`
+          : nothing
+      }
+    `;
+  }
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof MANUAL_SCHEMA>
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${schema.name}`);
+
+  private _computeHelperCallback = (
+    schema: SchemaUnion<typeof MANUAL_SCHEMA>
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${schema.name}_detail`);
+
+  private _entityChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!this._hasAccept && this.context?.filter_entity) {
+      fireEvent(this, "value-changed", {
+        value: {
+          media_content_id: "",
+          media_content_type: "",
+          metadata: {
+            browse_entity_id: ev.detail.value,
+          },
+        },
+      });
+    } else {
+      fireEvent(this, "value-changed", {
+        value: {
+          entity_id: ev.detail.value,
+          media_content_id: "",
+          media_content_type: "",
+        },
+      });
+    }
+  }
+
+  private _pickMedia() {
+    showMediaBrowserDialog(this, {
+      action: "pick",
+      entityId: this._getActiveEntityId(),
+      navigateIds: this.value?.metadata?.navigateIds,
+      accept: this.selector.media?.accept,
+      defaultId: this.value?.media_content_id,
+      defaultType: this.value?.media_content_type,
+      hideContentType: this.selector.media?.hide_content_type,
+      contentIdHelper: this.selector.media?.content_id_helper,
+      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
+        fireEvent(this, "value-changed", {
+          value: {
+            ...this.value,
+            media_content_id: pickedMedia.item.media_content_id,
+            media_content_type: pickedMedia.item.media_content_type,
+            metadata: {
+              title: pickedMedia.item.title,
+              thumbnail: pickedMedia.item.thumbnail,
+              media_class: pickedMedia.item.media_class,
+              children_media_class: pickedMedia.item.children_media_class,
+              navigateIds: pickedMedia.navigateIds?.map((id) => ({
+                media_content_type: id.media_content_type,
+                media_content_id: id.media_content_id,
+              })),
+              ...(!this._hasAccept && this.context?.filter_entity
+                ? { browse_entity_id: this._getActiveEntityId() }
+                : {}),
+            },
+          },
+        });
+      },
+    });
+  }
+
+  private _getActiveEntityId(): string | undefined {
+    const metaId = this.value?.metadata?.browse_entity_id;
+    return (
+      this.value?.entity_id ||
+      (metaId && this._contextEntities?.includes(metaId) && metaId) ||
+      this._contextEntities?.[0]
+    );
+  }
+
+  private _handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._pickMedia();
+    }
+  }
+
+  private _pictureUploadMediaPicked(ev) {
+    const pickedMedia = ev.detail as MediaPickedEvent;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.value,
+        media_content_id: pickedMedia.item.media_content_id,
+        media_content_type: pickedMedia.item.media_content_type,
+        metadata: {
+          title: pickedMedia.item.title,
+          thumbnail: pickedMedia.item.thumbnail,
+          media_class: pickedMedia.item.media_class,
+          children_media_class: pickedMedia.item.children_media_class,
+          navigateIds: pickedMedia.navigateIds?.map((id) => ({
+            media_content_type: id.media_content_type,
+            media_content_id: id.media_content_id,
+          })),
+        },
+      },
+    });
+  }
+
+  private _clearValue(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
+  static styles = css`
+    ha-entity-picker {
+      display: block;
+      margin-bottom: 16px;
+    }
+    ha-alert {
+      display: block;
+      margin-bottom: 16px;
+    }
+    ha-card {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      cursor: pointer;
+      transition: background-color 180ms ease-in-out;
+      min-height: 56px;
+      margin-bottom: var(--ha-space-1);
+    }
+    ha-card:hover:not(.disabled),
+    ha-card:focus:not(.disabled) {
+      background-color: var(--state-icon-hover-color, rgba(0, 0, 0, 0.04));
+    }
+    ha-card:focus {
+      outline: none;
+    }
+    ha-card.disabled {
+      pointer-events: none;
+      color: var(--disabled-text-color);
+    }
+    .content-container {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      gap: var(--ha-space-3);
+    }
+    ha-card .thumbnail {
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+      position: relative;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-md);
+      overflow: hidden;
+    }
+    ha-card .image {
+      border-radius: var(--ha-border-radius-md);
+    }
+    .folder {
+      --mdc-icon-size: 24px;
+    }
+    .title {
+      font-size: var(--ha-font-size-m);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: 1.4;
+      flex: 1;
+      min-width: 0;
+    }
+    .image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      --ha-media-browser-thumbnail-fit: cover;
+    }
+    .centered-image {
+      margin: 4px;
+      --ha-media-browser-thumbnail-fit: contain;
+    }
+    .icon-holder {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-media-item-picker": HaMediaItemPicker;
+  }
+}

src/components/ha-related-items.ts

@@ -1,16 +1,17 @@
 import {
-  mdiAlertCircleOutline,
   mdiDevices,
   mdiPaletteSwatch,
   mdiTextureBox,
   mdiTransitConnectionVariant,
 } from "@mdi/js";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import type { HASSDomCurrentTargetEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { Blueprints } from "../data/blueprint";
 import { fetchBlueprints } from "../data/blueprint";
@@ -18,14 +19,15 @@ import type { ConfigEntry } from "../data/config_entries";
 import { getConfigEntries } from "../data/config_entries";
 import type { ItemType, RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
-import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
+import "./ha-icon";
 import "./ha-icon-next";
-import "./ha-list-item";
 import "./ha-state-icon";
-import "./ha-switch";
-import "./ha-list";
+import "./ha-svg-icon";
+import "./item/ha-list-item-button";
+import type { HaListItemButton } from "./item/ha-list-item-button";
+import "./list/ha-grouped-list";
 
 @customElement("ha-related-items")
 export class HaRelatedItems extends LitElement {
@@ -35,16 +37,16 @@ export class HaRelatedItems extends LitElement {
 
   @property({ attribute: false }) public itemId!: string;
 
+  @property({ attribute: false }) public exclude?: (keyof RelatedResult)[];
+
+  @property({ type: Boolean, reflect: true }) public empty = true;
+
   @state() private _entries?: ConfigEntry[];
 
   @state() private _blueprints?: Record<"automation" | "script", Blueprints>;
 
   @state() private _related?: RelatedResult;
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-  }
-
   private async _fetchConfigEntries() {
     if (this._entries) {
       return;
@@ -64,6 +66,19 @@ export class HaRelatedItems extends LitElement {
     this._blueprints = { automation, script };
   }
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("_related") || changedProps.has("exclude")) {
+      this.empty =
+        !this._related ||
+        !Object.entries(this._related).some(
+          ([section, items]) =>
+            items?.length &&
+            !this.exclude?.includes(section as keyof RelatedResult)
+        );
+    }
+  }
+
   protected updated(changedProps: PropertyValues<this>) {
     super.updated(changedProps);
     if (
@@ -127,25 +142,14 @@ export class HaRelatedItems extends LitElement {
     }
   );
 
+  private _isExcluded(section: keyof RelatedResult) {
+    return this.exclude?.includes(section) ?? false;
+  }
+
   protected render() {
     if (!this._related) {
       return nothing;
     }
-    if (Object.keys(this._related).length === 0) {
-      return html`
-        <ha-list>
-          <ha-list-item hasMeta graphic="icon" noninteractive>
-            <ha-svg-icon
-              .path=${mdiAlertCircleOutline}
-              slot="graphic"
-            ></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.components.related-items.no_related_found"
-            )}
-          </ha-list-item>
-        </ha-list>
-      `;
-    }
 
     const { configEntries, configEntryDomains } = this._getConfigEntries(
       this._related.config_entry,
@@ -154,97 +158,77 @@ export class HaRelatedItems extends LitElement {
 
     return html`
       ${
-        this._related.entity
+        this._related.entity && !this._isExcluded("entity")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.entity")}
-              </h3>
-              <ha-list>
-                ${this._relatedEntities(this._related.entity).map(
-                  (entity) => html`
-                    <ha-list-item
-                      @click=${this._openMoreInfo}
-                      .entityId=${entity.entity_id}
-                      hasMeta
-                      graphic="icon"
-                    >
-                      <ha-state-icon
-                        .stateObj=${entity}
-                        slot="graphic"
-                      ></ha-state-icon>
-                      ${entity.attributes.friendly_name || entity.entity_id}
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  `
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.entity"
                 )}
-              </ha-list>
+              >
+                ${this._relatedEntities(this._related.entity).map((entity) =>
+                  this._renderEntityRow(entity)
+                )}
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.device
-          ? html`<h3>
-                ${this.hass.localize("ui.components.related-items.device")}
-              </h3>
-              <ha-list>
+        this._related.device && !this._isExcluded("device")
+          ? html`
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.device"
+                )}
+              >
                 ${this._related.device.map((relatedDeviceId) => {
                   const device = this.hass.devices[relatedDeviceId];
                   if (!device) {
                     return nothing;
                   }
                   return html`
-                    <a href="/config/devices/device/${relatedDeviceId}">
-                      <ha-list-item hasMeta graphic="icon">
-                        <ha-svg-icon
-                          .path=${
-                            device.entry_type === "service"
-                              ? mdiTransitConnectionVariant
-                              : mdiDevices
-                          }
-                          slot="graphic"
-                        ></ha-svg-icon>
-                        ${device.name_by_user || device.name}
-                        <ha-icon-next slot="meta"></ha-icon-next>
-                      </ha-list-item>
-                    </a>
+                    <ha-list-item-button
+                      .href=${`/config/devices/device/${relatedDeviceId}`}
+                      .headline=${device.name_by_user || device.name || ""}
+                    >
+                      <ha-svg-icon
+                        slot="start"
+                        .path=${
+                          device.entry_type === "service"
+                            ? mdiTransitConnectionVariant
+                            : mdiDevices
+                        }
+                      ></ha-svg-icon>
+                      <ha-icon-next slot="end"></ha-icon-next>
+                    </ha-list-item-button>
                   `;
                 })}
-              </ha-list>`
+              </ha-grouped-list>
+            `
           : nothing
       }
       ${
-        configEntries || this._related.integration
-          ? html`<h3>
-                ${this.hass.localize("ui.components.related-items.integration")}
-              </h3>
-              <ha-list
-                >${configEntries?.map((entry) => {
+        (configEntries || this._related.integration) &&
+        !this._isExcluded("integration")
+          ? html`
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.integration"
+                )}
+              >
+                ${configEntries?.map((entry) => {
                   if (!entry) {
                     return nothing;
                   }
                   return html`
-                    <a
-                      href=${`/config/integrations/integration/${entry.domain}#config_entry=${entry.entry_id}`}
+                    <ha-list-item-button
+                      .href=${`/config/integrations/integration/${entry.domain}#config_entry=${entry.entry_id}`}
+                      .headline=${`${this.hass.localize(
+                        `component.${entry.domain}.title`
+                      )}: ${entry.title}`}
                     >
-                      <ha-list-item hasMeta graphic="icon">
-                        <img
-                          .src=${brandsUrl(
-                            {
-                              domain: entry.domain,
-                              type: "icon",
-                              darkOptimized: this.hass.themes?.darkMode,
-                            },
-                            this.hass.auth.data.hassUrl
-                          )}
-                          crossorigin="anonymous"
-                          referrerpolicy="no-referrer"
-                          alt=${entry.domain}
-                          slot="graphic"
-                        />
-                        ${this.hass.localize(`component.${entry.domain}.title`)}:
-                        ${entry.title} <ha-icon-next slot="meta"></ha-icon-next>
-                      </ha-list-item>
-                    </a>
+                      ${this._renderBrandIcon(entry.domain)}
+                      <ha-icon-next slot="end"></ha-icon-next>
+                    </ha-list-item-button>
                   `;
                 })}
                 ${this._related.integration
@@ -252,259 +236,216 @@ export class HaRelatedItems extends LitElement {
                     (integration) => !configEntryDomains.has(integration)
                   )
                   .map(
-                    (integration) =>
-                      html`<a
-                        href=${`/config/integrations/integration/${integration}`}
+                    (integration) => html`
+                      <ha-list-item-button
+                        .href=${`/config/integrations/integration/${integration}`}
+                        .headline=${this.hass.localize(
+                          `component.${integration}.title`
+                        )}
                       >
-                        <ha-list-item hasMeta graphic="icon">
-                          <img
-                            .src=${brandsUrl(
-                              {
-                                domain: integration,
-                                type: "icon",
-                                darkOptimized: this.hass.themes?.darkMode,
-                              },
-                              this.hass.auth.data.hassUrl
-                            )}
-                            crossorigin="anonymous"
-                            referrerpolicy="no-referrer"
-                            alt=${integration}
-                            slot="graphic"
-                          />
-                          ${this.hass.localize(`component.${integration}.title`)}
-                          <ha-icon-next slot="meta"></ha-icon-next>
-                        </ha-list-item>
-                      </a>`
+                        ${this._renderBrandIcon(integration)}
+                        <ha-icon-next slot="end"></ha-icon-next>
+                      </ha-list-item-button>
+                    `
                   )}
-              </ha-list>`
+              </ha-grouped-list>
+            `
           : nothing
       }
       ${
-        this._related.area
-          ? html`<h3>
-                ${this.hass.localize("ui.components.related-items.area")}
-              </h3>
-              <ha-list
-                >${this._related.area.map((relatedAreaId) => {
+        this._related.area && !this._isExcluded("area")
+          ? html`
+              <ha-grouped-list
+                .header=${this.hass.localize("ui.components.related-items.area")}
+              >
+                ${this._related.area.map((relatedAreaId) => {
                   const area = this.hass.areas[relatedAreaId];
                   if (!area) {
                     return nothing;
                   }
                   return html`
-                    <a href="/config/areas/area/${relatedAreaId}">
-                      <ha-list-item
-                        hasMeta
-                        .graphic=${area.picture ? "avatar" : "icon"}
-                      >
-                        ${
-                          area.picture
-                            ? html` <div
+                    <ha-list-item-button
+                      .href=${`/config/areas/area/${relatedAreaId}`}
+                      .headline=${area.name}
+                    >
+                      ${
+                        area.picture
+                          ? html`
+                              <div
                                 class="avatar"
                                 style=${styleMap({
                                   backgroundImage: `url(${area.picture})`,
                                 })}
-                                slot="graphic"
-                              ></div>`
-                            : area.icon
-                              ? html`<ha-icon
-                                  slot="graphic"
+                                slot="start"
+                              ></div>
+                            `
+                          : area.icon
+                            ? html`
+                                <ha-icon
+                                  slot="start"
                                   .icon=${area.icon}
-                                ></ha-icon>`
-                              : html`<ha-svg-icon
-                                  slot="graphic"
+                                ></ha-icon>
+                              `
+                            : html`
+                                <ha-svg-icon
+                                  slot="start"
                                   .path=${mdiTextureBox}
-                                ></ha-svg-icon>`
-                        }
-                        ${area.name}
-                        <ha-icon-next slot="meta"></ha-icon-next>
-                      </ha-list-item>
-                    </a>
+                                ></ha-svg-icon>
+                              `
+                      }
+                      <ha-icon-next slot="end"></ha-icon-next>
+                    </ha-list-item-button>
                   `;
                 })}
-              </ha-list>`
+              </ha-grouped-list>
+            `
           : nothing
       }
       ${
-        this._related.group
+        this._related.group && !this._isExcluded("group")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.group")}
-              </h3>
-              <ha-list>
-                ${this._relatedGroups(this._related.group).map(
-                  (group) => html`
-                    <ha-list-item
-                      @click=${this._openMoreInfo}
-                      .entityId=${group.entity_id}
-                      hasMeta
-                      graphic="icon"
-                    >
-                      <ha-state-icon
-                        .stateObj=${group}
-                        slot="graphic"
-                      ></ha-state-icon>
-                      ${group.attributes.friendly_name || group.entity_id}
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  `
+              <ha-grouped-list
+                .header=${this.hass.localize("ui.components.related-items.group")}
+              >
+                ${this._relatedGroups(this._related.group).map((group) =>
+                  this._renderEntityRow(group)
                 )}
-              </ha-list>
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.scene
+        this._related.scene && !this._isExcluded("scene")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.scene")}
-              </h3>
-              <ha-list>
-                ${this._relatedScenes(this._related.scene).map(
-                  (scene) => html`
-                    <ha-list-item
-                      @click=${this._openMoreInfo}
-                      .entityId=${scene.entity_id}
-                      hasMeta
-                      graphic="icon"
-                    >
-                      <ha-state-icon
-                        .stateObj=${scene}
-                        slot="graphic"
-                      ></ha-state-icon>
-                      ${scene.attributes.friendly_name || scene.entity_id}
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  `
+              <ha-grouped-list
+                .header=${this.hass.localize("ui.components.related-items.scene")}
+              >
+                ${this._relatedScenes(this._related.scene).map((scene) =>
+                  this._renderEntityRow(scene)
                 )}
-              </ha-list>
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.automation_blueprint
+        this._related.automation_blueprint &&
+        !this._isExcluded("automation_blueprint")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.blueprint")}
-              </h3>
-              <ha-list>
-                ${this._related.automation_blueprint.map((path) => {
-                  const blueprintMeta = this._blueprints
-                    ? this._blueprints.automation[path]
-                    : undefined;
-                  return html`<a href="/config/blueprint/dashboard">
-                    <ha-list-item hasMeta graphic="icon">
-                      <ha-svg-icon
-                        .path=${mdiPaletteSwatch}
-                        slot="graphic"
-                      ></ha-svg-icon>
-                      ${
-                        !blueprintMeta || "error" in blueprintMeta
-                          ? path
-                          : blueprintMeta.metadata.name || path
-                      }
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  </a>`;
-                })}
-              </ha-list>
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.blueprint"
+                )}
+              >
+                ${this._related.automation_blueprint.map((path) =>
+                  this._renderBlueprintRow(path, "automation")
+                )}
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.automation
+        this._related.automation && !this._isExcluded("automation")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.automation")}
-              </h3>
-              <ha-list>
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.automation"
+                )}
+              >
                 ${this._relatedAutomations(this._related.automation).map(
-                  (automation) => html`
-                    <ha-list-item
-                      @click=${this._openMoreInfo}
-                      .entityId=${automation.entity_id}
-                      hasMeta
-                      graphic="icon"
-                    >
-                      <ha-state-icon
-                        .stateObj=${automation}
-                        slot="graphic"
-                      ></ha-state-icon>
-                      ${
-                        automation.attributes.friendly_name ||
-                        automation.entity_id
-                      }
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  `
+                  (automation) => this._renderEntityRow(automation)
                 )}
-              </ha-list>
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.script_blueprint
+        this._related.script_blueprint && !this._isExcluded("script_blueprint")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.blueprint")}
-              </h3>
-              <ha-list>
-                ${this._related.script_blueprint.map((path) => {
-                  const blueprintMeta = this._blueprints
-                    ? this._blueprints.script[path]
-                    : undefined;
-                  return html`<a href="/config/blueprint/dashboard">
-                    <ha-list-item hasMeta graphic="icon">
-                      <ha-svg-icon
-                        .path=${mdiPaletteSwatch}
-                        slot="graphic"
-                      ></ha-svg-icon>
-                      ${
-                        !blueprintMeta || "error" in blueprintMeta
-                          ? path
-                          : blueprintMeta.metadata.name || path
-                      }
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  </a>`;
-                })}
-              </ha-list>
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.blueprint"
+                )}
+              >
+                ${this._related.script_blueprint.map((path) =>
+                  this._renderBlueprintRow(path, "script")
+                )}
+              </ha-grouped-list>
             `
           : nothing
       }
       ${
-        this._related.script
+        this._related.script && !this._isExcluded("script")
           ? html`
-              <h3>
-                ${this.hass.localize("ui.components.related-items.script")}
-              </h3>
-              <ha-list>
-                ${this._relatedScripts(this._related.script).map(
-                  (script) => html`
-                    <ha-list-item
-                      @click=${this._openMoreInfo}
-                      .entityId=${script.entity_id}
-                      hasMeta
-                      graphic="icon"
-                    >
-                      <ha-state-icon
-                        .stateObj=${script}
-                        slot="graphic"
-                      ></ha-state-icon>
-                      ${script.attributes.friendly_name || script.entity_id}
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  `
+              <ha-grouped-list
+                .header=${this.hass.localize(
+                  "ui.components.related-items.script"
                 )}
-              </ha-list>
+              >
+                ${this._relatedScripts(this._related.script).map((script) =>
+                  this._renderEntityRow(script)
+                )}
+              </ha-grouped-list>
             `
           : nothing
       }
     `;
   }
 
+  private _renderEntityRow(entity: HassEntity) {
+    return html`
+      <ha-list-item-button
+        .headline=${entity.attributes.friendly_name || entity.entity_id}
+        data-entity-id=${entity.entity_id}
+        @click=${this._openMoreInfo}
+      >
+        <ha-state-icon slot="start" .stateObj=${entity}></ha-state-icon>
+        <ha-icon-next slot="end"></ha-icon-next>
+      </ha-list-item-button>
+    `;
+  }
+
+  private _renderBrandIcon(domain: string) {
+    return html`
+      <img
+        slot="start"
+        alt=""
+        loading="lazy"
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+        src=${brandsUrl(
+          {
+            domain,
+            type: "icon",
+            darkOptimized: this.hass.themes?.darkMode,
+          },
+          this.hass.auth.data.hassUrl
+        )}
+      />
+    `;
+  }
+
+  private _renderBlueprintRow(path: string, type: "automation" | "script") {
+    const blueprintMeta = this._blueprints
+      ? this._blueprints[type][path]
+      : undefined;
+    return html`
+      <ha-list-item-button
+        href="/config/blueprint/dashboard"
+        .headline=${
+          !blueprintMeta || "error" in blueprintMeta
+            ? path
+            : blueprintMeta.metadata.name || path
+        }
+      >
+        <ha-svg-icon slot="start" .path=${mdiPaletteSwatch}></ha-svg-icon>
+        <ha-icon-next slot="end"></ha-icon-next>
+      </ha-list-item-button>
+    `;
+  }
+
   private async _findRelated() {
     this._related = await findRelated(this.hass, this.itemType, this.itemId);
-    if (this._related.config_entry) {
+    if (this._related.config_entry && !this._isExcluded("integration")) {
       this._fetchConfigEntries();
     }
     if (this._related.script_blueprint || this._related.automation_blueprint) {
@@ -512,36 +453,49 @@ export class HaRelatedItems extends LitElement {
     }
   }
 
-  private _openMoreInfo(ev: CustomEvent) {
-    const entityId = (ev.target as any).entityId;
+  private _openMoreInfo(ev: HASSDomCurrentTargetEvent<HaListItemButton>) {
+    const entityId = ev.currentTarget.dataset.entityId;
+    if (!entityId) {
+      return;
+    }
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        a {
-          color: var(--primary-color);
-          text-decoration: none;
-        }
-        ha-list-item {
-          --mdc-list-side-padding: 24px;
-        }
-        h3 {
-          padding: 0 24px;
-          margin-bottom: -8px;
-        }
-        h3:first-child {
-          margin-top: 0;
-        }
-        .avatar {
-          background-position: center center;
-          background-size: cover;
-        }
-      `,
-    ];
-  }
+  static styles: CSSResultGroup = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-6);
+    }
+
+    :host([empty]) {
+      display: none;
+    }
+
+    ha-list-item-button {
+      --ha-row-item-padding-block: var(--ha-space-2);
+      --ha-row-item-min-height: 40px;
+      --ha-row-item-gap: var(--ha-space-3);
+      --mdc-icon-size: 20px;
+    }
+
+    img[slot="start"],
+    .avatar {
+      width: 20px;
+      height: 20px;
+      object-fit: contain;
+    }
+
+    .avatar {
+      border-radius: var(--ha-border-radius-circle);
+      background-position: center center;
+      background-size: cover;
+    }
+
+    ha-icon-next {
+      color: var(--secondary-text-color);
+    }
+  `;
 }
 
 declare global {

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

@@ -1,33 +1,10 @@
-import { mdiPlayBox, mdiPlus } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { fireEvent } from "../../common/dom/fire_event";
-import { supportsFeature } from "../../common/entity/supports-feature";
-import type { MediaPickedEvent } from "../../data/media-player";
-import {
-  MediaClassBrowserSettings,
-  MediaPlayerEntityFeature,
-} from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "../ha-alert";
-import "../ha-form/ha-form";
-import type { SchemaUnion } from "../ha-form/types";
-import "../media-player/ha-media-browser-thumbnail";
-import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
+import "../ha-media-item-picker";
 import { ensureArray } from "../../common/array/ensure-array";
-import "../ha-picture-upload";
-
-const MANUAL_SCHEMA = [
-  { name: "media_content_id", required: false, selector: { text: {} } },
-  { name: "media_content_type", required: false, selector: { text: {} } },
-] as const;
-
-const INCLUDE_DOMAINS = ["media_player"];
-
-const EMPTY_FORM = {};
+import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("ha-selector-media")
 export class HaMediaSelector extends LitElement {
@@ -35,7 +12,8 @@ export class HaMediaSelector extends LitElement {
 
   @property({ attribute: false }) public selector!: MediaSelector;
 
-  @property({ attribute: false }) public value?: MediaSelectorValue;
+  @property({ attribute: false }) public value?:
+    MediaSelectorValue | MediaSelectorValue[];
 
   @property() public label?: string;
 
@@ -49,367 +27,83 @@ export class HaMediaSelector extends LitElement {
     filter_entity?: string | string[];
   };
 
-  private _contextEntities: string[] | undefined;
-
-  private get _hasAccept(): boolean {
-    return !!this.selector?.media?.accept?.length;
+  private _renderPicker(
+    helper?: string,
+    value?: MediaSelectorValue,
+    index?: number,
+    changeCallback?
+  ): TemplateResult {
+    return html`<ha-media-item-picker
+      .hass=${this.hass}
+      .context=${this.context}
+      .selector=${this.selector}
+      .value=${value}
+      .label=${index == null ? this.label : undefined}
+      .helper=${helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+      .multiple=${index != null}
+      @value-changed=${changeCallback}
+      .idx=${index}
+    ></ha-media-item-picker>`;
   }
 
-  willUpdate(changedProps: PropertyValues<this>) {
-    if (changedProps.has("context")) {
-      if (!this._hasAccept) {
-        this._contextEntities = ensureArray(this.context?.filter_entity);
+  private _multiValueChanged = (event: CustomEvent) => {
+    event.stopPropagation();
+    const target = event.currentTarget as any;
+    if (!target) return;
+    const idx = target.idx;
+    let newValue: MediaSelectorValue[] | undefined;
+    if (idx === undefined) return;
+    if (!this.value || !Array.isArray(this.value)) {
+      newValue = event.detail.value ? [event.detail.value] : undefined;
+    } else {
+      newValue = [...this.value];
+      if (event.detail.value) {
+        if (idx > this.value.length) {
+          newValue.push(event.detail.value);
+        } else {
+          newValue[idx] = event.detail.value;
+        }
+      } else {
+        newValue.splice(idx, 1);
+        if (newValue.length === 0) {
+          newValue = undefined;
+        }
       }
     }
-  }
+    fireEvent(this, "value-changed", { value: newValue });
+  };
 
   protected render() {
-    const entityId = this._getActiveEntityId();
-
-    const stateObj = entityId ? this.hass.states[entityId] : undefined;
-
-    const supportsBrowse =
-      !entityId ||
-      (stateObj &&
-        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
-
-    if (this.selector.media?.image_upload && !this.value) {
-      return html`${this.label ? html`<label>${this.label}</label>` : nothing}
-        <ha-picture-upload
-          .hass=${this.hass}
-          .value=${null}
-          .contentIdHelper=${this.selector.media?.content_id_helper}
-          select-media
-          full-media
-          @media-picked=${this._pictureUploadMediaPicked}
-        ></ha-picture-upload>`;
+    if (this.selector.media?.multiple) {
+      const value = ensureArray(this.value);
+      const result: TemplateResult[] = this.label
+        ? [html`<label>${this.label}</label>`]
+        : [];
+      if (value) {
+        result.push(
+          ...value.map((v, i) =>
+            this._renderPicker(undefined, v, i, this._multiValueChanged)
+          )
+        );
+      }
+      result.push(
+        this._renderPicker(
+          this.helper,
+          undefined,
+          value?.length || 0,
+          this._multiValueChanged
+        )
+      );
+      return result;
     }
 
-    return html`
-      ${
-        this._hasAccept ||
-        (this._contextEntities && this._contextEntities.length <= 1)
-          ? nothing
-          : html`
-              <ha-entity-picker
-                .value=${entityId}
-                .label=${
-                  this.label ||
-                  this.hass.localize(
-                    "ui.components.selectors.media.pick_media_player"
-                  )
-                }
-                .disabled=${this.disabled}
-                .helper=${this.helper}
-                .required=${this.required}
-                .hideClearIcon=${!!this._contextEntities}
-                .includeDomains=${INCLUDE_DOMAINS}
-                .includeEntities=${this._contextEntities}
-                .allowCustomEntity=${!this._contextEntities}
-                @value-changed=${this._entityChanged}
-              ></ha-entity-picker>
-            `
-      }
-      ${
-        !supportsBrowse
-          ? html`
-              ${this.label ? html`<label>${this.label}</label>` : nothing}
-              <ha-alert>
-                ${this.hass.localize(
-                  "ui.components.selectors.media.browse_not_supported"
-                )}
-              </ha-alert>
-              <ha-form
-                .hass=${this.hass}
-                .data=${this.value || EMPTY_FORM}
-                .schema=${MANUAL_SCHEMA}
-                .computeLabel=${this._computeLabelCallback}
-                .computeHelper=${this._computeHelperCallback}
-              ></ha-form>
-            `
-          : html`${this.label ? html`<label>${this.label}</label>` : nothing}
-              <ha-card
-                outlined
-                tabindex="0"
-                role="button"
-                aria-label=${
-                  !this.value?.media_content_id
-                    ? this.hass.localize(
-                        "ui.components.selectors.media.pick_media"
-                      )
-                    : this.value.metadata?.title || this.value.media_content_id
-                }
-                @click=${this._pickMedia}
-                @keydown=${this._handleKeyDown}
-                class=${
-                  this.disabled || (!entityId && !this._hasAccept)
-                    ? "disabled"
-                    : ""
-                }
-              >
-                <div class="content-container">
-                  <div class="thumbnail">
-                    ${
-                      this.value?.metadata?.thumbnail
-                        ? html`
-                            <div
-                              class="${classMap({
-                                "centered-image":
-                                  !!this.value.metadata.media_class &&
-                                  ["app", "directory"].includes(
-                                    this.value.metadata.media_class
-                                  ),
-                              })}
-                          image"
-                            >
-                              <ha-media-browser-thumbnail
-                                .hass=${this.hass}
-                                .url=${this.value.metadata.thumbnail}
-                              ></ha-media-browser-thumbnail>
-                            </div>
-                          `
-                        : html`
-                            <div class="icon-holder image">
-                              <ha-svg-icon
-                                class="folder"
-                                .path=${
-                                  !this.value?.media_content_id
-                                    ? mdiPlus
-                                    : this.value?.metadata?.media_class
-                                      ? MediaClassBrowserSettings[
-                                          this.value.metadata.media_class ===
-                                          "directory"
-                                            ? this.value.metadata
-                                                .children_media_class ||
-                                              this.value.metadata.media_class
-                                            : this.value.metadata.media_class
-                                        ].icon
-                                      : mdiPlayBox
-                                }
-                              ></ha-svg-icon>
-                            </div>
-                          `
-                    }
-                  </div>
-                  <div class="title">
-                    ${
-                      !this.value?.media_content_id
-                        ? this.hass.localize(
-                            "ui.components.selectors.media.pick_media"
-                          )
-                        : this.value.metadata?.title ||
-                          this.value.media_content_id
-                    }
-                  </div>
-                </div>
-              </ha-card>
-              ${
-                this.selector.media?.clearable
-                  ? html`<div>
-                      <ha-button
-                        appearance="plain"
-                        size="s"
-                        variant="danger"
-                        @click=${this._clearValue}
-                      >
-                        ${this.hass.localize(
-                          "ui.components.picture-upload.clear_picture"
-                        )}
-                      </ha-button>
-                    </div>`
-                  : nothing
-              }`
-      }
-    `;
-  }
-
-  private _computeLabelCallback = (
-    schema: SchemaUnion<typeof MANUAL_SCHEMA>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${schema.name}`);
-
-  private _computeHelperCallback = (
-    schema: SchemaUnion<typeof MANUAL_SCHEMA>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${schema.name}_detail`);
-
-  private _entityChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    if (!this._hasAccept && this.context?.filter_entity) {
-      fireEvent(this, "value-changed", {
-        value: {
-          media_content_id: "",
-          media_content_type: "",
-          metadata: {
-            browse_entity_id: ev.detail.value,
-          },
-        },
-      });
-    } else {
-      fireEvent(this, "value-changed", {
-        value: {
-          entity_id: ev.detail.value,
-          media_content_id: "",
-          media_content_type: "",
-        },
-      });
-    }
-  }
-
-  private _pickMedia() {
-    showMediaBrowserDialog(this, {
-      action: "pick",
-      entityId: this._getActiveEntityId(),
-      navigateIds: this.value?.metadata?.navigateIds,
-      accept: this.selector.media?.accept,
-      defaultId: this.value?.media_content_id,
-      defaultType: this.value?.media_content_type,
-      hideContentType: this.selector.media?.hide_content_type,
-      contentIdHelper: this.selector.media?.content_id_helper,
-      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
-        fireEvent(this, "value-changed", {
-          value: {
-            ...this.value,
-            media_content_id: pickedMedia.item.media_content_id,
-            media_content_type: pickedMedia.item.media_content_type,
-            metadata: {
-              title: pickedMedia.item.title,
-              thumbnail: pickedMedia.item.thumbnail,
-              media_class: pickedMedia.item.media_class,
-              children_media_class: pickedMedia.item.children_media_class,
-              navigateIds: pickedMedia.navigateIds?.map((id) => ({
-                media_content_type: id.media_content_type,
-                media_content_id: id.media_content_id,
-              })),
-              ...(!this._hasAccept && this.context?.filter_entity
-                ? { browse_entity_id: this._getActiveEntityId() }
-                : {}),
-            },
-          },
-        });
-      },
-    });
-  }
-
-  private _getActiveEntityId(): string | undefined {
-    const metaId = this.value?.metadata?.browse_entity_id;
-    return (
-      this.value?.entity_id ||
-      (metaId && this._contextEntities?.includes(metaId) && metaId) ||
-      this._contextEntities?.[0]
+    return this._renderPicker(
+      this.helper,
+      Array.isArray(this.value) ? this.value[0] : this.value
     );
   }
-
-  private _handleKeyDown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.preventDefault();
-      this._pickMedia();
-    }
-  }
-
-  private _pictureUploadMediaPicked(ev) {
-    const pickedMedia = ev.detail as MediaPickedEvent;
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.value,
-        media_content_id: pickedMedia.item.media_content_id,
-        media_content_type: pickedMedia.item.media_content_type,
-        metadata: {
-          title: pickedMedia.item.title,
-          thumbnail: pickedMedia.item.thumbnail,
-          media_class: pickedMedia.item.media_class,
-          children_media_class: pickedMedia.item.children_media_class,
-          navigateIds: pickedMedia.navigateIds?.map((id) => ({
-            media_content_type: id.media_content_type,
-            media_content_id: id.media_content_id,
-          })),
-        },
-      },
-    });
-  }
-
-  private _clearValue() {
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
-  static styles = css`
-    ha-entity-picker {
-      display: block;
-      margin-bottom: 16px;
-    }
-    ha-alert {
-      display: block;
-      margin-bottom: 16px;
-    }
-    ha-card {
-      position: relative;
-      width: 100%;
-      box-sizing: border-box;
-      cursor: pointer;
-      transition: background-color 180ms ease-in-out;
-      min-height: 56px;
-    }
-    ha-card:hover:not(.disabled),
-    ha-card:focus:not(.disabled) {
-      background-color: var(--state-icon-hover-color, rgba(0, 0, 0, 0.04));
-    }
-    ha-card:focus {
-      outline: none;
-    }
-    ha-card.disabled {
-      pointer-events: none;
-      color: var(--disabled-text-color);
-    }
-    .content-container {
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      gap: var(--ha-space-3);
-    }
-    ha-card .thumbnail {
-      width: 40px;
-      height: 40px;
-      flex-shrink: 0;
-      position: relative;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-md);
-      overflow: hidden;
-    }
-    ha-card .image {
-      border-radius: var(--ha-border-radius-md);
-    }
-    .folder {
-      --mdc-icon-size: 24px;
-    }
-    .title {
-      font-size: var(--ha-font-size-m);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: 1.4;
-      flex: 1;
-      min-width: 0;
-    }
-    .image {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      --ha-media-browser-thumbnail-fit: cover;
-    }
-    .centered-image {
-      margin: 4px;
-      --ha-media-browser-thumbnail-fit: contain;
-    }
-    .icon-holder {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-  `;
 }
 
 declare global {

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

@@ -67,15 +67,16 @@ export class HaNumberSelector extends LitElement {
       }
     }
 
-    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key,
-    // so negatives can only be typed with the full "text" keyboard. Other
-    // platforms include a minus on their number keypads, so restrict this
-    // workaround to Safari/WebKit and only when the selector allows negatives
-    // (e.g. numeric_state triggers/conditions).
-    const useTextInputMode =
+    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key.
+    // Leaving inputmode unset on a number input gives the "Numbers and
+    // Punctuation" keyboard there, which does include a minus. Other platforms
+    // include a minus on their number keypads, so restrict this workaround to
+    // Safari/WebKit and only when the selector allows negatives: either an
+    // explicit negative min, or no min at all (e.g. the numeric threshold
+    // selector used by the power triggers).
+    const useSafariNegativeKeyboard =
       isSafari &&
-      this.selector.number?.min !== undefined &&
-      this.selector.number.min < 0;
+      (this.selector.number?.min === undefined || this.selector.number.min < 0);
 
     const translationKey = this.selector.number?.translation_key;
     let unit = this.selector.number?.unit_of_measurement;
@@ -112,8 +113,8 @@ export class HaNumberSelector extends LitElement {
         }
         <ha-input
           .inputmode=${
-            useTextInputMode
-              ? "text"
+            useSafariNegativeKeyboard
+              ? undefined
               : this.selector.number?.step === "any" ||
                   (this.selector.number?.step ?? 1) % 1 !== 0
                 ? "decimal"

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

@@ -13,6 +13,7 @@ import type { ObjectSelector } from "../../data/selector";
 import { formatSelectorValue } from "../../data/selector/format_selector_value";
 import { showFormDialog } from "../../dialogs/form/show-form-dialog";
 import type { HomeAssistant } from "../../types";
+import { computeInitialHaFormData } from "../ha-form/compute-initial-ha-form-data";
 import type { HaFormSchema } from "../ha-form/types";
 import "../ha-input-helper-text";
 import "../ha-md-list";
@@ -237,10 +238,14 @@ export class HaObjectSelector extends LitElement {
   private async _addItem(ev) {
     ev.stopPropagation();
 
+    const schema = this._schema(this.selector);
+
     const newItem = await showFormDialog(this, {
       title: this.hass.localize("ui.common.add"),
-      schema: this._schema(this.selector),
-      data: {},
+      schema,
+      data: computeInitialHaFormData(schema, {
+        skipUnsupportedSelectors: true,
+      }),
       computeLabel: this._computeLabel,
       computeHelper: this._computeHelper,
       submitText: this.hass.localize("ui.common.add"),
@@ -293,7 +298,7 @@ export class HaObjectSelector extends LitElement {
     const index = ev.currentTarget.index;
 
     if (!this.selector.object!.multiple) {
-      fireEvent(this, "value-changed", { value: undefined });
+      fireEvent(this, "value-changed", { value: "" });
       return;
     }
 

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

@@ -99,6 +99,10 @@ const SELECTOR_SCHEMAS = {
         },
       },
     },
+    {
+      name: "multiple",
+      selector: { boolean: {} },
+    },
   ] as const,
   number: [
     {

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

@@ -3,7 +3,7 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
-import type { Selector } from "../../data/selector";
+import type { Selector, SelectorType } from "../../data/selector";
 import {
   handleLegacyDeviceSelector,
   handleLegacyEntitySelector,
@@ -70,7 +70,7 @@ const LOAD_ELEMENTS = {
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
   ui_time_format: () => import("./ha-selector-ui-time-format"),
-};
+} satisfies Record<SelectorType, () => Promise<unknown>>;
 
 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
 

src/components/ha-theme-settings.ts

@@ -9,7 +9,8 @@ import {
 } from "../resources/theme/color/color.globals";
 import type { HomeAssistant, ThemeSettings, ValueChangedEvent } from "../types";
 import "./ha-button";
-import "./ha-settings-row";
+import "./item/ha-list-item-base";
+import "./list/ha-list-base";
 import "./ha-theme-picker";
 import "./input/ha-input";
 import "./radio/ha-radio-group";
@@ -25,6 +26,7 @@ export interface ThemeSettingsLabels {
   autoMode?: string;
   lightMode?: string;
   darkMode?: string;
+  colors?: string;
   primaryColor?: string;
   accentColor?: string;
   reset?: string;
@@ -42,7 +44,7 @@ export class HaThemeSettings extends LitElement {
 
   @property() public heading?: string;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ attribute: "include-default", type: Boolean })
   public includeDefault = false;
@@ -62,98 +64,121 @@ export class HaThemeSettings extends LitElement {
         ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
         : this.hass.themes.default_theme;
 
+    const showDarkMode =
+      curTheme === HOME_ASSISTANT_THEME ||
+      (curThemeIsUseDefault &&
+        this.hass.themes.default_dark_theme &&
+        this.hass.themes.default_theme) ||
+      this._supportsModeSelection(curTheme);
+
     return html`
-      <ha-settings-row .narrow=${this.narrow} ?empty=${!this.showThemePicker}>
-        ${
-          this.heading
-            ? html`<span slot="heading">${this.heading}</span>`
-            : nothing
-        }
-        ${
-          this.description
-            ? html`<span slot="description">${this.description}</span>`
-            : nothing
-        }
+      <ha-list-base>
         ${
           this.showThemePicker
             ? html`
-                <ha-theme-picker
-                  .label=${this.labels?.theme}
-                  .noThemeLabel=${this.labels?.noTheme}
-                  .value=${themeSettings?.theme || undefined}
-                  .disabled=${this.themePickerDisabled}
-                  ?include-default=${this.includeDefault}
-                  @value-changed=${this._handleThemeSelection}
-                ></ha-theme-picker>
+                <ha-list-item-base>
+                  ${
+                    this.heading
+                      ? html`<span slot="headline">${this.heading}</span>`
+                      : nothing
+                  }
+                  ${
+                    this.description
+                      ? html`<span slot="supporting-text"
+                          >${this.description}</span
+                        >`
+                      : nothing
+                  }
+                  <ha-theme-picker
+                    slot="end"
+                    .label=${this.labels?.theme}
+                    .noThemeLabel=${this.labels?.noTheme}
+                    .value=${themeSettings?.theme || undefined}
+                    .disabled=${this.themePickerDisabled}
+                    ?include-default=${this.includeDefault}
+                    @value-changed=${this._handleThemeSelection}
+                  ></ha-theme-picker>
+                </ha-list-item-base>
               `
             : nothing
         }
-      </ha-settings-row>
-      ${
-        curTheme === HOME_ASSISTANT_THEME ||
-        (curThemeIsUseDefault &&
-          this.hass.themes.default_dark_theme &&
-          this.hass.themes.default_theme) ||
-        this._supportsModeSelection(curTheme)
-          ? html`<div class="inputs">
-              <ha-radio-group
-                @change=${this._handleDarkMode}
-                name="dark_mode"
-                .ariaLabel=${this.labels?.mode ?? "Theme mode"}
-                .value=${
-                  themeSettings?.dark === undefined
-                    ? "auto"
-                    : themeSettings.dark
-                      ? "dark"
-                      : "light"
+        ${
+          showDarkMode
+            ? html`
+                <ha-list-item-base>
+                  <span slot="headline"
+                    >${this.labels?.mode ?? "Theme mode"}</span
+                  >
+                  <ha-radio-group
+                    slot="end"
+                    @change=${this._handleDarkMode}
+                    name="dark_mode"
+                    .value=${
+                      themeSettings?.dark === undefined
+                        ? "auto"
+                        : themeSettings.dark
+                          ? "dark"
+                          : "light"
+                    }
+                    orientation="horizontal"
+                  >
+                    <ha-radio-option value="auto">
+                      ${this.labels?.autoMode ?? "Auto"}
+                    </ha-radio-option>
+                    <ha-radio-option value="light">
+                      ${this.labels?.lightMode ?? "Light"}
+                    </ha-radio-option>
+                    <ha-radio-option value="dark">
+                      ${this.labels?.darkMode ?? "Dark"}
+                    </ha-radio-option>
+                  </ha-radio-group>
+                </ha-list-item-base>
+              `
+            : nothing
+        }
+        ${
+          curTheme === HOME_ASSISTANT_THEME
+            ? html`
+                <ha-list-item-base>
+                  <span slot="headline"
+                    >${this.labels?.colors ?? "Custom colors"}</span
+                  >
+                  <div slot="end" class="color-pickers">
+                    <ha-input
+                      .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
+                      type="color"
+                      .label=${this.labels?.primaryColor ?? "Primary color"}
+                      .name=${"primaryColor"}
+                      @change=${this._handleColorChange}
+                    ></ha-input>
+                    <ha-input
+                      .value=${themeSettings?.accentColor || DefaultAccentColor}
+                      type="color"
+                      .label=${this.labels?.accentColor ?? "Accent color"}
+                      .name=${"accentColor"}
+                      @change=${this._handleColorChange}
+                    ></ha-input>
+                  </div>
+                </ha-list-item-base>
+                ${
+                  themeSettings?.primaryColor || themeSettings?.accentColor
+                    ? html`
+                        <div class="reset-row">
+                          <ha-button
+                            appearance="plain"
+                            size="s"
+                            @click=${this._resetColors}
+                          >
+                            ${this.labels?.reset ?? "Reset"}
+                          </ha-button>
+                        </div>
+                      `
+                    : nothing
                 }
-                orientation="horizontal"
-              >
-                <ha-radio-option value="auto">
-                  ${this.labels?.autoMode ?? "Auto"}
-                </ha-radio-option>
-                <ha-radio-option value="light">
-                  ${this.labels?.lightMode ?? "Light"}
-                </ha-radio-option>
-                <ha-radio-option value="dark">
-                  ${this.labels?.darkMode ?? "Dark"}
-                </ha-radio-option>
-              </ha-radio-group>
-              ${
-                curTheme === HOME_ASSISTANT_THEME
-                  ? html`<div class="color-pickers">
-                      <ha-input
-                        .value=${themeSettings?.primaryColor || DefaultPrimaryColor}
-                        type="color"
-                        .label=${this.labels?.primaryColor ?? "Primary color"}
-                        .name=${"primaryColor"}
-                        @change=${this._handleColorChange}
-                      ></ha-input>
-                      <ha-input
-                        .value=${themeSettings?.accentColor || DefaultAccentColor}
-                        type="color"
-                        .label=${this.labels?.accentColor ?? "Accent color"}
-                        .name=${"accentColor"}
-                        @change=${this._handleColorChange}
-                      ></ha-input>
-                      ${
-                        themeSettings?.primaryColor ||
-                        themeSettings?.accentColor
-                          ? html` <ha-button
-                              appearance="plain"
-                              size="s"
-                              @click=${this._resetColors}
-                            >
-                              ${this.labels?.reset ?? "Reset"}
-                            </ha-button>`
-                          : nothing
-                      }
-                    </div>`
-                  : nothing
-              }
-            </div>`
-          : nothing
-      }
+              `
+            : nothing
+        }
+      </ha-list-base>
     `;
   }
 
@@ -231,33 +256,36 @@ export class HaThemeSettings extends LitElement {
     a {
       color: var(--primary-color);
     }
-    .inputs {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin: 0 var(--ha-space-3);
+    ha-list-base {
+      --ha-row-item-padding-block: var(--ha-space-2);
     }
-    ha-radio-group {
-      display: flex;
-      justify-content: center;
-      margin-inline-end: var(--ha-space-3);
+    ha-theme-picker {
+      min-width: 150px;
     }
     .color-pickers {
       display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      flex-grow: 1;
+      gap: var(--ha-space-2);
     }
-    ha-input {
-      min-width: 75px;
-      flex-grow: 1;
-      margin: 0 var(--ha-space-1);
+    .color-pickers ha-input {
+      min-width: 150px;
+      flex: 1;
     }
-
-    ha-theme-picker {
-      display: block;
+    :host([narrow]) ha-list-item-base::part(base) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    :host([narrow]) ha-list-item-base::part(end) {
       width: 100%;
     }
+    :host([narrow]) .color-pickers {
+      width: 100%;
+    }
+    .reset-row {
+      display: flex;
+      justify-content: flex-end;
+      padding-inline-end: var(--ha-space-4);
+      padding-bottom: var(--ha-space-4);
+    }
   `;
 }
 

src/components/map/ha-map.ts

@@ -25,9 +25,11 @@ import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
+import type { MapBaseLayer } from "../../common/map/base-layer";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { getEntityLocation } from "../../common/entity/get_entity_location";
+import { ensureMapTilesToken } from "../../data/map_tiles";
 import { DecoratedMarker } from "../../common/map/decorated_marker";
 import { filterXSS } from "../../common/util/xss";
 import {
@@ -160,6 +162,8 @@ export class HaMap extends ReactiveElement {
 
   private Leaflet?: LeafletModuleType;
 
+  private _baseLayer?: MapBaseLayer;
+
   private _resizeObserver?: ResizeObserver;
 
   private _mapItems: (Marker | Circle)[] = [];
@@ -211,6 +215,7 @@ export class HaMap extends ReactiveElement {
       this.leafletMap.remove();
       this.leafletMap = undefined;
       this.Leaflet = undefined;
+      this._baseLayer = undefined;
     }
 
     // the control went away with the map, so don't hold on to it
@@ -308,6 +313,7 @@ export class HaMap extends ReactiveElement {
     map.classList.toggle("dark", this._darkMode);
     map.classList.toggle("forced-dark", this.themeMode === "dark");
     map.classList.toggle("forced-light", this.themeMode === "light");
+    this._baseLayer?.setDarkMode(this._darkMode);
   }
 
   private _loading = false;
@@ -322,11 +328,31 @@ export class HaMap extends ReactiveElement {
     }
     this._loading = true;
     try {
-      [this.leafletMap, this.Leaflet] = await setupLeafletMap(map, {
+      // The tiles are proxied by core behind a token, so nothing loads without
+      // one. A host that provides no connection, or a backend without the
+      // proxy, leaves the map without tiles rather than failing to set up.
+      const token = this._connection
+        ? await ensureMapTilesToken(this._connection.connection)
+        : undefined;
+
+      const setup = await setupLeafletMap(map, {
         latitude: this._config?.latitude ?? 52.3731339,
         longitude: this._config?.longitude ?? 4.8903147,
         zoom: this.zoom,
+        darkMode: this._darkMode,
+        token,
       });
+      // Setting up fetches a style, so the element can be gone by now.
+      // `disconnectedCallback` had no map to tear down, and keeping this one
+      // would leave a live map - and its WebGL context - on a detached host,
+      // and its container too initialized to set up again on reconnect.
+      if (!this.isConnected) {
+        setup.map.remove();
+        return;
+      }
+      this.leafletMap = setup.map;
+      this.Leaflet = setup.leaflet;
+      this._baseLayer = setup.baseLayer;
       this._updateMapStyle();
       this.leafletMap.on("click", (ev) => {
         if (this._clickCount === 0) {
@@ -891,9 +917,22 @@ export class HaMap extends ReactiveElement {
       cursor: -moz-grabbing;
       cursor: -webkit-grabbing;
     }
-    .leaflet-tile-pane {
+    /* Only the raster fallback is inverted for dark mode, the vector style
+       ships its own dark cartography. */
+    .leaflet-tile-pane .leaflet-tile {
       filter: var(--map-filter);
     }
+    /* The only two rules the MapLibre canvas needs from its stylesheet, the
+       rest of it styles controls and popups we do not render. */
+    .maplibregl-map {
+      position: relative;
+      overflow: hidden;
+    }
+    .maplibregl-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
     .dark .leaflet-bar a {
       background-color: #1c1c1c;
       color: #ffffff;

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

@@ -7,6 +7,7 @@ import {
   mdiHome,
   mdiLabel,
   mdiMinusBox,
+  mdiSwapHorizontal,
   mdiTextureBox,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
@@ -177,36 +178,51 @@ export class HaTargetPickerItemRow extends LitElement {
                   referrerpolicy="no-referrer"
                   src=${this._iconImg}
                 />`
-              : fallbackIconPath
-                ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
-                : this.type === "entity"
-                  ? html`
-                      <ha-state-icon
-                        .stateObj=${
-                          stateObject ||
-                          ({
-                            entity_id: this.itemId,
-                            attributes: {},
-                          } as HassEntity)
-                        }
-                      >
-                      </ha-state-icon>
-                    `
-                  : nothing
+              : canMigrate
+                ? html`<ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>`
+                : fallbackIconPath
+                  ? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
+                  : this.type === "entity"
+                    ? html`
+                        <ha-state-icon
+                          .stateObj=${
+                            stateObject ||
+                            ({
+                              entity_id: this.itemId,
+                              attributes: {},
+                            } as HassEntity)
+                          }
+                        >
+                        </ha-state-icon>
+                      `
+                    : nothing
         }
       </div>
 
-      <span slot="headline">${(canMigrate && replacement?.name) || name}</span>
+      <span slot="headline"
+        >${
+          canMigrate
+            ? this.hass.localize(
+                "ui.components.target-picker.device_replaced_headline"
+              )
+            : name
+        }</span
+      >
       ${
         notFound || (context && !this.hideContext)
           ? html`<span slot="supporting-text"
               >${
                 notFound
                   ? canMigrate
-                    ? this.hass.localize(
-                        "ui.components.target-picker.device_replaced",
-                        { count: replacement!.candidates.length }
-                      )
+                    ? replacement!.candidates.length === 1 && replacement!.name
+                      ? this.hass.localize(
+                          "ui.components.target-picker.device_replaced_by_one",
+                          { device: replacement!.name }
+                        )
+                      : this.hass.localize(
+                          "ui.components.target-picker.device_replaced",
+                          { count: replacement!.candidates.length }
+                        )
                     : this.hass.localize(
                         `ui.components.target-picker.${this.type}_not_found`
                       )
@@ -256,7 +272,7 @@ export class HaTargetPickerItemRow extends LitElement {
                 @click=${this._migrate}
               >
                 ${this.hass.localize(
-                  "ui.components.target-picker.replace_device"
+                  "ui.components.target-picker.replace_update"
                 )}
               </ha-button>
             `
@@ -548,75 +564,73 @@ export class HaTargetPickerItemRow extends LitElement {
         this.primaryEntitiesOnly
       );
 
+      let referencedAreas = entries.referenced_areas;
       const hiddenAreaIds: string[] = [];
       if (this.type === "floor" || this.type === "label") {
-        entries.referenced_areas = entries.referenced_areas.filter(
-          (area_id) => {
-            const area = this.hass.areas[area_id];
-            // Absent from the registry is not a filter decision: drop the id
-            // without marking it hidden, so entities targeted through their
-            // own area or label are not dropped along with it.
-            if (!area) {
-              return false;
-            }
-            if (
-              (this.type === "floor" || area.labels.includes(this.itemId)) &&
-              areaMeetsFilter(
-                area,
-                this.hass.devices,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter,
-                !this.primaryEntitiesOnly
-              )
-            ) {
-              return true;
-            }
-
-            hiddenAreaIds.push(area_id);
+        referencedAreas = referencedAreas.filter((area_id) => {
+          const area = this.hass.areas[area_id];
+          // Absent from the registry is not a filter decision: drop the id
+          // without marking it hidden, so entities targeted through their
+          // own area or label are not dropped along with it.
+          if (!area) {
             return false;
           }
-        );
+          if (
+            (this.type === "floor" || area.labels.includes(this.itemId)) &&
+            areaMeetsFilter(
+              area,
+              this.hass.devices,
+              this.hass.entities,
+              this.deviceFilter,
+              this.includeDomains,
+              this.includeDeviceClasses,
+              this.hass.states,
+              this.entityFilter,
+              !this.primaryEntitiesOnly
+            )
+          ) {
+            return true;
+          }
+
+          hiddenAreaIds.push(area_id);
+          return false;
+        });
       }
 
+      let referencedDevices = entries.referenced_devices;
       const hiddenDeviceIds: string[] = [];
       if (
         this.type === "floor" ||
         this.type === "area" ||
         this.type === "label"
       ) {
-        entries.referenced_devices = entries.referenced_devices.filter(
-          (device_id) => {
-            const device = this.hass.devices[device_id];
-            if (!device) {
-              return false;
-            }
-            if (
-              !hiddenAreaIds.includes(device.area_id || "") &&
-              deviceMeetsFilter(
-                device,
-                this.hass.entities,
-                this.deviceFilter,
-                this.includeDomains,
-                this.includeDeviceClasses,
-                this.hass.states,
-                this.entityFilter,
-                !this.primaryEntitiesOnly
-              )
-            ) {
-              return true;
-            }
-
-            hiddenDeviceIds.push(device_id);
+        referencedDevices = referencedDevices.filter((device_id) => {
+          const device = this.hass.devices[device_id];
+          if (!device) {
             return false;
           }
-        );
+          if (
+            !hiddenAreaIds.includes(device.area_id || "") &&
+            deviceMeetsFilter(
+              device,
+              this.hass.entities,
+              this.deviceFilter,
+              this.includeDomains,
+              this.includeDeviceClasses,
+              this.hass.states,
+              this.entityFilter,
+              !this.primaryEntitiesOnly
+            )
+          ) {
+            return true;
+          }
+
+          hiddenDeviceIds.push(device_id);
+          return false;
+        });
       }
 
-      entries.referenced_entities = entries.referenced_entities.filter(
+      const referencedEntities = entries.referenced_entities.filter(
         (entity_id) => {
           const entity = this.hass.entities[entity_id];
           // Core can reference entities that are absent from the display
@@ -631,9 +645,9 @@ export class HaTargetPickerItemRow extends LitElement {
             (this.type === "area" && entity.area_id === this.itemId) ||
             (this.type === "floor" &&
               entity.area_id &&
-              entries.referenced_areas.includes(entity.area_id)) ||
+              referencedAreas.includes(entity.area_id)) ||
             (this.type === "label" && entity.labels.includes(this.itemId)) ||
-            entries.referenced_devices.includes(entity.device_id || "")
+            referencedDevices.includes(entity.device_id || "")
           ) {
             return entityRegMeetsFilter(
               entity,
@@ -648,7 +662,12 @@ export class HaTargetPickerItemRow extends LitElement {
         }
       );
 
-      this._entries = entries;
+      this._entries = {
+        ...entries,
+        referenced_areas: referencedAreas,
+        referenced_devices: referencedDevices,
+        referenced_entities: referencedEntities,
+      };
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error("Failed to extract target", e);

src/data/automation.ts

@@ -480,6 +480,40 @@ export const migrateAutomationConfig = <
   return config;
 };
 
+// The fields of the row holding a trigger, condition or action, as opposed to
+// the configuration of its type. The UI editors of some types build their value
+// from scratch, so these have to be carried over explicitly.
+export const TRIGGER_ROW_CONFIG_KEYS = [
+  "alias",
+  "note",
+  "id",
+  "enabled",
+  "variables",
+] as const;
+
+export const CONDITION_ROW_CONFIG_KEYS = ["alias", "note", "enabled"] as const;
+
+export const ACTION_ROW_CONFIG_KEYS = [
+  "alias",
+  "note",
+  "enabled",
+  "continue_on_error",
+] as const;
+
+export const pickRowConfig = <T extends object>(
+  row: T,
+  keys: readonly string[]
+): Partial<T> => {
+  const source = row as Record<string, unknown>;
+  const config: Record<string, unknown> = {};
+  for (const key of keys) {
+    if (key in source) {
+      config[key] = source[key];
+    }
+  }
+  return config as Partial<T>;
+};
+
 export const migrateAutomationTrigger = (
   trigger: Trigger | Trigger[],
   report?: AutomationMigrationReport

src/data/cloud.ts

@@ -64,6 +64,11 @@ export interface CloudStatusLoggedIn {
 
 export type CloudStatus = CloudStatusNotLoggedIn | CloudStatusLoggedIn;
 
+export const cloudStatusAutoLogin = (
+  status: CloudStatus | undefined
+): CloudAutoLogin | null =>
+  !status || status.logged_in ? null : (status.auto_login ?? null);
+
 // Onboarding items the backend tracks. Mirrors ONBOARDING_ITEMS in the cloud
 // integration; onboarding is complete once every item has been onboarded.
 export const ONBOARDING_ITEMS = [
@@ -126,16 +131,6 @@ export const cloudForgotPassword = (hass: HomeAssistant, email: string) =>
     email,
   });
 
-export const cloudRegister = (
-  hass: HomeAssistant,
-  email: string,
-  password: string
-) =>
-  hass.callApi("POST", "cloud/register", {
-    email,
-    password,
-  });
-
 export const cloudRegisterAutoLogin = (
   hass: HomeAssistant,
   email: string,
@@ -163,11 +158,6 @@ export const subscribeCloudEvents = (
     type: "cloud/subscribe_events",
   });
 
-export const cloudResendVerification = (hass: HomeAssistant, email: string) =>
-  hass.callApi("POST", "cloud/resend_confirm", {
-    email,
-  });
-
 export const fetchCloudStatus = (hass: HomeAssistant) =>
   hass.callWS<CloudStatus>({ type: "cloud/status" });
 

src/data/device/device_automation.ts

@@ -182,26 +182,69 @@ export const deviceAutomationEditorMode = (
     : "unknown-device";
 };
 
-// Like deviceAutomationsEqual, but ignores device_id and entity_id so an
-// automation can be matched to the equivalent one on a different device (for
-// example when a referenced device was replaced by a split device).
-export const deviceAutomationsSimilar = (
+const deviceAutomationsSameType = (a: DeviceAutomation, b: DeviceAutomation) =>
+  deviceAutomationIdentifiers
+    .filter((property) => property !== "device_id" && property !== "entity_id")
+    .every((property) => Object.is(a[property], b[property]));
+
+// An entity can be referenced by its registry id or by its entity id, and the
+// two sides do not have to agree.
+const deviceAutomationsSameEntity = (
+  entityRegistry: EntityRegistryEntry[],
   a: DeviceAutomation,
   b: DeviceAutomation
 ) => {
-  if (typeof a !== typeof b) {
+  if (!a.entity_id && !b.entity_id) {
+    return true;
+  }
+  if (!a.entity_id || !b.entity_id) {
     return false;
   }
-  return deviceAutomationIdentifiers
-    .filter((property) => property !== "device_id" && property !== "entity_id")
-    .every((property) => {
-      const inA = property in a;
-      const inB = property in b;
-      if (!inA && !inB) {
-        return true;
-      }
-      return Object.is(a[property], b[property]);
-    });
+  return (
+    a.entity_id === b.entity_id ||
+    compareEntityIdWithEntityRegId(entityRegistry, a.entity_id, b.entity_id)
+  );
+};
+
+// A device exposes the same automation type once per entity, so the same type
+// on another entity is a different automation, not an equivalent one.
+export const findEquivalentDeviceAutomation = <T extends DeviceAutomation>(
+  entityRegistry: EntityRegistryEntry[],
+  automations: T[],
+  automation: DeviceAutomation
+): T | undefined =>
+  automations.find(
+    (candidate) =>
+      deviceAutomationsSameType(candidate, automation) &&
+      deviceAutomationsSameEntity(entityRegistry, candidate, automation)
+  );
+
+// Among the split devices that replaced a removed device, the ones that offer
+// the given automation. Nothing in the registry says which of them took it over,
+// so each candidate has to be asked.
+export const fetchReplacementDevices = async <T extends DeviceAutomation>(
+  hass: HomeAssistant,
+  entityRegistry: EntityRegistryEntry[],
+  automation: DeviceAutomation,
+  compositeSplits: DeviceCompositeSplits,
+  fetchDeviceAutomations: (callWS: CallWS, deviceId: string) => Promise<T[]>
+): Promise<string[]> => {
+  const candidates =
+    compositeSplits[automation.device_id]?.split_ids.filter(
+      (id) => id in hass.devices
+    ) ?? [];
+  const automationsPerCandidate = await Promise.all(
+    candidates.map((id) =>
+      fetchDeviceAutomations(hass.callWS, id).catch(() => [] as T[])
+    )
+  );
+  return candidates.filter((_id, index) =>
+    findEquivalentDeviceAutomation(
+      entityRegistry,
+      automationsPerCandidate[index],
+      automation
+    )
+  );
 };
 
 const compareEntityIdWithEntityRegId = (

src/data/energy.ts

@@ -1553,7 +1553,8 @@ export const formatConsumptionShort = (
   hass: HomeAssistant,
   consumption: number | null,
   unit: string,
-  targetUnit?: string
+  targetUnit?: string,
+  displayPrecision?: number
 ): string => {
   const units = ["Wh", "kWh", "MWh", "GWh", "TWh"];
   let pickedUnit = unit;
@@ -1583,10 +1584,19 @@ export const formatConsumptionShort = (
     pickedUnit = units[unitIndex];
   }
   return (
-    formatNumber(val, hass.locale, {
-      maximumFractionDigits:
-        Math.abs(val) < 10 ? 2 : Math.abs(val) < 100 ? 1 : 0,
-    }) +
+    formatNumber(
+      val,
+      hass.locale,
+      displayPrecision !== undefined && pickedUnit === unit
+        ? {
+            minimumFractionDigits: displayPrecision,
+            maximumFractionDigits: displayPrecision,
+          }
+        : {
+            maximumFractionDigits:
+              Math.abs(val) < 10 ? 2 : Math.abs(val) < 100 ? 1 : 0,
+          }
+    ) +
     " " +
     pickedUnit
   );
@@ -1909,20 +1919,13 @@ export const downloadEnergyData = (
   const device_consumption_water = energyData.prefs.device_consumption_water;
   const stats = energyData.state.stats;
 
-  const timeSet = new Set<number>();
-  Object.values(stats).forEach((stat) => {
-    stat.forEach((datapoint) => {
-      timeSet.add(datapoint.start);
-    });
-  });
-  const times = Array.from(timeSet).sort();
-
-  const headers =
-    "entity_id,type,unit," +
-    times.map((t) => new Date(t).toISOString()).join(",") +
-    "\n";
-  const csv: string[] = [];
-  csv[0] = headers;
+  interface CsvRow {
+    id: string;
+    type: string;
+    unit: string;
+    data: StatisticValue[];
+  }
+  const rows: CsvRow[] = [];
 
   const processCsvRow = function (
     id: string,
@@ -1930,20 +1933,7 @@ export const downloadEnergyData = (
     unit: string,
     data: StatisticValue[]
   ) {
-    let n = 0;
-    const row: string[] = [];
-    row.push(id);
-    row.push(type);
-    row.push(unit.normalize("NFKD"));
-    times.forEach((t) => {
-      if (n < data.length && data[n].start === t) {
-        row.push((data[n].change ?? "").toString());
-        n++;
-      } else {
-        row.push("");
-      }
-    });
-    csv.push(row.join(",") + "\n");
+    rows.push({ id, type, unit, data });
   };
 
   const processStat = function (stat: string, type: string, unit: string) {
@@ -2190,6 +2180,33 @@ export const downloadEnergyData = (
     );
   }
 
+  const timeSet = new Set<number>();
+  rows.forEach((row) => {
+    row.data.forEach((datapoint) => {
+      timeSet.add(datapoint.start);
+    });
+  });
+  const times = Array.from(timeSet).sort();
+
+  const csv: string[] = [
+    "entity_id,type,unit," +
+      times.map((t) => new Date(t).toISOString()).join(",") +
+      "\n",
+  ];
+  rows.forEach(({ id, type, unit, data }) => {
+    let n = 0;
+    const row: string[] = [id, type, unit.normalize("NFKD")];
+    times.forEach((t) => {
+      if (n < data.length && data[n].start === t) {
+        row.push((data[n].change ?? "").toString());
+        n++;
+      } else {
+        row.push("");
+      }
+    });
+    csv.push(row.join(",") + "\n");
+  });
+
   const blob = new Blob(csv, {
     type: "text/csv",
   });

src/data/entity/entity_attributes.ts

@@ -50,9 +50,6 @@ export const DOMAIN_ATTRIBUTES_UNITS = {
     azimuth: "°",
     elevation: "°",
   },
-  vacuum: {
-    battery_level: "%",
-  },
   valve: {
     current_position: "%",
   },

src/data/entity/entity_registry.ts

@@ -96,10 +96,17 @@ export interface ValveEntityOptions {
   favorite_positions?: number[];
 }
 
-export type FavoriteOption =
-  "favorite_colors" | "favorite_positions" | "favorite_tilt_positions";
+export interface TimerEntityOptions {
+  presets?: number[];
+}
 
-export type FavoritesDomain = "light" | "cover" | "valve";
+export type FavoriteOption =
+  | "favorite_colors"
+  | "favorite_positions"
+  | "favorite_tilt_positions"
+  | "presets";
+
+export type FavoritesDomain = "light" | "cover" | "valve" | "timer";
 
 export type FavoriteOptionValue = LightColor[] | number[];
 
@@ -107,6 +114,7 @@ export const DOMAINS_WITH_FAVORITES: FavoritesDomain[] = [
   "light",
   "cover",
   "valve",
+  "timer",
 ];
 
 export const isFavoritesDomain = (domain: string): domain is FavoritesDomain =>
@@ -173,6 +181,7 @@ export interface EntityRegistryOptions {
   light?: LightEntityOptions;
   cover?: CoverEntityOptions;
   valve?: ValveEntityOptions;
+  timer?: TimerEntityOptions;
   vacuum?: VacuumEntityOptions;
   device_tracker?: DeviceTrackerEntityOptions;
   switch_as_x?: SwitchAsXEntityOptions;
@@ -200,6 +209,7 @@ export interface EntityRegistryEntryUpdateParams {
     | LightEntityOptions
     | CoverEntityOptions
     | ValveEntityOptions
+    | TimerEntityOptions
     | VacuumEntityOptions
     | DeviceTrackerEntityOptions;
   aliases?: (string | null)[];

src/data/map_tiles.ts

@@ -0,0 +1,185 @@
+import type { Connection } from "home-assistant-js-websocket";
+import { waitForMs } from "../common/util/wait";
+
+export const MAP_TILES_PATH = "/api/map_tiles";
+
+// Core rotates every 30 minutes and keeps two tokens live, so one handed out
+// now is good for at least 30 more. Refreshing sooner leaves room for a slow
+// or missed round trip.
+const TOKEN_REFRESH_MS = 20 * 60 * 1000;
+
+// Nothing loads without a token, so the first attempts are awaited - briefly,
+// or a backend without the proxy would hold the map hostage. The rest retry in
+// the background, for the window after a restart where the WebSocket is up but
+// the handler is not registered yet.
+const BLOCKING_DELAYS_MS = [0, 400, 1000];
+const BACKGROUND_DELAYS_MS = [2000, 5000, 10000, 15000];
+
+let token: string | undefined;
+let instanceUrl: string | undefined;
+let acquiring: Promise<void> | undefined;
+let background: Promise<void> | undefined;
+let refreshInterval: ReturnType<typeof setInterval> | undefined;
+let watchedConnection: Connection | undefined;
+let activeConnection: Connection | undefined;
+let refreshing: Promise<void> | undefined;
+const listeners = new Set<(token: string) => void>();
+
+const fetchToken = async (connection: Connection): Promise<void> => {
+  const result = await connection.sendMessagePromise<{ token: string }>({
+    type: "map_tiles/access_token",
+  });
+  if (result.token !== token) {
+    token = result.token;
+    listeners.forEach((listener) => listener(token!));
+  }
+};
+
+const attempt = async (connection: Connection, delays: number[]) => {
+  /* eslint-disable no-await-in-loop -- retries are intentionally sequential */
+  for (const delay of delays) {
+    if (token) {
+      return;
+    }
+    if (delay) {
+      await waitForMs(delay);
+    }
+    try {
+      await fetchToken(connection);
+      return;
+    } catch {
+      // try next delay
+    }
+  }
+  /* eslint-enable no-await-in-loop */
+};
+
+export const ensureMapTilesToken = async (
+  connection: Connection
+): Promise<string | undefined> => {
+  // The demo has no proxy to ask, and its tiles come straight from upstream.
+  if (__DEMO__) {
+    return undefined;
+  }
+
+  activeConnection = connection;
+  // Cast serves this page from its own host, so the proxy is not on this origin.
+  instanceUrl = connection.options.auth?.data.hassUrl;
+
+  // Shared, or a dashboard full of maps asks once per map - and a backend
+  // without the proxy turns that into every retry, per map.
+  if (!token) {
+    acquiring ??= attempt(connection, BLOCKING_DELAYS_MS).finally(() => {
+      acquiring = undefined;
+    });
+    await acquiring;
+  }
+
+  if (!token) {
+    background ??= attempt(connection, BACKGROUND_DELAYS_MS)
+      .then(() => scheduleRefresh(connection))
+      .finally(() => {
+        background = undefined;
+      });
+    return undefined;
+  }
+
+  scheduleRefresh(connection);
+  return token;
+};
+
+// Always the current connection: Cast builds a fresh one per connect while this
+// module lives on, and refreshing over the closed one stops the rotation.
+const handleReady = () => {
+  if (!activeConnection) {
+    return;
+  }
+  const connection = activeConnection;
+  fetchToken(connection)
+    // A token first acquired here would otherwise never get an interval.
+    .then(() => scheduleRefresh(connection))
+    .catch(() => {
+      // Nothing to do; the next reconnect tries again.
+    });
+};
+
+const scheduleRefresh = (connection: Connection) => {
+  if (token && !refreshInterval) {
+    refreshInterval = setInterval(() => {
+      fetchToken(activeConnection ?? connection).catch(() => {
+        // Keep the current token; the next interval retries.
+      });
+    }, TOKEN_REFRESH_MS);
+  }
+
+  if (watchedConnection !== connection) {
+    // The interval does not fire while the process is suspended, so the token
+    // can be stale before it comes round; reconnecting is the reliable signal.
+    watchedConnection?.removeEventListener("ready", handleReady);
+    watchedConnection = connection;
+    connection.addEventListener("ready", handleReady);
+  }
+};
+
+/**
+ * Forces a new token, for when the current one is refused. Deduplicated: a
+ * refused map produces one of these per tile.
+ */
+export const refreshMapTilesToken = (): Promise<void> => {
+  if (!activeConnection) {
+    return Promise.resolve();
+  }
+  refreshing ??= fetchToken(activeConnection)
+    .catch(() => {
+      // Leave the old token in place; a reconnect or the interval retries.
+    })
+    .finally(() => {
+      refreshing = undefined;
+    });
+  return refreshing;
+};
+
+/** Leaflet bakes its URL template at layer creation, so it needs telling. */
+export const subscribeMapTilesToken = (
+  listener: (token: string) => void
+): (() => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+const instanceOrigin = () =>
+  (instanceUrl ?? location.origin).replace(/\/+$/, "");
+
+/**
+ * Prefixes a proxy path with the instance that serves it. Concatenated rather
+ * than resolved, so `{z}` and `{fontstack}` survive instead of being encoded.
+ */
+export const mapTilesUrl = (path: string): string =>
+  path.startsWith("/") ? `${instanceOrigin()}${path}` : path;
+
+/**
+ * MapLibre hands tile URLs to a worker, which has no document to resolve a
+ * relative URL against, so the result has to be absolute.
+ */
+export const withMapTilesToken = (url: string): string => {
+  let parsed: URL;
+  try {
+    parsed = new URL(url, instanceOrigin());
+  } catch {
+    return url;
+  }
+
+  if (!parsed.pathname.startsWith(`${MAP_TILES_PATH}/`)) {
+    return parsed.href;
+  }
+
+  // Rebuilt against the instance: MapLibre resolves the style's paths against
+  // this page first, and on Cast that is not the host serving the proxy.
+  const onInstance = new URL(
+    `${instanceOrigin()}${parsed.pathname}${parsed.search}`
+  );
+  if (token) {
+    onInstance.searchParams.set("token", token);
+  }
+  return onInstance.href;
+};

src/data/openstreetmap.ts

@@ -40,8 +40,7 @@ export const searchPlaces = (
       limit ? `&limit=${limit}` : ""
     }${addressdetails ? "&addressdetails=1" : ""}&accept-language=${
       hass.locale.language
-    }&email=abuse@home-assistant.io`,
-    { headers: { "User-Agent": `HomeAssistant/${hass.config.version}` } }
+    }&email=abuse@home-assistant.io`
   ).then((res) => {
     if (res.ok) {
       return res.json();
@@ -59,8 +58,7 @@ export const reverseGeocode = (
       location[1]
     }&accept-language=${hass.locale.language}&zoom=${
       zoom ?? 18
-    }&format=jsonv2&email=abuse@home-assistant.io`,
-    { headers: { "User-Agent": `HomeAssistant/${hass.config.version}` } }
+    }&format=jsonv2&email=abuse@home-assistant.io`
   ).then((res) => {
     if (res.ok) {
       return res.json();

src/data/recorder.ts

@@ -160,15 +160,6 @@ export const getRecorderEntityOptions = (
     entity_id,
   });
 
-export const getStatisticIds = (
-  hass: Pick<HomeAssistant, "callWS">,
-  statistic_type?: "mean" | "sum"
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "recorder/list_statistic_ids",
-    statistic_type,
-  });
-
 export const getStatisticMetadata = (
   hass: HomeAssistant,
   statistic_ids?: string[]

src/data/recorder_statistic_ids.ts

@@ -0,0 +1,21 @@
+import { shareInFlightRequest } from "../common/util/share-in-flight-request";
+import type { HomeAssistant } from "../types";
+import type { StatisticsMetaData } from "./recorder";
+
+type StatisticIdsType = "mean" | "sum";
+
+type StatisticIdsApi = Pick<HomeAssistant, "callWS">;
+
+export const getStatisticIds = (
+  hass: StatisticIdsApi,
+  statistic_type?: StatisticIdsType
+) =>
+  shareInFlightRequest(
+    hass.callWS,
+    `recorder/list_statistic_ids:${statistic_type ?? "all"}`,
+    () =>
+      hass.callWS<StatisticsMetaData[]>({
+        type: "recorder/list_statistic_ids",
+        statistic_type,
+      })
+  );

src/data/selector.ts

@@ -88,6 +88,20 @@ export type Selector =
   | UiTimeFormatSelector
   | BackupLocationSelector;
 
+type KeysOfUnion<T> = T extends T ? keyof T : never;
+export type SelectorType = KeysOfUnion<Selector>;
+
+type UnionMemberWithKey<U, K extends PropertyKey> = U extends unknown
+  ? K extends keyof U
+    ? U
+    : never
+  : never;
+
+export type SelectorForType<T extends SelectorType> = UnionMemberWithKey<
+  Selector,
+  T
+>;
+
 export interface ActionSelector {
   action: {
     optionsInSidebar?: boolean;
@@ -366,9 +380,9 @@ export interface MediaSelector {
   media: {
     accept?: string[];
     image_upload?: boolean;
-    clearable?: boolean;
     hide_content_type?: boolean;
     content_id_helper?: string;
+    multiple?: boolean;
   } | null;
 }
 

src/data/target.ts

@@ -14,6 +14,7 @@ import {
 import type { HaEntityPickerEntityFilterFunc } from "./entity/entity";
 import type { EntityComboBoxItem } from "./entity/entity_picker";
 import type { EntityRegistryDisplayEntry } from "./entity/entity_registry";
+import { shareInFlightRequest } from "../common/util/share-in-flight-request";
 
 export const TARGET_SEPARATOR = "________";
 
@@ -54,13 +55,18 @@ export const extractFromTarget = async (
   target: HassServiceTarget,
   expandGroup = false,
   primaryEntitiesOnly = true
-) =>
-  callWS<ExtractFromTargetResult>({
-    type: "extract_from_target",
+) => {
+  const request = {
+    type: "extract_from_target" as const,
     target,
     expand_group: expandGroup,
     primary_entities_only: primaryEntitiesOnly,
-  });
+  };
+
+  return shareInFlightRequest(callWS, JSON.stringify(request), () =>
+    callWS<ExtractFromTargetResult>(request)
+  );
+};
 
 export const getTargetEntityCount = (target?: HassServiceTarget): number => {
   const tempTarget = {

src/data/timer.ts

@@ -4,16 +4,23 @@ import type {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 import { createDurationData } from "../common/datetime/create_duration_data";
-import durationToSeconds from "../common/datetime/duration_to_seconds";
+import durationToSeconds, {
+  durationDataToSeconds,
+} from "../common/datetime/duration_to_seconds";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { formatNumericDuration } from "../common/datetime/format_duration";
+import type { FormatEntityStateFunc } from "../common/translations/entity-state";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import type { FrontendLocaleData } from "./translation";
 
 export type TimerEntity = HassEntityBase & {
   attributes: HassEntityAttributeBase & {
     duration: string;
     remaining: string;
     restore: boolean;
+    finishes_at?: string;
+    last_transition?: string;
   };
 };
 
@@ -64,6 +71,18 @@ export const deleteTimer = (hass: HomeAssistant, id: string) =>
     timer_id: id,
   });
 
+// True when this state change is the timer completing: it ran out or
+// timer.finish was called. Cancel also ends in "idle" but sets
+// last_transition to "cancelled", so it does not match.
+export const timerJustFinished = (
+  oldStateObj: HassEntity | undefined,
+  stateObj: HassEntity
+): boolean =>
+  oldStateObj !== undefined &&
+  oldStateObj.state !== "idle" &&
+  stateObj.state === "idle" &&
+  stateObj.attributes.last_transition === "finished";
+
 export const timerTimeRemaining = (
   stateObj: HassEntity
 ): undefined | number => {
@@ -82,7 +101,7 @@ export const timerTimeRemaining = (
 };
 
 export const computeDisplayTimer = (
-  hass: HomeAssistant,
+  formatEntityState: FormatEntityStateFunc,
   stateObj: HassEntity,
   timeRemaining?: number
 ): string | null => {
@@ -91,18 +110,40 @@ export const computeDisplayTimer = (
   }
 
   if (stateObj.state === "idle" || timeRemaining === 0) {
-    return hass.formatEntityState(stateObj);
+    return formatEntityState(stateObj);
   }
 
   let display = secondsToDuration(timeRemaining || 0) || "0";
 
   if (stateObj.state === "paused") {
-    display = `${display} (${hass.formatEntityState(stateObj)})`;
+    display = `${display} (${formatEntityState(stateObj)})`;
   }
 
   return display;
 };
 
+const leftPad = (num: number) => (num < 10 ? `0${num}` : `${num}`);
+
+// Normalize duration data to whole-second hours/minutes/seconds fields, so
+// out-of-range values ({seconds: 3600}) and fractional seconds cannot reach
+// duration inputs or the serialized config. Timers only support whole seconds.
+export const normalizeTimerDuration = (
+  data: HaDurationData
+): HaDurationData => {
+  const totalSeconds = Math.floor(durationDataToSeconds(data));
+  return {
+    hours: Math.floor(totalSeconds / 3600),
+    minutes: Math.floor((totalSeconds % 3600) / 60),
+    seconds: totalSeconds % 60,
+  };
+};
+
+// Serialize duration data to the "H:MM:SS" format accepted by timer.start.
+export const durationDataToTimerString = (data: HaDurationData): string => {
+  const { hours = 0, minutes = 0, seconds = 0 } = normalizeTimerDuration(data);
+  return `${hours}:${leftPad(minutes)}:${leftPad(seconds)}`;
+};
+
 // Prefill for the duration input: always the configured duration, independent
 // of the live countdown. The field is meant to be edited, not to mirror the
 // remaining time.
@@ -110,3 +151,18 @@ export const timerDurationData = (
   stateObj: HassEntity
 ): HaDurationData | undefined =>
   createDurationData(stateObj.attributes.duration);
+
+export const normalizeTimerPresets = (presets?: number[]): number[] => [
+  ...new Set(
+    (presets ?? [])
+      .map((preset) => Math.floor(Number(preset)))
+      .filter((seconds) => Number.isFinite(seconds) && seconds > 0)
+  ),
+];
+
+// Presets are at least one second, so the formatter never returns null here.
+export const timerPresetLabel = (
+  locale: FrontendLocaleData,
+  seconds: number
+): string =>
+  formatNumericDuration(locale, normalizeTimerDuration({ seconds })) ?? "";

src/data/zwave_js.ts

@@ -526,6 +526,16 @@ export const fetchZwaveNetworkStatus = (
   });
 };
 
+/** Node IDs of the nodes each node can reach directly, keyed by node ID. */
+export const fetchZwaveNetworkNeighbors = (
+  hass: HomeAssistant,
+  entry_id: string
+): Promise<Record<number, number[]>> =>
+  hass.callWS({
+    type: "zwave_js/network_neighbors",
+    entry_id,
+  });
+
 export const fetchZwaveDataCollectionStatus = (
   hass: HomeAssistant,
   entry_id: string

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

@@ -15,7 +15,7 @@ import "../../components/ha-icon";
 import "../../components/ha-svg-icon";
 import type { HaListItemButton } from "../../components/item/ha-list-item-button";
 import "../../components/item/ha-list-item-button";
-import "../../components/list/ha-list-base";
+import "../../components/list/ha-grouped-list";
 import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 
 export interface AddToActionListItem {
@@ -76,20 +76,19 @@ class HaAddToActionList extends LitElement {
     }
 
     return html`
-      <h3 class="section-header">
-        ${this._localizeValue(section.title, section.titleKey)}
-      </h3>
-      ${
-        section.actions.length
-          ? html`<ha-list-base>
-              ${section.actions.map((action, actionIndex) =>
+      <ha-grouped-list
+        .header=${this._localizeValue(section.title, section.titleKey)}
+      >
+        ${
+          section.actions.length
+            ? section.actions.map((action, actionIndex) =>
                 this._renderActionItem(action, sectionIndex, actionIndex)
-              )}
-            </ha-list-base>`
-          : html`<h4 class="empty">
-              ${this._localizeValue(section.empty, section.emptyKey)}
-            </h4>`
-      }
+              )
+            : html`<div class="empty">
+                ${this._localizeValue(section.empty, section.emptyKey)}
+              </div>`
+        }
+      </ha-grouped-list>
     `;
   }
 
@@ -161,28 +160,19 @@ class HaAddToActionList extends LitElement {
   static styles: CSSResultGroup = css`
     :host {
       display: block;
+      padding: 0 var(--ha-space-6);
     }
 
-    .section-header {
-      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
-      margin: 0;
-      font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-medium);
-      color: var(--secondary-text-color);
+    ha-grouped-list + ha-grouped-list {
+      margin-top: var(--ha-space-6);
     }
 
     .empty {
-      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
-      margin: 0;
+      padding: var(--ha-space-2) var(--ha-space-3);
       font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-normal);
       color: var(--secondary-text-color);
     }
 
-    ha-list-item-button {
-      --ha-row-item-padding-inline: var(--ha-space-5);
-    }
-
     ha-icon,
     ha-svg-icon {
       display: flex;
@@ -194,7 +184,7 @@ class HaAddToActionList extends LitElement {
     }
 
     .plus {
-      color: var(--primary-color);
+      color: var(--secondary-text-color);
     }
 
     ha-list-item-button[disabled] .start-icon,

src/dialogs/form/dialog-form.ts

@@ -230,13 +230,13 @@ export class DialogForm
   ): Promise<void> {
     await this._afterFormRender();
 
-    if (!this._open || this._params !== expectedParams) {
+    if (!this.isConnected || !this._open || this._params !== expectedParams) {
       return;
     }
 
     await this._waitForSelectorElements();
 
-    if (!this._open || this._params !== expectedParams) {
+    if (!this.isConnected || !this._open || this._params !== expectedParams) {
       return;
     }
 
@@ -250,7 +250,12 @@ export class DialogForm
   ): Promise<void> {
     await this._afterFormRender();
 
-    if (!this._open || this._params !== expectedParams || !this._dialog) {
+    if (
+      !this.isConnected ||
+      !this._open ||
+      this._params !== expectedParams ||
+      !this._dialog
+    ) {
       return;
     }
 
@@ -295,6 +300,12 @@ export class DialogForm
       return;
     }
 
+    const validationError = this._params?.validate?.(this._data);
+    if (validationError && Object.keys(validationError).length) {
+      this._error = validationError;
+      return;
+    }
+
     const submit = this._params?.submit;
     const data = this._data;
     const stackEntry = this._popStack();

src/dialogs/form/show-form-dialog.ts

@@ -7,6 +7,10 @@ export interface FormDialogParams {
   title: string;
   schema: HaFormSchema[];
   data?: FormDialogData;
+  // Extra submit-time validation beyond the schema's own checks. Returned
+  // errors are shown on the named fields ("base" for a general error) and
+  // block the submit; they clear when the user edits the form.
+  validate?: (data: FormDialogData) => Record<string, string> | undefined;
   submit?: (data?: FormDialogData) => void;
   cancel?: () => void;
   computeLabel?: (schema, data) => string | undefined;

src/dialogs/more-info/components/timers/ha-more-info-timer-presets.ts

@@ -0,0 +1,372 @@
+import { consume } from "@lit/context";
+import type { PropertyValues, TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { durationDataToSeconds } from "../../../../common/datetime/duration_to_seconds";
+import { consumeLocalize } from "../../../../common/decorators/consume-context-entry";
+import { transform } from "../../../../common/decorators/transform";
+import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-control-button";
+import type { HaDurationData } from "../../../../components/ha-duration-input";
+import {
+  apiContext,
+  configContext,
+  internationalizationContext,
+} from "../../../../data/context";
+import { UNAVAILABLE } from "../../../../data/entity/entity";
+import type {
+  ExtEntityRegistryEntry,
+  TimerEntityOptions,
+} from "../../../../data/entity/entity_registry";
+import { updateEntityRegistryEntry } from "../../../../data/entity/entity_registry";
+import type { TimerEntity } from "../../../../data/timer";
+import {
+  normalizeTimerDuration,
+  normalizeTimerPresets,
+  timerPresetLabel,
+} from "../../../../data/timer";
+import type { FrontendLocaleData } from "../../../../data/translation";
+import type {
+  HomeAssistant,
+  HomeAssistantApi,
+  HomeAssistantConfig,
+  HomeAssistantInternationalization,
+} from "../../../../types";
+import { showFormDialog } from "../../../form/show-form-dialog";
+import { showConfirmationDialog } from "../../../generic/show-dialog-box";
+import "../ha-more-info-favorites";
+import type { HaMoreInfoFavorites } from "../ha-more-info-favorites";
+
+type PresetLocalizeKey =
+  | "set"
+  | "edit"
+  | "delete"
+  | "delete_confirm_title"
+  | "delete_confirm_text"
+  | "delete_confirm_action"
+  | "add"
+  | "edit_title"
+  | "add_title"
+  | "duration"
+  | "duration_error";
+
+@customElement("ha-more-info-timer-presets")
+export class HaMoreInfoTimerPresets extends LitElement {
+  @state()
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: HomeAssistantApi;
+
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<HomeAssistantConfig, HomeAssistant["user"]>({
+    transformer: ({ user }) => user,
+  })
+  private _user!: HomeAssistant["user"];
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale?: FrontendLocaleData;
+
+  @property({ attribute: false }) public stateObj!: TimerEntity;
+
+  @property({ attribute: false }) public entry?: ExtEntityRegistryEntry | null;
+
+  @property({ attribute: false }) public editMode?: boolean;
+
+  @state() private _presets: number[] = [];
+
+  protected updated(changedProps: PropertyValues<this>): void {
+    // Sync from entry only; a stateObj tick must not clobber optimistic edits.
+    if (changedProps.has("entry") && this.entry) {
+      this._presets = normalizeTimerPresets(this.entry.options?.timer?.presets);
+    }
+  }
+
+  private _localizePreset(
+    key: PresetLocalizeKey,
+    values?: Record<string, string | number>
+  ): string {
+    return this._localize(
+      `ui.dialogs.more_info_control.timer.preset.${key}`,
+      values
+    );
+  }
+
+  private async _save(presets: number[]): Promise<void> {
+    if (!this.entry) {
+      return;
+    }
+
+    const currentOptions: TimerEntityOptions = {
+      ...(this.entry.options?.timer ?? {}),
+    };
+
+    const result = await updateEntityRegistryEntry(
+      this._api,
+      this.entry.entity_id,
+      {
+        options_domain: "timer",
+        options: {
+          ...currentOptions,
+          presets: presets.length ? presets : undefined,
+        },
+      }
+    );
+
+    fireEvent(this, "entity-entry-updated", result.entity_entry);
+  }
+
+  private async _setPresets(presets: number[]): Promise<void> {
+    const normalized = normalizeTimerPresets(presets);
+    this._presets = normalized;
+    await this._save(normalized);
+  }
+
+  private _move(index: number, newIndex: number): void {
+    const presets = this._presets.concat();
+    const moved = presets.splice(index, 1)[0];
+    presets.splice(newIndex, 0, moved);
+    this._setPresets(presets);
+  }
+
+  private _applyPreset(index: number): void {
+    const preset = this._presets[index];
+
+    if (preset === undefined) {
+      return;
+    }
+
+    this._api.callService("timer", "start", {
+      entity_id: this.stateObj.entity_id,
+      duration: preset,
+    });
+  }
+
+  private async _promptPresetValue(
+    seconds?: number
+  ): Promise<number | undefined> {
+    const response = await showFormDialog(this, {
+      title: this._localizePreset(
+        seconds === undefined ? "add_title" : "edit_title"
+      ),
+      schema: [
+        {
+          name: "duration",
+          required: true,
+          selector: {
+            duration: { enable_day: false, enable_millisecond: false },
+          },
+        },
+      ],
+      data: {
+        duration: normalizeTimerDuration({ seconds: seconds ?? 0 }),
+      },
+      computeLabel: () => this._localizePreset("duration"),
+      validate: (data) =>
+        data.duration &&
+        Math.floor(durationDataToSeconds(data.duration as HaDurationData)) > 0
+          ? undefined
+          : { duration: this._localizePreset("duration_error") },
+    });
+
+    if (!response?.duration) {
+      return undefined;
+    }
+
+    const value = Math.floor(
+      durationDataToSeconds(response.duration as HaDurationData)
+    );
+
+    return value > 0 ? value : undefined;
+  }
+
+  private async _addPreset(): Promise<void> {
+    const value = await this._promptPresetValue();
+
+    if (value === undefined) {
+      return;
+    }
+
+    await this._setPresets([...this._presets, value]);
+  }
+
+  private async _editPreset(index: number): Promise<void> {
+    const current = this._presets[index];
+
+    if (current === undefined) {
+      return;
+    }
+
+    const value = await this._promptPresetValue(current);
+
+    if (value === undefined) {
+      return;
+    }
+
+    const updated = [...this._presets];
+    updated[index] = value;
+    await this._setPresets(updated);
+  }
+
+  private async _deletePreset(index: number): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      destructive: true,
+      title: this._localizePreset("delete_confirm_title"),
+      text: this._localizePreset("delete_confirm_text"),
+      confirmText: this._localizePreset("delete_confirm_action"),
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    await this._setPresets(
+      this._presets.filter((_, itemIndex) => itemIndex !== index)
+    );
+  }
+
+  private _renderPreset: HaMoreInfoFavorites["renderItem"] = (
+    preset,
+    _index,
+    editMode
+  ) => {
+    const seconds = preset as number;
+    const value = timerPresetLabel(this._locale!, seconds);
+    const label = this._localizePreset(editMode ? "edit" : "set", { value });
+
+    return html`
+      <ha-control-button
+        style=${styleMap({
+          "--control-button-border-radius": "var(--ha-border-radius-pill)",
+          "min-width": "72px",
+          width: "auto",
+          height: "36px",
+          padding: "0 var(--ha-space-3)",
+        })}
+        .label=${label}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+      >
+        ${value}
+      </ha-control-button>
+    `;
+  };
+
+  private _deleteLabel = (index: number): string =>
+    this._localizePreset("delete", {
+      number: index + 1,
+    });
+
+  private _handlePresetAction = (
+    ev: HASSDomEvent<HASSDomEvents["favorite-item-action"]>
+  ): void => {
+    ev.stopPropagation();
+
+    const { action, index } = ev.detail;
+
+    if (action === "hold" && this._user?.is_admin) {
+      fireEvent(this, "toggle-edit-mode", true);
+      return;
+    }
+
+    if (this.editMode) {
+      this._editPreset(index);
+      return;
+    }
+
+    this._applyPreset(index);
+  };
+
+  private _handlePresetMoved = (
+    ev: HASSDomEvent<HASSDomEvents["favorite-item-moved"]>
+  ): void => {
+    ev.stopPropagation();
+    this._move(ev.detail.oldIndex, ev.detail.newIndex);
+  };
+
+  private _handlePresetDelete = (
+    ev: HASSDomEvent<HASSDomEvents["favorite-item-delete"]>
+  ): void => {
+    ev.stopPropagation();
+    this._deletePreset(ev.detail.index);
+  };
+
+  private _handlePresetAdd = (
+    ev: HASSDomEvent<HASSDomEvents["favorite-item-add"]>
+  ): void => {
+    ev.stopPropagation();
+    this._addPreset();
+  };
+
+  private _handlePresetDone = (
+    ev: HASSDomEvent<HASSDomEvents["favorite-item-done"]>
+  ): void => {
+    ev.stopPropagation();
+    fireEvent(this, "toggle-edit-mode", false);
+  };
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this.stateObj || !this.entry || !this._locale) {
+      return nothing;
+    }
+
+    if (!this.editMode && this._presets.length === 0) {
+      return nothing;
+    }
+
+    return html`
+      <section class="presets">
+        <ha-more-info-favorites
+          .items=${this._presets}
+          .renderItem=${this._renderPreset}
+          .deleteLabel=${this._deleteLabel}
+          .editMode=${this.editMode ?? false}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+          .isAdmin=${Boolean(this._user?.is_admin)}
+          .showDone=${true}
+          .addLabel=${this._localizePreset("add")}
+          .doneLabel=${this._localize(
+            "ui.dialogs.more_info_control.exit_edit_mode"
+          )}
+          @favorite-item-action=${this._handlePresetAction}
+          @favorite-item-moved=${this._handlePresetMoved}
+          @favorite-item-delete=${this._handlePresetDelete}
+          @favorite-item-add=${this._handlePresetAdd}
+          @favorite-item-done=${this._handlePresetDone}
+        ></ha-more-info-favorites>
+      </section>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .presets {
+      width: 100%;
+      max-width: 384px;
+      margin: 0 auto;
+    }
+
+    .presets ha-more-info-favorites {
+      --favorite-items-max-width: 384px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-timer-presets": HaMoreInfoTimerPresets;
+  }
+}

src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-segment-mapping.ts

@@ -116,10 +116,7 @@ export class HaMoreInfoViewVacuumSegmentMapping extends LitElement {
         ></ha-vacuum-segment-area-mapper>
 
         <div class="footer">
-          <ha-button
-            @click=${this._save}
-            .disabled=${!this._dirtyState?.isDirty || this._submitting}
-          >
+          <ha-button @click=${this._save} .disabled=${this._submitting}>
             ${this.hass.localize("ui.common.save")}
           </ha-button>
         </div>

src/dialogs/more-info/const.ts

@@ -38,6 +38,7 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "siren",
   "script",
   "switch",
+  "timer",
   "vacuum",
   "valve",
   "water_heater",

src/dialogs/more-info/context.ts

@@ -1,9 +0,0 @@
-import { createContext } from "@lit/context";
-
-export interface MoreInfoContext {
-  hash: URLSearchParams;
-  setHashParam: (key: string, value?: string) => void;
-}
-
-export const moreInfoContext =
-  createContext<MoreInfoContext>("more-info-context");

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

@@ -2,6 +2,8 @@ import { consume } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { TimerRemainingTimeController } from "../../../common/controllers/timer-remaining-time-controller";
 import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
 import type { HASSDomCurrentTargetEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
@@ -9,15 +11,32 @@ import "../../../components/ha-button";
 import type { HaButton } from "../../../components/ha-button";
 import "../../../components/ha-duration-input";
 import type { HaDurationData } from "../../../components/ha-duration-input";
-import { apiContext } from "../../../data/context";
+import { apiContext, formattersContext } from "../../../data/context";
+import type { ExtEntityRegistryEntry } from "../../../data/entity/entity_registry";
+import { shouldShowFavoriteOptions } from "../../../data/entity/entity_registry";
 import type { TimerEntity } from "../../../data/timer";
-import { timerDurationData } from "../../../data/timer";
-import type { HomeAssistantApi, ValueChangedEvent } from "../../../types";
+import {
+  computeDisplayTimer,
+  timerDurationData,
+  timerJustFinished,
+} from "../../../data/timer";
+import type {
+  HomeAssistantApi,
+  HomeAssistantFormatters,
+  ValueChangedEvent,
+} from "../../../types";
+import "../components/ha-more-info-state-header";
+import "../components/timers/ha-more-info-timer-presets";
+import { moreInfoControlStyle } from "../components/more-info-control-style";
 
 @customElement("more-info-timer")
 class MoreInfoTimer extends LitElement {
   @property({ attribute: false }) public stateObj?: TimerEntity;
 
+  @property({ attribute: false }) public entry?: ExtEntityRegistryEntry | null;
+
+  @property({ attribute: false }) public editMode?: boolean;
+
   @state()
   @consumeLocalize()
   private _localize!: LocalizeFunc;
@@ -26,8 +45,16 @@ class MoreInfoTimer extends LitElement {
   @consume({ context: apiContext, subscribe: true })
   private _api!: HomeAssistantApi;
 
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  private _formatters!: HomeAssistantFormatters;
+
   @state() private _duration?: HaDurationData;
 
+  @state() private _finished = false;
+
+  private _remainingTime = new TimerRemainingTimeController(this);
+
   protected willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
     // Seed the field once from the configured duration and keep it static,
@@ -35,87 +62,131 @@ class MoreInfoTimer extends LitElement {
     if (this._duration === undefined && this.stateObj) {
       this._duration = timerDurationData(this.stateObj);
     }
+    if (changedProps.has("stateObj")) {
+      this._remainingTime.setStateObj(this.stateObj);
+      if (
+        this.stateObj &&
+        timerJustFinished(changedProps.get("stateObj"), this.stateObj)
+      ) {
+        this._finished = true;
+      }
+    }
+  }
+
+  private _finishedAnimationEnded(): void {
+    this._finished = false;
   }
 
   protected render() {
-    if (!this._localize || !this.stateObj) {
+    if (!this._localize || !this._formatters || !this.stateObj) {
       return nothing;
     }
 
     const timerState = this.stateObj.state;
 
+    const showPresets = Boolean(
+      this.entry &&
+      (this.editMode ||
+        shouldShowFavoriteOptions(this.entry.options?.timer?.presets))
+    );
+
     return html`
-      <ha-duration-input
-        .data=${this._duration}
-        required
-        @value-changed=${this._durationChanged}
-      ></ha-duration-input>
-      <div class="actions">
-        ${
-          timerState === "idle"
-            ? html`
-                <ha-button appearance="plain" size="s" @click=${this._start}>
-                  ${this._localize("ui.card.timer.actions.start")}
-                </ha-button>
-              `
-            : nothing
+      <ha-more-info-state-header
+        class=${classMap({ finished: this._finished })}
+        .stateObj=${this.stateObj}
+        .stateOverride=${
+          computeDisplayTimer(
+            this._formatters.formatEntityState,
+            this.stateObj,
+            this._remainingTime.timeRemaining
+          ) ?? undefined
         }
+        @animationend=${this._finishedAnimationEnded}
+      ></ha-more-info-state-header>
+      <div class="controls">
+        <ha-duration-input
+          .data=${this._duration}
+          required
+          @value-changed=${this._durationChanged}
+        ></ha-duration-input>
+        <div class="actions">
+          ${
+            timerState === "idle"
+              ? html`
+                  <ha-button appearance="plain" size="s" @click=${this._start}>
+                    ${this._localize("ui.card.timer.actions.start")}
+                  </ha-button>
+                `
+              : nothing
+          }
+          ${
+            timerState === "active" || timerState === "paused"
+              ? html`
+                  <ha-button appearance="plain" size="s" @click=${this._start}>
+                    ${this._localize("ui.card.timer.actions.set")}
+                  </ha-button>
+                `
+              : nothing
+          }
+          ${
+            timerState === "active"
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    size="s"
+                    .action=${"pause"}
+                    @click=${this._handleActionClick}
+                  >
+                    ${this._localize("ui.card.timer.actions.pause")}
+                  </ha-button>
+                `
+              : nothing
+          }
+          ${
+            timerState === "paused"
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    size="s"
+                    .action=${"start"}
+                    @click=${this._handleActionClick}
+                  >
+                    ${this._localize("ui.card.timer.actions.start")}
+                  </ha-button>
+                `
+              : nothing
+          }
+          ${
+            timerState === "active" || timerState === "paused"
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    size="s"
+                    .action=${"cancel"}
+                    @click=${this._handleActionClick}
+                  >
+                    ${this._localize("ui.card.timer.actions.cancel")}
+                  </ha-button>
+                  <ha-button
+                    appearance="plain"
+                    size="s"
+                    .action=${"finish"}
+                    @click=${this._handleActionClick}
+                  >
+                    ${this._localize("ui.card.timer.actions.finish")}
+                  </ha-button>
+                `
+              : nothing
+          }
+        </div>
         ${
-          timerState === "active" || timerState === "paused"
+          showPresets
             ? html`
-                <ha-button appearance="plain" size="s" @click=${this._start}>
-                  ${this._localize("ui.card.timer.actions.set")}
-                </ha-button>
-              `
-            : nothing
-        }
-        ${
-          timerState === "active"
-            ? html`
-                <ha-button
-                  appearance="plain"
-                  size="s"
-                  .action=${"pause"}
-                  @click=${this._handleActionClick}
-                >
-                  ${this._localize("ui.card.timer.actions.pause")}
-                </ha-button>
-              `
-            : nothing
-        }
-        ${
-          timerState === "paused"
-            ? html`
-                <ha-button
-                  appearance="plain"
-                  size="s"
-                  .action=${"start"}
-                  @click=${this._handleActionClick}
-                >
-                  ${this._localize("ui.card.timer.actions.start")}
-                </ha-button>
-              `
-            : nothing
-        }
-        ${
-          timerState === "active" || timerState === "paused"
-            ? html`
-                <ha-button
-                  appearance="plain"
-                  size="s"
-                  .action=${"cancel"}
-                  @click=${this._handleActionClick}
-                >
-                  ${this._localize("ui.card.timer.actions.cancel")}
-                </ha-button>
-                <ha-button
-                  appearance="plain"
-                  size="s"
-                  .action=${"finish"}
-                  @click=${this._handleActionClick}
-                >
-                  ${this._localize("ui.card.timer.actions.finish")}
-                </ha-button>
+                <ha-more-info-timer-presets
+                  .stateObj=${this.stateObj}
+                  .entry=${this.entry}
+                  .editMode=${this.editMode}
+                ></ha-more-info-timer-presets>
               `
             : nothing
         }
@@ -148,20 +219,34 @@ class MoreInfoTimer extends LitElement {
     });
   }
 
-  static styles = css`
-    ha-duration-input {
-      display: flex;
-      justify-content: center;
-      margin: var(--ha-space-4) 0 var(--ha-space-2);
-    }
-    .actions {
-      margin: var(--ha-space-2) 0;
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--ha-space-2);
-      justify-content: center;
-    }
-  `;
+  static styles = [
+    moreInfoControlStyle,
+    css`
+      ha-duration-input {
+        display: flex;
+        justify-content: center;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ha-space-2);
+        justify-content: center;
+      }
+      ha-more-info-state-header.finished {
+        animation: timer-finished-pulse 0.5s ease-in-out 2;
+      }
+      @keyframes timer-finished-pulse {
+        50% {
+          color: var(--error-color);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ha-more-info-state-header.finished {
+          animation-duration: var(--ha-animation-duration-none);
+        }
+      }
+    `,
+  ];
 }
 
 declare global {

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

@@ -33,7 +33,6 @@ import type {
   WeatherEntity,
 } from "../../../data/weather";
 import {
-  getDefaultForecastType,
   getForecast,
   getSecondaryWeatherAttribute,
   getSupportedForecastTypes,
@@ -49,16 +48,11 @@ import type {
   HomeAssistantFormatters,
   HomeAssistantInternationalization,
 } from "../../../types";
-import { moreInfoContext, type MoreInfoContext } from "../context";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
   @property({ attribute: false }) public stateObj?: WeatherEntity;
 
-  @state()
-  @consume({ context: moreInfoContext, subscribe: true })
-  private _moreInfoContext?: MoreInfoContext;
-
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n!: HomeAssistantInternationalization;
@@ -82,7 +76,9 @@ class MoreInfoWeather extends LitElement {
 
   @state() private _forecastType?: ModernForecastType;
 
-  @state() private _subscribed?: Promise<() => void>;
+  private _subscribed?: Promise<() => void>;
+
+  private _subscribedTo?: string;
 
   private _dragScrollController = new DragScrollController(this, {
     selector: ".forecast",
@@ -94,24 +90,30 @@ class MoreInfoWeather extends LitElement {
       this._subscribed.then((unsub) => unsub());
       this._subscribed = undefined;
     }
+    this._subscribedTo = undefined;
     this._forecastEvent = undefined;
   }
 
-  private async _subscribeForecastEvents() {
-    this._unsubscribeForecastEvents();
-    if (
-      !this.isConnected ||
-      !this._connection ||
-      !this.stateObj ||
-      !this._forecastType
-    ) {
+  private _updateForecastSubscription() {
+    const stateObj = this.stateObj;
+    const forecastType = this._forecastType;
+
+    if (!this.isConnected || !this._connection || !stateObj || !forecastType) {
+      this._unsubscribeForecastEvents();
       return;
     }
 
+    const target = `${stateObj.entity_id}-${forecastType}`;
+    if (target === this._subscribedTo) {
+      return;
+    }
+
+    this._unsubscribeForecastEvents();
+    this._subscribedTo = target;
     this._subscribed = subscribeForecast(
       this._connection.connection,
-      this.stateObj.entity_id,
-      this._forecastType,
+      stateObj.entity_id,
+      forecastType,
       (event) => {
         this._forecastEvent = event;
       }
@@ -121,7 +123,7 @@ class MoreInfoWeather extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
     if (this.hasUpdated) {
-      this._subscribeForecastEvents();
+      this._updateForecastSubscription();
     }
   }
 
@@ -133,37 +135,9 @@ class MoreInfoWeather extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
 
-    if (
-      (changedProps.has("stateObj") ||
-        changedProps.has("_moreInfoContext") ||
-        !this._subscribed) &&
-      this.stateObj
-    ) {
-      const oldState = changedProps.get("stateObj") as
-        WeatherEntity | undefined;
-      if (
-        oldState?.entity_id !== this.stateObj?.entity_id ||
-        changedProps.has("_moreInfoContext") ||
-        !this._subscribed
-      ) {
-        const supportedForecastTypes = getSupportedForecastTypes(this.stateObj);
-        const requestedForecastType =
-          this._moreInfoContext?.hash.get("forecast");
-        const selectedForecastType =
-          supportedForecastTypes.find(
-            (forecastType) => forecastType === requestedForecastType
-          ) ?? getDefaultForecastType(this.stateObj);
-        if (selectedForecastType !== requestedForecastType) {
-          this._moreInfoContext?.setHashParam("forecast", selectedForecastType);
-        }
-        if (this._forecastType !== selectedForecastType || !this._subscribed) {
-          this._forecastType = selectedForecastType;
-          this._subscribeForecastEvents();
-        }
-      }
-    } else if (changedProps.has("_forecastType")) {
-      this._subscribeForecastEvents();
-    }
+    this._forecastType = this._selectedForecastType();
+
+    this._updateForecastSubscription();
   }
 
   protected updated(_changedProps: PropertyValues<this>): void {
@@ -184,6 +158,16 @@ class MoreInfoWeather extends LitElement {
     getSupportedForecastTypes(stateObj)
   );
 
+  private _selectedForecastType(): ModernForecastType | undefined {
+    if (!this.stateObj) {
+      return undefined;
+    }
+    const supported = this._supportedForecasts(this.stateObj);
+    return (
+      supported.find((type) => type === this._forecastType) ?? supported[0]
+    );
+  }
+
   private _groupForecastByDay = memoizeOne((forecast: ForecastAttribute[]) => {
     if (!forecast) return [];
 
@@ -536,14 +520,7 @@ class MoreInfoWeather extends LitElement {
   private _handleForecastTypeChanged(
     ev: HASSDomEvent<{ name: ModernForecastType }>
   ): void {
-    if (
-      !this.stateObj ||
-      !getSupportedForecastTypes(this.stateObj).includes(ev.detail.name)
-    ) {
-      return;
-    }
     this._forecastType = ev.detail.name;
-    this._moreInfoContext?.setHashParam("forecast", this._forecastType);
   }
 
   static get styles(): CSSResultGroup {

src/dialogs/more-info/favorites.ts

@@ -30,6 +30,8 @@ import {
   lightSupportsColorMode,
   lightSupportsFavoriteColors,
 } from "../../data/light";
+import type { TimerEntity } from "../../data/timer";
+import { normalizeTimerPresets } from "../../data/timer";
 import type { ValveEntity } from "../../data/valve";
 import {
   DEFAULT_VALVE_FAVORITE_POSITIONS,
@@ -58,6 +60,8 @@ export interface FavoritesDialogHandler {
   domain: FavoritesDomain;
   supports: (stateObj: HassEntity) => boolean;
   hasCustomFavorites: (entry: ExtEntityRegistryEntry) => boolean;
+  // Omitted means there is always something to copy (domains with defaults).
+  canCopy?: (entry: ExtEntityRegistryEntry) => boolean;
   getResetOptions: (
     stateObj: HassEntity
   ) => Partial<Record<FavoriteOption, undefined>>;
@@ -315,6 +319,25 @@ const valveFavoritesHandler = createNumericFavoritesDialogHandler<ValveEntity>({
   ],
 });
 
+const timerFavoritesHandler: FavoritesDialogHandler = {
+  ...createNumericFavoritesDialogHandler<TimerEntity>({
+    domain: "timer",
+    supports: () => true,
+    specs: [
+      {
+        option: "presets",
+        supports: () => true,
+        getStoredFavorites: (entry) => entry.options?.timer?.presets,
+        getFavorites: (entry) =>
+          normalizeTimerPresets(entry.options?.timer?.presets),
+      },
+    ],
+  }),
+  // No default presets, so an empty timer has nothing to copy.
+  canCopy: (entry) =>
+    normalizeTimerPresets(entry.options?.timer?.presets).length > 0,
+};
+
 const FAVORITES_DIALOG_HANDLERS: Record<
   FavoritesDomain,
   FavoritesDialogHandler
@@ -322,6 +345,7 @@ const FAVORITES_DIALOG_HANDLERS: Record<
   cover: coverFavoritesHandler,
   light: lightFavoritesHandler,
   valve: valveFavoritesHandler,
+  timer: timerFavoritesHandler,
 };
 
 export const getFavoritesDialogHandler = (

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

@@ -1,22 +1,21 @@
-import { consume } from "@lit/context";
+import { mdiCheck, mdiContentCopy } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
-import { computeFloorName } from "../../common/entity/compute_floor_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import type { HASSDomCurrentTargetEvent } from "../../common/dom/fire_event";
 import checkValidDate from "../../common/datetime/check_valid_date";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import "../../components/ha-attribute-value";
+import "../../components/ha-svg-icon";
+import "../../components/item/ha-list-item-button";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
 import "../../components/item/ha-list-item-value";
 import "../../components/list/ha-grouped-list";
+import { copyToClipboard } from "../../common/util/copy-clipboard";
 import type { LocalizeKeys } from "../../common/translations/localize";
-import { labelsContext } from "../../data/context";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { HomeAssistant } from "../../types";
 import "../../components/ha-yaml-editor";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -25,6 +24,7 @@ import { getFeatures } from "../../common/entity/get_domain_features";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { titleCase } from "../../common/string/title-case";
 import { stringCompare } from "../../common/string/compare";
+import { showToast } from "../../util/toast";
 
 interface DetailsViewParams {
   entityId: string;
@@ -33,7 +33,7 @@ interface DetailsViewParams {
 interface DetailEntry {
   translationKey: LocalizeKeys;
   value: string;
-  href?: string;
+  copyable?: boolean;
 }
 
 @customElement("ha-more-info-details")
@@ -48,15 +48,19 @@ class HaMoreInfoDetails extends LitElement {
 
   @state() private _stateObj?: HassEntity;
 
-  @consume({ context: labelsContext, subscribe: true })
-  @state()
-  private _labels?: LabelRegistryEntry[];
+  @state() private _copiedValue?: string;
+
+  private _copyFeedbackTimeout?: number;
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.clearTimeout(this._copyFeedbackTimeout);
+    this._copyFeedbackTimeout = undefined;
+    this._copiedValue = undefined;
+  }
 
   protected willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
-    if (changedProps.has("entry") && this.entry) {
-      this.hass.loadBackendTranslation("title", [this.entry.platform]);
-    }
     if (changedProps.has("params") || changedProps.has("hass")) {
       if (this.params?.entityId && this.hass) {
         this._stateObj = this.hass.states[this.params.entityId];
@@ -77,86 +81,17 @@ class HaMoreInfoDetails extends LitElement {
       this._stateObj,
       this.hass.formatEntityAttributeName
     );
-    const { floor, area, device } = getEntityContext(
-      this._stateObj,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      this.hass.floors
-    );
-    const floorName = floor ? computeFloorName(floor) : undefined;
-    const areaName = area ? (computeAreaName(area) ?? area.area_id) : undefined;
-    const deviceName = device
-      ? computeDeviceNameDisplay(device, this.hass.localize, this.hass.states)
-      : undefined;
-    const integrationName = this.entry?.platform
-      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
-        this.entry.platform
-      : undefined;
-    const labelNames =
-      this.entry?.labels.map(
-        (labelId) =>
-          this._labels?.find((label) => label.label_id === labelId)?.name ??
-          labelId
-      ) ?? [];
-    const contextEntries: DetailEntry[] = [];
-
-    if (floor && floorName) {
-      contextEntries.push({
-        translationKey: "ui.dialogs.more_info_control.floor",
-        value: floorName,
-        href: "/config/areas/dashboard",
-      });
-    }
-    if (area && areaName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.area",
-        value: areaName,
-        href: `/config/areas/area/${area.area_id}`,
-      });
-    }
-    if (device && deviceName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.device",
-        value: deviceName,
-        href: `/config/devices/device/${device.id}`,
-      });
-    }
-    if (this.entry?.platform && integrationName) {
-      contextEntries.push({
-        translationKey: "ui.components.related-items.integration",
-        value: integrationName,
-        href: this.entry.config_entry_id
-          ? `/config/integrations/integration/${this.entry.platform}#config_entry=${this.entry.config_entry_id}`
-          : undefined,
-      });
-    }
 
     const entityEntries: DetailEntry[] = [
       {
         translationKey: "ui.dialogs.more_info_control.entity_id",
         value: this.params.entityId,
-      },
-      {
-        translationKey: "ui.dialogs.more_info_control.labels",
-        value: labelNames.join(", ") || this.hass.localize("ui.common.none"),
+        copyable: true,
       },
     ];
+
     const yamlData = {
-      ...(contextEntries.length
-        ? {
-            context: {
-              ...(floorName ? { floor: floorName } : {}),
-              ...(areaName ? { area: areaName } : {}),
-              ...(deviceName ? { device: deviceName } : {}),
-              ...(integrationName ? { integration: integrationName } : {}),
-            },
-          }
-        : {}),
-      entity: {
-        entity_id: this.params.entityId,
-        labels: labelNames,
-      },
+      entity_id: this.params.entityId,
       ...stateYamlData,
     };
 
@@ -171,32 +106,13 @@ class HaMoreInfoDetails extends LitElement {
                 in-dialog
               ></ha-yaml-editor>`
             : html`
-                ${
-                  contextEntries.length
-                    ? html`<ha-grouped-list
-                        .header=${this.hass.localize(
-                          "ui.dialogs.more_info_control.context"
-                        )}
-                      >
-                        ${this._renderEntries(contextEntries)}
-                      </ha-grouped-list>`
-                    : nothing
-                }
-
-                <ha-grouped-list
-                  .header=${this.hass.localize(
-                    "ui.components.entity.entity-state-picker.state"
-                  )}
-                >
-                  ${this._renderEntries(stateEntries)}
-                </ha-grouped-list>
-
                 <ha-grouped-list
                   .header=${this.hass.localize(
                     "ui.dialogs.more_info_control.entity"
                   )}
                 >
                   ${this._renderEntries(entityEntries)}
+                  ${this._renderEntries(stateEntries)}
                 </ha-grouped-list>
 
                 <ha-grouped-list
@@ -222,17 +138,12 @@ class HaMoreInfoDetails extends LitElement {
       stateEntries: DetailEntry[];
       attributes: { name: string; label: string }[];
       yamlData: {
-        state: {
-          translated: string;
-          raw: string;
-          last_changed: string;
-          last_updated: string;
-        };
+        state: string;
+        last_changed: string;
+        last_updated: string;
         attributes: Record<string, string>;
       };
     } => {
-      const translatedState = this.hass.formatEntityState(stateObj);
-
       const attributes = Object.keys(stateObj.attributes)
         .map((a) => ({
           name: a,
@@ -245,12 +156,8 @@ class HaMoreInfoDetails extends LitElement {
       return {
         stateEntries: [
           {
-            translationKey: "ui.dialogs.more_info_control.translated",
-            value: translatedState,
-          },
-          {
-            translationKey: "ui.dialogs.more_info_control.raw",
-            value: stateObj.state,
+            translationKey: "ui.dialogs.more_info_control.state",
+            value: this.hass.formatEntityState(stateObj),
           },
           {
             translationKey: "ui.dialogs.more_info_control.last_changed",
@@ -263,12 +170,9 @@ class HaMoreInfoDetails extends LitElement {
         ],
         attributes,
         yamlData: {
-          state: {
-            translated: translatedState,
-            raw: stateObj.state,
-            last_changed: stateObj.last_changed,
-            last_updated: stateObj.last_updated,
-          },
+          state: stateObj.state,
+          last_changed: stateObj.last_changed,
+          last_updated: stateObj.last_updated,
           attributes: stateObj.attributes,
         },
       };
@@ -284,17 +188,59 @@ class HaMoreInfoDetails extends LitElement {
   }
 
   private _renderEntries(entries: DetailEntry[]) {
-    return entries.map(
-      (entry) => html`
-        <ha-list-item-value .label=${this.hass.localize(entry.translationKey)}>
-          ${
-            entry.href
-              ? html`<a href=${entry.href}>${entry.value}</a>`
-              : entry.value
-          }
-        </ha-list-item-value>
-      `
-    );
+    return entries.map((entry) => {
+      const label = this.hass.localize(entry.translationKey);
+
+      if (!entry.copyable) {
+        return html`
+          <ha-list-item-value .label=${label}
+            >${entry.value}</ha-list-item-value
+          >
+        `;
+      }
+
+      return html`
+        <ha-list-item-button
+          aria-label=${this.hass.localize(
+            "ui.dialogs.more_info_control.copy_value",
+            { label, value: entry.value }
+          )}
+          data-value=${entry.value}
+          @click=${this._copyValue}
+        >
+          <div class="link-row" slot="content">
+            <div class="label">${label}</div>
+            <div class="value">${entry.value}</div>
+          </div>
+          <ha-svg-icon
+            class=${this._copiedValue === entry.value ? "copy-success" : ""}
+            slot="end"
+            .path=${
+              this._copiedValue === entry.value ? mdiCheck : mdiContentCopy
+            }
+          ></ha-svg-icon>
+        </ha-list-item-button>
+      `;
+    });
+  }
+
+  private async _copyValue(ev: HASSDomCurrentTargetEvent<HaListItemButton>) {
+    const value = ev.currentTarget.dataset.value;
+    if (value === undefined) {
+      return;
+    }
+    await copyToClipboard(value);
+    const duration = 4000;
+    this._copiedValue = value;
+    window.clearTimeout(this._copyFeedbackTimeout);
+    this._copyFeedbackTimeout = window.setTimeout(() => {
+      this._copiedValue = undefined;
+      this._copyFeedbackTimeout = undefined;
+    }, duration);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+      duration,
+    });
   }
 
   private _renderAttributes(attributes: { name: string; label: string }[]) {
@@ -337,7 +283,7 @@ class HaMoreInfoDetails extends LitElement {
         .filter(([_key, value]) => typeof value === "number")
         .map(([key, value]) =>
           supportsFeature(stateObj, value as number)
-            ? titleCase(key.replaceAll("_", "\u00A0").toLowerCase())
+            ? titleCase(key.replaceAll("_", " ").toLowerCase())
             : undefined
         )
         .filter(Boolean)
@@ -358,11 +304,37 @@ class HaMoreInfoDetails extends LitElement {
     }
 
     ha-grouped-list + ha-grouped-list {
-      margin-top: var(--ha-space-4);
+      margin-top: var(--ha-space-6);
     }
 
-    a {
-      color: var(--primary-color);
+    ha-list-item-button {
+      --ha-row-item-padding-block: var(--ha-space-2);
+      --ha-row-item-min-height: 40px;
+      --ha-row-item-gap: var(--ha-space-3);
+      --mdc-icon-size: 20px;
+    }
+
+    .link-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--ha-space-3);
+    }
+
+    .link-row .label {
+      flex: 1;
+      color: var(--secondary-text-color);
+    }
+
+    .link-row .value {
+      max-width: 60%;
+      min-width: 0;
+      text-align: end;
+      overflow-wrap: anywhere;
+    }
+
+    ha-svg-icon.copy-success {
+      color: var(--success-color);
     }
 
     .empty {

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

@@ -8,8 +8,8 @@ import {
   mdiContentDuplicate,
   mdiDevices,
   mdiDotsVertical,
-  mdiFormatListBulletedSquare,
   mdiInformationOutline,
+  mdiLinkVariant,
   mdiPencil,
   mdiPencilOff,
   mdiPencilOutline,
@@ -17,7 +17,6 @@ import {
   mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { provide } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -28,6 +27,7 @@ import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
+import { mainWindow } from "../../common/dom/get_main_window";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
@@ -47,7 +47,10 @@ import {
   replaceCurrentUrl,
   updateHistoryState,
 } from "../../common/navigate";
-import { createMoreInfoUrl } from "../../common/url/more-info-query-params";
+import {
+  createMoreInfoUrl,
+  decodeMoreInfoUrl,
+} from "../../common/url/more-info-query-params";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { withViewTransition } from "../../common/util/view-transition";
@@ -57,7 +60,7 @@ import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
-import "../../components/ha-related-items";
+import "./ha-more-info-related";
 import type {
   EntityRegistryEntry,
   ExtEntityRegistryEntry,
@@ -66,8 +69,6 @@ import {
   getExtendedEntityRegistryEntry,
   updateEntityRegistryEntry,
 } from "../../data/entity/entity_registry";
-import type { ItemType } from "../../data/search";
-import { SearchableDomains } from "../../data/search";
 import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import type { EntitySettingsState } from "../../panels/config/entities/entity-registry-settings-editor";
 import type { Helper } from "../../panels/config/helpers/const";
@@ -88,7 +89,6 @@ import {
   EDITABLE_DOMAINS_WITH_UNIQUE_ID,
   type MoreInfoView,
 } from "./const";
-import { moreInfoContext, type MoreInfoContext } from "./context";
 import "./controls/more-info-default";
 import type { FavoritesDialogContext } from "./favorites";
 import { getFavoritesDialogHandler } from "./favorites";
@@ -106,7 +106,6 @@ export interface MoreInfoDialogParams {
   tab?: MoreInfoView;
   large?: boolean;
   data?: Record<string, any>;
-  hash?: URLSearchParams;
   fromUrl?: boolean;
   returnUrl?: string;
   parentElement?: LitElement;
@@ -154,10 +153,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
 
   @state() private _data?: Record<string, any>;
 
-  @provide({ context: moreInfoContext })
-  @state()
-  private _moreInfoContext: MoreInfoContext = this._createMoreInfoContext();
-
   private _returnUrl?: string;
 
   @state() private _currView: MoreInfoView = DEFAULT_VIEW;
@@ -194,7 +189,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     const view = params.view || params.tab || DEFAULT_VIEW;
 
     this._data = params.data;
-    this._moreInfoContext = this._createMoreInfoContext(params.hash);
     this._returnUrl = params.returnUrl;
     this._currView = view;
     this._initialView = view;
@@ -231,7 +225,13 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
   }
 
   private _dialogClosed() {
-    if (this._returnUrl) {
+    // Restore the pre-dialog URL only while the URL still carries this
+    // dialog's deep-link params: navigate() waits for the close only up to
+    // DIALOG_WAIT_TIMEOUT and may have committed a new URL already.
+    if (
+      this._returnUrl &&
+      decodeMoreInfoUrl(mainWindow.location.search).entityId === this._entityId
+    ) {
       replaceCurrentUrl(this._returnUrl);
     }
     this._entityId = undefined;
@@ -242,7 +242,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     this._initialView = DEFAULT_VIEW;
     this._currView = DEFAULT_VIEW;
     this._childViewStack = [];
-    this._moreInfoContext = this._createMoreInfoContext();
     this._returnUrl = undefined;
     this._isEscapeEnabled = true;
     window.removeEventListener("dialog-closed", this._enableEscapeKeyClose);
@@ -291,10 +290,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     return entity?.device_id ?? null;
   }
 
-  private _setView(view: MoreInfoView, preserveHash = false) {
-    if (view !== this._currView && !preserveHash) {
-      this._moreInfoContext = this._createMoreInfoContext();
-    }
+  private _setView(view: MoreInfoView) {
     updateHistoryState({
       dialogParams: {
         ...getHistoryState()?.dialogParams,
@@ -313,29 +309,10 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
       createMoreInfoUrl(this._returnUrl, {
         entityId: this._entityId,
         view: this._currView,
-        hash: this._moreInfoContext.hash,
       })
     );
   }
 
-  private _createMoreInfoContext(hash?: URLSearchParams): MoreInfoContext {
-    return {
-      hash: new URLSearchParams(hash),
-      setHashParam: (key, value) => this._setHashParam(key, value),
-    };
-  }
-
-  private _setHashParam(key: string, value?: string) {
-    const hash = new URLSearchParams(this._moreInfoContext.hash);
-    if (value) {
-      hash.set(key, value);
-    } else {
-      hash.delete(key);
-    }
-    this._moreInfoContext = this._createMoreInfoContext(hash);
-    this._syncUrl();
-  }
-
   private _goBack() {
     if (this._childView) {
       const dialog =
@@ -361,7 +338,6 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     if (this._parentEntityIds.length > 0) {
       this._entityId = this._parentEntityIds.pop();
       this._currView = DEFAULT_VIEW;
-      this._moreInfoContext = this._createMoreInfoContext();
       this._loadEntityRegistryEntry();
       this._syncUrl();
     }
@@ -620,20 +596,22 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     const breadcrumb = [areaName, deviceName, entityName].filter(
       (v): v is string => Boolean(v)
     );
-    const defaultTitle = breadcrumb.pop() || entityId;
-    const addToTitle = this.hass.localize(
-      "ui.dialogs.more_info_control.add_to.title",
-      { target: defaultTitle }
-    );
     const addToMenuItem = this.hass.localize(
       "ui.dialogs.more_info_control.add_to.item"
     );
-    const title =
+    const viewTitle =
       this._currView === "details"
         ? this.hass.localize("ui.dialogs.more_info_control.details")
-        : this._currView === "add_to"
-          ? addToTitle
-          : this._childView?.viewTitle || defaultTitle;
+        : this._currView === "related"
+          ? this.hass.localize("ui.dialogs.more_info_control.related")
+          : this._currView === "add_to"
+            ? addToMenuItem
+            : this._childView?.viewTitle;
+    const defaultTitle = breadcrumb[breadcrumb.length - 1] || entityId;
+    if (!viewTitle) {
+      breadcrumb.pop();
+    }
+    const title = viewTitle || defaultTitle;
 
     const favoritesContext =
       this._entry && stateObj
@@ -658,6 +636,11 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
         ? !favoritesHandler.hasCustomFavorites(favoritesContext.entry)
         : false;
 
+    const copyFavoritesDisabled =
+      favoritesContext && favoritesHandler?.canCopy
+        ? !favoritesHandler.canCopy(favoritesContext.entry)
+        : false;
+
     const isRTL = computeRTL(
       this.hass.language,
       this.hass.translationMetadata.translations
@@ -812,7 +795,10 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
                                     ></ha-svg-icon>
                                     ${favoritesLabels?.reset}
                                   </ha-dropdown-item>
-                                  <ha-dropdown-item value="copy_favorites">
+                                  <ha-dropdown-item
+                                    value="copy_favorites"
+                                    .disabled=${copyFavoritesDisabled}
+                                  >
                                     <ha-svg-icon
                                       slot="icon"
                                       .path=${mdiContentDuplicate}
@@ -870,7 +856,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
                           <ha-dropdown-item value="related">
                             <ha-svg-icon
                               slot="icon"
-                              .path=${mdiInformationOutline}
+                              .path=${mdiLinkVariant}
                             ></ha-svg-icon>
                             ${this.hass.localize(
                               "ui.dialogs.more_info_control.related"
@@ -879,7 +865,7 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
                           <ha-dropdown-item value="details">
                             <ha-svg-icon
                               slot="icon"
-                              .path=${mdiFormatListBulletedSquare}
+                              .path=${mdiInformationOutline}
                             ></ha-svg-icon>
                             ${this.hass.localize(
                               "ui.dialogs.more_info_control.details"
@@ -968,15 +954,11 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
                                 `
                               : this._currView === "related"
                                 ? html`
-                                    <ha-related-items
+                                    <ha-more-info-related
                                       .hass=${this.hass}
-                                      .itemId=${entityId}
-                                      .itemType=${
-                                        SearchableDomains.has(domain)
-                                          ? (domain as ItemType)
-                                          : "entity"
-                                      }
-                                    ></ha-related-items>
+                                      .entry=${this._entry}
+                                      .params=${{ entityId }}
+                                    ></ha-more-info-related>
                                   `
                                 : this._currView === "add_to"
                                   ? html`
@@ -1068,15 +1050,13 @@ export class MoreInfoDialog extends DirtyStateProviderMixin<
     }
     const view = ev.detail.view || ev.detail.tab || DEFAULT_VIEW;
     if (entityId === this._entityId) {
-      this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
       this._infoEditMode = false;
       this._detailsYamlMode = false;
-      this._setView(view, true);
+      this._setView(view);
       return;
     }
     this._parentEntityIds = [...this._parentEntityIds, this._entityId!];
     this._entityId = entityId;
-    this._moreInfoContext = this._createMoreInfoContext(ev.detail.hash);
     this._currView = view === "details" ? view : DEFAULT_VIEW;
     this._initialView = view;
     this._infoEditMode = false;

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

@@ -0,0 +1,304 @@
+import { mdiDevices, mdiTextureBox } from "@mdi/js";
+import { consume } from "@lit/context";
+import type { HassEntity } from "home-assistant-js-websocket";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeFloorName } from "../../common/entity/compute_floor_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import type { LocalizeKeys } from "../../common/translations/localize";
+import "../../components/ha-floor-icon";
+import "../../components/ha-icon";
+import "../../components/ha-icon-next";
+import "../../components/ha-label";
+import "../../components/ha-related-items";
+import "../../components/ha-svg-icon";
+import "../../components/item/ha-list-item-button";
+import "../../components/item/ha-list-item-value";
+import "../../components/list/ha-grouped-list";
+import { labelsContext } from "../../data/context";
+import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
+import type { ItemType, RelatedResult } from "../../data/search";
+import { SearchableDomains } from "../../data/search";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+
+interface RelatedViewParams {
+  entityId: string;
+}
+
+interface ContextEntry {
+  translationKey: LocalizeKeys;
+  value: string;
+  displayValue?: TemplateResult;
+  href?: string;
+  icon?: TemplateResult;
+}
+
+const CONTEXT_SECTIONS: (keyof RelatedResult)[] = [
+  "device",
+  "area",
+  "integration",
+  "config_entry",
+];
+
+@customElement("ha-more-info-related")
+class HaMoreInfoRelated extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entry?: ExtEntityRegistryEntry | null;
+
+  @property({ attribute: false }) public params?: RelatedViewParams;
+
+  @state() private _stateObj?: HassEntity;
+
+  @consume({ context: labelsContext, subscribe: true })
+  @state()
+  private _labels?: LabelRegistryEntry[];
+
+  protected willUpdate(changedProps: PropertyValues<this>): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("entry") && this.entry) {
+      this.hass.loadBackendTranslation("title", [this.entry.platform]);
+    }
+    if (changedProps.has("params") || changedProps.has("hass")) {
+      if (this.params?.entityId && this.hass) {
+        this._stateObj = this.hass.states[this.params.entityId];
+      }
+    }
+  }
+
+  protected render() {
+    if (!this.params || !this._stateObj) {
+      return nothing;
+    }
+
+    const domain = computeDomain(this.params.entityId);
+    const itemType = SearchableDomains.has(domain)
+      ? (domain as ItemType)
+      : "entity";
+
+    const { floor, area, device } = getEntityContext(
+      this._stateObj,
+      this.hass.entities,
+      this.hass.devices,
+      this.hass.areas,
+      this.hass.floors
+    );
+    const floorName = floor ? computeFloorName(floor) : undefined;
+    const areaName = area ? (computeAreaName(area) ?? area.area_id) : undefined;
+    const deviceName = device
+      ? computeDeviceNameDisplay(device, this.hass.localize, this.hass.states)
+      : undefined;
+    const integrationName = this.entry?.platform
+      ? this.hass.localize(`component.${this.entry.platform}.title`) ||
+        this.entry.platform
+      : undefined;
+    const labels =
+      this.entry?.labels.map((labelId) => ({
+        id: labelId,
+        entry: this._labels?.find((label) => label.label_id === labelId),
+      })) ?? [];
+
+    const contextEntries: ContextEntry[] = [];
+
+    if (floor && floorName) {
+      contextEntries.push({
+        translationKey: "ui.dialogs.more_info_control.floor",
+        value: floorName,
+        href: "/config/areas/dashboard",
+        icon: html`<ha-floor-icon slot="end" .floor=${floor}></ha-floor-icon>`,
+      });
+    }
+    if (area && areaName) {
+      contextEntries.push({
+        translationKey: "ui.components.related-items.area",
+        value: areaName,
+        href: `/config/areas/area/${area.area_id}`,
+        icon: area.icon
+          ? html`<ha-icon slot="end" .icon=${area.icon}></ha-icon>`
+          : html`<ha-svg-icon slot="end" .path=${mdiTextureBox}></ha-svg-icon>`,
+      });
+    }
+    if (device && deviceName) {
+      contextEntries.push({
+        translationKey: "ui.components.related-items.device",
+        value: deviceName,
+        href: `/config/devices/device/${device.id}`,
+        icon: html`<ha-svg-icon slot="end" .path=${mdiDevices}></ha-svg-icon>`,
+      });
+    }
+    if (this.entry?.platform && integrationName) {
+      contextEntries.push({
+        translationKey: "ui.components.related-items.integration",
+        value: integrationName,
+        href: this.entry.config_entry_id
+          ? `/config/integrations/integration/${this.entry.platform}#config_entry=${this.entry.config_entry_id}`
+          : undefined,
+        icon: html`<img
+          slot="end"
+          alt=""
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"
+          src=${brandsUrl(
+            {
+              domain: this.entry.platform,
+              type: "icon",
+              darkOptimized: this.hass.themes?.darkMode,
+            },
+            this.hass.auth.data.hassUrl
+          )}
+        />`,
+      });
+    }
+    contextEntries.push({
+      translationKey: "ui.dialogs.more_info_control.labels",
+      value:
+        labels.map(({ id, entry }) => entry?.name ?? id).join(", ") ||
+        this.hass.localize("ui.dialogs.more_info_control.no_labels"),
+      displayValue: labels.length
+        ? html`<div class="labels">
+            ${labels.map(
+              ({ id, entry }) => html`
+                <ha-label
+                  class="text-ellipsis"
+                  .color=${entry?.color ?? undefined}
+                  .description=${entry?.description ?? undefined}
+                >
+                  ${
+                    entry?.icon
+                      ? html`<ha-icon
+                          slot="icon"
+                          .icon=${entry.icon}
+                        ></ha-icon>`
+                      : nothing
+                  }
+                  ${entry?.name ?? id}
+                </ha-label>
+              `
+            )}
+          </div>`
+        : undefined,
+    });
+
+    return html`
+      <div class="content">
+        <ha-grouped-list
+          .header=${this.hass.localize("ui.dialogs.more_info_control.context")}
+        >
+          ${this._renderEntries(contextEntries)}
+        </ha-grouped-list>
+        <ha-related-items
+          .hass=${this.hass}
+          .itemId=${this.params.entityId}
+          .itemType=${itemType}
+          .exclude=${itemType === "entity" ? CONTEXT_SECTIONS : undefined}
+        ></ha-related-items>
+      </div>
+    `;
+  }
+
+  private _renderEntries(entries: ContextEntry[]) {
+    return entries.map((entry) => {
+      const label = this.hass.localize(entry.translationKey);
+
+      if (!entry.href) {
+        return html`
+          <ha-list-item-value .label=${label}
+            >${entry.displayValue ?? entry.value}</ha-list-item-value
+          >
+        `;
+      }
+
+      return html`
+        <ha-list-item-button .href=${entry.href}>
+          <div class="link-row" slot="content">
+            <div class="label">${label}</div>
+            <div class="value">${entry.value}</div>
+          </div>
+          ${entry.icon ?? nothing}
+          <ha-icon-next slot="end"></ha-icon-next>
+        </ha-list-item-button>
+      `;
+    });
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .content {
+      padding: var(--ha-space-6);
+      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
+    }
+
+    ha-related-items {
+      margin-top: var(--ha-space-6);
+    }
+
+    ha-list-item-button {
+      --ha-row-item-padding-block: var(--ha-space-2);
+      --ha-row-item-min-height: 40px;
+      --ha-row-item-gap: var(--ha-space-3);
+      --mdc-icon-size: 20px;
+    }
+
+    ha-list-item-button::part(end) {
+      gap: var(--ha-space-2);
+    }
+
+    ha-list-item-button img {
+      width: 20px;
+      height: 20px;
+      object-fit: contain;
+    }
+
+    .link-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--ha-space-3);
+    }
+
+    .link-row .label {
+      flex: 1;
+      color: var(--secondary-text-color);
+    }
+
+    .link-row .value {
+      max-width: 60%;
+      min-width: 0;
+      text-align: end;
+      overflow-wrap: anywhere;
+    }
+
+    .labels {
+      display: flex;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+      gap: var(--ha-space-1);
+    }
+
+    .labels ha-label {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    ha-icon-next {
+      color: var(--secondary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-related": HaMoreInfoRelated;
+  }
+}

src/dialogs/shortcuts/dialog-shortcuts.ts

@@ -235,7 +235,7 @@ class DialogShortcuts extends DialogMixin(LitElement) {
 
         <ha-alert slot="footer">
           ${this._i18n.localize("ui.dialogs.shortcuts.enable_shortcuts_hint", {
-            user_profile: html`<a href="/profile/general#shortcuts"
+            user_profile: html`<a href="/profile/browser#shortcuts"
               >${this._i18n.localize(
                 "ui.dialogs.shortcuts.enable_shortcuts_hint_user_profile"
               )}</a

src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts

@@ -1,215 +1,43 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-svg-icon";
-import "../../../components/input/ha-input";
-import type { HaInput } from "../../../components/input/ha-input";
-import { cloudLogin } from "../../../data/cloud";
-import { showCloudAlreadyConnectedDialog } from "../../../panels/config/cloud/dialog-cloud-already-connected/show-dialog-cloud-already-connected";
+import "../../../panels/config/cloud/login/cloud-login";
 import type { HomeAssistant } from "../../../types";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../../generic/show-dialog-box";
 import { AssistantSetupStyles } from "../styles";
 
 @customElement("cloud-step-signin")
 export class CloudStepSignin extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _requestInProgress = false;
-
-  @state() private _error?: string;
-
-  @state() private _checkConnection = true;
-
-  @query("#email", true) private _emailField!: HaInput;
-
-  @query("#password", true) private _passwordField!: HaInput;
+  @property() public email?: string;
 
   render() {
     return html`<div class="content">
-        <img
-          src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
-          alt="Nabu Casa logo"
-        />
-        <h1>${this.hass.localize("ui.panel.config.cloud.login.sign_in")}</h1>
-        ${
-          this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""
-        }
-        <ha-input
-          autofocus
-          id="email"
-          name="email"
-          .label=${this.hass.localize(
-            "ui.panel.config.cloud.register.email_address"
-          )}
-          .disabled=${this._requestInProgress}
-          type="email"
-          autocomplete="email"
-          required
-          @keydown=${this._keyDown}
-          .validationMessage=${this.hass.localize(
-            "ui.panel.config.cloud.register.email_error_msg"
-          )}
-        ></ha-input>
-        <ha-input
-          id="password"
-          type="password"
-          password-toggle
-          name="password"
-          .label=${this.hass.localize(
-            "ui.panel.config.cloud.register.password"
-          )}
-          .disabled=${this._requestInProgress}
-          autocomplete="new-password"
-          minlength="8"
-          required
-          @keydown=${this._keyDown}
-          .validationMessage=${this.hass.localize(
-            "ui.panel.config.cloud.register.password_error_msg"
-          )}
-        ></ha-input>
-      </div>
-      <div class="footer">
-        <ha-button
-          @click=${this._handleLogin}
-          .disabled=${this._requestInProgress}
-          >${this.hass.localize(
-            "ui.panel.config.cloud.login.sign_in"
-          )}</ha-button
-        >
-      </div>`;
+      <img
+        src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
+        alt="Nabu Casa logo"
+      />
+      <h1>${this.hass.localize("ui.panel.config.cloud.login.sign_in")}</h1>
+      <cloud-login
+        card-less
+        check-connection
+        .hass=${this.hass}
+        .email=${this.email}
+        .localize=${this.hass.localize}
+        @cloud-forgot-password=${this._forgotPassword}
+        @cloud-logged-in=${this._loggedIn}
+      ></cloud-login>
+    </div>`;
   }
 
-  private _keyDown(ev: KeyboardEvent) {
-    if (ev.key === "Enter") {
-      this._handleLogin();
-    }
+  private _loggedIn() {
+    fireEvent(this, "cloud-step", { step: "DONE" });
   }
 
-  private async _handleLogin() {
-    const emailField = this._emailField;
-    const passwordField = this._passwordField;
-
-    const email = emailField.value as string;
-    const password = passwordField.value as string;
-
-    if (!emailField.reportValidity()) {
-      passwordField.reportValidity();
-      emailField.focus();
-      return;
-    }
-
-    if (!passwordField.reportValidity()) {
-      passwordField.focus();
-      return;
-    }
-
-    this._requestInProgress = true;
-
-    const doLogin = async (username: string, code?: string) => {
-      try {
-        await cloudLogin({
-          hass: this.hass,
-          email: username,
-          ...(code ? { code } : { password }),
-          check_connection: this._checkConnection,
-        });
-      } catch (err: any) {
-        const errCode = err && err.body && err.body.code;
-
-        if (errCode === "mfarequired") {
-          const totpCode = await showPromptDialog(this, {
-            title: this.hass.localize(
-              "ui.panel.config.cloud.login.totp_code_prompt_title"
-            ),
-            inputLabel: this.hass.localize(
-              "ui.panel.config.cloud.login.totp_code"
-            ),
-            inputType: "text",
-            defaultValue: "",
-            confirmText: this.hass.localize(
-              "ui.panel.config.cloud.login.submit"
-            ),
-          });
-          if (totpCode !== null && totpCode !== "") {
-            await doLogin(username, totpCode.trim());
-            return;
-          }
-        }
-
-        if (errCode === "alreadyconnectederror") {
-          showCloudAlreadyConnectedDialog(this, {
-            details: JSON.parse(err.body.message),
-            logInHereAction: () => {
-              this._checkConnection = false;
-              doLogin(username);
-            },
-            closeDialog: () => {
-              this._requestInProgress = false;
-            },
-          });
-          return;
-        }
-
-        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
-          await doLogin(username.toLowerCase());
-          return;
-        }
-
-        if (errCode === "PasswordChangeRequired") {
-          showAlertDialog(this, {
-            title: this.hass.localize(
-              "ui.panel.config.cloud.login.alert_password_change_required"
-            ),
-          });
-          navigate("/config/cloud/forgot-password");
-          fireEvent(this, "closed");
-          return;
-        }
-
-        this._requestInProgress = false;
-
-        switch (errCode) {
-          case "UserNotConfirmed":
-            this._error = this.hass.localize(
-              "ui.panel.config.cloud.login.alert_email_confirm_necessary"
-            );
-            break;
-          case "mfarequired":
-            this._error = this.hass.localize(
-              "ui.panel.config.cloud.login.alert_mfa_code_required"
-            );
-            break;
-          case "mfaexpiredornotstarted":
-            this._error = this.hass.localize(
-              "ui.panel.config.cloud.login.alert_mfa_expired_or_not_started"
-            );
-            break;
-          case "invalidtotpcode":
-            this._error = this.hass.localize(
-              "ui.panel.config.cloud.login.alert_totp_code_invalid"
-            );
-            break;
-          default:
-            this._error =
-              err && err.body && err.body.message
-                ? err.body.message
-                : "Unknown error";
-            break;
-        }
-
-        emailField.focus();
-      }
-    };
-
-    await doLogin(email);
+  private _forgotPassword() {
+    navigate("/config/cloud/forgot-password");
+    fireEvent(this, "closed");
   }
 
   static styles = [
@@ -218,6 +46,13 @@ export class CloudStepSignin extends LitElement {
       :host {
         display: block;
       }
+      .content {
+        width: 100%;
+      }
+      cloud-login {
+        display: block;
+        text-align: start;
+      }
     `,
   ];
 }

src/dialogs/voice-assistant-setup/cloud/cloud-step-signup.ts

@@ -1,16 +1,17 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, css, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-alert";
-import "../../../components/ha-button";
-import "../../../components/ha-svg-icon";
-import "../../../components/input/ha-input";
-import type { HaInput } from "../../../components/input/ha-input";
+import "../../../components/ha-spinner";
+import type { CloudAutoLogin, CloudStatus } from "../../../data/cloud";
 import {
-  cloudLogin,
-  cloudRegister,
-  cloudResendVerification,
+  cancelCloudAutoLogin,
+  cloudStatusAutoLogin,
+  fetchCloudStatus,
+  subscribeCloudEvents,
 } from "../../../data/cloud";
+import "../../../panels/config/cloud/register/cloud-register-card";
 import type { HomeAssistant } from "../../../types";
 import { AssistantSetupStyles } from "../styles";
 
@@ -18,203 +19,127 @@ import { AssistantSetupStyles } from "../styles";
 export class CloudStepSignup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _requestInProgress = false;
+  @state() private _autoLogin: CloudAutoLogin | null = null;
 
-  @state() private _email?: string;
+  @state() private _loading = true;
 
-  @state() private _password?: string;
+  private _email?: string;
 
-  @state() private _error?: string;
+  private _unsubCloudEvents?: Promise<UnsubscribeFunc>;
 
-  @state() private _state?: "VERIFY";
+  private _statusRead: Promise<void> = Promise.resolve();
 
-  @query("#email", true) private _emailField!: HaInput;
+  private _wasLoggedIn?: boolean;
 
-  @query("#password", true) private _passwordField!: HaInput;
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._watchCloudStatus();
+    this._loadInitialStatus();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._unsubCloudEvents?.then((unsub) => unsub()).catch(() => undefined);
+    this._unsubCloudEvents = undefined;
+  }
 
   render() {
     return html`<div class="content">
-        <img
-          src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
-          alt="Nabu Casa logo"
-        />
-        <h1>
-          ${this.hass.localize("ui.panel.config.cloud.register.create_account")}
-        </h1>
-        ${
-          this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""
-        }
-        ${
-          this._state === "VERIFY"
-            ? html`<p>
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.confirm_email",
-                  { email: this._email }
-                )}
-              </p>`
-            : html`<ha-input
-                  autofocus
-                  id="email"
-                  name="email"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.cloud.register.email_address"
-                  )}
-                  .disabled=${this._requestInProgress}
-                  type="email"
-                  autocomplete="email"
-                  required
-                  @keydown=${this._keyDown}
-                  .validationMessage=${this.hass.localize(
-                    "ui.panel.config.cloud.register.email_error_msg"
-                  )}
-                ></ha-input>
-                <ha-input
-                  id="password"
-                  type="password"
-                  password-toggle
-                  name="password"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.cloud.register.password"
-                  )}
-                  .disabled=${this._requestInProgress}
-                  autocomplete="new-password"
-                  minlength="8"
-                  required
-                  @keydown=${this._keyDown}
-                  .validationMessage=${this.hass.localize(
-                    "ui.panel.config.cloud.register.password_error_msg"
-                  )}
-                ></ha-input>`
-        }
-      </div>
-      <div class="footer side-by-side">
-        ${
-          this._state === "VERIFY"
-            ? html`<ha-button
-                  @click=${this._handleResendVerifyEmail}
-                  .disabled=${this._requestInProgress}
-                  appearance="plain"
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.register.resend_confirm_email"
-                  )}</ha-button
-                ><ha-button
-                  @click=${this._login}
-                  .disabled=${this._requestInProgress}
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.register.clicked_confirm"
-                  )}</ha-button
-                >`
-            : html`<ha-button
-                  @click=${this._signIn}
-                  .disabled=${this._requestInProgress}
-                  appearance="plain"
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.login.sign_in"
-                  )}</ha-button
-                >
-                <ha-button
-                  @click=${this._handleRegister}
-                  .disabled=${this._requestInProgress}
-                  >${this.hass.localize("ui.common.next")}</ha-button
-                >`
-        }
-      </div>`;
+      <img
+        src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
+        alt="Nabu Casa logo"
+      />
+      ${
+        this._loading
+          ? html`<div class="loading"><ha-spinner></ha-spinner></div>`
+          : html`<cloud-register-card
+              card-less
+              .hass=${this.hass}
+              .autoLogin=${this._autoLogin}
+              @cloud-email-changed=${this._emailChanged}
+              @cloud-sign-in-instead=${this._signIn}
+              @cloud-cancel-auto-login=${this._cancelAutoLogin}
+              @ha-refresh-cloud-status=${this._refreshCloudStatus}
+            ></cloud-register-card>`
+      }
+    </div>`;
+  }
+
+  // The cloud panel is fed status by ha-panel-config; this dialog is mounted at
+  // the root, outside it, so the step does the watching. Every cloud event means
+  // one thing here — the state moved, read it back — because cloud/status holds
+  // everything the events carry.
+  private _watchCloudStatus() {
+    if (this._unsubCloudEvents) {
+      return;
+    }
+
+    const subscription = subscribeCloudEvents(this.hass, () => {
+      this._refreshCloudStatus();
+    });
+    this._unsubCloudEvents = subscription;
+
+    subscription.catch(() => {
+      if (this._unsubCloudEvents === subscription) {
+        this._unsubCloudEvents = undefined;
+      }
+    });
+  }
+
+  private async _loadInitialStatus() {
+    await this._refreshCloudStatus();
+    this._loading = false;
+  }
+
+  private _refreshCloudStatus = (): Promise<void> => {
+    this._statusRead = this._statusRead
+      .then(() => this._readCloudStatus())
+      .catch(() => undefined);
+    return this._statusRead;
+  };
+
+  private async _readCloudStatus(): Promise<void> {
+    let status: CloudStatus;
+    try {
+      status = await fetchCloudStatus(this.hass);
+    } catch (_err) {
+      // Nothing to reconcile against. The registration form is the right place
+      // to be, and the next event tries again.
+      return;
+    }
+
+    // Lit keeps updating an element that was connected once.
+    if (!this.isConnected) {
+      return;
+    }
+
+    const wasLoggedIn = this._wasLoggedIn;
+    this._wasLoggedIn = status.logged_in;
+    this._autoLogin = cloudStatusAutoLogin(status);
+
+    if (status.logged_in && wasLoggedIn === false) {
+      fireEvent(this, "cloud-step", { step: "DONE" });
+    }
+  }
+
+  private _emailChanged(
+    ev: HASSDomEvent<HASSDomEvents["cloud-email-changed"]>
+  ) {
+    this._email = ev.detail.value;
   }
 
   private _signIn() {
-    fireEvent(this, "cloud-step", { step: "SIGNIN" });
+    fireEvent(this, "cloud-step", { step: "SIGNIN", email: this._email });
   }
 
-  private _keyDown(ev: KeyboardEvent) {
-    if (ev.key === "Enter") {
-      this._handleRegister();
-    }
-  }
-
-  private async _handleRegister() {
-    const emailField = this._emailField;
-    const passwordField = this._passwordField;
-
-    let invalid = false;
-
-    if (!emailField.reportValidity()) {
-      invalid = true;
-      emailField.focus();
-    }
-
-    if (!passwordField.reportValidity()) {
-      if (!invalid) {
-        passwordField.focus();
-      }
-      invalid = true;
-    }
-
-    if (invalid) {
-      return;
-    }
-
-    const email = emailField.value!.toLowerCase();
-    const password = passwordField.value!;
-
-    this._requestInProgress = true;
-
+  private async _cancelAutoLogin() {
     try {
-      await cloudRegister(this.hass, email, password);
-      this._email = email;
-      this._password = password;
-      this._verificationEmailSent();
-    } catch (err: any) {
-      this._password = "";
-      this._error =
-        err && err.body && err.body.message
-          ? err.body.message
-          : "Unknown error";
+      await cancelCloudAutoLogin(this.hass);
+    } catch (_err) {
+      // Fire and forget: the card has already returned to the form, and the
+      // read below reconciles a registration the backend refused to drop.
     } finally {
-      this._requestInProgress = false;
-    }
-  }
-
-  private async _handleResendVerifyEmail() {
-    if (!this._email) {
-      return;
-    }
-    try {
-      await cloudResendVerification(this.hass, this._email);
-      this._verificationEmailSent();
-    } catch (err: any) {
-      this._error =
-        err && err.body && err.body.message
-          ? err.body.message
-          : "Unknown error";
-    }
-  }
-
-  private _verificationEmailSent() {
-    this._state = "VERIFY";
-
-    setTimeout(() => this._login(), 5000);
-  }
-
-  private async _login() {
-    if (!this._email || !this._password) {
-      return;
-    }
-
-    try {
-      await cloudLogin({
-        hass: this.hass,
-        email: this._email,
-        password: this._password,
-      });
-      fireEvent(this, "cloud-step", { step: "DONE" });
-    } catch (e: any) {
-      if (e?.body?.code === "usernotconfirmed") {
-        this._verificationEmailSent();
-      } else {
-        this._error = "Something went wrong. Please try again.";
-      }
+      this._refreshCloudStatus();
     }
   }
 
@@ -224,6 +149,14 @@ export class CloudStepSignup extends LitElement {
       .content {
         width: 100%;
       }
+      .loading {
+        display: flex;
+        justify-content: center;
+        padding: var(--ha-space-8) 0;
+      }
+      cloud-register-card {
+        text-align: start;
+      }
     `,
   ];
 }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-cloud.ts

@@ -4,6 +4,7 @@ import type { HomeAssistant } from "../../types";
 import "./cloud/cloud-step-intro";
 import "./cloud/cloud-step-signin";
 import "./cloud/cloud-step-signup";
+import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { STEP } from "./voice-assistant-setup-dialog";
 
@@ -13,6 +14,8 @@ export class HaVoiceAssistantSetupStepCloud extends LitElement {
 
   @state() private _state: "SIGNUP" | "SIGNIN" | "INTRO" = "INTRO";
 
+  @state() private _email?: string;
+
   protected override render() {
     if (this._state === "SIGNUP") {
       return html`<cloud-step-signup
@@ -23,6 +26,7 @@ export class HaVoiceAssistantSetupStepCloud extends LitElement {
     if (this._state === "SIGNIN") {
       return html`<cloud-step-signin
         .hass=${this.hass}
+        .email=${this._email}
         @cloud-step=${this._cloudStep}
       ></cloud-step-signin>`;
     }
@@ -32,7 +36,7 @@ export class HaVoiceAssistantSetupStepCloud extends LitElement {
     ></cloud-step-intro>`;
   }
 
-  private _cloudStep(ev) {
+  private _cloudStep(ev: HASSDomEvent<HASSDomEvents["cloud-step"]>) {
     if (ev.detail.step === "DONE") {
       fireEvent(this, "next-step", {
         step: STEP.PIPELINE,
@@ -40,6 +44,10 @@ export class HaVoiceAssistantSetupStepCloud extends LitElement {
       });
       return;
     }
+    // Carried between the steps so switching does not lose a typed address.
+    if (ev.detail.email !== undefined) {
+      this._email = ev.detail.email;
+    }
     this._state = ev.detail.step;
   }
 }
@@ -49,6 +57,6 @@ declare global {
     "ha-voice-assistant-setup-step-cloud": HaVoiceAssistantSetupStepCloud;
   }
   interface HASSDomEvents {
-    "cloud-step": { step: "SIGNUP" | "SIGNIN" | "DONE" };
+    "cloud-step": { step: "SIGNUP" | "SIGNIN" | "DONE"; email?: string };
   }
 }

src/entrypoints/service-worker.ts

@@ -117,6 +117,33 @@ const initRouting = () => {
     })
   );
 
+  // Strip the rotating token from the cache key, or every rotation refetches
+  // every tile. The TileJSON is deliberately not matched: it is the switching
+  // point for the tile source, so it stays on the network.
+  registerRoute(
+    ({ url }) =>
+      /^\/api\/map_tiles\/(vector|raster|fonts|sprites)\//.test(url.pathname),
+    new CacheFirst({
+      cacheName: "map-tiles",
+      plugins: [
+        {
+          cacheKeyWillBeUsed: async ({ request }) => {
+            const url = new URL(request.url);
+            url.searchParams.delete("token");
+            return url.href;
+          },
+        },
+        // A stale token gives a 403; caching that would pin the failure.
+        new CacheableResponsePlugin({ statuses: [0, 200] }),
+        new ExpirationPlugin({
+          maxEntries: 500,
+          maxAgeSeconds: 60 * 60 * 24 * 7,
+          purgeOnQuotaError: true,
+        }),
+      ],
+    })
+  );
+
   // Short-circuit camera/image proxy requests with an expired signature or a
   // missing/undefined token so they don't hit core and get logged as invalid
   // login attempts. Registered before the generic /api route below so it wins.

src/layouts/hass-router-page.ts

@@ -24,6 +24,8 @@ export interface RouteOptions {
   // Function to load the page.
   load?: () => Promise<unknown>;
   cache?: boolean;
+  // Recreate the page when the remaining path (the item id) changes.
+  itemId?: boolean;
   waitForReady?: boolean;
 }
 
@@ -138,10 +140,23 @@ export class HassRouterPage extends ReactiveElement {
     }
 
     if (this._currentPage === newPage) {
-      if (this.lastChild) {
-        this.updatePageEl(this.lastChild, changedProps);
+      const oldRoute = changedProps.get("route");
+      const oldTail = oldRoute ? computeRouteTail(oldRoute).path : undefined;
+      const newTail = route ? this._computeTail(route).path : undefined;
+      if (
+        typeof routeOptions === "object" &&
+        routeOptions.itemId &&
+        oldTail !== newTail
+      ) {
+        // Fall through to the normal create path so `load` / loading screen
+        // still run. itemId pages are not cached, so this is a new element.
+        this._currentPage = "";
+      } else {
+        if (this.lastChild) {
+          this.updatePageEl(this.lastChild, changedProps);
+        }
+        return;
       }
-      return;
     }
 
     if (!routeOptions) {
@@ -365,7 +380,10 @@ export class HassRouterPage extends ReactiveElement {
     this.updatePageEl(panelEl);
     this.appendChild(panelEl);
 
-    if (routerOptions.cacheAll || routeOptions.cache) {
+    if (
+      (routerOptions.cacheAll || routeOptions.cache) &&
+      !routeOptions.itemId
+    ) {
       this._cache[page] = panelEl;
     }
   }

src/layouts/home-assistant.ts

@@ -318,10 +318,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     if (!searchParams["more-info-entity-id"]) {
       return;
     }
-    const { entityId, view, hash } = decodeMoreInfoUrl(
-      window.location.search,
-      window.location.hash
-    );
+    const { entityId, view } = decodeMoreInfoUrl(window.location.search);
     if (!entityId) {
       return;
     }
@@ -331,7 +328,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       showMoreInfoDialog(this, {
         entityId,
         view,
-        hash,
         fromUrl: true,
       });
     });

src/mixins/prevent-unsaved-mixin.ts

@@ -1,5 +1,9 @@
 import type { LitElement, PropertyValues } from "lit";
-import { isNavigationClick } from "../common/dom/is-navigation-click";
+import type { UnsavedChangesGuard } from "../common/navigate";
+import {
+  registerUnsavedChangesGuard,
+  unregisterUnsavedChangesGuard,
+} from "../common/navigate";
 import type { Constructor } from "../types";
 
 export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
@@ -9,45 +13,34 @@ export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
     /** Provided by `DirtyStateProviderMixin`. */
     declare isDirtyState: boolean;
 
-    private _handleClick = async (e: MouseEvent) => {
-      // get the right target, otherwise the composedPath would return <home-assistant> in the new event
-      const target = e.composedPath()[0];
-      if (!isNavigationClick(e)) {
-        return;
-      }
-
-      const result = await this.promptDiscardChanges();
-      if (result) {
-        this._removeListeners();
-        if (target) {
-          const newEvent = new MouseEvent(e.type, e);
-          target.dispatchEvent(newEvent);
-        }
-      }
-    };
-
     private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();
 
-    private _removeListeners() {
-      window.removeEventListener("click", this._handleClick, true);
-      window.removeEventListener("beforeunload", this._handleUnload);
+    private _unsavedChangesGuard: UnsavedChangesGuard = {
+      isDirty: () => this.isDirtyState,
+      prompt: () => this.promptDiscardChanges(),
+    };
+
+    public connectedCallback(): void {
+      super.connectedCallback();
+
+      registerUnsavedChangesGuard(this._unsavedChangesGuard);
     }
 
     protected willUpdate(changedProperties: PropertyValues<this>): void {
       super.willUpdate(changedProperties);
 
       if (this.isDirtyState && this.isConnected) {
-        window.addEventListener("click", this._handleClick, true);
         window.addEventListener("beforeunload", this._handleUnload);
       } else {
-        this._removeListeners();
+        window.removeEventListener("beforeunload", this._handleUnload);
       }
     }
 
     public disconnectedCallback(): void {
       super.disconnectedCallback();
 
-      this._removeListeners();
+      unregisterUnsavedChangesGuard(this._unsavedChangesGuard);
+      window.removeEventListener("beforeunload", this._handleUnload);
     }
 
     protected async promptDiscardChanges(): Promise<boolean> {

src/panels/calendar/ha-full-calendar.ts

@@ -16,6 +16,7 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoize from "memoize-one";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { resolveTimeZone } from "../../common/datetime/resolve-time-zone";
@@ -77,6 +78,10 @@ export class HAFullCalendar extends LitElement {
 
   @property({ attribute: "add-fab", type: Boolean }) public addFab = false;
 
+  @property({ attribute: "add-fab-size" }) public addFabSize = "large";
+
+  @property({ attribute: "add-fab-style" }) public addFabStyle = "on_top";
+
   @property({ attribute: false }) public events: CalendarEvent[] = [];
 
   @property({ attribute: false }) public calendars: CalendarData[] = [];
@@ -172,13 +177,34 @@ export class HAFullCalendar extends LitElement {
                           </ha-icon-button-next>
                         </div>
                         <h1>${this.calendar.view.title}</h1>
-                        <ha-button-toggle-group
-                          .buttons=${viewToggleButtons}
-                          .active=${this._activeView}
-                          size="s"
-                          no-wrap
-                          @value-changed=${this._handleView}
-                        ></ha-button-toggle-group>
+                        <div>
+                          <ha-button-toggle-group
+                            .buttons=${viewToggleButtons}
+                            .active=${this._activeView}
+                            size="s"
+                            no-wrap
+                            @value-changed=${this._handleView}
+                          ></ha-button-toggle-group>
+                          ${
+                            this.addFab &&
+                            this._hasMutableCalendars &&
+                            this.addFabStyle === "header"
+                              ? html`<ha-button
+                                  size="s"
+                                  class="fab-header"
+                                  aria-label=${this.hass.localize(
+                                    "ui.components.calendar.event.add"
+                                  )}
+                                  @click=${this._createEvent}
+                                >
+                                  <ha-svg-icon
+                                    slot=""
+                                    .path=${mdiPlus}
+                                  ></ha-svg-icon>
+                                </ha-button>`
+                              : nothing
+                          }
+                        </div>
                       `
                     : html`
                         <div class="controls">
@@ -208,13 +234,34 @@ export class HAFullCalendar extends LitElement {
                               "ui.components.calendar.today"
                             )}</ha-button
                           >
-                          <ha-button-toggle-group
-                            .buttons=${viewToggleButtons}
-                            .active=${this._activeView}
-                            size="s"
-                            no-wrap
-                            @value-changed=${this._handleView}
-                          ></ha-button-toggle-group>
+                          <div>
+                            <ha-button-toggle-group
+                              .buttons=${viewToggleButtons}
+                              .active=${this._activeView}
+                              size="s"
+                              no-wrap
+                              @value-changed=${this._handleView}
+                            ></ha-button-toggle-group>
+                            ${
+                              this.addFab &&
+                              this._hasMutableCalendars &&
+                              this.addFabStyle === "header"
+                                ? html`<ha-button
+                                    size="s"
+                                    class="fab-header"
+                                    aria-label=${this.hass.localize(
+                                      "ui.components.calendar.event.add"
+                                    )}
+                                    @click=${this._createEvent}
+                                  >
+                                    <ha-svg-icon
+                                      slot=""
+                                      .path=${mdiPlus}
+                                    ></ha-svg-icon>
+                                  </ha-button>`
+                                : nothing
+                            }
+                          </div>
                         </div>
                       `
                 }
@@ -225,8 +272,15 @@ export class HAFullCalendar extends LitElement {
 
       <div id="calendar"></div>
       ${
-        this.addFab && this._hasMutableCalendars
-          ? html`<ha-button size="l" slot="fab" @click=${this._createEvent}>
+        this.addFab &&
+        this._hasMutableCalendars &&
+        this.addFabStyle !== "header"
+          ? html`<ha-button
+              size=${this.addFabSize.charAt(0)}
+              class=${classMap({ below: this.addFabStyle === "below" })}
+              slot="fab"
+              @click=${this._createEvent}
+            >
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
               ${this.hass.localize("ui.components.calendar.event.add")}
             </ha-button>`
@@ -574,6 +628,17 @@ export class HAFullCalendar extends LitElement {
           --ha-button-box-shadow: var(--ha-box-shadow-l);
         }
 
+        ha-button.below[slot="fab"] {
+          position: relative;
+          margin-inline-start: auto;
+          padding-top: var(--ha-space-2);
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          --ha-button-box-shadow: none;
+        }
+
         #calendar {
           flex-grow: 1;
           background-color: var(

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

@@ -3,6 +3,10 @@ import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import {
+  ACTION_ROW_CONFIG_KEYS,
+  pickRowConfig,
+} from "../../../../data/automation";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
@@ -107,9 +111,8 @@ export default class HaAutomationActionEditor extends LitElement {
   private _onUiChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = {
-      ...(this.action.alias ? { alias: this.action.alias } : {}),
-      ...(this.action.note ? { note: this.action.note } : {}),
       ...ev.detail.value,
+      ...pickRowConfig(this.action, ACTION_ROW_CONFIG_KEYS),
     };
     fireEvent(this, "value-changed", { value });
   }

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -14,6 +14,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
   deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceActions,
   deviceAutomationsEqual,
   fetchDeviceActionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
@@ -40,6 +42,8 @@ export class HaDeviceAction extends LitElement {
 
   @state() private _compositeSplits?: DeviceCompositeSplits;
 
+  @state() private _replacementDeviceIds?: string[];
+
   private _loadingCompositeSplits = false;
 
   @state()
@@ -95,13 +99,27 @@ export class HaDeviceAction extends LitElement {
     return true;
   }
 
+  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
+    this._replacementDeviceIds = await fetchReplacementDevices(
+      this.hass,
+      this._entityReg,
+      this.action,
+      compositeSplits,
+      fetchDeviceActions
+    );
+  }
+
   private async _loadCompositeSplits() {
     if (this._loadingCompositeSplits) {
       return;
     }
     this._loadingCompositeSplits = true;
     try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // Resolve the candidates before exposing the split map, so the picker
+      // never offers one that cannot host the automation.
+      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      await this._resolveReplacements(compositeSplits);
+      this._compositeSplits = compositeSplits;
     } catch (_err) {
       this._compositeSplits = {};
     } finally {
@@ -115,6 +133,7 @@ export class HaDeviceAction extends LitElement {
     return html`
       <ha-device-picker
         .value=${deviceId}
+        .replacementDeviceIds=${this._replacementDeviceIds}
         .disabled=${this.disabled}
         @value-changed=${this._devicePicked}
         .hass=${this.hass}
@@ -156,6 +175,19 @@ export class HaDeviceAction extends LitElement {
     `;
   }
 
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    // The picked device only lives here until the configuration catches up.
+    // Once it points somewhere else, undo and redo included, it is stale.
+    const previous = changedProps.get("action");
+    if (previous && previous.device_id !== this.action.device_id) {
+      this._deviceId = undefined;
+      this._replacementDeviceIds = undefined;
+      if (this._compositeSplits) {
+        this._resolveReplacements(this._compositeSplits);
+      }
+    }
+  }
+
   protected firstUpdated() {
     this.hass.loadBackendTranslation("device_automation");
     if (!this._capabilities) {
@@ -185,6 +217,15 @@ export class HaDeviceAction extends LitElement {
 
   private _devicePicked(ev) {
     ev.stopPropagation();
+    // The automation exists as is on the replacement, so only the reference
+    // changes and the rest of the configuration is left untouched.
+    if (this._replacementDeviceIds?.includes(ev.target.value)) {
+      this._deviceId = undefined;
+      fireEvent(this, "value-changed", {
+        value: { ...this.action, device_id: ev.target.value },
+      });
+      return;
+    }
     this._deviceId = ev.target.value;
     if (this._deviceId === undefined) {
       fireEvent(this, "value-changed", {

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

@@ -1,4 +1,5 @@
 import "@home-assistant/webawesome/dist/components/tree-item/tree-item";
+import type WaTreeItem from "@home-assistant/webawesome/dist/components/tree-item/tree-item";
 import "@home-assistant/webawesome/dist/components/tree/tree";
 import type { WaSelectionChangeEvent } from "@home-assistant/webawesome/dist/events/selection-change";
 import { consume, type ContextType } from "@lit/context";
@@ -360,6 +361,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
                   ? html`<ha-list-base>${floorAreas}</ha-list-base>`
                   : html`<wa-tree
                       @wa-selection-change=${this._handleSelectionChange}
+                      @dblclick=${this._handleDoubleClick}
                       >${floorAreas}</wa-tree
                     >`
               }`
@@ -1444,6 +1446,26 @@ export default class HaAutomationAddFromTarget extends LitElement {
     this._toggleItem(targetId, false);
   }
 
+  private _handleDoubleClick(ev: MouseEvent) {
+    // the expand button and non-selectable items already toggle on single click
+    if (
+      ev
+        .composedPath()
+        .some((el) => (el as HTMLElement).classList?.contains("expand-button"))
+    ) {
+      return;
+    }
+    const item = (ev.target as HTMLElement).closest<
+      WaTreeItem & { target: string }
+    >("wa-tree-item");
+    if (!item || item.isLeaf || item.preventSelection) {
+      return;
+    }
+    // avoid leaving the label text selected by the double click
+    window.getSelection()?.removeAllRanges();
+    this._toggleItem(item.target, !item.expanded);
+  }
+
   private async _loadConfigEntries() {
     const configEntries = await getConfigEntries(this.hass);
     this._configEntryLookup = Object.fromEntries(

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

@@ -7,7 +7,11 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
-import { expandConditionWithShorthand } from "../../../../data/automation";
+import {
+  CONDITION_ROW_CONFIG_KEYS,
+  expandConditionWithShorthand,
+  pickRowConfig,
+} from "../../../../data/automation";
 import type { ConditionDescription } from "../../../../data/condition";
 import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
@@ -125,9 +129,8 @@ export default class HaAutomationConditionEditor extends LitElement {
   private _onUiChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = {
-      ...(this.condition.alias ? { alias: this.condition.alias } : {}),
-      ...(this.condition.note ? { note: this.condition.note } : {}),
       ...ev.detail.value,
+      ...pickRowConfig(this.condition, CONDITION_ROW_CONFIG_KEYS),
     };
     fireEvent(this, "value-changed", { value });
   }

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

@@ -14,6 +14,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
   deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceConditions,
   deviceAutomationsEqual,
   fetchDeviceConditionCapabilities,
   localizeExtraFieldsComputeHelperCallback,
@@ -40,6 +42,8 @@ export class HaDeviceCondition extends LitElement {
 
   @state() private _compositeSplits?: DeviceCompositeSplits;
 
+  @state() private _replacementDeviceIds?: string[];
+
   private _loadingCompositeSplits = false;
 
   @state()
@@ -96,13 +100,27 @@ export class HaDeviceCondition extends LitElement {
     return true;
   }
 
+  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
+    this._replacementDeviceIds = await fetchReplacementDevices(
+      this.hass,
+      this._entityReg,
+      this.condition,
+      compositeSplits,
+      fetchDeviceConditions
+    );
+  }
+
   private async _loadCompositeSplits() {
     if (this._loadingCompositeSplits) {
       return;
     }
     this._loadingCompositeSplits = true;
     try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // Resolve the candidates before exposing the split map, so the picker
+      // never offers one that cannot host the automation.
+      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      await this._resolveReplacements(compositeSplits);
+      this._compositeSplits = compositeSplits;
     } catch (_err) {
       this._compositeSplits = {};
     } finally {
@@ -116,6 +134,7 @@ export class HaDeviceCondition extends LitElement {
     return html`
       <ha-device-picker
         .value=${deviceId}
+        .replacementDeviceIds=${this._replacementDeviceIds}
         @value-changed=${this._devicePicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
@@ -157,6 +176,19 @@ export class HaDeviceCondition extends LitElement {
     `;
   }
 
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    // The picked device only lives here until the configuration catches up.
+    // Once it points somewhere else, undo and redo included, it is stale.
+    const previous = changedProps.get("condition");
+    if (previous && previous.device_id !== this.condition.device_id) {
+      this._deviceId = undefined;
+      this._replacementDeviceIds = undefined;
+      if (this._compositeSplits) {
+        this._resolveReplacements(this._compositeSplits);
+      }
+    }
+  }
+
   protected firstUpdated() {
     this.hass.loadBackendTranslation("device_automation");
     if (!this._capabilities) {
@@ -187,6 +219,15 @@ export class HaDeviceCondition extends LitElement {
 
   private _devicePicked(ev) {
     ev.stopPropagation();
+    // The automation exists as is on the replacement, so only the reference
+    // changes and the rest of the configuration is left untouched.
+    if (this._replacementDeviceIds?.includes(ev.target.value)) {
+      this._deviceId = undefined;
+      fireEvent(this, "value-changed", {
+        value: { ...this.condition, device_id: ev.target.value },
+      });
+      return;
+    }
     this._deviceId = ev.target.value;
     if (this._deviceId === undefined) {
       fireEvent(this, "value-changed", {

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

@@ -896,10 +896,15 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
             return;
           }
 
+          this.yamlErrors = undefined;
           resolve(true);
         },
         onClose: () => resolve(false),
-        onDiscard: () => resolve(true),
+        onDiscard: () => {
+          this.yamlErrors = undefined;
+          this._markDirtyStateClean();
+          resolve(true);
+        },
         entityRegistryUpdate: this.entityRegistryUpdate,
         entityRegistryEntry: this.registryEntry,
         title: this.hass.localize(

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

@@ -278,6 +278,9 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
       const domain = hooks.domain;
       try {
         const config = await hooks.fetchFileConfig(this.hass, id);
+        if (!this.isConnected) {
+          return;
+        }
         this.readOnly = false;
         const report: AutomationMigrationReport = { deprecated: false };
         this.config = hooks.normalizeConfig(config, report);
@@ -294,6 +297,9 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
         );
         hooks.checkValidation();
       } catch (err: any) {
+        if (!this.isConnected) {
+          return;
+        }
         if (err.status_code !== 404) {
           const alertText =
             err.body?.message || err.body || err.error || "Unknown error";

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

@@ -47,9 +47,11 @@ class HaConfigAutomation extends HassRouterPage {
       },
       edit: {
         tag: "ha-automation-editor",
+        itemId: true,
       },
       show: {
         tag: "ha-automation-editor",
+        itemId: true,
       },
       trace: {
         tag: "ha-automation-trace",

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

@@ -7,6 +7,7 @@ import {
   mdiFormatListBulleted,
   mdiMenuDown,
   mdiShape,
+  mdiSwapHorizontal,
 } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import {
@@ -321,14 +322,25 @@ export class HaAutomationRowTargets extends LitElement {
 
     let lastTargetType: string | null = null;
 
+    // The collapsed summary hides the individual targets, so carry over the
+    // warning when any of them no longer exists.
+    const hasMissingTarget = rows.some(
+      ([targetType, targetId]) => !this._checkTargetExists(targetType, targetId)
+    );
+
     return html`
       <ha-dropdown
         @wa-select=${this._handleTargetSelect}
         @click=${stopPropagation}
         @keydown=${stopPropagation}
       >
-        <button slot="trigger" class="target">
-          <ha-svg-icon .path=${mdiFormatListBulleted}></ha-svg-icon>
+        <button
+          slot="trigger"
+          class=${classMap({ target: true, warning: hasMissingTarget })}
+        >
+          <ha-svg-icon
+            .path=${hasMissingTarget ? mdiAlert : mdiFormatListBulleted}
+          ></ha-svg-icon>
           <div class="label">
             ${this._i18n.localize(
               "ui.panel.config.automation.editor.target_summary.targets",
@@ -467,9 +479,15 @@ export class HaAutomationRowTargets extends LitElement {
         warning = true;
         badgeTargetId = undefined;
         badgeTargetType = undefined;
-        if (targetType === "device" && this._compositeSplits?.[targetId]) {
+        if (
+          targetType === "device" &&
+          this._compositeSplits?.[targetId]?.split_ids.some(
+            (id) => id in this._registries.devices
+          )
+        ) {
           // The device was replaced by one or more split devices; make clear
           // this reference needs to be updated, distinct from "unknown device".
+          icon = mdiSwapHorizontal;
           label = this._i18n.localize(
             "ui.panel.config.automation.editor.target_summary.device_replaced"
           );
@@ -686,6 +704,9 @@ export class HaAutomationRowTargets extends LitElement {
       background-color: var(--ha-color-fill-warning-quiet-resting);
       color: var(--ha-color-on-warning-normal);
     }
+    ha-dropdown-item.warning ha-svg-icon {
+      color: var(--ha-color-on-warning-normal);
+    }
     ha-dropdown-item.warning:hover {
       background-color: var(--ha-color-fill-warning-quiet-hover);
       color: var(--ha-color-on-warning-normal);

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

@@ -8,7 +8,11 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import "../../../../components/input/ha-input";
 import type { Trigger } from "../../../../data/automation";
-import { migrateAutomationTrigger } from "../../../../data/automation";
+import {
+  TRIGGER_ROW_CONFIG_KEYS,
+  migrateAutomationTrigger,
+  pickRowConfig,
+} from "../../../../data/automation";
 import type { TriggerDescription } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
 import { haStyle } from "../../../../resources/styles";
@@ -144,9 +148,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
     if (isTriggerList(this.trigger)) return;
     ev.stopPropagation();
     const value = {
-      ...(this.trigger.alias ? { alias: this.trigger.alias } : {}),
-      ...(this.trigger.note ? { note: this.trigger.note } : {}),
       ...ev.detail.value,
+      ...pickRowConfig(this.trigger, TRIGGER_ROW_CONFIG_KEYS),
     };
     fireEvent(this, "value-changed", { value });
   }

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

@@ -16,6 +16,8 @@ import type {
 } from "../../../../../data/device/device_automation";
 import {
   deviceAutomationEditorMode,
+  fetchReplacementDevices,
+  fetchDeviceTriggers,
   deviceAutomationsEqual,
   fetchDeviceTriggerCapabilities,
   localizeExtraFieldsComputeHelperCallback,
@@ -42,6 +44,8 @@ export class HaDeviceTrigger extends LitElement {
 
   @state() private _compositeSplits?: DeviceCompositeSplits;
 
+  @state() private _replacementDeviceIds?: string[];
+
   private _loadingCompositeSplits = false;
 
   @state()
@@ -100,13 +104,27 @@ export class HaDeviceTrigger extends LitElement {
     return true;
   }
 
+  private async _resolveReplacements(compositeSplits: DeviceCompositeSplits) {
+    this._replacementDeviceIds = await fetchReplacementDevices(
+      this.hass,
+      this._entityReg,
+      this.trigger,
+      compositeSplits,
+      fetchDeviceTriggers
+    );
+  }
+
   private async _loadCompositeSplits() {
     if (this._loadingCompositeSplits) {
       return;
     }
     this._loadingCompositeSplits = true;
     try {
-      this._compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      // Resolve the candidates before exposing the split map, so the picker
+      // never offers one that cannot host the automation.
+      const compositeSplits = await fetchDeviceCompositeSplits(this.hass);
+      await this._resolveReplacements(compositeSplits);
+      this._compositeSplits = compositeSplits;
     } catch (_err) {
       this._compositeSplits = {};
     } finally {
@@ -120,6 +138,7 @@ export class HaDeviceTrigger extends LitElement {
     return html`
       <ha-device-picker
         .value=${deviceId}
+        .replacementDeviceIds=${this._replacementDeviceIds}
         @value-changed=${this._devicePicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
@@ -161,6 +180,19 @@ export class HaDeviceTrigger extends LitElement {
     `;
   }
 
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    // The picked device only lives here until the configuration catches up.
+    // Once it points somewhere else, undo and redo included, it is stale.
+    const previous = changedProps.get("trigger");
+    if (previous && previous.device_id !== this.trigger.device_id) {
+      this._deviceId = undefined;
+      this._replacementDeviceIds = undefined;
+      if (this._compositeSplits) {
+        this._resolveReplacements(this._compositeSplits);
+      }
+    }
+  }
+
   protected firstUpdated() {
     this.hass.loadBackendTranslation("device_automation");
     if (!this._capabilities) {
@@ -208,6 +240,15 @@ export class HaDeviceTrigger extends LitElement {
 
   private _devicePicked(ev) {
     ev.stopPropagation();
+    // The automation exists as is on the replacement, so only the reference
+    // changes and the rest of the configuration is left untouched.
+    if (this._replacementDeviceIds?.includes(ev.target.value)) {
+      this._deviceId = undefined;
+      fireEvent(this, "value-changed", {
+        value: { ...this.trigger, device_id: ev.target.value },
+      });
+      return;
+    }
     this._deviceId = ev.target.value;
     if (this._deviceId === undefined) {
       fireEvent(this, "value-changed", {
@@ -225,9 +266,6 @@ export class HaDeviceTrigger extends LitElement {
     ) {
       trigger = this._origTrigger;
     }
-    if (this.trigger.id) {
-      trigger.id = this.trigger.id;
-    }
     fireEvent(this, "value-changed", { value: trigger });
   }
 

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

@@ -9,6 +9,7 @@ import "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-selector/ha-selector";
 import "../../../../../components/ha-settings-row";
 import type { PlatformTrigger } from "../../../../../data/automation";
+import { TRIGGER_ROW_CONFIG_KEYS } from "../../../../../data/automation";
 import type { IntegrationManifest } from "../../../../../data/integration";
 import { fetchIntegrationManifest } from "../../../../../data/integration";
 import type { TargetSelector } from "../../../../../data/selector";
@@ -27,15 +28,11 @@ const showOptionalToggle = (field: TriggerDescription["fields"][string]) =>
   !("boolean" in field.selector && field.default);
 
 const DEFAULT_KEYS: (keyof PlatformTrigger)[] = [
+  ...TRIGGER_ROW_CONFIG_KEYS,
   "trigger",
   "target",
-  "alias",
-  "note",
-  "id",
-  "variables",
-  "enabled",
   "options",
-] as const;
+];
 
 @customElement("ha-automation-trigger-platform")
 export class HaPlatformTrigger extends LitElement {

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

@@ -57,7 +57,7 @@ export class CloudAccountOverview extends LitElement {
 
   private _renderTopCard(): TemplateResult {
     return html`
-      <ha-card outlined>
+      <ha-card outlined class="summary-card">
         <div class="card-content">
           <div
             class="thank-you-header"
@@ -121,8 +121,8 @@ export class CloudAccountOverview extends LitElement {
           <p class="muted">
             ${this.hass.localize("ui.panel.config.cloud.account.funding_note")}
           </p>
-          ${this._renderSubscriptionState()}
         </div>
+        ${this._renderSubscriptionState()}
       </ha-card>
     `;
   }
@@ -132,6 +132,7 @@ export class CloudAccountOverview extends LitElement {
       case "trial":
         return html`
           <ha-alert
+            class="subscription-alert"
             alert-type="warning"
             .title=${this.hass.localize(
               "ui.panel.config.cloud.account.overview.trial_title"
@@ -156,6 +157,7 @@ export class CloudAccountOverview extends LitElement {
       case "canceled":
         return html`
           <ha-alert
+            class="subscription-alert"
             alert-type="warning"
             .title=${this.hass.localize(
               "ui.panel.config.cloud.account.overview.canceled_title"
@@ -181,6 +183,7 @@ export class CloudAccountOverview extends LitElement {
       case "expired":
         return html`
           <ha-alert
+            class="subscription-alert"
             alert-type="error"
             .title=${this.hass.localize(
               "ui.panel.config.cloud.account.overview.expired_title"
@@ -636,11 +639,15 @@ export class CloudAccountOverview extends LitElement {
           width: auto;
           color: var(--primary-text-color);
         }
-        ha-alert {
-          display: block;
-          margin-top: var(--ha-space-3);
+        /* Prevent the embedded .subscription-alert ha-alert from bleeding outside the card */
+        .summary-card {
+          overflow: hidden;
         }
-        ha-alert ha-button[slot="action"] {
+        .subscription-alert {
+          display: block;
+          --ha-alert-padding: var(--ha-space-3);
+        }
+        .subscription-alert ha-button[slot="action"] {
           width: max-content;
           white-space: nowrap;
         }

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-alert";
@@ -71,11 +72,11 @@ export class CloudLoginPanel extends LitElement {
     cloudLogin.emailField?.focus();
   }
 
-  private _handleForgotPassword() {
+  private _handleForgotPassword(
+    ev: HASSDomEvent<HASSDomEvents["cloud-forgot-password"]>
+  ) {
     this._dismissFlash();
-    fireEvent(this, "cloud-email-changed", {
-      value: this._cloudLoginElement?.emailField?.value ?? this.email ?? "",
-    });
+    fireEvent(this, "cloud-email-changed", { value: ev.detail.email });
     navigate("/config/cloud/forgot-password");
   }
 

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

@@ -226,6 +226,7 @@ export class CloudLogin extends LitElement {
       }
       this.email = "";
       fireEvent(this, "ha-refresh-cloud-status");
+      fireEvent(this, "cloud-logged-in");
     } catch (err: any) {
       const error = await this._handleCloudLoginError(
         err,
@@ -283,7 +284,9 @@ export class CloudLogin extends LitElement {
   }
 
   private _handleForgotPassword() {
-    fireEvent(this, "cloud-forgot-password");
+    fireEvent(this, "cloud-forgot-password", {
+      email: this.emailField?.value ?? this.email ?? "",
+    });
   }
 
   static get styles() {
@@ -325,5 +328,6 @@ declare global {
     "cloud-forgot-password": {
       email: string;
     };
+    "cloud-logged-in": undefined;
   }
 }

src/panels/config/cloud/register/cloud-register-card.ts

@@ -0,0 +1,627 @@
+import { mdiEmailCheckOutline } from "@mdi/js";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
+import "../../../../components/ha-card";
+import "../../../../components/ha-spinner";
+import "../../../../components/ha-svg-icon";
+import "../../../../components/input/ha-input";
+import type { HaInput } from "../../../../components/input/ha-input";
+import type { CloudAutoLogin } from "../../../../data/cloud";
+import {
+  attemptCloudAutoLoginNow,
+  cloudRegisterAutoLogin,
+  resendCloudAutoLoginConfirm,
+} from "../../../../data/cloud";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
+import { cloudSignedOutStyle } from "../cloud-signed-out-style";
+
+// Registration with email-confirmation auto login. Owns the whole flow so the
+// cloud panel page and the voice satellite wizard can present it in their own
+// chrome; hosts supply the pending registration, cancel it on the backend when
+// asked to, and route the way out.
+@customElement("cloud-register-card")
+export class CloudRegisterCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public email?: string;
+
+  @property({ attribute: false }) public autoLogin: CloudAutoLogin | null =
+    null;
+
+  @property({ type: Boolean, attribute: "card-less" }) public cardLess = false;
+
+  @state() private _requestInProgress = false;
+
+  @state() private _resendInProgress = false;
+
+  @state() private _attemptInProgress = false;
+
+  @state() private _autoLoginError?: string;
+
+  @state() private _error?: string;
+
+  @state() private _success?: string;
+
+  @state() private _registeredEmail = "";
+
+  @state() private _override?: "form" | "confirm";
+
+  private _failedKey: string | null = null;
+
+  private _confirmingReported?: boolean;
+
+  @query("#email") private _emailField?: HaInput;
+
+  @query("#password") private _passwordField?: HaInput;
+
+  @query("#confirm-title") private _confirmTitle?: HTMLElement;
+
+  private get _confirming(): boolean {
+    return this._override
+      ? this._override === "confirm"
+      : this.autoLogin !== null;
+  }
+
+  private get _pendingEmail(): string {
+    return this._registeredEmail || this.autoLogin?.email || "";
+  }
+
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!changedProps.has("autoLogin")) {
+      return;
+    }
+
+    if (this._override === (this.autoLogin ? "confirm" : "form")) {
+      // The status caught up with the local action, so stop overriding it.
+      this._override = undefined;
+    }
+
+    const failedKey = this.autoLogin?.failed ?? null;
+    if (failedKey !== this._failedKey) {
+      this._failedKey = failedKey;
+      this._resolveAutoLoginError(failedKey);
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    const confirming = this._confirming;
+    if (confirming !== this._confirmingReported) {
+      this._confirmingReported = confirming;
+      fireEvent(this, "cloud-register-view-changed", { confirming });
+    }
+  }
+
+  protected render(): TemplateResult {
+    return this._confirming ? this._renderConfirm() : this._renderForm();
+  }
+
+  private _renderForm(): TemplateResult {
+    const title = this.hass.localize(
+      "ui.panel.config.cloud.register.create_account"
+    );
+    const content = html`
+      <div class="card-header-block">
+        ${this.cardLess ? html`<h1>${title}</h1>` : html`<h2>${title}</h2>`}
+        <p>
+          ${this.hass.localize("ui.panel.config.cloud.register.information")}
+        </p>
+      </div>
+      <div class="card-content register-form">
+        ${
+          this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing
+        }
+        <ha-input
+          autofocus
+          id="email"
+          name="email"
+          .label=${this.hass.localize(
+            "ui.panel.config.cloud.register.email_address"
+          )}
+          type="email"
+          autocomplete="email"
+          required
+          .value=${this.email ?? ""}
+          .disabled=${this._requestInProgress}
+          @keydown=${this._keyDown}
+          .validationMessage=${this.hass.localize(
+            "ui.panel.config.cloud.register.email_error_msg"
+          )}
+        ></ha-input>
+        <ha-input
+          id="password"
+          type="password"
+          password-toggle
+          name="password"
+          .label=${this.hass.localize(
+            "ui.panel.config.cloud.register.password"
+          )}
+          autocomplete="new-password"
+          minlength="8"
+          required
+          .disabled=${this._requestInProgress}
+          @keydown=${this._keyDown}
+          .validationMessage=${this.hass.localize(
+            "ui.panel.config.cloud.register.password_error_msg"
+          )}
+        ></ha-input>
+        <p class="terms">
+          ${this.hass.localize("ui.panel.config.cloud.register.terms_notice", {
+            terms: html`<a
+              href="https://www.nabucasa.com/tos/"
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize(
+                "ui.panel.config.cloud.register.link_terms_conditions"
+              )}</a
+            >`,
+            privacy_policy: html`<a
+              href="https://www.nabucasa.com/privacy_policy/"
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize(
+                "ui.panel.config.cloud.register.link_privacy_policy"
+              )}</a
+            >`,
+          })}
+        </p>
+      </div>
+      <div class="card-actions split">
+        <ha-button
+          appearance="plain"
+          .disabled=${this._requestInProgress}
+          @click=${this._handleSignInInstead}
+        >
+          ${this.hass.localize("ui.panel.config.cloud.register.sign_in_instead")}
+        </ha-button>
+        <ha-progress-button
+          @click=${this._handleRegister}
+          .progress=${this._requestInProgress}
+          >${this.hass.localize(
+            "ui.panel.config.cloud.register.start_trial"
+          )}</ha-progress-button
+        >
+      </div>
+    `;
+
+    return this.cardLess
+      ? content
+      : html`<ha-card outlined>${content}</ha-card>`;
+  }
+
+  private _renderConfirm(): TemplateResult {
+    const title = this.hass.localize(
+      "ui.panel.config.cloud.register.check_your_email"
+    );
+    const content = html`
+      <div class="card-content confirm">
+        ${
+          this._autoLoginError
+            ? html`<ha-alert alert-type="error">
+                ${this._autoLoginError}
+              </ha-alert>`
+            : nothing
+        }
+        ${
+          this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing
+        }
+        ${
+          this._success
+            ? html`<ha-alert alert-type="success">${this._success}</ha-alert>`
+            : nothing
+        }
+        <div class="confirm-icon">
+          <ha-svg-icon .path=${mdiEmailCheckOutline}></ha-svg-icon>
+        </div>
+        ${
+          this.cardLess
+            ? html`<h1 id="confirm-title" tabindex="-1">${title}</h1>`
+            : html`<h2 id="confirm-title" tabindex="-1">${title}</h2>`
+        }
+        <p>
+          ${this.hass.localize(
+            "ui.panel.config.cloud.register.confirm_email_body",
+            {
+              email: html`<span class="email">${this._pendingEmail}</span>`,
+            }
+          )}
+        </p>
+        ${
+          this._autoLoginError
+            ? nothing
+            : html`
+                <div class="waiting">
+                  <ha-spinner size="tiny"></ha-spinner>
+                  <span>
+                    ${this.hass.localize(
+                      "ui.panel.config.cloud.register.waiting_for_confirmation"
+                    )}
+                  </span>
+                </div>
+              `
+        }
+      </div>
+      <div class="card-actions split confirm-actions">
+        <ha-button appearance="plain" @click=${this._handleCancelPending}>
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        ${
+          this._autoLoginError
+            ? html`<ha-button
+                appearance="accent"
+                @click=${this._handleSignInInstead}
+              >
+                ${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
+              </ha-button>`
+            : html`<ha-progress-button
+                @click=${this._handleAttemptNow}
+                .progress=${this._attemptInProgress}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.register.clicked_confirm"
+                )}
+              </ha-progress-button>`
+        }
+      </div>
+    `;
+
+    return html`
+      ${this.cardLess ? content : html`<ha-card outlined>${content}</ha-card>`}
+      ${
+        this._autoLoginError
+          ? nothing
+          : html`
+              <p class="footnote">
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.register.nothing_arrived",
+                  {
+                    resend_link: html`<button
+                      class="link"
+                      .disabled=${this._resendInProgress}
+                      @click=${this._handleResendVerifyEmail}
+                    >
+                      ${this.hass.localize(
+                        "ui.panel.config.cloud.register.resend_link"
+                      )}
+                    </button>`,
+                  }
+                )}
+              </p>
+            `
+      }
+    `;
+  }
+
+  private _keyDown(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      this._handleRegister();
+    }
+  }
+
+  private _handleSignInInstead() {
+    const confirming = this._confirming;
+    const fieldValue = this._emailField?.value;
+    fireEvent(this, "cloud-email-changed", {
+      value:
+        fieldValue !== undefined
+          ? fieldValue
+          : this._pendingEmail || this.email || "",
+    });
+    if (confirming) {
+      this._dismiss();
+      fireEvent(this, "cloud-cancel-auto-login");
+    }
+    fireEvent(this, "cloud-sign-in-instead");
+  }
+
+  private _handleCancelPending() {
+    this._dismiss();
+    fireEvent(this, "cloud-cancel-auto-login");
+  }
+
+  private _dismiss() {
+    this._override = "form";
+    this._registeredEmail = "";
+    this._error = undefined;
+    this._success = undefined;
+    this._clearAutoLoginFailure();
+  }
+
+  private _clearAutoLoginFailure() {
+    this._failedKey = null;
+    this._autoLoginError = undefined;
+  }
+
+  private async _handleRegister() {
+    const emailField = this._emailField;
+    const passwordField = this._passwordField;
+
+    if (!emailField || !passwordField) {
+      return;
+    }
+
+    if (!emailField.reportValidity()) {
+      passwordField.reportValidity();
+      emailField.focus();
+      return;
+    }
+
+    if (!passwordField.reportValidity()) {
+      passwordField.focus();
+      return;
+    }
+
+    const email = emailField.value?.toLowerCase() || "";
+    const password = passwordField.value || "";
+
+    this._requestInProgress = true;
+    this._error = undefined;
+
+    try {
+      await cloudRegisterAutoLogin(this.hass, email, password);
+    } catch (err: any) {
+      this._requestInProgress = false;
+      passwordField.value = "";
+      this._error =
+        err?.body?.message || this.hass.localize("ui.common.unknown_error");
+      return;
+    }
+
+    this._registeredEmail = email;
+    this._requestInProgress = false;
+    this._override = "confirm";
+    this._clearAutoLoginFailure();
+    fireEvent(this, "cloud-email-changed", { value: email });
+    fireEvent(this, "cloud-auto-login-started");
+    fireEvent(this, "ha-refresh-cloud-status");
+    await this.updateComplete;
+    this._confirmTitle?.focus();
+  }
+
+  private async _localizeBackendMessage(
+    key: string,
+    domain = "cloud",
+    placeholders?: Record<string, string>
+  ): Promise<string | undefined> {
+    const localize = await this.hass.loadBackendTranslation(
+      "exceptions",
+      domain
+    );
+    return (
+      localize(`component.${domain}.exceptions.${key}.message`, placeholders) ||
+      undefined
+    );
+  }
+
+  private async _websocketErrorMessage(err: any): Promise<string> {
+    if (err?.translation_key) {
+      const message = await this._localizeBackendMessage(
+        err.translation_key,
+        err.translation_domain,
+        err.translation_placeholders
+      );
+      if (message) {
+        return message;
+      }
+    }
+    return err?.message || this.hass.localize("ui.common.unknown_error");
+  }
+
+  private async _resolveAutoLoginError(key: string | null) {
+    if (!key) {
+      this._autoLoginError = undefined;
+      return;
+    }
+
+    let reason: string | undefined;
+    try {
+      reason = await this._localizeBackendMessage(key);
+    } catch (_err) {
+      // The translation load rejects when the socket drops mid-round-trip. The
+      // generic reason still has to land: the status reports this failure once
+      // and nothing else would take the user off the waiting view.
+    }
+
+    if (this._failedKey !== key) {
+      // A newer status superseded this failure while the lookup was in flight.
+      return;
+    }
+
+    this._error = undefined;
+    this._success = undefined;
+    this._autoLoginError =
+      reason ||
+      this.hass.localize("ui.panel.config.cloud.register.auto_login_failed");
+  }
+
+  private async _handleAttemptNow() {
+    if (this._attemptInProgress) {
+      return;
+    }
+    this._attemptInProgress = true;
+
+    try {
+      await attemptCloudAutoLoginNow(this.hass);
+    } catch (err: any) {
+      showToast(this, { message: await this._websocketErrorMessage(err) });
+      return;
+    } finally {
+      this._attemptInProgress = false;
+    }
+
+    showToast(this, {
+      message: {
+        translationKey: "ui.panel.config.cloud.register.checking_confirmation",
+      },
+    });
+  }
+
+  private async _handleResendVerifyEmail() {
+    if (this._resendInProgress) {
+      return;
+    }
+
+    this._error = undefined;
+    this._success = undefined;
+    this._resendInProgress = true;
+
+    try {
+      await resendCloudAutoLoginConfirm(this.hass);
+      this._success = this.hass.localize(
+        "ui.panel.config.cloud.register.verification_email_sent"
+      );
+    } catch (err: any) {
+      this._error = await this._websocketErrorMessage(err);
+    } finally {
+      this._resendInProgress = false;
+    }
+  }
+
+  static get styles() {
+    return [
+      haStyle,
+      cloudSignedOutStyle,
+      css`
+        :host {
+          display: block;
+        }
+        :host([card-less]) .card-header-block,
+        :host([card-less]) .confirm {
+          padding-inline: 0;
+        }
+        :host([card-less]) .card-header-block h1 {
+          margin: 0;
+          text-align: center;
+        }
+        :host([card-less]) .confirm h1 {
+          margin: 0;
+        }
+
+        .card-header-block {
+          padding: var(--ha-space-4) var(--ha-space-4) 0;
+        }
+        .card-header-block p {
+          margin: var(--ha-space-2) 0 0;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+        }
+
+        .register-form {
+          display: flex;
+          flex-direction: column;
+        }
+        .terms {
+          margin: var(--ha-space-2) 0 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+        }
+        .terms a,
+        .footnote a,
+        .footnote button.link {
+          color: var(--primary-color);
+        }
+
+        .card-actions.split {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .card-actions.confirm-actions {
+          border-top: none;
+        }
+
+        .confirm {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          gap: var(--ha-space-3);
+          padding: var(--ha-space-8) var(--ha-space-4) var(--ha-space-5);
+        }
+        .confirm ha-alert {
+          width: 100%;
+          text-align: initial;
+        }
+        .confirm-icon {
+          width: 56px;
+          height: 56px;
+          border-radius: var(--ha-border-radius-pill);
+          background: color-mix(in srgb, var(--info-color) 18%, transparent);
+          color: var(--info-color);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          --mdc-icon-size: 28px;
+        }
+        /* Focused programmatically to announce the view; no visible ring. */
+        #confirm-title:focus {
+          outline: none;
+        }
+        .confirm p {
+          margin: 0;
+          max-width: 420px;
+          color: var(--secondary-text-color);
+          line-height: var(--ha-line-height-normal);
+        }
+        .confirm .email {
+          display: inline-block;
+          max-width: 100%;
+          overflow-wrap: anywhere;
+        }
+        .waiting {
+          display: flex;
+          align-items: center;
+          gap: var(--ha-space-2);
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+        }
+
+        .footnote {
+          display: block;
+          width: 100%;
+          margin: var(--ha-space-3) auto 0;
+          font-size: var(--ha-font-size-s);
+          color: var(--secondary-text-color);
+          text-align: center;
+          text-wrap: pretty;
+        }
+
+        @media (max-width: 500px) {
+          .card-actions.split {
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--ha-space-2);
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-register-card": CloudRegisterCard;
+  }
+
+  interface HASSDomEvents {
+    "cloud-cancel-auto-login": undefined;
+    "cloud-auto-login-started": undefined;
+    "cloud-register-view-changed": { confirming: boolean };
+    "cloud-sign-in-instead": undefined;
+  }
+}

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

@@ -1,32 +1,18 @@
-import { mdiEmailCheckOutline } from "@mdi/js";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
-import "../../../../components/ha-card";
-import "../../../../components/ha-spinner";
-import "../../../../components/ha-svg-icon";
-import "../../../../components/input/ha-input";
-import type { HaInput } from "../../../../components/input/ha-input";
-import type { CloudAutoLogin, CloudStatus } from "../../../../data/cloud";
-import {
-  attemptCloudAutoLoginNow,
-  cloudRegisterAutoLogin,
-  resendCloudAutoLoginConfirm,
-  subscribeCloudEvents,
-} from "../../../../data/cloud";
+import type { CloudStatus } from "../../../../data/cloud";
+import { cloudStatusAutoLogin } from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
 import "../cloud-signed-out-menu";
 import { cloudSignedOutStyle } from "../cloud-signed-out-style";
 import { cloudSubpageStyle } from "../account/cloud-subpage-style";
+import "./cloud-register-card";
 
 const BACK_PATH = "/config/cloud/start";
 
@@ -40,76 +26,15 @@ export class CloudRegister extends LitElement {
 
   @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
-  @state() private _view: "form" | "confirm" = "form";
-
-  @state() private _requestInProgress = false;
-
-  @state() private _resendInProgress = false;
-
-  @state() private _autoLoginError?: string;
-
-  @state() private _error?: string;
-
-  @state() private _success?: string;
-
-  @state() private _registeredEmail = "";
-
-  private _unsubCloudEvents?: Promise<UnsubscribeFunc>;
-
-  @query("#email") private _emailField?: HaInput;
-
-  @query("#password") private _passwordField?: HaInput;
-
-  @query("#confirm-title") private _confirmTitle?: HTMLElement;
-
-  private get _autoLogin(): CloudAutoLogin | null {
-    const status = this.cloudStatus;
-    if (!status || status.logged_in) {
-      return null;
-    }
-    return status.auto_login ?? null;
-  }
-
-  private get _pendingEmail(): string {
-    return this._registeredEmail || this._autoLogin?.email || "";
-  }
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (this._autoLogin) {
-      this._view = "confirm";
-    }
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._stopWatchingAutoLogin();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (this._view !== "confirm") {
-      return;
-    }
-
-    const failedKey = this._autoLogin?.failed;
-    if (failedKey && !this._autoLoginError) {
-      this._failAutoLogin(failedKey);
-      return;
-    }
-
-    this._watchAutoLogin();
-  }
+  @state() private _confirming = false;
 
   protected render(): TemplateResult {
-    const confirming = this._view === "confirm";
     return html`
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         back-path=${BACK_PATH}
-        .backCallback=${confirming ? this._handleConfirmBack : undefined}
+        .backCallback=${this._confirming ? this._handleConfirmBack : undefined}
         .header=${this.hass.localize("ui.panel.config.cloud.register.headline")}
       >
         <cloud-signed-out-menu
@@ -117,406 +42,36 @@ export class CloudRegister extends LitElement {
           .hass=${this.hass}
         ></cloud-signed-out-menu>
         <div class="content">
-          ${confirming ? this._renderConfirm() : this._renderForm()}
+          <cloud-register-card
+            .hass=${this.hass}
+            .email=${this.email}
+            .autoLogin=${cloudStatusAutoLogin(this.cloudStatus)}
+            @cloud-register-view-changed=${this._viewChanged}
+            @cloud-sign-in-instead=${this._handleSignInInstead}
+          ></cloud-register-card>
         </div>
       </hass-subpage>
     `;
   }
 
-  private _renderForm(): TemplateResult {
-    return html`
-      <ha-card outlined>
-        <div class="card-header-block">
-          <h2>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.register.create_account"
-            )}
-          </h2>
-          <p>
-            ${this.hass.localize("ui.panel.config.cloud.register.information")}
-          </p>
-        </div>
-        <div class="card-content register-form">
-          ${
-            this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing
-          }
-          <ha-input
-            autofocus
-            id="email"
-            name="email"
-            .label=${this.hass.localize(
-              "ui.panel.config.cloud.register.email_address"
-            )}
-            type="email"
-            autocomplete="email"
-            required
-            .value=${this.email ?? ""}
-            .disabled=${this._requestInProgress}
-            @keydown=${this._keyDown}
-            .validationMessage=${this.hass.localize(
-              "ui.panel.config.cloud.register.email_error_msg"
-            )}
-          ></ha-input>
-          <ha-input
-            id="password"
-            type="password"
-            password-toggle
-            name="password"
-            .label=${this.hass.localize(
-              "ui.panel.config.cloud.register.password"
-            )}
-            autocomplete="new-password"
-            minlength="8"
-            required
-            .disabled=${this._requestInProgress}
-            @keydown=${this._keyDown}
-            .validationMessage=${this.hass.localize(
-              "ui.panel.config.cloud.register.password_error_msg"
-            )}
-          ></ha-input>
-          <p class="terms">
-            ${this.hass.localize(
-              "ui.panel.config.cloud.register.terms_notice",
-              {
-                terms: html`<a
-                  href="https://www.nabucasa.com/tos/"
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.register.link_terms_conditions"
-                  )}</a
-                >`,
-                privacy_policy: html`<a
-                  href="https://www.nabucasa.com/privacy_policy/"
-                  target="_blank"
-                  rel="noreferrer"
-                  >${this.hass.localize(
-                    "ui.panel.config.cloud.register.link_privacy_policy"
-                  )}</a
-                >`,
-              }
-            )}
-          </p>
-        </div>
-        <div class="card-actions split">
-          <ha-button
-            appearance="plain"
-            .disabled=${this._requestInProgress}
-            @click=${this._handleSignInInstead}
-          >
-            ${this.hass.localize(
-              "ui.panel.config.cloud.register.sign_in_instead"
-            )}
-          </ha-button>
-          <ha-progress-button
-            @click=${this._handleRegister}
-            .progress=${this._requestInProgress}
-            >${this.hass.localize(
-              "ui.panel.config.cloud.register.start_trial"
-            )}</ha-progress-button
-          >
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderConfirm(): TemplateResult {
-    return html`
-      <ha-card outlined>
-        <div class="card-content confirm">
-          ${
-            this._autoLoginError
-              ? html`<ha-alert alert-type="error">
-                  ${this._autoLoginError}
-                </ha-alert>`
-              : nothing
-          }
-          ${
-            this._error
-              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-              : nothing
-          }
-          ${
-            this._success
-              ? html`<ha-alert alert-type="success">${this._success}</ha-alert>`
-              : nothing
-          }
-          <div class="confirm-icon">
-            <ha-svg-icon .path=${mdiEmailCheckOutline}></ha-svg-icon>
-          </div>
-          <h2 id="confirm-title" tabindex="-1">
-            ${this.hass.localize(
-              "ui.panel.config.cloud.register.check_your_email"
-            )}
-          </h2>
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.register.confirm_email_body",
-              {
-                email: html`<span class="email">${this._pendingEmail}</span>`,
-              }
-            )}
-          </p>
-          ${
-            this._autoLoginError
-              ? nothing
-              : html`
-                  <div class="waiting">
-                    <ha-spinner size="tiny"></ha-spinner>
-                    <span>
-                      ${this.hass.localize(
-                        "ui.panel.config.cloud.register.waiting_for_confirmation"
-                      )}
-                    </span>
-                  </div>
-                `
-          }
-        </div>
-        <div class="card-actions split confirm-actions">
-          <ha-button appearance="plain" @click=${this._handleCancelPending}>
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          ${
-            this._autoLoginError
-              ? html`<ha-button
-                  appearance="accent"
-                  @click=${this._handleSignInInstead}
-                >
-                  ${this.hass.localize("ui.panel.config.cloud.login.sign_in")}
-                </ha-button>`
-              : html`<ha-button
-                  appearance="accent"
-                  @click=${this._handleAttemptNow}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.register.clicked_confirm"
-                  )}
-                </ha-button>`
-          }
-        </div>
-      </ha-card>
-      ${
-        this._autoLoginError
-          ? nothing
-          : html`
-              <p class="footnote">
-                ${this.hass.localize(
-                  "ui.panel.config.cloud.register.nothing_arrived",
-                  {
-                    resend_link: html`<button
-                      class="link"
-                      .disabled=${this._resendInProgress}
-                      @click=${this._handleResendVerifyEmail}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.cloud.register.resend_link"
-                      )}
-                    </button>`,
-                  }
-                )}
-              </p>
-            `
-      }
-    `;
-  }
-
-  private _keyDown(ev: KeyboardEvent) {
-    if (ev.key === "Enter") {
-      this._handleRegister();
-    }
+  private _viewChanged(
+    ev: HASSDomEvent<HASSDomEvents["cloud-register-view-changed"]>
+  ) {
+    this._confirming = ev.detail.confirming;
   }
 
   private _handleSignInInstead() {
-    const confirming = this._view === "confirm";
-    fireEvent(this, "cloud-email-changed", {
-      // The field wins on the form: it holds whatever was typed after a cancel.
-      value: this._emailField?.value || this._pendingEmail || this.email || "",
-    });
-    this._stopWatchingAutoLogin();
-    if (confirming) {
-      fireEvent(this, "cloud-cancel-auto-login");
-    }
     // Replaces only from the waiting view, whose registration is being
     // cancelled: browser-back must not return to it. The form is a page worth
     // going back to.
-    navigate("/config/cloud/login", { replace: confirming });
+    navigate("/config/cloud/login", { replace: this._confirming });
   }
 
   private _handleConfirmBack = () => {
-    this._stopWatchingAutoLogin();
     fireEvent(this, "cloud-cancel-auto-login");
     navigate(BACK_PATH, { replace: true });
   };
 
-  private _handleCancelPending() {
-    this._resetToForm();
-    fireEvent(this, "cloud-cancel-auto-login");
-  }
-
-  private _resetToForm() {
-    this._stopWatchingAutoLogin();
-    this._view = "form";
-    this._autoLoginError = undefined;
-    this._registeredEmail = "";
-    this._error = undefined;
-    this._success = undefined;
-  }
-
-  private async _handleRegister() {
-    const emailField = this._emailField;
-    const passwordField = this._passwordField;
-
-    if (!emailField || !passwordField) {
-      return;
-    }
-
-    if (!emailField.reportValidity()) {
-      passwordField.reportValidity();
-      emailField.focus();
-      return;
-    }
-
-    if (!passwordField.reportValidity()) {
-      passwordField.focus();
-      return;
-    }
-
-    const email = emailField.value?.toLowerCase() || "";
-    const password = passwordField.value || "";
-
-    this._requestInProgress = true;
-    this._error = undefined;
-
-    try {
-      await cloudRegisterAutoLogin(this.hass, email, password);
-    } catch (err: any) {
-      this._requestInProgress = false;
-      passwordField.value = "";
-      this._error =
-        err?.body?.message || this.hass.localize("ui.common.unknown_error");
-      return;
-    }
-
-    this._registeredEmail = email;
-    this._requestInProgress = false;
-    this._view = "confirm";
-    this._autoLoginError = undefined;
-    fireEvent(this, "cloud-email-changed", { value: email });
-    fireEvent(this, "cloud-auto-login-started");
-    fireEvent(this, "ha-refresh-cloud-status");
-    this._watchAutoLogin();
-    await this.updateComplete;
-    this._confirmTitle?.focus();
-  }
-
-  private _watchAutoLogin() {
-    if (this._unsubCloudEvents || this._autoLoginError) {
-      return;
-    }
-
-    const subscription = subscribeCloudEvents(this.hass, (event) => {
-      if (event.type === "login") {
-        fireEvent(this, "ha-refresh-cloud-status");
-      } else if (event.type === "auto_login_failed") {
-        this._failAutoLogin(event.translation_key);
-      } else if (event.type === "auto_login_cancelled") {
-        this._resetToForm();
-        fireEvent(this, "ha-refresh-cloud-status");
-      }
-    });
-    this._unsubCloudEvents = subscription;
-
-    subscription.catch(() => {
-      if (this._unsubCloudEvents === subscription) {
-        this._unsubCloudEvents = undefined;
-      }
-    });
-  }
-
-  private async _localizeBackendMessage(
-    key: string,
-    domain = "cloud"
-  ): Promise<string | undefined> {
-    const localize = await this.hass.loadBackendTranslation(
-      "exceptions",
-      domain
-    );
-    return (
-      localize(`component.${domain}.exceptions.${key}.message`) || undefined
-    );
-  }
-
-  private async _websocketErrorMessage(err: any): Promise<string> {
-    if (err?.translation_key) {
-      const message = await this._localizeBackendMessage(
-        err.translation_key,
-        err.translation_domain
-      );
-      if (message) {
-        return message;
-      }
-    }
-    return err?.message || this.hass.localize("ui.common.unknown_error");
-  }
-
-  private async _failAutoLogin(translationKey?: string | null) {
-    this._stopWatchingAutoLogin();
-    const reason = translationKey
-      ? await this._localizeBackendMessage(translationKey)
-      : undefined;
-    this._error = undefined;
-    this._success = undefined;
-    this._autoLoginError =
-      reason ||
-      this.hass.localize("ui.panel.config.cloud.register.auto_login_failed");
-    fireEvent(this, "ha-refresh-cloud-status");
-  }
-
-  private _stopWatchingAutoLogin() {
-    this._unsubCloudEvents?.then((unsub) => unsub()).catch(() => undefined);
-    this._unsubCloudEvents = undefined;
-  }
-
-  private async _handleAttemptNow() {
-    this._watchAutoLogin();
-
-    try {
-      await attemptCloudAutoLoginNow(this.hass);
-    } catch (err: any) {
-      showToast(this, { message: await this._websocketErrorMessage(err) });
-      return;
-    }
-
-    showToast(this, {
-      message: {
-        translationKey: "ui.panel.config.cloud.register.checking_confirmation",
-      },
-    });
-  }
-
-  private async _handleResendVerifyEmail() {
-    if (this._resendInProgress) {
-      return;
-    }
-
-    this._error = undefined;
-    this._success = undefined;
-    this._resendInProgress = true;
-
-    try {
-      await resendCloudAutoLoginConfirm(this.hass);
-      this._success = this.hass.localize(
-        "ui.panel.config.cloud.register.verification_email_sent"
-      );
-    } catch (err: any) {
-      this._error = await this._websocketErrorMessage(err);
-    } finally {
-      this._resendInProgress = false;
-    }
-  }
-
   static get styles() {
     return [
       haStyle,
@@ -526,106 +81,10 @@ export class CloudRegister extends LitElement {
         .content {
           gap: var(--ha-space-3);
         }
-
-        .card-header-block {
-          padding: var(--ha-space-4) var(--ha-space-4) 0;
-        }
-        .card-header-block p {
-          margin: var(--ha-space-2) 0 0;
-          color: var(--secondary-text-color);
-          line-height: var(--ha-line-height-normal);
-        }
-
-        .register-form {
-          display: flex;
-          flex-direction: column;
-        }
-        .terms {
-          margin: var(--ha-space-2) 0 0;
-          font-size: var(--ha-font-size-s);
-          color: var(--secondary-text-color);
-          line-height: var(--ha-line-height-normal);
-        }
-        .terms a,
-        .footnote a,
-        .footnote button.link {
-          color: var(--primary-color);
-        }
-
-        .card-actions.split {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .card-actions.confirm-actions {
-          border-top: none;
-        }
-
-        .confirm {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          gap: var(--ha-space-3);
-          padding: var(--ha-space-8) var(--ha-space-4) var(--ha-space-5);
-        }
-        .confirm ha-alert {
-          width: 100%;
-          text-align: initial;
-        }
-        .confirm-icon {
-          width: 56px;
-          height: 56px;
-          border-radius: var(--ha-border-radius-pill);
-          background: color-mix(in srgb, var(--info-color) 18%, transparent);
-          color: var(--info-color);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          --mdc-icon-size: 28px;
-        }
-        /* Focused programmatically to announce the view; no visible ring. */
-        #confirm-title:focus {
-          outline: none;
-        }
-        .confirm p {
-          margin: 0;
-          max-width: 420px;
-          color: var(--secondary-text-color);
-          line-height: var(--ha-line-height-normal);
-        }
-        .confirm .email {
-          display: inline-block;
-          max-width: 100%;
-          overflow-wrap: anywhere;
-        }
-        .waiting {
-          display: flex;
-          align-items: center;
-          gap: var(--ha-space-2);
-          font-size: var(--ha-font-size-s);
-          color: var(--secondary-text-color);
-        }
-
-        .footnote {
-          display: block;
+        cloud-register-card {
           width: 100%;
           max-width: 600px;
-          margin: 0 auto;
-          font-size: var(--ha-font-size-s);
-          color: var(--secondary-text-color);
-          text-align: center;
-          text-wrap: pretty;
-        }
-
-        /* Not column-reverse: that paints the buttons against DOM order, so
-           keyboard and screen-reader users reach them back to front. */
-        @media (max-width: 500px) {
-          .card-actions.split {
-            flex-direction: column;
-            align-items: stretch;
-            gap: var(--ha-space-2);
-          }
+          margin-inline: auto;
         }
       `,
     ];
@@ -636,9 +95,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "cloud-register": CloudRegister;
   }
-
-  interface HASSDomEvents {
-    "cloud-cancel-auto-login": undefined;
-    "cloud-auto-login-started": undefined;
-  }
 }

src/panels/config/config-sections.ts

@@ -1,4 +1,5 @@
 import {
+  mdiAccessPointNetwork,
   mdiAccount,
   mdiBackupRestore,
   mdiBadgeAccountHorizontal,
@@ -92,13 +93,6 @@ export const configSections: Record<string, PageNavigation[]> = {
       component: "lovelace",
       adminOnly: true,
     },
-    {
-      path: "/config/voice-assistants",
-      translationKey: "voice_assistants",
-      iconPath: mdiMicrophone,
-      iconColor: "#3263C3",
-      adminOnly: true,
-    },
   ],
   dashboard_external_settings: [
     {
@@ -109,6 +103,23 @@ export const configSections: Record<string, PageNavigation[]> = {
     },
   ],
   dashboard_2: [
+    {
+      path: "/config/connectivity",
+      translationKey: "connectivity",
+      iconPath: mdiAccessPointNetwork,
+      iconColor: "#00838F",
+      core: true,
+      adminOnly: true,
+    },
+    {
+      path: "/config/voice-assistants",
+      translationKey: "voice_assistants",
+      iconPath: mdiMicrophone,
+      iconColor: "#3263C3",
+      adminOnly: true,
+    },
+  ],
+  connectivity: [
     {
       path: "/config/matter",
       iconPath:

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

@@ -0,0 +1,80 @@
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-card";
+import "../../../layouts/hass-subpage";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { configSections } from "../config-sections";
+import "../dashboard/ha-config-navigation";
+import "../ha-config-section";
+
+@customElement("ha-config-connectivity")
+class HaConfigConnectivity extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
+
+  protected render(): TemplateResult {
+    const title = this.hass.localize(
+      "ui.panel.config.dashboard.connectivity.main"
+    );
+
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        back-path="/config"
+        .header=${title}
+        .narrow=${this.narrow}
+      >
+        <ha-config-section .isWide=${this.isWide} full-width>
+          <ha-card outlined>
+            <ha-config-navigation
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .pages=${configSections.connectivity}
+              .label=${title}
+            ></ha-config-navigation>
+          </ha-card>
+        </ha-config-section>
+      </hass-subpage>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        ha-config-section {
+          margin: auto;
+          margin-top: -32px;
+          max-width: 600px;
+        }
+
+        ha-card {
+          overflow: hidden;
+          margin-bottom: max(24px, var(--safe-area-inset-bottom));
+        }
+
+        @media all and (max-width: 600px) {
+          ha-card {
+            border-width: 1px 0;
+            border-radius: var(--ha-border-radius-square);
+            box-shadow: unset;
+          }
+          ha-config-section {
+            margin-top: -42px;
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-connectivity": HaConfigConnectivity;
+  }
+}

src/panels/config/core/ha-config-system-navigation.ts

@@ -28,7 +28,7 @@ import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import "../components/ha-config-navigation-list";
+import "../../../components/ha-config-navigation-list";
 import "../ha-config-section";
 import { configSections } from "../config-sections";
 

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

@@ -14,7 +14,7 @@ import {
   type RegisterChildPanelReady,
 } from "../../../layouts/panel-ready";
 import type { HomeAssistant } from "../../../types";
-import "../components/ha-config-navigation-list";
+import "../../../components/ha-config-navigation-list";
 
 @customElement("ha-config-navigation")
 class HaConfigNavigation extends LitElement {
@@ -24,6 +24,8 @@ class HaConfigNavigation extends LitElement {
 
   @property({ attribute: false }) public pages!: PageNavigation[];
 
+  @property() public label?: string;
+
   @state() private _visiblePages?: PageNavigation[];
 
   private _hasBluetoothConfigEntries = false;
@@ -99,16 +101,15 @@ class HaConfigNavigation extends LitElement {
                 }
               `,
     }));
+    const label = this.label ?? this.hass.localize("panel.config");
     return html`
-      <div class="visually-hidden" role="heading" aria-level="2">
-        ${this.hass.localize("panel.config")}
-      </div>
+      <div class="visually-hidden" role="heading" aria-level="2">${label}</div>
       <ha-config-navigation-list
         has-secondary
         .hass=${this.hass}
         .narrow=${this.narrow}
         .pages=${pages}
-        .label=${this.hass.localize("panel.config")}
+        .label=${label}
       ></ha-config-navigation-list>
     `;
   }