Remove

Do not show num device and entity domain

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -61,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/init@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
         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@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/autobuild@16140ae1a102900babc80a33c44059580f687047 # v4.30.9
 
       # ℹ️ 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@f443b600d91635bebf5b0d9ebc620189c0d6fba5 # v4.30.8
+        uses: github/codeql-action/analyze@16140ae1a102900babc80a33c44059580f687047 # v4.30.9

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
+        uses: relative-ci/agent-action@8504826a02078b05756e4c07e380023cc2c4274a # v3.1.0
         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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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.09.1
+        uses: home-assistant/wheels@2025.10.0
         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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.nvmrc

@@ -1 +1 @@
-22.20.0
+22.21.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.5",
+    "@codemirror/view": "6.38.6",
     "@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.4",
-    "@lezer/highlight": "1.2.1",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.5",
+    "@lezer/highlight": "1.2.2",
     "@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.0",
+    "marked": "16.4.1",
     "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.0",
+    "@lokalise/node-api": "15.3.1",
     "@octokit/auth-oauth-device": "8.0.2",
     "@octokit/plugin-retry": "8.0.2",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.3.2",
+    "@rsdoctor/rspack-plugin": "1.3.3",
     "@rspack/core": "1.5.8",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -183,14 +183,14 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.37.0",
+    "eslint": "9.38.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-lit": "2.1.1",
     "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.2.0",
+    "eslint-plugin-unused-imports": "4.3.0",
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.2",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.0",
+    "jsdom": "27.0.1",
     "jszip": "3.10.1",
     "lint-staged": "16.2.4",
     "lit-analyzer": "2.0.3",
@@ -217,7 +217,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.0",
+    "typescript-eslint": "8.46.1",
     "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,6 +6,7 @@ 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 {
@@ -25,12 +26,14 @@ 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="plain"
+        .appearance=${this.appearance}
         @click=${this._buttonTapped}
         tabindex="0"
       >

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

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

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

@@ -1,4 +1,4 @@
-import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDragHorizontalVariant, 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=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                         slot="graphic"
                       ></ha-svg-icon>`
                     : nothing}

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

@@ -1,13 +1,13 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } 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=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                       ></ha-svg-icon>
                     `
                   : nothing}

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

@@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
@@ -20,6 +20,7 @@ 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 {
@@ -86,8 +87,8 @@ export class HaEntityNamePicker extends LitElement {
 
   private _editIndex?: number;
 
-  private _validOptions = memoizeOne((entityId?: string) => {
-    const options = new Set<string>();
+  private _validTypes = memoizeOne((entityId?: string) => {
+    const options = new Set<string>(["text"]);
     if (!entityId) {
       return options;
     }
@@ -119,22 +120,22 @@ export class HaEntityNamePicker extends LitElement {
       return [];
     }
 
-    const options = this._validOptions(entityId);
+    const types = this._validTypes(entityId);
 
     const items = (
       ["entity", "device", "area", "floor"] as const
     ).map<EntityNameOption>((name) => {
       const stateObj = this.hass.states[entityId];
-      const isValid = options.has(name);
+      const isValid = types.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,
@@ -169,9 +170,9 @@ export class HaEntityNamePicker extends LitElement {
   };
 
   protected render() {
-    const value = this._value;
+    const value = this._items;
     const options = this._getOptions(this.entityId);
-    const validOptions = this._validOptions(this.entityId);
+    const validTypes = this._validTypes(this.entityId);
 
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -185,12 +186,11 @@ export class HaEntityNamePicker extends LitElement {
         >
           <ha-chip-set>
             ${repeat(
-              this._value,
+              this._items,
               (item) => item,
               (item: EntityNameItem, idx) => {
                 const label = this._formatItem(item);
-                const isValid =
-                  item.type === "text" || validOptions.has(item.type);
+                const isValid = validTypes.has(item.type);
                 return html`
                   <ha-input-chip
                     data-idx=${idx}
@@ -201,7 +201,10 @@ export class HaEntityNamePicker extends LitElement {
                     .disabled=${this.disabled}
                     class=${!isValid ? "invalid" : ""}
                   >
-                    <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiDragHorizontalVariant}
+                    ></ha-svg-icon>
                     <span>${label}</span>
                   </ha-input-chip>
                 `;
@@ -235,9 +238,8 @@ export class HaEntityNamePicker extends LitElement {
             .hass=${this.hass}
             .value=${""}
             .autofocus=${this.autofocus}
-            .disabled=${this.disabled || !this.entityId}
+            .disabled=${this.disabled}
             .required=${this.required && !value.length}
-            .helper=${this.helper}
             .items=${options}
             allow-custom-value
             item-id-path="value"
@@ -251,9 +253,20 @@ 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;
@@ -282,13 +295,16 @@ export class HaEntityNamePicker extends LitElement {
     this._opened = true;
   }
 
-  private get _value(): EntityNameItem[] {
+  private get _items(): EntityNameItem[] {
     return this._toItems(this.value);
   }
 
   private _toItems = memoizeOne((value?: typeof this.value) => {
     if (typeof value === "string") {
-      return [{ type: "text", text: value } as const];
+      if (value === "") {
+        return [];
+      }
+      return [{ type: "text", text: value } satisfies EntityNameItem];
     }
     return value ? ensureArray(value) : [];
   });
@@ -296,7 +312,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];
@@ -312,19 +328,21 @@ export class HaEntityNamePicker extends LitElement {
       const options = this._comboBox.items || [];
 
       const initialItem =
-        this._editIndex != null ? this._value[this._editIndex] : undefined;
+        this._editIndex != null ? this._items[this._editIndex] : undefined;
 
       const initialValue = initialItem ? formatOptionValue(initialItem) : "";
 
       const filteredItems = this._filterSelectedOptions(options, initialValue);
 
-      if (initialItem && initialItem.type === "text" && initialItem.text) {
+      if (initialItem?.type === "text" && initialItem.text) {
         filteredItems.push(this._customNameOption(initialItem.text));
       }
+
       this._comboBox.filteredItems = filteredItems;
       this._comboBox.setInputValue(initialValue);
     } else {
       this._opened = false;
+      this._comboBox.setInputValue("");
     }
   }
 
@@ -332,15 +350,16 @@ export class HaEntityNamePicker extends LitElement {
     options: EntityNameOption[],
     current?: string
   ) => {
-    const value = this._value;
+    const items = this._items;
 
-    const types = value.map((item) => item.type) as string[];
+    const excludedValues = new Set(
+      items
+        .filter((item) => UNIQUE_TYPES.has(item.type))
+        .map((item) => formatOptionValue(item))
+    );
 
     const filteredOptions = options.filter(
-      (option) =>
-        !UNIQUE_TYPES.has(option.value) ||
-        !types.includes(option.value) ||
-        option.value === current
+      (option) => !excludedValues.has(option.value) || option.value === current
     );
     return filteredOptions;
   };
@@ -351,16 +370,14 @@ export class HaEntityNamePicker extends LitElement {
     const options = this._comboBox.items || [];
 
     const currentItem =
-      this._editIndex != null ? this._value[this._editIndex] : undefined;
+      this._editIndex != null ? this._items[this._editIndex] : undefined;
 
     const currentValue = currentItem ? formatOptionValue(currentItem) : "";
 
-    this._comboBox.filteredItems = this._filterSelectedOptions(
-      options,
-      currentValue
-    );
+    let filteredItems = this._filterSelectedOptions(options, currentValue);
 
     if (!filter) {
+      this._comboBox.filteredItems = filteredItems;
       return;
     }
 
@@ -372,9 +389,8 @@ export class HaEntityNamePicker extends LitElement {
       ignoreDiacritics: true,
     };
 
-    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
-    const filteredItems = fuse.search(filter).map((result) => result.item);
-
+    const fuse = new Fuse(filteredItems, fuseOptions);
+    filteredItems = fuse.search(filter).map((result) => result.item);
     filteredItems.push(this._customNameOption(input));
     this._comboBox.filteredItems = filteredItems;
   }
@@ -382,7 +398,7 @@ export class HaEntityNamePicker extends LitElement {
   private async _moveItem(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
-    const value = this._value;
+    const value = this._items;
     const newValue = value.concat();
     const element = newValue.splice(oldIndex, 1)[0];
     newValue.splice(newIndex, 0, element);
@@ -393,7 +409,7 @@ export class HaEntityNamePicker extends LitElement {
 
   private async _removeItem(ev) {
     ev.stopPropagation();
-    const value = [...this._value];
+    const value = [...this._items];
     const idx = parseInt(ev.target.dataset.idx, 10);
     value.splice(idx, 1);
     this._setValue(value);
@@ -411,7 +427,7 @@ export class HaEntityNamePicker extends LitElement {
 
     const item: EntityNameItem = parseOptionValue(value);
 
-    const newValue = [...this._value];
+    const newValue = [...this._items];
 
     if (this._editIndex != null) {
       newValue[this._editIndex] = item;
@@ -505,6 +521,11 @@ 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 { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -195,7 +195,10 @@ class HaEntityStatePicker extends LitElement {
                         .label=${label}
                         selected
                       >
-                        <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          slot="icon"
+                          .path=${mdiDragHorizontalVariant}
+                        ></ha-svg-icon>
                         ${label}
                       </ha-input-chip>
                     `;

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

@@ -1,4 +1,4 @@
-import { mdiDrag, mdiTextureBox } from "@mdi/js";
+import { mdiDragHorizontalVariant, 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=${mdiDrag}
+                        .path=${mdiDragHorizontalVariant}
                       ></ha-svg-icon>
                     `}
                 <ha-items-display-editor

src/components/ha-code-editor.ts

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

src/components/ha-dialog-header.ts

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

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

@@ -1,5 +1,5 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import { mdiDragHorizontalVariant, 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=${mdiDrag}
+                          .path=${mdiDragHorizontalVariant}
                           slot="end"
                         ></ha-svg-icon>
                       `

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

@@ -36,6 +36,8 @@ 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;
@@ -102,6 +104,7 @@ 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,6 +29,8 @@ 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;
@@ -69,6 +71,7 @@ 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
@@ -86,6 +89,7 @@ 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

@@ -1,152 +0,0 @@
-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,4 +1,9 @@
-import { mdiClose, mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
+import {
+  mdiClose,
+  mdiDelete,
+  mdiDragHorizontalVariant,
+  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";
@@ -92,7 +97,7 @@ export class HaObjectSelector extends LitElement {
           ? html`
               <ha-svg-icon
                 class="handle"
-                .path=${mdiDrag}
+                .path=${mdiDragHorizontalVariant}
                 slot="start"
               ></ha-svg-icon>
             `

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

@@ -1,4 +1,4 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragHorizontalVariant } 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=${mdiDrag}
+                                  .path=${mdiDragHorizontalVariant}
                                 ></ha-svg-icon>
                               `
                             : nothing}

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

@@ -34,7 +34,6 @@ 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,12 +59,33 @@ 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,8 +36,6 @@ 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;
@@ -76,7 +74,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @state() private _narrow = false;
 
-  @state() private _pickerFilters: TargetTypeFloorless[] = [];
+  @state() private _pickerFilter?: TargetTypeFloorless;
 
   @state() private _pickerWrapperOpen = false;
 
@@ -101,7 +99,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}
@@ -114,7 +112,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}
@@ -127,7 +125,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}
@@ -140,7 +138,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}
@@ -153,7 +151,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}
@@ -173,7 +171,6 @@ 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}
@@ -189,7 +186,6 @@ 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}
@@ -208,7 +204,6 @@ 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}
@@ -224,7 +219,6 @@ 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}
@@ -277,6 +271,12 @@ 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,6 +287,11 @@ 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>`
@@ -330,12 +335,16 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private _handleUpdatePickerFilters(ev: CustomEvent<TargetTypeFloorless[]>) {
-    this._updatePickerFilters(ev.detail);
+  private _handleUpdatePickerFilter(
+    ev: CustomEvent<TargetTypeFloorless | undefined>
+  ) {
+    this._updatePickerFilter(
+      typeof ev.detail === "string" ? ev.detail : undefined
+    );
   }
 
-  private _updatePickerFilters = (filters: TargetTypeFloorless[]) => {
-    this._pickerFilters = filters;
+  private _updatePickerFilter = (filter?: TargetTypeFloorless) => {
+    this._pickerFilter = filter;
   };
 
   private _hidePicker() {
@@ -355,8 +364,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return html`
       <ha-target-picker-selector
         .hass=${this.hass}
-        @filter-types-changed=${this._handleUpdatePickerFilters}
-        .filterTypes=${this._pickerFilters}
+        @filter-type-changed=${this._handleUpdatePickerFilter}
+        .filterType=${this._pickerFilter}
         @target-picked=${this._handleTargetPicked}
         @create-domain-picked=${this._handleCreateDomain}
         .targetValue=${this.value}
@@ -394,6 +403,12 @@ 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 override onLoadTransition(): void {
+    // Use reflected property since we can't add class to base component's rendered elements
+    this.startViewTransition(() => {
+      this.contentLoading = false;
+    });
+  }
+
   static override styles = [
     styles,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -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

@@ -10,14 +10,15 @@ import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { 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;
@@ -144,7 +145,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 +251,7 @@ export class TopAppBarBaseBase extends BaseElement {
   static override styles = [
     styles,
     haStyleScrollbar,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -341,6 +348,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,10 +247,7 @@ export class HaWaDialog extends LitElement {
       .header-title {
         margin: 0;
         margin-bottom: 0;
-        color: var(
-          --ha-dialog-header-title-color,
-          var(--ha-color-on-surface-default, var(--primary-text-color))
-        );
+        color: var(--ha-dialog-header-title-color, 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 }) public collapsed = false;
+  @property({ type: Boolean, reflect: true }) public collapsed = false;
 
   @property({ attribute: false })
   public deviceFilter?: HaDevicePickerDeviceFilterFunc;
@@ -50,7 +50,11 @@ export class HaTargetPickerItemGroup extends LitElement {
       }
     });
 
-    return html`<ha-expansion-panel .expanded=${!this.collapsed} left-chevron>
+    return html`<ha-expansion-panel
+      .expanded=${!this.collapsed}
+      left-chevron
+      @expanded-changed=${this._expandedChanged}
+    >
       <div slot="header" class="heading">
         ${this.hass.localize(
           `ui.components.target-picker.selected.${this.type}`,
@@ -78,6 +82,10 @@ export class HaTargetPickerItemGroup extends LitElement {
     </ha-expansion-panel>`;
   }
 
+  private _expandedChanged(ev: CustomEvent) {
+    this.collapsed = !ev.detail.expanded;
+  }
+
   static styles = css`
     :host {
       display: block;

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

@@ -114,7 +114,6 @@ export class HaTargetPickerItemRow extends LitElement {
     const { name, context, iconPath, fallbackIconPath, stateObject } =
       this._itemData(this.type, this.itemId);
 
-    const showDevices = ["floor", "area", "label"].includes(this.type);
     const showEntities = this.type !== "entity";
 
     const entries = this.parentEntries || this._entries;
@@ -130,7 +129,7 @@ export class HaTargetPickerItemRow extends LitElement {
 
     return html`
       <ha-md-list-item type="text">
-        <div slot="start">
+        <div class="icon" slot="start">
           ${this.subEntry
             ? html`
                 <div class="horizontal-line-wrapper">
@@ -168,11 +167,12 @@ export class HaTargetPickerItemRow extends LitElement {
                 >${this._domainName}</span
               >`
             : nothing}
-        ${!this.subEntry &&
-        ((entries && (showEntities || showDevices)) || this._domainName)
+        ${!this.subEntry && entries && showEntities
           ? html`
               <div slot="end" class="summary">
-                ${showEntities && !this.expand
+                ${showEntities &&
+                !this.expand &&
+                entries?.referenced_entities.length
                   ? html`<button class="main link" @click=${this._openDetails}>
                       ${this.hass.localize(
                         "ui.components.target-picker.entities_count",
@@ -191,21 +191,6 @@ export class HaTargetPickerItemRow extends LitElement {
                         )}
                       </span>`
                     : nothing}
-                ${showDevices
-                  ? html`<span class="secondary"
-                      >${this.hass.localize(
-                        "ui.components.target-picker.devices_count",
-                        {
-                          count: entries?.referenced_devices.length,
-                        }
-                      )}</span
-                    >`
-                  : nothing}
-                ${this._domainName && !showDevices
-                  ? html`<span class="secondary domain"
-                      >${this._domainName}</span
-                    >`
-                  : nothing}
               </div>
             `
           : nothing}
@@ -455,6 +440,9 @@ 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 || "")
           ) {
@@ -606,6 +594,11 @@ export class HaTargetPickerItemRow extends LitElement {
       state-badge {
         color: var(--ha-color-on-neutral-quiet);
       }
+
+      .icon {
+        display: flex;
+      }
+
       img {
         width: 24px;
         height: 24px;
@@ -629,9 +622,6 @@ export class HaTargetPickerItemRow extends LitElement {
         font-size: var(--ha-font-size-s);
         color: var(--secondary-text-color);
       }
-      .domain {
-        font-family: var(--ha-font-family-code);
-      }
 
       .entries-tree {
         display: flex;

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

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

src/data/area_floor.ts

@@ -1,7 +1,6 @@
 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";
@@ -13,7 +12,11 @@ import {
 } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
 import type { EntityRegistryDisplayEntry } from "./entity_registry";
-import { getFloorAreaLookup, type FloorRegistryEntry } from "./floor_registry";
+import {
+  floorCompare,
+  getFloorAreaLookup,
+  type FloorRegistryEntry,
+} from "./floor_registry";
 
 export interface FloorComboBoxItem extends PickerComboBoxItem {
   type: "floor" | "area";
@@ -184,6 +187,8 @@ export const getAreasAndFloors = (
     (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
   );
 
+  const compare = floorCompare(haFloors);
+
   // @ts-ignore
   const floorAreaEntries: [
     FloorRegistryEntry | undefined,
@@ -193,12 +198,7 @@ export const getAreasAndFloors = (
       const floor = floors.find((fl) => fl.floor_id === floorId)!;
       return [floor, floorAreas] as const;
     })
-    .sort(([floorA], [floorB]) => {
-      if (floorA.level !== floorB.level) {
-        return (floorA.level ?? 0) - (floorB.level ?? 0);
-      }
-      return stringCompare(floorA.name, floorB.name);
-    });
+    .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
 
   const items: FloorComboBoxItem[] = [];
 
@@ -218,6 +218,7 @@ 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,13 +68,18 @@ export const getFloorAreaLookup = (
 };
 
 export const floorCompare =
-  (entries?: FloorRegistryEntry[], order?: string[]) =>
+  (entries?: HomeAssistant["floors"], 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 nameA = entries?.[a]?.name ?? a;
-      const nameB = entries?.[b]?.name ?? b;
+      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;
       return stringCompare(nameA, nameB);
     }
     if (indexA === -1) {

src/data/ws-area_registry.ts

@@ -1,18 +1,13 @@
 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",
-    })
-    .then((areas) =>
-      areas.sort((ent1, ent2) => stringCompare(ent1.name, ent2.name))
-    );
+  conn.sendMessagePromise<AreaRegistryEntry[]>({
+    type: "config/area_registry/list",
+  });
 
 const subscribeAreaRegistryUpdates = (
   conn: Connection,

src/data/ws-floor_registry.ts

@@ -1,23 +1,13 @@
 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({
-      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);
-      })
-    );
+  conn.sendMessagePromise<FloorRegistryEntry[]>({
+    type: "config/floor_registry/list",
+  });
 
 const subscribeFloorRegistryUpdates = (
   conn: Connection,

src/dialogs/enter-code/dialog-enter-code.ts

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

src/html/index.html.template

@@ -37,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,18 @@ 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);
+      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 { 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;
@@ -60,7 +62,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 +94,7 @@ class HassSubpage extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -167,6 +177,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-data-table.ts

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

src/layouts/hass-tabs-subpage.ts

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

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

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

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

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

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

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

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

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

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

@@ -10,8 +10,10 @@ 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";
@@ -25,7 +27,7 @@ const stateConditionStruct = object({
   condition: literal("state"),
   entity_id: optional(string()),
   attribute: optional(string()),
-  state: optional(string()),
+  state: optional(union([string(), array(string())])),
   for: optional(union([number(), string(), forDictStruct])),
   enabled: optional(boolean()),
 });
@@ -69,7 +71,7 @@ const SCHEMA = [
     name: "state",
     required: true,
     selector: {
-      state: {},
+      state: { multiple: true },
     },
     context: {
       filter_entity: "entity_id",
@@ -88,7 +90,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) {
@@ -105,7 +107,11 @@ export class HaStateCondition extends LitElement implements ConditionElement {
 
   protected render() {
     const trgFor = createDurationData(this.condition.for);
-    const data = { ...this.condition, for: trgFor };
+    const data = {
+      ...this.condition,
+      state: ensureArray(this.condition.state) || [],
+      for: trgFor,
+    };
 
     return html`
       <ha-form
@@ -129,10 +135,9 @@ export class HaStateCondition extends LitElement implements ConditionElement {
         : {}
     );
 
-    // 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 = "";
+    // Ensure `state` stays an array for multi-select. If absent, set to []
+    if (newCondition.state === undefined || newCondition.state === "") {
+      newCondition.state = [];
     }
 
     fireEvent(this, "value-changed", { value: newCondition });

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

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

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

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

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

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

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

@@ -244,7 +244,8 @@ class HaConfigBackupSettings extends LitElement {
                   `
                 : nothing}
             </div>
-            ${!this.cloudStatus?.logged_in
+            ${!this.cloudStatus?.logged_in &&
+            isComponentLoaded(this.hass, "cloud")
               ? html`<ha-card class="cloud-info">
                   <div class="cloud-header">
                     <img
@@ -279,7 +280,10 @@ class HaConfigBackupSettings extends LitElement {
                         "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
                       )}
                     </ha-button>
-                    <ha-button href="/config/cloud/register">
+                    <ha-button
+                      href="/config/cloud/register"
+                      appearance="filled"
+                    >
                       ${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) => conn[0] === "mac" || conn[0] === "bluetooth"
+    return this.device.connections.filter((conn) =>
+      ["mac", "bluetooth", "zigbee"].includes(conn[0])
     );
   }
 

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

@@ -38,7 +38,6 @@ 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,4 +1,10 @@
-import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDevices,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { repeat } from "lit/directives/repeat";
@@ -89,7 +95,9 @@ export class EnergyDeviceSettings extends LitElement {
                 (device) => html`
                   <div class="row" .device=${device}>
                     <div class="handle">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></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, mdiDrag } from "@mdi/js";
+import { mdiDelete, mdiDragHorizontalVariant } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -111,7 +111,9 @@ class HaInputSelectForm extends LitElement {
                     <ha-list-item class="option" hasMeta>
                       <div class="optioncontent">
                         <div class="handle">
-                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                          <ha-svg-icon
+                            .path=${mdiDragHorizontalVariant}
+                          ></ha-svg-icon>
                         </div>
                         ${option}
                       </div>

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

@@ -528,18 +528,20 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     </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>
+              ${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}
               ${Array.from(supportedSubentryTypes).map(
                 (flowType) =>
                   html`<ha-button

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

@@ -220,6 +220,9 @@ 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,15 +117,6 @@ 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"
@@ -136,6 +127,15 @@ 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,6 +230,10 @@ export class ZHAClusterAttributes extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          border: none;
+        }
+
         ha-select {
           margin-top: 16px;
         }
@@ -263,6 +267,12 @@ 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,6 +108,7 @@ 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"
@@ -187,6 +188,10 @@ export class ZHAClusterCommands extends LitElement {
     return [
       haStyle,
       css`
+        ha-card {
+          border: none;
+        }
+
         ha-select {
           margin-top: 16px;
         }
@@ -239,6 +244,11 @@ 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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
@@ -43,6 +43,7 @@ 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";
 
@@ -88,6 +89,8 @@ 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) {
@@ -290,7 +293,8 @@ class ZHAConfigDashboard extends LitElement {
                       ></ha-form>
                     </div>
                     <div class="card-actions">
-                      <ha-button
+                      <ha-progress-button
+                        id="config-save-button"
                         appearance="filled"
                         variant="brand"
                         @click=${this._updateConfiguration}
@@ -298,7 +302,7 @@ class ZHAConfigDashboard extends LitElement {
                         ${this.hass.localize(
                           "ui.panel.config.zha.configuration_page.update_button"
                         )}
-                      </ha-button>
+                      </ha-progress-button>
                     </div>
                   </ha-card>`
               )
@@ -416,7 +420,15 @@ class ZHAConfigDashboard extends LitElement {
   }
 
   private async _updateConfiguration(): Promise<any> {
-    await updateZHAConfiguration(this.hass!, this._configuration!.data);
+    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;
+    }
   }
 
   private _computeLabelCallback(localize, section: string) {

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

@@ -60,6 +60,15 @@ 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) ||
@@ -67,13 +76,6 @@ 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>
     `;
@@ -133,6 +135,10 @@ export class ZHADeviceBindingControl extends LitElement {
           width: 100%;
         }
 
+        .content {
+          padding-top: var(--ha-space-2);
+        }
+
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -145,6 +151,11 @@ 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,23 +85,24 @@ 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>
@@ -205,6 +206,10 @@ export class ZHAGroupBindingControl extends LitElement {
           width: 100%;
         }
 
+        .content {
+          padding-top: var(--ha-space-2);
+        }
+
         .command-picker {
           align-items: center;
           padding-left: 28px;
@@ -225,6 +230,12 @@ export class ZHAGroupBindingControl extends LitElement {
         .sectionHeader {
           flex-grow: 1;
         }
+
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--ha-space-1);
+        }
       `,
     ];
   }

src/panels/config/logs/error-log-card.ts

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

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

@@ -9,7 +9,6 @@ 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";
@@ -62,7 +61,7 @@ type DataTableItem = Pick<
 > & {
   default: boolean;
   filename: string;
-  iconColor?: string;
+  type: string;
 };
 
 @customElement("ha-config-lovelace-dashboards")
@@ -107,6 +106,20 @@ 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");
@@ -132,15 +145,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           template: (dashboard) =>
             dashboard.icon
               ? html`
-                  <ha-icon
-                    slot="item-icon"
-                    .icon=${dashboard.icon}
-                    style=${ifDefined(
-                      dashboard.iconColor
-                        ? `color: ${dashboard.iconColor}`
-                        : undefined
-                    )}
-                  ></ha-icon>
+                  <ha-icon slot="item-icon" .icon=${dashboard.icon}></ha-icon>
                 `
               : nothing,
         },
@@ -177,6 +182,15 @@ 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"
@@ -287,7 +301,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           url_path: "lovelace",
           mode: defaultMode,
           filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
-          iconColor: "var(--primary-color)",
+          type: this._localizeType("built_in"),
         },
       ];
       if (isComponentLoaded(this.hass, "energy")) {
@@ -298,9 +312,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"),
         });
       }
 
@@ -312,9 +326,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"),
         });
       }
 
@@ -326,9 +340,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"),
         });
       }
 
@@ -340,9 +354,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"),
         });
       }
 
@@ -351,16 +365,25 @@ 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,
-          }))
+          .map(
+            (dashboard) =>
+              ({
+                filename: "",
+                ...dashboard,
+                default: defaultUrlPath === dashboard.url_path,
+                type: this._localizeType("user_created"),
+              }) satisfies DataTableItem
+          )
       );
       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> `;
@@ -380,9 +403,13 @@ 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}
@@ -443,13 +470,13 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private _canDelete(urlPath: string) {
-    return !["lovelace", "energy", "light", "security", "climate"].includes(
+    return !["lovelace", "energy", "light", "safety", "climate"].includes(
       urlPath
     );
   }
 
   private _canEdit(urlPath: string) {
-    return !["light", "security", "climate"].includes(urlPath);
+    return !["light", "safety", "climate"].includes(urlPath);
   }
 
   private _handleDelete = async (item: DataTableItem) => {
@@ -571,6 +598,14 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;
   }
+
+  private _handleGroupingChanged(ev: CustomEvent) {
+    this._activeGrouping = ev.detail.value;
+  }
+
+  private _handleCollapseChanged(ev: CustomEvent) {
+    this._activeCollapsed = ev.detail.value;
+  }
 }
 
 declare global {

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

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

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

@@ -11,7 +11,6 @@ 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";
@@ -20,6 +19,7 @@ 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,11 +162,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
     if (!stateObj) {
       return html`
         <ha-badge .label=${entityId} class="error">
-          <ha-svg-icon
-            slot="icon"
-            .hass=${this.hass}
-            .path=${mdiAlertCircle}
-          ></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiAlertCircle}></ha-svg-icon>
           ${this.hass.localize("ui.badge.entity.not_found")}
         </ha-badge>
       `;
@@ -179,22 +175,22 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       "--badge-color": color,
     };
 
-    const stateDisplay = html`
-      <state-display
-        .stateObj=${stateObj}
-        .hass=${this.hass}
-        .content=${this._config.state_content}
-        .name=${this._config.name}
-      >
-      </state-display>
-    `;
-
     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}
+      >
+      </state-display>
+    `;
+
     const showState = this._config.show_state;
     const showName = this._config.show_name;
     const showIcon = this._config.show_icon;

src/panels/lovelace/cards/hui-alarm-panel-card.ts

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

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

@@ -9,13 +9,14 @@ 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 { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateActive } from "../../../common/entity/state_active";
 import {
   stateColorBrightness,
   stateColorCss,
@@ -40,6 +41,7 @@ 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";
@@ -49,8 +51,6 @@ 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,9 +183,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = this._config.show_name
-      ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
-      : "";
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     return html`
       <ha-card
@@ -195,8 +197,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           hasDoubleClick: hasAction(this._config!.double_tap_action),
         })}
         role="button"
-        aria-label=${this._config.name ||
-        (stateObj ? computeStateName(stateObj) : "")}
+        aria-label=${name}
         tabindex=${ifDefined(
           hasAction(this._config.tap_action) ? "0" : undefined
         )}

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

@@ -272,7 +272,6 @@ 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,
-  mdiDrag,
+  mdiDragHorizontalVariant,
   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=${mdiDrag}
+                      .path=${mdiDragHorizontalVariant}
                       slot="meta"
                     >
                     </ha-svg-icon>

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

@@ -4,6 +4,7 @@ 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).
@@ -15,9 +16,24 @@ import type { HomeAssistant } from "../../../../types";
  */
 export const computeLovelaceEntityName = (
   hass: HomeAssistant,
-  stateObj: HassEntity,
+  stateObj: HassEntity | undefined,
   nameConfig: string | EntityNameItem | EntityNameItem[] | undefined
-): string =>
-  typeof nameConfig === "string"
-    ? nameConfig
-    : hass.formatEntityName(stateObj, nameConfig || DEFAULT_ENTITY_NAME);
+): 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 "";
+};

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

@@ -1,4 +1,4 @@
-import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDragHorizontalVariant, mdiPencil } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -66,7 +66,11 @@ export class HuiEntityEditor extends LitElement {
 
     return html`
       <ha-md-list-item class="item">
-        <ha-svg-icon class="handle" .path=${mdiDrag} slot="start"></ha-svg-icon>
+        <ha-svg-icon
+          class="handle"
+          .path=${mdiDragHorizontalVariant}
+          slot="start"
+        ></ha-svg-icon>
 
         <div slot="headline" class="label">${primary}</div>
         ${secondary
@@ -152,7 +156,9 @@ export class HuiEntityEditor extends LitElement {
                 (entityConf, index) => html`
                   <div class="entity" data-entity-id=${entityConf.entity}>
                     <div class="handle">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></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, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiDelete, mdiDragHorizontalVariant, 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=${mdiDrag}
+            .path=${mdiDragHorizontalVariant}
           ></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,6 +5,7 @@ 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,
@@ -16,13 +17,14 @@ 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(string()),
+    name: optional(entityNameStruct),
     show_name: optional(boolean()),
     icon: optional(string()),
     show_icon: optional(boolean()),
@@ -68,7 +70,13 @@ export class HuiButtonCardEditor
     (entityId: string | undefined) =>
       [
         { name: "entity", selector: { entity: {} } },
-        { name: "name", selector: { text: {} } },
+        {
+          name: "name",
+          selector: {
+            entity_name: { default_name: DEFAULT_ENTITY_NAME },
+          },
+          context: { entity: "entity" },
+        },
         {
           name: "",
           type: "grid",

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

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

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

@@ -1,5 +1,10 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDragHorizontalVariant,
+  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";
@@ -86,7 +91,9 @@ export class HuiHeadingBadgesEditor extends LitElement {
                     return html`
                       <div class="badge">
                         <div class="handle">
-                          <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                          <ha-svg-icon
+                            .path=${mdiDragHorizontalVariant}
+                          ></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,6 +13,7 @@ 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";
@@ -27,6 +28,7 @@ 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",
@@ -37,7 +39,7 @@ export const DEFAULT_CONFIG: Partial<EntityHeadingBadgeConfig> = {
 const entityConfigStruct = object({
   type: optional(string()),
   entity: optional(string()),
-  name: optional(string()),
+  name: optional(entityNameStruct),
   icon: optional(string()),
   state_content: optional(union([string(), array(string())])),
   show_state: optional(boolean()),
@@ -92,8 +94,11 @@ export class HuiHeadingEntityEditor
                 {
                   name: "name",
                   selector: {
-                    text: {},
+                    entity_name: {
+                      default_name: DEFAULT_ENTITY_NAME,
+                    },
                   },
+                  context: { entity: "entity" },
                 },
                 {
                   name: "icon",

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

@@ -1,4 +1,4 @@
-import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiClose, mdiDragHorizontalVariant, 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=${mdiDrag}></ha-svg-icon>
+                  <ha-svg-icon .path=${mdiDragHorizontalVariant}></ha-svg-icon>
                 </div>
                 ${entityConf.type
                   ? html`

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

@@ -7,7 +7,6 @@ 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";
@@ -16,6 +15,7 @@ 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,7 +137,11 @@ export class HuiEntityHeadingBadge
       "--icon-color": color,
     };
 
-    const name = config.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     return html`
       <ha-heading-badge
@@ -166,7 +170,7 @@ export class HuiEntityHeadingBadge
                 .hass=${this.hass}
                 .stateObj=${stateObj}
                 .content=${config.state_content}
-                .name=${config.name}
+                .name=${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;
@@ -390,11 +391,14 @@ class HUIRoot extends LitElement {
         <ha-button-menu slot="actionItems">
           <ha-icon-button
             slot="trigger"
-            .label=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
+            id="dashboardmenu"
             .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}`;
@@ -493,6 +497,7 @@ class HUIRoot extends LitElement {
         class=${classMap({
           "edit-mode": this._editMode,
           narrow: this.narrow,
+          loading: !this._loaded,
         })}
       >
         <div class="header">
@@ -1162,43 +1167,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) {
@@ -1209,12 +1216,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);
@@ -1403,6 +1419,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);
@@ -1411,6 +1431,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,13 +3,11 @@ 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,
-  stringCompare,
-} from "../../../../../common/string/compare";
+import { orderCompare } 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";
@@ -304,18 +302,11 @@ export const getFloors = (
   floorsOrder?: string[]
 ): FloorRegistryEntry[] => {
   const floors = Object.values(entries);
-  const compare = orderCompare(floorsOrder || []);
+  const compare = floorCompare(entries, floorsOrder);
 
-  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);
-  });
+  return floors.sort((floorA, floorB) =>
+    compare(floorA.floor_id, floorB.floor_id)
+  );
 };
 
 export const computeAreaPath = (areaId: string): string => `areas-${areaId}`;

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

@@ -135,7 +135,6 @@ 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,8 +1,12 @@
 import { css, LitElement, nothing } from "lit";
 import type { PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } 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 {
@@ -13,10 +17,27 @@ 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(
@@ -52,13 +73,19 @@ 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(background.image)}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || background.image)}')`;
     }
     if (typeof background === "string") {
-      return background;
+      if (isMediaSourceContentId(background) && !this.resolvedImage) {
+        return null;
+      }
+      return this.resolvedImage || background;
     }
     return null;
   }
@@ -90,6 +117,10 @@ export class HUIViewBackground extends LitElement {
 
     if (changedProperties.has("background")) {
       this._applyTheme();
+      this._fetchMedia();
+    }
+    if (changedProperties.has("resolvedImage")) {
+      this._applyTheme();
     }
   }
 

src/resources/codemirror.ts

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

src/resources/styles.ts

@@ -199,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,7 +155,6 @@ export const semanticColorStyles = css`
 
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-95);
-    --ha-color-on-surface-default: var(--ha-color-neutral-05);
   }
 `;
 
@@ -287,6 +286,5 @@ 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,7 +5,6 @@ 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";
@@ -100,8 +99,8 @@ class StateDisplay extends LitElement {
 
       return this.hass!.formatEntityState(stateObj);
     }
-    if (content === "name") {
-      return html`${this.name || computeStateName(stateObj)}`;
+    if (content === "name" && this.name) {
+      return html`${this.name}`;
     }
 
     let relativeDateTime: string | Date | undefined;

src/translations/en.json

@@ -3455,12 +3455,17 @@
                 "require_admin": "Admin only",
                 "sidebar": "In sidebar",
                 "filename": "Filename",
-                "url": "Open"
+                "url": "Open",
+                "type": "Type"
               },
               "open": "Open",
               "edit": "Edit",
               "delete": "Delete",
-              "add_dashboard": "Add dashboard"
+              "add_dashboard": "Add dashboard",
+              "type": {
+                "user_created": "User created",
+                "built_in": "Built-in"
+              }
             },
             "confirm_delete_title": "Delete {dashboard_title}?",
             "confirm_delete_text": "This dashboard will be permanently deleted.",
@@ -3918,8 +3923,10 @@
             "type_script": "script",
             "type_automation_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::automation%]",
             "type_script_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::script%]",
-            "new_automation_setup_failed_title": "New {type} setup failed",
+            "new_automation_setup_failed_title": "New {type} setup timed out",
             "new_automation_setup_failed_text": "Your new {type} has saved, but waiting for it to setup has timed out. This could be due to errors parsing your configuration.yaml, please check the configuration in developer tools. Your {type} will not be visible until this is corrected, and {types} are reloaded. Changes to area, category, or labels were not saved and must be reapplied.",
+            "new_automation_setup_keep_waiting": "You may continue to wait for a response from the server, in case it is just taking an unusually long time to process this {type}.",
+            "new_automation_setup_timedout_success": "The server has responded and this has now setup successfully. You may now close this dialog.",
             "item_pasted": "{item} pasted",
             "ctrl": "Ctrl",
             "del": "Del",
@@ -6924,8 +6931,7 @@
             "areas": "Areas",
             "other_areas": "Other areas",
             "unamed_device": "Unnamed device",
-            "others": "Others",
-            "common_controls": "Commonly used"
+            "others": "Others"
           },
           "common_controls": {
             "not_loaded": "Usage Prediction integration is not loaded.",

src/util/launch-screen.ts

@@ -3,8 +3,21 @@ import { render } from "lit";
 
 export const removeLaunchScreen = () => {
   const launchScreenElement = document.getElementById("ha-launch-screen");
-  if (launchScreenElement) {
-    launchScreenElement.parentElement!.removeChild(launchScreenElement);
+  if (!launchScreenElement?.parentElement) {
+    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,10 +24,16 @@ describe("absoluteTime", () => {
 
   it("should format date correctly for same year", () => {
     const from = new Date();
-    from.setUTCMonth(9, 20);
     from.setUTCHours(13, 23);
-    const result = absoluteTime(from, locale, config);
-    expect(result).toBe("Oct 20, 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");
+    }
   });
 
   it("should format date with year correctly", () => {

test/data/floor_registry.test.ts

@@ -0,0 +1,116 @@
+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,4 +77,71 @@ 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();
+    });
+  });
 });