Migrate deprecated Web Awesome size values to short form (s/m/l)

Restore search field autofocus in card and badge pickers (#52387 )
Landingpage download progress (#52359 )
2026-06-03 15:02:01 +00:00 · 2026-06-03 14:47:44 +02:00 · 2026-06-03 10:49:50 +01:00 · 2026-06-03 12:07:01 +03:00 · 2026-06-03 10:21:48 +02:00 · 2026-06-03 08:56:26 +02:00
337 changed files with 4754 additions and 3462 deletions
@@ -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
@@ -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: ""
@@ -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
@@ -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
@@ -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`),
@@ -78,13 +78,13 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action",
    type: "error",
-    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">restart</ha-button>`,
  },
  {
    title: "Unsaved data",
    description: "You have unsaved data",
    type: "warning",
-    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">save</ha-button>`,
  },
  {
    title: "Slotted icon",
@@ -26,7 +26,7 @@ title: Button
    filled button
  </ha-button>

-  <ha-button size="small">
+  <ha-button size="s">
    small
  </ha-button>
 </div>
@@ -34,7 +34,7 @@ title: Button
 ```html
 <ha-button> simple button </ha-button>

-<ha-button size="small"> small </ha-button>
+<ha-button size="s"> small </ha-button>
 ```

 ### API
@@ -57,7 +57,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
-| size       | "small"/"medium"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
 | disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |

@@ -49,7 +49,7 @@ export class DemoHaButton extends LitElement {
                          <ha-button
                            .appearance=${appearance}
                            .variant=${variant}
-                            size="small"
+                            size="s"
                          >
                            ${titleCase(`${variant} ${appearance}`)}
                          </ha-button>
@@ -100,7 +100,7 @@ export class DemoHaButton extends LitElement {
                          <ha-button
                            .variant=${variant}
                            .appearance=${appearance}
-                            size="small"
+                            size="s"
                            disabled
                          >
                            ${titleCase(`${appearance}`)}
@@ -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`.
@@ -17,13 +17,13 @@ subtitle: A slider component for selecting a value from a range.
 ### Example Usage

 <div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
+  <ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+  <ha-slider size="m"></ha-slider>
 </div>

 ```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
+<ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+<ha-slider size="m"></ha-slider>
 ```

 ### API
@@ -29,7 +29,7 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
                <span>Small</span>
                <ha-slider
-                  size="small"
+                  size="s"
                  min="0"
                  max="8"
                  value="4"
@@ -37,7 +37,7 @@ export class DemoHaSlider extends LitElement {
                ></ha-slider>
                <span>Medium</span>
                <ha-slider
-                  size="medium"
+                  size="m"
                  min="0"
                  max="8"
                  value="4"
@@ -13,6 +13,28 @@ export interface NetworkInfo {
  supervisor_internet: boolean;
 }

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

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

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

  @state() private _coreCheckActive = false;

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

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

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

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

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

+  private async _fetchSupervisorJobsInfo() {
+    try {
+      const jobsInfo = await getSupervisorJobsInfo();
+      const coreInstallJob =
+        jobsInfo.result === "ok"
+          ? jobsInfo.data.jobs.find(
+              (job) => job.name === "home_assistant_core_install"
+            )
+          : undefined;
+      if (coreInstallJob) {
+        this._progress = coreInstallJob.progress;
+      } else {
+        this._progress = -1;
+      }
+    } catch (err: any) {
+      await this._checkCoreAvailability();
+
+      if (!this._coreCheckActive) {
+        this._progress = -1;
+        // eslint-disable-next-line no-console
+        console.error("Failed to fetch supervisor jobs info", err);
+      }
+    }
+
+    this._scheduleFetchSupervisorJobsInfo();
+  }
+
  private async _checkCoreAvailability() {
    try {
      const response = await fetch("/manifest.json");
@@ -222,21 +268,27 @@ class HaLandingPage extends LandingPageBaseElement {
        flex-direction: column;
        gap: var(--ha-space-4);
      }
-      ha-language-picker {
-        min-width: 200px;
-      }
      ha-alert p {
        text-align: unset;
      }
      .footer ha-svg-icon {
        --mdc-icon-size: var(--ha-space-5);
      }
+      ha-language-picker {
+        margin-inline-start: calc(-1 * var(--ha-space-4));
+      }
+      ha-button {
+        margin-inline-end: calc(-1 * var(--ha-space-2));
+      }
      ha-fade-in {
        min-height: calc(100vh - 64px - 88px);
        display: flex;
        justify-content: center;
        align-items: center;
      }
+      ha-progress-bar {
+        --ha-progress-bar-track-height: 20px;
+      }
    `,
  ];
 }
@@ -27,7 +27,7 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.29.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.6",
    "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",
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.1"
+version      = "20260527.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -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
@@ -17,6 +17,19 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;

+/**
+ * Stash a destination URL in the current history entry's state. If the page
+ * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
+ * on load instead of cleaning up the stale dialog state by going back.
+ * The current URL is not changed.
+ */
+export const setRefreshUrl = (path: string) => {
+  mainWindow.history.replaceState(
+    { ...mainWindow.history.state, refreshUrl: path },
+    ""
+  );
+};
+
 /**
 * Ensures all dialogs are closed before navigation.
 * Returns true if navigation can proceed, false if a dialog refused to close.
@@ -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;
+  });
@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";

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

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

  @property() public label = "";

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

  static styles = css`
    :host {
      position: absolute;
+      top: -5px;
      inset-inline-end: -6px;
      display: inline-block;
    }
    #indicator {
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
      border-radius: var(--ha-border-radius-circle);
-      border: 3px solid;
+      border: var(--ha-border-width-md) solid;
      box-sizing: border-box;
      background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
      transition: all var(--ha-animation-duration-normal) ease-in-out;
    }
    :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-fill-success-loud-resting);
-      border-color: var(--ha-color-fill-success-loud-resting);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
    }
    :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-fill-warning-loud-resting);
+      border-color: var(--ha-color-orange-60);
    }
    :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-fill-danger-loud-resting);
+      border-color: var(--ha-color-red-60);
    }
    :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-fill-neutral-loud-resting);
+      border-color: var(--ha-color-neutral-60);
    }
  `;
 }
@@ -165,7 +165,8 @@ export class HaAutomationRow extends LitElement {
    ::slotted([slot="leading-icon"]) {
      color: var(--ha-color-on-neutral-quiet);
    }
-    :host([building-block]) ::slotted([slot="leading-icon"]) {
+    :host([building-block]) ::slotted([slot="leading-icon"].action-icon),
+    :host([building-block]) ::slotted(#condition-icon) {
      --mdc-icon-size: var(--ha-space-5);
      color: var(--white-color);
      transform: rotate(-45deg);
@@ -101,18 +101,22 @@ export class HaSankeyChart extends LitElement {
    const value = this.valueFormatter
      ? this.valueFormatter(data.value)
      : data.value;
+    // Keep numbers and units left-to-right, even in RTL locales.
+    const formattedValue = html`<div style="direction:ltr; display: inline;">
+      ${value}
+    </div>`;
    if (data.id) {
      const node = this.data.nodes.find((n) => n.id === data.id);
      return html`<ha-chart-tooltip-marker
          .color=${String(params.color ?? "")}
        ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${value}`;
+        ${node?.label ?? data.id}<br />${formattedValue}`;
    }
    if (data.source && data.target) {
      const source = this.data.nodes.find((n) => n.id === data.source);
      const target = this.data.nodes.find((n) => n.id === data.target);
      return html`${source?.label ?? data.source} →
-        ${target?.label ?? data.target}<br />${value}`;
+        ${target?.label ?? data.target}<br />${formattedValue}`;
    }
    return null;
  };
@@ -6,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?: (
@@ -167,7 +167,7 @@ export class StateHistoryCharts extends LitElement {
          )}`}
      ${this.syncCharts && this._hasZoomedCharts
        ? html`<ha-button
-            size="large"
+            size="l"
            class="reset-button"
            @click=${this._handleGlobalZoomReset}
          >
@@ -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 {
@@ -117,7 +117,7 @@ export class HaEntityNamePicker extends LitElement {
        <div class="header">
          ${this.label ? html`<label>${this.label}</label>` : nothing}
          <ha-button-toggle-group
-            size="small"
+            size="s"
            .buttons=${modeButtons}
            .active=${this._mode}
            .disabled=${this.disabled}
@@ -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(
@@ -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];

@@ -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 || [];
  }
@@ -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>
@@ -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
      );
    }
  }
@@ -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(
@@ -15,7 +15,7 @@ import "./ha-svg-icon";
 *
 * @attr {ToggleButton[]} buttons - the button config
 * @attr {string} active - The value of the currently active button.
- * @attr {("small"|"medium")} size - The size of the buttons in the group.
+ * @attr {("s"|"m")} size - The size of the buttons in the group.
 * @attr {("brand"|"neutral"|"success"|"warning"|"danger")} variant - The variant of the buttons in the group.
 *
 * @fires value-changed - Dispatched when the active button changes.
@@ -26,7 +26,7 @@ export class HaButtonToggleGroup extends LitElement {

  @property() public active?: string;

-  @property({ reflect: true }) size: "small" | "medium" = "medium";
+  @property({ reflect: true }) size: "s" | "m" = "m";

  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
  public nowrap = false;
@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
 * @cssprop --ha-button-height - The height of the button.
 * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-border-radius-pill)`.
 *
- * @attr {("small"|"medium"|"large")} size - Sets the button size.
+ * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
 * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
 * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
 * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
@@ -65,7 +65,7 @@ export class HaButton extends Button {
          box-shadow: var(--ha-button-box-shadow);
        }

-        :host([size="small"]) .button {
+        :host([size="s"]) .button {
          --wa-form-control-height: var(
            --ha-button-height,
            var(--button-height, 32px)
@@ -74,7 +74,7 @@ export class HaButton extends Button {
          --wa-form-control-padding-inline: var(--ha-space-3);
        }

-        :host([size="large"]) .button {
+        :host([size="l"]) .button {
          --wa-form-control-height: var(
            --ha-button-height,
            var(--button-height, 48px)
@@ -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) {
@@ -61,7 +61,7 @@ export class HaDurationInput extends LitElement {
        ${this.allowNegative
          ? html`
              <ha-button-toggle-group
-                size="small"
+                size="s"
                .buttons=${[
                  { label: "+", iconPath: mdiPlusThick, value: "+" },
                  { label: "-", iconPath: mdiMinusThick, value: "-" },
@@ -120,7 +120,7 @@ export class HaFileUpload extends LitElement {
            @dragend=${this._handleDragEnd}
            >${!this.value
              ? html`<ha-button
-                    size="small"
+                    size="s"
                    appearance="filled"
                    @click=${this._openFilePicker}
                  >
@@ -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
@@ -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
@@ -129,7 +129,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
              @wa-select=${this._handleAddAction}
              @closed=${stopPropagation}
            >
-              <ha-button slot="trigger" appearance="filled" size="small">
+              <ha-button slot="trigger" appearance="filled" size="s">
                <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                ${this.localize?.("ui.components.form-optional-actions.add") ||
                "Add interaction"}
@@ -77,7 +77,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
    | "bottom-start"
    | "bottom-end"
    | "left-start"
-    | "left-end" = "bottom-start";
+    | "left-end" = "bottom";

  /** If set picker shows an add button instead of textbox when value isn't set */
  @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
@@ -174,7 +174,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
          <slot name="field">
            ${this.addButtonLabel && !this.value
              ? html`<ha-button
-                  size="small"
+                  size="s"
                  appearance="filled"
                  @click=${this.open}
                  .disabled=${this.disabled}
@@ -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}
@@ -121,7 +121,6 @@ export class HaIconPicker extends LitElement {
        .label=${this.label}
        .value=${this._value}
        .searchFn=${this._filterIcons}
-        popover-placement="bottom-start"
        @value-changed=${this._valueChanged}
      >
        <slot name="start"></slot>
@@ -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;
+        }
      `,
    ];
  }
@@ -171,7 +171,7 @@ export class HaLabelsPicker extends LitElement {
            : nothing}
          <ha-button
            id="picker"
-            size="small"
+            size="s"
            appearance="filled"
            @click=${this._openPicker}
            .disabled=${this.disabled}
@@ -152,7 +152,6 @@ export class HaLanguagePicker extends LitElement {
      <ha-generic-picker
        .hass=${this.hass}
        .autofocus=${this.autofocus}
-        popover-placement="bottom-end"
        .notFoundLabel=${this._notFoundLabel}
        .emptyLabel=${this.hass?.localize(
          "ui.components.language-picker.no_languages"
@@ -53,7 +53,7 @@ class HaLawnMowerActionButton extends LitElement {
          appearance="plain"
          @click=${this.callService}
          .service=${action.service}
-          size="small"
+          size="s"
        >
          ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
        </ha-button>
@@ -102,7 +102,7 @@ export class HaPictureUpload extends LitElement {
        <div>
          <ha-button
            appearance="plain"
-            size="small"
+            size="s"
            variant="danger"
            @click=${this._handleChangeClick}
          >
@@ -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;
@@ -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 &&
@@ -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;
@@ -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)
      );
    }

@@ -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 {
@@ -58,11 +63,11 @@ export class HaChooseSelector extends LitElement {
    return html`<div class="multi-header">
        <span>${this.label}${this.required ? "*" : ""}</span>
        <ha-button-toggle-group
-          size="small"
+          size="s"
          .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:
@@ -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}
@@ -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}
@@ -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?:
@@ -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,
        }),
      });
@@ -190,7 +190,7 @@ export class HaMediaSelector extends LitElement {
              ? html`<div>
                  <ha-button
                    appearance="plain"
-                    size="small"
+                    size="s"
                    variant="danger"
                    @click=${this._clearValue}
                  >
@@ -307,7 +307,7 @@ export class HaNumericThresholdSelector extends LitElement {
              >`
            : nothing}
          <ha-button-toggle-group
-            size="small"
+            size="s"
            .buttons=${choiceToggleButtons}
            .active=${activeChoice}
            .disabled=${this.disabled}
@@ -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`
@@ -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)
      );
    }

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

@@ -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
@@ -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)}`;
  }
@@ -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) => {
@@ -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
        >
@@ -5,7 +5,7 @@ import { mainWindow } from "../common/dom/get_main_window";

@customElement("ha-slider")
 export class HaSlider extends Slider {
-  @property({ reflect: true }) size: "small" | "medium" = "small";
+  @property({ reflect: true }) size: "s" | "m" = "s";

  @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;

@@ -110,12 +110,12 @@ export class HaSlider extends Slider {
          );
        }

-        :host([size="medium"]) {
+        :host([size="m"]) {
          --thumb-width: 20px;
          --thumb-height: 20px;
        }

-        :host([size="small"]) {
+        :host([size="s"]) {
          --thumb-width: 16px;
          --thumb-height: 16px;
        }
@@ -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,
@@ -82,7 +82,6 @@ export class HaThemePicker extends LitElement {
        .disabled=${this.disabled}
        .required=${this.required}
        @value-changed=${this._changed}
-        popover-placement="bottom"
      ></ha-generic-picker>
    `;
  }
@@ -22,6 +22,7 @@ export const haTopAppBarFixedStyles = css`
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    transition:
+      box-shadow var(--ha-animation-duration-normal) ease,
      width var(--ha-animation-duration-normal) ease,
      padding-left var(--ha-animation-duration-normal) ease,
      padding-right var(--ha-animation-duration-normal) ease;
@@ -43,7 +43,7 @@ class HaTracePicker extends LitElement {
        slot="field"
        appearance="filled"
        variant="neutral"
-        size="small"
+        size="s"
        @click=${this._openPicker}
      >
        ${this._renderTracePickerValue(this.value!)}
@@ -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)}`;
  }
@@ -58,7 +58,7 @@ export class HaVacuumState extends LitElement {
    return html`
      <ha-button
        appearance="plain"
-        size="small"
+        size="s"
        @click=${this._callService}
        .disabled=${!interceptable}
      >
@@ -99,7 +99,7 @@ export class HaInputCopy extends LitElement {
              : nothing}
          </ha-input>
        </div>
-        <ha-button @click=${this._copy} appearance="plain" size="small">
+        <ha-button @click=${this._copy} appearance="plain" size="s">
          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
          ${this.label || this._i18n.localize("ui.common.copy")}
        </ha-button>
@@ -130,7 +130,7 @@ class HaInputMulti extends LitElement {
      </ha-sortable>
      <div class="layout horizontal">
        <ha-button
-          size="small"
+          size="s"
          appearance="filled"
          @click=${this._addItem}
          .disabled=${this.disabled ||
@@ -38,7 +38,7 @@ class MediaManageButton extends LitElement {
      return nothing;
    }
    return html`
-      <ha-button appearance="filled" size="small" @click=${this._manage}>
+      <ha-button appearance="filled" size="s" @click=${this._manage}>
        <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
        ${this.hass.localize(
          "ui.components.media-browser.file_management.manage"
@@ -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>`;
@@ -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(
@@ -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>
    `;
  }

@@ -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"
    );
  }
@@ -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>`;
@@ -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;
      }
    }
  }
@@ -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>
    `;
@@ -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;
@@ -485,6 +485,17 @@ export const migrateAutomationTrigger = (
    }
    delete trigger.platform;
  }
+
+  if ("options" in trigger) {
+    if (trigger.options && "behavior" in trigger.options) {
+      if (trigger.options.behavior === "any") {
+        trigger.options.behavior = "each";
+      } else if (trigger.options.behavior === "last") {
+        trigger.options.behavior = "all";
+      }
+    }
+  }
+
  return trigger;
 };

@@ -256,6 +256,7 @@ export const normalizeSubscriptionEventData = (
    dtstart: eventStart,
    dtend: eventEnd,
    description: eventData.description ?? undefined,
+    location: eventData.location ?? undefined,
    uid: eventData.uid ?? undefined,
    recurrence_id: eventData.recurrence_id ?? undefined,
    rrule: eventData.rrule ?? undefined,
@@ -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
@@ -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);

@@ -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);
@@ -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);
@@ -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,
@@ -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
@@ -1,26 +1,37 @@
+import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import type { LocalizeKeys } from "../../common/translations/localize";
 import { createSearchParam } from "../../common/url/search-params";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+import { SCENE_IGNORED_DOMAINS, type SceneEntities } from "../../data/scene";
 import type { SingleHassServiceTarget } from "../../data/target";
 import {
  ADD_AUTOMATION_ELEMENT_AREA_TARGET_PARAM,
  ADD_AUTOMATION_ELEMENT_DEVICE_TARGET_PARAM,
-  ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
  ADD_AUTOMATION_ELEMENT_ENTITY_TARGET_PARAM,
+  ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
 } from "../../panels/config/automation/show-add-automation-element-dialog";
 import type { HomeAssistant, TranslationDict } from "../../types";

-/** Add to action keys are the keys of the translation dictionary for the add to actions. */
-export type AddToActionKey =
-  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["actions"] extends infer Actions
-    ? keyof Actions
-    : never;
+/** Add to action keys are the keys of the translation dictionary for the add to action options. */
+type AddToActionOptions =
+  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["action_options"];
+
+export type AddToActionKey = Extract<keyof AddToActionOptions, string>;
+
+export type AddToAutomationScriptActionKey = Exclude<AddToActionKey, "scene">;
+
+/** Fully-qualified localize key for an add to action option label. */
+type AddToActionOptionLabelKey = LocalizeKeys &
+  `ui.dialogs.more_info_control.add_to.action_options.${AddToActionKey}`;

 interface BaseEntityAddToAction {
  /** Whether the action is enabled and can be selected. */
  enabled: boolean;
-  /** Translated name of the action */
-  name: string;
+  /** Translated label of the action option */
+  name?: string;
+  /** Fully-qualified localize key for the action option label */
+  nameKey?: AddToActionOptionLabelKey;
  /** Optional translated description of the action */
  description?: string;
  /** MDI icon name (e.g., "mdi:car") */
@@ -31,7 +42,7 @@ export interface DefaultEntityAddToAction extends BaseEntityAddToAction {
  /** Type of action handled in the frontend */
  type: "default";
  /** Stable key used to resolve the action handler */
-  key: AddToActionKey;
+  key: AddToAutomationScriptActionKey;
 }

 export interface ExternalEntityAddToAction extends BaseEntityAddToAction {
@@ -48,11 +59,11 @@ export type EntityAddToAction =
 export type EntityAddToActions = EntityAddToAction[];

 interface ActionDefinition {
-  translation_key: AddToActionKey;
+  translation_key: AddToAutomationScriptActionKey;
  icon: string;
 }

-export const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
+const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
  {
    translation_key: "automation_trigger",
    icon: "mdi:robot-outline",
@@ -71,33 +82,49 @@ export const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
  },
 ];

-export const getDefaultAddToActions = (
-  states: HomeAssistant["states"],
-  localize: LocalizeFunc,
-  formatEntityName: HomeAssistant["formatEntityName"],
-  entityId: string
-): EntityAddToActions =>
+export const getDefaultAddToActions = (): EntityAddToActions =>
  DEFAULT_ACTION_DEFS.map(
    (def: ActionDefinition): EntityAddToAction => ({
      type: "default",
      key: def.translation_key,
      enabled: true,
-      name: localize(
-        `ui.dialogs.more_info_control.add_to.actions.${def.translation_key}`,
-        {
-          target:
-            states[entityId] !== undefined
-              ? formatEntityName(states[entityId], undefined)
-              : entityId,
-        }
-      ),
+      nameKey: `ui.dialogs.more_info_control.add_to.action_options.${def.translation_key}`,
      icon: def.icon,
    })
  );

+export const createAddToSceneEntities = (
+  entityIds: string[]
+): SceneEntities => {
+  const entities: SceneEntities = {};
+  for (const entityId of entityIds) {
+    entities[entityId] = "";
+  }
+  return entities;
+};
+
+export const filterAddToSceneEntityIds = (
+  entityIds: string[],
+  entityRegistry: readonly EntityRegistryEntry[],
+  states: HomeAssistant["states"]
+): string[] => {
+  const entityIdSet = new Set(entityIds);
+
+  return entityRegistry
+    .filter((entry) => entityIdSet.has(entry.entity_id))
+    .filter(
+      (entry) =>
+        !entry.entity_category &&
+        !entry.hidden_by &&
+        !SCENE_IGNORED_DOMAINS.includes(computeDomain(entry.entity_id)) &&
+        states[entry.entity_id]
+    )
+    .map((entry) => entry.entity_id);
+};
+
 /** Handler for adding a target to an automation/script. */
 export function addToActionHandler(
-  key: AddToActionKey,
+  key: AddToAutomationScriptActionKey,
  target: SingleHassServiceTarget
 ): Promise<boolean> {
  const searchParams: Record<string, string> = {};
@@ -0,0 +1,211 @@
+import { mdiPlus } from "@mdi/js";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomEvent,
+} from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
+import type {
+  LocalizeFunc,
+  LocalizeKeys,
+} from "../../common/translations/localize";
+import "../../components/ha-icon";
+import "../../components/ha-svg-icon";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+
+export interface AddToActionListItem {
+  name?: string;
+  nameKey?: LocalizeKeys;
+  description?: string;
+  descriptionKey?: LocalizeKeys;
+  icon?: string;
+  iconPath?: string;
+  enabled?: boolean;
+}
+
+export interface AddToActionListSection<
+  Item extends AddToActionListItem = AddToActionListItem,
+> {
+  title?: string;
+  titleKey?: LocalizeKeys;
+  actions: readonly Item[];
+  empty?: string;
+  emptyKey?: LocalizeKeys;
+}
+
+export interface AddToActionListActionSelectedDetail<
+  Item extends AddToActionListItem = AddToActionListItem,
+> {
+  action: Item;
+}
+
+export type AddToActionListActionSelectedEvent<
+  Item extends AddToActionListItem = AddToActionListItem,
+> = HASSDomEvent<AddToActionListActionSelectedDetail<Item>>;
+
+@customElement("ha-add-to-action-list")
+class HaAddToActionList extends LitElement {
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @property({ attribute: false })
+  public sections: readonly AddToActionListSection[] = [];
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this.sections.length) {
+      return nothing;
+    }
+
+    return html`${this.sections.map((section, sectionIndex) =>
+      this._renderSection(section, sectionIndex)
+    )}`;
+  }
+
+  private _renderSection(
+    section: AddToActionListSection,
+    sectionIndex: number
+  ): TemplateResult | typeof nothing {
+    if (!section.actions.length && !section.empty && !section.emptyKey) {
+      return nothing;
+    }
+
+    return html`
+      <h3 class="section-header">
+        ${this._localizeValue(section.title, section.titleKey)}
+      </h3>
+      ${section.actions.length
+        ? html`<ha-list-base>
+            ${section.actions.map((action, actionIndex) =>
+              this._renderActionItem(action, sectionIndex, actionIndex)
+            )}
+          </ha-list-base>`
+        : html`<h4 class="empty">
+            ${this._localizeValue(section.empty, section.emptyKey)}
+          </h4>`}
+    `;
+  }
+
+  private _renderActionItem(
+    action: AddToActionListItem,
+    sectionIndex: number,
+    actionIndex: number
+  ): TemplateResult {
+    return html`
+      <ha-list-item-button
+        .disabled=${action.enabled === false}
+        data-section-index=${sectionIndex}
+        data-action-index=${actionIndex}
+        .headline=${this._localizeValue(action.name, action.nameKey)}
+        .supportingText=${this._localizeValue(
+          action.description,
+          action.descriptionKey
+        )}
+        @click=${this._actionSelected}
+      >
+        ${action.icon
+          ? html`<ha-icon
+              class="start-icon"
+              slot="start"
+              .icon=${action.icon}
+            ></ha-icon>`
+          : action.iconPath
+            ? html`<ha-svg-icon
+                class="start-icon"
+                slot="start"
+                .path=${action.iconPath}
+              ></ha-svg-icon>`
+            : nothing}
+        <ha-svg-icon class="plus" slot="end" .path=${mdiPlus}></ha-svg-icon>
+      </ha-list-item-button>
+    `;
+  }
+
+  private _localizeValue(
+    value?: string,
+    localizeKey?: LocalizeKeys
+  ): string | undefined {
+    return value || (localizeKey ? this._localize(localizeKey) : undefined);
+  }
+
+  private _actionSelected(
+    ev: HASSDomCurrentTargetEvent<HaListItemButton>
+  ): void {
+    const action =
+      this.sections[Number(ev.currentTarget.dataset.sectionIndex)]?.actions[
+        Number(ev.currentTarget.dataset.actionIndex)
+      ];
+
+    if (!action) {
+      return;
+    }
+
+    if (action.enabled === false) {
+      return;
+    }
+
+    fireEvent(this, "add-to-list-action-selected", {
+      action,
+    });
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+    }
+
+    .section-header {
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
+      margin: 0;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      color: var(--secondary-text-color);
+    }
+
+    .empty {
+      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
+      margin: 0;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-normal);
+      color: var(--secondary-text-color);
+    }
+
+    ha-list-item-button {
+      --ha-row-item-padding-inline: var(--ha-space-5);
+    }
+
+    ha-icon,
+    ha-svg-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    .start-icon {
+      color: var(--ha-color-text-secondary);
+    }
+
+    .plus {
+      color: var(--primary-color);
+    }
+
+    ha-list-item-button[disabled] .start-icon,
+    ha-list-item-button[disabled] .plus {
+      color: var(--disabled-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-add-to-action-list": HaAddToActionList;
+  }
+
+  interface HASSDomEvents {
+    "add-to-list-action-selected": AddToActionListActionSelectedDetail;
+  }
+}
@@ -114,7 +114,7 @@ class EntityPreviewRow extends LitElement {

    if (domain === "button") {
      return html`
-        <ha-button appearance="plain" size="small" .disabled=${disabled}>
+        <ha-button appearance="plain" size="s" .disabled=${disabled}>
          ${this.hass.localize("ui.card.button.press")}
        </ha-button>
      `;
@@ -237,7 +237,7 @@ class EntityPreviewRow extends LitElement {
          .disabled=${disabled}
          class="text-content"
          appearance="plain"
-          size="small"
+          size="s"
        >
          ${stateObj.state === "locked"
            ? this.hass!.localize("ui.card.lock.unlock")
@@ -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
@@ -214,7 +214,7 @@ export class HaMoreInfoViewVacuumCleanAreas extends LitElement {
              ? html`
                  <ha-button
                    appearance="plain"
-                    size="small"
+                    size="s"
                    @click=${this._openSegmentMapping}
                  >
                    <ha-svg-icon
@@ -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>
@@ -32,7 +31,7 @@ class MoreInfoAutomation extends LitElement {
      <div class="actions">
        <ha-button
          appearance="plain"
-          size="small"
+          size="s"
          @click=${this._runActions}
          .disabled=${this.stateObj!.state === UNAVAILABLE}
        >
@@ -22,7 +22,7 @@ class MoreInfoCounter extends LitElement {
      <div class="actions">
        <ha-button
          appearance="plain"
-          size="small"
+          size="s"
          .action=${"increment"}
          @click=${this._handleActionClick}
          .disabled=${disabled ||
@@ -32,7 +32,7 @@ class MoreInfoCounter extends LitElement {
        </ha-button>
        <ha-button
          appearance="plain"
-          size="small"
+          size="s"
          .action=${"decrement"}
          @click=${this._handleActionClick}
          .disabled=${disabled ||
@@ -42,7 +42,7 @@ class MoreInfoCounter extends LitElement {
        </ha-button>
        <ha-button
          appearance="plain"
-          size="small"
+          size="s"
          .action=${"reset"}
          @click=${this._handleActionClick}
          .disabled=${disabled}
@@ -431,7 +431,7 @@ class MoreInfoMediaPlayer extends LitElement {
                  ? html`<ha-button
                      variant="brand"
                      appearance="filled"
-                      size="medium"
+                      size="m"
                      action=${action}
                      @click=${this._handleClick}
                      class="center-control"
@@ -39,7 +39,7 @@ class MoreInfoPerson extends LitElement {
            <div class="actions">
              <ha-button
                appearance="plain"
-                size="small"
+                size="s"
                @click=${this._handleAction}
              >
                ${this.hass.localize(
--- a/Show More
+++ b/Show More