Replace ha-switch with ha-control-switch in hui-entities-toggle component

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/config.yml

@@ -3,6 +3,9 @@ contact_links:
   - name: Request a feature for the UI / Dashboards
     url: https://github.com/orgs/home-assistant/discussions
     about: Request a new feature for the Home Assistant frontend.
+  - name: Discuss UI or UX design
+    url: https://github.com/OpenHomeFoundation/ux-design/discussions
+    about: Share design feedback and discuss visual or UX changes with the design team.
   - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.

.github/PULL_REQUEST_TEMPLATE.md

@@ -69,7 +69,6 @@
 - [ ] I understand the code I am submitting and can explain how it works.
 - [ ] The code change is tested and works locally.
 - [ ] There is no commented out code in this PR.
-- [ ] I have followed the [development checklist][dev-checklist]
 - [ ] I have followed the [perfect PR recommendations][perfect-pr]
 - [ ] Any generated code has been carefully reviewed for correctness and compliance with project standards.
 
@@ -105,6 +104,5 @@ To help with the load of incoming pull requests:
 
   Below, some useful links you could explore:
 -->
-[dev-checklist]: https://developers.home-assistant.io/docs/development_checklist/
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
 [perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr

.github/dependabot.yml

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

.github/workflows/ci.yaml

@@ -98,13 +98,13 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
       - name: Upload frontend build
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: frontend-build
           path: hass_frontend/

.github/workflows/nightly.yaml

@@ -59,14 +59,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@139054aeaa9adc52ab36ddf67437541f039b88e2 # v7.1.1
+      - uses: release-drafter/release-drafter@5de93583980a40bd78603b6dfdcda5b4df377b32 # v7.2.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@d56d093b9ab8d2105bc0cb6ee9bcc0ef4ec8b96d # master
+        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -58,7 +58,7 @@ jobs:
           script/release
 
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
         with:
           skip-existing: true
 

.github/workflows/restrict-task-creation.yml

@@ -22,7 +22,7 @@ jobs:
       || github.event.issue.type.name == 'Opportunity'
     steps:
       - name: Add no-stale label
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             await github.rest.issues.addLabels({
@@ -41,7 +41,7 @@ jobs:
     if: github.event.issue.type.name == 'Task'
     steps:
       - name: Check if user is authorized
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

@@ -6,6 +6,7 @@ on:
     - cron: "0 * * * *"
 
 permissions:
+  actions: write
   issues: write
   pull-requests: write
 

.gitignore

@@ -57,4 +57,4 @@ test/coverage/
 # AI tooling
 .claude
 .cursor
-
+.opencode

.nvmrc

@@ -1 +1 @@
-24.14.1
+24.15.0

.yarnrc.yml

@@ -8,4 +8,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.13.0.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs

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/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "import/no-dynamic-require": "off",
+    "import-x/no-extraneous-dependencies": "off",
+    "import-x/extensions": "off",
+    "import-x/no-dynamic-require": "off",
     "global-require": "off",
     "@typescript-eslint/no-require-imports": "off",
     "prefer-arrow-callback": "off",

build-scripts/gulp/download-translations.js

@@ -99,6 +99,44 @@ const lokaliseProjects = {
   frontend: "3420425759f6d6d241f598.13594006",
 };
 
+const POLL_INTERVAL_MS = 1000;
+
+/* eslint-disable no-await-in-loop */
+async function pollProcess(lokaliseApi, projectId, processId) {
+  while (true) {
+    const process = await lokaliseApi
+      .queuedProcesses()
+      .get(processId, { project_id: projectId });
+
+    const project =
+      projectId === lokaliseProjects.backend ? "backend" : "frontend";
+
+    if (process.status === "finished") {
+      console.log(`Lokalise export process for ${project} finished`);
+      return process;
+    }
+
+    if (process.status === "failed" || process.status === "cancelled") {
+      throw new Error(
+        `Lokalise export process for ${project} ${process.status}: ${process.message}`
+      );
+    }
+
+    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})`
+        : ""
+    );
+
+    await new Promise((resolve) => {
+      setTimeout(resolve, POLL_INTERVAL_MS);
+    });
+  }
+}
+/* eslint-enable no-await-in-loop */
+
 gulp.task("fetch-lokalise", async function () {
   let apiKey;
   try {
@@ -118,55 +156,60 @@ gulp.task("fetch-lokalise", async function () {
   ]);
 
   await Promise.all(
-    Object.entries(lokaliseProjects).map(([project, projectId]) =>
-      lokaliseApi
-        .files()
-        .download(projectId, {
-          format: "json",
-          original_filenames: false,
-          replace_breaks: false,
-          json_unescaped_slashes: true,
-          export_empty_as: "skip",
-          filter_data: ["verified"],
-        })
-        .then((download) => fetch(download.bundle_url))
-        .then((response) => {
-          if (response.status === 200 || response.status === 0) {
-            return response.arrayBuffer();
-          }
+    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
+      try {
+        const exportProcess = await lokaliseApi
+          .files()
+          .async_download(projectId, {
+            format: "json",
+            original_filenames: false,
+            replace_breaks: false,
+            json_unescaped_slashes: true,
+            export_empty_as: "skip",
+            filter_data: ["verified"],
+          });
+
+        const finishedProcess = await pollProcess(
+          lokaliseApi,
+          projectId,
+          exportProcess.process_id
+        );
+
+        const bundleUrl = finishedProcess.details.download_url;
+
+        console.log(`Downloading translations from: ${bundleUrl}`);
+
+        const response = await fetch(bundleUrl);
+
+        if (response.status !== 200 && response.status !== 0) {
           throw new Error(response.statusText);
-        })
-        .then(JSZip.loadAsync)
-        .then(async (contents) => {
-          await mkdirPromise;
-          return Promise.all(
-            Object.keys(contents.files).map(async (filename) => {
-              const file = contents.file(filename);
-              if (!file) {
-                // no file, probably a directory
-                return Promise.resolve();
-              }
-              return file
-                .async("nodebuffer")
-                .then((content) =>
-                  fs.writeFile(
-                    path.join(
-                      inDir,
-                      project,
-                      filename.split("/").splice(-1)[0]
-                    ),
-                    content,
-                    { flag: "w", encoding }
-                  )
-                );
-            })
-          );
-        })
-        .catch((err) => {
-          console.error(err);
-          throw err;
-        })
-    )
+        }
+
+        console.log(`Extracting translations...`);
+
+        const contents = await JSZip.loadAsync(await response.arrayBuffer());
+
+        await mkdirPromise;
+        await Promise.all(
+          Object.keys(contents.files).map(async (filename) => {
+            const file = contents.file(filename);
+            if (!file) {
+              // no file, probably a directory
+              return;
+            }
+            const content = await file.async("nodebuffer");
+            await fs.writeFile(
+              path.join(inDir, project, filename.split("/").splice(-1)[0]),
+              content,
+              { flag: "w", encoding }
+            );
+          })
+        );
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
+    })
   );
 });
 

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

@@ -6,7 +6,6 @@ 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/ha-textfield";
+import "../../../../src/components/input/ha-input";
 import "../../../../src/components/ha-button";
 
 const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
               To get started, enter your Home Assistant URL and click authorize.
               If you want a preview instead, click the show demo button.
             </p>
-            <ha-textfield
+            <ha-input
               label="Home Assistant URL"
               placeholder="https://abcdefghijklmnop.ui.nabu.casa"
               @keydown=${this._handleInputKeyDown}
-            ></ha-textfield>
+            ></ha-input>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-input")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
       flex: 1;
     }
 
-    ha-textfield {
+    ha-input {
       width: 100%;
     }
   `;

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/no-mutable-exports
+// eslint-disable-next-line import-x/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
-// eslint-disable-next-line import/no-mutable-exports
+// eslint-disable-next-line import-x/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> =
   demoConfigs[selectedDemoConfigIndex]();
 

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

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

eslint.config.mjs

@@ -1,6 +1,5 @@
 // @ts-check
 
-/* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
 import path from "node:path";
@@ -13,6 +12,7 @@ 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,8 +22,27 @@ 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(
-  ...compat.extends("airbnb-base"),
+  ...airbnbConfigs,
   eslintConfigPrettier,
   litConfigs["flat/all"],
   tseslint.configs.recommended,
@@ -31,6 +50,7 @@ export default tseslint.config(
   tseslint.configs.stylistic,
   wcConfigs["flat/recommended"],
   a11yConfigs.recommended,
+  importX.flatConfigs.recommended,
   {
     plugins: {
       "unused-imports": unusedImports,
@@ -58,7 +78,7 @@ export default tseslint.config(
     },
 
     settings: {
-      "import/resolver": {
+      "import-x/resolver": {
         webpack: {
           config: "./rspack.config.cjs",
         },
@@ -87,12 +107,20 @@ export default tseslint.config(
       "prefer-destructuring": "off",
       "no-restricted-globals": [2, "event"],
       "prefer-promise-reject-errors": "off",
-      "import/prefer-default-export": "off",
-      "import/no-default-export": "off",
-      "import/no-unresolved": "off",
-      "import/no-cycle": "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/extensions": [
+      // 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": [
         "error",
         "ignorePackages",
         {
@@ -100,12 +128,24 @@ 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",
 
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-      "object-curly-newline": "off",
-      "default-case": "off",
-      "wc/no-self-class": "off",
-      "no-shadow": "off",
+      // TypeScript rules
       "@typescript-eslint/camelcase": "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-use-before-define": "off",
@@ -185,7 +225,6 @@ export default tseslint.config(
           allowObjectTypes: "always",
         },
       ],
-      "no-use-before-define": "off",
     },
   },
   {
@@ -194,6 +233,12 @@ export default tseslint.config(
       globals: globals.audioWorklet,
     },
   },
+  {
+    files: ["src/entrypoints/service-worker.ts"],
+    languageOptions: {
+      globals: globals.serviceworker,
+    },
+  },
   {
     plugins: {
       html,

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

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

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

@@ -10,7 +10,7 @@ import "../../../../src/components/input/ha-input";
 import "../../../../src/components/input/ha-input-copy";
 import "../../../../src/components/input/ha-input-multi";
 import "../../../../src/components/input/ha-input-search";
-import { localizeContext } from "../../../../src/data/context";
+import { internationalizationContext } from "../../../../src/data/context";
 
 const LOCALIZE_KEYS: Record<string, string> = {
   "ui.common.copy": "Copy",
@@ -26,11 +26,19 @@ const LOCALIZE_KEYS: Record<string, string> = {
 export class DemoHaInput extends LitElement {
   constructor() {
     super();
-    // Provides localizeContext for ha-input-copy, ha-input-multi and ha-input-search
+    // Provides internationalizationContext for ha-input-copy, ha-input-multi and ha-input-search
     // eslint-disable-next-line no-new
     new ContextProvider(this, {
-      context: localizeContext,
-      initialValue: ((key: string) => LOCALIZE_KEYS[key] ?? key) as any,
+      context: internationalizationContext,
+      initialValue: {
+        localize: ((key: string) => LOCALIZE_KEYS[key] ?? key) as any,
+        language: "en",
+        selectedLanguage: null,
+        locale: {} as any,
+        translationMetadata: {} as any,
+        loadBackendTranslation: (async () => (key: string) => key) as any,
+        loadFragmentTranslation: (async () => (key: string) => key) as any,
+      },
     });
   }
 

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

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
@@ -692,7 +692,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    <span slot="description">${value?.description}</span>
+                    ${value?.description
+                      ? html`<span slot="description"
+                          >${value?.description}</span
+                        >`
+                      : nothing}
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}

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

@@ -3,37 +3,73 @@ title: Switch / Toggle
 ---
 
 <style>
-  ha-switch {
-    display: block;
+  .wrapper {
+    display: flex;
+    gap: 24px;
+    align-items: center;
   }
 </style>
 
 # Switch `<ha-switch>`
 
-A toggle switch can represent two states: on and off.
+A toggle switch representing two states: on and off.
 
-## Examples
+## Implementation
 
-Switch in on state
+### Example usage
+
+<div class="wrapper">
+  <ha-switch checked></ha-switch>
+  <ha-switch></ha-switch>
+  <ha-switch disabled></ha-switch>
+  <ha-switch disabled checked></ha-switch>
+</div>
+
+```html
 <ha-switch checked></ha-switch>
 
-Switch in off state
 <ha-switch></ha-switch>
 
-Disabled switch
 <ha-switch disabled></ha-switch>
 
-## CSS variables
+<ha-switch disabled checked></ha-switch>
+```
 
-For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+### API
 
-The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+This component is based on the webawesome switch component.
+Check the [webawesome documentation](https://webawesome.com/docs/components/switch/) for more details.
 
-`switch-checked-color` / `switch-unchecked-color`  
-Set both the color of the round handle and the track behind it. If you want to control them separately, use the variables below instead.
+**Properties/Attributes**
 
-`switch-checked-button-color` / `switch-unchecked-button-color`  
-Color of the round handle
+| Name     | Type    | Default | Description                                                                                                         |
+| -------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| checked  | Boolean | false   | The checked state of the switch.                                                                                    |
+| disabled | Boolean | false   | Disables the switch and prevents user interaction.                                                                  |
+| required | Boolean | false   | Makes the switch a required field.                                                                                  |
+| haptic   | Boolean | false   | Enables haptic vibration on toggle. Only use when the new state is applied immediately (not when save is required). |
 
-`switch-checked-track-color` / `switch-unchecked-track-color`  
-Color of the track behind the round handle
+**CSS Custom Properties**
+
+- `--ha-switch-size` - The size of the switch track height. Defaults to `24px`.
+- `--ha-switch-thumb-size` - The size of the thumb. Defaults to `18px`.
+- `--ha-switch-width` - The width of the switch track. Defaults to `48px`.
+- `--ha-switch-thumb-box-shadow` - The box shadow of the thumb. Defaults to `var(--ha-box-shadow-s)`.
+- `--ha-switch-background-color` - Background color of the unchecked track.
+- `--ha-switch-thumb-background-color` - Background color of the unchecked thumb.
+- `--ha-switch-background-color-hover` - Background color of the unchecked track on hover.
+- `--ha-switch-thumb-background-color-hover` - Background color of the unchecked thumb on hover.
+- `--ha-switch-border-color` - Border color of the unchecked track.
+- `--ha-switch-thumb-border-color` - Border color of the unchecked thumb.
+- `--ha-switch-thumb-border-color-hover` - Border color of the unchecked thumb on hover.
+- `--ha-switch-checked-background-color` - Background color of the checked track.
+- `--ha-switch-checked-thumb-background-color` - Background color of the checked thumb.
+- `--ha-switch-checked-background-color-hover` - Background color of the checked track on hover.
+- `--ha-switch-checked-thumb-background-color-hover` - Background color of the checked thumb on hover.
+- `--ha-switch-checked-border-color` - Border color of the checked track.
+- `--ha-switch-checked-thumb-border-color` - Border color of the checked thumb.
+- `--ha-switch-checked-border-color-hover` - Border color of the checked track on hover.
+- `--ha-switch-checked-thumb-border-color-hover` - Border color of the checked thumb on hover.
+- `--ha-switch-disabled-opacity` - Opacity of the switch when disabled. Defaults to `0.2`.
+- `--ha-switch-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
+- `--ha-switch-required-marker-offset` - Offset of the required marker. Defaults to `0.1rem`.

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

@@ -1 +1,95 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-switch";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-switch")
+export class DemoHaSwitch extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-switch ${mode}">
+              <div class="card-content">
+                <div class="row">
+                  <span>Unchecked</span>
+                  <ha-switch></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Checked</span>
+                  <ha-switch checked></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Disabled</span>
+                  <ha-switch disabled></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Disabled checked</span>
+                  <ha-switch disabled checked></ha-switch>
+                </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;
+      margin: 16px;
+      border-radius: var(--ha-border-radius-md);
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-4);
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ha-space-4);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-switch": DemoHaSwitch;
+  }
+}

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

@@ -0,0 +1,73 @@
+---
+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

@@ -0,0 +1,151 @@
+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/lovelace/gauge-card.ts

@@ -134,6 +134,53 @@ const CONFIGS = [
   entity: sensor.not_working
     `,
   },
+  {
+    heading: "Lower minimum",
+    config: `
+- type: gauge
+  entity: sensor.brightness_high
+  needle: true
+  severity:
+    green: 0
+    yellow: 0.45
+    red: 0.9
+  min: -0.05
+  name: " "
+  max: 1.9
+  unit: GBP/h`,
+  },
+  {
+    heading: "A lot of segments",
+    config: `
+- type: gauge
+  needle: true
+  name: Percent gauge
+  entity: sensor.brightness_high
+  unit: "%"
+  min: 0
+  max: 100
+  segments:
+    - from: 0
+      color: "#db4437"
+    - from: 10
+      color: "#cc4d39"
+    - from: 20
+      color: "#bd563a"
+    - from: 30
+      color: "#ad603c"
+    - from: 40
+      color: "#9e693d"
+    - from: 50
+      color: "#8f723f"
+    - from: 60
+      color: "#807b41"
+    - from: 70
+      color: "#718442"
+    - from: 80
+      color: "#618e44"
+    - from: 90
+      color: "#43a047"`,
+  },
 ];
 
 @customElement("demo-lovelace-gauge-card")

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

@@ -0,0 +1,3 @@
+---
+title: Box shadow
+---

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

@@ -0,0 +1,98 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+
+const SHADOWS = ["s", "m", "l"] as const;
+
+@customElement("demo-misc-box-shadow")
+export class DemoMiscBoxShadow extends LitElement {
+  protected render() {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <h2>${mode}</h2>
+            <div class="grid">
+              ${SHADOWS.map(
+                (size) => html`
+                  <div
+                    class="box"
+                    style="box-shadow: var(--ha-box-shadow-${size})"
+                  >
+                    ${size}
+                  </div>
+                `
+              )}
+            </div>
+          </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;
+      flex-direction: row;
+      gap: 48px;
+      padding: 48px;
+    }
+
+    .light,
+    .dark {
+      flex: 1;
+      background-color: var(--primary-background-color);
+      border-radius: 16px;
+      padding: 32px;
+    }
+
+    h2 {
+      margin: 0 0 24px;
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--primary-text-color);
+      text-transform: capitalize;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 32px;
+    }
+
+    .box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 120px;
+      border-radius: 12px;
+      background-color: var(--card-background-color);
+      color: var(--primary-text-color);
+      font-size: 16px;
+      font-weight: 500;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-box-shadow": DemoMiscBoxShadow;
+  }
+}

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

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

gallery/src/pages/more-info/lawn-mower.markdown

@@ -0,0 +1,3 @@
+---
+title: Lawn mower
+---

gallery/src/pages/more-info/lawn-mower.ts

@@ -0,0 +1,98 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { LawnMowerEntityFeature } from "../../../../src/data/lawn_mower";
+
+const ALL_FEATURES =
+  LawnMowerEntityFeature.START_MOWING +
+  LawnMowerEntityFeature.PAUSE +
+  LawnMowerEntityFeature.DOCK;
+
+const ENTITIES = [
+  {
+    entity_id: "lawn_mower.full_featured",
+    state: "docked",
+    attributes: {
+      friendly_name: "Full featured mower",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.mowing",
+    state: "mowing",
+    attributes: {
+      friendly_name: "Mowing",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.returning",
+    state: "returning",
+    attributes: {
+      friendly_name: "Returning",
+      supported_features:
+        LawnMowerEntityFeature.START_MOWING +
+        LawnMowerEntityFeature.PAUSE +
+        LawnMowerEntityFeature.DOCK,
+    },
+  },
+  {
+    entity_id: "lawn_mower.paused",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.error",
+    state: "error",
+    attributes: {
+      friendly_name: "Error",
+      supported_features:
+        LawnMowerEntityFeature.START_MOWING + LawnMowerEntityFeature.DOCK,
+    },
+  },
+  {
+    entity_id: "lawn_mower.basic",
+    state: "docked",
+    attributes: {
+      friendly_name: "Basic mower",
+      supported_features: LawnMowerEntityFeature.START_MOWING,
+    },
+  },
+];
+
+@customElement("demo-more-info-lawn-mower")
+class DemoMoreInfoLawnMower extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-lawn-mower": DemoMoreInfoLawnMower;
+  }
+}

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

@@ -8,18 +8,101 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 
+const ALL_FEATURES =
+  VacuumEntityFeature.STATE +
+  VacuumEntityFeature.START +
+  VacuumEntityFeature.PAUSE +
+  VacuumEntityFeature.STOP +
+  VacuumEntityFeature.RETURN_HOME +
+  VacuumEntityFeature.FAN_SPEED +
+  VacuumEntityFeature.BATTERY +
+  VacuumEntityFeature.STATUS +
+  VacuumEntityFeature.LOCATE +
+  VacuumEntityFeature.CLEAN_SPOT +
+  VacuumEntityFeature.CLEAN_AREA;
+
 const ENTITIES = [
   {
-    entity_id: "vacuum.first_floor_vacuum",
+    entity_id: "vacuum.full_featured",
     state: "docked",
     attributes: {
-      friendly_name: "First floor vacuum",
+      friendly_name: "Full featured vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 85,
+      battery_icon: "mdi:battery-80",
+      fan_speed: "balanced",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Charged",
+    },
+  },
+  {
+    entity_id: "vacuum.cleaning_vacuum",
+    state: "cleaning",
+    attributes: {
+      friendly_name: "Cleaning vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 62,
+      battery_icon: "mdi:battery-60",
+      fan_speed: "turbo",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Cleaning bedroom",
+    },
+  },
+  {
+    entity_id: "vacuum.returning_vacuum",
+    state: "returning",
+    attributes: {
+      friendly_name: "Returning vacuum",
+      supported_features:
+        VacuumEntityFeature.STATE +
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.PAUSE +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.BATTERY,
+      battery_level: 23,
+      battery_icon: "mdi:battery-20",
+      status: "Returning to dock",
+    },
+  },
+  {
+    entity_id: "vacuum.error_vacuum",
+    state: "error",
+    attributes: {
+      friendly_name: "Error vacuum",
+      supported_features:
+        VacuumEntityFeature.STATE +
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.LOCATE,
+      status: "Stuck on obstacle",
+    },
+  },
+  {
+    entity_id: "vacuum.basic_vacuum",
+    state: "docked",
+    attributes: {
+      friendly_name: "Basic vacuum",
       supported_features:
         VacuumEntityFeature.START +
         VacuumEntityFeature.STOP +
         VacuumEntityFeature.RETURN_HOME,
     },
   },
+  {
+    entity_id: "vacuum.paused_vacuum",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 45,
+      battery_icon: "mdi:battery-40",
+      fan_speed: "standard",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Paused",
+    },
+  },
 ];
 
 @customElement("demo-more-info-vacuum")

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

@@ -1,7 +1,5 @@
-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 { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";

landing-page/src/ha-landing-page.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress";
 import { mdiOpenInNew } from "@mdi/js";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,6 +7,7 @@ import "../../src/components/ha-button";
 import "../../src/components/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
+import "../../src/components/progress/ha-progress-bar";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import "../../src/onboarding/onboarding-welcome-links";
 import { onBoardingStyles } from "../../src/onboarding/styles";
@@ -60,7 +60,7 @@ class HaLandingPage extends LandingPageBaseElement {
           ${!networkIssue && !this._supervisorError
             ? html`
                 <p>${this.localize("subheader")}</p>
-                <mwc-linear-progress indeterminate></mwc-linear-progress>
+                <ha-progress-bar indeterminate></ha-progress-bar>
               `
             : nothing}
           ${networkIssue || this._networkInfoError

lint-staged.config.js

@@ -1,6 +1,6 @@
 export default {
   "*.?(c|m){js,ts}": [
-    "eslint --flag v10_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
+    "eslint --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 --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: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:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
@@ -30,22 +30,23 @@
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
+    "@codemirror/lang-jinja": "6.0.1",
+    "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
-    "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.40.0",
+    "@codemirror/view": "6.41.0",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.3.1",
-    "@formatjs/intl-displaynames": "7.3.1",
-    "@formatjs/intl-durationformat": "0.10.3",
-    "@formatjs/intl-getcanonicallocales": "3.2.2",
-    "@formatjs/intl-listformat": "8.3.1",
-    "@formatjs/intl-locale": "5.3.1",
-    "@formatjs/intl-numberformat": "9.3.1",
-    "@formatjs/intl-pluralrules": "6.3.1",
-    "@formatjs/intl-relativetimeformat": "12.3.1",
+    "@formatjs/intl-datetimeformat": "7.3.2",
+    "@formatjs/intl-displaynames": "7.3.2",
+    "@formatjs/intl-durationformat": "0.10.4",
+    "@formatjs/intl-getcanonicallocales": "3.2.3",
+    "@formatjs/intl-listformat": "8.3.2",
+    "@formatjs/intl-locale": "5.3.2",
+    "@formatjs/intl-numberformat": "9.3.2",
+    "@formatjs/intl-pluralrules": "6.3.2",
+    "@formatjs/intl-relativetimeformat": "12.3.2",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
@@ -59,22 +60,12 @@
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
-    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
-    "@material/mwc-checkbox": "0.27.0",
-    "@material/mwc-dialog": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
-    "@material/mwc-fab": "0.27.0",
-    "@material/mwc-floating-label": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
-    "@material/mwc-linear-progress": "0.27.0",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@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",
@@ -82,14 +73,14 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.20",
+    "@swc/helpers": "0.5.21",
     "@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.1",
+    "barcode-detector": "3.1.2",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
@@ -102,13 +93,13 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "6.0.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.1.0",
+    "fuse.js": "7.3.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
-    "hls.js": "1.6.15",
+    "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.0",
+    "intl-messageformat": "11.2.1",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -116,7 +107,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "17.0.5",
+    "marked": "18.0.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -143,17 +134,19 @@
     "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.2",
-    "@bundle-stats/plugin-webpack-filter": "4.22.0",
-    "@html-eslint/eslint-plugin": "0.58.1",
-    "@lokalise/node-api": "15.6.1",
+    "@bundle-stats/plugin-webpack-filter": "4.22.1",
+    "@eslint/eslintrc": "3.3.5",
+    "@eslint/js": "10.0.1",
+    "@html-eslint/eslint-plugin": "0.59.0",
+    "@lokalise/node-api": "15.7.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.5",
-    "@rspack/core": "1.7.10",
+    "@rsdoctor/rspack-plugin": "1.5.9",
+    "@rspack/core": "1.7.11",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.25",
+    "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -169,16 +162,17 @@
     "@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.4",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "browserslist-useragent-regexp": "4.1.3",
+    "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "9.39.4",
+    "eslint": "10.2.1",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-webpack": "0.13.10",
+    "eslint-import-resolver-webpack": "0.13.11",
     "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",
@@ -186,13 +180,14 @@
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.4",
     "glob": "13.0.6",
+    "globals": "17.5.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "jszip": "3.10.1",
     "lint-staged": "16.4.0",
     "lit-analyzer": "2.0.3",
@@ -200,17 +195,17 @@
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.8.1",
+    "prettier": "3.8.3",
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
-    "sinon": "21.0.3",
+    "sinon": "21.1.2",
     "tar": "7.5.13",
     "terser-webpack-plugin": "5.4.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.57.2",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.58.2",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.2",
+    "vitest": "4.1.4",
     "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"
@@ -221,13 +216,13 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.4.0",
+    "globals": "17.5.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.13.0",
+  "packageManager": "yarn@4.14.1",
   "volta": {
-    "node": "24.14.1"
+    "node": "24.15.0"
   }
 }

public/static/images/logo_mastodon.svg

@@ -1,10 +0,0 @@
-<svg width="75" height="79" viewBox="0 0 75 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z" fill="url(#paint0_linear_549_34)"/>
-<path d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear_549_34" x1="37.0692" y1="0" x2="37.0692" y2="79" gradientUnits="userSpaceOnUse">
-<stop stop-color="#6364FF"/>
-<stop offset="1" stop-color="#563ACC"/>
-</linearGradient>
-</defs>
-</svg>

public/static/images/logo_x.svg

@@ -1,3 +0,0 @@
-<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
-</svg>

src/auth/ha-auth-flow.ts

@@ -9,7 +9,6 @@ import "../components/ha-alert";
 import "../components/ha-button";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
-import "../components/ha-formfield";
 import type { AuthProvider } from "../data/auth";
 import {
   autocompleteLoginFields,
@@ -97,11 +96,6 @@ export class HaAuthFlow extends LitElement {
   protected render() {
     return html`
       <style>
-        ha-auth-flow .store-token {
-          margin-left: -16px;
-          margin-inline-start: -16px;
-          margin-inline-end: initial;
-        }
         a.forgot-password {
           color: var(--primary-color);
           text-decoration: none;
@@ -121,6 +115,9 @@ export class HaAuthFlow extends LitElement {
           display: block;
           margin-top: 16px;
         }
+        .action {
+          margin-top: var(--ha-space-5);
+        }
         .action ha-button {
           width: 100%;
         }
@@ -249,17 +246,12 @@ export class HaAuthFlow extends LitElement {
             ${this.clientId === genClientId() &&
             !["select_mfa_module", "mfa"].includes(step.step_id)
               ? html`
-                  <ha-formfield
-                    class="store-token"
-                    .label=${this.localize(
-                      "ui.panel.page-authorize.store_token"
-                    )}
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
                   >
-                    <ha-checkbox
-                      .checked=${this._storeToken}
-                      @change=${this._storeTokenChanged}
-                    ></ha-checkbox>
-                  </ha-formfield>
+                    ${this.localize("ui.panel.page-authorize.store_token")}
+                  </ha-checkbox>
                 `
               : ""}
             <a

src/cast/cast_manager.ts

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

src/common/condition/listeners.ts

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

src/common/config/can_show_page.ts

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

src/common/config/filter_navigation_pages.ts

@@ -21,6 +21,9 @@ export const filterNavigationPages = (
     if (page.path === "#external-app-configuration") {
       return hass.auth.external?.config.hasSettingsScreen;
     }
+    if (page.adminOnly && !hass.user?.is_admin) {
+      return false;
+    }
     // Only show Bluetooth page if there are Bluetooth config entries
     if (page.component === "bluetooth") {
       return options.hasBluetoothConfigEntries ?? false;

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 = (
-  hass: HomeAssistant,
+  hassConfig: HomeAssistant["config"],
   component: string
-): boolean => hass && hass.config.components.includes(component);
+): boolean => hassConfig && hassConfig.components.includes(component);

src/common/datetime/calc_date_range.ts

@@ -27,6 +27,7 @@ export type DateRange =
   | "this_year"
   | "now-7d"
   | "now-30d"
+  | "now-365d"
   | "now-12m"
   | "now-1h"
   | "now-12h"
@@ -102,6 +103,11 @@ 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/datetime/format_duration.ts

@@ -1,4 +1,3 @@
-import type { DurationInput } from "@formatjs/intl-durationformat/src/types";
 import memoizeOne from "memoize-one";
 import type { HaDurationData } from "../../components/ha-duration-input";
 import type { FrontendLocaleData } from "../../data/translation";
@@ -114,7 +113,7 @@ export const formatDuration = (
     case "d": {
       const days = Math.floor(value);
       const hours = Math.floor((value - days) * 24);
-      const input: DurationInput = {
+      const input = {
         days,
         hours,
       };
@@ -123,7 +122,7 @@ export const formatDuration = (
     case "h": {
       const hours = Math.floor(value);
       const minutes = Math.floor((value - hours) * 60);
-      const input: DurationInput = {
+      const input = {
         hours,
         minutes,
       };
@@ -132,7 +131,7 @@ export const formatDuration = (
     case "min": {
       const minutes = Math.floor(value);
       const seconds = Math.floor((value - minutes) * 60);
-      const input: DurationInput = {
+      const input = {
         minutes,
         seconds,
       };

src/common/dom/fire_event.ts

@@ -38,6 +38,14 @@ 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/dom/setup-leaflet-map.ts

@@ -7,7 +7,8 @@ export type LeafletModuleType = typeof import("leaflet");
 export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
-  mapElement: HTMLElement
+  mapElement: HTMLElement,
+  initialView?: { latitude: number; longitude: number; zoom?: number }
 ): Promise<[Map, LeafletModuleType, TileLayer]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -32,7 +33,12 @@ export const setupLeafletMap = async (
   markerClusterStyle.setAttribute("rel", "stylesheet");
   mapElement.parentNode.appendChild(markerClusterStyle);
 
-  map.setView([52.3731339, 4.8903147], 13);
+  if (initialView) {
+    map.setView(
+      [initialView.latitude, initialView.longitude],
+      initialView.zoom ?? 13
+    );
+  }
 
   const tileLayer = createTileLayer(Leaflet).addTo(map);
 

src/common/entity/compute_device_name.ts

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

src/common/entity/context/get_device_context.ts

@@ -1,26 +1,11 @@
 import type { AreaRegistryEntry } from "../../../data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
-import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
 
-interface DeviceContext {
-  device: DeviceRegistryEntry;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getDeviceContext = (
+export const getDeviceArea = (
   device: DeviceRegistryEntry,
-  hass: HomeAssistant
-): DeviceContext => {
+  areas: HomeAssistant["areas"]
+): AreaRegistryEntry | undefined => {
   const areaId = device.area_id;
-  const area = areaId ? hass.areas[areaId] : undefined;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : undefined;
-
-  return {
-    device: device,
-    area: area || null,
-    floor: floor || null,
-  };
+  return areaId ? areas[areaId] : undefined;
 };

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

src/common/entity/get_states.ts

@@ -242,14 +242,18 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
   },
 };
 
-export const getStates = (
+export const getStatesDomain = (
   hass: HomeAssistant,
-  state: HassEntity,
-  attribute: string | undefined = undefined
+  domain: string,
+  attribute?: string | 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 (
@@ -260,21 +264,7 @@ export const getStates = (
     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) {
@@ -293,6 +283,37 @@ export const getStates = (
         );
       }
       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);
@@ -353,9 +374,5 @@ export const getStates = (
       break;
   }
 
-  if (!attribute) {
-    // All entities can have unavailable states
-    result.push(...UNAVAILABLE_STATES);
-  }
   return [...new Set(result)];
 };

src/common/entity/state_active.ts

@@ -37,7 +37,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     case "person":
       return compareState !== "not_home";
     case "lawn_mower":
-      return ["mowing", "error"].includes(compareState);
+      return !["docked", "paused"].includes(compareState);
     case "lock":
       return compareState !== "locked";
     case "media_player":

src/common/feature-detect/support-native-element-internals.ts

@@ -0,0 +1,8 @@
+/**
+ * Indicates whether the current browser has native ElementInternals support.
+ */
+export const nativeElementInternalsSupported =
+  Boolean(globalThis.ElementInternals) &&
+  globalThis.HTMLElement?.prototype.attachInternals
+    ?.toString()
+    .includes("[native code]");

src/common/integrations/protocolIntegrationPicked.ts

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

src/common/lit/keyed-es5.ts

@@ -10,13 +10,10 @@
  *
  * @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/util/subscribe-one.ts

@@ -1,4 +1,8 @@
-import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
+import type {
+  Collection,
+  Connection,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
 
 export const subscribeOne = async <T>(
   conn: Connection,
@@ -13,3 +17,11 @@ export const subscribeOne = async <T>(
       resolve(items);
     });
   });
+
+export const subscribeOneCollection = async <T>(collection: Collection<T>) =>
+  new Promise<T>((resolve) => {
+    const unsub = collection.subscribe((data) => {
+      unsub();
+      resolve(data);
+    });
+  });

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

@@ -18,15 +18,16 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
+import { transform } from "../../common/decorators/transform";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { afterNextRender } from "../../common/util/render-status";
 import { filterXSS } from "../../common/util/xss";
-import { themesContext } from "../../data/context";
+import { uiContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
 import type { ECOption } from "../../resources/echarts/echarts";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, HomeAssistantUI } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
@@ -74,8 +75,11 @@ export class HaChartBase extends LitElement {
   public extraComponents?: any[];
 
   @state()
-  @consume({ context: themesContext, subscribe: true })
-  _themes!: Themes;
+  @consume({ context: uiContext, subscribe: true })
+  @transform<HomeAssistantUI, Themes>({
+    transformer: ({ themes }) => themes,
+  })
+  private _themes!: Themes;
 
   @state() private _isZoomed = false;
 
@@ -174,6 +178,7 @@ export class HaChartBase extends LitElement {
           if (!this.options?.dataZoom) {
             this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
           }
+          this._updateSankeyRoam();
           // drag to zoom
           this.chart?.dispatchAction({
             type: "takeGlobalCursor",
@@ -192,6 +197,7 @@ export class HaChartBase extends LitElement {
           if (!this.options?.dataZoom) {
             this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
           }
+          this._updateSankeyRoam();
           this.chart?.dispatchAction({
             type: "takeGlobalCursor",
             key: "dataZoomSelect",
@@ -267,6 +273,9 @@ export class HaChartBase extends LitElement {
     }
     if (Object.keys(chartOptions).length > 0) {
       this._setChartOptions(chartOptions);
+      if (chartOptions.series) {
+        this._updateSankeyRoam();
+      }
     }
   }
 
@@ -451,6 +460,22 @@ export class HaChartBase extends LitElement {
       this.chart.on("click", (e: ECElementEvent) => {
         fireEvent(this, "chart-click", e);
       });
+      this.chart.on("sankeyroam", () => {
+        const option = this.chart!.getOption();
+        const series = option.series as any[];
+        const sankeySeries = series?.find((s: any) => s.type === "sankey");
+        const zoomed = sankeySeries.zoom !== 1;
+        this._isZoomed = zoomed;
+        if (!zoomed) {
+          // Reset center when fully zoomed out
+          this.chart!.setOption({
+            series: [{ id: sankeySeries.id, center: null }],
+          });
+        }
+        fireEvent(this, "chart-sankeyroam", { zoom: sankeySeries.zoom });
+        // Clear cached emphasis states so labels don't revert to pre-zoom sizes
+        this.chart!.dispatchAction({ type: "downplay" });
+      });
 
       if (!this.options?.dataZoom) {
         this.chart.getZr().on("dblclick", this._handleClickZoom);
@@ -549,6 +574,7 @@ export class HaChartBase extends LitElement {
         ...this._createOptions(),
         series: this._getSeries(),
       });
+      this._updateSankeyRoam();
     } finally {
       this._loading = false;
     }
@@ -606,10 +632,7 @@ export class HaChartBase extends LitElement {
       id: "dataZoom",
       type: "inside",
       orient: "horizontal",
-      // "boundaryFilter" is a custom mode added via axis-proxy-patch.ts.
-      // It rescales the Y-axis to the visible data while keeping one point
-      // just outside each boundary to avoid line gaps at the zoom edges.
-      filterMode: "boundaryFilter" as any,
+      filterMode: this._getDataZoomFilterMode() as any,
       xAxisIndex: 0,
       moveOnMouseMove: !this._isTouchDevice || this._isZoomed,
       preventDefaultMouseMove: !this._isTouchDevice || this._isZoomed,
@@ -617,6 +640,23 @@ export class HaChartBase extends LitElement {
     };
   }
 
+  // "boundaryFilter" is a custom mode added via axis-proxy-patch.ts.
+  // It rescales the Y-axis to the visible data while keeping one point
+  // just outside each boundary to avoid line gaps at the zoom edges.
+  // Use "filter" for bar charts since boundaryFilter causes rendering issues.
+  // Use "weakFilter" for other types (e.g. custom/timeline) so bars
+  // spanning the visible range boundary are kept.
+  private _getDataZoomFilterMode(): string {
+    const series = ensureArray(this.data);
+    if (series.every((s) => s.type === "line")) {
+      return "boundaryFilter";
+    }
+    if (series.some((s) => s.type === "bar")) {
+      return "filter";
+    }
+    return "weakFilter";
+  }
+
   private _createOptions(): ECOption {
     let xAxis = this.options?.xAxis;
     if (xAxis) {
@@ -974,6 +1014,26 @@ export class HaChartBase extends LitElement {
     if (!this.chart) {
       return;
     }
+    // Handle sankey chart double-click zoom
+    const option = this.chart.getOption();
+    const allSeries = option.series as any[];
+    const sankeySeries = allSeries?.filter((s: any) => s.type === "sankey");
+    if (sankeySeries?.length) {
+      if (this._isZoomed) {
+        this._handleZoomReset();
+      } else {
+        this.chart.setOption({
+          series: sankeySeries.map((s: any) => ({
+            id: s.id,
+            zoom: 2,
+          })),
+        });
+        this._isZoomed = true;
+      }
+      if (sankeySeries.length === allSeries?.length) {
+        return;
+      }
+    }
     const range = this._isZoomed
       ? [0, 100]
       : [
@@ -998,6 +1058,37 @@ export class HaChartBase extends LitElement {
 
   private _handleZoomReset() {
     this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
+    // Reset sankey roam zoom
+    const option = this.chart?.getOption();
+    const sankeySeries = (option?.series as any[])?.filter(
+      (s: any) => s.type === "sankey"
+    );
+    if (sankeySeries?.length) {
+      this.chart?.setOption({
+        series: sankeySeries.map((s: any) => ({
+          id: s.id,
+          zoom: 1,
+          center: null,
+        })),
+      });
+      this._isZoomed = false;
+      fireEvent(this, "chart-sankeyroam", { zoom: 1 });
+    }
+  }
+
+  private _updateSankeyRoam() {
+    const option = this.chart?.getOption();
+    const sankeySeries = (option?.series as any[])?.filter(
+      (s: any) => s.type === "sankey"
+    );
+    if (sankeySeries?.length) {
+      this.chart?.setOption({
+        series: sankeySeries.map((s: any) => ({
+          id: s.id,
+          roam: this._modifierPressed || this._isTouchDevice ? true : "move",
+        })),
+      });
+    }
   }
 
   private _handleDataZoomEvent(e: any) {
@@ -1368,5 +1459,6 @@ declare global {
       start: number;
       end: number;
     };
+    "chart-sankeyroam": { zoom: number };
   }
 }

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

@@ -64,6 +64,8 @@ export class HaSankeyChart extends LitElement {
 
   public chart?: EChartsType;
 
+  private _currentZoom = 1;
+
   @state() private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect,
   });
@@ -84,11 +86,13 @@ export class HaSankeyChart extends LitElement {
     } as ECOption;
 
     return html`<ha-chart-base
+      .hass=${this.hass}
       .data=${this._createData(this.data, this._sizeController.value?.width)}
       .options=${options}
       height="100%"
       .extraComponents=${[SankeyChart]}
       @chart-click=${this._handleChartClick}
+      @chart-sankeyroam=${this._handleChartSankeyRoam}
     ></ha-chart-base>`;
   }
 
@@ -109,6 +113,10 @@ export class HaSankeyChart extends LitElement {
     return null;
   };
 
+  private _handleChartSankeyRoam = (ev: CustomEvent) => {
+    this._currentZoom = ev.detail.zoom;
+  };
+
   private _handleChartClick = (ev: CustomEvent<ECElementEvent>) => {
     const detail = ev.detail;
     // Only handle node clicks (not links)
@@ -180,6 +188,7 @@ export class HaSankeyChart extends LitElement {
       })),
       links,
       draggable: false,
+      scaleLimit: { min: 1, max: 4 },
       orient: this.vertical ? "vertical" : "horizontal",
       nodeWidth: 15,
       nodeGap: NODE_GAP,
@@ -210,7 +219,7 @@ export class HaSankeyChart extends LitElement {
               ""
             );
           const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
-          const availableWidth = params.rect.width + 6;
+          const availableWidth = (params.rect.width + 6) * this._currentZoom;
           const fontSize = Math.min(
             FONT_SIZE,
             (availableWidth / wordWidth) * FONT_SIZE
@@ -223,7 +232,7 @@ export class HaSankeyChart extends LitElement {
           };
         }
 
-        const availableHeight = params.rect.height + 8; // account for the margin
+        const availableHeight = (params.rect.height + 8) * this._currentZoom; // account for the margin
         const fontSize = Math.min(
           (availableHeight / params.labelRect.height) * FONT_SIZE,
           FONT_SIZE

src/components/chart/round-caps.ts

@@ -0,0 +1,103 @@
+import type { BarSeriesOption } from "echarts/types/dist/shared";
+
+export function fillDataGapsAndRoundCaps(
+  datasets: BarSeriesOption[],
+  stacked = true
+) {
+  if (!stacked) {
+    // For non-stacked charts, we can simply apply an overall border to each stack
+    // to curve the top of the bar, and then override on any negative bars.
+    datasets.forEach((dataset) => {
+      // Add upper border radius to stack
+      dataset.itemStyle = {
+        ...dataset.itemStyle,
+        borderRadius: [4, 4, 0, 0],
+      };
+      // And override any negative points to have bottom border curved
+      for (let pointIdx = 0; pointIdx < dataset.data!.length; pointIdx++) {
+        const dataPoint = dataset.data![pointIdx];
+        const item: any =
+          dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+            ? dataPoint
+            : { value: dataPoint };
+        if (item.value?.[1] < 0) {
+          dataset.data![pointIdx] = {
+            ...item,
+            itemStyle: {
+              ...item.itemStyle,
+              borderRadius: [0, 0, 4, 4],
+            },
+          };
+        }
+      }
+    });
+    return;
+  }
+
+  // For stacked charts, we need to carefully work through the data points in each
+  // stack to ensure only the lowermost negative and uppermost positive values have
+  // a curved border.
+  const buckets = Array.from(
+    new Set(
+      datasets
+        .map((dataset) =>
+          dataset.data!.map((datapoint) => Number(datapoint![0]))
+        )
+        .flat()
+    )
+  ).sort((a, b) => a - b);
+
+  // make sure all datasets have the same buckets
+  // otherwise the chart will render incorrectly in some cases
+  buckets.forEach((bucket, index) => {
+    const capRounded = {};
+    const capRoundedNegative = {};
+    for (let i = datasets.length - 1; i >= 0; i--) {
+      const dataPoint = datasets[i].data![index];
+      const item: any =
+        dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+          ? dataPoint
+          : { value: dataPoint };
+      const x = item.value?.[0];
+      const stack = datasets[i].stack ?? "";
+      if (x === undefined) {
+        continue;
+      }
+      if (Number(x) !== bucket) {
+        datasets[i].data?.splice(index, 0, {
+          value: [bucket, 0],
+          itemStyle: {
+            borderWidth: 0,
+          },
+        });
+      } else if (item.value?.[1] === 0) {
+        // remove the border for zero values or it will be rendered
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderWidth: 0,
+          },
+        };
+      } else if (!capRounded[stack] && item.value?.[1] > 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [4, 4, 0, 0],
+          },
+        };
+        capRounded[stack] = true;
+      } else if (!capRoundedNegative[stack] && item.value?.[1] < 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [0, 0, 4, 4],
+          },
+        };
+        capRoundedNegative[stack] = true;
+      }
+    }
+  });
+}

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

@@ -1,8 +1,8 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import { mdiRestart } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiRestart } from "@mdi/js";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import type {
@@ -12,12 +12,12 @@ import type {
 } from "../../data/history";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
-import type { StateHistoryChartLine } from "./state-history-chart-line";
-import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
-import "../ha-fab";
+import "../ha-button";
 import "../ha-svg-icon";
 import "./state-history-chart-line";
+import type { StateHistoryChartLine } from "./state-history-chart-line";
 import "./state-history-chart-timeline";
+import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
 
 const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
 
@@ -105,7 +105,7 @@ export class StateHistoryCharts extends LitElement {
   @restoreScroll(".container") private _savedScrollPos?: number;
 
   protected render() {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -150,16 +150,14 @@ export class StateHistoryCharts extends LitElement {
             this._renderHistoryItem(item, index)
           )}`}
       ${this.syncCharts && this._hasZoomedCharts
-        ? html`<ha-fab
-            slot="fab"
+        ? html`<ha-button
+            size="large"
             class="reset-button"
-            .label=${this.hass.localize(
-              "ui.components.history_charts.zoom_reset"
-            )}
             @click=${this._handleGlobalZoomReset}
           >
-            <ha-svg-icon slot="icon" .path=${mdiRestart}></ha-svg-icon>
-          </ha-fab>`
+            <ha-svg-icon slot="start" .path=${mdiRestart}></ha-svg-icon>
+            ${this.hass.localize("ui.components.history_charts.zoom_reset")}
+          </ha-button>`
         : nothing}
     `;
   }
@@ -448,6 +446,7 @@ export class StateHistoryCharts extends LitElement {
       bottom: calc(24px + var(--safe-area-inset-bottom));
       right: calc(24px + var(--safe-area-inset-bottom));
       z-index: 1;
+      --ha-button-box-shadow: var(--ha-box-shadow-l);
     }
   `;
 }

src/components/chart/statistics-chart.ts

@@ -35,6 +35,7 @@ import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -67,7 +68,11 @@ export class StatisticsChart extends LitElement {
   @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
-  @property({ attribute: false }) public chartType: "line" | "bar" = "line";
+  @property({ attribute: false }) public chartType:
+    | "line"
+    | "line-stack"
+    | "bar"
+    | "bar-stack" = "line";
 
   @property({ attribute: false }) public minYAxis?: number;
 
@@ -149,7 +154,7 @@ export class StatisticsChart extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!isComponentLoaded(this.hass, "history")) {
+    if (!isComponentLoaded(this.hass.config, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -326,7 +331,7 @@ export class StatisticsChart extends LitElement {
         },
         position: computeRTL(this.hass) ? "right" : "left",
         scale:
-          this.chartType !== "bar" ||
+          this.chartType.startsWith("line") ||
           this.logarithmicScale ||
           minYAxis !== undefined ||
           maxYAxis !== undefined,
@@ -386,6 +391,8 @@ export class StatisticsChart extends LitElement {
       (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));
 
     let colorIndex = 0;
+    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
+    const chartStacked = this.chartType.endsWith("stack");
     const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: typeof this._chartData = [];
     const legendData: {
@@ -471,19 +478,17 @@ export class StatisticsChart extends LitElement {
         }
         statDataSets.forEach((d, i) => {
           if (
-            this.chartType === "line" &&
+            chartType === "line" &&
             prevEndTime &&
             prevValues &&
             prevEndTime.getTime() !== start.getTime()
           ) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push(
-              this._transformDataValue([prevEndTime, ...prevValues[i]!])
-            );
+            d.data!.push([prevEndTime, ...prevValues[i]!]);
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
+          d.data!.push([start, ...dataValues[i]!]);
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -503,7 +508,8 @@ export class StatisticsChart extends LitElement {
         this.statTypes.includes("max") && statisticsHaveType(stats, "max");
       const hasMin =
         this.statTypes.includes("min") && statisticsHaveType(stats, "min");
-      const drawBands = [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+      const drawBands =
+        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
 
       const hasState = this.statTypes.includes("state");
 
@@ -535,8 +541,8 @@ export class StatisticsChart extends LitElement {
           const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
-            type: this.chartType,
-            smooth: this.chartType === "line" ? 0.4 : false,
+            type: chartType,
+            smooth: chartType === "line" ? 0.4 : false,
             cursor: "default",
             data: [],
             name: name
@@ -555,16 +561,23 @@ export class StatisticsChart extends LitElement {
               width: 1.5,
             },
             itemStyle:
-              this.chartType === "bar"
+              chartType === "bar"
                 ? {
-                    borderRadius: [4, 4, 0, 0],
                     borderColor,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: this.chartType === "bar" ? backgroundColor : borderColor,
+            color: chartType === "bar" ? backgroundColor : borderColor,
           };
-          if (band && this.chartType === "line") {
+          if (chartStacked) {
+            series.stack = `band-stacked`;
+            series.stackStrategy = "samesign";
+            if (chartType === "line") {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          } else if (band && chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
             if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
@@ -621,7 +634,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (
             type === bandTop &&
-            this.chartType === "line" &&
+            chartType === "line" &&
             drawBands &&
             !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
           ) {
@@ -645,11 +658,9 @@ export class StatisticsChart extends LitElement {
       // For line charts, close out the last stat segment at prevEndTime
       const lastEndTime = prevEndTime;
       const lastValues = prevValues;
-      if (this.chartType === "line" && lastEndTime && lastValues) {
+      if (chartType === "line" && lastEndTime && lastValues) {
         statDataSets.forEach((d, i) => {
-          d.data!.push(
-            this._transformDataValue([lastEndTime, ...lastValues[i]!])
-          );
+          d.data!.push([lastEndTime, ...lastValues[i]!]);
         });
       }
 
@@ -657,6 +668,7 @@ export class StatisticsChart extends LitElement {
       const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
       if (
         displayCurrentState &&
+        !chartStacked &&
         (!this.unit || !statisticUnit || this.unit === statisticUnit)
       ) {
         // Skip external statistics
@@ -677,7 +689,7 @@ export class StatisticsChart extends LitElement {
                 const val: (number | null)[] = [];
                 if (
                   type === bandTop &&
-                  this.chartType === "line" &&
+                  chartType === "line" &&
                   drawBands &&
                   !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
                 ) {
@@ -687,9 +699,7 @@ export class StatisticsChart extends LitElement {
                 } else {
                   val.push(currentValue);
                 }
-                statDataSets[i].data!.push(
-                  this._transformDataValue([now, ...val])
-                );
+                statDataSets[i].data!.push([now, ...val]);
               });
             }
           }
@@ -701,6 +711,13 @@ export class StatisticsChart extends LitElement {
       Array.prototype.push.apply(legendData, statLegendData);
     });
 
+    if (chartType === "bar") {
+      fillDataGapsAndRoundCaps(
+        totalDataSets as BarSeriesOption[],
+        chartStacked
+      );
+    }
+
     legendData.forEach(({ id, name, color, borderColor }) => {
       // Add an empty series for the legend
       totalDataSets.push({
@@ -710,7 +727,7 @@ export class StatisticsChart extends LitElement {
         itemStyle: {
           borderColor,
         },
-        type: this.chartType,
+        type: chartType,
         data: [],
         xAxisIndex: 1,
       });
@@ -728,13 +745,6 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
-  private _transformDataValue(val: [Date, ...(number | null)[]]) {
-    if (this.chartType === "bar" && val[1] && val[1] < 0) {
-      return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
-    }
-    return val;
-  }
-
   private _clampYAxis(value?: number | ((values: any) => number)) {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value

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

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -15,15 +16,21 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { STRINGS_SEPARATOR_DOT } from "../../common/const";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
+import { deepActiveElement } from "../../common/dom/deep-active-element";
+import type {
+  HASSDomCurrentTargetEvent,
+  HASSDomTargetEvent,
+} from "../../common/dom/fire_event";
 import { fireEvent } 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 { internationalizationContext } 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";
@@ -101,12 +108,13 @@ 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 {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -160,6 +168,10 @@ 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;
@@ -236,16 +248,30 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated() {
-    const header = this.renderRoot.querySelector(".mdc-data-table__header-row");
-    if (!header) {
+  protected updated(changedProps: PropertyValues) {
+    if (!this._headerRow) {
       return;
     }
-    if (header.scrollWidth > header.clientWidth) {
-      this.style.setProperty("--table-row-width", `${header.scrollWidth}px`);
+
+    if (this._headerRow.scrollWidth > this._headerRow.clientWidth) {
+      this.style.setProperty(
+        "--table-row-width",
+        `${this._headerRow.scrollWidth}px`
+      );
     } else {
       this.style.removeProperty("--table-row-width");
     }
+
+    const activeElement = deepActiveElement();
+
+    if (
+      changedProps.has("selectable") ||
+      (!this.autoHeight &&
+        activeElement &&
+        AUTO_FOCUS_ALLOWED_ACTIVE_TAGS.includes(activeElement.tagName))
+    ) {
+      this._focusScroller();
+    }
   }
 
   public willUpdate(properties: PropertyValues) {
@@ -378,8 +404,6 @@ export class HaDataTable extends LitElement {
   );
 
   protected render() {
-    const localize = this.localizeFunc || this.hass.localize;
-
     const columns = this._sortedColumns(this.columns, this.columnOrder);
 
     const renderRow = (row: DataTableRowData, index: number) =>
@@ -503,7 +527,10 @@ export class HaDataTable extends LitElement {
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText ||
-                      localize("ui.components.data-table.no-data")}
+                      this._i18n?.localize?.(
+                        "ui.components.data-table.no-data"
+                      ) ||
+                      "No data"}
                     </div>
                   </div>
                 </div>
@@ -512,10 +539,12 @@ 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,
-                    localize,
+                    this._i18n?.localize,
+                    this._i18n?.locale,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -685,7 +714,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this.hass.locale.language
+            this._i18n?.locale?.language
           )
         : filteredData;
 
@@ -711,7 +740,8 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc,
+      localize: LocalizeFunc | undefined,
+      locale: FrontendLocaleData | undefined,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -735,11 +765,7 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(
-                  a,
-                  b,
-                  this.hass.locale.language
-                );
+                const comparison = stringCompare(a, b, locale?.language);
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -760,7 +786,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                this.hass.locale.language
+                locale?.language
               );
             })
             .reduce(
@@ -787,14 +813,15 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${this.hass.localize(
+                  .label=${localize?.(
                     `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  )}
+                  ) || (collapsed ? "Expand" : "Collapse")}
                   class=${collapsed ? "collapsed" : ""}
                 >
                 </ha-icon-button>
                 ${groupName === UNDEFINED_GROUP_KEY
-                  ? localize("ui.components.data-table.ungrouped")
+                  ? localize?.("ui.components.data-table.ungrouped") ||
+                    "Ungrouped"
                   : groupName || ""}
               </div>`,
             });
@@ -825,8 +852,10 @@ export class HaDataTable extends LitElement {
     ): Promise<DataTableRowData[]> => filterData(data, columns, filter)
   );
 
-  private _handleHeaderClick(ev: Event) {
-    const columnId = (ev.currentTarget as any).columnId;
+  private _handleHeaderClick(
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { columnId: string }>
+  ) {
+    const columnId = ev.currentTarget.columnId;
     if (!this.columns[columnId].sortable) {
       return;
     }
@@ -844,11 +873,12 @@ export class HaDataTable extends LitElement {
       column: columnId,
       direction: this.sortDirection,
     });
+
+    this._focusScroller();
   }
 
-  private _handleHeaderRowCheckboxClick(ev: Event) {
-    const checkbox = ev.target as HaCheckbox;
-    if (checkbox.checked) {
+  private _handleHeaderRowCheckboxClick(ev: HASSDomTargetEvent<HaCheckbox>) {
+    if (ev.target.checked) {
       this.selectAll();
     } else {
       this._checkedRows = [];
@@ -857,13 +887,25 @@ export class HaDataTable extends LitElement {
     this._lastSelectedRowId = null;
   }
 
-  private _handleRowCheckboxClicked = (ev: Event) => {
-    const checkbox = ev.currentTarget as HaCheckbox;
-    const rowId = (checkbox as any).rowId;
+  private _handleRowCheckboxClicked = (ev: MouseEvent) => {
+    // ha-checkbox label dispatches synthetic click on input, so handle the input click only
+    if (!(ev.composedPath()[0] instanceof HTMLInputElement) && !ev.shiftKey) {
+      return;
+    }
+
+    // In range select mode, use label click for Firefox since it doesn't fire input click events
+    if (ev.composedPath()[0] instanceof HTMLInputElement && ev.shiftKey) {
+      ev.preventDefault();
+    }
+
+    const checkboxElement = ev.currentTarget as HaCheckbox & { rowId: string };
+
+    const rowId = checkboxElement.rowId;
 
     const groupedData = this._groupData(
       this._filteredData,
-      this.localizeFunc || this.hass.localize,
+      this._i18n?.localize,
+      this._i18n?.locale,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,
@@ -895,7 +937,7 @@ export class HaDataTable extends LitElement {
           ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
         ];
       }
-    } else if (!checkbox.checked) {
+    } else if (checkboxElement.checked) {
       if (!this._checkedRows.includes(rowId)) {
         this._checkedRows = [...this._checkedRows, rowId];
       }
@@ -933,7 +975,9 @@ export class HaDataTable extends LitElement {
     return checkedRows;
   }
 
-  private _handleRowClick = (ev: Event) => {
+  private _handleRowClick = (
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { rowId: string }>
+  ) => {
     if (
       ev
         .composedPath()
@@ -949,14 +993,13 @@ export class HaDataTable extends LitElement {
     ) {
       return;
     }
-    const rowId = (ev.currentTarget as any).rowId;
+    const rowId = ev.currentTarget.rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   };
 
-  private _setTitle(ev: Event) {
-    const target = ev.currentTarget as HTMLElement;
-    if (target.scrollWidth > target.offsetWidth) {
-      target.setAttribute("title", target.innerText);
+  private _setTitle(ev: HASSDomCurrentTargetEvent<HTMLElement>) {
+    if (ev.currentTarget.scrollWidth > ev.currentTarget.offsetWidth) {
+      ev.currentTarget.setAttribute("title", ev.currentTarget.innerText);
     }
   }
 
@@ -978,6 +1021,12 @@ 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;
@@ -987,23 +1036,27 @@ export class HaDataTable extends LitElement {
   }
 
   @eventOptions({ passive: true })
-  private _saveScrollPos(e: Event) {
-    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
+  private _saveScrollPos(e: HASSDomTargetEvent<HTMLDivElement>) {
+    this._savedScrollPos = e.target.scrollTop;
 
-    this.renderRoot.querySelector(".mdc-data-table__header-row")!.scrollLeft = (
-      e.target as HTMLDivElement
-    ).scrollLeft;
+    if (this._headerRow) {
+      this._headerRow.scrollLeft = e.target.scrollLeft;
+    }
   }
 
   @eventOptions({ passive: true })
-  private _scrollContent(e: Event) {
-    this.renderRoot.querySelector("lit-virtualizer")!.scrollLeft = (
-      e.target as HTMLDivElement
-    ).scrollLeft;
+  private _scrollContent(e: HASSDomTargetEvent<HTMLDivElement>) {
+    if (!this._scroller) {
+      return;
+    }
+
+    this._scroller.scrollLeft = e.target.scrollLeft;
   }
 
-  private _collapseGroup = (ev: Event) => {
-    const groupName = (ev.currentTarget as any).group;
+  private _collapseGroup = (
+    ev: HASSDomCurrentTargetEvent<HTMLElement & { group: string }>
+  ) => {
+    const groupName = ev.currentTarget.group;
     if (this._collapsedGroups.includes(groupName)) {
       this._collapsedGroups = this._collapsedGroups.filter(
         (grp) => grp !== groupName
@@ -1426,6 +1479,15 @@ export class HaDataTable extends LitElement {
           contain: size layout !important;
           overscroll-behavior: contain;
         }
+
+        lit-virtualizer:focus,
+        lit-virtualizer:focus-visible {
+          outline: none;
+        }
+
+        ha-checkbox {
+          padding: var(--ha-space-1);
+        }
       `,
     ];
   }

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

@@ -3,6 +3,7 @@ import { consume, type ContextType } from "@lit/context";
 import type { ActionDetail } from "@material/mwc-list";
 import { mdiCalendarToday } from "@mdi/js";
 import "cally";
+import type { HassConfig } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, queryAll, state } from "lit/decorators";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
@@ -12,14 +13,16 @@ import {
   formatDateYear,
   formatISODateOnly,
 } from "../../common/datetime/format_date";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
-import {
-  configContext,
-  localeContext,
-  localizeContext,
-} from "../../data/context";
+import { configContext, internationalizationContext } from "../../data/context";
 import { TimeZone } from "../../data/translation";
-import type { ValueChangedEvent } from "../../types";
+import { MobileAwareMixin } from "../../mixins/mobile-aware-mixin";
+import { haStyleScrollbar } from "../../resources/styles";
+import type { HomeAssistantConfig, ValueChangedEvent } from "../../types";
+import "../chips/ha-chip-set";
+import "../chips/ha-filter-chip";
+import type { HaFilterChip } from "../chips/ha-filter-chip";
 import type { HaBaseTimeInput } from "../ha-base-time-input";
 import "../ha-icon-button";
 import "../ha-icon-button-next";
@@ -27,12 +30,12 @@ import "../ha-icon-button-prev";
 import "../ha-list";
 import "../ha-list-item";
 import "../ha-time-input";
+import type { HaTimeInput } from "../ha-time-input";
 import type { DateRangePickerRanges } from "./ha-date-range-picker";
 import { datePickerStyles, dateRangePickerStyles } from "./styles";
-import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("date-range-picker")
-export class DateRangePicker extends LitElement {
+export class DateRangePicker extends MobileAwareMixin(LitElement) {
   @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
 
   @property({ attribute: false }) public startDate?: Date;
@@ -43,16 +46,15 @@ export class DateRangePicker extends LitElement {
   public timePicker = false;
 
   @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: ContextType<typeof localizeContext>;
-
-  @state()
-  @consume({ context: localeContext, subscribe: true })
-  private locale!: ContextType<typeof localeContext>;
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   @state()
   @consume({ context: configContext, subscribe: true })
-  private hassConfig!: ContextType<typeof configContext>;
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _hassConfig!: HassConfig;
 
   /** used to show month in calendar-range header */
   @state() private _pickerMonth?: string;
@@ -82,12 +84,20 @@ export class DateRangePicker extends LitElement {
         ? formatCallyDateRange(
             this.startDate,
             this.endDate,
-            this.locale,
-            this.hassConfig
+            this._i18n?.locale,
+            this._hassConfig
           )
         : undefined;
-    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
-    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._pickerMonth = formatDateMonth(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
+    this._pickerYear = formatDateYear(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
 
     if (this.timePicker && this.startDate && this.endDate) {
       this._timeValue = {
@@ -103,26 +113,48 @@ export class DateRangePicker extends LitElement {
     }
   }
 
+  private _renderRanges() {
+    if (this._isMobileSize) {
+      return html`
+        <ha-chip-set class="ha-scrollbar">
+          ${Object.entries(this.ranges!).map(
+            ([name, range], index) => html`
+              <ha-filter-chip
+                .index=${index}
+                .range=${range}
+                @click=${this._clickDateRangeChip}
+              >
+                ${name}
+              </ha-filter-chip>
+            `
+          )}
+        </ha-chip-set>
+      `;
+    }
+
+    return html`
+      <ha-list @action=${this._setDateRange} activatable>
+        ${Object.keys(this.ranges!).map(
+          (name) => html`<ha-list-item>${name}</ha-list-item>`
+        )}
+      </ha-list>
+    `;
+  }
+
   render() {
     return html`<div class="picker">
         ${this.ranges !== false && this.ranges
-          ? html`<div class="date-range-ranges">
-              <ha-list @action=${this._setDateRange} activatable>
-                ${Object.keys(this.ranges).map(
-                  (name) => html`<ha-list-item>${name}</ha-list-item>`
-                )}
-              </ha-list>
-            </div>`
+          ? html`<div class="date-range-ranges">${this._renderRanges()}</div>`
           : nothing}
         <div class="range">
           <calendar-range
             .value=${this._dateValue}
-            .locale=${this.locale.language}
+            .locale=${this._i18n.locale.language}
             .focusedDate=${this._focusDate}
             @focusday=${this._focusChanged}
             @change=${this._handleChange}
             show-outside-days
-            .firstDayOfWeek=${firstWeekdayIndex(this.locale)}
+            .firstDayOfWeek=${firstWeekdayIndex(this._i18n.locale)}
           >
             <ha-icon-button-prev
               tabindex="-1"
@@ -135,7 +167,7 @@ export class DateRangePicker extends LitElement {
               <ha-icon-button
                 @click=${this._focusToday}
                 .path=${mdiCalendarToday}
-                .label=${this.localize("ui.dialogs.date-picker.today")}
+                .label=${this._i18n.localize("ui.dialogs.date-picker.today")}
               ></ha-icon-button>
             </div>
             <ha-icon-button-next
@@ -149,9 +181,9 @@ export class DateRangePicker extends LitElement {
                 <div class="times">
                   <ha-time-input
                     .value=${`${this._timeValue.from.hours}:${this._timeValue.from.minutes}`}
-                    .locale=${this.locale}
+                    .locale=${this._i18n.locale}
                     @value-changed=${this._handleChangeTime}
-                    .label=${this.localize(
+                    .label=${this._i18n.localize(
                       "ui.components.date-range-picker.time_from"
                     )}
                     id="from"
@@ -160,9 +192,9 @@ export class DateRangePicker extends LitElement {
                   ></ha-time-input>
                   <ha-time-input
                     .value=${`${this._timeValue.to.hours}:${this._timeValue.to.minutes}`}
-                    .locale=${this.locale}
+                    .locale=${this._i18n.locale}
                     @value-changed=${this._handleChangeTime}
-                    .label=${this.localize(
+                    .label=${this._i18n.localize(
                       "ui.components.date-range-picker.time_to"
                     )}
                     id="to"
@@ -176,19 +208,33 @@ export class DateRangePicker extends LitElement {
       </div>
       <div class="footer">
         <ha-button appearance="plain" @click=${this._cancel}
-          >${this.localize("ui.common.cancel")}</ha-button
+          >${this._i18n.localize("ui.common.cancel")}</ha-button
         >
         <ha-button .disabled=${!this._dateValue} @click=${this._save}
-          >${this.localize("ui.components.date-range-picker.select")}</ha-button
+          >${this._i18n.localize(
+            "ui.components.date-range-picker.select"
+          )}</ha-button
         >
       </div>`;
   }
 
   private _focusToday() {
     const date = new Date();
-    this._focusDate = formatISODateOnly(date, this.locale, this.hassConfig);
-    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
-    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._focusDate = formatISODateOnly(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
+    this._pickerMonth = formatDateMonth(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
+    this._pickerYear = formatDateYear(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
   }
 
   private _cancel() {
@@ -228,12 +274,12 @@ export class DateRangePicker extends LitElement {
       }
     }
 
-    if (this.locale.time_zone === TimeZone.server) {
+    if (this._i18n.locale.time_zone === TimeZone.server) {
       startDate = new Date(
-        new TZDate(startDate, this.hassConfig.time_zone).getTime()
+        new TZDate(startDate, this._hassConfig.time_zone).getTime()
       );
       endDate = new Date(
-        new TZDate(endDate, this.hassConfig.time_zone).getTime()
+        new TZDate(endDate, this._hassConfig.time_zone).getTime()
       );
     }
 
@@ -259,8 +305,16 @@ export class DateRangePicker extends LitElement {
 
   private _focusChanged(ev: CustomEvent<Date>) {
     const date = ev.detail;
-    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
-    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._pickerMonth = formatDateMonth(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
+    this._pickerYear = formatDateYear(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
     this._focusDate = undefined;
   }
 
@@ -270,18 +324,30 @@ export class DateRangePicker extends LitElement {
     this._focusDate = undefined;
   }
 
+  private _clickDateRangeChip(ev: Event) {
+    const chip = ev.target as HaFilterChip & {
+      index: number;
+      range: [Date, Date];
+    };
+    this._saveDateRangePreset(chip.range, chip.index);
+  }
+
   private _setDateRange(ev: CustomEvent<ActionDetail>) {
     const dateRange: [Date, Date] = Object.values(this.ranges!)[
       ev.detail.index
     ];
+    this._saveDateRangePreset(dateRange, ev.detail.index);
+  }
+
+  private _saveDateRangePreset(range: [Date, Date], index: number) {
     fireEvent(this, "value-changed", {
       value: {
-        startDate: dateRange[0],
-        endDate: dateRange[1],
+        startDate: range[0],
+        endDate: range[1],
       },
     });
     fireEvent(this, "preset-selected", {
-      index: ev.detail.index,
+      index,
     });
   }
 
@@ -306,6 +372,7 @@ export class DateRangePicker extends LitElement {
   static styles = [
     datePickerStyles,
     dateRangePickerStyles,
+    haStyleScrollbar,
     css`
       .picker {
         display: flex;
@@ -313,7 +380,7 @@ export class DateRangePicker extends LitElement {
       }
 
       .date-range-ranges {
-        border-right: 1px solid var(--divider-color);
+        border-right: var(--ha-border-width-sm) solid var(--divider-color);
         min-width: 140px;
         flex: 0 1 30%;
       }
@@ -327,16 +394,21 @@ export class DateRangePicker extends LitElement {
         overflow-x: hidden;
       }
 
-      @media only screen and (max-width: 460px) {
+      @media all and (max-width: 450px), all and (max-height: 500px) {
         .picker {
           flex-direction: column;
         }
 
         .date-range-ranges {
-          flex-basis: 180px;
           border-bottom: 1px solid var(--divider-color);
-          border-right: none;
-          overflow-y: scroll;
+          margin-top: var(--ha-space-5);
+          overflow: visible;
+        }
+
+        ha-chip-set {
+          padding: var(--ha-space-3);
+          flex-wrap: nowrap;
+          overflow-x: auto;
         }
 
         .range {

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

@@ -3,6 +3,7 @@ import { consume, type ContextType } from "@lit/context";
 import { mdiCalendar } from "@mdi/js";
 import "cally";
 import { isThisYear } from "date-fns";
+import type { HassConfig } from "home-assistant-js-websocket/dist/types";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -14,12 +15,10 @@ import {
   formatShortDateTime,
   formatShortDateTimeWithYear,
 } from "../../common/datetime/format_date_time";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
-import {
-  configContext,
-  localeContext,
-  localizeContext,
-} from "../../data/context";
+import { configContext, internationalizationContext } from "../../data/context";
+import type { HomeAssistantConfig } from "../../types";
 import "../ha-bottom-sheet";
 import "../ha-icon-button";
 import "../ha-icon-button-next";
@@ -43,16 +42,15 @@ const EXTENDED_RANGE_KEYS: DateRange[] = [
 @customElement("ha-date-range-picker")
 export class HaDateRangePicker extends LitElement {
   @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: ContextType<typeof localizeContext>;
-
-  @state()
-  @consume({ context: localeContext, subscribe: true })
-  private locale!: ContextType<typeof localeContext>;
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   @state()
   @consume({ context: configContext, subscribe: true })
-  private hassConfig!: ContextType<typeof configContext>;
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _hassConfig!: HassConfig;
 
   @property({ attribute: false }) public startDate!: Date;
 
@@ -117,8 +115,8 @@ export class HaDateRangePicker extends LitElement {
     this._ranges = {};
     rangeKeys.forEach((key) => {
       this._ranges![
-        this.localize(`ui.components.date-range-picker.ranges.${key}`)
-      ] = calcDateRange(this.locale, this.hassConfig, key);
+        this._i18n.localize(`ui.components.date-range-picker.ranges.${key}`)
+      ] = calcDateRange(this._i18n.locale, this._hassConfig, key);
     });
   }
 
@@ -133,47 +131,50 @@ export class HaDateRangePicker extends LitElement {
           ${!this.minimal
             ? html`<ha-textarea
                   id="field"
-                  mobile-multiline
+                  rows="1"
+                  resize="auto"
                   @click=${this._openPicker}
                   @keydown=${this._handleKeydown}
                   .value=${(isThisYear(this.startDate)
                     ? formatShortDateTime(
                         this.startDate,
-                        this.locale,
-                        this.hassConfig
+                        this._i18n.locale,
+                        this._hassConfig
                       )
                     : formatShortDateTimeWithYear(
                         this.startDate,
-                        this.locale,
-                        this.hassConfig
+                        this._i18n.locale,
+                        this._hassConfig
                       )) +
                   (window.innerWidth >= 459 ? " - " : " - \n") +
                   (isThisYear(this.endDate)
                     ? formatShortDateTime(
                         this.endDate,
-                        this.locale,
-                        this.hassConfig
+                        this._i18n.locale,
+                        this._hassConfig
                       )
                     : formatShortDateTimeWithYear(
                         this.endDate,
-                        this.locale,
-                        this.hassConfig
+                        this._i18n.locale,
+                        this._hassConfig
                       ))}
-                  .label=${this.localize(
+                  .label=${this._i18n.localize(
                     "ui.components.date-range-picker.start_date"
                   ) +
                   " - " +
-                  this.localize("ui.components.date-range-picker.end_date")}
+                  this._i18n.localize(
+                    "ui.components.date-range-picker.end_date"
+                  )}
                   .disabled=${this.disabled}
                   readonly
                 ></ha-textarea>
                 <ha-icon-button-prev
-                  .label=${this.localize("ui.common.previous")}
+                  .label=${this._i18n.localize("ui.common.previous")}
                   @click=${this._handlePrev}
                 >
                 </ha-icon-button-prev>
                 <ha-icon-button-next
-                  .label=${this.localize("ui.common.next")}
+                  .label=${this._i18n.localize("ui.common.next")}
                   @click=${this._handleNext}
                 >
                 </ha-icon-button-next>`
@@ -181,7 +182,7 @@ export class HaDateRangePicker extends LitElement {
                 @click=${this._openPicker}
                 .disabled=${this.disabled}
                 id="field"
-                .label=${this.localize(
+                .label=${this._i18n.localize(
                   "ui.components.date-range-picker.select_date_range"
                 )}
                 .path=${mdiCalendar}
@@ -289,8 +290,8 @@ export class HaDateRangePicker extends LitElement {
       this.startDate,
       this.endDate,
       forward,
-      this.locale,
-      this.hassConfig
+      this._i18n.locale,
+      this._hassConfig
     );
     this.startDate = start;
     this.endDate = end;
@@ -336,14 +337,7 @@ export class HaDateRangePicker extends LitElement {
   private _setTextareaFocusStyle(focused: boolean) {
     const textarea = this.renderRoot.querySelector("ha-textarea");
     if (textarea) {
-      const foundation = (textarea as any).mdcFoundation;
-      if (foundation) {
-        if (focused) {
-          foundation.activateFocus();
-        } else {
-          foundation.deactivateFocus();
-        }
-      }
+      textarea.setFocused(focused);
     }
   }
 

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

@@ -2,6 +2,7 @@ import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume, type ContextType } from "@lit/context";
 import { mdiBackspace, mdiCalendarToday } from "@mdi/js";
 import "cally";
+import type { HassConfig } from "home-assistant-js-websocket/dist/types";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import {
@@ -10,12 +11,10 @@ import {
   formatDateYear,
   formatISODateOnly,
 } from "../../common/datetime/format_date";
-import {
-  configContext,
-  localeContext,
-  localizeContext,
-} from "../../data/context";
+import { transform } from "../../common/decorators/transform";
+import { configContext, internationalizationContext } from "../../data/context";
 import { DialogMixin } from "../../dialogs/dialog-mixin";
+import type { HomeAssistantConfig } from "../../types";
 import "../ha-button";
 import type { DatePickerDialogParams } from "../ha-date-input";
 import "../ha-dialog";
@@ -40,16 +39,15 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
   LitElement
 ) {
   @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: ContextType<typeof localizeContext>;
-
-  @state()
-  @consume({ context: localeContext, subscribe: true })
-  private locale!: ContextType<typeof localeContext>;
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   @state()
   @consume({ context: configContext, subscribe: true })
-  private hassConfig!: ContextType<typeof configContext>;
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _hassConfig!: HassConfig;
 
   @state() private _value?: {
     year: string;
@@ -74,14 +72,26 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
         ? new Date(`${this.params.value.split("T")[0]}T00:00:00`)
         : new Date();
 
-      this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
-      this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
+      this._pickerYear = formatDateYear(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
+      this._pickerMonth = formatDateMonth(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
 
       this._value = this.params.value
         ? {
             year: this._pickerYear,
-            title: formatDateShort(date, this.locale, this.hassConfig),
-            dateString: formatISODateOnly(date, this.locale, this.hassConfig),
+            title: formatDateShort(date, this._i18n.locale, this._hassConfig),
+            dateString: formatISODateOnly(
+              date,
+              this._i18n.locale,
+              this._hassConfig
+            ),
           }
         : undefined;
     }
@@ -95,7 +105,7 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
       open
       width="small"
       .headerTitle=${this._value?.title ||
-      this.localize("ui.dialogs.date-picker.title")}
+      this._i18n.localize("ui.dialogs.date-picker.title")}
       .headerSubtitle=${this._value?.year}
       header-subtitle-position="above"
     >
@@ -103,7 +113,7 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
         ? html`
             <ha-icon-button
               .path=${mdiBackspace}
-              .label=${this.localize("ui.dialogs.date-picker.clear")}
+              .label=${this._i18n.localize("ui.dialogs.date-picker.clear")}
               slot="headerActionItems"
               @click=${this._clear}
             ></ha-icon-button>
@@ -131,7 +141,7 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
           <ha-icon-button
             @click=${this._setToday}
             .path=${mdiCalendarToday}
-            .label=${this.localize("ui.dialogs.date-picker.today")}
+            .label=${this._i18n.localize("ui.dialogs.date-picker.today")}
           ></ha-icon-button>
         </div>
         <ha-icon-button-next tabindex="-1" slot="next"></ha-icon-button-next>
@@ -143,10 +153,10 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
           slot="secondaryAction"
           @click=${this.closeDialog}
         >
-          ${this.localize("ui.common.cancel")}
+          ${this._i18n.localize("ui.common.cancel")}
         </ha-button>
         <ha-button slot="primaryAction" @click=${this._setValue}>
-          ${this.localize("ui.common.ok")}
+          ${this._i18n.localize("ui.common.ok")}
         </ha-button>
       </ha-dialog-footer>
     </ha-dialog>`;
@@ -164,23 +174,39 @@ export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
       ? new Date(`${value.split("T")[0]}T00:00:00`)
       : new Date();
     this._value = {
-      year: formatDateYear(date, this.locale, this.hassConfig),
-      title: formatDateShort(date, this.locale, this.hassConfig),
+      year: formatDateYear(date, this._i18n.locale, this._hassConfig),
+      title: formatDateShort(date, this._i18n.locale, this._hassConfig),
       dateString:
-        value || formatISODateOnly(date, this.locale, this.hassConfig),
+        value || formatISODateOnly(date, this._i18n.locale, this._hassConfig),
     };
 
     if (setFocusDay) {
       this._focusDate = this._value.dateString;
-      this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
-      this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+      this._pickerMonth = formatDateMonth(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
+      this._pickerYear = formatDateYear(
+        date,
+        this._i18n.locale,
+        this._hassConfig
+      );
     }
   }
 
   private _focusChanged(ev: CustomEvent<Date>) {
     const date = ev.detail;
-    this._pickerMonth = formatDateMonth(date, this.locale, this.hassConfig);
-    this._pickerYear = formatDateYear(date, this.locale, this.hassConfig);
+    this._pickerMonth = formatDateMonth(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
+    this._pickerYear = formatDateYear(
+      date,
+      this._i18n.locale,
+      this._hassConfig
+    );
     this._focusDate = undefined;
   }
 

src/components/date-picker/styles.ts

@@ -79,6 +79,8 @@ export const datePickerStyles = css`
     flex: 1;
     text-align: center;
     margin-left: 48px;
+    margin-inline-start: 48px;
+    margin-inline-end: initial;
   }
 `;
 

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 { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getDeviceArea } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
   deviceComboBoxKeys,
@@ -14,11 +14,11 @@ import {
   type DevicePickerItem,
 } from "../../data/device/device_picker";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -154,7 +154,7 @@ export class HaDevicePicker extends LitElement {
         return html`<span slot="headline">${deviceId}</span>`;
       }
 
-      const { area } = getDeviceContext(device, this.hass);
+      const area = getDeviceArea(device, this.hass.areas);
 
       const deviceName = device ? computeDeviceName(device) : undefined;
       const areaName = area ? computeAreaName(area) : undefined;

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

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

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

@@ -13,9 +13,9 @@ import {
 } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
+import "../ha-control-switch";
 import "../ha-formfield";
 import "../ha-icon-button";
-import "../ha-switch";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -35,7 +35,7 @@ export class HaEntityToggle extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
-      return html` <ha-switch disabled></ha-switch> `;
+      return html`<ha-control-switch disabled></ha-control-switch> `;
     }
 
     if (
@@ -62,14 +62,14 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
-    const switchTemplate = html`<ha-switch
+    const switchTemplate = html`<ha-control-switch
       aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
       .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
-    ></ha-switch>`;
+    ></ha-control-switch>`;
 
     if (!this.label) {
       return switchTemplate;
@@ -163,6 +163,10 @@ export class HaEntityToggle extends LitElement {
       white-space: nowrap;
       min-width: 38px;
     }
+    ha-control-switch {
+      --control-switch-thickness: 20px;
+      --control-switch-off-color: var(--state-inactive-color);
+    }
     ha-icon-button {
       --ha-icon-button-size: 40px;
       color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
@@ -171,9 +175,6 @@ export class HaEntityToggle extends LitElement {
     ha-icon-button.state-active {
       color: var(--ha-icon-button-active-color, var(--primary-color));
     }
-    ha-switch {
-      padding: 13px 5px;
-    }
   `;
 }
 

src/components/ha-addon-picker.ts

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

src/components/ha-alert.ts

@@ -8,6 +8,7 @@ import {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
 import "./ha-svg-icon";
@@ -38,6 +39,8 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
   @property({ type: Boolean }) public narrow = false;
 
   public render() {
@@ -65,7 +68,7 @@ class HaAlert extends LitElement {
               ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismissClicked}
-                    label="Dismiss alert"
+                    .label=${this.localize!("ui.common.dismiss_alert")}
                     .path=${mdiClose}
                   ></ha-icon-button>`
                 : nothing}

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

@@ -267,7 +267,6 @@ export class HaAreaControlsPicker extends LitElement {
         : item.domain
           ? html`<ha-domain-icon
               slot="start"
-              .hass=${this.hass}
               .domain=${item.domain}
               .deviceClass=${item.deviceClass}
             ></ha-domain-icon>`

src/components/ha-button.ts

@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @cssprop --ha-button-height - The height of the button.
  * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-border-radius-pill)`.
  *
- * @attr {("small"|"medium")} size - Sets the button size.
+ * @attr {("small"|"medium"|"large")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
  * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
@@ -62,6 +62,7 @@ export class HaButton extends Button {
           transition: background-color var(--ha-animation-duration-fast)
             ease-out;
           text-wrap: wrap;
+          box-shadow: var(--ha-button-box-shadow);
         }
 
         :host([size="small"]) .button {
@@ -73,6 +74,14 @@ export class HaButton extends Button {
           --wa-form-control-padding-inline: var(--ha-space-3);
         }
 
+        :host([size="large"]) .button {
+          --wa-form-control-height: var(
+            --ha-button-height,
+            var(--button-height, 48px)
+          );
+          font-size: var(--ha-font-size-l);
+        }
+
         :host([variant="brand"]) {
           --button-color-fill-normal-active: var(
             --ha-color-fill-primary-normal-active

src/components/ha-check-list-item.ts

@@ -3,8 +3,9 @@ import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-ite
 import { styles } from "@material/mwc-list/mwc-list-item.css";
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { preventDefault } from "../common/dom/prevent_default";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-checkbox";
 
 @customElement("ha-check-list-item")
@@ -15,17 +16,15 @@ export class HaCheckListItem extends CheckListItemBase {
   @property({ type: Boolean })
   indeterminate = false;
 
+  @property({ type: Boolean, attribute: "separate-checkbox-click" })
+  separateCheckboxClick = false;
+
   async onChange(event) {
     super.onChange(event);
     fireEvent(this, event.type);
   }
 
   override render() {
-    const checkboxClasses = {
-      "mdc-deprecated-list-item__graphic": this.left,
-      "mdc-deprecated-list-item__meta": !this.left,
-    };
-
     const text = this.renderText();
     const graphic =
       this.graphic && this.graphic !== "control" && !this.left
@@ -35,17 +34,16 @@ export class HaCheckListItem extends CheckListItemBase {
     const ripple = this.renderRipple();
 
     return html` ${ripple} ${graphic} ${this.left ? "" : text}
-      <span class=${classMap(checkboxClasses)}>
-        <ha-checkbox
-          reducedTouchTarget
-          tabindex=${this.tabindex}
-          .checked=${this.selected}
-          .indeterminate=${this.indeterminate}
-          ?disabled=${this.disabled || this.checkboxDisabled}
-          @change=${this.onChange}
-        >
-        </ha-checkbox>
-      </span>
+      <ha-checkbox
+        tabindex=${this.separateCheckboxClick ? this.tabindex : -1}
+        .checked=${this.selected}
+        .indeterminate=${this.indeterminate}
+        ?disabled=${this.disabled || this.checkboxDisabled}
+        @change=${this.onChange}
+        @click=${this.separateCheckboxClick ? stopPropagation : preventDefault}
+        class=${this.left ? "left" : ""}
+      >
+      </ha-checkbox>
       ${this.left ? text : ""} ${meta}`;
   }
 
@@ -65,11 +63,16 @@ export class HaCheckListItem extends CheckListItemBase {
         margin-inline-start: 0px;
         direction: var(--direction);
       }
-      .mdc-deprecated-list-item__meta {
+      ha-checkbox {
         flex-shrink: 0;
         direction: var(--direction);
         margin-inline-start: auto;
         margin-inline-end: 0;
+        height: 100%;
+        justify-content: center;
+      }
+      ha-checkbox.left {
+        margin-inline-start: 0;
       }
       .mdc-deprecated-list-item__graphic {
         margin-top: var(--check-list-item-graphic-margin-top);

src/components/ha-checkbox.ts

@@ -1,18 +1,156 @@
-import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
-import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
-import { css } from "lit";
+import WaCheckbox from "@home-assistant/webawesome/dist/components/checkbox/checkbox";
+import { css, type CSSResultGroup } from "lit";
 import { customElement } from "lit/decorators";
 
+/**
+ * Home Assistant checkbox component
+ *
+ * @element ha-checkbox
+ * @extends {WaCheckbox}
+ *
+ * @summary
+ * A Home Assistant themed wrapper around the Web Awesome checkbox.
+ *
+ * @slot - The checkbox's label.
+ * @slot hint - Text that describes how to use the checkbox.
+ *
+ * @csspart base - The component's label wrapper.
+ * @csspart control - The square container that wraps the checkbox's checked state.
+ * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
+ * @csspart label - The container that wraps the checkbox's label.
+ * @csspart hint - The hint's wrapper.
+ *
+ * @cssprop --ha-checkbox-size - The checkbox size. Defaults to `20px`.
+ * @cssprop --ha-checkbox-border-color - The border color of the checkbox control. Defaults to `--ha-color-border-neutral-normal`.
+ * @cssprop --ha-checkbox-border-color-hover - The border color of the checkbox control on hover. Defaults to `--ha-checkbox-border-color`, then `--ha-color-border-neutral-loud`.
+ * @cssprop --ha-checkbox-background-color - The background color of the checkbox control. Defaults to `--wa-form-control-background-color`.
+ * @cssprop --ha-checkbox-background-color-hover - The background color of the checkbox control on hover. Defaults to `--ha-color-form-background-hover`.
+ * @cssprop --ha-checkbox-checked-background-color - The background color when checked or indeterminate. Defaults to `--ha-color-fill-primary-loud-resting`.
+ * @cssprop --ha-checkbox-checked-background-color-hover - The background color when checked or indeterminate on hover. Defaults to `--ha-color-fill-primary-loud-hover`.
+ * @cssprop --ha-checkbox-checked-icon-color - The color of the checked and indeterminate icons. Defaults to `--wa-color-brand-on-loud`.
+ * @cssprop --ha-checkbox-checked-icon-scale - The size of the checked and indeterminate icons relative to the checkbox. Defaults to `0.9`.
+ * @cssprop --ha-checkbox-border-radius - The border radius of the checkbox control. Defaults to `--ha-border-radius-sm`.
+ * @cssprop --ha-checkbox-border-width - The border width of the checkbox control. Defaults to `--ha-border-width-md`.
+ * @cssprop --ha-checkbox-required-marker - The marker shown after the label for required fields. Defaults to `"*"`.
+ * @cssprop --ha-checkbox-required-marker-offset - Offset of the required marker. Defaults to `0.1rem`.
+ *
+ * @attr {boolean} checked - Draws the checkbox in a checked state.
+ * @attr {boolean} disabled - Disables the checkbox.
+ * @attr {boolean} indeterminate - Draws the checkbox in an indeterminate state.
+ * @attr {boolean} required - Makes the checkbox a required field.
+ */
 @customElement("ha-checkbox")
-export class HaCheckbox extends CheckboxBase {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-    `,
-  ];
+export class HaCheckbox extends WaCheckbox {
+  /**
+   * Returns the configured checkbox value, independent of checked state.
+   *
+   * The base Web Awesome checkbox returns `null` when unchecked to align with
+   * form submission rules. Home Assistant components expect the configured value
+   * to remain readable, so this wrapper always exposes the internal value.
+   */
+  // @ts-ignore - accessing WA internal _value property
+  override get value(): string | null {
+    // @ts-ignore
+    return this._value ?? null;
+  }
+
+  /** Sets the configured checkbox value. */
+  override set value(val: string | null) {
+    // @ts-ignore
+    this._value = val;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      WaCheckbox.styles,
+      css`
+        :host {
+          --wa-form-control-toggle-size: var(--ha-checkbox-size, 20px);
+          --wa-form-control-border-color: var(
+            --ha-checkbox-border-color,
+            var(--ha-color-border-neutral-normal)
+          );
+          --wa-form-control-background-color: var(
+            --ha-checkbox-background-color,
+            var(--wa-form-control-background-color)
+          );
+          --checked-icon-color: var(
+            --ha-checkbox-checked-icon-color,
+            var(--wa-color-brand-on-loud)
+          );
+
+          --wa-form-control-activated-color: var(
+            --ha-checkbox-checked-background-color,
+            var(--ha-color-fill-primary-loud-resting)
+          );
+          -webkit-tap-highlight-color: transparent;
+
+          --checked-icon-scale: var(--ha-checkbox-checked-icon-scale, 0.9);
+          --wa-form-control-required-content: var(
+            --ha-checkbox-required-marker,
+            var(--ha-input-required-marker, "*")
+          );
+          --wa-form-control-required-content-offset: var(
+            --ha-checkbox-required-marker-offset,
+            0.1rem
+          );
+        }
+
+        [part~="base"] {
+          align-items: center;
+          gap: var(--ha-space-2);
+        }
+
+        [part~="control"] {
+          border-radius: var(
+            --ha-checkbox-border-radius,
+            var(--ha-border-radius-sm)
+          );
+          border-width: var(
+            --ha-checkbox-border-width,
+            var(--ha-border-width-md)
+          );
+          margin-inline-end: 0;
+        }
+
+        [part~="label"] {
+          line-height: 1;
+        }
+
+        #hint {
+          font-size: var(--ha-font-size-xs);
+          color: var(--ha-color-text-secondary);
+        }
+
+        label:has(input:not(:disabled)):hover {
+          --wa-form-control-border-color: var(
+            --ha-checkbox-border-color-hover,
+            var(--ha-checkbox-border-color, var(--ha-color-border-neutral-loud))
+          );
+        }
+
+        label:has(input:not(:disabled)):hover [part~="control"] {
+          background-color: var(
+            --ha-checkbox-background-color-hover,
+            var(--ha-color-form-background-hover)
+          );
+        }
+
+        label:has(input:checked:not(:disabled)):hover [part~="control"],
+        label:has(input:indeterminate:not(:disabled)):hover [part~="control"] {
+          background-color: var(
+            --ha-checkbox-checked-background-color-hover,
+            var(--ha-color-fill-primary-loud-hover)
+          );
+          border-color: var(
+            --ha-checkbox-checked-background-color-hover,
+            var(--ha-color-fill-primary-loud-hover)
+          );
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/components/ha-code-editor.ts

@@ -10,6 +10,7 @@ import type {
 import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
+import type { SyntaxNode } from "@lezer/common";
 import { placeholder } from "@codemirror/view";
 import {
   mdiArrowCollapse,
@@ -26,13 +27,20 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, ReactiveElement, render } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consume } from "@lit/context";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
+import { computeDeviceName } from "../common/entity/compute_device_name";
+import { computeAreaName } from "../common/entity/compute_area_name";
+import { computeFloorName } from "../common/entity/compute_floor_name";
 import { copyToClipboard } from "../common/util/copy-clipboard";
 import { haStyleScrollbar } from "../resources/styles";
+import type { JinjaArgType } from "../resources/jinja_ha_completions";
 import type { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
+import { labelsContext } from "../data/context";
+import type { LabelRegistryEntry } from "../data/label/label_registry";
 import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
@@ -109,6 +117,10 @@ export class HaCodeEditor extends ReactiveElement {
 
   @state() private _canCopy = false;
 
+  @consume({ context: labelsContext, subscribe: true })
+  @state()
+  private _labels?: LabelRegistryEntry[];
+
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
@@ -204,9 +216,6 @@ export class HaCodeEditor extends ReactiveElement {
       transactions.push({
         effects: [
           this._loadedCodeMirror!.langCompartment!.reconfigure(this._mode),
-          this._loadedCodeMirror!.foldingCompartment.reconfigure(
-            this._getFoldingExtensions()
-          ),
         ],
       });
     }
@@ -273,6 +282,8 @@ export class HaCodeEditor extends ReactiveElement {
     }
     const extensions: Extension[] = [
       this._loadedCodeMirror.lineNumbers(),
+      this._loadedCodeMirror.foldGutter(),
+      this._loadedCodeMirror.bracketMatching(),
       this._loadedCodeMirror.history(),
       this._loadedCodeMirror.drawSelection(),
       this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
@@ -290,6 +301,9 @@ export class HaCodeEditor extends ReactiveElement {
         },
       }),
       this._loadedCodeMirror.keymap.of([
+        // closeBracketsKeymap must come before defaultKeymap so its Backspace
+        // handler runs before the default delete-character binding.
+        ...(!this.readOnly ? this._loadedCodeMirror.closeBracketsKeymap : []),
         ...this._loadedCodeMirror.defaultKeymap,
         ...this._loadedCodeMirror.searchKeymap,
         ...this._loadedCodeMirror.historyKeymap,
@@ -300,6 +314,8 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.langCompartment.of(this._mode),
       this._loadedCodeMirror.haTheme,
       this._loadedCodeMirror.haSyntaxHighlighting,
+      this._loadedCodeMirror.yamlScalarHighlighter,
+      this._loadedCodeMirror.yamlScalarHighlightStyle,
       this._loadedCodeMirror.readonlyCompartment.of(
         this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
       ),
@@ -307,9 +323,6 @@ export class HaCodeEditor extends ReactiveElement {
         this.linewrap ? this._loadedCodeMirror.EditorView.lineWrapping : []
       ),
       this._loadedCodeMirror.EditorView.updateListener.of(this._onUpdate),
-      this._loadedCodeMirror.foldingCompartment.of(
-        this._getFoldingExtensions()
-      ),
       this._loadedCodeMirror.tooltips({
         position: "absolute",
       }),
@@ -317,21 +330,24 @@ export class HaCodeEditor extends ReactiveElement {
     ];
 
     if (!this.readOnly) {
-      const completionSources: CompletionSource[] = [];
+      const completionSources: CompletionSource[] = [
+        this._loadedCodeMirror.haJinjaCompletionSource,
+      ];
       if (this.autocompleteEntities && this.hass) {
         completionSources.push(this._entityCompletions.bind(this));
       }
       if (this.autocompleteIcons) {
         completionSources.push(this._mdiCompletions.bind(this));
       }
-      if (completionSources.length > 0) {
-        extensions.push(
-          this._loadedCodeMirror.autocompletion({
-            override: completionSources,
-            maxRenderedOptions: 10,
-          })
-        );
-      }
+      extensions.push(
+        this._loadedCodeMirror.autocompletion({
+          override: completionSources,
+          maxRenderedOptions: 10,
+        }),
+        this._loadedCodeMirror.closeBrackets(),
+        this._loadedCodeMirror.closeBracketsOverride,
+        this._loadedCodeMirror.closePercentBrace
+      );
     }
 
     // Create the code editor
@@ -559,7 +575,10 @@ export class HaCodeEditor extends ReactiveElement {
   };
 
   private _renderInfo = (completion: Completion): CompletionInfo => {
-    const key = completion.label;
+    const key =
+      typeof completion.apply === "string"
+        ? completion.apply
+        : completion.label;
     const context = getEntityContext(
       this.hass!.states[key],
       this.hass!.entities,
@@ -620,10 +639,62 @@ export class HaCodeEditor extends ReactiveElement {
     return completionInfo;
   };
 
+  private _renderAttributeInfo = (
+    entityId: string,
+    attribute: string
+  ): CompletionInfo | null => {
+    if (!this.hass) return null;
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj) return null;
+
+    const translatedName = this.hass.formatEntityAttributeName(
+      stateObj,
+      attribute
+    );
+    const formattedValue = this.hass.formatEntityAttributeValue(
+      stateObj,
+      attribute
+    );
+    const rawValue = stateObj.attributes[attribute];
+    const rawValueStr =
+      rawValue !== null && rawValue !== undefined
+        ? String(rawValue)
+        : undefined;
+
+    const completionItems: CompletionItem[] = [
+      {
+        label: translatedName,
+        value: formattedValue,
+        // Show raw value as sub-value only when it differs from the formatted one
+        subValue:
+          rawValueStr !== undefined && rawValueStr !== formattedValue
+            ? rawValueStr
+            : undefined,
+      },
+    ];
+
+    const completionInfo = document.createElement("div");
+    completionInfo.classList.add("completion-info");
+    render(
+      html`
+        <ha-code-editor-completion-items
+          .items=${completionItems}
+        ></ha-code-editor-completion-items>
+      `,
+      completionInfo
+    );
+
+    return completionInfo;
+  };
+
   private _getCompletionInfo = (
     completion: Completion
   ): CompletionInfo | Promise<CompletionInfo> | null => {
-    if (this.hass && completion.label in this.hass.states) {
+    if (
+      this.hass &&
+      typeof completion.apply === "string" &&
+      completion.apply in this.hass.states
+    ) {
       return this._renderInfo(completion);
     }
 
@@ -631,6 +702,11 @@ export class HaCodeEditor extends ReactiveElement {
       return renderIcon(completion);
     }
 
+    // Attribute completions attach an info function directly on the object.
+    if (typeof completion.info === "function") {
+      return completion.info(completion);
+    }
+
     return null;
   };
 
@@ -778,16 +854,546 @@ export class HaCodeEditor extends ReactiveElement {
 
     const options = Object.keys(states).map((key) => ({
       type: "variable",
-      label: key,
+      label: states[key].attributes.friendly_name
+        ? `${states[key].attributes.friendly_name} ${key}` // label is used for searching, so include both name and entity_id here
+        : key,
+      displayLabel: key,
       detail: states[key].attributes.friendly_name,
+      apply: key,
     }));
 
     return options;
   });
 
+  // Map of HA Jinja function name → (arg index → JinjaArgType).
+  // Derived from the snippet definitions in jinja_ha_completions.ts.
+  private get _jinjaFunctionArgTypes() {
+    return this._loadedCodeMirror!.JINJA_FUNCTION_ARG_TYPES;
+  }
+
+  // The accessible properties on TemplateStateBase (from HA core source).
+  // These are valid completions at `states.<domain>.<entity>.___`.
+  private static readonly _STATE_FIELDS: string[] = [
+    "state",
+    "attributes",
+    "last_changed",
+    "last_updated",
+    "context",
+    "domain",
+    "object_id",
+    "name",
+    "entity_id",
+    "state_with_unit",
+  ];
+
+  /**
+   * Handles `states.<domain>.<entity>.<field>.<attr>` dot-notation completions.
+   *
+   * Walks the MemberExpression chain in the Jinja syntax tree rooted at the
+   * `states` VariableName and offers completions depending on depth:
+   *   - `states.`           → all domains
+   *   - `states.<d>.`       → all entity object_ids for that domain
+   *   - `states.<d>.<e>.`   → fixed state fields
+   *   - `states.<d>.<e>.attributes.` → attribute names from hass.states
+   *
+   * Returns undefined to fall through when the cursor is not inside a
+   * `states.` chain; returns null/CompletionResult to short-circuit.
+   */
+  private _statesDotNotationCompletions(
+    context: CompletionContext
+  ): CompletionResult | null | undefined {
+    if (!this.hass) return undefined;
+
+    const { state: editorState, pos } = context;
+    const tree = this._loadedCodeMirror!.syntaxTree(editorState);
+    const node = tree.resolveInner(pos, -1);
+
+    // We act on two cursor positions:
+    //   (a) cursor is ON a PropertyName node   → partially typed identifier
+    //   (b) cursor is on/just-after a "." node → right after the dot
+    // In both cases the parent is a MemberExpression.
+    const memberNode = node.parent;
+    // "from" for the completion result (start of what the user is currently typing)
+    let completionFrom = pos;
+
+    if (
+      node.name === "PropertyName" &&
+      memberNode?.name === "MemberExpression"
+    ) {
+      // Cursor is on a PropertyName — replace from start of that name.
+      completionFrom = node.from;
+    } else if (node.name === "." && memberNode?.name === "MemberExpression") {
+      // Cursor just after "." — insert from current position.
+      completionFrom = pos;
+    } else {
+      return undefined;
+    }
+
+    // Walk up the MemberExpression chain to collect property segments and
+    // find the root VariableName.
+    //
+    // Each MemberExpression has the shape:  <object> "." <PropertyName>
+    // so the last PropertyName in the chain is the one directly under the
+    // outermost member expression.  We walk *up* to find the root, collecting
+    // each intermediate PropertyName text along the way.
+    //
+    // Example for  states.light.living_room.attributes  at cursor after the
+    // last dot:
+    //   MemberExpression          <- memberNode (cursor's parent)
+    //     MemberExpression        <- depth 3  (states.light.living_room)
+    //       MemberExpression      <- depth 2  (states.light)
+    //         VariableName "states"
+    //         "."
+    //         PropertyName "light"
+    //       "."
+    //       PropertyName "living_room"
+    //     "."
+    //     (no PropertyName yet — cursor is right here)
+
+    // Collect the segments bottom-up (innermost first).
+    const segments: string[] = [];
+    let cur = memberNode; // the MemberExpression directly containing the cursor
+
+    // If cursor is on a PropertyName, that is part of *this* MemberExpression;
+    // skip it — we don't want to include what the user is currently typing.
+    // We want the segments that lead *up to* the current position.
+
+    // Walk up through parent MemberExpressions collecting PropertyName texts.
+    // Each MemberExpression's last PropertyName child is the segment for that
+    // level — but we skip the innermost one if the cursor is on a PropertyName
+    // (that's the partial input, not a committed segment).
+    let skipFirst = node.name === "PropertyName";
+
+    while (cur?.name === "MemberExpression") {
+      // The PropertyName child of this MemberExpression is its rightmost segment.
+      let propChild = cur.lastChild;
+      while (propChild && propChild.name !== "PropertyName") {
+        propChild = propChild.prevSibling;
+      }
+      if (propChild) {
+        if (skipFirst) {
+          skipFirst = false;
+        } else {
+          segments.unshift(
+            editorState.doc.sliceString(propChild.from, propChild.to)
+          );
+        }
+      }
+      // The object side is the first child of the MemberExpression
+      const objectChild = cur.firstChild;
+      if (!objectChild) break;
+      if (objectChild.name === "VariableName") {
+        // Check if this is the root "states" variable
+        const varName = editorState.doc.sliceString(
+          objectChild.from,
+          objectChild.to
+        );
+        if (varName !== "states") return undefined; // not a states chain
+        break; // found root
+      }
+      if (objectChild.name !== "MemberExpression") return undefined;
+      cur = objectChild;
+    }
+
+    // Verify we actually found a root VariableName "states" (cur must be a
+    // MemberExpression whose first child is VariableName "states").
+    const rootObject = cur?.firstChild;
+    if (!rootObject || rootObject.name !== "VariableName") return undefined;
+    if (
+      editorState.doc.sliceString(rootObject.from, rootObject.to) !== "states"
+    ) {
+      return undefined;
+    }
+
+    const depth = segments.length; // number of segments already committed
+
+    switch (depth) {
+      case 0: {
+        // states.   → offer all unique domains
+        const domains = [
+          ...new Set(
+            Object.keys(this.hass.states).map((id) => id.split(".")[0])
+          ),
+        ].sort();
+        return {
+          from: completionFrom,
+          options: domains.map((d) => ({ label: d, type: "variable" })),
+          validFor: /^\w*$/,
+        };
+      }
+      case 1: {
+        // states.<domain>.   → offer entity object_ids for that domain
+        const [domain] = segments;
+        const entities = Object.keys(this.hass.states)
+          .filter((id) => id.startsWith(`${domain}.`))
+          .map((id) => id.split(".").slice(1).join("."));
+        if (!entities.length) return { from: completionFrom, options: [] };
+        return {
+          from: completionFrom,
+          options: entities.map((e) => ({ label: e, type: "variable" })),
+          validFor: /^\w*$/,
+        };
+      }
+      case 2: {
+        // states.<domain>.<entity>.   → fixed state fields
+        return {
+          from: completionFrom,
+          options: HaCodeEditor._STATE_FIELDS.map((f) => ({
+            label: f,
+            type: "property",
+          })),
+          validFor: /^\w*$/,
+        };
+      }
+      case 3: {
+        // states.<domain>.<entity>.<field>.
+        const [domain, entity, field] = segments;
+        if (field !== "attributes") {
+          // No further completions for non-attribute fields
+          return { from: completionFrom, options: [] };
+        }
+        // Offer attribute names from the entity's state object
+        const entityId = `${domain}.${entity}`;
+        const entityState = this.hass.states[entityId];
+        if (!entityState) return { from: completionFrom, options: [] };
+        const attrNames = Object.keys(entityState.attributes).sort();
+        return {
+          from: completionFrom,
+          options: attrNames.map((a) => ({ label: a, type: "property" })),
+          validFor: /^\w*$/,
+        };
+      }
+      default:
+        // Depth ≥ 4 — no further completions
+        return { from: completionFrom, options: [] };
+    }
+  }
+
+  /**
+   * Returns completions when inside a quoted Jinja string argument of a known
+   * HA function, or inside a states['...'] subscript.
+   * Returns undefined to signal the caller should fall through to other logic.
+   */
+  private _jinjaStringArgCompletions(
+    context: CompletionContext
+  ): CompletionResult | null | undefined {
+    const { state: editorState, pos } = context;
+    const node = this._loadedCodeMirror!.syntaxTree(editorState).resolveInner(
+      pos,
+      -1
+    );
+
+    // Must be inside a StringLiteral
+    if (node.name !== "StringLiteral") return undefined;
+
+    // Case 1: states['entity_id'] — StringLiteral inside SubscriptExpression
+    // whose object is the `states` variable.
+    const subscript = node.parent;
+    if (subscript?.name === "SubscriptExpression") {
+      const obj = subscript.firstChild;
+      if (obj && editorState.doc.sliceString(obj.from, obj.to) === "states") {
+        return this._completionResultForArgType("entity_id", node);
+      }
+    }
+
+    // Case 2: string argument of a known HA function call.
+    const argList = node.parent;
+    if (argList?.name !== "ArgumentList") return undefined;
+
+    const callExpr = argList.parent;
+    if (callExpr?.name !== "CallExpression") return undefined;
+
+    const fnNode = callExpr.firstChild;
+    if (!fnNode) return undefined;
+
+    const fnName = editorState.doc.sliceString(fnNode.from, fnNode.to);
+    const argTypeMap = this._jinjaFunctionArgTypes.get(fnName);
+    if (!argTypeMap) return undefined;
+
+    // Walk ArgumentList children to find the zero-based index of this node.
+    // Children are: "(" arg0 "," arg1 "," arg2 ... ")" — skip punctuation.
+    let argIndex = 0;
+    let child = argList.firstChild?.nextSibling; // skip opening "("
+    while (child) {
+      if (child.name === ")") break;
+      if (child.name !== ",") {
+        if (child.from === node.from) break;
+        argIndex++;
+      }
+      child = child.nextSibling;
+    }
+
+    const argType = argTypeMap.get(argIndex);
+    if (!argType) return undefined;
+
+    // For attribute completions, try to resolve the entity_id from the
+    // sibling argument whose type is entity_id in the same call.
+    if (argType === "attribute") {
+      const entityId = this._entityIdFromSiblingArg(
+        argList,
+        argTypeMap,
+        editorState
+      );
+      return this._attributeCompletionResult(node, entityId);
+    }
+
+    return this._completionResultForArgType(argType, node);
+  }
+
+  /**
+   * Scans the ArgumentList for the first argument whose type is `entity_id`
+   * and returns the literal string value it contains, or null if not found /
+   * not a plain string literal.
+   */
+  private _entityIdFromSiblingArg(
+    argList: SyntaxNode,
+    argTypeMap: Map<number, JinjaArgType>,
+    editorState: CompletionContext["state"]
+  ): string | null {
+    // Find the index of the entity_id argument in the type map.
+    let entityArgIndex: number | undefined;
+    for (const [idx, type] of argTypeMap) {
+      if (type === "entity_id") {
+        entityArgIndex = idx;
+        break;
+      }
+    }
+    if (entityArgIndex === undefined) return null;
+
+    // Walk the ArgumentList to find that argument node.
+    let idx = 0;
+    let child = argList.firstChild?.nextSibling; // skip "("
+    while (child) {
+      if (child.name === ")") break;
+      if (child.name !== ",") {
+        if (idx === entityArgIndex) {
+          // child should be a StringLiteral — extract its content without quotes.
+          if (child.name !== "StringLiteral") return null;
+          const raw = editorState.doc.sliceString(child.from, child.to);
+          // Strip surrounding quote character (single or double).
+          return raw.slice(1, -1);
+        }
+        idx++;
+      }
+      child = child.nextSibling;
+    }
+    return null;
+  }
+
+  /**
+   * Dispatches to the appropriate completion result builder for the given
+   * argument type. Add new cases here as completion sources are implemented.
+   *
+   * Always returns a CompletionResult (never null) so that other completion
+   * sources are suppressed when the cursor is inside a known typed string arg.
+   * An empty options list is returned when no completions are available.
+   */
+  private _completionResultForArgType(
+    argType: JinjaArgType,
+    stringNode: { from: number; to: number }
+  ): CompletionResult {
+    const from = stringNode.from + 1;
+    const empty: CompletionResult = { from, options: [] };
+    switch (argType) {
+      case "entity_id":
+        return this._entityCompletionResult(stringNode) ?? empty;
+      case "device_id":
+        return this._deviceCompletionResult(stringNode) ?? empty;
+      case "area_id":
+        return this._areaCompletionResult(stringNode) ?? empty;
+      case "floor_id":
+        return this._floorCompletionResult(stringNode) ?? empty;
+      case "label_id":
+        return this._labelCompletionResult(stringNode) ?? empty;
+      case "attribute":
+        // No entity context available — return empty to suppress other sources.
+        return empty;
+      default:
+        return empty;
+    }
+  }
+
+  /**
+   * Build a CompletionResult for attribute names of a specific entity.
+   * `entityId` may be null when the sibling entity arg is not yet filled in,
+   * in which case an empty result is returned (other sources stay suppressed).
+   */
+  private _attributeCompletionResult(
+    stringNode: { from: number; to: number },
+    entityId: string | null
+  ): CompletionResult {
+    const from = stringNode.from + 1;
+    const empty: CompletionResult = { from, options: [] };
+    if (!entityId || !this.hass) return empty;
+    const entityState = this.hass.states[entityId];
+    if (!entityState) return empty;
+    const attrs = Object.keys(entityState.attributes).sort();
+    if (!attrs.length) return empty;
+    return {
+      from,
+      options: attrs.map((a) => ({
+        label: a,
+        type: "property",
+        info: () => this._renderAttributeInfo(entityId, a),
+      })),
+      validFor: /^[\w.]*$/,
+    };
+  }
+
+  /** Build a CompletionResult for entity IDs, with `from` set inside the quotes. */
+  private _entityCompletionResult(stringNode: {
+    from: number;
+    to: number;
+  }): CompletionResult | null {
+    const states = this._getStates(this.hass!.states);
+    if (!states?.length) return null;
+    // from is stringNode.from + 1 to skip the opening quote character.
+    const from = stringNode.from + 1;
+    // Always offer completions inside a known entity-string context, including
+    // immediately after the opening quote (e.g. after snippet insertion).
+    return {
+      from,
+      options: states,
+      validFor: /^[\w.]*$/,
+    };
+  }
+
+  private _getDevices = memoizeOne(
+    (devices: HomeAssistant["devices"]): Completion[] =>
+      Object.values(devices)
+        .filter((device) => !device.disabled_by)
+        .map((device) => {
+          const name = computeDeviceName(device);
+          return {
+            type: "variable",
+            label: `${name} ${device.id}`,
+            displayLabel: name ?? device.id,
+            detail: device.id,
+            apply: device.id,
+          };
+        })
+  );
+
+  /** Build a CompletionResult for device IDs, with `from` set inside the quotes. */
+  private _deviceCompletionResult(stringNode: {
+    from: number;
+    to: number;
+  }): CompletionResult | null {
+    if (!this.hass?.devices) return null;
+    const devices = this._getDevices(this.hass.devices);
+    if (!devices.length) return null;
+    return {
+      from: stringNode.from + 1,
+      options: devices,
+      validFor: /^[^"]*$/,
+    };
+  }
+
+  private _getAreas = memoizeOne(
+    (areas: HomeAssistant["areas"]): Completion[] =>
+      Object.values(areas).map((area) => {
+        const name = computeAreaName(area) ?? area.area_id;
+        return {
+          type: "variable",
+          label: `${name} ${area.area_id}`, // label is used for searching, so include both name and ID here
+          displayLabel: name,
+          detail: area.area_id,
+          apply: area.area_id,
+        };
+      })
+  );
+
+  /** Build a CompletionResult for area IDs, with `from` set inside the quotes. */
+  private _areaCompletionResult(stringNode: {
+    from: number;
+    to: number;
+  }): CompletionResult | null {
+    if (!this.hass?.areas) return null;
+    const areas = this._getAreas(this.hass.areas);
+    if (!areas.length) return null;
+    return {
+      from: stringNode.from + 1,
+      options: areas,
+      validFor: /^[^"]*$/,
+    };
+  }
+
+  private _getFloors = memoizeOne(
+    (floors: HomeAssistant["floors"]): Completion[] =>
+      Object.values(floors).map((floor) => {
+        const name = computeFloorName(floor) ?? floor.floor_id;
+        return {
+          type: "variable",
+          label: `${name} ${floor.floor_id}`, // label is used for searching, so include both name and ID here
+          displayLabel: name,
+          detail: floor.floor_id,
+          apply: floor.floor_id,
+        };
+      })
+  );
+
+  /** Build a CompletionResult for floor IDs, with `from` set inside the quotes. */
+  private _floorCompletionResult(stringNode: {
+    from: number;
+    to: number;
+  }): CompletionResult | null {
+    if (!this.hass?.floors) return null;
+    const floors = this._getFloors(this.hass.floors);
+    if (!floors.length) return null;
+    return {
+      from: stringNode.from + 1,
+      options: floors,
+      validFor: /^[^"]*$/,
+    };
+  }
+
+  private _getLabels = memoizeOne(
+    (labels: LabelRegistryEntry[]): Completion[] =>
+      labels.map((label) => {
+        const name = label.name.trim() || label.label_id;
+        return {
+          type: "variable",
+          label: `${name} ${label.label_id}`, // label is used for searching, so include both name and ID here
+          displayLabel: name,
+          detail: label.label_id,
+          apply: label.label_id,
+        };
+      })
+  );
+
+  /** Build a CompletionResult for label IDs, with `from` set inside the quotes. */
+  private _labelCompletionResult(stringNode: {
+    from: number;
+    to: number;
+  }): CompletionResult | null {
+    if (!this._labels?.length) return null;
+    const labels = this._getLabels(this._labels);
+    if (!labels.length) return null;
+    return {
+      from: stringNode.from + 1,
+      options: labels,
+      validFor: /^[^"]*$/,
+    };
+  }
+
   private _entityCompletions(
     context: CompletionContext
   ): CompletionResult | null | Promise<CompletionResult | null> {
+    // Jinja context: offer entity completions inside string arguments of
+    // entity-accepting functions, and inside states['...'] subscripts.
+    if (this.mode === "yaml" || this.mode === "jinja2") {
+      // First try states.<domain>.<entity>.<field> dot-notation completions.
+      const statesDotResult = this._statesDotNotationCompletions(context);
+      if (statesDotResult !== undefined) {
+        return statesDotResult;
+      }
+
+      const jinjaEntityResult = this._jinjaStringArgCompletions(context);
+      if (jinjaEntityResult !== undefined) {
+        return jinjaEntityResult;
+      }
+    }
+
     // Check for YAML mode and entity-related fields
     if (this.mode === "yaml") {
       const currentLine = context.state.doc.lineAt(context.pos);
@@ -819,8 +1425,16 @@ export class HaCodeEditor extends ReactiveElement {
       const listItemMatch = lineText.match(/^\s*-\s+/);
 
       if (entityFieldMatch) {
-        // Calculate the position after the entity field
+        // Calculate the position after the entity field key+colon.
+        // The regex consumes trailing spaces too, so afterField lands right
+        // where the entity ID should start. If the cursor is sitting directly
+        // after the colon with no space (e.g. "entity:|"), we need to insert
+        // a space before the entity ID, so we shift `from` back to the colon
+        // and use an `apply` that prepends the space.
         const afterField = currentLine.from + entityFieldMatch[0].length;
+        const needsSpace =
+          afterField > 0 &&
+          context.state.doc.sliceString(afterField - 1, afterField) === ":";
 
         // If cursor is after the entity field, show all entities
         if (context.pos >= afterField) {
@@ -842,9 +1456,13 @@ export class HaCodeEditor extends ReactiveElement {
               )
             : states;
 
+          const options = needsSpace
+            ? filteredStates.map((s) => ({ ...s, apply: ` ${s.label}` }))
+            : filteredStates;
+
           return {
             from: afterField,
-            options: filteredStates,
+            options,
             validFor: /^[a-z_]*\.?\w*$/,
           };
         }
@@ -919,7 +1537,13 @@ export class HaCodeEditor extends ReactiveElement {
       }
     }
 
-    // Original entity completion logic for non-YAML or when not in entity_id field
+    // Original entity completion logic for non-YAML or when not in entity_id field.
+    // Not used in jinja2 mode — Jinja string-arg completions are handled above via
+    // _jinjaStringArgCompletions() which is context-aware.
+    if (this.mode === "jinja2") {
+      return null;
+    }
+
     const entityWord = context.matchBefore(/[a-z_]{3,}\.\w*/);
 
     if (
@@ -989,17 +1613,6 @@ export class HaCodeEditor extends ReactiveElement {
     fireEvent(this, "value-changed", { value: this._value });
   };
 
-  private _getFoldingExtensions = (): Extension => {
-    if (this.mode === "yaml") {
-      return [
-        this._loadedCodeMirror!.foldGutter(),
-        this._loadedCodeMirror!.foldingOnIndent,
-      ];
-    }
-
-    return [];
-  };
-
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,

src/components/ha-color-picker.ts

@@ -7,7 +7,7 @@ import memoizeOne from "memoize-one";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeKeys } from "../common/translations/localize";
-import { localizeContext } from "../data/context";
+import { internationalizationContext } from "../data/context";
 import type { UiColorExtraOption } from "../data/selector";
 import type { ValueChangedEvent } from "../types";
 import "./ha-combo-box-item";
@@ -55,8 +55,8 @@ export class HaColorPicker extends LitElement {
   @property({ type: Boolean }) public required = false;
 
   @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: ContextType<typeof localizeContext>;
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
 
   render() {
     const effectiveValue = this.value ?? this.defaultColor ?? "";
@@ -73,7 +73,7 @@ export class HaColorPicker extends LitElement {
         .rowRenderer=${this._rowRenderer}
         .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
-        .notFoundLabel=${this.localize?.(
+        .notFoundLabel=${this._i18n?.localize?.(
           "ui.components.color-picker.no_colors_found"
         )}
         .getAdditionalItems=${this._getAdditionalItems}
@@ -103,7 +103,7 @@ export class HaColorPicker extends LitElement {
       {
         id: searchString,
         primary:
-          this.localize?.("ui.components.color-picker.custom_color") ||
+          this._i18n?.localize?.("ui.components.color-picker.custom_color") ||
           "Custom color",
         secondary: searchString,
       },
@@ -130,14 +130,15 @@ export class HaColorPicker extends LitElement {
       const items: PickerComboBoxItem[] = [];
 
       const defaultSuffix =
-        this.localize?.("ui.components.color-picker.default") || "Default";
+        this._i18n?.localize?.("ui.components.color-picker.default") ||
+        "Default";
 
       const addDefaultSuffix = (label: string, isDefault: boolean) =>
         isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
 
       if (includeNone) {
         const noneLabel =
-          this.localize?.("ui.components.color-picker.none") || "None";
+          this._i18n?.localize?.("ui.components.color-picker.none") || "None";
         items.push({
           id: "none",
           primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
@@ -147,7 +148,7 @@ export class HaColorPicker extends LitElement {
 
       if (includeState) {
         const stateLabel =
-          this.localize?.("ui.components.color-picker.state") || "State";
+          this._i18n?.localize?.("ui.components.color-picker.state") || "State";
         items.push({
           id: "state",
           primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
@@ -170,7 +171,7 @@ export class HaColorPicker extends LitElement {
 
       Array.from(THEME_COLORS).forEach((color) => {
         const themeLabel =
-          this.localize?.(
+          this._i18n?.localize?.(
             `ui.components.color-picker.colors.${color}` as LocalizeKeys
           ) || color;
         items.push({
@@ -227,7 +228,7 @@ export class HaColorPicker extends LitElement {
       return html`
         <ha-svg-icon slot="start" .path=${mdiInvertColorsOff}></ha-svg-icon>
         <span slot="headline">
-          ${this.localize?.("ui.components.color-picker.none") || "None"}
+          ${this._i18n?.localize?.("ui.components.color-picker.none") || "None"}
         </span>
       `;
     }
@@ -235,7 +236,8 @@ export class HaColorPicker extends LitElement {
       return html`
         <ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>
         <span slot="headline">
-          ${this.localize?.("ui.components.color-picker.state") || "State"}
+          ${this._i18n?.localize?.("ui.components.color-picker.state") ||
+          "State"}
         </span>
       `;
     }
@@ -243,7 +245,7 @@ export class HaColorPicker extends LitElement {
     const extraOption = this.extraOptions?.find((o) => o.value === value);
     const label =
       extraOption?.label ||
-      this.localize?.(
+      this._i18n?.localize?.(
         `ui.components.color-picker.colors.${value}` as LocalizeKeys
       ) ||
       value;

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

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

src/components/ha-control-switch.ts

@@ -116,11 +116,29 @@ export class HaControlSwitch extends LitElement {
   }
 
   private _keydown(ev: any) {
-    if (ev.key !== "Enter" && ev.key !== " ") {
+    const supportedKeys = ["Enter", " "];
+    if (this.vertical) {
+      supportedKeys.push("ArrowUp", "ArrowDown");
+    } else {
+      supportedKeys.push("ArrowLeft", "ArrowRight");
+    }
+    if (!supportedKeys.includes(ev.key)) {
       return;
     }
     ev.preventDefault();
-    this._toggle();
+
+    if (
+      ev.key === "Enter" ||
+      ev.key === " " ||
+      (this.vertical &&
+        ((this.checked && ev.key === "ArrowDown") ||
+          (!this.checked && ev.key === "ArrowUp"))) ||
+      (!this.vertical &&
+        ((!this.checked && ev.key === "ArrowRight") ||
+          (this.checked && ev.key === "ArrowLeft")))
+    ) {
+      this._toggle();
+    }
   }
 
   protected render(): TemplateResult {
@@ -132,7 +150,7 @@ export class HaControlSwitch extends LitElement {
         aria-checked=${this.checked ? "true" : "false"}
         aria-label=${ifDefined(this.label)}
         role="switch"
-        tabindex="0"
+        tabindex=${ifDefined(this.disabled ? undefined : "0")}
         ?checked=${this.checked}
         ?disabled=${this.disabled}
       >
@@ -156,6 +174,7 @@ export class HaControlSwitch extends LitElement {
       --control-switch-on-color: var(--primary-color);
       --control-switch-off-color: var(--disabled-color);
       --control-switch-background-opacity: 0.2;
+      --control-switch-hover-background-opacity: 0.4;
       --control-switch-thickness: 40px;
       --control-switch-border-radius: var(--ha-border-radius-lg);
       --control-switch-padding: 4px;
@@ -167,10 +186,10 @@ export class HaControlSwitch extends LitElement {
       transition: box-shadow 180ms ease-in-out;
       -webkit-tap-highlight-color: transparent;
     }
-    .switch:focus-visible {
+    .switch:not([disabled]):focus-visible {
       box-shadow: 0 0 0 2px var(--control-switch-off-color);
     }
-    .switch[checked]:focus-visible {
+    .switch[checked]:not([disabled]):focus-visible {
       box-shadow: 0 0 0 2px var(--control-switch-on-color);
     }
     .switch {
@@ -199,6 +218,10 @@ export class HaControlSwitch extends LitElement {
       transition: background-color 180ms ease-in-out;
       opacity: var(--control-switch-background-opacity);
     }
+    .switch:not([disabled]):focus-visible .background,
+    .switch:not([disabled]):hover .background {
+      opacity: var(--control-switch-hover-background-opacity);
+    }
     .switch .button {
       width: 50%;
       height: 100%;

src/components/ha-date-input.ts

@@ -123,6 +123,9 @@ export class HaDateInput extends LitElement {
   }
 
   static styles = css`
+    :host {
+      min-width: 0px;
+    }
     ha-svg-icon {
       color: var(--secondary-text-color);
     }

src/components/ha-dialog.ts

@@ -14,7 +14,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
 import { withViewTransition } from "../common/util/view-transition";
-import { localizeContext } from "../data/context";
+import { internationalizationContext } from "../data/context";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import "./ha-dialog-header";
@@ -123,13 +123,13 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
   @query(".body") public bodyContainer!: HTMLDivElement;
 
   @state()
-  @consume({ context: localizeContext, subscribe: true })
-  private localize!: ContextType<typeof localizeContext>;
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: ContextType<typeof internationalizationContext>;
 
   // disabled till iOS app fix the "focus_element" implementation
   // @state()
-  // @consume({ context: authContext, subscribe: true })
-  // private auth?: ContextType<typeof authContext>;
+  // @consume({ context: configContext, subscribe: true })
+  // private _hassConfig?: ContextType<typeof configContext>;
 
   @state()
   private _bodyScrolled = false;
@@ -176,7 +176,7 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
         @wa-after-hide=${this._handleAfterHide}
       >
         ${!this.withoutHeader
-          ? html` <slot name="header">
+          ? html`<slot name="header">
               <ha-dialog-header
                 .subtitlePosition=${this.headerSubtitlePosition}
                 .showBorder=${this._bodyScrolled}
@@ -184,7 +184,8 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
                 <slot name="headerNavigationIcon" slot="navigationIcon">
                   <ha-icon-button
                     data-dialog="close"
-                    .label=${this.localize?.("ui.common.close") ?? "Close"}
+                    .label=${this._i18n?.localize?.("ui.common.close") ??
+                    "Close"}
                     .path=${mdiClose}
                   ></ha-icon-button>
                 </slot>
@@ -222,13 +223,13 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
 
     requestAnimationFrame(() => {
       // disabled till iOS app fix the "focus_element" implementation
-      // if (this.auth?.external && isIosApp(this.auth.external)) {
+      // if (this._hassConfig?.auth.external && isIosApp(this._hassConfig.auth.external)) {
       //   const element = this.querySelector("[autofocus]");
       //   if (element !== null) {
       //     if (!element.id) {
       //       element.id = "ha-dialog-autofocus";
       //     }
-      //     this.auth.external.fireMessage({
+      //     this._hassConfig.auth.external.fireMessage({
       //       type: "focus_element",
       //       payload: {
       //         element_id: element.id,

src/components/ha-domain-icon.ts

@@ -1,19 +1,18 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import { configContext, connectionContext, uiContext } from "../data/context";
 import {
   DEFAULT_DOMAIN_ICON,
   domainIcon,
   FALLBACK_DOMAIN_ICONS,
 } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import "./ha-icon";
 
 @customElement("ha-domain-icon")
 export class HaDomainIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public domain?: string;
 
   @property({ attribute: false }) public deviceClass?: string;
@@ -25,6 +24,18 @@ 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: uiContext, subscribe: true })
+  private _hassUi?: ContextType<typeof uiContext>;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -34,12 +45,13 @@ export class HaDomainIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._hassConfig) {
       return this._renderFallback();
     }
 
     const icon = domainIcon(
-      this.hass,
+      this._connection.connection,
+      this._hassConfig.config,
       this.domain,
       this.deviceClass,
       this.state
@@ -65,9 +77,9 @@ export class HaDomainIcon extends LitElement {
         {
           domain: this.domain!,
           type: "icon",
-          darkOptimized: this.hass.themes?.darkMode,
+          darkOptimized: this._hassUi?.themes.darkMode,
         },
-        this.hass.auth.data.hassUrl
+        this._hassConfig?.auth.data.hassUrl
       );
       return html`
         <img

src/components/ha-fab.ts

@@ -1,60 +0,0 @@
-import { FabBase } from "@material/mwc-fab/mwc-fab-base";
-import { styles } from "@material/mwc-fab/mwc-fab.css";
-import { customElement } from "lit/decorators";
-import { css } from "lit";
-import { mainWindow } from "../common/dom/get_main_window";
-
-@customElement("ha-fab")
-export class HaFab extends FabBase {
-  protected firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
-  }
-
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --mdc-typography-button-text-transform: none;
-        --mdc-typography-button-font-size: var(--ha-font-size-l);
-        --mdc-typography-button-font-family: var(--ha-font-family-body);
-        --mdc-typography-button-font-weight: var(--ha-font-weight-medium);
-      }
-      :host .mdc-fab--extended {
-        border-radius: var(
-          --ha-button-border-radius,
-          var(--ha-border-radius-pill)
-        );
-      }
-      :host .mdc-fab.mdc-fab--extended .ripple {
-        border-radius: var(
-          --ha-button-border-radius,
-          var(--ha-border-radius-pill)
-        );
-      }
-      :host .mdc-fab--extended .mdc-fab__icon {
-        margin-inline-start: -8px;
-        margin-inline-end: 12px;
-        direction: var(--direction);
-      }
-      :disabled {
-        --mdc-theme-secondary: var(--disabled-text-color);
-        cursor: not-allowed !important;
-      }
-    `,
-    // safari workaround - must be explicit
-    mainWindow.document.dir === "rtl"
-      ? css`
-          :host .mdc-fab--extended .mdc-fab__icon {
-            direction: rtl;
-          }
-        `
-      : css``,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-fab": HaFab;
-  }
-}

src/components/ha-file-upload.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiDelete, mdiFileUpload } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -12,6 +11,7 @@ import type { HomeAssistant } from "../types";
 import { bytesToString } from "../util/bytes-to-string";
 import "./ha-button";
 import "./ha-icon-button";
+import "./progress/ha-progress-bar";
 
 declare global {
   interface HASSDomEvents {
@@ -100,10 +100,11 @@ export class HaFileUpload extends LitElement {
                   </div>`
                 : nothing}
             </div>
-            <mwc-linear-progress
+            <ha-progress-bar
               .indeterminate=${!this.progress}
-              .progress=${this.progress ? this.progress / 100 : undefined}
-            ></mwc-linear-progress>
+              .value=${this.progress}
+              loading
+            ></ha-progress-bar>
           </div>`
         : html`<label
             for=${this.value ? "" : "input"}
@@ -319,7 +320,7 @@ export class HaFileUpload extends LitElement {
       --mdc-button-outline-color: var(--primary-color);
       --ha-icon-button-size: 24px;
     }
-    mwc-linear-progress {
+    ha-progress-bar {
       width: 100%;
       padding: 8px 32px;
       box-sizing: border-box;

src/components/ha-filter-devices.ts

@@ -84,6 +84,7 @@ export class HaFilterDevices extends LitElement {
                   .keyFunction=${this._keyFunction}
                   .renderItem=${this._renderItem}
                   @click=${this._handleItemClick}
+                  @keydown=${this._handleItemKeydown}
                 >
                 </lit-virtualizer>
               </ha-list>`
@@ -98,12 +99,24 @@ export class HaFilterDevices extends LitElement {
     !device
       ? nothing
       : html`<ha-check-list-item
+          tabindex="0"
           .value=${device.id}
           .selected=${this.value?.includes(device.id) ?? false}
         >
-          ${computeDeviceNameDisplay(device, this.hass)}
+          ${computeDeviceNameDisplay(
+            device,
+            this.hass.localize,
+            this.hass.states
+          )}
         </ha-check-list-item>`;
 
+  private _handleItemKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._handleItemClick(ev);
+    }
+  }
+
   private _handleItemClick(ev) {
     const listItem = ev.target.closest("ha-check-list-item");
     const value = listItem?.value;
@@ -151,14 +164,18 @@ export class HaFilterDevices extends LitElement {
         .filter(
           (device) =>
             !filter ||
-            computeDeviceNameDisplay(device, this.hass)
+            computeDeviceNameDisplay(
+              device,
+              this.hass.localize,
+              this.hass.states
+            )
               .toLowerCase()
               .includes(filter)
         )
         .sort((a, b) =>
           stringCompare(
-            computeDeviceNameDisplay(a, this.hass),
-            computeDeviceNameDisplay(b, this.hass),
+            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
+            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
             this.hass.locale.language
           )
         );

src/components/ha-filter-domains.ts

@@ -58,7 +58,7 @@ export class HaFilterDomains extends LitElement {
               </ha-input-search>
               <ha-list
                 class="ha-scrollbar"
-                @click=${this._handleItemClick}
+                @selected=${this._handleItemSelected}
                 multi
               >
                 ${repeat(
@@ -72,7 +72,6 @@ export class HaFilterDomains extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
-                        .hass=${this.hass}
                         .domain=${domain}
                         brand-fallback
                       ></ha-domain-icon>
@@ -127,19 +126,16 @@ export class HaFilterDomains extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  private _handleItemClick(ev) {
-    const listItem = ev.target.closest("ha-check-list-item");
-    const value = listItem?.value;
-    if (!value) {
-      return;
+  private _handleItemSelected(
+    ev: CustomEvent<{ diff: { added: number[]; removed: number[] } }>
+  ) {
+    const domains = this._domains(this.hass.states, this._filter);
+    if (ev.detail.diff.added.length) {
+      this.value = [...(this.value || []), domains[ev.detail.diff.added[0]]];
+    } else if (ev.detail.diff.removed.length) {
+      const removedDomain = domains[ev.detail.diff.removed[0]];
+      this.value = this.value?.filter((value) => value !== removedDomain);
     }
-    if (this.value?.includes(value)) {
-      this.value = this.value?.filter((val) => val !== value);
-    } else {
-      this.value = [...(this.value || []), value];
-    }
-
-    listItem.selected = this.value.includes(value);
 
     fireEvent(this, "data-table-filter-changed", {
       value: this.value,

src/components/ha-filter-entities.ts

@@ -88,6 +88,7 @@ export class HaFilterEntities extends LitElement {
                   .keyFunction=${this._keyFunction}
                   .renderItem=${this._renderItem}
                   @click=${this._handleItemClick}
+                  @keydown=${this._handleItemKeydown}
                 >
                 </lit-virtualizer>
               </ha-list>
@@ -116,6 +117,7 @@ export class HaFilterEntities extends LitElement {
     !entity
       ? nothing
       : html`<ha-check-list-item
+          tabindex="0"
           .value=${entity.entity_id}
           .selected=${this.value?.includes(entity.entity_id) ?? false}
           graphic="icon"
@@ -128,6 +130,13 @@ export class HaFilterEntities extends LitElement {
           ${computeStateName(entity)}
         </ha-check-list-item>`;
 
+  private _handleItemKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._handleItemClick(ev);
+    }
+  }
+
   private _handleItemClick(ev) {
     const listItem = ev.target.closest("ha-check-list-item");
     const value = listItem?.value;

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

@@ -88,6 +88,7 @@ export class HaFilterFloorAreas extends LitElement {
                       ) || false}
                       graphic="icon"
                       @request-selected=${this._handleItemClick}
+                      @keydown=${this._handleItemKeydown}
                     >
                       <ha-floor-icon
                         slot="graphic"
@@ -125,6 +126,7 @@ export class HaFilterFloorAreas extends LitElement {
         .type=${"areas"}
         graphic="icon"
         @request-selected=${this._handleItemClick}
+        @keydown=${this._handleItemKeydown}
         class=${classMap({
           rtl: computeRTL(this.hass),
           floor: hasFloor,
@@ -149,6 +151,13 @@ export class HaFilterFloorAreas extends LitElement {
     `;
   }
 
+  private _handleItemKeydown(ev) {
+    if (ev.key === " " || ev.key === "Enter") {
+      ev.preventDefault();
+      this._handleItemClick(ev);
+    }
+  }
+
   private _handleItemClick(ev) {
     ev.stopPropagation();
 

src/components/ha-filter-integrations.ts

@@ -61,7 +61,7 @@ export class HaFilterIntegrations extends LitElement {
               </ha-input-search>
               <ha-list
                 class="ha-scrollbar"
-                @click=${this._handleItemClick}
+                @selected=${this._itemSelected}
                 multi
               >
                 ${repeat(
@@ -82,7 +82,6 @@ export class HaFilterIntegrations extends LitElement {
                     >
                       <ha-domain-icon
                         slot="graphic"
-                        .hass=${this.hass}
                         .domain=${integration.domain}
                         brand-fallback
                       ></ha-domain-icon>
@@ -148,18 +147,25 @@ export class HaFilterIntegrations extends LitElement {
         )
   );
 
-  private _handleItemClick(ev) {
-    const listItem = ev.target.closest("ha-check-list-item");
-    const value = listItem?.value;
-    if (!value) {
-      return;
+  private _itemSelected(
+    ev: CustomEvent<{ diff: { added: number[]; removed: number[] } }>
+  ) {
+    const integrations = this._integrations(
+      this.hass.localize,
+      this._manifests!,
+      this._filter,
+      this.value
+    );
+
+    if (ev.detail.diff.added.length) {
+      this.value = [
+        ...(this.value || []),
+        integrations[ev.detail.diff.added[0]].domain,
+      ];
+    } else if (ev.detail.diff.removed.length) {
+      const removedDomain = integrations[ev.detail.diff.removed[0]].domain;
+      this.value = this.value?.filter((val) => val !== removedDomain);
     }
-    if (this.value?.includes(value)) {
-      this.value = this.value?.filter((val) => val !== value);
-    } else {
-      this.value = [...(this.value || []), value];
-    }
-    listItem.selected = this.value?.includes(value);
 
     fireEvent(this, "data-table-filter-changed", {
       value: this.value,

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

@@ -79,6 +79,7 @@ export const computeInitialHaFormData = (
         "attribute" in selector ||
         "file" in selector ||
         "icon" in selector ||
+        "serial" in selector ||
         "template" in selector ||
         "text" in selector ||
         "theme" in selector ||

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

@@ -1,15 +1,14 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-checkbox";
+import type { HaCheckbox } from "../ha-checkbox";
 import type {
   HaFormBooleanData,
   HaFormBooleanSchema,
   HaFormElement,
 } from "./types";
-import type { HaCheckbox } from "../ha-checkbox";
-import "../ha-checkbox";
-import "../ha-formfield";
 
 @customElement("ha-form-boolean")
 export class HaFormBoolean extends LitElement implements HaFormElement {
@@ -33,19 +32,14 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-formfield .label=${this.label}>
-        <ha-checkbox
-          .checked=${this.data}
-          .disabled=${this.disabled}
-          @change=${this._valueChanged}
-        ></ha-checkbox>
-        <span slot="label">
-          <p class="primary">${this.label}</p>
-          ${this.helper
-            ? html`<p class="secondary">${this.helper}</p>`
-            : nothing}
-        </span>
-      </ha-formfield>
+      <ha-checkbox
+        .checked=${this.data}
+        .disabled=${this.disabled}
+        @change=${this._valueChanged}
+        .hint=${this.helper}
+      >
+        ${this.label}
+      </ha-checkbox>
     `;
   }
 
@@ -56,25 +50,12 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
   }
 
   static styles = css`
-    ha-formfield {
-      display: flex;
+    ha-checkbox {
       min-height: 56px;
+      justify-content: center;
+    }
+    ha-checkbox::part(base) {
       align-items: center;
-      --mdc-typography-body2-font-size: 1em;
-    }
-    p {
-      margin: 0;
-    }
-    .secondary {
-      direction: var(--direction);
-      padding-top: 4px;
-      box-sizing: border-box;
-      color: var(--secondary-text-color);
-      font-size: 0.875rem;
-      font-weight: var(
-        --mdc-typography-body2-font-weight,
-        var(--ha-font-weight-normal)
-      );
     }
   `;
 }

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

@@ -100,7 +100,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         inputMode="numeric"
         .label=${this.label}
         .hint=${this.helper}
-        .value=${this.data !== undefined ? this.data.toString() : ""}
+        .value=${this.data?.toString() ?? ""}
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
@@ -199,10 +199,15 @@ export class HaFormInteger extends LitElement implements HaFormElement {
     }
     .flex {
       display: flex;
+      align-items: center;
+      gap: var(--ha-space-3);
     }
     ha-slider {
       flex: 1;
     }
+    ha-input-helper-text {
+      margin-top: var(--ha-space-1);
+    }
   `;
 }
 

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

@@ -7,7 +7,6 @@ import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-dropdown";
 import "../ha-dropdown-item";
-import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-picker-field";
 
@@ -63,14 +62,14 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         ${this.label}${options.map((item: string | [string, string]) => {
           const value = optionValue(item);
           return html`
-            <ha-formfield .label=${optionLabel(item)}>
-              <ha-checkbox
-                .checked=${data.includes(value)}
-                .value=${value}
-                .disabled=${this.disabled}
-                @change=${this._valueChanged}
-              ></ha-checkbox>
-            </ha-formfield>
+            <ha-checkbox
+              .checked=${data.includes(value)}
+              .value=${value}
+              .disabled=${this.disabled}
+              @change=${this._valueChanged}
+            >
+              ${optionLabel(item)}
+            </ha-checkbox>
           `;
         })}
       </div> `;
@@ -192,11 +191,12 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     ha-dropdown {
       display: block;
     }
-    ha-formfield {
-      display: block;
-      padding-right: 16px;
-      padding-inline-end: 16px;
+    ha-checkbox {
+      display: flex;
+      padding-inline-end: var(--ha-space-4);
       padding-inline-start: initial;
+      min-height: 40px;
+      justify-content: center;
       direction: var(--direction);
     }
     ha-icon-button {

src/components/ha-gauge.ts

@@ -1,4 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues } from "lit";
 import { css, LitElement, svg } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
@@ -46,6 +46,18 @@ export class HaGauge extends LitElement {
 
   @state() private _segment_label?: string = "";
 
+  private _sortedLevels?: LevelDefinition[];
+
+  private _rescaleOnConnect = false;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this._rescaleOnConnect) {
+      this._rescaleSvg();
+      this._rescaleOnConnect = false;
+    }
+  }
+
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     afterNextRender(() => {
@@ -54,9 +66,30 @@ export class HaGauge extends LitElement {
         this._angle = getAngle(this.value, this.min, this.max);
       }
       this._segment_label = this._getSegmentLabel();
+      this._rescaleSvg();
     });
   }
 
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("levels") || changedProperties.has("min")) {
+      if (this.levels) {
+        this._sortedLevels = [...this.levels].sort((a, b) => a.level - b.level);
+
+        if (
+          this._sortedLevels.length > 0 &&
+          this._sortedLevels[0].level !== this.min
+        ) {
+          this._sortedLevels.unshift({
+            level: this.min,
+            stroke: "var(--info-color)",
+          });
+        }
+      } else {
+        this._sortedLevels = undefined;
+      }
+    }
+  }
+
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (
@@ -70,6 +103,7 @@ export class HaGauge extends LitElement {
     }
     this._angle = getAngle(this.value, this.min, this.max);
     this._segment_label = this._getSegmentLabel();
+    this._rescaleSvg();
   }
 
   protected render() {
@@ -88,87 +122,64 @@ export class HaGauge extends LitElement {
         />
 
 
-  ${
-    this.levels
-      ? [...this.levels]
-          .sort((a, b) => a.level - b.level)
-          .map((level, i, arr) => {
-            const startLevel = i === 0 ? this.min : arr[i].level;
-            const endLevel = i + 1 < arr.length ? arr[i + 1].level : this.max;
+        ${this._sortedLevels?.map((level, i, arr) => {
+          const startLevel = level.level;
+          const endLevel = i + 1 < arr.length ? arr[i + 1].level : this.max;
 
-            const startAngle = getAngle(startLevel, this.min, this.max);
-            const endAngle = getAngle(endLevel, this.min, this.max);
-            const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+          const startAngle = getAngle(startLevel, this.min, this.max);
+          const endAngle = getAngle(endLevel, this.min, this.max);
+          const largeArc = endAngle - startAngle > 180 ? 1 : 0;
 
-            const x1 = -arcRadius * Math.cos((startAngle * Math.PI) / 180);
-            const y1 = -arcRadius * Math.sin((startAngle * Math.PI) / 180);
-            const x2 = -arcRadius * Math.cos((endAngle * Math.PI) / 180);
-            const y2 = -arcRadius * Math.sin((endAngle * Math.PI) / 180);
+          const x1 = -arcRadius * Math.cos((startAngle * Math.PI) / 180);
+          const y1 = -arcRadius * Math.sin((startAngle * Math.PI) / 180);
 
-            const firstSegment = i === 0;
-            const lastSegment = i === arr.length - 1;
+          const isFirst = i === 0;
+          const isLast = i === arr.length - 1;
 
-            const paths: TemplateResult[] = [];
-
-            if (firstSegment) {
-              paths.push(svg`
+          if (isFirst) {
+            return svg`
               <path
                 class="level"
                 stroke="${level.stroke}"
-                style="stroke-linecap: round"
-                d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
+                style="stroke-linecap: butt"
+                d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
               />
-            `);
-            } else if (lastSegment) {
-              const offsetAngle = 0.5;
-              const midAngle = endAngle - offsetAngle;
-              const xm = -arcRadius * Math.cos((midAngle * Math.PI) / 180);
-              const ym = -arcRadius * Math.sin((midAngle * Math.PI) / 180);
+            `;
+          }
 
-              paths.push(svg`
-                <path
-                  class="level"
-                  stroke="${level.stroke}"
-                  style="stroke-linecap: butt"
-                  d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${xm} ${ym}"
-                />
-              `);
+          if (isLast) {
+            const offsetAngle = 0.5;
+            const midAngle = endAngle - offsetAngle;
+            const xm = -arcRadius * Math.cos((midAngle * Math.PI) / 180);
+            const ym = -arcRadius * Math.sin((midAngle * Math.PI) / 180);
 
-              paths.push(svg`
-                <path
-                  class="level"
-                  stroke="${level.stroke}"
-                  style="stroke-linecap: round"
-                  d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 ${x2} ${y2}"
-                />
-              `);
-            } else {
-              paths.push(svg`
-                <path
-                  class="level"
-                  stroke="${level.stroke}"
-                  style="stroke-linecap: butt"
-                  d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 ${x2} ${y2}"
-                />
-              `);
-            }
+            return svg`
+                <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
+                      d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0" />
+                <path class="level" stroke="${level.stroke}" style="stroke-linecap: butt"
+                      d="M ${xm} ${ym} A ${arcRadius} ${arcRadius} 0 0 1 40 0" />
+            `;
+          }
 
-            return paths;
-          })
-      : ""
-  }
+          return svg`
+            <path
+              class="level"
+              stroke="${level.stroke}"
+              style="stroke-linecap: butt"
+              d="M ${x1} ${y1} A ${arcRadius} ${arcRadius} 0 ${largeArc} 1 40 0"
+            ></path>
+          `;
+        })}
 
         ${
           this.needle
             ? svg`
-                <line
-                  class="needle"
-                  x1="-35.0"
-                  y1="0"
-                  x2="-45.0"
-                  y2="0"
-                  style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
-                />
+                <path
+                class="needle"
+                d="M -34,-3 L -40,-1 A 1,1,0,0,0,-40,1 L -34,3 A 2,2,0,0,0,-34,-3 Z"
+
+                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+              />
               `
             : svg`
                 <path
@@ -179,7 +190,8 @@ export class HaGauge extends LitElement {
                 />
               `
         }
-
+      </svg>
+      <svg class="text">
         <text
           class="value-text"
           x="0"
@@ -204,12 +216,30 @@ export class HaGauge extends LitElement {
     `;
   }
 
+  private _rescaleSvg() {
+    // Set the viewbox of the SVG containing the value to perfectly
+    // fit the text
+    // That way it will auto-scale correctly
+
+    if (!this.isConnected) {
+      // Retry this later if we're disconnected, otherwise we get a 0 bbox and missing label
+      this._rescaleOnConnect = true;
+      return;
+    }
+
+    const svgRoot = this.shadowRoot!.querySelector(".text")!;
+    const box = svgRoot.querySelector("text")!.getBBox()!;
+    svgRoot.setAttribute(
+      "viewBox",
+      `${box.x} ${box.y} ${box.width} ${box.height}`
+    );
+  }
+
   private _getSegmentLabel() {
-    if (this.levels) {
-      [...this.levels].sort((a, b) => a.level - b.level);
-      for (let i = this.levels.length - 1; i >= 0; i--) {
-        if (this.value >= this.levels[i].level) {
-          return this.levels[i].label;
+    if (this._sortedLevels) {
+      for (let i = this._sortedLevels.length - 1; i >= 0; i--) {
+        if (this.value >= this._sortedLevels[i].level) {
+          return this._sortedLevels[i].label;
         }
       }
     }
@@ -224,32 +254,43 @@ export class HaGauge extends LitElement {
     .levels-base {
       fill: none;
       stroke: var(--primary-background-color);
-      stroke-width: 8;
-      stroke-linecap: round;
+      stroke-width: 12;
+      stroke-linecap: butt;
     }
 
     .level {
       fill: none;
-      stroke-width: 8;
+      stroke-width: 12;
       stroke-linecap: butt;
     }
 
     .value {
       fill: none;
-      stroke-width: 8;
+      stroke-width: 12;
       stroke: var(--gauge-color);
-      stroke-linecap: round;
+      stroke-linecap: butt;
       transition: stroke-dashoffset 1s ease 0s;
     }
 
     .needle {
-      stroke: var(--primary-text-color);
-      stroke-width: 2;
+      fill: var(--primary-text-color);
+      stroke: var(--card-background-color);
+      color: var(--primary-text-color);
+      stroke-width: 1;
       stroke-linecap: round;
       transform-origin: 0 0;
       transition: all 1s ease 0s;
     }
 
+    .text {
+      position: absolute;
+      max-height: 40%;
+      max-width: 55%;
+      left: 50%;
+      bottom: 10%;
+      transform: translate(-50%, 0%);
+    }
+
     .value-text {
       font-size: var(--ha-font-size-l);
       fill: var(--primary-text-color);

src/components/ha-hls-player.ts

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

src/components/ha-icon.ts

@@ -30,6 +30,19 @@ const debouncedWriteCache = debounce(() => writeCache(chunks), 2000);
 
 const cachedIcons: Record<string, string> = {};
 
+const CUSTOM_ICONS: Record<string, () => Promise<string>> = {
+  "home-assistant": () =>
+    import("../resources/home-assistant-logo-svg").then(
+      (mod) => mod.mdiHomeAssistant
+    ),
+  "music-assistant": () =>
+    import("../resources/music-assistant-logo-svg").then(
+      (mod) => mod.mdiMusicAssistant
+    ),
+  esphome: () =>
+    import("../resources/esphome-logo-svg").then((mod) => mod.mdiEsphomeLogo),
+};
+
 @customElement("ha-icon")
 export class HaIcon extends LitElement {
   @property() public icon?: string;
@@ -117,10 +130,8 @@ export class HaIcon extends LitElement {
       return;
     }
 
-    if (iconName === "home-assistant") {
-      const icon = (await import("../resources/home-assistant-logo-svg"))
-        .mdiHomeAssistant;
-
+    if (iconName in CUSTOM_ICONS) {
+      const icon = await CUSTOM_ICONS[iconName]();
       if (this.icon === requestedIcon) {
         this._path = icon;
       }

src/components/ha-markdown-element.ts

@@ -1,7 +1,6 @@
 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";