Switch to lazy context and simplify rendering, reduce unnessasary memoisation

# Conflicts:
#	src/panels/lovelace/cards/clock/hui-clock-card-analog.ts
#	src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

.github/workflows/ci.yaml

@@ -58,8 +58,6 @@ jobs:
         run: yarn run lint:lit --quiet
       - name: Run prettier
         run: yarn run lint:prettier
-      - name: Check dependency licenses
-        run: yarn run lint:licenses
   test:
     name: Run tests
     runs-on: ubuntu-latest

.github/workflows/codeql-analysis.yml

@@ -41,14 +41,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
+        uses: github/codeql-action/init@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
+        uses: github/codeql-action/autobuild@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
+        uses: github/codeql-action/analyze@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
+        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
         with:
           sync-labels: true

.github/workflows/relative-ci.yaml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
           key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
           token: ${{ github.token }}
@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
           key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
+      - uses: release-drafter/release-drafter@5de93583980a40bd78603b6dfdcda5b4df377b32 # v7.2.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.yarnrc.yml

@@ -1,16 +1,11 @@
-approvedGitRepositories:
-  - "**"
-
 compressionLevel: mixed
 
+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
-enableScripts: true
-
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 3d
-
 yarnPath: .yarn/releases/yarn-4.14.1.cjs

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -177,14 +176,11 @@ module.exports.babelOptions = ({
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
       // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
-      // (otherwise babel-plugin-polyfill-corejs3 injects bare require("core-js/modules/...") calls
-      // that rspack does not transform, causing ReferenceError in browsers like Safari 14).
       sourceType: "unambiguous",
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
         "@?lit(?:-labs|-element|-html)?",
-        "@formatjs/(?:ecma402-abstract|intl-\\w+)",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },
   ],

build-scripts/get-built-in-node-module-shim.cjs

@@ -1,12 +0,0 @@
-/* global module */
-// Browser-only replacement for core-js/internals/get-built-in-node-module.
-// The original helper evaluates `Function('return require("...")')()`
-// when it detects a Node environment, which causes a runtime
-// ReferenceError on browsers (notably Safari 14) if environment
-// detection mis-classifies the page. Since browser bundles never need to
-// access Node built-in modules, return undefined unconditionally.
-//
-// Wired up via rspack `NormalModuleReplacementPlugin` in build-scripts/rspack.cjs.
-module.exports = function () {
-  return undefined;
-};

build-scripts/gulp/app.js

@@ -5,7 +5,6 @@ import "./compress.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./licenses.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -37,12 +36,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gen-licenses"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
     "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),

build-scripts/gulp/entry-html.js

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML
 
 import {
@@ -26,7 +25,6 @@ const SAFARI_TO_MACOS = {
   16: [11, 0, 0],
   17: [12, 0, 0],
   18: [13, 0, 0],
-  26: [26, 0, 0],
 };
 
 const getCommonTemplateVars = () => {

build-scripts/gulp/licenses.js

@@ -1,81 +0,0 @@
-// Gulp task to generate third-party license notices.
-
-import { readFile, access } from "fs/promises";
-import { generateLicenseFile } from "generate-license-file";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
-
-const OUTPUT_FILE = path.join(
-  paths.app_output_static,
-  "third-party-licenses.txt"
-);
-
-// The echarts package ships an Apache-2.0 NOTICE file that must be
-// redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
-
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
-//
-// Each entry is pinned to a specific version. If a package is updated,
-// this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
-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.6.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
-  },
-];
-
-gulp.task("gen-licenses", async () => {
-  const licenseOverrides = {};
-
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
-
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
-      throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
-          `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
-      );
-    }
-
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      await access(licensePath);
-    } catch {
-      throw new Error(`License file not found or unreadable: ${licensePath}`);
-    }
-
-    licenseOverrides[`${packageName}@${version}`] = licensePath;
-  }
-
-  await generateLicenseFile(
-    path.resolve(paths.root_dir, "package.json"),
-    OUTPUT_FILE,
-    { append: NOTICE_FILES, replace: licenseOverrides }
-  );
-});

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -174,16 +173,6 @@ const createRspackConfig = ({
             path.resolve(paths.root_dir, "src/util/empty.js")
           )
         : false,
-      // core-js ships a Node-only helper that evaluates
-      // `Function('return require("...")')()` when its runtime environment
-      // detection mis-classifies the page as Node. That produces a
-      // ReferenceError on browsers (observed on Safari 14). Since browser
-      // bundles never need to access Node built-in modules, replace it with
-      // a CommonJS no-op stub matching the helper's API (returns undefined).
-      new rspack.NormalModuleReplacementPlugin(
-        /core-js[\\/]internals[\\/]get-built-in-node-module(?:\.js)?$/,
-        path.resolve(__dirname, "get-built-in-node-module-shim.cjs")
-      ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({

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

@@ -42,7 +42,7 @@ class HcDemo extends HassElement {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));
 
     mockHistory(hass);
 

demo/src/ha-demo.ts

@@ -39,7 +39,7 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/lovelace.ts

@@ -1,5 +1,4 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
   selectedDemoConfig,
@@ -28,9 +27,6 @@ export const mockLovelace = (
     );
   });
 
-  hass.mockWS("lovelace/info", () =>
-    Promise.resolve({ resource_mode: "storage" } as LovelaceInfo)
-  );
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
   hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));

demo/src/stubs/recorder.ts

@@ -1,7 +1,6 @@
 import {
   addDays,
   addHours,
-  addMinutes,
   addMonths,
   differenceInHours,
   endOfDay,
@@ -13,19 +12,6 @@ import type {
 } from "../../../src/data/recorder";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-const getNextDate = (
-  currentDate: Date,
-  period: "5minute" | "hour" | "day" | "month"
-): Date => {
-  return period === "day"
-    ? addDays(currentDate, 1)
-    : period === "month"
-      ? addMonths(currentDate, 1)
-      : period === "hour"
-        ? addHours(currentDate, 1)
-        : addMinutes(currentDate, 5);
-};
-
 const generateMeanStatistics = (
   start: Date,
   end: Date,
@@ -39,10 +25,9 @@ const generateMeanStatistics = (
   while (end > currentDate && currentDate < now) {
     const delta = Math.random() * maxDiff;
     const mean = delta;
-    const nextDate = getNextDate(currentDate, period);
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
@@ -50,7 +35,12 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -68,12 +58,11 @@ const generateSumStatistics = (
   let sum = initValue;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
     const add = Math.random() * maxDiff;
     sum += add;
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
@@ -82,7 +71,12 @@ const generateSumStatistics = (
       state: initValue + sum,
       sum,
     });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -90,7 +84,7 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
   start: Date,
   end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,
   metered: boolean
@@ -104,12 +98,11 @@ const generateCurvedStatistics = (
   let half = false;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
     const add = i * (Math.random() * maxDiff);
     sum += add;
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
@@ -118,7 +111,7 @@ const generateCurvedStatistics = (
       state: initValue + sum,
       sum: metered ? sum : null,
     });
-    currentDate = nextDate;
+    currentDate = addHours(currentDate, 1);
     if (!half && i > hours / 2) {
       half = true;
     }
@@ -296,7 +289,7 @@ const statisticsFunctions: Record<
       end,
       period,
       productionFinalVal,
-      0.2
+      2
     );
     return [...morning, ...production, ...evening, ...rest];
   },

demo/src/stubs/sensor.ts

@@ -1,56 +1,58 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS("sensor/numeric_device_classes", () => ({
-    numeric_device_classes: [
-      "volume_storage",
-      "gas",
-      "data_size",
-      "irradiance",
-      "wind_speed",
-      "volatile_organic_compounds",
-      "volatile_organic_compounds_parts",
-      "voltage",
-      "frequency",
-      "precipitation_intensity",
-      "volume",
-      "precipitation",
-      "battery",
-      "nitrogen_dioxide",
-      "speed",
-      "signal_strength",
-      "pm1",
-      "nitrous_oxide",
-      "atmospheric_pressure",
-      "data_rate",
-      "temperature",
-      "power_factor",
-      "aqi",
-      "current",
-      "volume_flow_rate",
-      "humidity",
-      "duration",
-      "ozone",
-      "distance",
-      "pressure",
-      "pm25",
-      "weight",
-      "energy",
-      "carbon_monoxide",
-      "apparent_power",
-      "illuminance",
-      "energy_storage",
-      "moisture",
-      "power",
-      "water",
-      "carbon_dioxide",
-      "ph",
-      "reactive_power",
-      "monetary",
-      "nitrogen_monoxide",
-      "pm10",
-      "sound_pressure",
-      "sulphur_dioxide",
-    ],
-  }));
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
 };

gallery/src/ha-demo-options.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";

gallery/src/ha-gallery.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
@@ -6,8 +7,6 @@ import { customElement, query, state } from "lit/decorators";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import { setDirectionStyles } from "../../src/common/util/compute_rtl";
 import "../../src/components/ha-button";
-import "../../src/components/ha-drawer";
-import type { HaDrawer } from "../../src/components/ha-drawer";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
 import "../../src/components/ha-svg-icon";
@@ -40,8 +39,8 @@ class HaGallery extends LitElement {
   @query("notification-manager")
   private _notifications!: HTMLElementTagNameMap["notification-manager"];
 
-  @query("ha-drawer")
-  private _drawer!: HaDrawer;
+  @query("mwc-drawer")
+  private _drawer!: HTMLElementTagNameMap["mwc-drawer"];
 
   private _narrow = window.matchMedia("(max-width: 600px)").matches;
 
@@ -76,14 +75,15 @@ class HaGallery extends LitElement {
     }
 
     return html`
-      <ha-drawer
-        .direction=${this._rtl ? "rtl" : "ltr"}
+      <mwc-drawer
+        hasHeader
         .open=${!this._narrow}
         .type=${this._narrow ? "modal" : "dismissible"}
       >
-        <div class="drawer-title">Home Assistant Design</div>
+        <span slot="title">Home Assistant Design</span>
+        <!-- <span slot="subtitle">subtitle</span> -->
         <div class="sidebar">${sidebar}</div>
-        <div slot="appContent" class="app-content">
+        <div slot="appContent">
           <mwc-top-app-bar-fixed>
             <ha-icon-button
               slot="navigationIcon"
@@ -144,7 +144,7 @@ class HaGallery extends LitElement {
             </div>
           </div>
         </div>
-      </ha-drawer>
+      </mwc-drawer>
       <notification-manager
         .hass=${FAKE_HASS}
         id="notifications"
@@ -226,27 +226,12 @@ class HaGallery extends LitElement {
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
-        --ha-sidebar-width: 256px;
       }
 
       .sidebar {
-        box-sizing: border-box;
-        max-height: calc(100vh - 64px);
-        overflow-y: auto;
         padding: 4px;
       }
 
-      .drawer-title {
-        align-items: center;
-        box-sizing: border-box;
-        color: var(--primary-text-color);
-        display: flex;
-        font-size: var(--ha-font-size-l);
-        font-weight: var(--ha-font-weight-medium);
-        min-height: 64px;
-        padding: 0 16px;
-      }
-
       .sidebar a {
         color: var(--primary-text-color);
         display: block;
@@ -270,7 +255,7 @@ class HaGallery extends LitElement {
         opacity: 0.12;
       }
 
-      .app-content {
+      div[slot="appContent"] {
         display: flex;
         flex-direction: column;
         min-height: 100vh;

gallery/src/pages/components/ha-list.markdown

@@ -1,188 +0,0 @@
----
-title: List
----
-
-# List
-
-The list family provides accessible, keyboard-navigable list containers and
-item variants. Pick the container based on semantics, then the item based on
-interactivity.
-
-## Containers
-
-### `<ha-list-base>`
-
-A styled container with roving-tabindex keyboard navigation. Host role is
-`list`. Children should be `<ha-list-item-*>`. Arrow keys rove focus;
-Home/End jump to the first/last enabled item; Enter/Space activates the
-focused item.
-
-**Attributes**
-
-| Name         | Type    | Default | Description                    |
-| ------------ | ------- | ------- | ------------------------------ |
-| `wrap-focus` | Boolean | `false` | Arrow keys wrap past the ends. |
-| `aria-label` | String  | —       | Accessible name.               |
-
-**Events**
-
-- `ha-list-activated` — Enter/Space on a focused item. Detail
-  `{ index: number, item: HaListItemBase }`.
-
-**Methods**
-
-- `focus()` — focus the active item (or the first focusable one).
-- `focusItemAtIndex(index)` — make the item at `index` active and focus it.
-- `getActiveItemIndex()` — current active index, or `-1`.
-- `setActiveItemIndex(index, focusItem?)` — move the active index without
-  necessarily focusing.
-- `updateListItems()` — re-discover slotted items (called automatically on
-  slotchange).
-
-**CSS parts**
-
-- `base` — the outer `<div role="list">`.
-
-**CSS custom properties**
-
-- `--ha-list-gap` — spacing between items. Defaults to `0`.
-- `--ha-list-padding` — padding around the list. Defaults to `0`.
-
-### `<ha-list-selectable>`
-
-Selectable list. Extends `ha-list-base`. Host role is `listbox`; items must be
-`<ha-list-item-option>` (role `option`). Set `multi` for multi-select; the
-host reflects `aria-multiselectable`.
-
-**Attributes**
-
-| Name    | Type    | Default | Description                            |
-| ------- | ------- | ------- | -------------------------------------- |
-| `multi` | Boolean | `false` | Allow multiple options to be selected. |
-
-**Events**
-
-- `ha-list-selected` — selection changed. Detail
-  `{ index: number | Set<number>, diff: { added: Set<number>, removed: Set<number> } }`.
-  `index` is a `number` in single mode (`-1` when nothing selected) and a
-  `Set<number>` in multi mode.
-
-**Methods / getters**
-
-- `selected` (getter) — current selection (`number` or `Set<number>`).
-- `selectedItems` (getter) — selected `HaListItemOption` elements, in index
-  order.
-- `setSelected(indices)` — replace the entire selection.
-- `select(index)` — add `index` to the selection (replaces in single mode).
-- `toggle(index, force?)` — toggle a single index, or force on/off.
-- `clearSelection()` — clear all.
-
-### `<ha-list-nav>`
-
-Same as `ha-list-base`, but wrapped in a `<nav>` landmark
-(`<nav><div role="list">…</div></nav>`). Use `aria-label` to name the
-landmark — the value is forwarded to the inner `<nav>`. Items should be
-`<ha-list-item-button>` with an `href`.
-
-**CSS parts**
-
-- `nav` — the `<nav>` wrapper.
-- `base` — the inner `<div role="list">`.
-
-## Items
-
-All items inherit from `ha-row-item`, which provides the row layout and the
-shared slots/attributes below.
-
-### Shared row layout (`ha-row-item`)
-
-**Slots**
-
-- `start` — leading container (icon/avatar).
-- `end` — trailing container (meta/chevron).
-- `headline` — primary text (overrides the `headline` attribute).
-- `supporting-text` — secondary text (overrides the `supporting-text` attribute).
-- `content` — escape hatch: replaces the entire middle column.
-
-**Attributes**
-
-| Name              | Type    | Default | Description                             |
-| ----------------- | ------- | ------- | --------------------------------------- |
-| `headline`        | String  | —       | Primary text. Overridden by the slot.   |
-| `supporting-text` | String  | —       | Secondary text. Overridden by the slot. |
-| `disabled`        | Boolean | `false` | Dims the row and blocks pointer events. |
-
-**CSS parts**
-
-`base`, `start`, `content`, `headline`, `supporting-text`, `end`.
-
-**CSS custom properties**
-
-- `--ha-row-item-padding-block` — vertical padding.
-- `--ha-row-item-padding-inline` — horizontal padding.
-- `--ha-row-item-gap` — gap between `start`, `content`, and `end`.
-- `--ha-row-item-min-height` — minimum row height (default `48px`).
-
-### `<ha-list-item-base>`
-
-Non-interactive list row. Host role is `listitem`. Inherits everything from
-`ha-row-item`.
-
-**Attributes**
-
-- `interactive` (Boolean, default `false`) — opt this row into the parent
-  list's roving tabindex. Useful for sortable rows that need keyboard focus
-  but no click action. Interactive subclasses set this automatically.
-
-**CSS custom properties**
-
-- `--ha-list-item-focus-radius` — focus outline border-radius.
-- `--ha-list-item-focus-width` — focus outline width (steady state).
-- `--ha-list-item-focus-width-start` — focus outline width at the start of
-  the focus-in animation.
-- `--ha-list-item-focus-offset` — focus outline offset.
-- `--ha-list-item-focus-background` — background color on keyboard focus.
-
-### `<ha-list-item-button>`
-
-Interactive row. Renders an inner `<a>` when `href` is set, otherwise a
-`<button>`. The full row is the hit target. When placed inside a list using
-roving tabindex, the host is the tab stop and the inner element carries
-`tabindex="-1"`.
-
-**Attributes**
-
-- `href` (String) — when set, renders an `<a>` instead of a `<button>`.
-- `target` (String) — anchor `target` (requires `href`).
-- `rel` (String) — anchor `rel` (requires `href`).
-- `download` (String) — anchor `download` (requires `href`).
-
-**CSS parts**
-
-- `ripple` — the ripple effect element.
-
-### `<ha-list-item-option>`
-
-Selectable row. Host role is `option`; reflects `aria-selected`. Designed to
-sit inside `<ha-list-selectable>`, which owns selection state and toggles
-`selected` on this item — the option itself does not fire selection events.
-
-**Attributes**
-
-- `selected` (Boolean, default `false`, reflected) — set by the parent
-  `ha-list-selectable`.
-- `value` (String) — value identifying the option.
-- `appearance` (`"line"` | `"checkbox"`, default `"line"`) — `"line"`
-  highlights the row; `"checkbox"` renders a decorative `<ha-checkbox>`.
-- `selection-position` (`"start"` | `"end"`, default `"start"`) — side the
-  checkbox sits on when `appearance="checkbox"`.
-
-**CSS parts**
-
-- `checkbox` — wrapper around the `<ha-checkbox>` when `appearance="checkbox"`.
-- `ripple` — the ripple effect element.
-
-**CSS custom properties**
-
-- `--ha-list-item-selected-background` — background color when selected
-  (`appearance="line"`).

gallery/src/pages/components/ha-list.ts

@@ -1,415 +0,0 @@
-import {
-  mdiAccount,
-  mdiChevronRight,
-  mdiCog,
-  mdiHome,
-  mdiInformationOutline,
-  mdiMapMarker,
-  mdiOpenInNew,
-  mdiViewDashboard,
-  mdiWifi,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/item/ha-list-item-base";
-import "../../../../src/components/item/ha-list-item-button";
-import "../../../../src/components/item/ha-list-item-option";
-import "../../../../src/components/list/ha-list-base";
-import "../../../../src/components/list/ha-list-nav";
-import "../../../../src/components/list/ha-list-selectable";
-import type { HaListSelectedDetail } from "../../../../src/components/list/types";
-
-type Appearance = "line" | "checkbox";
-type Position = "start" | "end";
-
-const appearances: Appearance[] = ["line", "checkbox"];
-const positions: Position[] = ["start", "end"];
-const selectedStates = [false, true];
-const disabledStates = [false, true];
-
-@customElement("demo-components-ha-list")
-export class DemoHaList extends LitElement {
-  @state() private _buttonClicks = 0;
-
-  @state() private _single: number | Set<number> = -1;
-
-  @state() private _multiLine: number | Set<number> = new Set();
-
-  @state() private _multiCheckStart: number | Set<number> = new Set();
-
-  @state() private _multiCheckEnd: number | Set<number> = new Set();
-
-  private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];
-
-  protected render(): TemplateResult {
-    return html`
-      <h2>ha-list-base</h2>
-      <p>
-        Styled container with keyboard focus navigation. Children should be
-        <code>ha-list-item-*</code>.
-      </p>
-
-      <ha-card header="Info list (non-interactive rows)">
-        <ha-list-base aria-label="Device info">
-          <ha-list-item-base
-            headline="IP address"
-            supporting-text="192.168.1.42"
-          >
-            <ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Location" supporting-text="Living room">
-            <ha-svg-icon slot="start" .path=${mdiMapMarker}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Firmware" supporting-text="2026.4.1">
-            <ha-svg-icon
-              slot="start"
-              .path=${mdiInformationOutline}
-            ></ha-svg-icon>
-          </ha-list-item-base>
-        </ha-list-base>
-      </ha-card>
-
-      <ha-card header="Vertical list (default)">
-        <ha-list-base aria-label="Example list">
-          <ha-list-item-button>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <span slot="headline">First row</span>
-            <span slot="supporting-text">Supporting text</span>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <ha-svg-icon slot="start" .path=${mdiAccount}></ha-svg-icon>
-            <span slot="headline">Second row</span>
-          </ha-list-item-button>
-          <ha-list-item-button disabled>
-            <span slot="headline">Disabled row</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">Fourth row</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <ha-card header="Vertical list with wrap-focus">
-        <ha-list-base wrap-focus aria-label="Wrap focus">
-          <ha-list-item-button>
-            <span slot="headline">A</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">B</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">C</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-item-base</h2>
-      <p>Non-interactive base row with slot permutations.</p>
-
-      <ha-card header="Slot permutations">
-        <ha-list-base aria-label="Slot permutations">
-          <ha-list-item-base headline="Headline only"></ha-list-item-base>
-          <ha-list-item-base
-            headline="Headline"
-            supporting-text="Supporting text"
-          ></ha-list-item-base>
-          <ha-list-item-base headline="Start + headline">
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Start + headline + end">
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base
-            headline="Full row"
-            supporting-text="All slots filled"
-          >
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base>
-            <div slot="content" class="custom-content">
-              <strong>Custom content escape hatch</strong>
-              <span>Replaces the whole middle column</span>
-            </div>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Disabled row" disabled>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-          </ha-list-item-base>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-item-button</h2>
-      <p>
-        Interactive row. Renders an inner <code>&lt;a&gt;</code> when
-        <code>href</code> is set, otherwise a <code>&lt;button&gt;</code>.
-      </p>
-
-      <ha-card header="Button (default) / link (with href)">
-        <ha-list-base aria-label="Button items">
-          <ha-list-item-button @click=${this._onButtonClick}>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <span slot="headline">Button (clicks: ${this._buttonClicks})</span>
-          </ha-list-item-button>
-          <ha-list-item-button
-            href="https://www.home-assistant.io/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <ha-svg-icon slot="start" .path=${mdiOpenInNew}></ha-svg-icon>
-            <span slot="headline">Link (opens in new tab)</span>
-            <span slot="supporting-text"
-              >Cmd/Ctrl-click still opens in new tab</span
-            >
-          </ha-list-item-button>
-          <ha-list-item-button disabled>
-            <span slot="headline">Disabled button</span>
-          </ha-list-item-button>
-          <ha-list-item-button href="#nope" disabled>
-            <span slot="headline">Disabled link</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-selectable + ha-list-item-option</h2>
-      <p>
-        Selectable list (<code>role="listbox"</code>). Items must be
-        <code>ha-list-item-option</code>. Set <code>multi</code> for
-        multi-select.
-      </p>
-
-      <ha-card header="Single select, appearance=line">
-        <ha-list-selectable
-          aria-label="Single select"
-          @ha-list-selected=${this._onSingle}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                .value=${o}
-                ?selected=${this._isSel(this._single, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>selected: ${JSON.stringify(this._toJson(this._single))}</pre>
-      </ha-card>
-
-      <ha-card header="Multi select, appearance=line">
-        <ha-list-selectable
-          multi
-          aria-label="Multi select line"
-          @ha-list-selected=${this._onMultiLine}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                .value=${o}
-                ?selected=${this._isSel(this._multiLine, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>selected: ${JSON.stringify(this._toJson(this._multiLine))}</pre>
-      </ha-card>
-
-      <ha-card
-        header='Multi select, appearance=checkbox, selection-position="start"'
-      >
-        <ha-list-selectable
-          multi
-          aria-label="Multi checkbox start"
-          @ha-list-selected=${this._onMultiCheckStart}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                appearance="checkbox"
-                selection-position="start"
-                .value=${o}
-                ?selected=${this._isSel(this._multiCheckStart, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
-        >
-      </ha-card>
-
-      <ha-card
-        header='Multi select, appearance=checkbox, selection-position="end"'
-      >
-        <ha-list-selectable
-          multi
-          aria-label="Multi checkbox end"
-          @ha-list-selected=${this._onMultiCheckEnd}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                appearance="checkbox"
-                selection-position="end"
-                .value=${o}
-                ?selected=${this._isSel(this._multiCheckEnd, i)}
-              >
-                <span slot="headline">${o}</span>
-                <span slot="supporting-text">${o.length} characters</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
-        >
-      </ha-card>
-
-      <ha-card header="Option: all combinations">
-        <div class="grid">
-          ${appearances.map((appearance) =>
-            positions.map((position) =>
-              selectedStates.map((selected) =>
-                disabledStates.map(
-                  (disabled) => html`
-                    <div role="listbox" class="wrap" aria-label="single option">
-                      <ha-list-item-option
-                        appearance=${appearance}
-                        selection-position=${position}
-                        ?selected=${selected}
-                        ?disabled=${disabled}
-                      >
-                        <span slot="headline"
-                          >${appearance} / pos=${position}</span
-                        >
-                        <span slot="supporting-text"
-                          >selected=${String(selected)}
-                          disabled=${String(disabled)}</span
-                        >
-                      </ha-list-item-option>
-                    </div>
-                  `
-                )
-              )
-            )
-          )}
-        </div>
-      </ha-card>
-
-      <h2>ha-list-nav</h2>
-      <p>
-        Same as <code>ha-list-base</code> but wrapped in a
-        <code>&lt;nav&gt;</code> landmark.
-      </p>
-
-      <ha-card header="Sidebar-style navigation">
-        <ha-list-nav aria-label="Primary navigation">
-          ${[
-            { name: "Overview", path: "#overview", icon: mdiHome },
-            { name: "Dashboards", path: "#dashboards", icon: mdiViewDashboard },
-            { name: "Map", path: "#map", icon: mdiMapMarker },
-            { name: "Settings", path: "#settings", icon: mdiCog },
-          ].map(
-            (p) => html`
-              <ha-list-item-button .href=${p.path}>
-                <ha-svg-icon slot="start" .path=${p.icon}></ha-svg-icon>
-                <span slot="headline">${p.name}</span>
-                <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-              </ha-list-item-button>
-            `
-          )}
-        </ha-list-nav>
-      </ha-card>
-    `;
-  }
-
-  private _isSel(value: number | Set<number>, index: number): boolean {
-    if (typeof value === "number") {
-      return value === index;
-    }
-    return value.has(index);
-  }
-
-  private _toJson(value: number | Set<number>): unknown {
-    return value instanceof Set ? [...value] : value;
-  }
-
-  private _onButtonClick = () => {
-    this._buttonClicks++;
-  };
-
-  private _onSingle = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._single = ev.detail.index;
-  };
-
-  private _onMultiLine = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiLine = ev.detail.index;
-  };
-
-  private _onMultiCheckStart = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiCheckStart = ev.detail.index;
-  };
-
-  private _onMultiCheckEnd = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiCheckEnd = ev.detail.index;
-  };
-
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
-      padding: var(--ha-space-6);
-    }
-    h2 {
-      margin: var(--ha-space-4) 0 0;
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-    }
-    p {
-      margin: 0 0 var(--ha-space-2);
-      color: var(--secondary-text-color);
-    }
-    ha-card {
-      max-width: 560px;
-    }
-    pre {
-      padding: var(--ha-space-4);
-      background: var(--secondary-background-color);
-      margin: 0;
-    }
-    .custom-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-1);
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--ha-space-3);
-      padding: var(--ha-space-3);
-    }
-    .wrap {
-      border: 1px solid var(--divider-color);
-      border-radius: var(--ha-border-radius-sm);
-    }
-    .drag-handle {
-      cursor: grab;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-list": DemoHaList;
-  }
-}

gallery/src/pages/components/ha-select-box.ts

@@ -43,22 +43,12 @@ const fullOptions: SelectBoxOption[] = [
   },
 ];
 
-const manyOptions: SelectBoxOption[] = [
-  { value: "opt1", label: "Option 1" },
-  { value: "opt2", label: "Option 2" },
-  { value: "opt3", label: "Option 3" },
-  { value: "opt4", label: "Option 4" },
-  { value: "opt5", label: "Option 5" },
-  { value: "opt6", label: "Option 6" },
-];
-
 const selects: {
   id: string;
   label: string;
   class?: string;
   options: SelectBoxOption[];
   disabled?: boolean;
-  maxColumns?: number;
 }[] = [
   {
     id: "basic",
@@ -70,12 +60,6 @@ const selects: {
     label: "With description and image",
     options: fullOptions,
   },
-  {
-    id: "two-columns",
-    label: "2 columns (maxColumns=2)",
-    options: manyOptions,
-    maxColumns: 2,
-  },
 ];
 
 @customElement("demo-components-ha-select-box")
@@ -83,14 +67,13 @@ export class DemoHaSelectBox extends LitElement {
   @state() private value?: string = "off";
 
   handleValueChanged(e: CustomEvent) {
-    console.log(e.detail.value);
     this.value = e.detail.value as string;
   }
 
   protected render(): TemplateResult {
     return html`
       ${repeat(selects, (select) => {
-        const { id, label, options, maxColumns } = select;
+        const { id, label, options } = select;
         return html`
           <ha-card>
             <div class="card-content">
@@ -98,7 +81,6 @@ export class DemoHaSelectBox extends LitElement {
               <ha-select-box
                 .value=${this.value}
                 .options=${options}
-                .maxColumns=${maxColumns}
                 @value-changed=${this.handleValueChanged}
               >
               </ha-select-box>

gallery/src/pages/misc/entity-state.ts

@@ -52,7 +52,6 @@ const SENSOR_DEVICE_CLASSES = [
   "sulphur_dioxide",
   "temperature",
   "timestamp",
-  "uptime",
   "volatile_organic_compounds",
   "volatile_organic_compounds_parts",
   "voltage",

landing-page/src/ha-landing-page.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { extractSearchParam } from "../../src/common/url/search-params";
 import "../../src/components/ha-alert";
 import "../../src/components/ha-button";
-import "../../src/components/animation/ha-fade-in";
+import "../../src/components/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";

package.json

@@ -14,7 +14,6 @@
     "format:prettier": "prettier . --cache --write",
     "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",
     "format": "yarn run format:eslint && yarn run format:prettier",
     "postinstall": "husky",
@@ -29,42 +28,44 @@
   "dependencies": {
     "@babel/runtime": "7.29.2",
     "@braintree/sanitize-url": "7.1.2",
-    "@codemirror/autocomplete": "6.20.2",
+    "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
     "@codemirror/lang-jinja": "6.0.1",
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
-    "@codemirror/lint": "6.9.6",
     "@codemirror/search": "6.7.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.43.0",
+    "@codemirror/view": "6.41.1",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.5",
-    "@formatjs/intl-displaynames": "7.3.7",
-    "@formatjs/intl-durationformat": "0.10.11",
-    "@formatjs/intl-getcanonicallocales": "3.2.8",
-    "@formatjs/intl-listformat": "8.3.7",
-    "@formatjs/intl-locale": "5.3.7",
-    "@formatjs/intl-numberformat": "9.3.8",
-    "@formatjs/intl-pluralrules": "6.3.7",
-    "@formatjs/intl-relativetimeformat": "12.3.7",
+    "@formatjs/intl-datetimeformat": "7.4.0",
+    "@formatjs/intl-displaynames": "7.3.3",
+    "@formatjs/intl-durationformat": "0.10.5",
+    "@formatjs/intl-getcanonicallocales": "3.2.4",
+    "@formatjs/intl-listformat": "8.3.3",
+    "@formatjs/intl-locale": "5.3.3",
+    "@formatjs/intl-numberformat": "9.3.3",
+    "@formatjs/intl-pluralrules": "6.3.3",
+    "@formatjs/intl-relativetimeformat": "12.3.3",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.3.1-ha.3",
+    "@home-assistant/webawesome": "3.3.1-ha.1",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
+    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
+    "@material/mwc-drawer": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
+    "@material/mwc-radio": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
@@ -74,12 +75,12 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.21",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.0.1",
-    "@tsparticles/preset-links": "4.0.1",
+    "@tsparticles/engine": "3.9.1",
+    "@tsparticles/preset-links": "3.2.0",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.1.3",
+    "barcode-detector": "3.1.2",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
@@ -98,15 +99,15 @@
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.6",
+    "intl-messageformat": "11.2.2",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
-    "lit": "3.3.3",
-    "lit-html": "3.3.3",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "18.0.3",
+    "marked": "18.0.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -120,29 +121,29 @@
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
     "weekstart": "2.0.0",
-    "workbox-cacheable-response": "7.4.1",
-    "workbox-core": "7.4.1",
-    "workbox-expiration": "7.4.1",
-    "workbox-precaching": "7.4.1",
-    "workbox-routing": "7.4.1",
-    "workbox-strategies": "7.4.1",
+    "workbox-cacheable-response": "7.4.0",
+    "workbox-core": "7.4.0",
+    "workbox-expiration": "7.4.0",
+    "workbox-precaching": "7.4.0",
+    "workbox-routing": "7.4.0",
+    "workbox-strategies": "7.4.0",
     "xss": "1.0.15"
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
     "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.5",
+    "@babel/preset-env": "7.29.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.1",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.60.0",
-    "@lokalise/node-api": "16.0.0",
+    "@html-eslint/eslint-plugin": "0.59.0",
+    "@lokalise/node-api": "15.7.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.11",
-    "@rspack/core": "2.0.3",
-    "@rspack/dev-server": "2.0.1",
+    "@rsdoctor/rspack-plugin": "1.5.9",
+    "@rspack/core": "2.0.0",
+    "@rspack/dev-server": "2.0.0",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -160,34 +161,32 @@
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.6",
+    "@vitest/coverage-v8": "4.1.5",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.4.0",
+    "eslint": "10.2.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.16.2",
-    "eslint-plugin-lit": "2.3.1",
+    "eslint-plugin-lit": "2.2.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
     "eslint-plugin-wc": "3.1.0",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.5",
-    "generate-license-file": "4.1.1",
+    "fs-extra": "11.3.4",
     "glob": "13.0.6",
-    "globals": "17.6.0",
+    "globals": "17.5.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.1.1",
+    "jsdom": "29.0.2",
     "jszip": "3.10.1",
-    "license-checker-rseidelsohn": "4.4.2",
-    "lint-staged": "17.0.4",
+    "lint-staged": "16.4.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -196,25 +195,25 @@
     "prettier": "3.8.3",
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
-    "sinon": "22.0.0",
-    "tar": "7.5.15",
-    "terser-webpack-plugin": "5.6.0",
+    "sinon": "21.1.2",
+    "tar": "7.5.13",
+    "terser-webpack-plugin": "5.5.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.3",
+    "typescript-eslint": "8.59.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.6",
+    "vitest": "4.1.5",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
-    "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
+    "workbox-build": "patch:workbox-build@npm%3A7.4.0#~/.yarn/patches/workbox-build-npm-7.4.0-c84561662c.patch"
   },
   "resolutions": {
-    "lit": "3.3.3",
-    "lit-html": "3.3.3",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.6.0",
+    "globals": "17.5.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"

public/static/images/form/automation_behavior_trigger_any.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="88" height="28" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
-<rect x="124" width="88" height="28" rx="8" fill="white"/>
-<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
-</svg>

public/static/images/form/automation_behavior_trigger_any_dark.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
-<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
-<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
-<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
-</svg>

public/static/images/form/automation_behavior_trigger_first.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="88" height="28" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
-<rect x="124" width="88" height="28" rx="8" fill="white"/>
-<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
-</svg>

public/static/images/form/automation_behavior_trigger_first_dark.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
-<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
-<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
-<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
-</svg>

public/static/images/form/automation_behavior_trigger_last.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="88" height="28" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="black" fill-opacity="0.12"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M107.667 18.1167V14.7833H100.233L100.208 13.1083H107.667V9.78333L111.833 13.95L107.667 18.1167Z" fill="#B1B1B1"/>
-<rect x="124" width="88" height="28" rx="8" fill="white"/>
-<rect x="124.5" y="0.5" width="87" height="27" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M237.5 13.1667H222.5V11.5H237.5V13.1667ZM237.5 14.8333H222.5V16.5H237.5V14.8333Z" fill="#B1B1B1"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="#5E5E5E"/>
-</svg>

public/static/images/form/automation_behavior_trigger_last_dark.svg

@@ -1,17 +0,0 @@
-<svg width="268" height="28" viewBox="0 0 268 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H80C84.4183 0 88 3.58172 88 8V20C88 24.4183 84.4183 28 80 28H8C3.58172 28 0 24.4183 0 20V8Z" fill="#1C1C1C"/>
-<path d="M8 0.5H80C84.1421 0.5 87.5 3.85786 87.5 8V20C87.5 24.1421 84.1421 27.5 80 27.5H8C3.85786 27.5 0.5 24.1421 0.5 20V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="8" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="28" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="48" y="8" width="12" height="12" rx="3" fill="white" fill-opacity="0.24"/>
-<rect x="68" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M109.333 16.45C108.718 17.065 107.667 16.6294 107.667 15.7596C107.667 15.2204 107.23 14.7833 106.69 14.7833H101.058C100.601 14.7833 100.228 14.4159 100.221 13.9583C100.214 13.4909 100.591 13.1083 101.058 13.1083H106.693C107.231 13.1083 107.667 12.6723 107.667 12.1345C107.667 11.2668 108.716 10.8323 109.329 11.4458L110.613 12.7296C111.287 13.4036 111.287 14.4964 110.613 15.1704L109.333 16.45Z" fill="white" fill-opacity="0.48"/>
-<path d="M124 8C124 3.58172 127.582 0 132 0H204C208.418 0 212 3.58172 212 8V20C212 24.4183 208.418 28 204 28H132C127.582 28 124 24.4183 124 20V8Z" fill="#1C1C1C"/>
-<path d="M132 0.5H204C208.142 0.5 211.5 3.85786 211.5 8V20C211.5 24.1421 208.142 27.5 204 27.5H132C127.858 27.5 124.5 24.1421 124.5 20V8C124.5 3.85786 127.858 0.5 132 0.5Z" stroke="white" stroke-opacity="0.24"/>
-<rect x="132" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="152" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="172" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<rect x="192" y="8" width="12" height="12" rx="3" fill="#009AC7"/>
-<path d="M237.5 12.3333C237.5 12.7936 237.127 13.1667 236.667 13.1667H223.333C222.873 13.1667 222.5 12.7936 222.5 12.3333C222.5 11.8731 222.873 11.5 223.333 11.5H236.667C237.127 11.5 237.5 11.8731 237.5 12.3333ZM237.5 15.6667C237.5 15.2064 237.127 14.8333 236.667 14.8333H223.333C222.873 14.8333 222.5 15.2064 222.5 15.6667C222.5 16.1269 222.873 16.5 223.333 16.5H236.667C237.127 16.5 237.5 16.1269 237.5 15.6667Z" fill="white" fill-opacity="0.48"/>
-<path d="M257.167 16.5H253L258.833 4.83337V11.5H263L257.167 23.1667V16.5Z" fill="white" fill-opacity="0.24"/>
-</svg>

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260429.0"
+version      = "20260325.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

script/check-licenses

@@ -1,91 +0,0 @@
-#!/usr/bin/env node
-// Checks that all production dependencies use approved open-source licenses.
-//
-// To allow a new license type, add its SPDX identifier to ALLOWED_LICENSES.
-// To allow a specific package that cannot be relicensed (e.g. a dual-license
-// package where the reported identifier is non-standard), add it to
-// ALLOWED_PACKAGES with a comment explaining why.
-
-import { createRequire } from "module";
-import { fileURLToPath } from "url";
-import path from "path";
-
-const require = createRequire(import.meta.url);
-const checker = require("license-checker-rseidelsohn");
-const root = path.resolve(fileURLToPath(import.meta.url), "../../");
-
-// Permissive licenses that are compatible with distribution in a compiled wheel.
-// Copyleft licenses (GPL, LGPL, AGPL, EUPL, etc.) must NOT be added here.
-const ALLOWED_LICENSES = new Set([
-  "MIT",
-  "MIT*",
-  "ISC",
-  "BSD-2-Clause",
-  "BSD-3-Clause",
-  "BSD*",
-  "Apache-2.0",
-  "0BSD",
-  "CC0-1.0",
-  "(MIT OR CC0-1.0)",
-  "(MIT AND Zlib)",
-  "Python-2.0", // argparse - Python Software Foundation License (permissive)
-  "Public Domain",
-  "W3C-20150513", // wicg-inert - W3C Software and Document License (permissive)
-  "Unlicense",
-  "CC-BY-4.0",
-]);
-
-// Packages whose license identifier is ambiguous or non-standard but have been
-// manually verified as permissive. Add only when strictly necessary.
-const ALLOWED_PACKAGES = {
-  // No entries currently needed.
-};
-
-checker.init(
-  {
-    start: root,
-    production: true,
-    excludePrivatePackages: true,
-  },
-  (err, packages) => {
-    if (err) {
-      console.error("license-checker failed:", err);
-      process.exit(1);
-    }
-
-    const violations = [];
-
-    for (const [nameAtVersion, info] of Object.entries(packages)) {
-      if (nameAtVersion in ALLOWED_PACKAGES) {
-        continue;
-      }
-
-      const license = info.licenses;
-
-      if (!ALLOWED_LICENSES.has(license)) {
-        violations.push({ package: nameAtVersion, license });
-      }
-    }
-
-    if (violations.length > 0) {
-      console.error(
-        "The following packages have licenses that are not on the allowlist:"
-      );
-      for (const { package: pkg, license } of violations) {
-        console.error(`  ${pkg}: ${license}`);
-      }
-      console.error(`
-If the license is permissive and appropriate for distribution, add it
-to ALLOWED_LICENSES in script/check-licenses. If it is a specific
-package with an ambiguous identifier, add it to ALLOWED_PACKAGES.
-
-Do NOT add copyleft licenses (GPL, LGPL, AGPL, etc.) to the allowlist.`);
-      process.exit(1);
-    }
-
-    const count = Object.keys(packages).length;
-    console.log(
-      `License check passed: all ${count} production dependencies use approved licenses.`
-    );
-  }
-);

src/auth/ha-auth-flow.ts

@@ -54,8 +54,6 @@ export class HaAuthFlow extends LitElement {
 
   @query("ha-auth-form") private _form?: HaAuthForm;
 
-  @query("ha-form") private _haForm?: HTMLElement;
-
   createRenderRoot() {
     return this;
   }
@@ -162,8 +160,9 @@ export class HaAuthFlow extends LitElement {
 
     // 100ms to give all the form elements time to initialize.
     setTimeout(() => {
-      if (this._haForm) {
-        (this._haForm as any).focus();
+      const form = this.renderRoot.querySelector("ha-form");
+      if (form) {
+        (form as any).focus();
       }
     }, 100);
   }

src/common/config/can_show_page.ts

@@ -5,6 +5,7 @@ import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   (isCore(page) || isLoadedIntegration(hass, page)) &&
+  !hideAdvancedPage(hass, page) &&
   isNotLoadedIntegration(hass, page);
 
 export const isLoadedIntegration = (
@@ -26,3 +27,8 @@ export const isNotLoadedIntegration = (
   );
 
 export const isCore = (page: PageNavigation) => page.core;
+export const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
+export const userWantsAdvanced = (hass: HomeAssistant) =>
+  hass.userData?.showAdvanced;
+export const hideAdvancedPage = (hass: HomeAssistant, page: PageNavigation) =>
+  isAdvancedPage(page) && !userWantsAdvanced(hass);

src/common/controllers/condition-listeners-controller.ts

@@ -1,59 +0,0 @@
-import type {
-  ReactiveController,
-  ReactiveControllerHost,
-} from "@lit/reactive-element/reactive-controller";
-import type {
-  Condition,
-  ConditionContext,
-} from "../../panels/lovelace/common/validate-condition";
-import type { HomeAssistant } from "../../types";
-import { setupConditionListeners } from "../condition/listeners";
-
-/**
- * Reactive controller that manages the media-query and time-based listeners
- * needed to keep a set of lovelace visibility conditions evaluated live.
- *
- * The host is responsible for the actual evaluation (e.g. computing visible /
- * hidden / invalid state); the controller only triggers it via the supplied
- * `onUpdate` callback when something the conditions depend on changes. Call
- * `setup()` whenever the conditions change; the controller clears previous
- * listeners and re-subscribes. Listeners are automatically released when the
- * host disconnects.
- */
-export class ConditionListenersController implements ReactiveController {
-  private _unsubs: (() => void)[] = [];
-
-  constructor(host: ReactiveControllerHost) {
-    host.addController(this);
-  }
-
-  public hostDisconnected(): void {
-    this.clear();
-  }
-
-  public setup(
-    conditions: Condition[],
-    hass: HomeAssistant,
-    onUpdate: () => void,
-    getContext?: () => ConditionContext
-  ): void {
-    this.clear();
-    if (!conditions.length) {
-      return;
-    }
-    setupConditionListeners(
-      conditions,
-      hass,
-      (unsub) => this._unsubs.push(unsub),
-      () => onUpdate(),
-      getContext
-    );
-  }
-
-  public clear(): void {
-    for (const unsub of this._unsubs) {
-      unsub();
-    }
-    this._unsubs = [];
-  }
-}

src/common/dom/compare-node-order.ts

@@ -1,54 +0,0 @@
-/**
- * Walks up the composed tree (jumping shadow roots → their hosts), returning
- * the ancestor chain top-down. Used to compare two nodes that may live in
- * different shadow trees — `Node.compareDocumentPosition` only works within a
- * single root and returns `DOCUMENT_POSITION_DISCONNECTED` otherwise.
- */
-const composedAncestorPath = (node: Node): Node[] => {
-  const path: Node[] = [];
-  let cur: Node | null = node;
-  while (cur) {
-    path.push(cur);
-    const parent = cur.parentNode;
-    if (parent instanceof ShadowRoot) {
-      cur = parent.host;
-    } else if (parent) {
-      cur = parent;
-    } else {
-      const root = cur.getRootNode();
-      cur = root instanceof ShadowRoot ? root.host : null;
-    }
-  }
-  return path.reverse();
-};
-
-/**
- * Document-order comparator that works across shadow boundaries. Suitable as
- * the `Array.prototype.sort` callback for collections of nodes that may live
- * in different shadow trees.
- */
-export const compareNodeOrder = (a: Node, b: Node): number => {
-  if (a === b) {
-    return 0;
-  }
-  const pa = composedAncestorPath(a);
-  const pb = composedAncestorPath(b);
-  let i = 0;
-  while (i < pa.length && i < pb.length && pa[i] === pb[i]) {
-    i++;
-  }
-  if (i === 0) {
-    return 0;
-  }
-  if (i === pa.length) {
-    return -1;
-  }
-  if (i === pb.length) {
-    return 1;
-  }
-  // pa[i] and pb[i] are siblings under the LCA, guaranteed same root.
-  // eslint-disable-next-line no-bitwise
-  return pa[i].compareDocumentPosition(pb[i]) & Node.DOCUMENT_POSITION_FOLLOWING
-    ? -1
-    : 1;
-};

src/common/entity/battery_icon.ts

@@ -1,17 +1,3 @@
-import {
-  mdiBattery,
-  mdiBattery10,
-  mdiBattery20,
-  mdiBattery30,
-  mdiBattery40,
-  mdiBattery50,
-  mdiBattery60,
-  mdiBattery70,
-  mdiBattery80,
-  mdiBattery90,
-  mdiBatteryAlertVariantOutline,
-  mdiBatteryUnknown,
-} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 
 const BATTERY_ICONS = {
@@ -26,18 +12,6 @@ const BATTERY_ICONS = {
   90: "mdi:battery-90",
   100: "mdi:battery",
 };
-const BATTERY_ICON_PATHS = {
-  10: mdiBattery10,
-  20: mdiBattery20,
-  30: mdiBattery30,
-  40: mdiBattery40,
-  50: mdiBattery50,
-  60: mdiBattery60,
-  70: mdiBattery70,
-  80: mdiBattery80,
-  90: mdiBattery90,
-  100: mdiBattery,
-};
 const BATTERY_CHARGING_ICONS = {
   10: "mdi:battery-charging-10",
   20: "mdi:battery-charging-20",
@@ -83,15 +57,3 @@ export const batteryLevelIcon = (
   }
   return BATTERY_ICONS[batteryRound];
 };
-
-export const batteryLevelIconPath = (batteryLevel: number | string): string => {
-  const batteryValue = Number(batteryLevel);
-  if (isNaN(batteryValue)) {
-    return mdiBatteryUnknown;
-  }
-  if (batteryValue <= 5) {
-    return mdiBatteryAlertVariantOutline;
-  }
-  const batteryRound = Math.round(batteryValue / 10) * 10;
-  return BATTERY_ICON_PATHS[batteryRound];
-};

src/common/entity/compute_entity_name_display.ts

@@ -137,10 +137,7 @@ export const computeEntityPickerDisplay = (
     hass.floors
   );
 
-  const isRTL = computeRTL(
-    hass.language,
-    hass.translationMetadata.translations
-  );
+  const isRTL = computeRTL(hass);
 
   const primary = entityName || deviceName || stateObj.entity_id;
   const secondary =

src/common/entity/compute_entity_unit_display.ts

@@ -1,52 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState } from "../../data/entity/entity";
-import type { HomeAssistant } from "../../types";
-
-interface EntityUnitStubConfig {
-  entity: string;
-  attribute?: string;
-  unit?: string;
-}
-
-/**
- * Computes the display unit for an entity.
- *
- * @param hass - Home Assistant instance
- * @param stateObj - Entity state object
- * @param config - Element configuration
- * @returns Computed entity unit
- */
-export const computeEntityUnitDisplay = (
-  hass: HomeAssistant,
-  stateObj: HassEntity | undefined,
-  config: EntityUnitStubConfig
-): string => {
-  let unit;
-  if (
-    stateObj &&
-    !isUnavailableState(stateObj.state) &&
-    (config.attribute || stateObj.attributes.device_class !== "duration")
-  ) {
-    // check for an explicitly defined unit in config
-    unit = config.unit;
-
-    if (!unit) {
-      if (!config.attribute) {
-        // use entity's unit_of_measurement
-        const stateParts = hass.formatEntityStateToParts(stateObj);
-        unit = stateParts.find((part) => part.type === "unit")?.value;
-      } else {
-        // use attribute's unit if available
-        const attrParts = hass.formatEntityAttributeValueToParts(
-          stateObj,
-          config.attribute
-        );
-        unit = attrParts.find((part) => part.type === "unit")?.value;
-      }
-    }
-
-    return unit ?? "";
-  }
-
-  return "";
-};

src/common/entity/compute_state_display.ts

@@ -17,7 +17,6 @@ import {
 import { blankBeforeUnit } from "../translations/blank_before_unit";
 import type { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
-import { SENSOR_TIMESTAMP_DEVICE_CLASSES } from "../../data/sensor";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -267,8 +266,7 @@ const computeStateToPartsFromEntityAttributes = (
       "wake_word",
       "datetime",
     ].includes(domain) ||
-    (domain === "sensor" &&
-      SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
+    (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {
       return [

src/common/entity/entity_filter.ts

@@ -117,6 +117,9 @@ export const generateEntityFilter = (
       }
     }
     if (entityCategories) {
+      if (!entity) {
+        return false;
+      }
       const category = entity?.entity_category || "none";
       if (!entityCategories.has(category)) {
         return false;

src/common/entity/get_states.ts

@@ -225,7 +225,6 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "sulphur_dioxide",
       "temperature",
       "timestamp",
-      "uptime",
       "volatile_organic_compounds",
       "volatile_organic_compounds_parts",
       "voltage",

src/common/util/compute_rtl.ts

@@ -1,20 +1,16 @@
 import type { LitElement } from "lit";
-import type { HomeAssistant, Translation } from "../../types";
+import type { HomeAssistant } from "../../types";
 
-export function computeRTL(
-  language = "en",
-  translations: Record<string, Translation>
-) {
-  if (translations[language]) {
-    return translations[language].isRTL || false;
+export function computeRTL(hass: HomeAssistant) {
+  const lang = hass.language || "en";
+  if (hass.translationMetadata.translations[lang]) {
+    return hass.translationMetadata.translations[lang].isRTL || false;
   }
   return false;
 }
 
 export function computeRTLDirection(hass: HomeAssistant) {
-  return emitRTLDirection(
-    computeRTL(hass.language, hass.translationMetadata.translations)
-  );
+  return emitRTLDirection(computeRTL(hass));
 }
 
 export function emitRTLDirection(rtl: boolean) {

src/common/util/uuid.ts

@@ -1,17 +0,0 @@
-// Generates an RFC 4122 v4 UUID. Falls back to crypto.getRandomValues when
-// crypto.randomUUID is unavailable (e.g. non-secure HTTP contexts on a LAN).
-export const generateUuidV4 = (): string => {
-  if (typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  const bytes = new Uint8Array(16);
-  crypto.getRandomValues(bytes);
-  /* eslint-disable no-bitwise */
-  bytes[6] = (bytes[6] & 0x0f) | 0x40;
-  bytes[8] = (bytes[8] & 0x3f) | 0x80;
-  /* eslint-enable no-bitwise */
-  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join(
-    ""
-  );
-  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20, 32)}`;
-};

src/common/util/view-transition.ts

@@ -10,17 +10,6 @@ export const setViewTransitionDisabled = (disabled: boolean): void => {
   isViewTransitionDisabled = disabled;
 };
 
-const isAbortError = (err: unknown): boolean =>
-  err instanceof DOMException
-    ? err.name === "AbortError"
-    : err instanceof Error && err.name === "AbortError";
-
-const ignoreAbortError = (err: unknown): void => {
-  if (!isAbortError(err)) {
-    throw err;
-  }
-};
-
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -51,8 +40,7 @@ export const withViewTransition = (
       callbackInvoked = true;
       callback(true);
     });
-    transition.ready.catch(ignoreAbortError);
-    return transition.finished.catch(ignoreAbortError);
+    return transition.finished;
   } catch (err) {
     // eslint-disable-next-line no-console
     console.warn(

src/components/animation/ha-fade-out.ts

@@ -1,20 +0,0 @@
-import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-fade-out")
-export class HaFadeOut extends WaAnimation {
-  @property({ type: Boolean }) public play = true;
-
-  constructor() {
-    super();
-    this.iterations = 1;
-    this.fill = "both";
-    this.name = "fadeOut";
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-fade-out": HaFadeOut;
-  }
-}

src/components/automation/ha-automation-row-event-chip.ts

@@ -1,155 +0,0 @@
-import "@home-assistant/webawesome/dist/components/animation/animation";
-import { mdiInformationOutline } from "@mdi/js";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { keyed } from "lit/directives/keyed";
-import "../animation/ha-fade-in";
-import "../animation/ha-fade-out";
-import "../ha-icon-button";
-
-@customElement("ha-automation-row-event-chip")
-export class HaAutomationRowEventChip extends LitElement {
-  @property({ reflect: true })
-  public variant: "info" | "warning" | "success" | "danger" | "neutral" =
-    "info";
-
-  @property({ type: Boolean })
-  public interactive = false;
-
-  @property({ type: Boolean })
-  public show = false;
-
-  @state()
-  private _hide = false;
-
-  @state()
-  private _highlight = 0;
-
-  willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("show")) {
-      this._highlight = 0;
-
-      if (!this.show && this.hasUpdated) {
-        this._hide = true;
-      }
-    }
-  }
-
-  protected render(): TemplateResult | typeof nothing {
-    if (!this.show && !this._hide) {
-      return nothing;
-    }
-
-    let base = html`<div><slot></slot></div>`;
-
-    if (this.interactive) {
-      base = html`<button>
-        <slot></slot>
-        <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
-      </button>`;
-    }
-
-    if (this.show && this._highlight) {
-      return keyed(
-        this._highlight,
-        html`
-          <wa-animation fill="both" .iterations=${1} name="headShake" play
-            >${base}</wa-animation
-          >
-        `
-      );
-    }
-
-    if (!this.show && this._hide) {
-      return html`
-        <ha-fade-out @wa-finish=${this._handleHideFinish}>${base}</ha-fade-out>
-      `;
-    }
-
-    return html`<ha-fade-in .duration=${250}>${base}</ha-fade-in>`;
-  }
-
-  public highlight() {
-    this._highlight += 1;
-  }
-
-  private _handleHideFinish() {
-    this._hide = false;
-  }
-
-  static styles = css`
-    :host {
-      --background-color: var(--ha-color-fill-primary-normal-resting);
-      --background-color-hover: var(--ha-color-fill-primary-normal-hover);
-      --text-color: var(--ha-color-on-primary-normal);
-      border-radius: var(--ha-border-radius-pill);
-    }
-
-    :host([variant="warning"]) {
-      --background-color: var(--ha-color-fill-warning-normal-resting);
-      --background-color-hover: var(--ha-color-fill-warning-normal-hover);
-      --text-color: var(--ha-color-on-warning-normal);
-    }
-
-    :host([variant="neutral"]) {
-      --background-color: var(--ha-color-fill-neutral-normal-resting);
-      --background-color-hover: var(--ha-color-fill-neutral-normal-hover);
-      --text-color: var(--ha-color-on-neutral-normal);
-    }
-
-    :host([variant="success"]) {
-      --background-color: var(--ha-color-fill-success-normal-resting);
-      --background-color-hover: var(--ha-color-fill-success-normal-hover);
-      --text-color: var(--ha-color-on-success-normal);
-    }
-
-    :host([variant="danger"]) {
-      --background-color: var(--ha-color-fill-danger-normal-resting);
-      --background-color-hover: var(--ha-color-fill-danger-normal-hover);
-      --text-color: var(--ha-color-on-danger-normal);
-    }
-
-    button,
-    div {
-      background: var(--background-color);
-      border-radius: var(--ha-border-radius-pill);
-      color: var(--text-color);
-      display: inline-flex;
-      gap: var(--ha-space-2);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      align-items: center;
-      --mdc-icon-size: 16px;
-      line-height: 1;
-      box-shadow: var(--ha-box-shadow-s);
-    }
-
-    button {
-      border: none;
-      cursor: pointer;
-    }
-
-    button:hover {
-      background: var(--background-color-hover);
-    }
-
-    button:focus-visible {
-      outline: var(--wa-focus-ring);
-      outline-offset: var(--wa-focus-ring-offset);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-row-event-chip": HaAutomationRowEventChip;
-  }
-
-  interface HASSDomEvents {
-    "toggle-collapsed": undefined;
-    "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
-  }
-}

src/components/automation/ha-automation-row-live-test.ts

@@ -1,91 +0,0 @@
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";
-
-export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
-
-/**
- * @element ha-automation-row-live-test
- *
- * @summary
- * Small status indicator dot used in automation/condition rows to surface the
- * live evaluation result. Renders an optional tooltip with details on hover.
- *
- * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
- * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
- */
-@customElement("ha-automation-row-live-test")
-export class HaAutomationRowLiveTest extends LitElement {
-  @property({ reflect: true }) public state: LiveTestState = "unknown";
-
-  @property() public label = "";
-
-  @property() public message?: string;
-
-  protected render() {
-    return html`
-      <div
-        id="indicator"
-        role="status"
-        tabindex="0"
-        aria-label=${this.label}
-      ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      position: absolute;
-      inset-inline-end: -6px;
-      display: inline-block;
-    }
-    #indicator {
-      width: 12px;
-      height: 12px;
-      border-radius: var(--ha-border-radius-circle);
-      border: 3px solid;
-      box-sizing: border-box;
-      background-color: var(--card-background-color);
-      transition: all var(--ha-animation-duration-normal) ease-in-out;
-    }
-    :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-fill-success-loud-resting);
-      border-color: var(--ha-color-fill-success-loud-resting);
-    }
-    :host([state="pass"]) #indicator:hover {
-      background-color: var(--ha-color-fill-success-loud-hover);
-      border-color: var(--ha-color-fill-success-loud-hover);
-    }
-    :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-fill-warning-loud-resting);
-    }
-    :host([state="fail"]) #indicator:hover {
-      background-color: var(--ha-color-fill-warning-loud-hover);
-      border-color: var(--ha-color-fill-warning-loud-hover);
-    }
-    :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-fill-danger-loud-resting);
-    }
-    :host([state="invalid"]) #indicator:hover {
-      background-color: var(--ha-color-fill-danger-loud-hover);
-      border-color: var(--ha-color-fill-danger-loud-hover);
-    }
-    :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-fill-neutral-loud-resting);
-    }
-    :host([state="unknown"]) #indicator:hover {
-      background-color: var(--ha-color-fill-neutral-loud-hover);
-      border-color: var(--ha-color-fill-neutral-loud-hover);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-row-live-test": HaAutomationRowLiveTest;
-  }
-}

src/components/chart/chart-tooltip-position.ts

@@ -1,40 +0,0 @@
-import type { TooltipPositionCallback } from "echarts/types/dist/shared";
-
-export const TOOLTIP_GAP_PX = 12;
-export const TOOLTIP_TOP_OFFSET_PX = 10;
-
-/**
- * Pins the tooltip near the top of the chart and offsets it horizontally
- * from the cursor so it never covers the data point being inspected.
- * For axis-trigger time-series tooltips where the cursor's Y is uncorrelated
- * with the displayed content.
- */
-export const sideTooltipPosition: TooltipPositionCallback = (
-  point,
-  _params,
-  dom,
-  _rect,
-  size
-) => {
-  const [cursorX] = point;
-  const [viewW, viewH] = size.viewSize;
-  const [tipW, tipH] = size.contentSize;
-
-  const rtl =
-    dom instanceof HTMLElement && getComputedStyle(dom).direction === "rtl";
-
-  const rightOfCursor = cursorX + TOOLTIP_GAP_PX;
-  const leftOfCursor = cursorX - TOOLTIP_GAP_PX - tipW;
-
-  let x = rtl ? leftOfCursor : rightOfCursor;
-  const overflowsRight = x + tipW > viewW;
-  const overflowsLeft = x < 0;
-  if (overflowsRight || overflowsLeft) {
-    x = rtl ? rightOfCursor : leftOfCursor;
-  }
-  x = Math.max(0, Math.min(x, viewW - tipW));
-
-  const y = Math.max(0, Math.min(TOOLTIP_TOP_OFFSET_PX, viewH - tipH));
-
-  return [x, y];
-};

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

@@ -1,12 +1,6 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
-import {
-  mdiCheckCircle,
-  mdiChevronDown,
-  mdiChevronUp,
-  mdiCircleOutline,
-  mdiRestart,
-} from "@mdi/js";
+import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
 import { differenceInMinutes } from "date-fns";
 import type { DataZoomComponentOption } from "echarts/components";
 import type { EChartsType } from "echarts/core";
@@ -19,7 +13,7 @@ import type {
 } from "echarts/types/dist/shared";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
@@ -53,10 +47,6 @@ export type CustomLegendOption = ECOption["legend"] & {
     name: string;
     value?: string; // Current value to display next to the name in the legend.
     itemStyle?: Record<string, any>;
-    // If true, label click does not fire `legend-label-click` even when the
-    // chart has `clickLabelForMoreInfo`; falls back to toggle. Used for items
-    // without a corresponding entity (e.g. external statistics).
-    noLabelClick?: boolean;
   }[];
 };
 
@@ -91,9 +81,6 @@ export class HaChartBase extends LitElement {
   })
   private _themes!: Themes;
 
-  @property({ attribute: "click-label-for-more-info", type: Boolean })
-  public clickLabelForMoreInfo = false;
-
   @state() private _isZoomed = false;
 
   @state() private _zoomRatio = 1;
@@ -102,8 +89,6 @@ export class HaChartBase extends LitElement {
 
   @state() private _hiddenDatasets = new Set<string>();
 
-  @query(".chart") private _chartContainer?: HTMLDivElement;
-
   private _modifierPressed = false;
 
   private _isTouchDevice = "ontouchstart" in window;
@@ -377,7 +362,6 @@ export class HaChartBase extends LitElement {
           let itemStyle: Record<string, any> = {};
           let id = "";
           let value = "";
-          let noLabelClick = false;
           const name = typeof item === "string" ? item : (item.name ?? "");
           if (typeof item === "string") {
             id = item;
@@ -385,9 +369,7 @@ export class HaChartBase extends LitElement {
             id = item.id ?? name;
             value = item.value ?? "";
             itemStyle = item.itemStyle ?? {};
-            noLabelClick = item.noLabelClick ?? false;
           }
-          const labelClickable = this.clickLabelForMoreInfo && !noLabelClick;
           const dataset =
             datasets.find((d) => d.id === id) ??
             datasets.find((d) => d.name === id);
@@ -397,43 +379,26 @@ export class HaChartBase extends LitElement {
             ...itemStyle,
           };
           const color = itemStyle?.color as string;
+          const borderColor = itemStyle?.borderColor as string;
           return html`<li
             .id=${id}
+            @click=${this._legendClick}
             @pointerdown=${this._legendPointerDown}
             @pointerup=${this._legendPointerCancel}
             @pointerleave=${this._legendPointerCancel}
             @pointercancel=${this._legendPointerCancel}
             @contextmenu=${this._legendContextMenu}
             class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
+            .title=${name}
           >
-            <button
-              type="button"
-              class="legend-toggle"
-              data-id=${id}
-              aria-pressed=${!this._hiddenDatasets.has(id)}
-              .title=${this.hass.localize(
-                "ui.components.history_charts.toggle_visibility"
-              )}
-              @click=${this._toggleDataset}
-            >
-              <ha-svg-icon
-                .path=${this._hiddenDatasets.has(id)
-                  ? mdiCircleOutline
-                  : mdiCheckCircle}
-                style=${styleMap({
-                  color: this._hiddenDatasets.has(id) ? undefined : color,
-                })}
-              ></ha-svg-icon>
-            </button>
-            <button
-              type="button"
-              class=${classMap({ label: true, clickable: labelClickable })}
-              data-id=${id}
-              .title=${name}
-              @click=${this._labelClick}
-            >
-              ${name}
-            </button>
+            <div
+              class="bullet"
+              style=${styleMap({
+                backgroundColor: color,
+                borderColor: borderColor || color,
+              })}
+            ></div>
+            <div class="label">${name}</div>
             ${value ? html`<div class="value">${value}</div>` : nothing}
           </li>`;
         })}
@@ -471,6 +436,7 @@ export class HaChartBase extends LitElement {
 
   private async _setupChart() {
     if (this._loading) return;
+    const container = this.renderRoot.querySelector(".chart") as HTMLDivElement;
     this._loading = true;
     try {
       if (this.chart) {
@@ -485,7 +451,7 @@ export class HaChartBase extends LitElement {
       const style = getComputedStyle(this);
       echarts.registerTheme("custom", this._createTheme(style));
 
-      this.chart = echarts.init(this._chartContainer!, "custom");
+      this.chart = echarts.init(container, "custom");
       this.chart.on("datazoom", (e: any) => {
         this._handleDataZoomEvent(e);
       });
@@ -1111,7 +1077,7 @@ export class HaChartBase extends LitElement {
   private _updateSankeyRoam() {
     const option = this.chart?.getOption();
     const sankeySeries = (option?.series as any[])?.filter(
-      (s: any) => s != null && s.type === "sankey"
+      (s: any) => s.type === "sankey"
     );
     if (sankeySeries?.length) {
       this.chart?.setOption({
@@ -1195,8 +1161,7 @@ export class HaChartBase extends LitElement {
     }
   }
 
-  private _toggleDataset(ev: MouseEvent) {
-    ev.stopPropagation();
+  private _legendClick(ev: MouseEvent) {
     if (!this.chart) {
       return;
     }
@@ -1204,46 +1169,13 @@ export class HaChartBase extends LitElement {
       this._longPressTriggered = false;
       return;
     }
-    const id = (ev.currentTarget as HTMLElement).dataset.id;
-    if (!id) {
-      return;
-    }
+    const id = (ev.currentTarget as HTMLElement)?.id;
     // Cmd+click on Mac (Ctrl+click is right-click there), Ctrl+click elsewhere
     const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
     if (soloModifier) {
       this._soloLegend(id);
       return;
     }
-    this._handleDatasetToggle(id);
-  }
-
-  private _labelClick(ev: MouseEvent) {
-    ev.stopPropagation();
-    if (!this.chart) {
-      return;
-    }
-    if (this._longPressTriggered) {
-      this._longPressTriggered = false;
-      return;
-    }
-    const target = ev.currentTarget as HTMLElement;
-    const id = target.dataset.id;
-    if (!id) {
-      return;
-    }
-    const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
-    if (soloModifier) {
-      this._soloLegend(id);
-      return;
-    }
-    if (target.classList.contains("clickable")) {
-      fireEvent(this, "legend-label-click", { id });
-    } else {
-      this._handleDatasetToggle(id);
-    }
-  }
-
-  private _handleDatasetToggle(id: string) {
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1458,6 +1390,7 @@ export class HaChartBase extends LitElement {
     }
     .chart-legend li {
       height: 24px;
+      cursor: pointer;
       display: inline-flex;
       align-items: center;
       padding: 0 2px;
@@ -1474,54 +1407,33 @@ export class HaChartBase extends LitElement {
       color: var(--secondary-text-color);
     }
     .chart-legend .label {
-      background: none;
-      border: none;
-      padding: 0;
-      margin: 0;
-      font: inherit;
-      color: inherit;
-      cursor: pointer;
-      text-align: start;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
-      line-height: 1;
-    }
-    @media (hover: hover) {
-      .chart-legend .label.clickable:hover {
-        text-decoration: underline;
-      }
-      .chart-legend .legend-toggle:hover {
-        opacity: 0.5;
-      }
     }
     .chart-legend .value {
       color: var(--secondary-text-color);
       margin-inline-start: var(--ha-space-1);
       flex-shrink: 0;
       white-space: nowrap;
-      line-height: 1;
     }
-    .chart-legend .legend-toggle {
-      background: none;
-      border: none;
-      color: inherit;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      padding: 4px;
-      margin: -4px;
-      margin-inline-end: 0;
+    .chart-legend .bullet {
+      border-width: 1px;
+      border-style: solid;
+      border-radius: var(--ha-border-radius-circle);
+      display: block;
+      height: 16px;
+      width: 16px;
+      margin-right: 4px;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      margin-inline-end: 4px;
+      margin-inline-start: initial;
+      direction: var(--direction);
     }
-    .chart-legend .legend-toggle:focus-visible,
-    .chart-legend .label:focus-visible {
-      outline: 2px solid var(--primary-color);
-      outline-offset: 2px;
-      border-radius: var(--ha-border-radius-small, 4px);
-    }
-    .chart-legend .legend-toggle ha-svg-icon {
-      --mdc-icon-size: 18px;
+    .chart-legend .hidden .bullet {
+      border-color: var(--secondary-text-color) !important;
+      background-color: transparent !important;
     }
     ha-assist-chip {
       height: 100%;
@@ -1541,7 +1453,6 @@ declare global {
     "dataset-hidden": { id: string };
     "dataset-unhidden": { id: string };
     "chart-click": ECElementEvent;
-    "legend-label-click": { id: string };
     "chart-zoom": {
       start: number;
       end: number;

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

@@ -11,8 +11,6 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import { sideTooltipPosition } from "./chart-tooltip-position";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 import type { ECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
@@ -20,7 +18,6 @@ import {
   formatNumber,
 } from "../../common/number/format_number";
 import { measureTextWidth } from "../../util/text";
-import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
@@ -39,21 +36,6 @@ const CLIMATE_MODE_CONFIGS = [
   { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
 ] as const;
 
-// Used to recover the underlying entity_id from a legend dataset id.
-// Kept in sync with the suffixes appended at dataset construction below
-// for climate / water_heater / humidifier multi-attribute charts.
-const ENTITY_DATASET_SUFFIXES = [
-  "-current_temperature",
-  "-target_temperature",
-  "-target_temperature_mode",
-  "-target_temperature_mode_low",
-  ...CLIMATE_MODE_CONFIGS.map((c) => `-${c.action}`),
-  "-current_humidity",
-  "-target_humidity",
-  "-humidifying",
-  "-on",
-];
-
 @customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -62,11 +44,6 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
-  @property({ attribute: false }) public colors?: Record<
-    string,
-    string | undefined
-  >;
-
   @property() public unit?: string;
 
   @property() public identifier?: string;
@@ -118,7 +95,9 @@ export class StateHistoryChartLine extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  private _yAxisFractionDigits = 1;
+  private _previousYAxisLabelValue = 0;
+
+  private _yAxisMaximumFractionDigits = 0;
 
   protected render() {
     return html`
@@ -133,8 +112,6 @@ export class StateHistoryChartLine extends LitElement {
         @chart-zoom=${this._handleDataZoom}
         .expandLegend=${this.expandLegend}
         .hideResetButton=${this.hideResetButton}
-        .clickLabelForMoreInfo=${this.clickForMoreInfo}
-        @legend-label-click=${this._handleLegendLabelClick}
       ></ha-chart-base>
     `;
   }
@@ -246,24 +223,6 @@ export class StateHistoryChartLine extends LitElement {
     });
   }
 
-  private _handleLegendLabelClick(
-    ev: HASSDomEvent<HASSDomEvents["legend-label-click"]>
-  ) {
-    const id = ev.detail.id;
-    let entityId = id;
-    if (!this.hass.states[entityId]) {
-      for (const suffix of ENTITY_DATASET_SUFFIXES) {
-        if (id.endsWith(suffix)) {
-          entityId = id.slice(0, -suffix.length);
-          break;
-        }
-      }
-    }
-    if (this.hass.states[entityId]) {
-      fireEvent(this, "hass-more-info", { entityId });
-    }
-  }
-
   public willUpdate(changedProps: PropertyValues) {
     if (
       changedProps.has("data") ||
@@ -293,10 +252,7 @@ export class StateHistoryChartLine extends LitElement {
       (changedProps.has("hass") &&
         this._hasEntityStatesChanged(changedProps.get("hass")))
     ) {
-      const rtl = computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      );
+      const rtl = computeRTL(this.hass);
       let minYAxis: number | ((values: { min: number }) => number) | undefined =
         this.minYAxis;
       let maxYAxis: number | ((values: { max: number }) => number) | undefined =
@@ -413,7 +369,8 @@ export class StateHistoryChartLine extends LitElement {
         tooltip: {
           trigger: "axis",
           renderMode: "html",
-          position: sideTooltipPosition,
+          position: "bottom",
+          align: "center",
           confine: true,
           formatter: this._renderTooltip,
         },
@@ -435,14 +392,6 @@ export class StateHistoryChartLine extends LitElement {
     const datasets: LineSeriesOption[] = [];
     const entityIds: string[] = [];
     const datasetToDataIndex: number[] = [];
-    let yMin = Infinity;
-    let yMax = -Infinity;
-    const trackY = (v: number | null | undefined) => {
-      if (typeof v === "number" && Number.isFinite(v)) {
-        if (v < yMin) yMin = v;
-        if (v > yMax) yMax = v;
-      }
-    };
     if (entityStates.length === 0) {
       return;
     }
@@ -450,11 +399,9 @@ export class StateHistoryChartLine extends LitElement {
     this._chartTime = new Date();
     const endTime = this.endTime;
     const names = this.names || {};
-    const colors = this.colors || {};
     entityStates.forEach((states, dataIdx) => {
       const domain = states.domain;
       const name = names[states.entity_id] || states.name;
-      const color = colors[states.entity_id];
       // array containing [value1, value2, etc]
       let prevValues: any[] | null = null;
 
@@ -478,7 +425,6 @@ export class StateHistoryChartLine extends LitElement {
             d.data!.push([timestamp, prevValues[i]]);
           }
           d.data!.push([timestamp, datavalues[i]]);
-          trackY(datavalues[i]);
         });
         prevValues = datavalues;
       };
@@ -486,11 +432,11 @@ export class StateHistoryChartLine extends LitElement {
       const addDataSet = (
         id: string,
         nameY: string,
-        clr?: string,
+        color?: string,
         fill = false
       ) => {
-        if (!clr) {
-          clr = getGraphColorByIndex(colorIndex, computedStyles);
+        if (!color) {
+          color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
         }
         data.push({
@@ -499,7 +445,7 @@ export class StateHistoryChartLine extends LitElement {
           type: "line",
           cursor: "default",
           name: nameY,
-          color: clr,
+          color,
           symbol: "circle",
           symbolSize: 1,
           step: "end",
@@ -510,7 +456,7 @@ export class StateHistoryChartLine extends LitElement {
           },
           areaStyle: fill
             ? {
-                color: clr + "7F",
+                color: color + "7F",
               }
             : undefined,
           tooltip: {
@@ -758,7 +704,7 @@ export class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(states.entity_id, name, color);
+        addDataSet(states.entity_id, name);
 
         let lastValue: number;
         let lastDate: Date;
@@ -829,7 +775,6 @@ export class StateHistoryChartLine extends LitElement {
         const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
         if (currentValue !== null) {
           data[0].data!.push([now, currentValue]);
-          trackY(currentValue);
         }
       }
 
@@ -837,7 +782,6 @@ export class StateHistoryChartLine extends LitElement {
       Array.prototype.push.apply(datasets, data);
     });
 
-    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
     this._chartData = datasets;
     this._entityIds = entityIds;
     this._datasetToDataIndex = datasetToDataIndex;
@@ -871,8 +815,20 @@ export class StateHistoryChartLine extends LitElement {
   }
 
   private _formatYAxisLabel = (value: number) => {
+    // show the first significant digit for tiny values
+    const maximumFractionDigits = Math.max(
+      1,
+      // use the difference to the previous value to determine the number of significant digits #25526
+      -Math.floor(
+        Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
+      )
+    );
+    this._yAxisMaximumFractionDigits = Math.max(
+      this._yAxisMaximumFractionDigits,
+      maximumFractionDigits
+    );
     const label = formatNumber(value, this.hass.locale, {
-      maximumFractionDigits: this._yAxisFractionDigits,
+      maximumFractionDigits: this._yAxisMaximumFractionDigits,
     });
     const width = measureTextWidth(label, 12) + 5;
     if (width > this._yWidth) {
@@ -882,6 +838,7 @@ export class StateHistoryChartLine extends LitElement {
         chartIndex: this.chartIndex,
       });
     }
+    this._previousYAxisLabelValue = value;
     return label;
   };
 

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

@@ -14,7 +14,6 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
-import { sideTooltipPosition } from "./chart-tooltip-position";
 import { computeTimelineColor } from "./timeline-color";
 import type { ECOption } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
@@ -145,10 +144,7 @@ export class StateHistoryChartTimeline extends LitElement {
         "ui.components.history_charts.duration"
       )}: ${millisecondsToDuration(durationInMs)}`;
 
-      const markerLocalized = !computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      )
+      const markerLocalized = !computeRTL(this.hass)
         ? marker
         : `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
 
@@ -171,12 +167,11 @@ export class StateHistoryChartTimeline extends LitElement {
 
   public willUpdate(changedProps: PropertyValues) {
     if (
-      this.isConnected &&
-      (changedProps.has("startTime") ||
-        changedProps.has("endTime") ||
-        changedProps.has("data") ||
-        this._chartTime <
-          new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES))
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
+      changedProps.has("data") ||
+      this._chartTime <
+        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
     ) {
       // If the line is more than 5 minutes old, re-gen it
       // so the X axis grows even if there is no new data
@@ -203,10 +198,7 @@ export class StateHistoryChartTimeline extends LitElement {
       ? Math.max(this.paddingYAxis, this._yWidth)
       : 0;
     const labelMargin = 5;
-    const rtl = computeRTL(
-      this.hass.language,
-      this.hass.translationMetadata.translations
-    );
+    const rtl = computeRTL(this.hass);
     this._chartOptions = {
       xAxis: {
         type: "time",
@@ -264,7 +256,8 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       tooltip: {
         renderMode: "html",
-        position: sideTooltipPosition,
+        position: "bottom",
+        align: "center",
         confine: true,
         formatter: this._renderTooltip,
       },

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

@@ -2,13 +2,7 @@ import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiRestart } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, eventOptions, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import type {
@@ -58,11 +52,6 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
-  @property({ attribute: false }) public colors?: Record<
-    string,
-    string | undefined
-  >;
-
   @property({ type: Boolean, reflect: true }) public virtualize = false;
 
   @property({ attribute: false }) public endTime?: Date;
@@ -110,11 +99,6 @@ export class StateHistoryCharts extends LitElement {
 
   @state() private _hasZoomedCharts = false;
 
-  @queryAll("state-history-chart-line, state-history-chart-timeline")
-  private _chartComponents!: NodeListOf<
-    StateHistoryChartLine | StateHistoryChartTimeline
-  >;
-
   private _isSyncing = false;
 
   // @ts-ignore
@@ -197,7 +181,6 @@ export class StateHistoryCharts extends LitElement {
           .endTime=${this._computedEndTime}
           .paddingYAxis=${this._maxYWidth}
           .names=${this.names}
-          .colors=${this.colors}
           .chartIndex=${index}
           .clickForMoreInfo=${this.clickForMoreInfo}
           .logarithmicScale=${this.logarithmicScale}
@@ -338,7 +321,11 @@ export class StateHistoryCharts extends LitElement {
     this._isSyncing = true;
 
     requestAnimationFrame(() => {
-      this._chartComponents.forEach((chartComponent, index) => {
+      const chartComponents = this.renderRoot.querySelectorAll(
+        "state-history-chart-line, state-history-chart-timeline"
+      ) as unknown as (StateHistoryChartLine | StateHistoryChartTimeline)[];
+
+      chartComponents.forEach((chartComponent, index) => {
         if (index === sourceChartIndex) {
           return;
         }
@@ -357,7 +344,11 @@ export class StateHistoryCharts extends LitElement {
     this._isSyncing = true;
 
     requestAnimationFrame(() => {
-      this._chartComponents.forEach((chartComponent: any) => {
+      const chartComponents = this.renderRoot.querySelectorAll(
+        "state-history-chart-line, state-history-chart-timeline"
+      );
+
+      chartComponents.forEach((chartComponent: any) => {
         const chartBase =
           chartComponent.renderRoot?.querySelector("ha-chart-base");
 
@@ -408,12 +399,12 @@ export class StateHistoryCharts extends LitElement {
 
     .entry-container {
       width: 100%;
-      overflow: visible;
     }
 
     .entry-container.line {
       flex: 1;
       padding-top: 8px;
+      overflow: hidden;
     }
 
     .entry-container:hover {

src/components/chart/statistics-chart.ts

@@ -10,12 +10,8 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import type { HASSDomEvent } from "../../common/dom/fire_event";
-import { fireEvent } from "../../common/dom/fire_event";
 
-import { formatDate } from "../../common/datetime/format_date";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import { formatTimeWithSeconds } from "../../common/datetime/format_time";
 import {
   formatNumber,
   getNumberFormatOptions,
@@ -39,9 +35,7 @@ import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
-import { sideTooltipPosition } from "./chart-tooltip-position";
 import { fillDataGapsAndRoundCaps } from "./round-caps";
-import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -52,13 +46,6 @@ export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   change: "sum",
 };
 
-// When the chart has a single entity, ha-chart-base falls back to raw series
-// ids (`${statistic_id}-${type}`) for the legend (see _legendData branch at
-// the bottom of _generateData). Strip the type suffix to recover statistic_id.
-const STAT_TYPE_SUFFIXES = (
-  Object.keys(supportedStatTypeMap) as StatisticType[]
-).map((t) => `-${t}`);
-
 @customElement("statistics-chart")
 export class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -72,11 +59,6 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public names?: Record<string, string>;
 
-  @property({ attribute: false }) public colors?: Record<
-    string,
-    string | undefined
-  >;
-
   @property() public unit?: string;
 
   @property({ attribute: false }) public startTime?: Date;
@@ -132,7 +114,7 @@ export class StatisticsChart extends LitElement {
 
   private _computedStyle?: CSSStyleDeclaration;
 
-  private _yAxisFractionDigits = 1;
+  private _previousYAxisLabelValue = 0;
 
   protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
@@ -144,8 +126,7 @@ export class StatisticsChart extends LitElement {
       changedProps.has("statTypes") ||
       changedProps.has("chartType") ||
       changedProps.has("hideLegend") ||
-      changedProps.has("_hiddenStats") ||
-      changedProps.has("names")
+      changedProps.has("_hiddenStats")
     ) {
       this._generateData();
     }
@@ -205,9 +186,6 @@ export class StatisticsChart extends LitElement {
         @dataset-hidden=${this._datasetHidden}
         @dataset-unhidden=${this._datasetUnhidden}
         .expandLegend=${this.expandLegend}
-        .clickLabelForMoreInfo=${this.clickForMoreInfo &&
-        !this._statisticIds.every(isExternalStatistic)}
-        @legend-label-click=${this._handleLegendLabelClick}
       ></ha-chart-base>
     `;
   }
@@ -222,32 +200,8 @@ export class StatisticsChart extends LitElement {
     this.requestUpdate("_hiddenStats");
   }
 
-  private _handleLegendLabelClick(
-    ev: HASSDomEvent<HASSDomEvents["legend-label-click"]>
-  ) {
-    const id = ev.detail.id;
-    // External statistics aren't real entities; nothing to open.
-    if (isExternalStatistic(id)) {
-      return;
-    }
-    let entityId = id;
-    if (!this.hass.states[entityId]) {
-      for (const suffix of STAT_TYPE_SUFFIXES) {
-        if (id.endsWith(suffix)) {
-          entityId = id.slice(0, -suffix.length);
-          break;
-        }
-      }
-    }
-    if (this.hass.states[entityId]) {
-      fireEvent(this, "hass-more-info", { entityId });
-    }
-  }
-
   private _renderTooltip = (params: any) => {
     const rendered: Record<string, boolean> = {};
-    const chartIsBar = this.chartType.startsWith("bar");
-    const period = this.period;
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
@@ -259,67 +213,8 @@ export class StatisticsChart extends LitElement {
         const statisticId = this._statisticIds[param.seriesIndex];
         const stateObj = this.hass.states[statisticId];
         const entry = this.hass.entities[statisticId];
-        let rawValue: string;
-        let rawTime: string;
-        if (chartIsBar) {
-          // For bar charts value is always second value.
-          rawValue = String(param.value[1]);
-          // Time value is third value (un-shifted date) if given, otherwise first value
-          let startTime: Date;
-          let endTime: Date | undefined;
-          if (param.value[2]) {
-            startTime = new Date(param.value[2]);
-            if (param.value[3]) {
-              endTime = new Date(param.value[3]);
-            }
-          } else {
-            startTime = new Date(param.value[0]);
-          }
-          if (
-            period === "year" ||
-            period === "month" ||
-            period === "week" ||
-            period === "day"
-          ) {
-            // For year/month/day periods, show only the date
-            rawTime =
-              formatDate(startTime, this.hass.locale, this.hass.config) +
-              (endTime && period !== "day"
-                ? ` – ${formatDate(
-                    endTime,
-                    this.hass.locale,
-                    this.hass.config
-                  )}`
-                : "") +
-              "<br>";
-          } else {
-            // For other time periods, include time in render, and optionally show range
-            // if we have an end time.
-            rawTime =
-              formatDateTimeWithSeconds(
-                startTime,
-                this.hass.locale,
-                this.hass.config
-              ) +
-              (endTime
-                ? ` – ${formatTimeWithSeconds(
-                    endTime,
-                    this.hass.locale,
-                    this.hass.config
-                  )}`
-                : "") +
-              "<br>";
-          }
-        } else {
-          // For lines max series can have 3 values, as the second value is the max-min to form a band
-          rawValue = String(param.value[2] ?? param.value[1]);
-          // Time value is always first value
-          rawTime = `${formatDateTimeWithSeconds(
-            new Date(param.value[0]),
-            this.hass.locale,
-            this.hass.config
-          )} <br>`;
-        }
+        // max series can have 3 values, as the second value is the max-min to form a band
+        const rawValue = String(param.value[2] ?? param.value[1]);
 
         const options = getNumberFormatOptions(stateObj, entry) ?? {
           maximumFractionDigits: 2,
@@ -331,7 +226,14 @@ export class StatisticsChart extends LitElement {
           options
         )}${unit}`;
 
-        const time = index === 0 ? rawTime : "";
+        const time =
+          index === 0
+            ? formatDateTimeWithSeconds(
+                new Date(param.value[0]),
+                this.hass.locale,
+                this.hass.config
+              ) + "<br>"
+            : "";
         return `${time}${param.marker} ${param.seriesName}: ${value}`;
       })
       .filter(Boolean)
@@ -427,12 +329,7 @@ export class StatisticsChart extends LitElement {
         nameTextStyle: {
           align: "left",
         },
-        position: computeRTL(
-          this.hass.language,
-          this.hass.translationMetadata.translations
-        )
-          ? "right"
-          : "left",
+        position: computeRTL(this.hass) ? "right" : "left",
         scale:
           this.chartType.startsWith("line") ||
           this.logarithmicScale ||
@@ -462,7 +359,8 @@ export class StatisticsChart extends LitElement {
       tooltip: {
         trigger: "axis",
         renderMode: "html",
-        position: sideTooltipPosition,
+        position: "bottom",
+        align: "center",
         confine: true,
         formatter: this._renderTooltip,
       },
@@ -497,20 +395,11 @@ export class StatisticsChart extends LitElement {
     const chartStacked = this.chartType.endsWith("stack");
     const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: typeof this._chartData = [];
-    let yMin = Infinity;
-    let yMax = -Infinity;
-    const trackY = (v: number | null | undefined) => {
-      if (typeof v === "number" && Number.isFinite(v)) {
-        if (v < yMin) yMin = v;
-        if (v > yMax) yMax = v;
-      }
-    };
     const legendData: {
       id: string;
       name: string;
       color?: ZRColor;
       borderColor?: ZRColor;
-      noLabelClick?: boolean;
     }[] = [];
     const statisticIds: string[] = [];
     let endTime: Date;
@@ -561,7 +450,6 @@ export class StatisticsChart extends LitElement {
     }
 
     const names = this.names || {};
-    const colors = this.colors || {};
     statisticsData.forEach(([statistic_id, stats]) => {
       const meta = statisticsMetaData?.[statistic_id];
       let name = names[statistic_id];
@@ -577,67 +465,40 @@ export class StatisticsChart extends LitElement {
       const statDataSets: (LineSeriesOption | BarSeriesOption)[] = [];
       const statLegendData: typeof legendData = [];
 
-      // Place bars at centre of their specified time range if this is a bar chart
-      // and the period is 5minute or hour.
-      const centerBars =
-        chartType === "bar" &&
-        (this.period === "5minute" || this.period === "hour");
-
       const pushData = (
-        start: Date, // Data point start time
-        end: Date, // Data point end time
-        limit: Date, // Limit for end time (e.g. now)
+        start: Date,
+        end: Date,
         dataValues: (number | null)[][]
       ) => {
         if (!dataValues.length) return;
-        // Limit for time range is lesser of overall limit and data point end
-        limit = end.getTime() < limit.getTime() ? end : limit;
-        if (start.getTime() > limit.getTime()) {
+        if (start > end) {
           // Drop data points that are after the requested endTime. This could happen if
           // endTime is "now" and client time is not in sync with server time.
           return;
         }
         statDataSets.forEach((d, i) => {
-          if (chartType === "line") {
-            if (
-              prevEndTime &&
-              prevValues &&
-              prevEndTime.getTime() !== start.getTime()
-            ) {
-              // if the end of the previous data doesn't match the start of the current data,
-              // we have to draw a gap so add a value at the end time, and then an empty value.
-              d.data!.push([prevEndTime, ...prevValues[i]!]);
-              d.data!.push([prevEndTime, null]);
-            }
-            d.data!.push([start, ...dataValues[i]!]);
-            // For band-top rows dataValues[i] is [diff, top]; the actual Y is
-            // the last element. For regular rows it's [value]. Same call works.
-            trackY(dataValues[i][dataValues[i].length - 1]);
-          } else {
-            let time = start;
-            if (centerBars) {
-              // If centering bars, set the time to the midpoint between start and end instead
-              // of the start time.
-              time = new Date((start.getTime() + end.getTime()) / 2);
-            }
-            // Data value should always be a scalar for bar charts. Pass in
-            // real start time as extra value to allow formatting tooltip.
-            d.data!.push([time, dataValues[i][0]!, start, end]);
-            trackY(dataValues[i][0]);
+          if (
+            chartType === "line" &&
+            prevEndTime &&
+            prevValues &&
+            prevEndTime.getTime() !== start.getTime()
+          ) {
+            // if the end of the previous data doesn't match the start of the current data,
+            // we have to draw a gap so add a value at the end time, and then an empty value.
+            d.data!.push([prevEndTime, ...prevValues[i]!]);
+            d.data!.push([prevEndTime, null]);
           }
+          d.data!.push([start, ...dataValues[i]!]);
         });
         prevValues = dataValues;
-        prevEndTime = limit;
+        prevEndTime = end;
       };
 
-      let color = colors[statistic_id];
-      if (color === undefined) {
-        color = getGraphColorByIndex(
-          colorIndex,
-          this._computedStyle || getComputedStyle(this)
-        );
-        colorIndex++;
-      }
+      const color = getGraphColorByIndex(
+        colorIndex,
+        this._computedStyle || getComputedStyle(this)
+      );
+      colorIndex++;
 
       const statTypes: this["statTypes"] = [];
 
@@ -742,7 +603,6 @@ export class StatisticsChart extends LitElement {
                 name,
                 color: series.color as ZRColor,
                 borderColor: series.itemStyle?.borderColor,
-                noLabelClick: isExternalStatistic(statistic_id),
               });
             }
             displayedLegend = displayedLegend || showLegend;
@@ -787,7 +647,11 @@ export class StatisticsChart extends LitElement {
           dataValues.push(val);
         });
         if (!this._hiddenStats.has(statistic_id)) {
-          pushData(startDate, endDate, endTime, dataValues);
+          pushData(
+            startDate,
+            endDate.getTime() < endTime.getTime() ? endDate : endTime,
+            dataValues
+          );
         }
       });
 
@@ -836,7 +700,6 @@ export class StatisticsChart extends LitElement {
                   val.push(currentValue);
                 }
                 statDataSets[i].data!.push([now, ...val]);
-                trackY(val[val.length - 1]);
               });
             }
           }
@@ -870,17 +733,12 @@ export class StatisticsChart extends LitElement {
       });
     });
 
-    this._yAxisFractionDigits = computeYAxisFractionDigits(yMin, yMax);
     this._chartData = totalDataSets;
     if (legendData.length !== this._legendData?.length) {
       // only update the legend if it has changed or it will trigger options update
       this._legendData =
         legendData.length > 1
-          ? legendData.map(({ id, name, noLabelClick }) => ({
-              id,
-              name,
-              noLabelClick,
-            }))
+          ? legendData.map(({ id, name }) => ({ id, name }))
           : // if there is only one entity, let the base chart handle the legend
             undefined;
     }
@@ -904,10 +762,21 @@ export class StatisticsChart extends LitElement {
     return Math.abs(value) < 1 ? value : roundingFn(value);
   }
 
-  private _formatYAxisLabel = (value: number) =>
-    formatNumber(value, this.hass.locale, {
-      maximumFractionDigits: this._yAxisFractionDigits,
+  private _formatYAxisLabel = (value: number) => {
+    // show the first significant digit for tiny values
+    const maximumFractionDigits = Math.max(
+      1,
+      // use the difference to the previous value to determine the number of significant digits #25526
+      -Math.floor(
+        Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
+      )
+    );
+    const label = formatNumber(value, this.hass.locale, {
+      maximumFractionDigits,
     });
+    this._previousYAxisLabelValue = value;
+    return label;
+  };
 
   static styles = css`
     :host {

src/components/chart/y-axis-fraction-digits.ts

@@ -1,9 +0,0 @@
-// Derive the number of decimal digits to use for Y-axis labels from the
-// observed data range. We estimate the tick interval as `range / 10` (twice
-// ECharts' default splitNumber of 5, as a safety margin against finer "nice"
-// intervals), then derive `ceil(-log10(interval))`.
-export function computeYAxisFractionDigits(min: number, max: number): number {
-  const range = max - min;
-  if (!Number.isFinite(range) || range <= 0) return 1;
-  return Math.max(0, Math.ceil(-Math.log10(range / 10)));
-}

src/components/data-table/dialog-data-table-settings.ts

@@ -127,6 +127,7 @@ export class DialogDataTableSettings extends LitElement {
 
     return html`
       <ha-dialog
+        .hass=${this.hass}
         .open=${this._open}
         header-title=${localize("ui.components.data-table.settings.header")}
         @closed=${this._dialogClosed}

src/components/data-table/ha-data-table-labels.ts

@@ -1,8 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { stringCompare } from "../../common/string/compare";
@@ -18,163 +17,40 @@ import "../ha-label";
 class HaDataTableLabels extends LitElement {
   @property({ attribute: false }) public labels!: LabelRegistryEntry[];
 
-  @state() private _visibleCount = 0;
-
-  @query(".viewport") private _viewport?: HTMLDivElement;
-  @query(".measure") private _measure?: HTMLDivElement;
-
-  private _sortedLabels: LabelRegistryEntry[] = [];
-
-  private _chipWidths: number[] = [];
-  private _plusWidth = 0;
-  private _gap = 8;
-
-  private _resizeController = new ResizeController(this, {
-    target: null,
-    skipInitial: true,
-    callback: (entries) => {
-      const entry = entries[0];
-      const width = entry?.contentRect.width ?? 0;
-      this._recomputeVisibleCount(width);
-      return width;
-    },
-  });
-
-  protected willUpdate(changedProps: Map<string, unknown>) {
-    if (changedProps.has("labels")) {
-      this._sortedLabels = [...this.labels].sort((a, b) =>
-        stringCompare(a.name, b.name)
-      );
-    }
-  }
-
   protected render(): TemplateResult {
-    const labels = this._sortedLabels;
-    const visible = labels.slice(0, this._visibleCount);
-    const hidden = labels.length - this._visibleCount;
-
+    const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
     return html`
-      <div class="viewport">
-        <ha-chip-set>
-          ${repeat(
-            visible,
-            (label) => label.label_id,
-            (label) => this._renderLabel(label, true)
-          )}
-          ${hidden > 0
-            ? html`
-                <ha-dropdown
-                  role="button"
-                  tabindex="0"
-                  @click=${stopPropagation}
-                  @wa-select=${this._handleDropdownSelect}
-                >
-                  <ha-label slot="trigger" class="plus" dense>
-                    +${hidden}
-                  </ha-label>
-                  ${repeat(
-                    labels.slice(this._visibleCount),
-                    (label) => label.label_id,
-                    (label) => html`
-                      <ha-dropdown-item .value=${label.label_id} .item=${label}>
-                        ${this._renderLabel(label, false)}
-                      </ha-dropdown-item>
-                    `
-                  )}
-                </ha-dropdown>
-              `
-            : nothing}
-        </ha-chip-set>
-      </div>
-
-      <div class="measure" aria-hidden="true">
-        <ha-chip-set>
-          ${repeat(
-            labels,
-            (label) => label.label_id,
-            (label) => html`
-              <div class="measure-chip" data-chip>
-                ${this._renderLabel(label, false)}
-              </div>
-            `
-          )}
-          <div class="measure-chip" data-plus>
-            <ha-label class="plus" dense>+99</ha-label>
-          </div>
-        </ha-chip-set>
-      </div>
+      <ha-chip-set>
+        ${repeat(
+          labels.slice(0, 2),
+          (label) => label.label_id,
+          (label) => this._renderLabel(label, true)
+        )}
+        ${labels.length > 2
+          ? html`<ha-dropdown
+              role="button"
+              tabindex="0"
+              @click=${stopPropagation}
+              @wa-select=${this._handleDropdownSelect}
+            >
+              <ha-label slot="trigger" class="plus" dense>
+                +${labels.length - 2}
+              </ha-label>
+              ${repeat(
+                labels.slice(2),
+                (label) => label.label_id,
+                (label) => html`
+                  <ha-dropdown-item .value=${label.label_id} .item=${label}>
+                    ${this._renderLabel(label, false)}
+                  </ha-dropdown-item>
+                `
+              )}
+            </ha-dropdown>`
+          : nothing}
+      </ha-chip-set>
     `;
   }
 
-  protected async firstUpdated() {
-    await this.updateComplete;
-    if (this._viewport) {
-      this._resizeController.observe(this._viewport);
-    }
-    await this._measureWidths();
-    this._recomputeVisibleCount(this._viewport?.clientWidth ?? 0);
-  }
-
-  protected async updated(changedProps: Map<string, unknown>) {
-    if (changedProps.has("labels")) {
-      await this.updateComplete;
-      await this._measureWidths();
-      this._recomputeVisibleCount(this._viewport?.clientWidth ?? 0);
-    }
-  }
-
-  private async _measureWidths() {
-    await this.updateComplete;
-
-    const measureRoot = this._measure;
-    if (!measureRoot) {
-      return;
-    }
-
-    const measureChipSet = measureRoot.querySelector("ha-chip-set");
-    if (measureChipSet) {
-      const styles = getComputedStyle(measureChipSet);
-      const raw = styles.columnGap || styles.gap;
-      this._gap = raw ? parseFloat(raw) : 0;
-    }
-
-    const chipEls = Array.from(
-      measureRoot.querySelectorAll<HTMLElement>("[data-chip]")
-    );
-    const plusEl = measureRoot.querySelector<HTMLElement>("[data-plus]");
-
-    this._chipWidths = chipEls.map((el) => el.offsetWidth);
-    this._plusWidth = plusEl?.offsetWidth ?? 0;
-  }
-
-  private _recomputeVisibleCount(containerWidth: number) {
-    if (!containerWidth || !this.labels?.length) {
-      this._visibleCount = 0;
-      return;
-    }
-
-    const total = this._sortedLabels.length;
-
-    let used = 0;
-    let visibleCount = 0;
-
-    for (let i = 0; i < total; i++) {
-      const chipWidth = this._chipWidths[i] ?? 0;
-      const nextUsed =
-        visibleCount === 0 ? chipWidth : used + this._gap + chipWidth;
-      const remaining = total - (i + 1);
-      const reserve = remaining > 0 ? this._gap + this._plusWidth : 0;
-
-      if (nextUsed + reserve <= containerWidth) {
-        used = nextUsed;
-        visibleCount++;
-      } else {
-        break;
-      }
-    }
-    this._visibleCount = visibleCount;
-  }
-
   private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
     return html`
       <ha-label
@@ -217,43 +93,13 @@ class HaDataTableLabels extends LitElement {
     :host {
       display: block;
       flex-grow: 1;
-      min-width: 0;
       margin-top: 4px;
       height: 22px;
-      position: relative;
     }
-
-    .viewport {
-      min-width: 0;
-      width: 100%;
-      overflow: hidden;
-    }
-
     ha-chip-set {
-      display: flex;
+      position: fixed;
       flex-wrap: nowrap;
-      align-items: center;
-      overflow: hidden;
-      min-width: 0;
     }
-
-    .measure {
-      position: absolute;
-      inset: 0 auto auto 0;
-      visibility: hidden;
-      pointer-events: none;
-      white-space: nowrap;
-    }
-
-    .measure ha-chip-set {
-      width: max-content;
-      overflow: visible;
-    }
-
-    .measure-chip {
-      display: inline-flex;
-    }
-
     .plus {
       --ha-label-background-color: transparent;
       border: 1px solid var(--divider-color);

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

@@ -24,7 +24,6 @@ import "../ha-icon-button";
 import "../ha-icon-button-next";
 import "../ha-icon-button-prev";
 import "../ha-textarea";
-import type { HaTextArea } from "../ha-textarea";
 import "./date-range-picker";
 
 export type DateRangePickerRanges = Record<string, [Date, Date]>;
@@ -99,8 +98,6 @@ export class HaDateRangePicker extends LitElement {
 
   @query(".container") private _containerElement?: HTMLDivElement;
 
-  @query("ha-textarea") private _textareaElement?: HaTextArea;
-
   private _narrow = false;
 
   private _unsubscribeTinyKeys?: () => void;
@@ -338,8 +335,9 @@ export class HaDateRangePicker extends LitElement {
   };
 
   private _setTextareaFocusStyle(focused: boolean) {
-    if (this._textareaElement) {
-      this._textareaElement.setFocused(focused);
+    const textarea = this.renderRoot.querySelector("ha-textarea");
+    if (textarea) {
+      textarea.setFocused(focused);
     }
   }
 

src/components/entity/ha-entity-picker.ts

@@ -1,7 +1,7 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityPickerDisplay } from "../../common/entity/compute_entity_name_display";
@@ -129,20 +129,6 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  @state() private _pendingEntityId?: string;
-
-  protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (
-      this._pendingEntityId &&
-      changedProperties.has("hass") &&
-      this.hass.states !== changedProperties.get("hass")?.states &&
-      this.hass.states[this._pendingEntityId]
-    ) {
-      this._setValue(this._pendingEntityId);
-      this._pendingEntityId = undefined;
-    }
-  }
-
   protected firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     // Load title translations so it is available when the combo-box opens
@@ -413,13 +399,7 @@ export class HaEntityPicker extends LitElement {
       showHelperDetailDialog(this, {
         domain,
         dialogClosedCallback: (item) => {
-          if (item.entityId) {
-            if (this.hass.states[item.entityId]) {
-              this._setValue(item.entityId);
-            } else {
-              this._pendingEntityId = item.entityId;
-            }
-          }
+          if (item.entityId) this._setValue(item.entityId);
         },
       });
       return;

src/components/entity/ha-entity-toggle.ts

@@ -13,23 +13,15 @@ import {
 } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
+import "../ha-control-switch";
 import "../ha-formfield";
 import "../ha-icon-button";
-import "../ha-switch";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
   !STATES_OFF.includes(stateObj.state) &&
   !isUnavailableState(stateObj.state);
 
-/**
- * @element ha-entity-toggle
- *
- * @cssprop --ha-entity-toggle-switch-width - Width of the switch track. Defaults to `38px`.
- * @cssprop --ha-entity-toggle-switch-size - Height of the switch track. Defaults to `20px`.
- * @cssprop --ha-entity-toggle-switch-thumb-size - Size of the switch thumb. Defaults to `14px`.
- */
-
 @customElement("ha-entity-toggle")
 export class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
@@ -43,7 +35,7 @@ export class HaEntityToggle extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
-      return html`<ha-switch disabled></ha-switch> `;
+      return html`<ha-control-switch disabled></ha-control-switch> `;
     }
 
     if (
@@ -70,14 +62,14 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
-    const switchTemplate = html`<ha-switch
+    const switchTemplate = html`<ha-control-switch
       aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
       .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
-    ></ha-switch>`;
+    ></ha-control-switch>`;
 
     if (!this.label) {
       return switchTemplate;
@@ -168,14 +160,12 @@ export class HaEntityToggle extends LitElement {
 
   static styles = css`
     :host {
-      display: flex;
-      align-items: center;
       white-space: nowrap;
+      min-width: 38px;
     }
-    ha-switch {
-      --ha-switch-width: var(--ha-entity-toggle-switch-width, 38px);
-      --ha-switch-size: var(--ha-entity-toggle-switch-size, 20px);
-      --ha-switch-thumb-size: var(--ha-entity-toggle-switch-thumb-size, 14px);
+    ha-control-switch {
+      --control-switch-thickness: 20px;
+      --control-switch-off-color: var(--state-inactive-color);
     }
     ha-icon-button {
       --ha-icon-button-size: 40px;

src/components/entity/ha-state-label-badge.ts

@@ -130,6 +130,7 @@ export class HaStateLabelBadge extends LitElement {
           ? html`<ha-state-icon
               .icon=${this.icon}
               .stateObj=${entityState}
+              .hass=${this.hass}
             ></ha-state-icon>`
           : ""}
         ${value && !image && !showIcon

src/components/entity/ha-statistic-picker.ts

@@ -142,7 +142,6 @@ export class HaStatisticPicker extends LitElement {
   private async _getStatisticIds() {
     this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
     this._picker?.requestUpdate();
-    this._valueRenderer = this._makeValueRenderer();
   }
 
   private _getItems = () =>
@@ -211,10 +210,7 @@ export class HaStatisticPicker extends LitElement {
         });
       }
 
-      const isRTL = computeRTL(
-        hass.language,
-        hass.translationMetadata.translations
-      );
+      const isRTL = computeRTL(hass);
 
       const output: StatisticComboBoxItem[] = [];
 
@@ -318,7 +314,7 @@ export class HaStatisticPicker extends LitElement {
     }
   );
 
-  private _renderValue(value: string) {
+  private _valueRenderer: PickerValueRenderer = (value) => {
     const statisticId = value;
 
     const item = this._computeItem(statisticId);
@@ -342,13 +338,7 @@ export class HaStatisticPicker extends LitElement {
         ? html`<span slot="supporting-text">${item.secondary}</span>`
         : nothing}
     `;
-  }
-
-  private _makeValueRenderer(): PickerValueRenderer {
-    return (value) => this._renderValue(value);
-  }
-
-  private _valueRenderer: PickerValueRenderer = this._makeValueRenderer();
+  };
 
   private _computeItem(statisticId: string): StatisticComboBoxItem {
     const stateObj = this.hass.states[statisticId];
@@ -363,10 +353,7 @@ export class HaStatisticPicker extends LitElement {
         this.hass.floors
       );
 
-      const isRTL = computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      );
+      const isRTL = computeRTL(this.hass);
 
       const primary = entityName || deviceName || statisticId;
       const secondary = [areaName, entityName ? deviceName : undefined]

src/components/entity/state-badge.ts

@@ -98,6 +98,7 @@ export class StateBadge extends LitElement {
     const domain = stateObj ? computeStateDomain(stateObj) : undefined;
 
     return html`<ha-state-icon
+      .hass=${this.hass}
       style=${styleMap(this._iconStyle)}
       data-domain=${ifDefined(domain)}
       data-state=${ifDefined(stateObj?.state)}

src/components/ha-adaptive-dialog.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { listenMediaQuery } from "../common/dom/media_query";
 import { internationalizationContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./ha-bottom-sheet";
 import "./ha-dialog-header";
 import "./ha-icon-button";
@@ -81,6 +82,8 @@ export const ADAPTIVE_DIALOG_MEDIA_QUERY =
  */
 @customElement("ha-adaptive-dialog")
 export class HaAdaptiveDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: "aria-labelledby" })
   public ariaLabelledBy?: string;
 
@@ -199,6 +202,7 @@ export class HaAdaptiveDialog extends LitElement {
           .ariaLabelledBy=${this._defaultAriaLabelledBy}
           .ariaDescribedBy=${this.ariaDescribedBy}
           .flexContent=${this.flexContent}
+          .hass=${this.hass}
           .open=${this.open}
           .preventScrimClose=${this.preventScrimClose}
         >
@@ -217,6 +221,7 @@ export class HaAdaptiveDialog extends LitElement {
 
     return html`
       <ha-dialog
+        .hass=${this.hass}
         .open=${this.open}
         .type=${this.type}
         .width=${this.width}

src/components/ha-adaptive-popover.ts

@@ -1,6 +1,6 @@
 import "@home-assistant/webawesome/dist/components/popover/popover";
 import { css, html, nothing, type PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { ScrollLockMixin } from "../mixins/scroll-lock-mixin";
@@ -25,8 +25,6 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
 
   @state() private _shouldRenderPopover = false;
 
-  @query("wa-popover") private _popoverElement?: HTMLElement;
-
   protected willUpdate(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("dialogAnchor") ||
@@ -190,7 +188,7 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
   }
 
   private _handlePopoverPointerDown(ev: PointerEvent) {
-    const popover = this._popoverElement;
+    const popover = this.renderRoot.querySelector("wa-popover");
     const dialog = popover?.shadowRoot?.querySelector(
       "dialog"
     ) as HTMLDialogElement | null;
@@ -217,7 +215,7 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
   }
 
   private _pulsePopover() {
-    const popover = this._popoverElement;
+    const popover = this.renderRoot.querySelector("wa-popover");
     const popup = popover?.shadowRoot?.querySelector("wa-popup") as {
       popup?: HTMLElement;
     } | null;

src/components/ha-analytics.ts

@@ -5,10 +5,10 @@ import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
+import "./ha-md-list-item";
 import "./ha-switch";
-import type { HaSwitch } from "./ha-switch";
 import "./ha-tooltip";
-import "./item/ha-row-item";
+import type { HaSwitch } from "./ha-switch";
 
 const ADDITIONAL_PREFERENCES = ["usage", "statistics"] as const;
 
@@ -33,7 +33,7 @@ export class HaAnalytics extends LitElement {
     const baseEnabled = !loading && this.analytics!.preferences.base;
 
     return html`
-      <ha-row-item>
+      <ha-md-list-item>
         <span slot="headline"
           >${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
@@ -52,10 +52,10 @@ export class HaAnalytics extends LitElement {
           .disabled=${loading}
           name="base"
         ></ha-switch>
-      </ha-row-item>
+      </ha-md-list-item>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) => html`
-          <ha-row-item>
+          <ha-md-list-item>
             <span slot="headline"
               >${this.localize(
                 `ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
@@ -81,10 +81,10 @@ export class HaAnalytics extends LitElement {
                     `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                   )}
                 </ha-tooltip>`}
-          </ha-row-item>
+          </ha-md-list-item>
         `
       )}
-      <ha-row-item>
+      <ha-md-list-item>
         <span slot="headline"
           >${this.localize(
             `ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
@@ -103,7 +103,7 @@ export class HaAnalytics extends LitElement {
           .disabled=${loading}
           name="diagnostics"
         ></ha-switch>
-      </ha-row-item>
+      </ha-md-list-item>
     `;
   }
 
@@ -139,8 +139,10 @@ export class HaAnalytics extends LitElement {
           color: var(--error-color);
         }
 
-        ha-row-item {
-          --ha-row-item-padding-inline: 0;
+        ha-md-list-item {
+          --md-list-item-leading-space: 0;
+          --md-list-item-trailing-space: 0;
+          --md-item-overflow: visible;
         }
       `,
     ];

src/components/ha-ansi-to-html.ts

@@ -9,7 +9,6 @@ import {
   customElement,
   property,
   query,
-  queryAll,
   state as litState,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -32,8 +31,6 @@ export class HaAnsiToHtml extends LitElement {
 
   @query("pre") private _pre?: HTMLPreElement;
 
-  @queryAll("div") private _divs!: NodeListOf<HTMLDivElement>;
-
   @litState() private _filter = "";
 
   protected render(): TemplateResult {
@@ -323,7 +320,7 @@ export class HaAnsiToHtml extends LitElement {
    */
   filterLines(filter: string): boolean {
     this._filter = filter;
-    const lines = this._divs;
+    const lines = this.shadowRoot?.querySelectorAll("div") || [];
     let numberOfFoundLines = 0;
     if (!filter) {
       lines.forEach((line) => {

src/components/ha-area-controls-picker.ts

@@ -184,10 +184,7 @@ export class HaAreaControlsPicker extends LitElement {
           const allEntityIds = Object.values(controlEntities).flat();
           const uniqueEntityIds = Array.from(new Set(allEntityIds));
 
-          const isRTL = computeRTL(
-            this.hass.language,
-            this.hass.translationMetadata.translations
-          );
+          const isRTL = computeRTL(this.hass);
 
           uniqueEntityIds.forEach((entityId) => {
             if (isSelected(entityId)) {
@@ -264,6 +261,7 @@ export class HaAreaControlsPicker extends LitElement {
       ${item.type === "entity" && item.stateObj
         ? html`<ha-state-icon
             slot="start"
+            .hass=${this.hass}
             .stateObj=${item.stateObj}
           ></ha-state-icon>`
         : item.domain

src/components/ha-area-picker.ts

@@ -1,8 +1,8 @@
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
-import type { TemplateResult, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeAreaName } from "../common/entity/compute_area_name";
@@ -85,20 +85,6 @@ export class HaAreaPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  @state() private _pendingAreaId?: string;
-
-  protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (
-      this._pendingAreaId &&
-      changedProperties.has("hass") &&
-      this.hass.areas !== changedProperties.get("hass")?.areas &&
-      this.hass.areas[this._pendingAreaId]
-    ) {
-      this._setValue(this._pendingAreaId);
-      this._pendingAreaId = undefined;
-    }
-  }
-
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -257,11 +243,7 @@ export class HaAreaPicker extends LitElement {
         createEntry: async (values) => {
           try {
             const area = await createAreaRegistryEntry(this.hass, values);
-            if (this.hass.areas[area.area_id]) {
-              this._setValue(area.area_id);
-            } else {
-              this._pendingAreaId = area.area_id;
-            }
+            this._setValue(area.area_id);
           } catch (err: any) {
             showAlertDialog(this, {
               title: this.hass.localize(

src/components/ha-automation-row.ts

@@ -2,8 +2,8 @@ import { mdiChevronUp } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-icon-button";
+import { fireEvent } from "../common/dom/fire_event";
+import "./ha-icon-button";
 
 @customElement("ha-automation-row")
 export class HaAutomationRow extends LitElement {
@@ -27,9 +27,6 @@ export class HaAutomationRow extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public highlight?: boolean;
 
-  @property({ type: Boolean, reflect: true })
-  public dim = false;
-
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -54,11 +51,7 @@ export class HaAutomationRow extends LitElement {
         <div class="leading-icon-wrapper">
           <slot name="leading-icon"></slot>
         </div>
-        <div class="header">
-          <slot name="header"></slot>
-          <slot name="event"></slot>
-        </div>
-
+        <slot class="header" name="header"></slot>
         <div class="icons">
           <slot name="icons"></slot>
         </div>
@@ -124,11 +117,10 @@ export class HaAutomationRow extends LitElement {
   static styles = css`
     :host {
       display: block;
-      position: relative;
     }
     .row {
       display: flex;
-      padding: 0 0 0 var(--ha-space-3);
+      padding: 0 var(--ha-space-3);
       min-height: 48px;
       align-items: flex-start;
       cursor: pointer;
@@ -180,23 +172,12 @@ export class HaAutomationRow extends LitElement {
       border-top-right-radius: var(--ha-border-radius-square);
       border-top-left-radius: var(--ha-border-radius-square);
     }
-    .header {
-      position: relative;
-      display: flex;
-      align-items: center;
+    ::slotted([slot="header"]) {
       flex: 1;
       min-width: 0;
       overflow-wrap: anywhere;
       margin: 0 var(--ha-space-3);
     }
-    ::slotted([slot="header"]) {
-      overflow-wrap: anywhere;
-      margin: 0 var(--ha-space-3);
-    }
-    ::slotted([slot="event"]) {
-      position: absolute;
-      inset-inline-end: 0;
-    }
     .icons {
       display: flex;
       align-items: center;
@@ -218,19 +199,6 @@ export class HaAutomationRow extends LitElement {
     :host([highlight]) .row:hover {
       background-color: rgba(var(--rgb-primary-color), 0.16);
     }
-
-    .icons,
-    .leading-icon-wrapper,
-    ::slotted([slot="header"]) {
-      transition: opacity var(--ha-animation-duration-normal);
-      opacity: 1;
-    }
-
-    :host([dim]) .icons,
-    :host([dim]) .leading-icon-wrapper,
-    :host([dim]) ::slotted([slot="header"]) {
-      opacity: 0.5;
-    }
   `;
 }
 

src/components/ha-blueprint-picker.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
@@ -24,12 +24,11 @@ class HaBluePrintPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-select") private _select?: HTMLElement;
-
   public open() {
-    if (this._select) {
+    const select = this.shadowRoot?.querySelector("ha-select");
+    if (select) {
       // @ts-expect-error
-      this._select.menuOpen = true;
+      select.menuOpen = true;
     }
   }
 

src/components/ha-bottom-sheet.ts

@@ -1,15 +1,13 @@
 import "@home-assistant/webawesome/dist/components/drawer/drawer";
 import type WaDrawer from "@home-assistant/webawesome/dist/components/drawer/drawer";
-import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { SwipeGestureRecognizer } from "../common/util/swipe-gesture-recognizer";
-import { configContext } from "../data/context";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
-import { isIosApp } from "../util/is_ios";
+import type { HomeAssistant } from "../types";
 
 export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 
@@ -49,6 +47,8 @@ const SWIPE_LOCKED_CLASSES = new Set(["volume-slider-container", "forecast"]);
  */
 @customElement("ha-bottom-sheet")
 export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
   @property({ attribute: "aria-labelledby" })
   public ariaLabelledBy?: string;
 
@@ -67,16 +67,10 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
 
   @state() private _sliderInteractionActive = false;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _hassConfig?: ContextType<typeof configContext>;
-
   @query("#drawer") private _drawer!: HTMLElement;
 
   @query("#body") private _bodyElement!: HTMLDivElement;
 
-  @query("[autofocus]") private _autofocusElement?: HTMLElement;
-
   protected get scrollableElement(): HTMLElement | null {
     return this._bodyElement;
   }
@@ -95,25 +89,25 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      const element = this._autofocusElement;
-      if (
-        this._hassConfig?.auth.external &&
-        isIosApp(this._hassConfig.auth.external)
-      ) {
-        if (element) {
-          if (!element.id) {
-            element.id = "ha-bottom-sheet-autofocus";
-          }
-          this._hassConfig.auth.external.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
-      element?.focus();
+      // disabled till iOS app fix the "focus_element" implementation
+      // if (this.hass && isIosApp(this.hass.auth.external)) {
+      //   const element = this.renderRoot.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-bottom-sheet-autofocus";
+      //     }
+      //     this.hass.auth.external?.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
+      (
+        this.renderRoot.querySelector("[autofocus]") as HTMLElement | null
+      )?.focus();
     });
   };
 

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

@@ -0,0 +1,538 @@
+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-code-editor-jinja-arg-hover.ts

@@ -1,42 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { CompletionItem } from "./ha-code-editor-completion-items";
-import "./ha-code-editor-completion-items";
-
-@customElement("ha-code-editor-jinja-arg-hover")
-export class HaCodeEditorJinjaArgHover extends LitElement {
-  /** Bold heading shown above the items grid (e.g. entity/device/area name). */
-  @property({ attribute: false }) public heading?: string;
-
-  @property({ attribute: false }) public items: CompletionItem[] = [];
-
-  render() {
-    return html`
-      ${this.heading
-        ? html`<div class="heading">${this.heading}</div>`
-        : nothing}
-      <ha-code-editor-completion-items
-        .items=${this.items}
-      ></ha-code-editor-completion-items>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      padding: 6px 10px;
-      max-width: 360px;
-    }
-
-    .heading {
-      font-weight: var(--ha-font-weight-bold);
-      margin-bottom: 4px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-code-editor-jinja-arg-hover": HaCodeEditorJinjaArgHover;
-  }
-}

src/components/ha-code-editor-jinja-hover.ts

@@ -1,101 +0,0 @@
-import type { Completion } from "@codemirror/autocomplete";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { mdiHelpCircleOutline } from "@mdi/js";
-import "./ha-svg-icon";
-
-@customElement("ha-code-editor-jinja-hover")
-export class HaCodeEditorJinjaHover extends LitElement {
-  @property({ attribute: false }) public completion!: Completion;
-
-  @property({ attribute: false }) public docUrl?: string;
-
-  @property({ attribute: false }) public openDocumentation =
-    "Open documentation";
-
-  render() {
-    const info =
-      typeof this.completion.info === "string"
-        ? this.completion.info
-        : undefined;
-
-    return html`
-      <div class="header">
-        <div class="sig">
-          <strong>${this.completion.label}</strong>
-          ${this.completion.detail
-            ? html`<span class="detail">(${this.completion.detail})</span>`
-            : nothing}
-        </div>
-        ${this.docUrl
-          ? html`<a
-              class="doc-link"
-              href=${this.docUrl}
-              target="_blank"
-              rel="noreferrer"
-              title=${this.openDocumentation}
-              ><ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon
-            ></a>`
-          : nothing}
-      </div>
-      ${info ? html`<div class="desc">${info}</div>` : nothing}
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      padding: 6px 10px;
-      max-width: 360px;
-      line-height: 1.5;
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin-bottom: 4px;
-    }
-
-    .sig {
-      font-family: var(--ha-font-family-code);
-      font-size: 0.9em;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .detail {
-      color: var(--secondary-text-color);
-    }
-
-    .doc-link {
-      flex-shrink: 0;
-      display: inline-flex;
-      align-items: center;
-      color: var(--secondary-text-color);
-      opacity: 0.7;
-      line-height: 1;
-    }
-
-    .doc-link:hover {
-      opacity: 1;
-      color: var(--primary-color);
-    }
-
-    .doc-link ha-svg-icon {
-      width: 16px;
-      height: 16px;
-    }
-
-    .desc {
-      font-size: 0.9em;
-      color: var(--secondary-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-code-editor-jinja-hover": HaCodeEditorJinjaHover;
-  }
-}

src/components/ha-code-editor.ts

@@ -27,7 +27,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, ReactiveElement, render } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { ContextType } from "@lit/context";
 import { consume } from "@lit/context";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -37,21 +36,10 @@ import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
 import { haStyleScrollbar } from "../resources/styles";
-import type {
-  JinjaArgType,
-  HassArgHoverContext,
-} from "../resources/jinja_ha_completions";
+import type { JinjaArgType } from "../resources/jinja_ha_completions";
 import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
-import { documentationUrl } from "../util/documentation-url";
-import {
-  internationalizationContext,
-  registriesContext,
-  statesContext,
-  labelsContext,
-  configContext,
-  formattersContext,
-} from "../data/context";
+import { labelsContext } from "../data/context";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
@@ -86,6 +74,8 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property() public mode = "yaml";
 
+  public hass?: HomeAssistant;
+
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
 
@@ -101,8 +91,6 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property({ type: Boolean }) public error = false;
 
-  @property({ type: Boolean }) public lint = false;
-
   @property({ type: Boolean, attribute: "disable-fullscreen" })
   public disableFullscreen = false;
 
@@ -129,29 +117,9 @@ export class HaCodeEditor extends ReactiveElement {
 
   @state() private _canCopy = false;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config?: ContextType<typeof configContext>;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: ContextType<typeof internationalizationContext>;
-
-  @state()
   @consume({ context: labelsContext, subscribe: true })
-  private _labels?: ContextType<typeof labelsContext>;
-
   @state()
-  @consume({ context: registriesContext, subscribe: true })
-  private _registries?: ContextType<typeof registriesContext>;
-
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters?: ContextType<typeof formattersContext>;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states?: ContextType<typeof statesContext>;
+  private _labels?: LabelRegistryEntry[];
 
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
@@ -188,44 +156,9 @@ export class HaCodeEditor extends ReactiveElement {
       this.codemirror.state,
       [this._loadedCodeMirror.tags.comment]
     );
-    // eslint-disable-next-line lit/prefer-query-decorators
     return !!this.renderRoot.querySelector(`span.${className}`);
   }
 
-  /**
-   * Push a YAML parse error (or null to clear) into the lint gutter as a
-   * diagnostic. Avoids re-parsing the document — the caller (ha-yaml-editor)
-   * already has the error from its own js-yaml load() call.
-   */
-  public setYamlError(
-    err: {
-      mark?: { position: number; line: number; column: number };
-      reason?: string;
-    } | null
-  ): void {
-    if (!this.codemirror || !this._loadedCodeMirror) return;
-    let diagnostics: {
-      from: number;
-      to: number;
-      severity: "error";
-      message: string;
-    }[] = [];
-    if (err) {
-      const doc = this.codemirror.state.doc;
-      const pos = err.mark ? Math.min(err.mark.position, doc.length) : 0;
-      const line = doc.lineAt(pos);
-      const message = `${
-        err.reason ||
-        this._i18n?.localize("ui.components.yaml-editor.error") ||
-        "YAML syntax error"
-      }${err.mark ? ` (${this._i18n?.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
-      diagnostics = [{ from: pos, to: line.to, severity: "error", message }];
-    }
-    this.codemirror.dispatch(
-      this._loadedCodeMirror.setDiagnostics(this.codemirror.state, diagnostics)
-    );
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this.classList.toggle("in-dialog", this.inDialog);
@@ -283,37 +216,16 @@ export class HaCodeEditor extends ReactiveElement {
       transactions.push({
         effects: [
           this._loadedCodeMirror!.langCompartment!.reconfigure(this._mode),
-          this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
-            this.lint && !this.readOnly
-              ? [this._loadedCodeMirror!.lintGutter()]
-              : []
-          ),
         ],
       });
     }
     if (changedProps.has("readOnly")) {
       transactions.push({
-        effects: [
-          this._loadedCodeMirror!.readonlyCompartment!.reconfigure(
-            this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
-          ),
-          this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
-            this.lint && !this.readOnly
-              ? [this._loadedCodeMirror!.lintGutter()]
-              : []
-          ),
-        ],
-      });
-      this._updateToolbarButtons();
-    }
-    if (changedProps.has("lint")) {
-      transactions.push({
-        effects: this._loadedCodeMirror!.yamlLintCompartment!.reconfigure(
-          this.lint && !this.readOnly
-            ? [this._loadedCodeMirror!.lintGutter()]
-            : []
+        effects: this._loadedCodeMirror!.readonlyCompartment!.reconfigure(
+          this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
         ),
       });
+      this._updateToolbarButtons();
     }
     if (changedProps.has("linewrap")) {
       transactions.push({
@@ -396,7 +308,6 @@ export class HaCodeEditor extends ReactiveElement {
         ...this._loadedCodeMirror.searchKeymap,
         ...this._loadedCodeMirror.historyKeymap,
         ...this._loadedCodeMirror.tabKeyBindings,
-        ...this._loadedCodeMirror.lintKeymap,
         saveKeyBinding,
       ]),
       this._loadedCodeMirror.search({ top: true }),
@@ -411,23 +322,10 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.linewrapCompartment.of(
         this.linewrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
       ),
-      this._loadedCodeMirror.yamlLintCompartment.of(
-        this.lint && !this.readOnly ? [this._loadedCodeMirror.lintGutter()] : []
-      ),
       this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
       this._loadedCodeMirror.tooltips({
         position: "absolute",
       }),
-      this._loadedCodeMirror.hoverTooltip(
-        (view, pos) =>
-          this._loadedCodeMirror!.haJinjaHoverSource(
-            view,
-            pos,
-            this._config ? documentationUrl(this._config, "") : undefined,
-            this._hassArgHoverContext()
-          ),
-        { hoverTime: 300 }
-      ),
       ...(this.placeholder ? [placeholder(this.placeholder)] : []),
     ];
 
@@ -435,7 +333,7 @@ export class HaCodeEditor extends ReactiveElement {
       const completionSources: CompletionSource[] = [
         this._loadedCodeMirror.haJinjaCompletionSource,
       ];
-      if (this.autocompleteEntities) {
+      if (this.autocompleteEntities && this.hass) {
         completionSources.push(this._entityCompletions.bind(this));
       }
       if (this.autocompleteIcons) {
@@ -474,12 +372,12 @@ export class HaCodeEditor extends ReactiveElement {
   private _fullscreenLabel(): string {
     if (this._isFullscreen) {
       return (
-        this._i18n?.localize("ui.components.yaml-editor.exit_fullscreen") ||
+        this.hass?.localize("ui.components.yaml-editor.exit_fullscreen") ||
         "Exit fullscreen"
       );
     }
     return (
-      this._i18n?.localize("ui.components.yaml-editor.enter_fullscreen") ||
+      this.hass?.localize("ui.components.yaml-editor.enter_fullscreen") ||
       "Enter fullscreen"
     );
   }
@@ -534,7 +432,7 @@ export class HaCodeEditor extends ReactiveElement {
             {
               id: "test",
               label:
-                this._i18n?.localize(
+                this.hass?.localize(
                   `ui.components.yaml-editor.test_${this.testing ? "off" : "on"}`
                 ) || "Test",
               path: this.testing ? mdiBugOutline : mdiBug,
@@ -545,14 +443,14 @@ export class HaCodeEditor extends ReactiveElement {
       {
         id: "undo",
         disabled: !this._canUndo,
-        label: this._i18n?.localize("ui.common.undo") || "Undo",
+        label: this.hass?.localize("ui.common.undo") || "Undo",
         path: mdiUndo,
         action: (e: Event) => this._handleUndoClick(e),
       },
       {
         id: "redo",
         disabled: !this._canRedo,
-        label: this._i18n?.localize("ui.common.redo") || "Redo",
+        label: this.hass?.localize("ui.common.redo") || "Redo",
         path: mdiRedo,
         action: (e: Event) => this._handleRedoClick(e),
       },
@@ -560,7 +458,7 @@ export class HaCodeEditor extends ReactiveElement {
         id: "copy",
         disabled: !this._canCopy,
         label:
-          this._i18n?.localize("ui.components.yaml-editor.copy_to_clipboard") ||
+          this.hass?.localize("ui.components.yaml-editor.copy_to_clipboard") ||
           "Copy to Clipboard",
         path: mdiContentCopy,
         action: (e: Event) => this._handleClipboardClick(e),
@@ -568,7 +466,7 @@ export class HaCodeEditor extends ReactiveElement {
       {
         id: "find-replace",
         label:
-          this._i18n?.localize("ui.components.yaml-editor.find_and_replace") ||
+          this.hass?.localize("ui.components.yaml-editor.find_and_replace") ||
           "Find and replace",
         path: mdiFindReplace,
         action: (e: Event) => this._handleFindReplaceClick(e),
@@ -610,7 +508,7 @@ export class HaCodeEditor extends ReactiveElement {
       await copyToClipboard(this.value);
       showToast(this, {
         message:
-          this._i18n?.localize("ui.common.copied_clipboard") ||
+          this.hass?.localize("ui.common.copied_clipboard") ||
           "Copied to clipboard",
       });
     }
@@ -677,104 +575,55 @@ export class HaCodeEditor extends ReactiveElement {
     }
   };
 
-  /**
-   * Builds a HassArgHoverContext from the context objects so that
-   * haJinjaHoverSource can resolve entity / device / area friendly names
-   * without importing the full HomeAssistant type into the resource file.
-   */
-  private _hassArgHoverContext(): HassArgHoverContext {
-    const labelMap: Record<
-      string,
-      { name: string; description?: string | null }
-    > = {};
-    for (const label of this._labels ?? []) {
-      labelMap[label.label_id] = {
-        name: label.name,
-        description: label.description,
-      };
-    }
-    return {
-      states: this._states as HassArgHoverContext["states"],
-      devices: this._registries?.devices as HassArgHoverContext["devices"],
-      areas: this._registries?.areas as HassArgHoverContext["areas"],
-      floors: this._registries?.floors as HassArgHoverContext["floors"],
-      entities: this._registries?.entities as HassArgHoverContext["entities"],
-      labels: labelMap,
-      formatEntityState: (entityId) =>
-        this._formatters!.formatEntityState(this._states![entityId]),
-      formatEntityName: (entityId) => {
-        const stateObj = this._states?.[entityId];
-        return (
-          (stateObj?.attributes.friendly_name as string | undefined) ??
-          this._registries?.entities?.[entityId]?.name ??
-          undefined
-        );
-      },
-      formatAttributeName: (entityId, attribute) =>
-        this._formatters!.formatEntityAttributeName(
-          this._states![entityId],
-          attribute
-        ),
-      formatAttributeValue: (entityId, attribute) =>
-        this._formatters!.formatEntityAttributeValue(
-          this._states![entityId],
-          attribute
-        ),
-      localize: (key) => this._i18n!.localize(key as never),
-    };
-  }
-
   private _renderInfo = (completion: Completion): CompletionInfo => {
     const key =
       typeof completion.apply === "string"
         ? completion.apply
         : completion.label;
     const context = getEntityContext(
-      this._states![key],
-      this._registries!.entities,
-      this._registries!.devices,
-      this._registries!.areas,
-      this._registries!.floors
+      this.hass!.states[key],
+      this.hass!.entities,
+      this.hass!.devices,
+      this.hass!.areas,
+      this.hass!.floors
     );
 
     const completionInfo = document.createElement("div");
     completionInfo.classList.add("completion-info");
 
-    const formattedState = this._formatters!.formatEntityState(
-      this._states![key]
-    );
+    const formattedState = this.hass!.formatEntityState(this.hass!.states[key]);
 
     const completionItems: CompletionItem[] = [
       {
-        label: this._i18n!.localize(
+        label: this.hass!.localize(
           "ui.components.entity.entity-state-picker.state"
         ),
         value: formattedState,
         subValue:
           // If the state exactly matches the formatted state, don't show the raw state
-          this._states![key].state === formattedState
+          this.hass!.states[key].state === formattedState
             ? undefined
-            : this._states![key].state,
+            : this.hass!.states[key].state,
       },
     ];
 
     if (context.device && context.device.name) {
       completionItems.push({
-        label: this._i18n!.localize("ui.components.device-picker.device"),
+        label: this.hass!.localize("ui.components.device-picker.device"),
         value: context.device.name,
       });
     }
 
     if (context.area && context.area.name) {
       completionItems.push({
-        label: this._i18n!.localize("ui.components.area-picker.area"),
+        label: this.hass!.localize("ui.components.area-picker.area"),
         value: context.area.name,
       });
     }
 
     if (context.floor && context.floor.name) {
       completionItems.push({
-        label: this._i18n!.localize("ui.components.floor-picker.floor"),
+        label: this.hass!.localize("ui.components.floor-picker.floor"),
         value: context.floor.name,
       });
     }
@@ -795,15 +644,15 @@ export class HaCodeEditor extends ReactiveElement {
     entityId: string,
     attribute: string
   ): CompletionInfo | null => {
-    if (!this._states || !this._formatters) return null;
-    const stateObj = this._states[entityId];
+    if (!this.hass) return null;
+    const stateObj = this.hass.states[entityId];
     if (!stateObj) return null;
 
-    const translatedName = this._formatters.formatEntityAttributeName(
+    const translatedName = this.hass.formatEntityAttributeName(
       stateObj,
       attribute
     );
-    const formattedValue = this._formatters.formatEntityAttributeValue(
+    const formattedValue = this.hass.formatEntityAttributeValue(
       stateObj,
       attribute
     );
@@ -843,9 +692,9 @@ export class HaCodeEditor extends ReactiveElement {
     completion: Completion
   ): CompletionInfo | Promise<CompletionInfo> | null => {
     if (
-      this._states &&
+      this.hass &&
       typeof completion.apply === "string" &&
-      completion.apply in this._states
+      completion.apply in this.hass.states
     ) {
       return this._renderInfo(completion);
     }
@@ -1054,7 +903,7 @@ export class HaCodeEditor extends ReactiveElement {
   private _statesDotNotationCompletions(
     context: CompletionContext
   ): CompletionResult | null | undefined {
-    if (!this._states) return undefined;
+    if (!this.hass) return undefined;
 
     const { state: editorState, pos } = context;
     const tree = this._loadedCodeMirror!.syntaxTree(editorState);
@@ -1163,7 +1012,9 @@ export class HaCodeEditor extends ReactiveElement {
       case 0: {
         // states.   → offer all unique domains
         const domains = [
-          ...new Set(Object.keys(this._states).map((id) => id.split(".")[0])),
+          ...new Set(
+            Object.keys(this.hass.states).map((id) => id.split(".")[0])
+          ),
         ].sort();
         return {
           from: completionFrom,
@@ -1174,7 +1025,7 @@ export class HaCodeEditor extends ReactiveElement {
       case 1: {
         // states.<domain>.   → offer entity object_ids for that domain
         const [domain] = segments;
-        const entities = Object.keys(this._states)
+        const entities = Object.keys(this.hass.states)
           .filter((id) => id.startsWith(`${domain}.`))
           .map((id) => id.split(".").slice(1).join("."));
         if (!entities.length) return { from: completionFrom, options: [] };
@@ -1204,7 +1055,7 @@ export class HaCodeEditor extends ReactiveElement {
         }
         // Offer attribute names from the entity's state object
         const entityId = `${domain}.${entity}`;
-        const entityState = this._states[entityId];
+        const entityState = this.hass.states[entityId];
         if (!entityState) return { from: completionFrom, options: [] };
         const attrNames = Object.keys(entityState.attributes).sort();
         return {
@@ -1374,8 +1225,8 @@ export class HaCodeEditor extends ReactiveElement {
   ): CompletionResult {
     const from = stringNode.from + 1;
     const empty: CompletionResult = { from, options: [] };
-    if (!entityId || !this._states) return empty;
-    const entityState = this._states[entityId];
+    if (!entityId || !this.hass) return empty;
+    const entityState = this.hass.states[entityId];
     if (!entityState) return empty;
     const attrs = Object.keys(entityState.attributes).sort();
     if (!attrs.length) return empty;
@@ -1395,7 +1246,7 @@ export class HaCodeEditor extends ReactiveElement {
     from: number;
     to: number;
   }): CompletionResult | null {
-    const states = this._getStates(this._states!);
+    const states = this._getStates(this.hass!.states);
     if (!states?.length) return null;
     // from is stringNode.from + 1 to skip the opening quote character.
     const from = stringNode.from + 1;
@@ -1429,8 +1280,8 @@ export class HaCodeEditor extends ReactiveElement {
     from: number;
     to: number;
   }): CompletionResult | null {
-    if (!this._registries?.devices) return null;
-    const devices = this._getDevices(this._registries.devices);
+    if (!this.hass?.devices) return null;
+    const devices = this._getDevices(this.hass.devices);
     if (!devices.length) return null;
     return {
       from: stringNode.from + 1,
@@ -1458,8 +1309,8 @@ export class HaCodeEditor extends ReactiveElement {
     from: number;
     to: number;
   }): CompletionResult | null {
-    if (!this._registries?.areas) return null;
-    const areas = this._getAreas(this._registries.areas);
+    if (!this.hass?.areas) return null;
+    const areas = this._getAreas(this.hass.areas);
     if (!areas.length) return null;
     return {
       from: stringNode.from + 1,
@@ -1487,8 +1338,8 @@ export class HaCodeEditor extends ReactiveElement {
     from: number;
     to: number;
   }): CompletionResult | null {
-    if (!this._registries?.floors) return null;
-    const floors = this._getFloors(this._registries.floors);
+    if (!this.hass?.floors) return null;
+    const floors = this._getFloors(this.hass.floors);
     if (!floors.length) return null;
     return {
       from: stringNode.from + 1,
@@ -1588,7 +1439,7 @@ export class HaCodeEditor extends ReactiveElement {
 
         // If cursor is after the entity field, show all entities
         if (context.pos >= afterField) {
-          const states = this._getStates(this._states!);
+          const states = this._getStates(this.hass!.states);
 
           if (!states || !states.length) {
             return null;
@@ -1643,7 +1494,7 @@ export class HaCodeEditor extends ReactiveElement {
             const afterListMarker = currentLine.from + listItemMatch[0].length;
 
             if (context.pos >= afterListMarker) {
-              const states = this._getStates(this._states!);
+              const states = this._getStates(this.hass!.states);
 
               if (!states || !states.length) {
                 return null;
@@ -1703,7 +1554,7 @@ export class HaCodeEditor extends ReactiveElement {
       return null;
     }
 
-    const states = this._getStates(this._states!);
+    const states = this._getStates(this.hass!.states);
 
     if (!states || !states.length) {
       return null;

src/components/ha-condition-icon.ts

@@ -55,11 +55,7 @@ export class HaConditionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = conditionIcon(
-      this.hass.connection,
-      this.hass.config,
-      this.condition
-    ).then((icn) => {
+    const icon = conditionIcon(this.hass, this.condition).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-control-select.ts

@@ -54,7 +54,6 @@ export class HaControlSelect extends LitElement {
     this._activeIndex = index;
     this.requestUpdate();
     this.updateComplete.then(() => {
-      // eslint-disable-next-line lit/prefer-query-decorators
       const option = this.shadowRoot?.querySelector(
         `#option-${this.options![index].value}`
       ) as HTMLElement;

src/components/ha-control-switch.ts

@@ -196,7 +196,6 @@ export class HaControlSwitch extends LitElement {
       --control-switch-background-opacity: 0.2;
       --control-switch-hover-background-opacity: 0.4;
       --control-switch-thickness: 40px;
-      --control-switch-min-touch-size: 40px;
       --control-switch-border-radius: var(--ha-border-radius-lg);
       --control-switch-padding: 4px;
       --mdc-icon-size: 20px;
@@ -220,35 +219,21 @@ export class HaControlSwitch extends LitElement {
       width: 100%;
       border-radius: var(--control-switch-border-radius);
       outline: none;
+      overflow: hidden;
       padding: var(--control-switch-padding);
       display: flex;
       cursor: pointer;
     }
-    .switch::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100%;
-      height: 100%;
-      min-width: var(--control-switch-min-touch-size);
-      min-height: var(--control-switch-min-touch-size);
-    }
     .switch[disabled] {
       opacity: 0.5;
       cursor: not-allowed;
     }
-    .switch[disabled]::before {
-      pointer-events: none;
-    }
     .switch .background {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
-      border-radius: inherit;
       background-color: var(--control-switch-off-color);
       transition: background-color 180ms ease-in-out;
       opacity: var(--control-switch-background-opacity);

src/components/ha-dialog.ts

@@ -15,10 +15,9 @@ import { ifDefined } from "lit/directives/if-defined";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { withViewTransition } from "../common/util/view-transition";
-import { configContext, internationalizationContext } from "../data/context";
+import { internationalizationContext } from "../data/context";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
-import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";
 
@@ -128,9 +127,10 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: ContextType<typeof internationalizationContext>;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _hassConfig?: ContextType<typeof configContext>;
+  // disabled till iOS app fix the "focus_element" implementation
+  // @state()
+  // @consume({ context: configContext, subscribe: true })
+  // private _hassConfig?: ContextType<typeof configContext>;
 
   @state()
   private _bodyScrolled = false;
@@ -221,24 +221,22 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (
-        this._hassConfig?.auth.external &&
-        isIosApp(this._hassConfig.auth.external)
-      ) {
-        const element = this.querySelector("[autofocus]");
-        if (element !== null) {
-          if (!element.id) {
-            element.id = "ha-dialog-autofocus";
-          }
-          this._hassConfig.auth.external.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
+      // disabled till iOS app fix the "focus_element" implementation
+      // if (this._hassConfig?.auth.external && isIosApp(this._hassConfig.auth.external)) {
+      //   const element = this.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-dialog-autofocus";
+      //     }
+      //     this._hassConfig.auth.external.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
       (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
     });
   };

src/components/ha-drawer.ts

@@ -1,115 +1,36 @@
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
-import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
+import { styles } from "@material/mwc-drawer/mwc-drawer.css";
+import type { PropertyValues } from "lit";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HASSDomEvent } from "../common/dom/fire_event";
-import { SwipeGestureRecognizer } from "../common/util/swipe-gesture-recognizer";
 
 declare global {
   interface HASSDomEvents {
-    "hass-drawer-closed": undefined;
     "hass-layout-transition": { active: boolean; reason?: string };
   }
   interface HTMLElementEventMap {
-    "hass-drawer-closed": HASSDomEvent<HASSDomEvents["hass-drawer-closed"]>;
     "hass-layout-transition": HASSDomEvent<
       HASSDomEvents["hass-layout-transition"]
     >;
   }
 }
 
+const blockingElements = (document as any).$blockingElements;
+
 @customElement("ha-drawer")
-export class HaDrawer extends LitElement {
-  private static readonly _SWIPE_AXIS_TOLERANCE = 32;
+export class HaDrawer extends DrawerBase {
+  @property() public direction: "ltr" | "rtl" = "ltr";
 
-  @property({ reflect: true }) public direction: "ltr" | "rtl" = "ltr";
+  private _mc?: HammerManager;
 
-  @property({ reflect: true }) public type: "" | "dismissible" | "modal" = "";
-
-  @property({ type: Boolean, reflect: true }) public open = false;
-
-  @query("wa-drawer") private _modalDrawer?: HTMLElement;
-
-  @query(".sidebar-shell") private _sidebarShell?: HTMLElement;
+  private _rtlStyle?: HTMLElement;
 
   private _sidebarTransitionActive = false;
 
-  private _transitionTarget?: HTMLElement;
-
-  private _gestureRecognizer = new SwipeGestureRecognizer({
-    velocitySwipeThreshold: 0.35,
-  });
-
-  private _touchStartY = 0;
-
-  private _touchDeltaY = 0;
-
-  private get _modal() {
-    return this.type === "modal";
-  }
-
-  protected render(): TemplateResult {
-    return this._modal
-      ? html`
-          <slot name="appContent"></slot>
-          <wa-drawer
-            placement="start"
-            .open=${this.open}
-            light-dismiss
-            without-header
-            @touchstart=${this._handleTouchStart}
-            @wa-after-hide=${this._handleAfterHide}
-          >
-            <slot></slot>
-          </wa-drawer>
-        `
-      : html`
-          <div class="layout">
-            <div class="sidebar-shell">
-              <slot></slot>
-            </div>
-            <div class="app-content">
-              <slot name="appContent"></slot>
-            </div>
-          </div>
-        `;
-  }
-
-  protected updated(_: PropertyValues<this>) {
-    this._syncTransitionListeners();
-
-    if (!this.open) {
-      this._resetSwipeTracking();
-    }
-  }
-
-  protected firstUpdated() {
-    this._syncTransitionListeners();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._removeTransitionListeners();
-    this._unregisterSwipeHandlers();
-  }
-
-  private _handleAfterHide(ev: Event) {
-    ev.stopPropagation();
-    this.open = false;
-    fireEvent(this, "hass-drawer-closed");
-  }
-
-  private _closeModalDrawer() {
-    this.open = false;
-  }
-
   private _handleDrawerTransitionStart = (ev: TransitionEvent) => {
-    if (
-      ev.propertyName !==
-        (this.type === "dismissible" ? "transform" : "width") ||
-      this._sidebarTransitionActive
-    ) {
+    if (ev.propertyName !== "width" || this._sidebarTransitionActive) {
       return;
     }
     this._sidebarTransitionActive = true;
@@ -120,11 +41,7 @@ export class HaDrawer extends LitElement {
   };
 
   private _handleDrawerTransitionEnd = (ev: TransitionEvent) => {
-    if (
-      ev.propertyName !==
-        (this.type === "dismissible" ? "transform" : "width") ||
-      !this._sidebarTransitionActive
-    ) {
+    if (ev.propertyName !== "width" || !this._sidebarTransitionActive) {
       return;
     }
     this._sidebarTransitionActive = false;
@@ -134,207 +51,150 @@ export class HaDrawer extends LitElement {
     });
   };
 
-  private _handleTouchStart = (ev: TouchEvent) => {
-    if (!this._modal || !this.open) {
-      return;
-    }
-
-    const drawer = this._modalDrawer;
-    const dialog = drawer?.shadowRoot?.querySelector(
-      "dialog"
-    ) as HTMLDialogElement | null;
-
-    if (!dialog) {
-      return;
-    }
-
-    const path = ev.composedPath();
-
-    if (!path.includes(dialog)) {
-      return;
-    }
-
-    ev.stopPropagation();
-    this._startSwipeTracking(ev.touches[0].clientX, ev.touches[0].clientY);
-  };
-
-  private _startSwipeTracking(clientX: number, clientY: number) {
-    document.addEventListener("touchmove", this._handleTouchMove, {
-      passive: true,
-    });
-    document.addEventListener("touchend", this._handleTouchEnd);
-    document.addEventListener("touchcancel", this._handleTouchEnd);
-
-    this._touchStartY = clientY;
-    this._touchDeltaY = 0;
-    this._gestureRecognizer.start(clientX);
+  protected createAdapter() {
+    return {
+      ...super.createAdapter(),
+      trapFocus: () => {
+        blockingElements.push(this);
+        this.appContent.inert = true;
+        document.body.style.overflow = "hidden";
+      },
+      releaseFocus: () => {
+        blockingElements.remove(this);
+        this.appContent.inert = false;
+        document.body.style.overflow = "";
+      },
+    };
   }
 
-  private _handleTouchMove = (ev: TouchEvent) => {
-    const currentX = ev.touches[0].clientX;
-    const currentY = ev.touches[0].clientY;
-    this._touchDeltaY = Math.abs(currentY - this._touchStartY);
-    this._gestureRecognizer.move(currentX);
-  };
+  protected updated(changedProps: PropertyValues<this>) {
+    super.updated(changedProps);
+    if (changedProps.has("direction")) {
+      this.mdcRoot.dir = this.direction;
+      if (this.direction === "rtl") {
+        this._rtlStyle = document.createElement("style");
+        this._rtlStyle.innerHTML = `
+          .mdc-drawer--animate {
+            transform: translateX(100%);
+          }
+          .mdc-drawer--opening {
+            transform: translateX(0);
+          }
+          .mdc-drawer--closing {
+            transform: translateX(100%);
+          }
+        `;
 
-  private _handleTouchEnd = () => {
-    this._unregisterSwipeHandlers();
-
-    const result = this._gestureRecognizer.end();
-    const isHorizontalGesture =
-      Math.abs(result.delta) >
-      this._touchDeltaY + HaDrawer._SWIPE_AXIS_TOLERANCE;
-
-    if (!isHorizontalGesture) {
-      this._resetSwipeTracking();
-      return;
-    }
-
-    const drawerDialog = this._modalDrawer?.shadowRoot?.querySelector(
-      '[part="dialog"]'
-    ) as HTMLElement | null;
-    const drawerWidth = drawerDialog?.offsetWidth || 0;
-
-    if (result.isSwipe) {
-      const closeByVelocity =
-        this.direction === "rtl"
-          ? result.isDownwardSwipe
-          : !result.isDownwardSwipe;
-
-      if (closeByVelocity) {
-        this._closeModalDrawer();
+        this.shadowRoot!.appendChild(this._rtlStyle);
+      } else if (this._rtlStyle) {
+        this.shadowRoot!.removeChild(this._rtlStyle);
       }
-      return;
     }
 
-    const closeByDistance =
-      drawerWidth > 0 &&
-      (this.direction === "rtl"
-        ? result.delta > 0 && Math.abs(result.delta) > drawerWidth * 0.5
-        : result.delta < 0 && Math.abs(result.delta) > drawerWidth * 0.5);
-
-    if (closeByDistance) {
-      this._closeModalDrawer();
+    if (changedProps.has("open") && this.open && this.type === "modal") {
+      this._setupSwipe();
+    } else if (this._mc) {
+      this._mc.destroy();
+      this._mc = undefined;
     }
-  };
-
-  private _unregisterSwipeHandlers() {
-    document.removeEventListener("touchmove", this._handleTouchMove);
-    document.removeEventListener("touchend", this._handleTouchEnd);
-    document.removeEventListener("touchcancel", this._handleTouchEnd);
   }
 
-  private _resetSwipeTracking() {
-    this._unregisterSwipeHandlers();
-    this._gestureRecognizer.reset();
-    this._touchStartY = 0;
-    this._touchDeltaY = 0;
-  }
-
-  private _syncTransitionListeners() {
-    if (this._transitionTarget === this._sidebarShell) {
-      return;
-    }
-
-    this._removeTransitionListeners();
-
-    if (!this._sidebarShell) {
-      return;
-    }
-
-    this._transitionTarget = this._sidebarShell;
-    this._transitionTarget.addEventListener(
+  protected firstUpdated() {
+    super.firstUpdated();
+    this.mdcRoot?.addEventListener(
       "transitionstart",
       this._handleDrawerTransitionStart
     );
-    this._transitionTarget.addEventListener(
+    this.mdcRoot?.addEventListener(
       "transitionend",
       this._handleDrawerTransitionEnd
     );
-    this._transitionTarget.addEventListener(
+    this.mdcRoot?.addEventListener(
       "transitioncancel",
       this._handleDrawerTransitionEnd
     );
   }
 
-  private _removeTransitionListeners() {
-    if (!this._transitionTarget) {
-      return;
-    }
-
-    this._transitionTarget.removeEventListener(
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mdcRoot?.removeEventListener(
       "transitionstart",
       this._handleDrawerTransitionStart
     );
-    this._transitionTarget.removeEventListener(
+    this.mdcRoot?.removeEventListener(
       "transitionend",
       this._handleDrawerTransitionEnd
     );
-    this._transitionTarget.removeEventListener(
+    this.mdcRoot?.removeEventListener(
       "transitioncancel",
       this._handleDrawerTransitionEnd
     );
-    this._transitionTarget = undefined;
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      height: 100%;
-    }
+  private async _setupSwipe() {
+    const hammer = await import("../resources/hammer");
+    this._mc = new hammer.Manager(document, {
+      touchAction: "pan-y",
+    });
+    this._mc.add(
+      new hammer.Swipe({
+        direction:
+          this.direction === "rtl"
+            ? hammer.DIRECTION_RIGHT
+            : hammer.DIRECTION_LEFT,
+      })
+    );
+    this._mc.on("swipeleft swiperight", () => {
+      fireEvent(this, "hass-toggle-menu", { open: false });
+    });
+  }
 
-    .layout {
-      height: 100%;
-    }
-
-    .sidebar-shell {
-      position: fixed;
-      width: var(--ha-sidebar-width);
-      height: 100%;
-      border-inline-end: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
-      box-sizing: border-box;
-      transition: width var(--ha-animation-duration-normal) ease;
-    }
-
-    .app-content {
-      overflow: unset;
-      min-width: 0;
-      padding-inline-start: var(--ha-sidebar-width);
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      transition:
-        padding-inline-start var(--ha-animation-duration-normal) ease,
-        width var(--ha-animation-duration-normal) ease;
-    }
-
-    :host([type="dismissible"]) .sidebar-shell {
-      transition: transform var(--ha-animation-duration-normal) ease;
-    }
-
-    :host([type="dismissible"]:not([open])) .sidebar-shell {
-      transform: translateX(-100%);
-    }
-
-    :host([type="dismissible"][direction="rtl"]:not([open])) .sidebar-shell {
-      transform: translateX(100%);
-    }
-
-    :host([type="dismissible"]:not([open])) .app-content {
-      padding-inline-start: 0;
-    }
-
-    wa-drawer {
-      --size: var(--ha-sidebar-width, 256px);
-      --show-duration: var(--ha-animation-duration-normal);
-      --hide-duration: var(--ha-animation-duration-normal);
-    }
-
-    wa-drawer::part(body) {
-      margin: 0;
-      padding: 0;
-    }
-  `;
+  static override styles = [
+    styles,
+    css`
+      .mdc-drawer {
+        position: fixed;
+        top: 0;
+        border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
+        inset-inline-start: 0 !important;
+        inset-inline-end: initial !important;
+        transition-property: transform, width;
+        transition-duration:
+          var(--mdc-drawer-transition-duration, 0.2s),
+          var(--ha-animation-duration-normal);
+        transition-timing-function:
+          var(
+            --mdc-drawer-transition-timing-function,
+            cubic-bezier(0.4, 0, 0.2, 1)
+          ),
+          ease;
+      }
+      .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
+        z-index: 200;
+      }
+      .mdc-drawer-app-content {
+        overflow: unset;
+        flex: none;
+        padding-left: var(--mdc-drawer-width);
+        padding-inline-start: var(--mdc-drawer-width);
+        padding-inline-end: initial;
+        direction: var(--direction);
+        width: 100%;
+        box-sizing: border-box;
+        transition:
+          padding-left var(--ha-animation-duration-normal) ease,
+          padding-inline-start var(--ha-animation-duration-normal) ease;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        /* Use 1ms instead of "none" so the transitionend event still fires.
+           The MDC drawer foundation relies on it to complete the close cycle. */
+        .mdc-drawer,
+        .mdc-drawer-app-content {
+          transition: 1ms;
+        }
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-entities-display-editor.ts

@@ -39,12 +39,7 @@ export class HaEntitiesDisplayEditor extends LitElement {
     const items: DisplayItem[] = entities.map((entity) => ({
       value: entity.entity_id,
       label: computeStateName(entity),
-      icon: entityIcon(
-        this.hass.entities,
-        this.hass.config,
-        this.hass.connection,
-        entity
-      ),
+      icon: entityIcon(this.hass, entity),
     }));
 
     const value: DisplayValue = {

src/components/ha-expansion-panel.ts

@@ -59,7 +59,6 @@ export class HaExpansionPanel extends LitElement {
               <slot class="secondary" name="secondary">${this.secondary}</slot>
             </div>
           </slot>
-          <slot name="event"></slot>
           ${!this.leftChevron ? chevronIcon : nothing}
           <slot name="icons"></slot>
         </div>

src/components/ha-fade-in.ts

@@ -3,14 +3,13 @@ import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")
 export class HaFadeIn extends WaAnimation {
+  @property() public name = "fadeIn";
+
+  @property() public fill: FillMode = "both";
+
   @property({ type: Boolean }) public play = true;
 
-  constructor() {
-    super();
-    this.iterations = 1;
-    this.fill = "both";
-    this.name = "fadeIn";
-  }
+  @property({ type: Number }) public iterations = 1;
 }
 
 declare global {

src/components/ha-filter-blueprints.ts

@@ -2,7 +2,7 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
@@ -32,8 +32,6 @@ export class HaFilterBlueprints extends LitElement {
 
   @state() private _blueprints?: Blueprints;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -98,7 +96,8 @@ export class HaFilterBlueprints extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (this.narrow || !this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }

src/components/ha-filter-categories.ts

@@ -10,7 +10,7 @@ import {
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
@@ -49,8 +49,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
 
   @state() private _shouldRender = false;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   protected hassSubscribeRequiredHostProps = ["scope"];
 
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
@@ -171,7 +169,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48)}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - (49 + 48)}px`;
       }, 300);
     }
   }

src/components/ha-filter-devices.ts

@@ -1,7 +1,7 @@
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
@@ -34,8 +34,6 @@ export class HaFilterDevices extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -137,7 +135,8 @@ export class HaFilterDevices extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49 - 4 - 32}px`;
         // 49px - height of a header + 1px
         // 4px - padding-top of the search-input
         // 32px - height of the search input

src/components/ha-filter-domains.ts

@@ -1,8 +1,7 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -32,8 +31,6 @@ export class HaFilterDomains extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   protected render() {
     return html`
       <ha-expansion-panel
@@ -65,7 +62,7 @@ export class HaFilterDomains extends LitElement {
                 multi
               >
                 ${repeat(
-                  this._domains(this.hass.states, this._filter, this.value),
+                  this._domains(this.hass.states, this._filter),
                   (i) => i,
                   (domain) =>
                     html`<ha-check-list-item
@@ -87,7 +84,7 @@ export class HaFilterDomains extends LitElement {
     `;
   }
 
-  private _domains = memoizeOne((states, filter, _value) => {
+  private _domains = memoizeOne((states, filter) => {
     const domains = new Set<string>();
     Object.keys(states).forEach((entityId) => {
       domains.add(computeDomain(entityId));
@@ -112,7 +109,8 @@ export class HaFilterDomains extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49 - 4 - 32}px`;
         // 49px - height of a header + 1px
         // 4px - padding-top of the search-input
         // 32px - height of the search input
@@ -128,19 +126,19 @@ export class HaFilterDomains extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const domains = this._domains(this.hass.states, this._filter, this.value);
-
-    const visibleDomains = new Set(domains);
-    const preserved = (this.value || []).filter((d) => !visibleDomains.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => domains[i])
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
+  private _handleItemSelected(
+    ev: CustomEvent<{ diff: { added: number[]; removed: number[] } }>
+  ) {
+    const domains = this._domains(this.hass.states, this._filter);
+    if (ev.detail.diff.added.length) {
+      this.value = [...(this.value || []), domains[ev.detail.diff.added[0]]];
+    } else if (ev.detail.diff.removed.length) {
+      const removedDomain = domains[ev.detail.diff.removed[0]];
+      this.value = this.value?.filter((value) => value !== removedDomain);
+    }
 
     fireEvent(this, "data-table-filter-changed", {
-      value: this.value.length ? this.value : undefined,
+      value: this.value,
       items: undefined,
     });
   }

src/components/ha-filter-entities.ts

@@ -1,7 +1,7 @@
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -36,8 +36,6 @@ export class HaFilterEntities extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -104,7 +102,8 @@ export class HaFilterEntities extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49 - 4 - 32}px`;
         // 49px - height of a header + 1px
         // 4px - padding-top of the search-input
         // 32px - height of the search input
@@ -123,7 +122,11 @@ export class HaFilterEntities extends LitElement {
           .selected=${this.value?.includes(entity.entity_id) ?? false}
           graphic="icon"
         >
-          <ha-state-icon slot="graphic" .stateObj=${entity}></ha-state-icon>
+          <ha-state-icon
+            slot="graphic"
+            .hass=${this.hass}
+            .stateObj=${entity}
+          ></ha-state-icon>
           ${computeStateName(entity)}
         </ha-check-list-item>`;
 

src/components/ha-filter-floor-areas.ts

@@ -1,7 +1,7 @@
 import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
@@ -13,17 +13,14 @@ import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-floor-icon";
 import "./ha-icon";
 import "./ha-icon-button";
+import "./ha-list";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
-import "./item/ha-list-item-option";
-import type { HaListItemOption } from "./item/ha-list-item-option";
-import "./list/ha-list-selectable";
-import type { HaListSelectable } from "./list/ha-list-selectable";
-import type { HaListSelectedDetail } from "./list/types";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
@@ -42,8 +39,6 @@ export class HaFilterFloorAreas extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @query("ha-list-selectable") private _list?: HTMLElement;
-
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
@@ -80,33 +75,27 @@ export class HaFilterFloorAreas extends LitElement {
         </div>
         ${this._shouldRender
           ? html`
-              <ha-list-selectable
-                class="ha-scrollbar"
-                multi
-                @ha-list-selected=${this._handleListChanged}
-                aria-label=${this.hass.localize(
-                  "ui.panel.config.areas.caption"
-                )}
-              >
+              <ha-list class="ha-scrollbar">
                 ${repeat(
                   areas?.floors || [],
                   (floor) => floor.floor_id,
                   (floor) => html`
-                    <ha-list-item-option
-                      appearance="checkbox"
-                      selection-position="end"
+                    <ha-check-list-item
                       .value=${floor.floor_id}
                       .type=${"floors"}
                       .selected=${this.value?.floors?.includes(
                         floor.floor_id
                       ) || false}
+                      graphic="icon"
+                      @request-selected=${this._handleItemClick}
+                      @keydown=${this._handleItemKeydown}
                     >
                       <ha-floor-icon
-                        slot="start"
+                        slot="graphic"
                         .floor=${floor}
                       ></ha-floor-icon>
-                      <span slot="headline">${floor.name} </span>
-                    </ha-list-item-option>
+                      ${floor.name}
+                    </ha-check-list-item>
                     ${repeat(
                       floor.areas,
                       (area, index) =>
@@ -121,7 +110,7 @@ export class HaFilterFloorAreas extends LitElement {
                   (area) => area.area_id,
                   (area) => this._renderArea(area)
                 )}
-              </ha-list-selectable>
+              </ha-list>
             `
           : nothing}
       </ha-expansion-panel>
@@ -130,86 +119,80 @@ export class HaFilterFloorAreas extends LitElement {
 
   private _renderArea(area, last = false) {
     const hasFloor = !!area.floor_id;
-
     return html`
-      <ha-list-item-option
-        appearance="checkbox"
-        selection-position="end"
+      <ha-check-list-item
         .value=${area.area_id}
         .selected=${this.value?.areas?.includes(area.area_id) || false}
         .type=${"areas"}
+        graphic="icon"
+        @request-selected=${this._handleItemClick}
+        @keydown=${this._handleItemKeydown}
         class=${classMap({
-          rtl: computeRTL(
-            this.hass.language,
-            this.hass.translationMetadata.translations
-          ),
+          rtl: computeRTL(this.hass),
           floor: hasFloor,
         })}
       >
         ${hasFloor
-          ? html`<ha-tree-indicator
-              slot="start"
-              .end=${last}
-            ></ha-tree-indicator>`
+          ? html`
+              <ha-tree-indicator
+                .end=${last}
+                slot="graphic"
+              ></ha-tree-indicator>
+            `
           : nothing}
         ${area.icon
-          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+          ? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
           : html`<ha-svg-icon
-              slot="start"
+              slot="graphic"
               .path=${mdiTextureBox}
             ></ha-svg-icon>`}
-        <span slot="headline">${area.name}</span>
-      </ha-list-item-option>
+        ${area.name}
+      </ha-check-list-item>
     `;
   }
 
-  private _handleListChanged(ev: CustomEvent<HaListSelectedDetail>) {
-    if (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size) {
+  private _handleItemKeydown(ev) {
+    if (ev.key === " " || ev.key === "Enter") {
+      ev.preventDefault();
+      this._handleItemClick(ev);
+    }
+  }
+
+  private _handleItemClick(ev) {
+    ev.stopPropagation();
+
+    const listItem = ev.currentTarget;
+    const type = listItem?.type;
+    const value = listItem?.value;
+
+    if (ev.detail.selected === listItem.selected || !value) {
       return;
     }
 
-    if (ev.detail.diff?.added.size) {
-      const addedIndex = ev.detail.diff.added.values().next().value;
-      if (addedIndex === undefined) {
-        return;
-      }
-      const addedItem = (ev.currentTarget as HaListSelectable).items[
-        addedIndex
-      ] as HaListItemOption & { type: string; value: string };
-
+    if (this.value?.[type]?.includes(value)) {
+      this.value = {
+        ...this.value,
+        [type]: this.value[type].filter((val) => val !== value),
+      };
+    } else {
       if (!this.value) {
         this.value = {};
       }
       this.value = {
         ...this.value,
-        [addedItem.type]: [
-          ...(this.value[addedItem.type] || []),
-          addedItem.value,
-        ],
-      };
-    } else {
-      const removedIndex = ev.detail.diff?.removed.values().next().value;
-      if (removedIndex === undefined) {
-        return;
-      }
-      const removedItem = (ev.currentTarget as HaListSelectable).items[
-        removedIndex
-      ] as HaListItemOption & { type: string; value: string };
-
-      this.value = {
-        ...this.value,
-        [removedItem.type]: this.value![removedItem.type].filter(
-          (val) => val !== removedItem.value
-        ),
+        [type]: [...(this.value[type] || []), value],
       };
     }
+
+    listItem.selected = this.value[type]?.includes(value);
   }
 
   protected updated(changed: PropertyValues<this>) {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }
@@ -334,7 +317,11 @@ export class HaFilterFloorAreas extends LitElement {
           padding: 0px 2px;
           color: var(--text-primary-color);
         }
-        .floor::part(base) {
+        ha-check-list-item {
+          --mdc-list-item-graphic-margin: 16px;
+        }
+        .floor {
+          padding-left: 48px;
           padding-inline-start: 48px;
           padding-inline-end: 16px;
         }

src/components/ha-filter-integrations.ts

@@ -1,8 +1,7 @@
-import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -35,8 +34,6 @@ export class HaFilterIntegrations extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   protected render() {
     return html`
       <ha-expansion-panel
@@ -101,7 +98,8 @@ export class HaFilterIntegrations extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49 - 4 - 32}px`;
         // 49px - height of a header + 1px
         // 4px - padding-top of the search-input
         // 32px - height of the search input
@@ -149,7 +147,9 @@ export class HaFilterIntegrations extends LitElement {
         )
   );
 
-  private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+  private _itemSelected(
+    ev: CustomEvent<{ diff: { added: number[]; removed: number[] } }>
+  ) {
     const integrations = this._integrations(
       this.hass.localize,
       this._manifests!,
@@ -157,16 +157,18 @@ export class HaFilterIntegrations extends LitElement {
       this.value
     );
 
-    const visibleDomains = new Set(integrations.map((i) => i.domain));
-    const preserved = (this.value || []).filter((d) => !visibleDomains.has(d));
-    const selected = [...ev.detail.index]
-      .map((i) => integrations[i]?.domain)
-      .filter((d): d is string => !!d);
-
-    this.value = [...preserved, ...selected];
+    if (ev.detail.diff.added.length) {
+      this.value = [
+        ...(this.value || []),
+        integrations[ev.detail.diff.added[0]].domain,
+      ];
+    } else if (ev.detail.diff.removed.length) {
+      const removedDomain = integrations[ev.detail.diff.removed[0]].domain;
+      this.value = this.value?.filter((val) => val !== removedDomain);
+    }
 
     fireEvent(this, "data-table-filter-changed", {
-      value: this.value.length ? this.value : undefined,
+      value: this.value,
       items: undefined,
     });
   }

src/components/ha-filter-labels.ts

@@ -3,7 +3,7 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -41,8 +41,6 @@ export class HaFilterLabels extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
     (labels: LabelRegistryEntry[], filter: string | undefined, _value) =>
@@ -139,7 +137,8 @@ export class HaFilterLabels extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
         // 49px - height of a header + 1px
         // 4px - padding-top of the search-input
         // 32px - height of the search input

src/components/ha-filter-voice-assistants.ts

@@ -2,7 +2,7 @@ import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
@@ -33,8 +33,6 @@ export class HaFilterVoiceAssistants extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @query("ha-list") private _list?: HTMLElement;
-
   protected render() {
     return html`
       <ha-expansion-panel
@@ -95,7 +93,8 @@ export class HaFilterVoiceAssistants extends LitElement {
     if (changed.has("expanded") && this.expanded) {
       setTimeout(() => {
         if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49}px`;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49}px`;
       }, 300);
     }
   }

src/components/ha-floor-picker.ts

@@ -1,9 +1,9 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import type { TemplateResult, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -104,20 +104,6 @@ export class HaFloorPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  @state() private _pendingFloorId?: string;
-
-  protected willUpdate(changedProperties: PropertyValues<this>) {
-    if (
-      this._pendingFloorId &&
-      changedProperties.has("hass") &&
-      this.hass.floors !== changedProperties.get("hass")?.floors &&
-      this.hass.floors[this._pendingFloorId]
-    ) {
-      this._setValue(this._pendingFloorId);
-      this._pendingFloorId = undefined;
-    }
-  }
-
   public async open() {
     await this.updateComplete;
     await this._picker?.open();
@@ -450,11 +436,7 @@ export class HaFloorPicker extends LitElement {
                 floor_id: floor.floor_id,
               });
             });
-            if (this.hass.floors[floor.floor_id]) {
-              this._setValue(floor.floor_id);
-            } else {
-              this._pendingFloorId = floor.floor_id;
-            }
+            this._setValue(floor.floor_id);
           } catch (err: any) {
             showAlertDialog(this, {
               title: this.hass.localize(

src/components/ha-form/ha-form-optional_actions.ts

@@ -1,7 +1,7 @@
 import { mdiPlus } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { LocalizeFunc } from "../../common/translations/localize";
@@ -49,15 +49,14 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
 
   @state() private _displayActions?: string[];
 
-  @query("ha-form") private _form?: HaForm;
-
   public async focus() {
     await this.updateComplete;
-    this._form?.focus();
+    this.renderRoot.querySelector("ha-form")?.focus();
   }
 
   public reportValidity(): boolean {
-    return this._form ? this._form.reportValidity() : true;
+    const form = this.renderRoot.querySelector<HaForm>("ha-form");
+    return form ? form.reportValidity() : true;
   }
 
   protected updated(changedProps: PropertyValues<this>): void {

src/components/ha-form/ha-form.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
@@ -72,8 +72,6 @@ export class HaForm extends LitElement implements HaFormElement {
     key: string
   ) => string;
 
-  @property({ attribute: false }) public context?: Record<string, any>;
-
   protected getFormProperties(): Record<string, any> {
     return {};
   }
@@ -83,10 +81,8 @@ export class HaForm extends LitElement implements HaFormElement {
     delegatesFocus: true,
   };
 
-  @query(".root") private _root?: HTMLElement;
-
   public reportValidity(): boolean {
-    const root = this._root;
+    const root = this.renderRoot.querySelector(".root");
     if (!root) {
       return true;
     }
@@ -222,15 +218,13 @@ export class HaForm extends LitElement implements HaFormElement {
   private _generateContext(
     schema: HaFormSchema
   ): Record<string, any> | undefined {
-    if (!schema.context && !this.context) {
+    if (!schema.context) {
       return undefined;
     }
 
-    const context = { ...this.context };
-    if (schema.context) {
-      for (const [context_key, data_key] of Object.entries(schema.context)) {
-        context[context_key] = this.data[data_key];
-      }
+    const context = {};
+    for (const [context_key, data_key] of Object.entries(schema.context)) {
+      context[context_key] = this.data[data_key];
     }
     return context;
   }

src/components/ha-formfield.ts

@@ -37,6 +37,10 @@ export class HaFormfield extends FormfieldBase {
         input.checked = !input.checked;
         fireEvent(input, "change");
         break;
+      case "HA-RADIO":
+        input.checked = true;
+        fireEvent(input, "change");
+        break;
       default:
         input.click();
         break;

src/components/ha-generic-picker.ts

@@ -1,6 +1,5 @@
 import "@home-assistant/webawesome/dist/components/popover/popover";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { consume, type ContextType } from "@lit/context";
 import { mdiPlaylistPlus } from "@mdi/js";
 import {
   css,
@@ -14,10 +13,8 @@ import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
-import { configContext } from "../data/context";
 import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
-import { isIosApp } from "../util/is_ios";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
@@ -113,9 +110,10 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _hassConfig?: ContextType<typeof configContext>;
+  // disabled till iOS app fix the "focus_element" implementation
+  // @state()
+  // @consume({ context: authContext, subscribe: true })
+  // private auth?: ContextType<typeof authContext>;
 
   @state() private _opened = false;
 
@@ -321,18 +319,16 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
         this._comboBox?.setFieldValue(this._initialFieldValue);
         this._initialFieldValue = undefined;
       }
-      if (
-        this._hassConfig?.auth.external &&
-        isIosApp(this._hassConfig.auth.external)
-      ) {
-        this._hassConfig.auth.external.fireMessage({
-          type: "focus_element",
-          payload: {
-            element_id: "combo-box",
-          },
-        });
-        return;
-      }
+      // disabled till iOS app fix the "focus_element" implementation
+      // if (this.auth?.external && isIosApp(this.auth.external)) {
+      //   this.auth.external.fireMessage({
+      //     type: "focus_element",
+      //     payload: {
+      //       element_id: "combo-box",
+      //     },
+      //   });
+      //   return;
+      // }
 
       this._comboBox?.focus();
     });
@@ -473,8 +469,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
           --ha-bottom-sheet-padding: 0;
           --ha-bottom-sheet-surface-background: var(--card-background-color);
           --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
-          --ha-bottom-sheet-content-padding: 0 var(--safe-area-inset-right)
-            var(--safe-area-inset-bottom) var(--safe-area-inset-left);
         }
 
         ha-picker-field.opened {