Add eslint perfectionist/sort-imports

.devcontainer/devcontainer.json

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

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -41,8 +41,9 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -61,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,8 +77,9 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+        uses: netlify/actions/cli@master
+        with:
+          args: 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.4.0
+        uses: actions/setup-node@v4.3.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.4.0
+        uses: actions/setup-node@v4.3.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.4.0
+        uses: actions/setup-node@v4.3.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.4.0
+        uses: actions/setup-node@v4.3.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.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,8 +42,9 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -62,7 +63,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -77,8 +78,9 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+        uses: netlify/actions/cli@master
+        with:
+          args: 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.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -34,8 +34,9 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+        uses: netlify/actions/cli@master
+        with:
+          args: 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.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -39,14 +39,13 @@ jobs:
 
       - name: Deploy preview to Netlify
         id: deploy
-        run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
-            --json > deploy_output.json
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
         run: |
-          NETLIFY_LIVE_URL=$(jq -r '.deploy_url' deploy_output.json)
-          echo "$NETLIFY_LIVE_URL" >> "$GITHUB_STEP_SUMMARY"
+          echo "${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_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.4.0
+        uses: actions/setup-node@v4.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.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.4.0
+        uses: actions/setup-node@v4.3.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.2
+        uses: softprops/action-gh-release@v2.2.1
         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.4.0
+        uses: actions/setup-node@v4.3.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.2
+        uses: softprops/action-gh-release@v2.2.1
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -121,7 +121,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v4.3.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.2
+        uses: softprops/action-gh-release@v2.2.1
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.vscode/extensions.json

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -0,0 +1,34 @@
+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++) {

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.8.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.root_dir, "src/resources/polyfills");
+const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const polyfillSupport = {

build-scripts/bundle.cjs

@@ -20,16 +20,22 @@ 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.root_dir, "src/components/ha-icon.ts")
+        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
       ),
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 
@@ -44,8 +50,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __HASS_URL__: `\`${
     "HASS_URL" in process.env
       ? process.env.HASS_URL
-      : // eslint-disable-next-line no-template-curly-in-string
-        "${location.protocol}//${location.host}"
+      : "${location.protocol}//${location.host}"
   }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
@@ -73,19 +78,6 @@ 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,
@@ -110,6 +102,7 @@ module.exports.babelOptions = ({
         shippedProposals: true,
       },
     ],
+    "@babel/preset-typescript",
   ],
   plugins: [
     [
@@ -146,6 +139,12 @@ 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),
@@ -165,7 +164,7 @@ module.exports.babelOptions = ({
         ],
       ],
       exclude: [
-        path.join(paths.root_dir, "src/resources/polyfills"),
+        path.join(paths.polymer_dir, "src/resources/polyfills"),
         ...[
           "@formatjs/(?:ecma402-abstract|intl-\\w+)",
           "@lit-labs/virtualizer/polyfills",
@@ -183,7 +182,6 @@ 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.root_dir, "pyproject.toml"), "utf8")
+      .readFileSync(path.resolve(paths.polymer_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.root_dir, paths.app_output_root)
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
 );
 
 gulp.task(
   "gen-pages-app-prod",
   genPagesProdTask(
     APP_PAGE_ENTRIES,
-    paths.root_dir,
+    paths.polymer_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.root_dir, "node_modules", ...parts);
-const polyPath = (...parts) => path.resolve(paths.root_dir, ...parts);
+  path.resolve(paths.polymer_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.polymer_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.root_dir, "node_modules", "@formatjs");
+const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
 const outDir = join(paths.build_dir, "locale-data");
 
 const INTL_POLYFILLS = {

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

@@ -16,7 +16,6 @@ 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 = {
-  root_dir: path.resolve(__dirname, ".."),
+  polymer_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
   app_output_root: path.resolve(__dirname, "../hass_frontend"),

build-scripts/rspack.cjs

@@ -65,26 +65,19 @@ const createRspackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: /node_modules[\\/]core-js/,
-          use: (info) => [
-            {
-              loader: "babel-loader",
-              options: {
-                ...bundle.babelOptions({
-                  latestBuild,
-                  isProdBuild,
-                  isTestBuild,
-                  sw: info.issuerLayer === "sw",
-                }),
-                cacheDirectory: !isProdBuild,
-                cacheCompression: false,
-              },
+          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,
           },
@@ -143,8 +136,7 @@ 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.startsWith("@swc/helpers")
+            resource === "webpack/hot"
           ) {
             return false;
           }
@@ -169,7 +161,7 @@ const createRspackConfig = ({
       }),
       new rspack.NormalModuleReplacementPlugin(
         new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
-        path.resolve(paths.root_dir, "src/util/empty.js")
+        path.resolve(paths.polymer_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/append-ha-style");
+import("../../../src/resources/ha-style");

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

@@ -1,12 +1,21 @@
-import "@material/mwc-button/mwc-button";
-
+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 { 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,
@@ -18,19 +27,12 @@ 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 {
@@ -86,7 +88,7 @@ class HcCast extends LitElement {
               `
             : html`
                 <div class="section-header">PICK A VIEW</div>
-                <ha-list @action=${this._handlePickView} activatable>
+                <mwc-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
                       generateDefaultViewConfig({}, {}, {}, {}, () => ""),
@@ -114,7 +116,7 @@ class HcCast extends LitElement {
                             ></ha-svg-icon>`}
                       </ha-list-item>
                     `
-                  )}</ha-list
+                  )}</mwc-list
                 >
               `}
 

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

@@ -1,10 +1,18 @@
-import "@material/mwc-button";
-import { mdiCastConnected, mdiCast } from "@mdi/js";
+import type { CastManager } from "../../../../src/cast/cast_manager";
 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,
@@ -13,21 +21,16 @@ 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

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

@@ -1,9 +1,11 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
-import { getUser } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
+
+import "../../../../src/components/ha-card";
+
+import { getUser } from "home-assistant-js-websocket";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
 class HcLayout extends LitElement {

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

@@ -1,4 +1,5 @@
 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,5 +1,6 @@
 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,11 +1,13 @@
-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";
 
+import "../../../src/resources/custom-card-support";
+
+import { CAST_NS } from "../../../src/cast/const";
+import { castContext } from "./cast_context";
+import { framework } from "./cast_framework";
+import { HcMain } from "./layout/hc-main";
+
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
 lovelaceController.addEventListener("cast-view-changed", (ev) => {

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

@@ -1,14 +1,17 @@
-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 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 { 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,7 +1,8 @@
+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 {

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

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

demo/src/configs/arsaboo/entities.ts

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

demo/src/configs/arsaboo/index.ts

@@ -1,4 +1,5 @@
 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,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>)[] = [
   () => import("./sections").then((mod) => mod.demoSections),
   () => import("./arsaboo").then((mod) => mod.demoArsaboo),

demo/src/configs/jimpower/entities.ts

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

demo/src/configs/jimpower/index.ts

@@ -1,4 +1,5 @@
 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,7 @@
-import "../../custom-cards/card-modder";
 import type { DemoConfig } from "../types";
 
+import "../../custom-cards/card-modder";
+
 export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
   name: "Kingia Castle",
   resources: [],

demo/src/configs/jimpower/theme.ts

@@ -1,28 +1,37 @@
 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",
-  "sidebar-icon-color": "var(--state-icon-color)",
+  "paper-card-header-color": "var(--accent-color)",
+  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "paper-listbox-background-color": "#2E333A",
   "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,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
+import { convertEntities } from "../../../../src/fake_data/entity";
+
 export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
   convertEntities({
     "todo.shopping_list": {

demo/src/configs/kernehed/index.ts

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

demo/src/configs/kernehed/theme.ts

@@ -1,29 +1,38 @@
 // 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,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
+import { convertEntities } from "../../../../src/fake_data/entity";
+
 export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
   convertEntities({
     "cover.living_room_garden_shutter": {

demo/src/configs/sections/index.ts

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

demo/src/configs/sections/lovelace.ts

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

demo/src/configs/teachingbirds/entities.ts

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

demo/src/configs/teachingbirds/index.ts

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

demo/src/configs/teachingbirds/theme.ts

@@ -1,18 +1,26 @@
 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": "#d3d3d3",
+  "sidebar-icon-color": "var(--paper-item-icon-color)",
   "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,15 +1,18 @@
-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;
@@ -73,7 +76,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     }
     ha-svg-icon {
       padding: 8px;
-      color: var(--state-icon-color);
+      color: var(--paper-item-icon-color);
     }
     .flex {
       flex: 1;

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

@@ -1,17 +1,20 @@
-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 "./util/is_frontpage";
 import "./ha-demo";
+import "./util/is_frontpage";
 
-import("../../src/resources/append-ha-style");
+import("../../src/resources/ha-style");

demo/src/ha-demo.ts

@@ -1,10 +1,12 @@
+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";
@@ -14,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 { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
+import { mockIcons } from "./stubs/icons";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";

demo/src/stubs/energy.ts

@@ -1,4 +1,3 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns";
 import type {
   EnergyInfo,
   EnergyPreferences,
@@ -7,6 +6,8 @@ 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,

demo/src/stubs/icons.ts

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

demo/src/stubs/lovelace.ts

@@ -1,12 +1,14 @@
 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,3 +1,10 @@
+import type {
+  Statistics,
+  StatisticsMetaData,
+  StatisticValue,
+} from "../../../src/data/recorder";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
 import {
   addDays,
   addHours,
@@ -5,12 +12,6 @@ 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,37 +1,28 @@
 import type { TodoItem } from "../../../src/data/todo";
-import { TodoItemStatus } from "../../../src/data/todo";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-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[],
-};
+import { TodoItemStatus } from "../../../src/data/todo";
 
 export const mockTodo = (hass: MockHomeAssistant) => {
-  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 () => {};
-  });
+  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) => () => {});
 };

eslint.config.mjs

@@ -1,16 +1,18 @@
 // @ts-check
-
 /* 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 js from "@eslint/js";
+
 import { FlatCompat } from "@eslint/eslintrc";
-import tseslint from "typescript-eslint";
+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";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -31,6 +33,7 @@ export default tseslint.config(
   {
     plugins: {
       "unused-imports": unusedImports,
+      perfectionist,
     },
 
     languageOptions: {
@@ -42,6 +45,7 @@ export default tseslint.config(
         __VERSION__: false,
         __STATIC_PATH__: false,
         __SUPERVISOR__: false,
+        Polymer: true,
       },
 
       parser: tseslint.parser,
@@ -184,6 +188,29 @@ 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,11 +1,14 @@
-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,11 +1,13 @@
-import { load } from "js-yaml";
+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 { 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,12 +1,15 @@
-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 type { HomeAssistant } from "../../../src/types";
+import type { DemoCardConfig } from "./demo-card";
+
 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";
+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";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {

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

@@ -1,10 +1,12 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../../src/types";
+
 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 type { HomeAssistant } from "../../../src/types";
+
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {

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

@@ -1,12 +1,15 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import type { HomeAssistant } from "../../../src/types";
+
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
-import type { HomeAssistant } from "../../../src/types";
 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";
+
 @customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

gallery/src/components/page-description.ts

@@ -1,6 +1,7 @@
 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 { AutomationTraceExtended } from "../../../../src/data/trace";
 import type { LogbookEntry } from "../../../../src/data/logbook";
+import type { AutomationTraceExtended } from "../../../../src/data/trace";
 
 export interface DemoTrace {
   trace: AutomationTraceExtended;

gallery/src/entrypoint.js

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

gallery/src/ha-demo-options.ts

@@ -1,11 +1,13 @@
-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";
+import "@material/mwc-drawer";
+import "@material/mwc-top-app-bar-fixed";
+
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+import { haStyle } from "../../src/resources/styles";
 
 @customElement("ha-demo-options")
 class HaDemoOptions extends LitElement {

gallery/src/ha-gallery.ts

@@ -1,16 +1,19 @@
-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 "./components/page-description";
+import "@material/mwc-drawer";
+import "@material/mwc-top-app-bar-fixed";
+
+import { mdiMenu } from "@mdi/js";
+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 { 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/automation/describe-action.ts

@@ -1,13 +1,16 @@
+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,13 +1,16 @@
+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,13 +1,16 @@
+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,16 +1,18 @@
-import type { TemplateResult } 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 { 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 type { Action } from "../../../../src/data/script";
-import "../../../../src/panels/config/automation/action/ha-automation-action";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
 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,14 +1,18 @@
+import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
-import { LitElement, css, html } 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 "../../../../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";
@@ -20,8 +24,6 @@ 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,6 +1,13 @@
+import type { Trigger } from "../../../../src/data/automation";
+import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
-import { LitElement, css, html } 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";
@@ -8,10 +15,7 @@ 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";
@@ -29,8 +33,6 @@ 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,13 +1,16 @@
 /* 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,15 +1,18 @@
 /* eslint-disable lit/no-template-arrow */
 
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+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 { 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,11 +1,14 @@
-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

@@ -1,65 +0,0 @@
----
-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

@@ -1,129 +0,0 @@
-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,9 +1,11 @@
 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,12 +1,15 @@
 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,18 +1,20 @@
+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;

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

@@ -1,10 +1,12 @@
 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,10 +1,12 @@
 import type { TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
-import { customElement, state } from "lit/decorators";
+
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-number-buttons";
-import { repeat } from "lit/directives/repeat";
+
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
 
 const buttons: {
   id: string;

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

@@ -1,13 +1,15 @@
-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;

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

@@ -1,12 +1,14 @@
-import { mdiFanOff, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
+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 { 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[] = [
   {

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

@@ -1,10 +1,12 @@
 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;

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

@@ -1,16 +1,18 @@
+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;

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

@@ -1,12 +1,15 @@
-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);

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

@@ -1,9 +1,12 @@
 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-faded";
 import "../../../../src/components/ha-markdown";
+
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
 import { LONG_TEXT } from "../../data/text";
 
 const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

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

@@ -1,22 +1,25 @@
 /* eslint-disable lit/no-template-arrow */
-import "@material/mwc-button";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { HomeAssistant } from "../../../../src/types";
 import type { TemplateResult } from "lit";
+
+import "../../../../src/components/ha-form/ha-form";
+import "../../components/demo-black-white-row";
+import "@material/mwc-button";
+
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
+
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 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 { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
-import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {

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

@@ -1,11 +1,12 @@
-import "../../../../src/components/ha-hs-color-picker";
-
 import type { TemplateResult } from "lit";
+
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-hs-color-picker";
+import "../../../../src/components/ha-slider";
+
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-slider";
 import { hsv2rgb } from "../../../../src/common/color/convert-color";
 
 @customElement("demo-components-ha-hs-color-picker")

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

@@ -1,8 +1,10 @@
 import type { TemplateResult } from "lit";
+
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-label-badge";
+
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-label-badge";
-import "../../../../src/components/ha-card";
 
 const colors = ["#03a9f4", "#ffa600", "#43a047"];
 

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

@@ -1,10 +1,12 @@
+import type { SelectBoxOption } from "../../../../src/components/ha-select-box";
 import type { TemplateResult } from "lit";
+
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-select-box";
+
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-select-box";
-import type { SelectBoxOption } from "../../../../src/components/ha-select-box";
 
 const basicOptions: SelectBoxOption[] = [
   {