remove unused code

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -61,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
+        uses: github/codeql-action/init@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
+        uses: github/codeql-action/autobuild@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
+        uses: github/codeql-action/analyze@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@8504826a02078b05756e4c07e380023cc2c4274a # v3.1.0
+        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -75,7 +75,7 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.10.0
+        uses: home-assistant/wheels@2025.09.1
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -93,7 +93,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -122,7 +122,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.nvmrc

@@ -1 +1 @@
-22.21.0
+22.20.0

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,8 +52,8 @@
     "@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",
-    "@lezer/highlight": "1.2.2",
+    "@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",
     "@lit-labs/virtualizer": "2.1.1",
@@ -122,7 +122,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.2",
-    "marked": "16.4.1",
+    "marked": "16.4.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -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",
@@ -183,14 +183,14 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.38.0",
+    "eslint": "9.37.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-lit": "2.1.1",
     "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.3.0",
+    "eslint-plugin-unused-imports": "4.2.0",
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.1",
+    "jsdom": "27.0.0",
     "jszip": "3.10.1",
     "lint-staged": "16.2.4",
     "lit-analyzer": "2.0.3",
@@ -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",

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/chips/ha-filter-chip.ts

@@ -1,9 +1,9 @@
-import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
 import { FilterChip } from "@material/web/chips/internal/filter-chip";
 import { styles } from "@material/web/chips/internal/filter-styles";
 import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles";
 import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles";
 import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles";
+import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -30,7 +30,6 @@ export class HaFilterChip extends FilterChip {
           var(--rgb-primary-text-color),
           0.15
         );
-        border-radius: var(--ha-border-radius-md);
       }
     `,
   ];

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";
@@ -20,13 +20,11 @@ import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import "../ha-input-helper-text";
 import "../ha-sortable";
 
 interface EntityNameOption {
   primary: string;
   secondary?: string;
-  field_label: string;
   value: string;
 }
 
@@ -43,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;
@@ -87,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;
     }
@@ -120,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}"`;
@@ -170,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}
@@ -186,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}
@@ -201,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>
                 `;
@@ -238,13 +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}
@@ -253,20 +223,9 @@ export class HaEntityNamePicker extends LitElement {
           </ha-combo-box>
         </mwc-menu-surface>
       </div>
-      ${this._renderHelper()}
     `;
   }
 
-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
   private _onClosed(ev) {
     ev.stopPropagation();
     this._opened = false;
@@ -295,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) : [];
   });
@@ -312,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];
@@ -328,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("");
     }
   }
 
@@ -350,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;
   };
@@ -370,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;
     }
 
@@ -389,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);
@@ -409,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);
@@ -425,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;
@@ -521,11 +483,6 @@ export class HaEntityNamePicker extends LitElement {
     .sortable-drag {
       cursor: grabbing;
     }
-
-    ha-input-helper-text {
-      display: block;
-      margin: var(--ha-space-2) 0 0;
-    }
   `;
 }
 

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-code-editor.ts

@@ -239,7 +239,6 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.crosshairCursor(),
       this._loadedCodeMirror.highlightSelectionMatches(),
       this._loadedCodeMirror.highlightActiveLine(),
-      this._loadedCodeMirror.dropCursor(),
       this._loadedCodeMirror.indentationMarkers({
         thickness: 0,
         activeThickness: 1,

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-generic-picker.ts

@@ -179,7 +179,7 @@ export class HaGenericPicker extends LitElement {
         }
         ha-input-helper-text {
           display: block;
-          margin: var(--ha-space-2) 0 0;
+          margin: 8px 0 0;
         }
       `,
     ];

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-device.ts

@@ -36,8 +36,6 @@ export class HaDeviceSelector extends LitElement {
 
   @property() public helper?: string;
 
-  @property() public placeholder?: string;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -104,7 +102,6 @@ export class HaDeviceSelector extends LitElement {
           .entityFilter=${this.selector.device?.entity
             ? this._filterEntities
             : undefined}
-          .placeholder=${this.placeholder}
           .disabled=${this.disabled}
           .required=${this.required}
           allow-custom-entity

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

@@ -29,8 +29,6 @@ export class HaEntitySelector extends LitElement {
 
   @property() public helper?: string;
 
-  @property() public placeholder?: any;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -71,7 +69,6 @@ export class HaEntitySelector extends LitElement {
         .excludeEntities=${this.selector.entity?.exclude_entities}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
         allow-custom-entity
@@ -89,7 +86,6 @@ export class HaEntitySelector extends LitElement {
         .reorder=${this.selector.entity.reorder ?? false}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-entities-picker>

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,33 +59,12 @@ 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 {
           outline: var(--wa-focus-ring);
         }
 
-        #track:after {
-          content: "";
-          position: absolute;
-          top: calc(-50% - 4px);
-          left: 0;
-          width: 100%;
-          height: calc(var(--track-size) * 2 + 8px);
-          cursor: pointer;
-        }
-
         #indicator {
           background-color: var(
             --ha-slider-indicator-color,

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;
@@ -74,7 +76,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _narrow = false;
 
-  @state() private _pickerFilter?: TargetTypeFloorless;
+  @state() private _pickerFilters: TargetTypeFloorless[] = [];
 
   @state() private _pickerWrapperOpen = 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>`
@@ -335,16 +330,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private _handleUpdatePickerFilter(
-    ev: CustomEvent<TargetTypeFloorless | undefined>
-  ) {
-    this._updatePickerFilter(
-      typeof ev.detail === "string" ? ev.detail : undefined
-    );
+  private _handleUpdatePickerFilters(ev: CustomEvent<TargetTypeFloorless[]>) {
+    this._updatePickerFilters(ev.detail);
   }
 
-  private _updatePickerFilter = (filter?: TargetTypeFloorless) => {
-    this._pickerFilter = filter;
+  private _updatePickerFilters = (filters: TargetTypeFloorless[]) => {
+    this._pickerFilters = filters;
   };
 
   private _hidePicker() {
@@ -364,8 +355,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return html`
       <ha-target-picker-selector
         .hass=${this.hass}
-        @filter-type-changed=${this._handleUpdatePickerFilter}
-        .filterType=${this._pickerFilter}
+        @filter-types-changed=${this._handleUpdatePickerFilters}
+        .filterTypes=${this._pickerFilters}
         @target-picked=${this._handleTargetPicked}
         @create-domain-picked=${this._handleCreateDomain}
         .targetValue=${this.value}
@@ -403,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-top-app-bar-fixed.ts

@@ -2,26 +2,13 @@ import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
-import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
-import { haStyleViewTransitions } from "../resources/styles";
 
 @customElement("ha-top-app-bar-fixed")
-export class HaTopAppBarFixed extends ViewTransitionMixin(TopAppBarFixedBase) {
+export class HaTopAppBarFixed extends TopAppBarFixedBase {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ type: Boolean, reflect: true, attribute: "content-loading" })
-  public contentLoading = true;
-
-  protected override onLoadTransition(): void {
-    // Use reflected property since we can't add class to base component's rendered elements
-    this.startViewTransition(() => {
-      this.contentLoading = false;
-    });
-  }
-
   static override styles = [
     styles,
-    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -36,10 +23,6 @@ export class HaTopAppBarFixed extends ViewTransitionMixin(TopAppBarFixedBase) {
         );
         padding-bottom: var(--safe-area-inset-bottom);
         padding-right: var(--safe-area-inset-right);
-        view-transition-name: layout-fade-in;
-      }
-      :host([content-loading]) .mdc-top-app-bar--fixed-adjust {
-        opacity: 0;
       }
       :host([narrow]) .mdc-top-app-bar--fixed-adjust {
         padding-left: var(--safe-area-inset-left);

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -10,15 +10,14 @@ import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
-import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
+import { haStyleScrollbar } from "../resources/styles";
 
 export const passiveEventOptionsIfSupported = supportsPassiveEventListener
   ? { passive: true }
   : undefined;
 
 @customElement("ha-two-pane-top-app-bar-fixed")
-export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
+export class TopAppBarBaseBase extends BaseElement {
   protected override mdcFoundation!: MDCFixedTopAppBarFoundation;
 
   protected override mdcFoundationClass = MDCFixedTopAppBarFoundation;
@@ -145,12 +144,7 @@ export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
           : nothing}
         <div class="main">
           ${this.pane ? html`<div class="shadow-container"></div>` : nothing}
-          <div
-            class=${classMap({
-              content: true,
-              loading: !this._loaded,
-            })}
-          >
+          <div class="content">
             <slot></slot>
           </div>
         </div>
@@ -251,7 +245,6 @@ export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
   static override styles = [
     styles,
     haStyleScrollbar,
-    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -348,10 +341,6 @@ export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
       .mdc-top-app-bar--pane .content {
         height: 100%;
         overflow: auto;
-        view-transition-name: layout-fade-in;
-      }
-      .content.loading {
-        opacity: 0;
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);

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

@@ -114,6 +114,7 @@ export class HaTargetPickerItemRow extends LitElement {
     const { name, context, iconPath, fallbackIconPath, stateObject } =
       this._itemData(this.type, this.itemId);
 
+    const showDevices = ["floor", "area", "label"].includes(this.type);
     const showEntities = this.type !== "entity";
 
     const entries = this.parentEntries || this._entries;
@@ -129,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">
@@ -167,12 +168,11 @@ export class HaTargetPickerItemRow extends LitElement {
                 >${this._domainName}</span
               >`
             : nothing}
-        ${!this.subEntry && entries && showEntities
+        ${!this.subEntry &&
+        ((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",
@@ -191,6 +191,21 @@ export class HaTargetPickerItemRow extends LitElement {
                         )}
                       </span>`
                     : nothing}
+                ${showDevices
+                  ? html`<span class="secondary"
+                      >${this.hass.localize(
+                        "ui.components.target-picker.devices_count",
+                        {
+                          count: entries?.referenced_devices.length,
+                        }
+                      )}</span
+                    >`
+                  : nothing}
+                ${this._domainName && !showDevices
+                  ? html`<span class="secondary domain"
+                      >${this._domainName}</span
+                    >`
+                  : nothing}
               </div>
             `
           : nothing}
@@ -440,9 +455,6 @@ export class HaTargetPickerItemRow extends LitElement {
           }
           if (
             (this.type === "area" && entity.area_id === this.itemId) ||
-            (this.type === "floor" &&
-              entity.area_id &&
-              entries.referenced_areas.includes(entity.area_id)) ||
             (this.type === "label" && entity.labels.includes(this.itemId)) ||
             entries.referenced_devices.includes(entity.device_id || "")
           ) {
@@ -594,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;
@@ -622,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

@@ -1,6 +1,6 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { consume } from "@lit/context";
-import { mdiPlus, mdiTextureBox } from "@mdi/js";
+import { mdiCheck, mdiPlus, mdiTextureBox } from "@mdi/js";
 import Fuse from "fuse.js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
@@ -43,10 +43,9 @@ import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
-import "../chips/ha-chip-set";
-import "../chips/ha-filter-chip";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
 import "../entity/state-badge";
+import "../ha-button";
 import "../ha-combo-box-item";
 import "../ha-floor-icon";
 import "../ha-md-list";
@@ -64,7 +63,8 @@ const CREATE_ID = "___create-new-entity___";
 export class HaTargetPickerSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public filterType?: TargetTypeFloorless;
+  @property({ attribute: false }) public filterTypes: TargetTypeFloorless[] =
+    [];
 
   @property({ reflect: true }) public mode: "popover" | "dialog" = "popover";
 
@@ -159,10 +159,11 @@ export class HaTargetPickerSelector extends LitElement {
         @input=${this._searchChanged}
         .value=${this._searchTerm}
       ></ha-textfield>
-      <ha-chip-set class="filter">${this._renderFilterButtons()}</ha-chip-set>
+      <div class="filter">${this._renderFilterButtons()}</div>
       <div class="filter-header-wrapper">
         <div
-          class="filter-header ${!this.filterType && this._filterHeader
+          class="filter-header ${this.filterTypes.length !== 1 &&
+          this._filterHeader
             ? "show"
             : ""}"
         >
@@ -174,6 +175,7 @@ export class HaTargetPickerSelector extends LitElement {
         scroller
         .keyFunction=${this._keyFunction}
         .items=${this._getItems(
+          this.filterTypes,
           this.entityFilter,
           this.deviceFilter,
           this.includeDomains,
@@ -182,8 +184,7 @@ export class HaTargetPickerSelector extends LitElement {
           this._searchTerm,
           this.createDomains,
           this._configEntryLookup,
-          this.mode,
-          this.filterType
+          this.mode
         )}
         .renderItem=${this._renderRow}
         @scroll=${this._onScrollList}
@@ -427,17 +428,23 @@ export class HaTargetPickerSelector extends LitElement {
         return html`<div class="separator"></div>`;
       }
 
-      const selected = this.filterType === filterType;
+      const selected = this.filterTypes.includes(filterType);
       return html`
-        <ha-filter-chip
+        <ha-button
           @click=${this._toggleFilter}
           .type=${filterType}
-          .selected=${selected}
-          .label=${this.hass.localize(
+          size="small"
+          .variant=${selected ? "brand" : "neutral"}
+          appearance="filled"
+          no-shrink
+        >
+          ${selected
+            ? html`<ha-svg-icon slot="start" .path=${mdiCheck}></ha-svg-icon>`
+            : nothing}
+          ${this.hass.localize(
             `ui.components.target-picker.type.${filterType === "entity" ? "entities" : `${filterType}s`}` as LocalizeKeys
           )}
-        >
-        </ha-filter-chip>
+        </ha-button>
       `;
     });
   }
@@ -513,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}
@@ -568,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!}
@@ -664,6 +672,7 @@ export class HaTargetPickerSelector extends LitElement {
 
   private _getItems = memoizeOne(
     (
+      filterTypes: TargetTypeFloorless[],
       entityFilter: this["entityFilter"],
       deviceFilter: this["deviceFilter"],
       includeDomains: this["includeDomains"],
@@ -672,8 +681,7 @@ export class HaTargetPickerSelector extends LitElement {
       searchTerm: string,
       createDomains: this["createDomains"],
       configEntryLookup: Record<string, ConfigEntry>,
-      mode: this["mode"],
-      filterType?: TargetTypeFloorless
+      mode: this["mode"]
     ) => {
       const items: (
         | string
@@ -682,7 +690,7 @@ export class HaTargetPickerSelector extends LitElement {
         | PickerComboBoxItem
       )[] = [];
 
-      if (!filterType || filterType === "entity") {
+      if (filterTypes.length === 0 || filterTypes.includes("entity")) {
         let entities = this._getEntitiesMemoized(
           this.hass,
           includeDomains,
@@ -705,7 +713,7 @@ export class HaTargetPickerSelector extends LitElement {
           ) as EntityComboBoxItem[];
         }
 
-        if (!filterType) {
+        if (entities.length > 0 && filterTypes.length !== 1) {
           // show group title
           items.push(
             this.hass.localize("ui.components.target-picker.type.entities")
@@ -715,7 +723,7 @@ export class HaTargetPickerSelector extends LitElement {
         items.push(...entities);
       }
 
-      if (!filterType || filterType === "device") {
+      if (filterTypes.length === 0 || filterTypes.includes("device")) {
         let devices = this._getDevicesMemoized(
           this.hass,
           configEntryLookup,
@@ -733,7 +741,7 @@ export class HaTargetPickerSelector extends LitElement {
           devices = this._filterGroup("device", devices);
         }
 
-        if (!filterType) {
+        if (devices.length > 0 && filterTypes.length !== 1) {
           // show group title
           items.push(
             this.hass.localize("ui.components.target-picker.type.devices")
@@ -743,7 +751,7 @@ export class HaTargetPickerSelector extends LitElement {
         items.push(...devices);
       }
 
-      if (!filterType || filterType === "area") {
+      if (filterTypes.length === 0 || filterTypes.includes("area")) {
         let areasAndFloors = this._getAreasAndFloorsMemoized(
           this.hass.states,
           this.hass.floors,
@@ -769,7 +777,7 @@ export class HaTargetPickerSelector extends LitElement {
           ) as FloorComboBoxItem[];
         }
 
-        if (!filterType) {
+        if (areasAndFloors.length > 0 && filterTypes.length !== 1) {
           // show group title
           items.push(
             this.hass.localize("ui.components.target-picker.type.areas")
@@ -795,7 +803,7 @@ export class HaTargetPickerSelector extends LitElement {
         );
       }
 
-      if (!filterType || filterType === "label") {
+      if (filterTypes.length === 0 || filterTypes.includes("label")) {
         let labels = this._getLabelsMemoized(
           this.hass,
           this._labelRegistry,
@@ -811,7 +819,7 @@ export class HaTargetPickerSelector extends LitElement {
           labels = this._filterGroup("label", labels);
         }
 
-        if (!filterType) {
+        if (labels.length > 0 && filterTypes.length !== 1) {
           // show group title
           items.push(
             this.hass.localize("ui.components.target-picker.type.labels")
@@ -828,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) {
@@ -936,17 +944,17 @@ export class HaTargetPickerSelector extends LitElement {
   }
 
   private _toggleFilter(ev: any) {
-    ev.stopPropagation();
     this._resetSelectedItem();
     this._filterHeader = undefined;
     const type = ev.target.type as TargetTypeFloorless;
     if (!type) {
       return;
     }
-    if (this.filterType === type) {
-      this.filterType = undefined;
+    const index = this.filterTypes.indexOf(type);
+    if (index === -1) {
+      this.filterTypes = [...this.filterTypes, type];
     } else {
-      this.filterType = type;
+      this.filterTypes = this.filterTypes.filter((t) => t !== type);
     }
 
     // Reset scroll position when filter changes
@@ -954,7 +962,7 @@ export class HaTargetPickerSelector extends LitElement {
       this._virtualizerElement.scrollToIndex(0);
     }
 
-    fireEvent(this, "filter-type-changed", this.filterType);
+    fireEvent(this, "filter-types-changed", this.filterTypes);
   }
 
   @eventOptions({ passive: true })
@@ -986,22 +994,18 @@ export class HaTargetPickerSelector extends LitElement {
 
       .filter {
         display: flex;
-        flex-wrap: nowrap;
         gap: var(--ha-space-2);
         padding: var(--ha-space-3) var(--ha-space-3);
         overflow: auto;
+        --ha-button-border-radius: var(--ha-border-radius-md);
       }
 
       :host([mode="dialog"]) .filter {
         padding: var(--ha-space-3) var(--ha-space-4);
       }
 
-      .filter ha-filter-chip {
+      .filter ha-button {
         flex-shrink: 0;
-        --md-filter-chip-selected-container-color: var(
-          --ha-color-fill-primary-normal-hover
-        );
-        color: var(--primary-color);
       }
 
       .filter .separator {
@@ -1016,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 {
@@ -1055,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));
@@ -1082,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);
       }
     `,
   ];
@@ -1095,7 +1097,7 @@ declare global {
   }
 
   interface HASSDomEvents {
-    "filter-type-changed": TargetTypeFloorless | undefined;
+    "filter-types-changed": TargetTypeFloorless[];
     "target-picked": {
       type: TargetType;
       id: string;

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 ?? 9999) - (floorB.level ?? 9999);
-      }
-      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/dialogs/enter-code/dialog-enter-code.ts

@@ -212,7 +212,6 @@ export class DialogEnterCode
       grid-gap: var(--ha-space-6);
       justify-items: center;
       align-items: center;
-      direction: ltr;
     }
     .clear {
       grid-row-start: 4;

src/html/index.html.template

@@ -37,7 +37,6 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        view-transition-name: layout-fade-out;
       }
       #ha-launch-screen svg {
         width: 112px;

src/layouts/hass-loading-screen.ts

@@ -61,7 +61,6 @@ class HassLoadingScreen extends LitElement {
           display: block;
           height: 100%;
           background-color: var(--primary-background-color);
-          view-transition-name: layout-fade-out;
         }
         .toolbar {
           display: flex;

src/layouts/hass-router-page.ts

@@ -3,7 +3,6 @@ import { ReactiveElement } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
-import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
 import type { Route } from "../types";
 
 const extractPage = (path: string, defaultPage: string) => {
@@ -44,7 +43,7 @@ export interface RouterOptions {
 // Time to wait for code to load before we show loading screen.
 const LOADING_SCREEN_THRESHOLD = 400; // ms
 
-export class HassRouterPage extends ViewTransitionMixin(ReactiveElement) {
+export class HassRouterPage extends ReactiveElement {
   @property({ attribute: false }) public route?: Route;
 
   protected routerOptions!: RouterOptions;
@@ -311,18 +310,16 @@ export class HassRouterPage extends ViewTransitionMixin(ReactiveElement) {
     page: string,
     routeOptions: RouteOptions
   ) {
-    this.startViewTransition(() => {
-      if (this.lastChild) {
-        this.removeChild(this.lastChild);
-      }
+    if (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
 
-      const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
-      this.updatePageEl(panelEl);
-      this.appendChild(panelEl);
+    const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
+    this.updatePageEl(panelEl);
+    this.appendChild(panelEl);
 
-      if (routerOptions.cacheAll || routeOptions.cache) {
-        this._cache[page] = panelEl;
-      }
-    });
+    if (routerOptions.cacheAll || routeOptions.cache) {
+      this._cache[page] = panelEl;
+    }
   }
 }

src/layouts/hass-subpage.ts

@@ -1,17 +1,15 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
-import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
-import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
-class HassSubpage extends ViewTransitionMixin(LitElement) {
+class HassSubpage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public header?: string;
@@ -62,14 +60,7 @@ class HassSubpage extends ViewTransitionMixin(LitElement) {
           <slot name="toolbar-icon"></slot>
         </div>
       </div>
-      <div
-        class=${classMap({
-          content: true,
-          "ha-scrollbar": true,
-          loading: !this._loaded,
-        })}
-        @scroll=${this._saveScrollPos}
-      >
+      <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
         <slot></slot>
       </div>
       <div id="fab">
@@ -94,7 +85,6 @@ class HassSubpage extends ViewTransitionMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
-      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -177,10 +167,6 @@ class HassSubpage extends ViewTransitionMixin(LitElement) {
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;
-          view-transition-name: layout-fade-in;
-        }
-        .content.loading {
-          opacity: 0;
         }
         :host([narrow]) .content {
           width: calc(

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

@@ -18,6 +18,7 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/chips/ha-assist-chip";
+import "../components/chips/ha-filter-chip";
 import "../components/data-table/ha-data-table";
 import type {
   DataTableColumnContainer,

src/layouts/hass-tabs-subpage.ts

@@ -11,8 +11,7 @@ import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
 import "../components/ha-tab";
-import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
-import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, Route } from "../types";
 
 export interface PageNavigation {
@@ -30,7 +29,7 @@ export interface PageNavigation {
 }
 
 @customElement("hass-tabs-subpage")
-class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
+class HassTabsSubpage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -186,12 +185,7 @@ class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
             </div>`
           : nothing}
         <div
-          class=${classMap({
-            content: true,
-            "ha-scrollbar": true,
-            tabs: showTabs,
-            loading: !this._loaded,
-          })}
+          class="content ha-scrollbar ${classMap({ tabs: showTabs })}"
           @scroll=${this._saveScrollPos}
         >
           <slot></slot>
@@ -220,7 +214,6 @@ class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
-      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -339,10 +332,6 @@ class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
           margin-bottom: var(--safe-area-inset-bottom);
           overflow: auto;
           -webkit-overflow-scrolling: touch;
-          view-transition-name: layout-fade-in;
-        }
-        .content.loading {
-          opacity: 0;
         }
         :host([narrow]) .content {
           margin-left: var(--safe-area-inset-left);

src/mixins/view-transition-mixin.ts

@@ -1,201 +0,0 @@
-import type { PropertyValues, ReactiveElement } from "lit";
-import { state } from "lit/decorators";
-
-/**
- * Abstract constructor type for a class that extends a reactive element
- * @param T - The type of the reactive element
- * @returns The abstract constructor
- */
-type AbstractConstructor<T extends ReactiveElement> = abstract new (
-  ...args: any[]
-) => T;
-
-/**
- * ViewTransitionMixin - Adds view transition support to reactive elements
- *
- * This mixin provides automatic fade-in transitions when content loads using the
- * View Transition API. User preferences are respected for reduced motion.
- * Falls back to synchronous updates for browsers that don't support the API.
- *
- * @example
- * Basic usage:
- * ```typescript
- * @customElement("my-component")
- * class MyComponent extends ViewTransitionMixin(LitElement) {
- *   render() {
- *     return html`
- *       <div class=${classMap({ content: true, loading: !this._loaded })}>
- *         <slot></slot>
- *       </div>
- *     `;
- *   }
- *
- *   static styles = css`
- *     .content {
- *       view-transition-name: layout-fade-in;
- *     }
- *     .content.loading {
- *       opacity: 0; // Hidden during initial load for transition
- *     }
- *   `;
- * }
- * ```
- *
- * @example
- * Triggering transitions manually:
- * ```typescript
- * private _switchView() {
- *   this.startViewTransition(() => {
- *     // DOM updates here will be animated
- *     this.currentView = newView;
- *   });
- * }
- * ```
- *
- * @example
- * Custom load behavior:
- * ```typescript
- * protected override onLoadTransition(): void {
- *   // Custom logic before triggering transition
- *   this.startViewTransition(() => {
- *     this._loaded = true;
- *     this._additionalSetup();
- *   });
- * }
- * ```
- *
- * Features:
- * - Automatic fade-in transition when slotted content loads
- * - Provides `_loaded` state property for conditional rendering
- * - `startViewTransition()` method for manual transitions
- * - Respects prefers-reduced-motion user preference
- * - Falls back gracefully when View Transition API unavailable
- * - Automatic cleanup of event listeners
- *
- * The mixin monitors the default slot and triggers `onLoadTransition()` when
- * content is available. Override `onLoadTransition()` to customize this behavior.
- */
-export const ViewTransitionMixin = <
-  T extends AbstractConstructor<ReactiveElement>,
->(
-  superClass: T
-) => {
-  abstract class ViewTransitionClass extends superClass {
-    /**
-     * Reference to the default (unnamed) slot element for monitoring content changes.
-     * Used to detect when slotted content is available to trigger load transitions.
-     */
-    private _slot?: HTMLSlotElement;
-
-    /**
-     * Prevents multiple slotchange events from triggering the transition more than once.
-     * Once content loads and transition starts, this flag ensures it won't retrigger.
-     */
-    private _transitionTriggered = false;
-
-    /**
-     * State property indicating whether content has finished loading.
-     * Use this in templates with the loading class pattern to hide content until ready.
-     */
-    @state() protected _loaded = false;
-
-    /**
-     * Trigger a view transition if supported by the browser
-     * @param updateCallback - Callback function that updates the DOM
-     * @returns Promise that resolves when the transition is complete
-     */
-    protected async startViewTransition(
-      updateCallback: () => void | Promise<void>
-    ): Promise<void> {
-      if (
-        !document.startViewTransition ||
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      ) {
-        // Fallback: update without view transition
-        await updateCallback();
-        return;
-      }
-
-      const transition = document.startViewTransition(async () => {
-        await updateCallback();
-      });
-
-      try {
-        await transition.finished;
-      } catch {
-        // View transition failed - this is non-critical, continue silently
-      }
-    }
-
-    /**
-     * Callback executed when content is ready to transition in.
-     *
-     * Called automatically when:
-     * - The default slot receives content (slotchange event)
-     * - No slot exists in the component (triggers immediately after firstUpdated)
-     *
-     * Default implementation sets `_loaded = true` within a view transition.
-     * Override this method to add custom logic before or during the transition,
-     * but ensure you call `startViewTransition()` to maintain transition behavior.
-     */
-    protected onLoadTransition(): void {
-      this.startViewTransition(() => {
-        this._loaded = true;
-      });
-    }
-
-    /**
-     * Check if slot has content and trigger transition if it does
-     */
-    private _checkSlotContent = (): void => {
-      // Guard against multiple slotchange events triggering the transition multiple times
-      if (this._transitionTriggered) {
-        return;
-      }
-
-      if (this._slot) {
-        const elements = this._slot.assignedElements();
-        if (elements.length > 0) {
-          this._transitionTriggered = true;
-          this.onLoadTransition();
-        }
-      }
-    };
-
-    /**
-     * Automatically apply view transition on first render
-     * @param changedProperties - Properties that changed
-     */
-    protected firstUpdated(changedProperties: PropertyValues): void {
-      super.firstUpdated(changedProperties);
-
-      // Wait for slotted content to be ready, then trigger transition
-      // Only monitor the default (unnamed) slot - named slots are for specific purposes
-      this._slot = this.shadowRoot?.querySelector("slot:not([name])") as
-        | HTMLSlotElement
-        | undefined;
-      if (this._slot) {
-        this._checkSlotContent();
-        this._slot.addEventListener("slotchange", this._checkSlotContent);
-      } else {
-        // Start transition immediately if no slot is found
-        this.onLoadTransition();
-      }
-    }
-
-    /**
-     * Cleanup event listeners when component is removed from the DOM.
-     * Removes the slotchange listener.
-     */
-    override disconnectedCallback(): void {
-      super.disconnectedCallback();
-      if (this._slot) {
-        this._slot.removeEventListener("slotchange", this._checkSlotContent);
-        this._slot = undefined;
-        this._transitionTriggered = false;
-        this._loaded = false;
-      }
-    }
-  }
-  return ViewTransitionClass;
-};

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/automation-save-timeout-dialog/dialog-automation-save-timeout.ts

@@ -1,130 +0,0 @@
-import type { CSSResultGroup } from "lit";
-import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-wa-dialog";
-import "../../../../components/ha-spinner";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { AutomationSaveTimeoutDialogParams } from "./show-dialog-automation-save-timeout";
-
-@customElement("ha-dialog-automation-save-timeout")
-class DialogAutomationSaveTimeout extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _saveComplete = false;
-
-  private _params!: AutomationSaveTimeoutDialogParams;
-
-  public showDialog(params: AutomationSaveTimeoutDialogParams): void {
-    this._opened = true;
-    this._params = params;
-    this._saveComplete = false;
-
-    this._params.savedPromise.then(() => {
-      this._saveComplete = true;
-    });
-  }
-
-  public closeDialog(): void {
-    this._opened = false;
-  }
-
-  private _dialogClosed() {
-    this._params.onClose?.();
-
-    if (this._opened) {
-      fireEvent(this, "dialog-closed");
-    }
-    this._opened = false;
-    return true;
-  }
-
-  protected render() {
-    const title = this.hass.localize(
-      "ui.panel.config.automation.editor.new_automation_setup_failed_title",
-      {
-        type: this.hass.localize(
-          `ui.panel.config.automation.editor.type_${this._params.type}`
-        ),
-      }
-    );
-
-    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._opened}
-        header-title=${title}
-        @closed=${this._dialogClosed}
-      >
-        <div class="content">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.new_automation_setup_failed_text",
-            {
-              type: this.hass.localize(
-                `ui.panel.config.automation.editor.type_${this._params.type}`
-              ),
-              types: this.hass.localize(
-                `ui.panel.config.automation.editor.type_${this._params.type}_plural`
-              ),
-            }
-          )}
-          <p></p>
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.new_automation_setup_keep_waiting",
-            {
-              type: this.hass.localize(
-                `ui.panel.config.automation.editor.type_${this._params.type}`
-              ),
-            }
-          )}
-          ${this._saveComplete
-            ? html`<p></p>
-                <ha-alert alert-type="success"
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.new_automation_setup_timedout_success"
-                  )}</ha-alert
-                >`
-            : html`<div class="loading">
-                <ha-spinner size="medium"> </ha-spinner>
-              </div>`}
-        </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="primaryAction"
-            @click=${this._dialogClosed}
-            variant=${this._saveComplete ? "brand" : "danger"}
-          >
-            ${this.hass.localize(
-              `ui.common.${this._saveComplete ? "ok" : "cancel"}`
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .loading {
-          display: flex;
-          justify-content: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-automation-save-timeout": DialogAutomationSaveTimeout;
-  }
-}

src/panels/config/automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout.ts

@@ -1,31 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-
-export const loadAutomationSaveTimeoutDialog = () =>
-  import("./dialog-automation-save-timeout");
-
-export interface AutomationSaveTimeoutDialogParams {
-  onClose?: () => void;
-  savedPromise: Promise<any>;
-  type: "automation" | "script";
-}
-
-export const showAutomationSaveTimeoutDialog = (
-  element: HTMLElement,
-  dialogParams: AutomationSaveTimeoutDialogParams
-) =>
-  new Promise<void>((resolve) => {
-    const origClose = dialogParams.onClose;
-    fireEvent(element, "show-dialog", {
-      dialogTag: "ha-dialog-automation-save-timeout",
-      dialogImport: loadAutomationSaveTimeoutDialog,
-      dialogParams: {
-        ...dialogParams,
-        onClose: () => {
-          resolve();
-          if (origClose) {
-            origClose();
-          }
-        },
-      },
-    });
-  });

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/condition/types/ha-automation-condition-state.ts

@@ -10,10 +10,8 @@ import {
   optional,
   string,
   union,
-  array,
 } from "superstruct";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
-import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -27,7 +25,7 @@ const stateConditionStruct = object({
   condition: literal("state"),
   entity_id: optional(string()),
   attribute: optional(string()),
-  state: optional(union([string(), array(string())])),
+  state: optional(string()),
   for: optional(union([number(), string(), forDictStruct])),
   enabled: optional(boolean()),
 });
@@ -71,7 +69,7 @@ const SCHEMA = [
     name: "state",
     required: true,
     selector: {
-      state: { multiple: true },
+      state: {},
     },
     context: {
       filter_entity: "entity_id",
@@ -90,7 +88,7 @@ export class HaStateCondition extends LitElement implements ConditionElement {
   @property({ type: Boolean }) public disabled = false;
 
   public static get defaultConfig(): StateCondition {
-    return { condition: "state", entity_id: "", state: [] };
+    return { condition: "state", entity_id: "", state: "" };
   }
 
   public shouldUpdate(changedProperties: PropertyValues) {
@@ -107,11 +105,7 @@ export class HaStateCondition extends LitElement implements ConditionElement {
 
   protected render() {
     const trgFor = createDurationData(this.condition.for);
-    const data = {
-      ...this.condition,
-      state: ensureArray(this.condition.state) || [],
-      for: trgFor,
-    };
+    const data = { ...this.condition, for: trgFor };
 
     return html`
       <ha-form
@@ -135,9 +129,10 @@ export class HaStateCondition extends LitElement implements ConditionElement {
         : {}
     );
 
-    // Ensure `state` stays an array for multi-select. If absent, set to []
-    if (newCondition.state === undefined || newCondition.state === "") {
-      newCondition.state = [];
+    // We should not cleanup state in the above, as it is required.
+    // Set it to empty string if it is undefined.
+    if (!newCondition.state) {
+      newCondition.state = "";
     }
 
     fireEvent(this, "value-changed", { value: newCondition });

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

@@ -89,7 +89,6 @@ import {
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
-import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -1137,22 +1136,28 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             entityId = automation.entity_id;
           } catch (e) {
             if (e instanceof Error && e.name === "TimeoutError") {
-              // Show the dialog and give user a chance to wait for the registry
-              // to respond.
-              await showAutomationSaveTimeoutDialog(this, {
-                savedPromise: entityRegPromise,
-                type: "automation",
+              showAlertDialog(this, {
+                title: this.hass.localize(
+                  "ui.panel.config.automation.editor.new_automation_setup_failed_title",
+                  {
+                    type: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_automation"
+                    ),
+                  }
+                ),
+                text: this.hass.localize(
+                  "ui.panel.config.automation.editor.new_automation_setup_failed_text",
+                  {
+                    type: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_automation"
+                    ),
+                    types: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_automation_plural"
+                    ),
+                  }
+                ),
+                warning: true,
               });
-              try {
-                // We already gave the user a chance to wait once, so if they skipped
-                // the dialog and it's still not there just immediately timeout.
-                const automation = await promiseTimeout(0, entityRegPromise);
-                entityId = automation.entity_id;
-              } catch (e2) {
-                if (!(e2 instanceof Error && e2.name === "TimeoutError")) {
-                  throw e2;
-                }
-              }
             } else {
               throw e;
             }

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/devices/device-detail/ha-device-info-card.ts

@@ -134,8 +134,8 @@ export class HaDeviceCard extends LitElement {
   }
 
   protected _getAddresses() {
-    return this.device.connections.filter((conn) =>
-      ["mac", "bluetooth", "zigbee"].includes(conn[0])
+    return this.device.connections.filter(
+      (conn) => conn[0] === "mac" || conn[0] === "bluetooth"
     );
   }
 

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts

@@ -38,6 +38,7 @@ export class HaDeviceInfoZha extends LitElement {
     }
     return html`
       <ha-expansion-panel header="Zigbee info">
+        <div>IEEE: ${this._zhaDevice.ieee}</div>
         <div>Nwk: ${formatAsPaddedHex(this._zhaDevice.nwk)}</div>
         <div>Device Type: ${this._zhaDevice.device_type}</div>
         <div>

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/ha-config-integration-page.ts

@@ -528,20 +528,18 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     </ha-button>
                   `
                 : nothing}
-              ${this._manifest?.integration_type !== "hardware"
-                ? html`<ha-button
-                    .appearance=${canAddDevice ? "filled" : "accent"}
-                    @click=${this._addIntegration}
-                  >
-                    ${this._manifest?.integration_type
-                      ? this.hass.localize(
-                          `ui.panel.config.integrations.integration_page.add_${this._manifest.integration_type}`
-                        )
-                      : this.hass.localize(
-                          `ui.panel.config.integrations.integration_page.add_entry`
-                        )}
-                  </ha-button>`
-                : nothing}
+              <ha-button
+                .appearance=${canAddDevice ? "filled" : "accent"}
+                @click=${this._addIntegration}
+              >
+                ${this._manifest?.integration_type
+                  ? this.hass.localize(
+                      `ui.panel.config.integrations.integration_page.add_${this._manifest.integration_type}`
+                    )
+                  : this.hass.localize(
+                      `ui.panel.config.integrations.integration_page.add_entry`
+                    )}
+              </ha-button>
               ${Array.from(supportedSubentryTypes).map(
                 (flowType) =>
                   html`<ha-button

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/logs/error-log-card.ts

@@ -803,8 +803,8 @@ class ErrorLogCard extends LitElement {
       padding-top: 16px;
       padding-bottom: 16px;
       overflow-y: scroll;
-      min-height: var(--error-log-card-height, calc(100vh - 244px));
-      max-height: var(--error-log-card-height, calc(100vh - 244px));
+      min-height: var(--error-log-card-height, calc(100vh - 240px));
+      max-height: var(--error-log-card-height, calc(100vh - 240px));
       border-top: 1px solid var(--divider-color);
       direction: ltr;
     }

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/config/script/ha-script-editor.ts

@@ -77,7 +77,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
-import { showAutomationSaveTimeoutDialog } from "../automation/automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 
 export class HaScriptEditor extends SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@@ -1052,22 +1051,28 @@ export class HaScriptEditor extends SubscribeMixin(
           } catch (e) {
             entityId = undefined;
             if (e instanceof Error && e.name === "TimeoutError") {
-              // Show the dialog and give user a chance to wait for the registry
-              // to respond.
-              await showAutomationSaveTimeoutDialog(this, {
-                savedPromise: entityRegPromise,
-                type: "script",
+              showAlertDialog(this, {
+                title: this.hass.localize(
+                  "ui.panel.config.automation.editor.new_automation_setup_failed_title",
+                  {
+                    type: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_script"
+                    ),
+                  }
+                ),
+                text: this.hass.localize(
+                  "ui.panel.config.automation.editor.new_automation_setup_failed_text",
+                  {
+                    type: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_script"
+                    ),
+                    types: this.hass.localize(
+                      "ui.panel.config.automation.editor.type_script_plural"
+                    ),
+                  }
+                ),
+                warning: true,
               });
-              try {
-                // We already gave the user a chance to wait once, so if they skipped
-                // the dialog and it's still not there just immediately timeout.
-                const automation = await promiseTimeout(0, entityRegPromise);
-                entityId = automation.entity_id;
-              } catch (e2) {
-                if (!(e2 instanceof Error && e2.name === "TimeoutError")) {
-                  throw e2;
-                }
-              }
             } else {
               throw e;
             }

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-alarm-panel-card.ts

@@ -433,7 +433,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       grid-gap: var(--ha-space-4);
       justify-items: center;
       align-items: center;
-      direction: ltr;
     }
 
     ha-control-button {

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

@@ -9,14 +9,13 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
-import { computeCssColor } from "../../../common/color/compute-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { transform } from "../../../common/decorators/transform";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import { stateActive } from "../../../common/entity/state_active";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import {
   stateColorBrightness,
   stateColorCss,
@@ -41,7 +40,6 @@ import type { FrontendLocaleData } from "../../../data/translation";
 import type { Themes } from "../../../data/ws-themes";
 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 { hasAction } from "../common/has-action";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -51,6 +49,8 @@ import type {
   LovelaceGridOptions,
 } from "../types";
 import type { ButtonCardConfig } from "./types";
+import { computeCssColor } from "../../../common/color/compute-color";
+import { stateActive } from "../../../common/entity/state_active";
 
 export const getEntityDefaultButtonAction = (entityId?: string) =>
   entityId && DOMAINS_TOGGLE.has(computeDomain(entityId))
@@ -183,11 +183,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = computeLovelaceEntityName(
-      this.hass,
-      stateObj,
-      this._config.name
-    );
+    const name = this._config.show_name
+      ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
+      : "";
 
     return html`
       <ha-card
@@ -197,7 +195,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           hasDoubleClick: hasAction(this._config!.double_tap_action),
         })}
         role="button"
-        aria-label=${name}
+        aria-label=${this._config.name ||
+        (stateObj ? computeStateName(stateObj) : "")}
         tabindex=${ifDefined(
           hasAction(this._config.tap_action) ? "0" : undefined
         )}

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

@@ -272,6 +272,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             .stateObj=${stateObj}
             .hass=${this.hass}
             .content=${this._config.state_content}
+            .name=${name}
           >
           </state-display>
         `;

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/common/entity/compute-lovelace-entity-name.ts

@@ -4,7 +4,6 @@ import {
   type EntityNameItem,
 } from "../../../../common/entity/compute_entity_name_display";
 import type { HomeAssistant } from "../../../../types";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 /**
  * Computes the display name for an entity in Lovelace (cards and badges).
@@ -16,24 +15,9 @@ import { ensureArray } from "../../../../common/array/ensure-array";
  */
 export const computeLovelaceEntityName = (
   hass: HomeAssistant,
-  stateObj: HassEntity | undefined,
+  stateObj: HassEntity,
   nameConfig: string | EntityNameItem | EntityNameItem[] | undefined
-): string => {
-  if (typeof nameConfig === "string") {
-    return nameConfig;
-  }
-  const config = nameConfig || DEFAULT_ENTITY_NAME;
-  if (stateObj) {
-    return hass.formatEntityName(stateObj, config);
-  }
-  // If entity is not found, fall back to text parts in config
-  // This allows for static names even when the entity is missing
-  // e.g. for a card that doesn't require an entity
-  const textParts = ensureArray(config)
-    .filter((item) => item.type === "text")
-    .map((item) => ("text" in item ? item.text : ""));
-  if (textParts.length) {
-    return textParts.join(" ");
-  }
-  return "";
-};
+): string =>
+  typeof nameConfig === "string"
+    ? nameConfig
+    : hass.formatEntityName(stateObj, nameConfig || DEFAULT_ENTITY_NAME);

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-button-card-editor.ts

@@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
@@ -17,14 +16,13 @@ import type { ButtonCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { entityNameStruct } from "../structs/entity-name-struct";
 import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(entityNameStruct),
+    name: optional(string()),
     show_name: optional(boolean()),
     icon: optional(string()),
     show_icon: optional(boolean()),
@@ -70,13 +68,7 @@ export class HuiButtonCardEditor
     (entityId: string | undefined) =>
       [
         { name: "entity", selector: { entity: {} } },
-        {
-          name: "name",
-          selector: {
-            entity_name: { default_name: DEFAULT_ENTITY_NAME },
-          },
-          context: { entity: "entity" },
-        },
+        { name: "name", selector: { text: {} } },
         {
           name: "",
           type: "grid",

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/heading-badge-editor/hui-entity-heading-badge-editor.ts

@@ -13,7 +13,6 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
@@ -28,7 +27,6 @@ import type { LovelaceGenericElementEditor } from "../../types";
 import "../conditions/ha-card-conditions-editor";
 import { configElementStyle } from "../config-elements/config-elements-style";
 import { actionConfigStruct } from "../structs/action-struct";
-import { entityNameStruct } from "../structs/entity-name-struct";
 
 export const DEFAULT_CONFIG: Partial<EntityHeadingBadgeConfig> = {
   type: "entity",
@@ -39,7 +37,7 @@ export const DEFAULT_CONFIG: Partial<EntityHeadingBadgeConfig> = {
 const entityConfigStruct = object({
   type: optional(string()),
   entity: optional(string()),
-  name: optional(entityNameStruct),
+  name: optional(string()),
   icon: optional(string()),
   state_content: optional(union([string(), array(string())])),
   show_state: optional(boolean()),
@@ -94,11 +92,8 @@ export class HuiHeadingEntityEditor
                 {
                   name: "name",
                   selector: {
-                    entity_name: {
-                      default_name: DEFAULT_ENTITY_NAME,
-                    },
+                    text: {},
                   },
-                  context: { entity: "entity" },
                 },
                 {
                   name: "icon",

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/heading-badges/hui-entity-heading-badge.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-heading-badge";
@@ -15,7 +16,6 @@ import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
-import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { DEFAULT_CONFIG } from "../editor/heading-badge-editor/hui-entity-heading-badge-editor";
@@ -137,11 +137,7 @@ export class HuiEntityHeadingBadge
       "--icon-color": color,
     };
 
-    const name = computeLovelaceEntityName(
-      this.hass,
-      stateObj,
-      this._config.name
-    );
+    const name = config.name || computeStateName(stateObj);
 
     return html`
       <ha-heading-badge
@@ -170,7 +166,7 @@ export class HuiEntityHeadingBadge
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 .content=${config.state_content}
-                .name=${name}
+                .name=${config.name}
                 dash-unavailable
               ></state-display>
             `

src/panels/lovelace/hui-root.ts

@@ -72,8 +72,7 @@ import {
 } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { ViewTransitionMixin } from "../../mixins/view-transition-mixin";
-import { haStyle, haStyleViewTransitions } from "../../resources/styles";
+import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -115,7 +114,7 @@ interface SubActionItem {
 }
 
 @customElement("hui-root")
-class HUIRoot extends ViewTransitionMixin(LitElement) {
+class HUIRoot extends LitElement {
   @property({ attribute: false }) public panel?: PanelInfo<LovelacePanelConfig>;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -391,14 +390,11 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
         <ha-button-menu slot="actionItems">
           <ha-icon-button
             slot="trigger"
-            id="dashboardmenu"
+            .label=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
           ${listItems}
         </ha-button-menu>
-        <ha-tooltip placement="bottom" for="dashboardmenu">
-          ${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
-        </ha-tooltip>
       `);
     }
     return html`${result}`;
@@ -497,7 +493,6 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
         class=${classMap({
           "edit-mode": this._editMode,
           narrow: this.narrow,
-          loading: !this._loaded,
         })}
       >
         <div class="header">
@@ -1167,45 +1162,43 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
     // Recreate a new element to clear the applied themes.
     const root = this._viewRoot;
 
-    this.startViewTransition(() => {
-      if (root.lastChild) {
-        root.removeChild(root.lastChild);
-      }
+    if (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
 
-      if (viewIndex === "hass-unused-entities") {
-        const unusedEntities = document.createElement("hui-unused-entities");
-        // Wait for promise to resolve so that the element has been upgraded.
-        import("./editor/unused-entities/hui-unused-entities").then(() => {
-          unusedEntities.hass = this.hass!;
-          unusedEntities.lovelace = this.lovelace!;
-          unusedEntities.narrow = this.narrow;
-        });
-        root.appendChild(unusedEntities);
-        return;
-      }
+    if (viewIndex === "hass-unused-entities") {
+      const unusedEntities = document.createElement("hui-unused-entities");
+      // Wait for promise to resolve so that the element has been upgraded.
+      import("./editor/unused-entities/hui-unused-entities").then(() => {
+        unusedEntities.hass = this.hass!;
+        unusedEntities.lovelace = this.lovelace!;
+        unusedEntities.narrow = this.narrow;
+      });
+      root.appendChild(unusedEntities);
+      return;
+    }
 
-      let view;
-      const viewConfig = this.config.views[viewIndex];
+    let view;
+    const viewConfig = this.config.views[viewIndex];
 
-      if (!viewConfig) {
-        this.lovelace!.setEditMode(true);
-        return;
-      }
+    if (!viewConfig) {
+      this.lovelace!.setEditMode(true);
+      return;
+    }
 
-      if (!force && this._viewCache![viewIndex]) {
-        view = this._viewCache![viewIndex];
-      } else {
-        view = document.createElement("hui-view");
-        view.index = viewIndex;
-        this._viewCache![viewIndex] = view;
-      }
+    if (!force && this._viewCache![viewIndex]) {
+      view = this._viewCache![viewIndex];
+    } else {
+      view = document.createElement("hui-view");
+      view.index = viewIndex;
+      this._viewCache![viewIndex] = view;
+    }
 
-      view.lovelace = this.lovelace;
-      view.hass = this.hass;
-      view.narrow = this.narrow;
+    view.lovelace = this.lovelace;
+    view.hass = this.hass;
+    view.narrow = this.narrow;
 
-      root.appendChild(view);
-    });
+    root.appendChild(view);
   }
 
   private _openShortcutDialog(ev: Event) {
@@ -1216,21 +1209,12 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      haStyleViewTransitions,
       css`
         :host {
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;
         }
-
-        @media (prefers-reduced-motion: no-preference) {
-          ::view-transition-new(hui-root-container) {
-            animation: fade-in var(--ha-animation-layout-duration) ease-out;
-            animation-delay: var(--ha-animation-layout-delay-base);
-          }
-        }
-
         .header {
           background-color: var(--app-header-background-color);
           color: var(--app-header-text-color, white);
@@ -1419,10 +1403,6 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
           padding-right: var(--safe-area-inset-right);
           padding-inline-end: var(--safe-area-inset-right);
           padding-bottom: var(--safe-area-inset-bottom);
-          view-transition-name: hui-root-container;
-        }
-        .loading hui-view-container {
-          opacity: 0;
         }
         .narrow hui-view-container {
           padding-left: var(--safe-area-inset-left);
@@ -1431,7 +1411,6 @@ class HUIRoot extends ViewTransitionMixin(LitElement) {
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
-          view-transition-name: layout-fade-in;
         }
         /**
          * In edit mode we have the tab bar on a new line *

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/codemirror.ts

@@ -25,7 +25,6 @@ export {
   keymap,
   lineNumbers,
   rectangularSelection,
-  dropCursor,
 } from "@codemirror/view";
 export { indentationMarkers } from "@replit/codemirror-indentation-markers";
 export { tags } from "@lezer/highlight";
@@ -72,10 +71,6 @@ export const haTheme = EditorView.theme({
     borderLeftColor: "var(--primary-color)",
   },
 
-  ".cm-dropCursor": {
-    borderLeftColor: "var(--secondary-text-color)",
-  },
-
   ".cm-selectionBackground, ::selection": {
     backgroundColor: "rgba(var(--rgb-primary-color), 0.1)",
   },

src/resources/styles.ts

@@ -199,56 +199,3 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
-
-export const haStyleViewTransitions = css`
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-out {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    /* Prevent root cross-fade during view transitions (pseudo-element) */
-    ::view-transition-old(root) {
-      animation: none;
-    }
-    ::view-transition-new(root) {
-      animation: none;
-    }
-
-    /* Elements leaving the view (loading screen) */
-    ::view-transition-group(layout-fade-out) {
-      animation-duration: var(--ha-animation-layout-duration);
-      animation-timing-function: ease-out;
-    }
-    ::view-transition-old(layout-fade-out) {
-      animation: fade-out var(--ha-animation-layout-duration) ease-out;
-    }
-    ::view-transition-new(layout-fade-out) {
-      animation: none;
-    }
-
-    /* New content entering (panels, subpages)
-       Uses base delay to be less abrupt and allow for elements to render */
-    ::view-transition-group(layout-fade-in) {
-      animation-duration: var(--ha-animation-layout-duration);
-      animation-timing-function: ease-out;
-    }
-    ::view-transition-new(layout-fade-in) {
-      animation: fade-in var(--ha-animation-layout-duration) ease-out;
-      animation-delay: var(--ha-animation-layout-delay-base);
-    }
-  }
-`;

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/resources/theme/core.globals.ts

@@ -42,17 +42,6 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
-
-    /* Animation timing */
-    --ha-animation-layout-duration: 350ms;
-    --ha-animation-layout-delay-base: 100ms;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    html {
-      --ha-animation-layout-duration: 0ms;
-      --ha-animation-layout-delay-base: 0ms;
-    }
   }
 `;
 

src/state-display/state-display.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { join } from "lit/directives/join";
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/ha-relative-time";
 import { isUnavailableState } from "../data/entity";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../data/sensor";
@@ -99,8 +100,8 @@ class StateDisplay extends LitElement {
 
       return this.hass!.formatEntityState(stateObj);
     }
-    if (content === "name" && this.name) {
-      return html`${this.name}`;
+    if (content === "name") {
+      return html`${this.name || computeStateName(stateObj)}`;
     }
 
     let relativeDateTime: string | Date | undefined;