Show diagnostic moisture binary sensors on security dashboard

2026-06-03 06:51:48 +00:00 · 2026-05-19 10:27:23 +03:00
523 changed files with 8244 additions and 20411 deletions
@@ -41,14 +41,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/init@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/autobuild@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4

      # ℹ️ 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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/analyze@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
@@ -13,11 +13,13 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
+      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
        with:
          github-token: ${{ github.token }}
          process-only: "issues, prs"
-          issue-inactive-days: "30"
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
          issue-lock-reason: ""
-          pr-inactive-days: "1"
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
          pr-lock-reason: ""
@@ -36,7 +36,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@868e6cb4607727d764341a158d98872cd63fa658 # master
+        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master

      - name: Setup Node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -15,7 +15,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
+        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -1 +1 @@
-24.16.0
+24.15.0
@@ -13,4 +13,4 @@ nodeLinker: node-modules

 npmMinimalAgeGate: 3d

-yarnPath: .yarn/releases/yarn-4.15.0.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs
@@ -57,9 +57,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
      if (descriptionContent === "") {
        hasDescription = false;
      } else {
-        descriptionContent = marked(descriptionContent)
-          .replace(/\\/g, "\\\\")
-          .replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
        fs.writeFileSync(
          path.resolve(galleryBuild, `${pageId}-description.ts`),
@@ -1,3 +1,4 @@
+import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";
@@ -1,3 +1,4 @@
+import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
@@ -10,7 +11,6 @@ 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">
-          <ha-top-app-bar-fixed>
+          <mwc-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>
-          </ha-top-app-bar-fixed>
+          </mwc-top-app-bar-fixed>
          <div class="content">
            ${PAGES[this._page].description
              ? html`
@@ -227,12 +227,11 @@ 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 - var(--header-height));
+        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 4px;
      }
@@ -244,7 +243,7 @@ class HaGallery extends LitElement {
        display: flex;
        font-size: var(--ha-font-size-l);
        font-weight: var(--ha-font-weight-medium);
-        min-height: var(--header-height);
+        min-height: 64px;
        padding: 0 16px;
      }

@@ -278,10 +277,6 @@ 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;
      }
@@ -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 **has made changes to**. 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 needs to fill out. 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`.
@@ -1,12 +1,10 @@
-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 "../../../../src/components/ha-card";
+import type { TemplateResult, PropertyValues } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-tip";
-import { internationalizationContext } from "../../../../src/data/context";
-import type { HomeAssistantInternationalization } from "../../../../src/types";
+import "../../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { provideHass } from "../../../../src/fake_data/provide_hass";

 const tips: (string | TemplateResult)[] = [
  "Test tip",
@@ -16,25 +14,16 @@ 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>${tip}</ha-tip>`)}
+              ${tips.map(
+                (tip) =>
+                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
+              )}
            </div>
          </ha-card>
        </div>
@@ -1,2 +1,3 @@
 [build.environment]
+  YARN_VERSION = "1.22.11"
  NODE_OPTIONS = "--max_old_space_size=6144"
@@ -27,7 +27,7 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.29.7",
+    "@babel/runtime": "7.29.2",
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.2",
    "@codemirror/commands": "6.10.3",
@@ -38,40 +38,44 @@
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
    "@codemirror/view": "6.43.0",
-    "@date-fns/tz": "1.5.0",
+    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
-    "@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",
+    "@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",
    "@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.7.0-ha.0",
+    "@home-assistant/webawesome": "3.3.1-ha.3",
    "@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/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.23",
+    "@swc/helpers": "0.5.21",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.1.0",
-    "@tsparticles/preset-links": "4.1.0",
+    "@tsparticles/engine": "4.0.1",
+    "@tsparticles/preset-links": "4.0.1",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -82,19 +86,19 @@
    "core-js": "3.49.0",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
-    "date-fns": "4.4.0",
+    "date-fns": "4.1.0",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
-    "echarts": "6.1.0",
+    "echarts": "6.0.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.4",
-    "intl-messageformat": "11.2.7",
+    "idb-keyval": "6.2.2",
+    "intl-messageformat": "11.2.6",
    "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",
@@ -102,7 +106,7 @@
    "lit": "3.3.3",
    "lit-html": "3.3.3",
    "luxon": "3.7.2",
-    "marked": "18.0.4",
+    "marked": "18.0.3",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.4",
    "object-hash": "3.0.0",
@@ -114,7 +118,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": "4.0.0",
+    "tinykeys": "3.0.0",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.1",
    "workbox-core": "7.4.1",
@@ -125,20 +129,21 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.29.7",
+    "@babel/core": "7.29.0",
    "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.7",
-    "@babel/preset-env": "7.29.7",
-    "@bundle-stats/plugin-webpack-filter": "4.22.2",
+    "@babel/plugin-transform-runtime": "7.29.0",
+    "@babel/preset-env": "7.29.5",
+    "@bundle-stats/plugin-webpack-filter": "4.22.1",
    "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.61.0",
+    "@html-eslint/eslint-plugin": "0.60.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.12",
-    "@rspack/core": "2.0.5",
-    "@rspack/dev-server": "2.0.3",
+    "@rsdoctor/rspack-plugin": "1.5.11",
+    "@rspack/core": "2.0.3",
+    "@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",
@@ -150,15 +155,17 @@
    "@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",
-    "@vitest/coverage-v8": "4.1.7",
+    "@types/webspeechapi": "0.0.29",
+    "@vitest/coverage-v8": "4.1.6",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.4.1",
+    "eslint": "10.4.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.11",
    "eslint-plugin-import-x": "4.16.2",
@@ -168,7 +175,7 @@
    "eslint-plugin-wc": "3.1.0",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.5",
-    "generate-license-file": "4.2.1",
+    "generate-license-file": "4.1.1",
    "glob": "13.0.6",
    "globals": "17.6.0",
    "gulp": "5.0.1",
@@ -179,8 +186,8 @@
    "husky": "9.1.7",
    "jsdom": "29.1.1",
    "jszip": "3.10.1",
-    "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.6",
+    "license-checker-rseidelsohn": "4.4.2",
+    "lint-staged": "17.0.4",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.18.1",
@@ -191,12 +198,12 @@
    "serve": "14.2.6",
    "sinon": "22.0.0",
    "tar": "7.5.15",
-    "terser-webpack-plugin": "5.6.1",
+    "terser-webpack-plugin": "5.6.0",
    "ts-lit-plugin": "2.0.2",
    "typescript": "6.0.3",
-    "typescript-eslint": "8.60.0",
+    "typescript-eslint": "8.59.3",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.7",
+    "vitest": "4.1.6",
    "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"
@@ -212,8 +219,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.15.0",
+  "packageManager": "yarn@4.14.1",
  "volta": {
-    "node": "24.16.0"
+    "node": "24.15.0"
  }
 }
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.0"
+version      = "20260429.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -18,46 +18,7 @@
    "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"],
@@ -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: readonly T[]): T[][] {
+export function getAllCombinations<T>(arr: T[]) {
  return arr.reduce<T[][]>(
    (combinations, element) =>
      combinations.concat(
@@ -114,15 +114,6 @@ 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";

@@ -1,20 +1,6 @@
-import timezones from "google-timezones-json";
 import { TimeZone } from "../../data/translation";

-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;
+const RESOLVED_TIME_ZONE = Intl.DateTimeFormat?.().resolvedOptions?.().timeZone;

 // Browser time zone can be determined from Intl, with fallback to UTC for polyfill or no support.
 export const LOCAL_TIME_ZONE = RESOLVED_TIME_ZONE ?? "UTC";
@@ -1,17 +1,8 @@
 import { consume } from "@lit/context";
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import type {
-  HomeAssistant,
-  HomeAssistantInternationalization,
-} from "../../types";
-import {
-  entitiesContext,
-  internationalizationContext,
-  statesContext,
-} from "../../data/context";
+import type { HomeAssistant } from "../../types";
+import { entitiesContext, 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 {
@@ -27,28 +18,6 @@ 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,
@@ -86,52 +55,27 @@ export const consumeEntityState = (config: ConsumeEntryConfig) =>
  );

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

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

-  // 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 ?? "";
+  return "";
 };
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import { UNAVAILABLE_STATES } 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, UNKNOWN);
+    result.push(...UNAVAILABLE_STATES);
  }

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

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

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

-  const hasValidState = states.some(
-    (stateObj) => stateObj.state !== UNAVAILABLE && stateObj.state !== UNKNOWN
-  );
-  if (!hasValidState) {
-    return UNKNOWN;
+  if (!validState) {
+    return UNAVAILABLE;
  }

  // Use the first state to determine the domain
@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { OFF, UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import { isUnavailableState, OFF, UNAVAILABLE } 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 (compareState === UNAVAILABLE || compareState === UNKNOWN) {
+  if (isUnavailableState(compareState)) {
    return false;
  }

@@ -17,19 +17,6 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;

-/**
- * Stash a destination URL in the current history entry's state. If the page
- * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
- * on load instead of cleaning up the stale dialog state by going back.
- * The current URL is not changed.
- */
-export const setRefreshUrl = (path: string) => {
-  mainWindow.history.replaceState(
-    { ...mainWindow.history.state, refreshUrl: path },
-    ""
-  );
-};
-
 /**
 * Ensures all dialogs are closed before navigation.
 * Returns true if navigation can proceed, false if a dialog refused to close.
@@ -1,37 +0,0 @@
-import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
-import type { RelatedResult } from "../../data/search";
-
-export interface RelatedIdSets {
-  areas: Set<string>;
-  devices: Set<string>;
-  entities: Set<string>;
-}
-
-/**
- * Build a set of related IDs for a given related result.
- * @param related - The related result to build the sets from.
- * @returns The related ID sets.
- */
-export const buildRelatedIdSets = (related?: RelatedResult): RelatedIdSets => ({
-  areas: new Set(related?.area || []),
-  devices: new Set(related?.device || []),
-  entities: new Set(related?.entity || []),
-});
-
-/**
- * Stable partition sort: related items float to the top,
- * preserving relative order (e.g. Fuse score) within each group.
- * @param items - The items to sort.
- * @returns The sorted items.
- */
-export const sortRelatedFirst = (
-  items: PickerComboBoxItem[]
-): PickerComboBoxItem[] =>
-  [...items].sort((a, b) => {
-    const aRelated = Boolean(a.isRelated);
-    const bRelated = Boolean(b.isRelated);
-    if (aRelated === bRelated) {
-      return 0;
-    }
-    return aRelated ? -1 : 1;
-  });
@@ -1,17 +0,0 @@
-/**
- * @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}`;
-};
@@ -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.
+ * live evaluation result. Renders an optional tooltip with details on hover.
 *
 * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
 * @attr {string} label - Accessible label announced by assistive technology.
@@ -56,15 +56,31 @@ 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);
+    }
  `;
 }

@@ -128,9 +128,7 @@ export class HaAutomationRow extends LitElement {
    }
    .row {
      display: flex;
-      padding-left: var(--ha-space-3);
-      padding-inline-start: var(--ha-space-3);
-      padding-inline-end: initial;
+      padding: 0 0 0 var(--ha-space-3);
      min-height: 48px;
      align-items: flex-start;
      cursor: pointer;
@@ -146,8 +144,6 @@ 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);
@@ -191,6 +187,7 @@ export class HaAutomationRow extends LitElement {
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
+      margin: 0 var(--ha-space-3);
    }
    ::slotted([slot="header"]) {
      overflow-wrap: anywhere;
@@ -116,7 +116,7 @@ export class HaProgressButton extends LitElement {
      visibility: hidden;
    }

-    :host([appearance="brand"]) ha-svg-icon {
+    ha-svg-icon {
      color: var(--white-color);
    }
  `;
@@ -14,7 +14,6 @@ import type {
  ECElementEvent,
  LegendComponentOption,
  LineSeriesOption,
-  TooltipOption,
  XAXisOption,
  YAXisOption,
 } from "echarts/types/dist/shared";
@@ -30,59 +29,22 @@ 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,
-  HaECOption,
-  HaECSeries,
-  HaECSeriesItem,
-  HaTooltipOption,
-} from "../../resources/echarts/echarts";
+import type { ECOption } 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?: {
@@ -104,9 +66,9 @@ export class HaChartBase extends LitElement {

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

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

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

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

@@ -652,7 +614,7 @@ export class HaChartBase extends LitElement {

  // Return an array of all IDs associated with the legend item of the primaryId
  private _getAllIdsFromLegend(
-    options: HaECOption | undefined,
+    options: ECOption | undefined,
    primaryId: string
  ): string[] {
    if (!options) return [primaryId];
@@ -672,7 +634,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: HaECOption | undefined) {
+  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
    if (!options) return;
    const legend = ensureArray(this.options?.legend || [])[0] as
      | LegendComponentOption
@@ -795,34 +757,22 @@ export class HaChartBase extends LitElement {
      xAxis,
    };

-    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;
+    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;
    }
-    return options as ECOption;
+    return options;
  }

  private _createTheme(style: CSSStyleDeclaration) {
@@ -1006,16 +956,30 @@ 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 ((s as LineSeriesOption).sampling === "minmax") {
+        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") {
          const minX = xAxis?.min
            ? xAxis.min instanceof Date
              ? xAxis.min.getTime()
@@ -1030,8 +994,8 @@ export class HaChartBase extends LitElement {
                ? xAxis.max
                : undefined
            : undefined;
-          result = {
-            ...result,
+          return {
+            ...s,
            sampling: undefined,
            data: downSampleLineData(
              data as LineSeriesOption["data"],
@@ -1039,10 +1003,11 @@ export class HaChartBase extends LitElement {
              minX,
              maxX
            ),
-          } as HaECSeriesItem;
+          };
        }
      }
-      return processSeriesTooltipFormatter(result);
+      const name = filterXSS(String(s.name ?? s.id ?? ""));
+      return { ...s, name, data };
    });
    return series as ECOption["series"];
  }
@@ -1379,8 +1344,8 @@ export class HaChartBase extends LitElement {
  }

  private _compareCustomLegendOptions(
-    oldOptions: HaECOption | undefined,
-    newOptions: HaECOption | undefined
+    oldOptions: ECOption | undefined,
+    newOptions: ECOption | undefined
  ): boolean {
    const oldLegends = ensureArray(
      oldOptions?.legend || []
@@ -1,41 +0,0 @@
-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;
-  }
-}
@@ -1,6 +1,6 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues } 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 { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } 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
-  ) => TemplateResult | typeof nothing | null;
+  ) => string;

  /**
   * 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"]): HaECOption => ({
+    (categories?: NetworkData["categories"]): ECOption => ({
      tooltip: {
        trigger: "item",
        confine: true,
@@ -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 { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } 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: HaECOption = {
+    const options = {
      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,16 +103,12 @@ export class HaSankeyChart extends LitElement {
      : data.value;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
-      return html`<ha-chart-tooltip-marker
-          .color=${String(params.color ?? "")}
-        ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${value}`;
+      return `${params.marker} ${filterXSS(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 html`${source?.label ?? data.source} →
-        ${target?.label ?? data.target}<br />${value}`;
+      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
    }
    return null;
  };
@@ -5,9 +5,10 @@ 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 type { HaECOption } from "../../resources/echarts/echarts";
+import { filterXSS } from "../../common/util/xss";
+import type { ECOption } from "../../resources/echarts/echarts";
+import type { HomeAssistant } from "../../types";
 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");
@@ -24,6 +25,8 @@ 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?: (
@@ -47,13 +50,13 @@ export class HaSunburstChart extends LitElement {
      return nothing;
    }

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

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

  private _createData = memoizeOne(
@@ -1,41 +0,0 @@
-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;
-};
@@ -1,5 +1,5 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
+import type { PropertyValues } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
@@ -12,9 +12,8 @@ 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 { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
  getNumberFormatOptions,
@@ -25,6 +24,7 @@ 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?: HaECOption;
+  @state() private _chartOptions?: ECOption;

  private _hiddenStats = new Set<string>();

@@ -141,11 +141,12 @@ 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
-    );
+    const title =
+      formatDateTimeWithSeconds(
+        new Date(time),
+        this.hass.locale,
+        this.hass.config
+      ) + "<br>";
    const datapoints: Record<string, any>[] = [];
    this._chartData.forEach((dataset, index) => {
      if (
@@ -176,44 +177,52 @@ export class StateHistoryChartLine extends LitElement {
        seriesName: dataset.name,
        seriesIndex: index,
        value: lastData,
-        color: dataset.color,
+        // 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>`,
      });
    });
    const unit = this.unit
      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
      : "";

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

  private _datasetHidden(ev: CustomEvent) {
@@ -1,10 +1,11 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type {
  CustomSeriesOption,
  CustomSeriesRenderItem,
  ECElementEvent,
+  TooltipFormatterCallback,
  TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -14,9 +15,8 @@ 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 { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
+import type { ECOption } 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?: HaECOption;
+  @state() private _chartOptions?: ECOption;

  @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 HaECSeries}
+        .data=${this._chartData as ECOption["series"]}
        small-controls
        @chart-click=${this._handleChartClick}
        @chart-zoom=${this._handleDataZoom}
@@ -132,35 +132,42 @@ export class StateHistoryChartTimeline extends LitElement {
    return rect;
  };

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

-    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}`;
-  };
+      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("");
+    };

  public willUpdate(changedProps: PropertyValues) {
    if (
@@ -4,7 +4,7 @@ import type {
  ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -34,13 +34,12 @@ import {
  isExternalStatistic,
  statisticsHaveType,
 } from "../../data/recorder";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } 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";

@@ -127,7 +126,7 @@ export class StatisticsChart extends LitElement {

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

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

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

@@ -252,101 +251,91 @@ export class StatisticsChart extends LitElement {
    const unit = this.unit
      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
      : "";
-    const rows: {
-      time?: string;
-      color: string;
-      seriesName?: string;
-      value: string;
-    }[] = [];
-    for (const param of params) {
-      if (rendered[param.seriesIndex]) continue;
-      rendered[param.seriesIndex] = true;
+    return params
+      .map((param, index: number) => {
+        if (rendered[param.seriesIndex]) return "";
+        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]);
+        const statisticId = this._statisticIds[param.seriesIndex];
+        const stateObj = this.hass.states[statisticId];
+        const entry = this.hass.entities[statisticId];
+        let rawValue: string;
+        let rawTime: string;
+        if (chartIsBar) {
+          // For bar charts value is always second value.
+          rawValue = String(param.value[1]);
+          // Time value is third value (un-shifted date) if given, otherwise first value
+          let startTime: Date;
+          let endTime: Date | undefined;
+          if (param.value[2]) {
+            startTime = new Date(param.value[2]);
+            if (param.value[3]) {
+              endTime = new Date(param.value[3]);
+            }
+          } else {
+            startTime = new Date(param.value[0]);
+          }
+          if (
+            period === "year" ||
+            period === "month" ||
+            period === "week" ||
+            period === "day"
+          ) {
+            // For year/month/day periods, show only the date
+            rawTime =
+              formatDate(startTime, this.hass.locale, this.hass.config) +
+              (endTime && period !== "day"
+                ? ` – ${formatDate(
+                    endTime,
+                    this.hass.locale,
+                    this.hass.config
+                  )}`
+                : "") +
+              "<br>";
+          } else {
+            // For other time periods, include time in render, and optionally show range
+            // if we have an end time.
+            rawTime =
+              formatDateTimeWithSeconds(
+                startTime,
+                this.hass.locale,
+                this.hass.config
+              ) +
+              (endTime
+                ? ` – ${formatTimeWithSeconds(
+                    endTime,
+                    this.hass.locale,
+                    this.hass.config
+                  )}`
+                : "") +
+              "<br>";
          }
        } else {
-          startTime = new Date(param.value[0]);
+          // 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>`;
        }
-        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]),
+
+        const options = getNumberFormatOptions(stateObj, entry) ?? {
+          maximumFractionDigits: 2,
+        };
+
+        const value = `${formatNumber(
+          rawValue,
          this.hass.locale,
-          this.hass.config
-        );
-      }
+          options
+        )}${unit}`;

-      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}`
-    )}`;
+        const time = index === 0 ? rawTime : "";
+        return `${time}${param.marker} ${param.seriesName}: ${value}`;
+      })
+      .filter(Boolean)
+      .join("<br>");
  };

  private _createOptions() {
@@ -1,14 +1,13 @@
 import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
-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";
@@ -25,9 +24,7 @@ import type { DataTableSettingsDialogParams } from "./show-dialog-data-table-set

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

  @state() private _params?: DataTableSettingsDialogParams;

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

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

    const columns = this._sortedColumns(
      this._params.columns,
@@ -175,7 +172,7 @@ export class DialogDataTableSettings extends LitElement {
                    .hidden=${!isVisible}
                    .path=${isVisible ? mdiEye : mdiEyeOff}
                    slot="meta"
-                    .label=${localize(
+                    .label=${this.hass!.localize(
                      `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
                      { title: typeof col.title === "string" ? col.title : "" }
                    )}
@@ -1,12 +1,10 @@
 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 {
@@ -14,7 +12,7 @@ import {
  sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { CallWS, HomeAssistant, ValueChangedEvent } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-generic-picker";
 import type { PickerValueRenderer } from "../ha-picker-field";

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

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

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

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

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

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

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

@@ -107,15 +107,17 @@ export class HaDevicePicker extends LitElement {
      excludeDevices?: string[],
      value?: string
    ) =>
-      getDevices(this.hass, configEntryLookup, {
+      getDevices(
+        this.hass,
+        configEntryLookup,
        includeDomains,
        excludeDomains,
        includeDeviceClasses,
        deviceFilter,
        entityFilter,
        excludeDevices,
-        value,
-      })
+        value
+      )
  );

  protected firstUpdated(_changedProperties: PropertyValues<this>): void {
@@ -309,29 +309,7 @@ export class HaEntityPicker extends LitElement {
    }
  );

-  private _getEntitiesMemoized = memoizeOne(
-    (
-      hass: HomeAssistant,
-      includeDomains?: string[],
-      excludeDomains?: string[],
-      entityFilter?: HaEntityPickerEntityFilterFunc,
-      includeDeviceClasses?: string[],
-      includeUnitOfMeasurement?: string[],
-      includeEntities?: string[],
-      excludeEntities?: string[],
-      value?: string
-    ) =>
-      getEntities(hass, {
-        includeDomains,
-        excludeDomains,
-        entityFilter,
-        includeDeviceClasses,
-        includeUnitOfMeasurement,
-        includeEntities,
-        excludeEntities,
-        value,
-      })
-  );
+  private _getEntitiesMemoized = memoizeOne(getEntities);

  private _getItems = () => {
    const items = this._getEntitiesMemoized(
@@ -6,7 +6,11 @@ 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 } from "../../data/entity/entity";
+import {
+  UNAVAILABLE,
+  UNKNOWN,
+  isUnavailableState,
+} from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -16,8 +20,7 @@ import "../ha-switch";
 const isOn = (stateObj?: HassEntity) =>
  stateObj !== undefined &&
  !STATES_OFF.includes(stateObj.state) &&
-  stateObj.state !== UNAVAILABLE &&
-  stateObj.state !== UNKNOWN;
+  !isUnavailableState(stateObj.state);

 /**
 * @element ha-entity-toggle
@@ -9,7 +9,7 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
 import type { HomeAssistant } from "../../types";
@@ -170,8 +170,7 @@ export class HaStateLabelBadge extends LitElement {
        }
      // eslint-disable-next-line: disable=no-fallthrough
      default:
-        return entityState.state === UNAVAILABLE ||
-          entityState.state === UNKNOWN
+        return isUnavailableState(entityState.state)
          ? "—"
          : this.hass!.formatEntityStateToParts(entityState).find(
              (part) => part.type === "value"
@@ -210,7 +209,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 (entityState.state === UNAVAILABLE || entityState.state === UNKNOWN) {
+    if (isUnavailableState(entityState.state)) {
      return this.hass!.localize(`state_badge.default.${entityState.state}`);
    }
    const domainStateKey = getTruncatedKey(domain, entityState.state);
@@ -1,16 +1,11 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import {
-  mdiChartLine,
-  mdiHelpCircleOutline,
-  mdiPencil,
-  mdiShape,
-} from "@mdi/js";
+import { mdiChartLine, mdiHelpCircleOutline, 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 { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
+import { 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";
@@ -58,16 +53,6 @@ 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;
@@ -145,8 +130,6 @@ 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) ||
@@ -358,15 +341,6 @@ 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}
    `;
  }

@@ -376,12 +350,6 @@ 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];

@@ -1,10 +1,9 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
+import { 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 {
@@ -60,8 +59,6 @@ class HaStatisticsPicker extends LitElement {
  })
  public ignoreRestrictionsOnFirstStatistic = false;

-  @property({ attribute: "can-edit", type: Boolean }) public canEdit?;
-
  protected render() {
    if (!this.hass) {
      return nothing;
@@ -102,9 +99,7 @@ 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>
        `
@@ -127,17 +122,6 @@ 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 || [];
  }
@@ -43,6 +43,7 @@ class StateInfo extends LitElement {
                    )}:
                  </span>
                  <ha-relative-time
+                    .hass=${this.hass}
                    .datetime=${this.stateObj.last_changed}
                    capitalize
                  ></ha-relative-time>
@@ -54,6 +55,7 @@ class StateInfo extends LitElement {
                    )}:
                  </span>
                  <ha-relative-time
+                    .hass=${this.hass}
                    .datetime=${this.stateObj.last_updated}
                    capitalize
                  ></ha-relative-time>
@@ -61,6 +63,7 @@ class StateInfo extends LitElement {
              </ha-tooltip>
              <ha-relative-time
                id="relative-time"
+                .hass=${this.hass}
                .datetime=${this.stateObj.last_changed}
                capitalize
              ></ha-relative-time>
@@ -1,34 +1,18 @@
-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, state } from "lit/decorators";
-import { transform } from "../common/decorators/transform";
+import { customElement, property } from "lit/decorators";
 import { absoluteTime } from "../common/datetime/absolute_time";
-import { configContext, internationalizationContext } from "../data/context";
-import type {
-  HomeAssistantConfig,
-  HomeAssistantInternationalization,
-} from "../types";
+import type { HomeAssistant } 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 {
@@ -78,17 +62,13 @@ class HaAbsoluteTime extends ReactiveElement {
  }

  private _updateAbsolute(): void {
-    if (!this._i18n || !this._config) {
-      return;
-    }
-
    if (!this.datetime) {
-      this.innerHTML = this._i18n.localize("ui.components.absolute_time.never");
+      this.innerHTML = this.hass.localize("ui.components.absolute_time.never");
    } else {
      this.innerHTML = absoluteTime(
        new Date(this.datetime),
-        this._i18n.locale,
-        this._config
+        this.hass.locale,
+        this.hass.config
      );
    }
  }
@@ -6,9 +6,8 @@ import {
  mdiInformationOutline,
 } from "@mdi/js";
 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 { 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";
@@ -40,9 +39,7 @@ class HaAlert extends LitElement {

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

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

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

@@ -71,7 +68,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}
@@ -29,7 +29,7 @@ export interface AreaControlPickerItem extends PickerComboBoxItem {
  deviceClass?: string;
 }

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

@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,
+          AREA_CONTROL_DOMAINS as unknown as AreaControlDomain[],
          areaId,
          excludeEntities,
          this.hass
@@ -12,7 +12,6 @@ import { areaComboBoxKeys, getAreas } from "../data/area/area_picker";
 import { createAreaRegistryEntry } from "../data/area/area_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
-import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
@@ -105,29 +104,7 @@ export class HaAreaPicker extends LitElement {
    await this._picker?.open();
  }

-  private _getAreasMemoized = memoizeOne(
-    (
-      haAreas: HomeAssistant["areas"],
-      haFloors: HomeAssistant["floors"],
-      haDevices: HomeAssistant["devices"],
-      haEntities: HomeAssistant["entities"],
-      haStates: HomeAssistant["states"],
-      includeDomains?: string[],
-      excludeDomains?: string[],
-      includeDeviceClasses?: string[],
-      deviceFilter?: HaDevicePickerDeviceFilterFunc,
-      entityFilter?: HaEntityPickerEntityFilterFunc,
-      excludeAreas?: string[]
-    ) =>
-      getAreas(haAreas, haFloors, haDevices, haEntities, haStates, {
-        includeDomains,
-        excludeDomains,
-        includeDeviceClasses,
-        deviceFilter,
-        entityFilter,
-        excludeAreas,
-      })
-  );
+  private _getAreasMemoized = memoizeOne(getAreas);

  // Recompute value renderer when the areas change
  private _computeValueRenderer = memoizeOne(
@@ -61,6 +61,7 @@ export class HaAreasDisplayEditor extends LitElement {
      >
        <ha-svg-icon slot="leading-icon" .path=${mdiTextureBox}></ha-svg-icon>
        <ha-items-display-editor
+          .hass=${this.hass}
          .items=${items}
          .value=${value}
          @value-changed=${this._areaDisplayChanged}
@@ -107,6 +107,7 @@ 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}
@@ -20,7 +20,6 @@ export class HaCheckListItem extends CheckListItemBase {
  separateCheckboxClick = false;

  async onChange(event) {
-    event.stopPropagation();
    super.onChange(event);
    fireEvent(this, event.type);
  }
@@ -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 { OFF, UNAVAILABLE, UNKNOWN } from "../data/entity/entity";
+import { isUnavailableState, OFF } from "../data/entity/entity";
 import type { HomeAssistant } from "../types";

@customElement("ha-climate-state")
@@ -14,11 +14,9 @@ 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">
-        ${!noValue
+        ${!isUnavailableState(this.stateObj.state)
          ? html`<span class="state-label">
                ${this._localizeState()}
                ${this.stateObj.attributes.preset_mode &&
@@ -34,7 +32,7 @@ class HaClimateState extends LitElement {
          : this._localizeState()}
      </div>

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

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

@@ -11,15 +11,12 @@ import {
  mdiStateMachine,
  mdiWeatherSunny,
 } from "@mdi/js";
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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";

@@ -39,24 +36,12 @@ 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>`;
@@ -66,13 +51,13 @@ export class HaConditionIcon extends LitElement {
      return nothing;
    }

-    if (!this._connection || !this._config) {
+    if (!this.hass) {
      return this._renderFallback();
    }

    const icon = conditionIcon(
-      this._connection,
-      this._config,
+      this.hass.connection,
+      this.hass.config,
      this.condition
    ).then((icn) => {
      if (icn) {
@@ -294,7 +294,6 @@ 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 {
@@ -6,18 +6,11 @@ import type { HaIconButton } from "./ha-icon-button";

 /**
 * Event type for the ha-dropdown component when an item is selected.
- * @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`.
+ * @param T - The type of the value of the selected item.
 */
-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 };
-    }>;
+export type HaDropdownSelectEvent<T = string> = CustomEvent<{
+  item: Omit<HaDropdownItem, "value"> & { value: T };
+}>;

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

    return html`
      <ha-items-display-editor
+        .hass=${this.hass}
        .items=${items}
        .value=${value}
        @value-changed=${this._itemDisplayChanged}
@@ -3,8 +3,6 @@ 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";
@@ -22,10 +20,6 @@ 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";
@@ -60,7 +54,7 @@ export class HaFilterBlueprints extends LitElement {
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
-          ${this._localize("ui.panel.config.blueprint.caption")}
+          ${this.hass.localize("ui.panel.config.blueprint.caption")}
          ${this.value?.length
            ? html`<div class="badge">${this.value?.length}</div>
                <ha-icon-button
@@ -20,8 +20,8 @@ import {
  subscribeCategoryRegistry,
  updateCategoryRegistryEntry,
 } from "../data/category_registry";
+import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { confirmDeleteCategory } from "../panels/config/category/confirm-delete-category";
 import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -199,7 +199,17 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
  }

  private async _deleteCategory(id: string) {
-    if (!(await confirmDeleteCategory(this, this.hass))) {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.category.editor.confirm_delete"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.category.editor.confirm_delete_text"
+      ),
+      confirmText: this.hass.localize("ui.common.delete"),
+      destructive: true,
+    });
+    if (!confirm) {
      return;
    }
    try {
@@ -4,8 +4,6 @@ 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";
@@ -24,10 +22,6 @@ 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[] = [];

@@ -50,7 +44,9 @@ export class HaFilterVoiceAssistants extends LitElement {
        @expanded-changed=${this._expandedChanged}
      >
        <div slot="header" class="header">
-          ${this._localize("ui.panel.config.dashboard.voice_assistants.main")}
+          ${this.hass.localize(
+            "ui.panel.config.dashboard.voice_assistants.main"
+          )}
          ${this.value?.length
            ? html`<div class="badge">${this.value?.length}</div>
                <ha-icon-button
@@ -77,7 +77,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
    | "bottom-start"
    | "bottom-end"
    | "left-start"
-    | "left-end" = "bottom";
+    | "left-end" = "bottom-start";

  /** If set picker shows an add button instead of textbox when value isn't set */
  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
@@ -109,8 +109,6 @@ 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;
@@ -273,7 +271,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
        .selectedSection=${this.selectedSection}
        .searchKeys=${this.searchKeys}
        .customValueLabel=${this.customValueLabel}
-        .noSort=${this.noSort}
      ></ha-picker-combo-box>
    `;
  }
@@ -1,77 +1,59 @@
-import { css, html, LitElement } from "lit";
+// @ts-ignore
+import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+import { css, html, LitElement, unsafeCSS } from "lit";
 import { customElement } from "lit/decorators";

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

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

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

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

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

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

@@ -2,11 +2,10 @@ 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, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { customElement, property } from "lit/decorators";
 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";
@@ -27,9 +26,7 @@ export interface IconOverflowMenuItem {

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

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

@@ -47,7 +44,7 @@ export class HaIconOverflowMenu extends LitElement {
              @click=${stopPropagation}
            >
              <ha-icon-button
-                .label=${this._localize("ui.common.overflow_menu")}
+                .label=${this.hass.localize("ui.common.overflow_menu")}
                .path=${mdiDotsVertical}
                slot="trigger"
              ></ha-icon-button>
@@ -121,6 +121,7 @@ export class HaIconPicker extends LitElement {
        .label=${this.label}
        .value=${this._value}
        .searchFn=${this._filterIcons}
+        popover-placement="bottom-start"
        @value-changed=${this._valueChanged}
      >
        <slot name="start"></slot>
@@ -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: var(--ha-font-size-s);
+      font-size: 0.75rem;
      padding-left: 16px;
      padding-right: 16px;
      padding-inline-start: 16px;
@@ -8,11 +8,10 @@ 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 { LocalizeFunc } from "../common/translations/localize";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-icon-next";
@@ -47,9 +46,7 @@ declare global {

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

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

@@ -164,7 +161,7 @@ export class HaItemDisplayEditor extends LitElement {
                    ? html`<ha-icon-button
                        .path=${isVisible ? mdiEye : mdiEyeOff}
                        slot="end"
-                        .label=${this._localize(
+                        .label=${this.hass.localize(
                          `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
                          {
                            label: label,
@@ -50,9 +50,7 @@ class HaLabel extends LitElement {
      <div class="container" .id=${this._elementId}>
        <span class="content">
          <slot name="icon"></slot>
-          <span class="label-content">
-            <slot></slot>
-          </span>
+          <slot></slot>
        </span>
      </div>
    `;
@@ -115,10 +113,6 @@ class HaLabel extends LitElement {
          display: inline-flex;
        }

-        .label-content {
-          display: contents;
-        }
-
        :host([dense]) {
          height: 20px;
          border-radius: var(--ha-border-radius-md);
@@ -132,29 +126,6 @@ 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;
-        }
      `,
    ];
  }
@@ -152,6 +152,7 @@ export class HaLanguagePicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
+        popover-placement="bottom-end"
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass?.localize(
          "ui.components.language-picker.no_languages"
@@ -167,8 +167,6 @@ 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;
@@ -344,7 +342,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
  private _getItems = () => {
    let items = [...(this.getItems(this._search, this._selectedSection) || [])];

-    if (!this.sections?.length && !this.noSort) {
+    if (!this.sections?.length) {
      items = items.sort((entityA, entityB) => {
        const sortLabelA =
          typeof entityA === "string" ? entityA : entityA.sorting_label;
@@ -1,23 +1,19 @@
-import { consume } from "@lit/context";
 import { parseISO } from "date-fns";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
-import { internationalizationContext } from "../data/context";
-import type { HomeAssistantInternationalization } from "../types";
+import type { HomeAssistant } 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 {
@@ -61,19 +57,15 @@ class HaRelativeTime extends ReactiveElement {
  }

  private _updateRelative(): void {
-    if (!this._i18n) {
-      return;
-    }
-
    if (!this.datetime) {
-      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
+      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
    } else {
      const date =
        typeof this.datetime === "string"
          ? parseISO(this.datetime)
          : this.datetime;

-      const relTime = relativeTime(date, this._i18n.locale);
+      const relTime = relativeTime(date, this.hass.locale);
      this.innerHTML = this.capitalize
        ? capitalizeFirstLetter(relTime)
        : relTime;
@@ -1,12 +1,11 @@
-import { consume, type ContextType } from "@lit/context";
 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 { 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 { internationalizationContext, uiContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./radio/ha-radio-group";
 import type { HaRadioGroup } from "./radio/ha-radio-group";
 import "./radio/ha-radio-option";
@@ -27,6 +26,8 @@ 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;
@@ -39,14 +40,6 @@ 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);
@@ -69,11 +62,11 @@ export class HaSelectBox extends LitElement {
    const disabled = option.disabled || this.disabled || false;
    const selected = option.value === this.value;

-    const isDark = this._ui?.themes.darkMode || false;
-    const isRTL = this._i18n
+    const isDark = this.hass?.themes.darkMode || false;
+    const isRTL = this.hass
      ? computeRTL(
-          this._i18n.language,
-          this._i18n.translationMetadata.translations
+          this.hass.language,
+          this.hass.translationMetadata.translations
        )
      : false;

@@ -1,13 +1,11 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ensureArray } from "../../common/array/ensure-array";
-import { consumeEntityStates } from "../../common/decorators/consume-context-entry";
+import { customElement, property } from "lit/decorators";
 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 {
@@ -29,10 +27,6 @@ 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
@@ -79,7 +73,7 @@ export class HaSelectorAttribute extends LitElement {
      const entityIds = ensureArray(this.context.filter_entity);

      invalid = !entityIds.some((entityId) => {
-        const stateObj = this._filterEntityStates?.[entityId];
+        const stateObj = this.hass.states[entityId];
        return (
          stateObj &&
          this.value in stateObj.attributes &&
@@ -1,31 +1,30 @@
 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 {
-  LocalizeFunc,
-  LocalizeKeys,
-} from "../../common/translations/localize";
+import type { 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 "../ha-select-box";
 import type { SelectBoxOption } from "../ha-select-box";
+import "../ha-select-box";

 const TRIGGER_BEHAVIORS: AutomationBehaviorTriggerMode[] = [
-  "each",
+  "any",
  "first",
-  "all",
+  "last",
 ];

 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;

@@ -40,9 +39,6 @@ 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";
@@ -64,6 +60,7 @@ export class HaSelectorAutomationBehavior extends LitElement {

    return html`
      <ha-select-box
+        .hass=${this.hass}
        .options=${options}
        .value=${this.value ?? ""}
        max_columns="1"
@@ -98,10 +95,8 @@ export class HaSelectorAutomationBehavior extends LitElement {
        return translated;
      }
    }
-    return (
-      this._localize?.(
-        `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
-      ) || behavior
+    return this.hass.localize(
+      `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
    );
  }

@@ -1,12 +1,15 @@
 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;
@@ -1,26 +1,14 @@
-import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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 { internationalizationContext } from "../../data/context";
-import type { FrontendLocaleData } from "../../data/translation";
-import type {
-  HomeAssistantInternationalization,
-  ToggleButton,
-} from "../../types";
+import type { HomeAssistant, ToggleButton } from "../../types";
 import "../ha-button-toggle-group";

@customElement("ha-selector-button_toggle")
 export class HaButtonToggleSelector extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
-    transformer: ({ locale }) => locale,
-  })
-  private _locale!: FrontendLocaleData;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public selector!: ButtonToggleSelector;

@@ -60,7 +48,11 @@ export class HaButtonToggleSelector extends LitElement {

    if (this.selector.button_toggle?.sort) {
      options.sort((a, b) =>
-        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
+        caseInsensitiveStringCompare(
+          a.label,
+          b.label,
+          this.hass.locale.language
+        )
      );
    }

@@ -2,12 +2,10 @@ 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";

@@ -30,9 +28,6 @@ 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 {
@@ -67,7 +62,7 @@ export class HaChooseSelector extends LitElement {
          .buttons=${this._toggleButtons(
            this.selector.choose.choices,
            this.selector.choose.translation_key,
-            this._localize
+            this.hass.localize
          )}
          .active=${this._activeChoice}
          @value-changed=${this._choiceChanged}
@@ -88,7 +83,7 @@ export class HaChooseSelector extends LitElement {
    (
      choices: ChooseSelector["choose"]["choices"],
      translationKey?: string,
-      _localize?: LocalizeFunc
+      _localize?: HomeAssistant["localize"]
    ) =>
      Object.keys(choices).map((choice) => ({
        label:
@@ -2,7 +2,7 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
+import { fireEvent } 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: HASSDomEvent<HASSDomEvents["value-changed"]>) {
+  private _valueChanged(ev: CustomEvent) {
    ev.stopPropagation();
    fireEvent(this, "value-changed", {
-      value: Number(ev.detail.value),
+      value: Number((ev.detail as any).value),
    });
  }
 }
@@ -1,22 +1,13 @@
-import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { transform } from "../../common/decorators/transform";
+import { customElement, property, query } from "lit/decorators";
 import type { DateSelector } from "../../data/selector";
-import { internationalizationContext } from "../../data/context";
-import type { FrontendLocaleData } from "../../data/translation";
-import type { HomeAssistantInternationalization } from "../../types";
+import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";

@customElement("ha-selector-date")
 export class HaDateSelector extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
-    transformer: ({ locale }) => locale,
-  })
-  private _locale!: FrontendLocaleData;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public selector!: DateSelector;

@@ -40,7 +31,7 @@ export class HaDateSelector extends LitElement {
    return html`
      <ha-date-input
        .label=${this.label}
-        .locale=${this._locale}
+        .locale=${this.hass.locale}
        .disabled=${this.disabled}
        .value=${typeof this.value === "string" ? this.value : undefined}
        .required=${this.required}
@@ -1,12 +1,8 @@
-import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { transform } from "../../common/decorators/transform";
 import type { DateTimeSelector } from "../../data/selector";
-import { internationalizationContext } from "../../data/context";
-import type { FrontendLocaleData } from "../../data/translation";
-import type { HomeAssistantInternationalization } from "../../types";
+import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
@@ -15,12 +11,7 @@ import type { HaTimeInput } from "../ha-time-input";

@customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
-    transformer: ({ locale }) => locale,
-  })
-  private _locale!: FrontendLocaleData;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public selector!: DateTimeSelector;

@@ -50,7 +41,7 @@ export class HaDateTimeSelector extends LitElement {
      <div class="input">
        <ha-date-input
          .label=${this.label}
-          .locale=${this._locale}
+          .locale=${this.hass.locale}
          .disabled=${this.disabled}
          .required=${this.required}
          .value=${values?.[0]}
@@ -60,7 +51,7 @@ export class HaDateTimeSelector extends LitElement {
        <ha-time-input
          enable-second
          .value=${values?.[1] || "00:00:00"}
-          .locale=${this._locale}
+          .locale=${this.hass.locale}
          .disabled=${this.disabled}
          .required=${this.required}
          @value-changed=${this._valueChanged}
@@ -2,11 +2,14 @@ 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?:
@@ -3,12 +3,10 @@ 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")
@@ -27,9 +25,6 @@ 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;
@@ -47,7 +42,7 @@ export class HaFileSelector extends LitElement {
        .uploading=${this._busy}
        .value=${this.value
          ? this._filename?.name ||
-            this._localize!("ui.components.selectors.file.unknown_file")
+            this.hass.localize("ui.components.selectors.file.unknown_file")
          : undefined}
        @file-picked=${this._uploadFile}
        @change=${this._removeFile}
@@ -77,7 +72,7 @@ export class HaFileSelector extends LitElement {
      fireEvent(this, "value-changed", { value: fileId });
    } catch (err: any) {
      showAlertDialog(this, {
-        text: this._localize!("ui.components.selectors.file.upload_failed", {
+        text: this.hass.localize("ui.components.selectors.file.upload_failed", {
          reason: err.message || err,
        }),
      });
@@ -1,10 +1,11 @@
 import { mdiPlayBox, mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 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 { 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,
@@ -12,10 +13,14 @@ 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";
@@ -49,6 +54,8 @@ export class HaMediaSelector extends LitElement {
    filter_entity?: string | string[];
  };

+  @state() private _thumbnailUrl?: string | null;
+
  private _contextEntities: string[] | undefined;

  private get _hasAccept(): boolean {
@@ -61,6 +68,35 @@ 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() {
@@ -150,12 +186,10 @@ export class HaMediaSelector extends LitElement {
                              ),
                          })}
                          image"
-                        >
-                          <ha-media-browser-thumbnail
-                            .hass=${this.hass}
-                            .url=${this.value.metadata.thumbnail}
-                          ></ha-media-browser-thumbnail>
-                        </div>
+                          style=${this._thumbnailUrl
+                            ? `background-image: url(${this._thumbnailUrl});`
+                            : ""}
+                        ></div>
                      `
                    : html`
                        <div class="icon-holder image">
@@ -376,11 +410,13 @@ export class HaMediaSelector extends LitElement {
      right: 0;
      left: 0;
      bottom: 0;
-      --ha-media-browser-thumbnail-fit: cover;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
    }
    .centered-image {
      margin: 4px;
-      --ha-media-browser-thumbnail-fit: contain;
+      background-size: contain;
    }
    .icon-holder {
      display: flex;
@@ -1,7 +1,6 @@
 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";
@@ -42,9 +41,6 @@ export class HaPeriodSelector extends LitElement {

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

-  @consumeLocalize()
-  protected _localize?: LocalizeFunc;
-
  private _schema = memoizeOne(
    (
      selectedPeriodKey: PeriodKey | undefined,
@@ -82,7 +78,7 @@ export class HaPeriodSelector extends LitElement {
    const schema = this._schema(
      typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
      this.selector,
-      this._localize!
+      this.hass.localize
    );

    return html`
@@ -1,20 +1,13 @@
 import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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 { FrontendLocaleData } from "../../data/translation";
-import type {
-  HomeAssistant,
-  HomeAssistantInternationalization,
-} from "../../types";
+import type { HomeAssistant } from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
@@ -32,13 +25,6 @@ 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[];
@@ -89,7 +75,11 @@ export class HaSelectSelector extends LitElement {

    if (this.selector.select?.sort) {
      options.sort((a, b) =>
-        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
+        caseInsensitiveStringCompare(
+          a.label,
+          b.label,
+          this.hass.locale.language
+        )
      );
    }

@@ -106,6 +96,7 @@ 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()}
      `;
@@ -208,7 +199,6 @@ export class HaSelectSelector extends LitElement {
          : nothing}

        <ha-generic-picker
-          no-sort
          .hass=${this.hass}
          .helper=${this.helper}
          .disabled=${this.disabled}
@@ -225,7 +215,6 @@ 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}
@@ -2,7 +2,6 @@ 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,
@@ -169,9 +168,6 @@ 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>) {
@@ -240,7 +236,7 @@ export class HaSelectorSelector extends LitElement {
      };
    }

-    const schema = this._schema(type, this._localize!);
+    const schema = this._schema(type, this.hass.localize);

    return html`<div>
      <p>${this.label ? this.label : ""}</p>
@@ -294,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
  }

  private _computeLabelCallback = (schema: any): string =>
-    this._localize!(
+    this.hass.localize(
      `ui.components.selectors.selector.${schema.name}` as LocalizeKeys
    ) || schema.name;

@@ -1,22 +1,13 @@
-import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { transform } from "../../common/decorators/transform";
+import { customElement, property, query } from "lit/decorators";
 import type { TimeSelector } from "../../data/selector";
-import { internationalizationContext } from "../../data/context";
-import type { FrontendLocaleData } from "../../data/translation";
-import type { HomeAssistantInternationalization } from "../../types";
+import type { HomeAssistant } from "../../types";
 import "../ha-time-input";
 import type { HaTimeInput } from "../ha-time-input";

@customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
-    transformer: ({ locale }) => locale,
-  })
-  private _locale!: FrontendLocaleData;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public selector!: TimeSelector;

@@ -40,7 +31,7 @@ export class HaTimeSelector extends LitElement {
    return html`
      <ha-time-input
        .value=${typeof this.value === "string" ? this.value : undefined}
-        .locale=${this._locale}
+        .locale=${this.hass.locale}
        .disabled=${this.disabled}
        .required=${this.required}
        clearable
@@ -837,7 +837,7 @@ export class HaServiceControl extends LitElement {
        if (targetDevices.length) {
          targetDevices = targetDevices.filter((device) =>
            deviceMeetsTargetSelector(
-              this.hass.states,
+              this.hass,
              Object.values(this.hass.entities),
              this.hass.devices[device],
              targetSelector
@@ -1,39 +1,24 @@
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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>`;
@@ -43,18 +28,20 @@ export class HaServiceIcon extends LitElement {
      return nothing;
    }

-    if (!this._connection || !this._config) {
+    if (!this.hass) {
      return this._renderFallback();
    }

-    const icon = serviceIcon(this._connection, this._config, this.service).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        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>`;
      }
-    );
+      return this._renderFallback();
+    });

    return html`${until(icon)}`;
  }
@@ -1,36 +1,21 @@
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-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 type { HomeAssistant } from "../types";
 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>`;
@@ -40,13 +25,13 @@ export class HaServiceSectionIcon extends LitElement {
      return nothing;
    }

-    if (!this._connection || !this._config) {
+    if (!this.hass) {
      return this._renderFallback();
    }

    const icon = serviceSectionIcon(
-      this._connection,
-      this._config,
+      this.hass.connection,
+      this.hass.config,
      this.service,
      this.section
    ).then((icn) => {
@@ -30,7 +30,6 @@ export class HaSettingsRow extends LitElement {
        <slot name="prefix"></slot>
        <div
          class="body"
-          part="heading"
          ?two-line=${!this.threeLine && hasDescription}
          ?three-line=${this.threeLine}
        >
@@ -539,7 +539,11 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
          rtl: isRTL,
        })}
      >
-        <ha-user-badge slot="start" .user=${this.hass.user}></ha-user-badge>
+        <ha-user-badge
+          slot="start"
+          .user=${this.hass.user}
+          .hass=${this.hass}
+        ></ha-user-badge>
        <span class="item-text" slot="headline"
          >${this.hass.user ? this.hass.user.name : ""}</span
        >
@@ -130,56 +130,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

  private _newTarget?: TargetItem;

-  private _getDevicesMemoized = memoizeOne(
-    (
-      hass: HomeAssistant,
-      configEntryLookup: Record<string, ConfigEntry>,
-      includeDomains?: string[],
-      includeDeviceClasses?: string[],
-      deviceFilter?: HaDevicePickerDeviceFilterFunc,
-      entityFilter?: HaEntityPickerEntityFilterFunc,
-      excludeDevices?: string[],
-      value?: string,
-      idPrefix?: string
-    ) =>
-      getDevices(hass, configEntryLookup, {
-        includeDomains,
-        includeDeviceClasses,
-        deviceFilter,
-        entityFilter,
-        excludeDevices,
-        value,
-        idPrefix,
-      })
-  );
+  private _getDevicesMemoized = memoizeOne(getDevices);

  private _getLabelsMemoized = memoizeOne(getLabels);

-  private _getEntitiesMemoized = memoizeOne(
-    (
-      hass: HomeAssistant,
-      includeDomains?: string[],
-      excludeDomains?: string[],
-      entityFilter?: HaEntityPickerEntityFilterFunc,
-      includeDeviceClasses?: string[],
-      includeUnitOfMeasurement?: string[],
-      includeEntities?: string[],
-      excludeEntities?: string[],
-      value?: string,
-      idPrefix?: string
-    ) =>
-      getEntities(hass, {
-        includeDomains,
-        excludeDomains,
-        entityFilter,
-        includeDeviceClasses,
-        includeUnitOfMeasurement,
-        includeEntities,
-        excludeEntities,
-        value,
-        idPrefix,
-      })
-  );
+  private _getEntitiesMemoized = memoizeOne(getEntities);

  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);

@@ -964,6 +919,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
          this.hass,
          configEntryLookup,
          includeDomains,
+          undefined,
          includeDeviceClasses,
          deviceFilter,
          entityFilter,
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .16.0
 .15.0