format

Disable chart animations if prefers-reduced-motion is enabled
2026-06-29 11:41:38 +00:00 · 2025-01-17 18:57:28 +02:00 · 2025-01-17 18:54:40 +02:00
300 changed files with 8833 additions and 15634 deletions
@@ -5,15 +5,12 @@
    "context": ".."
  },
  "appPort": "8124:8123",
-  "postCreateCommand": "./.devcontainer/post_create.sh",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
  "postStartCommand": "script/bootstrap",
  "containerEnv": {
    "DEV_CONTAINER": "1",
    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
  },
-  "remoteEnv": {
-    "NODE_OPTIONS": "--max_old_space_size=8192"
-  },
  "customizations": {
    "vscode": {
      "extensions": [
@@ -1,22 +0,0 @@
-#!/bin/bash
-
-# This script will run after the container is created
-
-# add github cli
-(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
-	&& sudo mkdir -p -m 755 /etc/apt/keyrings \
-        && out=$(mktemp) && wget -nv -O$out https://cli.github.com/packages/githubcli-archive-keyring.gpg \
-        && cat $out | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
-	&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
-	&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-
-# Update package lists
-sudo apt-get update
-
-sudo apt upgrade -y
-
-# Install necessary packages
-sudo apt-get install -y libpcap-dev gh
-
-# Display a message
-echo "Post-create script has been executed successfully."
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,7 +37,7 @@ jobs:
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
      - name: Setup lint cache
-        uses: actions/cache@v4.2.1
+        uses: actions/cache@v4.2.0
        with:
          path: |
            node_modules/.cache/prettier
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -63,7 +63,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@v4.2.2

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@v4.2.2

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@v4.6.1
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: translations
          path: translations.tar.gz
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v6.1.0
+      - uses: release-drafter/release-drafter@v6.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -92,7 +92,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.2.0
+        uses: actions/setup-node@v4.1.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v9.1.0
+        uses: actions/stale@v9.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -1,42 +1,6 @@
 {
  "version": "2.0.0",
  "tasks": [
-    {
-      "label": "Develop and serve Frontend",
-      "type": "shell",
-      "command": "script/develop_and_serve -c ${input:coreUrl}",
-      // Sync changes here to other tasks until issue resolved
-      // https://github.com/Microsoft/vscode/issues/61497
-      "problemMatcher": {
-        "owner": "ha-build",
-        "source": "ha-build",
-        "fileLocation": "absolute",
-        "severity": "error",
-        "pattern": [
-          {
-            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
-            "severity": 1,
-            "file": 2,
-            "message": 3,
-            "line": 4,
-            "column": 5
-          }
-        ],
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "Changes detected. Starting compilation",
-          "endsPattern": "Build done @"
-        }
-      },
-      "isBackground": true,
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      },
-      "runOptions": {
-        "instanceLimit": 1
-      }
-    },
    {
      "label": "Develop Frontend",
      "type": "gulp",
@@ -277,12 +241,6 @@
      "id": "supervisorToken",
      "type": "promptString",
      "description": "The token for the Remote API proxy add-on"
-    },
-    {
-      "id": "coreUrl",
-      "type": "promptString",
-      "description": "The URL of the Home Assistant Core instance",
-      "default": "http://127.0.0.1:8123"
    }
  ]
 }
@@ -1,16 +1,16 @@
-// @ts-check
-
-import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default tseslint.config(...rootConfig, {
-  rules: {
-    "no-console": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "import/no-dynamic-require": "off",
-    "global-require": "off",
-    "@typescript-eslint/no-require-imports": "off",
-    "prefer-arrow-callback": "off",
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+      "import/no-extraneous-dependencies": "off",
+      "import/extensions": "off",
+      "import/no-dynamic-require": "off",
+      "global-require": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "prefer-arrow-callback": "off",
+    },
  },
-});
+];
@@ -90,14 +90,6 @@ function copyMapPanel(staticDir) {
    npmPath("leaflet/dist/leaflet.css"),
    staticPath("images/leaflet/")
  );
-  copyFileDir(
-    npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
-    staticPath("images/leaflet/")
-  );
-  copyFileDir(
-    npmPath("leaflet.markercluster/dist/MarkerCluster.Default.css"),
-    staticPath("images/leaflet/")
-  );
  fs.copySync(
    npmPath("leaflet/dist/images"),
    staticPath("images/leaflet/images/")
@@ -65,7 +65,6 @@ export class HaDemo extends HomeAssistantAppEl {
    mockEntityRegistry(hass, [
      {
        config_entry_id: "co2signal",
-        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -86,7 +85,6 @@ export class HaDemo extends HomeAssistantAppEl {
      },
      {
        config_entry_id: "co2signal",
-        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -11,7 +11,6 @@ export const mockConfigEntries = (hass: MockHomeAssistant) => {
    supports_remove_device: false,
    supports_unload: true,
    supports_reconfigure: true,
-    supported_subentry_types: {},
    pref_disable_new_entities: false,
    pref_disable_polling: false,
    disabled_by: null,
@@ -1,16 +1,11 @@
-// @ts-check
-
 /* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import tseslint from "typescript-eslint";
-import eslintConfigPrettier from "eslint-config-prettier";
-import { configs as litConfigs } from "eslint-plugin-lit";
-import { configs as wcConfigs } from "eslint-plugin-wc";

 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -20,14 +15,17 @@ const compat = new FlatCompat({
  allConfig: js.configs.all,
 });

-export default tseslint.config(
-  ...compat.extends("airbnb-base", "plugin:lit-a11y/recommended"),
-  eslintConfigPrettier,
-  litConfigs["flat/all"],
-  tseslint.configs.recommended,
-  tseslint.configs.strict,
-  tseslint.configs.stylistic,
-  wcConfigs["flat/recommended"],
+export default [
+  ...compat.extends(
+    "airbnb-base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
+    "plugin:wc/recommended",
+    "plugin:lit/all",
+    "plugin:lit-a11y/recommended",
+    "prettier"
+  ),
  {
    plugins: {
      "unused-imports": unusedImports,
@@ -45,7 +43,7 @@ export default tseslint.config(
        Polymer: true,
      },

-      parser: tseslint.parser,
+      parser: tsParser,
      ecmaVersion: 2020,
      sourceType: "module",

@@ -186,5 +184,5 @@ export default tseslint.config(
      ],
      "no-use-before-define": "off",
    },
-  }
-);
+  },
+];
@@ -1,10 +1,10 @@
-// @ts-check
-
-import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default tseslint.config(...rootConfig, {
-  rules: {
-    "no-console": "off",
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+    },
  },
-});
+];
@@ -48,7 +48,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -72,7 +71,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -96,7 +94,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -127,8 +124,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -140,8 +135,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -153,8 +146,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -47,7 +47,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -71,7 +70,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -95,7 +93,6 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
-    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -126,8 +123,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -139,8 +134,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -152,8 +145,6 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
-    temperature_entity_id: null,
-    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -32,8 +32,6 @@ const createConfigEntry = (
  supports_remove_device: false,
  supports_unload: true,
  supports_reconfigure: true,
-  supported_subentry_types: {},
-  num_subentries: 0,
  disabled_by: null,
  pref_disable_new_entities: false,
  pref_disable_polling: false,
@@ -190,7 +188,6 @@ const createEntityRegistryEntries = (
 ): EntityRegistryEntry[] => [
  {
    config_entry_id: item.entry_id,
-    config_subentry_id: null,
    device_id: "mock-device-id",
    area_id: null,
    disabled_by: null,
@@ -217,7 +214,6 @@ const createDeviceRegistryEntries = (
  {
    entry_type: null,
    config_entries: [item.entry_id],
-    config_entries_subentries: {},
    connections: [],
    manufacturer: "ESPHome",
    model: "Mock Device",
@@ -1,6 +1,8 @@
 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> = {
@@ -8,8 +10,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
    isCaseSensitive: false,
    minMatchCharLength: Math.min(filter.length, 2),
    threshold: 0.2,
-    ignoreDiacritics: true,
+    getFn: getStripDiacriticsFn,
  };
  const fuse = new Fuse(addons, options);
-  return fuse.search(filter).map((result) => result.item);
+  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
 }
@@ -14,7 +14,7 @@ import type { LocalizeFunc } from "../../../src/common/translations/localize";

 declare global {
  interface HASSDomEvents {
-    "hassio-backup-uploaded": { backup: HassioBackup };
+    "backup-uploaded": { backup: HassioBackup };
    "backup-cleared": undefined;
  }
 }
@@ -70,7 +70,7 @@ export class HassioUploadBackup extends LitElement {
    this._uploading = true;
    try {
      const backup = await uploadBackup(this.hass, file);
-      fireEvent(this, "hassio-backup-uploaded", { backup: backup.data });
+      fireEvent(this, "backup-uploaded", { backup: backup.data });
    } catch (err: any) {
      showAlertDialog(this, {
        title: "Upload failed",
@@ -5,6 +5,7 @@ import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
+import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-textfield";
@@ -18,10 +19,13 @@ import type {
 } from "../../../src/data/hassio/backup";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import type { HomeAssistant } from "../../../src/types";
+import type { HomeAssistant, TranslationDict } from "../../../src/types";
 import "./supervisor-formfield-label";
 import type { HaTextField } from "../../../src/components/ha-textfield";

+type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
+  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
+
 interface CheckboxItem {
  slug: string;
  checked: boolean;
@@ -63,6 +67,8 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
  @property({ attribute: false }) public supervisor?: Supervisor;

  @property({ attribute: false }) public backup?: HassioBackupDetail;
@@ -109,6 +115,10 @@ export class SupervisorBackupContent extends LitElement {
    this._focusTarget?.focus();
  }

+  private _localize = (key: BackupOrRestoreKey) =>
+    this.supervisor?.localize(`backup.${key}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${key}`);
+
  protected render() {
    if (!this.onboarding && !this.supervisor) {
      return nothing;
@@ -122,8 +132,8 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backup
        ? html`<div class="details">
            ${this.backup.type === "full"
-              ? this.supervisor?.localize("backup.full_backup")
-              : this.supervisor?.localize("backup.partial_backup")}
+              ? this._localize("full_backup")
+              : this._localize("partial_backup")}
            (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
            ${this.hass
              ? formatDateTime(
@@ -135,7 +145,7 @@ export class SupervisorBackupContent extends LitElement {
          </div>`
        : html`<ha-textfield
            name="backupName"
-            .label=${this.supervisor?.localize("backup.name")}
+            .label=${this._localize("name")}
            .value=${this.backupName}
            @change=${this._handleTextValueChanged}
          >
@@ -143,13 +153,11 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup || this.backup.type === "full"
        ? html`<div class="sub-header">
              ${!this.backup
-                ? this.supervisor?.localize("backup.type")
-                : this.supervisor?.localize("backup.select_type")}
+                ? this._localize("type")
+                : this._localize("select_type")}
            </div>
            <div class="backup-types">
-              <ha-formfield
-                .label=${this.supervisor?.localize("backup.full_backup")}
-              >
+              <ha-formfield .label=${this._localize("full_backup")}>
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="full"
@@ -158,9 +166,7 @@ export class SupervisorBackupContent extends LitElement {
                >
                </ha-radio>
              </ha-formfield>
-              <ha-formfield
-                .label=${this.supervisor?.localize("backup.partial_backup")}
-              >
+              <ha-formfield .label=${this._localize("partial_backup")}>
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="partial"
@@ -196,7 +202,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor?.localize("backup.folders")}
+                      .label=${this._localize("folders")}
                      .iconPath=${mdiFolder}
                    >
                    </supervisor-formfield-label>`}
@@ -216,7 +222,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this.supervisor?.localize("backup.addons")}
+                      .label=${this._localize("addons")}
                      .iconPath=${mdiPuzzle}
                    >
                    </supervisor-formfield-label>`}
@@ -241,7 +247,7 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup
        ? html`<ha-formfield
            class="password"
-            .label=${this.supervisor?.localize("backup.password_protection")}
+            .label=${this._localize("password_protection")}
          >
            <ha-checkbox
              .checked=${this.backupHasPassword}
@@ -253,7 +259,7 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backupHasPassword
        ? html`
            <ha-password-field
-              .label=${this.supervisor?.localize("backup.password")}
+              .label=${this._localize("password")}
              name="backupPassword"
              .value=${this.backupPassword}
              @change=${this._handleTextValueChanged}
@@ -261,7 +267,7 @@ export class SupervisorBackupContent extends LitElement {
            </ha-password-field>
            ${!this.backup
              ? html`<ha-password-field
-                  .label=${this.supervisor?.localize("backup.confirm_password")}
+                  .label=${this._localize("confirm_password")}
                  name="confirmBackupPassword"
                  .value=${this.confirmBackupPassword}
                  @change=${this._handleTextValueChanged}
@@ -72,7 +72,7 @@ export class DialogHassioBackupUpload
          </ha-header-bar>
        </div>
        <hassio-upload-backup
-          @hassio-backup-uploaded=${this._backupUploaded}
+          @backup-uploaded=${this._backupUploaded}
          .hass=${this.hass}
        ></hassio-upload-backup>
      </ha-dialog>
@@ -35,6 +35,7 @@ import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
+import type { BackupOrRestoreKey } from "../../util/translations";
 import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";

@customElement("dialog-hassio-backup")
@@ -42,7 +43,7 @@ class HassioBackupDialog
  extends LitElement
  implements HassDialog<HassioBackupDialogParams>
 {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @state() private _error?: string;

@@ -61,13 +62,9 @@ class HassioBackupDialog
    this._dialogParams = dialogParams;
    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
    if (!this._backup) {
-      this._error = this._dialogParams.supervisor?.localize(
-        "backup.no_backup_found"
-      );
+      this._error = this._localize("no_backup_found");
    } else if (this._dialogParams.onboarding && !this._backup.homeassistant) {
-      this._error = this._dialogParams.supervisor?.localize(
-        "backup.restore_no_home_assistant"
-      );
+      this._error = this._localize("restore_no_home_assistant");
    }
    this._restoringBackup = false;
  }
@@ -85,6 +82,13 @@ class HassioBackupDialog
    return true;
  }

+  private _localize(key: BackupOrRestoreKey) {
+    return (
+      this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
+      this._dialogParams!.localize!(`ui.panel.page-onboarding.restore.${key}`)
+    );
+  }
+
  protected render() {
    if (!this._dialogParams || !this._backup) {
      return nothing;
@@ -98,7 +102,7 @@ class HassioBackupDialog
        <ha-dialog-header slot="headline">
          <ha-icon-button
            slot="navigationIcon"
-            .label=${this._dialogParams.supervisor?.localize("backup.close")}
+            .label=${this._localize("close")}
            .path=${mdiClose}
            @click=${this.closeDialog}
            .disabled=${this._restoringBackup}
@@ -146,6 +150,7 @@ class HassioBackupDialog
                    .supervisor=${this._dialogParams.supervisor}
                    .backup=${this._backup}
                    .onboarding=${this._dialogParams.onboarding || false}
+                    .localize=${this._dialogParams.localize}
                    dialogInitialFocus
                  >
                  </supervisor-backup-content>
@@ -156,7 +161,7 @@ class HassioBackupDialog
            .disabled=${this._restoringBackup || !!this._error}
            @click=${this._restoreClicked}
          >
-            ${this._dialogParams.supervisor?.localize("backup.restore")}
+            ${this._localize("restore")}
          </ha-button>
        </div>
      </ha-md-dialog>
@@ -191,22 +196,18 @@ class HassioBackupDialog
    }
    if (
      !(await showConfirmationDialog(this, {
-        title: supervisor?.localize(
-          `backup.${
-            this._backup!.type === "full"
-              ? "confirm_restore_full_backup_title"
-              : "confirm_restore_partial_backup_title"
-          }`
+        title: this._localize(
+          this._backup!.type === "full"
+            ? "confirm_restore_full_backup_title"
+            : "confirm_restore_partial_backup_title"
        ),
-        text: supervisor?.localize(
-          `backup.${
-            this._backup!.type === "full"
-              ? "confirm_restore_full_backup_text"
-              : "confirm_restore_partial_backup_text"
-          }`
+        text: this._localize(
+          this._backup!.type === "full"
+            ? "confirm_restore_full_backup_text"
+            : "confirm_restore_partial_backup_text"
        ),
-        confirmText: supervisor?.localize("backup.restore"),
-        dismissText: supervisor?.localize("backup.cancel"),
+        confirmText: this._localize("restore"),
+        dismissText: this._localize("cancel"),
      }))
    ) {
      this._restoringBackup = false;
@@ -226,8 +227,7 @@ class HassioBackupDialog
      this.closeDialog();
    } catch (error: any) {
      this._error =
-        error?.body?.message ||
-        supervisor?.localize("backup.restore_start_failed");
+        error?.body?.message || this._localize("restore_start_failed");
    } finally {
      this._restoringBackup = false;
    }
@@ -286,7 +286,7 @@ class HassioBackupDialog
        title: supervisor.localize("backup.remote_download_title"),
        text: supervisor.localize("backup.remote_download_text"),
        confirmText: supervisor.localize("backup.download"),
-        dismissText: supervisor?.localize("backup.cancel"),
+        dismissText: this._localize("cancel"),
      });
      if (!confirm) {
        return;
@@ -302,7 +302,7 @@ class HassioBackupDialog
  private get _computeName() {
    return this._backup
      ? this._backup.name || this._backup.slug
-      : this._dialogParams!.supervisor?.localize("backup.unnamed_backup") || "";
+      : this._localize("unnamed_backup");
  }

  static get styles(): CSSResultGroup {
@@ -1,4 +1,5 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../src/common/translations/localize";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";

 export interface HassioBackupDialogParams {
@@ -7,6 +8,7 @@ export interface HassioBackupDialogParams {
  onRestoring?: () => void;
  onboarding?: boolean;
  supervisor?: Supervisor;
+  localize?: LocalizeFunc;
 }

 export const showHassioBackupDialog = (
@@ -9,7 +9,6 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
@@ -19,11 +18,7 @@ import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-faded";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-markdown";
-import "../../../src/components/ha-md-list";
-import "../../../src/components/ha-md-list-item";
 import "../../../src/components/ha-svg-icon";
-import "../../../src/components/ha-switch";
-import type { HaSwitch } from "../../../src/components/ha-switch";
 import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import {
  fetchHassioAddonChangelog,
@@ -126,8 +121,6 @@ class UpdateAvailableCard extends LitElement {

    const changelog = changelogUrl(this._updateType, this._version_latest);

-    const createBackupTexts = this._computeCreateBackupTexts();
-
    return html`
      <ha-card
        outlined
@@ -167,30 +160,6 @@ class UpdateAvailableCard extends LitElement {
                      )}
                    </p>
                  </div>
-                  ${createBackupTexts
-                    ? html`
-                        <hr />
-                        <ha-md-list>
-                          <ha-md-list-item>
-                            <span slot="headline">
-                              ${createBackupTexts.title}
-                            </span>
-
-                            ${createBackupTexts.description
-                              ? html`
-                                  <span slot="supporting-text">
-                                    ${createBackupTexts.description}
-                                  </span>
-                                `
-                              : nothing}
-                            <ha-switch
-                              slot="end"
-                              id="create-backup"
-                            ></ha-switch>
-                          </ha-md-list-item>
-                        </ha-md-list>
-                      `
-                    : nothing}
                `
              : html`<ha-circular-progress
                    aria-label="Updating"
@@ -258,48 +227,6 @@ class UpdateAvailableCard extends LitElement {
    }
  }

-  private _computeCreateBackupTexts():
-    | { title: string; description?: string }
-    | undefined {
-    // Addon backup
-    if (
-      this._updateType === "addon" &&
-      atLeastVersion(this.hass.config.version, 2025, 2, 0)
-    ) {
-      const version = this._version;
-      return {
-        title: this.supervisor.localize("update_available.create_backup.addon"),
-        description: this.supervisor.localize(
-          "update_available.create_backup.addon_description",
-          { version: version }
-        ),
-      };
-    }
-
-    // Old behavior
-    if (this._updateType && ["core", "addon"].includes(this._updateType)) {
-      return {
-        title: this.supervisor.localize(
-          "update_available.create_backup.generic"
-        ),
-      };
-    }
-    return undefined;
-  }
-
-  get _shouldCreateBackup(): boolean {
-    if (this._updateType && !["core", "addon"].includes(this._updateType)) {
-      return false;
-    }
-    const createBackupSwitch = this.shadowRoot?.getElementById(
-      "create-backup"
-    ) as HaSwitch;
-    if (createBackupSwitch) {
-      return createBackupSwitch.checked;
-    }
-    return true;
-  }
-
  get _version(): string {
    return this._updateType
      ? this._updateType === "addon"
@@ -414,22 +341,14 @@ class UpdateAvailableCard extends LitElement {
  }

  private async _update() {
-    if (this._shouldCreateBackup && this.supervisor.info.state === "freeze") {
-      this._error = this.supervisor.localize("backup.backup_already_running");
-      return;
-    }
    this._error = undefined;
    this._updating = true;

    try {
      if (this._updateType === "addon") {
-        await updateHassioAddon(
-          this.hass,
-          this.addonSlug!,
-          this._shouldCreateBackup
-        );
+        await updateHassioAddon(this.hass, this.addonSlug!);
      } else if (this._updateType === "core") {
-        await updateCore(this.hass, this._shouldCreateBackup);
+        await updateCore(this.hass);
      } else if (this._updateType === "os") {
        await updateOS(this.hass);
      } else if (this._updateType === "supervisor") {
@@ -484,17 +403,6 @@ class UpdateAvailableCard extends LitElement {
          border-bottom: none;
          margin: 16px 0 0 0;
        }
-
-        ha-md-list {
-          padding: 0;
-          margin-bottom: -16px;
-        }
-
-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
-        }
      `,
    ];
  }
@@ -0,0 +1,4 @@
+import type { TranslationDict } from "../../../src/types";
+
+export type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
+  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@@ -17,7 +17,6 @@ import "../../../src/components/ha-alert";
 import {
  ALTERNATIVE_DNS_SERVERS,
  getSupervisorNetworkInfo,
-  pingSupervisor,
  setSupervisorNetworkDns,
 } from "../data/supervisor";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -86,28 +85,7 @@ class LandingPageNetwork extends LitElement {

  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
-    this._pingSupervisor();
-  }
-
-  private _schedulePingSupervisor() {
-    setTimeout(
-      () => this._pingSupervisor(),
-      SCHEDULE_FETCH_NETWORK_INFO_SECONDS * 1000
-    );
-  }
-
-  private async _pingSupervisor() {
-    try {
-      const response = await pingSupervisor();
-      if (!response.ok) {
-        throw new Error("Failed to ping supervisor, assume update in progress");
-      }
-      this._fetchSupervisorInfo();
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      this._schedulePingSupervisor();
-    }
+    this._fetchSupervisorInfo();
  }

  private _scheduleFetchSupervisorInfo() {
@@ -18,7 +18,7 @@ export const ALTERNATIVE_DNS_SERVERS: {
 ];

 export async function getSupervisorLogs(lines = 100) {
-  return fetch(`/supervisor-api/supervisor/logs?lines=${lines}`, {
+  return fetch(`/supervisor/supervisor/logs?lines=${lines}`, {
    headers: {
      Accept: "text/plain",
    },
@@ -26,26 +26,22 @@ export async function getSupervisorLogs(lines = 100) {
 }

 export async function getSupervisorLogsFollow(lines = 500) {
-  return fetch(`/supervisor-api/supervisor/logs/follow?lines=${lines}`, {
+  return fetch(`/supervisor/supervisor/logs/follow?lines=${lines}`, {
    headers: {
      Accept: "text/plain",
    },
  });
 }

-export async function pingSupervisor() {
-  return fetch("/supervisor-api/supervisor/ping");
-}
-
 export async function getSupervisorNetworkInfo() {
-  return fetch("/supervisor-api/network/info");
+  return fetch("/supervisor/network/info");
 }

 export const setSupervisorNetworkDns = async (
  dnsServerIndex: number,
  primaryInterface: string
 ) =>
-  fetch(`/supervisor-api/network/interface/${primaryInterface}/update`, {
+  fetch(`/supervisor/network/interface/${primaryInterface}/update`, {
    method: "POST",
    body: JSON.stringify({
      ipv4: {
@@ -26,25 +26,25 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.26.9",
+    "@babel/runtime": "7.26.0",
    "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/autocomplete": "6.18.4",
    "@codemirror/commands": "6.8.0",
    "@codemirror/language": "6.10.8",
-    "@codemirror/legacy-modes": "6.4.3",
-    "@codemirror/search": "6.5.9",
-    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.3",
+    "@codemirror/legacy-modes": "6.4.2",
+    "@codemirror/search": "6.5.8",
+    "@codemirror/state": "6.5.1",
+    "@codemirror/view": "6.36.2",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.17.3",
-    "@formatjs/intl-displaynames": "6.8.10",
-    "@formatjs/intl-durationformat": "0.7.3",
+    "@formatjs/intl-datetimeformat": "6.17.2",
+    "@formatjs/intl-displaynames": "6.8.9",
+    "@formatjs/intl-durationformat": "0.7.2",
    "@formatjs/intl-getcanonicallocales": "2.5.4",
-    "@formatjs/intl-listformat": "7.7.10",
-    "@formatjs/intl-locale": "4.2.10",
-    "@formatjs/intl-numberformat": "8.15.3",
-    "@formatjs/intl-pluralrules": "5.4.3",
-    "@formatjs/intl-relativetimeformat": "11.4.10",
+    "@formatjs/intl-listformat": "7.7.9",
+    "@formatjs/intl-locale": "4.2.9",
+    "@formatjs/intl-numberformat": "8.15.2",
+    "@formatjs/intl-pluralrules": "5.4.2",
+    "@formatjs/intl-relativetimeformat": "11.4.9",
    "@fullcalendar/core": "6.1.15",
    "@fullcalendar/daygrid": "6.1.15",
    "@fullcalendar/interaction": "6.1.15",
@@ -53,9 +53,9 @@
    "@fullcalendar/timegrid": "6.1.15",
    "@lezer/highlight": "1.2.1",
    "@lit-labs/context": "0.4.1",
-    "@lit-labs/motion": "1.0.8",
-    "@lit-labs/observers": "2.0.5",
-    "@lit-labs/virtualizer": "2.1.0",
+    "@lit-labs/motion": "1.0.7",
+    "@lit-labs/observers": "2.0.4",
+    "@lit-labs/virtualizer": "2.0.15",
    "@lrnwebcomponents/simple-tooltip": "8.0.2",
    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -90,16 +90,17 @@
    "@polymer/paper-tabs": "3.1.0",
    "@polymer/polymer": "3.5.2",
    "@replit/codemirror-indentation-markers": "6.5.3",
-    "@shoelace-style/shoelace": "2.20.0",
    "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.6.5",
-    "@vaadin/vaadin-themable-mixin": "24.6.5",
+    "@vaadin/combo-box": "24.6.2",
+    "@vaadin/vaadin-themable-mixin": "24.6.2",
    "@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": "3.0.0",
+    "barcode-detector": "2.3.1",
+    "chart.js": "4.4.7",
+    "chartjs-plugin-zoom": "2.2.0",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
    "core-js": "3.40.0",
@@ -109,26 +110,23 @@
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
-    "echarts": "5.6.0",
-    "element-internals-polyfill": "1.3.13",
-    "fuse.js": "7.1.0",
+    "element-internals-polyfill": "1.3.12",
+    "fuse.js": "7.0.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",
    "home-assistant-js-websocket": "9.4.0",
    "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.7.15",
+    "intl-messageformat": "10.7.11",
    "js-yaml": "4.1.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
-    "leaflet.markercluster": "1.5.3",
    "lit": "2.8.0",
    "lit-html": "2.8.0",
    "luxon": "3.5.0",
-    "marked": "15.0.7",
+    "marked": "15.0.6",
    "memoize-one": "6.0.0",
-    "node-vibrant": "4.0.3",
-    "object-hash": "3.0.0",
+    "node-vibrant": "4.0.1",
    "punycode": "2.3.1",
    "qr-scanner": "1.4.2",
    "qrcode": "1.5.4",
@@ -140,7 +138,7 @@
    "tinykeys": "3.0.0",
    "tsparticles-engine": "2.12.0",
    "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "2.0.2",
+    "ua-parser-js": "2.0.0",
    "vis-data": "7.1.9",
    "vis-network": "9.1.9",
    "vue": "2.7.16",
@@ -155,22 +153,22 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.26.9",
+    "@babel/core": "7.26.0",
    "@babel/helper-define-polyfill-provider": "0.6.3",
    "@babel/plugin-proposal-decorators": "7.25.9",
-    "@babel/plugin-transform-runtime": "7.26.9",
-    "@babel/preset-env": "7.26.9",
+    "@babel/plugin-transform-runtime": "7.25.9",
+    "@babel/preset-env": "7.26.0",
    "@babel/preset-typescript": "7.26.0",
-    "@bundle-stats/plugin-webpack-filter": "4.18.2",
-    "@lokalise/node-api": "13.2.0",
-    "@octokit/auth-oauth-device": "7.1.3",
-    "@octokit/plugin-retry": "7.1.4",
-    "@octokit/rest": "21.1.1",
+    "@bundle-stats/plugin-webpack-filter": "4.17.0",
+    "@lokalise/node-api": "13.0.0",
+    "@octokit/auth-oauth-device": "7.1.2",
+    "@octokit/plugin-retry": "7.1.3",
+    "@octokit/rest": "21.1.0",
    "@rsdoctor/rspack-plugin": "0.4.13",
-    "@rspack/cli": "1.2.5",
-    "@rspack/core": "1.2.5",
+    "@rspack/cli": "1.1.8",
+    "@rspack/core": "1.1.8",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.21",
+    "@types/chromecast-caf-receiver": "6.0.20",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/glob": "8.1.0",
@@ -178,7 +176,6 @@
    "@types/js-yaml": "4.0.9",
    "@types/leaflet": "1.9.16",
    "@types/leaflet-draw": "1.0.11",
-    "@types/leaflet.markercluster": "1.5.5",
    "@types/lodash.merge": "4.6.9",
    "@types/luxon": "3.4.2",
    "@types/mocha": "10.0.10",
@@ -187,22 +184,24 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.0.6",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
+    "@vitest/coverage-v8": "2.1.8",
    "babel-loader": "9.2.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.20.1",
+    "eslint": "9.18.0",
    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.0.1",
+    "eslint-config-prettier": "9.1.0",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-lit": "1.15.0",
    "eslint-plugin-lit-a11y": "4.1.4",
    "eslint-plugin-unused-imports": "4.1.4",
-    "eslint-plugin-wc": "2.2.1",
+    "eslint-plugin-wc": "2.2.0",
    "fancy-log": "2.0.0",
-    "fs-extra": "11.3.0",
+    "fs-extra": "11.2.0",
    "glob": "11.0.1",
    "gulp": "5.0.0",
    "gulp-brotli": "3.0.0",
@@ -212,23 +211,21 @@
    "husky": "9.1.7",
    "jsdom": "26.0.0",
    "jszip": "3.10.1",
-    "lint-staged": "15.4.3",
+    "lint-staged": "15.3.0",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
    "map-stream": "0.0.7",
+    "object-hash": "3.0.0",
    "pinst": "3.0.0",
-    "prettier": "3.5.1",
+    "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",
-    "typescript-eslint": "8.24.1",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.0.6",
+    "vitest": "2.1.8",
    "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"
@@ -242,8 +239,7 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "1.6.3",
    "@fullcalendar/daygrid": "6.1.15",
-    "globals": "16.0.0",
-    "tslib": "2.8.1"
+    "globals": "15.14.0"
  },
  "packageManager": "yarn@4.6.0"
 }
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250205.0"
+version      = "20241224.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
@@ -64,7 +64,7 @@ echo Core is used from ${coreUrl}
 HASS_URL="$coreUrl" ./script/develop &

 # serve the frontend
-./node_modules/.bin/serve -p $frontendPort --single --no-port-switching --config ../script/serve-config.json ./hass_frontend &
+yarn dlx serve -l $frontendPort ./hass_frontend -s &

 # keep the script running while serving
 wait
@@ -1,3 +0,0 @@
-{
-  "cleanUrls": false
-}
@@ -1,4 +1,3 @@
-import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";

 export const COLORS = [
@@ -75,12 +74,3 @@ 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")
-);
@@ -136,18 +136,11 @@ export function theme2hex(themeColor: string): string {
  }

  const rgbFromColorName = colors[themeColor];
-  if (rgbFromColorName) {
-    return rgb2hex(rgbFromColorName);
+  if (!rgbFromColorName) {
+    // We have a named color, and there's nothing in the table,
+    // so nothing further we can do with it.
+    // Compare/border/background color will all be the same.
+    return themeColor;
  }
-
-  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch.map(Number);
-    return rgb2hex([r, g, b]);
-  }
-
-  // We have a named color, and there's nothing in the table,
-  // so nothing further we can do with it.
-  // Compare/border/background color will all be the same.
-  return themeColor;
+  return rgb2hex(rgbFromColorName);
 }
@@ -26,20 +26,6 @@ const formatDateTimeMem = memoizeOne(
    })
 );

-export const formatDateTimeWithBrowserDefaults = (dateObj: Date) =>
-  formatDateTimeWithBrowserDefaultsMem().format(dateObj);
-
-const formatDateTimeWithBrowserDefaultsMem = memoizeOne(
-  () =>
-    new Intl.DateTimeFormat(undefined, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    })
-);
-
 // Aug 9, 2021, 8:23 AM
 export const formatShortDateTimeWithYear = (
  dateObj: Date,
@@ -79,18 +65,6 @@ const formatShortDateTimeMem = memoizeOne(
    })
 );

-export const formatShortDateTimeWithConditionalYear = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => {
-  const now = new Date();
-  if (now.getFullYear() === dateObj.getFullYear()) {
-    return formatShortDateTime(dateObj, locale, config);
-  }
-  return formatShortDateTimeWithYear(dateObj, locale, config);
-};
-
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
  dateObj: Date,
@@ -16,30 +16,11 @@ export const setupLeafletMap = async (
  const Leaflet = (await import("leaflet")).default as LeafletModuleType;
  Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";

-  await import("leaflet.markercluster");
-
  const map = Leaflet.map(mapElement);
  const style = document.createElement("link");
  style.setAttribute("href", "/static/images/leaflet/leaflet.css");
  style.setAttribute("rel", "stylesheet");
  mapElement.parentNode.appendChild(style);
-
-  const markerClusterStyle = document.createElement("link");
-  markerClusterStyle.setAttribute(
-    "href",
-    "/static/images/leaflet/MarkerCluster.css"
-  );
-  markerClusterStyle.setAttribute("rel", "stylesheet");
-  mapElement.parentNode.appendChild(markerClusterStyle);
-
-  const defaultMarkerClusterStyle = document.createElement("link");
-  defaultMarkerClusterStyle.setAttribute(
-    "href",
-    "/static/images/leaflet/MarkerCluster.Default.css"
-  );
-  defaultMarkerClusterStyle.setAttribute("rel", "stylesheet");
-  mapElement.parentNode.appendChild(defaultMarkerClusterStyle);
-
  map.setView([52.3731339, 4.8903147], 13);

  const tileLayer = createTileLayer(Leaflet).addTo(map);
@@ -1,2 +1,2 @@
 export const computeDomain = (entityId: string): string =>
-  entityId.substring(0, entityId.indexOf("."));
+  entityId.substr(0, entityId.indexOf("."));
@@ -120,6 +120,11 @@ export const computeStateDisplayFromEntityAttributes = (
    return value;
  }

+  if (domain === "datetime") {
+    const time = new Date(state);
+    return formatDateTime(time, locale, config);
+  }
+
  if (["date", "input_datetime", "time"].includes(domain)) {
    // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
    // Attributes aren't available, we have to use `state`.
@@ -176,7 +181,6 @@ export const computeStateDisplayFromEntityAttributes = (
      "tag",
      "tts",
      "wake_word",
-      "datetime",
    ].includes(domain) ||
    (domain === "sensor" && attributes.device_class === "timestamp")
  ) {
@@ -1,9 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "./compute_state_domain";
 import { UNAVAILABLE_STATES } from "../../data/entity";
-import type { HomeAssistant } from "../../types";
-import { computeDomain } from "./compute_domain";
-import { stringCompare } from "../string/compare";

 export const FIXED_DOMAIN_STATES = {
  alarm_control_panel: [
@@ -240,7 +237,6 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
 };

 export const getStates = (
-  hass: HomeAssistant,
  state: HassEntity,
  attribute: string | undefined = undefined
 ): string[] => {
@@ -273,19 +269,7 @@ export const getStates = (
    case "device_tracker":
    case "person":
      if (!attribute) {
-        result.push(
-          ...Object.entries(hass.states)
-            .filter(
-              ([entityId, stateObj]) =>
-                computeDomain(entityId) === "zone" &&
-                entityId !== "zone.home" &&
-                stateObj.attributes.friendly_name
-            )
-            .map(([_entityId, stateObj]) => stateObj.attributes.friendly_name!)
-            .sort((zone1, zone2) =>
-              stringCompare(zone1, zone2, hass.locale.language)
-            )
-        );
+        result.push("home", "not_home");
      }
      break;
    case "event":
@@ -1,32 +0,0 @@
-import type { LatLngExpression, Layer, Map, MarkerOptions } from "leaflet";
-import { Marker } from "leaflet";
-
-export class DecoratedMarker extends Marker {
-  decorationLayer: Layer | undefined;
-
-  constructor(
-    latlng: LatLngExpression,
-    decorationLayer?: Layer,
-    options?: MarkerOptions
-  ) {
-    super(latlng, options);
-
-    this.decorationLayer = decorationLayer;
-  }
-
-  onAdd(map: Map) {
-    super.onAdd(map);
-
-    // If decoration has been provided, add it to the map as well
-    this.decorationLayer?.addTo(map);
-
-    return this;
-  }
-
-  onRemove(map: Map) {
-    // If decoration has been provided, remove it from the map as well
-    this.decorationLayer?.remove();
-
-    return super.onRemove(map);
-  }
-}
@@ -41,7 +41,7 @@ export class HaProgressButton extends LitElement {
                          indeterminate
                        ></ha-circular-progress>
                      `
-                    : nothing}
+                    : ""}
            </div>
          `}
    `;
@@ -117,9 +117,6 @@ export class HaProgressButton extends LitElement {
    mwc-button.error slot {
      visibility: hidden;
    }
-    :host([destructive]) {
-      --mdc-theme-primary: var(--error-color);
-    }
  `;
 }

@@ -1,51 +0,0 @@
-import type { HassConfig } from "home-assistant-js-websocket";
-import type { FrontendLocaleData } from "../../data/translation";
-import {
-  formatDateMonth,
-  formatDateMonthYear,
-  formatDateVeryShort,
-  formatDateWeekdayShort,
-} from "../../common/datetime/format_date";
-import {
-  formatTime,
-  formatTimeWithSeconds,
-} from "../../common/datetime/format_time";
-
-export function formatTimeLabel(
-  value: number | Date,
-  locale: FrontendLocaleData,
-  config: HassConfig,
-  minutesDifference: number
-) {
-  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
-    return `{bold|${formatDateVeryShort(date, locale, config)}}`;
-  }
-  return formatTime(date, locale, config);
-}
@@ -0,0 +1,269 @@
+import { _adapters } from "chart.js";
+import {
+  startOfSecond,
+  startOfMinute,
+  startOfHour,
+  startOfDay,
+  startOfWeek,
+  startOfMonth,
+  startOfQuarter,
+  startOfYear,
+  addMilliseconds,
+  addSeconds,
+  addMinutes,
+  addHours,
+  addDays,
+  addWeeks,
+  addMonths,
+  addQuarters,
+  addYears,
+  differenceInMilliseconds,
+  differenceInSeconds,
+  differenceInMinutes,
+  differenceInHours,
+  differenceInDays,
+  differenceInWeeks,
+  differenceInMonths,
+  differenceInQuarters,
+  differenceInYears,
+  endOfSecond,
+  endOfMinute,
+  endOfHour,
+  endOfDay,
+  endOfWeek,
+  endOfMonth,
+  endOfQuarter,
+  endOfYear,
+} from "date-fns";
+import {
+  formatDate,
+  formatDateMonth,
+  formatDateMonthYear,
+  formatDateVeryShort,
+  formatDateWeekdayDay,
+  formatDateYear,
+} from "../../common/datetime/format_date";
+import {
+  formatDateTime,
+  formatDateTimeWithSeconds,
+} from "../../common/datetime/format_date_time";
+import {
+  formatTime,
+  formatTimeWithSeconds,
+} from "../../common/datetime/format_time";
+
+const FORMATS = {
+  datetime: "datetime",
+  datetimeseconds: "datetimeseconds",
+  millisecond: "millisecond",
+  second: "second",
+  minute: "minute",
+  hour: "hour",
+  day: "day",
+  date: "date",
+  weekday: "weekday",
+  week: "week",
+  month: "month",
+  monthyear: "monthyear",
+  quarter: "quarter",
+  year: "year",
+};
+
+_adapters._date.override({
+  formats: () => FORMATS,
+  parse: (value: Date | number) => {
+    if (!(value instanceof Date)) {
+      return value;
+    }
+    return value.getTime();
+  },
+  format: function (time, fmt: keyof typeof FORMATS) {
+    switch (fmt) {
+      case "datetime":
+        return formatDateTime(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "datetimeseconds":
+        return formatDateTimeWithSeconds(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "millisecond":
+        return formatTimeWithSeconds(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "second":
+        return formatTimeWithSeconds(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "minute":
+        return formatTime(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "hour":
+        return formatTime(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "weekday":
+        return formatDateWeekdayDay(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "date":
+        return formatDate(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "day":
+        return formatDateVeryShort(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "week":
+        return formatDateVeryShort(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "month":
+        return formatDateMonth(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "monthyear":
+        return formatDateMonthYear(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "quarter":
+        return formatDate(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      case "year":
+        return formatDateYear(
+          new Date(time),
+          this.options.locale,
+          this.options.config
+        );
+      default:
+        return "";
+    }
+  },
+  // @ts-ignore
+  add: (time, amount, unit) => {
+    switch (unit) {
+      case "millisecond":
+        return addMilliseconds(time, amount);
+      case "second":
+        return addSeconds(time, amount);
+      case "minute":
+        return addMinutes(time, amount);
+      case "hour":
+        return addHours(time, amount);
+      case "day":
+        return addDays(time, amount);
+      case "week":
+        return addWeeks(time, amount);
+      case "month":
+        return addMonths(time, amount);
+      case "quarter":
+        return addQuarters(time, amount);
+      case "year":
+        return addYears(time, amount);
+      default:
+        return time;
+    }
+  },
+  diff: (max, min, unit) => {
+    switch (unit) {
+      case "millisecond":
+        return differenceInMilliseconds(max, min);
+      case "second":
+        return differenceInSeconds(max, min);
+      case "minute":
+        return differenceInMinutes(max, min);
+      case "hour":
+        return differenceInHours(max, min);
+      case "day":
+        return differenceInDays(max, min);
+      case "week":
+        return differenceInWeeks(max, min);
+      case "month":
+        return differenceInMonths(max, min);
+      case "quarter":
+        return differenceInQuarters(max, min);
+      case "year":
+        return differenceInYears(max, min);
+      default:
+        return 0;
+    }
+  },
+  // @ts-ignore
+  startOf: (time, unit, weekday) => {
+    switch (unit) {
+      case "second":
+        return startOfSecond(time);
+      case "minute":
+        return startOfMinute(time);
+      case "hour":
+        return startOfHour(time);
+      case "day":
+        return startOfDay(time);
+      case "week":
+        return startOfWeek(time);
+      case "isoWeek":
+        return startOfWeek(time, {
+          weekStartsOn: +weekday! as 0 | 1 | 2 | 3 | 4 | 5 | 6,
+        });
+      case "month":
+        return startOfMonth(time);
+      case "quarter":
+        return startOfQuarter(time);
+      case "year":
+        return startOfYear(time);
+      default:
+        return time;
+    }
+  },
+  // @ts-ignore
+  endOf: (time, unit) => {
+    switch (unit) {
+      case "second":
+        return endOfSecond(time);
+      case "minute":
+        return endOfMinute(time);
+      case "hour":
+        return endOfHour(time);
+      case "day":
+        return endOfDay(time);
+      case "week":
+        return endOfWeek(time);
+      case "month":
+        return endOfMonth(time);
+      case "quarter":
+        return endOfQuarter(time);
+      case "year":
+        return endOfYear(time);
+      default:
+        return time;
+    }
+  },
+});
@@ -0,0 +1,6 @@
+import type { ChartEvent } from "chart.js";
+
+export const clickIsTouch = (event: ChartEvent): boolean =>
+  !(event.native instanceof MouseEvent) ||
+  (event.native instanceof PointerEvent &&
+    event.native.pointerType !== "mouse");
@@ -3,7 +3,6 @@ import { LitElement, html, css, svg, nothing } from "lit";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import memoizeOne from "memoize-one";
 import type { HomeAssistant } from "../../types";
-import { measureTextWidth } from "../../util/text";

 export interface Node {
  id: string;
@@ -69,12 +68,15 @@ export class HaSankeyChart extends LitElement {

  private _statePerPixel = 0;

+  private _textMeasureCanvas?: HTMLCanvasElement;
+
  private _sizeController = new ResizeController(this, {
    callback: (entries) => entries[0]?.contentRect,
  });

  disconnectedCallback() {
    super.disconnectedCallback();
+    this._textMeasureCanvas = undefined;
  }

  willUpdate() {
@@ -475,7 +477,7 @@ export class HaSankeyChart extends LitElement {
                (node) =>
                  NODE_WIDTH +
                  TEXT_PADDING +
-                  (node.label ? measureTextWidth(node.label, FONT_SIZE) : 0)
+                  (node.label ? this._getTextWidth(node.label) : 0)
              )
            )
          : 0;
@@ -490,6 +492,18 @@ export class HaSankeyChart extends LitElement {
      : fullSize / nodesPerSection.length;
  }

+  private _getTextWidth(text: string): number {
+    if (!this._textMeasureCanvas) {
+      this._textMeasureCanvas = document.createElement("canvas");
+    }
+    const context = this._textMeasureCanvas.getContext("2d");
+    if (!context) return 0;
+
+    // Match the font style from CSS
+    context.font = `${FONT_SIZE}px sans-serif`;
+    return context.measureText(text).width;
+  }
+
  private _getVerticalLabelFontSize(label: string, labelWidth: number): number {
    // reduce the label font size so the longest word fits on one line
    const longestWord = label
@@ -499,7 +513,7 @@ export class HaSankeyChart extends LitElement {
          longest.length > current.length ? longest : current,
        ""
      );
-    const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
+    const wordWidth = this._getTextWidth(longestWord);
    return Math.min(FONT_SIZE, (labelWidth / wordWidth) * FONT_SIZE);
  }

@@ -1,26 +1,19 @@
+import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 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 { styleMap } from "lit/directives/style-map";
 import { getGraphColorByIndex } from "../../common/color/colors";
+import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTL } from "../../common/util/compute_rtl";
-
+import {
+  formatNumber,
+  numberFormatToLocale,
+  getNumberFormatOptions,
+} from "../../common/number/format_number";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import type { ECOption } from "../../resources/echarts";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import {
-  getNumberFormatOptions,
-  formatNumber,
-} from "../../common/number/format_number";
-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";
+import { clickIsTouch } from "./click_is_touch";

 const safeParseFloat = (value) => {
  const parsed = parseFloat(value);
@@ -61,21 +54,15 @@ export class StateHistoryChartLine extends LitElement {

  @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;

-  @property({ type: String }) public height?: string;
-
-  @state() private _chartData: LineSeriesOption[] = [];
+  @state() private _chartData?: ChartData<"line">;

  @state() private _entityIds: string[] = [];

  private _datasetToDataIndex: number[] = [];

-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: ChartOptions;

-  private _hiddenStats = new Set<string>();
-
-  @state() private _yWidth = 25;
-
-  @state() private _visualMap?: VisualMapComponentOption[];
+  @state() private _yWidth = 0;

  private _chartTime: Date = new Date();

@@ -85,109 +72,171 @@ export class StateHistoryChartLine extends LitElement {
        .hass=${this.hass}
        .data=${this._chartData}
        .options=${this._chartOptions}
-        .height=${this.height}
-        style=${styleMap({ height: this.height })}
-        external-hidden
-        @dataset-hidden=${this._datasetHidden}
-        @dataset-unhidden=${this._datasetUnhidden}
+        .paddingYAxis=${this.paddingYAxis - this._yWidth}
+        chart-type="line"
      ></ha-chart-base>
    `;
  }

-  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: any;
-      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}`
-      : "";
-
-    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,
-                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) {
+    if (
+      !this.hasUpdated ||
+      changedProps.has("showNames") ||
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
+      changedProps.has("unit") ||
+      changedProps.has("logarithmicScale") ||
+      changedProps.has("minYAxis") ||
+      changedProps.has("maxYAxis") ||
+      changedProps.has("fitYData")
+    ) {
+      this._chartOptions = {
+        parsing: false,
+        interaction: {
+          mode: "nearest",
+          axis: "xy",
+        },
+        scales: {
+          x: {
+            type: "time",
+            adapters: {
+              date: {
+                locale: this.hass.locale,
+                config: this.hass.config,
+              },
+            },
+            min: this.startTime,
+            max: this.endTime,
+            ticks: {
+              maxRotation: 0,
+              sampleSize: 5,
+              autoSkipPadding: 20,
+              major: {
+                enabled: true,
+              },
+              font: (context) =>
+                context.tick && context.tick.major
+                  ? ({ weight: "bold" } as any)
+                  : {},
+            },
+            time: {
+              tooltipFormat: "datetimeseconds",
+            },
+          },
+          y: {
+            suggestedMin: this.fitYData ? this.minYAxis : null,
+            suggestedMax: this.fitYData ? this.maxYAxis : null,
+            min: this.fitYData ? null : this.minYAxis,
+            max: this.fitYData ? null : this.maxYAxis,
+            ticks: {
+              maxTicksLimit: 7,
+            },
+            title: {
+              display: true,
+              text: this.unit,
+            },
+            afterUpdate: (y) => {
+              if (this._yWidth !== Math.floor(y.width)) {
+                this._yWidth = Math.floor(y.width);
+                fireEvent(this, "y-width-changed", {
+                  value: this._yWidth,
+                  chartIndex: this.chartIndex,
+                });
+              }
+            },
+            position: computeRTL(this.hass) ? "right" : "left",
+            type: this.logarithmicScale ? "logarithmic" : "linear",
+          },
+        },
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: (context) => {
+                let label = `${context.dataset.label}: ${formatNumber(
+                  context.parsed.y,
+                  this.hass.locale,
+                  getNumberFormatOptions(
+                    undefined,
+                    this.hass.entities[this._entityIds[context.datasetIndex]]
+                  )
+                )} ${this.unit}`;
+                const dataIndex =
+                  this._datasetToDataIndex[context.datasetIndex];
+                const data = this.data[dataIndex];
+                if (data.statistics && data.statistics.length > 0) {
+                  const source =
+                    data.states.length === 0 ||
+                    context.parsed.x < data.states[0].last_changed
+                      ? `\n${this.hass.localize(
+                          "ui.components.history_charts.source_stats"
+                        )}`
+                      : `\n${this.hass.localize(
+                          "ui.components.history_charts.source_history"
+                        )}`;
+                  label += source;
+                }
+                return label;
+              },
+            },
+          },
+          filler: {
+            propagate: true,
+          },
+          legend: {
+            display: this.showNames,
+            labels: {
+              usePointStyle: true,
+            },
+          },
+        },
+        elements: {
+          line: {
+            tension: 0.1,
+            borderWidth: 1.5,
+          },
+          point: {
+            hitRadius: 50,
+          },
+        },
+        segment: {
+          borderColor: (context) => {
+            // render stat data with a slightly transparent line
+            const dataIndex = this._datasetToDataIndex[context.datasetIndex];
+            const data = this.data[dataIndex];
+            return data.statistics &&
+              data.statistics.length > 0 &&
+              (data.states.length === 0 ||
+                context.p0.parsed.x < data.states[0].last_changed)
+              ? this._chartData!.datasets[dataIndex].borderColor + "7F"
+              : undefined;
+          },
+        },
+        // @ts-expect-error
+        locale: numberFormatToLocale(this.hass.locale),
+        onClick: (e: any) => {
+          if (!this.clickForMoreInfo || clickIsTouch(e)) {
+            return;
+          }
+
+          const chart = e.chart;
+
+          const points = chart.getElementsAtEventForMode(
+            e,
+            "nearest",
+            { intersect: true },
+            true
+          );
+
+          if (points.length) {
+            const firstPoint = points[0];
+            fireEvent(this, "hass-more-info", {
+              entityId: this._entityIds[firstPoint.datasetIndex],
+            });
+            chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
+          }
+        },
+      };
+    }
    if (
      changedProps.has("data") ||
      changedProps.has("startTime") ||
@@ -199,104 +248,13 @@ export class StateHistoryChartLine extends LitElement {
      // so the X axis grows even if there is no new data
      this._generateData();
    }
-
-    if (
-      !this.hasUpdated ||
-      changedProps.has("showNames") ||
-      changedProps.has("startTime") ||
-      changedProps.has("endTime") ||
-      changedProps.has("unit") ||
-      changedProps.has("logarithmicScale") ||
-      changedProps.has("minYAxis") ||
-      changedProps.has("maxYAxis") ||
-      changedProps.has("fitYData") ||
-      changedProps.has("paddingYAxis") ||
-      changedProps.has("_visualMap") ||
-      changedProps.has("_yWidth")
-    ) {
-      const rtl = computeRTL(this.hass);
-      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,
-        },
-        yAxis: {
-          type: this.logarithmicScale ? "log" : "value",
-          name: this.unit,
-          min: this._clampYAxis(minYAxis),
-          max: this._clampYAxis(maxYAxis),
-          position: rtl ? "right" : "left",
-          scale: true,
-          nameGap: 2,
-          nameTextStyle: {
-            align: "left",
-          },
-          axisLine: {
-            show: false,
-          },
-          axisLabel: {
-            margin: 5,
-            formatter: (value: number) => {
-              const label = formatNumber(value, this.hass.locale);
-              const width = measureTextWidth(label, 12) + 5;
-              if (width > this._yWidth) {
-                this._yWidth = width;
-                fireEvent(this, "y-width-changed", {
-                  value: this._yWidth,
-                  chartIndex: this.chartIndex,
-                });
-              }
-              return label;
-            },
-          },
-        } as YAXisOption,
-        legend: {
-          show: this.showNames,
-          type: "scroll",
-          animationDurationUpdate: 400,
-          icon: "circle",
-          padding: [20, 0],
-        },
-        grid: {
-          ...(this.showNames ? {} : { top: 30 }), // undefined is the same as 0
-          left: rtl ? 1 : Math.max(this.paddingYAxis, this._yWidth),
-          right: rtl ? Math.max(this.paddingYAxis, this._yWidth) : 1,
-          bottom: 30,
-        },
-        visualMap: this._visualMap,
-        tooltip: {
-          trigger: "axis",
-          appendTo: document.body,
-          formatter: this._renderTooltip,
-        },
-      };
-    }
  }

  private _generateData() {
    let colorIndex = 0;
    const computedStyles = getComputedStyle(this);
    const entityStates = this.data;
-    const datasets: LineSeriesOption[] = [];
+    const datasets: ChartDataset<"line">[] = [];
    const entityIds: string[] = [];
    const datasetToDataIndex: number[] = [];
    if (entityStates.length === 0) {
@@ -312,7 +270,7 @@ export class StateHistoryChartLine extends LitElement {
      // array containing [value1, value2, etc]
      let prevValues: any[] | null = null;

-      const data: LineSeriesOption[] = [];
+      const data: ChartDataset<"line">[] = [];

      const pushData = (timestamp: Date, datavalues: any[] | null) => {
        if (!datavalues) return;
@@ -329,46 +287,26 @@ export class StateHistoryChartLine extends LitElement {
            // to the chart for the previous value. Otherwise the gap will
            // be too big. It will go from the start of the previous data
            // value until the start of the next data value.
-            d.data!.push([timestamp, prevValues[i]]);
+            d.data.push({ x: timestamp.getTime(), y: prevValues[i] });
          }
-          d.data!.push([timestamp, datavalues[i]]);
+          d.data.push({ x: timestamp.getTime(), y: datavalues[i] });
        });
        prevValues = datavalues;
      };

-      const addDataSet = (
-        id: string,
-        nameY: string,
-        color?: string,
-        fill = false
-      ) => {
+      const addDataSet = (nameY: string, color?: string, fill = false) => {
        if (!color) {
          color = getGraphColorByIndex(colorIndex, computedStyles);
          colorIndex++;
        }
        data.push({
-          id,
+          label: nameY,
+          fill: fill ? "origin" : false,
+          borderColor: color,
+          backgroundColor: color + "7F",
+          stepped: "before",
+          pointRadius: 0,
          data: [],
-          type: "line",
-          cursor: "default",
-          name: nameY,
-          color,
-          symbol: "circle",
-          symbolSize: 1,
-          step: "end",
-          sampling: "minmax",
-          animationDurationUpdate: 0,
-          lineStyle: {
-            width: fill ? 0 : 1.5,
-          },
-          areaStyle: fill
-            ? {
-                color: color + "7F",
-              }
-            : undefined,
-          tooltip: {
-            show: !fill,
-          },
        });
        entityIds.push(states.entity_id);
        datasetToDataIndex.push(dataIdx);
@@ -386,16 +324,12 @@ export class StateHistoryChartLine extends LitElement {
        const isHeating =
          domain === "climate" && hasHvacAction
            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "heat"
+                entityState.attributes?.hvac_action === "heating"
            : (entityState: LineChartState) => entityState.state === "heat";
        const isCooling =
          domain === "climate" && hasHvacAction
            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "cool"
+                entityState.attributes?.hvac_action === "cooling"
            : (entityState: LineChartState) => entityState.state === "cool";

        const hasHeat = states.states.some(isHeating);
@@ -411,23 +345,13 @@ export class StateHistoryChartLine extends LitElement {
              entityState.attributes.target_temp_low
        );
        addDataSet(
-          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"
-              )
+          `${this.hass.localize("ui.card.climate.current_temperature", {
+            name: name,
+          })}`
        );
        if (hasHeat) {
          addDataSet(
-            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"
-                ),
+            `${this.hass.localize("ui.card.climate.heating", { name: name })}`,
            computedStyles.getPropertyValue("--state-climate-heat-color"),
            true
          );
@@ -436,12 +360,7 @@ export class StateHistoryChartLine extends LitElement {
        }
        if (hasCool) {
          addDataSet(
-            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"
-                ),
+            `${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
            computedStyles.getPropertyValue("--state-climate-cool-color"),
            true
          );
@@ -451,40 +370,22 @@ export class StateHistoryChartLine extends LitElement {

        if (hasTargetRange) {
          addDataSet(
-            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"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
+              name: name,
+              mode: this.hass.localize("ui.card.climate.high"),
+            })}`
          );
          addDataSet(
-            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"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_mode", {
+              name: name,
+              mode: this.hass.localize("ui.card.climate.low"),
+            })}`
          );
        } else {
          addDataSet(
-            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"
-                )
+            `${this.hass.localize("ui.card.climate.target_temperature_entity", {
+              name: name,
+            })}`
          );
        }

@@ -537,29 +438,19 @@ export class StateHistoryChartLine extends LitElement {
          );

        addDataSet(
-          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"
-              )
+          `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
+            name: name,
+          })}`
        );

        if (hasCurrent) {
          addDataSet(
-            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"
-                )
+            `${this.hass.localize(
+              "ui.card.humidifier.current_humidity_entity",
+              {
+                name: name,
+              }
+            )}`
          );
        }

@@ -567,40 +458,25 @@ export class StateHistoryChartLine extends LitElement {
        // If action attribute is not available, we shade the area when the device is on
        if (hasHumidifying) {
          addDataSet(
-            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"
-                ),
+            `${this.hass.localize("ui.card.humidifier.humidifying", {
+              name: name,
+            })}`,
            computedStyles.getPropertyValue("--state-humidifier-on-color"),
            true
          );
        } else if (hasDrying) {
          addDataSet(
-            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"
-                ),
+            `${this.hass.localize("ui.card.humidifier.drying", {
+              name: name,
+            })}`,
            computedStyles.getPropertyValue("--state-humidifier-on-color"),
            true
          );
        } else {
          addDataSet(
-            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"
-                ),
+            `${this.hass.localize("ui.card.humidifier.on_entity", {
+              name: name,
+            })}`,
            undefined,
            true
          );
@@ -633,7 +509,7 @@ export class StateHistoryChartLine extends LitElement {
          pushData(new Date(entityState.last_changed), series);
        });
      } else {
-        addDataSet(states.entity_id, name);
+        addDataSet(name);

        let lastValue: number;
        let lastDate: Date;
@@ -699,49 +575,11 @@ export class StateHistoryChartLine extends LitElement {
      Array.prototype.push.apply(datasets, data);
    });

-    this._chartData = datasets;
+    this._chartData = {
+      datasets,
+    };
    this._entityIds = entityIds;
    this._datasetToDataIndex = datasetToDataIndex;
-    const visualMap: VisualMapComponentOption[] = [];
-    this._chartData.forEach((_, seriesIndex) => {
-      const dataIndex = this._datasetToDataIndex[seriesIndex];
-      const data = this.data[dataIndex];
-      if (!data.statistics || data.statistics.length === 0) {
-        return;
-      }
-      // render stat data with a slightly transparent line
-      const firstStateTS =
-        data.states[0]?.last_changed ?? this.endTime.getTime();
-      visualMap.push({
-        show: false,
-        seriesIndex,
-        dimension: 0,
-        pieces: [
-          {
-            max: firstStateTS - 0.01,
-            colorAlpha: 0.5,
-          },
-          {
-            min: firstStateTS,
-            colorAlpha: 1,
-          },
-        ],
-      });
-    });
-    this._visualMap = visualMap.length > 0 ? visualMap : undefined;
-  }
-
-  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);
@@ -1,26 +1,19 @@
+import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import { getRelativePosition } from "chart.js/helpers";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type {
-  CustomSeriesOption,
-  CustomSeriesRenderItem,
-  ECElementEvent,
-  TooltipFormatterCallback,
-  TooltipPositionCallbackParams,
-} from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
+import { fireEvent } from "../../common/dom/fire_event";
+import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import { computeTimelineColor } from "./timeline-color";
-import type { ECOption } from "../../resources/echarts";
-import echarts from "../../resources/echarts";
-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 type { TimeLineData } from "./timeline-chart/const";
+import { computeTimelineColor } from "./timeline-chart/timeline-color";
+import { clickIsTouch } from "./click_is_touch";

@customElement("state-history-chart-timeline")
 export class StateHistoryChartTimeline extends LitElement {
@@ -51,9 +44,9 @@ export class StateHistoryChartTimeline extends LitElement {

  @property({ attribute: false, type: Number }) public chartIndex?;

-  @state() private _chartData: CustomSeriesOption[] = [];
+  @state() private _chartData?: ChartData<"timeline">;

-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: ChartOptions<"timeline">;

  @state() private _yWidth = 0;

@@ -63,99 +56,20 @@ export class StateHistoryChartTimeline extends LitElement {
    return html`
      <ha-chart-base
        .hass=${this.hass}
+        .data=${this._chartData}
        .options=${this._chartOptions}
-        .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData as ECOption["series"]}
-        @chart-click=${this._handleChartClick}
+        .height=${this.data.length * 30 + 30}
+        .paddingYAxis=${this.paddingYAxis - this._yWidth}
+        chart-type="timeline"
      ></ha-chart-base>
    `;
  }

-  private _renderItem: CustomSeriesRenderItem = (params, api) => {
-    const categoryIndex = api.value(0);
-    const start = api.coord([api.value(1), categoryIndex]);
-    const end = api.coord([api.value(2), categoryIndex]);
-    const height = 20;
-    const coordSys = params.coordSys as any;
-    const rectShape = echarts.graphic.clipRectByRect(
-      {
-        x: start[0],
-        y: start[1] - height / 2,
-        width: end[0] - start[0],
-        height: height,
-      },
-      {
-        x: coordSys.x,
-        y: coordSys.y,
-        width: coordSys.width,
-        height: coordSys.height,
-      }
-    );
-    if (!rectShape) return null;
-    const rect = {
-      type: "rect" as const,
-      transition: "shape" as const,
-      shape: rectShape,
-      style: {
-        fill: api.value(4) as string,
-      },
-    };
-    const text = api.value(3) as string;
-    const textWidth = measureTextWidth(text, 12);
-    const LABEL_PADDING = 4;
-    if (textWidth < rectShape.width - LABEL_PADDING * 2) {
-      return {
-        type: "group",
-        children: [
-          rect,
-          {
-            type: "text",
-            style: {
-              ...rectShape,
-              x: rectShape.x + LABEL_PADDING,
-              text,
-              fill: api.value(5) as string,
-              fontSize: 12,
-              lineHeight: rectShape.height,
-            },
-          },
-        ],
-      };
-    }
-    return rect;
-  };
-
-  private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
-    (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker, seriesName } = Array.isArray(params)
-        ? params[0]
-        : params;
-      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"
-      )}: ${millisecondsToDuration(durationInMs)}`;
-
-      const lines = [
-        marker + name,
-        formatDateTimeWithSeconds(
-          new Date(value![1]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formatDateTimeWithSeconds(
-          new Date(value![2]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formattedDuration,
-      ].join("<br>");
-      return [title, lines].join("");
-    };
-
  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hasUpdated) {
+      this._createOptions();
+    }
+
    if (
      changedProps.has("startTime") ||
      changedProps.has("endTime") ||
@@ -169,12 +83,9 @@ export class StateHistoryChartTimeline extends LitElement {
    }

    if (
-      !this.hasUpdated ||
      changedProps.has("startTime") ||
      changedProps.has("endTime") ||
-      changedProps.has("showNames") ||
-      changedProps.has("paddingYAxis") ||
-      changedProps.has("_yWidth")
+      changedProps.has("showNames")
    ) {
      this._createOptions();
    }
@@ -182,71 +93,144 @@ export class StateHistoryChartTimeline extends LitElement {

  private _createOptions() {
    const narrow = this.narrow;
-    const showNames = this.chunked || this.showNames;
-    const maxInternalLabelWidth = narrow ? 105 : 185;
-    const labelWidth = showNames
-      ? Math.max(this.paddingYAxis, this._yWidth)
-      : 0;
-    const labelMargin = 5;
-    const rtl = computeRTL(this.hass);
    this._chartOptions = {
-      xAxis: {
-        type: "time",
-        min: this.startTime,
-        max: this.endTime,
-        axisTick: {
-          show: true,
+      maintainAspectRatio: false,
+      parsing: false,
+      scales: {
+        x: {
+          type: "time",
+          position: "bottom",
+          adapters: {
+            date: {
+              locale: this.hass.locale,
+              config: this.hass.config,
+            },
+          },
+          min: this.startTime,
+          suggestedMax: this.endTime,
+          ticks: {
+            autoSkip: true,
+            maxRotation: 0,
+            sampleSize: 5,
+            autoSkipPadding: 20,
+            major: {
+              enabled: true,
+            },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          grid: {
+            offset: false,
+          },
+          time: {
+            tooltipFormat: "datetimeseconds",
+          },
        },
-        splitLine: {
-          show: false,
-        },
-      },
-      yAxis: {
-        type: "category",
-        inverse: true,
-        position: rtl ? "right" : "left",
-        triggerEvent: true,
-        axisTick: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-        axisLabel: {
-          show: showNames,
-          width: labelWidth,
-          overflow: "truncate",
-          margin: labelMargin,
-          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;
+        y: {
+          type: "category",
+          barThickness: 20,
+          offset: true,
+          grid: {
+            display: false,
+            drawBorder: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display: this.chunked || this.showNames,
+          },
+          afterSetDimensions: (y) => {
+            y.maxWidth = y.chart.width * 0.18;
+          },
+          afterFit: (scaleInstance) => {
+            if (this.chunked) {
+              // ensure all the chart labels are the same width
+              scaleInstance.width = narrow ? 105 : 185;
+            }
+          },
+          afterUpdate: (y) => {
+            const yWidth = this.showNames
+              ? (y.width ?? 0)
+              : computeRTL(this.hass)
+                ? 0
+                : (y.left ?? 0);
+            if (
+              this._yWidth !== Math.floor(yWidth) &&
+              y.ticks.length === this.data.length
+            ) {
+              this._yWidth = Math.floor(yWidth);
              fireEvent(this, "y-width-changed", {
                value: this._yWidth,
                chartIndex: this.chartIndex,
              });
            }
-            return label;
          },
-          hideOverlap: true,
+          position: computeRTL(this.hass) ? "right" : "left",
        },
      },
-      grid: {
-        top: 10,
-        bottom: 30,
-        left: rtl ? 1 : labelWidth,
-        right: rtl ? labelWidth : 1,
+      plugins: {
+        tooltip: {
+          mode: "nearest",
+          callbacks: {
+            title: (context) =>
+              context![0].chart!.data!.labels![
+                context[0].datasetIndex
+              ] as string,
+            beforeBody: (context) => context[0].dataset.label || "",
+            label: (item) => {
+              const d = item.dataset.data[item.dataIndex] as TimeLineData;
+              const durationInMs = d.end.getTime() - d.start.getTime();
+              const formattedDuration = `${this.hass.localize(
+                "ui.components.history_charts.duration"
+              )}: ${millisecondsToDuration(durationInMs)}`;
+
+              return [
+                d.label || "",
+                formatDateTimeWithSeconds(
+                  d.start,
+                  this.hass.locale,
+                  this.hass.config
+                ),
+                formatDateTimeWithSeconds(
+                  d.end,
+                  this.hass.locale,
+                  this.hass.config
+                ),
+                formattedDuration,
+              ];
+            },
+            labelColor: (item) => ({
+              borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
+                .color!,
+              backgroundColor: (
+                item.dataset.data[item.dataIndex] as TimeLineData
+              ).color!,
+            }),
+          },
+        },
+        filler: {
+          propagate: true,
+        },
      },
-      tooltip: {
-        appendTo: document.body,
-        formatter: this._renderTooltip,
+      // @ts-expect-error
+      locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (!this.clickForMoreInfo || clickIsTouch(e)) {
+          return;
+        }
+
+        const chart = e.chart;
+        const canvasPosition = getRelativePosition(e, chart);
+
+        const index = Math.abs(
+          chart.scales.y.getValueForPixel(canvasPosition.y)
+        );
+        fireEvent(this, "hass-more-info", {
+          // @ts-ignore
+          entityId: this._chartData?.datasets[index]?.label,
+        });
+        chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
      },
    };
  }
@@ -262,7 +246,8 @@ export class StateHistoryChartTimeline extends LitElement {
    this._chartTime = new Date();
    const startTime = this.startTime;
    const endTime = this.endTime;
-    const datasets: CustomSeriesOption[] = [];
+    const labels: string[] = [];
+    const datasets: ChartDataset<"timeline">[] = [];
    const names = this.names || {};
    // stateHistory is a list of lists of sorted state objects
    stateHistory.forEach((stateInfo) => {
@@ -270,11 +255,10 @@ export class StateHistoryChartTimeline extends LitElement {
      let prevState: string | null = null;
      let locState: string | null = null;
      let prevLastChanged = startTime;
-      const entityDisplay: string = this.showNames
-        ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
-        : "";
+      const entityDisplay: string =
+        names[stateInfo.entity_id] || stateInfo.name;

-      const dataRow: unknown[] = [];
+      const dataRow: TimeLineData[] = [];
      stateInfo.data.forEach((entityState) => {
        let newState: string | null = entityState.state;
        const timeStamp = new Date(entityState.last_changed);
@@ -293,23 +277,15 @@ export class StateHistoryChartTimeline extends LitElement {
        } else if (newState !== prevState) {
          newLastChanged = new Date(entityState.last_changed);

-          const color = computeTimelineColor(
-            prevState,
-            computedStyles,
-            this.hass.states[stateInfo.entity_id]
-          );
          dataRow.push({
-            value: [
-              stateInfo.entity_id,
-              prevLastChanged,
-              newLastChanged,
-              locState,
-              color,
-              luminosity(hex2rgb(color)) > 0.5 ? "#000" : "#fff",
-            ],
-            itemStyle: {
-              color,
-            },
+            start: prevLastChanged,
+            end: newLastChanged,
+            label: locState,
+            color: computeTimelineColor(
+              prevState,
+              computedStyles,
+              this.hass.states[stateInfo.entity_id]
+            ),
          });

          prevState = newState;
@@ -319,52 +295,28 @@ export class StateHistoryChartTimeline extends LitElement {
      });

      if (prevState !== null) {
-        const color = computeTimelineColor(
-          prevState,
-          computedStyles,
-          this.hass.states[stateInfo.entity_id]
-        );
        dataRow.push({
-          value: [
-            stateInfo.entity_id,
-            prevLastChanged,
-            endTime,
-            locState,
-            color,
-            luminosity(hex2rgb(color)) > 0.5 ? "#000" : "#fff",
-          ],
-          itemStyle: {
-            color,
-          },
+          start: prevLastChanged,
+          end: endTime,
+          label: locState,
+          color: computeTimelineColor(
+            prevState,
+            computedStyles,
+            this.hass.states[stateInfo.entity_id]
+          ),
        });
      }
      datasets.push({
-        id: stateInfo.entity_id,
        data: dataRow,
-        name: entityDisplay,
-        dimensions: ["id", "start", "end", "name", "color", "textColor"],
-        type: "custom",
-        encode: {
-          x: [1, 2],
-          y: 0,
-          itemName: 3,
-        },
-        renderItem: this._renderItem,
+        label: stateInfo.entity_id,
      });
+      labels.push(entityDisplay);
    });

-    this._chartData = datasets;
-  }
-
-  private _handleChartClick(e: CustomEvent<ECElementEvent>): void {
-    if (e.detail.targetType === "axisLabel") {
-      const dataset = this._chartData[e.detail.dataIndex];
-      if (dataset) {
-        fireEvent(this, "hass-more-info", {
-          entityId: dataset.id as string,
-        });
-      }
-    }
+    this._chartData = {
+      labels: labels,
+      datasets: datasets,
+    };
  }

  static styles = css`
@@ -69,8 +69,6 @@ export class StateHistoryCharts extends LitElement {

  @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;

-  @property({ type: String }) public height?: string;
-
  private _computedStartTime!: Date;

  private _computedEndTime!: Date;
@@ -135,7 +133,7 @@ export class StateHistoryCharts extends LitElement {
      return html``;
    }
    if (!Array.isArray(item)) {
-      return html`<div class="entry-container line">
+      return html`<div class="entry-container">
        <state-history-chart-line
          .hass=${this.hass}
          .unit=${item.unit}
@@ -153,11 +151,10 @@ export class StateHistoryCharts extends LitElement {
          .maxYAxis=${this.maxYAxis}
          .fitYData=${this.fitYData}
          @y-width-changed=${this._yWidthChanged}
-          .height=${this.virtualize ? undefined : this.height}
        ></state-history-chart-line>
      </div> `;
    }
-    return html`<div class="entry-container timeline">
+    return html`<div class="entry-container">
      <state-history-chart-timeline
        .hass=${this.hass}
        .data=${item}
@@ -277,8 +274,7 @@ export class StateHistoryCharts extends LitElement {

  static styles = css`
    :host {
-      display: flex;
-      flex-direction: column;
+      display: block;
      /* height of single timeline chart = 60px */
      min-height: 60px;
    }
@@ -301,10 +297,6 @@ export class StateHistoryCharts extends LitElement {
      width: 100%;
    }

-    .entry-container.line {
-      flex: 1;
-    }
-
    .entry-container:hover {
      z-index: 1;
    }
@@ -316,10 +308,6 @@ 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;
@@ -1,22 +1,21 @@
 import type {
-  BarSeriesOption,
-  LineSeriesOption,
-} from "echarts/types/dist/shared";
+  ChartData,
+  ChartDataset,
+  ChartOptions,
+  ChartType,
+} from "chart.js";
 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 { fireEvent } from "../../common/dom/fire_event";
 import {
  formatNumber,
+  numberFormatToLocale,
  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,
@@ -26,11 +25,13 @@ import {
  getDisplayUnit,
  getStatisticLabel,
  getStatisticMetadata,
+  isExternalStatistic,
  statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
+import type { ChartDatasetExtra } from "./ha-chart-base";
+import { clickIsTouch } from "./click_is_touch";

 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
  mean: "mean",
@@ -56,14 +57,12 @@ 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 })
  public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];

-  @property({ attribute: false }) public chartType: "line" | "bar" = "line";
+  @property({ attribute: false }) public chartType: ChartType = "line";

  @property({ attribute: false, type: Number }) public minYAxis?: number;

@@ -85,18 +84,13 @@ export class StatisticsChart extends LitElement {

  @property() public period?: string;

-  @property({ attribute: "days-to-show", type: Number })
-  public daysToShow?: number;
+  @state() private _chartData: ChartData = { datasets: [] };

-  @property({ type: String }) public height?: string;
-
-  @state() private _chartData: (LineSeriesOption | BarSeriesOption)[] = [];
-
-  @state() private _legendData: string[] = [];
+  @state() private _chartDatasetExtra: ChartDatasetExtra[] = [];

  @state() private _statisticIds: string[] = [];

-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: ChartOptions;

  @state() private _hiddenStats = new Set<string>();

@@ -107,14 +101,8 @@ export class StatisticsChart extends LitElement {
  }

  public willUpdate(changedProps: PropertyValues) {
-    if (
-      changedProps.has("statisticsData") ||
-      changedProps.has("statTypes") ||
-      changedProps.has("chartType") ||
-      changedProps.has("hideLegend") ||
-      changedProps.has("_hiddenStats")
-    ) {
-      this._generateData();
+    if (changedProps.has("legendMode")) {
+      this._hiddenStats.clear();
    }
    if (
      !this.hasUpdated ||
@@ -125,14 +113,19 @@ export class StatisticsChart extends LitElement {
      changedProps.has("maxYAxis") ||
      changedProps.has("fitYData") ||
      changedProps.has("logarithmicScale") ||
-      changedProps.has("hideLegend") ||
-      changedProps.has("startTime") ||
-      changedProps.has("endTime") ||
-      changedProps.has("_legendData") ||
-      changedProps.has("_chartData")
+      changedProps.has("hideLegend")
    ) {
      this._createOptions();
    }
+    if (
+      changedProps.has("statisticsData") ||
+      changedProps.has("statTypes") ||
+      changedProps.has("chartType") ||
+      changedProps.has("hideLegend") ||
+      changedProps.has("_hiddenStats")
+    ) {
+      this._generateData();
+    }
  }

  public firstUpdated() {
@@ -164,160 +157,145 @@ export class StatisticsChart extends LitElement {

    return html`
      <ha-chart-base
+        external-hidden
        .hass=${this.hass}
        .data=${this._chartData}
+        .extraData=${this._chartDatasetExtra}
        .options=${this._chartOptions}
-        .height=${this.height}
-        style=${styleMap({ height: this.height })}
-        external-hidden
+        .chartType=${this.chartType}
        @dataset-hidden=${this._datasetHidden}
        @dataset-unhidden=${this._datasetUnhidden}
      ></ha-chart-base>
    `;
  }

-  private _datasetHidden(ev: CustomEvent) {
-    this._hiddenStats.add(ev.detail.name);
+  private _datasetHidden(ev) {
+    ev.stopPropagation();
+    this._hiddenStats.add(this._statisticIds[ev.detail.index]);
    this.requestUpdate("_hiddenStats");
  }

-  private _datasetUnhidden(ev: CustomEvent) {
-    this._hiddenStats.delete(ev.detail.name);
+  private _datasetUnhidden(ev) {
+    ev.stopPropagation();
+    this._hiddenStats.delete(this._statisticIds[ev.detail.index]);
    this.requestUpdate("_hiddenStats");
  }

-  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(
-          rawValue,
-          this.hass.locale,
-          options
-        )}${unit}`;
-
-        const time =
-          index === 0
-            ? formatDateTimeWithSeconds(
-                new Date(param.value[0]),
-                this.hass.locale,
-                this.hass.config
-              ) + "<br>"
-            : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}`;
-      })
-      .filter(Boolean)
-      .join("<br>");
-  };
-
-  private _createOptions() {
-    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
-        );
-      }
-    }
-
+  private _createOptions(unit?: string) {
    this._chartOptions = {
-      xAxis: [
-        {
-          id: "xAxis",
+      parsing: false,
+      interaction: {
+        mode: "nearest",
+        axis: "x",
+      },
+      scales: {
+        x: {
          type: "time",
-          min: startTime,
-          max: this.endTime,
+          adapters: {
+            date: {
+              locale: this.hass.locale,
+              config: this.hass.config,
+            },
+          },
+          ticks: {
+            source: this.chartType === "bar" ? "data" : undefined,
+            maxRotation: 0,
+            sampleSize: 5,
+            autoSkipPadding: 20,
+            major: {
+              enabled: true,
+            },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          time: {
+            tooltipFormat: "datetime",
+            unit:
+              this.chartType === "bar" &&
+              this.period &&
+              ["hour", "day", "week", "month"].includes(this.period)
+                ? this.period
+                : undefined,
+          },
        },
-        {
-          id: "hiddenAxis",
-          type: "time",
-          show: false,
-        },
-      ],
-      yAxis: {
-        type: this.logarithmicScale ? "log" : "value",
-        name: this.unit,
-        nameGap: 2,
-        nameTextStyle: {
-          align: "left",
-        },
-        position: computeRTL(this.hass) ? "right" : "left",
-        scale: true,
-        min: this._clampYAxis(minYAxis),
-        max: this._clampYAxis(maxYAxis),
-        splitLine: {
-          show: true,
+        y: {
+          beginAtZero: this.chartType === "bar",
+          ticks: {
+            maxTicksLimit: 7,
+          },
+          title: {
+            display: unit || this.unit,
+            text: unit || this.unit,
+          },
+          type: this.logarithmicScale ? "logarithmic" : "linear",
+          min: this.fitYData ? null : this.minYAxis,
+          max: this.fitYData ? null : this.maxYAxis,
        },
      },
-      legend: {
-        show: !this.hideLegend,
-        type: "scroll",
-        animationDurationUpdate: 400,
-        icon: "circle",
-        padding: [20, 0],
-        data: this._legendData,
+      plugins: {
+        tooltip: {
+          callbacks: {
+            label: (context) =>
+              `${context.dataset.label}: ${formatNumber(
+                context.parsed.y,
+                this.hass.locale,
+                getNumberFormatOptions(
+                  undefined,
+                  this.hass.entities[this._statisticIds[context.datasetIndex]]
+                )
+              )} ${
+                // @ts-ignore
+                context.dataset.unit || ""
+              }`,
+          },
+        },
+        filler: {
+          propagate: true,
+        },
+        legend: {
+          display: !this.hideLegend,
+          labels: {
+            usePointStyle: true,
+          },
+        },
      },
-      grid: {
-        ...(this.hideLegend ? { top: this.unit ? 30 : 5 } : {}), // undefined is the same as 0
-        left: 1,
-        right: 1,
-        bottom: 0,
-        containLabel: true,
+      elements: {
+        line: {
+          tension: 0.4,
+          cubicInterpolationMode: "monotone",
+          borderWidth: 1.5,
+        },
+        bar: { borderWidth: 1.5, borderRadius: 4 },
+        point: {
+          hitRadius: 50,
+        },
      },
-      tooltip: {
-        trigger: "axis",
-        appendTo: document.body,
-        formatter: this._renderTooltip,
+      // @ts-expect-error
+      locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (!this.clickForMoreInfo || clickIsTouch(e)) {
+          return;
+        }
+
+        const chart = e.chart;
+
+        const points = chart.getElementsAtEventForMode(
+          e,
+          "nearest",
+          { intersect: true },
+          true
+        );
+
+        if (points.length) {
+          const firstPoint = points[0];
+          const statisticId = this._statisticIds[firstPoint.datasetIndex];
+          if (!isExternalStatistic(statisticId)) {
+            fireEvent(this, "hass-more-info", { entityId: statisticId });
+            chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
+          }
+        }
      },
    };
  }
@@ -347,8 +325,8 @@ export class StatisticsChart extends LitElement {

    let colorIndex = 0;
    const statisticsData = Object.entries(this.statisticsData);
-    const totalDataSets: typeof this._chartData = [];
-    const legendData: { name: string; color: string }[] = [];
+    const totalDataSets: ChartDataset<"line">[] = [];
+    const totalDatasetExtras: ChartDatasetExtra[] = [];
    const statisticIds: string[] = [];
    let endTime: Date;

@@ -394,19 +372,19 @@ export class StatisticsChart extends LitElement {
      }

      // array containing [value1, value2, etc]
-      let prevValues: (number | null)[][] | null = null;
+      let prevValues: (number | null)[] | null = null;
      let prevEndTime: Date | undefined;

      // The datasets for the current statistic
-      const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
-      const statLegendData: { name: string; color: string }[] = [];
+      const statDataSets: ChartDataset<"line">[] = [];
+      const statDatasetExtras: ChartDatasetExtra[] = [];

      const pushData = (
        start: Date,
        end: Date,
-        dataValues: (number | null)[][]
+        dataValues: (number | null)[] | null
      ) => {
-        if (!dataValues.length) return;
+        if (!dataValues) return;
        if (start > end) {
          // Drop data points that are after the requested endTime. This could happen if
          // endTime is "now" and client time is not in sync with server time.
@@ -421,12 +399,11 @@ 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(
-              this._transformDataValue([prevEndTime, ...prevValues[i]!])
-            );
-            d.data!.push([prevEndTime, null]);
+            d.data.push({ x: prevEndTime.getTime(), y: prevValues[i]! });
+            // @ts-expect-error
+            d.data.push({ x: prevEndTime.getTime(), y: null });
          }
-          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
+          d.data.push({ x: start.getTime(), y: dataValues[i]! });
        });
        prevValues = dataValues;
        prevEndTime = end;
@@ -461,63 +438,49 @@ export class StatisticsChart extends LitElement {
          })
        : this.statTypes;

-      let displayedLegend = false;
+      let displayed_legend = false;
      sortedTypes.forEach((type) => {
        if (statisticsHaveType(stats, type)) {
          const band = drawBands && (type === "min" || type === "max");
          if (!this.hideLegend) {
-            const showLegend = hasMean
+            const show_legend = hasMean
              ? type === "mean"
-              : displayedLegend === false;
-            if (showLegend) {
-              statLegendData.push({ name, color });
-            }
-            displayedLegend = displayedLegend || showLegend;
+              : displayed_legend === false;
+            statDatasetExtras.push({
+              legend_label: name,
+              show_legend,
+            });
+            displayed_legend = displayed_legend || show_legend;
          }
          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
+          statDataSets.push({
+            label: name
              ? `${name} (${this.hass.localize(
                  `ui.components.statistics_charts.statistic_types.${type}`
-                )})`
+                )})
+            `
              : this.hass.localize(
                  `ui.components.statistics_charts.statistic_types.${type}`
                ),
-            symbol: "none",
-            sampling: "minmax",
-            animationDurationUpdate: 0,
-            lineStyle: {
-              width: 1.5,
-            },
-            itemStyle:
-              this.chartType === "bar"
-                ? {
-                    borderRadius: [4, 4, 0, 0],
-                    borderColor,
-                    borderWidth: 1.5,
-                  }
-                : undefined,
-            color: this.chartType === "bar" ? backgroundColor : borderColor,
-          };
-          if (band && this.chartType === "line") {
-            series.stack = `band-${statistic_id}`;
-            series.stackStrategy = "all";
-            if (drawBands && type === "max") {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
-            }
-          }
-          statDataSets.push(series);
+            fill: drawBands
+              ? type === "min" && hasMean
+                ? "+1"
+                : type === "max"
+                  ? "-1"
+                  : false
+              : false,
+            borderColor:
+              band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,
+            backgroundColor: band ? color + "3F" : color + "7F",
+            pointRadius: 0,
+            hidden: !this.hideLegend
+              ? this._hiddenStats.has(statistic_id)
+              : false,
+            data: [],
+            // @ts-ignore
+            unit: meta?.unit_of_measurement,
+            band,
+          });
          statisticIds.push(statistic_id);
        }
      });
@@ -531,79 +494,40 @@ export class StatisticsChart extends LitElement {
          return;
        }
        prevDate = startDate;
-        const dataValues: (number | null)[][] = [];
+        const dataValues: (number | null)[] = [];
        statTypes.forEach((type) => {
-          const val: (number | null)[] = [];
+          let val: number | null | undefined;
          if (type === "sum") {
            if (firstSum === null || firstSum === undefined) {
-              val.push(0);
+              val = 0;
              firstSum = stat.sum;
            } else {
-              val.push((stat.sum || 0) - firstSum);
+              val = (stat.sum || 0) - firstSum;
            }
-          } else if (type === "max" && this.chartType === "line") {
-            const max = stat.max || 0;
-            val.push(Math.abs(max - (stat.min || 0)));
-            val.push(max);
          } else {
-            val.push(stat[type] ?? null);
+            val = stat[type];
          }
-          dataValues.push(val);
+          dataValues.push(val ?? null);
        });
-        if (!this._hiddenStats.has(name)) {
-          pushData(startDate, new Date(stat.end), dataValues);
-        }
+        pushData(startDate, new Date(stat.end), dataValues);
      });

      // Concat two arrays
      Array.prototype.push.apply(totalDataSets, statDataSets);
-      Array.prototype.push.apply(legendData, statLegendData);
+      Array.prototype.push.apply(totalDatasetExtras, statDatasetExtras);
    });

    if (unit) {
-      this.unit = unit;
+      this._createOptions(unit);
    }

-    legendData.forEach(({ name, color }) => {
-      // Add an empty series for the legend
-      totalDataSets.push({
-        id: name + "-legend",
-        name: name,
-        color,
-        type: this.chartType,
-        data: [],
-        xAxisIndex: 1,
-      });
-    });
-
-    this._chartData = totalDataSets;
-    if (legendData.length !== this._legendData.length) {
-      // only update the legend if it has changed or it will trigger options update
-      this._legendData = legendData.map(({ name }) => name);
-    }
+    this._chartData = {
+      datasets: totalDataSets,
+    };
+    this._chartDatasetExtra = totalDatasetExtras;
    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;
@@ -0,0 +1,22 @@
+import type {
+  BarControllerChartOptions,
+  BarControllerDatasetOptions,
+} from "chart.js";
+
+export interface TimeLineData {
+  start: Date;
+  end: Date;
+  label?: string | null;
+  color?: string;
+}
+
+declare module "chart.js" {
+  interface ChartTypeRegistry {
+    timeline: {
+      chartOptions: BarControllerChartOptions;
+      datasetOptions: BarControllerDatasetOptions;
+      defaultDataPoint: TimeLineData;
+      parsedDataType: any;
+    };
+  }
+}
@@ -0,0 +1,63 @@
+import type { BarOptions, BarProps } from "chart.js";
+import { BarElement } from "chart.js";
+import { hex2rgb } from "../../../common/color/convert-color";
+import { luminosity } from "../../../common/color/rgb";
+
+export interface TextBarProps extends BarProps {
+  text?: string | null;
+  options?: Partial<TextBaroptions>;
+}
+
+export interface TextBaroptions extends BarOptions {
+  textPad?: number;
+  textColor?: string;
+  backgroundColor: string;
+}
+
+export class TextBarElement extends BarElement {
+  static id = "textbar";
+
+  draw(ctx: CanvasRenderingContext2D) {
+    super.draw(ctx);
+    const options = this.options as TextBaroptions;
+    const { x, y, base, width, text } = (
+      this as BarElement<TextBarProps, TextBaroptions>
+    ).getProps(["x", "y", "base", "width", "text"]);
+
+    if (!text) {
+      return;
+    }
+
+    ctx.beginPath();
+    const textRect = ctx.measureText(text);
+    if (
+      textRect.width === 0 ||
+      textRect.width + (options.textPad || 4) + 2 > width
+    ) {
+      return;
+    }
+    const textColor =
+      options.textColor ||
+      (options?.backgroundColor === "transparent"
+        ? "transparent"
+        : luminosity(hex2rgb(options.backgroundColor)) > 0.5
+          ? "#000"
+          : "#fff");
+
+    // ctx.font = "12px arial";
+    ctx.fillStyle = textColor;
+    ctx.lineWidth = 0;
+    ctx.strokeStyle = textColor;
+    ctx.textBaseline = "middle";
+    ctx.fillText(
+      text,
+      x - width / 2 + (options.textPad || 4),
+      y + (base - y) / 2
+    );
+  }
+
+  tooltipPosition(useFinalPosition: boolean) {
+    const { x, y, base } = this.getProps(["x", "y", "base"], useFinalPosition);
+    return { x, y: y + (base - y) / 2 };
+  }
+}
@@ -1,11 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { getGraphColorByIndex } from "../../common/color/colors";
-import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
-import { labBrighten } from "../../common/color/lab";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { computeCssValue } from "../../resources/css-variables";
+import { getGraphColorByIndex } from "../../../common/color/colors";
+import { hex2rgb, lab2hex, rgb2lab } from "../../../common/color/convert-color";
+import { labBrighten } from "../../../common/color/lab";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { stateColorProperties } from "../../../common/entity/state_color";
+import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
+import { computeCssValue } from "../../../resources/css-variables";

 const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
  media_player: {
@@ -0,0 +1,255 @@
+import type { BarElement } from "chart.js";
+import { BarController } from "chart.js";
+import type { TimeLineData } from "./const";
+import type { TextBarProps } from "./textbar-element";
+
+function borderProps(properties) {
+  let reverse;
+  let start;
+  let end;
+  let top;
+  let bottom;
+  if (properties.horizontal) {
+    reverse = properties.base > properties.x;
+    start = "left";
+    end = "right";
+  } else {
+    reverse = properties.base < properties.y;
+    start = "bottom";
+    end = "top";
+  }
+  if (reverse) {
+    top = "end";
+    bottom = "start";
+  } else {
+    top = "start";
+    bottom = "end";
+  }
+  return { start, end, reverse, top, bottom };
+}
+
+function setBorderSkipped(properties, options, stack, index) {
+  let edge = options.borderSkipped;
+  const res = {};
+
+  if (!edge) {
+    properties.borderSkipped = res;
+    return;
+  }
+
+  if (edge === true) {
+    properties.borderSkipped = {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+    };
+    return;
+  }
+
+  const { start, end, reverse, top, bottom } = borderProps(properties);
+
+  if (edge === "middle" && stack) {
+    properties.enableBorderRadius = true;
+    if ((stack._top || 0) === index) {
+      edge = top;
+    } else if ((stack._bottom || 0) === index) {
+      edge = bottom;
+    } else {
+      res[parseEdge(bottom, start, end, reverse)] = true;
+      edge = top;
+    }
+  }
+
+  res[parseEdge(edge, start, end, reverse)] = true;
+  properties.borderSkipped = res;
+}
+
+function parseEdge(edge, a, b, reverse) {
+  if (reverse) {
+    edge = swap(edge, a, b);
+    edge = startEnd(edge, b, a);
+  } else {
+    edge = startEnd(edge, a, b);
+  }
+  return edge;
+}
+
+function swap(orig, v1, v2) {
+  return orig === v1 ? v2 : orig === v2 ? v1 : orig;
+}
+
+function startEnd(v, start, end) {
+  return v === "start" ? start : v === "end" ? end : v;
+}
+
+function setInflateAmount(
+  properties,
+  { inflateAmount }: { inflateAmount?: string | number },
+  ratio
+) {
+  properties.inflateAmount =
+    inflateAmount === "auto" ? (ratio === 1 ? 0.33 : 0) : inflateAmount;
+}
+
+function parseValue(entry, item, vScale, i) {
+  const startValue = vScale.parse(entry.start, i);
+  const endValue = vScale.parse(entry.end, i);
+  const min = Math.min(startValue, endValue);
+  const max = Math.max(startValue, endValue);
+  let barStart = min;
+  let barEnd = max;
+
+  if (Math.abs(min) > Math.abs(max)) {
+    barStart = max;
+    barEnd = min;
+  }
+
+  // Store `barEnd` (furthest away from origin) as parsed value,
+  // to make stacking straight forward
+  item[vScale.axis] = barEnd;
+
+  item._custom = {
+    barStart,
+    barEnd,
+    start: startValue,
+    end: endValue,
+    min,
+    max,
+  };
+
+  return item;
+}
+
+export class TimelineController extends BarController {
+  static id = "timeline";
+
+  static defaults = {
+    dataElementType: "textbar",
+    dataElementOptions: ["text", "textColor", "textPadding"],
+    elements: {
+      showText: true,
+      textPadding: 4,
+      minBarWidth: 1,
+    },
+
+    layout: {
+      padding: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
+    },
+  };
+
+  static overrides = {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+  };
+
+  parseObjectData(meta, data, start, count) {
+    const iScale = meta.iScale;
+    const vScale = meta.vScale;
+    const labels = iScale.getLabels();
+    const singleScale = iScale === vScale;
+    const parsed: any[] = [];
+    let i;
+    let ilen;
+    let item;
+    let entry;
+
+    for (i = start, ilen = start + count; i < ilen; ++i) {
+      entry = data[i];
+      item = {};
+      item[iScale.axis] = singleScale || iScale.parse(labels[i], i);
+      parsed.push(parseValue(entry, item, vScale, i));
+    }
+    return parsed;
+  }
+
+  getLabelAndValue(index) {
+    const meta = this._cachedMeta;
+    const { vScale } = meta;
+    const data = this.getDataset().data[index] as TimeLineData;
+
+    return {
+      label: vScale!.getLabelForValue(this.index) || "",
+      value: data.label || "",
+    };
+  }
+
+  updateElements(
+    bars: BarElement[],
+    start: number,
+    count: number,
+    mode: "reset" | "resize" | "none" | "hide" | "show" | "default" | "active"
+  ) {
+    const vScale = this._cachedMeta.vScale!;
+    const iScale = this._cachedMeta.iScale!;
+    const dataset = this.getDataset();
+
+    const firstOpts = this.resolveDataElementOptions(start, mode);
+    const sharedOptions = this.getSharedOptions(firstOpts);
+    const includeOptions = this.includeOptions(mode, sharedOptions!);
+
+    const horizontal = vScale.isHorizontal();
+
+    this.updateSharedOptions(sharedOptions!, mode, firstOpts);
+
+    for (let index = start; index < start + count; index++) {
+      const data = dataset.data[index] as TimeLineData;
+
+      const y = vScale.getPixelForValue(this.index);
+
+      const xStart = iScale.getPixelForValue(
+        Math.max(iScale.min, data.start.getTime())
+      );
+      const xEnd = iScale.getPixelForValue(data.end.getTime());
+      const width = xEnd - xStart;
+
+      const parsed = this.getParsed(index);
+      const stack = (parsed._stacks || {})[vScale.axis];
+
+      const height = 10;
+
+      const properties: TextBarProps = {
+        horizontal,
+        x: xStart + width / 2, // Center of the bar
+        y: y - height, // Top of bar
+        width,
+        height: 0,
+        base: y + height, // Bottom of bar,
+        // Text
+        text: data.label,
+      };
+
+      if (includeOptions) {
+        properties.options =
+          sharedOptions || this.resolveDataElementOptions(index, mode);
+
+        properties.options = {
+          ...properties.options,
+          backgroundColor: data.color,
+        };
+      }
+      const options = properties.options || bars[index].options;
+
+      setBorderSkipped(properties, options, stack, index);
+      setInflateAmount(properties, options, 1);
+      this.updateElement(bars[index], index, properties as any, mode);
+    }
+  }
+
+  removeHoverStyle(_element, _datasetIndex, _index) {
+    // this._setStyle(element, index, 'active', false);
+  }
+
+  setHoverStyle(_element, _datasetIndex, _index) {
+    // this._setStyle(element, index, 'active', true);
+  }
+}
@@ -33,10 +33,9 @@ export class HaAssistChip extends MdAssistChip {
      }
      /** Set the size of mdc icons **/
      ::slotted([slot="icon"]),
-      ::slotted([slot="trailing-icon"]) {
+      ::slotted([slot="trailingIcon"]) {
        display: flex;
        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
-        font-size: var(--_label-text-size) !important;
      }

      .trailing.icon ::slotted(*),
@@ -448,7 +448,6 @@ export class HaDataTable extends LitElement {
                    )}
                    @click=${this._handleHeaderClick}
                    .columnId=${key}
-                    title=${ifDefined(column.title)}
                  >
                    ${column.sortable
                      ? html`
@@ -178,7 +178,7 @@ class HaEntityStatePicker extends LitElement {
              no-style
              @item-moved=${this._moveItem}
              .disabled=${this.disabled}
-              handle-selector="button.primary.action"
+              filter="button.trailing.action"
            >
              <ha-chip-set>
                ${repeat(
@@ -195,7 +195,12 @@ class HaEntityStatePicker extends LitElement {
                        .label=${label}
                        selected
                      >
-                        <ha-svg-icon slot="icon" .path=${mdiDrag}></ha-svg-icon>
+                        <ha-svg-icon
+                          slot="icon"
+                          .path=${mdiDrag}
+                          data-handle
+                        ></ha-svg-icon>
+
                        ${label}
                      </ha-input-chip>
                    `;
@@ -57,7 +57,7 @@ class HaEntityStatePicker extends LitElement {
      (this._comboBox as any).items = [
        ...(this.extraOptions ?? []),
        ...(this.entityId && stateObj
-          ? getStates(this.hass, stateObj, this.attribute).map((key) => ({
+          ? getStates(stateObj, this.attribute).map((key) => ({
              value: key,
              label: !this.attribute
                ? this.hass.formatEntityState(stateObj, key)
@@ -276,8 +276,6 @@ export class HaAreaPicker extends LitElement {
            icon: null,
            aliases: [],
            labels: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
            created_at: 0,
            modified_at: 0,
          },
@@ -296,8 +294,6 @@ export class HaAreaPicker extends LitElement {
              icon: "mdi:plus",
              aliases: [],
              labels: [],
-              temperature_entity_id: null,
-              humidity_entity_id: null,
              created_at: 0,
              modified_at: 0,
            },
@@ -382,8 +378,6 @@ export class HaAreaPicker extends LitElement {
            picture: null,
            labels: [],
            aliases: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
            created_at: 0,
            modified_at: 0,
          },
@@ -402,8 +396,6 @@ export class HaAreaPicker extends LitElement {
            picture: null,
            labels: [],
            aliases: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
            created_at: 0,
            modified_at: 0,
          },
@@ -295,12 +295,10 @@ export class HaAssistChat extends LitElement {
    this._addMessage(userMessage);
    this.requestUpdate("_audioRecorder");

-    let hassMessage = {
+    const hassMessage: AssistMessage = {
      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(
@@ -330,43 +328,6 @@ 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;
@@ -474,71 +435,28 @@ export class HaAssistChat extends LitElement {
    this._processing = true;
    this._audio?.pause();
    this._addMessage({ who: "user", text });
-    let hassMessage = {
+    const message: AssistMessage = {
      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(hassMessage);
+    this._addMessage(message);
    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) {
-              hassMessage.text = plain.speech;
+              message.text = plain.speech;
            }
            this.requestUpdate("_conversation");
            unsub();
          }
          if (event.type === "error") {
-            hassMessage.text = event.data.message;
-            hassMessage.error = true;
+            message.text = event.data.message;
+            message.error = true;
            this.requestUpdate("_conversation");
            unsub();
          }
@@ -552,8 +470,8 @@ export class HaAssistChat extends LitElement {
        }
      );
    } catch {
-      hassMessage.text = this.hass.localize("ui.dialogs.voice_command.error");
-      hassMessage.error = true;
+      message.text = this.hass.localize("ui.dialogs.voice_command.error");
+      message.error = true;
      this.requestUpdate("_conversation");
    } finally {
      this._processing = false;
@@ -614,7 +532,7 @@ export class HaAssistChat extends LitElement {
      float: var(--float-end);
      text-align: right;
      border-bottom-right-radius: 0px;
-      background-color: var(--chat-background-color-user, var(--primary-color));
+      background-color: var(--primary-color);
      color: var(--text-primary-color);
      direction: var(--direction);
    }
@@ -625,10 +543,7 @@ export class HaAssistChat extends LitElement {
      margin-inline-start: initial;
      float: var(--float-start);
      border-bottom-left-radius: 0px;
-      background-color: var(
-        --chat-background-color-hass,
-        var(--secondary-background-color)
-      );
+      background-color: var(--secondary-background-color);

      color: var(--primary-text-color);
      direction: var(--direction);
@@ -329,12 +329,14 @@ export class HaBaseTimeInput extends LitElement {
    :host([clearable]) {
      position: relative;
    }
+    :host {
+      display: block;
+    }
    .time-input-wrap-wrap {
      display: flex;
    }
    .time-input-wrap {
      display: flex;
-      flex: var(--time-input-flex, unset);
      border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
      overflow: hidden;
      position: relative;
@@ -343,7 +345,6 @@ export class HaBaseTimeInput extends LitElement {
    }
    ha-textfield {
      width: 55px;
-      flex-grow: 1;
      text-align: center;
      --mdc-shape-small: 0;
      --text-field-appearance: none;
@@ -23,9 +23,6 @@ export class HaButton extends Button {
      .slot-container {
        overflow: var(--button-slot-container-overflow, visible);
      }
-      :host([destructive]) {
-        --mdc-theme-primary: var(--error-color);
-      }
    `,
  ];
 }
@@ -1,110 +0,0 @@
-import { customElement, property, state } from "lit/decorators";
-import { css, html, LitElement, nothing } from "lit";
-import { mdiContentCopy, mdiEye, mdiEyeOff } from "@mdi/js";
-
-import "./ha-button";
-import "./ha-icon-button";
-import "./ha-svg-icon";
-import "./ha-textfield";
-import type { HomeAssistant } from "../types";
-import { copyToClipboard } from "../common/util/copy-clipboard";
-import { showToast } from "../util/toast";
-import type { HaTextField } from "./ha-textfield";
-
-@customElement("ha-copy-textfield")
-export class HaCopyTextfield extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: "value" }) public value!: string;
-
-  @property({ attribute: "masked-value" }) public maskedValue?: string;
-
-  @property({ attribute: "label" }) public label?: string;
-
-  @state() private _showMasked = true;
-
-  public render() {
-    return html`
-      <div class="container">
-        <div class="textfield-container">
-          <ha-textfield
-            .value=${this._showMasked && this.maskedValue
-              ? this.maskedValue
-              : this.value}
-            readonly
-            .suffix=${this.maskedValue
-              ? html`<div style="width: 24px"></div>`
-              : nothing}
-            @click=${this._focusInput}
-          ></ha-textfield>
-          ${this.maskedValue
-            ? html`<ha-icon-button
-                class="toggle-unmasked"
-                .label=${this.hass.localize(
-                  `ui.common.${this._showMasked ? "show" : "hide"}`
-                )}
-                @click=${this._toggleMasked}
-                .path=${this._showMasked ? mdiEye : mdiEyeOff}
-              ></ha-icon-button>`
-            : nothing}
-        </div>
-        <ha-button @click=${this._copy} unelevated>
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
-          ${this.label || this.hass.localize("ui.common.copy")}
-        </ha-button>
-      </div>
-    `;
-  }
-
-  private _focusInput(ev) {
-    const inputElement = ev.currentTarget as HaTextField;
-    inputElement.select();
-  }
-
-  private _toggleMasked(): void {
-    this._showMasked = !this._showMasked;
-  }
-
-  private async _copy(): Promise<void> {
-    await copyToClipboard(this.value);
-    showToast(this, {
-      message: this.hass.localize("ui.common.copied_clipboard"),
-    });
-  }
-
-  static styles = css`
-    .container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-top: 8px;
-    }
-
-    .textfield-container {
-      position: relative;
-      flex: 1;
-    }
-
-    .textfield-container ha-textfield {
-      display: block;
-    }
-
-    .toggle-unmasked {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      inset-inline-start: initial;
-      inset-inline-end: 8px;
-      --mdc-icon-button-size: 40px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-      direction: var(--direction);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-copy-textfield": HaCopyTextfield;
-  }
-}
@@ -5,7 +5,6 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
 import {
  addDays,
-  subHours,
  endOfDay,
  endOfMonth,
  endOfWeek,
@@ -16,7 +15,6 @@ import {
  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";
@@ -24,18 +22,16 @@ import { ifDefined } from "lit/directives/if-defined";
 import { calcDate, shiftDateRange } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import {
-  formatShortDateTime,
  formatShortDateTimeWithYear,
+  formatShortDateTime,
 } 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]>;

@@ -55,7 +51,7 @@ export class HaDateRangePicker extends LitElement {
  public autoApply = false;

  @property({ attribute: "time-picker", type: Boolean })
-  public timePicker = false;
+  public timePicker = true;

  @property({ type: Boolean }) public disabled = false;

@@ -179,96 +175,6 @@ export class HaDateRangePicker extends LitElement {
                  weekStartsOn,
                }),
              ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.now-1h"
-              )]: [
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  1
-                ),
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  0
-                ),
-              ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.now-12h"
-              )]: [
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  12
-                ),
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  0
-                ),
-              ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.now-24h"
-              )]: [
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  24
-                ),
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  0
-                ),
-              ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.now-7d"
-              )]: [
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  24 * 7
-                ),
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  0
-                ),
-              ],
-              [this.hass.localize(
-                "ui.components.date-range-picker.ranges.now-30d"
-              )]: [
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  24 * 30
-                ),
-                calcDate(
-                  today,
-                  subHours,
-                  this.hass.locale,
-                  this.hass.config,
-                  0
-                ),
-              ],
            }
          : {}),
      };
@@ -291,15 +197,14 @@ export class HaDateRangePicker extends LitElement {
        ?auto-apply=${this.autoApply}
        time-picker=${this.timePicker}
        twentyfour-hours=${this._hour24format}
-        start-date=${this._formatDate(this.startDate)}
-        end-date=${this._formatDate(this.endDate)}
+        start-date=${this.startDate.toISOString()}
+        end-date=${this.endDate.toISOString()}
        ?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
@@ -420,31 +325,9 @@ 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"
@@ -475,66 +358,45 @@ 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 {
-      direction: var(--direction);
-    }

-    .date-range-inputs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+      ha-icon-button {
+        direction: var(--direction);
+      }

-    .date-range-ranges {
-      border-right: 1px solid var(--divider-color);
-    }
+      .date-range-inputs {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }

-    .date-range-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 8px;
-      border-top: 1px solid var(--divider-color);
-    }
+      .date-range-ranges {
+        border-right: 1px solid var(--divider-color);
+      }
+
+      .date-range-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 8px;
+        border-top: 1px solid var(--divider-color);
+      }

-    ha-textarea {
-      display: inline-block;
-      width: 340px;
-    }
-    @media only screen and (max-width: 460px) {
      ha-textarea {
-        width: 100%;
+        display: inline-block;
+        width: 340px;
      }
-    }
-    @media only screen and (max-width: 800px) {
-      .date-range-ranges {
-        border-right: none;
-        border-bottom: 1px solid var(--divider-color);
-      }
-    }
-
-    @media only screen and (max-height: 940px) and (max-width: 800px) {
-      .date-range-ranges {
-        overflow: auto;
-        max-height: calc(70vh - 330px);
-        min-height: 160px;
+      @media only screen and (max-width: 460px) {
+      ha-textarea {
+        width: 100%
      }

-      :host([header-position]) .date-range-ranges {
-        max-height: calc(90vh - 430px);
+      @media only screen and (max-width: 800px) {
+        .date-range-ranges {
+          border-right: none;
+          border-bottom: 1px solid var(--divider-color);
+        }
      }
-    }
-  `;
+    `;
 }

 declare global {
@@ -11,7 +11,6 @@ import "./ha-icon-button";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { ensureArray } from "../common/array/ensure-array";
 import { bytesToString } from "../util/bytes-to-string";
-import type { LocalizeFunc } from "../common/translations/localize";

 declare global {
  interface HASSDomEvents {
@@ -24,8 +23,6 @@ declare global {
 export class HaFileUpload extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
  @property() public accept!: string;

  @property() public icon?: string;
@@ -34,10 +31,6 @@ export class HaFileUpload extends LitElement {

  @property() public secondary?: string;

-  @property({ attribute: "uploading-label" }) public uploadingLabel?: string;
-
-  @property({ attribute: "delete-label" }) public deleteLabel?: string;
-
  @property() public supports?: string;

  @property({ type: Object }) public value?: File | File[] | FileList | string;
@@ -80,22 +73,23 @@ export class HaFileUpload extends LitElement {
  }

  public render(): TemplateResult {
-    const localize = this.localize || this.hass!.localize;
    return html`
      ${this.uploading
        ? html`<div class="container">
            <div class="uploading">
              <span class="header"
-                >${this.uploadingLabel || this.value
-                  ? localize("ui.components.file-upload.uploading_name", {
-                      name: this._name,
-                    })
-                  : localize("ui.components.file-upload.uploading")}</span
+                >${this.value
+                  ? this.hass?.localize(
+                      "ui.components.file-upload.uploading_name",
+                      { name: this._name }
+                    )
+                  : this.hass?.localize(
+                      "ui.components.file-upload.uploading"
+                    )}</span
              >
              ${this.progress
                ? html`<div class="progress">
-                    ${this.progress}${this.hass &&
-                    blankBeforePercent(this.hass!.locale)}%
+                    ${this.progress}${blankBeforePercent(this.hass!.locale)}%
                  </div>`
                : nothing}
            </div>
@@ -122,11 +116,14 @@ export class HaFileUpload extends LitElement {
                    .path=${this.icon || mdiFileUpload}
                  ></ha-svg-icon>
                  <ha-button unelevated @click=${this._openFilePicker}>
-                    ${this.label || localize("ui.components.file-upload.label")}
+                    ${this.label ||
+                    this.hass?.localize("ui.components.file-upload.label")}
                  </ha-button>
                  <span class="secondary"
                    >${this.secondary ||
-                    localize("ui.components.file-upload.secondary")}</span
+                    this.hass?.localize(
+                      "ui.components.file-upload.secondary"
+                    )}</span
                  >
                  <span class="supports">${this.supports}</span>`
              : typeof this.value === "string"
@@ -139,7 +136,8 @@ export class HaFileUpload extends LitElement {
                    </div>
                    <ha-icon-button
                      @click=${this._clearValue}
-                      .label=${this.deleteLabel || localize("ui.common.delete")}
+                      .label=${this.hass?.localize("ui.common.delete") ||
+                      "Delete"}
                      .path=${mdiDelete}
                    ></ha-icon-button>
                  </div>`
@@ -157,8 +155,8 @@ export class HaFileUpload extends LitElement {
                        </div>
                        <ha-icon-button
                          @click=${this._clearValue}
-                          .label=${this.deleteLabel ||
-                          localize("ui.common.delete")}
+                          .label=${this.hass?.localize("ui.common.delete") ||
+                          "Delete"}
                          .path=${mdiDelete}
                        ></ha-icon-button>
                      </div>`
@@ -240,10 +238,6 @@ export class HaFileUpload extends LitElement {
      border-radius: var(--mdc-shape-small, 4px);
      height: 100%;
    }
-    .row {
-      display: flex;
-      align-items: center;
-    }
    label.container {
      border: dashed 1px
        var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
@@ -79,7 +79,6 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
        .disabled=${this.disabled}
        @opening=${this._handleOpen}
        @closing=${this._handleClose}
-        positioning="fixed"
      >
        <ha-textfield
          slot="trigger"
@@ -80,6 +80,7 @@ export class HaFormString extends LitElement implements HaFormElement {
    if (!this.isPassword) return nothing;
    return html`
      <ha-icon-button
+        toggles
        .label=${this.localize?.(
          `${this.localizeBaseKey}.${
            this.unmaskedPassword ? "hide_password" : "show_password"
@@ -1,12 +1,7 @@
-import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import hash from "object-hash";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
-import { CacheManager } from "../util/cache-manager";
-
-const markdownCache = new CacheManager<string>(1000);

 const _gitHubMarkdownAlerts = {
  reType:
@@ -31,16 +26,6 @@ class HaMarkdownElement extends ReactiveElement {
  @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
    false;

-  @property({ type: Boolean }) public cache = false;
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.cache) {
-      const key = this._computeCacheKey();
-      markdownCache.set(key, this.innerHTML);
-    }
-  }
-
  protected createRenderRoot() {
    return this;
  }
@@ -52,24 +37,6 @@ class HaMarkdownElement extends ReactiveElement {
    }
  }

-  protected willUpdate(_changedProperties: PropertyValues): void {
-    if (!this.innerHTML && this.cache) {
-      const key = this._computeCacheKey();
-      if (markdownCache.has(key)) {
-        this.innerHTML = markdownCache.get(key)!;
-        this._resize();
-      }
-    }
-  }
-
-  private _computeCacheKey() {
-    return hash({
-      content: this.content,
-      allowSvg: this.allowSvg,
-      breaks: this.breaks,
-    });
-  }
-
  private async _render() {
    this.innerHTML = await renderMarkdown(
      String(this.content),
@@ -13,8 +13,6 @@ export class HaMarkdown extends LitElement {
  @property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
    false;

-  @property({ type: Boolean }) public cache = false;
-
  protected render() {
    if (!this.content) {
      return nothing;
@@ -25,7 +23,6 @@ export class HaMarkdown extends LitElement {
      .allowSvg=${this.allowSvg}
      .breaks=${this.breaks}
      .lazyImages=${this.lazyImages}
-      .cache=${this.cache}
    ></ha-markdown-element>`;
  }

@@ -17,7 +17,6 @@ export class HaMdListItem extends MdListItem {
      }
      md-item {
        overflow: var(--md-item-overflow, hidden);
-        align-items: var(--md-item-align-items, center);
      }
    `,
  ];
@@ -1,6 +1,6 @@
 import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyle } from "../resources/styles";
@@ -8,7 +8,6 @@ import type { HomeAssistant } from "../types";
 import "./ha-button";
 import "./ha-icon-button";
 import "./ha-textfield";
-import "./ha-input-helper-text";
 import type { HaTextField } from "./ha-textfield";

@customElement("ha-multi-textfield")
@@ -21,8 +20,6 @@ class HaMultiTextField extends LitElement {

  @property() public label?: string;

-  @property({ attribute: false }) public helper?: string;
-
  @property({ attribute: false }) public inputType?: string;

  @property({ attribute: false }) public inputSuffix?: string;
@@ -72,21 +69,12 @@ class HaMultiTextField extends LitElement {
          </div>
        `;
      })}
-      <div class="layout horizontal">
+      <div class="layout horizontal center-center">
        <ha-button @click=${this._addItem} .disabled=${this.disabled}>
-          ${this.addLabel ??
-          (this.label
-            ? this.hass?.localize("ui.components.multi-textfield.add_item", {
-                item: this.label,
-              })
-            : this.hass?.localize("ui.common.add")) ??
-          "Add"}
+          ${this.addLabel ?? this.hass?.localize("ui.common.add") ?? "Add"}
          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
        </ha-button>
      </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : nothing}
    `;
  }

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

@@ -132,6 +132,7 @@ export class HaPasswordField extends LitElement {
        @change=${this._handleChangeEvent}
      ></ha-textfield>
      <ha-icon-button
+        toggles
        .label=${this.hass?.localize(
          this._unmaskedPassword
            ? "ui.components.selectors.text.hide_password"
@@ -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 { prepareZXingModule } from "barcode-detector";
+import { setZXingModuleOverrides } from "barcode-detector";
 import type QrScanner from "qr-scanner";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -21,14 +21,12 @@ import "./ha-list-item";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";

-prepareZXingModule({
-  overrides: {
-    locateFile: (path: string, prefix: string) => {
-      if (path.endsWith(".wasm")) {
-        return "/static/js/zxing_reader.wasm";
-      }
-      return prefix + path;
-    },
+setZXingModuleOverrides({
+  locateFile: (path: string, prefix: string) => {
+    if (path.endsWith(".wasm")) {
+      return "/static/js/zxing_reader.wasm";
+    }
+    return prefix + path;
  },
 });

@@ -156,7 +156,6 @@ export class HaSelectSelector extends LitElement {
                no-style
                .disabled=${!this.selector.select.reorder}
                @item-moved=${this._itemMoved}
-                handle-selector="button.primary.action"
              >
                <ha-chip-set>
                  ${repeat(
@@ -178,6 +177,7 @@ export class HaSelectSelector extends LitElement {
                                <ha-svg-icon
                                  slot="icon"
                                  .path=${mdiDrag}
+                                  data-handle
                                ></ha-svg-icon>
                              `
                            : nothing}
@@ -50,7 +50,6 @@ export class HaTextSelector extends LitElement {
          .inputType=${this.selector.text?.type}
          .inputSuffix=${this.selector.text?.suffix}
          .inputPrefix=${this.selector.text?.prefix}
-          .helper=${this.helper}
          .autocomplete=${this.selector.text?.autocomplete}
          @value-changed=${this._handleChange}
        >
@@ -95,6 +94,7 @@ export class HaTextSelector extends LitElement {
      ></ha-textfield>
      ${this.selector.text?.type === "password"
        ? html`<ha-icon-button
+            toggles
            .label=${this.hass?.localize(
              this._unmaskedPassword
                ? "ui.components.selectors.text.hide_password"
@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@shoelace-style/shoelace/dist/components/skeleton/skeleton";
 import {
  mdiBell,
  mdiCalendar,
@@ -50,10 +49,6 @@ import "./ha-sortable";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 import { preventDefault } from "../common/dom/prevent_default";
-import {
-  saveSidebarPreferences,
-  subscribeSidebarPreferences,
-} from "../data/sidebar";

 const SHOW_AFTER_SPACER = ["config", "developer-tools"];

@@ -212,40 +207,30 @@ class HaSidebar extends SubscribeMixin(LitElement) {

  private _unsubPersistentNotifications: UnsubscribeFunc | undefined;

-  @storage({ key: "sidebarPanelOrder", state: true, subscribe: true })
-  private _devicePanelOrder?: string[];
+  @storage({
+    key: "sidebarPanelOrder",
+    state: true,
+    subscribe: true,
+  })
+  private _panelOrder: string[] = [];

-  @storage({ key: "sidebarHiddenPanels", state: true, subscribe: true })
-  private _deviceHiddenPanels?: string[];
-
-  @state()
-  private _userPanelOrder: string[] = [];
-
-  @state()
-  private _userHiddenPanels: string[] = [];
-
-  @state()
-  private _loadingUserPreferences = true;
+  @storage({
+    key: "sidebarHiddenPanels",
+    state: true,
+    subscribe: true,
+  })
+  private _hiddenPanels: string[] = [];

  public hassSubscribe(): UnsubscribeFunc[] {
-    const subscribeFunctions = [
-      subscribeSidebarPreferences(this.hass, (sidebar) => {
-        this._userPanelOrder = sidebar?.panelOrder || [];
-        this._userHiddenPanels = sidebar?.hiddenPanels || [];
-        this._loadingUserPreferences = false;
-      }),
-    ];
-    if (this.hass.user?.is_admin) {
-      subscribeFunctions.push(
-        subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
-          this._issuesCount = repairs.issues.filter(
-            (issue) => !issue.ignored
-          ).length;
-        })
-      );
-    }
-
-    return subscribeFunctions;
+    return this.hass.user?.is_admin
+      ? [
+          subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+            this._issuesCount = repairs.issues.filter(
+              (issue) => !issue.ignored
+            ).length;
+          }),
+        ]
+      : [];
  }

  protected render() {
@@ -275,10 +260,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
      changedProps.has("_updatesCount") ||
      changedProps.has("_issuesCount") ||
      changedProps.has("_notifications") ||
-      changedProps.has("_devicePanelOrder") ||
-      changedProps.has("_deviceHiddenPanels") ||
-      changedProps.has("_userPanelOrder") ||
-      changedProps.has("_userHiddenPanels")
+      changedProps.has("_hiddenPanels") ||
+      changedProps.has("_panelOrder")
    ) {
      return true;
    }
@@ -398,51 +381,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
    </div>`;
  }

-  private _getPanelPreferencesMemoized = memoizeOne(
-    (
-      userPanelOrder: string[],
-      userHiddenPanels: string[],
-      userPreferencesLoading: boolean,
-      devicePanelOrder?: string[],
-      deviceHiddenPanels?: string[]
-    ): { panelOrder: string[]; hiddenPanels: string[]; loading: boolean } => {
-      let panelOrder = userPanelOrder ?? [];
-      let hiddenPanels = userHiddenPanels ?? [];
-
-      let loading = userPreferencesLoading;
-
-      if (devicePanelOrder || deviceHiddenPanels) {
-        panelOrder = devicePanelOrder ?? [];
-        hiddenPanels = deviceHiddenPanels ?? [];
-        loading = false;
-      }
-
-      return {
-        panelOrder,
-        hiddenPanels,
-        loading,
-      };
-    }
-  );
-
-  private _getPanelPreferences() {
-    return this._getPanelPreferencesMemoized(
-      this._userPanelOrder,
-      this._userHiddenPanels,
-      this._loadingUserPreferences,
-      this._devicePanelOrder,
-      this._deviceHiddenPanels
-    );
-  }
-
  private _renderAllPanels() {
-    const { panelOrder, hiddenPanels, loading } = this._getPanelPreferences();
-
    const [beforeSpacer, afterSpacer] = computePanels(
      this.hass.panels,
      this.hass.defaultPanel,
-      panelOrder,
-      hiddenPanels,
+      this._panelOrder,
+      this._hiddenPanels,
      this.hass.locale
    );

@@ -463,21 +407,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        @keydown=${this._listboxKeydown}
        @iron-activate=${preventDefault}
      >
-      ${loading ? html`
-        <div class="loading">
-          <sl-skeleton effect="sheen"></sl-skeleton>
-          <sl-skeleton effect="sheen"></sl-skeleton>
-          <sl-skeleton effect="sheen"></sl-skeleton>
-          <sl-skeleton effect="sheen"></sl-skeleton>
-        </div>
-      ` : html`
-          ${this.editMode
-            ? this._renderPanelsEdit(beforeSpacer)
-            : this._renderPanels(beforeSpacer)}
-          ${this._renderSpacer()}
-          ${this._renderPanels(afterSpacer)}
-          ${this._renderExternalConfiguration()}
-      `}
+        ${this.editMode
+          ? this._renderPanelsEdit(beforeSpacer)
+          : this._renderPanels(beforeSpacer)}
+        ${this._renderSpacer()}
+        ${this._renderPanels(afterSpacer)}
+        ${this._renderExternalConfiguration()}
      </paper-listbox>
    `;
  }
@@ -539,49 +474,23 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        `;
  }

-  private async _setPanelOrder(panelOrder: string[]) {
-    if (this._devicePanelOrder || this._deviceHiddenPanels) {
-      this._devicePanelOrder = [...panelOrder];
-    } else {
-      this._userPanelOrder = [...panelOrder];
-      await saveSidebarPreferences(this.hass, {
-        panelOrder: panelOrder,
-        hiddenPanels: this._userHiddenPanels,
-      });
-    }
-  }
-
-  private async _setHiddenPanels(hiddenPanels: string[]) {
-    if (this._devicePanelOrder || this._deviceHiddenPanels) {
-      this._deviceHiddenPanels = hiddenPanels;
-    } else {
-      this._userHiddenPanels = hiddenPanels;
-      await saveSidebarPreferences(this.hass, {
-        panelOrder: this._userPanelOrder,
-        hiddenPanels: hiddenPanels,
-      });
-    }
-  }
-
  private _panelMoved(ev: CustomEvent) {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;

-    const { panelOrder, hiddenPanels } = this._getPanelPreferences();
-
    const [beforeSpacer] = computePanels(
      this.hass.panels,
      this.hass.defaultPanel,
-      panelOrder,
-      hiddenPanels!,
+      this._panelOrder,
+      this._hiddenPanels,
      this.hass.locale
    );

-    const panelOrderNew = beforeSpacer.map((panel) => panel.url_path);
-    const panel = panelOrderNew.splice(oldIndex, 1)[0];
-    panelOrderNew.splice(newIndex, 0, panel);
+    const panelOrder = beforeSpacer.map((panel) => panel.url_path);
+    const panel = panelOrder.splice(oldIndex, 1)[0];
+    panelOrder.splice(newIndex, 0, panel);

-    this._setPanelOrder(panelOrderNew);
+    this._panelOrder = panelOrder;
  }

  private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
@@ -598,10 +507,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
  }

  private _renderHiddenPanels() {
-    const { hiddenPanels } = this._getPanelPreferences();
-
-    return html`${hiddenPanels.length
-      ? html`${hiddenPanels.map((url) => {
+    return html`${this._hiddenPanels.length
+      ? html`${this._hiddenPanels.map((url) => {
          const panel = this.hass.panels[url];
          if (!panel) {
            return "";
@@ -783,7 +690,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {

  private _handleExternalAppConfiguration(ev: Event) {
    ev.preventDefault();
-    this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
+    this.hass.auth.external!.fireMessage({
+      type: "config_screen/show",
+    });
  }

  private get _tooltip() {
@@ -821,25 +730,21 @@ class HaSidebar extends SubscribeMixin(LitElement) {
  private async _hidePanel(ev: Event) {
    ev.preventDefault();
    const panel = (ev.currentTarget as any).panel;
-    if ((this._deviceHiddenPanels || this._userHiddenPanels).includes(panel)) {
+    if (this._hiddenPanels.includes(panel)) {
      return;
    }
-
-    const { panelOrder, hiddenPanels } = this._getPanelPreferences();
-
    // Make a copy for Memoize
-    this._setHiddenPanels([...hiddenPanels, panel]);
+    this._hiddenPanels = [...this._hiddenPanels, panel];
    // Remove it from the panel order
-    this._setPanelOrder(panelOrder.filter((order) => order !== panel));
+    this._panelOrder = this._panelOrder.filter((order) => order !== panel);
  }

  private async _unhidePanel(ev: Event) {
    ev.preventDefault();
    const panel = (ev.currentTarget as any).panel;
-
-    const { hiddenPanels } = this._getPanelPreferences();
-
-    this._setHiddenPanels(hiddenPanels.filter((hidden) => hidden !== panel));
+    this._hiddenPanels = this._hiddenPanels.filter(
+      (hidden) => hidden !== panel
+    );
  }

  private _itemMouseEnter(ev: MouseEvent) {
@@ -879,7 +784,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
    this._hideTooltip();
  }

-  @eventOptions({ passive: true })
+  @eventOptions({
+    passive: true,
+  })
  private _listboxScroll() {
    // On keypresses on the listbox, we're going to ignore scroll events
    // for 100ms so that if pressing down arrow scrolls the sidebar, the tooltip
@@ -1210,60 +1117,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          -webkit-transform: scaleX(var(--scale-direction));
          transform: scaleX(var(--scale-direction));
        }
-
-        @keyframes skeletonAnimate {
-          0% {
-            opacity: 0;
-          }
-          50% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 1;
-          }
-        }
-
-        @keyframes contentAnimate {
-          0% {
-            opacity: 0;
-          }
-          100% {
-            opacity: 1;
-          }
-        }
-
-        .loading {
-          opacity: 0;
-          animation-name: skeletonAnimate;
-          animation-duration: 2000ms;
-          animation-delay: 0;
-          animation-iteration-count: 1;
-          animation-fill-mode: forwards;
-          animation-timing-function: ease-out;
-          padding: 16px;
-          display: flex;
-          flex-direction: column;
-          gap: 16px;
-        }
-
-        sl-skeleton {
-          --border-radius: 8px;
-          height: 24px;
-          --color: var(--outline-color);
-          --sheen-color: var(--outline-hover-color);
-        }
-
-        sl-skeleton:nth-child(2) {
-          width: 70%;
-        }
-
-        sl-skeleton:nth-child(3) {
-          width: 30%;
-        }
-
-        sl-skeleton:nth-child(4) {
-          width: 90%;
-        }
      `,
    ];
  }
@@ -8,10 +8,9 @@ import type {
  Map,
  Marker,
  Polyline,
-  MarkerClusterGroup,
 } from "leaflet";
 import type { PropertyValues } from "lit";
-import { css, ReactiveElement } from "lit";
+import { ReactiveElement, css } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { formatDateTime } from "../../common/datetime/format_date_time";
@@ -27,7 +26,6 @@ import type { HomeAssistant, ThemeMode } from "../../types";
 import { isTouch } from "../../util/is_touch";
 import "../ha-icon-button";
 import "./ha-entity-marker";
-import { DecoratedMarker } from "../../common/map/decorated_marker";

 declare global {
  // for fire event
@@ -86,9 +84,6 @@ export class HaMap extends ReactiveElement {

  @property({ type: Number }) public zoom = 14;

-  @property({ attribute: "cluster-markers", type: Boolean })
-  public clusterMarkers = true;
-
  @state() private _loaded = false;

  public leafletMap?: Map;
@@ -101,12 +96,10 @@ export class HaMap extends ReactiveElement {

  private _mapFocusItems: (Marker | Circle)[] = [];

-  private _mapZones: DecoratedMarker[] = [];
+  private _mapZones: (Marker | Circle)[] = [];

  private _mapFocusZones: (Marker | Circle)[] = [];

-  private _mapCluster: MarkerClusterGroup | undefined;
-
  private _mapPaths: (Polyline | CircleMarker)[] = [];

  private _clickCount = 0;
@@ -158,10 +151,6 @@ export class HaMap extends ReactiveElement {
      }
    }

-    if (changedProps.has("clusterMarkers")) {
-      this._drawEntities();
-    }
-
    if (changedProps.has("_loaded") || changedProps.has("paths")) {
      this._drawPaths();
    }
@@ -186,7 +175,6 @@ export class HaMap extends ReactiveElement {
    ) {
      return;
    }
-
    this._updateMapStyle();
  }

@@ -438,11 +426,6 @@ export class HaMap extends ReactiveElement {
      this._mapFocusZones = [];
    }

-    if (this._mapCluster) {
-      this._mapCluster.remove();
-      this._mapCluster = undefined;
-    }
-
    if (!this.entities) {
      return;
    }
@@ -498,24 +481,26 @@ export class HaMap extends ReactiveElement {
          iconHTML = el.outerHTML;
        }

+        // create marker with the icon
+        this._mapZones.push(
+          Leaflet.marker([latitude, longitude], {
+            icon: Leaflet.divIcon({
+              html: iconHTML,
+              iconSize: [24, 24],
+              className,
+            }),
+            interactive: this.interactiveZones,
+            title,
+          })
+        );
+
        // create circle around it
        const circle = Leaflet.circle([latitude, longitude], {
          interactive: false,
          color: passive ? passiveZoneColor : zoneColor,
          radius,
        });
-
-        const marker = new DecoratedMarker([latitude, longitude], circle, {
-          icon: Leaflet.divIcon({
-            html: iconHTML,
-            iconSize: [24, 24],
-            className,
-          }),
-          interactive: this.interactiveZones,
-          title,
-        });
-
-        this._mapZones.push(marker);
+        this._mapZones.push(circle);
        if (
          this.fitZones &&
          (typeof entity === "string" || entity.focus !== false)
@@ -553,7 +538,7 @@ export class HaMap extends ReactiveElement {
      }

      // create marker with the icon
-      const marker = new DecoratedMarker([latitude, longitude], undefined, {
+      const marker = Leaflet.marker([latitude, longitude], {
        icon: Leaflet.divIcon({
          html: entityMarker,
          iconSize: [48, 48],
@@ -561,34 +546,24 @@ export class HaMap extends ReactiveElement {
        }),
        title: title,
      });
+      this._mapItems.push(marker);
      if (typeof entity === "string" || entity.focus !== false) {
        this._mapFocusItems.push(marker);
      }

      // create circle around if entity has accuracy
      if (gpsAccuracy) {
-        marker.decorationLayer = Leaflet.circle([latitude, longitude], {
-          interactive: false,
-          color: darkPrimaryColor,
-          radius: gpsAccuracy,
-        });
+        this._mapItems.push(
+          Leaflet.circle([latitude, longitude], {
+            interactive: false,
+            color: darkPrimaryColor,
+            radius: gpsAccuracy,
+          })
+        );
      }
-
-      this._mapItems.push(marker);
-    }
-
-    if (this.clusterMarkers) {
-      this._mapCluster = Leaflet.markerClusterGroup({
-        showCoverageOnHover: false,
-        removeOutsideVisibleBounds: false,
-        maxClusterRadius: 40,
-      });
-      this._mapCluster.addLayers(this._mapItems);
-      map.addLayer(this._mapCluster);
-    } else {
-      this._mapItems.forEach((marker) => map.addLayer(marker));
    }

+    this._mapItems.forEach((marker) => map.addLayer(marker));
    this._mapZones.forEach((marker) => map.addLayer(marker));
  }

@@ -1115,8 +1115,6 @@ export class HaMediaPlayerBrowse extends LitElement {
        .child .play:not(.can_expand) {
          --mdc-icon-button-size: 70px;
          --mdc-icon-size: 48px;
-          background-color: var(--primary-color);
-          color: var(--text-primary-color);
        }

        ha-card:hover .image {
@@ -1128,6 +1126,10 @@ export class HaMediaPlayerBrowse extends LitElement {
          opacity: 1;
        }

+        ha-card:hover .play:not(.can_expand) {
+          color: var(--primary-text-color);
+        }
+
        ha-card:hover .play.can_expand {
          bottom: 8px;
        }
@@ -1142,6 +1144,10 @@ export class HaMediaPlayerBrowse extends LitElement {
            opacity 0.1s ease-out;
        }

+        .child .play:hover {
+          color: var(--primary-color);
+        }
+
        .child .title {
          font-size: 16px;
          padding-top: 16px;
@@ -1325,6 +1331,11 @@ export class HaMediaPlayerBrowse extends LitElement {
        ha-browse-media-tts {
          direction: var(--direction);
        }
+
+        ha-card:hover .play:not(.can_expand) {
+          background-color: var(--primary-color);
+          color: var(--text-primary-color);
+        }
      `,
    ];
  }
@@ -1,81 +1,25 @@
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
 import "../ha-icon";
 import "../ha-svg-icon";
-import { classMap } from "lit/directives/class-map";
-
-export type TileIconImageStyle = "square" | "rounded-square" | "circle";
-
-export const DEFAULT_TILE_ICON_BORDER_STYLE = "circle";

@customElement("ha-tile-icon")
 export class HaTileIcon extends LitElement {
-  @property({ type: Boolean, reflect: true })
-  public interactive = false;
-
-  @property({ attribute: "border-style", type: String })
-  public imageStyle?: TileIconImageStyle;
-
-  @property({ attribute: false })
-  public imageUrl?: string;
-
  protected render(): TemplateResult {
-    if (this.imageUrl) {
-      const imageStyle = this.imageStyle || DEFAULT_TILE_ICON_BORDER_STYLE;
-      return html`
-        <div class="container ${classMap({ [imageStyle]: this.imageUrl })}">
-          <img alt="" src=${this.imageUrl} />
-        </div>
-        <slot></slot>
-      `;
-    }
-
    return html`
-      <div class="container ${this.interactive ? "background" : ""}">
-        <slot name="icon"></slot>
+      <div class="shape">
+        <slot></slot>
      </div>
-      <slot></slot>
    `;
  }

  static styles = css`
    :host {
      --tile-icon-color: var(--disabled-color);
-      --tile-icon-opacity: 0.2;
-      --tile-icon-hover-opacity: 0.35;
-      --mdc-icon-size: 24px;
-      position: relative;
-      user-select: none;
-      transition: transform 180ms ease-in-out;
+      --mdc-icon-size: 22px;
    }
-    :host([interactive]:active) {
-      transform: scale(1.2);
-    }
-    :host([interactive]:hover) {
-      --tile-icon-opacity: var(--tile-icon-hover-opacity);
-    }
-    .container {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 36px;
-      border-radius: 18px;
-      overflow: hidden;
-      transition: box-shadow 180ms ease-in-out;
-    }
-    :host([interactive]:focus-visible) .container {
-      box-shadow: 0 0 0 2px var(--tile-icon-color);
-    }
-    .container.rounded-square {
-      border-radius: 8px;
-    }
-    .container.square {
-      border-radius: 0;
-    }
-    .container.background::before {
+    .shape::before {
      content: "";
      position: absolute;
      top: 0;
@@ -83,21 +27,24 @@ export class HaTileIcon extends LitElement {
      height: 100%;
      width: 100%;
      background-color: var(--tile-icon-color);
-      transition:
-        background-color 180ms ease-in-out,
-        opacity 180ms ease-in-out;
-      opacity: var(--tile-icon-opacity);
+      transition: background-color 180ms ease-in-out;
+      opacity: 0.2;
    }
-    .container ::slotted([slot="icon"]) {
+    .shape {
+      position: relative;
+      width: 36px;
+      height: 36px;
+      border-radius: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 180ms ease-in-out;
+      overflow: hidden;
+    }
+    .shape ::slotted(*) {
      display: flex;
      color: var(--tile-icon-color);
      transition: color 180ms ease-in-out;
-      pointer-events: none;
-    }
-    .container img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
    }
  `;
 }
@@ -0,0 +1,53 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+
+export type TileImageStyle = "square" | "rounded-square" | "circle";
+@customElement("ha-tile-image")
+export class HaTileImage extends LitElement {
+  @property({ attribute: false }) public imageUrl?: string;
+
+  @property({ attribute: false }) public imageAlt?: string;
+
+  @property({ attribute: false }) public imageStyle: TileImageStyle = "circle";
+
+  protected render() {
+    return html`
+      <div class="image ${this.imageStyle}">
+        ${this.imageUrl
+          ? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
+          : nothing}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    .image {
+      position: relative;
+      width: 36px;
+      height: 36px;
+      border-radius: 18px;
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    .image.rounded-square {
+      border-radius: 8%;
+    }
+    .image.square {
+      border-radius: 0;
+    }
+    .image img {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-image": HaTileImage;
+  }
+}
@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, svg } from "lit";
+import { css, html, LitElement, 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("graph-start"),
-        end: c.hasAttribute("graph-end"),
+        start: c.hasAttribute("graphStart"),
+        end: c.hasAttribute("graphEnd"),
        track: c.hasAttribute("track"),
      });
      total_width += width;
@@ -65,8 +65,11 @@ export class HatGraphBranch extends LitElement {
    return html`
      <slot name="head"></slot>
      ${!this.start
-        ? html`
-            <svg id="top" width=${this._totalWidth}>
+        ? svg`
+            <svg
+              id="top"
+              width="${this._totalWidth}"
+            >
              ${this._branches.map((branch) =>
                branch.start
                  ? ""
@@ -83,7 +86,7 @@ export class HatGraphBranch extends LitElement {
              )}
            </svg>
          `
-        : nothing}
+        : ""}
      <div id="branches">
        <svg id="lines" width=${this._totalWidth} height=${this._maxHeight}>
          ${this._branches.map((branch) => {
@@ -104,8 +107,11 @@ export class HatGraphBranch extends LitElement {
      </div>

      ${!this.short
-        ? html`
-            <svg id="bottom" width=${this._totalWidth}>
+        ? svg`
+            <svg
+              id="bottom"
+              width="${this._totalWidth}"
+            >
              ${this._branches.map((branch) => {
                if (branch.end) return "";
                return svg`
@@ -122,7 +128,7 @@ export class HatGraphBranch extends LitElement {
              })}
            </svg>
          `
-        : nothing}
+        : ""}
    `;
  }

@@ -7,15 +7,13 @@ import type { RegistryEntry } from "./registry";
 export { subscribeAreaRegistry } from "./ws-area_registry";

 export interface AreaRegistryEntry extends RegistryEntry {
-  aliases: string[];
  area_id: string;
  floor_id: string | null;
-  humidity_entity_id: string | null;
-  icon: string | null;
-  labels: string[];
  name: string;
  picture: string | null;
-  temperature_entity_id: string | null;
+  icon: string | null;
+  labels: string[];
+  aliases: string[];
 }

 export type AreaEntityLookup = Record<string, EntityRegistryEntry[]>;
@@ -23,14 +21,12 @@ export type AreaEntityLookup = Record<string, EntityRegistryEntry[]>;
 export type AreaDeviceLookup = Record<string, DeviceRegistryEntry[]>;

 export interface AreaRegistryEntryMutableParams {
-  aliases?: string[];
-  floor_id?: string | null;
-  humidity_entity_id?: string | null;
-  icon?: string | null;
-  labels?: string[];
  name: string;
+  floor_id?: string | null;
  picture?: string | null;
-  temperature_entity_id?: string | null;
+  icon?: string | null;
+  aliases?: string[];
+  labels?: string[];
 }

 export const createAreaRegistryEntry = (
@@ -108,34 +108,6 @@ 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: {
@@ -169,7 +141,6 @@ export type PipelineRunEvent =
  | PipelineSTTStartEvent
  | PipelineSTTEndEvent
  | PipelineIntentStartEvent
-  | PipelineIntentProgressEvent
  | PipelineIntentEndEvent
  | PipelineTTSStartEvent
  | PipelineTTSEndEvent;
@@ -1,4 +1,3 @@
-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";
@@ -12,36 +11,22 @@ import type { HomeAssistant } from "../types";
 import { fileDownload } from "../util/file_download";
 import { domainToName } from "./integration";
 import type { FrontendLocaleData } from "./translation";
-import type { BackupManagerState, ManagerStateEvent } from "./backup_manager";
-import checkValidDate from "../common/datetime/check_valid_date";
-import { handleFetchPromise } from "../util/hass-call-api";

-export const enum BackupScheduleRecurrence {
+export const enum BackupScheduleState {
  NEVER = "never",
  DAILY = "daily",
-  CUSTOM_DAYS = "custom_days",
+  MONDAY = "mon",
+  TUESDAY = "tue",
+  WEDNESDAY = "wed",
+  THURSDAY = "thu",
+  FRIDAY = "fri",
+  SATURDAY = "sat",
+  SUNDAY = "sun",
 }

-export type BackupDay = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";
-
-export const BACKUP_DAYS: BackupDay[] = [
-  "mon",
-  "tue",
-  "wed",
-  "thu",
-  "fri",
-  "sat",
-  "sun",
-];
-
-export const sortWeekdays = (weekdays) =>
-  weekdays.sort((a, b) => BACKUP_DAYS.indexOf(a) - BACKUP_DAYS.indexOf(b));
-
 export interface BackupConfig {
  last_attempted_automatic_backup: string | null;
  last_completed_automatic_backup: string | null;
-  next_automatic_backup: string | null;
-  next_automatic_backup_additional?: boolean;
  create_backup: {
    agent_ids: string[];
    include_addons: string[] | null;
@@ -56,11 +41,8 @@ export interface BackupConfig {
    days?: number | null;
  };
  schedule: {
-    recurrence: BackupScheduleRecurrence;
-    time?: string | null;
-    days: BackupDay[];
+    state: BackupScheduleState;
  };
-  agents: BackupAgentsConfig;
 }

 export interface BackupMutableConfig {
@@ -77,39 +59,21 @@ export interface BackupMutableConfig {
    copies?: number | null;
    days?: number | null;
  };
-  schedule?: {
-    recurrence: BackupScheduleRecurrence;
-    time?: string | null;
-    days?: BackupDay[] | null;
-  };
-  agents?: BackupAgentsConfig;
-}
-
-export type BackupAgentsConfig = Record<string, BackupAgentConfig>;
-
-export interface BackupAgentConfig {
-  protected: boolean;
+  schedule?: BackupScheduleState;
 }

 export interface BackupAgent {
  agent_id: string;
-  name: string;
-}
-
-export interface BackupContentAgent {
-  size: number;
-  protected: boolean;
 }

 export interface BackupContent {
  backup_id: string;
  date: string;
  name: string;
-  agents: Record<string, BackupContentAgent>;
+  protected: boolean;
+  size: number;
+  agent_ids?: string[];
  failed_agent_ids?: string[];
-  extra_metadata?: {
-    "supervisor.addon_update"?: string;
-  };
  with_automatic_settings: boolean;
 }

@@ -131,13 +95,7 @@ export interface BackupContentExtended extends BackupContent, BackupData {}

 export interface BackupInfo {
  backups: BackupContent[];
-  agent_errors: Record<string, string>;
-  last_attempted_automatic_backup: string | null;
-  last_completed_automatic_backup: string | null;
-  last_non_idle_event: ManagerStateEvent | null;
-  next_automatic_backup: string | null;
-  next_automatic_backup_additional: boolean;
-  state: BackupManagerState;
+  backing_up: boolean;
 }

 export interface BackupDetails {
@@ -177,12 +135,8 @@ export const updateBackupConfig = (
  config: BackupMutableConfig
 ) => hass.callWS({ type: "backup/config/update", ...config });

-export const getBackupDownloadUrl = (
-  id: string,
-  agentId: string,
-  password?: string | null
-) =>
-  `/api/backup/download/${id}?agent_id=${agentId}${password ? `&password=${password}` : ""}`;
+export const getBackupDownloadUrl = (id: string, agentId: string) =>
+  `/api/backup/download/${id}?agent_id=${agentId}`;

 export const fetchBackupInfo = (hass: HomeAssistant): Promise<BackupInfo> =>
  hass.callWS({
@@ -239,23 +193,27 @@ export const restoreBackup = (
 export const uploadBackup = async (
  hass: HomeAssistant,
  file: File,
-  agentIds: string[]
-): Promise<{ backup_id: string }> => {
+  agent_ids: string[]
+): Promise<void> => {
  const fd = new FormData();
  fd.append("file", file);

-  const params = new URLSearchParams();
+  const params = agent_ids.reduce((acc, agent_id) => {
+    acc.append("agent_id", agent_id);
+    return acc;
+  }, new URLSearchParams());

-  agentIds.forEach((agentId) => {
-    params.append("agent_id", agentId);
-  });
-
-  return handleFetchPromise(
-    hass.fetchWithAuth(`/api/backup/upload?${params.toString()}`, {
+  const resp = await hass.fetchWithAuth(
+    `/api/backup/upload?${params.toString()}`,
+    {
      method: "POST",
      body: fd,
-    })
+    }
  );
+
+  if (!resp.ok) {
+    throw new Error(`${resp.status} ${resp.statusText}`);
+  }
 };

 export const getPreferredAgentForDownload = (agents: string[]) => {
@@ -271,19 +229,6 @@ export const getPreferredAgentForDownload = (agents: string[]) => {
  return agents[0];
 };

-export const canDecryptBackupOnDownload = (
-  hass: HomeAssistant,
-  backup_id: string,
-  agent_id: string,
-  password: string
-) =>
-  hass.callWS({
-    type: "backup/can_decrypt_on_download",
-    backup_id,
-    agent_id,
-    password,
-  });
-
 export const CORE_LOCAL_AGENT = "backup.local";
 export const HASSIO_LOCAL_AGENT = "hassio.local";
 export const CLOUD_AGENT = "cloud.cloud";
@@ -299,18 +244,13 @@ export const isNetworkMountAgent = (agentId: string) => {
 export const computeBackupAgentName = (
  localize: LocalizeFunc,
  agentId: string,
-  agents: BackupAgent[]
+  agentIds?: string[]
 ) => {
  if (isLocalAgent(agentId)) {
    return localize("ui.panel.config.backup.agents.local_agent");
  }
+  const [domain, name] = agentId.split(".");

-  const agent = agents.find((a) => a.agent_id === agentId);
-
-  const domain = agentId.split(".")[0];
-  const name = agent ? agent.name : agentId.split(".")[1];
-
-  // If it's a network mount agent, only show the name
  if (isNetworkMountAgent(agentId)) {
    return name;
  }
@@ -318,38 +258,13 @@ export const computeBackupAgentName = (
  const domainName = domainToName(localize, domain);

  // If there are multiple agents for a domain, show the name
-  const showName =
-    agents.filter((a) => a.agent_id.split(".")[0] === domain).length > 1;
+  const showName = agentIds
+    ? agentIds.filter((a) => a.split(".")[0] === domain).length > 1
+    : true;

  return showName ? `${domainName}: ${name}` : domainName;
 };

-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);
@@ -422,44 +337,9 @@ export const downloadEmergencyKit = (
    geneateEmergencyKitFileName(hass, appendFileName)
  );

-export const DEFAULT_OPTIMIZED_BACKUP_START_TIME = setMinutes(
-  setHours(new Date(), 4),
-  45
-);
-
-export const DEFAULT_OPTIMIZED_BACKUP_END_TIME = setMinutes(
-  setHours(new Date(), 5),
-  45
-);
-
 export const getFormattedBackupTime = memoizeOne(
-  (
-    locale: FrontendLocaleData,
-    config: HassConfig,
-    backupTime?: Date | string | null
-  ) => {
-    if (checkValidDate(backupTime as Date)) {
-      return formatTime(backupTime as Date, locale, config);
-    }
-    if (typeof backupTime === "string" && backupTime) {
-      const splitted = backupTime.split(":");
-      const date = setMinutes(
-        setHours(new Date(), parseInt(splitted[0])),
-        parseInt(splitted[1])
-      );
-      return formatTime(date, locale, config);
-    }
-
-    return `${formatTime(DEFAULT_OPTIMIZED_BACKUP_START_TIME, locale, config)} - ${formatTime(DEFAULT_OPTIMIZED_BACKUP_END_TIME, locale, config)}`;
+  (locale: FrontendLocaleData, config: HassConfig) => {
+    const date = setMinutes(setHours(new Date(), 4), 45);
+    return formatTime(date, locale, config);
  }
 );
-
-export const SUPPORTED_UPLOAD_FORMAT = "application/x-tar";
-
-export interface BackupUploadFileFormData {
-  file?: File;
-}
-
-export const INITIAL_UPLOAD_FORM_DATA: BackupUploadFileFormData = {
-  file: undefined,
-};
@@ -1,66 +0,0 @@
-import { handleFetchPromise } from "../util/hass-call-api";
-import type { BackupContentExtended } from "./backup";
-import type {
-  BackupManagerState,
-  RestoreBackupStage,
-  RestoreBackupState,
-} from "./backup_manager";
-
-export interface BackupOnboardingInfo {
-  state: BackupManagerState;
-  last_non_idle_event?: {
-    manager_state: BackupManagerState;
-    stage: RestoreBackupStage | null;
-    state: RestoreBackupState;
-    reason: string | null;
-  } | null;
-}
-
-export interface BackupOnboardingConfig extends BackupOnboardingInfo {
-  backups: BackupContentExtended[];
-}
-
-export const fetchBackupOnboardingInfo = async () =>
-  handleFetchPromise<BackupOnboardingConfig>(
-    fetch("/api/onboarding/backup/info")
-  );
-
-export interface RestoreOnboardingBackupParams {
-  backup_id: string;
-  agent_id: string;
-  password?: string;
-  restore_addons?: string[];
-  restore_database?: boolean;
-  restore_folders?: string[];
-}
-
-export const restoreOnboardingBackup = async (
-  params: RestoreOnboardingBackupParams
-) =>
-  handleFetchPromise(
-    fetch("/api/onboarding/backup/restore", {
-      method: "POST",
-      body: JSON.stringify(params),
-    })
-  );
-
-export const uploadOnboardingBackup = async (
-  file: File,
-  agentIds: string[]
-): Promise<{ backup_id: string }> => {
-  const fd = new FormData();
-  fd.append("file", file);
-
-  const params = new URLSearchParams();
-
-  agentIds.forEach((agentId) => {
-    params.append("agent_id", agentId);
-  });
-
-  return handleFetchPromise(
-    fetch(`/api/onboarding/backup/upload?${params.toString()}`, {
-      method: "POST",
-      body: fd,
-    })
-  );
-};
@@ -1,167 +0,0 @@
-import {
-  createCollection,
-  type Connection,
-  type UnsubscribeFunc,
-} from "home-assistant-js-websocket";
-import type { Store } from "home-assistant-js-websocket/dist/store";
-import type { DataTableRowData } from "../components/data-table/ha-data-table";
-
-export interface BluetoothDeviceData extends DataTableRowData {
-  address: string;
-  connectable: boolean;
-  manufacturer_data: Record<number, string>;
-  name: string;
-  rssi: number;
-  service_data: Record<string, string>;
-  service_uuids: string[];
-  source: string;
-  time: number;
-  tx_power: number;
-}
-
-export interface BluetoothScannerDetails {
-  source: string;
-  connectable: boolean;
-  name: string;
-  adapter: string;
-}
-
-export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
-
-interface BluetoothRemoveDeviceData {
-  address: string;
-}
-
-interface BluetoothAdvertisementSubscriptionMessage {
-  add?: BluetoothDeviceData[];
-  change?: BluetoothDeviceData[];
-  remove?: BluetoothRemoveDeviceData[];
-}
-
-interface BluetoothScannersDetailsSubscriptionMessage {
-  add?: BluetoothScannerDetails[];
-  remove?: BluetoothScannerDetails[];
-}
-
-export interface BluetoothAllocationsData {
-  source: string;
-  slots: number;
-  free: number;
-  allocated: string[];
-}
-
-export const subscribeBluetoothScannersDetailsUpdates = (
-  conn: Connection,
-  store: Store<BluetoothScannersDetails>
-): Promise<UnsubscribeFunc> =>
-  conn.subscribeMessage<BluetoothScannersDetailsSubscriptionMessage>(
-    (event) => {
-      const data = { ...(store.state || {}) };
-      if (event.add) {
-        for (const device_data of event.add) {
-          data[device_data.source] = device_data;
-        }
-      }
-      if (event.remove) {
-        for (const device_data of event.remove) {
-          delete data[device_data.source];
-        }
-      }
-      store.setState(data, true);
-    },
-    {
-      type: `bluetooth/subscribe_scanner_details`,
-    }
-  );
-
-export const subscribeBluetoothScannersDetails = (
-  conn: Connection,
-  callbackFunction: (bluetoothScannersDetails: BluetoothScannersDetails) => void
-) =>
-  createCollection<BluetoothScannersDetails>(
-    "_bluetoothScannerDetails",
-    () => Promise.resolve<BluetoothScannersDetails>({}), // empty hash as initial state
-
-    subscribeBluetoothScannersDetailsUpdates,
-    conn,
-    callbackFunction
-  );
-
-const subscribeBluetoothAdvertisementsUpdates = (
-  conn: Connection,
-  store: Store<BluetoothDeviceData[]>
-): Promise<UnsubscribeFunc> =>
-  conn.subscribeMessage<BluetoothAdvertisementSubscriptionMessage>(
-    (event) => {
-      const data = [...(store.state || [])];
-      if (event.add) {
-        for (const device_data of event.add) {
-          const index = data.findIndex(
-            (d) => d.address === device_data.address
-          );
-          if (index === -1) {
-            data.push(device_data);
-          } else {
-            data[index] = device_data;
-          }
-        }
-      }
-      if (event.change) {
-        for (const device_data of event.change) {
-          const index = data.findIndex(
-            (d) => d.address === device_data.address
-          );
-          if (index !== -1) {
-            data[index] = device_data;
-          }
-        }
-      }
-      if (event.remove) {
-        for (const device_data of event.remove) {
-          const index = data.findIndex(
-            (d) => d.address === device_data.address
-          );
-          if (index !== -1) {
-            data.splice(index, 1);
-          }
-        }
-      }
-
-      store.setState(data, true);
-    },
-    {
-      type: `bluetooth/subscribe_advertisements`,
-    }
-  );
-
-export const subscribeBluetoothAdvertisements = (
-  conn: Connection,
-  callbackFunction: (bluetoothDeviceData: BluetoothDeviceData[]) => void
-) =>
-  createCollection<BluetoothDeviceData[]>(
-    "_bluetoothDeviceRows",
-    () => Promise.resolve<BluetoothDeviceData[]>([]), // empty array as initial state
-
-    subscribeBluetoothAdvertisementsUpdates,
-    conn,
-    callbackFunction
-  );
-
-export const subscribeBluetoothConnectionAllocations = (
-  conn: Connection,
-  callbackFunction: (
-    bluetoothAllocationsData: BluetoothAllocationsData[]
-  ) => void,
-  configEntryId?: string
-): Promise<() => Promise<void>> => {
-  const params: { type: string; config_entry_id?: string } = {
-    type: "bluetooth/subscribe_connection_allocations",
-  };
-  if (configEntryId) {
-    params.config_entry_id = configEntryId;
-  }
-  return conn.subscribeMessage<BluetoothAllocationsData[]>(
-    (bluetoothAllocationsData) => callbackFunction(bluetoothAllocationsData),
-    params
-  );
-};
@@ -73,7 +73,6 @@ export interface CloudWebhook {
 interface CloudLoginBase {
  hass: HomeAssistant;
  email: string;
-  check_connection?: boolean;
 }

 export interface CloudLoginPassword extends CloudLoginBase {
@@ -182,6 +181,3 @@ 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");
@@ -19,8 +19,6 @@ export interface ConfigEntry {
  supports_remove_device: boolean;
  supports_unload: boolean;
  supports_reconfigure: boolean;
-  supported_subentry_types: Record<string, { supports_reconfigure: boolean }>;
-  num_subentries: number;
  pref_disable_new_entities: boolean;
  pref_disable_polling: boolean;
  disabled_by: "user" | null;
@@ -29,30 +27,6 @@ export interface ConfigEntry {
  error_reason_translation_placeholders: Record<string, string> | null;
 }

-export interface SubEntry {
-  subentry_id: string;
-  subentry_type: string;
-  title: string;
-  unique_id: string;
-}
-
-export const getSubEntries = (hass: HomeAssistant, entry_id: string) =>
-  hass.callWS<SubEntry[]>({
-    type: "config_entries/subentries/list",
-    entry_id,
-  });
-
-export const deleteSubEntry = (
-  hass: HomeAssistant,
-  entry_id: string,
-  subentry_id: string
-) =>
-  hass.callWS({
-    type: "config_entries/subentries/delete",
-    entry_id,
-    subentry_id,
-  });
-
 export type ConfigEntryMutableParams = Partial<
  Pick<
    ConfigEntry,
@@ -2,11 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import type { HaFormSchema } from "../components/ha-form/types";
 import type { ConfigEntry } from "./config_entries";

-export type FlowType =
-  | "config_flow"
-  | "config_subentries_flow"
-  | "options_flow"
-  | "repair_flow";
+export type FlowType = "config_flow" | "options_flow" | "repair_flow";

 export interface DataEntryFlowProgressedEvent {
  type: "data_entry_flow_progressed";
@@ -17,7 +17,6 @@ export {
 export interface DeviceRegistryEntry extends RegistryEntry {
  id: string;
  config_entries: string[];
-  config_entries_subentries: Record<string, (string | null)[]>;
  connections: [string, string][];
  identifiers: [string, string][];
  manufacturer: string | null;
@@ -50,7 +50,6 @@ export interface EntityRegistryEntry extends RegistryEntry {
  icon: string | null;
  platform: string;
  config_entry_id: string | null;
-  config_subentry_id: string | null;
  device_id: string | null;
  area_id: string | null;
  labels: string[];
@@ -313,34 +313,21 @@ export const installHassioAddon = async (

 export const updateHassioAddon = async (
  hass: HomeAssistant,
-  slug: string,
-  backup: boolean
+  slug: string
 ): Promise<void> => {
-  if (atLeastVersion(hass.config.version, 2025, 2, 0)) {
-    await hass.callWS({
-      type: "hassio/update/addon",
-      addon: slug,
-      backup: backup,
-    });
-    return;
-  }
-
  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
    await hass.callWS({
      type: "supervisor/api",
      endpoint: `/store/addons/${slug}/update`,
      method: "post",
      timeout: null,
-      data: { backup },
    });
-    return;
+  } else {
+    await hass.callApi<HassioResponse<void>>(
+      "POST",
+      `hassio/addons/${slug}/update`
+    );
  }
-
-  await hass.callApi<HassioResponse<void>>(
-    "POST",
-    `hassio/addons/${slug}/update`,
-    { backup }
-  );
 };

 export const restartHassioAddon = async (
@@ -1,5 +1,6 @@
 import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import { handleFetchPromise } from "../../util/hass-call-api";
 import type { HassioResponse } from "./common";
 import { hassioApiResultExtractor } from "./common";

@@ -81,24 +82,34 @@ export const fetchHassioBackups = async (
 };

 export const fetchHassioBackupInfo = async (
-  hass: HomeAssistant,
+  hass: HomeAssistant | undefined,
  backup: string
 ): Promise<HassioBackupDetail> => {
-  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    return hass.callWS({
-      type: "supervisor/api",
-      endpoint: `/${
-        atLeastVersion(hass.config.version, 2021, 9) ? "backups" : "snapshots"
-      }/${backup}/info`,
-      method: "get",
-    });
+  if (hass) {
+    if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+      return hass.callWS({
+        type: "supervisor/api",
+        endpoint: `/${
+          atLeastVersion(hass.config.version, 2021, 9) ? "backups" : "snapshots"
+        }/${backup}/info`,
+        method: "get",
+      });
+    }
+    return hassioApiResultExtractor(
+      await hass.callApi<HassioResponse<HassioBackupDetail>>(
+        "GET",
+        `hassio/${
+          atLeastVersion(hass.config.version, 2021, 9) ? "backups" : "snapshots"
+        }/${backup}/info`
+      )
+    );
  }
+  // When called from onboarding we don't have hass
  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<HassioBackupDetail>>(
-      "GET",
-      `hassio/${
-        atLeastVersion(hass.config.version, 2021, 9) ? "backups" : "snapshots"
-      }/${backup}/info`
+    await handleFetchPromise(
+      fetch(`/api/hassio/backups/${backup}/info`, {
+        method: "GET",
+      })
    )
  );
 };
@@ -229,15 +240,24 @@ export const uploadBackup = async (
 };

 export const restoreBackup = async (
-  hass: HomeAssistant,
+  hass: HomeAssistant | undefined,
  type: HassioBackupDetail["type"],
  backupSlug: string,
  backupDetails: HassioPartialBackupCreateParams | HassioFullBackupCreateParams,
-  useBackupUrl: boolean
+  useSnapshotUrl: boolean
 ): Promise<void> => {
-  await hass.callApi<HassioResponse<{ job_id: string }>>(
-    "POST",
-    `hassio/${useBackupUrl ? "backups" : "snapshots"}/${backupSlug}/restore/${type}`,
-    backupDetails
-  );
+  if (hass) {
+    await hass.callApi<HassioResponse<{ job_id: string }>>(
+      "POST",
+      `hassio/${useSnapshotUrl ? "snapshots" : "backups"}/${backupSlug}/restore/${type}`,
+      backupDetails
+    );
+  } else {
+    await handleFetchPromise(
+      fetch(`/api/hassio/backups/${backupSlug}/restore/${type}`, {
+        method: "POST",
+        body: JSON.stringify(backupDetails),
+      })
+    );
+  }
 };
@@ -5,7 +5,6 @@ import type { HomeAssistant } from "../types";
 import { debounce } from "../common/util/debounce";

 export const integrationsWithPanel = {
-  bluetooth: "config/bluetooth",
  matter: "config/matter",
  mqtt: "config/mqtt",
  thread: "config/thread",
@@ -2,8 +2,6 @@ import type { HomeAssistant } from "../types";

 export const SENSOR_DEVICE_CLASS_BATTERY = "battery";
 export const SENSOR_DEVICE_CLASS_TIMESTAMP = "timestamp";
-export const SENSOR_DEVICE_CLASS_TEMPERATURE = "temperature";
-export const SENSOR_DEVICE_CLASS_HUMIDITY = "humidity";

 export interface SensorDeviceClassUnits {
  units: string[];
@@ -1,33 +0,0 @@
-import type { HomeAssistant } from "../types";
-import {
-  fetchFrontendUserData,
-  saveFrontendUserData,
-  subscribeFrontendUserData,
-} from "./frontend";
-
-export const SIDEBAR_PREFERENCES_KEY = "sidebar";
-
-export interface SidebarPreferences {
-  panelOrder?: string[];
-  hiddenPanels?: string[];
-}
-
-declare global {
-  interface FrontendUserData {
-    sidebar?: SidebarPreferences;
-  }
-}
-
-export const fetchSidebarPreferences = (hass: HomeAssistant) =>
-  fetchFrontendUserData(hass.connection, SIDEBAR_PREFERENCES_KEY);
-
-export const saveSidebarPreferences = (
-  hass: HomeAssistant,
-  data: SidebarPreferences
-) => saveFrontendUserData(hass.connection, SIDEBAR_PREFERENCES_KEY, data);
-
-export const subscribeSidebarPreferences = (
-  hass: HomeAssistant,
-  callback: (sidebar?: SidebarPreferences | null) => void
-) =>
-  subscribeFrontendUserData(hass.connection, SIDEBAR_PREFERENCES_KEY, callback);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Petar Petrov	f52f73ad3f	format	2025-01-17 18:57:28 +02:00
Petar Petrov	196df65980	Disable chart animations if `prefers-reduced-motion` is enabled	2025-01-17 18:54:40 +02:00