narrow

Co-authored-by: balloob <1444314+balloob@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

.github/workflows/codeql-analysis.yml

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

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: |
             dist/*.whl
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

package.json

@@ -37,15 +37,15 @@
     "@codemirror/view": "6.38.5",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.1",
-    "@formatjs/intl-displaynames": "6.8.12",
-    "@formatjs/intl-durationformat": "0.7.5",
+    "@formatjs/intl-datetimeformat": "6.18.2",
+    "@formatjs/intl-displaynames": "6.8.13",
+    "@formatjs/intl-durationformat": "0.7.6",
     "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.12",
-    "@formatjs/intl-locale": "4.2.12",
-    "@formatjs/intl-numberformat": "8.15.5",
-    "@formatjs/intl-pluralrules": "5.4.5",
-    "@formatjs/intl-relativetimeformat": "11.4.12",
+    "@formatjs/intl-listformat": "7.7.13",
+    "@formatjs/intl-locale": "4.2.13",
+    "@formatjs/intl-numberformat": "8.15.6",
+    "@formatjs/intl-pluralrules": "5.4.6",
+    "@formatjs/intl-relativetimeformat": "11.4.13",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
@@ -99,7 +99,7 @@
     "barcode-detector": "3.0.6",
     "color-name": "2.0.2",
     "comlink": "4.4.2",
-    "core-js": "3.45.1",
+    "core-js": "3.46.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
@@ -114,7 +114,7 @@
     "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.17",
+    "intl-messageformat": "10.7.18",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -135,7 +135,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.5",
+    "ua-parser-js": "2.0.6",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",

src/common/entity/compute_entity_name_display.ts

@@ -9,6 +9,11 @@ import { getEntityContext } from "./context/get_entity_context";
 
 const DEFAULT_SEPARATOR = " ";
 
+export const DEFAULT_ENTITY_NAME = [
+  { type: "device" },
+  { type: "entity" },
+] satisfies EntityNameItem[];
+
 export type EntityNameItem =
   | {
       type: "entity" | "device" | "area" | "floor";
@@ -24,14 +29,14 @@ export interface EntityNameOptions {
 
 export const computeEntityNameDisplay = (
   stateObj: HassEntity,
-  name: EntityNameItem | EntityNameItem[],
+  name: EntityNameItem | EntityNameItem[] | undefined,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],
   floors: HomeAssistant["floors"],
   options?: EntityNameOptions
 ) => {
-  let items = ensureArray(name);
+  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
 
   const separator = options?.separator ?? DEFAULT_SEPARATOR;
 

src/components/chart/down-sample.ts

@@ -1,21 +1,22 @@
 import type { LineSeriesOption } from "echarts";
 
-export function downSampleLineData(
-  data: LineSeriesOption["data"],
-  chartWidth: number,
+export function downSampleLineData<
+  T extends [number, number] | NonNullable<LineSeriesOption["data"]>[number],
+>(
+  data: T[] | undefined,
+  maxDetails: number,
   minX?: number,
   maxX?: number
-) {
-  if (!data || data.length < 10) {
-    return data;
+): T[] {
+  if (!data) {
+    return [];
   }
-  const width = chartWidth * window.devicePixelRatio;
-  if (data.length <= width) {
+  if (data.length <= maxDetails) {
     return data;
   }
   const min = minX ?? getPointData(data[0]!)[0];
   const max = maxX ?? getPointData(data[data.length - 1]!)[0];
-  const step = Math.floor((max - min) / width);
+  const step = Math.ceil((max - min) / Math.floor(maxDetails));
   const frames = new Map<
     number,
     {
@@ -47,7 +48,7 @@ export function downSampleLineData(
   }
 
   // Convert frames back to points
-  const result: typeof data = [];
+  const result: T[] = [];
   for (const [_i, frame] of frames) {
     // Use min/max points to preserve visual accuracy
     // The order of the data must be preserved so max may be before min

src/components/chart/ha-chart-base.ts

@@ -805,7 +805,7 @@ export class HaChartBase extends LitElement {
             sampling: undefined,
             data: downSampleLineData(
               data as LineSeriesOption["data"],
-              this.clientWidth,
+              this.clientWidth * window.devicePixelRatio,
               minX,
               maxX
             ),

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

@@ -1,4 +1,4 @@
-import { mdiPlus } from "@mdi/js";
+import { mdiPlayBox, mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,7 +7,10 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { getSignedPath } from "../../data/auth";
 import type { MediaPickedEvent } from "../../data/media-player";
-import { MediaPlayerEntityFeature } from "../../data/media-player";
+import {
+  MediaClassBrowserSettings,
+  MediaPlayerEntityFeature,
+} from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
@@ -17,8 +20,6 @@ import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../ha-picture-upload";
-import "../chips/ha-chip-set";
-import "../chips/ha-input-chip";
 
 const MANUAL_SCHEMA = [
   { name: "media_content_id", required: false, selector: { text: {} } },
@@ -35,8 +36,7 @@ export class HaMediaSelector extends LitElement {
 
   @property({ attribute: false }) public selector!: MediaSelector;
 
-  @property({ attribute: false })
-  public value?: MediaSelectorValue | MediaSelectorValue[];
+  @property({ attribute: false }) public value?: MediaSelectorValue;
 
   @property() public label?: string;
 
@@ -52,9 +52,6 @@ export class HaMediaSelector extends LitElement {
 
   @state() private _thumbnailUrl?: string | null;
 
-  // For multiple selection mode, cache signed/rewritten URLs per thumbnail string
-  @state() private _thumbnailUrlMap: Record<string, string | null> = {};
-
   private _contextEntities: string[] | undefined;
 
   private get _hasAccept(): boolean {
@@ -62,15 +59,6 @@ export class HaMediaSelector extends LitElement {
   }
 
   willUpdate(changedProps: PropertyValues<this>) {
-    if (changedProps.has("selector") && this.value !== undefined) {
-      if (this.selector.media?.multiple && !Array.isArray(this.value)) {
-        this.value = [this.value];
-        fireEvent(this, "value-changed", { value: this.value });
-      } else if (!this.selector.media?.multiple && Array.isArray(this.value)) {
-        this.value = this.value[0];
-        fireEvent(this, "value-changed", { value: this.value });
-      }
-    }
     if (changedProps.has("context")) {
       if (!this._hasAccept) {
         this._contextEntities = ensureArray(this.context?.filter_entity);
@@ -78,91 +66,32 @@ export class HaMediaSelector extends LitElement {
     }
 
     if (changedProps.has("value")) {
-      if (this.selector.media?.multiple) {
-        const values = Array.isArray(this.value)
-          ? this.value
-          : this.value
-            ? [this.value]
-            : [];
-        const seenThumbs = new Set<string>();
-        values.forEach((val) => {
-          const thumbnail = val.metadata?.thumbnail;
-          if (!thumbnail) {
-            return;
-          }
-          seenThumbs.add(thumbnail);
-          // Only (re)compute if not cached yet
-          if (this._thumbnailUrlMap[thumbnail] !== undefined) {
-            return;
-          }
-          if (thumbnail.startsWith("/")) {
-            this._thumbnailUrlMap = {
-              ...this._thumbnailUrlMap,
-              [thumbnail]: null,
-            };
-            getSignedPath(this.hass, thumbnail).then((signedPath) => {
-              // Avoid losing other keys
-              this._thumbnailUrlMap = {
-                ...this._thumbnailUrlMap,
-                [thumbnail]: signedPath.path,
-              };
-            });
-          } else if (thumbnail.startsWith("https://brands.home-assistant.io")) {
-            this._thumbnailUrlMap = {
-              ...this._thumbnailUrlMap,
-              [thumbnail]: brandsUrl({
-                domain: extractDomainFromBrandUrl(thumbnail),
-                type: "icon",
-                useFallback: true,
-                darkOptimized: this.hass.themes?.darkMode,
-              }),
-            };
-          } else {
-            this._thumbnailUrlMap = {
-              ...this._thumbnailUrlMap,
-              [thumbnail]: thumbnail,
-            };
-          }
+      const thumbnail = this.value?.metadata?.thumbnail;
+      const oldThumbnail = (changedProps.get("value") as this["value"])
+        ?.metadata?.thumbnail;
+      if (thumbnail === oldThumbnail) {
+        return;
+      }
+      if (thumbnail && thumbnail.startsWith("/")) {
+        this._thumbnailUrl = undefined;
+        // Thumbnails served by local API require authentication
+        getSignedPath(this.hass, thumbnail).then((signedPath) => {
+          this._thumbnailUrl = signedPath.path;
         });
-        // Clean up thumbnails no longer present
-        const newMap: Record<string, string | null> = {};
-        Object.keys(this._thumbnailUrlMap).forEach((key) => {
-          if (seenThumbs.has(key)) {
-            newMap[key] = this._thumbnailUrlMap[key];
-          }
+      } else if (
+        thumbnail &&
+        thumbnail.startsWith("https://brands.home-assistant.io")
+      ) {
+        // The backend is not aware of the theme used by the users,
+        // so we rewrite the URL to show a proper icon
+        this._thumbnailUrl = brandsUrl({
+          domain: extractDomainFromBrandUrl(thumbnail),
+          type: "icon",
+          useFallback: true,
+          darkOptimized: this.hass.themes?.darkMode,
         });
-        this._thumbnailUrlMap = newMap;
       } else {
-        const currVal = Array.isArray(this.value) ? this.value[0] : this.value;
-        const prevVal = Array.isArray(changedProps.get("value") as any)
-          ? (changedProps.get("value") as MediaSelectorValue[])[0]
-          : (changedProps.get("value") as MediaSelectorValue);
-        const thumbnail = currVal?.metadata?.thumbnail;
-        const oldThumbnail = prevVal?.metadata?.thumbnail;
-        if (thumbnail === oldThumbnail) {
-          return;
-        }
-        if (thumbnail && thumbnail.startsWith("/")) {
-          this._thumbnailUrl = undefined;
-          // Thumbnails served by local API require authentication
-          getSignedPath(this.hass, thumbnail).then((signedPath) => {
-            this._thumbnailUrl = signedPath.path;
-          });
-        } else if (
-          thumbnail &&
-          thumbnail.startsWith("https://brands.home-assistant.io")
-        ) {
-          // The backend is not aware of the theme used by the users,
-          // so we rewrite the URL to show a proper icon
-          this._thumbnailUrl = brandsUrl({
-            domain: extractDomainFromBrandUrl(thumbnail),
-            type: "icon",
-            useFallback: true,
-            darkOptimized: this.hass.themes?.darkMode,
-          });
-        } else {
-          this._thumbnailUrl = thumbnail ?? undefined;
-        }
+        this._thumbnailUrl = thumbnail;
       }
     }
   }
@@ -177,12 +106,7 @@ export class HaMediaSelector extends LitElement {
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
-    const isMultiple = this.selector.media?.multiple === true;
-
-    if (
-      this.selector.media?.image_upload &&
-      (!this.value || (Array.isArray(this.value) && this.value.length === 0))
-    ) {
+    if (this.selector.media?.image_upload && !this.value) {
       return html`<ha-picture-upload
         .hass=${this.hass}
         .value=${null}
@@ -224,47 +148,19 @@ export class HaMediaSelector extends LitElement {
             </ha-alert>
             <ha-form
               .hass=${this.hass}
-              .data=${Array.isArray(this.value)
-                ? this.value[0]
-                : this.value || EMPTY_FORM}
+              .data=${this.value || EMPTY_FORM}
               .schema=${MANUAL_SCHEMA}
               .computeLabel=${this._computeLabelCallback}
               .computeHelper=${this._computeHelperCallback}
             ></ha-form>
           `
-        : html`
-            ${isMultiple && Array.isArray(this.value) && this.value.length
-              ? html`
-                  <ha-chip-set>
-                    ${this.value.map(
-                      (item, idx) => html`
-                        <ha-input-chip
-                          selected
-                          .idx=${idx}
-                          @remove=${this._removeItem}
-                          >${item.metadata?.title ||
-                          item.media_content_id}</ha-input-chip
-                        >
-                      `
-                    )}
-                  </ha-chip-set>
-                `
-              : nothing}
-
-            <ha-card
+        : html`<ha-card
               outlined
               tabindex="0"
               role="button"
-              aria-label=${(() => {
-                const currVal = Array.isArray(this.value)
-                  ? this.value[this.value.length - 1]
-                  : this.value;
-                return !currVal?.media_content_id
-                  ? this.hass.localize(
-                      "ui.components.selectors.media.pick_media"
-                    )
-                  : currVal.metadata?.title || currVal.media_content_id;
-              })()}
+              aria-label=${!this.value?.media_content_id
+                ? this.hass.localize("ui.components.selectors.media.pick_media")
+                : this.value.metadata?.title || this.value.media_content_id}
               @click=${this._pickMedia}
               @keydown=${this._handleKeyDown}
               class=${this.disabled || (!entityId && !this._hasAccept)
@@ -273,22 +169,14 @@ export class HaMediaSelector extends LitElement {
             >
               <div class="content-container">
                 <div class="thumbnail">
-                  ${!isMultiple &&
-                  (Array.isArray(this.value) ? this.value[0] : this.value)
-                    ?.metadata?.thumbnail
+                  ${this.value?.metadata?.thumbnail
                     ? html`
                         <div
                           class="${classMap({
                             "centered-image":
-                              !!(
-                                Array.isArray(this.value)
-                                  ? this.value[0]
-                                  : this.value
-                              )!.metadata!.media_class &&
+                              !!this.value.metadata.media_class &&
                               ["app", "directory"].includes(
-                                (Array.isArray(this.value)
-                                  ? this.value[0]
-                                  : this.value)!.metadata!.media_class!
+                                this.value.metadata.media_class
                               ),
                           })}
                           image"
@@ -301,27 +189,32 @@ export class HaMediaSelector extends LitElement {
                         <div class="icon-holder image">
                           <ha-svg-icon
                             class="folder"
-                            .path=${mdiPlus}
+                            .path=${!this.value?.media_content_id
+                              ? mdiPlus
+                              : this.value?.metadata?.media_class
+                                ? MediaClassBrowserSettings[
+                                    this.value.metadata.media_class ===
+                                    "directory"
+                                      ? this.value.metadata
+                                          .children_media_class ||
+                                        this.value.metadata.media_class
+                                      : this.value.metadata.media_class
+                                  ].icon
+                                : mdiPlayBox}
                           ></ha-svg-icon>
                         </div>
                       `}
                 </div>
                 <div class="title">
-                  ${(() => {
-                    const currVal = Array.isArray(this.value)
-                      ? this.value[this.value.length - 1]
-                      : this.value;
-                    return !currVal?.media_content_id
-                      ? this.hass.localize(
-                          "ui.components.selectors.media.pick_media"
-                        )
-                      : currVal.metadata?.title || currVal.media_content_id;
-                  })()}
+                  ${!this.value?.media_content_id
+                    ? this.hass.localize(
+                        "ui.components.selectors.media.pick_media"
+                      )
+                    : this.value.metadata?.title || this.value.media_content_id}
                 </div>
               </div>
             </ha-card>
-            ${this.selector.media?.clearable &&
-            (Array.isArray(this.value) ? this.value.length : this.value)
+            ${this.selector.media?.clearable
               ? html`<div>
                   <ha-button
                     appearance="plain"
@@ -334,8 +227,7 @@ export class HaMediaSelector extends LitElement {
                     )}
                   </ha-button>
                 </div>`
-              : nothing}
-          `}
+              : nothing}`}
     `;
   }
 
@@ -376,61 +268,41 @@ export class HaMediaSelector extends LitElement {
     showMediaBrowserDialog(this, {
       action: "pick",
       entityId: this._getActiveEntityId(),
-      navigateIds: (Array.isArray(this.value)
-        ? this.value[this.value.length - 1]
-        : this.value
-      )?.metadata?.navigateIds,
+      navigateIds: this.value?.metadata?.navigateIds,
       accept: this.selector.media?.accept,
-      defaultId: Array.isArray(this.value)
-        ? this.value[this.value.length - 1]?.media_content_id
-        : this.value?.media_content_id,
-      defaultType: Array.isArray(this.value)
-        ? this.value[this.value.length - 1]?.media_content_type
-        : this.value?.media_content_type,
+      defaultId: this.value?.media_content_id,
+      defaultType: this.value?.media_content_type,
       hideContentType: this.selector.media?.hide_content_type,
       contentIdHelper: this.selector.media?.content_id_helper,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
-        const newItem: MediaSelectorValue = {
-          ...(Array.isArray(this.value) ? {} : (this.value as any)),
-          media_content_id: pickedMedia.item.media_content_id,
-          media_content_type: pickedMedia.item.media_content_type,
-          metadata: {
-            title: pickedMedia.item.title,
-            thumbnail: pickedMedia.item.thumbnail,
-            media_class: pickedMedia.item.media_class,
-            children_media_class: pickedMedia.item.children_media_class,
-            navigateIds: pickedMedia.navigateIds?.map((id) => ({
-              media_content_type: id.media_content_type,
-              media_content_id: id.media_content_id,
-            })),
-            ...(!this._hasAccept && this.context?.filter_entity
-              ? { browse_entity_id: this._getActiveEntityId() }
-              : {}),
+        fireEvent(this, "value-changed", {
+          value: {
+            ...this.value,
+            media_content_id: pickedMedia.item.media_content_id,
+            media_content_type: pickedMedia.item.media_content_type,
+            metadata: {
+              title: pickedMedia.item.title,
+              thumbnail: pickedMedia.item.thumbnail,
+              media_class: pickedMedia.item.media_class,
+              children_media_class: pickedMedia.item.children_media_class,
+              navigateIds: pickedMedia.navigateIds?.map((id) => ({
+                media_content_type: id.media_content_type,
+                media_content_id: id.media_content_id,
+              })),
+              ...(!this._hasAccept && this.context?.filter_entity
+                ? { browse_entity_id: this._getActiveEntityId() }
+                : {}),
+            },
           },
-        };
-        if (this.selector.media?.multiple) {
-          const current = Array.isArray(this.value)
-            ? this.value
-            : this.value
-              ? [this.value]
-              : [];
-          fireEvent(this, "value-changed", {
-            value: [...current, newItem],
-          });
-          return;
-        }
-        fireEvent(this, "value-changed", { value: newItem });
+        });
       },
     });
   }
 
   private _getActiveEntityId(): string | undefined {
-    const val = Array.isArray(this.value)
-      ? this.value[this.value.length - 1]
-      : this.value;
-    const metaId = val?.metadata?.browse_entity_id;
+    const metaId = this.value?.metadata?.browse_entity_id;
     return (
-      val?.entity_id ||
+      this.value?.entity_id ||
       (metaId && this._contextEntities?.includes(metaId) && metaId) ||
       this._contextEntities?.[0]
     );
@@ -445,47 +317,27 @@ export class HaMediaSelector extends LitElement {
 
   private _pictureUploadMediaPicked(ev) {
     const pickedMedia = ev.detail as MediaPickedEvent;
-    const newItem: MediaSelectorValue = {
-      ...(Array.isArray(this.value) ? {} : (this.value as any)),
-      media_content_id: pickedMedia.item.media_content_id,
-      media_content_type: pickedMedia.item.media_content_type,
-      metadata: {
-        title: pickedMedia.item.title,
-        thumbnail: pickedMedia.item.thumbnail,
-        media_class: pickedMedia.item.media_class,
-        children_media_class: pickedMedia.item.children_media_class,
-        navigateIds: pickedMedia.navigateIds?.map((id) => ({
-          media_content_type: id.media_content_type,
-          media_content_id: id.media_content_id,
-        })),
-      },
-    };
-    if (this.selector.media?.multiple) {
-      const current = Array.isArray(this.value)
-        ? this.value
-        : this.value
-          ? [this.value]
-          : [];
-      fireEvent(this, "value-changed", { value: [...current, newItem] });
-      return;
-    }
-    fireEvent(this, "value-changed", { value: newItem });
-  }
-
-  private _clearValue() {
     fireEvent(this, "value-changed", {
-      value: this.selector.media?.multiple ? [] : undefined,
+      value: {
+        ...this.value,
+        media_content_id: pickedMedia.item.media_content_id,
+        media_content_type: pickedMedia.item.media_content_type,
+        metadata: {
+          title: pickedMedia.item.title,
+          thumbnail: pickedMedia.item.thumbnail,
+          media_class: pickedMedia.item.media_class,
+          children_media_class: pickedMedia.item.children_media_class,
+          navigateIds: pickedMedia.navigateIds?.map((id) => ({
+            media_content_type: id.media_content_type,
+            media_content_id: id.media_content_id,
+          })),
+        },
+      },
     });
   }
 
-  private _removeItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    if (!Array.isArray(this.value)) return;
-    const idx = (ev.currentTarget as any).idx as number;
-    if (idx === undefined) return;
-    const newValue = this.value.slice();
-    newValue.splice(idx, 1);
-    fireEvent(this, "value-changed", { value: newValue });
+  private _clearValue() {
+    fireEvent(this, "value-changed", { value: undefined });
   }
 
   static styles = css`
@@ -497,9 +349,6 @@ export class HaMediaSelector extends LitElement {
       display: block;
       margin-bottom: 16px;
     }
-    ha-chip-set {
-      padding-bottom: 8px;
-    }
     ha-card {
       position: relative;
       width: 100%;

src/data/data_entry_flow.ts

@@ -79,6 +79,7 @@ export interface DataEntryFlowStepAbort {
   reason: string;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
+  next_flow?: [FlowType, string]; // [flow_type, flow_id]
 }
 
 export interface DataEntryFlowStepProgress {

src/data/selector.ts

@@ -316,7 +316,6 @@ export interface MediaSelector {
     clearable?: boolean;
     hide_content_type?: boolean;
     content_id_helper?: string;
-    multiple?: boolean;
   } | null;
 }
 

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -472,7 +472,10 @@ class DataEntryFlowDialog extends LitElement {
     this._step = undefined;
     await this.updateComplete;
     this._step = _step;
-    if (_step.type === "create_entry" && _step.next_flow) {
+    if (
+      (_step.type === "create_entry" || _step.type === "abort") &&
+      _step.next_flow
+    ) {
       // skip device rename if there is a chained flow
       this._step = undefined;
       this._handler = undefined;
@@ -486,32 +489,36 @@ class DataEntryFlowDialog extends LitElement {
           carryOverDevices: this._devices(
             this._params!.flowConfig.showDevices,
             Object.values(this.hass.devices),
-            _step.result?.entry_id,
+            _step.type === "create_entry" ? _step.result?.entry_id : undefined,
             this._params!.carryOverDevices
           ).map((device) => device.id),
           dialogClosedCallback: this._params!.dialogClosedCallback,
         });
       } else if (_step.next_flow[0] === "options_flow") {
-        showOptionsFlowDialog(
-          this._params!.dialogParentElement!,
-          _step.result!,
-          {
-            continueFlowId: _step.next_flow[1],
-            navigateToResult: this._params!.navigateToResult,
-            dialogClosedCallback: this._params!.dialogClosedCallback,
-          }
-        );
+        if (_step.type === "create_entry") {
+          showOptionsFlowDialog(
+            this._params!.dialogParentElement!,
+            _step.result!,
+            {
+              continueFlowId: _step.next_flow[1],
+              navigateToResult: this._params!.navigateToResult,
+              dialogClosedCallback: this._params!.dialogClosedCallback,
+            }
+          );
+        }
       } else if (_step.next_flow[0] === "config_subentries_flow") {
-        showSubConfigFlowDialog(
-          this._params!.dialogParentElement!,
-          _step.result!,
-          _step.next_flow[0],
-          {
-            continueFlowId: _step.next_flow[1],
-            navigateToResult: this._params!.navigateToResult,
-            dialogClosedCallback: this._params!.dialogClosedCallback,
-          }
-        );
+        if (_step.type === "create_entry") {
+          showSubConfigFlowDialog(
+            this._params!.dialogParentElement!,
+            _step.result!,
+            _step.next_flow[0],
+            {
+              continueFlowId: _step.next_flow[1],
+              navigateToResult: this._params!.navigateToResult,
+              dialogClosedCallback: this._params!.dialogClosedCallback,
+            }
+          );
+        }
       } else {
         this.closeDialog();
         showAlertDialog(this._params!.dialogParentElement!, {

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

@@ -77,84 +77,80 @@ class MoreInfoMediaPlayer extends LitElement {
       return nothing;
     }
 
-    if (!stateActive(this.stateObj)) {
-      return nothing;
-    }
-
     const supportsMute = supportsFeature(
       this.stateObj,
       MediaPlayerEntityFeature.VOLUME_MUTE
     );
-    const supportsSet = supportsFeature(
+    const supportsSliding = supportsFeature(
       this.stateObj,
       MediaPlayerEntityFeature.VOLUME_SET
     );
 
-    const supportsStep = supportsFeature(
-      this.stateObj,
-      MediaPlayerEntityFeature.VOLUME_STEP
-    );
-
-    if (!supportsMute && !supportsSet && !supportsStep) {
-      return nothing;
-    }
-
-    return html`
-      <div class="volume">
-        ${supportsMute
-          ? html`
-              <ha-icon-button
-                .path=${this.stateObj.attributes.is_volume_muted
-                  ? mdiVolumeOff
-                  : mdiVolumeHigh}
-                .label=${this.hass.localize(
-                  `ui.card.media_player.${
-                    this.stateObj.attributes.is_volume_muted
-                      ? "media_volume_unmute"
-                      : "media_volume_mute"
-                  }`
-                )}
-                @click=${this._toggleMute}
-              ></ha-icon-button>
-            `
-          : nothing}
-        ${supportsStep
-          ? html` <ha-icon-button
-              action="volume_down"
-              .path=${mdiVolumeMinus}
-              .label=${this.hass.localize(
-                "ui.card.media_player.media_volume_down"
-              )}
-              @click=${this._handleClick}
-            ></ha-icon-button>`
-          : nothing}
-        ${supportsSet
-          ? html`
-              ${!supportsMute && !supportsStep
-                ? html`<ha-svg-icon .path=${mdiVolumeHigh}></ha-svg-icon>`
-                : nothing}
-              <ha-slider
-                labeled
-                id="input"
-                .value=${Number(this.stateObj.attributes.volume_level) * 100}
-                @change=${this._selectedValueChanged}
-              ></ha-slider>
-            `
-          : nothing}
-        ${supportsStep
-          ? html`
-              <ha-icon-button
-                action="volume_up"
-                .path=${mdiVolumePlus}
-                .label=${this.hass.localize(
-                  "ui.card.media_player.media_volume_up"
-                )}
-                @click=${this._handleClick}
-              ></ha-icon-button>
-            `
-          : nothing}
-      </div>
-    `;
+    return html`${(supportsFeature(
+      this.stateObj!,
+      MediaPlayerEntityFeature.VOLUME_SET
+    ) ||
+      supportsFeature(this.stateObj!, MediaPlayerEntityFeature.VOLUME_STEP)) &&
+    stateActive(this.stateObj!)
+      ? html`
+          <div class="volume">
+            ${supportsMute
+              ? html`
+                  <ha-icon-button
+                    .path=${this.stateObj.attributes.is_volume_muted
+                      ? mdiVolumeOff
+                      : mdiVolumeHigh}
+                    .label=${this.hass.localize(
+                      `ui.card.media_player.${
+                        this.stateObj.attributes.is_volume_muted
+                          ? "media_volume_unmute"
+                          : "media_volume_mute"
+                      }`
+                    )}
+                    @click=${this._toggleMute}
+                  ></ha-icon-button>
+                `
+              : ""}
+            ${supportsFeature(
+              this.stateObj,
+              MediaPlayerEntityFeature.VOLUME_STEP
+            ) && !supportsSliding
+              ? html`
+                  <ha-icon-button
+                    action="volume_down"
+                    .path=${mdiVolumeMinus}
+                    .label=${this.hass.localize(
+                      "ui.card.media_player.media_volume_down"
+                    )}
+                    @click=${this._handleClick}
+                  ></ha-icon-button>
+                  <ha-icon-button
+                    action="volume_up"
+                    .path=${mdiVolumePlus}
+                    .label=${this.hass.localize(
+                      "ui.card.media_player.media_volume_up"
+                    )}
+                    @click=${this._handleClick}
+                  ></ha-icon-button>
+                `
+              : nothing}
+            ${supportsSliding
+              ? html`
+                  ${!supportsMute
+                    ? html`<ha-svg-icon .path=${mdiVolumeHigh}></ha-svg-icon>`
+                    : nothing}
+                  <ha-slider
+                    labeled
+                    id="input"
+                    .value=${Number(this.stateObj.attributes.volume_level) *
+                    100}
+                    @change=${this._selectedValueChanged}
+                  ></ha-slider>
+                `
+              : nothing}
+          </div>
+        `
+      : nothing}`;
   }
 
   protected _renderSourceControl() {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -15,7 +15,6 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
-import { join } from "lit/directives/join";
 import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -33,6 +32,7 @@ import {
 } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
+import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-button-menu";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
@@ -361,6 +361,8 @@ export class MoreInfoDialog extends LitElement {
     );
     const title = this._childView?.viewTitle || breadcrumb.pop() || entityId;
 
+    const isRTL = computeRTL(this.hass);
+
     return html`
       <ha-dialog
         open
@@ -394,17 +396,13 @@ export class MoreInfoDialog extends LitElement {
             ${breadcrumb.length > 0
               ? !__DEMO__ && isAdmin
                 ? html`
-                    <button
-                      class="breadcrumb"
-                      @click=${this._breadcrumbClick}
-                      aria-label=${breadcrumb.join(" > ")}
-                    >
-                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
+                    <button class="breadcrumb" @click=${this._breadcrumbClick}>
+                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
                     </button>
                   `
                 : html`
                     <p class="breadcrumb">
-                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
+                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
                     </p>
                   `
               : nothing}

src/dialogs/restart/dialog-restart-wait.ts

@@ -1,14 +1,10 @@
-import { mdiClose } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-alert";
-import "../../components/ha-dialog-header";
-import "../../components/ha-icon-button";
-import "../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../components/ha-md-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-spinner";
 import {
   subscribeBackupEvents,
@@ -37,8 +33,6 @@ class DialogRestartWait extends LitElement {
 
   private _backupEventsSubscription?: Promise<UnsubscribeFunc>;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
   public async showDialog(params: RestartWaitDialogParams): Promise<void> {
     this._open = true;
     this._loadBackupState();
@@ -49,9 +43,11 @@ class DialogRestartWait extends LitElement {
     this._actionOnIdle = params.action;
   }
 
-  private _dialogClosed(): void {
+  public closeDialog(): void {
     this._open = false;
+  }
 
+  private _dialogClosed(): void {
     if (this._backupEventsSubscription) {
       this._backupEventsSubscription.then((unsub) => {
         unsub();
@@ -62,10 +58,6 @@ class DialogRestartWait extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  public closeDialog(): void {
-    this._dialog?.close();
-  }
-
   private _getWaitMessage() {
     switch (this._backupState) {
       case "create_backup":
@@ -80,28 +72,17 @@ class DialogRestartWait extends LitElement {
   }
 
   protected render() {
-    if (!this._open) {
-      return nothing;
-    }
-
     const waitMessage = this._getWaitMessage();
 
     return html`
-      <ha-md-dialog
-        open
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .headerTitle=${this._title}
+        width="medium"
         @closed=${this._dialogClosed}
-        .disableCancelAction=${true}
       >
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this.hass.localize("ui.common.cancel")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-          <span slot="title" .title=${this._title}> ${this._title} </span>
-        </ha-dialog-header>
-        <div slot="content" class="content">
+        <div class="content">
           ${this._error
             ? html`<ha-alert alert-type="error"
                 >${this.hass.localize("ui.dialogs.restart.error_backup_state", {
@@ -113,7 +94,7 @@ class DialogRestartWait extends LitElement {
                 ${waitMessage}
               `}
         </div>
-      </ha-md-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -139,15 +120,9 @@ class DialogRestartWait extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        ha-md-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
-        @media all and (min-width: 550px) {
-          ha-md-dialog {
-            min-width: 500px;
-            max-width: 500px;
-          }
-        }
         .content {
           display: flex;
           flex-direction: column;

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

@@ -1,5 +1,6 @@
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { tinykeys } from "tinykeys";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-resizable-bottom-sheet";
@@ -44,11 +45,27 @@ export default class HaAutomationSidebar extends LitElement {
   @query("ha-resizable-bottom-sheet")
   private _bottomSheetElement?: HaResizableBottomSheet;
 
+  @query(".handle")
+  private _handleElement?: HTMLDivElement;
+
   private _resizeStartX = 0;
 
+  private _tinykeysUnsub?: () => void;
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("config") || changedProperties.has("narrow")) {
+      if (!this.config || this.narrow) {
+        this._tinykeysUnsub?.();
+        this._tinykeysUnsub = undefined;
+      }
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this._unregisterResizeHandlers();
+    this._tinykeysUnsub?.();
   }
 
   private _renderContent() {
@@ -170,6 +187,9 @@ export default class HaAutomationSidebar extends LitElement {
         class="handle ${this._resizing ? "resizing" : ""}"
         @mousedown=${this._handleMouseDown}
         @touchstart=${this._handleMouseDown}
+        @focus=${this._startKeyboardResizing}
+        @blur=${this._stopKeyboardResizing}
+        tabindex="0"
       >
         <div class="indicator ${this._resizing ? "" : "hidden"}"></div>
       </div>
@@ -288,6 +308,44 @@ export default class HaAutomationSidebar extends LitElement {
     document.removeEventListener("touchcancel", this._endResizing);
   }
 
+  private _startKeyboardResizing = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    this._resizing = true;
+    this._resizeStartX = 0;
+    this._tinykeysUnsub = tinykeys(this._handleElement!, {
+      ArrowLeft: this._increaseSize,
+      ArrowRight: this._decreaseSize,
+    });
+  };
+
+  private _stopKeyboardResizing = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+    this._resizing = false;
+    fireEvent(this, "sidebar-resizing-stopped");
+    this._tinykeysUnsub?.();
+    this._tinykeysUnsub = undefined;
+  };
+
+  private _increaseSize = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+
+    this._resizeStartX -= computeRTL(this.hass) ? 10 : -10;
+    this._keyboardResize();
+  };
+
+  private _decreaseSize = (ev: KeyboardEvent) => {
+    ev.stopPropagation();
+
+    this._resizeStartX += computeRTL(this.hass) ? 10 : -10;
+    this._keyboardResize();
+  };
+
+  private _keyboardResize() {
+    fireEvent(this, "sidebar-resized", {
+      deltaInPx: this._resizeStartX,
+    });
+  }
+
   static styles = css`
     :host {
       z-index: 6;
@@ -342,6 +400,10 @@ export default class HaAutomationSidebar extends LitElement {
       transform: scale3d(0, 1, 1);
       opacity: 0;
     }
+
+    .handle:focus-visible {
+      outline: none;
+    }
   `;
 }
 

src/panels/config/backup/dialogs/dialog-new-backup.ts

@@ -1,14 +1,11 @@
-import { mdiCalendarSync, mdiClose, mdiGestureTap } from "@mdi/js";
+import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-next";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
@@ -24,92 +21,80 @@ class DialogNewBackup extends LitElement implements HassDialog {
 
   @state() private _params?: NewBackupDialogParams;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
   public showDialog(params: NewBackupDialogParams): void {
     this._opened = true;
     this._params = params;
   }
 
   public closeDialog() {
-    this._dialog?.close();
+    this._opened = false;
     return true;
   }
 
   private _dialogClosed() {
-    if (this._params!.cancel) {
-      this._params!.cancel();
+    if (this._params?.cancel) {
+      this._params.cancel();
     }
-    if (this._opened) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._opened = false;
     this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render() {
-    if (!this._opened || !this._params) {
+    if (!this._params) {
       return nothing;
     }
 
     return html`
-      <ha-md-dialog open @closed=${this._dialogClosed}>
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            @click=${this.closeDialog}
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-          <span slot="title">
-            ${this.hass.localize("ui.panel.config.backup.dialogs.new.title")}
-          </span>
-        </ha-dialog-header>
-        <div slot="content">
-          <ha-md-list
-            innerRole="listbox"
-            itemRoles="option"
-            .innerAriaLabel=${this.hass.localize(
-              "ui.panel.config.backup.dialogs.new.options"
-            )}
-            rootTabbable
-            dialogInitialFocus
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._opened}
+        header-title=${this.hass.localize(
+          "ui.panel.config.backup.dialogs.new.title"
+        )}
+        @closed=${this._dialogClosed}
+      >
+        <ha-md-list
+          innerRole="listbox"
+          itemRoles="option"
+          .innerAriaLabel=${this.hass.localize(
+            "ui.panel.config.backup.dialogs.new.options"
+          )}
+          rootTabbable
+        >
+          <ha-md-list-item
+            @click=${this._automatic}
+            type="button"
+            .disabled=${!this._params.config.create_backup.password}
           >
-            <ha-md-list-item
-              @click=${this._automatic}
-              type="button"
-              .disabled=${!this._params.config.create_backup.password}
-            >
-              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
-              <span slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.automatic.title"
-                )}
-              </span>
-              <span slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.automatic.description"
-                )}
-              </span>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-            <ha-md-list-item @click=${this._manual} type="button">
-              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
-              <span slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.manual.title"
-                )}
-              </span>
-              <span slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.dialogs.new.manual.description"
-                )}
-              </span>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-          </ha-md-list>
-        </div>
-      </ha-md-dialog>
+            <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
+            <span slot="headline">
+              ${this.hass.localize(
+                "ui.panel.config.backup.dialogs.new.automatic.title"
+              )}
+            </span>
+            <span slot="supporting-text">
+              ${this.hass.localize(
+                "ui.panel.config.backup.dialogs.new.automatic.description"
+              )}
+            </span>
+            <ha-icon-next slot="end"></ha-icon-next>
+          </ha-md-list-item>
+          <ha-md-list-item @click=${this._manual} type="button">
+            <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
+            <span slot="headline">
+              ${this.hass.localize(
+                "ui.panel.config.backup.dialogs.new.manual.title"
+              )}
+            </span>
+            <span slot="supporting-text">
+              ${this.hass.localize(
+                "ui.panel.config.backup.dialogs.new.manual.description"
+              )}
+            </span>
+            <ha-icon-next slot="end"></ha-icon-next>
+          </ha-md-list-item>
+        </ha-md-list>
+      </ha-wa-dialog>
     `;
   }
 
@@ -128,24 +113,13 @@ class DialogNewBackup extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        ha-md-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
-          max-width: 500px;
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-md-dialog {
-            max-width: none;
-          }
-          div[slot="content"] {
-            margin-top: 0;
-          }
         }
 
         ha-md-list {
           background: none;
         }
-        ha-md-list-item {
-        }
         ha-icon-next {
           width: 24px;
         }

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -128,11 +128,10 @@ class ZHAAddDevicesPage extends LitElement {
                               this.hass,
                               "/integrations/zha#adding-devices"
                             )}
-                          >
-                            ${this.hass.localize(
+                            >${this.hass.localize(
                               "ui.panel.config.zha.add_device_page.pairing_mode_link"
-                            )}
-                          </a>
+                            )}</a
+                          >
                         `,
                       }
                     )}

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

@@ -9,9 +9,9 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 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 { 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";
@@ -189,7 +189,11 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       </state-display>
     `;
 
-    const name = this._config.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     const showState = this._config.show_state;
     const showName = this._config.show_name;

src/panels/lovelace/badges/types.ts

@@ -1,3 +1,4 @@
+import type { EntityNameItem } from "../../../common/entity/compute_entity_name_display";
 import type { ActionConfig } from "../../../data/lovelace/config/action";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { LegacyStateFilter } from "../common/evaluate-filter";
@@ -31,7 +32,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
 export interface EntityBadgeConfig extends LovelaceBadgeConfig {
   type: "entity";
   entity?: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   icon?: string;
   color?: string;
   show_name?: boolean;

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -43,6 +43,8 @@ class HuiHistoryChartCardFeature
 
   @state() private _coordinates?: [number, number][];
 
+  @state() private _yAxisOrigin?: number;
+
   private _interval?: number;
 
   static getStubConfig(): TrendGraphCardFeatureConfig {
@@ -105,7 +107,10 @@ class HuiHistoryChartCardFeature
       `;
     }
     return html`
-      <hui-graph-base .coordinates=${this._coordinates}></hui-graph-base>
+      <hui-graph-base
+        .coordinates=${this._coordinates}
+        .yAxisOrigin=${this._yAxisOrigin}
+      ></hui-graph-base>
     `;
   }
 
@@ -123,14 +128,15 @@ class HuiHistoryChartCardFeature
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
-        this._coordinates =
+        const { points, yAxisOrigin } =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
-            hourToShow,
-            500,
-            2,
-            undefined
-          ) || [];
+            this.clientWidth,
+            this.clientHeight,
+            this.clientWidth / 5 // sample to 1 point per 5 pixels
+          );
+        this._coordinates = points;
+        this._yAxisOrigin = yAxisOrigin;
       },
       hourToShow,
       [this.context!.entity_id!]

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

@@ -28,6 +28,7 @@ import {
   subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import type { HomeAssistant } from "../../../types";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard } from "../types";
@@ -232,12 +233,16 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
     const defaultCode = this._entry?.options?.alarm_control_panel?.default_code;
 
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
+
     return html`
       <ha-card>
         <h1 class="card-header">
-          ${this._config.name ||
-          stateObj.attributes.friendly_name ||
-          stateLabel}
+          ${name}
           <ha-assist-chip
             filled
             style=${styleMap({

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

@@ -8,7 +8,6 @@ import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import {
   stateColorBrightness,
   stateColorCss,
@@ -27,6 +26,7 @@ import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../../data/climate";
 import { isUnavailableState } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import { computeCardSize } from "../common/compute-card-size";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -125,7 +125,11 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
       ? this._config.attribute in stateObj.attributes
       : !isUnavailableState(stateObj.state);
 
-    const name = this._config.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     const colored = stateObj && this._getStateColor(stateObj, this._config);
 

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

@@ -2,11 +2,10 @@ import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { getNumberFormatOptions } from "../../../common/number/format_number";
 import "../../../components/ha-card";
@@ -15,6 +14,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 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, hasAnyAction } from "../common/has-action";
@@ -126,13 +126,19 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = this._config.name ?? computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     // Use `stateObj.state` as value to keep formatting (e.g trailing zeros)
     // for consistent value display across gauge, entity, entity-row, etc.
     return html`
       <ha-card
-        class=${classMap({ action: hasAnyAction(this._config) })}
+        class=${classMap({
+          action: hasAnyAction(this._config),
+        })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config.hold_action),

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

@@ -6,7 +6,6 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -15,6 +14,7 @@ import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
 import type { LovelaceCardFeatureContext } from "../card-features/types";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
@@ -133,7 +133,11 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = this._config!.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     const color = stateColorCss(stateObj);
 

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

@@ -7,7 +7,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateColorBrightness } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -18,6 +17,7 @@ import { lightSupportsBrightness } from "../../../data/light";
 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";
@@ -92,7 +92,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       ((stateObj.attributes.brightness || 0) / 255) * 100
     );
 
-    const name = this._config.name ?? computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     return html`
       <ha-card>

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -12,7 +12,6 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { extractColors } from "../../../common/image/extract_color";
 import { stateActive } from "../../../common/entity/state_active";
@@ -36,6 +35,7 @@ import {
   mediaPlayerPlayMedia,
 } from "../../../data/media-player";
 import type { HomeAssistant } from "../../../types";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-marquee";
@@ -242,8 +242,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                 .hass=${this.hass}
               ></ha-state-icon>
               <div>
-                ${this._config!.name ||
-                computeStateName(this.hass!.states[this._config!.entity])}
+                ${computeLovelaceEntityName(
+                  this.hass,
+                  this.hass!.states[this._config!.entity],
+                  this._config.name
+                )}
               </div>
             </div>
             <div>

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -5,7 +5,6 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-card";
 import type { CameraEntity } from "../../../data/camera";
 import type { ImageEntity } from "../../../data/image";
@@ -14,6 +13,7 @@ import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import type { PersonEntity } from "../../../data/person";
 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";
@@ -126,7 +126,11 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = this._config.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
     const entityState = this.hass.formatEntityState(stateObj);
 
     let footer: TemplateResult | string = "";

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -11,11 +11,11 @@ import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { batteryLevelIcon } from "../../../common/entity/battery_icon";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-card";
 import "../../../components/ha-svg-icon";
 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 { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -119,7 +119,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
           style="background-image:url(${stateObj.attributes.entity_picture})"
         >
           <div class="header">
-            ${this._config.name || computeStateName(stateObj)}
+            ${computeLovelaceEntityName(this.hass, stateObj, this._config.name)}
           </div>
         </div>
         <div class="content">

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

@@ -7,7 +7,6 @@ import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -16,6 +15,7 @@ import "../../../state-control/water_heater/ha-state-control-water_heater-temper
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
 import type { LovelaceCardFeatureContext } from "../card-features/types";
+import { computeLovelaceEntityName } from "../common/entity/compute-lovelace-entity-name";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
@@ -132,7 +132,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     }
     const domain = computeDomain(stateObj.entity_id);
 
-    const name = this._config!.name || computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     const color = stateColorCss(stateObj);
 

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

@@ -9,7 +9,6 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import type { EntityNameItem } from "../../../common/entity/compute_entity_name_display";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
@@ -26,6 +25,7 @@ import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
 import type { LovelaceCardFeatureContext } from "../card-features/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";
@@ -47,11 +47,6 @@ export const getEntityDefaultTileIconAction = (entityId: string) => {
   return supportsIconAction ? "toggle" : "none";
 };
 
-export const DEFAULT_NAME = [
-  { type: "device" },
-  { type: "entity" },
-] satisfies EntityNameItem[];
-
 @customElement("hui-tile-card")
 export class HuiTileCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -260,12 +255,11 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
     const contentClasses = { vertical: Boolean(this._config.vertical) };
 
-    const nameConfig = this._config.name;
-
-    const nameDisplay =
-      typeof nameConfig === "string"
-        ? nameConfig
-        : this.hass.formatEntityName(stateObj, nameConfig || DEFAULT_NAME);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     const active = stateActive(stateObj);
     const color = this._computeStateColor(stateObj, this._config.color);
@@ -278,7 +272,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             .stateObj=${stateObj}
             .hass=${this.hass}
             .content=${this._config.state_content}
-            .name=${nameDisplay}
+            .name=${name}
           >
           </state-display>
         `;
@@ -337,7 +331,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
               ${renderTileBadge(stateObj, this.hass)}
             </ha-tile-icon>
             <ha-tile-info id="info">
-              <span slot="primary" class="primary">${nameDisplay}</span>
+              <span slot="primary" class="primary">${name}</span>
               ${stateDisplay
                 ? html`<span slot="secondary">${stateDisplay}</span>`
                 : nothing}

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

@@ -7,7 +7,6 @@ import { classMap } from "lit/directives/class-map";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { computeStateName } from "../../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-card";
@@ -27,6 +26,7 @@ import {
 } from "../../../data/weather";
 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";
@@ -229,7 +229,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       return html`
         <ha-card class="unavailable" @click=${this._handleAction}>
           ${this.hass.localize("ui.panel.lovelace.warning.entity_unavailable", {
-            entity: `${computeStateName(stateObj)} (${this._config.entity})`,
+            entity: `${computeLovelaceEntityName(this.hass, stateObj, this._config.name)} (${this._config.entity})`,
           })}
         </ha-card>
       `;
@@ -260,7 +260,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     const dayNight = forecastData?.type === "twice_daily";
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
-    const name = this._config.name ?? computeStateName(stateObj);
+    const name = computeLovelaceEntityName(
+      this.hass,
+      stateObj,
+      this._config.name
+    );
 
     return html`
       <ha-card

src/panels/lovelace/cards/types.ts

@@ -40,7 +40,7 @@ export type AlarmPanelCardConfigState =
 
 export interface AlarmPanelCardConfig extends LovelaceCardConfig {
   entity: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   states?: AlarmPanelCardConfigState[];
   theme?: string;
 }
@@ -63,6 +63,9 @@ export interface EmptyStateCardConfig extends LovelaceCardConfig {
 }
 
 export interface EntityCardConfig extends LovelaceCardConfig {
+  entity: string;
+  name?: string | EntityNameItem | EntityNameItem[];
+  icon?: string;
   attribute?: string;
   unit?: string;
   theme?: string;
@@ -258,7 +261,7 @@ export interface GaugeSegment {
 export interface GaugeCardConfig extends LovelaceCardConfig {
   entity: string;
   attribute?: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   unit?: string;
   min?: number;
   max?: number;
@@ -271,12 +274,14 @@ export interface GaugeCardConfig extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
 }
 
-export interface ConfigEntity extends EntityConfig {
+export interface ActionsConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
 }
 
+export interface ConfigEntity extends EntityConfig, ActionsConfig {}
+
 export interface PictureGlanceEntityConfig extends ConfigEntity {
   show_state?: boolean;
   attribute?: string;
@@ -306,7 +311,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
 export interface HumidifierCardConfig extends LovelaceCardConfig {
   entity: string;
   theme?: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   show_current_as_primary?: boolean;
   features?: LovelaceCardFeatureConfig[];
 }
@@ -322,7 +327,7 @@ export interface IframeCardConfig extends LovelaceCardConfig {
 
 export interface LightCardConfig extends LovelaceCardConfig {
   entity: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   theme?: string;
   icon?: string;
   tap_action?: ActionConfig;
@@ -394,6 +399,7 @@ export interface ClockCardConfig extends LovelaceCardConfig {
 
 export interface MediaControlCardConfig extends LovelaceCardConfig {
   entity: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   theme?: string;
 }
 
@@ -469,7 +475,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
 
 export interface PictureEntityCardConfig extends LovelaceCardConfig {
   entity: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   image?: string;
   camera_image?: string;
   camera_view?: HuiImage["cameraView"];
@@ -509,14 +515,14 @@ export interface PlantAttributeTarget extends EventTarget {
 }
 
 export interface PlantStatusCardConfig extends LovelaceCardConfig {
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   entity: string;
   theme?: string;
 }
 
 export interface SensorCardConfig extends LovelaceCardConfig {
   entity: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   icon?: string;
   graph?: string;
   unit?: string;
@@ -552,14 +558,14 @@ export interface GridCardConfig extends StackCardConfig {
 export interface ThermostatCardConfig extends LovelaceCardConfig {
   entity: string;
   theme?: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   show_current_as_primary?: boolean;
   features?: LovelaceCardFeatureConfig[];
 }
 
 export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   entity: string;
-  name?: string;
+  name?: string | EntityNameItem | EntityNameItem[];
   show_current?: boolean;
   show_forecast?: boolean;
   forecast_type?: ForecastType;

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

@@ -0,0 +1,23 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import {
+  DEFAULT_ENTITY_NAME,
+  type EntityNameItem,
+} from "../../../../common/entity/compute_entity_name_display";
+import type { HomeAssistant } from "../../../../types";
+
+/**
+ * Computes the display name for an entity in Lovelace (cards and badges).
+ *
+ * @param hass - The Home Assistant instance
+ * @param stateObj - The entity state object
+ * @param nameConfig - The name configuration (string for override, or EntityNameItem[] for structured naming)
+ * @returns The computed entity name
+ */
+export const computeLovelaceEntityName = (
+  hass: HomeAssistant,
+  stateObj: HassEntity,
+  nameConfig: string | EntityNameItem | EntityNameItem[] | undefined
+): string =>
+  typeof nameConfig === "string"
+    ? nameConfig
+    : hass.formatEntityName(stateObj, nameConfig || DEFAULT_ENTITY_NAME);

src/panels/lovelace/common/graph/coordinates.ts

@@ -1,134 +1,85 @@
-import { strokeWidth } from "../../../../data/graph";
+import { downSampleLineData } from "../../../../components/chart/down-sample";
 import type { EntityHistoryState } from "../../../../data/history";
 
-const average = (items: any[]): number =>
-  items.reduce((sum, entry) => sum + parseFloat(entry.state), 0) / items.length;
-
-const lastValue = (items: any[]): number =>
-  parseFloat(items[items.length - 1].state) || 0;
-
 const calcPoints = (
-  history: any,
-  hours: number,
+  history: [number, number][],
   width: number,
-  detail: number,
-  min: number,
-  max: number
-): [number, number][] => {
-  const coords = [] as [number, number][];
-  const height = 80;
-  let yRatio = (max - min) / height;
-  yRatio = yRatio !== 0 ? yRatio : height;
-  let xRatio = width / (hours - (detail === 1 ? 1 : 0));
-  xRatio = isFinite(xRatio) ? xRatio : width;
-
-  let first = history.filter(Boolean)[0];
-  if (detail > 1) {
-    first = first.filter(Boolean)[0];
-  }
-  let last = [average(first), lastValue(first)];
-
-  const getY = (value: number): number =>
-    height + strokeWidth / 2 - (value - min) / yRatio;
-
-  const getCoords = (item: any[], i: number, offset = 0, depth = 1) => {
-    if (depth > 1 && item) {
-      return item.forEach((subItem, index) =>
-        getCoords(subItem, i, index, depth - 1)
-      );
+  height: number,
+  limits?: { minX?: number; maxX?: number; minY?: number; maxY?: number }
+) => {
+  let yAxisOrigin = height;
+  let minY = limits?.minY ?? history[0][1];
+  let maxY = limits?.maxY ?? history[0][1];
+  const minX = limits?.minX ?? history[0][0];
+  const maxX = limits?.maxX ?? history[history.length - 1][0];
+  history.forEach(([_, stateValue]) => {
+    if (stateValue < minY) {
+      minY = stateValue;
+    } else if (stateValue > maxY) {
+      maxY = stateValue;
     }
-
-    const x = xRatio * (i + offset / 6);
-
-    if (item) {
-      last = [average(item), lastValue(item)];
-    }
-    const y = getY(item ? last[0] : last[1]);
-    return coords.push([x, y]);
-  };
-
-  for (let i = 0; i < history.length; i += 1) {
-    getCoords(history[i], i, 0, detail);
+  });
+  const rangeY = maxY - minY || minY * 0.1;
+  if (maxY < 0) {
+    // all values are negative
+    // add margin
+    maxY += rangeY * 0.1;
+    maxY = Math.min(0, maxY);
+    yAxisOrigin = 0;
+  } else if (minY < 0) {
+    // some values are negative
+    yAxisOrigin = (maxY / (maxY - minY || 1)) * height;
+  } else {
+    // all values are positive
+    // add margin
+    minY -= rangeY * 0.1;
+    minY = Math.max(0, minY);
   }
-
-  coords.push([width, getY(last[1])]);
-  return coords;
+  const yDenom = maxY - minY || 1;
+  const xDenom = maxX - minX || 1;
+  const points: [number, number][] = history.map((point) => {
+    const x = ((point[0] - minX) / xDenom) * width;
+    const y = height - ((point[1] - minY) / yDenom) * height;
+    return [x, y];
+  });
+  points.push([width, points[points.length - 1][1]]);
+  return { points, yAxisOrigin };
 };
 
 export const coordinates = (
-  history: any,
-  hours: number,
+  history: [number, number][],
   width: number,
-  detail: number,
-  limits?: { min?: number; max?: number }
-): [number, number][] | undefined => {
-  history.forEach((item) => {
-    item.state = Number(item.state);
-  });
-  history = history.filter((item) => !Number.isNaN(item.state));
+  height: number,
+  maxDetails: number,
+  limits?: { minX?: number; maxX?: number; minY?: number; maxY?: number }
+) => {
+  history = history.filter((item) => !Number.isNaN(item[1]));
 
-  const min =
-    limits?.min !== undefined
-      ? limits.min
-      : Math.min(...history.map((item) => item.state));
-  const max =
-    limits?.max !== undefined
-      ? limits.max
-      : Math.max(...history.map((item) => item.state));
-  const now = new Date().getTime();
-
-  const reduce = (res, item, point) => {
-    const age = now - new Date(item.last_changed).getTime();
-
-    let key = Math.abs(age / (1000 * 3600) - hours);
-    if (point) {
-      key = (key - Math.floor(key)) * 60;
-      key = Number((Math.round(key / 10) * 10).toString()[0]);
-    } else {
-      key = Math.floor(key);
-    }
-    if (!res[key]) {
-      res[key] = [];
-    }
-    res[key].push(item);
-    return res;
-  };
-
-  history = history.reduce((res, item) => reduce(res, item, false), []);
-  if (detail > 1) {
-    history = history.map((entry) =>
-      entry.reduce((res, item) => reduce(res, item, true), [])
-    );
-  }
-
-  if (!history.length) {
-    return undefined;
-  }
-
-  return calcPoints(history, hours, width, detail, min, max);
+  const sampledData: [number, number][] = downSampleLineData(
+    history,
+    maxDetails,
+    limits?.minX,
+    limits?.maxX
+  );
+  return calcPoints(sampledData, width, height, limits);
 };
 
-interface NumericEntityHistoryState {
-  state: number;
-  last_changed: number;
-}
-
 export const coordinatesMinimalResponseCompressedState = (
-  history: EntityHistoryState[],
-  hours: number,
+  history: EntityHistoryState[] | undefined,
   width: number,
-  detail: number,
-  limits?: { min?: number; max?: number }
-): [number, number][] | undefined => {
-  if (!history) {
-    return undefined;
+  height: number,
+  maxDetails: number,
+  limits?: { minX?: number; maxX?: number; minY?: number; maxY?: number }
+) => {
+  if (!history?.length) {
+    return { points: [], yAxisOrigin: 0 };
   }
-  const numericHistory: NumericEntityHistoryState[] = history.map((item) => ({
-    state: Number(item.s),
+  const mappedHistory: [number, number][] = history.map((item) => [
     // With minimal response and compressed state, we don't have last_changed,
     // so we use last_updated since its always the same as last_changed since
     // we already filtered out states that are the same.
-    last_changed: item.lu * 1000,
-  }));
-  return coordinates(numericHistory, hours, width, detail, limits);
+    item.lu * 1000,
+    Number(item.s),
+  ]);
+  return coordinates(mappedHistory, width, height, maxDetails, limits);
 };

src/panels/lovelace/common/has-action.ts

@@ -1,11 +1,11 @@
 import type { ActionConfig } from "../../../data/lovelace/config/action";
-import type { ConfigEntity } from "../cards/types";
+import type { ActionsConfig } from "../cards/types";
 
 export function hasAction(config?: ActionConfig): boolean {
   return config !== undefined && config.action !== "none";
 }
 
-export function hasAnyAction(config: ConfigEntity): boolean {
+export function hasAnyAction(config: ActionsConfig): boolean {
   return (
     !config.tap_action ||
     hasAction(config.tap_action) ||

src/panels/lovelace/components/hui-graph-base.ts

@@ -6,20 +6,26 @@ import { getPath } from "../common/graph/get-path";
 
 @customElement("hui-graph-base")
 export class HuiGraphBase extends LitElement {
-  @property() public coordinates?: any;
+  @property({ attribute: false }) public coordinates?: number[][];
+
+  @property({ attribute: "y-axis-origin", type: Number })
+  public yAxisOrigin?: number;
 
   @state() private _path?: string;
 
   protected render(): TemplateResult {
+    const width = this.clientWidth || 500;
+    const height = this.clientHeight || width / 5;
+    const yAxisOrigin = this.yAxisOrigin ?? height;
     return html`
       ${this._path
-        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
+        ? svg`<svg width="100%" height="100%" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
           <g>
             <mask id="fill">
               <path
                 class='fill'
                 fill='white'
-                d="${this._path} L 500, 100 L 0, 100 z"
+                d="${this._path} L ${width}, ${yAxisOrigin} L 0, ${yAxisOrigin} z"
               />
             </mask>
             <rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
@@ -38,7 +44,7 @@ export class HuiGraphBase extends LitElement {
             <rect height="100%" width="100%" id="rect" fill="var(--accent-color)" mask="url(#line)"></rect>
           </g>
         </svg>`
-        : svg`<svg width="100%" height="100%" viewBox="0 0 500 100"></svg>`}
+        : svg`<svg width="100%" height="100%" viewBox="0 0 ${width} ${height}"></svg>`}
     `;
   }
 

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

@@ -1,32 +1,34 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { array, assert, assign, object, optional, string } from "superstruct";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
+import { supportsFeature } from "../../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
+import { ALARM_MODES } from "../../../../data/alarm_control_panel";
 import type { HomeAssistant } from "../../../../types";
+import {
+  ALARM_MODE_STATE_MAP,
+  DEFAULT_STATES,
+  filterSupportedAlarmStates,
+} from "../../cards/hui-alarm-panel-card";
 import type {
   AlarmPanelCardConfig,
   AlarmPanelCardConfigState,
 } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import {
-  DEFAULT_STATES,
-  ALARM_MODE_STATE_MAP,
-  filterSupportedAlarmStates,
-} from "../../cards/hui-alarm-panel-card";
-import { supportsFeature } from "../../../../common/entity/supports-feature";
-import { ALARM_MODES } from "../../../../data/alarm_control_panel";
+import { entityNameStruct } from "../structs/entity-name-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     states: optional(array()),
     theme: optional(string()),
   })
@@ -61,13 +63,15 @@ export class HuiAlarmPanelCardEditor
           selector: { entity: { domain: "alarm_control_panel" } },
         },
         {
-          type: "grid",
-          name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            { name: "theme", selector: { theme: {} } },
-          ],
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
         },
+        { name: "theme", selector: { theme: {} } },
         {
           name: "states",
           selector: {

src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts

@@ -13,6 +13,7 @@ import {
   string,
   union,
 } from "superstruct";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
@@ -31,6 +32,7 @@ import type { LovelaceBadgeEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceBadgeConfig } from "../structs/base-badge-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
 
@@ -39,7 +41,7 @@ const badgeConfigStruct = assign(
   object({
     entity: optional(string()),
     display_type: optional(enums(DISPLAY_TYPES)),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     icon: optional(string()),
     state_content: optional(union([string(), array(string())])),
     color: optional(string()),
@@ -81,16 +83,19 @@ export class HuiEntityBadgeEditor
           flatten: true,
           iconPath: mdiTextShort,
           schema: [
+            {
+              name: "name",
+              selector: {
+                entity_name: {
+                  default_name: DEFAULT_ENTITY_NAME,
+                },
+              },
+              context: { entity: "entity" },
+            },
             {
               name: "",
               type: "grid",
               schema: [
-                {
-                  name: "name",
-                  selector: {
-                    text: {},
-                  },
-                },
                 {
                   name: "color",
                   selector: {

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

@@ -1,16 +1,17 @@
 import { assert, assign, boolean, object, optional, string } from "superstruct";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { HaFormSchema } from "../../../../components/ha-form/types";
-import type { EntityCardConfig } from "../../cards/types";
 import { headerFooterConfigStructs } from "../../header-footer/structs";
 import type { LovelaceConfigForm } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 
 const struct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     icon: optional(string()),
     attribute: optional(string()),
     unit: optional(string()),
@@ -22,11 +23,19 @@ const struct = assign(
 
 const SCHEMA = [
   { name: "entity", required: true, selector: { entity: {} } },
+  {
+    name: "name",
+    selector: {
+      entity_name: {
+        default_name: DEFAULT_ENTITY_NAME,
+      },
+    },
+    context: { entity: "entity" },
+  },
   {
     type: "grid",
     name: "",
     schema: [
-      { name: "name", selector: { text: {} } },
       {
         name: "icon",
         selector: {
@@ -54,7 +63,7 @@ const SCHEMA = [
 
 const entityCardConfigForm: LovelaceConfigForm = {
   schema: SCHEMA,
-  assertConfig: (config: EntityCardConfig) => assert(config, struct),
+  assertConfig: (config) => assert(config, struct),
   computeLabel: (schema: HaFormSchema, localize: LocalizeFunc) => {
     if (schema.name === "theme") {
       return `${localize(

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

@@ -14,8 +14,10 @@ import {
   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 { SchemaUnion } from "../../../../components/ha-form/types";
+import { NON_NUMERIC_ATTRIBUTES } from "../../../../data/entity_attributes";
 import type { HomeAssistant } from "../../../../types";
 import { DEFAULT_MAX, DEFAULT_MIN } from "../../cards/hui-gauge-card";
 import type { GaugeCardConfig } from "../../cards/types";
@@ -23,7 +25,7 @@ import type { UiAction } from "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { NON_NUMERIC_ATTRIBUTES } from "../../../../data/entity_attributes";
+import { entityNameStruct } from "../structs/entity-name-struct";
 
 const TAP_ACTIONS: UiAction[] = [
   "more-info",
@@ -43,7 +45,7 @@ const gaugeSegmentStruct = object({
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
-    name: optional(string()),
+    name: optional(entityNameStruct),
     entity: optional(string()),
     attribute: optional(string()),
     unit: optional(string()),
@@ -98,13 +100,15 @@ export class HuiGaugeCardEditor
           },
         },
         {
-          name: "",
-          type: "grid",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            { name: "unit", selector: { text: {} } },
-          ],
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
         },
+        { name: "unit", selector: { text: {} } },
         { name: "theme", selector: { theme: {} } },
         {
           name: "",

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

@@ -14,6 +14,7 @@ import {
 } from "superstruct";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
@@ -29,6 +30,7 @@ import type {
 import type { HumidifierCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 import type { EditDetailElementEvent, EditSubElementEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
@@ -43,7 +45,7 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     theme: optional(string()),
     show_current_as_primary: optional(boolean()),
     features: optional(array(any())),
@@ -56,13 +58,19 @@ const SCHEMA = [
     required: true,
     selector: { entity: { domain: "humidifier" } },
   },
+  {
+    name: "name",
+    selector: {
+      entity_name: {
+        default_name: DEFAULT_ENTITY_NAME,
+      },
+    },
+    context: { entity: "entity" },
+  },
   {
     type: "grid",
     name: "",
-    schema: [
-      { name: "name", selector: { text: {} } },
-      { name: "theme", selector: { theme: {} } },
-    ],
+    schema: [{ name: "theme", selector: { theme: {} } }],
   },
   {
     name: "show_current_as_primary",

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { assert, assign, object, optional, string } from "superstruct";
 import { mdiGestureTap } from "@mdi/js";
 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 { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -11,12 +12,13 @@ import type { LightCardConfig } 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({
-    name: optional(string()),
+    name: optional(entityNameStruct),
     entity: optional(string()),
     theme: optional(string()),
     icon: optional(string()),
@@ -32,11 +34,19 @@ const SCHEMA = [
     required: true,
     selector: { entity: { domain: "light" } },
   },
+  {
+    name: "name",
+    selector: {
+      entity_name: {
+        default_name: DEFAULT_ENTITY_NAME,
+      },
+    },
+    context: { entity: "entity" },
+  },
   {
     type: "grid",
     name: "",
     schema: [
-      { name: "name", selector: { text: {} } },
       {
         name: "icon",
         selector: {

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

@@ -2,23 +2,45 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-theme-picker";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
+import "../../../../components/ha-form/ha-form";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { MediaControlCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import type { EditorTarget, EntitiesEditorEvent } from "../types";
+import { entityNameStruct } from "../structs/entity-name-struct";
+import { configElementStyle } from "./config-elements-style";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
+    name: optional(entityNameStruct),
     theme: optional(string()),
   })
 );
 
-const includeDomains = ["media_player"];
+const SCHEMA = [
+  {
+    name: "entity",
+    required: true,
+    selector: { entity: { domain: "media_player" } },
+  },
+  {
+    name: "name",
+    selector: {
+      entity_name: {
+        default_name: DEFAULT_ENTITY_NAME,
+      },
+    },
+    context: { entity: "entity" },
+  },
+  { name: "theme", selector: { theme: {} } },
+] as const satisfies readonly HaFormSchema[];
 
 @customElement("hui-media-control-card-editor")
 export class HuiMediaControlCardEditor
@@ -34,69 +56,40 @@ export class HuiMediaControlCardEditor
     this._config = config;
   }
 
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
     return html`
-      <div class="card-config">
-        <ha-entity-picker
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.entity"
-          )}
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          .required=${true}
-          @value-changed=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <ha-theme-picker
-          .label=${`${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.generic.theme"
-          )} (${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})`}
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></ha-theme-picker>
-      </div>
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
-    if (this[`_${target.configValue}`] === target.value) {
-      return;
-    }
-    if (target.configValue) {
-      if (target.value === "") {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        this._config = {
-          ...this._config,
-          [target.configValue!]: target.value,
-        };
-      }
-    }
-    fireEvent(this, "config-changed", { config: this._config });
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
+
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    if (schema.name === "theme") {
+      return `${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.generic.theme"
+      )} (${this.hass!.localize(
+        "ui.panel.lovelace.editor.card.config.optional"
+      )})`;
+    }
+    return this.hass!.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+    );
+  };
+
+  static styles = configElementStyle;
 }
 
 declare global {

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

@@ -14,6 +14,7 @@ import {
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type {
@@ -26,6 +27,7 @@ import type { PictureEntityCardConfig } 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(
@@ -33,7 +35,7 @@ const cardConfigStruct = assign(
   object({
     entity: optional(string()),
     image: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     camera_image: optional(string()),
     camera_view: optional(enums(["auto", "live"])),
     aspect_ratio: optional(string()),
@@ -65,7 +67,15 @@ export class HuiPictureEntityCardEditor
     (localize: LocalizeFunc) =>
       [
         { name: "entity", required: true, selector: { entity: {} } },
-        { name: "name", selector: { text: {} } },
+        {
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
+        },
         { name: "image", selector: { image: {} } },
         { name: "camera_image", selector: { entity: { domain: "camera" } } },
         {

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

@@ -2,25 +2,35 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { assert, assign, 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 { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import type { PlantStatusCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     theme: optional(string()),
   })
 );
 
 const SCHEMA = [
   { name: "entity", required: true, selector: { entity: { domain: "plant" } } },
-  { name: "name", selector: { text: {} } },
+  {
+    name: "name",
+    selector: {
+      entity_name: {
+        default_name: DEFAULT_ENTITY_NAME,
+      },
+    },
+    context: { entity: "entity" },
+  },
   { name: "theme", selector: { theme: {} } },
 ] as const;
 

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

@@ -12,6 +12,7 @@ import {
   string,
   union,
 } from "superstruct";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
@@ -20,6 +21,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { SensorCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 import { configElementStyle } from "./config-elements-style";
 import { DEFAULT_HOURS_TO_SHOW } from "../../cards/hui-sensor-card";
 
@@ -27,7 +29,7 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     icon: optional(string()),
     graph: optional(union([literal("line"), literal("none")])),
     unit: optional(string()),
@@ -66,7 +68,15 @@ export class HuiSensorCardEditor
             entity: { domain: ["counter", "input_number", "number", "sensor"] },
           },
         },
-        { name: "name", selector: { text: {} } },
+        {
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
+        },
         {
           type: "grid",
           name: "",

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

@@ -14,6 +14,7 @@ import {
 } from "superstruct";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
@@ -29,6 +30,7 @@ import type {
 import type { ThermostatCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 import type { EditDetailElementEvent, EditSubElementEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
@@ -50,7 +52,7 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     theme: optional(string()),
     show_current_as_primary: optional(boolean()),
     features: optional(array(any())),
@@ -84,13 +86,19 @@ export class HuiThermostatCardEditor
           name: "entity",
           selector: { entity: { domain: ["climate", "water_heater"] } },
         },
+        {
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
+        },
         {
           type: "grid",
           name: "",
-          schema: [
-            { name: "name", selector: { text: {} } },
-            { name: "theme", selector: { theme: {} } },
-          ],
+          schema: [{ name: "theme", selector: { theme: {} } }],
         },
         ...(domain === "climate"
           ? [

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

@@ -16,6 +16,7 @@ import {
 } from "superstruct";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 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 { orderProperties } from "../../../../common/util/order-properties";
 import "../../../../components/ha-expansion-panel";
@@ -30,10 +31,7 @@ import type {
   LovelaceCardFeatureConfig,
   LovelaceCardFeatureContext,
 } from "../../card-features/types";
-import {
-  DEFAULT_NAME,
-  getEntityDefaultTileIconAction,
-} from "../../cards/hui-tile-card";
+import { getEntityDefaultTileIconAction } from "../../cards/hui-tile-card";
 import type { TileCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
@@ -105,7 +103,7 @@ export class HuiTileCardEditor
               name: "name",
               selector: {
                 entity_name: {
-                  default_name: DEFAULT_NAME,
+                  default_name: DEFAULT_ENTITY_NAME,
                 },
               },
               context: { entity: "entity" },

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

@@ -12,6 +12,7 @@ import {
   string,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { DEFAULT_ENTITY_NAME } from "../../../../common/entity/compute_entity_name_display";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
@@ -24,12 +25,13 @@ import type { WeatherForecastCardConfig } 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";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    name: optional(string()),
+    name: optional(entityNameStruct),
     theme: optional(string()),
     show_current: optional(boolean()),
     show_forecast: optional(boolean()),
@@ -148,7 +150,15 @@ export class HuiWeatherForecastCardEditor
           required: true,
           selector: { entity: { domain: "weather" } },
         },
-        { name: "name", selector: { text: {} } },
+        {
+          name: "name",
+          selector: {
+            entity_name: {
+              default_name: DEFAULT_ENTITY_NAME,
+            },
+          },
+          context: { entity: "entity" },
+        },
         {
           name: "",
           type: "grid",

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -153,14 +153,20 @@ export class HuiGraphHeaderFooter
           // Message came in before we had a chance to unload
           return;
         }
-        this._coordinates =
-          coordinatesMinimalResponseCompressedState(
-            combinedHistory[this._config.entity],
-            this._config.hours_to_show!,
-            500,
-            this._config.detail!,
-            this._config.limits
-          ) || [];
+        const width = this.clientWidth || this.offsetWidth;
+        // sample to 1 point per hour or 1 point per 5 pixels
+        const maxDetails =
+          this._config.detail! > 1
+            ? Math.max(width / 5, this._config.hours_to_show!)
+            : this._config.hours_to_show!;
+        const { points } = coordinatesMinimalResponseCompressedState(
+          combinedHistory[this._config.entity],
+          width,
+          width / 5,
+          maxDetails,
+          { minY: this._config.limits?.min, maxY: this._config.limits?.max }
+        );
+        this._coordinates = points;
       },
       this._config.hours_to_show!,
       [this._config.entity]

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

@@ -4,6 +4,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
 import type { AreaRegistryEntry } from "../../../../data/area_registry";
 import { getEnergyPreferences } from "../../../../data/energy";
+import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type {
   LovelaceSectionConfig,
   LovelaceSectionRawConfig,
@@ -15,11 +16,11 @@ import type {
   AreaCardConfig,
   HomeSummaryCard,
   MarkdownCardConfig,
-  TileCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
-import { getAreas } from "../areas/helpers/areas-strategy-helper";
+import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
 import type { CommonControlSectionStrategyConfig } from "../usage_prediction/common-controls-section-strategy";
+import { getHomeStructure } from "./helpers/home-structure";
 
 export interface HomeMainViewStrategyConfig {
   type: "home-main";
@@ -59,25 +60,67 @@ export class HomeMainViewStrategy extends ReactiveElement {
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
+    const floors = getFloors(hass.floors);
 
-    const areasSection: LovelaceSectionConfig = {
-      type: "grid",
-      column_span: 2,
-      cards: [
-        {
-          type: "heading",
-          heading_style: "title",
-          heading: hass.localize("ui.panel.lovelace.strategy.home.areas"),
-        },
-        ...areas.map<AreaCardConfig>((area) =>
-          computeAreaCard(area.area_id, hass)
-        ),
-      ],
-    };
+    const home = getHomeStructure(floors, areas);
+
+    const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
     // Allow between 2 and 3 columns (the max should be set to define the width of the header)
     const maxColumns = 2;
 
+    const floorsSections: LovelaceSectionConfig[] = [];
+    for (const floorStructure of home.floors) {
+      const floorId = floorStructure.id;
+      const areaIds = floorStructure.areas;
+      const floor = hass.floors[floorId];
+
+      const cards: LovelaceCardConfig[] = [];
+      for (const areaId of areaIds) {
+        cards.push(computeAreaCard(areaId, hass));
+      }
+
+      if (cards.length) {
+        floorsSections.push({
+          type: "grid",
+          column_span: maxColumns,
+          cards: [
+            {
+              type: "heading",
+              heading:
+                floorCount > 1
+                  ? floor.name
+                  : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+              heading_style: "title",
+            },
+            ...cards,
+          ],
+        });
+      }
+    }
+
+    if (home.areas.length) {
+      const cards: LovelaceCardConfig[] = [];
+      for (const areaId of home.areas) {
+        cards.push(computeAreaCard(areaId, hass));
+      }
+      floorsSections.push({
+        type: "grid",
+        column_span: maxColumns,
+        cards: [
+          {
+            type: "heading",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
+            heading_style: "title",
+          },
+          ...cards,
+        ],
+      });
+    }
+
     const favoriteSection: LovelaceSectionConfig = {
       type: "grid",
       column_span: maxColumns,
@@ -87,31 +130,14 @@ export class HomeMainViewStrategy extends ReactiveElement {
     const favoriteEntities = (config.favorite_entities || []).filter(
       (entityId) => hass.states[entityId] !== undefined
     );
-
-    if (favoriteEntities.length > 0) {
-      favoriteSection.cards!.push(
-        {
-          type: "heading",
-          heading: "",
-          heading_style: "subtitle",
-        },
-        ...favoriteEntities.map(
-          (entityId) =>
-            ({
-              type: "tile",
-              entity: entityId,
-              show_entity_picture: true,
-            }) as TileCardConfig
-        )
-      );
-    }
+    const maxCommonControls = Math.max(8, favoriteEntities.length);
 
     const commonControlsSection = {
       strategy: {
         type: "common-controls",
         title: hass.localize("ui.panel.lovelace.strategy.home.common_controls"),
-        limit: 4,
-        exclude_entities: favoriteEntities,
+        limit: maxCommonControls,
+        include_entities: favoriteEntities,
         hide_empty: true,
       } satisfies CommonControlSectionStrategyConfig,
       column_span: maxColumns,
@@ -234,7 +260,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         favoriteSection.cards && favoriteSection,
         commonControlsSection,
         summarySection,
-        areasSection,
+        ...floorsSections,
         widgetSection.cards && widgetSection,
       ] satisfies (LovelaceSectionRawConfig | undefined)[]
     ).filter(Boolean) as LovelaceSectionRawConfig[];

src/panels/lovelace/strategies/usage_prediction/common-controls-section-strategy.ts

@@ -14,6 +14,7 @@ export interface CommonControlSectionStrategyConfig {
   icon?: string;
   limit?: number;
   exclude_entities?: string[];
+  include_entities?: string[];
   hide_empty?: boolean;
 }
 
@@ -52,12 +53,23 @@ export class CommonControlsSectionStrategy extends ReactiveElement {
       (entity) => entity in hass.states
     );
 
-    if (config.exclude_entities) {
+    if (config.exclude_entities?.length) {
       predictedEntities = predictedEntities.filter(
         (entity) => !config.exclude_entities!.includes(entity)
       );
     }
 
+    if (config.include_entities?.length) {
+      // Remove included entities from predicted list to avoid duplicates
+      predictedEntities = predictedEntities.filter(
+        (entity) => !config.include_entities!.includes(entity)
+      );
+      // Add included entities to the start of the list
+      predictedEntities.unshift(
+        ...config.include_entities!.filter((entity) => entity in hass.states)
+      );
+    }
+
     const limit = config.limit ?? DEFAULT_LIMIT;
     predictedEntities = predictedEntities.slice(0, limit);
 

src/panels/media-browser/hui-dialog-web-browser-play-media.ts

@@ -20,6 +20,11 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
 
   public closeDialog() {
     this._params = undefined;
+    const img = this.renderRoot.querySelector("img");
+    if (img) {
+      // Unload streaming images so the connection can be closed
+      img.src = "";
+    }
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 

src/translations/en.json

@@ -9520,8 +9520,8 @@
             "description": "This will restart the add-on if it crashes"
           },
           "auto_update": {
-            "title": "Autoupdate",
-            "description": "Autoupdate the add-on when there is a new version available"
+            "title": "Automatically update",
+            "description": "Automatically update the add-on when a new version is available"
           },
           "ingress_panel": {
             "title": "Add to sidebar",

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

@@ -0,0 +1,80 @@
+import { describe, expect, it, vi } from "vitest";
+import { DEFAULT_ENTITY_NAME } from "../../../../../src/common/entity/compute_entity_name_display";
+import { computeLovelaceEntityName } from "../../../../../src/panels/lovelace/common/entity/compute-lovelace-entity-name";
+import type { HomeAssistant } from "../../../../../src/types";
+import { mockStateObj } from "../../../../common/entity/context/context-mock";
+
+const createMockHass = (
+  mockFormatEntityName: ReturnType<typeof vi.fn>
+): HomeAssistant =>
+  ({
+    formatEntityName: mockFormatEntityName,
+  }) as unknown as HomeAssistant;
+
+describe("computeLovelaceEntityName", () => {
+  it("returns the string directly when nameConfig is a string", () => {
+    const mockFormatEntityName = vi.fn();
+    const hass = createMockHass(mockFormatEntityName);
+    const stateObj = mockStateObj({ entity_id: "light.kitchen" });
+
+    const result = computeLovelaceEntityName(hass, stateObj, "Custom Name");
+
+    expect(result).toBe("Custom Name");
+    expect(mockFormatEntityName).not.toHaveBeenCalled();
+  });
+
+  it("returns empty string when nameConfig is empty string", () => {
+    const mockFormatEntityName = vi.fn();
+    const hass = createMockHass(mockFormatEntityName);
+    const stateObj = mockStateObj({ entity_id: "light.kitchen" });
+
+    const result = computeLovelaceEntityName(hass, stateObj, "");
+
+    expect(result).toBe("");
+    expect(mockFormatEntityName).not.toHaveBeenCalled();
+  });
+
+  it("calls formatEntityName with DEFAULT_ENTITY_NAME when nameConfig is undefined", () => {
+    const mockFormatEntityName = vi.fn(() => "Formatted Name");
+    const hass = createMockHass(mockFormatEntityName);
+    const stateObj = mockStateObj({ entity_id: "light.kitchen" });
+
+    const result = computeLovelaceEntityName(hass, stateObj, undefined);
+
+    expect(result).toBe("Formatted Name");
+    expect(mockFormatEntityName).toHaveBeenCalledTimes(1);
+    expect(mockFormatEntityName).toHaveBeenCalledWith(
+      stateObj,
+      DEFAULT_ENTITY_NAME
+    );
+  });
+
+  it("calls formatEntityName with EntityNameItem config", () => {
+    const mockFormatEntityName = vi.fn(() => "Formatted Name");
+    const hass = createMockHass(mockFormatEntityName);
+    const stateObj = mockStateObj({ entity_id: "light.bedroom" });
+    const nameConfig = { type: "device" as const };
+
+    const result = computeLovelaceEntityName(hass, stateObj, nameConfig);
+
+    expect(result).toBe("Formatted Name");
+    expect(mockFormatEntityName).toHaveBeenCalledTimes(1);
+    expect(mockFormatEntityName).toHaveBeenCalledWith(stateObj, nameConfig);
+  });
+
+  it("calls formatEntityName with array of EntityNameItems", () => {
+    const mockFormatEntityName = vi.fn(() => "Formatted Name");
+    const hass = createMockHass(mockFormatEntityName);
+    const stateObj = mockStateObj({ entity_id: "light.kitchen" });
+    const nameConfig = [
+      { type: "device" as const },
+      { type: "entity" as const },
+    ];
+
+    const result = computeLovelaceEntityName(hass, stateObj, nameConfig);
+
+    expect(result).toBe("Formatted Name");
+    expect(mockFormatEntityName).toHaveBeenCalledTimes(1);
+    expect(mockFormatEntityName).toHaveBeenCalledWith(stateObj, nameConfig);
+  });
+});

yarn.lock

@@ -1698,15 +1698,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.5":
-  version: 2.3.5
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.5"
+"@formatjs/ecma402-abstract@npm:2.3.6":
+  version: 2.3.6
+  resolution: "@formatjs/ecma402-abstract@npm:2.3.6"
   dependencies:
     "@formatjs/fast-memoize": "npm:2.2.7"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/254651057170836237dc4f0fbb372157f97133c4dcee414007e0cdb5b589baf0546c2f6337d117b988ee0a4f0a4d8247780aaa9e96b410c568495f162c40dc50
+  checksum: 10/30b1b5cd6b62ba46245f934429936592df5500bc1b089dc92dd49c826757b873dd92c305dcfe370701e4df6b057bf007782113abb9b65db550d73be4961718bc
   languageName: node
   linkType: hard
 
@@ -1719,68 +1719,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.3":
-  version: 2.11.3
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.3"
+"@formatjs/icu-messageformat-parser@npm:2.11.4":
+  version: 2.11.4
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.4"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.15"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/icu-skeleton-parser": "npm:1.8.16"
     tslib: "npm:^2.8.0"
-  checksum: 10/339f5ff5ea7417e2db7f01bd41340f78fd5a8e56a66e723272d21ce7ab4b265dcb45748cdca76eac7137e2b5e6767986812b471e011b4602cf7afbc6da57fb98
+  checksum: 10/2acb100c06c2ade666d72787fb9f9795b1ace41e8e73bfadc2b1a7b8562e81f655e484f0f33d8c39473aa17bf0ad96fb2228871806a9b3dc4f5f876754a0de3a
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.15":
-  version: 1.8.15
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.15"
+"@formatjs/icu-skeleton-parser@npm:1.8.16":
+  version: 1.8.16
+  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.16"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/19825abc1a5eef0288456c08420d06f3da8256fbe81db0b9ead48cacc94954d748c8068988e26d184d38fca2e50c191ecda5a10ff3935529c3134b8d80db0538
+  checksum: 10/428001e5bed81889b276a2356a1393157af91dc59220b765a1a132f6407ac5832b7ac6ae9737674ac38e44035295c0c1c310b2630f383f2b5779ea90bf2849e6
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.18.1":
-  version: 6.18.1
-  resolution: "@formatjs/intl-datetimeformat@npm:6.18.1"
+"@formatjs/intl-datetimeformat@npm:6.18.2":
+  version: 6.18.2
+  resolution: "@formatjs/intl-datetimeformat@npm:6.18.2"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/66938778ecf37472a7e2f1d9349b0ac249fcbd5d684ae5614dea07287876182429980ba2fe3671224f981065baf017ac955f4b3c1f3c924c89bf2ec82dd1acd8
+  checksum: 10/e6f80d0eb2049564502370839697a18858268a0dff8d199b1908137c4a229b1303131c12b8b8a8e8e259a1feba26dbc25b003b150adabea10d1c43f68086efbe
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:6.8.12":
-  version: 6.8.12
-  resolution: "@formatjs/intl-displaynames@npm:6.8.12"
+"@formatjs/intl-displaynames@npm:6.8.13":
+  version: 6.8.13
+  resolution: "@formatjs/intl-displaynames@npm:6.8.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/7de27ef7e8cde2febce84d5443f00b70062cbd0c3f1039ce8ed1caacb15c4c7a36da16295f26657d59aa4663141a04d7b1083bfd1eea6a4e8ad9dc6093a2c886
+  checksum: 10/adefd25fa42266c7bc33dd3cd50f3681bdce51d18b32a03c98f8ad7587dfd8b9291345e185a4b16f31f4eee10fc799fd1b6361bdfd3a2c9fe127744e1e0f3b07
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.7.5":
-  version: 0.7.5
-  resolution: "@formatjs/intl-durationformat@npm:0.7.5"
+"@formatjs/intl-durationformat@npm:0.7.6":
+  version: 0.7.6
+  resolution: "@formatjs/intl-durationformat@npm:0.7.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/4dc81b112fed25dc8da0a16ddeff033b7c763bf9a1cfd7b1b25c1216f7f147eb67a47059a3cf95b4d4ade150c54a813542b84e69298905a4bc22548d74bf8567
+  checksum: 10/442236ba85bcd9cb7296c43a708271fa09f110b1ca9d5899066d00812fc2965eaeaec6b5240be421b80daba62860352131088449ba0fcd2061f671cec6240f0b
   languageName: node
   linkType: hard
 
-"@formatjs/intl-enumerator@npm:1.8.11":
-  version: 1.8.11
-  resolution: "@formatjs/intl-enumerator@npm:1.8.11"
+"@formatjs/intl-enumerator@npm:1.8.12":
+  version: 1.8.12
+  resolution: "@formatjs/intl-enumerator@npm:1.8.12"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/8646a517cd4160c1ceff888ec8fdf652caa3d375fa41231e829c13bc7be0cd156c9642e339b75e9cfa8ef60ae8140c766f9055318c62f1c1d9345f25cdb7f426
+  checksum: 10/8dfd7ca5383b4dca530e1df5118a72f71347f4e0daa6131b82dbf7e860a8b96bec0fed43bfa6f6e650e55fa50fcd3e9e3a5253515131b578539d8eaa84630927
   languageName: node
   linkType: hard
 
@@ -1793,26 +1793,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:7.7.12":
-  version: 7.7.12
-  resolution: "@formatjs/intl-listformat@npm:7.7.12"
+"@formatjs/intl-listformat@npm:7.7.13":
+  version: 7.7.13
+  resolution: "@formatjs/intl-listformat@npm:7.7.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/eee910e83ad28b3b3c24ab6e155720187ae5b5ac936ffa2c8ec6cc8c392c194fd5c79a166290da1c6de8dc1857e3d9d11241029832ec88f7a85cce1821b7f067
+  checksum: 10/476d7cffb64eb996a888b1865aa237f04088de60fa7c65b6d073bca8a3c0f4304040ef12f16eafaf6587895976b773607296951afa7f119447d8f9b2c40daa55
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:4.2.12":
-  version: 4.2.12
-  resolution: "@formatjs/intl-locale@npm:4.2.12"
+"@formatjs/intl-locale@npm:4.2.13":
+  version: 4.2.13
+  resolution: "@formatjs/intl-locale@npm:4.2.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
-    "@formatjs/intl-enumerator": "npm:1.8.11"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/intl-enumerator": "npm:1.8.12"
     "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
     tslib: "npm:^2.8.0"
-  checksum: 10/42111a3002a5a2076b3eb012073230f69c62355dc03647bc17f4d0805f39c7e720e2281b359277d020fef623944a5bcc1ddc3dae9a3af74886d876147680147d
+  checksum: 10/865615561b4bad8b8d7d93539cae7eb3ed2d46b6156486ef3ccb1b8f9f46f075c7cf2f6e5325aba1cf07150e19280858dff7dfd86d530fbf45fd31ea4fabf8d4
   languageName: node
   linkType: hard
 
@@ -1825,38 +1825,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.15.5":
-  version: 8.15.5
-  resolution: "@formatjs/intl-numberformat@npm:8.15.5"
+"@formatjs/intl-numberformat@npm:8.15.6":
+  version: 8.15.6
+  resolution: "@formatjs/intl-numberformat@npm:8.15.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/3440371a43c54cdd2aa3714cb518ad22e491dd19fbc0c046e712dde078d3f6ed709474376863d64d2bddb506957d1cf265d440f6723b88211044a7b56186e550
+  checksum: 10/674c5fefa0b14fcd7c58d0c0e592b4887dc2563fa5a11d80a0a82328ac12b2bb82b9a5367fa0a4d80060d61d15a1821bca7085e20cad09aa93b87edb3cff68ea
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.4.5":
-  version: 5.4.5
-  resolution: "@formatjs/intl-pluralrules@npm:5.4.5"
+"@formatjs/intl-pluralrules@npm:5.4.6":
+  version: 5.4.6
+  resolution: "@formatjs/intl-pluralrules@npm:5.4.6"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/00f650891893b743d126dd2bf0d17c1b16a8c9e0e0dd94cd0895e66cb556246116263e9603204e1991924814d0ed3a3503765914aff08181d5e4435dfc5e547c
+  checksum: 10/88aa244e69ccfdf459899f5fa3c64df345f451ef91ce1188eab35b7e37daa225d22120f64be633f2cd8b826ea705d19831915118f555f2d17611ee842a9a86dc
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.4.12":
-  version: 11.4.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.12"
+"@formatjs/intl-relativetimeformat@npm:11.4.13":
+  version: 11.4.13
+  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.13"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/intl-localematcher": "npm:0.6.2"
     tslib: "npm:^2.8.0"
-  checksum: 10/f6adca59738cb7f58d2ea985558d8fc45e567406de6fb6e67894afe790e2a9fa1a19d34853afc36805fa4a3d638e29c62d6c6ba3ec2a85628c240081dcdfebc1
+  checksum: 10/c2058d5f29a13aa216d317d309a6ffd7d203f0fe11696b7bd524e17ac3cc22ae50ad56a26dbf18125e4c115a3e75f01e6cf2134a83df6c7916ae6d3fb21a1e9b
   languageName: node
   linkType: hard
 
@@ -6925,10 +6925,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:3.45.1":
-  version: 3.45.1
-  resolution: "core-js@npm:3.45.1"
-  checksum: 10/b9dca79b1af8bb4f0d4af0752ea98d694fe157abaf55513fd4084df32dfd4398f0fc57898b32cdb643c1cecb87b9231c2a2ce535797c80ae328eac6d6078ee61
+"core-js@npm:3.46.0":
+  version: 3.46.0
+  resolution: "core-js@npm:3.46.0"
+  checksum: 10/82993ca487c6cbbf8bbf00e45eeb9705eb63dc2f9c90d7f35696733efbc3f4b52426e1f8dbef0f0b68ea16caa21e4f44cc5490e08120e1cad4a72b031ed8adaa
   languageName: node
   linkType: hard
 
@@ -9192,15 +9192,15 @@ __metadata:
     "@codemirror/view": "npm:6.38.5"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
-    "@formatjs/intl-datetimeformat": "npm:6.18.1"
-    "@formatjs/intl-displaynames": "npm:6.8.12"
-    "@formatjs/intl-durationformat": "npm:0.7.5"
+    "@formatjs/intl-datetimeformat": "npm:6.18.2"
+    "@formatjs/intl-displaynames": "npm:6.8.13"
+    "@formatjs/intl-durationformat": "npm:0.7.6"
     "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
-    "@formatjs/intl-listformat": "npm:7.7.12"
-    "@formatjs/intl-locale": "npm:4.2.12"
-    "@formatjs/intl-numberformat": "npm:8.15.5"
-    "@formatjs/intl-pluralrules": "npm:5.4.5"
-    "@formatjs/intl-relativetimeformat": "npm:11.4.12"
+    "@formatjs/intl-listformat": "npm:7.7.13"
+    "@formatjs/intl-locale": "npm:4.2.13"
+    "@formatjs/intl-numberformat": "npm:8.15.6"
+    "@formatjs/intl-pluralrules": "npm:5.4.6"
+    "@formatjs/intl-relativetimeformat": "npm:11.4.13"
     "@fullcalendar/core": "npm:6.1.19"
     "@fullcalendar/daygrid": "npm:6.1.19"
     "@fullcalendar/interaction": "npm:6.1.19"
@@ -9283,7 +9283,7 @@ __metadata:
     browserslist-useragent-regexp: "npm:4.1.3"
     color-name: "npm:2.0.2"
     comlink: "npm:4.4.2"
-    core-js: "npm:3.45.1"
+    core-js: "npm:3.46.0"
     cropperjs: "npm:1.6.2"
     culori: "npm:4.0.2"
     date-fns: "npm:4.1.0"
@@ -9317,7 +9317,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
-    intl-messageformat: "npm:10.7.17"
+    intl-messageformat: "npm:10.7.18"
     js-yaml: "npm:4.1.0"
     jsdom: "npm:27.0.0"
     jszip: "npm:3.10.1"
@@ -9355,7 +9355,7 @@ __metadata:
     ts-lit-plugin: "npm:2.0.2"
     typescript: "npm:5.9.3"
     typescript-eslint: "npm:8.46.0"
-    ua-parser-js: "npm:2.0.5"
+    ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
     vitest: "npm:3.2.4"
     vue: "npm:2.7.16"
@@ -9712,15 +9712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.17":
-  version: 10.7.17
-  resolution: "intl-messageformat@npm:10.7.17"
+"intl-messageformat@npm:10.7.18":
+  version: 10.7.18
+  resolution: "intl-messageformat@npm:10.7.18"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.5"
+    "@formatjs/ecma402-abstract": "npm:2.3.6"
     "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.3"
+    "@formatjs/icu-messageformat-parser": "npm:2.11.4"
     tslib: "npm:^2.8.0"
-  checksum: 10/4f8c30c998bfc14eb64894414b94a8923045ab31d7bbf0978dab6621c644d451ff5c533c04ce8128163b74dd6d59061ec1ef3acb1cbab3302d31cbdb21947620
+  checksum: 10/96650d673912763d21bbfa14b50749b992d45f1901092a020e3155961e3c70f4644dd1731c3ecb1207a1eb94d84bedf4c34b1ac8127c29ad6b015b6a2a4045cb
   languageName: node
   linkType: hard
 
@@ -14379,17 +14379,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:2.0.5":
-  version: 2.0.5
-  resolution: "ua-parser-js@npm:2.0.5"
+"ua-parser-js@npm:2.0.6":
+  version: 2.0.6
+  resolution: "ua-parser-js@npm:2.0.6"
   dependencies:
     detect-europe-js: "npm:^0.1.2"
     is-standalone-pwa: "npm:^0.1.1"
     ua-is-frozen: "npm:^0.1.2"
-    undici: "npm:^7.12.0"
   bin:
     ua-parser-js: script/cli.js
-  checksum: 10/e946cb1c85bfcd0f2d30c7d5e1b605e340bb458432e7e87fc4aa1b2f90117e4220521d4e0bc7dd8c2a5cadd0935dedb5ac434b70efdc0007221288c1d98b3cd5
+  checksum: 10/b0049d3b272979049c7df6af2ec2ce032e4351316b10c33699f6e3f0bec701336f67530cc3ccb363c554b1bb5047b75d2f46575699afacd6e541762ca3861f4d
   languageName: node
   linkType: hard
 
@@ -14452,13 +14451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:^7.12.0":
-  version: 7.16.0
-  resolution: "undici@npm:7.16.0"
-  checksum: 10/2bb71672b23d3dc0f56f1b7fb6c936e4487a350db46eaafc03f2f9107f99cdf8e51ecdd32e589e2381ef47a64b6369cfb31f328b2c3ea663023aa47bc5258b9e
-  languageName: node
-  linkType: hard
-
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.1
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.1"