move default dashboard setting to user settings

fix(tooltip): fix tooltip positioning in ha-sidebar for not first listbox

.devcontainer/devcontainer.json

@@ -21,7 +21,8 @@
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
         "github.vscode-pull-request-github",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
+        "yeion7.styled-global-variables-autocomplete"
       ],
       "settings": {
         "files.eol": "\n",

.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.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -41,9 +41,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=cast/dist --alias dev
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -62,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -77,9 +76,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=cast/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.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.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,9 +42,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=demo/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -63,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,9 +77,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=demo/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.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.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -34,9 +34,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=gallery/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.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.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -39,13 +39,14 @@ jobs:
 
       - name: Deploy preview to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}"
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+            --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
         run: |
-          echo "${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}" >> "$GITHUB_STEP_SUMMARY"
+          NETLIFY_LIVE_URL=$(jq -r '.deploy_url' deploy_output.json)
+          echo "$NETLIFY_LIVE_URL" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/nightly.yaml

@@ -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.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.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@v3.0.0
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.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.2.2
         with:
           files: |
             dist/*.whl
@@ -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.4.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.2.2
         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.4.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.2.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.husky/pre-commit

@@ -1 +1 @@
-yarn run lint-staged --relative --shell "/bin/bash"
+yarn run lint-staged --relative

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "runem.lit-plugin",
     "github.vscode-pull-request-github",
     "eamodio.gitlens",
-    "vitest.explorer"
+    "vitest.explorer",
+    "yeion7.styled-global-variables-autocomplete"
   ]
 }

.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch

@@ -0,0 +1,22 @@
+diff --git a/mwc-formfield-base.js b/mwc-formfield-base.js
+index 7b763326d7d51835ad52646bfbc80fe21989abd3..f2baa8224e6d03df1fdb0b9fd03f5c6d77fc8747 100644
+--- a/mwc-formfield-base.js
++++ b/mwc-formfield-base.js
+@@ -9,7 +9,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
+ import { FormElement } from '@material/mwc-base/form-element.js';
+ import { observer } from '@material/mwc-base/observer.js';
+ import { html } from 'lit';
+-import { property, query, queryAssignedNodes } from 'lit/decorators.js';
++import { property, query, queryAssignedElements } from 'lit/decorators.js';
+ import { classMap } from 'lit/directives/class-map.js';
+ export class FormfieldBase extends BaseElement {
+     constructor() {
+@@ -96,7 +96,7 @@ __decorate([
+     query('.mdc-form-field')
+ ], FormfieldBase.prototype, "mdcRoot", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '*')
++    queryAssignedElements({ slot: "", flatten: true, selector: "*" })
+ ], FormfieldBase.prototype, "slottedInputs", void 0);
+ __decorate([
+     query('label')

.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch

@@ -0,0 +1,26 @@
+diff --git a/mwc-list-base.js b/mwc-list-base.js
+index 1ba95b6a01dcecea4d85b5cbbbcc3dfb04c40d5f..dced13fdb7929c490d6661b1bbe7e9f96dcd2285 100644
+--- a/mwc-list-base.js
++++ b/mwc-list-base.js
+@@ -11,7 +11,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
+ import { observer } from '@material/mwc-base/observer.js';
+ import { deepActiveElementPath, doesElementContainFocus, isNodeElement } from '@material/mwc-base/utils.js';
+ import { html } from 'lit';
+-import { property, query, queryAssignedNodes } from 'lit/decorators.js';
++import { property, query, queryAssignedElements } from 'lit/decorators.js';
+ import { ifDefined } from 'lit/directives/if-defined.js';
+ import MDCListFoundation, { isIndexSet } from './mwc-list-foundation.js';
+ export { createSetFromIndex, isEventMulti, isIndexSet } from './mwc-list-foundation.js';
+@@ -425,10 +425,10 @@ __decorate([
+     query('.mdc-deprecated-list')
+ ], ListBase.prototype, "mdcRoot", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '*')
++    queryAssignedElements({ flatten: true, selector: "*" })
+ ], ListBase.prototype, "assignedElements", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '[tabindex="0"]')
++    queryAssignedElements({ flatten: true, selector: '[tabindex="0"]' })
+ ], ListBase.prototype, "tabbableElements", void 0);
+ __decorate([
+     property({ type: Boolean }),

.yarn/patches/@polymer/polymer/pr-5569.patch

@@ -1,34 +0,0 @@
-diff --git a/lib/legacy/class.js b/lib/legacy/class.js
-index aee2511be1cd9bf900ee552bc98190c1631c57c0..f2f499d68bf52034cac9c28307c99e8ce6b8417d 100644
---- a/lib/legacy/class.js
-+++ b/lib/legacy/class.js
-@@ -304,17 +304,23 @@ function GenerateClassFromInfo(info, Base, behaviors) {
-       // only proceed if the generated class' prototype has not been registered.
-       const generatedProto = PolymerGenerated.prototype;
-       if (!generatedProto.hasOwnProperty(JSCompiler_renameProperty('__hasRegisterFinished', generatedProto))) {
--        generatedProto.__hasRegisterFinished = true;
-+        // make sure legacy lifecycle is called on the *element*'s prototype
-+        // and not the generated class prototype; if the element has been
-+        // extended, these are *not* the same.
-+        const proto = Object.getPrototypeOf(this);
-+        // Only set flag when generated prototype itself is registered,
-+        // as this element may be extended from, and needs to run `registered`
-+        // on all behaviors on the subclass as well.
-+        if (proto === generatedProto) {
-+          generatedProto.__hasRegisterFinished = true;
-+        }
-         // ensure superclass is registered first.
-         super._registered();
-         // copy properties onto the generated class lazily if we're optimizing,
--        if (legacyOptimizations) {
-+        if (legacyOptimizations && !Object.hasOwnProperty(generatedProto, '__hasCopiedProperties')) {
-+          generatedProto.__hasCopiedProperties = true;
-           copyPropertiesToProto(generatedProto);
-         }
--        // make sure legacy lifecycle is called on the *element*'s prototype
--        // and not the generated class prototype; if the element has been
--        // extended, these are *not* the same.
--        const proto = Object.getPrototypeOf(this);
-         let list = lifecycle.beforeRegister;
-         if (list) {
-           for (let i=0; i < list.length; i++) {

.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch

@@ -1,18 +0,0 @@
-diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
-index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
---- a/dist/hls.light.mjs
-+++ b/dist/hls.light.mjs
-@@ -20523,9 +20523,9 @@ class Hls {
- }
- Hls.defaultConfig = void 0;
- 
--var KeySystemFormats = empty.KeySystemFormats;
--var KeySystems = empty.KeySystems;
--var SubtitleStreamController = empty.SubtitleStreamController;
--var TimelineController = empty.TimelineController;
-+var KeySystemFormats = empty;
-+var KeySystems = empty;
-+var SubtitleStreamController = empty;
-+var TimelineController = empty;
- export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
- //# sourceMappingURL=hls.light.mjs.map

.yarnrc.yml

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

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

@@ -2,7 +2,7 @@ import defineProvider from "@babel/helper-define-polyfill-provider";
 import { join } from "node:path";
 import paths from "../paths.cjs";
 
-const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
+const POLYFILL_DIR = join(paths.root_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const polyfillSupport = {

build-scripts/bundle.cjs

@@ -20,22 +20,16 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
-    // Contains all color definitions for all material color sets.
-    // We don't use it
-    require.resolve("@polymer/paper-styles/color.js"),
-    require.resolve("@polymer/paper-styles/default-theme.js"),
-    // Loads stuff from a CDN
-    require.resolve("@polymer/font-roboto/roboto.js"),
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+        path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+        path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 
@@ -50,7 +44,8 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __HASS_URL__: `\`${
     "HASS_URL" in process.env
       ? process.env.HASS_URL
-      : "${location.protocol}//${location.host}"
+      : // eslint-disable-next-line no-template-curly-in-string
+        "${location.protocol}//${location.host}"
   }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
@@ -78,6 +73,19 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   sourceMap: !isTestBuild,
 });
 
+/** @type {import('@rspack/core').SwcLoaderOptions} */
+module.exports.swcOptions = () => ({
+  jsc: {
+    loose: true,
+    externalHelpers: true,
+    target: "ES2021",
+    parser: {
+      syntax: "typescript",
+      decorators: true,
+    },
+  },
+});
+
 module.exports.babelOptions = ({
   latestBuild,
   isProdBuild,
@@ -102,7 +110,6 @@ module.exports.babelOptions = ({
         shippedProposals: true,
       },
     ],
-    "@babel/preset-typescript",
   ],
   plugins: [
     [
@@ -139,12 +146,6 @@ module.exports.babelOptions = ({
       "@babel/plugin-transform-runtime",
       { version: dependencies["@babel/runtime"] },
     ],
-    // Transpile decorators (still in TC39 process)
-    // Modern browsers support class fields and private methods, but transform is required with the older decorator version dictated by Lit
-    [
-      "@babel/plugin-proposal-decorators",
-      { version: "2018-09", decoratorsBeforeExport: true },
-    ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",
   ].filter(Boolean),
@@ -164,7 +165,7 @@ module.exports.babelOptions = ({
         ],
       ],
       exclude: [
-        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        path.join(paths.root_dir, "src/resources/polyfills"),
         ...[
           "@formatjs/(?:ecma402-abstract|intl-\\w+)",
           "@lit-labs/virtualizer/polyfills",
@@ -182,6 +183,7 @@ module.exports.babelOptions = ({
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
+        "@shoelace-style",
         "@?lit(?:-labs|-element|-html)?",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },

build-scripts/env.cjs

@@ -21,7 +21,7 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
+      .readFileSync(path.resolve(paths.root_dir, "pyproject.toml"), "utf8")
       .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
     if (!version) {
       throw Error("Version not found");

build-scripts/gulp/entry-html.js

@@ -169,14 +169,14 @@ const APP_PAGE_ENTRIES = {
 
 gulp.task(
   "gen-pages-app-dev",
-  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.root_dir, paths.app_output_root)
 );
 
 gulp.task(
   "gen-pages-app-prod",
   genPagesProdTask(
     APP_PAGE_ENTRIES,
-    paths.polymer_dir,
+    paths.root_dir,
     paths.app_output_root,
     paths.app_output_latest,
     paths.app_output_es5

build-scripts/gulp/gather-static.js

@@ -6,8 +6,8 @@ import path from "path";
 import paths from "../paths.cjs";
 
 const npmPath = (...parts) =>
-  path.resolve(paths.polymer_dir, "node_modules", ...parts);
-const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
+  path.resolve(paths.root_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.root_dir, ...parts);
 
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));

build-scripts/gulp/locale-data.js

@@ -4,7 +4,7 @@ import gulp from "gulp";
 import { join, resolve } from "node:path";
 import paths from "../paths.cjs";
 
-const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
+const formatjsDir = join(paths.root_dir, "node_modules", "@formatjs");
 const outDir = join(paths.build_dir, "locale-data");
 
 const INTL_POLYFILLS = {

build-scripts/list-plugins-and-polyfills.js

@@ -16,6 +16,7 @@ const detailsClose = "</details>\n";
 
 const dummyAPI = {
   version: babelVersion,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   assertVersion: () => {},
   caller: (callback) =>
     callback({

build-scripts/paths.cjs

@@ -1,7 +1,7 @@
 const path = require("path");
 
 module.exports = {
-  polymer_dir: path.resolve(__dirname, ".."),
+  root_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
   app_output_root: path.resolve(__dirname, "../hass_frontend"),

build-scripts/rspack.cjs

@@ -65,19 +65,26 @@ const createRspackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          use: (info) => ({
-            loader: "babel-loader",
-            options: {
-              ...bundle.babelOptions({
-                latestBuild,
-                isProdBuild,
-                isTestBuild,
-                sw: info.issuerLayer === "sw",
-              }),
-              cacheDirectory: !isProdBuild,
-              cacheCompression: false,
+          exclude: /node_modules[\\/]core-js/,
+          use: (info) => [
+            {
+              loader: "babel-loader",
+              options: {
+                ...bundle.babelOptions({
+                  latestBuild,
+                  isProdBuild,
+                  isTestBuild,
+                  sw: info.issuerLayer === "sw",
+                }),
+                cacheDirectory: !isProdBuild,
+                cacheCompression: false,
+              },
             },
-          }),
+            {
+              loader: "builtin:swc-loader",
+              options: bundle.swcOptions(),
+            },
+          ],
           resolve: {
             fullySpecified: false,
           },
@@ -136,7 +143,8 @@ const createRspackConfig = ({
             // calling define.amd will call require("!!webpack amd options")
             resource.startsWith("!!webpack") ||
             // loaded by webpack dev server but doesn't exist.
-            resource === "webpack/hot"
+            resource === "webpack/hot" ||
+            resource.startsWith("@swc/helpers")
           ) {
             return false;
           }
@@ -161,7 +169,7 @@ const createRspackConfig = ({
       }),
       new rspack.NormalModuleReplacementPlugin(
         new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
+        path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,3 @@
 import "./layout/hc-connect";
 
-import("../../../src/resources/ha-style");
+import("../../../src/resources/append-ha-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 "@material/mwc-button/mwc-button";
+
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
+import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-
-import "../../../../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 { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 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,19 @@ 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-list";
+import "../../../../src/components/ha-list-item";
+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";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -88,7 +86,7 @@ class HcCast extends LitElement {
               `
             : html`
                 <div class="section-header">PICK A VIEW</div>
-                <mwc-list @action=${this._handlePickView} activatable>
+                <ha-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
                       generateDefaultViewConfig({}, {}, {}, {}, () => ""),
@@ -116,7 +114,7 @@ class HcCast extends LitElement {
                             ></ha-svg-icon>`}
                       </ha-list-item>
                     `
-                  )}</mwc-list
+                  )}</ha-list
                 >
               `}
 

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 { 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
@@ -305,7 +302,7 @@ export class HcConnect extends LitElement {
     }
     .error {
       color: red;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .error a {

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 { 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 {
@@ -88,9 +86,9 @@ class HcLayout extends LitElement {
     .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);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
-      line-height: 32px;
+      line-height: var(--ha-line-height-condensed);
       padding: 24px 16px 16px;
       display: block;
       margin: 0;
@@ -100,7 +98,7 @@ class HcLayout extends LitElement {
       border-radius: 4px 4px 0 0;
     }
     .subtitle {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--secondary-text-color);
       line-height: initial;
     }
@@ -115,7 +113,7 @@ class HcLayout extends LitElement {
     }
 
     :host ::slotted(.section-header) {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       padding: 4px 16px;
       text-transform: uppercase;
     }
@@ -137,7 +135,7 @@ class HcLayout extends LitElement {
 
     .footer {
       text-align: center;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       padding: 8px 0 24px;
       color: var(--secondary-text-color);
     }

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 { 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 {
@@ -30,7 +29,7 @@ class HcLaunchScreen extends LitElement {
       display: block;
       height: 100vh;
       background-color: #f2f4f9;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
     .container {
       display: flex;

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

@@ -1,17 +1,14 @@
-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 { 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";
+import "../../../../src/panels/lovelace/views/hui-view-background";
 
 (window as any).loadCardHelpers = () =>
   import("../../../../src/panels/lovelace/custom-card-helpers");

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: {
@@ -112,7 +109,7 @@ export class HcMain extends HassElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
-    import("../../../../src/resources/ha-style");
+    import("../../../../src/resources/append-ha-style");
 
     window.addEventListener("location-changed", () => {
       const panelPath = `/${this._urlPath || "lovelace"}/`;

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,8 +1,7 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type { Lovelace } from "../../../src/panels/lovelace/types";
-import type { DemoConfig } from "./types";
-
 import { energyEntities } from "../stubs/entities";
+import type { DemoConfig } from "./types";
 
 export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./sections").then((mod) => mod.demoSections),

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/jimpower/theme.ts

@@ -1,37 +1,28 @@
 export const demoThemeJimpower = () => ({
   "text-primary-color": "var(--primary-text-color)",
-  "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#5294E2",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#383C45",
   "primary-text-color": "#FFFFFF",
-  "paper-item-selected_-_background-color": "#434954",
   "secondary-background-color": "#383C45",
   "disabled-text-color": "#7F848E",
-  "paper-item-icon_-_color": "green",
   "paper-grey-200": "#414A59",
   "label-badge-background-color": "#2E333A",
-  "paper-card-header-color": "var(--accent-color)",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
-  "paper-listbox-background-color": "#2E333A",
+  "sidebar-icon-color": "var(--state-icon-color)",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
   "switch-checked-color": "var(--accent-color)",
-  "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
   "error-color": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
   "success-color": "#39E949",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
-  "paper-listbox-color": "var(--primary-color)",
   "card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
-  "paper-item-icon-active-color": "#F9C536",
   "accent-color": "#E45E65",
   "table-row-alternative-background-color": "#3E424B",
 });

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/kernehed/theme.ts

@@ -1,38 +1,29 @@
 // https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
 export const demoThemeKernehed = () => ({
   "text-primary-color": "var(--primary-text-color)",
-  "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#2980b9",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "primary-text-color": "#FFFFFF",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#222222",
   "sidebar-icon-color": "#777777",
-  "paper-item-selected_-_background-color": "#292929",
   "secondary-background-color": "#222222",
   "disabled-text-color": "#777777",
-  "paper-item-icon_-_color": "green",
   "paper-grey-200": "#222222",
   "label-badge-background-color": "#222222",
-  "paper-card-header-color": "var(--accent-color)",
-  "paper-listbox-background-color": "#141414",
   "table-row-background-color": "#292929",
   "paper-grey-50": "var(--primary-text-color)",
   "switch-checked-color": "var(--accent-color)",
-  "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
   "error-color": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
   "success-color": "#2980b9",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
-  "paper-listbox-color": "#777777",
   "card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
-  "paper-item-icon-active-color": "#b58e31",
   "accent-color": "#2980b9",
   "table-row-alternative-background-color": "#292929",
 });

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/teachingbirds/theme.ts

@@ -1,26 +1,18 @@
 export const demoThemeTeachingbirds = () => ({
-  "paper-card-header-color": "var(--paper-item-icon-color)",
-  "paper-listbox-background-color": "#202020",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-item-icon-color": "#d3d3d3",
   "divider-color": "rgba(255, 255, 255, 0.12)",
   "primary-color": "#389638",
   "light-primary-color": "#6f956f",
   "label-badge-red": "var(--primary-color)",
-  "paper-listbox-color": "#FFFFFF",
-  "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
   "switch-unchecked-track-color": "var(--primary-text-color)",
   "card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "sidebar-icon-color": "#d3d3d3",
   "secondary-background-color": "#2b2b2b",
-  "paper-item-icon-active-color": "#d8bf50",
   "switch-checked-color": "var(--primary-color)",
   "secondary-text-color": "#389638",
   "disabled-text-color": "#545454",
-  "paper-item-icon_-_color": "var(--primary-text-color)",
   "paper-grey-200": "#191919",
-  "primary-text-color": "#cfcfcf",
   "label-badge-background-color": "var(--secondary-background-color)",
 });

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,15 @@
+import { mdiTelevision } from "@mdi/js";
+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;
@@ -76,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     }
     ha-svg-icon {
       padding: 8px;
-      color: var(--paper-item-icon-color);
+      color: var(--state-icon-color);
     }
     .flex {
       flex: 1;

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

demo/src/entrypoint.ts

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

demo/src/ha-demo.ts

@@ -1,12 +1,10 @@
-import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../src/types";
-
 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 +14,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";

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
         padding-top: 48px;
       }
       .ohf-logo {
-        margin: max(env(safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;

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/frontend.ts

@@ -1,7 +1,30 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
+let changeFunction;
+
 export const mockFrontend = (hass: MockHomeAssistant) => {
   hass.mockWS("frontend/get_user_data", () => ({
     value: null,
   }));
+  hass.mockWS("frontend/set_user_data", ({ key, value }) => {
+    if (key === "sidebar") {
+      changeFunction?.({
+        value: {
+          panelOrder: value.panelOrder || [],
+          hiddenPanels: value.hiddenPanels || [],
+        },
+      });
+    }
+  });
+  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
+    changeFunction = onChange;
+    onChange?.({
+      value: {
+        panelOrder: [],
+        hiddenPanels: [],
+      },
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
 };

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,

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 = (

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,6 +5,12 @@ 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,

demo/src/stubs/todo.ts

@@ -1,28 +1,37 @@
 import type { TodoItem } from "../../../src/data/todo";
+import { TodoItemStatus } from "../../../src/data/todo";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-import { TodoItemStatus } from "../../../src/data/todo";
+const items = {
+  items: [
+    {
+      uid: "12",
+      summary: "Milk",
+      status: TodoItemStatus.NeedsAction,
+    },
+    {
+      uid: "13",
+      summary: "Eggs",
+      status: TodoItemStatus.NeedsAction,
+    },
+    {
+      uid: "14",
+      summary: "Oranges",
+      status: TodoItemStatus.Completed,
+    },
+    {
+      uid: "15",
+      summary: "Beer",
+    },
+  ] as TodoItem[],
+};
 
 export const mockTodo = (hass: MockHomeAssistant) => {
-  hass.mockWS("todo/item/list", () => ({
-    items: [
-      {
-        uid: "12",
-        summary: "Milk",
-        status: TodoItemStatus.NeedsAction,
-      },
-      {
-        uid: "13",
-        summary: "Eggs",
-        status: TodoItemStatus.NeedsAction,
-      },
-      {
-        uid: "14",
-        summary: "Oranges",
-        status: TodoItemStatus.Completed,
-      },
-    ] as TodoItem[],
-  }));
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
+  hass.mockWS("todo/item/list", () => items);
+  hass.mockWS("todo/item/move", () => undefined);
+  hass.mockWS("todo/item/subscribe", (_msg, _hass, onChange) => {
+    onChange!(items);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
 };

eslint.config.mjs

@@ -1,18 +1,16 @@
 // @ts-check
-/* eslint-disable import/no-extraneous-dependencies */
 
+/* eslint-disable import/no-extraneous-dependencies */
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-
-import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
 import eslintConfigPrettier from "eslint-config-prettier";
 import { configs as litConfigs } from "eslint-plugin-lit";
-import 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";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -33,7 +31,6 @@ export default tseslint.config(
   {
     plugins: {
       "unused-imports": unusedImports,
-      perfectionist,
     },
 
     languageOptions: {
@@ -45,7 +42,6 @@ export default tseslint.config(
         __VERSION__: false,
         __STATIC_PATH__: false,
         __SUPERVISOR__: false,
-        Polymer: true,
       },
 
       parser: tseslint.parser,
@@ -188,29 +184,6 @@ export default tseslint.config(
         },
       ],
       "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/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";
 
@@ -39,12 +38,12 @@ class PageDescription extends HaMarkdown {
       }
       .title {
         font-size: 42px;
-        line-height: 56px;
+        line-height: var(--ha-line-height-condensed);
         padding-bottom: 8px;
       }
       .subtitle {
-        font-size: 18px;
-        line-height: 24px;
+        font-size: var(--ha-font-size-l);
+        line-height: var(--ha-line-height-normal);
       }
       .root {
         max-width: 800px;

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

@@ -1,5 +1,5 @@
 import "./ha-gallery";
 
-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");
 
 document.body.appendChild(document.createElement("ha-gallery"));

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 {
@@ -36,7 +34,7 @@ class HaDemoOptions extends LitElement {
         height: 64px;
         padding: 0 16px;
         pointer-events: none;
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
       }
     `,
   ];

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/";
@@ -253,14 +250,14 @@ class HaGallery extends LitElement {
       }
 
       .page-footer .header {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 28px;
+        font-size: var(--ha-font-size-l);
+        font-weight: var(--ha-font-weight-medium);
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 
       .page-footer .secondary {
-        line-height: 23px;
+        line-height: var(--ha-line-height-normal);
         text-align: center;
       }
 

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", {

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", {

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", {

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

@@ -1,18 +1,16 @@
-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 { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
+import "../../../../src/components/ha-formfield";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
 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 { Action } from "../../../../src/data/script";
+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";

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

@@ -1,18 +1,14 @@
-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 { LitElement, css, html } 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 "../../../../src/components/ha-formfield";
+import type { ConditionWithShorthand } from "../../../../src/data/automation";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and";
 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";
@@ -24,6 +20,8 @@ import { HaTemplateCondition } from "../../../../src/panels/config/automation/co
 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 type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
 
 const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
   {

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

@@ -1,13 +1,6 @@
-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 { LitElement, css, html } 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";
@@ -15,7 +8,10 @@ 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 "../../../../src/components/ha-formfield";
+import type { Trigger } from "../../../../src/data/automation";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
 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";
@@ -33,6 +29,8 @@ import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/
 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 { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
 
 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" }),

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

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;

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

@@ -0,0 +1,65 @@
+---
+title: Badge
+subtitle: Lovelace dashboard badge
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Badge `<ha-badge>`
+
+The badge component is a small component that displays a number or status information. It is used in the lovelace dashboard on the top.
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-badge>
+    simple badge
+  </ha-badge>
+
+  <ha-badge label="Info">
+    With a label
+  </ha-badge>
+
+  <ha-badge type="button">
+    Type button
+  </ha-badge>
+</div>
+
+```html
+<ha-badge> simple badge </ha-badge>
+
+<ha-badge label="Info"> With a label </ha-badge>
+
+<ha-badge type="button"> Type button </ha-badge>
+```
+
+### API
+
+**Slots**
+
+- default slot is the content of the badge
+  - no default
+- `icon` set the icon of the badge
+  - no default
+
+**Properties/Attributes**
+
+| Name     | Type                    | Default     | Description                                                  |
+| -------- | ----------------------- | ----------- | ------------------------------------------------------------ |
+| type     | `"badge"` or `"button"` | `"badge"`   | If it's button it shows a ripple effect                      |
+| label    | string                  | `undefined` | Text label for the badge, only visible if `iconOnly = false` |
+| iconOnly | boolean                 | `false`     | Only show label                                              |
+
+**CSS Custom Properties**
+
+- `--ha-badge-size` (default `36px`)
+- `--ha-badge-border-radius` (default `calc(var(--ha-badge-size, 36px) / 2)`)
+- `--ha-badge-font-size` (default `var(--ha-font-size-s)`)
+- `--ha-badge-icon-size` (default `18px`)

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

@@ -0,0 +1,129 @@
+import { mdiButtonCursor, mdiHome } from "@mdi/js";
+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-badge";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+const badges: {
+  type?: "badge" | "button";
+  label?: string;
+  iconOnly?: boolean;
+  slot?: TemplateResult;
+  iconSlot?: TemplateResult;
+}[] = [
+  {
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "badge",
+    label: "Badge",
+    iconSlot: html`<ha-svg-icon slot="icon" .path=${mdiHome}></ha-svg-icon>`,
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "button",
+    label: "Button",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+    slot: html`<span>Button</span>`,
+  },
+  {
+    type: "button",
+    label: "Label only",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+  },
+  {
+    type: "button",
+    label: "Label",
+    slot: html`<span>Button no label</span>`,
+  },
+  {
+    label: "Icon only",
+    iconOnly: true,
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiHomeAssistant}
+    ></ha-svg-icon>`,
+  },
+];
+
+@customElement("demo-components-ha-badge")
+export class DemoHaBadge extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
+              <div class="card-content">
+                ${badges.map(
+                  (badge) => html`
+                    <ha-badge
+                      .type=${badge.type || undefined}
+                      .label=${badge.label}
+                      .iconOnly=${badge.iconOnly || false}
+                    >
+                      ${badge.iconSlot} ${badge.slot}
+                    </ha-badge>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      gap: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-badge": DemoHaBadge;
+  }
+}

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;

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

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

@@ -1,20 +1,18 @@
-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 {
   label: string;
@@ -152,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

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

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;
@@ -88,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       color: #2196f3;

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

@@ -1,15 +1,13 @@
+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 {
   label: string;
   value: string;
@@ -127,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

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[] = [
   {
@@ -183,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --mdc-icon-size: 24px;

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

@@ -1,12 +1,10 @@
 import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-slider";
-
 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-control-slider";
+import "../../../../src/components/ha-card";
 
 const sliders: {
   id: string;
@@ -146,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-slider-color: #ffcf4c;

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

@@ -1,18 +1,16 @@
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-switch";
-
 import {
   mdiGarage,
   mdiGarageOpen,
   mdiLightbulb,
   mdiLightbulbOff,
 } 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-control-switch";
+import "../../../../src/components/ha-card";
 
 const switches: {
   id: string;
@@ -114,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-switch-on-color: var(--green-color);

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

@@ -1,15 +1,12 @@
+import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
 import type { TemplateResult } from "lit";
-
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-markdown";
 import "../../components/demo-black-white-row";
-
-import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-
 import { LONG_TEXT } from "../../data/text";
 
 const SHORT_TEXT = LONG_TEXT.substring(0, 113);