Group device and entity automation items under Generic

Co-authored-by: timmo001 <28114703+timmo001@users.noreply.github.com>

.github/ISSUE_TEMPLATE/config.yml

@@ -3,9 +3,6 @@ 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,6 +69,7 @@
 - [ ] 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.
 
@@ -104,5 +105,6 @@ 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

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

.github/workflows/cast_deployment.yaml

@@ -8,9 +8,6 @@ on:
     branches:
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -27,7 +24,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -63,7 +59,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/ci.yaml

@@ -18,9 +18,6 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   lint:
     name: Lint and check format
@@ -28,8 +25,6 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -42,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier
@@ -64,8 +59,6 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -84,8 +77,6 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
@@ -98,13 +89,13 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
       - name: Upload frontend build
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: frontend-build
           path: hass_frontend/

.github/workflows/codeql-analysis.yml

@@ -7,10 +7,6 @@ on:
     # The branches below must be a subset of the branches above
     branches: [dev]
 
-permissions:
-  contents: read
-  security-events: write
-
 jobs:
   analyze:
     name: Analyze
@@ -32,7 +28,6 @@ jobs:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
           fetch-depth: 2
-          persist-credentials: false
 
       # If this run was triggered by a pull request event, then checkout
       # the head of the pull request instead of the merge commit.
@@ -41,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13 # v4.35.1
+        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6

.github/workflows/demo_deployment.yaml

@@ -9,9 +9,6 @@ on:
       - dev
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -28,7 +25,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -64,7 +60,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/design_deployment.yaml

@@ -5,9 +5,6 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -20,8 +17,6 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/design_preview.yaml

@@ -10,9 +10,6 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -25,8 +22,6 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0

.github/workflows/labeler.yaml

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

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

@@ -21,8 +21,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
@@ -59,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -1,39 +1,25 @@
 name: RelativeCI
 
 on:
-  # zizmor: ignore[dangerous-triggers] -- safe: only downloads artifacts, no PR code checkout
   workflow_run:
     workflows: [CI]
     types:
       - completed
 
-permissions:
-  contents: read
-  actions: read
-
 jobs:
-  upload-frontend-modern:
-    name: Upload stats (frontend/modern)
+  upload:
+    name: Upload stats
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    strategy:
+      matrix:
+        bundle: [frontend]
+        build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
         uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-modern.json
-
-  upload-frontend-legacy:
-    name: Upload stats (frontend/legacy)
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
-        with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
-          token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-legacy.json
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

@@ -27,8 +27,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
@@ -36,12 +34,13 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
+        uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
+          cache: yarn
 
       - name: Install dependencies
         run: yarn install
@@ -58,15 +57,16 @@ jobs:
           script/release
 
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
         with:
           skip-existing: true
 
       - name: Upload release assets
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
 
   wheels-init:
     name: Init wheels build
@@ -74,17 +74,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Generate requirements.txt
-        env:
-          GITHUB_REF: ${{ github.ref }}
         run: |
           # Sleep to give pypi time to populate the new version across mirrors
           sleep 240
-          version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
+          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@2025.12.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -101,12 +99,11 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
+          cache: yarn
       - name: Install dependencies
         run: yarn install
       - name: Download Translations
@@ -116,11 +113,8 @@ jobs:
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder
-        env:
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: tar -czf "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" -C landing-page/dist .
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" --clobber
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

.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@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.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@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

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

.github/workflows/translations.yaml

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

.gitignore

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

.nvmrc

@@ -1 +1 @@
-24.15.0
+24.14.0

.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch

@@ -31,7 +31,7 @@ index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f
 @@ -129,7 +129,10 @@ export async function injectManifest(
        searchString: options.injectionPoint!,
      });
-
+ 
 -    filesToWrite[options.swDest] = source;
 +    filesToWrite[options.swDest] = source.replace(
 +      url!,

.yarnrc.yml

@@ -8,4 +8,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.14.1.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.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-x/no-extraneous-dependencies": "off",
-    "import-x/extensions": "off",
-    "import-x/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
     "global-require": "off",
     "@typescript-eslint/no-require-imports": "off",
     "prefer-arrow-callback": "off",

build-scripts/gulp/download-translations.js

@@ -99,44 +99,6 @@ 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 {
@@ -156,60 +118,55 @@ gulp.task("fetch-lokalise", async function () {
   ]);
 
   await Promise.all(
-    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) {
+    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();
+          }
           throw new Error(response.statusText);
-        }
-
-        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;
-      }
-    })
+        })
+        .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;
+        })
+    )
   );
 });
 

build-scripts/gulp/locale-data.js

@@ -40,24 +40,18 @@ const convertToJSON = async (
     throw e;
   }
   // Convert to JSON
-  const parts = localeData.split("} else {");
-  const firstBlock = parts[0];
   const obj = INTL_POLYFILLS[pkg];
   const dataRegex = new RegExp(
     `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
     "s"
   );
-  localeData = firstBlock.match(dataRegex)?.groups?.data;
+  localeData = localeData.match(dataRegex)?.groups?.data;
   if (!localeData) {
     throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
   }
   // Parse to validate JSON, then stringify to minify
-  try {
-    localeData = JSON.stringify(JSON.parse(localeData));
-    await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
-  } catch (e) {
-    throw Error(`Failed to parse JSON for language ${lang} from ${pkg}: ${e}`);
-  }
+  localeData = JSON.stringify(JSON.parse(localeData));
+  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
 gulp.task("clean-locale-data", async () => deleteSync([outDir]));

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

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

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

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

demo/src/configs/demo-configs.ts

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

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

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

eslint.config.mjs

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

gallery/src/pages/components/ha-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"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "small"/"medium"                               | "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-form.ts

@@ -480,12 +480,6 @@ const SCHEMAS: {
       },
       { type: "string", name: "path", default: "/" },
       { type: "boolean", name: "ssl", default: false },
-      {
-        type: "string",
-        name: "comments",
-        default: "disabled field",
-        disabled: true,
-      },
     ],
   },
 ];

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

@@ -1,82 +0,0 @@
----
-title: Input
----
-
-# Input `<ha-input>`
-
-A text input component supporting Home Assistant theming and validation, based on webawesome input.
-Supports multiple input types including text, number, password, email, search, and more.
-
-## Implementation
-
-### Example usage
-
-```html
-<ha-input label="Name" value="Hello"></ha-input>
-
-<ha-input label="Email" type="email" placeholder="you@example.com"></ha-input>
-
-<ha-input label="Password" type="password" password-toggle></ha-input>
-
-<ha-input label="Required" required></ha-input>
-
-<ha-input label="Disabled" disabled value="Can't touch this"></ha-input>
-```
-
-### API
-
-This component is based on the webawesome input component.
-
-**Slots**
-
-- `start`: Content placed before the input (usually for icons or prefixes).
-- `end`: Content placed after the input (usually for icons or suffixes).
-- `label`: Custom label content. Overrides the `label` property.
-- `hint`: Custom hint content. Overrides the `hint` property.
-- `clear-icon`: Custom clear icon.
-- `show-password-icon`: Custom show password icon.
-- `hide-password-icon`: Custom hide password icon.
-
-**Properties/Attributes**
-
-| Name                 | Type                                                                                           | Default    | Description                                                                                                |
-| -------------------- | ---------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- |
-| appearance           | "material"/"outlined"                                                                          | "material" | Sets the input appearance style. "material" is the default filled style, "outlined" uses a bordered style. |
-| type                 | "text"/"number"/"password"/"email"/"search"/"tel"/"url"/"date"/"datetime-local"/"time"/"color" | "text"     | Sets the input type.                                                                                       |
-| value                | String                                                                                         | -          | The current value of the input.                                                                            |
-| label                | String                                                                                         | ""         | The input's label text.                                                                                    |
-| hint                 | String                                                                                         | ""         | The input's hint/helper text.                                                                              |
-| placeholder          | String                                                                                         | ""         | Placeholder text shown when the input is empty.                                                            |
-| with-clear           | Boolean                                                                                        | false      | Adds a clear button when the input is not empty.                                                           |
-| readonly             | Boolean                                                                                        | false      | Makes the input readonly.                                                                                  |
-| disabled             | Boolean                                                                                        | false      | Disables the input and prevents user interaction.                                                          |
-| required             | Boolean                                                                                        | false      | Makes the input a required field.                                                                          |
-| password-toggle      | Boolean                                                                                        | false      | Adds a button to toggle the password visibility.                                                           |
-| without-spin-buttons | Boolean                                                                                        | false      | Hides the browser's built-in spin buttons for number inputs.                                               |
-| auto-validate        | Boolean                                                                                        | false      | Validates the input on blur instead of on form submit.                                                     |
-| invalid              | Boolean                                                                                        | false      | Marks the input as invalid.                                                                                |
-| inset-label          | Boolean                                                                                        | false      | Uses an inset label style where the label stays inside the input.                                          |
-| validation-message   | String                                                                                         | ""         | Custom validation message shown when the input is invalid.                                                 |
-| pattern              | String                                                                                         | -          | A regular expression pattern to validate input against.                                                    |
-| minlength            | Number                                                                                         | -          | The minimum length of input that will be considered valid.                                                 |
-| maxlength            | Number                                                                                         | -          | The maximum length of input that will be considered valid.                                                 |
-| min                  | Number/String                                                                                  | -          | The input's minimum value. Only applies to date and number input types.                                    |
-| max                  | Number/String                                                                                  | -          | The input's maximum value. Only applies to date and number input types.                                    |
-| step                 | Number/"any"                                                                                   | -          | Specifies the granularity that the value must adhere to.                                                   |
-
-**CSS Custom Properties**
-
-- `--ha-input-padding-top` - Padding above the input.
-- `--ha-input-padding-bottom` - Padding below the input. Defaults to `var(--ha-space-2)`.
-- `--ha-input-text-align` - Text alignment of the input. Defaults to `start`.
-- `--ha-input-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
-
----
-
-## Derivatives
-
-The following components extend or wrap `ha-input` for specific use cases:
-
-- **`<ha-input-search>`** — A pre-configured search input with a magnify icon, clear button, and localized "Search" placeholder. Extends `ha-input`.
-- **`<ha-input-copy>`** — A read-only input with a copy-to-clipboard button. Supports optional value masking with a reveal toggle.
-- **`<ha-input-multi>`** — A dynamic list of text inputs for managing arrays of strings. Supports adding, removing, and drag-and-drop reordering.

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

@@ -1,240 +0,0 @@
-import { ContextProvider } from "@lit/context";
-import { mdiMagnify } from "@mdi/js";
-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-svg-icon";
-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 { internationalizationContext } from "../../../../src/data/context";
-
-const LOCALIZE_KEYS: Record<string, string> = {
-  "ui.common.copy": "Copy",
-  "ui.common.show": "Show",
-  "ui.common.hide": "Hide",
-  "ui.common.add": "Add",
-  "ui.common.remove": "Remove",
-  "ui.common.search": "Search",
-  "ui.common.copied_clipboard": "Copied to clipboard",
-};
-
-@customElement("demo-components-ha-input")
-export class DemoHaInput extends LitElement {
-  constructor() {
-    super();
-    // Provides internationalizationContext for ha-input-copy, ha-input-multi and ha-input-search
-    // eslint-disable-next-line no-new
-    new ContextProvider(this, {
-      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,
-      },
-    });
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-input in ${mode}">
-              <div class="card-content">
-                <h3>Basic</h3>
-                <div class="row">
-                  <ha-input label="Default"></ha-input>
-                  <ha-input label="With value" value="Hello"></ha-input>
-                  <ha-input
-                    label="With placeholder"
-                    placeholder="Type here..."
-                  ></ha-input>
-                </div>
-
-                <h3>Input types</h3>
-                <div class="row">
-                  <ha-input label="Text" type="text" value="Text"></ha-input>
-                  <ha-input label="Number" type="number" value="42"></ha-input>
-                  <ha-input
-                    label="Email"
-                    type="email"
-                    placeholder="you@example.com"
-                  ></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Password"
-                    type="password"
-                    value="secret"
-                    password-toggle
-                  ></ha-input>
-                  <ha-input label="URL" type="url" placeholder="https://...">
-                  </ha-input>
-                  <ha-input label="Date" type="date"></ha-input>
-                </div>
-
-                <h3>States</h3>
-                <div class="row">
-                  <ha-input
-                    label="Disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    label="Readonly"
-                    readonly
-                    value="Readonly"
-                  ></ha-input>
-                  <ha-input label="Required" required></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Invalid"
-                    invalid
-                    validation-message="This field is required"
-                    value=""
-                  ></ha-input>
-                  <ha-input label="With hint" hint="This is a hint"></ha-input>
-                  <ha-input
-                    label="With clear"
-                    with-clear
-                    value="Clear me"
-                  ></ha-input>
-                </div>
-
-                <h3>With slots</h3>
-                <div class="row">
-                  <ha-input label="With prefix">
-                    <span slot="start">$</span>
-                  </ha-input>
-                  <ha-input label="With suffix">
-                    <span slot="end">kg</span>
-                  </ha-input>
-                  <ha-input label="With icon">
-                    <ha-svg-icon .path=${mdiMagnify} slot="start"></ha-svg-icon>
-                  </ha-input>
-                </div>
-
-                <h3>Appearance: outlined</h3>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined"
-                    value="Hello"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined invalid"
-                    invalid
-                    validation-message="Required"
-                  ></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    placeholder="Placeholder only"
-                  ></ha-input>
-                </div>
-              </div>
-            </ha-card>
-
-            <ha-card header="Derivatives in ${mode}">
-              <div class="card-content">
-                <h3>ha-input-search</h3>
-                <ha-input-search label="Search label"></ha-input-search>
-                <ha-input-search appearance="outlined"></ha-input-search>
-
-                <h3>ha-input-copy</h3>
-                <ha-input-copy
-                  value="my-api-token-123"
-                  masked-value="••••••••••••••••••"
-                  masked-toggle
-                ></ha-input-copy>
-
-                <h3>ha-input-multi</h3>
-                <ha-input-multi
-                  label="URL"
-                  add-label="Add URL"
-                  .value=${["https://example.com"]}
-                ></ha-input-multi>
-              </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-input": DemoHaInput;
-  }
-}

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

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

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

@@ -3,73 +3,37 @@ title: Switch / Toggle
 ---
 
 <style>
-  .wrapper {
-    display: flex;
-    gap: 24px;
-    align-items: center;
+  ha-switch {
+    display: block;
   }
 </style>
 
 # Switch `<ha-switch>`
 
-A toggle switch representing two states: on and off.
+A toggle switch can represent two states: on and off.
 
-## Implementation
+## Examples
 
-### 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
+Switch in on state
 <ha-switch checked></ha-switch>
 
+Switch in off state
 <ha-switch></ha-switch>
 
+Disabled switch
 <ha-switch disabled></ha-switch>
 
-<ha-switch disabled checked></ha-switch>
-```
+## CSS variables
 
-### API
+For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
 
-This component is based on the webawesome switch component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/switch/) for more details.
+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.
 
-**Properties/Attributes**
+`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.
 
-| 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-button-color` / `switch-unchecked-button-color`  
+Color of 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`.
+`switch-checked-track-color` / `switch-unchecked-track-color`  
+Color of the track behind the round handle

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

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

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

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

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

gallery/src/pages/concepts/home.markdown

@@ -19,7 +19,7 @@ The Home Assistant interface is based on Material Design. It's a design system c
 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:
 
 - Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
-- Start designing with our <a href="https://www.figma.com/design/2WGI8IDGyxINjSV6NRvPur/Home-Assistant-Design-Kit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
+- Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 
 ## Developers

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

@@ -134,53 +134,6 @@ 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

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

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

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

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

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

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

@@ -1,98 +0,0 @@
-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,101 +8,18 @@ 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.full_featured",
+    entity_id: "vacuum.first_floor_vacuum",
     state: "docked",
     attributes: {
-      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",
+      friendly_name: "First floor 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,5 +1,7 @@
-import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
+// eslint-disable-next-line import/extensions
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
 import { LitElement, type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";

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

@@ -1,3 +1,4 @@
+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";
@@ -7,7 +8,6 @@ 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>
-                <ha-progress-bar indeterminate></ha-progress-bar>
+                <mwc-linear-progress indeterminate></mwc-linear-progress>
               `
             : nothing}
           ${networkIssue || this._networkInfoError

lint-staged.config.js

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

package.json

@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
-    "format:eslint": "eslint \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
+    "lint:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
+    "format:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
@@ -26,46 +26,55 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.2",
+    "@babel/runtime": "7.28.6",
     "@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/commands": "6.10.2",
+    "@codemirror/language": "6.12.2",
+    "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
-    "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.41.0",
+    "@codemirror/state": "6.5.4",
+    "@codemirror/view": "6.39.17",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@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",
+    "@formatjs/intl-datetimeformat": "7.2.5",
+    "@formatjs/intl-displaynames": "7.2.2",
+    "@formatjs/intl-durationformat": "0.10.1",
+    "@formatjs/intl-getcanonicallocales": "3.2.1",
+    "@formatjs/intl-listformat": "8.2.2",
+    "@formatjs/intl-locale": "5.2.1",
+    "@formatjs/intl-numberformat": "9.2.3",
+    "@formatjs/intl-pluralrules": "6.2.3",
+    "@formatjs/intl-relativetimeformat": "12.2.3",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.3.1-ha.0",
+    "@home-assistant/webawesome": "3.3.1",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
     "@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",
@@ -73,18 +82,19 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.21",
+    "@swc/helpers": "0.5.19",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
     "@vibrant/color": "4.0.4",
+    "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.1.2",
-    "cally": "0.9.2",
+    "app-datepicker": "5.1.1",
+    "barcode-detector": "3.1.1",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
-    "core-js": "3.49.0",
+    "core-js": "3.48.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
@@ -93,13 +103,13 @@
     "dialog-polyfill": "0.5.6",
     "echarts": "6.0.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.3.0",
+    "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
-    "hls.js": "1.6.16",
+    "hls.js": "1.6.15",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.1",
+    "intl-messageformat": "11.1.2",
     "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",
@@ -107,7 +117,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "18.0.1",
+    "marked": "17.0.4",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -120,6 +130,9 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
+    "ua-parser-js": "2.0.9",
+    "vue": "2.7.16",
+    "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.4.0",
     "workbox-core": "7.4.0",
@@ -131,22 +144,20 @@
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
-    "@babel/helper-define-polyfill-provider": "0.6.8",
+    "@babel/helper-define-polyfill-provider": "0.6.7",
     "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.2",
-    "@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",
+    "@babel/preset-env": "7.29.0",
+    "@bundle-stats/plugin-webpack-filter": "4.21.10",
+    "@html-eslint/eslint-plugin": "0.58.1",
+    "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.9",
-    "@rspack/core": "1.7.11",
+    "@rsdoctor/rspack-plugin": "1.5.2",
+    "@rspack/core": "1.7.8",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.26",
+    "@types/chromecast-caf-receiver": "6.0.25",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -161,18 +172,18 @@
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
+    "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.4",
+    "@vitest/coverage-v8": "4.0.18",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "browserslist-useragent-regexp": "4.1.4",
+    "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "10.2.0",
+    "eslint": "9.39.4",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-webpack": "0.13.11",
+    "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-import-x": "4.16.2",
     "eslint-plugin-lit": "2.2.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
@@ -180,49 +191,49 @@
     "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.2",
+    "jsdom": "28.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.4.0",
+    "lint-staged": "16.3.3",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.8.3",
+    "prettier": "3.8.1",
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
-    "sinon": "21.1.2",
-    "tar": "7.5.13",
-    "terser-webpack-plugin": "5.4.0",
+    "sinon": "21.0.2",
+    "tar": "7.5.11",
+    "terser-webpack-plugin": "5.3.17",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "6.0.3",
-    "typescript-eslint": "8.58.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.4",
+    "vitest": "4.0.18",
     "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"
+    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
   },
   "resolutions": {
+    "@material/mwc-button@^0.25.3": "^0.27.0",
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.5.0",
+    "globals": "17.4.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.14.1",
+  "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.15.0"
+    "node": "24.14.0"
   }
 }

pyproject.toml

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

renovate.json

@@ -24,6 +24,11 @@
       "extends": ["monorepo:material-components-web"],
       "enabled": false
     },
+    {
+      "description": "Vue is only used by date range which is only v2",
+      "matchPackageNames": ["vue"],
+      "allowedVersions": "< 3"
+    },
     {
       "description": "Group MDI packages",
       "groupName": "Material Design Icons",

src/auth/ha-auth-flow.ts

@@ -9,6 +9,7 @@ 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,
@@ -96,6 +97,11 @@ 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;
@@ -115,9 +121,6 @@ export class HaAuthFlow extends LitElement {
           display: block;
           margin-top: 16px;
         }
-        .action {
-          margin-top: var(--ha-space-5);
-        }
         .action ha-button {
           width: 100%;
         }
@@ -246,12 +249,17 @@ export class HaAuthFlow extends LitElement {
             ${this.clientId === genClientId() &&
             !["select_mfa_module", "mfa"].includes(step.step_id)
               ? html`
-                  <ha-checkbox
-                    .checked=${this._storeToken}
-                    @change=${this._storeTokenChanged}
+                  <ha-formfield
+                    class="store-token"
+                    .label=${this.localize(
+                      "ui.panel.page-authorize.store_token"
+                    )}
                   >
-                    ${this.localize("ui.panel.page-authorize.store_token")}
-                  </ha-checkbox>
+                    <ha-checkbox
+                      .checked=${this._storeToken}
+                      @change=${this._storeTokenChanged}
+                    ></ha-checkbox>
+                  </ha-formfield>
                 `
               : ""}
             <a

src/auth/ha-auth-form-string.ts

@@ -1,7 +1,10 @@
+/* eslint-disable lit/prefer-static-styles */
+import type { TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement } from "lit/decorators";
 import { HaFormString } from "../components/ha-form/ha-form-string";
 import "../components/ha-icon-button";
-import "../components/input/ha-input";
+import "./ha-auth-textfield";
 
 @customElement("ha-auth-form-string")
 export class HaAuthFormString extends HaFormString {
@@ -9,9 +12,63 @@ export class HaAuthFormString extends HaFormString {
     return this;
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this.style.position = "relative";
+  public reportValidity(): boolean {
+    return this.querySelector("ha-auth-textfield")?.reportValidity() ?? true;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <style>
+        ha-auth-form-string {
+          display: block;
+          position: relative;
+        }
+        ha-auth-form-string[own-margin] {
+          margin-bottom: 5px;
+        }
+        ha-auth-form-string ha-auth-textfield {
+          display: block !important;
+        }
+        ha-auth-form-string ha-icon-button {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          inset-inline-start: initial;
+          inset-inline-end: 8px;
+          --ha-icon-button-size: 40px;
+          --mdc-icon-size: 20px;
+          color: var(--secondary-text-color);
+          direction: var(--direction);
+        }
+      </style>
+      <ha-auth-textfield
+        .type=${!this.isPassword
+          ? this.stringType
+          : this.unmaskedPassword
+            ? "text"
+            : "password"}
+        .label=${this.label}
+        .value=${this.data || ""}
+        .helper=${this.helper}
+        helperPersistent
+        .disabled=${this.disabled}
+        .required=${this.schema.required}
+        .autoValidate=${this.schema.required}
+        .name=${this.schema.name}
+        .autocomplete=${this.schema.autocomplete}
+        ?autofocus=${this.schema.autofocus}
+        .suffix=${this.isPassword
+          ? // reserve some space for the icon.
+            html`<div style="width: 24px"></div>`
+          : this.schema.description?.suffix}
+        .validationMessage=${this.schema.required
+          ? this.localize?.("ui.panel.page-authorize.form.error_required")
+          : undefined}
+        @input=${this._valueChanged}
+        @change=${this._valueChanged}
+      ></ha-auth-textfield>
+      ${this.renderIcon()}
+    `;
   }
 }
 

src/auth/ha-auth-form.ts

@@ -1,9 +1,9 @@
 /* eslint-disable lit/prefer-static-styles */
 import { html } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { LocalizeFunc } from "../common/translations/localize";
 import { HaForm } from "../components/ha-form/ha-form";
 import "./ha-auth-form-string";
+import type { LocalizeFunc } from "../common/translations/localize";
 
 const localizeBaseKey = "ui.panel.page-authorize.form";
 
@@ -34,9 +34,6 @@ export class HaAuthForm extends HaForm {
   protected render() {
     return html`
       <style>
-        ha-auth-form {
-          --ha-input-required-marker: "";
-        }
         ha-auth-form .root > * {
           display: block;
         }

src/auth/ha-auth-textfield.ts

@@ -0,0 +1,264 @@
+/* eslint-disable lit/value-after-constraints */
+/* eslint-disable lit/prefer-static-styles */
+import { floatingLabel } from "@material/mwc-floating-label/mwc-floating-label-directive";
+import type { TemplateResult } from "lit";
+import { html } from "lit";
+import { customElement } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { live } from "lit/directives/live";
+import { HaTextField } from "../components/ha-textfield";
+
+@customElement("ha-auth-textfield")
+export class HaAuthTextField extends HaTextField {
+  protected renderLabel(): TemplateResult | string {
+    return !this.label
+      ? ""
+      : html`
+          <span
+            .floatingLabelFoundation=${floatingLabel(
+              this.label
+            ) as unknown as any}
+            .id=${this.name}
+            >${this.label}</span
+          >
+        `;
+  }
+
+  protected renderInput(shouldRenderHelperText: boolean): TemplateResult {
+    const minOrUndef = this.minLength === -1 ? undefined : this.minLength;
+    const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
+    const autocapitalizeOrUndef = this.autocapitalize
+      ? (this.autocapitalize as
+          | "off"
+          | "none"
+          | "on"
+          | "sentences"
+          | "words"
+          | "characters")
+      : undefined;
+    const showValidationMessage = this.validationMessage && !this.isUiValid;
+    const ariaLabelledbyOrUndef = this.label ? this.name : undefined;
+    const ariaControlsOrUndef = shouldRenderHelperText
+      ? "helper-text"
+      : undefined;
+    const ariaDescribedbyOrUndef =
+      this.focused || this.helperPersistent || showValidationMessage
+        ? "helper-text"
+        : undefined;
+    // TODO: live() directive needs casting for lit-analyzer
+    // https://github.com/runem/lit-analyzer/pull/91/files
+    // TODO: lit-analyzer labels min/max as (number|string) instead of string
+    return html`<input
+      aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
+      aria-controls=${ifDefined(ariaControlsOrUndef)}
+      aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
+      class="mdc-text-field__input"
+      type=${this.type}
+      .value=${live(this.value) as unknown as string}
+      ?disabled=${this.disabled}
+      placeholder=${this.placeholder}
+      ?required=${this.required}
+      ?readonly=${this.readOnly}
+      minlength=${ifDefined(minOrUndef)}
+      maxlength=${ifDefined(maxOrUndef)}
+      pattern=${ifDefined(this.pattern ? this.pattern : undefined)}
+      min=${ifDefined(this.min === "" ? undefined : (this.min as number))}
+      max=${ifDefined(this.max === "" ? undefined : (this.max as number))}
+      step=${ifDefined(this.step === null ? undefined : (this.step as number))}
+      size=${ifDefined(this.size === null ? undefined : this.size)}
+      name=${ifDefined(this.name === "" ? undefined : this.name)}
+      inputmode=${ifDefined(this.inputMode)}
+      autocapitalize=${ifDefined(autocapitalizeOrUndef)}
+      ?autofocus=${this.autofocus}
+      @input=${this.handleInputChange}
+      @focus=${this.onInputFocus}
+      @blur=${this.onInputBlur}
+    />`;
+  }
+
+  public render() {
+    return html`
+      <style>
+        ha-auth-textfield {
+          display: inline-flex;
+          flex-direction: column;
+          outline: none;
+        }
+        ha-auth-textfield:not([disabled]):hover
+          :not(.mdc-text-field--invalid):not(.mdc-text-field--focused)
+          mwc-notched-outline {
+          --mdc-notched-outline-border-color: var(
+            --mdc-text-field-outlined-hover-border-color,
+            rgba(0, 0, 0, 0.87)
+          );
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field:not(.mdc-text-field--outlined) {
+          background-color: var(--mdc-text-field-fill-color, whitesmoke);
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--invalid
+          mwc-notched-outline {
+          --mdc-notched-outline-border-color: var(
+            --mdc-text-field-error-color,
+            var(--mdc-theme-error, #b00020)
+          );
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--invalid
+          + .mdc-text-field-helper-line
+          .mdc-text-field-character-counter,
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--invalid
+          .mdc-text-field__icon {
+          color: var(
+            --mdc-text-field-error-color,
+            var(--mdc-theme-error, #b00020)
+          );
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field:not(.mdc-text-field--invalid):not(
+            .mdc-text-field--focused
+          )
+          .mdc-floating-label,
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field:not(.mdc-text-field--invalid):not(
+            .mdc-text-field--focused
+          )
+          .mdc-floating-label::after {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--focused
+          mwc-notched-outline {
+          --mdc-notched-outline-stroke-width: 2px;
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
+          mwc-notched-outline {
+          --mdc-notched-outline-border-color: var(
+            --mdc-text-field-focused-label-color,
+            var(--mdc-theme-primary, rgba(98, 0, 238, 0.87))
+          );
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
+          .mdc-floating-label {
+          color: #6200ee;
+          color: var(--mdc-theme-primary, #6200ee);
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field
+          .mdc-text-field__input {
+          color: var(--mdc-text-field-ink-color, rgba(0, 0, 0, 0.87));
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field
+          .mdc-text-field__input::placeholder {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+        }
+
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field-helper-line
+          .mdc-text-field-helper-text:not(
+            .mdc-text-field-helper-text--validation-msg
+          ),
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field-helper-line:not(.mdc-text-field--invalid)
+          .mdc-text-field-character-counter {
+          color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+        }
+
+        ha-auth-textfield[disabled]
+          .mdc-text-field:not(.mdc-text-field--outlined) {
+          background-color: var(--mdc-text-field-disabled-fill-color, #fafafa);
+        }
+
+        ha-auth-textfield[disabled]
+          .mdc-text-field.mdc-text-field--outlined
+          mwc-notched-outline {
+          --mdc-notched-outline-border-color: var(
+            --mdc-text-field-outlined-disabled-border-color,
+            rgba(0, 0, 0, 0.06)
+          );
+        }
+
+        ha-auth-textfield[disabled]
+          .mdc-text-field:not(.mdc-text-field--invalid):not(
+            .mdc-text-field--focused
+          )
+          .mdc-floating-label,
+        ha-auth-textfield[disabled]
+          .mdc-text-field:not(.mdc-text-field--invalid):not(
+            .mdc-text-field--focused
+          )
+          .mdc-floating-label::after {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
+        }
+
+        ha-auth-textfield[disabled] .mdc-text-field .mdc-text-field__input,
+        ha-auth-textfield[disabled]
+          .mdc-text-field
+          .mdc-text-field__input::placeholder {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
+        }
+
+        ha-auth-textfield[disabled]
+          .mdc-text-field-helper-line
+          .mdc-text-field-helper-text,
+        ha-auth-textfield[disabled]
+          .mdc-text-field-helper-line
+          .mdc-text-field-character-counter {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.38));
+        }
+        ha-auth-textfield:not([disabled])
+          .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid)
+          .mdc-floating-label {
+          color: var(--mdc-theme-primary, #6200ee);
+        }
+        ha-auth-textfield[no-spinner] input::-webkit-outer-spin-button,
+        ha-auth-textfield[no-spinner] input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        /* Firefox */
+        ha-auth-textfield[no-spinner] input[type="number"] {
+          -moz-appearance: textfield;
+        }
+      </style>
+      ${super.render()}
+    `;
+  }
+
+  protected createRenderRoot() {
+    // add parent style to light dom
+    const style = document.createElement("style");
+    style.textContent = HaTextField.elementStyles as unknown as string;
+    this.append(style);
+    return this;
+  }
+
+  public firstUpdated() {
+    super.firstUpdated();
+
+    if (this.autofocus) {
+      this.focus();
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-textfield": HaAuthTextField;
+  }
+}

src/cast/cast_manager.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-/// <reference types="chromecast-caf-sender" />
 
 import type { Auth } from "home-assistant-js-websocket";
 import { castApiAvailable } from "./cast_framework";
@@ -59,11 +58,9 @@ export class CastManager {
     this._eventListeners[event].push(listener);
 
     return () => {
-      const listeners = this._eventListeners[event];
-      const index = listeners.indexOf(listener);
-      if (index !== -1) {
-        listeners.splice(index, 1);
-      }
+      this._eventListeners[event].splice(
+        this._eventListeners[event].indexOf(listener)
+      );
     };
   }
 

src/common/color/compute-color.ts

@@ -32,12 +32,6 @@ const YAML_ONLY_THEMES_COLORS = new Set([
   "disabled",
 ]);
 
-/**
- * Compose a CSS variable out of a theme color
- * @param color - Theme color (examples: `red`, `primary-text`)
- * @returns CSS variable in `--xxx-color` format;
- * initial color if not found in theme colors
- */
 export function computeCssVariableName(color: string): string {
   if (THEME_COLORS.has(color) || YAML_ONLY_THEMES_COLORS.has(color)) {
     return `--${color}-color`;
@@ -45,12 +39,6 @@ export function computeCssVariableName(color: string): string {
   return color;
 }
 
-/**
- * Compose a CSS variable out of a theme color & then resolve it
- * @param color - Theme color (examples: `red`, `primary-text`)
- * @returns Resolved CSS variable in `var(--xxx-color)` format;
- * initial color if not found in theme colors
- */
 export function computeCssColor(color: string): string {
   const cssVarName = computeCssVariableName(color);
   if (cssVarName !== color) {
@@ -59,22 +47,6 @@ export function computeCssColor(color: string): string {
   return color;
 }
 
-/**
- * Get a color from document's styles
- * @param color - Named theme color (examples: `red`, `primary-text`)
- * @returns Resolved color; initial color if not found in document's styles
- */
-export function resolveThemeColor(color: string): string {
-  const cssColor = computeCssVariableName(color);
-  if (cssColor.startsWith("--")) {
-    const resolved = getComputedStyle(document.body)
-      .getPropertyValue(cssColor)
-      .trim();
-    return resolved || color;
-  }
-  return cssColor;
-}
-
 /**
  * Validates if a string is a valid color.
  * Accepts: hex colors (#xxx, #xxxxxx), theme colors, and valid CSS color names.

src/common/color/convert-color.ts

@@ -1,6 +1,5 @@
 import colors from "color-name";
 import { expandHex } from "./hex";
-import { resolveThemeColor } from "./compute-color";
 
 const rgb_hex = (component: number): string => {
   const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -131,43 +130,26 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
 export const hs2rgb = (hs: [number, number]): [number, number, number] =>
   hsv2rgb([hs[0], hs[1], 255]);
 
-/**
- * Attempt to get a HEX color from a color defined in different formats:
- * HEX, rgb/rgba, named color
- * @param color - Color (HEX, rgb/rgba, named color) to be converted to HEX
- * @returns HEX color
- */
-export function theme2hex(color: string): string {
-  // Attempting to find a HEX pattern in the input string
-  if (color.startsWith("#")) {
-    if (color.length === 4 || color.length === 5) {
-      const c = color;
+export function theme2hex(themeColor: string): string {
+  if (themeColor.startsWith("#")) {
+    if (themeColor.length === 4 || themeColor.length === 5) {
+      const c = themeColor;
       // Convert short-form hex (#abc) to 6 digit (#aabbcc). Ignore alpha channel.
       return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
     }
-    if (color.length === 9) {
+    if (themeColor.length === 9) {
       // Ignore alpha channel.
-      return color.substring(0, 7);
+      return themeColor.substring(0, 7);
     }
-    return color;
+    return themeColor;
   }
 
-  // Attempting to find a match in a HA Frontend theme colors
-  const themeColor = resolveThemeColor(color.toLowerCase());
-  if (themeColor !== color.toLowerCase()) {
-    // theme color is recognized, now re-attempt
-    return theme2hex(themeColor);
+  const rgbFromColorName = colors[themeColor.toLowerCase()];
+  if (rgbFromColorName) {
+    return rgb2hex(rgbFromColorName);
   }
 
-  // Attempting to find a match in a web colors array
-  const rgbFromWebColor = colors[color.toLowerCase()];
-  if (rgbFromWebColor) {
-    // HEX color is recognized for the input named color
-    return rgb2hex(rgbFromWebColor);
-  }
-
-  // Attempting to find an RGB pattern in the input string
-  const rgbMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  const rgbMatch = themeColor.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
   if (rgbMatch) {
     const [, r, g, b] = rgbMatch.map(Number);
     return rgb2hex([r, g, b]);
@@ -176,5 +158,5 @@ export function theme2hex(color: string): string {
   // We have a named color, and there's nothing in the table,
   // so nothing further we can do with it.
   // Compare/border/background color will all be the same.
-  return color;
+  return themeColor;
 }

src/common/color/rgb.ts

@@ -1,5 +1,4 @@
 import { wcagLuminance, wcagContrast } from "culori";
-import { theme2hex } from "./convert-color";
 
 /**
  * Calculates the luminosity of an RGB color.
@@ -49,13 +48,3 @@ export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]
 ) => Math.round((rgbContrast(rgb1, rgb2) + Number.EPSILON) * 100) / 100;
-
-/**
- * Returns a contrasted color (black or white) based on the luminance of another color
- * @param color - Color (HEX, rgb/rgba, named color) to calculate a contrasted color
- * @returns HEX color ("#000000" for dark backgrounds, "#ffffff" for light backgrounds)
- */
-export const getContrastedColorHex = (color: string): string => {
-  const lum = wcagLuminance(theme2hex(color));
-  return lum > 0.5 ? "#000000" : "#ffffff";
-};

src/common/condition/listeners.ts

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

src/common/config/can_show_page.ts

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

src/common/config/filter_navigation_pages.ts

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

src/common/datetime/calc_date_range.ts

@@ -1,17 +1,17 @@
 import {
   addDays,
+  subHours,
   endOfDay,
   endOfMonth,
-  endOfQuarter,
   endOfWeek,
   endOfYear,
   startOfDay,
   startOfMonth,
-  startOfQuarter,
   startOfWeek,
   startOfYear,
+  startOfQuarter,
+  endOfQuarter,
   subDays,
-  subHours,
   subMonths,
 } from "date-fns";
 import type { HomeAssistant } from "../../types";
@@ -27,101 +27,94 @@ export type DateRange =
   | "this_year"
   | "now-7d"
   | "now-30d"
-  | "now-365d"
   | "now-12m"
   | "now-1h"
   | "now-12h"
   | "now-24h";
 
 export const calcDateRange = (
-  locale: HomeAssistant["locale"],
-  hassConfig: HomeAssistant["config"],
+  hass: HomeAssistant,
   range: DateRange
 ): [Date, Date] => {
   const today = new Date();
-  const weekStartsOn = firstWeekdayIndex(locale);
+  const weekStartsOn = firstWeekdayIndex(hass.locale);
   switch (range) {
     case "today":
       return [
-        calcDate(today, startOfDay, locale, hassConfig, {
+        calcDate(today, startOfDay, hass.locale, hass.config, {
           weekStartsOn,
         }),
-        calcDate(today, endOfDay, locale, hassConfig, {
+        calcDate(today, endOfDay, hass.locale, hass.config, {
           weekStartsOn,
         }),
       ];
     case "yesterday":
       return [
-        calcDate(addDays(today, -1), startOfDay, locale, hassConfig, {
+        calcDate(addDays(today, -1), startOfDay, hass.locale, hass.config, {
           weekStartsOn,
         }),
-        calcDate(addDays(today, -1), endOfDay, locale, hassConfig, {
+        calcDate(addDays(today, -1), endOfDay, hass.locale, hass.config, {
           weekStartsOn,
         }),
       ];
     case "this_week":
       return [
-        calcDate(today, startOfWeek, locale, hassConfig, {
+        calcDate(today, startOfWeek, hass.locale, hass.config, {
           weekStartsOn,
         }),
-        calcDate(today, endOfWeek, locale, hassConfig, {
+        calcDate(today, endOfWeek, hass.locale, hass.config, {
           weekStartsOn,
         }),
       ];
     case "this_month":
       return [
-        calcDate(today, startOfMonth, locale, hassConfig),
-        calcDate(today, endOfMonth, locale, hassConfig),
+        calcDate(today, startOfMonth, hass.locale, hass.config),
+        calcDate(today, endOfMonth, hass.locale, hass.config),
       ];
     case "this_quarter":
       return [
-        calcDate(today, startOfQuarter, locale, hassConfig),
-        calcDate(today, endOfQuarter, locale, hassConfig),
+        calcDate(today, startOfQuarter, hass.locale, hass.config),
+        calcDate(today, endOfQuarter, hass.locale, hass.config),
       ];
     case "this_year":
       return [
-        calcDate(today, startOfYear, locale, hassConfig),
-        calcDate(today, endOfYear, locale, hassConfig),
+        calcDate(today, startOfYear, hass.locale, hass.config),
+        calcDate(today, endOfYear, hass.locale, hass.config),
       ];
     case "now-7d":
       return [
-        calcDate(today, subDays, locale, hassConfig, 7),
-        calcDate(today, subDays, locale, hassConfig, 0),
+        calcDate(today, subDays, hass.locale, hass.config, 7),
+        calcDate(today, subDays, hass.locale, hass.config, 0),
       ];
     case "now-30d":
       return [
-        calcDate(today, subDays, locale, hassConfig, 30),
-        calcDate(today, subDays, locale, hassConfig, 0),
+        calcDate(today, subDays, hass.locale, hass.config, 30),
+        calcDate(today, subDays, hass.locale, hass.config, 0),
       ];
     case "now-12m":
       return [
         calcDate(
           today,
           (date) => subMonths(startOfMonth(date), 11),
-          locale,
-          hassConfig
+          hass.locale,
+          hass.config
         ),
-        calcDate(today, endOfMonth, locale, hassConfig),
-      ];
-    case "now-365d":
-      return [
-        calcDate(today, subDays, locale, hassConfig, 365),
-        calcDate(today, subDays, locale, hassConfig, 0),
+        calcDate(today, endOfMonth, hass.locale, hass.config),
       ];
     case "now-1h":
       return [
-        calcDate(today, subHours, locale, hassConfig, 1),
-        calcDate(today, subHours, locale, hassConfig, 0),
+        calcDate(today, subHours, hass.locale, hass.config, 1),
+        calcDate(today, subHours, hass.locale, hass.config, 0),
       ];
     case "now-12h":
       return [
-        calcDate(today, subHours, locale, hassConfig, 12),
-        calcDate(today, subHours, locale, hassConfig, 0),
+        calcDate(today, subHours, hass.locale, hass.config, 12),
+        calcDate(today, subHours, hass.locale, hass.config, 0),
       ];
     case "now-24h":
       return [
-        calcDate(today, subHours, locale, hassConfig, 24),
-        calcDate(today, subHours, locale, hassConfig, 0),
+        calcDate(today, subHours, hass.locale, hass.config, 24),
+        calcDate(today, subHours, hass.locale, hass.config, 0),
       ];
   }
   return [today, today];

src/common/datetime/format_date.ts

@@ -261,36 +261,3 @@ const formatDateWeekdayShortDateMem = memoizeOne(
       timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
     })
 );
-
-/**
- * Format a date as YYYY-MM-DD. Uses "en-CA" because it's the only
- * Intl locale that natively outputs ISO 8601 date format.
- * Locale/config are only used to resolve the time zone.
- */
-export const formatISODateOnly = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => {
-  const timeZone = resolveTimeZone(locale.time_zone, config.time_zone);
-  const formatter = new Intl.DateTimeFormat("en-CA", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    timeZone,
-  });
-  return formatter.format(dateObj);
-};
-
-// 2026-08-10/2026-08-15
-export const formatCallyDateRange = (
-  start: Date,
-  end: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => {
-  const startDate = formatISODateOnly(start, locale, config);
-  const endDate = formatISODateOnly(end, locale, config);
-
-  return `${startDate}/${endDate}`;
-};

src/common/datetime/format_duration.ts

@@ -1,3 +1,4 @@
+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";
@@ -113,7 +114,7 @@ export const formatDuration = (
     case "d": {
       const days = Math.floor(value);
       const hours = Math.floor((value - days) * 24);
-      const input = {
+      const input: DurationInput = {
         days,
         hours,
       };
@@ -122,7 +123,7 @@ export const formatDuration = (
     case "h": {
       const hours = Math.floor(value);
       const minutes = Math.floor((value - hours) * 60);
-      const input = {
+      const input: DurationInput = {
         hours,
         minutes,
       };
@@ -131,7 +132,7 @@ export const formatDuration = (
     case "min": {
       const minutes = Math.floor(value);
       const seconds = Math.floor((value - minutes) * 60);
-      const input = {
+      const input: DurationInput = {
         minutes,
         seconds,
       };

src/common/dom/fire_event.ts

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

src/common/dom/setup-leaflet-map.ts

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

src/common/entity/compute_device_name.ts

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

src/common/entity/compute_entity_name_display.ts

@@ -5,7 +5,6 @@ import { computeAreaName } from "./compute_area_name";
 import { computeDeviceName } from "./compute_device_name";
 import { computeEntityName, entityUseDeviceName } from "./compute_entity_name";
 import { computeFloorName } from "./compute_floor_name";
-import { computeStateName } from "./compute_state_name";
 import { getEntityContext } from "./context/get_entity_context";
 
 const DEFAULT_SEPARATOR = " ";
@@ -30,23 +29,14 @@ export interface EntityNameOptions {
 
 export const computeEntityNameDisplay = (
   stateObj: HassEntity,
-  name: string | EntityNameItem | EntityNameItem[] | undefined,
+  name: EntityNameItem | EntityNameItem[] | undefined,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
   areas: HomeAssistant["areas"],
   floors: HomeAssistant["floors"],
   options?: EntityNameOptions
 ) => {
-  if (typeof name === "string") {
-    return name;
-  }
-
-  // If no name config is provided, fall back to the friendly name
-  if (!name) {
-    return computeStateName(stateObj);
-  }
-
-  let items = ensureArray(name);
+  let items = ensureArray(name || DEFAULT_ENTITY_NAME);
 
   const separator = options?.separator ?? DEFAULT_SEPARATOR;
 

src/common/entity/compute_state_display.ts

@@ -142,8 +142,6 @@ const computeStateToPartsFromEntityAttributes = (
           group: "value",
           decimal: "value",
           fraction: "value",
-          minusSign: "value",
-          plusSign: "value",
           literal: "literal",
           currency: "unit",
         };
@@ -154,7 +152,7 @@ const computeStateToPartsFromEntityAttributes = (
           const type = TYPE_MAP[part.type];
           if (!type) continue;
           const last = valueParts[valueParts.length - 1];
-          // Merge consecutive value parts (e.g. "-" + "12" + "." + "00" → "-12.00")
+          // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
           if (type === "value" && last?.type === "value") {
             last.value += part.value;
           } else {
@@ -255,7 +253,6 @@ const computeStateToPartsFromEntityAttributes = (
       "conversation",
       "event",
       "image",
-      "infrared",
       "input_button",
       "notify",
       "scene",

src/common/entity/context/get_device_context.ts

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

src/common/entity/delete_entity.ts

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

src/common/entity/get_states.ts

@@ -29,7 +29,6 @@ export const FIXED_DOMAIN_STATES = {
   device_tracker: ["home", "not_home"],
   fan: ["on", "off"],
   humidifier: ["on", "off"],
-  infrared: [],
   input_boolean: ["on", "off"],
   input_button: [],
   lawn_mower: ["error", "paused", "mowing", "returning", "docked"],
@@ -242,18 +241,14 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
   },
 };
 
-export const getStatesDomain = (
+export const getStates = (
   hass: HomeAssistant,
-  domain: string,
-  attribute?: string | undefined
+  state: HassEntity,
+  attribute: string | undefined = undefined
 ): string[] => {
+  const domain = computeStateDomain(state);
   const result: string[] = [];
 
-  if (!attribute) {
-    // All entities can have unavailable states
-    result.push(...UNAVAILABLE_STATES);
-  }
-
   if (!attribute && domain in FIXED_DOMAIN_STATES) {
     result.push(...FIXED_DOMAIN_STATES[domain]);
   } else if (
@@ -264,7 +259,19 @@ export const getStatesDomain = (
     result.push(...FIXED_DOMAIN_ATTRIBUTE_STATES[domain][attribute]);
   }
 
+  // Dynamic values based on the entities
   switch (domain) {
+    case "climate":
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      }
+      break;
     case "device_tracker":
     case "person":
       if (!attribute) {
@@ -283,37 +290,6 @@ export const getStatesDomain = (
         );
       }
       break;
-  }
-
-  return result;
-};
-
-export const getStates = (
-  hass: HomeAssistant,
-  state: HassEntity,
-  attribute: string | undefined = undefined
-): string[] => {
-  const domain = computeStateDomain(state);
-  const result: string[] = [];
-
-  // Fixed values based on a domain
-  result.push(...getStatesDomain(hass, domain, attribute));
-
-  // Dynamic values based on the entities
-  switch (domain) {
-    case "climate":
-      if (!attribute) {
-        result.push(...state.attributes.hvac_modes);
-      } else if (attribute === "fan_mode") {
-        result.push(...state.attributes.fan_modes);
-      } else if (attribute === "preset_mode") {
-        result.push(...state.attributes.preset_modes);
-      } else if (attribute === "swing_mode") {
-        result.push(...state.attributes.swing_modes);
-      } else if (attribute === "swing_horizontal_mode") {
-        result.push(...state.attributes.swing_horizontal_modes);
-      }
-      break;
     case "event":
       if (attribute === "event_type") {
         result.push(...state.attributes.event_types);
@@ -374,5 +350,9 @@ 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

@@ -6,9 +6,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
 
-  if (
-    ["button", "event", "infrared", "input_button", "scene"].includes(domain)
-  ) {
+  if (["button", "event", "input_button", "scene"].includes(domain)) {
     return compareState !== UNAVAILABLE;
   }
 
@@ -37,7 +35,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     case "person":
       return compareState !== "not_home";
     case "lawn_mower":
-      return !["docked", "paused"].includes(compareState);
+      return ["mowing", "error"].includes(compareState);
     case "lock":
       return compareState !== "locked";
     case "media_player":

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

@@ -1,8 +0,0 @@
-/**
- * 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/feature-detect/support-popover.ts

@@ -1,11 +0,0 @@
-/**
- * Indicates whether the current browser supports the Popover API.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
- */
-export const popoverSupported = globalThis?.HTMLElement?.prototype
-  ? Object.prototype.hasOwnProperty.call(
-      globalThis.HTMLElement.prototype,
-      "popover"
-    )
-  : false;

src/common/integrations/protocolIntegrationPicked.ts

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

src/common/lit/keyed-es5.ts

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

src/common/number/format_number.ts

@@ -71,6 +71,13 @@ export const formatNumberToParts = (
     ? numberFormatToLocale(localeOptions)
     : undefined;
 
+  // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
+  Number.isNaN =
+    Number.isNaN ||
+    function isNaN(input) {
+      return typeof input === "number" && isNaN(input);
+    };
+
   if (
     localeOptions?.number_format !== NumberFormat.none &&
     !Number.isNaN(Number(num))

src/common/util/copy-clipboard.ts

@@ -1,5 +1,24 @@
 import { deepActiveElement } from "../dom/deep-active-element";
 
+const getClipboardFallbackRoot = (): HTMLElement => {
+  const activeElement = deepActiveElement();
+  if (activeElement instanceof HTMLElement) {
+    let root: Node = activeElement.getRootNode();
+    let host: HTMLElement | null = null;
+
+    while (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+      host = root.host;
+      root = root.host.getRootNode();
+    }
+
+    if (host) {
+      return host;
+    }
+  }
+
+  return document.body;
+};
+
 export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
   if (navigator.clipboard) {
     try {
@@ -10,7 +29,7 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
     }
   }
 
-  const root = rootEl || deepActiveElement()?.getRootNode() || document.body;
+  const root = rootEl || getClipboardFallbackRoot();
 
   const el = document.createElement("textarea");
   el.value = str;

src/common/util/subscribe-one.ts

@@ -1,8 +1,4 @@
-import type {
-  Collection,
-  Connection,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
+import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 
 export const subscribeOne = async <T>(
   conn: Connection,
@@ -17,11 +13,3 @@ 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/axis-label.ts

@@ -5,41 +5,12 @@ import {
   formatDateMonthYear,
   formatDateVeryShort,
   formatDateWeekdayShort,
-  formatDateYear,
 } from "../../common/datetime/format_date";
 import {
   formatTime,
   formatTimeWithSeconds,
 } from "../../common/datetime/format_time";
 
-export function getPeriodicAxisLabelConfig(
-  period: string,
-  locale: FrontendLocaleData,
-  config: HassConfig
-):
-  | {
-      formatter: (value: number) => string;
-    }
-  | undefined {
-  if (period === "month") {
-    return {
-      formatter: (value: number) => {
-        const date = new Date(value);
-        return date.getMonth() === 0
-          ? `{bold|${formatDateMonthYear(date, locale, config)}}`
-          : formatDateMonth(date, locale, config);
-      },
-    };
-  }
-  if (period === "year") {
-    return {
-      formatter: (value: number) =>
-        formatDateYear(new Date(value), locale, config),
-    };
-  }
-  return undefined;
-}
-
 export function formatTimeLabel(
   value: number | Date,
   locale: FrontendLocaleData,

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

@@ -18,16 +18,15 @@ 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 { uiContext } from "../../data/context";
+import { themesContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
 import type { ECOption } from "../../resources/echarts/echarts";
-import type { HomeAssistant, HomeAssistantUI } from "../../types";
+import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
@@ -45,7 +44,6 @@ export type CustomLegendOption = ECOption["legend"] & {
     id?: string;
     secondaryIds?: string[]; // Other dataset IDs that should be controlled by this legend item.
     name: string;
-    value?: string; // Current value to display next to the name in the legend.
     itemStyle?: Record<string, any>;
   }[];
 };
@@ -75,11 +73,8 @@ export class HaChartBase extends LitElement {
   public extraComponents?: any[];
 
   @state()
-  @consume({ context: uiContext, subscribe: true })
-  @transform<HomeAssistantUI, Themes>({
-    transformer: ({ themes }) => themes,
-  })
-  private _themes!: Themes;
+  @consume({ context: themesContext, subscribe: true })
+  _themes!: Themes;
 
   @state() private _isZoomed = false;
 
@@ -95,10 +90,6 @@ export class HaChartBase extends LitElement {
 
   private _lastTapTime?: number;
 
-  private _longPressTimer?: ReturnType<typeof setTimeout>;
-
-  private _longPressTriggered = false;
-
   private _shouldResizeChart = false;
 
   private _resizeAnimationDuration?: number;
@@ -136,7 +127,6 @@ export class HaChartBase extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._legendPointerCancel();
     this._pendingSetup = false;
     while (this._listeners.length) {
       this._listeners.pop()!();
@@ -178,7 +168,6 @@ export class HaChartBase extends LitElement {
           if (!this.options?.dataZoom) {
             this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
           }
-          this._updateSankeyRoam();
           // drag to zoom
           this.chart?.dispatchAction({
             type: "takeGlobalCursor",
@@ -197,7 +186,6 @@ export class HaChartBase extends LitElement {
           if (!this.options?.dataZoom) {
             this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
           }
-          this._updateSankeyRoam();
           this.chart?.dispatchAction({
             type: "takeGlobalCursor",
             key: "dataZoomSelect",
@@ -273,9 +261,6 @@ export class HaChartBase extends LitElement {
     }
     if (Object.keys(chartOptions).length > 0) {
       this._setChartOptions(chartOptions);
-      if (chartOptions.series) {
-        this._updateSankeyRoam();
-      }
     }
   }
 
@@ -294,53 +279,39 @@ export class HaChartBase extends LitElement {
           <div class="chart"></div>
         </div>
         ${this._renderLegend()}
-        <div class="top-controls ${classMap({ small: this.smallControls })}">
-          <slot name="search"></slot>
-          <div
-            class="chart-controls ${classMap({ small: this.smallControls })}"
-          >
-            ${this._isZoomed && !this.hideResetButton
-              ? html`<ha-icon-button
-                  class="zoom-reset"
-                  .path=${mdiRestart}
-                  @click=${this._handleZoomReset}
-                  title=${this.hass.localize(
-                    "ui.components.history_charts.zoom_reset"
-                  )}
-                ></ha-icon-button>`
-              : nothing}
-            <slot name="button"></slot>
-          </div>
+        <div class="chart-controls ${classMap({ small: this.smallControls })}">
+          ${this._isZoomed && !this.hideResetButton
+            ? html`<ha-icon-button
+                class="zoom-reset"
+                .path=${mdiRestart}
+                @click=${this._handleZoomReset}
+                title=${this.hass.localize(
+                  "ui.components.history_charts.zoom_reset"
+                )}
+              ></ha-icon-button>`
+            : nothing}
+          <slot name="button"></slot>
         </div>
       </div>
     `;
   }
 
-  private _getLegendItems() {
+  private _renderLegend() {
     if (!this.options?.legend || !this.data) {
-      return undefined;
+      return nothing;
     }
     const legend = ensureArray(this.options.legend).find(
       (l) => l.show && l.type === "custom"
     ) as CustomLegendOption | undefined;
     if (!legend) {
-      return undefined;
+      return nothing;
     }
     const datasets = ensureArray(this.data);
-    return (
+    const items =
       legend.data ||
       datasets
         .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => ({ id: d.id, name: d.name }))
-    );
-  }
-
-  private _renderLegend() {
-    const items = this._getLegendItems();
-    if (!items) {
-      return nothing;
-    }
-    const datasets = ensureArray(this.data!);
+        .map((d) => ({ id: d.id, name: d.name }));
 
     const isMobile = window.matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -362,14 +333,12 @@ export class HaChartBase extends LitElement {
           let itemStyle: Record<string, any> = {};
           let name = "";
           let id = "";
-          let value = "";
           if (typeof item === "string") {
             name = item;
             id = item;
           } else {
             name = item.name ?? "";
             id = item.id ?? name;
-            value = item.value ?? "";
             itemStyle = item.itemStyle ?? {};
           }
           const dataset =
@@ -385,11 +354,6 @@ export class HaChartBase extends LitElement {
           return html`<li
             .id=${id}
             @click=${this._legendClick}
-            @pointerdown=${this._legendPointerDown}
-            @pointerup=${this._legendPointerCancel}
-            @pointerleave=${this._legendPointerCancel}
-            @pointercancel=${this._legendPointerCancel}
-            @contextmenu=${this._legendContextMenu}
             class=${classMap({ hidden: this._hiddenDatasets.has(id) })}
             .title=${name}
           >
@@ -401,7 +365,6 @@ export class HaChartBase extends LitElement {
               })}
             ></div>
             <div class="label">${name}</div>
-            ${value ? html`<div class="value">${value}</div>` : nothing}
           </li>`;
         })}
         ${items.length > overflowLimit
@@ -460,22 +423,6 @@ 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);
@@ -574,7 +521,6 @@ export class HaChartBase extends LitElement {
         ...this._createOptions(),
         series: this._getSeries(),
       });
-      this._updateSankeyRoam();
     } finally {
       this._loading = false;
     }
@@ -632,7 +578,7 @@ export class HaChartBase extends LitElement {
       id: "dataZoom",
       type: "inside",
       orient: "horizontal",
-      filterMode: this._getDataZoomFilterMode() as any,
+      filterMode: "none",
       xAxisIndex: 0,
       moveOnMouseMove: !this._isTouchDevice || this._isZoomed,
       preventDefaultMouseMove: !this._isTouchDevice || this._isZoomed,
@@ -640,23 +586,6 @@ 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) {
@@ -691,7 +620,7 @@ export class HaChartBase extends LitElement {
             hideOverlap: true,
             ...axis.axisLabel,
           },
-          minInterval: axis.minInterval ?? minInterval,
+          minInterval,
         } as XAXisOption;
       });
     }
@@ -1014,26 +943,6 @@ 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]
       : [
@@ -1058,37 +967,6 @@ 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) {
@@ -1132,52 +1010,11 @@ export class HaChartBase extends LitElement {
     fireEvent(this, "chart-zoom", { start, end });
   }
 
-  // Long-press to solo on touch/pen devices (500ms, consistent with action-handler-directive)
-  private _legendPointerDown(ev: PointerEvent) {
-    // Mouse uses Ctrl/Cmd+click instead
-    if (ev.pointerType === "mouse") {
-      return;
-    }
-    const id = (ev.currentTarget as HTMLElement)?.id;
-    if (!id) {
-      return;
-    }
-    this._longPressTriggered = false;
-    this._longPressTimer = setTimeout(() => {
-      this._longPressTriggered = true;
-      this._longPressTimer = undefined;
-      this._soloLegend(id);
-    }, 500);
-  }
-
-  private _legendPointerCancel() {
-    if (this._longPressTimer) {
-      clearTimeout(this._longPressTimer);
-      this._longPressTimer = undefined;
-    }
-  }
-
-  private _legendContextMenu(ev: Event) {
-    if (this._longPressTimer || this._longPressTriggered) {
-      ev.preventDefault();
-    }
-  }
-
-  private _legendClick(ev: MouseEvent) {
+  private _legendClick(ev: any) {
     if (!this.chart) {
       return;
     }
-    if (this._longPressTriggered) {
-      this._longPressTriggered = false;
-      return;
-    }
-    const id = (ev.currentTarget as HTMLElement)?.id;
-    // Cmd+click on Mac (Ctrl+click is right-click there), Ctrl+click elsewhere
-    const soloModifier = isMac ? ev.metaKey : ev.ctrlKey;
-    if (soloModifier) {
-      this._soloLegend(id);
-      return;
-    }
+    const id = ev.currentTarget?.id;
     if (this._hiddenDatasets.has(id)) {
       this._getAllIdsFromLegend(this.options, id).forEach((i) =>
         this._hiddenDatasets.delete(i)
@@ -1192,60 +1029,6 @@ export class HaChartBase extends LitElement {
     this.requestUpdate("_hiddenDatasets");
   }
 
-  private _soloLegend(id: string) {
-    const allIds = this._getAllLegendIds();
-    const clickedIds = this._getAllIdsFromLegend(this.options, id);
-    const otherIds = allIds.filter((i) => !clickedIds.includes(i));
-
-    const clickedIsOnlyVisible =
-      clickedIds.every((i) => !this._hiddenDatasets.has(i)) &&
-      otherIds.every((i) => this._hiddenDatasets.has(i));
-
-    if (clickedIsOnlyVisible) {
-      // Already solo'd on this item — restore all series to visible
-      for (const hiddenId of [...this._hiddenDatasets]) {
-        this._hiddenDatasets.delete(hiddenId);
-        fireEvent(this, "dataset-unhidden", { id: hiddenId });
-      }
-    } else {
-      // Solo: hide every other series, unhide clicked if it was hidden
-      for (const otherId of otherIds) {
-        if (!this._hiddenDatasets.has(otherId)) {
-          this._hiddenDatasets.add(otherId);
-          fireEvent(this, "dataset-hidden", { id: otherId });
-        }
-      }
-      for (const clickedId of clickedIds) {
-        if (this._hiddenDatasets.has(clickedId)) {
-          this._hiddenDatasets.delete(clickedId);
-          fireEvent(this, "dataset-unhidden", { id: clickedId });
-        }
-      }
-    }
-    this.requestUpdate("_hiddenDatasets");
-  }
-
-  private _getAllLegendIds(): string[] {
-    const items = this._getLegendItems();
-    if (!items) {
-      return [];
-    }
-    const allIds = new Set<string>();
-    for (const item of items) {
-      const primaryId =
-        typeof item === "string"
-          ? item
-          : ((item.id as string) ?? (item.name as string) ?? "");
-      for (const expandedId of this._getAllIdsFromLegend(
-        this.options,
-        primaryId
-      )) {
-        allIds.add(expandedId);
-      }
-    }
-    return [...allIds];
-  }
-
   private _toggleExpandedLegend() {
     this.expandLegend = !this.expandLegend;
     setTimeout(() => {
@@ -1326,35 +1109,16 @@ export class HaChartBase extends LitElement {
       height: 100%;
       width: 100%;
     }
-    .top-controls {
-      position: absolute;
-      top: var(--ha-space-4);
-      inset-inline-start: var(--ha-space-4);
-      inset-inline-end: var(--ha-space-1);
-      display: flex;
-      align-items: flex-start;
-      gap: var(--ha-space-2);
-      z-index: 1;
-      pointer-events: none;
-    }
-    ::slotted([slot="search"]) {
-      flex: 1 1 250px;
-      min-width: 0;
-      max-width: 250px;
-      pointer-events: auto;
-    }
     .chart-controls {
+      position: absolute;
+      top: 16px;
+      right: 4px;
       display: flex;
       flex-direction: column;
       gap: var(--ha-space-1);
-      margin-inline-start: auto;
-      flex-shrink: 0;
-      pointer-events: auto;
-    }
-    .top-controls.small {
-      top: 0;
     }
     .chart-controls.small {
+      top: 0;
       flex-direction: row;
     }
     .chart-controls ha-icon-button,
@@ -1402,9 +1166,6 @@ export class HaChartBase extends LitElement {
     .chart-legend.multiple-items li {
       max-width: 220px;
     }
-    .chart-legend.multiple-items li:has(.value) {
-      max-width: 300px;
-    }
     .chart-legend .hidden {
       color: var(--secondary-text-color);
     }
@@ -1413,12 +1174,6 @@ export class HaChartBase extends LitElement {
       white-space: nowrap;
       overflow: hidden;
     }
-    .chart-legend .value {
-      color: var(--secondary-text-color);
-      margin-inline-start: var(--ha-space-1);
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
     .chart-legend .bullet {
       border-width: 1px;
       border-style: solid;
@@ -1459,6 +1214,5 @@ declare global {
       start: number;
       end: number;
     };
-    "chart-sankeyroam": { zoom: number };
   }
 }

src/components/chart/ha-network-graph.ts

@@ -1,9 +1,7 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
-
 import type {
   CallbackDataParams,
   TopLevelFormatterParams,
@@ -65,8 +63,6 @@ export interface NetworkData {
   categories?: { name: string; symbol: string }[];
 }
 
-const PHYSICS_DISABLE_THRESHOLD = 512;
-
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
 let GraphChart: typeof import("echarts/lib/chart/graph/install");
 
@@ -80,23 +76,11 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     params: TopLevelFormatterParams
   ) => string;
 
-  /**
-   * Optional callback that returns additional searchable strings for a node.
-   * These are matched against the search filter in addition to the node's name and context.
-   */
-  @property({ attribute: false }) public searchableAttributes?: (
-    nodeId: string
-  ) => string[];
-
-  @property({ attribute: false }) public searchFilter = "";
-
   public hass!: HomeAssistant;
 
-  @state() private _highlightedNodes?: Set<string>;
-
   @state() private _reducedMotion = false;
 
-  @state() private _physicsEnabled?: boolean;
+  @state() private _physicsEnabled = true;
 
   @state() private _showLabels = true;
 
@@ -124,14 +108,6 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
-    if (this._physicsEnabled === undefined && this.data?.nodes?.length > 1) {
-      this._physicsEnabled =
-        this.data.nodes.length <= PHYSICS_DISABLE_THRESHOLD;
-    }
-  }
-
   protected render() {
     if (!GraphChart || !this.data.nodes?.length) {
       return nothing;
@@ -141,24 +117,19 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
 
-    const hasHighlightedNodes =
-      this._highlightedNodes && this._highlightedNodes.size > 0;
-
     return html`<ha-chart-base
       .hass=${this.hass}
       .data=${this._getSeries(
         this.data,
-        this._physicsEnabled ?? false,
+        this._physicsEnabled,
         this._reducedMotion,
         this._showLabels,
-        isMobile,
-        hasHighlightedNodes
+        isMobile
       )}
       .options=${this._createOptions(this.data?.categories)}
       height="100%"
       .extraComponents=${[GraphChart]}
     >
-      <slot name="search" slot="search"></slot>
       <slot name="button" slot="button"></slot>
       <ha-icon-button
         slot="button"
@@ -194,7 +165,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
           ...category,
           icon: category.symbol,
         })),
-        bottom: 8,
+        top: 8,
       },
       dataZoom: {
         type: "inside",
@@ -204,56 +175,13 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     deepEqual
   );
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    if (changedProperties.has("searchFilter")) {
-      const filter = this.searchFilter;
-      if (!filter) {
-        this._highlightedNodes = undefined;
-      } else {
-        const lowerFilter = filter.toLowerCase();
-        const matchingIds = new Set<string>();
-        for (const node of this.data.nodes) {
-          if (this._nodeMatchesFilter(node, lowerFilter)) {
-            matchingIds.add(node.id);
-          }
-        }
-        this._highlightedNodes = matchingIds;
-      }
-      this._applyHighlighting();
-      this._updateMouseoverHandler();
-    }
-  }
-
-  private _nodeMatchesFilter(node: NetworkNode, lowerFilter: string): boolean {
-    if (node.name?.toLowerCase().includes(lowerFilter)) {
-      return true;
-    }
-    if (node.context?.toLowerCase().includes(lowerFilter)) {
-      return true;
-    }
-    if (node.id?.toLowerCase().includes(lowerFilter)) {
-      return true;
-    }
-    if (this.searchableAttributes) {
-      const extraValues = this.searchableAttributes(node.id);
-      for (const value of extraValues) {
-        if (value?.toLowerCase().includes(lowerFilter)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
   private _getSeries = memoizeOne(
     (
       data: NetworkData,
       physicsEnabled: boolean,
       reducedMotion: boolean,
       showLabels: boolean,
-      isMobile: boolean,
-      hasHighlightedNodes?: boolean
+      isMobile: boolean
     ) => ({
       id: "network",
       type: "graph",
@@ -286,7 +214,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
         },
       },
       emphasis: {
-        focus: hasHighlightedNodes ? "self" : isMobile ? "none" : "adjacency",
+        focus: isMobile ? "none" : "adjacency",
       },
       force: {
         repulsion: [400, 600],
@@ -434,68 +362,6 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _applyHighlighting() {
-    const chart = this._baseChart?.chart;
-    if (!chart) {
-      return;
-    }
-    // Reset all nodes to normal opacity first
-    chart.dispatchAction({ type: "downplay" });
-
-    const highlighted = this._highlightedNodes;
-    if (!highlighted || highlighted.size === 0) {
-      return;
-    }
-    const dataIndices: number[] = [];
-    this.data.nodes.forEach((node, index) => {
-      if (highlighted.has(node.id)) {
-        dataIndices.push(index);
-      }
-    });
-    if (dataIndices.length > 0) {
-      chart.dispatchAction({ type: "highlight", dataIndex: dataIndices });
-    }
-  }
-
-  private _emphasisGuardHandler?: () => void;
-
-  private _updateMouseoverHandler() {
-    const chart = this._baseChart?.chart;
-    if (!chart) {
-      return;
-    }
-
-    // When there are highlighted nodes, re-apply highlighting on hover
-    // and mouseout to prevent hover from overriding the search state
-    if (this._highlightedNodes && this._highlightedNodes.size > 0) {
-      if (this._emphasisGuardHandler) {
-        // Guard already set
-        return;
-      }
-      this._emphasisGuardHandler = () => {
-        this._applyHighlighting();
-      };
-      chart.on("mouseover", this._emphasisGuardHandler);
-      chart.on("mouseout", this._emphasisGuardHandler);
-    } else {
-      if (!this._emphasisGuardHandler) {
-        return;
-      }
-      chart.off("mouseover", this._emphasisGuardHandler);
-      chart.off("mouseout", this._emphasisGuardHandler);
-      this._emphasisGuardHandler = undefined;
-    }
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._emphasisGuardHandler) {
-      this._baseChart?.chart?.off("mouseover", this._emphasisGuardHandler);
-      this._baseChart?.chart?.off("mouseout", this._emphasisGuardHandler);
-      this._emphasisGuardHandler = undefined;
-    }
-  }
-
   private _togglePhysics() {
     this._saveNodePositions();
     this._physicsEnabled = !this._physicsEnabled;

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

@@ -64,8 +64,6 @@ export class HaSankeyChart extends LitElement {
 
   public chart?: EChartsType;
 
-  private _currentZoom = 1;
-
   @state() private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect,
   });
@@ -86,13 +84,11 @@ 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>`;
   }
 
@@ -113,10 +109,6 @@ 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)
@@ -188,7 +180,6 @@ export class HaSankeyChart extends LitElement {
       })),
       links,
       draggable: false,
-      scaleLimit: { min: 1, max: 4 },
       orient: this.vertical ? "vertical" : "horizontal",
       nodeWidth: 15,
       nodeGap: NODE_GAP,
@@ -219,7 +210,7 @@ export class HaSankeyChart extends LitElement {
               ""
             );
           const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
-          const availableWidth = (params.rect.width + 6) * this._currentZoom;
+          const availableWidth = params.rect.width + 6;
           const fontSize = Math.min(
             FONT_SIZE,
             (availableWidth / wordWidth) * FONT_SIZE
@@ -232,7 +223,7 @@ export class HaSankeyChart extends LitElement {
           };
         }
 
-        const availableHeight = (params.rect.height + 8) * this._currentZoom; // account for the margin
+        const availableHeight = params.rect.height + 8; // account for the margin
         const fontSize = Math.min(
           (availableHeight / params.labelRect.height) * FONT_SIZE,
           FONT_SIZE

src/components/chart/round-caps.ts

@@ -1,103 +0,0 @@
-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-chart-line.ts

@@ -28,13 +28,6 @@ const safeParseFloat = (value) => {
   return isFinite(parsed) ? parsed : null;
 };
 
-const CLIMATE_MODE_CONFIGS = [
-  { mode: "heat", action: "heating", cssVar: "--state-climate-heat-color" },
-  { mode: "cool", action: "cooling", cssVar: "--state-climate-cool-color" },
-  { mode: "dry", action: "drying", cssVar: "--state-climate-dry-color" },
-  { mode: "fan_only", action: "fan", cssVar: "--state-climate-fan_only-color" },
-] as const;
-
 @customElement("state-history-chart-line")
 export class StateHistoryChartLine extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -246,9 +239,7 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("fitYData") ||
       changedProps.has("paddingYAxis") ||
       changedProps.has("_visualMap") ||
-      changedProps.has("_yWidth") ||
-      (changedProps.has("hass") &&
-        this._hasEntityStatesChanged(changedProps.get("hass")))
+      changedProps.has("_yWidth")
     ) {
       const rtl = computeRTL(this.hass);
       let minYAxis: number | ((values: { min: number }) => number) | undefined =
@@ -305,19 +296,6 @@ export class StateHistoryChartLine extends LitElement {
         legend: {
           type: "custom",
           show: this.showNames,
-          data: this._chartData
-            .map((d, i) => ({ dataset: d, entityId: this._entityIds[i] }))
-            .filter((item) => !(item.dataset as LineSeriesOption).areaStyle)
-            .map((item) => {
-              const stateObj = this.hass.states[item.entityId];
-              return {
-                id: item.dataset.id as string,
-                name: item.dataset.name as string,
-                value: stateObj
-                  ? this.hass.formatEntityState(stateObj)
-                  : undefined,
-              };
-            }),
         },
         grid: {
           top: 15,
@@ -338,13 +316,6 @@ export class StateHistoryChartLine extends LitElement {
     }
   }
 
-  private _hasEntityStatesChanged(oldHass: HomeAssistant): boolean {
-    return this._entityIds.some(
-      (entityId) =>
-        this.hass.states[entityId]?.state !== oldHass.states[entityId]?.state
-    );
-  }
-
   private _generateData() {
     let colorIndex = 0;
     const computedStyles = getComputedStyle(this);
@@ -436,18 +407,23 @@ export class StateHistoryChartLine extends LitElement {
           (entityState) => entityState.attributes?.hvac_action
         );
 
-        const activeModes = CLIMATE_MODE_CONFIGS.map(
-          ({ mode, action, cssVar }) => {
-            const isActive =
-              domain === "climate" && hasHvacAction
-                ? (entityState: LineChartState) =>
-                    CLIMATE_HVAC_ACTION_TO_MODE[
-                      entityState.attributes?.hvac_action
-                    ] === mode
-                : (entityState: LineChartState) => entityState.state === mode;
-            return { action, cssVar, isActive };
-          }
-        ).filter(({ isActive }) => states.states.some(isActive));
+        const isHeating =
+          domain === "climate" && hasHvacAction
+            ? (entityState: LineChartState) =>
+                CLIMATE_HVAC_ACTION_TO_MODE[
+                  entityState.attributes?.hvac_action
+                ] === "heat"
+            : (entityState: LineChartState) => entityState.state === "heat";
+        const isCooling =
+          domain === "climate" && hasHvacAction
+            ? (entityState: LineChartState) =>
+                CLIMATE_HVAC_ACTION_TO_MODE[
+                  entityState.attributes?.hvac_action
+                ] === "cool"
+            : (entityState: LineChartState) => entityState.state === "cool";
+
+        const hasHeat = states.states.some(isHeating);
+        const hasCool = states.states.some(isCooling);
         // We differentiate between thermostats that have a target temperature
         // range versus ones that have just a target temperature
 
@@ -468,19 +444,33 @@ export class StateHistoryChartLine extends LitElement {
                 "component.climate.entity_component._.state_attributes.current_temperature.name"
               )
         );
-        for (const { action, cssVar } of activeModes) {
+        if (hasHeat) {
           addDataSet(
-            `${states.entity_id}-${action}`,
+            states.entity_id + "-heating",
             this.showNames
-              ? this.hass.localize(`ui.card.climate.${action}`, {
-                  name: name,
-                })
+              ? this.hass.localize("ui.card.climate.heating", { name: name })
               : this.hass.localize(
-                  `component.climate.entity_component._.state_attributes.hvac_action.state.${action}`
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.heating"
                 ),
-            computedStyles.getPropertyValue(cssVar),
+            computedStyles.getPropertyValue("--state-climate-heat-color"),
             true
           );
+          // The "heating" series uses steppedArea to shade the area below the current
+          // temperature when the thermostat is calling for heat.
+        }
+        if (hasCool) {
+          addDataSet(
+            states.entity_id + "-cooling",
+            this.showNames
+              ? this.hass.localize("ui.card.climate.cooling", { name: name })
+              : this.hass.localize(
+                  "component.climate.entity_component._.state_attributes.hvac_action.state.cooling"
+                ),
+            computedStyles.getPropertyValue("--state-climate-cool-color"),
+            true
+          );
+          // The "cooling" series uses steppedArea to shade the area below the current
+          // temperature when the thermostat is calling for heat.
         }
 
         if (hasTargetRange) {
@@ -528,8 +518,11 @@ export class StateHistoryChartLine extends LitElement {
             entityState.attributes.current_temperature
           );
           const series = [curTemp];
-          for (const { isActive } of activeModes) {
-            series.push(isActive(entityState) ? curTemp : null);
+          if (hasHeat) {
+            series.push(isHeating(entityState) ? curTemp : null);
+          }
+          if (hasCool) {
+            series.push(isCooling(entityState) ? curTemp : null);
           }
           if (hasTargetRange) {
             const targetHigh = safeParseFloat(

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

@@ -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 "../ha-button";
+import type { StateHistoryChartLine } from "./state-history-chart-line";
+import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
+import "../ha-fab";
 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.config, "history")) {
+    if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -150,14 +150,16 @@ export class StateHistoryCharts extends LitElement {
             this._renderHistoryItem(item, index)
           )}`}
       ${this.syncCharts && this._hasZoomedCharts
-        ? html`<ha-button
-            size="large"
+        ? html`<ha-fab
+            slot="fab"
             class="reset-button"
+            .label=${this.hass.localize(
+              "ui.components.history_charts.zoom_reset"
+            )}
             @click=${this._handleGlobalZoomReset}
           >
-            <ha-svg-icon slot="start" .path=${mdiRestart}></ha-svg-icon>
-            ${this.hass.localize("ui.components.history_charts.zoom_reset")}
-          </ha-button>`
+            <ha-svg-icon slot="icon" .path=${mdiRestart}></ha-svg-icon>
+          </ha-fab>`
         : nothing}
     `;
   }
@@ -446,7 +448,6 @@ 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

@@ -27,15 +27,12 @@ import {
   getDisplayUnit,
   getStatisticLabel,
   getStatisticMetadata,
-  isExternalStatistic,
   statisticsHaveType,
 } from "../../data/recorder";
 import type { ECOption } from "../../resources/echarts/echarts";
 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",
@@ -68,11 +65,7 @@ export class StatisticsChart extends LitElement {
   @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
-  @property({ attribute: false }) public chartType:
-    | "line"
-    | "line-stack"
-    | "bar"
-    | "bar-stack" = "line";
+  @property({ attribute: false }) public chartType: "line" | "bar" = "line";
 
   @property({ attribute: false }) public minYAxis?: number;
 
@@ -154,7 +147,7 @@ export class StatisticsChart extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!isComponentLoaded(this.hass.config, "history")) {
+    if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
@@ -299,22 +292,6 @@ export class StatisticsChart extends LitElement {
           type: "time",
           min: startTime,
           max: this.endTime,
-          ...(this.period === "month" && {
-            minInterval: 28 * 24 * 3600 * 1000,
-            axisLabel: getPeriodicAxisLabelConfig(
-              "month",
-              this.hass.locale,
-              this.hass.config
-            ),
-          }),
-          ...(this.period === "year" && {
-            minInterval: 365 * 24 * 3600 * 1000,
-            axisLabel: getPeriodicAxisLabelConfig(
-              "year",
-              this.hass.locale,
-              this.hass.config
-            ),
-          }),
         },
         {
           id: "hiddenAxis",
@@ -331,7 +308,7 @@ export class StatisticsChart extends LitElement {
         },
         position: computeRTL(this.hass) ? "right" : "left",
         scale:
-          this.chartType.startsWith("line") ||
+          this.chartType !== "bar" ||
           this.logarithmicScale ||
           minYAxis !== undefined ||
           maxYAxis !== undefined,
@@ -391,8 +368,6 @@ 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: {
@@ -423,31 +398,7 @@ export class StatisticsChart extends LitElement {
       endTime = new Date();
     }
 
-    // Check if we need to display most recent data. Allow 10m of leeway for "now",
-    // because stats are 5 minute aggregated.
-    // Use same now point for all statistics even if processing time means the
-    // state value is actually from a slightly later time. Otherwise the points
-    // end up separated slightly and disappear from the tooltips.
-    const now = new Date();
-    const displayCurrentState = now.getTime() - endTime.getTime() <= 600000;
-
-    // Try to determine chart unit if it has not already been set explicitly
-    if (!this.unit) {
-      let unit: string | undefined | null;
-      statisticsData.forEach(([statistic_id, _stats]) => {
-        const meta = statisticsMetaData?.[statistic_id];
-        const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
-        if (unit === undefined) {
-          unit = statisticUnit;
-        } else if (unit !== null && unit !== statisticUnit) {
-          // Clear unit if not all statistics have same unit
-          unit = null;
-        }
-      });
-      if (unit) {
-        this.unit = unit;
-      }
-    }
+    let unit: string | undefined | null;
 
     const names = this.names || {};
     statisticsData.forEach(([statistic_id, stats]) => {
@@ -457,6 +408,18 @@ export class StatisticsChart extends LitElement {
         name = getStatisticLabel(this.hass, statistic_id, meta);
       }
 
+      if (!this.unit) {
+        if (unit === undefined) {
+          unit = getDisplayUnit(this.hass, statistic_id, meta);
+        } else if (
+          unit !== null &&
+          unit !== getDisplayUnit(this.hass, statistic_id, meta)
+        ) {
+          // Clear unit if not all statistics have same unit
+          unit = null;
+        }
+      }
+
       // array containing [value1, value2, etc]
       let prevValues: (number | null)[][] | null = null;
       let prevEndTime: Date | undefined;
@@ -478,17 +441,19 @@ export class StatisticsChart extends LitElement {
         }
         statDataSets.forEach((d, i) => {
           if (
-            chartType === "line" &&
+            this.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([prevEndTime, ...prevValues[i]!]);
+            d.data!.push(
+              this._transformDataValue([prevEndTime, ...prevValues[i]!])
+            );
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push([start, ...dataValues[i]!]);
+          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -508,8 +473,7 @@ export class StatisticsChart extends LitElement {
         this.statTypes.includes("max") && statisticsHaveType(stats, "max");
       const hasMin =
         this.statTypes.includes("min") && statisticsHaveType(stats, "min");
-      const drawBands =
-        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+      const drawBands = [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
 
       const hasState = this.statTypes.includes("state");
 
@@ -541,8 +505,8 @@ export class StatisticsChart extends LitElement {
           const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
-            type: chartType,
-            smooth: chartType === "line" ? 0.4 : false,
+            type: this.chartType,
+            smooth: this.chartType === "line" ? 0.4 : false,
             cursor: "default",
             data: [],
             name: name
@@ -561,23 +525,16 @@ export class StatisticsChart extends LitElement {
               width: 1.5,
             },
             itemStyle:
-              chartType === "bar"
+              this.chartType === "bar"
                 ? {
+                    borderRadius: [4, 4, 0, 0],
                     borderColor,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: chartType === "bar" ? backgroundColor : borderColor,
+            color: this.chartType === "bar" ? backgroundColor : borderColor,
           };
-          if (chartStacked) {
-            series.stack = `band-stacked`;
-            series.stackStrategy = "samesign";
-            if (chartType === "line") {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
-            }
-          } else if (band && chartType === "line") {
+          if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
             if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
@@ -586,7 +543,7 @@ export class StatisticsChart extends LitElement {
               (series as LineSeriesOption).areaStyle = undefined;
             } else {
               series.stackOrder = "seriesAsc";
-              if (type === bandTop) {
+              if (drawBands && type === bandTop) {
                 (series as LineSeriesOption).areaStyle = {
                   color: color + "3F",
                 };
@@ -634,7 +591,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (
             type === bandTop &&
-            chartType === "line" &&
+            this.chartType === "line" &&
             drawBands &&
             !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
           ) {
@@ -655,24 +612,24 @@ export class StatisticsChart extends LitElement {
         }
       });
 
-      // For line charts, close out the last stat segment at prevEndTime
+      // Close out the last stat segment at prevEndTime
       const lastEndTime = prevEndTime;
       const lastValues = prevValues;
-      if (chartType === "line" && lastEndTime && lastValues) {
+      if (lastEndTime && lastValues) {
         statDataSets.forEach((d, i) => {
-          d.data!.push([lastEndTime, ...lastValues[i]!]);
+          d.data!.push(
+            this._transformDataValue([lastEndTime, ...lastValues[i]!])
+          );
         });
       }
 
-      // Show current state if required, and units match (or are unknown)
-      const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
-      if (
-        displayCurrentState &&
-        !chartStacked &&
-        (!this.unit || !statisticUnit || this.unit === statisticUnit)
-      ) {
-        // Skip external statistics
-        if (!isExternalStatistic(statistic_id)) {
+      // Append current state if viewing recent data
+      const now = new Date();
+      // allow 10m of leeway for "now", because stats are 5 minute aggregated
+      const isUpToNow = now.getTime() - endTime.getTime() <= 600000;
+      if (isUpToNow) {
+        // Skip external statistics (they have ":" in the ID)
+        if (!statistic_id.includes(":")) {
           const stateObj = this.hass.states[statistic_id];
           if (stateObj) {
             const currentValue = parseFloat(stateObj.state);
@@ -689,7 +646,7 @@ export class StatisticsChart extends LitElement {
                 const val: (number | null)[] = [];
                 if (
                   type === bandTop &&
-                  chartType === "line" &&
+                  this.chartType === "line" &&
                   drawBands &&
                   !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
                 ) {
@@ -699,7 +656,9 @@ export class StatisticsChart extends LitElement {
                 } else {
                   val.push(currentValue);
                 }
-                statDataSets[i].data!.push([now, ...val]);
+                statDataSets[i].data!.push(
+                  this._transformDataValue([now, ...val])
+                );
               });
             }
           }
@@ -711,11 +670,8 @@ export class StatisticsChart extends LitElement {
       Array.prototype.push.apply(legendData, statLegendData);
     });
 
-    if (chartType === "bar") {
-      fillDataGapsAndRoundCaps(
-        totalDataSets as BarSeriesOption[],
-        chartStacked
-      );
+    if (unit) {
+      this.unit = unit;
     }
 
     legendData.forEach(({ id, name, color, borderColor }) => {
@@ -727,7 +683,7 @@ export class StatisticsChart extends LitElement {
         itemStyle: {
           borderColor,
         },
-        type: chartType,
+        type: this.chartType,
         data: [],
         xAxisIndex: 1,
       });
@@ -745,6 +701,13 @@ 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-labels.ts

@@ -2,6 +2,7 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { stringCompare } from "../../common/string/compare";
@@ -52,15 +53,16 @@ class HaDataTableLabels extends LitElement {
   }
 
   private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
+    const color = label?.color ? computeCssColor(label.color) : undefined;
     return html`
       <ha-label
         dense
         role="button"
         tabindex="0"
-        .color=${label.color}
         .item=${label}
         @click=${clickAction ? this._labelClicked : undefined}
         @keydown=${clickAction ? this._labelClicked : undefined}
+        style=${color ? `--color: ${color}` : ""}
         .description=${label.description}
       >
         ${label?.icon
@@ -100,6 +102,10 @@ class HaDataTableLabels extends LitElement {
       position: fixed;
       flex-wrap: nowrap;
     }
+    ha-label {
+      --ha-label-background-color: var(--color, var(--grey-color));
+      --ha-label-background-opacity: 0.5;
+    }
     .plus {
       --ha-label-background-color: transparent;
       border: 1px solid var(--divider-color);

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

@@ -1,4 +1,3 @@
-import { consume, type ContextType } from "@lit/context";
 import { mdiArrowDown, mdiArrowUp, mdiChevronUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -16,25 +15,19 @@ 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";
-import "../input/ha-input-search";
+import "../search-input";
 import { filterData, sortData } from "./sort-filter";
 
 export interface RowClickedEvent {
@@ -108,13 +101,12 @@ export interface DataTableRowData {
 export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
 
 const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
-const AUTO_FOCUS_ALLOWED_ACTIVE_TAGS = ["BODY", "HTML", "HOME-ASSISTANT"];
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: ContextType<typeof internationalizationContext>;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -168,10 +160,6 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @query(".mdc-data-table__header-row") private _headerRow?: HTMLDivElement;
-
-  @query("lit-virtualizer") private _scroller?: HTMLElement;
-
   @state() private _collapsedGroups: string[] = [];
 
   @state() private _lastSelectedRowId: string | null = null;
@@ -248,30 +236,16 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated(changedProps: PropertyValues) {
-    if (!this._headerRow) {
+  protected updated() {
+    const header = this.renderRoot.querySelector(".mdc-data-table__header-row");
+    if (!header) {
       return;
     }
-
-    if (this._headerRow.scrollWidth > this._headerRow.clientWidth) {
-      this.style.setProperty(
-        "--table-row-width",
-        `${this._headerRow.scrollWidth}px`
-      );
+    if (header.scrollWidth > header.clientWidth) {
+      this.style.setProperty("--table-row-width", `${header.scrollWidth}px`);
     } else {
       this.style.removeProperty("--table-row-width");
     }
-
-    const activeElement = deepActiveElement();
-
-    if (
-      changedProps.has("selectable") ||
-      (!this.autoHeight &&
-        activeElement &&
-        AUTO_FOCUS_ALLOWED_ACTIVE_TAGS.includes(activeElement.tagName))
-    ) {
-      this._focusScroller();
-    }
   }
 
   public willUpdate(properties: PropertyValues) {
@@ -404,6 +378,8 @@ export class HaDataTable extends LitElement {
   );
 
   protected render() {
+    const localize = this.localizeFunc || this.hass.localize;
+
     const columns = this._sortedColumns(this.columns, this.columnOrder);
 
     const renderRow = (row: DataTableRowData, index: number) =>
@@ -415,11 +391,11 @@ export class HaDataTable extends LitElement {
           ${this._filterable
             ? html`
                 <div class="table-header">
-                  <ha-input-search
-                    appearance="outlined"
-                    @input=${this._handleSearchChange}
-                    .placeholder=${this.searchLabel}
-                  ></ha-input-search>
+                  <search-input
+                    .hass=${this.hass}
+                    @value-changed=${this._handleSearchChange}
+                    .label=${this.searchLabel}
+                  ></search-input>
                 </div>
               `
             : ""}
@@ -527,10 +503,7 @@ export class HaDataTable extends LitElement {
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText ||
-                      this._i18n?.localize?.(
-                        "ui.components.data-table.no-data"
-                      ) ||
-                      "No data"}
+                      localize("ui.components.data-table.no-data")}
                     </div>
                   </div>
                 </div>
@@ -539,12 +512,10 @@ export class HaDataTable extends LitElement {
                 <lit-virtualizer
                   scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
-                  tabindex=${ifDefined(!this.autoHeight ? "0" : undefined)}
                   @scroll=${this._saveScrollPos}
                   .items=${this._groupData(
                     this._filteredData,
-                    this._i18n?.localize,
-                    this._i18n?.locale,
+                    localize,
                     this.appendRow,
                     this.groupColumn,
                     this.groupOrder,
@@ -714,7 +685,7 @@ export class HaDataTable extends LitElement {
             this._sortColumns[this.sortColumn],
             this.sortDirection,
             this.sortColumn,
-            this._i18n?.locale?.language
+            this.hass.locale.language
           )
         : filteredData;
 
@@ -740,8 +711,7 @@ export class HaDataTable extends LitElement {
   private _groupData = memoizeOne(
     (
       data: DataTableRowData[],
-      localize: LocalizeFunc | undefined,
-      locale: FrontendLocaleData | undefined,
+      localize: LocalizeFunc,
       appendRow,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
@@ -765,7 +735,11 @@ export class HaDataTable extends LitElement {
           )
             .sort((a, b) => {
               if (!groupOrder && isGroupSortColumn) {
-                const comparison = stringCompare(a, b, locale?.language);
+                const comparison = stringCompare(
+                  a,
+                  b,
+                  this.hass.locale.language
+                );
                 if (sortDirection === "asc") {
                   return comparison;
                 }
@@ -786,7 +760,7 @@ export class HaDataTable extends LitElement {
               return stringCompare(
                 ["", "-", "—"].includes(a) ? "zzz" : a,
                 ["", "-", "—"].includes(b) ? "zzz" : b,
-                locale?.language
+                this.hass.locale.language
               );
             })
             .reduce(
@@ -813,15 +787,14 @@ export class HaDataTable extends LitElement {
               >
                 <ha-icon-button
                   .path=${mdiChevronUp}
-                  .label=${localize?.(
+                  .label=${this.hass.localize(
                     `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
-                  ) || (collapsed ? "Expand" : "Collapse")}
+                  )}
                   class=${collapsed ? "collapsed" : ""}
                 >
                 </ha-icon-button>
                 ${groupName === UNDEFINED_GROUP_KEY
-                  ? localize?.("ui.components.data-table.ungrouped") ||
-                    "Ungrouped"
+                  ? localize("ui.components.data-table.ungrouped")
                   : groupName || ""}
               </div>`,
             });
@@ -852,10 +825,8 @@ export class HaDataTable extends LitElement {
     ): Promise<DataTableRowData[]> => filterData(data, columns, filter)
   );
 
-  private _handleHeaderClick(
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { columnId: string }>
-  ) {
-    const columnId = ev.currentTarget.columnId;
+  private _handleHeaderClick(ev: Event) {
+    const columnId = (ev.currentTarget as any).columnId;
     if (!this.columns[columnId].sortable) {
       return;
     }
@@ -873,12 +844,11 @@ export class HaDataTable extends LitElement {
       column: columnId,
       direction: this.sortDirection,
     });
-
-    this._focusScroller();
   }
 
-  private _handleHeaderRowCheckboxClick(ev: HASSDomTargetEvent<HaCheckbox>) {
-    if (ev.target.checked) {
+  private _handleHeaderRowCheckboxClick(ev: Event) {
+    const checkbox = ev.target as HaCheckbox;
+    if (checkbox.checked) {
       this.selectAll();
     } else {
       this._checkedRows = [];
@@ -887,25 +857,13 @@ export class HaDataTable extends LitElement {
     this._lastSelectedRowId = null;
   }
 
-  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;
+  private _handleRowCheckboxClicked = (ev: Event) => {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const rowId = (checkbox as any).rowId;
 
     const groupedData = this._groupData(
       this._filteredData,
-      this._i18n?.localize,
-      this._i18n?.locale,
+      this.localizeFunc || this.hass.localize,
       this.appendRow,
       this.groupColumn,
       this.groupOrder,
@@ -937,7 +895,7 @@ export class HaDataTable extends LitElement {
           ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
         ];
       }
-    } else if (checkboxElement.checked) {
+    } else if (!checkbox.checked) {
       if (!this._checkedRows.includes(rowId)) {
         this._checkedRows = [...this._checkedRows, rowId];
       }
@@ -975,9 +933,7 @@ export class HaDataTable extends LitElement {
     return checkedRows;
   }
 
-  private _handleRowClick = (
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { rowId: string }>
-  ) => {
+  private _handleRowClick = (ev: Event) => {
     if (
       ev
         .composedPath()
@@ -993,13 +949,14 @@ export class HaDataTable extends LitElement {
     ) {
       return;
     }
-    const rowId = ev.currentTarget.rowId;
+    const rowId = (ev.currentTarget as any).rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   };
 
-  private _setTitle(ev: HASSDomCurrentTargetEvent<HTMLElement>) {
-    if (ev.currentTarget.scrollWidth > ev.currentTarget.offsetWidth) {
-      ev.currentTarget.setAttribute("title", ev.currentTarget.innerText);
+  private _setTitle(ev: Event) {
+    const target = ev.currentTarget as HTMLElement;
+    if (target.scrollWidth > target.offsetWidth) {
+      target.setAttribute("title", target.innerText);
     }
   }
 
@@ -1013,18 +970,12 @@ export class HaDataTable extends LitElement {
     });
   }
 
-  private _handleSearchChange(ev: InputEvent): void {
+  private _handleSearchChange(ev: CustomEvent): void {
     if (this.filter) {
       return;
     }
     this._lastSelectedRowId = null;
-    this._debounceSearch((ev.target as HTMLInputElement).value);
-  }
-
-  private _focusScroller(): void {
-    this._scroller?.focus({
-      preventScroll: true,
-    });
+    this._debounceSearch(ev.detail.value);
   }
 
   private async _calcTableHeight() {
@@ -1036,27 +987,23 @@ export class HaDataTable extends LitElement {
   }
 
   @eventOptions({ passive: true })
-  private _saveScrollPos(e: HASSDomTargetEvent<HTMLDivElement>) {
-    this._savedScrollPos = e.target.scrollTop;
+  private _saveScrollPos(e: Event) {
+    this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
 
-    if (this._headerRow) {
-      this._headerRow.scrollLeft = e.target.scrollLeft;
-    }
+    this.renderRoot.querySelector(".mdc-data-table__header-row")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
   }
 
   @eventOptions({ passive: true })
-  private _scrollContent(e: HASSDomTargetEvent<HTMLDivElement>) {
-    if (!this._scroller) {
-      return;
-    }
-
-    this._scroller.scrollLeft = e.target.scrollLeft;
+  private _scrollContent(e: Event) {
+    this.renderRoot.querySelector("lit-virtualizer")!.scrollLeft = (
+      e.target as HTMLDivElement
+    ).scrollLeft;
   }
 
-  private _collapseGroup = (
-    ev: HASSDomCurrentTargetEvent<HTMLElement & { group: string }>
-  ) => {
-    const groupName = ev.currentTarget.group;
+  private _collapseGroup = (ev: Event) => {
+    const groupName = (ev.currentTarget as any).group;
     if (this._collapsedGroups.includes(groupName)) {
       this._collapsedGroups = this._collapsedGroups.filter(
         (grp) => grp !== groupName
@@ -1441,9 +1388,11 @@ export class HaDataTable extends LitElement {
         .table-header {
           border-bottom: 1px solid var(--divider-color);
         }
-        ha-input-search {
+        search-input {
+          display: block;
           flex: 1;
-          padding: var(--ha-space-3);
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: transparent;
         }
         slot[name="header"] {
           display: block;
@@ -1479,15 +1428,6 @@ 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

@@ -1,444 +0,0 @@
-import { TZDate } from "@date-fns/tz";
-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";
-import {
-  formatCallyDateRange,
-  formatDateMonth,
-  formatDateYear,
-  formatISODateOnly,
-} from "../../common/datetime/format_date";
-import { transform } from "../../common/decorators/transform";
-import { fireEvent } from "../../common/dom/fire_event";
-import { configContext, internationalizationContext } from "../../data/context";
-import { TimeZone } from "../../data/translation";
-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";
-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";
-
-@customElement("date-range-picker")
-export class DateRangePicker extends MobileAwareMixin(LitElement) {
-  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
-
-  @property({ attribute: false }) public startDate?: Date;
-
-  @property({ attribute: false }) public endDate?: Date;
-
-  @property({ attribute: "time-picker", type: Boolean })
-  public timePicker = false;
-
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<HomeAssistantConfig, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _hassConfig!: HassConfig;
-
-  /** used to show month in calendar-range header */
-  @state() private _pickerMonth?: string;
-
-  /** used to show year in calendar-date header */
-  @state() private _pickerYear?: string;
-
-  /** used for today to navigate focus in calendar-range  */
-  @state() private _focusDate?: string;
-
-  @state() private _dateValue?: string;
-
-  @state() private _timeValue = {
-    from: { hours: 0, minutes: 0 },
-    to: { hours: 23, minutes: 59 },
-  };
-
-  @queryAll("ha-time-input") private _timeInputs?: NodeListOf<HaTimeInput>;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    const date = this.startDate || new Date();
-
-    this._dateValue =
-      this.startDate && this.endDate
-        ? formatCallyDateRange(
-            this.startDate,
-            this.endDate,
-            this._i18n?.locale,
-            this._hassConfig
-          )
-        : undefined;
-    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 = {
-        from: {
-          hours: this.startDate.getHours(),
-          minutes: this.startDate.getMinutes(),
-        },
-        to: {
-          hours: this.endDate.getHours(),
-          minutes: this.endDate.getMinutes(),
-        },
-      };
-    }
-  }
-
-  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">${this._renderRanges()}</div>`
-          : nothing}
-        <div class="range">
-          <calendar-range
-            .value=${this._dateValue}
-            .locale=${this._i18n.locale.language}
-            .focusedDate=${this._focusDate}
-            @focusday=${this._focusChanged}
-            @change=${this._handleChange}
-            show-outside-days
-            .firstDayOfWeek=${firstWeekdayIndex(this._i18n.locale)}
-          >
-            <ha-icon-button-prev
-              tabindex="-1"
-              slot="previous"
-            ></ha-icon-button-prev>
-            <div class="heading" slot="heading">
-              <span class="month-year"
-                >${this._pickerMonth} ${this._pickerYear}</span
-              >
-              <ha-icon-button
-                @click=${this._focusToday}
-                .path=${mdiCalendarToday}
-                .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>
-            <calendar-month></calendar-month>
-          </calendar-range>
-          ${this.timePicker
-            ? html`
-                <div class="times">
-                  <ha-time-input
-                    .value=${`${this._timeValue.from.hours}:${this._timeValue.from.minutes}`}
-                    .locale=${this._i18n.locale}
-                    @value-changed=${this._handleChangeTime}
-                    .label=${this._i18n.localize(
-                      "ui.components.date-range-picker.time_from"
-                    )}
-                    id="from"
-                    placeholder-labels
-                    auto-validate
-                  ></ha-time-input>
-                  <ha-time-input
-                    .value=${`${this._timeValue.to.hours}:${this._timeValue.to.minutes}`}
-                    .locale=${this._i18n.locale}
-                    @value-changed=${this._handleChangeTime}
-                    .label=${this._i18n.localize(
-                      "ui.components.date-range-picker.time_to"
-                    )}
-                    id="to"
-                    placeholder-labels
-                    auto-validate
-                  ></ha-time-input>
-                </div>
-              `
-            : nothing}
-        </div>
-      </div>
-      <div class="footer">
-        <ha-button appearance="plain" @click=${this._cancel}
-          >${this._i18n.localize("ui.common.cancel")}</ha-button
-        >
-        <ha-button .disabled=${!this._dateValue} @click=${this._save}
-          >${this._i18n.localize(
-            "ui.components.date-range-picker.select"
-          )}</ha-button
-        >
-      </div>`;
-  }
-
-  private _focusToday() {
-    const date = new Date();
-    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() {
-    fireEvent(this, "cancel-date-picker");
-  }
-
-  private _save() {
-    if (!this._dateValue) {
-      return;
-    }
-
-    const dates = this._dateValue.split("/");
-    let startDate = new Date(`${dates[0]}T00:00:00`);
-    let endDate = new Date(`${dates[1]}T23:59:00`);
-
-    if (this.timePicker) {
-      const timeInputs = this._timeInputs;
-      if (
-        timeInputs &&
-        ![...timeInputs].every((input) => input.reportValidity())
-      ) {
-        // If we have time inputs, and they don't all report valid, don't save
-        return;
-      }
-      startDate.setHours(this._timeValue.from.hours);
-      startDate.setMinutes(this._timeValue.from.minutes);
-      endDate.setHours(this._timeValue.to.hours);
-      endDate.setMinutes(this._timeValue.to.minutes);
-
-      startDate.setSeconds(0);
-      startDate.setMilliseconds(0);
-      endDate.setSeconds(0);
-      endDate.setMilliseconds(0);
-
-      if (endDate <= startDate) {
-        endDate.setDate(startDate.getDate() + 1);
-      }
-    }
-
-    if (this._i18n.locale.time_zone === TimeZone.server) {
-      startDate = new Date(
-        new TZDate(startDate, this._hassConfig.time_zone).getTime()
-      );
-      endDate = new Date(
-        new TZDate(endDate, this._hassConfig.time_zone).getTime()
-      );
-    }
-
-    if (
-      startDate.getHours() !== this._timeValue.from.hours ||
-      startDate.getMinutes() !== this._timeValue.from.minutes ||
-      endDate.getHours() !== this._timeValue.to.hours ||
-      endDate.getMinutes() !== this._timeValue.to.minutes
-    ) {
-      this._timeValue.from.hours = startDate.getHours();
-      this._timeValue.from.minutes = startDate.getMinutes();
-      this._timeValue.to.hours = endDate.getHours();
-      this._timeValue.to.minutes = endDate.getMinutes();
-    }
-
-    fireEvent(this, "value-changed", {
-      value: {
-        startDate,
-        endDate,
-      },
-    });
-  }
-
-  private _focusChanged(ev: CustomEvent<Date>) {
-    const date = ev.detail;
-    this._pickerMonth = formatDateMonth(
-      date,
-      this._i18n.locale,
-      this._hassConfig
-    );
-    this._pickerYear = formatDateYear(
-      date,
-      this._i18n.locale,
-      this._hassConfig
-    );
-    this._focusDate = undefined;
-  }
-
-  private _handleChange(ev: CustomEvent) {
-    const dateElement = ev.target as HTMLElementTagNameMap["calendar-range"];
-    this._dateValue = dateElement.value;
-    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: range[0],
-        endDate: range[1],
-      },
-    });
-    fireEvent(this, "preset-selected", {
-      index,
-    });
-  }
-
-  private _handleChangeTime(ev: ValueChangedEvent<string>) {
-    ev.stopPropagation();
-    const time = ev.detail.value;
-    const target = ev.target as HaBaseTimeInput;
-    const type = target.id;
-    if (time) {
-      if (!this._timeValue) {
-        this._timeValue = {
-          from: { hours: 0, minutes: 0 },
-          to: { hours: 23, minutes: 59 },
-        };
-      }
-      const [hours, minutes] = time.split(":").map(Number);
-      this._timeValue[type].hours = hours;
-      this._timeValue[type].minutes = minutes;
-    }
-  }
-
-  static styles = [
-    datePickerStyles,
-    dateRangePickerStyles,
-    haStyleScrollbar,
-    css`
-      .picker {
-        display: flex;
-        flex-direction: row;
-      }
-
-      .date-range-ranges {
-        border-right: var(--ha-border-width-sm) solid var(--divider-color);
-        min-width: 140px;
-        flex: 0 1 30%;
-      }
-
-      .range {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex: 1;
-        padding: var(--ha-space-3);
-        overflow-x: hidden;
-      }
-
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        .picker {
-          flex-direction: column;
-        }
-
-        .date-range-ranges {
-          border-bottom: 1px solid var(--divider-color);
-          margin-top: var(--ha-space-5);
-          overflow: visible;
-        }
-
-        ha-chip-set {
-          padding: var(--ha-space-3);
-          flex-wrap: nowrap;
-          overflow-x: auto;
-        }
-
-        .range {
-          flex-basis: fit-content;
-        }
-      }
-
-      .times {
-        display: flex;
-        flex-direction: column;
-        gap: var(--ha-space-2);
-      }
-
-      .footer {
-        display: flex;
-        justify-content: flex-end;
-        padding: var(--ha-space-2);
-        border-top: 1px solid var(--divider-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "date-range-picker": DateRangePicker;
-  }
-
-  interface HASSDomEvents {
-    "cancel-date-picker": undefined;
-    "preset-selected": { index: number };
-  }
-}

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

@@ -1,400 +0,0 @@
-import "@home-assistant/webawesome/dist/components/popover/popover";
-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";
-import { tinykeys } from "tinykeys";
-import { shiftDateRange } from "../../common/datetime/calc_date";
-import type { DateRange } from "../../common/datetime/calc_date_range";
-import { calcDateRange } from "../../common/datetime/calc_date_range";
-import {
-  formatShortDateTime,
-  formatShortDateTimeWithYear,
-} from "../../common/datetime/format_date_time";
-import { transform } from "../../common/decorators/transform";
-import { fireEvent } from "../../common/dom/fire_event";
-import { configContext, internationalizationContext } from "../../data/context";
-import type { HomeAssistantConfig } from "../../types";
-import "../ha-bottom-sheet";
-import "../ha-icon-button";
-import "../ha-icon-button-next";
-import "../ha-icon-button-prev";
-import "../ha-textarea";
-import "./date-range-picker";
-
-export type DateRangePickerRanges = Record<string, [Date, Date]>;
-
-const RANGE_KEYS: DateRange[] = ["today", "yesterday", "this_week"];
-const EXTENDED_RANGE_KEYS: DateRange[] = [
-  "this_month",
-  "this_year",
-  "now-1h",
-  "now-12h",
-  "now-24h",
-  "now-7d",
-  "now-30d",
-];
-
-@customElement("ha-date-range-picker")
-export class HaDateRangePicker extends LitElement {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<HomeAssistantConfig, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _hassConfig!: HassConfig;
-
-  @property({ attribute: false }) public startDate!: Date;
-
-  @property({ attribute: false }) public endDate!: Date;
-
-  @property({ attribute: false }) public ranges?: DateRangePickerRanges | false;
-
-  @state() private _ranges?: DateRangePickerRanges;
-
-  @property({ attribute: "time-picker", type: Boolean })
-  public timePicker = false;
-
-  @property({ type: Boolean, reflect: true })
-  public backdrop = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public minimal = false;
-
-  @property({ attribute: "extended-presets", type: Boolean })
-  public extendedPresets = false;
-
-  @property({ attribute: "popover-placement" })
-  public popoverPlacement:
-    | "bottom"
-    | "top"
-    | "left"
-    | "right"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end" = "bottom-start";
-
-  @state() private _opened = false;
-
-  @state() private _pickerWrapperOpen = false;
-
-  @state() private _openedNarrow = false;
-
-  @state() private _popoverWidth = 0;
-
-  @query(".container") private _containerElement?: HTMLDivElement;
-
-  private _narrow = false;
-
-  private _unsubscribeTinyKeys?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    this._handleResize();
-    window.addEventListener("resize", this._handleResize);
-
-    const rangeKeys = this.extendedPresets
-      ? [...RANGE_KEYS, ...EXTENDED_RANGE_KEYS]
-      : RANGE_KEYS;
-
-    this._ranges = {};
-    rangeKeys.forEach((key) => {
-      this._ranges![
-        this._i18n.localize(`ui.components.date-range-picker.ranges.${key}`)
-      ] = calcDateRange(this._i18n.locale, this._hassConfig, key);
-    });
-  }
-
-  public open(): void {
-    this._openPicker();
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="container">
-        <div class="date-range-inputs">
-          ${!this.minimal
-            ? html`<ha-textarea
-                  id="field"
-                  rows="1"
-                  resize="auto"
-                  @click=${this._openPicker}
-                  @keydown=${this._handleKeydown}
-                  .value=${(isThisYear(this.startDate)
-                    ? formatShortDateTime(
-                        this.startDate,
-                        this._i18n.locale,
-                        this._hassConfig
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.startDate,
-                        this._i18n.locale,
-                        this._hassConfig
-                      )) +
-                  (window.innerWidth >= 459 ? " - " : " - \n") +
-                  (isThisYear(this.endDate)
-                    ? formatShortDateTime(
-                        this.endDate,
-                        this._i18n.locale,
-                        this._hassConfig
-                      )
-                    : formatShortDateTimeWithYear(
-                        this.endDate,
-                        this._i18n.locale,
-                        this._hassConfig
-                      ))}
-                  .label=${this._i18n.localize(
-                    "ui.components.date-range-picker.start_date"
-                  ) +
-                  " - " +
-                  this._i18n.localize(
-                    "ui.components.date-range-picker.end_date"
-                  )}
-                  .disabled=${this.disabled}
-                  readonly
-                ></ha-textarea>
-                <ha-icon-button-prev
-                  .label=${this._i18n.localize("ui.common.previous")}
-                  @click=${this._handlePrev}
-                >
-                </ha-icon-button-prev>
-                <ha-icon-button-next
-                  .label=${this._i18n.localize("ui.common.next")}
-                  @click=${this._handleNext}
-                >
-                </ha-icon-button-next>`
-            : html`<ha-icon-button
-                @click=${this._openPicker}
-                .disabled=${this.disabled}
-                id="field"
-                .label=${this._i18n.localize(
-                  "ui.components.date-range-picker.select_date_range"
-                )}
-                .path=${mdiCalendar}
-              ></ha-icon-button>`}
-        </div>
-        ${this._pickerWrapperOpen || this._opened
-          ? this._openedNarrow
-            ? html`
-                <ha-bottom-sheet
-                  flexcontent
-                  .open=${this._pickerWrapperOpen}
-                  @wa-after-show=${this._dialogOpened}
-                  @closed=${this._hidePicker}
-                >
-                  ${this._renderPicker()}
-                </ha-bottom-sheet>
-              `
-            : html`
-                <wa-popover
-                  .open=${this._pickerWrapperOpen}
-                  style="--body-width: ${this._popoverWidth}px;"
-                  class=${this._opened ? "open" : ""}
-                  without-arrow
-                  distance="0"
-                  .placement=${this.popoverPlacement}
-                  for="field"
-                  auto-size="vertical"
-                  auto-size-padding="16"
-                  @wa-after-show=${this._dialogOpened}
-                  @wa-hide=${this._handlePopoverHide}
-                  @wa-after-hide=${this._hidePicker}
-                  trap-focus
-                >
-                  ${this._renderPicker()}
-                </wa-popover>
-              `
-          : nothing}
-      </div>
-    `;
-  }
-
-  private _renderPicker() {
-    if (!this._opened) {
-      return nothing;
-    }
-    return html`
-      <date-range-picker
-        .ranges=${this.ranges === false ? false : this.ranges || this._ranges}
-        .startDate=${this.startDate}
-        .endDate=${this.endDate}
-        .timePicker=${this.timePicker}
-        @cancel-date-picker=${this._closePicker}
-        @value-changed=${this._closePicker}
-      >
-      </date-range-picker>
-    `;
-  }
-
-  private _hidePicker(ev: Event) {
-    ev.stopPropagation();
-    this._opened = false;
-    this._pickerWrapperOpen = false;
-    this._unsubscribeTinyKeys?.();
-    fireEvent(this, "picker-closed");
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("resize", this._handleResize);
-    this._unsubscribeTinyKeys?.();
-  }
-
-  private _handleResize = () => {
-    this._narrow =
-      window.matchMedia("(max-width: 870px)").matches ||
-      window.matchMedia("(max-height: 500px)").matches;
-
-    if (!this._openedNarrow && this._pickerWrapperOpen) {
-      this._popoverWidth = this._containerElement?.offsetWidth || 250;
-    }
-  };
-
-  private _dialogOpened = () => {
-    this._opened = true;
-    this._setTextareaFocusStyle(true);
-  };
-
-  private _handlePopoverHide = () => {
-    this._opened = false;
-  };
-
-  private _handleNext(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(true);
-  }
-
-  private _handlePrev(ev: MouseEvent): void {
-    if (ev && ev.stopPropagation) ev.stopPropagation();
-    this._shift(false);
-  }
-
-  private _shift(forward: boolean) {
-    if (!this.startDate) return;
-    const { start, end } = shiftDateRange(
-      this.startDate,
-      this.endDate,
-      forward,
-      this._i18n.locale,
-      this._hassConfig
-    );
-    this.startDate = start;
-    this.endDate = end;
-    fireEvent(this, "value-changed", {
-      value: {
-        startDate: this.startDate,
-        endDate: this.endDate,
-      },
-    });
-  }
-
-  private _closePicker() {
-    this._pickerWrapperOpen = false;
-  }
-
-  private _openPicker(ev?: Event) {
-    if (this.disabled) {
-      return;
-    }
-    if (this._pickerWrapperOpen) {
-      ev?.stopImmediatePropagation();
-      return;
-    }
-    this._openedNarrow = this._narrow;
-    this._popoverWidth = this._containerElement?.offsetWidth || 250;
-    this._pickerWrapperOpen = true;
-    this._unsubscribeTinyKeys = tinykeys(this, {
-      Escape: this._handleEscClose,
-    });
-  }
-
-  private _handleKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._openPicker(ev);
-    }
-  }
-
-  private _handleEscClose = (ev: KeyboardEvent) => {
-    ev.stopPropagation();
-  };
-
-  private _setTextareaFocusStyle(focused: boolean) {
-    const textarea = this.renderRoot.querySelector("ha-textarea");
-    if (textarea) {
-      textarea.setFocused(focused);
-    }
-  }
-
-  static styles = [
-    css`
-      ha-icon-button {
-        direction: var(--direction);
-      }
-
-      .date-range-inputs {
-        display: flex;
-        align-items: center;
-        gap: var(--ha-space-2);
-      }
-
-      ha-textarea {
-        display: inline-block;
-        width: 340px;
-      }
-      @media only screen and (max-width: 460px) {
-        ha-textarea {
-          width: 100%;
-        }
-      }
-
-      wa-popover {
-        --wa-space-l: 0;
-      }
-
-      wa-popover::part(dialog)::backdrop {
-        opacity: 0;
-        transition: opacity var(--ha-animation-duration-normal) ease-out;
-      }
-
-      wa-popover.open::part(dialog)::backdrop {
-        opacity: 1;
-      }
-
-      :host(:not([backdrop])) wa-popover::part(dialog)::backdrop {
-        background: none;
-      }
-
-      wa-popover::part(body) {
-        min-width: max(var(--body-width), 250px);
-        max-width: calc(
-          100vw - var(--safe-area-inset-left) - var(
-              --safe-area-inset-right
-            ) - var(--ha-space-8)
-        );
-        overflow: hidden;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-date-range-picker": HaDateRangePicker;
-  }
-}

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

@@ -1,246 +0,0 @@
-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 {
-  formatDateMonth,
-  formatDateShort,
-  formatDateYear,
-  formatISODateOnly,
-} from "../../common/datetime/format_date";
-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";
-import "../ha-dialog-footer";
-import "../ha-icon-button";
-import "../ha-icon-button-next";
-import "../ha-icon-button-prev";
-import { datePickerStyles } from "./styles";
-
-type CalendarDate = HTMLElementTagNameMap["calendar-date"];
-
-/**
- * A date picker dialog component that displays a calendar for selecting dates.
- * Uses the `cally` library for calendar rendering and supports localization,
- * min/max date constraints, and optional clearing of the selected date.
- *
- * @element ha-dialog-date-picker
- * Uses {@link DialogMixin} with {@link DatePickerDialogParams} to manage dialog state and parameters.
- */
-@customElement("ha-dialog-date-picker")
-export class HaDialogDatePicker extends DialogMixin<DatePickerDialogParams>(
-  LitElement
-) {
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<HomeAssistantConfig, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _hassConfig!: HassConfig;
-
-  @state() private _value?: {
-    year: string;
-    title: string;
-    dateString: string;
-  };
-
-  /** used to show month in calendar-date header */
-  @state() private _pickerMonth?: string;
-
-  /** used to show year in calendar-date header */
-  @state() private _pickerYear?: string;
-
-  /** used for today to navigate focus in cally-calendar-date  */
-  @state() private _focusDate?: string;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    if (this.params) {
-      const date = this.params.value
-        ? new Date(`${this.params.value.split("T")[0]}T00:00:00`)
-        : new Date();
-
-      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._i18n.locale, this._hassConfig),
-            dateString: formatISODateOnly(
-              date,
-              this._i18n.locale,
-              this._hassConfig
-            ),
-          }
-        : undefined;
-    }
-  }
-
-  render() {
-    if (!this.params) {
-      return nothing;
-    }
-    return html`<ha-dialog
-      open
-      width="small"
-      .headerTitle=${this._value?.title ||
-      this._i18n.localize("ui.dialogs.date-picker.title")}
-      .headerSubtitle=${this._value?.year}
-      header-subtitle-position="above"
-    >
-      ${this.params.canClear
-        ? html`
-            <ha-icon-button
-              .path=${mdiBackspace}
-              .label=${this._i18n.localize("ui.dialogs.date-picker.clear")}
-              slot="headerActionItems"
-              @click=${this._clear}
-            ></ha-icon-button>
-          `
-        : nothing}
-      <wa-divider></wa-divider>
-      <calendar-date
-        .value=${this._value?.dateString}
-        .min=${this.params.min}
-        .max=${this.params.max}
-        .locale=${this.params.locale}
-        .firstDayOfWeek=${this.params.firstWeekday}
-        .focusedDate=${this._focusDate}
-        @change=${this._valueChanged}
-        @focusday=${this._focusChanged}
-      >
-        <ha-icon-button-prev
-          tabindex="-1"
-          slot="previous"
-        ></ha-icon-button-prev>
-        <div class="heading" slot="heading">
-          <span class="month-year"
-            >${this._pickerMonth} ${this._pickerYear}</span
-          >
-          <ha-icon-button
-            @click=${this._setToday}
-            .path=${mdiCalendarToday}
-            .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>
-        <calendar-month></calendar-month>
-      </calendar-date>
-      <ha-dialog-footer slot="footer">
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-        >
-          ${this._i18n.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button slot="primaryAction" @click=${this._setValue}>
-          ${this._i18n.localize("ui.common.ok")}
-        </ha-button>
-      </ha-dialog-footer>
-    </ha-dialog>`;
-  }
-
-  private _valueChanged(ev: Event) {
-    const dateElement = ev.target as CalendarDate;
-    if (dateElement.value) {
-      this._updateValue(dateElement.value);
-    }
-  }
-
-  private _updateValue(value?: string, setFocusDay = false) {
-    const date = value
-      ? new Date(`${value.split("T")[0]}T00:00:00`)
-      : new Date();
-    this._value = {
-      year: formatDateYear(date, this._i18n.locale, this._hassConfig),
-      title: formatDateShort(date, this._i18n.locale, this._hassConfig),
-      dateString:
-        value || formatISODateOnly(date, this._i18n.locale, this._hassConfig),
-    };
-
-    if (setFocusDay) {
-      this._focusDate = this._value.dateString;
-      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._i18n.locale,
-      this._hassConfig
-    );
-    this._pickerYear = formatDateYear(
-      date,
-      this._i18n.locale,
-      this._hassConfig
-    );
-    this._focusDate = undefined;
-  }
-
-  private _clear() {
-    this.params?.onChange(undefined);
-    this.closeDialog();
-  }
-
-  private _setToday() {
-    this._updateValue(undefined, true);
-  }
-
-  private _setValue() {
-    if (!this._value) {
-      // Date picker opens to today if value is undefined. If user click OK
-      // without changing the date, should return todays date, not undefined.
-      this._setToday();
-    }
-    this.params?.onChange(this._value?.dateString);
-    this.closeDialog();
-  }
-
-  static styles = [
-    datePickerStyles,
-    css`
-      ha-dialog {
-        --dialog-content-padding: 0;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-date-picker": HaDialogDatePicker;
-  }
-}

src/components/date-picker/styles.ts

@@ -1,119 +0,0 @@
-import { css } from "lit";
-
-export const datePickerStyles = css`
-  calendar-range,
-  calendar-date {
-    width: 100%;
-    min-width: 300px;
-  }
-  calendar-date::part(button),
-  calendar-range::part(button) {
-    border: none;
-    background-color: unset;
-    border-radius: var(--ha-border-radius-circle);
-    outline-offset: -2px;
-    outline-color: var(--ha-color-neutral-60);
-  }
-
-  calendar-month {
-    width: calc(40px * 7);
-    margin: 0 auto;
-    min-height: calc(42px * 7);
-  }
-
-  calendar-month::part(heading) {
-    display: none;
-  }
-  calendar-month::part(day) {
-    color: var(--disabled-text-color);
-    font-size: var(--ha-font-size-m);
-    font-family: var(--ha-font-body);
-  }
-  calendar-month::part(button) {
-    color: var(--primary-text-color);
-    height: 32px;
-    width: 32px;
-    margin: var(--ha-space-1);
-    border-radius: var(--ha-border-radius-circle);
-  }
-  calendar-month::part(button):focus-visible {
-    background-color: inherit;
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
-  calendar-month::part(button):hover {
-    background-color: var(--ha-color-fill-primary-quiet-hover);
-  }
-  calendar-month::part(today) {
-    color: var(--primary-color);
-  }
-  calendar-month::part(range-inner),
-  calendar-month::part(range-start),
-  calendar-month::part(range-end),
-  calendar-month::part(selected),
-  calendar-month::part(selected):hover {
-    color: var(--text-primary-color);
-    background-color: var(--primary-color);
-    height: 40px;
-    width: 40px;
-    margin: 0;
-  }
-  calendar-month::part(selected):focus-visible {
-    background-color: var(--primary-color);
-    color: var(--text-primary-color);
-  }
-
-  calendar-month::part(outside) {
-    cursor: pointer;
-  }
-
-  .heading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    font-size: var(--ha-font-size-m);
-    font-weight: var(--ha-font-weight-medium);
-  }
-  .month-year {
-    flex: 1;
-    text-align: center;
-    margin-left: 48px;
-    margin-inline-start: 48px;
-    margin-inline-end: initial;
-  }
-`;
-
-export const dateRangePickerStyles = css`
-  calendar-month::part(selected):focus-visible {
-    background-color: var(--primary-color);
-    color: var(--text-primary-color);
-  }
-  calendar-month::part(range-inner),
-  calendar-month::part(range-start),
-  calendar-month::part(range-end),
-  calendar-month::part(range-inner):hover,
-  calendar-month::part(range-start):hover,
-  calendar-month::part(range-end):hover {
-    color: var(--text-primary-color);
-    background-color: var(--primary-color);
-    border-radius: var(--ha-border-radius-square);
-    display: block;
-    margin: 0;
-  }
-  calendar-month::part(range-start),
-  calendar-month::part(range-start):hover {
-    border-top-left-radius: var(--ha-border-radius-circle);
-    border-bottom-left-radius: var(--ha-border-radius-circle);
-  }
-  calendar-month::part(range-end),
-  calendar-month::part(range-end):hover {
-    border-top-right-radius: var(--ha-border-radius-circle);
-    border-bottom-right-radius: var(--ha-border-radius-circle);
-  }
-  calendar-month::part(range-start):hover,
-  calendar-month::part(range-end):hover,
-  calendar-month::part(range-inner):hover {
-    color: var(--primary-text-color);
-  }
-`;