Fix new script/automation dialog

.devcontainer/Dockerfile

@@ -1,4 +1,5 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
+FROM mcr.microsoft.com/devcontainers/python:3.12
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.devcontainer/devcontainer.json

@@ -5,15 +5,12 @@
     "context": ".."
   },
   "appPort": "8124:8123",
-  "postCreateCommand": "./.devcontainer/post_create.sh",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
     "DEV_CONTAINER": "1",
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
-  "remoteEnv": {
-    "NODE_OPTIONS": "--max_old_space_size=8192"
-  },
   "customizations": {
     "vscode": {
       "extensions": [

.devcontainer/post_create.sh

@@ -1,22 +0,0 @@
-#!/bin/bash
-
-# This script will run after the container is created
-
-# add github cli
-(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
-	&& sudo mkdir -p -m 755 /etc/apt/keyrings \
-        && out=$(mktemp) && wget -nv -O$out https://cli.github.com/packages/githubcli-archive-keyring.gpg \
-        && cat $out | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
-	&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
-	&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
-
-# Update package lists
-sudo apt-get update
-
-sudo apt upgrade -y
-
-# Install necessary packages
-sudo apt-get install -y libpcap-dev gh
-
-# Display a message
-echo "Post-create script has been executed successfully."

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

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

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.1.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.6.2
+        uses: actions/upload-artifact@v4.4.3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.4.3
         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.2.0
+        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.1.0
+      - uses: release-drafter/release-drafter@v6.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.12"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -25,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.3.0
+        uses: actions/setup-node@v4.1.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.2.1
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: |
             dist/*.whl
@@ -74,9 +74,9 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2025.03.0
+        uses: home-assistant/wheels@2024.11.0
         with:
-          abi: cp313
+          abi: cp312
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -92,7 +92,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -107,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.1.0
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -121,7 +121,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.1.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -136,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.1.0
         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.1.0
+        uses: actions/stale@v9.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.vscode/tasks.json

@@ -1,42 +1,6 @@
 {
   "version": "2.0.0",
   "tasks": [
-    {
-      "label": "Develop and serve Frontend",
-      "type": "shell",
-      "command": "script/develop_and_serve -c ${input:coreUrl}",
-      // Sync changes here to other tasks until issue resolved
-      // https://github.com/Microsoft/vscode/issues/61497
-      "problemMatcher": {
-        "owner": "ha-build",
-        "source": "ha-build",
-        "fileLocation": "absolute",
-        "severity": "error",
-        "pattern": [
-          {
-            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
-            "severity": 1,
-            "file": 2,
-            "message": 3,
-            "line": 4,
-            "column": 5
-          }
-        ],
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "Changes detected. Starting compilation",
-          "endsPattern": "Build done @"
-        }
-      },
-      "isBackground": true,
-      "group": {
-        "kind": "build",
-        "isDefault": true
-      },
-      "runOptions": {
-        "instanceLimit": 1
-      }
-    },
     {
       "label": "Develop Frontend",
       "type": "gulp",
@@ -277,12 +241,6 @@
       "id": "supervisorToken",
       "type": "promptString",
       "description": "The token for the Remote API proxy add-on"
-    },
-    {
-      "id": "coreUrl",
-      "type": "promptString",
-      "description": "The URL of the Home Assistant Core instance",
-      "default": "http://127.0.0.1:8123"
     }
   ]
 }

.yarnrc.yml

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

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

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

build-scripts/bundle.cjs

@@ -18,7 +18,7 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild }) =>
+module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,6 +28,12 @@ module.exports.emptyPackages = ({ isHassioBuild }) =>
     require.resolve("@polymer/font-roboto/roboto.js"),
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    // Compatibility not needed for latest builds
+    latestBuild &&
+      // wrapped in require.resolve so it blows up if file no longer exists
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
+      ),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
@@ -49,7 +55,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __STATIC_PATH__: "/static/",
   __HASS_URL__: `\`${
     "HASS_URL" in process.env
-      ? process.env.HASS_URL
+      ? process.env["HASS_URL"]
       : "${location.protocol}//${location.host}"
   }\``,
   "process.env.NODE_ENV": JSON.stringify(

build-scripts/eslint.config.mjs

@@ -1,16 +1,16 @@
-// @ts-check
-
-import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
-export default tseslint.config(...rootConfig, {
-  rules: {
-    "no-console": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "import/no-dynamic-require": "off",
-    "global-require": "off",
-    "@typescript-eslint/no-require-imports": "off",
-    "prefer-arrow-callback": "off",
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+      "import/no-extraneous-dependencies": "off",
+      "import/extensions": "off",
+      "import/no-dynamic-require": "off",
+      "global-require": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "prefer-arrow-callback": "off",
+    },
   },
-});
+];

build-scripts/gulp/compress.js

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

build-scripts/gulp/entry-html.js

@@ -56,7 +56,6 @@ const getCommonTemplateVars = () => {
   );
   return {
     modernRegex: compileRegex(browserRegexes.concat(haMacOSRegex)).toString(),
-    hassUrl: process.env.HASS_URL || "",
   };
 };
 

build-scripts/gulp/gather-static.js

@@ -59,11 +59,6 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
-  // Lit polyfill support
-  fs.copySync(
-    npmPath("lit/polyfill-support.js"),
-    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
-  );
 
   // dialog-polyfill css
   copyFileDir(
@@ -72,6 +67,12 @@ function copyPolyfills(staticDir) {
   );
 }
 
+function copyLoaderJS(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
+  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
+}
+
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
@@ -95,10 +96,6 @@ function copyMapPanel(staticDir) {
     npmPath("leaflet/dist/leaflet.css"),
     staticPath("images/leaflet/")
   );
-  copyFileDir(
-    npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
-    staticPath("images/leaflet/")
-  );
   fs.copySync(
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")
@@ -143,6 +140,8 @@ gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
   fs.copySync(polyPath("public"), paths.app_output_root);
+
+  copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
@@ -165,6 +164,8 @@ gulp.task("copy-static-demo", async () => {
   );
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
+
+  copyLoaderJS(paths.demo_output_static);
   copyPolyfills(paths.demo_output_static);
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
@@ -178,6 +179,8 @@ gulp.task("copy-static-cast", async () => {
   fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
   fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
+
+  copyLoaderJS(paths.cast_output_static);
   copyPolyfills(paths.cast_output_static);
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);

build-scripts/gulp/index.mjs

@@ -1,17 +0,0 @@
-import "./app.js";
-import "./cast.js";
-import "./clean.js";
-import "./compress.js";
-import "./demo.js";
-import "./download-translations.js";
-import "./entry-html.js";
-import "./fetch-nightly-translations.js";
-import "./gallery.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./hassio.js";
-import "./landing-page.js";
-import "./locale-data.js";
-import "./rspack.js";
-import "./service-worker.js";
-import "./translations.js";

build-scripts/gulp/translations.js

@@ -40,17 +40,20 @@ class CustomJSON extends Transform {
     this._reviver = reviver;
   }
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   async _transform(file, _, callback) {
-    let obj = JSON.parse(file.contents.toString(), this._reviver);
-    if (this._func) obj = this._func(obj, file.path);
-    for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
-      const outFile = file.clone({ contents: false });
-      outFile.contents = Buffer.from(JSON.stringify(outObj));
-      outFile.dirname += `/${dir}`;
-      this.push(outFile);
+    try {
+      let obj = JSON.parse(file.contents.toString(), this._reviver);
+      if (this._func) obj = this._func(obj, file.path);
+      for (const [outObj, dir] of Array.isArray(obj) ? obj : [[obj, ""]]) {
+        const outFile = file.clone({ contents: false });
+        outFile.contents = Buffer.from(JSON.stringify(outObj));
+        outFile.dirname += `/${dir}`;
+        this.push(outFile);
+      }
+      callback(null);
+    } catch (err) {
+      callback(err);
     }
-    callback(null);
   }
 }
 
@@ -65,19 +68,25 @@ class MergeJSON extends Transform {
     this._reviver = reviver;
   }
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   async _transform(file, _, callback) {
-    this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
-    if (!this._outFile) this._outFile = file.clone({ contents: false });
-    callback(null);
+    try {
+      this._objects.push(JSON.parse(file.contents.toString(), this._reviver));
+      if (!this._outFile) this._outFile = file.clone({ contents: false });
+      callback(null);
+    } catch (err) {
+      callback(err);
+    }
   }
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   async _flush(callback) {
-    const mergedObj = merge(this._startObj, ...this._objects);
-    this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
-    this._outFile.stem = this._stem;
-    callback(null, this._outFile);
+    try {
+      const mergedObj = merge(this._startObj, ...this._objects);
+      this._outFile.contents = Buffer.from(JSON.stringify(mergedObj));
+      this._outFile.stem = this._stem;
+      callback(null, this._outFile);
+    } catch (err) {
+      callback(err);
+    }
   }
 }
 

build-scripts/rspack.cjs

@@ -1,17 +1,12 @@
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { StatsWriterPlugin } = require("webpack-stats-plugin");
-const filterStats = require("@bundle-stats/plugin-webpack-filter");
-// eslint-disable-next-line @typescript-eslint/naming-convention
+const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
@@ -160,7 +155,9 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
+        ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -195,7 +192,6 @@ const createRspackConfig = ({
         "lit/directives/if-defined$": "lit/directives/if-defined.js",
         "lit/directives/guard$": "lit/directives/guard.js",
         "lit/directives/cache$": "lit/directives/cache.js",
-        "lit/directives/join$": "lit/directives/join.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/directives/live$": "lit/directives/live.js",
         "lit/directives/keyed$": "lit/directives/keyed.js",

cast/README.md

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

cast/src/html/receiver.html.template

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

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

@@ -1,21 +1,12 @@
-import type { CastManager } from "../../../../src/cast/cast_manager";
-import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
-import type { ActionDetail } from "@material/mwc-list/mwc-list";
-import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-icon";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/layouts/hass-loading-screen";
-import "./hc-layout";
 import "@material/mwc-button/mwc-button";
 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 { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import type { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
   ensureConnectedCastSession,
@@ -27,12 +18,18 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
+import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import "./hc-layout";
+import "../../../../src/components/ha-list-item";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -206,72 +203,74 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (_err: any) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static styles = css`
-    .center-item {
-      display: flex;
-      justify-content: space-around;
-    }
+  static get styles(): CSSResultGroup {
+    return css`
+      .center-item {
+        display: flex;
+        justify-content: space-around;
+      }
 
-    .action-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
+      .action-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
 
-    .question {
-      position: relative;
-      padding: 8px 16px;
-    }
+      .question {
+        position: relative;
+        padding: 8px 16px;
+      }
 
-    .question:before {
-      border-radius: 4px;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
-      content: "";
-      background-color: var(--primary-color);
-      opacity: 0.12;
-      will-change: opacity;
-    }
+      .question:before {
+        border-radius: 4px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        background-color: var(--primary-color);
+        opacity: 0.12;
+        will-change: opacity;
+      }
 
-    .connection,
-    .connection a {
-      color: var(--secondary-text-color);
-    }
+      .connection,
+      .connection a {
+        color: var(--secondary-text-color);
+      }
 
-    mwc-button ha-svg-icon {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-      height: 18px;
-    }
+      mwc-button ha-svg-icon {
+        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
+        height: 18px;
+      }
 
-    ha-list-item ha-icon,
-    ha-list-item ha-svg-icon {
-      padding: 12px;
-      color: var(--secondary-text-color);
-    }
+      ha-list-item ha-icon,
+      ha-list-item ha-svg-icon {
+        padding: 12px;
+        color: var(--secondary-text-color);
+      }
 
-    :host([hide-icons]) ha-icon {
-      display: none;
-    }
+      :host([hide-icons]) ha-icon {
+        display: none;
+      }
 
-    .spacer {
-      flex: 1;
-    }
+      .spacer {
+        flex: 1;
+      }
 
-    .card-content a {
-      color: var(--primary-color);
-    }
-  `;
+      .card-content a {
+        color: var(--primary-color);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,18 +1,10 @@
-import type { CastManager } from "../../../../src/cast/cast_manager";
+import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import type {
   Auth,
   Connection,
   getAuthOptions,
 } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-textfield";
-import "../../../../src/layouts/hass-loading-screen";
-import "./hc-layout";
-import "@material/mwc-button";
-
-import { mdiCastConnected, mdiCast } from "@mdi/js";
 import {
   createConnection,
   ERR_CANNOT_CONNECT,
@@ -21,16 +13,21 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
-
+import type { CastManager } from "../../../../src/cast/cast_manager";
 import { getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
+import "./hc-layout";
+import "../../../../src/components/ha-textfield";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -218,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;
     }
@@ -255,7 +252,7 @@ export class HcConnect extends LitElement {
       this.loading = false;
       return;
     } finally {
-      // Clear url if we have an auth callback in url.
+      // Clear url if we have a auth callback in url.
       if (location.search.includes("auth_callback=1")) {
         history.replaceState(null, "", location.pathname);
       }
@@ -291,39 +288,41 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (_err: any) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
 
-  static styles = css`
-    .card-content a {
-      color: var(--primary-color);
-    }
-    .card-actions a {
-      text-decoration: none;
-    }
-    .error {
-      color: red;
-      font-weight: bold;
-    }
+  static get styles(): CSSResultGroup {
+    return css`
+      .card-content a {
+        color: var(--primary-color);
+      }
+      .card-actions a {
+        text-decoration: none;
+      }
+      .error {
+        color: red;
+        font-weight: bold;
+      }
 
-    .error a {
-      color: darkred;
-    }
+      .error a {
+        color: darkred;
+      }
 
-    mwc-button ha-svg-icon {
-      margin-left: 8px;
-    }
+      mwc-button ha-svg-icon {
+        margin-left: 8px;
+      }
 
-    .spacer {
-      flex: 1;
-    }
+      .spacer {
+        flex: 1;
+      }
 
-    ha-textfield {
-      width: 100%;
-    }
-  `;
+      ha-textfield {
+        width: 100%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,11 +1,9 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-
 import { getUser } from "home-assistant-js-websocket";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {
@@ -65,94 +63,96 @@ class HcLayout extends LitElement {
     }
   }
 
-  static styles = css`
-    :host {
-      display: flex;
-      min-height: 100%;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-    }
-
-    ha-card {
-      display: flex;
-      width: 100%;
-      max-width: 500px;
-    }
-
-    .layout {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .card-header {
-      color: var(--ha-card-header-color, var(--primary-text-color));
-      font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
-      letter-spacing: -0.012em;
-      line-height: 32px;
-      padding: 24px 16px 16px;
-      display: block;
-      margin: 0;
-    }
-
-    .hero {
-      border-radius: 4px 4px 0 0;
-    }
-    .subtitle {
-      font-size: 14px;
-      color: var(--secondary-text-color);
-      line-height: initial;
-    }
-    .subtitle a {
-      color: var(--secondary-text-color);
-    }
-
-    :host ::slotted(.card-content:not(:first-child)),
-    slot:not(:first-child)::slotted(.card-content) {
-      padding-top: 0px;
-      margin-top: -8px;
-    }
-
-    :host ::slotted(.section-header) {
-      font-weight: 500;
-      padding: 4px 16px;
-      text-transform: uppercase;
-    }
-
-    :host ::slotted(.card-content) {
-      padding: 16px;
-      flex: 1;
-    }
-
-    :host ::slotted(.card-actions) {
-      border-top: 1px solid #e8e8e8;
-      padding: 5px 16px;
-      display: flex;
-    }
-
-    img {
-      width: 100%;
-    }
-
-    .footer {
-      text-align: center;
-      font-size: 12px;
-      padding: 8px 0 24px;
-      color: var(--secondary-text-color);
-    }
-    .footer a {
-      color: var(--secondary-text-color);
-    }
-
-    @media all and (max-width: 500px) {
+  static get styles(): CSSResultGroup {
+    return css`
       :host {
-        justify-content: flex-start;
-        min-height: 90%;
-        margin-bottom: 30px;
+        display: flex;
+        min-height: 100%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
       }
-    }
-  `;
+
+      ha-card {
+        display: flex;
+        width: 100%;
+        max-width: 500px;
+      }
+
+      .layout {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-header {
+        color: var(--ha-card-header-color, var(--primary-text-color));
+        font-family: var(--ha-card-header-font-family, inherit);
+        font-size: var(--ha-card-header-font-size, 24px);
+        letter-spacing: -0.012em;
+        line-height: 32px;
+        padding: 24px 16px 16px;
+        display: block;
+        margin: 0;
+      }
+
+      .hero {
+        border-radius: 4px 4px 0 0;
+      }
+      .subtitle {
+        font-size: 14px;
+        color: var(--secondary-text-color);
+        line-height: initial;
+      }
+      .subtitle a {
+        color: var(--secondary-text-color);
+      }
+
+      :host ::slotted(.card-content:not(:first-child)),
+      slot:not(:first-child)::slotted(.card-content) {
+        padding-top: 0px;
+        margin-top: -8px;
+      }
+
+      :host ::slotted(.section-header) {
+        font-weight: 500;
+        padding: 4px 16px;
+        text-transform: uppercase;
+      }
+
+      :host ::slotted(.card-content) {
+        padding: 16px;
+        flex: 1;
+      }
+
+      :host ::slotted(.card-actions) {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+        display: flex;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      .footer {
+        text-align: center;
+        font-size: 12px;
+        padding: 8px 0 24px;
+        color: var(--secondary-text-color);
+      }
+      .footer a {
+        color: var(--secondary-text-color);
+      }
+
+      @media all and (max-width: 500px) {
+        :host {
+          justify-content: flex-start;
+          min-height: 90%;
+          margin-bottom: 30px;
+        }
+      }
+    `;
+  }
 }
 
 declare global {

cast/src/receiver/demo/cast-demo-entities.ts

@@ -1,5 +1,4 @@
 import type { Entity } from "../../../../src/fake_data/entity";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
 
 export const castDemoEntities: () => Entity[] = () =>

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -1,6 +1,5 @@
 import type { LovelaceCardConfig } from "../../../../src/data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
-
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {

cast/src/receiver/entrypoint.ts

@@ -1,12 +1,10 @@
-import type { HassMessage } from "../../../src/cast/receiver_messages";
-import type { ReceivedMessage } from "./types";
-
-import "../../../src/resources/custom-card-support";
-
-import { CAST_NS } from "../../../src/cast/const";
-import { castContext } from "./cast_context";
 import { framework } from "./cast_framework";
+import { CAST_NS } from "../../../src/cast/const";
+import type { HassMessage } from "../../../src/cast/receiver_messages";
+import "../../../src/resources/custom-card-support";
+import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
+import type { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);

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

@@ -1,17 +1,14 @@
-import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
-import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-
-import "./hc-lovelace";
-
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
 import { mockHistory } from "../../../../demo/src/stubs/history";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HassElement } from "../../../../src/state/hass-element";
+import type { HomeAssistant } from "../../../../src/types";
 import { castDemoEntities } from "../demo/cast-demo-entities";
 import { castDemoLovelace } from "../demo/cast-demo-lovelace";
+import "./hc-lovelace";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {

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

@@ -1,8 +1,7 @@
-import type { HomeAssistant } from "../../../../src/types";
-import type { TemplateResult } from "lit";
-
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
@@ -25,29 +24,31 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static styles = css`
-    :host {
-      display: block;
-      height: 100vh;
-      background-color: #f2f4f9;
-      font-size: 24px;
-    }
-    .container {
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      align-items: center;
-      height: 100%;
-      justify-content: space-evenly;
-    }
-    img {
-      max-width: 80%;
-      object-fit: cover;
-    }
-    .status {
-      color: #1d2126;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+        height: 100vh;
+        background-color: #f2f4f9;
+        font-size: 24px;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        height: 100%;
+        justify-content: space-evenly;
+      }
+      img {
+        max-width: 80%;
+        object-fit: cover;
+      }
+      .status {
+        color: #1d2126;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,17 +1,19 @@
-import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
-import type { Lovelace } from "../../../../src/panels/lovelace/types";
-import type { HomeAssistant } from "../../../../src/types";
-
-import "../../../../src/panels/lovelace/views/hui-view";
-import "../../../../src/panels/lovelace/views/hui-view-background";
-import "../../../../src/panels/lovelace/views/hui-view-container";
-import "./hc-launch-screen";
-
-import { css, html, LitElement, type TemplateResult } from "lit";
+import {
+  css,
+  type CSSResultGroup,
+  html,
+  LitElement,
+  type TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
-
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
+import type { Lovelace } from "../../../../src/panels/lovelace/types";
+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";
 
 (window as any).loadCardHelpers = () =>
   import("../../../../src/panels/lovelace/custom-card-helpers");
@@ -55,9 +57,11 @@ class HcLovelace extends LitElement {
     const background = viewConfig.background || this.lovelaceConfig.background;
 
     return html`
-      <hui-view-container .hass=${this.hass} .theme=${viewConfig.theme}>
-        <hui-view-background .hass=${this.hass} .background=${background}>
-        </hui-view-background>
+      <hui-view-container
+        .hass=${this.hass}
+        .background=${background}
+        .theme=${viewConfig.theme}
+      >
         <hui-view
           .hass=${this.hass}
           .lovelace=${lovelace}
@@ -114,18 +118,20 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static styles = css`
-    hui-view-container {
-      display: flex;
-      position: relative;
-      min-height: 100vh;
-      box-sizing: border-box;
-    }
-    hui-view-container > * {
-      flex: 1 1 100%;
-      max-width: 100%;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      hui-view-container {
+        display: flex;
+        position: relative;
+        min-height: 100vh;
+        box-sizing: border-box;
+      }
+      hui-view {
+        flex: 1 1 100%;
+        max-width: 100%;
+      }
+    `;
+  }
 }
 
 export interface CastViewChanged {

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

@@ -1,3 +1,9 @@
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { createConnection, getAuth } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { CAST_NS } from "../../../../src/cast/const";
 import type {
   ConnectMessage,
   GetStatusMessage,
@@ -9,21 +15,6 @@ import type {
   ReceiverErrorMessage,
   ReceiverStatusMessage,
 } from "../../../../src/cast/sender_messages";
-import type {
-  LegacyLovelaceConfig,
-  LovelaceConfig,
-  LovelaceDashboardStrategyConfig,
-} from "../../../../src/data/lovelace/config/types";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-
-import "./hc-launch-screen";
-
-import { createConnection, getAuth } from "home-assistant-js-websocket";
-import { html } from "lit";
-import { customElement, state } from "lit/decorators";
-
-import { CAST_NS } from "../../../../src/cast/const";
 import { ReceiverErrorCode } from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
@@ -31,13 +22,19 @@ import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
 } from "../../../../src/data/lovelace";
+import type {
+  LegacyLovelaceConfig,
+  LovelaceConfig,
+  LovelaceDashboardStrategyConfig,
+} from "../../../../src/data/lovelace/config/types";
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import { fetchResources } from "../../../../src/data/lovelace/resource";
-import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
-import { checkLovelaceConfig } from "../../../../src/panels/lovelace/common/check-lovelace-config";
 import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
 import { HassElement } from "../../../../src/state/hass-element";
 import { castContext } from "../cast_context";
+import "./hc-launch-screen";
+import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
+import { checkLovelaceConfig } from "../../../../src/panels/lovelace/common/check-lovelace-config";
 
 const DEFAULT_CONFIG: LovelaceDashboardStrategyConfig = {
   strategy: {
@@ -312,7 +309,7 @@ export class HcMain extends HassElement {
               "../../../../src/panels/lovelace/strategies/get-strategy"
             );
             const config = await generateLovelaceDashboardStrategy(
-              rawConfig,
+              rawConfig.strategy,
               this.hass!
             );
             this._handleNewLovelaceConfig(config);
@@ -354,7 +351,10 @@ export class HcMain extends HassElement {
       "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
+      await generateLovelaceDashboardStrategy(
+        DEFAULT_CONFIG.strategy,
+        this.hass!
+      )
     );
   }
 

demo/src/configs/arsaboo/entities.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
   convertEntities({

demo/src/configs/arsaboo/index.ts

@@ -1,5 +1,4 @@
 import type { DemoConfig } from "../types";
-
 import { demoEntitiesArsaboo } from "./entities";
 import { demoLovelaceArsaboo } from "./lovelace";
 import { demoThemeArsaboo } from "./theme";

demo/src/configs/demo-configs.ts

@@ -1,10 +1,9 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
+import { energyEntities } from "../stubs/entities";
 import type { DemoConfig } from "./types";
 
-import { energyEntities } from "../stubs/entities";
-
-export const demoConfigs: (() => Promise<DemoConfig>)[] = [
+export const demoConfigs: Array<() => Promise<DemoConfig>> = [
   () => import("./sections").then((mod) => mod.demoSections),
   () => import("./arsaboo").then((mod) => mod.demoArsaboo),
   () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),

demo/src/configs/jimpower/entities.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
   convertEntities({

demo/src/configs/jimpower/index.ts

@@ -1,5 +1,4 @@
 import type { DemoConfig } from "../types";
-
 import { demoEntitiesJimpower } from "./entities";
 import { demoLovelaceJimpower } from "./lovelace";
 import { demoThemeJimpower } from "./theme";

demo/src/configs/jimpower/lovelace.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import "../../custom-cards/card-modder";
+import type { DemoConfig } from "../types";
 
 export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
   name: "Kingia Castle",

demo/src/configs/kernehed/entities.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
   convertEntities({

demo/src/configs/kernehed/index.ts

@@ -1,5 +1,4 @@
 import type { DemoConfig } from "../types";
-
 import { demoEntitiesKernehed } from "./entities";
 import { demoLovelaceKernehed } from "./lovelace";
 import { demoThemeKernehed } from "./theme";

demo/src/configs/sections/entities.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
   convertEntities({

demo/src/configs/sections/index.ts

@@ -1,5 +1,4 @@
 import type { DemoConfig } from "../types";
-
 import { demoEntitiesSections } from "./entities";
 import { demoLovelaceSections } from "./lovelace";
 

demo/src/configs/sections/lovelace.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { isFrontpageEmbed } from "../../util/is_frontpage";
+import type { DemoConfig } from "../types";
 
 export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant Demo",

demo/src/configs/teachingbirds/entities.ts

@@ -1,6 +1,5 @@
-import type { DemoConfig } from "../types";
-
 import { convertEntities } from "../../../../src/fake_data/entity";
+import type { DemoConfig } from "../types";
 
 export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
   convertEntities({

demo/src/configs/teachingbirds/index.ts

@@ -1,5 +1,4 @@
 import type { DemoConfig } from "../types";
-
 import { demoEntitiesTeachingbirds } from "./entities";
 import { demoLovelaceTeachingbirds } from "./lovelace";
 import { demoThemeTeachingbirds } from "./theme";

demo/src/configs/types.ts

@@ -1,7 +1,7 @@
+import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import type { Entity } from "../../../src/fake_data/entity";
-import type { TemplateResult } from "lit";
 
 export interface DemoConfig {
   index?: number;

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

@@ -1,18 +1,16 @@
+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";
+import { castSendShowDemo } from "../../../src/cast/receiver_messages";
+import "../../../src/components/ha-icon";
 import type {
   CastConfig,
   LovelaceRow,
 } from "../../../src/panels/lovelace/entity-rows/types";
 import type { HomeAssistant } from "../../../src/types";
 
-import "../../../src/components/ha-icon";
-
-import { mdiTelevision } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-
-import { castSendShowDemo } from "../../../src/cast/receiver_messages";
-
 @customElement("cast-demo-row")
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
@@ -69,35 +67,37 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-    }
-    ha-svg-icon {
-      padding: 8px;
-      color: var(--paper-item-icon-color);
-    }
-    .flex {
-      flex: 1;
-      overflow: hidden;
-      margin-left: 16px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    google-cast-launcher {
-      cursor: pointer;
-      display: inline-block;
-      height: 24px;
-      width: 24px;
-    }
-  `;
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      ha-svg-icon {
+        padding: 8px;
+        color: var(--paper-item-icon-color);
+      }
+      .flex {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      google-cast-launcher {
+        cursor: pointer;
+        display: inline-block;
+        height: 24px;
+        width: 24px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,20 +1,17 @@
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-circular-progress";
 import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type {
   Lovelace,
   LovelaceCard,
 } from "../../../src/panels/lovelace/types";
-import type { CSSResultGroup } from "lit";
-
-import "../../../src/components/ha-button";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-spinner";
-
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
   demoConfigs,
   selectedDemoConfig,
@@ -35,7 +32,6 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return this._hidden ? 0 : 2;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   public setConfig(_config: LovelaceCardConfig) {}
 
   protected render() {
@@ -47,7 +43,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-spinner></ha-spinner>`
+              ? html`
+                  <ha-circular-progress indeterminate></ha-circular-progress>
+                `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

demo/src/entrypoint.ts

@@ -1,4 +1,4 @@
-import "./ha-demo";
 import "./util/is_frontpage";
+import "./ha-demo";
 
 import("../../src/resources/ha-style");

demo/src/ha-demo.ts

@@ -1,12 +1,12 @@
-import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../src/types";
-
+// Compat needs to be first import
+import "../../src/resources/compatibility";
 import { customElement } from "lit/decorators";
-
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
+import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
 import { provideHass } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
@@ -16,8 +16,8 @@ import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
-import { mockHistory } from "./stubs/history";
 import { mockIcons } from "./stubs/icons";
+import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
@@ -65,7 +65,6 @@ export class HaDemo extends HomeAssistantAppEl {
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",
-        config_subentry_id: null,
         device_id: "co2signal",
         area_id: null,
         disabled_by: null,
@@ -86,7 +85,6 @@ export class HaDemo extends HomeAssistantAppEl {
       },
       {
         config_entry_id: "co2signal",
-        config_subentry_id: null,
         device_id: "co2signal",
         area_id: null,
         disabled_by: null,

demo/src/stubs/config.ts

@@ -1,10 +1,9 @@
-import type { validateConfig } from "../../../src/data/config";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockConfig = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof validateConfig>("validate_config", () => ({
-    actions: { valid: true, error: null },
-    conditions: { valid: true, error: null },
-    triggers: { valid: true, error: null },
+  hass.mockWS("validate_config", () => ({
+    actions: { valid: true },
+    conditions: { valid: true },
+    triggers: { valid: true },
   }));
 };

demo/src/stubs/config_entries.ts

@@ -1,26 +1,19 @@
-import type { getConfigEntries } from "../../../src/data/config_entries";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS<typeof getConfigEntries>("config_entries/get", () => [
-    {
-      entry_id: "mock-entry-co2signal",
-      domain: "co2signal",
-      title: "Electricity Maps",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      supports_reconfigure: true,
-      supported_subentry_types: {},
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-      num_subentries: 0,
-      error_reason_translation_key: null,
-      error_reason_translation_placeholders: null,
-    },
-  ]);
+  hass.mockWS("config_entries/get", () => ({
+    entry_id: "co2signal",
+    domain: "co2signal",
+    title: "Electricity Maps",
+    source: "user",
+    state: "loaded",
+    supports_options: false,
+    supports_remove_device: false,
+    supports_unload: true,
+    supports_reconfigure: true,
+    pref_disable_new_entities: false,
+    pref_disable_polling: false,
+    disabled_by: null,
+    reason: null,
+  }));
 };

demo/src/stubs/energy.ts

@@ -1,3 +1,4 @@
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import type {
   EnergyInfo,
   EnergyPreferences,
@@ -6,8 +7,6 @@ import type {
 } from "../../../src/data/energy";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-import { format, startOfToday, startOfTomorrow } from "date-fns";
-
 export const mockEnergy = (hass: MockHomeAssistant) => {
   hass.mockWS(
     "energy/get_prefs",

demo/src/stubs/history.ts

@@ -1,6 +1,6 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { HistoryStates } from "../../../src/data/history";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import type { HassEntity } from "home-assistant-js-websocket";
 
 const generateStateHistory = (
   state: HassEntity,
@@ -131,7 +131,6 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
         });
       }, 1);
 
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
     }
   );

demo/src/stubs/icons.ts

@@ -1,7 +1,6 @@
 import type { IconCategory } from "../../../src/data/icons";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
 import { ENTITY_COMPONENT_ICONS } from "../../../src/fake_data/entity_component_icons";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockIcons = (hass: MockHomeAssistant) => {
   hass.mockWS(

demo/src/stubs/lovelace.ts

@@ -1,14 +1,12 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-import "../custom-cards/cast-demo-row";
-import "../custom-cards/ha-demo-card";
-
 import {
   selectedDemoConfig,
   selectedDemoConfigIndex,
   setDemoConfig,
 } from "../configs/demo-configs";
+import "../custom-cards/cast-demo-row";
+import "../custom-cards/ha-demo-card";
 import { mapEntities } from "./entities";
 
 export const mockLovelace = (
@@ -45,7 +43,7 @@ customElements.whenDefined("hui-root").then(() => {
       const index = (ev as CustomEvent).detail.index;
       try {
         await setDemoConfig(this.hass, this.lovelace!, index);
-      } catch (_err: any) {
+      } catch (err: any) {
         setDemoConfig(this.hass, this.lovelace!, selectedDemoConfigIndex);
         alert("Failed to switch config :-(");
       }

demo/src/stubs/persistent_notification.ts

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

demo/src/stubs/recorder.ts

@@ -1,10 +1,3 @@
-import type {
-  Statistics,
-  StatisticsMetaData,
-  StatisticValue,
-} from "../../../src/data/recorder";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
 import {
   addDays,
   addHours,
@@ -12,11 +5,17 @@ import {
   differenceInHours,
   endOfDay,
 } from "date-fns";
+import type {
+  Statistics,
+  StatisticsMetaData,
+  StatisticValue,
+} from "../../../src/data/recorder";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const generateMeanStatistics = (
   start: Date,
   end: Date,
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
@@ -53,7 +52,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
   start: Date,
   end: Date,
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
@@ -90,7 +89,7 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
   start: Date,
   end: Date,
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/default-param-last
   _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,

demo/src/stubs/template.ts

@@ -11,7 +11,6 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       result: msg.template,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
 };

demo/src/stubs/todo.ts

@@ -1,7 +1,6 @@
 import type { TodoItem } from "../../../src/data/todo";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
 import { TodoItemStatus } from "../../../src/data/todo";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTodo = (hass: MockHomeAssistant) => {
   hass.mockWS("todo/item/list", () => ({
@@ -23,6 +22,5 @@ export const mockTodo = (hass: MockHomeAssistant) => {
       },
     ] as TodoItem[],
   }));
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };

eslint.config.mjs

@@ -1,18 +1,11 @@
-// @ts-check
 /* eslint-disable import/no-extraneous-dependencies */
-
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-
-import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
-import eslintConfigPrettier from "eslint-config-prettier";
-import { configs as litConfigs } from "eslint-plugin-lit";
-import perfectionist from "eslint-plugin-perfectionist";
-import unusedImports from "eslint-plugin-unused-imports";
-import { configs as wcConfigs } from "eslint-plugin-wc";
-import globals from "globals";
-import tseslint from "typescript-eslint";
+import { FlatCompat } from "@eslint/eslintrc";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -22,18 +15,19 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 });
 
-export default tseslint.config(
-  ...compat.extends("airbnb-base", "plugin:lit-a11y/recommended"),
-  eslintConfigPrettier,
-  litConfigs["flat/all"],
-  tseslint.configs.recommended,
-  tseslint.configs.strict,
-  tseslint.configs.stylistic,
-  wcConfigs["flat/recommended"],
+export default [
+  ...compat.extends(
+    "airbnb-base",
+    "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:wc/recommended",
+    "plugin:lit/all",
+    "plugin:lit-a11y/recommended",
+    "prettier"
+  ),
   {
     plugins: {
       "unused-imports": unusedImports,
-      perfectionist,
     },
 
     languageOptions: {
@@ -48,7 +42,7 @@ export default tseslint.config(
         Polymer: true,
       },
 
-      parser: tseslint.parser,
+      parser: tsParser,
       ecmaVersion: 2020,
       sourceType: "module",
 
@@ -56,6 +50,8 @@ export default tseslint.config(
         ecmaFeatures: {
           modules: true,
         },
+
+        project: "./tsconfig.json",
       },
     },
 
@@ -152,15 +148,15 @@ export default tseslint.config(
         },
       ],
 
-      "@typescript-eslint/no-unused-vars": [
+      "@typescript-eslint/no-unused-vars": "off",
+
+      "unused-imports/no-unused-vars": [
         "error",
         {
-          args: "all",
-          argsIgnorePattern: "^_",
-          caughtErrors: "all",
-          caughtErrorsIgnorePattern: "^_",
-          destructuredArrayIgnorePattern: "^_",
+          vars: "all",
           varsIgnorePattern: "^_",
+          args: "after-used",
+          argsIgnorePattern: "^_",
           ignoreRestSiblings: true,
         },
       ],
@@ -178,39 +174,6 @@ export default tseslint.config(
       "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",
-
-      "import/order": "off",
-      "perfectionist/sort-imports": [
-        "error",
-        {
-          type: "alphabetical",
-          fallbackSort: { type: "natural" },
-          order: "asc",
-          sortSideEffects: true,
-          groups: [
-            "type",
-            "style",
-            "side-effect-style",
-            "side-effect",
-            "builtin",
-            "external",
-            "internal",
-            ["parent", "sibling", "index"],
-            "object",
-            "unknown",
-          ],
-        },
-      ],
     },
-  }
-);
+  },
+];

gallery/eslint.config.mjs

@@ -1,10 +1,10 @@
-// @ts-check
-
-import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
-export default tseslint.config(...rootConfig, {
-  rules: {
-    "no-console": "off",
+export default [
+  ...rootConfig,
+  {
+    rules: {
+      "no-console": "off",
+    },
   },
-});
+];

gallery/public/images/select_box/card.svg

@@ -1,10 +0,0 @@
-<svg width="94" height="64" viewBox="0 0 94 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="94" height="64" rx="8" fill="white"/>
-<rect x="0.5" y="0.5" width="93" height="63" rx="7.5" stroke="black" stroke-opacity="0.12"/>
-<path d="M8 14C8 10.6863 10.6863 8 14 8H33C36.3137 8 39 10.6863 39 14C39 17.3137 36.3137 20 33 20H14C10.6863 20 8 17.3137 8 14Z" fill="black" fill-opacity="0.32"/>
-<path d="M8 27C8 25.3431 9.34315 24 11 24H31C32.6569 24 34 25.3431 34 27V29C34 30.6569 32.6569 32 31 32H11C9.34315 32 8 30.6569 8 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M38 27C38 25.3431 39.3431 24 41 24H83C84.6569 24 86 25.3431 86 27V29C86 30.6569 84.6569 32 83 32H41C39.3431 32 38 30.6569 38 29V27Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 39C8 37.3431 9.34315 36 11 36H53C54.6569 36 56 37.3431 56 39V41C56 42.6569 54.6569 44 53 44H11C9.34315 44 8 42.6569 8 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M60 39C60 37.3431 61.3431 36 63 36H83C84.6569 36 86 37.3431 86 39V41C86 42.6569 84.6569 44 83 44H63C61.3431 44 60 42.6569 60 41V39Z" fill="black" fill-opacity="0.12"/>
-<path d="M8 51C8 49.3431 9.34315 48 11 48H31C32.6569 48 34 49.3431 34 51V53C34 54.6569 32.6569 56 31 56H11C9.34315 56 8 54.6569 8 53V51Z" fill="black" fill-opacity="0.12"/>
-</svg>

gallery/public/images/select_box/text_only.svg

@@ -1,7 +0,0 @@
-<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11C0 9.34315 1.34315 8 3 8H23C24.6569 8 26 9.34315 26 11V13C26 14.6569 24.6569 16 23 16H3C1.34315 16 0 14.6569 0 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M30 11C30 9.34315 31.3431 8 33 8H91C92.6569 8 94 9.34315 94 11V13C94 14.6569 92.6569 16 91 16H33C31.3431 16 30 14.6569 30 13V11Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 23C0 21.3431 1.34315 20 3 20H61C62.6569 20 64 21.3431 64 23V25C64 26.6569 62.6569 28 61 28H3C1.34315 28 0 26.6569 0 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M68 23C68 21.3431 69.3431 20 71 20H91C92.6569 20 94 21.3431 94 23V25C94 26.6569 92.6569 28 91 28H71C69.3431 28 68 26.6569 68 25V23Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 35C0 33.3431 1.34315 32 3 32H23C24.6569 32 26 33.3431 26 35V37C26 38.6569 24.6569 40 23 40H3C1.34315 40 0 38.6569 0 37V35Z" fill="black" fill-opacity="0.12"/>
-</svg>

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

@@ -1,14 +1,11 @@
+import "@material/mwc-button/mwc-button";
 import type { Button } from "@material/mwc-button";
 import type { TemplateResult } from "lit";
-
-import "../../../src/components/ha-card";
-import "@material/mwc-button/mwc-button";
-
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {

gallery/src/components/demo-card.ts

@@ -1,13 +1,11 @@
-import type { HuiCard } from "../../../src/panels/lovelace/cards/hui-card";
-import type { HomeAssistant } from "../../../src/types";
-import type { PropertyValueMap } from "lit";
-
-import "../../../src/panels/lovelace/cards/hui-card";
-
 import { load } from "js-yaml";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import "../../../src/panels/lovelace/cards/hui-card";
+import type { HuiCard } from "../../../src/panels/lovelace/cards/hui-card";
+import type { HomeAssistant } from "../../../src/types";
 
 export interface DemoCardConfig {
   heading: string;

gallery/src/components/demo-cards.ts

@@ -1,15 +1,12 @@
-import type { HomeAssistant } from "../../../src/types";
-import type { DemoCardConfig } from "./demo-card";
-
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import "../ha-demo-options";
-import "./demo-card";
-
 import { html, css, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import type { HomeAssistant } from "../../../src/types";
+import "./demo-card";
+import type { DemoCardConfig } from "./demo-card";
+import "../ha-demo-options";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {

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

@@ -1,12 +1,10 @@
-import type { HomeAssistant } from "../../../src/types";
-
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
-
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../../src/types";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {

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

@@ -1,14 +1,11 @@
-import type { HomeAssistant } from "../../../src/types";
-
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import "../ha-demo-options";
-import "./demo-more-info";
-
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import type { HomeAssistant } from "../../../src/types";
+import "../ha-demo-options";
+import "./demo-more-info";
 
 @customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {

gallery/src/components/page-description.ts

@@ -1,7 +1,6 @@
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-
 import { HaMarkdown } from "../../../src/components/ha-markdown";
 import { PAGES } from "../../build/import-pages";
 

gallery/src/data/traces/types.ts

@@ -1,5 +1,5 @@
-import type { LogbookEntry } from "../../../../src/data/logbook";
 import type { AutomationTraceExtended } from "../../../../src/data/trace";
+import type { LogbookEntry } from "../../../../src/data/logbook";
 
 export interface DemoTrace {
   trace: AutomationTraceExtended;

gallery/src/ha-demo-options.ts

@@ -1,13 +1,11 @@
-import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
-import "./components/page-description";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-
+import "../../src/components/ha-icon-button";
+import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
+import "./components/page-description";
 
 @customElement("ha-demo-options")
 class HaDemoOptions extends LitElement {

gallery/src/ha-gallery.ts

@@ -1,19 +1,16 @@
-import type { PropertyValues } from "lit";
-
-import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
-import "./components/page-description";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-
 import { mdiMenu } from "@mdi/js";
+import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, query, state } from "lit/decorators";
-
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
+import "../../src/components/ha-icon-button";
+import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
+import "./components/page-description";
 
 const GITHUB_DEMO_URL =
   "https://github.com/home-assistant/frontend/blob/dev/gallery/src/pages/";

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

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

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

@@ -1,16 +1,13 @@
-import type { Action } from "../../../../src/data/script";
-import type { HomeAssistant } from "../../../../src/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-
 import { dump } from "js-yaml";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import type { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("scene", "kitchen_morning", "scening", {
@@ -180,24 +177,26 @@ export class DemoAutomationDescribeAction extends LitElement {
     this._action = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .action {
-      padding: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    span {
-      margin-right: 16px;
-    }
-    ha-yaml-editor {
-      width: 50%;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .action {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+      ha-yaml-editor {
+        width: 50%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,16 +1,13 @@
-import type { Condition } from "../../../../src/data/automation";
-import type { HomeAssistant } from "../../../../src/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-
 import { dump } from "js-yaml";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import type { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("light", "kitchen", "on", {
@@ -101,24 +98,26 @@ export class DemoAutomationDescribeCondition extends LitElement {
     this._condition = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .condition {
-      padding: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    span {
-      margin-right: 16px;
-    }
-    ha-yaml-editor {
-      width: 50%;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+      ha-yaml-editor {
+        width: 50%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,16 +1,13 @@
-import type { Trigger } from "../../../../src/data/automation";
-import type { HomeAssistant } from "../../../../src/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-yaml-editor";
-
 import { dump } from "js-yaml";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import type { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("light", "kitchen", "on", {
@@ -124,24 +121,26 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .trigger {
-      padding: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    span {
-      margin-right: 16px;
-    }
-    ha-yaml-editor {
-      width: 50%;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .trigger {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+      ha-yaml-editor {
+        width: 50%;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,32 +1,29 @@
-import type { Action } from "../../../../src/data/script";
-import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
-
-import "../../../../src/panels/config/automation/action/ha-automation-action";
-import "../../components/demo-black-white-row";
-
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
-
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import "../../../../src/panels/config/automation/action/ha-automation-action";
 import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose";
-import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
 import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay";
 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 { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
-import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
-import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
-import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
 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";
+import type { Action } from "../../../../src/data/script";
+import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
+import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
+import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },

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

@@ -1,29 +1,26 @@
-import type { ConditionWithShorthand } from "../../../../src/data/automation";
-import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
-
-import "../../../../src/panels/config/automation/condition/ha-automation-condition";
-import "../../components/demo-black-white-row";
-
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
-
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
-import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not";
 import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
-import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or";
 import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
 import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
 import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
 import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
+import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and";
+import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or";
+import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not";
 
 const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
   {

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

@@ -1,38 +1,35 @@
-import type { Trigger } from "../../../../src/data/automation";
-import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
-
-import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import "../../components/demo-black-white-row";
-
 import { LitElement, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
-
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockAuth } from "../../../../demo/src/stubs/auth";
-import { mockConfig } from "../../../../demo/src/stubs/config";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { mockTags } from "../../../../demo/src/stubs/tags";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
-import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
-import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { mockConfig } from "../../../../demo/src/stubs/config";
+import { mockTags } from "../../../../demo/src/stubs/tags";
+import { mockAuth } from "../../../../demo/src/stubs/auth";
+import type { Trigger } from "../../../../src/data/automation";
 import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
+import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
 import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
-import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
-import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
-import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
-import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
 import { HaSunTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
 import { HaTagTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
 import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
 import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
 import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
 import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
+import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
+import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
+import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
+import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
+import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
+import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
+import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
 
 const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
   {

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

@@ -1,16 +1,13 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { HomeAssistant } from "../../../../src/types";
-import type { DemoTrace } from "../../data/traces/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-trace-timeline";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
+import type { DemoTrace } from "../../data/traces/types";
 
 const traces: DemoTrace[] = [
   mockDemoTrace({ state: "running" }),
@@ -61,20 +58,22 @@ export class DemoAutomationTraceTimeline extends LitElement {
     hass.updateTranslations("config", "en");
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px;
-    }
-    .card-content {
-      display: flex;
-    }
-    button {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
 }
 
 declare global {

gallery/src/pages/automation/trace.ts

@@ -1,18 +1,15 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { HomeAssistant } from "../../../../src/types";
-import type { DemoTrace } from "../../data/traces/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-script-graph";
-import "../../../../src/components/trace/hat-trace-timeline";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/trace/hat-script-graph";
+import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 import { basicTrace } from "../../data/traces/basic_trace";
 import { motionLightTrace } from "../../data/traces/motion-light-trace";
+import type { DemoTrace } from "../../data/traces/types";
 
 const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 
@@ -71,26 +68,28 @@ export class DemoAutomationTrace extends LitElement {
     this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px;
-    }
-    .card-content {
-      display: flex;
-    }
-    .card-content > * {
-      margin-right: 16px;
-    }
-    .card-content > *:last-child {
-      margin-right: 0;
-    }
-    button {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      .card-content > * {
+        margin-right: 16px;
+      }
+      .card-content > *:last-child {
+        margin-right: 0;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
 }
 
 declare global {

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

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

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

@@ -1,14 +1,11 @@
+import "@material/mwc-button/mwc-button";
 import type { TemplateResult } from "lit";
-
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-logo-svg";
-import "@material/mwc-button/mwc-button";
-
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 
 const alerts: {
   title?: string;
@@ -180,44 +177,46 @@ export class DemoHaAlert extends LitElement {
     );
   }
 
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    ha-alert {
-      display: block;
-      margin: 24px 0;
-    }
-    .condition {
-      padding: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .image {
-      display: inline-flex;
-      height: 100%;
-      align-items: center;
-    }
-    img {
-      max-height: 24px;
-      width: 24px;
-    }
-    mwc-button {
-      --mdc-theme-primary: var(--primary-text-color);
-    }
-  `;
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
+      ha-card {
+        margin: 24px auto;
+      }
+      ha-alert {
+        display: block;
+        margin: 24px 0;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .image {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+      }
+      img {
+        max-height: 24px;
+        width: 24px;
+      }
+      mwc-button {
+        --mdc-theme-primary: var(--primary-text-color);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,11 +1,9 @@
 import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
 
 const bars: {
   min?: number;
@@ -65,18 +63,20 @@ export class DemoHaBar extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .warning {
-      --ha-bar-primary-color: var(--warning-color);
-    }
-    .error {
-      --ha-bar-primary-color: var(--error-color);
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .warning {
+        --ha-bar-primary-color: var(--warning-color);
+      }
+      .error {
+        --ha-bar-primary-color: var(--error-color);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,15 +1,12 @@
 import type { TemplateResult } from "lit";
-
-import "../../../../src/components/chips/ha-assist-chip";
-import "../../../../src/components/chips/ha-chip-set";
-import "../../../../src/components/chips/ha-filter-chip";
-import "../../../../src/components/chips/ha-input-chip";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-svg-icon";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/chips/ha-chip-set";
+import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/chips/ha-input-chip";
+import "../../../../src/components/chips/ha-filter-chip";
+import "../../../../src/components/ha-svg-icon";
 import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 
 const chips: {
@@ -106,17 +103,19 @@ export class DemoHaChips extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,4 +1,4 @@
 ---
-title: Spinner
+title: Circular Progress
 subtitle: Can be used to indicate an ongoing task.
 ---

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

@@ -0,0 +1,65 @@
+import type { TemplateResult } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-bar";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-circular-progress";
+import "@material/web/progress/circular-progress";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-circular-progress")
+export class DemoHaCircularProgress extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic circular progress">
+        <div class="card-content">
+          <ha-circular-progress indeterminate></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Different circular progress sizes">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            size="tiny"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="small"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="medium"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="large"
+          ></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Circular progress with an aria-label">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            aria-label="Doing something..."
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            .ariaLabel=${"Doing something..."}
+          ></ha-circular-progress></div
+      ></ha-card>`;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-circular-progress": DemoHaCircularProgress;
+  }
+}

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

@@ -1,27 +1,25 @@
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-button";
-import "../../../../src/components/ha-control-button-group";
-import "../../../../src/components/ha-svg-icon";
-
 import {
   mdiFanSpeed1,
   mdiFanSpeed2,
   mdiFanSpeed3,
   mdiLightbulb,
 } from "@mdi/js";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-control-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-control-button-group";
 
-interface Button {
+type Button = {
   label: string;
   icon?: string;
   class?: string;
   disabled?: boolean;
-}
+};
 
 const buttons: Button[] = [
   {
@@ -37,10 +35,10 @@ const buttons: Button[] = [
   },
 ];
 
-interface ButtonGroup {
+type ButtonGroup = {
   vertical?: boolean;
   class?: string;
-}
+};
 
 const buttonGroups: ButtonGroup[] = [
   {},
@@ -139,51 +137,53 @@ export class DemoHaBarButton extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-    }
-    .custom {
-      --control-button-icon-color: var(--primary-color);
-      --control-button-background-color: var(--primary-color);
-      --control-button-background-opacity: 0.2;
-      --control-button-border-radius: 18px;
-      height: 100px;
-      width: 100px;
-    }
-    .custom-group {
-      --control-button-group-thickness: 100px;
-      --control-button-group-border-radius: 36px;
-      --control-button-group-spacing: 20px;
-    }
-    .custom-group ha-control-button {
-      --control-button-border-radius: 18px;
-      --mdc-icon-size: 32px;
-    }
-    .vertical-buttons {
-      height: 300px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    p.title {
-      margin-bottom: 12px;
-    }
-    .vertical-switches > *:not(:last-child) {
-      margin-right: 4px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --control-button-icon-color: var(--primary-color);
+        --control-button-background-color: var(--primary-color);
+        --control-button-background-opacity: 0.2;
+        --control-button-border-radius: 18px;
+        height: 100px;
+        width: 100px;
+      }
+      .custom-group {
+        --control-button-group-thickness: 100px;
+        --control-button-group-border-radius: 36px;
+        --control-button-group-spacing: 20px;
+      }
+      .custom-group ha-control-button {
+        --control-button-border-radius: 18px;
+        --mdc-icon-size: 32px;
+      }
+      .vertical-buttons {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-switches > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,12 +1,10 @@
 import type { TemplateResult } from "lit";
-
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-circular-slider";
 import "../../../../src/components/ha-slider";
 
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-
 @customElement("demo-components-ha-control-circular-slider")
 export class DemoHaCircularSlider extends LitElement {
   @state()
@@ -135,37 +133,39 @@ export class DemoHaCircularSlider extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    p.title {
-      margin-bottom: 12px;
-    }
-    ha-control-circular-slider {
-      --control-circular-slider-color: #ff9800;
-    }
-    ha-control-circular-slider[inverted] {
-      --control-circular-slider-color: #2196f3;
-    }
-    ha-control-circular-slider[dual] {
-      --control-circular-slider-high-color: #2196f3;
-      --control-circular-slider-low-color: #ff9800;
-    }
-    .field {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      ha-control-circular-slider {
+        --control-circular-slider-color: #ff9800;
+      }
+      ha-control-circular-slider[inverted] {
+        --control-circular-slider-color: #2196f3;
+      }
+      ha-control-circular-slider[dual] {
+        --control-circular-slider-high-color: #2196f3;
+        --control-circular-slider-low-color: #ff9800;
+      }
+      .field {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,12 +1,10 @@
 import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-number-buttons";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-number-buttons";
 import { repeat } from "lit/directives/repeat";
+import { ifDefined } from "lit/directives/if-defined";
 
 const buttons: {
   id: string;
@@ -75,30 +73,32 @@ export class DemoHarControlNumberButtons extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-    }
-    .custom {
-      color: #2196f3;
-      --control-number-buttons-color: #2196f3;
-      --control-number-buttons-background-color: #2196f3;
-      --control-number-buttons-background-opacity: 0.1;
-      --control-number-buttons-thickness: 100px;
-      --control-number-buttons-border-radius: 36px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        color: #2196f3;
+        --control-number-buttons-color: #2196f3;
+        --control-number-buttons-background-color: #2196f3;
+        --control-number-buttons-background-opacity: 0.1;
+        --control-number-buttons-thickness: 100px;
+        --control-number-buttons-border-radius: 36px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,28 +1,26 @@
+import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
 import type { TemplateResult } from "lit";
-
+import { LitElement, css, html, nothing } from "lit";
+import { customElement } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select-menu";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 
-import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-
-interface SelectMenuOptions {
+type SelectMenuOptions = {
   label: string;
   value: string;
   icon?: string;
-}
+};
 
-interface SelectMenu {
+type SelectMenu = {
   label: string;
   icon: string;
   class?: string;
   disabled?: boolean;
   options: SelectMenuOptions[];
-}
+};
 
 const selects: SelectMenu[] = [
   {
@@ -114,30 +112,32 @@ export class DemoHaControlSelectMenu extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-    }
-    .custom {
-      --control-button-icon-color: var(--primary-color);
-      --control-button-background-color: var(--primary-color);
-      --control-button-background-opacity: 0.2;
-      --control-button-border-radius: 18px;
-      height: 100px;
-      width: 100px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --control-button-icon-color: var(--primary-color);
+        --control-button-background-color: var(--primary-color);
+        --control-button-background-opacity: 0.2;
+        --control-button-border-radius: 18px;
+        height: 100px;
+        width: 100px;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,14 +1,12 @@
-import type { ControlSelectOption } from "../../../../src/components/ha-control-select";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-
 import { mdiFanOff, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { ControlSelectOption } from "../../../../src/components/ha-control-select";
 
 const fullOptions: ControlSelectOption[] = [
   {
@@ -170,40 +168,42 @@ export class DemoHaControlSelect extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-    }
-    .custom {
-      --mdc-icon-size: 24px;
-      --control-select-color: var(--state-fan-active-color);
-      --control-select-thickness: 130px;
-      --control-select-border-radius: 36px;
-    }
-    .vertical-selects {
-      height: 300px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-    p.title {
-      margin-bottom: 12px;
-    }
-    .vertical-selects > *:not(:last-child) {
-      margin-right: 4px;
-    }
-  `;
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --mdc-icon-size: 24px;
+        --control-select-color: var(--state-fan-active-color);
+        --control-select-thickness: 130px;
+        --control-select-border-radius: 36px;
+      }
+      .vertical-selects {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-selects > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
 }
 
 declare global {