Merge branch 'rc'

Bumped version to 20260527.7
Auto-select first voice in required TTS voice picker (#52576 )
2026-06-22 16:22:17 +00:00 · 2026-06-19 14:26:47 +02:00 · 2026-06-19 14:26:36 +02:00 · 2026-06-19 14:26:16 +02:00 · 2026-06-19 14:25:39 +02:00 · 2026-06-11 15:42:36 +02:00
172 changed files with 2799 additions and 3007 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@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -62,4 +62,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
@@ -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
@@ -0,0 +1,86 @@
+diff --git a/dist/tinykeys.cjs b/dist/tinykeys.cjs
+index 08c98b6eff3b8fb4b727fe8e6b096951d6ef6347..9c44f14862f582766ea1733b6dc0e97f962800d8 100644
+--- a/dist/tinykeys.cjs
+++ b/dist/tinykeys.cjs
+@@ -61,6 +61,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
+function splitKeybindingPress(press) {
+	let parts = [];
+	let start = 0;
+	for (let index = 0; index < press.length; index++) {
+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
+			parts.push(press.slice(start, index));
+			start = index + 1;
+		}
+	}
+	parts.push(press.slice(start));
+	return parts;
+}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -76,10 +88,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
+		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -201,5 +213,3 @@ exports.defaultKeybindingsHandlerIgnore = defaultKeybindingsHandlerIgnore;
+ exports.matchKeybindingPress = matchKeybindingPress;
+ exports.parseKeybinding = parseKeybinding;
+ exports.tinykeys = tinykeys;
+-
+-//# sourceMappingURL=tinykeys.cjs.map
+\ No newline at end of file
+diff --git a/dist/tinykeys.mjs b/dist/tinykeys.mjs
+index c289972d2728e03d9b272268c38fd3392e8845bf..e22897b00aae6cdb0dbbb971445227c07be52918 100644
+--- a/dist/tinykeys.mjs
+++ b/dist/tinykeys.mjs
+@@ -60,6 +60,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
+function splitKeybindingPress(press) {
+	let parts = [];
+	let start = 0;
+	for (let index = 0; index < press.length; index++) {
+		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
+			parts.push(press.slice(start, index));
+			start = index + 1;
+		}
+	}
+	parts.push(press.slice(start));
+	return parts;
+}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -75,10 +87,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
+		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
+		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -196,5 +208,3 @@ function tinykeys(target, keybindingMap, options = {}) {
+ }
+ //#endregion
+ export { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };
+-
+-//# sourceMappingURL=tinykeys.mjs.map
+\ No newline at end of file
@@ -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`),
@@ -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`.
@@ -13,6 +13,28 @@ export interface NetworkInfo {
  supervisor_internet: boolean;
 }

+interface SupervisorJob {
+  name: string;
+  reference: string | null;
+  uuid: string;
+  progress: number; // float, 0–100
+  stage: string | null;
+  done: boolean;
+  errors: {
+    type: string;
+    message: string;
+    stage: string | null;
+  }[];
+  created: string; // ISO datetime string
+  extra: Record<string, unknown> | null;
+  child_jobs: SupervisorJob[];
+}
+
+export interface SupervisorJobInfo {
+  ignore_conditions: string[];
+  jobs: SupervisorJob[];
+}
+
 export const ALTERNATIVE_DNS_SERVERS: {
  ipv4: string[];
  ipv6: string[];
@@ -57,6 +79,15 @@ export async function getSupervisorNetworkInfo(): Promise<NetworkInfo> {
  return responseData?.data;
 }

+export async function getSupervisorJobsInfo(): Promise<
+  HassioResponse<SupervisorJobInfo>
+> {
+  const responseData = await handleFetchPromise<
+    HassioResponse<SupervisorJobInfo>
+  >(fetch("/supervisor-api/jobs/info"));
+  return responseData;
+}
+
 export const setSupervisorNetworkDns = async (
  dnsServerIndex: number,
  primaryInterface: string
@@ -2,9 +2,9 @@ import { mdiOpenInNew } from "@mdi/js";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { extractSearchParam } from "../../src/common/url/search-params";
+import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-alert";
 import "../../src/components/ha-button";
-import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";
@@ -15,6 +15,7 @@ import { haStyle } from "../../src/resources/styles";
 import "./components/landing-page-logs";
 import "./components/landing-page-network";
 import {
+  getSupervisorJobsInfo,
  getSupervisorNetworkInfo,
  pingSupervisor,
  type NetworkInfo,
@@ -24,6 +25,7 @@ import { LandingPageBaseElement } from "./landing-page-base-element";
 export const ASSUME_CORE_START_SECONDS = 60;
 const SCHEDULE_CORE_CHECK_SECONDS = 1;
 const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
+const SCHEDULE_FETCH_JOBS_INFO_SECONDS = 2;

@customElement("ha-landing-page")
 class HaLandingPage extends LandingPageBaseElement {
@@ -39,6 +41,8 @@ class HaLandingPage extends LandingPageBaseElement {

  @state() private _coreCheckActive = false;

+  @state() private _progress = -1;
+
  private _mobileApp =
    extractSearchParam("redirect_uri") === "homeassistant://auth-callback";

@@ -60,7 +64,14 @@ class HaLandingPage extends LandingPageBaseElement {
          ${!networkIssue && !this._supervisorError
            ? html`
                <p>${this.localize("subheader")}</p>
-                <ha-progress-bar indeterminate></ha-progress-bar>
+                <ha-progress-bar
+                  .indeterminate=${this._progress <= 0}
+                  .value=${this._progress > 0 ? this._progress : undefined}
+                  .loading=${this._progress >= 0}
+                  >${this._progress > 0
+                    ? `${Math.round(this._progress)}%`
+                    : nothing}</ha-progress-bar
+                >
              `
            : nothing}
          ${networkIssue || this._networkInfoError
@@ -126,6 +137,7 @@ class HaLandingPage extends LandingPageBaseElement {
    import("../../src/components/ha-language-picker");

    this._fetchSupervisorInfo(true);
+    this._fetchSupervisorJobsInfo();
  }

  private _scheduleFetchSupervisorInfo() {
@@ -138,6 +150,13 @@ class HaLandingPage extends LandingPageBaseElement {
    );
  }

+  private _scheduleFetchSupervisorJobsInfo() {
+    setTimeout(
+      () => this._fetchSupervisorJobsInfo(),
+      SCHEDULE_FETCH_JOBS_INFO_SECONDS * 1000
+    );
+  }
+
  private _scheduleTurnOffCoreCheck() {
    setTimeout(() => {
      this._coreCheckActive = false;
@@ -165,7 +184,7 @@ class HaLandingPage extends LandingPageBaseElement {
      // assume supervisor update if ping fails -> don't show an error
      if (!this._coreCheckActive && err.message !== "ping-failed") {
        // eslint-disable-next-line no-console
-        console.error(err);
+        console.error("Failed to fetch supervisor info", err);
        this._networkInfoError = true;
      }
    }
@@ -175,6 +194,33 @@ class HaLandingPage extends LandingPageBaseElement {
    }
  }

+  private async _fetchSupervisorJobsInfo() {
+    try {
+      const jobsInfo = await getSupervisorJobsInfo();
+      const coreInstallJob =
+        jobsInfo.result === "ok"
+          ? jobsInfo.data.jobs.find(
+              (job) => job.name === "home_assistant_core_install"
+            )
+          : undefined;
+      if (coreInstallJob) {
+        this._progress = coreInstallJob.progress;
+      } else {
+        this._progress = -1;
+      }
+    } catch (err: any) {
+      await this._checkCoreAvailability();
+
+      if (!this._coreCheckActive) {
+        this._progress = -1;
+        // eslint-disable-next-line no-console
+        console.error("Failed to fetch supervisor jobs info", err);
+      }
+    }
+
+    this._scheduleFetchSupervisorJobsInfo();
+  }
+
  private async _checkCoreAvailability() {
    try {
      const response = await fetch("/manifest.json");
@@ -222,21 +268,27 @@ class HaLandingPage extends LandingPageBaseElement {
        flex-direction: column;
        gap: var(--ha-space-4);
      }
-      ha-language-picker {
-        min-width: 200px;
-      }
      ha-alert p {
        text-align: unset;
      }
      .footer ha-svg-icon {
        --mdc-icon-size: var(--ha-space-5);
      }
+      ha-language-picker {
+        margin-inline-start: calc(-1 * var(--ha-space-4));
+      }
+      ha-button {
+        margin-inline-end: calc(-1 * var(--ha-space-2));
+      }
      ha-fade-in {
        min-height: calc(100vh - 64px - 88px);
        display: flex;
        justify-content: center;
        align-items: center;
      }
+      ha-progress-bar {
+        --ha-progress-bar-track-height: 20px;
+      }
    `,
  ];
 }
@@ -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",
@@ -40,15 +40,15 @@
    "@codemirror/view": "6.43.0",
    "@date-fns/tz": "1.5.0",
    "@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-datetimeformat": "7.4.6",
+    "@formatjs/intl-displaynames": "7.3.8",
+    "@formatjs/intl-durationformat": "0.10.12",
    "@formatjs/intl-getcanonicallocales": "3.2.9",
-    "@formatjs/intl-listformat": "8.3.9",
+    "@formatjs/intl-listformat": "8.3.8",
    "@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-numberformat": "9.3.9",
+    "@formatjs/intl-pluralrules": "6.3.8",
+    "@formatjs/intl-relativetimeformat": "12.3.8",
    "@fullcalendar/core": "6.1.20",
    "@fullcalendar/daygrid": "6.1.20",
    "@fullcalendar/interaction": "6.1.20",
@@ -62,16 +62,17 @@
    "@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/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.5",
+    "@tsparticles/preset-links": "4.0.5",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -82,7 +83,7 @@
    "core-js": "3.49.0",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
-    "date-fns": "4.4.0",
+    "date-fns": "4.3.0",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
@@ -114,7 +115,7 @@
    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
-    "tinykeys": "4.0.0",
+    "tinykeys": "patch:tinykeys@npm%3A4.0.0#~/.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.1",
    "workbox-core": "7.4.1",
@@ -125,20 +126,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",
    "@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.4",
+    "@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 +152,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",
+    "@types/webspeechapi": "0.0.29",
    "@vitest/coverage-v8": "4.1.7",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
    "del": "8.0.1",
-    "eslint": "10.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",
@@ -179,8 +183,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.5",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.18.1",
@@ -191,10 +195,10 @@
    "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.4",
    "vite-tsconfig-paths": "6.1.1",
    "vitest": "4.1.7",
    "webpack-stats-plugin": "1.1.3",
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.0"
+version      = "20260527.7"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -11,7 +11,6 @@ import {
 } 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 +26,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 +63,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
@@ -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;
-  });
@@ -0,0 +1,144 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { debounce } from "../../common/util/debounce";
+import type { Condition } from "../../data/automation";
+import { subscribeCondition } from "../../data/automation";
+import type { HomeAssistant } from "../../types";
+import "../ha-tooltip";
+import "./ha-automation-row-live-test";
+import type { LiveTestState } from "./ha-automation-row-live-test";
+
+@customElement("ha-automation-condition-live-test")
+export class HaAutomationConditionLiveTest extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public condition!: Condition;
+
+  @state() private _liveTestResult: {
+    state: LiveTestState;
+    message?: string;
+  } = { state: "unknown" };
+
+  private _conditionUnsub?: Promise<UnsubscribeFunc>;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._subscribeCondition();
+  }
+
+  protected override updated(changedProps: PropertyValues<this>): void {
+    super.updated(changedProps);
+    if (
+      changedProps.has("condition") &&
+      changedProps.get("condition") !== undefined
+    ) {
+      this._resetSubscription();
+      this._debounceSubscribeCondition();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._debounceSubscribeCondition.cancel();
+    this._resetSubscription();
+  }
+
+  protected render() {
+    return html`
+      <div id="indicator">
+        <slot></slot>
+        <ha-automation-row-live-test
+          .state=${this._liveTestResult.state}
+          .label=${this.hass.localize(
+            `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
+          )}
+        ></ha-automation-row-live-test>
+      </div>
+      ${this._liveTestResult.message
+        ? html`<ha-tooltip for="indicator"
+            >${this._liveTestResult.message}</ha-tooltip
+          >`
+        : nothing}
+    `;
+  }
+
+  private _resetSubscription() {
+    this._liveTestResult = {
+      state: "unknown",
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
+      ),
+    };
+    if (this._conditionUnsub) {
+      this._conditionUnsub.then((unsub) => unsub());
+      this._conditionUnsub = undefined;
+    }
+  }
+
+  private _debounceSubscribeCondition = debounce(
+    () => this._subscribeCondition(),
+    500
+  );
+
+  private async _subscribeCondition() {
+    this._resetSubscription();
+
+    if (!this.condition) {
+      return;
+    }
+
+    const conditionUnsub = subscribeCondition(
+      this.hass.connection,
+      (result) => {
+        if (result.error) {
+          this._handleLiveTestError(result.error);
+        } else {
+          this._liveTestResult = {
+            state: result.result ? "pass" : "fail",
+            message: this.hass.localize(
+              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
+            ),
+          };
+        }
+      },
+      this.condition
+    );
+    conditionUnsub.catch((err: any) => {
+      this._handleLiveTestError(err);
+      if (this._conditionUnsub === conditionUnsub) {
+        this._conditionUnsub = undefined;
+      }
+    });
+    this._conditionUnsub = conditionUnsub;
+  }
+
+  private _handleLiveTestError(error: any) {
+    const invalid =
+      typeof error !== "string" && error.code === "invalid_format";
+    this._liveTestResult = {
+      state: invalid ? "invalid" : "unknown",
+      message: this.hass.localize(
+        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
+      ),
+    };
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+    #indicator {
+      display: inline-flex;
+      position: relative;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-live-test": HaAutomationConditionLiveTest;
+  }
+}
@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";

 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";

@@ -13,7 +12,6 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 *
 * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
 * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
 */
@customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -21,8 +19,6 @@ export class HaAutomationRowLiveTest extends LitElement {

  @property() public label = "";

-  @property() public message?: string;
-
  protected render() {
    return html`
      <div
@@ -31,39 +27,38 @@ export class HaAutomationRowLiveTest extends LitElement {
        tabindex="0"
        aria-label=${this.label}
      ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
    `;
  }

  static styles = css`
    :host {
      position: absolute;
+      top: -5px;
      inset-inline-end: -6px;
      display: inline-block;
    }
    #indicator {
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
      border-radius: var(--ha-border-radius-circle);
-      border: 3px solid;
+      border: var(--ha-border-width-md) solid;
      box-sizing: border-box;
      background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
      transition: all var(--ha-animation-duration-normal) ease-in-out;
    }
    :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-fill-success-loud-resting);
-      border-color: var(--ha-color-fill-success-loud-resting);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
    }
    :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-fill-warning-loud-resting);
+      border-color: var(--ha-color-orange-60);
    }
    :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-fill-danger-loud-resting);
+      border-color: var(--ha-color-red-60);
    }
    :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-fill-neutral-loud-resting);
+      border-color: var(--ha-color-neutral-60);
    }
  `;
 }
@@ -161,11 +161,14 @@ export class HaAutomationRow extends LitElement {
    }
    .leading-icon-wrapper {
      padding-top: var(--ha-space-3);
+      position: relative;
+      z-index: 1;
    }
    ::slotted([slot="leading-icon"]) {
      color: var(--ha-color-on-neutral-quiet);
    }
-    :host([building-block]) ::slotted([slot="leading-icon"]) {
+    :host([building-block]) ::slotted([slot="leading-icon"].action-icon),
+    :host([building-block]) ::slotted(#condition-icon) {
      --mdc-icon-size: var(--ha-space-5);
      color: var(--white-color);
      transform: rotate(-45deg);
@@ -1558,6 +1558,25 @@ export class HaChartBase extends LitElement {
    .chart-legend .legend-toggle ha-svg-icon {
      --mdc-icon-size: 18px;
    }
+    /* On touch devices, enlarge the toggle tap target via taller rows and
+       leading padding (which also separates it from the previous item), while
+       keeping the icon tight to its own label so the pairing stays clear.
+       Drop the now-pointless row gap and li padding. */
+    @media (pointer: coarse) {
+      .chart-legend ul {
+        row-gap: 0;
+      }
+      /* Only grow the toggle rows, not the expand/collapse chip's row. */
+      .chart-legend li:has(.legend-toggle) {
+        height: 40px;
+        padding: 0;
+      }
+      .chart-legend .legend-toggle {
+        padding: 11px;
+        padding-inline-end: 4px;
+        margin: 0;
+      }
+    }
    ha-assist-chip {
      height: 100%;
      --_label-text-weight: 500;
@@ -101,18 +101,22 @@ export class HaSankeyChart extends LitElement {
    const value = this.valueFormatter
      ? this.valueFormatter(data.value)
      : data.value;
+    // Keep numbers and units left-to-right, even in RTL locales.
+    const formattedValue = html`<div style="direction:ltr; display: inline;">
+      ${value}
+    </div>`;
    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}`;
+        ${node?.label ?? data.id}<br />${formattedValue}`;
    }
    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}`;
+        ${target?.label ?? data.target}<br />${formattedValue}`;
    }
    return null;
  };
@@ -6,6 +6,7 @@ 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 type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 import "./ha-chart-tooltip-marker";

@@ -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?: (
@@ -1465,6 +1465,11 @@ export class HaDataTable extends LitElement {
        .mdc-data-table__table.auto-height .scroller {
          overflow-y: hidden !important;
        }
+
+        .mdc-data-table__table.auto-height lit-virtualizer {
+          overscroll-behavior-y: auto;
+        }
+
        .grows {
          flex-grow: 1;
          flex-shrink: 1;
@@ -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(
@@ -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
      );
    }
  }
@@ -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(
@@ -112,12 +112,16 @@ export class HaCameraStream extends LitElement {
      return nothing;
    }
    if (stream.type === MJPEG_STREAM) {
+      const streamUrl = __DEMO__
+        ? this.stateObj.attributes.entity_picture
+        : this._connected
+          ? computeMJPEGStreamUrl(this.stateObj)
+          : this._posterUrl;
+      if (!streamUrl) {
+        return nothing;
+      }
      return html`<img
-        .src=${__DEMO__
-          ? this.stateObj.attributes.entity_picture!
-          : this._connected
-            ? computeMJPEGStreamUrl(this.stateObj)
-            : this._posterUrl || ""}
+        .src=${streamUrl}
        style=${styleMap({
          aspectRatio: this.aspectRatio,
          objectFit: this.fitMode,
@@ -1600,8 +1600,8 @@ export class HaCodeEditor extends ReactiveElement {
          // Filter states based on what's typed
          const filteredStates = typedText
            ? states.filter((entityState) =>
-                entityState.label
-                  .toLowerCase()
+                entityState.displayLabel
+                  ?.toLowerCase()
                  .startsWith(typedText.toLowerCase())
              )
            : states;
@@ -1658,8 +1658,8 @@ export class HaCodeEditor extends ReactiveElement {
              // Filter states based on what's typed
              const filteredStates = typedText
                ? states.filter((entityState) =>
-                    entityState.label
-                      .toLowerCase()
+                    entityState.displayLabel
+                      ?.toLowerCase()
                      .startsWith(typedText.toLowerCase())
                  )
                : states;
@@ -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) {
@@ -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
@@ -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;
-        }
      `,
    ];
  }
@@ -101,15 +101,9 @@ export class HaLabelsPicker extends LitElement {
      language: string
    ) =>
      value
-        ?.map(
-          (id) =>
-            labels?.find((label) => label.label_id === id) || {
-              label_id: id,
-              name: id,
-              color: "rgba(var(--rgb-primary-text-color), 0.15)",
-            }
-        )
-        .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
+        ?.map((id) => labels?.find((label) => label.label_id === id))
+        .filter((label): label is LabelRegistryEntry => label !== undefined)
+        .sort((a, b) => stringCompare(a.name, b.name, language))
        .map((label) => ({
          ...label,
          style: getLabelColorStyle(label.color),
@@ -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,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,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:
@@ -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,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
+        )
      );
    }

@@ -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
@@ -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) => {
@@ -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,
@@ -17,16 +17,13 @@ import {
  mdiWeatherSunny,
  mdiWebhook,
 } 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 { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { transform } from "../common/decorators/transform";
-import { configContext, connectionContext } from "../data/context";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";

@@ -53,24 +50,12 @@ export const TRIGGER_ICONS = {

@customElement("ha-trigger-icon")
 export class HaTriggerIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property() public trigger?: string;

  @property() public icon?: string;

-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<{ config: HassConfig }, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  @transform<{ connection: Connection }, Connection>({
-    transformer: ({ connection }) => connection,
-  })
-  private _connection?: Connection;
-
  protected render() {
    if (this.icon) {
      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -80,18 +65,20 @@ export class HaTriggerIcon extends LitElement {
      return nothing;
    }

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

-    const icon = triggerIcon(this._connection, this._config, this.trigger).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
+    const icon = triggerIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.trigger
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
      }
-    );
+      return this._renderFallback();
+    });

    return html`${until(icon)}`;
  }
@@ -85,15 +85,25 @@ export class HaTTSVoicePicker extends LitElement {
      await listTTSVoices(this.hass, this.engineId, this.language)
    ).voices;

-    if (!this.value) {
+    const valueIsValid =
+      this.value &&
+      this._voices?.some((voice) => voice.voice_id === this.value);
+
+    if (valueIsValid) {
      return;
    }

-    if (
-      !this._voices ||
-      !this._voices.find((voice) => voice.voice_id === this.value)
-    ) {
-      this.value = undefined;
+    // The current value is missing or no longer valid for the loaded voices.
+    // When a voice is required, auto-select the first one (the <ha-select>
+    // already displays it) so the value is propagated to the parent;
+    // otherwise clear it.
+    const newValue =
+      this.required && this._voices?.length
+        ? this._voices[0].voice_id
+        : undefined;
+
+    if (newValue !== this.value) {
+      this.value = newValue;
      fireEvent(this, "value-changed", { value: this.value });
    }
  }
@@ -1,8 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../../common/translations/localize";
 import type { LogbookEntry } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
@@ -19,9 +17,6 @@ export class HaTraceLogbook extends LitElement {

  @property({ attribute: false }) public logbookEntries!: LogbookEntry[];

-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
  protected render(): TemplateResult {
    return this.logbookEntries.length
      ? html`
@@ -31,10 +26,13 @@ export class HaTraceLogbook extends LitElement {
            .entries=${this.logbookEntries}
            .narrow=${this.narrow}
          ></ha-logbook-renderer>
-          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+          <hat-logbook-note
+            .hass=${this.hass}
+            .domain=${this.trace.domain}
+          ></hat-logbook-note>
        `
      : html`<div class="padded-box">
-          ${this._localize(
+          ${this.hass.localize(
            "ui.panel.config.automation.trace.path.no_logbook_entries"
          )}
        </div>`;
@@ -374,7 +374,10 @@ export class HaTracePathDetails extends LitElement {
            .entries=${entries}
            .narrow=${this.narrow}
          ></ha-logbook-renderer>
-          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+          <hat-logbook-note
+            .hass=${this.hass}
+            .domain=${this.trace.domain}
+          ></hat-logbook-note>
        `
      : html`<div class="padded-box">
          ${this.hass!.localize(
@@ -28,7 +28,10 @@ export class HaTraceTimeline extends LitElement {
        allow-pick
      >
      </hat-trace-timeline>
-      <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+      <hat-logbook-note
+        .hass=${this.hass}
+        .domain=${this.trace.domain}
+      ></hat-logbook-note>
    `;
  }

@@ -1,22 +1,20 @@
 import { css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import type { HomeAssistant } from "../../types";

@customElement("hat-logbook-note")
 class HatLogbookNote extends LitElement {
-  @property() public domain: "automation" | "script" = "automation";
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property() public domain: "automation" | "script" = "automation";

  render() {
    if (this.domain === "script") {
-      return this._localize(
+      return this.hass.localize(
        "ui.panel.config.automation.trace.messages.not_all_entries_are_related_script_note"
      );
    }
-    return this._localize(
+    return this.hass.localize(
      "ui.panel.config.automation.trace.messages.not_all_entries_are_related_automation_note"
    );
  }
@@ -1,19 +1,16 @@
-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 { styleMap } from "lit/directives/style-map";
 import type { BasePerson } from "../../data/person";
 import { computeUserInitials } from "../../data/user";
-import { connectionContext } from "../../data/context";
+import type { HomeAssistant } from "../../types";

@customElement("ha-person-badge")
 class PersonBadge extends LitElement {
-  @property({ attribute: false }) public person?: BasePerson;
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection?: ContextType<typeof connectionContext>;
+  @property({ attribute: false }) public person?: BasePerson;

  protected render() {
    if (!this.person) {
@@ -22,10 +19,10 @@ class PersonBadge extends LitElement {

    const picture = this.person.picture;

-    if (picture && this._connection) {
+    if (picture) {
      return html`<div
        style=${styleMap({
-          backgroundImage: `url(${this._connection.hassUrl(picture)})`,
+          backgroundImage: `url(${this.hass.hassUrl(picture)})`,
        })}
        class="picture"
      ></div>`;
@@ -1,62 +1,57 @@
-import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { consumeEntityState } from "../../common/decorators/consume-context-entry";
 import type { User } from "../../data/user";
 import { computeUserInitials } from "../../data/user";
-import { connectionContext, statesContext } from "../../data/context";
-import type { CurrentUser } from "../../types";
+import type { CurrentUser, HomeAssistant } from "../../types";

@customElement("ha-user-badge")
 class UserBadge extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
  @property({ attribute: false }) public user?: User | CurrentUser;

-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection?: ContextType<typeof connectionContext>;
+  @state() private _personPicture?: string;

-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states?: HassEntities;
+  private _personEntityId?: string;

-  @state() private _personEntityId?: string;
-
-  @state()
-  @consumeEntityState({ entityIdPath: ["_personEntityId"] })
-  private _personState?: HassEntity;
-
-  public willUpdate(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues<this>) {
    super.willUpdate(changedProps);
-    // Re-scan for the user's person entity when the user changes, or when the
-    // states change while we don't have a (still-present) person entity. Once
-    // resolved, `_personState` keeps the picture up to date via
-    // `consumeEntityState`, so there's no need to rescan on every state update.
+    if (changedProps.has("user")) {
+      this._getPersonPicture();
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
    if (
-      changedProps.has("user") ||
-      (changedProps.has("_states") &&
-        (!this._personEntityId || !this._states?.[this._personEntityId]))
+      this._personEntityId &&
+      oldHass &&
+      this.hass.states[this._personEntityId] !==
+        oldHass.states[this._personEntityId]
    ) {
-      this._updatePersonEntityId();
+      const entityState = this.hass.states[this._personEntityId];
+      if (entityState) {
+        this._personPicture = entityState.attributes.entity_picture;
+      } else {
+        this._getPersonPicture();
+      }
+    } else if (!this._personEntityId && oldHass) {
+      this._getPersonPicture();
    }
  }

  protected render() {
-    if (!this.user) {
+    if (!this.hass || !this.user) {
      return nothing;
    }
-    const picture =
-      this._personEntityId &&
-      (this._personState?.attributes.entity_picture as string | undefined);
+    const picture = this._personPicture;

-    if (picture && this._connection) {
+    if (picture) {
      return html`<div
        style=${styleMap({
-          backgroundImage: `url(${this._connection.hassUrl(picture)})`,
+          backgroundImage: `url(${this.hass.hassUrl(picture)})`,
        })}
        class="picture"
      ></div>`;
@@ -69,18 +64,20 @@ class UserBadge extends LitElement {
    </div>`;
  }

-  private _updatePersonEntityId() {
+  private _getPersonPicture() {
    this._personEntityId = undefined;
-    if (!this.user || !this._states) {
+    this._personPicture = undefined;
+    if (!this.hass || !this.user) {
      return;
    }
-    for (const entity of Object.values(this._states)) {
+    for (const entity of Object.values(this.hass.states)) {
      if (
        entity.attributes.user_id === this.user.id &&
        computeStateDomain(entity) === "person"
      ) {
        this._personEntityId = entity.entity_id;
-        return;
+        this._personPicture = entity.attributes.entity_picture;
+        break;
      }
    }
  }
@@ -64,7 +64,11 @@ class HaUserPicker extends LitElement {
    }

    return html`
-      <ha-user-badge slot="start" .user=${user}></ha-user-badge>
+      <ha-user-badge
+        slot="start"
+        .hass=${this.hass}
+        .user=${user}
+      ></ha-user-badge>
      <span slot="headline">${user.name}</span>
    `;
  };
@@ -90,7 +94,11 @@ class HaUserPicker extends LitElement {

    return html`
      <ha-combo-box-item type="button" compact>
-        <ha-user-badge slot="start" .user=${item.user}></ha-user-badge>
+        <ha-user-badge
+          slot="start"
+          .hass=${this.hass}
+          .user=${item.user}
+        ></ha-user-badge>
        <span slot="headline">${item.primary}</span>
      </ha-combo-box-item>
    `;
@@ -15,33 +15,20 @@ import {
 import type { HaEntityPickerEntityFilterFunc } from "../entity/entity";
 import type { EntityRegistryDisplayEntry } from "../entity/entity_registry";

-export interface GetAreasOptions {
-  includeDomains?: string[];
-  excludeDomains?: string[];
-  includeDeviceClasses?: string[];
-  deviceFilter?: HaDevicePickerDeviceFilterFunc;
-  entityFilter?: HaEntityPickerEntityFilterFunc;
-  excludeAreas?: string[];
-  idPrefix?: string;
-}
-
 export const getAreas = (
  haAreas: HomeAssistant["areas"],
  haFloors: HomeAssistant["floors"],
  haDevices: HomeAssistant["devices"],
  haEntities: HomeAssistant["entities"],
  haStates: HomeAssistant["states"],
-  options?: GetAreasOptions
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  includeDeviceClasses?: string[],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  excludeAreas?: string[],
+  idPrefix = ""
 ): PickerComboBoxItem[] => {
-  const {
-    includeDomains,
-    excludeDomains,
-    includeDeviceClasses,
-    deviceFilter,
-    entityFilter,
-    excludeAreas,
-    idPrefix = "",
-  } = options ?? {};
  let deviceEntityLookup: DeviceEntityDisplayLookup = {};
  let inputDevices: DeviceRegistryEntry[] | undefined;
  let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -17,7 +17,7 @@ export type StreamType = typeof STREAM_TYPE_HLS | typeof STREAM_TYPE_WEB_RTC;

 interface CameraEntityAttributes extends HassEntityAttributeBase {
  model_name: string;
-  access_token: string;
+  access_token?: string;
  brand: string;
  motion_detection: boolean;
  frontend_stream_type: string;
@@ -78,8 +78,12 @@ export const cameraUrlWithWidthHeight = (
  height: number
 ) => `${base_url}&width=${width}&height=${height}`;

-export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
-  `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
+export const computeMJPEGStreamUrl = (
+  entity: CameraEntity
+): string | undefined =>
+  entity.attributes.access_token
+    ? `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`
+    : undefined;

 export const fetchThumbnailUrlWithCache = async (
  hass: HomeAssistant,
@@ -4,9 +4,8 @@ import type { Store } from "home-assistant-js-websocket/dist/store";
 import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import { debounce } from "../common/util/debounce";
-import type { RegistryEntry } from "./registry";

-export interface CategoryRegistryEntry extends RegistryEntry {
+export interface CategoryRegistryEntry {
  category_id: string;
  name: string;
  icon: string | null;
@@ -1,6 +1,5 @@
 import { createContext } from "@lit/context";
 import type { HassConfig } from "home-assistant-js-websocket";
-import type { HASSDomEvent } from "../../common/dom/fire_event";
 import type {
  HomeAssistant,
  HomeAssistantApi,
@@ -11,12 +10,10 @@ import type {
  HomeAssistantRegistries,
  HomeAssistantUI,
 } from "../../types";
-import type { RelatedIdSets } from "../../common/search/related-context";
 import type { ConfigEntry } from "../config_entries";
 import type { EntityRegistryEntry } from "../entity/entity_registry";
 import type { DomainManifestLookup } from "../integration";
 import type { LabelRegistryEntry } from "../label/label_registry";
-import type { ItemType } from "../search";

 /**
 * Entity, device, area, and floor registries
@@ -97,11 +94,6 @@ export const areasContext = createContext<HomeAssistant["areas"]>("areas");
 */
 export const floorsContext = createContext<HomeAssistant["floors"]>("floors");

-/**
- * Whether the main Home Assistant viewport is using the narrow layout.
- */
-export const narrowViewportContext = createContext<boolean>("narrowViewport");
-
 // #region lazy-contexts

 /**
@@ -170,30 +162,3 @@ export const panelsContext = createContext<HomeAssistant["panels"]>("panels");
 export const authContext = createContext<HomeAssistant["auth"]>("auth");

 // #endregion deprecated-contexts
-
-// #region related-context
-
-export interface RelatedContextItem {
-  itemType: ItemType;
-  itemId: string;
-}
-
-/**
- * Resolved related entities/devices/areas for the current page context.
- * Set by `RelatedContextProvider` when a page fires `hass-related-context`.
- * Cleared on navigation.
- */
-export const relatedContext = createContext<RelatedIdSets | undefined>(
-  "related"
-);
-
-declare global {
-  interface HASSDomEvents {
-    "hass-related-context": RelatedContextItem | undefined;
-  }
-  interface HTMLElementEventMap {
-    "hass-related-context": HASSDomEvent<RelatedContextItem | undefined>;
-  }
-}
-
-// #endregion related-context
@@ -32,17 +32,6 @@ export interface DeviceAreaLabel {
  viaDeviceAreaName?: string;
 }

-export interface GetDevicesOptions {
-  includeDomains?: string[];
-  excludeDomains?: string[];
-  includeDeviceClasses?: string[];
-  deviceFilter?: HaDevicePickerDeviceFilterFunc;
-  entityFilter?: HaEntityPickerEntityFilterFunc;
-  excludeDevices?: string[];
-  value?: string;
-  idPrefix?: string;
-}
-
 export const computeDeviceAreaLabel = (
  device: DeviceRegistryEntry,
  areas: HomeAssistant["areas"],
@@ -107,19 +96,15 @@ export const deviceComboBoxKeys: FuseWeightedKey[] = [
 export const getDevices = (
  hass: HomeAssistant,
  configEntryLookup: Record<string, ConfigEntry>,
-  options?: GetDevicesOptions
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  includeDeviceClasses?: string[],
+  deviceFilter?: HaDevicePickerDeviceFilterFunc,
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  excludeDevices?: string[],
+  value?: string,
+  idPrefix = ""
 ): DevicePickerItem[] => {
-  const {
-    includeDomains,
-    excludeDomains,
-    includeDeviceClasses,
-    deviceFilter,
-    entityFilter,
-    excludeDevices,
-    value,
-    idPrefix = "",
-  } = options ?? {};
-
  const devices = Object.values(hass.devices);
  const entities = Object.values(hass.entities);

@@ -222,12 +222,6 @@ export interface EnergyPreferences {
  device_consumption_water: DeviceConsumptionEnergyPreference[];
 }

-export const EMPTY_PREFERENCES: EnergyPreferences = {
-  energy_sources: [],
-  device_consumption: [],
-  device_consumption_water: [],
-};
-
 export interface EnergyInfo {
  cost_sensors: Record<string, string>;
  solar_forecast_domains: string[];
@@ -808,16 +802,7 @@ export const getEnergyDataCollection = (
      if (!collection.prefs) {
        // This will raise if not found.
        // Detect by checking `e.code === "not_found"
-        try {
-          collection.prefs = await getEnergyPreferences(hass);
-        } catch (err: any) {
-          if (err.code === "not_found") {
-            return {
-              prefs: EMPTY_PREFERENCES,
-            } as EnergyData;
-          }
-          throw err;
-        }
+        collection.prefs = await getEnergyPreferences(hass);
      }

      scheduleHourlyRefresh(collection);
@@ -41,34 +41,18 @@ export const entityComboBoxKeys: FuseWeightedKey[] = [
  },
 ];

-export interface GetEntitiesOptions {
-  includeDomains?: string[];
-  excludeDomains?: string[];
-  entityFilter?: HaEntityPickerEntityFilterFunc;
-  includeDeviceClasses?: string[];
-  includeUnitOfMeasurement?: string[];
-  includeEntities?: string[];
-  excludeEntities?: string[];
-  value?: string;
-  idPrefix?: string;
-}
-
 export const getEntities = (
  hass: HomeAssistant,
-  options?: GetEntitiesOptions
+  includeDomains?: string[],
+  excludeDomains?: string[],
+  entityFilter?: HaEntityPickerEntityFilterFunc,
+  includeDeviceClasses?: string[],
+  includeUnitOfMeasurement?: string[],
+  includeEntities?: string[],
+  excludeEntities?: string[],
+  value?: string,
+  idPrefix = ""
 ): EntityComboBoxItem[] => {
-  const {
-    includeDomains,
-    excludeDomains,
-    entityFilter,
-    includeDeviceClasses,
-    includeUnitOfMeasurement,
-    includeEntities,
-    excludeEntities,
-    value,
-    idPrefix = "",
-  } = options ?? {};
-
  let items: EntityComboBoxItem[];

  let entityIds = Object.keys(hass.states);
@@ -4,12 +4,14 @@ import type {
 } from "home-assistant-js-websocket";

 interface ImageEntityAttributes extends HassEntityAttributeBase {
-  access_token: string;
+  access_token?: string;
 }

 export interface ImageEntity extends HassEntityBase {
  attributes: ImageEntityAttributes;
 }

-export const computeImageUrl = (entity: ImageEntity): string =>
-  `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`;
+export const computeImageUrl = (entity: ImageEntity): string | undefined =>
+  entity.attributes.access_token
+    ? `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`
+    : undefined;
@@ -36,11 +36,11 @@ export type ItemType =
  | "script_blueprint";

 export const findRelated = (
-  hass: Pick<HomeAssistant, "callWS">,
+  hass: HomeAssistant,
  itemType: ItemType,
  itemId: string
 ): Promise<RelatedResult> =>
-  hass.callWS<RelatedResult>({
+  hass.callWS({
    type: "search/related",
    item_type: itemType,
    item_id: itemId,
@@ -87,19 +87,6 @@ const HOME_ASSISTANT_CORE_TITLE = "Home Assistant Core";
 const HOME_ASSISTANT_SUPERVISOR_TITLE = "Home Assistant Supervisor";
 const HOME_ASSISTANT_OS_TITLE = "Home Assistant Operating System";

-// The hassio integration sets these as hard-coded `_attr_title` on the Core,
-// Operating System, and Supervisor update entities. They are not translated,
-// so a title comparison is the reliable way to identify them without depending
-// on the (lazily-fetched) entity sources.
-export const isSystemUpdate = (entity: UpdateEntity): boolean => {
-  const title = entity.attributes.title || "";
-  return (
-    title === HOME_ASSISTANT_CORE_TITLE ||
-    title === HOME_ASSISTANT_OS_TITLE ||
-    title === HOME_ASSISTANT_SUPERVISOR_TITLE
-  );
-};
-
 export const filterUpdateEntities = (
  entities: HassEntities,
  language?: string
@@ -146,11 +133,6 @@ export const filterUpdateEntitiesParameterized = (
    return updateCanInstall(entity, showSkipped);
  });

-export const installUpdates = (hass: HomeAssistant, entityIds: string[]) =>
-  hass.callService("update", "install", {
-    entity_id: entityIds,
-  });
-
 export const checkForEntityUpdates = async (
  element: HTMLElement,
  hass: HomeAssistant
@@ -106,7 +106,9 @@ class EntityPreviewRow extends LitElement {
    }
  `;

-  private _renderEntityState(stateObj: HassEntity): TemplateResult | string {
+  private _renderEntityState(
+    stateObj: HassEntity
+  ): TemplateResult | string | typeof nothing {
    const domain = stateObj.entity_id.split(".", 1)[0];
    const disabled = stateObj.state === UNAVAILABLE;
    const noValue =
@@ -222,7 +224,10 @@ class EntityPreviewRow extends LitElement {
    }

    if (domain === "image") {
-      const image: string = computeImageUrl(stateObj as ImageEntity);
+      const image = computeImageUrl(stateObj as ImageEntity);
+      if (!image) {
+        return nothing;
+      }
      return html`
        <img
          alt=${ifDefined(stateObj?.attributes.friendly_name)}
@@ -54,12 +54,14 @@ export class HaMoreInfoStateHeader extends LitElement {
          ${this._absoluteTime
            ? html`
                <ha-absolute-time
+                  .hass=${this.hass}
                  .datetime=${this.changedOverride ??
                  this.stateObj.last_changed}
                ></ha-absolute-time>
              `
            : html`
                <ha-relative-time
+                  .hass=${this.hass}
                  .datetime=${this.changedOverride ??
                  this.stateObj.last_changed}
                  capitalize
@@ -23,6 +23,7 @@ class MoreInfoAutomation extends LitElement {
      <div class="flex">
        <div>${this.hass.localize("ui.card.automation.last_triggered")}:</div>
        <ha-relative-time
+          .hass=${this.hass}
          .datetime=${this.stateObj.attributes.last_triggered}
          capitalize
        ></ha-relative-time>
@@ -15,9 +15,13 @@ class MoreInfoImage extends LitElement {
    if (!this.hass || !this.stateObj) {
      return nothing;
    }
+    const imageUrl = computeImageUrl(this.stateObj);
+    if (!imageUrl) {
+      return nothing;
+    }
    return html`<img
      alt=${this.stateObj.attributes.friendly_name || this.stateObj.entity_id}
-      src=${this.hass.hassUrl(computeImageUrl(this.stateObj))}
+      src=${this.hass.hassUrl(imageUrl)}
    /> `;
  }

@@ -36,6 +36,7 @@ class MoreInfoSun extends LitElement {
                    )}</span
              >
              <ha-relative-time
+                .hass=${this.hass}
                .datetime=${item === "ris" ? risingDate : settingDate}
              ></ha-relative-time>
            </div>
@@ -201,6 +201,7 @@ class MoreInfoWeather extends LitElement {
            <div class="time-ago">
              <ha-relative-time
                id="relative-time"
+                .hass=${this.hass}
                .datetime=${this.stateObj.last_changed}
                capitalize
              ></ha-relative-time>
@@ -212,6 +213,7 @@ class MoreInfoWeather extends LitElement {
                    )}:
                  </span>
                  <ha-relative-time
+                    .hass=${this.hass}
                    .datetime=${this.stateObj.last_changed}
                    capitalize
                  ></ha-relative-time>
@@ -223,6 +225,7 @@ class MoreInfoWeather extends LitElement {
                    )}:
                  </span>
                  <ha-relative-time
+                    .hass=${this.hass}
                    .datetime=${this.stateObj.last_updated}
                    capitalize
                  ></ha-relative-time>
@@ -40,7 +40,9 @@ export class HaMoreInfoAddTo extends LitElement {
  @state() private _loading = true;

  private async _loadActions() {
-    this._defaultActions = getDefaultAddToActions();
+    this._defaultActions = this._config?.user?.is_admin
+      ? getDefaultAddToActions()
+      : [];
    this._externalActions = [];

    if (this._config?.auth.external?.config.hasEntityAddTo) {
@@ -262,9 +262,8 @@ export class MoreInfoDialog extends SubscribeMixin(
  }

  private _shouldShowAddEntityTo(): boolean {
-    // When new_triggers_conditions labs feature is promoted, this whole check can be removed.
    return (
-      this._newTriggersAndConditions ||
+      (this._newTriggersAndConditions && !!this.hass.user?.is_admin) ||
      !!this.hass.auth.external?.config.hasEntityAddTo
    );
  }
@@ -30,6 +30,7 @@ export class HuiPersistentNotificationItem extends LitElement {
          <span>
            <ha-relative-time
              id="relative-time"
+              .hass=${this.hass}
              .datetime=${this.notification.created_at}
              capitalize
            ></ha-relative-time>
@@ -1,5 +1,4 @@
 import { mdiDevices } from "@mdi/js";
-import { consume } from "@lit/context";
 import Fuse from "fuse.js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -48,9 +47,7 @@ import {
  type ActionCommandComboBoxItem,
  type NavigationComboBoxItem,
 } from "../../data/quick_bar";
-import type { RelatedIdSets } from "../../common/search/related-context";
-import { sortRelatedFirst } from "../../common/search/related-context";
-import { relatedContext } from "../../data/context";
+import type { RelatedResult } from "../../data/search";
 import {
  multiTermSortedSearch,
  type FuseWeightedKey,
@@ -73,10 +70,6 @@ const SEPARATOR = "________";
 export class QuickBar extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state()
-  @consume({ context: relatedContext, subscribe: true })
-  private _relatedIdSets?: RelatedIdSets;
-
  @state() private _open = false;

  @state() private _loading = true;
@@ -87,6 +80,8 @@ export class QuickBar extends LitElement {

  @state() private _opened = false;

+  @state() private _relatedResult?: RelatedResult;
+
  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;

  private get _showEntityId() {
@@ -113,6 +108,8 @@ export class QuickBar extends LitElement {
    this._selectedSection = effectiveQuickBarMode(this.hass.user, params.mode);
    this._showHint = params.showHint ?? false;

+    this._relatedResult = params.contextItem ? params.related : undefined;
+
    this._open = true;
  }

@@ -435,7 +432,7 @@ export class QuickBar extends LitElement {
    this._selectedSection = section as QuickBarSection | undefined;
    return this._getItemsMemoized(
      this._configEntryLookup,
-      this._relatedIdSets,
+      this._relatedResult,
      searchString,
      this._selectedSection
    );
@@ -444,11 +441,12 @@ export class QuickBar extends LitElement {
  private _getItemsMemoized = memoizeOne(
    (
      configEntryLookup: Record<string, ConfigEntry>,
-      relatedIdSets: RelatedIdSets | undefined,
+      relatedResult: RelatedResult | undefined,
      filter?: string,
      section?: QuickBarSection
    ) => {
      const items: (string | PickerComboBoxItem)[] = [];
+      const relatedIdSets = this._getRelatedIdSets(relatedResult);

      if (!section || section === "navigate") {
        let navigateItems = this._generateNavigationCommandsMemoized(
@@ -500,7 +498,7 @@ export class QuickBar extends LitElement {
        let entityItems = this._getEntitiesMemoized(this.hass);

        // Mark related items
-        if (relatedIdSets?.entities.size) {
+        if (relatedIdSets.entities.size > 0) {
          entityItems = entityItems.map((item) => ({
            ...item,
            isRelated: relatedIdSets.entities.has(
@@ -510,7 +508,7 @@ export class QuickBar extends LitElement {
        }

        if (filter) {
-          entityItems = sortRelatedFirst(
+          entityItems = this._sortRelatedFirst(
            this._filterGroup(
              "entity",
              entityItems,
@@ -539,7 +537,7 @@ export class QuickBar extends LitElement {
        );

        // Mark related items
-        if (relatedIdSets?.devices.size) {
+        if (relatedIdSets.devices.size > 0) {
          deviceItems = deviceItems.map((item) => {
            const deviceId = item.id.split(SEPARATOR)[1];
            return {
@@ -550,7 +548,7 @@ export class QuickBar extends LitElement {
        }

        if (filter) {
-          deviceItems = sortRelatedFirst(
+          deviceItems = this._sortRelatedFirst(
            this._filterGroup("device", deviceItems, filter, deviceComboBoxKeys)
          );
        } else {
@@ -571,7 +569,7 @@ export class QuickBar extends LitElement {
        let areaItems = this._getAreasMemoized(this.hass);

        // Mark related items
-        if (relatedIdSets?.areas.size) {
+        if (relatedIdSets.areas.size > 0) {
          areaItems = areaItems.map((item) => {
            const areaId = item.id.split(SEPARATOR)[1];
            return {
@@ -582,7 +580,7 @@ export class QuickBar extends LitElement {
        }

        if (filter) {
-          areaItems = sortRelatedFirst(
+          areaItems = this._sortRelatedFirst(
            this._filterGroup("area", areaItems, filter, areaComboBoxKeys)
          );
        } else {
@@ -603,13 +601,41 @@ export class QuickBar extends LitElement {
    }
  );

+  private _getRelatedIdSets = memoizeOne((related?: RelatedResult) => ({
+    entities: new Set(related?.entity || []),
+    devices: new Set(related?.device || []),
+    areas: new Set(related?.area || []),
+  }));
+
  private _getEntitiesMemoized = memoizeOne((hass: HomeAssistant) =>
-    getEntities(hass, { idPrefix: `entity${SEPARATOR}` })
+    getEntities(
+      hass,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `entity${SEPARATOR}`
+    )
  );

  private _getDevicesMemoized = memoizeOne(
    (hass: HomeAssistant, configEntryLookup: Record<string, ConfigEntry>) =>
-      getDevices(hass, configEntryLookup, { idPrefix: `device${SEPARATOR}` })
+      getDevices(
+        hass,
+        configEntryLookup,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        `device${SEPARATOR}`
+      )
  );

  private _getAreasMemoized = memoizeOne((hass: HomeAssistant) =>
@@ -619,9 +645,13 @@ export class QuickBar extends LitElement {
      hass.devices,
      hass.entities,
      hass.states,
-      {
-        idPrefix: `area${SEPARATOR}`,
-      }
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `area${SEPARATOR}`
    )
  );

@@ -675,13 +705,10 @@ export class QuickBar extends LitElement {
    );
  }

-  private _sortBySortingLabel = (
-    entityA: PickerComboBoxItem,
-    entityB: PickerComboBoxItem
-  ) =>
+  private _sortBySortingLabel = (entityA, entityB) =>
    caseInsensitiveStringCompare(
-      entityA.sorting_label!,
-      entityB.sorting_label!,
+      (entityA as PickerComboBoxItem).sorting_label!,
+      (entityB as PickerComboBoxItem).sorting_label!,
      this.hass.locale.language
    );

@@ -692,6 +719,16 @@ export class QuickBar extends LitElement {
      return this._sortBySortingLabel(a, b);
    });

+  private _sortRelatedFirst = (items: PickerComboBoxItem[]) =>
+    [...items].sort((a, b) => {
+      const aRelated = Boolean(a.isRelated);
+      const bRelated = Boolean(b.isRelated);
+      if (aRelated === bRelated) {
+        return 0;
+      }
+      return aRelated ? -1 : 1;
+    });
+
  // #endregion data

  // #region interaction
@@ -1,4 +1,5 @@
 import { fireEvent } from "../../common/dom/fire_event";
+import type { ItemType, RelatedResult } from "../../data/search";
 import type { HomeAssistant } from "../../types";
 import { closeDialog } from "../make-dialog-manager";

@@ -9,10 +10,17 @@ export type QuickBarSection =
  | "navigate"
  | "command";

+export interface QuickBarContextItem {
+  itemType: ItemType;
+  itemId: string;
+}
+
 export interface QuickBarParams {
  entityFilter?: string;
  mode?: QuickBarSection;
  showHint?: boolean;
+  contextItem?: QuickBarContextItem;
+  related?: RelatedResult;
 }

 /** Non-admin users cannot scope the bar to command, device, or area (those sections are admin-only). */
@@ -19,6 +19,64 @@ declare const __WB_MANIFEST__: Parameters<typeof precacheAndRoute>[0];
 const noFallBackRegEx =
  /\/(api|static|auth|frontend_latest|frontend_es5|local)\/.*/;

+// Camera / image proxy endpoints that carry credentials in the URL.
+// We pre-validate the credential in the service worker so obviously invalid
+// requests (signature expired, token missing) never reach the server and
+// don't trigger spurious "Login attempt" warnings from http.ban after BFCache
+// restore, tab resume, network change, or any other browser-initiated replay
+// of a stale `<img>` URL.
+const proxyPathRegEx =
+  /^\/api\/(camera_proxy_stream|camera_proxy|image_proxy)\//;
+
+// Reject signatures this many ms before their nominal expiry to absorb small
+// client/server clock differences. Erring this direction only ever turns a
+// would-be valid request into a local 401; we cannot err the other way without
+// re-introducing the warnings this filter exists to prevent.
+const JWT_EXPIRY_SKEW_MS = 5000;
+
+const base64UrlDecode = (input: string): string => {
+  const normalized = input.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = normalized + "=".repeat((4 - (normalized.length % 4)) % 4);
+  return atob(padded);
+};
+
+const isJwtExpired = (jwt: string): boolean => {
+  try {
+    const parts = jwt.split(".");
+    if (parts.length !== 3) {
+      return false;
+    }
+    const payload = JSON.parse(base64UrlDecode(parts[1]));
+    if (typeof payload.exp !== "number") {
+      return false;
+    }
+    return payload.exp * 1000 < Date.now() + JWT_EXPIRY_SKEW_MS;
+  } catch (_err) {
+    // If we can't parse the JWT for any reason, defer to the server.
+    return false;
+  }
+};
+
+const handleProxyRequest: RouteHandler = async ({ request }) => {
+  const req = request as Request;
+  const url = new URL(req.url);
+
+  const token = url.searchParams.get("token");
+  if (token === "undefined" || token === "null" || token === "") {
+    return new Response(null, { status: 401, statusText: "Invalid token" });
+  }
+
+  const authSig = url.searchParams.get("authSig");
+  if (authSig && isJwtExpired(authSig)) {
+    return new Response(null, {
+      status: 401,
+      statusText: "Signature expired",
+    });
+  }
+
+  return fetch(req);
+};
+
 const initRouting = () => {
  precacheAndRoute(__WB_MANIFEST__, {
    // Ignore all URL parameters.
@@ -59,6 +117,15 @@ const initRouting = () => {
    })
  );

+  // Short-circuit camera/image proxy requests with an expired signature or a
+  // missing/undefined token so they don't hit core and get logged as invalid
+  // login attempts. Registered before the generic /api route below so it wins.
+  registerRoute(
+    ({ url, request }) =>
+      proxyPathRegEx.test(url.pathname) && request.method === "GET",
+    handleProxyRequest
+  );
+
  // Get api from network.
  registerRoute(/\/(api|auth)\/.*/, new NetworkOnly());

@@ -391,6 +391,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      <hass-tabs-subpage
        .hass=${this.hass}
        .localizeFunc=${this.localizeFunc}
+        .narrow=${this.narrow}
        .isWide=${this.isWide}
        .backPath=${this.backPath}
        .backCallback=${this.backCallback}
@@ -1,4 +1,3 @@
-import { consume } from "@lit/context";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -19,7 +18,6 @@ import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
 import "../components/ha-tab";
-import { narrowViewportContext } from "../data/context";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, Route } from "../types";

@@ -61,9 +59,7 @@ export class HassTabsSubpage extends LitElement {

  @property({ attribute: false }) public tabs!: PageNavigation[];

-  @state()
-  @consume({ context: narrowViewportContext, subscribe: true })
-  private _narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;

  @property({ type: Boolean, reflect: true, attribute: "is-wide" })
  public isWide = false;
@@ -120,7 +116,7 @@ export class HassTabsSubpage extends LitElement {
          <a href=${page.path} @click=${this._tabClicked}>
            <ha-tab
              .active=${page.path === activeTab?.path}
-              .narrow=${this._narrow}
+              .narrow=${this.narrow}
              .name=${page.translationKey
                ? localizeFunc(page.translationKey)
                : page.name}
@@ -155,18 +151,18 @@ export class HassTabsSubpage extends LitElement {
      this.hass.config.components,
      this.hass.language,
      this.hass.userData,
-      this._narrow,
+      this.narrow,
      this.localizeFunc || this.hass.localize
    );
    return html`
-      <div class="toolbar ${classMap({ narrow: this._narrow })}">
+      <div class="toolbar ${classMap({ narrow: this.narrow })}">
        <slot name="toolbar">
          <div class="toolbar-content">
            ${this.mainPage || (!this.backPath && history.state?.root)
              ? html`
                  <ha-menu-button
                    .hass=${this.hass}
-                    .narrow=${this._narrow}
+                    .narrow=${this.narrow}
                  ></ha-menu-button>
                `
              : this.backPath
@@ -182,12 +178,12 @@ export class HassTabsSubpage extends LitElement {
                      @click=${this._backTapped}
                    ></ha-icon-button-arrow-prev>
                  `}
-            ${this._narrow || !this.showTabs
+            ${this.narrow || !this.showTabs
              ? html`<div class="main-title">
                  <slot name="header">${!this.showTabs ? tabs[0] : ""}</slot>
                </div>`
              : ""}
-            ${this.showTabs && !this._narrow
+            ${this.showTabs && !this.narrow
              ? html`<div id="tabbar">${tabs}</div>`
              : ""}
            <div id="toolbar-icon">
@@ -195,7 +191,7 @@ export class HassTabsSubpage extends LitElement {
            </div>
          </div>
        </slot>
-        ${this.showTabs && this._narrow
+        ${this.showTabs && this.narrow
          ? html`<div id="tabbar" class="bottom-bar">${tabs}</div>`
          : ""}
      </div>
@@ -1,4 +1,3 @@
-import { ContextProvider } from "@lit/context";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,7 +7,6 @@ import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import "../components/ha-drawer";
-import { narrowViewportContext } from "../data/context";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
@@ -38,11 +36,6 @@ export class HomeAssistantMain extends LitElement {

  @state() private _drawerOpen = false;

-  private _narrowViewportProvider = new ContextProvider(this, {
-    context: narrowViewportContext,
-    initialValue: this.narrow,
-  });
-
  constructor() {
    super();
    listenMediaQuery("(max-width: 870px)", (matches) => {
@@ -73,6 +66,7 @@ export class HomeAssistantMain extends LitElement {
        ></ha-sidebar>
        ${isPanelReady
          ? html`<partial-panel-resolver
+              .narrow=${this.narrow}
              .hass=${this.hass}
              .route=${this.route}
              slot="appContent"
@@ -127,10 +121,6 @@ export class HomeAssistantMain extends LitElement {
  }

  public willUpdate(changedProps: PropertyValues<this>) {
-    if (changedProps.has("narrow")) {
-      this._narrowViewportProvider.setValue(this.narrow);
-    }
-
    if (changedProps.has("route") && this._sidebarNarrow) {
      this._drawerOpen = false;
    }
@@ -1,14 +1,12 @@
-import { consume } from "@lit/context";
 import {
  STATE_NOT_RUNNING,
  STATE_RUNNING,
  STATE_STARTING,
 } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
-import { narrowViewportContext } from "../data/context";
 import { getDefaultPanel } from "../data/panel";
 import type { CustomPanelInfo } from "../data/panel_custom";
 import type { HomeAssistant, Panels } from "../types";
@@ -45,9 +43,7 @@ const COMPONENTS = {
 class PartialPanelResolver extends HassRouterPage {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @state()
-  @consume({ context: narrowViewportContext, subscribe: true })
-  private _narrow = false;
+  @property({ type: Boolean }) public narrow = false;

  private _waitForStart = false;

@@ -96,7 +92,7 @@ class PartialPanelResolver extends HassRouterPage {
    const el = super.createLoadingScreen();
    el.rootnav = true;
    el.hass = this.hass;
-    el.narrow = this._narrow;
+    el.narrow = this.narrow;
    return el;
  }

@@ -104,7 +100,7 @@ class PartialPanelResolver extends HassRouterPage {
    const hass = this.hass;

    el.hass = hass;
-    el.narrow = this._narrow;
+    el.narrow = this.narrow;
    el.route = this.routeTail;
    el.panel = hass.panels[this._currentPage];
  }
@@ -1,39 +1,20 @@
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type { LocalizeFunc } from "../../common/translations/localize";
-import { fireEvent } from "../../common/dom/fire_event";
+import { customElement } from "lit/decorators";
 import "../../components/ha-dialog";
+import { DialogMixin } from "../../dialogs/dialog-mixin";
+import type { AppDialogParams } from "./show-app-dialog";

@customElement("app-dialog")
-class DialogApp extends LitElement {
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
-  @state() private _open = false;
-
-  public async showDialog(params: { localize: LocalizeFunc }): Promise<void> {
-    this.localize = params.localize;
-    this._open = true;
-  }
-
-  public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this.localize = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
+class DialogApp extends DialogMixin<AppDialogParams>(LitElement) {
  protected render() {
-    if (!this.localize) {
+    if (!this.params?.localize) {
      return nothing;
    }
    return html`<ha-dialog
-      .open=${this._open}
-      header-title=${this.localize(
+      open
+      header-title=${this.params.localize(
        "ui.panel.page-onboarding.welcome.download_app"
      ) || "Click here to download the app"}
-      @closed=${this._dialogClosed}
    >
      <div>
        <div class="app-qr">
@@ -45,13 +26,17 @@ class DialogApp extends LitElement {
            <img
              loading="lazy"
              src="/static/images/appstore.svg"
-              alt=${this.localize("ui.panel.page-onboarding.welcome.appstore")}
+              alt=${this.params.localize(
+                "ui.panel.page-onboarding.welcome.appstore"
+              )}
              class="icon"
            />
            <img
              loading="lazy"
              src="/static/images/qr-appstore.svg"
-              alt=${this.localize("ui.panel.page-onboarding.welcome.appstore")}
+              alt=${this.params.localize(
+                "ui.panel.page-onboarding.welcome.appstore"
+              )}
            />
          </a>
          <a
@@ -62,13 +47,17 @@ class DialogApp extends LitElement {
            <img
              loading="lazy"
              src="/static/images/playstore.svg"
-              alt=${this.localize("ui.panel.page-onboarding.welcome.playstore")}
+              alt=${this.params.localize(
+                "ui.panel.page-onboarding.welcome.playstore"
+              )}
              class="icon"
            />
            <img
              loading="lazy"
              src="/static/images/qr-playstore.svg"
-              alt=${this.localize("ui.panel.page-onboarding.welcome.playstore")}
+              alt=${this.params.localize(
+                "ui.panel.page-onboarding.welcome.playstore"
+              )}
            />
          </a>
        </div>
@@ -1,103 +1,87 @@
 import { mdiAccountGroup, mdiOpenInNew } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import { customElement } from "lit/decorators";
 import "../../components/ha-dialog";
-import "../../components/ha-list";
-import "../../components/ha-list-item";
+import "../../components/ha-svg-icon";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-nav";
+import { DialogMixin } from "../../dialogs/dialog-mixin";
+import type { CommunityDialogParams } from "./show-community-dialog";

@customElement("community-dialog")
-class DialogCommunity extends LitElement {
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
-  @state() private _open = false;
-
-  public async showDialog(params): Promise<void> {
-    this.localize = params.localize;
-    this._open = true;
-  }
-
-  public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this.localize = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
+class DialogCommunity extends DialogMixin<CommunityDialogParams>(LitElement) {
  protected render() {
-    if (!this.localize) {
+    if (!this.params?.localize) {
      return nothing;
    }
    return html`<ha-dialog
-      .open=${this._open}
-      header-title=${this.localize(
+      open
+      header-title=${this.params.localize(
        "ui.panel.page-onboarding.welcome.community"
      )}
-      @closed=${this._dialogClosed}
    >
-      <ha-list>
-        <a
+      <ha-list-nav>
+        <ha-list-item-button
          target="_blank"
          rel="noreferrer noopener"
          href="https://community.home-assistant.io/"
        >
-          <ha-list-item hasMeta graphic="icon">
-            <img
-              src="/static/icons/favicon-192x192.png"
-              slot="graphic"
-              alt="Home Assistant Logo"
-            />
-            ${this.localize("ui.panel.page-onboarding.welcome.forums")}
-            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-          </ha-list-item>
-        </a>
-        <a
+          <img
+            src="/static/icons/favicon-192x192.png"
+            slot="start"
+            alt="Home Assistant Logo"
+          />
+          <span slot="headline">
+            ${this.params.localize("ui.panel.page-onboarding.welcome.forums")}
+          </span>
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-list-item-button>
+        <ha-list-item-button
          target="_blank"
          rel="noreferrer noopener"
          href="https://newsletter.openhomefoundation.org/"
        >
-          <ha-list-item hasMeta graphic="icon">
-            <img
-              src="/static/icons/logo_ohf.svg"
-              slot="graphic"
-              alt="Open Home Foundation Logo"
-            />
-            ${this.localize(
+          <img
+            src="/static/icons/logo_ohf.svg"
+            slot="start"
+            alt="Open Home Foundation Logo"
+          />
+          <span slot="headline">
+            ${this.params.localize(
              "ui.panel.page-onboarding.welcome.open_home_newsletter"
            )}
-            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-          </ha-list-item>
-        </a>
-        <a
+          </span>
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-list-item-button>
+        <ha-list-item-button
          target="_blank"
          rel="noreferrer noopener"
          href="https://www.home-assistant.io/join-chat"
        >
-          <ha-list-item hasMeta graphic="icon">
-            <img
-              src="/static/images/logo_discord.png"
-              slot="graphic"
-              alt="Discord Logo"
-            />
-            ${this.localize("ui.panel.page-onboarding.welcome.discord")}
-            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-          </ha-list-item>
-        </a>
-        <a
+          <img
+            src="/static/images/logo_discord.png"
+            slot="start"
+            alt="Discord Logo"
+          />
+          <span slot="headline">
+            ${this.params.localize("ui.panel.page-onboarding.welcome.discord")}
+          </span>
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-list-item-button>
+        <ha-list-item-button
          target="_blank"
          rel="noreferrer noopener"
          href="https://fosstodon.org/@homeassistant"
        >
-          <ha-list-item hasMeta graphic="icon">
-            <ha-svg-icon .path=${mdiAccountGroup} slot="graphic"></ha-svg-icon>
-            ${this.localize("ui.panel.page-onboarding.welcome.social_media")}
-            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-          </ha-list-item>
-        </a>
-      </ha-list>
+          <ha-svg-icon .path=${mdiAccountGroup} slot="start"></ha-svg-icon>
+          <span slot="headline">
+            ${this.params.localize(
+              "ui.panel.page-onboarding.welcome.social_media"
+            )}
+          </span>
+          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+        </ha-list-item-button>
+      </ha-list-nav>
    </ha-dialog>`;
  }

@@ -105,12 +89,12 @@ class DialogCommunity extends LitElement {
    ha-dialog {
      --dialog-content-padding: 0;
    }
-    ha-list-item {
-      height: 56px;
-      --mdc-list-item-meta-size: 20px;
+    img {
+      width: 32px;
+      height: 32px;
    }
-    a {
-      text-decoration: none;
+    ha-svg-icon {
+      color: var(--ha-color-text-secondary);
    }
  `;
 }
@@ -3,13 +3,18 @@ import type { LocalizeFunc } from "../../common/translations/localize";

 export const loadAppDialog = () => import("./app-dialog");

+export interface AppDialogParams {
+  localize: LocalizeFunc;
+}
+
 export const showAppDialog = (
  element: HTMLElement,
-  params: { localize: LocalizeFunc }
+  params: AppDialogParams
 ): void => {
  fireEvent(element, "show-dialog", {
    dialogTag: "app-dialog",
    dialogImport: loadAppDialog,
    dialogParams: params,
+    addHistory: false,
  });
 };
@@ -3,13 +3,18 @@ import type { LocalizeFunc } from "../../common/translations/localize";

 export const loadCommunityDialog = () => import("./community-dialog");

+export interface CommunityDialogParams {
+  localize: LocalizeFunc;
+}
+
 export const showCommunityDialog = (
  element: HTMLElement,
-  params: { localize: LocalizeFunc }
+  params: CommunityDialogParams
 ): void => {
  fireEvent(element, "show-dialog", {
    dialogTag: "community-dialog",
    dialogImport: loadCommunityDialog,
    dialogParams: params,
+    addHistory: false,
  });
 };
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -14,7 +15,6 @@ import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-background";
 import "../lovelace/views/hui-view-container";
-import "../../components/ha-top-app-bar-fixed";

 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
  strategy: {
@@ -97,36 +97,38 @@ class PanelClimate extends LitElement {

  protected render() {
    return html`
-      <ha-top-app-bar-fixed .narrow=${this.narrow}>
-        ${this._searchParams.has("historyBack")
-          ? html`
-              <ha-icon-button-arrow-prev
-                @click=${this._back}
-                slot="navigationIcon"
-              ></ha-icon-button-arrow-prev>
-            `
-          : html`
-              <ha-menu-button
-                slot="navigationIcon"
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-            `}
-        <div slot="title">${this.hass.localize("panel.climate")}</div>
-        ${this._lovelace
-          ? html`
-              <hui-view-container .hass=${this.hass}>
-                <hui-view-background .hass=${this.hass}> </hui-view-background>
-                <hui-view
+      <div class="header ${classMap({ narrow: this.narrow })}">
+        <div class="toolbar">
+          ${this._searchParams.has("historyBack")
+            ? html`
+                <ha-icon-button-arrow-prev
+                  @click=${this._back}
+                  slot="navigationIcon"
+                ></ha-icon-button-arrow-prev>
+              `
+            : html`
+                <ha-menu-button
+                  slot="navigationIcon"
                  .hass=${this.hass}
                  .narrow=${this.narrow}
-                  .lovelace=${this._lovelace}
-                  .index=${this._viewIndex}
-                ></hui-view
-              ></hui-view-container>
-            `
-          : nothing}
-      </ha-top-app-bar-fixed>
+                ></ha-menu-button>
+              `}
+          <div class="main-title">${this.hass.localize("panel.climate")}</div>
+        </div>
+      </div>
+      ${this._lovelace
+        ? html`
+            <hui-view-container .hass=${this.hass}>
+              <hui-view-background .hass=${this.hass}> </hui-view-background>
+              <hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${this._viewIndex}
+              ></hui-view
+            ></hui-view-container>
+          `
+        : nothing}
    `;
  }

@@ -167,11 +169,78 @@ class PanelClimate extends LitElement {
          -webkit-user-select: none;
          -moz-user-select: none;
        }
+        .header {
+          background-color: var(--app-header-background-color);
+          color: var(--app-header-text-color, white);
+          position: fixed;
+          top: 0;
+          width: calc(
+            var(--ha-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
+          padding-top: var(--safe-area-inset-top);
+          z-index: 4;
+          display: flex;
+          flex-direction: row;
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .header {
+          width: calc(
+            var(--ha-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
+          padding-left: var(--safe-area-inset-left);
+        }
+        :host([scrolled]) .header {
+          box-shadow: var(
+            --bar-box-shadow,
+            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+          );
+        }
+        .toolbar {
+          height: var(--header-height);
+          display: flex;
+          flex: 1;
+          align-items: center;
+          font-size: var(--ha-font-size-xl);
+          padding: 0px 12px;
+          font-weight: var(--ha-font-weight-normal);
+          box-sizing: border-box;
+          border-bottom: var(--app-header-border-bottom, none);
+        }
+        :host([narrow]) .toolbar {
+          padding: 0 4px;
+        }
+        .main-title {
+          margin-inline-start: var(--ha-space-6);
+          line-height: var(--ha-line-height-normal);
+          flex-grow: 1;
+        }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
        hui-view-container {
          position: relative;
          display: flex;
          min-height: 100vh;
          box-sizing: border-box;
+          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-right: var(--safe-area-inset-right);
+          padding-inline-end: var(--safe-area-inset-right);
+          padding-bottom: var(--safe-area-inset-bottom);
+        }
+        :host([narrow]) hui-view-container {
+          padding-left: var(--safe-area-inset-left);
+          padding-inline-start: var(--safe-area-inset-left);
        }
        hui-view {
          flex: 1 1 100%;
@@ -1,5 +1,5 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
-import { mdiHelpCircleOutline } from "@mdi/js";
+import { mdiCheckCircle, mdiHelpCircleOutline } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -25,7 +25,9 @@ class SupervisorAppsCardContent extends LitElement {

  @property() public stage: AddonStage = "stable";

-  @property() public state: AddonState = null;
+  @property() public state?: AddonState;
+
+  @property({ type: Boolean }) public installed = false;

  @property() public description?: string;

@@ -77,13 +79,23 @@ class SupervisorAppsCardContent extends LitElement {
          </div>
        </div>
      </div>
-      ${this.tags?.length || this.state
+      ${this.tags?.length || this.state !== undefined || this.installed
        ? html`
            <div class="footer">
-              <supervisor-apps-state
-                .state=${this.state || "unknown"}
-              ></supervisor-apps-state>
-
+              ${this.state !== undefined
+                ? html`<supervisor-apps-state
+                    .state=${this.state || "unknown"}
+                  ></supervisor-apps-state>`
+                : this.installed
+                  ? html`<div class="installed">
+                      <ha-svg-icon .path=${mdiCheckCircle}></ha-svg-icon>
+                      <span
+                        >${this.hass.localize(
+                          "ui.panel.config.apps.state.installed"
+                        )}</span
+                      >
+                    </div>`
+                  : html`<span></span>`}
              ${this.tags?.length
                ? html`<div class="tags">
                    ${this.tags.map(
@@ -159,6 +171,17 @@ class SupervisorAppsCardContent extends LitElement {
      display: flex;
      gap: var(--ha-space-2);
    }
+    .installed {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ha-space-2);
+      color: var(--ha-color-text-secondary);
+      font-size: var(--ha-font-size-m);
+    }
+    .installed ha-svg-icon {
+      --mdc-icon-size: 16px;
+      color: var(--ha-color-on-success-normal);
+    }
  `;
 }

@@ -135,6 +135,7 @@ class HaConfigAppDashboard extends LitElement {
    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
+        .narrow=${this.narrow}
        .route=${route}
        .tabs=${addonTabs}
        back-path=${this._fromStore ? "/config/apps/available" : "/config/apps"}
@@ -1,7 +1,14 @@
-import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
+import {
+  mdiAlertDecagramOutline,
+  mdiArrowUpBoldCircle,
+  mdiArrowUpBoldCircleOutline,
+  mdiFlask,
+  mdiPuzzle,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -10,6 +17,7 @@ import type { HassioAddonRepository } from "../../../data/hassio/addon";
 import type { StoreAddon } from "../../../data/supervisor/store";
 import type { HomeAssistant } from "../../../types";
 import "./components/supervisor-apps-card-content";
+import type { AppTag } from "./components/supervisor-apps-card-content";
 import { filterAndSort } from "./components/supervisor-apps-filter";
 import { supervisorAppsStyle } from "./resources/supervisor-apps-style";

@@ -54,21 +62,29 @@ export class SupervisorAppsRepositoryEl extends LitElement {
      <div class="content">
        <h1>${repo.name}</h1>
        <div class="card-group">
-          ${addons.map(
-            (addon) => html`
+          ${addons.map((addon) => {
+            const tags = this._getAppTags(addon);
+            return html`
              <ha-card
                outlined
                .addon=${addon}
                class=${addon.available ? "" : "not_available"}
                @click=${this._addonTapped}
              >
-                <div class="card-content">
+                <div
+                  class=${classMap({
+                    "card-content": true,
+                    "has-footer": tags.length > 0 || addon.installed,
+                  })}
+                >
                  <supervisor-apps-card-content
                    .hass=${this.hass}
                    .title=${addon.name}
                    .stage=${addon.stage}
                    .description=${addon.description}
                    .available=${addon.available}
+                    .installed=${addon.installed}
+                    .tags=${tags}
                    .icon=${addon.installed && addon.update_available
                      ? mdiArrowUpBoldCircle
                      : mdiPuzzle}
@@ -108,8 +124,8 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                  ></supervisor-apps-card-content>
                </div>
              </ha-card>
-            `
-          )}
+            `;
+          })}
        </div>
      </div>
    `;
@@ -119,6 +135,32 @@ export class SupervisorAppsRepositoryEl extends LitElement {
    navigate(`/config/app/${ev.currentTarget.addon.slug}/info?store=true`);
  }

+  private _getAppTags(addon: StoreAddon): AppTag[] {
+    const labels: AppTag[] = [];
+
+    if (addon.installed && addon.update_available) {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.state.update_available`
+        ),
+        variant: "brand",
+        iconPath: mdiArrowUpBoldCircleOutline,
+      });
+    }
+    if (addon.stage !== "stable") {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.dashboard.capability.stages.${addon.stage}`
+        ),
+        variant: addon.stage === "experimental" ? "warning" : "danger",
+        iconPath:
+          addon.stage === "experimental" ? mdiFlask : mdiAlertDecagramOutline,
+      });
+    }
+
+    return labels;
+  }
+
  static get styles(): CSSResultGroup {
    return [
      supervisorAppsStyle,
@@ -127,6 +169,12 @@ export class SupervisorAppsRepositoryEl extends LitElement {
          cursor: pointer;
          overflow: hidden;
        }
+        ha-card:hover {
+          background-color: var(--ha-color-fill-neutral-quiet-resting);
+        }
+        .card-content.has-footer {
+          padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-2);
+        }
        .not_available {
          opacity: 0.6;
        }
@@ -82,6 +82,8 @@ export class HaConfigAreasDashboard extends LitElement {

  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;

+  @property({ type: Boolean }) public narrow = false;
+
  @property({ attribute: false }) public route!: Route;

  @state() private _hierarchy?: AreasFloorHierarchy;
@@ -167,6 +169,7 @@ export class HaConfigAreasDashboard extends LitElement {
    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
+        .narrow=${this.narrow}
        .isWide=${this.isWide}
        .backPath=${this._searchParms.has("historyBack")
          ? undefined
@@ -41,6 +41,7 @@ import { handleStructError } from "../../../../common/structs/handle-errors";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/automation/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/automation/ha-automation-row";
+import "../../../../components/automation/ha-automation-condition-live-test";
 import "../../../../components/automation/ha-automation-row-event-chip";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dropdown";
@@ -312,13 +313,27 @@ export default class HaAutomationActionRow extends LitElement {
              .service=${this.action.action}
            ></ha-service-icon>
          `
-        : html`
-            <ha-svg-icon
+        : type === "condition" &&
+            this.optionsInSidebar &&
+            (this.action as Condition).condition !== "trigger"
+          ? html`<ha-automation-condition-live-test
+              id="condition-icon"
              slot="leading-icon"
-              class="action-icon"
-              .path=${ACTION_ICONS[type!]}
-            ></ha-svg-icon>
-          `}
+              .hass=${this.hass}
+              .condition=${this.action as Condition}
+            >
+              <ha-svg-icon
+                class="action-icon"
+                .path=${ACTION_ICONS[type]}
+              ></ha-svg-icon>
+            </ha-automation-condition-live-test>`
+          : html`
+              <ha-svg-icon
+                slot="leading-icon"
+                class="action-icon"
+                .path=${ACTION_ICONS[type!]}
+              ></ha-svg-icon>
+            `}
      <h3 slot="header">
        ${capitalizeFirstLetter(
          describeAction(
@@ -20,10 +20,6 @@ import type {
  LocalizeKeys,
 } from "../../../../common/translations/localize";
 import { computeRTL } from "../../../../common/util/compute_rtl";
-import {
-  sortRelatedFirst,
-  type RelatedIdSets,
-} from "../../../../common/search/related-context";
 import "../../../../components/chips/ha-chip-set";
 import "../../../../components/chips/ha-filter-chip";
 import "../../../../components/entity/state-badge";
@@ -44,7 +40,7 @@ import {
 } from "../../../../data/area_floor_picker";
 import { CONDITION_BUILDING_BLOCKS_GROUP } from "../../../../data/condition";
 import type { ConfigEntry } from "../../../../data/config_entries";
-import { labelsContext, relatedContext } from "../../../../data/context";
+import { labelsContext } from "../../../../data/context";
 import {
  deviceComboBoxKeys,
  getDevices,
@@ -133,10 +129,6 @@ export class HaAutomationAddSearch extends LitElement {
    | "condition"
    | "action";

-  @state()
-  @consume({ context: relatedContext, subscribe: true })
-  private _relatedIdSets?: RelatedIdSets;
-
  @state() private _searchSectionTitle?: string;

  @state() private _selectedSearchSection?: SearchSection;
@@ -149,19 +141,11 @@ export class HaAutomationAddSearch extends LitElement {

  @query("lit-virtualizer") private _virtualizerElement?: LitVirtualizer;

-  private _getDevicesMemoized = memoizeOne(
-    (
-      hass: HomeAssistant,
-      configEntryLookup: Record<string, ConfigEntry>,
-      idPrefix: string
-    ) => getDevices(hass, configEntryLookup, { idPrefix })
-  );
+  private _getDevicesMemoized = memoizeOne(getDevices);

  private _getLabelsMemoized = memoizeOne(getLabels);

-  private _getEntitiesMemoized = memoizeOne(
-    (hass: HomeAssistant, idPrefix: string) => getEntities(hass, { idPrefix })
-  );
+  private _getEntitiesMemoized = memoizeOne(getEntities);

  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);

@@ -210,8 +194,7 @@ export class HaAutomationAddSearch extends LitElement {
      this.configEntryLookup,
      this.items,
      this.newTriggersAndConditions,
-      this._selectedSearchSection,
-      this._relatedIdSets
+      this._selectedSearchSection
    );

    let emptySearchTranslation: string | undefined;
@@ -504,8 +487,7 @@ export class HaAutomationAddSearch extends LitElement {
      configEntryLookup: Record<string, ConfigEntry>,
      automationItems: AddAutomationElementListItem[],
      newTriggersAndConditions: boolean,
-      selectedSection?: SearchSection,
-      relatedIdSets?: RelatedIdSets
+      selectedSection?: SearchSection
    ) => {
      const resultItems: (
        | string
@@ -575,29 +557,24 @@ export class HaAutomationAddSearch extends LitElement {
        if (!selectedSection || selectedSection === "entity") {
          let entityItems = this._getEntitiesMemoized(
            this.hass,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
            `entity${TARGET_SEPARATOR}`
          );

-          if (relatedIdSets?.entities.size) {
-            entityItems = entityItems.map((item) => ({
-              ...item,
-              isRelated: relatedIdSets.entities.has(
-                (item as EntityComboBoxItem).stateObj?.entity_id || ""
-              ),
-            })) as EntityComboBoxItem[];
-          }
-
          if (searchTerm) {
-            entityItems = sortRelatedFirst(
-              this._filterGroup(
-                "entity",
-                entityItems,
-                searchTerm,
-                entityComboBoxKeys
-              )
+            entityItems = this._filterGroup(
+              "entity",
+              entityItems,
+              searchTerm,
+              entityComboBoxKeys
            ) as EntityComboBoxItem[];
-          } else if (relatedIdSets?.entities.size) {
-            entityItems = sortRelatedFirst(entityItems) as EntityComboBoxItem[];
          }

          if (!selectedSection && entityItems.length) {
@@ -614,29 +591,23 @@ export class HaAutomationAddSearch extends LitElement {
          let deviceItems = this._getDevicesMemoized(
            this.hass,
            configEntryLookup,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
            `device${TARGET_SEPARATOR}`
          );

-          if (relatedIdSets?.devices.size) {
-            deviceItems = deviceItems.map((item) => ({
-              ...item,
-              isRelated: relatedIdSets.devices.has(
-                item.id.split(TARGET_SEPARATOR)[1] || ""
-              ),
-            }));
-          }
-
          if (searchTerm) {
-            deviceItems = sortRelatedFirst(
-              this._filterGroup(
-                "device",
-                deviceItems,
-                searchTerm,
-                deviceComboBoxKeys
-              )
+            deviceItems = this._filterGroup(
+              "device",
+              deviceItems,
+              searchTerm,
+              deviceComboBoxKeys
            );
-          } else if (relatedIdSets?.devices.size) {
-            deviceItems = sortRelatedFirst(deviceItems);
          }

          if (!selectedSection && deviceItems.length) {
@@ -668,31 +639,13 @@ export class HaAutomationAddSearch extends LitElement {
            undefined
          );

-          if (relatedIdSets?.areas.size) {
-            areasAndFloors = areasAndFloors.map((item) => ({
-              ...item,
-              isRelated:
-                item.type === "area"
-                  ? relatedIdSets.areas.has(
-                      item.id.split(TARGET_SEPARATOR)[1] || ""
-                    )
-                  : false,
-            })) as FloorComboBoxItem[];
-          }
-
          if (searchTerm) {
-            areasAndFloors = sortRelatedFirst(
-              this._filterGroup(
-                "area",
-                areasAndFloors,
-                searchTerm,
-                areaFloorComboBoxKeys,
-                false
-              )
-            ) as FloorComboBoxItem[];
-          } else if (relatedIdSets?.areas.size) {
-            areasAndFloors = sortRelatedFirst(
-              areasAndFloors
+            areasAndFloors = this._filterGroup(
+              "area",
+              areasAndFloors,
+              searchTerm,
+              areaFloorComboBoxKeys,
+              false
            ) as FloorComboBoxItem[];
          }

@@ -19,10 +19,7 @@ import {
  mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import type {
-  HassServiceTarget,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
+import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
@@ -38,12 +35,10 @@ import { capitalizeFirstLetter } from "../../../../common/string/capitalize-firs
 import { truncateWithEllipsis } from "../../../../common/string/truncate-with-ellipsis";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
-import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/automation/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/automation/ha-automation-row";
+import "../../../../components/automation/ha-automation-condition-live-test";
 import "../../../../components/automation/ha-automation-row-event-chip";
-import "../../../../components/automation/ha-automation-row-live-test";
-import type { LiveTestState } from "../../../../components/automation/ha-automation-row-live-test";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-condition-icon";
@@ -52,17 +47,14 @@ import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-tooltip";
 import type {
  AutomationClipboard,
  Condition,
  ConditionSidebarConfig,
  PlatformCondition,
 } from "../../../../data/automation";
-import {
-  isCondition,
-  subscribeCondition,
-  testCondition,
-} from "../../../../data/automation";
+import { isCondition, testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
 import type { ConditionDescriptions } from "../../../../data/condition";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
@@ -154,11 +146,6 @@ export default class HaAutomationConditionRow extends LitElement {

  @state() private _selected = false;

-  @state() private _liveTestResult: {
-    state: LiveTestState;
-    message?: string;
-  } = { state: "unknown" };
-
  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg: EntityRegistryEntry[] = [];
@@ -171,8 +158,6 @@ export default class HaAutomationConditionRow extends LitElement {

  private _testingTimeout?: number;

-  private _conditionUnsub?: Promise<UnsubscribeFunc>;
-
  get selected() {
    return this._selected;
  }
@@ -211,11 +196,28 @@ export default class HaAutomationConditionRow extends LitElement {
    );

    return html`
-      <ha-condition-icon
-        slot="leading-icon"
-        .hass=${this.hass}
-        .condition=${this.condition.condition}
-      ></ha-condition-icon>
+      ${this.optionsInSidebar && this.condition.condition !== "trigger"
+        ? html`<ha-automation-condition-live-test
+            id="condition-icon"
+            slot="leading-icon"
+            .hass=${this.hass}
+            .condition=${this.condition}
+          >
+            <ha-condition-icon
+              .hass=${this.hass}
+              .condition=${this.condition.condition}
+            ></ha-condition-icon>
+          </ha-automation-condition-live-test>`
+        : html`<div
+            id="condition-icon"
+            class="icon-badge-wrapper"
+            slot="leading-icon"
+          >
+            <ha-condition-icon
+              .hass=${this.hass}
+              .condition=${this.condition.condition}
+            ></ha-condition-icon>
+          </div>`}
      <h3 slot="header">
        ${capitalizeFirstLetter(
          describeCondition(this.condition, this.hass, this._entityReg)
@@ -531,17 +533,7 @@ export default class HaAutomationConditionRow extends LitElement {
              @click=${this._toggleSidebar}
              @toggle-collapsed=${this._toggleCollapse}
              >${this._renderRow()}
-              <ha-automation-row-live-test
-                slot="icons"
-                .state=${this.condition.condition !== "trigger"
-                  ? this._liveTestResult.state
-                  : "unknown"}
-                .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult.state : "unknown"}`
-                )}
-                .message=${this._liveTestResult.message}
-              ></ha-automation-row-live-test
-            ></ha-automation-row>`
+            </ha-automation-row>`
          : html`
              <ha-expansion-panel
                left-chevron
@@ -586,11 +578,6 @@ export default class HaAutomationConditionRow extends LitElement {
      ></ha-automation-row-targets>`
  );

-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._subscribeCondition();
-  }
-
  protected firstUpdated(changedProperties: PropertyValues<this>): void {
    super.firstUpdated(changedProperties);

@@ -606,85 +593,11 @@ export default class HaAutomationConditionRow extends LitElement {
    }
  }

-  protected override updated(changedProps: PropertyValues<this>): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("condition") &&
-      changedProps.get("condition") !== undefined
-    ) {
-      this._resetSubscription();
-      this._debounceSubscribeCondition();
-    }
-  }
-
  public disconnectedCallback() {
    super.disconnectedCallback();
-    this._debounceSubscribeCondition.cancel();
    if (this._testingTimeout !== undefined) {
      clearTimeout(this._testingTimeout);
    }
-    this._resetSubscription();
-  }
-
-  private _resetSubscription() {
-    this._liveTestResult = {
-      state: "unknown",
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
-      ),
-    };
-    if (this._conditionUnsub) {
-      this._conditionUnsub.then((unsub) => unsub());
-      this._conditionUnsub = undefined;
-    }
-  }
-
-  private _debounceSubscribeCondition = debounce(
-    () => this._subscribeCondition(),
-    500
-  );
-
-  private async _subscribeCondition() {
-    this._resetSubscription();
-
-    if (!this.condition) {
-      return;
-    }
-
-    const conditionUnsub = subscribeCondition(
-      this.hass.connection,
-      (result) => {
-        if (result.error) {
-          this._handleLiveTestError(result.error);
-        } else {
-          this._liveTestResult = {
-            state: result.result ? "pass" : "fail",
-            message: this.hass.localize(
-              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
-            ),
-          };
-        }
-      },
-      this.condition
-    );
-    conditionUnsub.catch((err: any) => {
-      this._handleLiveTestError(err);
-      if (this._conditionUnsub === conditionUnsub) {
-        this._conditionUnsub = undefined;
-      }
-    });
-    this._conditionUnsub = conditionUnsub;
-  }
-
-  private _handleLiveTestError(error: any) {
-    const invalid =
-      typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = {
-      state: invalid ? "invalid" : "unknown",
-      message: this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
-      ),
-    };
  }

  private _onValueChange(event: CustomEvent) {
@@ -265,7 +265,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
        const labels = labelReg && entityRegEntry?.labels;
        const label_entries = (labels || [])
          .map((lbl) => labelReg!.find((label) => label.label_id === lbl)!)
-          .filter(Boolean);
+          .filter((lbl) => lbl !== undefined);
        const assistants = getEntityVoiceAssistantsIds(
          entityReg,
          automation.entity_id
@@ -1,14 +1,8 @@
 import { consume } from "@lit/context";
-import type {
-  CSSResult,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import type { CSSResult, LitElement, TemplateResult } from "lit";
 import { css, html } from "lit";
 import { property, state } from "lit/decorators";
 import { transform } from "../../../common/decorators/transform";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/animation/ha-fade-in";
@@ -142,21 +136,6 @@ export const AutomationScriptEditorMixin = <TConfig extends BaseEditorConfig>(
      value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
    ) => void;

-    protected willUpdate(changedProps: PropertyValues): void {
-      super.willUpdate(changedProps);
-      if (changedProps.has("registryEntry")) {
-        const areaId = this.registryEntry?.area_id;
-        if (areaId) {
-          fireEvent(this, "hass-related-context", {
-            itemType: "area",
-            itemId: areaId,
-          });
-        } else {
-          fireEvent(this, "hass-related-context", undefined);
-        }
-      }
-    }
-
    protected renderLoading(): TemplateResult {
      return html`
        <ha-fade-in .delay=${500}>
@@ -53,6 +53,11 @@ export const rowStyles = css`
    position: absolute;
  }

+  .icon-badge-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
  .note-indicator {
    color: var(--ha-color-on-neutral-normal);
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Bram Kragten	978c600236	Merge branch 'rc'	2026-06-19 14:26:47 +02:00
Bram Kragten	29759a6dc6	Bumped version to 20260527.7	2026-06-19 14:26:36 +02:00
Franck Nijhof	bf85cb80de	Auto-select first voice in required TTS voice picker (#52576 ) When a voice was required and no value was set, the picker displayed the first voice in the dropdown but kept its own value undefined and never fired a value-changed event. As a result, the parent (for example the TTS test card in the media browser) never learned the voice: the selected voice id footer stayed hidden and no voice was sent on synthesis. This was most noticeable for languages with a single available voice, where the selection could not be changed to force an event. Auto-select and emit the first voice when one is required and the current value is missing or no longer valid for the loaded voices, so the value matches what the dropdown shows. Non-required usages keep clearing the value as before.	2026-06-19 14:26:16 +02:00
karwosts	64984cb2ed	Harden helpers table against bad labels, fix registry editor (#52516 ) * Harden helpers table against bad labels, fix registry editor * Revert "Harden helpers table against bad labels, fix registry editor" This reverts commit `cf15e1da33`. * Don't attempt to render unknown labels	2026-06-19 14:25:39 +02:00
Bram Kragten	505966e84f	Merge branch 'rc'	2026-06-11 15:42:36 +02:00
Bram Kragten	1ba71d940d	Bumped version to 20260527.6	2026-06-11 15:42:24 +02:00
Aidan Timson	948b7489c2	Gate more info "Add to" button to admins (#52547 )	2026-06-11 15:39:19 +02:00
Bram Kragten	370d755a9d	Filter expired camera/image proxy requests in service worker (#52534 ) Pre-validate the credential on camera_proxy, camera_proxy_stream and image_proxy URLs before letting them hit core. Requests with a missing or "undefined" token, or with an authSig JWT whose exp has passed, are short-circuited to a synthetic 401 and never reach the server. This silences spurious "Login attempt or request with invalid authentication" warnings from homeassistant.components.http.ban that fire when the browser replays a stale <img src> after BFCache restore, tab resume, or a network change. The signed-path TTL is short (30s by default) and image elements happily hold onto the URL long after that. Limitations: service workers only run on secure contexts, so this does not help users on plain http LAN access. A core-side fix to ban.py that distinguishes expired-but-validly-signed paths from real login attempts remains the principled fix and covers all clients.	2026-06-11 15:39:18 +02:00
Bram Kragten	57f0b7dbb7	Don't try to load brand images without a token (#52532 )	2026-06-11 15:39:17 +02:00
Marcin Bauer	eb17fd4b31	Show condition row icon on mobile in visibility editor (#52527 ) Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-11 15:39:16 +02:00
Bram Kragten	92461f90d9	Fix camera/image proxy URLs sent with token=undefined (#52514 )	2026-06-11 15:39:14 +02:00
Bram Kragten	4a43f22abf	Add condition live testing to action conditions too (#52511 ) * Add condition live testing to action conditions too * Update src/panels/config/automation/action/ha-automation-action-row.ts Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> * Apply prettier formatting Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-11 15:39:13 +02:00
Jan-Philipp Benecke	f2175f5fe7	Fix scrolling behavior for auto-height data table (#52508 )	2026-06-11 15:39:12 +02:00
Jan-Philipp Benecke	bc533c1fc9	Fix disabled action items icon button color in hui edit mode (#52507 )	2026-06-11 15:39:10 +02:00
Petar Petrov	9cfdb9d2a2	Open more-info from energy pie chart legend, enlarge legend toggle on touch (#52506 )	2026-06-11 15:39:09 +02:00
Bram Kragten	0e1ea00eac	Merge branch 'rc'	2026-06-07 20:19:56 +02:00
Bram Kragten	49f34e3a93	Bumped version to 20260527.5	2026-06-07 20:19:38 +02:00
karwosts	e04e38f4de	Fix yaml entity autocomplete (#52475 )	2026-06-07 20:18:46 +02:00
karwosts	6f372a8f70	Fix hui-editor search (#52453 )	2026-06-07 19:44:48 +02:00
Aidan Timson	cd728e221d	Add maintenance my redirect (#52442 ) Add maintenance My redirect	2026-06-07 19:44:47 +02:00
Jan-Philipp Benecke	6b6c159d5f	Patch tinykeys v4 to make it compatible with older iOS versions (#52420 ) * Downgrade tinykeys to 3.1.0 to make it compatible with older iOS versions * Patch tinykeys v4 * Remove umd patch	2026-06-07 19:44:07 +02:00
Paul Bottein	a4199d079b	Add customize toggle to media player source and sound mode feature editors (#52414 )	2026-06-07 19:41:15 +02:00
Aidan Timson	f5edffc153	Match the card style of apps repo to installed (#52407 )	2026-06-07 19:41:14 +02:00
ildar170975	78a2cd2485	Statistics graph card editor: add sub editor (#52182 ) * add canEdit * add canEdit * add subEditor * linter * linter * linter * linter * Remove div * Update src/components/entity/ha-statistic-picker.ts Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> * Update src/components/entity/ha-statistic-picker.ts Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> * Update ha-statistic-picker.ts * Update ha-statistic-picker.ts --------- Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>	2026-06-07 19:41:14 +02:00
Bram Kragten	156ab27cfa	20260527.4 (#52388 )	2026-06-03 12:44:08 +02:00
Bram Kragten	ba26e9f491	Bumped version to 20260527.4	2026-06-03 12:03:26 +02:00
Paul Bottein	8778fe8577	Restore search field autofocus in card and badge pickers (#52387 )	2026-06-03 12:03:12 +02:00
Aidan Timson	6801aaea30	Fix automation building block action icon style (#52382 )	2026-06-03 12:03:12 +02:00
Wendelin	c3f5b6693a	Landingpage download progress (#52359 ) * Simplify and improve landingpage * add core download progress * reduce to 2 seconds * Use round to display full integer as progress percentage * Use find to get the job object * Don't show progress label when progress is at 0 Before download starts, progress is at 0. At this point we may trying to reach a server (and error out), so we aren't really in downloading phase just yet. Simply treat 0 as "not started" and hide the progress label until we have a real progress value. --------- Co-authored-by: Stefan Agner <stefan@agner.ch>	2026-06-03 12:03:10 +02:00
Bram Kragten	68f75c82eb	Bumped version to 20260527.3	2026-06-02 23:55:02 +02:00
Bram Kragten	6660e4799c	Add tags in app store too, plus show if addon is installed already (#52373 )	2026-06-02 23:54:24 +02:00
Petar Petrov	08bfafea21	Fix raw div tag showing in Sankey chart tooltips (#52365 ) Fix raw div tag showing in sankey chart tooltips	2026-06-02 23:54:23 +02:00
Bram Kragten	5677e60fcc	Matter add device: change how main entity is found (#52361 ) Don't search for a entity based on main entity but use entity_category	2026-06-02 23:54:22 +02:00
Bram Kragten	73557e6464	Migrate trigger behavior (#52360 ) * Migrate trigger behavior * Apply suggestions from code review Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com> --------- Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>	2026-06-02 23:54:21 +02:00
Marcin Bauer	e9e6c60d8b	Move live-test indicator to badge on condition icon (#52352 ) Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Wendelin <w@pe8.at>	2026-06-02 23:54:20 +02:00
Aidan Timson	1651c210be	Improve messaging and consolidate add to dialogs (#52330 )	2026-06-02 23:54:19 +02:00
Bram Kragten	927c036454	Bumped version to 20260527.2	2026-06-01 19:52:36 +02:00
Paul Bottein	0fefcf809f	Fix vacuum and lawn mower features not showing default buttons (#52343 )	2026-06-01 19:52:19 +02:00
Bram Kragten	a176f3c1ef	Allow to set refresh url while dialog is open, use for matter device (#52341 ) Allow to set refresh dialog while dialog is open, use for matter device	2026-06-01 19:52:18 +02:00
Wendelin	c5152c3472	App-Info: Hide app title on narrow (#52337 ) Hide app title on narrow	2026-06-01 19:52:17 +02:00
Wendelin	0150337522	Fix picker default popover-placement (#52336 )	2026-06-01 19:52:16 +02:00
Paul Bottein	5d55d543b1	Respect backend order for floors and areas in entity tree (#52329 )	2026-06-01 19:52:14 +02:00
George Caliment	4805b22289	Fixed filter flex direction on mobile + removed unused classes (#52327 ) * Fixed filter flex direction on mobile + removed unused classes * Removed hard-coded height to fill all viewport	2026-06-01 19:52:13 +02:00
Simon Lamon	8de411abc3	Show all counter actions if none specified (#52317 ) Show all actions if none specified	2026-06-01 19:52:12 +02:00
Jan-Philipp Benecke	e455d4384a	Use right token for topbar shadow transition (#52306 )	2026-06-01 19:52:11 +02:00
karwosts	b0dbd825c8	Fix behavior for move view left/right (#52300 )	2026-06-01 19:52:10 +02:00
karwosts	69d0fcb666	Fix untracked legend in detail graph card (#52299 )	2026-06-01 19:52:09 +02:00
Simon Lamon	f7c3ed3b77	Ignore location in description (#52297 )	2026-06-01 19:52:08 +02:00
Jan-Philipp Benecke	5ee5b5120e	Add box-shadow transition to top app bar (#52292 )	2026-06-01 19:52:07 +02:00
karwosts	58fc8160fd	Fix missing location data in calendar (#52291 )	2026-06-01 19:52:06 +02:00
Bram Kragten	30930e18ab	Bumped version to 20260527.1	2026-05-28 16:47:56 +02:00
Paul Bottein	8d0978817d	Don't lowercase translated default action label (#52283 )	2026-05-28 16:45:20 +02:00
Paul Bottein	fc684218ce	Preserve PNG transparency on area pictures (#52282 )	2026-05-28 16:45:18 +02:00
Paul Bottein	22f29b7561	Fix sun condition Between description showing reversed values (#52279 )	2026-05-28 16:45:16 +02:00
Wendelin	c7d48aba44	Fix automation add TCA paste (#52276 ) Fix automation add paste	2026-05-28 16:45:15 +02:00
Wendelin	aeb2285f30	App details improve mobile and icon (#52275 ) * icon instead of logo, enable wrap * Keep logo * revert test url	2026-05-28 16:45:14 +02:00
Wendelin	c692d7cd4e	Card visibility-status use ha-alert (#52271 )	2026-05-28 16:45:12 +02:00
Wendelin	f2d7021a7d	Fix automation note keyboard a11y (#52270 )	2026-05-28 16:45:11 +02:00
Wendelin	3a649fba22	Fix automation behavior img file names (#52247 ) fix behavior img names	2026-05-28 16:45:09 +02:00
Simon Lamon	5362b8f853	Don't redispatch the original event in a checklist item (#52242 )	2026-05-28 16:45:08 +02:00
Wendelin	d05800bda6	Fix ha-radio-option checked theming (#52237 ) Update ha-radio-option theming to use checked-icon-color for text and border	2026-05-28 16:45:07 +02:00
Wendelin	d67530ea37	Fix row target count flickering, keyboard nav, type device (#52236 ) * Fix row target count flickering * Add noninteractive for device, fix keyboard nav * Noninteractive action, conditon * Remove unsued hass * invert noninteractive	2026-05-28 16:45:05 +02:00
Petar Petrov	bbd7ef676e	Render echarts tooltips with Lit templates (#52235 ) * Render echarts tooltips with Lit templates Replace raw HTML string interpolation in echarts tooltip formatters with Lit templates so user-controlled fields (entity friendly_name, device names, node labels) are auto-escaped instead of relying on per-string filterXSS. ha-chart-base now wraps any function tooltip.formatter into a stable per-formatter container and handles Lit TemplateResult / nothing / null returns; the public HaECOption type lets charts express Lit-returning formatters without per-callsite casts. * Simplify * Refactor _getSeries * Small fix * Fix merge mistake * Marker component and wrapper test	2026-05-28 16:45:04 +02:00