Set climate as toggle domain

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

.devcontainer/devcontainer.json

@@ -11,6 +11,9 @@
     "DEV_CONTAINER": "1",
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
+  "remoteEnv": {
+    "NODE_OPTIONS": "--max_old_space_size=8192"
+  },
   "customizations": {
     "vscode": {
       "extensions": [

hassio/src/components/hassio-filter-addons.ts

@@ -1,8 +1,6 @@
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
-import { stripDiacritics } from "../../../src/common/string/strip-diacritics";
 import type { StoreAddon } from "../../../src/data/supervisor/store";
-import { getStripDiacriticsFn } from "../../../src/util/fuse";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
   const options: IFuseOptions<StoreAddon> = {
@@ -10,8 +8,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
     isCaseSensitive: false,
     minMatchCharLength: Math.min(filter.length, 2),
     threshold: 0.2,
-    getFn: getStripDiacriticsFn,
+    ignoreDiacritics: true,
   };
   const fuse = new Fuse(addons, options);
-  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
+  return fuse.search(filter).map((result) => result.item);
 }

package.json

@@ -33,7 +33,7 @@
     "@codemirror/language": "6.10.8",
     "@codemirror/legacy-modes": "6.4.2",
     "@codemirror/search": "6.5.8",
-    "@codemirror/state": "6.5.1",
+    "@codemirror/state": "6.5.2",
     "@codemirror/view": "6.36.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.17.2",
@@ -91,14 +91,14 @@
     "@polymer/polymer": "3.5.2",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.6.2",
-    "@vaadin/vaadin-themable-mixin": "24.6.2",
+    "@vaadin/combo-box": "24.6.3",
+    "@vaadin/vaadin-themable-mixin": "24.6.3",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "2.3.1",
+    "barcode-detector": "3.0.0",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
     "core-js": "3.40.0",
@@ -110,7 +110,7 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "5.6.0",
     "element-internals-polyfill": "1.3.13",
-    "fuse.js": "7.0.0",
+    "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
     "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
@@ -137,7 +137,7 @@
     "tinykeys": "3.0.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "2.0.0",
+    "ua-parser-js": "2.0.1",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
     "vue": "2.7.16",
@@ -167,7 +167,7 @@
     "@rspack/cli": "1.2.2",
     "@rspack/core": "1.2.2",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.20",
+    "@types/chromecast-caf-receiver": "6.0.21",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/glob": "8.1.0",
@@ -183,9 +183,9 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "8.21.0",
-    "@typescript-eslint/parser": "8.21.0",
-    "@vitest/coverage-v8": "3.0.4",
+    "@typescript-eslint/eslint-plugin": "8.23.0",
+    "@typescript-eslint/parser": "8.23.0",
+    "@vitest/coverage-v8": "3.0.5",
     "babel-loader": "9.2.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,12 +219,13 @@
     "pinst": "3.0.0",
     "prettier": "3.4.2",
     "rspack-manifest-plugin": "5.0.3",
+    "serve": "14.2.4",
     "sinon": "19.0.2",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.11",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.7.3",
-    "vitest": "3.0.4",
+    "vitest": "3.0.5",
     "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"

pyproject.toml

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

script/develop_and_serve

@@ -64,7 +64,7 @@ echo Core is used from ${coreUrl}
 HASS_URL="$coreUrl" ./script/develop &
 
 # serve the frontend
-yarn dlx serve -l $frontendPort ./hass_frontend -s &
+./node_modules/.bin/serve -p $frontendPort --single --no-port-switching --config ../script/serve-config.json ./hass_frontend &
 
 # keep the script running while serving
 wait

script/serve-config.json

@@ -0,0 +1,3 @@
+{
+  "cleanUrls": false
+}

src/common/color/colors.ts

@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";
 
 export const COLORS = [
@@ -74,3 +75,12 @@ export function getGraphColorByIndex(
     getColorByIndex(index);
   return theme2hex(themeColor);
 }
+
+export const getAllGraphColors = memoizeOne(
+  (style: CSSStyleDeclaration) =>
+    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
+  (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
+    // this is not ideal, but we need to memoize the colors
+    newArgs[0].getPropertyValue("--graph-color-1") ===
+    lastArgs[0].getPropertyValue("--graph-color-1")
+);

src/common/const.ts

@@ -99,6 +99,7 @@ export const DOMAINS_TOGGLE = new Set([
   "switch",
   "group",
   "automation",
+  "climate",
   "humidifier",
   "valve",
 ]);

src/components/chart/axis-label.ts

@@ -1,5 +1,4 @@
 import type { HassConfig } from "home-assistant-js-websocket";
-import type { XAXisOption } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../data/translation";
 import {
   formatDateMonth,
@@ -7,56 +6,46 @@ import {
   formatDateVeryShort,
   formatDateWeekdayShort,
 } from "../../common/datetime/format_date";
-import { formatTime } from "../../common/datetime/format_time";
+import {
+  formatTime,
+  formatTimeWithSeconds,
+} from "../../common/datetime/format_time";
 
-export function getLabelFormatter(
+export function formatTimeLabel(
+  value: number | Date,
   locale: FrontendLocaleData,
   config: HassConfig,
-  dayDifference = 0
+  minutesDifference: number
 ) {
-  return (value: number | Date) => {
-    const date = new Date(value);
-    if (dayDifference > 88) {
-      return date.getMonth() === 0
-        ? `{bold|${formatDateMonthYear(date, locale, config)}}`
-        : formatDateMonth(date, locale, config);
-    }
-    if (dayDifference > 35) {
-      return date.getDate() === 1
-        ? `{bold|${formatDateVeryShort(date, locale, config)}}`
-        : formatDateVeryShort(date, locale, config);
-    }
-    if (dayDifference > 7) {
-      const label = formatDateVeryShort(date, locale, config);
-      return date.getDate() === 1 ? `{bold|${label}}` : label;
-    }
-    if (dayDifference > 2) {
-      return formatDateWeekdayShort(date, locale, config);
-    }
+  const dayDifference = minutesDifference / 60 / 24;
+  const date = new Date(value);
+  if (dayDifference > 88) {
+    return date.getMonth() === 0
+      ? `{bold|${formatDateMonthYear(date, locale, config)}}`
+      : formatDateMonth(date, locale, config);
+  }
+  if (dayDifference > 35) {
+    return date.getDate() === 1
+      ? `{bold|${formatDateVeryShort(date, locale, config)}}`
+      : formatDateVeryShort(date, locale, config);
+  }
+  if (dayDifference > 7) {
+    const label = formatDateVeryShort(date, locale, config);
+    return date.getDate() === 1 ? `{bold|${label}}` : label;
+  }
+  if (dayDifference > 2) {
+    return formatDateWeekdayShort(date, locale, config);
+  }
+  if (minutesDifference && minutesDifference < 5) {
+    return formatTimeWithSeconds(date, locale, config);
+  }
+  if (
+    date.getHours() === 0 &&
+    date.getMinutes() === 0 &&
+    date.getSeconds() === 0
+  ) {
     // show only date for the beginning of the day
-    if (
-      date.getHours() === 0 &&
-      date.getMinutes() === 0 &&
-      date.getSeconds() === 0
-    ) {
-      return `{bold|${formatDateVeryShort(date, locale, config)}}`;
-    }
-    return formatTime(date, locale, config);
-  };
-}
-
-export function getTimeAxisLabelConfig(
-  locale: FrontendLocaleData,
-  config: HassConfig,
-  dayDifference?: number
-): XAXisOption["axisLabel"] {
-  return {
-    formatter: getLabelFormatter(locale, config, dayDifference),
-    rich: {
-      bold: {
-        fontWeight: "bold",
-      },
-    },
-    hideOverlap: true,
-  };
+    return `{bold|${formatDateVeryShort(date, locale, config)}}`;
+  }
+  return formatTime(date, locale, config);
 }

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

@@ -1,25 +1,29 @@
-import type { PropertyValues } from "lit";
-import { css, html, nothing, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import { mdiRestart } from "@mdi/js";
-import type { EChartsType } from "echarts/core";
-import type { DataZoomComponentOption } from "echarts/components";
+import { consume } from "@lit-labs/context";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
+import { mdiRestart } from "@mdi/js";
+import { differenceInMinutes } from "date-fns";
+import type { DataZoomComponentOption } from "echarts/components";
+import type { EChartsType } from "echarts/core";
 import type {
   ECElementEvent,
   XAXisOption,
   YAXisOption,
 } from "echarts/types/dist/shared";
-import { consume } from "@lit-labs/context";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import { getAllGraphColors } from "../../common/color/colors";
 import { fireEvent } from "../../common/dom/fire_event";
+import { listenMediaQuery } from "../../common/dom/media_query";
+import { themesContext } from "../../data/context";
+import type { Themes } from "../../data/ws-themes";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../ha-icon-button";
-import type { ECOption } from "../../resources/echarts";
-import { listenMediaQuery } from "../../common/dom/media_query";
-import type { Themes } from "../../data/ws-themes";
-import { themesContext } from "../../data/context";
+import { formatTimeLabel } from "./axis-label";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 
@@ -44,6 +48,10 @@ export class HaChartBase extends LitElement {
 
   @state() private _isZoomed = false;
 
+  @state() private _zoomRatio = 1;
+
+  @state() private _minutesDifference = 24 * 60;
+
   private _modifierPressed = false;
 
   private _isTouchDevice = "ontouchstart" in window;
@@ -135,16 +143,7 @@ export class HaChartBase extends LitElement {
       this.chart.setOption(this._createOptions(), {
         lazyUpdate: true,
         // if we replace the whole object, it will reset the dataZoom
-        replaceMerge: [
-          "xAxis",
-          "yAxis",
-          "dataZoom",
-          "dataset",
-          "tooltip",
-          "legend",
-          "grid",
-          "visualMap",
-        ],
+        replaceMerge: ["grid"],
       });
     }
   }
@@ -152,7 +151,10 @@ export class HaChartBase extends LitElement {
   protected render() {
     return html`
       <div
-        class="chart-container"
+        class=${classMap({
+          "chart-container": true,
+          "has-legend": !!this.options?.legend,
+        })}
         style=${styleMap({
           height: this.height ?? `${this._getDefaultHeight()}px`,
         })}
@@ -173,6 +175,14 @@ export class HaChartBase extends LitElement {
     `;
   }
 
+  private _formatTimeLabel = (value: number | Date) =>
+    formatTimeLabel(
+      value,
+      this.hass.locale,
+      this.hass.config,
+      this._minutesDifference * this._zoomRatio
+    );
+
   private async _setupChart() {
     if (this._loading) return;
     const container = this.renderRoot.querySelector(".chart") as HTMLDivElement;
@@ -183,10 +193,9 @@ export class HaChartBase extends LitElement {
       }
       const echarts = (await import("../../resources/echarts")).default;
 
-      this.chart = echarts.init(
-        container,
-        this._themes.darkMode ? "dark" : "light"
-      );
+      echarts.registerTheme("custom", this._createTheme());
+
+      this.chart = echarts.init(container, "custom");
       this.chart.on("legendselectchanged", (params: any) => {
         if (this.externalHidden) {
           const isSelected = params.selected[params.name];
@@ -200,6 +209,7 @@ export class HaChartBase extends LitElement {
       this.chart.on("datazoom", (e: any) => {
         const { start, end } = e.batch?.[0] ?? e;
         this._isZoomed = start !== 0 || end !== 100;
+        this._zoomRatio = (end - start) / 100;
       });
       this.chart.on("click", (e: ECElementEvent) => {
         fireEvent(this, "chart-click", e);
@@ -237,24 +247,60 @@ export class HaChartBase extends LitElement {
   }
 
   private _createOptions(): ECOption {
-    const darkMode = this._themes.darkMode ?? false;
-
+    let xAxis = this.options?.xAxis;
+    if (xAxis) {
+      xAxis = Array.isArray(xAxis) ? xAxis : [xAxis];
+      xAxis = xAxis.map((axis: XAXisOption) => {
+        if (axis.type !== "time" || axis.show === false) {
+          return axis;
+        }
+        if (axis.max && axis.min) {
+          this._minutesDifference = differenceInMinutes(
+            axis.max as Date,
+            axis.min as Date
+          );
+        }
+        const dayDifference = this._minutesDifference / 60 / 24;
+        let minInterval: number | undefined;
+        if (dayDifference) {
+          minInterval =
+            dayDifference >= 89 // quarter
+              ? 28 * 3600 * 24 * 1000
+              : dayDifference > 2
+                ? 3600 * 24 * 1000
+                : undefined;
+        }
+        return {
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+          },
+          ...axis,
+          axisLabel: {
+            formatter: this._formatTimeLabel,
+            rich: {
+              bold: {
+                fontWeight: "bold",
+              },
+            },
+            hideOverlap: true,
+            ...axis.axisLabel,
+          },
+          minInterval,
+        } as XAXisOption;
+      });
+    }
     const options = {
-      backgroundColor: "transparent",
       animation: !this._reducedMotion,
-      darkMode,
+      darkMode: this._themes.darkMode ?? false,
       aria: {
         show: true,
       },
       dataZoom: this._getDataZoomConfig(),
       ...this.options,
-      legend: this.options?.legend
-        ? {
-            // we should create our own theme but this is a quick fix for now
-            inactiveColor: darkMode ? "#444" : "#ccc",
-            ...this.options.legend,
-          }
-        : undefined,
+      xAxis,
     };
 
     const isMobile = window.matchMedia(
@@ -268,18 +314,207 @@ export class HaChartBase extends LitElement {
       tooltips.forEach((tooltip) => {
         tooltip.confine = true;
         tooltip.appendTo = undefined;
+        tooltip.triggerOn = "click";
       });
       options.tooltip = tooltips;
     }
     return options;
   }
 
+  private _createTheme() {
+    const style = getComputedStyle(this);
+    return {
+      color: getAllGraphColors(style),
+      backgroundColor: "transparent",
+      textStyle: {
+        color: style.getPropertyValue("--primary-text-color"),
+        fontFamily: "Roboto, Noto, sans-serif",
+      },
+      title: {
+        textStyle: {
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        subtextStyle: {
+          color: style.getPropertyValue("--secondary-text-color"),
+        },
+      },
+      line: {
+        lineStyle: {
+          width: 1.5,
+        },
+        symbolSize: 1,
+        symbol: "circle",
+        smooth: false,
+      },
+      bar: {
+        itemStyle: {
+          barBorderWidth: 1.5,
+        },
+      },
+      categoryAxis: {
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: [
+              style.getPropertyValue("--divider-color") + "3F",
+              style.getPropertyValue("--divider-color") + "7F",
+            ],
+          },
+        },
+      },
+      valueAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: [
+              style.getPropertyValue("--divider-color") + "3F",
+              style.getPropertyValue("--divider-color") + "7F",
+            ],
+          },
+        },
+      },
+      logAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: [
+              style.getPropertyValue("--divider-color") + "3F",
+              style.getPropertyValue("--divider-color") + "7F",
+            ],
+          },
+        },
+      },
+      timeAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: [
+              style.getPropertyValue("--divider-color") + "3F",
+              style.getPropertyValue("--divider-color") + "7F",
+            ],
+          },
+        },
+      },
+      legend: {
+        textStyle: {
+          color: style.getPropertyValue("--primary-text-color"),
+        },
+        inactiveColor: style.getPropertyValue("--disabled-text-color"),
+        pageIconColor: style.getPropertyValue("--primary-text-color"),
+        pageIconInactiveColor: style.getPropertyValue("--disabled-text-color"),
+        pageTextStyle: {
+          color: style.getPropertyValue("--secondary-text-color"),
+        },
+      },
+      tooltip: {
+        backgroundColor: style.getPropertyValue("--card-background-color"),
+        borderColor: style.getPropertyValue("--divider-color"),
+        textStyle: {
+          color: style.getPropertyValue("--primary-text-color"),
+          fontSize: 12,
+        },
+        axisPointer: {
+          lineStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+          crossStyle: {
+            color: style.getPropertyValue("--divider-color"),
+          },
+        },
+      },
+      timeline: {},
+    };
+  }
+
   private _getDefaultHeight() {
-    return Math.max(this.clientWidth / 2, 400);
+    return Math.max(this.clientWidth / 2, 200);
   }
 
   private _handleZoomReset() {
     this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
+    this._modifierPressed = false;
   }
 
   private _handleWheel(e: WheelEvent) {
@@ -302,10 +537,11 @@ export class HaChartBase extends LitElement {
     :host {
       display: block;
       position: relative;
+      letter-spacing: normal;
     }
     .chart-container {
       position: relative;
-      max-height: var(--chart-max-height, 400px);
+      max-height: var(--chart-max-height, 350px);
     }
     .chart {
       width: 100%;
@@ -321,6 +557,9 @@ export class HaChartBase extends LitElement {
       color: var(--primary-color);
       border: 1px solid var(--divider-color);
     }
+    .has-legend .zoom-reset {
+      top: 64px;
+    }
   `;
 }
 

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

@@ -4,7 +4,6 @@ import { property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
-import { differenceInDays } from "date-fns";
 import { styleMap } from "lit/directives/style-map";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -18,10 +17,10 @@ import {
   getNumberFormatOptions,
   formatNumber,
 } from "../../common/number/format_number";
-import { getTimeAxisLabelConfig } from "./axis-label";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
+import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -72,6 +71,8 @@ export class StateHistoryChartLine extends LitElement {
 
   @state() private _chartOptions?: ECOption;
 
+  private _hiddenStats = new Set<string>();
+
   @state() private _yWidth = 25;
 
   private _chartTime: Date = new Date();
@@ -84,49 +85,104 @@ export class StateHistoryChartLine extends LitElement {
         .options=${this._chartOptions}
         .height=${this.height}
         style=${styleMap({ height: this.height })}
+        external-hidden
+        @dataset-hidden=${this._datasetHidden}
+        @dataset-unhidden=${this._datasetUnhidden}
       ></ha-chart-base>
     `;
   }
 
-  private _renderTooltip(params) {
-    return params
-      .map((param, index: number) => {
-        let value = `${formatNumber(
-          param.value[1] as number,
-          this.hass.locale,
-          getNumberFormatOptions(
-            undefined,
-            this.hass.entities[this._entityIds[param.seriesIndex]]
-          )
-        )} ${this.unit}`;
-        const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-        const data = this.data[dataIndex];
-        if (data.statistics && data.statistics.length > 0) {
-          value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-          const source =
-            data.states.length === 0 ||
-            param.value[0] < data.states[0].last_changed
-              ? `${this.hass.localize(
-                  "ui.components.history_charts.source_stats"
-                )}`
-              : `${this.hass.localize(
-                  "ui.components.history_charts.source_history"
-                )}`;
-          value += source;
+  private _renderTooltip(params: any) {
+    const time = params[0].axisValue;
+    const title =
+      formatDateTimeWithSeconds(
+        new Date(time),
+        this.hass.locale,
+        this.hass.config
+      ) + "<br>";
+    const datapoints: Record<string, any>[] = [];
+    this._chartData.forEach((dataset, index) => {
+      if (
+        dataset.tooltip?.show === false ||
+        this._hiddenStats.has(dataset.name as string)
+      )
+        return;
+      const param = params.find(
+        (p: Record<string, any>) => p.seriesIndex === index
+      );
+      if (param) {
+        datapoints.push(param);
+        return;
+      }
+      // If the datapoint is not found, we need to find the last datapoint before the current time
+      let lastData;
+      const data = dataset.data || [];
+      for (let i = data.length - 1; i >= 0; i--) {
+        const point = data[i];
+        if (point && point[0] <= time && point[1]) {
+          lastData = point;
+          break;
         }
+      }
+      if (!lastData) return;
+      datapoints.push({
+        seriesName: dataset.name,
+        seriesIndex: index,
+        value: lastData,
+        // HTML copied from echarts. May change based on options
+        marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
+      });
+    });
+    const unit = this.unit
+      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
+      : "";
 
-        const time =
-          index === 0
-            ? formatDateTimeWithSeconds(
-                new Date(param.value[0]),
+    return (
+      title +
+      datapoints
+        .map((param) => {
+          const entityId = this._entityIds[param.seriesIndex];
+          const stateObj = this.hass.states[entityId];
+          const entry = this.hass.entities[entityId];
+          const stateValue = String(param.value[1]);
+          let value = stateObj
+            ? this.hass.formatEntityState(stateObj, stateValue)
+            : `${formatNumber(
+                stateValue,
                 this.hass.locale,
-                this.hass.config
-              ) + "<br>"
-            : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}
-      `;
-      })
-      .join("<br>");
+                getNumberFormatOptions(undefined, entry)
+              )}${unit}`;
+          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+          const data = this.data[dataIndex];
+          if (data.statistics && data.statistics.length > 0) {
+            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+            const source =
+              data.states.length === 0 ||
+              param.value[0] < data.states[0].last_changed
+                ? `${this.hass.localize(
+                    "ui.components.history_charts.source_stats"
+                  )}`
+                : `${this.hass.localize(
+                    "ui.components.history_charts.source_history"
+                  )}`;
+            value += source;
+          }
+
+          if (param.seriesName) {
+            return `${param.marker} ${param.seriesName}: ${value}`;
+          }
+          return `${param.marker} ${value}`;
+        })
+        .join("<br>")
+    );
+  }
+
+  private _datasetHidden(ev: CustomEvent) {
+    this._hiddenStats.add(ev.detail.name);
+  }
+
+  private _datasetUnhidden(ev: CustomEvent) {
+    this._hiddenStats.delete(ev.detail.name);
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -156,49 +212,44 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("paddingYAxis") ||
       changedProps.has("_yWidth")
     ) {
-      const dayDifference = differenceInDays(this.endTime, this.startTime);
       const rtl = computeRTL(this.hass);
-      const splitLineStyle = this.hass.themes?.darkMode
-        ? { opacity: 0.15 }
-        : {};
+      let minYAxis: number | ((values: { min: number }) => number) | undefined =
+        this.minYAxis;
+      let maxYAxis: number | ((values: { max: number }) => number) | undefined =
+        this.maxYAxis;
+      if (typeof minYAxis === "number") {
+        if (this.fitYData) {
+          minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
+        }
+      } else if (this.logarithmicScale) {
+        minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+      }
+      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);
+      }
       this._chartOptions = {
         xAxis: {
           type: "time",
           min: this.startTime,
           max: this.endTime,
-          axisLabel: getTimeAxisLabelConfig(
-            this.hass.locale,
-            this.hass.config,
-            dayDifference
-          ),
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: splitLineStyle,
-          },
-          minInterval:
-            dayDifference >= 89 // quarter
-              ? 28 * 3600 * 24 * 1000
-              : dayDifference > 2
-                ? 3600 * 24 * 1000
-                : undefined,
         },
         yAxis: {
           type: this.logarithmicScale ? "log" : "value",
           name: this.unit,
-          min: this.fitYData ? this.minYAxis : undefined,
-          max: this.fitYData ? this.maxYAxis : undefined,
+          min: this._clampYAxis(minYAxis),
+          max: this._clampYAxis(maxYAxis),
           position: rtl ? "right" : "left",
           scale: true,
           nameGap: 2,
           nameTextStyle: {
             align: "left",
           },
-          splitLine: {
-            show: true,
-            lineStyle: splitLineStyle,
+          axisLine: {
+            show: false,
           },
           axisLabel: {
             margin: 5,
@@ -218,6 +269,8 @@ export class StateHistoryChartLine extends LitElement {
         } as YAXisOption,
         legend: {
           show: this.showNames,
+          type: "scroll",
+          animationDurationUpdate: 400,
           icon: "circle",
           padding: [20, 0],
         },
@@ -307,13 +360,18 @@ export class StateHistoryChartLine extends LitElement {
         prevValues = datavalues;
       };
 
-      const addDataSet = (nameY: string, color?: string, fill = false) => {
+      const addDataSet = (
+        id: string,
+        nameY: string,
+        color?: string,
+        fill = false
+      ) => {
         if (!color) {
           color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
         }
         data.push({
-          id: nameY,
+          id,
           data: [],
           type: "line",
           cursor: "default",
@@ -321,6 +379,7 @@ export class StateHistoryChartLine extends LitElement {
           color,
           symbol: "circle",
           step: "end",
+          animationDurationUpdate: 0,
           symbolSize: 1,
           lineStyle: {
             width: fill ? 0 : 1.5,
@@ -375,13 +434,23 @@ export class StateHistoryChartLine extends LitElement {
               entityState.attributes.target_temp_low
         );
         addDataSet(
-          `${this.hass.localize("ui.card.climate.current_temperature", {
-            name: name,
-          })}`
+          states.entity_id + "-current_temperature",
+          this.showNames
+            ? this.hass.localize("ui.card.climate.current_temperature", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.climate.entity_component._.state_attributes.current_temperature.name"
+              )
         );
         if (hasHeat) {
           addDataSet(
-            `${this.hass.localize("ui.card.climate.heating", { name: name })}`,
+            states.entity_id + "-heating",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.heating", { name: name })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
+                ),
             computedStyles.getPropertyValue("--state-climate-heat-color"),
             true
           );
@@ -390,7 +459,12 @@ export class StateHistoryChartLine extends LitElement {
         }
         if (hasCool) {
           addDataSet(
-            `${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
+            states.entity_id + "-cooling",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.cooling", { name: name })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.cooling"
+                ),
             computedStyles.getPropertyValue("--state-climate-cool-color"),
             true
           );
@@ -400,22 +474,40 @@ export class StateHistoryChartLine extends LitElement {
 
         if (hasTargetRange) {
           addDataSet(
-            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
-              name: name,
-              mode: this.hass.localize("ui.card.climate.high"),
-            })}`
+            states.entity_id + "-target_temperature_mode",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.high"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_high.name"
+                )
           );
           addDataSet(
-            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
-              name: name,
-              mode: this.hass.localize("ui.card.climate.low"),
-            })}`
+            states.entity_id + "-target_temperature_mode_low",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.target_temperature_mode", {
+                  name: name,
+                  mode: this.hass.localize("ui.card.climate.low"),
+                })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.target_temp_low.name"
+                )
           );
         } else {
           addDataSet(
-            `${this.hass.localize("ui.card.climate.target_temperature_entity", {
-              name: name,
-            })}`
+            states.entity_id + "-target_temperature",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.climate.target_temperature_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.temperature.name"
+                )
           );
         }
 
@@ -468,19 +560,29 @@ export class StateHistoryChartLine extends LitElement {
           );
 
         addDataSet(
-          `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
-            name: name,
-          })}`
+          states.entity_id + "-target_humidity",
+          this.showNames
+            ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
+                name: name,
+              })
+            : this.hass.localize(
+                "component.humidifier.entity_component._.state_attributes.humidity.name"
+              )
         );
 
         if (hasCurrent) {
           addDataSet(
-            `${this.hass.localize(
-              "ui.card.humidifier.current_humidity_entity",
-              {
-                name: name,
-              }
-            )}`
+            states.entity_id + "-current_humidity",
+            this.showNames
+              ? this.hass.localize(
+                  "ui.card.humidifier.current_humidity_entity",
+                  {
+                    name: name,
+                  }
+                )
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.current_humidity.name"
+                )
           );
         }
 
@@ -488,25 +590,40 @@ export class StateHistoryChartLine extends LitElement {
         // If action attribute is not available, we shade the area when the device is on
         if (hasHumidifying) {
           addDataSet(
-            `${this.hass.localize("ui.card.humidifier.humidifying", {
-              name: name,
-            })}`,
+            states.entity_id + "-humidifying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.humidifying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.humidifying"
+                ),
             computedStyles.getPropertyValue("--state-humidifier-on-color"),
             true
           );
         } else if (hasDrying) {
           addDataSet(
-            `${this.hass.localize("ui.card.humidifier.drying", {
-              name: name,
-            })}`,
+            states.entity_id + "-drying",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.drying", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state_attributes.action.state.drying"
+                ),
             computedStyles.getPropertyValue("--state-humidifier-on-color"),
             true
           );
         } else {
           addDataSet(
-            `${this.hass.localize("ui.card.humidifier.on_entity", {
-              name: name,
-            })}`,
+            states.entity_id + "-on",
+            this.showNames
+              ? this.hass.localize("ui.card.humidifier.on_entity", {
+                  name: name,
+                })
+              : this.hass.localize(
+                  "component.humidifier.entity_component._.state.on"
+                ),
             undefined,
             true
           );
@@ -539,7 +656,7 @@ export class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(name);
+        addDataSet(states.entity_id, name);
 
         let lastValue: number;
         let lastDate: Date;
@@ -609,6 +726,19 @@ export class StateHistoryChartLine extends LitElement {
     this._entityIds = entityIds;
     this._datasetToDataIndex = datasetToDataIndex;
   }
+
+  private _clampYAxis(value?: number | ((values: any) => number)) {
+    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);
+      }
+      if (typeof value === "function") {
+        return (values: any) => Math.max(value(values), 0.1);
+      }
+    }
+    return value;
+  }
 }
 customElements.define("state-history-chart-line", StateHistoryChartLine);
 

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

@@ -8,7 +8,6 @@ import type {
   TooltipFormatterCallback,
   TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
-import { differenceInDays } from "date-fns";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -22,7 +21,6 @@ import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
 import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
-import { getTimeAxisLabelConfig } from "./axis-label";
 
 @customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
@@ -67,7 +65,7 @@ export class StateHistoryChartTimeline extends LitElement {
         .hass=${this.hass}
         .options=${this._chartOptions}
         .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData}
+        .data=${this._chartData as ECOption["series"]}
         @chart-click=${this._handleChartClick}
       ></ha-chart-base>
     `;
@@ -129,10 +127,12 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
     (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker } = Array.isArray(params)
+      const { value, name, marker, seriesName } = Array.isArray(params)
         ? params[0]
         : params;
-      const title = `<h4 style="text-align: center; margin: 0;">${value![0]}</h4>`;
+      const title = seriesName
+        ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
+        : "";
       const durationInMs = value![2] - value![1];
       const formattedDuration = `${this.hass.localize(
         "ui.components.history_charts.duration"
@@ -183,13 +183,12 @@ export class StateHistoryChartTimeline extends LitElement {
   private _createOptions() {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
-    const maxInternalLabelWidth = narrow ? 70 : 165;
+    const maxInternalLabelWidth = narrow ? 105 : 185;
     const labelWidth = showNames
       ? Math.max(this.paddingYAxis, this._yWidth)
       : 0;
     const labelMargin = 5;
     const rtl = computeRTL(this.hass);
-    const dayDifference = differenceInDays(this.endTime, this.startTime);
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -197,21 +196,10 @@ export class StateHistoryChartTimeline extends LitElement {
         max: this.endTime,
         axisTick: {
           show: true,
-          lineStyle: {
-            opacity: 0.4,
-          },
         },
-        axisLabel: getTimeAxisLabelConfig(
-          this.hass.locale,
-          this.hass.config,
-          dayDifference
-        ),
-        minInterval:
-          dayDifference >= 89 // quarter
-            ? 28 * 3600 * 24 * 1000
-            : dayDifference > 2
-              ? 3600 * 24 * 1000
-              : undefined,
+        splitLine: {
+          show: false,
+        },
       },
       yAxis: {
         type: "category",
@@ -226,14 +214,18 @@ export class StateHistoryChartTimeline extends LitElement {
         },
         axisLabel: {
           show: showNames,
-          width: labelWidth - labelMargin,
+          width: labelWidth,
           overflow: "truncate",
           margin: labelMargin,
-          formatter: (label: string) => {
-            const width = Math.min(
-              measureTextWidth(label, 12) + labelMargin,
-              maxInternalLabelWidth
-            );
+          formatter: (id: string) => {
+            const label = this._chartData.find((d) => d.id === id)
+              ?.name as string;
+            const width = label
+              ? Math.min(
+                  measureTextWidth(label, 12) + labelMargin,
+                  maxInternalLabelWidth
+                )
+              : 0;
             if (width > this._yWidth) {
               this._yWidth = width;
               fireEvent(this, "y-width-changed", {
@@ -278,8 +270,9 @@ export class StateHistoryChartTimeline extends LitElement {
       let prevState: string | null = null;
       let locState: string | null = null;
       let prevLastChanged = startTime;
-      const entityDisplay: string =
-        names[stateInfo.entity_id] || stateInfo.name;
+      const entityDisplay: string = this.showNames
+        ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
+        : "";
 
       const dataRow: unknown[] = [];
       stateInfo.data.forEach((entityState) => {
@@ -307,7 +300,7 @@ export class StateHistoryChartTimeline extends LitElement {
           );
           dataRow.push({
             value: [
-              entityDisplay,
+              stateInfo.entity_id,
               prevLastChanged,
               newLastChanged,
               locState,
@@ -333,7 +326,7 @@ export class StateHistoryChartTimeline extends LitElement {
         );
         dataRow.push({
           value: [
-            entityDisplay,
+            stateInfo.entity_id,
             prevLastChanged,
             endTime,
             locState,
@@ -346,9 +339,10 @@ export class StateHistoryChartTimeline extends LitElement {
         });
       }
       datasets.push({
+        id: stateInfo.entity_id,
         data: dataRow,
         name: entityDisplay,
-        dimensions: ["index", "start", "end", "name", "color", "textColor"],
+        dimensions: ["id", "start", "end", "name", "color", "textColor"],
         type: "custom",
         encode: {
           x: [1, 2],
@@ -364,10 +358,10 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _handleChartClick(e: CustomEvent<ECElementEvent>): void {
     if (e.detail.targetType === "axisLabel") {
-      const dataset = this.data[e.detail.dataIndex];
+      const dataset = this._chartData[e.detail.dataIndex];
       if (dataset) {
         fireEvent(this, "hass-more-info", {
-          entityId: dataset.entity_id,
+          entityId: dataset.id as string,
         });
       }
     }

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

@@ -135,7 +135,7 @@ export class StateHistoryCharts extends LitElement {
       return html``;
     }
     if (!Array.isArray(item)) {
-      return html`<div class="entry-container">
+      return html`<div class="entry-container line">
         <state-history-chart-line
           .hass=${this.hass}
           .unit=${item.unit}
@@ -157,7 +157,7 @@ export class StateHistoryCharts extends LitElement {
         ></state-history-chart-line>
       </div> `;
     }
-    return html`<div class="entry-container">
+    return html`<div class="entry-container timeline">
       <state-history-chart-timeline
         .hass=${this.hass}
         .data=${item}
@@ -299,6 +299,9 @@ export class StateHistoryCharts extends LitElement {
 
     .entry-container {
       width: 100%;
+    }
+
+    .entry-container.line {
       flex: 1;
     }
 
@@ -313,6 +316,10 @@ export class StateHistoryCharts extends LitElement {
       padding-inline-end: 1px;
     }
 
+    .entry-container.timeline:first-child {
+      margin-top: var(--timeline-top-margin);
+    }
+
     .entry-container:not(:first-child) {
       border-top: 2px solid var(--divider-color);
       margin-top: 16px;

src/components/chart/statistics-chart.ts

@@ -1,15 +1,22 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import type {
   BarSeriesOption,
   LineSeriesOption,
 } from "echarts/types/dist/shared";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+} from "../../common/number/format_number";
+import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
+import { computeRTL } from "../../common/util/compute_rtl";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -21,16 +28,9 @@ import {
   getStatisticMetadata,
   statisticsHaveType,
 } from "../../data/recorder";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import { computeRTL } from "../../common/util/compute_rtl";
-import type { ECOption } from "../../resources/echarts";
-import {
-  formatNumber,
-  getNumberFormatOptions,
-} from "../../common/number/format_number";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import { getTimeAxisLabelConfig } from "./axis-label";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -56,6 +56,8 @@ export class StatisticsChart extends LitElement {
 
   @property() public unit?: string;
 
+  @property({ attribute: false }) public startTime?: Date;
+
   @property({ attribute: false }) public endTime?: Date;
 
   @property({ attribute: false, type: Array })
@@ -124,7 +126,10 @@ export class StatisticsChart extends LitElement {
       changedProps.has("fitYData") ||
       changedProps.has("logarithmicScale") ||
       changedProps.has("hideLegend") ||
-      changedProps.has("_legendData")
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
+      changedProps.has("_legendData") ||
+      changedProps.has("_chartData")
     ) {
       this._createOptions();
     }
@@ -181,18 +186,31 @@ export class StatisticsChart extends LitElement {
     this.requestUpdate("_hiddenStats");
   }
 
-  private _renderTooltip = (params: any) =>
-    params
+  private _renderTooltip = (params: any) => {
+    const rendered: Record<string, boolean> = {};
+    const unit = this.unit
+      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
+      : "";
+    return params
       .map((param, index: number) => {
+        if (rendered[param.seriesName]) return "";
+        rendered[param.seriesName] = true;
+
+        const statisticId = this._statisticIds[param.seriesIndex];
+        const stateObj = this.hass.states[statisticId];
+        const entry = this.hass.entities[statisticId];
+        // max series can have 3 values, as the second value is the max-min to form a band
+        const rawValue = String(param.value[2] ?? param.value[1]);
+
+        const options = getNumberFormatOptions(stateObj, entry) ?? {
+          maximumFractionDigits: 2,
+        };
+
         const value = `${formatNumber(
-          // max series can have 3 values, as the second value is the max-min to form a band
-          (param.value[2] ?? param.value[1]) as number,
+          rawValue,
           this.hass.locale,
-          getNumberFormatOptions(
-            undefined,
-            this.hass.entities[this._statisticIds[param.seriesIndex]]
-          )
-        )} ${this.unit}`;
+          options
+        )}${unit}`;
 
         const time =
           index === 0
@@ -202,36 +220,68 @@ export class StatisticsChart extends LitElement {
                 this.hass.config
               ) + "<br>"
             : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}
-  `;
+        return `${time}${param.marker} ${param.seriesName}: ${value}`;
       })
+      .filter(Boolean)
       .join("<br>");
+  };
 
   private _createOptions() {
-    const splitLineStyle = this.hass.themes?.darkMode ? { opacity: 0.15 } : {};
     const dayDifference = this.daysToShow ?? 1;
+    let minYAxis: number | ((values: { min: number }) => number) | undefined =
+      this.minYAxis;
+    let maxYAxis: number | ((values: { max: number }) => number) | undefined =
+      this.maxYAxis;
+    if (typeof minYAxis === "number") {
+      if (this.fitYData) {
+        minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
+      }
+    } else if (this.logarithmicScale) {
+      minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+    }
+    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);
+    }
+    const endTime = this.endTime ?? new Date();
+    let startTime = this.startTime;
+
+    if (!startTime) {
+      // set start time to the earliest point in the chart data
+      this._chartData.forEach((series) => {
+        if (!Array.isArray(series.data) || !series.data[0]) return;
+        const firstPoint = series.data[0] as any;
+        const timestamp = Array.isArray(firstPoint)
+          ? firstPoint[0]
+          : firstPoint.value?.[0];
+        if (timestamp && (!startTime || new Date(timestamp) < startTime)) {
+          startTime = new Date(timestamp);
+        }
+      });
+
+      if (!startTime) {
+        // Calculate default start time based on dayDifference
+        startTime = new Date(
+          endTime.getTime() - dayDifference * 24 * 3600 * 1000
+        );
+      }
+    }
+
     this._chartOptions = {
-      xAxis: {
-        type: "time",
-        axisLabel: getTimeAxisLabelConfig(
-          this.hass.locale,
-          this.hass.config,
-          dayDifference
-        ),
-        axisLine: {
+      xAxis: [
+        {
+          type: "time",
+          min: startTime,
+          max: endTime,
+        },
+        {
+          type: "time",
           show: false,
         },
-        splitLine: {
-          show: true,
-          lineStyle: splitLineStyle,
-        },
-        minInterval:
-          dayDifference >= 89 // quarter
-            ? 28 * 3600 * 24 * 1000
-            : dayDifference > 2
-              ? 3600 * 24 * 1000
-              : undefined,
-      },
+      ],
       yAxis: {
         type: this.logarithmicScale ? "log" : "value",
         name: this.unit,
@@ -240,24 +290,24 @@ export class StatisticsChart extends LitElement {
           align: "left",
         },
         position: computeRTL(this.hass) ? "right" : "left",
-        // @ts-ignore
-        scale: this.chartType !== "bar",
-        min: this.fitYData ? undefined : this.minYAxis,
-        max: this.fitYData ? undefined : this.maxYAxis,
+        scale: true,
+        min: this._clampYAxis(minYAxis),
+        max: this._clampYAxis(maxYAxis),
         splitLine: {
           show: true,
-          lineStyle: splitLineStyle,
         },
       },
       legend: {
         show: !this.hideLegend,
+        type: "scroll",
+        animationDurationUpdate: 400,
         icon: "circle",
         padding: [20, 0],
         data: this._legendData,
       },
       grid: {
         ...(this.hideLegend ? { top: this.unit ? 30 : 5 } : {}), // undefined is the same as 0
-        left: 20,
+        left: 1,
         right: 1,
         bottom: 0,
         containLabel: true,
@@ -318,6 +368,7 @@ export class StatisticsChart extends LitElement {
     if (endTime > new Date()) {
       endTime = new Date();
     }
+    this.endTime = endTime;
 
     let unit: string | undefined | null;
 
@@ -369,10 +420,12 @@ export class StatisticsChart extends LitElement {
           ) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime, ...prevValues[i]!]);
+            d.data!.push(
+              this._transformDataValue([prevEndTime, ...prevValues[i]!])
+            );
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push([start, ...dataValues[i]!]);
+          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -421,9 +474,14 @@ export class StatisticsChart extends LitElement {
             displayedLegend = displayedLegend || showLegend;
           }
           statTypes.push(type);
+          const borderColor =
+            band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color;
+          const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
             type: this.chartType,
+            smooth: this.chartType === "line" ? 0.4 : false,
+            smoothMonotone: "x",
             cursor: "default",
             data: [],
             name: name
@@ -435,6 +493,7 @@ export class StatisticsChart extends LitElement {
                 ),
             symbol: "circle",
             symbolSize: 0,
+            animationDurationUpdate: 0,
             lineStyle: {
               width: 1.5,
             },
@@ -442,21 +501,16 @@ export class StatisticsChart extends LitElement {
               this.chartType === "bar"
                 ? {
                     borderRadius: [4, 4, 0, 0],
-                    borderColor:
-                      band && hasMean
-                        ? color + (this.hideLegend ? "00" : "7F")
-                        : color,
+                    borderColor,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: band ? color + "3F" : color + "7F",
+            color: this.chartType === "bar" ? backgroundColor : borderColor,
           };
           if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
+            series.stackStrategy = "all";
             (series as LineSeriesOption).symbol = "none";
-            (series as LineSeriesOption).lineStyle = {
-              opacity: 0,
-            };
             if (drawBands && type === "max") {
               (series as LineSeriesOption).areaStyle = {
                 color: color + "3F",
@@ -489,7 +543,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (type === "max" && this.chartType === "line") {
             const max = stat.max || 0;
-            val.push(max - (stat.min || 0));
+            val.push(Math.abs(max - (stat.min || 0)));
             val.push(max);
           } else {
             val.push(stat[type] ?? null);
@@ -518,6 +572,7 @@ export class StatisticsChart extends LitElement {
         color,
         type: this.chartType,
         data: [],
+        xAxisIndex: 1,
       });
     });
 
@@ -529,6 +584,26 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
+  private _transformDataValue(val: [Date, ...(number | null)[]]) {
+    if (this.chartType === "bar" && val[1] && val[1] < 0) {
+      return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
+    }
+    return val;
+  }
+
+  private _clampYAxis(value?: number | ((values: any) => number)) {
+    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);
+      }
+      if (typeof value === "function") {
+        return (values: any) => Math.max(value(values), 0.1);
+      }
+    }
+    return value;
+  }
+
   static styles = css`
     :host {
       display: block;

src/components/ha-assist-chat.ts

@@ -295,10 +295,12 @@ export class HaAssistChat extends LitElement {
     this._addMessage(userMessage);
     this.requestUpdate("_audioRecorder");
 
-    const hassMessage: AssistMessage = {
+    let hassMessage = {
       who: "hass",
       text: "…",
+      error: false,
     };
+    let currentDeltaRole = "";
     // To make sure the answer is placed at the right user text, we add it before we process it
     try {
       const unsub = await runAssistPipeline(
@@ -328,6 +330,43 @@ export class HaAssistChat extends LitElement {
             this._addMessage(hassMessage);
           }
 
+          if (event.type === "intent-progress") {
+            const delta = event.data.chat_log_delta;
+
+            // new message
+            if (delta.role) {
+              // If currentDeltaRole exists, it means we're receiving our
+              // second or later message. Let's add it to the chat.
+              if (currentDeltaRole && delta.role && hassMessage.text !== "…") {
+                // Remove progress indicator of previous message
+                hassMessage.text = hassMessage.text.substring(
+                  0,
+                  hassMessage.text.length - 1
+                );
+
+                hassMessage = {
+                  who: "hass",
+                  text: "…",
+                  error: false,
+                };
+                this._addMessage(hassMessage);
+              }
+              currentDeltaRole = delta.role;
+            }
+
+            if (
+              currentDeltaRole === "assistant" &&
+              "content" in delta &&
+              delta.content
+            ) {
+              hassMessage.text =
+                hassMessage.text.substring(0, hassMessage.text.length - 1) +
+                delta.content +
+                "…";
+              this.requestUpdate("_conversation");
+            }
+          }
+
           if (event.type === "intent-end") {
             this._conversationId = event.data.intent_output.conversation_id;
             const plain = event.data.intent_output.response.speech?.plain;
@@ -435,28 +474,71 @@ export class HaAssistChat extends LitElement {
     this._processing = true;
     this._audio?.pause();
     this._addMessage({ who: "user", text });
-    const message: AssistMessage = {
+    let hassMessage = {
       who: "hass",
       text: "…",
+      error: false,
     };
+    let currentDeltaRole = "";
     // To make sure the answer is placed at the right user text, we add it before we process it
-    this._addMessage(message);
+    this._addMessage(hassMessage);
     try {
       const unsub = await runAssistPipeline(
         this.hass,
         (event) => {
+          if (event.type === "intent-progress") {
+            const delta = event.data.chat_log_delta;
+
+            // new message and previous message has content
+            if (delta.role) {
+              // If currentDeltaRole exists, it means we're receiving our
+              // second or later message. Let's add it to the chat.
+              if (
+                currentDeltaRole &&
+                delta.role === "assistant" &&
+                hassMessage.text !== "…"
+              ) {
+                // Remove progress indicator of previous message
+                hassMessage.text = hassMessage.text.substring(
+                  0,
+                  hassMessage.text.length - 1
+                );
+
+                hassMessage = {
+                  who: "hass",
+                  text: "…",
+                  error: false,
+                };
+                this._addMessage(hassMessage);
+              }
+              currentDeltaRole = delta.role;
+            }
+
+            if (
+              currentDeltaRole === "assistant" &&
+              "content" in delta &&
+              delta.content
+            ) {
+              hassMessage.text =
+                hassMessage.text.substring(0, hassMessage.text.length - 1) +
+                delta.content +
+                "…";
+              this.requestUpdate("_conversation");
+            }
+          }
+
           if (event.type === "intent-end") {
             this._conversationId = event.data.intent_output.conversation_id;
             const plain = event.data.intent_output.response.speech?.plain;
             if (plain) {
-              message.text = plain.speech;
+              hassMessage.text = plain.speech;
             }
             this.requestUpdate("_conversation");
             unsub();
           }
           if (event.type === "error") {
-            message.text = event.data.message;
-            message.error = true;
+            hassMessage.text = event.data.message;
+            hassMessage.error = true;
             this.requestUpdate("_conversation");
             unsub();
           }
@@ -470,8 +552,8 @@ export class HaAssistChat extends LitElement {
         }
       );
     } catch {
-      message.text = this.hass.localize("ui.dialogs.voice_command.error");
-      message.error = true;
+      hassMessage.text = this.hass.localize("ui.dialogs.voice_command.error");
+      hassMessage.error = true;
       this.requestUpdate("_conversation");
     } finally {
       this._processing = false;

src/components/ha-base-time-input.ts

@@ -329,15 +329,12 @@ export class HaBaseTimeInput extends LitElement {
     :host([clearable]) {
       position: relative;
     }
-    :host {
-      display: block;
-    }
     .time-input-wrap-wrap {
       display: flex;
     }
     .time-input-wrap {
       display: flex;
-      flex: 1;
+      flex: var(--time-input-flex, unset);
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;

src/components/ha-date-range-picker.ts

@@ -9,12 +9,13 @@ import {
   endOfMonth,
   endOfWeek,
   endOfYear,
+  isThisYear,
   startOfDay,
   startOfMonth,
   startOfWeek,
   startOfYear,
-  isThisYear,
 } from "date-fns";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -22,16 +23,18 @@ import { ifDefined } from "lit/directives/if-defined";
 import { calcDate, shiftDateRange } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import {
-  formatShortDateTimeWithYear,
   formatShortDateTime,
+  formatShortDateTimeWithYear,
 } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
+import { fireEvent } from "../common/dom/fire_event";
+import { TimeZone } from "../data/translation";
 import type { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-icon-button";
-import "./ha-textarea";
 import "./ha-icon-button-next";
 import "./ha-icon-button-prev";
+import "./ha-textarea";
 
 export type DateRangePickerRanges = Record<string, [Date, Date]>;
 
@@ -197,14 +200,15 @@ export class HaDateRangePicker extends LitElement {
         ?auto-apply=${this.autoApply}
         time-picker=${this.timePicker}
         twentyfour-hours=${this._hour24format}
-        start-date=${this.startDate.toISOString()}
-        end-date=${this.endDate.toISOString()}
+        start-date=${this._formatDate(this.startDate)}
+        end-date=${this._formatDate(this.endDate)}
         ?ranges=${this.ranges !== false}
         opening-direction=${ifDefined(
           this.openingDirection || this._calcedOpeningDirection
         )}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
+        @change=${this._handleChange}
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
@@ -325,9 +329,31 @@ export class HaDateRangePicker extends LitElement {
   }
 
   private _applyDateRange() {
+    if (this.hass.locale.time_zone === TimeZone.server) {
+      const dateRangePicker = this._dateRangePicker;
+
+      const startDate = fromZonedTime(
+        dateRangePicker.start,
+        this.hass.config.time_zone
+      );
+      const endDate = fromZonedTime(
+        dateRangePicker.end,
+        this.hass.config.time_zone
+      );
+
+      dateRangePicker.clickRange([startDate, endDate]);
+    }
+
     this._dateRangePicker.clickedApply();
   }
 
+  private _formatDate(date: Date): string {
+    if (this.hass.locale.time_zone === TimeZone.server) {
+      return toZonedTime(date, this.hass.config.time_zone).toISOString();
+    }
+    return date.toISOString();
+  }
+
   private get _dateRangePicker() {
     const dateRangePicker = this.shadowRoot!.querySelector(
       "date-range-picker"
@@ -358,6 +384,16 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
+  private _handleChange(ev: CustomEvent) {
+    ev.stopPropagation();
+    const startDate = ev.detail.startDate;
+    const endDate = ev.detail.endDate;
+
+    fireEvent(this, "value-changed", {
+      value: { startDate, endDate },
+    });
+  }
+
   static styles = css`
 
       ha-icon-button {

src/components/ha-network.ts

@@ -64,9 +64,13 @@ export class HaNetwork extends LitElement {
           >
           </ha-checkbox>
         </span>
-        <span slot="heading" data-for="auto_configure"> Auto Configure </span>
+        <span slot="heading" data-for="auto_configure">
+          ${this.hass.localize(
+            "ui.panel.config.network.adapter.auto_configure"
+          )}
+        </span>
         <span slot="description" data-for="auto_configure">
-          Detected:
+          ${this.hass.localize("ui.panel.config.network.adapter.detected")}:
           ${format_auto_detected_interfaces(this.networkConfig.adapters)}
         </span>
       </ha-settings-row>
@@ -85,18 +89,21 @@ export class HaNetwork extends LitElement {
                   </ha-checkbox>
                 </span>
                 <span slot="heading">
-                  Adapter: ${adapter.name}
+                  ${this.hass.localize(
+                    "ui.panel.config.network.adapter.adapter"
+                  )}:
+                  ${adapter.name}
                   ${adapter.default
                     ? html`<ha-svg-icon .path=${mdiStar}></ha-svg-icon>
-                        (Default)`
-                    : ""}
+                        (${this.hass.localize("ui.common.default")})`
+                    : nothing}
                 </span>
                 <span slot="description">
                   ${format_addresses([...adapter.ipv4, ...adapter.ipv6])}
                 </span>
               </ha-settings-row>`
           )
-        : ""}
+        : nothing}
     `;
   }
 

src/components/ha-qr-scanner.ts

@@ -8,7 +8,7 @@ import { customElement, property, query, state } from "lit/decorators";
 // and "qr-scanner" defaults to a suboptimal implementation if it is not available.
 // The following import makes a better implementation available that is based on a
 // WebAssembly port of ZXing:
-import { setZXingModuleOverrides } from "barcode-detector";
+import { prepareZXingModule } from "barcode-detector";
 import type QrScanner from "qr-scanner";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -21,12 +21,14 @@ import "./ha-list-item";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
-setZXingModuleOverrides({
-  locateFile: (path: string, prefix: string) => {
-    if (path.endsWith(".wasm")) {
-      return "/static/js/zxing_reader.wasm";
-    }
-    return prefix + path;
+prepareZXingModule({
+  overrides: {
+    locateFile: (path: string, prefix: string) => {
+      if (path.endsWith(".wasm")) {
+        return "/static/js/zxing_reader.wasm";
+      }
+      return prefix + path;
+    },
   },
 });
 

src/components/trace/hat-graph-branch.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, svg } from "lit";
+import { css, html, LitElement, nothing, svg } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { BRANCH_HEIGHT, SPACING } from "./hat-graph-const";
@@ -41,8 +41,8 @@ export class HatGraphBranch extends LitElement {
       branches.push({
         x: width / 2 + total_width,
         height,
-        start: c.hasAttribute("graphStart"),
-        end: c.hasAttribute("graphEnd"),
+        start: c.hasAttribute("graph-start"),
+        end: c.hasAttribute("graph-end"),
         track: c.hasAttribute("track"),
       });
       total_width += width;
@@ -65,11 +65,8 @@ export class HatGraphBranch extends LitElement {
     return html`
       <slot name="head"></slot>
       ${!this.start
-        ? svg`
-            <svg
-              id="top"
-              width="${this._totalWidth}"
-            >
+        ? html`
+            <svg id="top" width=${this._totalWidth}>
               ${this._branches.map((branch) =>
                 branch.start
                   ? ""
@@ -86,7 +83,7 @@ export class HatGraphBranch extends LitElement {
               )}
             </svg>
           `
-        : ""}
+        : nothing}
       <div id="branches">
         <svg id="lines" width=${this._totalWidth} height=${this._maxHeight}>
           ${this._branches.map((branch) => {
@@ -107,11 +104,8 @@ export class HatGraphBranch extends LitElement {
       </div>
 
       ${!this.short
-        ? svg`
-            <svg
-              id="bottom"
-              width="${this._totalWidth}"
-            >
+        ? html`
+            <svg id="bottom" width=${this._totalWidth}>
               ${this._branches.map((branch) => {
                 if (branch.end) return "";
                 return svg`
@@ -128,7 +122,7 @@ export class HatGraphBranch extends LitElement {
               })}
             </svg>
           `
-        : ""}
+        : nothing}
     `;
   }
 

src/data/assist_pipeline.ts

@@ -108,6 +108,34 @@ interface PipelineIntentStartEvent extends PipelineEventBase {
     intent_input: string;
   };
 }
+
+interface ConversationChatLogAssistantDelta {
+  role: "assistant";
+  content: string;
+  tool_calls: {
+    id: string;
+    tool_name: string;
+    tool_args: Record<string, unknown>;
+  }[];
+}
+
+interface ConversationChatLogToolResultDelta {
+  role: "tool_result";
+  agent_id: string;
+  tool_call_id: string;
+  tool_name: string;
+  tool_result: unknown;
+}
+interface PipelineIntentProgressEvent extends PipelineEventBase {
+  type: "intent-progress";
+  data: {
+    chat_log_delta:
+      | Partial<ConversationChatLogAssistantDelta>
+      // These always come in 1 chunk
+      | ConversationChatLogToolResultDelta;
+  };
+}
+
 interface PipelineIntentEndEvent extends PipelineEventBase {
   type: "intent-end";
   data: {
@@ -141,6 +169,7 @@ export type PipelineRunEvent =
   | PipelineSTTStartEvent
   | PipelineSTTEndEvent
   | PipelineIntentStartEvent
+  | PipelineIntentProgressEvent
   | PipelineIntentEndEvent
   | PipelineTTSStartEvent
   | PipelineTTSEndEvent;

src/data/backup.ts

@@ -1,6 +1,8 @@
+import { memoize } from "@fullcalendar/core/internal";
 import { setHours, setMinutes } from "date-fns";
 import type { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import checkValidDate from "../common/datetime/check_valid_date";
 import {
   formatDateTime,
   formatDateTimeNumeric,
@@ -11,7 +13,6 @@ import type { HomeAssistant } from "../types";
 import { fileDownload } from "../util/file_download";
 import { domainToName } from "./integration";
 import type { FrontendLocaleData } from "./translation";
-import checkValidDate from "../common/datetime/check_valid_date";
 
 export const enum BackupScheduleRecurrence {
   NEVER = "never",
@@ -104,6 +105,9 @@ export interface BackupContent {
   name: string;
   agents: Record<string, BackupContentAgent>;
   failed_agent_ids?: string[];
+  extra_metadata?: {
+    "supervisor.addon_update"?: string;
+  };
   with_automatic_settings: boolean;
 }
 
@@ -319,6 +323,29 @@ export const computeBackupAgentName = (
 export const computeBackupSize = (backup: BackupContent) =>
   Math.max(...Object.values(backup.agents).map((agent) => agent.size));
 
+export type BackupType = "automatic" | "manual" | "addon_update";
+
+const BACKUP_TYPE_ORDER: BackupType[] = ["automatic", "manual", "addon_update"];
+
+export const getBackupTypes = memoize((isHassio: boolean) =>
+  isHassio
+    ? BACKUP_TYPE_ORDER
+    : BACKUP_TYPE_ORDER.filter((type) => type !== "addon_update")
+);
+
+export const computeBackupType = (
+  backup: BackupContent,
+  isHassio: boolean
+): BackupType => {
+  if (backup.with_automatic_settings) {
+    return "automatic";
+  }
+  if (isHassio && backup.extra_metadata?.["supervisor.addon_update"] != null) {
+    return "addon_update";
+  }
+  return "manual";
+};
+
 export const compareAgents = (a: string, b: string) => {
   const isLocalA = isLocalAgent(a);
   const isLocalB = isLocalAgent(b);

src/data/cloud.ts

@@ -181,3 +181,6 @@ export const updateCloudGoogleEntityConfig = (
 
 export const cloudSyncGoogleAssistant = (hass: HomeAssistant) =>
   hass.callApi("POST", "cloud/google_actions/sync");
+
+export const fetchSupportPackage = (hass: HomeAssistant) =>
+  hass.callApi<string>("GET", "cloud/support_package");

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -19,6 +19,7 @@ import { showAlertDialog } from "../generic/show-dialog-box";
 import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { navigate } from "../../common/navigate";
 
 @customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@@ -65,7 +66,8 @@ class StepFlowCreateEntry extends LitElement {
 
     if (
       devices.length !== 1 ||
-      devices[0].primary_config_entry !== this.step.result?.entry_id
+      devices[0].primary_config_entry !== this.step.result?.entry_id ||
+      this.step.result.domain === "voip"
     ) {
       return;
     }
@@ -151,6 +153,11 @@ class StepFlowCreateEntry extends LitElement {
 
   private _flowDone(): void {
     fireEvent(this, "flow-update", { step: undefined });
+    if (this.step.result) {
+      navigate(
+        `/config/integrations/integration/${this.step.result.domain}#config_entry=${this.step.result.entry_id}`
+      );
+    }
   }
 
   private async _areaPicked(ev: CustomEvent) {

src/dialogs/more-info/const.ts

@@ -33,6 +33,7 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "switch",
   "valve",
   "water_heater",
+  "weather",
 ];
 /** Domains with full height more info dialog */
 export const DOMAINS_FULL_HEIGHT_MORE_INFO = ["update"];

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

@@ -448,6 +448,10 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       margin-bottom: -16px;
       margin-top: -4px;
+      --md-sys-color-surface: var(
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
+      );
     }
 
     ha-md-list-item {

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

@@ -1,18 +1,13 @@
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
-import {
-  mdiEye,
-  mdiGauge,
-  mdiThermometer,
-  mdiWaterPercent,
-  mdiWeatherWindy,
-} from "@mdi/js";
-import type { PropertyValues } from "lit";
+import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
+import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { formatDateWeekdayDay } from "../../../common/datetime/format_date";
-import { formatTimeWeekday } from "../../../common/datetime/format_time";
+import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
+import { formatTime } from "../../../common/datetime/format_time";
+import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-svg-icon";
 import type {
   ForecastEvent,
@@ -23,11 +18,16 @@ import {
   getDefaultForecastType,
   getForecast,
   getSupportedForecastTypes,
+  getSecondaryWeatherAttribute,
+  getWeatherStateIcon,
+  getWeatherUnit,
   getWind,
   subscribeForecast,
-  weatherIcons,
+  weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-state-icon";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -137,23 +137,90 @@ class MoreInfoWeather extends LitElement {
     const hourly = forecastData?.type === "hourly";
     const dayNight = forecastData?.type === "twice_daily";
 
+    const weatherStateIcon = getWeatherStateIcon(this.stateObj.state, this);
+
     return html`
-      ${this._showValue(this.stateObj.attributes.temperature)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.temperature")}
-              </div>
-              <div>
-                ${this.hass.formatEntityAttributeValue(
-                  this.stateObj,
-                  "temperature"
-                )}
-              </div>
+      <div class="content">
+        <div class="icon-image">
+          ${weatherStateIcon ||
+          html`
+            <ha-state-icon
+              class="weather-icon"
+              .stateObj=${this.stateObj}
+              .hass=${this.hass}
+            ></ha-state-icon>
+          `}
+        </div>
+        <div class="info">
+          <div class="name-state">
+            <div class="state">
+              ${this.hass.formatEntityState(this.stateObj)}
             </div>
-          `
-        : ""}
+            <div class="time-ago">
+              <ha-relative-time
+                id="last_changed"
+                .hass=${this.hass}
+                .datetime=${this.stateObj.last_changed}
+                capitalize
+              ></ha-relative-time>
+              <simple-tooltip animation-delay="0" for="last_changed">
+                <div>
+                  <div class="row">
+                    <span class="column-name">
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_changed"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_changed}
+                      capitalize
+                    ></ha-relative-time>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_updated"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_updated}
+                      capitalize
+                    ></ha-relative-time>
+                  </div>
+                </div>
+              </simple-tooltip>
+            </div>
+          </div>
+          <div class="temp-attribute">
+            <div class="temp">
+              ${this.stateObj.attributes.temperature !== undefined &&
+              this.stateObj.attributes.temperature !== null
+                ? html`
+                    ${formatNumber(
+                      this.stateObj.attributes.temperature,
+                      this.hass.locale
+                    )}&nbsp;<span
+                      >${getWeatherUnit(
+                        this.hass.config,
+                        this.stateObj,
+                        "temperature"
+                      )}</span
+                    >
+                  `
+                : nothing}
+            </div>
+            <div class="attribute">
+              ${getSecondaryWeatherAttribute(
+                this.hass,
+                this.stateObj,
+                forecast!
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
       ${this._showValue(this.stateObj.attributes.pressure)
         ? html`
             <div class="flex">
@@ -169,7 +236,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : ""}
+        : nothing}
       ${this._showValue(this.stateObj.attributes.humidity)
         ? html`
             <div class="flex">
@@ -185,7 +252,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : ""}
+        : nothing}
       ${this._showValue(this.stateObj.attributes.wind_speed)
         ? html`
             <div class="flex">
@@ -203,7 +270,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : ""}
+        : nothing}
       ${this._showValue(this.stateObj.attributes.visibility)
         ? html`
             <div class="flex">
@@ -219,7 +286,7 @@ class MoreInfoWeather extends LitElement {
               </div>
             </div>
           `
-        : ""}
+        : nothing}
       ${forecast
         ? html`
             <div class="section">
@@ -242,76 +309,90 @@ class MoreInfoWeather extends LitElement {
                   )}
                 </mwc-tab-bar>`
               : nothing}
-            ${forecast.map((item) =>
-              this._showValue(item.templow) || this._showValue(item.temperature)
-                ? html`<div class="flex">
-                    ${item.condition
-                      ? html`
-                          <ha-svg-icon
-                            .path=${weatherIcons[item.condition]}
-                          ></ha-svg-icon>
-                        `
-                      : ""}
-                    <div class="main">
-                      ${dayNight
-                        ? html`
-                            ${formatDateWeekdayDay(
-                              new Date(item.datetime),
-                              this.hass!.locale,
-                              this.hass!.config
-                            )}
-                            (${item.is_daytime !== false
-                              ? this.hass!.localize("ui.card.weather.day")
-                              : this.hass!.localize("ui.card.weather.night")})
-                          `
-                        : hourly
+            <div class="forecast">
+              ${forecast.map((item) =>
+                this._showValue(item.templow) ||
+                this._showValue(item.temperature)
+                  ? html`
+                      <div>
+                        <div>
+                          ${dayNight
+                            ? html`
+                                ${formatDateWeekdayShort(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                                <div class="daynight">
+                                  ${item.is_daytime !== false
+                                    ? this.hass!.localize("ui.card.weather.day")
+                                    : this.hass!.localize(
+                                        "ui.card.weather.night"
+                                      )}<br />
+                                </div>
+                              `
+                            : hourly
+                              ? html`
+                                  ${formatTime(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `
+                              : html`
+                                  ${formatDateWeekdayShort(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `}
+                        </div>
+                        ${this._showValue(item.condition)
                           ? html`
-                              ${formatTimeWeekday(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
+                              <div class="forecast-image-icon">
+                                ${getWeatherStateIcon(
+                                  item.condition!,
+                                  this,
+                                  !(
+                                    item.is_daytime ||
+                                    item.is_daytime === undefined
+                                  )
+                                )}
+                              </div>
                             `
-                          : html`
-                              ${formatDateWeekdayDay(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
-                            `}
-                    </div>
-                    <div class="templow">
-                      ${this._showValue(item.templow)
-                        ? this.hass.formatEntityAttributeValue(
-                            this.stateObj!,
-                            "templow",
-                            item.templow
-                          )
-                        : hourly
-                          ? ""
-                          : "—"}
-                    </div>
-                    <div class="temp">
-                      ${this._showValue(item.temperature)
-                        ? this.hass.formatEntityAttributeValue(
-                            this.stateObj!,
-                            "temperature",
-                            item.temperature
-                          )
-                        : "—"}
-                    </div>
-                  </div>`
-                : ""
-            )}
+                          : nothing}
+                        <div class="temp">
+                          ${this._showValue(item.temperature)
+                            ? html`${formatNumber(
+                                item.temperature,
+                                this.hass!.locale
+                              )}°`
+                            : "—"}
+                        </div>
+                        <div class="templow">
+                          ${this._showValue(item.templow)
+                            ? html`${formatNumber(
+                                item.templow!,
+                                this.hass!.locale
+                              )}°`
+                            : hourly
+                              ? nothing
+                              : "—"}
+                        </div>
+                      </div>
+                    `
+                  : nothing
+              )}
+            </div>
           `
-        : ""}
+        : nothing}
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
               ${this.stateObj.attributes.attribution}
             </div>
           `
-        : ""}
+        : nothing}
     `;
   }
 
@@ -321,56 +402,186 @@ class MoreInfoWeather extends LitElement {
     ];
   }
 
-  static styles = css`
-    ha-svg-icon {
-      color: var(--paper-item-icon-color);
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: initial;
-    }
+  static get styles(): CSSResultGroup {
+    return [
+      weatherSVGStyles,
+      css`
+        ha-svg-icon {
+          color: var(--paper-item-icon-color);
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+        }
 
-    mwc-tab-bar {
-      margin-bottom: 4px;
-    }
+        mwc-tab-bar {
+          margin-bottom: 4px;
+        }
 
-    .section {
-      margin: 16px 0 8px 0;
-      font-size: 1.2em;
-    }
+        .section {
+          margin: 16px 0 8px 0;
+          font-size: 1.2em;
+        }
 
-    .flex {
-      display: flex;
-      height: 32px;
-      align-items: center;
-    }
-    .flex > div:last-child {
-      direction: ltr;
-    }
+        .flex {
+          display: flex;
+          height: 32px;
+          align-items: center;
+        }
+        .flex > div:last-child {
+          direction: ltr;
+        }
 
-    .main {
-      flex: 1;
-      margin-left: 24px;
-      margin-inline-start: 24px;
-      margin-inline-end: initial;
-    }
+        .main {
+          flex: 1;
+          margin-left: 24px;
+          margin-inline-start: 24px;
+          margin-inline-end: initial;
+        }
 
-    .temp,
-    .templow {
-      min-width: 48px;
-      text-align: right;
-      direction: ltr;
-    }
+        .attribution {
+          text-align: center;
+          margin-top: 16px;
+        }
 
-    .templow {
-      margin: 0 16px;
-      color: var(--secondary-text-color);
-    }
+        .time-ago,
+        .attribute {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-    .attribution {
-      color: var(--secondary-text-color);
-      text-align: center;
-    }
-  `;
+        .attribution,
+        .templow,
+        .daynight,
+        .attribute,
+        .time-ago {
+          color: var(--secondary-text-color);
+        }
+
+        .content {
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
+        }
+
+        .icon-image {
+          display: flex;
+          align-items: center;
+          min-width: 64px;
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+        }
+
+        .icon-image > * {
+          flex: 0 0 64px;
+          height: 64px;
+        }
+
+        .weather-icon {
+          --mdc-icon-size: 64px;
+        }
+
+        .info {
+          display: flex;
+          justify-content: space-between;
+          flex-grow: 1;
+          overflow: hidden;
+        }
+
+        .temp-attribute {
+          text-align: var(--float-end);
+        }
+
+        .temp-attribute .temp {
+          position: relative;
+          margin-right: 24px;
+          direction: ltr;
+        }
+
+        .temp-attribute .temp span {
+          position: absolute;
+          font-size: 24px;
+          top: 1px;
+        }
+
+        .state,
+        .temp-attribute .temp {
+          font-size: 28px;
+          line-height: 1.2;
+        }
+
+        .attribute {
+          font-size: 14px;
+          line-height: 1;
+        }
+
+        .name-state {
+          overflow: hidden;
+          padding-right: 12px;
+          padding-inline-end: 12px;
+          padding-inline-start: initial;
+          width: 100%;
+        }
+
+        .state {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .forecast {
+          display: flex;
+          justify-content: space-around;
+          padding: 16px;
+          padding-bottom: 0px;
+          overflow-x: auto;
+          scrollbar-color: var(--scrollbar-thumb-color) transparent;
+          scrollbar-width: thin;
+          mask-image: linear-gradient(
+            90deg,
+            transparent 0%,
+            black 5%,
+            black 94%,
+            transparent 100%
+          );
+        }
+
+        .forecast > div {
+          text-align: center;
+          padding: 0 10px;
+        }
+
+        .forecast .icon,
+        .forecast .temp {
+          margin: 4px 0;
+        }
+
+        .forecast .temp {
+          font-size: 16px;
+        }
+
+        .forecast-image-icon {
+          padding-top: 4px;
+          padding-bottom: 4px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .forecast-image-icon > * {
+          width: 40px;
+          height: 40px;
+          --mdc-icon-size: 40px;
+        }
+
+        .forecast-icon {
+          --mdc-icon-size: 40px;
+        }
+      `,
+    ];
+  }
 
   private _showValue(item: number | string | undefined): boolean {
     return typeof item !== "undefined" && item !== null;

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

@@ -47,6 +47,8 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
 
   @state() private _assistConfiguration?: AssistSatelliteConfiguration;
 
+  @state() private _error?: string;
+
   private _previousSteps: STEP[] = [];
 
   private _nextStep?: STEP;
@@ -165,79 +167,86 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                   "update"
                 )}
               ></ha-voice-assistant-setup-step-update>`
-            : assistEntityState?.state === UNAVAILABLE
-              ? this.hass.localize(
-                  "ui.panel.config.voice_assistants.satellite_wizard.not_available"
-                )
-              : this._step === STEP.CHECK
-                ? html`<ha-voice-assistant-setup-step-check
-                    .hass=${this.hass}
-                    .assistEntityId=${assistSatelliteEntityId}
-                  ></ha-voice-assistant-setup-step-check>`
-                : this._step === STEP.WAKEWORD
-                  ? html`<ha-voice-assistant-setup-step-wake-word
+            : this._error
+              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              : assistEntityState?.state === UNAVAILABLE
+                ? html`<ha-alert alert-type="error"
+                    >${this.hass.localize(
+                      "ui.panel.config.voice_assistants.satellite_wizard.not_available"
+                    )}</ha-alert
+                  >`
+                : this._step === STEP.CHECK
+                  ? html`<ha-voice-assistant-setup-step-check
                       .hass=${this.hass}
-                      .assistConfiguration=${this._assistConfiguration}
                       .assistEntityId=${assistSatelliteEntityId}
-                      .deviceEntities=${this._deviceEntities(
-                        this._params.deviceId,
-                        this.hass.entities
-                      )}
-                    ></ha-voice-assistant-setup-step-wake-word>`
-                  : this._step === STEP.CHANGE_WAKEWORD
-                    ? html`
-                        <ha-voice-assistant-setup-step-change-wake-word
-                          .hass=${this.hass}
-                          .assistConfiguration=${this._assistConfiguration}
-                          .assistEntityId=${assistSatelliteEntityId}
-                        ></ha-voice-assistant-setup-step-change-wake-word>
-                      `
-                    : this._step === STEP.AREA
+                    ></ha-voice-assistant-setup-step-check>`
+                  : this._step === STEP.WAKEWORD
+                    ? html`<ha-voice-assistant-setup-step-wake-word
+                        .hass=${this.hass}
+                        .assistConfiguration=${this._assistConfiguration}
+                        .assistEntityId=${assistSatelliteEntityId}
+                        .deviceEntities=${this._deviceEntities(
+                          this._params.deviceId,
+                          this.hass.entities
+                        )}
+                      ></ha-voice-assistant-setup-step-wake-word>`
+                    : this._step === STEP.CHANGE_WAKEWORD
                       ? html`
-                          <ha-voice-assistant-setup-step-area
-                            .hass=${this.hass}
-                            .deviceId=${this._params.deviceId}
-                          ></ha-voice-assistant-setup-step-area>
-                        `
-                      : this._step === STEP.PIPELINE
-                        ? html`<ha-voice-assistant-setup-step-pipeline
+                          <ha-voice-assistant-setup-step-change-wake-word
                             .hass=${this.hass}
                             .assistConfiguration=${this._assistConfiguration}
                             .assistEntityId=${assistSatelliteEntityId}
-                          ></ha-voice-assistant-setup-step-pipeline>`
-                        : this._step === STEP.CLOUD
-                          ? html`<ha-voice-assistant-setup-step-cloud
+                          ></ha-voice-assistant-setup-step-change-wake-word>
+                        `
+                      : this._step === STEP.AREA
+                        ? html`
+                            <ha-voice-assistant-setup-step-area
                               .hass=${this.hass}
-                            ></ha-voice-assistant-setup-step-cloud>`
-                          : this._step === STEP.LOCAL
-                            ? html`<ha-voice-assistant-setup-step-local
+                              .deviceId=${this._params.deviceId}
+                            ></ha-voice-assistant-setup-step-area>
+                          `
+                        : this._step === STEP.PIPELINE
+                          ? html`<ha-voice-assistant-setup-step-pipeline
+                              .hass=${this.hass}
+                              .assistConfiguration=${this._assistConfiguration}
+                              .assistEntityId=${assistSatelliteEntityId}
+                            ></ha-voice-assistant-setup-step-pipeline>`
+                          : this._step === STEP.CLOUD
+                            ? html`<ha-voice-assistant-setup-step-cloud
                                 .hass=${this.hass}
-                                .assistConfiguration=${this
-                                  ._assistConfiguration}
-                              ></ha-voice-assistant-setup-step-local>`
-                            : this._step === STEP.SUCCESS
-                              ? html`<ha-voice-assistant-setup-step-success
+                              ></ha-voice-assistant-setup-step-cloud>`
+                            : this._step === STEP.LOCAL
+                              ? html`<ha-voice-assistant-setup-step-local
                                   .hass=${this.hass}
                                   .assistConfiguration=${this
                                     ._assistConfiguration}
-                                  .assistEntityId=${assistSatelliteEntityId}
-                                ></ha-voice-assistant-setup-step-success>`
-                              : nothing}
+                                ></ha-voice-assistant-setup-step-local>`
+                              : this._step === STEP.SUCCESS
+                                ? html`<ha-voice-assistant-setup-step-success
+                                    .hass=${this.hass}
+                                    .assistConfiguration=${this
+                                      ._assistConfiguration}
+                                    .assistEntityId=${assistSatelliteEntityId}
+                                  ></ha-voice-assistant-setup-step-success>`
+                                : nothing}
         </div>
       </ha-dialog>
     `;
   }
 
   private async _fetchAssistConfiguration() {
-    this._assistConfiguration = await fetchAssistSatelliteConfiguration(
-      this.hass,
-      this._findDomainEntityId(
-        this._params!.deviceId,
-        this.hass.entities,
-        "assist_satellite"
-      )!
-    );
-    return this._assistConfiguration;
+    try {
+      this._assistConfiguration = await fetchAssistSatelliteConfiguration(
+        this.hass,
+        this._findDomainEntityId(
+          this._params!.deviceId,
+          this.hass.entities,
+          "assist_satellite"
+        )!
+      );
+    } catch (err: any) {
+      this._error = err.message;
+    }
   }
 
   private _goToPreviousStep() {
@@ -293,6 +302,10 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
         .skip-btn {
           margin-top: 6px;
         }
+        ha-alert {
+          margin: 24px;
+          display: block;
+        }
       `,
     ];
   }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -85,7 +85,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
         <div class="rows">
           ${this.assistConfiguration &&
           this.assistConfiguration.available_wake_words.length > 1
-            ? html` <div class="row">
+            ? html`<div class="row">
                 <ha-select
                   .label=${"Wake word"}
                   @closed=${stopPropagation}

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -44,6 +44,15 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
   protected override willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties);
 
+    if (changedProperties.has("assistConfiguration")) {
+      if (
+        this.assistConfiguration &&
+        !this.assistConfiguration.available_wake_words.length
+      ) {
+        this._nextStep();
+      }
+    }
+
     if (changedProperties.has("assistEntityId")) {
       this._detected = false;
       this._muteSwitchEntity = this.deviceEntities?.find(
@@ -135,13 +144,16 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
               >`
             : nothing}
       </div>
-      <div class="footer centered">
-        <ha-button @click=${this._changeWakeWord}
-          >${this.hass.localize(
-            "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
-          )}</ha-button
-        >
-      </div>`;
+      ${this.assistConfiguration &&
+      this.assistConfiguration.available_wake_words.length > 1
+        ? html`<div class="footer centered">
+            <ha-button @click=${this._changeWakeWord}
+              >${this.hass.localize(
+                "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
+              )}</ha-button
+            >
+          </div>`
+        : nothing}`;
   }
 
   private async _listenWakeWord() {

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -106,6 +106,7 @@ export class HaConfigApplicationCredentials extends LitElement {
         },
         actions: {
           title: "",
+          label: localize("ui.panel.config.generic.headers.actions"),
           type: "overflow-menu",
           showNarrow: true,
           hideable: false,

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

@@ -329,6 +329,9 @@ class DialogAreaDetail extends LitElement {
     return [
       haStyleDialog,
       css`
+        ha-textfield {
+          display: block;
+        }
         ha-aliases-editor,
         ha-entity-picker,
         ha-floor-picker,

src/panels/config/automation/add-automation-element-dialog.ts

@@ -11,17 +11,16 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stringCompare } from "../../../common/string/compare";
-import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-dialog";
 import type { HaDialog } from "../../../components/ha-dialog";
 import "../../../components/ha-dialog-header";
-import "../../../components/ha-md-divider";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import "../../../components/ha-service-icon";
@@ -45,7 +44,6 @@ import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { getStripDiacriticsFn } from "../../../util/fuse";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
 
@@ -202,10 +200,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         ignoreLocation: true,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        getFn: getStripDiacriticsFn,
+        ignoreDiacritics: true,
       };
       const fuse = new Fuse(items, options);
-      return fuse.search(stripDiacritics(filter)).map((result) => result.item);
+      return fuse.search(filter).map((result) => result.item);
     }
   );
 

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

@@ -1,4 +1,4 @@
-import { mdiCog, mdiHarddisk, mdiNas } from "@mdi/js";
+import { mdiCog, mdiDelete, mdiHarddisk, mdiNas } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -41,13 +41,6 @@ class HaBackupConfigAgents extends LitElement {
 
   @state() private value?: string[];
 
-  private _availableAgents = memoizeOne(
-    (agents: BackupAgent[], cloudStatus: CloudStatus) =>
-      agents.filter(
-        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus.logged_in
-      )
-  );
-
   private get _value() {
     return this.value ?? DEFAULT_AGENTS;
   }
@@ -86,19 +79,84 @@ class HaBackupConfigAgents extends LitElement {
     return "";
   }
 
-  protected render() {
-    const agents = this._availableAgents(this.agents, this.cloudStatus);
+  private _availableAgents = memoizeOne(
+    (agents: BackupAgent[], cloudStatus: CloudStatus) =>
+      agents.filter(
+        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus.logged_in
+      )
+  );
+
+  private _unavailableAgents = memoizeOne(
+    (
+      agents: BackupAgent[],
+      cloudStatus: CloudStatus,
+      selectedAgentIds: string[]
+    ) => {
+      const availableAgentIds = this._availableAgents(agents, cloudStatus).map(
+        (agent) => agent.agent_id
+      );
+
+      return selectedAgentIds
+        .filter((agent) => !availableAgentIds.includes(agent))
+        .map<BackupAgent>((id) => ({
+          agent_id: id,
+          name: id.split(".")[1] || id, // Use the id as name as it is not available in the list
+        }));
+    }
+  );
+
+  private _renderAgentIcon(agentId: string) {
+    if (isLocalAgent(agentId)) {
+      return html`
+        <ha-svg-icon .path=${mdiHarddisk} slot="start"></ha-svg-icon>
+      `;
+    }
+
+    if (isNetworkMountAgent(agentId)) {
+      return html`<ha-svg-icon .path=${mdiNas} slot="start"></ha-svg-icon>`;
+    }
+
+    const domain = computeDomain(agentId);
+
     return html`
-      ${agents.length > 0
+      <img
+        .src=${brandsUrl({
+          domain,
+          type: "icon",
+          useFallback: true,
+          darkOptimized: this.hass.themes?.darkMode,
+        })}
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+        alt=""
+        slot="start"
+      />
+    `;
+  }
+
+  protected render() {
+    const availableAgents = this._availableAgents(
+      this.agents,
+      this.cloudStatus
+    );
+    const unavailableAgents = this._unavailableAgents(
+      this.agents,
+      this.cloudStatus,
+      this._value
+    );
+
+    const allAgents = [...availableAgents, ...unavailableAgents];
+
+    return html`
+      ${allAgents.length > 0
         ? html`
             <ha-md-list>
-              ${agents.map((agent) => {
+              ${availableAgents.map((agent) => {
                 const agentId = agent.agent_id;
-                const domain = computeDomain(agentId);
                 const name = computeBackupAgentName(
                   this.hass.localize,
                   agentId,
-                  this.agents
+                  allAgents
                 );
                 const description = this._description(agentId);
                 const noCloudSubscription =
@@ -108,32 +166,7 @@ class HaBackupConfigAgents extends LitElement {
 
                 return html`
                   <ha-md-list-item>
-                    ${isLocalAgent(agentId)
-                      ? html`
-                          <ha-svg-icon .path=${mdiHarddisk} slot="start">
-                          </ha-svg-icon>
-                        `
-                      : isNetworkMountAgent(agentId)
-                        ? html`
-                            <ha-svg-icon
-                              .path=${mdiNas}
-                              slot="start"
-                            ></ha-svg-icon>
-                          `
-                        : html`
-                            <img
-                              .src=${brandsUrl({
-                                domain,
-                                type: "icon",
-                                useFallback: true,
-                                darkOptimized: this.hass.themes?.darkMode,
-                              })}
-                              crossorigin="anonymous"
-                              referrerpolicy="no-referrer"
-                              alt=""
-                              slot="start"
-                            />
-                          `}
+                    ${this._renderAgentIcon(agentId)}
                     <div slot="headline" class="name">${name}</div>
                     ${description
                       ? html`<div slot="supporting-text">${description}</div>`
@@ -151,14 +184,44 @@ class HaBackupConfigAgents extends LitElement {
                     <ha-switch
                       slot="end"
                       id=${agentId}
-                      .checked=${!noCloudSubscription &&
-                      this._value.includes(agentId)}
-                      .disabled=${noCloudSubscription}
+                      .checked=${this._value.includes(agentId)}
+                      .disabled=${noCloudSubscription &&
+                      !this._value.includes(agentId)}
                       @change=${this._agentToggled}
                     ></ha-switch>
                   </ha-md-list-item>
                 `;
               })}
+              ${unavailableAgents.length > 0 && this.showSettings
+                ? html`
+                    <p class="heading">
+                      ${this.hass.localize(
+                        "ui.panel.config.backup.agents.unavailable_agents"
+                      )}
+                    </p>
+                    ${unavailableAgents.map((agent) => {
+                      const agentId = agent.agent_id;
+                      const name = computeBackupAgentName(
+                        this.hass.localize,
+                        agentId,
+                        allAgents
+                      );
+
+                      return html`
+                        <ha-md-list-item>
+                          ${this._renderAgentIcon(agentId)}
+                          <div slot="headline" class="name">${name}</div>
+                          <ha-icon-button
+                            id=${agentId}
+                            slot="end"
+                            path=${mdiDelete}
+                            @click=${this._deleteAgent}
+                          ></ha-icon-button>
+                        </ha-md-list-item>
+                      `;
+                    })}
+                  `
+                : nothing}
             </ha-md-list>
           `
         : html`
@@ -174,6 +237,13 @@ class HaBackupConfigAgents extends LitElement {
     navigate(`/config/backup/location/${agentId}`);
   }
 
+  private _deleteAgent(ev): void {
+    ev.stopPropagation();
+    const agentId = ev.currentTarget.id;
+    this.value = this._value.filter((agent) => agent !== agentId);
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+
   private _agentToggled(ev) {
     ev.stopPropagation();
     const value = ev.currentTarget.checked;
@@ -185,19 +255,8 @@ class HaBackupConfigAgents extends LitElement {
       this.value = this._value.filter((agent) => agent !== agentId);
     }
 
-    const availableAgents = this._availableAgents(
-      this.agents,
-      this.cloudStatus
-    );
-
     // Ensure we don't have duplicates, agents exist in the list and cloud is logged in
-    this.value = [...new Set(this.value)]
-      .filter((id) => availableAgents.some((agent) => agent.agent_id === id))
-      .filter(
-        (id) =>
-          id !== CLOUD_AGENT ||
-          (this.cloudStatus.logged_in && this.cloudStatus.active_subscription)
-      );
+    this.value = [...new Set(this.value)];
 
     fireEvent(this, "value-changed", { value: this.value });
   }

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

@@ -378,8 +378,9 @@ class HaBackupConfigData extends LitElement {
     }
     @media all and (max-width: 450px) {
       ha-md-select {
-        min-width: 160px;
-        width: 160px;
+        min-width: 140px;
+        width: 140px;
+        --md-filled-field-content-space: 0;
       }
     }
   `;

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

@@ -403,11 +403,11 @@ class HaBackupConfigSchedule extends LitElement {
             backup_create: html`<a
               href=${documentationUrl(
                 this.hass,
-                "/integrations/backup#example-backing-up-every-night-at-300-am"
+                "/integrations/backup/#action-backupcreate_automatic"
               )}
               target="_blank"
               rel="noopener noreferrer"
-              >backup.create</a
+              >backup.create_automatic</a
             >`,
           })}</ha-tip
         >
@@ -537,14 +537,22 @@ class HaBackupConfigSchedule extends LitElement {
     ha-md-list-item {
       --md-item-overflow: visible;
     }
-    ha-md-select,
-    ha-time-input {
+    ha-md-select {
       min-width: 210px;
     }
+    ha-time-input {
+      min-width: 194px;
+      --time-input-flex: 1;
+    }
     @media all and (max-width: 450px) {
-      ha-md-select,
-      ha-time-input {
+      ha-md-select {
         min-width: 160px;
+        width: 160px;
+        --md-filled-field-content-space: 0;
+      }
+      ha-time-input {
+        min-width: 145px;
+        width: 145px;
       }
     }
     ha-md-textfield#value {
@@ -553,6 +561,16 @@ class HaBackupConfigSchedule extends LitElement {
     ha-md-select#type {
       min-width: 100px;
     }
+    @media all and (max-width: 450px) {
+      ha-md-textfield#value {
+        min-width: 60px;
+        margin: 0 -8px;
+      }
+      ha-md-select#type {
+        min-width: 120px;
+        width: 120px;
+      }
+    }
     ha-expansion-panel {
       --expansion-panel-summary-padding: 0 16px;
       --expansion-panel-content-padding: 0 16px;

src/panels/config/backup/components/overview/ha-backup-overview-backups.ts

@@ -1,16 +1,19 @@
-import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
+import { mdiCalendarSync, mdiGestureTap, mdiPuzzle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
+import type { BackupContent, BackupType } from "../../../../../data/backup";
 import {
   computeBackupSize,
-  type BackupContent,
+  computeBackupType,
+  getBackupTypes,
 } from "../../../../../data/backup";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -21,6 +24,12 @@ interface BackupStats {
   size: number;
 }
 
+const TYPE_ICONS: Record<BackupType, string> = {
+  automatic: mdiCalendarSync,
+  manual: mdiGestureTap,
+  addon_update: mdiPuzzle,
+};
+
 const computeBackupStats = (backups: BackupContent[]): BackupStats =>
   backups.reduce(
     (stats, backup) => {
@@ -37,23 +46,22 @@ class HaBackupOverviewBackups extends LitElement {
 
   @property({ attribute: false }) public backups: BackupContent[] = [];
 
-  private _automaticStats = memoizeOne((backups: BackupContent[]) => {
-    const automaticBackups = backups.filter(
-      (backup) => backup.with_automatic_settings
-    );
-    return computeBackupStats(automaticBackups);
-  });
-
-  private _manualStats = memoizeOne((backups: BackupContent[]) => {
-    const manualBackups = backups.filter(
-      (backup) => !backup.with_automatic_settings
-    );
-    return computeBackupStats(manualBackups);
-  });
+  private _stats = memoizeOne(
+    (
+      backups: BackupContent[],
+      isHassio: boolean
+    ): [BackupType, BackupStats][] =>
+      getBackupTypes(isHassio).map((type) => {
+        const backupsOfType = backups.filter(
+          (backup) => computeBackupType(backup, isHassio) === type
+        );
+        return [type, computeBackupStats(backupsOfType)] as const;
+      })
+  );
 
   render() {
-    const automaticStats = this._automaticStats(this.backups);
-    const manualStats = this._manualStats(this.backups);
+    const isHassio = isComponentLoaded(this.hass, "hassio");
+    const stats = this._stats(this.backups, isHassio);
 
     return html`
       <ha-card class="my-backups">
@@ -62,44 +70,32 @@ class HaBackupOverviewBackups extends LitElement {
         </div>
         <div class="card-content">
           <ha-md-list>
-            <ha-md-list-item
-              type="link"
-              href="/config/backup/backups?type=automatic"
-            >
-              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.overview.backups.automatic",
-                  { count: automaticStats.count }
-                )}
-              </div>
-              <div slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.overview.backups.total_size",
-                  { size: bytesToString(automaticStats.size, 1) }
-                )}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
-            <ha-md-list-item
-              type="link"
-              href="/config/backup/backups?type=manual"
-            >
-              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
-              <div slot="headline">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.overview.backups.manual",
-                  { count: manualStats.count }
-                )}
-              </div>
-              <div slot="supporting-text">
-                ${this.hass.localize(
-                  "ui.panel.config.backup.overview.backups.total_size",
-                  { size: bytesToString(manualStats.size, 1) }
-                )}
-              </div>
-              <ha-icon-next slot="end"></ha-icon-next>
-            </ha-md-list-item>
+            ${stats.map(
+              ([type, { count, size }]) => html`
+                <ha-md-list-item
+                  type="link"
+                  href="/config/backup/backups?type=${type}"
+                >
+                  <ha-svg-icon
+                    slot="start"
+                    .path=${TYPE_ICONS[type]}
+                  ></ha-svg-icon>
+                  <div slot="headline">
+                    ${this.hass.localize(
+                      `ui.panel.config.backup.overview.backups.${type}`,
+                      { count }
+                    )}
+                  </div>
+                  <div slot="supporting-text">
+                    ${this.hass.localize(
+                      "ui.panel.config.backup.overview.backups.total_size",
+                      { size: bytesToString(size) }
+                    )}
+                  </div>
+                  <ha-icon-next slot="end"></ha-icon-next>
+                </ha-md-list-item>
+              `
+            )}
           </ha-md-list>
         </div>
         <div class="card-actions">

src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts

@@ -0,0 +1,225 @@
+import { mdiClose } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-icon-next";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-md-list";
+import "../../../../components/ha-md-list-item";
+import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-password-field";
+import "../../../../components/ha-alert";
+import {
+  canDecryptBackupOnDownload,
+  getPreferredAgentForDownload,
+} from "../../../../data/backup";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { downloadBackupFile } from "../helper/download_backup";
+import type { DownloadDecryptedBackupDialogParams } from "./show-dialog-download-decrypted-backup";
+
+@customElement("ha-dialog-download-decrypted-backup")
+class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _opened = false;
+
+  @state() private _params?: DownloadDecryptedBackupDialogParams;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  @state() private _encryptionKey = "";
+
+  @state() private _error = "";
+
+  public showDialog(params: DownloadDecryptedBackupDialogParams): void {
+    this._opened = true;
+    this._params = params;
+  }
+
+  public closeDialog() {
+    this._dialog?.close();
+    return true;
+  }
+
+  private _dialogClosed() {
+    if (this._opened) {
+      fireEvent(this, "dialog-closed", { dialog: this.localName });
+    }
+    this._opened = false;
+    this._params = undefined;
+    this._encryptionKey = "";
+    this._error = "";
+  }
+
+  protected render() {
+    if (!this._opened || !this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed} disable-cancel-action>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">
+            ${this.hass.localize(
+              "ui.panel.config.backup.dialogs.download.title"
+            )}
+          </span>
+        </ha-dialog-header>
+
+        <div slot="content">
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.backup.dialogs.download.description"
+            )}
+          </p>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.backup.dialogs.download.download_backup_encrypted",
+              {
+                download_it_encrypted: html`<button
+                  class="link"
+                  @click=${this._downloadEncrypted}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.backup.dialogs.download.download_it_encrypted"
+                  )}
+                </button>`,
+              }
+            )}
+          </p>
+
+          <ha-password-field
+            .label=${this.hass.localize(
+              "ui.panel.config.backup.dialogs.download.encryption_key"
+            )}
+            @input=${this._keyChanged}
+          ></ha-password-field>
+
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing}
+        </div>
+        <div slot="actions">
+          <ha-button @click=${this._cancel}>
+            ${this.hass.localize("ui.dialogs.generic.cancel")}
+          </ha-button>
+
+          <ha-button @click=${this._submit}>
+            ${this.hass.localize(
+              "ui.panel.config.backup.dialogs.download.download"
+            )}
+          </ha-button>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private _cancel() {
+    this.closeDialog();
+  }
+
+  private async _submit() {
+    if (this._encryptionKey === "") {
+      return;
+    }
+    try {
+      await canDecryptBackupOnDownload(
+        this.hass,
+        this._params!.backup.backup_id,
+        this._agentId,
+        this._encryptionKey
+      );
+      downloadBackupFile(
+        this.hass,
+        this._params!.backup.backup_id,
+        this._agentId,
+        this._encryptionKey
+      );
+      this.closeDialog();
+    } catch (err: any) {
+      if (err?.code === "password_incorrect") {
+        this._error = this.hass.localize(
+          "ui.panel.config.backup.dialogs.download.incorrect_encryption_key"
+        );
+      } else if (err?.code === "decrypt_not_supported") {
+        this._error = this.hass.localize(
+          "ui.panel.config.backup.dialogs.download.decryption_not_supported"
+        );
+      } else {
+        alert(err.message);
+      }
+    }
+  }
+
+  private _keyChanged(ev) {
+    this._encryptionKey = ev.currentTarget.value;
+    this._error = "";
+  }
+
+  private get _agentId() {
+    if (this._params?.agentId) {
+      return this._params.agentId;
+    }
+    return getPreferredAgentForDownload(
+      Object.keys(this._params!.backup.agents)
+    );
+  }
+
+  private async _downloadEncrypted() {
+    downloadBackupFile(
+      this.hass,
+      this._params!.backup.backup_id,
+      this._agentId
+    );
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-md-dialog {
+          --dialog-content-padding: 8px 24px;
+          max-width: 500px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-md-dialog {
+            max-width: none;
+          }
+          div[slot="content"] {
+            margin-top: 0;
+          }
+        }
+
+        button.link {
+          background: none;
+          border: none;
+          padding: 0;
+          font-size: 14px;
+          color: var(--primary-color);
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-download-decrypted-backup": DialogDownloadDecryptedBackup;
+  }
+}

src/panels/config/backup/dialogs/show-dialog-download-decrypted-backup.ts

@@ -0,0 +1,21 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { BackupContent } from "../../../../data/backup";
+
+export interface DownloadDecryptedBackupDialogParams {
+  backup: BackupContent;
+  agentId?: string;
+}
+
+export const loadDownloadDecryptedBackupDialog = () =>
+  import("./dialog-download-decrypted-backup");
+
+export const showDownloadDecryptedBackupDialog = (
+  element: HTMLElement,
+  params: DownloadDecryptedBackupDialogParams
+) => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-download-decrypted-backup",
+    dialogImport: loadDownloadDecryptedBackupDialog,
+    dialogParams: params,
+  });
+};

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

@@ -11,6 +11,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event";
@@ -42,9 +43,11 @@ import {
   compareAgents,
   computeBackupAgentName,
   computeBackupSize,
+  computeBackupType,
   deleteBackup,
   generateBackup,
   generateBackupWithAutomaticSettings,
+  getBackupTypes,
   isLocalAgent,
   isNetworkMountAgent,
 } from "../../../data/backup";
@@ -74,10 +77,6 @@ interface BackupRow extends DataTableRowData, BackupContent {
   agent_ids: string[];
 }
 
-type BackupType = "automatic" | "manual";
-
-const TYPE_ORDER: BackupType[] = ["automatic", "manual"];
-
 @customElement("ha-config-backup-backups")
 class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -141,7 +140,10 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   };
 
   private _columns = memoizeOne(
-    (localize: LocalizeFunc): DataTableColumnContainer<BackupRow> => ({
+    (
+      localize: LocalizeFunc,
+      maxDisplayedAgents: number
+    ): DataTableColumnContainer<BackupRow> => ({
       name: {
         title: localize("ui.panel.config.backup.name"),
         main: true,
@@ -172,54 +174,75 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
       locations: {
         title: localize("ui.panel.config.backup.locations"),
         showNarrow: true,
-        minWidth: "60px",
-        template: (backup) => html`
-          <div style="display: flex; gap: 4px;">
-            ${(backup.agent_ids || []).map((agentId) => {
-              const name = computeBackupAgentName(
-                this.hass.localize,
-                agentId,
-                this.agents
-              );
-              if (isLocalAgent(agentId)) {
+        // 24 icon size, 4 gap, 16 left and right padding
+        minWidth: `${maxDisplayedAgents * 24 + (maxDisplayedAgents - 1) * 4 + 32}px`,
+        template: (backup) => {
+          const agentIds = backup.agent_ids;
+          const displayedAgentIds =
+            agentIds.length > maxDisplayedAgents
+              ? [...agentIds].splice(0, maxDisplayedAgents - 1)
+              : agentIds;
+          const agentsMore = Math.max(
+            agentIds.length - displayedAgentIds.length,
+            0
+          );
+          return html`
+            <div style="display: flex; gap: 4px;">
+              ${displayedAgentIds.map((agentId) => {
+                const name = computeBackupAgentName(
+                  this.hass.localize,
+                  agentId,
+                  this.agents
+                );
+                if (isLocalAgent(agentId)) {
+                  return html`
+                    <ha-svg-icon
+                      .path=${mdiHarddisk}
+                      title=${name}
+                      style="flex-shrink: 0;"
+                    ></ha-svg-icon>
+                  `;
+                }
+                if (isNetworkMountAgent(agentId)) {
+                  return html`
+                    <ha-svg-icon
+                      .path=${mdiNas}
+                      title=${name}
+                      style="flex-shrink: 0;"
+                    ></ha-svg-icon>
+                  `;
+                }
+                const domain = computeDomain(agentId);
                 return html`
-                  <ha-svg-icon
-                    .path=${mdiHarddisk}
+                  <img
                     title=${name}
+                    .src=${brandsUrl({
+                      domain,
+                      type: "icon",
+                      useFallback: true,
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                    height="24"
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    alt=${name}
+                    slot="graphic"
                     style="flex-shrink: 0;"
-                  ></ha-svg-icon>
+                  />
                 `;
-              }
-              if (isNetworkMountAgent(agentId)) {
-                return html`
-                  <ha-svg-icon
-                    .path=${mdiNas}
-                    title=${name}
-                    style="flex-shrink: 0;"
-                  ></ha-svg-icon>
-                `;
-              }
-              const domain = computeDomain(agentId);
-              return html`
-                <img
-                  title=${name}
-                  .src=${brandsUrl({
-                    domain,
-                    type: "icon",
-                    useFallback: true,
-                    darkOptimized: this.hass.themes?.darkMode,
-                  })}
-                  height="24"
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  alt=${name}
-                  slot="graphic"
-                  style="flex-shrink: 0;"
-                />
-              `;
-            })}
-          </div>
-        `,
+              })}
+              ${agentsMore
+                ? html`
+                    <span
+                      style="display: flex; align-items: center; font-size: 14px;"
+                    >
+                      +${agentsMore}
+                    </span>
+                  `
+                : nothing}
+            </div>
+          `;
+        },
       },
       actions: {
         title: "",
@@ -253,9 +276,13 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   );
 
   private _groupOrder = memoizeOne(
-    (activeGrouping: string | undefined, localize: LocalizeFunc) =>
+    (
+      activeGrouping: string | undefined,
+      localize: LocalizeFunc,
+      isHassio: boolean
+    ) =>
       activeGrouping === "formatted_type"
-        ? TYPE_ORDER.map((type) =>
+        ? getBackupTypes(isHassio).map((type) =>
             localize(`ui.panel.config.backup.type.${type}`)
           )
         : undefined
@@ -279,33 +306,48 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     (
       backups: BackupContent[],
       filters: DataTableFiltersValues,
-      localize: LocalizeFunc
+      localize: LocalizeFunc,
+      isHassio: boolean
     ): BackupRow[] => {
       const typeFilter = filters["ha-filter-states"] as string[] | undefined;
       let filteredBackups = backups;
       if (typeFilter?.length) {
-        filteredBackups = filteredBackups.filter(
-          (backup) =>
-            (backup.with_automatic_settings &&
-              typeFilter.includes("automatic")) ||
-            (!backup.with_automatic_settings && typeFilter.includes("manual"))
-        );
+        filteredBackups = filteredBackups.filter((backup) => {
+          const type = computeBackupType(backup, isHassio);
+          return typeFilter.includes(type);
+        });
       }
       return filteredBackups.map((backup) => {
-        const type = backup.with_automatic_settings ? "automatic" : "manual";
+        const type = computeBackupType(backup, isHassio);
+        const agentIds = Object.keys(backup.agents);
         return {
           ...backup,
           size: computeBackupSize(backup),
-          agent_ids: Object.keys(backup.agents).sort(compareAgents),
+          agent_ids: agentIds.sort(compareAgents),
           formatted_type: localize(`ui.panel.config.backup.type.${type}`),
         };
       });
     }
   );
 
+  private _maxAgents = memoizeOne((data: BackupRow[]): number =>
+    Math.max(...data.map((row) => row.agent_ids.length))
+  );
+
   protected render(): TemplateResult {
     const backupInProgress =
       "state" in this.manager && this.manager.state === "in_progress";
+    const isHassio = isComponentLoaded(this.hass, "hassio");
+    const data = this._data(
+      this.backups,
+      this._filters,
+      this.hass.localize,
+      isHassio
+    );
+    const maxDisplayedAgents = Math.min(
+      this._maxAgents(data),
+      this.narrow ? 3 : 5
+    );
 
     return html`
       <hass-tabs-subpage-data-table
@@ -336,15 +378,16 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         .initialCollapsedGroups=${this._activeCollapsed}
         .groupOrder=${this._groupOrder(
           this._activeGrouping,
-          this.hass.localize
+          this.hass.localize,
+          isHassio
         )}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
         @selection-changed=${this._handleSelectionChanged}
         .route=${this.route}
         @row-click=${this._showBackupDetails}
-        .columns=${this._columns(this.hass.localize)}
-        .data=${this._data(this.backups, this._filters, this.hass.localize)}
+        .columns=${this._columns(this.hass.localize, maxDisplayedAgents)}
+        .data=${data}
         .noDataText=${this.hass.localize("ui.panel.config.backup.no_backups")}
         .searchLabel=${this.hass.localize(
           "ui.panel.config.backup.picker.search"
@@ -400,7 +443,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           .hass=${this.hass}
           .label=${this.hass.localize("ui.panel.config.backup.backup_type")}
           .value=${this._filters["ha-filter-states"]}
-          .states=${this._states(this.hass.localize)}
+          .states=${this._states(this.hass.localize, isHassio)}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
           expanded
@@ -425,8 +468,8 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _states = memoizeOne((localize: LocalizeFunc) =>
-    TYPE_ORDER.map((type) => ({
+  private _states = memoizeOne((localize: LocalizeFunc, isHassio: boolean) =>
+    getBackupTypes(isHassio).map((type) => ({
       value: type,
       label: localize(`ui.panel.config.backup.type.${type}`),
     }))
@@ -496,12 +539,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   }
 
   private async _downloadBackup(backup: BackupContent): Promise<void> {
-    downloadBackup(
-      this.hass,
-      this,
-      backup,
-      this.config?.create_backup.password
-    );
+    downloadBackup(this.hass, this, backup, this.config);
   }
 
   private async _deleteBackup(backup: BackupContent): Promise<void> {

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

@@ -31,6 +31,7 @@ import {
   compareAgents,
   computeBackupAgentName,
   computeBackupSize,
+  computeBackupType,
   deleteBackup,
   fetchBackupDetails,
   isLocalAgent,
@@ -46,6 +47,7 @@ import { showRestoreBackupDialog } from "./dialogs/show-dialog-restore-backup";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { downloadBackup } from "./helper/download_backup";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 
 interface Agent extends BackupContentAgent {
   id: string;
@@ -110,6 +112,8 @@ class HaConfigBackupDetails extends LitElement {
       return nothing;
     }
 
+    const isHassio = isComponentLoaded(this.hass, "hassio");
+
     return html`
       <hass-subpage
         back-path="/config/backup/backups"
@@ -161,6 +165,18 @@ class HaConfigBackupDetails extends LitElement {
                     </div>
                     <div class="card-content">
                       <ha-md-list class="summary">
+                        <ha-md-list-item>
+                          <span slot="headline">
+                            ${this.hass.localize(
+                              "ui.panel.config.backup.backup_type"
+                            )}
+                          </span>
+                          <span slot="supporting-text">
+                            ${this.hass.localize(
+                              `ui.panel.config.backup.type.${computeBackupType(this._backup, isHassio)}`
+                            )}
+                          </span>
+                        </ha-md-list-item>
                         <ha-md-list-item>
                           <span slot="headline">
                             ${this.hass.localize(
@@ -401,13 +417,7 @@ class HaConfigBackupDetails extends LitElement {
   }
 
   private async _downloadBackup(agentId?: string): Promise<void> {
-    await downloadBackup(
-      this.hass,
-      this,
-      this._backup!,
-      this.config?.create_backup.password,
-      agentId
-    );
+    await downloadBackup(this.hass, this, this._backup!, this.config, agentId);
   }
 
   private async _deleteBackup(): Promise<void> {

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

@@ -221,8 +221,7 @@ class HaConfigBackupOverview extends LitElement {
           gap: 24px;
           display: flex;
           flex-direction: column;
-          margin-bottom: 24px;
-          margin-bottom: 72px;
+          margin-bottom: calc(env(safe-area-inset-bottom) + 72px);
         }
         .card-actions {
           display: flex;

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

@@ -50,9 +50,11 @@ class HaConfigBackupSettings extends LitElement {
     }
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties);
+  public connectedCallback(): void {
+    super.connectedCallback();
     this._scrollToSection();
+    // Update config the page is displayed (e.g. when coming back from a location detail page)
+    this._config = this.config;
   }
 
   private async _scrollToSection() {

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

@@ -119,6 +119,7 @@ class HaConfigBackup extends SubscribeMixin(HassRouterPage) {
       settings: {
         tag: "ha-config-backup-settings",
         load: () => import("./ha-config-backup-settings"),
+        cache: true,
       },
       location: {
         tag: "ha-config-backup-location",

src/panels/config/backup/helper/download_backup.ts

@@ -1,20 +1,17 @@
 import type { LitElement } from "lit";
+import { getSignedPath } from "../../../../data/auth";
+import type { BackupConfig, BackupContent } from "../../../../data/backup";
 import {
   canDecryptBackupOnDownload,
   getBackupDownloadUrl,
   getPreferredAgentForDownload,
-  type BackupContent,
 } from "../../../../data/backup";
 import type { HomeAssistant } from "../../../../types";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-  showPromptDialog,
-} from "../../../lovelace/custom-card-helpers";
-import { getSignedPath } from "../../../../data/auth";
 import { fileDownload } from "../../../../util/file_download";
+import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
+import { showDownloadDecryptedBackupDialog } from "../dialogs/show-dialog-download-decrypted-backup";
 
-const triggerDownload = async (
+export const downloadBackupFile = async (
   hass: HomeAssistant,
   backupId: string,
   preferedAgent: string,
@@ -27,120 +24,80 @@ const triggerDownload = async (
   fileDownload(signedUrl.path);
 };
 
-const downloadEncryptedBackup = async (
-  hass: HomeAssistant,
-  element: LitElement,
-  backup: BackupContent,
-  agentId?: string
-) => {
-  if (
-    await showConfirmationDialog(element, {
-      title: "Encryption key incorrect",
-      text: hass.localize(
-        "ui.panel.config.backup.dialogs.download.incorrect_entered_encryption_key"
-      ),
-      confirmText: "Download encrypted",
-    })
-  ) {
-    const agentIds = Object.keys(backup.agents);
-    const preferedAgent = agentId ?? getPreferredAgentForDownload(agentIds);
-
-    triggerDownload(hass, backup.backup_id, preferedAgent);
-  }
-};
-
-const requestEncryptionKey = async (
-  hass: HomeAssistant,
-  element: LitElement,
-  backup: BackupContent,
-  agentId?: string
-): Promise<void> => {
-  const encryptionKey = await showPromptDialog(element, {
-    title: hass.localize(
-      "ui.panel.config.backup.dialogs.show_encryption_key.title"
-    ),
-    text: hass.localize(
-      "ui.panel.config.backup.dialogs.download.incorrect_current_encryption_key"
-    ),
-    inputLabel: hass.localize(
-      "ui.panel.config.backup.dialogs.show_encryption_key.title"
-    ),
-    inputType: "password",
-    confirmText: hass.localize("ui.common.download"),
-  });
-  if (encryptionKey === null) {
-    return;
-  }
-  downloadBackup(hass, element, backup, encryptionKey, agentId, true);
-};
-
 export const downloadBackup = async (
   hass: HomeAssistant,
   element: LitElement,
   backup: BackupContent,
-  encryptionKey?: string | null,
-  agentId?: string,
-  userProvided = false
+  backupConfig?: BackupConfig,
+  agentId?: string
 ): Promise<void> => {
   const agentIds = Object.keys(backup.agents);
   const preferedAgent = agentId ?? getPreferredAgentForDownload(agentIds);
   const isProtected = backup.agents[preferedAgent]?.protected;
 
-  if (isProtected) {
-    if (encryptionKey) {
-      try {
-        await canDecryptBackupOnDownload(
-          hass,
-          backup.backup_id,
-          preferedAgent,
-          encryptionKey
-        );
-      } catch (err: any) {
-        if (err?.code === "password_incorrect") {
-          if (userProvided) {
-            downloadEncryptedBackup(hass, element, backup, agentId);
-          } else {
-            requestEncryptionKey(hass, element, backup, agentId);
-          }
-          return;
-        }
-        if (err?.code === "decrypt_not_supported") {
-          showAlertDialog(element, {
-            title: hass.localize(
-              "ui.panel.config.backup.dialogs.download.decryption_unsupported_title"
-            ),
-            text: hass.localize(
-              "ui.panel.config.backup.dialogs.download.decryption_unsupported"
-            ),
-            confirm() {
-              triggerDownload(hass, backup.backup_id, preferedAgent);
-            },
-          });
-          encryptionKey = undefined;
-          return;
-        }
-
-        showAlertDialog(element, {
-          title: hass.localize(
-            "ui.panel.config.backup.dialogs.download.error_check_title",
-            {
-              error: err.message,
-            }
-          ),
-          text: hass.localize(
-            "ui.panel.config.backup.dialogs.download.error_check_description",
-            {
-              error: err.message,
-            }
-          ),
-        });
-        return;
-      }
-    } else {
-      requestEncryptionKey(hass, element, backup, agentId);
-      return;
-    }
+  if (!isProtected) {
+    downloadBackupFile(hass, backup.backup_id, preferedAgent);
+    return;
   }
 
-  await triggerDownload(hass, backup.backup_id, preferedAgent, encryptionKey);
+  const encryptionKey = backupConfig?.create_backup?.password;
+
+  if (!encryptionKey) {
+    showDownloadDecryptedBackupDialog(element, {
+      backup,
+      agentId: preferedAgent,
+    });
+    return;
+  }
+
+  try {
+    // Check if we can decrypt it
+    await canDecryptBackupOnDownload(
+      hass,
+      backup.backup_id,
+      preferedAgent,
+      encryptionKey
+    );
+    downloadBackupFile(hass, backup.backup_id, preferedAgent, encryptionKey);
+  } catch (err: any) {
+    // If encryption key is incorrect, ask for encryption key
+    if (err?.code === "password_incorrect") {
+      showDownloadDecryptedBackupDialog(element, {
+        backup,
+        agentId: preferedAgent,
+      });
+      return;
+    }
+    // If decryption is not supported, ask for confirmation and download it encrypted
+    if (err?.code === "decrypt_not_supported") {
+      showAlertDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.backup.dialogs.download.decryption_unsupported_title"
+        ),
+        text: hass.localize(
+          "ui.panel.config.backup.dialogs.download.decryption_unsupported"
+        ),
+        confirm() {
+          downloadBackupFile(hass, backup.backup_id, preferedAgent);
+        },
+      });
+      return;
+    }
+
+    // Else, show generic error
+    showAlertDialog(element, {
+      title: hass.localize(
+        "ui.panel.config.backup.dialogs.download.error_check_title",
+        {
+          error: err.message,
+        }
+      ),
+      text: hass.localize(
+        "ui.panel.config.backup.dialogs.download.error_check_description",
+        {
+          error: err.message,
+        }
+      ),
+    });
+  }
 };

src/panels/config/cloud/account/cloud-account.ts

@@ -1,15 +1,15 @@
 import "@material/mwc-button";
+import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-card";
-import "../../../../components/ha-tip";
-import "../../../../components/ha-list-item";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-card";
+import "../../../../components/ha-list-item";
+import "../../../../components/ha-tip";
 import type {
   CloudStatusLoggedIn,
   SubscriptionInfo,
@@ -32,6 +32,7 @@ import "./cloud-ice-servers-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
+import { showSupportPackageDialog } from "./show-dialog-cloud-support-package";
 
 @customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -52,7 +53,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._deleteCloudData}>
+        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -65,6 +66,12 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             )}
             <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
           </ha-list-item>
+          <ha-list-item graphic="icon">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.download_support_package"
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
+          </ha-list-item>
         </ha-button-menu>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
@@ -286,6 +293,16 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     fireEvent(this, "ha-refresh-cloud-status");
   }
 
+  private _handleMenuAction(ev) {
+    switch (ev.detail.index) {
+      case 0:
+        this._deleteCloudData();
+        break;
+      case 1:
+        this._downloadSupportPackage();
+    }
+  }
+
   private async _deleteCloudData() {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -316,6 +333,10 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     }
   }
 
+  private async _downloadSupportPackage() {
+    showSupportPackageDialog(this);
+  }
+
   static get styles() {
     return [
       haStyle,

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -0,0 +1,206 @@
+import "@material/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
+import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-markdown-element";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-select";
+import "../../../../components/ha-textarea";
+import { fetchSupportPackage } from "../../../../data/cloud";
+import type { HomeAssistant } from "../../../../types";
+import { fileDownload } from "../../../../util/file_download";
+
+@customElement("dialog-cloud-support-package")
+export class DialogSupportPackage extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _open = false;
+
+  @state() private _supportPackage?: string;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  public showDialog() {
+    this._open = true;
+    this._loadSupportPackage();
+  }
+
+  private _dialogClosed(): void {
+    this._open = false;
+    this._supportPackage = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  public closeDialog() {
+    this._dialog?.close();
+    return true;
+  }
+
+  protected render() {
+    if (!this._open) {
+      return nothing;
+    }
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span slot="title">Download support package</span>
+        </ha-dialog-header>
+
+        <div slot="content">
+          ${this._supportPackage
+            ? html`<ha-markdown-element
+                .content=${this._supportPackage}
+                breaks
+              ></ha-markdown-element>`
+            : html`
+                <div class="progress-container">
+                  <ha-circular-progress indeterminate></ha-circular-progress>
+                  Generating preview...
+                </div>
+              `}
+        </div>
+        <div class="footer" slot="actions">
+          <ha-alert>
+            This file may contain personal data about your home. Avoid sharing
+            them with unverified or untrusted parties.
+          </ha-alert>
+          <hr />
+          <div class="actions">
+            <ha-button @click=${this.closeDialog}>Close</ha-button>
+            <ha-button @click=${this._download}>Download</ha-button>
+          </div>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private async _loadSupportPackage() {
+    this._supportPackage = await fetchSupportPackage(this.hass);
+  }
+
+  private async _download() {
+    fileDownload(
+      "data:text/plain;charset=utf-8," +
+        encodeURIComponent(this._supportPackage || ""),
+      "support-package.md"
+    );
+  }
+
+  static styles = css`
+    ha-md-dialog {
+      min-width: 90vw;
+      min-height: 90vh;
+    }
+
+    .progress-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: calc(90vh - 260px);
+      width: 100%;
+    }
+
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      ha-md-dialog {
+        min-width: 100vw;
+        min-height: 100vh;
+      }
+      .progress-container {
+        height: calc(100vh - 260px);
+      }
+    }
+
+    .footer {
+      flex-direction: column;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+    hr {
+      border: none;
+      border-top: 1px solid var(--divider-color);
+      width: calc(100% + 48px);
+      margin-right: -24px;
+      margin-left: -24px;
+    }
+    table,
+    th,
+    td {
+      border: none;
+    }
+
+    table {
+      width: 100%;
+      display: table;
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+
+    table tr {
+      border-bottom: none;
+    }
+
+    table > tbody > tr:nth-child(odd) {
+      background-color: rgba(var(--rgb-primary-text-color), 0.04);
+    }
+
+    table > tbody > tr > td {
+      border-radius: 0;
+    }
+
+    table > tbody > tr {
+      -webkit-transition: background-color 0.25s ease;
+      transition: background-color 0.25s ease;
+    }
+
+    table > tbody > tr:hover {
+      background-color: rgba(var(--rgb-primary-text-color), 0.08);
+    }
+
+    tr {
+      border-bottom: 1px solid var(--divider-color);
+    }
+
+    td,
+    th {
+      padding: 15px 5px;
+      display: table-cell;
+      text-align: left;
+      vertical-align: middle;
+      border-radius: 2px;
+    }
+    details {
+      background-color: var(--secondary-background-color);
+      padding: 16px 24px;
+      margin: 8px 0;
+      border: 1px solid var(--divider-color);
+      border-radius: 16px;
+    }
+    summary {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-cloud-support-package": DialogSupportPackage;
+  }
+}

src/panels/config/cloud/account/show-dialog-cloud-support-package.ts

@@ -0,0 +1,12 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+export const loadSupportPackageDialog = () =>
+  import("./dialog-cloud-support-package");
+
+export const showSupportPackageDialog = (element: HTMLElement): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-cloud-support-package",
+    dialogImport: loadSupportPackageDialog,
+    dialogParams: {},
+  });
+};

src/panels/config/cloud/login/cloud-login.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list";
-import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
+import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -27,6 +27,7 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
+import { showSupportPackageDialog } from "../account/show-dialog-cloud-support-package";
 
 @customElement("cloud-login")
 export class CloudLogin extends LitElement {
@@ -57,7 +58,7 @@ export class CloudLogin extends LitElement {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu slot="toolbar-icon" @action=${this._deleteCloudData}>
+        <ha-button-menu slot="toolbar-icon" @action=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass.localize("ui.common.menu")}
@@ -70,6 +71,12 @@ export class CloudLogin extends LitElement {
             )}
             <ha-svg-icon slot="graphic" .path=${mdiDeleteForever}></ha-svg-icon>
           </ha-list-item>
+          <ha-list-item graphic="icon">
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.download_support_package"
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
+          </ha-list-item>
         </ha-button-menu>
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
@@ -348,6 +355,16 @@ export class CloudLogin extends LitElement {
     fireEvent(this, "flash-message-changed", { value: "" });
   }
 
+  private _handleMenuAction(ev) {
+    switch (ev.detail.index) {
+      case 0:
+        this._deleteCloudData();
+        break;
+      case 1:
+        this._downloadSupportPackage();
+    }
+  }
+
   private async _deleteCloudData() {
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -377,6 +394,10 @@ export class CloudLogin extends LitElement {
     }
   }
 
+  private async _downloadSupportPackage() {
+    showSupportPackageDialog(this);
+  }
+
   static get styles() {
     return [
       haStyle,

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

@@ -66,6 +66,18 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
           rel="noreferrer"
           >${hass.localize("ui.panel.config.tips.join_x")}</a
         >`,
+        mastodon: html`<a
+          href=${documentationUrl(hass, `/mastodon`)}
+          target="_blank"
+          rel="noreferrer"
+          >${hass.localize("ui.panel.config.tips.join_mastodon")}</a
+        >`,
+        bluesky: html`<a
+          href=${documentationUrl(hass, `/bluesky`)}
+          target="_blank"
+          rel="noreferrer"
+          >${hass.localize("ui.panel.config.tips.join_bluesky")}</a
+        >`,
         discord: html`<a
           href=${documentationUrl(hass, `/join-chat`)}
           target="_blank"

src/panels/config/devices/ha-config-device-page.ts

@@ -1073,7 +1073,14 @@ export class HaConfigDevicePage extends LitElement {
       (ent) => computeDomain(ent.entity_id) === "assist_satellite"
     );
 
+    const domains = this._integrations(
+      device,
+      this.entries,
+      this.manifests
+    ).map((int) => int.domain);
+
     if (
+      !domains.includes("voip") &&
       assistSatellite &&
       assistSatelliteSupportsSetupFlow(
         this.hass.states[assistSatellite.entity_id]
@@ -1088,12 +1095,6 @@ export class HaConfigDevicePage extends LitElement {
       });
     }
 
-    const domains = this._integrations(
-      device,
-      this.entries,
-      this.manifests
-    ).map((int) => int.domain);
-
     if (domains.includes("mqtt")) {
       const mqtt = await import(
         "./device-detail/integration-elements/mqtt/device-actions"

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -626,7 +626,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            @click=${this._handleBulkArea}
+            .clickAction=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -637,7 +637,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -645,7 +645,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateArea}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -684,7 +684,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateLabel}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -969,10 +969,10 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private async _handleBulkArea(ev) {
-    const area = ev.currentTarget.value;
+  private _handleBulkArea = (item) => {
+    const area = item.value;
     this._bulkAddArea(area);
-  }
+  };
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<DeviceRegistryEntry>[] = [];
@@ -999,7 +999,7 @@ ${rejected
     }
   }
 
-  private async _bulkCreateArea() {
+  private _bulkCreateArea = () => {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1007,7 +1007,7 @@ ${rejected
         return area;
       },
     });
-  }
+  };
 
   private async _handleBulkLabel(ev) {
     const label = ev.currentTarget.value;
@@ -1045,7 +1045,7 @@ ${rejected
     }
   }
 
-  private _bulkCreateLabel() {
+  private _bulkCreateLabel = () => {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1053,7 +1053,7 @@ ${rejected
         return label;
       },
     });
-  }
+  };
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

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

@@ -39,7 +39,6 @@ import { hardwareBrandsUrl } from "../../../util/brands-url";
 import { showhardwareAvailableDialog } from "./show-dialog-hardware-available";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type { ECOption } from "../../../resources/echarts";
-import { getTimeAxisLabelConfig } from "../../../components/chart/axis-label";
 
 const DATASAMPLES = 60;
 
@@ -153,13 +152,6 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
       this._chartOptions = {
         xAxis: {
           type: "time",
-          axisLabel: getTimeAxisLabelConfig(this.hass.locale, this.hass.config),
-          splitLine: {
-            show: true,
-          },
-          axisLine: {
-            show: false,
-          },
         },
         yAxis: {
           type: "value",

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

@@ -561,7 +561,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            @click=${this._handleBulkCategory}
+            .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -569,7 +569,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
@@ -577,7 +577,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateCategory}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -612,7 +612,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           </ha-label>
         </ha-md-menu-item> `;
       })}<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateLabel}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div>
@@ -958,10 +958,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     });
   }
 
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
+  private _handleBulkCategory = (item) => {
+    const category = item.value;
     this._bulkAddCategory(category);
-  }
+  };
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1234,7 +1234,7 @@ ${rejected
     showHelperDetailDialog(this, {});
   }
 
-  private async _bulkCreateCategory() {
+  private _bulkCreateCategory = () => {
     showCategoryRegistryDetailDialog(this, {
       scope: "helpers",
       createEntry: async (values) => {
@@ -1247,9 +1247,9 @@ ${rejected
         return category;
       },
     });
-  }
+  };
 
-  private _bulkCreateLabel() {
+  private _bulkCreateLabel = () => {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1257,7 +1257,7 @@ ${rejected
         return label;
       },
     });
-  }
+  };
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

src/panels/config/integrations/dialog-add-integration.ts

@@ -21,6 +21,7 @@ import type { LocalizeFunc } from "../../../common/translations/localize";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/search-input";
+import { getConfigEntries } from "../../../data/config_entries";
 import { fetchConfigFlowInProgress } from "../../../data/config_flow";
 import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
 import {
@@ -49,9 +50,6 @@ import "./ha-domain-integrations";
 import "./ha-integration-list-item";
 import type { AddIntegrationDialogParams } from "./show-add-integration-dialog";
 import { showYamlIntegrationDialog } from "./show-add-integration-dialog";
-import { getConfigEntries } from "../../../data/config_entries";
-import { stripDiacritics } from "../../../common/string/strip-diacritics";
-import { getStripDiacriticsFn } from "../../../util/fuse";
 
 export interface IntegrationListItem {
   name: string;
@@ -256,7 +254,7 @@ class AddIntegrationDialog extends LitElement {
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
-          getFn: getStripDiacriticsFn,
+          ignoreDiacritics: true,
         };
         const helpers = Object.entries(h).map(([domain, integration]) => ({
           domain,
@@ -266,16 +264,15 @@ class AddIntegrationDialog extends LitElement {
           is_built_in: integration.is_built_in !== false,
           cloud: integration.iot_class?.startsWith("cloud_"),
         }));
-        const normalizedFilter = stripDiacritics(filter);
         return [
           ...new Fuse(integrations, options)
-            .search(normalizedFilter)
+            .search(filter)
             .map((result) => result.item),
           ...new Fuse(yamlIntegrations, options)
-            .search(normalizedFilter)
+            .search(filter)
             .map((result) => result.item),
           ...new Fuse(helpers, options)
-            .search(normalizedFilter)
+            .search(filter)
             .map((result) => result.item),
         ];
       }

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -15,7 +15,6 @@ import {
 } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
-import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
@@ -32,6 +31,7 @@ import { getConfigFlowInProgressCollection } from "../../../data/config_flow";
 import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import { subscribeEntityRegistry } from "../../../data/entity_registry";
+import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
 import type {
   IntegrationLogInfo,
   IntegrationManifest,
@@ -52,12 +52,13 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
+import type { ImprovDiscoveredDevice } from "../../../external_app/external_messaging";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
-import { getStripDiacriticsFn } from "../../../util/fuse";
 import { configSections } from "../ha-panel-config";
 import { isHelperDomain } from "../helpers/const";
 import "./ha-config-flow-card";
@@ -68,9 +69,6 @@ import "./ha-integration-card";
 import type { HaIntegrationCard } from "./ha-integration-card";
 import "./ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
-import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
-import type { ImprovDiscoveredDevice } from "../../../external_app/external_messaging";
-import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 
 export interface ConfigEntryExtended extends Omit<ConfigEntry, "entry_id"> {
   entry_id?: string;
@@ -304,12 +302,10 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
-          getFn: getStripDiacriticsFn,
+          ignoreDiacritics: true,
         };
         const fuse = new Fuse(inProgress, options);
-        filteredEntries = fuse
-          .search(stripDiacritics(filter))
-          .map((result) => result.item);
+        filteredEntries = fuse.search(filter).map((result) => result.item);
       } else {
         filteredEntries = inProgress;
       }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -1,8 +1,9 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { storage } from "../../../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import type {
@@ -11,9 +12,6 @@ import type {
 } from "../../../../../components/data-table/ha-data-table";
 import "../../../../../components/ha-fab";
 import "../../../../../components/ha-icon-button";
-import "../../../../../layouts/hass-tabs-subpage-data-table";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
 import type {
   BluetoothDeviceData,
   BluetoothScannersDetails,
@@ -22,6 +20,10 @@ import {
   subscribeBluetoothAdvertisements,
   subscribeBluetoothScannersDetails,
 } from "../../../../../data/bluetooth";
+import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
+import "../../../../../layouts/hass-tabs-subpage-data-table";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
 import { showBluetoothDeviceInfoDialog } from "./show-dialog-bluetooth-device-info";
 
 @customElement("bluetooth-advertisement-monitor")
@@ -38,6 +40,22 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
 
   @state() private _scanners: BluetoothScannersDetails = {};
 
+  @state() private _sourceDevices: Record<string, DeviceRegistryEntry> = {};
+
+  @storage({
+    key: "bluetooth-advertisement-table-grouping",
+    state: false,
+    subscribe: false,
+  })
+  private _activeGrouping?: string = "source";
+
+  @storage({
+    key: "bluetooth-advertisement-table-collapsed",
+    state: false,
+    subscribe: false,
+  })
+  private _activeCollapsed: string[] = [];
+
   private _unsub_advertisements?: UnsubscribeFunc;
 
   private _unsub_scanners?: UnsubscribeFunc;
@@ -57,6 +75,19 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
           this._scanners = scanners;
         }
       );
+
+      const devices = Object.values(this.hass.devices);
+      const bluetoothDevices = devices.filter((device) =>
+        device.connections.find((connection) => connection[0] === "bluetooth")
+      );
+      this._sourceDevices = Object.fromEntries(
+        bluetoothDevices.map((device) => {
+          const connection = device.connections.find(
+            (c) => c[0] === "bluetooth"
+          )!;
+          return [connection[1], device];
+        })
+      );
     }
   }
 
@@ -84,21 +115,35 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
           hideable: false,
           moveable: false,
           direction: "asc",
-          flex: 2,
+          flex: 1,
         },
         name: {
           title: localize("ui.panel.config.bluetooth.name"),
           filterable: true,
           sortable: true,
         },
+        device: {
+          title: localize("ui.panel.config.bluetooth.device"),
+          filterable: true,
+          sortable: true,
+          template: (data) => html`${data.device || "-"}`,
+        },
         source: {
           title: localize("ui.panel.config.bluetooth.source"),
           filterable: true,
           sortable: true,
+          groupable: true,
+        },
+        source_address: {
+          title: localize("ui.panel.config.bluetooth.source_address"),
+          filterable: true,
+          sortable: true,
+          defaultHidden: true,
         },
         rssi: {
           title: localize("ui.panel.config.bluetooth.rssi"),
           type: "numeric",
+          maxWidth: "60px",
           sortable: true,
         },
       };
@@ -108,11 +153,22 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
   );
 
   private _dataWithNamedSourceAndIds = memoizeOne((data) =>
-    data.map((row) => ({
-      ...row,
-      id: row.address,
-      source: this._scanners[row.source]?.name || row.source,
-    }))
+    data.map((row) => {
+      const device = this._sourceDevices[row.address];
+      const scannerDevice = this._sourceDevices[row.source];
+      const scanner = this._scanners[row.source];
+      return {
+        ...row,
+        id: row.address,
+        source_address: row.source,
+        source:
+          scannerDevice?.name_by_user ||
+          scannerDevice?.name ||
+          scanner?.name ||
+          row.source,
+        device: device?.name_by_user || device?.name || undefined,
+      };
+    })
   );
 
   protected render(): TemplateResult {
@@ -124,11 +180,23 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
         .columns=${this._columns(this.hass.localize)}
         .data=${this._dataWithNamedSourceAndIds(this._data)}
         @row-click=${this._handleRowClicked}
+        .initialGroupColumn=${this._activeGrouping}
+        .initialCollapsedGroups=${this._activeCollapsed}
+        @grouping-changed=${this._handleGroupingChanged}
+        @collapsed-changed=${this._handleCollapseChanged}
         clickable
       ></hass-tabs-subpage-data-table>
     `;
   }
 
+  private _handleGroupingChanged(ev: CustomEvent) {
+    this._activeGrouping = ev.detail.value;
+  }
+
+  private _handleCollapseChanged(ev: CustomEvent) {
+    this._activeCollapsed = ev.detail.value;
+  }
+
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const entry = this._data.find((ent) => ent.address === ev.detail.id);
     showBluetoothDeviceInfoDialog(this, {

src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts

@@ -53,8 +53,6 @@ class DialogBluetoothDeviceInfo extends LitElement implements HassDialog {
     return html`
       <ha-dialog
         open
-        scrimClickAction
-        escapeKeyAction
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,

src/panels/config/scene/ha-scene-dashboard.ts

@@ -420,7 +420,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            @click=${this._handleBulkCategory}
+            .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -428,7 +428,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
@@ -436,7 +436,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateCategory}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -473,7 +473,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateLabel}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -483,7 +483,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            @click=${this._handleBulkArea}
+            .clickAction=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -494,7 +494,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -502,7 +502,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateArea}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -932,10 +932,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
+  private _handleBulkCategory = (item) => {
+    const category = item.value;
     this._bulkAddCategory(category);
-  }
+  };
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -998,10 +998,10 @@ ${rejected
     }
   }
 
-  private async _handleBulkArea(ev) {
-    const area = ev.currentTarget.value;
+  private _handleBulkArea = (item) => {
+    const area = item.value;
     this._bulkAddArea(area);
-  }
+  };
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1028,7 +1028,7 @@ ${rejected
     }
   }
 
-  private async _bulkCreateArea() {
+  private _bulkCreateArea = () => {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1036,7 +1036,7 @@ ${rejected
         return area;
       },
     });
-  }
+  };
 
   private _editCategory(scene: any) {
     const entityReg = this._entityReg.find(
@@ -1133,7 +1133,7 @@ ${rejected
     });
   }
 
-  private async _bulkCreateCategory() {
+  private _bulkCreateCategory = () => {
     showCategoryRegistryDetailDialog(this, {
       scope: "scene",
       createEntry: async (values) => {
@@ -1146,9 +1146,9 @@ ${rejected
         return category;
       },
     });
-  }
+  };
 
-  private _bulkCreateLabel() {
+  private _bulkCreateLabel = () => {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1156,7 +1156,7 @@ ${rejected
         return label;
       },
     });
-  }
+  };
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

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

@@ -25,7 +25,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { formatShortDateTime } from "../../../common/datetime/format_date_time";
+import { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -304,7 +304,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             return html`
               ${script.last_triggered
                 ? dayDifference > 3
-                  ? formatShortDateTime(
+                  ? formatShortDateTimeWithConditionalYear(
                       date,
                       this.hass.locale,
                       this.hass.config
@@ -410,7 +410,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         (category) =>
           html`<ha-md-menu-item
             .value=${category.category_id}
-            @click=${this._handleBulkCategory}
+            .clickAction=${this._handleBulkCategory}
           >
             ${category.icon
               ? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
@@ -418,14 +418,14 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             <div slot="headline">${category.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkCategory}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkCategory}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.automation.picker.bulk_actions.no_category"
           )}
         </div> </ha-md-menu-item
       ><ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateCategory}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateCategory}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.category.editor.add")}
         </div>
@@ -462,7 +462,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         </ha-md-menu-item>`;
       })}
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateLabel}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
         <div slot="headline">
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-md-menu-item
@@ -472,7 +472,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         (area) =>
           html`<ha-md-menu-item
             .value=${area.area_id}
-            @click=${this._handleBulkArea}
+            .clickAction=${this._handleBulkArea}
           >
             ${area.icon
               ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
@@ -483,7 +483,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             <div slot="headline">${area.name}</div>
           </ha-md-menu-item>`
       )}
-      <ha-md-menu-item .value=${null} @click=${this._handleBulkArea}>
+      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.no_area"
@@ -491,7 +491,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         </div>
       </ha-md-menu-item>
       <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item @click=${this._bulkCreateArea}>
+      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
         <div slot="headline">
           ${this.hass.localize(
             "ui.panel.config.devices.picker.bulk_actions.add_area"
@@ -977,10 +977,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     this._selected = ev.detail.value;
   }
 
-  private async _handleBulkCategory(ev) {
-    const category = ev.currentTarget.value;
+  private _handleBulkCategory = (item) => {
+    const category = item.value;
     this._bulkAddCategory(category);
-  }
+  };
 
   private async _bulkAddCategory(category: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1185,7 +1185,7 @@ ${rejected
     }
   }
 
-  private async _bulkCreateCategory() {
+  private _bulkCreateCategory = () => {
     showCategoryRegistryDetailDialog(this, {
       scope: "script",
       createEntry: async (values) => {
@@ -1198,9 +1198,9 @@ ${rejected
         return category;
       },
     });
-  }
+  };
 
-  private _bulkCreateLabel() {
+  private _bulkCreateLabel = () => {
     showLabelDetailDialog(this, {
       createEntry: async (values) => {
         const label = await createLabelRegistryEntry(this.hass, values);
@@ -1208,12 +1208,12 @@ ${rejected
         return label;
       },
     });
-  }
+  };
 
-  private async _handleBulkArea(ev) {
-    const area = ev.currentTarget.value;
+  private _handleBulkArea = (item) => {
+    const area = item.value;
     this._bulkAddArea(area);
-  }
+  };
 
   private async _bulkAddArea(area: string) {
     const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
@@ -1240,7 +1240,7 @@ ${rejected
     }
   }
 
-  private async _bulkCreateArea() {
+  private _bulkCreateArea = () => {
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
@@ -1248,7 +1248,7 @@ ${rejected
         return area;
       },
     });
-  }
+  };
 
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;

src/panels/config/storage/dialog-mount-view.ts

@@ -1,4 +1,4 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiClose, mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -215,6 +215,12 @@ class ViewMountDialog extends LitElement {
         @closed=${this.closeDialog}
       >
         <ha-dialog-header slot="heading">
+          <ha-icon-button
+            slot="navigationIcon"
+            dialogAction="cancel"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
           <span slot="title"
             >${this._existing
               ? this.hass.localize(
@@ -261,30 +267,34 @@ class ViewMountDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
-        <div slot="secondaryAction">
-          <mwc-button @click=${this.closeDialog} dialogInitialFocus>
-            ${this.hass.localize("ui.common.cancel")}
-          </mwc-button>
-          ${this._existing
-            ? html`<mwc-button @click=${this._deleteMount} class="delete-btn">
-                ${this.hass.localize("ui.common.delete")}
-              </mwc-button>`
-            : nothing}
-        </div>
 
-        <ha-progress-button
-          .progress=${this._waiting}
-          slot="primaryAction"
-          @click=${this._connectMount}
-        >
-          ${this._existing
-            ? this.hass.localize(
-                "ui.panel.config.storage.network_mounts.update"
-              )
-            : this.hass.localize(
-                "ui.panel.config.storage.network_mounts.connect"
-              )}
-        </ha-progress-button>
+        ${this._existing
+          ? html`<ha-button
+              @click=${this._deleteMount}
+              destructive
+              slot="secondaryAction"
+            >
+              ${this.hass.localize("ui.common.delete")}
+            </ha-button>`
+          : nothing}
+
+        <div slot="primaryAction">
+          <ha-button @click=${this.closeDialog} dialogInitialFocus>
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-progress-button
+            .progress=${this._waiting}
+            @click=${this._connectMount}
+          >
+            ${this._existing
+              ? this.hass.localize(
+                  "ui.panel.config.storage.network_mounts.update"
+                )
+              : this.hass.localize(
+                  "ui.panel.config.storage.network_mounts.connect"
+                )}
+          </ha-progress-button>
+        </div>
       </ha-dialog>
     `;
   }
@@ -389,9 +399,6 @@ class ViewMountDialog extends LitElement {
         ha-icon-button {
           color: var(--primary-text-color);
         }
-        .delete-btn {
-          --mdc-theme-primary: var(--error-color);
-        }
       `,
     ];
   }

src/panels/energy/strategies/energy-view-strategy.ts

@@ -140,12 +140,14 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have a solar source.
-    if (hasSolar && hasReturn) {
-      view.cards!.push({
-        type: "energy-solar-consumed-gauge",
-        view_layout: { position: "sidebar" },
-        collection_key: "energy_dashboard",
-      });
+    if (hasSolar) {
+      if (hasReturn) {
+        view.cards!.push({
+          type: "energy-solar-consumed-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: "energy_dashboard",
+        });
+      }
       view.cards!.push({
         type: "energy-self-sufficiency-gauge",
         view_layout: { position: "sidebar" },

src/panels/history/ha-panel-history.ts

@@ -173,7 +173,7 @@ class HaPanelHistory extends LitElement {
               .endDate=${this._endDate}
               extended-presets
               time-picker
-              @change=${this._dateRangeChanged}
+              @value-changed=${this._dateRangeChanged}
             ></ha-date-range-picker>
             <ha-target-picker
               .hass=${this.hass}
@@ -424,8 +424,8 @@ class HaPanelHistory extends LitElement {
   );
 
   private _dateRangeChanged(ev) {
-    this._startDate = ev.detail.startDate;
-    const endDate = ev.detail.endDate;
+    this._startDate = ev.detail.value.startDate;
+    const endDate = ev.detail.value.endDate;
     if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
       endDate.setDate(endDate.getDate() + 1);
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);

src/panels/logbook/ha-panel-logbook.ts

@@ -93,7 +93,7 @@ export class HaPanelLogbook extends LitElement {
               .hass=${this.hass}
               .startDate=${this._time.range[0]}
               .endDate=${this._time.range[1]}
-              @change=${this._dateRangeChanged}
+              @value-changed=${this._dateRangeChanged}
               time-picker
             ></ha-date-range-picker>
 
@@ -233,8 +233,8 @@ export class HaPanelLogbook extends LitElement {
   }
 
   private _dateRangeChanged(ev) {
-    const startDate = ev.detail.startDate;
-    const endDate = ev.detail.endDate;
+    const startDate = ev.detail.value.startDate;
+    const endDate = ev.detail.value.endDate;
     if (endDate.getHours() === 0 && endDate.getMinutes() === 0) {
       endDate.setDate(endDate.getDate() + 1);
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -1,5 +1,16 @@
 import type { HassConfig } from "home-assistant-js-websocket";
-import { addHours, subHours, differenceInDays } from "date-fns";
+import {
+  differenceInMonths,
+  subHours,
+  differenceInDays,
+  differenceInYears,
+  startOfYear,
+  addMilliseconds,
+  startOfMonth,
+  addYears,
+  addMonths,
+  addHours,
+} from "date-fns";
 import type {
   BarSeriesOption,
   CallbackDataParams,
@@ -7,10 +18,12 @@ import type {
 } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../../../../data/translation";
 import { formatNumber } from "../../../../../common/number/format_number";
-import { formatDateVeryShort } from "../../../../../common/datetime/format_date";
+import {
+  formatDateMonthYear,
+  formatDateVeryShort,
+} from "../../../../../common/datetime/format_date";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts";
-import { getTimeAxisLabelConfig } from "../../../../../components/chart/axis-label";
 
 export function getSuggestedMax(dayDifference: number, end: Date): number {
   let suggestedMax = new Date(end);
@@ -52,28 +65,17 @@ export function getCommonOptions(
 
   const options: ECOption = {
     xAxis: {
-      id: "xAxisMain",
       type: "time",
-      min: start.getTime(),
+      min: start,
       max: getSuggestedMax(dayDifference, end),
-      axisLabel: getTimeAxisLabelConfig(locale, config, dayDifference),
-      axisLine: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-      },
-      minInterval:
-        dayDifference >= 89 // quarter
-          ? 28 * 3600 * 24 * 1000
-          : dayDifference > 2
-            ? 3600 * 24 * 1000
-            : undefined,
     },
     yAxis: {
       type: "value",
       name: unit,
-      nameGap: 5,
+      nameGap: 2,
+      nameTextStyle: {
+        align: "left",
+      },
       axisLabel: {
         formatter: (value: number) => formatNumber(Math.abs(value), locale),
       },
@@ -82,10 +84,10 @@ export function getCommonOptions(
       },
     },
     grid: {
-      top: 35,
-      bottom: 10,
-      left: 10,
-      right: 10,
+      top: 15,
+      bottom: 0,
+      left: 1,
+      right: 1,
       containLabel: true,
     },
     tooltip: {
@@ -103,7 +105,6 @@ export function getCommonOptions(
             }
           });
           return [mainItems, compareItems]
-            .filter((items) => items.length > 0)
             .map((items) =>
               formatTooltip(
                 items,
@@ -115,6 +116,7 @@ export function getCommonOptions(
                 formatTotal
               )
             )
+            .filter(Boolean)
             .join("<br><br>");
         }
         return formatTooltip(
@@ -141,14 +143,16 @@ function formatTooltip(
   unit?: string,
   formatTotal?: (total: number) => string
 ) {
-  if (!params[0].value) {
+  if (!params[0]?.value) {
     return "";
   }
   // when comparing the first value is offset to match the main period
   // and the real date is in the third value
   const date = new Date(params[0].value?.[2] ?? params[0].value?.[0]);
   let period: string;
-  if (dayDifference > 0) {
+  if (dayDifference > 89) {
+    period = `${formatDateMonthYear(date, locale, config)}`;
+  } else if (dayDifference > 0) {
     period = `${formatDateVeryShort(date, locale, config)}`;
   } else {
     period = `${
@@ -198,7 +202,9 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
   const buckets = Array.from(
     new Set(
       datasets
-        .map((dataset) => dataset.data!.map((datapoint) => datapoint![0]))
+        .map((dataset) =>
+          dataset.data!.map((datapoint) => Number(datapoint![0]))
+        )
         .flat()
     )
   ).sort((a, b) => a - b);
@@ -219,7 +225,7 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
       if (x === undefined) {
         continue;
       }
-      if (x !== bucket) {
+      if (Number(x) !== bucket) {
         datasets[i].data?.splice(index, 0, {
           value: [bucket, 0],
           itemStyle: {
@@ -257,3 +263,25 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
     }
   });
 }
+
+export function getCompareTransform(start: Date, compareStart?: Date) {
+  if (!compareStart) {
+    return (ts: Date) => ts;
+  }
+  const compareYearDiff = differenceInYears(start, compareStart);
+  if (
+    compareYearDiff !== 0 &&
+    start.getTime() === startOfYear(start).getTime()
+  ) {
+    return (ts: Date) => addYears(ts, compareYearDiff);
+  }
+  const compareMonthDiff = differenceInMonths(start, compareStart);
+  if (
+    compareMonthDiff !== 0 &&
+    start.getTime() === startOfMonth(start).getTime()
+  ) {
+    return (ts: Date) => addMonths(ts, compareMonthDiff);
+  }
+  const compareOffset = start.getTime() - compareStart.getTime();
+  return (ts: Date) => addMilliseconds(ts, compareOffset);
+}

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -33,6 +33,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
+  getCompareTransform,
 } from "./common/energy-chart-options";
 import { storage } from "../../../../common/decorators/storage";
 import type { ECOption } from "../../../../resources/echarts";
@@ -192,9 +193,10 @@ export class HuiEnergyDevicesDetailGraphCard
           icon: "circle",
         },
         grid: {
+          top: 45,
           bottom: 0,
-          left: 5,
-          right: 5,
+          left: 1,
+          right: 1,
           containLabel: true,
         },
       };
@@ -314,29 +316,34 @@ export class HuiEnergyDevicesDetailGraphCard
 
     processedData.forEach((device) => {
       device.data.forEach((datapoint) => {
-        totalDeviceConsumption[datapoint[0]] =
-          (totalDeviceConsumption[datapoint[0]] || 0) + datapoint[1];
+        totalDeviceConsumption[datapoint[compare ? 2 : 0]] =
+          (totalDeviceConsumption[datapoint[compare ? 2 : 0]] || 0) +
+          datapoint[1];
       });
     });
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     const untrackedConsumption: BarSeriesOption["data"] = [];
     Object.keys(consumptionData.total).forEach((time) => {
+      const ts = Number(time);
       const value =
         consumptionData.total[time] - (totalDeviceConsumption[time] || 0);
-      const dataPoint = [Number(time), value];
+      const dataPoint: number[] = [ts, value];
       if (compare) {
         dataPoint[2] = dataPoint[0];
-        dataPoint[0] += compareOffset;
+        dataPoint[0] = compareTransform(new Date(ts)).getTime();
       }
       untrackedConsumption.push(dataPoint);
     });
+    // random id to always add untracked at the end
+    const order = Date.now();
     const dataset: BarSeriesOption = {
       type: "bar",
       cursor: "default",
-      id: compare ? "compare-untracked" : "untracked",
+      id: compare ? `compare-untracked-${order}` : `untracked-${order}`,
       name: this.hass.localize(
         "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
       ),
@@ -372,9 +379,10 @@ export class HuiEnergyDevicesDetailGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     devices.forEach((source, idx) => {
       const order = sorted_devices.indexOf(source.stat_consumption);
@@ -409,7 +417,7 @@ export class HuiEnergyDevicesDetailGraphCard
           const dataPoint = [point.start, point.change];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] += compareOffset;
+            dataPoint[0] = compareTransform(new Date(point.start)).getTime();
           }
           consumptionData.push(dataPoint);
           prevStart = point.start;
@@ -419,9 +427,10 @@ export class HuiEnergyDevicesDetailGraphCard
       data.push({
         type: "bar",
         cursor: "default",
+        // add order to id, otherwise echarts refuses to reorder them
         id: compare
-          ? `compare-${source.stat_consumption}`
-          : source.stat_consumption,
+          ? `compare-${source.stat_consumption}-${order}`
+          : `${source.stat_consumption}-${order}`,
         name:
           source.name ||
           getStatisticLabel(
@@ -438,7 +447,9 @@ export class HuiEnergyDevicesDetailGraphCard
         stack: compare ? "devicesCompare" : "devices",
       });
     });
-    return data;
+    return sorted_devices
+      .map((device) => data.find((d) => (d.id as string).includes(device))!)
+      .filter(Boolean);
   }
 
   static styles = css`

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -88,7 +88,7 @@ export class HuiEnergyDevicesGraphCard
           <ha-chart-base
             .hass=${this.hass}
             .data=${this._chartData}
-            .options=${this._createOptions(this.hass.themes?.darkMode)}
+            .options=${this._createOptions(this._chartData)}
             .height=${`${(this._chartData[0]?.data?.length || 0) * 28 + 50}px`}
             @chart-click=${this._handleChartClick}
           ></ha-chart-base>
@@ -110,18 +110,17 @@ export class HuiEnergyDevicesGraphCard
   }
 
   private _createOptions = memoizeOne(
-    (darkMode: boolean): ECOption => ({
+    (data: BarSeriesOption[]): ECOption => ({
       xAxis: {
         type: "value",
         name: "kWh",
-        splitLine: {
-          lineStyle: darkMode ? { opacity: 0.15 } : {},
-        },
       },
       yAxis: {
         type: "category",
         inverse: true,
         triggerEvent: true,
+        // take order from data
+        data: data[0]?.data?.map((d: any) => d.value[1]),
         axisLabel: {
           formatter: this._getDeviceName.bind(this),
           overflow: "truncate",

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -29,6 +29,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
+  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -213,9 +214,10 @@ export class HuiEnergyGasGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     gasSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -236,10 +238,13 @@ export class HuiEnergyGasGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint = [point.start, point.change];
+          const dataPoint: (Date | string | number)[] = [
+            point.start,
+            point.change,
+          ];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] += compareOffset;
+            dataPoint[0] = compareTransform(new Date(point.start));
           }
           gasConsumptionData.push(dataPoint);
           prevStart = point.start;

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -30,6 +30,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
+  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -231,9 +232,10 @@ export class HuiEnergySolarGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     solarSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -255,10 +257,13 @@ export class HuiEnergySolarGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint = [point.start, point.change];
+          const dataPoint: (Date | string | number)[] = [
+            point.start,
+            point.change,
+          ];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] += compareOffset;
+            dataPoint[0] = compareTransform(new Date(point.start));
           }
           solarProductionData.push(dataPoint);
           prevStart = point.start;
@@ -362,6 +367,7 @@ export class HuiEnergySolarGraphCard
             data.push({
               id: "forecast-" + source.stat_energy_from,
               type: "line",
+              stack: "forecast",
               name: this.hass.localize(
                 "ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
                 {

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -27,6 +27,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
+  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 
@@ -476,9 +477,10 @@ export class HuiEnergyUsageGraphCard
       (a, b) => Number(a) - Number(b)
     );
 
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     Object.entries(combinedData).forEach(([type, sources]) => {
       Object.entries(sources).forEach(([statId, source]) => {
@@ -494,7 +496,7 @@ export class HuiEnergyUsageGraphCard
           ];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] += compareOffset;
+            dataPoint[0] = compareTransform(dataPoint[0]);
           }
           points.push(dataPoint);
         }

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -28,6 +28,7 @@ import { hasConfigChanged } from "../../common/has-changed";
 import {
   fillDataGapsAndRoundCaps,
   getCommonOptions,
+  getCompareTransform,
 } from "./common/energy-chart-options";
 import type { ECOption } from "../../../../resources/echarts";
 import { formatNumber } from "../../../../common/number/format_number";
@@ -211,9 +212,10 @@ export class HuiEnergyWaterGraphCard
     compare = false
   ) {
     const data: BarSeriesOption[] = [];
-    const compareOffset = compare
-      ? this._start.getTime() - this._compareStart!.getTime()
-      : 0;
+    const compareTransform = getCompareTransform(
+      this._start,
+      this._compareStart!
+    );
 
     waterSources.forEach((source, idx) => {
       let prevStart: number | null = null;
@@ -234,10 +236,13 @@ export class HuiEnergyWaterGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint = [point.start, point.change];
+          const dataPoint: (Date | string | number)[] = [
+            point.start,
+            point.change,
+          ];
           if (compare) {
             dataPoint[2] = dataPoint[0];
-            dataPoint[0] += compareOffset;
+            dataPoint[0] = compareTransform(new Date(point.start));
           }
           waterConsumptionData.push(dataPoint);
           prevStart = point.start;

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -65,7 +65,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     return {
       columns: 12,
       min_columns: 6,
-      min_rows: this._config?.entities?.length || 1,
+      min_rows: 2,
     };
   }
 
@@ -244,7 +244,8 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     })}`;
 
     const columns = this._config.grid_options?.columns ?? 12;
-    const narrow = Number.isNaN(columns) || Number(columns) < 12;
+    const narrow = typeof columns === "number" && columns <= 12;
+    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
 
     return html`
       <ha-card>
@@ -259,6 +260,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
+            "has-rows": !!this._config.grid_options?.rows,
           })}"
         >
           ${this._error
@@ -283,9 +285,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
                   .minYAxis=${this._config.min_y_axis}
                   .maxYAxis=${this._config.max_y_axis}
                   .fitYData=${this._config.fit_y_data || false}
-                  .height=${this._config.grid_options?.rows
-                    ? "100%"
-                    : undefined}
+                  .height=${hasFixedHeight ? "100%" : undefined}
                   .narrow=${narrow}
                 ></state-history-charts>
               `}
@@ -303,6 +303,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     .card-header {
       justify-content: space-between;
       display: flex;
+      padding-bottom: 0;
     }
     .card-header ha-icon-next {
       --mdc-icon-button-size: 24px;
@@ -310,7 +311,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       color: var(--primary-text-color);
     }
     .content {
-      padding: 16px;
+      padding: 0 16px 8px 16px;
       flex: 1;
     }
     .has-header {
@@ -318,6 +319,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     }
     state-history-charts {
       height: 100%;
+      --timeline-top-margin: 16px;
+    }
+    .has-rows {
+      --chart-max-height: 100%;
     }
   `;
 }

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

@@ -22,6 +22,9 @@ import type { PictureEntityCardConfig } from "./types";
 import type { CameraEntity } from "../../../data/camera";
 import type { PersonEntity } from "../../../data/person";
 
+export const STUB_IMAGE =
+  "https://demo.home-assistant.io/stub_config/bedroom.png";
+
 @customElement("hui-picture-entity-card")
 class HuiPictureEntityCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -46,7 +49,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     return {
       type: "picture-entity",
       entity: foundEntities[0] || "",
-      image: "https://demo.home-assistant.io/stub_config/bedroom.png",
+      image: STUB_IMAGE,
     };
   }
 
@@ -134,15 +137,17 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
 
     const domain: string = computeDomain(this._config.entity);
     let image: string | undefined = this._config.image;
-    switch (domain) {
-      case "image":
-        image = computeImageUrl(stateObj as ImageEntity);
-        break;
-      case "person":
-        if ((stateObj as PersonEntity).attributes.entity_picture) {
-          image = (stateObj as PersonEntity).attributes.entity_picture;
-        }
-        break;
+    if (!image) {
+      switch (domain) {
+        case "image":
+          image = computeImageUrl(stateObj as ImageEntity);
+          break;
+        case "person":
+          if ((stateObj as PersonEntity).attributes.entity_picture) {
+            image = (stateObj as PersonEntity).attributes.entity_picture;
+          }
+          break;
+      }
     }
 
     return html`

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

@@ -1,4 +1,4 @@
-import type { HassEntity } from "home-assistant-js-websocket";
+import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -9,6 +9,7 @@ import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
 import "../../../components/ha-state-icon";
+import { getEnergyDataCollection } from "../../../data/energy";
 import type { StatisticsMetaData } from "../../../data/recorder";
 import {
   fetchStatistic,
@@ -31,6 +32,8 @@ import type {
 import type { HuiErrorCard } from "./hui-error-card";
 import type { EntityCardConfig, StatisticCardConfig } from "./types";
 
+export const PERIOD_ENERGY = "energy_date_selection";
+
 @customElement("hui-statistic-card")
 export class HuiStatisticCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -70,15 +73,52 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
 
   @state() private _error?: string;
 
+  private _energySub?: UnsubscribeFunc;
+
+  @state() private _energyStart?: Date;
+
+  @state() private _energyEnd?: Date;
+
   private _interval?: number;
 
   private _footerElement?: HuiErrorCard | LovelaceHeaderFooter;
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._unsubscribeEnergy();
     clearInterval(this._interval);
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this._config?.period === PERIOD_ENERGY) {
+      this._subscribeEnergy();
+    } else {
+      this._setFetchStatisticTimer();
+    }
+  }
+
+  private _subscribeEnergy() {
+    if (!this._energySub) {
+      this._energySub = getEnergyDataCollection(this.hass!, {
+        key: this._config?.collection_key,
+      }).subscribe((data) => {
+        this._energyStart = data.start;
+        this._energyEnd = data.end;
+        this._fetchStatistic();
+      });
+    }
+  }
+
+  private _unsubscribeEnergy() {
+    if (this._energySub) {
+      this._energySub();
+      this._energySub = undefined;
+    }
+    this._energyStart = undefined;
+    this._energyEnd = undefined;
+  }
+
   public setConfig(config: StatisticCardConfig): void {
     if (!config.entity) {
       throw new Error("Entity must be specified");
@@ -99,8 +139,6 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
 
     this._config = config;
     this._error = undefined;
-    this._fetchStatistic();
-    this._fetchMetadata();
 
     if (this._config.footer) {
       this._footerElement = createHeaderFooterElement(this._config.footer);
@@ -174,7 +212,9 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     if (
       changedProps.has("_value") ||
       changedProps.has("_metadata") ||
-      changedProps.has("_error")
+      changedProps.has("_error") ||
+      changedProps.has("_energyStart") ||
+      changedProps.has("_energyEnd")
     ) {
       return true;
     }
@@ -184,6 +224,46 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     return true;
   }
 
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (!this._config || !changedProps.has("_config")) {
+      return;
+    }
+    const oldConfig = changedProps.get("_config") as
+      | StatisticCardConfig
+      | undefined;
+
+    if (this.hass) {
+      if (this._config.period === PERIOD_ENERGY && !this._energySub) {
+        this._subscribeEnergy();
+        return;
+      }
+      if (this._config.period !== PERIOD_ENERGY && this._energySub) {
+        this._unsubscribeEnergy();
+        this._setFetchStatisticTimer();
+        return;
+      }
+      if (
+        this._config.period === PERIOD_ENERGY &&
+        this._energySub &&
+        changedProps.has("_config") &&
+        oldConfig?.collection_key !== this._config.collection_key
+      ) {
+        this._unsubscribeEnergy();
+        this._subscribeEnergy();
+      }
+    }
+
+    if (
+      changedProps.has("_config") &&
+      oldConfig?.entity !== this._config.entity
+    ) {
+      this._fetchMetadata().then(() => {
+        this._setFetchStatisticTimer();
+      });
+    }
+  }
+
   protected firstUpdated() {
     this._fetchStatistic();
     this._fetchMetadata();
@@ -210,20 +290,31 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
     }
   }
 
+  private _setFetchStatisticTimer() {
+    this._fetchStatistic();
+    // statistics are created every hour
+    clearInterval(this._interval);
+    if (this._config?.period !== PERIOD_ENERGY) {
+      this._interval = window.setInterval(
+        () => this._fetchStatistic(),
+        5 * 1000 * 60
+      );
+    }
+  }
+
   private async _fetchStatistic() {
     if (!this.hass || !this._config) {
       return;
     }
-    clearInterval(this._interval);
-    this._interval = window.setInterval(
-      () => this._fetchStatistic(),
-      5 * 1000 * 60
-    );
     try {
       const stats = await fetchStatistic(
         this.hass,
         this._config.entity,
-        this._config.period
+        this._energyStart && this._energyEnd
+          ? { fixed_period: { start: this._energyStart, end: this._energyEnd } }
+          : typeof this._config?.period === "object"
+            ? this._config?.period
+            : {}
       );
       this._value = stats[this._config!.stat_type];
       this._error = undefined;

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -6,7 +6,10 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../components/ha-card";
 import { getEnergyDataCollection } from "../../../data/energy";
-import { getSuggestedPeriod } from "./energy/common/energy-chart-options";
+import {
+  getSuggestedMax,
+  getSuggestedPeriod,
+} from "./energy/common/energy-chart-options";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -255,8 +258,13 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
+    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
+
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card>
+        ${this._config.title
+          ? html`<h1 class="card-header">${this._config.title}</h1>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
@@ -274,11 +282,20 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .unit=${this._unit}
             .minYAxis=${this._config.min_y_axis}
             .maxYAxis=${this._config.max_y_axis}
+            .startTime=${this._energyStart}
+            .endTime=${this._energyEnd && this._energyStart
+              ? getSuggestedMax(
+                  differenceInDays(this._energyEnd, this._energyStart),
+                  this._energyEnd
+                )
+              : undefined}
             .fitYData=${this._config.fit_y_data || false}
             .hideLegend=${this._config.hide_legend || false}
             .logarithmicScale=${this._config.logarithmic_scale || false}
-            .daysToShow=${this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
-            .height=${this._config.grid_options?.rows ? "100%" : undefined}
+            .daysToShow=${this._energyStart && this._energyEnd
+              ? differenceInDays(this._energyEnd, this._energyStart)
+              : this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
+            .height=${hasFixedHeight ? "100%" : undefined}
           ></statistics-chart>
         </div>
       </ha-card>
@@ -358,8 +375,12 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       flex-direction: column;
       height: 100%;
     }
+    .card-header {
+      padding-bottom: 0;
+    }
     .content {
       padding: 16px;
+      padding-top: 0;
       flex: 1;
     }
     .has-header {

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-list/mwc-list";
+import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import type { List } from "@material/mwc-list/mwc-list";
 import {
   mdiClock,
@@ -286,15 +287,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                     this._todoListSupportsFeature(
                       TodoListEntityFeature.MOVE_TODO_ITEM
                     )
-                      ? html`<ha-button-menu @closed=${stopPropagation}>
+                      ? html`<ha-button-menu
+                          @closed=${stopPropagation}
+                          fixed
+                          @action=${this._handlePrimaryMenuAction}
+                        >
                           <ha-icon-button
                             slot="trigger"
                             .path=${mdiDotsVertical}
                           ></ha-icon-button>
-                          <ha-list-item
-                            @click=${this._toggleReorder}
-                            graphic="icon"
-                          >
+                          <ha-list-item graphic="icon">
                             ${this.hass!.localize(
                               this._reordering
                                 ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
@@ -330,16 +332,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                       ${this._todoListSupportsFeature(
                         TodoListEntityFeature.DELETE_TODO_ITEM
                       )
-                        ? html`<ha-button-menu @closed=${stopPropagation}>
+                        ? html`<ha-button-menu
+                            @closed=${stopPropagation}
+                            fixed
+                            @action=${this._handleCompletedMenuAction}
+                          >
                             <ha-icon-button
                               slot="trigger"
                               .path=${mdiDotsVertical}
                             ></ha-icon-button>
-                            <ha-list-item
-                              @click=${this._clearCompletedItems}
-                              graphic="icon"
-                              class="warning"
-                            >
+                            <ha-list-item graphic="icon" class="warning">
                               ${this.hass!.localize(
                                 "ui.panel.lovelace.cards.todo-list.clear_items"
                               )}
@@ -548,7 +550,15 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private async _clearCompletedItems(): Promise<void> {
+  private _handleCompletedMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._clearCompletedItems();
+        break;
+    }
+  }
+
+  private _clearCompletedItems() {
     if (!this.hass) {
       return;
     }
@@ -603,7 +613,15 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private async _toggleReorder() {
+  private _handlePrimaryMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._toggleReorder();
+        break;
+    }
+  }
+
+  private _toggleReorder() {
     this._reordering = !this._reordering;
   }
 
@@ -648,6 +666,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     ha-card {
       height: 100%;
       box-sizing: border-box;
+      overflow-y: auto;
     }
 
     .has-header {

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

@@ -134,12 +134,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    let cardSize = 0;
+    let cardSize = 1;
     if (this._config?.show_current !== false) {
-      cardSize += 2;
+      cardSize += 1;
     }
     if (this._config?.show_forecast !== false) {
-      cardSize += 3;
+      cardSize += 1;
+    }
+    if (this._config?.forecast_type === "daily") {
+      cardSize += 1;
     }
     return cardSize;
   }
@@ -218,12 +221,19 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       this._forecastEvent,
       this._config?.forecast_type
     );
+
+    let itemsToShow = this._config?.forecast_slots ?? 5;
+    if (this._sizeController.value === "very-very-narrow") {
+      itemsToShow = Math.min(3, itemsToShow);
+    } else if (this._sizeController.value === "very-narrow") {
+      itemsToShow = Math.min(5, itemsToShow);
+    } else if (this._sizeController.value === "narrow") {
+      itemsToShow = Math.min(7, itemsToShow);
+    }
+
     const forecast =
       this._config?.show_forecast !== false && forecastData?.forecast?.length
-        ? forecastData.forecast.slice(
-            0,
-            this._sizeController.value === "very-very-narrow" ? 3 : 5
-          )
+        ? forecastData.forecast.slice(0, itemsToShow)
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
@@ -419,30 +429,24 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   public getGridOptions(): LovelaceGridOptions {
-    if (
-      this._config?.show_current !== false &&
-      this._config?.show_forecast !== false
-    ) {
-      return {
-        columns: 12,
-        rows: 4,
-        min_columns: 6,
-        min_rows: 4,
-      };
+    let rows = 1;
+    let min_rows = 1;
+    if (this._config?.show_current !== false) {
+      rows += 1;
+      min_rows += 1;
     }
     if (this._config?.show_forecast !== false) {
-      return {
-        columns: 12,
-        rows: 3,
-        min_columns: 6,
-        min_rows: 3,
-      };
+      rows += 1;
+      min_rows += 1;
+    }
+    if (this._config?.forecast_type === "daily") {
+      rows += 1;
     }
     return {
       columns: 12,
-      rows: 2,
+      rows: rows,
       min_columns: 6,
-      min_rows: 2,
+      min_rows: min_rows,
     };
   }
 
@@ -462,7 +466,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          padding: 16px;
           box-sizing: border-box;
         }
 
@@ -471,6 +474,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           flex-wrap: nowrap;
           justify-content: space-between;
           align-items: center;
+          padding: 0 16px;
+        }
+
+        .content + .forecast {
+          padding-top: 8px;
         }
 
         .icon-image {
@@ -549,7 +557,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .forecast {
           display: flex;
           justify-content: space-around;
-          padding-top: 16px;
+          padding: 0 16px;
         }
 
         .forecast > div {
@@ -558,7 +566,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         .forecast .icon,
         .forecast .temp {
-          margin: 4px 0;
+          margin: 0;
         }
 
         .forecast .temp {

src/panels/lovelace/cards/types.ts

@@ -379,11 +379,13 @@ export interface StatisticsGraphCardConfig extends EnergyCardBaseConfig {
 export interface StatisticCardConfig extends LovelaceCardConfig {
   name?: string;
   entities: (EntityConfig | string)[];
-  period: {
-    fixed_period?: { start: string; end: string };
-    calendar?: { period: string; offset: number };
-    rolling_window?: { duration: HaDurationData; offset: HaDurationData };
-  };
+  period:
+    | {
+        fixed_period?: { start: string; end: string };
+        calendar?: { period: string; offset: number };
+        rolling_window?: { duration: HaDurationData; offset: HaDurationData };
+      }
+    | "energy_date_selection";
   stat_type: keyof Statistic;
   theme?: string;
 }
@@ -507,6 +509,7 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   show_current?: boolean;
   show_forecast?: boolean;
   forecast_type?: ForecastType;
+  forecast_slots?: number;
   secondary_info_attribute?: keyof TranslationDict["ui"]["card"]["weather"]["attributes"];
   theme?: string;
   tap_action?: ActionConfig;

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -246,7 +246,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             .startDate=${this._startDate}
             .endDate=${this._endDate || new Date()}
             .ranges=${this._ranges}
-            @change=${this._dateRangeChanged}
+            @value-changed=${this._dateRangeChanged}
             minimal
           ></ha-date-range-picker>
         </div>
@@ -346,7 +346,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   private _dateRangeChanged(ev) {
     const weekStartsOn = firstWeekdayIndex(this.hass.locale);
     this._startDate = calcDate(
-      ev.detail.startDate,
+      ev.detail.value.startDate,
       startOfDay,
       this.hass.locale,
       this.hass.config,
@@ -355,7 +355,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       }
     );
     this._endDate = calcDate(
-      ev.detail.endDate,
+      ev.detail.value.endDate,
       endOfDay,
       this.hass.locale,
       this.hass.config,

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -201,9 +201,7 @@ export class HuiGenericEntityRow extends LitElement {
       padding-inline-end: 8px;
       flex: 1 1 30%;
       min-height: 40px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+      align-content: center;
     }
     .info,
     .info > * {
@@ -238,8 +236,7 @@ export class HuiGenericEntityRow extends LitElement {
     .value {
       direction: ltr;
       min-height: 40px;
-      display: flex;
-      align-items: center;
+      align-content: center;
     }
   `;
 }

src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts

@@ -10,7 +10,6 @@ import memoizeOne from "memoize-one";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
-import { stripDiacritics } from "../../../../common/string/strip-diacritics";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/search-input";
 import { isUnavailableState } from "../../../../data/entity";
@@ -23,7 +22,6 @@ import {
   getCustomBadgeEntry,
 } from "../../../../data/lovelace_custom_cards";
 import type { HomeAssistant } from "../../../../types";
-import { getStripDiacriticsFn } from "../../../../util/fuse";
 import {
   calcUnusedEntities,
   computeUsedEntities,
@@ -82,12 +80,10 @@ export class HuiBadgePicker extends LitElement {
         isCaseSensitive: false,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        getFn: getStripDiacriticsFn,
+        ignoreDiacritics: true,
       };
       const fuse = new Fuse(badges, options);
-      badges = fuse
-        .search(stripDiacritics(filter))
-        .map((result) => result.item);
+      badges = fuse.search(filter).map((result) => result.item);
       return badgeElements.filter((badgeElement: BadgeElement) =>
         badges.includes(badgeElement.badge)
       );

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -10,7 +10,6 @@ import memoizeOne from "memoize-one";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
-import { stripDiacritics } from "../../../../common/string/strip-diacritics";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/search-input";
 import { isUnavailableState } from "../../../../data/entity";
@@ -23,7 +22,6 @@ import {
   getCustomCardEntry,
 } from "../../../../data/lovelace_custom_cards";
 import type { HomeAssistant } from "../../../../types";
-import { getStripDiacriticsFn } from "../../../../util/fuse";
 import {
   calcUnusedEntities,
   computeUsedEntities,
@@ -92,10 +90,10 @@ export class HuiCardPicker extends LitElement {
         isCaseSensitive: false,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
-        getFn: getStripDiacriticsFn,
+        ignoreDiacritics: true,
       };
       const fuse = new Fuse(cards, options);
-      cards = fuse.search(stripDiacritics(filter)).map((result) => result.item);
+      cards = fuse.search(filter).map((result) => result.item);
       return cardElements.filter((cardElement: CardElement) =>
         cards.includes(cardElement.card)
       );

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

@@ -11,6 +11,8 @@ import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { configElementStyle } from "./config-elements-style";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { STUB_IMAGE } from "../../cards/hui-picture-entity-card";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -110,7 +112,19 @@ export class HuiPictureEntityCardEditor
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    const config = ev.detail.value;
+    if (
+      config.entity &&
+      config.entity !== this._config?.entity &&
+      (computeDomain(config.entity) === "image" ||
+        (computeDomain(config.entity) === "person" &&
+          this.hass?.states[config.entity]?.attributes.entity_picture)) &&
+      config.image === STUB_IMAGE
+    ) {
+      delete config.image;
+    }
+
+    fireEvent(this, "config-changed", { config });
   }
 
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {

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

@@ -32,6 +32,7 @@ const cardConfigStruct = assign(
     period: optional(any()),
     theme: optional(string()),
     footer: optional(headerFooterConfigStructs),
+    collection_key: optional(string()),
   })
 );
 

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

@@ -1,7 +1,15 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { assert, assign, boolean, object, optional, string } from "superstruct";
+import {
+  assert,
+  assign,
+  boolean,
+  object,
+  optional,
+  string,
+  number,
+} from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
@@ -25,6 +33,7 @@ const cardConfigStruct = assign(
     show_current: optional(boolean()),
     show_forecast: optional(boolean()),
     forecast_type: optional(string()),
+    forecast_slots: optional(number()),
     secondary_info_attribute: optional(string()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
@@ -225,6 +234,11 @@ export class HuiWeatherForecastCardEditor
                   },
                 },
               },
+              {
+                name: "forecast_slots",
+                selector: { number: { min: 1, max: 12 } },
+                default: 5,
+              },
             ] as const)
           : []),
       ] as const
@@ -304,6 +318,10 @@ export class HuiWeatherForecastCardEditor
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.weather-forecast.forecast_type"
         );
+      case "forecast_slots":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.weather-forecast.forecast_slots"
+        );
       case "forecast":
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.weather-forecast.weather_to_show"

src/panels/media-browser/ha-bar-media-player.ts

@@ -462,7 +462,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
   }
 
   private _openMoreInfo() {
-    if (this._browserPlayer) {
+    if (this.entityId === BROWSER_PLAYER) {
       return;
     }
     fireEvent(this, "hass-more-info", { entityId: this.entityId });

src/state/disconnect-toast-mixin.ts

@@ -35,7 +35,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           showToast(this, {
             message:
               this.hass!.localize("ui.notification_toast.starting") ||
-              "Home Assistant is starting, not everything will be available until it is finished.",
+              "Home Assistant is starting. Not everything will be available until it is finished.",
             duration: -1,
             dismissable: false,
             action: {
@@ -121,7 +121,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         showToast(this, {
           message:
             this.hass!.localize("ui.notification_toast.wrapping_up_startup") ||
-            `Wrapping up startup, not everything will be available until it is finished.`,
+            `Wrapping up startup. Not everything will be available until it is finished.`,
           duration: -1,
           dismissable: false,
           action: {
@@ -146,7 +146,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           this.hass!.localize("ui.notification_toast.integration_starting", {
             integration: domainToName(this.hass!.localize, integration),
           }) ||
-          `Starting ${integration}, not everything will be available until it is finished.`,
+          `Starting ${integration}. Not everything will be available until it is finished.`,
         duration: -1,
         dismissable: false,
         action: {

src/state/logging-mixin.ts

@@ -29,21 +29,11 @@ export const loggingMixin = <T extends Constructor<HassBaseEl>>(
           return;
         }
         if (
-          // !__DEV__ &&
-          ev.message.includes("ResizeObserver loop limit exceeded") ||
+          (!__DEV__ &&
+            ev.message.includes("ResizeObserver loop limit exceeded")) ||
           ev.message.includes(
             "ResizeObserver loop completed with undelivered notifications"
-          ) ||
-          (ev.error.stack.includes("echarts") &&
-            (ev.message.includes(
-              "Cannot read properties of undefined (reading 'hostedBy')"
-            ) ||
-              ev.message.includes(
-                "Cannot read properties of undefined (reading 'scale')"
-              ) ||
-              ev.message.includes(
-                "Cannot read properties of null (reading 'innerHTML')"
-              )))
+          )
         ) {
           ev.preventDefault();
           ev.stopImmediatePropagation();

src/translations/en.json

@@ -1929,9 +1929,9 @@
       "action_failed": "Failed to perform the action {service}.",
       "connection_lost": "Connection lost. Reconnecting…",
       "started": "Home Assistant has started!",
-      "starting": "Home Assistant is starting, not everything will be available until it is finished.",
-      "wrapping_up_startup": "Wrapping up startup, not everything will be available until it is finished.",
-      "integration_starting": "Starting {integration}, not everything will be available until it is finished.",
+      "starting": "Home Assistant is starting. Not everything will be available until it is finished.",
+      "wrapping_up_startup": "Wrapping up startup. Not everything will be available until it is finished.",
+      "integration_starting": "Starting {integration}. Not everything will be available until it is finished.",
       "triggered": "Triggered {name}",
       "dismiss": "Dismiss",
       "no_matching_link_found": "No matching My link found for {path}"
@@ -2223,7 +2223,8 @@
           "backup_type": "Type",
           "type": {
             "manual": "Manual",
-            "automatic": "Automatic"
+            "automatic": "Automatic",
+            "addon_update": "Add-on update"
           },
           "locations": "Locations",
           "create": {
@@ -2392,17 +2393,23 @@
             "download": {
               "decryption_unsupported_title": "Decryption unsupported",
               "decryption_unsupported": "Decryption is not supported for this backup. The downloaded backup will remain encrypted and can't be opened. To restore it, you will need the encryption key.",
-              "incorrect_entered_encryption_key": "The entered encryption key was incorrect, try again or download the encrypted backup. The encrypted backup can't be opened. To restore it, you will need the encryption key.",
-              "download_encrypted": "Download encrypted",
-              "incorrect_current_encryption_key": "This backup is encrypted with a different encryption key than the current one, please enter the encryption key of this backup.",
               "error_check_title": "Error checking backup",
-              "error_check_description": "An error occurred while checking the backup, please try again. Error message: {error}"
+              "error_check_description": "An error occurred while checking the backup, please try again. Error message: {error}",
+              "title": "Download backup",
+              "description": "This backup is encrypted with a different encryption key than the current one, please enter the encryption key of this backup.",
+              "download_backup_encrypted": "You can still {download_it_encrypted}. To restore it, you will need the encryption key.",
+              "download_it_encrypted": "download the backup encrypted",
+              "encryption_key": "Encryption key",
+              "incorrect_encryption_key": "Incorrect encryption key",
+              "decryption_not_supported": "Decryption not supported",
+              "download": "Download"
             }
           },
           "agents": {
             "cloud_agent_description": "Note: It stores only the most recent backup, regardless of your retention settings, with a maximum size of 5 GB.",
             "cloud_agent_no_subcription": "You currently do not have an active Home Assistant Cloud subscription.",
             "network_mount_agent_description": "Network storage",
+            "unavailable_agents": "Unavailable locations",
             "no_agents": "No locations configured",
             "encryption_turned_off": "Encryption turned off",
             "local_agent": "This system"
@@ -2560,6 +2567,7 @@
               "title": "My backups",
               "automatic": "{count} automatic {count, plural,\n one {backup}\n other {backups}\n}",
               "manual": "{count} manual {count, plural,\n one {backup}\n other {backups}\n}",
+              "addon_update": "{count} add-on update {count, plural,\n one {backup}\n other {backups}\n}",
               "total_size": "{size} in total",
               "show_all": "Show all backups"
             },
@@ -2678,19 +2686,19 @@
             "encryption": {
               "title": "Encryption",
               "description": "All your backups are encrypted by default to keep your data private and secure.",
-              "location_encrypted": "This location is encrypted",
-              "location_unencrypted": "This location is unencrypted",
-              "location_encrypted_description": "Your data private and secure by securing it with your encryption key.",
+              "location_encrypted": "Backups made to this location will be encrypted",
+              "location_unencrypted": "Backups made to this location will be unencrypted",
+              "location_encrypted_description": "Your data is private and secure by encrypting backups with your encryption key.",
               "location_encrypted_cloud_description": "Home Assistant Cloud is the privacy-focused cloud. This is why it will only accept encrypted backups and why we don’t store your encryption key.",
               "location_encrypted_cloud_learn_more": "Learn more",
               "location_unencrypted_description": "Please keep your backups private and secure.",
               "encryption_turn_on": "Turn on",
               "encryption_turn_off": "Turn off",
               "encryption_turn_off_confirm_title": "Turn encryption off?",
-              "encryption_turn_off_confirm_text": "All your next backups will not be encrypted for this location. Please keep your backups private and secure.",
+              "encryption_turn_off_confirm_text": "After confirming, backups created will be unencrypted for this location. Please ensure your backups remain private and secure.",
               "encryption_turn_off_confirm_action": "Turn encryption off",
               "warning_encryption_turn_off": "Encryption turned off",
-              "warning_encryption_turn_off_description": "All your next backups will not be encrypted."
+              "warning_encryption_turn_off_description": "Backups will be unencrypted."
             }
           }
         },
@@ -4584,6 +4592,7 @@
             "account_created": "Account created! Check your email for instructions on how to activate your account."
           },
           "account": {
+            "download_support_package": "Download support package",
             "reset_cloud_data": "Reset cloud data",
             "reset_data_confirm_title": "Reset cloud data?",
             "reset_data_confirm_text": "This will reset all your cloud settings. This includes your remote connection, Google Assistant and Amazon Alexa integrations. This action cannot be undone.",
@@ -5330,6 +5339,8 @@
           "name": "Name",
           "source": "Source",
           "rssi": "RSSI",
+          "source_address": "Source address",
+          "device": "Device",
           "device_information": "Device information",
           "advertisement_data": "Advertisement data",
           "manufacturer_data": "Manufacturer data",
@@ -6041,8 +6052,10 @@
         },
         "tips": {
           "tip": "Tip!",
-          "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}",
+          "join": "Join the community on our {forums}, {mastodon}, {bluesky}, {twitter}, {discord}, {blog} or {newsletter}",
           "join_x": "X (formerly Twitter)",
+          "join_mastodon": "Mastodon",
+          "join_bluesky": "Bluesky",
           "join_forums": "Forums",
           "join_chat": "Chat",
           "join_blog": "Blog",
@@ -6111,7 +6124,12 @@
           },
           "network_adapter": "Network adapter",
           "network_adapter_info": "Configure which network adapters integrations will use. Currently this setting only affects multicast traffic. A restart is required for these settings to apply.",
-          "ip_information": "IP Information"
+          "ip_information": "IP Information",
+          "adapter": {
+            "auto_configure": "Auto configure",
+            "detected": "Detected",
+            "adapter": "Adapter"
+          }
         },
         "storage": {
           "caption": "Storage",
@@ -7113,6 +7131,7 @@
               "show_only_current": "Show only current Weather",
               "show_only_forecast": "Show only forecast",
               "forecast_type": "Select forecast type",
+              "forecast_slots": "Maximum number of forecast elements to show",
               "no_type": "No type",
               "daily": "Daily",
               "hourly": "Hourly",
@@ -7403,7 +7422,7 @@
           "entity_not_found": "Entity not available: {entity}",
           "entity_non_numeric": "Entity is non-numeric: {entity}",
           "entity_unavailable": "Entity is currently unavailable: {entity}",
-          "starting": "Home Assistant is starting, not everything may be available yet"
+          "starting": "Home Assistant is starting. Not everything may be available yet."
         },
         "changed_toast": {
           "message": "Your dashboard was updated. Refresh to see changes?"

src/util/fuse.ts

@@ -1,12 +0,0 @@
-import Fuse from "fuse.js";
-import { stripDiacritics } from "../common/string/strip-diacritics";
-
-type GetFn = typeof Fuse.config.getFn;
-
-export const getStripDiacriticsFn: GetFn = (obj, path) => {
-  const value = Fuse.config.getFn(obj, path);
-  if (Array.isArray(value)) {
-    return value.map((v) => stripDiacritics(v ?? ""));
-  }
-  return stripDiacritics((value as string | undefined) ?? "");
-};

src/util/text.ts

@@ -10,7 +10,7 @@ let textMeasureCanvas: HTMLCanvasElement | undefined;
 export function measureTextWidth(
   text: string,
   fontSize: number,
-  fontFamily = "sans-serif"
+  fontFamily = "Roboto, Noto, sans-serif"
 ): number {
   if (!textMeasureCanvas) {
     textMeasureCanvas = document.createElement("canvas");
@@ -21,5 +21,11 @@ export function measureTextWidth(
   }
 
   context.font = `${fontSize}px ${fontFamily}`;
-  return Math.ceil(context.measureText(text).width);
+  const textMetrics = context.measureText(text);
+  return Math.ceil(
+    Math.max(
+      textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
+      textMetrics.width
+    )
+  );
 }