Bumped version to 20261028.4

* Give picker section filter chips a descriptive aria-label

Screen readers announced the section chips in quick search and the
target picker only by their visible text (e.g. "Navigate"), which gives
no hint that the button filters the results. Label them as
"Filter: <section>" instead.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_018Kv7eFvrHAAoLcdEeqDAUg

* Fix fallback for section label localization in ha-picker-combo-box

---------

Co-authored-by: Claude <[email protected]>

build-scripts/bundle.cjs

@@ -284,6 +284,7 @@ module.exports.config = {
       name: "demo" + nameSuffix(latestBuild),
       entry: {
         main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
+        embed: path.resolve(paths.demo_dir, "src/embed/entrypoint.ts"),
         ...module.exports.mapWorkerEntry(),
       },
       outputPath: outputPath(paths.demo_output_root, latestBuild),
@@ -291,6 +292,8 @@ module.exports.config = {
       defineOverlay: {
         __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
         __DEMO__: true,
+        // The embed sets the global to load static files from its own server.
+        __STATIC_PATH__: '(globalThis.__HA_STATIC_PATH__ || "/static/")',
       },
       isProdBuild,
       latestBuild,

build-scripts/gulp/entry-html.js

@@ -232,7 +232,11 @@ gulp.task(
   )
 );
 
-const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
+const DEMO_PAGE_ENTRIES = {
+  "index.html": ["main"],
+  "components.html": ["embed"],
+  "embed.js": ["embed"],
+};
 
 gulp.task(
   "gen-pages-demo-dev",

build-scripts/rspack.cjs

@@ -214,16 +214,18 @@ const createRspackConfig = ({
           },
         },
         {
-          // MapLibre's worker loads ESM plugins through `import(url)`, and the
-          // page side builds a blob import from `new URL(url, import.meta.url)`
-          // for a cross-origin worker. Neither path is taken here: the RTL
-          // plugin is UMD and the worker is served from the page's origin.
-          // Rspack's stubs for these fully dynamic requests are exactly what
-          // should remain - rejecting, and free of syntax the legacy floor
-          // cannot parse - so the warnings about them are noise.
+          // MapLibre's worker loads ESM plugins through `import(url)`, which
+          // is never taken here: the RTL plugin is UMD. Rspack's stub for that
+          // fully dynamic request is exactly what should remain - rejecting,
+          // and free of syntax the legacy floor cannot parse - so the warning
+          // about it is noise. The page side builds a blob import from
+          // `new URL(url, import.meta.url)` for a worker on another origin,
+          // as in the demo embed. That is a URL, not an asset to bundle, and
+          // the worker URL is absolute, so leave it as it is.
           test: /[\\/]maplibre-gl[\\/]dist[\\/]maplibre-gl(?:-worker)?\.mjs$/,
           parser: {
             exprContextCritical: false,
+            url: false,
           },
         },
         {
@@ -246,7 +248,15 @@ const createRspackConfig = ({
                 },
               ],
         },
-      ],
+        // The demo embed reads its own URL at runtime to find its files.
+        // Keep import.meta.url instead of replacing it with the source path.
+        // Development builds wrap modules in eval(), which rejects import.meta.
+        latestBuild &&
+          isProdBuild && {
+            test: path.resolve(paths.demo_dir, "src/embed/public-path.ts"),
+            parser: { importMeta: false },
+          },
+      ].filter(Boolean),
     },
     optimization: {
       minimizer: [

demo/public/_headers

@@ -16,3 +16,10 @@
 
 /frontend_latest/*
   Cache-Control: public, max-age: 604800, s-maxage=604800
+  Access-Control-Allow-Origin: *
+
+/embed.js
+  Access-Control-Allow-Origin: *
+
+/static/*
+  Access-Control-Allow-Origin: *

demo/src/embed/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from "@lit/context";
+import type { HomeAssistant } from "../../../src/types";
+
+export const embedHassContext = createContext<HomeAssistant>("embedHass");

demo/src/embed/entrypoint.ts

@@ -0,0 +1,25 @@
+import "./public-path";
+import "./workers";
+// The provider must be defined first. Custom elements upgrade in the order
+// they are defined, and cards need a provider to request their context from.
+import "./ha-embed-provider";
+import "./ha-embed-card";
+// For custom cards, which can't load them themselves. The built-in cards only
+// load ha-list-item-button with the map card. The full app loads ha-select
+// with the more info dialog.
+import "../../../src/components/item/ha-list-item-button";
+import "../../../src/components/ha-select";
+import { fontStyles } from "../../../src/resources/roboto";
+
+// Font faces only work in the document, not in the shadow root of the card.
+// Defining Roboto does not change the page unless it already uses Roboto.
+document.head.append(
+  Object.assign(document.createElement("style"), {
+    textContent: fontStyles.cssText,
+  })
+);
+
+// Custom cards use the helpers to create built-in cards. The dashboard panel
+// sets the same global in the full app.
+(window as any).loadCardHelpers = () =>
+  import("../../../src/panels/lovelace/custom-card-helpers");

demo/src/embed/ha-embed-card.ts

@@ -0,0 +1,218 @@
+import { ContextEvent } from "@lit/context";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { createRef, ref } from "lit/directives/ref";
+import { consume } from "../../../src/common/decorators/consume";
+import { computeRTLDirection } from "../../../src/common/util/compute_rtl";
+import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
+import { handleAction } from "../../../src/panels/lovelace/common/handle-action";
+import { computeCardGridSize } from "../../../src/panels/lovelace/common/compute-card-grid-size";
+import "../../../src/panels/lovelace/cards/hui-card";
+import type { HuiCard } from "../../../src/panels/lovelace/cards/hui-card";
+import type { HomeAssistant } from "../../../src/types";
+import { embedHassContext } from "./context";
+import { readScriptData } from "./script-data";
+import { embedThemeStyles } from "./theme-styles";
+
+const pageProvider = (): HTMLElement =>
+  document.querySelector("ha-embed-provider") ??
+  document.body.appendChild(document.createElement("ha-embed-provider"));
+
+// Looks past shadow roots, so a card inside another component still finds
+// the provider around that component.
+const insideProvider = (element: Element): boolean => {
+  let current: Element | null = element;
+
+  while (current) {
+    if (current.closest("ha-embed-provider")) {
+      return true;
+    }
+
+    const root = current.getRootNode();
+    current = root instanceof ShadowRoot ? root.host : null;
+  }
+
+  return false;
+};
+
+/**
+ * Renders a Lovelace card. The card uses the provider with the ID in
+ * `provider`, else the closest provider around it, else the first provider on
+ * the page. If the page has no provider, the card adds an empty one.
+ *
+ * The card takes the columns and rows it would take in a section, so cards
+ * in an element with `display: grid` and 12 columns lay out like a section.
+ * It also sets `--column-size` and `--row-size` on itself.
+ */
+@customElement("ha-embed-card")
+export class HaEmbedCard extends LitElement {
+  /**
+   * The card configuration. Also read from a JSON or YAML script child, see
+   * `readScriptData`.
+   */
+  @property({ type: Object }) public config?: LovelaceCardConfig;
+
+  /** The ID of the `ha-embed-provider` to use. */
+  @property() public provider?: string;
+
+  @state()
+  @consume({ context: embedHassContext, subscribe: true })
+  private _hass?: HomeAssistant;
+
+  // A provider that is not an ancestor, which gets the context requests of the
+  // card and its content. Context requests only reach ancestors by themselves.
+  private _linkedProvider?: HTMLElement;
+
+  private _scriptRead = false;
+
+  private _card = createRef<HuiCard>();
+
+  constructor() {
+    super();
+    this.addEventListener("context-request", (ev) => {
+      if (!this._linkedProvider) {
+        return;
+      }
+      ev.stopPropagation();
+      this._linkedProvider.dispatchEvent(
+        new ContextEvent(
+          ev.context,
+          ev.contextTarget,
+          ev.callback,
+          ev.subscribe
+        )
+      );
+    });
+    // Cards fire their tap, hold and double tap actions for the app to handle
+    this.addEventListener("hass-action", (ev) => {
+      if (this._hass) {
+        // The element that fired the action, so that fire-dom-event reaches
+        // listeners inside custom cards, as in action-mixin
+        const node = (ev.composedPath()[0] as HTMLElement | undefined) ?? this;
+        handleAction(node, this._hass, ev.detail.config, ev.detail.action);
+      }
+    });
+  }
+
+  public connectedCallback() {
+    // Before super.connectedCallback(), which sends the context requests.
+    this._linkedProvider = this.provider
+      ? (document.getElementById(this.provider) ?? undefined)
+      : insideProvider(this)
+        ? undefined
+        : pageProvider();
+    super.connectedCallback();
+
+    // Only once, so that moving the card keeps a config set since
+    if (this._scriptRead) {
+      return;
+    }
+
+    this._scriptRead = true;
+
+    const config = readScriptData(this) as LovelaceCardConfig | undefined;
+    if (config) {
+      this.config = config;
+    }
+  }
+
+  protected render() {
+    if (!this._hass || !this.config) {
+      return nothing;
+    }
+    return html`<div
+      class=${classMap({ theme: true, dark: this._hass.themes.darkMode })}
+      dir=${computeRTLDirection(this._hass)}
+    >
+      <hui-card
+        ${ref(this._card)}
+        .hass=${this._hass}
+        .config=${this.config}
+        .layout=${"grid"}
+        @card-updated=${this._updateSize}
+        @card-visibility-changed=${this._updateSize}
+      ></hui-card>
+    </div>`;
+  }
+
+  protected updated() {
+    // The card element only exists once hui-card has updated
+    this._card.value?.updateComplete.then(() => this._updateSize());
+  }
+
+  // The size the card gets in a section, set on the host so that the page can
+  // lay out cards in a grid of 12 columns, like a section
+  private _updateSize = () => {
+    const card = this._card.value;
+    if (!card) {
+      return;
+    }
+    const { rows, columns } = computeCardGridSize(card.getGridOptions());
+    this.hidden = card.hidden;
+    this.toggleAttribute("full-width", columns === "full");
+    this.toggleAttribute("fit-rows", typeof rows === "number");
+    this.style.setProperty(
+      "--column-size",
+      typeof columns === "number" ? String(columns) : null
+    );
+    this.style.setProperty(
+      "--row-size",
+      typeof rows === "number" ? String(rows) : null
+    );
+  };
+
+  static styles = [
+    embedThemeStyles,
+    css`
+      /* The sizes of a card in a section, see hui-grid-section */
+      :host {
+        --row-gap: var(--ha-section-grid-row-gap, 8px);
+        --row-height: var(--ha-section-grid-row-height, 56px);
+        display: block;
+        grid-row: span var(--row-size, 1);
+        grid-column: span min(var(--column-size, 12), 12);
+      }
+      :host([full-width]) {
+        grid-column: 1 / -1;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      :host([fit-rows]) .theme {
+        height: calc(
+          (var(--row-size, 1) * (var(--row-height) + var(--row-gap))) - var(
+              --row-gap
+            )
+        );
+      }
+      /* The text styles the app sets on html and body, so that the card does
+         not inherit the text styles of the page that embeds it. */
+      .theme {
+        color: var(--primary-text-color);
+        font-family: var(--ha-font-family-body);
+        font-size: var(--ha-font-size-m);
+        font-weight: var(--ha-font-weight-body);
+        line-height: normal;
+        letter-spacing: normal;
+        text-align: start;
+        -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+        -webkit-font-smoothing: var(--ha-font-smoothing);
+      }
+      /* What setDirectionStyles sets on the app for a right-to-left language,
+         here only for the card */
+      .theme[dir="rtl"] {
+        --direction: rtl;
+        --float-start: right;
+        --float-end: left;
+        --scale-direction: -1;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-embed-card": HaEmbedCard;
+  }
+}

demo/src/embed/ha-embed-provider.ts

@@ -0,0 +1,293 @@
+import { ContextProvider, provide } from "@lit/context";
+import type { HassEntities } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { listenMediaQuery } from "../../../src/common/dom/media_query";
+import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
+import type { CalendarEventApiData } from "../../../src/data/calendar";
+import { reducedMotionContext } from "../../../src/data/context";
+import type { EnergyInfo, EnergyPreferences } from "../../../src/data/energy";
+import { EMPTY_PREFERENCES } from "../../../src/data/energy";
+import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import type { EntityInput } from "../../../src/fake_data/entities/types";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { DemoArea } from "../stubs/area_registry";
+import { toAreaRegistryEntry } from "../stubs/area_registry";
+import { mockAuth } from "../stubs/auth";
+import {
+  FAMILY_EVENTS,
+  mockCalendarEvents,
+  WORK_EVENTS,
+} from "../stubs/calendar";
+import { extEntry, newEntry } from "../stubs/entity_registry";
+import { mockHistory } from "../stubs/history";
+import { mockIcons } from "../stubs/icons";
+import { mockLogbook } from "../stubs/logbook";
+import { mockMediaPlayer } from "../stubs/media_player";
+import { mockRecorder } from "../stubs/recorder";
+import { mockSensor } from "../stubs/sensor";
+import { mockExtractFromTarget } from "../stubs/target";
+import { mockTemplate } from "../stubs/template";
+import { mockTodo } from "../stubs/todo";
+import { mockWeather } from "../stubs/weather";
+import { embedHassContext } from "./context";
+import { readScriptData } from "./script-data";
+
+/** The data of a provider, as set by its script child. */
+interface EmbedProviderData {
+  entities?: EntityInput[];
+  areas?: DemoArea[];
+  calendars?: Record<string, CalendarEventApiData[]>;
+  energy?: Partial<EnergyPreferences>;
+}
+
+const SAMPLE_CALENDAR_EVENTS = [FAMILY_EVENTS, WORK_EVENTS];
+
+// "living_room" becomes "Living room"
+const areaName = (areaId: string) => {
+  const name = areaId.replaceAll("_", " ");
+
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+/**
+ * Holds a mocked Home Assistant backend for all `ha-embed-card` elements
+ * inside it. Cards in the same provider share their entities.
+ */
+@customElement("ha-embed-provider")
+export class HaEmbedProvider extends LitElement {
+  @provide({ context: embedHassContext })
+  @property({ attribute: false })
+  public hass!: MockHomeAssistant;
+
+  /**
+   * All entities of the backend. Each change replaces all entities.
+   * Also read from a JSON or YAML script child, see `readScriptData`. The
+   * script holds either the list of entities or an object with `entities`,
+   * `areas`, `calendars` and `energy`.
+   */
+  @property({ type: Array }) public entities: EntityInput[] = [];
+
+  /** All areas. Without them, an area for each `area_id` of the entities. */
+  @property({ attribute: false }) public areas?: DemoArea[];
+
+  /**
+   * Events of calendar entities by entity ID. Calendars without events here
+   * get sample events around today.
+   */
+  @property({ attribute: false }) public calendars?: Record<
+    string,
+    CalendarEventApiData[]
+  >;
+
+  /** Energy preferences. Without them, energy is not set up. */
+  @property({ attribute: false }) public energy?: Partial<EnergyPreferences>;
+
+  /** Light or dark mode of the cards. Without it, the browser setting. */
+  @property({ attribute: "color-scheme" }) public colorScheme?:
+    "light" | "dark";
+
+  private _reducedMotion = new ContextProvider(this, {
+    context: reducedMotionContext,
+    initialValue: false,
+  });
+
+  private _prefersDark = matchMedia("(prefers-color-scheme: dark)").matches;
+
+  private _unsubMediaQueries: (() => void)[] = [];
+
+  private _scriptRead = false;
+
+  private _applyColorScheme() {
+    const dark = this.colorScheme
+      ? this.colorScheme === "dark"
+      : this._prefersDark;
+    if (this.hass.themes.darkMode !== dark) {
+      this.hass.updateHass({
+        themes: { ...this.hass.themes, darkMode: dark },
+        selectedTheme: { ...this.hass.selectedTheme!, dark },
+      });
+    }
+  }
+
+  constructor() {
+    super();
+    // Set up in the constructor so that the contexts exist before the
+    // child cards connect and request them.
+    const hass = provideHass(this);
+    hass.updateTranslations(null);
+    hass.updateTranslations("lovelace");
+    mockIcons(hass);
+    mockAuth(hass);
+    mockHistory(hass);
+    mockRecorder(hass);
+    mockTemplate(hass);
+    mockSensor(hass);
+    mockMediaPlayer(hass);
+    mockTodo(hass);
+    mockWeather(hass);
+    mockLogbook(hass);
+    hass.updateHass({
+      config: {
+        ...hass.config,
+        components: [...hass.config.components, "logbook"],
+      },
+    });
+    mockCalendarEvents(hass, (entityId, currentHass) => {
+      if (!(entityId in currentHass.states)) {
+        return null;
+      }
+
+      const calendarIds = Object.keys(currentHass.states).filter((id) =>
+        id.startsWith("calendar.")
+      );
+
+      return (
+        this.calendars?.[entityId] ??
+        SAMPLE_CALENDAR_EVENTS[
+          calendarIds.indexOf(entityId) % SAMPLE_CALENDAR_EVENTS.length
+        ]
+      );
+    });
+    hass.mockWS("config/area_registry/list", (_msg, currentHass) =>
+      Object.values(currentHass.areas)
+    );
+    // The registry of the entities, without settings such as calendar colors
+    const registryEntries = (currentHass: MockHomeAssistant) =>
+      Object.values(currentHass.entities).map(
+        (entity): EntityRegistryEntry => ({
+          ...newEntry({
+            entity_id: entity.entity_id,
+            platform: entity.platform ?? "demo",
+            unique_id: entity.entity_id,
+          }),
+          area_id: entity.area_id ?? null,
+          device_id: entity.device_id ?? null,
+        })
+      );
+    hass.mockWS("config/entity_registry/list", (_msg, currentHass) =>
+      registryEntries(currentHass)
+    );
+    hass.mockWS(
+      "config/entity_registry/get",
+      (msg: { entity_id: string }, currentHass: MockHomeAssistant) => {
+        const entry = registryEntries(currentHass).find(
+          (item) => item.entity_id === msg.entity_id
+        );
+        if (!entry) {
+          throw new Error(`Entity not found: ${msg.entity_id}`);
+        }
+        return extEntry(entry);
+      }
+    );
+    mockExtractFromTarget(hass);
+    hass.mockWS("energy/get_prefs", (): EnergyPreferences => ({
+      ...EMPTY_PREFERENCES,
+      ...this.energy,
+    }));
+    hass.mockWS("energy/info", (): EnergyInfo => ({
+      cost_sensors: {},
+      solar_forecast_domains: [],
+    }));
+    this._applyColorScheme();
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._unsubMediaQueries = [
+      listenMediaQuery("(prefers-color-scheme: dark)", (matches) => {
+        this._prefersDark = matches;
+        this._applyColorScheme();
+      }),
+      listenMediaQuery("(prefers-reduced-motion: reduce)", (matches) =>
+        this._reducedMotion.setValue(matches)
+      ),
+    ];
+
+    // Only once, so that moving the provider keeps the current entities
+    if (this._scriptRead) {
+      return;
+    }
+
+    this._scriptRead = true;
+
+    const data = readScriptData(this) as
+      EntityInput[] | EmbedProviderData | undefined;
+
+    if (Array.isArray(data)) {
+      this.entities = data;
+    } else if (data) {
+      this.entities = data.entities ?? [];
+      this.areas = data.areas;
+      this.calendars = data.calendars;
+      this.energy = data.energy;
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubMediaQueries.forEach((unsub) => unsub());
+    this._unsubMediaQueries = [];
+  }
+
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    if (changedProps.has("colorScheme")) {
+      this._applyColorScheme();
+    }
+
+    if (changedProps.has("entities") || changedProps.has("areas")) {
+      const areas: DemoArea[] =
+        this.areas ??
+        [
+          ...new Set(
+            this.entities
+              .map((entity) => entity.area_id)
+              .filter((areaId) => areaId !== undefined)
+          ),
+        ].map((areaId) => ({ area_id: areaId, name: areaName(areaId) }));
+
+      const areasById: Record<string, AreaRegistryEntry> = {};
+      areas.forEach((area) => {
+        areasById[area.area_id] = toAreaRegistryEntry(area);
+      });
+      // Before the entities, so that their names can include the area
+      this.hass.updateHass({ areas: areasById });
+
+      // Entities that services changed keep their state when only the areas
+      // change
+      if (changedProps.has("entities")) {
+        this.hass.addEntities(this.entities, true);
+      } else {
+        this.hass.updateFormatFunctions();
+      }
+    }
+  }
+
+  protected updated(changedProps: PropertyValues<this>) {
+    const oldHass = changedProps.get("hass");
+    // The first update holds the initial entities. They are not changes.
+    if (!oldHass) {
+      return;
+    }
+    // Other updates, such as loaded translations, keep the same states object.
+    if (oldHass.states !== this.hass.states) {
+      fireEvent(this, "states-changed", { states: this.hass.states });
+    }
+  }
+
+  protected render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-embed-provider": HaEmbedProvider;
+  }
+  interface HASSDomEvents {
+    "states-changed": { states: HassEntities };
+  }
+}

demo/src/embed/public-path.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+declare global {
+  var __HA_STATIC_PATH__: string | undefined;
+}
+declare let __webpack_public_path__: string;
+/* eslint-enable @typescript-eslint/naming-convention */
+
+// Load chunks and static files from the server that hosts this script, so
+// that other sites can embed the cards. Only the modern production build keeps
+// `import.meta.url` (see build-scripts/rspack.cjs). The legacy and development
+// builds only run on the demo site, where the default paths are correct.
+// `new URL(path, import.meta.url)` in one expression is an asset reference for
+// the bundler, so the script URL goes into a variable first.
+if (__BUILD__ === "modern" && !__DEV__) {
+  const scriptUrl = import.meta.url;
+  __webpack_public_path__ = new URL(".", scriptUrl).href;
+  globalThis.__HA_STATIC_PATH__ = new URL("../static/", scriptUrl).href;
+}
+
+export {};

demo/src/embed/script-data.ts

@@ -0,0 +1,17 @@
+import { load } from "js-yaml";
+
+/**
+ * Parses the data in a `<script type="application/json">` or
+ * `<script type="text/yaml">` child of the element.
+ */
+export const readScriptData = (element: HTMLElement): unknown => {
+  const script = element.querySelector<HTMLScriptElement>(
+    ':scope > script[type="application/json"], :scope > script[type="text/yaml"]'
+  );
+  if (!script) {
+    return undefined;
+  }
+  return script.type === "text/yaml"
+    ? load(script.textContent!)
+    : JSON.parse(script.textContent!);
+};

demo/src/embed/theme-styles.ts

@@ -0,0 +1,61 @@
+import { unsafeCSS } from "lit";
+import { hex2rgb } from "../../../src/common/color/convert-color";
+import { darkColorVariables } from "../../../src/resources/theme/color";
+import { darkSemanticVariables } from "../../../src/resources/theme/semantic.globals";
+import { themeStyles } from "../../../src/resources/theme/theme";
+
+// The theme styles set variables on `html`, next to fonts and other page
+// styles. Only the variables, media queries, and keyframes are copied, and
+// `html` becomes `selector`. This keeps the theme inside the card, so that it
+// does not change the page that embeds the card.
+const scopeThemeStyles = (cssText: string, selector: string): string => {
+  // A style element in a separate document parses the CSS without applying it.
+  const doc = document.implementation.createHTMLDocument("");
+  const style = doc.createElement("style");
+  style.textContent = cssText;
+  doc.head.append(style);
+
+  const convert = (rules: CSSRuleList): string =>
+    Array.from(rules, (rule) => {
+      if (rule instanceof CSSStyleRule) {
+        if (rule.selectorText !== "html") {
+          return "";
+        }
+        const variables = Array.from(rule.style)
+          .filter((name) => name.startsWith("--"))
+          .map((name) => `${name}:${rule.style.getPropertyValue(name)};`);
+        return `${selector}{${variables.join("")}}`;
+      }
+      if (rule instanceof CSSMediaRule) {
+        return `@media ${rule.conditionText}{${convert(rule.cssRules)}}`;
+      }
+      if (rule instanceof CSSKeyframesRule) {
+        return rule.cssText;
+      }
+      return "";
+    }).join("");
+
+  return convert(style.sheet!.cssRules);
+};
+
+const darkTheme = {
+  ...darkSemanticVariables,
+  ...darkColorVariables,
+};
+
+// Like processTheme in apply_themes_on_element, each hex color also sets its
+// `--rgb-` variable, else those keep their light theme values
+const darkVariables = Object.entries(darkTheme).flatMap(([name, value]) => {
+  const variable = `--${name}:${value};`;
+
+  if (!value.startsWith("#") || `rgb-${name}` in darkTheme) {
+    return [variable];
+  }
+
+  return [variable, `--rgb-${name}:${hex2rgb(value).join(",")};`];
+});
+
+export const embedThemeStyles = unsafeCSS(
+  scopeThemeStyles(themeStyles, ".theme") +
+    `.theme.dark{${darkVariables.join("")}}`
+);

demo/src/embed/workers.ts

@@ -0,0 +1,32 @@
+// Browsers only start a worker from a script on the page's own origin, and
+// the workers of the cards, such as the markdown worker, are served next to
+// this script. A worker from another origin starts from a blob instead, which
+// loads the real worker script. The demo serves its scripts with CORS.
+const pageWorker = globalThis.Worker;
+
+globalThis.Worker = class extends pageWorker {
+  constructor(scriptUrl: string | URL, options?: WorkerOptions) {
+    const url = new URL(scriptUrl, location.href);
+
+    if (url.origin === location.origin) {
+      super(scriptUrl, options);
+      return;
+    }
+
+    const source =
+      options?.type === "module"
+        ? `import ${JSON.stringify(url.href)};`
+        : `importScripts(${JSON.stringify(url.href)});`;
+    const blobUrl = URL.createObjectURL(
+      new Blob([source], { type: "text/javascript" })
+    );
+
+    try {
+      super(blobUrl, options);
+    } finally {
+      URL.revokeObjectURL(blobUrl);
+    }
+  }
+};
+
+export {};

demo/src/ha-demo.ts

@@ -36,6 +36,7 @@ import { mockHardware } from "./stubs/hardware";
 import { mockHassioSupervisor } from "./stubs/hassio_supervisor";
 import { mockIntegration } from "./stubs/integration";
 import { mockLabelRegistry } from "./stubs/label_registry";
+import { mockLogbook } from "./stubs/logbook";
 import { automationPlatformDomains } from "./stubs/automation_platform_domains";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
@@ -50,6 +51,7 @@ import { mockTemplate } from "./stubs/template";
 import { mockTodo } from "./stubs/todo";
 import { mockTranslations } from "./stubs/translations";
 import { mockUsagePrediction } from "./stubs/usage_prediction";
+import { mockWeather } from "./stubs/weather";
 
 // WS command / REST path prefixes whose mocks live in the lazily imported
 // config-panel chunk (see ./stubs/config-panel). Must stay in sync with it.
@@ -75,6 +77,7 @@ const CONFIG_PANEL_COMMANDS = [
   "get_conditions_for_target",
   "get_services_for_target",
   "extract_from_target",
+  "explain_target",
   "script/config",
   "config/automation/config",
   "config/script/config",
@@ -190,7 +193,9 @@ export class HaDemo extends HomeAssistantAppEl {
     mockSystemLog(hass);
     mockTemplate(hass);
     mockEvents(hass);
+    mockLogbook(hass);
     mockMediaPlayer(hass);
+    mockWeather(hass);
     mockFrontend(hass);
     mockHardware(hass);
     mockHassioSupervisor(hass);

demo/src/html/components.html.template

@@ -0,0 +1,762 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant card components</title>
+    <%= renderTemplate("../../../src/html/_header.html.template") %>
+    <meta name="referrer" content="same-origin" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#03a9f4" />
+    <style>
+      :root {
+        color-scheme: light;
+        --page-background: #fafafa;
+        --page-text: #212121;
+        --page-code-background: #e5e5e5;
+        --page-divider: #dddddd;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-scheme="light"]) {
+          color-scheme: dark;
+          --page-background: #111111;
+          --page-text: #e1e1e1;
+          --page-code-background: #1c1c1c;
+          --page-divider: #333333;
+        }
+      }
+      :root[data-scheme="dark"] {
+        color-scheme: dark;
+        --page-background: #111111;
+        --page-text: #e1e1e1;
+        --page-code-background: #1c1c1c;
+        --page-divider: #333333;
+      }
+      html {
+        background-color: var(--page-background);
+        color: var(--page-text);
+      }
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        line-height: 1.5;
+        margin: 0;
+        padding: 0 16px 64px;
+      }
+      main {
+        max-width: 880px;
+        margin: 0 auto;
+      }
+      h1 {
+        margin: 32px 0 8px;
+      }
+      h2 {
+        margin: 48px 0 8px;
+      }
+      pre {
+        background: var(--page-code-background);
+        border-radius: 8px;
+        padding: 12px 16px;
+        overflow-x: auto;
+        font-size: 13px;
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+      th,
+      td {
+        text-align: start;
+        vertical-align: top;
+        padding: 8px;
+        border-bottom: 1px solid var(--page-divider);
+      }
+      .cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 16px;
+        align-items: start;
+        margin: 16px 0;
+      }
+      .single {
+        max-width: 400px;
+        margin: 16px 0;
+      }
+      .log {
+        height: 160px;
+        overflow-y: auto;
+        margin: 0;
+      }
+      button {
+        font: inherit;
+        padding: 6px 12px;
+        margin-inline-end: 8px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Home Assistant card components</h1>
+      <p>
+        Embed working Home Assistant dashboard cards in any page. The cards run
+        against a mocked backend in the browser. No Home Assistant server is
+        necessary.
+      </p>
+      <p>There are two components:</p>
+      <ul>
+        <li>
+          <code>&lt;ha-embed-provider&gt;</code> holds the mocked backend and
+          its entities.
+        </li>
+        <li>
+          <code>&lt;ha-embed-card&gt;</code> renders one card. It uses the
+          backend of a provider.
+        </li>
+      </ul>
+      <p>
+        All cards in the same provider share their entities. When you change
+        an entity in one card, the other cards show the change.
+      </p>
+
+      <p>
+        Color scheme of this page and its cards:
+        <button data-scheme="">Auto</button>
+        <button data-scheme="light">Light</button>
+        <button data-scheme="dark">Dark</button>
+      </p>
+
+      <h2>Use on your site</h2>
+      <p>
+        Load the script from the demo site. The script loads all other files
+        from the demo site too.
+      </p>
+      <pre><code>&lt;script type="module" src="https://demo.home-assistant.io/embed.js"&gt;&lt;/script&gt;</code></pre>
+
+      <h2>One card</h2>
+      <p>
+        Put the entities in a script tag inside the provider. Put the card
+        configuration in a script tag inside the card. Both take JSON with
+        <code>type="application/json"</code> or YAML with
+        <code>type="text/yaml"</code>. The card configuration is the same as in
+        a dashboard. YAML needs its indentation. If your site minifies HTML,
+        make sure the minifier keeps the whitespace in script tags, or use
+        JSON.
+      </p>
+      <pre><code>&lt;ha-embed-provider&gt;
+  &lt;script type="text/yaml"&gt;
+    - entity_id: light.kitchen
+      state: "on"
+      attributes:
+        friendly_name: Kitchen
+        supported_color_modes: [brightness]
+        color_mode: brightness
+        brightness: 180
+  &lt;/script&gt;
+  &lt;ha-embed-card&gt;
+    &lt;script type="text/yaml"&gt;
+      type: tile
+      entity: light.kitchen
+      tap_action:
+        action: toggle
+      features:
+        - type: light-brightness
+    &lt;/script&gt;
+  &lt;/ha-embed-card&gt;
+&lt;/ha-embed-provider&gt;</code></pre>
+      <ha-embed-provider>
+        <!-- htmlmin:ignore --><script type="text/yaml">
+          - entity_id: light.kitchen
+            state: "on"
+            attributes:
+              friendly_name: Kitchen
+              supported_color_modes: [brightness]
+              color_mode: brightness
+              brightness: 180
+        </script><!-- htmlmin:ignore -->
+        <div class="single">
+          <ha-embed-card>
+            <!-- htmlmin:ignore --><script type="text/yaml">
+              type: tile
+              entity: light.kitchen
+              tap_action:
+                action: toggle
+              features:
+                - type: light-brightness
+            </script><!-- htmlmin:ignore -->
+          </ha-embed-card>
+        </div>
+      </ha-embed-provider>
+      <p>
+        The <code>entities</code> attribute of the provider and the
+        <code>config</code> attribute of the card also take JSON.
+      </p>
+
+      <h2>Cards with shared state</h2>
+      <p>
+        These three cards are in one provider. Turn on a light in one card. The
+        other cards update. The log below shows the events of the provider.
+      </p>
+      <ha-embed-provider id="shared">
+        <script type="application/json">
+          [
+            {
+              "entity_id": "light.living_room",
+              "state": "off",
+              "attributes": {
+                "friendly_name": "Living room",
+                "supported_color_modes": ["brightness"],
+                "color_mode": "brightness",
+                "brightness": 255
+              }
+            },
+            {
+              "entity_id": "switch.coffee_maker",
+              "state": "on",
+              "attributes": {
+                "friendly_name": "Coffee maker",
+                "device_class": "outlet"
+              }
+            },
+            {
+              "entity_id": "climate.hallway",
+              "state": "heat",
+              "attributes": {
+                "friendly_name": "Hallway",
+                "current_temperature": 19.5,
+                "temperature": 21,
+                "min_temp": 7,
+                "max_temp": 30,
+                "target_temp_step": 0.5,
+                "hvac_modes": ["heat", "off"],
+                "hvac_action": "heating",
+                "supported_features": 1
+              }
+            },
+            {
+              "entity_id": "sensor.outside_temperature",
+              "state": "12.3",
+              "attributes": {
+                "friendly_name": "Outside temperature",
+                "device_class": "temperature",
+                "state_class": "measurement",
+                "unit_of_measurement": "°C"
+              }
+            }
+          ]
+        </script>
+        <div class="cards">
+          <ha-embed-card>
+            <script type="application/json">
+              {
+                "type": "tile",
+                "entity": "light.living_room",
+                "tap_action": { "action": "toggle" }
+              }
+            </script>
+          </ha-embed-card>
+          <ha-embed-card>
+            <!-- htmlmin:ignore --><script type="text/yaml">
+              type: entities
+              title: Living room
+              entities:
+                - light.living_room
+                - switch.coffee_maker
+                - sensor.outside_temperature
+            </script><!-- htmlmin:ignore -->
+          </ha-embed-card>
+          <ha-embed-card>
+            <!-- htmlmin:ignore --><script type="text/yaml">
+              type: thermostat
+              entity: climate.hallway
+            </script><!-- htmlmin:ignore -->
+          </ha-embed-card>
+        </div>
+      </ha-embed-provider>
+      <pre class="log" id="log"><code>Use the cards to see events here.</code></pre>
+
+      <h2>Cards outside a provider</h2>
+      <p>
+        A card does not have to be inside a provider. A card outside a provider
+        uses the first provider on the page. Put one provider with all entities
+        at the top of the page, and put the cards anywhere below it. If the
+        page has no provider, the card adds an empty provider to the page.
+      </p>
+      <p>
+        To use a different provider, set the <code>provider</code> attribute of
+        the card to the ID of the provider.
+      </p>
+      <pre><code>&lt;ha-embed-provider id="living-room"&gt;…&lt;/ha-embed-provider&gt;
+
+&lt;p&gt;Some text about the coffee maker.&lt;/p&gt;
+
+&lt;ha-embed-card provider="living-room"&gt;
+  &lt;script type="text/yaml"&gt;
+    type: tile
+    entity: switch.coffee_maker
+  &lt;/script&gt;
+&lt;/ha-embed-card&gt;</code></pre>
+      <p>
+        These two cards are not inside a provider. The first card uses the
+        first provider on this page, the kitchen light at the top. The second
+        card uses the provider with the ID <code>shared</code> above.
+      </p>
+      <div class="cards">
+        <ha-embed-card>
+          <!-- htmlmin:ignore --><script type="text/yaml">
+            type: tile
+            entity: light.kitchen
+            tap_action:
+              action: toggle
+          </script><!-- htmlmin:ignore -->
+        </ha-embed-card>
+        <ha-embed-card provider="shared">
+          <!-- htmlmin:ignore --><script type="text/yaml">
+            type: tile
+            entity: switch.coffee_maker
+            tap_action:
+              action: toggle
+          </script><!-- htmlmin:ignore -->
+        </ha-embed-card>
+      </div>
+
+      <h2>Light and dark mode</h2>
+      <p>
+        The cards follow the light or dark mode of the browser. To choose the
+        mode, set the <code>color-scheme</code> attribute of the provider to
+        <code>light</code> or <code>dark</code>. Use this when your site has its
+        own switch for dark mode. The buttons at the top of this page do this.
+        The cards keep their styles inside. They do not change the styles of
+        your page.
+      </p>
+      <pre><code>&lt;ha-embed-provider color-scheme="dark"&gt;…&lt;/ha-embed-provider&gt;</code></pre>
+
+      <h2>Change entities from the page</h2>
+      <p>
+        Set the <code>entities</code> property to change entities from
+        JavaScript. The new list replaces all entities. To change one entity,
+        start from the current states.
+      </p>
+      <p>
+        <button id="set-temperature">Set a random outside temperature</button>
+        <button id="toggle-coffee">Toggle the coffee maker</button>
+      </p>
+      <pre><code>const provider = document.querySelector("ha-embed-provider");
+provider.entities = Object.values(provider.hass.states).map((entity) =&gt;
+  entity.entity_id === "sensor.outside_temperature"
+    ? { ...entity, state: "18.1" }
+    : entity
+);</code></pre>
+      <p>
+        To use the actions of an entity, call a service. The provider updates
+        the state and the cards.
+      </p>
+      <pre><code>provider.hass.callService("switch", "toggle", {
+  entity_id: "switch.coffee_maker",
+});</code></pre>
+
+      <h2>Listen to changes</h2>
+      <p>
+        The provider fires a <code>states-changed</code> event when the state
+        of one or more entities changes. The event has the states of all
+        entities. The event bubbles.
+      </p>
+      <pre><code>provider.addEventListener("states-changed", (ev) =&gt; {
+  const { states } = ev.detail;
+  console.log(states["light.living_room"].state);
+});</code></pre>
+      <p>
+        Read the current state of all entities with
+        <code>provider.hass.states</code>.
+      </p>
+
+      <h2>Areas, calendars and energy</h2>
+      <p>
+        Some cards need data that is not an entity. To set it, put an object in
+        the script tag of the provider instead of the list. The object has the
+        list in <code>entities</code>, and any of these keys:
+      </p>
+      <ul>
+        <li>
+          <code>areas</code>: a list of areas, each with an
+          <code>area_id</code> and a <code>name</code>. Without it, each
+          <code>area_id</code> of the entities becomes an area.
+        </li>
+        <li>
+          <code>calendars</code>: the events of calendar entities, by entity
+          ID. Each event has a <code>summary</code>, a <code>start</code> and
+          an <code>end</code>. Calendars without events here get sample events
+          around today.
+        </li>
+        <li>
+          <code>energy</code>: the energy settings, the same as the
+          <code>energy/get_prefs</code> response. Without it, energy is not
+          set up.
+        </li>
+      </ul>
+      <p>
+        Weather entities get a forecast made up from their condition and
+        temperature, or their <code>forecast</code> attribute when they have
+        one. Set <code>supported_features</code> to show forecasts.
+      </p>
+      <pre><code>&lt;ha-embed-provider&gt;
+  &lt;script type="text/yaml"&gt;
+    entities:
+      - entity_id: calendar.family
+        state: "off"
+        attributes:
+          friendly_name: Family
+    areas:
+      - area_id: kitchen
+        name: Kitchen
+    calendars:
+      calendar.family:
+        - summary: Dentist
+          start: "2026-11-02T15:30:00+00:00"
+          end: "2026-11-02T16:15:00+00:00"
+  &lt;/script&gt;
+  …
+&lt;/ha-embed-provider&gt;</code></pre>
+      <p>This calendar card uses the sample events.</p>
+      <ha-embed-provider>
+        <script type="application/json">
+          {
+            "entities": [
+              {
+                "entity_id": "calendar.family",
+                "state": "off",
+                "attributes": { "friendly_name": "Family" }
+              }
+            ]
+          }
+        </script>
+        <div class="single">
+          <ha-embed-card
+            config='{ "type": "calendar", "entities": ["calendar.family"], "initial_view": "listWeek" }'
+          ></ha-embed-card>
+        </div>
+      </ha-embed-provider>
+
+      <h2>Custom cards</h2>
+      <p>
+        Custom cards work too. Load the script of the custom card on the page,
+        and use <code>custom:</code> and the element name as the card type.
+        The custom card gets the same mocked backend as the other cards.
+        <code>window.loadCardHelpers()</code> is available to create built-in
+        cards.
+      </p>
+      <p>
+        The mocked backend only knows a part of the Home Assistant API. History
+        and statistics are made up from the current state of each entity.
+        Templates are not rendered, they come back as they are. The logbook is
+        empty. Other requests get an error. From another site, the script of
+        the custom card needs CORS headers, like the embed script.
+      </p>
+      <pre><code>&lt;script type="module" src="https://example.com/embed-demo-custom-card.js"&gt;&lt;/script&gt;
+&lt;ha-embed-card&gt;
+  &lt;script type="text/yaml"&gt;
+    type: custom:embed-demo-custom-card
+    entity: light.office
+  &lt;/script&gt;
+&lt;/ha-embed-card&gt;</code></pre>
+      <ha-embed-provider>
+        <script type="application/json">
+          [
+            {
+              "entity_id": "light.office",
+              "state": "on",
+              "attributes": {
+                "friendly_name": "Office",
+                "supported_color_modes": ["brightness"],
+                "color_mode": "brightness",
+                "brightness": 120
+              }
+            }
+          ]
+        </script>
+        <div class="single">
+          <ha-embed-card
+            config='{ "type": "custom:embed-demo-custom-card", "entity": "light.office" }'
+          ></ha-embed-card>
+        </div>
+      </ha-embed-provider>
+      <p>This is the code of the custom card:</p>
+      <pre><code>class EmbedDemoCustomCard extends HTMLElement {
+  setConfig(config) {
+    if (!config.entity) {
+      throw new Error("Set an entity");
+    }
+    this._config = config;
+  }
+
+  set hass(hass) {
+    this._hass = hass;
+    this._render();
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  async _render() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" }).innerHTML = `
+        &lt;style&gt;
+          ha-card { padding: 16px; }
+          .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 8px;
+            background: var(--accent-color);
+            color: var(--text-accent-color, #fff);
+            font-size: 12px;
+          }
+          .tile { margin: 12px 0; }
+        &lt;/style&gt;
+        &lt;ha-card&gt;
+          &lt;span class="badge"&gt;Custom card&lt;/span&gt;
+          &lt;p&gt;
+            This is a custom card. It is not part of Home Assistant. The page
+            defines it, and it creates the tile card below with the card
+            helpers.
+          &lt;/p&gt;
+          &lt;div class="tile"&gt;&lt;/div&gt;
+          &lt;button&gt;Toggle from the custom card&lt;/button&gt;
+        &lt;/ha-card&gt;`;
+      this.shadowRoot.querySelector("button").addEventListener("click", () =&gt;
+        this._hass.callService("homeassistant", "toggle", {
+          entity_id: this._config.entity,
+        })
+      );
+    }
+    // Keep the promise, so that a second update does not create a second tile.
+    if (!this._tile) {
+      this._tile = window.loadCardHelpers().then((helpers) => {
+        const tile = helpers.createCardElement({
+          type: "tile",
+          entity: this._config.entity,
+        });
+        this.shadowRoot.querySelector(".tile").append(tile);
+        return tile;
+      });
+    }
+    (await this._tile).hass = this._hass;
+  }
+}
+
+customElements.define("embed-demo-custom-card", EmbedDemoCustomCard);</code></pre>
+      <script type="module">
+        class EmbedDemoCustomCard extends HTMLElement {
+          setConfig(config) {
+            if (!config.entity) {
+              throw new Error("Set an entity");
+            }
+            this._config = config;
+          }
+
+          set hass(hass) {
+            this._hass = hass;
+            this._render();
+          }
+
+          getCardSize() {
+            return 3;
+          }
+
+          async _render() {
+            if (!this.shadowRoot) {
+              this.attachShadow({ mode: "open" }).innerHTML = `
+                <style>
+                  ha-card { padding: 16px; }
+                  .badge {
+                    display: inline-block;
+                    padding: 2px 8px;
+                    border-radius: 8px;
+                    background: var(--accent-color);
+                    color: var(--text-accent-color, #fff);
+                    font-size: 12px;
+                  }
+                  .tile { margin: 12px 0; }
+                </style>
+                <ha-card>
+                  <span class="badge">Custom card</span>
+                  <p>
+                    This is a custom card. It is not part of Home Assistant. The page
+                    defines it, and it creates the tile card below with the card
+                    helpers.
+                  </p>
+                  <div class="tile"></div>
+                  <button>Toggle from the custom card</button>
+                </ha-card>`;
+              this.shadowRoot.querySelector("button").addEventListener("click", () =>
+                this._hass.callService("homeassistant", "toggle", {
+                  entity_id: this._config.entity,
+                })
+              );
+            }
+            // Keep the promise, so that a second update does not create a second tile.
+            if (!this._tile) {
+              this._tile = window.loadCardHelpers().then((helpers) => {
+                const tile = helpers.createCardElement({
+                  type: "tile",
+                  entity: this._config.entity,
+                });
+                this.shadowRoot.querySelector(".tile").append(tile);
+                return tile;
+              });
+            }
+            (await this._tile).hass = this._hass;
+          }
+        }
+
+        customElements.define("embed-demo-custom-card", EmbedDemoCustomCard);
+      </script>
+
+      <h2>Reference</h2>
+      <h3><code>&lt;ha-embed-provider&gt;</code></h3>
+      <table>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Description</th>
+        </tr>
+        <tr>
+          <td><code>entities</code></td>
+          <td>Attribute and property</td>
+          <td>
+            A list of entities. Each entity has an <code>entity_id</code>, a
+            <code>state</code>, and <code>attributes</code>. The optional keys
+            <code>area_id</code>, <code>device_id</code>, and
+            <code>platform</code> set the entity registry entry. A new list
+            replaces all entities. A JSON or YAML script child sets the first
+            list.
+          </td>
+        </tr>
+        <tr>
+          <td><code>color-scheme</code></td>
+          <td>Attribute and property (<code>colorScheme</code>)</td>
+          <td>
+            <code>light</code> or <code>dark</code>. Without it, the cards
+            follow the browser setting.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hass</code></td>
+          <td>Property, read-only</td>
+          <td>The mocked Home Assistant object that the cards use.</td>
+        </tr>
+        <tr>
+          <td><code>states-changed</code></td>
+          <td>Event</td>
+          <td>
+            Fires when the state of one or more entities changes. The detail
+            has <code>states</code>, the states of all entities by entity ID.
+          </td>
+        </tr>
+      </table>
+      <h3><code>&lt;ha-embed-card&gt;</code></h3>
+      <table>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Description</th>
+        </tr>
+        <tr>
+          <td><code>config</code></td>
+          <td>Attribute and property</td>
+          <td>
+            The card configuration, the same as in a dashboard. A JSON or YAML
+            script child sets the first configuration.
+          </td>
+        </tr>
+        <tr>
+          <td><code>provider</code></td>
+          <td>Attribute and property</td>
+          <td>
+            The ID of the provider to use. Without it, the card uses the
+            provider around it, else the first provider on the page.
+          </td>
+        </tr>
+      </table>
+      <p>
+        The mocked backend knows the actions of lights, switches, climate,
+        covers, fans, locks, media players, and more. Actions that open dialogs,
+        such as <code>more-info</code>, do nothing.
+      </p>
+    </main>
+    <script>
+      (function () {
+        var shared = document.getElementById("shared");
+        var log = document.getElementById("log");
+        var first = true;
+        shared.addEventListener("states-changed", function (ev) {
+          var states = ev.detail.states;
+          var line =
+            new Date().toLocaleTimeString() +
+            "  " +
+            Object.keys(states)
+              .map(function (entityId) {
+                return entityId + "=" + states[entityId].state;
+              })
+              .join(", ");
+          if (first) {
+            log.textContent = "";
+            first = false;
+          }
+          log.textContent = line + "\n" + log.textContent;
+        });
+        document
+          .getElementById("set-temperature")
+          .addEventListener("click", function () {
+            var states = shared.hass.states;
+            shared.entities = Object.keys(states).map(function (entityId) {
+              var entity = states[entityId];
+              return {
+                entity_id: entityId,
+                state:
+                  entityId === "sensor.outside_temperature"
+                    ? (Math.random() * 30 - 5).toFixed(1)
+                    : entity.state,
+                attributes: entity.attributes,
+              };
+            });
+          });
+        document
+          .querySelectorAll("button[data-scheme]")
+          .forEach(function (button) {
+            button.addEventListener("click", function () {
+              var scheme = button.getAttribute("data-scheme");
+              if (scheme) {
+                document.documentElement.setAttribute("data-scheme", scheme);
+              } else {
+                document.documentElement.removeAttribute("data-scheme");
+              }
+              document
+                .querySelectorAll("ha-embed-provider")
+                .forEach(function (provider) {
+                  if (scheme) {
+                    provider.setAttribute("color-scheme", scheme);
+                  } else {
+                    provider.removeAttribute("color-scheme");
+                  }
+                });
+            });
+          });
+        document
+          .getElementById("toggle-coffee")
+          .addEventListener("click", function () {
+            shared.hass.callService("switch", "toggle", {
+              entity_id: "switch.coffee_maker",
+            });
+          });
+      })();
+    </script>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_script_loader.html.template") %>
+  </body>
+</html>

demo/src/html/embed.js.template

@@ -0,0 +1 @@
+import "<%= latestEntryJS[0] %>";

demo/src/stubs/area_registry.ts

@@ -12,6 +12,20 @@ export interface DemoArea {
 
 let areas: AreaRegistryEntry[] = [];
 
+export const toAreaRegistryEntry = (area: DemoArea): AreaRegistryEntry => ({
+  area_id: area.area_id,
+  name: area.name,
+  floor_id: area.floor_id ?? null,
+  icon: area.icon ?? null,
+  temperature_entity_id: area.temperature_entity_id ?? null,
+  humidity_entity_id: area.humidity_entity_id ?? null,
+  aliases: [],
+  labels: [],
+  picture: null,
+  created_at: 0,
+  modified_at: 0,
+});
+
 export const mockAreaRegistry = (
   hass: MockHomeAssistant,
   data: DemoArea[] = []
@@ -25,19 +39,7 @@ export const setDemoAreas = (
   hass: MockHomeAssistant,
   demoAreas: DemoArea[] = []
 ) => {
-  areas = demoAreas.map((area) => ({
-    area_id: area.area_id,
-    name: area.name,
-    floor_id: area.floor_id ?? null,
-    icon: area.icon ?? null,
-    temperature_entity_id: area.temperature_entity_id ?? null,
-    humidity_entity_id: area.humidity_entity_id ?? null,
-    aliases: [],
-    labels: [],
-    picture: null,
-    created_at: 0,
-    modified_at: 0,
-  }));
+  areas = demoAreas.map(toAreaRegistryEntry);
   const areasById: Record<string, AreaRegistryEntry> = {};
   areas.forEach((area) => {
     areasById[area.area_id] = area;

demo/src/stubs/automation_platforms.ts

@@ -2,14 +2,14 @@ import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { ensureArray } from "../../../src/common/array/ensure-array";
 import { computeDomain } from "../../../src/common/entity/compute_domain";
 import type { ConditionDescriptions } from "../../../src/data/condition";
-import type { ExtractFromTargetResult } from "../../../src/data/target";
 import type { TriggerDescriptions } from "../../../src/data/trigger";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import { getLabelIds } from "./label_registry";
 import {
   conditionDescriptions,
   triggerDescriptions,
 } from "./automation_platforms_data";
+import { explainTarget } from "./explain_target";
+import { expandTarget, mockExtractFromTarget } from "./target";
 
 type Descriptions = TriggerDescriptions | ConditionDescriptions;
 
@@ -20,109 +20,6 @@ interface EntityFilter {
   supported_features?: number[];
 }
 
-// Expands a target to its areas, devices and entities, like core does
-const expandTarget = (
-  hass: MockHomeAssistant,
-  target: HassServiceTarget,
-  primaryEntitiesOnly = true
-) => {
-  const missing = {
-    floors: [] as string[],
-    areas: [] as string[],
-    devices: [] as string[],
-    labels: [] as string[],
-  };
-  const knownLabelIds = getLabelIds();
-  const floorIds = ensureArray(target.floor_id ?? []);
-  const labelIds = ensureArray(target.label_id ?? []);
-  missing.floors.push(...floorIds.filter((id) => !(id in hass.floors)));
-  // Like core, unknown labels are reported, but still expanded
-  missing.labels.push(...labelIds.filter((id) => !knownLabelIds.includes(id)));
-  const hasLabel = (labels?: string[]) =>
-    labelIds.some((labelId) => labels?.includes(labelId));
-
-  // Unknown areas and devices are reported, but still referenced
-  const areaIds = new Set(ensureArray(target.area_id ?? []));
-  missing.areas.push(...[...areaIds].filter((id) => !(id in hass.areas)));
-  for (const area of Object.values(hass.areas)) {
-    if (
-      (area.floor_id && floorIds.includes(area.floor_id)) ||
-      hasLabel(area.labels)
-    ) {
-      areaIds.add(area.area_id);
-    }
-  }
-
-  // A targeted or labeled device includes its child devices
-  const deviceIds = new Set<string>();
-  const addDevice = (deviceId: string) => {
-    deviceIds.add(deviceId);
-    for (const device of Object.values(hass.devices)) {
-      if (device.parent_device_id === deviceId) {
-        deviceIds.add(device.id);
-      }
-    }
-  };
-  for (const deviceId of ensureArray(target.device_id ?? [])) {
-    if (!(deviceId in hass.devices)) {
-      missing.devices.push(deviceId);
-    }
-    addDevice(deviceId);
-  }
-  for (const device of Object.values(hass.devices)) {
-    if (hasLabel(device.labels)) {
-      addDevice(device.id);
-    }
-  }
-
-  // A child device without its own area is in the area of its parent device
-  const deviceArea = (deviceId: string) => {
-    const device = hass.devices[deviceId];
-    return (
-      device?.area_id ??
-      (device?.parent_device_id
-        ? hass.devices[device.parent_device_id]?.area_id
-        : undefined)
-    );
-  };
-  const areaDeviceIds = new Set<string>();
-  for (const device of Object.values(hass.devices)) {
-    const areaId = deviceArea(device.id);
-    if (areaId && areaIds.has(areaId)) {
-      areaDeviceIds.add(device.id);
-    }
-  }
-
-  const entityIds = new Set(ensureArray(target.entity_id ?? []));
-  for (const entity of Object.values(hass.entities)) {
-    // The display registry keeps the entities of a previous demo, and like
-    // core, hidden entities are never included indirectly
-    if (!(entity.entity_id in hass.states) || entity.hidden) {
-      continue;
-    }
-    const primary = !primaryEntitiesOnly || !entity.entity_category;
-    if (
-      hasLabel(entity.labels) ||
-      (primary &&
-        ((entity.device_id && deviceIds.has(entity.device_id)) ||
-          (entity.area_id && areaIds.has(entity.area_id)) ||
-          // An entity with its own area is not in the area of its device
-          (!entity.area_id &&
-            entity.device_id &&
-            areaDeviceIds.has(entity.device_id))))
-    ) {
-      entityIds.add(entity.entity_id);
-    }
-  }
-
-  return {
-    areas: [...areaIds],
-    devices: [...new Set([...deviceIds, ...areaDeviceIds])],
-    entities: [...entityIds],
-    missing,
-  };
-};
-
 const matchesFilter = (
   hass: MockHomeAssistant,
   entityId: string,
@@ -228,27 +125,20 @@ export const mockAutomationPlatforms = (hass: MockHomeAssistant) => {
   );
   mockForTarget(hass, "get_triggers_for_target", triggerDescriptions);
   mockForTarget(hass, "get_conditions_for_target", conditionDescriptions);
+  mockExtractFromTarget(hass);
   hass.mockWS(
-    "extract_from_target",
+    "explain_target",
     (
       msg: { target: HassServiceTarget; primary_entities_only?: boolean },
       currentHass: MockHomeAssistant
-    ): ExtractFromTargetResult => {
-      const { areas, devices, entities, missing } = expandTarget(
-        currentHass,
+    ) =>
+      explainTarget(
         msg.target,
+        (target, primaryEntitiesOnly) =>
+          expandTarget(currentHass, target, primaryEntitiesOnly),
+        Object.keys(currentHass.states),
         msg.primary_entities_only ?? true
-      );
-      return {
-        missing_areas: missing.areas,
-        missing_devices: missing.devices,
-        missing_floors: missing.floors,
-        missing_labels: missing.labels,
-        referenced_areas: areas,
-        referenced_devices: devices,
-        referenced_entities: entities,
-      };
-    }
+      )
   );
   hass.mockWS(
     "get_services_for_target",

demo/src/stubs/calendar.ts

@@ -0,0 +1,122 @@
+import type { CalendarEventApiData } from "../../../src/data/calendar";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+// Sample events relative to today, so demos always show something in the
+// current week and month.
+
+const pad = (value: number) => String(value).padStart(2, "0");
+
+const day = (offset: number): Date => {
+  const date = new Date();
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + offset);
+
+  return date;
+};
+
+const isoDate = (date: Date) =>
+  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+
+const at = (offset: number, hours: number, minutes = 0) => {
+  const date = day(offset);
+  date.setHours(hours, minutes);
+
+  return date.toISOString();
+};
+
+const allDay = (offset: number, days = 1) => ({
+  start: isoDate(day(offset)),
+  end: isoDate(day(offset + days)),
+  all_day: true,
+});
+
+export const FAMILY_EVENTS: CalendarEventApiData[] = [
+  { summary: "School run", start: at(0, 8), end: at(0, 8, 30) },
+  {
+    summary: "Dentist",
+    start: at(0, 15, 30),
+    end: at(0, 16, 15),
+    location: "Main Street 12",
+  },
+  { summary: "Grandma's birthday", ...allDay(1) },
+  { summary: "Football practice", start: at(2, 17), end: at(2, 18, 30) },
+  {
+    summary: "Dinner with friends",
+    start: at(3, 19),
+    end: at(3, 22),
+    status: "tentative",
+  },
+  { summary: "Summer cabin", ...allDay(5, 3) },
+  { summary: "Parent-teacher meeting", start: at(9, 18), end: at(9, 19) },
+  { summary: "Football practice", start: at(9, 17), end: at(9, 18, 30) },
+  { summary: "Swimming lessons", start: at(12, 10), end: at(12, 11) },
+  { summary: "Car service", start: at(-3, 9), end: at(-3, 11) },
+  { summary: "Book club", start: at(-6, 19), end: at(-6, 21) },
+];
+
+export const WORK_EVENTS: CalendarEventApiData[] = [
+  { summary: "Stand-up", start: at(0, 9), end: at(0, 9, 15) },
+  { summary: "Sprint planning", start: at(2, 10), end: at(2, 12) },
+  { summary: "Team lunch", start: at(4, 12), end: at(4, 13) },
+  { summary: "Conference", ...allDay(8, 2) },
+  { summary: "Quarterly review", start: at(-2, 14), end: at(-2, 15, 30) },
+];
+
+const toTime = (value: CalendarEventApiData["start"]) =>
+  new Date(
+    typeof value === "string"
+      ? value
+      : "dateTime" in value
+        ? value.dateTime
+        : value.date
+  ).getTime();
+
+const inRange = (
+  events: CalendarEventApiData[],
+  start: string | null,
+  end: string | null
+): CalendarEventApiData[] => {
+  const startTime = start ? new Date(start).getTime() : -Infinity;
+  const endTime = end ? new Date(end).getTime() : Infinity;
+
+  return events.filter(
+    (event) => toTime(event.end) > startTime && toTime(event.start) < endTime
+  );
+};
+
+/**
+ * Answers event requests of calendar entities with the events of
+ * `getEvents`. A calendar without events gets `null`, like a calendar whose
+ * integration fails to return them.
+ */
+export const mockCalendarEvents = (
+  hass: MockHomeAssistant,
+  getEvents: (
+    entityId: string,
+    currentHass: MockHomeAssistant
+  ) => CalendarEventApiData[] | null | undefined
+) => {
+  hass.mockWS("calendar/event/subscribe", (msg, currentHass, onChange) => {
+    const events = getEvents(msg.entity_id, currentHass);
+    onChange?.({ events: events ? inRange(events, msg.start, msg.end) : null });
+
+    return () => undefined;
+  });
+  // Home Assistant before 2026.5 has no event subscription, so cards that
+  // support it ask the REST API instead.
+  hass.mockAPI(/^calendars\/[^/?]+\?/, (currentHass, _method, path) => {
+    const url = new URL(path, location.origin);
+    const entityId = url.pathname.slice(url.pathname.lastIndexOf("/") + 1);
+    const events = getEvents(entityId, currentHass);
+
+    if (!events) {
+      return Promise.reject(new Error("Calendar not found"));
+    }
+
+    return inRange(
+      events,
+      url.searchParams.get("start"),
+      url.searchParams.get("end")
+    );
+  });
+};

demo/src/stubs/entities.ts

@@ -11,7 +11,7 @@ export const energyEntities = () =>
       entity_id: "sensor.solar_production",
       state: "88.6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Solar",
         unit_of_measurement: "kWh",
       },
@@ -20,7 +20,7 @@ export const energyEntities = () =>
       entity_id: "sensor.battery_input",
       state: "4",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Battery Input",
         unit_of_measurement: "kWh",
       },
@@ -29,7 +29,7 @@ export const energyEntities = () =>
       entity_id: "sensor.battery_output",
       state: "3",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Battery Output",
         unit_of_measurement: "kWh",
       },
@@ -38,7 +38,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_consumption_tarif_1",
       state: "88.6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Grid consumption low tariff",
         unit_of_measurement: "kWh",
       },
@@ -47,7 +47,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_consumption_tarif_2",
       state: "88.6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Grid consumption high tariff",
         unit_of_measurement: "kWh",
       },
@@ -56,7 +56,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_production_tarif_1",
       state: "88.6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Returned to grid low tariff",
         unit_of_measurement: "kWh",
       },
@@ -65,7 +65,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_production_tarif_2",
       state: "88.6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Returned to grid high tariff",
         unit_of_measurement: "kWh",
       },
@@ -74,7 +74,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_consumption_tarif_1_cost",
       state: "2",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         unit_of_measurement: "EUR",
       },
     },
@@ -82,7 +82,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_consumption_tarif_2_cost",
       state: "2",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         unit_of_measurement: "EUR",
       },
     },
@@ -90,7 +90,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_production_tarif_1_compensation",
       state: "2",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         unit_of_measurement: "EUR",
       },
     },
@@ -98,7 +98,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_production_tarif_2_compensation",
       state: "2",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         unit_of_measurement: "EUR",
       },
     },
@@ -138,7 +138,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_gas_cost",
       state: "2",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         unit_of_measurement: "EUR",
       },
     },
@@ -146,7 +146,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_gas",
       state: "4",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Gas",
         unit_of_measurement: "m³",
       },
@@ -155,7 +155,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_water",
       state: "4000",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Water",
         unit_of_measurement: "L",
       },
@@ -164,7 +164,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_car",
       state: "4",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Electric car",
         unit_of_measurement: "kWh",
       },
@@ -173,7 +173,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_ac",
       state: "3",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Air conditioning",
         unit_of_measurement: "kWh",
       },
@@ -182,7 +182,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_washing_machine",
       state: "6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Washing machine",
         unit_of_measurement: "kWh",
       },
@@ -191,7 +191,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_dryer",
       state: "5.5",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Dryer",
         unit_of_measurement: "kWh",
       },
@@ -200,7 +200,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_heat_pump",
       state: "6",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Heat pump",
         unit_of_measurement: "kWh",
       },
@@ -209,7 +209,7 @@ export const energyEntities = () =>
       entity_id: "sensor.energy_boiler",
       state: "7",
       attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
+        state_class: "total_increasing",
         friendly_name: "Boiler",
         unit_of_measurement: "kWh",
       },

demo/src/stubs/entity_registry.ts

@@ -8,7 +8,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 let entries: EntityRegistryEntry[] = [];
 
-const newEntry = (
+export const newEntry = (
   entry: Pick<EntityRegistryEntry, "entity_id" | "platform" | "unique_id">
 ): EntityRegistryEntry => {
   const now = Date.now() / 1000;
@@ -43,7 +43,9 @@ const displayFields = (entry: EntityRegistryEntry) => ({
   hidden: entry.hidden_by !== null,
 });
 
-const extEntry = (entry: EntityRegistryEntry): ExtEntityRegistryEntry => ({
+export const extEntry = (
+  entry: EntityRegistryEntry
+): ExtEntityRegistryEntry => ({
   ...entry,
   capabilities: {},
   aliases: [],
@@ -56,6 +58,16 @@ export const mockEntityRegistry = (
   entries = [...data];
   // A new array, so subscribers see the registry changed after an update
   hass.mockWS("config/entity_registry/list", () => [...entries]);
+  hass.mockWS(
+    "config/entity_registry/get",
+    (msg: { entity_id: string }): ExtEntityRegistryEntry => {
+      const entry = entries.find((e) => e.entity_id === msg.entity_id);
+      if (!entry) {
+        throw new Error(`Entity not found: ${msg.entity_id}`);
+      }
+      return extEntry(entry);
+    }
+  );
   hass.mockWS(
     "config/entity_registry/get_entries",
     (msg: { entity_ids: string[] }) => {

demo/src/stubs/explain_target.ts

@@ -0,0 +1,79 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { ensureArray } from "../../../src/common/array/ensure-array";
+import type {
+  TargetExplanation,
+  HassServiceTargetWithExclude,
+  TargetItem,
+  TargetType,
+} from "../../../src/data/target";
+
+const TYPES: TargetType[] = ["entity", "device", "area", "floor", "label"];
+
+const items = (target?: HassServiceTarget): TargetItem[] =>
+  TYPES.flatMap((type) => {
+    const ids = target?.[`${type}_id`];
+    return ids ? ensureArray(ids).map((id) => ({ type, id: String(id) })) : [];
+  });
+
+/** What one target item resolves to, and the areas and devices it reaches. */
+export interface ResolvedTargetItem {
+  areas: string[];
+  devices: string[];
+  entities: string[];
+}
+
+/**
+ * Like core's explain_target: resolves each item of the target and of its
+ * `exclude` on its own with `resolve`, and tells what each exclude takes out
+ * of each included item. Like core, `entity_id: all` is every entity in
+ * `entityIds`, and excludes resolve every entity, not only the primary ones.
+ */
+export const explainTarget = (
+  target: HassServiceTargetWithExclude,
+  resolve: (
+    target: HassServiceTarget,
+    primaryEntitiesOnly: boolean
+  ) => ResolvedTargetItem,
+  entityIds: string[],
+  primaryEntitiesOnly = true
+): TargetExplanation => {
+  const single = ({ type, id }: TargetItem): HassServiceTarget => ({
+    [`${type}_id`]: [id],
+  });
+  const includes = items(target).map((item) => {
+    if (item.type === "entity" && item.id === "all") {
+      return {
+        ...item,
+        entities: entityIds,
+        referenced_areas: [],
+        referenced_devices: [],
+      };
+    }
+    const { areas, devices, entities } = resolve(
+      single(item),
+      primaryEntitiesOnly
+    );
+    return {
+      ...item,
+      entities,
+      referenced_areas: areas,
+      referenced_devices: devices,
+    };
+  });
+  return {
+    includes,
+    excludes: items(target.exclude).map((item) => {
+      const excluded = new Set(resolve(single(item), false).entities);
+      return {
+        ...item,
+        removed: includes
+          .map(({ type, id, entities }) => ({
+            type,
+            id,
+            entities: entities.filter((entityId) => excluded.has(entityId)),
+          }))
+          .filter((include) => include.entities.length > 0),
+      };
+    }),
+  };
+};

demo/src/stubs/logbook.ts

@@ -0,0 +1,15 @@
+import type { LogbookStreamMessage } from "../../../src/data/logbook";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+/**
+ * Answers logbook subscriptions with an empty logbook. No entries come from
+ * an automation or script trace.
+ */
+export const mockLogbook = (hass: MockHomeAssistant) => {
+  hass.mockWS("logbook/event_stream", (_msg, _currentHass, onChange) => {
+    onChange?.({ events: [] } satisfies LogbookStreamMessage);
+
+    return () => undefined;
+  });
+  hass.mockWS("trace/contexts", () => ({}));
+};

demo/src/stubs/marketplace.ts

@@ -149,6 +149,7 @@ const repositories: RepositoryBase[] = [
 const repositoryInfo = (repository: RepositoryBase): RepositoryInfo => ({
   ...repository,
   additional_info: `# ${repository.name}\n\n${repository.description}\n\nThis is a demo. Installing is not available.`,
+  beta: false,
   default_branch: "main",
   issues: 12,
   releases: [repository.available_version],

demo/src/stubs/recorder.ts

@@ -372,7 +372,9 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
           const entityState = hass.states[id];
           const state = entityState ? Number(entityState.state) : 1;
           statistics[id] =
-            entityState && "last_reset" in entityState.attributes
+            entityState &&
+            (entityState.attributes.state_class === "total" ||
+              entityState.attributes.state_class === "total_increasing")
               ? generateSumStatistics(
                   start,
                   end,

demo/src/stubs/target.ts

@@ -0,0 +1,132 @@
+import type { HassServiceTarget } from "home-assistant-js-websocket";
+import { ensureArray } from "../../../src/common/array/ensure-array";
+import type { ExtractFromTargetResult } from "../../../src/data/target";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { getLabelIds } from "./label_registry";
+
+// Expands a target to its areas, devices and entities, like core does
+export const expandTarget = (
+  hass: MockHomeAssistant,
+  target: HassServiceTarget,
+  primaryEntitiesOnly = true
+) => {
+  const missing = {
+    floors: [] as string[],
+    areas: [] as string[],
+    devices: [] as string[],
+    labels: [] as string[],
+  };
+  const knownLabelIds = getLabelIds();
+  const floorIds = ensureArray(target.floor_id ?? []);
+  const labelIds = ensureArray(target.label_id ?? []);
+  missing.floors.push(...floorIds.filter((id) => !(id in hass.floors)));
+  // Like core, unknown labels are reported, but still expanded
+  missing.labels.push(...labelIds.filter((id) => !knownLabelIds.includes(id)));
+  const hasLabel = (labels?: string[]) =>
+    labelIds.some((labelId) => labels?.includes(labelId));
+
+  // Unknown areas and devices are reported, but still referenced
+  const areaIds = new Set(ensureArray(target.area_id ?? []));
+  missing.areas.push(...[...areaIds].filter((id) => !(id in hass.areas)));
+  for (const area of Object.values(hass.areas)) {
+    if (
+      (area.floor_id && floorIds.includes(area.floor_id)) ||
+      hasLabel(area.labels)
+    ) {
+      areaIds.add(area.area_id);
+    }
+  }
+
+  // A targeted or labeled device includes its child devices
+  const deviceIds = new Set<string>();
+  const addDevice = (deviceId: string) => {
+    deviceIds.add(deviceId);
+    for (const device of Object.values(hass.devices)) {
+      if (device.parent_device_id === deviceId) {
+        deviceIds.add(device.id);
+      }
+    }
+  };
+  for (const deviceId of ensureArray(target.device_id ?? [])) {
+    if (!(deviceId in hass.devices)) {
+      missing.devices.push(deviceId);
+    }
+    addDevice(deviceId);
+  }
+  for (const device of Object.values(hass.devices)) {
+    if (hasLabel(device.labels)) {
+      addDevice(device.id);
+    }
+  }
+
+  // A child device without its own area is in the area of its parent device
+  const deviceArea = (deviceId: string) => {
+    const device = hass.devices[deviceId];
+    return (
+      device?.area_id ??
+      (device?.parent_device_id
+        ? hass.devices[device.parent_device_id]?.area_id
+        : undefined)
+    );
+  };
+  const areaDeviceIds = new Set<string>();
+  for (const device of Object.values(hass.devices)) {
+    const areaId = deviceArea(device.id);
+    if (areaId && areaIds.has(areaId)) {
+      areaDeviceIds.add(device.id);
+    }
+  }
+
+  const entityIds = new Set(ensureArray(target.entity_id ?? []));
+  for (const entity of Object.values(hass.entities)) {
+    // The display registry keeps the entities of a previous demo, and like
+    // core, hidden entities are never included indirectly
+    if (!(entity.entity_id in hass.states) || entity.hidden) {
+      continue;
+    }
+    const primary = !primaryEntitiesOnly || !entity.entity_category;
+    if (
+      hasLabel(entity.labels) ||
+      (primary &&
+        ((entity.device_id && deviceIds.has(entity.device_id)) ||
+          (entity.area_id && areaIds.has(entity.area_id)) ||
+          // An entity with its own area is not in the area of its device
+          (!entity.area_id &&
+            entity.device_id &&
+            areaDeviceIds.has(entity.device_id))))
+    ) {
+      entityIds.add(entity.entity_id);
+    }
+  }
+
+  return {
+    areas: [...areaIds],
+    devices: [...new Set([...deviceIds, ...areaDeviceIds])],
+    entities: [...entityIds],
+    missing,
+  };
+};
+
+export const mockExtractFromTarget = (hass: MockHomeAssistant) =>
+  hass.mockWS(
+    "extract_from_target",
+    (
+      msg: { target: HassServiceTarget; primary_entities_only?: boolean },
+      currentHass: MockHomeAssistant
+    ): ExtractFromTargetResult => {
+      const { areas, devices, entities, missing } = expandTarget(
+        currentHass,
+        msg.target,
+        msg.primary_entities_only ?? true
+      );
+      return {
+        missing_areas: missing.areas,
+        missing_devices: missing.devices,
+        missing_floors: missing.floors,
+        missing_labels: missing.labels,
+        referenced_areas: areas,
+        referenced_devices: devices,
+        referenced_entities: entities,
+      };
+    }
+  );

demo/src/stubs/weather.ts

@@ -0,0 +1,133 @@
+import type {
+  ForecastAttribute,
+  ModernForecastType,
+} from "../../../src/data/weather";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+const HOUR = 3600000;
+
+const CONDITIONS = [
+  "partlycloudy",
+  "rainy",
+  "cloudy",
+  "sunny",
+  "pouring",
+  "partlycloudy",
+  "sunny",
+];
+
+// Daily changes around the current temperature, so the forecast looks real.
+const TEMPERATURE_CHANGES = [0, -1.5, -3, -1, 1.5, 2.5, 1];
+
+const PRECIPITATION = new Map([
+  ["rainy", 2.4],
+  ["pouring", 9.1],
+]);
+
+const forecastEntry = (
+  datetime: Date,
+  temperature: number,
+  condition: string
+): ForecastAttribute => ({
+  datetime: datetime.toISOString(),
+  condition,
+  temperature: Math.round(temperature * 10) / 10,
+  precipitation: PRECIPITATION.get(condition) ?? 0,
+  precipitation_probability: PRECIPITATION.has(condition) ? 80 : 10,
+});
+
+const generateForecast = (
+  forecastType: ModernForecastType,
+  temperature: number,
+  condition: string
+): ForecastAttribute[] => {
+  const conditions = [condition, ...CONDITIONS.slice(1)];
+  const now = new Date();
+
+  if (forecastType === "hourly") {
+    now.setMinutes(0, 0, 0);
+
+    return Array.from({ length: 24 }, (_, hour) => {
+      const datetime = new Date(now.getTime() + (hour + 1) * HOUR);
+
+      // Warmest mid-afternoon and coldest before dawn
+      const change =
+        3 * Math.sin(((datetime.getHours() - 9) / 24) * 2 * Math.PI) -
+        3 * Math.sin(((now.getHours() - 9) / 24) * 2 * Math.PI);
+
+      return forecastEntry(
+        datetime,
+        temperature + change,
+        conditions[Math.floor(hour / 6)]
+      );
+    });
+  }
+
+  now.setHours(12, 0, 0, 0);
+
+  if (forecastType === "twice_daily") {
+    return conditions.flatMap((dayCondition, day) => {
+      const datetime = new Date(now.getTime() + day * 24 * HOUR);
+      const dayTemperature = temperature + TEMPERATURE_CHANGES[day];
+
+      return [
+        {
+          ...forecastEntry(datetime, dayTemperature, dayCondition),
+          is_daytime: true,
+        },
+        {
+          ...forecastEntry(
+            new Date(datetime.getTime() + 12 * HOUR),
+            dayTemperature - 6,
+            dayCondition
+          ),
+          is_daytime: false,
+        },
+      ];
+    });
+  }
+
+  return conditions.map((dayCondition, day) => {
+    const dayTemperature = temperature + TEMPERATURE_CHANGES[day];
+
+    return {
+      ...forecastEntry(
+        new Date(now.getTime() + day * 24 * HOUR),
+        dayTemperature,
+        dayCondition
+      ),
+      templow: Math.round((dayTemperature - 6) * 10) / 10,
+    };
+  });
+};
+
+/**
+ * Answers forecast subscriptions of weather entities. An entity with a
+ * `forecast` attribute gets that forecast. Other entities get a forecast made
+ * up from their condition and temperature.
+ */
+export const mockWeather = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "weather/subscribe_forecast",
+    (
+      msg: { entity_id: string; forecast_type: ModernForecastType },
+      currentHass,
+      onChange
+    ) => {
+      const stateObj = currentHass.states[msg.entity_id];
+      onChange?.({
+        type: msg.forecast_type,
+        forecast: stateObj
+          ? (stateObj.attributes.forecast ??
+            generateForecast(
+              msg.forecast_type,
+              Number(stateObj.attributes.temperature ?? 15),
+              stateObj.state
+            ))
+          : null,
+      });
+
+      return () => undefined;
+    }
+  );
+};

gallery/src/data/calendar.ts

@@ -1,68 +1,14 @@
+import {
+  FAMILY_EVENTS,
+  mockCalendarEvents,
+  WORK_EVENTS,
+} from "../../../demo/src/stubs/calendar";
 import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
 import type { CalendarEventApiData } from "../../../src/data/calendar";
 import { CalendarEntityFeature } from "../../../src/data/calendar";
 import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-// Sample calendars with events relative to today, so demos always show
-// something in the current week and month.
-
-const pad = (value: number) => String(value).padStart(2, "0");
-
-const day = (offset: number): Date => {
-  const date = new Date();
-  date.setHours(0, 0, 0, 0);
-  date.setDate(date.getDate() + offset);
-  return date;
-};
-
-const isoDate = (date: Date) =>
-  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-
-const at = (offset: number, hours: number, minutes = 0) => {
-  const date = day(offset);
-  date.setHours(hours, minutes);
-  return date.toISOString();
-};
-
-const allDay = (offset: number, days = 1) => ({
-  start: isoDate(day(offset)),
-  end: isoDate(day(offset + days)),
-  all_day: true,
-});
-
-const FAMILY_EVENTS: CalendarEventApiData[] = [
-  { summary: "School run", start: at(0, 8), end: at(0, 8, 30) },
-  {
-    summary: "Dentist",
-    start: at(0, 15, 30),
-    end: at(0, 16, 15),
-    location: "Main Street 12",
-  },
-  { summary: "Grandma's birthday", ...allDay(1) },
-  { summary: "Football practice", start: at(2, 17), end: at(2, 18, 30) },
-  {
-    summary: "Dinner with friends",
-    start: at(3, 19),
-    end: at(3, 22),
-    status: "tentative",
-  },
-  { summary: "Summer cabin", ...allDay(5, 3) },
-  { summary: "Parent-teacher meeting", start: at(9, 18), end: at(9, 19) },
-  { summary: "Football practice", start: at(9, 17), end: at(9, 18, 30) },
-  { summary: "Swimming lessons", start: at(12, 10), end: at(12, 11) },
-  { summary: "Car service", start: at(-3, 9), end: at(-3, 11) },
-  { summary: "Book club", start: at(-6, 19), end: at(-6, 21) },
-];
-
-const WORK_EVENTS: CalendarEventApiData[] = [
-  { summary: "Stand-up", start: at(0, 9), end: at(0, 9, 15) },
-  { summary: "Sprint planning", start: at(2, 10), end: at(2, 12) },
-  { summary: "Team lunch", start: at(4, 12), end: at(4, 13) },
-  { summary: "Conference", ...allDay(8, 2) },
-  { summary: "Quarterly review", start: at(-2, 14), end: at(-2, 15, 30) },
-];
-
 const EVENTS: Record<string, CalendarEventApiData[] | null> = {
   "calendar.family": FAMILY_EVENTS,
   "calendar.work": WORK_EVENTS,
@@ -79,8 +25,8 @@ export const CALENDAR_ENTITIES = [
       friendly_name: "Family",
       message: "School run",
       all_day: false,
-      start_time: at(0, 8),
-      end_time: at(0, 8, 30),
+      start_time: FAMILY_EVENTS[0].start,
+      end_time: FAMILY_EVENTS[0].end,
       location: "",
       description: "",
       supported_features:
@@ -96,8 +42,8 @@ export const CALENDAR_ENTITIES = [
       friendly_name: "Work",
       message: "Stand-up",
       all_day: false,
-      start_time: at(0, 9),
-      end_time: at(0, 9, 15),
+      start_time: WORK_EVENTS[0].start,
+      end_time: WORK_EVENTS[0].end,
     },
   },
   {
@@ -145,20 +91,7 @@ export const mockCalendars = (hass: MockHomeAssistant) => {
     registryEntry("calendar.empty"),
     registryEntry("calendar.holidays"),
   ]);
-  hass.mockWS("calendar/event/subscribe", (msg, _hass, onChange) => {
-    const start = new Date(msg.start).getTime();
-    const end = new Date(msg.end).getTime();
-    const events = EVENTS[msg.entity_id];
-    onChange?.({
-      events:
-        events?.filter(
-          (event) =>
-            new Date(event.end as string).getTime() > start &&
-            new Date(event.start as string).getTime() < end
-        ) ?? null,
-    });
-    return () => undefined;
-  });
+  mockCalendarEvents(hass, (entityId) => EVENTS[entityId]);
   // Changes made in the event dialogs are accepted but not stored
   hass.mockWS("calendar/event/create", () => null);
   hass.mockWS("calendar/event/update", () => null);

gallery/src/pages/components/ha-target-picker-exclusions.ts

@@ -5,6 +5,7 @@ import { customElement, state } from "lit/decorators";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { explainTarget } from "../../../../demo/src/stubs/explain_target";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { ensureArray } from "../../../../src/common/array/ensure-array";
 import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
@@ -225,6 +226,20 @@ class DemoHaTargetPickerExclusions
     hass.updateHass({ areas, entities: ENTITY_REGISTRY });
     hass.mockWS("config/device_registry/list_composite_splits", () => ({}));
     hass.mockWS("extract_from_target", extractFromTarget);
+    hass.mockWS("explain_target", ({ target }: { target: HassServiceTarget }) =>
+      explainTarget(
+        target,
+        (single) => {
+          const resolved = extractFromTarget({ target: single });
+          return {
+            areas: resolved.referenced_areas,
+            devices: resolved.referenced_devices,
+            entities: resolved.referenced_entities,
+          };
+        },
+        Object.keys(hass.states)
+      )
+    );
     hass.mockWS("auth/sign_path", (params) => params);
   }
 

pyproject.toml

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

src/common/controllers/media-progress-controller.ts

@@ -144,7 +144,8 @@ export class MediaProgressController implements ReactiveController {
       return;
     }
     slider.valueFormatter = formatMediaTime;
-    if (slider.matches(":state(dragging)")) {
+    // matches(":state(dragging)") throws before Chromium 125.
+    if (slider.customStates.has("dragging")) {
       return;
     }
     slider.value = this.progress ?? 0;

src/common/dom/rewrite-html-urls.ts

@@ -1,5 +1,5 @@
 // The attributes that hold the address of a link or an image
-const URL_ATTRIBUTES = [
+export const URL_ATTRIBUTES = [
   ["a", "href"],
   ["img", "src"],
   ["source", "src"],

src/common/entity/alert_active.ts

@@ -1,5 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
+import { computeCssColor } from "../color/compute-color";
 import { computeDomain } from "./compute_domain";
+import { stateColorCss } from "./state_color";
 
 export const ALERT_DOMAINS = [
   "alarm_control_panel",
@@ -8,8 +10,6 @@ export const ALERT_DOMAINS = [
   "lock",
 ];
 
-export const DEFAULT_ALERT_COLOR = "red";
-
 export const computeAlertActiveStates = (entityId: string): string[] => {
   switch (computeDomain(entityId)) {
     case "alarm_control_panel":
@@ -25,3 +25,16 @@ export const computeAlertActiveStates = (entityId: string): string[] => {
 
 export const isAlertActive = (stateObj: HassEntity): boolean =>
   computeAlertActiveStates(stateObj.entity_id).includes(stateObj.state);
+
+export const computeAlertColor = (
+  stateObj: HassEntity,
+  color: string
+): string | undefined => {
+  if (color === "none") {
+    return undefined;
+  }
+  if (color === "state") {
+    return stateColorCss(stateObj);
+  }
+  return computeCssColor(color);
+};

src/common/entity/compute_attribute_display.ts

@@ -6,6 +6,7 @@ import {
 } from "../../data/entity/entity_attributes";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
+import { TimeZone } from "../../data/translation";
 import type { WeatherEntity } from "../../data/weather";
 import { getWeatherUnit } from "../../data/weather";
 import type { HomeAssistant, ValuePart } from "../../types";
@@ -115,6 +116,24 @@ export const computeAttributeValueToParts = (
         }
       }
 
+      // Date only, which is timezone agnostic, so parse and format it as
+      // local time to keep the same calendar day
+      if (isDate(attributeValue)) {
+        const date = new Date(`${attributeValue}T00:00`);
+        if (checkValidDate(date)) {
+          return [
+            {
+              type: "value",
+              value: formatDate(
+                date,
+                { ...locale, time_zone: TimeZone.local },
+                config
+              ),
+            },
+          ];
+        }
+      }
+
       // Value was not a timestamp, so only do date formatting
       const date = new Date(attributeValue);
       if (checkValidDate(date)) {

src/common/map/base-layer.ts

@@ -16,8 +16,8 @@ import {
 // other one is built in the browser. The attribution comes from the TileJSON,
 // deliberately: it follows whoever serves the tiles.
 const SHIPPED_STYLES = {
-  light: "/static/map/light.json",
-  dark: "/static/map/dark.json",
+  light: `${__STATIC_PATH__}map/light.json`,
+  dark: `${__STATIC_PATH__}map/dark.json`,
 } as const;
 
 // MapLibre needs WebGL2 even for raster, so the fallback stays a Leaflet layer.
@@ -92,8 +92,12 @@ const useDemoUpstream = (style: StyleSpecification): StyleSpecification => {
   return style;
 };
 
+// The origin that serves the frontend's files: the page, except for the demo
+// embed on another site
+const filesBase = () => new URL(__STATIC_PATH__, location.href);
+
 // MapLibre rejects a relative sprite URL
-const absoluteSprite = (url: string) => new URL(url, location.href).href;
+const absoluteSprite = (url: string) => new URL(url, filesBase()).href;
 
 // Shared only while in flight, or a style that failed once would never be
 // fetched again. Text rather than a parsed style: MapLibre mutates what it
@@ -141,14 +145,15 @@ export const loadStyle = async (
 
 // Global to MapLibre; set once before the first map is created. Absolute,
 // because on Cast the page is not served from the instance. The URL comes
-// from the build: the worker is an entry of its own, next to the app.
+// from the build: the worker is an entry of its own, next to the app. MapLibre
+// starts a worker from another origin itself.
 let workerUrlSet = false;
 export const ensureWorkerUrl = (setUrl: typeof setWorkerUrl) => {
   if (workerUrlSet) {
     return;
   }
   workerUrlSet = true;
-  setUrl(new URL(__MAPLIBRE_WORKER_URL__, location.href).href);
+  setUrl(new URL(__MAPLIBRE_WORKER_URL__, filesBase()).href);
 };
 
 const createVectorLayer = async (

src/common/map/build-map-style.ts

@@ -16,7 +16,7 @@ import { finalizeMapStyle } from "./map-style-transforms";
  */
 // Versioned: /static is served with a month of max-age, so a cached manifest
 // could otherwise pair a new build with the sprite sheet of an old one.
-const STYLE_URLS_PATH = `/static/map/urls.json?v=${__VERSION__}`;
+const STYLE_URLS_PATH = `${__STATIC_PATH__}map/urls.json?v=${__VERSION__}`;
 
 let urls: Promise<OsmOptions["urls"]> | undefined;
 

src/common/map/engines/maplibre-map-engine.ts

@@ -78,7 +78,7 @@ const POSITIONS: Record<
   bottomright: "bottom-right",
 };
 
-const MAPLIBRE_CSS_URL = "/static/map/maplibre-gl.css";
+const MAPLIBRE_CSS_URL = `${__STATIC_PATH__}map/maplibre-gl.css`;
 // Fully hidden behind the globe, not MapLibre's faint ghost
 const MARKER_OPTIONS = { opacityWhenCovered: 0 };
 

src/components/automation/ha-automation-condition-summary.ts

@@ -1,4 +1,4 @@
-import type { ContextType } from "@lit/context";
+import { provide, type ContextType } from "@lit/context";
 import { mdiCommentTextOutline } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
@@ -17,9 +17,14 @@ import { getEntityTarget } from "../../panels/config/automation/target/get_entit
 import "../../panels/config/automation/target/ha-automation-row-targets";
 import "../ha-svg-icon";
 import "../ha-tooltip";
+import { targetExpandGroupContext } from "../target-picker/target-expand-group-context";
 
 @customElement("ha-automation-condition-summary")
 export class HaAutomationConditionSummary extends LitElement {
+  // Triggers and conditions don't expand the groups their targets name.
+  @provide({ context: targetExpandGroupContext })
+  protected _targetExpandGroup = false;
+
   @property() public label = "";
 
   @property({ attribute: false }) public condition?: Condition;

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

@@ -89,6 +89,8 @@ export const DEFAULT_CHART_WIDTH = 500;
 // is short enough for a whole screenful; on a desktop that would cover the page.
 const VISIBILITY_ROOT_MARGIN_NARROW = "100%";
 const VISIBILITY_ROOT_MARGIN = "300px";
+
+export type ZoomSliderMode = "auto" | "always" | "never";
 const DEFERRED_PROPS = [
   "options",
   "data",
@@ -163,9 +165,10 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
   @property({ attribute: "small-controls", type: Boolean })
   public smallControls?: boolean;
 
-  // For charts zoomed from outside, like the synced History charts
-  @property({ attribute: "hide-zoom-controls", type: Boolean })
-  public hideZoomControls = false;
+  // "auto" shows the zoom slider once zoomed. "never" hides every zoom
+  // control, for charts zoomed from outside like the synced History charts.
+  @property({ attribute: "zoom-slider" })
+  public zoomSlider: ZoomSliderMode = "auto";
 
   // For charts sized to their content, like timelines, which grow to fit the
   // zoom slider instead of giving up plot height
@@ -617,7 +620,7 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
           >
             ${
               (this._isZoomed || this._isGraphRoamed) &&
-              !this.hideZoomControls &&
+              this.zoomSlider !== "never" &&
               !showZoomSlider
                 ? html`<ha-icon-button
                     class="zoom-reset"
@@ -1064,9 +1067,12 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
   private _showZoomSlider() {
     const [start, end] = this._zoomRange;
     return (
-      !this.hideZoomControls &&
+      this.zoomSlider !== "never" &&
       this._hasZoomableXAxis() &&
-      (this._zoomSliderHeld || start !== 0 || end !== 100)
+      (this.zoomSlider === "always" ||
+        this._zoomSliderHeld ||
+        start !== 0 ||
+        end !== 100)
     );
   }
 
@@ -2306,6 +2312,9 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
       --ha-assist-chip-trailing-space: var(--ha-space-2);
       --ha-assist-chip-icon-label-space: var(--ha-space-1);
     }
+    .zoom-reset {
+      margin-inline-end: var(--ha-space-3);
+    }
   `;
 }
 

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

@@ -648,7 +648,7 @@ export class HaNetworkGraph extends LitElement {
 
     ha-icon-button,
     ::slotted(ha-icon-button) {
-      margin-right: 12px;
+      margin-inline-end: var(--ha-space-3);
     }
   `;
 }

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

@@ -24,6 +24,7 @@ import type {
   HomeAssistantInternationalization,
 } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import type { ZoomSliderMode } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import {
@@ -105,8 +106,8 @@ export class StateHistoryChartLine extends LitElement {
   @property({ attribute: "expand-legend", type: Boolean })
   public expandLegend?: boolean;
 
-  @property({ attribute: "hide-zoom-controls", type: Boolean })
-  public hideZoomControls = false;
+  @property({ attribute: "zoom-slider" })
+  public zoomSlider: ZoomSliderMode = "auto";
 
   @state() private _chartData: LineSeriesOption[] = [];
 
@@ -159,7 +160,7 @@ export class StateHistoryChartLine extends LitElement {
         @dataset-unhidden=${this._datasetUnhidden}
         @chart-zoom=${this._handleDataZoom}
         .expandLegend=${this.expandLegend}
-        .hideZoomControls=${this.hideZoomControls}
+        .zoomSlider=${this.zoomSlider}
         .clickLabelForMoreInfo=${this.clickForMoreInfo}
         @legend-label-click=${this._handleLegendLabelClick}
       ></ha-chart-base>

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

@@ -22,6 +22,7 @@ import type {
   HomeAssistantInternationalization,
 } from "../../types";
 import { DEFAULT_CHART_WIDTH, MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
+import type { ZoomSliderMode } from "./ha-chart-base";
 import { itemTooltipPosition } from "./chart-tooltip-position";
 import "./ha-chart-tooltip-marker";
 import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
@@ -68,8 +69,8 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public chartIndex?;
 
-  @property({ attribute: "hide-zoom-controls", type: Boolean })
-  public hideZoomControls = false;
+  @property({ attribute: "zoom-slider" })
+  public zoomSlider: ZoomSliderMode = "auto";
 
   @state() private _chartData: CustomSeriesOption[] = [];
 
@@ -105,7 +106,7 @@ export class StateHistoryChartTimeline extends LitElement {
         grow-for-zoom-slider
         @chart-click=${this._handleChartClick}
         @chart-zoom=${this._handleDataZoom}
-        .hideZoomControls=${this.hideZoomControls}
+        .zoomSlider=${this.zoomSlider}
       ></ha-chart-base>
     `;
   }

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

@@ -218,7 +218,7 @@ export class StateHistoryCharts extends LitElement {
           @chart-zoom-with-index=${this._handleTimelineSync}
           .height=${this.virtualize ? undefined : this.height}
           .expandLegend=${this.expandLegend}
-          ?hide-zoom-controls=${this.syncCharts}
+          .zoomSlider=${this.syncCharts ? "never" : "auto"}
         ></state-history-chart-line>
       </div> `;
     }
@@ -237,7 +237,7 @@ export class StateHistoryCharts extends LitElement {
         .clickForMoreInfo=${this.clickForMoreInfo}
         @y-width-changed=${this._yWidthChanged}
         @chart-zoom-with-index=${this._handleTimelineSync}
-        ?hide-zoom-controls=${this.syncCharts}
+        .zoomSlider=${this.syncCharts ? "never" : "auto"}
       ></state-history-chart-timeline>
     </div> `;
   };

src/components/chips/ha-chip-base.ts

@@ -352,6 +352,7 @@ export class HaChipBase extends HaButton {
         }
         .container {
           display: flex;
+          flex: 1;
           align-items: center;
           min-width: 0;
           max-width: 100%;

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

@@ -29,9 +29,9 @@ import type {
 } from "../../common/translations/localize";
 import { formattersContext, registriesContext } from "../../data/context";
 import type { HomeAssistantFormatters, ValueChangedEvent } from "../../types";
-import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
+import "../ha-button";
 import "../ha-button-toggle-group";
 import "../ha-combo-box-item";
 import "../ha-generic-picker";
@@ -121,6 +121,8 @@ export class HaEntityNamePicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @query("ha-button.add") private _addButton?: HTMLElement;
+
   private _editIndex?: number;
 
   connectedCallback(): void {
@@ -159,7 +161,7 @@ export class HaEntityNamePicker extends LitElement {
     return html`
       <div class="container">
         <div class="header">
-          ${this.label ? html`<label>${this.label}</label>` : nothing}
+          ${this.label ? html`<label id="label">${this.label}</label>` : nothing}
           ${
             this.allowCustom
               ? html`
@@ -264,7 +266,9 @@ export class HaEntityNamePicker extends LitElement {
             handle-selector="button.primary.action"
             filter=".add"
           >
-            <ha-chip-set>
+            <ha-chip-set
+              aria-labelledby=${ifDefined(this.label ? "label" : undefined)}
+            >
               ${repeat(
                 this._items,
                 (item) => item,
@@ -290,22 +294,16 @@ export class HaEntityNamePicker extends LitElement {
                   `;
                 }
               )}
-              ${
-                this.disabled
-                  ? nothing
-                  : html`
-                      <ha-assist-chip
-                        @click=${this._addItem}
-                        .disabled=${this.disabled}
-                        label=${this._localize(
-                          "ui.components.entity.entity-name-picker.add"
-                        )}
-                        class="add"
-                      >
-                        <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                      </ha-assist-chip>
-                    `
-              }
+              <ha-button
+                class="add"
+                size="s"
+                appearance="filled"
+                .disabled=${this.disabled}
+                @click=${this._addItem}
+              >
+                <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
+                ${this._localize("ui.common.add")}
+              </ha-button>
             </ha-chip-set>
           </ha-sortable>
           ${this._renderRestoreButton()}
@@ -373,6 +371,10 @@ export class HaEntityNamePicker extends LitElement {
     const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
     value.splice(idx, 1);
     this._setValue(value);
+    if (!value.length) {
+      await this.updateComplete;
+      this._addButton?.focus();
+    }
   }
 
   private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
@@ -629,7 +631,7 @@ export class HaEntityNamePicker extends LitElement {
 
     label {
       display: block;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
 
     .content {
@@ -722,7 +724,8 @@ export class HaEntityNamePicker extends LitElement {
 
     ha-input-helper-text {
       display: block;
-      margin: var(--ha-space-2) 0 0;
+      padding: 0;
+      margin: var(--ha-space-1) 0 0;
     }
   `;
 }

src/components/ha-ansi-to-html.ts

@@ -58,6 +58,10 @@ export class HaAnsiToHtml extends LitElement {
   // The hidden lines each expand row shows when clicked.
   private _expandGaps = new WeakMap<HTMLElement, HTMLDivElement[]>();
 
+  public get hasLines(): boolean {
+    return !!this._pre?.childElementCount;
+  }
+
   protected render(): TemplateResult {
     return html`<pre class=${classMap({ wrap: !this.wrapDisabled })}></pre>`;
   }

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

@@ -245,15 +245,15 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
     const newOrder: string[] = [];
 
     for (const floorId of floorIds) {
+      const isOnFloor = (areaId: string) =>
+        (this._areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR) === floorId;
       if ((currentFloorId ?? UNASSIGNED_FLOOR) === floorId) {
-        newHidden.push(...(value.hidden ?? []));
+        // Reordering returns the hidden areas of every floor, not just this one
+        newHidden.push(...(value.hidden ?? []).filter(isOnFloor));
         newOrder.push(...(value.order ?? []));
         continue;
       }
-      const hidden = oldHidden.filter((areaId) => {
-        const id = this._areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR;
-        return id === floorId;
-      });
+      const hidden = oldHidden.filter(isOnFloor);
       if (hidden?.length) {
         newHidden.push(...hidden);
       }

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

@@ -1,7 +1,9 @@
 import type { ContextType } from "@lit/context";
+import { mdiPlus } from "@mdi/js";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -26,6 +28,10 @@ import "./chips/ha-input-chip";
 import "./ha-combo-box-item";
 import "./ha-domain-icon";
 import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import "./ha-button";
+import "./ha-svg-icon";
+import "./ha-input-helper-text";
 import type {
   PickerComboBoxItem,
   PickerComboBoxSearchFn,
@@ -82,6 +88,8 @@ export class HaEntityTypePicker extends LitElement {
   @consume({ context: statesContext, subscribe: true })
   private _states?: ContextType<typeof statesContext>;
 
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;
+
   private _titlesLoaded = false;
 
   protected willUpdate() {
@@ -237,40 +245,13 @@ export class HaEntityTypePicker extends LitElement {
     const localize = this._i18n?.localize;
     const value = this.value ?? [];
     const chipLabels = localize ? this._chipLabels(localize, value) : undefined;
-
+    const addLabel = localize?.("ui.common.add");
     return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      ${
-        value.length && chipLabels
-          ? html`
-              <ha-chip-set>
-                ${repeat(
-                  value,
-                  (key) => key,
-                  (key) => {
-                    const label = chipLabels.get(key)!;
-                    return html`
-                      <ha-input-chip
-                        data-key=${key}
-                        .label=${label}
-                        .disabled=${this.disabled}
-                        @remove=${this._removeItem}
-                        selected
-                      >
-                        ${this._renderIcon(key, "icon")} ${label}
-                      </ha-input-chip>
-                    `;
-                  }
-                )}
-              </ha-chip-set>
-            `
-          : nothing
-      }
+      ${this.label ? html`<label id="label">${this.label}</label>` : nothing}
       <ha-generic-picker
-        .helper=${this.helper}
+        .label=${this.label}
         .disabled=${this.disabled}
         .value=${""}
-        .addButtonLabel=${localize?.("ui.components.entity-type-picker.add")}
         .getItems=${this._getItems}
         .rowRenderer=${this._rowRenderer}
         .searchFn=${this._searchFn}
@@ -278,10 +259,53 @@ export class HaEntityTypePicker extends LitElement {
         .emptyLabel=${localize?.("ui.components.entity-type-picker.no_types")}
         no-sort
         @value-changed=${this._itemAdded}
-      ></ha-generic-picker>
+      >
+        <ha-chip-set
+          slot="field"
+          aria-labelledby=${ifDefined(this.label ? "label" : undefined)}
+        >
+          ${repeat(
+            value,
+            (key) => key,
+            (key) => {
+              const label = chipLabels?.get(key) ?? key;
+              return html`
+                <ha-input-chip
+                  data-key=${key}
+                  .label=${label}
+                  .disabled=${this.disabled}
+                  @remove=${this._removeItem}
+                  selected
+                >
+                  ${this._renderIcon(key, "icon")} ${label}
+                </ha-input-chip>
+              `;
+            }
+          )}
+          <ha-button
+            size="s"
+            appearance="filled"
+            .disabled=${this.disabled}
+            @click=${this._openPicker}
+          >
+            <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
+            ${addLabel}
+          </ha-button>
+        </ha-chip-set>
+      </ha-generic-picker>
+      ${
+        this.helper
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+          : nothing
+      }
     `;
   }
 
+  private _openPicker(ev: Event) {
+    ev.stopPropagation();
+    this._picker?.open();
+  }
+
   private _itemAdded(ev: CustomEvent<{ value?: string }>) {
     ev.stopPropagation();
     const key = ev.detail.value;
@@ -320,7 +344,15 @@ export class HaEntityTypePicker extends LitElement {
       width: 100%;
     }
     ha-chip-set {
-      padding: var(--ha-space-2) 0;
+      background-color: var(--mdc-text-field-fill-color);
+      border-bottom: 1px solid var(--ha-color-border-neutral-normal);
+      border-top-right-radius: var(--ha-border-radius-sm);
+      border-top-left-radius: var(--ha-border-radius-sm);
+      padding: var(--ha-space-3);
+    }
+    ha-input-helper-text {
+      padding: 0;
+      margin-top: var(--ha-space-1);
     }
   `;
 }

src/components/ha-markdown-element.ts

@@ -86,6 +86,7 @@ class HaMarkdownElement extends ReactiveElement {
       allowSvg: this.allowSvg,
       allowDataUrl: this.allowDataUrl,
       breaks: this.breaks,
+      rewriteUrl: Boolean(this.rewriteUrl),
     });
   }
 
@@ -99,6 +100,7 @@ class HaMarkdownElement extends ReactiveElement {
       {
         allowSvg: this.allowSvg,
         allowDataUrl: this.allowDataUrl,
+        allowRelativeUrls: Boolean(this.rewriteUrl),
       }
     );
 

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

@@ -376,6 +376,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         virtual-focus
         controlled
         tabindex="0"
+        @mousedown=${this._preventBlur}
         @focus=${this._focusList}
         @blur=${this._resetSelectedItem}
       >
@@ -406,6 +407,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           this.value
         )}
         .pinIndex=${this.value ? this._getInitialSelectedIndex() : undefined}
+        @mousedown=${this._preventBlur}
         @focus=${this._focusList}
         @blur=${this._resetSelectedItem}
         @ha-list-visibility-changed=${this._visibilityChanged}
@@ -430,6 +432,12 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
                 .section-id=${section.id}
                 .selected=${this._selectedSection === section.id}
                 .label=${section.label}
+                aria-label=${
+                  this.i18n?.localize?.(
+                    "ui.components.combo-box.filter_by_section",
+                    { section: section.label }
+                  ) || section.label
+                }
               >
               </ha-filter-chip>`
         )}
@@ -684,6 +692,8 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     this._resetListScroll();
   };
 
+  // Keep focus in the search field, so a focus change doesn't scroll the
+  // list to the active row and make the click miss.
   private _preventBlur(ev: Event) {
     ev.preventDefault();
   }

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

@@ -1,26 +1,28 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { consume } from "../../common/decorators/consume";
 import { ensureArray } from "../../common/array/ensure-array";
-import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { internationalizationContext } from "../../data/context";
 import type { SelectOption, SelectSelector } from "../../data/selector";
-import type { FrontendLocaleData } from "../../data/translation";
 import type { HomeAssistantInternationalization } from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
 import "../ha-dropdown-item";
 import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-button";
 import "../ha-input-helper-text";
 import "../ha-select";
 import "../ha-select-box";
 import "../ha-sortable";
+import "../ha-svg-icon";
 import "../radio/ha-radio-group";
 import "../radio/ha-radio-option";
 
@@ -28,10 +30,7 @@ import "../radio/ha-radio-option";
 export class HaSelectSelector extends LitElement {
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
-  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
-    transformer: ({ locale }) => locale,
-  })
-  private _locale!: FrontendLocaleData;
+  private _i18n!: HomeAssistantInternationalization;
 
   @property({ attribute: false }) public selector!: SelectSelector;
 
@@ -48,6 +47,8 @@ export class HaSelectSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;
+
   private _itemMoved(ev: CustomEvent): void {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
@@ -83,7 +84,11 @@ export class HaSelectSelector extends LitElement {
 
     if (this.selector.select?.sort) {
       options.sort((a, b) =>
-        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
+        caseInsensitiveStringCompare(
+          a.label,
+          b.label,
+          this._i18n.locale.language
+        )
       );
     }
 
@@ -158,67 +163,80 @@ export class HaSelectSelector extends LitElement {
       const value =
         !this.value || this.value === "" ? [] : ensureArray(this.value);
 
+      const addLabel = this._i18n.localize("ui.common.add");
+
       return html`
         ${
-          value?.length
-            ? html`
-                <ha-sortable
-                  no-style
-                  .disabled=${!this.selector.select.reorder}
-                  @item-moved=${this._itemMoved}
-                  handle-selector="button.primary.action"
-                >
-                  <ha-chip-set>
-                    ${repeat(
-                      value,
-                      (item) => item,
-                      (item, idx) => {
-                        const label =
-                          options.find((option) => option.value === item)
-                            ?.label || item;
-                        return html`
-                          <ha-input-chip
-                            .idx=${idx}
-                            @remove=${this._removeItem}
-                            .label=${label}
-                            .title=${label}
-                            selected
-                          >
-                            ${
-                              this.selector.select?.reorder
-                                ? html`
-                                    <ha-svg-icon
-                                      slot="icon"
-                                      .path=${mdiDragHorizontalVariant}
-                                    ></ha-svg-icon>
-                                  `
-                                : nothing
-                            }
-                            ${
-                              options.find((option) => option.value === item)
-                                ?.label || item
-                            }
-                          </ha-input-chip>
-                        `;
-                      }
-                    )}
-                  </ha-chip-set>
-                </ha-sortable>
-              `
+          this.label
+            ? html`<span id="label" class="label chips-label"
+                >${this.label}</span
+              >`
             : nothing
         }
-
         <ha-generic-picker
           no-sort
-          .helper=${this.helper}
+          .label=${this.label}
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${""}
-          .addButtonLabel=${this.label}
           .getItems=${this._getItems(options, value, true)}
           .allowCustomValue=${this.selector.select.custom_value ?? false}
           @value-changed=${this._comboBoxValueChanged}
-        ></ha-generic-picker>
+        >
+          <ha-sortable
+            slot="field"
+            no-style
+            .disabled=${!this.selector.select.reorder}
+            @item-moved=${this._itemMoved}
+            draggable-selector="ha-input-chip"
+            handle-selector="button.primary.action"
+          >
+            <ha-chip-set
+              aria-labelledby=${ifDefined(this.label ? "label" : undefined)}
+            >
+              ${repeat(
+                value,
+                (item) => item,
+                (item, idx) => {
+                  const label =
+                    options.find((option) => option.value === item)?.label ||
+                    item;
+                  return html`
+                    <ha-input-chip
+                      .idx=${idx}
+                      @remove=${this._removeItem}
+                      .label=${label}
+                      .title=${label}
+                      selected
+                    >
+                      ${
+                        this.selector.select?.reorder
+                          ? html`
+                              <ha-svg-icon
+                                slot="icon"
+                                .path=${mdiDragHorizontalVariant}
+                              ></ha-svg-icon>
+                            `
+                          : nothing
+                      }
+                      ${label}
+                    </ha-input-chip>
+                  `;
+                }
+              )}
+              <ha-button
+                size="s"
+                appearance="filled"
+                .disabled=${this.disabled}
+                @click=${this._openPicker}
+              >
+                <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
+                ${addLabel}
+              </ha-button>
+            </ha-chip-set>
+          </ha-sortable>
+        </ha-generic-picker>
+        ${this._renderHelper()}
       `;
     }
 
@@ -263,6 +281,11 @@ export class HaSelectSelector extends LitElement {
       : "";
   }
 
+  private _openPicker(ev: Event) {
+    ev.stopPropagation();
+    this._picker?.open();
+  }
+
   private _getOptions = memoizeOne(
     (selector: SelectSelector) =>
       selector.select?.options?.map((option) =>
@@ -403,19 +426,32 @@ export class HaSelectSelector extends LitElement {
     ha-dropdown-item[disabled] {
       --mdc-theme-text-primary-on-background: var(--disabled-text-color);
     }
-    ha-chip-set {
-      padding: 8px 0;
-    }
-
     .label {
       display: block;
       margin: 0 0 8px;
     }
 
+    .chips-label {
+      font-weight: var(--ha-font-weight-medium);
+    }
+
+    ha-sortable ha-chip-set {
+      background-color: var(--mdc-text-field-fill-color);
+      border-bottom: 1px solid var(--ha-color-border-neutral-normal);
+      border-top-right-radius: var(--ha-border-radius-sm);
+      border-top-left-radius: var(--ha-border-radius-sm);
+      padding: var(--ha-space-3);
+    }
+
     ha-select-box + ha-input-helper-text {
       margin-top: 4px;
     }
 
+    ha-generic-picker + ha-input-helper-text {
+      padding: 0;
+      margin-top: 4px;
+    }
+
     .checkbox-list ha-input-helper-text {
       padding: 0;
       margin-top: 4px;

src/components/ha-selector/ha-selector-unit-of-measurement.ts

@@ -98,8 +98,9 @@ export class HaUnitOfMeasurementSelector extends LitElement {
       return;
     }
 
-    if (this.required && units.length === 1 && units[0] !== null) {
-      // Preselect the only allowed unit
+    if (units.length === 1 && units[0] !== null) {
+      // Preselect the only allowed unit; "no unit" is not allowed either, so
+      // this also applies to an optional field
       fireEvent(this, "value-changed", { value: units[0] });
     }
   }

src/components/ha-target-picker.ts

@@ -41,9 +41,7 @@ import { domainToName } from "../data/integration";
 import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
-  extractFromTarget,
   getTargetComboBoxItemType,
-  type ExtractFromTargetResult,
   type HassServiceTargetWithExclude,
   type TargetItem,
   type TargetType,
@@ -70,21 +68,15 @@ import "./list/ha-list-base";
 import "./target-picker/ha-target-picker-item-group";
 import "./target-picker/ha-target-picker-item-row";
 import { showTargetDetailsDialog } from "./target-picker/dialog/show-dialog-target-details";
-import { filterTargetEntries } from "./target-picker/filter-target-entries";
+import { TargetExclusionsController } from "./target-picker/target-exclusions-controller";
 import {
   addToExclude,
   applyExclusionChanges,
-  computeExclusionsPerTarget,
   hasIncludedTargets,
   removeFromExclude,
-  resolveTargetItemEntities,
   TARGET_TYPES,
   targetItemKey,
-  targetItems,
   withExclude,
-  type ResolvedTargetItem,
-  type TargetExclusion,
-  type TargetExclusions,
 } from "./target-picker/target-exclusions";
 
 const SEPARATOR = "________";
@@ -151,24 +143,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _excludeSection?: TargetTypeFloorless;
 
-  // What each exclusion takes out of each target, worked out from the value.
-  @state() private _exclusions?: TargetExclusions;
-
-  // Whether every included target and every exclusion resolved, so it is
-  // known what each exclusion takes out, which ones are shared with another
-  // target, and the details can edit them.
-  @state() private _exclusionsComplete = true;
-
-  // Every entity the included targets resolve to, so the exclude picker only
-  // offers what would take something out.
-  private _includedEntities?: string[];
-
-  private _resolveRequest = 0;
-
-  // What each target item resolves to, so a change only asks core about the
-  // items it adds.
-  private _itemEntries = new Map<string, Promise<ExtractFromTargetResult>>();
-
   @state() private _replaceTarget?: TargetItem;
 
   @state() private _replaceTargetAnchor?: HTMLElement;
@@ -189,6 +163,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _newTarget?: TargetItem;
 
+  private _exclusions = new TargetExclusionsController(this);
+
   private _getDevicesMemoized = memoizeOne(
     (
       hass: HomeAssistant,
@@ -302,9 +278,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       (devicesChanged ||
         this.hass.entities !== changedProps.get("hass")?.entities ||
         this.hass.areas !== changedProps.get("hass")?.areas);
-    if (registriesChanged) {
-      this._itemEntries.clear();
-    }
     if (
       changedProps.has("value") ||
       changedProps.has("allowExclude") ||
@@ -315,7 +288,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       changedProps.has("entityFilter") ||
       registriesChanged
     ) {
-      this._resolveExclusions();
+      this._exclusions.resolve();
     }
 
     if (
@@ -351,12 +324,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       ? ensureArray(this.value?.label_id)
       : [];
 
-    const noEffect = this._exclusions?.noEffect ?? [];
-    const unplaced = this._unplacedExclusions(
-      this.value?.exclude,
-      this._exclusions
-    );
-    const perTarget = this._exclusionsPerTarget();
+    const noEffect = this._exclusions.exclusions?.noEffect ?? [];
+    const unplaced = this._exclusions.unplaced;
+    const perTarget = this._exclusions.perTarget;
 
     if (
       !entityIds.length &&
@@ -497,25 +467,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     `;
   }
 
-  // Excludes that aren't listed under a target or as having no effect,
-  // because they are still being resolved or resolving them failed.
-  private _unplacedExclusions = memoizeOne(
-    (
-      exclude: HassServiceTarget | undefined,
-      exclusions: TargetExclusions | undefined
-    ): TargetItem[] => {
-      const placed = new Set([
-        ...Object.values(exclusions?.perTarget ?? {}).flatMap((list) =>
-          list.map(targetItemKey)
-        ),
-        ...(exclusions?.noEffect ?? []).map(targetItemKey),
-      ]);
-      return targetItems(exclude).filter(
-        (item) => !placed.has(targetItemKey(item))
-      );
-    }
-  );
-
   private _renderItems() {
     return html` ${this._renderValueGroups()} `;
   }
@@ -612,155 +563,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  private _extractItem(
-    item: TargetItem,
-    primaryEntitiesOnly: boolean
-  ): Promise<ExtractFromTargetResult> {
-    const key = `${primaryEntitiesOnly}:${targetItemKey(item)}`;
-    let entries = this._itemEntries.get(key);
-    if (!entries) {
-      entries = extractFromTarget(
-        this.hass.callWS,
-        { [`${item.type}_id`]: [item.id] },
-        false,
-        primaryEntitiesOnly
-      );
-      this._itemEntries.set(key, entries);
-      const cached = entries;
-      cached.catch(() => {
-        if (this._itemEntries.get(key) === cached) {
-          this._itemEntries.delete(key);
-        }
-      });
-    }
-    return entries;
-  }
-
-  // The entities an included item adds, filtered like its row so what an
-  // exclusion takes out matches what the row counts.
-  private async _resolveInclude(item: TargetItem): Promise<string[]> {
-    if (item.type === "entity") {
-      return resolveTargetItemEntities(this.hass, item);
-    }
-    const entries = await this._extractItem(
-      item,
-      this.primaryEntitiesOnly ?? true
-    );
-    return filterTargetEntries(
-      this.hass.states,
-      this.hass.entities,
-      this.hass.devices,
-      this.hass.areas,
-      item,
-      entries,
-      {
-        deviceFilter: this.deviceFilter,
-        entityFilter: this.entityFilter,
-        includeDomains: this.includeDomains,
-        includeDeviceClasses: this.includeDeviceClasses,
-        primaryEntitiesOnly: this.primaryEntitiesOnly,
-      }
-    ).referenced_entities;
-  }
-
-  // Like core, an exclude takes out every entity of an item, not only the
-  // primary ones, and isn't narrowed by the filters.
-  private async _resolveExclude(item: TargetItem): Promise<string[]> {
-    if (item.type === "entity") {
-      return resolveTargetItemEntities(this.hass, item);
-    }
-    return (await this._extractItem(item, false)).referenced_entities;
-  }
-
-  private async _resolveExclusions() {
-    const request = ++this._resolveRequest;
-    this._includedEntities = undefined;
-    const value = this.value;
-    const excludes = targetItems(value?.exclude);
-    const includes = targetItems(value);
-    // Without an exclude, the targets are only needed to tell whether an
-    // exclusion made in the details is shared with another target.
-    if (
-      !this.hass ||
-      (!excludes.length && (!this.allowExclude || includes.length < 2))
-    ) {
-      this._exclusions = undefined;
-      this._exclusionsComplete = true;
-      return;
-    }
-    // Until the targets resolve, the exclusions shown are from before and
-    // may not say which ones are shared now.
-    this._exclusionsComplete = false;
-
-    // Each item on its own, so it is known which exclusion takes out what
-    // from which target. One that fails only loses its own part.
-    const [includeResults, excludeResults] = await Promise.all([
-      Promise.allSettled(includes.map((item) => this._resolveInclude(item))),
-      Promise.allSettled(excludes.map((item) => this._resolveExclude(item))),
-    ]);
-    if (request !== this._resolveRequest) {
-      return;
-    }
-    const resolvedIncludes: ResolvedTargetItem[] = [];
-    includes.forEach((item, index) => {
-      const result = includeResults[index];
-      if (result.status === "fulfilled") {
-        resolvedIncludes.push({ ...item, entities: result.value });
-      }
-    });
-    const resolvedExcludes: ResolvedTargetItem[] = [];
-    excludes.forEach((item, index) => {
-      const result = excludeResults[index];
-      if (result.status === "fulfilled") {
-        resolvedExcludes.push({ ...item, entities: result.value });
-      }
-    });
-    const allIncluded = resolvedIncludes.length === includes.length;
-    const exclusions = computeExclusionsPerTarget(
-      resolvedIncludes,
-      resolvedExcludes
-    );
-    if (!allIncluded) {
-      // Without every target, no effect can't be told from not known, and a
-      // shared exclusion can't be told from one that isn't.
-      exclusions.noEffect = [];
-    }
-    this._exclusions = exclusions;
-    this._exclusionsComplete =
-      allIncluded && resolvedExcludes.length === excludes.length;
-    this._includedEntities = allIncluded
-      ? [
-          ...new Set(
-            includeResults.flatMap((result) =>
-              result.status === "fulfilled" ? result.value : []
-            )
-          ),
-        ]
-      : undefined;
-  }
-
   // Without an exclude yet, what the target includes is only needed once the
-  // exclude picker opens.
-  private async _resolveIncludedEntities() {
-    const request = this._resolveRequest;
-    try {
-      const included = await Promise.all(
-        targetItems(this.value).map((item) => this._resolveInclude(item))
-      );
-      if (request !== this._resolveRequest) {
-        return;
-      }
-      this._includedEntities = [...new Set(included.flat())];
-      this._excludePicker?.refreshItems();
-    } catch (_err) {
-      // The picker then offers everything instead.
-    }
-  }
-
-  private _openExcludePicker(ev: Event) {
+  // exclude picker opens, so it only offers what would take something out.
+  private async _openExcludePicker(ev: Event) {
     this._excludePicker?.open(ev);
-    if (!this._includedEntities) {
-      this._resolveIncludedEntities();
+    if (!this._exclusions.includedEntities) {
+      await this._exclusions.resolve({ force: true });
+      this._excludePicker?.refreshItems();
     }
   }
 
@@ -791,27 +600,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _exclusionsPerTarget():
-    Record<string, TargetExclusion[]> | undefined {
-    return (
-      this._exclusions?.perTarget ??
-      (this.allowExclude && !hasIncludedTargets(this.value?.exclude)
-        ? {}
-        : undefined)
-    );
-  }
-
   private _openDetails(ev: HASSDomEvent<HASSDomEvents["open-target-details"]>) {
     ev.stopPropagation();
     const { type, id, title } = ev.detail;
     const key = targetItemKey({ type, id });
-    const perTarget = this._exclusionsPerTarget();
+    const perTarget = this._exclusions.perTarget;
     const exclusions = perTarget ? (perTarget[key] ?? []) : undefined;
     const editable =
       exclusions &&
       this.allowExclude &&
       !this.disabled &&
-      this._exclusionsComplete;
+      this._exclusions.complete;
     showTargetDetailsDialog(this, {
       title,
       type,
@@ -824,9 +623,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       primaryEntitiesOnly: this.primaryEntitiesOnly,
       exclusions,
       exclude: this.value?.exclude,
-      otherTargetEntities: Object.entries(
-        this._exclusions?.included ?? {}
-      ).flatMap(([targetKey, entities]) => (targetKey === key ? [] : entities)),
+      expandGroup: this._exclusions.expandGroup,
+      explainExclusion: editable
+        ? (item) => this._exclusions.explainExclusion(key, item)
+        : undefined,
       exclusionsChanged: editable
         ? (initial, current) => {
             fireEvent(this, "value-changed", {
@@ -888,7 +688,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
     return this._getItemsMemoized(
       this.hass.localize,
-      this._excludeEntityFilter(this.entityFilter, this._includedEntities),
+      this._excludeEntityFilter(
+        this.entityFilter,
+        this._exclusions.includedEntities
+      ),
       this.deviceFilter,
       this.includeDomains,
       this.includeDeviceClasses,

src/components/skeleton/ha-skeleton-log.ts

@@ -0,0 +1,77 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
+import "../animation/ha-fade-in";
+import "./ha-skeleton-text";
+
+// Varied widths so the placeholder reads as log lines rather than a block
+const LINE_WIDTHS = [72, 58, 86, 64, 44, 78, 52, 90, 60, 70];
+
+const LINE_HEIGHT_EM = 1.5;
+
+/**
+ * Placeholder for log lines while a log loads. It covers its nearest
+ * positioned ancestor and shows as many whole lines as fit, so it never
+ * scrolls. Like the data table's loading rows, the label is given to assistive
+ * technology rather than shown.
+ *
+ * @cssprop --ha-skeleton-log-padding - The space around the lines. Defaults to `var(--ha-space-2)`.
+ */
+@customElement("ha-skeleton-log")
+export class HaSkeletonLog extends LitElement {
+  @property() public label?: string;
+
+  private _lineCount = new ResizeController(this, {
+    callback: (entries) => {
+      const height = entries[0]?.contentRect.height ?? 0;
+
+      const lineHeight =
+        parseFloat(getComputedStyle(this).fontSize) * LINE_HEIGHT_EM;
+
+      return lineHeight ? Math.floor(height / lineHeight) : 0;
+    },
+  });
+
+  protected render() {
+    return html`
+      <ha-fade-in .duration=${300} easing="ease-in">
+        <div role="progressbar" aria-label=${ifDefined(this.label)}>
+          ${Array.from(
+            { length: this._lineCount.value ?? 0 },
+            (_, i) =>
+              html`<div class="line">
+                <ha-skeleton-text
+                  style=${styleMap({
+                    "--ha-skeleton-text-width": `${LINE_WIDTHS[i % LINE_WIDTHS.length]}%`,
+                  })}
+                ></ha-skeleton-text>
+              </div>`
+          )}
+        </div>
+      </ha-fade-in>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      inset: 0;
+      box-sizing: border-box;
+      padding: var(--ha-skeleton-log-padding, var(--ha-space-2));
+      overflow: hidden;
+    }
+    .line {
+      display: flex;
+      align-items: center;
+      height: ${unsafeCSS(LINE_HEIGHT_EM)}em;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-skeleton-log": HaSkeletonLog;
+  }
+}

src/components/target-picker/dialog/dialog-target-details.ts

@@ -28,12 +28,7 @@ import "../../ha-svg-icon";
 import "../../list/ha-list-base";
 import "../ha-target-picker-item-row";
 import type { TargetExclusion } from "../target-exclusions";
-import {
-  isShared,
-  resolveItemExclusions,
-  resolveTargetItemEntities,
-  toggleTargetRow,
-} from "../target-exclusions";
+import { resolveItemExclusions, toggleTargetRow } from "../target-exclusions";
 import type { TargetDetailsDialogParams } from "./show-dialog-target-details";
 
 @customElement("ha-dialog-target-details")
@@ -54,10 +49,6 @@ class DialogTargetDetails extends LitElement implements HassDialog {
 
   private _exclusionsRequest = 0;
 
-  private _otherTargetEntities = memoizeOne(
-    (entities?: string[]) => new Set(entities)
-  );
-
   private _deviceIntegrationLookup = memoizeOne(
     (entities: HomeAssistant["entities"]) =>
       getDeviceIntegrationLookup(Object.values(entities))
@@ -83,7 +74,8 @@ class DialogTargetDetails extends LitElement implements HassDialog {
         params.exclude,
         params.selector
           ? params.selector.target?.primary_entities_only
-          : params.primaryEntitiesOnly
+          : params.primaryEntitiesOnly,
+        params.expandGroup
       );
     } catch (_err) {
       // The details still show the target, only without what is excluded.
@@ -292,37 +284,32 @@ class DialogTargetDetails extends LitElement implements HassDialog {
       ...ev.detail,
       exclusions: before,
       initial: this._initialExclusions,
-      otherTargetEntities: this._otherTargetEntities(
-        this._params?.otherTargetEntities
-      ),
     });
     this._exclusions
       .filter(
         (exclusion) =>
-          exclusion.type !== "entity" &&
           !before.includes(exclusion) &&
           !this._initialExclusions.includes(exclusion)
       )
-      .forEach((exclusion) => this._resolveRemoved(exclusion));
+      .forEach((exclusion) => this._explainExclusion(exclusion));
   }
 
-  private async _resolveRemoved(exclusion: TargetExclusion) {
-    let removed: string[];
+  private async _explainExclusion(exclusion: TargetExclusion) {
+    const explain = this._params?.explainExclusion;
+    if (!explain) {
+      return;
+    }
+    let explained: TargetExclusion | undefined;
     try {
-      removed = await resolveTargetItemEntities(this.hass, exclusion, false);
+      explained = await explain({ type: exclusion.type, id: exclusion.id });
     } catch (_err) {
       return;
     }
-    if (!this._exclusions.includes(exclusion)) {
+    if (!explained || !this._exclusions.includes(exclusion)) {
       return;
     }
-
-    const shared = isShared(
-      removed,
-      this._otherTargetEntities(this._params?.otherTargetEntities)
-    );
     this._exclusions = this._exclusions.map((current) =>
-      current === exclusion ? { ...exclusion, removed, shared } : current
+      current === exclusion ? explained : current
     );
   }
 

src/components/target-picker/dialog/show-dialog-target-details.ts

@@ -2,7 +2,7 @@ import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity/entity";
 import type { TargetSelector } from "../../../data/selector";
-import type { TargetType } from "../../../data/target";
+import type { TargetItem, TargetType } from "../../../data/target";
 import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
 import type { TargetExclusion } from "../target-exclusions";
 
@@ -25,10 +25,16 @@ export interface TargetDetailsDialogParams {
    */
   exclude?: HassServiceTarget;
   /**
-   * The entities of the other included targets, so an exclusion made here
-   * is known to also affect them.
+   * Whether the target expands the groups it names when it is used, like an
+   * action does and a trigger or condition doesn't. Defaults to `true`.
    */
-  otherTargetEntities?: string[];
+  expandGroup?: boolean;
+  /**
+   * What excluding `item` would take out of this target, worked out by core
+   * with the rest of the target value, so it is also known whether it
+   * affects another target.
+   */
+  explainExclusion?: (item: TargetItem) => Promise<TargetExclusion | undefined>;
   /**
    * Set to give the rows checkboxes. Called on apply with the exclusions the
    * dialog opened with and the ones it has now.

src/components/target-picker/target-exclusions-controller.ts

@@ -0,0 +1,224 @@
+import type { ReactiveControllerHost } from "lit";
+import memoizeOne from "memoize-one";
+import {
+  consumeContext,
+  ContextController,
+} from "../../common/decorators/consume";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
+import {
+  explainTarget,
+  type HassServiceTargetWithExclude,
+  type TargetItem,
+} from "../../data/target";
+import type { HomeAssistant } from "../../types";
+import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
+import { filterTargetEntries } from "./filter-target-entries";
+import { targetExpandGroupContext } from "./target-expand-group-context";
+import {
+  computeExclusionsPerTarget,
+  hasIncludedTargets,
+  targetItemKey,
+  targetItems,
+  type TargetExclusion,
+  type TargetExclusions,
+  type TargetNarrowing,
+} from "./target-exclusions";
+
+export type TargetExclusionsHost = ReactiveControllerHost &
+  HTMLElement & {
+    hass: HomeAssistant;
+    value?: HassServiceTargetWithExclude;
+    allowExclude: boolean;
+    primaryEntitiesOnly?: boolean;
+    deviceFilter?: HaDevicePickerDeviceFilterFunc;
+    entityFilter?: HaEntityPickerEntityFilterFunc;
+    includeDomains?: string[];
+    includeDeviceClasses?: string[];
+  };
+
+/**
+ * What the exclusions of a target picker's value take out of each of its
+ * targets, as core resolves them, narrowed to what the picker's rows show.
+ */
+export class TargetExclusionsController extends ContextController {
+  /** What each exclusion takes out of each target, worked out from the value. */
+  public exclusions?: TargetExclusions;
+
+  /**
+   * Whether the exclusions belong to the current value, so it is known which
+   * ones are shared with another target and the details can edit them.
+   */
+  public complete = true;
+
+  private _host: TargetExclusionsHost;
+
+  @consumeContext({ context: targetExpandGroupContext, subscribe: true })
+  private _expandGroup?: boolean;
+
+  private _request = 0;
+
+  constructor(host: TargetExclusionsHost) {
+    super(host);
+    this._host = host;
+  }
+
+  protected contextUpdated() {
+    this.resolve();
+  }
+
+  /** Whether the target expands the groups it names, like an action does. */
+  public get expandGroup(): boolean {
+    return this._expandGroup ?? true;
+  }
+
+  /**
+   * Works the exclusions out again. Without an exclude, the targets are only
+   * needed to tell whether an exclusion made in the details is shared with
+   * another target, so they are only resolved for that or when `force`d.
+   */
+  public async resolve({ force = false }: { force?: boolean } = {}) {
+    const request = ++this._request;
+    const { hass, value, allowExclude } = this._host;
+    if (
+      !hass ||
+      !value ||
+      (!force &&
+        !hasIncludedTargets(value.exclude) &&
+        (!allowExclude || targetItems(value).length < 2))
+    ) {
+      this._update(undefined, true);
+      return;
+    }
+    // Until the targets resolve, the exclusions shown are from before and
+    // may not say which ones are shared now.
+    this._update(this.exclusions, false);
+
+    let exclusions: TargetExclusions | undefined;
+    try {
+      exclusions = computeExclusionsPerTarget(
+        await this._explain(value),
+        this._keeps()
+      );
+    } catch (_err) {
+      // Without an answer, the exclusions stay unplaced.
+    }
+    if (request === this._request) {
+      this._update(exclusions, !!exclusions);
+    }
+  }
+
+  /** The exclusions by the target they affect, once there can be any. */
+  public get perTarget(): Record<string, TargetExclusion[]> | undefined {
+    return (
+      this.exclusions?.perTarget ??
+      (this._host.allowExclude && !hasIncludedTargets(this._host.value?.exclude)
+        ? {}
+        : undefined)
+    );
+  }
+
+  /** Every entity the targets include, once known for the current value. */
+  public get includedEntities(): string[] | undefined {
+    return this.complete ? this._includedEntities(this.exclusions) : undefined;
+  }
+
+  /**
+   * Excludes that aren't listed under a target or as having no effect,
+   * because they are still being resolved or resolving them failed.
+   */
+  public get unplaced(): TargetItem[] {
+    return this._unplaced(this._host.value?.exclude, this.exclusions);
+  }
+
+  /**
+   * What excluding `item` on its own would take out of the target
+   * `targetKey`, with the rest of the value as it is, and whether it affects
+   * another target too.
+   */
+  public async explainExclusion(
+    targetKey: string,
+    item: TargetItem
+  ): Promise<TargetExclusion | undefined> {
+    const { value } = this._host;
+    if (!value) {
+      return undefined;
+    }
+    const explained = await this._explain({
+      ...value,
+      exclude: { [`${item.type}_id`]: [item.id] },
+    });
+    return computeExclusionsPerTarget(explained, this._keeps()).perTarget[
+      targetKey
+    ]?.[0];
+  }
+
+  private _explain(target: HassServiceTargetWithExclude) {
+    return explainTarget(
+      this._host.hass.callWS,
+      target,
+      this.expandGroup,
+      this._host.primaryEntitiesOnly ?? true
+    );
+  }
+
+  private _update(exclusions: TargetExclusions | undefined, complete: boolean) {
+    this.exclusions = exclusions;
+    this.complete = complete;
+    this._host.requestUpdate();
+  }
+
+  // What the picker's filters leave of a target, narrowed like the target's
+  // row, so what an exclusion takes out matches what the row counts.
+  private _keeps(): TargetNarrowing {
+    const {
+      hass,
+      deviceFilter,
+      entityFilter,
+      includeDomains,
+      includeDeviceClasses,
+      primaryEntitiesOnly,
+    } = this._host;
+    return (include) =>
+      filterTargetEntries(
+        hass.states,
+        hass.entities,
+        hass.devices,
+        hass.areas,
+        include,
+        {
+          referenced_areas: include.referenced_areas,
+          referenced_devices: include.referenced_devices,
+          referenced_entities: include.entities,
+        },
+        {
+          deviceFilter,
+          entityFilter,
+          includeDomains,
+          includeDeviceClasses,
+          primaryEntitiesOnly,
+        }
+      ).referenced_entities;
+  }
+
+  private _includedEntities = memoizeOne(
+    (exclusions: TargetExclusions | undefined): string[] | undefined =>
+      exclusions && [...new Set(Object.values(exclusions.included).flat())]
+  );
+
+  private _unplaced = memoizeOne(
+    (
+      exclude: HassServiceTargetWithExclude["exclude"],
+      exclusions: TargetExclusions | undefined
+    ): TargetItem[] => {
+      const placed = new Set([
+        ...Object.values(exclusions?.perTarget ?? {}).flatMap((list) =>
+          list.map(targetItemKey)
+        ),
+        ...(exclusions?.noEffect ?? []).map(targetItemKey),
+      ]);
+      return targetItems(exclude).filter(
+        (item) => !placed.has(targetItemKey(item))
+      );
+    }
+  );
+}

src/components/target-picker/target-exclusions.ts

@@ -1,9 +1,11 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { ensureArray } from "../../common/array/ensure-array";
 import {
-  extractFromTarget,
+  explainTarget,
   type ExtractFromTargetResultReferenced,
   type HassServiceTargetWithExclude,
+  type TargetExplanation,
+  type TargetIncludeEntities,
   type TargetItem,
   type TargetType,
 } from "../../data/target";
@@ -34,30 +36,6 @@ export const targetItems = (target?: HassServiceTarget): TargetItem[] =>
 export const hasIncludedTargets = (target?: HassServiceTarget): boolean =>
   targetItems(target).length > 0;
 
-/** A target item with the entities it resolves to. */
-export interface ResolvedTargetItem extends TargetItem {
-  entities: string[];
-}
-
-/** The entities a single target item resolves to. */
-export const resolveTargetItemEntities = async (
-  hass: HomeAssistant,
-  item: TargetItem,
-  primaryEntitiesOnly?: boolean
-): Promise<string[]> => {
-  if (item.type === "entity") {
-    return item.id === "all" ? Object.keys(hass.states) : [item.id];
-  }
-  return (
-    await extractFromTarget(
-      hass.callWS,
-      { [`${item.type}_id`]: [item.id] },
-      false,
-      primaryEntitiesOnly
-    )
-  ).referenced_entities;
-};
-
 /** An exclusion as seen from one included target. */
 export interface TargetExclusion extends TargetItem {
   /** Entities it takes out of that target. */
@@ -76,26 +54,42 @@ export interface TargetExclusions {
 }
 
 /**
- * Which exclusions take what out of each included target. Excludes are
- * global, so one exclusion is listed under every target it affects; one that
- * affects none, including one whose item no longer exists, has no effect.
+ * The entities the picker's filters leave in an included target other than
+ * an entity. An entity item is what it is, filters or not.
+ */
+export type TargetNarrowing = (include: TargetIncludeEntities) => string[];
+
+/**
+ * Which exclusions take what out of each included target, from what core
+ * explained. Excludes are global, so one exclusion is listed under every
+ * target it affects; one that affects none, including one whose item no
+ * longer exists, has no effect. `keeps` narrows each target to what is left
+ * of it once the picker's filters are applied; what an exclusion takes out
+ * of it is narrowed the same way.
  */
 export const computeExclusionsPerTarget = (
-  includes: ResolvedTargetItem[],
-  excludes: ResolvedTargetItem[]
+  explained: TargetExplanation,
+  keeps?: TargetNarrowing
 ): TargetExclusions => {
+  const included = Object.fromEntries(
+    explained.includes.map((include) => [
+      targetItemKey(include),
+      include.type === "entity" || !keeps ? include.entities : keeps(include),
+    ])
+  );
   const perTarget: Record<string, TargetExclusion[]> = {};
   const noEffect: TargetItem[] = [];
 
-  excludes.forEach((exclude) => {
-    const excluded = new Set(exclude.entities);
-    const hits = includes
-      .map((include) => ({
-        include,
-        removed: [...new Set(include.entities)].filter((entityId) =>
-          excluded.has(entityId)
-        ),
-      }))
+  explained.excludes.forEach((exclude) => {
+    const hits = exclude.removed
+      .map((target) => {
+        const key = targetItemKey(target);
+        const entities = new Set(included[key] ?? []);
+        return {
+          key,
+          removed: target.entities.filter((entityId) => entities.has(entityId)),
+        };
+      })
       .filter(({ removed }) => removed.length > 0);
 
     if (!hits.length) {
@@ -103,8 +97,7 @@ export const computeExclusionsPerTarget = (
       return;
     }
 
-    hits.forEach(({ include, removed }) => {
-      const key = targetItemKey(include);
+    hits.forEach(({ key, removed }) => {
       if (!perTarget[key]) {
         perTarget[key] = [];
       }
@@ -117,41 +110,58 @@ export const computeExclusionsPerTarget = (
     });
   });
 
-  const included = Object.fromEntries(
-    includes.map((include) => [targetItemKey(include), include.entities])
-  );
+  // An action replaces a group it targets directly by its members, but the
+  // group's row is the group itself. Once every member is out, so is the
+  // group, and each exclusion counts it like its row does.
+  explained.includes.forEach((include) => {
+    const key = targetItemKey(include);
+    const exclusions = perTarget[key];
+    const members = included[key];
+    if (
+      include.type !== "entity" ||
+      !exclusions ||
+      !members.length ||
+      members.includes(include.id)
+    ) {
+      return;
+    }
+    const removed = new Set(
+      exclusions.flatMap((exclusion) => exclusion.removed)
+    );
+    if (members.every((entityId) => removed.has(entityId))) {
+      perTarget[key] = exclusions.map((exclusion) => ({
+        ...exclusion,
+        removed: [include.id],
+      }));
+    }
+  });
+
   return { perTarget, noEffect, included };
 };
 
-/** The exclusions that take entities out of one item of a target. */
+/**
+ * The exclusions that take entities out of one item of a target. Actions
+ * expand the groups a target names, triggers and conditions don't, so
+ * `expandGroup` follows what the target is used for.
+ */
 export const resolveItemExclusions = async (
   hass: HomeAssistant,
   item: TargetItem,
   exclude: HassServiceTarget | undefined,
-  primaryEntitiesOnly?: boolean
+  primaryEntitiesOnly?: boolean,
+  expandGroup = true
 ): Promise<TargetExclusion[]> => {
-  const excludes = targetItems(exclude);
-  if (!excludes.length) {
+  if (!hasIncludedTargets(exclude)) {
     return [];
   }
-  // Like core, an exclude takes out every entity of an item, not only the
-  // primary ones.
-  const [entities, excludeEntities] = await Promise.all([
-    resolveTargetItemEntities(hass, item, primaryEntitiesOnly),
-    Promise.all(
-      excludes.map((exclusion) =>
-        resolveTargetItemEntities(hass, exclusion, false)
-      )
-    ),
-  ]);
+  const explained = await explainTarget(
+    hass.callWS,
+    { [`${item.type}_id`]: [item.id], exclude },
+    expandGroup,
+    primaryEntitiesOnly
+  );
   return (
-    computeExclusionsPerTarget(
-      [{ ...item, entities }],
-      excludes.map((exclusion, index) => ({
-        ...exclusion,
-        entities: excludeEntities[index],
-      }))
-    ).perTarget[targetItemKey(item)] ?? []
+    computeExclusionsPerTarget(explained).perTarget[targetItemKey(item)] ?? []
   );
 };
 
@@ -369,7 +379,9 @@ export const targetRowState = (
  * excluded as such, including what is added to it later. The target can't
  * be excluded from itself, so unchecking it unchecks its rows instead.
  * `initial` gives back an exclusion that was there before as it was. A new
- * one is shared when it takes out any of `otherTargetEntities`.
+ * one takes out the row's entities and counts as shared until core tells
+ * what it takes out of every target, so a parent row can't take it away
+ * before it is known whether it also affects another target.
  */
 export const toggleTargetRow = ({
   row,
@@ -377,14 +389,12 @@ export const toggleTargetRow = ({
   selected,
   exclusions,
   initial,
-  otherTargetEntities,
 }: {
   row: TargetRow;
   isTarget: boolean;
   selected: boolean;
   exclusions: TargetExclusion[];
   initial: TargetExclusion[];
-  otherTargetEntities?: ReadonlySet<string>;
 }): TargetExclusion[] => {
   if (!selected && isTarget) {
     return row.children
@@ -397,7 +407,6 @@ export const toggleTargetRow = ({
             selected: false,
             exclusions: result,
             initial,
-            otherTargetEntities,
           }),
         exclusions
       );
@@ -417,19 +426,11 @@ export const toggleTargetRow = ({
       type: row.type,
       id: row.id,
       removed: row.entities,
-      shared: isShared(row.entities, otherTargetEntities),
+      shared: true,
     },
   ];
 };
 
-/** Whether an exclusion taking out `removed` also affects another target. */
-export const isShared = (
-  removed: string[],
-  otherTargetEntities?: ReadonlySet<string>
-): boolean =>
-  !!otherTargetEntities &&
-  removed.some((entityId) => otherTargetEntities.has(entityId));
-
 /**
  * The new `exclude` once the details are applied: what was taken away is
  * removed, what was added is added, and everything else stays as it was.

src/components/target-picker/target-expand-group-context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "@lit/context";
+
+/**
+ * Whether the targets below expand the groups they name when they are used.
+ * Actions do, so that is what holds when nothing provides it. Triggers and
+ * conditions don't, so their editors provide `false`.
+ */
+export const targetExpandGroupContext =
+  createContext<boolean>("targetExpandGroup");

src/components/trace/ha-trace-path-details.ts

@@ -420,11 +420,16 @@ export class HaTracePathDetails extends LitElement {
       return nothing;
     }
     const targetSpec = this._getTargetSelector(config, type);
+    // Triggers and conditions, including a condition action, don't expand
+    // the groups their targets name.
+    const expandGroup =
+      type !== "trigger" && type !== "condition" && !("condition" in config);
     return html`<div class="targets">
       <ha-automation-row-targets
         .target=${target}
         .selector=${targetSpec ? { target: targetSpec } : undefined}
         .size=${size}
+        .expandGroup=${expandGroup}
         interactive
       ></ha-automation-row-targets>
     </div>`;

src/data/marketplace/repository.ts

@@ -34,6 +34,7 @@ export interface RepositoryBase {
 
 export interface RepositoryInfo extends RepositoryBase {
   additional_info: string;
+  beta: boolean;
   default_branch: string;
   issues: number;
   releases: string[];
@@ -98,6 +99,18 @@ export const uninstallMarketplaceRepository = (
     repository: repositoryId,
   });
 
+// The latest version and the updates include pre-releases when on
+export const setMarketplaceRepositoryBeta = (
+  hass: CallWS,
+  repositoryId: string,
+  showBeta: boolean
+) =>
+  hass.callWS<null>({
+    type: "marketplace/repository/beta",
+    repository: repositoryId,
+    show_beta: showBeta,
+  });
+
 // Fetches the information of the repository from GitHub again
 export const refreshMarketplaceRepository = (
   hass: CallWS,

src/data/target.ts

@@ -76,6 +76,73 @@ export const extractFromTarget = async (
   );
 };
 
+export interface TargetItemEntities extends TargetItem {
+  entities: string[];
+}
+
+export interface TargetExcludeEffect extends TargetItem {
+  removed: TargetItemEntities[];
+}
+
+/**
+ * An included item with what it resolves to, and the areas and devices it
+ * reaches on the way, so the picker's filters can narrow it like its row.
+ */
+export interface TargetIncludeEntities extends TargetItemEntities {
+  referenced_areas: string[];
+  referenced_devices: string[];
+}
+
+export interface TargetExplanation {
+  includes: TargetIncludeEntities[];
+  excludes: TargetExcludeEffect[];
+}
+
+export const explainTarget = (
+  callWS: CallWS,
+  target: HassServiceTargetWithExclude,
+  expandGroup = true,
+  primaryEntitiesOnly = true
+) => {
+  const request = {
+    type: "explain_target" as const,
+    target,
+    expand_group: expandGroup,
+    primary_entities_only: primaryEntitiesOnly,
+  };
+
+  return shareInFlightRequest(callWS, JSON.stringify(request), () =>
+    callWS<TargetExplanation>(request)
+  );
+};
+
+/**
+ * What each item of an explained target is left with once every exclude is
+ * taken out of it, by its `type:id`.
+ */
+export const targetEntitiesAfterExclude = (
+  explanation: TargetExplanation
+): Record<string, string[]> => {
+  const removed: Record<string, Set<string>> = {};
+  explanation.excludes.forEach((exclude) =>
+    exclude.removed.forEach(({ type, id, entities }) => {
+      const key = `${type}:${id}`;
+      removed[key] ??= new Set();
+      entities.forEach((entityId) => removed[key].add(entityId));
+    })
+  );
+  return Object.fromEntries(
+    explanation.includes.map(({ type, id, entities }) => {
+      const key = `${type}:${id}`;
+      const out = removed[key];
+      return [
+        key,
+        out ? entities.filter((entityId) => !out.has(entityId)) : entities,
+      ];
+    })
+  );
+};
+
 export const getTargetEntityCount = (target?: HassServiceTarget): number => {
   const tempTarget = {
     entity_id: target?.entity_id ? ensureArray(target?.entity_id) : [],

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

@@ -43,6 +43,7 @@ export class MoreInfoLogbook extends LitElement {
         .time=${this._time}
         .entityIds=${this._entityIdAsList(this.entityId)}
         name-detail="none"
+        max-entries="100"
         narrow
         no-icon
         graph-color

src/fake_data/entities/base-entity.ts

@@ -122,7 +122,13 @@ export class MockBaseEntity {
       this.attributes = { ...this.attributes, ...changes.attributes };
     }
 
-    this.hass!.updateStates({
+    // A removed or replaced entity can finish its transitions, so that their
+    // timers stop, but must not bring its state back
+    if (this.hass?.mockEntities[this.entityId] !== this) {
+      return;
+    }
+
+    this.hass.updateStates({
       [this.entityId]: this.toState(),
     });
   }
@@ -159,7 +165,11 @@ export class MockBaseEntity {
     return {
       entity_id: this.entityId,
       state: this.state,
+      // Every attribute of the input, like Core keeps the attributes of an
+      // integration. What the mock works out itself wins, like a light that
+      // is off having no brightness.
       attributes: {
+        ...this.attributes,
         ...this._getBaseAttributes(),
         ...this._getCapabilityAttributes(),
         ...this._getStateAttributes(),

src/fake_data/entities/generic-entity.ts

@@ -0,0 +1,12 @@
+import { MockBaseEntity } from "./base-entity";
+import type { EntityAttributes } from "./types";
+
+/**
+ * Entity for domains without their own mock, such as sensor, weather and
+ * calendar. Keeps all its attributes, as nothing here computes them.
+ */
+export class MockGenericEntity extends MockBaseEntity {
+  protected _getStateAttributes(): EntityAttributes {
+    return this.attributes;
+  }
+}

src/fake_data/entities/registry.ts

@@ -1,10 +1,11 @@
-import { MockBaseEntity } from "./base-entity";
+import type { MockBaseEntity } from "./base-entity";
 import type { EntityInput } from "./types";
 import { MockAlarmControlPanelEntity } from "./alarm-control-panel-entity";
 import { MockAutomationEntity } from "./automation-entity";
 import { MockClimateEntity } from "./climate-entity";
 import { MockCoverEntity } from "./cover-entity";
 import { MockFanEntity } from "./fan-entity";
+import { MockGenericEntity } from "./generic-entity";
 import { MockGroupEntity } from "./group-entity";
 import { MockHumidifierEntity } from "./humidifier-entity";
 import { MockInputNumberEntity } from "./input-number-entity";
@@ -49,5 +50,6 @@ const TYPES: Record<string, EntityConstructor> = {
 
 export const getEntity = (input: EntityInput): MockBaseEntity => {
   const [domain] = input.entity_id.split(".", 2);
-  return new (TYPES[domain] || MockBaseEntity)(input);
+
+  return new (TYPES[domain] || MockGenericEntity)(input);
 };

src/fake_data/provide_hass.ts

@@ -5,6 +5,7 @@ import {
   invalidateThemeCache,
 } from "../common/dom/apply_themes_on_element";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDeviceName } from "../common/entity/compute_device_name";
 import { computeEntityNameDisplayWithoutContext } from "../common/entity/compute_entity_name_display";
 import { computeFormatFunctions } from "../common/translations/entity-state";
 import { computeLocalize } from "../common/translations/localize";
@@ -46,6 +47,7 @@ import { demoPanels } from "./demo_panels";
 import { demoServices } from "./demo_services";
 import { ENTITY_COMPONENT_ICONS } from "./entity_component_icons";
 import { getEntity } from "./entities/registry";
+import type { MockBaseEntity } from "./entities/base-entity";
 import type { EntityInput } from "./entities/types";
 
 const ensureArray = <T>(val: T | T[]): T[] =>
@@ -75,6 +77,8 @@ export interface MockHomeAssistant extends HomeAssistant {
   updateHass(obj: Partial<MockHomeAssistant>);
   updateStates(newStates: HassEntities);
   addEntities(entities: EntityInput | EntityInput[], replace?: boolean);
+  // Recomputes the format functions, such as after the areas change.
+  updateFormatFunctions(): Promise<void>;
   updateTranslations(fragment: null | string, language?: string);
   addTranslations(translations: Record<string, string>, language?: string);
   mockWS<T extends (...args) => any = any>(
@@ -297,34 +301,77 @@ export const provideHass = (
     });
   }
 
+  // Like Core, an entity of a device has only its own name, which follows the
+  // name of the device in its friendly name. An entity named like its device
+  // has no name of its own.
+  const registryName = (
+    ent: MockBaseEntity
+  ): Pick<EntityRegistryDisplayEntry, "name" | "has_entity_name"> => {
+    const friendlyName: string | undefined =
+      ent.attributes.friendly_name || undefined;
+    const device = ent.deviceId ? hass().devices[ent.deviceId] : undefined;
+    const deviceName = device ? computeDeviceName(device) : undefined;
+
+    if (
+      !deviceName ||
+      !friendlyName ||
+      (friendlyName !== deviceName &&
+        !friendlyName.startsWith(`${deviceName} `))
+    ) {
+      return { name: friendlyName };
+    }
+
+    return {
+      name: friendlyName.slice(deviceName.length).trim() || undefined,
+      has_entity_name: true,
+    };
+  };
+
   function addEntities(
     newEntities: EntityInput | EntityInput[],
     replace = false
   ) {
+    if (replace) {
+      // Drop the old mock entities too, so that services cannot bring them back.
+      for (const entityId of Object.keys(entities)) {
+        delete entities[entityId];
+      }
+    }
+
     const states = {};
+
+    // A new object, so that registry consumers see the change
+    const registry: HomeAssistant["entities"] = replace
+      ? {}
+      : { ...hass().entities };
     ensureArray(newEntities).forEach((input) => {
       const ent = getEntity(input);
       ent.hass = hass();
       entities[ent.entityId] = ent;
       states[ent.entityId] = ent.toState();
 
-      hass().entities[ent.entityId] = {
+      const name = registryName(ent);
+      registry[ent.entityId] = {
         entity_id: ent.entityId,
-        name: ent.attributes.friendly_name || undefined,
+        ...name,
         icon: undefined,
         platform: ent.platform ?? "demo",
         labels: [],
         area_id: ent.areaId,
         device_id: ent.deviceId,
+        // Only follow the device when its name was split off, so a friendly
+        // name that doesn't start with it is shown as it is
+        next_name_part: ent.areaId
+          ? "area"
+          : name.has_entity_name
+            ? "device"
+            : undefined,
       } satisfies EntityRegistryDisplayEntry;
     });
-    if (replace) {
-      hass().updateHass({
-        states,
-      });
-    } else {
-      updateStates(states);
-    }
+    hass().updateHass({
+      entities: registry,
+      states: replace ? states : { ...hass().states, ...states },
+    });
 
     updateFormatFunctions();
   }
@@ -347,15 +394,18 @@ export const provideHass = (
 
   const localLanguage = getLocalLanguage();
   const noop = () => undefined;
+  const auth = {
+    data: {
+      hassUrl: location.origin,
+    },
+  } as any;
 
   const hassObj: MockHomeAssistant = {
     // Home Assistant properties
-    auth: {
-      data: {
-        hassUrl: location.origin,
-      },
-    } as any,
+    auth,
     connection: {
+      // The map reads the URL of Home Assistant from here
+      options: { auth },
       addEventListener: noop,
       removeEventListener: noop,
       sendMessage: (msg) => {
@@ -540,6 +590,7 @@ export const provideHass = (
       return hass().localize;
     },
     addEntities,
+    updateFormatFunctions,
     mockWS(type, callback) {
       wsCommands[type] = callback;
     },

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

@@ -1064,6 +1064,9 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       align-items: center;
       color: var(--secondary-text-color);
     }
+    .search-toolbar ha-input-search {
+      min-width: 0;
+    }
     .filters {
       --mdc-text-field-fill-color: var(--input-fill-color);
       --mdc-text-field-idle-line-color: var(--input-idle-line-color);

src/layouts/home-assistant-main.ts

@@ -180,6 +180,13 @@ export class HomeAssistantMain extends LitElement {
       color: var(--primary-text-color);
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      /* Keep the negative z-index panel backgrounds (the resolver's ::before
+         and the Lovelace view background) in this host's stacking context.
+         Isolating the conditionally rendered partial-panel-resolver instead
+         can intermittently leave the Android WebView (Chromium 109-124)
+         accessibility tree with an empty panel subtree while the page paints
+         normally, which breaks UI automation such as the companion app E2E. */
+      isolation: isolate;
       --ha-sidebar-width: calc(56px + var(--safe-area-inset-left, 0px));
       --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
       --safe-area-content-inset-left: 0px;
@@ -201,7 +208,6 @@ export class HomeAssistantMain extends LitElement {
     partial-panel-resolver {
       display: block;
       height: 100%;
-      isolation: isolate;
     }
     partial-panel-resolver::before {
       content: "";

src/onboarding/onboarding-core-config.ts

@@ -197,9 +197,10 @@ class OnboardingCoreConfig extends LitElement {
         longitude: this._location[1],
         elevation: Number(this._elevation),
         unit_system:
-          this._unitSystem || ["US", "MM", "LR"].includes(this._country)
+          this._unitSystem ||
+          (["US", "MM", "LR"].includes(this._country)
             ? "us_customary"
-            : "metric",
+            : "metric"),
         time_zone: this._timeZone,
         currency: this._currency || countryCurrency[this._country] || "EUR",
         country: this._country,

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

@@ -942,6 +942,7 @@ class HaConfigAreaPage extends LitElement {
 
         :host {
           display: block;
+          height: 100%;
         }
         .container {
           display: flex;

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

@@ -20,6 +20,7 @@ import {
   mdiStopCircleOutline,
   mdiSwapHorizontal,
 } from "@mdi/js";
+import { provide } from "@lit/context";
 import deepClone from "deep-clone-simple";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
@@ -29,6 +30,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { consume } from "../../../../common/decorators/consume";
 import "../trigger/ha-automation-trigger-references";
+import { targetExpandGroupContext } from "../../../../components/target-picker/target-expand-group-context";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -165,6 +167,11 @@ const getWaitTemplateCondition = (template: unknown): Condition | undefined =>
 
 @customElement("ha-automation-action-row")
 export default class HaAutomationActionRow extends LitElement {
+  // Conditions don't expand the groups their targets name; other actions do.
+  @provide({ context: targetExpandGroupContext })
+  @state()
+  protected _targetExpandGroup = true;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public action!: Action;
@@ -257,6 +264,7 @@ export default class HaAutomationActionRow extends LitElement {
       return;
     }
     const type = getAutomationActionType(this.action);
+    this._targetExpandGroup = type !== "condition";
     if (this._warnings && this._yamlMode && type) {
       this._warnings = getUiSupportWarnings(
         this.hass.localize,

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

@@ -37,6 +37,7 @@ import {
   isDynamic,
 } from "../../../data/automation";
 import { getConditionDomain } from "../../../data/condition";
+import type { ConditionDescriptions } from "../../../data/condition";
 import {
   apiContext,
   conditionDescriptionsContext,
@@ -56,6 +57,7 @@ import {
   getTriggerIcons,
 } from "../../../data/icons";
 import { domainToName } from "../../../data/integration";
+import type { DomainManifestLookup } from "../../../data/integration";
 import type { LabelRegistryEntry } from "../../../data/label/label_registry";
 import {
   TARGET_SEPARATOR,
@@ -63,6 +65,7 @@ import {
   type SingleHassServiceTarget,
 } from "../../../data/target";
 import { getTriggerDomain } from "../../../data/trigger";
+import type { TriggerDescriptions } from "../../../data/trigger";
 import { DialogMixin } from "../../../dialogs/dialog-mixin";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyleScrollbar } from "../../../resources/styles";
@@ -154,33 +157,29 @@ class DialogAddAutomationElement extends DialogMixin<AddAutomationElementDialogP
   @consume({ context: statesContext, subscribe: true })
   @transform<HomeAssistant["states"], Set<string>>({
     transformer: function (this: DialogAddAutomationElement, states) {
-      const domains = new Set(Object.keys(states).map(computeDomain));
+      const entityIds = new Set(Object.keys(states));
       // keep the previous set, so a state change doesn't rerender the dialog
-      return deepEqual(domains, this._usedDomains)
-        ? this._usedDomains
-        : domains;
+      return deepEqual(entityIds, this._entityIds)
+        ? this._entityIds
+        : entityIds;
     },
   })
-  private _usedDomains?: Set<string>;
+  private _entityIds?: Set<string>;
 
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  @transform<HomeAssistant["states"], SystemDomains | undefined>({
-    transformer: function (this: DialogAddAutomationElement, states) {
-      const systemDomains = this._calculateSystemDomains(states);
-      // keep the previous result, so a state change doesn't rerender the dialog
-      return deepEqual(systemDomains, this._systemDomains)
-        ? this._systemDomains
-        : systemDomains;
-    },
-    watch: [
-      "_manifests",
-      "_triggerDescriptions",
-      "_conditionDescriptions",
-      "_registries",
-    ],
-  })
-  private _systemDomains?: SystemDomains;
+  private get _usedDomains(): Set<string> | undefined {
+    return this._computeUsedDomains(this._entityIds);
+  }
+
+  private get _systemDomains(): SystemDomains | undefined {
+    return this._calculateSystemDomains(
+      this.params?.type,
+      this._triggerDescriptions,
+      this._conditionDescriptions,
+      this._manifests,
+      this._registries,
+      this._entityIds
+    );
+  }
 
   @state()
   @consume({ context: servicesContext, subscribe: true })
@@ -884,32 +883,43 @@ class DialogAddAutomationElement extends DialogMixin<AddAutomationElementDialogP
     })
   );
 
-  private _calculateSystemDomains(
-    states: HomeAssistant["states"]
-  ): SystemDomains | undefined {
-    const type = this.params?.type;
-    if (!type || type === "action" || !this._manifests || !this._registries) {
-      return undefined;
+  private _computeUsedDomains = memoizeOne(
+    (entityIds: Set<string> | undefined) =>
+      entityIds && new Set(Array.from(entityIds, computeDomain))
+  );
+
+  private _calculateSystemDomains = memoizeOne(
+    (
+      type: AddAutomationElementDialogParams["type"] | undefined,
+      triggerDescriptions: TriggerDescriptions,
+      conditionDescriptions: ConditionDescriptions,
+      manifests: DomainManifestLookup | undefined,
+      registries: ContextType<typeof registriesContext> | undefined,
+      _entityIds: Set<string> | undefined
+    ): SystemDomains | undefined => {
+      if (!type || type === "action" || !manifests || !registries) {
+        return undefined;
+      }
+      const { entities, devices } = registries;
+      return type === "trigger"
+        ? calculateActiveSystemDomains(
+            triggerDescriptions,
+            manifests,
+            getTriggerDomain,
+            this._states,
+            entities,
+            devices
+          )
+        : calculateActiveSystemDomains(
+            conditionDescriptions,
+            manifests,
+            getConditionDomain,
+            this._states,
+            entities,
+            devices
+          );
     }
-    const { entities, devices } = this._registries;
-    return type === "trigger"
-      ? calculateActiveSystemDomains(
-          this._triggerDescriptions,
-          this._manifests,
-          getTriggerDomain,
-          states,
-          entities,
-          devices
-        )
-      : calculateActiveSystemDomains(
-          this._conditionDescriptions,
-          this._manifests,
-          getConditionDomain,
-          states,
-          entities,
-          devices
-        );
-  }
+  );
 
   private _getAllItems = memoizeOne(getAllItems);
 

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

@@ -1,3 +1,4 @@
+import { provide } from "@lit/context";
 import { mdiAlertOutline, mdiHelpCircleOutline } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -33,6 +34,7 @@ import {
 } from "../../../../../data/target";
 import type { HomeAssistant } from "../../../../../types";
 import { documentationUrl } from "../../../../../util/documentation-url";
+import { targetExpandGroupContext } from "../../../../../components/target-picker/target-expand-group-context";
 
 // Mirrors `MAX_HISTORY_PRIMING_LOOKBACK` in homeassistant/helpers/condition.py:
 // when a condition has a `for:` duration, the recorder is only queried this far
@@ -47,6 +49,10 @@ const showOptionalToggle = (field: ConditionDescription["fields"][string]) =>
 
 @customElement("ha-automation-condition-platform")
 export class HaPlatformCondition extends LitElement {
+  // Triggers and conditions don't expand the groups their targets name.
+  @provide({ context: targetExpandGroupContext })
+  protected _targetExpandGroup = false;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public condition!: PlatformCondition;

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

@@ -19,7 +19,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { until } from "lit/directives/until";
+import memoizeOne from "memoize-one";
 import { consume } from "../../../../common/decorators/consume";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { transform } from "../../../../common/decorators/transform";
@@ -34,6 +34,7 @@ import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/entity/state-badge";
 import { showTargetDetailsDialog } from "../../../../components/target-picker/dialog/show-dialog-target-details";
+import { targetExpandGroupContext } from "../../../../components/target-picker/target-expand-group-context";
 import type { ConfigEntry } from "../../../../data/config_entries";
 import {
   apiContext,
@@ -55,8 +56,10 @@ import {
   type TargetSelector,
 } from "../../../../data/selector";
 import {
-  extractFromTarget,
+  explainTarget,
+  targetEntitiesAfterExclude,
   type HassServiceTargetWithExclude,
+  type TargetExplanation,
   type TargetType,
 } from "../../../../data/target";
 import { showMoreInfoDialog } from "../../../../dialogs/more-info/show-ha-more-info-dialog";
@@ -81,6 +84,12 @@ export class HaAutomationRowTargets extends LitElement {
   @property({ reflect: true })
   public size: "s" | "m" = "m";
 
+  /**
+   * Whether the target expands the groups it names. Overrides what the
+   * context provides, for a place that shows targets of different kinds.
+   */
+  @property({ attribute: false }) public expandGroup?: boolean;
+
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n!: ContextType<typeof internationalizationContext>;
@@ -110,6 +119,11 @@ export class HaAutomationRowTargets extends LitElement {
   @consume({ context: connectionContext, subscribe: true })
   private _connection!: ContextType<typeof connectionContext>;
 
+  // Whether the target expands the groups it names, like an action does.
+  @state()
+  @consume({ context: targetExpandGroupContext, subscribe: true })
+  private _expandGroup?: boolean;
+
   @state()
   @consume({ context: statesContext, subscribe: true })
   private _states!: ContextType<typeof statesContext>;
@@ -118,29 +132,27 @@ export class HaAutomationRowTargets extends LitElement {
 
   private _loadingCompositeSplits = false;
 
-  private _countCache = new Map<
-    string,
-    Promise<TargetCount | undefined> | TargetCount | undefined
-  >();
+  // What each target resolves to and what the exclude takes out, from core.
+  // `null` once core couldn't tell.
+  @state() private _explanation?: TargetExplanation | null;
 
-  // What the target's `exclude` resolves to, shared by every count.
-  private _excludedEntities?: Promise<Set<string>>;
+  private _explainRequest = 0;
 
-  // The same, once resolved, to mark excluded entity targets.
-  @state() private _excludedEntityIds = new Set<string>();
-
-  private _rerenderCount = true;
+  private get _resolvedExpandGroup(): boolean {
+    return this.expandGroup ?? this._expandGroup ?? true;
+  }
 
   protected willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     if (
       changedProps.has("target") ||
       changedProps.has("selector") ||
+      changedProps.has("interactive") ||
+      changedProps.has("expandGroup") ||
+      changedProps.has("_expandGroup") ||
       changedProps.has("_registries")
     ) {
-      this._rerenderCount = true;
-      this._excludedEntities = undefined;
-      this._resolveExcludedEntityIds();
+      this._explain();
     }
 
     if (
@@ -181,11 +193,6 @@ export class HaAutomationRowTargets extends LitElement {
     }
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    this._rerenderCount = false;
-  }
-
   private _countMatchingEntities(referencedEntities: string[]): number {
     const targetSelector = this.selector;
     const hasEntityFilter = !!targetSelector?.target?.entity;
@@ -237,102 +244,94 @@ export class HaAutomationRowTargets extends LitElement {
       : undefined;
   }
 
-  private async _resolveExcludedEntityIds() {
-    if (!this._api || !this._getExclude()) {
-      this._excludedEntityIds = new Set();
+  // The target without its templated ids, which only resolve when the
+  // automation runs, so core can explain the rest.
+  private _explainableTarget(): HassServiceTargetWithExclude | undefined {
+    const { exclude: _exclude, ...target } = isConfigObject(this.target)
+      ? this.target
+      : {};
+    const explainable: HassServiceTargetWithExclude = {};
+    Object.entries(target).forEach(([key, ids]) => {
+      const plain = ensureArray(ids).filter((id) => !isTemplate(id));
+      if (plain.length) {
+        explainable[key] = plain;
+      }
+    });
+    return Object.keys(explainable).length ? explainable : undefined;
+  }
+
+  // Only targets other than entities show a count, and only when the summary
+  // is interactive; without one of those, the explanation is only needed to
+  // tell which entity targets the exclude takes out again.
+  private async _explain() {
+    const request = ++this._explainRequest;
+    const target = this._explainableTarget();
+    const exclude = this._getExclude();
+    const counts =
+      this.interactive &&
+      !!target &&
+      Object.keys(target).some((key) => key !== "entity_id");
+    if (!this._api || !target || (!counts && !exclude)) {
+      this._explanation = undefined;
       return;
     }
-    const request = this._getExcludedEntities();
-    const excluded = await request;
-    // A newer target started its own lookup in the meantime.
-    if (request === this._excludedEntities) {
-      this._excludedEntityIds = excluded;
-    }
-  }
-
-  private _getExcludedEntities(): Promise<Set<string>> {
-    const exclude = this._getExclude();
-    if (!exclude) {
-      return Promise.resolve(new Set());
-    }
-    if (!this._excludedEntities) {
-      this._excludedEntities = extractFromTarget(
+    let explanation: TargetExplanation | null;
+    try {
+      explanation = await explainTarget(
         this._api.callWS,
-        exclude,
-        false,
-        false
-      )
-        .then((result) => new Set(result.referenced_entities))
-        // Counts then leave the exclude out rather than failing altogether.
-        .catch(() => new Set<string>());
+        { ...target, exclude },
+        this._resolvedExpandGroup,
+        this.selector?.target?.primary_entities_only
+      );
+    } catch (_err) {
+      explanation = null;
+    }
+    if (request === this._explainRequest) {
+      this._explanation = explanation;
     }
-    return this._excludedEntities;
   }
 
-  private _formatCount(count: TargetCount | undefined) {
-    if (!count) {
-      return " (-)";
+  // What each target is left with once the exclude is taken out of it.
+  private _remaining = memoizeOne(
+    (explanation: TargetExplanation | null | undefined) =>
+      explanation ? targetEntitiesAfterExclude(explanation) : undefined
+  );
+
+  // The entity targets the exclude block takes out again entirely.
+  private _excludedEntities = memoizeOne(
+    (explanation: TargetExplanation | null | undefined): Set<string> => {
+      const remaining = this._remaining(explanation);
+      return new Set(
+        explanation?.includes
+          .filter(
+            ({ type, id, entities }) =>
+              type === "entity" &&
+              entities.length > 0 &&
+              remaining![`entity:${id}`].length === 0
+          )
+          .map(({ id }) => id)
+      );
     }
-    return ` (${count.count})`;
+  );
+
+  private _isExcludedEntity(entityId: string): boolean {
+    return this._excludedEntities(this._explanation).has(entityId);
   }
 
   private _renderCount(
     targetType: "floor" | "area" | "device" | "label",
     targetId: string
   ) {
-    const key = `${targetType}:${targetId}`;
-    let fallback = " (-)";
-    if (!this._countCache.has(key) || this._rerenderCount) {
-      const cached = this._countCache.get(key);
-      if (cached && !(cached instanceof Promise)) {
-        fallback = this._formatCount(cached);
-      }
-      this._countCache.set(
-        key,
-        Promise.all([
-          extractFromTarget(
-            this._api.callWS,
-            {
-              [`${targetType}_id`]: [targetId],
-            },
-            false,
-            this.selector?.target?.primary_entities_only
-          ),
-          this._getExcludedEntities(),
-        ])
-          .then(([result, excluded]): TargetCount => {
-            // Excludes are global, so anything they resolve to is taken out
-            // of this target too.
-            const remaining = result.referenced_entities.filter(
-              (entityId) => !excluded.has(entityId)
-            );
-            return { count: this._countMatchingEntities(remaining) };
-          })
-          .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error("Error counting target entities", err);
-            return undefined;
-          })
-      );
+    if (this._explanation === null) {
+      return nothing;
     }
-
-    const cached = this._countCache.get(key);
-    if (cached instanceof Promise) {
-      return until(
-        cached.then((count) => {
-          if (this._countCache.get(key) === cached) {
-            this._countCache.set(key, count);
-          }
-          return count === undefined ? nothing : this._formatCount(count);
-        }),
-        fallback
-      );
+    const remaining = this._remaining(this._explanation)?.[
+      `${targetType}:${targetId}`
+    ];
+    if (!remaining) {
+      return " (-)";
     }
-
-    if (cached) {
-      return this._formatCount(cached);
-    }
-    return nothing;
+    return ` (${this._countMatchingEntities(remaining)})`;
   }
 
   protected render() {
@@ -368,7 +367,7 @@ export class HaAutomationRowTargets extends LitElement {
       0
     );
     const excludedEntityTargets = ensureArray(target.entity_id ?? []).filter(
-      (entityId) => this._excludedEntityIds.has(entityId)
+      (entityId) => this._isExcludedEntity(entityId)
     ).length;
 
     if (totalLength <= 5) {
@@ -553,9 +552,8 @@ export class HaAutomationRowTargets extends LitElement {
     let badgeTargetId: string | undefined = targetId;
     let badgeTargetType: string | undefined = targetType;
     let countTemplate: unknown = nothing;
-    // An entity target that the exclude block takes out again.
     const excluded =
-      targetType === "entity" && this._excludedEntityIds.has(targetId);
+      targetType === "entity" && this._isExcludedEntity(targetId);
 
     if (targetType === "entity" && ["all", "none"].includes(targetId)) {
       icon = mdiShape;
@@ -724,6 +722,7 @@ export class HaAutomationRowTargets extends LitElement {
       itemId: targetId,
       selector: this.selector,
       exclude: this._getExclude(),
+      expandGroup: this._resolvedExpandGroup,
     });
   }
 
@@ -840,10 +839,6 @@ export class HaAutomationRowTargets extends LitElement {
   `;
 }
 
-interface TargetCount {
-  count: number;
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     "ha-automation-row-targets": HaAutomationRowTargets;

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

@@ -1,3 +1,4 @@
+import { provide } from "@lit/context";
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiArrowDown,
@@ -119,6 +120,7 @@ import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
 import { renderCtrlOrCmd } from "../../../../common/keyboard/ctrl-or-cmd";
 import { scrollRowIntoView } from "../scroll-row-into-view";
+import { targetExpandGroupContext } from "../../../../components/target-picker/target-expand-group-context";
 
 export interface TriggerElement extends LitElement {
   trigger: Trigger;
@@ -148,6 +150,10 @@ export const handleChangeEvent = (element: TriggerElement, ev: CustomEvent) => {
 
 @customElement("ha-automation-trigger-row")
 export default class HaAutomationTriggerRow extends LitElement {
+  // Triggers and conditions don't expand the groups their targets name.
+  @provide({ context: targetExpandGroupContext })
+  protected _targetExpandGroup = false;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public trigger!: Trigger;

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

@@ -1,3 +1,4 @@
+import { provide } from "@lit/context";
 import { mdiHelpCircleOutline } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -22,6 +23,7 @@ import {
 } from "../../../../../data/trigger";
 import type { HomeAssistant } from "../../../../../types";
 import { documentationUrl } from "../../../../../util/documentation-url";
+import { targetExpandGroupContext } from "../../../../../components/target-picker/target-expand-group-context";
 
 const showOptionalToggle = (field: TriggerDescription["fields"][string]) =>
   field.selector &&
@@ -37,6 +39,10 @@ const DEFAULT_KEYS: (keyof PlatformTrigger)[] = [
 
 @customElement("ha-automation-trigger-platform")
 export class HaPlatformTrigger extends LitElement {
+  // Triggers and conditions don't expand the groups their targets name.
+  @provide({ context: targetExpandGroupContext })
+  protected _targetExpandGroup = false;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public trigger!: PlatformTrigger;

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

@@ -429,9 +429,7 @@ class HaBlueprintOverview extends LitElement {
         ></ha-icon-button>
         <ha-assist-chip
           slot="selection-bar"
-          .label=${this.hass.localize(
-            "ui.panel.config.blueprint.overview.delete_selected"
-          )}
+          .label=${this.hass.localize("ui.common.delete")}
           .disabled=${this._usageCountsLoading || !this._selected.length}
           @click=${this._removeSelected}
         ></ha-assist-chip>

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

@@ -1,5 +1,7 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { replaceCurrentUrl } from "../../../common/navigate";
+import { nextRender } from "../../../common/util/render-status";
 import "../../../layouts/hass-subpage";
 import "./ai-task-pref";
 import "./mcp-pref";
@@ -11,6 +13,26 @@ class HaConfigSectionAI extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._scrollToSection();
+  }
+
+  private async _scrollToSection() {
+    const hash = window.location.hash.substring(1);
+    if (!hash) {
+      return;
+    }
+    await nextRender();
+    // In the demo, the hash is the route of the page, not a section.
+    const section = this.shadowRoot!.getElementById(hash);
+    if (!section) {
+      return;
+    }
+    section.scrollIntoView();
+    replaceCurrentUrl(window.location.pathname);
+  }
+
   protected render() {
     return html`
       <hass-subpage
@@ -24,7 +46,11 @@ class HaConfigSectionAI extends LitElement {
             .hass=${this.hass}
             .narrow=${this.narrow}
           ></ai-task-pref>
-          <mcp-pref .hass=${this.hass} .narrow=${this.narrow}></mcp-pref>
+          <mcp-pref
+            id="mcp"
+            .hass=${this.hass}
+            .narrow=${this.narrow}
+          ></mcp-pref>
         </div>
       </hass-subpage>
     `;

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

@@ -1645,6 +1645,7 @@ export class HaConfigDevicePage extends LitElement {
       css`
         :host {
           display: block;
+          height: 100%;
         }
         .container {
           display: flex;

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -1923,8 +1923,8 @@ export class EntityRegistrySettingsEditor extends LitElement {
           margin-inline-start: 0;
         }
 
-        ha-row-item.main-entity::part(supporting-text),
-        ha-row-item.device-area::part(supporting-text) {
+        ha-row-item::part(supporting-text),
+        ha-list-item-button::part(supporting-text) {
           white-space: normal;
         }
         ha-row-item {

src/panels/config/integrations/dialog-live-log.ts

@@ -19,6 +19,7 @@ import type { HaLogViewer } from "../../../components/ha-log-viewer";
 import "../../../components/ha-svg-icon";
 import "../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../components/input/ha-input-search";
+import "../../../components/skeleton/ha-skeleton-log";
 import {
   connectionContext,
   internationalizationContext,
@@ -51,6 +52,9 @@ class DialogLiveLog extends DialogMixin<LiveLogDialogParams>(LitElement) {
 
   @state() private _live = false;
 
+  // The backend answers the subscription once it has read the backlog
+  @state() private _loading = false;
+
   @state() private _search = "";
 
   @state() private _wrapLines = true;
@@ -84,9 +88,11 @@ class DialogLiveLog extends DialogMixin<LiveLogDialogParams>(LitElement) {
       (lines) => this._addLines(lines)
     );
     this._unsub = unsub;
+    this._loading = true;
     unsub.then(
       () => {
         if (this._unsub === unsub) {
+          this._loading = false;
           this._live = true;
         }
       },
@@ -95,6 +101,7 @@ class DialogLiveLog extends DialogMixin<LiveLogDialogParams>(LitElement) {
           return;
         }
         this._unsub = undefined;
+        this._loading = false;
         if (err?.code === ERR_UNKNOWN_COMMAND) {
           this._unsupported = true;
         } else if (
@@ -130,6 +137,7 @@ class DialogLiveLog extends DialogMixin<LiveLogDialogParams>(LitElement) {
     // _subscribe reports subscription errors, so only ignore them here
     this._unsub?.then((unsub) => unsub()).catch(() => undefined);
     this._unsub = undefined;
+    this._loading = false;
     this._live = false;
   }
 
@@ -209,12 +217,18 @@ class DialogLiveLog extends DialogMixin<LiveLogDialogParams>(LitElement) {
                     ${
                       this._lineCount
                         ? nothing
-                        : html`<div class="waiting">
-                            ${this._i18n.localize(
-                              "ui.panel.config.integrations.config_entry.live_log.waiting",
-                              { integration: this.params.name }
-                            )}
-                          </div>`
+                        : this._loading
+                          ? html`<ha-skeleton-log
+                              .label=${this._i18n.localize(
+                                "ui.panel.config.logs.loading_log"
+                              )}
+                            ></ha-skeleton-log>`
+                          : html`<div class="waiting">
+                              ${this._i18n.localize(
+                                "ui.panel.config.integrations.config_entry.live_log.waiting",
+                                { integration: this.params.name }
+                              )}
+                            </div>`
                     }
                   </ha-log-viewer>
                   ${

src/panels/config/integrations/dialog-yaml-integration.ts

@@ -101,6 +101,8 @@ export class DialogYamlIntegration extends LitElement {
     ha-dialog {
       /* Place above other dialogs */
       --dialog-z-index: 104;
+      --ha-dialog-header-white-space: normal;
+      --ha-dialog-header-title-height: auto;
     }
   `;
 }

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -75,8 +75,16 @@ class HaConfigEntryDeviceRow extends LitElement {
     );
 
     const supportingText = [
+      area ? html`<span class="area">${area.name}</span>` : undefined,
       device.model || device.sw_version || device.manufacturer,
-      area ? area.name : undefined,
+      entities.length
+        ? bidiIsolate(
+            this.hass.localize(
+              "ui.panel.config.integrations.config_entry.entities",
+              { count: entities.length }
+            )
+          )
+        : undefined,
     ].filter(Boolean);
 
     return html`<ha-list-item-button
@@ -114,18 +122,9 @@ class HaConfigEntryDeviceRow extends LitElement {
         ${computeDeviceNameDisplay(device, this.hass.localize)}
       </div>
       <span slot="supporting-text"
-        >${supportingText.join(" • ")}
-        ${supportingText.length && entities.length ? " • " : nothing}
-        ${
-          entities.length
-            ? bidiIsolate(
-                this.hass.localize(
-                  "ui.panel.config.integrations.config_entry.entities",
-                  { count: entities.length }
-                )
-              )
-            : nothing
-        }</span
+        >${supportingText.map(
+          (part, index) => html`${index ? " • " : nothing}${part}`
+        )}</span
       >
       ${!this.narrow ? html`<ha-icon-next slot="end"></ha-icon-next>` : nothing}
       <div class="vertical-divider" slot="end" @click=${stopPropagation}></div>
@@ -389,6 +388,9 @@ class HaConfigEntryDeviceRow extends LitElement {
       .disabled {
         opacity: 0.5;
       }
+      .area {
+        color: var(--primary-text-color);
+      }
       :host([narrow]) ha-list-item-button {
         --ha-row-item-padding-inline: 16px;
       }

src/panels/config/integrations/ha-config-integration-page.ts

@@ -101,6 +101,9 @@ export interface ConfigEntryData {
   subEntries: SubEntryData[];
 }
 
+// The AI settings show how to connect to the MCP server and its APIs.
+const AI_SETTINGS_DOMAINS = ["mcp", "mcp_server"];
+
 export const renderConfigEntryError = (
   hass: HomeAssistant,
   entry: ConfigEntry
@@ -396,6 +399,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
       this.domain
     );
 
+    const showAddEntry =
+      this._manifest?.integration_type !== "hardware" &&
+      (!this._manifest?.single_config_entry ||
+        (normalData.length === 0 && attentionData.length === 0));
+
     const documentationLink = this._manifest?.is_built_in
       ? documentationUrl(this.hass, `/integrations/${this._manifest.domain}`)
       : this._manifest?.documentation;
@@ -689,6 +697,26 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
               </div>
             </div>
             <div class="actions">
+              ${
+                AI_SETTINGS_DOMAINS.includes(this.domain)
+                  ? html`<ha-button
+                      .appearance=${showAddEntry ? "outlined" : "accent"}
+                      href=${
+                        // The demo routes with the hash, so it cannot link to a section.
+                        __DEMO__ ? "/config/ai" : "/config/ai#mcp"
+                      }
+                    >
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.integration_page.open_config_panel",
+                        {
+                          name: this.hass.localize(
+                            "ui.panel.config.ai.caption"
+                          ),
+                        }
+                      )}
+                    </ha-button>`
+                  : nothing
+              }
               ${
                 canAddDevice
                   ? html`
@@ -701,9 +729,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                   : nothing
               }
               ${
-                this._manifest?.integration_type !== "hardware" &&
-                (!this._manifest?.single_config_entry ||
-                  (normalData.length === 0 && attentionData.length === 0))
+                showAddEntry
                   ? html`<ha-button
                       .appearance=${canAddDevice ? "filled" : "accent"}
                       @click=${this._addIntegration}

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

@@ -285,7 +285,7 @@ export class HaConfigLabels extends LitElement {
         ></ha-icon-button>
         <ha-assist-chip
           slot="selection-bar"
-          .label=${this.hass.localize("ui.panel.config.labels.delete_selected")}
+          .label=${this.hass.localize("ui.common.delete")}
           .disabled=${!this._selected.length}
           @click=${this._deleteSelected}
         ></ha-assist-chip>

src/panels/config/logs/error-log-card.ts

@@ -37,6 +37,7 @@ import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
+import "../../../components/skeleton/ha-skeleton-log";
 
 import { getSignedPath } from "../../../data/auth";
 
@@ -350,9 +351,13 @@ class ErrorLogCard extends LitElement {
                     )}
                   </ha-alert>`
                 : this._loadingState === "loading"
-                  ? html`<div>
-                      ${localize("ui.panel.config.logs.loading_log")}
-                    </div>`
+                  ? // Lines kept while reconnecting stay visible, unless the search hides them all
+                    this._ansiToHtmlElement?.hasLines &&
+                    !(this.filter && this._noSearchResults)
+                    ? nothing
+                    : html`<ha-skeleton-log
+                        .label=${localize("ui.panel.config.logs.loading_log")}
+                      ></ha-skeleton-log>`
                   : this._loadingState === "empty"
                     ? html`<div>
                         ${
@@ -749,6 +754,8 @@ class ErrorLogCard extends LitElement {
     // The backlog is sent again on every subscription
     this._integrationLines = [];
     this._ansiToHtmlElement?.clear();
+    // Show the skeleton again now the retained lines are gone
+    this.requestUpdate();
 
     // Each subscription starts with the integration's backlog, which are
     // merged in time order with the lines sent meanwhile once all arrived.
@@ -1106,6 +1113,10 @@ class ErrorLogCard extends LitElement {
       overflow-wrap: break-word;
     }
 
+    ha-skeleton-log {
+      --ha-skeleton-log-padding: var(--ha-space-4);
+    }
+
     .error-log > div:hover {
       background-color: var(--secondary-background-color);
     }

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -461,9 +461,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         </ha-dropdown>
         <ha-assist-chip
           slot="selection-bar"
-          .label=${this.hass.localize(
-            "ui.panel.config.lovelace.dashboards.delete_selected"
-          )}
+          .label=${this.hass.localize("ui.common.delete")}
           .disabled=${!this._deletableSelected().length}
           @click=${this._removeSelected}
         ></ha-assist-chip>

src/panels/config/network/ha-config-section-network.ts

@@ -106,6 +106,10 @@ class HaConfigSectionNetwork extends LitElement {
       margin-bottom: 24px;
       max-width: 600px;
     }
+    .discovery-card ha-list-item-button::part(headline),
+    .discovery-card ha-list-item-button::part(supporting-text) {
+      white-space: normal;
+    }
   `;
 }
 

src/panels/config/storage/dialog-mount-view.ts

@@ -73,6 +73,10 @@ const mountPartitionLabel = ({
   return drive ? `${drive} — ${identity}, ${size}` : `${identity}, ${size}`;
 };
 
+// Supervisor accepts only ASCII letters, digits and underscores.
+const mountNameFromLabel = (label?: string): string =>
+  (label ?? "").replace(/^\W+|\W+$/g, "").replace(/\W+/g, "_");
+
 const requiredFieldsFilled = (
   schema: readonly HaFormSchema[],
   data?: MountFormData
@@ -305,6 +309,8 @@ class ViewMountDialog extends DirtyStateProviderMixin<
 
   private _originalType?: SupervisorMountType;
 
+  private _suggestedName?: string;
+
   @state() private _diskIdentity?: string;
 
   public connectedCallback(): void {
@@ -529,7 +535,9 @@ class ViewMountDialog extends DirtyStateProviderMixin<
   private _valueChanged(ev: CustomEvent) {
     this._validationError = {};
     this._validationWarning = {};
+    const previous = this._data;
     this._data = ev.detail.value;
+    this._suggestName(previous);
     if (this._data?.name && !/^\w+$/.test(this._data.name)) {
       this._validationError.name = "invalid_name";
     }
@@ -556,6 +564,32 @@ class ViewMountDialog extends DirtyStateProviderMixin<
     );
   }
 
+  // Name a new disk mount after the partition's volume label, unless the user
+  // typed a name of their own.
+  private _suggestName(previous?: MountFormData) {
+    const data = this._data;
+    if (data?.name !== previous?.name) {
+      this._suggestedName = undefined;
+    }
+    if (
+      this._existing ||
+      data?.type !== SupervisorMountType.DISK ||
+      (data.device === previous?.device &&
+        previous?.type === SupervisorMountType.DISK) ||
+      (data.name && data.name !== this._suggestedName)
+    ) {
+      return;
+    }
+    const name = mountNameFromLabel(
+      this._partitions?.find((entry) => entry.partition.device === data.device)
+        ?.partition.label
+    );
+    if (name !== (data.name ?? "")) {
+      data.name = name;
+    }
+    this._suggestedName = name;
+  }
+
   private async _connectMount(ev) {
     const progressButton = ev.target as HaProgressButton;
     this._error = undefined;

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

@@ -234,7 +234,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         ></ha-icon-button>
         <ha-assist-chip
           slot="selection-bar"
-          .label=${this.hass.localize("ui.panel.config.tag.delete_selected")}
+          .label=${this.hass.localize("ui.common.delete")}
           .disabled=${!this._selected.length}
           @click=${this._removeSelected}
         ></ha-assist-chip>

src/panels/config/tools/debug/ha-debug-connection-row.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/item/ha-list-item-base";
 import "../../../../components/ha-switch";
@@ -43,6 +43,13 @@ class HaDebugConnectionRow extends LitElement {
     setDebugConnection(debugConnection);
     storeState(this.hass);
   }
+
+  static styles = css`
+    ha-list-item-base::part(headline),
+    ha-list-item-base::part(supporting-text) {
+      white-space: normal;
+    }
+  `;
 }
 
 declare global {

src/panels/config/tools/debug/ha-debug-disable-view-transition-row.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { storage } from "../../../../common/decorators/storage";
 import { setViewTransitionDisabled } from "../../../../common/util/view-transition";
@@ -41,6 +41,13 @@ class HaDebugDisableViewTransitionRow extends LitElement {
     this._disabled = (ev.target as HaSwitch).checked;
     setViewTransitionDisabled(this._disabled);
   }
+
+  static styles = css`
+    ha-list-item-base::part(headline),
+    ha-list-item-base::part(supporting-text) {
+      white-space: normal;
+    }
+  `;
 }
 
 declare global {

src/panels/config/tools/debug/ha-debug-safe-area-tool-row.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { consumeLocalize } from "../../../../common/decorators/consume-context-entry";
 import { storage } from "../../../../common/decorators/storage";
@@ -42,6 +42,13 @@ class HaDebugSafeAreaToolRow extends LitElement {
   private _checkedChanged(ev: Event) {
     this._enabled = (ev.target as HaSwitch).checked;
   }
+
+  static styles = css`
+    ha-list-item-base::part(headline),
+    ha-list-item-base::part(supporting-text) {
+      white-space: normal;
+    }
+  `;
 }
 
 declare global {

src/panels/logbook/ha-logbook.ts

@@ -82,6 +82,9 @@ export class HaLogbook extends LitElement {
   @property({ attribute: "show-more-link", type: Boolean })
   public showMoreLink = true;
 
+  @property({ type: Number, attribute: "max-entries" })
+  public maxEntries?: number;
+
   @state() private _logbookEntries?: LogbookEntry[];
 
   @state() private _traceContexts: TraceContexts = {};
@@ -153,7 +156,7 @@ export class HaLogbook extends LitElement {
         .graphColor=${this.graphColor}
         .showCause=${this.showCause}
         .nameDetail=${this.nameDetail}
-        .entries=${entries}
+        .entries=${this._limitEntries(entries, this.maxEntries)}
         .traceContexts=${this._traceContexts}
         .userIdToName=${this._userIdToName}
         .systemUserIds=${this._systemUserIds}
@@ -172,6 +175,11 @@ export class HaLogbook extends LitElement {
     );
   }
 
+  private _limitEntries = memoizeOne(
+    (entries: LogbookEntry[], maxEntries: number | undefined) =>
+      maxEntries ? entries.slice(0, maxEntries) : entries
+  );
+
   private _filterEntriesByCause = memoizeOne(
     (
       entries: LogbookEntry[] | undefined,

src/panels/lovelace/badges/hui-alert-badge.ts

@@ -5,7 +5,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { consume } from "../../../common/decorators/consume";
 import {
   consumeEntityState,
@@ -14,7 +13,7 @@ import {
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
   ALERT_DOMAINS,
-  DEFAULT_ALERT_COLOR,
+  computeAlertColor,
   isAlertActive,
 } from "../../../common/entity/alert_active";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -121,12 +120,14 @@ export class HuiAlertBadge extends LitElement implements LovelaceBadge {
 
     const active = isAlertActive(stateObj);
 
-    const color = active
-      ? (this._config.alert_color ?? DEFAULT_ALERT_COLOR)
-      : this._config.clear_color;
+    const color = computeAlertColor(
+      stateObj,
+      active
+        ? (this._config.alert_color ?? "state")
+        : (this._config.clear_color ?? "none")
+    );
 
     const pulse = active && this._config.pulse === true;
-    const hasColor = color !== undefined && color !== "none";
 
     const name = this._formatters.formatEntityName(stateObj, this._config.name);
 
@@ -143,10 +144,9 @@ export class HuiAlertBadge extends LitElement implements LovelaceBadge {
         .type=${hasTileCardAction(this._config) ? "button" : "badge"}
         .label=${showState && showName ? name : undefined}
         .iconOnly=${!content}
-        class=${classMap({ alert: true, pulse, "no-color": !hasColor })}
+        class=${classMap({ alert: true, pulse })}
         style=${styleMap({
-          "--ha-alert-color":
-            color && hasColor ? computeCssColor(color) : undefined,
+          "--ha-alert-color": color,
         })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
@@ -205,10 +205,7 @@ export class HuiAlertBadge extends LitElement implements LovelaceBadge {
       );
       background: var(--ha-alert-badge-background);
       --ha-card-background: transparent;
-      --badge-color: var(--ha-alert-color);
-    }
-    ha-badge.alert.no-color {
-      --badge-color: var(--secondary-text-color);
+      --badge-color: var(--ha-alert-color, var(--secondary-text-color));
     }
     ha-badge.alert::before {
       position: absolute;

src/panels/lovelace/cards/hui-alert-card.ts

@@ -5,12 +5,11 @@ import { customElement, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { consume } from "../../../common/decorators/consume";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { consumeEntityState } from "../../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
   ALERT_DOMAINS,
-  DEFAULT_ALERT_COLOR,
+  computeAlertColor,
   isAlertActive,
 } from "../../../common/entity/alert_active";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -120,12 +119,14 @@ export class HuiAlertCard extends LitElement implements LovelaceCard {
 
     const active = isAlertActive(stateObj);
 
-    const color = active
-      ? (this._config.alert_color ?? DEFAULT_ALERT_COLOR)
-      : this._config.clear_color;
+    const color = computeAlertColor(
+      stateObj,
+      active
+        ? (this._config.alert_color ?? "state")
+        : (this._config.clear_color ?? "none")
+    );
 
     const pulse = active && this._config.pulse === true;
-    const hasColor = color !== undefined && color !== "none";
 
     const areaName = this._formatters.formatEntityName(stateObj, {
       type: "area",
@@ -133,10 +134,9 @@ export class HuiAlertCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card
-        class=${classMap({ pulse, "no-color": !hasColor })}
+        class=${classMap({ pulse })}
         style=${styleMap({
-          "--ha-alert-color":
-            color && hasColor ? computeCssColor(color) : undefined,
+          "--ha-alert-color": color,
           "--ha-alert-static-opacity": pulse
             ? undefined
             : "var(--ha-alert-pulse-opacity)",
@@ -211,12 +211,7 @@ export class HuiAlertCard extends LitElement implements LovelaceCard {
         position: relative;
         overflow: hidden;
         height: 100%;
-      }
-      ha-card:not(.no-color) {
-        --tile-color: var(--ha-alert-color);
-      }
-      ha-card.no-color {
-        --tile-color: var(--secondary-text-color);
+        --tile-color: var(--ha-alert-color, var(--secondary-text-color));
       }
       ha-card::before {
         position: absolute;

src/panels/lovelace/cards/hui-entities-card.ts

@@ -310,11 +310,11 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         position: relative;
       }
 
-      #states > div:first-child > hui-section-row::part(divider) {
+      #states:first-child > div:first-child > hui-section-row::part(divider) {
         display: none;
       }
 
-      #states > div:first-child > hui-section-row::part(label) {
+      #states:first-child > div:first-child > hui-section-row::part(label) {
         margin-top: 0;
       }
 

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -401,7 +401,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                                   ? "pointer"
                                   : "initial",
                               })}
-                              @click=${this._handleSeek}
+                              @change=${this._handleSeek}
                             >
                             </ha-slider>
                           `

src/panels/lovelace/editor/add-entities-to-view.ts

@@ -1,3 +1,4 @@
+import { navigate } from "../../../common/navigate";
 import type { LovelacePanelConfig } from "../../../data/lovelace";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
@@ -13,8 +14,10 @@ import {
 } from "../../../data/lovelace/config/types";
 import { isStrategyView } from "../../../data/lovelace/config/view";
 import { fetchDashboards } from "../../../data/lovelace/dashboard";
+import { getPanelTitleFromUrlPath, LOVELACE_PANEL } from "../../../data/panel";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
+import { showToast } from "../../../util/toast";
 import { SECTIONS_VIEW_LAYOUT } from "../views/const";
 import { getViewType } from "../views/get-view-type";
 import type { SuggestCardDialogParams } from "./card-editor/show-suggest-card-dialog";
@@ -144,7 +147,23 @@ export const addEntitiesToLovelaceView = async (
         await saveConfig(hass!, viewUrlPath, newConfig);
       } catch (_err: any) {
         alert(hass.localize("ui.panel.lovelace.add_entities.saving_failed"));
+        return;
       }
+      const dashboardPath = viewUrlPath ?? LOVELACE_PANEL;
+      const viewPath = newConfig.views[viewIndex].path || viewIndex;
+      const dashboardTitle = getPanelTitleFromUrlPath(hass, dashboardPath);
+      showToast(element, {
+        message: dashboardTitle
+          ? {
+              translationKey: "ui.panel.lovelace.add_entities.added",
+              args: { dashboard: dashboardTitle },
+            }
+          : { translationKey: "ui.panel.lovelace.add_entities.added_unnamed" },
+        action: {
+          text: { translationKey: "ui.panel.lovelace.add_entities.open" },
+          action: () => navigate(`/${dashboardPath}/${viewPath}`),
+        },
+      });
     };
 
     const view = config.views[viewIndex];

src/panels/lovelace/editor/card-editor/hui-dialog-add-device-card.ts

@@ -20,7 +20,6 @@ import {
   haStyleDialogFixedTop,
 } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import "../../cards/hui-card";
 import type { DeviceSectionCategory } from "../../strategies/device/device-section-strategy";
 import {
@@ -253,7 +252,6 @@ export class HuiDialogAddDeviceCard
       addCards(this._params.lovelaceConfig, this._params.path, this._cardConfig)
     );
     this._saving = false;
-    showSaveSuccessToast(this, this.hass);
     this.closeDialog();
   }