Merge branch 'home-assistant:dev' into picture-elements-position

2025-06-13 08:30:58 +02:00 · 2025-06-13 08:30:58 +02:00 · 2472a901bb
parent a10e08980c cf41a43070
commit 2472a901bb
33 changed files with 1147 additions and 1087 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -108,9 +108,9 @@ body:
      render: yaml
  - type: textarea
    attributes:
-      label: Javascript errors shown in your browser console/inspector
+      label: JavaScript errors shown in your browser console/inspector
      description: >
-        If you come across any Javascript or other error logs, e.g., in your
+        If you come across any JavaScript or other error logs, e.g., in your
        browser console/inspector please provide them.
      render: txt
  - type: textarea
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1 +1 @@
-yarn run lint-staged --relative --shell "/bin/bash"
+yarn run lint-staged --relative
--- a/.yarn/releases/yarn-4.9.2.cjs
+++ b/.yarn/releases/yarn-4.9.2.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs
--- a/package.json
+++ b/package.json
@ -26,15 +26,15 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.27.3",
+    "@babel/runtime": "7.27.6",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.18.6",
    "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.0",
+    "@codemirror/language": "6.11.1",
    "@codemirror/legacy-modes": "6.5.1",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.37.0",
+    "@codemirror/view": "6.37.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@ -89,8 +89,8 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.8.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.7",
-    "@vaadin/vaadin-themable-mixin": "24.7.7",
+    "@vaadin/combo-box": "24.7.8",
+    "@vaadin/vaadin-themable-mixin": "24.7.8",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@ -99,7 +99,7 @@
    "barcode-detector": "3.0.4",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
-    "core-js": "3.42.0",
+    "core-js": "3.43.0",
    "cropperjs": "1.6.2",
    "date-fns": "4.1.0",
    "date-fns-tz": "3.2.0",
@ -111,7 +111,7 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.2",
+    "hls.js": "1.6.5",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@ -149,20 +149,20 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.27.3",
+    "@babel/core": "7.27.4",
    "@babel/helper-define-polyfill-provider": "0.6.4",
-    "@babel/plugin-transform-runtime": "7.27.3",
+    "@babel/plugin-transform-runtime": "7.27.4",
    "@babel/preset-env": "7.27.2",
-    "@bundle-stats/plugin-webpack-filter": "4.20.1",
+    "@bundle-stats/plugin-webpack-filter": "4.20.2",
    "@lokalise/node-api": "14.8.0",
    "@octokit/auth-oauth-device": "8.0.1",
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.1.2",
+    "@rsdoctor/rspack-plugin": "1.1.3",
    "@rspack/cli": "1.3.12",
    "@rspack/core": "1.3.12",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.21",
+    "@types/chromecast-caf-receiver": "6.0.22",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/glob": "8.1.0",
@ -179,12 +179,12 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.1.4",
+    "@vitest/coverage-v8": "3.2.3",
    "babel-loader": "10.0.0",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.27.0",
+    "eslint": "9.28.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "10.1.5",
    "eslint-import-resolver-webpack": "0.13.10",
@ -196,7 +196,7 @@
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.0",
    "glob": "11.0.2",
-    "gulp": "5.0.0",
+    "gulp": "5.0.1",
    "gulp-brotli": "3.0.0",
    "gulp-json-transform": "0.5.0",
    "gulp-rename": "2.0.0",
@ -204,7 +204,7 @@
    "husky": "9.1.7",
    "jsdom": "26.1.0",
    "jszip": "3.10.1",
-    "lint-staged": "15.5.2",
+    "lint-staged": "16.1.0",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@ -218,9 +218,9 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.8.3",
-    "typescript-eslint": "8.33.0",
+    "typescript-eslint": "8.33.1",
    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.4",
+    "vitest": "3.2.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"
@ -236,5 +236,5 @@
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
  },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.9.2"
 }
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@ -229,14 +229,20 @@ export class StateHistoryChartLine extends LitElement {
          minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
        }
      } else if (this.logarithmicScale) {
-        minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+        minYAxis = ({ min }) => {
+          const value = min > 0 ? min * 0.95 : min * 1.05;
+          return Math.abs(value) < 1 ? value : Math.floor(value);
+        };
      }
      if (typeof maxYAxis === "number") {
        if (this.fitYData) {
          maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
        }
      } else if (this.logarithmicScale) {
-        maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+        maxYAxis = ({ max }) => {
+          const value = max > 0 ? max * 1.05 : max * 0.95;
+          return Math.abs(value) < 1 ? value : Math.ceil(value);
+        };
      }
      this._chartOptions = {
        xAxis: {
@ -753,10 +759,10 @@ export class StateHistoryChartLine extends LitElement {
    if (this.logarithmicScale) {
      // log(0) is -Infinity, so we need to set a minimum value
      if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
      }
      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
      }
    }
    return value;
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@ -241,14 +241,20 @@ export class StatisticsChart extends LitElement {
        minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
      }
    } else if (this.logarithmicScale) {
-      minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+      minYAxis = ({ min }) => {
+        const value = min > 0 ? min * 0.95 : min * 1.05;
+        return Math.abs(value) < 1 ? value : Math.floor(value);
+      };
    }
    if (typeof maxYAxis === "number") {
      if (this.fitYData) {
        maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
      }
    } else if (this.logarithmicScale) {
-      maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+      maxYAxis = ({ max }) => {
+        const value = max > 0 ? max * 1.05 : max * 0.95;
+        return Math.abs(value) < 1 ? value : Math.ceil(value);
+      };
    }
    const endTime = this.endTime ?? new Date();
    let startTime = this.startTime;
@ -619,10 +625,10 @@ export class StatisticsChart extends LitElement {
    if (this.logarithmicScale) {
      // log(0) is -Infinity, so we need to set a minimum value
      if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
      }
      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
      }
    }
    return value;
--- a/src/components/ha-assist-chat.ts
+++ b/src/components/ha-assist-chat.ts
@ -509,7 +509,7 @@ export class HaAssistChat extends LitElement {
        this.requestUpdate("_conversation");
      },
      processEvent: (event: PipelineRunEvent) => {
-        if (event.type === "intent-progress") {
+        if (event.type === "intent-progress" && event.data.chat_log_delta) {
          const delta = event.data.chat_log_delta;

          // new message
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -345,8 +345,10 @@ export class HaComboBox extends LitElement {
      // @ts-ignore
      this._comboBox._closeOnBlurIsPrevented = true;
    }
+    if (!this.opened) {
+      return;
+    }
    const newValue = ev.detail.value;
-
    if (newValue !== this.value) {
      fireEvent(this, "value-changed", { value: newValue || undefined });
    }
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@ -626,12 +626,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {
      this._tooltipHideTimeout = undefined;
    }
    const tooltip = this._tooltip;
-    const listbox = this.shadowRoot!.querySelector("ha-md-list")!;
-    let top = item.offsetTop + 11;
-    if (listbox.contains(item)) {
-      top += listbox.offsetTop;
-      top -= listbox.scrollTop;
-    }
+    const allListbox = this.shadowRoot!.querySelectorAll("ha-md-list")!;
+    const listbox = [...allListbox].find((lb) => lb.contains(item));
+
+    const top =
+      item.offsetTop +
+      11 +
+      (listbox?.offsetTop ?? 0) -
+      (listbox?.scrollTop ?? 0);
+
    tooltip.innerText = (
      item.querySelector(".item-text") as HTMLElement
    ).innerText;
--- a/src/data/assist_pipeline.ts
+++ b/src/data/assist_pipeline.ts
@ -134,7 +134,8 @@ export interface ConversationChatLogToolResultDelta {
 interface PipelineIntentProgressEvent extends PipelineEventBase {
  type: "intent-progress";
  data: {
-    chat_log_delta:
+    tts_start_streaming?: boolean;
+    chat_log_delta?:
      | Partial<ConversationChatLogAssistantDelta>
      // These always come in 1 chunk
      | ConversationChatLogToolResultDelta;
--- a/src/data/automation_i18n.ts
+++ b/src/data/automation_i18n.ts
@ -26,6 +26,7 @@ import {
 import type { EntityRegistryEntry } from "./entity_registry";
 import type { FrontendLocaleData } from "./translation";
 import { isTriggerList } from "./trigger";
+import { hasTemplate } from "../common/string/has-template";

 const triggerTranslationBaseKey =
  "ui.panel.config.automation.editor.triggers.type";
@ -820,6 +821,12 @@ const tryDescribeCondition = (
  entityRegistry: EntityRegistryEntry[],
  ignoreAlias = false
 ) => {
+  if (typeof condition === "string" && hasTemplate(condition)) {
+    return hass.localize(
+      `${conditionsTranslationBaseKey}.template.description.full`
+    );
+  }
+
  if (condition.alias && !ignoreAlias) {
    return condition.alias;
  }
--- a/src/data/backup.ts
+++ b/src/data/backup.ts
@ -339,7 +339,7 @@ export const computeBackupSize = (backup: BackupContent) =>

 export type BackupType = "automatic" | "manual" | "addon_update";

-const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "manual", "addon_update"];
+const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "addon_update", "manual"];

 export const getBackupTypes = memoize((isHassio: boolean) =>
  isHassio
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@ -679,7 +679,9 @@ export const getEnergyDataCollection = (
  const period =
    preferredPeriod === "today" && hour === "0" ? "yesterday" : preferredPeriod;

-  [collection.start, collection.end] = calcDateRange(hass, period);
+  const [start, end] = calcDateRange(hass, period);
+  collection.start = calcDate(start, startOfDay, hass.locale, hass.config);
+  collection.end = calcDate(end, endOfDay, hass.locale, hass.config);

  const scheduleUpdatePeriod = () => {
    collection._updatePeriodTimeout = window.setTimeout(
--- a/src/data/script.ts
+++ b/src/data/script.ts
@ -29,6 +29,7 @@ import { migrateAutomationTrigger } from "./automation";
 import type { BlueprintInput } from "./blueprint";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { createSearchParam } from "../common/url/search-params";
+import { hasTemplate } from "../common/string/has-template";

 export const MODES = ["single", "restart", "queued", "parallel"] as const;
 export const MODES_MAX = ["queued", "parallel"] as const;
@ -339,6 +340,9 @@ export const getScriptEditorInitData = () => {

 export const getActionType = (action: Action): ActionType => {
  // Check based on config_validation.py#determine_script_action
+  if (typeof action === "string" && hasTemplate(action)) {
+    return "check_condition";
+  }
  if ("delay" in action) {
    return "delay";
  }
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@ -18,6 +18,7 @@ import "./integration-badge";
 import { onBoardingStyles } from "./styles";

 const HIDDEN_DOMAINS = new Set([
+  "backup",
  "google_translate",
  "hassio",
  "met",
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@ -233,6 +233,8 @@ export class CloudLogin extends LitElement {
              text: this.hass.localize(
                "ui.panel.config.cloud.login.cloud_pipeline_text"
              ),
+              confirmText: this.hass.localize("ui.common.yes"),
+              dismissText: this.hass.localize("ui.common.no"),
            })
          ) {
            setAssistPipelinePreferred(this.hass, result.cloud_pipeline);
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@ -127,16 +127,15 @@ export class HaConfigDevicePage extends LitElement {

  @state() private _related?: RelatedResult;

-  // If a number, it's the request ID so we make sure we don't show older info
-  @state() private _diagnosticDownloadLinks?: number | DeviceAction[];
+  @state() private _diagnosticDownloadLinks: DeviceAction[] = [];

-  @state() private _deleteButtons?: DeviceAction[];
+  @state() private _deleteButtons: DeviceAction[] = [];

-  @state() private _deviceActions?: DeviceAction[];
+  @state() private _deviceActions: DeviceAction[] = [];

-  @state() private _deviceAlerts?: DeviceAlert[];
+  @state() private _deviceAlerts: DeviceAlert[] = [];

-  private _deviceAlertsTimeout?: number;
+  private _deviceAlertsActionsTimeout?: number;

  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
@ -255,42 +254,19 @@ export class HaConfigDevicePage extends LitElement {
  public willUpdate(changedProps) {
    super.willUpdate(changedProps);

-    if (
-      changedProps.has("deviceId") ||
-      changedProps.has("devices") ||
-      changedProps.has("entries")
-    ) {
-      this._diagnosticDownloadLinks = undefined;
-      this._deleteButtons = undefined;
-      this._deviceActions = undefined;
-      this._deviceAlerts = undefined;
+    if (changedProps.has("deviceId") || changedProps.has("entries")) {
+      this._deviceActions = [];
+      this._deviceAlerts = [];
+      this._deleteButtons = [];
+      this._diagnosticDownloadLinks = [];
+      this._fetchData();
    }
-
-    if (
-      (this._diagnosticDownloadLinks &&
-        this._deleteButtons &&
-        this._deviceActions &&
-        this._deviceAlerts) ||
-      !this.deviceId ||
-      !this.entries
-    ) {
-      return;
-    }
-
-    this._diagnosticDownloadLinks = Math.random();
-    this._deleteButtons = []; // To prevent re-rendering if no delete buttons
-    this._deviceActions = [];
-    this._deviceAlerts = [];
-    this._getDiagnosticButtons(this._diagnosticDownloadLinks);
-    this._getDeleteActions();
-    this._getDeviceActions();
-    clearTimeout(this._deviceAlertsTimeout);
-    this._getDeviceAlerts();
  }

  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    loadDeviceRegistryDetailDialog();
+    this._fetchData();
  }

  protected updated(changedProps) {
@ -302,7 +278,7 @@ export class HaConfigDevicePage extends LitElement {

  public disconnectedCallback() {
    super.disconnectedCallback();
-    clearTimeout(this._deviceAlertsTimeout);
+    clearTimeout(this._deviceAlertsActionsTimeout);
  }

  protected render() {
@ -909,7 +885,18 @@ export class HaConfigDevicePage extends LitElement {
    </hass-subpage>`;
  }

-  private async _getDiagnosticButtons(requestId: number): Promise<void> {
+  private _fetchData() {
+    if (this.deviceId && this.entries.length) {
+      this._getDiagnosticButtons();
+      this._getDeleteActions();
+      clearTimeout(this._deviceAlertsActionsTimeout);
+      this._getDeviceActions();
+      this._getDeviceAlerts();
+    }
+  }
+
+  private async _getDiagnosticButtons(): Promise<void> {
+    const deviceId = this.deviceId;
    if (!isComponentLoaded(this.hass, "diagnostics")) {
      return;
    }
@ -951,7 +938,8 @@ export class HaConfigDevicePage extends LitElement {

    links = links.filter(Boolean);

-    if (this._diagnosticDownloadLinks !== requestId) {
+    if (this.deviceId !== deviceId) {
+      // abort if the device has changed
      return;
    }
    if (links.length > 0) {
@ -1176,12 +1164,12 @@ export class HaConfigDevicePage extends LitElement {
      deviceAlerts.push(...alerts);
    }

+    this._deviceAlerts = deviceAlerts;
    if (deviceAlerts.length) {
-      this._deviceAlerts = deviceAlerts;
-      this._deviceAlertsTimeout = window.setTimeout(
-        () => this._getDeviceAlerts(),
-        DEVICE_ALERTS_INTERVAL
-      );
+      this._deviceAlertsActionsTimeout = window.setTimeout(() => {
+        this._getDeviceAlerts();
+        this._getDeviceActions();
+      }, DEVICE_ALERTS_INTERVAL);
    }
  }

--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@ -163,6 +163,7 @@ export class HaIntegrationCard extends LitElement {
                  : "custom"}"
              >
                <ha-tooltip
+                  hoist
                  .placement=${computeRTL(this.hass) ? "right" : "left"}
                  .content=${this.hass.localize(
                    this.manifest.overwrites_built_in
@ -177,6 +178,7 @@ export class HaIntegrationCard extends LitElement {
          ${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
            ? html`<div class="icon cloud">
                <ha-tooltip
+                  hoist
                  .placement=${computeRTL(this.hass) ? "right" : "left"}
                  .content=${this.hass.localize(
                    "ui.panel.config.integrations.config_entry.depends_on_cloud"
@ -191,6 +193,7 @@ export class HaIntegrationCard extends LitElement {
          !this.items.every((itm) => itm.source === "system")
            ? html`<div class="icon yaml">
                <ha-tooltip
+                  hoist
                  .placement=${computeRTL(this.hass) ? "right" : "left"}
                  .content=${this.hass.localize(
                    "ui.panel.config.integrations.config_entry.no_config_flow"
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@ -429,7 +429,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
              </ha-card>
              <ha-card>
                <div class="card-header">
-                  <h1>Third-Party Data Reporting</h1>
+                  <h1>Third-party data reporting</h1>
                  ${this._dataCollectionOptIn !== undefined
                    ? html`
                        <ha-switch
--- a/src/panels/energy/strategies/energy-view-strategy.ts
+++ b/src/panels/energy/strategies/energy-view-strategy.ts
@ -64,7 +64,9 @@ export class EnergyViewStrategy extends ReactiveElement {
      (source) => source.type === "solar"
    );
    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
-
+    const hasBattery = prefs.energy_sources.some(
+      (source) => source.type === "battery"
+    );
    const hasWater = prefs.energy_sources.some(
      (source) => source.type === "water"
    );
@ -74,8 +76,8 @@ export class EnergyViewStrategy extends ReactiveElement {
      collection_key: "energy_dashboard",
    });

-    // Only include if we have a grid source.
-    if (hasGrid) {
+    // Only include if we have a grid or battery.
+    if (hasGrid || hasBattery) {
      view.cards!.push({
        title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
        type: "energy-usage-graph",
@ -110,8 +112,8 @@ export class EnergyViewStrategy extends ReactiveElement {
      });
    }

-    // Only include if we have a grid.
-    if (hasGrid) {
+    // Only include if we have a grid or battery.
+    if (hasGrid || hasBattery) {
      view.cards!.push({
        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
        type: "energy-distribution",
@ -120,7 +122,7 @@ export class EnergyViewStrategy extends ReactiveElement {
      });
    }

-    if (hasGrid || hasSolar || hasGas || hasWater) {
+    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
      view.cards!.push({
        title: hass.localize(
          "ui.panel.energy.cards.energy_sources_table_title"
--- a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
+++ b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts
@ -10,6 +10,8 @@ import {
  addYears,
  addMonths,
  addHours,
+  startOfDay,
+  addDays,
 } from "date-fns";
 import type {
  BarSeriesOption,
@ -282,6 +284,10 @@ export function getCompareTransform(start: Date, compareStart?: Date) {
  ) {
    return (ts: Date) => addMonths(ts, compareMonthDiff);
  }
+  const compareDayDiff = differenceInDays(start, compareStart);
+  if (compareDayDiff !== 0 && start.getTime() === startOfDay(start).getTime()) {
+    return (ts: Date) => addDays(ts, compareDayDiff);
+  }
  const compareOffset = start.getTime() - compareStart.getTime();
  return (ts: Date) => addMilliseconds(ts, compareOffset);
 }
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@ -102,14 +102,13 @@ class HuiEnergyDistrubutionCard
    const prefs = this._data.prefs;
    const types = energySourcesByType(prefs);

-    // The strategy only includes this card if we have a grid.
-    const hasConsumption = true;
-
+    const hasGrid =
+      !!types.grid?.[0].flow_from.length || !!types.grid?.[0].flow_to.length;
    const hasSolarProduction = types.solar !== undefined;
    const hasBattery = types.battery !== undefined;
    const hasGas = types.gas !== undefined;
    const hasWater = types.water !== undefined;
-    const hasReturnToGrid = hasConsumption && types.grid![0].flow_to.length > 0;
+    const hasReturnToGrid = !!types.grid?.[0].flow_to.length;

    const { summedData, compareSummedData: _ } = getSummedData(this._data);
    const { consumption, compareConsumption: __ } = computeConsumptionData(
@ -163,14 +162,14 @@ class HuiEnergyDistrubutionCard
    }
    let batteryFromGrid: null | number = null;
    let batteryToGrid: null | number = null;
-    if (hasBattery) {
+    if (hasBattery && hasGrid) {
      batteryToGrid = consumption.total.battery_to_grid;
      batteryFromGrid = consumption.total.grid_to_battery;
    }

    let solarToBattery: null | number = null;
    let solarToGrid: null | number = null;
-    if (hasSolarProduction) {
+    if (hasSolarProduction && hasGrid) {
      solarToGrid = consumption.total.solar_to_grid;
    }
    if (hasSolarProduction && hasBattery) {
@ -182,7 +181,9 @@ class HuiEnergyDistrubutionCard
      batteryConsumption = Math.max(consumption.total.used_battery, 0);
    }

-    const gridConsumption = Math.max(consumption.total.used_grid, 0);
+    const gridConsumption = hasGrid
+      ? Math.max(consumption.total.used_grid, 0)
+      : 0;

    const totalHomeConsumption = Math.max(0, consumption.total.used_total);

@ -206,7 +207,11 @@ class HuiEnergyDistrubutionCard
    // This fallback is used in the demo
    let electricityMapUrl = "https://app.electricitymap.org";

-    if (this._data.co2SignalEntity && this._data.fossilEnergyConsumption) {
+    if (
+      hasGrid &&
+      this._data.co2SignalEntity &&
+      this._data.fossilEnergyConsumption
+    ) {
      // Calculate high carbon consumption
      const highCarbonEnergy = Object.values(
        this._data.fossilEnergyConsumption
@ -225,7 +230,7 @@ class HuiEnergyDistrubutionCard
        if (gridConsumption !== totalFromGrid) {
          // Only get the part that was used for consumption and not the battery
          highCarbonConsumption =
-            highCarbonEnergy * (gridConsumption / totalFromGrid);
+            highCarbonEnergy * (gridConsumption! / totalFromGrid);
        } else {
          highCarbonConsumption = highCarbonEnergy;
        }
@ -378,41 +383,43 @@ class HuiEnergyDistrubutionCard
              </div>`
            : ""}
          <div class="row">
-            <div class="circle-container grid">
-              <div class="circle">
-                <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
-                ${returnedToGrid !== null
-                  ? html`<span class="return">
-                      <ha-svg-icon
-                        class="small"
-                        .path=${mdiArrowLeft}
-                      ></ha-svg-icon
-                      >${formatConsumptionShort(
+            ${hasGrid
+              ? html`<div class="circle-container grid">
+                  <div class="circle">
+                    <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
+                    ${returnedToGrid !== null
+                      ? html`<span class="return">
+                          <ha-svg-icon
+                            class="small"
+                            .path=${mdiArrowLeft}
+                          ></ha-svg-icon
+                          >${formatConsumptionShort(
+                            this.hass,
+                            returnedToGrid,
+                            "kWh"
+                          )}
+                        </span>`
+                      : ""}
+                    <span class="consumption">
+                      ${hasReturnToGrid
+                        ? html`<ha-svg-icon
+                            class="small"
+                            .path=${mdiArrowRight}
+                          ></ha-svg-icon>`
+                        : ""}${formatConsumptionShort(
                        this.hass,
-                        returnedToGrid,
+                        totalFromGrid,
                        "kWh"
                      )}
-                    </span>`
-                  : ""}
-                <span class="consumption">
-                  ${hasReturnToGrid
-                    ? html`<ha-svg-icon
-                        class="small"
-                        .path=${mdiArrowRight}
-                      ></ha-svg-icon>`
-                    : ""}${formatConsumptionShort(
-                    this.hass,
-                    totalFromGrid,
-                    "kWh"
-                  )}
-                </span>
-              </div>
-              <span class="label"
-                >${this.hass.localize(
-                  "ui.panel.lovelace.cards.energy.energy_distribution.grid"
-                )}</span
-              >
-            </div>
+                    </span>
+                  </div>
+                  <span class="label"
+                    >${this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.energy_distribution.grid"
+                    )}</span
+                  >
+                </div> `
+              : html`<div class="grid-spacer"></div>`}
            <div class="circle-container home">
              <div
                class="circle ${classMap({
@ -480,22 +487,27 @@ class HuiEnergyDistrubutionCard
                            shape-rendering="geometricPrecision"
                          />`
                        : ""}
-                      <circle
+                      ${hasGrid
+                        ? svg`<circle
                        class="grid"
                        cx="40"
                        cy="40"
                        r="38"
-                        stroke-dasharray="${homeHighCarbonCircumference ??
-                        CIRCLE_CIRCUMFERENCE -
-                          homeSolarCircumference! -
-                          (homeBatteryCircumference ||
-                            0)} ${homeHighCarbonCircumference !== undefined
-                          ? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
-                          : homeSolarCircumference! +
-                            (homeBatteryCircumference || 0)}"
+                        stroke-dasharray="${
+                          homeHighCarbonCircumference ??
+                          CIRCLE_CIRCUMFERENCE -
+                            homeSolarCircumference! -
+                            (homeBatteryCircumference || 0)
+                        } ${
+                          homeHighCarbonCircumference !== undefined
+                            ? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
+                            : homeSolarCircumference! +
+                              (homeBatteryCircumference || 0)
+                        }"
                        stroke-dashoffset="0"
                        shape-rendering="geometricPrecision"
-                      />
+                      />`
+                        : nothing}
                    </svg>`
                  : ""}
              </div>
@ -619,15 +631,19 @@ class HuiEnergyDistrubutionCard
                    d="M55,100 v-15 c0,-35 10,-30 30,-30 h20"
                    vector-effect="non-scaling-stroke"
                  ></path>
-                  <path
-                    id="battery-grid"
-                    class=${classMap({
-                      "battery-from-grid": Boolean(batteryFromGrid),
-                      "battery-to-grid": Boolean(batteryToGrid),
-                    })}
-                    d="M45,100 v-15 c0,-35 -10,-30 -30,-30 h-20"
-                    vector-effect="non-scaling-stroke"
-                  ></path>
+                  ${
+                    hasGrid
+                      ? svg`<path
+                          id="battery-grid"
+                          class=${classMap({
+                            "battery-from-grid": Boolean(batteryFromGrid),
+                            "battery-to-grid": Boolean(batteryToGrid),
+                          })}
+                          d="M45,100 v-15 c0,-35 -10,-30 -30,-30 h-20"
+                          vector-effect="non-scaling-stroke"
+                        ></path>`
+                      : nothing
+                  }
                  `
                : ""}
              ${hasBattery && hasSolarProduction
@ -638,12 +654,14 @@ class HuiEnergyDistrubutionCard
                    vector-effect="non-scaling-stroke"
                  ></path>`
                : ""}
-              <path
-                class="grid"
-                id="grid"
-                d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
-                vector-effect="non-scaling-stroke"
-              ></path>
+              ${hasGrid
+                ? svg`<path
+                    class="grid"
+                    id="grid"
+                    d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
+                    vector-effect="non-scaling-stroke"
+              ></path>`
+                : nothing}
              ${solarToGrid && this._animate
                ? svg`<circle
                    r="1"
@ -839,6 +857,10 @@ class HuiEnergyDistrubutionCard
    .spacer {
      width: 84px;
    }
+    .grid-spacer {
+      width: 84px;
+      height: 100px;
+    }
    .circle {
      width: 80px;
      height: 80px;
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@ -418,12 +418,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {

    .keypad {
      --keypad-columns: 3;
-      margin-top: 12px;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(var(--keypad-columns), auto);
      grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: 16px;
      justify-items: center;
      align-items: center;
    }
--- a/src/panels/lovelace/cards/hui-card.ts
+++ b/src/panels/lovelace/cards/hui-card.ts
@ -12,7 +12,8 @@ import {
  attachConditionMediaQueriesListeners,
  checkConditionsMet,
 } from "../common/validate-condition";
-import { createCardElement } from "../create-element/create-card-element";
+import { tryCreateCardElement } from "../create-element/create-card-element";
+import { createErrorCardElement } from "../create-element/create-element-base";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";

 declare global {
@ -71,10 +72,23 @@ export class HuiCard extends ReactiveElement {
  public getGridOptions(): LovelaceGridOptions {
    const elementOptions = this.getElementGridOptions();
    const configOptions = this.getConfigGridOptions();
-    return {
+    const mergedConfig = {
      ...elementOptions,
      ...configOptions,
    };
+
+    // If the element has fixed rows or columns, we use the values from the element
+    if (elementOptions.fixed_rows) {
+      mergedConfig.rows = elementOptions.rows;
+      delete mergedConfig.min_rows;
+      delete mergedConfig.max_rows;
+    }
+    if (elementOptions.fixed_columns) {
+      mergedConfig.columns = elementOptions.columns;
+      delete mergedConfig.min_columns;
+      delete mergedConfig.max_columns;
+    }
+    return mergedConfig;
  }

  // options provided by the element
@ -82,7 +96,9 @@ export class HuiCard extends ReactiveElement {
    if (!this._element) return {};

    if (this._element.getGridOptions) {
-      return this._element.getGridOptions();
+      const options = this._element.getGridOptions();
+      // Some custom cards might return undefined, so we ensure we return an object
+      return options || {};
    }
    if (this._element.getLayoutOptions) {
      // Disabled for now to avoid spamming the console, need to be re-enabled when hui-card performance are fixed
@ -119,7 +135,15 @@ export class HuiCard extends ReactiveElement {
  }

  private _loadElement(config: LovelaceCardConfig) {
-    this._element = createCardElement(config);
+    try {
+      this._element = tryCreateCardElement(config);
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : undefined;
+      this._element = createErrorCardElement({
+        type: "error",
+        message: errorMessage,
+      });
+    }
    this._elementConfig = config;
    if (this.hass) {
      this._element.hass = this.hass;
@ -200,6 +224,7 @@ export class HuiCard extends ReactiveElement {
          this._element.preview = this.preview;
          // For backwards compatibility
          (this._element as any).editMode = this.preview;
+          fireEvent(this, "card-updated");
        } catch (e: any) {
          // eslint-disable-next-line no-console
          console.error(this.config?.type, e);
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@ -1,11 +1,11 @@
+import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
+import "../../../components/ha-card";
+import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
 import type { ErrorCardConfig } from "./types";
-import "../../../components/ha-card";
-import "../../../components/ha-svg-icon";

 const ERROR_ICONS = {
  warning: mdiAlertOutline,
@ -30,9 +30,10 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
  public getGridOptions(): LovelaceGridOptions {
    return {
      columns: 6,
-      rows: 1,
+      rows: this.preview ? "auto" : 1,
      min_rows: 1,
      min_columns: 6,
+      fixed_rows: this.preview,
    };
  }

@ -45,17 +46,24 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
    const error =
      this._config?.error ||
      this.hass?.localize("ui.errors.config.configuration_error");
-    const showTitle = this.hass === undefined || this.hass?.user?.is_admin;
+    const showTitle =
+      this.hass === undefined || this.hass?.user?.is_admin || this.preview;
+    const showMessage = this.preview;

    return html`
      <ha-card class="${this.severity} ${showTitle ? "" : "no-title"}">
-        <div class="icon">
-          <slot name="icon">
-            <ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
-          </slot>
+        <div class="header">
+          <div class="icon">
+            <slot name="icon">
+              <ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
+            </slot>
+          </div>
+          ${showTitle
+            ? html`<div class="title"><slot>${error}</slot></div>`
+            : nothing}
        </div>
-        ${showTitle
-          ? html`<div class="title"><slot>${error}</slot></div>`
+        ${showMessage && this._config?.message
+          ? html`<div class="message">${this._config.message}</div>`
          : nothing}
      </ha-card>
    `;
@ -65,10 +73,6 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
    ha-card {
      height: 100%;
      border-width: 0;
-      display: flex;
-      align-items: center;
-      column-gap: 16px;
-      padding: 16px;
    }
    ha-card::after {
      position: absolute;
@ -81,6 +85,15 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
      content: "";
      border-radius: var(--ha-card-border-radius, 12px);
    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px;
+    }
+    .message {
+      padding: 0 16px 16px 16px;
+    }
    .no-title {
      justify-content: center;
    }
@ -90,13 +103,13 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
      text-overflow: ellipsis;
      font-weight: var(--ha-font-weight-bold);
    }
-    ha-card.warning > .icon {
+    ha-card.warning .icon {
      color: var(--warning-color);
    }
    ha-card.warning::after {
      background-color: var(--warning-color);
    }
-    ha-card.error > .icon {
+    ha-card.error .icon {
      color: var(--error-color);
    }
    ha-card.error::after {
--- a/src/panels/lovelace/components/hui-badge-edit-mode.ts
+++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts
@ -85,7 +85,7 @@ export class HuiBadgeEditMode extends LitElement {
      if (this._touchStarted) return;
      this._hover = true;
    });
-    this.addEventListener("mouseout", () => {
+    this.addEventListener("mouseleave", () => {
      this._hover = false;
    });
    this.addEventListener("click", () => {
--- a/src/panels/lovelace/components/hui-card-edit-mode.ts
+++ b/src/panels/lovelace/components/hui-card-edit-mode.ts
@ -71,7 +71,7 @@ export class HuiCardEditMode extends LitElement {
      if (this._touchStarted) return;
      this._hover = true;
    });
-    this.addEventListener("mouseout", () => {
+    this.addEventListener("mouseleave", () => {
      this._hover = false;
    });
    this.addEventListener("click", () => {
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@ -297,24 +297,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
  }

  private _dateRangeChanged(ev) {
-    const weekStartsOn = firstWeekdayIndex(this.hass.locale);
    this._startDate = calcDate(
      ev.detail.value.startDate,
      startOfDay,
      this.hass.locale,
-      this.hass.config,
-      {
-        weekStartsOn,
-      }
+      this.hass.config
    );
    this._endDate = calcDate(
      ev.detail.value.endDate,
      endOfDay,
      this.hass.locale,
-      this.hass.config,
-      {
-        weekStartsOn,
-      }
+      this.hass.config
    );

    this._updateCollectionPeriod();
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@ -57,6 +57,7 @@ import {
  showAlertDialog,
  showConfirmationDialog,
 } from "../../dialogs/generic/show-dialog-box";
+import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
 import {
  QuickBarMode,
  showQuickBar,
@ -75,9 +76,9 @@ import { getLovelaceStrategy } from "./strategies/get-strategy";
 import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
 import type { Lovelace } from "./types";
 import "./views/hui-view";
-import "./views/hui-view-container";
 import type { HUIView } from "./views/hui-view";
 import "./views/hui-view-background";
+import "./views/hui-view-container";

@customElement("hui-root")
 class HUIRoot extends LitElement {
@ -490,7 +491,16 @@ class HUIRoot extends LitElement {
    } else if (searchParams.conversation === "1") {
      this._clearParam("conversation");
      this._showVoiceCommandDialog();
+    } else if (searchParams["more-info-entity-id"]) {
+      const entityId = searchParams["more-info-entity-id"];
+      this._clearParam("more-info-entity-id");
+      // Wait for the next render to ensure the view is fully loaded
+      // because the more info dialog is closed when the url changes
+      afterNextRender(() => {
+        this._showMoreInfoDialog(entityId);
+      });
    }
+
    window.addEventListener("scroll", this._handleWindowScroll, {
      passive: true,
    });
@ -730,6 +740,10 @@ class HUIRoot extends LitElement {
    showVoiceCommandDialog(this, this.hass, { pipeline_id: "last_used" });
  }

+  private _showMoreInfoDialog(entityId: string): void {
+    showMoreInfoDialog(this, { entityId });
+  }
+
  private _handleEnableEditMode(ev: CustomEvent<RequestSelectedDetail>): void {
    if (!shouldHandleRequestSelectedEvent(ev)) {
      return;
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@ -62,6 +62,8 @@ export interface LovelaceGridOptions {
  min_columns?: number;
  min_rows?: number;
  max_rows?: number;
+  fixed_rows?: boolean;
+  fixed_columns?: boolean;
 }

 export interface LovelaceCard extends HTMLElement {
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -5807,8 +5807,8 @@
            "provisioned_devices": "Provisioned devices",
            "not_ready": "{count} not ready",
            "nvm_backup": {
-              "title": "Backup and Restore",
-              "description": "Back up or restore your Z-Wave controller's Non-Volatile Memory (NVM). The NVM contains your network information including paired devices. It's recommended to create a backup before making any major changes to your Z-Wave network.",
+              "title": "Backup and restore",
+              "description": "Back up or restore your Z-Wave controller's non-volatile memory (NVM). The NVM contains your network information including paired devices. It's recommended to create a backup before making any major changes to your Z-Wave network.",
              "download_backup": "Download backup",
              "restore_backup": "Restore from backup",
              "backup_failed": "Failed to download backup",
@ -6013,9 +6013,9 @@
            "default": "Default"
          },
          "network_status": {
-            "connected": "Connected",
-            "connecting": "Connecting",
-            "unknown": "Unknown"
+            "connected": "status: connected",
+            "connecting": "status: connecting",
+            "unknown": "status: unknown"
          },
          "add_node": {
            "title": "Add a Z-Wave device",
--- a/yarn.lock
+++ b/yarn.lock