Bumped version to 20260325.6

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/dependabot.yml

@@ -5,9 +5,6 @@ updates:
     schedule:
       interval: weekly
       time: "06:00"
-    cooldown:
-      default-days-before-reopen: 30
-      default-days: 7
     open-pull-requests-limit: 10
     labels:
       - Dependencies

.github/workflows/cast_deployment.yaml

@@ -8,9 +8,6 @@ on:
     branches:
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -27,7 +24,6 @@ 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
@@ -63,7 +59,6 @@ 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

.github/workflows/ci.yaml

@@ -18,9 +18,6 @@ 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
@@ -28,8 +25,6 @@ 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:
@@ -64,8 +59,6 @@ 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:
@@ -84,8 +77,6 @@ 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:

.github/workflows/codeql-analysis.yml

@@ -7,10 +7,6 @@ on:
     # The branches below must be a subset of the branches above
     branches: [dev]
 
-permissions:
-  contents: read
-  security-events: write
-
 jobs:
   analyze:
     name: Analyze
@@ -32,7 +28,6 @@ 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.
@@ -41,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/init@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.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@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/autobuild@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/analyze@38697555549f1db7851b81482ff19f1fa5c4fedc # v4.34.1

.github/workflows/demo_deployment.yaml

@@ -9,9 +9,6 @@ on:
       - dev
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -28,7 +25,6 @@ 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
@@ -64,7 +60,6 @@ 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

.github/workflows/design_deployment.yaml

@@ -5,9 +5,6 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -20,8 +17,6 @@ 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

.github/workflows/design_preview.yaml

@@ -10,9 +10,6 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -25,8 +22,6 @@ 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

.github/workflows/labeler.yaml

@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 
-on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
+on: pull_request_target
 
 jobs:
   triage:

.github/workflows/lock.yml

@@ -5,10 +5,6 @@ on:
   schedule:
     - cron: "0 * * * *"
 
-permissions:
-  issues: write
-  pull-requests: write
-
 jobs:
   lock:
     runs-on: ubuntu-latest

.github/workflows/nightly.yaml

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

.github/workflows/relative-ci.yaml

@@ -1,39 +1,25 @@
 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-frontend-modern:
-    name: Upload stats (frontend/modern)
+  upload:
+    name: Upload stats
     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.RELATIVE_CI_KEY_frontend_modern }}
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}
-          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
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}

.github/workflows/release.yaml

@@ -27,8 +27,6 @@ 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
@@ -36,12 +34,13 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@5752577ea7cc5aefb064b0b21432f18fe4d6ba90 # master
+        uses: home-assistant/actions/helpers/verify-version@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
@@ -63,10 +62,11 @@ jobs:
           skip-existing: true
 
       - name: Upload release assets
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
+        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
 
   wheels-init:
     name: Init wheels build
@@ -74,17 +74,15 @@ 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@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@2025.12.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -101,12 +99,11 @@ 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
@@ -116,11 +113,8 @@ jobs:
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder
-        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 .
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        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
+        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2.6.1
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/stale.yml

@@ -5,10 +5,6 @@ on:
   schedule:
     - cron: "0 * * * *"
 
-permissions:
-  issues: write
-  pull-requests: write
-
 jobs:
   stale:
     runs-on: ubuntu-latest

.github/workflows/translations.yaml

@@ -8,9 +8,6 @@ on:
     paths:
       - src/translations/en.json
 
-permissions:
-  contents: read
-
 jobs:
   upload:
     name: Upload
@@ -18,8 +15,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Upload Translations
         run: |

build-scripts/eslint.config.mjs

@@ -6,9 +6,9 @@ import rootConfig from "../eslint.config.mjs";
 export default tseslint.config(...rootConfig, {
   rules: {
     "no-console": "off",
-    "import-x/no-extraneous-dependencies": "off",
-    "import-x/extensions": "off",
-    "import-x/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
     "global-require": "off",
     "@typescript-eslint/no-require-imports": "off",
     "prefer-arrow-callback": "off",

build-scripts/gulp/download-translations.js

@@ -124,10 +124,7 @@ async function pollProcess(lokaliseApi, projectId, processId) {
 
     console.log(
       `Lokalise export process for ${project} in progress...`,
-      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})`
-        : ""
+      process.status
     );
 
     await new Promise((resolve) => {

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

@@ -6,6 +6,7 @@ import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
+// eslint-disable-next-line import/no-relative-packages
 import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
 import { babelOptions } from "./bundle.cjs";
 

cast/src/launcher/layout/hc-connect.ts

@@ -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/input/ha-input";
+import "../../../../src/components/ha-textfield";
 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-input
+            <ha-textfield
               label="Home Assistant URL"
               placeholder="https://abcdefghijklmnop.ui.nabu.casa"
               @keydown=${this._handleInputKeyDown}
-            ></ha-input>
+            ></ha-textfield>
             ${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-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
       flex: 1;
     }
 
-    ha-input {
+    ha-textfield {
       width: 100%;
     }
   `;

demo/src/configs/demo-configs.ts

@@ -11,9 +11,9 @@ export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./jimpower").then((mod) => mod.demoJimpower),
 ];
 
-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> =
   demoConfigs[selectedDemoConfigIndex]();
 

demo/src/custom-cards/cast-demo-row.ts

@@ -1,4 +1,3 @@
-/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";

eslint.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 
+/* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
 import path from "node:path";
@@ -12,7 +13,6 @@ import { configs as litConfigs } from "eslint-plugin-lit";
 import { configs as wcConfigs } from "eslint-plugin-wc";
 import { configs as a11yConfigs } from "eslint-plugin-lit-a11y";
 import html from "@html-eslint/eslint-plugin";
-import importX from "eslint-plugin-import-x";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -22,27 +22,8 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 });
 
-// Load airbnb-base via FlatCompat for non-import rules only.
-// eslint-plugin-import is incompatible with ESLint 10 (uses removed APIs),
-// so we strip its plugin/rules/settings and use eslint-plugin-import-x instead.
-const airbnbConfigs = compat.extends("airbnb-base").map((config) => {
-  const { plugins = {}, rules = {}, settings = {}, ...rest } = config;
-  return {
-    ...rest,
-    plugins: Object.fromEntries(
-      Object.entries(plugins).filter(([key]) => key !== "import")
-    ),
-    rules: Object.fromEntries(
-      Object.entries(rules).filter(([key]) => !key.startsWith("import/"))
-    ),
-    settings: Object.fromEntries(
-      Object.entries(settings).filter(([key]) => !key.startsWith("import/"))
-    ),
-  };
-});
-
 export default tseslint.config(
-  ...airbnbConfigs,
+  ...compat.extends("airbnb-base"),
   eslintConfigPrettier,
   litConfigs["flat/all"],
   tseslint.configs.recommended,
@@ -50,7 +31,6 @@ export default tseslint.config(
   tseslint.configs.stylistic,
   wcConfigs["flat/recommended"],
   a11yConfigs.recommended,
-  importX.flatConfigs.recommended,
   {
     plugins: {
       "unused-imports": unusedImports,
@@ -78,7 +58,7 @@ export default tseslint.config(
     },
 
     settings: {
-      "import-x/resolver": {
+      "import/resolver": {
         webpack: {
           config: "./rspack.config.cjs",
         },
@@ -107,20 +87,12 @@ export default tseslint.config(
       "prefer-destructuring": "off",
       "no-restricted-globals": [2, "event"],
       "prefer-promise-reject-errors": "off",
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-      "object-curly-newline": "off",
-      "default-case": "off",
-      "wc/no-self-class": "off",
-      "no-shadow": "off",
-      "no-use-before-define": "off",
+      "import/prefer-default-export": "off",
+      "import/no-default-export": "off",
+      "import/no-unresolved": "off",
+      "import/no-cycle": "off",
 
-      // import-x rules (migrated from eslint-plugin-import / airbnb-base)
-      "import-x/named": "off",
-      "import-x/prefer-default-export": "off",
-      "import-x/no-default-export": "off",
-      "import-x/no-unresolved": "off",
-      "import-x/no-cycle": "off",
-      "import-x/extensions": [
+      "import/extensions": [
         "error",
         "ignorePackages",
         {
@@ -128,24 +100,12 @@ export default tseslint.config(
           js: "never",
         },
       ],
-      "import-x/no-mutable-exports": "error",
-      "import-x/no-amd": "error",
-      "import-x/first": "error",
-      "import-x/order": [
-        "error",
-        { groups: [["builtin", "external", "internal"]] },
-      ],
-      "import-x/newline-after-import": "error",
-      "import-x/no-absolute-path": "error",
-      "import-x/no-dynamic-require": "error",
-      "import-x/no-webpack-loader-syntax": "error",
-      "import-x/no-named-default": "error",
-      "import-x/no-self-import": "error",
-      "import-x/no-useless-path-segments": ["error", { commonjs: true }],
-      "import-x/no-import-module-exports": ["error", { exceptions: [] }],
-      "import-x/no-relative-packages": "error",
 
-      // TypeScript rules
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "object-curly-newline": "off",
+      "default-case": "off",
+      "wc/no-self-class": "off",
+      "no-shadow": "off",
       "@typescript-eslint/camelcase": "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-use-before-define": "off",
@@ -225,6 +185,7 @@ export default tseslint.config(
           allowObjectTypes: "always",
         },
       ],
+      "no-use-before-define": "off",
     },
   },
   {
@@ -233,12 +194,6 @@ export default tseslint.config(
       globals: globals.audioWorklet,
     },
   },
-  {
-    files: ["src/entrypoints/service-worker.ts"],
-    languageOptions: {
-      globals: globals.serviceworker,
-    },
-  },
   {
     plugins: {
       html,

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

@@ -488,79 +488,6 @@ const SCHEMAS: {
       },
     ],
   },
-  {
-    title: "Tabs",
-    translations: {
-      settings: "Settings",
-      tab_general: "General",
-      tab_appearance: "Appearance",
-      name: "Name",
-      entity: "Entity",
-      theme: "Theme",
-      state_color: "Color on state",
-    },
-    schema: [
-      {
-        type: "tabs",
-        name: "settings",
-        tabs: [
-          {
-            name: "general",
-            icon: "mdi:cog",
-            schema: [
-              { name: "name", selector: { text: {} } },
-              { name: "entity", required: true, selector: { entity: {} } },
-            ],
-          },
-          {
-            name: "appearance",
-            icon: "mdi:palette",
-            schema: [
-              { name: "theme", selector: { theme: {} } },
-              { name: "state_color", selector: { boolean: {} } },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: "Tabs (compact)",
-    translations: {
-      settings: "Settings",
-      tab_general: "General",
-      tab_appearance: "Appearance",
-      name: "Name",
-      entity: "Entity",
-      theme: "Theme",
-      state_color: "Color on state",
-    },
-    schema: [
-      {
-        type: "tabs",
-        name: "settings",
-        fill_tabs: false,
-        tabs: [
-          {
-            name: "general",
-            icon: "mdi:cog",
-            schema: [
-              { name: "name", selector: { text: {} } },
-              { name: "entity", required: true, selector: { entity: {} } },
-            ],
-          },
-          {
-            name: "appearance",
-            icon: "mdi:palette",
-            schema: [
-              { name: "theme", selector: { theme: {} } },
-              { name: "state_color", selector: { boolean: {} } },
-            ],
-          },
-        ],
-      },
-    ],
-  },
 ];
 
 @customElement("demo-components-ha-form")
@@ -608,12 +535,8 @@ class DemoHaForm extends LitElement {
                   .error=${info.error}
                   .disabled=${this.disabled[idx]}
                   .computeError=${(error) => translations[error] || error}
-                  .computeLabel=${(schema, _data, options) => {
-                    if (options?.tab) {
-                      return translations[`tab_${options.tab}`] || options.tab;
-                    }
-                    return translations[schema.name] || schema.name;
-                  }}
+                  .computeLabel=${(schema) =>
+                    translations[schema.name] || schema.name}
                   .computeHelper=${() => "Helper text"}
                   @value-changed=${this._handleValueChanged}
                   .sampleIdx=${idx}

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

@@ -1,73 +0,0 @@
----
-title: Textarea
----
-
-# Textarea `<ha-textarea>`
-
-A multiline text input component supporting Home Assistant theming and validation, based on webawesome textarea.
-Supports autogrow, hints, validation, and both material and outlined appearances.
-
-## Implementation
-
-### Example usage
-
-```html
-<ha-textarea label="Description" value="Hello world"></ha-textarea>
-
-<ha-textarea
-  label="Notes"
-  placeholder="Type here..."
-  resize="auto"
-></ha-textarea>
-
-<ha-textarea label="Required field" required></ha-textarea>
-
-<ha-textarea label="Disabled" disabled value="Can't edit this"></ha-textarea>
-```
-
-### API
-
-This component is based on the webawesome textarea component.
-
-**Slots**
-
-- `label`: Custom label content. Overrides the `label` property.
-- `hint`: Custom hint content. Overrides the `hint` property.
-
-**Properties/Attributes**
-
-| Name               | Type                                                           | Default | Description                                                              |
-| ------------------ | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------ |
-| value              | String                                                         | -       | The current value of the textarea.                                       |
-| label              | String                                                         | ""      | The textarea's label text.                                               |
-| hint               | String                                                         | ""      | The textarea's hint/helper text.                                         |
-| placeholder        | String                                                         | ""      | Placeholder text shown when the textarea is empty.                       |
-| rows               | Number                                                         | 4       | The number of visible text rows.                                         |
-| resize             | "none"/"vertical"/"horizontal"/"both"/"auto"                   | "none"  | Controls the textarea's resize behavior.                                 |
-| readonly           | Boolean                                                        | false   | Makes the textarea readonly.                                             |
-| disabled           | Boolean                                                        | false   | Disables the textarea and prevents user interaction.                     |
-| required           | Boolean                                                        | false   | Makes the textarea a required field.                                     |
-| auto-validate      | Boolean                                                        | false   | Validates the textarea on blur instead of on form submit.                |
-| invalid            | Boolean                                                        | false   | Marks the textarea as invalid.                                           |
-| validation-message | String                                                         | ""      | Custom validation message shown when the textarea is invalid.            |
-| minlength          | Number                                                         | -       | The minimum length of input that will be considered valid.               |
-| maxlength          | Number                                                         | -       | The maximum length of input that will be considered valid.               |
-| name               | String                                                         | -       | The name of the textarea, submitted as a name/value pair with form data. |
-| autocapitalize     | "off"/"none"/"on"/"sentences"/"words"/"characters"             | ""      | Controls whether and how text input is automatically capitalized.        |
-| autocomplete       | String                                                         | -       | Indicates whether the browser's autocomplete feature should be used.     |
-| autofocus          | Boolean                                                        | false   | Automatically focuses the textarea when the page loads.                  |
-| spellcheck         | Boolean                                                        | true    | Enables or disables the browser's spellcheck feature.                    |
-| inputmode          | "none"/"text"/"decimal"/"numeric"/"tel"/"search"/"email"/"url" | ""      | Hints at the type of data for showing an appropriate virtual keyboard.   |
-| enterkeyhint       | "enter"/"done"/"go"/"next"/"previous"/"search"/"send"          | ""      | Customizes the label or icon of the Enter key on virtual keyboards.      |
-
-#### CSS Parts
-
-- `wa-base` - The underlying wa-textarea base wrapper.
-- `wa-hint` - The underlying wa-textarea hint container.
-- `wa-textarea` - The underlying wa-textarea textarea element.
-
-**CSS Custom Properties**
-
-- `--ha-textarea-padding-bottom` - Padding below the textarea host.
-- `--ha-textarea-max-height` - Maximum height of the textarea when using `resize="auto"`. Defaults to `200px`.
-- `--ha-textarea-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.

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

@@ -1,151 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-textarea";
-
-@customElement("demo-components-ha-textarea")
-export class DemoHaTextarea extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-textarea in ${mode}">
-              <div class="card-content">
-                <h3>Basic</h3>
-                <div class="row">
-                  <ha-textarea label="Default"></ha-textarea>
-                  <ha-textarea
-                    label="With value"
-                    value="Hello world"
-                  ></ha-textarea>
-                  <ha-textarea
-                    label="With placeholder"
-                    placeholder="Type here..."
-                  ></ha-textarea>
-                </div>
-
-                <h3>Autogrow</h3>
-                <div class="row">
-                  <ha-textarea
-                    label="Autogrow empty"
-                    resize="auto"
-                  ></ha-textarea>
-                  <ha-textarea
-                    label="Autogrow with value"
-                    resize="auto"
-                    value="This textarea will grow as you type more content into it. Try adding more lines to see the effect."
-                  ></ha-textarea>
-                </div>
-
-                <h3>States</h3>
-                <div class="row">
-                  <ha-textarea
-                    label="Disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-textarea>
-                  <ha-textarea
-                    label="Readonly"
-                    readonly
-                    value="Readonly"
-                  ></ha-textarea>
-                  <ha-textarea label="Required" required></ha-textarea>
-                </div>
-                <div class="row">
-                  <ha-textarea
-                    label="Invalid"
-                    invalid
-                    validation-message="This field is required"
-                    value=""
-                  ></ha-textarea>
-                  <ha-textarea
-                    label="With hint"
-                    hint="Supports Markdown"
-                  ></ha-textarea>
-                  <ha-textarea
-                    label="With rows"
-                    .rows=${6}
-                    placeholder="6 rows"
-                  ></ha-textarea>
-                </div>
-
-                <h3>No label</h3>
-                <div class="row">
-                  <ha-textarea
-                    placeholder="No label, just placeholder"
-                  ></ha-textarea>
-                  <ha-textarea
-                    resize="auto"
-                    placeholder="No label, autogrow"
-                  ></ha-textarea>
-                </div>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-2);
-    }
-    h3 {
-      margin: var(--ha-space-4) 0 var(--ha-space-1) 0;
-      font-size: var(--ha-font-size-l);
-      font-weight: var(--ha-font-weight-medium);
-    }
-    h3:first-child {
-      margin-top: 0;
-    }
-    .row {
-      display: flex;
-      gap: var(--ha-space-4);
-    }
-    .row > * {
-      flex: 1;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-textarea": DemoHaTextarea;
-  }
-}

gallery/src/pages/concepts/home.markdown

@@ -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/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
+- Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" 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

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

@@ -422,6 +422,7 @@ export class DemoEntityState extends LitElement {
 
     return html`
       <ha-data-table
+        .hass=${this.hass}
         .columns=${this._columns(this.hass)}
         .data=${this._rows()}
         auto-height

landing-page/src/components/landing-page-logs.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
+// eslint-disable-next-line import/extensions
 import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";

lint-staged.config.js

@@ -1,6 +1,6 @@
 export default {
   "*.?(c|m){js,ts}": [
-    "eslint --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
+    "eslint --flag v10_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
     "prettier --cache --write",
     "lit-analyzer --quiet",
   ],

package.json

@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
-    "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
+    "lint:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
+    "format:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
@@ -30,11 +30,11 @@
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
-    "@codemirror/language": "6.12.3",
+    "@codemirror/language": "6.12.2",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.41.0",
+    "@codemirror/view": "6.40.0",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.3.1",
@@ -73,6 +73,8 @@
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-select": "0.27.0",
     "@material/mwc-switch": "0.27.0",
+    "@material/mwc-textarea": "0.27.0",
+    "@material/mwc-textfield": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
@@ -80,14 +82,14 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.21",
+    "@swc/helpers": "0.5.19",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.1.2",
+    "barcode-detector": "3.1.1",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
@@ -100,7 +102,7 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "6.0.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.2.0",
+    "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.15",
@@ -142,18 +144,16 @@
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.2",
     "@bundle-stats/plugin-webpack-filter": "4.22.0",
-    "@eslint/eslintrc": "3.3.5",
-    "@eslint/js": "10.0.1",
     "@html-eslint/eslint-plugin": "0.58.1",
     "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.7",
-    "@rspack/core": "1.7.11",
+    "@rsdoctor/rspack-plugin": "1.5.5",
+    "@rspack/core": "1.7.9",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.26",
+    "@types/chromecast-caf-receiver": "6.0.25",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -169,17 +169,16 @@
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.2",
+    "@vitest/coverage-v8": "4.1.0",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "10.2.0",
+    "eslint": "9.39.4",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-webpack": "0.13.11",
+    "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-import-x": "4.16.2",
     "eslint-plugin-lit": "2.2.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
@@ -187,7 +186,6 @@
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.4",
     "glob": "13.0.6",
-    "globals": "17.4.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -206,13 +204,13 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
     "sinon": "21.0.3",
-    "tar": "7.5.13",
+    "tar": "7.5.12",
     "terser-webpack-plugin": "5.4.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "6.0.2",
-    "typescript-eslint": "8.58.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.2",
+    "vitest": "4.1.0",
     "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"

pyproject.toml

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

src/cast/cast_manager.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-/// <reference types="chromecast-caf-sender" />
 
 import type { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";

src/common/color/compute-color.ts

@@ -32,12 +32,6 @@ 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`;
@@ -45,12 +39,6 @@ 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) {
@@ -59,22 +47,6 @@ 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.

src/common/color/convert-color.ts

@@ -1,6 +1,5 @@
 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);
@@ -131,43 +130,26 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
   hsv2rgb([hs[0], hs[1], 255]);
 
-/**
- * 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;
+export function theme2hex(themeColor: string): string {
+  if (themeColor.startsWith("#")) {
+    if (themeColor.length === 4 || themeColor.length === 5) {
+      const c = themeColor;
       // 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 (color.length === 9) {
+    if (themeColor.length === 9) {
       // Ignore alpha channel.
-      return color.substring(0, 7);
+      return themeColor.substring(0, 7);
     }
-    return color;
+    return themeColor;
   }
 
-  // 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 rgbFromColorName = colors[themeColor.toLowerCase()];
+  if (rgbFromColorName) {
+    return rgb2hex(rgbFromColorName);
   }
 
-  // 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+)/);
+  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
   if (rgbMatch) {
     const [, r, g, b] = rgbMatch.map(Number);
     return rgb2hex([r, g, b]);
@@ -176,5 +158,5 @@ export function theme2hex(color: 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 color;
+  return themeColor;
 }

src/common/color/rgb.ts

@@ -1,5 +1,4 @@
 import { wcagLuminance, wcagContrast } from "culori";
-import { theme2hex } from "./convert-color";
 
 /**
  * Calculates the luminosity of an RGB color.
@@ -49,13 +48,3 @@ 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";
-};

src/common/condition/listeners.ts

@@ -1,9 +1,6 @@
 import { listenMediaQuery } from "../dom/media_query";
 import type { HomeAssistant } from "../../types";
-import type {
-  Condition,
-  ConditionContext,
-} from "../../panels/lovelace/common/validate-condition";
+import type { Condition } from "../../panels/lovelace/common/validate-condition";
 import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
 import { extractMediaQueries, extractTimeConditions } from "./extract";
 import { calculateNextTimeUpdate } from "./time-calculator";
@@ -22,8 +19,7 @@ export function setupMediaQueryListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void,
-  getContext?: () => ConditionContext
+  onUpdate: (conditionsMet: boolean) => void
 ): void {
   const mediaQueries = extractMediaQueries(conditions);
 
@@ -40,8 +36,7 @@ export function setupMediaQueryListeners(
       if (hasOnlyMediaQuery) {
         onUpdate(matches);
       } else {
-        const context = getContext?.() ?? {};
-        const conditionsMet = checkConditionsMet(conditions, hass, context);
+        const conditionsMet = checkConditionsMet(conditions, hass);
         onUpdate(conditionsMet);
       }
     });
@@ -56,8 +51,7 @@ export function setupTimeListeners(
   conditions: Condition[],
   hass: HomeAssistant,
   addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void,
-  getContext?: () => ConditionContext
+  onUpdate: (conditionsMet: boolean) => void
 ): void {
   const timeConditions = extractTimeConditions(conditions);
 
@@ -76,8 +70,7 @@ export function setupTimeListeners(
 
       timeoutId = setTimeout(() => {
         if (delay <= MAX_TIMEOUT_DELAY) {
-          const context = getContext?.() ?? {};
-          const conditionsMet = checkConditionsMet(conditions, hass, context);
+          const conditionsMet = checkConditionsMet(conditions, hass);
           onUpdate(conditionsMet);
         }
         scheduleUpdate();
@@ -94,17 +87,3 @@ 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);
-}

src/common/config/can_show_page.ts

@@ -14,7 +14,7 @@ export const isLoadedIntegration = (
 ) =>
   !page.component ||
   ensureArray(page.component).some((integration) =>
-    isComponentLoaded(hass.config, integration)
+    isComponentLoaded(hass, integration)
   );
 
 export const isNotLoadedIntegration = (
@@ -23,7 +23,7 @@ export const isNotLoadedIntegration = (
 ) =>
   !page.not_component ||
   !ensureArray(page.not_component).some((integration) =>
-    isComponentLoaded(hass.config, integration)
+    isComponentLoaded(hass, integration)
   );
 
 export const isCore = (page: PageNavigation) => page.core;

src/common/config/is_component_loaded.ts

@@ -2,6 +2,6 @@ import type { HomeAssistant } from "../../types";
 
 /** Return if a component is loaded. */
 export const isComponentLoaded = (
-  hassConfig: HomeAssistant["config"],
+  hass: HomeAssistant,
   component: string
-): boolean => hassConfig && hassConfig.components.includes(component);
+): boolean => hass && hass.config.components.includes(component);

src/common/datetime/calc_date_range.ts

@@ -27,7 +27,6 @@ export type DateRange =
   | "this_year"
   | "now-7d"
   | "now-30d"
-  | "now-365d"
   | "now-12m"
   | "now-1h"
   | "now-12h"
@@ -103,11 +102,6 @@ export const calcDateRange = (
         ),
         calcDate(today, endOfMonth, locale, hassConfig),
       ];
-    case "now-365d":
-      return [
-        calcDate(today, subDays, locale, hassConfig, 365),
-        calcDate(today, subDays, locale, hassConfig, 0),
-      ];
     case "now-1h":
       return [
         calcDate(today, subHours, locale, hassConfig, 1),

src/common/dom/fire_event.ts

@@ -38,14 +38,6 @@ export interface HASSDomEvent<T> extends Event {
   detail: T;
 }
 
-export type HASSDomTargetEvent<T extends EventTarget> = Event & {
-  target: T;
-};
-
-export type HASSDomCurrentTargetEvent<T extends EventTarget> = Event & {
-  currentTarget: T;
-};
-
 /**
  * Dispatches a custom event with an optional detail value.
  *

src/common/entity/compute_device_name.ts

@@ -14,25 +14,24 @@ export const computeDeviceName = (
 
 export const computeDeviceNameDisplay = (
   device: DeviceRegistryEntry,
-  localize: HomeAssistant["localize"],
-  hassStates: HomeAssistant["states"],
+  hass: HomeAssistant,
   entities?: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) =>
   computeDeviceName(device) ||
-  (entities && fallbackDeviceName(hassStates, entities)) ||
-  localize("ui.panel.config.devices.unnamed_device", {
-    type: localize(
+  (entities && fallbackDeviceName(hass, entities)) ||
+  hass.localize("ui.panel.config.devices.unnamed_device", {
+    type: hass.localize(
       `ui.panel.config.devices.type.${device.entry_type || "device"}`
     ),
   });
 
 export const fallbackDeviceName = (
-  hassStates: HomeAssistant["states"],
+  hass: HomeAssistant,
   entities: EntityRegistryEntry[] | EntityRegistryDisplayEntry[] | string[]
 ) => {
   for (const entity of entities || []) {
     const entityId = typeof entity === "string" ? entity : entity.entity_id;
-    const stateObj = hassStates[entityId];
+    const stateObj = hass.states[entityId];
     if (stateObj) {
       return computeStateName(stateObj);
     }

src/common/entity/context/get_device_context.ts

@@ -1,11 +1,26 @@
 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";
 
-export const getDeviceArea = (
+interface DeviceContext {
+  device: DeviceRegistryEntry;
+  area: AreaRegistryEntry | null;
+  floor: FloorRegistryEntry | null;
+}
+
+export const getDeviceContext = (
   device: DeviceRegistryEntry,
-  areas: HomeAssistant["areas"]
-): AreaRegistryEntry | undefined => {
+  hass: HomeAssistant
+): DeviceContext => {
   const areaId = device.area_id;
-  return areaId ? areas[areaId] : undefined;
+  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,
+  };
 };

src/common/entity/delete_entity.ts

@@ -27,7 +27,7 @@ export const isDeletableEntity = (
   const entityRegEntry = entityRegistry.find((e) => e.entity_id === entity_id);
   if (isHelperDomain(domain)) {
     return !!(
-      isComponentLoaded(hass.config, domain) &&
+      isComponentLoaded(hass, 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.config, domain)) {
+    if (isComponentLoaded(hass, domain)) {
       if (
         entityRegEntry &&
         fetchedHelpers.some((e) => e.id === entityRegEntry.unique_id)

src/common/entity/get_states.ts

@@ -242,18 +242,14 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
   },
 };
 
-export const getStatesDomain = (
+export const getStates = (
   hass: HomeAssistant,
-  domain: string,
-  attribute?: string | undefined
+  state: HassEntity,
+  attribute: string | undefined = undefined
 ): string[] => {
+  const domain = computeStateDomain(state);
   const result: string[] = [];
 
-  if (!attribute) {
-    // All entities can have unavailable states
-    result.push(...UNAVAILABLE_STATES);
-  }
-
   if (!attribute && domain in FIXED_DOMAIN_STATES) {
     result.push(...FIXED_DOMAIN_STATES[domain]);
   } else if (
@@ -264,7 +260,21 @@ export const getStatesDomain = (
     result.push(...FIXED_DOMAIN_ATTRIBUTE_STATES[domain][attribute]);
   }
 
+  // Dynamic values based on the entities
   switch (domain) {
+    case "climate":
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      } else if (attribute === "swing_horizontal_mode") {
+        result.push(...state.attributes.swing_horizontal_modes);
+      }
+      break;
     case "device_tracker":
     case "person":
       if (!attribute) {
@@ -283,37 +293,6 @@ export const getStatesDomain = (
         );
       }
       break;
-  }
-
-  return result;
-};
-
-export const getStates = (
-  hass: HomeAssistant,
-  state: HassEntity,
-  attribute: string | undefined = undefined
-): string[] => {
-  const domain = computeStateDomain(state);
-  const result: string[] = [];
-
-  // Fixed values based on a domain
-  result.push(...getStatesDomain(hass, domain, attribute));
-
-  // Dynamic values based on the entities
-  switch (domain) {
-    case "climate":
-      if (!attribute) {
-        result.push(...state.attributes.hvac_modes);
-      } else if (attribute === "fan_mode") {
-        result.push(...state.attributes.fan_modes);
-      } else if (attribute === "preset_mode") {
-        result.push(...state.attributes.preset_modes);
-      } else if (attribute === "swing_mode") {
-        result.push(...state.attributes.swing_modes);
-      } else if (attribute === "swing_horizontal_mode") {
-        result.push(...state.attributes.swing_horizontal_modes);
-      }
-      break;
     case "event":
       if (attribute === "event_type") {
         result.push(...state.attributes.event_types);
@@ -374,5 +353,9 @@ export const getStates = (
       break;
   }
 
+  if (!attribute) {
+    // All entities can have unavailable states
+    result.push(...UNAVAILABLE_STATES);
+  }
   return [...new Set(result)];
 };

src/common/integrations/protocolIntegrationPicked.ts

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

src/common/lit/keyed-es5.ts

@@ -10,10 +10,13 @@
  *
  * @see https://github.com/home-assistant/frontend/issues/28732
  */
+// eslint-disable-next-line import/extensions
 import { directive, Directive } from "lit-html/directive.js";
+// eslint-disable-next-line import/extensions
 import { setCommittedValue } from "lit-html/directive-helpers.js";
 // eslint-disable-next-line lit/no-legacy-imports
 import { nothing } from "lit-html";
+// eslint-disable-next-line import/extensions
 import type { Part } from "lit-html/directive.js";
 
 class KeyedES5 extends Directive {

src/common/number/format_number.ts

@@ -71,6 +71,13 @@ 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))

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

@@ -91,10 +91,6 @@ export class HaChartBase extends LitElement {
 
   private _lastTapTime?: number;
 
-  private _longPressTimer?: ReturnType<typeof setTimeout>;
-
-  private _longPressTriggered = false;
-
   private _shouldResizeChart = false;
 
   private _resizeAnimationDuration?: number;
@@ -132,7 +128,6 @@ export class HaChartBase extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._legendPointerCancel();
     this._pendingSetup = false;
     while (this._listeners.length) {
       this._listeners.pop()!();
@@ -307,31 +302,22 @@ export class HaChartBase extends LitElement {
     `;
   }
 
-  private _getLegendItems() {
+  private _renderLegend() {
     if (!this.options?.legend || !this.data) {
-      return undefined;
+      return nothing;
     }
     const legend = ensureArray(this.options.legend).find(
       (l) => l.show && l.type === "custom"
     ) as CustomLegendOption | undefined;
     if (!legend) {
-      return undefined;
+      return nothing;
     }
     const datasets = ensureArray(this.data);
-    return (
+    const items =
       legend.data ||
       datasets
         .filter((d) => (d.data as any[])?.length && (d.id || 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!);
+        .map((d) => ({ id: d.id, name: d.name }));
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -376,11 +362,6 @@ 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}
           >
@@ -1055,52 +1036,11 @@ export class HaChartBase extends LitElement {
     fireEvent(this, "chart-zoom", { start, end });
   }
 
-  // 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) {
+  private _legendClick(ev: any) {
     if (!this.chart) {
       return;
     }
-    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;
-    }
+    const id = ev.currentTarget?.id;
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1115,60 +1055,6 @@ 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(() => {

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

@@ -28,13 +28,6 @@ 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;
@@ -436,18 +429,23 @@ export class StateHistoryChartLine extends LitElement {
           (entityState) => entityState.attributes?.hvac_action
         );
 
-        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));
+        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);
         // We differentiate between thermostats that have a target temperature
         // range versus ones that have just a target temperature
 
@@ -468,19 +466,33 @@ export class StateHistoryChartLine extends LitElement {
                 "component.climate.entity_component._.state_attributes.current_temperature.name"
               )
         );
-        for (const { action, cssVar } of activeModes) {
+        if (hasHeat) {
           addDataSet(
-            `${states.entity_id}-${action}`,
+            states.entity_id + "-heating",
             this.showNames
-              ? this.hass.localize(`ui.card.climate.${action}`, {
-                  name: name,
-                })
+              ? this.hass.localize("ui.card.climate.heating", { name: name })
               : this.hass.localize(
-                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
                 ),
-            computedStyles.getPropertyValue(cssVar),
+            computedStyles.getPropertyValue("--state-climate-heat-color"),
             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) {
@@ -528,8 +540,11 @@ export class StateHistoryChartLine extends LitElement {
             entityState.attributes.current_temperature
           );
           const series = [curTemp];
-          for (const { isActive } of activeModes) {
-            series.push(isActive(entityState) ? curTemp : null);
+          if (hasHeat) {
+            series.push(isHeating(entityState) ? curTemp : null);
+          }
+          if (hasCool) {
+            series.push(isCooling(entityState) ? curTemp : null);
           }
           if (hasTargetRange) {
             const targetHigh = safeParseFloat(

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

@@ -105,7 +105,7 @@ export class StateHistoryCharts extends LitElement {
   @restoreScroll(".container") private _savedScrollPos?: number;
 
   protected render() {
-    if (!isComponentLoaded(this.hass.config, "history")) {
+    if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;

src/components/chart/statistics-chart.ts

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

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

@@ -2,6 +2,7 @@ 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";
@@ -52,15 +53,16 @@ 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
@@ -100,6 +102,10 @@ 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);

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

@@ -1,4 +1,3 @@
-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";
@@ -17,19 +16,14 @@ import memoizeOne from "memoize-one";
 import { STRINGS_SEPARATOR_DOT } from "../../common/const";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
-import type {
-  HASSDomCurrentTargetEvent,
-  HASSDomTargetEvent,
-} from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
 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";
@@ -107,17 +101,12 @@ export interface DataTableRowData {
 export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
 
 const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
-const AUTO_FOCUS_ALLOWED_ACTIVE_TAGS = ["BODY", "HTML", "HOME-ASSISTANT"];
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private _localize?: ContextType<typeof localizeContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state()
-  @consume({ context: localeContext, subscribe: true })
-  private _locale?: ContextType<typeof localeContext>;
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -171,10 +160,6 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @query(".mdc-data-table__header-row") private _headerRow?: HTMLDivElement;
-
-  @query("lit-virtualizer") private _scroller?: HTMLElement;
-
   @state() private _collapsedGroups: string[] = [];
 
   @state() private _lastSelectedRowId: string | null = null;
@@ -251,28 +236,16 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated(changedProps: PropertyValues) {
-    if (!this._headerRow) {
+  protected updated() {
+    const header = this.renderRoot.querySelector(".mdc-data-table__header-row");
+    if (!header) {
       return;
     }
-
-    if (this._headerRow.scrollWidth > this._headerRow.clientWidth) {
-      this.style.setProperty(
-        "--table-row-width",
-        `${this._headerRow.scrollWidth}px`
-      );
+    if (header.scrollWidth > header.clientWidth) {
+      this.style.setProperty("--table-row-width", `${header.scrollWidth}px`);
     } else {
       this.style.removeProperty("--table-row-width");
     }
-
-    if (
-      changedProps.has("selectable") ||
-      (!this.autoHeight &&
-        document.activeElement &&
-        AUTO_FOCUS_ALLOWED_ACTIVE_TAGS.includes(document.activeElement.tagName))
-    ) {
-      this._focusScroller();
-    }
   }
 
   public willUpdate(properties: PropertyValues) {
@@ -405,6 +378,8 @@ 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) =>
@@ -528,8 +503,7 @@ 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 ||
-                      this._localize?.("ui.components.data-table.no-data") ||
-                      "No data"}
+                      localize("ui.components.data-table.no-data")}
                     </div>
                   </div>
                 </div>
@@ -538,12 +512,10 @@ export class HaDataTable extends LitElement {
                 <lit-virtualizer
                   scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
-                  tabindex=${ifDefined(!this.autoHeight ? "0" : undefined)}
                   @scroll=${this._saveScrollPos}
                   .items=${this._groupData(
                     this._filteredData,
-                    this._localize,
-                    this._locale,
+                    localize,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -713,7 +685,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this._locale?.language
+            this.hass.locale.language
           )
         : filteredData;
 
@@ -739,8 +711,7 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc | undefined,
-      locale: FrontendLocaleData | undefined,
+      localize: LocalizeFunc,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -764,7 +735,11 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(a, b, locale?.language);
+                const comparison = stringCompare(
+                  a,
+                  b,
+                  this.hass.locale.language
+                );
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -785,7 +760,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                locale?.language
+                this.hass.locale.language
               );
             })
             .reduce(
@@ -812,15 +787,14 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${localize?.(
+                  .label=${this.hass.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") ||
-                    "Ungrouped"
+                  ? localize("ui.components.data-table.ungrouped")
                   : groupName || ""}
               </div>`,
             });
@@ -851,10 +825,8 @@ export class HaDataTable extends LitElement {
     ): Promise<DataTableRowData[]> => filterData(data, columns, filter)
   );
 
-  private _handleHeaderClick(
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { columnId: string }>
-  ) {
-    const columnId = ev.currentTarget.columnId;
+  private _handleHeaderClick(ev: Event) {
+    const columnId = (ev.currentTarget as any).columnId;
     if (!this.columns[columnId].sortable) {
       return;
     }
@@ -872,12 +844,11 @@ export class HaDataTable extends LitElement {
       column: columnId,
       direction: this.sortDirection,
     });
-
-    this._focusScroller();
   }
 
-  private _handleHeaderRowCheckboxClick(ev: HASSDomTargetEvent<HaCheckbox>) {
-    if (ev.target.checked) {
+  private _handleHeaderRowCheckboxClick(ev: Event) {
+    const checkbox = ev.target as HaCheckbox;
+    if (checkbox.checked) {
       this.selectAll();
     } else {
       this._checkedRows = [];
@@ -886,15 +857,13 @@ export class HaDataTable extends LitElement {
     this._lastSelectedRowId = null;
   }
 
-  private _handleRowCheckboxClicked = (
-    ev: HASSDomCurrentTargetEvent<HaCheckbox & { rowId: string }>
-  ) => {
-    const rowId = ev.currentTarget.rowId;
+  private _handleRowCheckboxClicked = (ev: Event) => {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const rowId = (checkbox as any).rowId;
 
     const groupedData = this._groupData(
       this._filteredData,
-      this._localize,
-      this._locale,
+      this.localizeFunc || this.hass.localize,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,
@@ -926,7 +895,7 @@ export class HaDataTable extends LitElement {
           ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
         ];
       }
-    } else if (!ev.currentTarget.checked) {
+    } else if (!checkbox.checked) {
       if (!this._checkedRows.includes(rowId)) {
         this._checkedRows = [...this._checkedRows, rowId];
       }
@@ -964,9 +933,7 @@ export class HaDataTable extends LitElement {
     return checkedRows;
   }
 
-  private _handleRowClick = (
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { rowId: string }>
-  ) => {
+  private _handleRowClick = (ev: Event) => {
     if (
       ev
         .composedPath()
@@ -982,13 +949,14 @@ export class HaDataTable extends LitElement {
     ) {
       return;
     }
-    const rowId = ev.currentTarget.rowId;
+    const rowId = (ev.currentTarget as any).rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   };
 
-  private _setTitle(ev: HASSDomCurrentTargetEvent<HTMLElement>) {
-    if (ev.currentTarget.scrollWidth > ev.currentTarget.offsetWidth) {
-      ev.currentTarget.setAttribute("title", ev.currentTarget.innerText);
+  private _setTitle(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    if (target.scrollWidth > target.offsetWidth) {
+      target.setAttribute("title", target.innerText);
     }
   }
 
@@ -1010,12 +978,6 @@ export class HaDataTable extends LitElement {
     this._debounceSearch((ev.target as HTMLInputElement).value);
   }
 
-  private _focusScroller(): void {
-    this._scroller?.focus({
-      preventScroll: true,
-    });
-  }
-
   private async _calcTableHeight() {
     if (this.autoHeight) {
       return;
@@ -1025,27 +987,23 @@ export class HaDataTable extends LitElement {
   }
 
   @eventOptions({ passive: true })
-  private _saveScrollPos(e: HASSDomTargetEvent<HTMLDivElement>) {
-    this._savedScrollPos = e.target.scrollTop;
+  private _saveScrollPos(e: Event) {
+    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
 
-    if (this._headerRow) {
-      this._headerRow.scrollLeft = e.target.scrollLeft;
-    }
+    this.renderRoot.querySelector(".mdc-data-table__header-row")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
   }
 
   @eventOptions({ passive: true })
-  private _scrollContent(e: HASSDomTargetEvent<HTMLDivElement>) {
-    if (!this._scroller) {
-      return;
-    }
-
-    this._scroller.scrollLeft = e.target.scrollLeft;
+  private _scrollContent(e: Event) {
+    this.renderRoot.querySelector("lit-virtualizer")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
   }
 
-  private _collapseGroup = (
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { group: string }>
-  ) => {
-    const groupName = ev.currentTarget.group;
+  private _collapseGroup = (ev: Event) => {
+    const groupName = (ev.currentTarget as any).group;
     if (this._collapsedGroups.includes(groupName)) {
       this._collapsedGroups = this._collapsedGroups.filter(
         (grp) => grp !== groupName
@@ -1468,11 +1426,6 @@ export class HaDataTable extends LitElement {
           contain: size layout !important;
           overscroll-behavior: contain;
         }
-
-        lit-virtualizer:focus,
-        lit-virtualizer:focus-visible {
-          outline: none;
-        }
       `,
     ];
   }

src/components/date-picker/ha-date-range-picker.ts

@@ -133,8 +133,7 @@ export class HaDateRangePicker extends LitElement {
           ${!this.minimal
             ? html`<ha-textarea
                   id="field"
-                  rows="1"
-                  resize="auto"
+                  mobile-multiline
                   @click=${this._openPicker}
                   @keydown=${this._handleKeydown}
                   .value=${(isThisYear(this.startDate)
@@ -337,7 +336,14 @@ export class HaDateRangePicker extends LitElement {
   private _setTextareaFocusStyle(focused: boolean) {
     const textarea = this.renderRoot.querySelector("ha-textarea");
     if (textarea) {
-      textarea.setFocused(focused);
+      const foundation = (textarea as any).mdcFoundation;
+      if (foundation) {
+        if (focused) {
+          foundation.activateFocus();
+        } else {
+          foundation.deactivateFocus();
+        }
+      }
     }
   }
 

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

@@ -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 { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { getDeviceContext } 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 = getDeviceArea(device, this.hass.areas);
+      const { area } = getDeviceContext(device, this.hass);
 
       const deviceName = device ? computeDeviceName(device) : undefined;
       const areaName = area ? computeAreaName(area) : undefined;

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

@@ -38,8 +38,6 @@ export class HaEntityStatePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ attribute: "no-entity", type: Boolean }) public noEntity = false;
-
   private _getItems = memoizeOne(
     (
       hass: HomeAssistant,
@@ -126,8 +124,7 @@ export class HaEntityStatePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
-        .disabled=${this.disabled ||
-        (!this.entityId && this.noEntity === false)}
+        .disabled=${this.disabled || !this.entityId}
         .autofocus=${this.autofocus}
         .required=${this.required}
         .label=${this.label ??

src/components/ha-addon-picker.ts

@@ -94,7 +94,7 @@ class HaAddonPicker extends LitElement {
 
   private async _getApps() {
     try {
-      if (isComponentLoaded(this.hass.config, "hassio")) {
+      if (isComponentLoaded(this.hass, "hassio")) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)

src/components/ha-alert.ts

@@ -8,7 +8,6 @@ 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";
@@ -39,8 +38,6 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
-  @property({ attribute: false }) public localize?: LocalizeFunc;
-
   @property({ type: Boolean }) public narrow = false;
 
   public render() {
@@ -68,7 +65,7 @@ class HaAlert extends LitElement {
               ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismissClicked}
-                    .label=${this.localize!("ui.common.dismiss_alert")}
+                    label="Dismiss alert"
                     .path=${mdiClose}
                   ></ha-icon-button>`
                 : nothing}

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

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

src/components/ha-config-entry-picker.ts

@@ -79,6 +79,7 @@ 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>
@@ -114,6 +115,7 @@ class HaConfigEntryPicker extends LitElement {
       slot="headline"
       >${item?.icon
         ? html`<ha-domain-icon
+            .hass=${this.hass}
             .domain=${item.icon!}
             brand-fallback
           ></ha-domain-icon>`

src/components/ha-dialog.ts

@@ -138,6 +138,7 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
 
   public connectedCallback(): void {
     super.connectedCallback();
+    this._open = this.open;
     this.addEventListener(
       "dialog-set-fullscreen",
       this._handleFullscreenChanged as EventListener

src/components/ha-domain-icon.ts

@@ -1,23 +1,19 @@
-import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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;
@@ -29,22 +25,6 @@ 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>`;
@@ -54,13 +34,12 @@ export class HaDomainIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._hassConfig) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
     const icon = domainIcon(
-      this._connection,
-      this._hassConfig,
+      this.hass,
       this.domain,
       this.deviceClass,
       this.state
@@ -86,9 +65,9 @@ export class HaDomainIcon extends LitElement {
         {
           domain: this.domain!,
           type: "icon",
-          darkOptimized: this._themes?.darkMode,
+          darkOptimized: this.hass.themes?.darkMode,
         },
-        this._auth?.data.hassUrl
+        this.hass.auth.data.hassUrl
       );
       return html`
         <img

src/components/ha-filter-devices.ts

@@ -101,11 +101,7 @@ export class HaFilterDevices extends LitElement {
           .value=${device.id}
           .selected=${this.value?.includes(device.id) ?? false}
         >
-          ${computeDeviceNameDisplay(
-            device,
-            this.hass.localize,
-            this.hass.states
-          )}
+          ${computeDeviceNameDisplay(device, this.hass)}
         </ha-check-list-item>`;
 
   private _handleItemClick(ev) {
@@ -155,18 +151,14 @@ export class HaFilterDevices extends LitElement {
         .filter(
           (device) =>
             !filter ||
-            computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
+            computeDeviceNameDisplay(device, this.hass)
               .toLowerCase()
               .includes(filter)
         )
         .sort((a, b) =>
           stringCompare(
-            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
-            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(a, this.hass),
+            computeDeviceNameDisplay(b, this.hass),
             this.hass.locale.language
           )
         );

src/components/ha-filter-domains.ts

@@ -72,6 +72,7 @@ export class HaFilterDomains extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
+                        .hass=${this.hass}
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>

src/components/ha-filter-integrations.ts

@@ -82,6 +82,7 @@ export class HaFilterIntegrations extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
+                        .hass=${this.hass}
                         .domain=${integration.domain}
                         brand-fallback
                       ></ha-domain-icon>

src/components/ha-filter-labels.ts

@@ -6,6 +6,7 @@ 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";
@@ -97,14 +98,17 @@ export class HaFilterLabels extends LitElement {
                     this.value
                   ),
                   (label) => label.label_id,
-                  (label) =>
-                    html`<ha-check-list-item
+                  (label) => {
+                    const color = label.color
+                      ? computeCssColor(label.color)
+                      : undefined;
+                    return html`<ha-check-list-item
                       .value=${label.label_id}
                       .selected=${(this.value || []).includes(label.label_id)}
                       hasMeta
                     >
                       <ha-label
-                        .color=${label.color}
+                        style=${color ? `--color: ${color}` : ""}
                         .description=${label.description}
                       >
                         ${label.icon
@@ -115,7 +119,8 @@ export class HaFilterLabels extends LitElement {
                           : nothing}
                         ${label.name}
                       </ha-label>
-                    </ha-check-list-item>`
+                    </ha-check-list-item>`;
+                  }
                 )}
               </ha-list> `
           : nothing}
@@ -248,6 +253,10 @@ 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;

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -38,17 +38,6 @@ export const computeInitialHaFormData = (
         // Only add expandable data if it's required or any of its children have initial values.
         data[field.name] = expandableData;
       }
-    } else if (field.type === "tabs") {
-      const tabsData: Record<string, unknown> = {};
-      for (const tab of field.tabs) {
-        Object.assign(tabsData, computeInitialHaFormData(tab.schema));
-      }
-      const flattenTabs = field.flatten ?? !field.name;
-      if (flattenTabs) {
-        Object.assign(data, tabsData);
-      } else if (field.required || Object.keys(tabsData).length) {
-        data[field.name] = tabsData;
-      }
     } else if (!field.required) {
       // Do nothing.
     } else if (field.type === "boolean") {

src/components/ha-form/ha-form-tabs.ts

@@ -1,193 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
-import "../ha-icon";
-import "../ha-svg-icon";
-import "../ha-tab-group";
-import "../ha-tab-group-tab";
-import "./ha-form";
-import type { HaForm } from "./ha-form";
-import type {
-  HaFormDataContainer,
-  HaFormElement,
-  HaFormSchema,
-  HaFormTabsSchema,
-} from "./types";
-
-@customElement("ha-form-tabs")
-export class HaFormTabs extends LitElement implements HaFormElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public data!: HaFormDataContainer;
-
-  @property({ attribute: false }) public schema!: HaFormTabsSchema;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ attribute: false }) public computeLabel?: (
-    schema: HaFormSchema,
-    data?: HaFormDataContainer,
-    options?: { path?: string[]; tab?: string }
-  ) => string;
-
-  @property({ attribute: false }) public computeHelper?: (
-    schema: HaFormSchema,
-    options?: { path?: string[] }
-  ) => string;
-
-  @property({ attribute: false }) public localizeValue?: (
-    key: string
-  ) => string;
-
-  @state() private _activeTab?: string;
-
-  private _handleTabShow = (ev: CustomEvent<{ name: string }>) => {
-    const name = ev.detail?.name;
-    if (name !== undefined) {
-      this._activeTab = name;
-    }
-  };
-
-  protected willUpdate(changedProps: Map<PropertyKey, unknown>): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("schema") && this.schema.tabs.length) {
-      const first = this.schema.tabs[0]!.name;
-      if (
-        this._activeTab === undefined ||
-        !this.schema.tabs.some((t) => t.name === this._activeTab)
-      ) {
-        this._activeTab = first;
-      }
-    }
-  }
-
-  public reportValidity(): boolean {
-    const forms = this.renderRoot.querySelectorAll<HaForm>("ha-form");
-    let valid = true;
-    forms.forEach((form) => {
-      if (!form.reportValidity()) {
-        valid = false;
-      }
-    });
-    return valid;
-  }
-
-  private _computeLabel = (
-    schema: HaFormSchema,
-    data?: HaFormDataContainer,
-    options?: { path?: string[] }
-  ) => {
-    if (!this.computeLabel) {
-      return undefined;
-    }
-    return this.computeLabel(schema, data, {
-      ...options,
-      path: [...(options?.path || []), this.schema.name],
-    });
-  };
-
-  private _computeHelper = (
-    schema: HaFormSchema,
-    options?: { path?: string[] }
-  ) => {
-    if (!this.computeHelper) {
-      return undefined;
-    }
-    return this.computeHelper(schema, {
-      ...options,
-      path: [...(options?.path || []), this.schema.name],
-    });
-  };
-
-  private _tabTitle(tabName: string): string {
-    if (!this.computeLabel) {
-      return tabName;
-    }
-    return (
-      this.computeLabel(this.schema, this.data, {
-        path: [...(this.schema.name ? [this.schema.name] : [])],
-        tab: tabName,
-      }) ?? tabName
-    );
-  }
-
-  protected render() {
-    const tabs = this.schema.tabs;
-    if (!tabs.length) {
-      return nothing;
-    }
-
-    const active = this._activeTab ?? tabs[0]!.name;
-    const fillTabs = this.schema.fill_tabs !== false;
-
-    return html`
-      <ha-tab-group ?fill-tabs=${fillTabs} @wa-tab-show=${this._handleTabShow}>
-        ${tabs.map(
-          (tab) => html`
-            <ha-tab-group-tab
-              slot="nav"
-              .panel=${tab.name}
-              .active=${active === tab.name}
-            >
-              ${tab.icon
-                ? html`<ha-icon .icon=${tab.icon}></ha-icon>`
-                : tab.iconPath
-                  ? html`<ha-svg-icon .path=${tab.iconPath}></ha-svg-icon>`
-                  : nothing}
-              ${this._tabTitle(tab.name)}
-            </ha-tab-group-tab>
-          `
-        )}
-      </ha-tab-group>
-      <div class="panels">
-        ${tabs.map((tab) => {
-          const hidden = active !== tab.name;
-          return html`
-            <div class="panel" ?hidden=${hidden}>
-              <ha-form
-                .hass=${this.hass}
-                .data=${this.data}
-                .schema=${tab.schema}
-                .disabled=${this.disabled}
-                .computeLabel=${this._computeLabel}
-                .computeHelper=${this._computeHelper}
-                .localizeValue=${this.localizeValue}
-              ></ha-form>
-            </div>
-          `;
-        })}
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: flex !important;
-      flex-direction: column;
-    }
-    .panels {
-      padding-top: var(--ha-space-4);
-    }
-    .panel[hidden] {
-      display: none !important;
-    }
-    :host ha-form {
-      display: block;
-    }
-    ha-tab-group {
-      display: block;
-    }
-    ha-tab-group-tab ha-icon,
-    ha-tab-group-tab ha-svg-icon {
-      flex-shrink: 0;
-      margin-inline-end: var(--ha-space-2);
-      color: var(--secondary-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-form-tabs": HaFormTabs;
-  }
-}

src/components/ha-form/ha-form.ts

@@ -14,7 +14,6 @@ const LOAD_ELEMENTS = {
   float: () => import("./ha-form-float"),
   grid: () => import("./ha-form-grid"),
   expandable: () => import("./ha-form-expandable"),
-  tabs: () => import("./ha-form-tabs"),
   integer: () => import("./ha-form-integer"),
   multi_select: () => import("./ha-form-multi_select"),
   positive_time_period_dict: () =>

src/components/ha-form/types.ts

@@ -14,8 +14,7 @@ export type HaFormSchema =
   | HaFormSelector
   | HaFormGridSchema
   | HaFormExpandableSchema
-  | HaFormOptionalActionsSchema
-  | HaFormTabsSchema;
+  | HaFormOptionalActionsSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -55,26 +54,6 @@ export interface HaFormOptionalActionsSchema extends HaFormBaseSchema {
   schema: readonly HaFormSchema[];
 }
 
-/** One tab pane inside a {@link HaFormTabsSchema} (not a standalone form field). */
-export interface HaFormTabDefinition {
-  name: string;
-  icon?: string;
-  iconPath?: string;
-  schema: readonly HaFormSchema[];
-}
-
-export interface HaFormTabsSchema extends HaFormBaseSchema {
-  type: "tabs";
-  /** When true (default), tab field values merge into the parent data object. */
-  flatten?: boolean;
-  /**
-   * When true (default), tab labels share width equally across the tab bar.
-   * Set to false for compact tabs that only use their natural width.
-   */
-  fill_tabs?: boolean;
-  tabs: readonly HaFormTabDefinition[];
-}
-
 export interface HaFormSelector extends HaFormBaseSchema {
   type?: never;
   selector: Selector;
@@ -125,13 +104,6 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 }
 
 // Type utility to unionize a schema array by flattening any grid schemas
-type SchemaUnionTabs<T extends readonly HaFormTabDefinition[]> =
-  T[number] extends infer Tab
-    ? Tab extends HaFormTabDefinition
-      ? SchemaUnion<Tab["schema"]>
-      : never
-    : never;
-
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
   Schema = SchemaArray[number],
@@ -140,9 +112,7 @@ export type SchemaUnion<
   | HaFormExpandableSchema
   | HaFormOptionalActionsSchema
   ? SchemaUnion<Schema["schema"]> | Schema
-  : Schema extends HaFormTabsSchema
-    ? SchemaUnionTabs<Schema["tabs"]> | Schema
-    : Schema;
+  : Schema;
 
 export type HaFormDataContainer = Record<string, HaFormData>;
 

src/components/ha-gauge.ts

@@ -171,7 +171,7 @@ export class HaGauge extends LitElement {
             ? svg`
                 <path
                 class="needle"
-                d="M -34,-3 L -48,-1 A 1,1,0,0,0,-48,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
+                d="M -36,-2 L -44,-1 A 1,1,0,0,0,-44,1 L -36,2 A 2,2,0,0,0,-36,-2 Z"
 
                 style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
               />
@@ -243,19 +243,19 @@ export class HaGauge extends LitElement {
     .levels-base {
       fill: none;
       stroke: var(--primary-background-color);
-      stroke-width: 12;
+      stroke-width: 6;
       stroke-linecap: butt;
     }
 
     .level {
       fill: none;
-      stroke-width: 12;
+      stroke-width: 6;
       stroke-linecap: butt;
     }
 
     .value {
       fill: none;
-      stroke-width: 12;
+      stroke-width: 6;
       stroke: var(--gauge-color);
       stroke-linecap: butt;
       transition: stroke-dashoffset 1s ease 0s;

src/components/ha-hls-player.ts

@@ -140,7 +140,7 @@ class HaHLSPlayer extends LitElement {
     this._cleanUp();
     this._resetError();
 
-    if (!isComponentLoaded(this.hass.config, "stream")) {
+    if (!isComponentLoaded(this.hass!, "stream")) {
       this._setFatalError("Streaming component is not loaded.");
       return;
     }

src/components/ha-label.ts

@@ -1,44 +1,18 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, 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
@@ -62,6 +36,10 @@ 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;

src/components/ha-labels-picker.ts

@@ -6,6 +6,7 @@ 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";
@@ -16,7 +17,6 @@ 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,14 +106,9 @@ 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 {
@@ -140,6 +135,9 @@ 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
@@ -156,7 +154,7 @@ export class HaLabelsPicker extends LitElement {
                       .disabled=${this.disabled}
                       .label=${label.name}
                       selected
-                      style=${label.style}
+                      style=${color ? `--color: ${color}` : ""}
                     >
                       ${label.icon
                         ? html`<ha-icon
@@ -241,10 +239,8 @@ export class HaLabelsPicker extends LitElement {
       height: var(--ha-space-8);
     }
     ha-input-chip {
-      --md-input-chip-selected-container-color: var(
-        --ha-label-background-color,
-        var(--grey-color)
-      );
+      --md-input-chip-selected-container-color: var(--color, var(--grey-color));
+      --ha-input-chip-selected-container-opacity: 0.5;
       --md-input-chip-selected-outline-width: 1px;
     }
     label {

src/components/ha-markdown-element.ts

@@ -1,6 +1,7 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement, render, html } from "lit";
 import { customElement, property } from "lit/decorators";
+// eslint-disable-next-line import/extensions
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import hash from "object-hash";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-mount-picker.ts

@@ -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.config, "hassio")) {
+      if (isComponentLoaded(this.hass, "hassio")) {
         this._mounts = await fetchSupervisorMounts(this.hass);
         if (this.usage === SupervisorMountUsage.BACKUP && !this.value) {
           this.value = this._mounts.default_backup_mount || _BACKUP_DATA_DISK_;

src/components/ha-navigation-picker.ts

@@ -132,6 +132,7 @@ export class HaNavigationPicker extends LitElement {
         ? html`
             <ha-domain-icon
               slot="start"
+              .hass=${this.hass}
               .domain=${item.domain}
               brand-fallback
             ></ha-domain-icon>
@@ -157,6 +158,7 @@ export class HaNavigationPicker extends LitElement {
         ? html`
             <ha-domain-icon
               slot="start"
+              .hass=${this.hass}
               .domain=${item.domain}
               brand-fallback
             ></ha-domain-icon>

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

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

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

@@ -98,7 +98,6 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}
-        .noEntity=${this.selector.state?.no_entity ?? false}
         .disabled=${this.disabled}
         .required=${this.required}
         allow-custom-value

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

@@ -65,14 +65,15 @@ export class HaTextSelector extends LitElement {
         .label=${this.label}
         .placeholder=${this.placeholder}
         .value=${this.value || ""}
-        .hint=${this.helper}
+        .helper=${this.helper}
+        helperPersistent
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
         .autocomplete=${this.selector.text?.autocomplete}
         spellcheck="false"
         .required=${this.required}
-        resize="auto"
+        autogrow
       ></ha-textarea>`;
     }
     return html`<ha-input

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

@@ -41,7 +41,6 @@ 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"),

src/components/ha-suggest-with-ai-button.ts

@@ -1,19 +1,19 @@
-import { mdiStarFourPoints } from "@mdi/js";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, css, LitElement, nothing } from "lit";
+import { mdiStarFourPoints } from "@mdi/js";
 
-import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
+import { customElement, state, property } from "lit/decorators";
 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.config, "ai_task")) {
+    if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
       return;
     }
     fetchAITaskPreferences(this.hass).then((prefs) => {

src/components/ha-tab-group-tab.ts

@@ -26,11 +26,6 @@ export class HaTabGroupTab extends Tab {
           opacity: 1;
         }
 
-        .tab {
-          width: var(--ha-tab-base-width, auto);
-          justify-content: var(--ha-tab-base-justify-content, flex-start);
-        }
-
         @media (hover: hover) {
           :host(:hover:not([disabled]):not([active])) .tab {
             color: var(--wa-color-brand-on-quiet);

src/components/ha-tab-group.ts

@@ -13,28 +13,6 @@ export class HaTabGroup extends TabGroup {
 
   @property({ attribute: "tab-only", type: Boolean }) tabOnly = true;
 
-  /** When true (default), each tab trigger grows to fill the tab row evenly. */
-  @property({ type: Boolean, reflect: true, attribute: "fill-tabs" })
-  fillTabs = true;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    // Prevent the tab group from consuming Alt+Arrow and Cmd+Arrow keys,
-    // which browsers use for back/forward navigation.
-    this.addEventListener("keydown", this._handleKeyDown, true);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.removeEventListener("keydown", this._handleKeyDown, true);
-  }
-
-  private _handleKeyDown = (event: KeyboardEvent) => {
-    if (event.altKey || event.metaKey) {
-      event.stopPropagation();
-    }
-  };
-
   protected override handleClick(event: MouseEvent) {
     if (this._dragScrollController.scrolled) {
       return;
@@ -74,13 +52,6 @@ export class HaTabGroup extends TabGroup {
         .scroll-button::part(base):hover {
           background-color: transparent;
         }
-
-        :host([fill-tabs]) .tab-group-top .tabs ::slotted(ha-tab-group-tab),
-        :host([fill-tabs]) .tab-group-bottom .tabs ::slotted(ha-tab-group-tab) {
-          flex: 1;
-          --ha-tab-base-width: 100%;
-          --ha-tab-base-justify-content: center;
-        }
       `,
     ];
   }

src/components/ha-textarea.ts

@@ -1,249 +1,66 @@
-import "@home-assistant/webawesome/dist/components/textarea/textarea";
-import type WaTextarea from "@home-assistant/webawesome/dist/components/textarea/textarea";
-import { HasSlotController } from "@home-assistant/webawesome/dist/internal/slot";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { WaInputMixin, waInputStyles } from "./input/wa-input-mixin";
+import { TextAreaBase } from "@material/mwc-textarea/mwc-textarea-base";
+import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield.css";
+import { styles as textareaStyles } from "@material/mwc-textarea/mwc-textarea.css";
+import type { PropertyValues } from "lit";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
 
-/**
- * Home Assistant textarea component
- *
- * @element ha-textarea
- * @extends {LitElement}
- *
- * @summary
- * A multi-line text input component supporting Home Assistant theming and validation, based on webawesome textarea.
- *
- * @slot label - Custom label content. Overrides the `label` property.
- * @slot hint - Custom hint content. Overrides the `hint` property.
- *
- * @csspart wa-base - The underlying wa-textarea base wrapper.
- * @csspart wa-hint - The underlying wa-textarea hint container.
- * @csspart wa-textarea - The underlying wa-textarea textarea element.
- *
- * @cssprop --ha-textarea-padding-bottom - Padding below the textarea host.
- * @cssprop --ha-textarea-max-height - Maximum height of the textarea when using `resize="auto"`. Defaults to `200px`.
- * @cssprop --ha-textarea-required-marker - The marker shown after the label for required fields. Defaults to `"*"`.
- *
- * @attr {string} label - The textarea's label text.
- * @attr {string} hint - The textarea's hint/helper text.
- * @attr {string} placeholder - Placeholder text shown when the textarea is empty.
- * @attr {boolean} readonly - Makes the textarea readonly.
- * @attr {boolean} disabled - Disables the textarea and prevents user interaction.
- * @attr {boolean} required - Makes the textarea a required field.
- * @attr {number} rows - Number of visible text rows.
- * @attr {number} minlength - Minimum number of characters required.
- * @attr {number} maxlength - Maximum number of characters allowed.
- * @attr {("none"|"vertical"|"horizontal"|"both"|"auto")} resize - Controls the textarea's resize behavior. Defaults to `"none"`.
- * @attr {boolean} auto-validate - Validates the textarea on blur instead of on form submit.
- * @attr {boolean} invalid - Marks the textarea as invalid.
- * @attr {string} validation-message - Custom validation message shown when the textarea is invalid.
- */
 @customElement("ha-textarea")
-export class HaTextArea extends WaInputMixin(LitElement) {
-  @property({ type: Number })
-  public rows?: number;
+export class HaTextArea extends TextAreaBase {
+  @property({ type: Boolean, reflect: true }) autogrow = false;
 
-  @property()
-  public resize: "none" | "vertical" | "horizontal" | "both" | "auto" = "none";
-
-  @query("wa-textarea")
-  private _textarea?: WaTextarea;
-
-  private readonly _hasSlotController = new HasSlotController(
-    this,
-    "label",
-    "hint"
-  );
-
-  protected get _formControl(): WaTextarea | undefined {
-    return this._textarea;
-  }
-
-  protected readonly _requiredMarkerCSSVar = "--ha-textarea-required-marker";
-
-  /** Programmatically toggle focus styling (used by ha-date-range-picker). */
-  public setFocused(focused: boolean): void {
-    if (focused) {
-      this.toggleAttribute("focused", true);
-    } else {
-      this.removeAttribute("focused");
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (this.autogrow && changedProperties.has("value")) {
+      this.mdcRoot.dataset.value = this.value + '=\u200B"'; // add a zero-width space to correctly wrap
     }
   }
 
-  protected render() {
-    const hasLabelSlot = this.label
-      ? false
-      : this._hasSlotController.test("label");
-
-    const hasHintSlot = this.hint
-      ? false
-      : this._hasSlotController.test("hint");
-
-    return html`
-      <wa-textarea
-        .value=${this.value ?? null}
-        .placeholder=${this.placeholder}
-        .readonly=${this.readonly}
-        .required=${this.required}
-        .rows=${this.rows ?? 4}
-        .resize=${this.resize}
-        .disabled=${this.disabled}
-        name=${ifDefined(this.name)}
-        autocapitalize=${ifDefined(this.autocapitalize || undefined)}
-        autocomplete=${ifDefined(this.autocomplete)}
-        .autofocus=${this.autofocus}
-        .spellcheck=${this.spellcheck}
-        inputmode=${ifDefined(this.inputmode || undefined)}
-        enterkeyhint=${ifDefined(this.enterkeyhint || undefined)}
-        minlength=${ifDefined(this.minlength)}
-        maxlength=${ifDefined(this.maxlength)}
-        class=${classMap({
-          input: true,
-          invalid: this.invalid || this._invalid,
-          "label-raised":
-            (this.value !== undefined && this.value !== "") ||
-            (this.label && this.placeholder),
-          "no-label": !this.label,
-          "hint-hidden":
-            !this.hint &&
-            !hasHintSlot &&
-            !this.required &&
-            !this._invalid &&
-            !this.invalid,
-        })}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @blur=${this._handleBlur}
-        @wa-invalid=${this._handleInvalid}
-        exportparts="base:wa-base, hint:wa-hint, textarea:wa-textarea"
-      >
-        ${this.label || hasLabelSlot
-          ? html`<slot name="label" slot="label"
-              >${this.label
-                ? this._renderLabel(this.label, this.required)
-                : nothing}</slot
-            >`
-          : nothing}
-        <div
-          slot="hint"
-          class=${classMap({
-            error: this.invalid || this._invalid,
-          })}
-          role=${ifDefined(this.invalid || this._invalid ? "alert" : undefined)}
-          aria-live="polite"
-        >
-          ${this._invalid || this.invalid
-            ? this.validationMessage || this._textarea?.validationMessage
-            : this.hint ||
-              (hasHintSlot ? html`<slot name="hint"></slot>` : nothing)}
-        </div>
-      </wa-textarea>
-    `;
-  }
-
-  static styles = [
-    waInputStyles,
+  static override styles = [
+    textfieldStyles,
+    textareaStyles,
     css`
       :host {
-        display: flex;
-        align-items: flex-start;
-        padding-bottom: var(--ha-textarea-padding-bottom);
+        --mdc-text-field-fill-color: var(--ha-color-form-background);
       }
-
-      /* Label styling */
-      wa-textarea::part(label) {
-        width: calc(100% - var(--ha-space-2));
-        background-color: var(--ha-color-form-background);
-        transition:
-          all var(--wa-transition-normal) ease-in-out,
-          background-color var(--wa-transition-normal) ease-in-out;
-        padding-inline-start: var(--ha-space-3);
-        padding-inline-end: var(--ha-space-3);
-        margin: var(--ha-space-1) var(--ha-space-1) 0;
-        padding-top: var(--ha-space-4);
-        white-space: nowrap;
-        overflow: hidden;
+      :host([autogrow]) .mdc-text-field {
+        position: relative;
+        min-height: 74px;
+        min-width: 178px;
+        max-height: 200px;
       }
-
-      :host(:focus-within) wa-textarea::part(label),
-      :host([focused]) wa-textarea::part(label) {
-        color: var(--primary-color);
+      :host([autogrow]) .mdc-text-field:after {
+        content: attr(data-value);
+        margin-top: 23px;
+        margin-bottom: 9px;
+        line-height: var(--ha-line-height-normal);
+        min-height: 42px;
+        padding: 0px 32px 0 16px;
+        letter-spacing: var(
+          --mdc-typography-subtitle1-letter-spacing,
+          0.009375em
+        );
+        visibility: hidden;
+        white-space: pre-wrap;
       }
-
-      wa-textarea.label-raised::part(label),
-      :host(:focus-within) wa-textarea::part(label),
-      :host([focused]) wa-textarea::part(label) {
-        padding-top: var(--ha-space-2);
-        font-size: var(--ha-font-size-xs);
-      }
-
-      wa-textarea.no-label::part(label) {
-        height: 0;
-        padding: 0;
-      }
-
-      /* Base styling */
-      wa-textarea::part(base) {
-        min-height: 56px;
-        padding-top: var(--ha-space-6);
-        padding-bottom: var(--ha-space-2);
-      }
-
-      wa-textarea.no-label::part(base) {
-        padding-top: var(--ha-space-3);
-      }
-
-      wa-textarea::part(base)::after {
-        content: "";
+      :host([autogrow]) .mdc-text-field__input {
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background-color: var(--ha-color-border-neutral-loud);
-        transition:
-          height var(--wa-transition-normal) ease-in-out,
-          background-color var(--wa-transition-normal) ease-in-out;
+        height: calc(100% - 32px);
       }
-
-      :host(:focus-within) wa-textarea::part(base)::after,
-      :host([focused]) wa-textarea::part(base)::after {
-        height: 2px;
-        background-color: var(--primary-color);
+      :host([autogrow]) .mdc-text-field.mdc-text-field--no-label:after {
+        margin-top: 16px;
+        margin-bottom: 16px;
       }
-
-      :host(:focus-within) wa-textarea.invalid::part(base)::after,
-      wa-textarea.invalid:not([disabled])::part(base)::after {
-        background-color: var(--ha-color-border-danger-normal);
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        transform-origin: var(--float-start) top;
       }
-
-      /* Textarea element styling */
-      wa-textarea::part(textarea) {
-        padding: 0 var(--ha-space-4);
-        font-family: var(--ha-font-family-body);
-        font-size: var(--ha-font-size-m);
-      }
-
-      :host([resize="auto"]) wa-textarea::part(textarea) {
-        max-height: var(--ha-textarea-max-height, 200px);
-        overflow-y: auto;
-      }
-
-      wa-textarea:hover::part(base),
-      wa-textarea:hover::part(label) {
-        background-color: var(--ha-color-form-background-hover);
-      }
-
-      wa-textarea[disabled]::part(textarea) {
-        cursor: not-allowed;
-      }
-
-      wa-textarea[disabled]::part(base),
-      wa-textarea[disabled]::part(label) {
-        background-color: var(--ha-color-form-background-disabled);
+      @media only screen and (min-width: 459px) {
+        :host([mobile-multiline]) .mdc-text-field__input {
+          white-space: nowrap;
+          max-height: 16px;
+        }
       }
     `,
   ];

src/components/ha-textfield.ts

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

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -5,7 +5,6 @@ import {
 import { supportsPassiveEventListener } from "@material/mwc-base/utils";
 import type { MDCTopAppBarAdapter } from "@material/top-app-bar/adapter";
 import { strings } from "@material/top-app-bar/constants";
-// eslint-disable-next-line import-x/no-named-as-default
 import MDCFixedTopAppBarFoundation from "@material/top-app-bar/fixed/foundation";
 import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";

src/components/input/ha-input.ts

@@ -11,14 +11,15 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
+import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "../ha-tooltip";
-import { WaInputMixin, waInputStyles } from "./wa-input-mixin";
+import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
 
 export type InputType =
   | "date"
@@ -77,16 +78,35 @@ export type InputType =
  * @attr {string} validation-message - Custom validation message shown when the input is invalid.
  */
 @customElement("ha-input")
-export class HaInput extends WaInputMixin(LitElement) {
+export class HaInput extends LitElement {
   @property({ reflect: true }) appearance: "material" | "outlined" = "material";
 
   @property({ reflect: true })
   public type: InputType = "text";
 
+  @property()
+  public value?: string;
+
+  /** The input's label. */
+  @property()
+  public label = "";
+
+  /** The input's hint. */
+  @property()
+  public hint? = "";
+
   /** Adds a clear button when the input is not empty. */
   @property({ type: Boolean, attribute: "with-clear" })
   public withClear = false;
 
+  /** Placeholder text to show as a hint when the input is empty. */
+  @property()
+  public placeholder = "";
+
+  /** Makes the input readonly. */
+  @property({ type: Boolean })
+  public readonly = false;
+
   /** Adds a button to toggle the password's visibility. */
   @property({ type: Boolean, attribute: "password-toggle" })
   public passwordToggle = false;
@@ -99,10 +119,22 @@ export class HaInput extends WaInputMixin(LitElement) {
   @property({ type: Boolean, attribute: "without-spin-buttons" })
   public withoutSpinButtons = false;
 
+  /** Makes the input a required field. */
+  @property({ type: Boolean, reflect: true })
+  public required = false;
+
   /** A regular expression pattern to validate input against. */
   @property()
   public pattern?: string;
 
+  /** The minimum length of input that will be considered valid. */
+  @property({ type: Number })
+  public minlength?: number;
+
+  /** The maximum length of input that will be considered valid. */
+  @property({ type: Number })
+  public maxlength?: number;
+
   /** The input's minimum value. Only applies to date and number input types. */
   @property()
   public min?: number | string;
@@ -115,13 +147,88 @@ export class HaInput extends WaInputMixin(LitElement) {
   @property()
   public step?: number | "any";
 
+  /** Controls whether and how text input is automatically capitalized. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public autocapitalize:
+    | "off"
+    | "none"
+    | "on"
+    | "sentences"
+    | "words"
+    | "characters"
+    | "" = "";
+
   /** Indicates whether the browser's autocorrect feature is on or off. */
   @property({ type: Boolean })
   public autocorrect = false;
 
+  /** Specifies what permission the browser has to provide assistance in filling out form field values. */
+  @property()
+  public autocomplete?: string;
+
+  /** Indicates that the input should receive focus on page load. */
+  @property({ type: Boolean })
+  // eslint-disable-next-line lit/no-native-attributes
+  public autofocus = false;
+
+  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public enterkeyhint:
+    | "enter"
+    | "done"
+    | "go"
+    | "next"
+    | "previous"
+    | "search"
+    | "send"
+    | "" = "";
+
+  /** Enables spell checking on the input. */
+  @property({ type: Boolean })
+  // eslint-disable-next-line lit/no-native-attributes
+  public spellcheck = true;
+
+  /** Tells the browser what type of data will be entered by the user. */
+  @property()
+  // eslint-disable-next-line lit/no-native-attributes
+  public inputmode:
+    | "none"
+    | "text"
+    | "decimal"
+    | "numeric"
+    | "tel"
+    | "search"
+    | "email"
+    | "url"
+    | "" = "";
+
+  /** The name of the input, submitted as a name/value pair with form data. */
+  @property()
+  public name?: string;
+
+  /** Disables the form control. */
+  @property({ type: Boolean })
+  public disabled = false;
+
+  /** Custom validation message to show when the input is invalid. */
+  @property({ attribute: "validation-message" })
+  public validationMessage? = "";
+
+  /** When true, validates the input on blur instead of on form submit. */
+  @property({ type: Boolean, attribute: "auto-validate" })
+  public autoValidate = false;
+
+  @property({ type: Boolean })
+  public invalid = false;
+
   @property({ type: Boolean, attribute: "inset-label" })
   public insetLabel = false;
 
+  @state()
+  private _invalid = false;
+
   @query("wa-input")
   private _input?: WaInput;
 
@@ -129,12 +236,40 @@ export class HaInput extends WaInputMixin(LitElement) {
     this,
     "label",
     "hint",
-    "input",
-    "start"
+    "input"
   );
 
-  protected get _formControl(): WaInput | undefined {
-    return this._input;
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
+
+  /** Selects all the text in the input. */
+  public select(): void {
+    this._input?.select();
+  }
+
+  /** Sets the start and end positions of the text selection (0-based). */
+  public setSelectionRange(
+    selectionStart: number,
+    selectionEnd: number,
+    selectionDirection?: "forward" | "backward" | "none"
+  ): void {
+    this._input?.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+
+  /** Replaces a range of text with a new string. */
+  public setRangeText(
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectMode?: "select" | "start" | "end" | "preserve"
+  ): void {
+    this._input?.setRangeText(replacement, start, end, selectMode);
   }
 
   /** Displays the browser picker for an input element. */
@@ -152,6 +287,19 @@ export class HaInput extends WaInputMixin(LitElement) {
     this._input?.stepDown();
   }
 
+  public checkValidity(): boolean {
+    return nativeElementInternalsSupported
+      ? (this._input?.checkValidity() ?? true)
+      : true;
+  }
+
+  public reportValidity(): boolean {
+    const valid = this.checkValidity();
+
+    this._invalid = !valid;
+    return valid;
+  }
+
   protected override async firstUpdated(
     changedProperties: PropertyValues
   ): Promise<void> {
@@ -173,8 +321,6 @@ export class HaInput extends WaInputMixin(LitElement) {
       ? false
       : this._hasSlotController.test("hint");
 
-    const hasStartSlot = this._hasSlotController.test("start");
-
     return html`
       <wa-input
         .type=${this.type}
@@ -202,12 +348,10 @@ export class HaInput extends WaInputMixin(LitElement) {
         .name=${this.name}
         .disabled=${this.disabled}
         class=${classMap({
-          input: true,
           invalid: this.invalid || this._invalid,
           "label-raised":
             (this.value !== undefined && this.value !== "") ||
-            (this.label && this.placeholder) ||
-            (hasStartSlot && this.insetLabel),
+            (this.label && this.placeholder),
           "no-label": !this.label,
           "hint-hidden":
             !this.hint &&
@@ -224,9 +368,7 @@ export class HaInput extends WaInputMixin(LitElement) {
       >
         ${this.label || hasLabelSlot
           ? html`<slot name="label" slot="label"
-              >${this.label
-                ? this._renderLabel(this.label, this.required)
-                : nothing}</slot
+              >${this._renderLabel(this.label, this.required)}</slot
             >`
           : nothing}
         <slot name="start" slot="start" @slotchange=${this._syncStartSlotWidth}>
@@ -273,6 +415,27 @@ export class HaInput extends WaInputMixin(LitElement) {
     return nothing;
   }
 
+  private _handleInput() {
+    this.value = this._input?.value ?? undefined;
+    if (this._invalid && this._input?.checkValidity()) {
+      this._invalid = false;
+    }
+  }
+
+  private _handleChange() {
+    this.value = this._input?.value ?? undefined;
+  }
+
+  private _handleBlur() {
+    if (this.autoValidate) {
+      this._invalid = !this._input?.checkValidity();
+    }
+  }
+
+  private _handleInvalid() {
+    this._invalid = true;
+  }
+
   private _syncStartSlotWidth = () => {
     const startEl = this._input?.shadowRoot?.querySelector(
       '[part~="start"]'
@@ -293,133 +456,205 @@ export class HaInput extends WaInputMixin(LitElement) {
     }
   };
 
-  static styles = [
-    waInputStyles,
-    css`
-      :host {
-        display: flex;
-        align-items: flex-start;
-        padding-top: var(--ha-input-padding-top);
-        padding-bottom: var(--ha-input-padding-bottom, var(--ha-space-2));
-        text-align: var(--ha-input-text-align, start);
-      }
-      :host([appearance="outlined"]) {
-        padding-bottom: var(--ha-input-padding-bottom);
-      }
+  private _renderLabel = memoizeOne((label: string, required: boolean) => {
+    if (!required) {
+      return label;
+    }
 
-      wa-input::part(label) {
-        padding-inline-start: calc(
-          var(--start-slot-width, 0px) + var(--ha-space-4)
-        );
-        padding-inline-end: var(--ha-space-4);
-        padding-top: var(--ha-space-5);
-      }
+    let marker = getComputedStyle(this).getPropertyValue(
+      "--ha-input-required-marker"
+    );
 
-      :host([appearance="material"]:focus-within) wa-input::part(label) {
-        color: var(--primary-color);
-      }
+    if (!marker) {
+      marker = "*";
+    }
 
-      wa-input.label-raised::part(label),
-      :host(:focus-within) wa-input::part(label),
-      :host([type="date"]) wa-input::part(label) {
-        padding-top: var(--ha-space-3);
-        font-size: var(--ha-font-size-xs);
-      }
+    if (marker.startsWith('"') && marker.endsWith('"')) {
+      marker = marker.slice(1, -1);
+    }
 
-      wa-input::part(base) {
-        height: 56px;
-        padding: 0 var(--ha-space-4);
-      }
+    if (!marker) {
+      return label;
+    }
 
-      :host([appearance="outlined"]) wa-input.no-label::part(base) {
-        height: 32px;
-        padding: 0 var(--ha-space-2);
-      }
+    return `${label}${marker}`;
+  });
 
-      :host([appearance="outlined"]) wa-input::part(base) {
-        border: 1px solid var(--ha-color-border-neutral-quiet);
-        background-color: var(--card-background-color);
-        border-radius: var(--ha-border-radius-md);
-        transition: border-color var(--wa-transition-normal) ease-in-out;
-      }
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: flex-start;
+      padding-top: var(--ha-input-padding-top);
+      padding-bottom: var(--ha-input-padding-bottom, var(--ha-space-2));
+      text-align: var(--ha-input-text-align, start);
+    }
+    :host([appearance="outlined"]) {
+      padding-bottom: var(--ha-input-padding-bottom);
+    }
+    wa-input {
+      flex: 1;
+      min-width: 0;
+      --wa-transition-fast: var(--wa-transition-normal);
+      position: relative;
+    }
 
-      :host([appearance="material"]) ::part(base)::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background-color: var(--ha-color-border-neutral-loud);
-        transition:
-          height var(--wa-transition-normal) ease-in-out,
-          background-color var(--wa-transition-normal) ease-in-out;
-      }
+    wa-input::part(label) {
+      position: absolute;
+      top: 0;
+      font-weight: var(--ha-font-weight-normal);
+      font-family: var(--ha-font-family-body);
+      transition: all var(--wa-transition-normal) ease-in-out;
+      color: var(--secondary-text-color);
+      line-height: var(--ha-line-height-condensed);
+      z-index: 1;
+      pointer-events: none;
+      padding-inline-start: calc(
+        var(--start-slot-width, 0px) + var(--ha-space-4)
+      );
+      padding-inline-end: var(--ha-space-4);
+      padding-top: var(--ha-space-5);
+      font-size: var(--ha-font-size-m);
+    }
 
-      :host([appearance="material"]:focus-within) wa-input::part(base)::after {
-        height: 2px;
-        background-color: var(--primary-color);
-      }
+    :host([appearance="material"]:focus-within) wa-input::part(label) {
+      color: var(--primary-color);
+    }
 
-      :host([appearance="material"]:focus-within)
-        wa-input.invalid::part(base)::after,
-      :host([appearance="material"])
-        wa-input.invalid:not([disabled])::part(base)::after {
-        background-color: var(--ha-color-border-danger-normal);
-      }
+    :host(:focus-within) wa-input.invalid::part(label),
+    wa-input.invalid:not([disabled])::part(label) {
+      color: var(--ha-color-fill-danger-loud-resting);
+    }
 
-      wa-input::part(input) {
-        padding-top: var(--ha-space-3);
-        padding-inline-start: var(--input-padding-inline-start, 0);
-      }
+    wa-input.label-raised::part(label),
+    :host(:focus-within) wa-input::part(label),
+    :host([type="date"]) wa-input::part(label) {
+      padding-top: var(--ha-space-3);
+      font-size: var(--ha-font-size-xs);
+    }
 
-      wa-input.no-label::part(input) {
-        padding-top: 0;
-      }
-      :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) {
-        padding: var(--ha-space-2);
-      }
-      :host([type="color"]) wa-input.no-label::part(base) {
-        padding: 0;
-      }
-      wa-input::part(input)::placeholder {
-        color: var(--ha-color-neutral-60);
-      }
+    wa-input::part(base) {
+      height: 56px;
+      background-color: var(--ha-color-form-background);
+      border-top-left-radius: var(--ha-border-radius-sm);
+      border-top-right-radius: var(--ha-border-radius-sm);
+      border-bottom-left-radius: var(--ha-border-radius-square);
+      border-bottom-right-radius: var(--ha-border-radius-square);
+      border: none;
+      padding: 0 var(--ha-space-4);
+      position: relative;
+      transition: background-color var(--wa-transition-normal) ease-in-out;
+    }
 
-      wa-input::part(base):hover {
-        background-color: var(--ha-color-form-background-hover);
-      }
+    :host([appearance="outlined"]) wa-input.no-label::part(base) {
+      height: 32px;
+      padding: 0 var(--ha-space-2);
+    }
 
-      :host([appearance="outlined"]) wa-input::part(base):hover {
-        border-color: var(--ha-color-border-neutral-normal);
-      }
-      :host([appearance="outlined"]:focus-within) wa-input::part(base) {
-        border-color: var(--primary-color);
-      }
+    :host([appearance="outlined"]) wa-input::part(base) {
+      border: 1px solid var(--ha-color-border-neutral-quiet);
+      background-color: var(--card-background-color);
+      border-radius: var(--ha-border-radius-md);
+      transition: border-color var(--wa-transition-normal) ease-in-out;
+    }
 
-      wa-input:disabled::part(base) {
-        background-color: var(--ha-color-form-background-disabled);
-      }
+    :host([appearance="material"]) ::part(base)::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background-color: var(--ha-color-border-neutral-loud);
+      transition:
+        height var(--wa-transition-normal) ease-in-out,
+        background-color var(--wa-transition-normal) ease-in-out;
+    }
 
-      wa-input:disabled::part(label) {
-        opacity: 0.5;
-      }
+    :host([appearance="material"]:focus-within) wa-input::part(base)::after {
+      height: 2px;
+      background-color: var(--primary-color);
+    }
 
-      wa-input::part(end) {
-        color: var(--ha-color-text-secondary);
-      }
+    :host([appearance="material"]:focus-within)
+      wa-input.invalid::part(base)::after,
+    :host([appearance="material"])
+      wa-input.invalid:not([disabled])::part(base)::after {
+      background-color: var(--ha-color-border-danger-normal);
+    }
 
-      :host([appearance="outlined"]) wa-input.no-label {
-        --ha-icon-button-size: 24px;
-        --mdc-icon-size: 18px;
-      }
-    `,
-  ];
+    wa-input::part(input) {
+      padding-top: var(--ha-space-3);
+      padding-inline-start: var(--input-padding-inline-start, 0);
+    }
+
+    wa-input.no-label::part(input) {
+      padding-top: 0;
+    }
+    :host([type="color"]) wa-input::part(input) {
+      padding-top: var(--ha-space-6);
+      cursor: pointer;
+    }
+    :host([type="color"]) wa-input.no-label::part(input) {
+      padding: var(--ha-space-2);
+    }
+    :host([type="color"]) wa-input.no-label::part(base) {
+      padding: 0;
+    }
+    wa-input::part(input)::placeholder {
+      color: var(--ha-color-neutral-60);
+    }
+
+    :host(:focus-within) wa-input::part(base) {
+      outline: none;
+    }
+
+    wa-input::part(base):hover {
+      background-color: var(--ha-color-form-background-hover);
+    }
+
+    :host([appearance="outlined"]) wa-input::part(base):hover {
+      border-color: var(--ha-color-border-neutral-normal);
+    }
+    :host([appearance="outlined"]:focus-within) wa-input::part(base) {
+      border-color: var(--primary-color);
+    }
+
+    wa-input:disabled::part(base) {
+      background-color: var(--ha-color-form-background-disabled);
+    }
+
+    wa-input:disabled::part(label) {
+      opacity: 0.5;
+    }
+
+    wa-input::part(hint) {
+      min-height: var(--ha-space-5);
+      margin-block-start: 0;
+      margin-inline-start: var(--ha-space-3);
+      font-size: var(--ha-font-size-xs);
+      display: flex;
+      align-items: center;
+      color: var(--ha-color-text-secondary);
+    }
+
+    wa-input.hint-hidden::part(hint) {
+      height: 0;
+      min-height: 0;
+    }
+
+    .error {
+      color: var(--ha-color-on-danger-quiet);
+    }
+
+    wa-input::part(end) {
+      color: var(--ha-color-text-secondary);
+    }
+
+    :host([appearance="outlined"]) wa-input.no-label {
+      --ha-icon-button-size: 24px;
+      --mdc-icon-size: 18px;
+    }
+  `;
 }
 
 declare global {

src/components/input/wa-input-mixin.ts

@@ -1,357 +0,0 @@
-import { type LitElement, css } from "lit";
-import { property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import type { Constructor } from "../../types";
-import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
-
-/**
- * Minimal interface for the inner wa-input / wa-textarea element.
- */
-export interface WaInput {
-  value: string | null;
-  select(): void;
-  setSelectionRange(
-    start: number,
-    end: number,
-    direction?: "forward" | "backward" | "none"
-  ): void;
-  setRangeText(
-    replacement: string,
-    start?: number,
-    end?: number,
-    selectMode?: "select" | "start" | "end" | "preserve"
-  ): void;
-  checkValidity(): boolean;
-  validationMessage: string;
-}
-
-export interface WaInputMixinInterface {
-  value?: string;
-  label: string;
-  hint?: string;
-  placeholder: string;
-  readonly: boolean;
-  required: boolean;
-  minlength?: number;
-  maxlength?: number;
-  autocapitalize:
-    | "off"
-    | "none"
-    | "on"
-    | "sentences"
-    | "words"
-    | "characters"
-    | "";
-  autocomplete?: string;
-  autofocus: boolean;
-  spellcheck: boolean;
-  inputmode:
-    | "none"
-    | "text"
-    | "decimal"
-    | "numeric"
-    | "tel"
-    | "search"
-    | "email"
-    | "url"
-    | "";
-  enterkeyhint:
-    | "enter"
-    | "done"
-    | "go"
-    | "next"
-    | "previous"
-    | "search"
-    | "send"
-    | "";
-  name?: string;
-  disabled: boolean;
-  validationMessage?: string;
-  autoValidate: boolean;
-  invalid: boolean;
-  select(): void;
-  setSelectionRange(
-    start: number,
-    end: number,
-    direction?: "forward" | "backward" | "none"
-  ): void;
-  setRangeText(
-    replacement: string,
-    start?: number,
-    end?: number,
-    selectMode?: "select" | "start" | "end" | "preserve"
-  ): void;
-  checkValidity(): boolean;
-  reportValidity(): boolean;
-}
-
-export const WaInputMixin = <T extends Constructor<LitElement>>(
-  superClass: T
-) => {
-  class FormControlMixinClass extends superClass {
-    @property()
-    public value?: string;
-
-    @property()
-    public label? = "";
-
-    @property()
-    public hint? = "";
-
-    @property()
-    public placeholder? = "";
-
-    @property({ type: Boolean })
-    public readonly = false;
-
-    @property({ type: Boolean, reflect: true })
-    public required = false;
-
-    @property({ type: Number })
-    public minlength?: number;
-
-    @property({ type: Number })
-    public maxlength?: number;
-
-    @property()
-    // eslint-disable-next-line lit/no-native-attributes
-    public autocapitalize:
-      | "off"
-      | "none"
-      | "on"
-      | "sentences"
-      | "words"
-      | "characters"
-      | "" = "";
-
-    @property()
-    public autocomplete?: string;
-
-    @property({ type: Boolean })
-    // eslint-disable-next-line lit/no-native-attributes
-    public autofocus = false;
-
-    @property({ type: Boolean })
-    // eslint-disable-next-line lit/no-native-attributes
-    public spellcheck = true;
-
-    @property()
-    // eslint-disable-next-line lit/no-native-attributes
-    public inputmode:
-      | "none"
-      | "text"
-      | "decimal"
-      | "numeric"
-      | "tel"
-      | "search"
-      | "email"
-      | "url"
-      | "" = "";
-
-    @property()
-    // eslint-disable-next-line lit/no-native-attributes
-    public enterkeyhint:
-      | "enter"
-      | "done"
-      | "go"
-      | "next"
-      | "previous"
-      | "search"
-      | "send"
-      | "" = "";
-
-    @property()
-    public name?: string;
-
-    @property({ type: Boolean })
-    public disabled = false;
-
-    @property({ attribute: "validation-message" })
-    public validationMessage? = "";
-
-    @property({ type: Boolean, attribute: "auto-validate" })
-    public autoValidate = false;
-
-    @property({ type: Boolean })
-    public invalid = false;
-
-    @state()
-    protected _invalid = false;
-
-    static shadowRootOptions: ShadowRootInit = {
-      mode: "open",
-      delegatesFocus: true,
-    };
-
-    /**
-     * Override in subclass to return the inner wa-input / wa-textarea element.
-     */
-    protected get _formControl(): WaInput | undefined {
-      throw new Error("_formControl getter must be implemented by subclass");
-    }
-
-    /**
-     * Override in subclass to set the CSS custom property name
-     * used for the required-marker character (e.g. "--ha-input-required-marker").
-     */
-    protected readonly _requiredMarkerCSSVar: string =
-      "--ha-input-required-marker";
-
-    public select(): void {
-      this._formControl?.select();
-    }
-
-    public setSelectionRange(
-      selectionStart: number,
-      selectionEnd: number,
-      selectionDirection?: "forward" | "backward" | "none"
-    ): void {
-      this._formControl?.setSelectionRange(
-        selectionStart,
-        selectionEnd,
-        selectionDirection
-      );
-    }
-
-    public setRangeText(
-      replacement: string,
-      start?: number,
-      end?: number,
-      selectMode?: "select" | "start" | "end" | "preserve"
-    ): void {
-      this._formControl?.setRangeText(replacement, start, end, selectMode);
-    }
-
-    public checkValidity(): boolean {
-      return nativeElementInternalsSupported
-        ? (this._formControl?.checkValidity() ?? true)
-        : true;
-    }
-
-    public reportValidity(): boolean {
-      const valid = this.checkValidity();
-      this._invalid = !valid;
-      return valid;
-    }
-
-    protected _handleInput(): void {
-      this.value = this._formControl?.value ?? undefined;
-      if (this._invalid && this._formControl?.checkValidity()) {
-        this._invalid = false;
-      }
-    }
-
-    protected _handleChange(): void {
-      this.value = this._formControl?.value ?? undefined;
-    }
-
-    protected _handleBlur(): void {
-      if (this.autoValidate) {
-        this._invalid = !this._formControl?.checkValidity();
-      }
-    }
-
-    protected _handleInvalid(): void {
-      this._invalid = true;
-    }
-
-    protected _renderLabel = memoizeOne((label: string, required: boolean) => {
-      if (!required) {
-        return label;
-      }
-
-      let marker = getComputedStyle(this).getPropertyValue(
-        this._requiredMarkerCSSVar
-      );
-
-      if (!marker) {
-        marker = "*";
-      }
-
-      if (marker.startsWith('"') && marker.endsWith('"')) {
-        marker = marker.slice(1, -1);
-      }
-
-      if (!marker) {
-        return label;
-      }
-
-      return `${label}${marker}`;
-    });
-  }
-
-  return FormControlMixinClass;
-};
-
-/**
- * Shared styles for form controls (ha-input / ha-textarea).
- * Both components add the `control` CSS class to the inner wa-input / wa-textarea
- * element so these rules can target them with a single selector.
- */
-export const waInputStyles = css`
-  /* Inner element reset */
-  .input {
-    flex: 1;
-    min-width: 0;
-    --wa-transition-fast: var(--wa-transition-normal);
-    position: relative;
-  }
-
-  /* Label base */
-  .input::part(label) {
-    position: absolute;
-    top: 0;
-    font-weight: var(--ha-font-weight-normal);
-    font-family: var(--ha-font-family-body);
-    transition: all var(--wa-transition-normal) ease-in-out;
-    color: var(--secondary-text-color);
-    line-height: var(--ha-line-height-condensed);
-    z-index: 1;
-    pointer-events: none;
-    font-size: var(--ha-font-size-m);
-  }
-
-  /* Invalid label */
-  :host(:focus-within) .input.invalid::part(label),
-  .input.invalid:not([disabled])::part(label) {
-    color: var(--ha-color-fill-danger-loud-resting);
-  }
-
-  /* Base common */
-  .input::part(base) {
-    background-color: var(--ha-color-form-background);
-    border-top-left-radius: var(--ha-border-radius-sm);
-    border-top-right-radius: var(--ha-border-radius-sm);
-    border-bottom-left-radius: var(--ha-border-radius-square);
-    border-bottom-right-radius: var(--ha-border-radius-square);
-    border: none;
-    position: relative;
-    transition: background-color var(--wa-transition-normal) ease-in-out;
-  }
-
-  /* Focus outline removal */
-  :host(:focus-within) .input::part(base) {
-    outline: none;
-  }
-
-  /* Hint */
-  .input::part(hint) {
-    min-height: var(--ha-space-5);
-    margin-block-start: 0;
-    margin-inline-start: var(--ha-space-3);
-    font-size: var(--ha-font-size-xs);
-    display: flex;
-    align-items: center;
-    color: var(--ha-color-text-secondary);
-  }
-
-  .input.hint-hidden::part(hint) {
-    height: 0;
-    min-height: 0;
-  }
-
-  /* Error hint text */
-  .error {
-    color: var(--ha-color-on-danger-quiet);
-  }
-`;

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

@@ -1,10 +1,10 @@
 import { animate } from "@lit-labs/motion";
 
 import {
-  mdiCheckboxBlankOutline,
-  mdiCheckboxMarkedOutline,
   mdiClose,
   mdiDelete,
+  mdiCheckboxBlankOutline,
+  mdiCheckboxMarkedOutline,
 } 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-footer";
 import "../ha-dialog-header";
+import "../ha-dialog-footer";
 import "../ha-icon-button";
 import "../ha-list";
 import "../ha-spinner";
@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                   )}
                 </ha-list>
               `}
-        ${isComponentLoaded(this.hass.config, "hassio")
+        ${isComponentLoaded(this.hass, "hassio")
           ? html`<ha-tip .hass=${this.hass}>
               ${this.hass.localize(
                 "ui.components.media-browser.file_management.tip_media_storage",

src/components/media-player/ha-browse-media-tts.ts

@@ -58,7 +58,7 @@ class BrowseMediaTTS extends LitElement {
       <ha-card>
         <div class="card-content">
           <ha-textarea
-            resize="auto"
+            autogrow
             .label=${this.hass.localize(
               "ui.components.media-browser.tts.message"
             )}
@@ -200,7 +200,7 @@ class BrowseMediaTTS extends LitElement {
   }
 
   private async _ttsClicked(): Promise<void> {
-    const message = this.shadowRoot!.querySelector("ha-textarea")!.value ?? "";
+    const message = this.shadowRoot!.querySelector("ha-textarea")!.value;
     this._message = message;
     const item = { ...this.item };
     const query = new URLSearchParams();

src/components/target-picker/ha-target-picker-item-row.ts

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

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -161,13 +161,7 @@ export class HaTargetPickerValueChip extends LitElement {
       }
 
       return {
-        name: device
-          ? computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
-          : itemId,
+        name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
         fallbackIconPath: mdiDevices,
       };
     }

src/components/tile/ha-tile-info.ts

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -13,8 +12,6 @@ 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)`.
@@ -32,31 +29,21 @@ 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>
-        ${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>`}
+        <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)
@@ -125,15 +112,6 @@ 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);
     }
   `;
 }

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

@@ -32,9 +32,7 @@ export class HaTraceLogbook extends LitElement {
           ></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this.hass.localize(
-            "ui.panel.config.automation.trace.path.no_logbook_entries"
-          )}
+          No Logbook entries found for this step.
         </div>`;
   }
 

src/data/automation_i18n.ts

@@ -826,16 +826,16 @@ const describeLegacyTrigger = (
       : trigger.entity_id;
 
     let offsetChoice = "other";
-    let offset = "";
+    let offset: string | string[] = "";
     if (trigger.offset) {
       offsetChoice = trigger.offset.startsWith("-") ? "before" : "after";
-      const parts = trigger.offset.startsWith("-")
+      offset = trigger.offset.startsWith("-")
         ? trigger.offset.substring(1).split(":")
         : trigger.offset.split(":");
       const duration = {
-        hours: parts.length > 0 ? +parts[0] : 0,
-        minutes: parts.length > 1 ? +parts[1] : 0,
-        seconds: parts.length > 2 ? +parts[2] : 0,
+        hours: offset.length > 0 ? +offset[0] : 0,
+        minutes: offset.length > 1 ? +offset[1] : 0,
+        seconds: offset.length > 2 ? +offset[2] : 0,
       };
       offset = formatDurationLong(hass.locale, duration);
       if (offset === "") {

src/data/calendar.ts

@@ -60,9 +60,6 @@ export const enum CalendarEntityFeature {
   UPDATE_EVENT = 4,
 }
 
-/** Type for date values that can come from REST API or subscription */
-type CalendarDateValue = string | { dateTime: string } | { date: string };
-
 export const fetchCalendarEvents = async (
   hass: HomeAssistant,
   start: Date,
@@ -75,11 +72,11 @@ export const fetchCalendarEvents = async (
 
   const calEvents: CalendarEvent[] = [];
   const errors: string[] = [];
-  const promises: Promise<CalendarEventApiData[]>[] = [];
+  const promises: Promise<CalendarEvent[]>[] = [];
 
   calendars.forEach((cal) => {
     promises.push(
-      hass.callApi<CalendarEventApiData[]>(
+      hass.callApi<CalendarEvent[]>(
         "GET",
         `calendars/${cal.entity_id}${params}`
       )
@@ -87,7 +84,7 @@ export const fetchCalendarEvents = async (
   });
 
   for (const [idx, promise] of promises.entries()) {
-    let result: CalendarEventApiData[];
+    let result: CalendarEvent[];
     try {
       // eslint-disable-next-line no-await-in-loop
       result = await promise;
@@ -97,16 +94,54 @@ export const fetchCalendarEvents = async (
     }
     const cal = calendars[idx];
     result.forEach((ev) => {
-      const normalized = normalizeSubscriptionEventData(ev, cal);
-      if (normalized) {
-        calEvents.push(normalized);
+      const eventStart = getCalendarDate(ev.start);
+      const eventEnd = getCalendarDate(ev.end);
+      if (!eventStart || !eventEnd) {
+        return;
       }
+      const eventData: CalendarEventData = {
+        uid: ev.uid,
+        summary: ev.summary,
+        description: ev.description,
+        location: ev.location,
+        dtstart: eventStart,
+        dtend: eventEnd,
+        recurrence_id: ev.recurrence_id,
+        rrule: ev.rrule,
+      };
+      const event: CalendarEvent = {
+        start: eventStart,
+        end: eventEnd,
+        title: ev.summary,
+        backgroundColor: cal.backgroundColor,
+        borderColor: cal.backgroundColor,
+        calendar: cal.entity_id,
+        eventData: eventData,
+      };
+
+      calEvents.push(event);
     });
   }
 
   return { events: calEvents, errors };
 };
 
+const getCalendarDate = (dateObj: any): string | undefined => {
+  if (typeof dateObj === "string") {
+    return dateObj;
+  }
+
+  if (dateObj.dateTime) {
+    return dateObj.dateTime;
+  }
+
+  if (dateObj.date) {
+    return dateObj.date;
+  }
+
+  return undefined;
+};
+
 export const getCalendars = (
   hass: HomeAssistant,
   element: Element,
@@ -185,89 +220,3 @@ export const deleteCalendarEvent = (
     recurrence_id,
     recurrence_range,
   });
-
-/**
- * Calendar event data from both REST API and WebSocket subscription.
- * Both APIs use the same data format.
- */
-export interface CalendarEventApiData {
-  summary: string;
-  start: CalendarDateValue;
-  end: CalendarDateValue;
-  description?: string | null;
-  location?: string | null;
-  uid?: string | null;
-  recurrence_id?: string | null;
-  rrule?: string | null;
-}
-
-export interface CalendarEventSubscription {
-  events: CalendarEventApiData[] | null;
-}
-
-export const subscribeCalendarEvents = (
-  hass: HomeAssistant,
-  entity_id: string,
-  start: Date,
-  end: Date,
-  callback: (update: CalendarEventSubscription) => void
-) =>
-  hass.connection.subscribeMessage<CalendarEventSubscription>(callback, {
-    type: "calendar/event/subscribe",
-    entity_id,
-    start: start.toISOString(),
-    end: end.toISOString(),
-  });
-
-const getCalendarDate = (dateObj: CalendarDateValue): string | undefined => {
-  if (typeof dateObj === "string") {
-    return dateObj;
-  }
-
-  if ("dateTime" in dateObj) {
-    return dateObj.dateTime;
-  }
-
-  if ("date" in dateObj) {
-    return dateObj.date;
-  }
-
-  return undefined;
-};
-
-/**
- * Normalize calendar event data from API format to internal format.
- * Handles both REST API format (with dateTime/date objects) and subscription format (strings).
- * Converts to internal format with { dtstart, dtend, ... }
- */
-export const normalizeSubscriptionEventData = (
-  eventData: CalendarEventApiData,
-  calendar: Calendar
-): CalendarEvent | null => {
-  const eventStart = getCalendarDate(eventData.start);
-  const eventEnd = getCalendarDate(eventData.end);
-
-  if (!eventStart || !eventEnd) {
-    return null;
-  }
-
-  const normalizedEventData: CalendarEventData = {
-    summary: eventData.summary,
-    dtstart: eventStart,
-    dtend: eventEnd,
-    description: eventData.description ?? undefined,
-    uid: eventData.uid ?? undefined,
-    recurrence_id: eventData.recurrence_id ?? undefined,
-    rrule: eventData.rrule ?? undefined,
-  };
-
-  return {
-    start: eventStart,
-    end: eventEnd,
-    title: eventData.summary,
-    backgroundColor: calendar.backgroundColor,
-    borderColor: calendar.backgroundColor,
-    calendar: calendar.entity_id,
-    eventData: normalizedEventData,
-  };
-};

src/data/device/device_picker.ts

@@ -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 { getDeviceArea } from "../../common/entity/context/get_device_context";
+import { getDeviceContext } 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,12 +144,11 @@ export const getDevices = (
   const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
     const deviceName = computeDeviceNameDisplay(
       device,
-      hass.localize,
-      hass.states,
+      hass,
       deviceEntityLookup[device.id]
     );
 
-    const area = getDeviceArea(device, hass.areas);
+    const { area } = getDeviceContext(device, hass);
 
     const areaName = area ? computeAreaName(area) : undefined;
 

src/data/error_log.ts

@@ -13,7 +13,7 @@ export const fetchErrorLog = (hass: HomeAssistant) =>
   hass.callApi<string>("GET", "error_log");
 
 export const getErrorLogDownloadUrl = (hass: HomeAssistant) =>
-  isComponentLoaded(hass.config, "hassio") &&
+  isComponentLoaded(hass, "hassio") &&
   atLeastVersion(hass.config.version, 2025, 10)
     ? "/api/hassio/core/logs/latest"
     : "/api/error_log";

src/data/frontend.ts

@@ -20,7 +20,6 @@ export interface CoreFrontendSystemData {
 export interface HomeFrontendSystemData {
   favorite_entities?: string[];
   welcome_banner_dismissed?: boolean;
-  hidden_summaries?: string[];
 }
 
 declare global {

src/data/hassio/hardware.ts

@@ -15,7 +15,7 @@ interface HassioHardwareAudioList {
   };
 }
 
-export interface HardwareDevice {
+interface HardwareDevice {
   attributes: Record<string, string>;
   by_id: null | string;
   dev_path: string;