Update vitest monorepo to v4.0.3 (#27673)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yaml

@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

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

.github/workflows/nightly.yaml

@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         with:
           name: translations
           path: translations.tar.gz

package.json

@@ -148,10 +148,10 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
+    "@babel/core": "7.28.5",
     "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.3",
+    "@babel/plugin-transform-runtime": "7.28.5",
+    "@babel/preset-env": "7.28.5",
     "@bundle-stats/plugin-webpack-filter": "4.21.5",
     "@lokalise/node-api": "15.3.1",
     "@octokit/auth-oauth-device": "8.0.2",
@@ -173,12 +173,12 @@
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
-    "@types/qrcode": "1.5.5",
-    "@types/sortablejs": "1.15.8",
+    "@types/qrcode": "1.5.6",
+    "@types/sortablejs": "1.15.9",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.1",
+    "@vitest/coverage-v8": "4.0.3",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,7 +219,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "8.46.2",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.1",
+    "vitest": "4.0.3",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

src/components/ha-automation-row.ts

@@ -118,7 +118,7 @@ export class HaAutomationRow extends LitElement {
     }
     .row {
       display: flex;
-      padding: 0 8px;
+      padding: var(--ha-space-0) var(--ha-space-2);
       min-height: 48px;
       align-items: center;
       cursor: pointer;
@@ -134,12 +134,12 @@ export class HaAutomationRow extends LitElement {
     .expand-button {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--ha-color-on-neutral-quiet);
-      margin-left: -8px;
+      margin-left: calc(var(--ha-space-2) * -1);
     }
     :host([building-block]) .leading-icon-wrapper {
       background-color: var(--ha-color-fill-neutral-loud-resting);
       border-radius: var(--ha-border-radius-md);
-      padding: 4px;
+      padding: var(--ha-space-1);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -149,7 +149,7 @@ export class HaAutomationRow extends LitElement {
       color: var(--ha-color-on-neutral-quiet);
     }
     :host([building-block]) ::slotted([slot="leading-icon"]) {
-      --mdc-icon-size: 20px;
+      --mdc-icon-size: var(--ha-space-5);
       color: var(--white-color);
       transform: rotate(-45deg);
     }
@@ -170,7 +170,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="header"]) {
       flex: 1;
       overflow-wrap: anywhere;
-      margin: 0 12px;
+      margin: var(--ha-space-0) var(--ha-space-3);
     }
     :host([sort-selected]) .row {
       outline: solid;

src/components/ha-card.ts

@@ -44,26 +44,26 @@ export class HaCard extends LitElement {
       font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
       line-height: var(--ha-line-height-expanded);
-      padding: 12px 16px 16px;
+      padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
       display: block;
-      margin-block-start: 0px;
-      margin-block-end: 0px;
+      margin-block-start: var(--ha-space-0);
+      margin-block-end: var(--ha-space-0);
       font-weight: var(--ha-font-weight-normal);
     }
 
     :host ::slotted(.card-content:not(:first-child)),
     slot:not(:first-child)::slotted(.card-content) {
-      padding-top: 0px;
-      margin-top: -8px;
+      padding-top: var(--ha-space-0);
+      margin-top: calc(var(--ha-space-2) * -1);
     }
 
     :host ::slotted(.card-content) {
-      padding: 16px;
+      padding: var(--ha-space-4);
     }
 
     :host ::slotted(.card-actions) {
       border-top: 1px solid var(--divider-color, #e8e8e8);
-      padding: 8px;
+      padding: var(--ha-space-2);
     }
   `;
 

src/components/ha-generic-picker.ts

@@ -24,7 +24,7 @@ import "./ha-svg-icon";
 
 @customElement("ha-generic-picker")
 export class HaGenericPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -68,6 +68,21 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: "not-found-label", type: String })
   public notFoundLabel?: string;
 
+  @property({ attribute: "popover-placement" })
+  public popoverPlacement:
+    | "bottom"
+    | "top"
+    | "left"
+    | "right"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end" = "bottom-start";
+
   /** If set picker shows an add button instead of textbox when value isn't set */
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
 
@@ -135,7 +150,7 @@ export class HaGenericPicker extends LitElement {
                 style="--body-width: ${this._popoverWidth}px;"
                 without-arrow
                 distance="-4"
-                placement="bottom-start"
+                .placement=${this.popoverPlacement}
                 for="picker"
                 auto-size="vertical"
                 auto-size-padding="16"
@@ -144,9 +159,7 @@ export class HaGenericPicker extends LitElement {
                 trap-focus
                 role="dialog"
                 aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
+                aria-label=${this.label || "Select option"}
               >
                 ${this._renderComboBox()}
               </wa-popover>
@@ -159,9 +172,7 @@ export class HaGenericPicker extends LitElement {
                 @closed=${this._hidePicker}
                 role="dialog"
                 aria-modal="true"
-                aria-label=${this.hass.localize(
-                  "ui.components.target-picker.add_target"
-                )}
+                aria-label=${this.label || "Select option"}
               >
                 ${this._renderComboBox(true)}
               </ha-bottom-sheet>`
@@ -179,7 +190,8 @@ export class HaGenericPicker extends LitElement {
       <ha-picker-combo-box
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
-        .label=${this.searchLabel ?? this.hass.localize("ui.common.search")}
+        .label=${this.searchLabel ??
+        (this.hass?.localize("ui.common.search") || "Search")}
         .value=${this.value}
         @value-changed=${this._valueChanged}
         .rowRenderer=${this.rowRenderer}

src/components/ha-language-picker.ts

@@ -1,56 +1,58 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import { formatLanguageCode } from "../common/language/format_language";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import type { FrontendLocaleData } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
-import type { HomeAssistant } from "../types";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-generic-picker";
 import "./ha-list-item";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import "./ha-select";
-import type { HaSelect } from "./ha-select";
 
 export const getLanguageOptions = (
   languages: string[],
   nativeName: boolean,
   noSort: boolean,
   locale?: FrontendLocaleData
-) => {
-  let options: { label: string; value: string }[] = [];
+): PickerComboBoxItem[] => {
+  let options: PickerComboBoxItem[] = [];
 
   if (nativeName) {
     const translations = translationMetadata.translations;
     options = languages.map((lang) => {
-      let label = translations[lang]?.nativeName;
-      if (!label) {
+      let primary = translations[lang]?.nativeName;
+      if (!primary) {
         try {
           // this will not work if Intl.DisplayNames is polyfilled, it will return in the language of the user
-          label = new Intl.DisplayNames(lang, {
+          primary = new Intl.DisplayNames(lang, {
             type: "language",
             fallback: "code",
           }).of(lang)!;
         } catch (_err) {
-          label = lang;
+          primary = lang;
         }
       }
       return {
-        value: lang,
-        label,
+        id: lang,
+        primary,
+        search_labels: [primary],
       };
     });
   } else if (locale) {
     options = languages.map((lang) => ({
-      value: lang,
-      label: formatLanguageCode(lang, locale),
+      id: lang,
+      primary: formatLanguageCode(lang, locale),
+      search_labels: [formatLanguageCode(lang, locale)],
     }));
   }
 
   if (!noSort && locale) {
     options.sort((a, b) =>
-      caseInsensitiveStringCompare(a.label, b.label, locale.language)
+      caseInsensitiveStringCompare(a.primary, b.primary, locale.language)
     );
   }
   return options;
@@ -80,115 +82,69 @@ export class HaLanguagePicker extends LitElement {
 
   @state() _defaultLanguages: string[] = [];
 
-  @query("ha-select") private _select!: HaSelect;
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._computeDefaultLanguageOptions();
   }
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-
-    const localeChanged =
-      changedProperties.has("hass") &&
-      this.hass &&
-      changedProperties.get("hass") &&
-      changedProperties.get("hass").locale.language !==
-        this.hass.locale.language;
-    if (
-      changedProperties.has("languages") ||
-      changedProperties.has("value") ||
-      localeChanged
-    ) {
-      this._select.layoutOptions();
-      if (!this.disabled && this._select.value !== this.value) {
-        fireEvent(this, "value-changed", { value: this._select.value });
-      }
-      if (!this.value) {
-        return;
-      }
-      const languageOptions = this._getLanguagesOptions(
-        this.languages ?? this._defaultLanguages,
-        this.nativeName,
-        this.noSort,
-        this.hass?.locale
-      );
-      const selectedItemIndex = languageOptions.findIndex(
-        (option) => option.value === this.value
-      );
-      if (selectedItemIndex === -1) {
-        this.value = undefined;
-      }
-      if (localeChanged) {
-        this._select.select(selectedItemIndex);
-      }
-    }
-  }
-
   private _getLanguagesOptions = memoizeOne(getLanguageOptions);
 
   private _computeDefaultLanguageOptions() {
     this._defaultLanguages = Object.keys(translationMetadata.translations);
   }
 
-  protected render() {
-    const languageOptions = this._getLanguagesOptions(
+  private _getItems = () =>
+    this._getLanguagesOptions(
       this.languages ?? this._defaultLanguages,
       this.nativeName,
       this.noSort,
       this.hass?.locale
     );
 
+  private _valueRenderer = (value) => {
+    const language = this._getItems().find(
+      (lang) => lang.id === value
+    )?.primary;
+    return html`<span slot="headline">${language ?? value}</span> `;
+  };
+
+  protected render() {
     const value =
       this.value ??
-      (this.required && !this.disabled
-        ? languageOptions[0]?.value
-        : this.value);
+      (this.required && !this.disabled ? this._getItems()[0].id : this.value);
 
     return html`
-      <ha-select
-        .label=${this.label ??
+      <ha-generic-picker
+        .hass=${this.hass}
+        .autofocus=${this.autofocus}
+        popover-placement="bottom-end"
+        .notFoundLabel=${this.hass?.localize(
+          "ui.components.language-picker.no_match"
+        )}
+        .placeholder=${this.label ??
         (this.hass?.localize("ui.components.language-picker.language") ||
           "Language")}
-        .value=${value || ""}
-        .required=${this.required}
+        .value=${value}
+        .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}
-        @selected=${this._changed}
-        @closed=${stopPropagation}
-        fixedMenuPosition
-        naturalMenuWidth
-        .inlineArrow=${this.inlineArrow}
-      >
-        ${languageOptions.length === 0
-          ? html`<ha-list-item value=""
-              >${this.hass?.localize(
-                "ui.components.language-picker.no_languages"
-              ) || "No languages"}</ha-list-item
-            >`
-          : languageOptions.map(
-              (option) => html`
-                <ha-list-item .value=${option.value}
-                  >${option.label}</ha-list-item
-                >
-              `
-            )}
-      </ha-select>
+        .getItems=${this._getItems}
+        @value-changed=${this._changed}
+        hide-clear-icon
+      ></ha-generic-picker>
     `;
   }
 
   static styles = css`
-    ha-select {
+    ha-generic-picker {
       width: 100%;
+      min-width: 200px;
+      display: block;
     }
   `;
 
-  private _changed(ev): void {
-    const target = ev.target as HaSelect;
-    if (this.disabled || target.value === "" || target.value === this.value) {
-      return;
-    }
-    this.value = target.value;
+  private _changed(ev: ValueChangedEvent<string>): void {
+    ev.stopPropagation();
+    this.value = ev.detail.value;
     fireEvent(this, "value-changed", { value: this.value });
   }
 }

src/components/ha-markdown.ts

@@ -50,7 +50,7 @@ export class HaMarkdown extends LitElement {
     }
     ha-alert {
       display: block;
-      margin: 4px 0;
+      margin: var(--ha-space-1) 0;
     }
     a {
       color: var(--primary-color);
@@ -75,7 +75,7 @@ export class HaMarkdown extends LitElement {
       padding: 0;
     }
     pre {
-      padding: 16px;
+      padding: var(--ha-space-4);
       overflow: auto;
       line-height: var(--ha-line-height-condensed);
       font-family: var(--ha-font-family-code);
@@ -95,7 +95,7 @@ export class HaMarkdown extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   ` as CSSResultGroup;
 }

src/components/ha-picker-combo-box.ts

@@ -69,7 +69,7 @@ export type PickerComboBoxSearchFn<T extends PickerComboBoxItem> = (
 
 @customElement("ha-picker-combo-box")
 export class HaPickerComboBox extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -140,7 +140,9 @@ export class HaPickerComboBox extends LitElement {
 
   protected render() {
     return html`<ha-textfield
-        .label=${this.label ?? this.hass.localize("ui.common.search")}
+        .label=${this.label ??
+        this.hass?.localize("ui.common.search") ??
+        "Search"}
         @input=${this._filterChanged}
       ></ha-textfield>
       <lit-virtualizer
@@ -159,12 +161,18 @@ export class HaPickerComboBox extends LitElement {
   private _defaultNotFoundItem = memoizeOne(
     (
       label: this["notFoundLabel"],
-      localize: LocalizeFunc
+      localize?: LocalizeFunc
     ): PickerComboBoxItemWithLabel => ({
       id: NO_MATCHING_ITEMS_FOUND_ID,
-      primary: label || localize("ui.components.combo-box.no_match"),
+      primary:
+        label ||
+        (localize && localize("ui.components.combo-box.no_match")) ||
+        "No matching items found",
       icon_path: mdiMagnify,
-      a11y_label: label || localize("ui.components.combo-box.no_match"),
+      a11y_label:
+        label ||
+        (localize && localize("ui.components.combo-box.no_match")) ||
+        "No matching items found",
     })
   );
 
@@ -189,13 +197,13 @@ export class HaPickerComboBox extends LitElement {
         caseInsensitiveStringCompare(
           entityA.sorting_label!,
           entityB.sorting_label!,
-          this.hass.locale.language
+          this.hass?.locale.language ?? navigator.language
         )
       );
 
     if (!sortedItems.length) {
       sortedItems.push(
-        this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
+        this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
       );
     }
 
@@ -249,8 +257,20 @@ export class HaPickerComboBox extends LitElement {
     const textfield = ev.target as HaTextField;
     const searchString = textfield.value.trim();
 
+    if (!searchString) {
+      this._items = this._allItems;
+      return;
+    }
+
     const index = this._fuseIndex(this._allItems);
-    const fuse = new HaFuse(this._allItems, { shouldSort: false }, index);
+    const fuse = new HaFuse(
+      this._allItems,
+      {
+        shouldSort: false,
+        minMatchCharLength: Math.min(searchString.length, 2),
+      },
+      index
+    );
 
     const results = fuse.multiTermsSearch(searchString);
     let filteredItems = this._allItems as PickerComboBoxItem[];
@@ -258,7 +278,7 @@ export class HaPickerComboBox extends LitElement {
       const items = results.map((result) => result.item);
       if (items.length === 0) {
         items.push(
-          this._defaultNotFoundItem(this.notFoundLabel, this.hass.localize)
+          this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
         );
       }
       const additionalItems = this._getAdditionalItems(searchString);
@@ -431,6 +451,17 @@ export class HaPickerComboBox extends LitElement {
 
   private _pickSelectedItem = (ev: KeyboardEvent) => {
     ev.stopPropagation();
+    const firstItem = this._virtualizerElement?.items[0] as PickerComboBoxItem;
+
+    if (
+      this._virtualizerElement?.items.length === 1 &&
+      firstItem.id !== NO_MATCHING_ITEMS_FOUND_ID
+    ) {
+      fireEvent(this, "value-changed", {
+        value: firstItem.id,
+      });
+    }
+
     if (this._selectedItemIndex === -1) {
       return;
     }
@@ -438,7 +469,9 @@ export class HaPickerComboBox extends LitElement {
     // if filter button is focused
     ev.preventDefault();
 
-    const item: any = this._virtualizerElement?.items[this._selectedItemIndex];
+    const item = this._virtualizerElement?.items[
+      this._selectedItemIndex
+    ] as PickerComboBoxItem;
     if (item && item.id !== NO_MATCHING_ITEMS_FOUND_ID) {
       fireEvent(this, "value-changed", { value: item.id });
     }

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

@@ -1,122 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { BackgroundSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-picture-upload";
-import "../ha-alert";
-import type { HaPictureUpload } from "../ha-picture-upload";
-import { URL_PREFIX } from "../../data/image_upload";
-
-@customElement("ha-selector-background")
-export class HaBackgroundSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public value?: any;
-
-  @property({ attribute: false }) public selector!: BackgroundSelector;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  @state() private yamlBackground = false;
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-
-    if (changedProps.has("value")) {
-      this.yamlBackground = !!this.value && !this.value.startsWith(URL_PREFIX);
-    }
-  }
-
-  protected render() {
-    return html`
-      <div>
-        ${this.yamlBackground
-          ? html`
-              <div class="value">
-                <img
-                  src=${this.value}
-                  alt=${this.hass.localize(
-                    "ui.components.picture-upload.current_image_alt"
-                  )}
-                />
-              </div>
-              <ha-alert alert-type="info">
-                ${this.hass.localize(
-                  `ui.components.selectors.background.yaml_info`
-                )}
-                <ha-button slot="action" @click=${this._clearValue}>
-                  ${this.hass.localize(
-                    `ui.components.picture-upload.clear_picture`
-                  )}
-                </ha-button>
-              </ha-alert>
-            `
-          : html`
-              <ha-picture-upload
-                .hass=${this.hass}
-                .value=${this.value?.startsWith(URL_PREFIX) ? this.value : null}
-                .original=${!!this.selector.background?.original}
-                .cropOptions=${this.selector.background?.crop}
-                select-media
-                @change=${this._pictureChanged}
-              ></ha-picture-upload>
-            `}
-      </div>
-    `;
-  }
-
-  private _pictureChanged(ev) {
-    const value = (ev.target as HaPictureUpload).value;
-
-    fireEvent(this, "value-changed", { value: value ?? undefined });
-  }
-
-  private _clearValue() {
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-    }
-    ha-picture-upload {
-      background-color: var(--primary-background-color);
-      border-radius: var(--file-upload-image-border-radius);
-    }
-    div {
-      display: flex;
-      flex-direction: column;
-    }
-    ha-button {
-      white-space: nowrap;
-      --mdc-theme-primary: var(--primary-color);
-    }
-    .value {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-    img {
-      max-width: 100%;
-      max-height: 200px;
-      margin-bottom: 4px;
-      border-radius: var(--file-upload-image-border-radius);
-      transition: opacity 0.3s;
-      opacity: var(--picture-opacity, 1);
-    }
-    img:hover {
-      opacity: 1;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-background": HaBackgroundSelector;
-  }
-}

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

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

src/components/ha-service-picker.ts

@@ -76,34 +76,42 @@ class HaServicePicker extends LitElement {
     </ha-combo-box-item>
   `;
 
-  private _valueRenderer: PickerValueRenderer = (value) => {
-    const serviceId = value;
-    const [domain, service] = serviceId.split(".");
+  private _valueRenderer = memoizeOne(
+    (
+      localize: LocalizeFunc,
+      services: HomeAssistant["services"]
+    ): PickerValueRenderer =>
+      (value) => {
+        const serviceId = value;
+        const [domain, service] = serviceId.split(".");
 
-    if (!this.hass.services[domain]?.[service]) {
-      return html`
-        <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
-        <span slot="headline">${value}</span>
-      `;
-    }
+        if (!services[domain]?.[service]) {
+          return html`
+            <ha-svg-icon slot="start" .path=${mdiRoomService}></ha-svg-icon>
+            <span slot="headline">${value}</span>
+          `;
+        }
 
-    const serviceName =
-      this.hass.localize(`component.${domain}.services.${service}.name`) ||
-      this.hass.services[domain][service].name ||
-      service;
+        const serviceName =
+          localize(`component.${domain}.services.${service}.name`) ||
+          services[domain][service].name ||
+          service;
 
-    return html`
-      <ha-service-icon
-        slot="start"
-        .hass=${this.hass}
-        .service=${serviceId}
-      ></ha-service-icon>
-      <span slot="headline">${serviceName}</span>
-      ${this.showServiceId
-        ? html`<span slot="supporting-text" class="code">${serviceId}</span>`
-        : nothing}
-    `;
-  };
+        return html`
+          <ha-service-icon
+            slot="start"
+            .hass=${this.hass}
+            .service=${serviceId}
+          ></ha-service-icon>
+          <span slot="headline">${serviceName}</span>
+          ${this.showServiceId
+            ? html`<span slot="supporting-text" class="code"
+                >${serviceId}</span
+              >`
+            : nothing}
+        `;
+      }
+  );
 
   protected render(): TemplateResult {
     const placeholder =
@@ -123,7 +131,10 @@ class HaServicePicker extends LitElement {
         .value=${this.value}
         .getItems=${this._getItems}
         .rowRenderer=${this._rowRenderer}
-        .valueRenderer=${this._valueRenderer}
+        .valueRenderer=${this._valueRenderer(
+          this.hass.localize,
+          this.hass.services
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/data/assist_pipeline.ts

@@ -214,8 +214,6 @@ export interface PipelineRun {
   stage: "ready" | "wake_word" | "stt" | "intent" | "tts" | "done" | "error";
   run: PipelineRunStartEvent["data"];
   error?: PipelineErrorEvent["data"];
-  started: Date;
-  finished?: Date;
   wake_word?: PipelineWakeWordStartEvent["data"] &
     Partial<PipelineWakeWordEndEvent["data"]> & { done: boolean };
   stt?: PipelineSTTStartEvent["data"] &
@@ -237,7 +235,6 @@ export const processEvent = (
       stage: "ready",
       run: event.data,
       events: [event],
-      started: new Date(event.timestamp),
     };
     return run;
   }
@@ -293,14 +290,9 @@ export const processEvent = (
       tts: { ...run.tts!, ...event.data, done: true },
     };
   } else if (event.type === "run-end") {
-    run = { ...run, finished: new Date(event.timestamp), stage: "done" };
+    run = { ...run, stage: "done" };
   } else if (event.type === "error") {
-    run = {
-      ...run,
-      finished: new Date(event.timestamp),
-      stage: "error",
-      error: event.data,
-    };
+    run = { ...run, stage: "error", error: event.data };
   } else {
     run = { ...run };
   }

src/data/chat_log.ts

@@ -1,228 +0,0 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
-
-export const enum ChatLogEventType {
-  INITIAL_STATE = "initial_state",
-  CREATED = "created",
-  UPDATED = "updated",
-  DELETED = "deleted",
-  CONTENT_ADDED = "content_added",
-}
-
-export interface ChatLogAttachment {
-  media_content_id: string;
-  mime_type: string;
-  path: string;
-}
-
-export interface ChatLogSystemContent {
-  role: "system";
-  content: string;
-  created: Date;
-}
-
-export interface ChatLogUserContent {
-  role: "user";
-  content: string;
-  created: Date;
-  attachments?: ChatLogAttachment[];
-}
-
-export interface ChatLogAssistantContent {
-  role: "assistant";
-  agent_id: string;
-  created: Date;
-  content?: string;
-  thinking_content?: string;
-  tool_calls?: any[];
-}
-
-export interface ChatLogToolResultContent {
-  role: "tool_result";
-  agent_id: string;
-  tool_call_id: string;
-  tool_name: string;
-  tool_result: any;
-  created: Date;
-}
-
-export type ChatLogContent =
-  | ChatLogSystemContent
-  | ChatLogUserContent
-  | ChatLogAssistantContent
-  | ChatLogToolResultContent;
-
-export interface ChatLog {
-  conversation_id: string;
-  continue_conversation: boolean;
-  content: ChatLogContent[];
-  created: Date;
-}
-
-// Internal wire format types (not exported)
-interface ChatLogSystemContentWire {
-  role: "system";
-  content: string;
-  created: string;
-}
-
-interface ChatLogUserContentWire {
-  role: "user";
-  content: string;
-  created: string;
-  attachments?: ChatLogAttachment[];
-}
-
-interface ChatLogAssistantContentWire {
-  role: "assistant";
-  agent_id: string;
-  created: string;
-  content?: string;
-  thinking_content?: string;
-  tool_calls?: {
-    tool_name: string;
-    tool_args: Record<string, any>;
-    id: string;
-    external: boolean;
-  }[];
-}
-
-interface ChatLogToolResultContentWire {
-  role: "tool_result";
-  agent_id: string;
-  tool_call_id: string;
-  tool_name: string;
-  tool_result: any;
-  created: string;
-}
-
-type ChatLogContentWire =
-  | ChatLogSystemContentWire
-  | ChatLogUserContentWire
-  | ChatLogAssistantContentWire
-  | ChatLogToolResultContentWire;
-
-interface ChatLogWire {
-  conversation_id: string;
-  continue_conversation: boolean;
-  content: ChatLogContentWire[];
-  created: string;
-}
-
-const processContent = (content: ChatLogContentWire): ChatLogContent => ({
-  ...content,
-  created: new Date(content.created),
-});
-
-const processChatLog = (chatLog: ChatLogWire): ChatLog => ({
-  ...chatLog,
-  created: new Date(chatLog.created),
-  content: chatLog.content.map(processContent),
-});
-
-interface ChatLogInitialStateEvent {
-  event_type: ChatLogEventType.INITIAL_STATE;
-  data: ChatLogWire;
-}
-
-interface ChatLogIndexInitialStateEvent {
-  event_type: ChatLogEventType.INITIAL_STATE;
-  data: ChatLogWire[];
-}
-
-interface ChatLogCreatedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.CREATED;
-  data: ChatLogWire;
-}
-
-interface ChatLogUpdatedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.UPDATED;
-  data: { chat_log: ChatLogWire };
-}
-
-interface ChatLogDeletedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.DELETED;
-  data: ChatLogWire;
-}
-
-interface ChatLogContentAddedEvent {
-  conversation_id: string;
-  event_type: ChatLogEventType.CONTENT_ADDED;
-  data: { content: ChatLogContentWire };
-}
-
-type ChatLogSubscriptionEvent =
-  | ChatLogInitialStateEvent
-  | ChatLogUpdatedEvent
-  | ChatLogDeletedEvent
-  | ChatLogContentAddedEvent;
-
-type ChatLogIndexSubscriptionEvent =
-  | ChatLogIndexInitialStateEvent
-  | ChatLogCreatedEvent
-  | ChatLogDeletedEvent;
-
-export const subscribeChatLog = (
-  hass: HomeAssistant,
-  conversationId: string,
-  callback: (chatLog: ChatLog | null) => void
-): Promise<UnsubscribeFunc> => {
-  let chatLog: ChatLog | null = null;
-
-  return hass.connection.subscribeMessage<ChatLogSubscriptionEvent>(
-    (event) => {
-      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
-        chatLog = processChatLog(event.data);
-        callback(chatLog);
-      } else if (event.event_type === ChatLogEventType.CONTENT_ADDED) {
-        if (chatLog) {
-          chatLog = {
-            ...chatLog,
-            content: [...chatLog.content, processContent(event.data.content)],
-          };
-          callback(chatLog);
-        }
-      } else if (event.event_type === ChatLogEventType.UPDATED) {
-        chatLog = processChatLog(event.data.chat_log);
-        callback(chatLog);
-      } else if (event.event_type === ChatLogEventType.DELETED) {
-        chatLog = null;
-        callback(null);
-      }
-    },
-    {
-      type: "conversation/chat_log/subscribe",
-      conversation_id: conversationId,
-    }
-  );
-};
-
-export const subscribeChatLogIndex = (
-  hass: HomeAssistant,
-  callback: (chatLogs: ChatLog[]) => void
-): Promise<UnsubscribeFunc> => {
-  let chatLogs: ChatLog[] = [];
-
-  return hass.connection.subscribeMessage<ChatLogIndexSubscriptionEvent>(
-    (event) => {
-      if (event.event_type === ChatLogEventType.INITIAL_STATE) {
-        chatLogs = event.data.map(processChatLog);
-        callback(chatLogs);
-      } else if (event.event_type === ChatLogEventType.CREATED) {
-        chatLogs = [...chatLogs, processChatLog(event.data)];
-        callback(chatLogs);
-      } else if (event.event_type === ChatLogEventType.DELETED) {
-        chatLogs = chatLogs.filter(
-          (chatLog) => chatLog.conversation_id !== event.conversation_id
-        );
-        callback(chatLogs);
-      }
-    },
-    {
-      type: "conversation/chat_log/subscribe_index",
-    }
-  );
-};

src/data/label_registry.ts

@@ -264,6 +264,7 @@ export const getLabels = (
   const items = outputLabels.map<PickerComboBoxItem>((label) => ({
     id: label.label_id,
     primary: label.name,
+    secondary: label.description ?? "",
     icon: label.icon || undefined,
     icon_path: label.icon ? undefined : mdiLabel,
     sorting_label: label.name,

src/data/lovelace/config/view.ts

@@ -1,3 +1,4 @@
+import type { MediaSelectorValue } from "../../selector";
 import type { LovelaceBadgeConfig } from "./badge";
 import type { LovelaceCardConfig } from "./card";
 import type { LovelaceSectionRawConfig } from "./section";
@@ -8,7 +9,7 @@ export interface ShowViewConfig {
 }
 
 export interface LovelaceViewBackgroundConfig {
-  image?: string;
+  image?: string | MediaSelectorValue;
   opacity?: number;
   size?: "auto" | "cover" | "contain";
   alignment?:

src/data/selector.ts

@@ -5,7 +5,6 @@ import type {
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
-import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { isHelperDomain } from "../panels/config/helpers/const";
 import type { UiAction } from "../panels/lovelace/components/hui-action-editor";
 import type { HomeAssistant } from "../types";
@@ -47,8 +46,6 @@ export type Selector =
   | FileSelector
   | IconSelector
   | LabelSelector
-  | ImageSelector
-  | BackgroundSelector
   | LanguageSelector
   | LocationSelector
   | MediaSelector
@@ -273,14 +270,6 @@ export interface IconSelector {
   } | null;
 }
 
-export interface ImageSelector {
-  image: { original?: boolean; crop?: CropOptions } | null;
-}
-
-export interface BackgroundSelector {
-  background: { original?: boolean; crop?: CropOptions } | null;
-}
-
 export interface LabelSelector {
   label: {
     multiple?: boolean;

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

@@ -678,8 +678,8 @@ export class MoreInfoDialog extends LitElement {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
           --dialog-surface-margin-top: max(
-            40px,
-            var(--safe-area-inset-top, 0px)
+            var(--ha-space-10),
+            var(--safe-area-inset-top, var(--ha-space-0))
           );
           --dialog-content-padding: 0;
         }
@@ -698,14 +698,15 @@ export class MoreInfoDialog extends LitElement {
         }
 
         ha-more-info-history-and-logbook {
-          padding: 8px 24px 24px 24px;
+          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+            var(--ha-space-6);
           display: block;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* When in fullscreen dialog should be attached to top */
           ha-dialog {
-            --dialog-surface-margin-top: 0px;
+            --dialog-surface-margin-top: var(--ha-space-0);
           }
         }
 
@@ -730,7 +731,8 @@ export class MoreInfoDialog extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          margin: 0 0 -10px 0;
+          margin: var(--ha-space-0) var(--ha-space-0)
+            calc(var(--ha-space-2) * -1) var(--ha-space-0);
         }
 
         .title p {
@@ -752,9 +754,9 @@ export class MoreInfoDialog extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: 16px;
           --mdc-icon-size: 16px;
-          padding: 4px;
-          margin: -4px;
-          margin-top: -10px;
+          padding: var(--ha-space-1);
+          margin: calc(var(--ha-space-1) * -1);
+          margin-top: calc(var(--ha-space-2) * -1);
           background: none;
           border: none;
           outline: none;

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1011,8 +1011,8 @@ export class QuickBar extends LitElement {
             --mdc-dialog-max-width: 800px;
             --mdc-dialog-min-width: 500px;
             --dialog-surface-position: fixed;
-            --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - 72px);
+            --dialog-surface-top: var(--ha-space-10);
+            --mdc-dialog-max-height: calc(100% - var(--ha-space-18));
           }
         }
 
@@ -1055,8 +1055,8 @@ export class QuickBar extends LitElement {
         }
 
         span.command-text {
-          margin-left: 8px;
-          margin-inline-start: 8px;
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
           direction: var(--direction);
         }
@@ -1069,8 +1069,8 @@ export class QuickBar extends LitElement {
         ha-md-list-item.two-line {
           --md-list-item-one-line-container-height: 64px;
           --md-list-item-two-line-container-height: 64px;
-          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: 8px;
+          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-bottom-space: var(--ha-space-2);
         }
 
         ha-md-list-item.three-line {
@@ -1078,8 +1078,8 @@ export class QuickBar extends LitElement {
           --md-list-item-one-line-container-height: 72px;
           --md-list-item-two-line-container-height: 72px;
           --md-list-item-three-line-container-height: 72px;
-          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: 8px;
+          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-bottom-space: var(--ha-space-2);
         }
 
         ha-md-list-item .code {
@@ -1104,11 +1104,11 @@ export class QuickBar extends LitElement {
         }
 
         ha-tip {
-          padding: 20px;
+          padding: var(--ha-space-5);
         }
 
         .nothing-found {
-          padding: 16px 0px;
+          padding: var(--ha-space-4) var(--ha-space-0);
           text-align: center;
         }
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -193,12 +193,12 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                     ).map(
                       (lang) =>
                         html`<ha-md-menu-item
-                          .value=${lang.value}
+                          .value=${lang.id}
                           @click=${this._handlePickLanguage}
                           @keydown=${this._handlePickLanguage}
-                          .selected=${this._language === lang.value}
+                          .selected=${this._language === lang.id}
                         >
-                          ${lang.label}
+                          ${lang.primary}
                         </ha-md-menu-item>`
                     )}
                   </ha-md-button-menu>`

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -265,19 +265,15 @@ class DialogAreaDetail extends LitElement {
               ${this.hass.localize("ui.common.delete")}
             </ha-button>`
           : nothing}
-        <div slot="primaryAction">
-          <ha-button appearance="plain" @click=${this.closeDialog}>
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            @click=${this._updateEntry}
-            .disabled=${nameInvalid || !!this._submitting}
-          >
-            ${entry
-              ? this.hass.localize("ui.common.save")
-              : this.hass.localize("ui.common.create")}
-          </ha-button>
-        </div>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${nameInvalid || !!this._submitting}
+        >
+          ${entry
+            ? this.hass.localize("ui.common.save")
+            : this.hass.localize("ui.common.create")}
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/category/dialog-category-registry-detail.ts

@@ -98,7 +98,7 @@ class DialogCategoryDetail extends LitElement {
         </div>
         <ha-button
           appearance="plain"
-          slot="primaryAction"
+          slot="secondaryAction"
           @click=${this.closeDialog}
         >
           ${this.hass.localize("ui.common.cancel")}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -5,7 +5,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
-import "../../../../components/ha-dialog";
+import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-button";
 import "../../../../components/ha-labels-picker";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -19,6 +20,8 @@ import type { DeviceRegistryDetailDialogParams } from "./show-dialog-device-regi
 class DialogDeviceRegistryDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state() private _open = false;
+
   @state() private _nameByUser!: string;
 
   @state() private _error?: string;
@@ -42,10 +45,15 @@ class DialogDeviceRegistryDetail extends LitElement {
     this._areaId = this._params.device.area_id || "";
     this._labels = this._params.device.labels || [];
     this._disabledBy = this._params.device.disabled_by;
+    this._open = true;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._error = "";
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -57,10 +65,12 @@ class DialogDeviceRegistryDetail extends LitElement {
     }
     const device = this._params.device;
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${computeDeviceNameDisplay(device, this.hass)}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${computeDeviceNameDisplay(device, this.hass)}
+        prevent-scrim-close
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error
@@ -68,6 +78,7 @@ class DialogDeviceRegistryDetail extends LitElement {
             : ""}
           <div class="form">
             <ha-textfield
+              autofocus
               .value=${this._nameByUser}
               @input=${this._nameChanged}
               .label=${this.hass.localize(
@@ -75,7 +86,6 @@ class DialogDeviceRegistryDetail extends LitElement {
               )}
               .placeholder=${device.name || ""}
               .disabled=${this._submitting}
-              dialogInitialFocus
             ></ha-textfield>
             <ha-area-picker
               .hass=${this.hass}
@@ -131,22 +141,25 @@ class DialogDeviceRegistryDetail extends LitElement {
             </div>
           </div>
         </div>
-        <ha-button
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-          .disabled=${this._submitting}
-          appearance="plain"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${this._submitting}
-        >
-          ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
-        </ha-button>
-      </ha-dialog>
+
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            @click=${this.closeDialog}
+            .disabled=${this._submitting}
+            appearance="plain"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 

src/panels/config/hardware/ha-config-hardware.ts

@@ -153,6 +153,8 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
         },
         yAxis: {
           type: "value",
+          min: 0,
+          max: 100,
           splitLine: {
             show: true,
           },

src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts

@@ -6,7 +6,6 @@ import {
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
 import type {
   PipelineRunEvent,
@@ -21,8 +20,6 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../types";
 import "./assist-render-pipeline-events";
-import type { ChatLog } from "../../../../data/chat_log";
-import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-debug")
 export class AssistPipelineDebug extends LitElement {
@@ -40,12 +37,8 @@ export class AssistPipelineDebug extends LitElement {
 
   @state() private _events?: PipelineRunEvent[];
 
-  @state() private _chatLog?: ChatLog;
-
   private _unsubRefreshEventsID?: number;
 
-  private _unsubChatLogUpdates?: Promise<UnsubscribeFunc>;
-
   protected render() {
     return html`<hass-subpage
       .narrow=${this.narrow}
@@ -113,7 +106,6 @@ export class AssistPipelineDebug extends LitElement {
           ? html`<assist-render-pipeline-events
               .hass=${this.hass}
               .events=${this._events}
-              .chatLog=${this._chatLog}
             ></assist-render-pipeline-events>`
           : ""}
       </div>
@@ -128,10 +120,6 @@ export class AssistPipelineDebug extends LitElement {
       clearRefresh = true;
     }
     if (changedProperties.has("_runId")) {
-      if (this._unsubChatLogUpdates) {
-        this._unsubChatLogUpdates.then((unsub) => unsub());
-        this._unsubChatLogUpdates = undefined;
-      }
       this._fetchEvents();
       clearRefresh = true;
     }
@@ -147,10 +135,6 @@ export class AssistPipelineDebug extends LitElement {
       clearTimeout(this._unsubRefreshEventsID);
       this._unsubRefreshEventsID = undefined;
     }
-    if (this._unsubChatLogUpdates) {
-      this._unsubChatLogUpdates.then((unsub) => unsub());
-      this._unsubChatLogUpdates = undefined;
-    }
   }
 
   private async _fetchRuns() {
@@ -197,27 +181,8 @@ export class AssistPipelineDebug extends LitElement {
       });
       return;
     }
-    if (!this._events!.length) {
-      return;
-    }
-    if (!this._unsubChatLogUpdates && this._events[0].type === "run-start") {
-      this._unsubChatLogUpdates = subscribeChatLog(
-        this.hass,
-        this._events[0].data.conversation_id,
-        (chatLog) => {
-          if (chatLog) {
-            this._chatLog = chatLog;
-          } else {
-            this._unsubChatLogUpdates?.then((unsub) => unsub());
-            this._unsubChatLogUpdates = undefined;
-          }
-        }
-      );
-      this._unsubChatLogUpdates.catch(() => {
-        this._unsubChatLogUpdates = undefined;
-      });
-    }
     if (
+      this._events?.length &&
       // If the last event is not a finish run event, the run is still ongoing.
       // Refresh events automatically.
       !["run-end", "error"].includes(this._events[this._events.length - 1].type)

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { extractSearchParam } from "../../../../common/url/search-params";
 import "../../../../components/ha-assist-pipeline-picker";
 import "../../../../components/ha-button";
@@ -25,8 +24,6 @@ import type { HomeAssistant } from "../../../../types";
 import { AudioRecorder } from "../../../../util/audio-recorder";
 import { fileDownload } from "../../../../util/file_download";
 import "./assist-render-pipeline-run";
-import type { ChatLog } from "../../../../data/chat_log";
-import { subscribeChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-pipeline-run-debug")
 export class AssistPipelineRunDebug extends LitElement {
@@ -49,13 +46,6 @@ export class AssistPipelineRunDebug extends LitElement {
   @state() private _pipelineId?: string =
     extractSearchParam("pipeline") || undefined;
 
-  @state() private _chatLog?: ChatLog;
-
-  private _chatLogSubscription: {
-    conversationId: string;
-    unsub: Promise<UnsubscribeFunc>;
-  } | null = null;
-
   protected render(): TemplateResult {
     return html`
       <hass-subpage
@@ -188,7 +178,6 @@ export class AssistPipelineRunDebug extends LitElement {
                   <assist-render-pipeline-run
                     .hass=${this.hass}
                     .pipelineRun=${run}
-                    .chatLog=${this._chatLog}
                   ></assist-render-pipeline-run>
                 `
           )}
@@ -197,14 +186,6 @@ export class AssistPipelineRunDebug extends LitElement {
     `;
   }
 
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._chatLogSubscription) {
-      this._chatLogSubscription.unsub.then((unsub) => unsub());
-      this._chatLogSubscription = null;
-    }
-  }
-
   private get conversationId(): string | null {
     return this._pipelineRuns.length === 0
       ? null
@@ -427,32 +408,6 @@ export class AssistPipelineRunDebug extends LitElement {
             added = true;
           }
           callback(updatedRun);
-
-          const conversationId = this.conversationId;
-          if (
-            !this._chatLog &&
-            conversationId &&
-            (!this._chatLogSubscription ||
-              this._chatLogSubscription.conversationId !== conversationId)
-          ) {
-            if (this._chatLogSubscription) {
-              this._chatLogSubscription.unsub.then((unsub) => unsub());
-            }
-            this._chatLogSubscription = {
-              conversationId,
-              unsub: subscribeChatLog(this.hass, conversationId, (chatLog) => {
-                if (chatLog) {
-                  this._chatLog = chatLog;
-                } else {
-                  this._chatLogSubscription?.unsub.then((unsub) => unsub());
-                  this._chatLogSubscription = null;
-                }
-              }),
-            };
-            this._chatLogSubscription.unsub.catch(() => {
-              this._chatLogSubscription = null;
-            });
-          }
         },
         {
           ...options,

src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts

@@ -9,7 +9,6 @@ import type {
 import { processEvent } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import "./assist-render-pipeline-run";
-import type { ChatLog } from "../../../../data/chat_log";
 
 @customElement("assist-render-pipeline-events")
 export class AssistPipelineEvents extends LitElement {
@@ -17,8 +16,6 @@ export class AssistPipelineEvents extends LitElement {
 
   @property({ attribute: false }) public events!: PipelineRunEvent[];
 
-  @property({ attribute: false }) public chatLog?: ChatLog;
-
   private _processEvents = memoizeOne(
     (events: PipelineRunEvent[]): PipelineRun | undefined => {
       let run: PipelineRun | undefined;
@@ -49,7 +46,6 @@ export class AssistPipelineEvents extends LitElement {
       <assist-render-pipeline-run
         .hass=${this.hass}
         .pipelineRun=${run}
-        .chatLog=${this.chatLog}
       ></assist-render-pipeline-run>
     `;
   }

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
@@ -11,12 +11,6 @@ import type { HomeAssistant } from "../../../../types";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import type {
-  ChatLogAssistantContent,
-  ChatLog,
-  ChatLogContent,
-  ChatLogUserContent,
-} from "../../../../data/chat_log";
 
 const RUN_DATA = {
   pipeline: "Pipeline",
@@ -132,7 +126,7 @@ const dataMinusKeysRender = (
     result[key] = data[key];
   }
   return render
-    ? html`<ha-expansion-panel class="yaml-expansion">
+    ? html`<ha-expansion-panel>
         <span slot="header">Raw</span>
         <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
       </ha-expansion-panel>`
@@ -145,8 +139,6 @@ export class AssistPipelineDebug extends LitElement {
 
   @property({ attribute: false }) public pipelineRun!: PipelineRun;
 
-  @property({ attribute: false }) public chatLog?: ChatLog;
-
   protected render(): TemplateResult {
     const lastRunStage: string = this.pipelineRun
       ? ["tts", "intent", "stt", "wake_word"].find(
@@ -154,47 +146,31 @@ export class AssistPipelineDebug extends LitElement {
         ) || "ready"
       : "ready";
 
-    let messages: ChatLogContent[];
+    const messages: { from: string; text: string }[] = [];
 
-    if (this.chatLog) {
-      messages = this.chatLog.content.filter(
-        this.pipelineRun.finished
-          ? (content: ChatLogContent) =>
-              content.role === "system" ||
-              (content.created >= this.pipelineRun.started &&
-                content.created <= this.pipelineRun.finished!)
-          : (content: ChatLogContent) =>
-              content.role === "system" ||
-              content.created >= this.pipelineRun.started
-      );
-    } else {
-      messages = [];
+    const userMessage =
+      (this.pipelineRun.init_options &&
+      "text" in this.pipelineRun.init_options.input
+        ? this.pipelineRun.init_options.input.text
+        : undefined) ||
+      this.pipelineRun?.stt?.stt_output?.text ||
+      this.pipelineRun?.intent?.intent_input;
 
-      // We don't have the chat log everywhere yet, just fallback for now.
-      const userMessage =
-        (this.pipelineRun.init_options &&
-        "text" in this.pipelineRun.init_options.input
-          ? this.pipelineRun.init_options.input.text
-          : undefined) ||
-        this.pipelineRun?.stt?.stt_output?.text ||
-        this.pipelineRun?.intent?.intent_input;
+    if (userMessage) {
+      messages.push({
+        from: "user",
+        text: userMessage,
+      });
+    }
 
-      if (userMessage) {
-        messages.push({
-          role: "user",
-          content: userMessage,
-        } as ChatLogUserContent);
-      }
-
-      if (
-        this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
-      ) {
-        messages.push({
-          role: "assistant",
-          content:
-            this.pipelineRun.intent.intent_output.response.speech.plain.speech,
-        } as ChatLogAssistantContent);
-      }
+    if (
+      this.pipelineRun?.intent?.intent_output?.response?.speech?.plain?.speech
+    ) {
+      messages.push({
+        from: "hass",
+        text: this.pipelineRun.intent.intent_output.response.speech.plain
+          .speech,
+      });
     }
 
     return html`
@@ -209,58 +185,10 @@ export class AssistPipelineDebug extends LitElement {
           ${messages.length > 0
             ? html`
                 <div class="messages">
-                  ${messages.map((content) =>
-                    content.role === "system" || content.role === "tool_result"
-                      ? html`
-                          <ha-expansion-panel
-                            class="content-expansion ${content.role}"
-                          >
-                            <div slot="header">
-                              ${content.role === "system"
-                                ? "System"
-                                : `Result for ${content.tool_name}`}
-                            </div>
-                            ${content.role === "system"
-                              ? html`<pre>${content.content}</pre>`
-                              : html`
-                                  <ha-yaml-editor
-                                    read-only
-                                    auto-update
-                                    .value=${content}
-                                  ></ha-yaml-editor>
-                                `}
-                          </ha-expansion-panel>
-                        `
-                      : html`
-                          ${content.content
-                            ? html`
-                                <div class=${`message ${content.role}`}>
-                                  ${content.content}
-                                </div>
-                              `
-                            : nothing}
-                          ${content.role === "assistant" &&
-                          content.tool_calls?.length
-                            ? html`
-                                <ha-expansion-panel
-                                  class="content-expansion assistant"
-                                >
-                                  <span slot="header">
-                                    Call
-                                    ${content.tool_calls.length === 1
-                                      ? content.tool_calls[0].tool_name
-                                      : `${content.tool_calls.length} tools`}
-                                  </span>
-
-                                  <ha-yaml-editor
-                                    read-only
-                                    auto-update
-                                    .value=${content.tool_calls}
-                                  ></ha-yaml-editor>
-                                </ha-expansion-panel>
-                              `
-                            : nothing}
-                        `
+                  ${messages.map(
+                    ({ from, text }) => html`
+                      <div class=${`message ${from}`}>${text}</div>
+                    `
                   )}
                 </div>
                 <div style="clear:both"></div>
@@ -432,7 +360,7 @@ export class AssistPipelineDebug extends LitElement {
         : ""}
       ${maybeRenderError(this.pipelineRun, "tts", lastRunStage)}
       <ha-card>
-        <ha-expansion-panel class="yaml-expansion">
+        <ha-expansion-panel>
           <span slot="header">Raw</span>
           <ha-yaml-editor
             read-only
@@ -471,12 +399,12 @@ export class AssistPipelineDebug extends LitElement {
     .row > div:last-child {
       text-align: right;
     }
-    .yaml-expansion {
+    ha-expansion-panel {
       padding-left: 8px;
       padding-inline-start: 8px;
       padding-inline-end: initial;
     }
-    .card-content .yaml-expansion {
+    .card-content ha-expansion-panel {
       padding-left: 0px;
       padding-inline-start: 0px;
       padding-inline-end: initial;
@@ -492,59 +420,27 @@ export class AssistPipelineDebug extends LitElement {
       margin-top: 8px;
     }
 
-    .content-expansion {
-      margin: 8px 0;
-      border-radius: var(--ha-border-radius-xl);
-      clear: both;
-      padding: 0 8px;
-      --input-fill-color: none;
-      max-width: calc(100% - 24px);
-      --expansion-panel-summary-padding: 0px;
-      --expansion-panel-content-padding: 0px;
-    }
-
-    .content-expansion *[slot="header"] {
-      font-weight: var(--ha-font-weight-normal);
-    }
-
-    .system {
-      background-color: var(--success-color);
-    }
-
     .message {
-      padding: 8px;
-    }
-
-    .message,
-    .content-expansion {
       font-size: var(--ha-font-size-l);
       margin: 8px 0;
+      padding: 8px;
       border-radius: var(--ha-border-radius-xl);
       clear: both;
     }
 
-    .messages pre {
-      white-space: pre-wrap;
-    }
-
-    .user,
-    .tool_result {
+    .message.user {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       float: var(--float-end);
+      text-align: right;
       border-bottom-right-radius: 0px;
       background-color: var(--light-primary-color);
       color: var(--text-light-primary-color, var(--primary-text-color));
       direction: var(--direction);
     }
 
-    .message.user,
-    .content-expansion div[slot="header"] {
-      text-align: right;
-    }
-
-    .assistant {
+    .message.hass {
       margin-right: 24px;
       margin-inline-end: 24px;
       margin-inline-start: initial;

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

@@ -563,7 +563,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .name,
         .attribute {
           font-size: var(--ha-font-size-m);
-          line-height: 1;
+          line-height: var(--ha-line-height-condensed);
         }
 
         .name-state {
@@ -729,7 +729,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .short .state,
         .short .temp-attribute .temp {
           font-size: 24px;
-          line-height: 1.25;
+          line-height: var(--ha-line-height-condensed);
         }
 
         .short .content + .forecast {

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

@@ -1,11 +1,18 @@
 import memoizeOne from "memoize-one";
 import { LitElement, css, html, nothing } from "lit";
+import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+
+import {
+  isMediaSourceContentId,
+  resolveMediaSource,
+} from "../../../../data/media_source";
 
 @customElement("hui-view-background-editor")
 export class HuiViewBackgroundEditor extends LitElement {
@@ -13,6 +20,8 @@ export class HuiViewBackgroundEditor extends LitElement {
 
   @state() private _config!: LovelaceViewConfig;
 
+  @state({ attribute: false }) private _resolvedImage?: string;
+
   set config(config: LovelaceViewConfig) {
     this._config = config;
   }
@@ -20,133 +29,195 @@ export class HuiViewBackgroundEditor extends LitElement {
   private _localizeValueCallback = (key: string) =>
     this.hass.localize(key as any);
 
-  private _schema = memoizeOne((showSettings: boolean) => [
-    {
-      name: "image",
-      selector: { background: { original: true } },
-    },
-    ...(showSettings
-      ? ([
-          {
-            name: "settings",
-            flatten: true,
-            expanded: true,
-            type: "expandable" as const,
-            schema: [
-              {
-                name: "opacity",
-                selector: {
-                  number: { min: 0, max: 100, mode: "slider", step: 10 },
-                },
-              },
-              {
-                name: "attachment",
-                selector: {
-                  button_toggle: {
-                    translation_key:
-                      "ui.panel.lovelace.editor.edit_view.background.attachment",
-                    options: ["scroll", "fixed"],
-                  },
-                },
-              },
-              {
-                name: "size",
-                required: true,
-                selector: {
-                  select: {
-                    translation_key:
-                      "ui.panel.lovelace.editor.edit_view.background.size",
-                    options: ["auto", "cover", "contain"],
-                    mode: "dropdown",
-                  },
-                },
-              },
-              {
-                name: "alignment",
-                required: true,
-                selector: {
-                  select: {
-                    translation_key:
-                      "ui.panel.lovelace.editor.edit_view.background.alignment",
-                    options: [
-                      "top left",
-                      "top center",
-                      "top right",
-                      "center left",
-                      "center",
-                      "center right",
-                      "bottom left",
-                      "bottom center",
-                      "bottom right",
-                    ],
-                    mode: "dropdown",
-                  },
-                },
-              },
-              {
-                name: "repeat",
-                required: true,
-                selector: {
-                  select: {
-                    translation_key:
-                      "ui.panel.lovelace.editor.edit_view.background.repeat",
-                    options: ["repeat", "no-repeat"],
-                    mode: "dropdown",
-                  },
-                },
-              },
-            ],
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc, showSettings: boolean) =>
+      [
+        {
+          name: "image",
+          selector: {
+            media: {
+              accept: ["image/*"] as string[],
+              clearable: true,
+              image_upload: true,
+              hide_content_type: true,
+              content_id_helper: localize(
+                "ui.panel.lovelace.editor.card.picture.content_id_helper"
+              ),
+            },
           },
-        ] as const)
-      : []),
-  ]);
+        },
+        ...(showSettings
+          ? ([
+              {
+                name: "settings",
+                flatten: true,
+                expanded: true,
+                type: "expandable" as const,
+                schema: [
+                  {
+                    name: "opacity",
+                    selector: {
+                      number: { min: 0, max: 100, mode: "slider", step: 10 },
+                    },
+                  },
+                  {
+                    name: "attachment",
+                    selector: {
+                      button_toggle: {
+                        translation_key:
+                          "ui.panel.lovelace.editor.edit_view.background.attachment",
+                        options: ["scroll", "fixed"],
+                      },
+                    },
+                  },
+                  {
+                    name: "size",
+                    required: true,
+                    selector: {
+                      select: {
+                        translation_key:
+                          "ui.panel.lovelace.editor.edit_view.background.size",
+                        options: ["auto", "cover", "contain"],
+                        mode: "dropdown",
+                      },
+                    },
+                  },
+                  {
+                    name: "alignment",
+                    required: true,
+                    selector: {
+                      select: {
+                        translation_key:
+                          "ui.panel.lovelace.editor.edit_view.background.alignment",
+                        options: [
+                          "top left",
+                          "top center",
+                          "top right",
+                          "center left",
+                          "center",
+                          "center right",
+                          "bottom left",
+                          "bottom center",
+                          "bottom right",
+                        ],
+                        mode: "dropdown",
+                      },
+                    },
+                  },
+                  {
+                    name: "repeat",
+                    required: true,
+                    selector: {
+                      select: {
+                        translation_key:
+                          "ui.panel.lovelace.editor.edit_view.background.repeat",
+                        options: ["repeat", "no-repeat"],
+                        mode: "dropdown",
+                      },
+                    },
+                  },
+                ],
+              },
+            ] as const)
+          : []),
+      ] as const
+  );
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      this._config &&
+      this.hass &&
+      (changedProps.has("_config") ||
+        (changedProps.has("hass") && !changedProps.get("hass")))
+    ) {
+      const background = this._backgroundData(this._config);
+      this.style.setProperty(
+        "--picture-opacity",
+        `${(background.opacity ?? 100) / 100}`
+      );
+
+      const backgroundImage =
+        typeof background.image === "object"
+          ? background.image.media_content_id
+          : background.image;
+
+      if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
+        resolveMediaSource(this.hass, backgroundImage).then((result) => {
+          this._resolvedImage = result.url;
+        });
+      } else {
+        this._resolvedImage = backgroundImage;
+      }
+    }
+  }
 
   protected render() {
     if (!this.hass) {
       return nothing;
     }
 
-    let background = this._config?.background;
-    if (typeof background === "string") {
-      const backgroundUrl = background.match(/url\(['"]?([^'"]+)['"]?\)/)?.[1];
-
-      background = {
-        image: backgroundUrl,
-      };
-    }
-
-    if (!background) {
-      background = {
-        opacity: 33,
-        alignment: "center",
-        size: "cover",
-        repeat: "repeat",
-        attachment: "fixed",
-      };
-    } else {
-      background = {
-        opacity: 100,
-        alignment: "center",
-        size: "cover",
-        repeat: "no-repeat",
-        attachment: "scroll",
-        ...background,
-      };
-    }
+    const background = this._backgroundData(this._config);
 
     return html`
+      ${this._resolvedImage
+        ? html`<div class="previewContainer">
+            <img
+              src=${this._resolvedImage}
+              alt=${this.hass.localize(
+                "ui.components.picture-upload.current_image_alt"
+              )}
+            />
+          </div>`
+        : nothing}
       <ha-form
         .hass=${this.hass}
         .data=${background}
-        .schema=${this._schema(true)}
+        .schema=${this._schema(this.hass.localize, true)}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
         .localizeValue=${this._localizeValueCallback}
-        style=${`--picture-opacity: ${(background.opacity ?? 100) / 100};`}
       ></ha-form>
     `;
   }
 
+  private _backgroundData = memoizeOne(
+    (backgroundConfig?: LovelaceViewConfig) => {
+      let background = backgroundConfig?.background;
+      if (typeof background === "string") {
+        const backgroundUrl = background.match(
+          /url\(['"]?([^'"]+)['"]?\)/
+        )?.[1];
+
+        background = {
+          image: backgroundUrl,
+        };
+      }
+
+      if (!background) {
+        background = {
+          opacity: 33,
+          alignment: "center",
+          size: "cover",
+          repeat: "repeat",
+          attachment: "fixed",
+        };
+      } else {
+        background = {
+          opacity: 100,
+          alignment: "center",
+          size: "cover",
+          repeat: "no-repeat",
+          attachment: "scroll",
+          ...background,
+          ...(typeof background.image === "string"
+            ? { image: { media_content_id: background.image } }
+            : {}),
+        };
+      }
+      return background;
+    }
+  );
+
   private _valueChanged(ev: CustomEvent): void {
     const config = {
       ...this._config,
@@ -195,6 +266,23 @@ export class HuiViewBackgroundEditor extends LitElement {
       display: block;
       --file-upload-image-border-radius: var(--ha-border-radius-sm);
     }
+    .previewContainer {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    img {
+      max-width: 100%;
+      max-height: 200px;
+      margin-bottom: 4px;
+      border-radius: var(--file-upload-image-border-radius);
+      transition: opacity 0.3s;
+      opacity: var(--picture-opacity, 1);
+    }
+    img:hover {
+      opacity: 1;
+    }
   `;
 }
 

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

@@ -27,7 +27,9 @@ export class HUIViewBackground extends LitElement {
     const backgroundImage =
       typeof this.background === "string"
         ? this.background
-        : this.background?.image;
+        : typeof this.background?.image === "object"
+          ? this.background.image.media_content_id
+          : this.background?.image;
 
     if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
       resolveMediaSource(this.hass, backgroundImage).then((result) => {
@@ -73,13 +75,17 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      if (isMediaSourceContentId(background.image) && !this.resolvedImage) {
+      const image =
+        typeof background.image === "object"
+          ? background.image.media_content_id || ""
+          : background.image;
+      if (isMediaSourceContentId(image) && !this.resolvedImage) {
         return null;
       }
       const alignment = background.alignment ?? "center";
       const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
-      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || background.image)}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || image)}')`;
     }
     if (typeof background === "string") {
       if (isMediaSourceContentId(background) && !this.resolvedImage) {

src/translations/en.json

@@ -758,6 +758,7 @@
       },
       "language-picker": {
         "language": "Language",
+        "no_match": "No matching languages found",
         "no_languages": "No languages available"
       },
       "tts-picker": {

yarn.lock

@@ -73,46 +73,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.27.2, @babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.0":
-  version: 7.28.4
-  resolution: "@babel/compat-data@npm:7.28.4"
-  checksum: 10/95b7864e6b210c84c069743966da448c0cb50015a4de5e18dd755776a0b5e53c4653e74f26700aed8de922eaa3b8844fc5fc5b29bc64830249d2abe914aec832
+"@babel/compat-data@npm:^7.27.2, @babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/compat-data@npm:7.28.5"
+  checksum: 10/5a5ff00b187049e847f04bd02e21fbd8094544e5016195c2b45e56fa2e311eeb925b158f52a85624c9e6bacc1ce0323e26c303513723d918a8034e347e22610d
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.28.4, @babel/core@npm:^7.24.4":
-  version: 7.28.4
-  resolution: "@babel/core@npm:7.28.4"
+"@babel/core@npm:7.28.5, @babel/core@npm:^7.24.4":
+  version: 7.28.5
+  resolution: "@babel/core@npm:7.28.5"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.28.3"
+    "@babel/generator": "npm:^7.28.5"
     "@babel/helper-compilation-targets": "npm:^7.27.2"
     "@babel/helper-module-transforms": "npm:^7.28.3"
     "@babel/helpers": "npm:^7.28.4"
-    "@babel/parser": "npm:^7.28.4"
+    "@babel/parser": "npm:^7.28.5"
     "@babel/template": "npm:^7.27.2"
-    "@babel/traverse": "npm:^7.28.4"
-    "@babel/types": "npm:^7.28.4"
+    "@babel/traverse": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.5"
     "@jridgewell/remapping": "npm:^2.3.5"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10/0593295241fac9be567145ef16f3858d34fc91390a9438c6d47476be9823af4cc0488c851c59702dd46b968e9fd46d17ddf0105ea30195ca85f5a66b4044c519
+  checksum: 10/2f1e224125179f423f4300d605a0c5a3ef315003281a63b1744405b2605ee2a2ffc5b1a8349aa4f262c72eca31c7e1802377ee04ad2b852a2c88f8ace6cac324
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.28.3":
-  version: 7.28.3
-  resolution: "@babel/generator@npm:7.28.3"
+"@babel/generator@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/generator@npm:7.28.5"
   dependencies:
-    "@babel/parser": "npm:^7.28.3"
-    "@babel/types": "npm:^7.28.2"
+    "@babel/parser": "npm:^7.28.5"
+    "@babel/types": "npm:^7.28.5"
     "@jridgewell/gen-mapping": "npm:^0.3.12"
     "@jridgewell/trace-mapping": "npm:^0.3.28"
     jsesc: "npm:^3.0.2"
-  checksum: 10/d00d1e6b51059e47594aab7920b88ec6fcef6489954a9172235ab57ad2e91b39c95376963a6e2e4cc7e8b88fa4f931018f71f9ab32bbc9c0bc0de35a0231f26c
+  checksum: 10/ae618f0a17a6d76c3983e1fd5d9c2f5fdc07703a119efdb813a7d9b8ad4be0a07d4c6f0d718440d2de01a68e321f64e2d63c77fc5d43ae47ae143746ef28ac1f
   languageName: node
   linkType: hard
 
@@ -282,10 +282,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.25.9, @babel/helper-validator-identifier@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/helper-validator-identifier@npm:7.27.1"
-  checksum: 10/75041904d21bdc0cd3b07a8ac90b11d64cd3c881e89cb936fa80edd734bf23c35e6bd1312611e8574c4eab1f3af0f63e8a5894f4699e9cfdf70c06fcf4252320
+"@babel/helper-validator-identifier@npm:^7.25.9, @babel/helper-validator-identifier@npm:^7.27.1, @babel/helper-validator-identifier@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/helper-validator-identifier@npm:7.28.5"
+  checksum: 10/8e5d9b0133702cfacc7f368bf792f0f8ac0483794877c6dca5fcb73810ee138e27527701826fb58a40a004f3a5ec0a2f3c3dd5e326d262530b119918f3132ba7
   languageName: node
   linkType: hard
 
@@ -317,26 +317,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
-  version: 7.28.4
-  resolution: "@babel/parser@npm:7.28.4"
+"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/parser@npm:7.28.5"
   dependencies:
-    "@babel/types": "npm:^7.28.4"
+    "@babel/types": "npm:^7.28.5"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/f54c46213ef180b149f6a17ea765bf40acc1aebe2009f594e2a283aec69a190c6dda1fdf24c61a258dbeb903abb8ffb7a28f1a378f8ab5d333846ce7b7e23bf1
+  checksum: 10/8d9bfb437af6c97a7f6351840b9ac06b4529ba79d6d3def24d6c2996ab38ff7f1f9d301e868ca84a93a3050fadb3d09dbc5105b24634cd281671ac11eebe8df7
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.27.1"
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/fe65257d5b82558bc6bc0f3a5a7a35b4166f71bed3747714dafb6360fadb15f036d568bc1fbeedae819165008c8feb646633ab91c0e3a95284963972f4fa9751
+  checksum: 10/750de98b34e6d09b545ded6e635b43cbab02fe319622964175259b98f41b16052e5931c4fbd45bad8cd0a37ebdd381233edecec9ee395b8ec51f47f47d1dbcd4
   languageName: node
   linkType: hard
 
@@ -478,14 +478,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.28.0":
-  version: 7.28.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.4"
+"@babel/plugin-transform-block-scoping@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0848c681b0229ebb98da8a1fab53a29a94f79c4b80e536cb00dcedc08ca29341a48ebdf34d846f4d738376aa8e36830fa7f444bae3e85c8761cab96e9ad72a0f
+  checksum: 10/4b695360ede8472262111efb9d5c35b515767e1ead9e272c3e9799235e3f5feeb21d99a66bb23acbba9424465d13e7695a22a22a680c4aa558702ef8aad461d6
   languageName: node
   linkType: hard
 
@@ -513,7 +513,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.28.3":
+"@babel/plugin-transform-classes@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/plugin-transform-classes@npm:7.28.4"
   dependencies:
@@ -541,15 +541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.28.0":
-  version: 7.28.0
-  resolution: "@babel/plugin-transform-destructuring@npm:7.28.0"
+"@babel/plugin-transform-destructuring@npm:^7.28.0, @babel/plugin-transform-destructuring@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-destructuring@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.28.0"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/cddab2520ff32d18005670fc6646396a253d3811d1ccc49f6f858469f05985ee896c346a0cb34d1cf25155c9be76d1068ff878cf8e8459bd3fa27513ec5a6802
+  checksum: 10/9cc67d3377bc5d8063599f2eb4588f5f9a8ab3abc9b64a40c24501fb3c1f91f4d5cf281ea9f208fd6b2ef8d9d8b018dacf1bed9493334577c966cd32370a7036
   languageName: node
   linkType: hard
 
@@ -611,14 +611,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.27.1"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/dbbedd24724c2d590ef59d32cb1fef34e99daba41c5b621f9f4c4da23e15c2bb4b1e3d954c314645016391404cf00f1e4ddec8f1f7891438bcde9aaf16e16ee0
+  checksum: 10/da9bb5acd35c9fba92b802641f9462b82334158a149c78a739a04576a1e62be41057a201a41c022dda263bb73ac1a26521bbc997c7fc067f54d487af297995f4
   languageName: node
   linkType: hard
 
@@ -680,14 +680,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.27.1"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2757955d81d65cc4701c17b83720745f6858f7a1d1d58117e379c204f47adbeb066b778596b6168bdbf4a22c229aab595d79a9abc261d0c6bfd62d4419466e73
+  checksum: 10/c76778f4b186cc4f0b7e3658d91c690678bdb2b9d032f189213016d6177f2564709b79b386523b022b7d52e52331fd91f280f7c7bf85d835e0758b4b0d371447
   languageName: node
   linkType: hard
 
@@ -726,17 +726,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.27.1"
+"@babel/plugin-transform-modules-systemjs@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.28.5"
   dependencies:
-    "@babel/helper-module-transforms": "npm:^7.27.1"
+    "@babel/helper-module-transforms": "npm:^7.28.3"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.27.1"
-    "@babel/traverse": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+    "@babel/traverse": "npm:^7.28.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/06d7bf76ac4688a36ae8e8d2dde1c3b8bab4594362132b74a00d5a32e6716944d68911b9bc53df60e59f4f9c7f1796525503ce3e3eed42f842d7775ccdfd836e
+  checksum: 10/1b91b4848845eaf6e21663d97a2a6c896553b127deaf3c2e9a2a4f041249277d13ebf71fd42d0ecbc4385e9f76093eff592fe0da0dcf1401b3f38c1615d8c539
   languageName: node
   linkType: hard
 
@@ -797,7 +797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.28.0":
+"@babel/plugin-transform-object-rest-spread@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.28.4"
   dependencies:
@@ -835,15 +835,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
+"@babel/plugin-transform-optional-chaining@npm:^7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.27.1"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640
+  checksum: 10/0bc900bff66d5acc13b057107eaeb6084b4cb0b124654d35b103f71f292d33dba5beac444ab4f92528583585b6e0cf34d64ce9cbb473b15d22375a4a6ed3cbac
   languageName: node
   linkType: hard
 
@@ -894,7 +894,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.28.3":
+"@babel/plugin-transform-regenerator@npm:^7.28.4":
   version: 7.28.4
   resolution: "@babel/plugin-transform-regenerator@npm:7.28.4"
   dependencies:
@@ -928,9 +928,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.28.3":
-  version: 7.28.3
-  resolution: "@babel/plugin-transform-runtime@npm:7.28.3"
+"@babel/plugin-transform-runtime@npm:7.28.5":
+  version: 7.28.5
+  resolution: "@babel/plugin-transform-runtime@npm:7.28.5"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.27.1"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
@@ -940,7 +940,7 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5e8d45f3d243ff15cf4ebe59c2bf52e33bb5864092365dd332330256c96eaa7a16e3cecb1c9e826d5ced7e3cc0b0925c2ca29df674d97252c8eb90ecddab1d78
+  checksum: 10/0d16c90d40dd34f1a981e742ad656ceef619b92d3662ec9ac8d7c8ba79f22bb425c3f9e097333659a4938f03868a53077b1a3aadb7f37504157a0c7af64ec2be
   languageName: node
   linkType: hard
 
@@ -1047,15 +1047,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.28.3, @babel/preset-env@npm:^7.11.0":
-  version: 7.28.3
-  resolution: "@babel/preset-env@npm:7.28.3"
+"@babel/preset-env@npm:7.28.5, @babel/preset-env@npm:^7.11.0":
+  version: 7.28.5
+  resolution: "@babel/preset-env@npm:7.28.5"
   dependencies:
-    "@babel/compat-data": "npm:^7.28.0"
+    "@babel/compat-data": "npm:^7.28.5"
     "@babel/helper-compilation-targets": "npm:^7.27.2"
     "@babel/helper-plugin-utils": "npm:^7.27.1"
     "@babel/helper-validator-option": "npm:^7.27.1"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.27.1"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.28.5"
     "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.27.1"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.27.1"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.27.1"
@@ -1068,42 +1068,42 @@ __metadata:
     "@babel/plugin-transform-async-generator-functions": "npm:^7.28.0"
     "@babel/plugin-transform-async-to-generator": "npm:^7.27.1"
     "@babel/plugin-transform-block-scoped-functions": "npm:^7.27.1"
-    "@babel/plugin-transform-block-scoping": "npm:^7.28.0"
+    "@babel/plugin-transform-block-scoping": "npm:^7.28.5"
     "@babel/plugin-transform-class-properties": "npm:^7.27.1"
     "@babel/plugin-transform-class-static-block": "npm:^7.28.3"
-    "@babel/plugin-transform-classes": "npm:^7.28.3"
+    "@babel/plugin-transform-classes": "npm:^7.28.4"
     "@babel/plugin-transform-computed-properties": "npm:^7.27.1"
-    "@babel/plugin-transform-destructuring": "npm:^7.28.0"
+    "@babel/plugin-transform-destructuring": "npm:^7.28.5"
     "@babel/plugin-transform-dotall-regex": "npm:^7.27.1"
     "@babel/plugin-transform-duplicate-keys": "npm:^7.27.1"
     "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.27.1"
     "@babel/plugin-transform-dynamic-import": "npm:^7.27.1"
     "@babel/plugin-transform-explicit-resource-management": "npm:^7.28.0"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.27.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.28.5"
     "@babel/plugin-transform-export-namespace-from": "npm:^7.27.1"
     "@babel/plugin-transform-for-of": "npm:^7.27.1"
     "@babel/plugin-transform-function-name": "npm:^7.27.1"
     "@babel/plugin-transform-json-strings": "npm:^7.27.1"
     "@babel/plugin-transform-literals": "npm:^7.27.1"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.27.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.28.5"
     "@babel/plugin-transform-member-expression-literals": "npm:^7.27.1"
     "@babel/plugin-transform-modules-amd": "npm:^7.27.1"
     "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.27.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.28.5"
     "@babel/plugin-transform-modules-umd": "npm:^7.27.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.27.1"
     "@babel/plugin-transform-new-target": "npm:^7.27.1"
     "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
     "@babel/plugin-transform-numeric-separator": "npm:^7.27.1"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.0"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.28.4"
     "@babel/plugin-transform-object-super": "npm:^7.27.1"
     "@babel/plugin-transform-optional-catch-binding": "npm:^7.27.1"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.28.5"
     "@babel/plugin-transform-parameters": "npm:^7.27.7"
     "@babel/plugin-transform-private-methods": "npm:^7.27.1"
     "@babel/plugin-transform-private-property-in-object": "npm:^7.27.1"
     "@babel/plugin-transform-property-literals": "npm:^7.27.1"
-    "@babel/plugin-transform-regenerator": "npm:^7.28.3"
+    "@babel/plugin-transform-regenerator": "npm:^7.28.4"
     "@babel/plugin-transform-regexp-modifiers": "npm:^7.27.1"
     "@babel/plugin-transform-reserved-words": "npm:^7.27.1"
     "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
@@ -1123,7 +1123,7 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b09991276a5ea4f2f95077bb451420f683e19d59405bc1fbbb392bb3571592edc922daac4eaa50b2b407c0b24c4e1e9df0f76738c3c573dac4e6bcf028daa8c5
+  checksum: 10/e9a5136a7e34553cc70dd6594716144678a2e9ecc971caf6885c380c38fcbed8b387f3af418c9aa4b2d2765964bb4e8a2e14b709c2f165eec6ed13bda32587ea
   languageName: node
   linkType: hard
 
@@ -1158,28 +1158,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
-  version: 7.28.4
-  resolution: "@babel/traverse@npm:7.28.4"
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.28.0, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4, @babel/traverse@npm:^7.28.5":
+  version: 7.28.5
+  resolution: "@babel/traverse@npm:7.28.5"
   dependencies:
     "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.28.3"
+    "@babel/generator": "npm:^7.28.5"
     "@babel/helper-globals": "npm:^7.28.0"
-    "@babel/parser": "npm:^7.28.4"
+    "@babel/parser": "npm:^7.28.5"
     "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.28.4"
+    "@babel/types": "npm:^7.28.5"
     debug: "npm:^4.3.1"
-  checksum: 10/c3099364b7b1c36bcd111099195d4abeef16499e5defb1e56766b754e8b768c252e856ed9041665158aa1b31215fc6682632756803c8fa53405381ec08c4752b
+  checksum: 10/1fce426f5ea494913c40f33298ce219708e703f71cac7ac045ebde64b5a7b17b9275dfa4e05fb92c3f123136913dff62c8113172f4a5de66dab566123dbe7437
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.4.4":
-  version: 7.28.4
-  resolution: "@babel/types@npm:7.28.4"
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.4, @babel/types@npm:^7.28.5, @babel/types@npm:^7.4.4":
+  version: 7.28.5
+  resolution: "@babel/types@npm:7.28.5"
   dependencies:
     "@babel/helper-string-parser": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.27.1"
-  checksum: 10/db50bf257aafa5d845ad16dae0587f57d596e4be4cbb233ea539976a4c461f9fbcc0bf3d37adae3f8ce5dcb4001462aa608f3558161258b585f6ce6ce21a2e45
+    "@babel/helper-validator-identifier": "npm:^7.28.5"
+  checksum: 10/4256bb9fb2298c4f9b320bde56e625b7091ea8d2433d98dcf524d4086150da0b6555aabd7d0725162670614a9ac5bf036d1134ca13dedc9707f988670f1362d7
   languageName: node
   linkType: hard
 
@@ -4821,12 +4821,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qrcode@npm:1.5.5":
-  version: 1.5.5
-  resolution: "@types/qrcode@npm:1.5.5"
+"@types/qrcode@npm:1.5.6":
+  version: 1.5.6
+  resolution: "@types/qrcode@npm:1.5.6"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 10/a25686339bd2718e6a93943e7807ed68dd9c74a9da28aa77212086ee0ce9a173c0a232af9e3f6835acd09938dfc8a0f98c6bccf1a6c6a905fb003ab07f9e08f2
+  checksum: 10/61aa00ba56a874a71a82006a55715d2ff2dc65689b582314c6f955c72c830938c93d0ee1e3376d370a1dcd6bac61b05afe75ad8d1f4a47ebcdd6344d39f70847
   languageName: node
   linkType: hard
 
@@ -4897,10 +4897,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sortablejs@npm:1.15.8":
-  version: 1.15.8
-  resolution: "@types/sortablejs@npm:1.15.8"
-  checksum: 10/aea58b08cf45f5e9633707a8df0df1212595c731bbdfd29805487138fdd0d8c51fa5c741999738a645c1e801d43a92ba0d3fb5b45625b52e247c56588aef6c55
+"@types/sortablejs@npm:1.15.9":
+  version: 1.15.9
+  resolution: "@types/sortablejs@npm:1.15.9"
+  checksum: 10/9e0d6ef1cdcd30acab7af74cab5cbf56685e2de47c6f254357f7dde2626e9b49b8668c43f92761202cf4e10f2e3fd3d7baa6a83a39c3d342fc45ce66e87bd5aa
   languageName: node
   linkType: hard
 
@@ -5376,12 +5376,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/coverage-v8@npm:4.0.1"
+"@vitest/coverage-v8@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/coverage-v8@npm:4.0.3"
   dependencies:
     "@bcoe/v8-coverage": "npm:^1.0.2"
-    "@vitest/utils": "npm:4.0.1"
+    "@vitest/utils": "npm:4.0.3"
     ast-v8-to-istanbul: "npm:^0.3.5"
     debug: "npm:^4.4.3"
     istanbul-lib-coverage: "npm:^3.2.2"
@@ -5392,34 +5392,34 @@ __metadata:
     std-env: "npm:^3.9.0"
     tinyrainbow: "npm:^3.0.3"
   peerDependencies:
-    "@vitest/browser": 4.0.1
-    vitest: 4.0.1
+    "@vitest/browser": 4.0.3
+    vitest: 4.0.3
   peerDependenciesMeta:
     "@vitest/browser":
       optional: true
-  checksum: 10/6052deb51ba5be8bb1ad471f8678e7763823abd143cb8178503b5fefb260dd29b537c1ca44f6dfcb387b46e1e8c9613b4011d6604b010e29d5f229431244833a
+  checksum: 10/8051dc457f74f9dbd912be9805fc3c6c1a965e3c86d88a6f4b2d4b7e38511dcce689447adb92235c33bec8fddcd0ede8e81f6bdf33eedc9ff00070b28a474093
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/expect@npm:4.0.1"
+"@vitest/expect@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/expect@npm:4.0.3"
   dependencies:
     "@standard-schema/spec": "npm:^1.0.0"
     "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.0.1"
-    "@vitest/utils": "npm:4.0.1"
+    "@vitest/spy": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.3"
     chai: "npm:^6.0.1"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/32b11776b15c044399c6d14f75efe3773d09f9af2f5f4df1a8c32cef6d4929ccb663183f800b79404a2b36b282ae54066641daf7fa84effb51dc0e6e7d922818
+  checksum: 10/663936d8f3abd91cb9725196ec542d109d7c64ddcdb6a483d89c9d67aa78a8ddd4468348c54b69f9c801fc3add9a8ae35dd0491c9f2bd19ec17b9b7a9ebf0d82
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/mocker@npm:4.0.1"
+"@vitest/mocker@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/mocker@npm:4.0.3"
   dependencies:
-    "@vitest/spy": "npm:4.0.1"
+    "@vitest/spy": "npm:4.0.3"
     estree-walker: "npm:^3.0.3"
     magic-string: "npm:^0.30.19"
   peerDependencies:
@@ -5430,54 +5430,54 @@ __metadata:
       optional: true
     vite:
       optional: true
-  checksum: 10/519e3f66f9823ba024926fa818308fae091b0974e51e4b20026fa7b853dd8f6db9b50f78846f59cdca8141913425946e1dbf3ffc78ede5e021365a809ea49093
+  checksum: 10/933cab25563f68335a9871a6deba8f886f6be155c4a2146ee2b3b625578a0b4e068a4a26cf1a8d4ba3b5eb34771276f0365e51320fd06ad3f3f19163c5521d77
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/pretty-format@npm:4.0.1"
+"@vitest/pretty-format@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/pretty-format@npm:4.0.3"
   dependencies:
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/f2813708b46a36053106b22801764e3f7173e677228531677eb20dfdf43ce340b282a9e0ed388b9ac5a1a3289b0f91b4b8a8a37723be39deddbffc74a467a374
+  checksum: 10/1b1197e53e5bcf9f77c842005ff11068f754b87286c6a7669b78c08a05bdbaa5cf4c7326c3b13347b02341b084bf97992c3fe89ea98fb77019e28fd96bc4c5b4
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/runner@npm:4.0.1"
+"@vitest/runner@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/runner@npm:4.0.3"
   dependencies:
-    "@vitest/utils": "npm:4.0.1"
+    "@vitest/utils": "npm:4.0.3"
     pathe: "npm:^2.0.3"
-  checksum: 10/a3a91897a283a3a1dd39bfb81ef356eb3a6f6b5d712e6da9e49d31bee46092884aaf8832a135f7f13d6350dc4238a38ddfea18da1d628efda73132fc4d01d6cd
+  checksum: 10/a028898045cedac1939cc1adeff8fe36cbba2714d08e8524c8028b6fef7d617440bf0dfd72f1e264e8bff876979c49923bf268cb5920305a0ca9562a8318a80c
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/snapshot@npm:4.0.1"
+"@vitest/snapshot@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/snapshot@npm:4.0.3"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.1"
+    "@vitest/pretty-format": "npm:4.0.3"
     magic-string: "npm:^0.30.19"
     pathe: "npm:^2.0.3"
-  checksum: 10/f90db2bbd0b20d53cded64464809ea9abdc6bb7abe2e1d12bf81e13895b14b15b9a052d964f0ba4b7312cc8af25c8e943a70dcb3ad9b5e8b27d88adacdde15d2
+  checksum: 10/38d0707ad66b33987c4066ee713f22d4535712ca016cece007c84736fa543d3ad3a314e759632b63e369e6a5454b03b142f66f5d661ac81ce7c4f1d6f6d325f4
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/spy@npm:4.0.1"
-  checksum: 10/9efda95edb29b2c06859af98ef1b1497cbf7ee43fd95649a835139e61e77a3f6bdad9dec48b53b954a311f824656978fb2eafb4dd8b416b354e15ad430a60772
+"@vitest/spy@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/spy@npm:4.0.3"
+  checksum: 10/4fc8e3aae425fdbbe96126291079f67f1e6be9545ffbaab7a31de8d6e6825b115eb3fafbf24167eab91dbbb4ed6fcd120c387116f181de1e3369e8d5fdd75f17
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@vitest/utils@npm:4.0.1"
+"@vitest/utils@npm:4.0.3":
+  version: 4.0.3
+  resolution: "@vitest/utils@npm:4.0.3"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.1"
+    "@vitest/pretty-format": "npm:4.0.3"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/21d7460135327abcc827de640cfa1f049321ad28f59b69538251cf9c50f7731734ded5e55fed36dd95db840c6a4275308b3e2f08c3cbd02289b0268abf4c441b
+  checksum: 10/d4ddb293e908d43b954c5e41f351a61f719e30e9ea058e47af5b18389d74cb073ea1638ab28dbbd5b365ed31a21577bb090b8a3594292c59df18798fd292f002
   languageName: node
   linkType: hard
 
@@ -9203,10 +9203,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
-    "@babel/core": "npm:7.28.4"
+    "@babel/core": "npm:7.28.5"
     "@babel/helper-define-polyfill-provider": "npm:0.6.5"
-    "@babel/plugin-transform-runtime": "npm:7.28.3"
-    "@babel/preset-env": "npm:7.28.3"
+    "@babel/plugin-transform-runtime": "npm:7.28.5"
+    "@babel/preset-env": "npm:7.28.5"
     "@babel/runtime": "npm:7.28.4"
     "@braintree/sanitize-url": "npm:7.1.1"
     "@bundle-stats/plugin-webpack-filter": "npm:4.21.5"
@@ -9291,15 +9291,15 @@ __metadata:
     "@types/lodash.merge": "npm:4.6.9"
     "@types/luxon": "npm:3.7.1"
     "@types/mocha": "npm:10.0.10"
-    "@types/qrcode": "npm:1.5.5"
-    "@types/sortablejs": "npm:1.15.8"
+    "@types/qrcode": "npm:1.5.6"
+    "@types/sortablejs": "npm:1.15.9"
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
     "@vaadin/combo-box": "npm:24.9.2"
     "@vaadin/vaadin-themable-mixin": "npm:24.9.2"
     "@vibrant/color": "npm:4.0.0"
-    "@vitest/coverage-v8": "npm:4.0.1"
+    "@vitest/coverage-v8": "npm:4.0.3"
     "@vue/web-component-wrapper": "npm:1.3.0"
     "@webcomponents/scoped-custom-element-registry": "npm:0.0.10"
     "@webcomponents/webcomponentsjs": "npm:2.8.0"
@@ -9384,7 +9384,7 @@ __metadata:
     typescript-eslint: "npm:8.46.2"
     ua-parser-js: "npm:2.0.6"
     vite-tsconfig-paths: "npm:5.1.4"
-    vitest: "npm:4.0.1"
+    vitest: "npm:4.0.3"
     vue: "npm:2.7.16"
     vue2-daterange-picker: "npm:0.6.8"
     webpack-stats-plugin: "npm:1.1.3"
@@ -14766,17 +14766,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.1":
-  version: 4.0.1
-  resolution: "vitest@npm:4.0.1"
+"vitest@npm:4.0.3":
+  version: 4.0.3
+  resolution: "vitest@npm:4.0.3"
   dependencies:
-    "@vitest/expect": "npm:4.0.1"
-    "@vitest/mocker": "npm:4.0.1"
-    "@vitest/pretty-format": "npm:4.0.1"
-    "@vitest/runner": "npm:4.0.1"
-    "@vitest/snapshot": "npm:4.0.1"
-    "@vitest/spy": "npm:4.0.1"
-    "@vitest/utils": "npm:4.0.1"
+    "@vitest/expect": "npm:4.0.3"
+    "@vitest/mocker": "npm:4.0.3"
+    "@vitest/pretty-format": "npm:4.0.3"
+    "@vitest/runner": "npm:4.0.3"
+    "@vitest/snapshot": "npm:4.0.3"
+    "@vitest/spy": "npm:4.0.3"
+    "@vitest/utils": "npm:4.0.3"
     debug: "npm:^4.4.3"
     es-module-lexer: "npm:^1.7.0"
     expect-type: "npm:^1.2.2"
@@ -14794,10 +14794,10 @@ __metadata:
     "@edge-runtime/vm": "*"
     "@types/debug": ^4.1.12
     "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.0.1
-    "@vitest/browser-preview": 4.0.1
-    "@vitest/browser-webdriverio": 4.0.1
-    "@vitest/ui": 4.0.1
+    "@vitest/browser-playwright": 4.0.3
+    "@vitest/browser-preview": 4.0.3
+    "@vitest/browser-webdriverio": 4.0.3
+    "@vitest/ui": 4.0.3
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -14821,7 +14821,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10/5f9aecae9c3d8446b581d26a1dc228e7bbf8af0b4fa760ed32ad9ebe7220b815ba6f04cc4e3177e0ead5059a8fecac94455e23852cf601f75ae952fc444f7e1f
+  checksum: 10/535ef75a39d5d3233eeb1050a09cd9b3c9353daad610a442aec16ef657887c16d4a6264d37a4181d487cd07cbb4b2e763ce74b1df037b2850a184983545f3db6
   languageName: node
   linkType: hard