Add checkbox mode to boolean selector

.eslintrc.json

@@ -124,9 +124,7 @@
     "lit-a11y/no-autofocus": "off",
     "lit-a11y/alt-text": "warn",
     "lit-a11y/anchor-is-valid": "warn",
-    "lit-a11y/role-has-required-aria-attrs": "warn",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-import-type-side-effects": "error"
+    "lit-a11y/role-has-required-aria-attrs": "warn"
   },
   "plugins": ["unused-imports"]
 }

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@v4.1.2
+        uses: actions/cache@v4.0.2
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -100,9 +100,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -58,12 +58,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -21,10 +21,10 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v5
@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.4.3
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

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

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -34,7 +34,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.1.0
+        uses: actions/setup-node@v4.0.3
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.0.9
+        uses: softprops/action-gh-release@v2.0.8
         with:
           files: |
             dist/*.whl

.github/workflows/translations.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v4.1.7
 
       - name: Upload Translations
         run: |

.yarn/patches/sortablejs-npm-1.15.2-73347ae85a.patch

@@ -1,7 +1,16 @@
 diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa526090a00 100644
+index 93ba17509e2e8583ab241fea6845fbe714c584a2..de0651ddb5dced30d36f7d764da0dd0b441f523f 100644
 --- a/modular/sortable.core.esm.js
 +++ b/modular/sortable.core.esm.js
+@@ -1461,7 +1461,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           }
+           target = parent; // store last element
+         }
+-        /* jshint boss:true */ while (parent = parent.parentNode);
++        /* jshint boss:true */ while (parent = parent.parentNode || parent.getRootNode().host);
+       }
+       _unhideGhostForTarget();
+     }
 @@ -1781,11 +1781,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
          }
          if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {
@@ -24,7 +33,7 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
            }
            parentEl = el; // actualization
  
-@@ -1802,7 +1807,12 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+@@ -1802,7 +1807,13 @@ Sortable.prototype = /** @lends Sortable.prototype */{
          targetRect = getRect(target);
          if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
            capture();
@@ -35,10 +44,11 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
 +          catch(err) {
 +            return completed(false);
 +          }
++          
            parentEl = el; // actualization
  
            changed();
-@@ -1849,10 +1859,15 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+@@ -1849,12 +1860,17 @@ Sortable.prototype = /** @lends Sortable.prototype */{
            _silent = true;
            setTimeout(_unsilent, 30);
            capture();
@@ -46,6 +56,8 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
 -            el.appendChild(dragEl);
 -          } else {
 -            target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+-          }
+ 
 +          try {
 +            if (after && !nextSibling) {
 +              el.appendChild(dragEl);
@@ -55,6 +67,7 @@ index 8b5e49b011713c8859c669069fbe85ce53974e1d..6a0afc92787157b8a31c38cc5f67dfa5
 +          }
 +          catch(err) {
 +            return completed(false);
-           }
- 
++          }
            // Undo chrome's scroll adjustment (has no effect on other browsers)
+           if (scrolledPastTop) {
+             scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);

.yarnrc.yml

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

README.md

@@ -27,5 +27,3 @@ A complete guide can be found at the following [link](https://www.home-assistant
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
 We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
-
-[![Home Assistant - A project from the Open Home Foundation](https://www.openhomefoundation.org/badges/home-assistant.png)](https://www.openhomefoundation.org/)

build-scripts/gulp/compress.js

@@ -15,29 +15,23 @@ const brotliOptions = {
 };
 const zopfliOptions = { threshold: 150 };
 
-const compressDistBrotli = (rootDir, modernDir, compressServiceWorker = true) =>
+const compressDistBrotli = (rootDir, modernDir) =>
   gulp
-    .src(
-      [
-        `${modernDir}/**/${filesGlob}`,
-        compressServiceWorker ? `${rootDir}/sw-modern.js` : undefined,
-      ].filter(Boolean),
-      {
-        base: rootDir,
-      }
-    )
+    .src([`${modernDir}/**/${filesGlob}`, `${rootDir}/sw-modern.js`], {
+      base: rootDir,
+    })
     .pipe(brotli(brotliOptions))
     .pipe(gulp.dest(rootDir));
 
-const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
+const compressDistZopfli = (rootDir, modernDir) =>
   gulp
     .src(
       [
         `${rootDir}/**/${filesGlob}`,
-        compressModern ? undefined : `!${modernDir}/**/${filesGlob}`,
+        `!${modernDir}/**/${filesGlob}`,
         `!${rootDir}/{sw-modern,service_worker}.js`,
         `${rootDir}/{authorize,onboarding}.html`,
-      ].filter(Boolean),
+      ],
       { base: rootDir }
     )
     .pipe(zopfli(zopfliOptions))
@@ -46,20 +40,12 @@ const compressDistZopfli = (rootDir, modernDir, compressModern = false) =>
 const compressAppBrotli = () =>
   compressDistBrotli(paths.app_output_root, paths.app_output_latest);
 const compressHassioBrotli = () =>
-  compressDistBrotli(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    false
-  );
+  compressDistBrotli(paths.hassio_output_root, paths.hassio_output_latest);
 
 const compressAppZopfli = () =>
   compressDistZopfli(paths.app_output_root, paths.app_output_latest);
 const compressHassioZopfli = () =>
-  compressDistZopfli(
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    true
-  );
+  compressDistZopfli(paths.hassio_output_root, paths.hassio_output_latest);
 
 gulp.task("compress-app", gulp.parallel(compressAppBrotli, compressAppZopfli));
 gulp.task(

build-scripts/gulp/download-translations.js

@@ -13,7 +13,7 @@ const srcMeta = "src/translations/translationMetadata.json";
 const encoding = "utf8";
 
 function hasHtml(data) {
-  return /<\S*>/i.test(data);
+  return /<[a-z][\s\S]*>/i.test(data);
 }
 
 function recursiveCheckHasHtml(file, data, errors, recKey) {

build-scripts/gulp/gather-static.js

@@ -60,12 +60,6 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
-
-  // dialog-polyfill css
-  copyFileDir(
-    npmPath("dialog-polyfill/dialog-polyfill.css"),
-    staticPath("polyfills/")
-  );
 }
 
 function copyLoaderJS(staticDir) {
@@ -106,14 +100,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-function copyZXingWasm(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  copyFileDir(
-    npmPath("zxing-wasm/dist/reader/zxing_reader.wasm"),
-    staticPath("js")
-  );
-}
-
 gulp.task("copy-locale-data", async () => {
   const staticDir = paths.app_output_static;
   copyLocaleData(staticDir);
@@ -151,7 +137,6 @@ gulp.task("copy-static-app", async () => {
   copyMapPanel(staticDir);
 
   // Qr Scanner assets
-  copyZXingWasm(staticDir);
   copyQrScannerWorker(staticDir);
 });
 

build-scripts/gulp/locale-data.js

@@ -24,11 +24,8 @@ const convertToJSON = async (
 ) => {
   let localeData;
   try {
-    // use "pt" for "pt-BR", because "pt-BR" is unsupported by @formatjs
-    const language = lang === "pt-BR" ? "pt" : lang;
-
     localeData = await readFile(
-      join(formatjsDir, pkg, subDir, `${language}.js`),
+      join(formatjsDir, pkg, subDir, `${lang}.js`),
       "utf-8"
     );
   } catch (e) {

cast/src/html/faq.html.template

@@ -139,7 +139,7 @@
         </p>
       </div>
 
-      <div class="section-header">What does Home Assistant Cast do?</div>
+      <div class="section-header">Wat does Home Assistant Cast do?</div>
       <div class="card-content">
         <p>
           Home Assistant Cast is a receiver application for the Chromecast. When

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

@@ -1,12 +1,10 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list";
-import type { ActionDetail } from "@material/mwc-list/mwc-list";
+import { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
-import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { Auth, Connection } from "home-assistant-js-websocket";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { CastManager } from "../../../../src/cast/cast_manager";
+import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
   ensureConnectedCastSession,
@@ -25,7 +23,7 @@ import {
   getLovelaceCollection,
 } from "../../../../src/data/lovelace";
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
-import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
+import { 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";
@@ -91,8 +89,8 @@ class HcCast extends LitElement {
                       generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                     ]
                   ).map(
-                    (view, idx) => html`
-                      <ha-list-item
+                    (view, idx) =>
+                      html`<ha-list-item
                         graphic="avatar"
                         .activated=${this.castManager.status?.lovelacePath ===
                         (view.path ?? idx)}
@@ -110,9 +108,8 @@ class HcCast extends LitElement {
                           : html`<ha-svg-icon
                               slot="item-icon"
                               .path=${mdiViewDashboard}
-                            ></ha-svg-icon>`}
-                      </ha-list-item>
-                    `
+                            ></ha-svg-icon>`}</ha-list-item
+                      > `
                   )}</mwc-list
                 >
               `}

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

@@ -1,23 +1,19 @@
 import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
-import type {
+import {
   Auth,
   Connection,
-  getAuthOptions,
-} from "home-assistant-js-websocket";
-import {
   createConnection,
   ERR_CANNOT_CONNECT,
   ERR_HASS_HOST_REQUIRED,
   ERR_INVALID_AUTH,
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
+  getAuthOptions,
 } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
-import type { CastManager } from "../../../../src/cast/cast_manager";
-import { getCastManager } from "../../../../src/cast/cast_manager";
+import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
   loadTokens,

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

@@ -1,7 +1,10 @@
-import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
-import { getUser } from "home-assistant-js-websocket";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import {
+  Auth,
+  Connection,
+  getUser,
+  HassUser,
+} from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
@@ -85,7 +88,7 @@ class HcLayout extends LitElement {
       }
 
       .card-header {
-        color: var(--ha-card-header-color, var(--primary-text-color));
+        color: var(--ha-card-header-color, --primary-text-color);
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;

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";
+import { convertEntities, Entity } from "../../../../src/fake_data/entity";
 
 export const castDemoEntities: () => Entity[] = () =>
   convertEntities({

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

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

cast/src/receiver/entrypoint.ts

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

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

@@ -1,11 +1,13 @@
 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 { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
 import { HassElement } from "../../../../src/state/hass-element";
-import type { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant } from "../../../../src/types";
 import { castDemoEntities } from "../demo/cast-demo-entities";
 import { castDemoLovelace } from "../demo/cast-demo-lovelace";
 import "./hc-lovelace";

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

@@ -1,7 +1,6 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {

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

@@ -1,18 +1,11 @@
-import {
-  css,
-  type CSSResultGroup,
-  html,
-  LitElement,
-  type TemplateResult,
-} from "lit";
-import { customElement, property } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
-import type { Lovelace } from "../../../../src/panels/lovelace/types";
+import { 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 { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
 (window as any).loadCardHelpers = () =>
@@ -29,6 +22,8 @@ class HcLovelace extends LitElement {
 
   @property() public urlPath: string | null = null;
 
+  @query("hui-view") private _huiView?: HTMLElement;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -50,24 +45,13 @@ class HcLovelace extends LitElement {
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
-      showToast: () => undefined,
     };
-
-    const viewConfig = this.lovelaceConfig.views[index];
-    const background = viewConfig.background || this.lovelaceConfig.background;
-
     return html`
-      <hui-view-container
+      <hui-view
         .hass=${this.hass}
-        .background=${background}
-        .theme=${viewConfig.theme}
-      >
-        <hui-view
-          .hass=${this.hass}
-          .lovelace=${lovelace}
-          .index=${index}
-        ></hui-view>
-      </hui-view-container>
+        .lovelace=${lovelace}
+        .index=${index}
+      ></hui-view>
     `;
   }
 
@@ -97,6 +81,26 @@ class HcLovelace extends LitElement {
                 }${viewTitle || ""}`
               : undefined,
         });
+
+        const configBackground =
+          this.lovelaceConfig.views[index].background ||
+          this.lovelaceConfig.background;
+
+        const backgroundStyle =
+          typeof configBackground === "string"
+            ? configBackground
+            : configBackground?.image
+              ? `center / cover no-repeat url('${configBackground.image}')`
+              : undefined;
+
+        if (backgroundStyle) {
+          this._huiView!.style.setProperty(
+            "--lovelace-background",
+            backgroundStyle
+          );
+        } else {
+          this._huiView!.style.removeProperty("--lovelace-background");
+        }
       }
     }
   }
@@ -120,15 +124,19 @@ class HcLovelace extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      hui-view-container {
-        display: flex;
-        position: relative;
+      :host {
         min-height: 100vh;
+        height: 0;
+        display: flex;
+        flex-direction: column;
         box-sizing: border-box;
+        background: var(--primary-background-color);
+      }
+      :host > * {
+        flex: 1;
       }
       hui-view {
-        flex: 1 1 100%;
-        max-width: 100%;
+        background: var(--lovelace-background, var(--primary-background-color));
       }
     `;
   }

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

@@ -1,40 +1,41 @@
-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 {
+  createConnection,
+  getAuth,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
+import { html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
-import type {
+import {
   ConnectMessage,
   GetStatusMessage,
   HassMessage,
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import type {
+import {
+  ReceiverErrorCode,
   ReceiverErrorMessage,
   ReceiverStatusMessage,
 } from "../../../../src/cast/sender_messages";
-import { ReceiverErrorCode } from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
 } from "../../../../src/data/lovelace";
-import type {
+import {
+  isStrategyDashboard,
   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 { 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: {
@@ -364,9 +365,7 @@ export class HcMain extends HassElement {
       this._urlPath || "lovelace"
     );
     castContext.setApplicationState(title || "");
-    this._lovelaceConfig = checkLovelaceConfig(
-      lovelaceConfig
-    ) as LovelaceConfig;
+    this._lovelaceConfig = lovelaceConfig;
   }
 
   private _handleShowDemo(_msg: ShowDemoMessage) {

demo/src/configs/arsaboo/entities.ts

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

demo/src/configs/arsaboo/index.ts

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

demo/src/configs/arsaboo/lovelace.ts

@@ -1,4 +1,4 @@
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
 
 export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",

demo/src/configs/demo-configs.ts

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

demo/src/configs/jimpower/entities.ts

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

demo/src/configs/jimpower/index.ts

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

demo/src/configs/jimpower/lovelace.ts

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

demo/src/configs/kernehed/entities.ts

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

demo/src/configs/kernehed/index.ts

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

demo/src/configs/kernehed/lovelace.ts

@@ -1,4 +1,4 @@
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
 
 export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
   name: "Hem",

demo/src/configs/sections/description.ts

@@ -0,0 +1,16 @@
+import { html } from "lit";
+import { DemoConfig } from "../types";
+
+export const demoLovelaceDescription: DemoConfig["description"] = (
+  localize
+) => html`
+  <p>
+    ${localize("ui.panel.page-demo.config.sections.description", {
+      blog_post: html`<a
+        href="https://www.home-assistant.io/blog/2024/03/04/dashboard-chapter-1/"
+        target="_blank"
+        >${localize("ui.panel.page-demo.config.sections.description_blog_post")}
+      </a>`,
+    })}
+  </p>
+`;

demo/src/configs/sections/entities.ts

@@ -1,5 +1,5 @@
 import { convertEntities } from "../../../../src/fake_data/entity";
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
 
 export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
   convertEntities({
@@ -111,47 +111,9 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
         friendly_name: "Living room Temperature",
       },
     },
-    "sensor.living_room_humidity": {
-      entity_id: "sensor.living_room_humidity",
-      state: "57",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "%",
-        device_class: "humidity",
-        friendly_name: "Living room Humidity",
-      },
-    },
-    "sensor.outdoor_temperature": {
-      entity_id: "sensor.outdoor_temperature",
-      state: "10.5",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "°C",
-        device_class: "temperature",
-        friendly_name: "Outdoor temperature",
-      },
-    },
-    "sensor.outdoor_humidity": {
-      entity_id: "sensor.outdoor_humidity",
-      state: "70.4",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "%",
-        device_class: "humidity",
-        friendly_name: "Outdoor humidity",
-      },
-    },
-    "device_tracker.car": {
-      entity_id: "sensor.outdoor_humidity",
-      state: "not_home",
-      attributes: {
-        friendly_name: "Car",
-        icon: "mdi:car",
-      },
-    },
     "media_player.living_room_nest_mini": {
       entity_id: "media_player.living_room_nest_mini",
-      state: "playing",
+      state: "on",
       attributes: {
         device_class: "speaker",
         volume_level: 0.18,
@@ -199,14 +161,6 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
         supported_features: 32,
       },
     },
-    "binary_sensor.kitchen_motion": {
-      entity_id: "light.kitchen_motion",
-      state: "on",
-      attributes: {
-        device_class: "motion",
-        friendly_name: "Kitchen motion",
-      },
-    },
     "light.worktop_spotlights": {
       entity_id: "light.worktop_spotlights",
       state: "off",
@@ -441,14 +395,6 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
         supported_features: 64063,
       },
     },
-    "switch.in_meeting": {
-      entity_id: "switch.in_meeting",
-      state: "on",
-      attributes: {
-        icon: "mdi:laptop-account",
-        friendly_name: "In a meeting",
-      },
-    },
     "sensor.standing_desk_height": {
       entity_id: "sensor.standing_desk_height",
       state: "72",

demo/src/configs/sections/index.ts

@@ -1,4 +1,5 @@
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
+import { demoLovelaceDescription } from "./description";
 import { demoEntitiesSections } from "./entities";
 import { demoLovelaceSections } from "./lovelace";
 
@@ -6,6 +7,7 @@ export const demoSections: DemoConfig = {
   authorName: "Home Assistant",
   authorUrl: "https://github.com/home-assistant/frontend/",
   name: "Home Demo",
+  description: demoLovelaceDescription,
   lovelace: demoLovelaceSections,
   entities: demoEntitiesSections,
   theme: () => ({}),

demo/src/configs/sections/lovelace.ts

@@ -1,5 +1,5 @@
 import { isFrontpageEmbed } from "../../util/is_frontpage";
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
 
 export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant Demo",
@@ -9,57 +9,17 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
       title: isFrontpageEmbed ? "Home Assistant" : "Demo",
       path: "home",
       icon: "mdi:home-assistant",
-      badges: [
-        {
-          type: "entity",
-          entity: "sensor.outdoor_temperature",
-          color: "red",
-        },
-        {
-          type: "entity",
-          entity: "sensor.outdoor_humidity",
-          color: "indigo",
-        },
-        {
-          type: "entity",
-          entity: "device_tracker.car",
-        },
-      ],
       sections: [
         ...(isFrontpageEmbed
           ? []
           : [
               {
-                cards: [
-                  {
-                    type: "heading",
-                    heading: `${localize("ui.panel.page-demo.config.sections.titles.welcome")} 👋`,
-                  },
-                  { type: "custom:ha-demo-card" },
-                ],
+                title: `${localize("ui.panel.page-demo.config.sections.titles.welcome")} 👋`,
+                cards: [{ type: "custom:ha-demo-card" }],
               },
             ]),
         {
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.living_room"
-              ),
-              icon: "mdi:sofa",
-              badges: [
-                {
-                  type: "entity",
-                  entity: "sensor.living_room_temperature",
-                  color: "red",
-                },
-                {
-                  type: "entity",
-                  entity: "sensor.living_room_humidity",
-                  color: "indigo",
-                },
-              ],
-            },
             {
               type: "tile",
               entity: "light.floor_lamp",
@@ -78,6 +38,13 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               type: "tile",
               entity: "light.bar_lamp",
             },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.living_room_temperature",
+              detail: 1,
+              name: "Temperature",
+            },
             {
               type: "tile",
               entity: "cover.living_room_garden_shutter",
@@ -88,25 +55,11 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               entity: "media_player.living_room_nest_mini",
             },
           ],
+          title: `🛋️ ${localize("ui.panel.page-demo.config.sections.titles.living_room")} `,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.kitchen"
-              ),
-              icon: "mdi:fridge",
-              badges: [
-                {
-                  type: "entity",
-                  entity: "binary_sensor.kitchen_motion",
-                  show_state: false,
-                  color: "blue",
-                },
-              ],
-            },
             {
               type: "tile",
               entity: "cover.kitchen_shutter",
@@ -137,17 +90,11 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               entity: "media_player.kitchen_nest_audio",
             },
           ],
+          title: `👩‍🍳 ${localize("ui.panel.page-demo.config.sections.titles.kitchen")}`,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.energy"
-              ),
-              icon: "mdi:transmission-tower",
-            },
             {
               type: "tile",
               entity: "binary_sensor.tesla_wall_connector_vehicle_connected",
@@ -185,17 +132,11 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               color: "dark-grey",
             },
           ],
+          title: `⚡️ ${localize("ui.panel.page-demo.config.sections.titles.energy")}`,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.climate"
-              ),
-              icon: "mdi:thermometer",
-            },
             {
               type: "tile",
               entity: "sun.sun",
@@ -228,38 +169,16 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               state_content: ["preset_mode", "current_temperature"],
             },
           ],
+          title: `🌤️ ${localize("ui.panel.page-demo.config.sections.titles.climate")}`,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.study"
-              ),
-              icon: "mdi:desk-lamp",
-              badges: [
-                {
-                  type: "entity",
-                  entity: "switch.in_meeting",
-                  state: "on",
-                  state_content: "name",
-                  visibility: [
-                    {
-                      condition: "state",
-                      state: "on",
-                      entity: "switch.in_meeting",
-                    },
-                  ],
-                },
-              ],
-            },
             {
               type: "tile",
               entity: "cover.study_shutter",
               name: "Shutter",
             },
-
             {
               type: "tile",
               entity: "light.study_spotlights",
@@ -276,23 +195,12 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               color: "brown",
               icon: "mdi:desk",
             },
-            {
-              type: "tile",
-              entity: "switch.in_meeting",
-              name: "Meeting mode",
-            },
           ],
+          title: `🧑‍💻 ${localize("ui.panel.page-demo.config.sections.titles.study")}`,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.outdoor"
-              ),
-              icon: "mdi:tree",
-            },
             {
               type: "tile",
               entity: "light.outdoor_light",
@@ -322,17 +230,11 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               name: "Illuminance",
             },
           ],
+          title: `🌳 ${localize("ui.panel.page-demo.config.sections.titles.outdoor")}`,
         },
         {
           type: "grid",
           cards: [
-            {
-              type: "heading",
-              heading: localize(
-                "ui.panel.page-demo.config.sections.titles.updates"
-              ),
-              icon: "mdi:update",
-            },
             {
               type: "tile",
               entity: "automation.home_assistant_auto_update",
@@ -358,6 +260,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
               icon: "mdi:home-assistant",
             },
           ],
+          title: `🎉 ${localize("ui.panel.page-demo.config.sections.titles.updates")}`,
         },
       ],
     },

demo/src/configs/teachingbirds/entities.ts

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

demo/src/configs/teachingbirds/index.ts

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

demo/src/configs/teachingbirds/lovelace.ts

@@ -1,4 +1,4 @@
-import type { DemoConfig } from "../types";
+import { DemoConfig } from "../types";
 
 export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
   title: "Home",

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 { TemplateResult } from "lit";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
+import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
+import { Entity } from "../../../src/fake_data/entity";
 
 export interface DemoConfig {
   index?: number;

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

@@ -1,15 +1,14 @@
 import { mdiTelevision } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import type { CastManager } from "../../../src/cast/cast_manager";
+import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
 import "../../../src/components/ha-icon";
-import type {
+import {
   CastConfig,
   LovelaceRow,
 } from "../../../src/panels/lovelace/entity-rows/types";
-import type { HomeAssistant } from "../../../src/types";
+import { HomeAssistant } from "../../../src/types";
 
 @customElement("cast-demo-row")
 class CastDemoRow extends LitElement implements LovelaceRow {

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

@@ -1,17 +1,13 @@
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, CSSResultGroup, 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 { LovelaceCardConfig } from "../../../src/data/lovelace/config/card";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
 import {
   demoConfigs,
   selectedDemoConfig,

demo/src/ha-demo.ts

@@ -3,10 +3,12 @@ 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 {
+  MockHomeAssistant,
+  provideHass,
+} from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
-import type { HomeAssistant } from "../../src/types";
+import { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";

demo/src/stubs/area_registry.ts

@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area_registry";
+import { AreaRegistryEntry } from "../../../src/data/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockAreaRegistry = (

demo/src/stubs/auth.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockAuth = (hass: MockHomeAssistant) => {
   hass.mockWS("config/auth/list", () => []);

demo/src/stubs/config.ts

@@ -1,9 +0,0 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockConfig = (hass: MockHomeAssistant) => {
-  hass.mockWS("validate_config", () => ({
-    actions: { valid: true },
-    conditions: { valid: true },
-    triggers: { valid: true },
-  }));
-};

demo/src/stubs/config_entries.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockConfigEntries = (hass: MockHomeAssistant) => {
   hass.mockWS("config_entries/get", () => ({

demo/src/stubs/device_registry.ts

@@ -1,4 +1,4 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockDeviceRegistry = (

demo/src/stubs/energy.ts

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

demo/src/stubs/entity_registry.ts

@@ -1,4 +1,4 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (

demo/src/stubs/events.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEvents = (hass: MockHomeAssistant) => {
   hass.mockAPI("events", () => []);

demo/src/stubs/floor_registry.ts

@@ -1,4 +1,4 @@
-import type { FloorRegistryEntry } from "../../../src/data/floor_registry";
+import { FloorRegistryEntry } from "../../../src/data/floor_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockFloorRegistry = (

demo/src/stubs/frontend.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockFrontend = (hass: MockHomeAssistant) => {
   hass.mockWS("frontend/get_user_data", () => ({

demo/src/stubs/hassio_supervisor.ts

@@ -1,4 +1,4 @@
-import type { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockHassioSupervisor = (hass: MockHomeAssistant) => {

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 { HassEntity } from "home-assistant-js-websocket";
+import { HistoryStates } from "../../../src/data/history";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const generateStateHistory = (
   state: HassEntity,

demo/src/stubs/icons.ts

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

demo/src/stubs/label_registry.ts

@@ -1,4 +1,4 @@
-import type { LabelRegistryEntry } from "../../../src/data/label_registry";
+import { LabelRegistryEntry } from "../../../src/data/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockLabelRegistry = (

demo/src/stubs/media_player.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockMediaPlayer = (hass: MockHomeAssistant) => {
   hass.mockWS("media_player_thumbnail", () => Promise.reject());

demo/src/stubs/persistent_notification.ts

@@ -1,5 +1,5 @@
-import type { PersistentNotificationMessage } from "../../../src/data/persistent_notification";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { PersistentNotificationMessage } from "../../../src/data/persistent_notification";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockPersistentNotification = (hass: MockHomeAssistant) => {
   hass.mockWS("persistent_notification/subscribe", (_msg, _hass, onChange) => {

demo/src/stubs/recorder.ts

@@ -5,12 +5,12 @@ import {
   differenceInHours,
   endOfDay,
 } from "date-fns";
-import type {
+import {
   Statistics,
   StatisticsMetaData,
   StatisticValue,
 } from "../../../src/data/recorder";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const generateMeanStatistics = (
   start: Date,

demo/src/stubs/sensor.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
   hass.mockWS("sensor/numeric_device_classes", () => [

demo/src/stubs/system_log.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSystemLog = (hass: MockHomeAssistant) => {
   hass.mockAPI("error/all", () => []);

demo/src/stubs/tags.ts

@@ -1,6 +0,0 @@
-import type { Tag } from "../../../src/data/tag";
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockTags = (hass: MockHomeAssistant) => {
-  hass.mockWS("tag/list", () => [{ id: "my-tag", name: "My Tag" }] as Tag[]);
-};

demo/src/stubs/template.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTemplate = (hass: MockHomeAssistant) => {
   hass.mockAPI("template", () =>

demo/src/stubs/todo.ts

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

demo/src/stubs/translations.ts

@@ -1,4 +1,4 @@
-import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockTranslations = (hass: MockHomeAssistant) => {
   hass.mockWS(

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

@@ -1,7 +1,5 @@
-import "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button";
-import type { TemplateResult } from "lit";
-import { html, LitElement, css, nothing } from "lit";
+import { Button } from "@material/mwc-button";
+import { html, LitElement, css, TemplateResult, 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";

gallery/src/components/demo-card.ts

@@ -1,11 +1,10 @@
 import { load } from "js-yaml";
-import type { PropertyValueMap } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, PropertyValueMap, 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";
+import { HomeAssistant } from "../../../src/types";
 
 export interface DemoCardConfig {
   heading: string;

gallery/src/components/demo-cards.ts

@@ -3,7 +3,7 @@ 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 { HomeAssistant } from "../../../src/types";
 import "./demo-card";
 import type { DemoCardConfig } from "./demo-card";
 import "../ha-demo-options";

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

@@ -4,7 +4,7 @@ import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
-import type { HomeAssistant } from "../../../src/types";
+import { HomeAssistant } from "../../../src/types";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {

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

@@ -3,7 +3,7 @@ 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 { HomeAssistant } from "../../../src/types";
 import "../ha-demo-options";
 import "./demo-more-info";
 

gallery/src/data/traces/basic_trace.ts

@@ -1,4 +1,4 @@
-import type { DemoTrace } from "./types";
+import { DemoTrace } from "./types";
 
 export const basicTrace: DemoTrace = {
   trace: {
@@ -217,22 +217,22 @@ export const basicTrace: DemoTrace = {
       id: "1615419646544",
       alias: "Ensure Party mode",
       description: "",
-      triggers: [
+      trigger: [
         {
-          trigger: "state",
+          platform: "state",
           entity_id: "input_boolean.toggle_1",
         },
       ],
-      conditions: [
+      condition: [
         {
           condition: "template",
           alias: "Test if Paulus is home",
           value_template: "{{ true }}",
         },
       ],
-      actions: [
+      action: [
         {
-          action: "input_boolean.toggle",
+          service: "input_boolean.toggle",
           target: {
             entity_id: "input_boolean.toggle_4",
           },
@@ -268,7 +268,7 @@ export const basicTrace: DemoTrace = {
           ],
           default: [
             {
-              action: "input_boolean.toggle",
+              service: "input_boolean.toggle",
               alias: "Toggle 2",
               target: {
                 entity_id: "input_boolean.toggle_2",
@@ -277,7 +277,7 @@ export const basicTrace: DemoTrace = {
           ],
         },
         {
-          action: "input_boolean.toggle",
+          service: "input_boolean.toggle",
           target: {
             entity_id: "input_boolean.toggle_4",
           },

gallery/src/data/traces/mock-demo-trace.ts

@@ -1,6 +1,6 @@
-import type { LogbookEntry } from "../../../../src/data/logbook";
-import type { AutomationTraceExtended } from "../../../../src/data/trace";
-import type { DemoTrace } from "./types";
+import { LogbookEntry } from "../../../../src/data/logbook";
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { DemoTrace } from "./types";
 
 export const mockDemoTrace = (
   tracePartial: Partial<AutomationTraceExtended>,
@@ -31,8 +31,8 @@ export const mockDemoTrace = (
       ],
     },
     config: {
-      triggers: [],
-      actions: [],
+      trigger: [],
+      action: [],
     },
     context: {
       id: "abcd",

gallery/src/data/traces/motion-light-trace.ts

@@ -1,4 +1,4 @@
-import type { DemoTrace } from "./types";
+import { DemoTrace } from "./types";
 
 export const motionLightTrace: DemoTrace = {
   trace: {
@@ -133,17 +133,17 @@ export const motionLightTrace: DemoTrace = {
     config: {
       mode: "restart",
       max_exceeded: "silent",
-      triggers: [
+      trigger: [
         {
-          trigger: "state",
+          platform: "state",
           entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
           from: "off",
           to: "on",
         },
       ],
-      actions: [
+      action: [
         {
-          action: "light.turn_on",
+          service: "light.turn_on",
           target: {
             entity_id: "light.elgato_key_light_air",
           },
@@ -162,7 +162,7 @@ export const motionLightTrace: DemoTrace = {
           delay: 0,
         },
         {
-          action: "light.turn_off",
+          service: "light.turn_off",
           target: {
             entity_id: "light.elgato_key_light_air",
           },

gallery/src/data/traces/types.ts

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

gallery/src/ha-gallery.ts

@@ -1,8 +1,7 @@
 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 { LitElement, PropertyValues, 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";

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

@@ -3,11 +3,11 @@ 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 { 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";
+import { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("scene", "kitchen_morning", "scening", {
@@ -48,7 +48,7 @@ const ACTIONS = [
   {
     wait_for_trigger: [
       {
-        trigger: "state",
+        platform: "state",
         entity_id: "input_boolean.toggle_1",
       },
     ],
@@ -121,7 +121,7 @@ const ACTIONS = [
 ];
 
 const initialAction: Action = {
-  action: "light.turn_on",
+  service: "light.turn_on",
   target: {
     entity_id: "light.kitchen",
   },
@@ -142,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         <div class="action">
           <span>
             ${this._action
-              ? describeAction(this.hass, [], [], {}, this._action)
+              ? describeAction(this.hass, [], [], [], this._action)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -155,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
-              <span>${describeAction(this.hass, [], [], {}, conf as any)}</span>
+              <span>${describeAction(this.hass, [], [], [], conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `

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

@@ -3,11 +3,11 @@ 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 { 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";
+import { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("light", "kitchen", "on", {

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

@@ -3,11 +3,11 @@ 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 { 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";
+import { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
   getEntity("light", "kitchen", "on", {
@@ -22,52 +22,46 @@ const ENTITIES = [
 ];
 
 const triggers = [
-  { trigger: "state", entity_id: "light.kitchen", from: "off", to: "on" },
-  { trigger: "mqtt" },
+  { platform: "state", entity_id: "light.kitchen", from: "off", to: "on" },
+  { platform: "mqtt" },
   {
-    trigger: "geo_location",
+    platform: "geo_location",
     source: "test_source",
     zone: "zone.home",
     event: "enter",
   },
-  { trigger: "homeassistant", event: "start" },
+  { platform: "homeassistant", event: "start" },
   {
-    trigger: "numeric_state",
+    platform: "numeric_state",
     entity_id: "light.kitchen",
     attribute: "brightness",
     below: 80,
     above: 20,
   },
-  { trigger: "sun", event: "sunset" },
-  { trigger: "time_pattern" },
-  { trigger: "time_pattern", hours: "*", minutes: "/5", seconds: "10" },
-  { trigger: "webhook" },
-  { trigger: "persistent_notification" },
+  { platform: "sun", event: "sunset" },
+  { platform: "time_pattern" },
+  { platform: "time_pattern", hours: "*", minutes: "/5", seconds: "10" },
+  { platform: "webhook" },
+  { platform: "persistent_notification" },
   {
-    trigger: "zone",
+    platform: "zone",
     entity_id: "person.person",
     zone: "zone.home",
     event: "enter",
   },
-  { trigger: "tag" },
-  { trigger: "time", at: "15:32" },
-  { trigger: "template" },
-  { trigger: "conversation", command: "Turn on the lights" },
+  { platform: "tag" },
+  { platform: "time", at: "15:32" },
+  { platform: "template" },
+  { platform: "conversation", command: "Turn on the lights" },
   {
-    trigger: "conversation",
+    platform: "conversation",
     command: ["Turn on the lights", "Turn the lights on"],
   },
-  { trigger: "event", event_type: "homeassistant_started" },
-  {
-    triggers: [
-      { trigger: "state", entity_id: "light.kitchen", to: "on" },
-      { trigger: "state", entity_id: "light.kitchen", to: "off" },
-    ],
-  },
+  { platform: "event", event_type: "homeassistant_started" },
 ];
 
 const initialTrigger: Trigger = {
-  trigger: "state",
+  platform: "state",
   entity_id: "light.kitchen",
 };
 

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

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -19,7 +18,7 @@ import { HaSceneAction } from "../../../../src/panels/config/automation/action/t
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
 import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
-import type { Action } from "../../../../src/data/script";
+import { 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";

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

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -12,6 +11,7 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 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 { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
 import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
 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";
@@ -19,67 +19,62 @@ import { HaTemplateCondition } from "../../../../src/panels/config/automation/co
 import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
-import { 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[] }[] = [
   {
     name: "State",
-    conditions: [{ ...HaStateCondition.defaultConfig }],
+    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
   },
   {
     name: "Numeric State",
-    conditions: [{ ...HaNumericStateCondition.defaultConfig }],
+    conditions: [
+      { condition: "numeric_state", ...HaNumericStateCondition.defaultConfig },
+    ],
   },
   {
     name: "Sun",
-    conditions: [{ ...HaSunCondition.defaultConfig }],
+    conditions: [{ condition: "sun", ...HaSunCondition.defaultConfig }],
   },
   {
     name: "Zone",
-    conditions: [{ ...HaZoneCondition.defaultConfig }],
+    conditions: [{ condition: "zone", ...HaZoneCondition.defaultConfig }],
   },
   {
     name: "Time",
-    conditions: [{ ...HaTimeCondition.defaultConfig }],
+    conditions: [{ condition: "time", ...HaTimeCondition.defaultConfig }],
   },
   {
     name: "Template",
-    conditions: [{ ...HaTemplateCondition.defaultConfig }],
+    conditions: [
+      { condition: "template", ...HaTemplateCondition.defaultConfig },
+    ],
   },
   {
     name: "Device",
-    conditions: [{ ...HaDeviceCondition.defaultConfig }],
+    conditions: [{ condition: "device", ...HaDeviceCondition.defaultConfig }],
   },
   {
     name: "And",
-    conditions: [{ ...HaAndCondition.defaultConfig }],
+    conditions: [{ condition: "and", ...HaLogicalCondition.defaultConfig }],
   },
   {
     name: "Or",
-    conditions: [{ ...HaOrCondition.defaultConfig }],
+    conditions: [{ condition: "or", ...HaLogicalCondition.defaultConfig }],
   },
   {
     name: "Not",
-    conditions: [{ ...HaNotCondition.defaultConfig }],
+    conditions: [{ condition: "not", ...HaLogicalCondition.defaultConfig }],
   },
   {
     name: "Trigger",
-    conditions: [{ ...HaTriggerCondition.defaultConfig }],
+    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
   },
   {
     name: "Shorthand",
     conditions: [
-      {
-        ...HaAndCondition.defaultConfig,
-      },
-      {
-        ...HaOrCondition.defaultConfig,
-      },
-      {
-        ...HaNotCondition.defaultConfig,
-      },
+      { and: HaLogicalCondition.defaultConfig.conditions },
+      { or: HaLogicalCondition.defaultConfig.conditions },
+      { not: HaLogicalCondition.defaultConfig.conditions },
     ],
   },
 ];

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

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -9,9 +8,6 @@ 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";
@@ -30,53 +26,59 @@ import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger
 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[] }[] = [
   {
     name: "State",
-    triggers: [{ ...HaStateTrigger.defaultConfig }],
+    triggers: [{ platform: "state", ...HaStateTrigger.defaultConfig }],
   },
 
   {
     name: "MQTT",
-    triggers: [{ ...HaMQTTTrigger.defaultConfig }],
+    triggers: [{ platform: "mqtt", ...HaMQTTTrigger.defaultConfig }],
   },
 
   {
     name: "GeoLocation",
-    triggers: [{ ...HaGeolocationTrigger.defaultConfig }],
+    triggers: [
+      { platform: "geo_location", ...HaGeolocationTrigger.defaultConfig },
+    ],
   },
 
   {
     name: "Home Assistant",
-    triggers: [{ ...HaHassTrigger.defaultConfig }],
+    triggers: [{ platform: "homeassistant", ...HaHassTrigger.defaultConfig }],
   },
 
   {
     name: "Numeric State",
-    triggers: [{ ...HaNumericStateTrigger.defaultConfig }],
+    triggers: [
+      { platform: "numeric_state", ...HaNumericStateTrigger.defaultConfig },
+    ],
   },
 
   {
     name: "Sun",
-    triggers: [{ ...HaSunTrigger.defaultConfig }],
+    triggers: [{ platform: "sun", ...HaSunTrigger.defaultConfig }],
   },
 
   {
     name: "Time Pattern",
-    triggers: [{ ...HaTimePatternTrigger.defaultConfig }],
+    triggers: [
+      { platform: "time_pattern", ...HaTimePatternTrigger.defaultConfig },
+    ],
   },
 
   {
     name: "Webhook",
-    triggers: [{ ...HaWebhookTrigger.defaultConfig }],
+    triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
   },
 
   {
     name: "Persistent Notification",
     triggers: [
       {
+        platform: "persistent_notification",
         ...HaPersistentNotificationTrigger.defaultConfig,
       },
     ],
@@ -84,47 +86,43 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 
   {
     name: "Zone",
-    triggers: [{ ...HaZoneTrigger.defaultConfig }],
+    triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
   },
 
   {
     name: "Tag",
-    triggers: [{ ...HaTagTrigger.defaultConfig }],
+    triggers: [{ platform: "tag", ...HaTagTrigger.defaultConfig }],
   },
 
   {
     name: "Time",
-    triggers: [{ ...HaTimeTrigger.defaultConfig }],
+    triggers: [{ platform: "time", ...HaTimeTrigger.defaultConfig }],
   },
 
   {
     name: "Template",
-    triggers: [{ ...HaTemplateTrigger.defaultConfig }],
+    triggers: [{ platform: "template", ...HaTemplateTrigger.defaultConfig }],
   },
 
   {
     name: "Event",
-    triggers: [{ ...HaEventTrigger.defaultConfig }],
+    triggers: [{ platform: "event", ...HaEventTrigger.defaultConfig }],
   },
 
   {
     name: "Device Trigger",
-    triggers: [{ ...HaDeviceTrigger.defaultConfig }],
+    triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
   },
   {
     name: "Sentence",
     triggers: [
-      { ...HaConversationTrigger.defaultConfig },
+      { platform: "conversation", ...HaConversationTrigger.defaultConfig },
       {
-        trigger: "conversation",
+        platform: "conversation",
         command: ["Turn on the lights", "Turn the lights on"],
       },
     ],
   },
-  {
-    name: "Trigger list",
-    triggers: [{ ...HaTriggerList.defaultConfig }],
-  },
 ];
 
 @customElement("demo-automation-editor-trigger")
@@ -144,9 +142,6 @@ export class DemoAutomationEditorTrigger extends LitElement {
     mockDeviceRegistry(hass);
     mockAreaRegistry(hass);
     mockHassioSupervisor(hass);
-    mockConfig(hass);
-    mockTags(hass);
-    mockAuth(hass);
   }
 
   protected render(): TemplateResult {

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

@@ -5,9 +5,9 @@ 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 { HomeAssistant } from "../../../../src/types";
 import { mockDemoTrace } from "../../data/traces/mock-demo-trace";
-import type { DemoTrace } from "../../data/traces/types";
+import { DemoTrace } from "../../data/traces/types";
 
 const traces: DemoTrace[] = [
   mockDemoTrace({ state: "running" }),

gallery/src/pages/automation/trace.ts

@@ -6,10 +6,10 @@ 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 { 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";
+import { DemoTrace } from "../../data/traces/types";
 
 const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";

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

@@ -1,5 +1,4 @@
-import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
+import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../../src/components/ha-bar";

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

@@ -1,5 +1,4 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement, TemplateResult, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/chips/ha-chip-set";

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

@@ -1,11 +1,10 @@
-import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
+import { html, css, LitElement, TemplateResult } 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";
+import { HomeAssistant } from "../../../../src/types";
 
 @customElement("demo-components-ha-circular-progress")
 export class DemoHaCircularProgress extends LitElement {

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

@@ -4,8 +4,7 @@ import {
   mdiFanSpeed3,
   mdiLightbulb,
 } from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";

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

@@ -1,5 +1,4 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-circular-slider";

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

@@ -1,5 +1,4 @@
-import type { TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-number-buttons";

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

@@ -1,6 +1,5 @@
 import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, TemplateResult, css, html, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import "../../../../src/components/ha-card";