Update dependency lint-staged to v17.0.7 (#52389)

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/lock.yml

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

.github/workflows/release.yaml

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

.github/workflows/stale.yml

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

build-scripts/gulp/gallery.js

@@ -57,7 +57,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
       if (descriptionContent === "") {
         hasDescription = false;
       } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent)
+          .replace(/\\/g, "\\\\")
+          .replace(/`/g, "\\`");
         fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
         fs.writeFileSync(
           path.resolve(galleryBuild, `${pageId}-description.ts`),

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

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

landing-page/src/data/supervisor.ts

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

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

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

package.json

@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.2",
+    "@babel/runtime": "7.29.7",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.2",
     "@codemirror/commands": "6.10.3",
@@ -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.6",
-    "@formatjs/intl-displaynames": "7.3.8",
-    "@formatjs/intl-durationformat": "0.10.12",
+    "@formatjs/intl-datetimeformat": "7.4.7",
+    "@formatjs/intl-displaynames": "7.3.9",
+    "@formatjs/intl-durationformat": "0.10.13",
     "@formatjs/intl-getcanonicallocales": "3.2.9",
-    "@formatjs/intl-listformat": "8.3.8",
+    "@formatjs/intl-listformat": "8.3.9",
     "@formatjs/intl-locale": "5.3.8",
-    "@formatjs/intl-numberformat": "9.3.9",
-    "@formatjs/intl-pluralrules": "6.3.8",
-    "@formatjs/intl-relativetimeformat": "12.3.8",
+    "@formatjs/intl-numberformat": "9.3.10",
+    "@formatjs/intl-pluralrules": "6.3.9",
+    "@formatjs/intl-relativetimeformat": "12.3.9",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
@@ -62,17 +62,16 @@
     "@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.21",
+    "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.0.5",
-    "@tsparticles/preset-links": "4.0.5",
+    "@tsparticles/engine": "4.1.1",
+    "@tsparticles/preset-links": "4.1.1",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -83,13 +82,13 @@
     "core-js": "3.49.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
-    "date-fns": "4.3.0",
+    "date-fns": "4.4.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.3.0",
+    "fuse.js": "7.4.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.16",
@@ -126,21 +125,20 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.7",
     "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.5",
-    "@bundle-stats/plugin-webpack-filter": "4.22.1",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
     "@html-eslint/eslint-plugin": "0.61.0",
     "@lokalise/node-api": "16.0.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.11",
-    "@rspack/core": "2.0.4",
-    "@rspack/dev-server": "2.0.1",
-    "@types/babel__plugin-transform-runtime": "7.9.5",
+    "@rsdoctor/rspack-plugin": "1.5.12",
+    "@rspack/core": "2.0.5",
+    "@rspack/dev-server": "2.0.3",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
@@ -152,17 +150,15 @@
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
-    "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@types/webspeechapi": "0.0.29",
     "@vitest/coverage-v8": "4.1.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.0",
+    "eslint": "10.4.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.16.2",
@@ -183,8 +179,8 @@
     "husky": "9.1.7",
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
-    "license-checker-rseidelsohn": "4.4.2",
-    "lint-staged": "17.0.5",
+    "license-checker-rseidelsohn": "5.0.1",
+    "lint-staged": "17.0.7",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -195,10 +191,10 @@
     "serve": "14.2.6",
     "sinon": "22.0.0",
     "tar": "7.5.15",
-    "terser-webpack-plugin": "5.6.0",
+    "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.4",
+    "typescript-eslint": "8.60.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.7",
     "webpack-stats-plugin": "1.1.3",

pyproject.toml

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

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

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

src/common/search/related-context.ts

@@ -0,0 +1,37 @@
+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;
+  });

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

@@ -165,6 +165,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="leading-icon"]) {
       color: var(--ha-color-on-neutral-quiet);
     }
+    :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);

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

@@ -6,7 +6,6 @@ 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";
 
@@ -25,8 +24,6 @@ export interface SunburstNode {
 
 @customElement("ha-sunburst-chart")
 export class HaSunburstChart extends LitElement {
-  public hass!: HomeAssistant;
-
   @property({ attribute: false }) public data?: SunburstNode;
 
   @property({ attribute: false }) public valueFormatter?: (

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

@@ -107,17 +107,15 @@ 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 {

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

@@ -309,7 +309,29 @@ export class HaEntityPicker extends LitElement {
     }
   );
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
+  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 _getItems = () => {
     const items = this._getEntitiesMemoized(

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

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

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

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

src/components/entity/state-info.ts

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

src/components/ha-absolute-time.ts

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

src/components/ha-area-picker.ts

@@ -12,6 +12,7 @@ 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";
@@ -104,7 +105,29 @@ export class HaAreaPicker extends LitElement {
     await this._picker?.open();
   }
 
-  private _getAreasMemoized = memoizeOne(getAreas);
+  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,
+      })
+  );
 
   // Recompute value renderer when the areas change
   private _computeValueRenderer = memoizeOne(

src/components/ha-condition-icon.ts

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

src/components/ha-filter-blueprints.ts

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

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

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

src/components/ha-icon-button-arrow-prev.ts

@@ -3,13 +3,12 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
-import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 
 @customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property() public label?: string;
@@ -25,11 +24,15 @@ export class HaIconButtonArrowPrev extends LitElement {
   @state() private _icon =
     mainWindow.document.dir === "rtl" ? mdiArrowRight : mdiArrowLeft;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   protected render(): TemplateResult {
     return html`
       <ha-icon-button
         .disabled=${this.disabled}
-        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
+        .label=${this.label || this._localize("ui.common.back") || "Back"}
         .path=${this._icon}
         .href=${this.href}
         .target=${this.target}

src/components/ha-label.ts

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

src/components/ha-relative-time.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/ha-service-icon.ts

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

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

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

src/components/ha-sidebar.ts

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

src/components/ha-target-picker.ts

@@ -130,11 +130,56 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _newTarget?: TargetItem;
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
+  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 _getLabelsMemoized = memoizeOne(getLabels);
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
+  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 _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
 
@@ -919,7 +964,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           this.hass,
           configEntryLookup,
           includeDomains,
-          undefined,
           includeDeviceClasses,
           deviceFilter,
           entityFilter,

src/components/ha-trigger-icon.ts

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

src/components/trace/ha-trace-logbook.ts

@@ -1,6 +1,8 @@
 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";
@@ -17,6 +19,9 @@ export class HaTraceLogbook extends LitElement {
 
   @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
 
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
@@ -26,13 +31,10 @@ export class HaTraceLogbook extends LitElement {
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note
-            .hass=${this.hass}
-            .domain=${this.trace.domain}
-          ></hat-logbook-note>
+          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this.hass.localize(
+          ${this._localize(
             "ui.panel.config.automation.trace.path.no_logbook_entries"
           )}
         </div>`;

src/components/trace/ha-trace-path-details.ts

@@ -374,10 +374,7 @@ export class HaTracePathDetails extends LitElement {
             .entries=${entries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note
-            .hass=${this.hass}
-            .domain=${this.trace.domain}
-          ></hat-logbook-note>
+          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">
           ${this.hass!.localize(

src/components/trace/ha-trace-timeline.ts

@@ -28,10 +28,7 @@ export class HaTraceTimeline extends LitElement {
         allow-pick
       >
       </hat-trace-timeline>
-      <hat-logbook-note
-        .hass=${this.hass}
-        .domain=${this.trace.domain}
-      ></hat-logbook-note>
+      <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
     `;
   }
 

src/components/trace/hat-logbook-note.ts

@@ -1,20 +1,22 @@
 import { css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("hat-logbook-note")
 class HatLogbookNote extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public domain: "automation" | "script" = "automation";
 
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   render() {
     if (this.domain === "script") {
-      return this.hass.localize(
+      return this._localize(
         "ui.panel.config.automation.trace.messages.not_all_entries_are_related_script_note"
       );
     }
-    return this.hass.localize(
+    return this._localize(
       "ui.panel.config.automation.trace.messages.not_all_entries_are_related_automation_note"
     );
   }

src/components/user/ha-person-badge.ts

@@ -1,17 +1,20 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import type { BasePerson } from "../../data/person";
 import { computeUserInitials } from "../../data/user";
-import type { HomeAssistant } from "../../types";
+import { connectionContext } from "../../data/context";
 
 @customElement("ha-person-badge")
 class PersonBadge extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public person?: BasePerson;
 
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
+
   protected render() {
     if (!this.person) {
       return nothing;
@@ -19,10 +22,10 @@ class PersonBadge extends LitElement {
 
     const picture = this.person.picture;
 
-    if (picture) {
+    if (picture && this._connection) {
       return html`<div
         style=${styleMap({
-          backgroundImage: `url(${this.hass.hassUrl(picture)})`,
+          backgroundImage: `url(${this._connection.hassUrl(picture)})`,
         })}
         class="picture"
       ></div>`;

src/components/user/ha-user-badge.ts

@@ -1,57 +1,62 @@
+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 type { CurrentUser, HomeAssistant } from "../../types";
+import { connectionContext, statesContext } from "../../data/context";
+import type { CurrentUser } from "../../types";
 
 @customElement("ha-user-badge")
 class UserBadge extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public user?: User | CurrentUser;
 
-  @state() private _personPicture?: string;
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
 
-  private _personEntityId?: string;
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _states?: HassEntities;
 
-  public willUpdate(changedProps: PropertyValues<this>) {
+  @state() private _personEntityId?: string;
+
+  @state()
+  @consumeEntityState({ entityIdPath: ["_personEntityId"] })
+  private _personState?: HassEntity;
+
+  public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
-    if (changedProps.has("user")) {
-      this._getPersonPicture();
-      return;
-    }
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    // 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 (
-      this._personEntityId &&
-      oldHass &&
-      this.hass.states[this._personEntityId] !==
-        oldHass.states[this._personEntityId]
+      changedProps.has("user") ||
+      (changedProps.has("_states") &&
+        (!this._personEntityId || !this._states?.[this._personEntityId]))
     ) {
-      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();
+      this._updatePersonEntityId();
     }
   }
 
   protected render() {
-    if (!this.hass || !this.user) {
+    if (!this.user) {
       return nothing;
     }
-    const picture = this._personPicture;
+    const picture =
+      this._personEntityId &&
+      (this._personState?.attributes.entity_picture as string | undefined);
 
-    if (picture) {
+    if (picture && this._connection) {
       return html`<div
         style=${styleMap({
-          backgroundImage: `url(${this.hass.hassUrl(picture)})`,
+          backgroundImage: `url(${this._connection.hassUrl(picture)})`,
         })}
         class="picture"
       ></div>`;
@@ -64,20 +69,18 @@ class UserBadge extends LitElement {
     </div>`;
   }
 
-  private _getPersonPicture() {
+  private _updatePersonEntityId() {
     this._personEntityId = undefined;
-    this._personPicture = undefined;
-    if (!this.hass || !this.user) {
+    if (!this.user || !this._states) {
       return;
     }
-    for (const entity of Object.values(this.hass.states)) {
+    for (const entity of Object.values(this._states)) {
       if (
         entity.attributes.user_id === this.user.id &&
         computeStateDomain(entity) === "person"
       ) {
         this._personEntityId = entity.entity_id;
-        this._personPicture = entity.attributes.entity_picture;
-        break;
+        return;
       }
     }
   }

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

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

src/data/area/area_picker.ts

@@ -15,20 +15,33 @@ 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"],
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeAreas?: string[],
-  idPrefix = ""
+  options?: GetAreasOptions
 ): PickerComboBoxItem[] => {
+  const {
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeAreas,
+    idPrefix = "",
+  } = options ?? {};
   let deviceEntityLookup: DeviceEntityDisplayLookup = {};
   let inputDevices: DeviceRegistryEntry[] | undefined;
   let inputEntities: EntityRegistryDisplayEntry[] | undefined;

src/data/context/index.ts

@@ -1,5 +1,6 @@
 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,
@@ -10,10 +11,12 @@ 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
@@ -94,6 +97,11 @@ 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
 
 /**
@@ -162,3 +170,30 @@ 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

src/data/device/device_picker.ts

@@ -32,6 +32,17 @@ 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"],
@@ -96,15 +107,19 @@ export const deviceComboBoxKeys: FuseWeightedKey[] = [
 export const getDevices = (
   hass: HomeAssistant,
   configEntryLookup: Record<string, ConfigEntry>,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeDevices?: string[],
-  value?: string,
-  idPrefix = ""
+  options?: GetDevicesOptions
 ): DevicePickerItem[] => {
+  const {
+    includeDomains,
+    excludeDomains,
+    includeDeviceClasses,
+    deviceFilter,
+    entityFilter,
+    excludeDevices,
+    value,
+    idPrefix = "",
+  } = options ?? {};
+
   const devices = Object.values(hass.devices);
   const entities = Object.values(hass.entities);
 

src/data/energy.ts

@@ -222,6 +222,12 @@ 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[];
@@ -802,7 +808,16 @@ export const getEnergyDataCollection = (
       if (!collection.prefs) {
         // This will raise if not found.
         // Detect by checking `e.code === "not_found"
-        collection.prefs = await getEnergyPreferences(hass);
+        try {
+          collection.prefs = await getEnergyPreferences(hass);
+        } catch (err: any) {
+          if (err.code === "not_found") {
+            return {
+              prefs: EMPTY_PREFERENCES,
+            } as EnergyData;
+          }
+          throw err;
+        }
       }
 
       scheduleHourlyRefresh(collection);

src/data/entity/entity_picker.ts

@@ -41,18 +41,34 @@ 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,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  includeDeviceClasses?: string[],
-  includeUnitOfMeasurement?: string[],
-  includeEntities?: string[],
-  excludeEntities?: string[],
-  value?: string,
-  idPrefix = ""
+  options?: GetEntitiesOptions
 ): EntityComboBoxItem[] => {
+  const {
+    includeDomains,
+    excludeDomains,
+    entityFilter,
+    includeDeviceClasses,
+    includeUnitOfMeasurement,
+    includeEntities,
+    excludeEntities,
+    value,
+    idPrefix = "",
+  } = options ?? {};
+
   let items: EntityComboBoxItem[];
 
   let entityIds = Object.keys(hass.states);

src/data/search.ts

@@ -36,11 +36,11 @@ export type ItemType =
   | "script_blueprint";
 
 export const findRelated = (
-  hass: HomeAssistant,
+  hass: Pick<HomeAssistant, "callWS">,
   itemType: ItemType,
   itemId: string
 ): Promise<RelatedResult> =>
-  hass.callWS({
+  hass.callWS<RelatedResult>({
     type: "search/related",
     item_type: itemType,
     item_id: itemId,

src/data/update.ts

@@ -87,6 +87,19 @@ 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
@@ -133,6 +146,11 @@ 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

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -54,14 +54,12 @@ 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

src/dialogs/more-info/controls/more-info-automation.ts

@@ -23,7 +23,6 @@ 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>

src/dialogs/more-info/controls/more-info-sun.ts

@@ -36,7 +36,6 @@ class MoreInfoSun extends LitElement {
                     )}</span
               >
               <ha-relative-time
-                .hass=${this.hass}
                 .datetime=${item === "ris" ? risingDate : settingDate}
               ></ha-relative-time>
             </div>

src/dialogs/more-info/controls/more-info-weather.ts

@@ -201,7 +201,6 @@ 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>
@@ -213,7 +212,6 @@ class MoreInfoWeather extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_changed}
                     capitalize
                   ></ha-relative-time>
@@ -225,7 +223,6 @@ class MoreInfoWeather extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_updated}
                     capitalize
                   ></ha-relative-time>

src/dialogs/notifications/persistent-notification-item.ts

@@ -30,7 +30,6 @@ export class HuiPersistentNotificationItem extends LitElement {
           <span>
             <ha-relative-time
               id="relative-time"
-              .hass=${this.hass}
               .datetime=${this.notification.created_at}
               capitalize
             ></ha-relative-time>

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,4 +1,5 @@
 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";
@@ -47,7 +48,9 @@ import {
   type ActionCommandComboBoxItem,
   type NavigationComboBoxItem,
 } from "../../data/quick_bar";
-import type { RelatedResult } from "../../data/search";
+import type { RelatedIdSets } from "../../common/search/related-context";
+import { sortRelatedFirst } from "../../common/search/related-context";
+import { relatedContext } from "../../data/context";
 import {
   multiTermSortedSearch,
   type FuseWeightedKey,
@@ -70,6 +73,10 @@ 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;
@@ -80,8 +87,6 @@ export class QuickBar extends LitElement {
 
   @state() private _opened = false;
 
-  @state() private _relatedResult?: RelatedResult;
-
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
 
   private get _showEntityId() {
@@ -108,8 +113,6 @@ 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;
   }
 
@@ -432,7 +435,7 @@ export class QuickBar extends LitElement {
     this._selectedSection = section as QuickBarSection | undefined;
     return this._getItemsMemoized(
       this._configEntryLookup,
-      this._relatedResult,
+      this._relatedIdSets,
       searchString,
       this._selectedSection
     );
@@ -441,12 +444,11 @@ export class QuickBar extends LitElement {
   private _getItemsMemoized = memoizeOne(
     (
       configEntryLookup: Record<string, ConfigEntry>,
-      relatedResult: RelatedResult | undefined,
+      relatedIdSets: RelatedIdSets | undefined,
       filter?: string,
       section?: QuickBarSection
     ) => {
       const items: (string | PickerComboBoxItem)[] = [];
-      const relatedIdSets = this._getRelatedIdSets(relatedResult);
 
       if (!section || section === "navigate") {
         let navigateItems = this._generateNavigationCommandsMemoized(
@@ -498,7 +500,7 @@ export class QuickBar extends LitElement {
         let entityItems = this._getEntitiesMemoized(this.hass);
 
         // Mark related items
-        if (relatedIdSets.entities.size > 0) {
+        if (relatedIdSets?.entities.size) {
           entityItems = entityItems.map((item) => ({
             ...item,
             isRelated: relatedIdSets.entities.has(
@@ -508,7 +510,7 @@ export class QuickBar extends LitElement {
         }
 
         if (filter) {
-          entityItems = this._sortRelatedFirst(
+          entityItems = sortRelatedFirst(
             this._filterGroup(
               "entity",
               entityItems,
@@ -537,7 +539,7 @@ export class QuickBar extends LitElement {
         );
 
         // Mark related items
-        if (relatedIdSets.devices.size > 0) {
+        if (relatedIdSets?.devices.size) {
           deviceItems = deviceItems.map((item) => {
             const deviceId = item.id.split(SEPARATOR)[1];
             return {
@@ -548,7 +550,7 @@ export class QuickBar extends LitElement {
         }
 
         if (filter) {
-          deviceItems = this._sortRelatedFirst(
+          deviceItems = sortRelatedFirst(
             this._filterGroup("device", deviceItems, filter, deviceComboBoxKeys)
           );
         } else {
@@ -569,7 +571,7 @@ export class QuickBar extends LitElement {
         let areaItems = this._getAreasMemoized(this.hass);
 
         // Mark related items
-        if (relatedIdSets.areas.size > 0) {
+        if (relatedIdSets?.areas.size) {
           areaItems = areaItems.map((item) => {
             const areaId = item.id.split(SEPARATOR)[1];
             return {
@@ -580,7 +582,7 @@ export class QuickBar extends LitElement {
         }
 
         if (filter) {
-          areaItems = this._sortRelatedFirst(
+          areaItems = sortRelatedFirst(
             this._filterGroup("area", areaItems, filter, areaComboBoxKeys)
           );
         } else {
@@ -601,41 +603,13 @@ 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,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      `entity${SEPARATOR}`
-    )
+    getEntities(hass, { idPrefix: `entity${SEPARATOR}` })
   );
 
   private _getDevicesMemoized = memoizeOne(
     (hass: HomeAssistant, configEntryLookup: Record<string, ConfigEntry>) =>
-      getDevices(
-        hass,
-        configEntryLookup,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        `device${SEPARATOR}`
-      )
+      getDevices(hass, configEntryLookup, { idPrefix: `device${SEPARATOR}` })
   );
 
   private _getAreasMemoized = memoizeOne((hass: HomeAssistant) =>
@@ -645,13 +619,9 @@ export class QuickBar extends LitElement {
       hass.devices,
       hass.entities,
       hass.states,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      `area${SEPARATOR}`
+      {
+        idPrefix: `area${SEPARATOR}`,
+      }
     )
   );
 
@@ -705,10 +675,13 @@ export class QuickBar extends LitElement {
     );
   }
 
-  private _sortBySortingLabel = (entityA, entityB) =>
+  private _sortBySortingLabel = (
+    entityA: PickerComboBoxItem,
+    entityB: PickerComboBoxItem
+  ) =>
     caseInsensitiveStringCompare(
-      (entityA as PickerComboBoxItem).sorting_label!,
-      (entityB as PickerComboBoxItem).sorting_label!,
+      entityA.sorting_label!,
+      entityB.sorting_label!,
       this.hass.locale.language
     );
 
@@ -719,16 +692,6 @@ 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

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -1,5 +1,4 @@
 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";
 
@@ -10,17 +9,10 @@ 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). */

src/layouts/hass-error-screen.ts

@@ -33,7 +33,6 @@ class HassErrorScreen extends LitElement {
                 `
               : html`
                   <ha-icon-button-arrow-prev
-                    .hass=${this.hass}
                     @click=${this._handleBack}
                   ></ha-icon-button-arrow-prev>
                 `}

src/layouts/hass-loading-screen.ts

@@ -35,7 +35,6 @@ class HassLoadingScreen extends LitElement {
                 `
               : html`
                   <ha-icon-button-arrow-prev
-                    .hass=${this.hass}
                     @click=${this._handleBack}
                   ></ha-icon-button-arrow-prev>
                 `}

src/layouts/hass-subpage.ts

@@ -43,12 +43,10 @@ class HassSubpage extends LitElement {
               ? html`
                   <ha-icon-button-arrow-prev
                     href=${this.backPath}
-                    .hass=${this.hass}
                   ></ha-icon-button-arrow-prev>
                 `
               : html`
                   <ha-icon-button-arrow-prev
-                    .hass=${this.hass}
                     @click=${this._backTapped}
                   ></ha-icon-button-arrow-prev>
                 `}

src/layouts/hass-tabs-subpage-data-table.ts

@@ -391,7 +391,6 @@ 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}

src/layouts/hass-tabs-subpage.ts

@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -18,6 +19,7 @@ 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";
 
@@ -59,7 +61,9 @@ export class HassTabsSubpage extends LitElement {
 
   @property({ attribute: false }) public tabs!: PageNavigation[];
 
-  @property({ type: Boolean, reflect: true }) public narrow = false;
+  @state()
+  @consume({ context: narrowViewportContext, subscribe: true })
+  private _narrow = false;
 
   @property({ type: Boolean, reflect: true, attribute: "is-wide" })
   public isWide = false;
@@ -116,7 +120,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}
@@ -135,6 +139,8 @@ export class HassTabsSubpage extends LitElement {
   );
 
   public willUpdate(changedProperties: PropertyValues<this>) {
+    this.toggleAttribute("narrow", this._narrow);
+
     if (changedProperties.has("route")) {
       const currentPath = `${this.route.prefix}${this.route.path}`;
       this._activeTab = this.tabs.find((tab) =>
@@ -151,39 +157,37 @@ 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
                 ? html`
                     <ha-icon-button-arrow-prev
                       .href=${this.backPath}
-                      .hass=${this.hass}
                     ></ha-icon-button-arrow-prev>
                   `
                 : html`
                     <ha-icon-button-arrow-prev
-                      .hass=${this.hass}
                       @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">
@@ -191,7 +195,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>

src/layouts/home-assistant-main.ts

@@ -1,3 +1,4 @@
+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";
@@ -7,6 +8,7 @@ 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";
@@ -36,6 +38,11 @@ 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) => {
@@ -66,7 +73,6 @@ export class HomeAssistantMain extends LitElement {
         ></ha-sidebar>
         ${isPanelReady
           ? html`<partial-panel-resolver
-              .narrow=${this.narrow}
               .hass=${this.hass}
               .route=${this.route}
               slot="appContent"
@@ -121,6 +127,10 @@ 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;
     }

src/layouts/partial-panel-resolver.ts

@@ -1,12 +1,14 @@
+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 } from "lit/decorators";
+import { customElement, property, state } 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";
@@ -43,7 +45,9 @@ const COMPONENTS = {
 class PartialPanelResolver extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
+  @state()
+  @consume({ context: narrowViewportContext, subscribe: true })
+  private _narrow = false;
 
   private _waitForStart = false;
 
@@ -92,7 +96,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;
   }
 
@@ -100,7 +104,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];
   }

src/onboarding/dialogs/app-dialog.ts

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

src/onboarding/dialogs/community-dialog.ts

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

src/onboarding/dialogs/show-app-dialog.ts

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

src/onboarding/dialogs/show-community-dialog.ts

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

src/panels/climate/ha-panel-climate.ts

@@ -1,7 +1,6 @@
 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";
@@ -15,6 +14,7 @@ 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,38 +97,36 @@ class PanelClimate extends LitElement {
 
   protected render() {
     return html`
-      <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}
-                ></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
+      <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}
-                .lovelace=${this._lovelace}
-                .index=${this._viewIndex}
-              ></hui-view
-            ></hui-view-container>
-          `
-        : nothing}
+              ></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
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .lovelace=${this._lovelace}
+                  .index=${this._viewIndex}
+                ></hui-view
+              ></hui-view-container>
+            `
+          : nothing}
+      </ha-top-app-bar-fixed>
     `;
   }
 
@@ -169,78 +167,11 @@ 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%;

src/panels/config/apps/ha-config-app-dashboard.ts

@@ -135,7 +135,6 @@ 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"}

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -82,8 +82,6 @@ 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;
@@ -169,7 +167,6 @@ 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

src/panels/config/automation/add-automation-element/ha-automation-add-search.ts

@@ -20,6 +20,10 @@ 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";
@@ -40,7 +44,7 @@ import {
 } from "../../../../data/area_floor_picker";
 import { CONDITION_BUILDING_BLOCKS_GROUP } from "../../../../data/condition";
 import type { ConfigEntry } from "../../../../data/config_entries";
-import { labelsContext } from "../../../../data/context";
+import { labelsContext, relatedContext } from "../../../../data/context";
 import {
   deviceComboBoxKeys,
   getDevices,
@@ -129,6 +133,10 @@ export class HaAutomationAddSearch extends LitElement {
     | "condition"
     | "action";
 
+  @state()
+  @consume({ context: relatedContext, subscribe: true })
+  private _relatedIdSets?: RelatedIdSets;
+
   @state() private _searchSectionTitle?: string;
 
   @state() private _selectedSearchSection?: SearchSection;
@@ -141,11 +149,19 @@ export class HaAutomationAddSearch extends LitElement {
 
   @query("lit-virtualizer") private _virtualizerElement?: LitVirtualizer;
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
+  private _getDevicesMemoized = memoizeOne(
+    (
+      hass: HomeAssistant,
+      configEntryLookup: Record<string, ConfigEntry>,
+      idPrefix: string
+    ) => getDevices(hass, configEntryLookup, { idPrefix })
+  );
 
   private _getLabelsMemoized = memoizeOne(getLabels);
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
+  private _getEntitiesMemoized = memoizeOne(
+    (hass: HomeAssistant, idPrefix: string) => getEntities(hass, { idPrefix })
+  );
 
   private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
 
@@ -194,7 +210,8 @@ export class HaAutomationAddSearch extends LitElement {
       this.configEntryLookup,
       this.items,
       this.newTriggersAndConditions,
-      this._selectedSearchSection
+      this._selectedSearchSection,
+      this._relatedIdSets
     );
 
     let emptySearchTranslation: string | undefined;
@@ -487,7 +504,8 @@ export class HaAutomationAddSearch extends LitElement {
       configEntryLookup: Record<string, ConfigEntry>,
       automationItems: AddAutomationElementListItem[],
       newTriggersAndConditions: boolean,
-      selectedSection?: SearchSection
+      selectedSection?: SearchSection,
+      relatedIdSets?: RelatedIdSets
     ) => {
       const resultItems: (
         | string
@@ -557,24 +575,29 @@ 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 = this._filterGroup(
-              "entity",
-              entityItems,
-              searchTerm,
-              entityComboBoxKeys
+            entityItems = sortRelatedFirst(
+              this._filterGroup(
+                "entity",
+                entityItems,
+                searchTerm,
+                entityComboBoxKeys
+              )
             ) as EntityComboBoxItem[];
+          } else if (relatedIdSets?.entities.size) {
+            entityItems = sortRelatedFirst(entityItems) as EntityComboBoxItem[];
           }
 
           if (!selectedSection && entityItems.length) {
@@ -591,23 +614,29 @@ 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 = this._filterGroup(
-              "device",
-              deviceItems,
-              searchTerm,
-              deviceComboBoxKeys
+            deviceItems = sortRelatedFirst(
+              this._filterGroup(
+                "device",
+                deviceItems,
+                searchTerm,
+                deviceComboBoxKeys
+              )
             );
+          } else if (relatedIdSets?.devices.size) {
+            deviceItems = sortRelatedFirst(deviceItems);
           }
 
           if (!selectedSection && deviceItems.length) {
@@ -639,13 +668,31 @@ 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 = this._filterGroup(
-              "area",
-              areasAndFloors,
-              searchTerm,
-              areaFloorComboBoxKeys,
-              false
+            areasAndFloors = sortRelatedFirst(
+              this._filterGroup(
+                "area",
+                areasAndFloors,
+                searchTerm,
+                areaFloorComboBoxKeys,
+                false
+              )
+            ) as FloorComboBoxItem[];
+          } else if (relatedIdSets?.areas.size) {
+            areasAndFloors = sortRelatedFirst(
+              areasAndFloors
             ) as FloorComboBoxItem[];
           }
 

src/panels/config/automation/ha-automation-script-editor-mixin.ts

@@ -1,8 +1,14 @@
 import { consume } from "@lit/context";
-import type { CSSResult, LitElement, TemplateResult } from "lit";
+import type {
+  CSSResult,
+  LitElement,
+  PropertyValues,
+  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";
@@ -136,6 +142,21 @@ 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}>

src/panels/config/cloud/register/cloud-register.ts

@@ -217,7 +217,7 @@ export class CloudRegister extends LitElement {
 
     try {
       await cloudRegister(this.hass, email, password);
-      this._verificationEmailSent(email);
+      this._verificationEmailSent(email, "account_created");
     } catch (err: any) {
       this._password = "";
       this._requestInProgress = false;
@@ -238,15 +238,18 @@ export class CloudRegister extends LitElement {
 
     const email = emailField.value || "";
 
+    this._requestInProgress = true;
+
     const doResend = async (username: string) => {
       try {
         await cloudResendVerification(this.hass, username);
-        this._verificationEmailSent(username);
+        this._verificationEmailSent(username, "verification_email_sent");
       } catch (err: any) {
         const errCode = err && err.body && err.body.code;
         if (errCode === "usernotfound" && username !== username.toLowerCase()) {
           await doResend(username.toLowerCase());
         } else {
+          this._requestInProgress = false;
           this._error =
             err && err.body && err.body.message
               ? err.body.message
@@ -258,13 +261,16 @@ export class CloudRegister extends LitElement {
     await doResend(email);
   }
 
-  private _verificationEmailSent(email: string) {
+  private _verificationEmailSent(
+    email: string,
+    messageKey: "account_created" | "verification_email_sent"
+  ) {
     this._requestInProgress = false;
     this._password = "";
     fireEvent(this, "cloud-email-changed", { value: email });
     fireEvent(this, "cloud-done", {
       flashMessage: this.hass.localize(
-        "ui.panel.config.cloud.register.account_created"
+        `ui.panel.config.cloud.register.${messageKey}`
       ),
     });
   }

src/panels/config/core/ha-config-section-updates.ts

@@ -11,10 +11,15 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import { caseInsensitiveStringCompare } from "../../../common/string/compare";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
+import type { EntitySources } from "../../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../../data/entity/entity_sources";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import type {
   HassioSupervisorInfo,
@@ -25,9 +30,17 @@ import {
   reloadSupervisor,
   setSupervisorOption,
 } from "../../../data/hassio/supervisor";
+import { domainToName } from "../../../data/integration";
+import type { UpdateEntity } from "../../../data/update";
 import {
   checkForEntityUpdates,
+  filterUpdateEntities,
   filterUpdateEntitiesParameterized,
+  installUpdates,
+  isSystemUpdate,
+  latestVersionIsSkipped,
+  updateIsInstalling,
+  UpdateEntityFeature,
 } from "../../../data/update";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
@@ -35,6 +48,17 @@ import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
 
+interface UpdateGroup {
+  key: string;
+  title: string;
+  entities: UpdateEntity[];
+  showUpdateAll: boolean;
+}
+
+const SYSTEM_KEY = "__system__";
+const APPS_KEY = "__apps__";
+const INTEGRATIONS_KEY = "__integrations__";
+
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -47,23 +71,86 @@ class HaConfigSectionUpdates extends LitElement {
 
   @state() private _supervisorInfo?: HassioSupervisorInfo;
 
+  @state() private _entitySources?: EntitySources;
+
+  @state() private _loadedIntegrationTitles = new Set<string>();
+
   protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     if (isComponentLoaded(this.hass.config, "hassio")) {
       this._refreshSupervisorInfo();
     }
+
+    this._loadEntitySources();
+  }
+
+  private async _loadEntitySources() {
+    try {
+      this._entitySources = await fetchEntitySourcesWithCache(this.hass);
+    } catch (_err) {
+      // Non-fatal: grouping falls back to entity registry platform lookup.
+    }
+  }
+
+  protected updated(changedProps: PropertyValues<this>) {
+    super.updated(changedProps);
+    if (changedProps.has("hass")) {
+      this._loadIntegrationTitles();
+    }
+  }
+
+  private _collectUpdateDomains = memoizeOne(
+    (states: HassEntities, entities: HomeAssistant["entities"]) => {
+      const domains = new Set<string>();
+      for (const entity of Object.values(states)) {
+        if (!entity.entity_id.startsWith("update.")) continue;
+        const platform = entities[entity.entity_id]?.platform;
+        if (platform) {
+          domains.add(platform);
+        }
+      }
+      return domains;
+    }
+  );
+
+  private async _loadIntegrationTitles() {
+    const domains = this._collectUpdateDomains(
+      this.hass.states,
+      this.hass.entities
+    );
+    const toLoad: string[] = [];
+    for (const domain of domains) {
+      if (!this._loadedIntegrationTitles.has(domain)) {
+        toLoad.push(domain);
+      }
+    }
+    if (!toLoad.length) return;
+    toLoad.forEach((d) => this._loadedIntegrationTitles.add(d));
+    await this.hass.loadBackendTranslation("title", toLoad);
+    this.requestUpdate();
   }
 
   protected render(): TemplateResult {
-    const canInstallUpdates = this._filterInstallableUpdateEntities(
-      this.hass.states,
-      this._showSkipped
+    const installableUpdates = this._filterInstallableUpdateEntities(
+      this.hass.states
     );
     const notInstallableUpdates = this._filterNotInstallableUpdateEntities(
       this.hass.states,
       this._showSkipped
     );
+    const skippedUpdates = this._filterSkippedUpdateEntities(
+      this.hass.states,
+      this._showSkipped
+    );
+
+    const groups = this._groupUpdates(
+      installableUpdates,
+      this._entitySources,
+      this.hass.localize,
+      this.hass.entities,
+      this.hass.locale.language
+    );
 
     return html`
       <hass-subpage
@@ -118,19 +205,60 @@ class HaConfigSectionUpdates extends LitElement {
           </ha-dropdown>
         </div>
         <div class="content">
-          ${canInstallUpdates.length
+          ${groups.map(
+            (group) => html`
+              <ha-card outlined>
+                <div class="card-content">
+                  <div class="card-header">
+                    <div class="title" role="heading" aria-level="2">
+                      ${group.title}
+                    </div>
+                    ${group.showUpdateAll
+                      ? html`
+                          <ha-button
+                            appearance="plain"
+                            size="small"
+                            .group=${group}
+                            .disabled=${group.entities.every((entity) =>
+                              updateIsInstalling(entity)
+                            )}
+                            @click=${this._updateAll}
+                          >
+                            ${this.hass.localize(
+                              "ui.panel.config.updates.update_all"
+                            )}
+                          </ha-button>
+                        `
+                      : nothing}
+                  </div>
+                  <ha-config-updates
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .updateEntities=${group.entities}
+                    showAll
+                  ></ha-config-updates>
+                </div>
+              </ha-card>
+            `
+          )}
+          ${skippedUpdates.length
             ? html`
                 <ha-card outlined>
                   <div class="card-content">
-                    <div class="title" role="heading" aria-level="2">
-                      ${this.hass.localize("ui.panel.config.updates.title", {
-                        count: canInstallUpdates.length,
-                      })}
+                    <div class="card-header">
+                      <div class="title" role="heading" aria-level="2">
+                        ${this.hass.localize(
+                          "ui.panel.config.updates.title_skipped",
+                          {
+                            count: skippedUpdates.length,
+                          }
+                        )}
+                      </div>
                     </div>
                     <ha-config-updates
                       .hass=${this.hass}
                       .narrow=${this.narrow}
-                      .updateEntities=${canInstallUpdates}
+                      .updateEntities=${skippedUpdates}
                       showAll
                     ></ha-config-updates>
                   </div>
@@ -141,13 +269,15 @@ class HaConfigSectionUpdates extends LitElement {
             ? html`
                 <ha-card outlined>
                   <div class="card-content">
-                    <div class="title" role="heading" aria-level="2">
-                      ${this.hass.localize(
-                        "ui.panel.config.updates.title_not_installable",
-                        {
-                          count: notInstallableUpdates.length,
-                        }
-                      )}
+                    <div class="card-header">
+                      <div class="title" role="heading" aria-level="2">
+                        ${this.hass.localize(
+                          "ui.panel.config.updates.title_not_installable",
+                          {
+                            count: notInstallableUpdates.length,
+                          }
+                        )}
+                      </div>
                     </div>
                     <ha-config-updates
                       .hass=${this.hass}
@@ -159,7 +289,7 @@ class HaConfigSectionUpdates extends LitElement {
                 </ha-card>
               `
             : nothing}
-          ${canInstallUpdates.length + notInstallableUpdates.length
+          ${groups.length + notInstallableUpdates.length + skippedUpdates.length
             ? nothing
             : html`
                 <ha-card outlined>
@@ -211,9 +341,28 @@ class HaConfigSectionUpdates extends LitElement {
     checkForEntityUpdates(this, this.hass);
   }
 
+  private async _updateAll(ev: Event) {
+    const group = (ev.currentTarget as any).group as UpdateGroup;
+    const entityIds = group.entities
+      .filter((entity) => !updateIsInstalling(entity))
+      .map((entity) => entity.entity_id);
+    if (!entityIds.length) {
+      return;
+    }
+    try {
+      await installUpdates(this.hass, entityIds);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize("ui.panel.config.updates.update_all_failed"),
+        text: extractApiErrorMessage(err),
+        warning: true,
+      });
+    }
+  }
+
   private _filterInstallableUpdateEntities = memoizeOne(
-    (entities: HassEntities, showSkipped: boolean) =>
-      filterUpdateEntitiesParameterized(entities, showSkipped, false)
+    (entities: HassEntities) =>
+      filterUpdateEntitiesParameterized(entities, false, false)
   );
 
   private _filterNotInstallableUpdateEntities = memoizeOne(
@@ -221,6 +370,111 @@ class HaConfigSectionUpdates extends LitElement {
       filterUpdateEntitiesParameterized(entities, showSkipped, true)
   );
 
+  private _filterSkippedUpdateEntities = memoizeOne(
+    (entities: HassEntities, showSkipped: boolean): UpdateEntity[] => {
+      if (!showSkipped) {
+        return [];
+      }
+      return filterUpdateEntities(entities).filter(
+        (entity) =>
+          latestVersionIsSkipped(entity) &&
+          supportsFeature(entity, UpdateEntityFeature.INSTALL)
+      );
+    }
+  );
+
+  private _groupUpdates = memoizeOne(
+    (
+      entities: UpdateEntity[],
+      entitySources: EntitySources | undefined,
+      localize: HomeAssistant["localize"],
+      entityRegistry: HomeAssistant["entities"],
+      language: string
+    ): UpdateGroup[] => {
+      if (!entities.length) {
+        return [];
+      }
+
+      const systemEntities: UpdateEntity[] = [];
+      const appEntities: UpdateEntity[] = [];
+      const byDomain = new Map<string, UpdateEntity[]>();
+      const otherIntegrationEntities: UpdateEntity[] = [];
+
+      for (const entity of entities) {
+        if (isSystemUpdate(entity)) {
+          systemEntities.push(entity);
+          continue;
+        }
+        const domain =
+          entitySources?.[entity.entity_id]?.domain ??
+          entityRegistry[entity.entity_id]?.platform;
+        if (domain === "hassio") {
+          appEntities.push(entity);
+          continue;
+        }
+        if (!domain) {
+          otherIntegrationEntities.push(entity);
+          continue;
+        }
+        if (!byDomain.has(domain)) {
+          byDomain.set(domain, []);
+        }
+        byDomain.get(domain)!.push(entity);
+      }
+
+      const multiInstanceGroups: UpdateGroup[] = [];
+      byDomain.forEach((entries, domain) => {
+        if (entries.length >= 2) {
+          multiInstanceGroups.push({
+            key: domain,
+            title: domainToName(localize, domain),
+            entities: entries,
+            showUpdateAll: true,
+          });
+        } else {
+          otherIntegrationEntities.push(...entries);
+        }
+      });
+
+      multiInstanceGroups.sort((a, b) =>
+        caseInsensitiveStringCompare(a.title, b.title, language)
+      );
+
+      const groups: UpdateGroup[] = [];
+
+      if (systemEntities.length) {
+        groups.push({
+          key: SYSTEM_KEY,
+          title: localize("ui.panel.config.updates.group_system"),
+          entities: systemEntities,
+          showUpdateAll: false,
+        });
+      }
+
+      groups.push(...multiInstanceGroups);
+
+      if (otherIntegrationEntities.length) {
+        groups.push({
+          key: INTEGRATIONS_KEY,
+          title: localize("ui.panel.config.updates.group_integrations"),
+          entities: otherIntegrationEntities,
+          showUpdateAll: true,
+        });
+      }
+
+      if (appEntities.length) {
+        groups.push({
+          key: APPS_KEY,
+          title: localize("ui.panel.config.updates.group_apps"),
+          entities: appEntities,
+          showUpdateAll: true,
+        });
+      }
+
+      return groups;
+    }
+  );
+
   static styles = css`
     .content {
       padding: 28px 20px 0;
@@ -247,8 +501,15 @@ class HaConfigSectionUpdates extends LitElement {
       padding: 0;
     }
 
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ha-space-2);
+      padding: var(--ha-space-4) var(--ha-space-2) 0 var(--ha-space-4);
+    }
+
     .title {
-      padding: var(--ha-space-4) var(--ha-space-4) 0;
       font-size: var(--ha-font-size-l);
     }
 

src/panels/config/dashboard/ha-config-updates.ts

@@ -104,9 +104,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
 
           return html`
             <ha-list-item-button
-              class=${ifDefined(
-                entity.attributes.skipped_version ? "skipped" : undefined
-              )}
               .entity_id=${entity.entity_id}
               .hasMeta=${!this.narrow}
               @click=${this._openMoreInfo}
@@ -166,9 +163,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup[] {
     return [
       css`
-        .skipped {
-          background: var(--secondary-background-color);
-        }
         ha-list-item-button {
           --md-list-item-leading-icon-size: 40px;
         }

src/panels/config/developer-tools/ha-panel-developer-tools.ts

@@ -36,7 +36,6 @@ class PanelDeveloperTools extends LitElement {
         <div class="toolbar">
           <ha-icon-button-arrow-prev
             slot="navigationIcon"
-            .hass=${this.hass}
             @click=${this._handleBack}
           ></ha-icon-button-arrow-prev>
           <div class="main-title">

src/panels/config/devices/ha-config-device-page.ts

@@ -380,7 +380,7 @@ export class HaConfigDevicePage extends LitElement {
     if (changedProps.has("deviceId")) {
       this._findRelated();
       // Broadcast device context for quick bar
-      fireEvent(this, "hass-quick-bar-context", {
+      fireEvent(this, "hass-related-context", {
         itemType: "device",
         itemId: this.deviceId,
       });

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -142,26 +142,6 @@ export class DialogEnergyBatterySettings
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : nothing}
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .helpMissingEntityUrl=${energyStatisticHelpUrl}
-          .includeUnitClass=${energyUnitClasses}
-          .value=${this._source.stat_energy_to}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.energy_into_battery"
-          )}
-          .excludeStatistics=${[
-            ...(this._excludeList || []),
-            this._source.stat_energy_from,
-          ]}
-          @value-changed=${this._statisticToChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.energy_helper_into",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
-          autofocus
-        ></ha-statistic-picker>
-
         <ha-statistic-picker
           .hass=${this.hass}
           .helpMissingEntityUrl=${energyStatisticHelpUrl}
@@ -179,6 +159,26 @@ export class DialogEnergyBatterySettings
             "ui.panel.config.energy.battery.dialog.energy_helper_out",
             { unit: this._energy_units?.join(", ") || "" }
           )}
+          autofocus
+        ></ha-statistic-picker>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .helpMissingEntityUrl=${energyStatisticHelpUrl}
+          .includeUnitClass=${energyUnitClasses}
+          .value=${this._source.stat_energy_to}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.energy_into_battery"
+          )}
+          .excludeStatistics=${[
+            ...(this._excludeList || []),
+            this._source.stat_energy_from,
+          ]}
+          @value-changed=${this._statisticToChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.energy_helper_into",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
         ></ha-statistic-picker>
 
         <ha-input

src/panels/config/energy/ha-config-energy.ts

@@ -118,7 +118,6 @@ class HaConfigEnergy extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .narrow=${this.narrow}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config/lovelace/dashboards"}

src/panels/config/entities/ha-config-entities.ts

@@ -774,7 +774,11 @@ export class HaConfigEntities extends LitElement {
             .checked=${selected}
             .indeterminate=${partial}
           ></ha-checkbox>
-          <ha-label .color=${label.color} .description=${label.description}>
+          <ha-label
+            .color=${label.color}
+            .description=${label.description}
+            class="text-ellipsis"
+          >
             ${label.icon
               ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
               : nothing}
@@ -1674,10 +1678,14 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-dropdown::part(menu),
-        ha-dropdown::part(submenu) {
+        ha-dropdown::part(menu) {
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
+        ha-dropdown-item::part(submenu) {
+          max-width: calc(60vw - var(--ha-space-8));
+          max-height: calc(100vh - var(--ha-space-8));
+          overflow-y: auto;
+        }
         ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }

src/panels/config/hardware/ha-config-hardware-overview.ts

@@ -58,8 +58,6 @@ const DATA_SET_CONFIG: SeriesOption = {
 class HaConfigHardwareOverview extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public route!: Route;
 
   @state() private _error?: string;
@@ -249,7 +247,6 @@ class HaConfigHardwareOverview extends SubscribeMixin(LitElement) {
       <hass-tabs-subpage
         back-path="/config/system"
         .hass=${this.hass}
-        .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${hardwareTabs(this.hass)}
       >

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -511,7 +511,6 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .narrow=${this.narrow}
         .backPath=${this._searchParams.has("historyBack")
           ? undefined
           : "/config"}

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -173,7 +173,6 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
           defaultHidden: false,
           template: (ad) =>
             html`<ha-relative-time
-              .hass=${this.hass}
               .datetime=${ad.datetime}
               capitalize
             ></ha-relative-time>`,

src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts

@@ -375,7 +375,6 @@ class DialogMatterAddDevice extends LitElement {
           ? html`
               <ha-icon-button-arrow-prev
                 slot="headerNavigationIcon"
-                .hass=${this.hass}
                 @click=${this._back}
               ></ha-icon-button-arrow-prev>
             `

src/panels/config/person/ha-config-person.ts

@@ -39,8 +39,6 @@ export class HaConfigPerson 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 _storageItems?: Person[];
@@ -61,7 +59,6 @@ export class HaConfigPerson extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .narrow=${this.narrow}
         .route=${this.route}
         back-path="/config"
         .tabs=${configSections.persons}
@@ -102,7 +99,6 @@ export class HaConfigPerson extends LitElement {
                     .entry=${entry}
                   >
                     <ha-person-badge
-                      .hass=${this.hass}
                       .person=${entry}
                       slot="graphic"
                     ></ha-person-badge>
@@ -139,7 +135,6 @@ export class HaConfigPerson extends LitElement {
                       (entry) => html`
                         <ha-list-item graphic="avatar">
                           <ha-person-badge
-                            .hass=${this.hass}
                             .person=${entry}
                             slot="graphic"
                           ></ha-person-badge>

src/panels/config/storage/storage-breakdown-chart.ts

@@ -78,7 +78,6 @@ export class StorageBreakdownChart extends LitElement {
               )}
             ></ha-segmented-bar>`
           : html`<ha-sunburst-chart
-              .hass=${this.hass}
               .data=${this._transformToSunburstData(this.storageInfo!)}
               .valueFormatter=${this._formatBytes}
             ></ha-sunburst-chart>`}

src/panels/config/tags/ha-config-tags.ts

@@ -101,7 +101,6 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         template: (tag) => html`
           ${tag.last_scanned_datetime
             ? html`<ha-relative-time
-                .hass=${this.hass}
                 .datetime=${tag.last_scanned_datetime}
                 capitalize
               ></ha-relative-time>`

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -27,8 +27,6 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ type: Boolean }) public narrow = false;
-
   @property({ attribute: false }) public route!: Route;
 
   protected render() {
@@ -39,7 +37,6 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
         .tabs=${voiceAssistantTabs}

src/panels/config/zone/ha-config-zone.ts

@@ -234,7 +234,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
-        .narrow=${this.narrow}
         .route=${this.route}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined

src/panels/energy/ha-panel-energy.ts

@@ -14,6 +14,7 @@ import "../lovelace/hui-root";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
+import { DEFAULT_POWER_COLLECTION_KEY } from "./constants";
 
 @customElement("ha-panel-energy")
 class PanelEnergy extends LitElement {
@@ -86,7 +87,15 @@ class PanelEnergy extends LitElement {
 
   private async _setLovelace() {
     const config: LovelaceConfig = await generateLovelaceDashboardStrategy(
-      { strategy: { type: "energy" } },
+      {
+        strategy: {
+          type: "energy",
+          default_collection:
+            this.route?.path === "/now"
+              ? DEFAULT_POWER_COLLECTION_KEY
+              : undefined,
+        },
+      },
       this.hass
     );
 

src/panels/energy/strategies/energy-dashboard-strategy.ts

@@ -1,12 +1,16 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import { getEnergyDataCollection } from "../../../data/energy";
+import {
+  EMPTY_PREFERENCES,
+  getEnergyDataCollection,
+} from "../../../data/energy";
 import type { EnergyPreferences } from "../../../data/energy";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceConfig } from "../../../data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import type { HomeAssistant } from "../../../types";
+import type { LovelaceStrategyDependency } from "../../lovelace/strategies/types";
 import {
   DEFAULT_ENERGY_COLLECTION_KEY,
   DEFAULT_POWER_COLLECTION_KEY,
@@ -58,23 +62,20 @@ const WIZARD_VIEW = {
   cards: [{ type: "custom:energy-setup-wizard-card" }],
 };
 
-const EMPTY_PREFERENCES: EnergyPreferences = {
-  energy_sources: [],
-  device_consumption: [],
-  device_consumption_water: [],
-};
-
 export interface EnergyDashboardStrategyConfig extends LovelaceStrategyConfig {
   type: "energy";
+  default_collection?: string;
 }
 
 @customElement("energy-dashboard-strategy")
 export class EnergyDashboardStrategy extends ReactiveElement {
+  static registryDependencies: readonly LovelaceStrategyDependency[] = [];
+
   static async generate(
     _config: EnergyDashboardStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceConfig> {
-    const prefs = await fetchEnergyPrefs(hass);
+    const prefs = await fetchEnergyPrefs(hass, _config.default_collection);
 
     if (
       !prefs ||
@@ -147,20 +148,19 @@ export class EnergyDashboardStrategy extends ReactiveElement {
 }
 
 async function fetchEnergyPrefs(
-  hass: HomeAssistant
+  hass: HomeAssistant,
+  defaultCollection?: string
 ): Promise<EnergyPreferences> {
   const collection = getEnergyDataCollection(hass, {
-    key: DEFAULT_ENERGY_COLLECTION_KEY,
+    key: defaultCollection || DEFAULT_ENERGY_COLLECTION_KEY,
+  });
+
+  return await new Promise<EnergyPreferences>((resolve) => {
+    const unsub = collection.subscribe((data) => {
+      unsub();
+      resolve(data.prefs || EMPTY_PREFERENCES);
+    });
   });
-  try {
-    await collection.refresh();
-  } catch (err: any) {
-    if (err.code === "not_found") {
-      return EMPTY_PREFERENCES;
-    }
-    throw err;
-  }
-  return collection.prefs || EMPTY_PREFERENCES;
 }
 
 declare global {