Improve new section button

Fix custom retention label (#24304 )
Fix hassio backup restore url (#24313 )
2026-05-26 19:17:03 +00:00 · 2025-02-19 12:50:30 +01:00 · 2025-02-19 10:32:41 +01:00 · 2025-02-19 10:32:15 +01:00 · 2025-02-19 10:30:24 +01:00 · 2025-02-18 17:30:36 +00:00
879 changed files with 30134 additions and 22225 deletions
@@ -1,5 +1,4 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/devcontainers/python:3.12
+FROM mcr.microsoft.com/devcontainers/python:1-3.13

 ENV \
  DEBIAN_FRONTEND=noninteractive \
@@ -5,12 +5,15 @@
    "context": ".."
  },
  "appPort": "8124:8123",
-  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
+  "postCreateCommand": "./.devcontainer/post_create.sh",
  "postStartCommand": "script/bootstrap",
  "containerEnv": {
    "DEV_CONTAINER": "1",
    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
  },
+  "remoteEnv": {
+    "NODE_OPTIONS": "--max_old_space_size=8192"
+  },
  "customizations": {
    "vscode": {
      "extensions": [
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# This script will run after the container is created
+
+# add github cli
+(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
+	&& sudo mkdir -p -m 755 /etc/apt/keyrings \
+        && out=$(mktemp) && wget -nv -O$out https://cli.github.com/packages/githubcli-archive-keyring.gpg \
+        && cat $out | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
+	&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
+	&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+
+# Update package lists
+sudo apt-get update
+
+sudo apt upgrade -y
+
+# Install necessary packages
+sudo apt-get install -y libpcap-dev gh
+
+# Display a message
+echo "Post-create script has been executed successfully."
@@ -74,7 +74,7 @@ body:
        If known, otherwise leave blank.
  - type: input
    attributes:
-      label: In which browser are you experiencing the issue with?
+      label: In which browser are you experiencing the issue?
      placeholder: Google Chrome 88.0.4324.150
      description: >
        Provide the full name and don't forget to add the version!
@@ -26,7 +26,7 @@ jobs:
          ref: dev

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

      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -89,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.5.0
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -113,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.5.0
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -27,7 +27,7 @@ jobs:
          ref: dev

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

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

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

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

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

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

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

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

      - name: Upload translations
-        uses: actions/upload-artifact@v4.5.0
+        uses: actions/upload-artifact@v4.6.0
        with:
          name: translations
          path: translations.tar.gz
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v6.0.0
+      - uses: release-drafter/release-drafter@v6.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -6,7 +6,7 @@ on:
      - published

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

 # Set default workflow permissions
@@ -34,7 +34,7 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

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

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

@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v4.2.2
      - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.2.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -136,6 +136,6 @@ jobs:
      - name: Tar folder
        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
      - name: Upload release asset
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.2.1
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v9.0.0
+        uses: actions/stale@v9.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -1,6 +1,42 @@
 {
  "version": "2.0.0",
  "tasks": [
+    {
+      "label": "Develop and serve Frontend",
+      "type": "shell",
+      "command": "script/develop_and_serve -c ${input:coreUrl}",
+      // Sync changes here to other tasks until issue resolved
+      // https://github.com/Microsoft/vscode/issues/61497
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
    {
      "label": "Develop Frontend",
      "type": "gulp",
@@ -241,6 +277,12 @@
      "id": "supervisorToken",
      "type": "promptString",
      "description": "The token for the Remote API proxy add-on"
+    },
+    {
+      "id": "coreUrl",
+      "type": "promptString",
+      "description": "The URL of the Home Assistant Core instance",
+      "default": "http://127.0.0.1:8123"
    }
  ]
 }
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.5.3.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
@@ -1,16 +1,16 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default [
-  ...rootConfig,
-  {
-    rules: {
-      "no-console": "off",
-      "import/no-extraneous-dependencies": "off",
-      "import/extensions": "off",
-      "import/no-dynamic-require": "off",
-      "global-require": "off",
-      "@typescript-eslint/no-var-requires": "off",
-      "prefer-arrow-callback": "off",
-    },
+export default tseslint.config(...rootConfig, {
+  rules: {
+    "no-console": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
+    "global-require": "off",
+    "@typescript-eslint/no-require-imports": "off",
+    "prefer-arrow-callback": "off",
  },
-];
+});
@@ -90,6 +90,14 @@ function copyMapPanel(staticDir) {
    npmPath("leaflet/dist/leaflet.css"),
    staticPath("images/leaflet/")
  );
+  copyFileDir(
+    npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
+    staticPath("images/leaflet/")
+  );
+  copyFileDir(
+    npmPath("leaflet.markercluster/dist/MarkerCluster.Default.css"),
+    staticPath("images/leaflet/")
+  );
  fs.copySync(
    npmPath("leaflet/dist/images"),
    staticPath("images/leaflet/images/")
@@ -0,0 +1,17 @@
+import "./app.js";
+import "./cast.js";
+import "./clean.js";
+import "./compress.js";
+import "./demo.js";
+import "./download-translations.js";
+import "./entry-html.js";
+import "./fetch-nightly-translations.js";
+import "./gallery.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./hassio.js";
+import "./landing-page.js";
+import "./locale-data.js";
+import "./rspack.js";
+import "./service-worker.js";
+import "./translations.js";
@@ -7,7 +7,6 @@
  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
  <style>
    body {
-      background-color: white;
      font-size: initial;
    }
  </style>
@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -203,74 +203,72 @@ class HcCast extends LitElement {
      }
      this.connection.close();
      location.reload();
-    } catch (err: any) {
+    } catch (_err: any) {
      alert("Unable to log out!");
    }
  }

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

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

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

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

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

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

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

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

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

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

 declare global {
@@ -13,7 +13,7 @@ import {
  ERR_INVALID_HTTPS_TO_HTTP,
  getAuth,
 } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -215,7 +215,7 @@ export class HcConnect extends LitElement {
    let url: URL;
    try {
      url = new URL(value);
-    } catch (err: any) {
+    } catch (_err: any) {
      this.error = "Invalid URL";
      return;
    }
@@ -288,41 +288,39 @@ export class HcConnect extends LitElement {
    try {
      saveTokens(null);
      location.reload();
-    } catch (err: any) {
+    } catch (_err: any) {
      alert("Unable to log out!");
    }
  }

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

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

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

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

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

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

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

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

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

 declare global {
@@ -1,10 +1,4 @@
-import {
-  css,
-  type CSSResultGroup,
-  html,
-  LitElement,
-  type TemplateResult,
-} from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -59,7 +53,8 @@ class HcLovelace extends LitElement {

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

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

 export interface CastViewChanged {
@@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
 import type { DemoConfig } from "./types";

-export const demoConfigs: Array<() => Promise<DemoConfig>> = [
+export const demoConfigs: (() => Promise<DemoConfig>)[] = [
  () => import("./sections").then((mod) => mod.demoSections),
  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
@@ -1,5 +1,4 @@
 import { mdiTelevision } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -67,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow {
    this.style.display = this._castManager ? "" : "none";
  }

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

 declare global {
@@ -32,6 +32,7 @@ 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() {
@@ -65,6 +65,7 @@ export class HaDemo extends HomeAssistantAppEl {
    mockEntityRegistry(hass, [
      {
        config_entry_id: "co2signal",
+        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -85,6 +86,7 @@ export class HaDemo extends HomeAssistantAppEl {
      },
      {
        config_entry_id: "co2signal",
+        config_subentry_id: null,
        device_id: "co2signal",
        area_id: null,
        disabled_by: null,
@@ -11,6 +11,7 @@ export const mockConfigEntries = (hass: MockHomeAssistant) => {
    supports_remove_device: false,
    supports_unload: true,
    supports_reconfigure: true,
+    supported_subentry_types: {},
    pref_disable_new_entities: false,
    pref_disable_polling: false,
    disabled_by: null,
@@ -131,6 +131,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
        });
      }, 1);

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

 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -15,16 +20,14 @@ const compat = new FlatCompat({
  allConfig: js.configs.all,
 });

-export default [
-  ...compat.extends(
-    "airbnb-base",
-    "airbnb-typescript/base",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:wc/recommended",
-    "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
-    "prettier"
-  ),
+export default tseslint.config(
+  ...compat.extends("airbnb-base", "plugin:lit-a11y/recommended"),
+  eslintConfigPrettier,
+  litConfigs["flat/all"],
+  tseslint.configs.recommended,
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  wcConfigs["flat/recommended"],
  {
    plugins: {
      "unused-imports": unusedImports,
@@ -42,7 +45,7 @@ export default [
        Polymer: true,
      },

-      parser: tsParser,
+      parser: tseslint.parser,
      ecmaVersion: 2020,
      sourceType: "module",

@@ -50,8 +53,6 @@ export default [
        ecmaFeatures: {
          modules: true,
        },
-
-        project: "./tsconfig.json",
      },
    },

@@ -148,15 +149,15 @@ export default [
        },
      ],

-      "@typescript-eslint/no-unused-vars": "off",
-
-      "unused-imports/no-unused-vars": [
+      "@typescript-eslint/no-unused-vars": [
        "error",
        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
+          args: "all",
          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
          ignoreRestSiblings: true,
        },
      ],
@@ -174,6 +175,16 @@ 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",
    },
-  },
-];
+  }
+);
@@ -1,10 +1,10 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";

-export default [
-  ...rootConfig,
-  {
-    rules: {
-      "no-console": "off",
-    },
+export default tseslint.config(...rootConfig, {
+  rules: {
+    "no-console": "off",
  },
-];
+});
@@ -177,26 +177,24 @@ export class DemoAutomationDescribeAction extends LitElement {
    this._action = ev.detail.isValid ? ev.detail.value : undefined;
  }

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

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

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

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

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

 declare global {
@@ -58,22 +58,20 @@ export class DemoAutomationTraceTimeline extends LitElement {
    hass.updateTranslations("config", "en");
  }

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

 declare global {
@@ -68,28 +68,26 @@ export class DemoAutomationTrace extends LitElement {
    this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
  }

-  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;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px;
+    }
+    .card-content {
+      display: flex;
+    }
+    .card-content > * {
+      margin-right: 16px;
+    }
+    .card-content > *:last-child {
+      margin-right: 0;
+    }
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  `;
 }

 declare global {
@@ -177,46 +177,44 @@ export class DemoHaAlert extends LitElement {
    );
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 declare global {
@@ -48,6 +48,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -71,6 +72,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -94,6 +96,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -124,6 +127,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -135,6 +140,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -146,6 +153,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -91,27 +91,25 @@ export class DemoHaHsColorPicker extends LitElement {
    `;
  }

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

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

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

 declare global {
@@ -47,6 +47,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "bedroom",
    configuration_url: null,
    config_entries: ["config_entry_1"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -70,6 +71,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: "backyard",
    configuration_url: null,
    config_entries: ["config_entry_2"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -93,6 +95,7 @@ const DEVICES: DeviceRegistryEntry[] = [
    area_id: null,
    configuration_url: null,
    config_entries: ["config_entry_3"],
+    config_entries_subentries: {},
    connections: [],
    disabled_by: null,
    entry_type: null,
@@ -123,6 +126,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -134,6 +139,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -145,6 +152,8 @@ const AREAS: AreaRegistryEntry[] = [
    picture: null,
    aliases: [],
    labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
    created_at: 0,
    modified_at: 0,
  },
@@ -48,27 +48,25 @@ export class DemoHaTip extends LitElement {
    );
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 declare global {
@@ -321,13 +321,13 @@ function createEntity(
  };
 }

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

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

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

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

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

 declare global {
@@ -32,6 +32,8 @@ const createConfigEntry = (
  supports_remove_device: false,
  supports_unload: true,
  supports_reconfigure: true,
+  supported_subentry_types: {},
+  num_subentries: 0,
  disabled_by: null,
  pref_disable_new_entities: false,
  pref_disable_polling: false,
@@ -135,12 +137,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
  },
 ];

-const configEntries: Array<{
+const configEntries: {
  items: ConfigEntryExtended[];
  is_custom?: boolean;
  disabled?: boolean;
  highlight?: string;
-}> = [
+}[] = [
  { items: [loadedEntry] },
  { items: [configPanelEntry] },
  { items: [optionsFlowEntry] },
@@ -188,6 +190,7 @@ const createEntityRegistryEntries = (
 ): EntityRegistryEntry[] => [
  {
    config_entry_id: item.entry_id,
+    config_subentry_id: null,
    device_id: "mock-device-id",
    area_id: null,
    disabled_by: null,
@@ -214,6 +217,7 @@ const createDeviceRegistryEntries = (
  {
    entry_type: null,
    config_entries: [item.entry_id],
+    config_entries_subentries: {},
    connections: [],
    manufacturer: "ESPHome",
    model: "Mock Device",
@@ -349,26 +353,24 @@ export class DemoIntegrationCard extends LitElement {
    this.isCloud = !this.isCloud;
  }

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

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

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

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

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

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

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

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

  private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -64,86 +64,84 @@ class HassioCardContent extends LitElement {
    `;
  }

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

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

 declare global {
@@ -1,8 +1,6 @@
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
-import { stripDiacritics } from "../../../src/common/string/strip-diacritics";
 import type { StoreAddon } from "../../../src/data/supervisor/store";
-import { getStripDiacriticsFn } from "../../../src/util/fuse";

 export function filterAndSort(addons: StoreAddon[], filter: string) {
  const options: IFuseOptions<StoreAddon> = {
@@ -10,8 +8,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
    isCaseSensitive: false,
    minMatchCharLength: Math.min(filter.length, 2),
    threshold: 0.2,
-    getFn: getStripDiacriticsFn,
+    ignoreDiacritics: true,
  };
  const fuse = new Fuse(addons, options);
-  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
+  return fuse.search(filter).map((result) => result.item);
 }
@@ -14,8 +14,8 @@ import type { LocalizeFunc } from "../../../src/common/translations/localize";

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

@@ -70,7 +70,7 @@ export class HassioUploadBackup extends LitElement {
    this._uploading = true;
    try {
      const backup = await uploadBackup(this.hass, file);
-      fireEvent(this, "backup-uploaded", { backup: backup.data });
+      fireEvent(this, "hassio-backup-uploaded", { backup: backup.data });
    } catch (err: any) {
      showAlertDialog(this, {
        title: "Upload failed",
@@ -1,11 +1,10 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
-import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import "../../../src/components/ha-checkbox";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-textfield";
@@ -19,13 +18,10 @@ import type {
 } from "../../../src/data/hassio/backup";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
-import type { HomeAssistant, TranslationDict } from "../../../src/types";
+import type { HomeAssistant } from "../../../src/types";
 import "./supervisor-formfield-label";
 import type { HaTextField } from "../../../src/components/ha-textfield";

-type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
-
 interface CheckboxItem {
  slug: string;
  checked: boolean;
@@ -67,8 +63,6 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
 export class SupervisorBackupContent extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

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

  @property({ attribute: false }) public backup?: HassioBackupDetail;
@@ -115,10 +109,6 @@ export class SupervisorBackupContent extends LitElement {
    this._focusTarget?.focus();
  }

-  private _localize = (key: BackupOrRestoreKey) =>
-    this.supervisor?.localize(`backup.${key}`) ||
-    this.localize!(`ui.panel.page-onboarding.restore.${key}`);
-
  protected render() {
    if (!this.onboarding && !this.supervisor) {
      return nothing;
@@ -132,8 +122,8 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backup
        ? html`<div class="details">
            ${this.backup.type === "full"
-              ? this._localize("full_backup")
-              : this._localize("partial_backup")}
+              ? this.supervisor?.localize("backup.full_backup")
+              : this.supervisor?.localize("backup.partial_backup")}
            (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
            ${this.hass
              ? formatDateTime(
@@ -145,7 +135,7 @@ export class SupervisorBackupContent extends LitElement {
          </div>`
        : html`<ha-textfield
            name="backupName"
-            .label=${this._localize("name")}
+            .label=${this.supervisor?.localize("backup.name")}
            .value=${this.backupName}
            @change=${this._handleTextValueChanged}
          >
@@ -153,11 +143,13 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup || this.backup.type === "full"
        ? html`<div class="sub-header">
              ${!this.backup
-                ? this._localize("type")
-                : this._localize("select_type")}
+                ? this.supervisor?.localize("backup.type")
+                : this.supervisor?.localize("backup.select_type")}
            </div>
            <div class="backup-types">
-              <ha-formfield .label=${this._localize("full_backup")}>
+              <ha-formfield
+                .label=${this.supervisor?.localize("backup.full_backup")}
+              >
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="full"
@@ -166,7 +158,9 @@ export class SupervisorBackupContent extends LitElement {
                >
                </ha-radio>
              </ha-formfield>
-              <ha-formfield .label=${this._localize("partial_backup")}>
+              <ha-formfield
+                .label=${this.supervisor?.localize("backup.partial_backup")}
+              >
                <ha-radio
                  @change=${this._handleRadioValueChanged}
                  value="partial"
@@ -202,7 +196,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this._localize("folders")}
+                      .label=${this.supervisor?.localize("backup.folders")}
                      .iconPath=${mdiFolder}
                    >
                    </supervisor-formfield-label>`}
@@ -222,7 +216,7 @@ export class SupervisorBackupContent extends LitElement {
              ? html`
                  <ha-formfield
                    .label=${html`<supervisor-formfield-label
-                      .label=${this._localize("addons")}
+                      .label=${this.supervisor?.localize("backup.addons")}
                      .iconPath=${mdiPuzzle}
                    >
                    </supervisor-formfield-label>`}
@@ -247,7 +241,7 @@ export class SupervisorBackupContent extends LitElement {
      ${!this.backup
        ? html`<ha-formfield
            class="password"
-            .label=${this._localize("password_protection")}
+            .label=${this.supervisor?.localize("backup.password_protection")}
          >
            <ha-checkbox
              .checked=${this.backupHasPassword}
@@ -259,7 +253,7 @@ export class SupervisorBackupContent extends LitElement {
      ${this.backupHasPassword
        ? html`
            <ha-password-field
-              .label=${this._localize("password")}
+              .label=${this.supervisor?.localize("backup.password")}
              name="backupPassword"
              .value=${this.backupPassword}
              @change=${this._handleTextValueChanged}
@@ -267,7 +261,7 @@ export class SupervisorBackupContent extends LitElement {
            </ha-password-field>
            ${!this.backup
              ? html`<ha-password-field
-                  .label=${this._localize("confirm_password")}
+                  .label=${this.supervisor?.localize("backup.confirm_password")}
                  name="confirmBackupPassword"
                  .value=${this.confirmBackupPassword}
                  @change=${this._handleTextValueChanged}
@@ -283,52 +277,50 @@ export class SupervisorBackupContent extends LitElement {
    this.homeAssistant = !this.homeAssistant;
  }

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

  public backupDetails():
    | HassioPartialBackupCreateParams
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-svg-icon";
@@ -30,29 +30,27 @@ class SupervisorFormfieldLabel extends LitElement {
    `;
  }

-  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;
-      }
-    `;
-  }
+  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;
+    }
+  `;
 }

 declare global {
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,46 +31,41 @@ class SupervisorMetric extends LitElement {
    </ha-settings-row>`;
  }

-  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;
-      }
-    `;
-  }
+  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;
+    }
+  `;
 }

 declare global {
@@ -28,7 +28,7 @@ export class DialogHassioBackupUpload
    await this.updateComplete;
  }

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

  protected render() {
@@ -71,7 +72,7 @@ export class DialogHassioBackupUpload
          </ha-header-bar>
        </div>
        <hassio-upload-backup
-          @backup-uploaded=${this._backupUploaded}
+          @hassio-backup-uploaded=${this._backupUploaded}
          .hass=${this.hass}
        ></hassio-upload-backup>
      </ha-dialog>
@@ -35,7 +35,6 @@ import { fileDownload } from "../../../../src/util/file_download";
 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")
@@ -43,7 +42,7 @@ class HassioBackupDialog
  extends LitElement
  implements HassDialog<HassioBackupDialogParams>
 {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _error?: string;

@@ -62,9 +61,13 @@ class HassioBackupDialog
    this._dialogParams = dialogParams;
    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
    if (!this._backup) {
-      this._error = this._localize("no_backup_found");
+      this._error = this._dialogParams.supervisor?.localize(
+        "backup.no_backup_found"
+      );
    } else if (this._dialogParams.onboarding && !this._backup.homeassistant) {
-      this._error = this._localize("restore_no_home_assistant");
+      this._error = this._dialogParams.supervisor?.localize(
+        "backup.restore_no_home_assistant"
+      );
    }
    this._restoringBackup = false;
  }
@@ -77,15 +80,9 @@ class HassioBackupDialog
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

-  public closeDialog(): void {
+  public closeDialog() {
    this._dialog?.close();
-  }
-
-  private _localize(key: BackupOrRestoreKey) {
-    return (
-      this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
-      this._dialogParams!.localize!(`ui.panel.page-onboarding.restore.${key}`)
-    );
+    return true;
  }

  protected render() {
@@ -101,7 +98,7 @@ class HassioBackupDialog
        <ha-dialog-header slot="headline">
          <ha-icon-button
            slot="navigationIcon"
-            .label=${this._localize("close")}
+            .label=${this._dialogParams.supervisor?.localize("backup.close")}
            .path=${mdiClose}
            @click=${this.closeDialog}
            .disabled=${this._restoringBackup}
@@ -149,7 +146,6 @@ class HassioBackupDialog
                    .supervisor=${this._dialogParams.supervisor}
                    .backup=${this._backup}
                    .onboarding=${this._dialogParams.onboarding || false}
-                    .localize=${this._dialogParams.localize}
                    dialogInitialFocus
                  >
                  </supervisor-backup-content>
@@ -160,7 +156,7 @@ class HassioBackupDialog
            .disabled=${this._restoringBackup || !!this._error}
            @click=${this._restoreClicked}
          >
-            ${this._localize("restore")}
+            ${this._dialogParams.supervisor?.localize("backup.restore")}
          </ha-button>
        </div>
      </ha-md-dialog>
@@ -195,18 +191,22 @@ class HassioBackupDialog
    }
    if (
      !(await showConfirmationDialog(this, {
-        title: this._localize(
-          this._backup!.type === "full"
-            ? "confirm_restore_full_backup_title"
-            : "confirm_restore_partial_backup_title"
+        title: supervisor?.localize(
+          `backup.${
+            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"
+        text: supervisor?.localize(
+          `backup.${
+            this._backup!.type === "full"
+              ? "confirm_restore_full_backup_text"
+              : "confirm_restore_partial_backup_text"
+          }`
        ),
-        confirmText: this._localize("restore"),
-        dismissText: this._localize("cancel"),
+        confirmText: supervisor?.localize("backup.restore"),
+        dismissText: supervisor?.localize("backup.cancel"),
      }))
    ) {
      this._restoringBackup = false;
@@ -226,7 +226,8 @@ class HassioBackupDialog
      this.closeDialog();
    } catch (error: any) {
      this._error =
-        error?.body?.message || this._localize("restore_start_failed");
+        error?.body?.message ||
+        supervisor?.localize("backup.restore_start_failed");
    } finally {
      this._restoringBackup = false;
    }
@@ -285,7 +286,7 @@ class HassioBackupDialog
        title: supervisor.localize("backup.remote_download_title"),
        text: supervisor.localize("backup.remote_download_text"),
        confirmText: supervisor.localize("backup.download"),
-        dismissText: this._localize("cancel"),
+        dismissText: supervisor?.localize("backup.cancel"),
      });
      if (!confirm) {
        return;
@@ -301,7 +302,7 @@ class HassioBackupDialog
  private get _computeName() {
    return this._backup
      ? this._backup.name || this._backup.slug
-      : this._localize("unnamed_backup");
+      : this._dialogParams!.supervisor?.localize("backup.unnamed_backup") || "";
  }

  static get styles(): CSSResultGroup {
@@ -1,5 +1,4 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { LocalizeFunc } from "../../../../src/common/translations/localize";
 import type { Supervisor } from "../../../../src/data/supervisor/supervisor";

 export interface HassioBackupDialogParams {
@@ -8,7 +7,6 @@ export interface HassioBackupDialogParams {
  onRestoring?: () => void;
  onboarding?: boolean;
  supervisor?: Supervisor;
-  localize?: LocalizeFunc;
 }

 export const showHassioBackupDialog = (
@@ -82,10 +82,11 @@ export class DialogHassioNetwork
    await this.updateComplete;
  }

-  public closeDialog(): void {
+  public closeDialog() {
    this._params = undefined;
    this._processing = false;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
  }

  protected render() {
@@ -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;
    }
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -39,15 +39,13 @@ class HassioPanel extends LitElement {
    `;
  }

-  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);
-      }
-    `;
-  }
+  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);
+    }
+  `;
 }

 declare global {
@@ -1,5 +1,5 @@
 import { mdiMenu } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import type { 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 (e) {
+        } catch (_err) {
          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,51 +325,49 @@ class HassioIngressView extends LitElement {
    fireEvent(this, "hass-toggle-menu");
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      iframe {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border: 0;
-      }
+  static styles = 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 {
@@ -33,7 +33,7 @@ class HassioCoreInfo extends LitElement {

  @state() private _metrics?: HassioStats;

-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult | undefined {
    const metrics = [
      {
        description: this.supervisor.localize("system.core.cpu_usage"),
@@ -49,7 +49,7 @@ class HassioHostInfo extends LitElement {

  @property({ attribute: false }) public supervisor!: Supervisor;

-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult | undefined {
    const primaryIpAddress = this.supervisor.host.features.includes("network")
      ? this._primaryIpAddress(this.supervisor.network!)
      : "";
@@ -44,7 +44,7 @@ class HassioSupervisorInfo extends LitElement {

  @state() private _metrics?: HassioStats;

-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult | undefined {
    const metrics = [
      {
        description: this.supervisor.localize("system.supervisor.cpu_usage"),
@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
    await this._loadData();
  }

-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult | undefined {
    return html`
      <ha-card outlined>
        ${this._error
@@ -23,7 +23,7 @@ class HassioSystem extends LitElement {

  @property({ attribute: false }) public route!: Route;

-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult | undefined {
    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
@@ -9,6 +9,7 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
@@ -18,7 +19,11 @@ 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-md-list";
+import "../../../src/components/ha-md-list-item";
 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,
@@ -121,6 +126,8 @@ class UpdateAvailableCard extends LitElement {

    const changelog = changelogUrl(this._updateType, this._version_latest);

+    const createBackupTexts = this._computeCreateBackupTexts();
+
    return html`
      <ha-card
        outlined
@@ -160,6 +167,30 @@ class UpdateAvailableCard extends LitElement {
                      )}
                    </p>
                  </div>
+                  ${createBackupTexts
+                    ? html`
+                        <hr />
+                        <ha-md-list>
+                          <ha-md-list-item>
+                            <span slot="headline">
+                              ${createBackupTexts.title}
+                            </span>
+
+                            ${createBackupTexts.description
+                              ? html`
+                                  <span slot="supporting-text">
+                                    ${createBackupTexts.description}
+                                  </span>
+                                `
+                              : nothing}
+                            <ha-switch
+                              slot="end"
+                              id="create-backup"
+                            ></ha-switch>
+                          </ha-md-list-item>
+                        </ha-md-list>
+                      `
+                    : nothing}
                `
              : html`<ha-circular-progress
                    aria-label="Updating"
@@ -227,6 +258,48 @@ class UpdateAvailableCard extends LitElement {
    }
  }

+  private _computeCreateBackupTexts():
+    | { title: string; description?: string }
+    | undefined {
+    // Addon backup
+    if (
+      this._updateType === "addon" &&
+      atLeastVersion(this.hass.config.version, 2025, 2, 0)
+    ) {
+      const version = this._version;
+      return {
+        title: this.supervisor.localize("update_available.create_backup.addon"),
+        description: this.supervisor.localize(
+          "update_available.create_backup.addon_description",
+          { version: version }
+        ),
+      };
+    }
+
+    // Old behavior
+    if (this._updateType && ["core", "addon"].includes(this._updateType)) {
+      return {
+        title: this.supervisor.localize(
+          "update_available.create_backup.generic"
+        ),
+      };
+    }
+    return undefined;
+  }
+
+  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 +414,22 @@ 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") {
@@ -403,6 +484,17 @@ class UpdateAvailableCard extends LitElement {
          border-bottom: none;
          margin: 16px 0 0 0;
        }
+
+        ha-md-list {
+          padding: 0;
+          margin-bottom: -16px;
+        }
+
+        ha-md-list-item {
+          --md-list-item-leading-space: 0;
+          --md-list-item-trailing-space: 0;
+          --md-item-overflow: visible;
+        }
      `,
    ];
  }
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -38,20 +38,18 @@ class UpdateAvailableDashboard extends LitElement {
    history.back();
  }

-  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;
-      }
-    `;
-  }
+  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;
+    }
+  `;
 }

 declare global {
@@ -1,4 +0,0 @@
-import type { TranslationDict } from "../../../src/types";
-
-export type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@@ -230,7 +230,7 @@ class LandingPageLogs extends LitElement {
          this._startLogStream();
          return;
        }
-      } catch (err) {
+      } catch (_err) {
        // ignore and continue with observer logs
      }
      this._loadObserverLogs();
@@ -126,7 +126,7 @@ class HaLandingPage extends LandingPageBaseElement {
          "selectedLanguage",
          JSON.stringify(language)
        );
-      } catch (err: any) {
+      } catch (_err: any) {
        // Ignore
      }
    }
--- a/Show More
+++ b/Show More