Keep dependency cache fallbacks fast

.github/actions/setup/action.yml

@@ -8,16 +8,33 @@ inputs:
   cache:
     description: Enable the yarn cache in setup-node
     default: "true"
+  node-modules-cache:
+    description: Restore the exact shared node_modules cache before installing
+    default: "false"
 
 runs:
   using: composite
   steps:
+    - name: Restore complete dependency tree
+      id: dependency-cache
+      if: inputs.node-modules-cache == 'true'
+      continue-on-error: true
+      uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+      with:
+        path: |
+          node_modules
+          .yarn/install-state.gz
+        key: >-
+          node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+          hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+
     - name: Setup Node
       uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version-file: ".nvmrc"
-        cache: ${{ inputs.cache == 'true' && 'yarn' || '' }}
+        cache: ${{ inputs.cache == 'true' && (inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true') && 'yarn' || '' }}
 
     - name: Install dependencies
+      if: inputs.node-modules-cache != 'true' || steps.dependency-cache.outputs.cache-hit != 'true'
       shell: bash
       run: yarn install ${{ inputs.immutable == 'true' && '--immutable' || '' }}

.github/workflows/ci.yaml

@@ -1,6 +1,7 @@
 name: CI
 
 on:
+  workflow_dispatch:
   push:
     branches:
       - dev
@@ -21,16 +22,56 @@ permissions:
   contents: read
 
 jobs:
-  lint:
-    name: Lint and check format
+  prepare-dependencies:
+    name: Prepare dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
+      - name: Check for complete dependency tree
+        id: dependencies
+        continue-on-error: true
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+          lookup-only: true
       - name: Setup Node and install
+        if: steps.dependencies.outputs.cache-hit != 'true'
         uses: ./.github/actions/setup
+        with:
+          cache: false
+      - name: Save complete dependency tree
+        if: steps.dependencies.outputs.cache-hit != 'true'
+        continue-on-error: true
+        uses: actions/cache/save@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: |
+            node_modules
+            .yarn/install-state.gz
+          key: >-
+            node-modules-v1-${{ runner.os }}-${{ runner.arch }}-${{
+            hashFiles('.nvmrc', 'package.json', 'yarn.lock', '.yarnrc.yml', '.yarn/releases/**', '.yarn/patches/**') }}
+
+  lint:
+    name: Lint and check format
+    needs: prepare-dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+      - name: Setup Node with shared dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Check for duplicate dependencies
         run: yarn dedupe --check
       - name: Build resources
@@ -63,14 +104,17 @@ jobs:
         run: yarn run lint:licenses
   test:
     name: Run tests
+    needs: prepare-dependencies
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
         env:
@@ -80,6 +124,7 @@ jobs:
   build:
     name: Build frontend
     needs:
+      - prepare-dependencies
       - lint
       - test
     runs-on: ubuntu-latest
@@ -88,8 +133,10 @@ jobs:
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
-      - name: Setup Node and install
+      - name: Setup Node with shared dependencies
         uses: ./.github/actions/setup
+        with:
+          node-modules-cache: true
       - name: Build Application
         uses: ./.github/actions/build
         with:

build-scripts/gulp/licenses.js

@@ -29,7 +29,7 @@ const LICENSE_OVERRIDES = [
     // type-fest ships two license files (MIT for code, CC0 for types).
     // We use the MIT license since that covers the bundled code.
     packageName: "type-fest",
-    version: "5.8.0",
+    version: "5.7.0",
     licenseFile: "license-mit",
   },
 ];

demo/src/configs/demo-configs.ts

@@ -1,16 +1,7 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
-import { getDemoTheme } from "../stubs/frontend";
-import type { DemoConfig, DemoTheme } from "./types";
-
-export const applyDemoTheme = (hass: MockHomeAssistant, theme: DemoTheme) => {
-  if (typeof theme === "function") {
-    hass.mockTheme(theme());
-    return;
-  }
-  hass.mockTheme(null, getDemoTheme(theme));
-};
+import type { DemoConfig } from "./types";
 
 export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./sections").then((mod) => mod.demoSections),
@@ -40,5 +31,5 @@ export const setDemoConfig = async (
   hass.addEntities(config.entities(hass.localize), true);
   hass.addEntities(energyEntities());
   lovelace.saveConfig(config.lovelace(hass.localize));
-  applyDemoTheme(hass, config.theme);
+  hass.mockTheme(config.theme());
 };

demo/src/configs/sections/index.ts

@@ -8,5 +8,5 @@ export const demoSections: DemoConfig = {
   name: "Home Demo",
   lovelace: demoLovelaceSections,
   entities: demoEntitiesSections,
-  theme: { theme: "default", dark: false },
+  theme: () => ({}),
 };

demo/src/configs/types.ts

@@ -2,9 +2,6 @@ import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import type { EntityInput } from "../../../src/fake_data/entities/types";
-import type { ThemeSettings } from "../../../src/types";
-
-export type DemoTheme = ThemeSettings | (() => Record<string, string> | null);
 
 export interface DemoConfig {
   index?: number;
@@ -15,5 +12,5 @@ export interface DemoConfig {
     string | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
   entities: (localize: LocalizeFunc) => EntityInput[];
-  theme: DemoTheme;
+  theme: () => Record<string, string> | null;
 }

demo/src/ha-demo.ts

@@ -5,7 +5,7 @@ import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
 import { provideHass } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import type { HomeAssistant } from "../../src/types";
-import { applyDemoTheme, selectedDemoConfig } from "./configs/demo-configs";
+import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { demoDevices } from "./stubs/devices";
@@ -173,7 +173,9 @@ export class HaDemo extends HomeAssistantAppEl {
     Promise.all([selectedDemoConfig, localizePromise]).then(
       ([conf, localize]) => {
         hass.addEntities(conf.entities(localize));
-        applyDemoTheme(hass, conf.theme);
+        if (conf.theme) {
+          hass.mockTheme(conf.theme());
+        }
       }
     );
 

demo/src/stubs/frontend.ts

@@ -1,37 +1,10 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import type { ThemeSettings } from "../../../src/types";
 
-let sidebarChangeCallback: ((data: { value: unknown }) => void) | undefined;
-let themeChangeCallback: ((data: { value: ThemeSettings }) => void) | undefined;
-
-const THEME_STORAGE_KEY = "demo_theme";
-const DEFAULT_THEME: ThemeSettings = { theme: "default", dark: false };
-
-export const getDemoTheme = (
-  fallback: ThemeSettings = DEFAULT_THEME
-): ThemeSettings => {
-  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-  if (!storedTheme) {
-    return fallback;
-  }
-  try {
-    return JSON.parse(storedTheme) as ThemeSettings;
-  } catch {
-    localStorage.removeItem(THEME_STORAGE_KEY);
-    return fallback;
-  }
-};
+let sidebarChangeCallback;
 
 export const mockFrontend = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_user_data", ({ key }) => ({
-    value: key === "theme" ? getDemoTheme() : null,
-  }));
+  hass.mockWS("frontend/get_user_data", () => ({ value: null }));
   hass.mockWS("frontend/set_user_data", ({ key, value }) => {
-    if (key === "theme") {
-      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(value));
-      themeChangeCallback?.({ value });
-      localStorage.removeItem("selectedTheme");
-    }
     if (key === "sidebar") {
       sidebarChangeCallback?.({
         value: {
@@ -41,18 +14,10 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
       });
     }
   });
-  hass.mockWS("frontend/subscribe_user_data", (msg, currentHass, onChange) => {
+  hass.mockWS("frontend/subscribe_user_data", (msg, _hass, onChange) => {
     if (msg.key === "sidebar") {
       sidebarChangeCallback = onChange;
     }
-    if (msg.key === "theme") {
-      themeChangeCallback = onChange;
-      onChange?.({
-        value: getDemoTheme(currentHass.selectedTheme ?? undefined),
-      });
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {};
-    }
     onChange?.({ value: null });
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};

package.json

@@ -12,7 +12,7 @@
     "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
-    "lint:types": "node ./node_modules/@typescript/native/bin/tsc",
+    "lint:types": "tsc",
     "lint:lit": "lit-analyzer \"{.,*}/src/**/*.ts\"",
     "lint:licenses": "node --no-deprecation script/check-licenses",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types && yarn run lint:lit",
@@ -52,15 +52,15 @@
     "@codemirror/view": "6.43.6",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.5.0",
-    "@formatjs/intl-displaynames": "7.3.12",
-    "@formatjs/intl-durationformat": "0.10.17",
-    "@formatjs/intl-getcanonicallocales": "3.2.11",
-    "@formatjs/intl-listformat": "8.3.12",
-    "@formatjs/intl-locale": "5.3.10",
-    "@formatjs/intl-numberformat": "9.3.13",
-    "@formatjs/intl-pluralrules": "6.3.12",
-    "@formatjs/intl-relativetimeformat": "12.3.12",
+    "@formatjs/intl-datetimeformat": "7.4.10",
+    "@formatjs/intl-displaynames": "7.3.11",
+    "@formatjs/intl-durationformat": "0.10.16",
+    "@formatjs/intl-getcanonicallocales": "3.2.10",
+    "@formatjs/intl-listformat": "8.3.11",
+    "@formatjs/intl-locale": "5.3.9",
+    "@formatjs/intl-numberformat": "9.3.12",
+    "@formatjs/intl-pluralrules": "6.3.11",
+    "@formatjs/intl-relativetimeformat": "12.3.11",
     "@fullcalendar/core": "6.1.21",
     "@fullcalendar/daygrid": "6.1.21",
     "@fullcalendar/interaction": "6.1.21",
@@ -89,7 +89,7 @@
     "@vvo/tzdb": "6.198.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.2.1",
+    "barcode-detector": "3.2.0",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
@@ -107,7 +107,7 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.3.0",
-    "intl-messageformat": "11.2.11",
+    "intl-messageformat": "11.2.10",
     "js-yaml": "5.2.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -168,13 +168,12 @@
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@typescript/native": "npm:typescript@7.0.2",
     "@vitest/coverage-v8": "4.1.10",
     "babel-loader": "10.1.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.7.0",
+    "eslint": "10.6.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.17.1",
@@ -207,7 +206,7 @@
     "rspack-manifest-plugin": "5.2.2",
     "serve": "14.2.6",
     "sinon": "22.0.0",
-    "tar": "7.5.20",
+    "tar": "7.5.19",
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",

src/common/decorators/storage.ts

@@ -51,9 +51,8 @@ class StorageClass {
     storageKey: string,
     callback: Callback
   ): UnsubscribeFunc {
-    const listeners = this._listeners[storageKey];
-    if (listeners) {
-      listeners.push(callback);
+    if (this._listeners[storageKey]) {
+      this._listeners[storageKey].push(callback);
     } else {
       this._listeners[storageKey] = [callback];
     }

src/common/style/derived-css-vars.ts

@@ -33,12 +33,13 @@ const extractVarFromBase = (
   varName: string,
   baseVars: Record<string, string>
 ): string | undefined => {
-  const value = baseVars[varName];
-  if (value && value.startsWith("var(")) {
-    const baseVarName = value.substring(6, value.length - 1).trim();
+  if (baseVars[varName] && baseVars[varName].startsWith("var(")) {
+    const baseVarName = baseVars[varName]
+      .substring(6, baseVars[varName].length - 1)
+      .trim();
     return extractVarFromBase(baseVarName, baseVars);
   }
-  return value;
+  return baseVars[varName];
 };
 
 /**

src/components/ha-clock-date-format-picker.ts

@@ -1,540 +0,0 @@
-import { consume, type ContextType } from "@lit/context";
-import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import { ensureArray } from "../common/array/ensure-array";
-import { resolveTimeZone } from "../common/datetime/resolve-time-zone";
-import { fireEvent } from "../common/dom/fire_event";
-import { configContext, internationalizationContext } from "../data/context";
-import {
-  CLOCK_CARD_DATE_PARTS,
-  formatClockCardDate,
-} from "../panels/lovelace/cards/clock/clock-date-format";
-import type { ClockCardDatePart } from "../panels/lovelace/cards/types";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
-import "./chips/ha-assist-chip";
-import "./chips/ha-chip-set";
-import "./chips/ha-input-chip";
-import "./ha-generic-picker";
-import type { HaGenericPicker } from "./ha-generic-picker";
-import "./ha-input-helper-text";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import "./ha-sortable";
-
-type ClockDatePartSection = "weekday" | "day" | "month" | "year" | "separator";
-
-type ClockDateSeparatorPart = Extract<
-  ClockCardDatePart,
-  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
->;
-
-const CLOCK_DATE_PART_SECTION_ORDER: readonly ClockDatePartSection[] = [
-  "day",
-  "month",
-  "year",
-  "weekday",
-  "separator",
-];
-
-const CLOCK_DATE_SEPARATOR_VALUES: Record<ClockDateSeparatorPart, string> = {
-  "separator-dash": "-",
-  "separator-slash": "/",
-  "separator-dot": ".",
-  "separator-new-line": "",
-};
-
-const getClockDatePartSection = (
-  part: ClockCardDatePart
-): ClockDatePartSection => {
-  if (part.startsWith("weekday-")) {
-    return "weekday";
-  }
-
-  if (part.startsWith("day-")) {
-    return "day";
-  }
-
-  if (part.startsWith("month-")) {
-    return "month";
-  }
-
-  if (part.startsWith("year-")) {
-    return "year";
-  }
-
-  return "separator";
-};
-
-interface ClockDatePartSectionData {
-  id: ClockDatePartSection;
-  title: string;
-  items: PickerComboBoxItem[];
-}
-
-interface ClockDatePartValueItem {
-  key: string;
-  item: string;
-  idx: number;
-}
-
-@customElement("ha-clock-date-format-picker")
-export class HaClockDateFormatPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property() public label?: string;
-
-  @property() public value?: string[] | string;
-
-  @property() public helper?: string;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _hassConfig!: ContextType<typeof configContext>;
-
-  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
-
-  private _editIndex?: number;
-
-  protected render() {
-    const value = this._value;
-    const valueItems = this._getValueItems(value);
-    const sections = this._buildSections();
-
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required && !value.length}
-        .value=${this._getPickerValue()}
-        .sections=${this._getSectionHeaders(sections)}
-        .getItems=${this._getItems(sections)}
-        @value-changed=${this._pickerValueChanged}
-      >
-        <div slot="field" class="container">
-          <ha-sortable
-            no-style
-            @item-moved=${this._moveItem}
-            .disabled=${this.disabled}
-            handle-selector="button.primary.action"
-            filter=".add"
-          >
-            <ha-chip-set>
-              ${repeat(
-                valueItems,
-                (entry: ClockDatePartValueItem) => entry.key,
-                ({ item, idx }) => this._renderValueChip(item, idx, sections)
-              )}
-              ${
-                this.disabled
-                  ? nothing
-                  : html`
-                      <ha-assist-chip
-                        @click=${this._addItem}
-                        .disabled=${this.disabled}
-                        label=${this._i18n.localize("ui.common.add")}
-                        class="add"
-                      >
-                        <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                      </ha-assist-chip>
-                    `
-              }
-            </ha-chip-set>
-          </ha-sortable>
-        </div>
-      </ha-generic-picker>
-      ${this._renderHelper()}
-    `;
-  }
-
-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
-  private _getValueItems = memoizeOne(
-    (value: string[]): ClockDatePartValueItem[] => {
-      const occurrences = new Map<string, number>();
-
-      return value.map((item, idx) => {
-        const occurrence = occurrences.get(item) ?? 0;
-        occurrences.set(item, occurrence + 1);
-
-        return {
-          key: `${item}:${occurrence}`,
-          item,
-          idx,
-        };
-      });
-    }
-  );
-
-  private _renderValueChip(
-    item: string,
-    idx: number,
-    sections: ClockDatePartSectionData[]
-  ) {
-    const label = this._getItemLabel(item, sections);
-    const isValid = !!label;
-
-    return html`
-      <ha-input-chip
-        data-idx=${idx}
-        @remove=${this._removeItem}
-        @click=${this._editItem}
-        .label=${label ?? item}
-        .selected=${!this.disabled}
-        .disabled=${this.disabled}
-        class=${!isValid ? "invalid" : ""}
-      >
-        <ha-svg-icon
-          slot="icon"
-          .path=${mdiDragHorizontalVariant}
-        ></ha-svg-icon>
-      </ha-input-chip>
-    `;
-  }
-
-  private async _addItem(ev: Event) {
-    ev.stopPropagation();
-
-    if (this.disabled) {
-      return;
-    }
-
-    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private async _editItem(ev: Event) {
-    ev.stopPropagation();
-
-    if (this.disabled) {
-      return;
-    }
-
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
-      10
-    );
-    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private get _value() {
-    return !this.value ? [] : ensureArray(this.value);
-  }
-
-  private _toValue = memoizeOne((value: string[]): string[] | undefined =>
-    value.length === 0 ? undefined : value
-  );
-
-  private _buildSections(): ClockDatePartSectionData[] {
-    const itemsBySection: Record<ClockDatePartSection, PickerComboBoxItem[]> = {
-      weekday: [],
-      day: [],
-      month: [],
-      year: [],
-      separator: [],
-    };
-
-    const previewDate = new Date();
-    const previewTimeZone = resolveTimeZone(
-      this._i18n.locale.time_zone,
-      this._hassConfig.config.time_zone
-    );
-
-    CLOCK_CARD_DATE_PARTS.forEach((part) => {
-      const section = getClockDatePartSection(part);
-      const label =
-        this._i18n.localize(
-          `ui.panel.lovelace.editor.card.clock.date.parts.${part}`
-        ) ?? part;
-
-      const secondary =
-        section === "separator"
-          ? CLOCK_DATE_SEPARATOR_VALUES[part as ClockDateSeparatorPart]
-          : formatClockCardDate(
-              previewDate,
-              { parts: [part] },
-              this._i18n.locale.language,
-              previewTimeZone
-            );
-
-      itemsBySection[section].push({
-        id: part,
-        primary: label,
-        secondary,
-        sorting_label: label,
-      });
-    });
-
-    return CLOCK_DATE_PART_SECTION_ORDER.map((section) => ({
-      id: section,
-      title:
-        this._i18n.localize(
-          `ui.panel.lovelace.editor.card.clock.date.sections.${section}`
-        ) ?? section,
-      items: itemsBySection[section],
-    })).filter((section) => section.items.length > 0);
-  }
-
-  private _getSectionHeaders(
-    sections: ClockDatePartSectionData[]
-  ): { id: string; label: string }[] {
-    return sections.map((section) => ({
-      id: section.id,
-      label: section.title,
-    }));
-  }
-
-  private _getItems = memoizeOne(
-    (sections: ClockDatePartSectionData[]) =>
-      (
-        searchString?: string,
-        section?: string
-      ): (PickerComboBoxItem | string)[] => {
-        const normalizedSearch = searchString?.trim().toLowerCase();
-
-        const filteredSections = sections
-          .map((sectionData) => {
-            if (!normalizedSearch) {
-              return sectionData;
-            }
-
-            return {
-              ...sectionData,
-              items: sectionData.items.filter(
-                (item) =>
-                  item.primary.toLowerCase().includes(normalizedSearch) ||
-                  item.secondary?.toLowerCase().includes(normalizedSearch) ||
-                  item.id.toLowerCase().includes(normalizedSearch)
-              ),
-            };
-          })
-          .filter((sectionData) => sectionData.items.length > 0);
-
-        if (section) {
-          return (
-            filteredSections.find((candidate) => candidate.id === section)
-              ?.items || []
-          );
-        }
-
-        const groupedItems: (PickerComboBoxItem | string)[] = [];
-
-        filteredSections.forEach((sectionData) => {
-          groupedItems.push(sectionData.title, ...sectionData.items);
-        });
-
-        return groupedItems;
-      }
-  );
-
-  private _getItemLabel(
-    value: string,
-    sections: ClockDatePartSectionData[]
-  ): string | undefined {
-    for (const section of sections) {
-      const item = section.items.find((candidate) => candidate.id === value);
-
-      if (item) {
-        if (section.id === "separator") {
-          if (value === "separator-new-line") {
-            return item.primary;
-          }
-
-          return item.secondary ?? item.primary;
-        }
-
-        return `${item.secondary} [${item.primary} ${section.title}]`;
-      }
-    }
-
-    return undefined;
-  }
-
-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      return this._value[this._editIndex];
-    }
-
-    return undefined;
-  }
-
-  private async _moveItem(ev: CustomEvent) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-
-    const value = this._value;
-    const newValue = value.concat();
-    const element = newValue.splice(oldIndex, 1)[0];
-    newValue.splice(newIndex, 0, element);
-
-    this._setValue(newValue);
-  }
-
-  private async _removeItem(ev: Event) {
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
-      10
-    );
-
-    if (Number.isNaN(idx)) {
-      return;
-    }
-
-    const value = [...this._value];
-    value.splice(idx, 1);
-
-    if (this._editIndex !== undefined) {
-      if (this._editIndex === idx) {
-        this._editIndex = undefined;
-      } else if (this._editIndex > idx) {
-        this._editIndex -= 1;
-      }
-    }
-
-    this._setValue(value);
-  }
-
-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (this.disabled || !value) {
-      return;
-    }
-
-    const newValue = [...this._value];
-
-    if (this._editIndex != null) {
-      newValue[this._editIndex] = value;
-      this._editIndex = undefined;
-    } else {
-      newValue.push(value);
-    }
-
-    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
-  }
-
-  private _setValue(value: string[]) {
-    const newValue = this._toValue(value);
-    this.value = newValue;
-
-    fireEvent(this, "value-changed", {
-      value: newValue,
-    });
-  }
-
-  static styles = css`
-    :host {
-      position: relative;
-      width: 100%;
-    }
-
-    .container {
-      position: relative;
-      background-color: var(--mdc-text-field-fill-color, whitesmoke);
-      border-radius: var(--ha-border-radius-sm);
-      border-end-end-radius: var(--ha-border-radius-square);
-      border-end-start-radius: var(--ha-border-radius-square);
-    }
-
-    .container:after {
-      display: block;
-      content: "";
-      position: absolute;
-      pointer-events: none;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      width: 100%;
-      background-color: var(
-        --mdc-text-field-idle-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-      transition:
-        height 180ms ease-in-out,
-        background-color 180ms ease-in-out;
-    }
-
-    :host([disabled]) .container:after {
-      background-color: var(
-        --mdc-text-field-disabled-line-color,
-        rgba(0, 0, 0, 0.42)
-      );
-    }
-
-    .container:focus-within:after {
-      height: 2px;
-      background-color: var(--mdc-theme-primary);
-    }
-
-    label {
-      display: block;
-      margin: 0 0 var(--ha-space-2);
-    }
-
-    .add {
-      order: 1;
-    }
-
-    ha-chip-set {
-      padding: var(--ha-space-2);
-    }
-
-    .invalid {
-      text-decoration: line-through;
-    }
-
-    .sortable-fallback {
-      display: none;
-      opacity: 0;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
-
-    .sortable-drag {
-      cursor: grabbing;
-    }
-
-    ha-input-helper-text {
-      display: block;
-      margin: var(--ha-space-2) 0 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clock-date-format-picker": HaClockDateFormatPicker;
-  }
-}

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

@@ -181,49 +181,49 @@ export class HaSelectorSelector extends LitElement {
     return true;
   }
 
-  private _schema = memoizeOne((choice: string, localize: LocalizeFunc) => {
-    const schemas = SELECTOR_SCHEMAS[choice];
-    return [
-      {
-        name: "type",
-        required: true,
-        selector: {
-          select: {
-            mode: "dropdown",
-            options: Object.keys(SELECTOR_SCHEMAS)
-              .concat("manual")
-              .map((key) => ({
-                label:
-                  localize(
-                    `ui.components.selectors.selector.types.${key}` as LocalizeKeys
-                  ) || key,
-                value: key,
-              })),
+  private _schema = memoizeOne(
+    (choice: string, localize: LocalizeFunc) =>
+      [
+        {
+          name: "type",
+          required: true,
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: Object.keys(SELECTOR_SCHEMAS)
+                .concat("manual")
+                .map((key) => ({
+                  label:
+                    localize(
+                      `ui.components.selectors.selector.types.${key}` as LocalizeKeys
+                    ) || key,
+                  value: key,
+                })),
+            },
           },
         },
-      },
-      ...(choice === "manual"
-        ? ([
-            {
-              name: "manual",
-              selector: { object: {} },
-            },
-          ] as const)
-        : []),
-      ...(schemas
-        ? schemas.length > 1
-          ? [
+        ...(choice === "manual"
+          ? ([
               {
-                name: "",
-                type: "expandable",
-                title: localize("ui.components.selectors.selector.options"),
-                schema: schemas,
+                name: "manual",
+                selector: { object: {} },
               },
-            ]
-          : schemas
-        : []),
-    ] as const;
-  });
+            ] as const)
+          : []),
+        ...(SELECTOR_SCHEMAS[choice]
+          ? SELECTOR_SCHEMAS[choice].length > 1
+            ? [
+                {
+                  name: "",
+                  type: "expandable",
+                  title: localize("ui.components.selectors.selector.options"),
+                  schema: SELECTOR_SCHEMAS[choice],
+                },
+              ]
+            : SELECTOR_SCHEMAS[choice]
+          : []),
+      ] as const
+  );
 
   protected render() {
     let data;

src/components/ha-selector/ha-selector-ui-clock-date-format.ts

@@ -1,41 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { UiClockDateFormatSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-clock-date-format-picker";
-
-@customElement("ha-selector-ui_clock_date_format")
-export class HaSelectorUiClockDateFormat extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: UiClockDateFormatSelector;
-
-  @property() public value?: string | string[];
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-clock-date-format-picker
-        .hass=${this.hass}
-        .value=${this.value}
-        .label=${this.label}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-clock-date-format-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-ui_clock_date_format": HaSelectorUiClockDateFormat;
-  }
-}

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

@@ -65,7 +65,6 @@ const LOAD_ELEMENTS = {
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
-  ui_clock_date_format: () => import("./ha-selector-ui-clock-date-format"),
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
   ui_time_format: () => import("./ha-selector-ui-time-format"),

src/components/ha-service-control.ts

@@ -305,10 +305,6 @@ export class HaServiceControl extends LitElement {
     ) {
       return null;
     }
-    const isPrimaryEntity = (entityId: string) => {
-      const entity = this.hass.entities[entityId];
-      return !entity?.entity_category && !entity?.hidden;
-    };
     const targetEntities =
       ensureArray(
         value?.target?.entity_id || value?.data?.entity_id
@@ -337,7 +333,11 @@ export class HaServiceControl extends LitElement {
           targetSelector
         );
         targetDevices.push(...expanded.devices);
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
         targetEntities.push(primaryEntities);
         targetAreas.push(...expanded.areas);
       });
@@ -362,7 +362,11 @@ export class HaServiceControl extends LitElement {
           this.hass.entities,
           targetSelector
         );
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
         targetEntities.push(...primaryEntities);
         targetDevices.push(...expanded.devices);
       });
@@ -375,7 +379,11 @@ export class HaServiceControl extends LitElement {
           this.hass.entities,
           targetSelector
         );
-        const primaryEntities = expanded.entities.filter(isPrimaryEntity);
+        const primaryEntities = expanded.entities.filter(
+          (entityId) =>
+            !this.hass.entities[entityId]?.entity_category &&
+            !this.hass.entities[entityId]?.hidden
+        );
         targetEntities.push(...primaryEntities);
       });
     }

src/data/entity/entity_registry.ts

@@ -213,14 +213,12 @@ export const findBatteryEntity = <T extends { entity_id: string }>(
   entities: T[]
 ): T | undefined => {
   const batteryEntities = entities
-    .filter((entity) => {
-      const state = states[entity.entity_id];
-      return (
-        state &&
-        state.attributes.device_class === "battery" &&
+    .filter(
+      (entity) =>
+        states[entity.entity_id] &&
+        states[entity.entity_id].attributes.device_class === "battery" &&
         batteryPriorities.includes(computeDomain(entity.entity_id))
-      );
-    })
+    )
     .sort(
       (a, b) =>
         batteryPriorities.indexOf(computeDomain(a.entity_id)) -
@@ -237,10 +235,11 @@ export const findBatteryChargingEntity = <T extends { entity_id: string }>(
   states: HomeAssistant["states"],
   entities: T[]
 ): T | undefined =>
-  entities.find((entity) => {
-    const state = states[entity.entity_id];
-    return state && state.attributes.device_class === "battery_charging";
-  });
+  entities.find(
+    (entity) =>
+      states[entity.entity_id] &&
+      states[entity.entity_id].attributes.device_class === "battery_charging"
+  );
 
 export const computeEntityRegistryName = (
   hass: HomeAssistant,

src/data/hassio/common.ts

@@ -17,6 +17,9 @@ export interface HassioStats {
   network_tx: number;
 }
 
+export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
+  response.data;
+
 export const extractApiErrorMessage = (error: any): string =>
   typeof error === "object"
     ? typeof error.body === "object"

src/data/hassio/docker.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 type HassioDockerRegistries = Record<
   string,
@@ -7,32 +10,59 @@ type HassioDockerRegistries = Record<
 
 export const fetchHassioDockerRegistries = async (
   hass: HomeAssistant
-): Promise<HassioDockerRegistries> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/docker/registries`,
-    method: "get",
-  });
+): Promise<HassioDockerRegistries> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/docker/registries`,
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioDockerRegistries>>(
+      "GET",
+      "hassio/docker/registries"
+    )
+  );
+};
 
 export const addHassioDockerRegistry = async (
   hass: HomeAssistant,
   data: HassioDockerRegistries
 ) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/docker/registries`,
-    method: "post",
-    data,
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/docker/registries`,
+      method: "post",
+      data,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<HassioDockerRegistries>>(
+    "POST",
+    "hassio/docker/registries",
+    data
+  );
 };
 
 export const removeHassioDockerRegistry = async (
   hass: HomeAssistant,
   registry: string
 ) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/docker/registries/${registry}`,
-    method: "delete",
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/docker/registries/${registry}`,
+      method: "delete",
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>(
+    "DELETE",
+    `hassio/docker/registries/${registry}`
+  );
 };

src/data/hassio/hardware.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 export interface HassioHardwareAudioDevice {
   device?: string | null;
@@ -27,18 +30,38 @@ export interface HassioHardwareInfo {
 
 export const fetchHassioHardwareAudio = async (
   hass: HomeAssistant
-): Promise<HassioHardwareAudioList> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/hardware/audio`,
-    method: "get",
-  });
+): Promise<HassioHardwareAudioList> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/hardware/audio`,
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioHardwareAudioList>>(
+      "GET",
+      "hassio/hardware/audio"
+    )
+  );
+};
 
 export const fetchHassioHardwareInfo = async (
   hass: HomeAssistant
-): Promise<HassioHardwareInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/hardware/info`,
-    method: "get",
-  });
+): Promise<HassioHardwareInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/hardware/info`,
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioHardwareInfo>>(
+      "GET",
+      "hassio/hardware/info"
+    )
+  );
+};

src/data/hassio/host.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 export interface HassioHostInfo {
   agent_version: string;
@@ -51,86 +54,156 @@ export interface HostDisksUsage {
 
 export const fetchHassioHostInfo = async (
   hass: HomeAssistant
-): Promise<HassioHostInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/host/info",
-    method: "get",
-  });
+): Promise<HassioHostInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/host/info",
+      method: "get",
+    });
+  }
+
+  const response = await hass.callApi<HassioResponse<HassioHostInfo>>(
+    "GET",
+    "hassio/host/info"
+  );
+  return hassioApiResultExtractor(response);
+};
 
 export const fetchHassioHassOsInfo = async (
   hass: HomeAssistant
-): Promise<HassioHassOSInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/os/info",
-    method: "get",
-  });
+): Promise<HassioHassOSInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/os/info",
+      method: "get",
+    });
+  }
 
-export const rebootHost = async (hass: HomeAssistant) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/host/reboot",
-    method: "post",
-    timeout: null,
-  });
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioHassOSInfo>>(
+      "GET",
+      "hassio/os/info"
+    )
+  );
+};
 
-export const shutdownHost = async (hass: HomeAssistant) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/host/shutdown",
-    method: "post",
-    timeout: null,
-  });
+export const rebootHost = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/host/reboot",
+      method: "post",
+      timeout: null,
+    });
+  }
 
-export const updateOS = async (hass: HomeAssistant) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/os/update",
-    method: "post",
-    timeout: null,
-  });
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/reboot");
+};
 
-export const configSyncOS = async (hass: HomeAssistant) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/os/config/sync",
-    method: "post",
-    timeout: null,
-  });
+export const shutdownHost = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/host/shutdown",
+      method: "post",
+      timeout: null,
+    });
+  }
 
-export const changeHostOptions = async (hass: HomeAssistant, options: any) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/host/options",
-    method: "post",
-    data: options,
-  });
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/host/shutdown");
+};
 
-export const moveDatadisk = async (hass: HomeAssistant, device: string) =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/os/datadisk/move",
-    method: "post",
-    timeout: null,
-    data: { device },
-  });
+export const updateOS = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/os/update",
+      method: "post",
+      timeout: null,
+    });
+  }
+
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/update");
+};
+
+export const configSyncOS = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/os/config/sync",
+      method: "post",
+      timeout: null,
+    });
+  }
+
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/config/sync");
+};
+
+export const changeHostOptions = async (hass: HomeAssistant, options: any) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/host/options",
+      method: "post",
+      data: options,
+    });
+  }
+
+  return hass.callApi<HassioResponse<void>>(
+    "POST",
+    "hassio/host/options",
+    options
+  );
+};
+
+export const moveDatadisk = async (hass: HomeAssistant, device: string) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/os/datadisk/move",
+      method: "post",
+      timeout: null,
+      data: { device },
+    });
+  }
+
+  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/datadisk/move");
+};
 
 export const listDatadisks = async (
   hass: HomeAssistant
-): Promise<DatadiskList> =>
-  hass.callWS<DatadiskList>({
-    type: "supervisor/api",
-    endpoint: "/os/datadisk/list",
-    method: "get",
-    timeout: null,
-  });
+): Promise<DatadiskList> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS<DatadiskList>({
+      type: "supervisor/api",
+      endpoint: "/os/datadisk/list",
+      method: "get",
+      timeout: null,
+    });
+  }
 
-export const fetchHostDisksUsage = async (hass: HomeAssistant) =>
-  hass.callWS<HostDisksUsage>({
-    type: "supervisor/api",
-    endpoint: "/host/disks/default/usage",
-    method: "get",
-    timeout: 3600, // seconds. This can take a while
-    params: { max_depth: 3 },
-  });
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<DatadiskList>>("GET", "/os/datadisk/list")
+  );
+};
+
+export const fetchHostDisksUsage = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS<HostDisksUsage>({
+      type: "supervisor/api",
+      endpoint: "/host/disks/default/usage",
+      method: "get",
+      timeout: 3600, // seconds. This can take a while
+      params: { max_depth: 3 },
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HostDisksUsage>>(
+      "GET",
+      "hassio/host/disks/default/usage"
+    )
+  );
+};

src/data/hassio/ingress.ts

@@ -1,6 +1,9 @@
 import { getCollection, type Connection } from "home-assistant-js-websocket";
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
 import { supervisorApiWsRequest } from "../supervisor/supervisor";
+import type { HassioResponse } from "./common";
+import type { CreateSessionResponse } from "./supervisor";
 
 function setIngressCookie(session: string): string {
   document.cookie = `ingress_session=${session};path=/api/hassio_ingress/;SameSite=Strict${
@@ -10,14 +13,21 @@ function setIngressCookie(session: string): string {
 }
 
 export const createHassioSession = async (
-  hass: Pick<HomeAssistant, "callWS">
+  hass: HomeAssistant
 ): Promise<string> => {
-  const wsResponse: { session: string } = await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/ingress/session",
-    method: "post",
-  });
-  return setIngressCookie(wsResponse.session);
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    const wsResponse: { session: string } = await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/ingress/session",
+      method: "post",
+    });
+    return setIngressCookie(wsResponse.session);
+  }
+
+  const restResponse: { data: { session: string } } = await hass.callApi<
+    HassioResponse<CreateSessionResponse>
+  >("POST", "hassio/ingress/session");
+  return setIngressCookie(restResponse.data.session);
 };
 
 export interface IngressPanelInfo {
@@ -40,13 +50,22 @@ export const getIngressPanelInfoCollection = (conn: Connection) =>
   );
 
 export const validateHassioSession = async (
-  hass: Pick<HomeAssistant, "callWS">,
+  hass: HomeAssistant,
   session: string
 ): Promise<void> => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/ingress/validate_session",
-    method: "post",
-    data: { session },
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/ingress/validate_session",
+      method: "post",
+      data: { session },
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>(
+    "POST",
+    "hassio/ingress/validate_session",
+    { session }
+  );
 };

src/data/hassio/network.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 interface IpConfiguration {
   address: string[];
@@ -52,37 +55,66 @@ export interface NetworkInfo {
 
 export const fetchNetworkInfo = async (
   hass: HomeAssistant
-): Promise<NetworkInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/network/info",
-    method: "get",
-  });
+): Promise<NetworkInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/network/info",
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<NetworkInfo>>(
+      "GET",
+      "hassio/network/info"
+    )
+  );
+};
 
 export const updateNetworkInterface = async (
   hass: HomeAssistant,
   network_interface: string,
   options: Partial<NetworkInterface>
 ) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/network/interface/${network_interface}/update`,
-    method: "post",
-    data: options,
-    timeout: null,
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/network/interface/${network_interface}/update`,
+      method: "post",
+      data: options,
+      timeout: null,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<NetworkInfo>>(
+    "POST",
+    `hassio/network/interface/${network_interface}/update`,
+    options
+  );
 };
 
 export const accesspointScan = async (
   hass: HomeAssistant,
   network_interface: string
-): Promise<AccessPoints> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: `/network/interface/${network_interface}/accesspoints`,
-    method: "get",
-    timeout: null,
-  });
+): Promise<AccessPoints> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/network/interface/${network_interface}/accesspoints`,
+      method: "get",
+      timeout: null,
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<AccessPoints>>(
+      "GET",
+      `hassio/network/interface/${network_interface}/accesspoints`
+    )
+  );
+};
 
 export const parseAddress = (address: string) => {
   const [ip, cidr] = address.split("/");

src/data/hassio/resolution.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant, TranslationDict } from "../../types";
+import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 export interface HassioResolution {
   unsupported: (keyof TranslationDict["ui"]["dialogs"]["unsupported"]["reasons"])[];
@@ -9,9 +12,19 @@ export interface HassioResolution {
 
 export const fetchHassioResolution = async (
   hass: HomeAssistant
-): Promise<HassioResolution> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/resolution/info",
-    method: "get",
-  });
+): Promise<HassioResolution> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/resolution/info",
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioResolution>>(
+      "GET",
+      "hassio/resolution/info"
+    )
+  );
+};

src/data/hassio/supervisor.ts

@@ -1,6 +1,8 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import type { SupervisorArch } from "../supervisor/supervisor";
 import type { HassioResponse } from "./common";
+import { hassioApiResultExtractor } from "./common";
 
 export interface HassioHomeAssistantInfo {
   arch: SupervisorArch;
@@ -75,6 +77,10 @@ export type HassioPanelInfo = PanelInfo<
     }
 >;
 
+export interface CreateSessionResponse {
+  session: string;
+}
+
 export interface SupervisorOptions {
   channel?: "beta" | "dev" | "stable";
   diagnostics?: boolean;
@@ -82,57 +88,99 @@ export interface SupervisorOptions {
 }
 
 export const reloadSupervisor = async (hass: HomeAssistant) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/supervisor/reload",
-    method: "post",
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/supervisor/reload",
+      method: "post",
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/reload`);
 };
 
 export const restartSupervisor = async (hass: HomeAssistant) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/supervisor/restart",
-    method: "post",
-    timeout: null,
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/supervisor/restart",
+      method: "post",
+      timeout: null,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/restart`);
 };
 
 export const updateSupervisor = async (hass: HomeAssistant) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/supervisor/update",
-    method: "post",
-    timeout: null,
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/supervisor/update",
+      method: "post",
+      timeout: null,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/update`);
 };
 
 export const fetchHassioHomeAssistantInfo = async (
   hass: HomeAssistant
-): Promise<HassioHomeAssistantInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/core/info",
-    method: "get",
-  });
+): Promise<HassioHomeAssistantInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/core/info",
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioHomeAssistantInfo>>(
+      "GET",
+      "hassio/core/info"
+    )
+  );
+};
 
 export const fetchHassioSupervisorInfo = async (
   hass: HomeAssistant
-): Promise<HassioSupervisorInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/supervisor/info",
-    method: "get",
-  });
+): Promise<HassioSupervisorInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/supervisor/info",
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioSupervisorInfo>>(
+      "GET",
+      "hassio/supervisor/info"
+    )
+  );
+};
 
 export const fetchHassioInfo = async (
   hass: HomeAssistant
-): Promise<HassioInfo> =>
-  hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/info",
-    method: "get",
-  });
+): Promise<HassioInfo> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/info",
+      method: "get",
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioInfo>>("GET", "hassio/info")
+  );
+};
 
 export const fetchHassioBoots = async (hass: HomeAssistant) =>
   hass.callApi<HassioResponse<HassioBoots>>("GET", `hassio/host/logs/boots`);
@@ -215,12 +263,21 @@ export const setSupervisorOption = async (
   hass: HomeAssistant,
   data: SupervisorOptions
 ) => {
-  await hass.callWS({
-    type: "supervisor/api",
-    endpoint: "/supervisor/options",
-    method: "post",
-    data,
-  });
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/supervisor/options",
+      method: "post",
+      data,
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>(
+    "POST",
+    "hassio/supervisor/options",
+    data
+  );
 };
 
 export const coreLatestLogsUrl = "/api/hassio/core/logs/latest";

src/data/icons.ts

@@ -325,34 +325,35 @@ export const getCategoryIcons = async <
   domain?: string,
   force = false
 ): Promise<CategoryType[T] | Record<string, CategoryType[T]> | undefined> => {
-  const categoryResources = resources[category];
   if (!domain) {
-    if (!force && categoryResources.all) {
-      return categoryResources.all as Promise<Record<string, CategoryType[T]>>;
+    if (!force && resources[category].all) {
+      return resources[category].all as Promise<
+        Record<string, CategoryType[T]>
+      >;
     }
-    categoryResources.all = getHassIcons(connection, category).then((res) => {
-      categoryResources.domains = res.resources as any;
+    resources[category].all = getHassIcons(connection, category).then((res) => {
+      resources[category].domains = res.resources as any;
       return res?.resources as Record<string, CategoryType[T]>;
     }) as any;
-    return categoryResources.all as Promise<Record<string, CategoryType[T]>>;
+    return resources[category].all as Promise<Record<string, CategoryType[T]>>;
   }
-  if (!force && domain in categoryResources.domains) {
-    return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  if (!force && domain in resources[category].domains) {
+    return resources[category].domains[domain] as Promise<CategoryType[T]>;
   }
-  if (categoryResources.all && !force) {
-    await categoryResources.all;
-    if (domain in categoryResources.domains) {
-      return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  if (resources[category].all && !force) {
+    await resources[category].all;
+    if (domain in resources[category].domains) {
+      return resources[category].domains[domain] as Promise<CategoryType[T]>;
     }
   }
   if (!isComponentLoaded(hassConfig, domain)) {
     return undefined;
   }
   const result = getHassIcons(connection, category, domain);
-  categoryResources.domains[domain] = result.then(
+  resources[category].domains[domain] = result.then(
     (res) => res?.resources[domain]
   ) as any;
-  return categoryResources.domains[domain] as Promise<CategoryType[T]>;
+  return resources[category].domains[domain] as Promise<CategoryType[T]>;
 };
 
 export const getServiceIcons = async (

src/data/panel_custom.ts

@@ -7,11 +7,6 @@ export interface CustomPanelConfig {
   js_url?: string;
   module_url?: string;
   html_url?: string;
-  // When true, the panel takes care of the safe-area insets itself (e.g. it
-  // consumes the `--safe-area-inset-*` variables or draws into the safe area on
-  // purpose). Home Assistant then skips adding its own safe-area padding around
-  // the panel to avoid doubling the insets.
-  handle_safe_area?: boolean;
 }
 
 export type CustomPanelInfo<T = Record<string, unknown>> = PanelInfo<

src/data/selector.ts

@@ -80,7 +80,6 @@ export type Selector =
   | TTSVoiceSelector
   | SerialPortSelector
   | UiActionSelector
-  | UiClockDateFormatSelector
   | UiColorSelector
   | UiStateContentSelector
   | UiTimeFormatSelector
@@ -578,10 +577,6 @@ export interface UiActionSelector {
   } | null;
 }
 
-export interface UiClockDateFormatSelector {
-  ui_clock_date_format: {} | null;
-}
-
 export interface UiColorExtraOption {
   value: string;
   label: string;

src/data/supervisor/common.ts

@@ -1,4 +1,7 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "../hassio/common";
+import { hassioApiResultExtractor } from "../hassio/common";
 
 export interface SupervisorApiCallOptions {
   method?: "get" | "post" | "delete";
@@ -10,11 +13,23 @@ export const supervisorApiCall = async <T>(
   hass: HomeAssistant,
   endpoint: string,
   options?: SupervisorApiCallOptions
-): Promise<T> =>
-  hass.callWS<T>({
-    type: "supervisor/api",
-    endpoint,
-    method: options?.method || "get",
-    timeout: options?.timeout ?? null,
-    data: options?.data,
-  });
+): Promise<T> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    // Websockets was added in 2021.2.4
+    return hass.callWS<T>({
+      type: "supervisor/api",
+      endpoint,
+      method: options?.method || "get",
+      timeout: options?.timeout ?? null,
+      data: options?.data,
+    });
+  }
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<T>>(
+      // @ts-ignore
+      (options.method || "get").toUpperCase(),
+      `hassio${endpoint}`,
+      options?.data
+    )
+  );
+};

src/data/supervisor/core.ts

@@ -1,12 +1,32 @@
+import { atLeastVersion } from "../../common/config/version";
 import type { HomeAssistant } from "../../types";
+import type { HassioResponse } from "../hassio/common";
 
 export const restartCore = async (hass: HomeAssistant) => {
   await hass.callService("homeassistant", "restart");
 };
 
 export const updateCore = async (hass: HomeAssistant, backup: boolean) => {
-  await hass.callWS({
-    type: "hassio/update/core",
-    backup: backup,
+  if (atLeastVersion(hass.config.version, 2025, 2, 0)) {
+    await hass.callWS({
+      type: "hassio/update/core",
+      backup: backup,
+    });
+    return;
+  }
+
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: "/core/update",
+      method: "post",
+      timeout: null,
+      data: { backup },
+    });
+    return;
+  }
+
+  await hass.callApi<HassioResponse<void>>("POST", "hassio/core/update", {
+    backup,
   });
 };

src/dialogs/config-flow/step-flow-menu.ts

@@ -80,26 +80,27 @@ class StepFlowMenu extends LitElement {
     return html`
       ${description ? html`<div class="content">${description}</div>` : nothing}
       <div class="options">
-        ${options.map((option) => {
-          const optionDescription = optionDescriptions[option];
-          return html`
+        ${options.map(
+          (option) => html`
             <ha-list-item
               hasMeta
               .step=${option}
               @click=${this._handleStep}
-              ?twoline=${optionDescription}
-              ?multiline-secondary=${optionDescription}
+              ?twoline=${optionDescriptions[option]}
+              ?multiline-secondary=${optionDescriptions[option]}
             >
               <span>${translations[option]}</span>
               ${
-                optionDescription
-                  ? html`<span slot="secondary"> ${optionDescription} </span>`
+                optionDescriptions[option]
+                  ? html`<span slot="secondary">
+                      ${optionDescriptions[option]}
+                    </span>`
                   : nothing
               }
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
-          `;
-        })}
+          `
+        )}
       </div>
     `;
   }

src/dialogs/http-pending-config/dialog-http-pending-config.ts

@@ -322,8 +322,6 @@ export class DialogHttpPendingConfig
       ul {
         margin: 0 0 var(--ha-space-4) 0;
         padding-left: var(--ha-space-6);
-        padding-inline-start: var(--ha-space-6);
-        padding-inline-end: initial;
         color: var(--secondary-text-color);
       }
       li {

src/fake_data/provide_hass.ts

@@ -33,12 +33,7 @@ import {
   TimeZone,
 } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
-import type {
-  HomeAssistant,
-  Resources,
-  ThemeSettings,
-  ValuePart,
-} from "../types";
+import type { HomeAssistant, Resources, ValuePart } from "../types";
 import { getLocalLanguage, getTranslation } from "../util/common-translation";
 import { demoConfig } from "./demo_config";
 import { demoPanels } from "./demo_panels";
@@ -88,10 +83,7 @@ export interface MockHomeAssistant extends HomeAssistant {
     loader: () => Promise<unknown>
   );
   mockEvent(event);
-  mockTheme(
-    theme: Record<string, string> | null,
-    selectedTheme?: ThemeSettings
-  );
+  mockTheme(theme: Record<string, string> | null);
   formatEntityState(stateObj: HassEntity, state?: string): string;
   formatEntityStateToParts(stateObj: HassEntity, state?: string): ValuePart[];
   formatEntityAttributeValue(
@@ -511,35 +503,25 @@ export const provideHass = (
     },
     mockAPI,
     mockEvent(event) {
-      (eventListeners[event] || []).forEach((fn) => {
-        fn(event);
-      });
+      (eventListeners[event] || []).forEach((fn) => fn(event));
     },
-    mockTheme(theme, selectedTheme) {
+    mockTheme(theme) {
       invalidateThemeCache();
-      selectedTheme ??= {
-        theme: theme ? "fake-data" : "default",
-        dark: false,
-      };
-      const themeName = selectedTheme.theme;
-      const darkMode =
-        selectedTheme.dark ??
-        matchMedia("(prefers-color-scheme: dark)").matches;
       hass().updateHass({
-        selectedTheme,
+        selectedTheme: { theme: theme ? "mock" : "default", dark: false },
         themes: {
           ...hass().themes,
-          darkMode,
-          theme: themeName,
-          themes: theme ? { [themeName]: theme as any } : {},
+          themes: {
+            mock: theme as any,
+          },
         },
       });
-      const { themes } = hass();
+      const { themes, selectedTheme } = hass();
       applyThemesOnElement(
         document.documentElement,
         themes,
-        themeName,
-        { ...selectedTheme, dark: darkMode },
+        selectedTheme!.theme,
+        { dark: false },
         true
       );
     },

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

@@ -53,11 +53,6 @@ class HaPanelApp extends LitElement {
 
   @state() private _iframeLoaded = false;
 
-  // Set when the addon signals (via subscribe-properties) that it handles the
-  // safe-area insets itself. We then stop padding the iframe and forward the
-  // inset values so the addon can draw into the safe area.
-  @state() private _handleSafeArea = false;
-
   private _enabledKioskMode = false;
 
   private _sessionKeepAlive?: number;
@@ -93,13 +88,11 @@ class HaPanelApp extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
     window.addEventListener("message", this._handleIframeMessage);
-    window.addEventListener("resize", this._handleResize);
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("message", this._handleIframeMessage);
-    window.removeEventListener("resize", this._handleResize);
 
     if (this._sessionKeepAlive) {
       clearInterval(this._sessionKeepAlive);
@@ -142,7 +135,6 @@ class HaPanelApp extends LitElement {
         class=${classMap({
           loaded: this._iframeLoaded,
           "kiosk-mode": this._kioskMode,
-          "handle-safe-area": this._handleSafeArea,
         })}
         title=${this._addon.name}
         src=${this._addon.ingress_url!}
@@ -187,7 +179,6 @@ class HaPanelApp extends LitElement {
         this._enabledKioskMode = false;
       }
       this._iframeSubscribeUpdates = false;
-      this._handleSafeArea = false;
       this._autoRetryUntil = undefined;
       this._fetchData(addon);
     }
@@ -425,9 +416,6 @@ class HaPanelApp extends LitElement {
 
       case "home-assistant/subscribe-properties":
         this._iframeSubscribeUpdates = true;
-        // An addon can opt out of the container padding and take care of the
-        // safe area itself; we then forward the inset values below.
-        this._handleSafeArea = !!data.handleSafeArea;
         this._sendPropertiesToIframe();
         if (data.kioskMode && !this.hass.kioskMode) {
           this._enabledKioskMode = true;
@@ -437,7 +425,6 @@ class HaPanelApp extends LitElement {
 
       case "home-assistant/unsubscribe-properties":
         this._iframeSubscribeUpdates = false;
-        this._handleSafeArea = false;
         if (this._enabledKioskMode) {
           fireEvent(window, "hass-kiosk-mode", { enable: false });
           this._enabledKioskMode = false;
@@ -446,38 +433,16 @@ class HaPanelApp extends LitElement {
     }
   };
 
-  // Safe-area insets can change on orientation change; keep a subscribing
-  // addon in sync.
-  private _handleResize = () => {
-    if (this._iframeSubscribeUpdates) {
-      this._sendPropertiesToIframe();
-    }
-  };
-
   private _sendPropertiesToIframe() {
     if (!this._iframeRef.value?.contentWindow) {
       return;
     }
 
-    const styles = getComputedStyle(this);
     this._iframeRef.value.contentWindow.postMessage(
       {
         type: "home-assistant/properties",
         narrow: this.narrow,
         route: this._computeRouteTail(this.route),
-        // Resolved insets so an addon that handles the safe area itself can
-        // apply them. Vertical uses the raw insets, horizontal the content
-        // variables (the docked sidebar already absorbs its side).
-        safeAreaInsets: {
-          top: styles.getPropertyValue("--safe-area-inset-top").trim(),
-          right:
-            styles.getPropertyValue("--safe-area-content-inset-right").trim() ||
-            styles.getPropertyValue("--safe-area-inset-right").trim(),
-          bottom: styles.getPropertyValue("--safe-area-inset-bottom").trim(),
-          left:
-            styles.getPropertyValue("--safe-area-content-inset-left").trim() ||
-            styles.getPropertyValue("--safe-area-inset-left").trim(),
-        },
       },
       "*"
     );
@@ -497,38 +462,30 @@ class HaPanelApp extends LitElement {
       inset: 0;
     }
 
-    /* Keep the addon iframe clear of the device safe areas. CSS variables don't
-       cross the iframe boundary, so this padding on the iframe element is the
-       only way to inset the embedded document. Vertical uses the raw insets;
-       horizontal uses the content variables, since the docked sidebar already
-       absorbs the inset on its side (avoids doubling it). */
     iframe {
       display: block;
-      box-sizing: border-box;
       width: 100%;
       height: 100%;
       border: 0;
       background-color: var(--primary-background-color);
       opacity: 0;
       transition: opacity var(--ha-animation-duration-normal) ease;
-      padding: var(--safe-area-inset-top)
-        var(--safe-area-content-inset-right, var(--safe-area-inset-right))
-        var(--safe-area-inset-bottom)
-        var(--safe-area-content-inset-left, var(--safe-area-inset-left));
     }
 
     iframe.loaded {
       opacity: 1;
     }
 
-    /* The addon takes care of the safe area itself (it receives the insets via
-       postMessage), so drop the container padding to let it draw full-bleed. */
-    iframe.handle-safe-area {
-      padding: 0;
+    .header + iframe {
+      height: calc(100% - 40px);
     }
 
-    /* When the header is shown it already covers the top inset. */
-    .header + iframe {
+    :host([narrow]) iframe {
+      padding-top: var(--safe-area-inset-top);
+      height: calc(100% - var(--safe-area-inset-top, 0px));
+    }
+
+    :host([narrow]) .header + iframe {
       padding-top: 0;
       height: calc(100% - 40px - var(--safe-area-inset-top, 0px));
     }
@@ -537,17 +494,8 @@ class HaPanelApp extends LitElement {
       display: flex;
       align-items: center;
       font-size: var(--ha-font-size-l);
-      height: calc(40px + var(--safe-area-inset-top, 0px));
-      padding: var(--safe-area-inset-top)
-        calc(
-          16px +
-            var(--safe-area-content-inset-right, var(--safe-area-inset-right))
-        )
-        0
-        calc(
-          16px +
-            var(--safe-area-content-inset-left, var(--safe-area-inset-left))
-        );
+      height: 40px;
+      padding: 0 16px;
       pointer-events: none;
       background-color: var(--app-header-background-color);
       font-weight: var(--ha-font-weight-normal);
@@ -557,6 +505,11 @@ class HaPanelApp extends LitElement {
       --mdc-icon-size: 20px;
     }
 
+    :host([narrow]) .header {
+      height: calc(40px + var(--safe-area-inset-top, 0px));
+      padding-top: var(--safe-area-inset-top, 0);
+    }
+
     .main-title {
       margin-inline-start: var(--ha-space-6);
       line-height: var(--ha-line-height-condensed);

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -321,10 +321,11 @@ export default class HaAutomationAddFromTarget extends LitElement {
 
       const floorAreas = emptyFloors
         ? undefined
-        : this._floorAreas.map((floor, index) => {
-            const floorEntry = entries[floor.id || `floor${TARGET_SEPARATOR}`];
-            return index === 0 && !floor.id
-              ? this._renderAreas(floorEntry.areas!)
+        : this._floorAreas.map((floor, index) =>
+            index === 0 && !floor.id
+              ? this._renderAreas(
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                )
               : this._renderItem(
                   !floor.id
                     ? this._i18n.localize(
@@ -334,14 +335,19 @@ export default class HaAutomationAddFromTarget extends LitElement {
                   floor.id || `floor${TARGET_SEPARATOR}`,
                   !floor.id,
                   !!floor.id && this._getSelectedTargetId(value) === floor.id,
-                  !floorEntry.open && !!Object.keys(floorEntry.areas!).length,
-                  floorEntry.open,
+                  !entries[floor.id || `floor${TARGET_SEPARATOR}`].open &&
+                    !!Object.keys(
+                      entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                    ).length,
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].open,
                   this._renderFloorIcon(floor as FloorNestedComboBoxItem),
-                  floorEntry.open
-                    ? this._renderAreas(floorEntry.areas!)
+                  entries[floor.id || `floor${TARGET_SEPARATOR}`].open
+                    ? this._renderAreas(
+                        entries[floor.id || `floor${TARGET_SEPARATOR}`].areas!
+                      )
                     : undefined
-                );
-          });
+                )
+          );
 
       return html`<ha-section-title
           >${this._i18n.localize(
@@ -505,69 +511,81 @@ export default class HaAutomationAddFromTarget extends LitElement {
       const items: TemplateResult[] = [];
 
       if (unassignedEntitiesLength) {
-        const entry = entries[`device${TARGET_SEPARATOR}`];
+        const open = entries[`device${TARGET_SEPARATOR}`].open;
         items.push(
           this._renderItem(
             this._i18n.localize("ui.components.target-picker.type.entities"),
             `device${TARGET_SEPARATOR}`,
             true,
             false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
             undefined,
-            entry.open
-              ? this._renderDomains(entry.devices!, "entity_")
+            entries[`device${TARGET_SEPARATOR}`].open
+              ? this._renderDomains(
+                  entries[`device${TARGET_SEPARATOR}`].devices!,
+                  "entity_"
+                )
               : undefined
           )
         );
       }
 
       if (unassignedHelpersLength) {
-        const entry = entries[`helper${TARGET_SEPARATOR}`];
+        const open = entries[`helper${TARGET_SEPARATOR}`].open;
         items.push(
           this._renderItem(
             this._i18n.localize("ui.panel.config.automation.editor.helpers"),
             `helper${TARGET_SEPARATOR}`,
             true,
             false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
             undefined,
-            entry.open
-              ? this._renderDomains(entry.devices!, "helper_")
+            entries[`helper${TARGET_SEPARATOR}`].open
+              ? this._renderDomains(
+                  entries[`helper${TARGET_SEPARATOR}`].devices!,
+                  "helper_"
+                )
               : undefined
           )
         );
       }
 
       if (unassignedDevicesLength) {
-        const entry = entries[`area${TARGET_SEPARATOR}`];
+        const open = entries[`area${TARGET_SEPARATOR}`].open;
         items.push(
           this._renderItem(
             this._i18n.localize("ui.components.target-picker.type.devices"),
             `area${TARGET_SEPARATOR}`,
             true,
             false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
             undefined,
-            entry.open ? this._renderDevices(entry.devices!) : undefined
+            entries[`area${TARGET_SEPARATOR}`].open
+              ? this._renderDevices(entries[`area${TARGET_SEPARATOR}`].devices!)
+              : undefined
           )
         );
       }
 
       if (unassignedServicesLength) {
-        const entry = entries[`service${TARGET_SEPARATOR}`];
+        const open = entries[`service${TARGET_SEPARATOR}`].open;
         items.push(
           this._renderItem(
             this._i18n.localize("ui.panel.config.automation.editor.services"),
             `service${TARGET_SEPARATOR}`,
             true,
             false,
-            !entry.open,
-            entry.open,
+            !open,
+            open,
             undefined,
-            entry.open ? this._renderDevices(entry.devices!) : undefined
+            entries[`service${TARGET_SEPARATOR}`].open
+              ? this._renderDevices(
+                  entries[`service${TARGET_SEPARATOR}`].devices!
+                )
+              : undefined
           )
         );
       }

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -386,9 +386,9 @@ export class EntityRegistrySettingsEditor extends LitElement {
 
     this._dirtyState?.setState(
       {
-        name: this._name || null,
-        icon: this._icon || null,
-        entityId: this._entityId,
+        name: this._name.trim() || null,
+        icon: this._icon.trim() || null,
+        entityId: this._entityId.trim(),
         areaId: this._areaId ?? null,
         labels: this._labels ?? [],
         deviceClass: this._deviceClass,

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

@@ -214,14 +214,13 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
 
       for (const component of components) {
         const componentDomain = component.split(".")[0];
-        const manifest = manifests[componentDomain];
         if (
           !entryDomains.has(componentDomain) &&
-          manifest &&
-          !manifest.config_flow &&
-          (!manifest.integration_type ||
+          manifests[componentDomain] &&
+          !manifests[componentDomain].config_flow &&
+          (!manifests[componentDomain].integration_type ||
             ["device", "hub", "service", "integration"].includes(
-              manifest.integration_type!
+              manifests[componentDomain].integration_type!
             ))
         ) {
           domains.add(componentDomain);

src/panels/config/network/supervisor-network.ts

@@ -635,13 +635,16 @@ export class HassioNetwork extends LitElement {
     const value = source.value as "disabled" | "auto" | "static";
     const version = (source as any).version as "ipv4" | "ipv6";
 
-    const iface = this._interface?.[version];
-    if (!value || !iface || iface.method === value) {
+    if (
+      !value ||
+      !this._interface ||
+      this._interface[version]!.method === value
+    ) {
       return;
     }
     this._dirty = true;
 
-    iface.method = value;
+    this._interface[version]!.method = value;
     this.requestUpdate("_interface");
   }
 
@@ -659,8 +662,7 @@ export class HassioNetwork extends LitElement {
     const version = (ev.target as any).version as "ipv4" | "ipv6";
     const id = source.id;
 
-    const iface = this._interface?.[version];
-    if (!value || !iface) {
+    if (!value || !this._interface?.[version]) {
       source.reportValidity();
       return;
     }
@@ -668,26 +670,31 @@ export class HassioNetwork extends LitElement {
     this._dirty = true;
     if (id === "address") {
       const index = (ev.target as any).index as number;
-      const { mask: oldMask } = parseAddress(iface.address![index]);
+      const { mask: oldMask } = parseAddress(
+        this._interface[version].address![index]
+      );
       const { mask } = parseAddress(value);
-      iface.address![index] = formatAddress(value, mask || oldMask || "");
+      this._interface[version].address![index] = formatAddress(
+        value,
+        mask || oldMask || ""
+      );
       this.requestUpdate("_interface");
     } else if (id === "netmask") {
       const index = (ev.target as any).index as number;
-      const { ip } = parseAddress(iface.address![index]);
-      iface.address![index] = formatAddress(ip, value);
+      const { ip } = parseAddress(this._interface[version].address![index]);
+      this._interface[version].address![index] = formatAddress(ip, value);
       this.requestUpdate("_interface");
     } else if (id === "prefix") {
       const index = (ev.target as any).index as number;
-      const { ip } = parseAddress(iface.address![index]);
-      iface.address![index] = `${ip}/${value}`;
+      const { ip } = parseAddress(this._interface[version].address![index]);
+      this._interface[version].address![index] = `${ip}/${value}`;
       this.requestUpdate("_interface");
     } else if (id === "nameserver") {
       const index = (ev.target as any).index as number;
-      iface.nameservers![index] = value;
+      this._interface[version].nameservers![index] = value;
       this.requestUpdate("_interface");
     } else {
-      iface[id] = value;
+      this._interface[version][id] = value;
     }
   }
 

src/panels/config/repairs/dialog-system-information.ts

@@ -326,11 +326,13 @@ class DialogSystemInformation extends LitElement {
         const keys: TemplateResult[] = [];
 
         for (const key of Object.keys(domainInfo.info)) {
-          const infoValue = domainInfo.info[key];
           let value: unknown;
 
-          if (infoValue && typeof infoValue === "object") {
-            const info = infoValue as SystemCheckValueObject;
+          if (
+            domainInfo.info[key] &&
+            typeof domainInfo.info[key] === "object"
+          ) {
+            const info = domainInfo.info[key] as SystemCheckValueObject;
 
             if (info.type === "pending") {
               value = html` <ha-spinner size="small"></ha-spinner> `;
@@ -361,7 +363,7 @@ class DialogSystemInformation extends LitElement {
               );
             }
           } else {
-            value = infoValue;
+            value = domainInfo.info[key];
           }
 
           keys.push(html`
@@ -429,11 +431,10 @@ class DialogSystemInformation extends LitElement {
       ];
 
       for (const key of Object.keys(domainInfo.info)) {
-        const infoValue = domainInfo.info[key];
         let value: unknown;
 
-        if (infoValue && typeof infoValue === "object") {
-          const info = infoValue as SystemCheckValueObject;
+        if (domainInfo.info[key] && typeof domainInfo.info[key] === "object") {
+          const info = domainInfo.info[key] as SystemCheckValueObject;
 
           if (info.type === "pending") {
             value = "pending";
@@ -447,7 +448,7 @@ class DialogSystemInformation extends LitElement {
             );
           }
         } else {
-          value = infoValue;
+          value = domainInfo.info[key];
         }
         if (first) {
           parts.push(`${key} | ${value}\n-- | --`);

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

@@ -36,11 +36,6 @@ export class HaPanelCustom extends ReactiveElement {
 
   private _wasDisconnected = false;
 
-  // Set for embedded-iframe panels that opt out of the container padding via
-  // `handle_safe_area`; we then inject the resolved insets into the (same
-  // origin) iframe document so the panel can consume `--safe-area-inset-*`.
-  private _syncSafeArea = false;
-
   protected createRenderRoot() {
     return this;
   }
@@ -59,14 +54,10 @@ export class HaPanelCustom extends ReactiveElement {
     });
     this._setProperties = setProperties;
     this.querySelector("iframe")?.classList.add("loaded");
-    // registerIframe also fires on the iframe's `pageshow`, so this re-applies
-    // the insets after an internal reload.
-    this._syncSafeAreaToIframe();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("resize", this._handleResize);
     // Only rebuild when reattached after a real disconnect (the 5-minute
     // suspendWhenHidden timer in partial-panel-resolver). On first mount,
     // update() handles creation via the panel-changed branch, so calling
@@ -79,51 +70,10 @@ export class HaPanelCustom extends ReactiveElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("resize", this._handleResize);
     this._wasDisconnected = true;
     this._cleanupPanel();
   }
 
-  // Safe-area insets can change on orientation change; keep the embedded
-  // document in sync.
-  private _handleResize = () => {
-    this._syncSafeAreaToIframe();
-  };
-
-  private _syncSafeAreaToIframe() {
-    if (!this._syncSafeArea) {
-      return;
-    }
-    const root =
-      this.querySelector("iframe")?.contentWindow?.document?.documentElement;
-    if (!root) {
-      return;
-    }
-    // CSS variables don't cross the iframe boundary, so copy the resolved
-    // values onto the (same-origin) iframe document. Vertical uses the raw
-    // insets, horizontal the content variables (the sidebar already absorbs
-    // its side).
-    const styles = getComputedStyle(this);
-    root.style.setProperty(
-      "--safe-area-inset-top",
-      styles.getPropertyValue("--safe-area-inset-top").trim()
-    );
-    root.style.setProperty(
-      "--safe-area-inset-bottom",
-      styles.getPropertyValue("--safe-area-inset-bottom").trim()
-    );
-    root.style.setProperty(
-      "--safe-area-inset-left",
-      styles.getPropertyValue("--safe-area-content-inset-left").trim() ||
-        styles.getPropertyValue("--safe-area-inset-left").trim()
-    );
-    root.style.setProperty(
-      "--safe-area-inset-right",
-      styles.getPropertyValue("--safe-area-content-inset-right").trim() ||
-        styles.getPropertyValue("--safe-area-inset-right").trim()
-    );
-  }
-
   protected update(changedProps: PropertyValues<this>) {
     super.update(changedProps);
     if (changedProps.has("panel")) {
@@ -151,7 +101,6 @@ export class HaPanelCustom extends ReactiveElement {
   private _cleanupPanel() {
     delete window.customPanel;
     this._setProperties = undefined;
-    this._syncSafeArea = false;
     while (this.lastChild) {
       this.removeChild(this.lastChild);
     }
@@ -163,30 +112,6 @@ export class HaPanelCustom extends ReactiveElement {
     const config = panel.config!._panel_custom;
     const panelUrl = getUrl(config);
 
-    // Keep the panel content clear of the device safe areas (status bar, home
-    // indicator, notch). Panels rendered in light DOM inherit the
-    // `--safe-area-inset-*` variables but most don't consume them, so we apply
-    // the padding on the container as a safe baseline. The embedded-iframe
-    // branch below applies the equivalent padding on the iframe instead. Panels
-    // that manage the safe area themselves can opt out via `handle_safe_area`.
-    const applySafeArea = !config.handle_safe_area;
-    // For opted-out embedded-iframe panels we inject the insets into the iframe
-    // document instead of padding it (see _syncSafeAreaToIframe).
-    this._syncSafeArea = !applySafeArea && !!config.embed_iframe;
-    if (applySafeArea && !config.embed_iframe) {
-      this.style.display = "block";
-      this.style.boxSizing = "border-box";
-      // Vertical insets aren't absorbed by any chrome around the panel, so use
-      // the raw insets. Horizontal uses the (physical) content variables, since
-      // the sidebar already absorbs the inset on its side (avoids doubling it).
-      this.style.paddingTop = "var(--safe-area-inset-top)";
-      this.style.paddingBottom = "var(--safe-area-inset-bottom)";
-      this.style.paddingLeft =
-        "var(--safe-area-content-inset-left, var(--safe-area-inset-left))";
-      this.style.paddingRight =
-        "var(--safe-area-content-inset-right, var(--safe-area-inset-right))";
-    }
-
     const tempA = document.createElement("a");
     tempA.href = panelUrl.url;
 
@@ -243,26 +168,14 @@ export class HaPanelCustom extends ReactiveElement {
 
     window.customPanel = this;
     const titleAttr = this.panel.title ? `title="${this.panel.title}"` : "";
-    // Pad the iframe (not the host) with the safe-area insets so the embedded
-    // document stays clear of the device safe areas. CSS variables don't cross
-    // the iframe boundary, so this container padding is the baseline; panels
-    // that handle it themselves opt out via `handle_safe_area`.
-    const safeAreaPadding = applySafeArea
-      ? `padding: var(--safe-area-inset-top)
-            var(--safe-area-content-inset-right, var(--safe-area-inset-right))
-            var(--safe-area-inset-bottom)
-            var(--safe-area-content-inset-left, var(--safe-area-inset-left));`
-      : "";
     this.innerHTML = `
       <style>
         iframe {
           border: none;
-          box-sizing: border-box;
           width: 100%;
           height: 100vh;
           height: 100dvh;
           display: block;
-          ${safeAreaPadding}
           background-color: var(--primary-background-color);
           opacity: 0;
           transition: opacity var(--ha-animation-duration-normal) ease;

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

@@ -128,13 +128,19 @@ class HaPanelHistory extends LitElement {
         <h1 class="page-title" slot="title">
           ${this.hass.localize("panel.history")}
         </h1>
-        <ha-icon-button
-          slot="actionItems"
-          @click=${this._removeAll}
-          .disabled=${this._isLoading || !entitiesSelected}
-          .path=${mdiFilterRemove}
-          .label=${this.hass.localize("ui.panel.history.remove_all")}
-        ></ha-icon-button>
+        ${
+          entitiesSelected
+            ? html`
+                <ha-icon-button
+                  slot="actionItems"
+                  @click=${this._removeAll}
+                  .disabled=${this._isLoading}
+                  .path=${mdiFilterRemove}
+                  .label=${this.hass.localize("ui.panel.history.remove_all")}
+                ></ha-icon-button>
+              `
+            : ""
+        }
         <ha-dropdown slot="actionItems" @wa-select=${this._handleMenuAction}>
           <ha-icon-button
             slot="trigger"

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

@@ -49,13 +49,10 @@ class HaPanelIframe extends LitElement {
   }
 
   static styles = css`
-    /* Fill hass-subpage's content box, which already excludes the safe-area
-       insets (see hass-subpage .content), instead of positioning absolutely
-       and spilling into the bottom/side insets. */
     iframe {
       border: 0;
-      display: block;
       width: 100%;
+      position: absolute;
       height: 100%;
       background-color: var(--primary-background-color);
     }

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

@@ -1,4 +1,4 @@
-import { mdiFilterRemove, mdiRefresh } from "@mdi/js";
+import { mdiRefresh } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
@@ -16,7 +16,6 @@ import {
   extractSearchParamsObject,
   removeSearchParam,
 } from "../../common/url/search-params";
-import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/date-picker/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-target-picker";
@@ -28,11 +27,6 @@ import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "./ha-logbook";
 
-interface LogbookState {
-  time: { range: [Date, Date] };
-  targetPickerValue: HassServiceTarget;
-}
-
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -60,7 +54,14 @@ export class HaPanelLogbook extends LitElement {
 
   public constructor() {
     super();
-    this._time = this._defaultState.time;
+
+    const start = new Date();
+    start.setHours(start.getHours() - 1, 0, 0, 0);
+
+    const end = new Date();
+    end.setHours(end.getHours() + 2, 0, 0, 0);
+
+    this._time = { range: [start, end] };
   }
 
   protected render() {
@@ -70,13 +71,6 @@ export class HaPanelLogbook extends LitElement {
         .backButton=${!!this._showBack}
       >
         <div slot="title">${this.hass.localize("panel.logbook")}</div>
-        <ha-icon-button
-          slot="actionItems"
-          @click=${this._resetLogbook}
-          .disabled=${this._isDefaultState()}
-          .path=${mdiFilterRemove}
-          .label=${this.hass.localize("ui.common.reset")}
-        ></ha-icon-button>
         <ha-icon-button
           slot="actionItems"
           @click=${this._refreshLogbook}
@@ -236,34 +230,6 @@ export class HaPanelLogbook extends LitElement {
     );
   }
 
-  private get _defaultState(): LogbookState {
-    const start = new Date();
-    start.setHours(start.getHours() - 1, 0, 0, 0);
-
-    const end = new Date();
-    end.setHours(end.getHours() + 2, 0, 0, 0);
-
-    return {
-      time: { range: [start, end] },
-      targetPickerValue: {},
-    };
-  }
-
-  private _isDefaultState(): boolean {
-    return deepEqual(
-      { time: this._time, targetPickerValue: this._targetPickerValue },
-      this._defaultState
-    );
-  }
-
-  private _resetLogbook() {
-    const defaultState = this._defaultState;
-    this._time = defaultState.time;
-    this._targetPickerValue = defaultState.targetPickerValue;
-    this._storedTargetPickerValue = undefined;
-    navigate("/logbook", { replace: true });
-  }
-
   private _refreshLogbook() {
     this.shadowRoot!.querySelector("ha-logbook")?.refresh();
   }

src/panels/lovelace/cards/clock/clock-date-format.ts

@@ -1,243 +0,0 @@
-import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
-import type { HomeAssistant } from "../../../../types";
-import type { ClockCardConfig, ClockCardDatePart } from "../types";
-
-type ClockCardSeparatorPart = Extract<
-  ClockCardDatePart,
-  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
->;
-
-type ClockCardValuePart = Exclude<ClockCardDatePart, ClockCardSeparatorPart>;
-
-/**
- * Normalized date configuration used by clock card renderers.
- */
-interface ClockCardDateConfig {
-  parts: ClockCardDatePart[];
-}
-
-/**
- * Resolves the locale and time zone for a clock card from `hass` and the
- * card's configuration. Applies the optional `time_format` override to the
- * locale and falls back to the user's preferred time zone.
- */
-export const resolveClockCardLocale = (
-  hass: HomeAssistant,
-  config: Pick<ClockCardConfig, "time_format" | "time_zone">
-): { locale: HomeAssistant["locale"]; timeZone: string } => {
-  const locale = config.time_format
-    ? { ...hass.locale, time_format: config.time_format }
-    : hass.locale;
-
-  const timeZone =
-    config.time_zone ||
-    resolveTimeZone(locale.time_zone, hass.config?.time_zone);
-
-  return { locale, timeZone };
-};
-
-/**
- * All selectable date tokens exposed by the clock card editor.
- */
-export const CLOCK_CARD_DATE_PARTS: readonly ClockCardDatePart[] = [
-  "weekday-short",
-  "weekday-long",
-  "day-numeric",
-  "day-2-digit",
-  "month-short",
-  "month-long",
-  "month-numeric",
-  "month-2-digit",
-  "year-2-digit",
-  "year-numeric",
-  "separator-dash",
-  "separator-slash",
-  "separator-dot",
-  "separator-new-line",
-];
-
-const DATE_PART_OPTIONS: Record<
-  ClockCardValuePart,
-  Pick<Intl.DateTimeFormatOptions, "weekday" | "day" | "month" | "year">
-> = {
-  "weekday-short": { weekday: "short" },
-  "weekday-long": { weekday: "long" },
-  "day-numeric": { day: "numeric" },
-  "day-2-digit": { day: "2-digit" },
-  "month-short": { month: "short" },
-  "month-long": { month: "long" },
-  "month-numeric": { month: "numeric" },
-  "month-2-digit": { month: "2-digit" },
-  "year-2-digit": { year: "2-digit" },
-  "year-numeric": { year: "numeric" },
-};
-
-const DATE_SEPARATORS: Record<ClockCardSeparatorPart, string> = {
-  "separator-dash": "-",
-  "separator-slash": "/",
-  "separator-dot": ".",
-  "separator-new-line": "\n",
-};
-
-const DATE_SEPARATOR_PARTS = new Set<ClockCardSeparatorPart>([
-  "separator-dash",
-  "separator-slash",
-  "separator-dot",
-  "separator-new-line",
-]);
-
-const DATE_PART_FORMATTERS = new Map<string, Intl.DateTimeFormat>();
-
-const isClockCardDatePart = (value: string): value is ClockCardDatePart =>
-  CLOCK_CARD_DATE_PARTS.includes(value as ClockCardDatePart);
-
-const isDateSeparatorPart = (
-  part: ClockCardDatePart
-): part is ClockCardSeparatorPart =>
-  DATE_SEPARATOR_PARTS.has(part as ClockCardSeparatorPart);
-
-/**
- * Returns a reusable formatter for a specific date token.
- */
-const getDatePartFormatter = (
-  part: ClockCardValuePart,
-  language: string,
-  timeZone?: string
-): Intl.DateTimeFormat => {
-  const cacheKey = `${language}|${timeZone || ""}|${part}`;
-  const cached = DATE_PART_FORMATTERS.get(cacheKey);
-
-  if (cached) {
-    return cached;
-  }
-
-  const formatter = new Intl.DateTimeFormat(language, {
-    ...DATE_PART_OPTIONS[part],
-    ...(timeZone ? { timeZone } : {}),
-  });
-
-  DATE_PART_FORMATTERS.set(cacheKey, formatter);
-
-  return formatter;
-};
-
-const formatDatePart = (
-  part: ClockCardValuePart,
-  date: Date,
-  language: string,
-  timeZone?: string
-) => getDatePartFormatter(part, language, timeZone).format(date);
-
-/**
- * Applies a single date token to Intl.DateTimeFormat options.
- */
-const applyDatePartOption = (
-  options: Intl.DateTimeFormatOptions,
-  part: ClockCardDatePart
-) => {
-  if (isDateSeparatorPart(part)) {
-    return;
-  }
-
-  const partOptions = DATE_PART_OPTIONS[part];
-
-  if (partOptions.weekday) {
-    options.weekday = partOptions.weekday;
-  }
-
-  if (partOptions.day) {
-    options.day = partOptions.day;
-  }
-
-  if (partOptions.month) {
-    options.month = partOptions.month;
-  }
-
-  if (partOptions.year) {
-    options.year = partOptions.year;
-  }
-};
-
-/**
- * Sanitizes configured date tokens while preserving their literal order.
- */
-const normalizeDateParts = (
-  parts: ClockCardConfig["date_format"]
-): ClockCardDatePart[] =>
-  parts?.filter((part): part is ClockCardDatePart =>
-    isClockCardDatePart(part)
-  ) || [];
-
-/**
- * Returns a normalized date config from a card configuration object.
- */
-export const getClockCardDateConfig = (
-  config?: Pick<ClockCardConfig, "date_format">
-): ClockCardDateConfig => ({
-  parts: normalizeDateParts(config?.date_format),
-});
-
-/**
- * Checks whether the clock configuration resolves to any visible date output.
- */
-export const hasClockCardDate = (
-  config?: Pick<ClockCardConfig, "date_format">
-): boolean => getClockCardDateConfig(config).parts.length > 0;
-
-/**
- * Converts normalized date tokens into Intl.DateTimeFormat options.
- *
- * Separator tokens are ignored. If multiple tokens target the same Intl field,
- * the last one wins.
- */
-export const getClockCardDateTimeFormatOptions = (
-  dateConfig: ClockCardDateConfig
-): Intl.DateTimeFormatOptions => {
-  const options: Intl.DateTimeFormatOptions = {};
-
-  dateConfig.parts.forEach((part) => {
-    applyDatePartOption(options, part);
-  });
-
-  return options;
-};
-
-/**
- * Builds the final date string from literal date tokens.
- *
- * Value tokens are localized through Intl.DateTimeFormat. Separator tokens are
- * always rendered literally. A default space is only inserted between adjacent
- * value tokens.
- */
-export const formatClockCardDate = (
-  date: Date,
-  dateConfig: ClockCardDateConfig,
-  language: string,
-  timeZone?: string
-): string => {
-  let result = "";
-  let previousRenderedPartWasValue = false;
-
-  dateConfig.parts.forEach((part) => {
-    if (isDateSeparatorPart(part)) {
-      result += DATE_SEPARATORS[part];
-      previousRenderedPartWasValue = false;
-      return;
-    }
-
-    const value = formatDatePart(part, date, language, timeZone);
-
-    if (!value) {
-      return;
-    }
-
-    if (previousRenderedPartWasValue) {
-      result += " ";
-    }
-
-    result += value;
-    previousRenderedPartWasValue = true;
-  });
-
-  return result;
-};

src/panels/lovelace/cards/clock/hui-clock-card-analog.ts

@@ -2,17 +2,9 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
-import "../../../../components/ha-marquee-text";
+import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
 import type { HomeAssistant } from "../../../../types";
 import type { ClockCardConfig } from "../types";
-import {
-  formatClockCardDate,
-  getClockCardDateConfig,
-  hasClockCardDate,
-  resolveClockCardLocale,
-} from "./clock-date-format";
 
 function romanize12HourClock(num: number) {
   const numerals = [
@@ -34,11 +26,6 @@ function romanize12HourClock(num: number) {
   return numerals[num];
 }
 
-const DATE_UPDATE_INTERVAL = 60_000;
-const QUARTER_TICKS = Array.from({ length: 4 }, (_, i) => i);
-const HOUR_TICKS = Array.from({ length: 12 }, (_, i) => i);
-const MINUTE_TICKS = Array.from({ length: 60 }, (_, i) => i);
-
 @customElement("hui-clock-card-analog")
 export class HuiClockCardAnalog extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -53,18 +40,42 @@ export class HuiClockCardAnalog extends LitElement {
 
   @state() private _secondOffsetSec?: number;
 
-  @state() private _date?: string;
+  private _initDate() {
+    if (!this.config || !this.hass) {
+      return;
+    }
 
-  private _dateInterval?: number;
+    let locale = this.hass.locale;
+    if (this.config.time_format) {
+      locale = { ...locale, time_format: this.config.time_format };
+    }
 
-  private _timeZone?: string;
+    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: "h12",
+      timeZone:
+        this.config.time_zone ||
+        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+    });
 
-  private _language?: string;
+    this._computeOffsets();
+  }
+
+  protected updated(changedProps: PropertyValues<this>) {
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!oldHass || oldHass.locale !== this.hass?.locale) {
+        this._initDate();
+      }
+    }
+  }
 
   public connectedCallback() {
     super.connectedCallback();
     document.addEventListener("visibilitychange", this._handleVisibilityChange);
-    this._initDate();
+    this._computeOffsets();
   }
 
   public disconnectedCallback() {
@@ -73,80 +84,18 @@ export class HuiClockCardAnalog extends LitElement {
       "visibilitychange",
       this._handleVisibilityChange
     );
-    this._stopDateTick();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("config") || changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (
-        changedProps.has("config") ||
-        !oldHass ||
-        oldHass.locale !== this.hass?.locale
-      ) {
-        this._initDate();
-      }
-    }
   }
 
   private _handleVisibilityChange = () => {
     if (!document.hidden) {
       this._computeOffsets();
-      this._updateDate();
     }
   };
 
-  private _initDate() {
-    if (!this.config || !this.hass) {
-      this._stopDateTick();
-      this._date = undefined;
-      return;
-    }
-
-    const { timeZone } = resolveClockCardLocale(this.hass, this.config);
-
-    this._language = this.hass.locale.language;
-    this._timeZone = timeZone;
-
-    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: "h12",
-      timeZone,
-    });
-
-    this._computeOffsets();
-    this._updateDate();
-
-    if (this.isConnected && hasClockCardDate(this.config)) {
-      this._startDateTick();
-    } else {
-      this._stopDateTick();
-    }
-  }
-
-  private _startDateTick() {
-    this._stopDateTick();
-    this._dateInterval = window.setInterval(
-      () => this._updateDate(),
-      DATE_UPDATE_INTERVAL
-    );
-  }
-
-  private _stopDateTick() {
-    if (this._dateInterval) {
-      clearInterval(this._dateInterval);
-      this._dateInterval = undefined;
-    }
-  }
-
   private _computeOffsets() {
     if (!this._dateTimeFormat) return;
 
-    const date = new Date();
-
-    const parts = this._dateTimeFormat.formatToParts(date);
+    const parts = this._dateTimeFormat.formatToParts();
     const hourStr = parts.find((p) => p.type === "hour")?.value;
     const minuteStr = parts.find((p) => p.type === "minute")?.value;
     const secondStr = parts.find((p) => p.type === "second")?.value;
@@ -154,7 +103,7 @@ export class HuiClockCardAnalog extends LitElement {
     const hour = hourStr ? parseInt(hourStr, 10) : 0;
     const minute = minuteStr ? parseInt(minuteStr, 10) : 0;
     const second = secondStr ? parseInt(secondStr, 10) : 0;
-    const ms = date.getMilliseconds();
+    const ms = new Date().getMilliseconds();
     const secondsWithMs = second + ms / 1000;
 
     const hour12 = hour % 12;
@@ -164,45 +113,16 @@ export class HuiClockCardAnalog extends LitElement {
     this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs;
   }
 
-  private _updateDate() {
-    if (!this.config || !hasClockCardDate(this.config) || !this._language) {
-      this._date = undefined;
-      return;
-    }
-
-    const dateConfig = getClockCardDateConfig(this.config);
-    this._date = formatClockCardDate(
-      new Date(),
-      dateConfig,
-      this._language,
-      this._timeZone
-    );
-  }
-
-  private _computeClock = memoizeOne((config: ClockCardConfig) => {
-    const faceParts = config.face_style?.split("_");
-    const dateConfig = getClockCardDateConfig(config);
-    const showDate = hasClockCardDate(config);
-    const isLongDate =
-      dateConfig.parts.includes("month-long") ||
-      dateConfig.parts.includes("weekday-long");
-
-    return {
-      sizeClass: config.clock_size ? `size-${config.clock_size}` : "",
-      isNumbers: faceParts?.includes("numbers") ?? false,
-      isRoman: faceParts?.includes("roman") ?? false,
-      isUpright: faceParts?.includes("upright") ?? false,
-      showDate,
-      isLongDate,
-    };
-  });
-
   render() {
     if (!this.config) return nothing;
 
-    const { sizeClass, isNumbers, isRoman, isUpright, isLongDate, showDate } =
-      this._computeClock(this.config);
-    const dateLines = this._date?.split("\n") ?? [];
+    const sizeClass = this.config.clock_size
+      ? `size-${this.config.clock_size}`
+      : "";
+
+    const isNumbers = this.config?.face_style?.startsWith("numbers");
+    const isRoman = this.config?.face_style?.startsWith("roman");
+    const isUpright = this.config?.face_style?.endsWith("upright");
 
     const indicator = (number?: number) => html`
       <div
@@ -248,14 +168,14 @@ export class HuiClockCardAnalog extends LitElement {
         >
           ${
             this.config.ticks === "quarter"
-              ? QUARTER_TICKS.map(
+              ? Array.from({ length: 4 }, (_, i) => i).map(
                   (i) =>
                     // 4 ticks (12, 3, 6, 9) at 0°, 90°, 180°, 270°
                     html`
                       <div
                         aria-hidden="true"
                         class="tick hour"
-                        style=${styleMap({ "--tick-rotation": `${i * 90}deg` })}
+                        style=${`--tick-rotation: ${i * 90}deg;`}
                       >
                         ${indicator([12, 3, 6, 9][i])}
                       </div>
@@ -263,30 +183,28 @@ export class HuiClockCardAnalog extends LitElement {
                 )
               : !this.config.ticks || // Default to hour ticks
                   this.config.ticks === "hour"
-                ? HOUR_TICKS.map(
+                ? Array.from({ length: 12 }, (_, i) => i).map(
                     (i) =>
                       // 12 ticks (1-12)
                       html`
                         <div
                           aria-hidden="true"
                           class="tick hour"
-                          style=${styleMap({ "--tick-rotation": `${i * 30}deg` })}
+                          style=${`--tick-rotation: ${i * 30}deg;`}
                         >
                           ${indicator(((i + 11) % 12) + 1)}
                         </div>
                       `
                   )
                 : this.config.ticks === "minute"
-                  ? MINUTE_TICKS.map(
+                  ? Array.from({ length: 60 }, (_, i) => i).map(
                       (i) =>
                         // 60 ticks (1-60)
                         html`
                           <div
                             aria-hidden="true"
                             class="tick ${i % 5 === 0 ? "hour" : "minute"}"
-                            style=${styleMap({
-                              "--tick-rotation": `${i * 6}deg`,
-                            })}
+                            style=${`--tick-rotation: ${i * 6}deg;`}
                           >
                             ${
                               i % 5 === 0
@@ -298,43 +216,14 @@ export class HuiClockCardAnalog extends LitElement {
                     )
                   : nothing
           }
-          ${
-            showDate
-              ? html`<div
-                  class=${classMap({
-                    date: true,
-                    [sizeClass]: true,
-                    "long-date": isLongDate,
-                  })}
-                >
-                  ${dateLines.map(
-                    (line) => html`
-                      <ha-marquee-text
-                        class="date-line"
-                        speed="5"
-                        pause-duration="1500"
-                        pause-on-hover
-                      >
-                        ${line}
-                      </ha-marquee-text>
-                    `
-                  )}
-                </div>`
-              : nothing
-          }
-
           <div class="center-dot"></div>
           <div
             class="hand hour"
-            style=${styleMap({
-              "animation-delay": `-${this._hourOffsetSec ?? 0}s`,
-            })}
+            style=${`animation-delay: -${this._hourOffsetSec ?? 0}s;`}
           ></div>
           <div
             class="hand minute"
-            style=${styleMap({
-              "animation-delay": `-${this._minuteOffsetSec ?? 0}s`,
-            })}
+            style=${`animation-delay: -${this._minuteOffsetSec ?? 0}s;`}
           ></div>
           ${
             this.config.show_seconds
@@ -344,13 +233,11 @@ export class HuiClockCardAnalog extends LitElement {
                     second: true,
                     step: this.config.seconds_motion === "tick",
                   })}
-                  style=${styleMap({
-                    "animation-delay": `-${
-                      this.config.seconds_motion === "tick"
-                        ? Math.floor(this._secondOffsetSec ?? 0)
-                        : (this._secondOffsetSec ?? 0)
-                    }s`,
-                  })}
+                  style=${`animation-delay: -${
+                    (this.config.seconds_motion === "tick"
+                      ? Math.floor(this._secondOffsetSec ?? 0)
+                      : (this._secondOffsetSec ?? 0)) as number
+                  }s;`}
                 ></div>`
               : nothing
           }
@@ -530,42 +417,6 @@ export class HuiClockCardAnalog extends LitElement {
         transform: translate(-50%, 0) rotate(360deg);
       }
     }
-
-    .date {
-      position: absolute;
-      top: 68%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: block;
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-s);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-condensed);
-      text-align: center;
-      opacity: 0.8;
-      overflow: hidden;
-      white-space: nowrap;
-      width: 100%;
-    }
-
-    .date-line {
-      width: 100%;
-    }
-
-    .date.long-date:not(.size-medium):not(.size-large) {
-      top: 66%;
-      font-size: var(--ha-font-size-xs);
-      line-height: 1;
-      width: 45%;
-    }
-
-    .date.size-medium {
-      font-size: var(--ha-font-size-l);
-    }
-
-    .date.size-large {
-      font-size: var(--ha-font-size-xl);
-    }
   `;
 }
 

src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

@@ -1,16 +1,10 @@
 import { css, html, LitElement, nothing } from "lit";
 import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/ha-marquee-text";
 import type { ClockCardConfig } from "../types";
 import type { HomeAssistant } from "../../../../types";
 import { useAmPm } from "../../../../common/datetime/use_am_pm";
-import {
-  formatClockCardDate,
-  getClockCardDateConfig,
-  hasClockCardDate,
-  resolveClockCardLocale,
-} from "./clock-date-format";
+import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
 
 const INTERVAL = 1000;
 
@@ -30,50 +24,37 @@ export class HuiClockCardDigital extends LitElement {
 
   @state() private _timeAmPm?: string;
 
-  @state() private _date?: string;
-
   private _tickInterval?: undefined | number;
 
-  private _lastDateMinute?: string;
-
-  private _timeZone?: string;
-
-  private _language?: string;
-
   private _initDate() {
     if (!this.config || !this.hass) {
-      this._date = undefined;
-      this._lastDateMinute = undefined;
       return;
     }
 
-    const { locale, timeZone } = resolveClockCardLocale(this.hass, this.config);
+    let locale = this.hass?.locale;
+
+    if (this.config?.time_format) {
+      locale = { ...locale, time_format: this.config.time_format };
+    }
 
     const h12 = useAmPm(locale);
-    this._language = this.hass.locale.language;
-    this._timeZone = timeZone;
-
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
       hour: h12 ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
       hourCycle: h12 ? "h12" : "h23",
-      timeZone,
+      timeZone:
+        this.config?.time_zone ||
+        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
     });
 
-    this._lastDateMinute = undefined;
-
     this._tick();
   }
 
   protected updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has("config") || changedProps.has("hass")) {
+    if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass");
-      if (
-        changedProps.has("config") ||
-        !oldHass ||
-        oldHass.locale !== this.hass?.locale
-      ) {
+      if (!oldHass || oldHass.locale !== this.hass?.locale) {
         this._initDate();
       }
     }
@@ -90,7 +71,6 @@ export class HuiClockCardDigital extends LitElement {
   }
 
   private _startTick() {
-    this._stopTick();
     this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
     this._tick();
   }
@@ -105,8 +85,7 @@ export class HuiClockCardDigital extends LitElement {
   private _tick() {
     if (!this._dateTimeFormat) return;
 
-    const date = new Date();
-    const parts = this._dateTimeFormat.formatToParts(date);
+    const parts = this._dateTimeFormat.formatToParts();
 
     this._timeHour = parts.find((part) => part.type === "hour")?.value;
     this._timeMinute = parts.find((part) => part.type === "minute")?.value;
@@ -114,33 +93,6 @@ export class HuiClockCardDigital extends LitElement {
       ? parts.find((part) => part.type === "second")?.value
       : undefined;
     this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
-
-    this._updateDate(date);
-  }
-
-  private _updateDate(date: Date) {
-    if (!this.config || !hasClockCardDate(this.config) || !this._language) {
-      this._date = undefined;
-      this._lastDateMinute = undefined;
-      return;
-    }
-
-    if (
-      this._timeMinute !== undefined &&
-      this._timeMinute === this._lastDateMinute &&
-      this._date !== undefined
-    ) {
-      return;
-    }
-
-    const dateConfig = getClockCardDateConfig(this.config);
-    this._date = formatClockCardDate(
-      date,
-      dateConfig,
-      this._language,
-      this._timeZone
-    );
-    this._lastDateMinute = this._timeMinute;
   }
 
   render() {
@@ -149,65 +101,28 @@ export class HuiClockCardDigital extends LitElement {
     const sizeClass = this.config.clock_size
       ? `size-${this.config.clock_size}`
       : "";
-    const showDate = hasClockCardDate(this.config);
 
     return html`
-      <div class="clock-container">
-        <div class="time-parts ${sizeClass}">
-          <div class="time-part hour">${this._timeHour}</div>
-          <div class="time-part minute">${this._timeMinute}</div>
-          ${
-            this._timeSecond !== undefined
-              ? html`<div class="time-part second">${this._timeSecond}</div>`
-              : nothing
-          }
-          ${
-            this._timeAmPm !== undefined
-              ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
-              : nothing
-          }
-        </div>
+      <div class="time-parts ${sizeClass}">
+        <div class="time-part hour">${this._timeHour}</div>
+        <div class="time-part minute">${this._timeMinute}</div>
+        ${
+          this._timeSecond !== undefined
+            ? html`<div class="time-part second">${this._timeSecond}</div>`
+            : nothing
+        }
+        ${
+          this._timeAmPm !== undefined
+            ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
+            : nothing
+        }
       </div>
-      ${
-        showDate
-          ? html`<div class="date-container">
-              <div class="date ${sizeClass}">
-                ${this._date
-                  ?.split("\n")
-                  .map(
-                    (line) => html`
-                      <ha-marquee-text
-                        class="date-line"
-                        speed="10"
-                        pause-duration="1500"
-                        pause-on-hover
-                      >
-                        ${line}
-                      </ha-marquee-text>
-                    `
-                  )}
-              </div>
-            </div>`
-          : nothing
-      }
     `;
   }
 
   static styles = css`
     :host {
       display: block;
-      width: 100%;
-    }
-
-    .clock-container {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-
-    .date-container {
-      width: 100%;
-      margin-top: var(--ha-space-1);
     }
 
     .time-parts {
@@ -277,29 +192,6 @@ export class HuiClockCardDigital extends LitElement {
       content: ":";
       margin: 0 2px;
     }
-
-    .date {
-      margin-inline: auto;
-      text-align: center;
-      opacity: 0.8;
-      font-size: var(--ha-font-size-s);
-      line-height: 1.1;
-      overflow: hidden;
-      white-space: nowrap;
-      width: 100%;
-    }
-
-    .date-line {
-      width: 100%;
-    }
-
-    .date.size-medium {
-      font-size: var(--ha-font-size-l);
-    }
-
-    .date.size-large {
-      font-size: var(--ha-font-size-2xl);
-    }
   `;
 }
 

src/panels/lovelace/cards/energy/power-sources-graph-data.ts

@@ -226,24 +226,21 @@ export function generatePowerSourcesGraphData(
 
   // Draw in reverse order so 0 value lines are overwritten
   ["solar", "battery", "grid"].forEach((key, i) => {
-    const series = seriesData[key];
-    if (series) {
-      pushSeries(key, series.positive, "positive", 3 - i);
+    if (seriesData[key]) {
+      pushSeries(key, seriesData[key].positive, "positive", 3 - i);
     }
   });
 
   // Draw in reverse order but above positive series
   ["battery", "grid"].forEach((key, i) => {
-    const series = seriesData[key];
-    if (series) {
-      pushSeries(key, series.negative, "negative", 4 - i);
+    if (seriesData[key]) {
+      pushSeries(key, seriesData[key].negative, "negative", 4 - i);
     }
   });
 
   Object.keys(statIds).forEach((key) => {
-    const series = seriesData[key];
-    if (series) {
-      const { colorHex, rgb } = series;
+    if (seriesData[key]) {
+      const { colorHex, rgb } = seriesData[key];
 
       legendData!.push({
         id: key,

src/panels/lovelace/cards/types.ts

@@ -445,29 +445,12 @@ export interface ClockCardConfig extends LovelaceCardConfig {
   time_format?: TimeFormat;
   time_zone?: string;
   no_background?: boolean;
-  date_format?: ClockCardDatePart[];
   // Analog clock options
   border?: boolean;
   ticks?: "none" | "quarter" | "hour" | "minute";
   face_style?: "markers" | "numbers_upright" | "roman";
 }
 
-export type ClockCardDatePart =
-  | "weekday-short"
-  | "weekday-long"
-  | "day-numeric"
-  | "day-2-digit"
-  | "month-short"
-  | "month-long"
-  | "month-numeric"
-  | "month-2-digit"
-  | "year-2-digit"
-  | "year-numeric"
-  | "separator-dash"
-  | "separator-slash"
-  | "separator-dot"
-  | "separator-new-line";
-
 export interface MediaControlCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string | EntityNameItem | EntityNameItem[];

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

@@ -250,14 +250,18 @@ export class HuiBadgePicker extends LitElement {
     const usedEntities = computeUsedEntities(this.lovelace);
     const unusedEntities = calcUnusedEntities(this.hass, usedEntities);
 
-    const isAvailable = (eid: string) => {
-      const stateObj = this.hass!.states[eid];
-      return (
-        stateObj && stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
-      );
-    };
-    this._usedEntities = [...usedEntities].filter(isAvailable);
-    this._unusedEntities = [...unusedEntities].filter(isAvailable);
+    this._usedEntities = [...usedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
+    this._unusedEntities = [...unusedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
 
     this._loadBages();
   }

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

@@ -274,14 +274,18 @@ export class HuiCardPicker extends LitElement {
     const usedEntities = computeUsedEntities(this.lovelace);
     const unusedEntities = calcUnusedEntities(this.hass, usedEntities);
 
-    const isAvailable = (eid: string) => {
-      const stateObj = this.hass!.states[eid];
-      return (
-        stateObj && stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
-      );
-    };
-    this._usedEntities = [...usedEntities].filter(isAvailable);
-    this._unusedEntities = [...unusedEntities].filter(isAvailable);
+    this._usedEntities = [...usedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
+    this._unusedEntities = [...unusedEntities].filter(
+      (eid) =>
+        this.hass!.states[eid] &&
+        this.hass!.states[eid].state !== UNAVAILABLE &&
+        this.hass!.states[eid].state !== UNKNOWN
+    );
 
     this._loadCards();
   }

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -13,15 +13,11 @@ import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ensureArray } from "../../../../common/array/ensure-array";
 import { ConditionListenersController } from "../../../../common/controllers/condition-listeners-controller";
 import { storage } from "../../../../common/decorators/storage";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { formatListWithOrs } from "../../../../common/string/format-list";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/automation/ha-automation-row-event-chip";
 import "../../../../components/automation/ha-automation-row-live-test";
@@ -45,9 +41,7 @@ import type {
   Condition,
   LegacyCondition,
   NotCondition,
-  NumericStateCondition,
   OrCondition,
-  StateCondition,
 } from "../../common/validate-condition";
 import {
   checkConditionsMet,
@@ -225,84 +219,6 @@ export class HaCardConditionEditor extends LitElement {
     };
   }
 
-  private _describeCondition(
-    condition: Condition,
-    entityId?: string
-  ): string | undefined {
-    const stateObj = entityId ? this.hass.states[entityId] : undefined;
-    const entity = stateObj ? computeStateName(stateObj) : entityId;
-    if (!entity) {
-      return undefined;
-    }
-
-    if (condition.condition === "state") {
-      const value = condition.state ?? condition.state_not;
-      const values = ensureArray(value ?? []).filter((v) => v !== "");
-      if (!values.length) {
-        return undefined;
-      }
-      const attribute =
-        condition.attribute && stateObj
-          ? computeAttributeNameDisplay(
-              this.hass.localize,
-              stateObj,
-              this.hass.entities,
-              condition.attribute
-            )
-          : condition.attribute;
-      const states = formatListWithOrs(
-        this.hass.locale,
-        values.map((v) =>
-          stateObj
-            ? condition.attribute
-              ? this.hass
-                  .formatEntityAttributeValue(stateObj, condition.attribute, v)
-                  .toString()
-              : this.hass.formatEntityState(stateObj, v)
-            : v
-        )
-      );
-      const invert = condition.state_not !== undefined;
-      const variant = invert ? "is_not" : "is";
-      return this.hass.localize(
-        `ui.panel.lovelace.editor.condition-editor.condition.state.description.${
-          attribute ? `${variant}_attribute` : variant
-        }`,
-        { entity, state: states, attribute }
-      );
-    }
-
-    if (condition.condition === "numeric_state") {
-      const { above, below } = condition;
-      if (above === undefined && below === undefined) {
-        return undefined;
-      }
-      const attribute =
-        condition.attribute && stateObj
-          ? computeAttributeNameDisplay(
-              this.hass.localize,
-              stateObj,
-              this.hass.entities,
-              condition.attribute
-            )
-          : condition.attribute;
-      const variant =
-        above !== undefined && below !== undefined
-          ? "above_below"
-          : above !== undefined
-            ? "above"
-            : "below";
-      return this.hass.localize(
-        `ui.panel.lovelace.editor.condition-editor.condition.numeric_state.description.${
-          attribute ? `${variant}_attribute` : variant
-        }`,
-        { entity, above, below, attribute }
-      );
-    }
-
-    return undefined;
-  }
-
   protected render() {
     const condition = this._condition;
 
@@ -312,16 +228,6 @@ export class HaCardConditionEditor extends LitElement {
       isNoEntityCondition(condition.condition, this._noEntity) ||
       containsNoEntityCondition(condition, this._noEntity);
 
-    const contextEntityId =
-      condition.condition === "state" || condition.condition === "numeric_state"
-        ? (condition as StateCondition | NumericStateCondition).entity ||
-          (this._entityContext?.mode === "current"
-            ? this._entityContext.entityId
-            : undefined)
-        : undefined;
-
-    const description = this._describeCondition(condition, contextEntityId);
-
     return html`
       <div class="container">
         <ha-expansion-panel left-chevron>
@@ -353,11 +259,9 @@ export class HaCardConditionEditor extends LitElement {
           }
           <h3 slot="header">
             ${
-              description ||
               this.hass.localize(
                 `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
-              ) ||
-              condition.condition
+              ) || condition.condition
             }
           </h3>
           <ha-automation-row-event-chip

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

@@ -2,15 +2,16 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
-  array,
   assert,
   assign,
   boolean,
   defaulted,
   enums,
+  literal,
   object,
   optional,
   string,
+  union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
@@ -18,47 +19,58 @@ import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
+import type { HomeAssistant } from "../../../../types";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { ClockCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { TimeFormat } from "../../../../data/translation";
 import { getTimezoneOptions } from "../../../../components/ha-timezone-picker";
-import {
-  CLOCK_CARD_DATE_PARTS,
-  getClockCardDateConfig,
-} from "../../cards/clock/clock-date-format";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     title: optional(string()),
-    clock_style: optional(enums(["digital", "analog"])),
-    clock_size: optional(enums(["small", "medium", "large"])),
+    clock_style: optional(union([literal("digital"), literal("analog")])),
+    clock_size: optional(
+      union([literal("small"), literal("medium"), literal("large")])
+    ),
     time_format: optional(enums(Object.values(TimeFormat))),
     time_zone: optional(enums(getTimezoneOptions().map((option) => option.id))),
     show_seconds: optional(boolean()),
     no_background: optional(boolean()),
-    date_format: optional(defaulted(array(enums(CLOCK_CARD_DATE_PARTS)), [])),
     // Analog clock options
     border: optional(defaulted(boolean(), false)),
     ticks: optional(
-      defaulted(enums(["none", "quarter", "hour", "minute"]), "hour")
+      defaulted(
+        union([
+          literal("none"),
+          literal("quarter"),
+          literal("hour"),
+          literal("minute"),
+        ]),
+        literal("hour")
+      )
     ),
     seconds_motion: optional(
-      defaulted(enums(["continuous", "tick"]), "continuous")
+      defaulted(
+        union([literal("continuous"), literal("tick")]),
+        literal("continuous")
+      )
     ),
     face_style: optional(
-      defaulted(enums(["markers", "numbers_upright", "roman"]), "markers")
+      defaulted(
+        union([
+          literal("markers"),
+          literal("numbers_upright"),
+          literal("roman"),
+        ]),
+        literal("markers")
+      )
     ),
   })
 );
 
-type ClockCardFormData = Omit<ClockCardConfig, "time_format"> & {
-  time_format?: ClockCardConfig["time_format"] | "auto";
-};
-
 @customElement("hui-clock-card-editor")
 export class HuiClockCardEditor
   extends LitElement
@@ -81,7 +93,7 @@ export class HuiClockCardEditor
           name: "clock_style",
           selector: {
             select: {
-              mode: "box",
+              mode: "dropdown",
               options: ["digital", "analog"].map((value) => ({
                 value,
                 label: localize(
@@ -107,13 +119,6 @@ export class HuiClockCardEditor
         },
         { name: "show_seconds", selector: { boolean: {} } },
         { name: "no_background", selector: { boolean: {} } },
-        {
-          name: "date_format",
-          required: false,
-          selector: {
-            ui_clock_date_format: {},
-          },
-        },
         ...(clockStyle === "digital"
           ? ([
               {
@@ -236,28 +241,18 @@ export class HuiClockCardEditor
       ] as const satisfies readonly HaFormSchema[]
   );
 
-  private _data = memoizeOne((config: ClockCardConfig): ClockCardFormData => {
-    const dateConfig = getClockCardDateConfig(config);
-
-    const data: ClockCardFormData = {
-      ...config,
-      clock_style: config.clock_style ?? "digital",
-      clock_size: config.clock_size ?? "small",
-      time_format: config.time_format ?? "auto",
-      show_seconds: config.show_seconds ?? false,
-      no_background: config.no_background ?? false,
-      // Analog clock options
-      border: config.border ?? false,
-      ticks: config.ticks ?? "hour",
-      face_style: config.face_style ?? "markers",
-    };
-
-    if (config.date_format === undefined) {
-      data.date_format = dateConfig.parts;
-    }
-
-    return data;
-  });
+  private _data = memoizeOne((config) => ({
+    clock_style: "digital",
+    clock_size: "small",
+    time_format: "auto",
+    show_seconds: false,
+    no_background: false,
+    // Analog clock options
+    border: false,
+    ticks: "hour",
+    face_style: "markers",
+    ...config,
+  }));
 
   public setConfig(config: ClockCardConfig): void {
     assert(config, cardConfigStruct);
@@ -286,40 +281,35 @@ export class HuiClockCardEditor
     `;
   }
 
-  private _valueChanged(ev: ValueChangedEvent<ClockCardFormData>): void {
-    const config = ev.detail.value;
-
-    if (!config.date_format || config.date_format.length === 0) {
-      delete config.date_format;
+  private _valueChanged(ev: CustomEvent): void {
+    if (ev.detail.value.time_format === "auto") {
+      delete ev.detail.value.time_format;
     }
 
-    if (config.time_format === "auto") {
-      delete config.time_format;
-    }
-
-    if (config.clock_style === "analog") {
-      config.border = config.border ?? false;
-      config.ticks = config.ticks ?? "hour";
-      config.face_style = config.face_style ?? "markers";
-      if (config.show_seconds) {
-        config.seconds_motion = config.seconds_motion ?? "continuous";
+    if (ev.detail.value.clock_style === "analog") {
+      ev.detail.value.border = ev.detail.value.border ?? false;
+      ev.detail.value.ticks = ev.detail.value.ticks ?? "hour";
+      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
+      if (ev.detail.value.show_seconds) {
+        ev.detail.value.seconds_motion =
+          ev.detail.value.seconds_motion ?? "continuous";
       } else {
-        delete config.seconds_motion;
+        delete ev.detail.value.seconds_motion;
       }
     } else {
-      delete config.border;
-      delete config.ticks;
-      delete config.face_style;
-      delete config.seconds_motion;
+      delete ev.detail.value.border;
+      delete ev.detail.value.ticks;
+      delete ev.detail.value.face_style;
+      delete ev.detail.value.seconds_motion;
     }
 
-    if (config.ticks !== "none") {
-      config.face_style = config.face_style ?? "markers";
+    if (ev.detail.value.ticks !== "none") {
+      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
     } else {
-      delete config.face_style;
+      delete ev.detail.value.face_style;
     }
 
-    fireEvent(this, "config-changed", { config });
+    fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
   private _computeLabelCallback = (
@@ -354,10 +344,6 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.no_background`
         );
-      case "date_format":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.date.label`
-        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.label`
@@ -383,10 +369,6 @@ export class HuiClockCardEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
     switch (schema.name) {
-      case "date_format":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.date.description`
-        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.description`

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

@@ -1,4 +1,3 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -261,10 +260,9 @@ export class HuiHistoryGraphCardEditor
     const domain = computeDomain(entityId);
     const isNumberDomain =
       domain === "counter" || domain === "number" || domain === "input_number";
-    const stateObj = this.hass!.states[entityId] as HassEntity | undefined;
+    const stateObj = this.hass!.states[entityId];
     const attributes = stateObj?.attributes;
-    const isNumeric = attributes ? isNumericFromAttributes(attributes) : false;
-    return !isNumeric && !isNumberDomain;
+    return !isNumericFromAttributes(attributes) && !isNumberDomain;
   };
 
   // remove "color" option when needed

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

@@ -608,24 +608,22 @@ class HaPanelMy extends LitElement {
     }
     const resultParams = {};
     for (const [key, type] of Object.entries(this._redirect!.params || {})) {
-      const value = params[key];
-      if (!value && type.endsWith("?")) {
+      if (!params[key] && type.endsWith("?")) {
         continue;
       }
-      if (!value || !this._checkParamType(type, value)) {
+      if (!params[key] || !this._checkParamType(type, params[key])) {
         throw Error();
       }
-      resultParams[key] = value;
+      resultParams[key] = params[key];
     }
     for (const [key, type] of Object.entries(
       this._redirect!.optional_params || {}
     )) {
-      const value = params[key];
-      if (value) {
-        if (!this._checkParamType(type, value)) {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
           throw Error();
         }
-        resultParams[key] = value;
+        resultParams[key] = params[key];
       }
     }
     return Object.keys(resultParams).length
@@ -639,12 +637,11 @@ class HaPanelMy extends LitElement {
     }
     const resultParams = {};
     for (const [key, type] of Object.entries(this._redirect!.optional_params)) {
-      const value = params[key];
-      if (value) {
-        if (!this._checkParamType(type, value)) {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
           throw Error();
         }
-        resultParams[key] = value;
+        resultParams[key] = params[key];
       }
     }
     return Object.keys(resultParams).length

src/translations/en.json

@@ -9562,15 +9562,7 @@
                 "label": "Entity numeric state",
                 "attribute": "[%key:ui::panel::lovelace::editor::condition-editor::condition::state::attribute%]",
                 "above": "Above",
-                "below": "Below",
-                "description": {
-                  "above": "{entity} is above {above}",
-                  "below": "{entity} is below {below}",
-                  "above_below": "{entity} is above {above} and below {below}",
-                  "above_attribute": "{entity} {attribute} is above {above}",
-                  "below_attribute": "{entity} {attribute} is below {below}",
-                  "above_below_attribute": "{entity} {attribute} is above {above} and below {below}"
-                }
+                "below": "Below"
               },
               "screen": {
                 "label": "Screen",
@@ -9588,13 +9580,7 @@
                 "attribute": "Attribute (optional)",
                 "current_entity": "Current entity",
                 "state_equal": "State is equal to",
-                "state_not_equal": "State is not equal to",
-                "description": {
-                  "is": "{entity} is {state}",
-                  "is_not": "{entity} is not {state}",
-                  "is_attribute": "{entity} {attribute} is {state}",
-                  "is_not_attribute": "{entity} {attribute} is not {state}"
-                }
+                "state_not_equal": "State is not equal to"
               },
               "time": {
                 "label": "Time",
@@ -10154,33 +10140,6 @@
                 "large": "Large"
               },
               "show_seconds": "Display seconds",
-              "date": {
-                "label": "Date",
-                "description": "Select and order the date parts. Add a separator to control punctuation.",
-                "sections": {
-                  "weekday": "Weekday",
-                  "day": "Day",
-                  "month": "Month",
-                  "year": "Year",
-                  "separator": "Separator"
-                },
-                "parts": {
-                  "weekday-short": "Short",
-                  "weekday-long": "Long",
-                  "day-numeric": "Numeric",
-                  "day-2-digit": "2-digit",
-                  "month-short": "Short",
-                  "month-long": "Long",
-                  "month-numeric": "Numeric",
-                  "month-2-digit": "2-digit",
-                  "year-2-digit": "2-digit",
-                  "year-numeric": "Full",
-                  "separator-dash": "Dash",
-                  "separator-slash": "Slash",
-                  "separator-dot": "Dot",
-                  "separator-new-line": "New line"
-                }
-              },
               "time_format": "[%key:ui::panel::profile::time_format::dropdown_label%]",
               "time_formats": {
                 "auto": "Use user settings",

test/e2e/app.spec.ts

@@ -483,7 +483,6 @@ test.describe("Theming", () => {
       () =>
         (document.querySelector("ha-test") as any)?.hass?.themes?.darkMode ===
         true,
-      undefined,
       { timeout: QUICK_TIMEOUT }
     );
   });
@@ -500,7 +499,6 @@ test.describe("Theming", () => {
         getComputedStyle(document.documentElement)
           .getPropertyValue("--primary-color")
           .trim() !== "",
-      undefined,
       { timeout: QUICK_TIMEOUT }
     );
 

test/hassio/create_session.test.ts

@@ -1,19 +1,20 @@
 import { assert, describe, it } from "vitest";
 import { createHassioSession } from "../../src/data/hassio/ingress";
-import type { HomeAssistant } from "../../src/types";
 
 describe("Create hassio session", () => {
   const hass = {
-    callWS: async () => ({
-      session: "fhdsu73rh3io4h8f3irhjel8ousafehf8f3yh",
+    config: { version: "1.0.0" },
+    callApi: async () => ({
+      data: { session: "fhdsu73rh3io4h8f3irhjel8ousafehf8f3yh" },
     }),
-  } as unknown as Pick<HomeAssistant, "callWS">;
+  };
 
   it("Test create session without HTTPS", async () => {
     // @ts-ignore
     global.document = {};
     // @ts-ignore
     global.location = {};
+    // @ts-ignore
     await createHassioSession(hass);
     assert.strictEqual(
       // @ts-ignore
@@ -26,6 +27,7 @@ describe("Create hassio session", () => {
     global.document = {};
     // @ts-ignore
     global.location = { protocol: "https:" };
+    // @ts-ignore
     await createHassioSession(hass);
     assert.strictEqual(
       // @ts-ignore
@@ -41,8 +43,9 @@ describe("Create hassio session", () => {
   });
   it("Test fail to create", async () => {
     const createSessionPromise = createHassioSession({
-      callWS: async () => {
-        throw new Error("Failed to create session");
+      // @ts-ignore
+      callApi: async () => {
+        // noop
       },
     }).then(
       () => true,

test/panels/lovelace/cards/clock-date-format.test.ts

@@ -1,261 +0,0 @@
-import { assert, describe, it } from "vitest";
-import type { ClockCardDatePart } from "../../../../src/panels/lovelace/cards/types";
-import {
-  formatClockCardDate,
-  getClockCardDateConfig,
-  getClockCardDateTimeFormatOptions,
-  hasClockCardDate,
-} from "../../../../src/panels/lovelace/cards/clock/clock-date-format";
-
-describe("clock-date-format", () => {
-  const date = new Date("2024-11-08T10:20:30.000Z");
-
-  it("returns an empty config when date format is missing", () => {
-    assert.deepEqual(getClockCardDateConfig(), { parts: [] });
-  });
-
-  it("preserves literal token order", () => {
-    const config = getClockCardDateConfig({
-      date_format: [
-        "day-numeric",
-        "separator-dot",
-        "month-short",
-        "month-long",
-        "separator-slash",
-        "year-2-digit",
-        "year-numeric",
-      ],
-    });
-
-    assert.deepEqual(config.parts, [
-      "day-numeric",
-      "separator-dot",
-      "month-short",
-      "month-long",
-      "separator-slash",
-      "year-2-digit",
-      "year-numeric",
-    ]);
-  });
-
-  it("filters invalid date tokens", () => {
-    const config = getClockCardDateConfig({
-      date_format: [
-        "month-short",
-        "invalid",
-        "year-2-digit",
-      ] as unknown as ClockCardDatePart[],
-    });
-
-    assert.deepEqual(config.parts, ["month-short", "year-2-digit"]);
-  });
-
-  it("builds Intl options from selected date tokens", () => {
-    const options = getClockCardDateTimeFormatOptions({
-      parts: [
-        "weekday-short",
-        "separator-slash",
-        "day-2-digit",
-        "month-long",
-        "month-numeric",
-        "year-2-digit",
-      ],
-    });
-
-    assert.deepEqual(options, {
-      weekday: "short",
-      day: "2-digit",
-      month: "numeric",
-      year: "2-digit",
-    });
-  });
-
-  it("reports whether any date part is configured", () => {
-    assert.equal(hasClockCardDate(), false);
-    assert.equal(hasClockCardDate({ date_format: [] }), false);
-    assert.equal(hasClockCardDate({ date_format: ["separator-dot"] }), true);
-    assert.equal(
-      hasClockCardDate({ date_format: ["separator-new-line"] }),
-      true
-    );
-    assert.equal(hasClockCardDate({ date_format: ["weekday-short"] }), true);
-  });
-
-  it("formats output in configured part order with literal separators", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "month-numeric",
-          "separator-slash",
-          "day-2-digit",
-          "separator-dash",
-          "year-2-digit",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "11/08-24");
-  });
-
-  it("uses separator only for the next gap", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "day-numeric",
-          "separator-dot",
-          "month-numeric",
-          "year-numeric",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "8.11 2024");
-  });
-
-  it("supports using the same separator style multiple times", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "month-numeric",
-          "separator-slash",
-          "day-2-digit",
-          "separator-slash",
-          "year-2-digit",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "11/08/24");
-  });
-
-  it("renders separators even when no value follows", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: ["day-numeric", "separator-dash", "separator-dot"],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "8-.");
-  });
-
-  it("renders separators even when no value precedes", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: ["separator-slash", "separator-dot", "day-numeric"],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "/.8");
-  });
-
-  it("renders all consecutive separators between values", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "day-numeric",
-          "separator-dash",
-          "separator-slash",
-          "separator-dot",
-          "month-numeric",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "8-/.11");
-  });
-
-  it("renders repeated separators without deduplication", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "day-numeric",
-          "separator-dash",
-          "separator-dash",
-          "separator-dash",
-          "month-numeric",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "8---11");
-  });
-
-  it("renders separator-only configurations", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: ["separator-dash", "separator-slash", "separator-dot"],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "-/.");
-  });
-
-  it("supports inserting a new line between date values", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: [
-          "month-numeric",
-          "separator-new-line",
-          "day-2-digit",
-          "year-numeric",
-        ],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "11\n08 2024");
-  });
-
-  it("allows multiple variants for the same date part", () => {
-    const result = formatClockCardDate(
-      date,
-      {
-        parts: ["month-short", "month-long", "year-numeric"],
-      },
-      "en",
-      "UTC"
-    );
-
-    assert.equal(result, "Nov November 2024");
-  });
-
-  it("filters invalid tokens when formatting", () => {
-    const config = getClockCardDateConfig({
-      date_format: [
-        "month-numeric",
-        "invalid",
-        "year-numeric",
-      ] as unknown as ClockCardDatePart[],
-    });
-
-    const result = formatClockCardDate(date, config, "en", "UTC");
-
-    assert.equal(result, "11 2024");
-  });
-});

yarn.lock

@@ -2745,135 +2745,135 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/bigdecimal@npm:0.2.7":
-  version: 0.2.7
-  resolution: "@formatjs/bigdecimal@npm:0.2.7"
-  checksum: 10/e78fe804ed6805708b849fbd49006e981cfa736677bac29556f84bd6ca5271f848076f2f35de087197a559d434435bbfaecca2776563a5b46ecd6246bde7406d
+"@formatjs/bigdecimal@npm:0.2.6":
+  version: 0.2.6
+  resolution: "@formatjs/bigdecimal@npm:0.2.6"
+  checksum: 10/5ef248f0feadeb1bceb9fa65ba36ccd1768a41ea6165bc58ae794564ebb09a67621d894fc94ab8b328cc7bba60e4c181847562c92b7cec5cd1208a4191fbbe67
   languageName: node
   linkType: hard
 
-"@formatjs/fast-memoize@npm:3.1.7":
-  version: 3.1.7
-  resolution: "@formatjs/fast-memoize@npm:3.1.7"
-  checksum: 10/2d7ead48684539764ecb8a52178719169186595e830d9d6941eff12bec1ae31e20642a9cfd197007c48a8cc7e965bf61445ffcccc0fd77281341271d00e7b8fb
+"@formatjs/fast-memoize@npm:3.1.6":
+  version: 3.1.6
+  resolution: "@formatjs/fast-memoize@npm:3.1.6"
+  checksum: 10/7dec3e82586d4c4889671c6081d7b0d87b2c229ba551d8328f96ae8ab58b2cd6056fc5d360c0b0c9688b7164f12ef517428016fbce15b950987a77005e481824
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:3.5.14":
-  version: 3.5.14
-  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.14"
+"@formatjs/icu-messageformat-parser@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@formatjs/icu-messageformat-parser@npm:3.5.13"
   dependencies:
-    "@formatjs/icu-skeleton-parser": "npm:2.1.11"
-  checksum: 10/e842d8ec0c17c174da0eb562e161f5216b31cb83546bf94fd3dd6e4b6493f8c0c404b9fb47b6b8106a607a83d305386bc1fb44abbc70453cf467d261e39d09c1
+    "@formatjs/icu-skeleton-parser": "npm:2.1.10"
+  checksum: 10/b6451febdcfbe32571af5ae1c94cc560f6b3d815401321849c9dba229c460edf9ee4eca4c2d4da6dedefea416f2e3b10b4aa5507383e12b67042f941157e8045
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:2.1.11":
-  version: 2.1.11
-  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.11"
-  checksum: 10/492f42bd4ad72b2cdb4fd75a07e3874aa78e88f346027058f74c58e3828378092784176c9f7c77f4b5baf58ffaa1a4e8f5efcb53143552def2990510d0ac3c16
+"@formatjs/icu-skeleton-parser@npm:2.1.10":
+  version: 2.1.10
+  resolution: "@formatjs/icu-skeleton-parser@npm:2.1.10"
+  checksum: 10/ec30d106ce38de80f4128d0cdfac15699628652807695843254bf0d31650bd0dc4b57e48691d164556234494d59b2816e710fa12321234c85b803c5cda32bedf
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:7.5.0":
-  version: 7.5.0
-  resolution: "@formatjs/intl-datetimeformat@npm:7.5.0"
+"@formatjs/intl-datetimeformat@npm:7.4.10":
+  version: 7.4.10
+  resolution: "@formatjs/intl-datetimeformat@npm:7.4.10"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/8f5bbcd2768609e466e5d03cd42880e62fa5c584ef57d716023a0f89ffff12036da41a248956cc1b3369b1af0155459464ac05d5f8fdfb42c0aa066d77ede815
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/67fd55857555fe2651bc8ed5544fb036807d926542c92ccc07e475c14493d93a87d2cc805d04c812c6df68c9fdaeb4d64b399ac019f8c27940e2b872c9837618
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:7.3.12":
-  version: 7.3.12
-  resolution: "@formatjs/intl-displaynames@npm:7.3.12"
+"@formatjs/intl-displaynames@npm:7.3.11":
+  version: 7.3.11
+  resolution: "@formatjs/intl-displaynames@npm:7.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/d802f9d44831fcb567efd7399b2f20da7872bf6cdf3cc8c5b38b188111fc8c38af704a79f55902caadd50edb8ebf2f830c473aecc5a93573ddbe1bcfba275793
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/3278e430d7f2bbb0656f5cf0a76a1a539a572c58f0d2473e2a175bc927de7e3a4a01823c3c98a38dc2878fd05ca3a6ebe83afa94dbd254733fe9195377064347
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.10.17":
-  version: 0.10.17
-  resolution: "@formatjs/intl-durationformat@npm:0.10.17"
+"@formatjs/intl-durationformat@npm:0.10.16":
+  version: 0.10.16
+  resolution: "@formatjs/intl-durationformat@npm:0.10.16"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/ee3210da7b946a80995b36609a360a55d63f4626e3f40223215d782082f1f8254c49af6145f397ea6324b370038095145c6ff51fda8712e7b611f8609e1ac2b3
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/8d0f5bbf24528c6d8e65636502de64b13e12c71854935db8bf2ce6bcc5b6e0e19533d0e0178c1079b1dd52214b025369c98e297b0e8484fa8ce29c9f6408c953
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:3.2.11":
-  version: 3.2.11
-  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.11"
-  checksum: 10/3132dba96c7cfe63787e126a91e620211a32fa6a623cb763f96102ff153845fb12486f378aa1d761736a7641adb19f5cc307156c8b7a40eedd00223b87c8d2a9
+"@formatjs/intl-getcanonicallocales@npm:3.2.10":
+  version: 3.2.10
+  resolution: "@formatjs/intl-getcanonicallocales@npm:3.2.10"
+  checksum: 10/dbf704d141bd4efc4e2687bd745d1a847a7b94955c23d2f06fe26add8e5ab8ad6096168babad72f2b4568f1fbee32c1528082269273b750bed4bdd1dc5b5d396
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:8.3.12":
-  version: 8.3.12
-  resolution: "@formatjs/intl-listformat@npm:8.3.12"
+"@formatjs/intl-listformat@npm:8.3.11":
+  version: 8.3.11
+  resolution: "@formatjs/intl-listformat@npm:8.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/3ae640ab968b3051fd1b2d150d892a087d5a4feecb8bdf4a6a61726888996ee0b054de43e35548374d0a61d8577b5a48f23abfb9506c1560f88d64c0809691f1
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/a08a74c22bb01871944cad91fcb87342e30f3f6792375af3028737794a56b2dec6b7506c8e2b9d0495f4eff50f4d63542fcf86116cd4fdf1d4d8b6838a54ac5c
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:5.3.10":
-  version: 5.3.10
-  resolution: "@formatjs/intl-locale@npm:5.3.10"
+"@formatjs/intl-locale@npm:5.3.9":
+  version: 5.3.9
+  resolution: "@formatjs/intl-locale@npm:5.3.9"
   dependencies:
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
-    "@formatjs/intl-supportedvaluesof": "npm:2.3.9"
-  checksum: 10/f7d8be5ea145089b9daa56e24158f835ed0f3d67d3230b42c3a8a32f3dbdd98534236e9262d86f628288d09968fec32d1c2f5906ec1d5f38e692d436a4052255
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
+    "@formatjs/intl-supportedvaluesof": "npm:2.3.8"
+  checksum: 10/e2af858ec3ff75611d5412a1e39abce882eab2cf13eb278e4cd1647481321823cc2303c74e86c38b95662e668f6900f9d666136debb2377231d5ddf0bdba3218
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.8.12":
-  version: 0.8.12
-  resolution: "@formatjs/intl-localematcher@npm:0.8.12"
+"@formatjs/intl-localematcher@npm:0.8.11":
+  version: 0.8.11
+  resolution: "@formatjs/intl-localematcher@npm:0.8.11"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-  checksum: 10/4f9ecb936ac76cb978460edacbb2704e9760f65203e2c17f96b8db605a3c344ecc7da2ac78c897316f519b033c623b39062ba720e23fe0c2162af7c761f765e6
+    "@formatjs/fast-memoize": "npm:3.1.6"
+  checksum: 10/482b819100997439b2c7295c8112b43c81f64083644cde7124ef1afecaa8fc663bc7b9820b6386d02b45872db7a943c3f1f43a4f78780fe52ed4873ef422e7dc
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:9.3.13":
-  version: 9.3.13
-  resolution: "@formatjs/intl-numberformat@npm:9.3.13"
+"@formatjs/intl-numberformat@npm:9.3.12":
+  version: 9.3.12
+  resolution: "@formatjs/intl-numberformat@npm:9.3.12"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/59530d3aec0411a2dae8f2113829b969dceec3ec4a59032cc985ef1b9cebec6d406fbe4dd44ac69e905b4f3b3edb333d61f728a5610fc1e1e132e4bdcb2436aa
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/6a9f3115136ce9f74fab520d5eeddb6a3f23d32492b004c9c6f108a19dd18e9ccaec04582569238f089b3028cc68783a2b75328b3ce38b13bf30d6267cb33b20
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:6.3.12":
-  version: 6.3.12
-  resolution: "@formatjs/intl-pluralrules@npm:6.3.12"
+"@formatjs/intl-pluralrules@npm:6.3.11":
+  version: 6.3.11
+  resolution: "@formatjs/intl-pluralrules@npm:6.3.11"
   dependencies:
-    "@formatjs/bigdecimal": "npm:0.2.7"
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/23833b17822a648fc4e87dfe581733f303a8d1c4721a47e875994bcb56c5985c83ea01f0ab176557886fc6b2ef158ce50f9cafa1e1441badefddec0ea79c5303
+    "@formatjs/bigdecimal": "npm:0.2.6"
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/c5506c1a20f1aa7fdca24b6800243aec5cbacd5aa0de96d01b497fa9485f6affa7abf6b0d2ea04ebff0ec8a2d22a41913f4353b9fd9c6054899a9f168ef2ebd0
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:12.3.12":
-  version: 12.3.12
-  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.12"
+"@formatjs/intl-relativetimeformat@npm:12.3.11":
+  version: 12.3.11
+  resolution: "@formatjs/intl-relativetimeformat@npm:12.3.11"
   dependencies:
-    "@formatjs/intl-localematcher": "npm:0.8.12"
-  checksum: 10/c667ed62a13cbc8cd5d07f5dbc57a4d1b7e23c31f2aac0ef9e5f509feec014c5a2dfd77ac41a2c34fe537d6f1f6d8ebc8391a479a4294867bb4e980c7211f822
+    "@formatjs/intl-localematcher": "npm:0.8.11"
+  checksum: 10/ead23de113c9c28334ff2f8696e0f5ff0567f2b929def10d06e67dba2ca502967671abb1bb6ad06b200329e0215b469edd3c3ad9ed4259b313e97f2badfdab53
   languageName: node
   linkType: hard
 
-"@formatjs/intl-supportedvaluesof@npm:2.3.9":
-  version: 2.3.9
-  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.9"
+"@formatjs/intl-supportedvaluesof@npm:2.3.8":
+  version: 2.3.8
+  resolution: "@formatjs/intl-supportedvaluesof@npm:2.3.8"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-  checksum: 10/36254064dd8aab3cb2cbe31db88d751cb0c1d2b0739563ddd1736ed7bd8ec02881de385a69cc4ab7b691f670a3f11ec61a41ba678baa3d0967d87dc0b395cc7b
+    "@formatjs/fast-memoize": "npm:3.1.6"
+  checksum: 10/d9d4e4d5dda1c26c771d0f2746e1031f9695dee663fb2d2ef9f83794c1e8683de88caf6cdb9718022c592cc879c5c1afa7f72af4c77da9ce5e1d98b54267dfff
   languageName: node
   linkType: hard
 
@@ -5876,217 +5876,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript/native@npm:typescript@7.0.2":
-  version: 7.0.2
-  resolution: "typescript@npm:7.0.2"
-  dependencies:
-    "@typescript/typescript-aix-ppc64": "npm:7.0.2"
-    "@typescript/typescript-darwin-arm64": "npm:7.0.2"
-    "@typescript/typescript-darwin-x64": "npm:7.0.2"
-    "@typescript/typescript-freebsd-arm64": "npm:7.0.2"
-    "@typescript/typescript-freebsd-x64": "npm:7.0.2"
-    "@typescript/typescript-linux-arm": "npm:7.0.2"
-    "@typescript/typescript-linux-arm64": "npm:7.0.2"
-    "@typescript/typescript-linux-loong64": "npm:7.0.2"
-    "@typescript/typescript-linux-mips64el": "npm:7.0.2"
-    "@typescript/typescript-linux-ppc64": "npm:7.0.2"
-    "@typescript/typescript-linux-riscv64": "npm:7.0.2"
-    "@typescript/typescript-linux-s390x": "npm:7.0.2"
-    "@typescript/typescript-linux-x64": "npm:7.0.2"
-    "@typescript/typescript-netbsd-arm64": "npm:7.0.2"
-    "@typescript/typescript-netbsd-x64": "npm:7.0.2"
-    "@typescript/typescript-openbsd-arm64": "npm:7.0.2"
-    "@typescript/typescript-openbsd-x64": "npm:7.0.2"
-    "@typescript/typescript-sunos-x64": "npm:7.0.2"
-    "@typescript/typescript-win32-arm64": "npm:7.0.2"
-    "@typescript/typescript-win32-x64": "npm:7.0.2"
-  dependenciesMeta:
-    "@typescript/typescript-aix-ppc64":
-      optional: true
-    "@typescript/typescript-darwin-arm64":
-      optional: true
-    "@typescript/typescript-darwin-x64":
-      optional: true
-    "@typescript/typescript-freebsd-arm64":
-      optional: true
-    "@typescript/typescript-freebsd-x64":
-      optional: true
-    "@typescript/typescript-linux-arm":
-      optional: true
-    "@typescript/typescript-linux-arm64":
-      optional: true
-    "@typescript/typescript-linux-loong64":
-      optional: true
-    "@typescript/typescript-linux-mips64el":
-      optional: true
-    "@typescript/typescript-linux-ppc64":
-      optional: true
-    "@typescript/typescript-linux-riscv64":
-      optional: true
-    "@typescript/typescript-linux-s390x":
-      optional: true
-    "@typescript/typescript-linux-x64":
-      optional: true
-    "@typescript/typescript-netbsd-arm64":
-      optional: true
-    "@typescript/typescript-netbsd-x64":
-      optional: true
-    "@typescript/typescript-openbsd-arm64":
-      optional: true
-    "@typescript/typescript-openbsd-x64":
-      optional: true
-    "@typescript/typescript-sunos-x64":
-      optional: true
-    "@typescript/typescript-win32-arm64":
-      optional: true
-    "@typescript/typescript-win32-x64":
-      optional: true
-  bin:
-    tsc: bin/tsc
-  checksum: 10/b0179005349b43dc1febb35c4e79162cdf89b84eae60f6deac142429109041e07582e69a6aacf5a897e085869686d4512ea444a10acf5b5aa2b60910f82a19ca
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-aix-ppc64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-aix-ppc64@npm:7.0.2"
-  conditions: os=aix & cpu=ppc64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-darwin-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-darwin-arm64@npm:7.0.2"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-darwin-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-darwin-x64@npm:7.0.2"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-freebsd-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-freebsd-arm64@npm:7.0.2"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-freebsd-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-freebsd-x64@npm:7.0.2"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-arm64@npm:7.0.2"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-arm@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-arm@npm:7.0.2"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-loong64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-loong64@npm:7.0.2"
-  conditions: os=linux & cpu=loong64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-mips64el@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-mips64el@npm:7.0.2"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-ppc64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-ppc64@npm:7.0.2"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-riscv64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-riscv64@npm:7.0.2"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-s390x@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-s390x@npm:7.0.2"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-linux-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-linux-x64@npm:7.0.2"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-netbsd-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-netbsd-arm64@npm:7.0.2"
-  conditions: os=netbsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-netbsd-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-netbsd-x64@npm:7.0.2"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-openbsd-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-openbsd-arm64@npm:7.0.2"
-  conditions: os=openbsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-openbsd-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-openbsd-x64@npm:7.0.2"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-sunos-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-sunos-x64@npm:7.0.2"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-win32-arm64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-win32-arm64@npm:7.0.2"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@typescript/typescript-win32-x64@npm:7.0.2":
-  version: 7.0.2
-  resolution: "@typescript/typescript-win32-x64@npm:7.0.2"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@unrs/resolver-binding-android-arm-eabi@npm:1.12.2":
   version: 1.12.2
   resolution: "@unrs/resolver-binding-android-arm-eabi@npm:1.12.2"
@@ -7071,12 +6860,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"barcode-detector@npm:3.2.1":
-  version: 3.2.1
-  resolution: "barcode-detector@npm:3.2.1"
+"barcode-detector@npm:3.2.0":
+  version: 3.2.0
+  resolution: "barcode-detector@npm:3.2.0"
   dependencies:
-    zxing-wasm: "npm:3.1.1"
-  checksum: 10/17ba87cea89d3068794bb106851b09db0744fc4de1ae2998835564ac662876d8d9437ed89f7984c6765c941f2b366b0d33a4f5e8cc8d1c5a05f073a2b628cfce
+    zxing-wasm: "npm:3.1.0"
+  checksum: 10/f52eb18ddae2af3d4c9c76b47e7b639d0834cd32f558901d8a23cc00349047e53a6da5c3958653fa524dcb912ed9178f3e0d37939b9be00f9607772a84d90ccf
   languageName: node
   linkType: hard
 
@@ -8892,9 +8681,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:10.7.0":
-  version: 10.7.0
-  resolution: "eslint@npm:10.7.0"
+"eslint@npm:10.6.0":
+  version: 10.6.0
+  resolution: "eslint@npm:10.6.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.2"
@@ -8933,7 +8722,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/51cb70fbdd0de6586f0cb12625388faab18eb679cbdb523ecb631cae9f47fd9171d9ff02f570dc4d2e5700017908a81477511025ccb2a6603c5928fbfddcaebf
+  checksum: 10/36d02cdbe37668e601f255917c605d10a5d06d278648dc72cec21fe23b7b60a53453241b32c382ba8107533cacba70aeec97581cc4f4bb591544b1ada2516335
   languageName: node
   linkType: hard
 
@@ -9947,15 +9736,15 @@ __metadata:
     "@date-fns/tz": "npm:1.5.0"
     "@egjs/hammerjs": "npm:2.0.17"
     "@eslint/js": "npm:10.0.1"
-    "@formatjs/intl-datetimeformat": "npm:7.5.0"
-    "@formatjs/intl-displaynames": "npm:7.3.12"
-    "@formatjs/intl-durationformat": "npm:0.10.17"
-    "@formatjs/intl-getcanonicallocales": "npm:3.2.11"
-    "@formatjs/intl-listformat": "npm:8.3.12"
-    "@formatjs/intl-locale": "npm:5.3.10"
-    "@formatjs/intl-numberformat": "npm:9.3.13"
-    "@formatjs/intl-pluralrules": "npm:6.3.12"
-    "@formatjs/intl-relativetimeformat": "npm:12.3.12"
+    "@formatjs/intl-datetimeformat": "npm:7.4.10"
+    "@formatjs/intl-displaynames": "npm:7.3.11"
+    "@formatjs/intl-durationformat": "npm:0.10.16"
+    "@formatjs/intl-getcanonicallocales": "npm:3.2.10"
+    "@formatjs/intl-listformat": "npm:8.3.11"
+    "@formatjs/intl-locale": "npm:5.3.9"
+    "@formatjs/intl-numberformat": "npm:9.3.12"
+    "@formatjs/intl-pluralrules": "npm:6.3.11"
+    "@formatjs/intl-relativetimeformat": "npm:12.3.11"
     "@fullcalendar/core": "npm:6.1.21"
     "@fullcalendar/daygrid": "npm:6.1.21"
     "@fullcalendar/interaction": "npm:6.1.21"
@@ -10003,7 +9792,6 @@ __metadata:
     "@types/qrcode": "npm:1.5.6"
     "@types/sortablejs": "npm:1.15.9"
     "@types/tar": "npm:7.0.87"
-    "@typescript/native": "npm:typescript@7.0.2"
     "@vibrant/color": "npm:4.0.4"
     "@vitest/coverage-v8": "npm:4.1.10"
     "@vvo/tzdb": "npm:6.198.0"
@@ -10011,7 +9799,7 @@ __metadata:
     "@webcomponents/webcomponentsjs": "npm:2.8.0"
     babel-loader: "npm:10.1.1"
     babel-plugin-polyfill-corejs3: "npm:1.0.0"
-    barcode-detector: "npm:3.2.1"
+    barcode-detector: "npm:3.2.0"
     browserslist-useragent-regexp: "npm:4.1.4"
     cally: "npm:0.9.2"
     color-name: "npm:2.1.0"
@@ -10026,7 +9814,7 @@ __metadata:
     dialog-polyfill: "npm:0.5.6"
     echarts: "npm:6.1.0"
     element-internals-polyfill: "npm:3.0.2"
-    eslint: "npm:10.7.0"
+    eslint: "npm:10.6.0"
     eslint-config-prettier: "npm:10.1.8"
     eslint-import-resolver-webpack: "npm:0.13.11"
     eslint-plugin-import-x: "npm:4.17.1"
@@ -10050,7 +9838,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.3.0"
-    intl-messageformat: "npm:11.2.11"
+    intl-messageformat: "npm:11.2.10"
     js-yaml: "npm:5.2.1"
     jsdom: "npm:29.1.1"
     jszip: "npm:3.10.1"
@@ -10084,7 +9872,7 @@ __metadata:
     sortablejs: "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch"
     stacktrace-js: "npm:2.0.2"
     superstruct: "npm:2.0.2"
-    tar: "npm:7.5.20"
+    tar: "npm:7.5.19"
     terser-webpack-plugin: "npm:5.6.1"
     tinykeys: "patch:tinykeys@npm%3A4.0.0#~/.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch"
     ts-lit-plugin: "npm:2.0.2"
@@ -10398,13 +10186,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:11.2.11":
-  version: 11.2.11
-  resolution: "intl-messageformat@npm:11.2.11"
+"intl-messageformat@npm:11.2.10":
+  version: 11.2.10
+  resolution: "intl-messageformat@npm:11.2.10"
   dependencies:
-    "@formatjs/fast-memoize": "npm:3.1.7"
-    "@formatjs/icu-messageformat-parser": "npm:3.5.14"
-  checksum: 10/5074494588d6c16fb2730234b3c8eb80799189c9c21485323b5c119c22d3a7a8b385868b46479b81c09ca350d82ea0eeaf82b5e9799911b9a1b8bddbb2c3ad1c
+    "@formatjs/fast-memoize": "npm:3.1.6"
+    "@formatjs/icu-messageformat-parser": "npm:3.5.13"
+  checksum: 10/d3f751ebfe2015cf4a011afe5679398dfa7156c0bc2ccd76ba8c5aa4e82946bd663e750538c97a8b4c946a6d5f5d19fbb56b2e159d422c416e51bba9b10b2746
   languageName: node
   linkType: hard
 
@@ -14639,16 +14427,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:*, tar@npm:7.5.20, tar@npm:^7.4.3, tar@npm:^7.5.4":
-  version: 7.5.20
-  resolution: "tar@npm:7.5.20"
+"tar@npm:*, tar@npm:7.5.19, tar@npm:^7.4.3, tar@npm:^7.5.4":
+  version: 7.5.19
+  resolution: "tar@npm:7.5.19"
   dependencies:
     "@isaacs/fs-minipass": "npm:^4.0.0"
     chownr: "npm:^3.0.0"
     minipass: "npm:^7.1.2"
     minizlib: "npm:^3.1.0"
     yallist: "npm:^5.0.0"
-  checksum: 10/90a0fe423ac921197ad5eefc5e5f7ad7f42b06e80444c8c347c1e4112384cbe9cb53ade3ef71748eed3684888756869c2aeef6b6303c766101f3217e254d4be9
+  checksum: 10/0b06a0917fe68a4dff361e147db30fd67ae2ee85ab2863d62046a6ccef46f0d1906eed20f92277a436300eaaa0e3cd31d8763d7f02fa389f41d7966e58388db8
   languageName: node
   linkType: hard
 
@@ -15026,12 +14814,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^5.8.0":
-  version: 5.8.0
-  resolution: "type-fest@npm:5.8.0"
+"type-fest@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "type-fest@npm:5.7.0"
   dependencies:
     tagged-tag: "npm:^1.0.0"
-  checksum: 10/4dbe4c78ac6933d3d165b01f9d552991a84d63e5352110e01bebb5c46499fb1f44d199fc88835b18ee5662ee44c73926621f59525e46f7faa031086ac00b2686
+  checksum: 10/4867626aa489968df98e09ecdefbc45dfbb191ae5fb8924b3bd45da9cd940879b387086226366dce028570983a3fbe80adc53ad105a169bbbd27621c496bd6f0
   languageName: node
   linkType: hard
 
@@ -16514,14 +16302,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zxing-wasm@npm:3.1.1":
-  version: 3.1.1
-  resolution: "zxing-wasm@npm:3.1.1"
+"zxing-wasm@npm:3.1.0":
+  version: 3.1.0
+  resolution: "zxing-wasm@npm:3.1.0"
   dependencies:
     "@types/emscripten": "npm:^1.41.5"
-    type-fest: "npm:^5.8.0"
+    type-fest: "npm:^5.7.0"
   peerDependencies:
     "@types/emscripten": ">=1.39.6"
-  checksum: 10/1a714b50156ca7dce5eecb1c1b1c843925c75b354cd030d743bab905e16eb20c9c65646260574aeb21b03639f17d790412b945b9d32890ffdba3ec9d7643fca3
+  checksum: 10/ea68d0cfbe31d8dabcd9b942dcfdb703866c1f76ee0d804fb75f1e49f092a26771575705dd48d69927bc6525f146fd9e35030a5a72341222716d7f62e5f6c788
   languageName: node
   linkType: hard