Fix merge mistake

Small fix
Merge branch 'dev' into lit-tooltip-formatters
2026-05-28 03:57:20 +00:00 · 2026-05-27 16:35:09 +03:00 · 2026-05-27 16:23:52 +03:00 · 2026-05-27 16:17:27 +03:00 · 2026-05-27 16:15:23 +03:00 · 2026-05-27 16:12:01 +03:00
574 changed files with 21283 additions and 8695 deletions
@@ -41,14 +41,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@e46ed2cbd01164d986452f91f178727624ae40d7 # v4.35.3
+        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
        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@e46ed2cbd01164d986452f91f178727624ae40d7 # v4.35.3
+        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5

      # ℹ️ 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@e46ed2cbd01164d986452f91f178727624ae40d7 # v4.35.3
+        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
        with:
          sync-labels: true
@@ -18,7 +18,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
        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@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
        with:
          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
          token: ${{ github.token }}
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@563bf132657a13ded0b01fcb723c5a58cdd824e2 # v7.2.1
+      - uses: release-drafter/release-drafter@c2e2804cc59f45f57076a99af580d0fedb697927 # v7.3.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1 +1 @@
-24.15.0
+24.16.0
@@ -13,4 +13,4 @@ nodeLinker: node-modules

 npmMinimalAgeGate: 3d

-yarnPath: .yarn/releases/yarn-4.14.1.cjs
+yarnPath: .yarn/releases/yarn-4.15.0.cjs
@@ -1,5 +1,3 @@
-import "@material/mwc-drawer";
-import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";
@@ -1,5 +1,3 @@
-import "@material/mwc-drawer";
-import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
@@ -7,9 +5,12 @@ 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";
+import "../../src/components/ha-top-app-bar-fixed";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
@@ -39,8 +40,8 @@ class HaGallery extends LitElement {
  @query("notification-manager")
  private _notifications!: HTMLElementTagNameMap["notification-manager"];

-  @query("mwc-drawer")
-  private _drawer!: HTMLElementTagNameMap["mwc-drawer"];
+  @query("ha-drawer")
+  private _drawer!: HaDrawer;

  private _narrow = window.matchMedia("(max-width: 600px)").matches;

@@ -75,16 +76,15 @@ class HaGallery extends LitElement {
    }

    return html`
-      <mwc-drawer
-        hasHeader
+      <ha-drawer
+        .direction=${this._rtl ? "rtl" : "ltr"}
        .open=${!this._narrow}
        .type=${this._narrow ? "modal" : "dismissible"}
      >
-        <span slot="title">Home Assistant Design</span>
-        <!-- <span slot="subtitle">subtitle</span> -->
+        <div class="drawer-title">Home Assistant Design</div>
        <div class="sidebar">${sidebar}</div>
-        <div slot="appContent">
-          <mwc-top-app-bar-fixed>
+        <div slot="appContent" class="app-content">
+          <ha-top-app-bar-fixed>
            <ha-icon-button
              slot="navigationIcon"
              @click=${this._menuTapped}
@@ -94,7 +94,7 @@ class HaGallery extends LitElement {
            <div slot="title">
              ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
            </div>
-          </mwc-top-app-bar-fixed>
+          </ha-top-app-bar-fixed>
          <div class="content">
            ${PAGES[this._page].description
              ? html`
@@ -144,7 +144,7 @@ class HaGallery extends LitElement {
            </div>
          </div>
        </div>
-      </mwc-drawer>
+      </ha-drawer>
      <notification-manager
        .hass=${FAKE_HASS}
        id="notifications"
@@ -226,12 +226,28 @@ class HaGallery extends LitElement {
        -ms-user-select: initial;
        -webkit-user-select: initial;
        -moz-user-select: initial;
+        --ha-sidebar-width: 256px;
+        --header-height: 64px;
      }

      .sidebar {
+        box-sizing: border-box;
+        max-height: calc(100vh - var(--header-height));
+        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: var(--header-height);
+        padding: 0 16px;
+      }
+
      .sidebar a {
        color: var(--primary-text-color);
        display: block;
@@ -255,13 +271,17 @@ class HaGallery extends LitElement {
        opacity: 0.12;
      }

-      div[slot="appContent"] {
+      .app-content {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: var(--primary-background-color);
      }

+      ha-drawer[type="dismissible"][open] ha-top-app-bar-fixed {
+        --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
+      }
+
      .content {
        flex: 1;
      }
@@ -1,10 +1,12 @@
-import type { TemplateResult, PropertyValues } from "lit";
-import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
+import { provide } from "@lit/context";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-tip";
+import { internationalizationContext } from "../../../../src/data/context";
+import type { HomeAssistantInternationalization } from "../../../../src/types";

 const tips: (string | TemplateResult)[] = [
  "Test tip",
@@ -14,16 +16,25 @@ const tips: (string | TemplateResult)[] = [

@customElement("demo-components-ha-tip")
 export class DemoHaTip extends LitElement {
+  @provide({ context: internationalizationContext })
+  @state()
+  protected _i18n: HomeAssistantInternationalization = {
+    localize: ((key: string) => key) as any,
+    language: "en",
+    selectedLanguage: null,
+    locale: {} as any,
+    translationMetadata: {} as any,
+    loadBackendTranslation: (async () => (key: string) => key) as any,
+    loadFragmentTranslation: (async () => (key: string) => key) as any,
+  };
+
  protected render(): TemplateResult {
    return html` ${["light", "dark"].map(
      (mode) => html`
        <div class=${mode}>
          <ha-card header="ha-tip ${mode} demo">
            <div class="card-content">
-              ${tips.map(
-                (tip) =>
-                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
-              )}
+              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
            </div>
          </ha-card>
        </div>
@@ -1,3 +1,2 @@
 [build.environment]
-  YARN_VERSION = "1.22.11"
  NODE_OPTIONS = "--max_old_space_size=6144"
@@ -37,47 +37,42 @@
    "@codemirror/lint": "6.9.6",
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.42.1",
-    "@date-fns/tz": "1.4.1",
+    "@codemirror/view": "6.43.0",
+    "@date-fns/tz": "1.5.0",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.2",
-    "@formatjs/intl-displaynames": "7.3.5",
-    "@formatjs/intl-durationformat": "0.10.8",
-    "@formatjs/intl-getcanonicallocales": "3.2.6",
-    "@formatjs/intl-listformat": "8.3.5",
-    "@formatjs/intl-locale": "5.3.5",
-    "@formatjs/intl-numberformat": "9.3.5",
-    "@formatjs/intl-pluralrules": "6.3.5",
-    "@formatjs/intl-relativetimeformat": "12.3.5",
+    "@formatjs/intl-datetimeformat": "7.4.6",
+    "@formatjs/intl-displaynames": "7.3.8",
+    "@formatjs/intl-durationformat": "0.10.12",
+    "@formatjs/intl-getcanonicallocales": "3.2.9",
+    "@formatjs/intl-listformat": "8.3.8",
+    "@formatjs/intl-locale": "5.3.8",
+    "@formatjs/intl-numberformat": "9.3.9",
+    "@formatjs/intl-pluralrules": "6.3.8",
+    "@formatjs/intl-relativetimeformat": "12.3.8",
    "@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.7.0-ha.0",
    "@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-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",
    "@material/web": "2.4.1",
    "@mdi/js": "7.4.47",
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@swc/helpers": "0.5.21",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "3.9.1",
-    "@tsparticles/preset-links": "3.2.0",
+    "@tsparticles/engine": "4.0.5",
+    "@tsparticles/preset-links": "4.0.5",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -88,27 +83,27 @@
    "core-js": "3.49.0",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
-    "date-fns": "4.1.0",
+    "date-fns": "4.3.0",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
-    "echarts": "6.0.0",
+    "echarts": "6.1.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.3.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "7.0.0",
    "hls.js": "1.6.16",
    "home-assistant-js-websocket": "9.6.0",
-    "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.4",
+    "idb-keyval": "6.2.4",
+    "intl-messageformat": "11.2.7",
    "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.2",
-    "lit-html": "3.3.2",
+    "lit": "3.3.3",
+    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.3",
+    "marked": "18.0.4",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -120,7 +115,7 @@
    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
-    "tinykeys": "3.0.0",
+    "tinykeys": "4.0.0",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.1",
    "workbox-core": "7.4.1",
@@ -137,13 +132,13 @@
    "@babel/preset-env": "7.29.5",
    "@bundle-stats/plugin-webpack-filter": "4.22.1",
    "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.60.0",
+    "@html-eslint/eslint-plugin": "0.61.0",
    "@lokalise/node-api": "16.0.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.10",
-    "@rspack/core": "2.0.2",
+    "@rsdoctor/rspack-plugin": "1.5.11",
+    "@rspack/core": "2.0.4",
    "@rspack/dev-server": "2.0.1",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.26",
@@ -162,22 +157,22 @@
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.5",
+    "@vitest/coverage-v8": "4.1.7",
    "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.3.0",
+    "eslint": "10.4.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.16.2",
-    "eslint-plugin-lit": "2.2.1",
+    "eslint-plugin-lit": "2.3.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",
+    "generate-license-file": "4.2.1",
    "glob": "13.0.6",
    "globals": "17.6.0",
    "gulp": "5.0.1",
@@ -189,7 +184,7 @@
    "jsdom": "29.1.1",
    "jszip": "3.10.1",
    "license-checker-rseidelsohn": "4.4.2",
-    "lint-staged": "17.0.4",
+    "lint-staged": "17.0.5",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.18.1",
@@ -203,16 +198,16 @@
    "terser-webpack-plugin": "5.6.0",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.59.2",
+    "typescript-eslint": "8.59.4",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.5",
+    "vitest": "4.1.7",
    "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"
  },
  "resolutions": {
-    "lit": "3.3.2",
-    "lit-html": "3.3.2",
+    "lit": "3.3.3",
+    "lit-html": "3.3.3",
    "clean-css": "5.3.3",
    "@lit/reactive-element": "2.1.2",
    "@fullcalendar/daygrid": "6.1.20",
@@ -221,8 +216,8 @@
    "@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"
  },
-  "packageManager": "yarn@4.14.1",
+  "packageManager": "yarn@4.15.0",
  "volta": {
-    "node": "24.15.0"
+    "node": "24.16.0"
  }
 }
@@ -18,7 +18,46 @@
    "enabled": true,
    "schedule": ["on the 19th day of the month before 4am"]
  },
+  "customDatasources": {
+    "ha-core-python": {
+      "defaultRegistryUrlTemplate": "https://raw.githubusercontent.com/home-assistant/core/dev/.python-version",
+      "format": "plain"
+    }
+  },
+  "customManagers": [
+    {
+      "description": "Keep PYTHON_VERSION in sync with home-assistant/core (patch + minor)",
+      "customType": "regex",
+      "managerFilePatterns": ["/^\\.github/workflows/[^/]+\\.ya?ml$/"],
+      "matchStrings": ["PYTHON_VERSION: \"(?<currentValue>[^\"]+)\""],
+      "depNameTemplate": "python",
+      "datasourceTemplate": "custom.ha-core-python",
+      "versioningTemplate": "python"
+    },
+    {
+      "description": "Keep devcontainer image and requires-python in sync with home-assistant/core (minor only)",
+      "customType": "regex",
+      "managerFilePatterns": [
+        "/^\\.devcontainer/Dockerfile$/",
+        "/^pyproject\\.toml$/"
+      ],
+      "matchStrings": [
+        "devcontainers/python:(?<currentValue>[\\d.]+)",
+        "requires-python = \">=(?<currentValue>[^\"]+)\""
+      ],
+      "depNameTemplate": "python",
+      "datasourceTemplate": "custom.ha-core-python",
+      "versioningTemplate": "python",
+      "extractVersionTemplate": "^(?<version>\\d+\\.\\d+)"
+    }
+  ],
  "packageRules": [
+    {
+      "description": "Group all Python version updates from home-assistant/core",
+      "matchDepNames": ["python"],
+      "matchDatasources": ["custom.ha-core-python"],
+      "groupName": "Python version"
+    },
    {
      "description": "MDC packages are pinned to the same version as MWC",
      "extends": ["monorepo:material-components-web"],
@@ -54,6 +54,8 @@ export class HaAuthFlow extends LitElement {

  @query("ha-auth-form") private _form?: HaAuthForm;

+  @query("ha-form") private _haForm?: HTMLElement;
+
  createRenderRoot() {
    return this;
  }
@@ -160,9 +162,8 @@ export class HaAuthFlow extends LitElement {

    // 100ms to give all the form elements time to initialize.
    setTimeout(() => {
-      const form = this.renderRoot.querySelector("ha-form");
-      if (form) {
-        (form as any).focus();
+      if (this._haForm) {
+        (this._haForm as any).focus();
      }
    }, 100);
  }
@@ -3,7 +3,7 @@
 * @param arr - The array to get combinations of
 * @returns A multidimensional array of all possible combinations
 */
-export function getAllCombinations<T>(arr: T[]) {
+export function getAllCombinations<T>(arr: readonly T[]): T[][] {
  return arr.reduce<T[][]>(
    (combinations, element) =>
      combinations.concat(
@@ -5,7 +5,6 @@ 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 = (
@@ -27,8 +26,3 @@ 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);
@@ -114,6 +114,15 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";

+/** Length units. */
+export const UNIT_IN = "in";
+export const UNIT_KM = "km";
+export const UNIT_MM = "mm";
+
+/** Pressure units. */
+export const UNIT_HPA = "hPa";
+export const UNIT_INHG = "inHg";
+
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";

@@ -0,0 +1,59 @@
+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 = [];
+  }
+}
@@ -1,6 +1,20 @@
+import timezones from "google-timezones-json";
 import { TimeZone } from "../../data/translation";

-const RESOLVED_TIME_ZONE = Intl.DateTimeFormat?.().resolvedOptions?.().timeZone;
+const RESOLVED_RAW = Intl.DateTimeFormat?.().resolvedOptions?.().timeZone;
+
+// Some environments (e.g. Android emulator) return a UTC offset like "+00:00"
+// instead of an IANA zone name. Only accept values that are known IANA zones,
+// matching the list used by ha-timezone-picker.
+const RESOLVED_TIME_ZONE =
+  RESOLVED_RAW &&
+  (RESOLVED_RAW === "UTC" ||
+    RESOLVED_RAW === "Etc/UTC" ||
+    RESOLVED_RAW in timezones)
+    ? RESOLVED_RAW
+    : undefined;
+
+export const HAS_RESOLVED_IANA_TIME_ZONE = RESOLVED_TIME_ZONE !== undefined;

 // Browser time zone can be determined from Intl, with fallback to UTC for polyfill or no support.
 export const LOCAL_TIME_ZONE = RESOLVED_TIME_ZONE ?? "UTC";
@@ -1,8 +1,16 @@
 import { consume } from "@lit/context";
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../../types";
-import { entitiesContext, statesContext } from "../../data/context";
+import type {
+  HomeAssistant,
+  HomeAssistantInternationalization,
+} from "../../types";
+import {
+  entitiesContext,
+  internationalizationContext,
+  statesContext,
+} from "../../data/context";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
+import type { LocalizeFunc } from "../translations/localize";
 import { transform } from "./transform";

 interface ConsumeEntryConfig {
@@ -91,3 +99,15 @@ export const consumeEntityRegistryEntry = (config: ConsumeEntryConfig) =>
      return typeof id === "string" ? entities?.[id] : undefined;
    }
  );
+
+/**
+ * Consumes `internationalizationContext` and narrows it to the `localize`
+ * function. No host watching is needed — the decorated property updates
+ * whenever the i18n context changes.
+ */
+export const consumeLocalize = () =>
+  composeDecorator<HomeAssistantInternationalization, LocalizeFunc>(
+    internationalizationContext,
+    undefined,
+    ({ localize }) => localize
+  );
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState } from "../../data/entity/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";

 interface EntityUnitStubConfig {
@@ -21,32 +21,24 @@ export const computeEntityUnitDisplay = (
  stateObj: HassEntity | undefined,
  config: EntityUnitStubConfig
 ): string => {
-  let unit;
  if (
-    stateObj &&
-    !isUnavailableState(stateObj.state) &&
-    (config.attribute || stateObj.attributes.device_class !== "duration")
+    !stateObj ||
+    stateObj.state === UNAVAILABLE ||
+    stateObj.state === UNKNOWN ||
+    (!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 "";
  }

-  return "";
+  // check for an explicitly defined unit in config
+  if (config.unit) {
+    return config.unit;
+  }
+
+  // otherwise derive from the entity's state or attribute
+  const parts = config.attribute
+    ? hass.formatEntityAttributeValueToParts(stateObj, config.attribute)
+    : hass.formatEntityStateToParts(stateObj);
+
+  return parts.find((part) => part.type === "unit")?.value ?? "";
 };
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE_STATES } from "../../data/entity/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { stringCompare } from "../string/compare";
 import { computeDomain } from "./compute_domain";
@@ -253,7 +253,7 @@ export const getStatesDomain = (

  if (!attribute) {
    // All entities can have unavailable states
-    result.push(...UNAVAILABLE_STATES);
+    result.push(UNAVAILABLE, UNKNOWN);
  }

  if (!attribute && domain in FIXED_DOMAIN_STATES) {
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { computeStateDomain } from "./compute_state_domain";

@@ -8,14 +8,20 @@ export const computeGroupEntitiesState = (states: HassEntity[]): string => {
    return UNAVAILABLE;
  }

-  const validState = states.some(
-    (stateObj) => !isUnavailableState(stateObj.state)
+  const allUnavailable = states.every(
+    (stateObj) => stateObj.state === UNAVAILABLE
  );
-
-  if (!validState) {
+  if (allUnavailable) {
    return UNAVAILABLE;
  }

+  const hasValidState = states.some(
+    (stateObj) => stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
+  );
+  if (!hasValidState) {
+    return UNKNOWN;
+  }
+
  // Use the first state to determine the domain
  // This assumes all states in the group have the same domain
  const domain = computeStateDomain(states[0]);
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState, OFF, UNAVAILABLE } from "../../data/entity/entity";
+import { OFF, UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";

 export function stateActive(stateObj: HassEntity, state?: string): boolean {
@@ -19,7 +19,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
    return compareState !== UNAVAILABLE;
  }

-  if (isUnavailableState(compareState)) {
+  if (compareState === UNAVAILABLE || compareState === UNKNOWN) {
    return false;
  }

@@ -0,0 +1,17 @@
+/**
+ * @summary Truncates a string to `maxLength`, appending `ellipsis` only when it actually shortens the result.
+ * @param text The input string.
+ * @param maxLength Maximum length of the prefix kept before the ellipsis.
+ * @param ellipsis Suffix appended when truncation occurs.
+ * @returns `text` unchanged when its length is `<= maxLength + ellipsis.length`, otherwise `text.substring(0, maxLength) + ellipsis`.
+ */
+export const truncateWithEllipsis = (
+  text: string,
+  maxLength: number,
+  ellipsis = "..."
+): string => {
+  if (text.length <= maxLength + ellipsis.length) {
+    return text;
+  }
+  return `${text.substring(0, maxLength)}${ellipsis}`;
+};
@@ -0,0 +1,75 @@
+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.
+ *
+ * @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="fail"]) #indicator {
+      border-color: var(--ha-color-fill-warning-loud-resting);
+    }
+    :host([state="invalid"]) #indicator {
+      border-color: var(--ha-color-fill-danger-loud-resting);
+    }
+    :host([state="unknown"]) #indicator {
+      border-color: var(--ha-color-fill-neutral-loud-resting);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-row-live-test": HaAutomationRowLiveTest;
+  }
+}
@@ -128,7 +128,9 @@ export class HaAutomationRow extends LitElement {
    }
    .row {
      display: flex;
-      padding: 0 0 0 var(--ha-space-3);
+      padding-left: var(--ha-space-3);
+      padding-inline-start: var(--ha-space-3);
+      padding-inline-end: initial;
      min-height: 48px;
      align-items: flex-start;
      cursor: pointer;
@@ -144,6 +146,8 @@ export class HaAutomationRow extends LitElement {
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--ha-color-on-neutral-quiet);
      margin-left: calc(var(--ha-space-2) * -1);
+      margin-inline-start: calc(var(--ha-space-2) * -1);
+      margin-inline-end: initial;
    }
    :host([building-block]) .leading-icon-wrapper {
      background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -187,7 +191,6 @@ export class HaAutomationRow extends LitElement {
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
-      margin: 0 var(--ha-space-3);
    }
    ::slotted([slot="header"]) {
      overflow-wrap: anywhere;
@@ -116,7 +116,7 @@ export class HaProgressButton extends LitElement {
      visibility: hidden;
    }

-    ha-svg-icon {
+    :host([appearance="brand"]) ha-svg-icon {
      color: var(--white-color);
    }
  `;
@@ -0,0 +1,40 @@
+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];
+};
@@ -14,12 +14,13 @@ import type {
  ECElementEvent,
  LegendComponentOption,
  LineSeriesOption,
+  TooltipOption,
  XAXisOption,
  YAXisOption,
 } from "echarts/types/dist/shared";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, html, LitElement, nothing, render } from "lit";
+import { customElement, property, query, 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";
@@ -29,10 +30,16 @@ import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { afterNextRender } from "../../common/util/render-status";
-import { filterXSS } from "../../common/util/xss";
 import { uiContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type {
+  ECOption,
+  HaECOption,
+  HaECSeries,
+  HaECSeriesItem,
+  HaTooltipOption,
+  LitTooltipFormatter,
+} from "../../resources/echarts/echarts";
 import type { HomeAssistant, HomeAssistantUI } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
@@ -45,6 +52,79 @@ const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;

+type RawSeriesOption = Exclude<
+  NonNullable<ECOption["series"]>,
+  readonly unknown[]
+>;
+
+// What the wrapper returns to echarts: an HTMLElement when there is content to
+// show, or null to suppress. echarts' TooltipFormatterCallback accepts these at
+// runtime; the upstream type is narrower but doesn't model the null-hide path.
+type WrappedTooltipFormatter = (
+  params: any,
+  ticket?: string
+) => HTMLElement | null;
+
+// Maps original-fn → wrapped-fn AND wrapped-fn → wrapped-fn, so re-wrapping
+// an already-wrapped formatter is a no-op without needing a separate WeakSet.
+const litTooltipFormatterCache = new WeakMap<
+  LitTooltipFormatter | WrappedTooltipFormatter,
+  WrappedTooltipFormatter
+>();
+
+const wrapLitTooltipFormatter = (
+  fn: LitTooltipFormatter
+): WrappedTooltipFormatter => {
+  const cached = litTooltipFormatterCache.get(fn);
+  if (cached) return cached;
+  const container = document.createElement("div");
+  // display:contents keeps the wrapper layout-invisible so its children act as
+  // direct children of echarts' tooltip box, matching the prior innerHTML behavior.
+  container.style.display = "contents";
+  const wrapped: WrappedTooltipFormatter = (params, ticket) => {
+    const result = fn(params, ticket);
+    // `nothing` and null/undefined must all suppress the tooltip. Returning
+    // `nothing` to echarts via `render(nothing, container)` leaves a Lit
+    // comment marker behind so echarts would show an empty box; convert it to
+    // null instead so `setContent(null)` clears innerHTML and `show()` hides.
+    if (result === null || result === undefined || result === nothing) {
+      return null;
+    }
+    render(result, container);
+    return container;
+  };
+  litTooltipFormatterCache.set(fn, wrapped);
+  // Idempotent re-wrap: looking up the wrapped fn returns itself.
+  litTooltipFormatterCache.set(wrapped, wrapped);
+  return wrapped;
+};
+
+const toEChartsFormatter = (
+  fn: WrappedTooltipFormatter
+): NonNullable<TooltipOption["formatter"]> =>
+  fn as NonNullable<TooltipOption["formatter"]>;
+
+const convertHaTooltipFormatter = (tooltip: HaTooltipOption): TooltipOption => {
+  const { formatter, ...rest } = tooltip;
+  const next: TooltipOption = { ...rest };
+  if (typeof formatter === "function") {
+    next.formatter = toEChartsFormatter(wrapLitTooltipFormatter(formatter));
+  } else if (formatter !== undefined) {
+    next.formatter = formatter;
+  }
+  return next;
+};
+
+const processSeriesTooltipFormatter = (s: HaECSeriesItem): RawSeriesOption => {
+  if (s.tooltip && typeof s.tooltip.formatter === "function") {
+    return {
+      ...s,
+      tooltip: convertHaTooltipFormatter(s.tooltip),
+    } as RawSeriesOption;
+  }
+  return s as RawSeriesOption;
+};
+
 export type CustomLegendOption = ECOption["legend"] & {
  type: "custom";
  data?: {
@@ -66,9 +146,9 @@ export class HaChartBase extends LitElement {

  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public data: ECOption["series"] = [];
+  @property({ attribute: false }) public data: HaECSeries = [];

-  @property({ attribute: false }) public options?: ECOption;
+  @property({ attribute: false }) public options?: HaECOption;

  @property({ type: String }) public height?: string;

@@ -102,6 +182,8 @@ export class HaChartBase extends LitElement {

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

+  @query(".chart") private _chartContainer?: HTMLDivElement;
+
  private _modifierPressed = false;

  private _isTouchDevice = "ontouchstart" in window;
@@ -469,7 +551,6 @@ 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) {
@@ -484,7 +565,7 @@ export class HaChartBase extends LitElement {
      const style = getComputedStyle(this);
      echarts.registerTheme("custom", this._createTheme(style));

-      this.chart = echarts.init(container, "custom");
+      this.chart = echarts.init(this._chartContainer!, "custom");
      this.chart.on("datazoom", (e: any) => {
        this._handleDataZoomEvent(e);
      });
@@ -613,7 +694,7 @@ export class HaChartBase extends LitElement {

  // Return an array of all IDs associated with the legend item of the primaryId
  private _getAllIdsFromLegend(
-    options: ECOption | undefined,
+    options: HaECOption | undefined,
    primaryId: string
  ): string[] {
    if (!options) return [primaryId];
@@ -633,7 +714,7 @@ export class HaChartBase extends LitElement {

  // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
  // No known need to remove items at this time.
-  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
+  private _updateHiddenStatsFromOptions(options: HaECOption | undefined) {
    if (!options) return;
    const legend = ensureArray(this.options?.legend || [])[0] as
      | LegendComponentOption
@@ -756,22 +837,34 @@ export class HaChartBase extends LitElement {
      xAxis,
    };

-    const isMobile = window.matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
-    if (isMobile && options.tooltip) {
-      // mobile charts are full width so we need to confine the tooltip to the chart
-      const tooltips = Array.isArray(options.tooltip)
-        ? options.tooltip
-        : [options.tooltip];
-      tooltips.forEach((tooltip) => {
-        tooltip.confine = true;
-        tooltip.appendTo = undefined;
-        tooltip.triggerOn = "click";
-      });
-      options.tooltip = tooltips;
+    if (options.tooltip) {
+      const isMobile = window.matchMedia(
+        "all and (max-width: 450px), all and (max-height: 500px)"
+      ).matches;
+      // Shallow-copy each tooltip object so wrap/mobile mutations don't leak
+      // back into the caller's options.tooltip reference (callers may cache the
+      // options object via memoizeOne, in which case in-place mutation would
+      // pollute that cache across chart instances).
+      const processTooltip = (tooltip: HaTooltipOption): TooltipOption => {
+        const next = convertHaTooltipFormatter(tooltip);
+        if (isMobile) {
+          // mobile charts are full width so we need to confine the tooltip to the chart
+          next.confine = true;
+          next.appendTo = undefined;
+          next.triggerOn = "click";
+        }
+        return next;
+      };
+      const haTooltip = options.tooltip;
+      const processedTooltip = Array.isArray(haTooltip)
+        ? haTooltip.map(processTooltip)
+        : processTooltip(haTooltip);
+      return {
+        ...options,
+        tooltip: processedTooltip,
+      } as ECOption;
    }
-    return options;
+    return options as ECOption;
  }

  private _createTheme(style: CSSStyleDeclaration) {
@@ -955,30 +1048,16 @@ export class HaChartBase extends LitElement {
    const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
      | XAXisOption
      | undefined;
-    const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
-      | YAXisOption
-      | undefined;
    const series = ensureArray(this.data).map((s) => {
      const data = this._hiddenDatasets.has(String(s.id ?? s.name))
        ? undefined
        : s.data;
+      let result = {
+        ...s,
+        data,
+      } as HaECSeriesItem;
      if (data && s.type === "line") {
-        if (yAxis?.type === "log") {
-          // set <=0 values to null so they render as gaps on a log graph
-          return {
-            ...s,
-            data: (data as LineSeriesOption["data"])!.map((v) =>
-              Array.isArray(v)
-                ? [
-                    v[0],
-                    typeof v[1] !== "number" || v[1] > 0 ? v[1] : null,
-                    ...v.slice(2),
-                  ]
-                : v
-            ),
-          };
-        }
-        if (s.sampling === "minmax") {
+        if ((s as LineSeriesOption).sampling === "minmax") {
          const minX = xAxis?.min
            ? xAxis.min instanceof Date
              ? xAxis.min.getTime()
@@ -993,8 +1072,8 @@ export class HaChartBase extends LitElement {
                ? xAxis.max
                : undefined
            : undefined;
-          return {
-            ...s,
+          result = {
+            ...result,
            sampling: undefined,
            data: downSampleLineData(
              data as LineSeriesOption["data"],
@@ -1002,11 +1081,10 @@ export class HaChartBase extends LitElement {
              minX,
              maxX
            ),
-          };
+          } as HaECSeriesItem;
        }
      }
-      const name = filterXSS(String(s.name ?? s.id ?? ""));
-      return { ...s, name, data };
+      return processSeriesTooltipFormatter(result);
    });
    return series as ECOption["series"];
  }
@@ -1343,8 +1421,8 @@ export class HaChartBase extends LitElement {
  }

  private _compareCustomLegendOptions(
-    oldOptions: ECOption | undefined,
-    newOptions: ECOption | undefined
+    oldOptions: HaECOption | undefined,
+    newOptions: HaECOption | undefined
  ): boolean {
    const oldLegends = ensureArray(
      oldOptions?.legend || []
@@ -1,6 +1,6 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
-import type { PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";

@@ -11,7 +11,7 @@ import type {
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
@@ -78,7 +78,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {

  @property({ attribute: false }) public tooltipFormatter?: (
    params: TopLevelFormatterParams
-  ) => string;
+  ) => TemplateResult | typeof nothing | null;

  /**
   * Optional callback that returns additional searchable strings for a node.
@@ -182,7 +182,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
  }

  private _createOptions = memoizeOne(
-    (categories?: NetworkData["categories"]): ECOption => ({
+    (categories?: NetworkData["categories"]): HaECOption => ({
      tooltip: {
        trigger: "item",
        confine: true,
@@ -1,5 +1,6 @@
 import { customElement, property, state } from "lit/decorators";
 import { LitElement, html, css } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { EChartsType } from "echarts/core";
 import type { SankeySeriesOption } from "echarts/types/dist/echarts";
 import type {
@@ -11,9 +12,8 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { fireEvent } from "../../common/dom/fire_event";
 import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import { measureTextWidth } from "../../util/text";
-import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
@@ -71,7 +71,7 @@ export class HaSankeyChart extends LitElement {
  });

  render() {
-    const options = {
+    const options: HaECOption = {
      grid: {
        top: 0,
        bottom: 0,
@@ -83,7 +83,7 @@ export class HaSankeyChart extends LitElement {
        formatter: this._renderTooltip,
        appendTo: document.body,
      },
-    } as ECOption;
+    };

    return html`<ha-chart-base
      .hass=${this.hass}
@@ -103,12 +103,14 @@ export class HaSankeyChart extends LitElement {
      : data.value;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
-      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
+      return html`${unsafeHTML(params.marker as string)}
+        ${node?.label ?? data.id}<br />${value}`;
    }
    if (data.source && data.target) {
      const source = this.data.nodes.find((n) => n.id === data.source);
      const target = this.data.nodes.find((n) => n.id === data.target);
-      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
+      return html`${source?.label ?? data.source} →
+        ${target?.label ?? data.target}<br />${value}`;
    }
    return null;
  };
@@ -3,10 +3,10 @@ import type { SunburstSeriesOption } from "echarts/types/dist/echarts";
 import type { CallbackDataParams } from "echarts/types/src/util/types";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
-import { filterXSS } from "../../common/util/xss";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";

@@ -50,13 +50,13 @@ export class HaSunburstChart extends LitElement {
      return nothing;
    }

-    const options = {
+    const options: HaECOption = {
      tooltip: {
        trigger: "item",
        formatter: this._renderTooltip,
        appendTo: document.body,
      },
-    } as ECOption;
+    };

    return html`<ha-chart-base
      .data=${this._createData(this.data)}
@@ -71,7 +71,7 @@ export class HaSunburstChart extends LitElement {
    const value = this.valueFormatter
      ? this.valueFormatter(data.value)
      : data.value;
-    return `${params.marker} ${filterXSS(data.name)}<br>${value}`;
+    return html`${unsafeHTML(params.marker as string)} ${data.name}<br />${value}`;
  };

  private _createData = memoizeOne(
@@ -1,6 +1,7 @@
-import type { PropertyValues } from "lit";
-import { html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
 import type { YAXisOption } from "echarts/types/dist/shared";
@@ -11,7 +12,9 @@ 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 type { ECOption } from "../../resources/echarts/echarts";
+import { sideTooltipPosition } from "./chart-tooltip-position";
+import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
  getNumberFormatOptions,
@@ -22,7 +25,6 @@ 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";
-import { filterXSS } from "../../common/util/xss";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";

 const safeParseFloat = (value) => {
@@ -106,7 +108,7 @@ export class StateHistoryChartLine extends LitElement {

  private _datasetToDataIndex: number[] = [];

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

  private _hiddenStats = new Set<string>();

@@ -116,9 +118,7 @@ export class StateHistoryChartLine extends LitElement {

  private _chartTime: Date = new Date();

-  private _previousYAxisLabelValue = 0;
-
-  private _yAxisMaximumFractionDigits = 0;
+  private _yAxisFractionDigits = 1;

  protected render() {
    return html`
@@ -141,12 +141,11 @@ export class StateHistoryChartLine extends LitElement {

  private _renderTooltip = (params: any) => {
    const time = params[0].axisValue;
-    const title =
-      formatDateTimeWithSeconds(
-        new Date(time),
-        this.hass.locale,
-        this.hass.config
-      ) + "<br>";
+    const title = formatDateTimeWithSeconds(
+      new Date(time),
+      this.hass.locale,
+      this.hass.config
+    );
    const datapoints: Record<string, any>[] = [];
    this._chartData.forEach((dataset, index) => {
      if (
@@ -185,44 +184,37 @@ export class StateHistoryChartLine extends LitElement {
      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
      : "";

-    return (
-      title +
-      datapoints
-        .map((param) => {
-          const entityId = this._entityIds[param.seriesIndex];
-          const stateObj = this.hass.states[entityId];
-          const entry = this.hass.entities[entityId];
-          const stateValue = String(param.value[1]);
-          let value = stateObj
-            ? this.hass.formatEntityState(stateObj, stateValue)
-            : `${formatNumber(
-                stateValue,
-                this.hass.locale,
-                getNumberFormatOptions(undefined, entry)
-              )}${unit}`;
-          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-          const data = this.data[dataIndex];
-          if (data.statistics && data.statistics.length > 0) {
-            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-            const source =
-              data.states.length === 0 ||
-              param.value[0] < data.states[0].last_changed
-                ? `${this.hass.localize(
-                    "ui.components.history_charts.source_stats"
-                  )}`
-                : `${this.hass.localize(
-                    "ui.components.history_charts.source_history"
-                  )}`;
-            value += source;
-          }
-
-          if (param.seriesName) {
-            return `${param.marker} ${filterXSS(param.seriesName)}: ${value}`;
-          }
-          return `${param.marker} ${value}`;
-        })
-        .join("<br>")
-    );
+    return html`${title}${datapoints.map((param) => {
+      const entityId = this._entityIds[param.seriesIndex];
+      const stateObj = this.hass.states[entityId];
+      const entry = this.hass.entities[entityId];
+      const stateValue = String(param.value[1]);
+      const value = stateObj
+        ? this.hass.formatEntityState(stateObj, stateValue)
+        : `${formatNumber(
+            stateValue,
+            this.hass.locale,
+            getNumberFormatOptions(undefined, entry)
+          )}${unit}`;
+      const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+      const data = this.data[dataIndex];
+      let statSuffix: TemplateResult | typeof nothing = nothing;
+      if (data.statistics && data.statistics.length > 0) {
+        const source =
+          data.states.length === 0 ||
+          param.value[0] < data.states[0].last_changed
+            ? this.hass.localize("ui.components.history_charts.source_stats")
+            : this.hass.localize("ui.components.history_charts.source_history");
+        // Five non-breaking spaces indent the source label.
+        statSuffix = html`<br />${"\u00a0".repeat(5)}${source}`;
+      }
+      // param.marker is echarts-generated styled markup (or hardcoded fallback
+      // span with the dataset color above), not user input.
+      return html`<br />${unsafeHTML(param.marker)}
+        ${param.seriesName
+          ? html`${param.seriesName}: `
+          : nothing}${value}${statSuffix}`;
+    })}`;
  };

  private _datasetHidden(ev: CustomEvent) {
@@ -413,8 +405,7 @@ export class StateHistoryChartLine extends LitElement {
        tooltip: {
          trigger: "axis",
          renderMode: "html",
-          position: "bottom",
-          align: "center",
+          position: sideTooltipPosition,
          confine: true,
          formatter: this._renderTooltip,
        },
@@ -436,6 +427,14 @@ 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;
    }
@@ -471,6 +470,7 @@ export class StateHistoryChartLine extends LitElement {
            d.data!.push([timestamp, prevValues[i]]);
          }
          d.data!.push([timestamp, datavalues[i]]);
+          trackY(datavalues[i]);
        });
        prevValues = datavalues;
      };
@@ -821,6 +821,7 @@ export class StateHistoryChartLine extends LitElement {
        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
        if (currentValue !== null) {
          data[0].data!.push([now, currentValue]);
+          trackY(currentValue);
        }
      }

@@ -828,6 +829,7 @@ 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;
@@ -861,20 +863,8 @@ 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._yAxisMaximumFractionDigits,
+      maximumFractionDigits: this._yAxisFractionDigits,
    });
    const width = measureTextWidth(label, 12) + 5;
    if (width > this._yWidth) {
@@ -884,7 +874,6 @@ export class StateHistoryChartLine extends LitElement {
        chartIndex: this.chartIndex,
      });
    }
-    this._previousYAxisLabelValue = value;
    return label;
  };

@@ -1,11 +1,11 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type {
  CustomSeriesOption,
  CustomSeriesRenderItem,
  ECElementEvent,
-  TooltipFormatterCallback,
  TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -14,8 +14,9 @@ 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 type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
 import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -56,7 +57,7 @@ export class StateHistoryChartTimeline extends LitElement {

  @state() private _chartData: CustomSeriesOption[] = [];

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

  @state() private _yWidth = 0;

@@ -68,7 +69,7 @@ export class StateHistoryChartTimeline extends LitElement {
        .hass=${this.hass}
        .options=${this._chartOptions}
        .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData as ECOption["series"]}
+        .data=${this._chartData as HaECSeries}
        small-controls
        @chart-click=${this._handleChartClick}
        @chart-zoom=${this._handleDataZoom}
@@ -131,42 +132,39 @@ export class StateHistoryChartTimeline extends LitElement {
    return rect;
  };

-  private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
-    (params: TooltipPositionCallbackParams) => {
-      const { value, name, marker, seriesName, color } = Array.isArray(params)
-        ? params[0]
-        : params;
-      const title = seriesName
-        ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
-        : "";
-      const durationInMs = value![2] - value![1];
-      const formattedDuration = `${this.hass.localize(
-        "ui.components.history_charts.duration"
-      )}: ${millisecondsToDuration(durationInMs)}`;
+  private _renderTooltip = (params: TooltipPositionCallbackParams) => {
+    const { value, name, marker, seriesName, color } = Array.isArray(params)
+      ? params[0]
+      : params;
+    const durationInMs = value![2] - value![1];
+    const formattedDuration = `${this.hass.localize(
+      "ui.components.history_charts.duration"
+    )}: ${millisecondsToDuration(durationInMs)}`;

-      const markerLocalized = !computeRTL(
-        this.hass.language,
-        this.hass.translationMetadata.translations
-      )
-        ? 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>`;
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+    // marker is echarts-generated styled markup, not user input. The RTL fallback
+    // is a hardcoded styled span with the echarts-provided color, also not user input.
+    const markerMarkup = rtl
+      ? `<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>`
+      : (marker as string);

-      const lines = [
-        markerLocalized + name,
-        formatDateTimeWithSeconds(
-          new Date(value![1]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formatDateTimeWithSeconds(
-          new Date(value![2]),
-          this.hass.locale,
-          this.hass.config
-        ),
-        formattedDuration,
-      ].join("<br>");
-      return [title, lines].join("");
-    };
+    return html`${seriesName
+        ? html`<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
+        : nothing}${unsafeHTML(
+        markerMarkup
+      )}${name}<br />${formatDateTimeWithSeconds(
+        new Date(value![1]),
+        this.hass.locale,
+        this.hass.config
+      )}<br />${formatDateTimeWithSeconds(
+        new Date(value![2]),
+        this.hass.locale,
+        this.hass.config
+      )}<br />${formattedDuration}`;
+  };

  public willUpdate(changedProps: PropertyValues) {
    if (
@@ -263,8 +261,7 @@ export class StateHistoryChartTimeline extends LitElement {
      },
      tooltip: {
        renderMode: "html",
-        position: "bottom",
-        align: "center",
+        position: sideTooltipPosition,
        confine: true,
        formatter: this._renderTooltip,
      },
@@ -2,7 +2,13 @@ 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, state } from "lit/decorators";
+import {
+  customElement,
+  eventOptions,
+  property,
+  queryAll,
+  state,
+} from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import type {
@@ -104,6 +110,11 @@ 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
@@ -327,11 +338,7 @@ export class StateHistoryCharts extends LitElement {
    this._isSyncing = true;

    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      ) as unknown as (StateHistoryChartLine | StateHistoryChartTimeline)[];
-
-      chartComponents.forEach((chartComponent, index) => {
+      this._chartComponents.forEach((chartComponent, index) => {
        if (index === sourceChartIndex) {
          return;
        }
@@ -350,11 +357,7 @@ export class StateHistoryCharts extends LitElement {
    this._isSyncing = true;

    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      );
-
-      chartComponents.forEach((chartComponent: any) => {
+      this._chartComponents.forEach((chartComponent: any) => {
        const chartBase =
          chartComponent.renderRoot?.querySelector("ha-chart-base");

@@ -4,9 +4,10 @@ import type {
  ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -34,12 +35,14 @@ import {
  isExternalStatistic,
  statisticsHaveType,
 } from "../../data/recorder";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 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",
@@ -124,13 +127,13 @@ export class StatisticsChart extends LitElement {

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

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

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

  private _computedStyle?: CSSStyleDeclaration;

-  private _previousYAxisLabelValue = 0;
+  private _yAxisFractionDigits = 1;

  protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
    return changedProps.size > 1 || !changedProps.has("hass");
@@ -142,7 +145,8 @@ export class StatisticsChart extends LitElement {
      changedProps.has("statTypes") ||
      changedProps.has("chartType") ||
      changedProps.has("hideLegend") ||
-      changedProps.has("_hiddenStats")
+      changedProps.has("_hiddenStats") ||
+      changedProps.has("names")
    ) {
      this._generateData();
    }
@@ -248,91 +252,101 @@ export class StatisticsChart extends LitElement {
    const unit = this.unit
      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
      : "";
-    return params
-      .map((param, index: number) => {
-        if (rendered[param.seriesIndex]) return "";
-        rendered[param.seriesIndex] = true;
+    const rows: {
+      time?: string;
+      marker: string;
+      seriesName?: string;
+      value: string;
+    }[] = [];
+    for (const param of params) {
+      if (rendered[param.seriesIndex]) continue;
+      rendered[param.seriesIndex] = true;

-        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>";
+      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 {
-          // 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>`;
+          startTime = new Date(param.value[0]);
        }
-
-        const options = getNumberFormatOptions(stateObj, entry) ?? {
-          maximumFractionDigits: 2,
-        };
-
-        const value = `${formatNumber(
-          rawValue,
+        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)}`
+              : "");
+        } 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
+                )}`
+              : "");
+        }
+      } 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,
-          options
-        )}${unit}`;
+          this.hass.config
+        );
+      }

-        const time = index === 0 ? rawTime : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}`;
-      })
-      .filter(Boolean)
-      .join("<br>");
+      const options = getNumberFormatOptions(stateObj, entry) ?? {
+        maximumFractionDigits: 2,
+      };
+
+      const value = `${formatNumber(rawValue, this.hass.locale, options)}${unit}`;
+
+      rows.push({
+        time: rows.length === 0 ? rawTime : undefined,
+        marker: param.marker,
+        seriesName: param.seriesName,
+        value,
+      });
+    }
+
+    if (rows.length === 0) return nothing;
+
+    // param.marker is echarts-generated styled markup (or hardcoded fallback
+    // span with the dataset color above), not user input.
+    return html`${rows.map(
+      (row, i) =>
+        html`${row.time ? html`${row.time}<br />` : nothing}${unsafeHTML(
+          row.marker
+        )}
+        ${row.seriesName}:
+        ${row.value}${i < rows.length - 1 ? html`<br />` : nothing}`
+    )}`;
  };

  private _createOptions() {
@@ -459,8 +473,7 @@ export class StatisticsChart extends LitElement {
      tooltip: {
        trigger: "axis",
        renderMode: "html",
-        position: "bottom",
-        align: "center",
+        position: sideTooltipPosition,
        confine: true,
        formatter: this._renderTooltip,
      },
@@ -495,6 +508,14 @@ 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;
@@ -600,6 +621,9 @@ export class StatisticsChart extends LitElement {
              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) {
@@ -610,6 +634,7 @@ export class StatisticsChart extends LitElement {
            // 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]);
          }
        });
        prevValues = dataValues;
@@ -822,6 +847,7 @@ export class StatisticsChart extends LitElement {
                  val.push(currentValue);
                }
                statDataSets[i].data!.push([now, ...val]);
+                trackY(val[val.length - 1]);
              });
            }
          }
@@ -855,6 +881,7 @@ 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
@@ -888,21 +915,10 @@ export class StatisticsChart extends LitElement {
    return Math.abs(value) < 1 ? value : roundingFn(value);
  }

-  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,
+  private _formatYAxisLabel = (value: number) =>
+    formatNumber(value, this.hass.locale, {
+      maximumFractionDigits: this._yAxisFractionDigits,
    });
-    this._previousYAxisLabelValue = value;
-    return label;
-  };

  static styles = css`
    :host {
@@ -0,0 +1,9 @@
+// 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)));
+}
@@ -1,13 +1,14 @@
 import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-dialog-footer";
 import "../ha-icon-button";
@@ -24,7 +25,9 @@ import type { DataTableSettingsDialogParams } from "./show-dialog-data-table-set

@customElement("dialog-data-table-settings")
 export class DialogDataTableSettings extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;

  @state() private _params?: DataTableSettingsDialogParams;

@@ -117,7 +120,7 @@ export class DialogDataTableSettings extends LitElement {
      return nothing;
    }

-    const localize = this._params.localizeFunc || this.hass.localize;
+    const localize = this._params.localizeFunc || this._localize;

    const columns = this._sortedColumns(
      this._params.columns,
@@ -172,7 +175,7 @@ export class DialogDataTableSettings extends LitElement {
                    .hidden=${!isVisible}
                    .path=${isVisible ? mdiEye : mdiEyeOff}
                    slot="meta"
-                    .label=${this.hass!.localize(
+                    .label=${localize(
                      `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
                      { title: typeof col.title === "string" ? col.title : "" }
                    )}
@@ -1,7 +1,8 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query, state } 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";
@@ -17,40 +18,163 @@ 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.labels.sort((a, b) => stringCompare(a.name, b.name));
+    const labels = this._sortedLabels;
+    const visible = labels.slice(0, this._visibleCount);
+    const hidden = labels.length - this._visibleCount;
+
    return html`
-      <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>
+      <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>
    `;
  }

+  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
@@ -93,13 +217,43 @@ 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 {
-      position: fixed;
+      display: flex;
      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);
@@ -24,6 +24,7 @@ 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]>;
@@ -98,6 +99,8 @@ export class HaDateRangePicker extends LitElement {

  @query(".container") private _containerElement?: HTMLDivElement;

+  @query("ha-textarea") private _textareaElement?: HaTextArea;
+
  private _narrow = false;

  private _unsubscribeTinyKeys?: () => void;
@@ -335,9 +338,8 @@ export class HaDateRangePicker extends LitElement {
  };

  private _setTextareaFocusStyle(focused: boolean) {
-    const textarea = this.renderRoot.querySelector("ha-textarea");
-    if (textarea) {
-      textarea.setFocused(focused);
+    if (this._textareaElement) {
+      this._textareaElement.setFocused(focused);
    }
  }

@@ -1,10 +1,12 @@
 import { consume } from "@lit/context";
+import type { HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
@@ -12,7 +14,7 @@ import {
  sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { CallWS, HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-generic-picker";
 import type { PickerValueRenderer } from "../ha-picker-field";

@@ -46,13 +48,14 @@ export abstract class HaDeviceAutomationPicker<
  }

  private _localizeDeviceAutomation: (
-    hass: HomeAssistant,
+    localize: LocalizeFunc,
+    states: HassEntities,
    entityRegistry: EntityRegistryEntry[],
    automation: T
  ) => string;

  private _fetchDeviceAutomations: (
-    hass: HomeAssistant,
+    callWS: CallWS,
    deviceId: string
  ) => Promise<T[]>;

@@ -127,7 +130,8 @@ export abstract class HaDeviceAutomationPicker<

      const automationListItems = automations.map((automation, idx) => {
        const primary = this._localizeDeviceAutomation(
-          this.hass,
+          this.hass.localize,
+          this.hass.states,
          this._entityReg,
          automation
        );
@@ -162,7 +166,12 @@ export abstract class HaDeviceAutomationPicker<
    );

    const text = automation
-      ? this._localizeDeviceAutomation(this.hass, this._entityReg, automation)
+      ? this._localizeDeviceAutomation(
+          this.hass.localize,
+          this.hass.states,
+          this._entityReg,
+          automation
+        )
      : value === NO_AUTOMATION_KEY
        ? this.NO_AUTOMATION_TEXT
        : value;
@@ -172,9 +181,9 @@ export abstract class HaDeviceAutomationPicker<

  private async _updateDeviceInfo() {
    this._automations = this.deviceId
-      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
-          sortDeviceAutomations
-        )
+      ? (
+          await this._fetchDeviceAutomations(this.hass.callWS, this.deviceId)
+        ).sort(sortDeviceAutomations)
      : // No device, clear the list of automations
        [];

@@ -6,11 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import {
-  UNAVAILABLE,
-  UNKNOWN,
-  isUnavailableState,
-} from "../../data/entity/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -20,7 +16,8 @@ import "../ha-switch";
 const isOn = (stateObj?: HassEntity) =>
  stateObj !== undefined &&
  !STATES_OFF.includes(stateObj.state) &&
-  !isUnavailableState(stateObj.state);
+  stateObj.state !== UNAVAILABLE &&
+  stateObj.state !== UNKNOWN;

 /**
 * @element ha-entity-toggle
@@ -9,7 +9,7 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
-import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
 import type { HomeAssistant } from "../../types";
@@ -170,7 +170,8 @@ export class HaStateLabelBadge extends LitElement {
        }
      // eslint-disable-next-line: disable=no-fallthrough
      default:
-        return isUnavailableState(entityState.state)
+        return entityState.state === UNAVAILABLE ||
+          entityState.state === UNKNOWN
          ? "—"
          : this.hass!.formatEntityStateToParts(entityState).find(
              (part) => part.type === "value"
@@ -209,7 +210,7 @@ export class HaStateLabelBadge extends LitElement {
    _timerTimeRemaining = 0
  ) {
    // For unavailable states or certain domains, use a special translation that is truncated to fit within the badge label
-    if (isUnavailableState(entityState.state)) {
+    if (entityState.state === UNAVAILABLE || entityState.state === UNKNOWN) {
      return this.hass!.localize(`state_badge.default.${entityState.state}`);
    }
    const domainStateKey = getTruncatedKey(domain, entityState.state);
@@ -142,6 +142,7 @@ 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 = () =>
@@ -317,7 +318,7 @@ export class HaStatisticPicker extends LitElement {
    }
  );

-  private _valueRenderer: PickerValueRenderer = (value) => {
+  private _renderValue(value: string) {
    const statisticId = value;

    const item = this._computeItem(statisticId);
@@ -341,7 +342,13 @@ 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];
@@ -1,6 +1,6 @@
 import "@home-assistant/webawesome/dist/components/popover/popover";
 import { css, html, nothing, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, 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,6 +25,8 @@ 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") ||
@@ -188,7 +190,7 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
  }

  private _handlePopoverPointerDown(ev: PointerEvent) {
-    const popover = this.renderRoot.querySelector("wa-popover");
+    const popover = this._popoverElement;
    const dialog = popover?.shadowRoot?.querySelector(
      "dialog"
    ) as HTMLDialogElement | null;
@@ -215,7 +217,7 @@ export class HaAdaptivePopover extends ScrollLockMixin(HaAdaptiveDialog) {
  }

  private _pulsePopover() {
-    const popover = this.renderRoot.querySelector("wa-popover");
+    const popover = this._popoverElement;
    const popup = popover?.shadowRoot?.querySelector("wa-popup") as {
      popup?: HTMLElement;
    } | null;
@@ -6,8 +6,9 @@ import {
  mdiInformationOutline,
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
@@ -39,7 +40,9 @@ class HaAlert extends LitElement {

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

-  @property({ attribute: false }) public localize?: LocalizeFunc;
+  @state()
+  @consumeLocalize()
+  private _localize?: LocalizeFunc;

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

@@ -68,7 +71,7 @@ class HaAlert extends LitElement {
              ${this.dismissable
                ? html`<ha-icon-button
                    @click=${this._dismissClicked}
-                    .label=${this.localize!("ui.common.dismiss_alert")}
+                    .label=${this._localize?.("ui.common.dismiss_alert")}
                    .path=${mdiClose}
                  ></ha-icon-button>`
                : nothing}
@@ -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 "./ha-tooltip";
 import type { HaSwitch } from "./ha-switch";
+import "./ha-tooltip";
+import "./item/ha-row-item";

 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-md-list-item>
+      <ha-row-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-md-list-item>
+      </ha-row-item>
      ${ADDITIONAL_PREFERENCES.map(
        (preference) => html`
-          <ha-md-list-item>
+          <ha-row-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-md-list-item>
+          </ha-row-item>
        `
      )}
-      <ha-md-list-item>
+      <ha-row-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-md-list-item>
+      </ha-row-item>
    `;
  }

@@ -139,10 +139,8 @@ export class HaAnalytics extends LitElement {
          color: var(--error-color);
        }

-        ha-md-list-item {
-          --md-list-item-leading-space: 0;
-          --md-list-item-trailing-space: 0;
-          --md-item-overflow: visible;
+        ha-row-item {
+          --ha-row-item-padding-inline: 0;
        }
      `,
    ];
@@ -9,6 +9,7 @@ import {
  customElement,
  property,
  query,
+  queryAll,
  state as litState,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,6 +32,8 @@ export class HaAnsiToHtml extends LitElement {

  @query("pre") private _pre?: HTMLPreElement;

+  @queryAll("div") private _divs!: NodeListOf<HTMLDivElement>;
+
  @litState() private _filter = "";

  protected render(): TemplateResult {
@@ -320,7 +323,7 @@ export class HaAnsiToHtml extends LitElement {
   */
  filterLines(filter: string): boolean {
    this._filter = filter;
-    const lines = this.shadowRoot?.querySelectorAll("div") || [];
+    const lines = this._divs;
    let numberOfFoundLines = 0;
    if (!filter) {
      lines.forEach((line) => {
@@ -29,7 +29,7 @@ export interface AreaControlPickerItem extends PickerComboBoxItem {
  deviceClass?: string;
 }

-const AREA_CONTROL_DOMAINS: readonly AreaControlDomain[] = [
+const AREA_CONTROL_DOMAINS = [
  "light",
  "fan",
  "switch",
@@ -43,7 +43,7 @@ const AREA_CONTROL_DOMAINS: readonly AreaControlDomain[] = [
  "cover-door",
  "cover-window",
  "cover-damper",
-] as const;
+] as const satisfies readonly AreaControlDomain[];

@customElement("ha-area-controls-picker")
 export class HaAreaControlsPicker extends LitElement {
@@ -130,7 +130,7 @@ export class HaAreaControlsPicker extends LitElement {
          (excludeValues !== undefined && excludeValues.includes(id));

        const controlEntities = getAreaControlEntities(
-          AREA_CONTROL_DOMAINS as unknown as AreaControlDomain[],
+          AREA_CONTROL_DOMAINS,
          areaId,
          excludeEntities,
          this.hass
@@ -61,7 +61,6 @@ export class HaAreasDisplayEditor extends LitElement {
      >
        <ha-svg-icon slot="leading-icon" .path=${mdiTextureBox}></ha-svg-icon>
        <ha-items-display-editor
-          .hass=${this.hass}
          .items=${items}
          .value=${value}
          @value-changed=${this._areaDisplayChanged}
@@ -107,7 +107,6 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                      ></ha-svg-icon>
                    `}
                <ha-items-display-editor
-                  .hass=${this.hass}
                  .items=${groupedAreasItems[floor.floor_id]}
                  .value=${value}
                  .floorId=${floor.floor_id}
@@ -1,6 +1,6 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
@@ -24,11 +24,12 @@ class HaBluePrintPicker extends LitElement {

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

+  @query("ha-select") private _select?: HTMLElement;
+
  public open() {
-    const select = this.shadowRoot?.querySelector("ha-select");
-    if (select) {
+    if (this._select) {
      // @ts-expect-error
-      select.menuOpen = true;
+      this._select.menuOpen = true;
    }
  }

@@ -75,6 +75,8 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {

  @query("#body") private _bodyElement!: HTMLDivElement;

+  @query("[autofocus]") private _autofocusElement?: HTMLElement;
+
  protected get scrollableElement(): HTMLElement | null {
    return this._bodyElement;
  }
@@ -93,12 +95,12 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
    await this.updateComplete;

    requestAnimationFrame(() => {
+      const element = this._autofocusElement;
      if (
        this._hassConfig?.auth.external &&
        isIosApp(this._hassConfig.auth.external)
      ) {
-        const element = this.renderRoot.querySelector("[autofocus]");
-        if (element !== null) {
+        if (element) {
          if (!element.id) {
            element.id = "ha-bottom-sheet-autofocus";
          }
@@ -111,9 +113,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
        }
        return;
      }
-      (
-        this.renderRoot.querySelector("[autofocus]") as HTMLElement | null
-      )?.focus();
+      element?.focus();
    });
  };

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { ClimateEntity } from "../data/climate";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { isUnavailableState, OFF } from "../data/entity/entity";
+import { OFF, UNAVAILABLE, UNKNOWN } from "../data/entity/entity";
 import type { HomeAssistant } from "../types";

@customElement("ha-climate-state")
@@ -14,9 +14,11 @@ class HaClimateState extends LitElement {

  protected render(): TemplateResult {
    const currentStatus = this._computeCurrentStatus();
+    const noValue =
+      this.stateObj.state === UNAVAILABLE || this.stateObj.state === UNKNOWN;

    return html`<div class="target">
-        ${!isUnavailableState(this.stateObj.state)
+        ${!noValue
          ? html`<span class="state-label">
                ${this._localizeState()}
                ${this.stateObj.attributes.preset_mode &&
@@ -32,7 +34,7 @@ class HaClimateState extends LitElement {
          : this._localizeState()}
      </div>

-      ${currentStatus && !isUnavailableState(this.stateObj.state)
+      ${currentStatus && !noValue
        ? html`
            <div class="current">
              ${this.hass.localize("ui.card.climate.currently")}:
@@ -119,7 +121,10 @@ class HaClimateState extends LitElement {
  }

  private _localizeState(): string {
-    if (isUnavailableState(this.stateObj.state)) {
+    if (
+      this.stateObj.state === UNAVAILABLE ||
+      this.stateObj.state === UNKNOWN
+    ) {
      return this.hass.localize(`state.default.${this.stateObj.state}`);
    }

@@ -27,6 +27,7 @@ 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";
@@ -43,7 +44,14 @@ import type {
 import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
 import { documentationUrl } from "../util/documentation-url";
-import { labelsContext } from "../data/context";
+import {
+  internationalizationContext,
+  registriesContext,
+  statesContext,
+  labelsContext,
+  configContext,
+  formattersContext,
+} 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";
@@ -78,8 +86,6 @@ 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;

@@ -123,9 +129,29 @@ export class HaCodeEditor extends ReactiveElement {

  @state() private _canCopy = false;

-  @consume({ context: labelsContext, subscribe: true })
  @state()
-  private _labels?: LabelRegistryEntry[];
+  @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>;

  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
  private _loadedCodeMirror?: typeof import("../resources/codemirror");
@@ -162,6 +188,7 @@ 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}`);
  }

@@ -189,9 +216,9 @@ export class HaCodeEditor extends ReactiveElement {
      const line = doc.lineAt(pos);
      const message = `${
        err.reason ||
-        this.hass?.localize("ui.components.yaml-editor.error") ||
+        this._i18n?.localize("ui.components.yaml-editor.error") ||
        "YAML syntax error"
-      }${err.mark ? ` (${this.hass?.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
+      }${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(
@@ -396,8 +423,8 @@ export class HaCodeEditor extends ReactiveElement {
          this._loadedCodeMirror!.haJinjaHoverSource(
            view,
            pos,
-            this.hass ? documentationUrl(this.hass, "") : undefined,
-            this.hass ? this._hassArgHoverContext() : undefined
+            this._config ? documentationUrl(this._config, "") : undefined,
+            this._hassArgHoverContext()
          ),
        { hoverTime: 300 }
      ),
@@ -408,7 +435,7 @@ export class HaCodeEditor extends ReactiveElement {
      const completionSources: CompletionSource[] = [
        this._loadedCodeMirror.haJinjaCompletionSource,
      ];
-      if (this.autocompleteEntities && this.hass) {
+      if (this.autocompleteEntities) {
        completionSources.push(this._entityCompletions.bind(this));
      }
      if (this.autocompleteIcons) {
@@ -447,12 +474,12 @@ export class HaCodeEditor extends ReactiveElement {
  private _fullscreenLabel(): string {
    if (this._isFullscreen) {
      return (
-        this.hass?.localize("ui.components.yaml-editor.exit_fullscreen") ||
+        this._i18n?.localize("ui.components.yaml-editor.exit_fullscreen") ||
        "Exit fullscreen"
      );
    }
    return (
-      this.hass?.localize("ui.components.yaml-editor.enter_fullscreen") ||
+      this._i18n?.localize("ui.components.yaml-editor.enter_fullscreen") ||
      "Enter fullscreen"
    );
  }
@@ -507,7 +534,7 @@ export class HaCodeEditor extends ReactiveElement {
            {
              id: "test",
              label:
-                this.hass?.localize(
+                this._i18n?.localize(
                  `ui.components.yaml-editor.test_${this.testing ? "off" : "on"}`
                ) || "Test",
              path: this.testing ? mdiBugOutline : mdiBug,
@@ -518,14 +545,14 @@ export class HaCodeEditor extends ReactiveElement {
      {
        id: "undo",
        disabled: !this._canUndo,
-        label: this.hass?.localize("ui.common.undo") || "Undo",
+        label: this._i18n?.localize("ui.common.undo") || "Undo",
        path: mdiUndo,
        action: (e: Event) => this._handleUndoClick(e),
      },
      {
        id: "redo",
        disabled: !this._canRedo,
-        label: this.hass?.localize("ui.common.redo") || "Redo",
+        label: this._i18n?.localize("ui.common.redo") || "Redo",
        path: mdiRedo,
        action: (e: Event) => this._handleRedoClick(e),
      },
@@ -533,7 +560,7 @@ export class HaCodeEditor extends ReactiveElement {
        id: "copy",
        disabled: !this._canCopy,
        label:
-          this.hass?.localize("ui.components.yaml-editor.copy_to_clipboard") ||
+          this._i18n?.localize("ui.components.yaml-editor.copy_to_clipboard") ||
          "Copy to Clipboard",
        path: mdiContentCopy,
        action: (e: Event) => this._handleClipboardClick(e),
@@ -541,7 +568,7 @@ export class HaCodeEditor extends ReactiveElement {
      {
        id: "find-replace",
        label:
-          this.hass?.localize("ui.components.yaml-editor.find_and_replace") ||
+          this._i18n?.localize("ui.components.yaml-editor.find_and_replace") ||
          "Find and replace",
        path: mdiFindReplace,
        action: (e: Event) => this._handleFindReplaceClick(e),
@@ -583,7 +610,7 @@ export class HaCodeEditor extends ReactiveElement {
      await copyToClipboard(this.value);
      showToast(this, {
        message:
-          this.hass?.localize("ui.common.copied_clipboard") ||
+          this._i18n?.localize("ui.common.copied_clipboard") ||
          "Copied to clipboard",
      });
    }
@@ -651,12 +678,11 @@ export class HaCodeEditor extends ReactiveElement {
  };

  /**
-   * Builds a HassArgHoverContext from the current hass object so that
+   * 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 hass = this.hass!;
    const labelMap: Record<
      string,
      { name: string; description?: string | null }
@@ -668,27 +694,33 @@ export class HaCodeEditor extends ReactiveElement {
      };
    }
    return {
-      states: hass.states as HassArgHoverContext["states"],
-      devices: hass.devices as HassArgHoverContext["devices"],
-      areas: hass.areas as HassArgHoverContext["areas"],
-      floors: hass.floors as HassArgHoverContext["floors"],
-      entities: hass.entities as HassArgHoverContext["entities"],
+      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) =>
-        hass.formatEntityState(hass.states[entityId]),
+        this._formatters!.formatEntityState(this._states![entityId]),
      formatEntityName: (entityId) => {
-        const stateObj = hass.states[entityId];
+        const stateObj = this._states?.[entityId];
        return (
          (stateObj?.attributes.friendly_name as string | undefined) ??
-          hass.entities[entityId]?.name ??
+          this._registries?.entities?.[entityId]?.name ??
          undefined
        );
      },
      formatAttributeName: (entityId, attribute) =>
-        hass.formatEntityAttributeName(hass.states[entityId], attribute),
+        this._formatters!.formatEntityAttributeName(
+          this._states![entityId],
+          attribute
+        ),
      formatAttributeValue: (entityId, attribute) =>
-        hass.formatEntityAttributeValue(hass.states[entityId], attribute),
-      localize: (key) => hass.localize(key as never),
+        this._formatters!.formatEntityAttributeValue(
+          this._states![entityId],
+          attribute
+        ),
+      localize: (key) => this._i18n!.localize(key as never),
    };
  }

@@ -698,49 +730,51 @@ export class HaCodeEditor extends ReactiveElement {
        ? completion.apply
        : completion.label;
    const context = getEntityContext(
-      this.hass!.states[key],
-      this.hass!.entities,
-      this.hass!.devices,
-      this.hass!.areas,
-      this.hass!.floors
+      this._states![key],
+      this._registries!.entities,
+      this._registries!.devices,
+      this._registries!.areas,
+      this._registries!.floors
    );

    const completionInfo = document.createElement("div");
    completionInfo.classList.add("completion-info");

-    const formattedState = this.hass!.formatEntityState(this.hass!.states[key]);
+    const formattedState = this._formatters!.formatEntityState(
+      this._states![key]
+    );

    const completionItems: CompletionItem[] = [
      {
-        label: this.hass!.localize(
+        label: this._i18n!.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.hass!.states[key].state === formattedState
+          this._states![key].state === formattedState
            ? undefined
-            : this.hass!.states[key].state,
+            : this._states![key].state,
      },
    ];

    if (context.device && context.device.name) {
      completionItems.push({
-        label: this.hass!.localize("ui.components.device-picker.device"),
+        label: this._i18n!.localize("ui.components.device-picker.device"),
        value: context.device.name,
      });
    }

    if (context.area && context.area.name) {
      completionItems.push({
-        label: this.hass!.localize("ui.components.area-picker.area"),
+        label: this._i18n!.localize("ui.components.area-picker.area"),
        value: context.area.name,
      });
    }

    if (context.floor && context.floor.name) {
      completionItems.push({
-        label: this.hass!.localize("ui.components.floor-picker.floor"),
+        label: this._i18n!.localize("ui.components.floor-picker.floor"),
        value: context.floor.name,
      });
    }
@@ -761,15 +795,15 @@ export class HaCodeEditor extends ReactiveElement {
    entityId: string,
    attribute: string
  ): CompletionInfo | null => {
-    if (!this.hass) return null;
-    const stateObj = this.hass.states[entityId];
+    if (!this._states || !this._formatters) return null;
+    const stateObj = this._states[entityId];
    if (!stateObj) return null;

-    const translatedName = this.hass.formatEntityAttributeName(
+    const translatedName = this._formatters.formatEntityAttributeName(
      stateObj,
      attribute
    );
-    const formattedValue = this.hass.formatEntityAttributeValue(
+    const formattedValue = this._formatters.formatEntityAttributeValue(
      stateObj,
      attribute
    );
@@ -809,9 +843,9 @@ export class HaCodeEditor extends ReactiveElement {
    completion: Completion
  ): CompletionInfo | Promise<CompletionInfo> | null => {
    if (
-      this.hass &&
+      this._states &&
      typeof completion.apply === "string" &&
-      completion.apply in this.hass.states
+      completion.apply in this._states
    ) {
      return this._renderInfo(completion);
    }
@@ -1020,7 +1054,7 @@ export class HaCodeEditor extends ReactiveElement {
  private _statesDotNotationCompletions(
    context: CompletionContext
  ): CompletionResult | null | undefined {
-    if (!this.hass) return undefined;
+    if (!this._states) return undefined;

    const { state: editorState, pos } = context;
    const tree = this._loadedCodeMirror!.syntaxTree(editorState);
@@ -1129,9 +1163,7 @@ export class HaCodeEditor extends ReactiveElement {
      case 0: {
        // states.   → offer all unique domains
        const domains = [
-          ...new Set(
-            Object.keys(this.hass.states).map((id) => id.split(".")[0])
-          ),
+          ...new Set(Object.keys(this._states).map((id) => id.split(".")[0])),
        ].sort();
        return {
          from: completionFrom,
@@ -1142,7 +1174,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.hass.states)
+        const entities = Object.keys(this._states)
          .filter((id) => id.startsWith(`${domain}.`))
          .map((id) => id.split(".").slice(1).join("."));
        if (!entities.length) return { from: completionFrom, options: [] };
@@ -1172,7 +1204,7 @@ export class HaCodeEditor extends ReactiveElement {
        }
        // Offer attribute names from the entity's state object
        const entityId = `${domain}.${entity}`;
-        const entityState = this.hass.states[entityId];
+        const entityState = this._states[entityId];
        if (!entityState) return { from: completionFrom, options: [] };
        const attrNames = Object.keys(entityState.attributes).sort();
        return {
@@ -1342,8 +1374,8 @@ export class HaCodeEditor extends ReactiveElement {
  ): CompletionResult {
    const from = stringNode.from + 1;
    const empty: CompletionResult = { from, options: [] };
-    if (!entityId || !this.hass) return empty;
-    const entityState = this.hass.states[entityId];
+    if (!entityId || !this._states) return empty;
+    const entityState = this._states[entityId];
    if (!entityState) return empty;
    const attrs = Object.keys(entityState.attributes).sort();
    if (!attrs.length) return empty;
@@ -1363,7 +1395,7 @@ export class HaCodeEditor extends ReactiveElement {
    from: number;
    to: number;
  }): CompletionResult | null {
-    const states = this._getStates(this.hass!.states);
+    const states = this._getStates(this._states!);
    if (!states?.length) return null;
    // from is stringNode.from + 1 to skip the opening quote character.
    const from = stringNode.from + 1;
@@ -1397,8 +1429,8 @@ export class HaCodeEditor extends ReactiveElement {
    from: number;
    to: number;
  }): CompletionResult | null {
-    if (!this.hass?.devices) return null;
-    const devices = this._getDevices(this.hass.devices);
+    if (!this._registries?.devices) return null;
+    const devices = this._getDevices(this._registries.devices);
    if (!devices.length) return null;
    return {
      from: stringNode.from + 1,
@@ -1426,8 +1458,8 @@ export class HaCodeEditor extends ReactiveElement {
    from: number;
    to: number;
  }): CompletionResult | null {
-    if (!this.hass?.areas) return null;
-    const areas = this._getAreas(this.hass.areas);
+    if (!this._registries?.areas) return null;
+    const areas = this._getAreas(this._registries.areas);
    if (!areas.length) return null;
    return {
      from: stringNode.from + 1,
@@ -1455,8 +1487,8 @@ export class HaCodeEditor extends ReactiveElement {
    from: number;
    to: number;
  }): CompletionResult | null {
-    if (!this.hass?.floors) return null;
-    const floors = this._getFloors(this.hass.floors);
+    if (!this._registries?.floors) return null;
+    const floors = this._getFloors(this._registries.floors);
    if (!floors.length) return null;
    return {
      from: stringNode.from + 1,
@@ -1556,7 +1588,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.hass!.states);
+          const states = this._getStates(this._states!);

          if (!states || !states.length) {
            return null;
@@ -1611,7 +1643,7 @@ export class HaCodeEditor extends ReactiveElement {
            const afterListMarker = currentLine.from + listItemMatch[0].length;

            if (context.pos >= afterListMarker) {
-              const states = this._getStates(this.hass!.states);
+              const states = this._getStates(this._states!);

              if (!states || !states.length) {
                return null;
@@ -1671,7 +1703,7 @@ export class HaCodeEditor extends ReactiveElement {
      return null;
    }

-    const states = this._getStates(this.hass!.states);
+    const states = this._getStates(this._states!);

    if (!states || !states.length) {
      return null;
@@ -54,6 +54,7 @@ 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;
@@ -1,36 +1,115 @@
-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 "@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 { 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 DrawerBase {
-  @property() public direction: "ltr" | "rtl" = "ltr";
+export class HaDrawer extends LitElement {
+  private static readonly _SWIPE_AXIS_TOLERANCE = 32;

-  private _mc?: HammerManager;
+  @property({ reflect: true }) public direction: "ltr" | "rtl" = "ltr";

-  private _rtlStyle?: HTMLElement;
+  @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 _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 !== "width" || this._sidebarTransitionActive) {
+    if (
+      ev.propertyName !==
+        (this.type === "dismissible" ? "transform" : "width") ||
+      this._sidebarTransitionActive
+    ) {
      return;
    }
    this._sidebarTransitionActive = true;
@@ -41,7 +120,11 @@ export class HaDrawer extends DrawerBase {
  };

  private _handleDrawerTransitionEnd = (ev: TransitionEvent) => {
-    if (ev.propertyName !== "width" || !this._sidebarTransitionActive) {
+    if (
+      ev.propertyName !==
+        (this.type === "dismissible" ? "transform" : "width") ||
+      !this._sidebarTransitionActive
+    ) {
      return;
    }
    this._sidebarTransitionActive = false;
@@ -51,150 +134,208 @@ export class HaDrawer extends DrawerBase {
    });
  };

-  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 _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 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 _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);
+  };

-        this.shadowRoot!.appendChild(this._rtlStyle);
-      } else if (this._rtlStyle) {
-        this.shadowRoot!.removeChild(this._rtlStyle);
+  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();
      }
+      return;
    }

-    if (changedProps.has("open") && this.open && this.type === "modal") {
-      this._setupSwipe();
-    } else if (this._mc) {
-      this._mc.destroy();
-      this._mc = undefined;
+    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();
    }
+  };
+
+  private _unregisterSwipeHandlers() {
+    document.removeEventListener("touchmove", this._handleTouchMove);
+    document.removeEventListener("touchend", this._handleTouchEnd);
+    document.removeEventListener("touchcancel", this._handleTouchEnd);
  }

-  protected firstUpdated() {
-    super.firstUpdated();
-    this.mdcRoot?.addEventListener(
+  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(
      "transitionstart",
      this._handleDrawerTransitionStart
    );
-    this.mdcRoot?.addEventListener(
+    this._transitionTarget.addEventListener(
      "transitionend",
      this._handleDrawerTransitionEnd
    );
-    this.mdcRoot?.addEventListener(
+    this._transitionTarget.addEventListener(
      "transitioncancel",
      this._handleDrawerTransitionEnd
    );
  }

-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this.mdcRoot?.removeEventListener(
+  private _removeTransitionListeners() {
+    if (!this._transitionTarget) {
+      return;
+    }
+
+    this._transitionTarget.removeEventListener(
      "transitionstart",
      this._handleDrawerTransitionStart
    );
-    this.mdcRoot?.removeEventListener(
+    this._transitionTarget.removeEventListener(
      "transitionend",
      this._handleDrawerTransitionEnd
    );
-    this.mdcRoot?.removeEventListener(
+    this._transitionTarget.removeEventListener(
      "transitioncancel",
      this._handleDrawerTransitionEnd
    );
+    this._transitionTarget = undefined;
  }

-  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 });
-    });
-  }
+  static styles = css`
+    :host {
+      display: block;
+      height: 100%;
+    }

-  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;
-        }
-      }
-    `,
-  ];
+    .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;
+      z-index: 6;
+    }
+
+    .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;
+    }
+  `;
 }

 declare global {
@@ -6,11 +6,18 @@ import type { HaIconButton } from "./ha-icon-button";

 /**
 * Event type for the ha-dropdown component when an item is selected.
- * @param T - The type of the value of the selected item.
+ * @param TValue - The type of the selected item's `value`.
+ * @param TData - The type of the selected item's `data` when set on `ha-dropdown-item`.
 */
-export type HaDropdownSelectEvent<T = string> = CustomEvent<{
-  item: Omit<HaDropdownItem, "value"> & { value: T };
-}>;
+export type HaDropdownSelectEvent<TValue = string, TData = undefined> = [
+  TData,
+] extends [undefined]
+  ? CustomEvent<{
+      item: Omit<HaDropdownItem, "value"> & { value: TValue };
+    }>
+  : CustomEvent<{
+      item: Omit<HaDropdownItem, "value"> & { value: TValue; data: TData };
+    }>;

 /**
 * Home Assistant dropdown component
@@ -54,7 +54,6 @@ export class HaEntitiesDisplayEditor extends LitElement {

    return html`
      <ha-items-display-editor
-        .hass=${this.hass}
        .items=${items}
        .value=${value}
        @value-changed=${this._itemDisplayChanged}
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, 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,6 +32,8 @@ export class HaFilterBlueprints extends LitElement {

  @state() private _blueprints?: Blueprints;

+  @query("ha-list") private _list?: HTMLElement;
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -96,8 +98,7 @@ export class HaFilterBlueprints extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (this.narrow || !this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49}px`;
+        this._list!.style.height = `${this.clientHeight - 49}px`;
      }, 300);
    }
  }
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, 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,6 +49,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {

  @state() private _shouldRender = false;

+  @query("ha-list") private _list?: HTMLElement;
+
  protected hassSubscribeRequiredHostProps = ["scope"];

  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
@@ -169,8 +171,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - (49 + 48)}px`;
+        this._list!.style.height = `${this.clientHeight - (49 + 48)}px`;
      }, 300);
    }
  }
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, 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,6 +34,8 @@ export class HaFilterDevices extends LitElement {

  @state() private _filter?: string;

+  @query("ha-list") private _list?: HTMLElement;
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -135,8 +137,7 @@ export class HaFilterDevices extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49 - 4 - 32}px`;
+        this._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
@@ -1,7 +1,8 @@
+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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -31,6 +32,8 @@ export class HaFilterDomains extends LitElement {

  @state() private _filter?: string;

+  @query("ha-list") private _list?: HTMLElement;
+
  protected render() {
    return html`
      <ha-expansion-panel
@@ -62,7 +65,7 @@ export class HaFilterDomains extends LitElement {
                multi
              >
                ${repeat(
-                  this._domains(this.hass.states, this._filter),
+                  this._domains(this.hass.states, this._filter, this.value),
                  (i) => i,
                  (domain) =>
                    html`<ha-check-list-item
@@ -84,7 +87,7 @@ export class HaFilterDomains extends LitElement {
    `;
  }

-  private _domains = memoizeOne((states, filter) => {
+  private _domains = memoizeOne((states, filter, _value) => {
    const domains = new Set<string>();
    Object.keys(states).forEach((entityId) => {
      domains.add(computeDomain(entityId));
@@ -109,8 +112,7 @@ export class HaFilterDomains extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49 - 4 - 32}px`;
+        this._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
@@ -126,19 +128,19 @@ export class HaFilterDomains extends LitElement {
    this.expanded = ev.detail.expanded;
  }

-  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);
-    }
+  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];

    fireEvent(this, "data-table-filter-changed", {
-      value: this.value,
+      value: this.value.length ? this.value : undefined,
      items: undefined,
    });
  }
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, 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,6 +36,8 @@ export class HaFilterEntities extends LitElement {

  @state() private _filter?: string;

+  @query("ha-list") private _list?: HTMLElement;
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -102,8 +104,7 @@ export class HaFilterEntities extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49 - 4 - 32}px`;
+        this._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
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
@@ -42,6 +42,8 @@ export class HaFilterFloorAreas extends LitElement {

  @state() private _shouldRender = false;

+  @query("ha-list-selectable") private _list?: HTMLElement;
+
  public willUpdate(properties: PropertyValues<this>) {
    super.willUpdate(properties);

@@ -207,8 +209,7 @@ export class HaFilterFloorAreas extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list-selectable")!.style.height =
-          `${this.clientHeight - 49}px`;
+        this._list!.style.height = `${this.clientHeight - 49}px`;
      }, 300);
    }
  }
@@ -1,7 +1,8 @@
+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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -34,6 +35,8 @@ export class HaFilterIntegrations extends LitElement {

  @state() private _filter?: string;

+  @query("ha-list") private _list?: HTMLElement;
+
  protected render() {
    return html`
      <ha-expansion-panel
@@ -98,8 +101,7 @@ export class HaFilterIntegrations extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49 - 4 - 32}px`;
+        this._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
@@ -147,9 +149,7 @@ export class HaFilterIntegrations extends LitElement {
        )
  );

-  private _itemSelected(
-    ev: CustomEvent<{ diff: { added: number[]; removed: number[] } }>
-  ) {
+  private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
    const integrations = this._integrations(
      this.hass.localize,
      this._manifests!,
@@ -157,18 +157,16 @@ export class HaFilterIntegrations extends LitElement {
      this.value
    );

-    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);
-    }
+    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];

    fireEvent(this, "data-table-filter-changed", {
-      value: this.value,
+      value: this.value.length ? this.value : undefined,
      items: undefined,
    });
  }
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -41,6 +41,8 @@ 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) =>
@@ -137,8 +139,7 @@ export class HaFilterLabels extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - (49 + 48 + 32 + 4)}px`;
+        this._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
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
@@ -33,6 +33,8 @@ export class HaFilterVoiceAssistants extends LitElement {

  @state() private _shouldRender = false;

+  @query("ha-list") private _list?: HTMLElement;
+
  protected render() {
    return html`
      <ha-expansion-panel
@@ -93,8 +95,7 @@ export class HaFilterVoiceAssistants extends LitElement {
    if (changed.has("expanded") && this.expanded) {
      setTimeout(() => {
        if (!this.expanded) return;
-        this.renderRoot.querySelector("ha-list")!.style.height =
-          `${this.clientHeight - 49}px`;
+        this._list!.style.height = `${this.clientHeight - 49}px`;
      }, 300);
    }
  }
@@ -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, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { LocalizeFunc } from "../../common/translations/localize";
@@ -49,14 +49,15 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {

  @state() private _displayActions?: string[];

+  @query("ha-form") private _form?: HaForm;
+
  public async focus() {
    await this.updateComplete;
-    this.renderRoot.querySelector("ha-form")?.focus();
+    this._form?.focus();
  }

  public reportValidity(): boolean {
-    const form = this.renderRoot.querySelector<HaForm>("ha-form");
-    return form ? form.reportValidity() : true;
+    return this._form ? this._form.reportValidity() : true;
  }

  protected updated(changedProps: PropertyValues<this>): void {
@@ -1,6 +1,6 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
@@ -83,8 +83,10 @@ export class HaForm extends LitElement implements HaFormElement {
    delegatesFocus: true,
  };

+  @query(".root") private _root?: HTMLElement;
+
  public reportValidity(): boolean {
-    const root = this.renderRoot.querySelector(".root");
+    const root = this._root;
    if (!root) {
      return true;
    }
@@ -109,6 +109,8 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  @property({ attribute: "custom-value-label" })
  public customValueLabel?: string;

+  @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
+
  @query(".container") private _containerElement?: HTMLDivElement;

  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -271,6 +273,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
        .selectedSection=${this.selectedSection}
        .searchKeys=${this.searchKeys}
        .customValueLabel=${this.customValueLabel}
+        .noSort=${this.noSort}
      ></ha-picker-combo-box>
    `;
  }
@@ -1,59 +1,77 @@
-// @ts-ignore
-import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
-import { css, html, LitElement, unsafeCSS } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";

@customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {
  protected render() {
-    return html`<header class="mdc-top-app-bar">
-      <div class="mdc-top-app-bar__row">
-        <section
-          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
-          id="navigation"
-        >
+    return html`<header class="header-bar">
+      <div class="row">
+        <section class="section" id="navigation">
          <slot name="navigationIcon"></slot>
-          <span class="mdc-top-app-bar__title">
+          <span class="title">
            <slot name="title"></slot>
          </span>
        </section>
-        <section
-          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
-          id="actions"
-          role="toolbar"
-        >
+        <section class="section end" id="actions" role="toolbar">
          <slot name="actionItems"></slot>
        </section>
      </div>
    </header>`;
  }

-  static get styles() {
-    return [
-      unsafeCSS(topAppBarStyles),
-      css`
-        .mdc-top-app-bar__row {
-          height: var(--header-height);
-        }
-        .mdc-top-app-bar {
-          position: static;
-          color: var(--mdc-theme-on-primary, #fff);
-          padding: var(--header-bar-padding);
-        }
-        .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
-          flex: 1;
-        }
-        .mdc-top-app-bar__section.mdc-top-app-bar__section--align-end {
-          flex: none;
-        }
-        .mdc-top-app-bar__title {
-          font-size: var(--ha-font-size-xl);
-          padding-inline-start: 24px;
-          padding-inline-end: initial;
-        }
-      `,
-    ];
-  }
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .header-bar {
+      box-sizing: border-box;
+      color: var(--app-header-text-color, var(--primary-text-color));
+      background-color: var(
+        --app-header-background-color,
+        var(--primary-background-color)
+      );
+      padding: var(--header-bar-padding);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: var(--header-height);
+    }
+
+    .section {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-width: 0;
+      height: 100%;
+      padding: 0 var(--ha-space-3);
+    }
+
+    #navigation {
+      flex: 1 1 auto;
+    }
+
+    .section.end {
+      flex: none;
+      justify-content: flex-end;
+    }
+
+    .title {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-normal);
+      line-height: var(--header-height);
+      padding-inline-start: var(--ha-space-6);
+    }
+  `;
 }

 declare global {
@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { isUnavailableState, OFF } from "../data/entity/entity";
+import { OFF, UNAVAILABLE, UNKNOWN } from "../data/entity/entity";
 import type { HumidifierEntity } from "../data/humidifier";
 import type { HomeAssistant } from "../types";

@@ -13,9 +13,11 @@ class HaHumidifierState extends LitElement {

  protected render(): TemplateResult {
    const currentStatus = this._computeCurrentStatus();
+    const noValue =
+      this.stateObj.state === UNAVAILABLE || this.stateObj.state === UNKNOWN;

    return html`<div class="target">
-        ${!isUnavailableState(this.stateObj.state)
+        ${!noValue
          ? html`<span class="state-label">
                ${this._localizeState()}
                ${this.stateObj.attributes.mode
@@ -30,7 +32,7 @@ class HaHumidifierState extends LitElement {
          : this._localizeState()}
      </div>

-      ${currentStatus && !isUnavailableState(this.stateObj.state)
+      ${currentStatus && !noValue
        ? html`<div class="current">
            ${this.hass.localize("ui.card.humidifier.currently")}:
            <div class="unit">${currentStatus}</div>
@@ -69,7 +71,10 @@ class HaHumidifierState extends LitElement {
  }

  private _localizeState(): string {
-    if (isUnavailableState(this.stateObj.state)) {
+    if (
+      this.stateObj.state === UNAVAILABLE ||
+      this.stateObj.state === UNKNOWN
+    ) {
      return this.hass.localize(`state.default.${this.stateObj.state}`);
    }

@@ -2,10 +2,11 @@ import "@home-assistant/webawesome/dist/components/divider/divider";
 import { mdiDotsVertical } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { stopPropagation } from "../common/dom/stop_propagation";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-icon-button";
@@ -26,7 +27,9 @@ export interface IconOverflowMenuItem {

@customElement("ha-icon-overflow-menu")
 export class HaIconOverflowMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;

  @property({ type: Array }) public items: IconOverflowMenuItem[] = [];

@@ -44,7 +47,7 @@ export class HaIconOverflowMenu extends LitElement {
              @click=${stopPropagation}
            >
              <ha-icon-button
-                .label=${this.hass.localize("ui.common.overflow_menu")}
+                .label=${this._localize("ui.common.overflow_menu")}
                .path=${mdiDotsVertical}
                slot="trigger"
              ></ha-icon-button>
@@ -14,7 +14,7 @@ class InputHelperText extends LitElement {
    :host {
      display: block;
      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
+      font-size: var(--ha-font-size-s);
      padding-left: 16px;
      padding-right: 16px;
      padding-inline-start: 16px;
@@ -8,10 +8,11 @@ import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { orderCompare } from "../common/string/compare";
-import type { HomeAssistant } from "../types";
+import type { LocalizeFunc } from "../common/translations/localize";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-icon-next";
@@ -46,7 +47,9 @@ declare global {

@customElement("ha-items-display-editor")
 export class HaItemDisplayEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;

  @property({ attribute: false }) public items: DisplayItem[] = [];

@@ -161,7 +164,7 @@ export class HaItemDisplayEditor extends LitElement {
                    ? html`<ha-icon-button
                        .path=${isVisible ? mdiEye : mdiEyeOff}
                        slot="end"
-                        .label=${this.hass.localize(
+                        .label=${this._localize(
                          `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
                          {
                            label: label,
@@ -314,6 +317,7 @@ export class HaItemDisplayEditor extends LitElement {
    // refocus the item after the sort
    setTimeout(async () => {
      await this.updateComplete;
+      // eslint-disable-next-line lit/prefer-query-decorators
      const selectedElement = this.shadowRoot?.querySelector(
        `ha-md-list-item:nth-child(${this._dragIndex! + 1})`
      ) as HTMLElement | null;
@@ -167,6 +167,8 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {

  @property({ type: Boolean, reflect: true }) public clearable = false;

+  @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
+
  @query("lit-virtualizer") public virtualizerElement?: LitVirtualizer;

  @query("ha-input-search") private _searchFieldElement?: HaInputSearch;
@@ -342,7 +344,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
  private _getItems = () => {
    let items = [...(this.getItems(this._search, this._selectedSection) || [])];

-    if (!this.sections?.length) {
+    if (!this.sections?.length && !this.noSort) {
      items = items.sort((entityA, entityB) => {
        const sortLabelA =
          typeof entityA === "string" ? entityA : entityA.sorting_label;
@@ -2,7 +2,7 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
+import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 import type { ColorTempSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-labeled-slider";
@@ -94,10 +94,10 @@ export class HaColorTempSelector extends LitElement {
    }
  );

-  private _valueChanged(ev: CustomEvent) {
+  private _valueChanged(ev: HASSDomEvent<HASSDomEvents["value-changed"]>) {
    ev.stopPropagation();
    fireEvent(this, "value-changed", {
-      value: Number((ev.detail as any).value),
+      value: Number(ev.detail.value),
    });
  }
 }
@@ -188,7 +188,6 @@ export class HaObjectSelector extends LitElement {
    }

    return html`<ha-yaml-editor
-        .hass=${this.hass}
        .readonly=${this.disabled}
        .label=${this.label}
        .required=${this.required}
@@ -199,6 +199,7 @@ export class HaSelectSelector extends LitElement {
          : nothing}

        <ha-generic-picker
+          no-sort
          .hass=${this.hass}
          .helper=${this.helper}
          .disabled=${this.disabled}
@@ -215,6 +216,7 @@ export class HaSelectSelector extends LitElement {
    if (this.selector.select?.custom_value) {
      return html`
        <ha-generic-picker
+          no-sort
          .hass=${this.hass}
          .label=${this.label}
          .helper=${this.helper}
@@ -101,7 +101,6 @@ export class HaTemplateSelector extends LitElement {
        : nothing}
      <ha-code-editor
        mode="jinja2"
-        .hass=${this.hass}
        .value=${this.value}
        .readOnly=${this.disabled}
        .placeholder=${this.placeholder || "{{ ... }}"}
@@ -86,9 +86,6 @@ export class HaServiceControl extends LitElement {

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

-  @property({ attribute: "show-advanced", type: Boolean })
-  public showAdvanced = false;
-
  @property({ attribute: "show-service-id", type: Boolean })
  public showServiceId = false;

@@ -545,7 +542,6 @@ export class HaServiceControl extends LitElement {
        : ""}
    ${shouldRenderServiceDataYaml
      ? html`<ha-yaml-editor
-          .hass=${this.hass}
          .label=${this.hass.localize(
            "ui.components.service-control.action_data"
          )}
@@ -667,10 +663,7 @@ export class HaServiceControl extends LitElement {
        ? this.hass.services[domain][serviceName].description_placeholders
        : undefined;

-    return dataField.selector &&
-      (!dataField.advanced ||
-        this.showAdvanced ||
-        (this._value?.data && this._value.data[dataField.key] !== undefined))
+    return dataField.selector
      ? html`<ha-settings-row .narrow=${this.narrow}>
          ${!showOptional
            ? hasOptional
@@ -844,7 +837,7 @@ export class HaServiceControl extends LitElement {
        if (targetDevices.length) {
          targetDevices = targetDevices.filter((device) =>
            deviceMeetsTargetSelector(
-              this.hass,
+              this.hass.states,
              Object.values(this.hass.entities),
              this.hass.devices[device],
              targetSelector
@@ -30,6 +30,7 @@ export class HaSettingsRow extends LitElement {
        <slot name="prefix"></slot>
        <div
          class="body"
+          part="heading"
          ?two-line=${!this.threeLine && hasDescription}
          ?three-line=${this.threeLine}
        >
@@ -2,7 +2,7 @@ import { mdiStarFourPoints } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";

-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import type {
@@ -52,6 +52,10 @@ export class HaSuggestWithAIButton extends LitElement {
  @state()
  private _minWidth?: string;

+  @query("ha-assist-chip") private _chip?: HTMLElement & {
+    offsetWidth: number;
+  };
+
  private _intervalId?: number;

  protected firstUpdated(_changedProperties: PropertyValues<this>): void {
@@ -109,9 +113,8 @@ export class HaSuggestWithAIButton extends LitElement {
    }

    // Capture current width before changing state
-    const chip = this.shadowRoot?.querySelector("ha-assist-chip");
-    if (chip) {
-      this._minWidth = `${chip.offsetWidth}px`;
+    if (this._chip) {
+      this._minWidth = `${this._chip.offsetWidth}px`;
    }

    // Reset to suggesting state
@@ -486,6 +486,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

    fireEvent(this, "value-changed", { value });

+    // eslint-disable-next-line lit/prefer-query-decorators
    this.shadowRoot
      ?.querySelector(
        `ha-target-picker-item-group[type='${this._newTarget?.type}']`
@@ -1,12 +1,13 @@
 import "@home-assistant/webawesome/dist/components/textarea/textarea";
 import type WaTextarea from "@home-assistant/webawesome/dist/components/textarea/textarea";
 import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
+import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
-import { WaInputMixin, waInputStyles } from "./input/wa-input-mixin";
 import { stopPropagation } from "../common/dom/stop_propagation";
+import { WaInputMixin, waInputStyles } from "./input/wa-input-mixin";

 /**
 * Home Assistant textarea component
@@ -84,6 +85,20 @@ export class HaTextArea extends WaInputMixin(LitElement) {
    this.removeEventListener("keydown", stopPropagation);
  }

+  protected override async firstUpdated(
+    changedProperties: PropertyValues<this>
+  ): Promise<void> {
+    super.firstUpdated(changedProperties);
+    if (this.autofocus) {
+      await this._textarea?.updateComplete;
+      this._textarea?.focus();
+    }
+  }
+
+  public override focus(options?: FocusOptions): void {
+    this._textarea?.focus(options);
+  }
+
  protected render() {
    const hasLabelSlot = this.label
      ? false
@@ -1,13 +1,17 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
-import "./ha-select";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-generic-picker";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";

 const DEFAULT_THEME = "default";

+const SEARCH_KEYS = [{ name: "primary", weight: 1 }];
+
@customElement("ha-theme-picker")
 export class HaThemePicker extends LitElement {
  @property() public value?: string;
@@ -25,52 +29,74 @@ export class HaThemePicker extends LitElement {

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

+  @property({ attribute: "no-theme-label" }) public noThemeLabel?: string;
+
+  private _getThemeOptions = memoizeOne(
+    (
+      themes: Record<string, unknown>,
+      locale: string,
+      includeDefault: boolean
+    ): PickerComboBoxItem[] => {
+      const items: PickerComboBoxItem[] = [];
+
+      if (includeDefault) {
+        items.push({ id: DEFAULT_THEME, primary: "Home Assistant" });
+      }
+
+      const themeNames = Object.keys(themes).sort((a, b) =>
+        caseInsensitiveStringCompare(a, b, locale)
+      );
+      for (const theme of themeNames) {
+        items.push({ id: theme, primary: theme });
+      }
+
+      return items;
+    }
+  );
+
+  private _getItems = () =>
+    this._getThemeOptions(
+      this.hass?.themes.themes || {},
+      this.hass?.locale.language || "en",
+      this.includeDefault
+    );
+
+  private _valueRenderer = (value: string): TemplateResult =>
+    html`<span slot="headline"
+      >${this._getItems().find((i) => i.id === value)?.primary ?? value}</span
+    >`;
+
  protected render(): TemplateResult {
-    const options: HaSelectOption[] = Object.keys(
-      this.hass?.themes.themes || {}
-    ).map((theme) => ({
-      value: theme,
-    }));
-
-    if (this.includeDefault) {
-      options.unshift({
-        value: DEFAULT_THEME,
-        label: "Home Assistant",
-      });
-    }
-
-    if (!this.required) {
-      options.unshift({
-        value: "remove",
-        label: this.hass!.localize("ui.components.theme-picker.no_theme"),
-      });
-    }
-
    return html`
-      <ha-select
-        .label=${this.label ||
-        this.hass!.localize("ui.components.theme-picker.theme")}
-        .value=${this.value}
+      <ha-generic-picker
+        .label=${this.label ??
+        this.hass?.localize("ui.components.theme-picker.theme") ??
+        "Theme"}
+        .placeholder=${this.noThemeLabel ??
+        this.hass?.localize("ui.components.theme-picker.no_theme")}
        .helper=${this.helper}
-        .required=${this.required}
+        .value=${this.value}
+        .valueRenderer=${this._valueRenderer}
+        .getItems=${this._getItems}
+        .searchKeys=${SEARCH_KEYS}
        .disabled=${this.disabled}
-        @selected=${this._changed}
-        .options=${options}
-      ></ha-select>
+        .required=${this.required}
+        @value-changed=${this._changed}
+        popover-placement="bottom"
+      ></ha-generic-picker>
    `;
  }

  static styles = css`
-    ha-select {
+    ha-generic-picker {
      width: 100%;
+      display: block;
    }
  `;

-  private _changed(ev: HaSelectSelectEvent): void {
-    if (!this.hass || ev.detail.value === "") {
-      return;
-    }
-    this.value = ev.detail.value === "remove" ? undefined : ev.detail.value;
+  private _changed(ev: ValueChangedEvent<string | undefined>): void {
+    ev.stopPropagation();
+    this.value = ev.detail.value;
    fireEvent(this, "value-changed", { value: this.value });
  }
 }
@@ -1,24 +1,25 @@
 import { mdiLightbulbOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../types";
+import { customElement, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";

 import "./ha-svg-icon";

@customElement("ha-tip")
 class HaTip extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;

  public render() {
-    if (!this.hass) {
+    if (!this._localize) {
      return nothing;
    }

    return html`
      <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-      <span class="prefix"
-        >${this.hass.localize("ui.panel.config.tips.tip")}</span
-      >
+      <span class="prefix">${this._localize("ui.panel.config.tips.tip")}</span>
      <span class="text"><slot></slot></span>
    `;
  }
@@ -1,64 +1,230 @@
-import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { css } from "lit";
-import { customElement, property } from "lit/decorators";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+
+const PASSIVE_EVENT_OPTIONS = { passive: true } as const;
+
+export const haTopAppBarFixedStyles = css`
+  :host {
+    display: block;
+  }
+
+  .top-app-bar {
+    box-sizing: border-box;
+    color: var(--app-header-text-color, #fff);
+    background-color: var(--app-header-background-color, var(--primary-color));
+    position: fixed;
+    top: 0;
+    inset-inline-end: 0;
+    width: var(--ha-top-app-bar-width, 100%);
+    z-index: 4;
+    padding-top: var(--safe-area-inset-top);
+    padding-right: var(--safe-area-inset-right);
+    transition:
+      width var(--ha-animation-duration-normal) ease,
+      padding-left var(--ha-animation-duration-normal) ease,
+      padding-right var(--ha-animation-duration-normal) ease;
+  }
+
+  :host([narrow]) .top-app-bar {
+    padding-left: var(--safe-area-inset-left);
+  }
+
+  .top-app-bar.scrolled:not(.pane-header) {
+    box-shadow: var(--ha-box-shadow-s);
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--header-height);
+    border-bottom: var(--app-header-border-bottom);
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 0;
+    height: 100%;
+    padding: 0 var(--ha-space-3);
+  }
+
+  #navigation {
+    flex: 1 1 auto;
+  }
+
+  .section.center {
+    flex: 1 1 auto;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .section.end {
+    flex: none;
+    justify-content: flex-end;
+  }
+
+  .title {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--ha-font-size-xl);
+    font-weight: var(--ha-font-weight-normal);
+    line-height: var(--header-height);
+    padding-inline-start: var(--ha-space-6);
+  }
+
+  :host([narrow]) .title {
+    padding-inline-start: var(--ha-space-2);
+  }
+
+  .top-app-bar-fixed-adjust {
+    padding-top: calc(
+      var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
+    );
+    padding-bottom: var(--safe-area-inset-bottom);
+    padding-right: var(--safe-area-inset-right);
+  }
+
+  :host([narrow]) .top-app-bar-fixed-adjust {
+    padding-left: var(--safe-area-inset-left);
+  }
+`;

@customElement("ha-top-app-bar-fixed")
-export class HaTopAppBarFixed extends TopAppBarFixedBase {
+export class HaTopAppBarFixed extends LitElement {
  @property({ type: Boolean, reflect: true }) public narrow = false;

-  static override styles = [
-    styles,
-    css`
-      header {
-        padding-top: var(--safe-area-inset-top);
-      }
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-        transition:
-          width var(--ha-animation-duration-normal) ease,
-          padding-left var(--ha-animation-duration-normal) ease,
-          padding-right var(--ha-animation-duration-normal) ease;
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .mdc-top-app-bar {
-          transition: 1ms;
-        }
-      }
-      .mdc-top-app-bar__title {
-        font-size: var(--ha-font-size-xl);
-        padding-inline-start: var(--ha-space-6);
-        padding-inline-end: initial;
-      }
-      :host([narrow]) .mdc-top-app-bar__title {
-        padding-inline-start: var(--ha-space-2);
-      }
-    `,
-  ];
+  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
+
+  @query(".top-app-bar") protected _barElement!: HTMLElement;
+
+  private _scrollTarget?: HTMLElement | Window;
+
+  @property({ attribute: false })
+  public get scrollTarget(): HTMLElement | Window {
+    return this._scrollTarget || window;
+  }
+
+  public set scrollTarget(value: HTMLElement | Window) {
+    const old = this.scrollTarget;
+    this._unregisterListeners();
+    this._scrollTarget = value;
+    this._updateBarPosition();
+    this.requestUpdate("scrollTarget", old);
+    if (this.isConnected) {
+      this._registerListeners();
+      this._syncScrollState();
+    }
+  }
+
+  protected _isPaneHeader(): boolean {
+    return false;
+  }
+
+  protected render() {
+    return html`${this._renderHeader()}${this._renderContent()}`;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    if (this.hasUpdated) {
+      this._updateBarPosition();
+      this._registerListeners();
+      this._syncScrollState();
+    }
+  }
+
+  protected _renderHeader() {
+    const title = html`<span class="title">
+      <slot name="title"></slot>
+    </span>`;
+    const paneHeader = this._isPaneHeader();
+
+    return html`
+      <header
+        class="top-app-bar ${classMap({
+          "pane-header": paneHeader,
+        })}"
+      >
+        <div class="row">
+          ${paneHeader
+            ? html`<section class="section" id="title">
+                <slot name="navigationIcon"></slot>
+                ${title}
+              </section>`
+            : nothing}
+          <section class="section" id="navigation">
+            ${paneHeader
+              ? nothing
+              : html`<slot name="navigationIcon"></slot> ${this.centerTitle
+                    ? nothing
+                    : title}`}
+          </section>
+          ${!paneHeader && this.centerTitle
+            ? html`<section class="section center">${title}</section>`
+            : nothing}
+          <section class="section end" id="actions" role="toolbar">
+            <slot name="actionItems"></slot>
+          </section>
+        </div>
+      </header>
+    `;
+  }
+
+  protected _renderContent() {
+    return html`<div class="top-app-bar-fixed-adjust">
+      <slot></slot>
+    </div>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    this._updateBarPosition();
+    this._registerListeners();
+    this._syncScrollState();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unregisterListeners();
+  }
+
+  protected _updateBarPosition() {
+    if (this._barElement) {
+      this._barElement.style.position =
+        this.scrollTarget === window ? "" : "absolute";
+    }
+  }
+
+  protected _syncScrollState = () => {
+    const scrollTop =
+      this.scrollTarget instanceof Window
+        ? this.scrollTarget.pageYOffset
+        : this.scrollTarget.scrollTop;
+    this._barElement?.classList.toggle("scrolled", scrollTop > 0);
+  };
+
+  protected _registerListeners() {
+    this.scrollTarget.addEventListener(
+      "scroll",
+      this._syncScrollState,
+      PASSIVE_EVENT_OPTIONS
+    );
+  }
+
+  protected _unregisterListeners() {
+    this.scrollTarget.removeEventListener("scroll", this._syncScrollState);
+  }
+
+  static override styles: CSSResultGroup = haTopAppBarFixedStyles;
 }

 declare global {
@@ -1,37 +0,0 @@
-import { TopAppBarBase } from "@material/mwc-top-app-bar/mwc-top-app-bar-base";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-top-app-bar")
-export class HaTopAppBar extends TopAppBarBase {
-  static override styles = [
-    styles,
-    css`
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-left: var(--safe-area-inset-left);
-        padding-right: var(--safe-area-inset-right);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-top-app-bar": HaTopAppBar;
-  }
-}
@@ -1,136 +1,37 @@
-import {
-  addHasRemoveClass,
-  BaseElement,
-} from "@material/mwc-base/base-element";
-import { supportsPassiveEventListener } from "@material/mwc-base/utils";
-import type { MDCTopAppBarAdapter } from "@material/top-app-bar/adapter";
-import { strings } from "@material/top-app-bar/constants";
-// eslint-disable-next-line import-x/no-named-as-default
-import MDCFixedTopAppBarFoundation from "@material/top-app-bar/fixed/foundation";
 import type { PropertyValues } from "lit";
 import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { haStyleScrollbar } from "../resources/styles";
+import {
+  HaTopAppBarFixed,
+  haTopAppBarFixedStyles,
+} from "./ha-top-app-bar-fixed";

-export const passiveEventOptionsIfSupported = supportsPassiveEventListener
-  ? { passive: true }
-  : undefined;
+const PASSIVE_EVENT_OPTIONS = { passive: true } as const;

@customElement("ha-two-pane-top-app-bar-fixed")
-export class TopAppBarBaseBase extends BaseElement {
-  protected override mdcFoundation!: MDCFixedTopAppBarFoundation;
-
-  protected override mdcFoundationClass = MDCFixedTopAppBarFoundation;
-
-  @query(".mdc-top-app-bar") protected mdcRoot!: HTMLElement;
-
-  // _actionItemsSlot should have type HTMLSlotElement, but when TypeScript's
-  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
-  // be emitted into the runtime, which will cause an "HTMLSlotElement is
-  // undefined" error in browsers that don't define it (e.g. IE11).
-  @query('slot[name="actionItems"]') protected _actionItemsSlot!: HTMLElement;
-
-  protected _scrollTarget!: HTMLElement | Window;
-
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
-
-  @property({ type: Boolean, reflect: true }) prominent = false;
-
-  @property({ type: Boolean, reflect: true }) dense = false;
-
+export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
  @property({ type: Boolean }) pane = false;

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

-  @query(".content") private _contentElement!: HTMLElement;
+  @query(".content") private _contentElement?: HTMLElement;

  @query(".pane .ha-scrollbar") private _paneElement?: HTMLElement;

-  @property({ attribute: false })
-  get scrollTarget() {
-    return this._scrollTarget || window;
+  protected override _isPaneHeader(): boolean {
+    return this.pane;
  }

-  set scrollTarget(value) {
-    this.unregisterListeners();
-    const old = this.scrollTarget;
-    this._scrollTarget = value;
-    this.updateRootPosition();
-    this.requestUpdate("scrollTarget", old);
-    this.registerListeners();
-  }
-
-  protected updateRootPosition() {
-    if (this.mdcRoot) {
-      const windowScroller = this.scrollTarget === window;
-      // we add support for top-app-bar's tied to an element scroller.
-      this.mdcRoot.style.position = windowScroller ? "" : "absolute";
-    }
-  }
-
-  protected barClasses() {
-    return {
-      "mdc-top-app-bar--dense": this.dense,
-      "mdc-top-app-bar--prominent": this.prominent,
-      "center-title": this.centerTitle,
-      "mdc-top-app-bar--fixed": true,
-      "mdc-top-app-bar--pane": this.pane,
-    };
-  }
-
-  protected contentClasses() {
-    return {
-      "mdc-top-app-bar--fixed-adjust": !this.dense && !this.prominent,
-      "mdc-top-app-bar--dense-fixed-adjust": this.dense && !this.prominent,
-      "mdc-top-app-bar--prominent-fixed-adjust": !this.dense && this.prominent,
-      "mdc-top-app-bar--dense-prominent-fixed-adjust":
-        this.dense && this.prominent,
-      "mdc-top-app-bar--pane": this.pane,
-    };
-  }
-
-  protected override render() {
-    const title = html`<span class="mdc-top-app-bar__title"
-      ><slot name="title"></slot
-    ></span>`;
+  protected override _renderContent() {
    return html`
-      <header class="mdc-top-app-bar ${classMap(this.barClasses())}">
-        <div class="mdc-top-app-bar__row">
-          ${this.pane
-            ? html`<section
-                class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
-                id="title"
-              >
-                <slot
-                  name="navigationIcon"
-                  @click=${this.handleNavigationClick}
-                ></slot>
-                ${title}
-              </section>`
-            : nothing}
-          <section class="mdc-top-app-bar__section" id="navigation">
-            ${this.pane
-              ? nothing
-              : html`<slot
-                    name="navigationIcon"
-                    @click=${this.handleNavigationClick}
-                  ></slot
-                  >${title}`}
-          </section>
-          <section
-            class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
-            id="actions"
-            role="toolbar"
-          >
-            <slot name="actionItems"></slot>
-          </section>
-        </div>
-      </header>
-      <div class=${classMap(this.contentClasses())}>
+      <div
+        class=${classMap({
+          "top-app-bar-fixed-adjust": true,
+          "top-app-bar-fixed-adjust--pane": this.pane,
+        })}
+      >
        ${this.pane
          ? html`<div class="pane">
              <div class="shadow-container"></div>
@@ -154,117 +55,57 @@ export class TopAppBarBaseBase extends BaseElement {
    `;
  }

-  protected updated(changedProperties: PropertyValues<this>) {
+  protected override willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("pane") && this.hasUpdated) {
+      this._unregisterListeners();
+    }
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>) {
    super.updated(changedProperties);
    if (
      changedProperties.has("pane") &&
      changedProperties.get("pane") !== undefined
    ) {
-      this.unregisterListeners();
-      this.registerListeners();
+      this._registerListeners();
+      this._syncScrollState();
    }
  }

-  protected createAdapter(): MDCTopAppBarAdapter {
-    return {
-      ...addHasRemoveClass(this.mdcRoot),
-      setStyle: (prprty: string, value: string) =>
-        this.mdcRoot.style.setProperty(prprty, value),
-      getTopAppBarHeight: () => this.mdcRoot.clientHeight,
-      notifyNavigationIconClicked: () => {
-        this.dispatchEvent(
-          new Event(strings.NAVIGATION_EVENT, {
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-      },
-      getViewportScrollY: () =>
-        this.scrollTarget instanceof Window
-          ? this.scrollTarget.pageYOffset
-          : this.scrollTarget.scrollTop,
-      getTotalActionItems: () =>
-        (this._actionItemsSlot as HTMLSlotElement).assignedNodes({
-          flatten: true,
-        }).length,
-    };
-  }
-
-  protected handleTargetScroll = () => {
-    this.mdcFoundation.handleTargetScroll();
+  private _handlePaneScroll = (ev: Event) => {
+    const target = ev.currentTarget as HTMLElement;
+    target.parentElement?.classList.toggle("scrolled", target.scrollTop > 0);
  };

-  protected handlePaneScroll = (ev) => {
-    if (ev.target.scrollTop > 0) {
-      ev.target.parentElement.classList.add("scrolled");
-    } else {
-      ev.target.parentElement.classList.remove("scrolled");
-    }
-  };
-
-  protected handleNavigationClick = () => {
-    this.mdcFoundation.handleNavigationClick();
-  };
-
-  protected registerListeners() {
+  protected override _registerListeners() {
    if (this.pane) {
-      this._paneElement!.addEventListener(
+      this._paneElement?.addEventListener(
        "scroll",
-        this.handlePaneScroll,
-        passiveEventOptionsIfSupported
+        this._handlePaneScroll,
+        PASSIVE_EVENT_OPTIONS
      );
-      this._contentElement.addEventListener(
+      this._contentElement?.addEventListener(
        "scroll",
-        this.handlePaneScroll,
-        passiveEventOptionsIfSupported
+        this._handlePaneScroll,
+        PASSIVE_EVENT_OPTIONS
      );
      return;
    }
-    this.scrollTarget.addEventListener(
-      "scroll",
-      this.handleTargetScroll,
-      passiveEventOptionsIfSupported
-    );
+
+    super._registerListeners();
  }

-  protected unregisterListeners() {
-    this._paneElement?.removeEventListener("scroll", this.handlePaneScroll);
-    this._contentElement.removeEventListener("scroll", this.handlePaneScroll);
-    this.scrollTarget.removeEventListener("scroll", this.handleTargetScroll);
-  }
-
-  protected override firstUpdated() {
-    super.firstUpdated();
-    this.updateRootPosition();
-    this.registerListeners();
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unregisterListeners();
+  protected override _unregisterListeners() {
+    this._paneElement?.removeEventListener("scroll", this._handlePaneScroll);
+    this._contentElement?.removeEventListener("scroll", this._handlePaneScroll);
+    super._unregisterListeners();
  }

  static override styles = [
-    styles,
+    haTopAppBarFixedStyles,
    haStyleScrollbar,
    css`
-      header {
-        padding-top: var(--safe-area-inset-top);
-      }
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
-      }
      .shadow-container {
        position: absolute;
        top: calc(-1 * var(--header-height));
@@ -273,39 +114,11 @@ export class TopAppBarBaseBase extends BaseElement {
        z-index: 1;
        transition: box-shadow 200ms linear;
      }
+
      .scrolled .shadow-container {
-        box-shadow: var(
-          --mdc-top-app-bar-fixed-box-shadow,
-          0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-          0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-        );
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-        transition:
-          width var(--ha-animation-duration-normal) ease,
-          padding-left var(--ha-animation-duration-normal) ease,
-          padding-right var(--ha-animation-duration-normal) ease;
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .mdc-top-app-bar {
-          transition: 1ms;
-        }
-      }
-      .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
-        box-shadow: none;
+        box-shadow: var(--ha-box-shadow-m);
      }
+
      #title {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
@@ -314,7 +127,8 @@ export class TopAppBarBaseBase extends BaseElement {
        flex: 0 0 var(--sidepane-width, 250px);
        width: var(--sidepane-width, 250px);
      }
-      div.mdc-top-app-bar--pane {
+
+      .top-app-bar-fixed-adjust--pane {
        display: flex;
        height: calc(
          100vh - var(--header-height, 0px) - var(
@@ -323,6 +137,7 @@ export class TopAppBarBaseBase extends BaseElement {
            ) - var(--safe-area-inset-bottom, 0px)
        );
      }
+
      .pane {
        border-right: 1px solid var(--divider-color);
        border-inline-end: 1px solid var(--divider-color);
@@ -334,36 +149,36 @@ export class TopAppBarBaseBase extends BaseElement {
        flex-direction: column;
        position: relative;
      }
+
      .pane .ha-scrollbar {
        flex: 1;
      }
+
      .pane .footer {
        border-top: 1px solid var(--divider-color);
        padding-bottom: 8px;
      }
+
      .main {
        min-height: 100%;
      }
-      .mdc-top-app-bar--pane .main {
+
+      .top-app-bar-fixed-adjust--pane .main {
        position: relative;
        flex: 1;
        height: 100%;
      }
-      .mdc-top-app-bar--pane .content {
+
+      .top-app-bar-fixed-adjust--pane .content {
        height: 100%;
        overflow: auto;
      }
-      .mdc-top-app-bar__title {
-        font-size: var(--ha-font-size-xl);
-        padding-inline-start: 24px;
-        padding-inline-end: initial;
-      }
    `,
  ];
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-two-pane-top-app-bar-fixed": TopAppBarBaseBase;
+    "ha-two-pane-top-app-bar-fixed": HaTwoPaneTopAppBarFixed;
  }
 }
@@ -3,14 +3,16 @@ import { DEFAULT_SCHEMA, dump, load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import type { ContextType } from "@lit/context";
+import { consume } from "@lit/context";
 import { fireEvent } from "../common/dom/fire_event";
 import { copyToClipboard } from "../common/util/copy-clipboard";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
 import "./ha-button";
 import "./ha-code-editor";
 import type { HaCodeEditor } from "./ha-code-editor";
+import { internationalizationContext } from "../data/context";

 const isEmpty = (obj: Record<string, unknown>): boolean => {
  if (typeof obj !== "object" || obj === null) {
@@ -26,8 +28,6 @@ const isEmpty = (obj: Record<string, unknown>): boolean => {

@customElement("ha-yaml-editor")
 export class HaYamlEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
  @property() public value?: any;

  @property({ attribute: false }) public yamlSchema: Schema = DEFAULT_SCHEMA;
@@ -59,6 +59,10 @@ export class HaYamlEditor extends LitElement {

  @state() private _yaml = "";

+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
+
  @query("ha-code-editor") _codeEditor?: HaCodeEditor;

  public setValue(value): void {
@@ -112,7 +116,6 @@ export class HaYamlEditor extends LitElement {
        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
        : nothing}
      <ha-code-editor
-        .hass=${this.hass}
        .value=${this._yaml}
        .readOnly=${this.readOnly}
        .disableFullscreen=${this.disableFullscreen}
@@ -132,7 +135,7 @@ export class HaYamlEditor extends LitElement {
              ${this.copyClipboard
                ? html`
                    <ha-button appearance="plain" @click=${this._copyYaml}>
-                      ${this.hass.localize(
+                      ${this._i18n!.localize(
                        "ui.components.yaml-editor.copy_to_clipboard"
                      )}
                    </ha-button>
@@ -163,7 +166,7 @@ export class HaYamlEditor extends LitElement {
        // Invalid YAML
        isValid = false;
        yamlError = err;
-        errorMsg = `${this.hass.localize("ui.components.yaml-editor.error", { reason: err.reason })}${err.mark ? ` (${this.hass.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
+        errorMsg = `${this._i18n!.localize("ui.components.yaml-editor.error", { reason: err.reason })}${err.mark ? ` (${this._i18n!.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
      }
    } else {
      parsed = {};
@@ -201,7 +204,7 @@ export class HaYamlEditor extends LitElement {
    if (this.yaml) {
      await copyToClipboard(this.yaml);
      showToast(this, {
-        message: this.hass.localize("ui.common.copied_clipboard"),
+        message: this._i18n!.localize("ui.common.copied_clipboard"),
      });
    }
  }
@@ -2,7 +2,7 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiDeleteOutline, mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../common/dom/fire_event";
 import { internationalizationContext } from "../../data/context";
@@ -67,6 +67,8 @@ class HaInputMulti extends LitElement {
  @consume({ context: internationalizationContext, subscribe: true })
  private _i18n?: ContextType<typeof internationalizationContext>;

+  @query("ha-input[data-last]") private _lastInput?: HaInput;
+
  protected render() {
    return html`
      <ha-sortable
@@ -163,10 +165,7 @@ class HaInputMulti extends LitElement {
    const items = [...this._items, ""];
    this._fireChanged(items);
    await this.updateComplete;
-    const field = this.shadowRoot?.querySelector(`ha-input[data-last]`) as
-      | HaInput
-      | undefined;
-    field?.focus();
+    this._lastInput?.focus();
  }

  private async _editItem(ev: Event) {
@@ -1,8 +1,8 @@
 import { type LitElement, css } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { Constructor } from "../../types";
 import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
+import type { Constructor } from "../../types";

 /**
 * Minimal interface for the inner wa-input / wa-textarea element.
@@ -339,7 +339,7 @@ export const waInputStyles = css`
    min-height: var(--ha-space-5);
    margin-block-start: 0;
    margin-inline-start: var(--ha-space-3);
-    font-size: var(--ha-font-size-xs);
+    font-size: var(--ha-font-size-s);
    display: flex;
    align-items: center;
    color: var(--ha-color-text-secondary);
@@ -1,6 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import "../ha-ripple";
 import { HaListItemBase } from "./ha-list-item-base";
@@ -34,8 +34,10 @@ export class HaListItemButton extends HaListItemBase {

  @property({ type: String }) public download?: string;

+  @query("#item") private _item?: HTMLElement;
+
  public override activate(): void {
-    this.renderRoot.querySelector<HTMLElement>("#item")?.click();
+    this._item?.click();
  }

  protected _renderBase(inner: TemplateResult): TemplateResult {
@@ -130,10 +130,6 @@ export class HaRowItem extends LitElement {
      color: var(--primary-text-color);
      font-size: var(--ha-font-size-m);
      line-height: var(--ha-line-height-normal);
-      --ha-row-item-padding-block: var(--ha-space-3);
-      --ha-row-item-padding-inline: var(--ha-space-4);
-      --ha-row-item-gap: var(--ha-space-4);
-      --ha-row-item-min-height: 48px;
    }
    :host([disabled]) {
      color: var(--disabled-text-color);
@@ -144,10 +140,10 @@ export class HaRowItem extends LitElement {
      display: flex;
      flex-direction: row;
      align-items: center;
-      gap: var(--ha-row-item-gap);
-      padding-block: var(--ha-row-item-padding-block);
-      padding-inline: var(--ha-row-item-padding-inline);
-      min-height: var(--ha-row-item-min-height);
+      gap: var(--ha-row-item-gap, var(--ha-space-4));
+      padding-block: var(--ha-row-item-padding-block, var(--ha-space-3));
+      padding-inline: var(--ha-row-item-padding-inline, var(--ha-space-4));
+      min-height: var(--ha-row-item-min-height, 48px);
      box-sizing: border-box;
    }
    .content {
@@ -292,14 +292,12 @@ export class HaListBase extends LitElement {
  static styles: CSSResultGroup = css`
    :host {
      display: block;
-      --ha-list-gap: 0;
-      --ha-list-padding: 0;
    }
    .base {
      display: flex;
      flex-direction: column;
-      gap: var(--ha-list-gap);
-      padding: var(--ha-list-padding);
+      gap: var(--ha-list-gap, 0);
+      padding: var(--ha-list-padding, 0);
      margin: 0;
      list-style: none;
    }
@@ -121,15 +121,15 @@ export class HaListSelectable extends HaListBase {

  public updateListItems() {
    super.updateListItems();
-    this._syncItemSelectedState();
+    this._syncItemSelectedState(true);
  }

  private _sortedSelectedIndices(): number[] {
    return [...this._selectedIndices!].sort((a, b) => a - b);
  }

-  private _syncItemSelectedState() {
-    if (!this._selectedIndices) {
+  private _syncItemSelectedState(reset = false): void {
+    if (!this._selectedIndices || reset) {
      this._selectedIndices = new Set<number>();
      this.items.forEach((item, i) => {
        const opt = item as HaListItemOption;
@@ -12,7 +12,7 @@ import type {
 } from "leaflet";
 import type { PropertyValues } from "lit";
 import { css, ReactiveElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { formatDateTime } from "../../common/datetime/format_date_time";
 import {
  formatTimeWeekday,
@@ -105,6 +105,8 @@ export class HaMap extends ReactiveElement {

  @state() private _loaded = false;

+  @query("#map") private _mapElement?: HTMLElement;
+
  public leafletMap?: Map;

  private Leaflet?: LeafletModuleType;
@@ -235,11 +237,11 @@ export class HaMap extends ReactiveElement {
  }

  private _updateMapStyle(): void {
-    const map = this.renderRoot.querySelector("#map");
-    map!.classList.toggle("clickable", this.clickable);
-    map!.classList.toggle("dark", this._darkMode);
-    map!.classList.toggle("forced-dark", this.themeMode === "dark");
-    map!.classList.toggle("forced-light", this.themeMode === "light");
+    const map = this._mapElement!;
+    map.classList.toggle("clickable", this.clickable);
+    map.classList.toggle("dark", this._darkMode);
+    map.classList.toggle("forced-dark", this.themeMode === "dark");
+    map.classList.toggle("forced-light", this.themeMode === "light");
  }

  private _loading = false;
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .15.0
 .16.0