Emphasize dirty form guideline

Drop dependencies that are no longer referenced anywhere in the codebase:

- @material/mwc-base: declared directly but never imported; still pulled
  in transitively by the other @material/mwc-* packages, so the explicit
  declaration was redundant.
- @types/mocha: the test runner is Vitest (test files import describe/it/
  expect from "vitest"); no Mocha globals or namespace are used.
- @types/webspeechapi: no Web Speech API usage in the codebase, and the
  modern TypeScript lib.dom already ships these definitions.
- @types/babel__plugin-transform-runtime: the plugin is only referenced by
  string name in the Babel config, never imported as a typed module, so the
  type stub is unused.

Co-authored-by: MindFreeze <noreply@anthropic.com>

.github/workflows/codeql-analysis.yml

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

.github/workflows/lock.yml

@@ -13,13 +13,11 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"
-          issue-lock-inactive-days: "30"
-          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-inactive-days: "30"
           issue-lock-reason: ""
-          pr-lock-inactive-days: "1"
-          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-inactive-days: "1"
           pr-lock-reason: ""

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
+        uses: home-assistant/actions/helpers/verify-version@868e6cb4607727d764341a158d98872cd63fa658 # master
 
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0

.github/workflows/stale.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.nvmrc

@@ -1 +1 @@
-24.15.0
+24.16.0

.yarnrc.yml

@@ -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

gallery/src/ha-demo-options.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";

gallery/src/ha-gallery.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
@@ -11,6 +10,7 @@ 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";
@@ -84,7 +84,7 @@ class HaGallery extends LitElement {
         <div class="drawer-title">Home Assistant Design</div>
         <div class="sidebar">${sidebar}</div>
         <div slot="appContent" class="app-content">
-          <mwc-top-app-bar-fixed>
+          <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`
@@ -227,11 +227,12 @@ class HaGallery extends LitElement {
         -webkit-user-select: initial;
         -moz-user-select: initial;
         --ha-sidebar-width: 256px;
+        --header-height: 64px;
       }
 
       .sidebar {
         box-sizing: border-box;
-        max-height: calc(100vh - 64px);
+        max-height: calc(100vh - var(--header-height));
         overflow-y: auto;
         padding: 4px;
       }
@@ -243,7 +244,7 @@ class HaGallery extends LitElement {
         display: flex;
         font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-medium);
-        min-height: 64px;
+        min-height: var(--header-height);
         padding: 0 16px;
       }
 
@@ -277,6 +278,10 @@ class HaGallery extends LitElement {
         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;
       }

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

@@ -13,7 +13,7 @@ Our dialogs are based on the latest version of Material Design. Please note that
 
 - Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
 - The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
-- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
+- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user **has made changes to**. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
 - Keep the labels short, for example `Save`, `Delete`, `Enable`.

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

@@ -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>

netlify.toml

@@ -1,3 +1,2 @@
 [build.environment]
-  YARN_VERSION = "1.22.11"
   NODE_OPTIONS = "--max_old_space_size=6144"

package.json

@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.2",
+    "@babel/runtime": "7.29.7",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.2",
     "@codemirror/commands": "6.10.3",
@@ -38,45 +38,40 @@
     "@codemirror/search": "6.7.0",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.43.0",
-    "@date-fns/tz": "1.4.1",
+    "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.5",
-    "@formatjs/intl-displaynames": "7.3.7",
-    "@formatjs/intl-durationformat": "0.10.11",
-    "@formatjs/intl-getcanonicallocales": "3.2.8",
-    "@formatjs/intl-listformat": "8.3.7",
-    "@formatjs/intl-locale": "5.3.7",
-    "@formatjs/intl-numberformat": "9.3.8",
-    "@formatjs/intl-pluralrules": "6.3.7",
-    "@formatjs/intl-relativetimeformat": "12.3.7",
+    "@formatjs/intl-datetimeformat": "7.4.7",
+    "@formatjs/intl-displaynames": "7.3.9",
+    "@formatjs/intl-durationformat": "0.10.13",
+    "@formatjs/intl-getcanonicallocales": "3.2.9",
+    "@formatjs/intl-listformat": "8.3.9",
+    "@formatjs/intl-locale": "5.3.8",
+    "@formatjs/intl-numberformat": "9.3.10",
+    "@formatjs/intl-pluralrules": "6.3.9",
+    "@formatjs/intl-relativetimeformat": "12.3.9",
     "@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-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",
+    "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.0.0",
-    "@tsparticles/preset-links": "4.0.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",
@@ -87,19 +82,19 @@
     "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.6",
+    "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",
@@ -107,7 +102,7 @@
     "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",
@@ -119,7 +114,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",
@@ -130,21 +125,20 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.7",
     "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.5",
-    "@bundle-stats/plugin-webpack-filter": "4.22.1",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@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.11",
-    "@rspack/core": "2.0.3",
+    "@rsdoctor/rspack-plugin": "1.5.12",
+    "@rspack/core": "2.0.5",
     "@rspack/dev-server": "2.0.1",
-    "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
@@ -156,17 +150,15 @@
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
-    "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.6",
+    "@vitest/coverage-v8": "4.1.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",
@@ -176,7 +168,7 @@
     "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",
@@ -187,8 +179,8 @@
     "husky": "9.1.7",
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
-    "license-checker-rseidelsohn": "4.4.2",
-    "lint-staged": "17.0.4",
+    "license-checker-rseidelsohn": "5.0.1",
+    "lint-staged": "17.0.5",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -199,12 +191,12 @@
     "serve": "14.2.6",
     "sinon": "22.0.0",
     "tar": "7.5.15",
-    "terser-webpack-plugin": "5.6.0",
+    "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.3",
+    "typescript-eslint": "8.60.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.6",
+    "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"
@@ -220,8 +212,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"
   }
 }

pyproject.toml

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

renovate.json

@@ -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"],

src/common/array/combinations.ts

@@ -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(

src/common/const.ts

@@ -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";
 

src/common/datetime/resolve-time-zone.ts

@@ -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";

src/common/decorators/consume-context-entry.ts

@@ -1,8 +1,17 @@
 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 { ensureArray } from "../array/ensure-array";
 import { transform } from "./transform";
 
 interface ConsumeEntryConfig {
@@ -18,6 +27,28 @@ const resolveAtPath = (host: unknown, path: readonly string[]) => {
   return cur;
 };
 
+/** Reuse `previous` when every entry still references the same `HassEntity`. */
+export const preserveUnchangedEntityStatesRecord = <
+  T extends Record<string, HassEntity | undefined>,
+>(
+  previous: T | undefined,
+  next: T
+): T => {
+  if (!previous) {
+    return next;
+  }
+  const nextKeys = Object.keys(next);
+  if (Object.keys(previous).length !== nextKeys.length) {
+    return next;
+  }
+  for (const key of nextKeys) {
+    if (previous[key] !== next[key]) {
+      return next;
+    }
+  }
+  return previous;
+};
+
 const composeDecorator = <T, V>(
   context: Parameters<typeof consume>[0]["context"],
   watchKey: string | undefined,
@@ -55,27 +86,52 @@ export const consumeEntityState = (config: ConsumeEntryConfig) =>
   );
 
 /**
- * Like {@link consumeEntityState} but for an array of entity IDs at
- * `entityIdPath`. Resolves to a `HassEntity[]` containing one entry per
- * currently-available entity (missing entities and non-string IDs are
- * filtered out; original order is preserved).
+ * Like {@link consumeEntityState} but for one or more entity IDs at
+ * `entityIdPath` (a string or string array; wrapped with {@link ensureArray}).
+ * Resolves to a record keyed by entity ID containing the currently-available
+ * entities (missing entities and non-string IDs are filtered out). Returns the
+ * previous record when none of the selected entities changed.
  */
-export const consumeEntityStates = (config: ConsumeEntryConfig) =>
-  composeDecorator<HassEntities, HassEntity[]>(
-    statesContext,
-    config.entityIdPath[0],
-    function (states) {
-      const ids = resolveAtPath(this, config.entityIdPath);
-      if (!Array.isArray(ids) || !states) return undefined;
-      const result: HassEntity[] = [];
-      for (const id of ids) {
-        if (typeof id !== "string") continue;
-        const state = states[id];
-        if (state !== undefined) result.push(state);
-      }
-      return result;
+export const consumeEntityStates = (config: ConsumeEntryConfig) => {
+  const watchKey = config.entityIdPath[0];
+  const buildRecord = function (this: unknown, states: HassEntities) {
+    const ids = ensureArray(resolveAtPath(this, config.entityIdPath));
+    if (!ids || !states) return undefined;
+    const result: Record<string, HassEntity> = {};
+    for (const id of ids) {
+      if (typeof id !== "string") continue;
+      const state = states[id];
+      if (state !== undefined) result[id] = state;
     }
-  );
+    return result;
+  };
+
+  return (proto: unknown, propertyKey: string) => {
+    const key = String(propertyKey);
+    const transformDec = transform<
+      HassEntities,
+      Record<string, HassEntity> | undefined
+    >({
+      transformer: function (this: unknown, states: HassEntities) {
+        const next = buildRecord.call(this, states);
+        if (next === undefined) {
+          return undefined;
+        }
+        const previous = (this as Record<string, unknown>)[
+          `__transform_${key}`
+        ] as Record<string, HassEntity> | undefined;
+        return preserveUnchangedEntityStatesRecord(previous, next);
+      },
+      watch: watchKey ? [watchKey] : [],
+    });
+    const consumeDec = consume<any>({
+      context: statesContext,
+      subscribe: true,
+    });
+    transformDec(proto as never, propertyKey);
+    consumeDec(proto as never, propertyKey);
+  };
+};
 
 /**
  * Consumes `entitiesContext` and narrows it to the
@@ -91,3 +147,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
+  );

src/common/entity/compute_entity_unit_display.ts

@@ -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 ?? "";
 };

src/common/entity/get_states.ts

@@ -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) {

src/common/entity/group_entities.ts

@@ -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]);

src/common/entity/state_active.ts

@@ -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;
   }
 

src/common/string/truncate-with-ellipsis.ts

@@ -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}`;
+};

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

@@ -9,7 +9,7 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
  *
  * @summary
  * Small status indicator dot used in automation/condition rows to surface the
- * live evaluation result. Renders an optional tooltip with details on hover.
+ * 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.
@@ -56,31 +56,15 @@ export class HaAutomationRowLiveTest extends LitElement {
       background-color: var(--ha-color-fill-success-loud-resting);
       border-color: var(--ha-color-fill-success-loud-resting);
     }
-    :host([state="pass"]) #indicator:hover {
-      background-color: var(--ha-color-fill-success-loud-hover);
-      border-color: var(--ha-color-fill-success-loud-hover);
-    }
     :host([state="fail"]) #indicator {
       border-color: var(--ha-color-fill-warning-loud-resting);
     }
-    :host([state="fail"]) #indicator:hover {
-      background-color: var(--ha-color-fill-warning-loud-hover);
-      border-color: var(--ha-color-fill-warning-loud-hover);
-    }
     :host([state="invalid"]) #indicator {
       border-color: var(--ha-color-fill-danger-loud-resting);
     }
-    :host([state="invalid"]) #indicator:hover {
-      background-color: var(--ha-color-fill-danger-loud-hover);
-      border-color: var(--ha-color-fill-danger-loud-hover);
-    }
     :host([state="unknown"]) #indicator {
       border-color: var(--ha-color-fill-neutral-loud-resting);
     }
-    :host([state="unknown"]) #indicator:hover {
-      background-color: var(--ha-color-fill-neutral-loud-hover);
-      border-color: var(--ha-color-fill-neutral-loud-hover);
-    }
   `;
 }
 

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

@@ -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;

src/components/buttons/ha-progress-button.ts

@@ -116,7 +116,7 @@ export class HaProgressButton extends LitElement {
       visibility: hidden;
     }
 
-    ha-svg-icon {
+    :host([appearance="brand"]) ha-svg-icon {
       color: var(--white-color);
     }
   `;

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

@@ -14,6 +14,7 @@ import type {
   ECElementEvent,
   LegendComponentOption,
   LineSeriesOption,
+  TooltipOption,
   XAXisOption,
   YAXisOption,
 } from "echarts/types/dist/shared";
@@ -29,22 +30,59 @@ 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,
+} from "../../resources/echarts/echarts";
 import type { HomeAssistant, HomeAssistantUI } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";
+import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
 
+type RawSeriesOption = Exclude<
+  NonNullable<ECOption["series"]>,
+  readonly unknown[]
+>;
+
+const toEChartsFormatter = (
+  fn: ReturnType<typeof wrapLitTooltipFormatter>
+): 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 +104,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;
 
@@ -614,7 +652,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];
@@ -634,7 +672,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
@@ -757,22 +795,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) {
@@ -956,30 +1006,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()
@@ -994,8 +1030,8 @@ export class HaChartBase extends LitElement {
                 ? xAxis.max
                 : undefined
             : undefined;
-          return {
-            ...s,
+          result = {
+            ...result,
             sampling: undefined,
             data: downSampleLineData(
               data as LineSeriesOption["data"],
@@ -1003,11 +1039,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"];
   }
@@ -1344,8 +1379,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 || []

src/components/chart/ha-chart-tooltip-marker.ts

@@ -0,0 +1,41 @@
+import type { PropertyValues } from "lit";
+import { css, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-chart-tooltip-marker")
+class HaChartTooltipMarker extends LitElement {
+  @property() public color = "";
+
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
+  protected willUpdate(changed: PropertyValues) {
+    if (changed.has("color")) {
+      this.style.backgroundColor = this.color;
+    }
+  }
+
+  protected render() {
+    return nothing;
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      margin-inline-end: 4px;
+      margin-inline-start: initial;
+      border-radius: 10px;
+      width: 10px;
+      height: 10px;
+      vertical-align: middle;
+    }
+    :host([rtl]) {
+      direction: rtl;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-chart-tooltip-marker": HaChartTooltipMarker;
+  }
+}

src/components/chart/ha-network-graph.ts

@@ -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,

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

@@ -11,10 +11,10 @@ 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 "./ha-chart-tooltip-marker";
 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,16 @@ 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`<ha-chart-tooltip-marker
+          .color=${String(params.color ?? "")}
+        ></ha-chart-tooltip-marker>
+        ${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;
   };

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

@@ -5,10 +5,9 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 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 { HomeAssistant } from "../../types";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import "./ha-chart-base";
+import "./ha-chart-tooltip-marker";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
 let SunburstChart: typeof import("echarts/lib/chart/sunburst/install");
@@ -25,8 +24,6 @@ export interface SunburstNode {
 
 @customElement("ha-sunburst-chart")
 export class HaSunburstChart extends LitElement {
-  public hass!: HomeAssistant;
-
   @property({ attribute: false }) public data?: SunburstNode;
 
   @property({ attribute: false }) public valueFormatter?: (
@@ -50,13 +47,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 +68,10 @@ 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`<ha-chart-tooltip-marker
+        .color=${String(params.color ?? "")}
+      ></ha-chart-tooltip-marker>
+      ${data.name}<br />${value}`;
   };
 
   private _createData = memoizeOne(

src/components/chart/lit-tooltip-formatter.ts

@@ -0,0 +1,41 @@
+import { nothing, render } from "lit";
+import type { LitTooltipFormatter } from "../../resources/echarts/echarts";
+
+type WrappedTooltipFormatter = (
+  params: unknown,
+  ticket?: string
+) => HTMLElement | null;
+
+export type { WrappedTooltipFormatter };
+
+const litTooltipFormatterCache = new WeakMap<
+  LitTooltipFormatter | WrappedTooltipFormatter,
+  WrappedTooltipFormatter
+>();
+
+export const wrapLitTooltipFormatter = (
+  fn: LitTooltipFormatter | WrappedTooltipFormatter
+): 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 as LitTooltipFormatter)(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;
+};

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

@@ -1,5 +1,5 @@
-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 type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
@@ -12,8 +12,9 @@ import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
+import "./ha-chart-tooltip-marker";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-import type { ECOption } from "../../resources/echarts/echarts";
+import type { HaECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
   getNumberFormatOptions,
@@ -24,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) => {
@@ -108,7 +108,7 @@ export class StateHistoryChartLine extends LitElement {
 
   private _datasetToDataIndex: number[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   private _hiddenStats = new Set<string>();
 
@@ -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 (
@@ -177,52 +176,44 @@ export class StateHistoryChartLine extends LitElement {
         seriesName: dataset.name,
         seriesIndex: index,
         value: lastData,
-        // HTML copied from echarts. May change based on options
-        marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
+        color: dataset.color,
       });
     });
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
 
-    return (
-      title +
-      datapoints
-        .map((param) => {
-          const entityId = this._entityIds[param.seriesIndex];
-          const stateObj = this.hass.states[entityId];
-          const entry = this.hass.entities[entityId];
-          const stateValue = String(param.value[1]);
-          let value = stateObj
-            ? this.hass.formatEntityState(stateObj, stateValue)
-            : `${formatNumber(
-                stateValue,
-                this.hass.locale,
-                getNumberFormatOptions(undefined, entry)
-              )}${unit}`;
-          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-          const data = this.data[dataIndex];
-          if (data.statistics && data.statistics.length > 0) {
-            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-            const source =
-              data.states.length === 0 ||
-              param.value[0] < data.states[0].last_changed
-                ? `${this.hass.localize(
-                    "ui.components.history_charts.source_stats"
-                  )}`
-                : `${this.hass.localize(
-                    "ui.components.history_charts.source_history"
-                  )}`;
-            value += source;
-          }
-
-          if (param.seriesName) {
-            return `${param.marker} ${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}`;
+      }
+      return html`<br /><ha-chart-tooltip-marker
+          .color=${String(param.color ?? "")}
+        ></ha-chart-tooltip-marker>
+        ${param.seriesName
+          ? html`${param.seriesName}: `
+          : nothing}${value}${statSuffix}`;
+    })}`;
   };
 
   private _datasetHidden(ev: CustomEvent) {

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

@@ -1,11 +1,10 @@
 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 type {
   CustomSeriesOption,
   CustomSeriesRenderItem,
   ECElementEvent,
-  TooltipFormatterCallback,
   TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -15,8 +14,9 @@ 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 "./ha-chart-tooltip-marker";
 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";
@@ -57,7 +57,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _chartData: CustomSeriesOption[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   @state() private _yWidth = 0;
 
@@ -69,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}
@@ -132,42 +132,35 @@ 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, 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 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("");
-    };
+    const rtl = computeRTL(
+      this.hass.language,
+      this.hass.translationMetadata.translations
+    );
+    return html`${seriesName
+        ? html`<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
+        : nothing}<ha-chart-tooltip-marker
+        .color=${String(color ?? "")}
+        .rtl=${rtl}
+      ></ha-chart-tooltip-marker
+      >${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 (

src/components/chart/statistics-chart.ts

@@ -4,7 +4,7 @@ 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 memoizeOne from "memoize-one";
@@ -34,12 +34,13 @@ 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 "./ha-chart-tooltip-marker";
 import { fillDataGapsAndRoundCaps } from "./round-caps";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 
@@ -126,7 +127,7 @@ export class StatisticsChart extends LitElement {
 
   @state() private _statisticIds: string[] = [];
 
-  @state() private _chartOptions?: ECOption;
+  @state() private _chartOptions?: HaECOption;
 
   @state() private _hiddenStats = new Set<string>();
 
@@ -251,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;
+      color: 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,
+        color: String(param.color ?? ""),
+        seriesName: param.seriesName,
+        value,
+      });
+    }
+
+    if (rows.length === 0) return nothing;
+
+    return html`${rows.map(
+      (row, i) =>
+        html`${row.time
+            ? html`${row.time}<br />`
+            : nothing}<ha-chart-tooltip-marker
+            .color=${row.color}
+          ></ha-chart-tooltip-marker>
+          ${row.seriesName}:
+          ${row.value}${i < rows.length - 1 ? html`<br />` : nothing}`
+    )}`;
   };
 
   private _createOptions() {

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

@@ -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 : "" }
                     )}

src/components/device/ha-device-automation-picker.ts

@@ -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
         [];
 

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

@@ -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

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

@@ -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);

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

@@ -1,11 +1,16 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiChartLine, mdiHelpCircleOutline, mdiShape } from "@mdi/js";
+import {
+  mdiChartLine,
+  mdiHelpCircleOutline,
+  mdiPencil,
+  mdiShape,
+} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import { fireEvent } from "../../common/dom/fire_event";
+import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -53,6 +58,16 @@ const SEARCH_KEYS = [
   { name: "id", weight: 2 },
 ];
 
+export interface StatisticElementChangedEvent {
+  statisticId: string;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "edit-statistics-element": StatisticElementChangedEvent;
+  }
+}
+
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -130,6 +145,8 @@ export class HaStatisticPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @property({ attribute: "can-edit", type: Boolean }) public canEdit?: boolean;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     if (
       (!this.hasUpdated && !this.statisticIds) ||
@@ -341,6 +358,15 @@ export class HaStatisticPicker extends LitElement {
       ${item.secondary
         ? html`<span slot="supporting-text">${item.secondary}</span>`
         : nothing}
+      ${this.canEdit
+        ? html`<ha-icon-button
+            slot="end"
+            .value=${statisticId}
+            .label=${this.hass.localize("ui.common.edit")}
+            .path=${mdiPencil}
+            @click=${this._editItem}
+          ></ha-icon-button>`
+        : nothing}
     `;
   }
 
@@ -350,6 +376,12 @@ export class HaStatisticPicker extends LitElement {
 
   private _valueRenderer: PickerValueRenderer = this._makeValueRenderer();
 
+  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
+    ev.stopPropagation();
+    const statisticId = (ev.currentTarget as any).value;
+    fireEvent(this, "edit-statistics-element", { statisticId });
+  }
+
   private _computeItem(statisticId: string): StatisticComboBoxItem {
     const stateObj = this.hass.states[statisticId];
 

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

@@ -1,9 +1,10 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { fireEvent } from "../../common/dom/fire_event";
+import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import type { ValueChangedEvent, HomeAssistant } from "../../types";
 import "./ha-statistic-picker";
+import type { StatisticElementChangedEvent } from "./ha-statistic-picker";
 
 @customElement("ha-statistics-picker")
 class HaStatisticsPicker extends LitElement {
@@ -59,6 +60,8 @@ class HaStatisticsPicker extends LitElement {
   })
   public ignoreRestrictionsOnFirstStatistic = false;
 
+  @property({ attribute: "can-edit", type: Boolean }) public canEdit?;
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -99,7 +102,9 @@ class HaStatisticsPicker extends LitElement {
               .statisticIds=${this.statisticIds}
               .excludeStatistics=${this.value}
               .allowCustomEntity=${this.allowCustomEntity}
+              .canEdit=${this.canEdit}
               @value-changed=${this._statisticChanged}
+              @edit-statistics-element=${this._editItem}
             ></ha-statistic-picker>
           </div>
         `
@@ -122,6 +127,17 @@ class HaStatisticsPicker extends LitElement {
     `;
   }
 
+  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
+    const statisticId = ev.detail.statisticId;
+    const index = this._currentStatistics!.findIndex((e) => e === statisticId);
+    fireEvent(this, "edit-detail-element", {
+      subElementConfig: {
+        index,
+        type: "row",
+      },
+    });
+  }
+
   private get _currentStatistics() {
     return this.value || [];
   }

src/components/entity/state-info.ts

@@ -43,7 +43,6 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_changed}
                     capitalize
                   ></ha-relative-time>
@@ -55,7 +54,6 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_updated}
                     capitalize
                   ></ha-relative-time>
@@ -63,7 +61,6 @@ class StateInfo extends LitElement {
               </ha-tooltip>
               <ha-relative-time
                 id="relative-time"
-                .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>

src/components/ha-absolute-time.ts

@@ -1,18 +1,34 @@
+import { consume } from "@lit/context";
 import { addDays, differenceInMilliseconds, startOfDay } from "date-fns";
+import type { HassConfig } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { transform } from "../common/decorators/transform";
 import { absoluteTime } from "../common/datetime/absolute_time";
-import type { HomeAssistant } from "../types";
+import { configContext, internationalizationContext } from "../data/context";
+import type {
+  HomeAssistantConfig,
+  HomeAssistantInternationalization,
+} from "../types";
 
 const SAFE_MARGIN = 5 * 1000;
 
 @customElement("ha-absolute-time")
 class HaAbsoluteTime extends ReactiveElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public datetime?: string | Date;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: HomeAssistantInternationalization;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
   private _timeout?: number;
 
   public disconnectedCallback(): void {
@@ -62,13 +78,17 @@ class HaAbsoluteTime extends ReactiveElement {
   }
 
   private _updateAbsolute(): void {
+    if (!this._i18n || !this._config) {
+      return;
+    }
+
     if (!this.datetime) {
-      this.innerHTML = this.hass.localize("ui.components.absolute_time.never");
+      this.innerHTML = this._i18n.localize("ui.components.absolute_time.never");
     } else {
       this.innerHTML = absoluteTime(
         new Date(this.datetime),
-        this.hass.locale,
-        this.hass.config
+        this._i18n.locale,
+        this._config
       );
     }
   }

src/components/ha-alert.ts

@@ -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}

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

@@ -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

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

@@ -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}

src/components/ha-areas-floors-display-editor.ts

@@ -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}

src/components/ha-check-list-item.ts

@@ -20,6 +20,7 @@ export class HaCheckListItem extends CheckListItemBase {
   separateCheckboxClick = false;
 
   async onChange(event) {
+    event.stopPropagation();
     super.onChange(event);
     fireEvent(this, event.type);
   }

src/components/ha-climate-state.ts

@@ -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}`);
     }
 

src/components/ha-condition-icon.ts

@@ -11,12 +11,15 @@ import {
   mdiStateMachine,
   mdiWeatherSunny,
 } from "@mdi/js";
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { HassConfig, Connection } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import { conditionIcon, FALLBACK_DOMAIN_ICONS } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -36,12 +39,24 @@ export const CONDITION_ICONS = {
 
 @customElement("ha-condition-icon")
 export class HaConditionIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public condition?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -51,13 +66,13 @@ export class HaConditionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = conditionIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection,
+      this._config,
       this.condition
     ).then((icn) => {
       if (icn) {

src/components/ha-drawer.ts

@@ -294,6 +294,7 @@ export class HaDrawer extends LitElement {
       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 {

src/components/ha-dropdown.ts

@@ -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

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

@@ -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}

src/components/ha-filter-blueprints.ts

@@ -3,6 +3,8 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
@@ -20,6 +22,10 @@ import "./ha-list";
 export class HaFilterBlueprints extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   @property({ attribute: false }) public value?: string[];
 
   @property() public type?: "automation" | "script";
@@ -54,7 +60,7 @@ export class HaFilterBlueprints extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.blueprint.caption")}
+          ${this._localize("ui.panel.config.blueprint.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

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

@@ -4,6 +4,8 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -22,6 +24,10 @@ import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 export class HaFilterVoiceAssistants extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   // the list of selected voiceAssistantIds
   @property({ attribute: false }) public value: string[] = [];
 
@@ -44,9 +50,7 @@ export class HaFilterVoiceAssistants extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize(
-            "ui.panel.config.dashboard.voice_assistants.main"
-          )}
+          ${this._localize("ui.panel.config.dashboard.voice_assistants.main")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-generic-picker.ts

@@ -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>
     `;
   }

src/components/ha-header-bar.ts

@@ -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 {

src/components/ha-humidifier-state.ts

@@ -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}`);
     }
 

src/components/ha-icon-overflow-menu.ts

@@ -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>

src/components/ha-input-helper-text.ts

@@ -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;

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

@@ -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,

src/components/ha-label.ts

@@ -50,7 +50,9 @@ class HaLabel extends LitElement {
       <div class="container" .id=${this._elementId}>
         <span class="content">
           <slot name="icon"></slot>
-          <slot></slot>
+          <span class="label-content">
+            <slot></slot>
+          </span>
         </span>
       </div>
     `;
@@ -113,6 +115,10 @@ class HaLabel extends LitElement {
           display: inline-flex;
         }
 
+        .label-content {
+          display: contents;
+        }
+
         :host([dense]) {
           height: 20px;
           border-radius: var(--ha-border-radius-md);
@@ -126,6 +132,29 @@ class HaLabel extends LitElement {
           margin-inline-start: -4px;
           margin-inline-end: 4px;
         }
+
+        :host(.text-ellipsis) {
+          max-width: 100%;
+          min-width: 0;
+        }
+        :host(.text-ellipsis) .container {
+          min-width: 0;
+          overflow: hidden;
+        }
+        :host(.text-ellipsis) span.content {
+          display: flex;
+          width: 100%;
+          min-width: 0;
+        }
+        :host(.text-ellipsis) .label-content {
+          display: block;
+          flex: 1;
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       `,
     ];
   }

src/components/ha-picker-combo-box.ts

@@ -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;

src/components/ha-relative-time.ts

@@ -1,19 +1,23 @@
+import { consume } from "@lit/context";
 import { parseISO } from "date-fns";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
-import type { HomeAssistant } from "../types";
+import { internationalizationContext } from "../data/context";
+import type { HomeAssistantInternationalization } from "../types";
 
 @customElement("ha-relative-time")
 class HaRelativeTime extends ReactiveElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public datetime?: string | Date;
 
   @property({ type: Boolean }) public capitalize = false;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: HomeAssistantInternationalization;
+
   private _interval?: number;
 
   public disconnectedCallback(): void {
@@ -57,15 +61,19 @@ class HaRelativeTime extends ReactiveElement {
   }
 
   private _updateRelative(): void {
+    if (!this._i18n) {
+      return;
+    }
+
     if (!this.datetime) {
-      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
+      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
     } else {
       const date =
         typeof this.datetime === "string"
           ? parseISO(this.datetime)
           : this.datetime;
 
-      const relTime = relativeTime(date, this.hass.locale);
+      const relTime = relativeTime(date, this._i18n.locale);
       this.innerHTML = this.capitalize
         ? capitalizeFirstLetter(relTime)
         : relTime;

src/components/ha-select-box.ts

@@ -1,11 +1,12 @@
+import { consume, type ContextType } from "@lit/context";
 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 { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
-import type { HomeAssistant } from "../types";
+import { internationalizationContext, uiContext } from "../data/context";
 import "./radio/ha-radio-group";
 import type { HaRadioGroup } from "./radio/ha-radio-group";
 import "./radio/ha-radio-option";
@@ -26,8 +27,6 @@ export interface SelectBoxOption {
 
 @customElement("ha-select-box")
 export class HaSelectBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ attribute: false }) public options: SelectBoxOption[] = [];
 
   @property({ attribute: false }) public value?: string;
@@ -40,6 +39,14 @@ export class HaSelectBox extends LitElement {
   @property({ type: Boolean, attribute: "stacked_image" })
   public stackedImage = false;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  protected _i18n?: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  protected _ui?: ContextType<typeof uiContext>;
+
   render() {
     const maxColumns = this.maxColumns ?? 3;
     const columns = Math.min(maxColumns, this.options.length);
@@ -62,11 +69,11 @@ export class HaSelectBox extends LitElement {
     const disabled = option.disabled || this.disabled || false;
     const selected = option.value === this.value;
 
-    const isDark = this.hass?.themes.darkMode || false;
-    const isRTL = this.hass
+    const isDark = this._ui?.themes.darkMode || false;
+    const isRTL = this._i18n
       ? computeRTL(
-          this.hass.language,
-          this.hass.translationMetadata.translations
+          this._i18n.language,
+          this._i18n.translationMetadata.translations
         )
       : false;
 

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

@@ -1,11 +1,13 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
+import { consumeEntityStates } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { AttributeSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../entity/ha-entity-attribute-picker";
-import { ensureArray } from "../../common/array/ensure-array";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends LitElement {
@@ -27,6 +29,10 @@ export class HaSelectorAttribute extends LitElement {
     filter_entity?: string | string[];
   };
 
+  @state()
+  @consumeEntityStates({ entityIdPath: ["context", "filter_entity"] })
+  private _filterEntityStates?: Record<string, HassEntity>;
+
   protected render() {
     return html`
       <ha-entity-attribute-picker
@@ -73,7 +79,7 @@ export class HaSelectorAttribute extends LitElement {
       const entityIds = ensureArray(this.context.filter_entity);
 
       invalid = !entityIds.some((entityId) => {
-        const stateObj = this.hass.states[entityId];
+        const stateObj = this._filterEntityStates?.[entityId];
         return (
           stateObj &&
           this.value in stateObj.attributes &&

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

@@ -1,30 +1,31 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { LocalizeKeys } from "../../common/translations/localize";
+import type {
+  LocalizeFunc,
+  LocalizeKeys,
+} from "../../common/translations/localize";
 import type {
   AutomationBehavior,
   AutomationBehaviorConditionMode,
   AutomationBehaviorSelector,
   AutomationBehaviorTriggerMode,
 } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-input-helper-text";
-import type { SelectBoxOption } from "../ha-select-box";
 import "../ha-select-box";
+import type { SelectBoxOption } from "../ha-select-box";
 
 const TRIGGER_BEHAVIORS: AutomationBehaviorTriggerMode[] = [
-  "any",
+  "each",
   "first",
-  "last",
+  "all",
 ];
 
 const CONDITION_BEHAVIORS: AutomationBehaviorConditionMode[] = ["any", "all"];
 
 @customElement("ha-selector-automation_behavior")
 export class HaSelectorAutomationBehavior extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false })
   public selector!: AutomationBehaviorSelector;
 
@@ -39,6 +40,9 @@ export class HaSelectorAutomationBehavior extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   protected render() {
     const { mode } = this.selector.automation_behavior ?? {};
     const modeKey = mode ?? "trigger";
@@ -60,7 +64,6 @@ export class HaSelectorAutomationBehavior extends LitElement {
 
     return html`
       <ha-select-box
-        .hass=${this.hass}
         .options=${options}
         .value=${this.value ?? ""}
         max_columns="1"
@@ -95,8 +98,10 @@ export class HaSelectorAutomationBehavior extends LitElement {
         return translated;
       }
     }
-    return this.hass.localize(
-      `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
+    return (
+      this._localize?.(
+        `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
+      ) || behavior
     );
   }
 

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

@@ -1,15 +1,12 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
 import "../ha-input-helper-text";
 
 @customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ type: Boolean }) public value = false;
 
   @property() public placeholder?: any;

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

@@ -1,14 +1,26 @@
+import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { transform } from "../../common/decorators/transform";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { ButtonToggleSelector, SelectOption } from "../../data/selector";
-import type { HomeAssistant, ToggleButton } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HomeAssistantInternationalization,
+  ToggleButton,
+} from "../../types";
 import "../ha-button-toggle-group";
 
 @customElement("ha-selector-button_toggle")
 export class HaButtonToggleSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: ButtonToggleSelector;
 
@@ -48,11 +60,7 @@ export class HaButtonToggleSelector extends LitElement {
 
     if (this.selector.button_toggle?.sort) {
       options.sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.label,
-          b.label,
-          this.hass.locale.language
-        )
+        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
       );
     }
 

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

@@ -2,10 +2,12 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isTemplate } from "../../common/string/has-template";
 import type { ChooseSelector, Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-button-toggle-group";
 import "./ha-selector";
 
@@ -28,6 +30,9 @@ export class HaChooseSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   @state() public _activeChoice?: string;
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
@@ -62,7 +67,7 @@ export class HaChooseSelector extends LitElement {
           .buttons=${this._toggleButtons(
             this.selector.choose.choices,
             this.selector.choose.translation_key,
-            this.hass.localize
+            this._localize
           )}
           .active=${this._activeChoice}
           @value-changed=${this._choiceChanged}
@@ -83,7 +88,7 @@ export class HaChooseSelector extends LitElement {
     (
       choices: ChooseSelector["choose"]["choices"],
       translationKey?: string,
-      _localize?: HomeAssistant["localize"]
+      _localize?: LocalizeFunc
     ) =>
       Object.keys(choices).map((choice) => ({
         label:

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

@@ -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),
     });
   }
 }

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

@@ -1,13 +1,22 @@
+import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { transform } from "../../common/decorators/transform";
 import type { DateSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 
 @customElement("ha-selector-date")
 export class HaDateSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: DateSelector;
 
@@ -31,7 +40,7 @@ export class HaDateSelector extends LitElement {
     return html`
       <ha-date-input
         .label=${this.label}
-        .locale=${this.hass.locale}
+        .locale=${this._locale}
         .disabled=${this.disabled}
         .value=${typeof this.value === "string" ? this.value : undefined}
         .required=${this.required}

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

@@ -1,8 +1,12 @@
+import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { transform } from "../../common/decorators/transform";
 import type { DateTimeSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
@@ -11,7 +15,12 @@ import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: DateTimeSelector;
 
@@ -41,7 +50,7 @@ export class HaDateTimeSelector extends LitElement {
       <div class="input">
         <ha-date-input
           .label=${this.label}
-          .locale=${this.hass.locale}
+          .locale=${this._locale}
           .disabled=${this.disabled}
           .required=${this.required}
           .value=${values?.[0]}
@@ -51,7 +60,7 @@ export class HaDateTimeSelector extends LitElement {
         <ha-time-input
           enable-second
           .value=${values?.[1] || "00:00:00"}
-          .locale=${this.hass.locale}
+          .locale=${this._locale}
           .disabled=${this.disabled}
           .required=${this.required}
           @value-changed=${this._valueChanged}

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

@@ -2,14 +2,11 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { DurationSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-duration-input";
 import type { HaDurationData, HaDurationInput } from "../ha-duration-input";
 
 @customElement("ha-selector-duration")
 export class HaTimeDuration extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: DurationSelector;
 
   @property({ attribute: false }) public value?:

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

@@ -3,10 +3,12 @@ import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { removeFile, uploadFile } from "../../data/file_upload";
 import type { FileSelector } from "../../data/selector";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-file-upload";
 
 @customElement("ha-selector-file")
@@ -25,6 +27,9 @@ export class HaFileSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   @state() private _filename?: { fileId: string; name: string };
 
   @state() private _busy = false;
@@ -42,7 +47,7 @@ export class HaFileSelector extends LitElement {
         .uploading=${this._busy}
         .value=${this.value
           ? this._filename?.name ||
-            this.hass.localize("ui.components.selectors.file.unknown_file")
+            this._localize!("ui.components.selectors.file.unknown_file")
           : undefined}
         @file-picked=${this._uploadFile}
         @change=${this._removeFile}
@@ -72,7 +77,7 @@ export class HaFileSelector extends LitElement {
       fireEvent(this, "value-changed", { value: fileId });
     } catch (err: any) {
       showAlertDialog(this, {
-        text: this.hass.localize("ui.components.selectors.file.upload_failed", {
+        text: this._localize!("ui.components.selectors.file.upload_failed", {
           reason: err.message || err,
         }),
       });

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

@@ -1,11 +1,10 @@
 import { mdiPlayBox, mdiPlus } 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 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { supportsFeature } from "../../common/entity/supports-feature";
-import { getSignedPath } from "../../data/auth";
 import type { MediaPickedEvent } from "../../data/media-player";
 import {
   MediaClassBrowserSettings,
@@ -13,14 +12,10 @@ import {
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import {
-  brandsUrl,
-  extractDomainFromBrandUrl,
-  isBrandUrl,
-} from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
+import "../media-player/ha-media-browser-thumbnail";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../ha-picture-upload";
@@ -54,8 +49,6 @@ export class HaMediaSelector extends LitElement {
     filter_entity?: string | string[];
   };
 
-  @state() private _thumbnailUrl?: string | null;
-
   private _contextEntities: string[] | undefined;
 
   private get _hasAccept(): boolean {
@@ -68,35 +61,6 @@ export class HaMediaSelector extends LitElement {
         this._contextEntities = ensureArray(this.context?.filter_entity);
       }
     }
-
-    if (changedProps.has("value")) {
-      const thumbnail = this.value?.metadata?.thumbnail;
-      const oldThumbnail = (changedProps.get("value") as this["value"])
-        ?.metadata?.thumbnail;
-      if (thumbnail === oldThumbnail) {
-        return;
-      }
-      if (thumbnail && isBrandUrl(thumbnail)) {
-        // The backend is not aware of the theme used by the users,
-        // so we rewrite the URL to show a proper icon
-        this._thumbnailUrl = brandsUrl(
-          {
-            domain: extractDomainFromBrandUrl(thumbnail),
-            type: "icon",
-            darkOptimized: this.hass.themes?.darkMode,
-          },
-          this.hass.auth.data.hassUrl
-        );
-      } else if (thumbnail && thumbnail.startsWith("/")) {
-        this._thumbnailUrl = undefined;
-        // Thumbnails served by local API require authentication
-        getSignedPath(this.hass, thumbnail).then((signedPath) => {
-          this._thumbnailUrl = signedPath.path;
-        });
-      } else {
-        this._thumbnailUrl = thumbnail;
-      }
-    }
   }
 
   protected render() {
@@ -186,10 +150,12 @@ export class HaMediaSelector extends LitElement {
                               ),
                           })}
                           image"
-                          style=${this._thumbnailUrl
-                            ? `background-image: url(${this._thumbnailUrl});`
-                            : ""}
-                        ></div>
+                        >
+                          <ha-media-browser-thumbnail
+                            .hass=${this.hass}
+                            .url=${this.value.metadata.thumbnail}
+                          ></ha-media-browser-thumbnail>
+                        </div>
                       `
                     : html`
                         <div class="icon-holder image">
@@ -410,13 +376,11 @@ export class HaMediaSelector extends LitElement {
       right: 0;
       left: 0;
       bottom: 0;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
+      --ha-media-browser-thumbnail-fit: cover;
     }
     .centered-image {
       margin: 4px;
-      background-size: contain;
+      --ha-media-browser-thumbnail-fit: contain;
     }
     .icon-holder {
       display: flex;

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

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { PeriodKey, PeriodSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
@@ -41,6 +42,9 @@ export class HaPeriodSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   private _schema = memoizeOne(
     (
       selectedPeriodKey: PeriodKey | undefined,
@@ -78,7 +82,7 @@ export class HaPeriodSelector extends LitElement {
     const schema = this._schema(
       typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
       this.selector,
-      this.hass.localize
+      this._localize!
     );
 
     return html`

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

@@ -1,13 +1,20 @@
 import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consume } from "@lit/context";
 import { ensureArray } from "../../common/array/ensure-array";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { internationalizationContext } from "../../data/context";
 import type { SelectOption, SelectSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HomeAssistant,
+  HomeAssistantInternationalization,
+} from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
@@ -25,6 +32,13 @@ import "../radio/ha-radio-option";
 export class HaSelectSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
+
   @property({ attribute: false }) public selector!: SelectSelector;
 
   @property() public value?: string | string[];
@@ -75,11 +89,7 @@ export class HaSelectSelector extends LitElement {
 
     if (this.selector.select?.sort) {
       options.sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.label,
-          b.label,
-          this.hass.locale.language
-        )
+        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
       );
     }
 
@@ -96,7 +106,6 @@ export class HaSelectSelector extends LitElement {
           .value=${this.value as string | undefined}
           @value-changed=${this._selectChanged}
           .maxColumns=${this.selector.select?.box_max_columns}
-          .hass=${this.hass}
         ></ha-select-box>
         ${this._renderHelper()}
       `;
@@ -199,6 +208,7 @@ export class HaSelectSelector extends LitElement {
           : nothing}
 
         <ha-generic-picker
+          no-sort
           .hass=${this.hass}
           .helper=${this.helper}
           .disabled=${this.disabled}
@@ -215,6 +225,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}

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

@@ -2,6 +2,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   LocalizeFunc,
@@ -168,6 +169,9 @@ export class HaSelectorSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   private _yamlMode = false;
 
   protected shouldUpdate(changedProps: PropertyValues<this>) {
@@ -236,7 +240,7 @@ export class HaSelectorSelector extends LitElement {
       };
     }
 
-    const schema = this._schema(type, this.hass.localize);
+    const schema = this._schema(type, this._localize!);
 
     return html`<div>
       <p>${this.label ? this.label : ""}</p>
@@ -290,7 +294,7 @@ export class HaSelectorSelector extends LitElement {
   }
 
   private _computeLabelCallback = (schema: any): string =>
-    this.hass.localize(
+    this._localize!(
       `ui.components.selectors.selector.${schema.name}` as LocalizeKeys
     ) || schema.name;
 

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

@@ -1,13 +1,22 @@
+import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { transform } from "../../common/decorators/transform";
 import type { TimeSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-time-input";
 import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: TimeSelector;
 
@@ -31,7 +40,7 @@ export class HaTimeSelector extends LitElement {
     return html`
       <ha-time-input
         .value=${typeof this.value === "string" ? this.value : undefined}
-        .locale=${this.hass.locale}
+        .locale=${this._locale}
         .disabled=${this.disabled}
         .required=${this.required}
         clearable

src/components/ha-service-control.ts

@@ -837,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

src/components/ha-service-icon.ts

@@ -1,24 +1,39 @@
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import {
   DEFAULT_SERVICE_ICON,
   FALLBACK_DOMAIN_ICONS,
   serviceIcon,
 } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
 @customElement("ha-service-icon")
 export class HaServiceIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public service?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -28,20 +43,18 @@ export class HaServiceIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(
-      this.hass.connection,
-      this.hass.config,
-      this.service
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = serviceIcon(this._connection, this._config, this.service).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }

src/components/ha-service-section-icon.ts

@@ -1,21 +1,36 @@
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { HomeAssistant } from "../types";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
+import { serviceSectionIcon } from "../data/icons";
 import "./ha-icon";
 import "./ha-svg-icon";
-import { serviceSectionIcon } from "../data/icons";
 
 @customElement("ha-service-section-icon")
 export class HaServiceSectionIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public service?: string;
 
   @property() public section?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -25,13 +40,13 @@ export class HaServiceSectionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = serviceSectionIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection,
+      this._config,
       this.service,
       this.section
     ).then((icn) => {

src/components/ha-settings-row.ts

@@ -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}
         >

src/components/ha-sidebar.ts

@@ -539,11 +539,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           rtl: isRTL,
         })}
       >
-        <ha-user-badge
-          slot="start"
-          .user=${this.hass.user}
-          .hass=${this.hass}
-        ></ha-user-badge>
+        <ha-user-badge slot="start" .user=${this.hass.user}></ha-user-badge>
         <span class="item-text" slot="headline"
           >${this.hass.user ? this.hass.user.name : ""}</span
         >

src/components/ha-textarea.ts

@@ -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

src/components/ha-theme-picker.ts

@@ -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 });
   }
 }

src/components/ha-tip.ts

@@ -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>
     `;
   }

src/components/ha-top-app-bar-fixed.ts

@@ -1,64 +1,231 @@
-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:
+      box-shadow var(--ha-animation-duration-normal) ease,
+      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 {

src/components/ha-top-app-bar.ts

@@ -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;
-  }
-}

src/components/ha-trigger-icon.ts

@@ -17,13 +17,16 @@ import {
   mdiWeatherSunny,
   mdiWebhook,
 } from "@mdi/js";
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -50,12 +53,24 @@ export const TRIGGER_ICONS = {
 
 @customElement("ha-trigger-icon")
 export class HaTriggerIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public trigger?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -65,20 +80,18 @@ export class HaTriggerIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(
-      this.hass.connection,
-      this.hass.config,
-      this.trigger
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = triggerIcon(this._connection, this._config, this.trigger).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -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;
   }
 }

src/components/input/wa-input-mixin.ts

@@ -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);

src/components/media-player/dialog-media-manage.ts

@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                 </ha-list>
               `}
         ${isComponentLoaded(this.hass.config, "hassio")
-          ? html`<ha-tip .hass=${this.hass}>
+          ? html`<ha-tip>
               ${this.hass.localize(
                 "ui.components.media-browser.file_management.tip_media_storage",
                 {

src/components/media-player/ha-media-browser-thumbnail.ts

@@ -0,0 +1,147 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import type { HomeAssistant } from "../../types";
+import {
+  brandsUrl,
+  extractDomainFromBrandUrl,
+  isBrandUrl,
+} from "../../util/brands-url";
+
+const SMALL_THUMBNAIL_THRESHOLD = 16;
+
+const isSvgUrl = (url: string): boolean =>
+  /\.svg(\?|#|$)/i.test(url) || url.startsWith("data:image/svg+xml");
+
+const resolveThumbnailURL = (
+  hass: HomeAssistant,
+  thumbnailUrl: string
+): Promise<string> => {
+  if (isBrandUrl(thumbnailUrl)) {
+    return Promise.resolve(
+      brandsUrl(
+        {
+          domain: extractDomainFromBrandUrl(thumbnailUrl),
+          type: "icon",
+          darkOptimized: hass.themes?.darkMode,
+        },
+        hass.auth.data.hassUrl
+      )
+    );
+  }
+  if (thumbnailUrl.startsWith("/")) {
+    // Local thumbnails require authentication; fetch and inline as base64.
+    return hass
+      .fetchWithAuth(thumbnailUrl)
+      .then((response) => response.blob())
+      .then(
+        (blob) =>
+          new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () =>
+              resolve(typeof reader.result === "string" ? reader.result : "");
+            reader.onerror = (e) => reject(e);
+            reader.readAsDataURL(blob);
+          })
+      );
+  }
+  return Promise.resolve(thumbnailUrl);
+};
+
+@customElement("ha-media-browser-thumbnail")
+export class HaMediaBrowserThumbnail extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public url?: string;
+
+  @state() private _resolvedUrl?: string;
+
+  @state() private _small = false;
+
+  @state() private _brand = false;
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("url")) {
+      this._resolve();
+    }
+  }
+
+  private async _resolve(): Promise<void> {
+    this._small = false;
+    this._brand = !!this.url && isBrandUrl(this.url);
+    if (!this.url) {
+      this._resolvedUrl = undefined;
+      return;
+    }
+    const requested = this.url;
+    try {
+      const resolved = await resolveThumbnailURL(this.hass, requested);
+      if (requested !== this.url) return;
+      this._resolvedUrl = resolved;
+      this._probeSize(resolved);
+    } catch (_err) {
+      if (requested === this.url) this._resolvedUrl = undefined;
+    }
+  }
+
+  private _probeSize(url: string): void {
+    // SVGs (including brand icons) scale natively; pixelated rendering would
+    // break vector output.
+    if (this.url && isBrandUrl(this.url)) return;
+    if (isSvgUrl(url)) return;
+    const img = new Image();
+    img.addEventListener("load", () => {
+      if (this._resolvedUrl !== url) return;
+      if (
+        img.naturalWidth > 0 &&
+        img.naturalWidth <= SMALL_THUMBNAIL_THRESHOLD
+      ) {
+        this._small = true;
+      }
+    });
+    img.src = url;
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._resolvedUrl) return nothing;
+    return html`
+      <div
+        class=${classMap({
+          image: true,
+          small: this._small,
+          brand: this._brand,
+        })}
+        style="background-image: url(${this._resolvedUrl})"
+      ></div>
+    `;
+  }
+
+  static readonly styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .image {
+      width: 100%;
+      height: 100%;
+      background-size: var(--ha-media-browser-thumbnail-fit, contain);
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .image.brand {
+      background-size: 40%;
+    }
+    .image.small {
+      image-rendering: pixelated;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-media-browser-thumbnail": HaMediaBrowserThumbnail;
+  }
+}