Adjust WebSocket ping timeout to 15 seconds

5 seconds was too low to prevent the UI from reloading when connecting the WebSocket during startup or on a high latancy connection This problem presented as the UI reloading over and over again because it could never respond to the ping in time on high latancy connections. At startup it usually only did this once so it went unnoticed in most cases. This ping was added in #18934
Reduce size of address column on Bluetooth Advertisement monitor
2026-08-08 15:38:25 +00:00 · 2025-02-20 11:46:59 -06:00 · 2025-01-29 12:51:56 -06:00 · 2025-01-29 16:46:26 +01:00 · 2025-01-29 16:38:25 +01:00 · 2025-01-29 15:31:55 +00:00
1110 changed files with 39345 additions and 24757 deletions
@@ -4,13 +4,12 @@
 # - released in the last year + current alpha/beta versions
 # - Firefox extended support release (ESR)
 # - with global utilization at or above 0.5%
-# - must support dynamic import of ES modules
-# - exclude browsers no longer being maintained
+# - exclude dead browsers (no security maintenance for 2+ years)
 # - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
 last 1 year
 Firefox ESR
->= 0.5% and supports es6-module-dynamic-import
+>= 0.5%
 not dead
 not KaiOS > 0
 not QQAndroid > 0
@@ -20,23 +19,18 @@ not UCAndroid > 0
 # Legacy builds are served when modern requirements are not met and support browsers:
 # - released in the last 7 years + current alpha/beta versionss
 # - with global utilization at or above 0.05%
-# The lattermost query ensures that support for popular old browsers is not dropped too early
-# (e.g. IE 11, Android 4.4, or Samsung 4).
-#
-# In addition, legacy browsers must support some minimum features that cannot be polyfilled:
-# - ES5 (strict mode)
-# - web sockets to communicate with backend
-# - inline SVG used widely in buttons, widgets, etc.
-# - custom events used for most user interactions
-# - CSS flexbox used in the majority of the layout
-# Nearly all of these are redundant with the above rules.
-# As of May 2023, only web sockets must be added to the query.
+# - exclude dead browsers (no security maintenance for 2+ years)
+# - exclude Opera Mini which does not support web sockets
 unreleased versions
 last 7 years
->= 0.05% and supports websockets
+>= 0.05%
+not dead
+not op_mini all

 [legacy-sw]
 # Same as legacy plus supports service workers
 unreleased versions
 last 7 years
->= 0.05% and supports websockets and supports serviceworkers
+>= 0.05% and supports serviceworkers
+not dead
+not op_mini all
@@ -1,5 +1,4 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/devcontainers/python:3.12
+FROM mcr.microsoft.com/devcontainers/python:1-3.13

 ENV \
  DEBIAN_FRONTEND=noninteractive \
@@ -7,7 +7,7 @@ body:
      value: |
        Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.

-        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
+        If you have a feature or enhancement request for the frontend, please [start a discussion][fr] instead of creating an issue.

        **Please do not report issues for custom cards.**

@@ -74,7 +74,7 @@ body:
        If known, otherwise leave blank.
  - type: input
    attributes:
-      label: In which browser are you experiencing the issue with?
+      label: In which browser are you experiencing the issue?
      placeholder: Google Chrome 88.0.4324.150
      description: >
        Provide the full name and don't forget to add the version!
@@ -2,7 +2,7 @@ blank_issues_enabled: false
 contact_links:
  - name: Request a feature for the UI / Dashboards
    url: https://github.com/home-assistant/frontend/discussions/category_choices
-    about: Request an new feature for the Home Assistant frontend.
+    about: Request a new feature for the Home Assistant frontend.
  - 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.
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,24 +26,18 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        id: setup-node
-        uses: actions/[email protected]
+        uses: actions/[email protected]
        with:
          node-version-file: ".nvmrc"
          cache: yarn
-      - uses: actions/[email protected]
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: "node_modules"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn install --immutable
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
      - 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@v4.1.2
+        uses: actions/cache@v4.2.0
        with:
          path: |
            node_modules/.cache/prettier
@@ -66,19 +60,11 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        id: setup-node
-        uses: actions/[email protected]
+        uses: actions/[email protected]
        with:
          node-version-file: ".nvmrc"
          cache: yarn
-      - uses: actions/[email protected]
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: "node_modules"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn install --immutable
      - name: Build resources
        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
@@ -92,26 +78,18 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        id: setup-node
-        uses: actions/[email protected]
+        uses: actions/[email protected]
        with:
          node-version-file: ".nvmrc"
          cache: yarn
-      - uses: actions/[email protected]
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: "node_modules"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn install --immutable
      - name: Build Application
        run: ./node_modules/.bin/gulp build-app
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -124,26 +102,18 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/[email protected]
      - name: Setup Node
-        id: setup-node
-        uses: actions/[email protected]
+        uses: actions/[email protected]
        with:
          node-version-file: ".nvmrc"
          cache: yarn
-      - uses: actions/[email protected]
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: "node_modules"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}-${{ hashFiles('yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-${{ hashFiles('.yarnrc.yml') }}-${{ steps.setup-node.outputs.node-version }}
      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn install --immutable
      - name: Build Application
        run: ./node_modules/.bin/gulp build-hassio
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -63,7 +63,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -19,7 +19,7 @@ jobs:
        uses: actions/[email protected]

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,7 +24,7 @@ jobs:
        uses: actions/[email protected]

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -6,7 +6,7 @@ on:
    - cron: "0 1 * * *"

 env:
-  PYTHON_VERSION: "3.12"
+  PYTHON_VERSION: "3.13"
  NODE_OPTIONS: --max_old_space_size=6144

 permissions:
@@ -28,7 +28,7 @@ jobs:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: translations
          path: translations.tar.gz
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/[email protected]3
+        uses: relative-ci/[email protected]4
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v6.0.0
+      - uses: release-drafter/release-drafter@v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -6,7 +6,7 @@ on:
      - published

 env:
-  PYTHON_VERSION: "3.12"
+  PYTHON_VERSION: "3.13"
  NODE_OPTIONS: --max_old_space_size=6144

 # Set default workflow permissions
@@ -25,16 +25,16 @@ jobs:
      - name: Checkout the repository
        uses: actions/[email protected]

-      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@master
-
      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@v5
        with:
          python-version: ${{ env.PYTHON_VERSION }}

+      - name: Verify version
+        uses: home-assistant/actions/helpers/verify-version@master
+
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -55,7 +55,7 @@ jobs:
          script/release

      - name: Upload release assets
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.2.1
        with:
          files: |
            dist/*.whl
@@ -76,7 +76,7 @@ jobs:
      - name: Build wheels
        uses: home-assistant/[email protected]
        with:
-          abi: cp312
+          abi: cp313
          tag: musllinux_1_2
          arch: amd64
          wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -92,7 +92,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -107,7 +107,7 @@ jobs:
      - name: Tar folder
        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
      - name: Upload release asset
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.2.1
        with:
          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/[email protected]
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -136,6 +136,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.2.1
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v9.0.0
+        uses: actions/stale@v9.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.5.2.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
@@ -5,7 +5,7 @@ import paths from "../paths.cjs";
 const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");

 // List of polyfill keys with supported browser targets for the functionality
-const PolyfillSupport = {
+const polyfillSupport = {
  // Note states and shadowRoot properties should be supported.
  "element-internals": {
    android: 90,
@@ -18,17 +18,6 @@ const PolyfillSupport = {
    safari: 17.4,
    samsung: 15.0,
  },
-  "element-append": {
-    android: 54,
-    chrome: 54,
-    edge: 17,
-    firefox: 49,
-    ios: 10.0,
-    opera: 41,
-    opera_mobile: 41,
-    safari: 10.0,
-    samsung: 6.0,
-  },
  "element-getattributenames": {
    android: 61,
    chrome: 61,
@@ -51,27 +40,18 @@ const PolyfillSupport = {
    safari: 12.0,
    samsung: 10.0,
  },
-  fetch: {
-    android: 42,
-    chrome: 42,
-    edge: 14,
-    firefox: 39,
-    ios: 10.3,
-    opera: 29,
-    opera_mobile: 29,
-    safari: 10.1,
-    samsung: 4.0,
-  },
+  // FormatJS polyfill detects fix for https://bugs.chromium.org/p/v8/issues/detail?id=10682,
+  // so adjusted to several months after that was marked fixed
  "intl-getcanonicallocales": {
-    android: 54,
-    chrome: 54,
-    edge: 16,
+    android: 90,
+    chrome: 90,
+    edge: 90,
    firefox: 48,
    ios: 10.3,
-    opera: 41,
-    opera_mobile: 41,
+    opera: 76,
+    opera_mobile: 64,
    safari: 10.1,
-    samsung: 6.0,
+    samsung: 15.0,
  },
  "intl-locale": {
    android: 74,
@@ -87,17 +67,6 @@ const PolyfillSupport = {
  "intl-other": {
    // Not specified (i.e. always try polyfill) since compatibility depends on supported locales
  },
-  proxy: {
-    android: 49,
-    chrome: 49,
-    edge: 12,
-    firefox: 18,
-    ios: 10.0,
-    opera: 36,
-    opera_mobile: 36,
-    safari: 10.0,
-    samsung: 5.0,
-  },
  "resize-observer": {
    android: 64,
    chrome: 64,
@@ -115,8 +84,6 @@ const PolyfillSupport = {
 // corresponding polyfill key and actual module to import
 const polyfillMap = {
  global: {
-    fetch: { key: "fetch", module: "unfetch/polyfill" },
-    Proxy: { key: "proxy", module: "proxy-polyfill" },
    ResizeObserver: {
      key: "resize-observer",
      module: join(POLYFILL_DIR, "resize-observer.ts"),
@@ -128,7 +95,7 @@ const polyfillMap = {
      module: "element-internals-polyfill",
    },
    ...Object.fromEntries(
-      ["append", "getAttributeNames", "toggleAttribute"].map((prop) => {
+      ["getAttributeNames", "toggleAttribute"].map((prop) => {
        const key = `element-${prop.toLowerCase()}`;
        return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }];
      })
@@ -168,7 +135,7 @@ export default defineProvider(
    const resolvePolyfill = createMetaResolver(polyfillMap);
    return {
      name: "custom-polyfill",
-      polyfills: PolyfillSupport,
+      polyfills: polyfillSupport,
      usageGlobal(meta, utils) {
        const polyfill = resolvePolyfill(meta);
        if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
@@ -53,6 +53,11 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
  __SUPERVISOR__: false,
  __BACKWARDS_COMPAT__: false,
  __STATIC_PATH__: "/static/",
+  __HASS_URL__: `\`${
+    "HASS_URL" in process.env
+      ? process.env["HASS_URL"]
+      : "${location.protocol}//${location.host}"
+  }\``,
  "process.env.NODE_ENV": JSON.stringify(
    isProdBuild ? "production" : "development"
  ),
@@ -5,9 +5,6 @@ const paths = require("./paths.cjs");
 const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";

 module.exports = {
-  useWDS() {
-    return isTrue(process.env.WDS);
-  },
  isProdBuild() {
    return (
      process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
@@ -9,7 +9,7 @@ export default [
      "import/extensions": "off",
      "import/no-dynamic-require": "off",
      "global-require": "off",
-      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-require-imports": "off",
      "prefer-arrow-callback": "off",
    },
  },
@@ -8,7 +8,6 @@ import "./gen-icons-json.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./wds.js";
 import "./rspack.js";

 gulp.task(
@@ -26,7 +25,7 @@ gulp.task(
      "build-locale-data"
    ),
    "copy-static-app",
-    env.useWDS() ? "wds-watch-app" : "rspack-watch-app"
+    "rspack-watch-app"
  )
 );

@@ -15,54 +15,72 @@ const brotliOptions = {
 };
 const zopfliOptions = { threshold: 150 };

-const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
+const compressModern = (rootDir, modernDir, compress) =>
  gulp
-    .src(
-      [
-        `${modernDir}/**/${filesGlob}`,
-        compressServiceWorker ? `${rootDir}/sw-modern.js` : undefined,
-      ].filter(Boolean),
-      {
-        base: rootDir,
-      }
-    )
-    .pipe(brotli(brotliOptions))
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+      base: rootDir,
+      allowEmpty: true,
+    })
+    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
    .pipe(gulp.dest(rootDir));

-const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
+const compressOther = (rootDir, modernDir, compress) =>
  gulp
    .src(
      [
        `${rootDir}/**/${filesGlob}`,
-        compressModern ? undefined : `!${modernDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
        `!${rootDir}/{sw-modern,service_worker}.js`,
        `${rootDir}/{authorize,onboarding}.html`,
-      ].filter(Boolean),
-      { base: rootDir }
+      ],
+      { base: rootDir, allowEmpty: true }
    )
-    .pipe(zopfli(zopfliOptions))
+    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
    .pipe(gulp.dest(rootDir));

-const compressAppBrotli = () =>
-  compressDistBrotli(paths.app_output_root, paths.app_output_latest);
-const compressHassioBrotli = () =>
-  compressDistBrotli(
+const compressAppModernBrotli = () =>
+  compressModern(paths.app_output_root, paths.app_output_latest, "brotli");
+const compressAppModernZopfli = () =>
+  compressModern(paths.app_output_root, paths.app_output_latest, "zopfli");
+
+const compressHassioModernBrotli = () =>
+  compressModern(
    paths.hassio_output_root,
    paths.hassio_output_latest,
-    false
+    "brotli"
  );
-
-const compressAppZopfli = () =>
-  compressDistZopfli(paths.app_output_root, paths.app_output_latest);
-const compressHassioZopfli = () =>
-  compressDistZopfli(
+const compressHassioModernZopfli = () =>
+  compressModern(
    paths.hassio_output_root,
    paths.hassio_output_latest,
-    true
+    "zopfli"
  );

-gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
+const compressAppOtherBrotli = () =>
+  compressOther(paths.app_output_root, paths.app_output_latest, "brotli");
+const compressAppOtherZopfli = () =>
+  compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");
+
+const compressHassioOtherBrotli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "brotli");
+const compressHassioOtherZopfli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
+
+gulp.task(
+  "compress-app",
+  gulp.parallel(
+    compressAppModernBrotli,
+    compressAppOtherBrotli,
+    compressAppModernZopfli,
+    compressAppOtherZopfli
+  )
+);
 gulp.task(
  "compress-hassio",
-  gulp.parallel(compressHassioBrotli, compressHassioZopfli)
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
 );
@@ -11,7 +11,6 @@ import { minify } from "html-minifier-terser";
 import template from "lodash.template";
 import { dirname, extname, resolve } from "node:path";
 import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import env from "../env.cjs";
 import paths from "../paths.cjs";

 // macOS companion app has no way to obtain the Safari version used by WKWebView,
@@ -56,7 +55,6 @@ const getCommonTemplateVars = () => {
    { ignorePatch: true, allowHigherVersions: true }
  );
  return {
-    useWDS: env.useWDS(),
    modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
  };
 };
@@ -92,13 +90,11 @@ const minifyHtml = (content, ext) => {
 };

 // Function to generate a dev task for each project's configuration
-// Note Currently WDS paths are hard-coded to only work for app
 const genPagesDevTask =
  (
    pageEntries,
    inputRoot,
    outputRoot,
-    useWDS = false,
    inputSub = "src/html",
    publicRoot = ""
  ) =>
@@ -109,17 +105,13 @@ const genPagesDevTask =
        resolve(inputRoot, inputSub, `${page}.template`),
        {
          ...commonVars,
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${publicRoot}/frontend_latest/${entry}.js`
+          latestEntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_latest/${entry}.js`
          ),
          es5EntryJS: entries.map(
            (entry) => `${publicRoot}/frontend_es5/${entry}.js`
          ),
-          latestCustomPanelJS: useWDS
-            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
-            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          latestCustomPanelJS: `${publicRoot}/frontend_latest/custom-panel.js`,
          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
        }
      );
@@ -176,12 +168,7 @@ const APP_PAGE_ENTRIES = {

 gulp.task(
  "gen-pages-app-dev",
-  genPagesDevTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    env.useWDS()
-  )
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
 );

 gulp.task(
@@ -287,7 +274,6 @@ gulp.task(
    HASSIO_PAGE_ENTRIES,
    paths.hassio_dir,
    paths.hassio_output_root,
-    undefined,
    "src",
    paths.hassio_publicPath
  )
@@ -66,7 +66,7 @@ gulp.task("fetch-nightly-translations", async function () {
      tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
    } catch {
      if (!allowTokenSetup) {
-        console.log("No token found so  build wil continue with English only");
+        console.log("No token found so build will continue with English only");
        return;
      }
      const auth = createOAuthDeviceAuth({
@@ -67,12 +67,6 @@ function copyPolyfills(staticDir) {
  );
 }

-function copyLoaderJS(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
-  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
-}
-
 function copyFonts(staticDir) {
  const staticPath = genStaticPath(staticDir);
  // Local fonts
@@ -140,8 +134,6 @@ gulp.task("copy-static-app", async () => {
  const staticDir = paths.app_output_static;
  // Basic static files
  fs.copySync(polyPath("public"), paths.app_output_root);
-
-  copyLoaderJS(staticDir);
  copyPolyfills(staticDir);
  copyFonts(staticDir);
  copyTranslations(staticDir);
@@ -164,8 +156,6 @@ gulp.task("copy-static-demo", async () => {
  );
  // Copy demo static files
  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
-
-  copyLoaderJS(paths.demo_output_static);
  copyPolyfills(paths.demo_output_static);
  copyMapPanel(paths.demo_output_static);
  copyFonts(paths.demo_output_static);
@@ -179,8 +169,6 @@ gulp.task("copy-static-cast", async () => {
  fs.copySync(polyPath("public/static"), paths.cast_output_static);
  // Copy cast static files
  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
-
-  copyLoaderJS(paths.cast_output_static);
  copyPolyfills(paths.cast_output_static);
  copyMapPanel(paths.cast_output_static);
  copyFonts(paths.cast_output_static);
@@ -0,0 +1,17 @@
+import "./app.js";
+import "./cast.js";
+import "./clean.js";
+import "./compress.js";
+import "./demo.js";
+import "./download-translations.js";
+import "./entry-html.js";
+import "./fetch-nightly-translations.js";
+import "./gallery.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./hassio.js";
+import "./landing-page.js";
+import "./locale-data.js";
+import "./rspack.js";
+import "./service-worker.js";
+import "./translations.js";
@@ -1,10 +0,0 @@
-import gulp from "gulp";
-import { startDevServer } from "@web/dev-server";
-
-gulp.task("wds-watch-app", async () => {
-  startDevServer({
-    config: {
-      watch: true,
-    },
-  });
-});
@@ -25,7 +25,7 @@ Home Assistant Cast is made up of two separate applications:

 ### Setting dev variables

-Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of you development machine.
+Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of your development machine.

 ### Changing configuration

@@ -7,7 +7,6 @@
  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
  <style>
    body {
-      background-color: white;
      font-size: initial;
    }
  </style>
@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
 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 { CSSResultGroup, TemplateResult } 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";
@@ -203,74 +203,72 @@ class HcCast extends LitElement {
      }
      this.connection.close();
      location.reload();
-    } catch (err: any) {
+    } catch (_err: any) {
      alert("Unable to log out!");
    }
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      .center-item {
-        display: flex;
-        justify-content: space-around;
-      }
+  static styles = css`
+    .center-item {
+      display: flex;
+      justify-content: space-around;
+    }

-      .action-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
+    .action-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }

-      .question {
-        position: relative;
-        padding: 8px 16px;
-      }
+    .question {
+      position: relative;
+      padding: 8px 16px;
+    }

-      .question:before {
-        border-radius: 4px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        background-color: var(--primary-color);
-        opacity: 0.12;
-        will-change: opacity;
-      }
+    .question:before {
+      border-radius: 4px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      content: "";
+      background-color: var(--primary-color);
+      opacity: 0.12;
+      will-change: opacity;
+    }

-      .connection,
-      .connection a {
-        color: var(--secondary-text-color);
-      }
+    .connection,
+    .connection a {
+      color: var(--secondary-text-color);
+    }

-      mwc-button ha-svg-icon {
-        margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
-        height: 18px;
-      }
+    mwc-button ha-svg-icon {
+      margin-right: 8px;
+      margin-inline-end: 8px;
+      margin-inline-start: initial;
+      height: 18px;
+    }

-      ha-list-item ha-icon,
-      ha-list-item ha-svg-icon {
-        padding: 12px;
-        color: var(--secondary-text-color);
-      }
+    ha-list-item ha-icon,
+    ha-list-item ha-svg-icon {
+      padding: 12px;
+      color: var(--secondary-text-color);
+    }

-      :host([hide-icons]) ha-icon {
-        display: none;
-      }
+    :host([hide-icons]) ha-icon {
+      display: none;
+    }

-      .spacer {
-        flex: 1;
-      }
+    .spacer {
+      flex: 1;
+    }

-      .card-content a {
-        color: var(--primary-color);
-      }
-    `;
-  }
+    .card-content a {
+      color: var(--primary-color);
+    }
+  `;
 }

 declare global {
@@ -13,7 +13,7 @@ import {
  ERR_INVALID_HTTPS_TO_HTTP,
  getAuth,
 } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } 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";
@@ -215,7 +215,7 @@ export class HcConnect extends LitElement {
    let url: URL;
    try {
      url = new URL(value);
-    } catch (err: any) {
+    } catch (_err: any) {
      this.error = "Invalid URL";
      return;
    }
@@ -252,7 +252,7 @@ export class HcConnect extends LitElement {
      this.loading = false;
      return;
    } finally {
-      // Clear url if we have a auth callback in url.
+      // Clear url if we have an auth callback in url.
      if (location.search.includes("auth_callback=1")) {
        history.replaceState(null, "", location.pathname);
      }
@@ -288,41 +288,39 @@ export class HcConnect extends LitElement {
    try {
      saveTokens(null);
      location.reload();
-    } catch (err: any) {
+    } catch (_err: any) {
      alert("Unable to log out!");
    }
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      .card-content a {
-        color: var(--primary-color);
-      }
-      .card-actions a {
-        text-decoration: none;
-      }
-      .error {
-        color: red;
-        font-weight: bold;
-      }
+  static styles = css`
+    .card-content a {
+      color: var(--primary-color);
+    }
+    .card-actions a {
+      text-decoration: none;
+    }
+    .error {
+      color: red;
+      font-weight: bold;
+    }

-      .error a {
-        color: darkred;
-      }
+    .error a {
+      color: darkred;
+    }

-      mwc-button ha-svg-icon {
-        margin-left: 8px;
-      }
+    mwc-button ha-svg-icon {
+      margin-left: 8px;
+    }

-      .spacer {
-        flex: 1;
-      }
+    .spacer {
+      flex: 1;
+    }

-      ha-textfield {
-        width: 100%;
-      }
-    `;
-  }
+    ha-textfield {
+      width: 100%;
+    }
+  `;
 }

 declare global {
@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -63,96 +63,94 @@ class HcLayout extends LitElement {
    }
  }

-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = css`
+    :host {
+      display: flex;
+      min-height: 100%;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+
+    ha-card {
+      display: flex;
+      width: 100%;
+      max-width: 500px;
+    }
+
+    .layout {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-header {
+      color: var(--ha-card-header-color, var(--primary-text-color));
+      font-family: var(--ha-card-header-font-family, inherit);
+      font-size: var(--ha-card-header-font-size, 24px);
+      letter-spacing: -0.012em;
+      line-height: 32px;
+      padding: 24px 16px 16px;
+      display: block;
+      margin: 0;
+    }
+
+    .hero {
+      border-radius: 4px 4px 0 0;
+    }
+    .subtitle {
+      font-size: 14px;
+      color: var(--secondary-text-color);
+      line-height: initial;
+    }
+    .subtitle a {
+      color: var(--secondary-text-color);
+    }
+
+    :host ::slotted(.card-content:not(:first-child)),
+    slot:not(:first-child)::slotted(.card-content) {
+      padding-top: 0px;
+      margin-top: -8px;
+    }
+
+    :host ::slotted(.section-header) {
+      font-weight: 500;
+      padding: 4px 16px;
+      text-transform: uppercase;
+    }
+
+    :host ::slotted(.card-content) {
+      padding: 16px;
+      flex: 1;
+    }
+
+    :host ::slotted(.card-actions) {
+      border-top: 1px solid #e8e8e8;
+      padding: 5px 16px;
+      display: flex;
+    }
+
+    img {
+      width: 100%;
+    }
+
+    .footer {
+      text-align: center;
+      font-size: 12px;
+      padding: 8px 0 24px;
+      color: var(--secondary-text-color);
+    }
+    .footer a {
+      color: var(--secondary-text-color);
+    }
+
+    @media all and (max-width: 500px) {
      :host {
-        display: flex;
-        min-height: 100%;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
+        justify-content: flex-start;
+        min-height: 90%;
+        margin-bottom: 30px;
      }
-
-      ha-card {
-        display: flex;
-        width: 100%;
-        max-width: 500px;
-      }
-
-      .layout {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .card-header {
-        color: var(--ha-card-header-color, var(--primary-text-color));
-        font-family: var(--ha-card-header-font-family, inherit);
-        font-size: var(--ha-card-header-font-size, 24px);
-        letter-spacing: -0.012em;
-        line-height: 32px;
-        padding: 24px 16px 16px;
-        display: block;
-        margin: 0;
-      }
-
-      .hero {
-        border-radius: 4px 4px 0 0;
-      }
-      .subtitle {
-        font-size: 14px;
-        color: var(--secondary-text-color);
-        line-height: initial;
-      }
-      .subtitle a {
-        color: var(--secondary-text-color);
-      }
-
-      :host ::slotted(.card-content:not(:first-child)),
-      slot:not(:first-child)::slotted(.card-content) {
-        padding-top: 0px;
-        margin-top: -8px;
-      }
-
-      :host ::slotted(.section-header) {
-        font-weight: 500;
-        padding: 4px 16px;
-        text-transform: uppercase;
-      }
-
-      :host ::slotted(.card-content) {
-        padding: 16px;
-        flex: 1;
-      }
-
-      :host ::slotted(.card-actions) {
-        border-top: 1px solid #e8e8e8;
-        padding: 5px 16px;
-        display: flex;
-      }
-
-      img {
-        width: 100%;
-      }
-
-      .footer {
-        text-align: center;
-        font-size: 12px;
-        padding: 8px 0 24px;
-        color: var(--secondary-text-color);
-      }
-      .footer a {
-        color: var(--secondary-text-color);
-      }
-
-      @media all and (max-width: 500px) {
-        :host {
-          justify-content: flex-start;
-          min-height: 90%;
-          margin-bottom: 30px;
-        }
-      }
-    `;
-  }
+    }
+  `;
 }

 declare global {
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../../src/types";
@@ -24,31 +24,29 @@ class HcLaunchScreen extends LitElement {
    `;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-        height: 100vh;
-        background-color: #f2f4f9;
-        font-size: 24px;
-      }
-      .container {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        align-items: center;
-        height: 100%;
-        justify-content: space-evenly;
-      }
-      img {
-        max-width: 80%;
-        object-fit: cover;
-      }
-      .status {
-        color: #1d2126;
-      }
-    `;
-  }
+  static styles = css`
+    :host {
+      display: block;
+      height: 100vh;
+      background-color: #f2f4f9;
+      font-size: 24px;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      align-items: center;
+      height: 100%;
+      justify-content: space-evenly;
+    }
+    img {
+      max-width: 80%;
+      object-fit: cover;
+    }
+    .status {
+      color: #1d2126;
+    }
+  `;
 }

 declare global {
@@ -1,10 +1,4 @@
-import {
-  css,
-  type CSSResultGroup,
-  html,
-  LitElement,
-  type TemplateResult,
-} 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";
@@ -14,6 +8,7 @@ import "../../../../src/panels/lovelace/views/hui-view";
 import "../../../../src/panels/lovelace/views/hui-view-container";
 import type { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
+import "../../../../src/panels/lovelace/views/hui-view-background";

 (window as any).loadCardHelpers = () =>
  import("../../../../src/panels/lovelace/custom-card-helpers");
@@ -25,9 +20,9 @@ class HcLovelace extends LitElement {
  @property({ attribute: false })
  public lovelaceConfig!: LovelaceConfig;

-  @property() public viewPath?: string | number | null;
+  @property({ attribute: false }) public viewPath?: string | number | null;

-  @property() public urlPath: string | null = null;
+  @property({ attribute: false }) public urlPath: string | null = null;

  protected render(): TemplateResult {
    const index = this._viewIndex;
@@ -57,11 +52,9 @@ class HcLovelace extends LitElement {
    const background = viewConfig.background || this.lovelaceConfig.background;

    return html`
-      <hui-view-container
-        .hass=${this.hass}
-        .background=${background}
-        .theme=${viewConfig.theme}
-      >
+      <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
+        <hui-view-background .hass=${this.hass} .background=${background}>
+        </hui-view-background>
        <hui-view
          .hass=${this.hass}
          .lovelace=${lovelace}
@@ -118,20 +111,18 @@ class HcLovelace extends LitElement {
    return undefined;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      hui-view-container {
-        display: flex;
-        position: relative;
-        min-height: 100vh;
-        box-sizing: border-box;
-      }
-      hui-view {
-        flex: 1 1 100%;
-        max-width: 100%;
-      }
-    `;
-  }
+  static styles = css`
+    hui-view-container {
+      display: flex;
+      position: relative;
+      min-height: 100vh;
+      box-sizing: border-box;
+    }
+    hui-view-container > * {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  `;
 }

 export interface CastViewChanged {
@@ -144,10 +144,10 @@ export class HcMain extends HassElement {
    }

    if (senderId) {
-      this.sendMessage(senderId, status);
+      this._sendMessage(senderId, status);
    } else {
      for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, status);
+        this._sendMessage(sender.id, status);
      }
    }
  }
@@ -164,10 +164,10 @@ export class HcMain extends HassElement {
    };

    if (senderId) {
-      this.sendMessage(senderId, error);
+      this._sendMessage(senderId, error);
    } else {
      for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, error);
+        this._sendMessage(sender.id, error);
      }
    }
  }
@@ -394,7 +394,7 @@ export class HcMain extends HassElement {
    }
  }

-  private sendMessage(senderId: string, response: any) {
+  private _sendMessage(senderId: string, response: any) {
    castContext.sendCustomMessage(CAST_NS, senderId, response);
  }
 }
@@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
 import type { DemoConfig } from "./types";

-export const demoConfigs: Array<() => Promise<DemoConfig>> = [
+export const demoConfigs: (() => Promise<DemoConfig>)[] = [
  () => import("./sections").then((mod) => mod.demoSections),
  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
@@ -1,5 +1,4 @@
 import { mdiTelevision } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -46,7 +45,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
          this.requestUpdate();
        });
        mgr.castContext.addEventListener(
-          // eslint-disable-next-line no-undef
          cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
          (ev) => {
            // On Android, opening a new session always results in SESSION_RESUMED.
@@ -68,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    this.style.display = this._castManager ? "" : "none";
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        align-items: center;
-      }
-      ha-svg-icon {
-        padding: 8px;
-        color: var(--paper-item-icon-color);
-      }
-      .flex {
-        flex: 1;
-        overflow: hidden;
-        margin-left: 16px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      google-cast-launcher {
-        cursor: pointer;
-        display: inline-block;
-        height: 24px;
-        width: 24px;
-      }
-    `;
-  }
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding: 8px;
+      color: var(--paper-item-icon-color);
+    }
+    .flex {
+      flex: 1;
+      overflow: hidden;
+      margin-left: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    google-cast-launcher {
+      cursor: pointer;
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+    }
+  `;
 }

 declare global {
@@ -26,12 +26,13 @@ export class HADemoCard extends LitElement implements LovelaceCard {

  @state() private _switching = false;

-  private _hidden = localStorage.hide_demo_card;
+  private _hidden = window.localStorage.getItem("hide_demo_card");

  public getCardSize() {
    return this._hidden ? 0 : 2;
  }

+  // eslint-disable-next-line @typescript-eslint/no-empty-function
  public setConfig(_config: LovelaceCardConfig) {}

  protected render() {
@@ -131,6 +131,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
        });
      }, 1);

+      // eslint-disable-next-line @typescript-eslint/no-empty-function
      return () => {};
    }
  );
@@ -43,7 +43,7 @@ customElements.whenDefined("hui-root").then(() => {
      const index = (ev as CustomEvent).detail.index;
      try {
        await setDemoConfig(this.hass, this.lovelace!, index);
-      } catch (err: any) {
+      } catch (_err: any) {
        setDemoConfig(this.hass, this.lovelace!, selectedDemoConfigIndex);
        alert("Failed to switch config :-(");
      }
@@ -15,6 +15,7 @@ export const mockPersistentNotification = (hass: MockHomeAssistant) => {
        },
      },
    } as PersistentNotificationMessage);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
 };
@@ -15,7 +15,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 const generateMeanStatistics = (
  start: Date,
  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
@@ -52,7 +52,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
  start: Date,
  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
+  // eslint-disable-next-line default-param-last
  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
@@ -89,7 +89,7 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
  start: Date,
  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
+  // eslint-disable-next-line default-param-last
  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
@@ -11,6 +11,7 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
      result: msg.template,
      listeners: { all: false, domains: [], entities: [], time: false },
    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
    return () => {};
  });
 };
@@ -22,5 +22,6 @@ export const mockTodo = (hass: MockHomeAssistant) => {
      },
    ] as TodoItem[],
  }));
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };
@@ -7,10 +7,10 @@ import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";

-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
 const compat = new FlatCompat({
-  baseDirectory: __dirname,
+  baseDirectory: _dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
 });
@@ -18,8 +18,9 @@ const compat = new FlatCompat({
 export default [
  ...compat.extends(
    "airbnb-base",
-    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
    "plugin:wc/recommended",
    "plugin:lit/all",
    "plugin:lit-a11y/recommended",
@@ -50,8 +51,6 @@ export default [
        ecmaFeatures: {
          modules: true,
        },
-
-        project: "./tsconfig.json",
      },
    },

@@ -114,12 +113,10 @@ export default [
      "@typescript-eslint/no-shadow": ["error"],

      "@typescript-eslint/naming-convention": [
-        "off",
+        "error",
        {
-          selector: "default",
-          format: ["camelCase", "snake_case"],
-          leadingUnderscore: "allow",
-          trailingUnderscore: "allow",
+          selector: ["objectLiteralProperty", "objectLiteralMethod"],
+          format: null,
        },
        {
          selector: ["variable"],
@@ -127,38 +124,65 @@ export default [
          leadingUnderscore: "allow",
          trailingUnderscore: "allow",
        },
+        {
+          selector: ["variable"],
+          modifiers: ["exported"],
+          format: ["camelCase", "PascalCase", "UPPER_CASE"],
+        },
        {
          selector: "typeLike",
          format: ["PascalCase"],
        },
+        {
+          selector: "method",
+          modifiers: ["public"],
+          format: ["camelCase"],
+          leadingUnderscore: "forbid",
+        },
+        {
+          selector: "method",
+          modifiers: ["private"],
+          format: ["camelCase"],
+          leadingUnderscore: "require",
+        },
      ],

-      "@typescript-eslint/no-unused-vars": "off",
-
-      "unused-imports/no-unused-vars": [
+      "@typescript-eslint/no-unused-vars": [
        "error",
        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
+          args: "all",
          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
          ignoreRestSiblings: true,
        },
      ],

      "unused-imports/no-unused-imports": "error",
-      "lit/attribute-names": "warn",
+      "lit/attribute-names": "error",
      "lit/attribute-value-entities": "off",
      "lit/no-template-map": "off",
-      "lit/no-native-attributes": "warn",
-      "lit/no-this-assign-in-render": "warn",
+      "lit/no-native-attributes": "error",
+      "lit/no-this-assign-in-render": "error",
      "lit-a11y/click-events-have-key-events": ["off"],
      "lit-a11y/no-autofocus": "off",
-      "lit-a11y/alt-text": "warn",
-      "lit-a11y/anchor-is-valid": "warn",
-      "lit-a11y/role-has-required-aria-attrs": "warn",
+      "lit-a11y/alt-text": "error",
+      "lit-a11y/anchor-is-valid": "error",
+      "lit-a11y/role-has-required-aria-attrs": "error",
      "@typescript-eslint/consistent-type-imports": "error",
      "@typescript-eslint/no-import-type-side-effects": "error",
+      camelcase: "off",
+      "@typescript-eslint/no-dynamic-delete": "off",
+      "@typescript-eslint/no-empty-object-type": [
+        "error",
+        {
+          allowInterfaces: "always",
+          allowObjectTypes: "always",
+        },
+      ],
+      "no-use-before-define": "off",
    },
  },
 ];
@@ -9,6 +9,7 @@ import "../../../src/components/ha-card";

@customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
+  // eslint-disable-next-line lit/no-native-attributes
  @property() title!: string;

  @property() value?: any;
@@ -18,7 +18,8 @@ class DemoCard extends LitElement {

  @property({ attribute: false }) public config!: DemoCardConfig;

-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;

  @state() private _size?: number;

@@ -44,11 +44,11 @@ class DemoCards extends LitElement {
    `;
  }

-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
    this._showConfig = ev.target.checked;
  }

-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
    applyThemesOnElement(this._container, { themes: {} } as any, "default", {
      dark: ev.target.checked,
    });
@@ -10,9 +10,10 @@ import type { HomeAssistant } from "../../../src/types";
 class DemoMoreInfo extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public entityId!: string;
+  @property({ attribute: false }) public entityId!: string;

-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;

  render() {
    const state = this._getState(this.entityId, this.hass.states);
@@ -23,7 +24,7 @@ class DemoMoreInfo extends LitElement {
            <state-card-content
              .stateObj=${state}
              .hass=${this.hass}
-              inDialog
+              in-dialog
            ></state-card-content>

            <more-info-content
@@ -58,11 +58,11 @@ class DemoMoreInfos extends LitElement {
    }
  `;

-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
    this._showConfig = ev.target.checked;
  }

-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
    applyThemesOnElement(
      this.shadowRoot!.querySelector("#container"),
      {
@@ -182,7 +182,7 @@ class HaGallery extends LitElement {
    }
  }

-  _menuTapped() {
+  private _menuTapped() {
    this._drawer.open = !this._drawer.open;
  }

@@ -42,7 +42,7 @@ In most cases, Create can be paired with Delete, and Add can be paired with Remo

 ## Add

-An already-exisiting item.
+An already-existing item.

 For example:

@@ -177,26 +177,24 @@ export class DemoAutomationDescribeAction extends LitElement {
    this._action = ev.detail.isValid ? ev.detail.value : undefined;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .action {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-      ha-yaml-editor {
-        width: 50%;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .action {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    span {
+      margin-right: 16px;
+    }
+    ha-yaml-editor {
+      width: 50%;
+    }
+  `;
 }

 declare global {
@@ -98,26 +98,24 @@ export class DemoAutomationDescribeCondition extends LitElement {
    this._condition = ev.detail.isValid ? ev.detail.value : undefined;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .condition {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-      ha-yaml-editor {
-        width: 50%;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .condition {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    span {
+      margin-right: 16px;
+    }
+    ha-yaml-editor {
+      width: 50%;
+    }
+  `;
 }

 declare global {
@@ -121,26 +121,24 @@ export class DemoAutomationDescribeTrigger extends LitElement {
    this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .trigger {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      span {
-        margin-right: 16px;
-      }
-      ha-yaml-editor {
-        width: 50%;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .trigger {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    span {
+      margin-right: 16px;
+    }
+    ha-yaml-editor {
+      width: 50%;
+    }
+  `;
 }

 declare global {
@@ -63,11 +63,6 @@ class DemoHaAutomationEditorAction extends LitElement {
  }

  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
@@ -92,7 +87,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                  .actions=${this.data[sampleIdx]}
                  .sampleIdx=${sampleIdx}
                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                ></ha-automation-action>
              `
            )}
@@ -102,6 +97,12 @@ class DemoHaAutomationEditorAction extends LitElement {
    `;
  }

+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -104,11 +103,6 @@ export class DemoAutomationEditorCondition extends LitElement {
  }

  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
@@ -133,7 +127,7 @@ export class DemoAutomationEditorCondition extends LitElement {
                  .conditions=${this.data[sampleIdx]}
                  .sampleIdx=${sampleIdx}
                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                ></ha-automation-condition>
              `
            )}
@@ -143,6 +137,12 @@ export class DemoAutomationEditorCondition extends LitElement {
    `;
  }

+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
@@ -149,11 +149,6 @@ export class DemoAutomationEditorTrigger extends LitElement {
  }

  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
    return html`
      <div class="options">
        <ha-formfield label="Disabled">
@@ -178,7 +173,7 @@ export class DemoAutomationEditorTrigger extends LitElement {
                  .triggers=${this.data[sampleIdx]}
                  .sampleIdx=${sampleIdx}
                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                ></ha-automation-trigger>
              `
            )}
@@ -188,6 +183,12 @@ export class DemoAutomationEditorTrigger extends LitElement {
    `;
  }

+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
@@ -58,22 +58,20 @@ export class DemoAutomationTraceTimeline extends LitElement {
    hass.updateTranslations("config", "en");
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px;
-      }
-      .card-content {
-        display: flex;
-      }
-      button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px;
+    }
+    .card-content {
+      display: flex;
+    }
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  `;
 }

 declare global {
@@ -31,22 +31,17 @@ export class DemoAutomationTrace extends LitElement {
              <hat-script-graph
                .trace=${trace.trace}
                .selected=${this._selected[idx]}
-                @graph-node-selected=${(ev) => {
-                  this._selected = { ...this._selected, [idx]: ev.detail.path };
-                }}
+                @graph-node-selected=${this._handleGraphNodeSelected}
+                .sampleIdx=${idx}
              ></hat-script-graph>
              <hat-trace-timeline
-                allowPick
+                allow-pick
                .hass=${this.hass}
                .trace=${trace.trace}
                .logbookEntries=${trace.logbookEntries}
                .selectedPath=${this._selected[idx]}
-                @value-changed=${(ev) => {
-                  this._selected = {
-                    ...this._selected,
-                    [idx]: ev.detail.value,
-                  };
-                }}
+                @value-changed=${this._handleTimelineValueChanged}
+                .sampleIdx=${idx}
              ></hat-trace-timeline>
              <button @click=${() => console.log(trace)}>Log trace</button>
            </div>
@@ -63,28 +58,36 @@ export class DemoAutomationTrace extends LitElement {
    hass.updateTranslations("config", "en");
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px;
-      }
-      .card-content {
-        display: flex;
-      }
-      .card-content > * {
-        margin-right: 16px;
-      }
-      .card-content > *:last-child {
-        margin-right: 0;
-      }
-      button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    `;
+  private _handleTimelineValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.value };
  }
+
+  private _handleGraphNodeSelected(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px;
+    }
+    .card-content {
+      display: flex;
+    }
+    .card-content > * {
+      margin-right: 16px;
+    }
+    .card-content > *:last-child {
+      margin-right: 0;
+    }
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  `;
 }

 declare global {
@@ -19,7 +19,7 @@ The alert offers four severity levels that set a distinctive icon and color.
 </ha-alert>

 <ha-alert alert-type="warning">
-  This is an warning alert — check it out!
+  This is a warning alert — check it out!
 </ha-alert>

 <ha-alert alert-type="info">
@@ -27,7 +27,7 @@ The alert offers four severity levels that set a distinctive icon and color.
 </ha-alert>

 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>

 **Note:** This component is by <a href="https://mui.com/components/alert/" rel="noopener noreferrer" target="_blank">MUI</a> and is not documented in the <a href="https://material.io" rel="noopener noreferrer" target="_blank">Material Design guidelines</a>.
@@ -95,7 +95,7 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 </ha-alert>

 <ha-alert alert-type="warning">
-  This is an warning alert — check it out!
+  This is a warning alert — check it out!
 </ha-alert>

 <ha-alert alert-type="info">
@@ -103,7 +103,7 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 </ha-alert>

 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>

 ```html
@@ -122,37 +122,37 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 The `title ` option should not be used without a description.

 <ha-alert alert-type="success" title="Success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>

 ```html
 <ha-alert alert-type="success" title="Success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 ```

 **Dismissable**

 <ha-alert alert-type="success" dismissable>
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>

 ```html
 <ha-alert alert-type="success" dismissable>
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 ```

 **Slotted action**

 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
  <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>

 ```html
 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
  <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>
 ```
@@ -177,46 +177,44 @@ export class DemoHaAlert extends LitElement {
    );
  }

-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-      ha-alert {
-        display: block;
-        margin: 24px 0;
-      }
-      .condition {
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .image {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-      img {
-        max-height: 24px;
-        width: 24px;
-      }
-      mwc-button {
-        --mdc-theme-primary: var(--primary-text-color);
-      }
-    `;
-  }
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    ha-alert {
+      display: block;
+      margin: 24px 0;
+    }
+    .condition {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .image {
+      display: inline-flex;
+      height: 100%;
+      align-items: center;
+    }
+    img {
+      max-height: 24px;
+      width: 24px;
+    }
+    mwc-button {
+      --mdc-theme-primary: var(--primary-text-color);
+    }
+  `;
 }

 declare global {
@@ -63,20 +63,18 @@ export class DemoHaBar extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .warning {
-        --ha-bar-primary-color: var(--warning-color);
-      }
-      .error {
-        --ha-bar-primary-color: var(--error-color);
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .warning {
+      --ha-bar-primary-color: var(--warning-color);
+    }
+    .error {
+      --ha-bar-primary-color: var(--error-color);
+    }
+  `;
 }

 declare global {
@@ -103,19 +103,17 @@ export class DemoHaChips extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .card-content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  `;
 }

 declare global {
@@ -48,14 +48,12 @@ export class DemoHaCircularProgress extends LitElement {
      ></ha-card>`;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+  `;
 }

 declare global {
@@ -14,12 +14,12 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-control-button-group";

-type Button = {
+interface Button {
  label: string;
  icon?: string;
  class?: string;
  disabled?: boolean;
-};
+}

 const buttons: Button[] = [
  {
@@ -35,10 +35,10 @@ const buttons: Button[] = [
  },
 ];

-type ButtonGroup = {
+interface ButtonGroup {
  vertical?: boolean;
  class?: string;
-};
+}

 const buttonGroups: ButtonGroup[] = [
  {},
@@ -137,53 +137,51 @@ export class DemoHaBarButton extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --control-button-icon-color: var(--primary-color);
-        --control-button-background-color: var(--primary-color);
-        --control-button-background-opacity: 0.2;
-        --control-button-border-radius: 18px;
-        height: 100px;
-        width: 100px;
-      }
-      .custom-group {
-        --control-button-group-thickness: 100px;
-        --control-button-group-border-radius: 36px;
-        --control-button-group-spacing: 20px;
-      }
-      .custom-group ha-control-button {
-        --control-button-border-radius: 18px;
-        --mdc-icon-size: 32px;
-      }
-      .vertical-buttons {
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      .vertical-switches > *:not(:last-child) {
-        margin-right: 4px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      --control-button-icon-color: var(--primary-color);
+      --control-button-background-color: var(--primary-color);
+      --control-button-background-opacity: 0.2;
+      --control-button-border-radius: 18px;
+      height: 100px;
+      width: 100px;
+    }
+    .custom-group {
+      --control-button-group-thickness: 100px;
+      --control-button-group-border-radius: 36px;
+      --control-button-group-spacing: 20px;
+    }
+    .custom-group ha-control-button {
+      --control-button-border-radius: 18px;
+      --mdc-icon-size: 32px;
+    }
+    .vertical-buttons {
+      height: 300px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    p.title {
+      margin-bottom: 12px;
+    }
+    .vertical-switches > *:not(:last-child) {
+      margin-right: 4px;
+    }
+  `;
 }

 declare global {
@@ -133,39 +133,37 @@ export class DemoHaCircularSlider extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      ha-control-circular-slider {
-        --control-circular-slider-color: #ff9800;
-      }
-      ha-control-circular-slider[inverted] {
-        --control-circular-slider-color: #2196f3;
-      }
-      ha-control-circular-slider[dual] {
-        --control-circular-slider-high-color: #2196f3;
-        --control-circular-slider-low-color: #ff9800;
-      }
-      .field {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    p.title {
+      margin-bottom: 12px;
+    }
+    ha-control-circular-slider {
+      --control-circular-slider-color: #ff9800;
+    }
+    ha-control-circular-slider[inverted] {
+      --control-circular-slider-color: #2196f3;
+    }
+    ha-control-circular-slider[dual] {
+      --control-circular-slider-high-color: #2196f3;
+      --control-circular-slider-low-color: #ff9800;
+    }
+    .field {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  `;
 }

 declare global {
@@ -73,32 +73,30 @@ export class DemoHarControlNumberButtons extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        color: #2196f3;
-        --control-number-buttons-color: #2196f3;
-        --control-number-buttons-background-color: #2196f3;
-        --control-number-buttons-background-opacity: 0.1;
-        --control-number-buttons-thickness: 100px;
-        --control-number-buttons-border-radius: 36px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      color: #2196f3;
+      --control-number-buttons-color: #2196f3;
+      --control-number-buttons-background-color: #2196f3;
+      --control-number-buttons-background-opacity: 0.1;
+      --control-number-buttons-thickness: 100px;
+      --control-number-buttons-border-radius: 36px;
+    }
+  `;
 }

 declare global {
@@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";

-type SelectMenuOptions = {
+interface SelectMenuOptions {
  label: string;
  value: string;
  icon?: string;
-};
+}

-type SelectMenu = {
+interface SelectMenu {
  label: string;
  icon: string;
  class?: string;
  disabled?: boolean;
  options: SelectMenuOptions[];
-};
+}

 const selects: SelectMenu[] = [
  {
@@ -112,32 +112,30 @@ export class DemoHaControlSelectMenu extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --control-button-icon-color: var(--primary-color);
-        --control-button-background-color: var(--primary-color);
-        --control-button-background-opacity: 0.2;
-        --control-button-border-radius: 18px;
-        height: 100px;
-        width: 100px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      --control-button-icon-color: var(--primary-color);
+      --control-button-background-color: var(--primary-color);
+      --control-button-background-opacity: 0.2;
+      --control-button-border-radius: 18px;
+      height: 100px;
+      width: 100px;
+    }
+  `;
 }

 declare global {
@@ -168,42 +168,40 @@ export class DemoHaControlSelect extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --mdc-icon-size: 24px;
-        --control-select-color: var(--state-fan-active-color);
-        --control-select-thickness: 130px;
-        --control-select-border-radius: 36px;
-      }
-      .vertical-selects {
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      .vertical-selects > *:not(:last-child) {
-        margin-right: 4px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      --mdc-icon-size: 24px;
+      --control-select-color: var(--state-fan-active-color);
+      --control-select-thickness: 130px;
+      --control-select-border-radius: 36px;
+    }
+    .vertical-selects {
+      height: 300px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    p.title {
+      margin-bottom: 12px;
+    }
+    .vertical-selects > *:not(:last-child) {
+      margin-right: 4px;
+    }
+  `;
 }

 declare global {
@@ -131,43 +131,41 @@ export class DemoHaBarSlider extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --control-slider-color: #ffcf4c;
-        --control-slider-background: #ffcf4c;
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 130px;
-        --control-slider-border-radius: 36px;
-      }
-      .vertical-sliders {
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      .vertical-sliders > *:not(:last-child) {
-        margin-right: 4px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      --control-slider-color: #ffcf4c;
+      --control-slider-background: #ffcf4c;
+      --control-slider-background-opacity: 0.2;
+      --control-slider-thickness: 130px;
+      --control-slider-border-radius: 36px;
+    }
+    .vertical-sliders {
+      height: 300px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    p.title {
+      margin-bottom: 12px;
+    }
+    .vertical-sliders > *:not(:last-child) {
+      margin-right: 4px;
+    }
+  `;
 }

 declare global {
@@ -99,44 +99,42 @@ export class DemoHaControlSwitch extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      label {
-        font-weight: 600;
-      }
-      .custom {
-        --control-switch-on-color: var(--green-color);
-        --control-switch-off-color: var(--red-color);
-        --control-switch-thickness: 130px;
-        --control-switch-border-radius: 36px;
-        --control-switch-padding: 6px;
-        --mdc-icon-size: 24px;
-      }
-      .vertical-switches {
-        height: 300px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      .vertical-switches > *:not(:last-child) {
-        margin-right: 4px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-top: 0;
+      margin-bottom: 8px;
+    }
+    p {
+      margin: 0;
+    }
+    label {
+      font-weight: 600;
+    }
+    .custom {
+      --control-switch-on-color: var(--green-color);
+      --control-switch-off-color: var(--red-color);
+      --control-switch-thickness: 130px;
+      --control-switch-border-radius: 36px;
+      --control-switch-padding: 6px;
+      --mdc-icon-size: 24px;
+    }
+    .vertical-switches {
+      height: 300px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    p.title {
+      margin-bottom: 12px;
+    }
+    .vertical-switches > *:not(:last-child) {
+      margin-right: 4px;
+    }
+  `;
 }

 declare global {
@@ -143,13 +143,11 @@ export class DemoHaExpansionPanel extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-expansion-panel {
-        margin: -16px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-expansion-panel {
+      margin: -16px;
+    }
+  `;
 }

 declare global {
@@ -20,7 +20,7 @@ export class DemoHaFaded extends LitElement {
          <ha-faded><span>${LONG_TEXT}</span></ha-faded>
          <h3>No text</h3>
          <ha-faded><span></span></ha-faded>
-          <h3>Smal text</h3>
+          <h3>Small text</h3>
          <ha-faded><span>${SMALL_TEXT}</span></ha-faded>
          <h3>Long text in markdown</h3>
          <ha-faded>
@@ -61,14 +61,12 @@ export class DemoHaFaded extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+  `;
 }

 declare global {
@@ -124,6 +124,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -135,6 +137,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -146,6 +150,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -489,14 +495,8 @@ class DemoHaForm extends LitElement {
            .title=${info.title}
            .value=${this.data[idx]}
            .disabled=${this.disabled[idx]}
-            @submitted=${() => {
-              this.disabled[idx] = true;
-              this.requestUpdate();
-              setTimeout(() => {
-                this.disabled[idx] = false;
-                this.requestUpdate();
-              }, 2000);
-            }}
+            @submitted=${this._handleSubmit}
+            .sampleIdx=${idx}
          >
            ${["light", "dark"].map(
              (slot) => html`
@@ -511,10 +511,8 @@ class DemoHaForm extends LitElement {
                  .computeLabel=${(schema) =>
                    translations[schema.name] || schema.name}
                  .computeHelper=${() => "Helper text"}
-                  @value-changed=${(e) => {
-                    this.data[idx] = e.detail.value;
-                    this.requestUpdate();
-                  }}
+                  @value-changed=${this._handleValueChanged}
+                  .sampleIdx=${idx}
                ></ha-form>
              `
            )}
@@ -523,6 +521,22 @@ class DemoHaForm extends LitElement {
      })}
    `;
  }
+
+  private _handleValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
+  private _handleSubmit(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.disabled[sampleIdx] = true;
+    this.requestUpdate();
+    setTimeout(() => {
+      this.disabled[sampleIdx] = false;
+      this.requestUpdate();
+    }, 2000);
+  }
 }

 declare global {
@@ -76,7 +76,7 @@ export class DemoHaHsColorPicker extends LitElement {
            @change=${this._saturationChanged}
          >
          </ha-slider>
-          <p>Color Brighness : ${this.brightness}</p>
+          <p>Color Brightness : ${this.brightness}</p>
          <ha-slider
            labeled
            step="1"
@@ -91,27 +91,25 @@ export class DemoHaHsColorPicker extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .card-content {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      }
-      ha-hs-color-picker {
-        width: 400px;
-      }
-      .value {
-        font-size: 22px;
-        font-weight: bold;
-        margin: 0 0 12px 0;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    ha-hs-color-picker {
+      width: 400px;
+    }
+    .value {
+      font-size: 22px;
+      font-weight: bold;
+      margin: 0 0 12px 0;
+    }
+  `;
 }

 declare global {
@@ -95,25 +95,23 @@ export class DemoHaLabelBadge extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-left: 16px;
-        background-color: var(--markdown-code-background-color);
-        padding: 8px;
-      }
-      .badge {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 16px;
-        align-items: center;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    pre {
+      margin-left: 16px;
+      background-color: var(--markdown-code-background-color);
+      padding: 8px;
+    }
+    .badge {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 16px;
+      align-items: center;
+    }
+  `;
 }

 declare global {
@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -124,6 +123,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -135,6 +136,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -146,6 +149,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -591,13 +596,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
      </div>
      ${SCHEMAS.map((info, idx) => {
        const data = this.data[idx];
-        const valueChanged = (ev) => {
-          this.data[idx] = {
-            ...data,
-            [ev.target.key]: ev.detail.value,
-          };
-          this.requestUpdate();
-        };
        return html`
          <demo-black-white-row .title=${info.name}>
            ${["light", "dark"].map((slot) =>
@@ -614,7 +612,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                      .value=${data[key] ?? value!.default}
                      .disabled=${this._disabled}
                      .required=${this._required}
-                      @value-changed=${valueChanged}
+                      @value-changed=${this._handleValueChanged}
+                      .sampleIdx=${idx}
                      .helper=${this._helper ? "Helper text" : undefined}
                    ></ha-selector>
                  </ha-settings-row>
@@ -627,6 +626,15 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
    `;
  }

+  private _handleValueChanged(ev) {
+    const idx = ev.target.sampleIdx;
+    this.data[idx] = {
+      ...this.data[idx],
+      [ev.target.key]: ev.detail.value,
+    };
+    this.requestUpdate();
+  }
+
  private _handleOptionChange(ev) {
    this[`_${ev.target.name}`] = ev.target.checked;
  }
@@ -48,27 +48,25 @@ export class DemoHaTip extends LitElement {
    );
  }

-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-tip {
-        margin-bottom: 14px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-    `;
-  }
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-tip {
+      margin-bottom: 14px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 900px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 900px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 900px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShort extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 900px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeDateTime extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 900px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -90,28 +90,26 @@ export class DemoDateTimeDate extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 600px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 600px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeTimeSeconds extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 600px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 600px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeTimeWeekday extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 800px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 800px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -100,32 +100,30 @@ export class DemoDateTimeTime extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 600px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
+  static styles = css`
+    ha-control-select {
+      max-width: 800px;
+      margin: 12px auto;
+    }
+    .header {
+      font-weight: bold;
+    }
+    .center {
+      text-align: center;
+    }
+    .container {
+      max-width: 600px;
+      margin: 12px auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+    }

-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
+    .container > div {
+      flex-grow: 1;
+      width: 20%;
+    }
+  `;
 }

 declare global {
@@ -4,6 +4,7 @@ import { customElement, query } from "lit/decorators";
 import { CoverEntityFeature } from "../../../../src/data/cover";
 import { LightColorMode } from "../../../../src/data/light";
 import { LockEntityFeature } from "../../../../src/data/lock";
+import { MediaPlayerEntityFeature } from "../../../../src/data/media-player";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -28,6 +29,10 @@ const ENTITIES = [
    device_class: "lock",
    supported_features: LockEntityFeature.OPEN,
  }),
+  getEntity("media_player", "living_room", "playing", {
+    friendly_name: "Living room speaker",
+    supported_features: MediaPlayerEntityFeature.VOLUME_SET,
+  }),
  getEntity("climate", "thermostat", "heat", {
    current_temperature: 73,
    min_temp: 45,
@@ -197,6 +202,15 @@ const CONFIGS = [
    - type: "lock-open-door"
    `,
  },
+  {
+    heading: "Media player volume slider feature",
+    config: `
+- type: tile
+  entity: media_player.living_room
+  features:
+    - type: "media-player-volume-slider"
+    `,
+  },
  {
    heading: "Vacuum commands feature",
    config: `
@@ -321,13 +321,13 @@ function createEntity(
  };
 }

-type EntityRowData = {
+interface EntityRowData {
  stateObj: HassEntity;
  entity_id: string;
  state: string;
  device_class?: string;
  domain: string;
-};
+}

 function createRowData(stateObj: HassEntity): EntityRowData {
  return {
@@ -429,17 +429,15 @@ export class DemoEntityState extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      .color {
-        display: block;
-        height: 20px;
-        width: 20px;
-        border-radius: 10px;
-        background-color: rgb(--color);
-      }
-    `;
-  }
+  static styles = css`
+    .color {
+      display: block;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+      background-color: rgb(--color);
+    }
+  `;
 }

 declare global {
@@ -76,14 +76,12 @@ export class DemoMiscMarkdown extends LitElement {
    `;
  }

-  static get styles() {
-    return css`
-      ha-card {
-        margin: 12px;
-        padding: 12px;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      margin: 12px;
+      padding: 12px;
+    }
+  `;
 }

 declare global {
@@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
  },
 ];

-const configEntries: Array<{
+const configEntries: {
  items: ConfigEntryExtended[];
  is_custom?: boolean;
  disabled?: boolean;
  highlight?: string;
-}> = [
+}[] = [
  { items: [loadedEntry] },
  { items: [configPanelEntry] },
  { items: [optionsFlowEntry] },
@@ -349,26 +349,24 @@ export class DemoIntegrationCard extends LitElement {
    this.isCloud = !this.isCloud;
  }

-  static get styles() {
-    return css`
-      .container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        grid-gap: 8px 8px;
-        padding: 8px 16px 16px;
-        margin-bottom: 16px;
-      }
+  static styles = css`
+    .container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      grid-gap: 8px 8px;
+      padding: 8px 16px 16px;
+      margin-bottom: 16px;
+    }

-      .container > * {
-        max-width: 500px;
-      }
+    .container > * {
+      max-width: 500px;
+    }

-      ha-formfield {
-        margin: 8px 0;
-        display: block;
-      }
-    `;
-  }
+    ha-formfield {
+      margin: 8px 0;
+      display: block;
+    }
+  `;
 }

 declare global {
@@ -1,16 +1,4 @@
-import { globIterate } from "glob";
 import { availableParallelism } from "node:os";
+import "./build-scripts/gulp/index.mjs";

 process.env.UV_THREADPOOL_SIZE = availableParallelism();
-
-const gulpImports = [];
-
-for await (const gulpModule of globIterate("build-scripts/gulp/*.?(c|m)js", {
-  dotRelative: true,
-})) {
-  gulpImports.push(import(gulpModule));
-}
-
-// Since all tasks are currently registered with gulp.task(), this is enough
-// If any are converted to named exports, need to loop and aggregate exports here
-await Promise.all(gulpImports);
@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -136,7 +136,7 @@ export class HassioAddonStore extends LitElement {
      this._manageRepositories(repositoryUrl);
    }

-    this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
    this._loadData();
  }

@@ -179,7 +179,7 @@ export class HassioAddonStore extends LitElement {
    }
  }

-  private apiCalled(ev) {
+  private _apiCalled(ev) {
    if (ev.detail.success) {
      this._loadData();
    }
@@ -211,35 +211,33 @@ export class HassioAddonStore extends LitElement {
    this._filter = e.detail.value;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      hassio-addon-repository {
-        margin-top: 24px;
-      }
-      .search {
-        position: sticky;
-        top: 0;
-        z-index: 2;
-      }
-      search-input {
-        display: block;
-        --mdc-text-field-fill-color: var(--sidebar-background-color);
-        --mdc-text-field-idle-line-color: var(--divider-color);
-      }
-      .advanced {
-        padding: 12px;
-        display: flex;
-        flex-wrap: wrap;
-        color: var(--primary-text-color);
-      }
-      .advanced a {
-        margin-left: 0.5em;
-        margin-inline-start: 0.5em;
-        margin-inline-end: initial;
-        color: var(--primary-color);
-      }
-    `;
-  }
+  static styles = css`
+    hassio-addon-repository {
+      margin-top: 24px;
+    }
+    .search {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+    search-input {
+      display: block;
+      --mdc-text-field-fill-color: var(--sidebar-background-color);
+      --mdc-text-field-idle-line-color: var(--divider-color);
+    }
+    .advanced {
+      padding: 12px;
+      display: flex;
+      flex-wrap: wrap;
+      color: var(--primary-text-color);
+    }
+    .advanced a {
+      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
+      margin-inline-end: initial;
+      color: var(--primary-color);
+    }
+  `;
 }

 declare global {
@@ -299,7 +299,7 @@ class HassioAddonConfig extends LitElement {
    if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
      this._valid = true;
      this._configHasChanged = true;
-      this._options! = ev.detail.value;
+      this._options = ev.detail.value;
    } else {
      this._configHasChanged = true;
      this._valid = ev.detail.isValid;
@@ -151,7 +151,7 @@ class HassioAddonNetwork extends LitElement {

  private async _configChanged(ev: CustomEvent): Promise<void> {
    this._configHasChanged = true;
-    this._config! = ev.detail.value;
+    this._config = ev.detail.value;
  }

  private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -58,7 +58,7 @@ export class HassioBackups extends LitElement {

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

-  @property({ type: Boolean }) public isWide = false;
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;

  @state() private _selectedBackups: string[] = [];

@@ -74,7 +74,7 @@ export class HassioBackups extends LitElement {
  public connectedCallback(): void {
    super.connectedCallback();
    if (this.hass && this._firstUpdatedCalled) {
-      this.fetchBackups();
+      this._fetchBackups();
    }
  }

@@ -107,7 +107,7 @@ export class HassioBackups extends LitElement {
  protected firstUpdated(changedProperties: PropertyValues): void {
    super.firstUpdated(changedProperties);
    if (this.hass && this.isConnected) {
-      this.fetchBackups();
+      this._fetchBackups();
    }
    this._firstUpdatedCalled = true;
  }
@@ -198,7 +198,7 @@ export class HassioBackups extends LitElement {
        @selection-changed=${this._handleSelectionChanged}
        clickable
        selectable
-        hasFab
+        has-fab
        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
          ? "/config/system"
@@ -280,7 +280,7 @@ export class HassioBackups extends LitElement {
  private _handleAction(ev: CustomEvent<ActionDetail>) {
    switch (ev.detail.index) {
      case 0:
-        this.fetchBackups();
+        this._fetchBackups();
        break;
      case 1:
        showHassioBackupLocationDialog(this, { supervisor: this.supervisor });
@@ -303,13 +303,13 @@ export class HassioBackups extends LitElement {
        showHassioBackupDialog(this, {
          slug,
          supervisor: this.supervisor,
-          onDelete: () => this.fetchBackups(),
+          onDelete: () => this._fetchBackups(),
        }),
-      reloadBackup: () => this.fetchBackups(),
+      reloadBackup: () => this._fetchBackups(),
    });
  }

-  private async fetchBackups() {
+  private async _fetchBackups() {
    this._isLoading = true;
    await reloadHassioBackups(this.hass);
    this._backups = await fetchHassioBackups(this.hass);
@@ -341,7 +341,7 @@ export class HassioBackups extends LitElement {
      });
      return;
    }
-    await this.fetchBackups();
+    await this._fetchBackups();
    this._dataTable.clearSelection();
  }

@@ -350,7 +350,7 @@ export class HassioBackups extends LitElement {
    showHassioBackupDialog(this, {
      slug,
      supervisor: this.supervisor,
-      onDelete: () => this.fetchBackups(),
+      onDelete: () => this._fetchBackups(),
    });
  }

@@ -366,7 +366,7 @@ export class HassioBackups extends LitElement {
    }
    showHassioCreateBackupDialog(this, {
      supervisor: this.supervisor!,
-      onCreate: () => this.fetchBackups(),
+      onCreate: () => this._fetchBackups(),
    });
  }

@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -9,23 +9,24 @@ import type { HomeAssistant } from "../../../src/types";
 class HassioCardContent extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  // eslint-disable-next-line lit/no-native-attributes
  @property() public title!: string;

  @property() public description?: string;

  @property({ type: Boolean }) public available = true;

-  @property({ type: Boolean }) public showTopbar = false;
+  @property({ attribute: false }) public showTopbar = false;

-  @property() public topbarClass?: string;
+  @property({ attribute: false }) public topbarClass?: string;

-  @property() public iconTitle?: string;
+  @property({ attribute: false }) public iconTitle?: string;

-  @property() public iconClass?: string;
+  @property({ attribute: false }) public iconClass?: string;

  @property() public icon = mdiHelpCircle;

-  @property() public iconImage?: string;
+  @property({ attribute: false }) public iconImage?: string;

  protected render(): TemplateResult {
    return html`
@@ -35,7 +36,11 @@ class HassioCardContent extends LitElement {
      ${this.iconImage
        ? html`
            <div class="icon_image ${this.iconClass}">
-              <img src=${this.iconImage} .title=${this.iconTitle} />
+              <img
+                src=${this.iconImage}
+                .title=${this.iconTitle}
+                alt=${this.iconTitle ?? ""}
+              />
              <div></div>
            </div>
          `
@@ -59,86 +64,84 @@ class HassioCardContent extends LitElement {
    `;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        direction: ltr;
-      }
+  static styles = css`
+    :host {
+      direction: ltr;
+    }

-      ha-svg-icon {
-        margin-right: 24px;
-        margin-left: 8px;
-        margin-top: 12px;
-        float: left;
-        color: var(--secondary-text-color);
-      }
-      ha-svg-icon.update {
-        color: var(--warning-color);
-      }
-      ha-svg-icon.running,
-      ha-svg-icon.installed {
-        color: var(--success-color);
-      }
-      ha-svg-icon.hassupdate,
-      ha-svg-icon.backup {
-        color: var(--paper-item-icon-color);
-      }
-      ha-svg-icon.not_available {
-        color: var(--error-color);
-      }
-      .title {
-        color: var(--primary-text-color);
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addition {
-        color: var(--secondary-text-color);
-        overflow: hidden;
-        position: relative;
-        height: 2.4em;
-        line-height: 1.2em;
-      }
-      .icon_image img {
-        max-height: 40px;
-        max-width: 40px;
-        margin-top: 4px;
-        margin-right: 16px;
-        float: left;
-      }
-      .icon_image.stopped,
-      .icon_image.not_available {
-        filter: grayscale(1);
-      }
-      .dot {
-        position: absolute;
-        background-color: var(--warning-color);
-        width: 12px;
-        height: 12px;
-        top: 8px;
-        right: 8px;
-        border-radius: 50%;
-      }
-      .topbar {
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        top: 0;
-        left: 0;
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-      }
-      .topbar.installed {
-        background-color: var(--primary-color);
-      }
-      .topbar.update {
-        background-color: var(--accent-color);
-      }
-      .topbar.unavailable {
-        background-color: var(--error-color);
-      }
-    `;
-  }
+    ha-svg-icon {
+      margin-right: 24px;
+      margin-left: 8px;
+      margin-top: 12px;
+      float: left;
+      color: var(--secondary-text-color);
+    }
+    ha-svg-icon.update {
+      color: var(--warning-color);
+    }
+    ha-svg-icon.running,
+    ha-svg-icon.installed {
+      color: var(--success-color);
+    }
+    ha-svg-icon.hassupdate,
+    ha-svg-icon.backup {
+      color: var(--paper-item-icon-color);
+    }
+    ha-svg-icon.not_available {
+      color: var(--error-color);
+    }
+    .title {
+      color: var(--primary-text-color);
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .addition {
+      color: var(--secondary-text-color);
+      overflow: hidden;
+      position: relative;
+      height: 2.4em;
+      line-height: 1.2em;
+    }
+    .icon_image img {
+      max-height: 40px;
+      max-width: 40px;
+      margin-top: 4px;
+      margin-right: 16px;
+      float: left;
+    }
+    .icon_image.stopped,
+    .icon_image.not_available {
+      filter: grayscale(1);
+    }
+    .dot {
+      position: absolute;
+      background-color: var(--warning-color);
+      width: 12px;
+      height: 12px;
+      top: 8px;
+      right: 8px;
+      border-radius: 50%;
+    }
+    .topbar {
+      position: absolute;
+      width: 100%;
+      height: 2px;
+      top: 0;
+      left: 0;
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+    .topbar.installed {
+      background-color: var(--primary-color);
+    }
+    .topbar.update {
+      background-color: var(--accent-color);
+    }
+    .topbar.unavailable {
+      background-color: var(--error-color);
+    }
+  `;
 }

 declare global {
@@ -1,7 +1,7 @@
 import { mdiFolderUpload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
@@ -10,10 +10,12 @@ import { uploadBackup } from "../../../src/data/hassio/backup";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../src/types";
+import type { LocalizeFunc } from "../../../src/common/translations/localize";

 declare global {
  interface HASSDomEvents {
    "backup-uploaded": { backup: HassioBackup };
+    "backup-cleared": undefined;
  }
 }

@@ -21,6 +23,8 @@ declare global {
 export class HassioUploadBackup extends LitElement {
  public hass?: HomeAssistant;

+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
  @state() public value: string | null = null;

  @state() private _uploading = false;
@@ -32,13 +36,26 @@ export class HassioUploadBackup extends LitElement {
        .uploading=${this._uploading}
        .icon=${mdiFolderUpload}
        accept="application/x-tar"
-        label="Upload backup"
-        supports="Supports .TAR files"
+        .label=${this.localize?.(
+          "ui.panel.page-onboarding.restore.upload_backup"
+        ) || "Upload backup"}
+        .supports=${this.localize?.(
+          "ui.panel.page-onboarding.restore.upload_supports"
+        ) || "Supports .TAR files"}
+        .secondary=${this.localize?.(
+          "ui.panel.page-onboarding.restore.upload_drop"
+        ) || "Or drop your file here"}
        @file-picked=${this._uploadFile}
+        @files-cleared=${this._clear}
      ></ha-file-upload>
    `;
  }

+  private _clear() {
+    this.value = null;
+    fireEvent(this, "backup-cleared");
+  }
+
  private async _uploadFile(ev) {
    const file = ev.detail.files[0];

@@ -1,5 +1,5 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -65,7 +65,7 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>

@customElement("supervisor-backup-content")
 export class SupervisorBackupContent extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @property({ attribute: false }) public localize?: LocalizeFunc;

@@ -73,23 +73,24 @@ export class SupervisorBackupContent extends LitElement {

  @property({ attribute: false }) public backup?: HassioBackupDetail;

-  @property() public backupType: HassioBackupDetail["type"] = "full";
+  @property({ attribute: false })
+  public backupType: HassioBackupDetail["type"] = "full";

  @property({ attribute: false }) public folders?: CheckboxItem[];

  @property({ attribute: false }) public addons?: AddonCheckboxItem[];

-  @property({ type: Boolean }) public homeAssistant = false;
+  @property({ attribute: false }) public homeAssistant = false;

-  @property({ type: Boolean }) public backupHasPassword = false;
+  @property({ attribute: false }) public backupHasPassword = false;

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

-  @property() public backupName = "";
+  @property({ attribute: false }) public backupName = "";

-  @property() public backupPassword = "";
+  @property({ attribute: false }) public backupPassword = "";

-  @property() public confirmBackupPassword = "";
+  @property({ attribute: false }) public confirmBackupPassword = "";

  @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;

@@ -185,13 +186,14 @@ export class SupervisorBackupContent extends LitElement {
                    .iconPath=${mdiHomeAssistant}
                    .version=${this.backup
                      ? this.backup.homeassistant
-                      : this.hass.config.version}
+                      : this.hass?.config.version}
                  >
                  </supervisor-formfield-label>`}
                >
                  <ha-checkbox
-                    .checked=${this.homeAssistant}
-                    @change=${this.toggleHomeAssistant}
+                    .checked=${this.onboarding || this.homeAssistant}
+                    .disabled=${this.onboarding}
+                    @change=${this._toggleHomeAssistant}
                  >
                  </ha-checkbox>
                </ha-formfield>`
@@ -277,63 +279,61 @@ export class SupervisorBackupContent extends LitElement {
    `;
  }

-  private toggleHomeAssistant() {
+  private _toggleHomeAssistant() {
    this.homeAssistant = !this.homeAssistant;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      .partial-picker ha-formfield {
-        display: block;
-      }
-      .partial-picker ha-checkbox {
-        --mdc-checkbox-touch-target-size: 32px;
-      }
-      .partial-picker {
-        display: block;
-        margin: 0px -6px;
-      }
-      supervisor-formfield-label {
-        display: inline-flex;
-        align-items: center;
-      }
-      hr {
-        border-color: var(--divider-color);
-        border-bottom: none;
-        margin: 16px 0;
-      }
-      .details {
-        color: var(--secondary-text-color);
-      }
-      .section-content {
-        display: flex;
-        flex-direction: column;
-        margin-left: 30px;
-        margin-inline-start: 30px;
-        margin-inline-end: initial;
-      }
-      ha-formfield.password {
-        display: block;
-        margin: 0 -14px -16px;
-      }
-      .backup-types {
-        display: flex;
-        margin-left: -13px;
-        margin-inline-start: -13px;
-        margin-inline-end: initial;
-      }
-      .sub-header {
-        margin-top: 8px;
-      }
-    `;
-  }
+  static styles = css`
+    .partial-picker ha-formfield {
+      display: block;
+    }
+    .partial-picker ha-checkbox {
+      --mdc-checkbox-touch-target-size: 32px;
+    }
+    .partial-picker {
+      display: block;
+      margin: 0px -6px;
+    }
+    supervisor-formfield-label {
+      display: inline-flex;
+      align-items: center;
+    }
+    hr {
+      border-color: var(--divider-color);
+      border-bottom: none;
+      margin: 16px 0;
+    }
+    .details {
+      color: var(--secondary-text-color);
+    }
+    .section-content {
+      display: flex;
+      flex-direction: column;
+      margin-left: 30px;
+      margin-inline-start: 30px;
+      margin-inline-end: initial;
+    }
+    ha-formfield.password {
+      display: block;
+      margin: 0 -14px -16px;
+    }
+    .backup-types {
+      display: flex;
+      margin-left: -13px;
+      margin-inline-start: -13px;
+      margin-inline-end: initial;
+    }
+    .sub-header {
+      margin-top: 8px;
+    }
+  `;

  public backupDetails():
    | HassioPartialBackupCreateParams
    | HassioFullBackupCreateParams {
    const data: any = {};

-    if (!this.backup) {
+    if (!this.backup && this.hass) {
      data.name =
        this.backupName ||
        formatDate(new Date(), this.hass.locale, this.hass.config);
@@ -363,7 +363,9 @@ export class SupervisorBackupContent extends LitElement {
    if (folders?.length) {
      data.folders = folders;
    }
-    data.homeassistant = this.homeAssistant;
+
+    // onboarding needs at least homeassistant to restore
+    data.homeassistant = this.onboarding || this.homeAssistant;

    return data;
  }
@@ -385,6 +387,7 @@ export class SupervisorBackupContent extends LitElement {
            .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
            .imageUrl=${section === "addons" &&
            !this.onboarding &&
+            this.hass &&
            atLeastVersion(this.hass.config.version, 0, 105) &&
            addons?.get(item.slug)?.icon
              ? `/api/hassio/addons/${item.slug}/icon`
--- a/Show More
+++ b/Show More