remove unused code

.github/workflows/release.yaml

@@ -19,11 +19,8 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
-    environment: pypi
     permissions:
       contents: write # Required to upload release assets
-      id-token: write # For "Trusted Publisher" to PyPi
-    if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
@@ -49,18 +46,14 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
       - name: Build and release package
         run: |
-          python3 -m pip install build
+          python3 -m pip install twine build
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
-      - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
-        with:
-          skip-existing: true
-
       - name: Upload release assets
         uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:

package.json

@@ -34,7 +34,7 @@
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.6",
+    "@codemirror/view": "6.38.5",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.2",
@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.6.ha.5",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.4",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -153,11 +153,11 @@
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
     "@bundle-stats/plugin-webpack-filter": "4.21.5",
-    "@lokalise/node-api": "15.3.1",
+    "@lokalise/node-api": "15.3.0",
     "@octokit/auth-oauth-device": "8.0.2",
     "@octokit/plugin-retry": "8.0.2",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.3",
+    "@rsdoctor/rspack-plugin": "1.3.2",
     "@rspack/core": "1.5.8",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -217,7 +217,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.1",
+    "typescript-eslint": "8.46.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",

script/release

@@ -1,4 +1,5 @@
 #!/bin/sh
+# Pushes a new version to PyPi.
 
 # Stop on errors
 set -e
@@ -11,4 +12,5 @@ yarn install
 script/build_frontend
 
 rm -rf dist home_assistant_frontend.egg-info
-python3 -m build -q
+python3 -m build
+python3 -m twine upload dist/*.whl --skip-existing

src/components/buttons/ha-call-service-button.ts

@@ -6,7 +6,6 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { Appearance } from "../ha-button";
 
 @customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
@@ -26,14 +25,12 @@ class HaCallServiceButton extends LitElement {
 
   @property() public confirmation?;
 
-  @property() public appearance: Appearance = "plain";
-
   public render(): TemplateResult {
     return html`
       <ha-progress-button
         .progress=${this.progress}
         .disabled=${this.disabled}
-        .appearance=${this.appearance}
+        appearance="plain"
         @click=${this._buttonTapped}
         tabindex="0"
       >

src/components/data-table/dialog-data-table-settings.ts

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -129,7 +129,7 @@ export class DialogDataTableSettings extends LitElement {
                   ${canMove && isVisible
                     ? html`<ha-svg-icon
                         class="handle"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                         slot="graphic"
                       ></ha-svg-icon>`
                     : nothing}

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

@@ -1,13 +1,13 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDrag } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -118,7 +118,7 @@ class HaEntitiesPicker extends LitElement {
                   ? html`
                       <ha-svg-icon
                         class="entity-handle"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                       ></ha-svg-icon>
                     `
                   : nothing}

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

@@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
@@ -25,7 +25,6 @@ import "../ha-sortable";
 interface EntityNameOption {
   primary: string;
   secondary?: string;
-  field_label: string;
   value: string;
 }
 
@@ -42,23 +41,6 @@ const KNOWN_TYPES = new Set(["entity", "device", "area", "floor"]);
 
 const UNIQUE_TYPES = new Set(["entity", "device", "area", "floor"]);
 
-const formatOptionValue = (item: EntityNameItem) => {
-  if (item.type === "text" && item.text) {
-    return item.text;
-  }
-  return `___${item.type}___`;
-};
-
-const parseOptionValue = (value: string): EntityNameItem => {
-  if (value.startsWith("___") && value.endsWith("___")) {
-    const type = value.slice(3, -3);
-    if (KNOWN_TYPES.has(type)) {
-      return { type: type as EntityNameType };
-    }
-  }
-  return { type: "text", text: value };
-};
-
 @customElement("ha-entity-name-picker")
 export class HaEntityNamePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -86,8 +68,8 @@ export class HaEntityNamePicker extends LitElement {
 
   private _editIndex?: number;
 
-  private _validTypes = memoizeOne((entityId?: string) => {
-    const options = new Set<string>(["text"]);
+  private _validOptions = memoizeOne((entityId?: string) => {
+    const options = new Set<string>();
     if (!entityId) {
       return options;
     }
@@ -119,43 +101,33 @@ export class HaEntityNamePicker extends LitElement {
       return [];
     }
 
-    const types = this._validTypes(entityId);
+    const options = this._validOptions(entityId);
 
     const items = (
       ["entity", "device", "area", "floor"] as const
     ).map<EntityNameOption>((name) => {
       const stateObj = this.hass.states[entityId];
-      const isValid = types.has(name);
+      const isValid = options.has(name);
       const primary = this.hass.localize(
         `ui.components.entity.entity-name-picker.types.${name}`
       );
       const secondary =
-        (stateObj && isValid
+        stateObj && isValid
           ? this.hass.formatEntityName(stateObj, { type: name })
           : this.hass.localize(
               `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
-            )) || "-";
+            ) || "-";
 
       return {
         primary,
         secondary,
-        field_label: primary,
-        value: formatOptionValue({ type: name }),
+        value: name,
       };
     });
 
     return items;
   });
 
-  private _customNameOption = memoizeOne((text: string) => ({
-    primary: this.hass.localize(
-      "ui.components.entity.entity-name-picker.custom_name"
-    ),
-    secondary: `"${text}"`,
-    field_label: text,
-    value: formatOptionValue({ type: "text", text }),
-  }));
-
   private _formatItem = (item: EntityNameItem) => {
     if (item.type === "text") {
       return `"${item.text}"`;
@@ -169,9 +141,9 @@ export class HaEntityNamePicker extends LitElement {
   };
 
   protected render() {
-    const value = this._items;
+    const value = this._value;
     const options = this._getOptions(this.entityId);
-    const validTypes = this._validTypes(this.entityId);
+    const validOptions = this._validOptions(this.entityId);
 
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -185,11 +157,12 @@ export class HaEntityNamePicker extends LitElement {
         >
           <ha-chip-set>
             ${repeat(
-              this._items,
+              this._value,
               (item) => item,
               (item: EntityNameItem, idx) => {
                 const label = this._formatItem(item);
-                const isValid = validTypes.has(item.type);
+                const isValid =
+                  item.type === "text" || validOptions.has(item.type);
                 return html`
                   <ha-input-chip
                     data-idx=${idx}
@@ -200,10 +173,7 @@ export class HaEntityNamePicker extends LitElement {
                     .disabled=${this.disabled}
                     class=${!isValid ? "invalid" : ""}
                   >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
+                    <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
                     <span>${label}</span>
                   </ha-input-chip>
                 `;
@@ -237,14 +207,14 @@ export class HaEntityNamePicker extends LitElement {
             .hass=${this.hass}
             .value=${""}
             .autofocus=${this.autofocus}
-            .disabled=${this.disabled}
+            .disabled=${this.disabled || !this.entityId}
             .required=${this.required && !value.length}
             .helper=${this.helper}
             .items=${options}
             allow-custom-value
             item-id-path="value"
             item-value-path="value"
-            item-label-path="field_label"
+            item-label-path="primary"
             .renderer=${rowRenderer}
             @opened-changed=${this._openedChanged}
             @value-changed=${this._comboBoxValueChanged}
@@ -284,16 +254,13 @@ export class HaEntityNamePicker extends LitElement {
     this._opened = true;
   }
 
-  private get _items(): EntityNameItem[] {
+  private get _value(): EntityNameItem[] {
     return this._toItems(this.value);
   }
 
   private _toItems = memoizeOne((value?: typeof this.value) => {
     if (typeof value === "string") {
-      if (value === "") {
-        return [];
-      }
-      return [{ type: "text", text: value } satisfies EntityNameItem];
+      return [{ type: "text", text: value } as const];
     }
     return value ? ensureArray(value) : [];
   });
@@ -301,7 +268,7 @@ export class HaEntityNamePicker extends LitElement {
   private _toValue = memoizeOne(
     (items: EntityNameItem[]): typeof this.value => {
       if (items.length === 0) {
-        return "";
+        return [];
       }
       if (items.length === 1) {
         const item = items[0];
@@ -317,21 +284,20 @@ export class HaEntityNamePicker extends LitElement {
       const options = this._comboBox.items || [];
 
       const initialItem =
-        this._editIndex != null ? this._items[this._editIndex] : undefined;
+        this._editIndex != null ? this._value[this._editIndex] : undefined;
 
-      const initialValue = initialItem ? formatOptionValue(initialItem) : "";
+      const initialValue = initialItem
+        ? initialItem.type === "text"
+          ? initialItem.text
+          : initialItem.type
+        : "";
 
       const filteredItems = this._filterSelectedOptions(options, initialValue);
 
-      if (initialItem?.type === "text" && initialItem.text) {
-        filteredItems.push(this._customNameOption(initialItem.text));
-      }
-
       this._comboBox.filteredItems = filteredItems;
       this._comboBox.setInputValue(initialValue);
     } else {
       this._opened = false;
-      this._comboBox.setInputValue("");
     }
   }
 
@@ -339,16 +305,15 @@ export class HaEntityNamePicker extends LitElement {
     options: EntityNameOption[],
     current?: string
   ) => {
-    const items = this._items;
+    const value = this._value;
 
-    const excludedValues = new Set(
-      items
-        .filter((item) => UNIQUE_TYPES.has(item.type))
-        .map((item) => formatOptionValue(item))
-    );
+    const types = value.map((item) => item.type) as string[];
 
     const filteredOptions = options.filter(
-      (option) => !excludedValues.has(option.value) || option.value === current
+      (option) =>
+        !UNIQUE_TYPES.has(option.value) ||
+        !types.includes(option.value) ||
+        option.value === current
     );
     return filteredOptions;
   };
@@ -359,14 +324,20 @@ export class HaEntityNamePicker extends LitElement {
     const options = this._comboBox.items || [];
 
     const currentItem =
-      this._editIndex != null ? this._items[this._editIndex] : undefined;
+      this._editIndex != null ? this._value[this._editIndex] : undefined;
 
-    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
+    const currentValue = currentItem
+      ? currentItem.type === "text"
+        ? currentItem.text
+        : currentItem.type
+      : "";
 
-    let filteredItems = this._filterSelectedOptions(options, currentValue);
+    this._comboBox.filteredItems = this._filterSelectedOptions(
+      options,
+      currentValue
+    );
 
     if (!filter) {
-      this._comboBox.filteredItems = filteredItems;
       return;
     }
 
@@ -378,16 +349,16 @@ export class HaEntityNamePicker extends LitElement {
       ignoreDiacritics: true,
     };
 
-    const fuse = new Fuse(filteredItems, fuseOptions);
-    filteredItems = fuse.search(filter).map((result) => result.item);
-    filteredItems.push(this._customNameOption(input));
+    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
+    const filteredItems = fuse.search(filter).map((result) => result.item);
+
     this._comboBox.filteredItems = filteredItems;
   }
 
   private async _moveItem(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
-    const value = this._items;
+    const value = this._value;
     const newValue = value.concat();
     const element = newValue.splice(oldIndex, 1)[0];
     newValue.splice(newIndex, 0, element);
@@ -398,7 +369,7 @@ export class HaEntityNamePicker extends LitElement {
 
   private async _removeItem(ev) {
     ev.stopPropagation();
-    const value = [...this._items];
+    const value = [...this._value];
     const idx = parseInt(ev.target.dataset.idx, 10);
     value.splice(idx, 1);
     this._setValue(value);
@@ -414,9 +385,11 @@ export class HaEntityNamePicker extends LitElement {
       return;
     }
 
-    const item: EntityNameItem = parseOptionValue(value);
+    const item: EntityNameItem = KNOWN_TYPES.has(value as any)
+      ? { type: value as EntityNameType }
+      : { type: "text", text: value };
 
-    const newValue = [...this._items];
+    const newValue = [...this._value];
 
     if (this._editIndex != null) {
       newValue[this._editIndex] = item;

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDrag } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -195,10 +195,7 @@ class HaEntityStatePicker extends LitElement {
                         .label=${label}
                         selected
                       >
-                        <ha-svg-icon
-                          slot="icon"
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
+                        <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
                         ${label}
                       </ha-input-chip>
                     `;

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
+import { mdiDrag, mdiTextureBox } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -105,7 +105,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                       <ha-svg-icon
                         class="handle"
                         slot="icons"
-                        .path=${mdiDragHorizontalVariant}
+                        .path=${mdiDrag}
                       ></ha-svg-icon>
                     `}
                 <ha-items-display-editor

src/components/ha-dialog-header.ts

@@ -49,16 +49,12 @@ export class HaDialogHeader extends LitElement {
           display: flex;
           flex-direction: row;
           align-items: center;
-          padding: 0 var(--ha-space-1);
+          padding: 4px;
           box-sizing: border-box;
         }
         .header-content {
           flex: 1;
-          padding: 10px var(--ha-space-1);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          min-height: var(--ha-space-12);
+          padding: 10px 4px;
           min-width: 0;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -67,7 +63,7 @@ export class HaDialogHeader extends LitElement {
         .header-title {
           height: var(
             --ha-dialog-header-title-height,
-            calc(var(--ha-font-size-xl) + var(--ha-space-1))
+            calc(var(--ha-font-size-xl) + 4px)
           );
           font-size: var(--ha-font-size-xl);
           line-height: var(--ha-line-height-condensed);
@@ -80,19 +76,19 @@ export class HaDialogHeader extends LitElement {
         }
         @media all and (min-width: 450px) and (min-height: 500px) {
           .header-bar {
-            padding: 0 var(--ha-space-2);
+            padding: 16px;
           }
         }
         .header-navigation-icon {
           flex: none;
-          min-width: var(--ha-space-2);
+          min-width: 8px;
           height: 100%;
           display: flex;
           flex-direction: row;
         }
         .header-action-items {
           flex: none;
-          min-width: var(--ha-space-2);
+          min-width: 8px;
           height: 100%;
           display: flex;
           flex-direction: row;

src/components/ha-items-display-editor.ts

@@ -1,5 +1,5 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -178,7 +178,7 @@ export class HaItemDisplayEditor extends LitElement {
                             ? this._dragHandleKeydown
                             : undefined}
                           class="handle"
-                          .path=${mdiDragHorizontalVariant}
+                          .path=${mdiDrag}
                           slot="end"
                         ></ha-svg-icon>
                       `

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

@@ -0,0 +1,152 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { ImageSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-icon-button";
+import "../ha-textarea";
+import "../ha-textfield";
+import "../ha-picture-upload";
+import "../ha-radio";
+import "../ha-formfield";
+import type { HaPictureUpload } from "../ha-picture-upload";
+import { URL_PREFIX } from "../../data/image_upload";
+
+@customElement("ha-selector-image")
+export class HaImageSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public value?: any;
+
+  @property() public name?: string;
+
+  @property() public label?: string;
+
+  @property() public placeholder?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false }) public selector!: ImageSelector;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private showUpload = false;
+
+  protected firstUpdated(changedProps): void {
+    super.firstUpdated(changedProps);
+
+    if (!this.value || this.value.startsWith(URL_PREFIX)) {
+      this.showUpload = true;
+    }
+  }
+
+  protected render() {
+    return html`
+      <div>
+        <label>
+          ${this.hass.localize(
+            "ui.components.selectors.image.select_image_with_label",
+            {
+              label:
+                this.label ||
+                this.hass.localize("ui.components.selectors.image.image"),
+            }
+          )}
+          <ha-formfield
+            .label=${this.hass.localize("ui.components.selectors.image.upload")}
+          >
+            <ha-radio
+              name="mode"
+              value="upload"
+              .checked=${this.showUpload}
+              @change=${this._radioGroupPicked}
+            ></ha-radio>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize("ui.components.selectors.image.url")}
+          >
+            <ha-radio
+              name="mode"
+              value="url"
+              .checked=${!this.showUpload}
+              @change=${this._radioGroupPicked}
+            ></ha-radio>
+          </ha-formfield>
+        </label>
+        ${!this.showUpload
+          ? html`
+              <ha-textfield
+                .name=${this.name}
+                .value=${this.value || ""}
+                .placeholder=${this.placeholder || ""}
+                .helper=${this.helper}
+                helperPersistent
+                .disabled=${this.disabled}
+                @input=${this._handleChange}
+                .label=${this.label || ""}
+                .required=${this.required}
+              ></ha-textfield>
+            `
+          : html`
+              <ha-picture-upload
+                .hass=${this.hass}
+                .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
+                .original=${this.selector.image?.original}
+                .cropOptions=${this.selector.image?.crop}
+                select-media
+                @change=${this._pictureChanged}
+              ></ha-picture-upload>
+            `}
+      </div>
+    `;
+  }
+
+  private _radioGroupPicked(ev): void {
+    this.showUpload = ev.target.value === "upload";
+  }
+
+  private _pictureChanged(ev) {
+    const value = (ev.target as HaPictureUpload).value;
+
+    fireEvent(this, "value-changed", { value: value ?? undefined });
+  }
+
+  private _handleChange(ev) {
+    let value = ev.target.value;
+    if (this.value === value) {
+      return;
+    }
+    if (value === "" && !this.required) {
+      value = undefined;
+    }
+
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+    }
+    ha-textarea,
+    ha-textfield {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-image": HaImageSelector;
+  }
+}

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

@@ -1,9 +1,4 @@
-import {
-  mdiClose,
-  mdiDelete,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-} from "@mdi/js";
+import { mdiClose, mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -97,7 +92,7 @@ export class HaObjectSelector extends LitElement {
           ? html`
               <ha-svg-icon
                 class="handle"
-                .path=${mdiDragHorizontalVariant}
+                .path=${mdiDrag}
                 slot="start"
               ></ha-svg-icon>
             `

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDrag } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -197,7 +197,7 @@ export class HaSelectSelector extends LitElement {
                             ? html`
                                 <ha-svg-icon
                                   slot="icon"
-                                  .path=${mdiDragHorizontalVariant}
+                                  .path=${mdiDrag}
                                 ></ha-svg-icon>
                               `
                             : nothing}

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

@@ -34,6 +34,7 @@ const LOAD_ELEMENTS = {
   file: () => import("./ha-selector-file"),
   floor: () => import("./ha-selector-floor"),
   label: () => import("./ha-selector-label"),
+  image: () => import("./ha-selector-image"),
   background: () => import("./ha-selector-background"),
   language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),

src/components/ha-slider.ts

@@ -59,17 +59,6 @@ export class HaSlider extends Slider {
           background-color: var(--ha-slider-thumb-color, var(--primary-color));
         }
 
-        #thumb:after {
-          content: "";
-          border-radius: 50%;
-          position: absolute;
-          width: calc(var(--thumb-width) * 2 + 8px);
-          height: calc(var(--thumb-height) * 2 + 8px);
-          left: calc(-50% - 4px);
-          top: calc(-50% - 4px);
-          cursor: pointer;
-        }
-
         #slider:focus-visible:not(.disabled) #thumb,
         #slider:focus-visible:not(.disabled) #thumb-min,
         #slider:focus-visible:not(.disabled) #thumb-max {

src/components/ha-target-picker.ts

@@ -36,6 +36,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public value?: HassServiceTarget;
 
+  @property() public label?: string;
+
   @property() public helper?: string;
 
   @property({ type: Boolean, reflect: true }) public compact = false;
@@ -99,7 +101,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (floor_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="floor"
+                .type=${"floor"}
                 .itemId=${floor_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -112,7 +114,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (area_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="area"
+                .type=${"area"}
                 .itemId=${area_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -125,7 +127,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (device_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="device"
+                .type=${"device"}
                 .itemId=${device_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -138,7 +140,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (entity_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="entity"
+                .type=${"entity"}
                 .itemId=${entity_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -151,7 +153,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (label_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="label"
+                .type=${"label"}
                 .itemId=${label_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -171,6 +173,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="entity"
               .hass=${this.hass}
               .items=${{ entity: ensureArray(this.value?.entity_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -186,6 +189,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="device"
               .hass=${this.hass}
               .items=${{ device: ensureArray(this.value?.device_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -204,6 +208,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 floor: ensureArray(this.value?.floor_id),
                 area: ensureArray(this.value?.area_id),
               }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -219,6 +224,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="label"
               .hass=${this.hass}
               .items=${{ label: ensureArray(this.value?.label_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -271,12 +277,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 auto-size-padding="16"
                 @wa-after-show=${this._showSelector}
                 @wa-after-hide=${this._hidePicker}
-                trap-focus
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
               >
                 ${this._renderTargetSelector()}
               </wa-popover>
@@ -287,11 +287,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 .open=${this._pickerWrapperOpen}
                 @wa-after-show=${this._showSelector}
                 @closed=${this._hidePicker}
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
               >
                 ${this._renderTargetSelector(true)}
               </ha-bottom-sheet>`
@@ -399,12 +394,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           }
         : { [typeId]: id },
     });
-
-    this.shadowRoot
-      ?.querySelector(
-        `ha-target-picker-item-group[type='${this._newTarget?.type}']`
-      )
-      ?.removeAttribute("collapsed");
   }
 
   private _handleTargetPicked = async (

src/components/ha-wa-dialog.ts

@@ -247,7 +247,10 @@ export class HaWaDialog extends LitElement {
       .header-title {
         margin: 0;
         margin-bottom: 0;
-        color: var(--ha-dialog-header-title-color, var(--primary-text-color));
+        color: var(
+          --ha-dialog-header-title-color,
+          var(--ha-color-on-surface-default, var(--primary-text-color))
+        );
         font-size: var(
           --ha-dialog-header-title-font-size,
           var(--ha-font-size-2xl)

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

@@ -18,7 +18,7 @@ export class HaTargetPickerItemGroup extends LitElement {
     Record<TargetType, string[]>
   >;
 
-  @property({ type: Boolean, reflect: true }) public collapsed = false;
+  @property({ type: Boolean }) public collapsed = false;
 
   @property({ attribute: false })
   public deviceFilter?: HaDevicePickerDeviceFilterFunc;
@@ -50,11 +50,7 @@ export class HaTargetPickerItemGroup extends LitElement {
       }
     });
 
-    return html`<ha-expansion-panel
-      .expanded=${!this.collapsed}
-      left-chevron
-      @expanded-changed=${this._expandedChanged}
-    >
+    return html`<ha-expansion-panel .expanded=${!this.collapsed} left-chevron>
       <div slot="header" class="heading">
         ${this.hass.localize(
           `ui.components.target-picker.selected.${this.type}`,
@@ -82,10 +78,6 @@ export class HaTargetPickerItemGroup extends LitElement {
     </ha-expansion-panel>`;
   }
 
-  private _expandedChanged(ev: CustomEvent) {
-    this.collapsed = !ev.detail.expanded;
-  }
-
   static styles = css`
     :host {
       display: block;

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

@@ -130,7 +130,7 @@ export class HaTargetPickerItemRow extends LitElement {
 
     return html`
       <ha-md-list-item type="text">
-        <div class="icon" slot="start">
+        <div slot="start">
           ${this.subEntry
             ? html`
                 <div class="horizontal-line-wrapper">
@@ -172,9 +172,7 @@ export class HaTargetPickerItemRow extends LitElement {
         ((entries && (showEntities || showDevices)) || this._domainName)
           ? html`
               <div slot="end" class="summary">
-                ${showEntities &&
-                !this.expand &&
-                entries?.referenced_entities.length
+                ${showEntities && !this.expand
                   ? html`<button class="main link" @click=${this._openDetails}>
                       ${this.hass.localize(
                         "ui.components.target-picker.entities_count",
@@ -608,11 +606,6 @@ export class HaTargetPickerItemRow extends LitElement {
       state-badge {
         color: var(--ha-color-on-neutral-quiet);
       }
-
-      .icon {
-        display: flex;
-      }
-
       img {
         width: 24px;
         height: 24px;
@@ -636,6 +629,9 @@ export class HaTargetPickerItemRow extends LitElement {
         font-size: var(--ha-font-size-s);
         color: var(--secondary-text-color);
       }
+      .domain {
+        font-family: var(--ha-font-family-code);
+      }
 
       .entries-tree {
         display: flex;

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

@@ -520,7 +520,6 @@ export class HaTargetPickerSelector extends LitElement {
         id=${`list-item-${index}`}
         tabindex="-1"
         .type=${type === "empty" ? "text" : "button"}
-        class=${type === "empty" ? "empty" : ""}
         @click=${this._handlePickTarget}
         .targetType=${type}
         .targetId=${type !== "empty" ? item.id : undefined}
@@ -575,7 +574,9 @@ export class HaTargetPickerSelector extends LitElement {
                       })}
                     />
                   `
-                : type === "floor"
+                : type === "area" &&
+                    (item as FloorComboBoxItem).type === "floor" &&
+                    (item as FloorComboBoxItem).floor
                   ? html`<ha-floor-icon
                       slot="start"
                       .floor=${(item as FloorComboBoxItem).floor!}
@@ -835,7 +836,7 @@ export class HaTargetPickerSelector extends LitElement {
           id: EMPTY_SEARCH,
           primary: this.hass.localize(
             "ui.components.target-picker.no_target_found",
-            { term: html`<div><b>‘${searchTerm}’</b></div>` }
+            { term: html`<span class="search-term">"${searchTerm}"</span>` }
           ),
         });
       } else if (items.length === 0) {
@@ -1019,14 +1020,10 @@ export class HaTargetPickerSelector extends LitElement {
         padding: var(--ha-space-1) var(--ha-space-2);
         font-weight: var(--ha-font-weight-bold);
         color: var(--secondary-text-color);
-        min-height: var(--ha-space-6);
-        display: flex;
-        align-items: center;
       }
 
       .title {
         width: 100%;
-        min-height: var(--ha-space-8);
       }
 
       :host([mode="dialog"]) .title {
@@ -1058,6 +1055,7 @@ export class HaTargetPickerSelector extends LitElement {
 
       .filter-header {
         opacity: 0;
+        transition: opacity 300ms ease-in;
         position: absolute;
         top: 1px;
         width: calc(100% - var(--ha-space-8));
@@ -1085,8 +1083,9 @@ export class HaTargetPickerSelector extends LitElement {
         width: 100%;
       }
 
-      .empty {
-        text-align: center;
+      .search-term {
+        color: var(--primary-color);
+        font-weight: var(--ha-font-weight-medium);
       }
     `,
   ];

src/data/area_floor.ts

@@ -1,6 +1,7 @@
 import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
+import { stringCompare } from "../common/string/compare";
 import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
 import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
@@ -12,11 +13,7 @@ import {
 } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import {
-  floorCompare,
-  getFloorAreaLookup,
-  type FloorRegistryEntry,
-} from "./floor_registry";
+import { getFloorAreaLookup, type FloorRegistryEntry } from "./floor_registry";
 
 export interface FloorComboBoxItem extends PickerComboBoxItem {
   type: "floor" | "area";
@@ -187,8 +184,6 @@ export const getAreasAndFloors = (
     (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
   );
 
-  const compare = floorCompare(haFloors);
-
   // @ts-ignore
   const floorAreaEntries: [
     FloorRegistryEntry | undefined,
@@ -198,7 +193,12 @@ export const getAreasAndFloors = (
       const floor = floors.find((fl) => fl.floor_id === floorId)!;
       return [floor, floorAreas] as const;
     })
-    .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
+    .sort(([floorA], [floorB]) => {
+      if (floorA.level !== floorB.level) {
+        return (floorA.level ?? 0) - (floorB.level ?? 0);
+      }
+      return stringCompare(floorA.name, floorB.name);
+    });
 
   const items: FloorComboBoxItem[] = [];
 
@@ -218,7 +218,6 @@ export const getAreasAndFloors = (
         type: "floor",
         primary: floorName,
         floor: floor,
-        icon: floor.icon || undefined,
         search_labels: [
           floor.floor_id,
           floorName,

src/data/floor_registry.ts

@@ -68,18 +68,13 @@ export const getFloorAreaLookup = (
 };
 
 export const floorCompare =
-  (entries?: HomeAssistant["floors"], order?: string[]) =>
+  (entries?: FloorRegistryEntry[], order?: string[]) =>
   (a: string, b: string) => {
     const indexA = order ? order.indexOf(a) : -1;
     const indexB = order ? order.indexOf(b) : -1;
     if (indexA === -1 && indexB === -1) {
-      const floorA = entries?.[a];
-      const floorB = entries?.[b];
-      if (floorA && floorB && floorA.level !== floorB.level) {
-        return (floorA.level ?? 0) - (floorB.level ?? 0);
-      }
-      const nameA = floorA?.name ?? a;
-      const nameB = floorB?.name ?? b;
+      const nameA = entries?.[a]?.name ?? a;
+      const nameB = entries?.[b]?.name ?? b;
       return stringCompare(nameA, nameB);
     }
     if (indexA === -1) {

src/data/ws-area_registry.ts

@@ -1,13 +1,18 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
+import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import type { AreaRegistryEntry } from "./area_registry";
 
 const fetchAreaRegistry = (conn: Connection) =>
-  conn.sendMessagePromise<AreaRegistryEntry[]>({
-    type: "config/area_registry/list",
-  });
+  conn
+    .sendMessagePromise<AreaRegistryEntry[]>({
+      type: "config/area_registry/list",
+    })
+    .then((areas) =>
+      areas.sort((ent1, ent2) => stringCompare(ent1.name, ent2.name))
+    );
 
 const subscribeAreaRegistryUpdates = (
   conn: Connection,

src/data/ws-floor_registry.ts

@@ -1,13 +1,23 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { Store } from "home-assistant-js-websocket/dist/store";
+import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import type { FloorRegistryEntry } from "./floor_registry";
 
 const fetchFloorRegistry = (conn: Connection) =>
-  conn.sendMessagePromise<FloorRegistryEntry[]>({
-    type: "config/floor_registry/list",
-  });
+  conn
+    .sendMessagePromise({
+      type: "config/floor_registry/list",
+    })
+    .then((floors) =>
+      (floors as FloorRegistryEntry[]).sort((ent1, ent2) => {
+        if (ent1.level !== ent2.level) {
+          return (ent1.level ?? 9999) - (ent2.level ?? 9999);
+        }
+        return stringCompare(ent1.name, ent2.name);
+      })
+    );
 
 const subscribeFloorRegistryUpdates = (
   conn: Connection,

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
@@ -115,9 +115,7 @@ export default class HaAutomationAction extends LitElement {
                         @click=${stopPropagation}
                         .index=${idx}
                       >
-                        <ha-svg-icon
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
+                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
                   : nothing}

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -193,9 +193,7 @@ export default class HaAutomationCondition extends LitElement {
                         @click=${stopPropagation}
                         .index=${idx}
                       >
-                        <ha-svg-icon
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
+                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
                   : nothing}

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -100,9 +100,7 @@ export default class HaAutomationOption extends LitElement {
                         @click=${stopPropagation}
                         .index=${idx}
                       >
-                        <ha-svg-icon
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
+                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
                   : nothing}

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

@@ -1,4 +1,4 @@
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -110,9 +110,7 @@ export default class HaAutomationTrigger extends LitElement {
                         @click=${stopPropagation}
                         .index=${idx}
                       >
-                        <ha-svg-icon
-                          .path=${mdiDragHorizontalVariant}
-                        ></ha-svg-icon>
+                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
                   : nothing}

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

@@ -244,8 +244,7 @@ class HaConfigBackupSettings extends LitElement {
                   `
                 : nothing}
             </div>
-            ${!this.cloudStatus?.logged_in &&
-            isComponentLoaded(this.hass, "cloud")
+            ${!this.cloudStatus?.logged_in
               ? html`<ha-card class="cloud-info">
                   <div class="cloud-header">
                     <img
@@ -280,10 +279,7 @@ class HaConfigBackupSettings extends LitElement {
                         "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
                       )}
                     </ha-button>
-                    <ha-button
-                      href="/config/cloud/register"
-                      appearance="filled"
-                    >
+                    <ha-button href="/config/cloud/register">
                       ${this.hass.localize(
                         "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
                       )}

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -1,10 +1,4 @@
-import {
-  mdiDelete,
-  mdiDevices,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { repeat } from "lit/directives/repeat";
@@ -95,9 +89,7 @@ export class EnergyDeviceSettings extends LitElement {
                 (device) => html`
                   <div class="row" .device=${device}>
                     <div class="handle">
-                      <ha-svg-icon
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                     </div>
                     <span class="content"
                       >${device.name ||

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -1,4 +1,4 @@
-import { mdiDelete, mdiDragHorizontalVariant } from "@mdi/js";
+import { mdiDelete, mdiDrag } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -111,9 +111,7 @@ class HaInputSelectForm extends LitElement {
                     <ha-list-item class="option" hasMeta>
                       <div class="optioncontent">
                         <div class="handle">
-                          <ha-svg-icon
-                            .path=${mdiDragHorizontalVariant}
-                          ></ha-svg-icon>
+                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                         </div>
                         ${option}
                       </div>

src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts

@@ -220,9 +220,6 @@ class DialogZHAManageZigbeeDevice extends LitElement {
 
         .content {
           outline: none;
-          display: flex;
-          flex-direction: column;
-          gap: var(--ha-space-2);
         }
 
         @media all and (min-width: 600px) and (min-height: 501px) {

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -117,6 +117,15 @@ export class ZHAClusterAttributes extends LitElement {
         ></ha-textfield>
       </div>
       <div class="card-actions">
+        <ha-progress-button
+          @click=${this._onGetZigbeeAttributeClick}
+          .progress=${this._readingAttribute}
+          .disabled=${this._readingAttribute}
+        >
+          ${this.hass!.localize(
+            "ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
+          )}
+        </ha-progress-button>
         <ha-call-service-button
           .hass=${this.hass}
           domain="zha"
@@ -127,15 +136,6 @@ export class ZHAClusterAttributes extends LitElement {
             "ui.panel.config.zha.cluster_attributes.write_zigbee_attribute"
           )}
         </ha-call-service-button>
-        <ha-progress-button
-          @click=${this._onGetZigbeeAttributeClick}
-          .progress=${this._readingAttribute}
-          .disabled=${this._readingAttribute}
-        >
-          ${this.hass!.localize(
-            "ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
-          )}
-        </ha-progress-button>
       </div>
     `;
   }
@@ -230,10 +230,6 @@ export class ZHAClusterAttributes extends LitElement {
     return [
       haStyle,
       css`
-        ha-card {
-          border: none;
-        }
-
         ha-select {
           margin-top: 16px;
         }
@@ -267,12 +263,6 @@ export class ZHAClusterAttributes extends LitElement {
         .header {
           flex-grow: 1;
         }
-
-        .card-actions {
-          display: flex;
-          justify-content: flex-end;
-          gap: var(--ha-space-1);
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -108,7 +108,6 @@ export class ZHAClusterCommands extends LitElement {
                   service="issue_zigbee_cluster_command"
                   .data=${this._issueClusterCommandServiceData}
                   .disabled=${!this._canIssueCommand}
-                  appearance="accent"
                 >
                   ${this.hass!.localize(
                     "ui.panel.config.zha.cluster_commands.issue_zigbee_command"
@@ -188,10 +187,6 @@ export class ZHAClusterCommands extends LitElement {
     return [
       haStyle,
       css`
-        ha-card {
-          border: none;
-        }
-
         ha-select {
           margin-top: 16px;
         }
@@ -244,11 +239,6 @@ export class ZHAClusterCommands extends LitElement {
           padding-inline-start: initial;
           color: var(--primary-color);
         }
-
-        .card-actions {
-          display: flex;
-          justify-content: flex-end;
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -9,7 +9,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } 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 "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
@@ -43,7 +43,6 @@ import type { HomeAssistant, Route } from "../../../../../types";
 import { fileDownload } from "../../../../../util/file_download";
 import "../../../ha-config-section";
 import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel";
-import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
 
 const MULTIPROTOCOL_ADDON_URL = "socket://core-silabs-multiprotocol:9999";
 
@@ -89,8 +88,6 @@ class ZHAConfigDashboard extends LitElement {
 
   @state() private _generatingBackup = false;
 
-  @query("#config-save-button") private _configSaveButton?: HaProgressButton;
-
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     if (this.hass) {
@@ -293,8 +290,7 @@ class ZHAConfigDashboard extends LitElement {
                       ></ha-form>
                     </div>
                     <div class="card-actions">
-                      <ha-progress-button
-                        id="config-save-button"
+                      <ha-button
                         appearance="filled"
                         variant="brand"
                         @click=${this._updateConfiguration}
@@ -302,7 +298,7 @@ class ZHAConfigDashboard extends LitElement {
                         ${this.hass.localize(
                           "ui.panel.config.zha.configuration_page.update_button"
                         )}
-                      </ha-progress-button>
+                      </ha-button>
                     </div>
                   </ha-card>`
               )
@@ -420,15 +416,7 @@ class ZHAConfigDashboard extends LitElement {
   }
 
   private async _updateConfiguration(): Promise<any> {
-    this._configSaveButton!.progress = true;
-    try {
-      await updateZHAConfiguration(this.hass!, this._configuration!.data);
-      this._configSaveButton!.actionSuccess();
-    } catch (_err: any) {
-      this._configSaveButton!.actionError();
-    } finally {
-      this._configSaveButton!.progress = false;
-    }
+    await updateZHAConfiguration(this.hass!, this._configuration!.data);
   }
 
   private _computeLabelCallback(localize, section: string) {

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -60,15 +60,6 @@ export class ZHADeviceBindingControl extends LitElement {
           </ha-select>
         </div>
         <div class="card-actions">
-          <ha-progress-button
-            @click=${this._onUnbindDevicesClick}
-            .disabled=${!(this._deviceToBind && this.device) ||
-            this._bindingOperationInProgress}
-            variant="danger"
-            appearance="plain"
-          >
-            ${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
-          </ha-progress-button>
           <ha-progress-button
             @click=${this._onBindDevicesClick}
             .disabled=${!(this._deviceToBind && this.device) ||
@@ -76,6 +67,13 @@ export class ZHADeviceBindingControl extends LitElement {
           >
             ${this.hass!.localize("ui.panel.config.zha.device_binding.bind")}
           </ha-progress-button>
+          <ha-progress-button
+            @click=${this._onUnbindDevicesClick}
+            .disabled=${!(this._deviceToBind && this.device) ||
+            this._bindingOperationInProgress}
+          >
+            ${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
@@ -135,10 +133,6 @@ export class ZHADeviceBindingControl extends LitElement {
           width: 100%;
         }
 
-        .content {
-          padding-top: var(--ha-space-2);
-        }
-
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -151,11 +145,6 @@ export class ZHADeviceBindingControl extends LitElement {
         .header {
           flex-grow: 1;
         }
-        .card-actions {
-          display: flex;
-          justify-content: flex-end;
-          gap: var(--ha-space-1);
-        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -85,24 +85,23 @@ export class ZHAGroupBindingControl extends LitElement {
             ></zha-clusters-data-table>
           </div>
           <div class="card-actions">
+          <ha-progress-button
+            @click=${this._onBindGroupClick}
+            .disabled=${!this._canBind || this._bindingOperationInProgress}
+          >
+            ${this.hass!.localize(
+              "ui.panel.config.zha.group_binding.bind_button_label"
+            )}
+          </ha-progress-button>
+
           <ha-progress-button
             @click=${this._onUnbindGroupClick}
             .disabled=${!this._canBind || this._bindingOperationInProgress}
-            variant="danger"
-            appearance="plain"
           >
             ${this.hass!.localize(
               "ui.panel.config.zha.group_binding.unbind_button_label"
             )}
           </ha-progress-button>
-              <ha-progress-button
-                      @click=${this._onBindGroupClick}
-                      .disabled=${!this._canBind || this._bindingOperationInProgress}
-              >
-                  ${this.hass!.localize(
-                    "ui.panel.config.zha.group_binding.bind_button_label"
-                  )}
-              </ha-progress-button>
           </div>
         </ha-card>
       </ha-config-section>
@@ -206,10 +205,6 @@ export class ZHAGroupBindingControl extends LitElement {
           width: 100%;
         }
 
-        .content {
-          padding-top: var(--ha-space-2);
-        }
-
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -230,12 +225,6 @@ export class ZHAGroupBindingControl extends LitElement {
         .sectionHeader {
           flex-grow: 1;
         }
-
-        .card-actions {
-          display: flex;
-          justify-content: flex-end;
-          gap: var(--ha-space-1);
-        }
       `,
     ];
   }

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

@@ -9,6 +9,7 @@ import {
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoize from "memoize-one";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { storage } from "../../../../common/decorators/storage";
@@ -61,7 +62,7 @@ type DataTableItem = Pick<
 > & {
   default: boolean;
   filename: string;
-  type: string;
+  iconColor?: string;
 };
 
 @customElement("ha-config-lovelace-dashboards")
@@ -106,20 +107,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
-  @storage({
-    key: "lovelace-dashboards-table-grouping",
-    state: false,
-    subscribe: false,
-  })
-  private _activeGrouping?: string = "type";
-
-  @storage({
-    key: "lovelace-dashboards-table-collapsed",
-    state: false,
-    subscribe: false,
-  })
-  private _activeCollapsed: string[] = [];
-
   public willUpdate() {
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
@@ -145,7 +132,15 @@ export class HaConfigLovelaceDashboards extends LitElement {
           template: (dashboard) =>
             dashboard.icon
               ? html`
-                  <ha-icon slot="item-icon" .icon=${dashboard.icon}></ha-icon>
+                  <ha-icon
+                    slot="item-icon"
+                    .icon=${dashboard.icon}
+                    style=${ifDefined(
+                      dashboard.iconColor
+                        ? `color: ${dashboard.iconColor}`
+                        : undefined
+                    )}
+                  ></ha-icon>
                 `
               : nothing,
         },
@@ -182,15 +177,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
         },
       };
 
-      columns.type = {
-        title: localize(
-          "ui.panel.config.lovelace.dashboards.picker.headers.type"
-        ),
-        sortable: true,
-        groupable: true,
-        filterable: true,
-      };
-
       columns.mode = {
         title: localize(
           "ui.panel.config.lovelace.dashboards.picker.headers.conf_mode"
@@ -301,7 +287,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           url_path: "lovelace",
           mode: defaultMode,
           filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
-          type: this._localizeType("built_in"),
+          iconColor: "var(--primary-color)",
         },
       ];
       if (isComponentLoaded(this.hass, "energy")) {
@@ -312,9 +298,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
           mode: "storage",
           url_path: "energy",
           filename: "",
+          iconColor: "var(--orange-color)",
           default: false,
           require_admin: false,
-          type: this._localizeType("built_in"),
         });
       }
 
@@ -326,9 +312,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
           mode: "storage",
           url_path: "light",
           filename: "",
+          iconColor: "var(--amber-color)",
           default: false,
           require_admin: false,
-          type: this._localizeType("built_in"),
         });
       }
 
@@ -340,9 +326,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
           mode: "storage",
           url_path: "safety",
           filename: "",
+          iconColor: "var(--blue-grey-color)",
           default: false,
           require_admin: false,
-          type: this._localizeType("built_in"),
         });
       }
 
@@ -354,9 +340,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
           mode: "storage",
           url_path: "climate",
           filename: "",
+          iconColor: "var(--deep-orange-color)",
           default: false,
           require_admin: false,
-          type: this._localizeType("built_in"),
         });
       }
 
@@ -365,25 +351,16 @@ export class HaConfigLovelaceDashboards extends LitElement {
           .sort((a, b) =>
             stringCompare(a.title, b.title, this.hass.locale.language)
           )
-          .map(
-            (dashboard) =>
-              ({
-                filename: "",
-                ...dashboard,
-                default: defaultUrlPath === dashboard.url_path,
-                type: this._localizeType("user_created"),
-              }) satisfies DataTableItem
-          )
+          .map((dashboard) => ({
+            filename: "",
+            ...dashboard,
+            default: defaultUrlPath === dashboard.url_path,
+          }))
       );
       return result;
     }
   );
 
-  private _localizeType = (type: "user_created" | "built_in") =>
-    this.hass.localize(
-      `ui.panel.config.lovelace.dashboards.picker.type.${type}`
-    );
-
   protected render() {
     if (!this.hass || this._dashboards === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
@@ -403,13 +380,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this.hass.localize
         )}
         .data=${this._getItems(this._dashboards, this.hass.defaultPanel)}
-        .initialGroupColumn=${this._activeGrouping}
-        .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
-        @grouping-changed=${this._handleGroupingChanged}
-        @collapsed-changed=${this._handleCollapseChanged}
         @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         .filter=${this._filter}
@@ -470,13 +443,13 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private _canDelete(urlPath: string) {
-    return !["lovelace", "energy", "light", "safety", "climate"].includes(
+    return !["lovelace", "energy", "light", "security", "climate"].includes(
       urlPath
     );
   }
 
   private _canEdit(urlPath: string) {
-    return !["light", "safety", "climate"].includes(urlPath);
+    return !["light", "security", "climate"].includes(urlPath);
   }
 
   private _handleDelete = async (item: DataTableItem) => {
@@ -598,14 +571,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;
   }
-
-  private _handleGroupingChanged(ev: CustomEvent) {
-    this._activeGrouping = ev.detail.value;
-  }
-
-  private _handleCollapseChanged(ev: CustomEvent) {
-    this._activeCollapsed = ev.detail.value;
-  }
 }
 
 declare global {

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

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { mdiPencil, mdiDownload } from "@mdi/js";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +6,7 @@ import "../../components/ha-menu-button";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-top-app-bar-fixed";
+import "../../components/ha-alert";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -21,6 +22,7 @@ import type {
   GasSourceTypeEnergyPreference,
   WaterSourceTypeEnergyPreference,
   DeviceConsumptionEnergyPreference,
+  EnergyCollection,
 } from "../../data/energy";
 import {
   computeConsumptionData,
@@ -30,13 +32,28 @@ import {
 import { fileDownload } from "../../util/file_download";
 import type { StatisticValue } from "../../data/recorder";
 
+export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+
 const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
   views: [
     {
       strategy: {
-        type: "energy",
+        type: "energy-overview",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
       },
     },
+    {
+      strategy: {
+        type: "energy",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+      },
+      path: "electricity",
+    },
+    {
+      type: "panel",
+      path: "setup",
+      cards: [{ type: "custom:energy-setup-wizard-card" }],
+    },
   ],
 };
 
@@ -46,13 +63,30 @@ class PanelEnergy extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @state() private _viewIndex = 0;
-
   @state() private _lovelace?: Lovelace;
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  public willUpdate(changedProps: PropertyValues) {
+  @state() private _error?: string;
+
+  @property({ attribute: false }) public route?: {
+    path: string;
+    prefix: string;
+  };
+
+  private _energyCollection?: EnergyCollection;
+
+  get _viewPath(): string | undefined {
+    const viewPath: string | undefined = this.route!.path.split("/")[1];
+    return viewPath ? decodeURI(viewPath) : undefined;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._loadPrefs();
+  }
+
+  public async willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
     }
@@ -61,19 +95,67 @@ class PanelEnergy extends LitElement {
     }
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass?.locale !== this.hass.locale) {
-      this._setLovelace();
-    }
-    if (oldHass && oldHass.localize !== this.hass.localize) {
+      await this._setLovelace();
+    } else if (oldHass && oldHass.localize !== this.hass.localize) {
       this._reloadView();
     }
   }
 
+  private async _loadPrefs() {
+    if (this._viewPath === "setup") {
+      await import("./cards/energy-setup-wizard-card");
+    } else {
+      this._energyCollection = getEnergyDataCollection(this.hass, {
+        key: DEFAULT_ENERGY_COLLECTION_KEY,
+      });
+      try {
+        // Have to manually refresh here as we don't want to subscribe yet
+        await this._energyCollection.refresh();
+      } catch (err: any) {
+        if (err.code === "not_found") {
+          navigate("/energy/setup");
+        }
+        this._error = err.message;
+        return;
+      }
+      const prefs = this._energyCollection.prefs!;
+      if (
+        prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0
+      ) {
+        // No energy sources available, start from scratch
+        navigate("/energy/setup");
+      }
+    }
+  }
+
   private _back(ev) {
     ev.stopPropagation();
     goBack();
   }
 
-  protected render(): TemplateResult {
+  protected render() {
+    if (!this._energyCollection?.prefs) {
+      // Still loading
+      return html`<div class="centered">
+        <ha-spinner size="large"></ha-spinner>
+      </div>`;
+    }
+    let viewPath = this._viewPath;
+    const { prefs } = this._energyCollection;
+    if (
+      prefs.energy_sources.every((source) =>
+        ["grid", "solar", "battery"].includes(source.type)
+      )
+    ) {
+      // if only electricity sources, show electricity view directly
+      viewPath = "electricity";
+    }
+    const viewIndex = Math.max(
+      ENERGY_LOVELACE_CONFIG.views.findIndex((view) => view.path === viewPath),
+      0
+    );
+
     return html`
       <div class="header">
         <div class="toolbar">
@@ -99,7 +181,7 @@ class PanelEnergy extends LitElement {
 
           <hui-energy-period-selector
             .hass=${this.hass}
-            collection-key="energy_dashboard"
+            .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
           >
             ${this.hass.user?.is_admin
               ? html` <ha-list-item
@@ -127,12 +209,21 @@ class PanelEnergy extends LitElement {
         .hass=${this.hass}
         @reload-energy-panel=${this._reloadView}
       >
-        <hui-view
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-          .lovelace=${this._lovelace}
-          .index=${this._viewIndex}
-        ></hui-view>
+        ${this._error
+          ? html`<div class="centered">
+              <ha-alert alert-type="error">
+                An error occurred while fetching your energy preferences:
+                ${this._error}
+              </ha-alert>
+            </div>`
+          : this._lovelace
+            ? html`<hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${viewIndex}
+              ></hui-view>`
+            : nothing}
       </hui-view-container>
     `;
   }
@@ -160,9 +251,7 @@ class PanelEnergy extends LitElement {
 
   private async _dumpCSV(ev) {
     ev.stopPropagation();
-    const energyData = getEnergyDataCollection(this.hass, {
-      key: "energy_dashboard",
-    });
+    const energyData = this._energyCollection!;
 
     if (!energyData.prefs || !energyData.state.stats) {
       return;
@@ -459,11 +548,11 @@ class PanelEnergy extends LitElement {
   }
 
   private _reloadView() {
-    // Force strategy to be re-run by make a copy of the view
+    // Force strategy to be re-run by making a copy of the view
     const config = this._lovelace!.config;
     this._lovelace = {
       ...this._lovelace!,
-      config: { ...config, views: [{ ...config.views[0] }] },
+      config: { ...config, views: config.views.map((view) => ({ ...view })) },
     };
   }
 
@@ -565,6 +654,13 @@ class PanelEnergy extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
+        .centered {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       `,
     ];
   }

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -0,0 +1,193 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
+import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
+
+@customElement("energy-overview-view-strategy")
+export class EnergyViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = { type: "sections", sections: [] };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
+
+    // No energy sources available
+    if (
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
+    ) {
+      return view;
+    }
+
+    const hasGrid = prefs.energy_sources.find(
+      (source) =>
+        source.type === "grid" &&
+        (source.flow_from?.length || source.flow_to?.length)
+    ) as GridSourceTypeEnergyPreference;
+    const hasReturn = hasGrid && hasGrid.flow_to.length;
+    const hasSolar = prefs.energy_sources.some(
+      (source) => source.type === "solar"
+    );
+    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
+    const hasBattery = prefs.energy_sources.some(
+      (source) => source.type === "battery"
+    );
+    const hasWater = prefs.energy_sources.some(
+      (source) => source.type === "water"
+    );
+
+    const energySection: LovelaceSectionConfig = {
+      type: "grid",
+      cards: [
+        {
+          type: "heading",
+          heading: hass.localize("ui.panel.energy.overview.electricity"),
+          tap_action: {
+            action: "navigate",
+            navigation_path: "/energy/electricity",
+          },
+        },
+      ],
+    };
+    // Only include if we have a grid or battery.
+    if (hasGrid || hasBattery) {
+      energySection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
+        type: "energy-distribution",
+        view_layout: { position: "sidebar" },
+        collection_key: collectionKey,
+      });
+    }
+
+    if (prefs!.device_consumption.length > 0) {
+      energySection.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_top_consumers_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: collectionKey,
+        max_devices: 5,
+      });
+    } else if (hasGrid) {
+      const gauges: LovelaceCardConfig[] = [];
+      // Only include if we have a grid source & return.
+      if (hasReturn) {
+        gauges.push({
+          type: "energy-grid-neutrality-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      gauges.push({
+        type: "energy-carbon-consumed-gauge",
+        view_layout: { position: "sidebar" },
+        collection_key: collectionKey,
+      });
+
+      // Only include if we have a solar source.
+      if (hasSolar) {
+        if (hasReturn) {
+          gauges.push({
+            type: "energy-solar-consumed-gauge",
+            view_layout: { position: "sidebar" },
+            collection_key: collectionKey,
+          });
+        }
+        gauges.push({
+          type: "energy-self-sufficiency-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
+
+      energySection.cards!.push({
+        type: "grid",
+        columns: 2,
+        square: true,
+        cards: gauges,
+      });
+    }
+
+    view.sections!.push(energySection);
+
+    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize(
+              "ui.panel.energy.cards.energy_sources_table_title"
+            ),
+          },
+          {
+            type: "energy-sources-table",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    if (hasGas) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.gas"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_gas_graph_title"
+            ),
+            type: "energy-gas-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    if (hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.overview.water"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_water_graph_title"
+            ),
+            type: "energy-water-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "energy-overview-view-strategy": EnergyViewStrategy;
+  }
+}

src/panels/energy/strategies/energy-view-strategy.ts

@@ -1,25 +1,11 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import type {
-  EnergyPreferences,
-  GridSourceTypeEnergyPreference,
-} from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
+import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
+import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
-
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
 @customElement("energy-view-strategy")
 export class EnergyViewStrategy extends ReactiveElement {
@@ -29,27 +15,21 @@ export class EnergyViewStrategy extends ReactiveElement {
   ): Promise<LovelaceViewConfig> {
     const view: LovelaceViewConfig = { cards: [] };
 
-    let prefs: EnergyPreferences;
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.cards!.push({
-        type: "markdown",
-        content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-      });
-      return view;
-    }
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
 
-    // No energy sources available, start from scratch
+    // No energy sources available
     if (
-      prefs!.device_consumption.length === 0 &&
-      prefs!.energy_sources.length === 0
+      !prefs ||
+      (prefs.device_consumption.length === 0 &&
+        prefs.energy_sources.length === 0)
     ) {
-      return setupWizard();
+      return view;
     }
 
     view.type = "sidebar";
@@ -63,13 +43,9 @@ export class EnergyViewStrategy extends ReactiveElement {
     const hasSolar = prefs.energy_sources.some(
       (source) => source.type === "solar"
     );
-    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
 
     view.cards!.push({
       type: "energy-compare",
@@ -94,24 +70,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    // Only include if we have a gas source.
-    if (hasGas) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-        type: "energy-gas-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    // Only include if we have a water source.
-    if (hasWater) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -122,13 +80,14 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
+    if (hasGrid || hasSolar || hasBattery) {
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
         type: "energy-sources-table",
         collection_key: "energy_dashboard",
+        types: ["grid", "solar", "battery"],
       });
     }
 
@@ -170,20 +129,6 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_detail_graph_title"
-        ),
-        type: "energy-devices-detail-graph",
-        collection_key: "energy_dashboard",
-      });
-      view.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_graph_title"
-        ),
-        type: "energy-devices-graph",
-        collection_key: "energy_dashboard",
-      });
       const showFloorsNAreas = !prefs.device_consumption.some(
         (d) => d.included_in_stat
       );
@@ -194,6 +139,20 @@ export class EnergyViewStrategy extends ReactiveElement {
         group_by_floor: showFloorsNAreas,
         group_by_area: showFloorsNAreas,
       });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_graph_title"
+        ),
+        type: "energy-devices-graph",
+        collection_key: "energy_dashboard",
+      });
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
+        collection_key: "energy_dashboard",
+      });
     }
 
     return view;

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

@@ -11,6 +11,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import "../../../components/ha-badge";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
@@ -19,7 +20,6 @@ import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
-import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
@@ -162,7 +162,11 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
     if (!stateObj) {
       return html`
         <ha-badge .label=${entityId} class="error">
-          <ha-svg-icon slot="icon" .path=${mdiAlertCircle}></ha-svg-icon>
+          <ha-svg-icon
+            slot="icon"
+            .hass=${this.hass}
+            .path=${mdiAlertCircle}
+          ></ha-svg-icon>
           ${this.hass.localize("ui.badge.entity.not_found")}
         </ha-badge>
       `;
@@ -175,22 +179,22 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       "--badge-color": color,
     };
 
-    const name = computeLovelaceEntityName(
-      this.hass,
-      stateObj,
-      this._config.name
-    );
-
     const stateDisplay = html`
       <state-display
         .stateObj=${stateObj}
         .hass=${this.hass}
         .content=${this._config.state_content}
-        .name=${name}
+        .name=${this._config.name}
       >
       </state-display>
     `;
 
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
+
     const showState = this._config.show_state;
     const showName = this._config.show_name;
     const showIcon = this._config.show_icon;

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

@@ -379,7 +379,7 @@ export class HuiEnergyDevicesGraphCard
           show: true,
           position: "center",
           color: computedStyle.getPropertyValue("--secondary-text-color"),
-          fontSize: computedStyle.getPropertyValue("--ha-font-size-l"),
+          fontSize: computedStyle.getPropertyValue("--ha-font-size-m"),
           lineHeight: 24,
           fontWeight: "bold",
           formatter: `{a}\n${formatNumber(totalUsed, this.hass.locale)} kWh`,

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

@@ -5,7 +5,7 @@ import {
   mdiDelete,
   mdiDeleteSweep,
   mdiDotsVertical,
-  mdiDragHorizontalVariant,
+  mdiDrag,
   mdiPlus,
   mdiSort,
 } from "@mdi/js";
@@ -522,7 +522,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                         "ui.panel.lovelace.cards.todo-list.drag_and_drop"
                       )}
                       class="reorderButton handle"
-                      .path=${mdiDragHorizontalVariant}
+                      .path=${mdiDrag}
                       slot="meta"
                     >
                     </ha-svg-icon>

src/panels/lovelace/cards/types.ts

@@ -150,11 +150,6 @@ export interface EnergyCardBaseConfig extends LovelaceCardConfig {
   collection_key?: string;
 }
 
-export interface EnergySummaryCardConfig extends EnergyCardBaseConfig {
-  type: "energy-summary";
-  title?: string;
-}
-
 export interface EnergyDistributionCardConfig extends EnergyCardBaseConfig {
   type: "energy-distribution";
   title?: string;

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

@@ -1,4 +1,4 @@
-import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -66,11 +66,7 @@ export class HuiEntityEditor extends LitElement {
 
     return html`
       <ha-md-list-item class="item">
-        <ha-svg-icon
-          class="handle"
-          .path=${mdiDragHorizontalVariant}
-          slot="start"
-        ></ha-svg-icon>
+        <ha-svg-icon class="handle" .path=${mdiDrag} slot="start"></ha-svg-icon>
 
         <div slot="headline" class="label">${primary}</div>
         ${secondary
@@ -156,9 +152,7 @@ export class HuiEntityEditor extends LitElement {
                 (entityConf, index) => html`
                   <div class="entity" data-entity-id=${entityConf.entity}>
                     <div class="handle">
-                      <ha-svg-icon
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                     </div>
                     <ha-entity-picker
                       .hass=${this.hass}

src/panels/lovelace/components/hui-section-edit-mode.ts

@@ -1,4 +1,4 @@
-import { mdiDelete, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
+import { mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -31,7 +31,7 @@ export class HuiSectionEditMode extends LitElement {
           <ha-svg-icon
             aria-hidden="true"
             class="handle"
-            .path=${mdiDragHorizontalVariant}
+            .path=${mdiDrag}
           ></ha-svg-icon>
           <ha-icon-button
             .label=${this.hass.localize("ui.common.edit")}

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

@@ -1,9 +1,4 @@
-import {
-  mdiDelete,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -350,9 +345,7 @@ export class HuiCardFeaturesEditor extends LitElement {
               return html`
                 <div class="feature">
                   <div class="handle">
-                    <ha-svg-icon
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                   </div>
                   <div class="feature-content">
                     <div>

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -1,10 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import {
-  mdiDelete,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
 import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -91,9 +86,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
                     return html`
                       <div class="badge">
                         <div class="handle">
-                          <ha-svg-icon
-                            .path=${mdiDragHorizontalVariant}
-                          ></ha-svg-icon>
+                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                         </div>
                         <div class="badge-content">
                           <span>${label}</span>

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -1,4 +1,4 @@
-import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -59,7 +59,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
             (entityConf, index) => html`
               <div class="entity">
                 <div class="handle">
-                  <ha-svg-icon .path=${mdiDragHorizontalVariant}></ha-svg-icon>
+                  <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                 </div>
                 ${entityConf.type
                   ? html`

src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts

@@ -3,11 +3,13 @@ import { computeStateName } from "../../../../../common/entity/compute_state_nam
 import type { EntityFilterFunc } from "../../../../../common/entity/entity_filter";
 import { generateEntityFilter } from "../../../../../common/entity/entity_filter";
 import { stripPrefixFromEntityName } from "../../../../../common/entity/strip_prefix_from_entity_name";
-import { orderCompare } from "../../../../../common/string/compare";
+import {
+  orderCompare,
+  stringCompare,
+} from "../../../../../common/string/compare";
 import type { AreaRegistryEntry } from "../../../../../data/area_registry";
 import { areaCompare } from "../../../../../data/area_registry";
 import type { FloorRegistryEntry } from "../../../../../data/floor_registry";
-import { floorCompare } from "../../../../../data/floor_registry";
 import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../../types";
 import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature";
@@ -302,11 +304,18 @@ export const getFloors = (
   floorsOrder?: string[]
 ): FloorRegistryEntry[] => {
   const floors = Object.values(entries);
-  const compare = floorCompare(entries, floorsOrder);
+  const compare = orderCompare(floorsOrder || []);
 
-  return floors.sort((floorA, floorB) =>
-    compare(floorA.floor_id, floorB.floor_id)
-  );
+  return floors.sort((floorA, floorB) => {
+    const order = compare(floorA.floor_id, floorB.floor_id);
+    if (order !== 0) {
+      return order;
+    }
+    if (floorA.level !== floorB.level) {
+      return (floorA.level ?? 0) - (floorB.level ?? 0);
+    }
+    return stringCompare(floorA.name, floorB.name);
+  });
 };
 
 export const computeAreaPath = (areaId: string): string => `areas-${areaId}`;

src/panels/lovelace/strategies/get-strategy.ts

@@ -38,6 +38,8 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
   view: {
     "original-states": () =>
       import("./original-states/original-states-view-strategy"),
+    "energy-overview": () =>
+      import("../../energy/strategies/energy-overview-view-strategy"),
     energy: () => import("../../energy/strategies/energy-view-strategy"),
     map: () => import("./map/map-view-strategy"),
     iframe: () => import("./iframe/iframe-view-strategy"),

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -135,6 +135,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
     const commonControlsSection = {
       strategy: {
         type: "common-controls",
+        title: hass.localize("ui.panel.lovelace.strategy.home.common_controls"),
         limit: maxCommonControls,
         include_entities: favoriteEntities,
         hide_empty: true,

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

@@ -1,12 +1,8 @@
 import { css, LitElement, nothing } from "lit";
 import type { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewBackgroundConfig } from "../../../data/lovelace/config/view";
-import {
-  isMediaSourceContentId,
-  resolveMediaSource,
-} from "../../../data/media_source";
 
 @customElement("hui-view-background")
 export class HUIViewBackground extends LitElement {
@@ -17,27 +13,10 @@ export class HUIViewBackground extends LitElement {
     | LovelaceViewBackgroundConfig
     | undefined;
 
-  @state({ attribute: false }) resolvedImage?: string;
-
   protected render() {
     return nothing;
   }
 
-  private _fetchMedia() {
-    const backgroundImage =
-      typeof this.background === "string"
-        ? this.background
-        : this.background?.image;
-
-    if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
-      resolveMediaSource(this.hass, backgroundImage).then((result) => {
-        this.resolvedImage = result.url;
-      });
-    } else {
-      this.resolvedImage = undefined;
-    }
-  }
-
   private _applyTheme() {
     const computedStyles = getComputedStyle(this);
     const themeBackground = computedStyles.getPropertyValue(
@@ -73,19 +52,13 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      if (isMediaSourceContentId(background.image) && !this.resolvedImage) {
-        return null;
-      }
       const alignment = background.alignment ?? "center";
       const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
-      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || background.image)}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(background.image)}')`;
     }
     if (typeof background === "string") {
-      if (isMediaSourceContentId(background) && !this.resolvedImage) {
-        return null;
-      }
-      return this.resolvedImage || background;
+      return background;
     }
     return null;
   }
@@ -117,10 +90,6 @@ export class HUIViewBackground extends LitElement {
 
     if (changedProperties.has("background")) {
       this._applyTheme();
-      this._fetchMedia();
-    }
-    if (changedProperties.has("resolvedImage")) {
-      this._applyTheme();
     }
   }
 

src/resources/theme/color/semantic.globals.ts

@@ -155,6 +155,7 @@ export const semanticColorStyles = css`
 
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-95);
+    --ha-color-on-surface-default: var(--ha-color-neutral-05);
   }
 `;
 
@@ -286,5 +287,6 @@ export const darkSemanticColorStyles = css`
 
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-10);
+    --ha-color-on-surface-default: var(--ha-color-neutral-95);
   }
 `;

src/translations/en.json

@@ -667,8 +667,7 @@
             "floor_missing": "No floor assigned",
             "device_missing": "No related device"
           },
-          "add": "Add",
-          "custom_name": "Custom name"
+          "add": "Add"
         },
         "entity-attribute-picker": {
           "attribute": "Attribute",
@@ -3455,17 +3454,12 @@
                 "require_admin": "Admin only",
                 "sidebar": "In sidebar",
                 "filename": "Filename",
-                "url": "Open",
-                "type": "Type"
+                "url": "Open"
               },
               "open": "Open",
               "edit": "Edit",
               "delete": "Delete",
-              "add_dashboard": "Add dashboard",
-              "type": {
-                "user_created": "User created",
-                "built_in": "Built-in"
-              }
+              "add_dashboard": "Add dashboard"
             },
             "confirm_delete_title": "Delete {dashboard_title}?",
             "confirm_delete_text": "This dashboard will be permanently deleted.",
@@ -6929,7 +6923,8 @@
             "areas": "Areas",
             "other_areas": "Other areas",
             "unamed_device": "Unnamed device",
-            "others": "Others"
+            "others": "Others",
+            "common_controls": "Commonly used"
           },
           "common_controls": {
             "not_loaded": "Usage Prediction integration is not loaded.",
@@ -9315,6 +9310,11 @@
         }
       },
       "energy": {
+        "overview": {
+          "electricity": "Electricity",
+          "gas": "Gas",
+          "water": "Water"
+        },
         "download_data": "[%key:ui::panel::history::download_data%]",
         "configure": "[%key:ui::dialogs::quick-bar::commands::navigation::energy%]",
         "compare": {
@@ -9344,7 +9344,8 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Individual devices total usage",
           "energy_devices_detail_graph_title": "Individual devices detail usage",
-          "energy_sankey_title": "Energy flow"
+          "energy_sankey_title": "Energy flow",
+          "energy_top_consumers_title": "Top consumers"
         }
       },
       "history": {

test/data/floor_registry.test.ts

@@ -1,116 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { floorCompare } from "../../src/data/floor_registry";
-import type { FloorRegistryEntry } from "../../src/data/floor_registry";
-
-describe("floorCompare", () => {
-  describe("floorCompare()", () => {
-    it("sorts by floor ID alphabetically", () => {
-      const floors = ["basement", "attic", "ground"];
-
-      expect(floors.sort(floorCompare())).toEqual([
-        "attic",
-        "basement",
-        "ground",
-      ]);
-    });
-
-    it("handles numeric strings in natural order", () => {
-      const floors = ["floor10", "floor2", "floor1"];
-
-      expect(floors.sort(floorCompare())).toEqual([
-        "floor1",
-        "floor2",
-        "floor10",
-      ]);
-    });
-  });
-
-  describe("floorCompare(entries)", () => {
-    it("sorts by level, then by name", () => {
-      const entries = {
-        floor1: { name: "Ground Floor", level: 0 } as FloorRegistryEntry,
-        floor2: { name: "First Floor", level: 1 } as FloorRegistryEntry,
-        floor3: { name: "Basement", level: -1 } as FloorRegistryEntry,
-      };
-      const floors = ["floor1", "floor2", "floor3"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "floor3",
-        "floor1",
-        "floor2",
-      ]);
-    });
-
-    it("treats null level as 0", () => {
-      const entries = {
-        floor1: { name: "Ground Floor", level: 0 } as FloorRegistryEntry,
-        floor2: { name: "First Floor", level: 1 } as FloorRegistryEntry,
-        floor3: { name: "Basement", level: null } as FloorRegistryEntry,
-      };
-      const floors = ["floor2", "floor3", "floor1"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "floor3",
-        "floor1",
-        "floor2",
-      ]);
-    });
-
-    it("sorts by name when levels are equal", () => {
-      const entries = {
-        floor1: { name: "Suite B", level: 1 } as FloorRegistryEntry,
-        floor2: { name: "Suite A", level: 1 } as FloorRegistryEntry,
-      };
-      const floors = ["floor1", "floor2"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual(["floor2", "floor1"]);
-    });
-
-    it("falls back to floor ID when entry not found", () => {
-      const entries = {
-        floor1: { name: "Ground Floor" } as FloorRegistryEntry,
-      };
-      const floors = ["xyz", "floor1", "abc"];
-
-      expect(floors.sort(floorCompare(entries))).toEqual([
-        "abc",
-        "floor1",
-        "xyz",
-      ]);
-    });
-  });
-
-  describe("floorCompare(entries, order)", () => {
-    it("follows order array", () => {
-      const entries = {
-        basement: { name: "Basement" } as FloorRegistryEntry,
-        ground: { name: "Ground Floor" } as FloorRegistryEntry,
-        first: { name: "First Floor" } as FloorRegistryEntry,
-      };
-      const order = ["first", "ground", "basement"];
-      const floors = ["basement", "first", "ground"];
-
-      expect(floors.sort(floorCompare(entries, order))).toEqual([
-        "first",
-        "ground",
-        "basement",
-      ]);
-    });
-
-    it("places items not in order array at the end, sorted by name", () => {
-      const entries = {
-        floor1: { name: "First Floor" } as FloorRegistryEntry,
-        floor2: { name: "Ground Floor" } as FloorRegistryEntry,
-        floor3: { name: "Basement" } as FloorRegistryEntry,
-      };
-      const order = ["floor1"];
-      const floors = ["floor3", "floor2", "floor1"];
-
-      expect(floors.sort(floorCompare(entries, order))).toEqual([
-        "floor1",
-        "floor3",
-        "floor2",
-      ]);
-    });
-  });
-});

yarn.lock

@@ -1284,15 +1284,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.38.6, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
-  version: 6.38.6
-  resolution: "@codemirror/view@npm:6.38.6"
+"@codemirror/view@npm:6.38.5, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
+  version: 6.38.5
+  resolution: "@codemirror/view@npm:6.38.5"
   dependencies:
     "@codemirror/state": "npm:^6.5.0"
     crelt: "npm:^1.0.6"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/5a047337a98de111817ce8c8d39e6429c90ca0b0a4d2678d6e161e9e5961b1d476a891f447ab7a05cac395d4a93530e7c68bedd93191285265f0742a308ad00b
+  checksum: 10/2335b593770042eb3adfe369073432b07cd2d15f1e230ae4dc7be7a7b8edd74e57c13e59b92a11e7e5d59ae030aabf7f55478dfec1cf2a2fe3a1ef3f091676a4
   languageName: node
   linkType: hard
 
@@ -1942,9 +1942,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.5":
-  version: 3.0.0-beta.6.ha.5
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.5"
+"@home-assistant/webawesome@npm:3.0.0-beta.6.ha.4":
+  version: 3.0.0-beta.6.ha.4
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.6.ha.4"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1955,7 +1955,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/6bfa5e06b91df06402c348bc19ec59a7fe6ed70080989d60a3c6519f99f5dc72da8b42c5dc2cad9d1ab211c51c4c67a74c0e22f21368da3c9f2565cbf8646a90
+  checksum: 10/d9072b321126ef458468ed2cf040e0b04cb2aff73336c6e742c0cfb25d9fb674b7672e7c9abcf5bcb0aa0b2fe953c20186f0910f485024c827bfe4cf399f10a4
   languageName: node
   linkType: hard
 
@@ -2374,10 +2374,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lokalise/node-api@npm:15.3.1":
-  version: 15.3.1
-  resolution: "@lokalise/node-api@npm:15.3.1"
-  checksum: 10/9175559660cfbde3f6451ee0ade96ca5ccf6686f3a8f07a23ae6abf3a58db5b5dc71683cdb7f19252765250df7b77dc67539a80e24c3b44a1a97bb2f2d9cd090
+"@lokalise/node-api@npm:15.3.0":
+  version: 15.3.0
+  resolution: "@lokalise/node-api@npm:15.3.0"
+  checksum: 10/a90cdc8524f78ac0c6a16f3bfc742a39a0449f19da9ba5a100f233310de205483c901b0279fc21dd810c5fd13f931c67300ffc0b1a6f8403c857939346bd0875
   languageName: node
   linkType: hard
 
@@ -3918,83 +3918,83 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rsdoctor/client@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/client@npm:1.3.3"
-  checksum: 10/2982a8bf7da99d6e82401195b90becfdb3b2ca929fc0c36136a142fb272bd824847c95cdc2bc7e0071b12136a6654dbb2a60327becd8a6d17c29f13412fafb8c
+"@rsdoctor/client@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/client@npm:1.3.2"
+  checksum: 10/cc6d82453976e3231c141231b474043eb8e55beae2266742993019888934a66b839173374eec5af1374970c31b6e0ac67171031e35ac0c246b2e73b2f0d46c60
   languageName: node
   linkType: hard
 
-"@rsdoctor/core@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/core@npm:1.3.3"
+"@rsdoctor/core@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/core@npm:1.3.2"
   dependencies:
     "@rsbuild/plugin-check-syntax": "npm:1.4.0"
-    "@rsdoctor/graph": "npm:1.3.3"
-    "@rsdoctor/sdk": "npm:1.3.3"
-    "@rsdoctor/types": "npm:1.3.3"
-    "@rsdoctor/utils": "npm:1.3.3"
+    "@rsdoctor/graph": "npm:1.3.2"
+    "@rsdoctor/sdk": "npm:1.3.2"
+    "@rsdoctor/types": "npm:1.3.2"
+    "@rsdoctor/utils": "npm:1.3.2"
     browserslist-load-config: "npm:^1.0.1"
     enhanced-resolve: "npm:5.12.0"
     filesize: "npm:^10.1.6"
     fs-extra: "npm:^11.1.1"
-    lodash: "npm:^4.17.21"
+    lodash-es: "npm:^4.17.21"
     semver: "npm:^7.7.3"
     source-map: "npm:^0.7.6"
-  checksum: 10/5b38a784b8b1805867c4fd7b8167c47e0b3e4db0fa2ea7b35f1c1dde34602deb6c77e3a8f86dec8757fa568c95ec4dc9466c3754a65580bd15ad28abfbcda858
+  checksum: 10/56f3fb3b12250bdc4140b50f6681b768475d014e243ca892f35f072153a292f63f014d38f6715d1b58707f93950b5f9109c823c9eb8f33c55475922eda765cc2
   languageName: node
   linkType: hard
 
-"@rsdoctor/graph@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/graph@npm:1.3.3"
+"@rsdoctor/graph@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/graph@npm:1.3.2"
   dependencies:
-    "@rsdoctor/types": "npm:1.3.3"
-    "@rsdoctor/utils": "npm:1.3.3"
+    "@rsdoctor/types": "npm:1.3.2"
+    "@rsdoctor/utils": "npm:1.3.2"
     lodash.unionby: "npm:^4.8.0"
     path-browserify: "npm:1.0.1"
     source-map: "npm:^0.7.6"
-  checksum: 10/d125fda326554bde644f5dcebc1c17ddef8a80748cd40ab75bbaac8d415aaa19b6c659b33880748eb02c639afb2b5c72abd9ad0c229ee50d9e11f81839ae54be
+  checksum: 10/ecdb653e603656bac1715383d968e544349294db4082cf094b138501650ceac24c3037f27c503e7507e7419199f559e3628cc4aa5091c753a48e88960a9ded61
   languageName: node
   linkType: hard
 
-"@rsdoctor/rspack-plugin@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/rspack-plugin@npm:1.3.3"
+"@rsdoctor/rspack-plugin@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/rspack-plugin@npm:1.3.2"
   dependencies:
-    "@rsdoctor/core": "npm:1.3.3"
-    "@rsdoctor/graph": "npm:1.3.3"
-    "@rsdoctor/sdk": "npm:1.3.3"
-    "@rsdoctor/types": "npm:1.3.3"
-    "@rsdoctor/utils": "npm:1.3.3"
+    "@rsdoctor/core": "npm:1.3.2"
+    "@rsdoctor/graph": "npm:1.3.2"
+    "@rsdoctor/sdk": "npm:1.3.2"
+    "@rsdoctor/types": "npm:1.3.2"
+    "@rsdoctor/utils": "npm:1.3.2"
     lodash-es: "npm:^4.17.21"
   peerDependencies:
     "@rspack/core": "*"
   peerDependenciesMeta:
     "@rspack/core":
       optional: true
-  checksum: 10/866294ad3ab35ec8940d1a96cafca92bc474c5b25fa13026538de625b7945eac735a86534b4d4d67f301d38efa07a1fde4430e9c24c58e8c9f0df71ab3c41d0b
+  checksum: 10/b9d1feb6448a3004b34d2c3f77db62dfa4207ba6bf576fb92c3e0ceb55e35795d175662970e3dd2c4b8b324302579e987581e9112dfd7d54f27b5a3f0d29d4c5
   languageName: node
   linkType: hard
 
-"@rsdoctor/sdk@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/sdk@npm:1.3.3"
+"@rsdoctor/sdk@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/sdk@npm:1.3.2"
   dependencies:
-    "@rsdoctor/client": "npm:1.3.3"
-    "@rsdoctor/graph": "npm:1.3.3"
-    "@rsdoctor/types": "npm:1.3.3"
-    "@rsdoctor/utils": "npm:1.3.3"
+    "@rsdoctor/client": "npm:1.3.2"
+    "@rsdoctor/graph": "npm:1.3.2"
+    "@rsdoctor/types": "npm:1.3.2"
+    "@rsdoctor/utils": "npm:1.3.2"
     safer-buffer: "npm:2.1.2"
     socket.io: "npm:4.8.1"
     tapable: "npm:2.2.3"
-  checksum: 10/448e4be79c71a10efa0e6eecf79e6fb6b4d2819934f2b9b6f775efc3e856195cb77125e1d243626f862d9f8640bad5ace7a910c3fd3a30b108acba8018b67708
+  checksum: 10/06149043259b90d5bd5a0e8f19dfebbcf9f8e6b698c4bc67a49b28c939094797e7923455914cbc30512723f9dfe557a7d00cdf4bb07285c6e8f27679cab667b9
   languageName: node
   linkType: hard
 
-"@rsdoctor/types@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/types@npm:1.3.3"
+"@rsdoctor/types@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/types@npm:1.3.2"
   dependencies:
     "@types/connect": "npm:3.4.38"
     "@types/estree": "npm:1.0.5"
@@ -4008,22 +4008,22 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/1292aa1732b2600bf7b4a5ffdc4b114bf52ec1dfc955b14da62524b38eaf86036eccd710071e5e1b2cf0ddce5297a7f5c36a0d84690a97e1a114271d7f56d5e6
+  checksum: 10/168e59d0f8fa2cda7451746cc071bcddaadb69ce322c99eb730ab7004fe4dee57d52317f6f510020e65fe88045bab906a93d4732a43c53ef67b1cd2d6f889109
   languageName: node
   linkType: hard
 
-"@rsdoctor/utils@npm:1.3.3":
-  version: 1.3.3
-  resolution: "@rsdoctor/utils@npm:1.3.3"
+"@rsdoctor/utils@npm:1.3.2":
+  version: 1.3.2
+  resolution: "@rsdoctor/utils@npm:1.3.2"
   dependencies:
     "@babel/code-frame": "npm:7.26.2"
-    "@rsdoctor/types": "npm:1.3.3"
+    "@rsdoctor/types": "npm:1.3.2"
     "@types/estree": "npm:1.0.5"
     acorn: "npm:^8.10.0"
     acorn-import-attributes: "npm:^1.9.5"
     acorn-walk: "npm:8.3.4"
     deep-eql: "npm:4.1.4"
-    envinfo: "npm:7.18.0"
+    envinfo: "npm:7.14.0"
     fs-extra: "npm:^11.1.1"
     get-port: "npm:5.1.1"
     json-stream-stringify: "npm:3.0.1"
@@ -4031,7 +4031,7 @@ __metadata:
     picocolors: "npm:^1.1.1"
     rslog: "npm:^1.2.11"
     strip-ansi: "npm:^6.0.1"
-  checksum: 10/d4e8801d21bd19956cc254f4311344726b1ec5ec5a6681b1574c8ddc1fa73a48d400483da4b6160193a0f87e27fd1aa2a2763b9c2064a136c0fd6fc5908480ba
+  checksum: 10/f1523fd9906c42642e7af4904d7d9c74e1de8158905d54102f2ac939ec6a4f48122f552fa88a8aa7e6bdd19044066808844bb1f98fe0a3772f0dc0f4f2b5753a
   languageName: node
   linkType: hard
 
@@ -4964,106 +4964,106 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.46.1"
+"@typescript-eslint/eslint-plugin@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.46.0"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.46.1"
-    "@typescript-eslint/type-utils": "npm:8.46.1"
-    "@typescript-eslint/utils": "npm:8.46.1"
-    "@typescript-eslint/visitor-keys": "npm:8.46.1"
+    "@typescript-eslint/scope-manager": "npm:8.46.0"
+    "@typescript-eslint/type-utils": "npm:8.46.0"
+    "@typescript-eslint/utils": "npm:8.46.0"
+    "@typescript-eslint/visitor-keys": "npm:8.46.0"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^7.0.0"
     natural-compare: "npm:^1.4.0"
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^8.46.1
+    "@typescript-eslint/parser": ^8.46.0
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/9fd8c279584e11c7dcfcac6dddc4dde8719f8fe79349f5a2d0473ffcee198dd543a5311b24c601228ae03cc1a47b29118261bcf45f7f697c8ba1e4289fda4096
+  checksum: 10/415afd894a5fec9cfe2c327c8b26377045979cc6bdf720aeecb32af335b9e6865c70fa6a355dd16f52a36dc38f50755df3eb1466d5822c53c80465ff824c9881
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/parser@npm:8.46.1"
+"@typescript-eslint/parser@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/parser@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.46.1"
-    "@typescript-eslint/types": "npm:8.46.1"
-    "@typescript-eslint/typescript-estree": "npm:8.46.1"
-    "@typescript-eslint/visitor-keys": "npm:8.46.1"
+    "@typescript-eslint/scope-manager": "npm:8.46.0"
+    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/typescript-estree": "npm:8.46.0"
+    "@typescript-eslint/visitor-keys": "npm:8.46.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/4edcb49bb001e9a0e72155c4181f941be00c603bf277c283d4185dca528e9642da927032e8d2671c444ca1904c7f51743029b4b48c12e94d39df2dac49d7d3ff
+  checksum: 10/6838fde776fd2b2932b259a20cc89b517e0c94a2cfa363a5e8531095c23fb35d8f803196f6594026d0510bf2a8ec003c67181bb2c407904685a64c97602da65f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/project-service@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/project-service@npm:8.46.1"
+"@typescript-eslint/project-service@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/project-service@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.46.1"
-    "@typescript-eslint/types": "npm:^8.46.1"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.46.0"
+    "@typescript-eslint/types": "npm:^8.46.0"
     debug: "npm:^4.3.4"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/d63cbb88524be85ba626c4969bdec1cd5c1ab64b6ebdd565a45698e700efb764f192db1cdc3322f4d63d3acd8d0a36e2685b89bdfa2edf50fda3c2d0cb6efdd7
+  checksum: 10/de11af23ae6b82769b667e8d6e81d47ce039c7817465b99c1e29c8fbcac58af898bebe70368a274cd7b3c7232354134d53ceba0415b8d7e18317037bc4a4a2f7
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/scope-manager@npm:8.46.1"
+"@typescript-eslint/scope-manager@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.46.1"
-    "@typescript-eslint/visitor-keys": "npm:8.46.1"
-  checksum: 10/3d73812087a17be84184cc68143d4dca7602b8cd4bf5ad334e541d4b3acf5c65c58935369dcf66ab81b38014fe0c6bc57ac2f655fdd69b3e24161a827b86bd34
+    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/visitor-keys": "npm:8.46.0"
+  checksum: 10/ed85abd08c0edf088b1b11757c658acf593cf84051bddde651304a609d3a6cd9e331149e88653676606a565c3f92c191d4af049f540f6e3bb692a4f38305fd71
   languageName: node
   linkType: hard
 
-"@typescript-eslint/tsconfig-utils@npm:8.46.1, @typescript-eslint/tsconfig-utils@npm:^8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.46.1"
+"@typescript-eslint/tsconfig-utils@npm:8.46.0, @typescript-eslint/tsconfig-utils@npm:^8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.46.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/f033d68a53f62c7cc4c09e5697dd9b7fa34a3c3e79133e0b14ca582821869b77e81d3942b91535f6ef789ffaaad31eef1e1ace20518e7de0935a55a16120fae7
+  checksum: 10/e78a66a854322423aca835070c5ee9489975c4d80d2f8ffe9cf4d6e3f67a1646ddc05b086f7156599c90ad521670ca572a4315f2b49a5922c33d6e49723558e4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/type-utils@npm:8.46.1"
+"@typescript-eslint/type-utils@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/type-utils@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.46.1"
-    "@typescript-eslint/typescript-estree": "npm:8.46.1"
-    "@typescript-eslint/utils": "npm:8.46.1"
+    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/typescript-estree": "npm:8.46.0"
+    "@typescript-eslint/utils": "npm:8.46.0"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/db989c1f55624b34da24eaf0dc230ee696a1f2a614ea95a8dd3b8635ad47d748140be2345ed7afcee844dfabd41129f5a8ca583b1a4d6ecc7d581f89c5e508e2
+  checksum: 10/5405b71b91d02ed4eac1028fc156c053953403b9f48393d92340b15a8b05bee5bf1281324c6283ac31a0e03cc1a19baf94768cb3fd70b4621f8c07a4243837db
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.46.1, @typescript-eslint/types@npm:^8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/types@npm:8.46.1"
-  checksum: 10/d162ddf6d77d8c9bdfca942da5de5fb4ba80efa740b14077482b5a71282f1d05e1b1dd393ae810eb2923ca9c845bd26b4a9d2dbf25d43dd5d9cb6e20c2a1db46
+"@typescript-eslint/types@npm:8.46.0, @typescript-eslint/types@npm:^8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/types@npm:8.46.0"
+  checksum: 10/0118b0dd592bf4beaf41e8c6be812980dd0adea44d48c90d8b0272777b58d4cfd6326b8bc363efa3c640be476a6bf3632aee2d97052d5e34071e6576b9c28264
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/typescript-estree@npm:8.46.1"
+"@typescript-eslint/typescript-estree@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/project-service": "npm:8.46.1"
-    "@typescript-eslint/tsconfig-utils": "npm:8.46.1"
-    "@typescript-eslint/types": "npm:8.46.1"
-    "@typescript-eslint/visitor-keys": "npm:8.46.1"
+    "@typescript-eslint/project-service": "npm:8.46.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.46.0"
+    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/visitor-keys": "npm:8.46.0"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
@@ -5072,32 +5072,32 @@ __metadata:
     ts-api-utils: "npm:^2.1.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/af068a14d6d0b4849e9f0e52b7ddcd24c266f099528c7b62ff2bebebc0fb82d07439bf6dc565b27cf2fed0af0aaae618aae220676d0fb041c93ec2a8163f0da1
+  checksum: 10/61053bd0c35a1fe5c82aef00cb70dbe0878ab28e55550cc1e2d6e7d4a0520c81947eb7505227c85a742a93db905d7e7376aed7d958dc257507b9bdda1daf0b00
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/utils@npm:8.46.1"
+"@typescript-eslint/utils@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/utils@npm:8.46.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.7.0"
-    "@typescript-eslint/scope-manager": "npm:8.46.1"
-    "@typescript-eslint/types": "npm:8.46.1"
-    "@typescript-eslint/typescript-estree": "npm:8.46.1"
+    "@typescript-eslint/scope-manager": "npm:8.46.0"
+    "@typescript-eslint/types": "npm:8.46.0"
+    "@typescript-eslint/typescript-estree": "npm:8.46.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/a8fed8aebd34a559c5abd780649edd6be632531e4930b19642f0fdc862b77bff463ef200e8ced48ba489c3fceee7443b6735c87b918b97b98e95e842cd8a38b5
+  checksum: 10/4e0da60de389799afdd36249fd4bcf9e085a4d6f119e241e436a701b45cdf10becc3f1e3cdef29ebbf147a81f40d9a4800d428cb4a66799d3e4aa80b879c9ee2
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.46.1":
-  version: 8.46.1
-  resolution: "@typescript-eslint/visitor-keys@npm:8.46.1"
+"@typescript-eslint/visitor-keys@npm:8.46.0":
+  version: 8.46.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/types": "npm:8.46.1"
+    "@typescript-eslint/types": "npm:8.46.0"
     eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10/eed1c5ce08d2743bd2ec95a33f2118a67596b1b9fa5bf6a3d84ed09ca66e09af3cc91ef3e302c2222e5882e13576340532b586030b3652ce046eb218cd4508b7
+  checksum: 10/37e6145b6a5e960c59777d7fc86f722ff696e76c627106ac4577b945ca35744a5f96525d77bde50fe8c328503e9392e21e3adb7cf9899ae0efc054d63f4c3916
   languageName: node
   linkType: hard
 
@@ -7638,12 +7638,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:7.18.0":
-  version: 7.18.0
-  resolution: "envinfo@npm:7.18.0"
+"envinfo@npm:7.14.0":
+  version: 7.14.0
+  resolution: "envinfo@npm:7.14.0"
   bin:
     envinfo: dist/cli.js
-  checksum: 10/d08b27f39f8e562cc5b9ef202b1a20a05e9598f3f05ea2509d561c45989e1dc6bdea272bf55f552a178e2898c16fe49fb3808d41414c317bfac7c2389a466339
+  checksum: 10/0d9d711f2b6ae02dec89dd768a3390acbcb99ac50d07f20e635a8d2db68447703476db535483592d1ed4656c3d36eee4883032d71a5118c917b4973e2d4fa027
   languageName: node
   linkType: hard
 
@@ -9255,7 +9255,7 @@ __metadata:
     "@codemirror/legacy-modes": "npm:6.5.2"
     "@codemirror/search": "npm:6.5.11"
     "@codemirror/state": "npm:6.5.2"
-    "@codemirror/view": "npm:6.38.6"
+    "@codemirror/view": "npm:6.38.5"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
     "@formatjs/intl-datetimeformat": "npm:6.18.2"
@@ -9273,14 +9273,14 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.5"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.6.ha.4"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
     "@lit-labs/virtualizer": "npm:2.1.1"
     "@lit/context": "npm:1.1.6"
     "@lit/reactive-element": "npm:2.1.1"
-    "@lokalise/node-api": "npm:15.3.1"
+    "@lokalise/node-api": "npm:15.3.0"
     "@material/chips": "npm:=14.0.0-canary.53b3cad2f.0"
     "@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0"
     "@material/mwc-base": "npm:0.27.0"
@@ -9310,7 +9310,7 @@ __metadata:
     "@octokit/plugin-retry": "npm:8.0.2"
     "@octokit/rest": "npm:22.0.0"
     "@replit/codemirror-indentation-markers": "npm:6.5.3"
-    "@rsdoctor/rspack-plugin": "npm:1.3.3"
+    "@rsdoctor/rspack-plugin": "npm:1.3.2"
     "@rspack/core": "npm:1.5.8"
     "@rspack/dev-server": "npm:1.1.4"
     "@swc/helpers": "npm:0.5.17"
@@ -9420,7 +9420,7 @@ __metadata:
     tinykeys: "npm:3.0.0"
     ts-lit-plugin: "npm:2.0.2"
     typescript: "npm:5.9.3"
-    typescript-eslint: "npm:8.46.1"
+    typescript-eslint: "npm:8.46.0"
     ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:3.2.4"
@@ -14395,18 +14395,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript-eslint@npm:8.46.1":
-  version: 8.46.1
-  resolution: "typescript-eslint@npm:8.46.1"
+"typescript-eslint@npm:8.46.0":
+  version: 8.46.0
+  resolution: "typescript-eslint@npm:8.46.0"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.46.1"
-    "@typescript-eslint/parser": "npm:8.46.1"
-    "@typescript-eslint/typescript-estree": "npm:8.46.1"
-    "@typescript-eslint/utils": "npm:8.46.1"
+    "@typescript-eslint/eslint-plugin": "npm:8.46.0"
+    "@typescript-eslint/parser": "npm:8.46.0"
+    "@typescript-eslint/typescript-estree": "npm:8.46.0"
+    "@typescript-eslint/utils": "npm:8.46.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
     typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/ba6914cc4006390908de9e3de295c2f7110461175a818608d198e2d1529e726c32d778fe9e224ea30464ba2c4a43c05f534d2dbc5aabf297354a2aa49a2e1cd6
+  checksum: 10/fd74aab1d21d661299a64107236b5c3515d6d955eb1764b56c5c9505b8cef5f2600e8290d251f1379138333573df94a1fe1fd7fef23952b5ab9f12ff2b774f92
   languageName: node
   linkType: hard