Fix new script/automation dialog

.devcontainer/Dockerfile

@@ -1,4 +1,5 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+# 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
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -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 a discussion][fr] instead of creating an issue.
+        If you have a feature or enhancement request for the frontend, please [start an 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?
+      label: In which browser are you experiencing the issue with?
       placeholder: Google Chrome 88.0.4324.150
       description: >
         Provide the full name and don't forget to add the version!

.github/ISSUE_TEMPLATE/config.yml

@@ -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 a new feature for the Home Assistant frontend.
+    about: Request an 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.

.github/workflows/ci.yaml

@@ -26,14 +26,20 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        id: setup-node
         uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        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
@@ -60,11 +66,19 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        id: setup-node
         uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        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
@@ -78,18 +92,26 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        id: setup-node
         uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        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.6.0
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -102,18 +124,26 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
+        id: setup-node
         uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
+      - uses: actions/cache@v4.2.0
+        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.6.0
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.6.0
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.6.0
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -25,14 +25,14 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
 
+      - 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
         with:
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: |
             dist/*.whl
@@ -76,7 +76,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@2024.11.0
         with:
-          abi: cp313
+          abi: cp312
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -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.2.1
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -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.2.1
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -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,6 +18,17 @@ 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,
@@ -40,18 +51,27 @@ const polyfillSupport = {
     safari: 12.0,
     samsung: 10.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
+  fetch: {
+    android: 42,
+    chrome: 42,
+    edge: 14,
+    firefox: 39,
+    ios: 10.3,
+    opera: 29,
+    opera_mobile: 29,
+    safari: 10.1,
+    samsung: 4.0,
+  },
   "intl-getcanonicallocales": {
-    android: 90,
-    chrome: 90,
-    edge: 90,
+    android: 54,
+    chrome: 54,
+    edge: 16,
     firefox: 48,
     ios: 10.3,
-    opera: 76,
-    opera_mobile: 64,
+    opera: 41,
+    opera_mobile: 41,
     safari: 10.1,
-    samsung: 15.0,
+    samsung: 6.0,
   },
   "intl-locale": {
     android: 74,
@@ -67,6 +87,17 @@ 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,
@@ -84,6 +115,8 @@ 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"),
@@ -95,7 +128,7 @@ const polyfillMap = {
       module: "element-internals-polyfill",
     },
     ...Object.fromEntries(
-      ["getAttributeNames", "toggleAttribute"].map((prop) => {
+      ["append", "getAttributeNames", "toggleAttribute"].map((prop) => {
         const key = `element-${prop.toLowerCase()}`;
         return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }];
       })
@@ -135,7 +168,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)) {

build-scripts/eslint.config.mjs

@@ -9,7 +9,7 @@ export default [
       "import/extensions": "off",
       "import/no-dynamic-require": "off",
       "global-require": "off",
-      "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-var-requires": "off",
       "prefer-arrow-callback": "off",
     },
   },

build-scripts/gulp/compress.js

@@ -3,7 +3,6 @@
 import { constants } from "node:zlib";
 import gulp from "gulp";
 import brotli from "gulp-brotli";
-import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
 const filesGlob = "*.{js,json,css,svg,xml}";
@@ -13,74 +12,29 @@ const brotliOptions = {
     [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY,
   },
 };
-const zopfliOptions = { threshold: 150 };
 
-const compressModern = (rootDir, modernDir, compress) =>
-  gulp
-    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
-      base: rootDir,
-      allowEmpty: true,
-    })
-    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
-    .pipe(gulp.dest(rootDir));
-
-const compressOther = (rootDir, modernDir, compress) =>
+const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
   gulp
     .src(
       [
-        `${rootDir}/**/${filesGlob}`,
-        `!${modernDir}/**/${filesGlob}`,
-        `!${rootDir}/{sw-modern,service_worker}.js`,
-        `${rootDir}/{authorize,onboarding}.html`,
-      ],
-      { base: rootDir, allowEmpty: true }
+        `${modernDir}/**/${filesGlob}`,
+        compressServiceWorker ? `${rootDir}/sw-modern.js` : undefined,
+      ].filter(Boolean),
+      {
+        base: rootDir,
+      }
     )
-    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
+    .pipe(brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-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(
+const compressAppBrotli = () =>
+  compressDistBrotli(paths.app_output_root, paths.app_output_latest);
+const compressHassioBrotli = () =>
+  compressDistBrotli(
     paths.hassio_output_root,
     paths.hassio_output_latest,
-    "brotli"
-  );
-const compressHassioModernZopfli = () =>
-  compressModern(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    "zopfli"
+    false
   );
 
-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(
-    compressHassioModernBrotli,
-    compressHassioOtherBrotli,
-    compressHassioModernZopfli,
-    compressHassioOtherZopfli
-  )
-);
+gulp.task("compress-app", compressAppBrotli);
+gulp.task("compress-hassio", compressHassioBrotli);

build-scripts/gulp/gather-static.js

@@ -67,6 +67,12 @@ 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
@@ -134,6 +140,8 @@ 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);
@@ -156,6 +164,8 @@ 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);
@@ -169,6 +179,8 @@ 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);

build-scripts/gulp/index.mjs

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

cast/README.md

@@ -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 your 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 you development machine.
 
 ### Changing configuration
 

cast/src/html/receiver.html.template

@@ -7,6 +7,7 @@
   <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {
+      background-color: white;
       font-size: initial;
     }
   </style>

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

@@ -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 { TemplateResult } from "lit";
+import type { CSSResultGroup, 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,72 +203,74 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (_err: any) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static styles = css`
-    .center-item {
-      display: flex;
-      justify-content: space-around;
-    }
+  static get styles(): CSSResultGroup {
+    return 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 {

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

@@ -13,7 +13,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, 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 an auth callback in url.
+      // Clear url if we have a auth callback in url.
       if (location.search.includes("auth_callback=1")) {
         history.replaceState(null, "", location.pathname);
       }
@@ -288,39 +288,41 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (_err: any) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static styles = css`
-    .card-content a {
-      color: var(--primary-color);
-    }
-    .card-actions a {
-      text-decoration: none;
-    }
-    .error {
-      color: red;
-      font-weight: bold;
-    }
+  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;
+      }
 
-    .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 {

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

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -63,94 +63,96 @@ class HcLayout extends LitElement {
     }
   }
 
-  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) {
+  static get styles(): CSSResultGroup {
+    return css`
       :host {
-        justify-content: flex-start;
-        min-height: 90%;
-        margin-bottom: 30px;
+        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 {
+          justify-content: flex-start;
+          min-height: 90%;
+          margin-bottom: 30px;
+        }
+      }
+    `;
+  }
 }
 
 declare global {

cast/src/receiver/layout/hc-launch-screen.ts

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

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

@@ -1,4 +1,10 @@
-import { css, html, LitElement, type TemplateResult } from "lit";
+import {
+  css,
+  type CSSResultGroup,
+  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";
@@ -8,7 +14,6 @@ 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");
@@ -52,9 +57,11 @@ class HcLovelace extends LitElement {
     const background = viewConfig.background || this.lovelaceConfig.background;
 
     return html`
-      <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
-        <hui-view-background .hass=${this.hass} .background=${background}>
-        </hui-view-background>
+      <hui-view-container
+        .hass=${this.hass}
+        .background=${background}
+        .theme=${viewConfig.theme}
+      >
         <hui-view
           .hass=${this.hass}
           .lovelace=${lovelace}
@@ -111,18 +118,20 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  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%;
-    }
-  `;
+  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%;
+      }
+    `;
+  }
 }
 
 export interface CastViewChanged {

demo/src/configs/demo-configs.ts

@@ -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: (() => Promise<DemoConfig>)[] = [
+export const demoConfigs: Array<() => Promise<DemoConfig>> = [
   () => import("./sections").then((mod) => mod.demoSections),
   () => import("./arsaboo").then((mod) => mod.demoArsaboo),
   () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),

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

@@ -1,4 +1,5 @@
 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";
@@ -66,35 +67,37 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -32,7 +32,6 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return this._hidden ? 0 : 2;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   public setConfig(_config: LovelaceCardConfig) {}
 
   protected render() {

demo/src/stubs/history.ts

@@ -131,7 +131,6 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         });
       }, 1);
 
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
     }
   );

demo/src/stubs/lovelace.ts

@@ -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 :-(");
       }

demo/src/stubs/persistent_notification.ts

@@ -15,7 +15,6 @@ export const mockPersistentNotification = (hass: MockHomeAssistant) => {
         },
       },
     } as PersistentNotificationMessage);
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
 };

demo/src/stubs/recorder.ts

@@ -15,7 +15,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 const generateMeanStatistics = (
   start: Date,
   end: Date,
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/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 default-param-last
+  // eslint-disable-next-line @typescript-eslint/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 default-param-last
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,

demo/src/stubs/template.ts

@@ -11,7 +11,6 @@ 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 () => {};
   });
 };

demo/src/stubs/todo.ts

@@ -22,6 +22,5 @@ export const mockTodo = (hass: MockHomeAssistant) => {
       },
     ] as TodoItem[],
   }));
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };

eslint.config.mjs

@@ -18,9 +18,8 @@ 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",
@@ -51,6 +50,8 @@ export default [
         ecmaFeatures: {
           modules: true,
         },
+
+        project: "./tsconfig.json",
       },
     },
 
@@ -147,15 +148,15 @@ export default [
         },
       ],
 
-      "@typescript-eslint/no-unused-vars": [
+      "@typescript-eslint/no-unused-vars": "off",
+
+      "unused-imports/no-unused-vars": [
         "error",
         {
-          args: "all",
-          argsIgnorePattern: "^_",
-          caughtErrors: "all",
-          caughtErrorsIgnorePattern: "^_",
-          destructuredArrayIgnorePattern: "^_",
+          vars: "all",
           varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
           ignoreRestSiblings: true,
         },
       ],
@@ -173,16 +174,6 @@ export default [
       "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",
     },
   },
 ];

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -42,7 +42,7 @@ In most cases, Create can be paired with Delete, and Add can be paired with Remo
 
 ## Add
 
-An already-existing item.
+An already-exisiting item.
 
 For example:
 

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

@@ -177,24 +177,26 @@ export class DemoAutomationDescribeAction extends LitElement {
     this._action = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  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%;
-    }
-  `;
+  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%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -98,24 +98,26 @@ export class DemoAutomationDescribeCondition extends LitElement {
     this._condition = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  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%;
-    }
-  `;
+  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%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -121,24 +121,26 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  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%;
-    }
-  `;
+  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%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -58,20 +58,22 @@ export class DemoAutomationTraceTimeline extends LitElement {
     hass.updateTranslations("config", "en");
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px;
-    }
-    .card-content {
-      display: flex;
-    }
-    button {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/automation/trace.ts

@@ -68,26 +68,28 @@ export class DemoAutomationTrace extends LitElement {
     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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -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 a warning alert — check it out!
+  This is an 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 a success alert — check it out!
+  This is an 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 a warning alert — check it out!
+  This is an 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 a success alert — check it out!
+  This is an 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 a success alert — check it out!
+  This is an success alert — check it out!
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success" title="Success">
-  This is a success alert — check it out!
+  This is an success alert — check it out!
 </ha-alert>
 ```
 
 **Dismissable**
 
 <ha-alert alert-type="success" dismissable>
-  This is a success alert — check it out!
+  This is an success alert — check it out!
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success" dismissable>
-  This is a success alert — check it out!
+  This is an success alert — check it out!
 </ha-alert>
 ```
 
 **Slotted action**
 
 <ha-alert alert-type="success">
-  This is a success alert — check it out!
+  This is an success alert — check it out!
   <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success">
-  This is a success alert — check it out!
+  This is an success alert — check it out!
   <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>
 ```

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

@@ -177,44 +177,46 @@ export class DemoHaAlert extends LitElement {
     );
   }
 
-  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);
-    }
-  `;
+  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);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -63,18 +63,20 @@ export class DemoHaBar extends LitElement {
     `;
   }
 
-  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);
-    }
-  `;
+  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);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -103,17 +103,19 @@ export class DemoHaChips extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-circular-progress.ts

@@ -48,12 +48,14 @@ export class DemoHaCircularProgress extends LitElement {
       ></ha-card>`;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-button.ts

@@ -14,12 +14,12 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-control-button-group";
 
-interface Button {
+type Button = {
   label: string;
   icon?: string;
   class?: string;
   disabled?: boolean;
-}
+};
 
 const buttons: Button[] = [
   {
@@ -35,10 +35,10 @@ const buttons: Button[] = [
   },
 ];
 
-interface ButtonGroup {
+type ButtonGroup = {
   vertical?: boolean;
   class?: string;
-}
+};
 
 const buttonGroups: ButtonGroup[] = [
   {},
@@ -137,51 +137,53 @@ export class DemoHaBarButton extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-circular-slider.ts

@@ -133,37 +133,39 @@ export class DemoHaCircularSlider extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -73,30 +73,32 @@ export class DemoHarControlNumberButtons extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-select-menu.ts

@@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 
-interface SelectMenuOptions {
+type SelectMenuOptions = {
   label: string;
   value: string;
   icon?: string;
-}
+};
 
-interface SelectMenu {
+type SelectMenu = {
   label: string;
   icon: string;
   class?: string;
   disabled?: boolean;
   options: SelectMenuOptions[];
-}
+};
 
 const selects: SelectMenu[] = [
   {
@@ -112,30 +112,32 @@ export class DemoHaControlSelectMenu extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-select.ts

@@ -168,40 +168,42 @@ export class DemoHaControlSelect extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-control-slider.ts

@@ -131,41 +131,43 @@ export class DemoHaBarSlider extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -99,42 +99,44 @@ export class DemoHaControlSwitch extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-expansion-panel.ts

@@ -143,11 +143,13 @@ export class DemoHaExpansionPanel extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-expansion-panel {
-      margin: -16px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-expansion-panel {
+        margin: -16px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -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>Small text</h3>
+          <h3>Smal text</h3>
           <ha-faded><span>${SMALL_TEXT}</span></ha-faded>
           <h3>Long text in markdown</h3>
           <ha-faded>
@@ -61,12 +61,14 @@ export class DemoHaFaded extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/components/ha-hs-color-picker.ts

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

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

@@ -95,23 +95,25 @@ export class DemoHaLabelBadge extends LitElement {
     `;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -48,25 +48,27 @@ export class DemoHaTip extends LitElement {
     );
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-numeric.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-seconds.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-short-year.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time-short.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeDateTimeShort extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date-time.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeDateTime extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/date.ts

@@ -90,26 +90,28 @@ export class DemoDateTimeDate extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/time-seconds.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeTimeSeconds extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/time-weekday.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeTimeWeekday extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/date-time/time.ts

@@ -100,30 +100,32 @@ export class DemoDateTimeTime extends LitElement {
     `;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > div {
-      flex-grow: 1;
-      width: 20%;
-    }
-  `;
+      .container > div {
+        flex-grow: 1;
+        width: 20%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -321,13 +321,13 @@ function createEntity(
   };
 }
 
-interface EntityRowData {
+type EntityRowData = {
   stateObj: HassEntity;
   entity_id: string;
   state: string;
   device_class?: string;
   domain: string;
-}
+};
 
 function createRowData(stateObj: HassEntity): EntityRowData {
   return {
@@ -429,15 +429,17 @@ export class DemoEntityState extends LitElement {
     `;
   }
 
-  static styles = css`
-    .color {
-      display: block;
-      height: 20px;
-      width: 20px;
-      border-radius: 10px;
-      background-color: rgb(--color);
-    }
-  `;
+  static get styles() {
+    return css`
+      .color {
+        display: block;
+        height: 20px;
+        width: 20px;
+        border-radius: 10px;
+        background-color: rgb(--color);
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/misc/ha-markdown.ts

@@ -76,12 +76,14 @@ export class DemoMiscMarkdown extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      margin: 12px;
-      padding: 12px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        margin: 12px;
+        padding: 12px;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/misc/integration-card.ts

@@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
   },
 ];
 
-const configEntries: {
+const configEntries: Array<{
   items: ConfigEntryExtended[];
   is_custom?: boolean;
   disabled?: boolean;
   highlight?: string;
-}[] = [
+}> = [
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
@@ -349,24 +349,26 @@ export class DemoIntegrationCard extends LitElement {
     this.isCloud = !this.isCloud;
   }
 
-  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;
-    }
+  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;
+      }
 
-    .container > * {
-      max-width: 500px;
-    }
+      .container > * {
+        max-width: 500px;
+      }
 
-    ha-formfield {
-      margin: 8px 0;
-      display: block;
-    }
-  `;
+      ha-formfield {
+        margin: 8px 0;
+        display: block;
+      }
+    `;
+  }
 }
 
 declare global {

gulpfile.js

@@ -1,4 +1,16 @@
+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);

hassio/src/addon-store/hassio-addon-store.ts

@@ -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 { PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -211,33 +211,35 @@ export class HassioAddonStore extends LitElement {
     this._filter = e.detail.value;
   }
 
-  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);
-    }
-  `;
+  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);
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -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;

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -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> {

hassio/src/components/hassio-card-content.ts

@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -64,84 +64,86 @@ class HassioCardContent extends LitElement {
     `;
   }
 
-  static styles = css`
-    :host {
-      direction: ltr;
-    }
+  static get styles(): CSSResultGroup {
+    return 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 {

hassio/src/components/hassio-upload-backup.ts

@@ -1,7 +1,7 @@
 import { mdiFolderUpload } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, 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,12 +10,10 @@ 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;
   }
 }
 
@@ -23,8 +21,6 @@ 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;
@@ -36,26 +32,13 @@ export class HassioUploadBackup extends LitElement {
         .uploading=${this._uploading}
         .icon=${mdiFolderUpload}
         accept="application/x-tar"
-        .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"}
+        label="Upload backup"
+        supports="Supports .TAR files"
         @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];
 

hassio/src/components/supervisor-backup-content.ts

@@ -1,5 +1,5 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, 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;
 
@@ -186,13 +186,12 @@ 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.onboarding || this.homeAssistant}
-                    .disabled=${this.onboarding}
+                    .checked=${this.homeAssistant}
                     @change=${this._toggleHomeAssistant}
                   >
                   </ha-checkbox>
@@ -283,57 +282,59 @@ export class SupervisorBackupContent extends LitElement {
     this.homeAssistant = !this.homeAssistant;
   }
 
-  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;
-    }
-  `;
+  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;
+      }
+    `;
+  }
 
   public backupDetails():
     | HassioPartialBackupCreateParams
     | HassioFullBackupCreateParams {
     const data: any = {};
 
-    if (!this.backup && this.hass) {
+    if (!this.backup) {
       data.name =
         this.backupName ||
         formatDate(new Date(), this.hass.locale, this.hass.config);
@@ -363,9 +364,7 @@ export class SupervisorBackupContent extends LitElement {
     if (folders?.length) {
       data.folders = folders;
     }
-
-    // onboarding needs at least homeassistant to restore
-    data.homeassistant = this.onboarding || this.homeAssistant;
+    data.homeassistant = this.homeAssistant;
 
     return data;
   }
@@ -387,7 +386,6 @@ 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`

hassio/src/components/supervisor-formfield-label.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -30,27 +30,29 @@ class SupervisorFormfieldLabel extends LitElement {
     `;
   }
 
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-    }
-    .label {
-      margin-right: 4px;
-      margin-inline-end: 4px;
-      margin-inline-start: initial;
-    }
-    .version {
-      color: var(--secondary-text-color);
-    }
-    .icon {
-      max-height: 22px;
-      max-width: 22px;
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .label {
+        margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
+      }
+      .version {
+        color: var(--secondary-text-color);
+      }
+      .icon {
+        max-height: 22px;
+        max-width: 22px;
+        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/components/supervisor-metric.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,41 +31,46 @@ class SupervisorMetric extends LitElement {
     </ha-settings-row>`;
   }
 
-  static styles = css`
-    ha-settings-row {
-      padding: 0;
-      height: 54px;
-      width: 100%;
-    }
-    ha-settings-row > div[slot="description"] {
-      white-space: normal;
-      color: var(--secondary-text-color);
-      display: flex;
-      justify-content: space-between;
-    }
-    ha-bar {
-      --ha-bar-primary-color: var(--hassio-bar-ok-color, var(--success-color));
-    }
-    .target-warning {
-      --ha-bar-primary-color: var(
-        --hassio-bar-warning-color,
-        var(--warning-color)
-      );
-    }
-    .target-critical {
-      --ha-bar-primary-color: var(
-        --hassio-bar-critical-color,
-        var(--error-color)
-      );
-    }
-    .value {
-      width: 48px;
-      padding-right: 4px;
-      padding-inline-start: initial;
-      padding-inline-end: 4px;
-      flex-shrink: 0;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-settings-row {
+        padding: 0;
+        height: 54px;
+        width: 100%;
+      }
+      ha-settings-row > div[slot="description"] {
+        white-space: normal;
+        color: var(--secondary-text-color);
+        display: flex;
+        justify-content: space-between;
+      }
+      ha-bar {
+        --ha-bar-primary-color: var(
+          --hassio-bar-ok-color,
+          var(--success-color)
+        );
+      }
+      .target-warning {
+        --ha-bar-primary-color: var(
+          --hassio-bar-warning-color,
+          var(--warning-color)
+        );
+      }
+      .target-critical {
+        --ha-bar-primary-color: var(
+          --hassio-bar-critical-color,
+          var(--error-color)
+        );
+      }
+      .value {
+        width: 48px;
+        padding-right: 4px;
+        padding-inline-start: initial;
+        padding-inline-end: 4px;
+        flex-shrink: 0;
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -28,7 +28,7 @@ export class DialogHassioBackupUpload
     await this.updateComplete;
   }
 
-  public closeDialog() {
+  public closeDialog(): void {
     if (this._dialogParams && !this._dialogParams.onboarding) {
       if (this._dialogParams.reloadBackup) {
         this._dialogParams.reloadBackup();
@@ -36,7 +36,6 @@ export class DialogHassioBackupUpload
     }
     this._dialogParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -8,11 +8,9 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/ha-md-dialog";
-import "../../../../src/components/ha-dialog-header";
+import "../../../../src/components/ha-dialog";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-icon-button";
@@ -21,7 +19,6 @@ import type { HassioBackupDetail } from "../../../../src/data/hassio/backup";
 import {
   fetchHassioBackupInfo,
   removeBackup,
-  restoreBackup,
 } from "../../../../src/data/hassio/backup";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
@@ -36,7 +33,6 @@ import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
 import type { BackupOrRestoreKey } from "../../util/translations";
-import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -56,20 +52,13 @@ class HassioBackupDialog
   @query("supervisor-backup-content")
   private _backupContent!: SupervisorBackupContent;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
-
   public async showDialog(dialogParams: HassioBackupDialogParams) {
-    this._dialogParams = dialogParams;
     this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
-    if (!this._backup) {
-      this._error = this._localize("no_backup_found");
-    } else if (this._dialogParams.onboarding && !this._backup.homeassistant) {
-      this._error = this._localize("restore_no_home_assistant");
-    }
+    this._dialogParams = dialogParams;
     this._restoringBackup = false;
   }
 
-  private _dialogClosed(): void {
+  public closeDialog() {
     this._backup = undefined;
     this._dialogParams = undefined;
     this._restoringBackup = false;
@@ -77,11 +66,6 @@ class HassioBackupDialog
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  public closeDialog() {
-    this._dialog?.close();
-    return true;
-  }
-
   private _localize(key: BackupOrRestoreKey) {
     return (
       this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
@@ -94,80 +78,100 @@ class HassioBackupDialog
       return nothing;
     }
     return html`
-      <ha-md-dialog
+      <ha-dialog
         open
-        .disableCancelAction=${!this._error}
-        @closed=${this._dialogClosed}
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${this._backup.name}
       >
-        <ha-dialog-header slot="headline">
-          <ha-icon-button
-            slot="navigationIcon"
-            .label=${this._localize("close")}
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-            .disabled=${this._restoringBackup}
-          ></ha-icon-button>
-          <span slot="title" .title=${this._backup.name}
-            >${this._backup.name}</span
-          >
-          ${!this._dialogParams.onboarding && this._dialogParams.supervisor
-            ? html`<ha-button-menu
-                slot="actionItems"
-                fixed
-                @action=${this._handleMenuAction}
-                @closed=${stopPropagation}
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">${this._backup.name}</span>
+            <ha-icon-button
+              .label=${this._localize("close")}
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
+          </ha-header-bar>
+        </div>
+        ${this._restoringBackup
+          ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
+          : html`
+              <supervisor-backup-content
+                .hass=${this.hass}
+                .supervisor=${this._dialogParams.supervisor}
+                .backup=${this._backup}
+                .onboarding=${this._dialogParams.onboarding || false}
+                .localize=${this._dialogParams.localize}
+                dialogInitialFocus
               >
-                <ha-icon-button
-                  .label=${this._dialogParams.supervisor.localize(
-                    "backup.more_actions"
-                  )}
-                  .path=${mdiDotsVertical}
-                  slot="trigger"
-                ></ha-icon-button>
-                <mwc-list-item
-                  >${this._dialogParams.supervisor.localize(
-                    "backup.download_backup"
-                  )}</mwc-list-item
-                >
-                <mwc-list-item class="error"
-                  >${this._dialogParams.supervisor.localize(
-                    "backup.delete_backup_title"
-                  )}</mwc-list-item
-                >
-              </ha-button-menu>`
-            : nothing}
-        </ha-dialog-header>
-        <div slot="content">
-          ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : this._restoringBackup
-              ? html`<div class="loading">
-                  <ha-circular-progress indeterminate></ha-circular-progress>
-                </div>`
-              : html`
-                  <supervisor-backup-content
-                    .hass=${this.hass}
-                    .supervisor=${this._dialogParams.supervisor}
-                    .backup=${this._backup}
-                    .onboarding=${this._dialogParams.onboarding || false}
-                    .localize=${this._dialogParams.localize}
-                    dialogInitialFocus
-                  >
-                  </supervisor-backup-content>
-                `}
-        </div>
-        <div slot="actions">
-          <ha-button
-            .disabled=${this._restoringBackup || !!this._error}
-            @click=${this._restoreClicked}
-          >
-            ${this._localize("restore")}
-          </ha-button>
-        </div>
-      </ha-md-dialog>
+              </supervisor-backup-content>
+            `}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : nothing}
+
+        <mwc-button
+          .disabled=${this._restoringBackup}
+          slot="secondaryAction"
+          @click=${this._restoreClicked}
+        >
+          ${this._localize("restore")}
+        </mwc-button>
+
+        ${!this._dialogParams.onboarding && this._dialogParams.supervisor
+          ? html`<ha-button-menu
+              fixed
+              slot="primaryAction"
+              @action=${this._handleMenuAction}
+              @closed=${stopPropagation}
+            >
+              <ha-icon-button
+                .label=${this._dialogParams.supervisor.localize(
+                  "backup.more_actions"
+                )}
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
+              <mwc-list-item
+                >${this._dialogParams.supervisor.localize(
+                  "backup.download_backup"
+                )}</mwc-list-item
+              >
+              <mwc-list-item class="error"
+                >${this._dialogParams.supervisor.localize(
+                  "backup.delete_backup_title"
+                )}</mwc-list-item
+              >
+            </ha-button-menu>`
+          : nothing}
+      </ha-dialog>
     `;
   }
 
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-circular-progress {
+          display: block;
+          text-align: center;
+        }
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          display: block;
+        }
+        ha-icon-button {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
+
   private _handleMenuAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -182,7 +186,16 @@ class HassioBackupDialog
   private async _restoreClicked() {
     const backupDetails = this._backupContent.backupDetails();
     this._restoringBackup = true;
+    this._dialogParams?.onRestoring?.();
+    if (this._backupContent.backupType === "full") {
+      await this._fullRestoreClicked(backupDetails);
+    } else {
+      await this._partialRestoreClicked(backupDetails);
+    }
+    this._restoringBackup = false;
+  }
 
+  private async _partialRestoreClicked(backupDetails) {
     const supervisor = this._dialogParams?.supervisor;
     if (supervisor !== undefined && supervisor.info.state !== "running") {
       await showAlertDialog(this, {
@@ -191,45 +204,91 @@ class HassioBackupDialog
           state: supervisor.info.state,
         }),
       });
-      this._restoringBackup = false;
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title: this._localize(
-          this._backup!.type === "full"
-            ? "confirm_restore_full_backup_title"
-            : "confirm_restore_partial_backup_title"
-        ),
-        text: this._localize(
-          this._backup!.type === "full"
-            ? "confirm_restore_full_backup_text"
-            : "confirm_restore_partial_backup_text"
-        ),
+        title: this._localize("confirm_restore_partial_backup_title"),
+        text: this._localize("confirm_restore_partial_backup_text"),
         confirmText: this._localize("restore"),
         dismissText: this._localize("cancel"),
       }))
     ) {
-      this._restoringBackup = false;
       return;
     }
 
-    try {
-      await restoreBackup(
-        this.hass,
-        this._backup!.type,
-        this._backup!.slug,
-        { ...backupDetails, background: this._dialogParams?.onboarding },
-        !!this.hass && atLeastVersion(this.hass.config.version, 2021, 9)
-      );
+    if (!this._dialogParams?.onboarding) {
+      try {
+        await this.hass!.callApi(
+          "POST",
 
+          `hassio/${
+            atLeastVersion(this.hass!.config.version, 2021, 9)
+              ? "backups"
+              : "snapshots"
+          }/${this._backup!.slug}/restore/partial`,
+          backupDetails
+        );
+        this.closeDialog();
+      } catch (error: any) {
+        this._error = error.body.message;
+      }
+    } else {
       this._dialogParams?.onRestoring?.();
+      await fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, {
+        method: "POST",
+        body: JSON.stringify(backupDetails),
+      });
+      this.closeDialog();
+    }
+  }
+
+  private async _fullRestoreClicked(backupDetails) {
+    const supervisor = this._dialogParams?.supervisor;
+    if (supervisor !== undefined && supervisor.info.state !== "running") {
+      await showAlertDialog(this, {
+        title: supervisor.localize("backup.could_not_restore"),
+        text: supervisor.localize("backup.restore_blocked_not_running", {
+          state: supervisor.info.state,
+        }),
+      });
+      return;
+    }
+    if (
+      !(await showConfirmationDialog(this, {
+        title: this._localize("confirm_restore_full_backup_title"),
+        text: this._localize("confirm_restore_full_backup_text"),
+        confirmText: this._localize("restore"),
+        dismissText: this._localize("cancel"),
+      }))
+    ) {
+      return;
+    }
+
+    if (!this._dialogParams?.onboarding) {
+      this.hass!.callApi(
+        "POST",
+        `hassio/${
+          atLeastVersion(this.hass!.config.version, 2021, 9)
+            ? "backups"
+            : "snapshots"
+        }/${this._backup!.slug}/restore/full`,
+        backupDetails
+      ).then(
+        () => {
+          this.closeDialog();
+        },
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
+    } else {
+      this._dialogParams?.onRestoring?.();
+      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/full`, {
+        method: "POST",
+        body: JSON.stringify(backupDetails),
+      });
       this.closeDialog();
-    } catch (error: any) {
-      this._error =
-        error?.body?.message || this._localize("restore_start_failed");
-    } finally {
-      this._restoringBackup = false;
     }
   }
 
@@ -302,36 +361,7 @@ class HassioBackupDialog
   private get _computeName() {
     return this._backup
       ? this._backup.name || this._backup.slug
-      : this._localize("unnamed_backup");
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-circular-progress {
-          display: block;
-          text-align: center;
-        }
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          display: block;
-        }
-        ha-icon-button {
-          color: var(--secondary-text-color);
-        }
-        .loading {
-          width: 100%;
-          display: flex;
-          height: 100%;
-          justify-content: center;
-          align-items: center;
-        }
-      `,
-    ];
+      : "Unnamed backup";
   }
 }
 

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -82,11 +82,10 @@ export class DialogHassioNetwork
     await this.updateComplete;
   }
 
-  public closeDialog() {
+  public closeDialog(): void {
     this._params = undefined;
     this._processing = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {

hassio/src/hassio-my-redirect.ts

@@ -92,7 +92,7 @@ class HassioMyRedirect extends LitElement {
     let url: string;
     try {
       url = this._createRedirectUrl(redirect);
-    } catch (_err: any) {
+    } catch (err: any) {
       this._error = this.supervisor.localize("my.error");
       return;
     }

hassio/src/hassio-panel.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -39,13 +39,15 @@ class HassioPanel extends LitElement {
     `;
   }
 
-  static styles = css`
-    :host {
-      --app-header-background-color: var(--sidebar-background-color);
-      --app-header-text-color: var(--sidebar-text-color);
-      --app-header-border-bottom: 1px solid var(--divider-color);
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        --app-header-background-color: var(--sidebar-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+        --app-header-border-bottom: 1px solid var(--divider-color);
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -1,5 +1,5 @@
 import { mdiMenu } from "@mdi/js";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -158,7 +158,7 @@ class HassioIngressView extends LitElement {
 
     try {
       addon = await fetchHassioAddonInfo(this.hass, addonSlug);
-    } catch (_err: any) {
+    } catch (err: any) {
       await this.updateComplete;
       await showAlertDialog(this, {
         text:
@@ -219,7 +219,7 @@ class HassioIngressView extends LitElement {
           });
           this._fetchData(addonSlug);
           return;
-        } catch (_err) {
+        } catch (e) {
           await showAlertDialog(this, {
             text:
               this.supervisor.localize("ingress.error_starting_addon") ||
@@ -264,7 +264,7 @@ class HassioIngressView extends LitElement {
 
     try {
       session = await createSessionPromise;
-    } catch (_err: any) {
+    } catch (err: any) {
       if (this._sessionKeepAlive) {
         clearInterval(this._sessionKeepAlive);
       }
@@ -285,7 +285,7 @@ class HassioIngressView extends LitElement {
     this._sessionKeepAlive = window.setInterval(async () => {
       try {
         await validateHassioSession(this.hass, session);
-      } catch (_err: any) {
+      } catch (err: any) {
         session = await createHassioSession(this.hass);
       }
     }, 60000);
@@ -325,49 +325,51 @@ class HassioIngressView extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static styles = css`
-    iframe {
-      display: block;
-      width: 100%;
-      height: 100%;
-      border: 0;
-    }
+  static get styles(): CSSResultGroup {
+    return css`
+      iframe {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
 
-    .header + iframe {
-      height: calc(100% - 40px);
-    }
+      .header + iframe {
+        height: calc(100% - 40px);
+      }
 
-    .header {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      height: 40px;
-      padding: 0 16px;
-      pointer-events: none;
-      background-color: var(--app-header-background-color);
-      font-weight: 400;
-      color: var(--app-header-text-color, white);
-      border-bottom: var(--app-header-border-bottom, none);
-      box-sizing: border-box;
-      --mdc-icon-size: 20px;
-    }
+      .header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        height: 40px;
+        padding: 0 16px;
+        pointer-events: none;
+        background-color: var(--app-header-background-color);
+        font-weight: 400;
+        color: var(--app-header-text-color, white);
+        border-bottom: var(--app-header-border-bottom, none);
+        box-sizing: border-box;
+        --mdc-icon-size: 20px;
+      }
 
-    .main-title {
-      margin: var(--margin-title);
-      line-height: 20px;
-      flex-grow: 1;
-    }
+      .main-title {
+        margin: var(--margin-title);
+        line-height: 20px;
+        flex-grow: 1;
+      }
 
-    ha-icon-button {
-      pointer-events: auto;
-    }
+      ha-icon-button {
+        pointer-events: auto;
+      }
 
-    hass-subpage {
-      --app-header-background-color: var(--sidebar-background-color);
-      --app-header-text-color: var(--sidebar-text-color);
-      --app-header-border-bottom: 1px solid var(--divider-color);
-    }
-  `;
+      hass-subpage {
+        --app-header-background-color: var(--sidebar-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+        --app-header-border-bottom: 1px solid var(--divider-color);
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/system/hassio-core-info.ts

@@ -33,7 +33,7 @@ class HassioCoreInfo extends LitElement {
 
   @state() private _metrics?: HassioStats;
 
-  protected render(): TemplateResult | undefined {
+  protected render(): TemplateResult | void {
     const metrics = [
       {
         description: this.supervisor.localize("system.core.cpu_usage"),

hassio/src/system/hassio-host-info.ts

@@ -49,7 +49,7 @@ class HassioHostInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  protected render(): TemplateResult | undefined {
+  protected render(): TemplateResult | void {
     const primaryIpAddress = this.supervisor.host.features.includes("network")
       ? this._primaryIpAddress(this.supervisor.network!)
       : "";

hassio/src/system/hassio-supervisor-info.ts

@@ -44,7 +44,7 @@ class HassioSupervisorInfo extends LitElement {
 
   @state() private _metrics?: HassioStats;
 
-  protected render(): TemplateResult | undefined {
+  protected render(): TemplateResult | void {
     const metrics = [
       {
         description: this.supervisor.localize("system.supervisor.cpu_usage"),

hassio/src/system/hassio-supervisor-log.ts

@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
     await this._loadData();
   }
 
-  protected render(): TemplateResult | undefined {
+  protected render(): TemplateResult | void {
     return html`
       <ha-card outlined>
         ${this._error

hassio/src/system/hassio-system.ts

@@ -23,7 +23,7 @@ class HassioSystem extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  protected render(): TemplateResult | undefined {
+  protected render(): TemplateResult | void {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}

hassio/src/update-available/update-available-card.ts

@@ -18,7 +18,10 @@ import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-faded";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-markdown";
+import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import type { HaSwitch } from "../../../src/components/ha-switch";
 import type { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import {
   fetchHassioAddonChangelog,
@@ -160,6 +163,19 @@ class UpdateAvailableCard extends LitElement {
                       )}
                     </p>
                   </div>
+                  ${["core", "addon"].includes(this._updateType)
+                    ? html`
+                        <hr />
+                        <ha-settings-row>
+                          <span slot="heading">
+                            ${this.supervisor.localize(
+                              "update_available.create_backup"
+                            )}
+                          </span>
+                          <ha-switch id="create_backup" checked></ha-switch>
+                        </ha-settings-row>
+                      `
+                    : nothing}
                 `
               : html`<ha-circular-progress
                     aria-label="Updating"
@@ -227,6 +243,19 @@ class UpdateAvailableCard extends LitElement {
     }
   }
 
+  get _shouldCreateBackup(): boolean {
+    if (this._updateType && !["core", "addon"].includes(this._updateType)) {
+      return false;
+    }
+    const createBackupSwitch = this.shadowRoot?.getElementById(
+      "create-backup"
+    ) as HaSwitch;
+    if (createBackupSwitch) {
+      return createBackupSwitch.checked;
+    }
+    return true;
+  }
+
   get _version(): string {
     return this._updateType
       ? this._updateType === "addon"
@@ -341,14 +370,23 @@ class UpdateAvailableCard extends LitElement {
   }
 
   private async _update() {
+    if (this._shouldCreateBackup && this.supervisor.info.state === "freeze") {
+      this._error = this.supervisor.localize("backup.backup_already_running");
+      return;
+    }
+
     this._error = undefined;
     this._updating = true;
 
     try {
       if (this._updateType === "addon") {
-        await updateHassioAddon(this.hass, this.addonSlug!);
+        await updateHassioAddon(
+          this.hass,
+          this.addonSlug!,
+          this._shouldCreateBackup
+        );
       } else if (this._updateType === "core") {
-        await updateCore(this.hass);
+        await updateCore(this.hass, this._shouldCreateBackup);
       } else if (this._updateType === "os") {
         await updateOS(this.hass);
       } else if (this._updateType === "supervisor") {
@@ -398,6 +436,11 @@ class UpdateAvailableCard extends LitElement {
           padding-bottom: 8px;
         }
 
+        ha-settings-row {
+          padding: 0;
+          margin-bottom: -16px;
+        }
+
         hr {
           border-color: var(--divider-color);
           border-bottom: none;

hassio/src/update-available/update-available-dashboard.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -38,18 +38,20 @@ class UpdateAvailableDashboard extends LitElement {
     history.back();
   }
 
-  static styles = css`
-    hass-subpage {
-      --app-header-background-color: var(--primary-background-color);
-      --app-header-text-color: var(--sidebar-text-color);
-    }
-    update-available-card {
-      margin: auto;
-      margin-top: 16px;
-      margin-bottom: 24px;
-      max-width: 600px;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      hass-subpage {
+        --app-header-background-color: var(--primary-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+      }
+      update-available-card {
+        margin: auto;
+        margin-top: 16px;
+        margin-bottom: 24px;
+        max-width: 600px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -230,7 +230,7 @@ class LandingPageLogs extends LitElement {
           this._startLogStream();
           return;
         }
-      } catch (_err) {
+      } catch (err) {
         // ignore and continue with observer logs
       }
       this._loadObserverLogs();

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

@@ -126,7 +126,7 @@ class HaLandingPage extends LandingPageBaseElement {
           "selectedLanguage",
           JSON.stringify(language)
         );
-      } catch (_err: any) {
+      } catch (err: any) {
         // Ignore
       }
     }

package.json

@@ -27,24 +27,24 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.26.0",
-    "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.4",
-    "@codemirror/commands": "6.8.0",
-    "@codemirror/language": "6.10.8",
+    "@braintree/sanitize-url": "7.1.0",
+    "@codemirror/autocomplete": "6.18.3",
+    "@codemirror/commands": "6.7.1",
+    "@codemirror/language": "6.10.6",
     "@codemirror/legacy-modes": "6.4.2",
     "@codemirror/search": "6.5.8",
-    "@codemirror/state": "6.5.1",
-    "@codemirror/view": "6.36.2",
+    "@codemirror/state": "6.4.1",
+    "@codemirror/view": "6.35.2",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.17.2",
-    "@formatjs/intl-displaynames": "6.8.9",
-    "@formatjs/intl-durationformat": "0.7.2",
-    "@formatjs/intl-getcanonicallocales": "2.5.4",
-    "@formatjs/intl-listformat": "7.7.9",
-    "@formatjs/intl-locale": "4.2.9",
-    "@formatjs/intl-numberformat": "8.15.2",
-    "@formatjs/intl-pluralrules": "5.4.2",
-    "@formatjs/intl-relativetimeformat": "11.4.9",
+    "@formatjs/intl-datetimeformat": "6.16.6",
+    "@formatjs/intl-displaynames": "6.8.6",
+    "@formatjs/intl-durationformat": "0.6.5",
+    "@formatjs/intl-getcanonicallocales": "2.5.3",
+    "@formatjs/intl-listformat": "7.7.6",
+    "@formatjs/intl-locale": "4.2.6",
+    "@formatjs/intl-numberformat": "8.14.6",
+    "@formatjs/intl-pluralrules": "5.3.6",
+    "@formatjs/intl-relativetimeformat": "11.4.6",
     "@fullcalendar/core": "6.1.15",
     "@fullcalendar/daygrid": "6.1.15",
     "@fullcalendar/interaction": "6.1.15",
@@ -55,7 +55,7 @@
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.7",
     "@lit-labs/observers": "2.0.4",
-    "@lit-labs/virtualizer": "2.0.15",
+    "@lit-labs/virtualizer": "2.0.14",
     "@lrnwebcomponents/simple-tooltip": "8.0.2",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -91,19 +91,20 @@
     "@polymer/polymer": "3.5.2",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.6.2",
-    "@vaadin/vaadin-themable-mixin": "24.6.2",
-    "@vibrant/color": "4.0.0",
+    "@vaadin/combo-box": "24.5.5",
+    "@vaadin/vaadin-themable-mixin": "24.5.5",
+    "@vibrant/color": "3.2.1-alpha.1",
+    "@vibrant/core": "3.2.1-alpha.1",
+    "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "barcode-detector": "2.3.1",
     "chart.js": "4.4.7",
-    "chartjs-plugin-zoom": "2.2.0",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.40.0",
+    "core-js": "3.39.0",
     "cropperjs": "1.6.2",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
@@ -113,20 +114,20 @@
     "element-internals-polyfill": "1.3.12",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "gulp-zopfli-green": "6.0.2",
     "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
     "home-assistant-js-websocket": "9.4.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.7.11",
+    "intl-messageformat": "10.7.8",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "lit": "2.8.0",
     "lit-html": "2.8.0",
     "luxon": "3.5.0",
-    "marked": "15.0.6",
+    "marked": "15.0.3",
     "memoize-one": "6.0.0",
-    "node-vibrant": "4.0.1",
+    "node-vibrant": "3.2.1-alpha.1",
+    "proxy-polyfill": "0.3.2",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.4",
@@ -138,7 +139,8 @@
     "tinykeys": "3.0.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "2.0.0",
+    "ua-parser-js": "1.0.39",
+    "unfetch": "5.0.0",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
     "vue": "2.7.16",
@@ -160,13 +162,13 @@
     "@babel/preset-env": "7.26.0",
     "@babel/preset-typescript": "7.26.0",
     "@bundle-stats/plugin-webpack-filter": "4.17.0",
-    "@lokalise/node-api": "13.0.0",
-    "@octokit/auth-oauth-device": "7.1.2",
-    "@octokit/plugin-retry": "7.1.3",
-    "@octokit/rest": "21.1.0",
-    "@rsdoctor/rspack-plugin": "0.4.13",
-    "@rspack/cli": "1.1.8",
-    "@rspack/core": "1.1.8",
+    "@lokalise/node-api": "12.8.0",
+    "@octokit/auth-oauth-device": "7.1.1",
+    "@octokit/plugin-retry": "7.1.2",
+    "@octokit/rest": "21.0.2",
+    "@rsdoctor/rspack-plugin": "0.4.11",
+    "@rspack/cli": "1.1.5",
+    "@rspack/core": "1.1.5",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.20",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -174,27 +176,29 @@
     "@types/glob": "8.1.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.16",
+    "@types/leaflet": "1.9.15",
     "@types/leaflet-draw": "1.0.11",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.4.2",
     "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.5",
+    "@types/serve-handler": "6.1.4",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "8.20.0",
-    "@typescript-eslint/parser": "8.20.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
     "@vitest/coverage-v8": "2.1.8",
     "babel-loader": "9.2.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.18.0",
+    "eslint": "9.16.0",
     "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-webpack": "0.13.10",
+    "eslint-import-resolver-webpack": "0.13.9",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-lit": "1.15.0",
     "eslint-plugin-lit-a11y": "4.1.4",
@@ -202,29 +206,33 @@
     "eslint-plugin-wc": "2.2.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
-    "glob": "11.0.1",
+    "glob": "11.0.0",
     "gulp": "5.0.0",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "26.0.0",
+    "jsdom": "25.0.1",
     "jszip": "3.10.1",
-    "lint-staged": "15.3.0",
+    "lint-staged": "15.2.10",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
+    "magic-string": "0.30.14",
     "map-stream": "0.0.7",
     "object-hash": "3.0.0",
+    "open": "10.1.0",
     "pinst": "3.0.0",
     "prettier": "3.4.2",
-    "rspack-manifest-plugin": "5.0.3",
+    "rspack-manifest-plugin": "5.0.2",
+    "serve-handler": "6.1.6",
     "sinon": "19.0.2",
+    "systemjs": "6.15.1",
     "tar": "7.4.3",
-    "terser-webpack-plugin": "5.3.11",
+    "terser-webpack-plugin": "5.3.10",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.7.3",
+    "typescript": "5.7.2",
     "vitest": "2.1.8",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
@@ -239,7 +247,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "1.6.3",
     "@fullcalendar/daygrid": "6.1.15",
-    "globals": "15.14.0"
+    "globals": "15.13.0"
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.5.3"
 }

pyproject.toml

@@ -4,14 +4,14 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20241224.0"
+version      = "20241127.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
 ]
-requires-python = ">=3.13.0"
+requires-python = ">=3.11.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

rspack.config.cjs

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable @typescript-eslint/no-var-requires */
 // Needs to remain CommonJS until eslint-import-resolver-webpack supports ES modules
 const rspack = require("./build-scripts/rspack.cjs");
 const env = require("./build-scripts/env.cjs");

script/develop_and_serve

@@ -30,7 +30,7 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-# parse input parameters
+# parse input paramters
 if [ -n "$DEVCONTAINER" ]; then
     frontendPort=8123
 else

src/auth/ha-authorize.ts

@@ -232,7 +232,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
     try {
       url = new URL(this.redirectUri);
-    } catch (_err) {
+    } catch (err) {
       this._error = "Invalid redirect URI";
       return;
     }
@@ -328,7 +328,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
     try {
       window.localStorage.setItem("selectedLanguage", JSON.stringify(language));
-    } catch (_err: any) {
+    } catch (err: any) {
       // Ignore
     }
   }

src/cast/cast_manager.ts

@@ -32,7 +32,7 @@ export class CastManager {
   // If the cast connection is connected to our Hass.
   public status?: ReceiverStatusMessage;
 
-  private _eventListeners: Record<string, CastEventListener[]> = {};
+  private _eventListeners: { [event: string]: CastEventListener[] } = {};
 
   constructor(auth?: Auth) {
     this.auth = auth;

src/common/array/ensure-array.ts

@@ -1,20 +1,14 @@
-type NonNullUndefined<T> = T extends undefined
-  ? never
-  : T extends null
-    ? never
-    : T;
+type NonUndefined<T> = T extends undefined ? never : T;
 
 /**
  * Ensure that the input is an array or wrap it in an array
  * @param value - The value to ensure is an array
  */
 export function ensureArray(value: undefined): undefined;
-export function ensureArray(value: null): null;
-export function ensureArray<T>(
-  value: T | T[] | readonly T[]
-): NonNullUndefined<T>[];
+export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
+export function ensureArray<T>(value: T | readonly T[]): NonUndefined<T>[];
 export function ensureArray(value) {
-  if (value === undefined || value === null || Array.isArray(value)) {
+  if (value === undefined || Array.isArray(value)) {
     return value;
   }
   return [value];

src/common/auth/token_storage.ts

@@ -66,7 +66,7 @@ export function loadTokens() {
       } else {
         tokenCache.tokens = null;
       }
-    } catch (_err: any) {
+    } catch (err: any) {
       tokenCache.tokens = null;
     }
   }

src/common/color/convert-color.ts

@@ -90,9 +90,9 @@ export const lab2rgb = (
   x = Xn * lab_xyz(x);
   z = Zn * lab_xyz(z);
 
-  const r = Math.round(xyz_rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z)); // D65 -> sRGB
-  const g = Math.round(xyz_rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z));
-  const b_ = Math.round(xyz_rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z));
+  const r = xyz_rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); // D65 -> sRGB
+  const g = xyz_rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z);
+  const b_ = xyz_rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
 
   return [r, g, b_];
 };

src/common/color/convert-light-color.ts

@@ -8,9 +8,9 @@ export const temperature2rgb = (
 ): [number, number, number] => {
   const value = temperature / 100;
   return [
-    Math.round(temperatureRed(value)),
-    Math.round(temperatureGreen(value)),
-    Math.round(temperatureBlue(value)),
+    temperatureRed(value),
+    temperatureGreen(value),
+    temperatureBlue(value),
   ];
 };
 
@@ -59,10 +59,10 @@ const matchMaxScale = (
 };
 
 export const mired2kelvin = (miredTemperature: number) =>
-  miredTemperature === 0 ? 1000000 : Math.floor(1000000 / miredTemperature);
+  Math.floor(1000000 / miredTemperature);
 
-export const kelvin2mired = (kelvinTemperature: number) =>
-  kelvinTemperature === 0 ? 1000000 : Math.floor(1000000 / kelvinTemperature);
+export const kelvin2mired = (kelvintTemperature: number) =>
+  Math.floor(1000000 / kelvintTemperature);
 
 export const rgbww2rgb = (
   rgbww: [number, number, number, number, number],

src/common/color/hex.ts

@@ -14,8 +14,8 @@ export const hexBlend = (c1: string, c2: string, blend = 50): string => {
   c1 = expandHex(c1);
   c2 = expandHex(c2);
   for (let i = 0; i <= 5; i += 2) {
-    const h1 = parseInt(c1.substring(i, i + 2), 16);
-    const h2 = parseInt(c2.substring(i, i + 2), 16);
+    const h1 = parseInt(c1.substr(i, 2), 16);
+    const h2 = parseInt(c2.substr(i, 2), 16);
     let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
     while (hex.length < 2) hex = "0" + hex;
     color += hex;