Fix energy distribution home ring overflowing to 100% grid (#54191)

* Fix energy distribution home ring overflowing to 100% grid

Size the home circle from allocated used_solar, used_battery, and
used_grid instead of net used_total so misaligned hours cannot produce
a negative grid arc.

* Add gallery demo for energy distribution home ring

Mock the issue 54185 daily totals with realistic hourly PV, battery,
and grid statistics, including an export-lagged card that overflows
the old ring math.

* Remove gallery energy distribution demo from this PR

Keep the home-ring fix and its unit tests; drop the gallery page
that was only used for local browser verification.

* Keep a zero-consumption home ring as a plain border

When solar is configured but allocated flows are all zero, leave the
arcs unset so the card can show the home outline instead of zero-length
dashes on a borderless circle.

* Keep a defined zero low-carbon home arc

The energy distribution card mounts the home SVG when solar or
lowCarbon is defined. Omitting a 0 leftover hid grid and battery
arcs on a no-solar 100% high-carbon ring.

gallery/src/components/demo-more-info.ts

@@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
-import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
 import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 

gallery/src/ha-demo-options.ts

@@ -1,9 +1,7 @@
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
-import "./components/page-description";
 
 @customElement("ha-demo-options")
 class HaDemoOptions extends LitElement {

src/common/entity/compute_entity_name_display.ts

@@ -19,37 +19,16 @@ import {
   getEntityContext,
   getEntityEntryContext,
 } from "./context/get_entity_context";
+import type { EntityNameItem, EntityNameOptions } from "./entity_name_config";
 
 const DEFAULT_SEPARATOR = " ";
 
-export const DEFAULT_ENTITY_NAME = [
-  { type: "parent_device" },
-  { type: "device" },
-  { type: "entity" },
-] satisfies EntityNameItem[];
-
-export const ENTITY_NAME_TYPES = [
-  "floor",
-  "area",
-  "parent_device",
-  "device",
-  "entity",
-] as const;
-
-export type EntityNameType = (typeof ENTITY_NAME_TYPES)[number];
-
-export type EntityNameItem =
-  | {
-      type: EntityNameType;
-    }
-  | {
-      type: "text";
-      text: string;
-    };
-
-export interface EntityNameOptions {
-  separator?: string;
-}
+export { DEFAULT_ENTITY_NAME, ENTITY_NAME_TYPES } from "./entity_name_config";
+export type {
+  EntityNameItem,
+  EntityNameOptions,
+  EntityNameType,
+} from "./entity_name_config";
 
 // Joins items that need no entity context. Returns undefined as soon as one
 // item references the registries (device, area, ...).

src/common/entity/entity_name_config.ts

@@ -0,0 +1,34 @@
+/**
+ * Shape of a composed entity name, kept free of runtime dependencies so that
+ * modules in the core entry chunk can name an entity without pulling in the
+ * registry-aware formatters from `compute_entity_name_display`.
+ */
+
+export const ENTITY_NAME_TYPES = [
+  "floor",
+  "area",
+  "parent_device",
+  "device",
+  "entity",
+] as const;
+
+export type EntityNameType = (typeof ENTITY_NAME_TYPES)[number];
+
+export type EntityNameItem =
+  | {
+      type: EntityNameType;
+    }
+  | {
+      type: "text";
+      text: string;
+    };
+
+export interface EntityNameOptions {
+  separator?: string;
+}
+
+export const DEFAULT_ENTITY_NAME = [
+  { type: "parent_device" },
+  { type: "device" },
+  { type: "entity" },
+] satisfies EntityNameItem[];

src/components/ha-filter-voice-assistants.ts

@@ -22,7 +22,6 @@ import "./ha-list";
 import "./ha-list-item";
 import "./voice-assistant-brand-icon";
 import { voiceAssistants } from "../data/expose";
-import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 
 @customElement("ha-filter-voice-assistants")
 export class HaFilterVoiceAssistants extends LitElement {

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

@@ -3,7 +3,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HASSDomTargetEvent } from "../../common/dom/fire_event";
-import "../ha-check-list-item";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-dropdown";

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

@@ -33,7 +33,6 @@ import "../ha-list";
 import "../ha-spinner";
 import "../ha-svg-icon";
 import "../ha-tip";
-import "./ha-media-player-browse";
 import "./ha-media-upload-button";
 import type { MediaManageDialogParams } from "./show-media-manage-dialog";
 

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

@@ -19,7 +19,6 @@ import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../types";
 import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
 import "../../ha-adaptive-dialog";
-import "../../ha-dialog-header";
 import "../../ha-icon-button";
 import "../../ha-icon-next";
 import "../../ha-svg-icon";

src/data/energy.ts

@@ -21,7 +21,6 @@ import {
 } from "../common/datetime/calc_date";
 import type { DateRange } from "../common/datetime/calc_date_range";
 import { calcDateRange } from "../common/datetime/calc_date_range";
-import { DEFAULT_ENTITY_NAME } from "../common/entity/compute_entity_name_display";
 import { formatNumber } from "../common/number/format_number";
 import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import { groupBy } from "../common/util/group-by";
@@ -328,12 +327,6 @@ export const computeEnergyLabel = (
     return customName;
   }
 
-  const stateObj = hass.states[statisticId];
-
-  if (stateObj) {
-    return hass.formatEntityName(stateObj, DEFAULT_ENTITY_NAME);
-  }
-
   return getStatisticLabel(hass, statisticId, statisticsMetaData);
 };
 

src/data/recorder.ts

@@ -1,5 +1,5 @@
 import type { Connection } from "home-assistant-js-websocket";
-import { computeStateName } from "../common/entity/compute_state_name";
+import { DEFAULT_ENTITY_NAME } from "../common/entity/entity_name_config";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
 import { firstWeekday } from "../common/datetime/first_weekday";
@@ -348,8 +348,9 @@ export const getStatisticLabel = (
 ): string => {
   const entity = hass.states[statisticsId];
   if (entity) {
-    return computeStateName(entity);
+    return hass.formatEntityName(entity, DEFAULT_ENTITY_NAME);
   }
+  // External statistics have no entity to resolve a name against.
   return statisticsMetaData?.name || statisticsId;
 };
 

src/data/service.ts

@@ -1,4 +1,6 @@
-import type { Context, HomeAssistant } from "../types";
+import { ensureArray } from "../common/array/ensure-array";
+import { isValidEntityId } from "../common/entity/valid_entity_id";
+import type { Context, HomeAssistant, ServiceCallRequest } from "../types";
 import type { Action } from "./script";
 
 export const callExecuteScript = (
@@ -22,3 +24,19 @@ export const serviceCallWillDisconnect = (
       "update.home_assistant_core_update",
       "update.home_assistant_operating_system_update",
     ].includes(serviceData?.entity_id));
+
+// Core merges the target into the service data, so a target entity_id
+// replaces the legacy service data one rather than adding to it. Its schema
+// also accepts comma separated ids and lowercases them.
+export const getServiceCallEntityIds = (
+  serviceData?: ServiceCallRequest["serviceData"],
+  target?: ServiceCallRequest["target"]
+): string[] => [
+  ...new Set(
+    (ensureArray(target?.entity_id ?? serviceData?.entity_id) ?? [])
+      .filter((id): id is string => typeof id === "string")
+      .flatMap((id) => id.split(","))
+      .map((id) => id.trim().toLowerCase())
+      .filter(isValidEntityId)
+  ),
+];

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -17,7 +17,6 @@ import type { LocalizeFunc } from "../../../../common/translations/localize";
 import { throttle } from "../../../../common/util/throttle";
 import "../../../../components/ha-hs-color-picker";
 import "../../../../components/ha-icon";
-import "../../../../components/ha-icon-button-prev";
 import "../../../../components/ha-labeled-slider";
 import { apiContext } from "../../../../data/context";
 import type { LightColor, LightEntity } from "../../../../data/light";

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

@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { transform } from "../../../common/decorators/transform";
 import "../../../components/ha-date-input";
-import "../../../components/ha-time-input";
 import { apiContext, internationalizationContext } from "../../../data/context";
 import { setDateValue } from "../../../data/date";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";

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

@@ -11,6 +11,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
+import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-attribute-icon";
@@ -38,7 +39,6 @@ import "../../../state-control/light/ha-state-control-light-brightness";
 import { apiContext, formattersContext } from "../../../data/context";
 import "../components/ha-more-info-control-select-container";
 import "../components/ha-more-info-state-header";
-import "../components/lights/ha-favorite-color-button";
 import "../components/lights/ha-more-info-light-favorite-colors";
 import "../components/lights/light-color-rgb-picker";
 import "../components/lights/light-color-temp-picker";
@@ -86,12 +86,26 @@ class MoreInfoLight extends LitElement {
 
   private _setMainControl(ev: any) {
     ev.stopPropagation();
-    this._mainControl = ev.currentTarget.control;
+    this._changeMainControl(ev.currentTarget.control);
   }
 
   private _resetMainControl(ev: any) {
     ev.stopPropagation();
-    this._mainControl = "brightness";
+    this._changeMainControl("brightness");
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    // A container that outlives this control (e.g. more-info-content when the
+    // dialog moves between entities) resyncs with the default control.
+    fireEvent(this, "light-main-control-changed", {
+      control: this._mainControl,
+    });
+  }
+
+  private _changeMainControl(control: MainControl) {
+    this._mainControl = control;
+    fireEvent(this, "light-main-control-changed", { control });
   }
 
   private get _stateOverride() {
@@ -400,4 +414,14 @@ declare global {
   interface HTMLElementTagNameMap {
     "more-info-light": MoreInfoLight;
   }
+
+  interface HASSDomEvents {
+    "light-main-control-changed": { control: MainControl };
+  }
+
+  interface HTMLElementEventMap {
+    "light-main-control-changed": HASSDomEvent<
+      HASSDomEvents["light-main-control-changed"]
+    >;
+  }
 }

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

@@ -10,7 +10,6 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
-import "../../../components/ha-outlined-icon-button";
 import "../../../components/ha-state-icon";
 import { apiContext } from "../../../data/context";
 import type { LockEntity } from "../../../data/lock";

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

@@ -31,7 +31,6 @@ import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-marquee-text";
-import "../../../components/ha-select";
 import type { HaSlider } from "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";

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

@@ -5,11 +5,9 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
-import "../../../components/entity/state-info";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-markdown";
-import "../../../components/ha-relative-time";
 import "../../../components/ha-service-control";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import type { ExtEntityRegistryEntry } from "../../../data/entity/entity_registry";

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

@@ -3,7 +3,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { transform } from "../../../common/decorators/transform";
-import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { apiContext, internationalizationContext } from "../../../data/context";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";

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

@@ -6,10 +6,8 @@ import { consumeLocalize } from "../../../common/decorators/consume-context-entr
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
-import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-faded";
 import "../../../components/ha-markdown";
 import "../../../components/ha-spinner";
 import "../../../components/progress/ha-progress-bar";

src/dialogs/more-info/more-info-content.ts

@@ -1,6 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { computeEntityName } from "../../common/entity/compute_entity_name";
@@ -11,6 +12,7 @@ import "../../components/ha-badge";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
 import { supportsCoverPositionCardFeature } from "../../panels/lovelace/card-features/hui-cover-position-card-feature";
 import { supportsLightBrightnessCardFeature } from "../../panels/lovelace/card-features/hui-light-brightness-card-feature";
+import { supportsLightColorTempCardFeature } from "../../panels/lovelace/card-features/hui-light-color-temp-card-feature";
 import type { LovelaceCardFeatureConfig } from "../../panels/lovelace/card-features/types";
 import type { TileCardConfig } from "../../panels/lovelace/cards/types";
 import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
@@ -25,6 +27,8 @@ interface EntityInfo {
   deviceId: string | undefined;
 }
 
+type LightMainControl = HASSDomEvents["light-main-control-changed"]["control"];
+
 @customElement("more-info-content")
 class MoreInfoContent extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -37,6 +41,17 @@ class MoreInfoContent extends LitElement {
 
   @property({ attribute: false }) public data?: Record<string, any>;
 
+  // Mirrors the mode selected in the light control so group members
+  // show the matching slider.
+  @state() private _lightMainControl: LightMainControl = "brightness";
+
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("light-main-control-changed", (ev) => {
+      this._lightMainControl = ev.detail.control;
+    });
+  }
+
   protected render() {
     let moreInfoType: string | undefined;
 
@@ -73,7 +88,10 @@ class MoreInfoContent extends LitElement {
           ? html`
               <hui-section
                 .hass=${this.hass}
-                .config=${this._entitiesSectionConfig(memberIds)}
+                .config=${this._entitiesSectionConfig(
+                  memberIds,
+                  this._lightMainControl
+                )}
               >
               </hui-section>
             `
@@ -104,97 +122,110 @@ class MoreInfoContent extends LitElement {
     }
   );
 
-  private _entitiesSectionConfig = memoizeOne((entityIds: string[]) => {
-    const hass = this.hass!;
+  private _entitiesSectionConfig = memoizeOne(
+    (entityIds: string[], lightMainControl: LightMainControl) => {
+      const hass = this.hass!;
 
-    // Get entity names and areas for all visible entities
-    const entityInfos = entityIds
-      .map<EntityInfo | null>((entityId) => {
-        const entry = hass.entities[entityId];
-        if (entry?.hidden) {
-          return null;
-        }
-        const stateObj = hass.states[entityId];
-        if (!stateObj) {
-          return null;
-        }
-        const entityName = computeEntityName(
-          stateObj,
-          hass.entities,
-          hass.devices
-        );
-        const { area, device } = getEntityContext(
-          stateObj,
-          hass.entities,
-          hass.devices,
-          hass.areas,
-          hass.floors
-        );
-        const areaId = area?.area_id;
-        const deviceId = device?.id;
-        return { entityId, entityName, areaId, deviceId };
-      })
-      .filter(Boolean) as EntityInfo[];
+      // Get entity names and areas for all visible entities
+      const entityInfos = entityIds
+        .map<EntityInfo | null>((entityId) => {
+          const entry = hass.entities[entityId];
+          if (entry?.hidden) {
+            return null;
+          }
+          const stateObj = hass.states[entityId];
+          if (!stateObj) {
+            return null;
+          }
+          const entityName = computeEntityName(
+            stateObj,
+            hass.entities,
+            hass.devices
+          );
+          const { area, device } = getEntityContext(
+            stateObj,
+            hass.entities,
+            hass.devices,
+            hass.areas,
+            hass.floors
+          );
+          const areaId = area?.area_id;
+          const deviceId = device?.id;
+          return { entityId, entityName, areaId, deviceId };
+        })
+        .filter(Boolean) as EntityInfo[];
 
-    // Check if all entities have the same entity name
-    const entityNames = new Set(entityInfos.map((info) => info.entityName));
-    const allSameEntityName = entityNames.size === 1;
+      // Check if all entities have the same entity name
+      const entityNames = new Set(entityInfos.map((info) => info.entityName));
+      const allSameEntityName = entityNames.size === 1;
 
-    // Check if all entities have the same area
-    const areaIds = new Set(entityInfos.map((info) => info.areaId));
-    const allSameArea = areaIds.size === 1;
+      // Check if all entities have the same area
+      const areaIds = new Set(entityInfos.map((info) => info.areaId));
+      const allSameArea = areaIds.size === 1;
 
-    // Check if all entities belong to the same device
-    const deviceIds = new Set(entityInfos.map((info) => info.deviceId));
-    const allSameDevice = deviceIds.size === 1;
+      // Check if all entities belong to the same device
+      const deviceIds = new Set(entityInfos.map((info) => info.deviceId));
+      const allSameDevice = deviceIds.size === 1;
 
-    // Build name and state content config based on conditions. The device name
-    // is redundant when every member belongs to the same device, so omit it
-    // (and fall back to the entity name so the tile still has a label).
-    const name: EntityNameItem[] = [];
+      // Build name and state content config based on conditions. The device name
+      // is redundant when every member belongs to the same device, so omit it
+      // (and fall back to the entity name so the tile still has a label).
+      const name: EntityNameItem[] = [];
 
-    if (!allSameDevice) {
-      name.push({ type: "device" });
-    }
-
-    if (!allSameEntityName || allSameDevice) {
-      name.push({ type: "entity" });
-    }
-
-    const stateContent = ["state"];
-    if (!allSameArea) {
-      stateContent.push("area_name");
-    }
-
-    const cards = entityInfos.map(({ entityId }) => {
-      const features: LovelaceCardFeatureConfig[] = [];
-      const context = { entity_id: entityId };
-      if (supportsCoverPositionCardFeature(hass, context)) {
-        features.push({
-          type: "cover-position",
-        });
-      } else if (supportsLightBrightnessCardFeature(hass, context)) {
-        features.push({
-          type: "light-brightness",
-        });
+      if (!allSameDevice) {
+        name.push({ type: "device" });
       }
 
-      return {
-        type: "tile",
-        entity: entityId,
-        name,
-        state_content: stateContent,
-        features_position: "inline",
-        features,
-        grid_options: { columns: 12 },
-      } as TileCardConfig;
-    });
+      if (!allSameEntityName || allSameDevice) {
+        name.push({ type: "entity" });
+      }
 
-    return {
-      type: "grid",
-      cards,
-    };
-  });
+      const stateContent = ["state"];
+      if (!allSameArea) {
+        stateContent.push("area_name");
+      }
+
+      const cards = entityInfos.map(({ entityId }) => {
+        const features: LovelaceCardFeatureConfig[] = [];
+        const context = { entity_id: entityId };
+        if (supportsCoverPositionCardFeature(hass, context)) {
+          features.push({
+            type: "cover-position",
+          });
+        } else if (lightMainControl === "color") {
+          // There is no RGB tile feature yet, so when the group is set to
+          // color the members show no control rather than a mismatched
+          // brightness slider.
+        } else if (
+          lightMainControl === "color_temp" &&
+          supportsLightColorTempCardFeature(hass, context)
+        ) {
+          features.push({
+            type: "light-color-temp",
+          });
+        } else if (supportsLightBrightnessCardFeature(hass, context)) {
+          features.push({
+            type: "light-brightness",
+          });
+        }
+
+        return {
+          type: "tile",
+          entity: entityId,
+          name,
+          state_content: stateContent,
+          features_position: "inline",
+          features,
+          grid_options: { columns: 12 },
+        } as TileCardConfig;
+      });
+
+      return {
+        type: "grid",
+        cards,
+      };
+    }
+  );
 
   static styles = css`
     hui-section {

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

@@ -27,7 +27,6 @@ import { updateDeviceRegistryEntry } from "../../data/device/device_registry";
 import type { InputSelectEntity } from "../../data/input_select";
 import { setSelectOption } from "../../data/select";
 import { showVoiceAssistantPipelineDetailDialog } from "../../panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail";
-import "../../panels/lovelace/entity-rows/hui-select-entity-row";
 import type { HomeAssistant } from "../../types";
 import { getTranslation } from "../../util/common-translation";
 import { AssistantSetupStyles } from "./styles";

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -6,7 +6,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import "../../components/ha-button";
-import "../../components/ha-dialog-header";
 import "../../components/ha-spinner";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { interceptWakeWord } from "../../data/assist_satellite";

src/external_app/external_messaging.ts

@@ -184,6 +184,15 @@ interface EMOutgoingMessageAddEntityTo extends EMMessage {
   };
 }
 
+interface EMOutgoingMessageEntityControlled extends EMMessage {
+  type: "entity/controlled";
+  payload: {
+    entity_ids: string[];
+    domain: string;
+    service: string;
+  };
+}
+
 interface EMOutgoingMessageMoreInfoOpened extends EMMessage {
   type: "more_info/opened";
   payload: {
@@ -239,6 +248,7 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageImprovScan
   | EMOutgoingMessageImprovConfigureDevice
   | EMOutgoingMessageAddEntityTo
+  | EMOutgoingMessageEntityControlled
   | EMOutgoingMessageFocusElement
   | EMOutgoingMessageReloadAndClearCache
   | EMOutgoingMessageAssistSettings;

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -12,15 +12,12 @@ import { isDate } from "../../common/string/is_date";
 import "../../components/entity/state-info";
 import "../../components/ha-alert";
 import "../../components/ha-button";
-import "../../components/ha-date-input";
 import "../../components/ha-dialog-footer";
-import "../../components/ha-time-input";
 import "../../components/ha-dialog";
 import type { CalendarEventMutableParams } from "../../data/calendar";
 import { deleteCalendarEvent } from "../../data/calendar";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../lovelace/components/hui-generic-entity-row";
 import { renderRRuleAsText } from "./recurrence";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import type { CalendarEventDetailDialogParams } from "./show-dialog-calendar-event-detail";

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -42,7 +42,6 @@ import {
 import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import type { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";

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

@@ -8,9 +8,7 @@ import type {
   LocalizeKeys,
 } from "../../../../../common/translations/localize";
 import { CONDITION_ICONS } from "../../../../../components/ha-condition-icon";
-import "../../../../../components/ha-dropdown-item";
 import type { PickerComboBoxItem } from "../../../../../components/ha-picker-combo-box";
-import "../../../../../components/ha-select";
 import {
   DYNAMIC_PREFIX,
   getValueFromDynamic,

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

@@ -3,7 +3,6 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
-import "../../../../../components/ha-service-picker";
 import "../../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
 import "../../../../../components/input/ha-input";

src/panels/config/automation/add-automation-element/ha-automation-add-search.ts

@@ -27,7 +27,6 @@ import {
 import "../../../../components/chips/ha-chip-set";
 import "../../../../components/chips/ha-filter-chip";
 import "../../../../components/entity/state-badge";
-import "../../../../components/ha-button-toggle-group";
 import "../../../../components/ha-combo-box-item";
 import "../../../../components/ha-domain-icon";
 import "../../../../components/ha-floor-icon";

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

@@ -13,9 +13,13 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  fireEvent,
+  type HASSDomTargetEvent,
+} from "../../../common/dom/fire_event";
 import { navigate, replaceCurrentUrl } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
@@ -49,9 +53,14 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import "../../../components/ha-trace-picker";
+import "../../../components/ha-split-panel";
+import type { HaSplitPanel } from "../../../components/ha-split-panel";
 
 const TABS = ["details", "timeline", "logbook", "automation_config"] as const;
 
+const STORAGE_KEY_SPLIT_POSITION = "automation-trace-split-position";
+const DEFAULT_SPLIT_POSITION = 20;
+
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -84,6 +93,8 @@ export class HaAutomationTrace extends LitElement {
 
   @state() private _view: (typeof TABS)[number] | "blueprint" = "details";
 
+  @state() private _splitPosition = DEFAULT_SPLIT_POSITION;
+
   @query("hat-script-graph") private _graph?: HatScriptGraph;
 
   protected render(): TemplateResult {
@@ -91,10 +102,6 @@ export class HaAutomationTrace extends LitElement {
       ? this.hass.states[this._entityId]
       : undefined;
 
-    const graph = this._graph;
-    const trackedNodes = graph?.trackedNodes;
-    const renderedNodes = graph?.renderedNodes;
-
     const title = stateObj?.attributes.friendly_name || this._entityId;
 
     let devButtons: TemplateResult | string = "";
@@ -240,94 +247,19 @@ export class HaAutomationTrace extends LitElement {
                 ? ""
                 : html`
                     <div class="main">
-                      <div class="graph">
-                        <hat-script-graph
-                          .trace=${this._trace}
-                          .selected=${this._selected?.path}
-                          @graph-node-selected=${this._pickNode}
-                        ></hat-script-graph>
-                      </div>
-
-                      <div class="info">
-                        <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
-                          ${TABS.map(
-                            (view) => html`
-                              <ha-tab-group-tab
-                                slot="nav"
-                                .active=${this._view === view}
-                                .panel=${view}
+                      ${
+                        this.narrow
+                          ? this._renderPanes()
+                          : html`
+                              <ha-split-panel
+                                class="split"
+                                .position=${this._splitPosition}
+                                @wa-reposition=${this._splitRepositioned}
                               >
-                                ${this.hass!.localize(
-                                  `ui.panel.config.automation.trace.tabs.${view}`
-                                )}
-                              </ha-tab-group-tab>
+                                ${this._renderPanes()}
+                              </ha-split-panel>
                             `
-                          )}
-                          ${
-                            this._trace.blueprint_inputs
-                              ? html`
-                                  <ha-tab-group-tab
-                                    slot="nav"
-                                    .active=${this._view === "blueprint"}
-                                    panel="blueprint"
-                                  >
-                                    ${this.hass!.localize(
-                                      `ui.panel.config.automation.trace.tabs.blueprint_config`
-                                    )}
-                                  </ha-tab-group-tab>
-                                `
-                              : ""
-                          }
-                        </ha-tab-group>
-                        ${
-                          this._selected === undefined ||
-                          this._logbookEntries === undefined ||
-                          trackedNodes === undefined
-                            ? nothing
-                            : this._view === "details"
-                              ? html`
-                                  <ha-trace-path-details
-                                    .hass=${this.hass}
-                                    .narrow=${this.narrow}
-                                    .trace=${this._trace}
-                                    .selected=${this._selected}
-                                    .logbookEntries=${this._logbookEntries}
-                                    .trackedNodes=${trackedNodes}
-                                    .renderedNodes=${renderedNodes!}
-                                  ></ha-trace-path-details>
-                                `
-                              : this._view === "automation_config"
-                                ? html`
-                                    <ha-trace-config
-                                      .trace=${this._trace}
-                                    ></ha-trace-config>
-                                  `
-                                : this._view === "logbook"
-                                  ? html`
-                                      <ha-trace-logbook
-                                        .hass=${this.hass}
-                                        .narrow=${this.narrow}
-                                        .trace=${this._trace}
-                                        .logbookEntries=${this._logbookEntries}
-                                      ></ha-trace-logbook>
-                                    `
-                                  : this._view === "blueprint"
-                                    ? html`
-                                        <ha-trace-blueprint-config
-                                          .trace=${this._trace}
-                                        ></ha-trace-blueprint-config>
-                                      `
-                                    : html`
-                                        <ha-trace-timeline
-                                          .hass=${this.hass}
-                                          .trace=${this._trace}
-                                          .logbookEntries=${this._logbookEntries}
-                                          .selected=${this._selected}
-                                          @value-changed=${this._timelinePathPicked}
-                                        ></ha-trace-timeline>
-                                      `
-                        }
-                      </div>
+                      }
                     </div>
                   `
         }
@@ -335,12 +267,115 @@ export class HaAutomationTrace extends LitElement {
     `;
   }
 
+  private _renderPanes(): TemplateResult {
+    const graph = this._graph;
+    const trackedNodes = graph?.trackedNodes;
+    const renderedNodes = graph?.renderedNodes;
+
+    return html`
+      <div class="graph" slot="start">
+        <hat-script-graph
+          .trace=${this._trace}
+          .selected=${this._selected?.path}
+          @graph-node-selected=${this._pickNode}
+        ></hat-script-graph>
+      </div>
+
+      <div class="info" slot="end">
+        <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+          ${TABS.map(
+            (view) => html`
+              <ha-tab-group-tab
+                slot="nav"
+                .active=${this._view === view}
+                .panel=${view}
+              >
+                ${this.hass!.localize(
+                  `ui.panel.config.automation.trace.tabs.${view}`
+                )}
+              </ha-tab-group-tab>
+            `
+          )}
+          ${
+            this._trace!.blueprint_inputs
+              ? html`
+                  <ha-tab-group-tab
+                    slot="nav"
+                    .active=${this._view === "blueprint"}
+                    panel="blueprint"
+                  >
+                    ${this.hass!.localize(
+                      `ui.panel.config.automation.trace.tabs.blueprint_config`
+                    )}
+                  </ha-tab-group-tab>
+                `
+              : ""
+          }
+        </ha-tab-group>
+        ${
+          this._selected === undefined ||
+          this._logbookEntries === undefined ||
+          trackedNodes === undefined
+            ? nothing
+            : this._view === "details"
+              ? html`
+                  <ha-trace-path-details
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .trace=${this._trace}
+                    .selected=${this._selected}
+                    .logbookEntries=${this._logbookEntries}
+                    .trackedNodes=${trackedNodes}
+                    .renderedNodes=${renderedNodes!}
+                  ></ha-trace-path-details>
+                `
+              : this._view === "automation_config"
+                ? html`
+                    <ha-trace-config .trace=${this._trace}></ha-trace-config>
+                  `
+                : this._view === "logbook"
+                  ? html`
+                      <ha-trace-logbook
+                        .hass=${this.hass}
+                        .narrow=${this.narrow}
+                        .trace=${this._trace}
+                        .logbookEntries=${this._logbookEntries}
+                      ></ha-trace-logbook>
+                    `
+                  : this._view === "blueprint"
+                    ? html`
+                        <ha-trace-blueprint-config
+                          .trace=${this._trace}
+                        ></ha-trace-blueprint-config>
+                      `
+                    : html`
+                        <ha-trace-timeline
+                          .hass=${this.hass}
+                          .trace=${this._trace}
+                          .logbookEntries=${this._logbookEntries}
+                          .selected=${this._selected}
+                          @value-changed=${this._timelinePathPicked}
+                        ></ha-trace-timeline>
+                      `
+        }
+      </div>
+    `;
+  }
+
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     this.hass.loadBackendTranslation("triggers");
     this.hass.loadBackendTranslation("conditions");
 
+    const storedPosition = localStorage?.[STORAGE_KEY_SPLIT_POSITION];
+    if (storedPosition) {
+      const parsed = parseFloat(storedPosition);
+      if (!isNaN(parsed) && parsed > 0 && parsed < 100) {
+        this._splitPosition = parsed;
+      }
+    }
+
     if (!this.automationId) {
       return;
     }
@@ -428,6 +463,19 @@ export class HaAutomationTrace extends LitElement {
     this._selected = ev.detail;
   }
 
+  private _splitRepositioned(ev: HASSDomTargetEvent<HaSplitPanel>) {
+    this._splitPosition = ev.target.position;
+    this._storeSplitPosition();
+  }
+
+  private _storeSplitPosition = debounce(
+    () => {
+      localStorage[STORAGE_KEY_SPLIT_POSITION] = String(this._splitPosition);
+    },
+    500,
+    false
+  );
+
   private _refreshTraces() {
     this._loadTraces();
   }
@@ -618,13 +666,22 @@ export class HaAutomationTrace extends LitElement {
           padding: 16px;
         }
 
+        ha-split-panel.split {
+          flex: 1;
+          min-height: 0;
+          min-width: 0;
+          --ha-split-panel-min: 10%;
+          --ha-split-panel-max: 80%;
+          --ha-split-panel-divider-hit-area: var(--ha-space-4);
+        }
+
         .graph {
-          border-right: 1px solid var(--divider-color);
-          max-width: 50%;
           box-sizing: border-box;
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          min-width: 0;
+          min-height: 0;
         }
         hat-script-graph {
           flex: 1;
@@ -642,6 +699,8 @@ export class HaAutomationTrace extends LitElement {
         }
         .info {
           flex: 1;
+          min-width: 0;
+          min-height: 0;
           overflow-y: auto;
           background-color: var(--card-background-color);
         }

src/panels/config/automation/trigger/automation-trigger-id.ts

@@ -454,9 +454,11 @@ export const cleanupRemovedGeneratedTriggerReferences = (
 };
 
 /**
- * Assign a fresh generated ID to every leaf sharing a stored ID, including manual IDs.
+ * Assign a fresh generated ID to every referenced leaf sharing a stored ID.
  * Expand trigger-condition references to all replacements for the old ID, preserving
- * their original "any of these triggers" meaning. Return the original config if IDs are unique.
+ * their original "any of these triggers" meaning. Duplicate IDs that no trigger
+ * condition references are stripped instead, so the fix does not create generated
+ * IDs nobody uses. Return the original config if IDs are unique.
  * Templates and action data that inspect trigger.id directly are not rewritten;
  * the controller's confirmation dialog warns about that limitation.
  */
@@ -470,6 +472,21 @@ export const makeDuplicateTriggerIdsUnique = (
     return config;
   }
 
+  const referencedIds = new Set<string>();
+  new AutomationTriggerConditionMapper((condition) =>
+    mapReferencedTriggerIds(condition, (id) => {
+      referencedIds.add(id);
+      return id;
+    })
+  ).map(config);
+
+  const referencedDuplicates = new Set(
+    [...duplicates].filter((id) => referencedIds.has(id))
+  );
+  const unreferencedDuplicates = new Set(
+    [...duplicates].filter((id) => !referencedIds.has(id))
+  );
+
   const reservedIds = new Set(ids.filter((id) => !duplicates.has(id)));
   const generatedIds = new Set<string>();
   const assignments = new Map<Trigger, string>();
@@ -479,7 +496,7 @@ export const makeDuplicateTriggerIdsUnique = (
   // trigger its own ID, references to the old ID must expand to every new ID.
   flattenTriggers(config.triggers).forEach((trigger) => {
     const id = getTriggerId(trigger);
-    if (!id || !duplicates.has(id)) {
+    if (!id || !referencedDuplicates.has(id)) {
       return;
     }
     const generatedId = getGeneratedTriggerId(reservedIds, generatedIds);
@@ -487,14 +504,32 @@ export const makeDuplicateTriggerIdsUnique = (
     replacementIds.set(id, [...(replacementIds.get(id) || []), generatedId]);
   });
 
+  const triggers = walkLeafTriggers(config.triggers, (trigger) => {
+    if (assignments.has(trigger)) {
+      return { ...trigger, id: assignments.get(trigger) };
+    }
+    if (isTriggerList(trigger)) {
+      return trigger;
+    }
+    const id = getTriggerId(trigger);
+    if (id && unreferencedDuplicates.has(id)) {
+      const { id: _id, ...rest } = trigger;
+      return rest as Trigger;
+    }
+    return trigger;
+  }) as Trigger | Trigger[];
+
+  if (!referencedDuplicates.size) {
+    return {
+      ...config,
+      triggers,
+    };
+  }
+
   return {
     ...new AutomationTriggerConditionMapper((condition) =>
       mapReferencedTriggerIds(condition, (id) => replacementIds.get(id) ?? id)
     ).map(config),
-    triggers: walkLeafTriggers(config.triggers, (trigger) =>
-      assignments.has(trigger)
-        ? { ...trigger, id: assignments.get(trigger) }
-        : trigger
-    ) as Trigger | Trigger[],
+    triggers,
   };
 };

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

@@ -4,7 +4,6 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
-import "../../../../../components/ha-check-list-item";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-icon-button";

src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts

@@ -8,7 +8,6 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-icon-button-prev";
 import "../../../../components/item/ha-row-item";
 import { downloadEmergencyKit } from "../../../../data/backup";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";

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

@@ -34,7 +34,6 @@ import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
 import type {

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

@@ -11,7 +11,6 @@ import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-spinner";
 import "../../../components/ha-svg-icon";
 import type {
@@ -29,7 +28,6 @@ import {
 import type { ManagerStateEvent } from "../../../data/backup_manager";
 import type { CloudStatus } from "../../../data/cloud";
 import "../../../layouts/hass-subpage";
-import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { showAlertDialog } from "../../lovelace/custom-card-helpers";

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

@@ -22,7 +22,6 @@ import type { CloudStatus } from "../../../data/cloud";
 import { subscribeConfigEntries } from "../../../data/config_entries";
 import type { RouterOptions } from "../../../layouts/hass-router-page";
 import { HassRouterPage } from "../../../layouts/hass-router-page";
-import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import { showToast } from "../../../util/toast";

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

@@ -27,7 +27,6 @@ import type {
   RowClickedEvent,
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -6,7 +6,6 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-markdown-element";
 import "../../../../components/ha-dialog";
-import "../../../../components/ha-select";
 import "../../../../components/ha-spinner";
 import { fetchSupportPackage } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";

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

@@ -43,11 +43,9 @@ import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-check-list-item";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -27,7 +27,6 @@ import "../../../helpers/forms/ha-input_select-form";
 import "../../../helpers/forms/ha-input_text-form";
 import "../../../helpers/forms/ha-schedule-form";
 import "../../../helpers/forms/ha-timer-form";
-import "../../../voice-assistants/entity-voice-settings";
 import "../../entity-registry-settings-editor";
 import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor";
 import { getDeleteConfirmationText } from "../../get-delete-confirmation-text";

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

@@ -25,7 +25,6 @@ import "../../../components/ha-area-picker";
 import "../../../components/ha-color-picker";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon";
-import "../../../components/ha-icon-button-next";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-labels-picker";
 import "../../../components/ha-select";

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

@@ -54,7 +54,6 @@ import type {
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-check-list-item";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";

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

@@ -48,7 +48,6 @@ import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
-import "../../../components/ha-filter-entities";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-voice-assistants";

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

@@ -20,7 +20,6 @@ import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-dialog";
-import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";

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

@@ -11,10 +11,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import {
-  stopKeydownEnterSpacePropagation,
-  stopPropagation,
-} from "../../../common/dom/stop_propagation";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../../common/entity/context/get_device_context";
 import { navigate } from "../../../common/navigate";
@@ -77,7 +74,8 @@ class HaConfigEntryDeviceRow extends LitElement {
       area ? area.name : undefined,
     ].filter(Boolean);
 
-    return html`<ha-list-item-button
+    return html`<ha-md-list-item
+      type="button"
       @click=${this._handleNavigateToDevice}
       class=${classMap({ disabled: Boolean(device.disabled_by) })}
     >
@@ -127,14 +125,15 @@ class HaConfigEntryDeviceRow extends LitElement {
             : nothing
         }</span
       >
-      ${!this.narrow ? html`<ha-icon-next slot="end"></ha-icon-next>` : nothing}
+      ${
+        !this.narrow ? html`<ha-icon-next slot="end"> </ha-icon-next>` : nothing
+      }
       <div class="vertical-divider" slot="end" @click=${stopPropagation}></div>
       ${
         !this.narrow
           ? html`<ha-icon-button
               slot="end"
               @click=${this._handleEditDeviceButton}
-              @keydown=${stopKeydownEnterSpacePropagation}
               .path=${mdiPencil}
               .label=${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.device.edit"
@@ -146,7 +145,6 @@ class HaConfigEntryDeviceRow extends LitElement {
       <ha-dropdown
         slot="end"
         @click=${stopPropagation}
-        @keydown=${stopKeydownEnterSpacePropagation}
         @wa-select=${this._handleMenuAction}
       >
         <ha-icon-button
@@ -223,7 +221,7 @@ class HaConfigEntryDeviceRow extends LitElement {
             : nothing
         }
       </ha-dropdown>
-    </ha-list-item-button>`;
+    </ha-md-list-item> `;
   }
 
   private _getEntities = (): EntityRegistryEntry[] =>
@@ -378,26 +376,25 @@ class HaConfigEntryDeviceRow extends LitElement {
   static styles = [
     haStyle,
     css`
-      ha-list-item-button {
+      :host {
         border-top: 1px solid var(--divider-color);
-        --ha-row-item-padding-inline: 56px 16px;
       }
-      ha-icon-button,
-      ha-icon-next,
-      ha-svg-icon {
-        color: var(--ha-color-fill-neutral-loud-resting);
+      ha-md-list-item {
+        --md-list-item-leading-space: 56px;
+        --md-ripple-hover-color: transparent;
+        --md-ripple-pressed-color: transparent;
       }
-      :host([is-child]) ha-list-item-button {
-        --ha-row-item-padding-inline: 88px 16px;
+      :host([is-child]) ha-md-list-item {
+        --md-list-item-leading-space: 88px;
       }
       .disabled {
         opacity: 0.5;
       }
-      :host([narrow]) ha-list-item-button {
-        --ha-row-item-padding-inline: 16px;
+      :host([narrow]) ha-md-list-item {
+        --md-list-item-leading-space: 16px;
       }
-      :host([narrow][is-child]) ha-list-item-button {
-        --ha-row-item-padding-inline: 48px 16px;
+      :host([narrow][is-child]) ha-md-list-item {
+        --md-list-item-leading-space: 48px;
       }
       ha-tree-indicator {
         width: 48px;
@@ -408,9 +405,8 @@ class HaConfigEntryDeviceRow extends LitElement {
         width: 1px;
         background: var(--divider-color);
       }
-      ha-list-item-button::part(end) {
-        align-self: stretch;
-        gap: var(--ha-space-4);
+      a {
+        text-decoration: none;
       }
     `,
   ];

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

@@ -28,9 +28,6 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import "../../../components/item/ha-list-item-button";
-import "../../../components/item/ha-row-item";
-import "../../../components/list/ha-list-base";
 import {
   deleteApplicationCredential,
   fetchApplicationCredentialsConfigEntry,
@@ -46,9 +43,9 @@ import {
   reloadConfigEntry,
   updateConfigEntry,
 } from "../../../data/config_entries";
-import { groupDevicesByParent } from "../../../data/device/device_registry";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
 import { getConfigEntryDiagnosticsDownloadUrl } from "../../../data/diagnostics";
+import { groupDevicesByParent } from "../../../data/device/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import type { IntegrationManifest } from "../../../data/integration";
 import {
@@ -167,8 +164,8 @@ export class HaConfigEntryRow extends LitElement {
 
     const subEntries = this.data.subEntries;
 
-    return html` <div class="config-entry-wrapper">
-      <ha-row-item
+    return html`<ha-md-list>
+      <ha-md-list-item
         class=${classMap({
           config_entry: true,
           "state-not-loaded": item!.state === "not_loaded",
@@ -248,82 +245,89 @@ export class HaConfigEntryRow extends LitElement {
           ${
             allDevices.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${
                       allDevices.length === 1
                         ? `/config/devices/device/${allDevices[0].id}`
                         : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`
                     }
-                    value="devices"
                   >
-                    <ha-svg-icon .path=${mdiDevices} slot="icon"></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.devices`,
-                      { count: allDevices.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="devices">
+                      <ha-svg-icon
+                        .path=${mdiDevices}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.devices`,
+                        { count: allDevices.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
           ${
             allServices.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${
                       allServices.length === 1
                         ? `/config/devices/device/${allServices[0].id}`
                         : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`
                     }
-                    value="services"
                   >
-                    <ha-svg-icon
-                      .path=${mdiHandExtendedOutline}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.services`,
-                      { count: allServices.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="services">
+                      <ha-svg-icon
+                        .path=${mdiHandExtendedOutline}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.services`,
+                        { count: allServices.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
           ${
             entities.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
-                    value="entities"
                   >
-                    <ha-svg-icon
-                      .path=${mdiShapeOutline}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.entities`,
-                      { count: entities.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="entities">
+                      <ha-svg-icon
+                        .path=${mdiShapeOutline}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.entities`,
+                        { count: entities.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
           ${
             ERROR_STATES.includes(item.state)
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${`/config/logs?filter=${encodeURIComponent(item.domain)}`}
-                    value="logs"
                   >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiTextBoxOutline}
-                    ></ha-svg-icon>
-                    ${this.hass.localize("ui.panel.config.logs.caption")}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="logs">
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiTextBoxOutline}
+                      ></ha-svg-icon>
+                      ${this.hass.localize("ui.panel.config.logs.caption")}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
@@ -372,18 +376,22 @@ export class HaConfigEntryRow extends LitElement {
           ${
             this.diagnosticHandler && item.state === "loaded"
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
                     target="_blank"
                     rel="noreferrer"
                     @click=${this._signUrl}
-                    value="diagnostics"
                   >
-                    <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
-                    ${this.hass.localize(
-                      "ui.panel.config.integrations.config_entry.download_diagnostics"
-                    )}
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="diagnostics">
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiDownload}
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_entry.download_diagnostics"
+                      )}
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
@@ -444,85 +452,82 @@ export class HaConfigEntryRow extends LitElement {
               : nothing
           }
         </ha-dropdown>
-      </ha-row-item>
-      <ha-list-base>
-        ${
-          this._expanded
-            ? subEntries.length
-              ? html`${
-                  ownDevices.length
-                    ? html`<div class="devices">
-                        <ha-list-item-button
-                          @click=${this._toggleOwnDevices}
-                          class="toggle-devices-row ${classMap({
+      </ha-md-list-item>
+      ${
+        this._expanded
+          ? subEntries.length
+            ? html`${
+                ownDevices.length
+                  ? html`<ha-md-list class="devices">
+                      <ha-md-list-item
+                        @click=${this._toggleOwnDevices}
+                        type="button"
+                        class="toggle-devices-row ${classMap({
+                          expanded: this._devicesExpanded,
+                        })}"
+                      >
+                        <ha-icon-button
+                          class="expand-button ${classMap({
                             expanded: this._devicesExpanded,
                           })}"
+                          .path=${mdiChevronDown}
+                          slot="start"
                         >
-                          <ha-icon-button
-                            class="expand-button ${classMap({
-                              expanded: this._devicesExpanded,
-                            })}"
-                            .path=${mdiChevronDown}
-                            slot="start"
-                          >
-                          </ha-icon-button>
-                          <span slot="headline"
-                            >${this.hass.localize(
-                              "ui.panel.config.integrations.config_entry.devices_without_subentry"
-                            )}</span
-                          >
-                        </ha-list-item-button>
-                        ${
-                          this._devicesExpanded
-                            ? groupDevicesByParent(ownDevices).map(
-                                ({ device, isChild, isLastChild }) =>
-                                  html`<ha-config-entry-device-row
-                                    .hass=${this.hass}
-                                    .narrow=${this.narrow}
-                                    .entry=${item}
-                                    .device=${device}
-                                    .entities=${entities}
-                                    .isChild=${isChild}
-                                    .isLastChild=${isLastChild}
-                                  ></ha-config-entry-device-row>`
-                              )
-                            : nothing
-                        }
-                      </div>`
-                    : nothing
-                }
-                ${subEntries.map(
-                  (subEntryData) => html`
-                    <ha-config-sub-entry-row
+                        </ha-icon-button>
+                        ${this.hass.localize(
+                          "ui.panel.config.integrations.config_entry.devices_without_subentry"
+                        )}
+                      </ha-md-list-item>
+                      ${
+                        this._devicesExpanded
+                          ? groupDevicesByParent(ownDevices).map(
+                              ({ device, isChild, isLastChild }) =>
+                                html`<ha-config-entry-device-row
+                                  .hass=${this.hass}
+                                  .narrow=${this.narrow}
+                                  .entry=${item}
+                                  .device=${device}
+                                  .entities=${entities}
+                                  .isChild=${isChild}
+                                  .isLastChild=${isLastChild}
+                                ></ha-config-entry-device-row>`
+                            )
+                          : nothing
+                      }
+                    </ha-md-list>`
+                  : nothing
+              }
+              ${subEntries.map(
+                (subEntryData) => html`
+                  <ha-config-sub-entry-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .manifest=${this.manifest}
+                    .diagnosticHandler=${this.diagnosticHandler}
+                    .entities=${this.entities}
+                    .entry=${item}
+                    .data=${subEntryData}
+                    data-entry-id=${item.entry_id}
+                  ></ha-config-sub-entry-row>
+                `
+              )}`
+            : html`
+                ${groupDevicesByParent(ownDevices).map(
+                  ({ device, isChild, isLastChild }) =>
+                    html`<ha-config-entry-device-row
                       .hass=${this.hass}
                       .narrow=${this.narrow}
-                      .manifest=${this.manifest}
-                      .diagnosticHandler=${this.diagnosticHandler}
-                      .entities=${this.entities}
                       .entry=${item}
-                      .data=${subEntryData}
-                      data-entry-id=${item.entry_id}
-                    ></ha-config-sub-entry-row>
-                  `
-                )}`
-              : html`
-                  ${groupDevicesByParent(ownDevices).map(
-                    ({ device, isChild, isLastChild }) =>
-                      html`<ha-config-entry-device-row
-                        .hass=${this.hass}
-                        .narrow=${this.narrow}
-                        .entry=${item}
-                        .device=${device}
-                        .entities=${entities}
-                        .isChild=${isChild}
-                        .isLastChild=${isLastChild}
-                      ></ha-config-entry-device-row>`
-                  )}
-                `
-            : nothing
-        }
-      </ha-list-base>
-    </div>`;
+                      .device=${device}
+                      .entities=${entities}
+                      .isChild=${isChild}
+                      .isLastChild=${isLastChild}
+                    ></ha-config-entry-device-row>`
+                )}
+              `
+          : nothing
+      }
+    </ha-md-list>`;
   }
 
   private _configPanel = memoizeOne(getConfigPanelPath);
@@ -844,22 +849,18 @@ export class HaConfigEntryRow extends LitElement {
       .expand-button.expanded {
         transform: rotate(180deg);
       }
-      .config-entry-wrapper {
+      ha-md-list {
         border: 1px solid var(--divider-color);
         border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-        background-color: var(--card-background-color);
+        padding: 0;
       }
       :host([narrow]) {
         margin-left: -12px;
         margin-right: -12px;
       }
-      .devices {
+      ha-md-list.devices {
         margin: 16px;
         margin-top: 0;
-        background-color: var(--card-background-color);
-      }
-      ha-icon-button {
-        color: var(--ha-color-fill-neutral-loud-resting);
       }
       ha-icon-button.link {
         color: var(
@@ -878,11 +879,6 @@ export class HaConfigEntryRow extends LitElement {
       ha-dropdown a {
         text-decoration: none;
       }
-      .message {
-        display: flex;
-        align-items: center;
-        gap: var(--ha-space-2);
-      }
     `,
   ];
 }

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

@@ -30,10 +30,10 @@ import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
 import "../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../components/input/ha-input-search";
-import "../../../components/item/ha-list-item-base";
-import "../../../components/list/ha-list-base";
 import { getSignedPath } from "../../../data/auth";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
 import {
@@ -68,7 +68,6 @@ import { QUALITY_SCALE_MAP } from "../../../data/integration_quality_scale";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { multiTermSearch } from "../../../resources/fuseMultiTerm";
@@ -755,11 +754,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         "ui.panel.config.integrations.discovered"
                       )}
                     </h3>
-                    <ha-list-base class="discovered">
+                    <ha-md-list class="discovered">
                       ${filteredDiscoveryData.map(
                         (flow) =>
-                          html`<ha-list-item-base class="discovered">
-                            <span slot="headline">${flow.localized_title}</span>
+                          html`<ha-md-list-item class="discovered">
+                            ${flow.localized_title}
                             <ha-button
                               slot="end"
                               variant="success"
@@ -769,9 +768,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                             >
                               ${this.hass.localize("ui.common.add")}
                             </ha-button>
-                          </ha-list-item-base>`
+                          </ha-md-list-item>`
                       )}
-                    </ha-list-base>
+                    </ha-md-list>
                   </div>
                 `
               : nothing
@@ -787,17 +786,15 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     </h3>
                     ${
                       filteredAttentionFlows.length
-                        ? html`<ha-list-base class="attention">
+                        ? html`<ha-md-list class="attention">
                             ${filteredAttentionFlows.map((flow) => {
                               const attention = ATTENTION_SOURCES.includes(
                                 flow.context.source
                               );
-                              return html`<ha-list-item-base
+                              return html`<ha-md-list-item
                                 class="config_entry ${attention ? "attention" : ""}"
                               >
-                                <span slot="headline"
-                                  >${flow.localized_title}</span
-                                >
+                                ${flow.localized_title}
                                 <span slot="supporting-text"
                                   >${this.hass.localize(
                                     `ui.panel.config.integrations.${
@@ -816,9 +813,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                                     }`
                                   )}</ha-button
                                 >
-                              </ha-list-item-base>`;
+                              </ha-md-list-item>`;
                             })}
-                          </ha-list-base>`
+                          </ha-md-list>`
                         : nothing
                     }
                     ${filteredAttentionData.map(
@@ -1518,21 +1515,26 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
           animation: unset;
         }
-        ha-list-base {
+        ha-md-list {
           border: 1px solid var(--divider-color);
           border-radius: var(--ha-border-radius-md);
-          overflow: hidden;
+          padding: 0;
         }
-        ha-list-base.discovered {
-          background-color: rgba(var(--rgb-success-color), 0.2);
+        .discovered {
+          --md-list-container-color: rgba(var(--rgb-success-color), 0.2);
         }
-        ha-list-base.attention {
-          background-color: rgba(var(--rgb-warning-color), 0.2);
+        .attention {
+          --md-list-container-color: rgba(var(--rgb-warning-color), 0.2);
         }
-        ha-list-item-base.discovered {
-          --ha-row-item-min-height: 72px;
+        ha-md-list-item {
+          --md-list-item-top-space: 4px;
+          --md-list-item-bottom-space: 4px;
+          position: relative;
         }
-        ha-list-item-base.config_entry::after {
+        ha-md-list-item.discovered {
+          height: 72px;
+        }
+        ha-md-list-item.config_entry::after {
           position: absolute;
           top: 0;
           right: 0;
@@ -1594,7 +1596,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .state-disabled [slot="supporting-text"] {
           opacity: var(--md-list-item-disabled-opacity, 0.3);
         }
-        ha-list-base {
+        ha-md-list {
           margin-top: 8px;
           margin-bottom: 8px;
         }

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

@@ -10,7 +10,6 @@ import {
 } from "../../../data/config_flow";
 import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
 import { domainToName } from "../../../data/integration";
-import "../../../layouts/hass-loading-screen";
 import { ChildPanelReady } from "../../../layouts/panel-ready";
 import type { RouterOptions } from "../../../layouts/hass-router-page";
 import { HassRouterPage } from "../../../layouts/hass-router-page";

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

@@ -13,14 +13,13 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import "../../../components/item/ha-row-item";
-import "../../../components/list/ha-list-base";
 import type { ConfigEntry } from "../../../data/config_entries";
 import { deleteSubEntry, updateSubEntry } from "../../../data/config_entries";
 import { groupDevicesByParent } from "../../../data/device/device_registry";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
 import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
 import type { IntegrationManifest } from "../../../data/integration";
+import type { SubEntryData } from "./ha-config-integration-page";
 import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow";
 import type { HomeAssistant } from "../../../types";
 import {
@@ -28,7 +27,6 @@ import {
   showPromptDialog,
 } from "../../lovelace/custom-card-helpers";
 import "./ha-config-entry-device-row";
-import type { SubEntryData } from "./ha-config-integration-page";
 
 @customElement("ha-config-sub-entry-row")
 class HaConfigSubEntryRow extends LitElement {
@@ -56,8 +54,8 @@ class HaConfigSubEntryRow extends LitElement {
     const services = this.data.services;
     const entities = this._getEntities();
 
-    return html`<div class="sub-entry-card">
-      <ha-row-item
+    return html`<ha-md-list>
+      <ha-md-list-item
         class="sub-entry"
         data-entry-id=${configEntry.entry_id}
         .configEntry=${configEntry}
@@ -109,65 +107,71 @@ class HaConfigSubEntryRow extends LitElement {
           ${
             devices.length || services.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${
                       devices.length === 1
                         ? `/config/devices/device/${devices[0].id}`
                         : `/config/devices/dashboard?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`
                     }
-                    value="devices"
                   >
-                    <ha-svg-icon .path=${mdiDevices} slot="icon"></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.devices`,
-                      { count: devices.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="devices">
+                      <ha-svg-icon
+                        .path=${mdiDevices}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.devices`,
+                        { count: devices.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
           ${
             services.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${
                       services.length === 1
                         ? `/config/devices/device/${services[0].id}`
                         : `/config/devices/dashboard?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`
                     }
-                    value="services"
                   >
-                    <ha-svg-icon
-                      .path=${mdiHandExtendedOutline}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.services`,
-                      { count: services.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="services">
+                      <ha-svg-icon
+                        .path=${mdiHandExtendedOutline}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.services`,
+                        { count: services.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
           ${
             entities.length
               ? html`
-                  <ha-dropdown-item
+                  <a
                     href=${`/config/entities?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`}
-                    value="entities"
                   >
-                    <ha-svg-icon
-                      .path=${mdiShapeOutline}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.panel.config.integrations.config_entry.entities`,
-                      { count: entities.length }
-                    )}
-                    <ha-icon-next slot="details"></ha-icon-next>
-                  </ha-dropdown-item>
+                    <ha-dropdown-item value="entities">
+                      <ha-svg-icon
+                        .path=${mdiShapeOutline}
+                        slot="icon"
+                      ></ha-svg-icon>
+                      ${this.hass.localize(
+                        `ui.panel.config.integrations.config_entry.entities`,
+                        { count: entities.length }
+                      )}
+                      <ha-icon-next slot="details"></ha-icon-next>
+                    </ha-dropdown-item>
+                  </a>
                 `
               : nothing
           }
@@ -184,38 +188,36 @@ class HaConfigSubEntryRow extends LitElement {
             )}
           </ha-dropdown-item>
         </ha-dropdown>
-      </ha-row-item>
-      <ha-list-base>
-        ${
-          this._expanded
-            ? html`
-                ${groupDevicesByParent(devices).map(
-                  ({ device, isChild, isLastChild }) =>
-                    html`<ha-config-entry-device-row
-                      .hass=${this.hass}
-                      .narrow=${this.narrow}
-                      .entry=${this.entry}
-                      .device=${device}
-                      .entities=${this.entities}
-                      .isChild=${isChild}
-                      .isLastChild=${isLastChild}
-                    ></ha-config-entry-device-row>`
-                )}
-                ${services.map(
-                  (service) =>
-                    html`<ha-config-entry-device-row
-                      .hass=${this.hass}
-                      .narrow=${this.narrow}
-                      .entry=${this.entry}
-                      .device=${service}
-                      .entities=${this.entities}
-                    ></ha-config-entry-device-row>`
-                )}
-              `
-            : nothing
-        }
-      </ha-list-base>
-    </div>`;
+      </ha-md-list-item>
+      ${
+        this._expanded
+          ? html`
+              ${groupDevicesByParent(devices).map(
+                ({ device, isChild, isLastChild }) =>
+                  html`<ha-config-entry-device-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .entry=${this.entry}
+                    .device=${device}
+                    .entities=${this.entities}
+                    .isChild=${isChild}
+                    .isLastChild=${isLastChild}
+                  ></ha-config-entry-device-row>`
+              )}
+              ${services.map(
+                (service) =>
+                  html`<ha-config-entry-device-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .entry=${this.entry}
+                    .device=${service}
+                    .entities=${this.entities}
+                  ></ha-config-entry-device-row>`
+              )}
+            `
+          : nothing
+      }
+    </ha-md-list>`;
   }
 
   private _toggleExpand() {
@@ -303,20 +305,19 @@ class HaConfigSubEntryRow extends LitElement {
     .expand-button.expanded {
       transform: rotate(180deg);
     }
-    .sub-entry-card {
+    ha-md-list {
       border: 1px solid var(--divider-color);
       border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      padding: 0;
       margin: 16px;
       margin-top: 0;
     }
-    ha-icon-button,
-    ha-icon-next,
-    ha-svg-icon {
-      color: var(--ha-color-fill-neutral-loud-resting);
-    }
-    ha-row-item.has-subentries {
+    ha-md-list-item.has-subentries {
       border-bottom: 1px solid var(--divider-color);
     }
+    ha-dropdown a {
+      text-decoration: none;
+    }
   `;
 }
 

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-connection-monitor.ts

@@ -9,8 +9,6 @@ import { extractSearchParamsObject } from "../../../../../common/url/search-para
 import type { DataTableColumnContainer } from "../../../../../components/data-table/ha-data-table";
 
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-metric";
-import "../../../../../components/ha-relative-time";
 import type {
   BluetoothAllocationsData,
   BluetoothConnectionData,

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

@@ -174,11 +174,6 @@ class ZHANetworkInfoPage extends LitElement {
           max-width: 600px;
           margin: auto;
         }
-
-        ha-list-item-base::part(supporting-text) {
-          font-size: var(--ha-font-size-m);
-          white-space: normal;
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-info-page.ts

@@ -111,11 +111,6 @@ class ZWaveJSNetworkInfoPage extends LitElement {
           max-width: 600px;
           margin: auto;
         }
-
-        ha-list-item-base::part(supporting-text) {
-          font-size: var(--ha-font-size-m);
-          white-space: normal;
-        }
       `,
     ];
   }

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

@@ -31,7 +31,6 @@ import { computeRTL } from "../../../common/util/compute_rtl";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/device/ha-device-picker";
-import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-card";

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

@@ -13,8 +13,12 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  fireEvent,
+  type HASSDomTargetEvent,
+} from "../../../common/dom/fire_event";
 import { navigate, replaceCurrentUrl } from "../../../common/navigate";
+import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
@@ -45,9 +49,14 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import "../../../components/ha-trace-picker";
+import "../../../components/ha-split-panel";
+import type { HaSplitPanel } from "../../../components/ha-split-panel";
 
 const TABS = ["details", "timeline", "logbook", "config"] as const;
 
+const STORAGE_KEY_SPLIT_POSITION = "script-trace-split-position";
+const DEFAULT_SPLIT_POSITION = 20;
+
 @customElement("ha-script-trace")
 export class HaScriptTrace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -80,6 +89,8 @@ export class HaScriptTrace extends LitElement {
 
   @state() private _view: (typeof TABS)[number] | "blueprint" = "details";
 
+  @state() private _splitPosition = DEFAULT_SPLIT_POSITION;
+
   @query("hat-script-graph") private _graph?: HatScriptGraph;
 
   protected render(): TemplateResult {
@@ -87,10 +98,6 @@ export class HaScriptTrace extends LitElement {
       ? this.hass.states[this._entityId]
       : undefined;
 
-    const graph = this._graph;
-    const trackedNodes = graph?.trackedNodes;
-    const renderedNodes = graph?.renderedNodes;
-
     const title = stateObj?.attributes.friendly_name || this._entityId;
 
     let devButtons: TemplateResult | string = "";
@@ -220,96 +227,19 @@ export class HaScriptTrace extends LitElement {
                 ? ""
                 : html`
                     <div class="main">
-                      <div class="graph">
-                        <hat-script-graph
-                          .trace=${this._trace}
-                          .selected=${this._selected?.path}
-                          @graph-node-selected=${this._pickNode}
-                        ></hat-script-graph>
-                      </div>
-
-                      <div class="info">
-                        <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
-                          ${TABS.map(
-                            (view) => html`
-                              <ha-tab-group-tab
-                                slot="nav"
-                                .active=${this._view === view}
-                                .panel=${view}
+                      ${
+                        this.narrow
+                          ? this._renderPanes()
+                          : html`
+                              <ha-split-panel
+                                class="split"
+                                .position=${this._splitPosition}
+                                @wa-reposition=${this._splitRepositioned}
                               >
-                                ${this.hass.localize(
-                                  `ui.panel.config.automation.trace.tabs.${
-                                    view === "config" ? "script_config" : view
-                                  }`
-                                )}
-                              </ha-tab-group-tab>
+                                ${this._renderPanes()}
+                              </ha-split-panel>
                             `
-                          )}
-                          ${
-                            this._trace.blueprint_inputs
-                              ? html`
-                                  <ha-tab-group-tab
-                                    slot="nav"
-                                    .active=${this._view === "blueprint"}
-                                    panel="blueprint"
-                                  >
-                                    ${this.hass!.localize(
-                                      `ui.panel.config.automation.trace.tabs.blueprint_config`
-                                    )}
-                                  </ha-tab-group-tab>
-                                `
-                              : ""
-                          }
-                        </ha-tab-group>
-                        ${
-                          this._selected === undefined ||
-                          this._logbookEntries === undefined ||
-                          trackedNodes === undefined
-                            ? ""
-                            : this._view === "details"
-                              ? html`
-                                  <ha-trace-path-details
-                                    .hass=${this.hass}
-                                    .narrow=${this.narrow}
-                                    .trace=${this._trace}
-                                    .selected=${this._selected}
-                                    .logbookEntries=${this._logbookEntries}
-                                    .trackedNodes=${trackedNodes}
-                                    .renderedNodes=${renderedNodes!}
-                                  ></ha-trace-path-details>
-                                `
-                              : this._view === "config"
-                                ? html`
-                                    <ha-trace-config
-                                      .trace=${this._trace}
-                                    ></ha-trace-config>
-                                  `
-                                : this._view === "logbook"
-                                  ? html`
-                                      <ha-trace-logbook
-                                        .hass=${this.hass}
-                                        .narrow=${this.narrow}
-                                        .trace=${this._trace}
-                                        .logbookEntries=${this._logbookEntries}
-                                      ></ha-trace-logbook>
-                                    `
-                                  : this._view === "blueprint"
-                                    ? html`
-                                        <ha-trace-blueprint-config
-                                          .trace=${this._trace}
-                                        ></ha-trace-blueprint-config>
-                                      `
-                                    : html`
-                                        <ha-trace-timeline
-                                          .hass=${this.hass}
-                                          .trace=${this._trace}
-                                          .logbookEntries=${this._logbookEntries}
-                                          .selected=${this._selected}
-                                          @value-changed=${this._timelinePathPicked}
-                                        ></ha-trace-timeline>
-                                      `
-                        }
-                      </div>
+                      }
                     </div>
                   `
         }
@@ -317,9 +247,114 @@ export class HaScriptTrace extends LitElement {
     `;
   }
 
+  private _renderPanes(): TemplateResult {
+    const graph = this._graph;
+    const trackedNodes = graph?.trackedNodes;
+    const renderedNodes = graph?.renderedNodes;
+
+    return html`
+      <div class="graph" slot="start">
+        <hat-script-graph
+          .trace=${this._trace}
+          .selected=${this._selected?.path}
+          @graph-node-selected=${this._pickNode}
+        ></hat-script-graph>
+      </div>
+
+      <div class="info" slot="end">
+        <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+          ${TABS.map(
+            (view) => html`
+              <ha-tab-group-tab
+                slot="nav"
+                .active=${this._view === view}
+                .panel=${view}
+              >
+                ${this.hass.localize(
+                  `ui.panel.config.automation.trace.tabs.${
+                    view === "config" ? "script_config" : view
+                  }`
+                )}
+              </ha-tab-group-tab>
+            `
+          )}
+          ${
+            this._trace!.blueprint_inputs
+              ? html`
+                  <ha-tab-group-tab
+                    slot="nav"
+                    .active=${this._view === "blueprint"}
+                    panel="blueprint"
+                  >
+                    ${this.hass!.localize(
+                      `ui.panel.config.automation.trace.tabs.blueprint_config`
+                    )}
+                  </ha-tab-group-tab>
+                `
+              : ""
+          }
+        </ha-tab-group>
+        ${
+          this._selected === undefined ||
+          this._logbookEntries === undefined ||
+          trackedNodes === undefined
+            ? ""
+            : this._view === "details"
+              ? html`
+                  <ha-trace-path-details
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .trace=${this._trace}
+                    .selected=${this._selected}
+                    .logbookEntries=${this._logbookEntries}
+                    .trackedNodes=${trackedNodes}
+                    .renderedNodes=${renderedNodes!}
+                  ></ha-trace-path-details>
+                `
+              : this._view === "config"
+                ? html`
+                    <ha-trace-config .trace=${this._trace}></ha-trace-config>
+                  `
+                : this._view === "logbook"
+                  ? html`
+                      <ha-trace-logbook
+                        .hass=${this.hass}
+                        .narrow=${this.narrow}
+                        .trace=${this._trace}
+                        .logbookEntries=${this._logbookEntries}
+                      ></ha-trace-logbook>
+                    `
+                  : this._view === "blueprint"
+                    ? html`
+                        <ha-trace-blueprint-config
+                          .trace=${this._trace}
+                        ></ha-trace-blueprint-config>
+                      `
+                    : html`
+                        <ha-trace-timeline
+                          .hass=${this.hass}
+                          .trace=${this._trace}
+                          .logbookEntries=${this._logbookEntries}
+                          .selected=${this._selected}
+                          @value-changed=${this._timelinePathPicked}
+                        ></ha-trace-timeline>
+                      `
+        }
+      </div>
+    `;
+  }
+
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
+    const storedPosition = localStorage?.[STORAGE_KEY_SPLIT_POSITION];
+    if (storedPosition) {
+      const parsed = parseFloat(storedPosition);
+      if (!isNaN(parsed) && parsed > 0 && parsed < 100) {
+        this._splitPosition = parsed;
+      }
+    }
+
     if (!this.scriptId) {
       return;
     }
@@ -409,6 +444,19 @@ export class HaScriptTrace extends LitElement {
     this._selected = ev.detail;
   }
 
+  private _splitRepositioned(ev: HASSDomTargetEvent<HaSplitPanel>) {
+    this._splitPosition = ev.target.position;
+    this._storeSplitPosition();
+  }
+
+  private _storeSplitPosition = debounce(
+    () => {
+      localStorage[STORAGE_KEY_SPLIT_POSITION] = String(this._splitPosition);
+    },
+    500,
+    false
+  );
+
   private _refreshTraces() {
     this._loadTraces();
   }
@@ -594,13 +642,22 @@ export class HaScriptTrace extends LitElement {
           padding: 16px;
         }
 
+        ha-split-panel.split {
+          flex: 1;
+          min-height: 0;
+          min-width: 0;
+          --ha-split-panel-min: 10%;
+          --ha-split-panel-max: 80%;
+          --ha-split-panel-divider-hit-area: var(--ha-space-4);
+        }
+
         .graph {
-          border-right: 1px solid var(--divider-color);
-          max-width: 50%;
           box-sizing: border-box;
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          min-width: 0;
+          min-height: 0;
         }
         hat-script-graph {
           flex: 1;
@@ -618,6 +675,8 @@ export class HaScriptTrace extends LitElement {
         }
         .info {
           flex: 1;
+          min-width: 0;
+          min-height: 0;
           overflow-y: auto;
           background-color: var(--card-background-color);
         }

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

@@ -46,7 +46,6 @@ import "../../../layouts/hass-subpage";
 import { panelIsReady } from "../../../layouts/panel-ready";
 import type { HomeAssistant, Route } from "../../../types";
 import { bytesToString } from "../../../util/bytes-to-string";
-import "../core/ha-config-analytics";
 import { showMoveDatadiskDialog } from "./show-dialog-move-datadisk";
 import { showMountViewDialog } from "./show-dialog-view-mount";
 import "./storage-breakdown-chart";

src/panels/config/tools/state/tools-state.ts

@@ -25,7 +25,6 @@ import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-input-helper-text";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/ha-tip";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import "../../../../components/input/ha-input";

src/panels/config/voice-assistants/dialog-expose-entity.ts

@@ -31,7 +31,6 @@ import { DialogMixin } from "../../../dialogs/dialog-mixin";
 import { DirtyStateProviderMixin } from "../../../mixins/dirty-state-provider-mixin";
 import { haStyle, haStyleScrollbar } from "../../../resources/styles";
 import { loadVirtualizer } from "../../../resources/virtualizer";
-import "./entity-voice-settings";
 import type { ExposeEntityDialogParams } from "./show-dialog-expose-entity";
 
 @customElement("dialog-expose-entity")

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -24,7 +24,6 @@ import "./assist-pipeline-detail/assist-pipeline-detail-conversation";
 import "./assist-pipeline-detail/assist-pipeline-detail-stt";
 import "./assist-pipeline-detail/assist-pipeline-detail-tts";
 import "./assist-pipeline-detail/assist-pipeline-detail-wakeword";
-import "./debug/assist-render-pipeline-events";
 import type { VoiceAssistantPipelineDetailsDialogParams } from "./show-dialog-voice-assistant-pipeline-detail";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -58,7 +58,6 @@ import {
   getAssistantsTableColumn,
 } from "./expose/assistants-table-column";
 import { getAvailableAssistants } from "./expose/available-assistants";
-import "./expose/expose-assistant-icon";
 import { voiceAssistantTabs } from "./ha-config-voice-assistants";
 import { showExposeEntityDialog } from "./show-dialog-expose-entity";
 import { showVoiceSettingsDialog } from "./show-dialog-voice-settings";

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

@@ -6,7 +6,6 @@ import { sanitizeNavigationPath } from "../../common/url/sanitize-navigation-pat
 import "../../components/ha-alert";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
-import "../../components/ha-top-app-bar-fixed";
 import type { EnergyFrontendSystemData } from "../../data/frontend";
 import { fetchFrontendSystemData } from "../../data/frontend";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -15,8 +14,6 @@ import type { HomeAssistant, PanelInfo } from "../../types";
 import { generateLovelaceDashboardStrategy } from "../lovelace/strategies/get-strategy";
 import "../lovelace/hui-root";
 import type { Lovelace } from "../lovelace/types";
-import "../lovelace/views/hui-view";
-import "../lovelace/views/hui-view-container";
 import { DEFAULT_POWER_COLLECTION_KEY } from "../../data/energy";
 
 @customElement("ha-panel-energy")

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

@@ -12,7 +12,6 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain"
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-badge";
-import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";

src/panels/lovelace/badges/hui-state-label-badge.ts

@@ -1,5 +1,4 @@
 import { customElement } from "lit/decorators";
-import "../../../components/entity/ha-state-label-badge";
 import type { HuiStateLabelBadgeEditor } from "../editor/config-elements/hui-state-label-badge-editor";
 import { HuiEntityBadge } from "./hui-entity-badge";
 import type { EntityBadgeConfig, StateLabelBadgeConfig } from "./types";

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts

@@ -7,7 +7,6 @@ import { consumeEntityState } from "../../../common/decorators/consume-context-e
 import { transform } from "../../../common/decorators/transform";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";

src/panels/lovelace/cards/energy/energy-distribution-home-circle.ts

@@ -0,0 +1,73 @@
+/**
+ * Home-circle stroke lengths for the energy distribution card.
+ *
+ * Hourly allocation can produce used_solar + used_battery + used_grid larger
+ * than net used_total when some hours export more than they produce. Dividing
+ * by net used_total then overflows the circle and the leftover grid arc goes
+ * negative, which browsers paint as a solid grid ring.
+ *
+ * These arcs use the sum of the allocated home flows as the denominator so
+ * they always fit the circumference.
+ */
+export const ENERGY_DISTRIBUTION_HOME_CIRCLE_CIRCUMFERENCE = 238.76104;
+
+export interface EnergyDistributionHomeCircleArcs {
+  solar?: number;
+  battery?: number;
+  lowCarbon?: number;
+  highCarbon?: number;
+  grid?: number;
+}
+
+export const computeEnergyDistributionHomeCircleArcs = ({
+  usedSolar = 0,
+  usedBattery = 0,
+  usedGrid = 0,
+  hasSolar,
+  hasGrid,
+  highCarbonConsumption,
+  circumference = ENERGY_DISTRIBUTION_HOME_CIRCLE_CIRCUMFERENCE,
+}: {
+  usedSolar?: number;
+  usedBattery?: number;
+  usedGrid?: number;
+  hasSolar: boolean;
+  hasGrid: boolean;
+  highCarbonConsumption?: number;
+  circumference?: number;
+}): EnergyDistributionHomeCircleArcs => {
+  const solar = Math.max(usedSolar, 0);
+  const battery = Math.max(usedBattery, 0);
+  const grid = Math.max(usedGrid, 0);
+  const ringTotal = solar + battery + grid;
+
+  const arcs: EnergyDistributionHomeCircleArcs = {};
+  // Leave arcs unset so the card can fall back to the plain home border
+  // instead of painting zero-length dashes over a borderless circle.
+  if (ringTotal <= 0) {
+    return arcs;
+  }
+
+  const share = (value: number): number => circumference * (value / ringTotal);
+
+  if (hasSolar) {
+    arcs.solar = share(solar);
+  }
+  if (battery > 0) {
+    arcs.battery = share(battery);
+  }
+  if (hasGrid) {
+    if (highCarbonConsumption !== undefined) {
+      const highCarbon = Math.min(Math.max(highCarbonConsumption, 0), grid);
+      arcs.highCarbon = share(highCarbon);
+      // Keep 0 defined: the card mounts the home SVG when solar or
+      // lowCarbon is defined, not when the low-carbon stroke is painted.
+      arcs.lowCarbon = share(grid - highCarbon);
+      arcs.grid = arcs.highCarbon;
+    } else {
+      arcs.grid = share(grid);
+    }
+  }
+
+  return arcs;
+};

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

@@ -37,8 +37,10 @@ import type { LovelaceCard } from "../../types";
 import type { EnergyDistributionCardConfig } from "../types";
 import { formatNumber } from "../../../../common/number/format_number";
 import { round } from "../../../../common/number/round";
-
-const CIRCLE_CIRCUMFERENCE = 238.76104;
+import {
+  ENERGY_DISTRIBUTION_HOME_CIRCLE_CIRCUMFERENCE as CIRCLE_CIRCUMFERENCE,
+  computeEnergyDistributionHomeCircleArcs,
+} from "./energy-distribution-home-circle";
 
 // Flows are differences of sums; anything that rounds to 0 Wh is noise
 const hasFlow = (value: number | null): value is number =>
@@ -321,22 +323,8 @@ class HuiEnergyDistrubutionCard
 
     const totalHomeConsumption = Math.max(0, consumption.total.used_total);
 
-    let homeSolarCircumference: number | undefined;
-    if (hasSolarProduction) {
-      homeSolarCircumference =
-        CIRCLE_CIRCUMFERENCE * (solarConsumption! / totalHomeConsumption);
-    }
-
-    let homeBatteryCircumference: number | undefined;
-    if (batteryConsumption) {
-      homeBatteryCircumference =
-        CIRCLE_CIRCUMFERENCE * (batteryConsumption / totalHomeConsumption);
-    }
-
     let lowCarbonEnergy: number | undefined;
-
-    let homeLowCarbonCircumference: number | undefined;
-    let homeHighCarbonCircumference: number | undefined;
+    let highCarbonConsumption: number | undefined;
 
     // This fallback is used in the demo
     let electricityMapUrl = "https://app.electricitymaps.com";
@@ -360,7 +348,6 @@ class HuiEnergyDistrubutionCard
       if (highCarbonEnergy !== null) {
         lowCarbonEnergy = totalFromGrid - highCarbonEnergy;
 
-        let highCarbonConsumption: number;
         if (gridConsumption !== totalFromGrid) {
           // Only get the part that was used for consumption and not the battery
           highCarbonConsumption =
@@ -368,18 +355,23 @@ class HuiEnergyDistrubutionCard
         } else {
           highCarbonConsumption = highCarbonEnergy;
         }
-
-        homeHighCarbonCircumference =
-          CIRCLE_CIRCUMFERENCE * (highCarbonConsumption / totalHomeConsumption);
-
-        homeLowCarbonCircumference =
-          CIRCLE_CIRCUMFERENCE -
-          (homeSolarCircumference || 0) -
-          (homeBatteryCircumference || 0) -
-          homeHighCarbonCircumference;
       }
     }
 
+    const {
+      solar: homeSolarCircumference,
+      battery: homeBatteryCircumference,
+      lowCarbon: homeLowCarbonCircumference,
+      grid: homeGridCircumference,
+    } = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: solarConsumption ?? 0,
+      usedBattery: batteryConsumption ?? 0,
+      usedGrid: gridConsumption,
+      hasSolar: hasSolarProduction,
+      hasGrid: Boolean(hasGrid),
+      highCarbonConsumption,
+    });
+
     const totalLines =
       gridConsumption +
       (solarConsumption || 0) +
@@ -670,16 +662,8 @@ class HuiEnergyDistrubutionCard
                         cx="40"
                         cy="40"
                         r="38"
-                        stroke-dasharray="${
-                          homeHighCarbonCircumference ??
-                          CIRCLE_CIRCUMFERENCE -
-                            homeSolarCircumference! -
-                            (homeBatteryCircumference || 0)
-                        } ${
-                          homeHighCarbonCircumference !== undefined
-                            ? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
-                            : homeSolarCircumference! +
-                              (homeBatteryCircumference || 0)
+                        stroke-dasharray="${homeGridCircumference} ${
+                          CIRCLE_CIRCUMFERENCE - (homeGridCircumference ?? 0)
                         }"
                         stroke-dashoffset="0"
                         shape-rendering="geometricPrecision"

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

@@ -25,8 +25,6 @@ import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-aspect-ratio";
 import "../../../components/ha-card";
 import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
-import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon";
 import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-container";

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -40,7 +40,6 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-list";
 import "../../../components/ha-markdown-element";
 import "../../../components/ha-relative-time";
-import "../../../components/ha-select";
 import "../../../components/ha-sortable";
 import "../../../components/ha-svg-icon";
 import "../../../components/input/ha-input";

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

@@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { refine } from "superstruct";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-assist-pipeline-picker";
 import type {
   HaFormSchema,
   SchemaUnion,

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

@@ -11,7 +11,6 @@ import "../../../../components/entity/state-badge";
 import "../../../../components/ha-button";
 import "../../../../components/ha-combo-box-item";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-ripple";
 import "../../../../components/ha-section-title";
 import "../../../../components/ha-svg-icon";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";

src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts

@@ -33,7 +33,6 @@ import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import "../../badges/hui-badge";
 import { getConfigEntityId } from "../../common/get-config-entity-id";
-import "../../sections/hui-section";
 import { addBadge, replaceBadge } from "../config-util";
 import { getBadgeDefaultConfig } from "../get-badge-default-config";
 import { getBadgeDocumentationURL } from "../get-dashboard-documentation-url";

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

@@ -12,7 +12,6 @@ import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-grid-size-picker";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-slider";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-yaml-editor";

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

@@ -11,7 +11,6 @@ import "../../../../components/entity/state-badge";
 import "../../../../components/ha-button";
 import "../../../../components/ha-combo-box-item";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-ripple";
 import "../../../../components/ha-section-title";
 import "../../../../components/ha-svg-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";

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

@@ -2,7 +2,6 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { array, assert, literal, object, string } from "superstruct";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-check-list-item";
 import "../../../../../components/ha-switch";
 import "../../../../../components/ha-list";
 import type { HomeAssistant } from "../../../../../types";

src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts

@@ -34,7 +34,6 @@ import { baseLovelaceBadgeConfig } from "../structs/base-badge-struct";
 import { entityNameStruct } from "../structs/entity-name-struct";
 import { configElementStyle } from "./config-elements-style";
 import { stateContentHasTimestamp } from "../../../../state-display/state-display";
-import "./hui-card-features-editor";
 import { timeFormatConfigStruct } from "../../components/types";
 
 const badgeConfigStruct = assign(

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -13,7 +13,6 @@ import {
   string,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-entities-picker";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-target-picker";

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -28,7 +28,6 @@ import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import "../../../../components/ha-formfield";
 import "../../../../components/ha-selector/ha-selector-select";
 import "../../../../components/ha-switch";
 import { MAP_CARD_MARKER_LABEL_MODES } from "../../../../components/map/ha-map";

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -5,7 +5,6 @@ import { assert, assign, object, optional, string, union } from "superstruct";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
-import "../../../../components/ha-theme-picker";
 import type { HomeAssistant } from "../../../../types";
 import type { PictureCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -42,7 +42,6 @@ import {
   haStyleDialogFixedTop,
 } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import "../../components/hui-entity-editor";
 import type { Lovelace } from "../../types";
 import { SECTIONS_VIEW_LAYOUT } from "../../views/const";
 import { generateDefaultSection } from "../../views/default-section";

src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts

@@ -1,7 +1,6 @@
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-humidifier-state";
 import type { HumidifierEntity } from "../../../data/humidifier";
 import type { HomeAssistant } from "../../../types";

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -1,7 +1,6 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-button";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import { activateScene } from "../../../data/scene";

src/panels/lovelace/entity-rows/hui-time-entity-row.ts

@@ -1,7 +1,6 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";
 import { setTimeValue } from "../../../data/time";

src/panels/lovelace/entity-rows/hui-weather-entity-row.ts

@@ -3,6 +3,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
+import "../../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../../data/entity/entity";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import type { ForecastEvent, WeatherEntity } from "../../../data/weather";
@@ -20,7 +21,6 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction, hasAnyAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceRow } from "./types";
 import "../../../state-display/state-display";

src/panels/lovelace/sections/hui-error-section.ts

@@ -1,6 +1,5 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-label-badge";
 import "../../../components/ha-svg-icon";
 import type { LovelaceSectionElement } from "../../../data/lovelace";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";

src/panels/lovelace/views/hui-masonry-view.ts

@@ -4,7 +4,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { nextRender } from "../../../common/util/render-status";
-import "../../../components/entity/ha-state-label-badge";
 import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import type { LovelaceViewElement } from "../../../data/lovelace";

src/panels/lovelace/views/hui-sections-view.ts

@@ -21,7 +21,6 @@ import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import type { HuiBadge } from "../badges/hui-badge";
 import type { HuiCard } from "../cards/hui-card";
-import "../components/hui-badge-edit-mode";
 import "../components/hui-section-edit-mode";
 import { addSection, moveCard, moveSection } from "../editor/config-util";
 import type { LovelaceCardPath } from "../editor/lovelace-path";

src/panels/lovelace/views/hui-view-header.ts

@@ -16,7 +16,6 @@ import type { HomeAssistant } from "../../../types";
 import type { HuiBadge } from "../badges/hui-badge";
 import "../badges/hui-view-badges";
 import type { HuiCard } from "../cards/hui-card";
-import "../components/hui-badge-edit-mode";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
 import { replaceView } from "../editor/config-util";
 import { showEditViewHeaderDialog } from "../editor/view-header/show-edit-view-header-dialog";

src/panels/lovelace/views/hui-view.ts

@@ -7,7 +7,6 @@ import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { debounce } from "../../../common/util/debounce";
 import { deepEqual } from "../../../common/util/deep-equal";
-import "../../../components/entity/ha-state-label-badge";
 import "../../../components/ha-svg-icon";
 import type { LovelaceViewElement } from "../../../data/lovelace";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";

src/panels/profile/ha-profile-section-browser.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import "../../components/ha-card";
+import "../../components/ha-md-list";
 import { isExternal } from "../../data/external";
 import "../../layouts/hass-subpage";
 import { haStyle } from "../../resources/styles";
@@ -45,42 +46,47 @@ class HaProfileSectionBrowser extends LitElement {
             <div class="card-content">
               ${this.hass.localize("ui.panel.profile.client_settings_detail")}
             </div>
-            ${
-              this.hass.dockedSidebar !== "auto" || !this.narrow
-                ? html`
-                    <ha-force-narrow-row
-                      .hass=${this.hass}
-                    ></ha-force-narrow-row>
-                  `
-                : ""
-            }
-            ${
-              "vibrate" in navigator
-                ? html`
-                    <ha-set-vibrate-row .hass=${this.hass}></ha-set-vibrate-row>
-                  `
-                : ""
-            }
-            ${
-              !isExternal && isComponentLoaded(this.hass.config, "html5.notify")
-                ? html`
-                    <ha-push-notifications-row
-                      .hass=${this.hass}
-                    ></ha-push-notifications-row>
-                  `
-                : ""
-            }
-            <ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
-            ${
-              !isMobileClient
-                ? html`
-                    <ha-enable-shortcuts-row
-                      id="shortcuts"
-                      .hass=${this.hass}
-                    ></ha-enable-shortcuts-row>
-                  `
-                : ""
-            }
+            <ha-md-list>
+              ${
+                this.hass.dockedSidebar !== "auto" || !this.narrow
+                  ? html`
+                      <ha-force-narrow-row
+                        .hass=${this.hass}
+                      ></ha-force-narrow-row>
+                    `
+                  : ""
+              }
+              ${
+                "vibrate" in navigator
+                  ? html`
+                      <ha-set-vibrate-row
+                        .hass=${this.hass}
+                      ></ha-set-vibrate-row>
+                    `
+                  : ""
+              }
+              ${
+                !isExternal &&
+                isComponentLoaded(this.hass.config, "html5.notify")
+                  ? html`
+                      <ha-push-notifications-row
+                        .hass=${this.hass}
+                      ></ha-push-notifications-row>
+                    `
+                  : ""
+              }
+              <ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
+              ${
+                !isMobileClient
+                  ? html`
+                      <ha-enable-shortcuts-row
+                        id="shortcuts"
+                        .hass=${this.hass}
+                      ></ha-enable-shortcuts-row>
+                    `
+                  : ""
+              }
+            </ha-md-list>
           </ha-card>
         </div>
       </hass-subpage>
@@ -104,6 +110,12 @@ class HaProfileSectionBrowser extends LitElement {
           margin: 0 auto var(--ha-space-4);
           max-width: 600px;
         }
+
+        ha-md-list {
+          background: none;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
       `,
     ];
   }

src/panels/profile/ha-profile-section-preferences.ts

@@ -4,7 +4,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-button";
 import "../../components/ha-card";
-import "../../components/item/ha-row-item";
+import "../../components/ha-md-list";
+import "../../components/ha-md-list-item";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { subscribeFrontendUserData } from "../../data/frontend";
 import { showEditSidebarDialog } from "../../dialogs/sidebar/show-dialog-edit-sidebar";
@@ -80,38 +81,40 @@ class HaProfileSectionPreferences extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-dashboard-row>
-            <ha-row-item>
-              <span slot="headline"
-                >${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.header"
-                )}</span
-              >
-              <span slot="supporting-text"
-                >${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.description"
-                )}</span
-              >
-              <ha-button
-                slot="end"
-                appearance="plain"
-                size="s"
-                @click=${this._customizeSidebar}
-              >
-                ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.button"
-                )}
-              </ha-button>
-            </ha-row-item>
-            ${
-              this.hass.user!.is_admin
-                ? html`
-                    <ha-entity-id-picker-row
-                      .hass=${this.hass}
-                      .coreUserData=${this._coreUserData}
-                    ></ha-entity-id-picker-row>
-                  `
-                : ""
-            }
+            <ha-md-list>
+              <ha-md-list-item>
+                <span slot="headline"
+                  >${this.hass.localize(
+                    "ui.panel.profile.customize_sidebar.header"
+                  )}</span
+                >
+                <span slot="supporting-text"
+                  >${this.hass.localize(
+                    "ui.panel.profile.customize_sidebar.description"
+                  )}</span
+                >
+                <ha-button
+                  slot="end"
+                  appearance="plain"
+                  size="s"
+                  @click=${this._customizeSidebar}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.profile.customize_sidebar.button"
+                  )}
+                </ha-button>
+              </ha-md-list-item>
+              ${
+                this.hass.user!.is_admin
+                  ? html`
+                      <ha-entity-id-picker-row
+                        .hass=${this.hass}
+                        .coreUserData=${this._coreUserData}
+                      ></ha-entity-id-picker-row>
+                    `
+                  : ""
+              }
+            </ha-md-list>
           </ha-card>
         </div>
       </hass-subpage>
@@ -139,6 +142,12 @@ class HaProfileSectionPreferences extends LitElement {
           margin: 0 auto var(--ha-space-4);
           max-width: 600px;
         }
+
+        ha-md-list {
+          background: none;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
       `,
     ];
   }

src/state-summary/state-card-event.ts

@@ -2,7 +2,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";

src/state-summary/state-card-script.ts

@@ -2,7 +2,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
 import "../components/ha-button";
 import { UNAVAILABLE } from "../data/entity/entity";

src/state/connection-mixin.ts

@@ -18,7 +18,10 @@ import {
   subscribeFrontendUserData,
 } from "../data/frontend";
 import { forwardHaptic } from "../data/haptics";
-import { serviceCallWillDisconnect } from "../data/service";
+import {
+  getServiceCallEntityIds,
+  serviceCallWillDisconnect,
+} from "../data/service";
 import {
   DateFormat,
   FirstWeekday,
@@ -32,7 +35,12 @@ import { preserveUnchangedRecord } from "../common/util/preserve-unchanged-recor
 import { subscribeFloorRegistry } from "../data/ws-floor_registry";
 import { subscribePanels } from "../data/ws-panels";
 import { translationMetadata } from "../resources/translations-metadata";
-import type { Constructor, HomeAssistant, ServiceCallResponse } from "../types";
+import type {
+  Constructor,
+  HomeAssistant,
+  ServiceCallRequest,
+  ServiceCallResponse,
+} from "../types";
 import {
   addBrandsAuth,
   clearBrandsTokenRefresh,
@@ -114,7 +122,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
             );
           }
           try {
-            return (await callService(
+            const response = (await callService(
               conn,
               domain,
               service,
@@ -122,11 +130,24 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
               target,
               returnResponse
             )) as ServiceCallResponse;
+            this._reportEntityControlToExternalApp(
+              domain,
+              service,
+              serviceData,
+              target
+            );
+            return response;
           } catch (err: any) {
             if (
               err.error?.code === ERR_CONNECTION_LOST &&
               serviceCallWillDisconnect(domain, service, serviceData)
             ) {
+              this._reportEntityControlToExternalApp(
+                domain,
+                service,
+                serviceData,
+                target
+              );
               return { context: { id: "" } };
             }
             if (this.hass?.debugConnection) {
@@ -405,4 +426,28 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         this._updateHass({});
       }
     }
+
+    private _reportEntityControlToExternalApp(
+      domain: string,
+      service: string,
+      serviceData?: ServiceCallRequest["serviceData"],
+      target?: ServiceCallRequest["target"]
+    ) {
+      const external = this.hass?.auth.external;
+      if (!external) {
+        return;
+      }
+      const entityIds = getServiceCallEntityIds(serviceData, target);
+      if (!entityIds.length) {
+        return;
+      }
+      try {
+        external.fireMessage({
+          type: "entity/controlled",
+          payload: { entity_ids: entityIds, domain, service },
+        });
+      } catch (_err) {
+        // Reporting is best effort and must not fail the service call.
+      }
+    }
   };

src/translations/en.json

@@ -5866,8 +5866,8 @@
                   "missing_triggers": "This condition references a trigger that no longer exists. Uncheck it to clear it.",
                   "duplicate_ids": "Some triggers share the same trigger ID. Avoid reusing a trigger ID to group triggers and select multiple triggers here instead.",
                   "duplicate_ids_fix": "Fix",
-                  "assign_unique_ids_title": "Assign unique trigger IDs?",
-                  "assign_unique_ids_description": "Each trigger sharing an ID gets a unique one, and conditions using it are updated to match. Templates or actions that use trigger.id directly may need to be updated.",
+                  "assign_unique_ids_title": "Fix duplicate trigger IDs?",
+                  "assign_unique_ids_description": "Triggers that share a used ID get a unique ID, and conditions using it are updated to match. IDs that nothing uses are removed. Templates or actions that use trigger.id directly may need to be updated.",
                   "description": {
                     "picker": "Tests if the automation has been triggered by a specific trigger.",
                     "full": "If triggered by {id}",

test/data/recorder-statistic-label.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import type { StatisticsMetaData } from "../../src/data/recorder";
+import { getStatisticLabel, StatisticMeanType } from "../../src/data/recorder";
+import {
+  mockArea,
+  mockDevice,
+  mockEntity,
+} from "../common/entity/context/context-mock";
+import { createMockEntityState, createMockHass } from "../fixtures/hass";
+
+const metadata = (
+  statistic_id: string,
+  name: string | null
+): StatisticsMetaData => ({
+  statistic_id,
+  name,
+  source: "recorder",
+  statistics_unit_of_measurement: "kWh",
+  has_sum: true,
+  mean_type: StatisticMeanType.NONE,
+  unit_class: "energy",
+});
+
+// The friendly name deliberately differs from the composed name, so the
+// assertions fail if the label is taken from the attribute again.
+const hassWithRegistry = () =>
+  createMockHass(
+    {
+      "sensor.dishwasher_energy": createMockEntityState(
+        "sensor.dishwasher_energy",
+        "12",
+        { friendly_name: "Smart plug 3 energy" }
+      ),
+    },
+    {
+      entities: {
+        "sensor.dishwasher_energy": mockEntity({
+          entity_id: "sensor.dishwasher_energy",
+          device_id: "device_1",
+          name: "Energy",
+        }),
+      },
+      devices: {
+        device_1: mockDevice({
+          id: "device_1",
+          name: "Dishwasher",
+          area_id: "kitchen",
+        }),
+      },
+      areas: { kitchen: mockArea({ area_id: "kitchen", name: "Kitchen" }) },
+    }
+  );
+
+describe("getStatisticLabel", () => {
+  it("composes the name from the registry rather than friendly_name", () => {
+    expect(
+      getStatisticLabel(
+        hassWithRegistry(),
+        "sensor.dishwasher_energy",
+        metadata("sensor.dishwasher_energy", "Recorder name")
+      )
+    ).toBe("Dishwasher Energy");
+  });
+
+  // External statistics have no entity, so there is no registry context to
+  // compose a name from and the recorder metadata is all we have.
+  it("uses the metadata name when there is no entity", () => {
+    expect(
+      getStatisticLabel(
+        createMockHass(),
+        "energy:solar_production",
+        metadata("energy:solar_production", "Solar production")
+      )
+    ).toBe("Solar production");
+  });
+
+  it("falls back to the statistic id when metadata has no name", () => {
+    expect(
+      getStatisticLabel(
+        createMockHass(),
+        "energy:solar_production",
+        metadata("energy:solar_production", null)
+      )
+    ).toBe("energy:solar_production");
+  });
+
+  it("falls back to the statistic id when there is no metadata", () => {
+    expect(
+      getStatisticLabel(createMockHass(), "energy:solar_production", undefined)
+    ).toBe("energy:solar_production");
+  });
+});

test/data/service.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { getServiceCallEntityIds } from "../../src/data/service";
+
+describe("getServiceCallEntityIds", () => {
+  it("returns an empty list when no entities are targeted", () => {
+    expect(getServiceCallEntityIds()).toEqual([]);
+    expect(getServiceCallEntityIds({ brightness: 50 }, {})).toEqual([]);
+    expect(getServiceCallEntityIds({}, { area_id: "kitchen" })).toEqual([]);
+  });
+
+  it("reads a single entity from target or service data", () => {
+    expect(getServiceCallEntityIds({}, { entity_id: "light.a" })).toEqual([
+      "light.a",
+    ]);
+    expect(getServiceCallEntityIds({ entity_id: "light.a" })).toEqual([
+      "light.a",
+    ]);
+  });
+
+  it("prefers the target over the legacy service data entity ids", () => {
+    expect(
+      getServiceCallEntityIds(
+        { entity_id: ["light.a", "light.b"] },
+        { entity_id: ["light.b", "light.c"] }
+      )
+    ).toEqual(["light.b", "light.c"]);
+  });
+
+  it("deduplicates entity ids", () => {
+    expect(
+      getServiceCallEntityIds({}, { entity_id: ["light.a", "light.a"] })
+    ).toEqual(["light.a"]);
+  });
+
+  it("splits comma separated ids and lowercases them like Core does", () => {
+    expect(
+      getServiceCallEntityIds({}, { entity_id: "Light.A, light.b ,light.a" })
+    ).toEqual(["light.a", "light.b"]);
+  });
+
+  it("ignores wildcard, malformed, and non-string entity ids", () => {
+    expect(getServiceCallEntityIds({ entity_id: "all" })).toEqual([]);
+    expect(
+      getServiceCallEntityIds(
+        {},
+        { entity_id: ["all", "none", "", "light", 5] as unknown as string[] }
+      )
+    ).toEqual([]);
+  });
+});

test/panels/config/automation/trigger/automation-trigger-id.test.ts

@@ -290,6 +290,25 @@ describe("automation trigger IDs", () => {
     ]);
   });
 
+  it("strips unreferenced duplicate IDs instead of generating new ones", () => {
+    const config: AutomationConfig = {
+      triggers: [
+        { trigger: "state", entity_id: "light.kitchen", id: "motion" },
+        { trigger: "time", at: "12:00:00", id: "motion" },
+      ],
+      conditions: [{ condition: "trigger", id: "" }],
+      actions: [],
+    };
+
+    const updated = makeDuplicateTriggerIdsUnique(config);
+
+    expect(updated.triggers).toEqual([
+      { trigger: "state", entity_id: "light.kitchen" },
+      { trigger: "time", at: "12:00:00" },
+    ]);
+    expect(updated.conditions).toBe(config.conditions);
+  });
+
   it("removes generated trigger IDs that no condition or action references", () => {
     const generatedA = `${GENERATED_TRIGGER_ID_PREFIX}aB3x`;
     const generatedB = `${GENERATED_TRIGGER_ID_PREFIX}yZ7w`;

test/panels/lovelace/cards/energy/energy-distribution-home-circle.test.ts

@@ -0,0 +1,119 @@
+/**
+ * Protects the energy-distribution home ring from overflowing when hourly
+ * allocation yields more used_solar/used_battery/used_grid than net used_total
+ * (https://github.com/home-assistant/frontend/issues/54185).
+ */
+import { assert, describe, it } from "vitest";
+
+import {
+  ENERGY_DISTRIBUTION_HOME_CIRCLE_CIRCUMFERENCE as CIRCLE,
+  computeEnergyDistributionHomeCircleArcs,
+} from "../../../../../src/panels/lovelace/cards/energy/energy-distribution-home-circle";
+
+const sumDefinedArcs = (
+  arcs: ReturnType<typeof computeEnergyDistributionHomeCircleArcs>
+): number =>
+  (arcs.solar ?? 0) +
+  (arcs.battery ?? 0) +
+  (arcs.lowCarbon ?? 0) +
+  (arcs.grid ?? 0);
+
+describe("computeEnergyDistributionHomeCircleArcs", () => {
+  it("sizes arcs from allocated home flows so they fill the circle", () => {
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 8.5,
+      usedBattery: 4.6,
+      usedGrid: 0.12,
+      hasSolar: true,
+      hasGrid: true,
+    });
+
+    assert.approximately(arcs.solar!, CIRCLE * (8.5 / 13.22), 1e-6);
+    assert.approximately(arcs.battery!, CIRCLE * (4.6 / 13.22), 1e-6);
+    assert.approximately(arcs.grid!, CIRCLE * (0.12 / 13.22), 1e-6);
+    assert.approximately(sumDefinedArcs(arcs), CIRCLE, 1e-6);
+    assert.isAtLeast(arcs.grid!, 0);
+  });
+
+  it("does not paint a full grid ring when used_solar exceeds net home energy", () => {
+    // Screenshot totals from #54185 with solar and export in different hours:
+    // used_solar 77.1, used_battery 0, used_grid 0, net used_total 13.22.
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 77.1,
+      usedBattery: 0,
+      usedGrid: 0,
+      hasSolar: true,
+      hasGrid: true,
+    });
+
+    assert.approximately(arcs.solar!, CIRCLE, 1e-6);
+    assert.isUndefined(arcs.battery);
+    assert.equal(arcs.grid, 0);
+    assert.approximately(sumDefinedArcs(arcs), CIRCLE, 1e-6);
+  });
+
+  it("keeps a zero-consumption ring from producing NaN or negative dashes", () => {
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 0,
+      usedBattery: 0,
+      usedGrid: 0,
+      hasSolar: true,
+      hasGrid: true,
+    });
+
+    assert.deepEqual(arcs, {});
+  });
+
+  it("splits grid into low-carbon and high-carbon without exceeding the grid share", () => {
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 4,
+      usedBattery: 0,
+      usedGrid: 6,
+      hasSolar: true,
+      hasGrid: true,
+      highCarbonConsumption: 2,
+    });
+
+    const ringTotal = 10;
+    assert.approximately(arcs.solar!, CIRCLE * (4 / ringTotal), 1e-6);
+    assert.approximately(arcs.lowCarbon!, CIRCLE * (4 / ringTotal), 1e-6);
+    assert.approximately(arcs.grid!, CIRCLE * (2 / ringTotal), 1e-6);
+    assert.approximately(sumDefinedArcs(arcs), CIRCLE, 1e-6);
+    assert.isAtLeast(arcs.lowCarbon!, 0);
+    assert.isAtLeast(arcs.grid!, 0);
+  });
+
+  it("clamps high-carbon consumption to the grid share", () => {
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 5,
+      usedBattery: 0,
+      usedGrid: 5,
+      hasSolar: true,
+      hasGrid: true,
+      highCarbonConsumption: 50,
+    });
+
+    assert.equal(arcs.lowCarbon, 0);
+    assert.approximately(arcs.grid!, CIRCLE * 0.5, 1e-6);
+    assert.approximately(sumDefinedArcs(arcs), CIRCLE, 1e-6);
+  });
+
+  it("keeps a defined zero low-carbon arc so a grid-only high-carbon ring still renders", () => {
+    // The card only mounts the home SVG when solar or lowCarbon is defined.
+    // Omitting 0 would drop battery/grid arcs in a no-solar 100% fossil grid.
+    const arcs = computeEnergyDistributionHomeCircleArcs({
+      usedSolar: 0,
+      usedBattery: 4,
+      usedGrid: 6,
+      hasSolar: false,
+      hasGrid: true,
+      highCarbonConsumption: 6,
+    });
+
+    assert.isUndefined(arcs.solar);
+    assert.equal(arcs.lowCarbon, 0);
+    assert.approximately(arcs.battery!, CIRCLE * 0.4, 1e-6);
+    assert.approximately(arcs.grid!, CIRCLE * 0.6, 1e-6);
+    assert.approximately(sumDefinedArcs(arcs), CIRCLE, 1e-6);
+  });
+});