Simplify ll-rebuild for section

.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,11 +5,6 @@ on:
   schedule:
     - cron: "0 * * * *"
 
-permissions:
-  actions: write
-  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/gulp/rspack.js

@@ -57,12 +57,6 @@ const runDevServer = async ({
         directory: contentBase,
         watch: true,
       },
-      client: {
-        overlay: {
-          runtimeErrors: (error) =>
-            !error?.message?.includes("ResizeObserver loop"),
-        },
-      },
       proxy,
     },
     compiler

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-cast.ts

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -150,7 +150,7 @@ class HcCast extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +183,7 @@ class HcCast extends LitElement {
     });
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     toggleAttribute(
       this,

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

@@ -12,7 +12,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -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">
@@ -158,7 +158,7 @@ export class HcConnect extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-cast");
 
@@ -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%;
     }
   `;

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

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -53,7 +53,7 @@ class HcLayout extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     if (this.connection) {

cast/src/receiver/layout/hc-demo.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
@@ -30,7 +29,7 @@ class HcDemo extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._initializeHass();
   }

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,5 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -65,7 +64,7 @@ class HcLovelace extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
 
     if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {

cast/src/receiver/layout/hc-main.ts

@@ -1,6 +1,6 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { createConnection, getAuth } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
@@ -106,7 +106,7 @@ export class HcMain extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
     import("../../../../src/resources/append-ha-style");

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/configs/sections/entities.ts

@@ -141,7 +141,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "device_tracker.car": {
-      entity_id: "device_tracker.car",
+      entity_id: "sensor.outdoor_humidity",
       state: "not_home",
       attributes: {
         friendly_name: "Car",
@@ -199,7 +199,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "binary_sensor.kitchen_motion": {
-      entity_id: "binary_sensor.kitchen_motion",
+      entity_id: "light.kitchen_motion",
       state: "on",
       attributes: {
         device_class: "motion",
@@ -335,7 +335,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "sensor.rain": {
-      entity_id: "sensor.rain",
+      entity_id: "sensor.moon_phase",
       state: "7.2",
       attributes: {
         state_class: "total_increasing",
@@ -565,7 +565,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "update.home_assistant_core_update": {
-      entity_id: "update.home_assistant_core_update",
+      entity_id: "update.home_assistant_supervisor_update",
       state: "off",
       attributes: {
         auto_update: false,

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

@@ -1,6 +1,4 @@
-/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -38,7 +36,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
       getCastManager().then((mgr) => {
@@ -63,7 +61,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     );
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     this.style.display = this._castManager ? "" : "none";
   }

demo/src/custom-cards/ha-demo-card.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -102,7 +102,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this._hidden) {
       this.style.display = "none";

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/components/demo-black-white-row.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@@ -50,7 +50,7 @@ class DemoBlackWhiteRow extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/components/demo-card.ts

@@ -1,5 +1,5 @@
 import { load } from "js-yaml";
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,9 @@ class DemoCard extends LitElement {
     this._size = await this._card?.getCardSize();
   }
 
-  protected update(_changedProperties: PropertyValues<this>): void {
+  protected update(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
     super.update(_changedProperties);
     this._updateSize();
   }

gallery/src/ha-gallery.ts

@@ -135,7 +135,7 @@ class HaGallery extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     this.addEventListener("show-notification", (ev) =>

gallery/src/pages/automation/describe-action.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -172,7 +171,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/describe-condition.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -97,7 +96,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/describe-trigger.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -120,7 +119,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace-timeline.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTrace extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -160,7 +160,7 @@ export class DemoHaAlert extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,5 +1,5 @@
 import { mdiButtonCursor, mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -84,7 +84,7 @@ export class DemoHaBadge extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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-button.ts

@@ -1,5 +1,5 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -118,7 +118,7 @@ export class DemoHaButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -8,7 +8,7 @@ import {
   mdiContentPaste,
   mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -80,7 +80,7 @@ export class DemoHaDropdown extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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, PropertyValues } 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: PropertyValues<this>) {
-    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-progress-button.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -65,7 +65,7 @@ export class DemoHaProgressButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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-slider.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -51,7 +51,7 @@ export class DemoHaSlider extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -33,7 +33,7 @@ export class DemoHaSpinner extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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, PropertyValues } 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: PropertyValues<this>) {
-    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, PropertyValues } 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: PropertyValues<this>) {
-    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/components/ha-tip.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-tip";
@@ -31,7 +31,7 @@ export class DemoHaTip extends LitElement {
     )}`;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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/alarm-panel-card.ts

@@ -95,7 +95,7 @@ class DemoAlarmPanelEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -116,7 +116,7 @@ class DemoArea extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -77,7 +77,7 @@ class DemoConditional extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -426,7 +426,7 @@ class DemoEntities extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/entity-button-card.ts

@@ -81,7 +81,7 @@ class DemoButtonEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -301,7 +301,7 @@ class DemoEntityFilter extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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")
@@ -191,7 +144,7 @@ class DemoGaugeEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -261,7 +261,7 @@ class DemoGlanceEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/grid-and-stack-card.ts

@@ -232,7 +232,7 @@ class DemoStack extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -46,7 +46,7 @@ class DemoIframe extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     provideHass(this._demos);
   }

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

@@ -87,7 +87,7 @@ class DemoLightEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -196,7 +196,7 @@ class DemoMap extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -290,7 +290,7 @@ class DemoMarkdown extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/media-control-card.ts

@@ -166,7 +166,7 @@ class DemoHuiMediaControlCard extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/media-player-row.ts

@@ -63,7 +63,7 @@ export class DemoLovelaceMediaPlayerRow extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -48,7 +48,7 @@ class DemoPicture extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -179,7 +179,7 @@ class DemoPictureElements extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -111,7 +111,7 @@ class DemoPictureEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-glance-card.ts

@@ -171,7 +171,7 @@ class DemoPictureGlance extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -39,7 +39,7 @@ export class DemoPlantEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -246,7 +246,7 @@ class DemoThermostatEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -359,7 +359,7 @@ class DemoTile extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/todo-list-card.ts

@@ -50,7 +50,7 @@ class DemoTodoListEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

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

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

@@ -1,99 +0,0 @@
-import type { PropertyValues } from "lit";
-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: PropertyValues<this>) {
-    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

@@ -2,7 +2,6 @@ import type {
   HassEntity,
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -398,7 +397,7 @@ export class DemoEntityState extends LitElement {
     ENTITIES.map(createRowData)
   );
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     mockIcons(hass);
@@ -423,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/misc/integration-card.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-switch";
@@ -331,7 +330,7 @@ export class DemoIntegrationCard extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -149,7 +149,7 @@ class DemoMoreInfoClimate extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -204,7 +204,7 @@ class DemoMoreInfoCover extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -38,7 +38,7 @@ class DemoMoreInfoFan extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -52,7 +52,7 @@ class DemoMoreInfoHumidifier extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/input-number.ts

@@ -51,7 +51,7 @@ class DemoMoreInfoInputNumber extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/input-text.ts

@@ -33,7 +33,7 @@ class DemoMoreInfoInputText extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

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