Adjust WebSocket ping timeout to 15 seconds

5 seconds was too low to prevent the UI from reloading
when connecting the WebSocket during startup or on
a high latancy connection

This problem presented as the UI reloading over
and over again because it could never respond
to the ping in time on high latancy connections.

At startup it usually only did this once so it
went unnoticed in most cases.

This ping was added in #18934

.devcontainer/Dockerfile

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

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

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

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

.github/workflows/nightly.yaml

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

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

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

.github/workflows/stale.yml

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

.yarnrc.yml

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

build-scripts/eslint.config.mjs

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

build-scripts/gulp/index.mjs

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

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

@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { 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 {

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

@@ -13,7 +13,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { 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 {

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

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { 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 {

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

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

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

@@ -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";
@@ -117,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 {

demo/src/configs/demo-configs.ts

@@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types";
 import { energyEntities } from "../stubs/entities";
 import type { DemoConfig } from "./types";
 
-export const demoConfigs: 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),

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

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

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

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

demo/src/stubs/history.ts

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

demo/src/stubs/lovelace.ts

@@ -43,7 +43,7 @@ customElements.whenDefined("hui-root").then(() => {
       const index = (ev as CustomEvent).detail.index;
       try {
         await setDemoConfig(this.hass, this.lovelace!, index);
-      } catch (err: any) {
+      } catch (_err: any) {
         setDemoConfig(this.hass, this.lovelace!, selectedDemoConfigIndex);
         alert("Failed to switch config :-(");
       }

demo/src/stubs/persistent_notification.ts

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

demo/src/stubs/recorder.ts

@@ -15,7 +15,7 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 const generateMeanStatistics = (
   start: Date,
   end: Date,
-  // eslint-disable-next-line @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,

demo/src/stubs/template.ts

@@ -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 () => {};
   });
 };

demo/src/stubs/todo.ts

@@ -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) => () => {});
 };

eslint.config.mjs

@@ -18,8 +18,9 @@ const compat = new FlatCompat({
 export default [
   ...compat.extends(
     "airbnb-base",
-    "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
     "plugin:wc/recommended",
     "plugin:lit/all",
     "plugin:lit-a11y/recommended",
@@ -50,8 +51,6 @@ export default [
         ecmaFeatures: {
           modules: true,
         },
-
-        project: "./tsconfig.json",
       },
     },
 
@@ -148,15 +147,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 +173,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",
     },
   },
 ];

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

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

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

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

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

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

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

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

gallery/src/pages/automation/trace.ts

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

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

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

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

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

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

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

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

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

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

@@ -14,12 +14,12 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-control-button-group";
 
-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 {

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

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

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

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

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

@@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 
-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 {

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

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

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

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

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

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

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

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

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

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

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

@@ -124,6 +124,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },
@@ -135,6 +137,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },
@@ -146,6 +150,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },

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

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

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

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

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

@@ -123,6 +123,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },
@@ -134,6 +136,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },
@@ -145,6 +149,8 @@ const AREAS: AreaRegistryEntry[] = [
     picture: null,
     aliases: [],
     labels: [],
+    temperature_entity_id: null,
+    humidity_entity_id: null,
     created_at: 0,
     modified_at: 0,
   },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
   },
 ];
 
-const configEntries: Array<{
+const configEntries: {
   items: ConfigEntryExtended[];
   is_custom?: boolean;
   disabled?: boolean;
   highlight?: string;
-}> = [
+}[] = [
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
@@ -349,26 +349,24 @@ export class DemoIntegrationCard extends LitElement {
     this.isCloud = !this.isCloud;
   }
 
-  static get styles() {
-    return css`
-      .container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        grid-gap: 8px 8px;
-        padding: 8px 16px 16px;
-        margin-bottom: 16px;
-      }
+  static styles = css`
+    .container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      grid-gap: 8px 8px;
+      padding: 8px 16px 16px;
+      margin-bottom: 16px;
+    }
 
-      .container > * {
-        max-width: 500px;
-      }
+    .container > * {
+      max-width: 500px;
+    }
 
-      ha-formfield {
-        margin: 8px 0;
-        display: block;
-      }
-    `;
-  }
+    ha-formfield {
+      margin: 8px 0;
+      display: block;
+    }
+  `;
 }
 
 declare global {

gulpfile.js

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

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

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import type { 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 {

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

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

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

@@ -151,7 +151,7 @@ class HassioAddonNetwork extends LitElement {
 
   private async _configChanged(ev: CustomEvent): Promise<void> {
     this._configHasChanged = true;
-    this._config! = ev.detail.value;
+    this._config = ev.detail.value;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {

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

@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import type { 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 {

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

@@ -15,7 +15,7 @@ import type { LocalizeFunc } from "../../../src/common/translations/localize";
 declare global {
   interface HASSDomEvents {
     "backup-uploaded": { backup: HassioBackup };
-    "backup-cleared": void;
+    "backup-cleared": undefined;
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { mdiFolder, mdiPuzzle } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -283,52 +283,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

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

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

hassio/src/components/supervisor-metric.ts

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

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

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

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

@@ -77,8 +77,9 @@ class HassioBackupDialog
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  public closeDialog(): void {
+  public closeDialog() {
     this._dialog?.close();
+    return true;
   }
 
   private _localize(key: BackupOrRestoreKey) {

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

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

hassio/src/hassio-my-redirect.ts

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

hassio/src/hassio-panel.ts

@@ -1,4 +1,4 @@
-import type { 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 {

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

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

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

@@ -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"),

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

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

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

@@ -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"),

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

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

hassio/src/system/hassio-system.ts

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

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

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

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

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

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

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

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

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

package.json

@@ -26,25 +26,25 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.26.0",
+    "@babel/runtime": "7.26.7",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.4",
-    "@codemirror/commands": "6.7.1",
-    "@codemirror/language": "6.10.7",
+    "@codemirror/commands": "6.8.0",
+    "@codemirror/language": "6.10.8",
     "@codemirror/legacy-modes": "6.4.2",
     "@codemirror/search": "6.5.8",
-    "@codemirror/state": "6.5.0",
-    "@codemirror/view": "6.36.1",
+    "@codemirror/state": "6.5.1",
+    "@codemirror/view": "6.36.2",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.17.1",
-    "@formatjs/intl-displaynames": "6.8.8",
-    "@formatjs/intl-durationformat": "0.7.1",
+    "@formatjs/intl-datetimeformat": "6.17.2",
+    "@formatjs/intl-displaynames": "6.8.9",
+    "@formatjs/intl-durationformat": "0.7.2",
     "@formatjs/intl-getcanonicallocales": "2.5.4",
-    "@formatjs/intl-listformat": "7.7.8",
-    "@formatjs/intl-locale": "4.2.8",
-    "@formatjs/intl-numberformat": "8.15.1",
-    "@formatjs/intl-pluralrules": "5.4.1",
-    "@formatjs/intl-relativetimeformat": "11.4.8",
+    "@formatjs/intl-listformat": "7.7.9",
+    "@formatjs/intl-locale": "4.2.9",
+    "@formatjs/intl-numberformat": "8.15.2",
+    "@formatjs/intl-pluralrules": "5.4.2",
+    "@formatjs/intl-relativetimeformat": "11.4.9",
     "@fullcalendar/core": "6.1.15",
     "@fullcalendar/daygrid": "6.1.15",
     "@fullcalendar/interaction": "6.1.15",
@@ -55,7 +55,7 @@
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.7",
     "@lit-labs/observers": "2.0.4",
-    "@lit-labs/virtualizer": "2.0.14",
+    "@lit-labs/virtualizer": "2.0.15",
     "@lrnwebcomponents/simple-tooltip": "8.0.2",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
@@ -91,44 +91,41 @@
     "@polymer/polymer": "3.5.2",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.6.0",
-    "@vaadin/vaadin-themable-mixin": "24.6.0",
-    "@vibrant/color": "3.2.1-alpha.1",
-    "@vibrant/core": "3.2.1-alpha.1",
-    "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
+    "@vaadin/combo-box": "24.6.2",
+    "@vaadin/vaadin-themable-mixin": "24.6.2",
+    "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "barcode-detector": "2.3.1",
-    "chart.js": "4.4.7",
-    "chartjs-plugin-zoom": "2.2.0",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.39.0",
+    "core-js": "3.40.0",
     "cropperjs": "1.6.2",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
-    "element-internals-polyfill": "1.3.12",
+    "echarts": "5.6.0",
+    "element-internals-polyfill": "1.3.13",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
     "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
     "home-assistant-js-websocket": "9.4.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.7.10",
+    "intl-messageformat": "10.7.14",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "lit": "2.8.0",
     "lit-html": "2.8.0",
     "luxon": "3.5.0",
-    "marked": "15.0.4",
+    "marked": "15.0.6",
     "memoize-one": "6.0.0",
-    "node-vibrant": "3.2.1-alpha.1",
+    "node-vibrant": "4.0.3",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.4",
@@ -140,7 +137,7 @@
     "tinykeys": "3.0.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "1.0.40",
+    "ua-parser-js": "2.0.0",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
     "vue": "2.7.16",
@@ -155,20 +152,20 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.26.0",
+    "@babel/core": "7.26.7",
     "@babel/helper-define-polyfill-provider": "0.6.3",
     "@babel/plugin-proposal-decorators": "7.25.9",
     "@babel/plugin-transform-runtime": "7.25.9",
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.7",
     "@babel/preset-typescript": "7.26.0",
-    "@bundle-stats/plugin-webpack-filter": "4.17.0",
+    "@bundle-stats/plugin-webpack-filter": "4.18.2",
     "@lokalise/node-api": "13.0.0",
-    "@octokit/auth-oauth-device": "7.1.1",
-    "@octokit/plugin-retry": "7.1.2",
-    "@octokit/rest": "21.0.2",
-    "@rsdoctor/rspack-plugin": "0.4.12",
-    "@rspack/cli": "1.1.8",
-    "@rspack/core": "1.1.8",
+    "@octokit/auth-oauth-device": "7.1.2",
+    "@octokit/plugin-retry": "7.1.3",
+    "@octokit/rest": "21.1.0",
+    "@rsdoctor/rspack-plugin": "0.4.13",
+    "@rspack/cli": "1.2.2",
+    "@rspack/core": "1.2.2",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.20",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -176,7 +173,7 @@
     "@types/glob": "8.1.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.15",
+    "@types/leaflet": "1.9.16",
     "@types/leaflet-draw": "1.0.11",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.4.2",
@@ -186,17 +183,16 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "@vitest/coverage-v8": "2.1.8",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/parser": "8.21.0",
+    "@vitest/coverage-v8": "3.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.17.0",
+    "eslint": "9.19.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-airbnb-typescript": "18.0.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "10.0.1",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-lit": "1.15.0",
@@ -204,17 +200,17 @@
     "eslint-plugin-unused-imports": "4.1.4",
     "eslint-plugin-wc": "2.2.0",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.2.0",
-    "glob": "11.0.0",
+    "fs-extra": "11.3.0",
+    "glob": "11.0.1",
     "gulp": "5.0.0",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "25.0.1",
+    "jsdom": "26.0.0",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.11",
+    "lint-staged": "15.4.3",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -222,13 +218,13 @@
     "object-hash": "3.0.0",
     "pinst": "3.0.0",
     "prettier": "3.4.2",
-    "rspack-manifest-plugin": "5.0.2",
+    "rspack-manifest-plugin": "5.0.3",
     "sinon": "19.0.2",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.11",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8",
+    "typescript": "5.7.3",
+    "vitest": "3.0.4",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -242,7 +238,8 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "1.6.3",
     "@fullcalendar/daygrid": "6.1.15",
-    "globals": "15.14.0"
+    "globals": "15.14.0",
+    "tslib": "2.8.1"
   },
-  "packageManager": "yarn@4.5.3"
+  "packageManager": "yarn@4.6.0"
 }

pyproject.toml

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

rspack.config.cjs

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

src/auth/ha-authorize.ts

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

src/cast/cast_manager.ts

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

src/common/array/ensure-array.ts

@@ -10,8 +10,9 @@ type NonNullUndefined<T> = T extends undefined
  */
 export function ensureArray(value: undefined): undefined;
 export function ensureArray(value: null): null;
-export function ensureArray<T>(value: T | T[]): NonNullUndefined<T>[];
-export function ensureArray<T>(value: T | readonly T[]): NonNullUndefined<T>[];
+export function ensureArray<T>(
+  value: T | T[] | readonly T[]
+): NonNullUndefined<T>[];
 export function ensureArray(value) {
   if (value === undefined || value === null || Array.isArray(value)) {
     return value;

src/common/auth/token_storage.ts

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

src/common/config/components_with_service.ts

@@ -4,6 +4,6 @@ import type { HomeAssistant } from "../../types";
 export const componentsWithService = (
   hass: HomeAssistant,
   service: string
-): Array<string> =>
+): string[] =>
   hass &&
   Object.keys(hass.services).filter((key) => service in hass.services[key]);

src/common/datetime/create_duration_data.ts

@@ -22,7 +22,9 @@ export const createDurationData = (
         hours: Number(parts[0]) || 0,
         minutes: Number(parts[1]) || 0,
         seconds: seconds_whole,
-        milliseconds: Math.floor((seconds - seconds_whole) * 1000),
+        milliseconds: Math.floor(
+          Number((seconds - seconds_whole).toFixed(4)) * 1000
+        ),
       };
     }
     return { seconds: duration };

src/common/datetime/format_date_time.ts

@@ -65,6 +65,18 @@ const formatShortDateTimeMem = memoizeOne(
     })
 );
 
+export const formatShortDateTimeWithConditionalYear = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => {
+  const now = new Date();
+  if (now.getFullYear() === dateObj.getFullYear()) {
+    return formatShortDateTime(dateObj, locale, config);
+  }
+  return formatShortDateTimeWithYear(dateObj, locale, config);
+};
+
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
   dateObj: Date,

src/common/decorators/storage.ts

@@ -31,11 +31,9 @@ class StorageClass {
 
   public storage: globalThis.Storage;
 
-  private _storage: { [storageKey: string]: any } = {};
+  private _storage: Record<string, any> = {};
 
-  private _listeners: {
-    [storageKey: string]: Callback[];
-  } = {};
+  private _listeners: Record<string, Callback[]> = {};
 
   public addFromStorage(storageKey: any): void {
     if (!this._storage[storageKey]) {
@@ -87,7 +85,7 @@ class StorageClass {
       } else {
         this.storage.setItem(storageKey, JSON.stringify(value));
       }
-    } catch (err: any) {
+    } catch (_err: any) {
       // Safari in private mode doesn't allow localstorage
     } finally {
       if (this._listeners[storageKey]) {