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

.browserslistrc

@@ -4,13 +4,12 @@
 # - released in the last year + current alpha/beta versions
 # - Firefox extended support release (ESR)
 # - with global utilization at or above 0.5%
-# - must support dynamic import of ES modules
-# - exclude browsers no longer being maintained
+# - exclude dead browsers (no security maintenance for 2+ years)
 # - exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
 unreleased versions
 last 1 year
 Firefox ESR
->= 0.5% and supports es6-module-dynamic-import
+>= 0.5%
 not dead
 not KaiOS > 0
 not QQAndroid > 0
@@ -20,23 +19,18 @@ not UCAndroid > 0
 # Legacy builds are served when modern requirements are not met and support browsers:
 # - released in the last 7 years + current alpha/beta versionss
 # - with global utilization at or above 0.05%
-# The lattermost query ensures that support for popular old browsers is not dropped too early
-# (e.g. IE 11, Android 4.4, or Samsung 4).
-#
-# In addition, legacy browsers must support some minimum features that cannot be polyfilled:
-# - ES5 (strict mode)
-# - web sockets to communicate with backend
-# - inline SVG used widely in buttons, widgets, etc.
-# - custom events used for most user interactions
-# - CSS flexbox used in the majority of the layout
-# Nearly all of these are redundant with the above rules.
-# As of May 2023, only web sockets must be added to the query.
+# - exclude dead browsers (no security maintenance for 2+ years)
+# - exclude Opera Mini which does not support web sockets
 unreleased versions
 last 7 years
->= 0.05% and supports websockets
+>= 0.05%
+not dead
+not op_mini all
 
 [legacy-sw]
 # Same as legacy plus supports service workers
 unreleased versions
 last 7 years
->= 0.05% and supports websockets and supports serviceworkers
+>= 0.05% and supports serviceworkers
+not dead
+not op_mini all

.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

@@ -7,7 +7,7 @@ body:
       value: |
         Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
 
-        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
+        If you have a feature or enhancement request for the frontend, please [start a discussion][fr] instead of creating an issue.
 
         **Please do not report issues for custom cards.**
 
@@ -74,7 +74,7 @@ body:
         If known, otherwise leave blank.
   - type: input
     attributes:
-      label: In which browser are you experiencing the issue with?
+      label: In which browser are you experiencing the issue?
       placeholder: Google Chrome 88.0.4324.150
       description: >
         Provide the full name and don't forget to add the version!

.github/ISSUE_TEMPLATE/config.yml

@@ -2,7 +2,7 @@ blank_issues_enabled: false
 contact_links:
   - name: Request a feature for the UI / Dashboards
     url: https://github.com/home-assistant/frontend/discussions/category_choices
-    about: Request an new feature for the Home Assistant frontend.
+    about: Request a new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.

.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
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.1.2
+        uses: actions/cache@v4.2.0
         with:
           path: |
             node_modules/.cache/prettier
@@ -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.4.3
+        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.4.3
+        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.4.3
+        uses: actions/upload-artifact@v4.6.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.6.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v2.1.13
+        uses: relative-ci/agent-action@v2.1.14
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.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
@@ -25,16 +25,16 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
 
-      - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@master
-
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v5
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
+      - name: Verify version
+        uses: home-assistant/actions/helpers/verify-version@master
+
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        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,8 +76,66 @@ 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 }}
           requirements: "requirements.txt"
+
+  release-landing-page:
+    name: Release landing-page frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4.2.2
+      - name: Setup Node
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build landing-page
+        run: landing-page/script/build_landing_page
+      - name: Tar folder
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.2.1
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+
+  release-supervisor:
+    name: Release supervisor frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4.2.2
+      - name: Setup Node
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build supervisor
+        run: hassio/script/build_hassio
+      - name: Tar folder
+        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@v2.2.1
+        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

.gitignore

@@ -50,3 +50,6 @@ src/cast/dev_const.ts
 
 # Jetbrains
 /.idea/
+
+# test coverage
+test/coverage/

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "runem.lit-plugin",
     "github.vscode-pull-request-github",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "vitest.explorer"
   ]
 }

.vscode/tasks.json

@@ -100,6 +100,38 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Develop Landing Page",
+      "type": "gulp",
+      "task": "develop-landing-page",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
     {
       "label": "Develop Demo",
       "type": "gulp",

.yarnrc.yml

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

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

@@ -5,7 +5,7 @@ import paths from "../paths.cjs";
 const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
-const PolyfillSupport = {
+const polyfillSupport = {
   // Note states and shadowRoot properties should be supported.
   "element-internals": {
     android: 90,
@@ -18,17 +18,6 @@ const PolyfillSupport = {
     safari: 17.4,
     samsung: 15.0,
   },
-  "element-append": {
-    android: 54,
-    chrome: 54,
-    edge: 17,
-    firefox: 49,
-    ios: 10.0,
-    opera: 41,
-    opera_mobile: 41,
-    safari: 10.0,
-    samsung: 6.0,
-  },
   "element-getattributenames": {
     android: 61,
     chrome: 61,
@@ -51,27 +40,18 @@ const PolyfillSupport = {
     safari: 12.0,
     samsung: 10.0,
   },
-  fetch: {
-    android: 42,
-    chrome: 42,
-    edge: 14,
-    firefox: 39,
-    ios: 10.3,
-    opera: 29,
-    opera_mobile: 29,
-    safari: 10.1,
-    samsung: 4.0,
-  },
+  // FormatJS polyfill detects fix for https://bugs.chromium.org/p/v8/issues/detail?id=10682,
+  // so adjusted to several months after that was marked fixed
   "intl-getcanonicallocales": {
-    android: 54,
-    chrome: 54,
-    edge: 16,
+    android: 90,
+    chrome: 90,
+    edge: 90,
     firefox: 48,
     ios: 10.3,
-    opera: 41,
-    opera_mobile: 41,
+    opera: 76,
+    opera_mobile: 64,
     safari: 10.1,
-    samsung: 6.0,
+    samsung: 15.0,
   },
   "intl-locale": {
     android: 74,
@@ -87,17 +67,6 @@ const PolyfillSupport = {
   "intl-other": {
     // Not specified (i.e. always try polyfill) since compatibility depends on supported locales
   },
-  proxy: {
-    android: 49,
-    chrome: 49,
-    edge: 12,
-    firefox: 18,
-    ios: 10.0,
-    opera: 36,
-    opera_mobile: 36,
-    safari: 10.0,
-    samsung: 5.0,
-  },
   "resize-observer": {
     android: 64,
     chrome: 64,
@@ -115,8 +84,6 @@ const PolyfillSupport = {
 // corresponding polyfill key and actual module to import
 const polyfillMap = {
   global: {
-    fetch: { key: "fetch", module: "unfetch/polyfill" },
-    Proxy: { key: "proxy", module: "proxy-polyfill" },
     ResizeObserver: {
       key: "resize-observer",
       module: join(POLYFILL_DIR, "resize-observer.ts"),
@@ -128,7 +95,7 @@ const polyfillMap = {
       module: "element-internals-polyfill",
     },
     ...Object.fromEntries(
-      ["append", "getAttributeNames", "toggleAttribute"].map((prop) => {
+      ["getAttributeNames", "toggleAttribute"].map((prop) => {
         const key = `element-${prop.toLowerCase()}`;
         return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }];
       })
@@ -147,6 +114,7 @@ const polyfillMap = {
       ...Object.fromEntries(
         [
           "DateTimeFormat",
+          "DurationFormat",
           "DisplayNames",
           "ListFormat",
           "NumberFormat",
@@ -167,7 +135,7 @@ export default defineProvider(
     const resolvePolyfill = createMetaResolver(polyfillMap);
     return {
       name: "custom-polyfill",
-      polyfills: PolyfillSupport,
+      polyfills: polyfillSupport,
       usageGlobal(meta, utils) {
         const polyfill = resolvePolyfill(meta);
         if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {

build-scripts/bundle.cjs

@@ -53,6 +53,11 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
+  __HASS_URL__: `\`${
+    "HASS_URL" in process.env
+      ? process.env["HASS_URL"]
+      : "${location.protocol}//${location.host}"
+  }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
   ),
@@ -152,7 +157,6 @@ module.exports.babelOptions = ({
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
     /node_modules[\\/]core-js/,
-    /node_modules[\\/]webpack[\\/]buildin/,
   ],
   sourceMaps: !isTestBuild,
   overrides: [
@@ -327,4 +331,17 @@ module.exports.config = {
       },
     };
   },
+
+  landingPage({ isProdBuild, latestBuild }) {
+    return {
+      name: "landing-page" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.landingPage_dir, "src/entrypoint.js"),
+      },
+      outputPath: outputPath(paths.landingPage_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+    };
+  },
 };

build-scripts/env.cjs

@@ -2,23 +2,22 @@ const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.cjs");
 
+const isTrue = (value) => value === "1" || value?.toLowerCase() === "true";
+
 module.exports = {
-  useWDS() {
-    return process.env.WDS === "1";
-  },
   isProdBuild() {
     return (
       process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
     );
   },
   isStatsBuild() {
-    return process.env.STATS === "1";
+    return isTrue(process.env.STATS);
   },
   isTestBuild() {
-    return process.env.IS_TEST === "true";
+    return isTrue(process.env.IS_TEST);
   },
   isNetlify() {
-    return process.env.NETLIFY === "true";
+    return isTrue(process.env.NETLIFY);
   },
   version() {
     const version = fs
@@ -30,6 +29,6 @@ module.exports = {
     return version[1];
   },
   isDevContainer() {
-    return process.env.DEV_CONTAINER === "1";
+    return isTrue(process.env.DEV_CONTAINER);
   },
 };

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/app.js

@@ -8,8 +8,7 @@ import "./gen-icons-json.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./wds.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-app",
@@ -26,7 +25,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-app",
-    env.useWDS() ? "wds-watch-app" : "webpack-watch-app"
+    "rspack-watch-app"
   )
 );
 
@@ -39,9 +38,20 @@ gulp.task(
     "clean",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
-    "webpack-prod-app",
+    "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
     // Don't compress running tests
-    ...(env.isTestBuild() ? [] : ["compress-app"])
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
+gulp.task(
+  "analyze-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-app"
   )
 );

build-scripts/gulp/cast.js

@@ -4,7 +4,7 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-cast",
@@ -17,7 +17,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     "gen-pages-cast-dev",
-    "webpack-dev-server-cast"
+    "rspack-dev-server-cast"
   )
 );
 
@@ -31,7 +31,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "webpack-prod-cast",
+    "rspack-prod-cast",
     "gen-pages-cast-prod"
   )
 );

build-scripts/gulp/clean.js

@@ -38,3 +38,14 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-landing-page",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([
+      paths.landingPage_output_root,
+      paths.landingPage_build,
+      paths.build_dir,
+    ])
+  )
+);

build-scripts/gulp/compress.js

@@ -15,54 +15,72 @@ const brotliOptions = {
 };
 const zopfliOptions = { threshold: 150 };
 
-const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
+const compressModern = (rootDir, modernDir, compress) =>
   gulp
-    .src(
-      [
-        `${modernDir}/**/${filesGlob}`,
-        compressServiceWorker ? `${rootDir}/sw-modern.js` : undefined,
-      ].filter(Boolean),
-      {
-        base: rootDir,
-      }
-    )
-    .pipe(brotli(brotliOptions))
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+      base: rootDir,
+      allowEmpty: true,
+    })
+    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
+const compressOther = (rootDir, modernDir, compress) =>
   gulp
     .src(
       [
         `${rootDir}/**/${filesGlob}`,
-        compressModern ? undefined : `!${modernDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
         `!${rootDir}/{sw-modern,service_worker}.js`,
         `${rootDir}/{authorize,onboarding}.html`,
-      ].filter(Boolean),
-      { base: rootDir }
+      ],
+      { base: rootDir, allowEmpty: true }
     )
-    .pipe(zopfli(zopfliOptions))
+    .pipe(compress === "zopfli" ? zopfli(zopfliOptions) : brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-const compressAppBrotli = () =>
-  compressDistBrotli(paths.app_output_root, paths.app_output_latest);
-const compressHassioBrotli = () =>
-  compressDistBrotli(
+const compressAppModernBrotli = () =>
+  compressModern(paths.app_output_root, paths.app_output_latest, "brotli");
+const compressAppModernZopfli = () =>
+  compressModern(paths.app_output_root, paths.app_output_latest, "zopfli");
+
+const compressHassioModernBrotli = () =>
+  compressModern(
     paths.hassio_output_root,
     paths.hassio_output_latest,
-    false
+    "brotli"
   );
-
-const compressAppZopfli = () =>
-  compressDistZopfli(paths.app_output_root, paths.app_output_latest);
-const compressHassioZopfli = () =>
-  compressDistZopfli(
+const compressHassioModernZopfli = () =>
+  compressModern(
     paths.hassio_output_root,
     paths.hassio_output_latest,
-    true
+    "zopfli"
   );
 
-gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
+const compressAppOtherBrotli = () =>
+  compressOther(paths.app_output_root, paths.app_output_latest, "brotli");
+const compressAppOtherZopfli = () =>
+  compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");
+
+const compressHassioOtherBrotli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "brotli");
+const compressHassioOtherZopfli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
+
+gulp.task(
+  "compress-app",
+  gulp.parallel(
+    compressAppModernBrotli,
+    compressAppOtherBrotli,
+    compressAppModernZopfli,
+    compressAppOtherZopfli
+  )
+);
 gulp.task(
   "compress-hassio",
-  gulp.parallel(compressHassioBrotli, compressHassioZopfli)
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
 );

build-scripts/gulp/demo.js

@@ -5,7 +5,7 @@ import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-demo",
@@ -22,7 +22,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-demo",
-    "webpack-dev-server-demo"
+    "rspack-dev-server-demo"
   )
 );
 
@@ -37,7 +37,18 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
-    "webpack-prod-demo",
+    "rspack-prod-demo",
     "gen-pages-demo-prod"
   )
 );
+
+gulp.task(
+  "analyze-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-demo"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -11,7 +11,6 @@ import { minify } from "html-minifier-terser";
 import template from "lodash.template";
 import { dirname, extname, resolve } from "node:path";
 import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import env from "../env.cjs";
 import paths from "../paths.cjs";
 
 // macOS companion app has no way to obtain the Safari version used by WKWebView,
@@ -56,7 +55,6 @@ const getCommonTemplateVars = () => {
     { ignorePatch: true, allowHigherVersions: true }
   );
   return {
-    useWDS: env.useWDS(),
     modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
   };
 };
@@ -92,13 +90,11 @@ const minifyHtml = (content, ext) => {
 };
 
 // Function to generate a dev task for each project's configuration
-// Note Currently WDS paths are hard-coded to only work for app
 const genPagesDevTask =
   (
     pageEntries,
     inputRoot,
     outputRoot,
-    useWDS = false,
     inputSub = "src/html",
     publicRoot = ""
   ) =>
@@ -109,17 +105,13 @@ const genPagesDevTask =
         resolve(inputRoot, inputSub, `${page}.template`),
         {
           ...commonVars,
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${publicRoot}/frontend_latest/${entry}.js`
+          latestEntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_latest/${entry}.js`
           ),
           es5EntryJS: entries.map(
             (entry) => `${publicRoot}/frontend_es5/${entry}.js`
           ),
-          latestCustomPanelJS: useWDS
-            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
-            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          latestCustomPanelJS: `${publicRoot}/frontend_latest/custom-panel.js`,
           es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
         }
       );
@@ -176,12 +168,7 @@ const APP_PAGE_ENTRIES = {
 
 gulp.task(
   "gen-pages-app-dev",
-  genPagesDevTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    env.useWDS()
-  )
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
 );
 
 gulp.task(
@@ -257,6 +244,28 @@ gulp.task(
   )
 );
 
+const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-landing-page-dev",
+  genPagesDevTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-landing-page-prod",
+  genPagesProdTask(
+    LANDING_PAGE_PAGE_ENTRIES,
+    paths.landingPage_dir,
+    paths.landingPage_output_root,
+    paths.landingPage_output_latest,
+    paths.landingPage_output_es5
+  )
+);
+
 const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
 gulp.task(
@@ -265,7 +274,6 @@ gulp.task(
     HASSIO_PAGE_ENTRIES,
     paths.hassio_dir,
     paths.hassio_output_root,
-    undefined,
     "src",
     paths.hassio_publicPath
   )

build-scripts/gulp/fetch-nightly-translations.js

@@ -66,7 +66,7 @@ gulp.task("fetch-nightly-translations", async function () {
       tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
     } catch {
       if (!allowTokenSetup) {
-        console.log("No token found so  build wil continue with English only");
+        console.log("No token found so build will continue with English only");
         return;
       }
       const auth = createOAuthDeviceAuth({

build-scripts/gulp/gallery.js

@@ -11,7 +11,7 @@ import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
@@ -156,7 +156,7 @@ gulp.task(
     "copy-static-gallery",
     "gen-pages-gallery-dev",
     gulp.parallel(
-      "webpack-dev-server-gallery",
+      "rspack-dev-server-gallery",
       async function watchMarkdownFiles() {
         gulp.watch(
           [
@@ -185,7 +185,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "webpack-prod-gallery",
+    "rspack-prod-gallery",
     "gen-pages-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -67,12 +67,6 @@ function copyPolyfills(staticDir) {
   );
 }
 
-function copyLoaderJS(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
-  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
-}
-
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
@@ -125,6 +119,11 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-landing-page", async () => {
+  const staticDir = paths.landingPage_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-static-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
@@ -135,8 +134,6 @@ gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
   fs.copySync(polyPath("public"), paths.app_output_root);
-
-  copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
@@ -159,8 +156,6 @@ gulp.task("copy-static-demo", async () => {
   );
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
-
-  copyLoaderJS(paths.demo_output_static);
   copyPolyfills(paths.demo_output_static);
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
@@ -174,8 +169,6 @@ gulp.task("copy-static-cast", async () => {
   fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
   fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
-
-  copyLoaderJS(paths.cast_output_static);
   copyPolyfills(paths.cast_output_static);
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
@@ -199,3 +192,14 @@ gulp.task("copy-static-gallery", async () => {
   copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });
+
+gulp.task("copy-static-landing-page", async () => {
+  // Copy landing-page static files
+  fs.copySync(
+    path.resolve(paths.landingPage_dir, "public"),
+    paths.landingPage_output_root
+  );
+
+  copyFonts(paths.landingPage_output_static);
+  copyTranslations(paths.landingPage_output_static);
+});

build-scripts/gulp/hassio.js

@@ -6,7 +6,7 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-hassio",
@@ -21,7 +21,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    "webpack-watch-hassio"
+    "rspack-watch-hassio"
   )
 );
 
@@ -37,7 +37,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    "webpack-prod-hassio",
+    "rspack-prod-hassio",
     "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])

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

build-scripts/gulp/landing-page.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-landing-page",
+    "translations-enable-merge-backend",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "gen-pages-landing-page-dev",
+    "rspack-watch-landing-page"
+  )
+);
+
+gulp.task(
+  "build-landing-page",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-landing-page",
+    "build-landing-page-translations",
+    "copy-translations-landing-page",
+    "build-locale-data",
+    "copy-static-landing-page",
+    "rspack-prod-landing-page",
+    "gen-pages-landing-page-prod"
+  )
+);

build-scripts/gulp/rspack.js

@@ -1,11 +1,11 @@
-// Tasks to run webpack.
+// Tasks to run rspack.
 
 import fs from "fs";
 import path from "path";
 import log from "fancy-log";
 import gulp from "gulp";
-import webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
+import rspack from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
 import {
@@ -14,7 +14,8 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createHassioConfig,
-} from "../webpack.cjs";
+  createLandingPageConfig,
+} from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -30,7 +31,7 @@ const isWsl =
 
 /**
  * @param {{
- *   compiler: import("webpack").Compiler,
+ *   compiler: import("@rspack/core").Compiler,
  *   contentBase: string,
  *   port: number,
  *   listenHost?: string
@@ -41,12 +42,13 @@ const runDevServer = async ({
   contentBase,
   port,
   listenHost = undefined,
+  proxy = undefined,
 }) => {
   if (listenHost === undefined) {
     // For dev container, we need to listen on all hosts
     listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
   }
-  const server = new WebpackDevServer(
+  const server = new RspackDevServer(
     {
       hot: false,
       open: true,
@@ -56,13 +58,14 @@ const runDevServer = async ({
         directory: contentBase,
         watch: true,
       },
+      proxy,
     },
     compiler
   );
 
   await server.start();
   // Server listening
-  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };
 
 const doneHandler = (done) => (err, stats) => {
@@ -87,16 +90,16 @@ const doneHandler = (done) => (err, stats) => {
 
 const prodBuild = (conf) =>
   new Promise((resolve) => {
-    webpack(
+    rspack(
       conf,
-      // Resolve promise when done. Because we pass a callback, webpack closes itself
+      // Resolve promise when done. Because we pass a callback, rspack closes itself
       doneHandler(resolve)
     );
   });
 
-gulp.task("webpack-watch-app", () => {
+gulp.task("rspack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
@@ -107,7 +110,7 @@ gulp.task("webpack-watch-app", () => {
   );
 });
 
-gulp.task("webpack-prod-app", () =>
+gulp.task("rspack-prod-app", () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
@@ -117,9 +120,9 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () =>
+gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createDemoConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.demo_output_root,
@@ -127,17 +130,18 @@ gulp.task("webpack-dev-server-demo", () =>
   })
 );
 
-gulp.task("webpack-prod-demo", () =>
+gulp.task("rspack-prod-demo", () =>
   prodBuild(
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
     })
   )
 );
 
-gulp.task("webpack-dev-server-cast", () =>
+gulp.task("rspack-dev-server-cast", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createCastConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.cast_output_root,
@@ -147,7 +151,7 @@ gulp.task("webpack-dev-server-cast", () =>
   })
 );
 
-gulp.task("webpack-prod-cast", () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
@@ -155,9 +159,9 @@ gulp.task("webpack-prod-cast", () =>
   )
 );
 
-gulp.task("webpack-watch-hassio", () => {
+gulp.task("rspack-watch-hassio", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     createHassioConfig({
       isProdBuild: false,
       latestBuild: true,
@@ -170,7 +174,7 @@ gulp.task("webpack-watch-hassio", () => {
   );
 });
 
-gulp.task("webpack-prod-hassio", () =>
+gulp.task("rspack-prod-hassio", () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
@@ -180,9 +184,9 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () =>
+gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createGalleryConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.gallery_output_root,
@@ -191,7 +195,7 @@ gulp.task("webpack-dev-server-gallery", () =>
   })
 );
 
-gulp.task("webpack-prod-gallery", () =>
+gulp.task("rspack-prod-gallery", () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
@@ -199,3 +203,30 @@ gulp.task("webpack-prod-gallery", () =>
     })
   )
 );
+
+gulp.task("rspack-watch-landing-page", () => {
+  // This command will run forever because we don't close compiler
+  rspack(
+    process.env.ES5
+      ? bothBuilds(createLandingPageConfig, { isProdBuild: false })
+      : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ poll: isWsl }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series(
+      "build-landing-page-translations",
+      "copy-translations-landing-page"
+    )
+  );
+});
+
+gulp.task("rspack-prod-landing-page", () =>
+  prodBuild(
+    bothBuilds(createLandingPageConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);

build-scripts/gulp/translations.js

@@ -172,12 +172,14 @@ const createMasterTranslation = () =>
 
 const FRAGMENTS = ["base"];
 
-const toggleSupervisorFragment = async () => {
-  FRAGMENTS[0] = "supervisor";
+const setFragment = (fragment) => async () => {
+  FRAGMENTS[0] = fragment;
 };
 
 const panelFragment = (fragment) =>
-  fragment !== "base" && fragment !== "supervisor";
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";
 
 const HASHES = new Map();
 
@@ -224,6 +226,9 @@ const createTranslations = async () => {
             case "supervisor":
               // Supervisor key is at the top level
               return [flatten(data.supervisor), ""];
+            case "landing-page":
+              // landing-page key is at the top level
+              return [flatten(data["landing-page"]), ""];
             default:
               // Create a fragment with only the given panel
               return [
@@ -322,5 +327,10 @@ gulp.task(
 
 gulp.task(
   "build-supervisor-translations",
-  gulp.series(toggleSupervisorFragment, "build-translations")
+  gulp.series(setFragment("supervisor"), "build-translations")
+);
+
+gulp.task(
+  "build-landing-page-translations",
+  gulp.series(setFragment("landing-page"), "build-translations")
 );

build-scripts/gulp/wds.js

@@ -1,10 +0,0 @@
-import gulp from "gulp";
-import { startDevServer } from "@web/dev-server";
-
-gulp.task("wds-watch-app", async () => {
-  startDevServer({
-    config: {
-      watch: true,
-    },
-  });
-});

build-scripts/paths.cjs

@@ -33,6 +33,22 @@ module.exports = {
   ),
   gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
 
+  landingPage_dir: path.resolve(__dirname, "../landing-page"),
+  landingPage_build: path.resolve(__dirname, "../landing-page/build"),
+  landingPage_output_root: path.resolve(__dirname, "../landing-page/dist"),
+  landingPage_output_latest: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_latest"
+  ),
+  landingPage_output_es5: path.resolve(
+    __dirname,
+    "../landing-page/dist/frontend_es5"
+  ),
+  landingPage_output_static: path.resolve(
+    __dirname,
+    "../landing-page/dist/static"
+  ),
+
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
   hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),

build-scripts/rspack.cjs

@@ -1,16 +1,13 @@
 const { existsSync } = require("fs");
 const path = require("path");
-const webpack = require("webpack");
+const rspack = require("@rspack/core");
+const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
 const { StatsWriterPlugin } = require("webpack-stats-plugin");
 const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
-const {
-  TransformAsyncModulesPlugin,
-} = require("transform-async-modules-webpack-plugin");
-const { dependencies } = require("../package.json");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -28,7 +25,7 @@ class LogStartCompilePlugin {
   }
 }
 
-const createWebpackConfig = ({
+const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -102,13 +99,18 @@ const createWebpackConfig = ({
       splitChunks: {
         // Disable splitting for web workers and worklets because imports of
         // external chunks are broken for:
-        // - ESM output: https://github.com/webpack/webpack/issues/17014
-        // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
-        chunks: (chunk) =>
-          !chunk.canBeInitial() &&
-          !new RegExp(`^.+-work${latestBuild ? "(?:let|er)" : "let"}$`).test(
-            chunk.name
-          ),
+        chunks: !isProdBuild
+          ? // improve incremental build speed, but blows up bundle size
+            new RegExp(
+              `^(?!(${Object.keys(entry).join("|")}|.*work(?:er|let))$)`
+            )
+          : // - ESM output: https://github.com/webpack/webpack/issues/17014
+            // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
+            (chunk) =>
+              !chunk.canBeInitial() &&
+              !new RegExp(
+                `^.+-work${latestBuild ? "(?:let|er)" : "let"}$`
+              ).test(chunk.name),
       },
     },
     plugins: [
@@ -117,10 +119,10 @@ const createWebpackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      new webpack.DefinePlugin(
+      new rspack.DefinePlugin(
         bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
-      new webpack.IgnorePlugin({
+      new rspack.IgnorePlugin({
         checkResource(resource, context) {
           // Only use ignore to intercept imports that we don't control
           // inside node_module dependencies.
@@ -152,7 +154,7 @@ const createWebpackConfig = ({
           );
         },
       }),
-      new webpack.NormalModuleReplacementPlugin(
+      new rspack.NormalModuleReplacementPlugin(
         new RegExp(
           bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
         ),
@@ -168,10 +170,14 @@ const createWebpackConfig = ({
           stats: { assets: true, chunks: true, modules: true },
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
-      !latestBuild &&
-        new TransformAsyncModulesPlugin({
-          browserslistEnv: "legacy",
-          runtime: { version: dependencies["@babel/runtime"] },
+      isProdBuild &&
+        isStatsBuild &&
+        new RsdoctorRspackPlugin({
+          reportDir: path.join(paths.build_dir, "rsdoctor"),
+          features: ["plugins", "bundle"],
+          supports: {
+            generateTileGraph: true,
+          },
         }),
     ].filter(Boolean),
     resolve: {
@@ -210,8 +216,6 @@ const createWebpackConfig = ({
         isProdBuild && !isStatsBuild ? "[id].[contenthash][ext]" : "[id][ext]",
       crossOriginLoading: "use-credentials",
       hashFunction: "xxhash64",
-      hashDigest: "base64url",
-      hashDigestLength: 11, // full length of 64 bit base64url
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
@@ -253,17 +257,17 @@ const createAppConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
 
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
 const createHassioConfig = ({
   isProdBuild,
@@ -271,7 +275,7 @@ const createHassioConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.hassio({
       isProdBuild,
       latestBuild,
@@ -281,7 +285,10 @@ const createHassioConfig = ({
   );
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+
+const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
+  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,
@@ -289,5 +296,6 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createWebpackConfig,
+  createRspackConfig,
+  createLandingPageConfig,
 };

cast/README.md

@@ -25,7 +25,7 @@ Home Assistant Cast is made up of two separate applications:
 
 ### Setting dev variables
 
-Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of you development machine.
+Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of your development machine.
 
 ### Changing configuration
 

cast/src/html/receiver.html.template

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

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

@@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { 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;
     }
@@ -252,7 +252,7 @@ export class HcConnect extends LitElement {
       this.loading = false;
       return;
     } finally {
-      // Clear url if we have a auth callback in url.
+      // Clear url if we have an auth callback in url.
       if (location.search.includes("auth_callback=1")) {
         history.replaceState(null, "", location.pathname);
       }
@@ -288,41 +288,39 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err: any) {
+    } catch (_err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
-      .card-content a {
-        color: var(--primary-color);
-      }
-      .card-actions a {
-        text-decoration: none;
-      }
-      .error {
-        color: red;
-        font-weight: bold;
-      }
+  static styles = css`
+    .card-content a {
+      color: var(--primary-color);
+    }
+    .card-actions a {
+      text-decoration: none;
+    }
+    .error {
+      color: red;
+      font-weight: bold;
+    }
 
-      .error a {
-        color: darkred;
-      }
+    .error a {
+      color: darkred;
+    }
 
-      mwc-button ha-svg-icon {
-        margin-left: 8px;
-      }
+    mwc-button ha-svg-icon {
+      margin-left: 8px;
+    }
 
-      .spacer {
-        flex: 1;
-      }
+    .spacer {
+      flex: 1;
+    }
 
-      ha-textfield {
-        width: 100%;
-      }
-    `;
-  }
+    ha-textfield {
+      width: 100%;
+    }
+  `;
 }
 
 declare global {

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";
@@ -14,6 +8,7 @@ import "../../../../src/panels/lovelace/views/hui-view";
 import "../../../../src/panels/lovelace/views/hui-view-container";
 import type { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
+import "../../../../src/panels/lovelace/views/hui-view-background";
 
 (window as any).loadCardHelpers = () =>
   import("../../../../src/panels/lovelace/custom-card-helpers");
@@ -25,9 +20,9 @@ class HcLovelace extends LitElement {
   @property({ attribute: false })
   public lovelaceConfig!: LovelaceConfig;
 
-  @property() public viewPath?: string | number | null;
+  @property({ attribute: false }) public viewPath?: string | number | null;
 
-  @property() public urlPath: string | null = null;
+  @property({ attribute: false }) public urlPath: string | null = null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -57,11 +52,9 @@ class HcLovelace extends LitElement {
     const background = viewConfig.background || this.lovelaceConfig.background;
 
     return html`
-      <hui-view-container
-        .hass=${this.hass}
-        .background=${background}
-        .theme=${viewConfig.theme}
-      >
+      <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
+        <hui-view-background .hass=${this.hass} .background=${background}>
+        </hui-view-background>
         <hui-view
           .hass=${this.hass}
           .lovelace=${lovelace}
@@ -118,20 +111,18 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
-      hui-view-container {
-        display: flex;
-        position: relative;
-        min-height: 100vh;
-        box-sizing: border-box;
-      }
-      hui-view {
-        flex: 1 1 100%;
-        max-width: 100%;
-      }
-    `;
-  }
+  static styles = css`
+    hui-view-container {
+      display: flex;
+      position: relative;
+      min-height: 100vh;
+      box-sizing: border-box;
+    }
+    hui-view-container > * {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  `;
 }
 
 export interface CastViewChanged {

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

@@ -144,10 +144,10 @@ export class HcMain extends HassElement {
     }
 
     if (senderId) {
-      this.sendMessage(senderId, status);
+      this._sendMessage(senderId, status);
     } else {
       for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, status);
+        this._sendMessage(sender.id, status);
       }
     }
   }
@@ -164,10 +164,10 @@ export class HcMain extends HassElement {
     };
 
     if (senderId) {
-      this.sendMessage(senderId, error);
+      this._sendMessage(senderId, error);
     } else {
       for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, error);
+        this._sendMessage(sender.id, error);
       }
     }
   }
@@ -394,7 +394,7 @@ export class HcMain extends HassElement {
     }
   }
 
-  private sendMessage(senderId: string, response: any) {
+  private _sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }
 }

cast/webpack.config.js

@@ -1,8 +0,0 @@
-import webpack from "../build-scripts/webpack.cjs";
-import env from "../build-scripts/env.cjs";
-
-export default webpack.createCastConfig({
-  isProdBuild: env.isProdBuild(),
-  isStatsBuild: env.isStatsBuild(),
-  latestBuild: true,
-});

demo/script/size_stats

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-export STATS=1
-statsfile="compilation-stats-demo.json"
-
-./node_modules/.bin/webpack-cli --profile --node-env=production --json=$statsfile
-npx webpack-bundle-analyzer $statsfile dist/frontend_latest
-rm -f $statsfile
+./node_modules/.bin/gulp analyze-demo

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";
@@ -46,7 +45,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
           this.requestUpdate();
         });
         mgr.castContext.addEventListener(
-          // eslint-disable-next-line no-undef
           cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
           (ev) => {
             // On Android, opening a new session always results in SESSION_RESUMED.
@@ -68,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        align-items: center;
-      }
-      ha-svg-icon {
-        padding: 8px;
-        color: var(--paper-item-icon-color);
-      }
-      .flex {
-        flex: 1;
-        overflow: hidden;
-        margin-left: 16px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      google-cast-launcher {
-        cursor: pointer;
-        display: inline-block;
-        height: 24px;
-        width: 24px;
-      }
-    `;
-  }
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding: 8px;
+      color: var(--paper-item-icon-color);
+    }
+    .flex {
+      flex: 1;
+      overflow: hidden;
+      margin-left: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    google-cast-launcher {
+      cursor: pointer;
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+    }
+  `;
 }
 
 declare global {

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

@@ -26,12 +26,13 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @state() private _switching = false;
 
-  private _hidden = localStorage.hide_demo_card;
+  private _hidden = window.localStorage.getItem("hide_demo_card");
 
   public getCardSize() {
     return this._hidden ? 0 : 2;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   public setConfig(_config: LovelaceCardConfig) {}
 
   protected render() {

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

demo/webpack.config.js

@@ -1,11 +0,0 @@
-import webpack from "../build-scripts/webpack.cjs";
-import env from "../build-scripts/env.cjs";
-
-// File just used for stats builds
-const latestBuild = true;
-
-export default webpack.createDemoConfig({
-  isProdBuild: env.isProdBuild(),
-  isStatsBuild: env.isStatsBuild(),
-  latestBuild,
-});

eslint.config.mjs

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
 import tsParser from "@typescript-eslint/parser";
@@ -6,10 +7,10 @@ import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
 const compat = new FlatCompat({
-  baseDirectory: __dirname,
+  baseDirectory: _dirname,
   recommendedConfig: js.configs.recommended,
   allConfig: js.configs.all,
 });
@@ -17,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",
@@ -49,15 +51,13 @@ export default [
         ecmaFeatures: {
           modules: true,
         },
-
-        project: "./tsconfig.json",
       },
     },
 
     settings: {
       "import/resolver": {
         webpack: {
-          config: "./webpack.config.cjs",
+          config: "./rspack.config.cjs",
         },
       },
     },
@@ -113,12 +113,10 @@ export default [
       "@typescript-eslint/no-shadow": ["error"],
 
       "@typescript-eslint/naming-convention": [
-        "off",
+        "error",
         {
-          selector: "default",
-          format: ["camelCase", "snake_case"],
-          leadingUnderscore: "allow",
-          trailingUnderscore: "allow",
+          selector: ["objectLiteralProperty", "objectLiteralMethod"],
+          format: null,
         },
         {
           selector: ["variable"],
@@ -126,38 +124,65 @@ export default [
           leadingUnderscore: "allow",
           trailingUnderscore: "allow",
         },
+        {
+          selector: ["variable"],
+          modifiers: ["exported"],
+          format: ["camelCase", "PascalCase", "UPPER_CASE"],
+        },
         {
           selector: "typeLike",
           format: ["PascalCase"],
         },
+        {
+          selector: "method",
+          modifiers: ["public"],
+          format: ["camelCase"],
+          leadingUnderscore: "forbid",
+        },
+        {
+          selector: "method",
+          modifiers: ["private"],
+          format: ["camelCase"],
+          leadingUnderscore: "require",
+        },
       ],
 
-      "@typescript-eslint/no-unused-vars": "off",
-
-      "unused-imports/no-unused-vars": [
+      "@typescript-eslint/no-unused-vars": [
         "error",
         {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "after-used",
+          args: "all",
           argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
           ignoreRestSiblings: true,
         },
       ],
 
       "unused-imports/no-unused-imports": "error",
-      "lit/attribute-names": "warn",
+      "lit/attribute-names": "error",
       "lit/attribute-value-entities": "off",
       "lit/no-template-map": "off",
-      "lit/no-native-attributes": "warn",
-      "lit/no-this-assign-in-render": "warn",
+      "lit/no-native-attributes": "error",
+      "lit/no-this-assign-in-render": "error",
       "lit-a11y/click-events-have-key-events": ["off"],
       "lit-a11y/no-autofocus": "off",
-      "lit-a11y/alt-text": "warn",
-      "lit-a11y/anchor-is-valid": "warn",
-      "lit-a11y/role-has-required-aria-attrs": "warn",
+      "lit-a11y/alt-text": "error",
+      "lit-a11y/anchor-is-valid": "error",
+      "lit-a11y/role-has-required-aria-attrs": "error",
       "@typescript-eslint/consistent-type-imports": "error",
       "@typescript-eslint/no-import-type-side-effects": "error",
+      camelcase: "off",
+      "@typescript-eslint/no-dynamic-delete": "off",
+      "@typescript-eslint/no-empty-object-type": [
+        "error",
+        {
+          allowInterfaces: "always",
+          allowObjectTypes: "always",
+        },
+      ],
+      "no-use-before-define": "off",
     },
   },
 ];

gallery/src/components/demo-black-white-row.ts

@@ -9,6 +9,7 @@ import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
+  // eslint-disable-next-line lit/no-native-attributes
   @property() title!: string;
 
   @property() value?: any;

gallery/src/components/demo-card.ts

@@ -18,7 +18,8 @@ class DemoCard extends LitElement {
 
   @property({ attribute: false }) public config!: DemoCardConfig;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;
 
   @state() private _size?: number;
 

gallery/src/components/demo-cards.ts

@@ -44,11 +44,11 @@ class DemoCards extends LitElement {
     `;
   }
 
-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
 
-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
     applyThemesOnElement(this._container, { themes: {} } as any, "default", {
       dark: ev.target.checked,
     });

gallery/src/components/demo-more-info.ts

@@ -10,9 +10,10 @@ import type { HomeAssistant } from "../../../src/types";
 class DemoMoreInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public entityId!: string;
+  @property({ attribute: false }) public entityId!: string;
 
-  @property({ type: Boolean }) public showConfig = false;
+  @property({ attribute: "show-config", type: Boolean })
+  public showConfig = false;
 
   render() {
     const state = this._getState(this.entityId, this.hass.states);
@@ -23,7 +24,7 @@ class DemoMoreInfo extends LitElement {
             <state-card-content
               .stateObj=${state}
               .hass=${this.hass}
-              inDialog
+              in-dialog
             ></state-card-content>
 
             <more-info-content

gallery/src/components/demo-more-infos.ts

@@ -58,11 +58,11 @@ class DemoMoreInfos extends LitElement {
     }
   `;
 
-  _showConfigToggled(ev) {
+  private _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
 
-  _darkThemeToggled(ev) {
+  private _darkThemeToggled(ev) {
     applyThemesOnElement(
       this.shadowRoot!.querySelector("#container"),
       {

gallery/src/ha-gallery.ts

@@ -182,7 +182,7 @@ class HaGallery extends LitElement {
     }
   }
 
-  _menuTapped() {
+  private _menuTapped() {
     this._drawer.open = !this._drawer.open;
   }
 

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

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

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/editor-action.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -15,7 +14,6 @@ import { HaDelayAction } from "../../../../src/panels/config/automation/action/t
 import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
-import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-activate_scene";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
 import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
@@ -33,7 +31,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Service", actions: [HaServiceAction.defaultConfig] },
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
   { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
@@ -66,11 +63,6 @@ class DemoHaAutomationEditorAction extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
     return html`
       <div class="options">
         <ha-formfield label="Disabled">
@@ -95,7 +87,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                   .actions=${this.data[sampleIdx]}
                   .sampleIdx=${sampleIdx}
                   .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                 ></ha-automation-action>
               `
             )}
@@ -105,6 +97,12 @@ class DemoHaAutomationEditorAction extends LitElement {
     `;
   }
 
+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

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

@@ -1,4 +1,3 @@
-/* eslint-disable lit/no-template-arrow */
 import type { TemplateResult } from "lit";
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -104,11 +103,6 @@ export class DemoAutomationEditorCondition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
     return html`
       <div class="options">
         <ha-formfield label="Disabled">
@@ -133,7 +127,7 @@ export class DemoAutomationEditorCondition extends LitElement {
                   .conditions=${this.data[sampleIdx]}
                   .sampleIdx=${sampleIdx}
                   .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
+                  @value-changed=${this._handleValueChange}
                 ></ha-automation-condition>
               `
             )}
@@ -143,6 +137,12 @@ export class DemoAutomationEditorCondition extends LitElement {
     `;
   }
 
+  private _handleValueChange(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
   private _handleOptionChange(ev) {
     this[`_${ev.target.name}`] = ev.target.checked;
   }

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

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

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

@@ -31,22 +31,17 @@ export class DemoAutomationTrace extends LitElement {
               <hat-script-graph
                 .trace=${trace.trace}
                 .selected=${this._selected[idx]}
-                @graph-node-selected=${(ev) => {
-                  this._selected = { ...this._selected, [idx]: ev.detail.path };
-                }}
+                @graph-node-selected=${this._handleGraphNodeSelected}
+                .sampleIdx=${idx}
               ></hat-script-graph>
               <hat-trace-timeline
-                allowPick
+                allow-pick
                 .hass=${this.hass}
                 .trace=${trace.trace}
                 .logbookEntries=${trace.logbookEntries}
                 .selectedPath=${this._selected[idx]}
-                @value-changed=${(ev) => {
-                  this._selected = {
-                    ...this._selected,
-                    [idx]: ev.detail.value,
-                  };
-                }}
+                @value-changed=${this._handleTimelineValueChanged}
+                .sampleIdx=${idx}
               ></hat-trace-timeline>
               <button @click=${() => console.log(trace)}>Log trace</button>
             </div>
@@ -63,28 +58,36 @@ export class DemoAutomationTrace extends LitElement {
     hass.updateTranslations("config", "en");
   }
 
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px;
-      }
-      .card-content {
-        display: flex;
-      }
-      .card-content > * {
-        margin-right: 16px;
-      }
-      .card-content > *:last-child {
-        margin-right: 0;
-      }
-      button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    `;
+  private _handleTimelineValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.value };
   }
+
+  private _handleGraphNodeSelected(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
+  }
+
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px;
+    }
+    .card-content {
+      display: flex;
+    }
+    .card-content > * {
+      margin-right: 16px;
+    }
+    .card-content > *:last-child {
+      margin-right: 0;
+    }
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  `;
 }
 
 declare global {

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

@@ -19,7 +19,7 @@ The alert offers four severity levels that set a distinctive icon and color.
 </ha-alert>
 
 <ha-alert alert-type="warning">
-  This is an warning alert — check it out!
+  This is a warning alert — check it out!
 </ha-alert>
 
 <ha-alert alert-type="info">
@@ -27,7 +27,7 @@ The alert offers four severity levels that set a distinctive icon and color.
 </ha-alert>
 
 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 
 **Note:** This component is by <a href="https://mui.com/components/alert/" rel="noopener noreferrer" target="_blank">MUI</a> and is not documented in the <a href="https://material.io" rel="noopener noreferrer" target="_blank">Material Design guidelines</a>.
@@ -95,7 +95,7 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 </ha-alert>
 
 <ha-alert alert-type="warning">
-  This is an warning alert — check it out!
+  This is a warning alert — check it out!
 </ha-alert>
 
 <ha-alert alert-type="info">
@@ -103,7 +103,7 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 </ha-alert>
 
 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 
 ```html
@@ -122,37 +122,37 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 The `title ` option should not be used without a description.
 
 <ha-alert alert-type="success" title="Success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success" title="Success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 ```
 
 **Dismissable**
 
 <ha-alert alert-type="success" dismissable>
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success" dismissable>
-  This is an success alert — check it out!
+  This is a success alert — check it out!
 </ha-alert>
 ```
 
 **Slotted action**
 
 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
   <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success">
-  This is an success alert — check it out!
+  This is a success alert — check it out!
   <mwc-button slot="action" label="Undo"></mwc-button>
 </ha-alert>
 ```

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

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

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,
   },
@@ -489,14 +495,8 @@ class DemoHaForm extends LitElement {
             .title=${info.title}
             .value=${this.data[idx]}
             .disabled=${this.disabled[idx]}
-            @submitted=${() => {
-              this.disabled[idx] = true;
-              this.requestUpdate();
-              setTimeout(() => {
-                this.disabled[idx] = false;
-                this.requestUpdate();
-              }, 2000);
-            }}
+            @submitted=${this._handleSubmit}
+            .sampleIdx=${idx}
           >
             ${["light", "dark"].map(
               (slot) => html`
@@ -511,10 +511,8 @@ class DemoHaForm extends LitElement {
                   .computeLabel=${(schema) =>
                     translations[schema.name] || schema.name}
                   .computeHelper=${() => "Helper text"}
-                  @value-changed=${(e) => {
-                    this.data[idx] = e.detail.value;
-                    this.requestUpdate();
-                  }}
+                  @value-changed=${this._handleValueChanged}
+                  .sampleIdx=${idx}
                 ></ha-form>
               `
             )}
@@ -523,6 +521,22 @@ class DemoHaForm extends LitElement {
       })}
     `;
   }
+
+  private _handleValueChanged(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.data[sampleIdx] = ev.detail.value;
+    this.requestUpdate();
+  }
+
+  private _handleSubmit(ev) {
+    const sampleIdx = ev.target.sampleIdx;
+    this.disabled[sampleIdx] = true;
+    this.requestUpdate();
+    setTimeout(() => {
+      this.disabled[sampleIdx] = false;
+      this.requestUpdate();
+    }, 2000);
+  }
 }
 
 declare global {

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

@@ -76,7 +76,7 @@ export class DemoHaHsColorPicker extends LitElement {
             @change=${this._saturationChanged}
           >
           </ha-slider>
-          <p>Color Brighness : ${this.brightness}</p>
+          <p>Color Brightness : ${this.brightness}</p>
           <ha-slider
             labeled
             step="1"
@@ -91,27 +91,25 @@ export class DemoHaHsColorPicker extends LitElement {
     `;
   }
 
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      .card-content {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      }
-      ha-hs-color-picker {
-        width: 400px;
-      }
-      .value {
-        font-size: 22px;
-        font-weight: bold;
-        margin: 0 0 12px 0;
-      }
-    `;
-  }
+  static styles = css`
+    ha-card {
+      max-width: 600px;
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    ha-hs-color-picker {
+      width: 400px;
+    }
+    .value {
+      font-size: 22px;
+      font-weight: bold;
+      margin: 0 0 12px 0;
+    }
+  `;
 }
 
 declare global {

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

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

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 {