Hide "for" on state condition when matching an attribute

The legacy state condition measures the `for` duration against
`last_changed`, which only updates on state changes, not attribute
changes. So `for` together with `attribute` is unreliable and core is
moving to reject it. Omit the `for` field when an attribute is selected,
drop any lingering duration value, and explain why via a helper.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.github/workflows/ci.yaml

@@ -105,8 +105,6 @@ jobs:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
-      - name: Check entrypoint bundle size budget
-        run: yarn run check-bundlesize
       - name: Upload frontend build
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:

.github/workflows/pull-request-standards.yaml

@@ -1,190 +0,0 @@
-name: Pull request standards
-
-on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers] -- safe: reads PR metadata from event payload only, no PR code checkout
-    types:
-      - opened
-      - edited
-      - reopened
-      - ready_for_review
-    branches:
-      - dev
-
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
-  cancel-in-progress: true
-
-jobs:
-  check:
-    name: Check pull request follows contribution standards
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write # To label and comment on pull requests
-    steps:
-      - name: Check pull request standards
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          script: |
-            const pr = context.payload.pull_request;
-
-            // Exempt bots (Copilot agent, dependabot), drafts, and maintainers.
-            if (pr.user.type === "Bot") {
-              core.info(`Skipping bot author: ${pr.user.login}`);
-              return;
-            }
-            if (pr.draft) {
-              core.info("Skipping draft pull request");
-              return;
-            }
-            try {
-              await github.rest.orgs.checkMembershipForUser({
-                org: "home-assistant",
-                username: pr.user.login,
-              });
-              core.info(`Skipping organization member: ${pr.user.login}`);
-              return;
-            } catch (error) {
-              core.info(`${pr.user.login} is not an organization member, checking standards`);
-            }
-
-            const label = "Needs Template";
-            const marker = "<!-- pr-standards-check -->";
-            const { owner, repo } = context.repo;
-            const issue_number = pr.number;
-
-            const body = (pr.body || "").replace(/<!--[\s\S]*?-->/g, "");
-            const normalized = body.toLowerCase();
-
-            // Ignore 404s from mutations that race manual edits or cancelled runs.
-            const ignoreMissing = async (fn) => {
-              try {
-                await fn();
-              } catch (error) {
-                if (error.status === 404) {
-                  core.info("Target already removed, nothing to do");
-                  return;
-                }
-                throw error;
-              }
-            };
-
-            // Hide/restore our comment via GraphQL (REST cannot minimize).
-            const setMinimized = async (subjectId, minimized) => {
-              const mutation = minimized
-                ? `mutation($id: ID!) {
-                     minimizeComment(input: { subjectId: $id, classifier: RESOLVED }) {
-                       clientMutationId
-                     }
-                   }`
-                : `mutation($id: ID!) {
-                     unminimizeComment(input: { subjectId: $id }) {
-                       clientMutationId
-                     }
-                   }`;
-              try {
-                await github.graphql(mutation, { id: subjectId });
-              } catch (error) {
-                core.info(
-                  `Could not ${minimized ? "minimize" : "restore"} comment: ${error.message}`
-                );
-              }
-            };
-
-            // Content of a "## <name>" section, or null when the heading is absent.
-            const section = (name) => {
-              const match = body.match(
-                new RegExp(`##\\s${name}([\\s\\S]*?)(?=\\n##\\s|$)`, "i")
-              );
-              return match ? match[1] : null;
-            };
-
-            const problems = [];
-
-            const requiredHeadings = [
-              "## proposed change",
-              "## type of change",
-              "## checklist",
-            ];
-            if (requiredHeadings.some((h) => !normalized.includes(h))) {
-              problems.push(
-                "Use the pull request template without removing its sections."
-              );
-            }
-
-            const typeOfChange = section("type of change");
-            if (typeOfChange !== null) {
-              const ticked = (typeOfChange.match(/-\s*\[[xX]\]/g) || []).length;
-              if (ticked !== 1) {
-                problems.push(
-                  'Select exactly one option under "Type of change".'
-                );
-              }
-            }
-
-            const proposedChange = section("proposed change");
-            if (proposedChange !== null && proposedChange.trim().length === 0) {
-              problems.push('Describe your changes under "Proposed change".');
-            }
-
-            const isValid = problems.length === 0;
-
-            const comments = await github.paginate(
-              github.rest.issues.listComments,
-              { owner, repo, issue_number, per_page: 100 }
-            );
-            const existing = comments.find((c) => c.body.includes(marker));
-            const hasLabel = pr.labels.some((l) => l.name === label);
-
-            if (isValid) {
-              core.info("Pull request standards met");
-
-              if (hasLabel) {
-                await ignoreMissing(() =>
-                  github.rest.issues.removeLabel({
-                    owner, repo, issue_number, name: label,
-                  })
-                );
-              }
-              if (existing) {
-                await setMinimized(existing.node_id, true);
-              }
-              return;
-            }
-
-            core.info(`Pull request standards not met:\n- ${problems.join("\n- ")}`);
-
-            if (!hasLabel) {
-              await github.rest.issues.addLabels({
-                owner, repo, issue_number, labels: [label],
-              });
-            }
-
-            const message =
-              `${marker}\n` +
-              `Hey @${pr.user.login}!\n\n` +
-              `Thank you for your contribution! To help reviewers, please update ` +
-              `this pull request to follow our pull request standards:\n\n` +
-              problems.map((p) => `- ${p}`).join("\n") +
-              `\n\n` +
-              `Please complete the ` +
-              `[PR template](https://github.com/home-assistant/frontend/blob/dev/.github/PULL_REQUEST_TEMPLATE.md?plain=1) ` +
-              `and see the [developer docs](https://developers.home-assistant.io/docs/review-process) ` +
-              `for more on creating a great pull request (see point 6).`;
-
-            if (existing) {
-              await github.rest.issues.updateComment({
-                owner, repo, comment_id: existing.id, body: message,
-              });
-              await setMinimized(existing.node_id, false);
-            } else {
-              await github.rest.issues.createComment({
-                owner, repo, issue_number, body: message,
-              });
-            }
-
-            // Fail this check so it can block the PR from being merged
-            core.setFailed(
-              `Pull request standards not met:\n- ${problems.join("\n- ")}`
-            );

.nvmrc

@@ -1 +1 @@
-24.17.0
+24.16.0

.yarnrc.yml

@@ -13,4 +13,4 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 3d
 
-yarnPath: .yarn/releases/yarn-4.17.0.cjs
+yarnPath: .yarn/releases/yarn-4.16.0.cjs

build-scripts/bundle-budget.json

@@ -1,15 +0,0 @@
-{
-  "_comment": "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. Enforced by build-scripts/check-bundle-size.cjs in CI. Re-seed after an intentional change with `--update --headroom=<percent>`.",
-  "frontend-modern": {
-    "app": 561513,
-    "core": 54473,
-    "authorize": 544272,
-    "onboarding": 647136
-  },
-  "frontend-legacy": {
-    "app": 790323,
-    "core": 237208,
-    "authorize": 765464,
-    "onboarding": 918679
-  }
-}

build-scripts/check-bundle-size.cjs

@@ -1,155 +0,0 @@
-/* global require, process, __dirname */
-// Enforce a strict size budget on the initial JS of the most critical
-// entrypoints (`app` and `core`). These two are downloaded on every cold load
-// before anything interactive can happen, so unintended growth here hurts
-// first-load performance directly.
-//
-// In production rspack does not split initial chunks (splitChunks only operates
-// on `!chunk.canBeInitial()`), so each entrypoint resolves to a single initial
-// JS asset. We read the per-build stats written by StatsWriterPlugin and compare
-// the entrypoint's initial JS size against a committed budget.
-//
-// Usage:
-//   node build-scripts/check-bundle-size.cjs            # enforce, exit 1 on regression
-//   node build-scripts/check-bundle-size.cjs --update    # rewrite budgets from current sizes
-//   node build-scripts/check-bundle-size.cjs --update --headroom=3   # current + 3% headroom
-
-const fs = require("fs");
-const path = require("path");
-const paths = require("./paths.cjs");
-
-// Entrypoints whose initial JS we hold to a strict budget. These are all
-// downloaded on a user-facing cold load before anything interactive can happen:
-// `app`/`core` for the main app, plus the standalone `authorize` and
-// `onboarding` pages. `custom-panel` is intentionally excluded (only loaded
-// when a custom panel is opened).
-const TRACKED_ENTRYPOINTS = ["app", "core", "authorize", "onboarding"];
-
-// App build stats files, as written by StatsWriterPlugin (`${name}.json`).
-const BUILDS = ["frontend-modern", "frontend-legacy"];
-
-const BUDGET_FILE = path.join(__dirname, "bundle-budget.json");
-const STATS_DIR = path.join(paths.build_dir, "stats");
-
-const readStats = (build) => {
-  const file = path.join(STATS_DIR, `${build}.json`);
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `Missing stats file: ${path.relative(process.cwd(), file)}.\n` +
-        `Run a production build first (e.g. \`gulp build-app\`), then re-run this check.`
-    );
-  }
-  return JSON.parse(fs.readFileSync(file, "utf8"));
-};
-
-// Initial JS bytes for an entrypoint = sum of the .js asset sizes of its initial
-// entry chunk(s). Sizes are raw (uncompressed) bytes, matching the stats output.
-const entrypointInitialJS = (stats, entrypoint) => {
-  const assetSize = new Map(stats.assets.map((a) => [a.name, a.size]));
-  let total = 0;
-  let found = false;
-  for (const chunk of stats.chunks) {
-    if (!chunk.entry || !chunk.initial) {
-      continue;
-    }
-    if (!(chunk.names || []).includes(entrypoint)) {
-      continue;
-    }
-    found = true;
-    for (const file of chunk.files || []) {
-      if (file.endsWith(".js") && assetSize.has(file)) {
-        total += assetSize.get(file);
-      }
-    }
-  }
-  if (!found) {
-    throw new Error(`Entrypoint "${entrypoint}" not found in bundle stats.`);
-  }
-  return total;
-};
-
-const kib = (bytes) => `${(bytes / 1024).toFixed(1)} KiB`;
-
-const main = () => {
-  const update = process.argv.includes("--update");
-  const headroomArg = process.argv.find((a) => a.startsWith("--headroom="));
-  const headroom = headroomArg ? Number(headroomArg.split("=")[1]) : 0;
-
-  const current = {};
-  for (const build of BUILDS) {
-    const stats = readStats(build);
-    current[build] = {};
-    for (const entrypoint of TRACKED_ENTRYPOINTS) {
-      current[build][entrypoint] = entrypointInitialJS(stats, entrypoint);
-    }
-  }
-
-  if (update) {
-    const budget = { _comment: BUDGET_COMMENT };
-    for (const build of BUILDS) {
-      budget[build] = {};
-      for (const entrypoint of TRACKED_ENTRYPOINTS) {
-        budget[build][entrypoint] = Math.ceil(
-          current[build][entrypoint] * (1 + headroom / 100)
-        );
-      }
-    }
-    fs.writeFileSync(BUDGET_FILE, `${JSON.stringify(budget, null, 2)}\n`);
-    console.log(
-      `Updated ${path.relative(process.cwd(), BUDGET_FILE)} from current sizes` +
-        (headroom ? ` (+${headroom}% headroom).` : ".")
-    );
-    return;
-  }
-
-  if (!fs.existsSync(BUDGET_FILE)) {
-    throw new Error(
-      `Missing budget file ${path.relative(process.cwd(), BUDGET_FILE)}.\n` +
-        `Seed it from a production build with: node build-scripts/check-bundle-size.cjs --update --headroom=3`
-    );
-  }
-  const budget = JSON.parse(fs.readFileSync(BUDGET_FILE, "utf8"));
-
-  let failed = false;
-  console.log("Initial JS budget (entry chunks, raw bytes):\n");
-  for (const build of BUILDS) {
-    for (const entrypoint of TRACKED_ENTRYPOINTS) {
-      const actual = current[build][entrypoint];
-      const limit = budget[build] && budget[build][entrypoint];
-      if (typeof limit !== "number") {
-        failed = true;
-        console.log(
-          `  ✗ ${build} / ${entrypoint}: no budget set (current ${kib(actual)})`
-        );
-        continue;
-      }
-      const ok = actual <= limit;
-      const delta = (((actual - limit) / limit) * 100).toFixed(1);
-      console.log(
-        `  ${ok ? "✓" : "✗"} ${build} / ${entrypoint}: ` +
-          `${kib(actual)} / ${kib(limit)}${ok ? "" : ` (+${delta}% over budget)`}`
-      );
-      if (!ok) {
-        failed = true;
-      }
-    }
-  }
-
-  if (failed) {
-    console.error(
-      "\nInitial JS budget exceeded for a critical entrypoint.\n" +
-        "Investigate what was pulled into the entry chunk (a static import that should be lazy?).\n" +
-        "If the growth is intentional, re-seed the budget:\n" +
-        "  node build-scripts/check-bundle-size.cjs --update --headroom=3"
-    );
-    process.exit(1);
-  }
-  console.log("\nAll tracked entrypoints within budget.");
-};
-
-const BUDGET_COMMENT =
-  "Initial JS budget (raw/uncompressed bytes) for the cold-load critical entrypoints. " +
-  "Enforced by build-scripts/check-bundle-size.cjs in CI. " +
-  "Re-seed after an intentional change with `--update --headroom=<percent>`.";
-
-main();

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

@@ -1,75 +0,0 @@
-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,33 +24,6 @@ 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,20 +2,17 @@
 
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, queryAll, state } from "lit/decorators";
+import { customElement, property, 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, notTriggeredTrace];
+const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 
 @customElement("demo-automation-trace")
 export class DemoAutomationTrace extends LitElement {
@@ -23,25 +20,18 @@ 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) => {
-        const graph = this._graphs?.[idx];
-        const selectedPath = this._selected[idx];
-        const selectedNode = selectedPath
-          ? graph?.renderedNodes[selectedPath]
-          : undefined;
-        return html`
+      ${traces.map(
+        (trace, idx) => html`
           <ha-card .header=${trace.trace.config.alias}>
             <div class="card-content">
               <hat-script-graph
                 .trace=${trace.trace}
-                .selected=${selectedPath}
+                .selected=${this._selected[idx]}
                 @graph-node-selected=${this._handleGraphNodeSelected}
                 .sampleIdx=${idx}
               ></hat-script-graph>
@@ -50,25 +40,15 @@ export class DemoAutomationTrace extends LitElement {
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}
-                .selectedPath=${selectedPath}
+                .selectedPath=${this._selected[idx]}
                 @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

@@ -1,5 +1,4 @@
-import { ContextProvider } from "@lit/context";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
@@ -15,11 +14,6 @@ import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import {
-  configContext,
-  internationalizationContext,
-} from "../../../../src/data/context";
-import { updateHassGroups } from "../../../../src/data/context/updateContext";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
@@ -502,10 +496,6 @@ const SCHEMAS: {
                   },
                 },
               },
-              password: {
-                label: "Password",
-                selector: { text: { type: "password" } },
-              },
             },
           },
         },
@@ -528,17 +518,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
 
   private data = SCHEMAS.map(() => ({}));
 
-  // The date/datetime selectors and the date-picker dialog consume these
-  // contexts (provided by the root element in the real app). Provide them here
-  // so they work in the gallery.
-  private _i18nProvider = new ContextProvider(this, {
-    context: internationalizationContext,
-  });
-
-  private _configProvider = new ContextProvider(this, {
-    context: configContext,
-  });
-
   constructor() {
     super();
     const hass = provideHass(this);
@@ -560,16 +539,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     el.hass = this.hass;
   }
 
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("hass") && this.hass) {
-      this._i18nProvider.setValue(
-        updateHassGroups.internationalization(this.hass)
-      );
-      this._configProvider.setValue(updateHassGroups.config(this.hass));
-    }
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this.addEventListener("show-dialog", this._dialogManager);

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

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

package.json

@@ -22,8 +22,7 @@
     "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",
-    "check-bundlesize": "node build-scripts/check-bundle-size.cjs"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -37,26 +36,26 @@
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
     "@codemirror/lint": "6.9.7",
-    "@codemirror/search": "6.7.1",
+    "@codemirror/search": "6.7.0",
     "@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.15",
+    "@formatjs/intl-durationformat": "0.10.14",
     "@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.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",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/luxon3": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
     "@home-assistant/webawesome": "3.7.0-ha.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
@@ -64,7 +63,6 @@
     "@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",
@@ -73,8 +71,8 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.2.1",
-    "@tsparticles/preset-links": "4.2.1",
+    "@tsparticles/engine": "4.1.3",
+    "@tsparticles/preset-links": "4.1.3",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -129,7 +127,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.29.7",
-    "@babel/helper-define-polyfill-provider": "1.0.0",
+    "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.7",
     "@babel/preset-env": "7.29.7",
     "@bundle-stats/plugin-webpack-filter": "4.22.2",
@@ -139,7 +137,7 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.15",
+    "@rsdoctor/rspack-plugin": "1.5.13",
     "@rspack/core": "2.0.8",
     "@rspack/dev-server": "2.0.3",
     "@types/chromecast-caf-receiver": "6.0.26",
@@ -156,7 +154,7 @@
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@vitest/coverage-v8": "4.1.9",
+    "@vitest/coverage-v8": "4.1.8",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
@@ -197,9 +195,9 @@
     "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.61.1",
+    "typescript-eslint": "8.61.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.9",
+    "vitest": "4.1.8",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -209,14 +207,14 @@
     "lit-html": "3.3.3",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
-    "@fullcalendar/daygrid": "6.1.21",
+    "@fullcalendar/daygrid": "6.1.20",
     "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",
     "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.17.0",
+  "packageManager": "yarn@4.16.0",
   "volta": {
-    "node": "24.17.0"
+    "node": "24.16.0"
   }
 }

src/common/config/can_show_page.ts

@@ -4,8 +4,7 @@ import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
-  (isCore(page) || isLoadedIntegration(hass, page)) &&
-  (!page.filter || page.filter(hass));
+  isCore(page) || isLoadedIntegration(hass, page);
 
 export const isLoadedIntegration = (
   hass: HomeAssistant,

src/common/const.ts

@@ -110,25 +110,6 @@ export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
   "media_player",
 ]);
 
-/** Domains that use a timestamp for state. */
-export const TIMESTAMP_STATE_DOMAINS = new Set([
-  "ai_task",
-  "button",
-  "conversation",
-  "event",
-  "image",
-  "infrared",
-  "input_button",
-  "notify",
-  "radio_frequency",
-  "scene",
-  "stt",
-  "tag",
-  "tts",
-  "wake_word",
-  "datetime",
-]);
-
 /** Temperature units. */
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";

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

@@ -1,29 +0,0 @@
-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/datetime/relative_time.ts

@@ -3,24 +3,23 @@ import type { FrontendLocaleData } from "../../data/translation";
 import { selectUnit } from "../util/select-unit";
 
 const formatRelTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, style: Intl.RelativeTimeFormatStyle) =>
-    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto", style })
+  (locale: FrontendLocaleData) =>
+    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
 );
 
 export const relativeTime = (
   from: Date,
   locale: FrontendLocaleData,
   to?: Date,
-  includeTense = true,
-  style: Intl.RelativeTimeFormatStyle = "long"
+  includeTense = true
 ): string => {
   const diff = selectUnit(from, to, locale);
   if (includeTense) {
-    return formatRelTimeMem(locale, style).format(diff.value, diff.unit);
+    return formatRelTimeMem(locale).format(diff.value, diff.unit);
   }
   return Intl.NumberFormat(locale.language, {
     style: "unit",
     unit: diff.unit,
-    unitDisplay: style,
+    unitDisplay: "long",
   }).format(Math.abs(diff.value));
 };

src/common/entity/compute_attribute_display.ts

@@ -60,17 +60,6 @@ export const computeAttributeValueToParts = (
     return [{ type: "value", value: localize("state.default.unknown") }];
   }
 
-  // Device class attribute, return the integration's translated name
-  if (attribute === "device_class" && typeof attributeValue === "string") {
-    const domain = computeStateDomain(stateObj);
-    const deviceClassName = localize(
-      `component.${domain}.entity_component.${attributeValue}.name`
-    );
-    if (deviceClassName) {
-      return [{ type: "value", value: deviceClassName }];
-    }
-  }
-
   // Number value, return formatted number
   if (typeof attributeValue === "number") {
     const domain = computeStateDomain(stateObj);

src/common/entity/compute_entity_unit_display.ts

@@ -1,7 +1,6 @@
 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;
@@ -41,5 +40,5 @@ export const computeEntityUnitDisplay = (
     ? hass.formatEntityAttributeValueToParts(stateObj, config.attribute)
     : hass.formatEntityStateToParts(stateObj);
 
-  return unitFromParts(parts);
+  return parts.find((part) => part.type === "unit")?.value ?? "";
 };

src/common/entity/compute_state_display.ts

@@ -21,11 +21,29 @@ import {
   isNumericSensorDeviceClass,
   SENSOR_TIMESTAMP_DEVICE_CLASSES,
 } from "../../data/sensor";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";
 
 // Domains whose state is a timezone-agnostic date and/or time string.
 const DATE_TIME_DOMAINS = new Set(["date", "input_datetime", "time"]);
 
+// Domains whose state is a timestamp.
+const TIMESTAMP_DOMAINS = new Set([
+  "ai_task",
+  "button",
+  "conversation",
+  "event",
+  "image",
+  "infrared",
+  "input_button",
+  "notify",
+  "radio_frequency",
+  "scene",
+  "stt",
+  "tag",
+  "tts",
+  "wake_word",
+  "datetime",
+]);
+
 // Maps Intl.NumberFormat part types to ValuePart types for monetary states.
 const MONETARY_TYPE_MAP: Record<string, ValuePart["type"]> = {
   integer: "value",
@@ -160,8 +178,7 @@ const computeStateToPartsFromEntityAttributes = (
           const type = MONETARY_TYPE_MAP[part.type];
           if (!type) continue;
           const last = valueParts[valueParts.length - 1];
-          // Merge consecutive value parts so the number stays a single part
-          // (e.g. "-" + "12" + "." + "00" → "-12.00")
+          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
           if (type === "value" && last?.type === "value") {
             last.value += part.value;
           } else {
@@ -256,7 +273,7 @@ const computeStateToPartsFromEntityAttributes = (
 
   // state is a timestamp
   if (
-    TIMESTAMP_STATE_DOMAINS.has(domain) ||
+    TIMESTAMP_DOMAINS.has(domain) ||
     (domain === "sensor" &&
       SENSOR_TIMESTAMP_DEVICE_CLASSES.includes(attributes.device_class))
   ) {

src/common/entity/feature_class_names.ts

@@ -0,0 +1,23 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { supportsFeature } from "./supports-feature";
+
+export type FeatureClassNames<T extends number = number> = Partial<
+  Record<T, string>
+>;
+
+// Expects classNames to be an object mapping feature-bit -> className
+export const featureClassNames = (
+  stateObj: HassEntity,
+  classNames: FeatureClassNames
+) => {
+  if (!stateObj || !stateObj.attributes.supported_features) {
+    return "";
+  }
+
+  return Object.keys(classNames)
+    .map((feature) =>
+      supportsFeature(stateObj, Number(feature)) ? classNames[feature] : ""
+    )
+    .filter((attr) => attr !== "")
+    .join(" ");
+};

src/common/entity/get_domain_features.ts

@@ -1,56 +0,0 @@
-import { AITaskEntityFeature } from "../../data/ai_task";
-import { AlarmControlPanelEntityFeature } from "../../data/alarm_control_panel";
-import { AssistSatelliteEntityFeature } from "../../data/assist_satellite";
-import { CalendarEntityFeature } from "../../data/calendar";
-import { CameraEntityFeature } from "../../data/camera";
-import { ClimateEntityFeature } from "../../data/climate";
-import { ConversationEntityFeature } from "../../data/conversation";
-import { CoverEntityFeature } from "../../data/cover";
-import { FanEntityFeature } from "../../data/fan";
-import { HumidifierEntityFeature } from "../../data/humidifier";
-import { LawnMowerEntityFeature } from "../../data/lawn_mower";
-import { LightEntityFeature } from "../../data/light";
-import { LockEntityFeature } from "../../data/lock";
-import { MediaPlayerEntityFeature } from "../../data/media-player";
-import { NotifyEntityFeature } from "../../data/notify";
-import { RemoteEntityFeature } from "../../data/remote";
-import { SirenEntityFeature } from "../../data/siren";
-import { TodoListEntityFeature } from "../../data/todo";
-import { UpdateEntityFeature } from "../../data/update";
-import { VacuumEntityFeature } from "../../data/vacuum";
-import { ValveEntityFeature } from "../../data/valve";
-import { WaterHeaterEntityFeature } from "../../data/water_heater";
-import { WeatherEntityFeature } from "../../data/weather";
-
-export type FeatureEnum = Record<string | number, string | number>;
-
-const DOMAIN_ENUMS = {
-  ai_task: AITaskEntityFeature,
-  alarm_control_panel: AlarmControlPanelEntityFeature,
-  assist_satellite: AssistSatelliteEntityFeature,
-  calendar: CalendarEntityFeature,
-  camera: CameraEntityFeature,
-  climate: ClimateEntityFeature,
-  conversation: ConversationEntityFeature,
-  cover: CoverEntityFeature,
-  fan: FanEntityFeature,
-  humidifier: HumidifierEntityFeature,
-  lawn_mower: LawnMowerEntityFeature,
-  light: LightEntityFeature,
-  lock: LockEntityFeature,
-  media_player: MediaPlayerEntityFeature,
-  notify: NotifyEntityFeature,
-  remote: RemoteEntityFeature,
-  siren: SirenEntityFeature,
-  todo: TodoListEntityFeature,
-  update: UpdateEntityFeature,
-  vacuum: VacuumEntityFeature,
-  valve: ValveEntityFeature,
-  water_heater: WaterHeaterEntityFeature,
-  weather: WeatherEntityFeature,
-};
-
-export function getFeatures(domain: string): FeatureEnum | undefined {
-  const enumObj = DOMAIN_ENUMS[domain] as FeatureEnum;
-  return enumObj;
-}

src/common/entity/get_states.ts

@@ -22,13 +22,16 @@ export const FIXED_DOMAIN_STATES = {
   assist_satellite: ["idle", "listening", "responding", "processing"],
   automation: ["on", "off"],
   binary_sensor: ["on", "off"],
+  button: [],
   calendar: ["on", "off"],
   camera: ["idle", "recording", "streaming"],
   cover: ["closed", "closing", "open", "opening"],
   device_tracker: ["home", "not_home"],
   fan: ["on", "off"],
   humidifier: ["on", "off"],
+  infrared: [],
   input_boolean: ["on", "off"],
+  input_button: [],
   lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
   light: ["on", "off"],
   lock: [
@@ -53,6 +56,7 @@ export const FIXED_DOMAIN_STATES = {
   plant: ["ok", "problem"],
   radio_frequency: [],
   remote: ["on", "off"],
+  scene: [],
   schedule: ["on", "off"],
   script: ["on", "off"],
   siren: ["on", "off"],
@@ -286,81 +290,6 @@ export const getStatesDomain = (
   return result;
 };
 
-// Maps a value attribute (or the main state, keyed `_`) to the attribute listing
-// its options. Naming is irregular per domain, so it's mapped explicitly.
-export const DOMAIN_OPTIONS_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = {
-  climate: {
-    _: "hvac_modes",
-    fan_mode: "fan_modes",
-    preset_mode: "preset_modes",
-    swing_mode: "swing_modes",
-    swing_horizontal_mode: "swing_horizontal_modes",
-  },
-  event: {
-    event_type: "event_types",
-  },
-  fan: {
-    preset_mode: "preset_modes",
-  },
-  humidifier: {
-    mode: "available_modes",
-  },
-  input_select: {
-    _: "options",
-  },
-  select: {
-    _: "options",
-  },
-  light: {
-    effect: "effect_list",
-    color_mode: "supported_color_modes",
-  },
-  media_player: {
-    sound_mode: "sound_mode_list",
-    source: "source_list",
-  },
-  remote: {
-    current_activity: "activity_list",
-  },
-  sensor: {
-    _: "options",
-  },
-  vacuum: {
-    fan_speed: "fan_speed_list",
-  },
-  water_heater: {
-    _: "operation_list",
-    operation_mode: "operation_list",
-  },
-};
-
-const DOMAIN_VALUE_ATTRIBUTES: Record<
-  string,
-  Record<string, string>
-> = Object.fromEntries(
-  Object.entries(DOMAIN_OPTIONS_ATTRIBUTES).map(([domain, mapping]) => [
-    domain,
-    Object.fromEntries(
-      Object.entries(mapping).map(([value, list]) => [list, value])
-    ),
-  ])
-);
-
-// value attribute (or main state) → its options-list attribute
-export const getOptionsAttribute = (
-  domain: string,
-  attribute?: string
-): string | undefined => DOMAIN_OPTIONS_ATTRIBUTES[domain]?.[attribute ?? "_"];
-
-// options-list attribute → its value attribute (`_` = main state)
-export const getValueAttribute = (
-  domain: string,
-  optionsAttribute: string
-): string | undefined => DOMAIN_VALUE_ATTRIBUTES[domain]?.[optionsAttribute];
-
 export const getStates = (
   hass: HomeAssistant,
   state: HassEntity,
@@ -373,15 +302,78 @@ export const getStates = (
   result.push(...getStatesDomain(hass, domain, attribute));
 
   // Dynamic values based on the entities
-  const optionsAttribute = getOptionsAttribute(domain, attribute);
-  if (optionsAttribute) {
-    const options = state.attributes[optionsAttribute];
-    // Sensors only expose their options when their device class is `enum`.
-    const enumSensor =
-      domain !== "sensor" || state.attributes.device_class === "enum";
-    if (enumSensor && Array.isArray(options)) {
-      result.push(...options);
-    }
+  switch (domain) {
+    case "climate":
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      } else if (attribute === "swing_horizontal_mode") {
+        result.push(...state.attributes.swing_horizontal_modes);
+      }
+      break;
+    case "event":
+      if (attribute === "event_type") {
+        result.push(...state.attributes.event_types);
+      }
+      break;
+    case "fan":
+      if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      }
+      break;
+    case "humidifier":
+      if (attribute === "mode") {
+        result.push(...state.attributes.available_modes);
+      }
+      break;
+    case "input_select":
+    case "select":
+      if (!attribute) {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "light":
+      if (attribute === "effect" && state.attributes.effect_list) {
+        result.push(...state.attributes.effect_list);
+      } else if (
+        attribute === "color_mode" &&
+        state.attributes.supported_color_modes
+      ) {
+        result.push(...state.attributes.supported_color_modes);
+      }
+      break;
+    case "media_player":
+      if (attribute === "sound_mode") {
+        result.push(...state.attributes.sound_mode_list);
+      } else if (attribute === "source") {
+        result.push(...state.attributes.source_list);
+      }
+      break;
+    case "remote":
+      if (attribute === "current_activity") {
+        result.push(...state.attributes.activity_list);
+      }
+      break;
+    case "sensor":
+      if (!attribute && state.attributes.device_class === "enum") {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "vacuum":
+      if (attribute === "fan_speed") {
+        result.push(...state.attributes.fan_speed_list);
+      }
+      break;
+    case "water_heater":
+      if (!attribute || attribute === "operation_mode") {
+        result.push(...state.attributes.operation_list);
+      }
+      break;
   }
 
   return [...new Set(result)];

src/common/entity/state_active.ts

@@ -1,13 +1,21 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { OFF, UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";
-import { TIMESTAMP_STATE_DOMAINS } from "../const";
 
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
 
-  if (TIMESTAMP_STATE_DOMAINS.has(domain)) {
+  if (
+    [
+      "button",
+      "event",
+      "infrared",
+      "input_button",
+      "radio_frequency",
+      "scene",
+    ].includes(domain)
+  ) {
     return compareState !== UNAVAILABLE;
   }
 

src/common/entity/value_parts.ts

@@ -1,29 +0,0 @@
-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/translations/localize.ts

@@ -17,6 +17,8 @@ export type LocalizeKeys =
   | `ui.common.${string}`
   | `ui.components.calendar.event.rrule.${string}`
   | `ui.components.selectors.file.${string}`
+  | `ui.components.logbook.messages.detected_device_classes.${string}`
+  | `ui.components.logbook.messages.cleared_device_classes.${string}`
   | `ui.dialogs.entity_registry.editor.${string}`
   | `ui.dialogs.more_info_control.lawn_mower.${string}`
   | `ui.dialogs.more_info_control.vacuum.${string}`

src/common/util/strip-defaults.ts

@@ -1,26 +0,0 @@
-/**
- * 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/common/util/time-cache-entity-promise-func.ts

@@ -4,10 +4,10 @@ type ResultCache<T> = Record<string, Promise<T> | undefined>;
 
 /**
  * Call a function with result caching per entity.
- * @param cacheKey key to namespace the cache
+ * @param cacheKey key to store the cache on hass object
  * @param cacheTime time to cache the results
  * @param func function to fetch the data
- * @param hass Home Assistant object (or slice) the cache is keyed on
+ * @param hass Home Assistant object
  * @param entityId entity to fetch data for
  * @param args extra arguments to pass to the function to fetch the data
  * @returns
@@ -15,12 +15,8 @@ type ResultCache<T> = Record<string, Promise<T> | undefined>;
 export const timeCacheEntityPromiseFunc = async <T>(
   cacheKey: string,
   cacheTime: number,
-  func: (
-    hass: Pick<HomeAssistant, "callWS" | "hassUrl">,
-    entityId: string,
-    ...args: any[]
-  ) => Promise<T>,
-  hass: Pick<HomeAssistant, "callWS" | "hassUrl">,
+  func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
+  hass: HomeAssistant,
   entityId: string,
   ...args: any[]
 ): Promise<T> => {
@@ -43,11 +39,11 @@ export const timeCacheEntityPromiseFunc = async <T>(
     // When successful, set timer to clear cache
     () =>
       setTimeout(() => {
-        cache[entityId] = undefined;
+        cache![entityId] = undefined;
       }, cacheTime),
     // On failure, clear cache right away
     () => {
-      cache[entityId] = undefined;
+      cache![entityId] = undefined;
     }
   );
 

src/common/util/time-cache-function-promise.ts

@@ -16,12 +16,14 @@ interface CacheResult<T> {
  * @param args extra arguments to pass to the function to fetch the data
  * @returns
  */
-export const timeCachePromiseFunc = async <T, H = HomeAssistant>(
+export const timeCachePromiseFunc = async <T>(
   cacheKey: string,
   cacheTime: number,
-  func: (hass: H, ...args: any[]) => Promise<T>,
-  generateCacheKey: ((hass: H, lastResult: T) => unknown) | undefined,
-  hass: H,
+  func: (hass: HomeAssistant, ...args: any[]) => Promise<T>,
+  generateCacheKey:
+    | ((hass: HomeAssistant, lastResult: T) => unknown)
+    | undefined,
+  hass: HomeAssistant,
   ...args: any[]
 ): Promise<T> => {
   const anyHass = hass as any;

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

@@ -1,12 +1,5 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-svg-icon";
-import {
-  mdiAlertCircle,
-  mdiCheckCircle,
-  mdiCloseCircle,
-  mdiHelpCircle,
-} from "@mdi/js";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -26,59 +19,46 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
-  private get _iconPath() {
-    switch (this.state) {
-      case "pass":
-        return mdiCheckCircle;
-      case "fail":
-        return mdiCloseCircle;
-      case "invalid":
-        return mdiAlertCircle;
-      default:
-        return mdiHelpCircle;
-    }
-  }
-
   protected render() {
     return html`
-      <div id="indicator" role="status" tabindex="0" aria-label=${this.label}>
-        <ha-svg-icon .path=${this._iconPath}></ha-svg-icon>
-      </div>
+      <div
+        id="indicator"
+        role="status"
+        tabindex="0"
+        aria-label=${this.label}
+      ></div>
     `;
   }
 
   static styles = css`
     :host {
       position: absolute;
-      top: -8px;
-      inset-inline-end: -8px;
+      top: -5px;
+      inset-inline-end: -6px;
       display: inline-block;
     }
     #indicator {
-      width: 16px;
-      height: 16px;
-      display: grid;
-      place-items: center;
+      width: 10px;
+      height: 10px;
       border-radius: var(--ha-border-radius-circle);
+      border: var(--ha-border-width-md) solid;
+      box-sizing: border-box;
       background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
       transition: all var(--ha-animation-duration-normal) ease-in-out;
     }
-    #indicator ha-svg-icon {
-      width: 16px;
-      height: 16px;
-      --mdc-icon-size: 16px;
-    }
     :host([state="pass"]) #indicator {
-      color: var(--ha-color-green-60);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
     }
     :host([state="fail"]) #indicator {
-      color: var(--ha-color-orange-60);
+      border-color: var(--ha-color-orange-60);
     }
     :host([state="invalid"]) #indicator {
-      color: var(--ha-color-red-60);
+      border-color: var(--ha-color-red-60);
     }
     :host([state="unknown"]) #indicator {
-      color: var(--ha-color-neutral-60);
+      border-color: var(--ha-color-neutral-60);
     }
   `;
 }

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

@@ -1,18 +1,16 @@
-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 { apiContext } from "../../data/context";
+import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { Appearance } from "../ha-button";
 
 @customElement("ha-call-service-button")
 class HaCallServiceButton extends LitElement {
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -58,7 +56,7 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this._api.callService(
+      await this.hass.callService(
         this.domain,
         this.service,
         this.data,

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

@@ -445,7 +445,6 @@ 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,7 +552,6 @@ 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/chart/timeline-color.ts

@@ -79,11 +79,9 @@ function computeTimelineEnumColor(
   const domain = computeStateDomain(stateObj);
   const states =
     FIXED_DOMAIN_STATES[domain] ||
-    ((domain === "sensor" && stateObj.attributes.device_class === "enum") ||
-    domain === "select" ||
-    domain === "input_select"
-      ? stateObj.attributes.options
-      : undefined) ||
+    (domain === "sensor" &&
+      stateObj.attributes.device_class === "enum" &&
+      stateObj.attributes.options) ||
     [];
   const idx = states.indexOf(state);
   if (idx === -1) {

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

@@ -161,7 +161,11 @@ export class HaEntityPicker extends LitElement {
       : undefined;
     if (stateObj) {
       return html`
-        <state-badge slot="start" .stateObj=${stateObj}></state-badge>
+        <state-badge
+          slot="start"
+          .stateObj=${stateObj}
+          .hass=${this.hass}
+        ></state-badge>
       `;
     }
     if (extraOption.icon_path) {
@@ -212,7 +216,11 @@ export class HaEntityPicker extends LitElement {
     );
 
     return html`
-      <state-badge .stateObj=${stateObj} slot="start"></state-badge>
+      <state-badge
+        .hass=${this.hass}
+        .stateObj=${stateObj}
+        slot="start"
+      ></state-badge>
       <span slot="headline">${primary}</span>
       <span slot="supporting-text">${secondary}</span>
     `;
@@ -242,6 +250,7 @@ export class HaEntityPicker extends LitElement {
               <state-badge
                 slot="start"
                 .stateObj=${item.stateObj}
+                .hass=${this.hass}
               ></state-badge>
             `}
         <span slot="headline">${item.primary}</span>

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

@@ -1,4 +1,3 @@
-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";
@@ -7,9 +6,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";
@@ -30,8 +29,8 @@ const isOn = (stateObj?: HassEntity) =>
 
 @customElement("ha-entity-toggle")
 export class HaEntityToggle extends LitElement {
-  @consume({ context: apiContext, subscribe: true })
-  private _api?: ContextType<typeof apiContext>;
+  // hass is not a property so that we only re-render on stateObj changes
+  public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
@@ -119,7 +118,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._api || !this.stateObj) {
+    if (!this.hass || !this.stateObj) {
       return;
     }
     forwardHaptic(this, "light");
@@ -150,7 +149,7 @@ export class HaEntityToggle extends LitElement {
     this._isOn = turnOn;
 
     try {
-      await this._api.callService(serviceDomain, service, {
+      await this.hass.callService(serviceDomain, service, {
         entity_id: this.stateObj.entity_id,
       });
     } finally {

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

@@ -1,5 +1,3 @@
-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";
@@ -8,19 +6,13 @@ 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";
 
@@ -48,15 +40,7 @@ const getTruncatedKey = (domainKey: string, stateKey: string) => {
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
-  @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 hass?: HomeAssistant;
 
   @property({ attribute: false }) public state?: HassEntity;
 
@@ -93,8 +77,10 @@ export class HaStateLabelBadge extends LitElement {
       return html`
         <ha-label-badge
           class="warning"
-          label=${this._localize("state_badge.default.error")}
-          description=${this._localize("state_badge.default.entity_not_found")}
+          label=${this.hass!.localize("state_badge.default.error")}
+          description=${this.hass!.localize(
+            "state_badge.default.entity_not_found"
+          )}
         >
           <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
         </ha-label-badge>
@@ -108,7 +94,7 @@ export class HaStateLabelBadge extends LitElement {
     // 4. Icon determined via entity state
     // 5. Value string as fallback
     const domain = computeStateDomain(entityState);
-    const entry = this._entry;
+    const entry = this.hass?.entities[entityState.entity_id];
 
     const showIcon =
       this.icon || this._computeShowIcon(domain, entityState, entry);
@@ -177,23 +163,20 @@ 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;
         }
-        break;
+      // eslint-disable-next-line: disable=no-fallthrough
       default:
-        break;
+        return entityState.state === UNAVAILABLE ||
+          entityState.state === UNKNOWN
+          ? "—"
+          : this.hass!.formatEntityStateToParts(entityState).find(
+              (part) => part.type === "value"
+            )?.value;
     }
-    if (entityState.state === UNAVAILABLE || entityState.state === UNKNOWN) {
-      return "—";
-    }
-    if (!this._formatters) {
-      return null;
-    }
-    return valueFromParts(
-      this._formatters.formatEntityStateToParts(entityState)
-    );
   }
 
   private _computeShowIcon(
@@ -228,11 +211,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._localize(`state_badge.default.${entityState.state}`);
+      return this.hass!.localize(`state_badge.default.${entityState.state}`);
     }
     const domainStateKey = getTruncatedKey(domain, entityState.state);
     if (domainStateKey) {
-      return this._localize(`state_badge.${domainStateKey}`);
+      return this.hass!.localize(`state_badge.${domainStateKey}`);
     }
     // Person and device tracker state can be zone name
     if (domain === "person" || domain === "device_tracker") {
@@ -241,12 +224,10 @@ export class HaStateLabelBadge extends LitElement {
     if (domain === "timer") {
       return secondsToDuration(_timerTimeRemaining);
     }
-    if (!this._formatters) {
-      return null;
-    }
     return (
-      unitFromParts(this._formatters.formatEntityStateToParts(entityState)) ||
-      null
+      this.hass!.formatEntityStateToParts(entityState).find(
+        (part) => part.type === "unit"
+      )?.value || null
     );
   }
 

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

@@ -343,7 +343,11 @@ export class HaStatisticPicker extends LitElement {
     return html`
       ${item.stateObj
         ? html`
-            <state-badge .stateObj=${item.stateObj} slot="start"></state-badge>
+            <state-badge
+              .hass=${this.hass}
+              .stateObj=${item.stateObj}
+              slot="start"
+            ></state-badge>
           `
         : item.icon_path
           ? html`
@@ -484,6 +488,7 @@ 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,4 +1,3 @@
-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";
@@ -15,12 +14,13 @@ import {
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
-import { connectionContext } from "../../data/context";
-import { isBrandUrl } from "../../util/brands-url";
+import type { HomeAssistant } from "../../types";
 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,10 +36,6 @@ 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 {
@@ -110,15 +106,14 @@ export class StateBadge extends LitElement {
     ></ha-state-icon>`;
   }
 
-  public willUpdate(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     if (
       !changedProps.has("stateObj") &&
       !changedProps.has("overrideImage") &&
       !changedProps.has("overrideIcon") &&
       !changedProps.has("stateColor") &&
-      !changedProps.has("color") &&
-      !changedProps.has("_connection")
+      !changedProps.has("color")
     ) {
       return;
     }
@@ -138,10 +133,12 @@ export class StateBadge extends LitElement {
             stateObj.attributes.entity_picture) &&
           !this.overrideIcon
         ) {
-          let imageUrl = this._resolveImageUrl(
+          let imageUrl =
             stateObj.attributes.entity_picture_local ||
-              stateObj.attributes.entity_picture
-          );
+            stateObj.attributes.entity_picture;
+          if (this.hass) {
+            imageUrl = this.hass.hassUrl(imageUrl);
+          }
           if (domain === "camera") {
             imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
           }
@@ -182,7 +179,11 @@ export class StateBadge extends LitElement {
           }
         }
       } else if (this.overrideImage) {
-        backgroundImage = `url(${this._resolveImageUrl(this.overrideImage)})`;
+        let imageUrl = this.overrideImage;
+        if (this.hass) {
+          imageUrl = this.hass.hassUrl(imageUrl);
+        }
+        backgroundImage = `url(${imageUrl})`;
         this.icon = false;
       }
     }
@@ -191,20 +192,6 @@ 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,6 +24,7 @@ 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-assist-chat.ts

@@ -1,4 +1,3 @@
-import { consume } from "@lit/context";
 import {
   mdiAlertCircle,
   mdiChevronDown,
@@ -11,9 +10,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { supportsFeature } from "../common/entity/supports-feature";
-import type { LocalizeFunc } from "../common/translations/localize";
 import {
   runAssistPipeline,
   type AssistPipeline,
@@ -21,19 +18,10 @@ import {
   type ConversationChatLogToolResultDelta,
   type PipelineRunEvent,
 } from "../data/assist_pipeline";
-import {
-  configContext,
-  connectionContext,
-  statesContext,
-} from "../data/context";
 import { ConversationEntityFeature } from "../data/conversation";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { haStyleScrollbar } from "../resources/styles";
-import type {
-  HomeAssistant,
-  HomeAssistantConfig,
-  HomeAssistantConnection,
-} from "../types";
+import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
@@ -59,6 +47,8 @@ interface AssistMessage {
 
 @customElement("ha-assist-chat")
 export class HaAssistChat extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public pipeline?: AssistPipeline;
 
   @property({ type: Boolean, attribute: "disable-speech" })
@@ -81,22 +71,6 @@ export class HaAssistChat extends LitElement {
 
   @state() private _processing = false;
 
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: HomeAssistant["states"];
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: HomeAssistantConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: HomeAssistantConnection;
-
   private _conversationId: string | null = null;
 
   private _audioRecorder?: AudioRecorder;
@@ -112,7 +86,7 @@ export class HaAssistChat extends LitElement {
       this._conversation = [
         {
           who: "hass",
-          text: this._localize("ui.dialogs.voice_command.how_can_i_help"),
+          text: this.hass.localize("ui.dialogs.voice_command.how_can_i_help"),
           thinking: "",
           tool_calls: {},
         },
@@ -150,9 +124,9 @@ export class HaAssistChat extends LitElement {
     const controlHA = !this.pipeline
       ? false
       : this.pipeline.prefer_local_intents ||
-        (this._states[this.pipeline.conversation_engine]
+        (this.hass.states[this.pipeline.conversation_engine]
           ? supportsFeature(
-              this._states[this.pipeline.conversation_engine],
+              this.hass.states[this.pipeline.conversation_engine],
               ConversationEntityFeature.CONTROL
             )
           : true);
@@ -165,7 +139,7 @@ export class HaAssistChat extends LitElement {
           ? nothing
           : html`
               <ha-alert>
-                ${this._localize(
+                ${this.hass.localize(
                   "ui.dialogs.voice_command.conversation_no_control"
                 )}
               </ha-alert>
@@ -206,7 +180,7 @@ export class HaAssistChat extends LitElement {
                                   .path=${mdiCommentProcessingOutline}
                                 ></ha-svg-icon>
                                 <span class="thinking-label">
-                                  ${this._localize(
+                                  ${this.hass.localize(
                                     "ui.dialogs.voice_command.show_details"
                                   )}
                                 </span>
@@ -277,7 +251,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
           id="message-input"
           @keyup=${this._handleKeyUp}
           @input=${this._handleInput}
-          .label=${this._localize(`ui.dialogs.voice_command.input_label`)}
+          .label=${this.hass.localize(`ui.dialogs.voice_command.input_label`)}
         >
           <div slot="end">
             ${this._showSendButton || !supportsSTT
@@ -287,7 +261,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
                     .path=${mdiSend}
                     @click=${this._handleSendMessage}
                     .disabled=${this._processing}
-                    .label=${this._localize(
+                    .label=${this.hass.localize(
                       "ui.dialogs.voice_command.send_text"
                     )}
                   >
@@ -308,7 +282,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
                       .path=${mdiMicrophone}
                       @click=${this._handleListeningButton}
                       .disabled=${this._processing}
-                      .label=${this._localize(
+                      .label=${this.hass.localize(
                         "ui.dialogs.voice_command.start_listening"
                       )}
                     >
@@ -400,12 +374,10 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
 
   private _handleToggleThinking(ev: Event) {
     const index = (ev.currentTarget as any).index;
-    // 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._conversation[index] = {
+      ...this._conversation[index],
+      thinking_expanded: !this._conversation[index].thinking_expanded,
+    };
     this.requestUpdate("_conversation");
   }
 
@@ -419,21 +391,21 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
       text:
         // New lines matter for messages
         // prettier-ignore
-        html`${this._localize(
+        html`${this.hass.localize(
           "ui.dialogs.voice_command.not_supported_microphone_browser"
         )}
 
-        ${this._localize(
+        ${this.hass.localize(
           "ui.dialogs.voice_command.not_supported_microphone_documentation",
           {
             documentation_link: html`<a
                 target="_blank"
                 rel="noopener noreferrer"
                 href=${documentationUrl(
-                  this._config,
+                  this.hass,
                   "/docs/configuration/securing/#remote-access"
                 )}
-              >${this._localize(
+              >${this.hass.localize(
                   "ui.dialogs.voice_command.not_supported_microphone_documentation_link"
                 )}</a>`,
           }
@@ -471,7 +443,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
 
     try {
       const unsub = await runAssistPipeline(
-        this._connection,
+        this.hass,
         (event: PipelineRunEvent) => {
           if (event.type === "run-start") {
             this._stt_binary_handler_id =
@@ -567,7 +539,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
   }
 
   private _sendAudioChunk(chunk: Int16Array) {
-    this._connection.connection.socket!.binaryType = "arraybuffer";
+    this.hass.connection.socket!.binaryType = "arraybuffer";
 
     // eslint-disable-next-line eqeqeq
     if (this._stt_binary_handler_id == undefined) {
@@ -578,7 +550,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
     data[0] = this._stt_binary_handler_id;
     data.set(new Uint8Array(chunk.buffer), 1);
 
-    this._connection.connection.socket!.send(data);
+    this.hass.connection.socket!.send(data);
   }
 
   private _unloadAudio = () => {
@@ -598,7 +570,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
     hassMessageProcesser.addMessage();
     try {
       const unsub = await runAssistPipeline(
-        this._connection,
+        this.hass,
         (event) => {
           if (event.type.startsWith("intent-")) {
             hassMessageProcesser.processEvent(event);
@@ -621,7 +593,7 @@ ${JSON.stringify(toolCall.result, null, 2)}</pre
       );
     } catch {
       hassMessageProcesser.setError(
-        this._localize("ui.dialogs.voice_command.error")
+        this.hass.localize("ui.dialogs.voice_command.error")
       );
     } finally {
       this._processing = false;

src/components/ha-attribute-icon.ts

@@ -1,21 +1,16 @@
-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 { AsyncValueTask } from "../common/controllers/async-value-task";
-import {
-  configContext,
-  connectionContext,
-  entitiesContext,
-} from "../data/context";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
 import { attributeIcon } from "../data/icons";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
 @customElement("ha-attribute-icon")
 export class HaAttributeIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   @property() public attribute?: string;
@@ -24,59 +19,6 @@ export class HaAttributeIcon extends LitElement {
 
   @property() public icon?: string;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config?: ContextType<typeof configContext>;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection?: ContextType<typeof connectionContext>;
-
-  @state()
-  @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>`;
@@ -86,13 +28,23 @@ export class HaAttributeIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._config || !this._connection || !this._entities) {
+    if (!this.hass) {
       return nothing;
     }
 
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : nothing;
+    const icon = attributeIcon(
+      this.hass,
+      this.stateObj,
+      this.attribute,
+      this.attributeValue
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
+      }
+      return nothing;
+    });
+
+    return html`${until(icon)}`;
   }
 }
 

src/components/ha-attribute-value.ts

@@ -1,19 +1,11 @@
 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 { 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 { until } from "lit/directives/until";
 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()
@@ -26,17 +18,6 @@ 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;
@@ -66,28 +47,13 @@ class HaAttributeValue extends LitElement {
       }
     }
 
-    if (isObjectValue(attributeValue)) {
-      return html`<pre>${this._yamlTask.value ?? ""}</pre>`;
-    }
-
-    // Options-list attributes (effect_list, preset_modes, …) translated through
-    // their value attribute, or the main state for lists like hvac_modes.
-    if (Array.isArray(attributeValue)) {
-      const domain = computeStateDomain(this.stateObj);
-      const valueAttribute = getValueAttribute(domain, this.attribute);
-      if (valueAttribute) {
-        return attributeValue
-          .map((item) =>
-            valueAttribute === "_"
-              ? this._formatters!.formatEntityState(this.stateObj!, item)
-              : this._formatters!.formatEntityAttributeValue(
-                  this.stateObj!,
-                  valueAttribute,
-                  item
-                )
-          )
-          .join(", ");
-      }
+    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 (this.hideUnit) {
@@ -95,7 +61,10 @@ class HaAttributeValue extends LitElement {
         this.stateObj!,
         this.attribute
       );
-      return valueFromParts(parts);
+      return parts
+        .filter((part) => part.type === "value")
+        .map((part) => part.value)
+        .join("");
     }
 
     return this._formatters!.formatEntityAttributeValue(

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

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

src/components/ha-big-number.ts

@@ -1,12 +1,10 @@
-import { consume } from "@lit/context";
-import type { ContextType } from "@lit/context";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { formatNumber } from "../common/number/format_number";
 import { blankBeforeUnit } from "../common/translations/blank_before_unit";
-import { internationalizationContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 
 @customElement("ha-big-number")
 export class HaBigNumber extends LitElement {
@@ -17,16 +15,17 @@ export class HaBigNumber extends LitElement {
   @property({ attribute: "unit-position" })
   public unitPosition: "top" | "bottom" = "top";
 
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
   @property({ attribute: false })
   public formatOptions: Intl.NumberFormatOptions = {};
 
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: ContextType<typeof internationalizationContext>;
-
   protected render() {
-    const locale = this._i18n!.locale;
-    const formatted = formatNumber(this.value, locale, this.formatOptions);
+    const formatted = formatNumber(
+      this.value,
+      this.hass?.locale,
+      this.formatOptions
+    );
     const [integer] = formatted.includes(".")
       ? formatted.split(".")
       : formatted.split(",");
@@ -34,7 +33,9 @@ export class HaBigNumber extends LitElement {
     const temperatureDecimal = formatted.replace(integer, "");
 
     const formattedValue = `${this.value}${
-      this.unit ? `${blankBeforeUnit(this.unit, locale)}${this.unit}` : ""
+      this.unit
+        ? `${blankBeforeUnit(this.unit, this.hass?.locale)}${this.unit}`
+        : ""
     }`;
 
     const unitBottom = this.unitPosition === "bottom";

src/components/ha-camera-stream.ts

@@ -1,4 +1,3 @@
-import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -8,7 +7,7 @@ import memoizeOne from "memoize-one";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
-  CameraEntityFeature,
+  CAMERA_SUPPORT_STREAM,
   type CameraCapabilities,
   type CameraEntity,
   computeMJPEGStreamUrl,
@@ -18,7 +17,7 @@ import {
   STREAM_TYPE_WEB_RTC,
   type StreamType,
 } from "../data/camera";
-import { apiContext, configContext, connectionContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./ha-hls-player";
 import "./ha-web-rtc-player";
 
@@ -31,17 +30,7 @@ interface Stream {
 
 @customElement("ha-camera-stream")
 export class HaCameraStream extends LitElement {
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: ContextType<typeof connectionContext>;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: CameraEntity;
 
@@ -69,33 +58,21 @@ export class HaCameraStream extends LitElement {
 
   @state() private _webRtcStreams?: { hasAudio: boolean; hasVideo: boolean };
 
-  private _thumbnailApi = memoizeOne(
-    (
-      api: ContextType<typeof apiContext>,
-      connection: ContextType<typeof connectionContext>
-    ) => ({
-      callWS: api.callWS,
-      hassUrl: connection.hassUrl,
-    })
-  );
-
-  public willUpdate(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues<this>): void {
     const entityChanged =
       changedProps.has("stateObj") &&
       this.stateObj &&
       (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
         this.stateObj.entity_id;
 
-    const oldConfig = changedProps.get("_config") as
-      | ContextType<typeof configContext>
-      | undefined;
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const backendStarted =
-      changedProps.has("_config") &&
-      this._config &&
+      changedProps.has("hass") &&
+      this.hass &&
       this.stateObj &&
-      oldConfig &&
-      this._config.config.state === STATE_RUNNING &&
-      oldConfig.config?.state !== STATE_RUNNING;
+      oldHass &&
+      this.hass.config.state === STATE_RUNNING &&
+      oldHass.config?.state !== STATE_RUNNING;
 
     if (entityChanged || backendStarted) {
       this._getCapabilities();
@@ -160,6 +137,7 @@ export class HaCameraStream extends LitElement {
         .allowExoPlayer=${this.allowExoPlayer}
         .muted=${this.muted}
         .controls=${this.controls}
+        .hass=${this.hass}
         .entityid=${this.stateObj.entity_id}
         .posterUrl=${this._posterUrl}
         @streams=${this._handleHlsStreams}
@@ -175,6 +153,7 @@ export class HaCameraStream extends LitElement {
         playsinline
         .muted=${this.muted}
         .controls=${this.controls}
+        .hass=${this.hass}
         .entityid=${this.stateObj.entity_id}
         .posterUrl=${this._posterUrl}
         @streams=${this._handleWebRtcStreams}
@@ -191,12 +170,12 @@ export class HaCameraStream extends LitElement {
     this._capabilities = undefined;
     this._hlsStreams = undefined;
     this._webRtcStreams = undefined;
-    if (!supportsFeature(this.stateObj!, CameraEntityFeature.STREAM)) {
+    if (!supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)) {
       this._capabilities = { frontend_stream_types: [] };
       return;
     }
     this._capabilities = await fetchCameraCapabilities(
-      this._api,
+      this.hass!,
       this.stateObj!.entity_id
     );
   }
@@ -204,7 +183,7 @@ export class HaCameraStream extends LitElement {
   private async _getPosterUrl(): Promise<void> {
     try {
       this._posterUrl = await fetchThumbnailUrlWithCache(
-        this._thumbnailApi(this._api, this._connection),
+        this.hass!,
         this.stateObj!.entity_id,
         this.clientWidth,
         this.clientHeight

src/components/ha-condition-icon.ts

@@ -12,11 +12,10 @@ 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";
@@ -58,17 +57,6 @@ 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>`;
@@ -82,12 +70,18 @@ export class HaConditionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

src/components/ha-control-slider.ts

@@ -388,10 +388,7 @@ export class HaControlSlider extends LitElement {
   private _isVisuallyInverted() {
     let inverted = this.inverted;
 
-    // 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") {
+    if (mainWindow.document.dir === "rtl") {
       inverted = !inverted;
     }
 

src/components/ha-domain-icon.ts

@@ -1,8 +1,7 @@
 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 { AsyncValueTask } from "../common/controllers/async-value-task";
+import { until } from "lit/directives/until";
 import { configContext, connectionContext, uiContext } from "../data/context";
 import {
   DEFAULT_DOMAIN_ICON,
@@ -37,30 +36,6 @@ 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>`;
@@ -74,12 +49,21 @@ export class HaDomainIcon extends LitElement {
       return this._renderFallback();
     }
 
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

src/components/ha-file-upload.ts

@@ -1,18 +1,13 @@
-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 { internationalizationContext } from "../data/context";
-import type { FrontendLocaleData } from "../data/translation";
-import type { HomeAssistantInternationalization } from "../types";
+import type { HomeAssistant } from "../types";
 import { bytesToString } from "../util/bytes-to-string";
 import "./ha-button";
 import "./ha-icon-button";
@@ -27,17 +22,10 @@ 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;
@@ -92,7 +80,7 @@ export class HaFileUpload extends LitElement {
   }
 
   public render(): TemplateResult {
-    const localize = this.localize || this._localize!;
+    const localize = this.localize || this.hass!.localize;
     return html`
       ${this.uploading
         ? html`<div class="container">
@@ -107,8 +95,8 @@ export class HaFileUpload extends LitElement {
               >
               ${this.progress
                 ? html`<div class="progress">
-                    ${this.progress}${this._locale &&
-                    blankBeforePercent(this._locale)}%
+                    ${this.progress}${this.hass &&
+                    blankBeforePercent(this.hass!.locale)}%
                   </div>`
                 : nothing}
             </div>

src/components/ha-filter-devices.ts

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

src/components/ha-filter-domains.ts

@@ -1,4 +1,3 @@
-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";
@@ -6,14 +5,12 @@ 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";
@@ -23,17 +20,7 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-domains")
 export class HaFilterDomains extends LitElement {
-  @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 hass!: HomeAssistant;
 
   @property({ attribute: false }) public value?: string[];
 
@@ -56,7 +43,7 @@ export class HaFilterDomains extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.domains.caption")}
+          ${this.hass.localize("ui.panel.config.domains.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -78,13 +65,7 @@ export class HaFilterDomains extends LitElement {
                 multi
               >
                 ${repeat(
-                  this._domains(
-                    this._states,
-                    this._localize,
-                    this._i18n.locale.language,
-                    this._filter,
-                    this.value
-                  ),
+                  this._domains(this.hass.states, this._filter, this.value),
                   (i) => i,
                   (domain) =>
                     html`<ha-check-list-item
@@ -97,7 +78,7 @@ export class HaFilterDomains extends LitElement {
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>
-                      ${domainToName(this._localize, domain)}
+                      ${domainToName(this.hass.localize, domain)}
                     </ha-check-list-item>`
                 )}
               </ha-list> `
@@ -106,34 +87,26 @@ export class HaFilterDomains extends LitElement {
     `;
   }
 
-  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));
-      });
+  private _domains = memoizeOne((states, filter, _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(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);
-    }
-  );
+    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);
+  });
 
   protected updated(changed: PropertyValues<this>) {
     if (changed.has("expanded") && this.expanded) {
@@ -156,13 +129,7 @@ export class HaFilterDomains extends LitElement {
   }
 
   private _handleItemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    const domains = this._domains(
-      this._states,
-      this._localize,
-      this._i18n.locale.language,
-      this._filter,
-      this.value
-    );
+    const domains = this._domains(this.hass.states, 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,25 +1,18 @@
-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";
@@ -29,20 +22,7 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-entities")
 export class HaFilterEntities extends LitElement {
-  @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 hass!: HomeAssistant;
 
   @property({ attribute: false }) public value?: string[];
 
@@ -82,7 +62,7 @@ export class HaFilterEntities extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.entities.caption")}
+          ${this.hass.localize("ui.panel.config.entities.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -102,10 +82,9 @@ export class HaFilterEntities extends LitElement {
               <ha-list class="ha-scrollbar" multi>
                 <lit-virtualizer
                   .items=${this._entities(
-                    this._states,
+                    this.hass.states,
                     this.type,
                     this._filter || "",
-                    this._i18n.locale.language,
                     this.value
                   )}
                   .keyFunction=${this._keyFunction}
@@ -184,10 +163,9 @@ export class HaFilterEntities extends LitElement {
 
   private _entities = memoizeOne(
     (
-      states: ContextType<typeof statesContext>,
+      states: HomeAssistant["states"],
       type: this["type"],
       filter: string,
-      language: string | undefined,
       _value
     ) => {
       const values = Object.values(states);
@@ -202,7 +180,11 @@ export class HaFilterEntities extends LitElement {
                 .includes(filter))
         )
         .sort((a, b) =>
-          stringCompare(computeStateName(a), computeStateName(b), language)
+          stringCompare(
+            computeStateName(a),
+            computeStateName(b),
+            this.hass.locale.language
+          )
         );
     }
   );
@@ -221,7 +203,7 @@ export class HaFilterEntities extends LitElement {
 
     for (const entityId of this.value) {
       if (this.type) {
-        relatedPromises.push(findRelated(this._api, "entity", entityId));
+        relatedPromises.push(findRelated(this.hass, "entity", entityId));
       }
     }
 

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

@@ -1,4 +1,3 @@
-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";
@@ -6,21 +5,14 @@ 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";
@@ -34,24 +26,7 @@ import type { HaListSelectable } from "./list/ha-list-selectable";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
-  @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 hass!: HomeAssistant;
 
   @property({ attribute: false }) public value?: {
     floors?: string[];
@@ -80,7 +55,7 @@ export class HaFilterFloorAreas extends LitElement {
   }
 
   protected render() {
-    const areas = this._areas(this._areasReg, this._floorsReg);
+    const areas = this._areas(this.hass.areas, this.hass.floors);
 
     return html`
       <ha-expansion-panel
@@ -90,7 +65,7 @@ export class HaFilterFloorAreas extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.areas.caption")}
+          ${this.hass.localize("ui.panel.config.areas.caption")}
           ${this.value?.areas?.length || this.value?.floors?.length
             ? html`<div class="badge">
                   ${(this.value?.areas?.length || 0) +
@@ -110,7 +85,9 @@ export class HaFilterFloorAreas extends LitElement {
                 multi
                 @ha-list-item-selected=${this._handleAdded}
                 @ha-list-item-deselected=${this._handleRemoved}
-                aria-label=${this._localize("ui.panel.config.areas.caption")}
+                aria-label=${this.hass.localize(
+                  "ui.panel.config.areas.caption"
+                )}
               >
                 ${repeat(
                   areas?.floors || [],
@@ -164,8 +141,8 @@ export class HaFilterFloorAreas extends LitElement {
         .type=${"areas"}
         class=${classMap({
           rtl: computeRTL(
-            this._i18n.language,
-            this._i18n.translationMetadata.translations
+            this.hass.language,
+            this.hass.translationMetadata.translations
           ),
           floor: hasFloor,
         })}
@@ -248,10 +225,7 @@ export class HaFilterFloorAreas extends LitElement {
   }
 
   private _areas = memoizeOne(
-    (
-      areaReg: ContextType<typeof areasContext>,
-      floorReg: ContextType<typeof floorsContext>
-    ) => {
+    (areaReg: HomeAssistant["areas"], floorReg: HomeAssistant["floors"]) => {
       const areas = Object.values(areaReg);
       const floors = Object.values(floorReg);
       const floorAreaLookup = getFloorAreaLookup(areas);
@@ -287,7 +261,7 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.areas) {
       for (const areaId of this.value.areas) {
         if (this.type) {
-          relatedPromises.push(findRelated(this._api, "area", areaId));
+          relatedPromises.push(findRelated(this.hass, "area", areaId));
         }
       }
     }
@@ -295,7 +269,7 @@ export class HaFilterFloorAreas extends LitElement {
     if (this.value.floors) {
       for (const floorId of this.value.floors) {
         if (this.type) {
-          relatedPromises.push(findRelated(this._api, "floor", floorId));
+          relatedPromises.push(findRelated(this.hass, "floor", floorId));
         }
       }
     }

src/components/ha-filter-labels.ts

@@ -1,4 +1,4 @@
-import { consume, type ContextType } from "@lit/context";
+import { consume } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -6,14 +6,13 @@ 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 type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, labelsContext } from "../data/context";
+import { 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";
@@ -26,20 +25,14 @@ 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[];
@@ -52,12 +45,7 @@ export class HaFilterLabels extends LitElement {
 
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
-    (
-      labels: LabelRegistryEntry[],
-      filter: string | undefined,
-      language: string | undefined,
-      _value
-    ) =>
+    (labels: LabelRegistryEntry[], filter: string | undefined, _value) =>
       labels
         .filter(
           (label) =>
@@ -66,7 +54,11 @@ 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, language)
+          stringCompare(
+            a.name || a.label_id,
+            b.name || b.label_id,
+            this.hass.locale.language
+          )
         )
   );
 
@@ -79,7 +71,7 @@ export class HaFilterLabels extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.labels.caption")}
+          ${this.hass.localize("ui.panel.config.labels.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -104,7 +96,6 @@ export class HaFilterLabels extends LitElement {
                   this._filteredLabels(
                     this._labels || [],
                     this._filter,
-                    this._i18n.locale.language,
                     this.value
                   ),
                   (label) => label.label_id,
@@ -138,7 +129,7 @@ export class HaFilterLabels extends LitElement {
             class="add"
           >
             <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-            ${this._localize("ui.panel.config.labels.manage_labels")}
+            ${this.hass.localize("ui.panel.config.labels.manage_labels")}
           </ha-list-item>`
         : nothing}
     `;
@@ -178,7 +169,6 @@ export class HaFilterLabels extends LitElement {
     const filteredLabels = this._filteredLabels(
       this._labels || [],
       this._filter,
-      this._i18n.locale.language,
       this.value
     );
 

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

@@ -8,6 +8,7 @@ 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";
@@ -21,6 +22,8 @@ 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;
@@ -75,6 +78,7 @@ 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-hls-player.ts

@@ -1,16 +1,13 @@
-import { consume, type ContextType } from "@lit/context";
 import type HlsType from "hls.js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
-import type { LocalizeFunc } from "../common/translations/localize";
 import { nextRender } from "../common/util/render-status";
 import { fetchStreamUrl } from "../data/camera";
-import { apiContext, configContext, connectionContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./ha-alert";
 
 type HlsLite = Omit<
@@ -20,21 +17,7 @@ type HlsLite = Omit<
 
 @customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: ContextType<typeof connectionContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public entityid?: string;
 
@@ -157,7 +140,7 @@ class HaHLSPlayer extends LitElement {
     this._cleanUp();
     this._resetError();
 
-    if (!isComponentLoaded(this._config.config, "stream")) {
+    if (!isComponentLoaded(this.hass.config, "stream")) {
       this._setFatalError("Streaming component is not loaded.");
       return;
     }
@@ -166,12 +149,9 @@ class HaHLSPlayer extends LitElement {
       return;
     }
     try {
-      const { url } = await fetchStreamUrl(
-        { callWS: this._api.callWS, hassUrl: this._connection.hassUrl },
-        this.entityid
-      );
+      const { url } = await fetchStreamUrl(this.hass!, this.entityid);
 
-      this._url = this._connection.hassUrl(url);
+      this._url = this.hass.hassUrl(url);
       this._cleanUp();
       this._resetError();
       this._startHls();
@@ -204,13 +184,13 @@ class HaHLSPlayer extends LitElement {
 
     if (!hlsSupported) {
       this._setFatalError(
-        this._localize("ui.components.media-browser.video_not_supported")
+        this.hass.localize("ui.components.media-browser.video_not_supported")
       );
       return;
     }
 
     const useExoPlayer =
-      this.allowExoPlayer && this._config.auth.external?.config.hasExoPlayer;
+      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
     if (!this.isConnected) {
@@ -256,7 +236,7 @@ class HaHLSPlayer extends LitElement {
     window.addEventListener("resize", this._resizeExoPlayer);
     this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
     this._videoEl.style.visibility = "hidden";
-    await this._config.auth.external!.fireMessage({
+    await this.hass!.auth.external!.fireMessage({
       type: "exoplayer/play_hls",
       payload: {
         url,
@@ -270,7 +250,7 @@ class HaHLSPlayer extends LitElement {
       return;
     }
     const rect = this._videoEl.getBoundingClientRect();
-    this._config.auth.external!.fireMessage({
+    this.hass!.auth.external!.fireMessage({
       type: "exoplayer/resize",
       payload: {
         left: rect.left,
@@ -382,7 +362,7 @@ class HaHLSPlayer extends LitElement {
     }
     if (this._exoPlayer) {
       window.removeEventListener("resize", this._resizeExoPlayer);
-      this._config.auth.external!.fireMessage({ type: "exoplayer/stop" });
+      this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
       this._exoPlayer = false;
     }
     if (this._videoEl) {

src/components/ha-labels-picker.ts

@@ -101,9 +101,15 @@ export class HaLabelsPicker extends LitElement {
       language: string
     ) =>
       value
-        ?.map((id) => labels?.find((label) => label.label_id === id))
-        .filter((label): label is LabelRegistryEntry => label !== undefined)
-        .sort((a, b) => stringCompare(a.name, b.name, language))
+        ?.map(
+          (id) =>
+            labels?.find((label) => label.label_id === id) || {
+              label_id: id,
+              name: id,
+              color: "rgba(var(--rgb-primary-text-color), 0.15)",
+            }
+        )
+        .sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
         .map((label) => ({
           ...label,
           style: getLabelColorStyle(label.color),

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

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

src/components/ha-picture-upload.ts

@@ -78,6 +78,7 @@ 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-relative-time.ts

@@ -12,8 +12,6 @@ import type { HomeAssistantInternationalization } from "../types";
 class HaRelativeTime extends ReactiveElement {
   @property({ attribute: false }) public datetime?: string | Date;
 
-  @property() public format: Intl.RelativeTimeFormatStyle = "long";
-
   @property({ type: Boolean }) public capitalize = false;
 
   @state()
@@ -38,15 +36,13 @@ class HaRelativeTime extends ReactiveElement {
     return this;
   }
 
+  protected firstUpdated(changedProps: PropertyValues<this>) {
+    super.firstUpdated(changedProps);
+    this._updateRelative();
+  }
+
   protected update(changedProps: PropertyValues<this>) {
     super.update(changedProps);
-    if (changedProps.has("datetime")) {
-      if (this.datetime) {
-        this._startInterval();
-      } else {
-        this._clearInterval();
-      }
-    }
     this._updateRelative();
   }
 
@@ -70,23 +66,15 @@ class HaRelativeTime extends ReactiveElement {
     }
 
     if (!this.datetime) {
-      this.textContent = this._i18n.localize(
-        "ui.components.relative_time.never"
-      );
+      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
     } else {
       const date =
         typeof this.datetime === "string"
           ? parseISO(this.datetime)
           : this.datetime;
 
-      const relTime = relativeTime(
-        date,
-        this._i18n.locale,
-        undefined,
-        true,
-        this.format
-      );
-      this.textContent = this.capitalize
+      const relTime = relativeTime(date, this._i18n.locale);
+      this.innerHTML = this.capitalize
         ? capitalizeFirstLetter(relTime)
         : relTime;
     }

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

@@ -86,10 +86,7 @@ export class HaDateTimeSelector extends LitElement {
   static styles = css`
     .input {
       display: flex;
-      /* Align the input fields by their top edge so the date field's underline
-         lines up with the time field, since ha-date-input reserves extra space
-         below for its hint while ha-time-input does not. */
-      align-items: flex-start;
+      align-items: center;
       flex-direction: row;
     }
 

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

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

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

@@ -23,6 +23,7 @@ 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-selector/ha-selector-ui-time-format.ts

@@ -1,32 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../ha-time-format-picker";
-
-@customElement("ha-selector-ui_time_format")
-export class HaSelectorUiTimeFormat extends LitElement {
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-time-format-picker
-        .label=${this.label}
-        .value=${this.value}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-      >
-      </ha-time-format-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-ui_time_format": HaSelectorUiTimeFormat;
-  }
-}

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

@@ -67,7 +67,6 @@ const LOAD_ELEMENTS = {
   ui_action: () => import("./ha-selector-ui-action"),
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
-  ui_time_format: () => import("./ha-selector-ui-time-format"),
 };
 
 const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);

src/components/ha-service-icon.ts

@@ -1,9 +1,8 @@
 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";
@@ -35,17 +34,6 @@ 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>`;
@@ -59,12 +47,16 @@ export class HaServiceIcon extends LitElement {
       return this._renderFallback();
     }
 
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

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

@@ -1,9 +1,8 @@
 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";
@@ -32,23 +31,6 @@ 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>`;
@@ -62,12 +44,19 @@ export class HaServiceSectionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

src/components/ha-state-icon.ts

@@ -1,9 +1,8 @@
 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 { AsyncValueTask } from "../common/controllers/async-value-task";
+import { until } from "lit/directives/until";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import {
   configContext,
@@ -38,47 +37,11 @@ export class HaStateIcon extends LitElement {
   @consume({ context: entitiesContext, subscribe: true })
   protected _entities?: ContextType<typeof entitiesContext>;
 
-  private get _overrideIcon(): string | undefined {
-    return (
+  protected render() {
+    const overrideIcon =
       this.icon ||
       (this.stateObj && this._entities?.[this.stateObj.entity_id]?.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;
+      this.stateObj?.attributes.icon;
     if (overrideIcon) {
       return html`<ha-icon .icon=${overrideIcon}></ha-icon>`;
     }
@@ -88,12 +51,19 @@ export class HaStateIcon extends LitElement {
     if (!this._config || !this._connection || !this._entities) {
       return this._renderFallback();
     }
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

src/components/ha-target-picker.ts

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

src/components/ha-theme-settings.ts

@@ -73,6 +73,7 @@ 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-time-format-picker.ts

@@ -1,136 +0,0 @@
-import memoizeOne from "memoize-one";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
-import "./ha-select";
-import type { TimestampRenderingFormat } from "../panels/lovelace/components/types";
-import { TIMESTAMP_RENDERING_FORMATS } from "../panels/lovelace/components/types";
-
-@customElement("ha-time-format-picker")
-export class HaTimeFormatPicker extends LitElement {
-  @property() public value?: TimestampRenderingFormat;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  private _options = memoizeOne((localize: LocalizeFunc) =>
-    [{ label: localize("ui.common.auto"), value: "auto" }].concat(
-      TIMESTAMP_RENDERING_FORMATS.map((format) => ({
-        label:
-          localize(`ui.components.time-format-picker.formats.${format}`) ||
-          format,
-        value: format,
-      }))
-    )
-  );
-
-  private _styleOptions = memoizeOne((localize: LocalizeFunc) => [
-    { label: localize("ui.common.auto"), value: "auto" },
-    {
-      label: localize("ui.components.time-format-picker.styles.short"),
-      value: "short",
-    },
-    {
-      label: localize("ui.components.time-format-picker.styles.long"),
-      value: "long",
-    },
-  ]);
-
-  protected render() {
-    const type = typeof this.value === "object" ? this.value.type : this.value;
-    const style = typeof this.value === "object" ? this.value.style : undefined;
-    return html`
-      <div class="row">
-        <ha-select
-          .label=${this.label ?? ""}
-          .value=${type || "auto"}
-          .helper=${this.helper ?? ""}
-          .disabled=${this.disabled}
-          @selected=${this._selectChanged}
-          .options=${this._options(this._localize)}
-        >
-        </ha-select>
-        ${this.value
-          ? html`
-              <ha-select
-                .label=${this._localize(
-                  "ui.components.time-format-picker.style"
-                )}
-                .value=${style || "auto"}
-                .disabled=${this.disabled}
-                @selected=${this._styleChanged}
-                .options=${this._styleOptions(this._localize)}
-              >
-              </ha-select>
-            `
-          : nothing}
-      </div>
-    `;
-  }
-
-  private _selectChanged(ev) {
-    ev.stopPropagation();
-    if (ev.detail?.value === "auto" && this.value !== undefined) {
-      fireEvent(this, "value-changed", {
-        value: undefined,
-      });
-      return;
-    }
-    if (this.value && typeof this.value === "object" && this.value.style) {
-      fireEvent(this, "value-changed", {
-        value: {
-          type: ev.detail.value,
-          style: this.value.style,
-        },
-      });
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: ev.detail.value,
-    });
-  }
-
-  private _styleChanged(ev) {
-    ev.stopPropagation();
-    const type = typeof this.value === "object" ? this.value.type : this.value;
-    if (ev.detail?.value === "auto") {
-      fireEvent(this, "value-changed", {
-        value: type,
-      });
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: {
-        type: type,
-        style: ev.detail.value,
-      },
-    });
-  }
-
-  static styles = css`
-    .row {
-      display: flex;
-      gap: 12px;
-    }
-
-    .row > * {
-      flex: 1;
-      min-width: 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-time-format-picker": HaTimeFormatPicker;
-  }
-}

src/components/ha-timezone-picker.ts

@@ -13,40 +13,12 @@ const SEARCH_KEYS = [
   { name: "secondary", weight: 8 },
 ];
 
-// 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;
-};
+export const getTimezoneOptions = (): PickerComboBoxItem[] =>
+  Object.entries(timezones as Record<string, string>).map(([key, value]) => ({
+    id: key,
+    primary: value,
+    secondary: key,
+  }));
 
 @customElement("ha-timezone-picker")
 export class HaTimeZonePicker extends LitElement {

src/components/ha-trace-picker.ts

@@ -2,7 +2,6 @@ import {
   mdiAlertCircleOutline,
   mdiCheckCircleOutline,
   mdiChevronDown,
-  mdiCircleOffOutline,
   mdiHelpCircleOutline,
   mdiProgressClock,
   mdiProgressWrench,
@@ -85,11 +84,6 @@ 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,11 +18,10 @@ 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";
@@ -72,17 +71,6 @@ 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>`;
@@ -96,12 +84,16 @@ export class HaTriggerIcon extends LitElement {
       return this._renderFallback();
     }
 
-    if (!this._iconTask.resolved) {
-      return nothing;
-    }
-    return this._iconTask.value
-      ? html`<ha-icon .icon=${this._iconTask.value}></ha-icon>`
-      : 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)}`;
   }
 
   private _renderFallback() {

src/components/ha-vacuum-state.ts

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

src/components/ha-water_heater-state.ts

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

src/components/ha-web-rtc-player.ts

@@ -1,4 +1,3 @@
-import { consume, type ContextType } from "@lit/context";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -14,7 +13,7 @@ import {
   webRtcOffer,
   type WebRtcOfferEvent,
 } from "../data/camera";
-import { apiContext, connectionContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./ha-alert";
 
 /**
@@ -24,13 +23,7 @@ import "./ha-alert";
  */
 @customElement("ha-web-rtc-player")
 class HaWebRtcPlayer extends LitElement {
-  @state()
-  @consume({ context: apiContext, subscribe: true })
-  private _api!: ContextType<typeof apiContext>;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: ContextType<typeof connectionContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public entityid?: string;
 
@@ -137,7 +130,7 @@ class HaWebRtcPlayer extends LitElement {
       return;
     }
 
-    if (!this._api || !this._connection || !this.entityid) {
+    if (!this.hass || !this.entityid) {
       return;
     }
 
@@ -148,7 +141,7 @@ class HaWebRtcPlayer extends LitElement {
     this._logEvent("start clientConfig");
 
     this._clientConfig = await fetchWebRtcClientConfiguration(
-      this._api,
+      this.hass,
       this.entityid
     );
 
@@ -237,11 +230,8 @@ class HaWebRtcPlayer extends LitElement {
     this._logEvent("start webRtcOffer", offer_sdp);
 
     try {
-      this._unsub = webRtcOffer(
-        this._connection,
-        this.entityid,
-        offer_sdp,
-        (event) => this._handleOfferEvent(event)
+      this._unsub = webRtcOffer(this.hass, this.entityid, offer_sdp, (event) =>
+        this._handleOfferEvent(event)
       );
     } catch (err: any) {
       this._error = "Failed to start WebRTC stream: " + err.message;
@@ -267,7 +257,7 @@ class HaWebRtcPlayer extends LitElement {
       this._sessionId = event.session_id;
       this._candidatesList.forEach((candidate) =>
         addWebRtcCandidate(
-          this._api,
+          this.hass,
           this.entityid!,
           event.session_id,
           // toJSON returns RTCIceCandidateInit
@@ -320,7 +310,7 @@ class HaWebRtcPlayer extends LitElement {
 
     if (this._sessionId) {
       addWebRtcCandidate(
-        this._api,
+        this.hass,
         this.entityid,
         this._sessionId,
         // toJSON returns RTCIceCandidateInit

src/components/map/ha-entity-marker.ts

@@ -1,18 +1,15 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { consumeEntityState } from "../../common/decorators/consume-context-entry";
+import type { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-state-icon";
 
 @customElement("ha-entity-marker")
 class HaEntityMarker extends LitElement {
-  @property({ attribute: "entity-id", reflect: true }) public entityId?: string;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state()
-  @consumeEntityState({ entityIdPath: ["entityId"] })
-  private _stateObj?: HassEntity;
+  @property({ attribute: "entity-id", reflect: true }) public entityId?: string;
 
   @property({ attribute: "entity-name" }) public entityName?: string;
 
@@ -39,7 +36,9 @@ class HaEntityMarker extends LitElement {
               })}
             ></div>`
           : this.showIcon && this.entityId
-            ? html`<ha-state-icon .stateObj=${this._stateObj}></ha-state-icon>`
+            ? html`<ha-state-icon
+                .stateObj=${this.hass?.states[this.entityId]}
+              ></ha-state-icon>`
             : !this.entityUnit
               ? this.entityName
               : html`

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

@@ -128,6 +128,7 @@ export class HaLocationsEditor extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-map
+        .hass=${this.hass}
         .layers=${this._getLayers(this._circles, this._locationMarkers)}
         .zoom=${this.zoom}
         .autoFit=${this.autoFit}

src/components/map/ha-map.ts

@@ -1,6 +1,4 @@
-import { consume } from "@lit/context";
 import { isToday } from "date-fns";
-import type { HassConfig, HassEntities } from "home-assistant-js-websocket";
 import type {
   Circle,
   CircleMarker,
@@ -20,7 +18,6 @@ import {
   formatTimeWeekday,
   formatTimeWithSeconds,
 } from "../../common/datetime/format_time";
-import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
@@ -29,22 +26,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { getEntityLocation } from "../../common/entity/get_entity_location";
 import { DecoratedMarker } from "../../common/map/decorated_marker";
 import { filterXSS } from "../../common/util/xss";
-import {
-  configContext,
-  connectionContext,
-  formattersContext,
-  internationalizationContext,
-  statesContext,
-  uiContext,
-} from "../../data/context";
-import type {
-  HomeAssistantConfig,
-  HomeAssistantConnection,
-  HomeAssistantFormatters,
-  HomeAssistantInternationalization,
-  HomeAssistantUI,
-  ThemeMode,
-} from "../../types";
+import type { HomeAssistant, ThemeMode } from "../../types";
 import { isTouch } from "../../util/is_touch";
 import "../ha-icon-button";
 import "./ha-entity-marker";
@@ -94,32 +76,7 @@ export interface HaMapEntity {
 
 @customElement("ha-map")
 export class HaMap extends ReactiveElement {
-  @state()
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: HassEntities;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<HomeAssistantConfig, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config!: HassConfig;
-
-  @state()
-  @consume({ context: uiContext, subscribe: true })
-  private _ui!: HomeAssistantUI;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: HomeAssistantInternationalization;
-
-  @state()
-  @consume({ context: formattersContext, subscribe: true })
-  private _formatters!: HomeAssistantFormatters;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  private _connection!: HomeAssistantConnection;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public entities?: string[] | HaMapEntity[];
 
@@ -218,16 +175,17 @@ export class HaMap extends ReactiveElement {
       return;
     }
     let autoFitRequired = false;
-    const oldStates = changedProps.get("_states") as HassEntities | undefined;
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
 
     if (changedProps.has("_loaded") || changedProps.has("entities")) {
       this._drawEntities();
       autoFitRequired = !this._pauseAutoFit;
-    } else if (this._loaded && oldStates && this.entities) {
+    } else if (this._loaded && oldHass && this.entities) {
       // Check if any state has changed
       for (const entity of this.entities) {
         if (
-          oldStates[getEntityId(entity)] !== this._states[getEntityId(entity)]
+          oldHass.states[getEntityId(entity)] !==
+          this.hass!.states[getEntityId(entity)]
         ) {
           this._drawEntities();
           autoFitRequired = !this._pauseAutoFit;
@@ -261,11 +219,10 @@ export class HaMap extends ReactiveElement {
       }, PROGRAMMITIC_FIT_DELAY);
     }
 
-    const oldUi = changedProps.get("_ui") as HomeAssistantUI | undefined;
     if (
       !changedProps.has("themeMode") &&
-      (!changedProps.has("_ui") ||
-        (oldUi && oldUi.themes?.darkMode === this._ui.themes?.darkMode))
+      (!changedProps.has("hass") ||
+        (oldHass && oldHass.themes?.darkMode === this.hass.themes?.darkMode))
     ) {
       return;
     }
@@ -276,7 +233,7 @@ export class HaMap extends ReactiveElement {
   private get _darkMode() {
     return (
       this.themeMode === "dark" ||
-      (this.themeMode === "auto" && Boolean(this._ui?.themes.darkMode))
+      (this.themeMode === "auto" && Boolean(this.hass.themes.darkMode))
     );
   }
 
@@ -301,8 +258,8 @@ export class HaMap extends ReactiveElement {
     this._loading = true;
     try {
       [this.leafletMap, this.Leaflet] = await setupLeafletMap(map, {
-        latitude: this._config?.latitude ?? 52.3731339,
-        longitude: this._config?.longitude ?? 4.8903147,
+        latitude: this.hass?.config.latitude ?? 52.3731339,
+        longitude: this.hass?.config.longitude ?? 4.8903147,
         zoom: this.zoom,
       });
       this._updateMapStyle();
@@ -343,7 +300,7 @@ export class HaMap extends ReactiveElement {
     if (options?.unpause_autofit) {
       this._pauseAutoFit = false;
     }
-    if (!this.leafletMap || !this.Leaflet || !this._config) {
+    if (!this.leafletMap || !this.Leaflet || !this.hass) {
       return;
     }
 
@@ -354,7 +311,10 @@ export class HaMap extends ReactiveElement {
     ) {
       this._isProgrammaticFit = true;
       this.leafletMap.setView(
-        new this.Leaflet.LatLng(this._config.latitude, this._config.longitude),
+        new this.Leaflet.LatLng(
+          this.hass.config.latitude,
+          this.hass.config.longitude
+        ),
         options?.zoom || this.zoom
       );
       setTimeout(() => {
@@ -391,7 +351,7 @@ export class HaMap extends ReactiveElement {
     boundingbox: LatLngExpression[],
     options?: { zoom?: number; pad?: number }
   ) {
-    if (!this.leafletMap || !this.Leaflet) {
+    if (!this.leafletMap || !this.Leaflet || !this.hass) {
       return;
     }
     const bounds = this.Leaflet.latLngBounds(boundingbox).pad(
@@ -422,31 +382,32 @@ export class HaMap extends ReactiveElement {
     if (path.fullDatetime) {
       formattedTime = formatDateTime(
         point.timestamp,
-        this._i18n.locale,
-        this._config
+        this.hass.locale,
+        this.hass.config
       );
     } else if (isToday(point.timestamp)) {
       formattedTime = formatTimeWithSeconds(
         point.timestamp,
-        this._i18n.locale,
-        this._config
+        this.hass.locale,
+        this.hass.config
       );
     } else {
       formattedTime = formatTimeWeekday(
         point.timestamp,
-        this._i18n.locale,
-        this._config
+        this.hass.locale,
+        this.hass.config
       );
     }
     return `${filterXSS(path.name ?? "")}<br>${formattedTime}`;
   }
 
   private _drawPaths(): void {
+    const hass = this.hass;
     const map = this.leafletMap;
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const Leaflet = this.Leaflet;
 
-    if (!this._i18n || !this._config || !map || !Leaflet) {
+    if (!hass || !map || !Leaflet) {
       return;
     }
     if (this._mapPaths.length) {
@@ -574,12 +535,12 @@ export class HaMap extends ReactiveElement {
   }
 
   private _drawEntities(): void {
-    const states = this._states;
+    const hass = this.hass;
     const map = this.leafletMap;
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const Leaflet = this.Leaflet;
 
-    if (!states || !map || !Leaflet) {
+    if (!hass || !map || !Leaflet) {
       return;
     }
 
@@ -617,7 +578,7 @@ export class HaMap extends ReactiveElement {
     const className = this._darkMode ? "dark" : "light";
 
     for (const entity of this.entities) {
-      const stateObj = states[getEntityId(entity)];
+      const stateObj = hass.states[getEntityId(entity)];
       if (!stateObj) {
         continue;
       }
@@ -630,7 +591,7 @@ export class HaMap extends ReactiveElement {
         entity_picture: entityPicture,
       } = stateObj.attributes;
 
-      const location = getEntityLocation(stateObj, states);
+      const location = getEntityLocation(stateObj, hass.states);
       if (!location) {
         continue;
       }
@@ -687,14 +648,11 @@ export class HaMap extends ReactiveElement {
       // create icon
       const entityName =
         typeof entity !== "string" && entity.label_mode === "state"
-          ? this._formatters.formatEntityState(stateObj)
+          ? this.hass.formatEntityState(stateObj)
           : typeof entity !== "string" &&
               entity.label_mode === "attribute" &&
               entity.attribute !== undefined
-            ? this._formatters.formatEntityAttributeValue(
-                stateObj,
-                entity.attribute
-              )
+            ? this.hass.formatEntityAttributeValue(stateObj, entity.attribute)
             : (customTitle ??
               title
                 .split(" ")
@@ -703,6 +661,7 @@ export class HaMap extends ReactiveElement {
                 .substr(0, 3));
 
       const entityMarker = document.createElement("ha-entity-marker");
+      entityMarker.hass = this.hass;
       entityMarker.showIcon =
         typeof entity !== "string" && entity.label_mode === "icon";
       entityMarker.entityId = getEntityId(entity);
@@ -715,7 +674,7 @@ export class HaMap extends ReactiveElement {
           : "";
       entityMarker.entityPicture =
         entityPicture && (typeof entity === "string" || !entity.label_mode)
-          ? this._connection.hassUrl(entityPicture)
+          ? this.hass.hassUrl(entityPicture)
           : "";
       if (typeof entity !== "string") {
         entityMarker.entityColor = entity.color;

src/components/media-player/dialog-media-player-browse.ts

@@ -101,6 +101,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           </span>
           <ha-media-manage-button
             slot="actionItems"
+            .hass=${this.hass}
             .currentItem=${this._currentItem}
             @media-refresh=${this._refreshMedia}
           ></ha-media-manage-button>

src/components/media-player/ha-media-manage-button.ts

@@ -1,16 +1,13 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiFolderEdit } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
-import { configContext } from "../../data/context";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   isLocalMediaSourceContentId,
   isImageUploadMediaSourceContentId,
 } from "../../data/media_source";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import type { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
 import "../ha-button";
 import { showMediaManageDialog } from "./show-media-manage-dialog";
@@ -23,13 +20,7 @@ declare global {
 
 @customElement("ha-media-manage-button")
 class MediaManageButton extends LitElement {
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) currentItem?: MediaPlayerItem;
 
@@ -40,7 +31,7 @@ class MediaManageButton extends LitElement {
       !this.currentItem ||
       !(
         isLocalMediaSourceContentId(this.currentItem.media_content_id || "") ||
-        (this._config.user?.is_admin &&
+        (this.hass!.user?.is_admin &&
           isImageUploadMediaSourceContentId(this.currentItem.media_content_id))
       )
     ) {
@@ -49,7 +40,9 @@ class MediaManageButton extends LitElement {
     return html`
       <ha-button appearance="filled" size="s" @click=${this._manage}>
         <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
-        ${this._localize("ui.components.media-browser.file_management.manage")}
+        ${this.hass.localize(
+          "ui.components.media-browser.file_management.manage"
+        )}
       </ha-button>
     `;
   }

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

@@ -26,6 +26,7 @@ export class HaTraceLogbook extends LitElement {
     return this.logbookEntries.length
       ? html`
           <ha-logbook-renderer
+            relative-time
             .hass=${this.hass}
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}

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

@@ -17,10 +17,9 @@ import type {
   ChooseActionTraceStep,
   TraceExtended,
 } from "../../data/trace";
-import { getDataFromPath, isTriggerPath } from "../../data/trace";
+import { getDataFromPath } from "../../data/trace";
 import "../../panels/logbook/ha-logbook-renderer";
 import type { HomeAssistant } from "../../types";
-import "../ha-alert";
 import "../ha-code-editor";
 import "../ha-icon-button";
 import "../ha-tab-group";
@@ -34,12 +33,6 @@ const TRACE_PATH_TABS = [
   "logbook",
 ] as const;
 
-// A repeat keeps only its last iterations, so the array index is not the real
-// one. Use the recorded repeat.index when we have it.
-const iterationNumber = (trace: ActionTraceStep, index: number): number =>
-  (trace.changed_variables?.repeat as { index?: number } | undefined)?.index ??
-  index + 1;
-
 @customElement("ha-trace-path-details")
 export class HaTracePathDetails extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -70,7 +63,7 @@ export class HaTracePathDetails extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="padded-box trace-info">
-        ${this._renderNotTriggeredNotice()} ${this._renderSelectedTraceInfo()}
+        ${this._renderSelectedTraceInfo()}
       </div>
 
       <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
@@ -96,22 +89,6 @@ export class HaTracePathDetails extends LitElement {
     `;
   }
 
-  private _renderNotTriggeredNotice() {
-    if (
-      !this.trace.not_triggered ||
-      !this.selected?.path ||
-      !isTriggerPath(this.selected.path) ||
-      !(this.selected.path in this.trace.trace)
-    ) {
-      return nothing;
-    }
-    return html`<ha-alert alert-type="info">
-      ${this.hass!.localize(
-        "ui.panel.config.automation.trace.path.not_triggered"
-      )}
-    </ha-alert>`;
-  }
-
   private _renderSelectedTraceInfo() {
     const paths = this.trace.trace;
 
@@ -237,7 +214,7 @@ export class HaTracePathDetails extends LitElement {
               : html`<h3>
                   ${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.iteration",
-                    { number: iterationNumber(trace, idx) }
+                    { number: idx + 1 }
                   )}
                 </h3>`}
             ${curPath
@@ -341,7 +318,7 @@ export class HaTracePathDetails extends LitElement {
               ? html`<p>
                   ${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.iteration",
-                    { number: iterationNumber(trace, idx) }
+                    { number: idx + 1 }
                   )}
                 </p>`
               : ""}
@@ -411,6 +388,7 @@ export class HaTracePathDetails extends LitElement {
     return entries.length
       ? html`
           <ha-logbook-renderer
+            relative-time
             .hass=${this.hass}
             .entries=${entries}
             .narrow=${this.narrow}

src/components/trace/hat-graph-node.ts

@@ -20,9 +20,6 @@ export class HatGraphNode extends LitElement {
   @property({ attribute: "not-enabled", reflect: true, type: Boolean })
   notEnabled = false;
 
-  @property({ attribute: "not-triggered", reflect: true, type: Boolean })
-  notTriggered = false;
-
   @property({ attribute: "graph-start", reflect: true, type: Boolean })
   graphStart = false;
 
@@ -130,9 +127,6 @@ export class HatGraphNode extends LitElement {
       --stroke-clr: var(--hover-clr);
       --icon-clr: var(--default-icon-clr);
     }
-    :host([not-triggered]) circle {
-      stroke-dasharray: 4 3;
-    }
     :host([not-enabled]) circle {
       --stroke-clr: var(--disabled-clr);
     }

src/components/trace/hat-script-graph.ts

@@ -90,27 +90,21 @@ export class HatScriptGraph extends LitElement {
 
   private _renderTrigger(config: Trigger, i: number) {
     const path = `trigger/${i}`;
-    const tracked = this.trace && path in this.trace.trace;
-    // A not-triggered trace records the trigger that evaluated a change but
-    // decided not to fire. It is still selectable (to view the reason), but
-    // must not be shown as the path that ran.
-    const notTriggered = !!(tracked && this.trace.not_triggered);
-    const track = tracked && !notTriggered;
+    const track = this.trace && path in this.trace.trace;
     this.renderedNodes[path] = { config, path, type: "trigger" };
-    if (tracked) {
+    if (track) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
     return html`
       <hat-graph-node
         graph-start
         ?track=${track}
-        ?not-triggered=${notTriggered}
         @focus=${this._selectNode(config, path, "trigger")}
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
         .notEnabled=${"enabled" in config && config.enabled === false}
         .error=${this.trace.trace[path]?.some((tr) => tr.error)}
-        tabindex=${tracked ? "0" : "-1"}
+        tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
   }

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

@@ -2,7 +2,6 @@ import { consume } from "@lit/context";
 import {
   mdiAlertCircle,
   mdiCircle,
-  mdiCircleOffOutline,
   mdiCircleOutline,
   mdiProgressClock,
   mdiProgressWrench,
@@ -19,7 +18,7 @@ import { toggleAttribute } from "../../common/dom/toggle_attribute";
 import { fullEntitiesContext } from "../../data/context";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { LogbookEntry } from "../../data/logbook";
-import { localizeTriggerSource } from "../../data/logbook";
+import { localizeTriggerDescription } from "../../data/logbook";
 import type {
   ChooseAction,
   IfAction,
@@ -324,23 +323,6 @@ class ActionRenderer {
   }
 
   private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
-    if (this.trace.not_triggered) {
-      this._renderEntry(
-        triggerStep.path,
-        this.hass.localize(
-          "ui.panel.config.automation.trace.messages.evaluated_not_triggered",
-          {
-            time: formatDateTimeWithSeconds(
-              new Date(triggerStep.timestamp),
-              this.hass.locale,
-              this.hass.config
-            ),
-          }
-        ),
-        mdiCircleOffOutline
-      );
-      return index + 1;
-    }
     this._renderEntry(
       triggerStep.path,
       this.hass.localize(
@@ -351,7 +333,7 @@ class ActionRenderer {
             : "other",
           alias: triggerStep.changed_variables.trigger?.alias,
           triggeredPath: triggerStep.path === "trigger" ? "manual" : "trigger",
-          trigger: localizeTriggerSource(
+          trigger: localizeTriggerDescription(
             this.hass.localize,
             this.trace.trigger
           ),
@@ -743,16 +725,6 @@ export class HaAutomationTracer extends LitElement {
         ),
         icon: mdiProgressWrench,
       };
-    } else if (this.trace.not_triggered) {
-      entry = {
-        description: this.hass.localize(
-          "ui.panel.config.automation.trace.messages.not_triggered",
-          {
-            time: renderFinishedAt(),
-          }
-        ),
-        icon: mdiCircleOffOutline,
-      };
     } else if (this.trace.script_execution === "finished") {
       entry = {
         description: this.hass.localize(

src/components/voice-assistant-brand-icon.ts

@@ -1,21 +1,14 @@
-import { consume, type ContextType } from "@lit/context";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html } from "lit";
 import { haStyle } from "../resources/styles";
-import { configContext, uiContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import { voiceAssistants } from "../data/expose";
 import { brandsUrl } from "../util/brands-url";
 
 @customElement("voice-assistant-brand-icon")
 export class VoiceAssistantBrandicon extends LitElement {
-  @state()
-  @consume({ context: uiContext, subscribe: true })
-  private _ui!: ContextType<typeof uiContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config!: ContextType<typeof configContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public voiceAssistantId!: string;
 
@@ -28,9 +21,9 @@ export class VoiceAssistantBrandicon extends LitElement {
           {
             domain: voiceAssistants[this.voiceAssistantId].domain,
             type: "icon",
-            darkOptimized: this._ui.themes?.darkMode,
+            darkOptimized: this.hass.themes?.darkMode,
           },
-          this._config.auth.data.hassUrl
+          this.hass.auth.data.hassUrl
         )}
         crossorigin="anonymous"
         referrerpolicy="no-referrer"

src/data/ai_task.ts

@@ -1,7 +1,7 @@
 import type { HomeAssistant } from "../types";
 import type { Selector } from "./selector";
 
-export enum AITaskEntityFeature {
+export const enum AITaskEntityFeature {
   GENERATE_DATA = 1,
   SUPPORT_ATTACHMENTS = 2,
   GENERATE_IMAGE = 4,

src/data/alarm_control_panel.ts

@@ -18,7 +18,7 @@ import { getExtendedEntityRegistryEntry } from "./entity/entity_registry";
 export const FORMAT_TEXT = "text";
 export const FORMAT_NUMBER = "number";
 
-export enum AlarmControlPanelEntityFeature {
+export const enum AlarmControlPanelEntityFeature {
   ARM_HOME = 1,
   ARM_AWAY = 2,
   ARM_NIGHT = 4,
@@ -108,7 +108,7 @@ export const supportedAlarmModes = (stateObj: AlarmControlPanelEntity) =>
 
 export const setProtectedAlarmControlPanelMode = async (
   element: HTMLElement,
-  hass: Pick<HomeAssistant, "callService" | "localize" | "callWS">,
+  hass: HomeAssistant,
   stateObj: AlarmControlPanelEntity,
   mode: AlarmMode
 ) => {

src/data/assist_pipeline.ts

@@ -338,7 +338,7 @@ export const runDebugAssistPipeline = (
 };
 
 export const runAssistPipeline = (
-  hass: Pick<HomeAssistant, "connection">,
+  hass: HomeAssistant,
   callback: (event: PipelineRunEvent) => void,
   options: PipelineRunOptions
 ) =>
@@ -379,10 +379,7 @@ export const listAssistPipelines = (hass: HomeAssistant) =>
     type: "assist_pipeline/pipeline/list",
   });
 
-export const getAssistPipeline = (
-  hass: Pick<HomeAssistant, "callWS">,
-  pipeline_id?: string
-) =>
+export const getAssistPipeline = (hass: HomeAssistant, pipeline_id?: string) =>
   hass.callWS<AssistPipeline>({
     type: "assist_pipeline/pipeline/get",
     pipeline_id,

src/data/assist_satellite.ts

@@ -3,7 +3,7 @@ import { supportsFeature } from "../common/entity/supports-feature";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE } from "./entity/entity";
 
-export enum AssistSatelliteEntityFeature {
+export const enum AssistSatelliteEntityFeature {
   ANNOUNCE = 1,
 }
 

src/data/auth.ts

@@ -41,7 +41,7 @@ export const autocompleteLoginFields = (schema: HaFormSchema[]) =>
   });
 
 export const getSignedPath = (
-  hass: Pick<HomeAssistant, "callWS">,
+  hass: HomeAssistant,
   path: string
 ): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });
 

src/data/automation.ts

@@ -180,7 +180,7 @@ export interface PersistentNotificationTrigger extends BaseTrigger {
 
 export interface ZoneTrigger extends BaseTrigger {
   trigger: "zone";
-  entity_id: string | string[];
+  entity_id: string;
   zone: string;
   event: "enter" | "leave";
 }
@@ -377,7 +377,7 @@ export const expandConditionWithShorthand = (
 };
 
 export const triggerAutomationActions = (
-  hass: Pick<HomeAssistant, "callService">,
+  hass: HomeAssistant,
   entityId: string
 ) => {
   hass.callService("automation", "trigger", {

src/data/automation_i18n.ts

@@ -1124,9 +1124,6 @@ const describeLegacyCondition = (
         hasAttribute: attribute !== "" ? "true" : "false",
         attribute: attribute,
         numberOfEntities: entities.length,
-        // With "any", entities are joined with "or", which takes a singular
-        // verb in English even for multiple entities ("A or B is ...").
-        matchAny: condition.match === "any" ? "true" : "false",
         entities:
           condition.match === "any"
             ? formatListWithOrs(hass.locale, entities)

src/data/backup.ts

@@ -181,7 +181,7 @@ export interface RestoreBackupParams {
   restore_homeassistant?: boolean;
 }
 
-export const fetchBackupConfig = (hass: Pick<HomeAssistant, "callWS">) =>
+export const fetchBackupConfig = (hass: HomeAssistant) =>
   hass.callWS<{ config: BackupConfig }>({ type: "backup/config/info" });
 
 export const updateBackupConfig = (
@@ -486,12 +486,6 @@ export const getFormattedBackupTime = memoizeOne(
 
 export const SUPPORTED_UPLOAD_FORMAT = "application/x-tar";
 
-// Browsers report the MIME type of a .tar inconsistently (Firefox on Windows
-// gives an empty or different type), so accept it by extension as well.
-export const isSupportedBackupFile = (file: File): boolean =>
-  file.type === SUPPORTED_UPLOAD_FORMAT ||
-  file.name.toLowerCase().endsWith(".tar");
-
 export interface BackupUploadFileFormData {
   file?: File;
 }

src/data/calendar.ts

@@ -54,7 +54,7 @@ export enum RecurrenceRange {
   THISANDFUTURE = "THISANDFUTURE",
 }
 
-export enum CalendarEntityFeature {
+export const enum CalendarEntityFeature {
   CREATE_EVENT = 1,
   DELETE_EVENT = 2,
   UPDATE_EVENT = 4,