Comments

.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",
@@ -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/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,7 +20,6 @@ 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 {
@@ -87,8 +86,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,22 +119,22 @@ 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,
@@ -170,9 +169,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 +185,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 +201,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,8 +235,9 @@ 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"
@@ -253,20 +251,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 +282,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 +296,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 +312,19 @@ 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 filteredItems = this._filterSelectedOptions(options, initialValue);
 
-      if (initialItem?.type === "text" && initialItem.text) {
+      if (initialItem && 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 +332,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 +351,16 @@ 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) : "";
 
-    let filteredItems = this._filterSelectedOptions(options, currentValue);
+    this._comboBox.filteredItems = this._filterSelectedOptions(
+      options,
+      currentValue
+    );
 
     if (!filter) {
-      this._comboBox.filteredItems = filteredItems;
       return;
     }
 
@@ -389,8 +372,9 @@ export class HaEntityNamePicker extends LitElement {
       ignoreDiacritics: true,
     };
 
-    const fuse = new Fuse(filteredItems, fuseOptions);
-    filteredItems = fuse.search(filter).map((result) => result.item);
+    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
+    const filteredItems = fuse.search(filter).map((result) => result.item);
+
     filteredItems.push(this._customNameOption(input));
     this._comboBox.filteredItems = filteredItems;
   }
@@ -398,7 +382,7 @@ export class HaEntityNamePicker extends LitElement {
   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 +393,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);
@@ -427,7 +411,7 @@ export class HaEntityNamePicker extends LitElement {
 
     const item: EntityNameItem = parseOptionValue(value);
 
-    const newValue = [...this._items];
+    const newValue = [...this._value];
 
     if (this._editIndex != null) {
       newValue[this._editIndex] = item;
@@ -521,11 +505,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-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;
@@ -99,7 +101,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (floor_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="floor"
+                .type=${"floor"}
                 .itemId=${floor_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -112,7 +114,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (area_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="area"
+                .type=${"area"}
                 .itemId=${area_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -125,7 +127,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (device_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="device"
+                .type=${"device"}
                 .itemId=${device_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -138,7 +140,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (entity_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="entity"
+                .type=${"entity"}
                 .itemId=${entity_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -151,7 +153,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             (label_id) => html`
               <ha-target-picker-value-chip
                 .hass=${this.hass}
-                type="label"
+                .type=${"label"}
                 .itemId=${label_id}
                 @remove-target-item=${this._handleRemove}
                 @expand-target-item=${this._handleExpand}
@@ -171,6 +173,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="entity"
               .hass=${this.hass}
               .items=${{ entity: ensureArray(this.value?.entity_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -186,6 +189,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="device"
               .hass=${this.hass}
               .items=${{ device: ensureArray(this.value?.device_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -204,6 +208,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 floor: ensureArray(this.value?.floor_id),
                 area: ensureArray(this.value?.area_id),
               }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -219,6 +224,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               type="label"
               .hass=${this.hass}
               .items=${{ label: ensureArray(this.value?.label_id) }}
+              .collapsed=${this.compact}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -271,12 +277,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 auto-size-padding="16"
                 @wa-after-show=${this._showSelector}
                 @wa-after-hide=${this._hidePicker}
-                trap-focus
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
               >
                 ${this._renderTargetSelector()}
               </wa-popover>
@@ -287,11 +287,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 .open=${this._pickerWrapperOpen}
                 @wa-after-show=${this._showSelector}
                 @closed=${this._hidePicker}
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
               >
                 ${this._renderTargetSelector(true)}
               </ha-bottom-sheet>`
@@ -399,12 +394,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           }
         : { [typeId]: id },
     });
-
-    this.shadowRoot
-      ?.querySelector(
-        `ha-target-picker-item-group[type='${this._newTarget?.type}']`
-      )
-      ?.removeAttribute("collapsed");
   }
 
   private _handleTargetPicked = async (

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

@@ -2,13 +2,26 @@ 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 TopAppBarFixedBase {
+export class HaTopAppBarFixed extends ViewTransitionMixin(TopAppBarFixedBase) {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean, reflect: true, attribute: "content-loading" })
+  public contentLoading = true;
+
+  protected onLoadTransition(): void {
+    // Trigger the transition when content is slotted
+    this.startViewTransition(() => {
+      this.contentLoading = false;
+    });
+  }
+
   static override styles = [
     styles,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -23,6 +36,10 @@ export class HaTopAppBarFixed extends 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

@@ -7,17 +7,18 @@ import type { MDCTopAppBarAdapter } from "@material/top-app-bar/adapter";
 import { strings } from "@material/top-app-bar/constants";
 import MDCFixedTopAppBarFoundation from "@material/top-app-bar/fixed/foundation";
 import { html, css, nothing } from "lit";
-import { property, query, customElement } from "lit/decorators";
+import { property, query, customElement, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 
 export const passiveEventOptionsIfSupported = supportsPassiveEventListener
   ? { passive: true }
   : undefined;
 
 @customElement("ha-two-pane-top-app-bar-fixed")
-export class TopAppBarBaseBase extends BaseElement {
+export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
   protected override mdcFoundation!: MDCFixedTopAppBarFoundation;
 
   protected override mdcFoundationClass = MDCFixedTopAppBarFoundation;
@@ -48,6 +49,15 @@ export class TopAppBarBaseBase extends BaseElement {
 
   @query(".pane .ha-scrollbar") private _paneElement?: HTMLElement;
 
+  @state() private _loaded = false;
+
+  protected onLoadTransition(): void {
+    // Trigger the transition when content is slotted
+    this.startViewTransition(() => {
+      this._loaded = true;
+    });
+  }
+
   @property({ attribute: false, type: Object })
   get scrollTarget() {
     return this._scrollTarget || window;
@@ -144,7 +154,12 @@ export class TopAppBarBaseBase extends BaseElement {
           : nothing}
         <div class="main">
           ${this.pane ? html`<div class="shadow-container"></div>` : nothing}
-          <div class="content">
+          <div
+            class=${classMap({
+              content: true,
+              loading: !this._loaded,
+            })}
+          >
             <slot></slot>
           </div>
         </div>
@@ -245,6 +260,7 @@ export class TopAppBarBaseBase extends BaseElement {
   static override styles = [
     styles,
     haStyleScrollbar,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -341,6 +357,10 @@ export class TopAppBarBaseBase extends 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

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

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

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

src/data/area_floor.ts

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

src/data/floor_registry.ts

@@ -68,18 +68,13 @@ export const getFloorAreaLookup = (
 };
 
 export const floorCompare =
-  (entries?: HomeAssistant["floors"], order?: string[]) =>
+  (entries?: FloorRegistryEntry[], order?: string[]) =>
   (a: string, b: string) => {
     const indexA = order ? order.indexOf(a) : -1;
     const indexB = order ? order.indexOf(b) : -1;
     if (indexA === -1 && indexB === -1) {
-      const floorA = entries?.[a];
-      const floorB = entries?.[b];
-      if (floorA && floorB && floorA.level !== floorB.level) {
-        return (floorA.level ?? 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/html/index.html.template

@@ -37,6 +37,7 @@
         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,6 +61,7 @@ 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,6 +3,7 @@ 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) => {
@@ -43,7 +44,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 ReactiveElement {
+export class HassRouterPage extends ViewTransitionMixin(ReactiveElement) {
   @property({ attribute: false }) public route?: Route;
 
   protected routerOptions!: RouterOptions;
@@ -310,16 +311,19 @@ export class HassRouterPage extends ReactiveElement {
     page: string,
     routeOptions: RouteOptions
   ) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
+    this.startViewTransition(() => {
+      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);
+      (panelEl as HTMLElement).style.viewTransitionName = "layout-fade-in";
+      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,15 +1,17 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, eventOptions, property } from "lit/decorators";
+import { customElement, eventOptions, property, state } 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 { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
-class HassSubpage extends LitElement {
+class HassSubpage extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public header?: string;
@@ -24,9 +26,18 @@ class HassSubpage extends LitElement {
 
   @property({ type: Boolean }) public supervisor = false;
 
+  @state() private _loaded = false;
+
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
 
+  protected onLoadTransition(): void {
+    // Trigger the transition when content is slotted
+    this.startViewTransition(() => {
+      this._loaded = true;
+    });
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
@@ -60,7 +71,14 @@ class HassSubpage extends LitElement {
           <slot name="toolbar-icon"></slot>
         </div>
       </div>
-      <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
+      <div
+        class=${classMap({
+          content: true,
+          "ha-scrollbar": true,
+          loading: !this._loaded,
+        })}
+        @scroll=${this._saveScrollPos}
+      >
         <slot></slot>
       </div>
       <div id="fab">
@@ -85,6 +103,7 @@ class HassSubpage extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -167,6 +186,10 @@ class HassSubpage extends 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.ts

@@ -11,7 +11,8 @@ import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
 import "../components/ha-tab";
-import { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 import type { HomeAssistant, Route } from "../types";
 
 export interface PageNavigation {
@@ -29,7 +30,7 @@ export interface PageNavigation {
 }
 
 @customElement("hass-tabs-subpage")
-class HassTabsSubpage extends LitElement {
+class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -61,9 +62,18 @@ class HassTabsSubpage extends LitElement {
 
   @state() private _activeTab?: PageNavigation;
 
+  @state() private _loaded = false;
+
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
 
+  protected onLoadTransition(): void {
+    // Trigger the transition when content is slotted
+    this.startViewTransition(() => {
+      this._loaded = true;
+    });
+  }
+
   private _getTabs = memoizeOne(
     (
       tabs: PageNavigation[],
@@ -185,7 +195,12 @@ class HassTabsSubpage extends LitElement {
             </div>`
           : nothing}
         <div
-          class="content ha-scrollbar ${classMap({ tabs: showTabs })}"
+          class=${classMap({
+            content: true,
+            "ha-scrollbar": true,
+            tabs: showTabs,
+            loading: !this._loaded,
+          })}
           @scroll=${this._saveScrollPos}
         >
           <slot></slot>
@@ -214,6 +229,7 @@ class HassTabsSubpage extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -332,6 +348,10 @@ class HassTabsSubpage extends 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

@@ -0,0 +1,94 @@
+import type { PropertyValues, ReactiveElement } from "lit";
+
+type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
+
+export const ViewTransitionMixin = <
+  T extends AbstractConstructor<ReactiveElement>,
+>(
+  superClass: T
+) => {
+  abstract class ViewTransitionClass extends superClass {
+    private _slot?: HTMLSlotElement;
+
+    private _transitionTriggered = 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 (_error) {
+        // View transition skipped
+      }
+    }
+
+    /**
+     * Optional callback to execute during the load transition
+     */
+    protected onLoadTransition?(): void;
+
+    /**
+     * 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
+      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?.();
+      }
+    }
+
+    override disconnectedCallback(): void {
+      super.disconnectedCallback();
+      if (this._slot) {
+        this._slot.removeEventListener("slotchange", this._checkSlotContent);
+      }
+    }
+  }
+  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/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/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/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/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/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/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,7 +72,8 @@ 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 { haStyle } from "../../resources/styles";
+import { ViewTransitionMixin } from "../../mixins/view-transition-mixin";
+import { haStyle, haStyleViewTransitions } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -114,7 +115,7 @@ interface SubActionItem {
 }
 
 @customElement("hui-root")
-class HUIRoot extends LitElement {
+class HUIRoot extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public panel?: PanelInfo<LovelacePanelConfig>;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -130,6 +131,8 @@ class HUIRoot extends LitElement {
 
   @state() private _curView?: number | "hass-unused-entities";
 
+  @state() private _loaded = false;
+
   private _viewCache?: Record<string, HUIView>;
 
   private _viewScrollPositions: Record<string, number> = {};
@@ -153,6 +156,10 @@ class HUIRoot extends LitElement {
     );
   }
 
+  protected onLoadTransition(): void {
+    this._loaded = true;
+  }
+
   private _renderActionItems(): TemplateResult {
     const result: TemplateResult[] = [];
     if (this._editMode) {
@@ -390,14 +397,11 @@ class HUIRoot extends 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}`;
@@ -496,6 +500,7 @@ class HUIRoot extends LitElement {
         class=${classMap({
           "edit-mode": this._editMode,
           narrow: this.narrow,
+          loading: !this._loaded,
         })}
       >
         <div class="header">
@@ -1165,43 +1170,45 @@ class HUIRoot extends LitElement {
     // Recreate a new element to clear the applied themes.
     const root = this._viewRoot;
 
-    if (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
+    this.startViewTransition(() => {
+      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) {
@@ -1212,12 +1219,21 @@ class HUIRoot extends 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);
@@ -1406,6 +1422,10 @@ class HUIRoot extends 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);
@@ -1414,6 +1434,7 @@ class HUIRoot extends 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/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/styles.ts

@@ -199,3 +199,56 @@ 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,6 +42,17 @@ 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;

src/translations/en.json

@@ -3455,17 +3455,12 @@
                 "require_admin": "Admin only",
                 "sidebar": "In sidebar",
                 "filename": "Filename",
-                "url": "Open",
-                "type": "Type"
+                "url": "Open"
               },
               "open": "Open",
               "edit": "Edit",
               "delete": "Delete",
-              "add_dashboard": "Add dashboard",
-              "type": {
-                "user_created": "User created",
-                "built_in": "Built-in"
-              }
+              "add_dashboard": "Add dashboard"
             },
             "confirm_delete_title": "Delete {dashboard_title}?",
             "confirm_delete_text": "This dashboard will be permanently deleted.",
@@ -6929,7 +6924,8 @@
             "areas": "Areas",
             "other_areas": "Other areas",
             "unamed_device": "Unnamed device",
-            "others": "Others"
+            "others": "Others",
+            "common_controls": "Commonly used"
           },
           "common_controls": {
             "not_loaded": "Usage Prediction integration is not loaded.",

src/util/launch-screen.ts

@@ -3,7 +3,20 @@ import { render } from "lit";
 
 export const removeLaunchScreen = () => {
   const launchScreenElement = document.getElementById("ha-launch-screen");
-  if (launchScreenElement) {
+  if (!launchScreenElement) {
+    return;
+  }
+
+  // Use View Transition API if available and user doesn't prefer reduced motion
+  if (
+    document.startViewTransition &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    document.startViewTransition(() => {
+      launchScreenElement.parentElement!.removeChild(launchScreenElement);
+    });
+  } else {
+    // Fallback: Direct removal without transition
     launchScreenElement.parentElement!.removeChild(launchScreenElement);
   }
 };

test/common/datetime/absolute_time.test.ts

@@ -24,16 +24,10 @@ describe("absoluteTime", () => {
 
   it("should format date correctly for same year", () => {
     const from = new Date();
+    from.setUTCMonth(9, 20);
     from.setUTCHours(13, 23);
-    if (from.getUTCMonth() === 9 && from.getUTCDate() === 20) {
-      from.setUTCMonth(10, 20);
-      const result = absoluteTime(from, locale, config);
-      expect(result).toBe("Nov 20, 13:23");
-    } else {
-      from.setUTCMonth(9, 20);
-      const result = absoluteTime(from, locale, config);
-      expect(result).toBe("Oct 20, 13:23");
-    }
+    const result = absoluteTime(from, locale, config);
+    expect(result).toBe("Oct 20, 13:23");
   });
 
   it("should format date with year correctly", () => {

test/data/floor_registry.test.ts

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

test/panels/lovelace/common/entity/compute-lovelace-entity-name.test.ts

@@ -77,71 +77,4 @@ describe("computeLovelaceEntityName", () => {
     expect(mockFormatEntityName).toHaveBeenCalledTimes(1);
     expect(mockFormatEntityName).toHaveBeenCalledWith(stateObj, nameConfig);
   });
-
-  describe("when stateObj is undefined", () => {
-    it("returns empty string when nameConfig is undefined", () => {
-      const mockFormatEntityName = vi.fn();
-      const hass = createMockHass(mockFormatEntityName);
-
-      const result = computeLovelaceEntityName(hass, undefined, undefined);
-
-      expect(result).toBe("");
-      expect(mockFormatEntityName).not.toHaveBeenCalled();
-    });
-
-    it("returns text from single text EntityNameItem", () => {
-      const mockFormatEntityName = vi.fn();
-      const hass = createMockHass(mockFormatEntityName);
-      const nameConfig = { type: "text" as const, text: "Custom Text" };
-
-      const result = computeLovelaceEntityName(hass, undefined, nameConfig);
-
-      expect(result).toBe("Custom Text");
-      expect(mockFormatEntityName).not.toHaveBeenCalled();
-    });
-
-    it("returns joined text from multiple text EntityNameItems", () => {
-      const mockFormatEntityName = vi.fn();
-      const hass = createMockHass(mockFormatEntityName);
-      const nameConfig = [
-        { type: "text" as const, text: "First" },
-        { type: "text" as const, text: "Second" },
-      ];
-
-      const result = computeLovelaceEntityName(hass, undefined, nameConfig);
-
-      expect(result).toBe("First Second");
-      expect(mockFormatEntityName).not.toHaveBeenCalled();
-    });
-
-    it("returns only text items when mixed with non-text items", () => {
-      const mockFormatEntityName = vi.fn();
-      const hass = createMockHass(mockFormatEntityName);
-      const nameConfig = [
-        { type: "text" as const, text: "Prefix" },
-        { type: "device" as const },
-        { type: "text" as const, text: "Suffix" },
-        { type: "entity" as const },
-      ];
-
-      const result = computeLovelaceEntityName(hass, undefined, nameConfig);
-
-      expect(result).toBe("Prefix Suffix");
-      expect(mockFormatEntityName).not.toHaveBeenCalled();
-    });
-
-    it("returns empty string when no text items in config", () => {
-      const mockFormatEntityName = vi.fn();
-      const hass = createMockHass(mockFormatEntityName);
-      const nameConfig = [
-        { type: "device" as const },
-        { type: "entity" as const },
-      ];
-
-      const result = computeLovelaceEntityName(hass, undefined, nameConfig);
-
-      expect(result).toBe("");
-      expect(mockFormatEntityName).not.toHaveBeenCalled();
-    });
-  });
 });