Fix form integer when data is null

Update dependency @rsdoctor/rspack-plugin to v1.5.6 (#51375 )
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2026-06-03 06:51:48 +00:00 · 2026-04-02 23:28:06 +02:00 · 2026-04-02 16:13:27 +01:00 · 2026-04-02 16:10:59 +01:00 · 2026-04-02 16:08:52 +02:00 · 2026-04-02 16:51:33 +03:00
347 changed files with 5436 additions and 4856 deletions
@@ -5,6 +5,9 @@ updates:
    schedule:
      interval: weekly
      time: "06:00"
+    cooldown:
+      default-days-before-reopen: 30
+      default-days: 7
    open-pull-requests-limit: 10
    labels:
      - Dependencies
@@ -8,6 +8,9 @@ on:
    branches:
      - master

+permissions:
+  contents: read
+
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -24,6 +27,7 @@ jobs:
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: dev
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -59,6 +63,7 @@ jobs:
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -18,6 +18,9 @@ concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+
 jobs:
  lint:
    name: Lint and check format
@@ -25,6 +28,8 @@ jobs:
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
@@ -59,6 +64,8 @@ jobs:
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
@@ -77,6 +84,8 @@ jobs:
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
@@ -7,6 +7,10 @@ on:
    # The branches below must be a subset of the branches above
    branches: [dev]

+permissions:
+  contents: read
+  security-events: write
+
 jobs:
  analyze:
    name: Analyze
@@ -28,6 +32,7 @@ jobs:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
          fetch-depth: 2
+          persist-credentials: false

      # If this run was triggered by a pull request event, then checkout
      # the head of the pull request instead of the merge commit.
@@ -36,14 +41,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+        uses: github/codeql-action/autobuild@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1

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

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
+        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
@@ -9,6 +9,9 @@ on:
      - dev
      - master

+permissions:
+  contents: read
+
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -25,6 +28,7 @@ jobs:
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: dev
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -60,6 +64,7 @@ jobs:
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
          ref: master
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -5,6 +5,9 @@ on:
  schedule:
    - cron: "0 0 * * *"

+permissions:
+  contents: read
+
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -17,6 +20,8 @@ jobs:
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -10,6 +10,9 @@ on:
    branches:
      - dev

+permissions:
+  contents: read
+
 env:
  NODE_OPTIONS: --max_old_space_size=6144

@@ -22,6 +25,8 @@ jobs:
    steps:
      - name: Check out files from GitHub
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"

-on: pull_request_target
+on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout

 jobs:
  triage:
@@ -5,6 +5,10 @@ on:
  schedule:
    - cron: "0 * * * *"

+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
  lock:
    runs-on: ubuntu-latest
@@ -21,6 +21,8 @@ jobs:
    steps:
      - name: Checkout the repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
@@ -1,25 +1,39 @@
 name: RelativeCI

 on:
+  # zizmor: ignore[dangerous-triggers] -- safe: only downloads artifacts, no PR code checkout
  workflow_run:
    workflows: [CI]
    types:
      - completed

+permissions:
+  contents: read
+  actions: read
+
 jobs:
-  upload:
-    name: Upload stats
+  upload-frontend-modern:
+    name: Upload stats (frontend/modern)
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    strategy:
-      matrix:
-        bundle: [frontend]
-        build: [modern, legacy]
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
        with:
-          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
+          key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
          token: ${{ github.token }}
-          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
-          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}
+          artifactName: frontend-bundle-stats
+          webpackStatsFile: frontend-modern.json
+
+  upload-frontend-legacy:
+    name: Upload stats (frontend/legacy)
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        with:
+          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
+          token: ${{ github.token }}
+          artifactName: frontend-bundle-stats
+          webpackStatsFile: frontend-legacy.json
@@ -27,6 +27,8 @@ jobs:
    steps:
      - name: Checkout the repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
@@ -34,13 +36,12 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@master
+        uses: home-assistant/actions/helpers/verify-version@d56d093b9ab8d2105bc0cb6ee9bcc0ef4ec8b96d # master

      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
-          cache: yarn

      - name: Install dependencies
        run: yarn install
@@ -62,11 +63,10 @@ jobs:
          skip-existing: true

      - name: Upload release assets
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
-        with:
-          files: |
-            dist/*.whl
-            dist/*.tar.gz
+        env:
+          GH_TOKEN: ${{ github.token }}
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber

  wheels-init:
    name: Init wheels build
@@ -74,15 +74,17 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Generate requirements.txt
+        env:
+          GITHUB_REF: ${{ github.ref }}
        run: |
          # Sleep to give pypi time to populate the new version across mirrors
          sleep 240
-          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
+          version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
          echo "home-assistant-frontend==$version" > ./requirements.txt

      # home-assistant/wheels doesn't support SHA pinning
      - name: Build wheels
-        uses: home-assistant/wheels@2025.12.0
+        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
        with:
          abi: cp314
          tag: musllinux_1_2
@@ -99,11 +101,12 @@ jobs:
    steps:
      - name: Checkout the repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
      - name: Setup Node
        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
          node-version-file: ".nvmrc"
-          cache: yarn
      - name: Install dependencies
        run: yarn install
      - name: Download Translations
@@ -113,8 +116,11 @@ jobs:
      - name: Build landing-page
        run: landing-page/script/build_landing_page
      - name: Tar folder
-        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
+        env:
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: tar -czf "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
-        with:
-          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+        env:
+          GH_TOKEN: ${{ github.token }}
+          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: gh release upload "$TAG_NAME" "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" --clobber
@@ -5,6 +5,10 @@ on:
  schedule:
    - cron: "0 * * * *"

+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
  stale:
    runs-on: ubuntu-latest
@@ -8,6 +8,9 @@ on:
    paths:
      - src/translations/en.json

+permissions:
+  contents: read
+
 jobs:
  upload:
    name: Upload
@@ -15,6 +18,8 @@ jobs:
    steps:
      - name: Checkout the repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false

      - name: Upload Translations
        run: |
@@ -124,7 +124,10 @@ async function pollProcess(lokaliseApi, projectId, processId) {

    console.log(
      `Lokalise export process for ${project} in progress...`,
-      process.status
+      process.status,
+      process.details?.items_to_process
+        ? `${Math.round(((process.details.items_processed || 0) / process.details.items_to_process) * 100)}% (${process.details.items_processed}/${process.details.items_to_process})`
+        : ""
    );

    await new Promise((resolve) => {
@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
-import "../../../../src/components/ha-textfield";
+import "../../../../src/components/input/ha-input";
 import "../../../../src/components/ha-button";

 const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
              To get started, enter your Home Assistant URL and click authorize.
              If you want a preview instead, click the show demo button.
            </p>
-            <ha-textfield
+            <ha-input
              label="Home Assistant URL"
              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
              @keydown=${this._handleInputKeyDown}
-            ></ha-textfield>
+            ></ha-input>
            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
          </div>
          <div class="card-actions">
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
  }

  private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-input")!;
    const value = inputEl.value || "";
    this.error = undefined;

@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
      flex: 1;
    }

-    ha-textfield {
+    ha-input {
      width: 100%;
    }
  `;
@@ -1,3 +1,4 @@
+/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -19,7 +19,7 @@ The Home Assistant interface is based on Material Design. It's a design system c
 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:

 - Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
- Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
+- Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!

 ## Developers
@@ -422,7 +422,6 @@ export class DemoEntityState extends LitElement {

    return html`
      <ha-data-table
-        .hass=${this.hass}
        .columns=${this._columns(this.hass)}
        .data=${this._rows()}
        auto-height
@@ -30,7 +30,7 @@
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.1",
    "@codemirror/commands": "6.10.3",
-    "@codemirror/language": "6.12.2",
+    "@codemirror/language": "6.12.3",
    "@codemirror/legacy-modes": "6.5.2",
    "@codemirror/search": "6.6.0",
    "@codemirror/state": "6.6.0",
@@ -82,7 +82,7 @@
    "@mdi/js": "7.4.47",
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.19",
+    "@swc/helpers": "0.5.20",
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
@@ -149,8 +149,8 @@
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.5",
-    "@rspack/core": "1.7.9",
+    "@rsdoctor/rspack-plugin": "1.5.6",
+    "@rspack/core": "1.7.10",
    "@rspack/dev-server": "1.2.1",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.25",
@@ -169,7 +169,7 @@
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/coverage-v8": "4.1.2",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
@@ -204,13 +204,13 @@
    "rspack-manifest-plugin": "5.2.1",
    "serve": "14.2.6",
    "sinon": "21.0.3",
-    "tar": "7.5.12",
+    "tar": "7.5.13",
    "terser-webpack-plugin": "5.4.0",
    "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.57.1",
+    "typescript": "6.0.2",
+    "typescript-eslint": "8.57.2",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.0",
+    "vitest": "4.1.2",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.4.0#~/.yarn/patches/workbox-build-npm-7.4.0-c84561662c.patch"
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260325.6"
+version      = "20260325.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+/// <reference types="chromecast-caf-sender" />

 import type { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";
@@ -32,6 +32,12 @@ const YAML_ONLY_THEMES_COLORS = new Set([
  "disabled",
 ]);

+/**
+ * Compose a CSS variable out of a theme color
+ * @param color - Theme color (examples: `red`, `primary-text`)
+ * @returns CSS variable in `--xxx-color` format;
+ * initial color if not found in theme colors
+ */
 export function computeCssVariableName(color: string): string {
  if (THEME_COLORS.has(color) || YAML_ONLY_THEMES_COLORS.has(color)) {
    return `--${color}-color`;
@@ -39,6 +45,12 @@ export function computeCssVariableName(color: string): string {
  return color;
 }

+/**
+ * Compose a CSS variable out of a theme color & then resolve it
+ * @param color - Theme color (examples: `red`, `primary-text`)
+ * @returns Resolved CSS variable in `var(--xxx-color)` format;
+ * initial color if not found in theme colors
+ */
 export function computeCssColor(color: string): string {
  const cssVarName = computeCssVariableName(color);
  if (cssVarName !== color) {
@@ -47,6 +59,22 @@ export function computeCssColor(color: string): string {
  return color;
 }

+/**
+ * Get a color from document's styles
+ * @param color - Named theme color (examples: `red`, `primary-text`)
+ * @returns Resolved color; initial color if not found in document's styles
+ */
+export function resolveThemeColor(color: string): string {
+  const cssColor = computeCssVariableName(color);
+  if (cssColor.startsWith("--")) {
+    const resolved = getComputedStyle(document.body)
+      .getPropertyValue(cssColor)
+      .trim();
+    return resolved || color;
+  }
+  return cssColor;
+}
+
 /**
 * Validates if a string is a valid color.
 * Accepts: hex colors (#xxx, #xxxxxx), theme colors, and valid CSS color names.
@@ -1,5 +1,6 @@
 import colors from "color-name";
 import { expandHex } from "./hex";
+import { resolveThemeColor } from "./compute-color";

 const rgb_hex = (component: number): string => {
  const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -130,26 +131,43 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
  hsv2rgb([hs[0], hs[1], 255]);

-export function theme2hex(themeColor: string): string {
-  if (themeColor.startsWith("#")) {
-    if (themeColor.length === 4 || themeColor.length === 5) {
-      const c = themeColor;
+/**
+ * Attempt to get a HEX color from a color defined in different formats:
+ * HEX, rgb/rgba, named color
+ * @param color - Color (HEX, rgb/rgba, named color) to be converted to HEX
+ * @returns HEX color
+ */
+export function theme2hex(color: string): string {
+  // Attempting to find a HEX pattern in the input string
+  if (color.startsWith("#")) {
+    if (color.length === 4 || color.length === 5) {
+      const c = color;
      // Convert short-form hex (#abc) to 6 digit (#aabbcc). Ignore alpha channel.
      return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
    }
-    if (themeColor.length === 9) {
+    if (color.length === 9) {
      // Ignore alpha channel.
-      return themeColor.substring(0, 7);
+      return color.substring(0, 7);
    }
-    return themeColor;
+    return color;
  }

-  const rgbFromColorName = colors[themeColor.toLowerCase()];
-  if (rgbFromColorName) {
-    return rgb2hex(rgbFromColorName);
+  // Attempting to find a match in a HA Frontend theme colors
+  const themeColor = resolveThemeColor(color.toLowerCase());
+  if (themeColor !== color.toLowerCase()) {
+    // theme color is recognized, now re-attempt
+    return theme2hex(themeColor);
  }

-  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  // Attempting to find a match in a web colors array
+  const rgbFromWebColor = colors[color.toLowerCase()];
+  if (rgbFromWebColor) {
+    // HEX color is recognized for the input named color
+    return rgb2hex(rgbFromWebColor);
+  }
+
+  // Attempting to find an RGB pattern in the input string
+  const rgbMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
  if (rgbMatch) {
    const [, r, g, b] = rgbMatch.map(Number);
    return rgb2hex([r, g, b]);
@@ -158,5 +176,5 @@ export function theme2hex(themeColor: string): string {
  // We have a named color, and there's nothing in the table,
  // so nothing further we can do with it.
  // Compare/border/background color will all be the same.
-  return themeColor;
+  return color;
 }
@@ -1,4 +1,5 @@
 import { wcagLuminance, wcagContrast } from "culori";
+import { theme2hex } from "./convert-color";

 /**
 * Calculates the luminosity of an RGB color.
@@ -48,3 +49,13 @@ export const getRGBContrastRatio = (
  rgb1: [number, number, number],
  rgb2: [number, number, number]
 ) => Math.round((rgbContrast(rgb1, rgb2) + Number.EPSILON) * 100) / 100;
+
+/**
+ * Returns a contrasted color (black or white) based on the luminance of another color
+ * @param color - Color (HEX, rgb/rgba, named color) to calculate a contrasted color
+ * @returns HEX color ("#000000" for dark backgrounds, "#ffffff" for light backgrounds)
+ */
+export const getContrastedColorHex = (color: string): string => {
+  const lum = wcagLuminance(theme2hex(color));
+  return lum > 0.5 ? "#000000" : "#ffffff";
+};
@@ -1,6 +1,9 @@
 import { listenMediaQuery } from "../dom/media_query";
 import type { HomeAssistant } from "../../types";
-import type { Condition } from "../../panels/lovelace/common/validate-condition";
+import type {
+  Condition,
+  ConditionContext,
+} from "../../panels/lovelace/common/validate-condition";
 import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
 import { extractMediaQueries, extractTimeConditions } from "./extract";
 import { calculateNextTimeUpdate } from "./time-calculator";
@@ -19,7 +22,8 @@ export function setupMediaQueryListeners(
  conditions: Condition[],
  hass: HomeAssistant,
  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
 ): void {
  const mediaQueries = extractMediaQueries(conditions);

@@ -36,7 +40,8 @@ export function setupMediaQueryListeners(
      if (hasOnlyMediaQuery) {
        onUpdate(matches);
      } else {
-        const conditionsMet = checkConditionsMet(conditions, hass);
+        const context = getContext?.() ?? {};
+        const conditionsMet = checkConditionsMet(conditions, hass, context);
        onUpdate(conditionsMet);
      }
    });
@@ -51,7 +56,8 @@ export function setupTimeListeners(
  conditions: Condition[],
  hass: HomeAssistant,
  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
 ): void {
  const timeConditions = extractTimeConditions(conditions);

@@ -70,7 +76,8 @@ export function setupTimeListeners(

      timeoutId = setTimeout(() => {
        if (delay <= MAX_TIMEOUT_DELAY) {
-          const conditionsMet = checkConditionsMet(conditions, hass);
+          const context = getContext?.() ?? {};
+          const conditionsMet = checkConditionsMet(conditions, hass, context);
          onUpdate(conditionsMet);
        }
        scheduleUpdate();
@@ -87,3 +94,17 @@ export function setupTimeListeners(
    scheduleUpdate();
  });
 }
+
+/**
+ * Sets up all condition listeners (media query, time) for conditional visibility.
+ */
+export function setupConditionListeners(
+  conditions: Condition[],
+  hass: HomeAssistant,
+  addListener: (unsub: () => void) => void,
+  onUpdate: (conditionsMet: boolean) => void,
+  getContext?: () => ConditionContext
+): void {
+  setupMediaQueryListeners(conditions, hass, addListener, onUpdate, getContext);
+  setupTimeListeners(conditions, hass, addListener, onUpdate, getContext);
+}
@@ -14,7 +14,7 @@ export const isLoadedIntegration = (
 ) =>
  !page.component ||
  ensureArray(page.component).some((integration) =>
-    isComponentLoaded(hass, integration)
+    isComponentLoaded(hass.config, integration)
  );

 export const isNotLoadedIntegration = (
@@ -23,7 +23,7 @@ export const isNotLoadedIntegration = (
 ) =>
  !page.not_component ||
  !ensureArray(page.not_component).some((integration) =>
-    isComponentLoaded(hass, integration)
+    isComponentLoaded(hass.config, integration)
  );

 export const isCore = (page: PageNavigation) => page.core;
@@ -2,6 +2,6 @@ import type { HomeAssistant } from "../../types";

 /** Return if a component is loaded. */
 export const isComponentLoaded = (
-  hass: HomeAssistant,
+  hassConfig: HomeAssistant["config"],
  component: string
-): boolean => hass && hass.config.components.includes(component);
+): boolean => hassConfig && hassConfig.components.includes(component);
@@ -14,24 +14,25 @@ export const computeDeviceName = (

 export const computeDeviceNameDisplay = (
  device: DeviceRegistryEntry,
-  hass: HomeAssistant,
+  localize: HomeAssistant["localize"],
+  hassStates: HomeAssistant["states"],
  entities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) =>
  computeDeviceName(device) ||
-  (entities && fallbackDeviceName(hass, entities)) ||
-  hass.localize("ui.panel.config.devices.unnamed_device", {
-    type: hass.localize(
+  (entities && fallbackDeviceName(hassStates, entities)) ||
+  localize("ui.panel.config.devices.unnamed_device", {
+    type: localize(
      `ui.panel.config.devices.type.${device.entry_type || "device"}`
    ),
  });

 export const fallbackDeviceName = (
-  hass: HomeAssistant,
+  hassStates: HomeAssistant["states"],
  entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) => {
  for (const entity of entities || []) {
    const entityId = typeof entity === "string" ? entity : entity.entity_id;
-    const stateObj = hass.states[entityId];
+    const stateObj = hassStates[entityId];
    if (stateObj) {
      return computeStateName(stateObj);
    }
@@ -1,26 +1,11 @@
 import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
-import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";

-interface DeviceContext {
-  device: DeviceRegistryEntry;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getDeviceContext = (
+export const getDeviceArea = (
  device: DeviceRegistryEntry,
-  hass: HomeAssistant
-): DeviceContext => {
+  areas: HomeAssistant["areas"]
+): AreaRegistryEntry | undefined => {
  const areaId = device.area_id;
-  const area = areaId ? hass.areas[areaId] : undefined;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : undefined;
-
-  return {
-    device: device,
-    area: area || null,
-    floor: floor || null,
-  };
+  return areaId ? areas[areaId] : undefined;
 };
@@ -27,7 +27,7 @@ export const isDeletableEntity = (
  const entityRegEntry = entityRegistry.find((e) => e.entity_id === entity_id);
  if (isHelperDomain(domain)) {
    return !!(
-      isComponentLoaded(hass, domain) &&
+      isComponentLoaded(hass.config, domain) &&
      entityRegEntry &&
      fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)
    );
@@ -56,7 +56,7 @@ export const deleteEntity = (
  const domain = computeDomain(entity_id);
  const entityRegEntry = entityRegistry.find((e) => e.entity_id === entity_id);
  if (isHelperDomain(domain)) {
-    if (isComponentLoaded(hass, domain)) {
+    if (isComponentLoaded(hass.config, domain)) {
      if (
        entityRegEntry &&
        fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)
@@ -41,7 +41,7 @@ export const protocolIntegrationPicked = async (
        ).filter((e) => !e.disabled_by);

    if (
-      !isComponentLoaded(hass, "zwave_js") ||
+      !isComponentLoaded(hass.config, "zwave_js") ||
      (!options?.config_entry && !entries?.length)
    ) {
      // If the component isn't loaded, ask them to load the integration first
@@ -90,7 +90,7 @@ export const protocolIntegrationPicked = async (
        ).filter((e) => !e.disabled_by);

    if (
-      !isComponentLoaded(hass, "zha") ||
+      !isComponentLoaded(hass.config, "zha") ||
      (!options?.config_entry && !entries?.length)
    ) {
      // If the component isn't loaded, ask them to load the integration first
@@ -139,7 +139,7 @@ export const protocolIntegrationPicked = async (
          })
        ).filter((e) => !e.disabled_by);
    if (
-      !isComponentLoaded(hass, domain) ||
+      !isComponentLoaded(hass.config, domain) ||
      (!options?.config_entry && !entries?.length)
    ) {
      // If the component isn't loaded, ask them to load the integration first
@@ -71,13 +71,6 @@ export const formatNumberToParts = (
    ? numberFormatToLocale(localeOptions)
    : undefined;

-  // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
-  Number.isNaN =
-    Number.isNaN ||
-    function isNaN(input) {
-      return typeof input === "number" && isNaN(input);
-    };
-
  if (
    localeOptions?.number_format !== NumberFormat.none &&
    !Number.isNaN(Number(num))
@@ -91,6 +91,10 @@ export class HaChartBase extends LitElement {

  private _lastTapTime?: number;

+  private _longPressTimer?: ReturnType<typeof setTimeout>;
+
+  private _longPressTriggered = false;
+
  private _shouldResizeChart = false;

  private _resizeAnimationDuration?: number;
@@ -128,6 +132,7 @@ export class HaChartBase extends LitElement {

  public disconnectedCallback() {
    super.disconnectedCallback();
+    this._legendPointerCancel();
    this._pendingSetup = false;
    while (this._listeners.length) {
      this._listeners.pop()!();
@@ -302,22 +307,31 @@ export class HaChartBase extends LitElement {
    `;
  }

-  private _renderLegend() {
+  private _getLegendItems() {
    if (!this.options?.legend || !this.data) {
-      return nothing;
+      return undefined;
    }
    const legend = ensureArray(this.options.legend).find(
      (l) => l.show && l.type === "custom"
    ) as CustomLegendOption | undefined;
    if (!legend) {
-      return nothing;
+      return undefined;
    }
    const datasets = ensureArray(this.data);
-    const items =
+    return (
      legend.data ||
      datasets
        .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => ({ id: d.id, name: d.name }));
+        .map((d) => ({ id: d.id, name: d.name }))
+    );
+  }
+
+  private _renderLegend() {
+    const items = this._getLegendItems();
+    if (!items) {
+      return nothing;
+    }
+    const datasets = ensureArray(this.data!);

    const isMobile = window.matchMedia(
      "all and (max-width: 450px), all and (max-height: 500px)"
@@ -362,6 +376,11 @@ export class HaChartBase extends LitElement {
          return html`<li
            .id=${id}
            @click=${this._legendClick}
+            @pointerdown=${this._legendPointerDown}
+            @pointerup=${this._legendPointerCancel}
+            @pointerleave=${this._legendPointerCancel}
+            @pointercancel=${this._legendPointerCancel}
+            @contextmenu=${this._legendContextMenu}
            class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
            .title=${name}
          >
@@ -1036,11 +1055,52 @@ export class HaChartBase extends LitElement {
    fireEvent(this, "chart-zoom", { start, end });
  }

-  private _legendClick(ev: any) {
+  // Long-press to solo on touch/pen devices (500ms, consistent with action-handler-directive)
+  private _legendPointerDown(ev: PointerEvent) {
+    // Mouse uses Ctrl/Cmd+click instead
+    if (ev.pointerType === "mouse") {
+      return;
+    }
+    const id = (ev.currentTarget as HTMLElement)?.id;
+    if (!id) {
+      return;
+    }
+    this._longPressTriggered = false;
+    this._longPressTimer = setTimeout(() => {
+      this._longPressTriggered = true;
+      this._longPressTimer = undefined;
+      this._soloLegend(id);
+    }, 500);
+  }
+
+  private _legendPointerCancel() {
+    if (this._longPressTimer) {
+      clearTimeout(this._longPressTimer);
+      this._longPressTimer = undefined;
+    }
+  }
+
+  private _legendContextMenu(ev: Event) {
+    if (this._longPressTimer || this._longPressTriggered) {
+      ev.preventDefault();
+    }
+  }
+
+  private _legendClick(ev: MouseEvent) {
    if (!this.chart) {
      return;
    }
-    const id = ev.currentTarget?.id;
+    if (this._longPressTriggered) {
+      this._longPressTriggered = false;
+      return;
+    }
+    const id = (ev.currentTarget as HTMLElement)?.id;
+    // Cmd+click on Mac (Ctrl+click is right-click there), Ctrl+click elsewhere
+    const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
+    if (soloModifier) {
+      this._soloLegend(id);
+      return;
+    }
    if (this._hiddenDatasets.has(id)) {
      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
        this._hiddenDatasets.delete(i)
@@ -1055,6 +1115,60 @@ export class HaChartBase extends LitElement {
    this.requestUpdate("_hiddenDatasets");
  }

+  private _soloLegend(id: string) {
+    const allIds = this._getAllLegendIds();
+    const clickedIds = this._getAllIdsFromLegend(this.options, id);
+    const otherIds = allIds.filter((i) => !clickedIds.includes(i));
+
+    const clickedIsOnlyVisible =
+      clickedIds.every((i) => !this._hiddenDatasets.has(i)) &&
+      otherIds.every((i) => this._hiddenDatasets.has(i));
+
+    if (clickedIsOnlyVisible) {
+      // Already solo'd on this item — restore all series to visible
+      for (const hiddenId of [...this._hiddenDatasets]) {
+        this._hiddenDatasets.delete(hiddenId);
+        fireEvent(this, "dataset-unhidden", { id: hiddenId });
+      }
+    } else {
+      // Solo: hide every other series, unhide clicked if it was hidden
+      for (const otherId of otherIds) {
+        if (!this._hiddenDatasets.has(otherId)) {
+          this._hiddenDatasets.add(otherId);
+          fireEvent(this, "dataset-hidden", { id: otherId });
+        }
+      }
+      for (const clickedId of clickedIds) {
+        if (this._hiddenDatasets.has(clickedId)) {
+          this._hiddenDatasets.delete(clickedId);
+          fireEvent(this, "dataset-unhidden", { id: clickedId });
+        }
+      }
+    }
+    this.requestUpdate("_hiddenDatasets");
+  }
+
+  private _getAllLegendIds(): string[] {
+    const items = this._getLegendItems();
+    if (!items) {
+      return [];
+    }
+    const allIds = new Set<string>();
+    for (const item of items) {
+      const primaryId =
+        typeof item === "string"
+          ? item
+          : ((item.id as string) ?? (item.name as string) ?? "");
+      for (const expandedId of this._getAllIdsFromLegend(
+        this.options,
+        primaryId
+      )) {
+        allIds.add(expandedId);
+      }
+    }
+    return [...allIds];
+  }
+
  private _toggleExpandedLegend() {
    this.expandLegend = !this.expandLegend;
    setTimeout(() => {
@@ -28,6 +28,13 @@ const safeParseFloat = (value) => {
  return isFinite(parsed) ? parsed : null;
 };

+const CLIMATE_MODE_CONFIGS = [
+  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
+  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
+  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
+  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
+] as const;
+
@customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -429,23 +436,18 @@ export class StateHistoryChartLine extends LitElement {
          (entityState) => entityState.attributes?.hvac_action
        );

-        const isHeating =
-          domain === "climate" && hasHvacAction
-            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "heat"
-            : (entityState: LineChartState) => entityState.state === "heat";
-        const isCooling =
-          domain === "climate" && hasHvacAction
-            ? (entityState: LineChartState) =>
-                CLIMATE_HVAC_ACTION_TO_MODE[
-                  entityState.attributes?.hvac_action
-                ] === "cool"
-            : (entityState: LineChartState) => entityState.state === "cool";
-
-        const hasHeat = states.states.some(isHeating);
-        const hasCool = states.states.some(isCooling);
+        const activeModes = CLIMATE_MODE_CONFIGS.map(
+          ({ mode, action, cssVar }) => {
+            const isActive =
+              domain === "climate" && hasHvacAction
+                ? (entityState: LineChartState) =>
+                    CLIMATE_HVAC_ACTION_TO_MODE[
+                      entityState.attributes?.hvac_action
+                    ] === mode
+                : (entityState: LineChartState) => entityState.state === mode;
+            return { action, cssVar, isActive };
+          }
+        ).filter(({ isActive }) => states.states.some(isActive));
        // We differentiate between thermostats that have a target temperature
        // range versus ones that have just a target temperature

@@ -466,33 +468,19 @@ export class StateHistoryChartLine extends LitElement {
                "component.climate.entity_component._.state_attributes.current_temperature.name"
              )
        );
-        if (hasHeat) {
+        for (const { action, cssVar } of activeModes) {
          addDataSet(
-            states.entity_id + "-heating",
+            `${states.entity_id}-${action}`,
            this.showNames
-              ? this.hass.localize("ui.card.climate.heating", { name: name })
+              ? this.hass.localize(`ui.card.climate.${action}`, {
+                  name: name,
+                })
              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
+                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
                ),
-            computedStyles.getPropertyValue("--state-climate-heat-color"),
+            computedStyles.getPropertyValue(cssVar),
            true
          );
-          // The "heating" series uses steppedArea to shade the area below the current
-          // temperature when the thermostat is calling for heat.
-        }
-        if (hasCool) {
-          addDataSet(
-            states.entity_id + "-cooling",
-            this.showNames
-              ? this.hass.localize("ui.card.climate.cooling", { name: name })
-              : this.hass.localize(
-                  "component.climate.entity_component._.state_attributes.hvac_action.state.cooling"
-                ),
-            computedStyles.getPropertyValue("--state-climate-cool-color"),
-            true
-          );
-          // The "cooling" series uses steppedArea to shade the area below the current
-          // temperature when the thermostat is calling for heat.
        }

        if (hasTargetRange) {
@@ -540,11 +528,8 @@ export class StateHistoryChartLine extends LitElement {
            entityState.attributes.current_temperature
          );
          const series = [curTemp];
-          if (hasHeat) {
-            series.push(isHeating(entityState) ? curTemp : null);
-          }
-          if (hasCool) {
-            series.push(isCooling(entityState) ? curTemp : null);
+          for (const { isActive } of activeModes) {
+            series.push(isActive(entityState) ? curTemp : null);
          }
          if (hasTargetRange) {
            const targetHigh = safeParseFloat(
@@ -105,7 +105,7 @@ export class StateHistoryCharts extends LitElement {
  @restoreScroll(".container") private _savedScrollPos?: number;

  protected render() {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
      return html`<div class="info">
        ${this.hass.localize("ui.components.history_charts.history_disabled")}
      </div>`;
@@ -149,7 +149,7 @@ export class StatisticsChart extends LitElement {
  }

  protected render(): TemplateResult {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
      return html`<div class="info">
        ${this.hass.localize("ui.components.history_charts.history_disabled")}
      </div>`;
@@ -2,7 +2,6 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { stringCompare } from "../../common/string/compare";
@@ -53,16 +52,15 @@ class HaDataTableLabels extends LitElement {
  }

  private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
-    const color = label?.color ? computeCssColor(label.color) : undefined;
    return html`
      <ha-label
        dense
        role="button"
        tabindex="0"
+        .color=${label.color}
        .item=${label}
        @click=${clickAction ? this._labelClicked : undefined}
        @keydown=${clickAction ? this._labelClicked : undefined}
-        style=${color ? `--color: ${color}` : ""}
        .description=${label.description}
      >
        ${label?.icon
@@ -102,10 +100,6 @@ class HaDataTableLabels extends LitElement {
      position: fixed;
      flex-wrap: nowrap;
    }
-    ha-label {
-      --ha-label-background-color: var(--color, var(--grey-color));
-      --ha-label-background-opacity: 0.5;
-    }
    .plus {
      --ha-label-background-color: transparent;
      border: 1px solid var(--divider-color);
@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -21,9 +22,10 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
+import { localeContext, localizeContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
-import type { HomeAssistant } from "../../types";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
@@ -104,9 +106,13 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";

@customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private _localize?: ContextType<typeof localizeContext>;

-  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+  @state()
+  @consume({ context: localeContext, subscribe: true })
+  private _locale?: ContextType<typeof localeContext>;

  @property({ type: Boolean }) public narrow = false;

@@ -378,8 +384,6 @@ export class HaDataTable extends LitElement {
  );

  protected render() {
-    const localize = this.localizeFunc || this.hass.localize;
-
    const columns = this._sortedColumns(this.columns, this.columnOrder);

    const renderRow = (row: DataTableRowData, index: number) =>
@@ -503,7 +507,8 @@ export class HaDataTable extends LitElement {
                  <div class="mdc-data-table__row" role="row">
                    <div class="mdc-data-table__cell grows center" role="cell">
                      ${this.noDataText ||
-                      localize("ui.components.data-table.no-data")}
+                      this._localize?.("ui.components.data-table.no-data") ||
+                      "No data"}
                    </div>
                  </div>
                </div>
@@ -515,7 +520,8 @@ export class HaDataTable extends LitElement {
                  @scroll=${this._saveScrollPos}
                  .items=${this._groupData(
                    this._filteredData,
-                    localize,
+                    this._localize,
+                    this._locale,
                    this.appendRow,
                    this.groupColumn,
                    this.groupOrder,
@@ -685,7 +691,7 @@ export class HaDataTable extends LitElement {
            this._sortColumns[this.sortColumn],
            this.sortDirection,
            this.sortColumn,
-            this.hass.locale.language
+            this._locale?.language
          )
        : filteredData;

@@ -711,7 +717,8 @@ export class HaDataTable extends LitElement {
  private _groupData = memoizeOne(
    (
      data: DataTableRowData[],
-      localize: LocalizeFunc,
+      localize: LocalizeFunc | undefined,
+      locale: FrontendLocaleData | undefined,
      appendRow,
      groupColumn: string | undefined,
      groupOrder: string[] | undefined,
@@ -735,11 +742,7 @@ export class HaDataTable extends LitElement {
          )
            .sort((a, b) => {
              if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(
-                  a,
-                  b,
-                  this.hass.locale.language
-                );
+                const comparison = stringCompare(a, b, locale?.language);
                if (sortDirection === "asc") {
                  return comparison;
                }
@@ -760,7 +763,7 @@ export class HaDataTable extends LitElement {
              return stringCompare(
                ["", "-", "—"].includes(a) ? "zzz" : a,
                ["", "-", "—"].includes(b) ? "zzz" : b,
-                this.hass.locale.language
+                locale?.language
              );
            })
            .reduce(
@@ -787,14 +790,15 @@ export class HaDataTable extends LitElement {
              >
                <ha-icon-button
                  .path=${mdiChevronUp}
-                  .label=${this.hass.localize(
+                  .label=${localize?.(
                    `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  )}
+                  ) || (collapsed ? "Expand" : "Collapse")}
                  class=${collapsed ? "collapsed" : ""}
                >
                </ha-icon-button>
                ${groupName === UNDEFINED_GROUP_KEY
-                  ? localize("ui.components.data-table.ungrouped")
+                  ? localize?.("ui.components.data-table.ungrouped") ||
+                    "Ungrouped"
                  : groupName || ""}
              </div>`,
            });
@@ -863,7 +867,8 @@ export class HaDataTable extends LitElement {

    const groupedData = this._groupData(
      this._filteredData,
-      this.localizeFunc || this.hass.localize,
+      this._localize,
+      this._locale,
      this.appendRow,
      this.groupColumn,
      this.groupOrder,
@@ -6,7 +6,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
-import { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
  deviceComboBoxKeys,
@@ -14,11 +14,11 @@ import {
  type DevicePickerItem,
 } from "../../data/device/device_picker";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";

 export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
@@ -154,7 +154,7 @@ export class HaDevicePicker extends LitElement {
        return html`<span slot="headline">${deviceId}</span>`;
      }

-      const { area } = getDeviceContext(device, this.hass);
+      const area = getDeviceArea(device, this.hass.areas);

      const deviceName = device ? computeDeviceName(device) : undefined;
      const areaName = area ? computeAreaName(area) : undefined;
@@ -94,7 +94,7 @@ class HaAddonPicker extends LitElement {

  private async _getApps() {
    try {
-      if (isComponentLoaded(this.hass, "hassio")) {
+      if (isComponentLoaded(this.hass.config, "hassio")) {
        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
        this._addons = addonsInfo.addons
          .filter((addon) => addon.version)
@@ -8,6 +8,7 @@ import {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
 import "./ha-svg-icon";
@@ -38,6 +39,8 @@ class HaAlert extends LitElement {

  @property({ type: Boolean }) public dismissable = false;

+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
  @property({ type: Boolean }) public narrow = false;

  public render() {
@@ -65,7 +68,7 @@ class HaAlert extends LitElement {
              ${this.dismissable
                ? html`<ha-icon-button
                    @click=${this._dismissClicked}
-                    label="Dismiss alert"
+                    .label=${this.localize!("ui.common.dismiss_alert")}
                    .path=${mdiClose}
                  ></ha-icon-button>`
                : nothing}
@@ -267,7 +267,6 @@ export class HaAreaControlsPicker extends LitElement {
        : item.domain
          ? html`<ha-domain-icon
              slot="start"
-              .hass=${this.hass}
              .domain=${item.domain}
              .deviceClass=${item.deviceClass}
            ></ha-domain-icon>`
@@ -79,7 +79,6 @@ class HaConfigEntryPicker extends LitElement {
      <span slot="supporting-text">${item.secondary}</span>
      <ha-domain-icon
        slot="start"
-        .hass=${this.hass}
        .domain=${item.icon!}
        brand-fallback
      ></ha-domain-icon>
@@ -115,7 +114,6 @@ class HaConfigEntryPicker extends LitElement {
      slot="headline"
      >${item?.icon
        ? html`<ha-domain-icon
-            .hass=${this.hass}
            .domain=${item.icon!}
            brand-fallback
          ></ha-domain-icon>`
@@ -138,7 +138,6 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {

  public connectedCallback(): void {
    super.connectedCallback();
-    this._open = this.open;
    this.addEventListener(
      "dialog-set-fullscreen",
      this._handleFullscreenChanged as EventListener
@@ -1,19 +1,23 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import {
+  authContext,
+  configContext,
+  connectionContext,
+  themesContext,
+} from "../data/context";
 import {
  DEFAULT_DOMAIN_ICON,
  domainIcon,
  FALLBACK_DOMAIN_ICONS,
 } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import "./ha-icon";

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

  @property({ attribute: false }) public deviceClass?: string;
@@ -25,6 +29,22 @@ export class HaDomainIcon extends LitElement {
  @property({ attribute: "brand-fallback", type: Boolean })
  public brandFallback?: boolean;

+  @state()
+  @consume({ context: configContext, subscribe: true })
+  private _hassConfig?: ContextType<typeof configContext>;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection?: ContextType<typeof connectionContext>;
+
+  @state()
+  @consume({ context: themesContext, subscribe: true })
+  private _themes?: ContextType<typeof themesContext>;
+
+  @state()
+  @consume({ context: authContext, subscribe: true })
+  private _auth?: ContextType<typeof authContext>;
+
  protected render() {
    if (this.icon) {
      return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -34,12 +54,13 @@ export class HaDomainIcon extends LitElement {
      return nothing;
    }

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

    const icon = domainIcon(
-      this.hass,
+      this._connection,
+      this._hassConfig,
      this.domain,
      this.deviceClass,
      this.state
@@ -65,9 +86,9 @@ export class HaDomainIcon extends LitElement {
        {
          domain: this.domain!,
          type: "icon",
-          darkOptimized: this.hass.themes?.darkMode,
+          darkOptimized: this._themes?.darkMode,
        },
-        this.hass.auth.data.hassUrl
+        this._auth?.data.hassUrl
      );
      return html`
        <img
@@ -101,7 +101,11 @@ export class HaFilterDevices extends LitElement {
          .value=${device.id}
          .selected=${this.value?.includes(device.id) ?? false}
        >
-          ${computeDeviceNameDisplay(device, this.hass)}
+          ${computeDeviceNameDisplay(
+            device,
+            this.hass.localize,
+            this.hass.states
+          )}
        </ha-check-list-item>`;

  private _handleItemClick(ev) {
@@ -151,14 +155,18 @@ export class HaFilterDevices extends LitElement {
        .filter(
          (device) =>
            !filter ||
-            computeDeviceNameDisplay(device, this.hass)
+            computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
              .toLowerCase()
              .includes(filter)
        )
        .sort((a, b) =>
          stringCompare(
-            computeDeviceNameDisplay(a, this.hass),
-            computeDeviceNameDisplay(b, this.hass),
+            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
            this.hass.locale.language
          )
        );
@@ -72,7 +72,6 @@ export class HaFilterDomains extends LitElement {
                    >
                      <ha-domain-icon
                        slot="graphic"
-                        .hass=${this.hass}
                        .domain=${domain}
                        brand-fallback
                      ></ha-domain-icon>
@@ -82,7 +82,6 @@ export class HaFilterIntegrations extends LitElement {
                    >
                      <ha-domain-icon
                        slot="graphic"
-                        .hass=${this.hass}
                        .domain=${integration.domain}
                        brand-fallback
                      ></ha-domain-icon>
@@ -6,7 +6,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
-import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
@@ -98,17 +97,14 @@ export class HaFilterLabels extends LitElement {
                    this.value
                  ),
                  (label) => label.label_id,
-                  (label) => {
-                    const color = label.color
-                      ? computeCssColor(label.color)
-                      : undefined;
-                    return html`<ha-check-list-item
+                  (label) =>
+                    html`<ha-check-list-item
                      .value=${label.label_id}
                      .selected=${(this.value || []).includes(label.label_id)}
                      hasMeta
                    >
                      <ha-label
-                        style=${color ? `--color: ${color}` : ""}
+                        .color=${label.color}
                        .description=${label.description}
                      >
                        ${label.icon
@@ -119,8 +115,7 @@ export class HaFilterLabels extends LitElement {
                          : nothing}
                        ${label.name}
                      </ha-label>
-                    </ha-check-list-item>`;
-                  }
+                    </ha-check-list-item>`
                )}
              </ha-list> `
          : nothing}
@@ -253,10 +248,6 @@ export class HaFilterLabels extends LitElement {
        .warning {
          color: var(--error-color);
        }
-        ha-label {
-          --ha-label-background-color: var(--color, var(--grey-color));
-          --ha-label-background-opacity: 0.5;
-        }
        .add {
          position: absolute;
          bottom: 0;
@@ -100,7 +100,9 @@ export class HaFormInteger extends LitElement implements HaFormElement {
        inputMode="numeric"
        .label=${this.label}
        .hint=${this.helper}
-        .value=${this.data?.toString() ?? ""}
+        .value=${this.data !== undefined && this.data !== null
+          ? this.data.toString()
+          : ""}
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
@@ -140,7 +140,7 @@ class HaHLSPlayer extends LitElement {
    this._cleanUp();
    this._resetError();

-    if (!isComponentLoaded(this.hass!, "stream")) {
+    if (!isComponentLoaded(this.hass.config, "stream")) {
      this._setFatalError("Streaming component is not loaded.");
      return;
    }
@@ -1,18 +1,44 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { computeCssColor } from "../common/color/compute-color";
+import { getContrastedColorHex } from "../common/color/rgb";
 import { uid } from "../common/util/uid";
 import "./ha-tooltip";

+/**
+ * Returns CSS styles for a label's background & icon/text
+ * @param color Label color defined in HEX format
+ * @returns CSS styles
+ */
+export const getLabelColorStyle = (labelColor: string | undefined | null) => {
+  const color = labelColor ? computeCssColor(labelColor) : undefined;
+  return color
+    ? `--ha-label-background-color: ${color};
+       --primary-text-color: ${getContrastedColorHex(labelColor!)};`
+    : `--ha-label-background-color: rgba(var(--rgb-primary-text-color), 0.15);`;
+};
+
@customElement("ha-label")
 class HaLabel extends LitElement {
  @property({ type: Boolean, reflect: true }) dense = false;

+  @property()
+  public color?: string;
+
  @property({ attribute: "description" })
  public description?: string;

  private _elementId = "label-" + uid();

+  public willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
+    if (!changedProps.has("color")) {
+      return;
+    }
+    this.style.cssText = getLabelColorStyle(this.color);
+  }
+
  protected render(): TemplateResult {
    return html`
      <ha-tooltip
@@ -36,10 +62,6 @@ class HaLabel extends LitElement {
        :host {
          --ha-label-text-color: var(--primary-text-color);
          --ha-label-icon-color: var(--primary-text-color);
-          --ha-label-background-color: rgba(
-            var(--rgb-primary-text-color),
-            0.15
-          );
          --ha-label-background-opacity: 1;
          border: 1px solid var(--outline-color);
          position: relative;
@@ -6,7 +6,6 @@ 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 { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import { labelsContext } from "../data/context";
@@ -17,6 +16,7 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./chips/ha-chip-set";
 import "./chips/ha-input-chip";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import { getLabelColorStyle } from "./ha-label";
 import "./ha-label-picker";
 import type { HaLabelPicker } from "./ha-label-picker";
 import "./ha-tooltip";
@@ -106,9 +106,14 @@ export class HaLabelsPicker extends LitElement {
            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),
+        }))
  );

  protected render(): TemplateResult {
@@ -135,9 +140,6 @@ export class HaLabelsPicker extends LitElement {
                (label) => label?.label_id,
                (label) => {
                  if (!label) return nothing;
-                  const color = label.color
-                    ? computeCssColor(label.color)
-                    : undefined;
                  const elementId = "label-" + label.label_id;
                  return html`
                    <ha-tooltip
@@ -154,7 +156,7 @@ export class HaLabelsPicker extends LitElement {
                      .disabled=${this.disabled}
                      .label=${label.name}
                      selected
-                      style=${color ? `--color: ${color}` : ""}
+                      style=${label.style}
                    >
                      ${label.icon
                        ? html`<ha-icon
@@ -239,8 +241,10 @@ export class HaLabelsPicker extends LitElement {
      height: var(--ha-space-8);
    }
    ha-input-chip {
-      --md-input-chip-selected-container-color: var(--color, var(--grey-color));
-      --ha-input-chip-selected-container-opacity: 0.5;
+      --md-input-chip-selected-container-color: var(
+        --ha-label-background-color,
+        var(--grey-color)
+      );
      --md-input-chip-selected-outline-width: 1px;
    }
    label {
@@ -14,9 +14,9 @@ import {
 } from "../data/supervisor/mounts";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-list-item";
 import "./ha-select";
+import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";

 const _BACKUP_DATA_DISK_ = "/backup";

@@ -129,7 +129,7 @@ class HaMountPicker extends LitElement {

  private async _getMounts() {
    try {
-      if (isComponentLoaded(this.hass, "hassio")) {
+      if (isComponentLoaded(this.hass.config, "hassio")) {
        this._mounts = await fetchSupervisorMounts(this.hass);
        if (this.usage === SupervisorMountUsage.BACKUP && !this.value) {
          this.value = this._mounts.default_backup_mount || _BACKUP_DATA_DISK_;
@@ -132,7 +132,6 @@ export class HaNavigationPicker extends LitElement {
        ? html`
            <ha-domain-icon
              slot="start"
-              .hass=${this.hass}
              .domain=${item.domain}
              brand-fallback
            ></ha-domain-icon>
@@ -158,7 +157,6 @@ export class HaNavigationPicker extends LitElement {
        ? html`
            <ha-domain-icon
              slot="start"
-              .hass=${this.hass}
              .domain=${item.domain}
              brand-fallback
            ></ha-domain-icon>
@@ -0,0 +1,144 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { PeriodKey, PeriodSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import { deepEqual } from "../../common/util/deep-equal";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import "../ha-form/ha-form";
+
+const PERIODS = {
+  none: undefined,
+  today: { calendar: { period: "day" } },
+  yesterday: { calendar: { period: "day", offset: -1 } },
+  tomorrow: { calendar: { period: "day", offset: 1 } },
+  this_week: { calendar: { period: "week" } },
+  last_week: { calendar: { period: "week", offset: -1 } },
+  next_week: { calendar: { period: "week", offset: 1 } },
+  this_month: { calendar: { period: "month" } },
+  last_month: { calendar: { period: "month", offset: -1 } },
+  next_month: { calendar: { period: "month", offset: 1 } },
+  this_year: { calendar: { period: "year" } },
+  last_year: { calendar: { period: "year", offset: -1 } },
+  next_7d: { calendar: { period: "day", offset: 7 } },
+  next_30d: { calendar: { period: "day", offset: 30 } },
+} as const;
+
+@customElement("ha-selector-period")
+export class HaPeriodSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: PeriodSelector;
+
+  @property({ attribute: false }) public value?: unknown;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  private _schema = memoizeOne(
+    (
+      selectedPeriodKey: PeriodKey | undefined,
+      selector: PeriodSelector,
+      localize: LocalizeFunc
+    ) =>
+      [
+        {
+          name: "period",
+          required: this.required,
+          selector:
+            selectedPeriodKey && selectedPeriodKey in this._periods(selector)
+              ? {
+                  select: {
+                    multiple: false,
+                    options: Object.keys(this._periods(selector)).map(
+                      (periodKey) => ({
+                        value: periodKey,
+                        label:
+                          localize(
+                            `ui.components.selectors.period.periods.${periodKey as PeriodKey}`
+                          ) || periodKey,
+                      })
+                    ),
+                  },
+                }
+              : { object: {} },
+        },
+      ] as const
+  );
+
+  protected render() {
+    const data = this._data(this.value, this.selector);
+
+    const schema = this._schema(
+      typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
+      this.selector,
+      this.hass.localize
+    );
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${schema}
+        .computeHelper=${this._computeHelperCallback}
+        .computeLabel=${this._computeLabelCallback}
+        .disabled=${this.disabled}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _periods = memoizeOne((selector: PeriodSelector) =>
+    Object.fromEntries(
+      Object.entries(PERIODS).filter(([key]) =>
+        selector.period?.options?.includes(key as any)
+      )
+    )
+  );
+
+  private _data = memoizeOne((value: unknown, selector: PeriodSelector) => {
+    for (const [periodKey, period] of Object.entries(this._periods(selector))) {
+      if (deepEqual(period, value)) {
+        return { period: periodKey };
+      }
+    }
+    return { period: value };
+  });
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (typeof newValue.period === "string") {
+      const periods = this._periods(this.selector);
+      if (newValue.period in periods) {
+        const period = this._periods(this.selector)[newValue.period];
+        fireEvent(this, "value-changed", { value: period });
+      }
+    } else {
+      fireEvent(this, "value-changed", { value: newValue.period });
+    }
+  }
+
+  private _computeHelperCallback = () => this.helper;
+
+  private _computeLabelCallback = () => this.label;
+
+  static styles = css`
+    :host {
+      position: relative;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-period": HaPeriodSelector;
+  }
+}
@@ -41,6 +41,7 @@ const LOAD_ELEMENTS = {
  number: () => import("./ha-selector-number"),
  numeric_threshold: () => import("./ha-selector-numeric-threshold"),
  object: () => import("./ha-selector-object"),
+  period: () => import("./ha-selector-period"),
  qr_code: () => import("./ha-selector-qr-code"),
  select: () => import("./ha-selector-select"),
  selector: () => import("./ha-selector-selector"),
@@ -1,19 +1,19 @@
-import type { PropertyValues } from "lit";
-import { html, css, LitElement, nothing } from "lit";
 import { mdiStarFourPoints } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";

-import { customElement, state, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
 import type {
  AITaskPreferences,
  GenDataTask,
  GenDataTaskResult,
 } from "../data/ai_task";
 import { fetchAITaskPreferences, generateDataAITask } from "../data/ai_task";
+import type { HomeAssistant } from "../types";
 import "./chips/ha-assist-chip";
 import "./ha-svg-icon";
-import type { HomeAssistant } from "../types";
-import { fireEvent } from "../common/dom/fire_event";
-import { isComponentLoaded } from "../common/config/is_component_loaded";

 declare global {
  interface HASSDomEvents {
@@ -56,7 +56,7 @@ export class HaSuggestWithAIButton extends LitElement {

  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
-    if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
+    if (!this.hass || !isComponentLoaded(this.hass.config, "ai_task")) {
      return;
    }
    fetchAITaskPreferences(this.hass).then((prefs) => {
@@ -1,294 +0,0 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "./input/ha-input";
-import type { HaInput } from "./input/ha-input";
-
-/**
- * Legacy wrapper around ha-input that preserves the mwc-textfield API.
- * New code should use ha-input directly.
- * @deprecated Use ha-input instead.
- */
-@customElement("ha-textfield")
-export class HaTextField extends LitElement {
-  @property({ type: String })
-  public value = "";
-
-  @property({ type: String })
-  public type:
-    | "text"
-    | "search"
-    | "tel"
-    | "url"
-    | "email"
-    | "password"
-    | "date"
-    | "month"
-    | "week"
-    | "time"
-    | "datetime-local"
-    | "number"
-    | "color" = "text";
-
-  @property({ type: String })
-  public label = "";
-
-  @property({ type: String })
-  public placeholder = "";
-
-  @property({ type: String })
-  public prefix = "";
-
-  @property({ type: String })
-  public suffix = "";
-
-  @property({ type: Boolean })
-  // @ts-ignore
-  public icon = false;
-
-  @property({ type: Boolean })
-  // @ts-ignore
-  // eslint-disable-next-line lit/attribute-names
-  public iconTrailing = false;
-
-  @property({ type: Boolean })
-  public disabled = false;
-
-  @property({ type: Boolean })
-  public required = false;
-
-  @property({ type: Number, attribute: "minlength" })
-  public minLength = -1;
-
-  @property({ type: Number, attribute: "maxlength" })
-  public maxLength = -1;
-
-  @property({ type: Boolean, reflect: true })
-  public outlined = false;
-
-  @property({ type: String })
-  public helper = "";
-
-  @property({ type: Boolean, attribute: "validateoninitialrender" })
-  public validateOnInitialRender = false;
-
-  @property({ type: String, attribute: "validationmessage" })
-  public validationMessage = "";
-
-  @property({ type: Boolean, attribute: "autovalidate" })
-  public autoValidate = false;
-
-  @property({ type: String })
-  public pattern = "";
-
-  @property()
-  public min: number | string = "";
-
-  @property()
-  public max: number | string = "";
-
-  @property()
-  public step: number | "any" | null = null;
-
-  @property({ type: Number })
-  public size: number | null = null;
-
-  @property({ type: Boolean, attribute: "helperpersistent" })
-  public helperPersistent = false;
-
-  @property({ attribute: "charcounter" })
-  public charCounter: boolean | "external" | "internal" = false;
-
-  @property({ type: Boolean, attribute: "endaligned" })
-  public endAligned = false;
-
-  @property({ type: String, attribute: "inputmode" })
-  public inputMode = "";
-
-  @property({ type: Boolean, reflect: true, attribute: "readonly" })
-  public readOnly = false;
-
-  @property({ type: String })
-  public name = "";
-
-  @property({ type: String })
-  // eslint-disable-next-line lit/no-native-attributes
-  public autocapitalize = "";
-
-  // --- ha-textfield-specific properties ---
-
-  @property({ type: Boolean })
-  public invalid = false;
-
-  @property({ attribute: "error-message" })
-  public errorMessage?: string;
-
-  @property()
-  public autocomplete?: string;
-
-  @property({ type: Boolean })
-  public autocorrect = true;
-
-  @property({ attribute: "input-spellcheck" })
-  public inputSpellcheck?: string;
-
-  @query("ha-input")
-  private _haInput?: HaInput;
-
-  static shadowRootOptions: ShadowRootInit = {
-    mode: "open",
-    delegatesFocus: true,
-  };
-
-  public get formElement(): HTMLInputElement | undefined {
-    return (this._haInput as any)?._input?.input;
-  }
-
-  public select(): void {
-    this._haInput?.select();
-  }
-
-  public setSelectionRange(
-    selectionStart: number,
-    selectionEnd: number,
-    selectionDirection?: "forward" | "backward" | "none"
-  ): void {
-    this._haInput?.setSelectionRange(
-      selectionStart,
-      selectionEnd,
-      selectionDirection
-    );
-  }
-
-  public setRangeText(
-    replacement: string,
-    start?: number,
-    end?: number,
-    selectMode?: "select" | "start" | "end" | "preserve"
-  ): void {
-    this._haInput?.setRangeText(replacement, start, end, selectMode);
-  }
-
-  public checkValidity(): boolean {
-    return this._haInput?.checkValidity() ?? true;
-  }
-
-  public reportValidity(): boolean {
-    return this._haInput?.reportValidity() ?? true;
-  }
-
-  public setCustomValidity(message: string): void {
-    this.validationMessage = message;
-    this.invalid = !!message;
-  }
-
-  /** No-op. Preserved for backward compatibility. */
-  public layout(): void {
-    // no-op — mwc-textfield needed this for notched outline recalculation
-  }
-
-  protected override firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    if (this.validateOnInitialRender) {
-      this.reportValidity();
-    }
-  }
-
-  protected override updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("invalid") && this._haInput) {
-      if (
-        this.invalid ||
-        (changedProperties.get("invalid") !== undefined && !this.invalid)
-      ) {
-        this.reportValidity();
-      }
-    }
-  }
-
-  protected override render(): TemplateResult {
-    const errorMsg = this.errorMessage || this.validationMessage;
-    return html`
-      <ha-input
-        .type=${this.type}
-        .value=${this.value || undefined}
-        .label=${this.label}
-        .placeholder=${this.placeholder}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .readonly=${this.readOnly}
-        .pattern=${this.pattern || undefined}
-        .minlength=${this.minLength > 0 ? this.minLength : undefined}
-        .maxlength=${this.maxLength > 0 ? this.maxLength : undefined}
-        .min=${this.min !== "" ? this.min : undefined}
-        .max=${this.max !== "" ? this.max : undefined}
-        .step=${this.step ?? undefined}
-        .name=${this.name || undefined}
-        .autocomplete=${this.autocomplete}
-        .autocorrect=${this.autocorrect}
-        .spellcheck=${this.inputSpellcheck === "true"}
-        .inputmode=${this.inputMode}
-        .autocapitalize=${this.autocapitalize || ""}
-        .invalid=${this.invalid}
-        .validationMessage=${errorMsg || ""}
-        .autoValidate=${this.autoValidate}
-        .hint=${this.helper}
-        .withoutSpinButtons=${this.type === "number"}
-        .insetLabel=${this.prefix}
-        @input=${this._onInput}
-        @change=${this._onChange}
-      >
-        ${this.icon
-          ? html`<slot name="leadingIcon" slot="start"></slot>`
-          : nothing}
-        ${this.prefix
-          ? html`<span class="prefix" slot="start">${this.prefix}</span>`
-          : nothing}
-        ${this.suffix
-          ? html`<span class="suffix" slot="end">${this.suffix}</span>`
-          : nothing}
-        ${this.iconTrailing
-          ? html`<slot name="trailingIcon" slot="end"></slot>`
-          : nothing}
-      </ha-input>
-    `;
-  }
-
-  private _onInput(): void {
-    this.value = this._haInput?.value ?? "";
-  }
-
-  private _onChange(): void {
-    this.value = this._haInput?.value ?? "";
-  }
-
-  static override styles = css`
-    :host {
-      display: inline-flex;
-      flex-direction: column;
-      outline: none;
-    }
-
-    ha-input {
-      --ha-input-padding-bottom: 0;
-      width: 100%;
-    }
-
-    .prefix,
-    .suffix {
-      color: var(--secondary-text-color);
-    }
-
-    .prefix {
-      padding-top: var(--ha-space-3);
-      margin-inline-end: var(--text-field-prefix-padding-right);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-textfield": HaTextField;
-  }
-}
@@ -236,7 +236,8 @@ export class HaInput extends LitElement {
    this,
    "label",
    "hint",
-    "input"
+    "input",
+    "start"
  );

  static shadowRootOptions: ShadowRootInit = {
@@ -321,6 +322,8 @@ export class HaInput extends LitElement {
      ? false
      : this._hasSlotController.test("hint");

+    const hasStartSlot = this._hasSlotController.test("start");
+
    return html`
      <wa-input
        .type=${this.type}
@@ -351,7 +354,8 @@ export class HaInput extends LitElement {
          invalid: this.invalid || this._invalid,
          "label-raised":
            (this.value !== undefined && this.value !== "") ||
-            (this.label && this.placeholder),
+            (this.label && this.placeholder) ||
+            (hasStartSlot && this.insetLabel),
          "no-label": !this.label,
          "hint-hidden":
            !this.hint &&
@@ -592,6 +596,7 @@ export class HaInput extends LitElement {
    }
    :host([type="color"]) wa-input::part(input) {
      padding-top: var(--ha-space-6);
+      padding-bottom: 2px;
      cursor: pointer;
    }
    :host([type="color"]) wa-input.no-label::part(input) {
@@ -1,10 +1,10 @@
 import { animate } from "@lit-labs/motion";

 import {
-  mdiClose,
-  mdiDelete,
  mdiCheckboxBlankOutline,
  mdiCheckboxMarkedOutline,
+  mdiClose,
+  mdiDelete,
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -26,8 +26,8 @@ import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-check-list-item";
 import "../ha-dialog";
-import "../ha-dialog-header";
 import "../ha-dialog-footer";
+import "../ha-dialog-header";
 import "../ha-icon-button";
 import "../ha-list";
 import "../ha-spinner";
@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                  )}
                </ha-list>
              `}
-        ${isComponentLoaded(this.hass, "hassio")
+        ${isComponentLoaded(this.hass.config, "hassio")
          ? html`<ha-tip .hass=${this.hass}>
              ${this.hass.localize(
                "ui.components.media-browser.file_management.tip_media_storage",
@@ -524,7 +524,13 @@ export class HaTargetPickerItemRow extends LitElement {
      }

      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
+        name: device
+          ? computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
+          : item,
        context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
        fallbackIconPath: mdiDevices,
        notFound: !device,
@@ -161,7 +161,13 @@ export class HaTargetPickerValueChip extends LitElement {
      }

      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
+        name: device
+          ? computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
+          : itemId,
        fallbackIconPath: mdiDevices,
      };
    }
@@ -1,3 +1,4 @@
+import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";

@@ -12,6 +13,8 @@ import { customElement, property } from "lit/decorators";
 * @slot primary - The primary text container.
 * @slot secondary - The secondary text container.
 *
+ * @property {boolean} secondaryLoading - Whether the secondary text is loading. Shows a skeleton placeholder.
+ *
 * @cssprop --ha-tile-info-primary-font-size - The font size of the primary text. defaults to `var(--ha-font-size-m)`.
 * @cssprop --ha-tile-info-primary-font-weight - The font weight of the primary text. defaults to `var(--ha-font-weight-medium)`.
 * @cssprop --ha-tile-info-primary-line-height - The line height of the primary text. defaults to `var(--ha-line-height-normal)`.
@@ -29,21 +32,31 @@ export class HaTileInfo extends LitElement {

  @property() public secondary?: string;

+  @property({ type: Boolean, attribute: "secondary-loading" })
+  public secondaryLoading = false;
+
  protected render() {
    return html`
      <div class="info">
        <slot name="primary" class="primary">
          <span>${this.primary}</span>
        </slot>
-        <slot name="secondary" class="secondary">
-          <span>${this.secondary}</span>
-        </slot>
+        ${this.secondaryLoading
+          ? html`<div class="secondary">
+              <wa-skeleton class="placeholder" effect="pulse"></wa-skeleton>
+            </div>`
+          : html`<slot name="secondary" class="secondary">
+              <span>${this.secondary}</span>
+            </slot>`}
      </div>
    `;
  }

  static styles = css`
    :host {
+      display: block;
+      width: 100%;
+      min-width: 0;
      --tile-info-primary-font-size: var(
        --ha-tile-info-primary-font-size,
        var(--ha-font-size-m)
@@ -112,6 +125,15 @@ export class HaTileInfo extends LitElement {
      line-height: var(--tile-info-secondary-line-height);
      letter-spacing: var(--tile-info-secondary-letter-spacing);
      color: var(--tile-info-secondary-color);
+      width: 100%;
+    }
+    .placeholder {
+      width: 140px;
+      max-width: 100%;
+      height: var(--tile-info-secondary-font-size);
+      --wa-border-radius-pill: var(--ha-border-radius-sm);
+      --color: var(--ha-color-fill-neutral-normal-resting);
+      --sheen-color: var(--ha-color-fill-neutral-loud-resting);
    }
  `;
 }
@@ -32,7 +32,9 @@ export class HaTraceLogbook extends LitElement {
          ></hat-logbook-note>
        `
      : html`<div class="padded-box">
-          No Logbook entries found for this step.
+          ${this.hass.localize(
+            "ui.panel.config.automation.trace.path.no_logbook_entries"
+          )}
        </div>`;
  }

@@ -826,16 +826,16 @@ const describeLegacyTrigger = (
      : trigger.entity_id;

    let offsetChoice = "other";
-    let offset: string | string[] = "";
+    let offset = "";
    if (trigger.offset) {
      offsetChoice = trigger.offset.startsWith("-") ? "before" : "after";
-      offset = trigger.offset.startsWith("-")
+      const parts = trigger.offset.startsWith("-")
        ? trigger.offset.substring(1).split(":")
        : trigger.offset.split(":");
      const duration = {
-        hours: offset.length > 0 ? +offset[0] : 0,
-        minutes: offset.length > 1 ? +offset[1] : 0,
-        seconds: offset.length > 2 ? +offset[2] : 0,
+        hours: parts.length > 0 ? +parts[0] : 0,
+        minutes: parts.length > 1 ? +parts[1] : 0,
+        seconds: parts.length > 2 ? +parts[2] : 0,
      };
      offset = formatDurationLong(hass.locale, duration);
      if (offset === "") {
@@ -1,7 +1,7 @@
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import type { HaDevicePickerDeviceFilterFunc } from "../../components/device/ha-device-picker";
 import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
 import type { FuseWeightedKey } from "../../resources/fuseMultiTerm";
@@ -144,11 +144,12 @@ export const getDevices = (
  const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
    const deviceName = computeDeviceNameDisplay(
      device,
-      hass,
+      hass.localize,
+      hass.states,
      deviceEntityLookup[device.id]
    );

-    const { area } = getDeviceContext(device, hass);
+    const area = getDeviceArea(device, hass.areas);

    const areaName = area ? computeAreaName(area) : undefined;

@@ -13,7 +13,7 @@ export const fetchErrorLog = (hass: HomeAssistant) =>
  hass.callApi<string>("GET", "error_log");

 export const getErrorLogDownloadUrl = (hass: HomeAssistant) =>
-  isComponentLoaded(hass, "hassio") &&
+  isComponentLoaded(hass.config, "hassio") &&
  atLeastVersion(hass.config.version, 2025, 10)
    ? "/api/hassio/core/logs/latest"
    : "/api/error_log";
@@ -20,6 +20,7 @@ export interface CoreFrontendSystemData {
 export interface HomeFrontendSystemData {
  favorite_entities?: string[];
  welcome_banner_dismissed?: boolean;
+  hidden_summaries?: string[];
 }

 declare global {
@@ -15,7 +15,7 @@ interface HassioHardwareAudioList {
  };
 }

-interface HardwareDevice {
+export interface HardwareDevice {
  attributes: Record<string, string>;
  by_id: null | string;
  dev_path: string;
@@ -48,8 +48,8 @@ import {
  mdiScriptText,
  mdiSpeakerMessage,
  mdiStarFourPoints,
-  mdiThermostat,
  mdiThermometer,
+  mdiThermostat,
  mdiTimerOutline,
  mdiToggleSwitch,
  mdiWater,
@@ -58,7 +58,7 @@ import {
  mdiWhiteBalanceSunny,
  mdiWindowClosed,
 } from "@mdi/js";
-import type { HassEntity } from "home-assistant-js-websocket";
+import type { Connection, HassEntity } from "home-assistant-js-websocket";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { atLeastVersion } from "../common/config/version";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -72,6 +72,7 @@ import type {
 } from "./entity/entity_registry";

 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
+import { callWS } from "../util/websocket";
 import { getConditionDomain, getConditionObjectId } from "./condition";
 import { getTriggerDomain, getTriggerObjectId } from "./trigger";

@@ -253,18 +254,19 @@ interface CategoryType {
 }

 export const getHassIcons = async <T extends IconCategory>(
-  hass: HomeAssistant,
+  connection: Connection,
  category: T,
  integration?: string
 ) =>
-  hass.callWS<IconResources<CategoryType[T]>>({
+  callWS<IconResources<CategoryType[T]>>(connection, {
    type: "frontend/get_icons",
    category,
    integration,
  });

 export const getPlatformIcons = async (
-  hass: HomeAssistant,
+  hassConfig: HomeAssistant["config"],
+  connection: Connection,
  integration: string,
  force = false
 ): Promise<PlatformIcons | undefined> => {
@@ -272,12 +274,12 @@ export const getPlatformIcons = async (
    return resources.entity[integration];
  }
  if (
-    !isComponentLoaded(hass, integration) ||
-    !atLeastVersion(hass.connection.haVersion, 2024, 2)
+    !isComponentLoaded(hassConfig, integration) ||
+    !atLeastVersion(connection.haVersion, 2024, 2)
  ) {
    return undefined;
  }
-  const result = getHassIcons(hass, "entity", integration).then(
+  const result = getHassIcons(connection, "entity", integration).then(
    (res) => res?.resources[integration]
  );
  resources.entity[integration] = result;
@@ -285,15 +287,13 @@ export const getPlatformIcons = async (
 };

 export const getComponentIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
  domain: string,
  force = false
 ): Promise<ComponentIcons | undefined> => {
  // For Cast, old instances can connect to it.
-  if (
-    __BACKWARDS_COMPAT__ &&
-    !atLeastVersion(hass.connection.haVersion, 2024, 2)
-  ) {
+  if (__BACKWARDS_COMPAT__ && !atLeastVersion(connection.haVersion, 2024, 2)) {
    return import("../fake_data/entity_component_icons")
      .then((mod) => mod.ENTITY_COMPONENT_ICONS)
      .then((res) => res[domain]);
@@ -307,12 +307,12 @@ export const getComponentIcons = async (
    return resources.entity_component.resources.then((res) => res[domain]);
  }

-  if (!isComponentLoaded(hass, domain)) {
+  if (!isComponentLoaded(hassConfig, domain)) {
    return undefined;
  }
-  resources.entity_component.domains = [...hass.config.components];
+  resources.entity_component.domains = [...hassConfig.components];
  resources.entity_component.resources = getHassIcons(
-    hass,
+    connection,
    "entity_component"
  ).then((result) => result.resources);
  return resources.entity_component.resources.then((res) => res[domain]);
@@ -332,10 +332,12 @@ export const getCategoryIcons = async <
        Record<string, CategoryType[T]>
      >;
    }
-    resources[category].all = getHassIcons(hass, category).then((res) => {
-      resources[category].domains = res.resources as any;
-      return res?.resources as Record<string, CategoryType[T]>;
-    }) as any;
+    resources[category].all = getHassIcons(hass.connection, category).then(
+      (res) => {
+        resources[category].domains = res.resources as any;
+        return res?.resources as Record<string, CategoryType[T]>;
+      }
+    ) as any;
    return resources[category].all as Promise<Record<string, CategoryType[T]>>;
  }
  if (!force && domain in resources[category].domains) {
@@ -347,10 +349,10 @@ export const getCategoryIcons = async <
      return resources[category].domains[domain] as Promise<CategoryType[T]>;
    }
  }
-  if (!isComponentLoaded(hass, domain)) {
+  if (!isComponentLoaded(hass.config, domain)) {
    return undefined;
  }
-  const result = getHassIcons(hass, category, domain);
+  const result = getHassIcons(hass.connection, category, domain);
  resources[category].domains[domain] = result.then(
    (res) => res?.resources[domain]
  ) as any;
@@ -491,7 +493,11 @@ const getEntityIcon = async (

  let icon: string | undefined;
  if (translation_key && platform) {
-    const platformIcons = await getPlatformIcons(hass, platform);
+    const platformIcons = await getPlatformIcons(
+      hass.config,
+      hass.connection,
+      platform
+    );
    if (platformIcons) {
      const translations = platformIcons[domain]?.[translation_key];

@@ -504,7 +510,11 @@ const getEntityIcon = async (
  }

  if (!icon) {
-    const entityComponentIcons = await getComponentIcons(hass, domain);
+    const entityComponentIcons = await getComponentIcons(
+      hass.connection,
+      hass.config,
+      domain
+    );
    if (entityComponentIcons) {
      const translations =
        (device_class && entityComponentIcons[device_class]) ||
@@ -535,7 +545,11 @@ export const attributeIcon = async (
    (state.attributes[attribute] as string | number | undefined);

  if (translation_key && platform) {
-    const platformIcons = await getPlatformIcons(hass, platform);
+    const platformIcons = await getPlatformIcons(
+      hass.config,
+      hass.connection,
+      platform
+    );
    if (platformIcons) {
      icon = getIconFromTranslations(
        value,
@@ -544,7 +558,11 @@ export const attributeIcon = async (
    }
  }
  if (!icon) {
-    const entityComponentIcons = await getComponentIcons(hass, domain);
+    const entityComponentIcons = await getComponentIcons(
+      hass.connection,
+      hass.config,
+      domain
+    );
    if (entityComponentIcons) {
      const translations =
        (deviceClass &&
@@ -572,7 +590,7 @@ export const triggerIcon = async (
    icon = trgrIcon?.trigger;
  }
  if (!icon) {
-    icon = await domainIcon(hass, domain);
+    icon = await domainIcon(hass.connection, hass.config, domain);
  }
  return icon;
 };
@@ -591,7 +609,7 @@ export const conditionIcon = async (
    icon = condIcon?.condition;
  }
  if (!icon) {
-    icon = await domainIcon(hass, domain);
+    icon = await domainIcon(hass.connection, hass.config, domain);
  }
  return icon;
 };
@@ -609,7 +627,7 @@ export const serviceIcon = async (
    icon = srvceIcon?.service;
  }
  if (!icon) {
-    icon = await domainIcon(hass, domain);
+    icon = await domainIcon(hass.connection, hass.config, domain);
  }
  return icon;
 };
@@ -630,12 +648,17 @@ export const serviceSectionIcon = async (
 };

 export const domainIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
  domain: string,
  deviceClass?: string,
  state?: string
 ): Promise<string | undefined> => {
-  const entityComponentIcons = await getComponentIcons(hass, domain);
+  const entityComponentIcons = await getComponentIcons(
+    connection,
+    hassConfig,
+    domain
+  );
  if (entityComponentIcons) {
    const translations =
      (deviceClass && entityComponentIcons[deviceClass]) ||
@@ -52,7 +52,7 @@ export const canCommissionMatterExternal = (hass: HomeAssistant) =>
  hass.auth.external?.config.canCommissionMatter;

 export const startExternalCommissioning = async (hass: HomeAssistant) => {
-  if (isComponentLoaded(hass, "thread")) {
+  if (isComponentLoaded(hass.config, "thread")) {
    const datasets = await listThreadDataSets(hass);
    const preferredDataset = datasets.datasets.find(
      (dataset) => dataset.preferred
@@ -5,11 +5,11 @@ import {
  mdiServerNetwork,
  mdiStorePlus,
 } from "@mdi/js";
+import { componentsWithService } from "../common/config/components_with_service";
 import {
  filterNavigationPages,
  type NavigationFilterOptions,
 } from "../common/config/filter_navigation_pages";
-import { componentsWithService } from "../common/config/components_with_service";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
@@ -163,7 +163,7 @@ export const generateNavigationCommands = (
    filterOptions
  );
  const appItems: BaseNavigationCommand[] = [];
-  if (hass.user?.is_admin && isComponentLoaded(hass, "hassio")) {
+  if (hass.user?.is_admin && isComponentLoaded(hass.config, "hassio")) {
    appItems.push({
      path: "/config/apps/available",
      icon_path: mdiStorePlus,
@@ -60,6 +60,7 @@ export type Selector =
  | NumberSelector
  | NumericThresholdSelector
  | ObjectSelector
+  | PeriodSelector
  | AssistPipelineSelector
  | QRCodeSelector
  | SelectSelector
@@ -392,6 +393,27 @@ export interface ObjectSelector {
  } | null;
 }

+export type PeriodKey =
+  | "today"
+  | "yesterday"
+  | "tomorrow"
+  | "this_week"
+  | "last_week"
+  | "next_week"
+  | "this_month"
+  | "last_month"
+  | "next_month"
+  | "this_year"
+  | "last_year"
+  | "next_7d"
+  | "next_30d"
+  | "none";
+export interface PeriodSelector {
+  period: {
+    options: readonly PeriodKey[];
+  } | null;
+}
+
 export interface AssistPipelineSelector {
  assist_pipeline: {
    include_last_used?: boolean;
@@ -1,5 +1,6 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
+import { callWS } from "../util/websocket";

 export enum InclusionState {
  /** The controller isn't doing anything regarding inclusion. */
@@ -325,7 +326,10 @@ export interface ZWaveJSRefreshNodeStatusMessage {

 export interface ZWaveJSRebuildRoutesStatusMessage {
  event: string;
-  rebuild_routes_status: Record<number, string>;
+  rebuild_routes_status: Record<
+    number,
+    "pending" | "skipped" | "done" | "failed"
+  >;
 }

 export interface ZWaveJSControllerStatisticsUpdatedMessage {
@@ -475,7 +479,7 @@ export const invokeZWaveCCApi = <T = unknown>(
  });

 export const fetchZwaveNetworkStatus = (
-  hass: HomeAssistant,
+  connection: Connection,
  device_or_entry_id: {
    device_id?: string;
    entry_id?: string;
@@ -487,7 +491,7 @@ export const fetchZwaveNetworkStatus = (
  if (!device_or_entry_id.device_id && !device_or_entry_id.entry_id) {
    throw new Error("Either device or entry ID should be supplied.");
  }
-  return hass.callWS({
+  return callWS<ZWaveJSNetwork>(connection, {
    type: "zwave_js/network_status",
    device_id: device_or_entry_id.device_id,
    entry_id: device_or_entry_id.entry_id,
@@ -814,35 +818,32 @@ export const removeFailedZwaveNode = (
  );

 export const rebuildZwaveNetworkRoutes = (
-  hass: HomeAssistant,
+  connection: Connection,
  entry_id: string
 ): Promise<UnsubscribeFunc> =>
-  hass.callWS({
+  callWS(connection, {
    type: "zwave_js/begin_rebuilding_routes",
    entry_id,
  });

 export const stopRebuildingZwaveNetworkRoutes = (
-  hass: HomeAssistant,
+  connection: Connection,
  entry_id: string
 ): Promise<UnsubscribeFunc> =>
-  hass.callWS({
+  callWS(connection, {
    type: "zwave_js/stop_rebuilding_routes",
    entry_id,
  });

 export const subscribeRebuildZwaveNetworkRoutesProgress = (
-  hass: HomeAssistant,
+  connection: Connection,
  entry_id: string,
  callbackFunction: (message: ZWaveJSRebuildRoutesStatusMessage) => void
 ): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(
-    (message: any) => callbackFunction(message),
-    {
-      type: "zwave_js/subscribe_rebuild_routes_progress",
-      entry_id,
-    }
-  );
+  connection.subscribeMessage((message: any) => callbackFunction(message), {
+    type: "zwave_js/subscribe_rebuild_routes_progress",
+    entry_id,
+  });

 export const subscribeZwaveControllerStatistics = (
  hass: HomeAssistant,
@@ -338,7 +338,7 @@ class EntityPreviewRow extends LitElement {
          .autoValidate=${stateObj.attributes.pattern}
          .pattern=${stateObj.attributes.pattern}
          .type=${stateObj.attributes.mode}
-          placeholder=${this.hass!.localize("ui.card.text.emtpy_value")}
+          .placeholder=${this.hass!.localize("ui.card.text.empty_value")}
        ></ha-input>
      `;
    }
@@ -170,7 +170,8 @@ class StepFlowCreateEntry extends LitElement {
                          )}
                          .placeholder=${computeDeviceNameDisplay(
                            device,
-                            this.hass
+                            this.hass.localize,
+                            this.hass.states
                          )}
                          .value=${this._deviceUpdate[device.id]?.name ??
                          computeDeviceName(device)}
@@ -73,7 +73,6 @@ class DialogBox extends LitElement {

    return html`
      <ha-dialog
-        .hass=${this.hass}
        .open=${this._open}
        type=${confirmPrompt ? "alert" : "standard"}
        ?prevent-scrim-close=${confirmPrompt}
@@ -104,6 +103,9 @@ class DialogBox extends LitElement {
              : nothing}
            ${dialogTitle}
          </span>
+          ${this._params.subtitle
+            ? html`<span slot="subtitle">${this._params.subtitle}</span>`
+            : nothing}
        </ha-dialog-header>
        <div id="dialog-box-description">
          ${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
@@ -5,6 +5,7 @@ interface BaseDialogBoxParams {
  confirmText?: string;
  text?: string | TemplateResult;
  title?: string;
+  subtitle?: string;
  warning?: boolean;
 }

@@ -177,10 +177,7 @@ export const showDialog = async (
    throw new Error("Unknown dialog type loaded");
  }

-  const targetParent = (parentElement || element).shadowRoot!;
-  if (dialogElement!.parentNode !== targetParent) {
-    targetParent.appendChild(dialogElement!);
-  }
+  (parentElement || element).shadowRoot!.appendChild(dialogElement!);

  return true;
 };
@@ -3,9 +3,9 @@ import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeDomain } from "../../common/entity/compute_domain";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
+import { isNumericEntity } from "../../data/history";
 import { CONTINUOUS_DOMAINS } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";
-import { isNumericEntity } from "../../data/history";

 export const MORE_INFO_VIEWS = [
  "info",
@@ -113,7 +113,7 @@ export const computeShowHistoryComponent = (
  hass: HomeAssistant,
  entityId: string
 ) =>
-  isComponentLoaded(hass, "history") &&
+  isComponentLoaded(hass.config, "history") &&
  !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId));

 export const computeShowLogBookComponent = (
@@ -121,7 +121,7 @@ export const computeShowLogBookComponent = (
  entityId: string,
  sensorNumericalDeviceClasses: string[] = []
 ): boolean => {
-  if (!isComponentLoaded(hass, "logbook")) {
+  if (!isComponentLoaded(hass.config, "logbook")) {
    return false;
  }

@@ -355,7 +355,7 @@ class MoreInfoUpdate extends LitElement {
      this._fetchEntitySources().then(() => {
        const type = getUpdateType(this.stateObj!, this._entitySources!);
        if (
-          isComponentLoaded(this.hass, "hassio") &&
+          isComponentLoaded(this.hass.config, "hassio") &&
          ["addon", "home_assistant", "home_assistant_os"].includes(type)
        ) {
          this._fetchUpdateBackupConfig(type);
@@ -19,8 +19,8 @@ import type {
 } from "../../data/recorder";
 import { fetchStatistics, getStatisticMetadata } from "../../data/recorder";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
-import type { HomeAssistant } from "../../types";
 import { haStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";

 declare global {
  interface HASSDomEvents {
@@ -57,7 +57,7 @@ export class MoreInfoHistory extends LitElement {
      return nothing;
    }

-    return html`${isComponentLoaded(this.hass, "history")
+    return html`${isComponentLoaded(this.hass.config, "history")
      ? html`<div class="header">
            <div>
              <h2>
@@ -204,7 +204,7 @@ export class MoreInfoHistory extends LitElement {

  private async _getStateHistory(): Promise<void> {
    if (
-      isComponentLoaded(this.hass, "recorder") &&
+      isComponentLoaded(this.hass.config, "recorder") &&
      computeDomain(this.entityId) === "sensor"
    ) {
      const stateObj = this.hass.states[this.entityId];
@@ -221,7 +221,7 @@ export class MoreInfoHistory extends LitElement {
      }
    }

-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
      return;
    }
    if (this._subscribed) {
@@ -6,8 +6,8 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { createSearchParam } from "../../common/url/search-params";
 import "../../panels/logbook/ha-logbook";
-import type { HomeAssistant } from "../../types";
 import { haStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";

@customElement("ha-more-info-logbook")
 export class MoreInfoLogbook extends LitElement {
@@ -22,7 +22,7 @@ export class MoreInfoLogbook extends LitElement {
  private _entityIdAsList = memoizeOne((entityId: string) => [entityId]);

  protected render() {
-    if (!isComponentLoaded(this.hass, "logbook") || !this.entityId) {
+    if (!isComponentLoaded(this.hass.config, "logbook") || !this.entityId) {
      return nothing;
    }
    const stateObj = this.hass.states[this.entityId];
@@ -129,7 +129,10 @@ export class QuickBar extends LitElement {
      console.error("Error fetching config entries for quick bar", err);
    }

-    if (this.hass.user?.is_admin && isComponentLoaded(this.hass, "hassio")) {
+    if (
+      this.hass.user?.is_admin &&
+      isComponentLoaded(this.hass.config, "hassio")
+    ) {
      try {
        const hassioAddonsInfo = await fetchHassioAddonsInfo(this.hass);
        this._addons = hassioAddonsInfo.addons;
@@ -303,7 +306,6 @@ export class QuickBar extends LitElement {
                <ha-domain-icon
                  slot="start"
                  style="margin: var(--ha-space-1);"
-                  .hass=${this.hass}
                  .domain=${item.domain}
                  brand-fallback
                ></ha-domain-icon>
@@ -11,11 +11,11 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-adaptive-dialog";
 import "../../components/ha-alert";
 import "../../components/ha-expansion-panel";
 import "../../components/ha-fade-in";
 import "../../components/ha-icon-next";
-import "../../components/ha-adaptive-dialog";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -59,7 +59,7 @@ class DialogRestart extends LitElement {
  private _dialogOpen = false;

  public async showDialog(): Promise<void> {
-    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
+    const isHassioLoaded = isComponentLoaded(this.hass.config, "hassio");

    this._open = true;
    this._dialogOpen = true;
@@ -103,7 +103,6 @@ class DialogRestart extends LitElement {
      return nothing;
    }

-    const showReload = this.hass.userData?.showAdvanced;
    const showRebootShutdown = !!this._hostInfo;

    const dialogTitle = this.hass.localize("ui.dialogs.restart.heading");
@@ -135,30 +134,24 @@ class DialogRestart extends LitElement {
              `
            : html`
                <ha-md-list dialogInitialFocus>
-                  ${showReload
-                    ? html`
-                        <ha-md-list-item
-                          type="button"
-                          @click=${this._reload}
-                          .disabled=${this._loadingBackupInfo}
-                        >
-                          <div slot="headline">
-                            ${this.hass.localize(
-                              "ui.dialogs.restart.reload.title"
-                            )}
-                          </div>
-                          <div slot="supporting-text">
-                            ${this.hass.localize(
-                              "ui.dialogs.restart.reload.description"
-                            )}
-                          </div>
-                          <div slot="start" class="icon-background reload">
-                            <ha-svg-icon .path=${mdiAutoFix}></ha-svg-icon>
-                          </div>
-                          <ha-icon-next slot="end"></ha-icon-next>
-                        </ha-md-list-item>
-                      `
-                    : nothing}
+                  <ha-md-list-item
+                    type="button"
+                    @click=${this._reload}
+                    .disabled=${this._loadingBackupInfo}
+                  >
+                    <div slot="headline">
+                      ${this.hass.localize("ui.dialogs.restart.reload.title")}
+                    </div>
+                    <div slot="supporting-text">
+                      ${this.hass.localize(
+                        "ui.dialogs.restart.reload.description"
+                      )}
+                    </div>
+                    <div slot="start" class="icon-background reload">
+                      <ha-svg-icon .path=${mdiAutoFix}></ha-svg-icon>
+                    </div>
+                    <ha-icon-next slot="end"></ha-icon-next>
+                  </ha-md-list-item>
                  <ha-md-list-item
                    type="button"
                    .action=${"restart"}
@@ -182,7 +182,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
        await this._pickOrCreatePipelineExists();
        return;
      }
-      if (!isComponentLoaded(this.hass, "hassio")) {
+      if (!isComponentLoaded(this.hass.config, "hassio")) {
        this._state = "NOT_SUPPORTED";
        return;
      }
@@ -20,9 +20,9 @@ import { getLanguageScores, listAgents } from "../../data/conversation";
 import { listSTTEngines } from "../../data/stt";
 import { listTTSEngines, listTTSVoices } from "../../data/tts";
 import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import { AssistantSetupStyles } from "./styles";
 import { STEP } from "./voice-assistant-setup-dialog";
-import { documentationUrl } from "../../util/documentation-url";

 const OPTIONS = ["cloud", "focused_local", "full_local"] as const;

@@ -251,7 +251,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
  }

  private async _hasCloud(): Promise<boolean> {
-    if (!isComponentLoaded(this.hass, "cloud")) {
+    if (!isComponentLoaded(this.hass.config, "cloud")) {
      return false;
    }
    const cloudStatus = await fetchCloudStatus(this.hass);
@@ -104,7 +104,11 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
              .label=${this.hass.localize(
                "ui.panel.config.integrations.config_flow.device_name"
              )}
-              .placeholder=${computeDeviceNameDisplay(device, this.hass)}
+              .placeholder=${computeDeviceNameDisplay(
+                device,
+                this.hass.localize,
+                this.hass.states
+              )}
              .value=${this._deviceName ?? computeDeviceName(device)}
              @change=${this._deviceNameChanged}
            ></ha-input>
@@ -505,7 +505,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
                  `
                : ""}
              <ha-data-table
-                .hass=${this.hass}
                .narrow=${this.narrow}
                .columns=${this.columns}
                .data=${this.data}
@@ -1,10 +1,13 @@
-import type { ReactiveElement } from "lit";
+import { consume } from "@lit/context";
+import type { PropertyValues, ReactiveElement } from "lit";
+import { state } from "lit/decorators";
 import type { HomeAssistant } from "../types";
-import {
-  setupMediaQueryListeners,
-  setupTimeListeners,
-} from "../common/condition/listeners";
-import type { Condition } from "../panels/lovelace/common/validate-condition";
+import { setupConditionListeners } from "../common/condition/listeners";
+import { maxColumnsContext } from "../panels/lovelace/common/context";
+import type {
+  Condition,
+  ConditionContext,
+} from "../panels/lovelace/common/validate-condition";

 type Constructor<T> = abstract new (...args: any[]) => T;

@@ -32,6 +35,7 @@ export interface ConditionalConfig {
 * - Sets up listeners when component connects to DOM
 * - Cleans up listeners when component disconnects from DOM
 * - Handles conditional visibility based on defined conditions
+ * - Consumes column count from the view via Lit Context
 */
 export const ConditionalListenerMixin = <
  TConfig extends ConditionalConfig = ConditionalConfig,
@@ -47,6 +51,12 @@ export const ConditionalListenerMixin = <

    public hass?: HomeAssistant;

+    @state()
+    @consume({ context: maxColumnsContext, subscribe: true })
+    protected _maxColumns?: number;
+
+    protected _conditionContext: ConditionContext = {};
+
    protected _updateElement?(config: TConfig): void;

    protected _updateVisibility?(conditionsMet?: boolean): void;
@@ -61,6 +71,20 @@ export const ConditionalListenerMixin = <
      this.clearConditionalListeners();
    }

+    protected willUpdate(changedProperties: PropertyValues) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.has("_maxColumns")) {
+        this._conditionContext = { max_columns: this._maxColumns };
+      }
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("_maxColumns")) {
+        this._updateVisibility?.();
+      }
+    }
+
    /**
     * Clear conditional listeners
     *
@@ -106,26 +130,18 @@ export const ConditionalListenerMixin = <
        return;
      }

-      const onUpdate = (conditionsMet: boolean) => {
-        if (this._updateVisibility) {
-          this._updateVisibility(conditionsMet);
-        } else if (this._updateElement && config) {
-          this._updateElement(config);
-        }
-      };
-
-      setupMediaQueryListeners(
+      setupConditionListeners(
        finalConditions,
        this.hass,
        (unsub) => this.addConditionalListener(unsub),
-        onUpdate
-      );
-
-      setupTimeListeners(
-        finalConditions,
-        this.hass,
-        (unsub) => this.addConditionalListener(unsub),
-        onUpdate
+        (conditionsMet) => {
+          if (this._updateVisibility) {
+            this._updateVisibility(conditionsMet);
+          } else if (this._updateElement && config) {
+            this._updateElement(config);
+          }
+        },
+        () => this._conditionContext
      );
    }
  }
@@ -192,7 +192,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
  }

  private async _scanUSBDevices() {
-    if (!isComponentLoaded(this.hass, "usb")) {
+    if (!isComponentLoaded(this.hass.config, "usb")) {
      return;
    }
    await scanUSBDevices(this.hass);
@@ -1038,6 +1038,7 @@ class SupervisorAppInfo extends LitElement {
  }

  private _updateComplete() {
+    this._scheduleDataUpdate();
    const eventdata = {
      success: true,
      response: undefined,
@@ -1059,11 +1060,16 @@ class SupervisorAppInfo extends LitElement {
      };
      fireEvent(this, "hass-api-called", eventdata);
    } catch (err: any) {
-      showAlertDialog(this, {
+      showConfirmationDialog(this, {
        title: this.hass.localize(
          "ui.panel.config.apps.dashboard.action_error.install"
        ),
        text: extractApiErrorMessage(err),
+        confirmText: this.hass.localize("ui.common.ok"),
+        dismissText: this.hass.localize(
+          "ui.panel.config.apps.dashboard.action_error.view_supervisor_logs"
+        ),
+        cancel: () => navigate("/config/logs?provider=supervisor"),
      });
    }
    button.progress = false;
@@ -9,7 +9,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { goBack, navigate } from "../../../common/navigate";
 import { extractSearchParam } from "../../../common/url/search-params";
 import type { HassioAddonDetails } from "../../../data/hassio/addon";
 import { fetchHassioAddonInfo } from "../../../data/hassio/addon";
@@ -234,7 +234,7 @@ class HaConfigAppDashboard extends LitElement {

    if (path === "uninstall") {
      // Navigate back to installed apps after uninstall
-      window.history.back();
+      goBack(this._fromStore ? "/config/apps/available" : "/config/apps");
    } else {
      // Reload app info
      await this._loadAddon();
@@ -108,7 +108,6 @@ export class HaConfigAppsRegistries extends LitElement {
        .header=${this.hass.localize("ui.panel.config.apps.store.registries")}
      >
        <ha-data-table
-          .hass=${this.hass}
          .columns=${this._columns(this.hass.localize)}
          .data=${this._registries}
          .noDataText=${this.hass.localize(
@@ -187,7 +187,6 @@ export class HaConfigAppsRepositories extends LitElement {
        .header=${this.hass.localize("ui.panel.config.apps.store.repositories")}
      >
        <ha-data-table
-          .hass=${this.hass}
          .columns=${this._columns(this.hass.localize, usedRepositories)}
          .data=${this._data(repositories)}
          .noDataText=${this.hass.localize(
@@ -18,6 +18,7 @@ import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
@@ -52,7 +53,6 @@ import {
  loadAreaRegistryDetailDialog,
  showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";

 declare interface NameAndEntity<EntityType extends HassEntity> {
  name: string;
@@ -166,7 +166,11 @@ class HaConfigAreaPage extends LitElement {
    // Pre-compute the entity and device names, so we can sort by them
    if (devices) {
      devices.forEach((entry) => {
-        entry.name = computeDeviceNameDisplay(entry, this.hass);
+        entry.name = computeDeviceNameDisplay(
+          entry,
+          this.hass.localize,
+          this.hass.states
+        );
      });
      sortDeviceRegistryByName(devices, this.hass.locale.language);
    }
@@ -190,7 +194,7 @@ class HaConfigAreaPage extends LitElement {
    let relatedScenes: NameAndEntity<SceneEntity>[] = [];
    let relatedScripts: NameAndEntity<ScriptEntity>[] = [];

-    if (isComponentLoaded(this.hass, "automation")) {
+    if (isComponentLoaded(this.hass.config, "automation")) {
      ({
        groupedEntities: groupedAutomations,
        relatedEntities: relatedAutomations,
@@ -200,7 +204,7 @@ class HaConfigAreaPage extends LitElement {
      ));
    }

-    if (isComponentLoaded(this.hass, "scene")) {
+    if (isComponentLoaded(this.hass.config, "scene")) {
      ({ groupedEntities: groupedScenes, relatedEntities: relatedScenes } =
        this._prepareEntities<SceneEntity>(
          groupedEntities.scene,
@@ -208,7 +212,7 @@ class HaConfigAreaPage extends LitElement {
        ));
    }

-    if (isComponentLoaded(this.hass, "script")) {
+    if (isComponentLoaded(this.hass.config, "script")) {
      ({ groupedEntities: groupedScripts, relatedEntities: relatedScripts } =
        this._prepareEntities<ScriptEntity>(
          groupedEntities.script,
@@ -328,7 +332,7 @@ class HaConfigAreaPage extends LitElement {
            </ha-card>
          </div>
          <div class="column">
-            ${isComponentLoaded(this.hass, "automation")
+            ${isComponentLoaded(this.hass.config, "automation")
              ? html`
                  <ha-card
                    outlined
@@ -378,7 +382,7 @@ class HaConfigAreaPage extends LitElement {
                  </ha-card>
                `
              : ""}
-            ${isComponentLoaded(this.hass, "scene")
+            ${isComponentLoaded(this.hass.config, "scene")
              ? html`
                  <ha-card
                    outlined
@@ -422,7 +426,7 @@ class HaConfigAreaPage extends LitElement {
                  </ha-card>
                `
              : ""}
-            ${isComponentLoaded(this.hass, "script")
+            ${isComponentLoaded(this.hass.config, "script")
              ? html`
                  <ha-card
                    outlined
@@ -464,7 +468,7 @@ class HaConfigAreaPage extends LitElement {
              : ""}
          </div>
          <div class="column">
-            ${isComponentLoaded(this.hass, "logbook")
+            ${isComponentLoaded(this.hass.config, "logbook")
              ? html`
                  <ha-card
                    outlined
@@ -198,7 +198,7 @@ export default class HaAutomationAction extends AutomationSortableListMixin<Acti
  private _addAction = (action: string, target?: HassServiceTarget) => {
    let actions: Action[];
    if (action === PASTE_VALUE) {
-      actions = this.actions.concat(deepClone(this._clipboard!.action));
+      actions = this.actions.concat(deepClone(this._clipboard!.action!));
    } else if (action in VIRTUAL_ACTIONS) {
      actions = this.actions.concat(VIRTUAL_ACTIONS[action]);
    } else if (isDynamic(action)) {
@@ -2,7 +2,6 @@ import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-textfield";
 import type { Action, ParallelAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
--- a/Show More
+++ b/Show More