Merge branch 'dev' of github.com:home-assistant/frontend into user-siderbar

.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.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.2.3
+        uses: actions/cache@v4.2.1
         with:
           path: |
             node_modules/.cache/prettier
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.1
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.1
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.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.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.1
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v4.6.1
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

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

.github/workflows/release.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.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2025.03.0
+        uses: home-assistant/wheels@2024.11.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -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.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -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.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.yarnrc.yml

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

build-scripts/bundle.cjs

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

build-scripts/gulp/entry-html.js

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

build-scripts/gulp/gather-static.js

@@ -59,11 +59,6 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
-  // Lit polyfill support
-  fs.copySync(
-    npmPath("lit/polyfill-support.js"),
-    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
-  );
 
   // dialog-polyfill css
   copyFileDir(
@@ -99,6 +94,10 @@ function copyMapPanel(staticDir) {
     npmPath("leaflet.markercluster/dist/MarkerCluster.css"),
     staticPath("images/leaflet/")
   );
+  copyFileDir(
+    npmPath("leaflet.markercluster/dist/MarkerCluster.Default.css"),
+    staticPath("images/leaflet/")
+  );
   fs.copySync(
     npmPath("leaflet/dist/images"),
     staticPath("images/leaflet/images/")

build-scripts/gulp/translations.js

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

build-scripts/rspack.cjs

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

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

@@ -1,21 +1,12 @@
-import type { CastManager } from "../../../../src/cast/cast_manager";
-import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
-import type { ActionDetail } from "@material/mwc-list/mwc-list";
-import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-icon";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/layouts/hass-loading-screen";
-import "./hc-layout";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
-
+import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
+import type { Auth, Connection } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import type { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
   ensureConnectedCastSession,
@@ -27,12 +18,18 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
+import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import "./hc-layout";
+import "../../../../src/components/ha-list-item";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {

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

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 {

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 {

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: {
@@ -312,7 +309,7 @@ export class HcMain extends HassElement {
               "../../../../src/panels/lovelace/strategies/get-strategy"
             );
             const config = await generateLovelaceDashboardStrategy(
-              rawConfig,
+              rawConfig.strategy,
               this.hass!
             );
             this._handleNewLovelaceConfig(config);
@@ -354,7 +351,10 @@ export class HcMain extends HassElement {
       "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
+      await generateLovelaceDashboardStrategy(
+        DEFAULT_CONFIG.strategy,
+        this.hass!
+      )
     );
   }
 

demo/src/configs/arsaboo/entities.ts

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

demo/src/configs/arsaboo/index.ts

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

demo/src/configs/demo-configs.ts

@@ -1,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/kernehed/entities.ts

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

demo/src/configs/kernehed/index.ts

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

demo/src/configs/sections/entities.ts

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

demo/src/configs/sections/index.ts

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

demo/src/configs/sections/lovelace.ts

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

demo/src/configs/teachingbirds/entities.ts

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

demo/src/configs/teachingbirds/index.ts

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

demo/src/configs/types.ts

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

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

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

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

@@ -1,20 +1,17 @@
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
+import "../../../src/components/ha-circular-progress";
 import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import type {
   Lovelace,
   LovelaceCard,
 } from "../../../src/panels/lovelace/types";
-import type { CSSResultGroup } from "lit";
-
-import "../../../src/components/ha-button";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-spinner";
-
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
   demoConfigs,
   selectedDemoConfig,
@@ -47,7 +44,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-spinner></ha-spinner>`
+              ? html`
+                  <ha-circular-progress indeterminate></ha-circular-progress>
+                `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

demo/src/entrypoint.ts

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

demo/src/ha-demo.ts

@@ -1,12 +1,12 @@
-import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../src/types";
-
+// Compat needs to be first import
+import "../../src/resources/compatibility";
 import { customElement } from "lit/decorators";
-
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
+import type { MockHomeAssistant } from "../../src/fake_data/provide_hass";
 import { provideHass } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import type { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
@@ -16,8 +16,8 @@ import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
-import { mockHistory } from "./stubs/history";
 import { mockIcons } from "./stubs/icons";
+import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";

demo/src/stubs/config.ts

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

demo/src/stubs/config_entries.ts

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

demo/src/stubs/energy.ts

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

demo/src/stubs/history.ts

@@ -1,6 +1,6 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { HistoryStates } from "../../../src/data/history";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-import type { HassEntity } from "home-assistant-js-websocket";
 
 const generateStateHistory = (
   state: HassEntity,

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,7 +1,6 @@
 import type { TodoItem } from "../../../src/data/todo";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
 import { TodoItemStatus } from "../../../src/data/todo";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTodo = (hass: MockHomeAssistant) => {
   hass.mockWS("todo/item/list", () => ({

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: {
@@ -188,29 +185,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/public/images/select_box/card.svg

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

gallery/public/images/select_box/text_only.svg

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

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

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

gallery/src/components/demo-card.ts

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

gallery/src/components/demo-cards.ts

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

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

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

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

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

gallery/src/components/page-description.ts

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

gallery/src/data/traces/types.ts

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

gallery/src/ha-demo-options.ts

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

gallery/src/ha-gallery.ts

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

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

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

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

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

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

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

@@ -1,16 +1,13 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { HomeAssistant } from "../../../../src/types";
-import type { DemoTrace } from "../../data/traces/types";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/trace/hat-trace-timeline";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-
+import "../../../../src/components/ha-card";
+import "../../../../src/components/trace/hat-trace-timeline";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
 import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
+import type { DemoTrace } from "../../data/traces/types";
 
 const traces: DemoTrace[] = [
   mockDemoTrace({ state: "running" }),

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-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-circular-progress.markdown

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

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

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

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

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

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;

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;

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[] = [
   {

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;

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;

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

@@ -1,15 +1,12 @@
+import { 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);
@@ -128,23 +125,6 @@ const SAMPLES: {
       `;
     },
   },
-  {
-    template(slot, leftChevron) {
-      return html`
-        <ha-expansion-panel
-          slot=${slot}
-          .leftChevron=${leftChevron}
-          header="Attr Header with actions"
-        >
-          <ha-svg-icon
-            slot="leading-icon"
-            .path=${mdiLightbulbOn}
-          ></ha-svg-icon>
-          ${SHORT_TEXT}
-        </ha-expansion-panel>
-      `;
-    },
-  },
 ];
 
 @customElement("demo-components-ha-expansion-panel")

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

@@ -1,12 +1,9 @@
 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,25 +1,22 @@
 /* eslint-disable lit/no-template-arrow */
-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 type { TemplateResult } from "lit";
 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,12 +1,11 @@
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-hs-color-picker";
-import "../../../../src/components/ha-slider";
 
+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-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,10 +1,8 @@
 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.markdown

@@ -1,3 +0,0 @@
----
-title: Select box
----

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

@@ -1,154 +0,0 @@
-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";
-
-const basicOptions: SelectBoxOption[] = [
-  {
-    value: "text-only",
-    label: "Text only",
-  },
-  {
-    value: "card",
-    label: "Card",
-  },
-  {
-    value: "disabled",
-    label: "Disabled option",
-    disabled: true,
-  },
-];
-
-const fullOptions: SelectBoxOption[] = [
-  {
-    value: "text-only",
-    label: "Text only",
-    description: "Only text, no border and background",
-    image: "/images/select_box/text_only.svg",
-  },
-  {
-    value: "card",
-    label: "Card",
-    description: "With border and background",
-    image: "/images/select_box/card.svg",
-  },
-  {
-    value: "disabled",
-    label: "Disabled",
-    description: "Option that can not be selected",
-    disabled: true,
-  },
-];
-
-const selects: {
-  id: string;
-  label: string;
-  class?: string;
-  options: SelectBoxOption[];
-  disabled?: boolean;
-}[] = [
-  {
-    id: "basic",
-    label: "Basic",
-    options: basicOptions,
-  },
-  {
-    id: "full",
-    label: "With description and image",
-    options: fullOptions,
-  },
-];
-
-@customElement("demo-components-ha-select-box")
-export class DemoHaSelectBox extends LitElement {
-  @state() private value?: string = "off";
-
-  handleValueChanged(e: CustomEvent) {
-    this.value = e.detail.value as string;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      ${repeat(selects, (select) => {
-        const { id, label, options } = select;
-        return html`
-          <ha-card>
-            <div class="card-content">
-              <label id=${id}>${label}</label>
-              <ha-select-box
-                .value=${this.value}
-                .options=${options}
-                @value-changed=${this.handleValueChanged}
-              >
-              </ha-select-box>
-            </div>
-          </ha-card>
-        `;
-      })}
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Column layout</b></p>
-          <div class="vertical-selects">
-            ${repeat(selects, (select) => {
-              const { options } = select;
-              return html`
-                <ha-select-box
-                  .value=${this.value}
-                  .options=${options}
-                  .maxColumns=${1}
-                  @value-changed=${this.handleValueChanged}
-                >
-                </ha-select-box>
-              `;
-            })}
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    pre {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-    p {
-      margin: 0;
-    }
-    label {
-      font-weight: 600;
-      margin-bottom: 8px;
-      display: block;
-    }
-    .custom {
-      --mdc-icon-size: 24px;
-      --control-select-color: var(--state-fan-active-color);
-      --control-select-thickness: 130px;
-      --control-select-border-radius: 36px;
-    }
-
-    p.title {
-      margin-bottom: 12px;
-    }
-
-    .vertical-selects ha-select-box {
-      display: block;
-      margin-bottom: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-select-box": DemoHaSelectBox;
-  }
-}

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

@@ -1,30 +1,27 @@
-import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
-import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
-import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
-import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
-import type { HomeAssistant } from "../../../../src/types";
-import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-selector/ha-selector";
-import "../../../../src/components/ha-settings-row";
-import "../../components/demo-black-white-row";
 import "@material/mwc-button";
-
+import type { TemplateResult } from "lit";
 import { css, 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 { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
+import "../../../../src/components/ha-selector/ha-selector";
+import "../../../../src/components/ha-settings-row";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { BlueprintInput } from "../../../../src/data/blueprint";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
+import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {

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

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

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

@@ -1,11 +1,8 @@
 import type { TemplateResult } from "lit";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-tip";
-
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
-
+import "../../../../src/components/ha-tip";
+import "../../../../src/components/ha-card";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 

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

@@ -1,30 +0,0 @@
----
-title: Tooltip
----
-
-A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
-
-Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
-
-<ha-tooltip content="This is a tooltip">
-  <ha-button>Hover Me</ha-button>
-</ha-tooltip>
-
-```
-<ha-tooltip content="This is a tooltip">
-  <ha-button>Hover Me</ha-button>
-</ha-tooltip>
-```
-
-## Documentation
-
-This element is based on sholace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
-
-<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
-
-### HA style tokens
-
-In your theme settings use this without the prefixed `--`.
-
-- `--ha-tooltip-border-radius` (Default: 4px)
-- `--ha-tooltip-arrow-size` (Default: 8px)

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

@@ -1,2 +0,0 @@
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-tooltip";

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

@@ -1,13 +1,10 @@
-import type { FrontendLocaleData } from "../../../../src/data/translation";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
 import "@material/mwc-list/mwc-list";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
 import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
   FirstWeekday,

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

@@ -1,13 +1,10 @@
-import type { FrontendLocaleData } from "../../../../src/data/translation";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
 import "@material/mwc-list/mwc-list";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
 import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
   FirstWeekday,

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

@@ -1,13 +1,10 @@
-import type { FrontendLocaleData } from "../../../../src/data/translation";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
 import "@material/mwc-list/mwc-list";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
 import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
   FirstWeekday,

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

@@ -1,13 +1,10 @@
-import type { FrontendLocaleData } from "../../../../src/data/translation";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
 import "@material/mwc-list/mwc-list";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
 import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
   FirstWeekday,

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

@@ -1,13 +1,10 @@
-import type { FrontendLocaleData } from "../../../../src/data/translation";
-
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
 import "@material/mwc-list/mwc-list";
-
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-
 import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
+import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
   FirstWeekday,