Merge branch 'rc' into dev

* Allow opening Lovelace views in new tabs

* Allow opening Lovelace back targets in new tabs

* Review

.github/workflows/e2e.yaml

@@ -0,0 +1,244 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+  workflow_dispatch:
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build e2e test app
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    # Fail fast if anything hangs. The whole suite should take < 15 minutes on
+    # Chromium; anything longer is almost certainly an install or webServer
+    # hang.
+    timeout-minutes: 30
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      # Cache the downloaded browser build keyed on the pinned Playwright
+      # version (yarn.lock), so re-runs skip the ~170 MB download.
+      - name: Cache Playwright browsers
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+        timeout-minutes: 10
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+        timeout-minutes: 15
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  report:
+    name: Report
+    needs: [e2e-local]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() }}
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download blob report (local)
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          path: test/e2e/reports/combined/
+          retention-days: 14
+
+      - name: Post report link to PR
+        if: github.event_name == 'pull_request' && needs.e2e-local.result == 'failure'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
+            const body = `## Playwright E2E tests failed\n\nThe combined HTML report is available as a workflow artifact.\n\n[View workflow run](${runUrl})`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body,
+            });

.gitignore

@@ -54,8 +54,16 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/
 
+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+
 # AI tooling
 .claude
 .cursor
 .opencode
+.serena
+
 test/benchmarks/results/

.nvmrc

@@ -1 +1 @@
-24.17.0
+24.18.0

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -84,12 +83,7 @@ module.exports.swcOptions = () => ({
   },
 });
 
-module.exports.babelOptions = ({
-  latestBuild,
-  isProdBuild,
-  isTestBuild,
-  sw,
-}) => ({
+module.exports.babelOptions = ({ latestBuild, isTestBuild, sw }) => ({
   babelrc: false,
   compact: false,
   assumptions: {
@@ -102,14 +96,22 @@ module.exports.babelOptions = ({
     [
       "@babel/preset-env",
       {
-        useBuiltIns: "usage",
-        corejs: dependencies["core-js"],
-        bugfixes: true,
         shippedProposals: true,
       },
     ],
   ],
   plugins: [
+    // Inject Core-JS polyfills on demand. Babel 8 removed preset-env's
+    // `useBuiltIns`/`corejs` options, so the equivalent polyfill provider is
+    // configured directly here (`usage-global` matches the old `useBuiltIns: "usage"`).
+    [
+      "babel-plugin-polyfill-corejs3",
+      {
+        method: "usage-global",
+        version: dependencies["core-js"],
+        shippedProposals: true,
+      },
+    ],
     [
       path.join(BABEL_PLUGINS, "inline-constants-plugin.cjs"),
       {
@@ -117,32 +119,14 @@ module.exports.babelOptions = ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Minify template literals for production
-    isProdBuild && [
-      "template-html-minifier",
-      {
-        modules: {
-          ...Object.fromEntries(
-            ["lit", "lit-element", "lit-html"].map((m) => [
-              m,
-              [
-                "html",
-                { name: "svg", encapsulation: "svg" },
-                { name: "css", encapsulation: "style" },
-              ],
-            ])
-          ),
-          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
-        },
-        strictCSS: true,
-        htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: false, // we can turn this off in case of false positives
-      },
-    ],
-    // Import helpers and regenerator from runtime package
+    // Import helpers and regenerator from runtime package.
+    // `moduleName` is pinned so helpers resolve from `@babel/runtime`: the
+    // corejs3 polyfill provider above otherwise redirects them to the
+    // (uninstalled) `@babel/runtime-corejs3`, which preset-env used to suppress
+    // internally when it owned the polyfill injection via `useBuiltIns`.
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"] },
+      { version: dependencies["@babel/runtime"], moduleName: "@babel/runtime" },
     ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",
@@ -321,4 +305,22 @@ module.exports.config = {
       isLandingPageBuild: true,
     };
   },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };

build-scripts/eslint.config.mjs

@@ -1,9 +1,13 @@
 // @ts-check
 
+import globals from "globals";
 import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
 export default tseslint.config(...rootConfig, {
+  languageOptions: {
+    globals: globals.node,
+  },
   rules: {
     "no-console": "off",
     "import-x/no-extraneous-dependencies": "off",

build-scripts/get-built-in-node-module-shim.cjs

@@ -1,4 +1,3 @@
-/* global module */
 // Browser-only replacement for core-js/internals/get-built-in-node-module.
 // The original helper evaluates `Function('return require("...")')()`
 // when it detects a Node environment, which causes a runtime

build-scripts/gulp/clean.js

@@ -45,3 +45,10 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-e2e-test-app",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
+  )
+);

build-scripts/gulp/e2e-test-app.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-e2e-test-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-e2e-test-app",
+    "rspack-dev-server-e2e-test-app"
+  )
+);
+
+gulp.task(
+  "build-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML
 
 import {
@@ -268,3 +267,24 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
+
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+
+gulp.task(
+  "gen-pages-e2e-test-app-dev",
+  genPagesDevTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-e2e-test-app-prod",
+  genPagesProdTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root,
+    paths.e2eTestApp_output_latest
+  )
+);

build-scripts/gulp/gather-static.js

@@ -201,3 +201,23 @@ gulp.task("copy-static-landing-page", async () => {
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
 });
+
+gulp.task("copy-static-e2e-test-app", async () => {
+  // Copy app static files (icons, polyfills, etc.)
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.e2eTestApp_output_root, "static")
+  );
+  // Copy e2e test app public files (manifest, sw stubs)
+  const e2ePublic = path.resolve(paths.e2eTestApp_dir, "public");
+  if (fs.existsSync(e2ePublic)) {
+    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
+  }
+
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
+  copyFonts(paths.e2eTestApp_output_static);
+  copyTranslations(paths.e2eTestApp_output_static);
+  copyLocaleData(paths.e2eTestApp_output_static);
+  copyMdiIcons(paths.e2eTestApp_output_static);
+});

build-scripts/gulp/index.mjs

@@ -4,6 +4,7 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";

build-scripts/gulp/licenses.js

@@ -1,6 +1,6 @@
 // Gulp task to generate third-party license notices.
 
-import { readFile, access } from "fs/promises";
+import { readFile, access, readdir } from "fs/promises";
 import { generateLicenseFile } from "generate-license-file";
 import gulp from "gulp";
 import path from "path";
@@ -11,58 +11,98 @@ const OUTPUT_FILE = path.join(
   "third-party-licenses.txt"
 );
 
+const NODE_MODULES = path.resolve(paths.root_dir, "node_modules");
+
 // The echarts package ships an Apache-2.0 NOTICE file that must be
 // redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
+const NOTICE_FILES = [path.join(NODE_MODULES, "echarts/NOTICE")];
 
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
+// Some packages need a manual license override (e.g. they ship multiple
+// license files and we must pick the right one for the bundled code).
 //
 // Each entry is pinned to a specific version. If a package is updated,
 // this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
+// that the new version's license still matches. The build will fail if
+// the pinned version is no longer installed.
 const LICENSE_OVERRIDES = [
   {
     // type-fest ships two license files (MIT for code, CC0 for types).
     // We use the MIT license since that covers the bundled code.
     packageName: "type-fest",
     version: "5.7.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
+    licenseFile: "license-mit",
   },
 ];
 
+// Locate the directory of an installed package matching an exact version.
+//
+// The copy we care about may be hoisted to the top-level node_modules or
+// nested under a dependency when a different version occupies the hoisted
+// slot (e.g. a build-only dependency pulling in an older release). Searching
+// both keeps this check independent of yarn's hoisting decisions, which can
+// shift when unrelated dependencies are added.
+async function findPackageDir(packageName, version) {
+  const candidateDirs = [path.join(NODE_MODULES, packageName)];
+
+  // Collect one level of nesting: node_modules/<dep>/node_modules/<pkg> and
+  // node_modules/@scope/<dep>/node_modules/<pkg>.
+  let topLevel = [];
+  try {
+    topLevel = await readdir(NODE_MODULES, { withFileTypes: true });
+  } catch {
+    // node_modules unreadable — fall back to the hoisted candidate only.
+  }
+  for (const entry of topLevel) {
+    if (!entry.isDirectory() || entry.name === packageName) {
+      continue;
+    }
+    if (entry.name.startsWith("@")) {
+      const scopeDir = path.join(NODE_MODULES, entry.name);
+      // eslint-disable-next-line no-await-in-loop
+      const scoped = await readdir(scopeDir, { withFileTypes: true }).catch(
+        () => []
+      );
+      for (const dep of scoped) {
+        if (dep.isDirectory()) {
+          candidateDirs.push(
+            path.join(scopeDir, dep.name, "node_modules", packageName)
+          );
+        }
+      }
+    } else {
+      candidateDirs.push(
+        path.join(NODE_MODULES, entry.name, "node_modules", packageName)
+      );
+    }
+  }
+
+  for (const dir of candidateDirs) {
+    // eslint-disable-next-line no-await-in-loop
+    const pkg = await readFile(path.join(dir, "package.json"), "utf-8")
+      .then(JSON.parse)
+      .catch(() => null);
+    if (pkg?.version === version) {
+      return dir;
+    }
+  }
+  return null;
+}
+
 gulp.task("gen-licenses", async () => {
   const licenseOverrides = {};
 
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
+  for (const { packageName, version, licenseFile } of LICENSE_OVERRIDES) {
+    // eslint-disable-next-line no-await-in-loop
+    const packageDir = await findPackageDir(packageName, version);
 
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
+    if (!packageDir) {
       throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
+        `License override for "${packageName}" is pinned to version ${version}, but that version is not installed. ` +
           `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
       );
     }
 
+    const licensePath = path.join(packageDir, licenseFile);
     try {
       // eslint-disable-next-line no-await-in-loop
       await access(licensePath);

build-scripts/gulp/rspack.js

@@ -14,6 +14,7 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -231,3 +232,22 @@ gulp.task("rspack-prod-landing-page", () =>
     })
   )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);

build-scripts/list-plugins-and-polyfills.js

@@ -48,6 +48,12 @@ for (const buildType of ["Modern", "Legacy"]) {
   const browserslistEnv = buildType.toLowerCase();
   const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
   const presetEnvOpts = babelOpts.presets[0][1];
+  // Core-JS polyfills are injected by babel-plugin-polyfill-corejs3 (Babel 8
+  // removed preset-env's `useBuiltIns`), so read its options here.
+  const corejsOpts = babelOpts.plugins.find(
+    (plugin) =>
+      Array.isArray(plugin) && plugin[0] === "babel-plugin-polyfill-corejs3"
+  )?.[1];
 
   // Invoking preset-env in debug mode will log the included plugins
   console.log(detailsOpen(`${buildType} Build Babel Plugins`));
@@ -59,16 +65,16 @@ for (const buildType of ["Modern", "Legacy"]) {
   console.log(detailsClose);
 
   // Manually log the Core-JS polyfills using the same technique
-  if (presetEnvOpts.useBuiltIns) {
+  if (corejsOpts) {
     console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
     const targets = compilationTargets.default(babelOpts?.targets, {
       browserslistEnv,
     });
     const polyfillList = coreJSCompat({ targets }).list.filter(
       polyfillFilter(
-        `${presetEnvOpts.useBuiltIns}-global`,
-        presetEnvOpts?.corejs?.proposals,
-        presetEnvOpts?.shippedProposals
+        corejsOpts.method,
+        corejsOpts.proposals,
+        corejsOpts.shippedProposals
       )
     );
     console.log(

build-scripts/lit-disable-dev-mode-loader.cjs

@@ -0,0 +1,8 @@
+/* global module */
+
+module.exports = function litDisableDevModeLoader(source) {
+  return source.replace(
+    /\b(const|let|var) DEV_MODE = true;/g,
+    "$1 DEV_MODE = false;"
+  );
+};

build-scripts/minify-template-literals-loader.cjs

@@ -0,0 +1,63 @@
+/* global module, require */
+// rspack/webpack loader that minifies the HTML, SVG, and CSS inside lit
+// tagged template literals using `minify-literals` (html-minifier-next +
+// lightningcss). Replaces the unmaintained babel-plugin-template-html-minifier.
+//
+// It runs between swc and babel: swc has already stripped TS types and
+// decorators (so minify-literals' acorn parser only sees plain ESM), but the
+// `html`/`css`/`svg` tagged templates are still intact at ES2021. Running after
+// babel instead would miss the legacy build, where babel lowers the templates
+// to `_taggedTemplateLiteral()` calls that no longer look like tagged templates.
+
+const remapping = require("@ampproject/remapping");
+
+// minify-literals is ESM-only, so load it via dynamic import from this CJS loader.
+let minifyPromise;
+const getMinifier = () => {
+  if (!minifyPromise) {
+    minifyPromise = import("minify-literals").then((m) => m.minifyHTMLLiterals);
+  }
+  return minifyPromise;
+};
+
+// HTML options mirror the previous babel-plugin-template-html-minifier config
+// (html-minifier-next is option-compatible with html-minifier-terser). CSS in
+// css`` templates and inline <style> is handled by minify-literals' lightningcss
+// default.
+const htmlOptions = {
+  caseSensitive: true,
+  collapseWhitespace: true,
+  conservativeCollapse: true,
+  decodeEntities: true,
+  removeComments: true,
+  removeRedundantAttributes: true,
+};
+
+module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
+  const callback = this.async();
+  getMinifier()
+    .then((minifyHTMLLiterals) =>
+      minifyHTMLLiterals(source, {
+        fileName: this.resourcePath,
+        html: htmlOptions,
+      })
+    )
+    .then((result) => {
+      if (!result) {
+        // No tagged templates changed; pass through untouched (incl. incoming map).
+        callback(null, source, map, meta);
+        return;
+      }
+      // minify-literals builds its map from `source` alone, so `result.map`
+      // describes minified output -> this loader's input (the swc output), not
+      // the original file. Compose it over the incoming map (swc output ->
+      // original source) so the map handed downstream still points at the
+      // original source; otherwise every minified file's source map is wrong.
+      const outMap =
+        map && result.map
+          ? remapping([result.map, map], () => null)
+          : (result.map ?? map);
+      callback(null, result.code, outMap, meta);
+    })
+    .catch(callback);
+};

build-scripts/paths.cjs

@@ -50,4 +50,15 @@ module.exports = {
   ),
 
   translations_src: path.resolve(__dirname, "../src/translations"),
+
+  e2eTestApp_dir: path.resolve(__dirname, "../test/e2e/app"),
+  e2eTestApp_output_root: path.resolve(__dirname, "../test/e2e/app/dist"),
+  e2eTestApp_output_static: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/static"
+  ),
+  e2eTestApp_output_latest: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/frontend_latest"
+  ),
 };

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -48,6 +47,12 @@ const createRspackConfig = ({
     dontHash = new Set();
   }
   const ignorePackages = bundle.ignorePackages({ latestBuild });
+  const litHtmlRoot = path.resolve(__dirname, "../node_modules/lit-html");
+  const litHtmlDevelopmentRoot = path.join(litHtmlRoot, "development");
+  const litDisableDevModeLoader = path.join(
+    __dirname,
+    "lit-disable-dev-mode-loader.cjs"
+  );
   return {
     name,
     mode: isProdBuild ? "production" : "development",
@@ -67,25 +72,42 @@ const createRspackConfig = ({
         {
           test: /\.m?js$|\.ts$/,
           exclude: /node_modules[\\/]core-js/,
-          use: (info) => [
-            {
-              loader: "babel-loader",
-              options: {
-                ...bundle.babelOptions({
-                  latestBuild,
-                  isProdBuild,
-                  isTestBuild,
-                  sw: info.issuerLayer === "sw",
-                }),
-                cacheDirectory: !isProdBuild,
-                cacheCompression: false,
+          use: (info) =>
+            [
+              {
+                loader: "babel-loader",
+                options: {
+                  ...bundle.babelOptions({
+                    latestBuild,
+                    isTestBuild,
+                    sw: info.issuerLayer === "sw",
+                  }),
+                  cacheDirectory: !isProdBuild,
+                  cacheCompression: false,
+                },
               },
-            },
-            {
-              loader: "builtin:swc-loader",
-              options: bundle.swcOptions(),
-            },
-          ],
+              // Minify lit html/svg/css tagged template literals for production.
+              // Must run after swc (TS/decorators stripped, but templates kept at
+              // ES2021) and before babel — otherwise the legacy build lowers
+              // html`` to _taggedTemplateLiteral() calls that can no longer be
+              // matched, leaving legacy templates unminified.
+              isProdBuild && {
+                loader: path.join(
+                  __dirname,
+                  "minify-template-literals-loader.cjs"
+                ),
+              },
+              !latestBuild &&
+                info.resource.startsWith(
+                  `${litHtmlDevelopmentRoot}${path.sep}`
+                ) && {
+                  loader: litDisableDevModeLoader,
+                },
+              {
+                loader: "builtin:swc-loader",
+                options: bundle.swcOptions(),
+              },
+            ].filter(Boolean),
           resolve: {
             fullySpecified: false,
           },
@@ -132,6 +154,47 @@ const createRspackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
+      // Babel can miscompile Lit's pre-minified runtime when downleveling to
+      // ES5. Compile lit-html from its development sources for legacy builds,
+      // then let the normal production minifier handle the final bundle.
+      !latestBuild &&
+        new rspack.NormalModuleReplacementPlugin(
+          /^(?:lit-html(?:\/.*)?|\.{1,2}\/.*\.js)$/,
+          (resource) => {
+            if (resource.request === "lit-html") {
+              resource.request = path.join(
+                litHtmlDevelopmentRoot,
+                "lit-html.js"
+              );
+              return;
+            }
+            if (resource.request.startsWith("lit-html/")) {
+              if (resource.request.startsWith("lit-html/development/")) {
+                return;
+              }
+              resource.request = path.join(
+                litHtmlDevelopmentRoot,
+                resource.request.slice("lit-html/".length)
+              );
+              return;
+            }
+            if (
+              resource.context.startsWith(`${litHtmlRoot}${path.sep}`) &&
+              resource.context !== litHtmlDevelopmentRoot &&
+              !resource.context.startsWith(
+                `${litHtmlDevelopmentRoot}${path.sep}`
+              )
+            ) {
+              resource.request = path.join(
+                litHtmlDevelopmentRoot,
+                path.relative(
+                  litHtmlRoot,
+                  path.resolve(resource.context, resource.request)
+                )
+              );
+            }
+          }
+        ),
       new rspack.DefinePlugin(
         bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
@@ -338,6 +401,11 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
+const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 module.exports = {
   createAppConfig,
   createDemoConfig,
@@ -345,4 +413,5 @@ module.exports = {
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 };

demo/src/stubs/assist.ts

@@ -0,0 +1,21 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockAssist = (hass: MockHomeAssistant) => {
+  // Stub for assist pipeline list — returns empty so developer tools assist
+  // tab loads without errors.
+  hass.mockWS("assist_pipeline/pipeline/list", () => ({
+    pipelines: [],
+    preferred_pipeline: null,
+  }));
+
+  // Stub for assist pipeline run — immediately sends run-end event so
+  // the UI does not hang waiting for a response.
+  hass.mockWS("assist_pipeline/run", (_msg, _hass, onChange) => {
+    if (onChange) {
+      onChange({
+        type: "run-end",
+      });
+    }
+    return null;
+  });
+};

demo/src/stubs/update.ts

@@ -0,0 +1,5 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockUpdate = (hass: MockHomeAssistant) => {
+  hass.mockWS("update/list", () => []);
+};

eslint.config.mjs

@@ -234,6 +234,12 @@ export default tseslint.config(
       globals: globals.serviceworker,
     },
   },
+  {
+    files: ["test/e2e/*.mjs"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
   {
     plugins: {
       html,

gallery/src/data/traces/not-triggered-trace.ts

@@ -0,0 +1,75 @@
+import type { DemoTrace } from "./types";
+
+export const notTriggeredTrace: DemoTrace = {
+  trace: {
+    last_step: "trigger/0",
+    run_id: "788767ce152d3d4475134bf1107986d4",
+    state: "stopped",
+    script_execution: "not_triggered",
+    not_triggered: true,
+    timestamp: {
+      start: "2021-03-25T04:36:51.223337+00:00",
+      finish: "2021-03-25T04:36:51.223341+00:00",
+    },
+    // Not-triggered traces have no trigger description.
+    trigger: null,
+    domain: "automation",
+    item_id: "1781703842452",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223340+00:00",
+          changed_variables: {
+            trigger: {
+              id: "0",
+              idx: "0",
+              alias: null,
+              platform: "light.turned_on",
+            },
+          },
+          result: {
+            reason: "new_state_not_a_match",
+            data: {
+              entity_id: "light.bed_light",
+              to_state: "off",
+            },
+          },
+        },
+      ],
+    },
+    config: {
+      id: "1781703842452",
+      alias: "Light Turned On Notification",
+      description: "Send a notification when a specific light is turned on.",
+      triggers: [
+        {
+          trigger: "light.turned_on",
+          target: {
+            floor_id: "test",
+          },
+          options: {
+            for: "00:00:00",
+            behavior: "each",
+          },
+        },
+      ],
+      conditions: [],
+      actions: [
+        {
+          action: "notify.notify",
+          data: {
+            message: "A light was turned on.",
+          },
+        },
+      ],
+      mode: "single",
+    },
+    context: {
+      id: "01KVAX7CG7XBDYGJYAGA4XJHGX",
+      parent_id: "01KVAX7CG631JRX4H3JS5JJ11Q",
+      user_id: null,
+    },
+  },
+  logbookEntries: [],
+};

gallery/src/pages/automation/trace-timeline.ts

@@ -24,6 +24,33 @@ const traces: DemoTrace[] = [
     error: 'Variable "beer" cannot be None',
   }),
   mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
+  mockDemoTrace({
+    state: "stopped",
+    script_execution: "not_triggered",
+    not_triggered: true,
+    // Not-triggered traces have no trigger description.
+    trigger: null,
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          changed_variables: {
+            trigger: {
+              id: "0",
+              idx: "0",
+              alias: null,
+              platform: "light.turned_on",
+            },
+          },
+          result: {
+            reason: "new_state_not_a_match",
+            data: { entity_id: "light.bed_light", to_state: "off" },
+          },
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+    },
+  }),
 ];
 
 @customElement("demo-automation-trace-timeline")

gallery/src/pages/automation/trace.ts

@@ -2,17 +2,20 @@
 
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/trace/ha-trace-path-details";
+import type { HatScriptGraph } from "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-script-graph";
 import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import { basicTrace } from "../../data/traces/basic_trace";
 import { motionLightTrace } from "../../data/traces/motion-light-trace";
+import { notTriggeredTrace } from "../../data/traces/not-triggered-trace";
 import type { DemoTrace } from "../../data/traces/types";
 
-const traces: DemoTrace[] = [basicTrace, motionLightTrace];
+const traces: DemoTrace[] = [basicTrace, motionLightTrace, notTriggeredTrace];
 
 @customElement("demo-automation-trace")
 export class DemoAutomationTrace extends LitElement {
@@ -20,18 +23,25 @@ export class DemoAutomationTrace extends LitElement {
 
   @state() private _selected = {};
 
+  @queryAll("hat-script-graph") private _graphs!: NodeListOf<HatScriptGraph>;
+
   protected render() {
     if (!this.hass) {
       return nothing;
     }
     return html`
-      ${traces.map(
-        (trace, idx) => html`
+      ${traces.map((trace, idx) => {
+        const graph = this._graphs?.[idx];
+        const selectedPath = this._selected[idx];
+        const selectedNode = selectedPath
+          ? graph?.renderedNodes[selectedPath]
+          : undefined;
+        return html`
           <ha-card .header=${trace.trace.config.alias}>
             <div class="card-content">
               <hat-script-graph
                 .trace=${trace.trace}
-                .selected=${this._selected[idx]}
+                .selected=${selectedPath}
                 @graph-node-selected=${this._handleGraphNodeSelected}
                 .sampleIdx=${idx}
               ></hat-script-graph>
@@ -40,15 +50,25 @@ export class DemoAutomationTrace extends LitElement {
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}
-                .selectedPath=${this._selected[idx]}
+                .selectedPath=${selectedPath}
                 @value-changed=${this._handleTimelineValueChanged}
                 .sampleIdx=${idx}
               ></hat-trace-timeline>
+              ${selectedNode && graph
+                ? html`<ha-trace-path-details
+                    .hass=${this.hass}
+                    .trace=${trace.trace}
+                    .selected=${selectedNode}
+                    .logbookEntries=${trace.logbookEntries}
+                    .trackedNodes=${graph.trackedNodes}
+                    .renderedNodes=${graph.renderedNodes}
+                  ></ha-trace-path-details>`
+                : nothing}
               <button @click=${() => console.log(trace)}>Log trace</button>
             </div>
           </ha-card>
-        `
-      )}
+        `;
+      })}
     `;
   }
 

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

@@ -502,6 +502,10 @@ const SCHEMAS: {
                   },
                 },
               },
+              password: {
+                label: "Password",
+                selector: { text: { type: "password" } },
+              },
             },
           },
         },

gallery/src/pages/lovelace/thermostat-card.ts

@@ -248,7 +248,7 @@ class DemoThermostatEntity extends LitElement {
 
   protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
+    const hass = provideHass(this._demoRoot, {}, false, true);
     hass.updateTranslations(null, "en");
     hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);

gallery/src/pages/misc/box-shadow.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { THEME_COMPARISON_PANELS } from "../../components/demo-theme-comparison";
 
 const SHADOWS = ["s", "m", "l"] as const;
@@ -17,7 +18,9 @@ export class DemoMiscBoxShadow extends LitElement {
                   (size) => html`
                     <div
                       class="box"
-                      style="box-shadow: var(--ha-box-shadow-${size})"
+                      style=${styleMap({
+                        boxShadow: `var(--ha-box-shadow-${size})`,
+                      })}
                     >
                       ${size}
                     </div>

gallery/src/pages/misc/entity-state.ts

@@ -353,7 +353,6 @@ export class DemoEntityState extends LitElement {
           title: "Icon",
           template: (entry) => html`
             <state-badge
-              .hass=${hass}
               .stateObj=${entry.stateObj}
               .stateColor=${true}
             ></state-badge>

gallery/src/pages/more-info/climate.ts

@@ -151,7 +151,7 @@ class DemoMoreInfoClimate extends LitElement {
 
   protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
+    const hass = provideHass(this._demoRoot, {}, false, true);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }

gallery/src/pages/more-info/humidifier.ts

@@ -54,7 +54,7 @@ class DemoMoreInfoHumidifier extends LitElement {
 
   protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
+    const hass = provideHass(this._demoRoot, {}, false, true);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }

package.json

@@ -22,13 +22,18 @@
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
     "test:bench": "vitest bench --run --config test/vitest.bench.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "test:e2e": "node test/e2e/run-suites.mjs demo app gallery",
+    "test:e2e:show-report": "yarn playwright show-report test/e2e/reports/combined",
+    "test:e2e:demo": "playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:app": "playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:gallery": "playwright test --config test/e2e/playwright.gallery.config.ts"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.7",
+    "@babel/runtime": "8.0.0",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.3",
     "@codemirror/commands": "6.10.3",
@@ -36,26 +41,26 @@
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
     "@codemirror/lint": "6.9.7",
-    "@codemirror/search": "6.7.0",
+    "@codemirror/search": "6.7.1",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.43.1",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.4.9",
     "@formatjs/intl-displaynames": "7.3.10",
-    "@formatjs/intl-durationformat": "0.10.14",
+    "@formatjs/intl-durationformat": "0.10.15",
     "@formatjs/intl-getcanonicallocales": "3.2.10",
     "@formatjs/intl-listformat": "8.3.10",
     "@formatjs/intl-locale": "5.3.9",
     "@formatjs/intl-numberformat": "9.3.11",
     "@formatjs/intl-pluralrules": "6.3.10",
     "@formatjs/intl-relativetimeformat": "12.3.10",
-    "@fullcalendar/core": "6.1.20",
-    "@fullcalendar/daygrid": "6.1.20",
-    "@fullcalendar/interaction": "6.1.20",
-    "@fullcalendar/list": "6.1.20",
-    "@fullcalendar/luxon3": "6.1.20",
-    "@fullcalendar/timegrid": "6.1.20",
+    "@fullcalendar/core": "6.1.21",
+    "@fullcalendar/daygrid": "6.1.21",
+    "@fullcalendar/interaction": "6.1.21",
+    "@fullcalendar/list": "6.1.21",
+    "@fullcalendar/luxon3": "6.1.21",
+    "@fullcalendar/timegrid": "6.1.21",
     "@home-assistant/webawesome": "3.7.0-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
@@ -63,6 +68,7 @@
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
+    "@lit/task": "1.0.3",
     "@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",
@@ -71,8 +77,8 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.1.3",
-    "@tsparticles/preset-links": "4.1.3",
+    "@tsparticles/engine": "4.2.1",
+    "@tsparticles/preset-links": "4.2.1",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -126,10 +132,11 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
-    "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.7",
-    "@babel/preset-env": "7.29.7",
+    "@ampproject/remapping": "2.3.0",
+    "@babel/core": "8.0.1",
+    "@babel/helper-define-polyfill-provider": "1.0.0",
+    "@babel/plugin-transform-runtime": "8.0.1",
+    "@babel/preset-env": "8.0.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
     "@html-eslint/eslint-plugin": "0.62.0",
@@ -137,9 +144,11 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.13",
+    "@playwright/test": "1.60.0",
+    "@rsdoctor/rspack-plugin": "1.5.15",
     "@rspack/core": "2.0.8",
     "@rspack/dev-server": "2.0.3",
+    "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
@@ -150,13 +159,13 @@
     "@types/leaflet-draw": "1.0.13",
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.7.1",
+    "@types/luxon": "3.7.2",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@vitest/coverage-v8": "4.1.9",
     "babel-loader": "10.1.1",
-    "babel-plugin-template-html-minifier": "4.1.0",
+    "babel-plugin-polyfill-corejs3": "1.0.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
     "eslint": "10.5.0",
@@ -181,11 +190,12 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.7",
+    "lint-staged": "17.0.8",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
     "map-stream": "0.0.7",
+    "minify-literals": "2.0.2",
     "pinst": "3.0.0",
     "prettier": "3.8.4",
     "rspack-manifest-plugin": "5.2.2",
@@ -195,7 +205,7 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.61.0",
+    "typescript-eslint": "8.61.1",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.9",
     "webpack-stats-plugin": "1.1.3",
@@ -207,7 +217,7 @@
     "lit-html": "3.3.3",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
-    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.21",
     "globals": "17.6.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
@@ -215,6 +225,6 @@
   },
   "packageManager": "yarn@4.17.0",
   "volta": {
-    "node": "24.17.0"
+    "node": "24.18.0"
   }
 }

pyproject.toml

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

src/common/controllers/async-value-task.ts

@@ -0,0 +1,29 @@
+import { Task, type TaskConfig } from "@lit/task";
+import type { ReactiveControllerHost } from "lit";
+
+/**
+ * A `@lit/task` Task with a sticky `resolved` flag: false until the task has
+ * completed once, then true. Lets callers tell "still loading" apart from
+ * "resolved with an empty value" without a null sentinel, while keeping the
+ * previous value during a re-run.
+ */
+export class AsyncValueTask<T extends readonly unknown[], R> extends Task<
+  T,
+  R
+> {
+  private _resolved = false;
+
+  constructor(host: ReactiveControllerHost, config: TaskConfig<T, R>) {
+    super(host, {
+      ...config,
+      onComplete: (value) => {
+        this._resolved = true;
+        config.onComplete?.(value);
+      },
+    });
+  }
+
+  public get resolved(): boolean {
+    return this._resolved;
+  }
+}

src/common/entity/compute_entity_name.ts

@@ -30,7 +30,7 @@ export const computeEntityEntryName = (
   fallbackStateObj?: HassEntity
 ): string | undefined => {
   const name =
-    entry.name ??
+    entry.name ||
     ("original_name" in entry && entry.original_name != null
       ? String(entry.original_name)
       : undefined);
@@ -59,8 +59,7 @@ export const computeEntityEntryName = (
     return stripPrefixFromEntityName(name, deviceName) || name;
   }
 
-  // Empty name = main entity → undefined, so callers fall back to the device name.
-  return name || undefined;
+  return name;
 };
 
 export const entityUseDeviceName = (

src/common/entity/compute_entity_name_display.ts

@@ -125,7 +125,15 @@ export interface EntityPickerDisplay {
 }
 
 export const computeEntityPickerDisplay = (
-  hass: HomeAssistant,
+  hass: Pick<
+    HomeAssistant,
+    | "entities"
+    | "devices"
+    | "areas"
+    | "floors"
+    | "language"
+    | "translationMetadata"
+  >,
   stateObj: HassEntity
 ): EntityPickerDisplay => {
   const [entityName, deviceName, areaName] = computeEntityNameList(

src/common/entity/compute_entity_unit_display.ts

@@ -1,6 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
+import { unitFromParts } from "./value_parts";
 
 interface EntityUnitStubConfig {
   entity: string;
@@ -40,5 +41,5 @@ export const computeEntityUnitDisplay = (
     ? hass.formatEntityAttributeValueToParts(stateObj, config.attribute)
     : hass.formatEntityStateToParts(stateObj);
 
-  return parts.find((part) => part.type === "unit")?.value ?? "";
+  return unitFromParts(parts);
 };

src/common/entity/compute_state_display.ts

@@ -160,7 +160,8 @@ const computeStateToPartsFromEntityAttributes = (
           const type = MONETARY_TYPE_MAP[part.type];
           if (!type) continue;
           const last = valueParts[valueParts.length - 1];
-          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
+          // Merge consecutive value parts so the number stays a single part
+          // (e.g. "-" + "12" + "." + "00" → "-12.00")
           if (type === "value" && last?.type === "value") {
             last.value += part.value;
           } else {

src/common/entity/value_parts.ts

@@ -0,0 +1,29 @@
+import type { ValuePart } from "../../types";
+
+// Joins every part except the unit, keeping native order so the sign and
+// grouping stay with the value (e.g. "-2,548.14").
+export const valueFromParts = (parts: ValuePart[]): string =>
+  parts
+    .filter((part) => part.type !== "unit")
+    .map((part) => part.value)
+    .join("")
+    .trim();
+
+export const unitFromParts = (parts: ValuePart[]): string =>
+  parts.find((part) => part.type === "unit")?.value ?? "";
+
+export type UnitPosition = "before" | "after";
+
+// Whether the unit sits before or after the value in the locale's native order
+// (e.g. "$5" / "€ 5" → "before", "5 €" / "5 %" → "after").
+export const unitPosition = (parts: ValuePart[]): UnitPosition => {
+  const unitIndex = parts.findIndex((part) => part.type === "unit");
+  if (unitIndex === -1) {
+    return "after";
+  }
+  const lastValueIndex = parts.reduceRight(
+    (acc, part, i) => (acc === -1 && part.type === "value" ? i : acc),
+    -1
+  );
+  return unitIndex < lastValueIndex ? "before" : "after";
+};

src/common/search/related-context.ts

@@ -1,5 +1,5 @@
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
-import type { RelatedResult } from "../../data/search";
+import type { ItemType, RelatedResult } from "../../data/search";
 
 export interface RelatedIdSets {
   areas: Set<string>;
@@ -8,14 +8,30 @@ export interface RelatedIdSets {
 }
 
 /**
- * Build a set of related IDs for a given related result.
+ * Build a set of related IDs, merging in the current (queried) item.
+ * `search/related` does not echo the queried item back, but it is the closest
+ * related item (e.g. a card editor's own entity), so it is merged into the
+ * matching group when it is an area, device, or entity.
  * @param related - The related result to build the sets from.
- * @returns The related ID sets.
+ * @param current - The queried item to merge in.
+ * @returns The related ID sets, including the current item.
  */
-export const buildRelatedIdSets = (related?: RelatedResult): RelatedIdSets => ({
-  areas: new Set(related?.area || []),
-  devices: new Set(related?.device || []),
-  entities: new Set(related?.entity || []),
+export const buildRelatedIdSets = (
+  related?: RelatedResult,
+  current?: { itemType: ItemType; itemId: string }
+): RelatedIdSets => ({
+  areas: new Set([
+    ...(related?.area || []),
+    ...(current?.itemType === "area" ? [current.itemId] : []),
+  ]),
+  devices: new Set([
+    ...(related?.device || []),
+    ...(current?.itemType === "device" ? [current.itemId] : []),
+  ]),
+  entities: new Set([
+    ...(related?.entity || []),
+    ...(current?.itemType === "entity" ? [current.itemId] : []),
+  ]),
 });
 
 /**

src/common/util/strip-defaults.ts

@@ -0,0 +1,26 @@
+/**
+ * Return a shallow copy of an object with every key removed whose value is
+ * `undefined` or equals that key's default, so a key left at its default
+ * (whether absent or explicit) does not count as a difference. A key's default
+ * comes from `defaults` when present, otherwise `false`.
+ *
+ * Non-plain-object values are returned unchanged; only top-level keys are
+ * compared.
+ */
+export const stripDefaults = <T>(
+  value: T,
+  defaults?: Record<string, unknown>
+): T => {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return value;
+  }
+  const result: Record<string, unknown> = {};
+  for (const [key, val] of Object.entries(value)) {
+    const defaultValue = defaults && key in defaults ? defaults[key] : false;
+    if (val === undefined || val === defaultValue) {
+      continue;
+    }
+    result[key] = val;
+  }
+  return result as T;
+};

src/components/buttons/ha-call-service-button.ts

@@ -1,16 +1,18 @@
+import { consume, type ContextType } from "@lit/context";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
-import type { HomeAssistant } from "../../types";
+import { apiContext } from "../../data/context";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { Appearance } from "../ha-button";
 
 @customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -56,7 +58,7 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this.hass.callService(
+      await this._api.callService(
         this.domain,
         this.service,
         this.data,

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

@@ -445,6 +445,7 @@ export class StateHistoryChartLine extends LitElement {
 
   private _formatYAxisLabel = (value: number) => {
     const label = formatNumber(value, this.hass.locale, {
+      minimumFractionDigits: value === 0 ? 0 : this._yAxisFractionDigits,
       maximumFractionDigits: this._yAxisFractionDigits,
     });
     const width = measureTextWidth(label, 12) + 5;

src/components/chart/statistics-chart.ts

@@ -552,6 +552,7 @@ export class StatisticsChart extends LitElement {
 
   private _formatYAxisLabel = (value: number) =>
     formatNumber(value, this.hass.locale, {
+      minimumFractionDigits: value === 0 ? 0 : this._yAxisFractionDigits,
       maximumFractionDigits: this._yAxisFractionDigits,
     });
 

src/components/data-table/ha-data-table.ts

@@ -1463,6 +1463,12 @@ export class HaDataTable extends LitElement {
           flex: 1;
           padding: var(--ha-space-3);
         }
+        @media (min-width: 871px) {
+          ha-input-search {
+            --ha-input-search-height: 32px;
+            --ha-input-search-border-radius: 10px;
+          }
+        }
         slot[name="header"] {
           display: block;
         }

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

@@ -9,15 +9,13 @@ import {
 } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
 import type { HaEntityPicker } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ type: Array }) public value?: string[];
 
   @property({ type: Boolean }) public disabled = false;
@@ -87,10 +85,6 @@ class HaEntitiesPicker extends LitElement {
   public reorder = false;
 
   protected render() {
-    if (!this.hass) {
-      return nothing;
-    }
-
     const currentEntities = this._currentEntities;
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -105,7 +99,6 @@ class HaEntitiesPicker extends LitElement {
               <div class="entity">
                 <ha-entity-picker
                   .curValue=${entityId}
-                  .hass=${this.hass}
                   .includeDomains=${this.includeDomains}
                   .excludeDomains=${this.excludeDomains}
                   .includeEntities=${this.includeEntities}
@@ -133,7 +126,6 @@ class HaEntitiesPicker extends LitElement {
       </ha-sortable>
       <div>
         <ha-entity-picker
-          .hass=${this.hass}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
           .includeEntities=${this.includeEntities}

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

@@ -1,4 +1,5 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import { consume, type ContextType } from "@lit/context";
 import { mdiPlus, mdiShape } from "@mdi/js";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -6,10 +7,21 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityPickerDisplay } from "../../common/entity/compute_entity_name_display";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
+import type { RelatedIdSets } from "../../common/search/related-context";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import {
+  configContext,
+  internationalizationContext,
+  registriesContext,
+  relatedContext,
+  statesContext,
+} from "../../data/context";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import {
   entityComboBoxKeys,
   getEntities,
+  markEntitiesRelated,
+  sortEntitiesByRelatedRank,
   type EntityComboBoxItem,
 } from "../../data/entity/entity_picker";
 import { domainToName } from "../../data/integration";
@@ -33,7 +45,21 @@ const CREATE_ID = "___create-new-entity___";
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _states!: ContextType<typeof statesContext>;
+
+  @state()
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: ContextType<typeof registriesContext>;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config!: ContextType<typeof configContext>;
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -131,12 +157,25 @@ export class HaEntityPicker extends LitElement {
 
   @state() private _pendingEntityId?: string;
 
-  protected willUpdate(changedProperties: PropertyValues<this>) {
+  @state()
+  @consume({ context: relatedContext, subscribe: true })
+  private _relatedIdSets?: RelatedIdSets;
+
+  private get _hasRelatedContext(): boolean {
+    const related = this._relatedIdSets;
+    return (
+      !!related &&
+      (related.entities.size > 0 ||
+        related.devices.size > 0 ||
+        related.areas.size > 0)
+    );
+  }
+
+  protected willUpdate(changedProperties: PropertyValues) {
     if (
       this._pendingEntityId &&
-      changedProperties.has("hass") &&
-      this.hass.states !== changedProperties.get("hass")?.states &&
-      this.hass.states[this._pendingEntityId]
+      changedProperties.has("_states") &&
+      this._states[this._pendingEntityId]
     ) {
       this._setValue(this._pendingEntityId);
       this._pendingEntityId = undefined;
@@ -146,7 +185,7 @@ export class HaEntityPicker extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
     // Load title translations so it is available when the combo-box opens
-    this.hass.loadBackendTranslation("title");
+    this._i18n.loadBackendTranslation("title");
   }
 
   private _findExtraOption(value: string | undefined) {
@@ -157,15 +196,11 @@ export class HaEntityPicker extends LitElement {
 
   private _renderExtraOptionStart(extraOption: EntitySelectorExtraOption) {
     const stateObj = extraOption.entity_id
-      ? this.hass.states[extraOption.entity_id]
+      ? this._states[extraOption.entity_id]
       : undefined;
     if (stateObj) {
       return html`
-        <state-badge
-          slot="start"
-          .stateObj=${stateObj}
-          .hass=${this.hass}
-        ></state-badge>
+        <state-badge slot="start" .stateObj=${stateObj}></state-badge>
       `;
     }
     if (extraOption.icon_path) {
@@ -197,7 +232,7 @@ export class HaEntityPicker extends LitElement {
       `;
     }
 
-    const stateObj = this.hass.states[entityId];
+    const stateObj = this._states[entityId];
 
     if (!stateObj) {
       return html`
@@ -211,23 +246,23 @@ export class HaEntityPicker extends LitElement {
     }
 
     const { primary, secondary } = computeEntityPickerDisplay(
-      this.hass,
+      {
+        ...this._registries,
+        language: this._i18n.language,
+        translationMetadata: this._i18n.translationMetadata,
+      },
       stateObj
     );
 
     return html`
-      <state-badge
-        .hass=${this.hass}
-        .stateObj=${stateObj}
-        slot="start"
-      ></state-badge>
+      <state-badge .stateObj=${stateObj} slot="start"></state-badge>
       <span slot="headline">${primary}</span>
       <span slot="supporting-text">${secondary}</span>
     `;
   };
 
   private get _showEntityId() {
-    return this.showEntityId || this.hass.userData?.showEntityIdPicker;
+    return this.showEntityId || this._config.userData?.showEntityIdPicker;
   }
 
   private _rowRenderer: RenderItemFunction<EntityComboBoxItem> = (
@@ -250,7 +285,6 @@ export class HaEntityPicker extends LitElement {
               <state-badge
                 slot="start"
                 .stateObj=${item.stateObj}
-                .hass=${this.hass}
               ></state-badge>
             `}
         <span slot="headline">${item.primary}</span>
@@ -276,17 +310,14 @@ export class HaEntityPicker extends LitElement {
   };
 
   private _getAdditionalItems = () =>
-    this._getCreateItems(this.hass.localize, this.createDomains);
+    this._getCreateItems(this._i18n.localize, this.createDomains);
 
   private _getCreateItems = memoizeOne(
-    (
-      localize: this["hass"]["localize"],
-      createDomains: this["createDomains"]
-    ) => {
+    (localize: LocalizeFunc, createDomains: this["createDomains"]) => {
       if (!createDomains?.length) {
         return [];
       }
-      this.hass.loadFragmentTranslation("config");
+      this._i18n.loadFragmentTranslation("config");
       return createDomains.map((domain) => {
         const primary = localize(
           "ui.components.entity.entity-picker.create_helper",
@@ -311,7 +342,9 @@ export class HaEntityPicker extends LitElement {
 
   private _getEntitiesMemoized = memoizeOne(
     (
-      hass: HomeAssistant,
+      states: ContextType<typeof statesContext>,
+      registries: ContextType<typeof registriesContext>,
+      i18n: ContextType<typeof internationalizationContext>,
       includeDomains?: string[],
       excludeDomains?: string[],
       entityFilter?: HaEntityPickerEntityFilterFunc,
@@ -321,21 +354,46 @@ export class HaEntityPicker extends LitElement {
       excludeEntities?: string[],
       value?: string
     ) =>
-      getEntities(hass, {
-        includeDomains,
-        excludeDomains,
-        entityFilter,
-        includeDeviceClasses,
-        includeUnitOfMeasurement,
-        includeEntities,
-        excludeEntities,
-        value,
-      })
+      getEntities(
+        {
+          states,
+          ...registries,
+          language: i18n.language,
+          translationMetadata: i18n.translationMetadata,
+          localize: i18n.localize,
+        },
+        {
+          includeDomains,
+          excludeDomains,
+          entityFilter,
+          includeDeviceClasses,
+          includeUnitOfMeasurement,
+          includeEntities,
+          excludeEntities,
+          value,
+        }
+      )
+  );
+
+  private _sortByRelatedContext = memoizeOne(
+    (
+      items: EntityComboBoxItem[],
+      related: RelatedIdSets,
+      entities: HomeAssistant["entities"],
+      devices: HomeAssistant["devices"],
+      language: string
+    ): EntityComboBoxItem[] =>
+      sortEntitiesByRelatedRank(
+        markEntitiesRelated(items, related, entities, devices),
+        language
+      )
   );
 
   private _getItems = () => {
-    const items = this._getEntitiesMemoized(
-      this.hass,
+    const entityItems = this._getEntitiesMemoized(
+      this._states,
+      this._registries,
+      this._i18n,
       this.includeDomains,
       this.excludeDomains,
       this.entityFilter,
@@ -345,14 +403,23 @@ export class HaEntityPicker extends LitElement {
       this.excludeEntities,
       this.value
     );
+    const sortedItems = this._hasRelatedContext
+      ? this._sortByRelatedContext(
+          entityItems,
+          this._relatedIdSets!,
+          this._registries.entities,
+          this._registries.devices,
+          this._i18n.locale.language
+        )
+      : entityItems;
     if (this.extraOptions?.length) {
       const resolvedExtras = this.extraOptions.map((opt) => ({
         ...opt,
-        stateObj: opt.entity_id ? this.hass.states[opt.entity_id] : undefined,
+        stateObj: opt.entity_id ? this._states[opt.entity_id] : undefined,
       }));
-      return [...resolvedExtras, ...items];
+      return [...resolvedExtras, ...sortedItems];
     }
-    return items;
+    return sortedItems;
   };
 
   private _shouldHideClearIcon() {
@@ -362,11 +429,10 @@ export class HaEntityPicker extends LitElement {
   protected render() {
     const placeholder =
       this.placeholder ??
-      this.hass.localize("ui.components.entity.entity-picker.placeholder");
+      this._i18n.localize("ui.components.entity.entity-picker.placeholder");
 
     return html`
       <ha-generic-picker
-        .hass=${this.hass}
         .disabled=${this.disabled}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
@@ -384,12 +450,13 @@ export class HaEntityPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .searchKeys=${entityComboBoxKeys}
+        .noSort=${this._hasRelatedContext}
         use-top-label
         .addButtonLabel=${this.addButton
           ? (this.addButtonLabel ??
-            this.hass.localize("ui.components.entity.entity-picker.add"))
+            this._i18n.localize("ui.components.entity.entity-picker.add"))
           : undefined}
-        .unknownItemText=${this.hass.localize(
+        .unknownItemText=${this._i18n.localize(
           "ui.components.entity.entity-picker.unknown"
         )}
         @value-changed=${this._valueChanged}
@@ -402,17 +469,23 @@ export class HaEntityPicker extends LitElement {
     search,
     filteredItems
   ) => {
+    // Float related items to the top by closeness, keeping search relevance
+    // order within each tier.
+    const items = this._hasRelatedContext
+      ? sortEntitiesByRelatedRank(filteredItems)
+      : filteredItems;
+
     // If there is exact match for entity id, put it first
-    const index = filteredItems.findIndex(
+    const index = items.findIndex(
       (item) => item.stateObj?.entity_id === search
     );
     if (index === -1) {
-      return filteredItems;
+      return items;
     }
 
-    const [exactMatch] = filteredItems.splice(index, 1);
-    filteredItems.unshift(exactMatch);
-    return filteredItems;
+    const [exactMatch] = items.splice(index, 1);
+    items.unshift(exactMatch);
+    return items;
   };
 
   public async open() {
@@ -436,7 +509,7 @@ export class HaEntityPicker extends LitElement {
         domain,
         dialogClosedCallback: (item) => {
           if (item.entityId) {
-            if (this.hass.states[item.entityId]) {
+            if (this._states[item.entityId]) {
               this._setValue(item.entityId);
             } else {
               this._pendingEntityId = item.entityId;
@@ -462,7 +535,7 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.entity.entity-picker.no_match", {
+    this._i18n.localize("ui.components.entity.entity-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
 }

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

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
@@ -6,9 +7,9 @@ import { customElement, property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { apiContext } from "../../data/context";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
-import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-switch";
@@ -29,8 +30,8 @@ const isOn = (stateObj?: HassEntity) =>
 
 @customElement("ha-entity-toggle")
 export class HaEntityToggle extends LitElement {
-  // hass is not a property so that we only re-render on stateObj changes
-  public hass?: HomeAssistant;
+  @consume({ context: apiContext, subscribe: true })
+  private _api?: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
@@ -118,7 +119,7 @@ export class HaEntityToggle extends LitElement {
   // result in the entity to be turned on. Since the state is not changing,
   // the resync is not called automatic.
   private async _callService(turnOn): Promise<void> {
-    if (!this.hass || !this.stateObj) {
+    if (!this._api || !this.stateObj) {
       return;
     }
     forwardHaptic(this, "light");
@@ -149,7 +150,7 @@ export class HaEntityToggle extends LitElement {
     this._isOn = turnOn;
 
     try {
-      await this.hass.callService(serviceDomain, service, {
+      await this._api.callService(serviceDomain, service, {
         entity_id: this.stateObj.entity_id,
       });
     } finally {

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

@@ -1,3 +1,5 @@
+import { consume } from "@lit/context";
+import type { ContextType } from "@lit/context";
 import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
@@ -6,13 +8,19 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { arrayLiteralIncludes } from "../../common/array/literal-includes";
 import secondsToDuration from "../../common/datetime/seconds_to_duration";
+import {
+  consumeEntityRegistryEntry,
+  consumeLocalize,
+} from "../../common/decorators/consume-context-entry";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { unitFromParts, valueFromParts } from "../../common/entity/value_parts";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import { formattersContext } from "../../data/context";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
-import type { HomeAssistant } from "../../types";
 import "../ha-label-badge";
 import "../ha-state-icon";
 
@@ -40,7 +48,15 @@ const getTruncatedKey = (domainKey: string, stateKey: string) => {
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  private _formatters?: ContextType<typeof formattersContext>;
+
+  @state() @consumeLocalize() private _localize!: LocalizeFunc;
+
+  @state()
+  @consumeEntityRegistryEntry({ entityIdPath: ["state", "entity_id"] })
+  private _entry?: EntityRegistryDisplayEntry;
 
   @property({ attribute: false }) public state?: HassEntity;
 
@@ -77,10 +93,8 @@ export class HaStateLabelBadge extends LitElement {
       return html`
         <ha-label-badge
           class="warning"
-          label=${this.hass!.localize("state_badge.default.error")}
-          description=${this.hass!.localize(
-            "state_badge.default.entity_not_found"
-          )}
+          label=${this._localize("state_badge.default.error")}
+          description=${this._localize("state_badge.default.entity_not_found")}
         >
           <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
         </ha-label-badge>
@@ -94,7 +108,7 @@ export class HaStateLabelBadge extends LitElement {
     // 4. Icon determined via entity state
     // 5. Value string as fallback
     const domain = computeStateDomain(entityState);
-    const entry = this.hass?.entities[entityState.entity_id];
+    const entry = this._entry;
 
     const showIcon =
       this.icon || this._computeShowIcon(domain, entityState, entry);
@@ -163,20 +177,23 @@ export class HaStateLabelBadge extends LitElement {
       case "sun":
       case "timer":
         return null;
-      // @ts-expect-error we don't break and go to default
       case "sensor":
         if (entry?.platform === "moon") {
           return null;
         }
-      // eslint-disable-next-line: disable=no-fallthrough
+        break;
       default:
-        return entityState.state === UNAVAILABLE ||
-          entityState.state === UNKNOWN
-          ? "—"
-          : this.hass!.formatEntityStateToParts(entityState).find(
-              (part) => part.type === "value"
-            )?.value;
+        break;
     }
+    if (entityState.state === UNAVAILABLE || entityState.state === UNKNOWN) {
+      return "—";
+    }
+    if (!this._formatters) {
+      return null;
+    }
+    return valueFromParts(
+      this._formatters.formatEntityStateToParts(entityState)
+    );
   }
 
   private _computeShowIcon(
@@ -211,11 +228,11 @@ export class HaStateLabelBadge extends LitElement {
   ) {
     // For unavailable states or certain domains, use a special translation that is truncated to fit within the badge label
     if (entityState.state === UNAVAILABLE || entityState.state === UNKNOWN) {
-      return this.hass!.localize(`state_badge.default.${entityState.state}`);
+      return this._localize(`state_badge.default.${entityState.state}`);
     }
     const domainStateKey = getTruncatedKey(domain, entityState.state);
     if (domainStateKey) {
-      return this.hass!.localize(`state_badge.${domainStateKey}`);
+      return this._localize(`state_badge.${domainStateKey}`);
     }
     // Person and device tracker state can be zone name
     if (domain === "person" || domain === "device_tracker") {
@@ -224,10 +241,12 @@ export class HaStateLabelBadge extends LitElement {
     if (domain === "timer") {
       return secondsToDuration(_timerTimeRemaining);
     }
+    if (!this._formatters) {
+      return null;
+    }
     return (
-      this.hass!.formatEntityStateToParts(entityState).find(
-        (part) => part.type === "unit"
-      )?.value || null
+      unitFromParts(this._formatters.formatEntityStateToParts(entityState)) ||
+      null
     );
   }
 

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

@@ -343,11 +343,7 @@ export class HaStatisticPicker extends LitElement {
     return html`
       ${item.stateObj
         ? html`
-            <state-badge
-              .hass=${this.hass}
-              .stateObj=${item.stateObj}
-              slot="start"
-            ></state-badge>
+            <state-badge .stateObj=${item.stateObj} slot="start"></state-badge>
           `
         : item.icon_path
           ? html`
@@ -488,7 +484,6 @@ export class HaStatisticPicker extends LitElement {
                 <state-badge
                   slot="start"
                   .stateObj=${item.stateObj}
-                  .hass=${this.hass}
                 ></state-badge>
               `
             : nothing}

src/components/entity/state-badge.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -14,13 +15,12 @@ import {
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
-import type { HomeAssistant } from "../../types";
+import { connectionContext } from "../../data/context";
+import { isBrandUrl } from "../../util/brands-url";
 import "../ha-state-icon";
 
 @customElement("state-badge")
 export class StateBadge extends LitElement {
-  public hass?: HomeAssistant;
-
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   @property({ attribute: false }) public overrideIcon?: string;
@@ -36,6 +36,10 @@ export class StateBadge extends LitElement {
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public icon = true;
 
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
+
   @state() private _iconStyle: Record<string, string | undefined> = {};
 
   connectedCallback(): void {
@@ -106,14 +110,15 @@ export class StateBadge extends LitElement {
     ></ha-state-icon>`;
   }
 
-  public willUpdate(changedProps: PropertyValues<this>) {
+  public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     if (
       !changedProps.has("stateObj") &&
       !changedProps.has("overrideImage") &&
       !changedProps.has("overrideIcon") &&
       !changedProps.has("stateColor") &&
-      !changedProps.has("color")
+      !changedProps.has("color") &&
+      !changedProps.has("_connection")
     ) {
       return;
     }
@@ -133,12 +138,10 @@ export class StateBadge extends LitElement {
             stateObj.attributes.entity_picture) &&
           !this.overrideIcon
         ) {
-          let imageUrl =
+          let imageUrl = this._resolveImageUrl(
             stateObj.attributes.entity_picture_local ||
-            stateObj.attributes.entity_picture;
-          if (this.hass) {
-            imageUrl = this.hass.hassUrl(imageUrl);
-          }
+              stateObj.attributes.entity_picture
+          );
           if (domain === "camera") {
             imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
           }
@@ -179,11 +182,7 @@ export class StateBadge extends LitElement {
           }
         }
       } else if (this.overrideImage) {
-        let imageUrl = this.overrideImage;
-        if (this.hass) {
-          imageUrl = this.hass.hassUrl(imageUrl);
-        }
-        backgroundImage = `url(${imageUrl})`;
+        backgroundImage = `url(${this._resolveImageUrl(this.overrideImage)})`;
         this.icon = false;
       }
     }
@@ -192,6 +191,20 @@ export class StateBadge extends LitElement {
     this.style.backgroundImage = backgroundImage;
   }
 
+  // Sign the image URL via the connection context so brand images
+  // (/api/brands/...) get their access token. Without a way to sign, a brands
+  // request would be rejected (and logged/blocked by core), so skip it until
+  // we can sign.
+  private _resolveImageUrl(url: string | undefined): string {
+    if (!url) {
+      return "";
+    }
+    if (this._connection) {
+      return this._connection.hassUrl(url);
+    }
+    return isBrandUrl(url) ? "" : url;
+  }
+
   protected getClass() {
     const cls = new Map(
       ["has-no-radius", "has-media-image", "has-image"].map((_cls) => [

src/components/entity/state-info.ts

@@ -24,7 +24,6 @@ class StateInfo extends LitElement {
     const name = this.hass.formatEntityName(this.stateObj, { type: "entity" });
 
     return html`<state-badge
-        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .stateColor=${true}
         .color=${this.color}

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

@@ -173,7 +173,6 @@ export class HaAreaControlsPicker extends LitElement {
             domainItems = multiTermSortedSearch(
               domainItems,
               searchString,
-              this._domainSearchKeys,
               (item) => item.id,
               fuseIndex
             );
@@ -226,7 +225,6 @@ export class HaAreaControlsPicker extends LitElement {
             entityItems = multiTermSortedSearch(
               entityItems,
               searchString,
-              this._entitySearchKeys,
               (item) => item.id,
               fuseIndex
             );

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

@@ -1,10 +1,11 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiTextureBox } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { getAreaContext } from "../common/entity/context/get_area_context";
-import type { HomeAssistant } from "../types";
+import { areasContext, floorsContext } from "../data/context";
 import "./ha-expansion-panel";
 import "./ha-items-display-editor";
 import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
@@ -17,7 +18,13 @@ export interface AreasDisplayValue {
 
 @customElement("ha-areas-display-editor")
 export class HaAreasDisplayEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @consume({ context: areasContext, subscribe: true })
+  @state()
+  private _areas!: ContextType<typeof areasContext>;
+
+  @consume({ context: floorsContext, subscribe: true })
+  @state()
+  private _floors!: ContextType<typeof floorsContext>;
 
   @property() public label?: string;
 
@@ -35,10 +42,10 @@ export class HaAreasDisplayEditor extends LitElement {
   public showNavigationButton = false;
 
   protected render(): TemplateResult {
-    const areas = Object.values(this.hass.areas);
+    const areas = Object.values(this._areas);
 
     const items: DisplayItem[] = areas.map((area) => {
-      const { floor } = getAreaContext(area, this.hass.floors);
+      const { floor } = getAreaContext(area, this._floors);
       return {
         value: area.area_id,
         label: area.name,

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

@@ -1,15 +1,19 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiDragHorizontalVariant, mdiTextureBox } from "@mdi/js";
 import type { TemplateResult } from "lit";
 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 { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import { getAreaContext } from "../common/entity/context/get_area_context";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { areasContext, floorsContext } from "../data/context";
 import type { FloorRegistryEntry } from "../data/floor_registry";
 import { getFloors } from "../panels/lovelace/strategies/areas/helpers/areas-strategy-helper";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { ValueChangedEvent } from "../types";
 import "./ha-expansion-panel";
 import "./ha-floor-icon";
 import "./ha-items-display-editor";
@@ -30,7 +34,17 @@ const UNASSIGNED_FLOOR = "__unassigned__";
 
 @customElement("ha-areas-floors-display-editor")
 export class HaAreasFloorsDisplayEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: areasContext, subscribe: true })
+  @state()
+  private _areas!: ContextType<typeof areasContext>;
+
+  @consume({ context: floorsContext, subscribe: true })
+  @state()
+  private _floors!: ContextType<typeof floorsContext>;
 
   @property() public label?: string;
 
@@ -51,13 +65,14 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
 
   protected render(): TemplateResult {
     const groupedAreasItems = this._groupedAreasItems(
-      this.hass.areas,
-      this.hass.floors
+      this._areas,
+      this._floors
     );
 
     const filteredFloors = this._sortedFloors(
-      this.hass.floors,
-      this.value?.floors_display?.order
+      this._floors,
+      this.value?.floors_display?.order,
+      this._localize
     ).filter(
       (floor) =>
         // Only include floors that have areas assigned to them
@@ -124,15 +139,14 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
 
   private _groupedAreasItems = memoizeOne(
     (
-      hassAreas: HomeAssistant["areas"],
-      // update items if floors change
-      _hassFloors: HomeAssistant["floors"]
+      areas: ContextType<typeof areasContext>,
+      floors: ContextType<typeof floorsContext>
     ): Record<string, DisplayItem[]> => {
-      const areas = Object.values(hassAreas);
+      const areaList = Object.values(areas);
 
-      const groupedItems: Record<string, DisplayItem[]> = areas.reduce(
+      const groupedItems: Record<string, DisplayItem[]> = areaList.reduce(
         (acc, area) => {
-          const { floor } = getAreaContext(area, this.hass.floors);
+          const { floor } = getAreaContext(area, floors);
           const floorId = floor?.floor_id ?? UNASSIGNED_FLOOR;
 
           if (!acc[floorId]) {
@@ -155,23 +169,24 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
 
   private _sortedFloors = memoizeOne(
     (
-      hassFloors: HomeAssistant["floors"],
-      order: string[] | undefined
+      floors: ContextType<typeof floorsContext>,
+      order: string[] | undefined,
+      localize: LocalizeFunc
     ): FloorRegistryEntry[] => {
-      const floors = getFloors(hassFloors, order);
-      const noFloors = floors.length === 0;
-      floors.push({
+      const sortedFloors = getFloors(floors, order);
+      const noFloors = sortedFloors.length === 0;
+      sortedFloors.push({
         floor_id: UNASSIGNED_FLOOR,
         name: noFloors
-          ? this.hass.localize("ui.panel.lovelace.strategy.areas.areas")
-          : this.hass.localize("ui.panel.lovelace.strategy.areas.other_areas"),
+          ? localize("ui.panel.lovelace.strategy.areas.areas")
+          : localize("ui.panel.lovelace.strategy.areas.other_areas"),
         icon: null,
         level: null,
         aliases: [],
         created_at: 0,
         modified_at: 0,
       });
-      return floors;
+      return sortedFloors;
     }
   );
 
@@ -180,8 +195,9 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
     const newIndex = ev.detail.newIndex;
     const oldIndex = ev.detail.oldIndex;
     const floorIds = this._sortedFloors(
-      this.hass.floors,
-      this.value?.floors_display?.order
+      this._floors,
+      this.value?.floors_display?.order,
+      this._localize
     ).map((floor) => floor.floor_id);
     const newOrder = [...floorIds];
     const movedFloorId = newOrder.splice(oldIndex, 1)[0];
@@ -204,8 +220,9 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
     const currentFloorId = (ev.currentTarget as any).floorId;
 
     const floorIds = this._sortedFloors(
-      this.hass.floors,
-      this.value?.floors_display?.order
+      this._floors,
+      this.value?.floors_display?.order,
+      this._localize
     ).map((floor) => floor.floor_id);
 
     const oldAreaDisplay = this.value?.areas_display ?? {};
@@ -223,14 +240,14 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
         continue;
       }
       const hidden = oldHidden.filter((areaId) => {
-        const id = this.hass.areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR;
+        const id = this._areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR;
         return id === floorId;
       });
       if (hidden?.length) {
         newHidden.push(...hidden);
       }
       const order = oldOrder.filter((areaId) => {
-        const id = this.hass.areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR;
+        const id = this._areas[areaId]?.floor_id ?? UNASSIGNED_FLOOR;
         return id === floorId;
       });
       if (order?.length) {

src/components/ha-assist-chat.ts

@@ -400,10 +400,12 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
 
   private _handleToggleThinking(ev: Event) {
     const index = (ev.currentTarget as any).index;
-    this._conversation[index] = {
-      ...this._conversation[index],
-      thinking_expanded: !this._conversation[index].thinking_expanded,
-    };
+    // Mutate the message in place rather than replacing it. The streaming
+    // processor keeps a reference to this same object and mutates it as deltas
+    // arrive; swapping in a new object would detach the in-flight message from
+    // the processor and freeze the chat (see #52501).
+    const message = this._conversation[index];
+    message.thinking_expanded = !message.thinking_expanded;
     this.requestUpdate("_conversation");
   }
 

src/components/ha-attribute-icon.ts

@@ -1,9 +1,10 @@
 import { consume } from "@lit/context";
 import type { ContextType } from "@lit/context";
+import { initialState } from "@lit/task";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import {
   configContext,
   connectionContext,
@@ -35,6 +36,47 @@ export class HaAttributeIcon extends LitElement {
   @consume({ context: entitiesContext, subscribe: true })
   private _entities?: ContextType<typeof entitiesContext>;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([
+      icon,
+      config,
+      connection,
+      entities,
+      stateObj,
+      attribute,
+      attributeValue,
+    ]) => {
+      if (
+        icon ||
+        !config ||
+        !connection ||
+        !entities ||
+        !stateObj ||
+        !attribute
+      ) {
+        return initialState;
+      }
+      return attributeIcon(
+        config.config,
+        connection.connection,
+        entities,
+        stateObj,
+        attribute,
+        attributeValue
+      );
+    },
+    args: () =>
+      [
+        this.icon,
+        this._config,
+        this._connection,
+        this._entities,
+        this.stateObj,
+        this.attribute,
+        this.attributeValue,
+      ] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -48,21 +90,9 @@ export class HaAttributeIcon extends LitElement {
       return nothing;
     }
 
-    const icon = attributeIcon(
-      this._config.config,
-      this._connection.connection,
-      this._entities,
-      this.stateObj,
-      this.attribute,
-      this.attributeValue
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
-      }
-      return nothing;
-    });
-
-    return html`${until(icon)}`;
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : nothing;
   }
 }
 

src/components/ha-attribute-value.ts

@@ -1,13 +1,19 @@
 import { consume } from "@lit/context";
 import type { ContextType } from "@lit/context";
+import { initialState } from "@lit/task";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { getValueAttribute } from "../common/entity/get_states";
+import { valueFromParts } from "../common/entity/value_parts";
 import { formattersContext } from "../data/context";
 
+const isObjectValue = (value: unknown): boolean =>
+  (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
+  (!Array.isArray(value) && value instanceof Object);
+
 @customElement("ha-attribute-value")
 class HaAttributeValue extends LitElement {
   @state()
@@ -20,6 +26,17 @@ class HaAttributeValue extends LitElement {
 
   @property({ type: Boolean, attribute: "hide-unit" }) public hideUnit = false;
 
+  private _yamlTask = new AsyncValueTask(this, {
+    task: async ([attributeValue]) => {
+      if (!isObjectValue(attributeValue)) {
+        return initialState;
+      }
+      const { dump } = await import("js-yaml");
+      return dump(attributeValue);
+    },
+    args: () => [this.stateObj?.attributes[this.attribute]] as const,
+  });
+
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -49,13 +66,8 @@ class HaAttributeValue extends LitElement {
       }
     }
 
-    if (
-      (Array.isArray(attributeValue) &&
-        attributeValue.some((val) => val instanceof Object)) ||
-      (!Array.isArray(attributeValue) && attributeValue instanceof Object)
-    ) {
-      const yaml = import("js-yaml").then(({ dump }) => dump(attributeValue));
-      return html`<pre>${until(yaml, "")}</pre>`;
+    if (isObjectValue(attributeValue)) {
+      return html`<pre>${this._yamlTask.value ?? ""}</pre>`;
     }
 
     // Options-list attributes (effect_list, preset_modes, …) translated through
@@ -83,10 +95,7 @@ class HaAttributeValue extends LitElement {
         this.stateObj!,
         this.attribute
       );
-      return parts
-        .filter((part) => part.type === "value")
-        .map((part) => part.value)
-        .join("");
+      return valueFromParts(parts);
     }
 
     return this._formatters!.formatEntityAttributeValue(

src/components/ha-base-time-input.ts

@@ -153,10 +153,16 @@ export class HaBaseTimeInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.label
-        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
+        ? html`<label id="label"
+            >${this.label}${this.required ? " *" : ""}</label
+          >`
         : nothing}
       <div class="time-input-wrap-wrap">
-        <div class="time-input-wrap">
+        <div
+          class="time-input-wrap"
+          role="group"
+          aria-labelledby=${ifDefined(this.label ? "label" : undefined)}
+        >
           ${this.enableDay
             ? html`
                 <ha-input

src/components/ha-condition-icon.ts

@@ -12,10 +12,11 @@ import {
   mdiWeatherSunny,
 } from "@mdi/js";
 import { consume } from "@lit/context";
+import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import type { HassConfig, Connection } from "home-assistant-js-websocket";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { computeDomain } from "../common/entity/compute_domain";
 import { transform } from "../common/decorators/transform";
 import { configContext, connectionContext } from "../data/context";
@@ -57,6 +58,17 @@ export class HaConditionIcon extends LitElement {
   })
   private _connection?: Connection;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([icon, connection, config, condition]) => {
+      if (icon || !connection || !config || !condition) {
+        return initialState;
+      }
+      return conditionIcon(connection, config, condition);
+    },
+    args: () =>
+      [this.icon, this._connection, this._config, this.condition] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -70,18 +82,12 @@ export class HaConditionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = conditionIcon(
-      this._connection,
-      this._config,
-      this.condition
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
-      }
-      return this._renderFallback();
-    });
-
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

src/components/ha-control-slider.ts

@@ -388,7 +388,10 @@ export class HaControlSlider extends LitElement {
   private _isVisuallyInverted() {
     let inverted = this.inverted;
 
-    if (mainWindow.document.dir === "rtl") {
+    // RTL only mirrors the horizontal axis. A vertical slider always fills
+    // bottom-to-top regardless of text direction, so it must not be flipped,
+    // otherwise its value mapping ends up upside down in RTL languages.
+    if (!this.vertical && mainWindow.document.dir === "rtl") {
       inverted = !inverted;
     }
 

src/components/ha-domain-icon.ts

@@ -1,7 +1,8 @@
 import { consume, type ContextType } from "@lit/context";
+import { initialState } from "@lit/task";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { configContext, connectionContext, uiContext } from "../data/context";
 import {
   DEFAULT_DOMAIN_ICON,
@@ -36,6 +37,30 @@ export class HaDomainIcon extends LitElement {
   @consume({ context: uiContext, subscribe: true })
   private _hassUi?: ContextType<typeof uiContext>;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([icon, connection, config, domain, deviceClass, domainState]) => {
+      if (icon || !connection || !config || !domain) {
+        return initialState;
+      }
+      return domainIcon(
+        connection.connection,
+        config.config,
+        domain,
+        deviceClass,
+        domainState
+      );
+    },
+    args: () =>
+      [
+        this.icon,
+        this._connection,
+        this._hassConfig,
+        this.domain,
+        this.deviceClass,
+        this.state,
+      ] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -49,21 +74,12 @@ export class HaDomainIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = domainIcon(
-      this._connection.connection,
-      this._hassConfig.config,
-      this.domain,
-      this.deviceClass,
-      this.state
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
-      }
-
-      return this._renderFallback();
-    });
-
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

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

@@ -1,10 +1,18 @@
+import { consume, type ContextType } from "@lit/context";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { consumeEntityStates } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
+import {
+  configContext,
+  connectionContext,
+  entitiesContext,
+} from "../data/context";
 import { entityIcon } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-items-display-editor";
 import type { DisplayItem, DisplayValue } from "./ha-items-display-editor";
 
@@ -15,7 +23,21 @@ export interface EntitiesDisplayValue {
 
 @customElement("ha-entities-display-editor")
 export class HaEntitiesDisplayEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeEntityStates({ entityIdPath: ["entitiesIds"] })
+  private _entityStates?: Record<string, HassEntity>;
+
+  @consume({ context: entitiesContext, subscribe: true })
+  @state()
+  private _entitiesReg!: ContextType<typeof entitiesContext>;
+
+  @consume({ context: configContext, subscribe: true })
+  @state()
+  private _config!: ContextType<typeof configContext>;
+
+  @consume({ context: connectionContext, subscribe: true })
+  @state()
+  private _connection!: ContextType<typeof connectionContext>;
 
   @property() public label?: string;
 
@@ -32,20 +54,13 @@ export class HaEntitiesDisplayEditor extends LitElement {
   @property({ type: Boolean }) public required = false;
 
   protected render(): TemplateResult {
-    const entities = this.entitiesIds
-      .map((entityId) => this.hass.states[entityId])
-      .filter(Boolean);
-
-    const items: DisplayItem[] = entities.map((entity) => ({
-      value: entity.entity_id,
-      label: computeStateName(entity),
-      icon: entityIcon(
-        this.hass.entities,
-        this.hass.config,
-        this.hass.connection,
-        entity
-      ),
-    }));
+    const items = this._items(
+      this.entitiesIds,
+      this._entityStates,
+      this._entitiesReg,
+      this._config,
+      this._connection
+    );
 
     const value: DisplayValue = {
       order: this.value?.order ?? [],
@@ -61,6 +76,31 @@ export class HaEntitiesDisplayEditor extends LitElement {
     `;
   }
 
+  private _items = memoizeOne(
+    (
+      entitiesIds: string[],
+      entityStates: Record<string, HassEntity> | undefined,
+      entitiesReg: ContextType<typeof entitiesContext>,
+      config: ContextType<typeof configContext>,
+      connection: ContextType<typeof connectionContext>
+    ): DisplayItem[] => {
+      const entities = entitiesIds
+        .map((entityId) => entityStates?.[entityId])
+        .filter((stateObj): stateObj is HassEntity => Boolean(stateObj));
+
+      return entities.map((entity) => ({
+        value: entity.entity_id,
+        label: computeStateName(entity),
+        icon: entityIcon(
+          entitiesReg,
+          config.config,
+          connection.connection,
+          entity
+        ),
+      }));
+    }
+  );
+
   private _itemDisplayChanged(ev) {
     ev.stopPropagation();
     const value = ev.detail.value as DisplayValue;

src/components/ha-file-upload.ts

@@ -1,13 +1,18 @@
+import { consume } from "@lit/context";
 import { mdiDelete, mdiFileUpload } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ensureArray } from "../common/array/ensure-array";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { transform } from "../common/decorators/transform";
 import { fireEvent } from "../common/dom/fire_event";
 import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import type { LocalizeFunc } from "../common/translations/localize";
-import type { HomeAssistant } from "../types";
+import { internationalizationContext } from "../data/context";
+import type { FrontendLocaleData } from "../data/translation";
+import type { HomeAssistantInternationalization } from "../types";
 import { bytesToString } from "../util/bytes-to-string";
 import "./ha-button";
 import "./ha-icon-button";
@@ -22,10 +27,17 @@ declare global {
 
 @customElement("ha-file-upload")
 export class HaFileUpload extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ attribute: false }) public localize?: LocalizeFunc;
 
+  @state() @consumeLocalize() private _localize?: LocalizeFunc;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale?: FrontendLocaleData;
+
   @property() public accept!: string;
 
   @property() public icon?: string;
@@ -80,7 +92,7 @@ export class HaFileUpload extends LitElement {
   }
 
   public render(): TemplateResult {
-    const localize = this.localize || this.hass!.localize;
+    const localize = this.localize || this._localize!;
     return html`
       ${this.uploading
         ? html`<div class="container">
@@ -95,8 +107,8 @@ export class HaFileUpload extends LitElement {
               >
               ${this.progress
                 ? html`<div class="progress">
-                    ${this.progress}${this.hass &&
-                    blankBeforePercent(this.hass!.locale)}%
+                    ${this.progress}${this._locale &&
+                    blankBeforePercent(this._locale)}%
                   </div>`
                 : nothing}
             </div>

src/components/ha-filter-devices.ts

@@ -1,15 +1,23 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, 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 { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
 import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { deepEqual } from "../common/util/deep-equal";
+import {
+  apiContext,
+  devicesContext,
+  internationalizationContext,
+  statesContext,
+} from "../data/context";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
-import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";
@@ -24,7 +32,24 @@ interface HaFilterDevicesItem extends HaListVirtualizedItem {
 
 @customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: devicesContext, subscribe: true })
+  @state()
+  private _devicesReg!: ContextType<typeof devicesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public value?: string[];
 
@@ -75,7 +100,7 @@ export class HaFilterDevices extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.devices.caption")}
+          ${this._localize("ui.panel.config.devices.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -95,7 +120,13 @@ export class HaFilterDevices extends LitElement {
               </ha-input-search>
               <ha-list-selectable-virtualized
                 multi
-                .rows=${this._devices(this.hass.devices, this._filter || "")}
+                .rows=${this._devices(
+                  this._devicesReg,
+                  this._filter || "",
+                  this._localize,
+                  this._states,
+                  this._i18n.locale.language
+                )}
                 .rowRenderer=${this._renderItem}
                 @ha-list-item-selected=${this._handleAdded}
                 @ha-list-item-deselected=${this._handleRemoved}
@@ -121,13 +152,24 @@ export class HaFilterDevices extends LitElement {
   private _handleAdded(ev: CustomEvent<number>) {
     this.value = [
       ...(this.value ?? []),
-      this._devices(this.hass.devices, this._filter || "")[ev.detail].id,
+      this._devices(
+        this._devicesReg,
+        this._filter || "",
+        this._localize,
+        this._states,
+        this._i18n.locale.language
+      )[ev.detail].id,
     ];
   }
 
   private _handleRemoved(ev: CustomEvent<number>) {
-    const id = this._devices(this.hass.devices, this._filter || "")[ev.detail]
-      .id;
+    const id = this._devices(
+      this._devicesReg,
+      this._filter || "",
+      this._localize,
+      this._states,
+      this._i18n.locale.language
+    )[ev.detail].id;
     this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
   }
 
@@ -153,27 +195,24 @@ export class HaFilterDevices extends LitElement {
 
   private _devices = memoizeOne(
     (
-      devices: HomeAssistant["devices"],
-      filter: string
+      devices: ContextType<typeof devicesContext>,
+      filter: string,
+      localize: LocalizeFunc,
+      states: ContextType<typeof statesContext>,
+      language: string | undefined
     ): HaFilterDevicesItem[] => {
       const values = Object.values(devices);
       return values
         .map((device) => ({
           id: device.id,
           interactive: true,
-          name: computeDeviceNameDisplay(
-            device,
-            this.hass.localize,
-            this.hass.states
-          ),
+          name: computeDeviceNameDisplay(device, localize, states),
         }))
         .filter(
           ({ name }) =>
             !filter || name.toLowerCase().includes(filter.toLowerCase())
         )
-        .sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
-        );
+        .sort((a, b) => stringCompare(a.name, b.name, language));
     }
   );
 
@@ -194,7 +233,7 @@ export class HaFilterDevices extends LitElement {
     for (const deviceId of this.value) {
       value.push(deviceId);
       if (this.type) {
-        relatedPromises.push(findRelated(this.hass, "device", deviceId));
+        relatedPromises.push(findRelated(this._api, "device", deviceId));
       }
     }
     const results = await Promise.all(relatedPromises);

src/components/ha-filter-domains.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -5,12 +6,14 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, statesContext } from "../data/context";
 import { domainToName } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
@@ -20,7 +23,17 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-domains")
 export class HaFilterDomains extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   @property({ attribute: false }) public value?: string[];
 
@@ -43,7 +56,7 @@ export class HaFilterDomains extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.domains.caption")}
+          ${this._localize("ui.panel.config.domains.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -65,7 +78,13 @@ export class HaFilterDomains extends LitElement {
                 multi
               >
                 ${repeat(
-                  this._domains(this.hass.states, this._filter, this.value),
+                  this._domains(
+                    this._states,
+                    this._localize,
+                    this._i18n.locale.language,
+                    this._filter,
+                    this.value
+                  ),
                   (i) => i,
                   (domain) =>
                     html`<ha-check-list-item
@@ -78,7 +97,7 @@ export class HaFilterDomains extends LitElement {
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>
-                      ${domainToName(this.hass.localize, domain)}
+                      ${domainToName(this._localize, domain)}
                     </ha-check-list-item>`
                 )}
               </ha-list> `
@@ -87,26 +106,34 @@ export class HaFilterDomains extends LitElement {
     `;
   }
 
-  private _domains = memoizeOne((states, filter, _value) => {
-    const domains = new Set<string>();
-    Object.keys(states).forEach((entityId) => {
-      domains.add(computeDomain(entityId));
-    });
+  private _domains = memoizeOne(
+    (
+      states: ContextType<typeof statesContext>,
+      localize: LocalizeFunc,
+      language: string | undefined,
+      filter: string | undefined,
+      _value
+    ) => {
+      const domains = new Set<string>();
+      Object.keys(states).forEach((entityId) => {
+        domains.add(computeDomain(entityId));
+      });
 
-    return Array.from(domains.values())
-      .map((domain) => ({
-        domain,
-        name: domainToName(this.hass.localize, domain),
-      }))
-      .filter(
-        (entry) =>
-          !filter ||
-          entry.domain.toLowerCase().includes(filter) ||
-          entry.name.toLowerCase().includes(filter)
-      )
-      .sort((a, b) => stringCompare(a.name, b.name, this.hass.locale.language))
-      .map((entry) => entry.domain);
-  });
+      return Array.from(domains.values())
+        .map((domain) => ({
+          domain,
+          name: domainToName(localize, domain),
+        }))
+        .filter(
+          (entry) =>
+            !filter ||
+            entry.domain.toLowerCase().includes(filter) ||
+            entry.name.toLowerCase().includes(filter)
+        )
+        .sort((a, b) => stringCompare(a.name, b.name, language))
+        .map((entry) => entry.domain);
+    }
+  );
 
   protected updated(changed: PropertyValues<this>) {
     if (changed.has("expanded") && this.expanded) {
@@ -129,7 +156,13 @@ export class HaFilterDomains extends LitElement {
   }
 
   private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const domains = this._domains(this.hass.states, this._filter, this.value);
+    const domains = this._domains(
+      this._states,
+      this._localize,
+      this._i18n.locale.language,
+      this._filter,
+      this.value
+    );
 
     const visibleDomains = new Set(domains);
     const preserved = (this.value || []).filter((d) => !visibleDomains.has(d));

src/components/ha-filter-entities.ts

@@ -1,18 +1,25 @@
+import { consume, type ContextType } from "@lit/context";
 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 memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { deepEqual } from "../common/util/deep-equal";
+import {
+  apiContext,
+  internationalizationContext,
+  statesContext,
+} from "../data/context";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
 import { loadVirtualizer } from "../resources/virtualizer";
-import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-list";
@@ -22,7 +29,20 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-entities")
 export class HaFilterEntities extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: statesContext, subscribe: true })
+  @state()
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public value?: string[];
 
@@ -62,7 +82,7 @@ export class HaFilterEntities extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.entities.caption")}
+          ${this._localize("ui.panel.config.entities.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -82,9 +102,10 @@ export class HaFilterEntities extends LitElement {
               <ha-list class="ha-scrollbar" multi>
                 <lit-virtualizer
                   .items=${this._entities(
-                    this.hass.states,
+                    this._states,
                     this.type,
                     this._filter || "",
+                    this._i18n.locale.language,
                     this.value
                   )}
                   .keyFunction=${this._keyFunction}
@@ -163,9 +184,10 @@ export class HaFilterEntities extends LitElement {
 
   private _entities = memoizeOne(
     (
-      states: HomeAssistant["states"],
+      states: ContextType<typeof statesContext>,
       type: this["type"],
       filter: string,
+      language: string | undefined,
       _value
     ) => {
       const values = Object.values(states);
@@ -180,11 +202,7 @@ export class HaFilterEntities extends LitElement {
                 .includes(filter))
         )
         .sort((a, b) =>
-          stringCompare(
-            computeStateName(a),
-            computeStateName(b),
-            this.hass.locale.language
-          )
+          stringCompare(computeStateName(a), computeStateName(b), language)
         );
     }
   );
@@ -203,7 +221,7 @@ export class HaFilterEntities extends LitElement {
 
     for (const entityId of this.value) {
       if (this.type) {
-        relatedPromises.push(findRelated(this.hass, "entity", entityId));
+        relatedPromises.push(findRelated(this._api, "entity", entityId));
       }
     }
 

src/components/ha-filter-floor-areas.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -5,14 +6,21 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
 import { deepEqual } from "../common/util/deep-equal";
+import type { LocalizeFunc } from "../common/translations/localize";
+import {
+  apiContext,
+  areasContext,
+  floorsContext,
+  internationalizationContext,
+} from "../data/context";
 import { getFloorAreaLookup } from "../data/floor_registry";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./ha-floor-icon";
 import "./ha-icon";
@@ -26,7 +34,24 @@ import type { HaListSelectable } from "./list/ha-list-selectable";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: areasContext, subscribe: true })
+  @state()
+  private _areasReg!: ContextType<typeof areasContext>;
+
+  @consume({ context: floorsContext, subscribe: true })
+  @state()
+  private _floorsReg!: ContextType<typeof floorsContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public value?: {
     floors?: string[];
@@ -55,7 +80,7 @@ export class HaFilterFloorAreas extends LitElement {
   }
 
   protected render() {
-    const areas = this._areas(this.hass.areas, this.hass.floors);
+    const areas = this._areas(this._areasReg, this._floorsReg);
 
     return html`
       <ha-expansion-panel
@@ -65,7 +90,7 @@ export class HaFilterFloorAreas extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.areas.caption")}
+          ${this._localize("ui.panel.config.areas.caption")}
           ${this.value?.areas?.length || this.value?.floors?.length
             ? html`<div class="badge">
                   ${(this.value?.areas?.length || 0) +
@@ -85,9 +110,7 @@ export class HaFilterFloorAreas extends LitElement {
                 multi
                 @ha-list-item-selected=${this._handleAdded}
                 @ha-list-item-deselected=${this._handleRemoved}
-                aria-label=${this.hass.localize(
-                  "ui.panel.config.areas.caption"
-                )}
+                aria-label=${this._localize("ui.panel.config.areas.caption")}
               >
                 ${repeat(
                   areas?.floors || [],
@@ -141,8 +164,8 @@ export class HaFilterFloorAreas extends LitElement {
         .type=${"areas"}
         class=${classMap({
           rtl: computeRTL(
-            this.hass.language,
-            this.hass.translationMetadata.translations
+            this._i18n.language,
+            this._i18n.translationMetadata.translations
           ),
           floor: hasFloor,
         })}
@@ -225,7 +248,10 @@ export class HaFilterFloorAreas extends LitElement {
   }
 
   private _areas = memoizeOne(
-    (areaReg: HomeAssistant["areas"], floorReg: HomeAssistant["floors"]) => {
+    (
+      areaReg: ContextType<typeof areasContext>,
+      floorReg: ContextType<typeof floorsContext>
+    ) => {
       const areas = Object.values(areaReg);
       const floors = Object.values(floorReg);
       const floorAreaLookup = getFloorAreaLookup(areas);
@@ -261,7 +287,7 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.areas) {
       for (const areaId of this.value.areas) {
         if (this.type) {
-          relatedPromises.push(findRelated(this.hass, "area", areaId));
+          relatedPromises.push(findRelated(this._api, "area", areaId));
         }
       }
     }
@@ -269,7 +295,7 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.floors) {
       for (const floorId of this.value.floors) {
         if (this.type) {
-          relatedPromises.push(findRelated(this.hass, "floor", floorId));
+          relatedPromises.push(findRelated(this._api, "floor", floorId));
         }
       }
     }

src/components/ha-filter-labels.ts

@@ -1,4 +1,4 @@
-import { consume } from "@lit/context";
+import { consume, type ContextType } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -6,13 +6,14 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
-import { labelsContext } from "../data/context";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, labelsContext } from "../data/context";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
@@ -25,14 +26,20 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-labels")
 export class HaFilterLabels extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public value?: string[];
 
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  @state()
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
   @consume({ context: labelsContext, subscribe: true })
   @state()
   private _labels?: LabelRegistryEntry[];
@@ -45,7 +52,12 @@ export class HaFilterLabels extends LitElement {
 
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
-    (labels: LabelRegistryEntry[], filter: string | undefined, _value) =>
+    (
+      labels: LabelRegistryEntry[],
+      filter: string | undefined,
+      language: string | undefined,
+      _value
+    ) =>
       labels
         .filter(
           (label) =>
@@ -54,11 +66,7 @@ export class HaFilterLabels extends LitElement {
             label.label_id.toLowerCase().includes(filter)
         )
         .sort((a, b) =>
-          stringCompare(
-            a.name || a.label_id,
-            b.name || b.label_id,
-            this.hass.locale.language
-          )
+          stringCompare(a.name || a.label_id, b.name || b.label_id, language)
         )
   );
 
@@ -71,7 +79,7 @@ export class HaFilterLabels extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.labels.caption")}
+          ${this._localize("ui.panel.config.labels.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -96,6 +104,7 @@ export class HaFilterLabels extends LitElement {
                   this._filteredLabels(
                     this._labels || [],
                     this._filter,
+                    this._i18n.locale.language,
                     this.value
                   ),
                   (label) => label.label_id,
@@ -129,7 +138,7 @@ export class HaFilterLabels extends LitElement {
             class="add"
           >
             <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-            ${this.hass.localize("ui.panel.config.labels.manage_labels")}
+            ${this._localize("ui.panel.config.labels.manage_labels")}
           </ha-list-item>`
         : nothing}
     `;
@@ -169,6 +178,7 @@ export class HaFilterLabels extends LitElement {
     const filteredLabels = this._filteredLabels(
       this._labels || [],
       this._filter,
+      this._i18n.locale.language,
       this.value
     );
 

src/components/ha-filter-states.ts

@@ -5,7 +5,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
@@ -14,8 +13,6 @@ import "./ha-list";
 
 @customElement("ha-filter-states")
 export class HaFilterStates extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public label?: string;
 
   @property({ attribute: false }) public value?: string[];

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

@@ -8,7 +8,6 @@ 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";
 import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
@@ -22,8 +21,6 @@ import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 
 @customElement("ha-filter-voice-assistants")
 export class HaFilterVoiceAssistants extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @state()
   @consumeLocalize()
   private _localize!: LocalizeFunc;
@@ -78,7 +75,6 @@ export class HaFilterVoiceAssistants extends LitElement {
                     <voice-assistant-brand-icon
                       slot="graphic"
                       .voiceAssistantId=${voiceAssistantId}
-                      .hass=${this.hass}
                     >
                     </voice-assistant-brand-icon>
                     ${voiceAssistants[voiceAssistantId].name}

src/components/ha-lawn_mower-action-button.ts

@@ -1,10 +1,13 @@
+import { consume, type ContextType } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { supportsFeature } from "../common/entity/supports-feature";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { apiContext, formattersContext } from "../data/context";
 import "./ha-button";
 import type { LawnMowerEntity, LawnMowerEntityState } from "../data/lawn_mower";
 import { LawnMowerEntityFeature } from "../data/lawn_mower";
-import type { HomeAssistant } from "../types";
 
 interface LawnMowerAction {
   action: string;
@@ -39,13 +42,19 @@ const LAWN_MOWER_ACTIONS: Partial<
 
 @customElement("ha-lawn_mower-action-button")
 class HaLawnMowerActionButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state() @consumeLocalize() private _localize!: LocalizeFunc;
+
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  private _formatters?: ContextType<typeof formattersContext>;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public stateObj!: LawnMowerEntity;
 
   public render() {
-    const state = this.stateObj.state;
-    const action = LAWN_MOWER_ACTIONS[state];
+    const action = LAWN_MOWER_ACTIONS[this.stateObj.state];
 
     if (action && supportsFeature(this.stateObj, action.feature)) {
       return html`
@@ -55,14 +64,14 @@ class HaLawnMowerActionButton extends LitElement {
           .service=${action.service}
           size="s"
         >
-          ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
+          ${this._localize(`ui.card.lawn_mower.actions.${action.action}`)}
         </ha-button>
       `;
     }
 
     return html`
       <ha-button appearance="plain" disabled>
-        ${this.hass.formatEntityState(this.stateObj)}
+        ${this._formatters?.formatEntityState(this.stateObj)}
       </ha-button>
     `;
   }
@@ -71,7 +80,7 @@ class HaLawnMowerActionButton extends LitElement {
     ev.stopPropagation();
     const stateObj = this.stateObj;
     const service = ev.target.service;
-    this.hass.callService("lawn_mower", service, {
+    this._api.callService("lawn_mower", service, {
       entity_id: stateObj.entity_id,
     });
   }

src/components/ha-navigation-picker.ts

@@ -243,7 +243,6 @@ export class HaNavigationPicker extends LitElement {
         items = multiTermSortedSearch(
           items,
           searchString,
-          DEFAULT_SEARCH_KEYS,
           (item) => item.id,
           fuseIndex
         );

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

@@ -492,7 +492,6 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       let filteredItems = multiTermSortedSearch<PickerComboBoxItem>(
         this._allItems,
         searchString,
-        this.searchKeys || DEFAULT_SEARCH_KEYS,
         (item) => item.id,
         index
       );

src/components/ha-picture-upload.ts

@@ -78,7 +78,6 @@ export class HaPictureUpload extends LitElement {
 
       return html`
         <ha-file-upload
-          .hass=${this.hass}
           .icon=${mdiImagePlus}
           .label=${this.label ||
           this.hass.localize("ui.components.picture-upload.label")}

src/components/ha-qr-scanner.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiCamera } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
@@ -8,9 +9,11 @@ import { customElement, property, query, state } from "lit/decorators";
 // WebAssembly port of ZXing:
 import { prepareZXingModule } from "barcode-detector";
 import type QrScanner from "qr-scanner";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { configContext } from "../data/context";
 import { addExternalBarCodeListener } from "../external_app/external_app_entrypoint";
-import type { HomeAssistant } from "../types";
 import "./ha-alert";
 import "./ha-button";
 import "./ha-dropdown";
@@ -33,7 +36,13 @@ prepareZXingModule({
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _config!: ContextType<typeof configContext>;
 
   @property() public description?: string;
 
@@ -106,7 +115,7 @@ class HaQrScanner extends LitElement {
           ${this._error || this._warning}
           ${this._error
             ? html`<ha-button @click=${this._retry} slot="action">
-                ${this.hass.localize("ui.components.qr-scanner.retry")}
+                ${this._localize("ui.components.qr-scanner.retry")}
               </ha-button>`
             : nothing}
         </ha-alert>`
@@ -126,7 +135,7 @@ class HaQrScanner extends LitElement {
               ? html`<ha-dropdown @wa-select=${this._handleDropdownSelect}>
                   <ha-icon-button
                     slot="trigger"
-                    .label=${this.hass.localize(
+                    .label=${this._localize(
                       "ui.components.qr-scanner.select_camera"
                     )}
                     .path=${mdiCamera}
@@ -146,28 +155,24 @@ class HaQrScanner extends LitElement {
           </div>`
       : html`<ha-alert alert-type="warning">
             ${!window.isSecureContext
-              ? this.hass.localize(
-                  "ui.components.qr-scanner.only_https_supported"
-                )
-              : this.hass.localize("ui.components.qr-scanner.not_supported")}
+              ? this._localize("ui.components.qr-scanner.only_https_supported")
+              : this._localize("ui.components.qr-scanner.not_supported")}
           </ha-alert>
-          <p>${this.hass.localize("ui.components.qr-scanner.manual_input")}</p>
+          <p>${this._localize("ui.components.qr-scanner.manual_input")}</p>
           <div class="row">
             <ha-input
-              .label=${this.hass.localize(
-                "ui.components.qr-scanner.enter_qr_code"
-              )}
+              .label=${this._localize("ui.components.qr-scanner.enter_qr_code")}
               @keyup=${this._manualKeyup}
               @paste=${this._manualPaste}
             ></ha-input>
             <ha-button @click=${this._manualSubmit}>
-              ${this.hass.localize("ui.common.submit")}
+              ${this._localize("ui.common.submit")}
             </ha-button>
           </div>`}`;
   }
 
   private get _nativeBarcodeScanner(): boolean {
-    return Boolean(this.hass.auth.external?.config.hasBarCodeScanner);
+    return Boolean(this._config.auth.external?.config.hasBarCodeScanner);
   }
 
   private async _loadQrScanner() {
@@ -182,7 +187,7 @@ class HaQrScanner extends LitElement {
     const QrScanner = (await import("qr-scanner")).default;
     if (!(await QrScanner.hasCamera())) {
       this._reportError(
-        this.hass.localize("ui.components.qr-scanner.no_camera_found")
+        this._localize("ui.components.qr-scanner.no_camera_found")
       );
       return;
     }
@@ -270,7 +275,7 @@ class HaQrScanner extends LitElement {
       if (msg.command === "bar_code/scan_result") {
         if (msg.payload.format !== "qr_code") {
           this._notifyExternalScanner(
-            this.hass.localize("ui.components.qr-scanner.wrong_code", {
+            this._localize("ui.components.qr-scanner.wrong_code", {
               format: msg.payload.format,
               rawValue: msg.payload.rawValue,
             })
@@ -288,20 +293,17 @@ class HaQrScanner extends LitElement {
       }
       return true;
     });
-    this.hass.auth.external!.fireMessage({
+    this._config.auth.external!.fireMessage({
       type: "bar_code/scan",
       payload: {
         title:
-          this.title ||
-          this.hass.localize("ui.components.qr-scanner.app.title"),
+          this.title || this._localize("ui.components.qr-scanner.app.title"),
         description:
           this.description ||
-          this.hass.localize("ui.components.qr-scanner.app.description"),
+          this._localize("ui.components.qr-scanner.app.description"),
         alternative_option_label:
           this.alternativeOptionLabel ||
-          this.hass.localize(
-            "ui.components.qr-scanner.app.alternativeOptionLabel"
-          ),
+          this._localize("ui.components.qr-scanner.app.alternativeOptionLabel"),
       },
     });
   }
@@ -309,7 +311,7 @@ class HaQrScanner extends LitElement {
   private _closeExternalScanner() {
     this._removeListener?.();
     this._removeListener = undefined;
-    this.hass.auth.external!.fireMessage({
+    this._config.auth.external!.fireMessage({
       type: "bar_code/close",
     });
   }
@@ -318,7 +320,7 @@ class HaQrScanner extends LitElement {
     if (!this._nativeBarcodeScanner) {
       return;
     }
-    this.hass.auth.external!.fireMessage({
+    this._config.auth.external!.fireMessage({
       type: "bar_code/notify",
       payload: {
         message,

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

@@ -23,7 +23,6 @@ export class HaAreasDisplaySelector extends LitElement {
   protected render() {
     return html`
       <ha-areas-display-editor
-        .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}

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

@@ -4,7 +4,6 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
 import type { ColorTempSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-labeled-slider";
 import { generateColorTemperatureGradient } from "../../dialogs/more-info/components/lights/light-color-temp-picker";
 import {
@@ -15,8 +14,6 @@ import {
 
 @customElement("ha-selector-color_temp")
 export class HaColorTempSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: ColorTempSelector;
 
   @property() public value?: string;

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

@@ -63,7 +63,6 @@ export class HaEntitySelector extends LitElement {
 
     if (!this.selector.entity?.multiple) {
       return html`<ha-entity-picker
-        .hass=${this.hass}
         .value=${typeof this.value === "string" ? this.value : ""}
         .label=${this.label}
         .placeholder=${this.placeholder}
@@ -80,7 +79,6 @@ export class HaEntitySelector extends LitElement {
 
     return html`
       <ha-entities-picker
-        .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .placeholder=${this.placeholder}

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

@@ -37,7 +37,6 @@ export class HaFileSelector extends LitElement {
   protected render() {
     return html`
       <ha-file-upload
-        .hass=${this.hass}
         .accept=${this.selector.file?.accept}
         .icon=${mdiFile}
         .label=${this.label}

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

@@ -1,6 +1,8 @@
+import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { until } from "lit/directives/until";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { AsyncValueTask } from "../../common/controllers/async-value-task";
 import { fireEvent } from "../../common/dom/fire_event";
 import { entityIcon } from "../../data/icons";
 import type { IconSelector } from "../../data/selector";
@@ -28,23 +30,45 @@ export class HaIconSelector extends LitElement {
     icon_entity?: string;
   };
 
-  protected render() {
+  private get _stateObj(): HassEntity | undefined {
     const iconEntity = this.context?.icon_entity;
+    return iconEntity ? this.hass.states[iconEntity] : undefined;
+  }
 
-    const stateObj = iconEntity ? this.hass.states[iconEntity] : undefined;
+  private _placeholderTask = new AsyncValueTask(this, {
+    task: ([
+      placeholder,
+      attributeIcon,
+      entities,
+      config,
+      connection,
+      stateObj,
+    ]) => {
+      if (placeholder || attributeIcon || !stateObj) {
+        return initialState;
+      }
+      return entityIcon(entities, config, connection, stateObj);
+    },
+    args: () => {
+      const stateObj = this._stateObj;
+      return [
+        this.selector.icon?.placeholder,
+        stateObj?.attributes.icon,
+        this.hass.entities,
+        this.hass.config,
+        this.hass.connection,
+        stateObj,
+      ] as const;
+    },
+  });
+
+  protected render() {
+    const stateObj = this._stateObj;
 
     const placeholder =
       this.selector.icon?.placeholder ||
       stateObj?.attributes.icon ||
-      (stateObj &&
-        until(
-          entityIcon(
-            this.hass.entities,
-            this.hass.config,
-            this.hass.connection,
-            stateObj
-          )
-        ));
+      (stateObj && this._placeholderTask.value);
 
     return html`
       <ha-icon-picker

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

@@ -84,7 +84,6 @@ export class HaLocationSelector extends LitElement {
       <p>${this.label ? this.label : ""}</p>
       <ha-locations-editor
         class="flex"
-        .hass=${this.hass}
         .helper=${this.helper}
         .locations=${this._location(this.selector, this.value)}
         @location-updated=${this._locationChanged}

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

@@ -91,7 +91,6 @@ export class HaMediaSelector extends LitElement {
         ? nothing
         : html`
             <ha-entity-picker
-              .hass=${this.hass}
               .value=${entityId}
               .label=${this.label ||
               this.hass.localize(

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

@@ -1,5 +1,6 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiClose, mdiConnection, mdiMemory, mdiPencil, mdiUsb } from "@mdi/js";
+import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -405,11 +406,12 @@ export class HaSerialPortSelector extends LitElement {
       }
       let groupItems: SerialPickerItem[] = grouped[type];
       if (searchString) {
+        const fuseIndex = Fuse.createIndex(DEFAULT_SEARCH_KEYS, groupItems);
         groupItems = multiTermSortedSearch(
           groupItems,
           searchString,
-          DEFAULT_SEARCH_KEYS,
-          (item) => item.id
+          (item) => item.id,
+          fuseIndex
         );
       }
       if (!groupItems.length) {

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

@@ -3,15 +3,13 @@ import { customElement, property, query } from "lit/decorators";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { StringSelector } from "../../data/selector";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { ValueChangedEvent } from "../../types";
 import "../ha-textarea";
 import "../input/ha-input";
 import "../input/ha-input-multi";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property() public value?: any;
 
   @property() public name?: string;

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

@@ -23,7 +23,6 @@ export class HaThemeSelector extends LitElement {
   protected render() {
     return html`
       <ha-theme-picker
-        .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}

src/components/ha-service-control.ts

@@ -558,7 +558,6 @@ export class HaServiceControl extends LitElement {
         ></ha-settings-row>`
       : entityId
         ? html`<ha-entity-picker
-            .hass=${this.hass}
             .disabled=${this.disabled}
             .value=${this._value?.data?.entity_id}
             .label=${this.hass.localize(

src/components/ha-service-icon.ts

@@ -1,8 +1,9 @@
 import { consume } from "@lit/context";
+import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { computeDomain } from "../common/entity/compute_domain";
 import { transform } from "../common/decorators/transform";
 import { configContext, connectionContext } from "../data/context";
@@ -34,6 +35,17 @@ export class HaServiceIcon extends LitElement {
   })
   private _connection?: Connection;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([icon, connection, config, service]) => {
+      if (icon || !connection || !config || !service) {
+        return initialState;
+      }
+      return serviceIcon(connection, config, service);
+    },
+    args: () =>
+      [this.icon, this._connection, this._config, this.service] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -47,16 +59,12 @@ export class HaServiceIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(this._connection, this._config, this.service).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
-      }
-    );
-
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

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

@@ -1,8 +1,9 @@
 import { consume } from "@lit/context";
+import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { transform } from "../common/decorators/transform";
 import { configContext, connectionContext } from "../data/context";
 import { serviceSectionIcon } from "../data/icons";
@@ -31,6 +32,23 @@ export class HaServiceSectionIcon extends LitElement {
   })
   private _connection?: Connection;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([icon, connection, config, service, section]) => {
+      if (icon || !connection || !config || !service || !section) {
+        return initialState;
+      }
+      return serviceSectionIcon(connection, config, service, section);
+    },
+    args: () =>
+      [
+        this.icon,
+        this._connection,
+        this._config,
+        this.service,
+        this.section,
+      ] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -44,19 +62,12 @@ export class HaServiceSectionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceSectionIcon(
-      this._connection,
-      this._config,
-      this.service,
-      this.section
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
-      }
-      return this._renderFallback();
-    });
-
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

src/components/ha-state-icon.ts

@@ -1,8 +1,9 @@
 import { consume, type ContextType } from "@lit/context";
+import { initialState } from "@lit/task";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import {
   configContext,
@@ -37,11 +38,47 @@ export class HaStateIcon extends LitElement {
   @consume({ context: entitiesContext, subscribe: true })
   protected _entities?: ContextType<typeof entitiesContext>;
 
-  protected render() {
-    const overrideIcon =
+  private get _overrideIcon(): string | undefined {
+    return (
       this.icon ||
       (this.stateObj && this._entities?.[this.stateObj.entity_id]?.icon) ||
-      this.stateObj?.attributes.icon;
+      this.stateObj?.attributes.icon
+    );
+  }
+
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([
+      overrideIcon,
+      entities,
+      config,
+      connection,
+      stateObj,
+      stateValue,
+    ]) => {
+      if (overrideIcon || !entities || !config || !connection || !stateObj) {
+        return initialState;
+      }
+      return entityIcon(
+        entities,
+        config.config,
+        connection.connection,
+        stateObj,
+        stateValue
+      );
+    },
+    args: () =>
+      [
+        this._overrideIcon,
+        this._entities,
+        this._config,
+        this._connection,
+        this.stateObj,
+        this.stateValue,
+      ] as const,
+  });
+
+  protected render() {
+    const overrideIcon = this._overrideIcon;
     if (overrideIcon) {
       return html`<ha-icon .icon=${overrideIcon}></ha-icon>`;
     }
@@ -51,19 +88,12 @@ export class HaStateIcon extends LitElement {
     if (!this._config || !this._connection || !this._entities) {
       return this._renderFallback();
     }
-    const icon = entityIcon(
-      this._entities,
-      this._config.config,
-      this._connection.connection,
-      this.stateObj,
-      this.stateValue
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
-      }
-      return this._renderFallback();
-    });
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

src/components/ha-target-picker.ts

@@ -1116,7 +1116,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return multiTermSortedSearch(
         items,
         searchTerm,
-        weightedKeys,
         (item) => item.id,
         fuseIndex
       );
@@ -1233,7 +1232,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   <state-badge
                     slot="start"
                     .stateObj=${(item as EntityComboBoxItem).stateObj}
-                    .hass=${this.hass}
                   ></state-badge>
                 `
               : type === "device" && (item as DevicePickerItem).domain

src/components/ha-theme-picker.ts

@@ -1,10 +1,12 @@
+import { consume, type ContextType } from "@lit/context";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import { internationalizationContext, uiContext } from "../data/context";
+import type { ValueChangedEvent } from "../types";
 import "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
@@ -23,7 +25,13 @@ export class HaThemePicker extends LitElement {
   @property({ attribute: "include-default", type: Boolean })
   public includeDefault = false;
 
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  private _ui?: ContextType<typeof uiContext>;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
@@ -56,8 +64,8 @@ export class HaThemePicker extends LitElement {
 
   private _getItems = () =>
     this._getThemeOptions(
-      this.hass?.themes.themes || {},
-      this.hass?.locale.language || "en",
+      this._ui?.themes.themes || {},
+      this._i18n?.locale.language || "en",
       this.includeDefault
     );
 
@@ -70,10 +78,10 @@ export class HaThemePicker extends LitElement {
     return html`
       <ha-generic-picker
         .label=${this.label ??
-        this.hass?.localize("ui.components.theme-picker.theme") ??
+        this._i18n?.localize("ui.components.theme-picker.theme") ??
         "Theme"}
         .placeholder=${this.noThemeLabel ??
-        this.hass?.localize("ui.components.theme-picker.no_theme")}
+        this._i18n?.localize("ui.components.theme-picker.no_theme")}
         .helper=${this.helper}
         .value=${this.value}
         .valueRenderer=${this._valueRenderer}

src/components/ha-theme-settings.ts

@@ -73,7 +73,6 @@ export class HaThemeSettings extends LitElement {
         ${this.showThemePicker
           ? html`
               <ha-theme-picker
-                .hass=${this.hass}
                 .label=${this.labels?.theme}
                 .noThemeLabel=${this.labels?.noTheme}
                 .value=${themeSettings?.theme || undefined}

src/components/ha-timezone-picker.ts

@@ -13,12 +13,40 @@ const SEARCH_KEYS = [
   { name: "secondary", weight: 8 },
 ];
 
-export const getTimezoneOptions = (): PickerComboBoxItem[] =>
-  Object.entries(timezones as Record<string, string>).map(([key, value]) => ({
-    id: key,
-    primary: value,
-    secondary: key,
-  }));
+// google-timezones-json is missing the bare "UTC" and "Etc/UTC" zones, even
+// though both are valid IANA identifiers and common server defaults. Without
+// them a "UTC" configuration shows up as an unknown time zone. Add them back.
+const ADDITIONAL_TIMEZONES: PickerComboBoxItem[] = [
+  { id: "UTC", primary: "(GMT+00:00) UTC", secondary: "UTC" },
+  { id: "Etc/UTC", primary: "(GMT+00:00) UTC", secondary: "Etc/UTC" },
+];
+
+// google-timezones-json also ships an invalid IANA identifier. Correct it so
+// the zone can be selected (the backend rejects the invalid id).
+const TIMEZONE_ID_CORRECTIONS: Record<string, string> = {
+  "Asia/Yuzhno-Sakhalinsk": "Asia/Sakhalin",
+};
+
+export const getTimezoneOptions = (): PickerComboBoxItem[] => {
+  const options: PickerComboBoxItem[] = Object.entries(
+    timezones as Record<string, string>
+  ).map(([key, value]) => {
+    const id = TIMEZONE_ID_CORRECTIONS[key] ?? key;
+    return {
+      id,
+      primary: value,
+      secondary: id,
+    };
+  });
+
+  for (const timezone of ADDITIONAL_TIMEZONES) {
+    if (!options.some((option) => option.id === timezone.id)) {
+      options.push(timezone);
+    }
+  }
+
+  return options;
+};
 
 @customElement("ha-timezone-picker")
 export class HaTimeZonePicker extends LitElement {

src/components/ha-trace-picker.ts

@@ -2,6 +2,7 @@ import {
   mdiAlertCircleOutline,
   mdiCheckCircleOutline,
   mdiChevronDown,
+  mdiCircleOffOutline,
   mdiHelpCircleOutline,
   mdiProgressClock,
   mdiProgressWrench,
@@ -84,6 +85,11 @@ class HaTracePicker extends LitElement {
           "ui.panel.config.automation.trace.picker.debugged"
         );
         item.icon_path = mdiProgressWrench;
+      } else if (trace.not_triggered) {
+        item.secondary = this.hass.localize(
+          "ui.panel.config.automation.trace.picker.not_triggered"
+        );
+        item.icon_path = mdiCircleOffOutline;
       } else if (trace.script_execution === "finished") {
         item.secondary = this.hass.localize(
           "ui.panel.config.automation.trace.picker.finished",

src/components/ha-trigger-icon.ts

@@ -18,10 +18,11 @@ import {
   mdiWebhook,
 } from "@mdi/js";
 import { consume } from "@lit/context";
+import { initialState } from "@lit/task";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import { AsyncValueTask } from "../common/controllers/async-value-task";
 import { computeDomain } from "../common/entity/compute_domain";
 import { transform } from "../common/decorators/transform";
 import { configContext, connectionContext } from "../data/context";
@@ -71,6 +72,17 @@ export class HaTriggerIcon extends LitElement {
   })
   private _connection?: Connection;
 
+  private _iconTask = new AsyncValueTask(this, {
+    task: ([icon, connection, config, trigger]) => {
+      if (icon || !connection || !config || !trigger) {
+        return initialState;
+      }
+      return triggerIcon(connection, config, trigger);
+    },
+    args: () =>
+      [this.icon, this._connection, this._config, this.trigger] as const,
+  });
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -84,16 +96,12 @@ export class HaTriggerIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(this._connection, this._config, this.trigger).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
-      }
-    );
-
-    return html`${until(icon)}`;
+    if (!this._iconTask.resolved) {
+      return nothing;
+    }
+    return this._iconTask.value
+      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
+      : this._renderFallback();
   }
 
   private _renderFallback() {

src/components/ha-vacuum-state.ts

@@ -1,9 +1,12 @@
+import { consume, type ContextType } from "@lit/context";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type { HassEntity } from "home-assistant-js-websocket";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { apiContext } from "../data/context";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-button";
 
 const STATES_INTERCEPTABLE: Record<
@@ -46,7 +49,10 @@ const STATES_INTERCEPTABLE: Record<
 
 @customElement("ha-vacuum-state")
 export class HaVacuumState extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state() @consumeLocalize() private _localize!: LocalizeFunc;
+
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
 
   @property({ attribute: false }) public stateObj!: HassEntity;
 
@@ -68,19 +74,19 @@ export class HaVacuumState extends LitElement {
   }
 
   private _computeInterceptable(
-    state: string,
+    stateString: string,
     supportedFeatures: number | undefined
   ) {
-    return state in STATES_INTERCEPTABLE && supportedFeatures !== 0;
+    return stateString in STATES_INTERCEPTABLE && supportedFeatures !== 0;
   }
 
-  private _computeLabel(state: string, interceptable: boolean) {
+  private _computeLabel(stateString: string, interceptable: boolean) {
     return interceptable
-      ? this.hass.localize(
-          `ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`
+      ? this._localize(
+          `ui.card.vacuum.actions.${STATES_INTERCEPTABLE[stateString].action}`
         )
-      : this.hass.localize(
-          `component.vacuum.entity_component._.state.${state}`
+      : this._localize(
+          `component.vacuum.entity_component._.state.${stateString}`
         );
   }
 
@@ -88,7 +94,7 @@ export class HaVacuumState extends LitElement {
     ev.stopPropagation();
     const stateObj = this.stateObj;
     const service = STATES_INTERCEPTABLE[stateObj.state].service;
-    await this.hass.callService("vacuum", service, {
+    await this._api.callService("vacuum", service, {
       entity_id: stateObj.entity_id,
     });
   }

src/components/ha-water_heater-state.ts

@@ -1,14 +1,39 @@
-import { customElement, property } from "lit/decorators";
+import { consume } from "@lit/context";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
-import type { HassEntity } from "home-assistant-js-websocket";
+import { customElement, property, state } from "lit/decorators";
+import { transform } from "../common/decorators/transform";
 import { formatNumber } from "../common/number/format_number";
+import {
+  configContext,
+  formattersContext,
+  internationalizationContext,
+} from "../data/context";
+import type { FrontendLocaleData } from "../data/translation";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import type {
+  HomeAssistantConfig,
+  HomeAssistantFormatters,
+  HomeAssistantInternationalization,
+} from "../types";
 
 @customElement("ha-water_heater-state")
 export class HaWaterHeaterState extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: formattersContext, subscribe: true })
+  private _formatters?: HomeAssistantFormatters;
+
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale?: FrontendLocaleData;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _hassConfig?: HomeAssistantConfig;
 
   @property({ attribute: false }) public stateObj!: HassEntity;
 
@@ -16,17 +41,16 @@ export class HaWaterHeaterState extends LitElement {
     return html`
       <div class="target">
         <span class="state-label label">
-          ${this.hass.formatEntityState(this.stateObj)}
+          ${this._formatters?.formatEntityState(this.stateObj)}
         </span>
-        <span class="label"
-          >${this._computeTarget(this.hass, this.stateObj)}</span
-        >
+        <span class="label">${this._computeTarget()}</span>
       </div>
     `;
   }
 
-  private _computeTarget(hass: HomeAssistant, stateObj: HassEntity) {
-    if (!hass || !stateObj) return null;
+  private _computeTarget() {
+    if (!this._locale || !this._hassConfig || !this.stateObj) return null;
+    const stateObj = this.stateObj;
     // We're using "!= null" on purpose so that we match both null and undefined.
 
     if (
@@ -35,17 +59,17 @@ export class HaWaterHeaterState extends LitElement {
     ) {
       return `${formatNumber(
         stateObj.attributes.target_temp_low,
-        this.hass.locale
+        this._locale
       )} – ${formatNumber(
         stateObj.attributes.target_temp_high,
-        this.hass.locale
-      )} ${hass.config.unit_system.temperature}`;
+        this._locale
+      )} ${this._hassConfig.config.unit_system.temperature}`;
     }
     if (stateObj.attributes.temperature != null) {
       return `${formatNumber(
         stateObj.attributes.temperature,
-        this.hass.locale
-      )} ${hass.config.unit_system.temperature}`;
+        this._locale
+      )} ${this._hassConfig.config.unit_system.temperature}`;
     }
 
     return "";

src/components/input/ha-input-search.ts

@@ -41,7 +41,11 @@ export class HaInputSearch extends HaInput {
     ...HaInput.styles,
     css`
       :host([appearance="outlined"]) wa-input.no-label::part(base) {
-        height: 40px;
+        height: var(--ha-input-search-height, 40px);
+        border-radius: var(
+          --ha-input-search-border-radius,
+          var(--ha-border-radius-md)
+        );
       }
     `,
   ];

src/components/map/ha-locations-editor.ts

@@ -13,7 +13,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
-import type { HomeAssistant, ThemeMode } from "../../types";
+import type { ThemeMode } from "../../types";
 import "../ha-input-helper-text";
 import "./ha-map";
 import type { HaMap } from "./ha-map";
@@ -45,8 +45,6 @@ export interface MarkerLocation {
 
 @customElement("ha-locations-editor")
 export class HaLocationsEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public locations?: MarkerLocation[];
 
   @property() public helper?: string;

src/components/media-player/dialog-join-media-players.ts

@@ -100,7 +100,6 @@ class DialogJoinMediaPlayers extends LitElement {
           : nothing}
         <div class="content">
           <ha-media-player-toggle
-            .hass=${this.hass}
             .entityId=${entityId}
             checked
             disabled
@@ -108,7 +107,6 @@ class DialogJoinMediaPlayers extends LitElement {
           ${this._mediaPlayerEntities(this.hass.entities).map(
             (entity) =>
               html`<ha-media-player-toggle
-                .hass=${this.hass}
                 .entityId=${entity.entity_id}
                 .checked=${this._selectedEntities.includes(entity.entity_id)}
                 @change=${this._handleSelectedChange}