Fix filter pane expand animation and use a bottom sheet in narrow mode

.github/workflows/codeql-analysis.yaml

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

build-scripts/bundle-budget.json

@@ -1,15 +1,15 @@
 {
   "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
   "frontend-modern": {
-    "app": 585518,
-    "core": 57048,
-    "authorize": 552423,
-    "onboarding": 666818
+    "app": 595204,
+    "core": 57741,
+    "authorize": 576928,
+    "onboarding": 685964
   },
   "frontend-legacy": {
-    "app": 887384,
-    "core": 244482,
-    "authorize": 844995,
-    "onboarding": 1008816
+    "app": 861452,
+    "core": 258557,
+    "authorize": 834356,
+    "onboarding": 1001360
   }
 }

demo/src/stubs/energy.ts

@@ -102,11 +102,6 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
     cost_sensors: {},
     solar_forecast_domains: [],
   }));
-  hass.mockWS("energy/validate", () => ({
-    energy_sources: Array.from({ length: 6 }, () => []),
-    device_consumption: Array.from({ length: 6 }, () => []),
-    device_consumption_water: Array.from({ length: 2 }, () => []),
-  }));
   hass.mockWS(
     "energy/fossil_energy_consumption",
     ({ period }): FossilEnergyConsumption => ({

demo/src/stubs/sensor.ts

@@ -1,12 +1,6 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "sensor/device_class_convertible_units",
-    ({ device_class }: { device_class: string }) => ({
-      units: device_class === "energy" ? ["kWh"] : ["W"],
-    })
-  );
   hass.mockWS("sensor/numeric_device_classes", () => ({
     numeric_device_classes: [
       "volume_storage",

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

@@ -15,6 +15,7 @@ const ALL_FEATURES =
   VacuumEntityFeature.STOP +
   VacuumEntityFeature.RETURN_HOME +
   VacuumEntityFeature.FAN_SPEED +
+  VacuumEntityFeature.BATTERY +
   VacuumEntityFeature.STATUS +
   VacuumEntityFeature.LOCATE +
   VacuumEntityFeature.CLEAN_SPOT +
@@ -27,6 +28,8 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Full featured vacuum",
       supported_features: ALL_FEATURES,
+      battery_level: 85,
+      battery_icon: "mdi:battery-80",
       fan_speed: "balanced",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Charged",
@@ -38,6 +41,8 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Cleaning vacuum",
       supported_features: ALL_FEATURES,
+      battery_level: 62,
+      battery_icon: "mdi:battery-60",
       fan_speed: "turbo",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Cleaning bedroom",
@@ -53,7 +58,10 @@ const ENTITIES = [
         VacuumEntityFeature.START +
         VacuumEntityFeature.PAUSE +
         VacuumEntityFeature.STOP +
-        VacuumEntityFeature.RETURN_HOME,
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.BATTERY,
+      battery_level: 23,
+      battery_icon: "mdi:battery-20",
       status: "Returning to dock",
     },
   },
@@ -88,6 +96,8 @@ const ENTITIES = [
     attributes: {
       friendly_name: "Paused vacuum",
       supported_features: ALL_FEATURES,
+      battery_level: 45,
+      battery_icon: "mdi:battery-40",
       fan_speed: "standard",
       fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
       status: "Paused",

package.json

@@ -103,11 +103,11 @@
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.5.0",
-    "hls.js": "1.7.0",
+    "hls.js": "1.6.17",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
     "intl-messageformat": "11.2.13",
-    "js-yaml": "5.3.0",
+    "js-yaml": "5.2.3",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
@@ -151,8 +151,8 @@
     "@octokit/plugin-retry": "8.1.1",
     "@octokit/rest": "22.0.1",
     "@playwright/test": "1.62.1",
-    "@rsdoctor/rspack-plugin": "1.6.2",
-    "@rspack/core": "2.1.10",
+    "@rsdoctor/rspack-plugin": "1.6.1",
+    "@rspack/core": "2.1.9",
     "@rspack/dev-server": "2.2.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -186,7 +186,7 @@
     "fs-extra": "11.4.0",
     "generate-license-file": "4.2.1",
     "glob": "13.0.6",
-    "globals": "17.11.0",
+    "globals": "17.9.0",
     "gulp": "5.0.1",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
@@ -223,6 +223,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.21",
+    "globals": "17.9.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },

src/common/controllers/filter-panel-controller.ts

@@ -0,0 +1,213 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import { css, type LitElement } from "lit";
+import type { Ref } from "lit/directives/ref";
+import { parseAnimationDuration } from "../util/parse-animation-duration";
+
+type FilterPanelHost = ReactiveControllerHost &
+  LitElement & { expanded: boolean };
+
+const EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+
+/**
+ * Layout the controller relies on: the filter is a flex column made of its
+ * header (`ha-expansion-panel`) and a `.content` wrapper. Collapsed, it is as
+ * tall as its header; expanded, it fills what is left of the pane and hands
+ * that space down to the list through the wrapper.
+ */
+export const filterPanelStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  :host([expanded]) {
+    flex: 1;
+    height: 0;
+  }
+  ha-expansion-panel {
+    flex: none;
+    --ha-card-border-radius: var(--ha-border-radius-square);
+  }
+  ha-expansion-panel::part(summary) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+`;
+
+const panels = new Set<FilterPanelController>();
+
+let pending: Set<FilterPanelController> | undefined;
+
+const flush = () => {
+  const batch = [...pending!].filter((panel) => panel.host.isConnected);
+  pending = undefined;
+  batch.forEach((panel) => panel.prepare());
+  batch.forEach((panel) => panel.measure());
+  batch.forEach((panel) => panel.play());
+};
+
+// Filters that change in the same frame (one closing while another opens) are
+// animated as one batch: every filter is measured before any of them has
+// changed the DOM, and the closing ones are parked at their final height so
+// the opening one reads its own final height from the real layout.
+const enqueue = (panel: FilterPanelController) => {
+  if (!pending) {
+    pending = new Set();
+    panels.forEach((other) => other.snapshot());
+    requestAnimationFrame(flush);
+  }
+  pending.add(panel);
+};
+
+const clearInlineStyles = (element?: HTMLElement) => {
+  element?.style.removeProperty("height");
+  element?.style.removeProperty("flex");
+  element?.style.removeProperty("overflow");
+};
+
+/**
+ * Animates a filter of the filter pane between its collapsed and expanded
+ * heights whenever `expanded` changes, and tells the host when to render its
+ * content: from the moment it expands until its collapse animation has ended.
+ *
+ * During the animation the content keeps its final size and the host clips
+ * it, so the list is revealed rather than resized.
+ */
+export class FilterPanelController implements ReactiveController {
+  public showContent = false;
+
+  public host: FilterPanelHost;
+
+  private _content: Ref<HTMLElement>;
+
+  private _expanded?: boolean;
+
+  private _first = 0;
+
+  private _last = 0;
+
+  private _contentHeight = 0;
+
+  private _animation?: Animation;
+
+  constructor(host: FilterPanelHost, content: Ref<HTMLElement>) {
+    this.host = host;
+    this._content = content;
+    host.addController(this);
+  }
+
+  public hostConnected() {
+    panels.add(this);
+  }
+
+  public hostDisconnected() {
+    panels.delete(this);
+    this._animation?.cancel();
+    this._animation = undefined;
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+  }
+
+  public hostUpdate() {
+    const expanded = this.host.expanded;
+    if (this._expanded === undefined) {
+      this._expanded = expanded;
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded === this._expanded) {
+      return;
+    }
+    this._expanded = expanded;
+    if (!this.host.isConnected) {
+      this.showContent = expanded;
+      return;
+    }
+    if (expanded) {
+      this.showContent = true;
+    }
+    enqueue(this);
+  }
+
+  public snapshot() {
+    this._first = this.host.getBoundingClientRect().height;
+  }
+
+  public prepare() {
+    this._animation?.cancel();
+    this._animation = undefined;
+    const host = this.host;
+    const content = this._content.value;
+    clearInlineStyles(host);
+    clearInlineStyles(content);
+    if (host.expanded) {
+      return;
+    }
+    this._last =
+      host.getBoundingClientRect().height -
+      (content?.getBoundingClientRect().height ?? 0);
+    this._contentHeight = this._first - this._last;
+    host.style.flex = "none";
+    host.style.height = `${this._last}px`;
+  }
+
+  public measure() {
+    if (!this.host.expanded) {
+      return;
+    }
+    this._last = this.host.getBoundingClientRect().height;
+    this._contentHeight =
+      this._content.value?.getBoundingClientRect().height ?? 0;
+  }
+
+  public play() {
+    const host = this.host;
+    if (this._first === this._last) {
+      this._finish();
+      return;
+    }
+    const content = this._content.value;
+    host.style.flex = "none";
+    host.style.overflow = "hidden";
+    if (content) {
+      content.style.flex = "none";
+      content.style.height = `${this._contentHeight}px`;
+    }
+    const animation = host.animate(
+      [{ height: `${this._first}px` }, { height: `${this._last}px` }],
+      {
+        duration:
+          parseAnimationDuration(
+            getComputedStyle(host).getPropertyValue(
+              "--ha-animation-duration-normal"
+            )
+          ) || 250,
+        easing: EASING,
+        fill: "forwards",
+      }
+    );
+    animation.onfinish = () => this._finish();
+    this._animation = animation;
+  }
+
+  private _finish() {
+    if (!this.host.expanded) {
+      this.showContent = false;
+      this.host.requestUpdate();
+    }
+    clearInlineStyles(this.host);
+    clearInlineStyles(this._content.value);
+    this._animation?.cancel();
+    this._animation = undefined;
+  }
+}

src/common/translations/localize.ts

@@ -25,7 +25,6 @@ export type LocalizeKeys =
   | `ui.dialogs.unsupported.reasons.${string}`
   | `ui.panel.config.${string}.${"caption" | "description"}`
   | `ui.panel.config.dashboard.${string}`
-  | `ui.panel.config.mqtt.${string}`
   | `ui.panel.config.storage.segments.${string}`
   | `ui.panel.config.zha.${string}`
   | `ui.panel.config.zwave_js.${string}`

src/components/ha-button-toggle-group.ts

@@ -34,8 +34,6 @@ export class HaButtonToggleGroup extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "full-width" })
   public fullWidth = false;
 
-  @property({ type: Boolean }) public disabled = false;
-
   @property() public variant:
     "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
@@ -59,7 +57,6 @@ export class HaButtonToggleGroup extends LitElement {
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
-              .disabled=${this.disabled}
               .appearance=${this.active === button.value ? "accent" : "filled"}
             >
               ${

src/components/ha-code-editor.ts

@@ -33,7 +33,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
 import { computeDeviceName } from "../common/entity/compute_device_name";
-import { computeEntityName } from "../common/entity/compute_entity_name";
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
@@ -753,19 +752,6 @@ export class HaCodeEditor extends ReactiveElement {
       this._states![key]
     );
 
-    const entityName = computeEntityName(
-      this._states![key],
-      this._registries!.entities,
-      this._registries!.devices
-    );
-    const deviceName = context.device
-      ? computeDeviceName(context.device)
-      : undefined;
-    const areaName = context.area ? computeAreaName(context.area) : undefined;
-    const floorName = context.floor
-      ? computeFloorName(context.floor)
-      : undefined;
-
     const completionItems: CompletionItem[] = [
       {
         label: this._i18n!.localize(
@@ -773,39 +759,31 @@ export class HaCodeEditor extends ReactiveElement {
         ),
         value: formattedState,
         subValue:
+          // If the state exactly matches the formatted state, don't show the raw state
           this._states![key].state === formattedState
             ? undefined
             : this._states![key].state,
       },
     ];
 
-    if (entityName) {
-      completionItems.push({
-        label: this._i18n!.localize(
-          "ui.components.entity.entity-picker.entity"
-        ),
-        value: entityName,
-      });
-    }
-
-    if (deviceName) {
+    if (context.device && context.device.name) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.device-picker.device"),
-        value: deviceName,
+        value: context.device.name,
       });
     }
 
-    if (areaName) {
+    if (context.area && context.area.name) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.area-picker.area"),
-        value: areaName,
+        value: context.area.name,
       });
     }
 
-    if (floorName) {
+    if (context.floor && context.floor.name) {
       completionItems.push({
         label: this._i18n!.localize("ui.components.floor-picker.floor"),
-        value: floorName,
+        value: context.floor.name,
       });
     }
 

src/components/ha-duration-input.ts

@@ -68,7 +68,6 @@ export class HaDurationInput extends LitElement {
                     { label: "-", iconPath: mdiMinusThick, value: "-" },
                   ]}
                   .active=${this._negative ? "-" : "+"}
-                  .disabled=${this.disabled}
                   @value-changed=${this._negativeChanged}
                 ></ha-button-toggle-group>
               `
@@ -236,8 +235,8 @@ export class HaDurationInput extends LitElement {
     ev.stopPropagation();
     const negative = (ev.detail?.value || ev.target.value) === "-";
     this._toggleNegative = negative;
-    if (this.data) {
-      const value = { ...this.data };
+    const value = this.data;
+    if (value) {
       FIELDS.forEach((t) => {
         if (value[t]) {
           value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);

src/components/ha-filter-blueprints.ts

@@ -2,7 +2,12 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,11 +39,11 @@ export class HaFilterBlueprints extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _blueprints?: Blueprints;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
@@ -56,7 +61,6 @@ export class HaFilterBlueprints extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -71,29 +75,38 @@ export class HaFilterBlueprints extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._blueprints && this._shouldRender
-            ? html`
-                <ha-list
-                  @selected=${this._blueprintsSelected}
-                  multi
-                  class="ha-scrollbar"
-                >
-                  ${Object.entries(this._blueprints).map(([id, blueprint]) =>
-                    "error" in blueprint
-                      ? nothing
-                      : html`<ha-check-list-item
-                          .value=${id}
-                          .selected=${(this.value || []).includes(id)}
-                        >
-                          ${blueprint.metadata.name || id}
-                        </ha-check-list-item>`
-                  )}
-                </ha-list>
-              `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
+                ${
+                  this._blueprints
+                    ? html`
+                        <ha-list
+                          @selected=${this._blueprintsSelected}
+                          multi
+                          class="ha-scrollbar"
+                        >
+                          ${Object.entries(this._blueprints).map(
+                            ([id, blueprint]) =>
+                              "error" in blueprint
+                                ? nothing
+                                : html`<ha-check-list-item
+                                    .value=${id}
+                                    .selected=${(this.value || []).includes(id)}
+                                  >
+                                    ${blueprint.metadata.name || id}
+                                  </ha-check-list-item>`
+                          )}
+                        </ha-list>
+                      `
+                    : nothing
+                }
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
@@ -104,19 +117,6 @@ export class HaFilterBlueprints extends LitElement {
     this._blueprints = await fetchBlueprints(this.hass, this.type);
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (this.narrow || !this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -191,17 +191,11 @@ export class HaFilterBlueprints extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-categories.ts

@@ -8,9 +8,14 @@ import {
   mdiTag,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
@@ -47,9 +52,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
 
   @state() private _categories: CategoryRegistryEntry[] = [];
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected hassSubscribeRequiredHostProps = ["scope"];
 
@@ -70,7 +75,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -85,9 +89,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list
                   @selected=${this._categorySelected}
                   class="ha-scrollbar"
@@ -158,34 +164,17 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
                       </ha-list-item>`
                   )}
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
-      ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._addCategory}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
-              ${this.hass.localize("ui.panel.config.category.editor.add")}
-            </ha-list-item>`
+                <ha-list-item graphic="icon" @click=${this._addCategory}>
+                  <ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
+                  ${this.hass.localize("ui.panel.config.category.editor.add")}
+                </ha-list-item>
+              </div>
+            `
           : nothing
       }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48)}px`;
-      }, 300);
-    }
-  }
-
   private _handleAction(ev: HaDropdownSelectEvent) {
     const categoryId = (ev.currentTarget as any).categoryId;
     const action = ev.detail.item.value;
@@ -244,10 +233,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -287,19 +272,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-          position: relative;
-        }
-        :host([expanded]) {
-          flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
-        }
         .header {
           display: flex;
           align-items: center;
@@ -325,6 +299,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           color: var(--text-primary-color);
         }
         ha-list {
+          flex: 1;
+          min-height: 0;
           --mdc-list-item-meta-size: auto;
           --mdc-list-side-padding-right: var(--ha-space-1);
           --mdc-list-side-padding-left: var(--ha-space-4);
@@ -339,12 +315,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         .warning {
           color: var(--error-color);
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
       `,
     ];
   }

src/components/ha-filter-devices.ts

@@ -3,7 +3,12 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
@@ -59,13 +64,15 @@ export class HaFilterDevices extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
   @query("ha-list-selectable-virtualized")
   private _listElement?: HaListSelectableVirtualized;
 
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -77,26 +84,11 @@ export class HaFilterDevices extends LitElement {
     }
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded || !this._listElement) {
-          return;
-        }
-        this._listElement.style.height = `${this.clientHeight - 49 - 4 - 38}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 38px - height of the search input
-      }, 300);
-    }
-  }
-
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -112,31 +104,33 @@ export class HaFilterDevices extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                  @keydown=${this._handleSearchKeydown}
-                >
-                </ha-input-search>
-                <ha-list-selectable-virtualized
-                  multi
-                  .rows=${this._devices(
-                    this._devicesReg,
-                    this._filter || "",
-                    this._localize,
-                    this._states,
-                    this._i18n.locale.language
-                  )}
-                  .rowRenderer=${this._renderItem}
-                  @ha-list-item-selected=${this._handleAdded}
-                  @ha-list-item-deselected=${this._handleRemoved}
-                ></ha-list-selectable-virtualized>`
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+                @keydown=${this._handleSearchKeydown}
+              >
+              </ha-input-search>
+              <ha-list-selectable-virtualized
+                multi
+                .rows=${this._devices(
+                  this._devicesReg,
+                  this._filter || "",
+                  this._localize,
+                  this._states,
+                  this._i18n.locale.language
+                )}
+                .rowRenderer=${this._renderItem}
+                @ha-list-item-selected=${this._handleAdded}
+                @ha-list-item-deselected=${this._handleRemoved}
+              ></ha-list-selectable-virtualized>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -177,10 +171,6 @@ export class HaFilterDevices extends LitElement {
     this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -271,58 +261,43 @@ export class HaFilterDevices extends LitElement {
     this._listElement?.clearSelection();
   }
 
-  static styles = css`
-    :host {
-      border-bottom: 1px solid var(--divider-color);
-    }
-    :host([expanded]) {
-      flex: 1;
-      height: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    ha-expansion-panel {
-      --ha-card-border-radius: var(--ha-border-radius-square);
-      --expansion-panel-content-padding: 0;
-    }
-    :host([expanded]) ha-expansion-panel {
-      flex: 1;
-      min-height: 0;
-    }
-    ha-list-selectable-virtualized {
-      flex: 1;
-      min-height: 0;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-    }
-    .header ha-icon-button {
-      margin-inline-start: auto;
-      margin-inline-end: 8px;
-    }
-    .badge {
-      display: inline-block;
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: 0;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0px 2px;
-      color: var(--text-primary-color);
-    }
-    ha-input-search {
-      display: block;
-      padding: var(--ha-space-1) var(--ha-space-2) 0;
-    }
-  `;
+  static styles = [
+    filterPanelStyles,
+    css`
+      ha-list-selectable-virtualized {
+        flex: 1;
+        min-height: 0;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+      }
+      .header ha-icon-button {
+        margin-inline-start: auto;
+        margin-inline-end: 8px;
+      }
+      .badge {
+        display: inline-block;
+        margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: 0;
+        min-width: 16px;
+        box-sizing: border-box;
+        border-radius: var(--ha-border-radius-circle);
+        font-size: var(--ha-font-size-xs);
+        font-weight: var(--ha-font-weight-normal);
+        background-color: var(--primary-color);
+        line-height: var(--ha-line-height-normal);
+        text-align: center;
+        padding: 0px 2px;
+        color: var(--text-primary-color);
+      }
+      ha-input-search {
+        display: block;
+        padding: var(--ha-space-1) var(--ha-space-2) 0;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-filter-domains.ts

@@ -1,11 +1,16 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -41,18 +46,17 @@ export class HaFilterDomains extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -67,46 +71,48 @@ export class HaFilterDomains extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._handleItemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._domains(
-                      this._states,
-                      this._localize,
-                      this._i18n.locale.language,
-                      this._filter,
-                      this.value
-                    ),
-                    (i) => i,
-                    (domain) =>
-                      html`<ha-check-list-item
-                        .value=${domain}
-                        .selected=${(this.value || []).includes(domain)}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${domainToName(this._localize, domain)}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+              >
+              </ha-input-search>
+              <ha-list
+                class="ha-scrollbar"
+                @selected=${this._handleItemSelected}
+                multi
+              >
+                ${repeat(
+                  this._domains(
+                    this._states,
+                    this._localize,
+                    this._i18n.locale.language,
+                    this._filter,
+                    this.value
+                  ),
+                  (i) => i,
+                  (domain) =>
+                    html`<ha-check-list-item
+                      .value=${domain}
+                      .selected=${(this.value || []).includes(domain)}
+                      graphic="icon"
+                    >
+                      <ha-domain-icon
+                        slot="graphic"
+                        .domain=${domain}
+                        brand-fallback
+                      ></ha-domain-icon>
+                      ${domainToName(this._localize, domain)}
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -139,22 +145,6 @@ export class HaFilterDomains extends LitElement {
     }
   );
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -199,24 +189,18 @@ export class HaFilterDomains extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;
           align-items: center;
         }
         .header ha-icon-button {
-          margin-inline-start: auto;
+          margin-inline-start: initial;
           margin-inline-end: 8px;
         }
         ha-check-list-item {

src/components/ha-filter-entities.ts

@@ -2,8 +2,13 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -52,11 +57,11 @@ export class HaFilterEntities extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
@@ -78,7 +83,6 @@ export class HaFilterEntities extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -93,9 +97,11 @@ export class HaFilterEntities extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-input-search
                   appearance="outlined"
                   .value=${this._filter}
@@ -118,25 +124,13 @@ export class HaFilterEntities extends LitElement {
                   >
                   </lit-virtualizer>
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
   private _keyFunction = (entity) => entity?.entity_id;
 
   private _renderItem = (entity) =>
@@ -173,10 +167,6 @@ export class HaFilterEntities extends LitElement {
     listItem.selected = this.value?.includes(value);
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -255,17 +245,11 @@ export class HaFilterEntities extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

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

@@ -4,8 +4,13 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
@@ -64,10 +69,12 @@ export class HaFilterFloorAreas extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
-
   @query("ha-list-selectable") private _list?: HaListSelectable;
 
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
+
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -86,7 +93,6 @@ export class HaFilterFloorAreas extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -107,9 +113,11 @@ export class HaFilterFloorAreas extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list-selectable
                   class="ha-scrollbar"
                   multi
@@ -154,10 +162,10 @@ export class HaFilterFloorAreas extends LitElement {
                     (area) => this._renderArea(area)
                   )}
                 </ha-list-selectable>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
@@ -243,19 +251,6 @@ export class HaFilterFloorAreas extends LitElement {
     };
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -347,17 +342,11 @@ export class HaFilterFloorAreas extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list-selectable {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-integrations.ts

@@ -1,11 +1,16 @@
 import type { SelectedDetail } from "@material/mwc-list";
 import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
@@ -44,11 +49,11 @@ export class HaFilterIntegrations extends LitElement {
       Object.values(manifests)
   );
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     const manifests = this._manifests
@@ -59,7 +64,6 @@ export class HaFilterIntegrations extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -74,67 +78,57 @@ export class HaFilterIntegrations extends LitElement {
               : nothing
           }
         </div>
-        ${
-          manifests && this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  class="ha-scrollbar"
-                  @selected=${this._itemSelected}
-                  multi
-                >
-                  ${repeat(
-                    this._integrations(
-                      this._localize,
-                      manifests,
-                      this._filter,
-                      this.value,
-                      this._i18n.locale.language
-                    ),
-                    (i) => i.domain,
-                    (integration) =>
-                      html`<ha-check-list-item
-                        .value=${integration.domain}
-                        .selected=${(this.value || []).includes(
-                          integration.domain
-                        )}
-                        graphic="icon"
-                      >
-                        <ha-domain-icon
-                          slot="graphic"
-                          .domain=${integration.domain}
-                          brand-fallback
-                        ></ha-domain-icon>
-                        ${integration.name}
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              ${
+                manifests
+                  ? html`<ha-input-search
+                        appearance="outlined"
+                        .value=${this._filter}
+                        @input=${this._handleSearchChange}
+                      >
+                      </ha-input-search>
+                      <ha-list
+                        class="ha-scrollbar"
+                        @selected=${this._itemSelected}
+                        multi
+                      >
+                        ${repeat(
+                          this._integrations(
+                            this._localize,
+                            manifests,
+                            this._filter,
+                            this.value,
+                            this._i18n.locale.language
+                          ),
+                          (i) => i.domain,
+                          (integration) =>
+                            html`<ha-check-list-item
+                              .value=${integration.domain}
+                              .selected=${(this.value || []).includes(
+                                integration.domain
+                              )}
+                              graphic="icon"
+                            >
+                              <ha-domain-icon
+                                slot="graphic"
+                                .domain=${integration.domain}
+                                brand-fallback
+                              ></ha-domain-icon>
+                              ${integration.name}
+                            </ha-check-list-item>`
+                        )}
+                      </ha-list>`
+                  : nothing
+              }
+            </div>`
+          : nothing
+      }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -213,17 +207,11 @@ export class HaFilterIntegrations extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-filter-labels.ts

@@ -1,11 +1,16 @@
 import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
@@ -44,11 +49,11 @@ export class HaFilterLabels extends LitElement {
   @state()
   private _labels?: LabelRegistryEntry[];
 
-  @state() private _shouldRender = false;
-
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _content = createRef<HTMLElement>();
+
+  private _panel = new FilterPanelController(this, this._content);
 
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
@@ -75,7 +80,6 @@ export class HaFilterLabels extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -90,89 +94,66 @@ export class HaFilterLabels extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-input-search
-                  appearance="outlined"
-                  .value=${this._filter}
-                  @input=${this._handleSearchChange}
-                >
-                </ha-input-search>
-                <ha-list
-                  @selected=${this._labelSelected}
-                  class="ha-scrollbar"
-                  multi
-                >
-                  ${repeat(
-                    this._filteredLabels(
-                      this._labels || [],
-                      this._filter,
-                      this._i18n.locale.language,
-                      this.value
-                    ),
-                    (label) => label.label_id,
-                    (label) =>
-                      html`<ha-check-list-item
-                        .value=${label.label_id}
-                        .selected=${(this.value || []).includes(label.label_id)}
-                        hasMeta
-                      >
-                        <ha-label
-                          .color=${label.color}
-                          .description=${label.description}
-                        >
-                          ${
-                            label.icon
-                              ? html`<ha-icon
-                                  slot="icon"
-                                  .icon=${label.icon}
-                                ></ha-icon>`
-                              : nothing
-                          }
-                          ${label.name}
-                        </ha-label>
-                      </ha-check-list-item>`
-                  )}
-                </ha-list> `
-            : nothing
-        }
       </ha-expansion-panel>
       ${
-        this.expanded
-          ? html`<ha-list-item
-              graphic="icon"
-              @click=${this._manageLabels}
-              class="add"
-            >
-              <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-              ${this._localize("ui.panel.config.labels.manage_labels")}
-            </ha-list-item>`
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-input-search
+                appearance="outlined"
+                .value=${this._filter}
+                @input=${this._handleSearchChange}
+              >
+              </ha-input-search>
+              <ha-list
+                @selected=${this._labelSelected}
+                class="ha-scrollbar"
+                multi
+              >
+                ${repeat(
+                  this._filteredLabels(
+                    this._labels || [],
+                    this._filter,
+                    this._i18n.locale.language,
+                    this.value
+                  ),
+                  (label) => label.label_id,
+                  (label) =>
+                    html`<ha-check-list-item
+                      .value=${label.label_id}
+                      .selected=${(this.value || []).includes(label.label_id)}
+                      hasMeta
+                    >
+                      <ha-label
+                        .color=${label.color}
+                        .description=${label.description}
+                      >
+                        ${
+                          label.icon
+                            ? html`<ha-icon
+                                slot="icon"
+                                .icon=${label.icon}
+                              ></ha-icon>`
+                            : nothing
+                        }
+                        ${label.name}
+                      </ha-label>
+                    </ha-check-list-item>`
+                )}
+              </ha-list>
+              <ha-list-item graphic="icon" @click=${this._manageLabels}>
+                <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
+                ${this._localize("ui.panel.config.labels.manage_labels")}
+              </ha-list-item>
+            </div>`
           : nothing
       }
     `;
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-        // 48px - height of ha-list-item
-      }, 300);
-    }
-  }
-
   private _manageLabels() {
     navigate("/config/labels");
   }
 
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -227,18 +208,11 @@ export class HaFilterLabels extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;
@@ -267,12 +241,6 @@ export class HaFilterLabels extends LitElement {
         .warning {
           color: var(--error-color);
         }
-        .add {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          left: 0;
-        }
         ha-input-search {
           display: block;
           padding: var(--ha-space-1) var(--ha-space-2) 0;

src/components/ha-filter-pane-chip.ts

@@ -1,73 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import "./chips/ha-assist-chip";
-import "./ha-svg-icon";
-
-/**
- * Chip that opens a filter pane, with a badge showing how many filters are
- * active.
- */
-@customElement("ha-filter-pane-chip")
-export class HaFilterPaneChip extends LitElement {
-  @property() public label = "";
-
-  /** SVG path of the leading icon. */
-  @property() public path?: string;
-
-  /** Number of active filters, shown as a badge when there is at least one. */
-  @property({ type: Number }) public count = 0;
-
-  @property({ type: Boolean }) public active = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-assist-chip
-        .label=${this.label}
-        .active=${this.active}
-        .disabled=${this.disabled}
-      >
-        ${
-          this.path
-            ? html`<ha-svg-icon slot="icon" .path=${this.path}></ha-svg-icon>`
-            : nothing
-        }
-      </ha-assist-chip>
-      ${this.count ? html`<div class="badge">${this.count}</div>` : nothing}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      display: inline-block;
-      --ha-assist-chip-container-shape: 10px;
-    }
-
-    .badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      inset-inline-end: -4px;
-      inset-inline-start: initial;
-      min-width: 16px;
-      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-circle);
-      font-size: var(--ha-font-size-xs);
-      font-weight: var(--ha-font-weight-normal);
-      background-color: var(--primary-color);
-      line-height: var(--ha-line-height-normal);
-      text-align: center;
-      padding: 0 2px;
-      color: var(--text-primary-color);
-      pointer-events: none;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-filter-pane-chip": HaFilterPaneChip;
-  }
-}

src/components/ha-filter-states.ts

@@ -1,8 +1,13 @@
-import type { List, SelectedDetail } from "@material/mwc-list";
+import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import "./ha-check-list-item";
@@ -27,9 +32,9 @@ export class HaFilterStates extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list!: List;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     if (!this.states) {
@@ -40,7 +45,6 @@ export class HaFilterStates extends LitElement {
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -55,9 +59,11 @@ export class HaFilterStates extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`
+              <div class="content" ${ref(this._content)}>
                 <ha-list
                   @selected=${this._statesSelected}
                   multi
@@ -82,36 +88,13 @@ export class HaFilterStates extends LitElement {
                       </ha-check-list-item>`
                   )}
                 </ha-list>
-              `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </div>
+            `
+          : nothing
+      }
     `;
   }
 
-  protected willUpdate(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      this._shouldRender = true;
-    }
-  }
-
-  protected updated(changed: PropertyValues<this>) {
-    if ((changed.has("expanded") || changed.has("states")) && this.expanded) {
-      setTimeout(async () => {
-        if (!this.expanded) return;
-        const list = this._list;
-        if (!list) {
-          return;
-        }
-        list.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -152,17 +135,11 @@ export class HaFilterStates extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

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

@@ -2,8 +2,13 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { createRef, ref } from "lit/directives/ref";
 import { repeat } from "lit/directives/repeat";
+import {
+  FilterPanelController,
+  filterPanelStyles,
+} from "../common/controllers/filter-panel-controller";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,16 +39,15 @@ export class HaFilterVoiceAssistants extends LitElement {
 
   @state() private _voiceAssistantOptions: string[] = [];
 
-  @state() private _shouldRender = false;
+  private _content = createRef<HTMLElement>();
 
-  @query("ha-list") private _list?: HTMLElement;
+  private _panel = new FilterPanelController(this, this._content);
 
   protected render() {
     return html`
       <ha-expansion-panel
         left-chevron
         .expanded=${this.expanded}
-        @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
@@ -58,9 +62,11 @@ export class HaFilterVoiceAssistants extends LitElement {
               : nothing
           }
         </div>
-        ${
-          this._shouldRender
-            ? html`<ha-list
+      </ha-expansion-panel>
+      ${
+        this._panel.showContent
+          ? html`<div class="content" ${ref(this._content)}>
+              <ha-list
                 @selected=${this._assistantsSelected}
                 class="ha-scrollbar"
                 multi
@@ -83,10 +89,10 @@ export class HaFilterVoiceAssistants extends LitElement {
                       ${voiceAssistants[voiceAssistantId].name}
                     </ha-check-list-item>`
                 )}
-              </ha-list> `
-            : nothing
-        }
-      </ha-expansion-panel>
+              </ha-list>
+            </div>`
+          : nothing
+      }
     `;
   }
 
@@ -95,19 +101,6 @@ export class HaFilterVoiceAssistants extends LitElement {
     this._voiceAssistantOptions = Object.keys(voiceAssistants);
   }
 
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
-      }, 300);
-    }
-  }
-
-  private _expandedWillChange(ev) {
-    this._shouldRender = ev.detail.expanded;
-  }
-
   private _expandedChanged(ev) {
     this.expanded = ev.detail.expanded;
   }
@@ -148,18 +141,11 @@ export class HaFilterVoiceAssistants extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      filterPanelStyles,
       css`
-        :host {
-          position: relative;
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
+        ha-list {
           flex: 1;
-          height: 0;
-        }
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
+          min-height: 0;
         }
         .header {
           display: flex;

src/components/ha-icon.ts

@@ -43,8 +43,6 @@ const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
     import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
   matter: () =>
     import("../resources/matter-logo-svg").then((mod) => mod.mdiMatterLogo),
-  mqtt: () =>
-    import("../resources/mqtt-logo-svg").then((mod) => mod.mdiMqttLogo),
 };
 
 @customElement("ha-icon")

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

@@ -81,7 +81,6 @@ export class HaChooseSelector extends LitElement {
         .required=${this.required}
         @value-changed=${this._handleValueChanged}
         .helper=${this.helper}
-        .localizeValue=${this.localizeValue}
       ></ha-selector>`;
   }
 
@@ -108,12 +107,7 @@ export class HaChooseSelector extends LitElement {
         : {
             [this._activeChoice!]: this.value,
           };
-    const choice = ev.detail?.value || ev.target.value;
-    this._activeChoice = choice;
-    if (choice && "constant" in this.selector.choose.choices[choice].selector) {
-      value[choice] =
-        this.selector.choose.choices[choice].selector.constant?.value;
-    }
+    this._activeChoice = ev.detail?.value || ev.target.value;
     fireEvent(this, "value-changed", {
       value: {
         ...value,

src/components/ha-sidebar.ts

@@ -664,7 +664,6 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          overscroll-behavior: contain;
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;

src/data/update.ts

@@ -184,7 +184,6 @@ export const checkForEntityUpdates = async (
   }
 
   showToast(element, {
-    id: "check-updates",
     message: hass.localize("ui.panel.config.updates.checking_updates"),
   });
 
@@ -195,7 +194,6 @@ export const checkForEntityUpdates = async (
       if (computeDomain(event.data.entity_id) === "update") {
         updated++;
         showToast(element, {
-          id: "check-updates",
           message: hass.localize("ui.panel.config.updates.updates_refreshed", {
             count: updated,
           }),
@@ -218,7 +216,6 @@ export const checkForEntityUpdates = async (
 
   if (updated === 0) {
     showToast(element, {
-      id: "check-updates",
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });
   }

src/data/vacuum.ts

@@ -22,6 +22,7 @@ export enum VacuumEntityFeature {
   STOP = 8,
   RETURN_HOME = 16,
   FAN_SPEED = 32,
+  BATTERY = 64,
   STATUS = 128,
   SEND_COMMAND = 256,
   LOCATE = 512,
@@ -33,6 +34,7 @@ export enum VacuumEntityFeature {
 }
 
 interface VacuumEntityAttributes extends HassEntityAttributeBase {
+  battery_level?: number;
   fan_speed?: string;
   fan_speed_list?: string[];
   [key: string]: any;

src/data/weather.ts

@@ -566,10 +566,9 @@ export const getWeatherStateIcon = (
   if (userDefinedIcon) {
     return html`
       <div
-        style=${styleMap({
-          "background-size": "cover",
+        style="background-size: cover;${styleMap({
           "background-image": userDefinedIcon,
-        })}
+        })}"
       ></div>
     `;
   }

src/data/zwave_js.ts

@@ -1,7 +1,6 @@
 import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 import { callWS } from "../util/websocket";
-import type { DeviceRegistryEntry } from "./device/device_registry";
 
 export enum InclusionState {
   /** The controller isn't doing anything regarding inclusion. */
@@ -466,27 +465,6 @@ export interface RequestedGrant {
   clientSideAuth: boolean;
 }
 
-/**
- * Get the Z-Wave node ID of a device from its registry identifiers, which have
- * the form `<home id>-<node id>[-<manufacturer>:<product type>:<product id>]`.
- * Returns undefined for devices without a node, e.g. provisioning entries.
- */
-export const getNodeIdFromDevice = (
-  device: DeviceRegistryEntry
-): number | undefined => {
-  for (const [domain, identifier] of device.identifiers) {
-    // a provisioning entry is identified by its DSK, whose blocks parse as numbers
-    if (domain !== "zwave_js" || identifier.startsWith("provision_")) {
-      continue;
-    }
-    const nodeId = parseInt(identifier.split("-")[1]);
-    if (!isNaN(nodeId)) {
-      return nodeId;
-    }
-  }
-  return undefined;
-};
-
 export const invokeZWaveCCApi = <T = unknown>(
   hass: HomeAssistant,
   device_id: string,

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

@@ -159,6 +159,23 @@ class MoreInfoVacuum extends LitElement {
       `;
     }
 
+    // Use deprecated battery_level and battery_icon attributes
+    if (
+      supportsFeature(this.stateObj, VacuumEntityFeature.BATTERY) &&
+      this.stateObj.attributes.battery_level
+    ) {
+      return html`
+        <span class="battery" slot="after-time">
+          <span
+            >${Math.round(
+              this.stateObj.attributes.battery_level
+            )}${blankBeforePercent(this._i18n.locale)}%</span
+          >
+          <ha-icon .icon=${this.stateObj.attributes.battery_icon}></ha-icon>
+        </span>
+      `;
+    }
+
     return nothing;
   }
 

src/fake_data/entities/vacuum-entity.ts

@@ -74,6 +74,11 @@ export class MockVacuumEntity extends MockBaseEntity {
       stateAttrs.fan_speed = attrs.fan_speed ?? null;
     }
 
+    if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.BATTERY)) {
+      stateAttrs.battery_level = attrs.battery_level ?? null;
+      stateAttrs.battery_icon = attrs.battery_icon ?? null;
+    }
+
     if (supportsFeatureFromAttributes(attrs, VacuumEntityFeature.STATUS)) {
       stateAttrs.status = attrs.status ?? null;
     }

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

@@ -28,13 +28,12 @@ import type {
   SortingDirection,
 } from "../components/data-table/ha-data-table";
 import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings";
+import "../components/ha-adaptive-dialog";
 import "../components/ha-button";
-import "../components/ha-dialog";
 import "../components/ha-dialog-footer";
 import "../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
 import "../components/ha-dropdown-item";
-import "../components/ha-filter-pane-chip";
 import "../components/ha-icon-button";
 import "../components/ha-svg-icon";
 import "../components/input/ha-input-search";
@@ -238,13 +237,20 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     const localize = this.localizeFunc || this.hass.localize;
     const showPane = this._showPaneController.value ?? !this.narrow;
     const filterButton = this.hasFilters
-      ? html`<ha-filter-pane-chip
-          .label=${localize("ui.components.subpage-data-table.filters")}
-          .path=${mdiFilterVariant}
-          .count=${this.filters}
-          .active=${!!this.filters}
-          @click=${this._toggleFilters}
-        ></ha-filter-pane-chip>`
+      ? html`<div class="relative">
+          <ha-assist-chip
+            .label=${localize("ui.components.subpage-data-table.filters")}
+            .active=${this.filters}
+            @click=${this._toggleFilters}
+          >
+            <ha-svg-icon slot="icon" .path=${mdiFilterVariant}></ha-svg-icon>
+          </ha-assist-chip>
+          ${
+            this.filters
+              ? html`<div class="badge">${this.filters}</div>`
+              : nothing
+          }
+        </div>`
       : nothing;
 
     const selectModeBtn =
@@ -465,14 +471,18 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
               ? nothing
               : html`<div class="pane" slot="pane">
                   <div class="table-header">
-                    <ha-filter-pane-chip
+                    <ha-assist-chip
                       .label=${localize(
                         "ui.components.subpage-data-table.filters"
                       )}
-                      .path=${mdiFilterVariant}
                       active
                       @click=${this._toggleFilters}
-                    ></ha-filter-pane-chip>
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiFilterVariant}
+                      ></ha-svg-icon>
+                    </ha-assist-chip>
                     ${
                       this.filters
                         ? html`<ha-icon-button
@@ -566,16 +576,17 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       </hass-tabs-subpage>
       ${
         this.showFilters && !showPane
-          ? html`<ha-dialog
-              .open=${true}
+          ? html`<ha-adaptive-dialog
+              open
+              flexcontent
               width="full"
               header-title=${localize("ui.components.subpage-data-table.filters")}
               @closed=${this._closeFilters}
             >
               <ha-icon-button
                 slot="headerNavigationIcon"
+                data-dialog="close"
                 .path=${mdiClose}
-                @click=${this._closeFilters}
                 .label=${localize(
                   "ui.components.subpage-data-table.close_filter"
                 )}
@@ -596,13 +607,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
                 <slot name="filter-pane"></slot>
               </div>
               <ha-dialog-footer slot="footer">
-                <ha-button slot="primaryAction" @click=${this._closeFilters}>
+                <ha-button slot="primaryAction" data-dialog="close">
                   ${localize("ui.components.subpage-data-table.show_results", {
                     number: this.data.length,
                   })}
                 </ha-button>
               </ha-dialog-footer>
-            </ha-dialog>`
+            </ha-adaptive-dialog>`
           : nothing
       }
     `;
@@ -875,6 +886,24 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       padding: 16px;
     }
 
+    .badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      inset-inline-end: -4px;
+      inset-inline-start: initial;
+      min-width: 16px;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-circle);
+      font-size: var(--ha-font-size-xs);
+      font-weight: var(--ha-font-weight-normal);
+      background-color: var(--primary-color);
+      line-height: var(--ha-line-height-normal);
+      text-align: center;
+      padding: 0px 2px;
+      color: var(--text-primary-color);
+    }
+
     .narrow-header-row {
       display: flex;
       align-items: center;
@@ -923,8 +952,11 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       gap: var(--ha-space-2);
     }
 
-    ha-assist-chip,
-    ha-filter-pane-chip {
+    .relative {
+      position: relative;
+    }
+
+    ha-assist-chip {
       --ha-assist-chip-container-shape: 10px;
       --ha-assist-chip-container-color: var(--card-background-color);
     }
@@ -934,20 +966,19 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       --md-assist-chip-trailing-space: 8px;
     }
 
-    ha-dialog {
+    ha-adaptive-dialog {
       --dialog-content-padding: 0;
+      /* Fixed height so the sheet does not resize while filtering. */
+      --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
+      --ha-dialog-min-height: calc(var(--safe-height) - var(--ha-space-20));
     }
 
     .filter-dialog-content {
-      height: calc(
-        100vh -
-          70px - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
       display: flex;
       flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
     }
 
     ha-dropdown ha-assist-chip {

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

@@ -49,7 +49,6 @@ const SUPPORTED_UI_TYPES = [
 
 const secretTag = defineScalarTag("!secret", {
   resolve: (data) => `!secret ${data}`,
-  identify: () => false,
 });
 
 const ADDON_YAML_SCHEMA = YAML11_SCHEMA.withTags(secretTag);

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

@@ -545,7 +545,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
               ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
               : nothing
           }
-          <div class="description-text">${this._currentAddon.description}</div>
+          ${this._currentAddon.description}.<br />
           ${this.i18n.localize(
             "ui.panel.config.apps.dashboard.visit_app_page",
             {
@@ -1658,15 +1658,6 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
           color: var(--primary-color);
         }
 
-        .description:dir(rtl) > .description-text {
-          text-align: right;
-          direction: ltr;
-        }
-
-        .long-description {
-          direction: ltr;
-        }
-
         img.logo {
           max-width: 100%;
           max-height: 40px;

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

@@ -33,31 +33,23 @@ interface ProgressSegment {
 
 const HA_STAGES: CreateBackupStage[] = ["home_assistant"];
 
-// Quick metadata writes emitted while the backup is initialized, before the
-// Home Assistant stage (docker_config only by older Supervisors)
-const SETUP_STAGES: CreateBackupStage[] = [
+const ADDON_STAGES: CreateBackupStage[] = [
+  "addons",
+  "apps",
   "addon_repositories",
   "app_repositories",
   "docker_config",
-];
-
-const ADDON_STAGES: CreateBackupStage[] = ["addons", "apps"];
-
-const MEDIA_STAGES: CreateBackupStage[] = ["folders", "finishing_file"];
-
-// Emitted after the backup file is finished, when the backend waits for
-// cold-backup add-ons to come back up
-const AWAIT_RESTART_STAGES: CreateBackupStage[] = [
   "await_addon_restarts",
   "await_app_restarts",
 ];
 
-// Ordered groups matching actual backend execution order. The await restart
-// stages share the last creation group to keep the progress monotonic.
+const MEDIA_STAGES: CreateBackupStage[] = ["folders", "finishing_file"];
+
+// Ordered groups matching actual backend execution order
 const STAGE_ORDER: CreateBackupStage[][] = [
-  [...SETUP_STAGES, ...HA_STAGES],
   ADDON_STAGES,
-  [...MEDIA_STAGES, ...AWAIT_RESTART_STAGES],
+  MEDIA_STAGES,
+  HA_STAGES,
   ["upload_to_agents"],
   ["cleaning_up"],
 ];
@@ -173,21 +165,21 @@ export class HaBackupOverviewProgress extends LitElement {
       return [
         {
           label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.home_assistant"
+            "ui.panel.config.backup.overview.progress.segments.apps"
           ),
           state: this._getSegmentState(0, currentGroupIndex),
           flex: 2,
         },
         {
           label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.apps"
+            "ui.panel.config.backup.overview.progress.segments.media"
           ),
           state: this._getSegmentState(1, currentGroupIndex),
           flex: 2,
         },
         {
           label: this.hass.localize(
-            "ui.panel.config.backup.overview.progress.segments.media"
+            "ui.panel.config.backup.overview.progress.segments.home_assistant"
           ),
           state: this._getSegmentState(2, currentGroupIndex),
           flex: 2,
@@ -209,18 +201,18 @@ export class HaBackupOverviewProgress extends LitElement {
       ];
     }
 
-    // Non-HAOS: No app segment, just HA, Media, Upload and Cleaning up
+    // Non-HAOS: No app segment, just Media, HA, Upload and Cleaning up
     return [
       {
         label: this.hass.localize(
-          "ui.panel.config.backup.overview.progress.segments.home_assistant"
+          "ui.panel.config.backup.overview.progress.segments.media"
         ),
-        state: this._getSegmentState(0, currentGroupIndex),
+        state: this._getSegmentState(1, currentGroupIndex),
         flex: 2,
       },
       {
         label: this.hass.localize(
-          "ui.panel.config.backup.overview.progress.segments.media"
+          "ui.panel.config.backup.overview.progress.segments.home_assistant"
         ),
         state: this._getSegmentState(2, currentGroupIndex),
         flex: 2,

src/panels/config/config-sections.ts

@@ -39,7 +39,6 @@ import {
 import memoizeOne from "memoize-one";
 import type { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../types";
-import { mdiMqttLogo } from "../../resources/mqtt-logo-svg";
 
 const getHasDomainCheck = (domain: string) => {
   const prefix = `${domain}.`;
@@ -143,14 +142,6 @@ export const configSections: Record<string, PageNavigation[]> = {
       translationKey: "knx",
       adminOnly: true,
     },
-    {
-      path: "/config/mqtt",
-      iconPath: mdiMqttLogo,
-      iconColor: "#660066",
-      component: "mqtt",
-      translationKey: "mqtt",
-      adminOnly: true,
-    },
     {
       path: "/config/thread",
       iconPath:

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -1,27 +1,14 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import {
-  mdiAlertCircleOutline,
-  mdiCheck,
-  mdiDevices,
-  mdiShape,
-  mdiTune,
-} from "@mdi/js";
 import { storage } from "../../../../../common/decorators/storage";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
 import "../../../../../components/ha-formfield";
-import "../../../../../components/ha-icon-next";
-import "../../../../../components/ha-md-list";
-import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-svg-icon";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import "../../../../../components/ha-switch";
 import "../../../../../components/input/ha-input";
-import type { ConfigEntry } from "../../../../../data/config_entries";
 import { getConfigEntries } from "../../../../../data/config_entries";
 import type { Action } from "../../../../../data/script";
 import { callExecuteScript } from "../../../../../data/service";
@@ -31,10 +18,6 @@ import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import { showToast } from "../../../../../util/toast";
 import "./mqtt-subscribe-card";
-import { brandsUrl } from "../../../../../util/brands-url";
-import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
-import { fetchIntegrationManifest } from "../../../../../data/integration";
-import { mdiMqttLogo } from "../../../../../resources/mqtt-logo-svg";
 
 const qosLevel = ["0", "1", "2"];
 
@@ -76,240 +59,78 @@ export class MQTTConfigPanel extends LitElement {
   })
   private _retain = false;
 
-  @state() private _configEntry?: ConfigEntry;
-
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
-    super.firstUpdated(changedProperties);
-    if (this.hass) {
-      this._fetchConfigEntry();
-    }
-  }
-
-  private _MQTTDeviceIds = memoizeOne(
-    (
-      devices: HomeAssistant["devices"],
-      configEntryId?: string
-    ): Set<string> => {
-      if (!configEntryId) {
-        return new Set();
-      }
-      return new Set(
-        Object.values(devices)
-          .filter((device) => device.config_entries.includes(configEntryId))
-          .map((device) => device.id)
-      );
-    }
-  );
-
-  private _entityCount = memoizeOne(
-    (entities: HomeAssistant["entities"], deviceIds: Set<string>): number =>
-      Object.values(entities).filter(
-        (entity) => entity.device_id && deviceIds.has(entity.device_id)
-      ).length
-  );
-
-  protected render(): TemplateResult | typeof nothing {
-    if (!this._configEntry) {
-      return nothing;
-    }
-    const isOnline = this._configEntry.state === "loaded";
-    const deviceIds = this._MQTTDeviceIds(
-      this.hass.devices,
-      this._configEntry.entry_id
-    );
-    const entityCount = this._entityCount(this.hass.entities, deviceIds);
-
+  protected render(): TemplateResult {
     return html`
       <hass-subpage
         .narrow=${this.narrow}
         .hass=${this.hass}
-        header="MQTT"
         back-path="/config/integrations/integration/mqtt"
-        has-fab
       >
         <div class="content">
-          <div class="container">
-            ${this._renderNetworkStatus(isOnline, deviceIds.size)}
-            ${this._renderMyNetworkCard(deviceIds.size, entityCount)}
-            ${this._renderNavigationCard()} ${this._renderPublishCard()}
-            <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
-          </div>
+          <ha-card
+            .header=${this.hass.localize("ui.panel.config.mqtt.settings_title")}
+          >
+            <div class="card-actions">
+              <ha-button appearance="plain" @click=${this._openOptionFlow}
+                >${this.hass.localize(
+                  "ui.panel.config.mqtt.option_flow"
+                )}</ha-button
+              >
+            </div>
+          </ha-card>
+          <ha-card
+            .header=${this.hass.localize(
+              "ui.panel.config.mqtt.description_publish"
+            )}
+          >
+            <div class="card-content">
+              <div class="panel-dev-mqtt-fields">
+                <ha-input
+                  .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
+                  .value=${this._topic}
+                  @change=${this._handleTopic}
+                ></ha-input>
+                <ha-select
+                  .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+                  .value=${this._qos}
+                  @selected=${this._handleQos}
+                  .options=${qosLevel}
+                >
+                </ha-select>
+                <ha-formfield
+                  label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
+                >
+                  <ha-switch
+                    @change=${this._handleRetain}
+                    .checked=${this._retain}
+                  ></ha-switch>
+                </ha-formfield>
+              </div>
+              <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
+              <ha-code-editor
+                mode="jinja2"
+                autocomplete-entities
+                autocomplete-icons
+                .value=${this._payload}
+                @value-changed=${this._handlePayload}
+                dir="ltr"
+              ></ha-code-editor>
+            </div>
+            <div class="card-actions">
+              <ha-button appearance="plain" @click=${this._publish}
+                >${this.hass.localize(
+                  "ui.panel.config.mqtt.publish"
+                )}</ha-button
+              >
+            </div>
+          </ha-card>
+
+          <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
         </div>
       </hass-subpage>
     `;
   }
 
-  private _renderNetworkStatus(isOnline: boolean, deviceCount: number) {
-    return html`
-      <ha-card class="content network-status">
-        <div class="card-content">
-          <div class="heading">
-            <div class="icon ${isOnline ? "success" : "error"}">
-              <ha-svg-icon
-                .path=${isOnline ? mdiCheck : mdiAlertCircleOutline}
-              ></ha-svg-icon>
-            </div>
-            <div class="details">
-              ${this.hass.localize(
-                `ui.panel.config.mqtt.status_${isOnline ? "online" : "offline"}`
-              )}<br />
-              <small>
-                ${this.hass.localize("ui.panel.config.mqtt.devices", {
-                  count: deviceCount,
-                })}
-              </small>
-            </div>
-            <img
-              class="logo"
-              alt="MQTT"
-              crossorigin="anonymous"
-              referrerpolicy="no-referrer"
-              src=${brandsUrl(
-                {
-                  domain: "mqtt",
-                  type: "icon",
-                  darkOptimized: this.hass.themes?.darkMode,
-                },
-                this.hass.auth.data.hassUrl
-              )}
-            />
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderMyNetworkCard(deviceCount: number, entityCount: number) {
-    return html`
-      <ha-card class="nav-card">
-        <div class="card-header">
-          ${this.hass.localize("ui.panel.config.mqtt.my_network_title")}
-        </div>
-        <div class="card-content">
-          <ha-md-list>
-            <ha-md-list-item
-              type="link"
-              href=${`/config/devices/dashboard?historyBack=1&config_entry=${this._configEntry?.entry_id}`}
-            >
-              <ha-svg-icon slot="start" .path=${mdiDevices}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize("ui.panel.config.mqtt.device_count", {
-                  count: deviceCount,
-                })}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-            <ha-md-list-item
-              type="link"
-              href=${`/config/entities/dashboard?historyBack=1&config_entry=${this._configEntry?.entry_id}`}
-            >
-              <ha-svg-icon slot="start" .path=${mdiShape}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize("ui.panel.config.mqtt.entity_count", {
-                  count: entityCount,
-                })}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-          </ha-md-list>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderNavigationCard() {
-    return html`
-      <ha-card class="nav-card">
-        <div class="card-content">
-          <ha-md-list>
-            <ha-md-list-item type="link" @click=${this._openOptionFlow}>
-              <ha-svg-icon slot="start" .path=${mdiTune}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize("ui.panel.config.mqtt.option_flow")}
-              </div>
-              <div slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.mqtt.option_flow_description"
-                )}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-            <ha-md-list-item type="link" @click=${this._openConfigFlow}>
-              <ha-svg-icon slot="start" .path=${mdiMqttLogo}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize("ui.panel.config.mqtt.config_flow")}
-              </div>
-              <div slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.mqtt.config_flow_description"
-                )}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-          </ha-md-list>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _renderPublishCard() {
-    return html`
-      <ha-card
-        .header=${this.hass.localize(
-          "ui.panel.config.mqtt.description_publish"
-        )}
-      >
-        <div class="card-content">
-          <div class="panel-dev-mqtt-fields">
-            <ha-input
-              .label=${this.hass.localize("ui.panel.config.mqtt.topic")}
-              .value=${this._topic}
-              @change=${this._handleTopic}
-            ></ha-input>
-            <ha-select
-              .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-              .value=${this._qos}
-              @selected=${this._handleQos}
-              .options=${qosLevel}
-            >
-            </ha-select>
-            <ha-formfield
-              label=${this.hass!.localize("ui.panel.config.mqtt.retain")}
-            >
-              <ha-switch
-                @change=${this._handleRetain}
-                .checked=${this._retain}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
-          <ha-code-editor
-            mode="jinja2"
-            autocomplete-entities
-            autocomplete-icons
-            .value=${this._payload}
-            @value-changed=${this._handlePayload}
-            dir="ltr"
-          ></ha-code-editor>
-        </div>
-        <div class="card-actions">
-          <ha-button appearance="plain" @click=${this._publish}
-            >${this.hass.localize("ui.panel.config.mqtt.publish")}</ha-button
-          >
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private async _fetchConfigEntry(): Promise<void> {
-    const configEntries = await getConfigEntries(this.hass, {
-      domain: "mqtt",
-    });
-    this._configEntry = configEntries.find(
-      (entry) => entry.disabled_by === null && entry.source !== "ignore"
-    );
-  }
-
   private _handleTopic(ev: InputEvent) {
     this._topic = (ev.target as HTMLInputElement).value;
   }
@@ -354,23 +175,19 @@ export class MQTTConfigPanel extends LitElement {
   }
 
   private async _openOptionFlow() {
-    showOptionsFlowDialog(this, this._configEntry!);
-  }
-
-  private _openConfigFlow = async () => {
-    if (!this._configEntry) {
+    const searchParams = new URLSearchParams(window.location.search);
+    if (!searchParams.has("config_entry")) {
       return;
     }
-    showConfigFlowDialog(this, {
-      startFlowHandler: this._configEntry.domain,
-      manifest: await fetchIntegrationManifest(
-        this.hass,
-        this._configEntry.domain
-      ),
-      entryId: this._configEntry.entry_id,
-      navigateToResult: true,
+    const configEntryId = searchParams.get("config_entry") as string;
+    const configEntries = await getConfigEntries(this.hass, {
+      domain: "mqtt",
     });
-  };
+    const configEntry = configEntries.find(
+      (entry) => entry.entry_id === configEntryId
+    );
+    showOptionsFlowDialog(this, configEntry!);
+  }
 
   static get styles(): CSSResultGroup {
     return [
@@ -382,37 +199,17 @@ export class MQTTConfigPanel extends LitElement {
           -moz-user-select: initial;
         }
 
-        .nav-card {
-          overflow: hidden;
-        }
-
-        .nav-card .card-content {
-          padding: 0;
-        }
-
-        .nav-card .card-header {
-          padding-bottom: var(--ha-space-2);
-        }
         .content {
-          margin-top: var(--ha-space-6);
+          padding: 24px 0 32px;
+          max-width: 600px;
+          margin: 0 auto;
+          direction: ltr;
         }
-
         .panel-dev-mqtt-fields {
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
         }
-        ha-card {
-          margin: 0 auto var(--ha-space-4);
-          max-width: 600px;
-        }
-        ha-md-list {
-          background: none;
-          padding: 0;
-        }
-        ha-md-list-item {
-          --md-item-overflow: visible;
-        }
         ha-select {
           width: 96px;
           margin: 0 8px;
@@ -439,78 +236,6 @@ export class MQTTConfigPanel extends LitElement {
           display: block;
           margin: 16px auto;
         }
-        .network-status div.heading {
-          display: flex;
-          align-items: center;
-          column-gap: var(--ha-space-4);
-        }
-
-        .network-status div.heading .logo {
-          height: 40px;
-          width: 40px;
-          margin-inline-start: auto;
-          object-fit: contain;
-        }
-
-        .network-status div.heading .icon {
-          position: relative;
-          border-radius: var(--ha-border-radius-2xl);
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          overflow: hidden;
-          flex-shrink: 0;
-          --icon-color: var(--primary-color);
-        }
-
-        .network-status div.heading .icon.success {
-          --icon-color: var(--success-color);
-        }
-
-        .network-status div.heading .icon.error {
-          --icon-color: var(--error-color);
-        }
-
-        .network-status div.heading .icon::before {
-          display: block;
-          content: "";
-          position: absolute;
-          inset: 0;
-          background-color: var(--icon-color);
-          opacity: 0.2;
-        }
-
-        .network-status div.heading .icon ha-svg-icon {
-          color: var(--icon-color);
-          width: 24px;
-          height: 24px;
-        }
-
-        .network-status div.heading .details {
-          font-size: var(--ha-font-size-xl);
-          font-weight: var(--ha-font-weight-normal);
-          line-height: var(--ha-line-height-condensed);
-          color: var(--primary-text-color);
-        }
-
-        .network-status small {
-          font-size: var(--ha-font-size-m);
-          font-weight: var(--ha-font-weight-normal);
-          line-height: var(--ha-line-height-condensed);
-          letter-spacing: 0.25px;
-          color: var(--secondary-text-color);
-        }
-
-        .container {
-          padding: var(--ha-space-2) var(--ha-space-4)
-            calc(var(--ha-space-16) + var(--safe-area-inset-bottom, 0px));
-        }
-
-        a[slot="fab"] {
-          text-decoration: none;
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -1,20 +1,15 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiContentCopy } from "@mdi/js";
 import { formatTime } from "../../../../../common/datetime/format_time";
-import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-markdown";
 import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import "../../../../../components/ha-select";
 import "../../../../../components/input/ha-input";
 import type { MQTTMessage } from "../../../../../data/mqtt";
 import { subscribeMQTTTopic } from "../../../../../data/mqtt";
 import type { HomeAssistant } from "../../../../../types";
-import { showToast } from "../../../../../util/toast";
 
 import { storage } from "../../../../../common/decorators/storage";
 import "../../../../../components/ha-formfield";
@@ -73,56 +68,53 @@ class MqttSubscribeCard extends LitElement {
     return html`
       <ha-card
         header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
-        class="content_subscribe_panel"
       >
-        <div class="card-content">
-          <form>
-            <p>
-              <ha-formfield
-                label=${this.hass!.localize(
-                  "ui.panel.config.mqtt.json_formatting"
-                )}
-              >
-                <ha-switch
-                  @change=${this._handleJSONFormat}
-                  .checked=${this._json_format}
-                ></ha-switch>
-              </ha-formfield>
-            </p>
-            <div class="panel-dev-mqtt-subscribe-fields">
-              <ha-input
-                .label=${
-                  this._subscribed
-                    ? this.hass.localize("ui.panel.config.mqtt.listening_to")
-                    : this.hass.localize("ui.panel.config.mqtt.subscribe_to")
-                }
-                .disabled=${this._subscribed !== undefined}
-                .value=${this._topic}
-                @change=${this._handleTopic}
-              ></ha-input>
-              <ha-select
-                .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
-                .disabled=${this._subscribed !== undefined}
-                .value=${this._qos}
-                @selected=${this._handleQos}
-                .options=${qosLevel}
-              >
-              </ha-select>
-              <ha-button
-                appearance="plain"
-                size="s"
-                .disabled=${this._topic === ""}
-                @click=${this._handleSubmit}
-              >
-                ${
-                  this._subscribed
-                    ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
-                    : this.hass.localize("ui.panel.config.mqtt.start_listening")
-                }
-              </ha-button>
-            </div>
-          </form>
-        </div>
+        <form>
+          <p>
+            <ha-formfield
+              label=${this.hass!.localize(
+                "ui.panel.config.mqtt.json_formatting"
+              )}
+            >
+              <ha-switch
+                @change=${this._handleJSONFormat}
+                .checked=${this._json_format}
+              ></ha-switch>
+            </ha-formfield>
+          </p>
+          <div class="panel-dev-mqtt-subscribe-fields">
+            <ha-input
+              .label=${
+                this._subscribed
+                  ? this.hass.localize("ui.panel.config.mqtt.listening_to")
+                  : this.hass.localize("ui.panel.config.mqtt.subscribe_to")
+              }
+              .disabled=${this._subscribed !== undefined}
+              .value=${this._topic}
+              @change=${this._handleTopic}
+            ></ha-input>
+            <ha-select
+              .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+              .disabled=${this._subscribed !== undefined}
+              .value=${this._qos}
+              @selected=${this._handleQos}
+              .options=${qosLevel}
+            >
+            </ha-select>
+            <ha-button
+              appearance="plain"
+              size="s"
+              .disabled=${this._topic === ""}
+              @click=${this._handleSubmit}
+            >
+              ${
+                this._subscribed
+                  ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
+                  : this.hass.localize("ui.panel.config.mqtt.start_listening")
+              }
+            </ha-button>
+          </div>
+        </form>
         <div class="events">
           ${this._messages.map(
             (msg) => html`
@@ -136,17 +128,7 @@ class MqttSubscribeCard extends LitElement {
                     this.hass!.config
                   ),
                 })}
-                <div class="code-block">
-                  <ha-icon-button
-                    class="copy-button"
-                    .path=${mdiContentCopy}
-                    @click=${this._handleCopyClick}
-                    data-payload=${msg.payload}
-                  ></ha-icon-button>
-                  <ha-markdown
-                    .content=${`\`\`\`${this._json_format ? "json" : ""}\n${msg.payload}\n\`\`\``}
-                  ></ha-markdown>
-                </div>
+                <pre>${msg.payload}</pre>
                 <div class="bottom">
                   QoS: ${msg.message.qos} - Retain:
                   ${Boolean(msg.message.retain)}
@@ -174,16 +156,6 @@ class MqttSubscribeCard extends LitElement {
     this._json_format = (ev.target! as any).checked;
   }
 
-  private async _handleCopyClick(ev: Event): Promise<void> {
-    const payload = (ev.target as HTMLElement).getAttribute("data-payload");
-    if (payload) {
-      await copyToClipboard(payload);
-      showToast(this, {
-        message: this.hass.localize("ui.common.copied_clipboard"),
-      });
-    }
-  }
-
   private async _handleSubmit(): Promise<void> {
     if (this._subscribed) {
       this._subscribed();
@@ -227,12 +199,6 @@ class MqttSubscribeCard extends LitElement {
       padding: var(--ha-space-4);
       padding-bottom: var(--ha-space-8);
     }
-    .content_subscribe_panel {
-      margin-top: var(--ha-space-6);
-      max-width: 600px;
-      margin: 0 auto;
-      direction: ltr;
-    }
     .events {
       margin: -16px 0;
       padding: 0 16px;
@@ -264,20 +230,6 @@ class MqttSubscribeCard extends LitElement {
     ha-input {
       flex: 1;
     }
-    .code-block {
-      position: relative;
-      margin-bottom: 16px;
-    }
-    .code-block ha-markdown {
-      padding-right: 40px;
-    }
-    .copy-button {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      z-index: 1;
-      color: var(--secondary-text-color);
-    }
     @media screen and (max-width: 600px) {
       ha-select {
         display: block;

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

@@ -2,7 +2,6 @@ import type {
   CallbackDataParams,
   TopLevelFormatterParams,
 } from "echarts/types/dist/shared";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -20,13 +19,11 @@ import "../../../../../components/input/ha-input-search";
 import type { HaInputSearch } from "../../../../../components/input/ha-input-search";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import type {
-  RssiError,
   ZWaveJSNodeStatisticsUpdatedMessage,
   ZWaveJSNodeStatus,
 } from "../../../../../data/zwave_js";
 import {
   fetchZwaveNetworkStatus,
-  getNodeIdFromDevice,
   NodeStatus,
   subscribeZwaveNodeStatistics,
 } from "../../../../../data/zwave_js";
@@ -57,36 +54,19 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
 
   @state() private _searchFilter = "";
 
-  // Route statistics reference repeaters by device registry ID
-  private _nodeIdsByDeviceId: Record<string, number> = {};
-
   public hassSubscribe() {
-    const subscriptions: Promise<UnsubscribeFunc>[] = [];
-    const devices: Record<number, DeviceRegistryEntry> = {};
-    const nodeIdsByDeviceId: Record<string, number> = {};
+    const devices = Object.values(this.hass.devices).filter((device) =>
+      device.config_entries.some((entry) => entry === this.configEntryId)
+    );
 
-    Object.values(this.hass.devices).forEach((device) => {
-      if (!device.config_entries.includes(this.configEntryId)) {
-        return;
-      }
-      const nodeId = getNodeIdFromDevice(device);
-      if (nodeId === undefined) {
-        return;
-      }
-      devices[nodeId] = device;
-      nodeIdsByDeviceId[device.id] = nodeId;
-      subscriptions.push(
-        subscribeZwaveNodeStatistics(this.hass!, device.id, (message) => {
-          this._nodeStatistics[nodeId] = message;
-          this._handleUpdatedNodeStatistics();
-        })
-      );
-    });
-
-    this._nodeIdsByDeviceId = nodeIdsByDeviceId;
-    this._devices = devices;
-
-    return subscriptions;
+    return devices.map((device) =>
+      subscribeZwaveNodeStatistics(this.hass!, device.id, (message) => {
+        const nodeId = message.nodeId ?? message.node_id;
+        this._devices[nodeId!] = device;
+        this._nodeStatistics[nodeId!] = message;
+        this._handleUpdatedNodeStatistics();
+      })
+    );
   }
 
   public connectedCallback() {
@@ -184,10 +164,8 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         sourceDevice?.name_by_user ?? sourceDevice?.name ?? source;
       const targetName =
         targetDevice?.name_by_user ?? targetDevice?.name ?? target;
-      // links point away from the controller, so the route belongs to the target
-      const stats =
-        this._nodeStatistics[target] ?? this._nodeStatistics[source];
-      const route = stats?.lwr || stats?.nlwr;
+      const route =
+        this._nodeStatistics[source]?.lwr || this._nodeStatistics[source]?.nlwr;
       return html`${sourceName} →
       ${targetName}${
         route?.protocol_data_rate
@@ -355,69 +333,55 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         });
       });
 
-      if (controllerNode === undefined) {
-        return { nodes, links, categories };
-      }
-      const controllerId = String(controllerNode);
-
       Object.entries(nodeStatistics).forEach(([nodeId, stats]) => {
         const route = stats.lwr || stats.nlwr;
-        if (!route) {
-          return;
+        if (route) {
+          const hops = [
+            ...route.repeaters.map((id, i) => [
+              Object.keys(this._devices).find(
+                (_nodeId) => this._devices[_nodeId]?.id === id
+              )?.[0],
+              route.repeater_rssi[i],
+            ]),
+            [controllerNode!, route.rssi],
+          ];
+          let sourceNode: string = nodeId;
+          hops.forEach(([repeater, rssi]) => {
+            const RSSI = typeof rssi === "number" && rssi <= 0 ? rssi : -100;
+            const existingLink = links.find(
+              (link) =>
+                link.source === sourceNode && link.target === String(repeater)
+            );
+            const width = this._getLineWidth(RSSI);
+            if (existingLink) {
+              existingLink.value = Math.max(existingLink.value!, RSSI);
+              existingLink.lineStyle = {
+                ...existingLink.lineStyle,
+                width: Math.max(existingLink.lineStyle!.width!, width),
+                type:
+                  route.protocol_data_rate > 1
+                    ? "solid"
+                    : existingLink.lineStyle!.type,
+              };
+            } else {
+              links.push({
+                source: sourceNode,
+                target: String(repeater),
+                value: RSSI,
+                lineStyle: {
+                  width,
+                  color:
+                    repeater === controllerNode
+                      ? style.getPropertyValue("--primary-color")
+                      : style.getPropertyValue("--disabled-color"),
+                  type: route.protocol_data_rate > 1 ? "solid" : "dotted",
+                },
+                symbolSize: width * 3,
+              });
+            }
+            sourceNode = String(repeater);
+          });
         }
-        // Routes go from the controller to the node via the repeaters, in order.
-        // Each station measures the hop leaving it: the controller reports
-        // `rssi`, repeater i reports `repeater_rssi[i]`.
-        const hops: [string, RssiError | number | null][] = [];
-        let hopRssi = route.rssi;
-        route.repeaters.forEach((deviceId, i) => {
-          const repeaterNodeId = this._nodeIdsByDeviceId[deviceId];
-          // skip repeaters we can't resolve, so the chain stays connected
-          if (repeaterNodeId !== undefined) {
-            hops.push([String(repeaterNodeId), hopRssi]);
-          }
-          hopRssi = route.repeater_rssi[i];
-        });
-        hops.push([nodeId, hopRssi]);
-
-        let sourceNode = controllerId;
-        hops.forEach(([target, rssi]) => {
-          if (target === sourceNode) {
-            return;
-          }
-          const RSSI = typeof rssi === "number" && rssi <= 0 ? rssi : -100;
-          const existingLink = links.find(
-            (link) => link.source === sourceNode && link.target === target
-          );
-          const width = this._getLineWidth(RSSI);
-          if (existingLink) {
-            existingLink.value = Math.max(existingLink.value!, RSSI);
-            existingLink.lineStyle = {
-              ...existingLink.lineStyle,
-              width: Math.max(existingLink.lineStyle!.width!, width),
-              type:
-                route.protocol_data_rate > 1
-                  ? "solid"
-                  : existingLink.lineStyle!.type,
-            };
-          } else {
-            links.push({
-              source: sourceNode,
-              target,
-              value: RSSI,
-              lineStyle: {
-                width,
-                color:
-                  sourceNode === controllerId
-                    ? style.getPropertyValue("--primary-color")
-                    : style.getPropertyValue("--disabled-color"),
-                type: route.protocol_data_rate > 1 ? "solid" : "dotted",
-              },
-              symbolSize: width * 3,
-            });
-          }
-          sourceNode = target;
-        });
       });
 
       return { nodes, links, categories };

src/panels/config/person/dialog-person-detail.ts

@@ -1,4 +1,4 @@
-import { mdiAccount, mdiAccountPlus, mdiPencil } from "@mdi/js";
+import { mdiPencil } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -19,7 +19,6 @@ import type { PersonMutableParams } from "../../../data/person";
 import type { User } from "../../../data/user";
 import {
   deleteUser,
-  fetchUsers,
   SYSTEM_GROUP_ID_ADMIN,
   SYSTEM_GROUP_ID_USER,
   updateUser,
@@ -37,8 +36,6 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showAddUserDialog } from "../users/show-dialog-add-user";
 import { showAdminChangePasswordDialog } from "../users/show-dialog-admin-change-password";
 import type { PersonDetailDialogParams } from "./show-dialog-person-detail";
-import { showListItemsDialog } from "../../../dialogs/dialog-list-items/show-list-items-dialog";
-import { computeDomain } from "../../../common/entity/compute_domain";
 
 const includeDomains = ["device_tracker"];
 
@@ -88,8 +85,6 @@ class DialogPersonDetail
 
   @state() private _open = false;
 
-  private _linkedExistingUser = false;
-
   private _deviceTrackersAvailable = memoizeOne((hass) =>
     Object.keys(hass.states).some(
       (entityId) =>
@@ -145,7 +140,7 @@ class DialogPersonDetail
   private _dialogClosed() {
     // If we do not have a person ID yet (= person creation dialog was just cancelled), but
     // we already created a user ID for it, delete it now to not have it "free floating".
-    if (!this._personExists && this._userId && !this._linkedExistingUser) {
+    if (!this._personExists && this._userId) {
       const callback = this._params?.refreshUsers;
       deleteUser(this.hass, this._userId).then(() => {
         callback?.();
@@ -431,71 +426,26 @@ class DialogPersonDetail
     this._updateDirtyState(this._currentState());
   }
 
-  private async _linkUser(user: User, newUser: boolean) {
-    this._linkedExistingUser = !newUser;
-    if (this._params!.entry && this._params!.updateEntry) {
-      await this._params!.updateEntry({ user_id: user.id });
-    }
-    if (newUser) {
-      this._params?.refreshUsers?.();
-    }
-    this._user = user;
-    this._userId = user.id;
-    this._isAdmin = user.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
-    this._localOnly = user.local_only;
-    this._updateDirtyState(this._currentState());
-  }
-
   private async _allowLoginChanged(ev): Promise<void> {
     const target = ev.target;
     if (target.checked) {
       target.checked = false;
-
-      const users = await fetchUsers(this.hass);
-      const currentLinkedUsers = new Set(
-        Object.values(this.hass.states)
-          .filter(
-            (s) =>
-              computeDomain(s.entity_id) === "person" && s.attributes.user_id
-          )
-          .map((s) => s.attributes.user_id)
-      );
-      const eligibleUsers = users.filter(
-        (u) =>
-          !currentLinkedUsers.has(u.id) && !u.system_generated && u.username
-      );
-      const addUserDialog = () =>
-        showAddUserDialog(this, {
-          userAddedCallback: async (user?: User) => {
-            if (user) {
-              target.checked = true;
-              this._linkUser(user, true);
+      showAddUserDialog(this, {
+        userAddedCallback: async (user?: User) => {
+          if (user) {
+            target.checked = true;
+            if (this._params!.entry && this._params!.updateEntry) {
+              await this._params!.updateEntry({ user_id: user.id });
             }
-          },
-          name: this._name,
-        });
-
-      if (eligibleUsers.length === 0) {
-        addUserDialog();
-        return;
-      }
-
-      showListItemsDialog(this, {
-        title: this.hass.localize("ui.panel.config.person.detail.select_user"),
-        items: [
-          {
-            iconPath: mdiAccountPlus,
-            label: this.hass.localize(
-              "ui.panel.config.person.detail.create_new_user"
-            ),
-            action: addUserDialog,
-          },
-          ...eligibleUsers.map((user) => ({
-            iconPath: mdiAccount,
-            label: `${user.name} (${user.username})`,
-            action: () => this._linkUser(user, false),
-          })),
-        ],
+            this._params?.refreshUsers?.();
+            this._user = user;
+            this._userId = user.id;
+            this._isAdmin = user.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+            this._localOnly = user.local_only;
+            this._updateDirtyState(this._currentState());
+          }
+        },
+        name: this._name,
       });
     } else if (this._userId) {
       if (

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -203,28 +203,9 @@ export const showRepairsFlowDialog = (
         return "";
       },
 
-      renderCreateEntryDescription(hass, step) {
-        const description = hass.localize(
-          `component.${issue.domain}.issues.${
-            issue.translation_key || issue.issue_id
-          }.fix_flow.create_entry.${step.description || "default"}`,
-          step.description_placeholders
-        );
-
+      renderCreateEntryDescription(hass, _step) {
         return html`
-          ${
-            description
-              ? html`
-                  <ha-markdown
-                    allow-svg
-                    breaks
-                    .content=${description}
-                  ></ha-markdown>
-                `
-              : html`<p>
-                  ${hass.localize("ui.dialogs.repair_flow.success.description")}
-                </p>`
-          }
+          <p>${hass.localize("ui.dialogs.repair_flow.success.description")}</p>
         `;
       },
 
@@ -310,17 +291,11 @@ export const showRepairsFlowDialog = (
       },
 
       renderMenuOption(hass, step, option) {
-        return (
-          hass.localize(
-            `component.${issue.domain}.issues.${
-              issue.translation_key || issue.issue_id
-            }.fix_flow.step.${step.step_id}.menu_options.${option}`,
-            mergePlaceholders(issue, step)
-          ) ||
-          // Newer backends can offer options this frontend has no
-          // translation for yet — show the raw option key instead of
-          // an empty menu entry
-          option
+        return hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.step.${step.step_id}.menu_options.${option}`,
+          mergePlaceholders(issue, step)
         );
       },
 

src/panels/config/tools/yaml_configuration/tools-yaml-config.ts

@@ -20,10 +20,9 @@ type ReloadableDomain = Exclude<
   "heading" | "introduction" | "reload"
 >;
 
-interface TranslatedReloadableItem {
-  domain: ReloadableDomain | "frontend";
+interface TranslatedReloadableDomain {
+  domain: ReloadableDomain;
   name: string;
-  service?: string;
 }
 
 @customElement("tools-yaml-config")
@@ -38,7 +37,7 @@ export class ToolsYamlConfig extends LitElement {
 
   @state() private _validating = false;
 
-  @state() private _reloadableItems: TranslatedReloadableItem[] = [];
+  @state() private _reloadableDomains: TranslatedReloadableDomain[] = [];
 
   @state() private _validateResult?: CheckConfigResult;
 
@@ -55,10 +54,10 @@ export class ToolsYamlConfig extends LitElement {
         oldHass.config.components !== this.hass.config.components ||
         oldHass.localize !== this.hass.localize)
     ) {
-      this._reloadableItems = (
+      this._reloadableDomains = (
         componentsWithService(this.hass, "reload") as ReloadableDomain[]
       )
-        .map<TranslatedReloadableItem>((domain) => ({
+        .map((domain) => ({
           domain,
           name:
             this.hass.localize(
@@ -69,15 +68,6 @@ export class ToolsYamlConfig extends LitElement {
               { domain: domainToName(this.hass.localize, domain) }
             ),
         }))
-        .concat([
-          {
-            domain: "frontend",
-            service: "reload_themes",
-            name: this.hass.localize(
-              `ui.panel.config.tools.tabs.yaml.section.reloading.themes`
-            ),
-          },
-        ])
         .sort((a, b) =>
           stringCompare(a.name, b.name, this.hass.locale.language)
         );
@@ -200,12 +190,12 @@ export class ToolsYamlConfig extends LitElement {
               )}
             </ha-call-service-button>
           </div>
-          ${this._reloadableItems.map(
+          ${this._reloadableDomains.map(
             (reloadable) => html`
               <div class="card-actions">
                 <ha-call-service-button
                   .domain=${reloadable.domain}
-                  .service=${reloadable.service || "reload"}
+                  service="reload"
                   >${reloadable.name}
                 </ha-call-service-button>
               </div>

src/panels/lovelace/cards/energy/common/sankey.ts

@@ -11,11 +11,6 @@ import type { HomeAssistant } from "../../../../../types";
 // Devices below this fraction of the home total are grouped into an "Other" node
 export const MIN_SANKEY_THRESHOLD_FACTOR = 0.001; // 0.1% of home total
 
-// Readable capacity of the default 400px card: ~18px per node including the
-// 6px nodeGap. Past this, bars collapse toward the 1px minimum and the labels
-// shrink with them.
-export const DEFAULT_MAX_SANKEY_DEVICES = 20;
-
 // While the graph is assembled, device nodes carry an ad-hoc `parent` field
 // that is not part of the chart's Node interface. The chart ignores it.
 export type SankeyDeviceNode = Node & { parent?: string };
@@ -41,103 +36,6 @@ export const fireSankeyNodeMoreInfo = (el: HTMLElement, node: Node): void => {
   }
 };
 
-export interface FindDevicesOverCapOptions {
-  devices: DeviceConsumptionEnergyPreference[];
-  /** Max named children per parent. Falsy or non-positive disables the cap. */
-  maxDevices: number | undefined;
-  rootNodeId: string;
-  renderedIds: ReadonlySet<string>;
-  deviceValues: ReadonlyMap<string, number>;
-  getId: (device: DeviceConsumptionEnergyPreference) => string | undefined;
-  /** First ancestor rendered as its own node, else undefined. */
-  getEffectiveParent: (
-    device: DeviceConsumptionEnergyPreference
-  ) => string | undefined;
-}
-
-/**
- * Node ids to drop from the rendered set because their parent has more rendered
- * children than `maxDevices`. Callers group the result into the parent's "Other"
- * node, so the smallest devices merge instead of disappearing.
- */
-export const findDevicesOverCap = ({
-  devices,
-  maxDevices,
-  rootNodeId,
-  renderedIds,
-  deviceValues,
-  getId,
-  getEffectiveParent,
-}: FindDevicesOverCapOptions): Set<string> => {
-  const grouped = new Set<string>();
-  if (!maxDevices || !Number.isFinite(maxDevices) || maxDevices <= 0) {
-    return grouped;
-  }
-
-  const childrenByParent = new Map<
-    string,
-    { id: string; value: number; idx: number }[]
-  >();
-  const seenIds = new Set<string>();
-  devices.forEach((device, idx) => {
-    const id = getId(device);
-    if (!id || !renderedIds.has(id) || seenIds.has(id)) {
-      return;
-    }
-    seenIds.add(id);
-    const parentKey = getEffectiveParent(device) ?? rootNodeId;
-    if (!childrenByParent.has(parentKey)) {
-      childrenByParent.set(parentKey, []);
-    }
-    childrenByParent.get(parentKey)!.push({
-      id,
-      value: deviceValues.get(id)!,
-      idx,
-    });
-  });
-
-  // Taking the whole subtree stops a grouped device's children from re-parenting
-  // upward while its value, which already includes them, rolls into "Other".
-  const groupSubtree = (id: string): void => {
-    if (grouped.has(id)) {
-      return;
-    }
-    grouped.add(id);
-    childrenByParent.get(id)?.forEach((child) => groupSubtree(child.id));
-  };
-
-  const queue = [rootNodeId];
-  const visited = new Set(queue);
-  while (queue.length) {
-    const children = childrenByParent.get(queue.shift()!);
-    if (!children) {
-      continue;
-    }
-    let kept = children;
-    if (children.length > maxDevices) {
-      // Raw value includes children, so a parent never sorts below its own
-      // child; declaration order breaks ties so the layout is stable.
-      const ranked = [...children].sort(
-        (a, b) => a.value - b.value || a.idx - b.idx
-      );
-      // At least two, because a lone grouped device is rendered by name instead
-      // and would void the cap.
-      ranked
-        .slice(0, Math.max(children.length - maxDevices, 2))
-        .forEach((child) => groupSubtree(child.id));
-      kept = children.filter((child) => !grouped.has(child.id));
-    }
-    kept.forEach((child) => {
-      if (!visited.has(child.id)) {
-        visited.add(child.id);
-        queue.push(child.id);
-      }
-    });
-  }
-
-  return grouped;
-};
-
 export interface BuildSankeyDeviceNodesOptions {
   devices: DeviceConsumptionEnergyPreference[];
   computedStyle: CSSStyleDeclaration;
@@ -146,12 +44,6 @@ export interface BuildSankeyDeviceNodesOptions {
   rootNodeId: string;
   /** Flows below this value are grouped into an "Other" node. */
   minThreshold: number;
-  /**
-   * Max named child nodes per parent. Once a parent has more rendered children
-   * than this, the smallest are grouped into that parent's "Other" node.
-   * Undefined means no cap.
-   */
-  maxDevices?: number;
   /** Per-parent untracked residual only shown when above this value. */
   untrackedFloor: number;
   /** Round the "Other" node value up (instantaneous cards only). */
@@ -184,7 +76,6 @@ export const buildSankeyDeviceNodes = (
     localize,
     rootNodeId,
     minThreshold,
-    maxDevices,
     untrackedFloor,
     ceilOtherValue,
     initialUntracked,
@@ -255,19 +146,6 @@ export const buildSankeyDeviceNodes = (
     return undefined;
   };
 
-  // The value threshold only catches devices that are a negligible share of the
-  // home total, so a panel of dozens of similar-sized circuits never groups.
-  findDevicesOverCap({
-    devices,
-    maxDevices,
-    rootNodeId,
-    renderedIds,
-    deviceValues,
-    getId,
-    getEffectiveParent: (device) =>
-      findEffectiveParent(device.included_in_stat),
-  }).forEach((id) => renderedIds.delete(id));
-
   devices.forEach((device, idx) => {
     const id = getId(device);
     if (!id) {
@@ -276,9 +154,8 @@ export const buildSankeyDeviceNodes = (
     const value = deviceValues.get(id)!;
     const effectiveParent = findEffectiveParent(device.included_in_stat);
 
-    if (!renderedIds.has(id)) {
-      // Below the value threshold or demoted by the count cap. Collect it
-      // instead of folding it into untracked.
+    if (value < minThreshold) {
+      // Collect small consumers instead of folding them into untracked
       const parentKey = effectiveParent ?? rootNodeId;
       if (!smallConsumersByParent.has(parentKey)) {
         smallConsumersByParent.set(parentKey, []);

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

@@ -30,7 +30,6 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
   buildSankeyDeviceNodes,
   buildSankeyLayout,
-  DEFAULT_MAX_SANKEY_DEVICES,
   fireSankeyNodeMoreInfo,
   MIN_SANKEY_THRESHOLD_FACTOR,
 } from "./common/sankey";
@@ -299,7 +298,6 @@ class HuiEnergySankeyCard
       localize: this.hass.localize,
       rootNodeId: "home",
       minThreshold: minEnergyThreshold,
-      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
       untrackedFloor: 0,
       ceilOtherValue: false,
       initialUntracked: homeNode.value,

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

@@ -271,10 +271,6 @@ export class HuiEnergyUsageGraphCard
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
-    if (!this.isConnected) {
-      return;
-    }
-
     const datasets: BarSeriesOption[] = [];
 
     let yMin = Infinity;

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

@@ -23,7 +23,6 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
   buildSankeyDeviceNodes,
   buildSankeyLayout,
-  DEFAULT_MAX_SANKEY_DEVICES,
   fireSankeyNodeMoreInfo,
   MIN_SANKEY_THRESHOLD_FACTOR,
 } from "./common/sankey";
@@ -298,7 +297,6 @@ class HuiPowerSankeyCard
       localize: this.hass.localize,
       rootNodeId: "home",
       minThreshold: minPowerThreshold,
-      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
       untrackedFloor: 1,
       ceilOtherValue: true,
       initialUntracked: homeNode.value,

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

@@ -175,10 +175,6 @@ export class HuiPowerSourcesGraphCard
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
-    if (!this.isConnected) {
-      return;
-    }
-
     const result = generatePowerSourcesGraphData({
       localize: this.hass.localize,
       states: this.hass.states,

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -36,7 +36,7 @@ import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
-import { hasAction, hasAnyAction } from "../common/has-action";
+import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
@@ -300,7 +300,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card
         class=${classMap({
-          "no-action": !hasAnyAction(this._config!),
           [this._sizeController.value?.height]: Boolean(
             this._sizeController.value
           ),
@@ -731,10 +730,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           padding: 16px 0;
         }
 
-        ha-card.no-action {
-          cursor: default;
-        }
-
         .content {
           display: flex;
           flex-wrap: nowrap;

src/panels/lovelace/cards/types.ts

@@ -174,7 +174,6 @@ export interface EnergyCardSankeyConfig extends EnergyCardConfig {
   layout?: "auto" | "vertical" | "horizontal";
   group_by_floor?: boolean;
   group_by_area?: boolean;
-  max_devices?: number;
 }
 
 export interface EnergyDateSelectorCardConfig extends EnergyCardBaseConfig {

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

@@ -22,7 +22,6 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
   buildSankeyDeviceNodes,
   buildSankeyLayout,
-  DEFAULT_MAX_SANKEY_DEVICES,
   fireSankeyNodeMoreInfo,
   MIN_SANKEY_THRESHOLD_FACTOR,
 } from "../energy/common/sankey";
@@ -261,7 +260,6 @@ class HuiWaterFlowSankeyCard
       localize: this.hass.localize,
       rootNodeId,
       minThreshold: minFlowThreshold,
-      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
       untrackedFloor: 1,
       ceilOtherValue: true,
       initialUntracked: effectiveTotalInflow,

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

@@ -27,7 +27,6 @@ import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 import {
   buildSankeyDeviceNodes,
   buildSankeyLayout,
-  DEFAULT_MAX_SANKEY_DEVICES,
   fireSankeyNodeMoreInfo,
   MIN_SANKEY_THRESHOLD_FACTOR,
 } from "../energy/common/sankey";
@@ -242,7 +241,6 @@ class HuiWaterSankeyCard
       localize: this.hass.localize,
       rootNodeId: "home",
       minThreshold: minWaterThreshold,
-      maxDevices: this._config.max_devices ?? DEFAULT_MAX_SANKEY_DEVICES,
       untrackedFloor: 0,
       ceilOtherValue: false,
       initialUntracked: homeNode.value,

src/panels/lovelace/common/load-resources.ts

@@ -15,22 +15,13 @@ const _loadLovelaceResource = (
     hass.auth.data.hassUrl
   ).toString();
 
-  const logLoadError = (err: unknown) => {
-    // eslint-disable-next-line no-console
-    console.error(
-      `Failed to load Lovelace resource ${normalizedUrl} (type: ${resource.type}). Check that the URL is correct and the file exists.`,
-      err
-    );
-  };
-
   switch (resource.type) {
     case "css": {
       if (normalizedUrl in CSS_CACHE) {
         return CSS_CACHE[normalizedUrl];
       }
 
-      // Catch before caching, so a cache hit cannot log the failure again
-      const loadTask = loadCSS(normalizedUrl).catch(logLoadError);
+      const loadTask = loadCSS(normalizedUrl);
       CSS_CACHE[normalizedUrl] = loadTask;
       return loadTask;
     }
@@ -40,13 +31,13 @@ const _loadLovelaceResource = (
         return JS_CACHE[normalizedUrl];
       }
 
-      const loadTask = loadJS(normalizedUrl).catch(logLoadError);
+      const loadTask = loadJS(normalizedUrl);
       JS_CACHE[normalizedUrl] = loadTask;
       return loadTask;
     }
 
     case "module":
-      return loadModule(normalizedUrl).catch(logLoadError);
+      return loadModule(normalizedUrl);
 
     default:
       // eslint-disable-next-line

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

@@ -5,7 +5,6 @@ import {
   assign,
   boolean,
   literal,
-  number,
   object,
   optional,
   string,
@@ -37,7 +36,6 @@ const cardConfigStruct = assign(
     ),
     group_by_floor: optional(boolean()),
     group_by_area: optional(boolean()),
-    max_devices: optional(number()),
   })
 );
 
@@ -94,11 +92,6 @@ export class HuiEnergySankeyCardEditor
               },
             ],
           },
-          {
-            name: "max_devices",
-            required: false,
-            selector: { number: { min: 1, mode: "box" } },
-          },
           {
             type: "string",
             name: "collection_key",
@@ -141,10 +134,6 @@ export class HuiEnergySankeyCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.collection_key_description`
         );
-      case "max_devices":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.energy-sankey.max_devices_description`
-        );
       default:
         return undefined;
     }
@@ -155,7 +144,6 @@ export class HuiEnergySankeyCardEditor
       case "layout":
       case "group_by_floor":
       case "group_by_area":
-      case "max_devices":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.energy-sankey.${schema.name}`
         );

src/resources/mqtt-logo-svg.ts

@@ -1,2 +0,0 @@
-export const mdiMqttLogo =
-  "M1.68,0.5325c-0.63,0-1.1475,0.51-1.1475,1.1475v1.125c11.445,0.0675,20.745,9.3,20.82,20.67h0.975c0.63,0,1.1475-0.51,1.1475-1.1475V14.5125C20.8575,8.04,15.5475,2.9175,8.925,0.5325H1.68z M0.5325,6.3075v3.735c7.425,0.0675,13.455,6.0525,13.53,13.4325h3.8775C17.865,13.995,10.0875,6.315,0.5325,6.3075z M0.5325,13.545v8.7825c0,0.63,0.51,1.1475,1.1475,1.1475H10.65C10.575,17.985,6.0675,13.5525,0.5325,13.545z M16.53,0.5325c1.35,0.945,2.715,2.01,3.915,3.2025c1.0875,1.08,2.145,2.3775,3.03,3.585V1.68c0-0.63-0.51-1.1475-1.1475-1.1475H16.53z";

src/translations/en.json

@@ -1608,7 +1608,6 @@
             "labs": "[%key:ui::panel::config::labs::caption%]",
             "tools": "[%key:ui::panel::config::dashboard::tools::main%]",
             "matter": "[%key:ui::panel::config::dashboard::matter::main%]",
-            "mqtt": "[%key:ui::panel::config::dashboard::mqtt::main%]",
             "zha": "[%key:ui::panel::config::dashboard::zha::main%]",
             "zwave_js": "[%key:ui::panel::config::dashboard::zwave_js::main%]",
             "thread": "[%key:ui::panel::config::dashboard::thread::main%]",
@@ -2737,10 +2736,6 @@
             "main": "Matter",
             "secondary": "Cross-vendor smart home standard"
           },
-          "mqtt": {
-            "main": "MQTT",
-            "secondary": "Lightweight network protocol designed for IoT devices"
-          },
           "thread": {
             "main": "Thread",
             "secondary": "Mesh network often used for Matter devices"
@@ -7046,8 +7041,6 @@
             "confirm_delete_user_text": "The user account for ''{name}'' will be permanently deleted. You can still track the user, but the person will no longer be able to log in.",
             "allow_login": "Allow login",
             "allow_login_description": "Allow access using username and password.",
-            "select_user": "Select user account",
-            "create_new_user": "Create a new username",
             "username": "[%key:ui::panel::config::users::editor::username%]",
             "password": "[%key:ui::panel::config::users::editor::password%]",
             "admin": "[%key:ui::panel::config::users::editor::admin%]",
@@ -7405,16 +7398,8 @@
         },
         "mqtt": {
           "title": "MQTT",
-          "option_flow": "MQTT options",
-          "option_flow_description": "Set discovery options",
-          "config_flow": "Connection",
-          "config_flow_description": "Broker connection settings",
-          "status_online": "Online",
-          "status_offline": "Offline",
-          "my_network_title": "My network",
-          "devices": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
-          "device_count": "{count, plural,\n  one {# device}\n  other {# devices}\n}",
-          "entity_count": "{count, plural,\n  one {# entity}\n  other {# entities}\n}",
+          "settings_title": "MQTT settings",
+          "option_flow": "Configure MQTT options",
           "description_publish": "Publish a packet",
           "topic": "Topic",
           "payload": "Payload (template allowed)",
@@ -10007,8 +9992,6 @@
               "description": "This card shows the distribution of energy in your home on a Sankey graph.",
               "group_by_floor": "Group by floor",
               "group_by_area": "Group by area",
-              "max_devices": "Maximum devices per parent",
-              "max_devices_description": "Devices beyond this limit are grouped into an \"Other\" node, smallest first. The limit applies per upstream device, not per floor or area. Defaults to 20.",
               "layout": "Graph direction",
               "layout_directions": {
                 "auto": "Automatic",

test/data/zwave_js.test.ts

@@ -1,63 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { getNodeIdFromDevice } from "../../src/data/zwave_js";
-import type { DeviceRegistryEntry } from "../../src/data/device/device_registry";
-
-const mockDevice = (identifiers: [string, string][]) =>
-  ({ identifiers }) as DeviceRegistryEntry;
-
-describe("getNodeIdFromDevice", () => {
-  it("reads the node ID from the identifier", () => {
-    expect(
-      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-25"]]))
-    ).toBe(25);
-  });
-
-  it("reads the node ID from the extended identifier", () => {
-    expect(
-      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-25-798:5:20"]]))
-    ).toBe(25);
-  });
-
-  it("returns multi-digit node IDs in full", () => {
-    expect(
-      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787-108"]]))
-    ).toBe(108);
-  });
-
-  it("ignores provisioning entries, whose DSK blocks parse as numbers", () => {
-    expect(
-      getNodeIdFromDevice(
-        mockDevice([
-          [
-            "zwave_js",
-            "provision_50285-00042-09924-30691-15973-33711-04005-03623",
-          ],
-        ])
-      )
-    ).toBeUndefined();
-  });
-
-  it("ignores identifiers of other integrations", () => {
-    expect(
-      getNodeIdFromDevice(mockDevice([["mqtt", "3245146787-25"]]))
-    ).toBeUndefined();
-  });
-
-  it("picks the Z-Wave identifier when a device has several", () => {
-    expect(
-      getNodeIdFromDevice(
-        mockDevice([
-          ["matter", "some-other-id"],
-          ["zwave_js", "3245146787-14"],
-        ])
-      )
-    ).toBe(14);
-  });
-
-  it("returns undefined when there is no node ID", () => {
-    expect(getNodeIdFromDevice(mockDevice([]))).toBeUndefined();
-    expect(
-      getNodeIdFromDevice(mockDevice([["zwave_js", "3245146787"]]))
-    ).toBeUndefined();
-  });
-});

test/e2e/app.spec.ts

@@ -279,85 +279,6 @@ test.describe("Lovelace dashboard", () => {
   });
 });
 
-test.describe("Energy dashboard", () => {
-  test("returns to Energy after repeatedly opening the device dialog", async ({
-    page,
-  }) => {
-    const errors = trackPageErrors(page);
-    await goToPanel(
-      page,
-      "/?historyBack=1&backPath=%2Flovelace#/energy/overview"
-    );
-    const energyRoot = page.locator("ha-panel-energy hui-root");
-    await expect(energyRoot).toBeAttached({ timeout: PANEL_TIMEOUT });
-
-    const editDashboard = energyRoot.getByRole("button", {
-      name: /^Edit dashboard\b/,
-    });
-    const dashboardMenu = energyRoot.getByRole("button", {
-      name: "Open dashboard menu",
-    });
-    await expect(editDashboard.or(dashboardMenu)).toBeVisible({
-      timeout: QUICK_TIMEOUT,
-    });
-    if (await editDashboard.isVisible()) {
-      await editDashboard.click();
-    } else {
-      await dashboardMenu.click();
-      await page.getByRole("menuitem", { name: /^Edit dashboard\b/ }).click();
-    }
-
-    await expect(page.locator("ha-config-energy")).toBeAttached({
-      timeout: PANEL_TIMEOUT,
-    });
-
-    const backLink = page
-      .locator("ha-config-energy hass-tabs-subpage")
-      .getByRole("link", { name: "Back" });
-    await expect(backLink).toHaveAttribute(
-      "href",
-      "/config/lovelace/dashboards"
-    );
-
-    const addDevice = page
-      .locator("ha-energy-device-settings")
-      .locator("ha-button")
-      .first();
-    const openAndCancelDeviceDialog = async () => {
-      await addDevice.click();
-      const dialog = page.locator("dialog-energy-device-settings");
-      const cancel = dialog.locator("ha-dialog-footer ha-button").first();
-      await expect(cancel).toBeVisible({ timeout: QUICK_TIMEOUT });
-      await cancel.click();
-      await expect(cancel).toBeHidden({ timeout: QUICK_TIMEOUT });
-    };
-    await openAndCancelDeviceDialog();
-    await openAndCancelDeviceDialog();
-    await openAndCancelDeviceDialog();
-
-    await backLink.click();
-
-    await expect
-      .poll(
-        () =>
-          page.evaluate(() => ({
-            hash: window.location.hash,
-            search: window.location.search,
-          })),
-        { timeout: PANEL_TIMEOUT }
-      )
-      .toEqual({
-        hash: "#/energy/overview",
-        search: "?historyBack=1&backPath=%2Flovelace",
-      });
-    await expect(page.locator("ha-panel-energy")).toBeAttached();
-    await expect(
-      energyRoot.getByRole("link", { name: "Back" })
-    ).toHaveAttribute("href", "/lovelace");
-    expectNoPageErrors(errors);
-  });
-});
-
 // ---------------------------------------------------------------------------
 // More-info dialog (light)
 // ---------------------------------------------------------------------------

test/e2e/app/public/sw-modern.js

@@ -1,2 +0,0 @@
-// HomeAssistantAppEl registers this path; keep it inert in E2E tests.
-void 0;

test/e2e/app/src/entrypoint.ts

@@ -1,2 +1 @@
-import "../../../../src/resources/append-ha-style";
 import "./ha-test";

test/e2e/app/src/ha-test.ts

@@ -247,12 +247,16 @@ export class HaTest extends HomeAssistantAppEl {
     window.__mockHass = hass;
 
     // SPA navigation
-    window.addEventListener("click", (e) => {
-      const href = isNavigationClick(e);
-      if (href) {
+    document.body.addEventListener(
+      "click",
+      (e) => {
+        const href = isNavigationClick(e);
+        if (!href) return;
+        e.preventDefault();
         navigate(href);
-      }
-    });
+      },
+      { capture: true }
+    );
 
     this.hassConnected();
   }

test/panels/lovelace/cards/energy/common/sankey.test.ts

@@ -6,8 +6,6 @@ import type {
 import {
   buildSankeyDeviceNodes,
   buildSankeyLayout,
-  DEFAULT_MAX_SANKEY_DEVICES,
-  findDevicesOverCap,
   getSankeyDeviceSections,
   groupSankeyDevicesByFloorAndArea,
 } from "../../../../../../src/panels/lovelace/cards/energy/common/sankey";
@@ -83,86 +81,6 @@ describe("getSankeyDeviceSections", () => {
   });
 });
 
-describe("findDevicesOverCap", () => {
-  // Values keyed by node id, hierarchy by included_in_stat.
-  const overCapOpts = (
-    values: Record<string, number>,
-    parents: Record<string, string>,
-    // No default: passing `undefined` must mean "no cap", not "fall back to 3".
-    maxDevices: number | undefined,
-    rendered = Object.keys(values)
-  ) => {
-    const list: DeviceConsumptionEnergyPreference[] = Object.keys(values).map(
-      (id) => ({ stat_consumption: id, included_in_stat: parents[id] })
-    );
-    const renderedIds = new Set(rendered);
-    return {
-      devices: list,
-      maxDevices,
-      rootNodeId: "home",
-      renderedIds,
-      deviceValues: new Map(Object.entries(values)),
-      getId: (device: DeviceConsumptionEnergyPreference) =>
-        device.stat_consumption,
-      getEffectiveParent: (device: DeviceConsumptionEnergyPreference) => {
-        let current = device.included_in_stat;
-        for (let hops = 0; current && hops < list.length; hops++) {
-          if (renderedIds.has(current)) {
-            return current;
-          }
-          current = parents[current];
-        }
-        return undefined;
-      },
-    };
-  };
-
-  it.each([undefined, 0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
-    "groups nothing for a cap of %s",
-    (maxDevices) => {
-      expect(
-        findDevicesOverCap(
-          overCapOpts({ a: 5, b: 4, c: 3, d: 2 }, {}, maxDevices)
-        )
-      ).toEqual(new Set());
-    }
-  );
-
-  it("groups the smallest children of an over-cap parent", () => {
-    expect(
-      findDevicesOverCap(overCapOpts({ a: 5, b: 4, c: 3, d: 2, e: 1 }, {}, 3))
-    ).toEqual(new Set(["d", "e"]));
-  });
-
-  it("groups a whole subtree, not just the parent", () => {
-    expect(
-      findDevicesOverCap(
-        overCapOpts(
-          { a: 50, b: 40, c: 30, small: 10, child: 9 },
-          { child: "small" },
-          3
-        )
-      )
-    ).toEqual(new Set(["small", "child", "c"]));
-  });
-
-  it("counts only rendered devices", () => {
-    // four devices, three rendered, so a cap of three does not fire
-    expect(
-      findDevicesOverCap(
-        overCapOpts({ a: 5, b: 4, c: 3, tiny: 0.001 }, {}, 3, ["a", "b", "c"])
-      )
-    ).toEqual(new Set());
-  });
-
-  it("terminates on a cyclic parent chain", () => {
-    // both devices parent each other, so neither is reachable from the root
-    expect(
-      findDevicesOverCap(overCapOpts({ a: 5, b: 4 }, { a: "b", b: "a" }, 1))
-    ).toEqual(new Set());
-  });
-});
-
 describe("buildSankeyDeviceNodes", () => {
   it("renders top-level devices and subtracts them from untracked", () => {
     const result = buildSankeyDeviceNodes(
@@ -505,385 +423,6 @@ describe("buildSankeyDeviceNodes", () => {
     expect(result.deviceNodes).toEqual([]);
     expect(result.untrackedConsumption).toBe(10);
   });
-
-  describe("device count cap", () => {
-    // Five devices all comfortably above minThreshold, so only the count cap
-    // can group any of them.
-    const fiveDevices = () =>
-      devices(
-        { stat_consumption: "a" },
-        { stat_consumption: "b" },
-        { stat_consumption: "c" },
-        { stat_consumption: "d" },
-        { stat_consumption: "e" }
-      );
-    const fiveValues = { a: 50, b: 40, c: 30, d: 20, e: 10 };
-
-    const namedIds = (result: { deviceNodes: SankeyDeviceNode[] }) =>
-      result.deviceNodes
-        .filter(
-          (n) => !n.id.startsWith("other_") && !n.id.startsWith("untracked_")
-        )
-        .map((n) => n.id);
-
-    it("does not group anything when maxDevices is unset", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: fiveDevices(),
-          values: fiveValues,
-          initialUntracked: 150,
-        })
-      );
-      expect(namedIds(result)).toEqual(["a", "b", "c", "d", "e"]);
-      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
-        false
-      );
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("does nothing at exactly the cap", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "a" },
-            { stat_consumption: "b" },
-            { stat_consumption: "c" }
-          ),
-          values: { a: 50, b: 40, c: 30 },
-          maxDevices: 3,
-          initialUntracked: 120,
-        })
-      );
-      expect(namedIds(result)).toEqual(["a", "b", "c"]);
-      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
-        false
-      );
-    });
-
-    it("groups the smallest above the cap, keeping the cap many by name", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: fiveDevices(),
-          values: fiveValues,
-          maxDevices: 3,
-          initialUntracked: 150,
-        })
-      );
-      // the cap budgets named devices; Other is overhead on top
-      expect(namedIds(result)).toEqual(["a", "b", "c"]);
-      const other = result.deviceNodes.find((n) => n.id === "other_home");
-      expect(other?.value).toBeCloseTo(30, 10);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("never demotes exactly one device, which would render it by name", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "a" },
-            { stat_consumption: "b" },
-            { stat_consumption: "c" },
-            { stat_consumption: "d" }
-          ),
-          values: { a: 40, b: 30, c: 20, d: 10 },
-          maxDevices: 3,
-          initialUntracked: 100,
-        })
-      );
-      expect(namedIds(result)).toEqual(["a", "b"]);
-      const other = result.deviceNodes.find((n) => n.id === "other_home");
-      expect(other?.value).toBeCloseTo(30, 10);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("demotes a whole subtree so children never re-parent or double count", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "g" },
-            { stat_consumption: "a", included_in_stat: "g" },
-            { stat_consumption: "c", included_in_stat: "a" },
-            { stat_consumption: "b1", included_in_stat: "g" },
-            { stat_consumption: "b2", included_in_stat: "g" },
-            { stat_consumption: "b3", included_in_stat: "g" },
-            { stat_consumption: "b4", included_in_stat: "g" }
-          ),
-          values: { g: 100, a: 10, c: 9, b1: 30, b2: 25, b3: 20, b4: 8 },
-          maxDevices: 3,
-          initialUntracked: 100,
-        })
-      );
-      expect(result.deviceNodes.map((n) => n.id)).toEqual([
-        "g",
-        "b1",
-        "b2",
-        "b3",
-        "other_g",
-        "untracked_g",
-      ]);
-      // a's value already contains c, so Other is 10 + 8 and not 27
-      const other = result.deviceNodes.find((n) => n.id === "other_g");
-      expect(other?.value).toBeCloseTo(18, 10);
-      expect(result.deviceNodes.some((n) => n.id === "c")).toBe(false);
-      const untracked = result.deviceNodes.find((n) => n.id === "untracked_g");
-      expect(untracked?.value).toBeCloseTo(7, 10);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("ranks by raw value, so a parent is never demoted before its own child", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "d" },
-            { stat_consumption: "e", included_in_stat: "d" },
-            { stat_consumption: "f" },
-            { stat_consumption: "h" },
-            { stat_consumption: "i" }
-          ),
-          values: { d: 50, e: 45, f: 10, h: 40, i: 30 },
-          maxDevices: 3,
-          initialUntracked: 130,
-        })
-      );
-      // Ranking on value-excluding-children would demote d (50 - 45 = 5) while
-      // keeping e, counting e both on its own and inside d's rolled-up value.
-      expect(result.deviceNodes.map((n) => n.id)).toEqual([
-        "d",
-        "e",
-        "h",
-        "other_home",
-        "untracked_d",
-      ]);
-      expect(result.parentLinks.e).toBe("d");
-      const other = result.deviceNodes.find((n) => n.id === "other_home");
-      expect(other?.value).toBeCloseTo(40, 10);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("applies the cap per parent and links Other to that parent", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "p" },
-            { stat_consumption: "c1", included_in_stat: "p" },
-            { stat_consumption: "c2", included_in_stat: "p" },
-            { stat_consumption: "c3", included_in_stat: "p" },
-            { stat_consumption: "c4", included_in_stat: "p" },
-            { stat_consumption: "c5", included_in_stat: "p" },
-            { stat_consumption: "r1" },
-            { stat_consumption: "r2" }
-          ),
-          values: {
-            p: 100,
-            c1: 30,
-            c2: 25,
-            c3: 20,
-            c4: 15,
-            c5: 10,
-            r1: 50,
-            r2: 40,
-          },
-          maxDevices: 3,
-          initialUntracked: 190,
-        })
-      );
-      // p is over the cap; the three root-level nodes are exactly at it
-      expect(namedIds(result)).toEqual(["p", "c1", "c2", "c3", "r1", "r2"]);
-      const other = result.deviceNodes.find((n) => n.id === "other_p");
-      expect(other?.value).toBeCloseTo(25, 10);
-      expect(result.parentLinks.other_p).toBe("p");
-      expect(result.links).toContainEqual({ source: "p", target: "other_p" });
-      expect(result.deviceNodes.some((n) => n.id === "other_home")).toBe(false);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("counts only rendered children, not ones already below the threshold", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "p" },
-            { stat_consumption: "c1", included_in_stat: "p" },
-            { stat_consumption: "c2", included_in_stat: "p" },
-            { stat_consumption: "c3", included_in_stat: "p" },
-            { stat_consumption: "s1", included_in_stat: "p" },
-            { stat_consumption: "s2", included_in_stat: "p" },
-            { stat_consumption: "s3", included_in_stat: "p" }
-          ),
-          values: {
-            p: 100,
-            c1: 30,
-            c2: 25,
-            c3: 20,
-            s1: 0.001,
-            s2: 0.002,
-            s3: 0.003,
-          },
-          maxDevices: 3,
-          initialUntracked: 100,
-        })
-      );
-      // three rendered children is at the cap, so no demotion happens
-      expect(namedIds(result)).toEqual(["p", "c1", "c2", "c3"]);
-      const other = result.deviceNodes.find((n) => n.id === "other_p");
-      expect(other?.value).toBeCloseTo(0.006, 10);
-    });
-
-    it("terminates on a cyclic included_in_stat and leaves it unchanged", () => {
-      const cyclic = () =>
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "a", included_in_stat: "b" },
-            { stat_consumption: "b", included_in_stat: "a" }
-          ),
-          values: { a: 5, b: 4 },
-          initialUntracked: 10,
-        });
-      // A cycle member always has a rendered parent inside the cycle, so it is
-      // never reachable from the root and the cap cannot touch it.
-      expect(
-        buildSankeyDeviceNodes({ ...cyclic(), maxDevices: 1 })
-      ).toStrictEqual(buildSankeyDeviceNodes(cyclic()));
-    });
-
-    it("treats a zero or non-finite cap as no cap", () => {
-      [0, Number.NaN, Number.POSITIVE_INFINITY].forEach((maxDevices) => {
-        const result = buildSankeyDeviceNodes(
-          cumulativeOpts({
-            devices: fiveDevices(),
-            values: fiveValues,
-            maxDevices,
-            initialUntracked: 150,
-          })
-        );
-        expect(namedIds(result)).toEqual(["a", "b", "c", "d", "e"]);
-      });
-    });
-
-    it("does not count devices without a node id (instantaneous cards)", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: devices(
-            { stat_consumption: "a", stat_rate: "ra" },
-            { stat_consumption: "b", stat_rate: "rb" },
-            { stat_consumption: "c", stat_rate: "rc" },
-            { stat_consumption: "d" }
-          ),
-          values: { ra: 30, rb: 25, rc: 20 },
-          getId: (device) => device.stat_rate,
-          maxDevices: 3,
-          initialUntracked: 75,
-        })
-      );
-      // d has no stat_rate, so the three rendered nodes are at the cap
-      expect(namedIds(result)).toEqual(["ra", "rb", "rc"]);
-      expect(result.deviceNodes.some((n) => n.id.startsWith("other_"))).toBe(
-        false
-      );
-    });
-
-    it("ceils the capped Other value but still subtracts the raw total", () => {
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: fiveDevices(),
-          values: { ...fiveValues, e: 10.5 },
-          maxDevices: 3,
-          ceilOtherValue: true,
-          initialUntracked: 150.5,
-        })
-      );
-      const other = result.deviceNodes.find((n) => n.id === "other_home");
-      expect(other?.value).toBe(31);
-      expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-    });
-
-    it("breaks value ties on declaration order, stably across runs", () => {
-      const opts = () =>
-        cumulativeOpts({
-          devices: fiveDevices(),
-          values: { a: 50, b: 20, c: 20, d: 20, e: 10 },
-          maxDevices: 3,
-          initialUntracked: 120,
-        });
-      expect(namedIds(buildSankeyDeviceNodes(opts()))).toEqual(["a", "c", "d"]);
-      expect(namedIds(buildSankeyDeviceNodes(opts()))).toEqual(["a", "c", "d"]);
-    });
-
-    // The documented promise is "more than 20 devices start grouping", so pin
-    // the boundary against the real default rather than a test-local cap.
-    it.each([
-      [DEFAULT_MAX_SANKEY_DEVICES, DEFAULT_MAX_SANKEY_DEVICES, false],
-      // one over the cap still demotes two, because a lone demoted device would
-      // be rendered by name and void the cap
-      [DEFAULT_MAX_SANKEY_DEVICES + 1, DEFAULT_MAX_SANKEY_DEVICES - 1, true],
-      [DEFAULT_MAX_SANKEY_DEVICES + 2, DEFAULT_MAX_SANKEY_DEVICES, true],
-      [DEFAULT_MAX_SANKEY_DEVICES + 12, DEFAULT_MAX_SANKEY_DEVICES, true],
-    ])(
-      "with %i devices at the default cap renders %i named nodes (grouped: %s)",
-      (deviceCount, expectedNamed, expectOther) => {
-        const list = Array.from({ length: deviceCount }, (_, i) => ({
-          stat_consumption: `d${i}`,
-        }));
-        const values = Object.fromEntries(
-          list.map((d, i) => [d.stat_consumption, 10 + i])
-        );
-        const total = Object.values(values).reduce((s, v) => s + v, 0);
-        const result = buildSankeyDeviceNodes(
-          cumulativeOpts({
-            devices: list,
-            values,
-            maxDevices: DEFAULT_MAX_SANKEY_DEVICES,
-            initialUntracked: total,
-          })
-        );
-        expect(namedIds(result)).toHaveLength(expectedNamed);
-        expect(result.deviceNodes.some((n) => n.id === "other_home")).toBe(
-          expectOther
-        );
-        // grouping never changes the total that comes off the root
-        expect(result.untrackedConsumption).toBeCloseTo(0, 10);
-      }
-    );
-
-    it("keeps 32 circuit clamps readable at the default cap", () => {
-      const clamps = Array.from({ length: 32 }, (_, i) => ({
-        stat_consumption: `clamp_${i}`,
-      }));
-      const values = Object.fromEntries(
-        clamps.map((clamp, i) => [clamp.stat_consumption, 20 + i])
-      );
-      const result = buildSankeyDeviceNodes(
-        cumulativeOpts({
-          devices: clamps,
-          values,
-          maxDevices: DEFAULT_MAX_SANKEY_DEVICES,
-          initialUntracked: 1200,
-        })
-      );
-      expect(namedIds(result)).toHaveLength(DEFAULT_MAX_SANKEY_DEVICES);
-      expect(result.deviceNodes).toHaveLength(DEFAULT_MAX_SANKEY_DEVICES + 1);
-      // the 12 smallest clamps, values 20 through 31
-      const other = result.deviceNodes.find((n) => n.id === "other_home");
-      expect(other?.value).toBeCloseTo(306, 10);
-
-      // flow conservation: every device node plus untracked accounts for home
-      const { nodes } = buildSankeyLayout({
-        hass: createMockHass(),
-        computedStyle,
-        localize: mockLocalize,
-        deviceNodes: result.deviceNodes,
-        parentLinks: result.parentLinks,
-        rootNodeId: "home",
-        groupByFloor: false,
-        groupByArea: false,
-        untrackedConsumption: result.untrackedConsumption,
-        untrackedFloor: 0,
-      });
-      const deviceTotal = nodes
-        .filter((n) => n.index === 4)
-        .reduce((sum, n) => sum + n.value, 0);
-      expect(deviceTotal).toBeCloseTo(1200, 10);
-    });
-  });
 });
 
 describe("groupSankeyDevicesByFloorAndArea", () => {

test/panels/lovelace/common/load-resources.test.ts

@@ -1,58 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { loadJS, loadModule } from "../../../../src/common/dom/load_resource";
-import { loadLovelaceResourcesAndWait } from "../../../../src/panels/lovelace/common/load-resources";
-import type { HomeAssistant } from "../../../../src/types";
-
-vi.mock("../../../../src/common/dom/load_resource", () => ({
-  loadCSS: vi.fn(),
-  loadJS: vi.fn(),
-  loadModule: vi.fn(),
-}));
-
-const hass = {
-  auth: { data: { hassUrl: "http://localhost:8123" } },
-} as unknown as HomeAssistant;
-
-describe("loadLovelaceResourcesAndWait", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("logs an error naming the resource that failed to load", async () => {
-    const consoleError = vi
-      .spyOn(console, "error")
-      .mockImplementation(() => undefined);
-    const loadError = new Error("load failed");
-    vi.mocked(loadModule).mockImplementation(() => Promise.reject(loadError));
-
-    await loadLovelaceResourcesAndWait(
-      [{ id: "1", url: "/local/missing.js", type: "module" }],
-      hass
-    );
-
-    expect(consoleError).toHaveBeenCalledTimes(1);
-    expect(consoleError.mock.calls[0][0]).toContain(
-      "http://localhost:8123/local/missing.js"
-    );
-    expect(consoleError.mock.calls[0][0]).toContain("module");
-    // the rejection reason is forwarded, so any detail it carries is not lost
-    expect(consoleError.mock.calls[0][1]).toBe(loadError);
-  });
-
-  it("logs only once for a cached resource that failed to load", async () => {
-    const consoleError = vi
-      .spyOn(console, "error")
-      .mockImplementation(() => undefined);
-    vi.mocked(loadJS).mockImplementation((url) => Promise.reject(url));
-    const resources = [
-      { id: "2", url: "/local/broken.js", type: "js" as const },
-    ];
-
-    await loadLovelaceResourcesAndWait(resources, hass);
-    await loadLovelaceResourcesAndWait(resources, hass);
-
-    expect(loadJS).toHaveBeenCalledTimes(1);
-    expect(consoleError).toHaveBeenCalledTimes(1);
-  });
-});