20250109.1 (#23858)

cast/src/html/receiver.html.template

@@ -7,7 +7,6 @@
   <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {
-      background-color: white;
       font-size: initial;
     }
   </style>

cast/src/receiver/layout/hc-lovelace.ts

@@ -59,7 +59,8 @@ class HcLovelace extends LitElement {
 
     return html`
       <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
-        <hui-view-background .background=${background}> </hui-view-background>
+        <hui-view-background .hass=${this.hass} .background=${background}>
+        </hui-view-background>
         <hui-view
           .hass=${this.hass}
           .lovelace=${lovelace}

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250109.0"
+version      = "20250109.1"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

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

@@ -4,6 +4,7 @@ import type {
   ChartData,
   ChartOptions,
   TooltipModel,
+  UpdateMode,
 } from "chart.js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, nothing, LitElement } from "lit";
@@ -20,12 +21,6 @@ import "../ha-icon-button";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 
-export interface ChartResizeOptions {
-  aspectRatio?: number;
-  height?: number;
-  width?: number;
-}
-
 interface Tooltip
   extends Omit<TooltipModel<any>, "tooltipPosition" | "hasValue" | "getProps"> {
   top: string;
@@ -61,8 +56,6 @@ export class HaChartBase extends LitElement {
   @property({ attribute: "external-hidden", type: Boolean })
   public externalHidden = false;
 
-  @state() private _chartHeight?: number;
-
   @state() private _legendHeight?: number;
 
   @state() private _tooltip?: Tooltip;
@@ -96,36 +89,10 @@ export class HaChartBase extends LitElement {
     }
   }
 
-  public updateChart = (
-    mode:
-      | "resize"
-      | "reset"
-      | "none"
-      | "hide"
-      | "show"
-      | "default"
-      | "active"
-      | undefined
-  ): void => {
+  public updateChart = (mode?: UpdateMode): void => {
     this.chart?.update(mode);
   };
 
-  public resize = (options?: ChartResizeOptions): void => {
-    if (options?.aspectRatio && !options.height) {
-      options.height = Math.round(
-        (options.width ?? this.clientWidth) / options.aspectRatio
-      );
-    } else if (options?.aspectRatio && !options.width) {
-      options.width = Math.round(
-        (options.height ?? this.clientHeight) * options.aspectRatio
-      );
-    }
-    this.chart?.resize(
-      options?.width ?? this.clientWidth,
-      options?.height ?? this.clientHeight
-    );
-  };
-
   protected firstUpdated() {
     this._setupChart();
     this.data.datasets.forEach((dataset, index) => {
@@ -267,96 +234,84 @@ export class HaChartBase extends LitElement {
           </div>`
         : ""}
       <div
-        class="animation-container"
+        class="chart-container"
         style=${styleMap({
-          height: `${this.height || this._chartHeight || 0}px`,
-          overflow: this._chartHeight ? "initial" : "hidden",
+          height: `${this.height ?? this._getDefaultHeight()}px`,
+          "padding-left": `${this._paddingYAxisInternal}px`,
+          "padding-right": 0,
+          "padding-inline-start": `${this._paddingYAxisInternal}px`,
+          "padding-inline-end": 0,
         })}
+        @wheel=${this._handleChartScroll}
       >
-        <div
-          class="chart-container"
-          style=${styleMap({
-            height: `${
-              this.height ?? this._chartHeight ?? this.clientWidth / 2
-            }px`,
-            "padding-left": `${this._paddingYAxisInternal}px`,
-            "padding-right": 0,
-            "padding-inline-start": `${this._paddingYAxisInternal}px`,
-            "padding-inline-end": 0,
+        <canvas
+          class=${classMap({
+            "not-zoomed": !this._isZoomed,
           })}
-          @wheel=${this._handleChartScroll}
+        ></canvas>
+        <div
+          class="zoom-hint ${classMap({
+            visible: this._showZoomHint,
+          })}"
         >
-          <canvas
-            class=${classMap({
-              "not-zoomed": !this._isZoomed,
-            })}
-          ></canvas>
-          <div
-            class="zoom-hint ${classMap({
-              visible: this._showZoomHint,
-            })}"
-          >
-            <div>
-              ${isMac
-                ? this.hass.localize(
-                    "ui.components.history_charts.zoom_hint_mac"
-                  )
-                : this.hass.localize("ui.components.history_charts.zoom_hint")}
-            </div>
+          <div>
+            ${isMac
+              ? this.hass.localize("ui.components.history_charts.zoom_hint_mac")
+              : this.hass.localize("ui.components.history_charts.zoom_hint")}
           </div>
-          ${this._isZoomed && this.chartType !== "timeline"
-            ? html`<ha-icon-button
-                class="zoom-reset"
-                .path=${mdiRestart}
-                @click=${this._handleZoomReset}
-                title=${this.hass.localize(
-                  "ui.components.history_charts.zoom_reset"
-                )}
-              ></ha-icon-button>`
-            : nothing}
-          ${this._tooltip
-            ? html`<div
-                class="chart-tooltip ${classMap({
-                  [this._tooltip.yAlign]: true,
-                })}"
-                style=${styleMap({
-                  top: this._tooltip.top,
-                  left: this._tooltip.left,
-                })}
-              >
-                <div class="title">${this._tooltip.title}</div>
-                ${this._tooltip.beforeBody
-                  ? html`<div class="before-body">
-                      ${this._tooltip.beforeBody}
-                    </div>`
-                  : ""}
-                <div>
-                  <ul>
-                    ${this._tooltip.body.map(
-                      (item, i) =>
-                        html`<li>
-                          <div
-                            class="bullet"
-                            style=${styleMap({
-                              backgroundColor: this._tooltip!.labelColors[i]
-                                .backgroundColor as string,
-                              borderColor: this._tooltip!.labelColors[i]
-                                .borderColor as string,
-                            })}
-                          ></div>
-                          ${item.lines.join("\n")}
-                        </li>`
-                    )}
-                  </ul>
-                </div>
-                ${this._tooltip.footer.length
-                  ? html`<div class="footer">
-                      ${this._tooltip.footer.map((item) => html`${item}<br />`)}
-                    </div>`
-                  : ""}
-              </div>`
-            : ""}
         </div>
+        ${this._isZoomed && this.chartType !== "timeline"
+          ? html`<ha-icon-button
+              class="zoom-reset"
+              .path=${mdiRestart}
+              @click=${this._handleZoomReset}
+              title=${this.hass.localize(
+                "ui.components.history_charts.zoom_reset"
+              )}
+            ></ha-icon-button>`
+          : nothing}
+        ${this._tooltip
+          ? html`<div
+              class="chart-tooltip ${classMap({
+                [this._tooltip.yAlign]: true,
+              })}"
+              style=${styleMap({
+                top: this._tooltip.top,
+                left: this._tooltip.left,
+              })}
+            >
+              <div class="title">${this._tooltip.title}</div>
+              ${this._tooltip.beforeBody
+                ? html`<div class="before-body">
+                    ${this._tooltip.beforeBody}
+                  </div>`
+                : ""}
+              <div>
+                <ul>
+                  ${this._tooltip.body.map(
+                    (item, i) =>
+                      html`<li>
+                        <div
+                          class="bullet"
+                          style=${styleMap({
+                            backgroundColor: this._tooltip!.labelColors[i]
+                              .backgroundColor as string,
+                            borderColor: this._tooltip!.labelColors[i]
+                              .borderColor as string,
+                          })}
+                        ></div>
+                        ${item.lines.join("\n")}
+                      </li>`
+                  )}
+                </ul>
+              </div>
+              ${this._tooltip.footer.length
+                ? html`<div class="footer">
+                    ${this._tooltip.footer.map((item) => html`${item}<br />`)}
+                  </div>`
+                : ""}
+            </div>`
+          : ""}
       </div>
     `;
   }
@@ -471,11 +426,11 @@ export class HaChartBase extends LitElement {
       ...(this.plugins || []),
       {
         id: "resizeHook",
-        resize: (chart) => {
-          const change = chart.height - (this._chartHeight ?? 0);
-          if (!this._chartHeight || change > 12 || change < -12) {
-            // hysteresis to prevent infinite render loops
-            this._chartHeight = chart.height;
+        resize: (chart: Chart) => {
+          if (!this.height) {
+            // lock the height
+            // this removes empty space below the chart
+            this.height = chart.height;
           }
         },
         legend: {
@@ -486,6 +441,10 @@ export class HaChartBase extends LitElement {
     ];
   }
 
+  private _getDefaultHeight() {
+    return this.clientWidth / 2;
+  }
+
   private _handleChartScroll(ev: MouseEvent) {
     const modifier = isMac ? "metaKey" : "ctrlKey";
     this._tooltip = undefined;
@@ -573,11 +532,6 @@ export class HaChartBase extends LitElement {
         display: block;
         position: relative;
       }
-      .animation-container {
-        overflow: hidden;
-        height: 0;
-        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-      }
       .chart-container {
         position: relative;
       }

src/components/chart/state-history-chart-line.ts

@@ -1,7 +1,7 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { property, query, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -12,7 +12,6 @@ import {
 } from "../../common/number/format_number";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
-import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { clickIsTouch } from "./click_is_touch";
 
@@ -67,12 +66,6 @@ export class StateHistoryChartLine extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected render() {
     return html`
       <ha-chart-base

src/components/chart/state-history-chart-timeline.ts

@@ -2,7 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
 import type { CSSResultGroup, 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 { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -10,7 +10,6 @@ import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
-import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 import { computeTimelineColor } from "./timeline-chart/timeline-color";
@@ -53,12 +52,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected render() {
     return html`
       <ha-chart-base

src/components/chart/state-history-charts.ts

@@ -1,12 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, eventOptions, property, state } from "lit/decorators";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
@@ -19,9 +13,6 @@ import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import type { StateHistoryChartLine } from "./state-history-chart-line";
-import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
-import type { ChartResizeOptions } from "./ha-chart-base";
 
 const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
 
@@ -91,16 +82,6 @@ export class StateHistoryCharts extends LitElement {
   // @ts-ignore
   @restoreScroll(".container") private _savedScrollPos?: number;
 
-  @queryAll("state-history-chart-line")
-  private _charts?: StateHistoryChartLine[];
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._charts?.forEach(
-      (chart: StateHistoryChartLine | StateHistoryChartTimeline) =>
-        chart.resize(options)
-    );
-  };
-
   protected render() {
     if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">

src/components/chart/statistics-chart.ts

@@ -6,7 +6,7 @@ import type {
 } from "chart.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -30,11 +30,7 @@ import {
 } from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import type {
-  ChartResizeOptions,
-  ChartDatasetExtra,
-  HaChartBase,
-} from "./ha-chart-base";
+import type { ChartDatasetExtra } from "./ha-chart-base";
 import { clickIsTouch } from "./click_is_touch";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
@@ -98,14 +94,8 @@ export class StatisticsChart extends LitElement {
 
   @state() private _hiddenStats = new Set<string>();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
   private _computedStyle?: CSSStyleDeclaration;
 
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
   }

src/dialogs/generic/dialog-box.ts

@@ -27,7 +27,14 @@ class DialogBox extends LitElement {
 
   @query("ha-md-dialog") private _dialog?: HaMdDialog;
 
+  private _closePromise?: Promise<void>;
+
+  private _closeResolve?: () => void;
+
   public async showDialog(params: DialogBoxParams): Promise<void> {
+    if (this._closePromise) {
+      await this._closePromise;
+    }
     this._params = params;
   }
 
@@ -132,21 +139,24 @@ class DialogBox extends LitElement {
 
   private _dismiss(): void {
     this._closeState = "canceled";
-    this._closeDialog();
     this._cancel();
+    this._closeDialog();
   }
 
   private _confirm(): void {
     this._closeState = "confirmed";
-    this._closeDialog();
     if (this._params!.confirm) {
       this._params!.confirm(this._textField?.value);
     }
+    this._closeDialog();
   }
 
   private _closeDialog() {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
     this._dialog?.close();
+    this._closePromise = new Promise((resolve) => {
+      this._closeResolve = resolve;
+    });
   }
 
   private _dialogClosed() {
@@ -156,6 +166,8 @@ class DialogBox extends LitElement {
     }
     this._closeState = undefined;
     this._params = undefined;
+    this._closeResolve?.();
+    this._closeResolve = undefined;
   }
 
   static get styles(): CSSResultGroup {

src/dialogs/make-dialog-manager.ts

@@ -104,6 +104,12 @@ export const showDialog = async (
         addHistory
       );
     }
+    const dialogIndex = OPEN_DIALOG_STACK.findIndex(
+      (state) => state.dialogTag === dialogTag
+    );
+    if (dialogIndex !== -1) {
+      OPEN_DIALOG_STACK.splice(dialogIndex, 1);
+    }
     OPEN_DIALOG_STACK.push({
       element,
       root,
@@ -173,8 +179,10 @@ export const closeLastDialog = async () => {
 
 export const closeAllDialogs = async () => {
   for (let i = OPEN_DIALOG_STACK.length - 1; i >= 0; i--) {
-    // eslint-disable-next-line no-await-in-loop
-    const closed = await closeDialog(OPEN_DIALOG_STACK[i].dialogTag);
+    const closed =
+      !OPEN_DIALOG_STACK[i] ||
+      // eslint-disable-next-line no-await-in-loop
+      (await closeDialog(OPEN_DIALOG_STACK[i].dialogTag));
     if (!closed) {
       return false;
     }

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

@@ -12,7 +12,7 @@ import {
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -47,9 +47,7 @@ import {
 } from "./const";
 import "./controls/more-info-default";
 import "./ha-more-info-history-and-logbook";
-import type { MoreInfoHistoryAndLogbook } from "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
-import type { MoreInfoInfo } from "./ha-more-info-info";
 import "./ha-more-info-settings";
 import "./more-info-content";
 
@@ -98,9 +96,6 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _infoEditMode = false;
 
-  @query("ha-more-info-info, ha-more-info-history-and-logbook")
-  private _history?: MoreInfoInfo | MoreInfoHistoryAndLogbook;
-
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
     if (!this._entityId) {
@@ -283,7 +278,6 @@ export class MoreInfoDialog extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        @opened=${this._handleOpened}
         .heading=${title}
         hideActions
         flexContent
@@ -533,10 +527,6 @@ export class MoreInfoDialog extends LitElement {
     this.large = !this.large;
   }
 
-  private _handleOpened() {
-    this._history?.resize({ aspectRatio: 2 });
-  }
-
   static get styles() {
     return [
       haStyleDialog,

src/dialogs/more-info/ha-more-info-history-and-logbook.ts

@@ -1,14 +1,12 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
+import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
 import {
   computeShowHistoryComponent,
   computeShowLogBookComponent,
 } from "./const";
 import "./ha-more-info-history";
-import type { MoreInfoHistory } from "./ha-more-info-history";
 import "./ha-more-info-logbook";
 
 @customElement("ha-more-info-history-and-logbook")
@@ -17,13 +15,6 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
 
   @property({ attribute: false }) public entityId!: string;
 
-  @query("ha-more-info-history")
-  private _history?: MoreInfoHistory;
-
-  public resize(options?: ChartResizeOptions) {
-    this._history?.resize(options);
-  }
-
   protected render() {
     return html`
       ${computeShowHistoryComponent(this.hass, this.entityId)

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

@@ -1,15 +1,12 @@
 import { startOfYesterday, subHours } from "date-fns";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { createSearchParam } from "../../common/url/search-params";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
-import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
 import "../../components/chart/statistics-chart";
-import type { StatisticsChart } from "../../components/chart/statistics-chart";
 import type { HistoryResult } from "../../data/history";
 import {
   computeHistory,
@@ -54,16 +51,6 @@ export class MoreInfoHistory extends LitElement {
 
   private _metadata?: Record<string, StatisticsMetaData>;
 
-  @query("statistics-chart, state-history-charts") private _chart?:
-    | StateHistoryCharts
-    | StatisticsChart;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    if (this._chart) {
-      this._chart.resize(options);
-    }
-  };
-
   protected render() {
     if (!this.entityId) {
       return nothing;

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

@@ -1,8 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
 import type { ExtEntityRegistryEntry } from "../../data/entity_registry";
 import type { HomeAssistant } from "../../types";
 import {
@@ -14,7 +13,6 @@ import {
   DOMAINS_WITH_MORE_INFO,
 } from "./const";
 import "./ha-more-info-history";
-import type { MoreInfoHistory } from "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import "./more-info-content";
 
@@ -28,13 +26,6 @@ export class MoreInfoInfo extends LitElement {
 
   @property({ attribute: false }) public editMode?: boolean;
 
-  @query("ha-more-info-history")
-  private _history?: MoreInfoHistory;
-
-  public resize(options?: ChartResizeOptions) {
-    this._history?.resize(options);
-  }
-
   protected render() {
     const entityId = this.entityId;
     const stateObj = this.hass.states[entityId] as HassEntity | undefined;

src/panels/config/backup/components/config/ha-backup-config-data.ts

@@ -209,7 +209,7 @@ class HaBackupConfigData extends LitElement {
                 </span>
                 <span slot="supporting-text">
                   ${this.hass.localize(
-                    "ui.panel.config.backup.data.history_description"
+                    "ui.panel.config.backup.data.media_description"
                   )}
                 </span>
                 <ha-switch

src/panels/config/backup/components/ha-backup-data-picker.ts

@@ -86,12 +86,6 @@ export class HaBackupDataPicker extends LitElement {
           version: data.homeassistant_version,
         });
       }
-      if (data.database_included) {
-        items.push({
-          label: "History",
-          id: "database",
-        });
-      }
       items.push(
         ...data.folders.map<CheckBoxItem>((folder) => ({
           label: this._localizeFolder(folder),
@@ -145,9 +139,6 @@ export class HaBackupDataPicker extends LitElement {
     if (value.homeassistant_included) {
       homeassistant.push("config");
     }
-    if (value.database_included) {
-      homeassistant.push("database");
-    }
 
     const folders = value.folders;
     homeassistant.push(...folders);
@@ -164,7 +155,9 @@ export class HaBackupDataPicker extends LitElement {
     (selectedItems: SelectedItems, data: BackupData): BackupData => ({
       homeassistant_version: data.homeassistant_version,
       homeassistant_included: selectedItems.homeassistant.includes("config"),
-      database_included: selectedItems.homeassistant.includes("database"),
+      database_included:
+        data.database_included &&
+        selectedItems.homeassistant.includes("config"),
       addons: data.addons.filter((addon) =>
         selectedItems.addons.includes(addon.slug)
       ),

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

@@ -109,7 +109,9 @@ export class DialogUploadBackup
           ></ha-file-upload>
         </div>
         <div slot="actions">
-          <ha-button @click=${this.closeDialog}>Cancel</ha-button>
+          <ha-button @click=${this.closeDialog}
+            >${this.hass.localize("ui.common.cancel")}</ha-button
+          >
           <ha-button @click=${this._upload} .disabled=${!this._formValid()}>
             ${this.hass.localize(
               "ui.panel.config.backup.dialogs.upload.action"

src/panels/lovelace/hui-root.ts

@@ -474,7 +474,8 @@ class HUIRoot extends LitElement {
           id="view"
           @ll-rebuild=${this._debouncedConfigChanged}
         >
-          <hui-view-background .background=${background}> </hui-view-background>
+          <hui-view-background .hass=${this.hass} .background=${background}>
+          </hui-view-background>
         </hui-view-container>
       </div>
     `;

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

@@ -55,7 +55,7 @@ export class HUIViewBackground extends LitElement {
       const alignment = background.alignment ?? "center";
       const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
-      return `${alignment} / ${size} ${repeat} url('${background.image}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(background.image)}')`;
     }
     if (typeof background === "string") {
       return background;

src/translations/en.json

@@ -2605,7 +2605,7 @@
               "protected_not_encrypted": "Not encrypted"
             },
             "restore": {
-              "title": "Selected what to restore",
+              "title": "Select what to restore",
               "action": "Restore"
             },
             "locations": {